/* ─────────────────────────────────────────────────────────────────────────────
   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`.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
    --wl-bg:         #080C16;
    --wl-blue:       #2563EB;
    --wl-blue-lit:   #8AB4FF;
    --wl-text:       #F8FAFC;
    --wl-text-soft:  #A8B2C4;
    --wl-text-dim:   #737F92;
    --wl-surface:    rgb(255 255 255 / 6%);
    --wl-hover:      rgb(255 255 255 / 10%);
    --wl-ok:         #34D399;
    --wl-danger:     #F87171;

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

* {
    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: inline-flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 44px;
    color: var(--wl-text);
    text-decoration: none;
}

.wl-brand-mark {
    width: 21px;
    height: 21px;
}

.wl-brand-name {
    font-family: Manrope, Inter, sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* ── 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-blue-lit);
    font-size: 15px;
    font-weight: 600;
}

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

.wl-title {
    margin: 0 0 20px;
    font-family: Manrope, Inter, sans-serif;
    font-size: clamp(2.2rem, 7.4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.wl-title-line {
    display: block;
    color: var(--wl-blue-lit);
}

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

.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%;
}

/* Sin borde: el campo se distingue por su relleno, igual que en el acceso. */
.wl-input {
    flex: 1 1 15rem;
    min-width: 0;
    height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--wl-surface);
    color: var(--wl-text);
    font-family: inherit;
    font-size: 16px;
    transition: background 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 {
    background: var(--wl-hover);
}

/* Sin contorno en reposo, el foco no puede ser «un borde que cambia»: es un aro
   por fuera, que además se ve igual de bien con el teclado que con el ratón. */
.wl-input:focus-visible,
.wl-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--wl-bg), 0 0 0 4px var(--wl-blue);
}

.wl-submit {
    flex: 1 1 11rem;
    height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: var(--wl-blue);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--wl-fast) var(--wl-ease),
                transform var(--wl-fast) var(--wl-ease);
}

/* Oscurecer con color-mix y no con un azul más claro: en oscuro un acento más
   claro lava el botón y parece medio deshabilitado. Es la misma decisión que
   está razonada en auth.css. */
.wl-submit:hover:not(:disabled) {
    background: color-mix(in srgb, var(--wl-blue) 86%, black);
}

/* 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.985);
    background: color-mix(in srgb, var(--wl-blue) 76%, black);
}

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

/* 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);
}

.wl-legal {
    margin: 16px 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, rgb(37 99 235 / 42%), 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 rgb(255 255 255 / 9%),
        inset 0 1px 0 rgb(255 255 255 / 10%),
        0 40px 80px rgb(0 0 0 / 60%);
}

/* ── 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: 70ms; }
.wl-hero > *:nth-child(2) { animation-delay: 140ms; }
.wl-hero > *:nth-child(3) { animation-delay: 210ms; }
.wl-hero > *:nth-child(4) { animation-delay: 280ms; }
.wl-hero > *:nth-child(5) { animation-delay: 350ms; }
.wl-proof           { animation-delay: 260ms; }

/* ── 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;
    }
}