/**
 * Portada publica.
 *
 * Todo el color, el espaciado y los radios salen de los tokens: la portada se
 * ve en los tres temas (light, dark y cyber) y no puede tener nada en duro o
 * uno de los tres se rompe. El unico valor propio es el ancho de la columna
 * de lectura, que no es un token del core a proposito: `--container-max` son
 * 1600px, pensados para paneles con tablas, y un texto de portada a ese ancho
 * no se lee.
 *
 * Las clases van prefijadas con `lnd-` para no redefinir componentes del core.
 *
 * SOBRE EL MOVIMIENTO
 *
 * Hay dos mecanismos y no se mezclan:
 *
 *   - La ENTRADA del hero (`.lnd-in`) es una animacion CSS que corre sola al
 *     cargar. No depende de JavaScript, porque es lo primero que se ve y no
 *     puede quedar a merced de que un fichero llegue.
 *   - La APARICION AL DESPLAZAR (`[data-reveal]`) si necesita JavaScript, y
 *     por eso solo se esconde algo cuando `landing.js` ha puesto la clase
 *     `lnd-js`. Si el fichero no carga, no hay nada escondido que revelar.
 *
 * Las dos se apagan enteras con `prefers-reduced-motion` al final del fichero.
 *
 * Sobre la altura de <main>: el layout le pone `height: 100vh` en linea cuando
 * el modulo pide `hideHeader` (app/views/layout.ejs), asi que el contenido de
 * una portada —larga por definicion— se desborda de esa caja. Se comprobo el
 * 2026-09-10 que no rompe nada: la pagina scrollea bien y la geometria es
 * correcta.
 */

html {
    scroll-behavior: smooth;
}

.lnd {
    --lnd-wrap: 1120px;
    --lnd-wrap-narrow: 720px;
    --lnd-code-max: 820px;
    --in-i: 0;
    --reveal-i: 0;

    /* Sobre las dos de arriba: son los indices de escalonado, y se declaran
       con su valor por defecto para que existan aunque nadie los fije.
       `--in-i` lo pone la plantilla en el hero; `--reveal-i` lo pone
       landing.js en cada grupo. Un var() de algo que no declara nadie
       funciona solo por el fallback, y eso es una bomba de relojeria.

       El comentario va DEBAJO y no encima a proposito: `varsPorModulo()` en
       scripts/design/lint-css.js busca las variables locales con la regex
       /[{;]\s*(--[\w-]+)\s*:/ sobre el fichero en crudo, sin quitar
       comentarios. Un comentario entre el `;` anterior y la declaracion la
       vuelve invisible para el linter, que entonces la reporta como token
       inexistente. Es un fallo del linter, no de este fichero; queda anotado
       en su tarjeta. */

    background: var(--color-bg);
    color: var(--color-text);
}

.lnd-wrap {
    width: 100%;
    max-width: var(--lnd-wrap);
    margin: 0 auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

/* =========================================================
   LA CALAVERA

   Es la marca de App Skeleton y vive en `public/images/logo.png`: una
   calavera rellena en blanco, con contorno negro y los ojos y la nariz
   recortados en transparente.

   No se usa como <img> sino como MASCARAS, y el color lo pone el fondo de
   cada capa. `.lnd-skull` es solo la caja (cuadrada: ancho = alto en las
   tres variantes, y eso importa abajo); lo que se ve son dos
   pseudo-elementos:

     - `::after`  el RELLENO: `calavera-mascara.png`, la silueta, pintada
                  con `--color-sheen`. Blanco puro en los TRES temas, y no
                  `--color-text`: la calavera de la marca es blanca (asi esta
                  en el icono de la aplicacion) y tiene que verse igual en
                  light, dark y cyber. Con `--color-text` en light salia
                  casi negra, un bloque macizo que no era la marca (#480).
     - `::before` el CONTORNO, solo en light: `calavera-contorno.png`, un
                  anillo oscuro por FUERA de la silueta, con `--color-text`.
                  Es lo que hace que una calavera blanca se vea sobre un
                  fondo claro, igual que el logo de la cabecera de la app
                  (blanco con trazo negro). En dark y cyber no se pinta y
                  el relleno queda exactamente como estaba.

   Las dos capas van en pseudo-elementos y no la mascara en el elemento
   porque una `mask` recorta tambien a los hijos: el anillo, que sobresale
   de la silueta, desapareceria.

   El anillo se genera dilatando la silueta (radio 12px sobre 338px de alto,
   el trazo del logo de la cabecera es de esa proporcion) y restandole la
   silueta. Como sobresale, su lienzo lleva 14px de margen por lado
   (291x338 -> 319x366) y por eso el `::before` se sale de la caja un
   4.142% (= 14/338) por cada lado: con `contain` y la caja cuadrada, eso
   deja las dos mascaras a la misma escala y centradas en el mismo punto.
   Si se regenera el anillo con otro margen, hay que cambiar ese inset.
   Script en la tarjeta #480.

   Se probo (y se descarto, #480) sustituir la silueta por el logo.png con
   su propio contorno: la forma es otra y se veia rara. La silueta es esta.
   ========================================================= */

.lnd-skull {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.lnd-skull::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-sheen);
    -webkit-mask: url('/module-assets/landing/img/calavera-mascara.png') center / contain no-repeat;
    mask: url('/module-assets/landing/img/calavera-mascara.png') center / contain no-repeat;
}

[data-theme="light"] .lnd-skull::before {
    content: '';
    position: absolute;
    inset: -4.142%;
    background: var(--color-text);
    -webkit-mask: url('/module-assets/landing/img/calavera-contorno.png') center / contain no-repeat;
    mask: url('/module-assets/landing/img/calavera-contorno.png') center / contain no-repeat;
}

.lnd-skull--mark {
    width: var(--space-8);
    height: var(--space-8);
}

.lnd-skull--cta {
    width: var(--space-12);
    height: var(--space-12);
    margin-bottom: var(--space-5);
}

/* =========================================================
   CABECERA
   ========================================================= */

.lnd-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: rgba(var(--color-bg-rgb), 0.72);
    backdrop-filter: blur(var(--blur-md));
    border-bottom: 1px solid transparent;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* En cuanto se baja del todo, la cabecera se solidifica y se despega del
   contenido. Arriba del todo va limpia, para que el hero respire. */
.lnd-header.is-scrolled {
    background: rgba(var(--color-bg-rgb), 0.92);
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.lnd-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    min-height: var(--header-height);
}

.lnd-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--color-text);
}

.lnd-brand .lnd-skull {
    transition: transform 0.3s ease;
}

.lnd-brand:hover .lnd-skull {
    transform: translateY(-2px) rotate(-6deg);
}

.lnd-brand-name {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.lnd-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.lnd-nav a {
    position: relative;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    padding: var(--space-2) 0;
    transition: color 0.15s ease;
}

/* El subrayado crece desde la izquierda en vez de aparecer de golpe. */
.lnd-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.lnd-nav a:hover {
    color: var(--color-text);
}

.lnd-nav a:hover::after {
    transform: scaleX(1);
}

.lnd-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* `styles.css` declara `a:hover { text-decoration: underline }`. Ese selector
   pesa 0,1,1 y le gana a `.lnd-btn`, que pesa 0,1,0: por eso los botones y la
   marca se subrayaban al pasar el raton como si fueran enlaces de texto. Lo
   vio el usuario en Chrome el 2026-09-10. Este selector pesa 0,2,1 y cubre de
   una vez todos los enlaces de la portada, que ninguno quiere subrayado. */
.lnd a:hover,
.lnd a:focus-visible {
    text-decoration: none;
}

/* =========================================================
   BOTONES

   Propios y no los del core: los `.btn` globales estan pensados para
   controles dentro de la aplicacion y el linter prohibe redefinirlos
   desde un modulo. Todos cumplen los 44px de area tactil.
   ========================================================= */

.lnd-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--target-min-touch);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease,
                border-color 0.18s ease, box-shadow 0.18s ease;
}

.lnd-btn:hover {
    transform: translateY(-1px);
}

.lnd-btn:active {
    transform: translateY(0);
}

/* El primario: degradado propio mas un halo de su mismo color.
   El degradado NO es `--gradient-primary`, que es el decorativo del tema.
   En light ese va de #667eea a #764ba2, y texto blanco encima da 3:1 de
   contraste: por debajo del 4.5:1 que pide AA para texto de 16px. Este otro
   va del primario a su tono de hover, que en cada tema se mueven juntos
   —los dos oscuros en light, los dos claros en dark y cyber—, asi que da
   profundidad sin tocar el contraste. */
.lnd-btn--primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: var(--color-surface);
    box-shadow: 0 var(--space-2) var(--space-5) rgba(var(--color-primary-rgb), 0.32);
}

.lnd-btn--primary:hover {
    box-shadow: 0 var(--space-3) var(--space-7) rgba(var(--color-primary-rgb), 0.44);
}

/* El secundario, de cristal: transparencia del color del texto en vez de un
   fondo solido. Asi no es una caja opaca pegada encima del fondo, y funciona
   igual sobre claro que sobre oscuro sin declarar dos colores. */
.lnd-btn--outline {
    border-color: rgba(var(--color-text-rgb), 0.16);
    background: rgba(var(--color-text-rgb), 0.05);
    backdrop-filter: blur(var(--blur-sm));
    color: var(--color-text);
}

.lnd-btn--outline:hover {
    border-color: rgba(var(--color-primary-rgb), 0.55);
    background: rgba(var(--color-primary-rgb), 0.1);
}

.lnd-btn--ghost {
    color: var(--color-text-secondary);
}

.lnd-btn--ghost:hover {
    color: var(--color-text);
}

/* El alto lo gobierna `--target-min-touch`, no el relleno: los 44px de area
   tactil son un minimo del sistema de diseno y no se tocan. Lo que baja aqui
   es el relleno vertical, que es lo que hacia que los botones se vieran
   hinchados. */
.lnd-btn--lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
}

/* =========================================================
   HERO
   ========================================================= */

/* El hero ocupa exactamente lo que queda de pantalla bajo la cabecera, y
   centra su contenido dentro. Es `min-height` y no `height`: si el contenido
   no cabe —traduccion mas larga, tipografia grande del sistema— la seccion
   crece en vez de recortar.

   Esto es lo que evita las dos versiones del mismo problema: contenido que
   se sale por abajo en pantallas cortas, y un oceano de vacio en las altas.
   Perseguir esos dos casos a base de paddings no converge nunca.

   `svh` es la altura de pantalla con la barra del navegador movil desplegada,
   que es la que no da saltos al hacer scroll; `vh` queda de repuesto para
   navegadores que no la traigan. */
.lnd-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
    padding-top: var(--space-12);
    padding-bottom: var(--space-16);
    overflow: hidden;
}

/* Trama de puntos que da profundidad sin robar atencion: se dibuja con el
   color del texto a muy baja opacidad, asi que existe en los tres temas, y
   se desvanece con una mascara para que no llegue nunca a los bordes ni
   compita con la calavera. */
.lnd-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(var(--color-text-rgb), 0.09) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 28%, var(--color-text), transparent 72%);
    mask-image: radial-gradient(ellipse 65% 55% at 50% 28%, var(--color-text), transparent 72%);
    pointer-events: none;
}

.lnd-hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* --- La calavera como protagonista --- */

.lnd-hero-mark {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
}

/* El halo que respira detras. Sale del primario del tema, asi que cambia
   de color con el, y va detras de la calavera sin taparla. */
.lnd-hero-mark::before {
    content: '';
    position: absolute;
    width: clamp(16rem, 34vw, 26rem);
    height: clamp(16rem, 34vw, 26rem);
    border-radius: var(--radius-full);
    background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.28), transparent 62%);
    animation: lnd-latido 5s ease-in-out infinite;
}

.lnd-skull--hero {
    position: relative;
    width: clamp(7rem, 16vw, 12rem);
    height: clamp(7rem, 16vw, 12rem);
    animation:
        lnd-materializa 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both,
        lnd-flota 6s ease-in-out 0.9s infinite;
}

@keyframes lnd-materializa {
    from {
        opacity: 0;
        transform: scale(0.86) translateY(var(--space-4));
        filter: blur(var(--blur-sm));
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

@keyframes lnd-flota {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(calc(var(--space-2) * -1)); }
}

@keyframes lnd-latido {
    0%, 100% { opacity: 0.55; transform: scale(0.94); }
    50%      { opacity: 1;    transform: scale(1.06); }
}

/* --- Entrada escalonada del texto del hero ---
   Corre sola al cargar; no depende de JavaScript. */

.lnd-in {
    animation: lnd-entra 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--in-i, 0) * 90ms);
}

@keyframes lnd-entra {
    from { opacity: 0; transform: translateY(var(--space-4)); }
    to   { opacity: 1; transform: translateY(0); }
}

.lnd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    letter-spacing: 0.02em;
}

.lnd-eyebrow-dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-primary);
    animation: lnd-parpadeo 2.4s ease-in-out infinite;
}

@keyframes lnd-parpadeo {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.55); }
    50%      { opacity: 0.7; box-shadow: 0 0 0 var(--space-2) rgba(var(--color-primary-rgb), 0); }
}

.lnd-h1 {
    margin: 0 0 var(--space-5);
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    font-weight: 700;
}

.lnd-lead {
    margin: 0 auto var(--space-6);
    max-width: var(--lnd-wrap-narrow);
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    line-height: 1.65;
}

.lnd-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.lnd-hero-actions--center {
    justify-content: center;
}

.lnd-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
}

.lnd-chips li {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.lnd-chips li:hover {
    color: var(--color-primary);
    border-color: rgba(var(--color-primary-rgb), 0.5);
}

/* --- Aviso de que abajo sigue habiendo pagina ---

   El hueco va anclado al fondo del hero y ocupa todo el ancho, para centrar
   la flecha sin usar `transform`: esa propiedad ya la tienen pedida la
   entrada del contenedor y el rebote del enlace, y una tercera encima seria
   una pelea de tres por la misma declaracion. */

.lnd-cue-slot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-6);
    text-align: center;
}

.lnd-scroll-cue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--target-min-touch);
    height: var(--target-min-touch);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    animation: lnd-baja 2.2s ease-in-out infinite;
    transition: color 0.2s ease;
}

.lnd-scroll-cue:hover {
    color: var(--color-primary);
}

@keyframes lnd-baja {
    0%, 100% { transform: translateY(0); opacity: 0.45; }
    50%      { transform: translateY(var(--space-2)); opacity: 1; }
}

/* =========================================================
   PANEL DE CODIGO
   ========================================================= */

.lnd-code {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.lnd-code--wide {
    max-width: var(--lnd-code-max);
    margin: 0 auto var(--space-12);
}

.lnd-code-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}

.lnd-code-dot {
    width: var(--space-3);
    height: var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-border);
}

.lnd-code-file {
    margin-left: var(--space-2);
    color: var(--color-text-muted);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
}

.lnd-code-body {
    margin: 0;
    padding: var(--space-5);
    overflow-x: auto;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    line-height: 1.8;
    color: var(--color-text);
}

.lnd-c { color: var(--color-text-muted); }
.lnd-s { color: var(--color-success); }
.lnd-k { color: var(--color-primary); }
.lnd-f { color: var(--color-info); }
.lnd-p { color: var(--color-primary); }
.lnd-ok { color: var(--color-success); }

.lnd-code-out {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}

.lnd-code-out-title {
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lnd-code-out ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lnd-code-out li {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
}

/* Las herramientas que "encuentra el agente" van saliendo una detras de otra
   cuando el panel entra en pantalla: es lo que se esta contando. */
.lnd-js .lnd-code[data-reveal] .lnd-code-out li {
    opacity: 0;
    transform: translateY(var(--space-2));
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.lnd-js .lnd-code[data-reveal].is-visible .lnd-code-out li {
    opacity: 1;
    transform: translateY(0);
}

.lnd-js .lnd-code[data-reveal].is-visible .lnd-code-out li:nth-child(1) { transition-delay: 0.25s; }
.lnd-js .lnd-code[data-reveal].is-visible .lnd-code-out li:nth-child(2) { transition-delay: 0.4s; }
.lnd-js .lnd-code[data-reveal].is-visible .lnd-code-out li:nth-child(3) { transition-delay: 0.55s; }
.lnd-js .lnd-code[data-reveal].is-visible .lnd-code-out li:nth-child(4) { transition-delay: 0.7s; }

/* =========================================================
   LA ESCENA DEL AGENTE

   Un guion de dos actos que se pinta entero desde `data-paso` en el
   contenedor. Cada trozo declara en que pasos esta visible y el CSS no
   sabe nada de tiempos: los mueve landing.js.

   La razon de hacerlo asi y no animando cada elemento por separado es el
   estado de reposo. Con `data-paso="fin"` —que es lo que queda si no hay
   JavaScript o si el visitante pidio menos movimiento— se ve todo a la vez
   y la escena sigue contando la historia completa: las dos frases, las dos
   herramientas y la tarjeta creada. Una animacion montada pieza a pieza se
   habria quedado en blanco en ese caso.
   ========================================================= */

.lnd-demo {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
    max-width: var(--lnd-code-max);
    margin: 0 auto var(--space-8);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.lnd-demo-etiqueta {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
}

/* --- El hilo de la conversacion --- */

.lnd-demo-hilo {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.lnd-demo-msg,
.lnd-demo-tool {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.lnd-demo-msg {
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.lnd-demo-quien {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.lnd-demo-tool {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: var(--space-6);
    border: 1px solid rgba(var(--color-primary-rgb), 0.3);
    background: rgba(var(--color-primary-rgb), 0.1);
}

.lnd-demo-tool code {
    color: var(--color-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
}

.lnd-demo-orbe {
    width: var(--space-3);
    height: var(--space-3);
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-primary);
}

/* --- La ventana de la aplicacion --- */

.lnd-demo-app {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    overflow: hidden;
}

.lnd-demo-barra {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}

.lnd-demo-titulo {
    margin-left: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.lnd-demo-pantalla {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    min-height: var(--space-24);
}

.lnd-demo-nota {
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.lnd-demo-col {
    margin: 0 0 var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.lnd-demo-tarjeta {
    padding: var(--space-4);
    border: 1px solid rgba(var(--color-primary-rgb), 0.4);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    box-shadow: var(--shadow-sm);
}

.lnd-demo-estado {
    display: inline-block;
    margin-bottom: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    background: rgba(var(--color-primary-rgb), 0.14);
    color: var(--color-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
}

.lnd-demo-pie {
    max-width: var(--lnd-code-max);
    margin: 0 auto var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* =========================================================
   EL GUION

   Estas reglas solo entran cuando landing.js esta al mando (`.lnd-js`).
   En reposo, todo lo de arriba ya se ve: es el estado final.
   ========================================================= */

.lnd-js .lnd-demo .lnd-demo-msg,
.lnd-js .lnd-demo .lnd-demo-tool,
.lnd-js .lnd-demo .lnd-demo-nota,
.lnd-js .lnd-demo .lnd-demo-tarjeta,
.lnd-js .lnd-demo .lnd-demo-col {
    opacity: 0;
    transform: translateY(var(--space-3));
    transition: opacity 0.45s ease, transform 0.45s ease,
                border-color 0.3s ease, background-color 0.3s ease;
}

/* Las dos pantallas se apilan en la misma celda para que el cambio de una
   a otra no descoloque la ventana ni le cambie la altura. */
.lnd-js .lnd-demo .lnd-demo-app {
    display: grid;
    grid-template-rows: auto 1fr;
}

.lnd-js .lnd-demo .lnd-demo-pantalla {
    grid-column: 1;
    grid-row: 2;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.lnd-js .lnd-demo .lnd-demo-barra {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    align-items: center;
}

.lnd-js .lnd-demo .lnd-demo-titulo {
    grid-column: 4;
    grid-row: 1;
    justify-self: start;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* El orbe del agente late mientras esa herramienta es la que manda. */
.lnd-js .lnd-demo .lnd-demo-orbe {
    animation: lnd-latido 1.4s ease-in-out infinite;
}

/* --- Que se ve en cada paso --- */

.lnd-js .lnd-demo[data-paso="1"] [data-msg="1"],
.lnd-js .lnd-demo[data-paso="2"] [data-msg="1"],
.lnd-js .lnd-demo[data-paso="3"] [data-msg="1"],
.lnd-js .lnd-demo[data-paso="4"] [data-msg="1"],
.lnd-js .lnd-demo[data-paso="5"] [data-msg="1"],
.lnd-js .lnd-demo[data-paso="6"] [data-msg="1"],
.lnd-js .lnd-demo[data-paso="fin"] [data-msg="1"],
.lnd-js .lnd-demo[data-paso="2"] [data-tool="1"],
.lnd-js .lnd-demo[data-paso="3"] [data-tool="1"],
.lnd-js .lnd-demo[data-paso="4"] [data-tool="1"],
.lnd-js .lnd-demo[data-paso="5"] [data-tool="1"],
.lnd-js .lnd-demo[data-paso="6"] [data-tool="1"],
.lnd-js .lnd-demo[data-paso="fin"] [data-tool="1"],
.lnd-js .lnd-demo[data-paso="4"] [data-msg="2"],
.lnd-js .lnd-demo[data-paso="5"] [data-msg="2"],
.lnd-js .lnd-demo[data-paso="6"] [data-msg="2"],
.lnd-js .lnd-demo[data-paso="fin"] [data-msg="2"],
.lnd-js .lnd-demo[data-paso="5"] [data-tool="2"],
.lnd-js .lnd-demo[data-paso="6"] [data-tool="2"],
.lnd-js .lnd-demo[data-paso="fin"] [data-tool="2"] {
    opacity: 1;
    transform: translateY(0);
}

/* Pantalla de notas: pasos 3 a 5. Las filas entran escalonadas. */
.lnd-js .lnd-demo[data-paso="3"] [data-pantalla="notas"],
.lnd-js .lnd-demo[data-paso="4"] [data-pantalla="notas"],
.lnd-js .lnd-demo[data-paso="5"] [data-pantalla="notas"],
.lnd-js .lnd-demo[data-paso="3"] [data-titulo="notas"],
.lnd-js .lnd-demo[data-paso="4"] [data-titulo="notas"],
.lnd-js .lnd-demo[data-paso="5"] [data-titulo="notas"] {
    opacity: 1;
}

.lnd-js .lnd-demo[data-paso="3"] .lnd-demo-nota,
.lnd-js .lnd-demo[data-paso="4"] .lnd-demo-nota,
.lnd-js .lnd-demo[data-paso="5"] .lnd-demo-nota {
    opacity: 1;
    transform: translateY(0);
}

.lnd-js .lnd-demo .lnd-demo-nota:nth-child(1) { transition-delay: 0.1s; }
.lnd-js .lnd-demo .lnd-demo-nota:nth-child(2) { transition-delay: 0.22s; }
.lnd-js .lnd-demo .lnd-demo-nota:nth-child(3) { transition-delay: 0.34s; }

/* La nota que el visitante senala con "esa" se marca en el paso 4. */
.lnd-js .lnd-demo[data-paso="4"] .lnd-demo-nota:nth-child(1),
.lnd-js .lnd-demo[data-paso="5"] .lnd-demo-nota:nth-child(1) {
    border-color: rgba(var(--color-primary-rgb), 0.6);
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-text);
}

/* Pantalla del tablero: paso 6 y estado final. */
.lnd-js .lnd-demo[data-paso="6"] [data-pantalla="tablero"],
.lnd-js .lnd-demo[data-paso="fin"] [data-pantalla="tablero"],
.lnd-js .lnd-demo[data-paso="6"] [data-titulo="tablero"],
.lnd-js .lnd-demo[data-paso="fin"] [data-titulo="tablero"] {
    opacity: 1;
}

.lnd-js .lnd-demo[data-paso="6"] .lnd-demo-col,
.lnd-js .lnd-demo[data-paso="fin"] .lnd-demo-col,
.lnd-js .lnd-demo[data-paso="6"] .lnd-demo-tarjeta,
.lnd-js .lnd-demo[data-paso="fin"] .lnd-demo-tarjeta {
    opacity: 1;
    transform: translateY(0);
}

.lnd-js .lnd-demo[data-paso="6"] .lnd-demo-tarjeta,
.lnd-js .lnd-demo[data-paso="fin"] .lnd-demo-tarjeta {
    transition-delay: 0.25s;
}

@media (max-width: 768px) {
    .lnd-demo {
        grid-template-columns: 1fr;
        padding: var(--space-6);
        /* En una columna la etiqueta "Ejemplo" cae encima de la primera
           burbuja, que en ancho pega con el borde. Se le abre hueco arriba
           en vez de sacarla del flujo, que la dejaria descolgada. */
        padding-top: var(--space-10);
    }
}

/* =========================================================
   LA ESCENA DE LA INTERFAZ

   Misma maquinaria que la del agente —`data-paso` en el contenedor y el
   CSS decidiendo— pero contando otra cosa: el codigo que se escribe a la
   izquierda y la pieza que se dibuja a la derecha, en sincronia.

   El sentido de que vayan a la par es ese: no es un agente rellenando una
   plantilla, es maquetacion generada apareciendo a la vez que su resultado.
   ========================================================= */

.lnd-gen-guion {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.lnd-gen-codigo {
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    overflow-x: auto;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    line-height: 1.9;
    color: var(--color-text);
}

.lnd-gen-linea {
    display: block;
}

/* --- El lienzo y la pieza que se dibuja --- */

.lnd-gen-pieza {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    min-height: var(--space-24);
}

/* La tira de negativo: una banda oscura con tres fotogramas. No usa los
   tokens de superficie del tema a proposito —es una pieza de autor, con su
   propia estetica, y ese es justo el argumento de la seccion—, pero el
   negro y el ambar viven en `--color-hub-*`, que ya son del sistema. */
.lnd-gen-tira {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-hub-media-bg);
}

.lnd-gen-fotograma {
    width: var(--space-12);
    height: var(--space-10);
    border: 2px solid var(--color-warning);
    border-radius: var(--radius-sm);
    background: rgba(var(--color-warning-rgb), 0.12);
}

.lnd-gen-titular {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.lnd-gen-linea-fina {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lnd-gen-rsvp {
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-full);
    color: var(--color-warning);
    font-size: var(--font-size-xs);
}

/* --- El guion --- */

.lnd-js .lnd-gen .lnd-gen-linea,
.lnd-js .lnd-gen [data-pieza] {
    opacity: 0;
    transform: translateY(var(--space-2));
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.lnd-js .lnd-gen .lnd-demo-titulo {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lnd-js .lnd-gen[data-paso="1"] [data-msg="1"],
.lnd-js .lnd-gen[data-paso="2"] [data-msg="1"],
.lnd-js .lnd-gen[data-paso="3"] [data-msg="1"],
.lnd-js .lnd-gen[data-paso="4"] [data-msg="1"],
.lnd-js .lnd-gen[data-paso="5"] [data-msg="1"],
.lnd-js .lnd-gen[data-paso="fin"] [data-msg="1"],
.lnd-js .lnd-gen[data-paso="2"] [data-tool="1"],
.lnd-js .lnd-gen[data-paso="3"] [data-tool="1"],
.lnd-js .lnd-gen[data-paso="4"] [data-tool="1"],
.lnd-js .lnd-gen[data-paso="5"] [data-tool="1"],
.lnd-js .lnd-gen[data-paso="fin"] [data-tool="1"] {
    opacity: 1;
    transform: translateY(0);
}

.lnd-js .lnd-gen[data-paso="2"] .lnd-demo-titulo,
.lnd-js .lnd-gen[data-paso="3"] .lnd-demo-titulo,
.lnd-js .lnd-gen[data-paso="4"] .lnd-demo-titulo,
.lnd-js .lnd-gen[data-paso="5"] .lnd-demo-titulo,
.lnd-js .lnd-gen[data-paso="fin"] .lnd-demo-titulo {
    opacity: 1;
}

/* Cada tanda de codigo enciende su parte de la pieza. El paso 3 escribe el
   html_blueprint y aparece el contenedor; el 4 escribe el CSS y con el los
   fotogramas y el titular; el 5 cierra con el RSVP. */
.lnd-js .lnd-gen[data-paso="3"] [data-linea="1"],
.lnd-js .lnd-gen[data-paso="4"] [data-linea="1"],
.lnd-js .lnd-gen[data-paso="5"] [data-linea="1"],
.lnd-js .lnd-gen[data-paso="fin"] [data-linea="1"],
.lnd-js .lnd-gen[data-paso="4"] [data-linea="2"],
.lnd-js .lnd-gen[data-paso="5"] [data-linea="2"],
.lnd-js .lnd-gen[data-paso="fin"] [data-linea="2"],
.lnd-js .lnd-gen[data-paso="5"] [data-linea="3"],
.lnd-js .lnd-gen[data-paso="fin"] [data-linea="3"],
.lnd-js .lnd-gen[data-paso="3"] [data-pieza="1"],
.lnd-js .lnd-gen[data-paso="4"] [data-pieza="1"],
.lnd-js .lnd-gen[data-paso="5"] [data-pieza="1"],
.lnd-js .lnd-gen[data-paso="fin"] [data-pieza="1"],
.lnd-js .lnd-gen[data-paso="4"] [data-pieza="2"],
.lnd-js .lnd-gen[data-paso="5"] [data-pieza="2"],
.lnd-js .lnd-gen[data-paso="fin"] [data-pieza="2"],
.lnd-js .lnd-gen[data-paso="4"] [data-pieza="3"],
.lnd-js .lnd-gen[data-paso="5"] [data-pieza="3"],
.lnd-js .lnd-gen[data-paso="fin"] [data-pieza="3"],
.lnd-js .lnd-gen[data-paso="5"] [data-pieza="4"],
.lnd-js .lnd-gen[data-paso="fin"] [data-pieza="4"] {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   APARICION AL DESPLAZAR

   Solo se esconde bajo `.lnd-js`, que pone landing.js. Sin ese fichero
   no hay nada escondido: la portada se ve entera y quieta.
   ========================================================= */

.lnd-js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--space-8));
    transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(var(--reveal-i, 0) * 90ms);
}

.lnd-js [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   SECCIONES
   ========================================================= */

.lnd-section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
}

.lnd-section--alt {
    background: var(--color-surface-alt);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.lnd-kicker {
    margin: 0 0 var(--space-3);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.lnd-h2 {
    margin: 0 0 var(--space-4);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.lnd-section-lead {
    margin: 0 0 var(--space-12);
    max-width: var(--lnd-wrap-narrow);
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    line-height: 1.65;
}

.lnd-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

/* =========================================================
   TARJETAS
   ========================================================= */

.lnd-card,
.lnd-use {
    padding: var(--space-7);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.lnd-card:hover,
.lnd-use:hover {
    transform: translateY(calc(var(--space-1) * -1));
    border-color: rgba(var(--color-primary-rgb), 0.45);
    box-shadow: var(--shadow-md);
}

.lnd-card h3,
.lnd-use h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.lnd-card p,
.lnd-use p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.65;
}

.lnd-card-icon,
.lnd-use-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-12);
    height: var(--space-12);
    margin-bottom: var(--space-5);
    border-radius: var(--radius-lg);
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.lnd-card:hover .lnd-card-icon,
.lnd-use:hover .lnd-use-icon {
    transform: scale(1.08);
    background: rgba(var(--color-primary-rgb), 0.2);
}

.lnd-card--ia {
    border-color: rgba(var(--color-primary-rgb), 0.25);
}

.lnd-use-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.lnd-use-icon {
    margin-bottom: 0;
    flex-shrink: 0;
}

.lnd-use-sub {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.lnd-use-flag {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.lnd-tag {
    display: inline-block;
    margin-right: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

/* =========================================================
   SECCION IA Y BLOQUE PARTIDO
   ========================================================= */

.lnd-ia {
    position: relative;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(var(--color-primary-rgb), 0.1), transparent 60%),
        var(--color-bg);
}

.lnd-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

.lnd-split .lnd-section-lead {
    margin-bottom: var(--space-6);
}

.lnd-list {
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.lnd-list li {
    position: relative;
    padding: var(--space-3) 0 var(--space-3) var(--space-7);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.lnd-list li:last-child {
    border-bottom: none;
}

.lnd-list li::before {
    content: '';
    position: absolute;
    left: var(--space-2);
    top: var(--space-5);
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-primary);
}

/* =========================================================
   CIERRE Y PIE
   ========================================================= */

.lnd-cta {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
    background:
        radial-gradient(ellipse at 50% 100%, rgba(var(--color-primary-rgb), 0.14), transparent 65%),
        var(--color-bg);
    text-align: center;
}

.lnd-cta-inner .lnd-section-lead {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

.lnd-footer {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}

.lnd-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.lnd-nav--footer {
    gap: var(--space-5);
}

/* =========================================================
   ADAPTATIVO
   ========================================================= */

/* Pantallas bajas: portatiles de 1366x768, ventanas no maximizadas, o
   cualquiera con la barra de marcadores puesta. El hero tiene que caber
   entero —flecha incluida—, porque si la flecha que dice "sigue bajando"
   queda debajo del pliegue no sirve de nada. Se aprieta el aire y se
   encoge la calavera; lo que no se toca es el tamano del titular.

   Va por ALTURA y no por anchura a proposito: el problema es vertical, y
   una pantalla ancha puede ser igual de baja.

   El umbral son 940px y no menos porque una pantalla de 1080p deja un
   viewport de unos 900 una vez descontados la barra del navegador y la del
   sistema. Con 860 se quedaba fuera justo el caso mas comun. */
@media (max-height: 940px) {
    .lnd-hero {
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
    }

    .lnd-hero-mark {
        margin-bottom: var(--space-4);
    }

    .lnd-skull--hero {
        width: clamp(4.5rem, 11vw, 7rem);
        height: clamp(4.5rem, 11vw, 7rem);
    }

    .lnd-hero-mark::before {
        width: clamp(11rem, 24vw, 16rem);
        height: clamp(11rem, 24vw, 16rem);
    }

    /* El titular y la entradilla bajan un escalon. Es el ajuste que mas
       altura devuelve —el titular ocupa dos lineas— y en una pantalla baja
       un titular gigante tampoco ayuda: solo empuja fuera lo demas. */
    .lnd-h1 {
        font-size: clamp(1.9rem, 4.4vw, 2.75rem);
    }

    .lnd-lead {
        margin-bottom: var(--space-5);
        font-size: var(--font-size-base);
    }

    .lnd-chips {
        margin-top: var(--space-5);
    }

}

@media (max-width: 1024px) {
    .lnd-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .lnd-nav {
        display: none;
    }

    .lnd-nav--footer {
        display: flex;
    }
}

@media (max-width: 768px) {
    .lnd-split {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .lnd-grid-3 {
        grid-template-columns: 1fr;
    }

    .lnd-hero,
    .lnd-section,
    .lnd-cta {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }
}

@media (max-width: 640px) {
    .lnd-wrap {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .lnd-header-actions .lnd-btn--ghost {
        display: none;
    }

    .lnd-footer-inner {
        flex-direction: column;
        text-align: center;
    }
}

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

   Va al final y apaga las dos capas de animacion. Es importante que estas
   reglas devuelvan la opacidad y la posicion: las animaciones de entrada
   usan `both` como fill-mode, asi que limitarse a `animation: none` dejaria
   el hero congelado en su fotograma inicial, es decir invisible.
   ========================================================= */

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

    .lnd-in,
    .lnd-skull--hero,
    .lnd-hero-mark::before,
    .lnd-eyebrow-dot,
    .lnd-scroll-cue {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }

    .lnd-js [data-reveal],
    .lnd-js [data-reveal].is-visible,
    .lnd-js .lnd-code[data-reveal] .lnd-code-out li,
    .lnd-js .lnd-demo .lnd-demo-msg,
    .lnd-js .lnd-demo .lnd-demo-tool,
    .lnd-js .lnd-demo .lnd-demo-nota,
    .lnd-js .lnd-demo .lnd-demo-tarjeta,
    .lnd-js .lnd-demo .lnd-demo-col,
    .lnd-js .lnd-demo .lnd-demo-pantalla,
    .lnd-js .lnd-demo .lnd-demo-titulo,
    .lnd-js .lnd-gen .lnd-gen-linea,
    .lnd-js .lnd-gen [data-pieza] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .lnd-demo-orbe {
        animation: none;
    }

    .lnd-btn,
    .lnd-card,
    .lnd-use,
    .lnd-card-icon,
    .lnd-use-icon,
    .lnd-brand .lnd-skull,
    .lnd-nav a::after {
        transition: none;
    }

    .lnd-btn:hover,
    .lnd-card:hover,
    .lnd-use:hover {
        transform: none;
    }
}