/* NOMBRE_APP · sección 4 (entrar, planes, pago, cuenta, desbloquear y legales) y, al final, el bloque
   heredado de «Plazos y cifras» (es de la s3: se deja como estaba). El bloque de portada heredado se ha
   borrado: la portada nueva de la fase 4 vive en portada.css (sección 1). */

/* ── Sección 4 (fase 4): entrar, cuenta, planes, pago, desbloqueo y legales ─────
   Papel cálido, tarjetas redondeadas con sombra muy suave, botones píldora y títulos en serif.
   Rasgo propio: las cifras que importan (precio, fechas de cobro, número de pregunta del libro,
   código y reloj) van en la letra de las cifras con números tabulares, como los folios de un libro.
   Tokens propios con prefijo --s4-: alias de los tokens comunes de base.css (sección 1) y dos valores propios. */
.s4 {
  --s4-papel: var(--papel);
  --s4-crema: var(--crema);
  --s4-tarjeta: var(--superficie);
  --s4-borde: var(--linea);
  --s4-noche: var(--marino-profundo);
  --s4-noche-texto: #c3cfe2;            /* texto secundario sobre --marino-profundo (9,6:1) */
  --s4-serif: var(--letra-serif);
  --s4-display: var(--letra-display);
  --s4-cifras: 650 1em/1 var(--letra-cond);
  --s4-radio: var(--radio-24);
  --s4-radio-m: var(--radio-16);
  --s4-sombra: var(--sombra-suave);
  --s4-medida: 64ch;
  --s4-hueco: clamp(28px, 4vw, 44px);
  color: var(--texto);
}
.s4 .boton-grande { min-height: 52px; padding-inline: 26px; }
.s4 .boton-ancho { white-space: normal; text-align: center; }
.s4-cabeza { margin-bottom: var(--s4-hueco); }
.s4-h1 { font: 600 var(--tam-3xl, 1.875rem)/1.1 var(--s4-serif); letter-spacing: -.012em; color: var(--tinta); text-wrap: balance; }
@media (min-width: 1024px) { .s4-h1 { font-size: var(--tam-4xl, 2.375rem); } }
.s4-h2 { font: 600 var(--tam-xl, 1.25rem)/1.25 var(--s4-serif); color: var(--tinta); }
.s4-h3 { margin-top: 28px; font-size: .9375rem; font-weight: 800; color: var(--tinta); }
.s4-entradilla { margin-top: 10px; max-width: 60ch; color: var(--texto); font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
.s4-entradilla strong { color: var(--tinta); }
.s4-nota { color: var(--tenue); font-size: .875rem; line-height: 1.5; }
.s4-correo { overflow-wrap: anywhere; }
.s4-error { color: var(--mal-tinta); font-size: .875rem; font-weight: 650; }
.s4 p + p, .s4 p + .fila, .s4 .fila + .s4-nota, .s4 dl + p, .s4 ul + p, .s4 ol + p { margin-top: 12px; }
.s4 .aviso + * { margin-top: 14px; }

/* Formularios: una columna, la acción al final. */
.s4-form { display: grid; gap: 16px; margin-top: 24px; justify-items: start; }
.s4-form > * { width: 100%; }
.s4-form > div:empty { display: none; }
.s4-form > .boton:not(.boton-ancho) { width: auto; }
.s4-grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
.s4-grupo > legend { margin-bottom: 10px; padding: 0; color: var(--tinta-2); font-size: .875rem; font-weight: 750; }

/* Listas: pasos (secuencia real, numerada), lista corta y «lo que incluye» con su marca. */
.s4-pasos { display: grid; gap: 10px; margin-top: 14px; list-style: none; counter-reset: s4paso; }
.s4-pasos li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 10px; line-height: 1.5; counter-increment: s4paso; }
.s4-pasos li::before { content: counter(s4paso); color: var(--tinta); font: var(--s4-cifras); font-size: 1.25rem; text-align: right; }
.s4-lista { display: grid; gap: 6px; margin-top: 10px; padding-left: 1.1em; line-height: 1.5; }
.s4-lista li::marker { color: var(--tenue); }
.s4-incluye { display: grid; gap: 10px; list-style: none; }
.s4-incluye li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; line-height: 1.45; }
.s4-incluye svg.icono { width: 18px; height: 18px; margin-top: 2px; color: var(--ok-tinta); }

/* Ficha: pares «rótulo / dato» con una línea fina entre filas. */
.s4-ficha { margin: 12px 0 0; }
.s4-ficha > div { display: grid; grid-template-columns: minmax(7rem, 9.5rem) minmax(0, 1fr); gap: 4px 20px; padding-block: 12px; border-top: 1px solid var(--s4-borde); }
.s4-ficha > div:last-child { border-bottom: 1px solid var(--s4-borde); }
.s4-ficha dt { color: var(--tinta); font-size: .9375rem; font-weight: 750; }
.s4-ficha dd { margin: 0; line-height: 1.5; }
.s4-ficha--apilada > div { grid-template-columns: 1fr; }
@media (max-width: 479px) { .s4-ficha > div { grid-template-columns: 1fr; } }

/* Estado (suscripción, captura): título con un punto de color y explicación debajo. */
.s4-estado { display: grid; gap: 4px; }
.s4-estado strong { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); font-size: 1.0625rem; font-weight: 800; }
.s4-estado strong::before, .cuenta__punto { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--tenue); flex: none; }
.s4-estado[data-tono="ok"] strong::before, [data-tono="ok"] .cuenta__punto { background: var(--ok); }
.s4-estado[data-tono="ambar"] strong::before, [data-tono="ambar"] .cuenta__punto { background: var(--ambar); }
.s4-estado[data-tono="mal"] strong::before { background: var(--mal); }
.s4-estado + .fila, .s4-estado + .s4-nota, .s4-estado + .boton { margin-top: 14px; }
.s4-etiqueta { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border: 1px solid var(--s4-borde); border-radius: 999px; background: var(--s4-crema); color: var(--tinta-2); font-size: .8125rem; font-weight: 750; white-space: nowrap; }
.s4-sello { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px; border-radius: 999px; background: var(--ok-suave); color: var(--ok-tinta); font-size: .8125rem; font-weight: 800; white-space: nowrap; }

/* Plegable de ayuda */
.s4-detalles { margin-top: 28px; border-top: 1px solid var(--s4-borde); }
.s4-detalles summary { display: flex; align-items: center; min-height: 48px; color: var(--tinta-2); font-size: .9375rem; font-weight: 700; cursor: pointer; }
.s4-detalles summary { list-style: none; justify-content: space-between; }
.s4-detalles summary::-webkit-details-marker { display: none; }
.s4-detalles summary::after { content: ''; width: 8px; height: 8px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform var(--mv); }
.s4-detalles[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.s4-detalles summary:hover { color: var(--tinta); }
.s4-detalles .s4-ficha { margin: 0 0 8px; }
.s4-detalles .s4-ficha > div { padding-block: 8px; border: 0; }
.s4-detalles dd { color: var(--tenue); font-size: .9375rem; }

/* ── Entrar: pantalla partida ── */
/* La pantalla ocupa toda la ventana: se ocultan la cabecera y el pie públicos solo aquí (la marca va dentro). */
body:has(.s4-partida) > .cabecera-publica, body:has(.s4-partida) > .pie { display: none; }
main.publico:has(.s4-partida) { max-width: none; padding: 0; }
.s4-partida { display: grid; min-height: 100vh; min-height: 100dvh; background: var(--s4-papel); }
.entrar__escaparate { display: none; }
.entrar__lado { display: grid; align-content: start; justify-items: center; padding: 20px 16px 56px; }
.entrar__marca-movil, .entrar__paso { width: 100%; max-width: 26rem; }
.entrar__marca-movil { display: flex; align-items: center; min-height: 44px; margin-bottom: clamp(28px, 8vw, 56px); }
.entrar__paso .s4-form { margin-top: 28px; }
.entrar__paso .campo > span { font-size: .9375rem; }
.entrar__paso .campo small { margin-top: 2px; }
.entrar__legal { margin-top: 20px; }
.entrar__enlaces { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; }
.entrar__enlaces a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 650; }
.entrar__ayuda { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--s4-borde); }
.entrar__ayuda .s4-h3 { margin-top: 0; }
.entrar__ayuda p { margin-top: 6px; color: var(--texto); font-size: .9375rem; line-height: 1.5; }
.entrar__ayuda .fila { margin-top: 14px; }
.entrar__ayuda [data-reenviar] span { font-variant-numeric: tabular-nums; }

/* Código: 6 casillas grandes. */
.s4-otp { margin: 0; padding: 0; border: 0; min-width: 0; }
.s4-otp legend { margin-bottom: 10px; padding: 0; color: var(--tinta-2); font-size: .9375rem; font-weight: 700; }
.s4-otp__casillas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 2vw, 10px); max-width: 24rem; }
.s4-otp__c {
  width: 100%; min-width: 0; height: clamp(54px, 15vw, 64px); padding: 0; border: 1.5px solid var(--linea-fuerte); border-radius: 14px;
  background: var(--s4-tarjeta); color: var(--tinta); font: var(--s4-cifras); font-size: clamp(1.625rem, 7vw, 2rem); text-align: center;
  font-variant-numeric: tabular-nums; caret-color: var(--marca); transition: border-color var(--mv), box-shadow var(--mv);
}
.s4-otp__c:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-anillo); }
.s4-otp__c[aria-invalid="true"] { border-color: var(--mal); background: var(--mal-suave); }
.s4-otp + .ayuda { margin-top: -6px; }

@media (min-width: 960px) {
  .s4-partida { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .entrar__marca-movil { display: none; }
  .entrar__lado { align-content: center; padding: 64px clamp(32px, 5vw, 80px); background: var(--s4-crema); }
  .entrar__escaparate {
    position: sticky; top: 0; display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; grid-template-rows: auto 1fr auto;
    gap: 24px 40px; height: 100vh; height: 100dvh; min-height: 640px; padding: 36px clamp(32px, 4vw, 56px); overflow: hidden;
    background: var(--s4-noche); color: var(--s4-noche-texto);
  }
  .entrar__marca { grid-column: 1 / -1; }
  .entrar__escaparate .marca, .entrar__escaparate .marca:hover { color: #fff; }
  .entrar__escaparate .marca__sello { color: var(--marino-claro); }
  .entrar__escaparate :focus-visible { outline-color: #fff; }
  .entrar__presenta { align-self: center; }
  .entrar__titular { color: #fff; font: 700 clamp(2.5rem, 3.4vw, 3.25rem)/1 var(--s4-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
  .entrar__sub { max-width: 34ch; margin-top: 18px; font-size: 1.0625rem; line-height: 1.5; }
  .entrar__ventajas { display: grid; gap: 14px; margin-top: 32px; list-style: none; }
  .entrar__ventajas li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--blanco); font-size: .9375rem; font-weight: 600; line-height: 1.45; }
  .entrar__ventajas svg.icono { width: 20px; height: 20px; margin-top: 1px; color: var(--marino-claro); }
  .entrar__pie { grid-column: 1; align-self: end; color: var(--s4-noche-texto); font-size: .8125rem; }
  .s4-movil { grid-column: 2; grid-row: 2 / span 2; align-self: end; margin-bottom: -96px; }
}

/* Móvil de muestra (decorativo): una pregunta del libro corregida con su cita del BOE. */
.s4-movil { width: 15.5rem; padding: 9px; border-radius: 40px; background: #0b1424; box-shadow: 0 30px 60px rgb(0 0 0 / .35), inset 0 0 0 1.5px #3a4a66; transform: rotate(-3deg); transform-origin: 50% 100%; }
.s4-movil__pantalla { display: grid; align-content: start; gap: 8px; min-height: 31rem; padding: 10px 14px 0; border-radius: 32px; background: var(--s4-papel); color: var(--texto); font-size: 11px; line-height: 1.35; overflow: hidden; }
.s4-movil__estado { display: flex; align-items: center; justify-content: space-between; color: var(--tinta); font-size: 11px; font-weight: 700; }
.s4-movil__isla { width: 64px; height: 18px; border-radius: 999px; background: #0b1424; }
.s4-movil__iconos { display: inline-flex; gap: 3px; }
.s4-movil__iconos svg.icono { width: 12px; height: 12px; }
.s4-movil__libro { margin-top: 10px; color: var(--tenue); font-size: 10px; font-weight: 700; }
.s4-movil__num { margin-top: -6px !important; color: var(--tinta); font: 600 20px/1.1 var(--s4-serif); }
.s4-movil__enunciado { color: var(--tinta); font-size: 12px; font-weight: 650; line-height: 1.4; }
.s4-movil__opciones { display: grid; gap: 5px; list-style: none; }
.s4-movil__opciones li { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--s4-borde); border-radius: 10px; background: #fff; color: var(--tinta-2); font-weight: 600; }
.s4-movil__opciones b { color: var(--tenue); font-weight: 700; }
.s4-movil__opciones .s4-movil__bien { border-color: var(--ok); background: var(--ok-suave); color: var(--ok-tinta); }
.s4-movil__bien b { color: var(--ok-tinta); }
.s4-movil__bien svg.icono { width: 13px; height: 13px; margin-left: auto; }
.s4-movil__cita { padding: 9px 10px; border-radius: 12px; background: var(--s4-crema); }
.s4-movil__acierto { display: flex; align-items: center; gap: 5px; color: var(--ok-tinta); font-weight: 800; }
.s4-movil__acierto svg.icono { width: 13px; height: 13px; }
.s4-movil__ley { margin-top: 5px !important; color: var(--tinta-2); font: 400 11.5px/1.45 var(--s4-serif); }
.s4-movil__ref { margin-top: 4px !important; color: var(--tenue); font-size: 9.5px; font-weight: 700; }
.s4-movil__tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin: 6px -14px 0; padding: 8px 6px 18px; border-top: 1px solid var(--s4-borde); background: #fff; }
.s4-movil__tabs span { display: grid; justify-items: center; gap: 2px; color: var(--tenue); font-size: 9px; font-weight: 650; }
.s4-movil__tabs svg.icono { width: 15px; height: 15px; }
.s4-movil__tabs .s4-movil__tab--activa { color: var(--marca); }

/* Dispositivos (entrar) */
.s4-dispositivos { display: grid; gap: 8px; list-style: none; }
.s4-disp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; }
.s4-disp strong { display: block; color: var(--tinta); font-weight: 750; overflow-wrap: anywhere; }
.s4-disp small { display: block; color: var(--tenue); font-size: .8125rem; line-height: 1.45; }
.s4-disp--elegible { grid-template-columns: auto auto minmax(0, 1fr); min-height: 64px; padding: 12px 16px; border: 1px solid var(--s4-borde); border-radius: var(--s4-radio-m); background: var(--s4-tarjeta); cursor: pointer; transition: border-color 120ms ease-out, background-color 120ms ease-out; }
.s4-disp--elegible > svg.icono { color: var(--tenue); }
.s4-disp--elegible input { width: 20px; height: 20px; margin: 0; accent-color: var(--marca); }
.s4-disp--elegible:has(input:checked) { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); background: var(--marca-suave); }
.s4-disp--elegible:has(input:focus-visible) { outline: 3px solid var(--marca); outline-offset: 2px; }
@media (max-width: 379px) { .s4-disp--elegible { grid-template-columns: auto minmax(0, 1fr); } .s4-disp--elegible > svg.icono { display: none; } }

/* ── Planes: tarjetas de precio ── */
.planes { max-width: 1080px; }
.planes__tarjetas { display: grid; gap: 16px; margin-top: 8px; }
.s4-plan { min-width: 0; display: grid; align-content: start; gap: 18px; padding: clamp(22px, 4vw, 32px); border: 1px solid var(--s4-borde); border-radius: var(--s4-radio); background: var(--s4-tarjeta); box-shadow: var(--s4-sombra); }
.s4-plan--gratis { background: var(--s4-crema); box-shadow: none; }
.s4-plan--sus { border: 2px solid var(--marca); }
.s4-plan__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.s4-plan__nombre { font: 600 1.5rem/1.15 var(--s4-serif); color: var(--tinta); }
.s4-plan__para { margin-top: -6px !important; color: var(--tenue); font-size: .9375rem; }
.s4-plan__accion { margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--s4-borde); }
.s4-plan__accion > .s4-nota { margin-bottom: 14px; }
.planes__form { margin-top: 0; gap: 12px; }
.s4-precio { display: flex; align-items: flex-end; gap: 12px; margin: 0; color: var(--tinta); }
.s4-precio__cifra { font: 700 clamp(3.5rem, 2.8rem + 3vw, 4.5rem)/.85 var(--s4-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.s4-precio__cifra small { font-size: .4em; letter-spacing: -.01em; vertical-align: top; }
.s4-precio__texto { padding-bottom: 3px; color: var(--texto); font-size: .9375rem; font-weight: 650; line-height: 1.3; }
.s4-junto-boton { margin-top: -2px; color: var(--tinta); font-size: .9375rem; font-weight: 700; line-height: 1.45; }
@media (min-width: 900px) { .planes__tarjetas { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; align-items: start; } }

.planes__info { display: grid; gap: var(--s4-hueco); margin-top: calc(var(--s4-hueco) * 1.3); }
.planes__cancelar { margin-top: 12px; max-width: 52ch; line-height: 1.55; }
.planes__info .s4-ficha { margin-top: 16px; }
@media (min-width: 900px) { .planes__info { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
/* Calendario de cobros: una secuencia de fechas unidas por una línea. */
.s4-cobros { display: grid; margin-top: 18px; list-style: none; }
.s4-cobros li { position: relative; display: grid; gap: 2px; padding: 0 0 20px 28px; }
.s4-cobros li::before { content: ''; position: absolute; left: 5px; top: 8px; width: 12px; height: 12px; border: 2px solid var(--marca); border-radius: 50%; background: var(--s4-papel); }
.s4-cobros li::after { content: ''; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px; background: var(--s4-borde); }
.s4-cobros li:last-child { padding-bottom: 0; }
.s4-cobros li:last-child::after { display: none; }
.s4-cobros .s4-cobros__hoy::before { background: var(--marca); }
.s4-cobros__cuando { color: var(--tinta); font: var(--s4-cifras); font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.s4-cobros__que { line-height: 1.5; }

.s4-bloque { margin-top: calc(var(--s4-hueco) * 1.4); }
.s4-bloque > .s4-nota { margin-top: 6px; max-width: var(--s4-medida); }
.s4-tabla { margin-top: 20px; padding: 8px clamp(16px, 3vw, 28px); border: 1px solid var(--s4-borde); border-radius: var(--s4-radio); background: var(--s4-tarjeta); }
.s4-comparar { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
.s4-comparar th, .s4-comparar td { padding: 14px 16px 14px 0; border-top: 1px solid var(--s4-borde); text-align: left; vertical-align: top; }
.s4-comparar thead th { padding-top: 12px; border-top: 0; color: var(--tinta); font-size: .875rem; font-weight: 800; }
.s4-comparar thead td { border-top: 0; }
.s4-comparar tbody th { width: 34%; color: var(--tinta); font-weight: 750; }
.s4-comparar tbody td { width: 33%; }
.s4-comparar__precio > * { font-weight: 800; color: var(--tinta); }
.s4-comparar__precio td { font: var(--s4-cifras); font-size: 1.25rem; }
@media (max-width: 639px) {
  .s4-comparar thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .s4-comparar tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding-block: 14px; border-top: 1px solid var(--s4-borde); }
  .s4-comparar tbody tr:first-child { border-top: 0; }
  .s4-comparar th, .s4-comparar td { width: auto !important; padding: 0; border: 0; }
  .s4-comparar tbody th { grid-column: 1 / -1; }
  .s4-comparar td::before { content: attr(data-etiqueta); display: block; color: var(--tenue); font: 650 .75rem/1.4 var(--letra); }
}

/* ── Pago recibido: tarjeta centrada y celebración sobria ── */
.pago { display: grid; justify-items: center; padding-block: clamp(8px, 4vw, 48px); }
.pago__tarjeta { width: 100%; max-width: 36rem; padding: clamp(24px, 5vw, 44px); border: 1px solid var(--s4-borde); border-radius: var(--s4-radio); background: var(--s4-tarjeta); box-shadow: var(--s4-sombra); }
[data-pago="pagado"] .pago__tarjeta { text-align: center; }
[data-pago="pagado"] .s4-entradilla { margin-inline: auto; }
[data-pago="pagado"] .s4-ficha { text-align: left; }
.pago .s4-ficha { margin-top: 28px; }
.pago .fila { margin-top: 28px; }
.pago .giro { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.pago__acciones { display: grid; justify-items: center; gap: 8px; margin-top: 28px; }
.pago__sello { width: 72px; height: 72px; margin: 0 auto 20px; color: var(--ok); }
.pago__sello .ilustracion { width: 100%; height: 100%; }
.pago__sello svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.pago__aro { stroke-width: 3; stroke-dasharray: 183; stroke-dashoffset: 0; opacity: .35; animation: s4-aro 700ms cubic-bezier(.2, .7, .2, 1) both; }
.pago__trazo { stroke-width: 4.5; stroke-dasharray: 42; stroke-dashoffset: 0; animation: s4-trazo 420ms 520ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes s4-aro { from { stroke-dashoffset: 183; } }
@keyframes s4-trazo { from { stroke-dashoffset: 42; } }

/* ── Cuenta: ajustes en lista agrupada ── */
.cuenta { display: grid; gap: var(--s4-hueco); max-width: 1040px; }
.cuenta__cabeza { display: flex; align-items: center; gap: 16px; }
.cuenta__cabeza > div { min-width: 0; }
.cuenta__cabeza .s4-correo { margin-top: 2px; color: var(--tenue); font-size: 1rem; }
.cuenta__avatar { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--marca); color: #fff; font: 600 1.5rem/1 var(--s4-serif); }
.cuenta__estado { margin-top: 24px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--s4-borde); border-radius: var(--s4-radio); background: var(--s4-tarjeta); box-shadow: var(--s4-sombra); }
.cuenta__estado[data-tono="ambar"] { border-color: var(--ambar-borde); background: var(--ambar-suave); }
.cuenta__frase { margin-top: 6px; color: var(--tinta); font: 600 1.5rem/1.2 var(--s4-serif); text-wrap: balance; }
.cuenta__detalle { display: flex; gap: 10px; align-items: baseline; margin-top: 10px !important; line-height: 1.5; }
.cuenta__detalle strong { color: var(--tinta); }
.cuenta__estado .fila { margin-top: 18px; }
.cuenta__estado .s4-nota { margin-top: 12px; }
.cuenta__grupos { display: grid; gap: 32px; min-width: 0; }
@media (min-width: 1100px) {
  .cuenta { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 48px; align-items: start; }
  .cuenta__lado { position: sticky; top: 96px; }
}
.s4-grupo-ajustes { min-width: 0; }
.s4-grupo-ajustes__titulo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 10px 4px; color: var(--tinta-2); font-size: .9375rem; font-weight: 750; }
.s4-grupo-ajustes__cuenta { color: var(--tenue); font-size: .875rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.cuenta__estado .s4-grupo-ajustes__titulo { margin: 0; color: var(--tenue); font-size: .875rem; }
.s4-grupo-ajustes > .s4-nota { margin: 10px 4px 0; max-width: 60ch; }
.s4-ajustes { list-style: none; border: 1px solid var(--s4-borde); border-radius: var(--s4-radio-m); background: var(--s4-tarjeta); overflow: hidden; }
.s4-ajustes > li + li { border-top: 1px solid var(--s4-borde); }
.s4-ajuste {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; width: 100%; min-height: 60px;
  padding: 12px 16px; border: 0; background: transparent; color: var(--tinta); font: inherit; text-align: left; text-decoration: none;
}
a.s4-ajuste, button.s4-ajuste { cursor: pointer; transition: background-color var(--mv); }
a.s4-ajuste:hover, button.s4-ajuste:hover { background: var(--s4-crema); color: var(--tinta); text-decoration: none; }
.s4-ajuste:focus-visible { outline: 3px solid var(--marca); outline-offset: -3px; border-radius: var(--s4-radio-m); }
.s4-ajuste > svg.icono:first-child { box-sizing: content-box; width: 18px; height: 18px; padding: 7px; border-radius: 9px; background: var(--marino-suave); color: var(--marino); }
.s4-ajuste > svg.icono:last-child:not(:first-child) { width: 18px; height: 18px; color: var(--linea-fuerte); }
.s4-ajuste__texto { display: grid; gap: 2px; min-width: 0; }
.s4-ajuste__texto strong { font-weight: 700; overflow-wrap: anywhere; }
.s4-ajuste__texto small { color: var(--tenue); font-size: .8125rem; line-height: 1.45; }
.s4-ajuste--peligro, .s4-ajuste--peligro:hover { color: var(--mal-tinta); }
.s4-ajuste--peligro > svg.icono:first-child { background: var(--mal-suave); color: var(--mal-tinta); }
.s4-ajuste > .ip:first-child { width: 34px; height: 34px; }
a.s4-ajuste.s4-ajuste--peligro:hover, button.s4-ajuste--peligro:hover { background: var(--mal-suave); }
@media (max-width: 379px) {
  .s4-ajuste { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 14px; }
  .s4-ajuste > svg.icono:first-child, .s4-ajuste > .ip:first-child { display: none; }
}

/* ── Desbloquear: el mismo lenguaje (tarjetas, píldoras, folios grandes) ── */
.desbloquear { max-width: 1080px; }
.desbloquear__cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 24px; }
.desbloquear__titulo { margin-top: 8px; color: var(--tinta-2); font-size: 1rem; font-weight: 700; line-height: 1.4; }
.desbloquear__cabeza .fila { margin-top: 14px; }
.desbloquear__formas { display: grid; gap: 16px; margin-top: var(--s4-hueco); }
.desbloquear__forma { padding: clamp(20px, 3.5vw, 32px); border: 1px solid var(--s4-borde); border-radius: var(--s4-radio); background: var(--s4-tarjeta); box-shadow: var(--s4-sombra); }
.desbloquear__forma--respaldo { background: var(--s4-crema); box-shadow: none; }
.desbloquear__forma > .s4-nota:first-of-type { margin-top: 4px; }
.desbloquear__forma > .s4-nota + * { margin-top: 18px; }
.desbloquear__pie { margin-top: var(--s4-hueco); }
@media (min-width: 960px) { .desbloquear__formas { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 24px; align-items: start; } }
.reto { margin-top: 16px; }
.reto__reloj { justify-self: end; width: auto !important; padding: 4px 14px; border-radius: 999px; background: var(--s4-crema); color: var(--tenue); font-size: .875rem; font-weight: 650; }
.reto__reloj b { margin-left: 4px; color: var(--tinta); font: var(--s4-cifras); font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.reto__reloj--poco { background: var(--ambar-suave); }
.reto__reloj--poco b { color: var(--ambar-tinta); }
.reto__lista { display: grid; list-style: none; }
.reto__p { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: end; gap: 16px; padding-block: 16px; border-top: 1px solid var(--s4-borde); }
.reto__p:last-child { border-bottom: 1px solid var(--s4-borde); }
.reto__folio { color: var(--tinta); font: var(--s4-cifras); font-size: 2.75rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.reto__folio small { display: block; margin-bottom: 6px; color: var(--tenue); font: 650 .75rem/1 var(--letra); letter-spacing: 0; }
.reto__folio--sin { font-size: 1.5rem; }
.reto__p .campo > span { font-size: .9375rem; line-height: 1.4; }
@media (max-width: 559px) {
  .desbloquear__cabeza { grid-template-columns: 64px minmax(0, 1fr); gap: 0 16px; }
  .desbloquear__texto { display: contents; }
  .desbloquear__cabeza > :first-child { grid-row: 1 / span 2; }
  .desbloquear__cabeza h1 { grid-column: 2; align-self: center; }
  .desbloquear__cabeza .desbloquear__titulo { grid-column: 2; margin-top: 4px; }
  .desbloquear__cabeza .s4-entradilla, .desbloquear__cabeza .fila { grid-column: 1 / -1; }
  .desbloquear__cabeza .s4-entradilla { margin-top: 16px; }
}
@media (max-width: 379px) { .reto__p { grid-template-columns: 1fr; gap: 8px; } }
.captura-vista { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px dashed var(--linea-fuerte); border-radius: var(--s4-radio-m); background: var(--s4-tarjeta); }
.captura-vista img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--s4-borde); flex: none; }
.captura-vista p { font-size: .875rem; color: var(--tenue); }
.subir { position: relative; display: inline-flex; }
.subir input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.subir:has(input:focus-visible) .boton { outline: 3px solid var(--marca); outline-offset: 2px; }

/* ── Legales: lectura en serif sobre una hoja ── */
.legal { display: grid; gap: var(--s4-hueco); max-width: 1080px; }
.legal__texto { max-width: 72ch; padding: clamp(22px, 5vw, 48px); border: 1px solid var(--s4-borde); border-radius: var(--s4-radio); background: var(--s4-tarjeta); counter-reset: s4clausula; }
.legal__texto .legal__borrador { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 28px; padding: 12px 16px; border: 1px solid var(--ambar-borde); border-radius: var(--s4-radio-m); background: var(--ambar-suave); color: var(--tinta-2); font: 500 .9375rem/1.5 var(--letra); }
.legal__borrador > svg.icono { margin-top: 1px; color: var(--ambar-tinta); }
.legal__texto h2 { display: flex; gap: 12px; align-items: baseline; margin-top: 36px; font: 600 1.25rem/1.3 var(--s4-serif); counter-increment: s4clausula; }
.legal__texto h2::before { content: counter(s4clausula); min-width: 1.25rem; color: var(--tenue); font: var(--s4-cifras); font-size: 1.125rem; }
.legal__texto p, .legal__texto li { margin-top: 10px; color: var(--tinta-2); font: 400 1.0625rem/1.7 var(--s4-serif); }
.legal__texto ul { padding-left: 1.3em; }
.legal__texto mark { padding: 0 4px; border-radius: 4px; background: var(--ambar-suave); color: var(--ambar-tinta); font-family: var(--letra); font-size: .9em; font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.legal__otros .s4-h3 { margin-top: 0; }
.legal__otros ul { display: grid; gap: 2px; margin-top: 8px; list-style: none; }
.legal__otros a { display: flex; align-items: center; min-height: 44px; padding-inline: 12px; border-radius: 999px; font-weight: 650; text-decoration: none; }
.legal__otros a:hover { background: var(--s4-crema); }
.legal__otros a[aria-current="page"] { background: var(--s4-crema); color: var(--tinta); font-weight: 800; }
@media (min-width: 1000px) {
  .legal { grid-template-columns: minmax(0, 72ch) 15rem; gap: 48px; }
  .legal__otros { align-self: start; position: sticky; top: 96px; padding-top: 8px; }
}
@media (max-width: 479px) { .legal__texto { margin-inline: -4px; } }

@media (prefers-reduced-motion: reduce) { .pago__aro, .pago__trazo { animation: none; } .s4-movil { transform: none; } }

/* ── Plazos y cifras ───────────────────────────────────────────────── */
.filtros { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 14px; }
.filtros .campo { flex: 1 1 220px; }
.filtros .segmentos button { min-height: 40px; padding: 6px 12px; font-size: 13px; }
.tabla-plazos td:nth-child(4) { color: var(--tinta); font-weight: 800; white-space: nowrap; }
.tabla-plazos details summary { cursor: pointer; color: var(--marca-fuerte); font-weight: 700; font-size: 13px; min-height: 32px; }
.tabla-plazos .cita { font-size: 14px; }
@media (max-width: 640px) {
  .tabla-plazos thead { display: none; }
  .tabla-plazos tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px; border-bottom: 1px solid var(--linea-suave); }
  .tabla-plazos td { padding: 0; border: 0; }
  .tabla-plazos td:nth-child(1) { font-weight: 800; color: var(--tinta); }
  .tabla-plazos td:nth-child(2) { grid-column: 1; color: var(--tenue); font-size: 13px; }
  .tabla-plazos td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .tabla-plazos td:nth-child(4) { grid-column: 1 / -1; font-size: 16px; }
  .tabla-plazos td:nth-child(5) { grid-column: 1 / -1; }
}