/* ─────────────────────────────────────────────────────────────────────────────
   Lista de espera de la beta — nexstudy.es

   Hoja autónoma: NO importa nada del resto del landing ni de la app. Las 13
   hojas antiguas dependían de `css/src/base/tokens.css`, que se borró con la app
   vanilla, así que todas sus variables quedaron sin definir.

   La gramática es la del ACCESO de NEX (app/src/styles/features/auth.css), que
   es la vara de medir de «limpio» en este proyecto:
     · Sin contornos. La jerarquía la hacen el relleno, el aire y la sombra.
     · Píldora de 999px para todo lo que se pulsa o se rellena.
     · Acuse de recibo al pulsar: scale(0.985).
     · El movimiento de la casa: 150ms con cubic-bezier(0, 0, 0.2, 1), aplicado
       a `background` Y a `transform`.
   ──────────────────────────────────────────────────────────────────────────── */

/* Los valores son los MISMOS que los del tema oscuro de la app, resueltos a mano
   porque esta hoja no puede importar `tokens.css` (vive fuera del build de
   Vite). Cada uno lleva de dónde sale, para que se puedan sincronizar. */
:root {
    --wl-bg:         #06070A;   /* --bg-page        → nex-slate-950 */
    --wl-input-bg:   #0F1219;   /* --bg-input       → nex-slate-960 */
    --wl-border:     #1F2937;   /* --border         → nex-slate-800 */
    --wl-text:       #F9FAFB;   /* --text-primary   → nex-off-white */
    --wl-text-soft:  #94A3B8;   /* --text-secondary → nex-slate-400 */
    --wl-text-dim:   #64748B;   /* --text-tertiary  → nex-slate-500 */
    --wl-surface:    rgb(255 255 255 / 6%);
    --wl-hover:      rgb(255 255 255 / 10%);
    --wl-ok:         #34D399;
    --wl-danger:     #F87171;

    /* Tratamiento de la captura */
    --wl-ring:   rgb(255 255 255 / 9%);
    --wl-shine:  rgb(255 255 255 / 10%);
    --wl-shadow: 0 40px 80px rgb(0 0 0 / 60%);
    --wl-halo:   34%;

    /* EL azul de NEX. En oscuro `--accent-display` es blue-200: un azul PÁLIDO,
       con tinta oscura encima. No es el azul saturado de siempre con letra
       blanca —eso es lo que hace cualquiera— y es la razón por la que un botón
       de NEX se reconoce de lejos. */
    --wl-accent-display: #BFDBFE;   /* --accent-display → nex-blue-200 */
    --wl-on-accent:      #0B1220;   /* --text-on-accent → nex-ink */
    --wl-accent:         #4E9BF5;   /* --accent         → nex-blue-500 */

    /* Movimiento de la casa, copiado de tokens.css */
    --wl-fast:  150ms;
    --wl-base:  200ms;
    --wl-ease:  cubic-bezier(0, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Tema claro — se sigue el sistema operativo del visitante.
   `:root` es oscuro y esto es el override, igual que en la app, donde el tema
   claro entra por `[data-theme="light"]` (regla 9 del CLAUDE.md).

   EL AZUL SE DA LA VUELTA, y es lo más importante de este bloque. En oscuro
   `--accent-display` es blue-200 —pálido, con tinta oscura encima—; en claro es
   blue-700 —hondo, con letra blanca—. No son dos caprichos: es la misma regla
   (el azul tiene que separarse del fondo) resuelta por el lado que toca, porque
   sobre papel eso significa oscurecer y sobre negro, aclarar.
   ──────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
    :root {
        --wl-bg:         #F6F8FC;   /* --bg-page        → nex-slate-50 */
        --wl-input-bg:   #FFFFFF;   /* --bg-input       → nex-white */
        --wl-border:     #DCE6F5;   /* --border         → nex-slate-200 */
        --wl-text:       #1F2937;   /* --text-primary   → nex-slate-800 */
        --wl-text-soft:  #64748B;   /* --text-secondary → nex-slate-500 */
        --wl-text-dim:   #6B7280;   /* --text-tertiary  → nex-gray-500 */
        --wl-surface:    rgb(15 23 42 / 5%);
        --wl-hover:      rgb(15 23 42 / 9%);

        /* Verde y rojo bajan de tono: los del tema oscuro están pensados para
           brillar sobre negro y sobre papel no llegan al contraste mínimo. */
        --wl-ok:         #047857;
        --wl-danger:     #DC2626;

        --wl-accent-display: #1D4ED8;   /* --accent-display → nex-blue-700 */
        --wl-on-accent:      #FFFFFF;   /* --text-on-accent → nex-white */
        --wl-accent:         #2563EB;   /* --accent         → nex-blue-600 */

        /* La captura sigue siendo del tema oscuro de la app, así que sobre papel
           es una mancha oscura: el filo pasa a tinta —un filo claro sobre algo
           oscuro rodeado de blanco se ve sucio— y la sombra se suaviza, porque
           una sombra dura sobre fondo claro parece un recorte pegado. */
        --wl-ring:   rgb(15 23 42 / 12%);
        --wl-shine:  rgb(255 255 255 / 6%);
        --wl-shadow: 0 30px 60px rgb(15 23 42 / 16%);
        --wl-halo:   16%;
    }
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

/* Cualquier `display` de una clase gana al `[hidden]` que trae el navegador, así
   que sin esto ocultar por atributo NO funciona en nada que sea flex o grid.
   `!important` justificado: ocultar por atributo tiene que ganar siempre. */
[hidden] {
    display: none !important;
}

/* Fondo casi plano. La versión anterior llevaba tres degradados radiales
   apilados y `background-attachment: fixed`: mucha atmósfera y ninguna
   jerarquía. Queda UN halo, y está donde tiene que estar —detrás del producto—
   porque su trabajo es despegar la captura del fondo, no decorar la página. */
body {
    margin: 0;
    min-height: 100dvh;
    background: var(--wl-bg);
    color: var(--wl-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
}

.wl-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Rejilla ──────────────────────────────────────────────────────────────── */

.wl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
    align-items: center;
    max-width: 1200px;
    min-height: 100dvh;
    margin: 0 auto;
    padding: 36px 24px 72px;
}

.wl-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 33rem;
}

/* ── Marca ────────────────────────────────────────────────────────────────── */

.wl-brand {
    display: block;
    margin-bottom: 48px;
    color: var(--wl-text);
    text-decoration: none;
}

/* El wordmark trae su propio aire dentro del viewBox (las letras van de x=32 a
   x=673 de 760), así que el ancho real dibujado es menor que el declarado. */
.wl-brand-mark {
    display: block;
    width: 124px;
    height: auto;
    aspect-ratio: 760 / 240;
}

/* ── Texto ────────────────────────────────────────────────────────────────── */

/* NO es una píldora gris con `·` y `letter-spacing`. Esa combinación —pequeño,
   apagado, espaciado, con separadores— convierte cualquier frase en ficha
   técnica, y es el error que más se repite en este proyecto. Aquí es una frase
   normal, con el color del acento y a tamaño legible. */
.wl-kicker {
    margin: 0 0 16px;
    color: var(--wl-accent-display);
    font-size: 15px;
    font-weight: 600;
}

.wl-kicker--ok {
    color: var(--wl-ok);
}

.wl-title {
    margin: 0 0 22px;
    font-family: Manrope, Inter, sans-serif;
    font-size: clamp(2rem, 6.6vw, 3.1rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

/* El remate en azul pálido y el resto en blanco: es el mismo corte de color del
   cartel («SI TU PLAN DE ESTUDIO ES REZAR,» / «PRUEBA ESTO.»), traído a la web
   para que las dos piezas hablen igual. */
.wl-title-line {
    display: block;
    color: var(--wl-accent-display);
}

.wl-title-accent {
    color: var(--wl-accent-display);
}

.wl-lede {
    margin: 0 0 30px;
    max-width: 29rem;
    color: var(--wl-text-soft);
    font-size: 16.5px;
    line-height: 1.62;
}

/* ── Formulario ───────────────────────────────────────────────────────────── */

.wl-form {
    width: 100%;
    margin: 0;
}

.wl-field {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

/* Toma el relleno y el filete de `.input` de la app, pero en píldora para ir a
   juego con el botón: son dos piezas de la misma fila y con radios distintos la
   fila se veía descuadrada. Lo que distingue al que se pulsa deja de ser la
   forma y pasa a ser el relleno —macizo contra hueco—, que es como lo hace el
   acceso. */
.wl-input {
    flex: 1 1 15rem;
    min-width: 0;
    height: 52px;
    padding: 0 22px;
    border: 1px solid var(--wl-border);
    border-radius: 999px;
    background: var(--wl-input-bg);
    color: var(--wl-text);
    font-family: inherit;
    /* 16px y no los 14 de la app: por debajo de 16 el Safari de iPhone hace zoom
       solo al enfocar el campo y descoloca la página entera. */
    font-size: 16px;
    transition: border-color var(--wl-fast) var(--wl-ease),
                box-shadow var(--wl-fast) var(--wl-ease);
}

.wl-input::placeholder {
    color: var(--wl-text-dim);
}

.wl-input:hover {
    border-color: color-mix(in srgb, var(--wl-border) 60%, var(--wl-text-dim));
}

.wl-input:focus,
.wl-submit:focus-visible {
    outline: none;
    border-color: var(--wl-accent);
    box-shadow: 0 0 0 2px var(--wl-bg),
                0 0 0 4px color-mix(in srgb, var(--wl-accent) 30%, transparent);
}

/* `.btn-primary` de la app: píldora de azul PÁLIDO con tinta oscura encima.
   El azul saturado con letra blanca que había antes es lo que hace todo el
   mundo; este es el de NEX y se reconoce de lejos. */
.wl-submit {
    flex: 1 1 11rem;
    height: 52px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--wl-accent-display);
    color: var(--wl-on-accent);
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgb(0 0 0 / 6%), inset 0 1px 0 rgb(255 255 255 / 2%);
    transition: background var(--wl-fast) var(--wl-ease),
                transform 80ms var(--wl-ease);
}

/* Se mezcla con el color del TEXTO, no con negro. Sobre un azul pálido, negro
   lo ensucia y lo vuelve gris; con el texto, en oscuro aclara y en claro
   oscurece — una sola fórmula que hace lo correcto en los dos temas. */
.wl-submit:hover:not(:disabled) {
    background: color-mix(in srgb, var(--wl-accent-display) 92%, var(--wl-text));
}

/* El botón se hunde al pulsarlo. Sin esto el clic no acusa recibo y la píldora
   se siente muerta. */
.wl-submit:active:not(:disabled) {
    transform: scale(0.98);
    background: color-mix(in srgb, var(--wl-accent-display) 86%, var(--wl-text));
}

.wl-submit:disabled {
    cursor: default;
    opacity: 0.45;
}

/* Trampa antibots: fuera de pantalla, no `display: none` (algunos bots lo detectan). */
.wl-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.wl-msg {
    margin: 14px 0 0;
    padding-left: 4px;
    font-size: 14px;
    line-height: 1.5;
}

.wl-msg:empty {
    display: none;
}

.wl-form[data-state="error"] .wl-msg {
    color: var(--wl-danger);
}

/* Cuándo abre. Vivía arriba en una píldora gris con `·` y letter-spacing, que es
   la receta exacta de la ficha técnica. Aquí abajo es lo que de verdad es:
   información de servicio, que la lee quien ya está a punto de apuntarse. */
.wl-nota {
    margin: 16px 0 0;
    padding-left: 4px;
    color: var(--wl-text-soft);
    font-size: 14px;
}

.wl-legal {
    margin: 6px 0 0;
    padding-left: 4px;
    color: var(--wl-text-dim);
    font-size: 13.5px;
    line-height: 1.5;
}

.wl-legal a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--wl-fast) var(--wl-ease);
}

.wl-legal a:hover {
    color: var(--wl-text-soft);
}

/* ── Contador ─────────────────────────────────────────────────────────────── */

.wl-count {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 28px 0 0;
    padding-left: 4px;
    color: var(--wl-text-soft);
    font-size: 14.5px;
}

.wl-count-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wl-ok);
    box-shadow: 0 0 0 4px rgb(52 211 153 / 14%);
}

.wl-count strong {
    color: var(--wl-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Estado de «ya estás dentro» ──────────────────────────────────────────── */

.wl-done {
    animation: wl-rise 420ms var(--wl-ease) both;
}

.wl-done .wl-title {
    margin-bottom: 30px;
}

/* Sin filete a la izquierda: la lista se ordena con el peso del titular de cada
   punto y con el aire entre ellos, no con una línea. */
.wl-perks {
    display: grid;
    gap: 20px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.wl-perks li {
    color: var(--wl-text-soft);
    font-size: 15.5px;
    line-height: 1.55;
}

.wl-perks strong {
    display: block;
    margin-bottom: 3px;
    color: var(--wl-text);
    font-weight: 600;
}

.wl-follow {
    margin: 0 0 14px;
    color: var(--wl-text-soft);
    font-size: 15px;
}

.wl-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wl-social-link {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--wl-surface);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--wl-fast) var(--wl-ease),
                transform var(--wl-fast) var(--wl-ease);
}

.wl-social-link:hover {
    background: var(--wl-hover);
}

.wl-social-link:active {
    transform: scale(0.985);
}

.wl-social-link svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wl-social-dot {
    fill: currentColor;
    stroke: none;
}

.wl-handle {
    margin: 18px 0 0;
    color: var(--wl-text-dim);
    font-size: 13.5px;
}

/* ── La prueba: producto real, y que se LEA ───────────────────────────────── */

/* Antes era un iPad entero, diminuto y negro sobre fondo negro: dentro no se
   leía nada, sobre todo en móvil. Ahora es la captura recortada por arriba y a
   tamaño grande —sin marco de dispositivo—, que es como se enseña el producto
   cuando lo importante es el CONTENIDO y no el aparato. El recorte se hace con
   `object-fit`, así que el fichero original no se toca. */
.wl-proof {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 34rem;
    margin: 0;
}

.wl-proof::before {
    content: "";
    position: absolute;
    inset: -14% -10% -20%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--wl-accent) var(--wl-halo), transparent), transparent 68%);
    filter: blur(60px);
}

.wl-proof-img {
    display: block;
    width: 100%;
    /* `height: auto` NO es decorativo: el atributo `height` del HTML fija la
       altura, y con una altura fija el `aspect-ratio` se ignora. Sin esto el
       recorte se volvía horizontal y en móvil cortaba la pregunta por la mitad. */
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: top left;
    border-radius: 16px;
    /* Tres capas, y cada una hace un trabajo:
       1. el filo de 1px separa la captura del fondo —su negro y el de la página
          son casi el mismo, y sin él la imagen se lee como un agujero en vez de
          como una ventana al producto—;
       2. la luz de arriba simula el canto iluminado de una superficie;
       3. la sombra la despega del papel.
       El filo es la ÚNICA línea de la página, y es un marco de imagen, no un
       contorno de interfaz: la regla de «sin contornos» habla de jerarquía entre
       controles, y aquí no hay control ninguno. */
    box-shadow:
        0 0 0 1px var(--wl-ring),
        inset 0 1px 0 var(--wl-shine),
        var(--wl-shadow);
}

/* ── Entrada escalonada ───────────────────────────────────────────────────── */

/* Las piezas entran en orden, no todas de golpe: así la mirada recorre la
   pantalla en el orden en que hay que leerla —marca, gancho, promesa, acción—
   en vez de recibirla toda a la vez. */
@keyframes wl-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wl-brand,
.wl-hero > *,
.wl-proof {
    animation: wl-rise 620ms var(--wl-ease) both;
}

.wl-brand                 { animation-delay: 0ms; }
.wl-hero > *:nth-child(1) { animation-delay: 80ms; }
.wl-hero > *:nth-child(2) { animation-delay: 160ms; }
.wl-hero > *:nth-child(3) { animation-delay: 240ms; }
.wl-hero > *:nth-child(4) { animation-delay: 320ms; }
.wl-proof                 { animation-delay: 280ms; }

/* ── Escritorio: el producto al lado, no debajo ───────────────────────────── */

@media (min-width: 62rem) {
    .wl {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 72px;
        padding: 40px 48px;
    }

    .wl-proof {
        max-width: none;
    }

    /* En escritorio la captura se sale del ancho de su columna hacia la derecha:
       insinúa que la app sigue más allá del borde en vez de quedarse encajada
       como una foto pegada en un álbum. */
    .wl-proof-img {
        width: calc(100% + 6rem);
        aspect-ratio: 4 / 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wl-brand,
    .wl-hero > *,
    .wl-proof,
    .wl-done {
        animation: none;
    }

    .wl-submit:active:not(:disabled),
    .wl-social-link:active {
        transform: none;
    }
}