/* ============================================================
   DoctorInforme — hoja de estilos de la landing.

   NO HAY DEPENDENCIAS EXTERNAS a propósito: ni CDN, ni webfonts, ni
   framework. Una landing que depende de un servidor ajeno se rompe el día
   que ese servidor se cae, y una fuente que no carga cambia el diseño
   entero sin avisar. Aquí todo se sirve desde el mismo sitio que el HTML.

   LA PALETA NO ES NUEVA: son los colores de `Scripts/diseno_pdf.py`, los
   mismos con los que se dibuja el PDF. Si algún día se cambia un color del
   informe, se cambia AQUÍ también: quien ve la web y luego recibe el PDF
   tiene que reconocer que es lo mismo.
   ============================================================ */


/* ============================================================
   FICHAS DE COLOR
   ------------------------------------------------------------
   Todo el color sale de aquí. Ningún componente escribe un color a mano:
   así el tema oscuro se resuelve redefiniendo estas fichas y nada más.

   Los grises NO son grises puros: tiran a azul (#7A8A99, #F5F7FA), que es
   lo que hace que convivan con el azul del informe en vez de ensuciarlo.
   ============================================================ */
:root {
    --tinta:        #2C2C2C;   /* texto principal (GRIS_TEXTO del PDF)   */
    --tinta-suave:  #55636F;   /* párrafos secundarios                   */
    --etiqueta:     #7A8A99;   /* etiquetas pequeñas (GRIS_ETIQ)         */

    --papel:        #FFFFFF;   /* fondo de las tarjetas                  */
    --papel-hueso:  #F5F7FA;   /* fondo de la página (GRIS_SUAVE)        */
    --linea:        #DCE3EA;   /* separadores                            */

    --azul-hondo:   #1A3A5C;   /* AZUL_OSCURO: cabeceras y titulares     */
    --azul:         #2E6DA4;   /* AZUL_MEDIO: enlaces y acentos          */
    --azul-nube:    #EBF4FB;   /* AZUL_CLARO: fila del OD, fondos suaves */
    --verde:        #3C8C5A;   /* VERDE_MEDIO: la sección de confianza   */
    --verde-nube:   #EEF6EE;   /* VERDE_SUAVE                            */

    --sombra:       0 1px 2px rgba(26, 58, 92, .06),
                    0 8px 24px rgba(26, 58, 92, .07);

    /* Las dos voces de la página. La serif es para lo que escribe una
       persona; la grotesca, para lo que mide una máquina. */
    --serif:  Georgia, "Iowan Old Style", "Times New Roman", serif;
    --grot:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;

    --medida: 34rem;   /* ~65 caracteres: el ancho cómodo de lectura */
}

/* Tema oscuro por preferencia del sistema.
   Va guardado con :not([data-theme="light"]) para que una elección
   explícita de tema claro gane sobre el sistema operativo. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tinta:        #E7EDF3;
        --tinta-suave:  #A9B7C4;
        --etiqueta:     #8698A8;

        --papel:        #16232E;
        --papel-hueso:  #101A22;
        --linea:        #2A3B49;

        --azul-hondo:   #0E1C28;   /* el azul del PDF, como fondo hondo  */
        --azul:         #6BA6DC;   /* subido: el #2E6DA4 no se lee aquí  */
        --azul-nube:    #1C2E3D;
        --verde:        #6FBE8C;
        --verde-nube:   #172A20;

        --sombra:       0 1px 2px rgba(0, 0, 0, .4),
                        0 8px 24px rgba(0, 0, 0, .35);
    }
}

/* Y lo mismo cuando el tema oscuro se elige a mano. */
:root[data-theme="dark"] {
    --tinta:        #E7EDF3;
    --tinta-suave:  #A9B7C4;
    --etiqueta:     #8698A8;

    --papel:        #16232E;
    --papel-hueso:  #101A22;
    --linea:        #2A3B49;

    --azul-hondo:   #0E1C28;
    --azul:         #6BA6DC;
    --azul-nube:    #1C2E3D;
    --verde:        #6FBE8C;
    --verde-nube:   #172A20;

    --sombra:       0 1px 2px rgba(0, 0, 0, .4),
                    0 8px 24px rgba(0, 0, 0, .35);
}


/* ============================================================
   BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms;
        animation-iteration-count: 1;
        transition-duration: .01ms;
    }
}

body {
    /* El fondo SIEMPRE explícito: sin esto la página toma el del navegador
       y en tema oscuro se leería texto claro sobre fondo claro. */
    background: var(--papel-hueso);
    color: var(--tinta);
    font-family: var(--grot);
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    color: var(--azul-hondo);
    font-family: var(--serif);
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    text-wrap: balance;
}

/* En tema oscuro el azul hondo es el FONDO, así que los titulares
   necesitan tomar la tinta clara o desaparecerían. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) h1,
    :root:not([data-theme="light"]) h2,
    :root:not([data-theme="light"]) h3 { color: var(--tinta); }
}
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3 { color: var(--tinta); }

p { margin: 0; }

a { color: var(--azul); }

a:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 3px;
    border-radius: 2px;
}

img { display: block; max-width: 100%; }


/* ============================================================
   REJILLA GENERAL
   El espaciado lo pone el `gap` del contenedor, no márgenes sueltos en
   cada elemento: así no hay márgenes que se solapen ni se dupliquen.
   ============================================================ */
.envoltorio {
    margin: 0 auto;
    max-width: 68rem;
    padding: 0 1.5rem;
    width: 100%;
}

.seccion {
    padding: 4.5rem 0;
}

.seccion > .envoltorio {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.seccion--hueso { background: var(--papel-hueso); }
.seccion--papel { background: var(--papel); }

.cabecera-seccion {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    max-width: var(--medida);
}

.cabecera-seccion h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); }

.cabecera-seccion p {
    color: var(--tinta-suave);
    font-size: 1.05rem;
}

/* Etiqueta pequeña en versalitas sobre cada sección. */
.rotulo {
    color: var(--etiqueta);
    font-family: var(--grot);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
}


/* ============================================================
   BARRA SUPERIOR
   ============================================================ */
.barra {
    align-items: center;
    border-bottom: 1px solid var(--linea);
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    padding: 1.1rem 0;
}

.marca {
    align-items: baseline;
    color: var(--azul-hondo);
    display: flex;
    font-family: var(--serif);
    font-size: 1.22rem;
    font-weight: 700;
    gap: .1rem;
    text-decoration: none;
}

.marca span { color: var(--azul); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .marca { color: var(--tinta); }
}
:root[data-theme="dark"] .marca { color: var(--tinta); }

.barra nav {
    /* Sin esto los enlaces se estiran a la altura del elemento más alto de
       la fila —el botón "Probar gratis", que lleva su propio relleno— y su
       texto se queda pegado arriba en vez de a la altura del botón. */
    align-items: center;
    display: flex;
    font-size: .95rem;
    gap: 1.6rem;
}

.barra nav a {
    color: var(--tinta-suave);
    text-decoration: none;
}

.barra nav a:hover { color: var(--azul); }

@media (max-width: 40rem) {
    .barra nav { display: none; }
}


/* ============================================================
   HÉROE
   Dos columnas: la tesis a la izquierda, el producto a la derecha. Se ve
   el PDF que sale antes de leer una sola línea de venta.
   ============================================================ */
.heroe {
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
    padding: 4rem 0 4.5rem;
}

.heroe > .envoltorio {
    align-items: center;
    display: grid;
    gap: 3.5rem;
    grid-template-columns: 1.05fr .95fr;
}

@media (max-width: 56rem) {
    .heroe > .envoltorio { grid-template-columns: 1fr; gap: 2.5rem; }
}

.heroe-texto {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.heroe h1 {
    font-size: clamp(2.1rem, 5.2vw, 3.15rem);
    letter-spacing: -.015em;
}

.heroe-entrada {
    color: var(--tinta-suave);
    font-size: 1.13rem;
    max-width: var(--medida);
}

.heroe-acciones {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: .4rem;
}

.boton {
    background: var(--azul-hondo);
    border: 1px solid var(--azul-hondo);
    border-radius: 4px;
    color: #FFFFFF;
    display: inline-block;
    font-size: .97rem;
    font-weight: 600;
    padding: .78rem 1.5rem;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.boton:hover {
    background: var(--azul);
    border-color: var(--azul);
    transform: translateY(-1px);
}

/* En oscuro el azul hondo es el fondo de la página: el botón se dibuja
   con el azul claro y texto oscuro para que siga destacando. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .boton {
        background: var(--azul);
        border-color: var(--azul);
        color: #0E1C28;
    }
    :root:not([data-theme="light"]) .boton:hover {
        background: #8CBCE8;
        border-color: #8CBCE8;
    }
}
:root[data-theme="dark"] .boton {
    background: var(--azul);
    border-color: var(--azul);
    color: #0E1C28;
}
:root[data-theme="dark"] .boton:hover {
    background: #8CBCE8;
    border-color: #8CBCE8;
}

.boton--suave {
    background: transparent;
    border-color: var(--linea);
    color: var(--tinta);
}

.boton--suave:hover {
    background: var(--azul-nube);
    border-color: var(--azul);
    color: var(--azul-hondo);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .boton--suave {
        background: transparent;
        color: var(--tinta);
    }
    :root:not([data-theme="light"]) .boton--suave:hover {
        background: var(--azul-nube);
        color: var(--tinta);
    }
}
:root[data-theme="dark"] .boton--suave {
    background: transparent;
    color: var(--tinta);
}
:root[data-theme="dark"] .boton--suave:hover {
    background: var(--azul-nube);
    color: var(--tinta);
}


/* ============================================================
   LA TABLA DE EXPLORACIÓN
   Es la pieza del héroe, y está dibujada con los colores exactos del PDF:
   cabecera en AZUL_OSCURO, fila del OD en AZUL_CLARO. Quien la reconozca
   ya sabe lo que compra.
   ============================================================ */
.muestra {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 6px;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.muestra-cinta {
    background: #1A3A5C;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1.1rem 1.3rem;
}

.muestra-cinta strong {
    font-family: var(--grot);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .07em;
}

.muestra-cinta span {
    color: rgba(255, 255, 255, .72);
    font-size: .8rem;
}

.tabla-caja { overflow-x: auto; }

table.exploracion {
    border-collapse: collapse;
    font-family: var(--grot);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    min-width: 28rem;
    width: 100%;
}

table.exploracion th,
table.exploracion td {
    border-bottom: 1px solid var(--linea);
    padding: .62rem .7rem;
    text-align: center;
}

table.exploracion thead th {
    background: #1A3A5C;
    color: #FFFFFF;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
}

table.exploracion tbody th {
    color: var(--azul-hondo);
    font-weight: 700;
    text-align: left;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) table.exploracion tbody th { color: var(--azul); }
}
:root[data-theme="dark"] table.exploracion tbody th { color: var(--azul); }

/* La fila del ojo derecho va sobre AZUL_CLARO, igual que en el PDF. */
table.exploracion tbody tr.od { background: var(--azul-nube); }

.muestra-pie {
    color: var(--etiqueta);
    font-size: .78rem;
    padding: .85rem 1.3rem 1rem;
}


/* ============================================================
   EL CHAT DEL HÉROE
   ------------------------------------------------------------
   Una simulación de la conversación, no una captura. Los textos del bot
   son los de verdad (`services/extraccion.py`): «Me falta todavía…» y
   «Ya tengo todo lo que necesito para el informe». Si algún día cambian
   ahí, cambian aquí.

   Las burbujas del óptico van a la derecha; las del bot, a la izquierda.
   ============================================================ */
.chat {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 10px;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-barra {
    align-items: baseline;
    background: #1A3A5C;
    color: #FFFFFF;
    display: flex;
    gap: .6rem;
    justify-content: space-between;
    padding: .85rem 1.1rem;
}

.chat-barra strong {
    font-family: var(--grot);
    font-size: .92rem;
    font-weight: 700;
}

.chat-barra span {
    color: rgba(255, 255, 255, .6);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
}

.chat-hilo {
    background: var(--papel-hueso);
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1.2rem 1.1rem;
}

.burbuja {
    border-radius: 12px;
    font-size: .89rem;
    line-height: 1.45;
    max-width: 85%;
    padding: .65rem .9rem;
}

/* Lo que escribe el óptico. */
.burbuja--optico {
    align-self: flex-end;
    background: var(--azul-nube);
    border: 1px solid var(--linea);
    border-bottom-right-radius: 3px;
    color: var(--tinta);
}

/* Lo que contesta el bot. */
.burbuja--bot {
    align-self: flex-start;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-bottom-left-radius: 3px;
    color: var(--tinta);
}

.burbuja code {
    font-family: var(--grot);
    font-variant-numeric: tabular-nums;
}

/* El PDF que llega al final. */
.burbuja--fichero {
    align-items: center;
    align-self: flex-start;
    display: flex;
    gap: .7rem;
}

.fichero-icono {
    background: var(--verde);
    border-radius: 6px;
    color: #FFFFFF;
    flex-shrink: 0;
    font-size: .95rem;
    line-height: 2.1rem;
    text-align: center;
    width: 2.1rem;
}

.fichero-nombre {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.fichero-nombre strong { font-size: .88rem; font-weight: 600; }

.fichero-nombre span { color: var(--etiqueta); font-size: .76rem; }

.chat-pie {
    background: var(--papel);
    border-top: 1px solid var(--linea);
    color: var(--etiqueta);
    font-size: .76rem;
    padding: .8rem 1.1rem;
}


/* ============================================================
   EL PROBLEMA — lo de hoy, al lado de lo de después
   ============================================================ */
.antes-despues {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 48rem) {
    .antes-despues { grid-template-columns: 1fr; }
}

.panel {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.6rem;
}

.panel h3 { font-size: 1.1rem; }

.panel ul {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.panel li {
    color: var(--tinta-suave);
    font-size: .96rem;
    padding-left: 1.35rem;
    position: relative;
}

.panel li::before {
    color: var(--etiqueta);
    content: "—";
    left: 0;
    position: absolute;
}

.panel--bueno { border-color: var(--verde); }

.panel--bueno li::before {
    color: var(--verde);
    content: "✓";
    font-weight: 700;
}


/* ============================================================
   CÓMO FUNCIONA — aquí SÍ hay números, porque es una secuencia real:
   los tres pasos ocurren en ese orden y no en otro.
   ============================================================ */
.pasos {
    counter-reset: paso;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 52rem) {
    .pasos { grid-template-columns: 1fr; }
}

.paso {
    border-top: 2px solid var(--azul);
    counter-increment: paso;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding-top: 1.2rem;
}

.paso::before {
    color: var(--azul);
    content: counter(paso, decimal-leading-zero);
    font-family: var(--grot);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.paso h3 { font-size: 1.13rem; }

.paso p { color: var(--tinta-suave); font-size: .96rem; }


/* ============================================================
   LOS CINCO INFORMES
   ============================================================ */
.informes {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 48rem) {
    .informes { grid-template-columns: 1fr; }
}

.informe {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-left: 3px solid var(--azul);
    border-radius: 0 6px 6px 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 1.3rem 1.4rem;
}

/* Los tres que son una derivación se marcan en verde: no es decoración,
   es la diferencia entre "te informo" y "vete al oftalmólogo". */
.informe--deriva { border-left-color: var(--verde); }

/* El quinto (otras derivaciones) ocupa la fila entera: con cinco tarjetas
   en dos columnas, el último quedaría solo a la izquierda. En el móvil hay
   una sola columna y esto no cambia nada. */
.informe--ancho { grid-column: 1 / -1; }

.informe h3 { font-size: 1.05rem; }

.informe p { color: var(--tinta-suave); font-size: .93rem; }

.informe .rotulo { font-size: .68rem; }


/* ============================================================
   LA ESCALA DEL EJE — el separador de la sección de confianza.
   No es un adorno: 0-180 grados es EXACTAMENTE el rango que el bot da por
   válido en un eje (services/plausibilidad.py), y lo que va debajo habla
   justo de descartar lo que cae fuera.
   ============================================================ */
.escala {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.escala-marcas {
    background-image: repeating-linear-gradient(
        to right,
        var(--linea) 0, var(--linea) 1px,
        transparent 1px, transparent 5.5555%
    );
    border-bottom: 1px solid var(--linea);
    height: 11px;
    width: 100%;
}

.escala-cifras {
    color: var(--etiqueta);
    display: flex;
    font-family: var(--grot);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    justify-content: space-between;
    letter-spacing: .08em;
}


/* ============================================================
   CONFIANZA — el bloque diferencial
   ============================================================ */
.seccion--confianza {
    background: var(--verde-nube);
    border-bottom: 1px solid var(--linea);
    border-top: 1px solid var(--linea);
}

.regla {
    border-left: 3px solid var(--verde);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: .3rem 0 .3rem 1.5rem;
}

.regla blockquote {
    color: var(--azul-hondo);
    font-family: var(--serif);
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    line-height: 1.3;
    margin: 0;
    max-width: 28rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .regla blockquote { color: var(--tinta); }
}
:root[data-theme="dark"] .regla blockquote { color: var(--tinta); }

.garantias {
    display: grid;
    gap: 1.4rem 2.2rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 48rem) {
    .garantias { grid-template-columns: 1fr; }
}

.garantia {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.garantia h3 { font-size: 1.02rem; }

.garantia p { color: var(--tinta-suave); font-size: .95rem; }


/* ============================================================
   PRECIOS
   ============================================================ */
.planes {
    /* stretch: las cuatro tarjetas miden lo mismo, y los botones (empujados
       al fondo por .plan-boton) quedan a la misma altura. */
    align-items: stretch;
    display: grid;
    gap: 1.3rem;
    grid-template-columns: repeat(4, 1fr);
    /* Sitio para la etiqueta "Recomendado", que sobresale por arriba. */
    padding-top: .9rem;
}

/* Cuatro planes (23-9-2026): de cuatro columnas se pasa a DOS antes que a
   una. Cuatro tarjetas en fila no caben en una tableta, y una sola columna
   en la tableta desperdicia media pantalla. */
@media (max-width: 64rem) {
    .planes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 36rem) {
    .planes { grid-template-columns: 1fr; }
}

.plan {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 1.5rem 1.5rem;
    position: relative;   /* para la etiqueta, que va encima del borde */
    transition: border-color .15s ease, transform .15s ease;
}

.plan:hover {
    border-color: var(--azul);
    transform: translateY(-2px);
}

/* La destacada: fondo propio, borde de dos píxeles y sombra. Solo el borde
   (como estaba antes) no bastaba para que se viera a primera vista. */
.plan--destacado {
    background: var(--azul-nube);
    border: 2px solid var(--azul);
    box-shadow: 0 10px 30px rgba(26, 58, 92, .14);
}

/* EL CUPO, que es lo que diferencia un plan de otro: la cifra grande, con la
   letra de los titulares, y "informes al mes" en dos líneas a su lado. */
.plan-cupo {
    align-items: center;
    border-bottom: 1px solid var(--linea);
    display: flex;
    font-size: 1rem;
    gap: .7rem;
    margin: 0;
    padding-bottom: 1.1rem;
}

/* La cifra va en la letra de los PRECIOS, no en la de los titulares: Georgia
   solo tiene números de estilo antiguo (suben y bajan como las minúsculas),
   y un "10" al lado de un "25" parecían de tamaños distintos. lining-nums
   por si el sistema tiene las dos variantes. */
.plan-cupo-cifra {
    /* Altura fija: el "∞" (más grande, abajo) no puede hacer más alta su
       cabecera, o su precio quedaría más bajo que el de las otras tres. */
    align-items: center;
    display: flex;
    height: 3rem;
    color: var(--azul-hondo);
    font-family: var(--grot);
    font-size: 3rem;
    font-variant-numeric: lining-nums tabular-nums;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

/* El "∞" es más pequeño que una cifra en estas letras: se sube un poco
   para que pese lo mismo que el 10, el 25 y el 50. */
.plan-cupo-cifra [aria-hidden="true"] {
    font-size: 1.3em;
    line-height: .75;
}

.plan-cupo-texto {
    color: var(--tinta-suave);
    font-family: var(--grot);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.3;
    text-transform: uppercase;
}

.plan-precio {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.plan-cifra {
    color: var(--tinta);
    font-family: var(--grot);
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* En oscuro, --azul-hondo es un fondo, no un color de texto: la cifra del
   cupo pasa al azul de los acentos. Y la sombra de la destacada, a negro. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .plan-cupo-cifra { color: var(--azul); }
    :root:not([data-theme="light"]) .plan--destacado { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
}
:root[data-theme="dark"] .plan-cupo-cifra { color: var(--azul); }
:root[data-theme="dark"] .plan--destacado { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }

/* Para quien usa lector de pantalla: el "∞" se oculta y se lee esto. */
.solo-lector {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.plan-periodo { color: var(--etiqueta); font-size: .88rem; }

/* Lo que sale un informe en ese plan: la cifra que dice "subir compensa".
   Píldora verde, para que se lea como una ventaja y no como letra pequeña.
   (Aquí vivían .plan-antes y .plan-lanzamiento, la tarifa tachada del
   modelo por cuentas: se retiraron con él el 23-9-2026.) */
.plan-detalle {
    align-self: flex-start;
    background: var(--verde-nube);
    border-radius: 999px;
    color: var(--verde);
    font-size: .82rem;
    font-weight: 600;
    margin: -.2rem 0 .4rem;
    padding: .25rem .7rem;
}

/* "Recomendado": centrada SOBRE el borde superior, fuera del flujo. Así no
   empuja el contenido y la tarjeta destacada mide lo mismo que las demás. */
.plan-etiqueta {
    background: var(--azul);
    border-radius: 999px;
    color: var(--papel);
    font-size: .72rem;
    font-weight: 700;
    left: 50%;
    letter-spacing: .06em;
    margin: 0;
    padding: .3rem .85rem;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

/* Lo que llevan los cuatro planes, dicho una vez debajo de las tarjetas. */
.planes-incluye {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
    list-style: none;
    margin: 1.75rem 0 1rem;
    padding: 0;
}

.planes-incluye li {
    color: var(--tinta-suave);
    font-size: .93rem;
    padding-left: 1.35rem;
    position: relative;
}

.planes-incluye li::before {
    color: var(--verde);
    content: "✓";
    font-weight: 700;
    left: 0;
    position: absolute;
}

.plan ul {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.plan li {
    color: var(--tinta-suave);
    font-size: .93rem;
    padding-left: 1.35rem;
    position: relative;
}

.plan li::before {
    color: var(--verde);
    content: "✓";
    font-weight: 700;
    left: 0;
    position: absolute;
}

/* Marcador de dato pendiente. Va deliberadamente FEO: tiene que cantar
   para que ninguno de estos se publique por descuido. */
.pendiente {
    background: #FFF4CE;
    border: 1px dashed #9A7500;
    border-radius: 3px;
    color: #5E4700;
    font-family: var(--grot);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .12rem .45rem;
    white-space: nowrap;
}

.nota-precios {
    color: var(--etiqueta);
    font-size: .88rem;
    max-width: var(--medida);
}


/* ============================================================
   PREGUNTAS FRECUENTES
   ============================================================ */
.preguntas {
    display: flex;
    flex-direction: column;
    max-width: 46rem;
}

.pregunta {
    border-bottom: 1px solid var(--linea);
    padding: .3rem 0;
}

.pregunta summary {
    color: var(--azul-hondo);
    cursor: pointer;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 700;
    list-style: none;
    padding: .95rem 2rem .95rem 0;
    position: relative;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pregunta summary { color: var(--tinta); }
}
:root[data-theme="dark"] .pregunta summary { color: var(--tinta); }

.pregunta summary::-webkit-details-marker { display: none; }

.pregunta summary::after {
    color: var(--azul);
    content: "+";
    font-family: var(--grot);
    font-size: 1.3rem;
    position: absolute;
    right: .3rem;
    top: .72rem;
    transition: transform .18s ease;
}

.pregunta[open] summary::after { transform: rotate(45deg); }

.pregunta p {
    color: var(--tinta-suave);
    font-size: .97rem;
    max-width: var(--medida);
    padding: 0 0 1.1rem;
}


/* ============================================================
   CIERRE Y PIE
   ============================================================ */
.cierre {
    background: #1A3A5C;
    padding: 4rem 0;
}

.cierre > .envoltorio {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    max-width: 44rem;
}

.cierre h2 {
    color: #FFFFFF;
    font-size: clamp(1.7rem, 3.6vw, 2.2rem);
}

.cierre p { color: rgba(255, 255, 255, .78); }

.cierre .rotulo { color: rgba(255, 255, 255, .55); }

.cierre .boton {
    align-self: flex-start;
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #1A3A5C;
}

.cierre .boton:hover {
    background: #EBF4FB;
    border-color: #EBF4FB;
    color: #1A3A5C;
}

/* ============================================================
   EL FORMULARIO DE CONTACTO
   ------------------------------------------------------------
   ⚠ TODAVÍA NO ESTÁ CONECTADO A NADA. Ver el aviso en el propio HTML y
   en web/README.md. Mientras no tenga destino, el envío no finge que ha
   salido: lo dice.
   ============================================================ */
.formulario {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 34rem;
    width: 100%;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.campo label {
    color: rgba(255, 255, 255, .8);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.campo input,
.campo textarea {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 4px;
    color: #FFFFFF;
    font-family: var(--grot);
    font-size: .95rem;
    padding: .6rem .75rem;
    width: 100%;
}

.campo input::placeholder,
.campo textarea::placeholder { color: rgba(255, 255, 255, .4); }

.campo input:focus,
.campo textarea:focus {
    background: rgba(255, 255, 255, .12);
    border-color: #FFFFFF;
    outline: 2px solid rgba(255, 255, 255, .35);
    outline-offset: 1px;
}

.campo textarea { min-height: 6.5rem; resize: vertical; }

.campos-pareja {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 40rem) {
    .campos-pareja { grid-template-columns: 1fr; }
}

.formulario button {
    align-self: flex-start;
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    color: #1A3A5C;
    cursor: pointer;
    font-family: var(--grot);
    font-size: .97rem;
    font-weight: 600;
    padding: .78rem 1.6rem;
    transition: background .15s ease;
}

.formulario button:hover { background: #EBF4FB; }

/* El botón bloqueado mientras se envía: un doble clic no manda dos correos. */
.formulario button:disabled { cursor: wait; opacity: .7; }

/* La casilla de privacidad del formulario de contacto (3-10-2026). Es la
   .casilla del alta, pero aquí va sobre el azul oscuro del cierre: el gris de
   la del alta no se leería. Mismo blanco que las etiquetas de los campos. */
.formulario .casilla { color: rgba(255, 255, 255, .8); }
.formulario .casilla a { color: #FFFFFF; text-decoration: underline; }

/* El mensaje que sale al enviar. Sin JavaScript no se ve nunca. */
.aviso-envio {
    background: rgba(255, 244, 206, .15);
    border: 1px dashed #F0D48A;
    border-radius: 4px;
    color: #FFF4CE;
    font-size: .88rem;
    padding: .8rem 1rem;
}

.aviso-envio[hidden] { display: none; }

.pie {
    background: var(--papel-hueso);
    border-top: 1px solid var(--linea);
    color: var(--etiqueta);
    font-size: .87rem;
    padding: 2rem 0;
}

.pie > .envoltorio {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
}

.pie a { color: var(--etiqueta); }

.pie a:hover { color: var(--azul); }


/* ============================================================
   PÁGINA LEGAL
   ============================================================ */
.legal {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: var(--medida);
    padding: 3.5rem 0 4.5rem;
}

.legal h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }

.legal h2 { font-size: 1.25rem; margin-top: 1.2rem; }

.legal p,
.legal li { color: var(--tinta-suave); font-size: .98rem; }

.legal ul {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding-left: 1.2rem;
}


/* ============================================================
   ENTRADA
   Una sola animación, y solo en el héroe. Se anula entera con
   prefers-reduced-motion, arriba.
   ============================================================ */
@keyframes asomar {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.heroe-texto,
.muestra { animation: asomar .5s ease-out both; }

.muestra { animation-delay: .1s; }


/* ============================================================
   LA PÁGINA DE ALTA (alta.html)
   ------------------------------------------------------------
   ⚠ TODAVÍA NO ENVÍA A NINGUNA PARTE. Igual que el formulario de contacto:
   el envío dice la verdad en vez de fingir que ha salido.

   LA REGLA QUE MANDA AQUÍ, y que no es un capricho de diseño:

       LOS TRES IMPORTES SE LEEN IGUAL DE BIEN.

   La prueba (0 €), el precio de los 12 meses y el de después comparten la
   clase .momento-cifra, así que tienen por construcción el mismo tamaño y
   el mismo peso. El truco habitual del sector es poner el barato enorme y
   el caro en gris pequeño debajo; si alguien viene a "mejorar" esto
   agrandando el precio promocional, está reintroduciendo justo eso.
   ============================================================ */

.alta {
    align-items: start;
    display: grid;
    gap: 2.5rem;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.alta-formulario { max-width: none; gap: 2rem; }

/* Los campos base están pensados para la sección oscura del cierre (texto
   blanco sobre azul hondo). Aquí el fondo es claro, así que se re-viste lo
   mínimo: colores. La forma no se toca. */
.alta-formulario .campo label { color: var(--tinta-suave); }

.alta-formulario .campo input,
.alta-formulario .campo textarea {
    background: var(--papel);
    border: 1px solid var(--linea);
    color: var(--tinta);
}

.alta-formulario .campo input:focus,
.alta-formulario .campo textarea:focus {
    border-color: var(--azul);
    outline: 2px solid var(--azul-nube);
}

/* ⚠️ .aviso-envio está pensado para la sección oscura del cierre de la
   landing: crema pálido sobre un fondo casi transparente. Sobre el papel
   claro de estas páginas ERA ILEGIBLE, literalmente amarillo claro sobre
   blanco. Aquí se re-viste con el mismo ámbar pero en versión legible. */
.alta-formulario .aviso-envio,
.hecha-principal .aviso-envio {
    background: #FFF8E1;
    border: 1px solid #E0B75C;
    color: #6B4E11;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alta-formulario .aviso-envio,
    :root:not([data-theme="light"]) .hecha-principal .aviso-envio {
        background: #2E2712;
        border-color: #7A6425;
        color: #F3DFA8;
    }
}

:root[data-theme="dark"] .alta-formulario .aviso-envio,
:root[data-theme="dark"] .hecha-principal .aviso-envio {
    background: #2E2712;
    border-color: #7A6425;
    color: #F3DFA8;
}

/* En "Varios establecimientos" se ocultan campos sueltos del bloque de datos
   (todos menos el correo). `.campo` y `.campos-pareja` fijan su `display`, y
   eso le gana al atributo `hidden`: sin estas dos líneas, se seguirían viendo. */
.campo[hidden],
.campos-pareja[hidden] { display: none; }

/* El campo que el servidor ha rechazado. Lo marca el script de alta.html con
   aria-invalid, que además lo anuncia un lector de pantalla. El rojo va solo
   en el borde: el mensaje de qué pasa va en el aviso, en texto. */
.alta-formulario .campo input[aria-invalid="true"] {
    border-color: #B3261E;
    outline: 2px solid rgba(179, 38, 30, .15);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alta-formulario .campo input[aria-invalid="true"] {
        border-color: #F2B8B5;
        outline-color: rgba(242, 184, 181, .2);
    }
}

:root[data-theme="dark"] .alta-formulario .campo input[aria-invalid="true"] {
    border-color: #F2B8B5;
    outline-color: rgba(242, 184, 181, .2);
}

/* --- El botón principal --------------------------------------------
   Es la acción de toda la página, así que se comporta como tal: ancho
   completo, algo más de cuerpo y una sombra que lo levanta del papel. */
.alta-formulario button[type="submit"] {
    background: var(--azul-hondo);
    border: 1px solid var(--azul-hondo);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(26, 58, 92, .18);
    color: #FFFFFF;
    cursor: pointer;
    font-family: var(--grot);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 1rem 1.5rem;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    width: 100%;
}

.alta-formulario button[type="submit"]:hover {
    background: var(--azul);
    border-color: var(--azul);
    box-shadow: 0 4px 12px rgba(26, 58, 92, .24);
    transform: translateY(-1px);
}

.alta-formulario button[type="submit"]:active { transform: none; }

/* En el tema oscuro, --azul-hondo es casi negro y el botón se pierde
   contra el fondo. Ahí manda el azul claro, con texto oscuro encima. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alta-formulario button[type="submit"] {
        background: var(--azul);
        border-color: var(--azul);
        color: #0E1C28;
    }
    :root:not([data-theme="light"]) .alta-formulario button[type="submit"]:hover {
        background: #8FBEE7;
        border-color: #8FBEE7;
    }
}

:root[data-theme="dark"] .alta-formulario button[type="submit"] {
    background: var(--azul);
    border-color: var(--azul);
    color: #0E1C28;
}

:root[data-theme="dark"] .alta-formulario button[type="submit"]:hover {
    background: #8FBEE7;
    border-color: #8FBEE7;
}

@media (prefers-reduced-motion: reduce) {
    .alta-formulario button[type="submit"] { transition: none; }
    .alta-formulario button[type="submit"]:hover { transform: none; }
}


/* --- La caja del logo -----------------------------------------------
   El <input type="file"> va extendido por encima de todo y transparente:
   así se puede pulsar en cualquier parte, y soltar un fichero encima
   funciona SOLO, porque es lo que hace de serie un input de fichero. */
.soltar {
    background: var(--papel);
    border: 2px dashed var(--linea);
    border-radius: 10px;
    padding: 1.5rem 1.25rem;
    position: relative;
    transition: border-color .15s ease, background .15s ease;
}

.soltar input[type="file"] {
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.soltar:hover,
.soltar:focus-within {
    background: var(--azul-nube);
    border-color: var(--azul);
}

.soltar-vacio {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    text-align: center;
}

.soltar-vacio[hidden],
.soltar-lleno[hidden] { display: none; }

.soltar-icono {
    fill: none;
    height: 1.9rem;
    margin-bottom: .2rem;
    stroke: var(--azul);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 1.9rem;
}

.soltar-titulo {
    color: var(--azul-hondo);
    font-family: var(--grot);
    font-weight: 700;
}

.soltar-pista {
    color: var(--etiqueta);
    font-size: .82rem;
}

.soltar-lleno {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.soltar-lleno img {
    background: #FFFFFF;   /* un PNG transparente sobre fondo oscuro no se vería */
    border: 1px solid var(--linea);
    border-radius: 6px;
    height: 3.5rem;
    object-fit: contain;
    padding: .3rem;
    width: 3.5rem;
}

.soltar-datos {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.soltar-datos strong {
    color: var(--tinta);
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soltar-cambiar {
    color: var(--azul);
    font-size: .85rem;
    font-weight: 600;
    margin-left: auto;
    white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .soltar-titulo { color: var(--tinta); }
}

:root[data-theme="dark"] .soltar-titulo { color: var(--tinta); }

.bloque {
    border: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.bloque[hidden] { display: none; }

.bloque legend {
    color: var(--azul-hondo);
    font-family: var(--grot);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .75rem;
    padding: 0;
}

.ayuda {
    color: var(--etiqueta);
    font-size: .82rem;
    line-height: 1.5;
    margin: 0;
}

/* --- Quién eres: tarjetas de radio, no un desplegable. El precio depende
       de esto, así que las tres posibilidades se ven a la vez. --- */
.opciones-tipo {
    display: grid;
    gap: .75rem;
}

.opcion-tipo {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2rem .75rem;
    padding: .9rem 1rem;
}

.opcion-tipo input { grid-row: 1 / 3; margin-top: .2rem; }

.opcion-tipo:has(input:checked) {
    background: var(--azul-nube);
    border-color: var(--azul);
}

.opcion-tipo:has(input:focus-visible) { outline: 2px solid var(--azul); }

.opcion-titulo {
    color: var(--azul-hondo);
    font-family: var(--grot);
    font-weight: 700;
}

.opcion-texto {
    color: var(--tinta-suave);
    font-size: .88rem;
    line-height: 1.5;
}

/* --- Cuántos sois --- */
.contador {
    align-items: center;
    display: flex;
    gap: 1rem;
}

/* Rellenos y ALARGADOS, con la cifra en medio. Antes eran así por herencia
   de `.alta-formulario button` (que les daba el azul y un width: 100%); al
   acotar aquella regla a los de tipo submit se quedaron en blanco y
   pequeños. Ahora está dicho aquí, que es donde se busca.

   El `flex: 1` es lo que los estira: los dos reparten a partes iguales todo
   el ancho que sobra, y la cifra queda centrada entre ellos. Además así son
   dianas grandes, que en el móvil es justo lo que se quiere de un +/−. */
.contador-boton {
    background: var(--azul-hondo);
    border: 1px solid var(--azul-hondo);
    border-radius: 6px;
    color: #FFFFFF;
    cursor: pointer;
    flex: 1;
    font-family: var(--grot);
    font-size: 1.3rem;
    font-weight: 600;
    height: 2.75rem;
    line-height: 1;
    transition: background .15s ease;
}

.contador-boton:hover { background: var(--azul); border-color: var(--azul); }

/* En oscuro, --azul-hondo es casi negro: mismo relevo que el botón principal. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .contador-boton {
        background: var(--azul);
        border-color: var(--azul);
        color: #0E1C28;
    }
    :root:not([data-theme="light"]) .contador-boton:hover {
        background: #8FBEE7;
        border-color: #8FBEE7;
    }
}

:root[data-theme="dark"] .contador-boton {
    background: var(--azul);
    border-color: var(--azul);
    color: #0E1C28;
}

:root[data-theme="dark"] .contador-boton:hover {
    background: #8FBEE7;
    border-color: #8FBEE7;
}

@media (prefers-reduced-motion: reduce) {
    .contador-boton { transition: none; }
}

.contador-cifra {
    color: var(--azul-hondo);
    font-family: var(--grot);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    min-width: 2ch;
    text-align: center;
}

/* --- La casilla legal. UNA sola: varias "entiendo que..." no transmiten
       honestidad, transmiten que te cubres las espaldas. --- */
.casilla {
    align-items: start;
    color: var(--tinta-suave);
    display: grid;
    font-size: .88rem;
    gap: .7rem;
    grid-template-columns: auto 1fr;
    line-height: 1.6;
}

.casilla input { margin-top: .25rem; }

/* El compromiso de precio, en texto llano y justo encima del botón. Es la
   segunda vez que se dicen las cifras (la primera es el resumen), y en el
   móvil es la que de verdad se lee. */
.compromiso {
    background: var(--verde-nube);
    border-left: 3px solid var(--verde);
    color: var(--tinta);
    font-size: .9rem;
    line-height: 1.6;
    margin: 0;
    padding: .85rem 1rem;
}

.compromiso[hidden] { display: none; }

/* --- El resumen --- */
.resumen {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 10px;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    position: sticky;
    top: 1.5rem;
}

.resumen[hidden] { display: none; }

.momento {
    border-bottom: 1px solid var(--linea);
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding-bottom: 1.25rem;
}

.momento:last-of-type { border-bottom: none; padding-bottom: 0; }

.momento-cuando {
    color: var(--etiqueta);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* LAS TRES CIFRAS, IGUALES. Ver el aviso de la cabecera de esta sección. */
.momento-cifra {
    color: var(--azul-hondo);
    font-family: var(--grot);
    font-size: 1.7rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -.02em;
}

.momento-cifra small { font-size: .9rem; font-weight: 600; }

.momento-nota {
    color: var(--tinta-suave);
    font-size: .85rem;
    line-height: 1.5;
}

/* Los cuatro planes dentro del resumen del alta (los pinta pintarPlanes(),
   en web/precios.js). Nombre a la izquierda, precio a la derecha, como una
   carta: se lee de un vistazo cuánto cuesta cada cosa. */
.resumen-planes {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    list-style: none;
    margin: .35rem 0 0;
    padding: 0;
}

.resumen-planes li {
    display: flex;
    font-size: .92rem;
    gap: 1rem;
    justify-content: space-between;
}

.resumen-planes strong {
    color: var(--azul-hondo);
    font-family: var(--grot);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.resumen-iva {
    color: var(--etiqueta);
    font-size: .8rem;
    margin: 0;
}

.resumen-salida {
    background: var(--azul-nube);
    border-radius: 6px;
    color: var(--tinta);
    font-size: .85rem;
    line-height: 1.6;
    margin: 0;
    padding: .85rem 1rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .momento-cifra,
    :root:not([data-theme="light"]) .resumen-planes strong,
    :root:not([data-theme="light"]) .opcion-titulo,
    :root:not([data-theme="light"]) .contador-cifra,
    :root:not([data-theme="light"]) .bloque legend { color: var(--tinta); }
}

:root[data-theme="dark"] .momento-cifra,
:root[data-theme="dark"] .resumen-planes strong,
:root[data-theme="dark"] .opcion-titulo,
:root[data-theme="dark"] .contador-cifra,
:root[data-theme="dark"] .bloque legend { color: var(--tinta); }

/* En el móvil el resumen va ARRIBA: se ve el precio antes de escribir
   nada. No se deja pegado abajo a propósito, porque una barra fija sobre
   un formulario largo tapa justo el campo que estás rellenando. La
   repetición de las cifras la hace .compromiso, encima del botón. */
@media (max-width: 52rem) {
    .alta { grid-template-columns: 1fr; gap: 1.75rem; }
    .resumen { order: -1; position: static; }
}

/* El botón de cada tarjeta de precio, empujado al fondo para que los cuatro
   queden alineados aunque las listas tengan distinto número de líneas. */
.plan-boton {
    margin-top: auto;
    text-align: center;
    width: 100%;
}


/* ============================================================
   EL ENVÍO Y LA CONFIRMACIÓN (alta.html y alta-hecha.html)
   ============================================================ */

/* El botón bloqueado mientras se envía. NO es cosmético: mientras está así
   no se puede enviar dos veces, y aquí un doble clic serían dos ópticas
   creadas y dos correos con códigos distintos.

   ⚠️ NO lo pongas gris claro. La primera versión usaba --etiqueta (#7A8A99)
   con texto blanco encima: 2,8:1 de contraste, o sea ilegible justo en el
   momento en que el usuario está mirando el botón para saber si su alta se
   está enviando. Se queda oscuro, y lo que cambia es el cursor y un punto
   de transparencia. */
.alta-formulario button[type="submit"]:disabled {
    cursor: progress;
    opacity: .85;
    transform: none;
}

.alta-formulario button[type="submit"]:disabled:hover {
    background: var(--azul-hondo);
    border-color: var(--azul-hondo);
    box-shadow: 0 2px 6px rgba(26, 58, 92, .18);
    transform: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alta-formulario button[type="submit"]:disabled:hover {
        background: var(--azul);
        border-color: var(--azul);
    }
}

:root[data-theme="dark"] .alta-formulario button[type="submit"]:disabled:hover {
    background: var(--azul);
    border-color: var(--azul);
}

/* La barra mide la SUBIDA DEL LOGO, que es lo único del envío que tarda y
   que se puede medir de verdad. No convertirla en pasos inventados: ver el
   aviso en alta.html. */
.progreso {
    background: var(--linea);
    border-radius: 999px;
    height: .4rem;
    overflow: hidden;
}

.progreso[hidden] { display: none; }

.progreso-barra {
    background: var(--azul);
    height: 100%;
    transition: width .2s linear;
    width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .progreso-barra { transition: none; }
}

.hecha-principal {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.hecha-principal h3 {
    color: var(--azul-hondo);
    font-family: var(--grot);
    font-size: 1.1rem;
    margin: 0;
}

/* El correo, entero y grande: es el único momento en que se puede ver que
   estaba mal escrito y avisar antes de que se pierda nada. */
.tarjeta-correo {
    background: var(--verde-nube);
    border-left: 3px solid var(--verde);
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1.25rem 1.5rem;
}

.correo-grande {
    color: var(--azul-hondo);
    font-family: var(--grot);
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

.pasos-lista {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 0;
    padding-left: 1.2rem;
}

.pasos-lista li { line-height: 1.65; }

.pasos-lista .ayuda { display: block; margin-top: .25rem; }

/* alta-revisa.html y alta-confirmar.html: una sola columna, sin el resumen
   de precio al lado, así que se limita el ancho para que se lea cómodo. */
.hecha-sola { max-width: 40rem; }

.pasos-lista code {
    background: var(--azul-nube);
    border-radius: 4px;
    font-size: .9em;
    padding: .1rem .35rem;
}

.aviso-plazo {
    background: var(--azul-nube);
    border-radius: 6px;
    line-height: 1.65;
    padding: 1.1rem 1.35rem;
}

.aviso-plazo p { margin: 0; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .correo-grande,
    :root:not([data-theme="light"]) .hecha-principal h3 { color: var(--tinta); }
}

:root[data-theme="dark"] .correo-grande,
:root[data-theme="dark"] .hecha-principal h3 { color: var(--tinta); }


/* ============================================================
   LAS LLAMADAS A LA ACCIÓN
   ------------------------------------------------------------
   Antes solo había una forma de empezar y estaba en #precios, al fondo de
   la página. Quien se convencía leyendo el titular no tenía dónde pulsar.
   Ahora hay tres puntos de entrada al alta —la barra, el héroe y después de
   los tres pasos— y todos llevan al mismo sitio.
   ============================================================ */

/* El de la barra de arriba. Menudo porque convive con los enlaces de
   navegación: si pesara como el del héroe, competiría con el titular. */
.boton--menudo {
    background: var(--azul-hondo);
    border-color: var(--azul-hondo);
    color: #FFFFFF;
    font-size: .85rem;
    padding: .45rem 1rem;
}

.boton--menudo:hover { background: var(--azul); border-color: var(--azul); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .boton--menudo {
        background: var(--azul);
        border-color: var(--azul);
        color: #0E1C28;
    }
}

:root[data-theme="dark"] .boton--menudo {
    background: var(--azul);
    border-color: var(--azul);
    color: #0E1C28;
}

/* Las tres objeciones del héroe, debajo de los botones. Pequeñas y en una
   línea: no son un argumento, son un permiso para pulsar. */
.heroe-garantia {
    color: var(--etiqueta);
    font-family: var(--grot);
    font-size: .85rem;
    margin-top: 1rem;
}

.franja-cta {
    align-items: center;
    background: var(--azul-nube);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: space-between;
    margin-top: 2.5rem;
    padding: 1.5rem 1.75rem;
}

.franja-cta p {
    line-height: 1.6;
    margin: 0;
    max-width: 32rem;
}

.franja-cta .boton { flex-shrink: 0; }

.cierre-acciones { margin: 1.75rem 0 0; }

.cierre-o {
    border-top: 1px solid rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .75);
    font-size: .9rem;
    margin: 2.5rem 0 1.25rem;
    padding-top: 1.75rem;
}

@media (max-width: 40rem) {
    .franja-cta { flex-direction: column; align-items: stretch; }
    .franja-cta .boton { text-align: center; }
}

/* Dos arreglos del botón de la barra, y el segundo importa de verdad:

   1. `.barra nav a` (0-1-1) le ganaba a `.boton--menudo` (0-1-0) y le
      imponía el gris de los enlaces sobre el azul del botón.

   2. En móvil la barra ocultaba la navegación ENTERA (`display: none`), así
      que el botón de probar desaparecía justo donde más falta hace: un
      óptico abre esto desde el móvil. Ahora se esconden los enlaces de
      navegación —que solo llevan a secciones de esta misma página, y para
      eso está el scroll— y el botón se queda. */
.barra nav a.boton--menudo {
    align-items: center;
    color: #FFFFFF;
    display: flex;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .barra nav a.boton--menudo { color: #0E1C28; }
}

:root[data-theme="dark"] .barra nav a.boton--menudo { color: #0E1C28; }

@media (max-width: 40rem) {
    .barra nav { display: flex; gap: 0; }
    .barra nav a:not(.boton) { display: none; }
}


/* ============================================================
   LAS CIFRAS (12 min → 2 min)
   ------------------------------------------------------------
   El argumento de venta de la página, que hasta ahora no estaba escrito en
   ningún sitio: se hablaba del "trabajo de después" sin decir cuánto era.

   ⚠️ Son la estimación de un óptico, no una medición cronometrada. Están
   aquí, en las etiquetas de los dos paneles de abajo, en la entradilla del
   héroe, en la meta description, en og:description y en llms.txt. Si el
   número cambia, se cambia en los seis.
   ============================================================ */
.cifras {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.cifra {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.4rem 1.5rem;
}

/* La del bot es la única con color: es la comparación entera en un vistazo,
   sin tener que leer las tres. */
.cifra--buena {
    background: var(--verde-nube);
    border-color: var(--verde);
}

.cifra-numero {
    align-items: baseline;
    color: var(--azul-hondo);
    display: flex;
    font-family: var(--grot);
    font-size: 2.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    gap: .25rem;
    letter-spacing: -.03em;
    line-height: 1;
}

.cifra-numero small {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}

.cifra--buena .cifra-numero { color: var(--verde); }

.cifra-texto {
    color: var(--tinta-suave);
    font-size: .9rem;
    line-height: 1.55;
}

/* El tiempo al lado del título de cada panel: es donde la comparación
   aterriza, porque etiqueta las dos columnas que ya se están comparando. */
.panel-tiempo {
    background: var(--azul-nube);
    border-radius: 999px;
    color: var(--azul);
    font-family: var(--grot);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    margin-left: .6rem;
    padding: .2rem .7rem;
    vertical-align: middle;
    white-space: nowrap;
}

.panel--bueno .panel-tiempo {
    background: var(--verde-nube);
    color: var(--verde);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cifra-numero { color: var(--tinta); }
    :root:not([data-theme="light"]) .cifra--buena .cifra-numero { color: var(--verde); }
}

:root[data-theme="dark"] .cifra-numero { color: var(--tinta); }
:root[data-theme="dark"] .cifra--buena .cifra-numero { color: var(--verde); }