/* ---------------------------------------------------------------------------
   Rushy — landing pública.

   Es la ÚNICA pantalla con este lenguaje visual: oscuro, a sangre, con violeta.
   Las pantallas de trabajo son claras y sobrias a propósito —se miran cincuenta
   veces por semana— y la landing se mira una vez. Por eso vive en su propia hoja
   y se carga sólo acá.

   SIN IMÁGENES. Ni una. Todo lo visual son degradados, proporciones dibujadas y
   dos SVG de trazo de 100 bytes. La propuesta comercial trae cuatro fotografías
   de bares y cafeterías cuya licencia no se puede verificar: reutilizarlas para
   una página pública sería heredar un problema legal que hoy no existe. Y una
   captura de pantalla de la aplicación pesaría cien veces esto y envejecería con
   el primer cambio de una pantalla.

   EL MOVIMIENTO NO CUESTA JAVASCRIPT. La entrada del hero son `@keyframes`
   normales que corren UNA vez al abrir. Lo que aparece al bajar usa
   `animation-timeline: view()`, que el navegador resuelve solo y compone fuera
   del hilo principal; donde no exista, el bloque `@supports` no aplica y el
   contenido se ve completo desde el primer cuadro. No hay un solo observador, un
   solo `scroll` escuchado ni un solo request más que esta hoja.

   Y NADA SE ANIMA PARA SIEMPRE: no hay una sola animación `infinite`. Terminada
   la entrada, la página deja de trabajar.

   Sin ningún <style> ni <script> en la vista: la política de contenido no admite
   `unsafe-inline` (F6, control 9) y el guardián G11 lo hace cumplir.
   --------------------------------------------------------------------------- */

body.landing {
    background: #0a0a0f;
    color: #f5f5f7;
}

/* La landing rompe el ancho de `main`, que existe para las pantallas de trabajo. */
body.landing main { max-width: none; padding: 0; }

/* La barra y el pie se adaptan al fondo oscuro. Se cambian los COLORES, no la
   estructura: la barra sigue siendo la misma y sigue envolviendo a 375 px. */
body.landing .barra {
    background: rgba(10, 10, 15, .88);
    border-bottom: 1px solid #23232e;
    /* Pegajosa: la marca, el idioma y «Entrar» son lo único que hay arriba, y son
       exactamente las tres cosas que alguien busca cuando termina de leer. */
    position: sticky; top: 0; z-index: 30;
    backdrop-filter: saturate(1.4) blur(10px);
}
body.landing .barra .marca { color: #f5f5f7; }
body.landing .pie {
    color: #8a8a99;
    border-top: 1px solid #23232e;
    max-width: 62rem;
}
body.landing .pie a { color: #b9a8ff; }
body.landing .btn-sutil {
    background: transparent;
    color: #f5f5f7;
    border-color: #3a3a4a;
}
body.landing .btn-sutil:hover { border-color: #b9a8ff; filter: none; }

/* El selector de idioma, sobre oscuro. Mismo componente, otra piel. */
body.landing .selector-idioma > summary {
    background: transparent; color: #c8c8d4; border-color: #3a3a4a;
}
body.landing .selector-idioma > summary:hover { color: #fff; border-color: #b9a8ff; }
body.landing .selector-idioma .idiomas {
    background: #16161f; border-color: #2c2c3a;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}
body.landing .selector-idioma .idiomas a { color: #e6e6ee; }
body.landing .selector-idioma .idiomas a:hover,
body.landing .selector-idioma .idiomas a:focus-visible { background: #20202c; color: #fff; }
body.landing .selector-idioma .idiomas .idioma-actual { color: #fff; background: #20202c; }

.lp {
    --violeta: #6d3ff0;          /* el de los botones: pasa contraste con blanco encima */
    --violeta-deco: #7c5cff;     /* sólo degradados y bordes sobre fondo oscuro */
    --violeta-claro: #b9a8ff;    /* texto de acento sobre oscuro */
    --superficie-oscura: #13131c;
    --superficie-alta: #191924;
    --borde-oscuro: #23232e;
    --tinta-tenue: #a7a7b6;
}

.lp section { padding: 4.5rem 1.25rem; }
.lp .interior { max-width: 62rem; margin: 0 auto; }

/* La barra es pegajosa, así que un salto a un ancla deja el título DEBAJO de ella.
   En un teléfono, donde la sección tiene menos relleno arriba, el rótulo quedaba
   tapado. `scroll-margin-top` es lo que le dice al navegador dónde termina de
   verdad el borde de arriba. */
.lp section[id] { scroll-margin-top: 4.5rem; }

.lp .rotulo {
    display: block;
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--violeta-claro);
    margin-bottom: .75rem;
}

.lp h2 {
    font-size: clamp(1.6rem, 4vw, 2.35rem);
    line-height: 1.14;
    letter-spacing: -.015em;
    margin: 0 0 1rem;
    max-width: 20ch;
}

.lp .lp-lead {
    font-size: 1.0625rem;
    color: var(--tinta-tenue);
    max-width: 52ch;
    margin: 0 0 2rem;
}

/* --- Hero ------------------------------------------------------------------
   El degradado hace el trabajo que en la propuesta hacía una fotografía: da
   profundidad sin traer una imagen de nadie. `clamp()` en el tamaño del título
   evita el salto entre teléfono y escritorio sin un solo punto de corte. */
.lp-hero {
    background:
        radial-gradient(58rem 38rem at 12% -12%, rgba(124, 92, 255, .40), transparent 62%),
        radial-gradient(42rem 32rem at 96% 4%, rgba(56, 189, 248, .13), transparent 58%),
        #0a0a0f;
    border-bottom: 1px solid var(--borde-oscuro);
    padding-top: 3.5rem;
    padding-bottom: 4rem;
    overflow: hidden;
}

.lp-hero-caja {
    display: grid;
    gap: 2.75rem;
    align-items: center;
}
@media (min-width: 60rem) {
    .lp-hero-caja { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 3rem; }
    .lp-hero { padding-top: 4.5rem; padding-bottom: 5rem; }
}

.lp-hero h1 {
    font-size: clamp(2.1rem, 6.4vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -.025em;
    margin: 0 0 1.1rem;
    max-width: 15ch;
}
.lp-bajada {
    font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
    color: var(--tinta-tenue);
    max-width: 44ch;
    margin: 0 0 1.75rem;
}
.lp-nota { color: #7d7d8d; font-size: .8125rem; margin: 1rem 0 0; }

.lp-acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

.lp .btn-primario,
.lp .btn-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .75rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.lp .btn-primario {
    background: var(--violeta); color: #fff;
    box-shadow: 0 8px 22px rgba(109, 63, 240, .34);
}
.lp .btn-primario:hover { background: #5c31e0; transform: translateY(-1px); }
.lp .btn-secundario { border-color: #3a3a4a; color: #f5f5f7; }
.lp .btn-secundario:hover { border-color: var(--violeta-claro); transform: translateY(-1px); }
.lp a:focus-visible, body.landing a:focus-visible, body.landing summary:focus-visible {
    outline: 2px solid var(--violeta-claro);
    outline-offset: 2px;
}

/* --- La escena del hero ----------------------------------------------------
   Fotos → la pieza que Rushy arma → el estado que cambia cuando el dueño
   aprueba. Es el producto entero contado sin una palabra de más. */
.lp-escena {
    display: grid;
    justify-items: center;
    gap: 0;
    min-width: 0;
}

.lp-fuente {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .85rem;
    background: var(--superficie-alta);
    border: 1px solid var(--borde-oscuro);
    border-radius: 999px;
}
.lp-fuente-rotulo { font-size: .75rem; color: var(--tinta-tenue); white-space: nowrap; }
.lp-miniaturas { display: flex; gap: .3rem; }
.lp-mini { width: 1.5rem; height: 1.5rem; border-radius: .35rem; display: block; }
.lp-mini-a { background: linear-gradient(140deg, #f0a04b, #e2622a); }
.lp-mini-b { background: linear-gradient(140deg, #4bb0f0, #2a5ee2); }
.lp-mini-c { background: linear-gradient(140deg, #7ce29a, #2ab27a); }

/* El hilo entre las fotos y la pieza. Dos píxeles de degradado dicen «esto se
   convierte en aquello» mejor que una flecha. */
.lp-fuente::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    width: 1px; height: 1.6rem;
    background: linear-gradient(#3a3a4a, transparent);
}
.lp-fuente { position: relative; margin-bottom: 1.6rem; }

.lp-pieza {
    position: relative;
    width: min(19rem, 100%);
    background: var(--superficie-oscura);
    border: 1px solid var(--borde-oscuro);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.lp-pieza-imagen {
    /* 4:5 de verdad, sin tope de alto. [F] Con `max-height`, el navegador conserva la
       proporción RECORTANDO EL ANCHO —es lo que dice la especificación cuando la altura
       queda acotada y el ancho es automático—, así que la foto quedaba angosta y con
       media tarjeta vacía al costado: se veía como un error de maquetación. Lo que acota
       el alto es el ancho de la tarjeta, no un tope suelto. */
    aspect-ratio: 4 / 5;
    background:
        radial-gradient(14rem 10rem at 30% 20%, rgba(255, 255, 255, .16), transparent 60%),
        linear-gradient(155deg, #f0a04b 0%, #e2622a 46%, #7c3aed 100%);
}
.lp-pieza-cuerpo { padding: .85rem 1rem 1rem; }
.lp-cuenta { display: block; font-size: .75rem; color: #8a8a99; margin-bottom: .35rem; }
.lp-copy { margin: 0 0 .5rem; font-size: .9375rem; line-height: 1.45; }
.lp-tags { margin: 0; font-size: .8125rem; }
.lp-tags span { color: var(--violeta-claro); margin-inline-end: .4rem; }

/* Los dos estados comparten la misma celda: uno se va y el otro llega en su
   lugar, sin que la tarjeta cambie de alto ni la página se mueva. */
.lp-estados {
    display: grid;
    border-block-start: 1px solid var(--borde-oscuro);
    padding: .7rem 1rem;
}
.lp-estado {
    grid-area: 1 / 1;
    font-size: .8125rem; font-weight: 600;
}
.lp-estado-espera { color: #d9b45f; }
.lp-estado-listo { color: #79d19b; }

.lp-sello {
    position: absolute; top: .7rem; inset-inline-end: .7rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .85rem;
    background: var(--violeta);
    color: #fff; font-size: .8125rem; font-weight: 600;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(109, 63, 240, .45);
}
.lp-tilde-svg {
    width: 14px; height: 14px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
}

/* --- El problema, con su respuesta en la misma pantalla -------------------- */
.lp-problema { background: #0c0c13; border-bottom: 1px solid var(--borde-oscuro); }

.lp-grilla {
    display: grid;
    gap: 1rem;
    /* `minmax(0, …)` en todas: sin el 0, un texto largo fija el ancho de la
       columna y la página entera se desplaza de costado en un teléfono. Es el
       defecto que ya tuvo la barra de navegación, y por eso la landing entra
       en G12. */
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.lp-caja {
    min-width: 0;
    background: var(--superficie-oscura);
    border: 1px solid var(--borde-oscuro);
    border-radius: 14px;
    padding: 1.25rem;
    transition: border-color .18s ease, transform .18s ease;
}
.lp-caja:hover { border-color: #34344a; transform: translateY(-2px); }
.lp-caja h3 { margin: 0 0 .4rem; font-size: 1rem; }
.lp-caja p { margin: 0; color: var(--tinta-tenue); font-size: .9375rem; }

.lp-remate {
    margin: 2rem 0 0;
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -.01em;
}

/* --- Los cuatro pasos ------------------------------------------------------
   Un flujo, no cuatro cajas iguales: el número manda y una línea los une. En
   un teléfono la línea se pone vertical sola porque la grilla cambia de eje. */
.lp-pasos {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    counter-reset: paso;
}
.lp-paso {
    position: relative;
    min-width: 0;
    padding: 1.25rem;
    background: var(--superficie-oscura);
    border: 1px solid var(--borde-oscuro);
    border-radius: 14px;
}
.lp-paso-numero {
    display: inline-block;
    font-size: .75rem; font-weight: 700; letter-spacing: .1em;
    color: var(--violeta-claro);
    margin-bottom: .55rem;
}
.lp-paso h3 { margin: 0 0 .35rem; font-size: 1rem; }
.lp-paso p { margin: 0; color: var(--tinta-tenue); font-size: .9375rem; }

/* El hilo que los encadena. Va en el eje que corresponda: de costado cuando hay
   varias columnas y hacia abajo cuando el teléfono los apila. */
.lp-paso::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 100%;
    width: 1px; height: 1rem;
    background: linear-gradient(#34344a, transparent);
}
.lp-paso-final::after { display: none; }
@media (min-width: 56rem) {
    .lp-paso::after {
        inset-inline-start: 100%;
        inset-block-start: 2.4rem;
        width: 1rem; height: 1px;
        background: linear-gradient(to right, #34344a, transparent);
    }
}

/* --- Formatos --------------------------------------------------------------
   Cada formato con su proporción real dibujada: es la información. Un carrusel
   no se explica con un ícono, se explica mostrando que son varias piezas. */
.lp-formatos-seccion { background: #0c0c13; border-block: 1px solid var(--borde-oscuro); }

.lp-formatos {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 45%), 1fr));
}
.lp-formato {
    min-width: 0;
    /* Columna, para que los marcos se apoyen todos sobre la MISMA línea y los
       cuatro rótulos queden a la misma altura. Sin esto, cada proporción empieza
       donde termina la de al lado y la fila se ve desprolija — que es justo lo
       contrario de lo que esta sección quiere mostrar. */
    display: flex; flex-direction: column;
    text-align: center;
    background: var(--superficie-oscura);
    border: 1px solid var(--borde-oscuro);
    border-radius: 14px;
    padding: 1rem;
    transition: border-color .18s ease, transform .18s ease;
}
.lp-formato:hover { border-color: var(--violeta-deco); transform: translateY(-2px); }
.lp-marco {
    /* La proporción es el dato, así que no se toca; lo que se acota es el ANCHO,
       que es lo que decide cuánto mide de alto un 9:16.

       [F] `margin-inline: auto` para centrarlo no sirve acá: dentro de un contenedor
       flexible en columna, un margen automático en el eje transversal APAGA el
       estirado, así que el marco se quedaba con el ancho de su contenido —que es
       cero— y los cuatro formatos desaparecían. Se centra con `align-self`, que es
       lo que centra sin tocar el tamaño. */
    width: min(7.5rem, 100%);
    flex: 0 0 auto;
    align-self: center;
    margin-block-start: auto;
    border-radius: 8px;
    background: linear-gradient(150deg, rgba(124, 92, 255, .58), rgba(56, 189, 248, .22));
    border: 1px solid #34344a;
    margin-bottom: .65rem;
}
.lp-marco-916 { aspect-ratio: 9 / 16; }
.lp-marco-45  { aspect-ratio: 4 / 5; }
.lp-marco-11  { aspect-ratio: 1 / 1; }
.lp-formato b { display: block; font-size: .9375rem; }
.lp-formato span { color: var(--tinta-tenue); font-size: .8125rem; }

/* El carrusel se dibuja como varias piezas superpuestas: la pila ES el dato. */
.lp-pila .lp-marco { position: relative; }
.lp-pila .lp-marco::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translate(6px, -6px);
    border-radius: 8px;
    border: 1px solid #34344a;
    background: rgba(19, 19, 28, .85);
    z-index: -1;
}
/* En hebreo la pila se apoya del otro lado: si no, tapa el borde de la pieza de
   adelante en vez de asomar detrás. */
[dir="rtl"] .lp-pila .lp-marco::after { transform: translate(-6px, -6px); }

/* --- La semana resuelta y el control --------------------------------------- */
.lp-dos-columnas {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 60rem) {
    .lp-dos-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: 3rem; }
}

.lp-subtitulo {
    margin: 2.25rem 0 .85rem;
    font-size: 1.125rem;
    letter-spacing: -.01em;
}
.lp-garantias { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.lp-garantias li {
    min-width: 0;
    color: var(--tinta-tenue); font-size: .9375rem; line-height: 1.55;
    padding-inline-start: .9rem;
    border-inline-start: 2px solid #2e2e3f;
}
.lp-garantias b { display: block; color: #f5f5f7; font-weight: 600; }

/* La maqueta del panel: las mismas cajas de la aplicación, dibujadas. */
.lp-panel {
    min-width: 0;
    background: var(--superficie-oscura);
    border: 1px solid var(--borde-oscuro);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .48);
}
.lp-panel-barra {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .7rem .9rem;
    background: var(--superficie-alta);
    border-block-end: 1px solid var(--borde-oscuro);
}
.lp-panel-marca { font-weight: 700; font-size: .9375rem; }
.lp-panel-chip {
    font-size: .6875rem; color: var(--tinta-tenue);
    border: 1px solid var(--borde-oscuro); border-radius: 999px;
    padding: .1rem .55rem;
}
.lp-panel-cuerpo { padding: .9rem; }
.lp-panel-titulo { margin: 0 0 .7rem; font-size: .75rem; letter-spacing: .1em;
                   text-transform: uppercase; color: #7d7d8d; }
.lp-panel-fila {
    display: flex; align-items: center; gap: .55rem;
    padding: .55rem .65rem; margin-bottom: .4rem;
    background: var(--superficie-alta);
    border: 1px solid var(--borde-oscuro);
    border-radius: 10px;
    font-size: .8125rem;
}
.lp-panel-fila-alerta { border-color: #4a3f1f; background: #1d1a12; color: #e8c877; }
.lp-punto { width: .5rem; height: .5rem; border-radius: 50%; background: #d9b45f; flex: none; }
.lp-punto-ok { background: var(--violeta-deco); }

.lp-panel-cifras {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem; margin-top: .8rem;
}
.lp-panel-cifras span {
    min-width: 0;
    display: flex; flex-direction: column;
    padding: .5rem .6rem;
    border: 1px solid var(--borde-oscuro); border-radius: 10px;
    font-size: .6875rem; color: var(--tinta-tenue);
}
.lp-panel-cifras b { font-size: 1.15rem; color: #f5f5f7; line-height: 1.1; }

/* --- Cierre ---------------------------------------------------------------- */
.lp-cierre {
    background:
        radial-gradient(40rem 24rem at 50% 120%, rgba(124, 92, 255, .32), transparent 62%),
        #0a0a0f;
    border-top: 1px solid var(--borde-oscuro);
    text-align: center;
}
.lp-cierre h2 { margin-inline: auto; max-width: 24ch; }
.lp-cierre .lp-acciones { justify-content: center; }

@media (max-width: 480px) {
    .lp section { padding: 3rem 1rem; }
    .lp-hero { padding-top: 2.5rem; padding-bottom: 3rem; }
}

/* ===========================================================================
   MOVIMIENTO

   Dos mecanismos y ningún archivo de JavaScript:

   1. La entrada del hero: `@keyframes` con retardos escalonados, que corren UNA
      vez al abrir y no vuelven a ejecutarse.
   2. Lo que aparece al bajar: `animation-timeline: view()`, o sea que el
      navegador ata el progreso de la animación a la posición del elemento en la
      pantalla. Va detrás de `@supports`, así que donde no exista el contenido se
      ve completo desde el primer cuadro — falla mostrando, nunca escondiendo.

   El TÍTULO se mueve sólo con `transform` y nunca con `opacity`. No es un
   detalle de gusto: un elemento en `opacity: 0` no cuenta como pintado, así que
   animarle la opacidad al <h1> —que es el elemento más grande de la página—
   correría el LCP medio segundo hacia adelante a cambio de nada.
   =========================================================================== */

@keyframes lp-sube { from { transform: translateY(16px); } to { transform: none; } }
@keyframes lp-aparecer { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lp-aparecer-corto { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lp-irse { to { opacity: 0; transform: translateY(-7px); } }

@media (prefers-reduced-motion: no-preference) {

    .lp-hero .rotulo   { animation: lp-sube .5s .00s both cubic-bezier(.22, .7, .28, 1); }
    .lp-hero h1        { animation: lp-sube .58s .06s both cubic-bezier(.22, .7, .28, 1); }
    .lp-bajada         { animation: lp-sube .58s .14s both cubic-bezier(.22, .7, .28, 1); }
    .lp-hero .lp-acciones { animation: lp-aparecer-corto .5s .24s both cubic-bezier(.22, .7, .28, 1); }
    .lp-nota           { animation: lp-aparecer-corto .5s .34s both cubic-bezier(.22, .7, .28, 1); }

    .lp-e1 { animation: lp-aparecer .6s .18s both cubic-bezier(.22, .7, .28, 1); }
    .lp-e2 { animation: lp-aparecer .6s .34s both cubic-bezier(.22, .7, .28, 1); }

    /* El momento del producto: la pieza espera, el dueño aprueba, queda
       programada. Ocurre UNA vez, dura medio segundo y después nada se mueve. */
    .lp-estado-espera { animation: lp-irse .45s 2.5s both; }
    .lp-estado-listo  { animation: lp-aparecer-corto .45s 2.72s both; }
    .lp-e3            { animation: lp-aparecer-corto .5s 2.62s both cubic-bezier(.22, .7, .28, 1); }

    @supports (animation-timeline: view()) {
        .lp-aparece {
            animation: lp-aparecer linear both;
            animation-timeline: view();
            animation-range: entry 6% entry 78%;
        }
    }
}

/* Quien pidió menos movimiento no recibe ninguno — y tampoco recibe una pantalla
   rota: los dos estados de la tarjeta comparten celda, así que sin la animación
   que saca al primero se leerían encima. Se muestra el que corresponde. */
@media (prefers-reduced-motion: reduce) {
    .lp *, body.landing * { animation: none !important; transition: none !important; }
    .lp-estado-espera { display: none; }
}