/* ===========================================================================
   DKARD — landing de ventas (dkard.co)
   ===========================================================================
   CSS escrito a mano, no compilado. El proyecto entero es HTML/CSS/JS puro sin
   build step, y la maqueta original venía con Tailwind por CDN: eso descarga el
   motor JIT y genera los estilos EN el dispositivo del visitante, en cada
   visita. El tráfico de esta página llega desde el link de la bio de Instagram,
   o sea desde su navegador incrustado, en un celular de gama media y con 4G.
   Ahí ese costo se paga en segundos de pantalla sin estilos.

   La paleta y la tipografía son las MISMAS del producto (admin.css, wizard.css,
   dk-particulas.css). No es purismo: quien pulsa "Crear mi Dkard" aterriza en el
   asistente un segundo después, y si el asistente parece de otra empresa, la
   duda aparece justo en el momento de dar el correo.
   =========================================================================== */

:root {
    /* Tokens de marca — copiados de admin.css, no reinventados. */
    --bg: #1b100c;
    --bg-2: #2a1710;
    --bg-3: #3d2114;
    --panel: #2a1912;
    --panel-2: #35211a;
    --border: #4a2f22;
    --text: #f7ece4;
    --muted: #b99a86;
    --accent: #f2600c;
    --accent-2: #ffbd12;
    --accent-gradient: linear-gradient(135deg, #ffbd12, #f2600c);
    --accent-ink: #2a1509;
    --danger: #e5484d;
    --ok: #3ecf8e;
    --whatsapp: #25d366;

    --radio: 14px;
    --radio-lg: 22px;
    --ancho: 1140px;

    /* Un solo sitio para el ritmo vertical de las secciones. */
    --seccion-y: clamp(3.5rem, 9vw, 7rem);
}

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

html {
    scroll-behavior: smooth;
    /* El header es sticky: sin esto, saltar a una sección con # la deja
       tapada por la barra. */
    scroll-padding-top: 5.5rem;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Blinker SOLO en tamaño de display: los dos titulares grandes y las cifras.
   A partir de ~1.6rem su peso se lee como fuerza; por debajo de eso se lee como
   pesadez, y los títulos de tarjeta salían embotados.
   Todo lo demás —h3, títulos de tarjeta, nombres de plan— va en Barlow 600, que
   es lo mismo que usa el cuerpo pero con jerarquía suficiente. */
h1, h2, .lp-precio-cifra, .lp-logo-texto {
    font-family: 'Blinker', 'Barlow', system-ui, sans-serif;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0;
}

h3 {
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 600;
    line-height: 1.25;
    /* Sin letter-spacing negativo: en Barlow a estos tamaños aprieta las letras
       y cuesta leerlo. Ese ajuste es de los titulares grandes. */
    letter-spacing: 0;
    margin: 0;
}

p { margin: 0; }
img, svg { max-width: 100%; }
a { color: inherit; }

::selection { background: var(--accent); color: #fff; }

/* Foco visible para quien navega con teclado. Se usa :focus-visible para no
   dibujar el anillo en cada clic de mouse. */
:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 3px;
    border-radius: 4px;
}

.lp-envoltura {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

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

/* ---------------------------------------------------------------------------
   Fondos
   ---------------------------------------------------------------------------
   Dos capas decorativas, las dos baratas:

   1. AURORA. Manchas radiales que se desplazan lento. La regla que importa es
      que NO se anima `background-position` ni los stops del degradado — eso
      repinta la pantalla entera en cada cuadro. Se dibuja una vez sobre una
      capa sobredimensionada y se anima `transform`, que corre en el compositor.

   2. GRANO. Un feTurbulence de 200x200 como data-URI, repetido y estático. El
      degradado marrón oscuro es justo el tipo de degradado que produce bandas
      en pantallas de 8 bits; el grano las tapa y de paso da textura de brasa.
      Sin animación encima: animar ruido es carísimo y no aporta nada.
   --------------------------------------------------------------------------- */

.lp-aurora {
    position: absolute;
    /* Sobredimensionada para que al moverla no asomen los bordes. */
    inset: -30%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 12%, rgba(242, 96, 12, .26), transparent 46%),
        radial-gradient(circle at 82% 78%, rgba(255, 189, 18, .14), transparent 50%),
        radial-gradient(circle at 55% 40%, rgba(255, 145, 66, .10), transparent 55%);
    animation: lp-derivar 34s ease-in-out infinite alternate;
    /* Sin will-change: una animación de transform en curso ya promociona la capa
       por sí sola, y dejarlo puesto reserva memoria de GPU también mientras está
       pausada — que, con la pausa fuera de pantalla, es casi todo el tiempo.
       Esta es la capa más grande de la página, así que ahí sí se nota. */
}

@keyframes lp-derivar {
    to { transform: translate3d(-6%, -4%, 0) rotate(5deg) scale(1.06); }
}

.lp-grano {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    .lp-aurora { animation: none; }
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

.lp-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(27, 16, 12, .95);
    border-bottom: 1px solid rgba(74, 47, 34, .6);
}

/* El desenfoque solo en escritorio. En móvil es el mayor riesgo de respuesta
   de la página: detrás hay chispas animadas, así que el resultado del filtro no
   se puede cachear y hay que recalcularlo en cada cuadro. */
@media (min-width: 768px) {
    .lp-header {
        background: rgba(27, 16, 12, .82);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
}

.lp-header-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 4.5rem;
}

.lp-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.lp-logo img { height: 30px; width: auto; display: block; }

/* La insignia del header: el isotipo dentro de un cuadro con el degradado de la
   marca apagado. El logotipo solo quedaba tendido y sin peso contra un header
   oscuro; el cuadro le da al ojo dónde anclarse al volver arriba. */
.lp-insignia-marca {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(255, 189, 18, .18), rgba(242, 96, 12, .14));
    border: 1px solid rgba(242, 96, 12, .32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.lp-insignia-marca img { height: 20px; width: auto; }

/* La palabra se mide contra la LLAMA de la insignia (20px), no contra su caja
   (36px): con los 30px que hereda de .lp-logo, las letras salían más grandes
   que el isotipo y el conjunto se leía descompensado. */
.lp-logo--header .lp-logo-texto-img { height: 23px; }

/* En pantallas angostas manda la insignia y el logotipo se retira: así el CTA
   —que es lo que de verdad hace falta ahí— conserva su ancho. */


.lp-nav {
    display: none;
    gap: 1.75rem;
    font-size: .95rem;
    font-weight: 500;
}

@media (min-width: 900px) { .lp-nav { display: flex; } }

.lp-nav a {
    color: var(--muted);
    text-decoration: none;
    transition: color .18s ease;
}

.lp-header-acciones { display: flex; align-items: center; gap: .75rem; }

.lp-entrar {
    display: none;
    color: var(--muted);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
}
@media (min-width: 600px) { .lp-entrar { display: inline-block; } }

/* ---------------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------------- */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    /* 44px de alto mínimo: por debajo de eso los toques accidentales se
       disparan, y esta página se usa casi toda con el pulgar. */
    min-height: 46px;
    padding: .7rem 1.35rem;
    border: 0;
    border-radius: var(--radio);
    font: inherit;
    font-weight: 700;
    font-size: .98rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .18s ease, background-color .18s ease;
}

.lp-btn:active { transform: scale(.98); }

.lp-btn--primario {
    background: var(--accent-gradient);
    /* Tinta oscura y no blanca: sobre el amarillo del degradado, el blanco no
       llega al contraste mínimo. */
    color: var(--accent-ink);
    box-shadow: 0 8px 24px -8px rgba(242, 96, 12, .7);
}

.lp-btn--fantasma {
    background: rgba(53, 33, 26, .7);
    color: var(--text);
    border: 1px solid var(--border);
}

.lp-btn--wa { background: var(--whatsapp); color: #06210f; }

.lp-btn--grande { min-height: 56px; padding: 1rem 2rem; font-size: 1.05rem; }
.lp-btn--bloque { width: 100%; }

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.lp-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 7vw, 5rem) var(--seccion-y);
    background: linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 48%, var(--bg-3) 100%);
}

/* Las chispas de la marca van SOLO acá. La capa de dk-particulas.css es
   `inset: 0` y sus keyframes terminan en -102vh: puesta sobre el envoltorio de
   toda la landing mediría varios miles de píxeles, las chispas se apagarían en
   el primer quinto del recorrido y quedaría una capa compuesta enorme por el
   resto de la página. */
.lp-hero .dk-particulas { z-index: 2; }

.lp-hero > .lp-envoltura { position: relative; z-index: 3; }

.lp-hero-grid {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4rem);
    align-items: center;
}

@media (min-width: 950px) {
    .lp-hero-grid { grid-template-columns: 1.05fr .95fr; }
}

.lp-insignia {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: rgba(242, 96, 12, .12);
    border: 1px solid rgba(242, 96, 12, .32);
    color: var(--accent-2);
    font-size: .82rem;
    font-weight: 600;
}

.lp-hero h1 {
    margin-block: 1.25rem;
    font-size: clamp(2.1rem, 6.2vw, 3.9rem);
    font-weight: 800;
}

/* El acento va en el degradado real del logotipo (#FFBD12 -> #F95A00). La
   maqueta original usaba un degradado rosa que no existe en ninguna parte de
   la marca. */
.lp-degradado {
    background: linear-gradient(120deg, #ffbd12, #f95a00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.lp-hero-sub {
    max-width: 34rem;
    color: #e7d5c8;
    font-size: clamp(1.02rem, 2.4vw, 1.18rem);
}

.lp-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 1.9rem;
}

.lp-hero-nota {
    margin-top: 1rem;
    color: var(--muted);
    font-size: .9rem;
}

.lp-garantias {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(74, 47, 34, .55);
    color: var(--muted);
    font-size: .86rem;
}

.lp-garantia { display: inline-flex; align-items: center; gap: .4rem; }
.lp-garantia svg { color: var(--accent-2); flex: 0 0 auto; }

/* --- Buscador de URL ------------------------------------------------------ */

/* Preguntar "¿está libre dkard.co/tunegocio?" antes de pedir el correo: la
   persona ya invirtió algo (eligió su nombre) cuando llega al registro. */
.lp-slug {
    margin-top: 1.9rem;
    padding: 1.1rem;
    background: rgba(42, 25, 18, .72);
    border: 1px solid var(--border);
    border-radius: var(--radio-lg);
}

.lp-slug-label {
    display: block;
    margin-bottom: .6rem;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 600;
}

.lp-slug-fila {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    flex-wrap: wrap;
}

.lp-slug-campo {
    display: flex;
    align-items: center;
    flex: 1 1 15rem;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radio);
    padding-left: .8rem;
    transition: border-color .18s ease;
}

.lp-slug-campo:focus-within { border-color: var(--accent); }

.lp-slug-prefijo {
    color: var(--muted);
    font-size: .95rem;
    white-space: nowrap;
    user-select: none;
}

.lp-slug-campo input {
    flex: 1;
    min-width: 0;
    padding: .75rem .6rem;
    background: transparent;
    border: 0;
    color: var(--text);
    font: inherit;
    font-size: .98rem;
}
.lp-slug-campo input:focus { outline: none; }

.lp-slug-aviso {
    margin-top: .7rem;
    font-size: .88rem;
    min-height: 1.3em;
    color: var(--muted);
}
.lp-slug-aviso[data-estado="libre"] { color: var(--ok); }
.lp-slug-aviso[data-estado="tomado"],
.lp-slug-aviso[data-estado="error"] { color: #ffb4a2; }

/* El premio: solo aparece cuando la dirección está libre de verdad. */
.lp-slug-premio { display: none; margin-top: .85rem; }
.lp-slug--libre .lp-slug-premio { display: inline-flex; }
.lp-slug-premio b { font-weight: 700; }

/* Un solo destello de 450ms, no un bucle. Un pulso que se repite cada pocos
   segundos es lo que se lee como plantilla barata; uno que ocurre en el momento
   exacto en que pasó algo se lee como que el sistema respondió. */
.lp-slug--libre .lp-slug-campo {
    border-color: var(--ok);
    animation: lp-premio .45s cubic-bezier(.2, .7, .3, 1) 1;
}

@keyframes lp-premio {
    0%   { box-shadow: 0 0 0 0 rgba(62, 207, 142, .5); }
    60%  { box-shadow: 0 0 0 12px rgba(62, 207, 142, 0); }
    100% { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .lp-slug--libre .lp-slug-campo { animation: none; }
}

/* --- Teléfono del hero ---------------------------------------------------- */

.lp-telefono {
    position: relative;
    /* 338 y no 310 (2026-08-24): el dkard del hero se veia chico al lado del
       texto. El 82vw se queda igual —es el que evita que el telefono se salga
       en pantallas angostas— y la proporcion no se toca: `aspect-ratio` es una
       razon, asi que el marco crece entero y no se deforma. */
    width: min(338px, 82vw);
    margin-inline: auto;
    aspect-ratio: 310 / 620;
    padding: 10px;
    background: #120a08;
    border: 3px solid #3d221d;
    border-radius: 34px;
    box-shadow: 0 30px 70px -25px rgba(242, 96, 12, .45);
}

.lp-telefono::before {
    content: '';
    position: absolute;
    top: 14px; left: 50%;
    transform: translateX(-50%);
    width: 78px; height: 5px;
    background: #2a1710;
    border-radius: 999px;
    z-index: 2;
}

.lp-telefono iframe,
.lp-telefono img {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 26px;
    display: block;
    background: var(--bg-2);
    object-fit: cover;
}

.lp-telefono-pie {
    margin-top: .9rem;
    text-align: center;
    color: var(--muted);
    font-size: .84rem;
}

/* ---------------------------------------------------------------------------
   Secciones
   --------------------------------------------------------------------------- */

.lp-seccion { position: relative; padding-block: var(--seccion-y); }
.lp-seccion--alt { background: #150c09; border-block: 1px solid rgba(74, 47, 34, .4); }

/* Una sección de contenido con chispas. Rompe la regla de "movimiento continuo
   solo en hero y pie", así que va SOLO en la del precio: es el momento de mayor
   fricción de la página y un fondo vivo ahí le quita frialdad al bloque donde se
   habla de plata. Con `overflow: hidden` para que las chispas no se salgan, y
   por encima el mismo candado de pausa fuera de pantalla que el hero. */
.lp-seccion--brasa {
    overflow: hidden;
    background: linear-gradient(180deg, #150c09, #1e120d 55%, #150c09);
    /* dk-fondo-chispas trae `min-height: 100vh` porque nació para pantallas
       completas (el asistente, el ingreso). Sobre una sección de contenido eso
       la estiraba a una pantalla entera y dejaba un socavón vacío debajo de las
       barras. Acá manda el contenido. */
    min-height: 0;
}

.lp-seccion--brasa > .lp-envoltura { position: relative; z-index: 3; }
.lp-seccion--brasa .dk-particulas { z-index: 2; }

/* La aurora de esta sección va más apagada que la del hero: acá acompaña, no
   protagoniza — detrás hay cifras que se tienen que leer. */
.lp-seccion--brasa .lp-aurora { opacity: .55; }

.lp-cabecera { max-width: 44rem; margin-inline: auto; text-align: center; margin-bottom: 3rem; }
.lp-cabecera--izq { margin-inline: 0; text-align: left; }

.lp-etiqueta {
    display: block;
    margin-bottom: .7rem;
    color: var(--accent-2);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-cabecera h2 {
    font-size: clamp(1.65rem, 4.4vw, 2.5rem);
    font-weight: 800;
}

.lp-cabecera p {
    margin-top: .9rem;
    color: var(--muted);
    font-size: 1.03rem;
}





/* ---------------------------------------------------------------------------
   Banda de los tres pilares
   ---------------------------------------------------------------------------
   Sin tarjetas, sin fondo propio, sin sombras: solo un filete arriba y abajo.
   Esa es toda la razón por la que se lee como discreta. Con tarjeta y borde
   sería la sexta rejilla seguida de la página y se perdería entre las otras.

   Va entre dos secciones densas a propósito: funciona como respiro visual y de
   paso resume el producto en tres frases justo antes de la lista larga.
   --------------------------------------------------------------------------- */

.lp-banda {
    /* Menos aire que una sección normal: es una banda, no un bloque. */
    padding-block: clamp(2rem, 5vw, 3rem);
    border-block: 1px solid rgba(74, 47, 34, .55);
    background: linear-gradient(180deg, rgba(242, 96, 12, .05), transparent);
}

.lp-tres {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 820px) {
    .lp-tres { grid-template-columns: repeat(3, 1fr); }
}

.lp-tres-item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}

/* El ícono va en un cuadro tenue, no en un círculo con degradado: llamativo es
   el color del trazo, no el relleno. Un ícono con fondo naranja sólido acá
   compite con los botones, que son lo único que debe gritar en esta página. */
.lp-tres-ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(242, 96, 12, .1);
    border: 1px solid rgba(242, 96, 12, .22);
    color: var(--accent-2);
}

.lp-tres-ico svg { width: 20px; height: 20px; }

.lp-tres-item h3 {
    font-size: .99rem;
    margin-bottom: .3rem;
}

.lp-tres-item p {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.5;
}

/* --- Vitrina de dkards reales --------------------------------------------- */

/* Tira horizontal, no rejilla.
   Es el ÚNICO eje horizontal de la página, y ahí está la mitad de su valor: en
   una columna de secciones apiladas, un bloque que se desliza con el pulgar
   rompe el ritmo por sí solo. El otro motivo es el gesto: este público desliza
   en Instagram todo el día.

   El sangrado a los bordes (margen negativo compensado con padding) hace que la
   última tarjeta se corte contra el borde de la pantalla, y ese corte dice "hay
   más" sin escribirlo. El body ya lleva overflow-x: hidden. */
.lp-vitrina {
    display: flex;
    gap: .85rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    margin-inline: calc(-1 * clamp(1rem, 4vw, 2rem));
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-block: .35rem .9rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.lp-vitrina::-webkit-scrollbar { height: 6px; }
.lp-vitrina::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

/* Arrastrable con el mouse. La clase la pone landing.js solo con puntero fino:
   el cursor de mano abierta es la única pista de que se puede agarrar, y en
   táctil sería una promesa vacía. */
.lp-arrastrable { cursor: grab; }
.lp-arrastrando {
    cursor: grabbing;
    /* Sin snap mientras se arrastra: el imán pelea contra el dedo y la tira se
       siente pegajosa. Vuelve solo al soltar. */
    scroll-snap-type: none;
    user-select: none;
}
/* Las tarjetas no se arrastran como imágenes/enlaces al agarrarlas. */
.lp-arrastrable a, .lp-arrastrable img { -webkit-user-drag: none; user-select: none; }

/* 78% deja asomar la siguiente: es la señal de que se desliza. */
/* ---------------------------------------------------------------------------
   La tarjeta de un dkard
   ---------------------------------------------------------------------------
   Foto arriba a sangre, y debajo el bloque de texto sobre panel oscuro. Es la
   estructura de una tarjeta de artículo, y funciona acá por lo mismo que allá:
   la imagen hace el trabajo de decir "de qué se trata" y el texto solo tiene
   que rematar, en vez de cargar con todo.

   Antes la foto iba de fondo al 18% y el resultado era una tarjeta gris con una
   mancha detrás: ni se veía el negocio ni se leía mejor el texto.
   --------------------------------------------------------------------------- */

.lp-vitrina-item {
    display: flex;
    flex-direction: column;
    flex: 0 0 min(80%, 19rem);
    scroll-snap-align: start;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radio-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

@media (min-width: 900px) { .lp-vitrina-item { flex: 0 0 17.5rem; } }

/* --- La foto --- */

.lp-vt-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--bg-3);
    overflow: hidden;
}

.lp-vt-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Un punto por debajo del original: sobre el marrón de la marca, las fotos
       a plena saturación se ven como seis marcas distintas peleando. */
    filter: saturate(.92);
}

.lp-vt-foto--vacia {
    display: block;
    width: 100%; height: 100%;
    background: linear-gradient(145deg, var(--bg-3), var(--panel));
}

/* El botón redondo del reverso de la referencia. Acá no es "reproducir" sino
   "abrir": estas páginas están vivas y se pueden visitar, que es justo lo que
   la sección invita a hacer. */
.lp-vt-abrir {
    position: absolute;
    left: .75rem;
    bottom: .75rem;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: var(--accent-ink);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .8);
}
.lp-vt-abrir svg { width: 16px; height: 16px; }

/* --- El texto --- */

.lp-vt-cuerpo {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    flex: 1;
    padding: .95rem 1rem 1.1rem;
}

/* El titular del propio negocio. Tres líneas como máximo: es una tarjeta, y sin
   el tope las seis quedan de alturas distintas dentro de la tira. */
.lp-vt-titulo {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    font-size: .98rem;
    line-height: 1.35;
}

.lp-vt-autoria {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: auto;
}

.lp-vt-marca {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    overflow: hidden;
    color: var(--accent);
    font-size: .8rem;
    font-weight: 700;
}
.lp-vt-marca img { width: 100%; height: 100%; object-fit: cover; }

.lp-vt-quien {
    min-width: 0;
    font-size: .8rem;
    color: var(--muted);
    line-height: 1.35;
}
/* El nombre arriba y la dirección debajo, como la línea de autoría y la fecha
   de la referencia. */
.lp-vt-quien b {
    display: block;
    color: #e7d5c8;
    font-weight: 500;
    font-size: .76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La píldora de categoría de la referencia, con lo que sí es verdad acá: lo que
   ese dkard tiene publicado. */
.lp-vt-pildora {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    align-self: flex-start;
    padding: .25rem .6rem;
    border-radius: 6px;
    background: rgba(242, 96, 12, .13);
    border: 1px solid rgba(242, 96, 12, .28);
    color: var(--accent-2);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.lp-vt-pildora i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

/* ---------------------------------------------------------------------------
   Bento de "Qué incluye"
   ---------------------------------------------------------------------------
   Cuatro columnas y tres filas, con una pieza que ocupa 2x2. La jerarquía es el
   punto: diez cajas iguales no dicen cuál importa, así que el ojo las trata a
   todas como relleno y no lee ninguna.

   El colapso es progresivo y sin `dense`: en una sola columna manda el orden del
   DOM, y ahí la pieza grande va primera a propósito. `dense` reacomodaría las
   piezas para tapar huecos y rompería ese orden justo en móvil, que es donde
   está el 80% del tráfico.
   --------------------------------------------------------------------------- */

.lp-bento {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .lp-bento { grid-template-columns: repeat(2, 1fr); }
    .lp-pieza--grande, .lp-pieza--ancha { grid-column: span 2; }
}

@media (min-width: 1000px) {
    .lp-bento { grid-template-columns: repeat(4, 1fr); }
    .lp-pieza--grande { grid-column: span 2; grid-row: span 2; }
    .lp-pieza--ancha  { grid-column: span 2; grid-row: span 1; }
}

.lp-pieza {
    display: flex;
    flex-direction: column;
    padding: 1.4rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radio-lg);
}

.lp-pieza h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.lp-pieza p { color: var(--muted); font-size: .9rem; }

.lp-pieza-ico {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    margin-bottom: .9rem;
    border-radius: 10px;
    background: rgba(242, 96, 12, .1);
    color: var(--accent-2);
}
.lp-pieza-ico svg { width: 19px; height: 19px; }

/* La pieza que manda: más aire, borde de acento y un rescoldo apagado detrás.
   Es lo único del bloque con color de fondo, y por eso se lee como el titular
   de la sección sin necesidad de ser más grande de la cuenta. */
.lp-pieza--grande {
    padding: clamp(1.5rem, 3vw, 2rem);
    border-color: rgba(242, 96, 12, .45);
    background:
        radial-gradient(90% 70% at 15% 0%, rgba(242, 96, 12, .16), transparent 70%),
        var(--panel);
}

.lp-pieza--grande h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
.lp-pieza--grande p { color: #e7d5c8; font-size: .96rem; }
.lp-pieza--grande .lp-pieza-ico {
    width: 46px; height: 46px;
    background: rgba(255, 189, 18, .14);
}
.lp-pieza--grande .lp-pieza-ico svg { width: 23px; height: 23px; }

/* Las cinco piezas de marca, como fichas dentro de la celda grande: le dan
   contenido propio en vez de dejarla como una tarjeta normal estirada. */
.lp-piezas-marca {
    list-style: none;
    margin: auto 0 0;
    padding: 1.1rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.lp-piezas-marca li {
    padding: .22rem .6rem;
    border-radius: 7px;
    background: rgba(27, 16, 12, .55);
    border: 1px solid rgba(255, 189, 18, .2);
    color: #e7d5c8;
    font-size: .78rem;
}

/* ---------------------------------------------------------------------------
   El hilo de WhatsApp
   ---------------------------------------------------------------------------
   Columna estrecha y centrada: es la única sección de la página con esta
   silueta, y de ahí sale la mitad del cambio de ritmo. La otra mitad es que un
   chat no se parece a nada más de lo que hay aquí.

   Es una ILUSTRACIÓN, no una captura ni una conversación de nadie. Va con
   aria-hidden porque para un lector de pantalla es una secuencia de frases
   sueltas sin sentido; el argumento completo está escrito en .lp-hilo-lectura,
   que sí se lee.
   --------------------------------------------------------------------------- */

.lp-hilo {
    max-width: 32rem;
    margin-inline: auto;
}

.lp-hilo-bloque {
    display: grid;
    gap: .4rem;
    padding: 1.15rem 1.1rem 1.3rem;
    background: rgba(18, 10, 8, .55);
    border: 1px solid var(--border);
    border-radius: var(--radio-lg);
}

.lp-hilo-bloque--bueno {
    border-color: rgba(242, 96, 12, .45);
    background:
        radial-gradient(80% 60% at 50% 100%, rgba(242, 96, 12, .12), transparent 70%),
        rgba(18, 10, 8, .55);
}

.lp-hilo-rotulo {
    justify-self: center;
    margin-bottom: .5rem;
    padding: .18rem .7rem;
    border-radius: 999px;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.lp-hilo-bloque--bueno .lp-hilo-rotulo { color: var(--accent-2); border-color: rgba(255, 189, 18, .3); }

.lp-burbuja {
    max-width: 84%;
    padding: .5rem .8rem;
    border-radius: 15px;
    font-size: .92rem;
    line-height: 1.45;
}

/* Quien escribe a la izquierda, tú a la derecha: es la convención de cualquier
   app de mensajería y no hay que explicarla. */
.lp-burbuja--ellos {
    justify-self: start;
    border-bottom-left-radius: 5px;
    background: var(--bg-3);
    color: #e7d5c8;
}

.lp-burbuja--tu {
    justify-self: end;
    border-bottom-right-radius: 5px;
    background: rgba(242, 96, 12, .17);
    border: 1px solid rgba(242, 96, 12, .28);
    color: var(--text);
}

/* Dos mensajes seguidos del mismo lado se pegan, como en WhatsApp. */
.lp-burbuja--seguida { margin-top: -.25rem; border-top-right-radius: 5px; }

.lp-burbuja--pedido { font-size: .87rem; line-height: 1.6; }
.lp-burbuja--pedido b { display: block; margin-bottom: .15rem; color: var(--accent-2); }

.lp-hilo-remate {
    justify-self: center;
    margin-top: .5rem;
    color: var(--muted);
    font-size: .82rem;
    font-style: italic;
}

.lp-hilo-lectura {
    max-width: 30rem;
    margin: 1.15rem auto 2rem;
    text-align: center;
    color: var(--muted);
    font-size: .95rem;
}
.lp-hilo-lectura:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Línea de tiempo de "Cómo funciona"
   ---------------------------------------------------------------------------
   La línea gris la dibuja el ::before del <ol>, y encima va otra naranja
   (::after) que crece con el scroll. Se anima `transform: scaleY`, no `height`:
   height dispara maquetación en cada cuadro; scaleY corre en el compositor.

   Sin scroll-driven animations la línea naranja simplemente se queda llena, que
   es un estado correcto — nunca vacía, o parecería que el proceso no empezó.
   --------------------------------------------------------------------------- */

.lp-linea {
    position: relative;
    list-style: none;
    counter-reset: parada;
    max-width: 34rem;
    margin: 0;
    padding: 0 0 0 3.1rem;
    display: grid;
    gap: 1.9rem;
}

/* El riel apagado, de punta a punta. */
.lp-linea::before,
.lp-linea::after {
    content: '';
    position: absolute;
    left: 15px;
    top: .6rem;
    bottom: .6rem;
    width: 2px;
    border-radius: 2px;
}

.lp-linea::before { background: var(--border); }

/* El riel encendido. Por defecto lleno; el scroll lo controla más abajo. */
.lp-linea::after {
    background: linear-gradient(180deg, #ffbd12, #f2600c);
    transform-origin: top;
}

/* Los dos rieles son pseudo-elementos del <ol>, y el ::after se pinta DESPUÉS
   de los <li>: sin esto, la línea naranja pasaba por encima de los números y
   los tachaba. El z-index sube las paradas por delante de los dos rieles. */
.lp-linea::before, .lp-linea::after { z-index: 0; }

.lp-parada { position: relative; z-index: 1; }

.lp-parada::before {
    counter-increment: parada;
    content: counter(parada);
    position: absolute;
    left: -3.1rem;
    top: -.1rem;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-2);
    border: 2px solid var(--accent);
    color: var(--accent-2);
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: .88rem;
}

.lp-parada h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.lp-parada p { color: var(--muted); font-size: .92rem; }

/* ---------------------------------------------------------------------------
   El video introductorio, al lado de la línea
   ---------------------------------------------------------------------------
   La línea sola dejaba media pantalla vacía a la derecha. Acá va el video, que
   es contenido de verdad —no un adorno— y que además es lo que mejor responde
   la objeción de "¿esto lo puedo hacer yo?": verlo hecho en un minuto convence
   más que cuatro renglones.

   El marco existe aunque el video todavía no: se reemplaza el contenido de
   .lp-video-marco por un <video> o un <iframe> y ya. Mientras tanto dice lo que
   va a haber, en vez de fingir que hay un video que no se puede reproducir.
   --------------------------------------------------------------------------- */

.lp-como { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }

@media (min-width: 900px) {
    .lp-como {
        grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
        align-items: start;
    }
    /* El video acompaña el recorrido en vez de pasar de largo. */
    .lp-video { position: sticky; top: 6rem; }
}

.lp-video { margin: 0; }

.lp-video-marco {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .9rem;
    aspect-ratio: 16 / 9;
    border-radius: var(--radio-lg);
    border: 1px solid var(--border);
    overflow: hidden;

    /* El degradado elegante: brasa que sube desde abajo sobre el marrón de la
       marca, con un halo cálido arriba a la izquierda. Es un degradado estático
       —no se anima nada— así que se rasteriza una vez y no cuesta cuadros. */
    background:
        radial-gradient(70% 90% at 22% 8%, rgba(255, 189, 18, .16), transparent 60%),
        radial-gradient(90% 70% at 50% 108%, rgba(242, 96, 12, .34), transparent 72%),
        linear-gradient(150deg, #2f1c14, #1b100c 62%, #150c09);
}

/* Un filete claro arriba, que es lo que le da el acabado de vidrio sin usar un
   backdrop-filter (caro) ni un borde de color (chillón). */
.lp-video-marco::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 38%);
}

.lp-video-play {
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: var(--accent-ink);
    box-shadow: 0 10px 30px -10px rgba(242, 96, 12, .8);
}
.lp-video-play svg { width: 26px; height: 26px; margin-left: 3px; }

.lp-video-nota {
    position: relative;
    color: var(--muted);
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.lp-video figcaption {
    margin-top: .8rem;
    color: var(--muted);
    font-size: .88rem;
    text-align: center;
}

/* Cuando exista el video de verdad, ocupa el marco completo. */
.lp-video-marco video,
.lp-video-marco iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* --- Ancla de precio ------------------------------------------------------ */

/* Barras horizontales, no tres columnas.
   Tres cajas del mismo tamaño con tres cifras distintas obligan a LEER los
   números para comparar. Con barras de largo proporcional, la comparación entra
   por el ojo antes que por la lectura — y es una comparación que nos favorece,
   así que conviene que sea instantánea.
   El largo lo pone landing.js con --lp-barra, calculado sobre el precio real. */
/* Centradas: la cabecera de esta sección va centrada, y las barras alineadas a
   la izquierda dejaban el bloque descolgado del título. */
.lp-ancla { display: grid; gap: .9rem; max-width: 46rem; margin-inline: auto; }

.lp-ancla-item {
    padding: 1rem 1.2rem;
    border-radius: var(--radio);
    border: 1px solid var(--border);
    background: rgba(42, 25, 18, .45);
    /* La barra se dibuja como fondo del propio elemento: una capa menos que un
       pseudo-elemento y no hay nada que animar. */
    background-image: linear-gradient(90deg, rgba(185, 154, 134, .16) 0 var(--lp-barra, 30%), transparent var(--lp-barra, 30%));
    background-repeat: no-repeat;
}

.lp-ancla-item--nuestro {
    border-color: var(--accent);
    background-image: linear-gradient(90deg, rgba(242, 96, 12, .3) 0 var(--lp-barra, 30%), transparent var(--lp-barra, 30%));
}

.lp-ancla-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.lp-ancla-que { color: var(--muted); font-size: .92rem; font-weight: 600; }
.lp-ancla-item--nuestro .lp-ancla-que { color: var(--text); }

.lp-ancla-cifra {
    font-family: 'Blinker', sans-serif;
    font-size: clamp(1.2rem, 3.2vw, 1.55rem);
    font-weight: 800;
    white-space: nowrap;
}
.lp-ancla-item--nuestro .lp-ancla-cifra { color: var(--accent-2); }

.lp-ancla-nota { margin-top: .3rem; color: var(--muted); font-size: .84rem; }

/* --- Planes --------------------------------------------------------------- */

/* El orden del DOM pone Flama primero: en celular —de donde viene la mayoría
   del tráfico— una rejilla de 3 columnas colapsa al orden del DOM, y la
   primera tarjeta que se ve fija el precio de referencia. Con Chispa primero,
   esa referencia era $0 y contra $0 cualquier precio parece caro.
   En escritorio, `order` los devuelve al orden clásico. */
.lp-planes { display: grid; gap: 1.4rem; align-items: start; }

@media (min-width: 900px) {
    .lp-planes { grid-template-columns: repeat(3, 1fr); }
    .lp-plan--chispa { order: 1; }
    .lp-plan--flama  { order: 2; }
    .lp-plan--astro  { order: 3; }
}

.lp-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.9rem 1.6rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radio-lg);
}

.lp-plan--flama {
    border-color: var(--accent);
    background: linear-gradient(180deg, rgba(242, 96, 12, .11), rgba(42, 25, 18, .8));
    box-shadow: 0 24px 60px -30px rgba(242, 96, 12, .8);
}

@media (min-width: 900px) {
    .lp-plan--flama { transform: translateY(-10px); }
}

.lp-plan-cinta {
    position: absolute;
    top: -.8rem; left: 50%;
    transform: translateX(-50%);
    padding: .25rem .9rem;
    border-radius: 999px;
    background: var(--accent-gradient);
    color: var(--accent-ink);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lp-plan-tipo {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.lp-plan--flama .lp-plan-tipo { color: var(--accent-2); }

.lp-plan h3 { margin-top: .35rem; font-size: 1.5rem; font-weight: 600; }
.lp-plan-desc { margin-top: .5rem; color: var(--muted); font-size: .9rem; min-height: 2.7em; }

.lp-precio { margin-block: 1.4rem 1.2rem; }

.lp-precio-cifra {
    font-size: clamp(1.9rem, 5vw, 2.4rem);
    font-weight: 800;
}

.lp-precio-unidad { color: var(--muted); font-size: .92rem; font-weight: 400; }
.lp-precio-linea { margin-top: .35rem; color: var(--accent-2); font-size: .96rem; font-weight: 600; }
.lp-precio-total { margin-top: .6rem; color: var(--muted); font-size: .86rem; }

/* Lo que trae el pago de implementación.
   Va pegado al precio, dentro de la tarjeta del plan, y con fondo propio para
   que se lea como una nota del precio y no como una función más del software:
   son piezas de diseño que hace una persona, no pantallas del panel. */
.lp-incluye {
    margin-bottom: 1.4rem;
    padding: .85rem 1rem;
    background: rgba(255, 189, 18, .08);
    border: 1px solid rgba(255, 189, 18, .25);
    border-radius: 12px;
}

.lp-incluye-titulo {
    display: block;
    margin-bottom: .5rem;
    color: var(--accent-2);
    font-size: .82rem;
    font-weight: 700;
}

.lp-incluye ul {
    list-style: none;
    margin: 0;
    padding: 0;
    /* En fila y no en columna: son cinco cosas cortas, y apiladas hacían que la
       tarjeta del plan que queremos vender fuera la más larga de las tres. */
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .45rem;
}

.lp-incluye li {
    padding: .18rem .55rem;
    border-radius: 6px;
    background: rgba(27, 16, 12, .5);
    color: #e7d5c8;
    font-size: .8rem;
}

.lp-lista { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .65rem; flex: 1; }

.lp-lista li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .93rem;
}

.lp-lista svg { flex: 0 0 auto; margin-top: .18rem; color: var(--accent); }
.lp-lista li[data-pronto] { color: var(--muted); }
.lp-lista li[data-pronto] svg { color: var(--muted); }

/* Los módulos que todavía no existen se marcan. Venderlos como incluidos es la
   forma más rápida de convertir una venta en un reembolso. */
.lp-pronto {
    margin-left: .35rem;
    padding: .1rem .45rem;
    border-radius: 5px;
    background: rgba(185, 154, 134, .16);
    border: 1px solid rgba(185, 154, 134, .3);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lp-pagos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: 2rem;
    color: var(--muted);
    font-size: .85rem;
}

.lp-pago-chip {
    padding: .3rem .7rem;
    border-radius: 7px;
    background: var(--panel);
    border: 1px solid var(--border);
    font-size: .8rem;
    font-weight: 600;
    color: #e7d5c8;
}

/* --- FAQ ------------------------------------------------------------------ */

.lp-faq { max-width: 46rem; margin-inline: auto; display: grid; gap: .7rem; }

.lp-faq details {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radio);
    overflow: hidden;
}

.lp-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    font-size: .99rem;
    list-style: none;
}

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

.lp-faq summary::after {
    content: '';
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.lp-faq details[open] summary::after { transform: rotate(-135deg); }

.lp-faq-cuerpo {
    padding: 0 1.25rem 1.15rem;
    color: var(--muted);
    font-size: .94rem;
}

/* --- Cierre y pie --------------------------------------------------------- */

.lp-cierre {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding-block: var(--seccion-y);
    background: linear-gradient(160deg, var(--bg-2), var(--bg));
}

.lp-cierre > .lp-envoltura { position: relative; z-index: 3; }
.lp-cierre h2 { font-size: clamp(1.75rem, 5vw, 2.7rem); font-weight: 800; }
.lp-cierre p { margin-top: .9rem; color: var(--muted); }
.lp-cierre .lp-btn { margin-top: 1.9rem; }

/* ---------------------------------------------------------------------------
   Pie
   ---------------------------------------------------------------------------
   Continúa el fondo con el que termina el cierre (--bg), sin filete y sin
   cambio de color: antes había un corte duro que partía la página en dos justo
   debajo del último botón.

   Era una sola fila plana. Ahora tiene cuatro bloques, y el de soporte pesa más
   que los otros tres a propósito: quien baja hasta acá sin haber comprado casi
   siempre es porque le quedó una duda, y la salida tiene que estar a la vista,
   no escondida entre una fila de enlaces grises.
   --------------------------------------------------------------------------- */

.lp-pie {
    position: relative;
    padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
    background: var(--bg);
    color: var(--muted);
    font-size: .88rem;
}

/* Un rescoldo tenue arriba, que es lo que impide que el pie se lea como un
   bloque negro pegado al final. Estático: no cuesta un solo cuadro. */
.lp-pie::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 220px;
    pointer-events: none;
    background: radial-gradient(70% 100% at 50% 0%, rgba(242, 96, 12, .1), transparent 70%);
}

.lp-pie > .lp-envoltura { position: relative; z-index: 1; }

.lp-pie-grid {
    display: grid;
    gap: clamp(2rem, 5vw, 3rem);
}

@media (min-width: 700px) {
    .lp-pie-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
    /* La marca ocupa más y el soporte va al final, que es donde el ojo termina
       de recorrer la fila. */
    .lp-pie-grid { grid-template-columns: 1.4fr .8fr .8fr 1.2fr; }
}

.lp-pie-marca .lp-logo img { height: 34px; }

.lp-pie-frase {
    margin-top: .9rem;
    max-width: 24rem;
    line-height: 1.6;
}

/* --- Columnas de enlaces --- */

.lp-pie-col { display: flex; flex-direction: column; gap: .55rem; }

.lp-pie-col h3,
.lp-soporte h3 {
    margin-bottom: .35rem;
    color: var(--text);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lp-pie-col a {
    color: var(--muted);
    text-decoration: none;
    width: fit-content;
    transition: color .18s ease;
}

/* --- Soporte --- */

.lp-soporte {
    padding: 1.25rem 1.3rem 1.4rem;
    border-radius: var(--radio-lg);
    border: 1px solid rgba(74, 47, 34, .9);
    background:
        radial-gradient(90% 80% at 50% 0%, rgba(242, 96, 12, .1), transparent 70%),
        rgba(42, 25, 18, .5);
}

.lp-soporte h3 { color: var(--accent-2); }
.lp-soporte > p { margin-bottom: 1.1rem; line-height: 1.55; }

/* El botón del pie no lleva el margen de los del cuerpo. Y el texto no se parte:
   en la columna del pie "Escríbenos por WhatsApp" caía en dos renglones y el
   botón quedaba con el doble de alto y el ícono descolgado. */
.lp-soporte .lp-btn {
    margin-top: 0;
    white-space: nowrap;
    font-size: .93rem;
    padding-inline: 1rem;
}

.lp-soporte .lp-btn svg { flex: 0 0 auto; }

.lp-soporte-correo {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .9rem;
    color: var(--muted);
    text-decoration: none;
    font-size: .86rem;
    transition: color .18s ease;
}

.lp-soporte-nota {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(74, 47, 34, .8);
    font-size: .82rem;
}
.lp-soporte-nota a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }

/* --- Base --- */

.lp-pie-base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-top: clamp(2rem, 5vw, 3rem);
    padding-top: 1.4rem;
    border-top: 1px solid rgba(74, 47, 34, .6);
    font-size: .82rem;
}

.lp-pie-pago strong { color: #e7d5c8; font-weight: 600; }

/* ---------------------------------------------------------------------------
   Barra fija en móvil
   ---------------------------------------------------------------------------
   Más del 80% del tráfico entra por celular, y sin esto quien va leyendo tiene
   que volver arriba para actuar. Aparece pasado el hero: mostrarla desde el
   primer momento tapa parte de la pantalla justo cuando el hero ya trae su
   propio botón. La clase la pone landing.js.
   --------------------------------------------------------------------------- */

.lp-barra {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(21, 12, 9, .97);
    border-top: 1px solid var(--border);
    transform: translateY(110%);
    transition: transform .28s ease;
}

.lp-barra[data-visible="1"] { transform: translateY(0); }

@media (min-width: 900px) { .lp-barra { display: none; } }

/* Espacio para que la barra no tape los enlaces del pie. Va con la misma
   condición que la barra: en escritorio no existe, así que no sobra hueco. */


/* ---------------------------------------------------------------------------
   Entradas al hacer scroll
   ---------------------------------------------------------------------------
   Escrito al revés de lo habitual, y a propósito: el estado FINAL (visible) es
   el valor por defecto en CSS, y el desplazamiento inicial vive dentro del
   @supports. Así, en un navegador sin scroll-driven animations —o con el
   movimiento reducido— el contenido simplemente está ahí. La versión ingenua
   (opacity: 0 por defecto, animación que lo sube a 1) deja la página en blanco
   si la animación no corre, que es el peor fallo posible.

   Cero JavaScript: sin IntersectionObserver ni librerías de scroll-reveal.
   --------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .lp-entra {
            animation: lp-entrada linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 32%;
        }

        @keyframes lp-entrada {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: none; }
        }

        /* El escalonado sale gratis de la geometría: view() es por elemento, así
           que cada tarjeta cruza el viewport en un momento distinto y entran una
           tras otra sin calcular un solo delay. Antes la clase estaba en la
           rejilla y las diez entraban como un bloque — se veía como una
           diapositiva, no como contenido apareciendo.
           El rango es más corto porque estas piezas son pequeñas: con el rango
           de los bloques grandes, terminan de entrar demasiado tarde. */
        .lp-parada.lp-entra,
        .lp-ancla-item.lp-entra,
        .lp-pieza.lp-entra,
        .lp-tres-item.lp-entra {
            animation-range: entry 15% entry 85%;
        }
    }
}

/* ---------------------------------------------------------------------------
   Pausa de lo que se mueve solo
   ---------------------------------------------------------------------------
   Regla de la página: el movimiento continuo vive SOLO en las dos zonas vacías
   —hero y pie— y nunca coincide en pantalla. Las secciones de contenido llevan
   únicamente movimiento provocado por el usuario (scroll o toque).

   Y lo que no se ve, no corre: sin esto, las chispas y la aurora seguían
   animándose mientras el visitante lee los planes tres pantallas más abajo.
   La clase la pone landing.js con IntersectionObserver.
   --------------------------------------------------------------------------- */

.lp-quieto .dk-particulas span,
.lp-quieto .lp-aurora { animation-play-state: paused; }

/* ---------------------------------------------------------------------------
   Puntero: hover para el ratón, :active para el dedo
   ---------------------------------------------------------------------------
   TODOS los :hover viven acá dentro, y es un arreglo, no una preferencia. En una
   pantalla táctil no existe el hover: el navegador lo SIMULA tras el toque y lo
   deja pegado hasta que se toca otra cosa. El resultado era una tarjeta que se
   quedaba encendida y que el usuario no podía apagar — que se lee como que la
   página se trabó, justo sobre los ejemplos que queremos que abra.

   Y al revés: lo que no es botón no daba ninguna señal al tocarlo. Un elemento
   que no responde al dedo se percibe como muerto, así que se toca dos veces.
   --------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .lp-nav a:hover { color: var(--text); }
    .lp-entrar:hover { color: var(--text); }
    .lp-btn--primario:hover { box-shadow: 0 12px 30px -8px rgba(242, 96, 12, .85); }
    .lp-btn--fantasma:hover { background: var(--panel-2); }
    .lp-pie a:hover { color: var(--text); }
    .lp-pie-col a:hover { color: var(--accent-2); }
    .lp-soporte-correo:hover { color: var(--accent-2); }
    .lp-logo:hover .lp-insignia-marca { border-color: var(--accent); }

    .lp-vitrina-item:hover {
        border-color: var(--accent);
        transform: translateY(-2px);
    }
}

/* Respuesta al dedo. 120ms: por debajo de 100 no se percibe, por encima de 300
   se siente lento. */
.lp-vitrina-item,
.lp-faq summary {
    -webkit-tap-highlight-color: transparent;
    /* Quita la espera de doble toque que algunos WebView todavía aplican. */
    touch-action: manipulation;
    transition: transform .12s ease, border-color .16s ease;
}

.lp-vitrina-item:active,
.lp-faq summary:active {
    transform: scale(.985);
    border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .lp-vitrina-item, .lp-faq summary { transition: none; }
    .lp-vitrina-item:active, .lp-faq summary:active { transform: none; }
}

/* Los precios en pesos no se parten a mitad de cifra. */
.lp-nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Aviso de referido: la barra fija y el modal de bienvenida
   ---------------------------------------------------------------------------
   Solo aparecen cuando el servidor confirma que el ?ref= es de un cliente que
   recomienda (ver montarAvisoReferido en landing.js). La barra empuja el
   contenido con un padding en body para no tapar el hero. */
.lp-ref-barra {
    position: fixed;
    top: 0; left: 0; right: 0;
    /* Por encima del menu (60): son los dos elementos que viven pegados
       arriba y tienen que apilarse en un orden previsible. */
    z-index: 61;
    padding: .55rem 1rem;
    text-align: center;
    font-size: .85rem;
    line-height: 1.35;
    background: linear-gradient(90deg, #f2600c, #ff9d2e);
    color: #1c1008;
}
.lp-ref-barra strong { font-weight: 800; }

/* El menu se corre hacia abajo lo que mida la barra.
   ---------------------------------------------------------------------------
   Solo con el `padding-top` del body no alcanzaba: el menu es `sticky`, y en
   cuanto la pagina baja un poco se pega al borde de la ventana —debajo de la
   barra, que es `fixed` y no se mueve— y quedaba tapado. Corriendole el `top`
   se pega justo por debajo.

   El alto lo publica landing.js midiendo la barra de verdad, porque el texto
   lleva el nombre de quien recomienda y uno largo la parte en dos renglones.
   El 2.4rem es solo el valor de emergencia por si el JS no llego a medir. */
body.lp-con-ref { padding-top: var(--lp-ref-alto, 2.4rem); }
body.lp-con-ref .lp-header { top: var(--lp-ref-alto, 2.4rem); }

.lp-ref-modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(12, 6, 2, .72);
    backdrop-filter: blur(4px);
}
.lp-ref-caja {
    max-width: 400px;
    padding: 1.8rem 1.6rem;
    border-radius: 16px;
    background: var(--panel, #221207);
    border: 1px solid rgba(242, 96, 12, .45);
    text-align: center;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
}
.lp-ref-emoji { font-size: 2.4rem; margin-bottom: .4rem; }
.lp-ref-caja h3 { margin: 0 0 .6rem; font-size: 1.2rem; }
.lp-ref-caja p { margin: 0 0 1.1rem; font-size: .9rem; line-height: 1.5; color: var(--muted, #cfae94); }
.lp-ref-caja strong { color: var(--accent, #f2600c); }
.lp-ref-cerrar {
    padding: .65rem 1.6rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #f2600c, #ff9d2e);
    color: #1c1008;
    font-weight: 700;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   El hilo de "Te suena", escribiéndose solo
   ---------------------------------------------------------------------------
   Estas reglas SOLO aplican cuando landing.js pone .lp-chat. Sin JavaScript, o
   con el movimiento reducido, la clase no llega y las burbujas se quedan como
   están en el HTML: visibles. Misma regla que las entradas al hacer scroll —el
   estado final es el valor por defecto, nunca opacity: 0 esperando un guion.
   --------------------------------------------------------------------------- */

.lp-chat .lp-burbuja,
.lp-chat .lp-hilo-remate {
    opacity: 0;
    transform: translateY(6px) scale(.98);
}

.lp-chat .lp-burbuja--dicha {
    opacity: 1;
    transform: none;
    /* Un pelín de rebote al final: es lo que hace que la burbuja se sienta
       "puesta" y no fundida. */
    animation: lp-burbuja-entra .26s cubic-bezier(.2, .9, .3, 1.25) both;
}

@keyframes lp-burbuja-entra {
    from { opacity: 0; transform: translateY(6px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* El "escribiendo…": tres puntos que respiran, del lado de quien escribe. */
.lp-chat-puntos {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    width: fit-content;
    padding: .62rem .8rem;
    border-radius: 15px;
    border-bottom-left-radius: 5px;
    background: var(--bg-3);
}
.lp-chat-puntos--tu {
    justify-self: end;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 5px;
    background: rgba(242, 96, 12, .17);
    border: 1px solid rgba(242, 96, 12, .28);
}
.lp-chat-puntos i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--muted);
    animation: lp-punto 1.05s ease-in-out infinite;
}
.lp-chat-puntos i:nth-child(2) { animation-delay: .16s; }
.lp-chat-puntos i:nth-child(3) { animation-delay: .32s; }
.lp-chat-puntos--tu i { background: var(--accent-2); }

@keyframes lp-punto {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ---------------------------------------------------------------------------
   WhatsApp flotante
   ---------------------------------------------------------------------------
   Aparece pasado el hero (data-visible lo pone landing.js, con el mismo
   centinela que la barra de móvil) y se apaga sobre el bloque de soporte del
   pie, que ya trae su propio botón a lo ancho.
   --------------------------------------------------------------------------- */

.lp-wa-flota {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    /* En móvil, por encima de la barra fija de "Crear mi Dkard": son dos
       acciones distintas y una encima de la otra se toca la equivocada. */
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 45;

    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem;
    border-radius: 999px;
    background: #25D366;
    color: #08300f;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);

    opacity: 0;
    transform: translateY(14px) scale(.9);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}
.lp-wa-flota[data-visible="1"] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
/* Tapado por el cierre: se va aunque el centinela diga que toca mostrarlo. */
.lp-wa-flota--tapado[data-visible="1"] {
    opacity: 0;
    transform: translateY(14px) scale(.9);
    pointer-events: none;
}
.lp-wa-flota:hover { filter: brightness(1.06); }
.lp-wa-flota:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }

/* El rótulo solo existe cuando hay un asesor detrás: ver anunciarAlAsesor(). */
.lp-wa-flota-texto {
    padding-right: .35rem;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
}
.lp-wa-flota--con-texto { padding-left: 1rem; }



@media (prefers-reduced-motion: reduce) {
    .lp-wa-flota { transition: none; }
    .lp-chat-puntos i { animation: none; opacity: .6; }
}


/* ===========================================================================
   El visor de la vitrina

   Los ejemplos abrían en una pestaña nueva y ahí se acababa la visita. Acá se
   abren dentro, y lo importante del diseño es UNA cosa: que la salida se vea
   sin buscarla. Por eso la barra es sólida y opaca —no flota sobre el dkard—
   y lleva la palabra «Volver» además de la ✕.
   =========================================================================== */

.lp-visor {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.lp-visor[hidden] { display: none; }

/* Detrás del visor la página seguía moviéndose con la rueda. */
body.lp-sin-scroll { overflow: hidden; }

.lp-visor-barra {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0.9rem;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}

.lp-visor-volver {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--panel-2);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.lp-visor-volver:hover { border-color: var(--accent); color: var(--accent); }

/* Quién se está mirando: el nombre y la dirección de verdad. La dirección es
   media venta — «esto es dkard.co/algo, y el tuyo puede ser igual». */
.lp-visor-quien {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
    flex: 1;
    text-align: center;
}

.lp-visor-quien b { font-size: 0.95rem; }

.lp-visor-quien span {
    font-size: 0.78rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-visor-derecha { display: flex; align-items: center; gap: 0.5rem; }

.lp-visor-nueva {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--muted);
    text-decoration: none;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
}

.lp-visor-nueva:hover { color: var(--text); background: var(--panel-2); }

.lp-visor-cerrar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    /* Sin el padding de fábrica y con line-height 1: con ellos, el grid
       centra la CAJA del carácter y la ✕ queda corrida. */
    padding: 0;
    line-height: 1;
    font-size: 1.05rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
}

.lp-visor-cerrar:hover { border-color: var(--danger); color: var(--danger); }

.lp-visor-lienzo {
    flex: 1;
    /* Un item de flex trae min-height auto: sin esto el iframe empuja el
       lienzo y la barra se va fuera de la pantalla. */
    min-height: 0;
    position: relative;
}

.lp-visor-marco {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--bg-2);
}

.lp-visor-cargando {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    color: var(--muted);
    background: var(--bg-2);
}

.lp-visor-cargando[hidden] { display: none; }

/* =======================================================================
   LOS @media, DE MAYOR A MENOR
   =======================================================================
   Estaban repartidos por todo el archivo y en cualquier orden, y eso
   en CSS no es un detalle de estilo: con `max-width`, dos reglas de la
   misma especificidad las decide el ORDEN DE APARICION. Un bloque de
   550px escrito despues de uno de 350px gana tambien por debajo de
   350 — o sea que el ajuste para pantallas chicas no se aplicaba
   nunca. Pasaba en 27 de los 35 bloques.

   Ordenados de mayor a menor, el mas chico siempre queda de ultimo y
   por lo tanto gana, que es justo lo que uno espera al escribirlo.
   AL AGREGAR UNO NUEVO: va aqui, en su sitio por tamaño. Uno suelto
   mas arriba en el archivo vuelve a romper esto en silencio.
   ======================================================================= */

@media (max-width: 899px) { body { padding-bottom: 5.5rem; } }

@media (max-width: 899px) {
    /* La barra fija de móvil vive abajo del todo: el flotante se sube por
       encima de ella para no pelear el mismo pulgar. */
    .lp-wa-flota { bottom: calc(5.2rem + env(safe-area-inset-bottom)); }
    /* Y sin el nombre: en 375px, el botón con texto se come media pantalla. */
    .lp-wa-flota-texto { display: none; }
    .lp-wa-flota--con-texto { padding-left: .85rem; }

    /* El visor: en el celular el nombre se lleva el sitio de los
       botones, así que el enlace a pestaña nueva se va —quien esté en
       el móvil no está abriendo pestañas de escritorio— y la salida
       se queda entera. */
    .lp-visor-barra { gap: 0.5rem; padding: 0.5rem 0.6rem; }
    .lp-visor-quien { text-align: left; }
    .lp-visor-nueva { display: none; }
}

@media (max-width: 419px) {
    .lp-logo-texto-img { display: none; }

    .lp-visor-volver,
    .lp-visor-quien b { font-size: 0.85rem; }
}

/* El marco cuando ya tiene el video dentro. Mismo tamaño y mismo acabado; lo
   único que cambia es que el degradado ya no se ve porque encima va el iframe.
   Se le quita el `place-items: center` para que el iframe llene el marco en vez
   de quedar centrado con bandas a los lados. */
.lp-video-marco--cargado {
    display: block;
    padding: 0;
}

.lp-video-marco--cargado iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* El marco es un <button> desde que el video existe: hay que quitarle lo que
   los navegadores le ponen por su cuenta, o aparece un borde gris y un fondo
   que se comen el degradado. */
button.lp-video-marco {
    width: 100%;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    /* El borde y el fondo NO se resetean: los pone .lp-video-marco y son los
       que le dan el acabado. */
}

button.lp-video-marco:hover .lp-video-play {
    transform: scale(1.06);
}

.lp-video-play { transition: transform .18s ease; }

@media (prefers-reduced-motion: reduce) {
    .lp-video-play { transition: none; }
    button.lp-video-marco:hover .lp-video-play { transform: none; }
}