/* ════════════════════════════════════════════════════════════════════════
 * Colegio Digital Crypto — Landing v2 (estilo "Column" sobre paleta brand)
 *
 * Filosofía visual:
 *  · Mármol blanco arquitectónico — fondos limpísimos, mucha respiración
 *  · Blueprint sutil con dotted patterns (no grids genéricos)
 *  · Tipografía Inter ajustada a -0.02em a -0.03em en displays
 *  · Azules premium como brand y CTA · dorado SOLO como detalle puntual
 *  · Bordes finos en steel-gray, sombras sutiles en capas
 *  · Datos y labels técnicos en monoespaciada (JetBrains Mono)
 *  · Cero gradientes mezcla azul+dorado · cero AI vibes
 *
 * Este archivo es 100 % independiente: ningún selector toca al resto del
 * sitio (admin, backoffice, auth) porque va con namespace `body.landing-v2`.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
body.landing-v2 {
    /* Paleta — 100 % brand (azules + dorado de acento) */
    --c-ink:        #061030;   /* texto principal — azul casi negro */
    --c-ink-2:      #1A2447;   /* texto fuerte secundario */
    --c-ink-3:      #4A5577;   /* cuerpo */
    --c-slate:      #6B7693;   /* texto contextual */
    --c-mute:       #8E97AE;   /* labels muy suaves */
    --c-line:       #E5E8F0;   /* borders neutros */
    --c-line-2:     #EFF1F7;   /* borders muy suaves */
    --c-fog:        #F6F7FB;   /* fondo de sección alterna */
    --c-fog-2:      #FAFBFD;   /* fondo aún más suave */
    --c-paper:      #FFFFFF;   /* fondo principal y de cards */
    --c-blueprint:  #1F3FAA;   /* color de los dots blueprint */

    /* Brand */
    --c-brand:       #2B5BD9;  /* CTA principal — azul premium */
    --c-brand-hover: #1F45B8;  /* hover CTA */
    --c-brand-press: #173A9F;  /* active CTA */
    --c-brand-deep:  #0E2670;  /* navy profundo — eyebrow / accent */
    --c-brand-soft:  #EEF3FE;  /* fondo de chips/pills brand */
    --c-brand-line:  #C7D5F4;  /* border de pills brand */

    /* Acento dorado — usar SOLO en detalles, jamás en gradientes con azul */
    --c-gold:        #C9A227;
    --c-gold-soft:   #F4D88A;
    --c-gold-bg:     #FBF5DD;

    /* Estados semánticos */
    --c-pos:         #117A4A;  /* éxito */
    --c-pos-bg:      #E6F4ED;
    --c-info:        #4F73C9;  /* info azul más claro, para gráficos */
    --c-warn:        #B27108;
    --c-warn-bg:     #FBF1DC;

    /* Tipografía */
    --f-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --f-body:    'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --f-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Escala tipográfica (DESIGN.md) */
    --t-caption:    10px;
    --t-tiny:       11px;
    --t-body:       14px;
    --t-body-lg:    16px;
    --t-sub:        18px;
    --t-h-sm:       clamp(20px, 1.7vw, 24px);
    --t-h:          clamp(28px, 3.4vw, 40px);
    --t-display:    clamp(34px, 4.6vw, 56px);
    --t-display-xl: clamp(40px, 6vw, 72px);

    --lh-1: 1;
    --lh-tight: 1.1;
    --lh-display: 1.05;
    --lh-snug: 1.3;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    --ls-display: -0.034em;
    --ls-h:       -0.024em;
    --ls-sub:     -0.012em;
    --ls-body:    -0.005em;
    --ls-mono:    0;
    --ls-caps:    0.14em;

    /* Espaciado (4px base) */
    --s-4: 4px;   --s-8: 8px;    --s-12: 12px; --s-16: 16px;
    --s-20: 20px; --s-24: 24px;  --s-32: 32px; --s-40: 40px;
    --s-48: 48px; --s-64: 64px;  --s-72: 72px; --s-80: 80px;
    --s-96: 96px; --s-120: 120px;

    /* Layout */
    --w-container: 1200px;
    --w-narrow:    920px;
    --w-prose:     680px;
    --section-pad: clamp(72px, 9vw, 120px);

    /* Radius (default 8px, igual que DESIGN.md) */
    --r-2: 4px;
    --r-4: 6px;
    --r-default: 8px;
    --r-card:    8px;
    --r-pill:    999px;
    --r-lg:      12px;
    --r-xl:      16px;

    /* Sombras — layered & subtle */
    --sh-1: 0 1px 2px rgba(6, 16, 48, 0.06), 0 0 0 1px rgba(6, 16, 48, 0.04);
    --sh-2: 0 1px 3px rgba(6, 16, 48, 0.10),
            0 1px 0 rgba(6, 16, 48, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.60);
    --sh-card: 0 0 0 1px rgba(17, 26, 74, 0.05),
               0 1px 2px rgba(0, 0, 0, 0.05),
               inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --sh-card-h: 0 0 0 1px rgba(17, 26, 74, 0.08),
                 0 14px 30px -16px rgba(15, 30, 80, 0.20),
                 0 4px 10px -4px rgba(15, 30, 80, 0.10);
    --sh-xl: 0 40px 80px -32px rgba(8, 20, 60, 0.18),
             0 14px 32px -10px rgba(8, 20, 60, 0.10),
             0 0 0 1px rgba(17, 26, 74, 0.05);

    /* Motion */
    --ease:   cubic-bezier(0.22, 1, 0.36, 1);
    --ease-2: cubic-bezier(0.4, 0.14, 0.3, 1);
    --d-fast: 160ms;
    --d-norm: 240ms;
    --d-slow: 360ms;
}

/* ── 2. Reset acotado al landing-v2 ─────────────────────────────────────── */
body.landing-v2 {
    margin: 0;
    background: var(--c-paper);
    color: var(--c-ink);
    font-family: var(--f-body);
    font-size: var(--t-body-lg);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    max-width: 100vw;
}
body.landing-v2 *,
body.landing-v2 *::before,
body.landing-v2 *::after { box-sizing: border-box; }
body.landing-v2 h1,
body.landing-v2 h2,
body.landing-v2 h3,
body.landing-v2 h4,
body.landing-v2 h5,
body.landing-v2 h6 {
    margin: 0;
    color: var(--c-ink);
    font-family: var(--f-display);
    font-weight: 600;
    letter-spacing: var(--ls-h);
    line-height: var(--lh-tight);
}
body.landing-v2 p { margin: 0; color: var(--c-ink-3); line-height: var(--lh-relaxed); }
body.landing-v2 a { color: inherit; text-decoration: none; transition: color var(--d-fast) var(--ease); }
body.landing-v2 ul { margin: 0; padding: 0; list-style: none; }
body.landing-v2 img, body.landing-v2 svg { display: block; max-width: 100%; }
body.landing-v2 button { font: inherit; }

/* ── 3. Layout / sections ──────────────────────────────────────────────── */
.lv-container {
    width: 100%;
    max-width: var(--w-container);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px);
}
.lv-container.narrow { max-width: var(--w-narrow); }

.lv-section {
    position: relative;
    padding: var(--section-pad) 0;
}
.lv-section.fog    { background: var(--c-fog); }
.lv-section.compact { padding: clamp(48px, 7vw, 80px) 0; }
.lv-section.tight   { padding: clamp(36px, 5vw, 56px) 0; }

/* Eyebrow + heading + sub structure */
.lv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-mono);
    font-size: var(--t-tiny);
    font-weight: 500;
    color: var(--c-brand-deep);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    margin-bottom: var(--s-20);
}
.lv-eyebrow::before {
    content: '';
    width: 24px; height: 1px;
    background: var(--c-brand-deep);
    opacity: 0.5;
}
.lv-eyebrow.gold { color: var(--c-gold); }
.lv-eyebrow.gold::before { background: var(--c-gold); }

.lv-section-title {
    font-size: var(--t-h);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-h);
    color: var(--c-ink);
    max-width: 22ch;
    margin-bottom: var(--s-20);
    text-wrap: balance;
}
.lv-section-sub {
    font-size: var(--t-sub);
    line-height: var(--lh-snug);
    color: var(--c-slate);
    max-width: 56ch;
    font-weight: 400;
    letter-spacing: var(--ls-sub);
}

.lv-head { margin-bottom: var(--s-64); max-width: var(--w-narrow); }
.lv-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.lv-head.center .lv-eyebrow { justify-content: center; }
.lv-head.center .lv-section-title,
.lv-head.center .lv-section-sub { margin-left: auto; margin-right: auto; }
.lv-head.center .lv-section-title { max-width: 24ch; }

/* Divider fino */
.lv-divider {
    height: 1px;
    background: var(--c-line);
    margin: var(--s-64) 0;
}

/* ── 4. Tipografía utilitaria ──────────────────────────────────────────── */
.lv-display {
    font-size: var(--t-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    font-weight: 600;
    color: var(--c-ink);
}
.lv-display-xl {
    font-size: var(--t-display-xl);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    font-weight: 600;
    color: var(--c-ink);
    text-wrap: balance;
}
.lv-mono {
    font-family: var(--f-mono);
    font-size: var(--t-tiny);
    letter-spacing: var(--ls-mono);
    color: var(--c-slate);
}
.lv-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    font-size: var(--t-tiny);
    font-weight: 500;
    color: var(--c-mute);
    font-family: var(--f-mono);
}

/* ── 5. Botones ────────────────────────────────────────────────────────── */
.lv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: var(--r-default);
    font-family: var(--f-display);
    font-size: var(--t-body-lg);
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--d-fast) var(--ease),
                color var(--d-fast) var(--ease),
                border-color var(--d-fast) var(--ease),
                box-shadow var(--d-fast) var(--ease),
                transform var(--d-fast) var(--ease);
    text-decoration: none;
    white-space: nowrap;
}
.lv-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.lv-btn:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
}

/* CTA principal — azul premium sólido */
.lv-btn-primary {
    background: var(--c-brand);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 1px 2px rgba(8, 20, 60, 0.18);
}
.lv-btn-primary:hover { background: var(--c-brand-hover); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 18px -6px rgba(43, 91, 217, 0.40); }
.lv-btn-primary:active { background: var(--c-brand-press); transform: translateY(0); }

/* Secondary — outline ink */
.lv-btn-outline {
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-line);
}
.lv-btn-outline:hover { border-color: var(--c-ink); }

/* Ghost — texto puro con flecha */
.lv-btn-ghost {
    background: transparent;
    color: var(--c-ink);
    padding-left: 4px; padding-right: 4px;
}
.lv-btn-ghost:hover { color: var(--c-brand); }
.lv-btn-ghost svg { transition: transform var(--d-fast) var(--ease); }
.lv-btn-ghost:hover svg { transform: translateX(3px); }

/* Modificadores tamaño */
.lv-btn-sm { padding: 8px 14px; font-size: var(--t-body); }
.lv-btn-lg { padding: 14px 22px; font-size: var(--t-body-lg); }

/* ── 6. Pills / tags ──────────────────────────────────────────────────── */
.lv-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-family: var(--f-mono);
    font-size: var(--t-caption);
    font-weight: 500;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    border: 1px solid var(--c-line);
    background: var(--c-paper);
    color: var(--c-ink-2);
}
.lv-pill.brand { background: var(--c-brand-soft); border-color: var(--c-brand-line); color: var(--c-brand-deep); }
.lv-pill.gold  { background: var(--c-gold-bg); border-color: rgba(201, 162, 39, 0.30); color: var(--c-gold); }
.lv-pill.pos   { background: var(--c-pos-bg); border-color: rgba(17, 122, 74, 0.18); color: var(--c-pos); }
.lv-pill .dot  { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── 7. NAVBAR ─────────────────────────────────────────────────────────── */
.lv-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--d-norm) var(--ease),
                background var(--d-norm) var(--ease);
}
.lv-nav.is-scrolled {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: var(--c-line);
}
.lv-nav-inner {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 32px);
    height: 64px;
    width: 100%;
    max-width: var(--w-container);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px);
}
.lv-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--c-ink);
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
}
.lv-brand-mark {
    width: 30px; height: 30px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--sh-1);
    display: grid; place-items: center;
    background: #fff;
    flex-shrink: 0;
}
.lv-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.lv-brand-text { display: inline-flex; flex-direction: column; line-height: 1; }
.lv-brand-text small {
    font-family: var(--f-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--c-mute);
    margin-top: 3px;
    text-transform: uppercase;
}

.lv-nav-links {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
    margin-left: clamp(20px, 4vw, 48px);
}
.lv-nav-links a {
    font-size: var(--t-body);
    font-weight: 400;
    color: var(--c-ink-2);
    padding: 6px 0;
    position: relative;
}
.lv-nav-links a:hover { color: var(--c-brand); }
.lv-nav-cta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.lv-nav-toggle {
    display: none;
    width: 38px; height: 38px;
    border: 1px solid var(--c-line);
    background: #fff;
    border-radius: var(--r-default);
    color: var(--c-ink-2);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
@media (max-width: 880px) {
    .lv-nav-links { display: none; }
    .lv-nav-cta .lv-btn-outline { display: none; }
    .lv-nav-toggle { display: inline-flex; }
}

/* Mobile menu */
.lv-mobile-menu {
    position: fixed;
    inset: 0;
    background: rgba(6, 16, 48, 0.40);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--d-norm) var(--ease), visibility var(--d-norm) var(--ease);
    z-index: 80;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}
.lv-mobile-menu.is-open { opacity: 1; visibility: visible; }
.lv-mobile-menu-panel {
    background: #fff;
    width: min(360px, 88%);
    height: 100%;
    padding: 28px 24px 32px;
    transform: translateX(8%);
    transition: transform var(--d-slow) var(--ease);
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
}
.lv-mobile-menu.is-open .lv-mobile-menu-panel { transform: translateX(0); }
.lv-mobile-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lv-mobile-menu-close {
    background: var(--c-fog);
    border: 1px solid var(--c-line);
    width: 36px; height: 36px;
    border-radius: var(--r-default);
    display: grid; place-items: center;
    color: var(--c-ink-2);
    cursor: pointer;
}
.lv-mobile-menu nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lv-mobile-menu nav a {
    padding: 12px 14px;
    border-radius: var(--r-default);
    font-size: var(--t-body-lg);
    font-weight: 500;
    color: var(--c-ink);
    display: flex; align-items: center; gap: 12px;
}
.lv-mobile-menu nav a svg { width: 18px; height: 18px; color: var(--c-slate); }
.lv-mobile-menu nav a:hover { background: var(--c-fog); }
.lv-mobile-menu nav a.is-cta { background: var(--c-brand); color: #fff; justify-content: center; margin-top: 12px; }
.lv-mobile-menu nav a.is-cta svg { color: #fff; }
.lv-mobile-menu nav a.is-cta:hover { background: var(--c-brand-hover); }
.lv-mobile-menu nav a.is-link {
    background: var(--c-fog);
    border: 1px solid var(--c-line);
    justify-content: center;
}

/* ── 8. HERO ───────────────────────────────────────────────────────────── */
.lv-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 7vw, 100px);
    background: var(--c-paper);
}
/* Blueprint dotted muy sutil — NO grid, son puntos */
.lv-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(2, 50, 71, 0.16) 1px, transparent 1.4px);
    background-size: 22px 22px;
    background-position: -1px -1px;
    mask-image: radial-gradient(80% 70% at 50% 35%, #000 0%, transparent 95%);
    -webkit-mask-image: radial-gradient(80% 70% at 50% 35%, #000 0%, transparent 95%);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
/* Glow azul muy sutil arriba derecha */
.lv-hero::after {
    content: '';
    position: absolute;
    top: -200px; right: -180px;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(43, 91, 217, 0.10), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.lv-hero > * { position: relative; z-index: 1; }

.lv-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}
@media (max-width: 980px) {
    .lv-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

.lv-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 8px;
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--c-ink-2);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    margin-bottom: var(--s-32);
    box-shadow: var(--sh-1);
}
.lv-hero-eyebrow .num {
    background: var(--c-brand-soft);
    color: var(--c-brand-deep);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.lv-hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-pos); animation: lv-pulse 2.4s ease-in-out infinite; }

.lv-hero h1 {
    font-size: var(--t-display-xl);
    line-height: 0.98;
    letter-spacing: var(--ls-display);
    color: var(--c-ink);
    margin-bottom: var(--s-24);
    text-wrap: balance;
    font-weight: 600;
}
.lv-hero h1 em {
    font-style: normal;
    color: var(--c-brand);
    background: linear-gradient(120deg, #0E2670 0%, #1A3FAA 35%, #2B5BD9 70%, #5C84EC 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline;
}

.lv-hero-sub {
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.55;
    color: var(--c-slate);
    max-width: 52ch;
    margin-bottom: var(--s-32);
    font-weight: 400;
    letter-spacing: var(--ls-sub);
}
.lv-hero-ctas {
    display: flex; flex-wrap: wrap;
    gap: 12px;
    margin-bottom: var(--s-40);
}
.lv-hero-trust {
    display: flex; flex-wrap: wrap;
    gap: 18px 24px;
    font-family: var(--f-mono);
    font-size: var(--t-caption);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--c-mute);
}
.lv-hero-trust .item { display: inline-flex; align-items: center; gap: 6px; }
.lv-hero-trust .item svg { width: 12px; height: 12px; color: var(--c-brand); }

/* Stage derecho — device card del backoffice + cards flotantes */
.lv-hero-stage {
    position: relative;
    width: 100%;
    max-width: 560px;
    min-height: 480px;
    margin-left: auto;
}
@media (max-width: 980px) {
    .lv-hero-stage { max-width: 480px; min-height: 420px; margin: 0 auto; }
}
@media (max-width: 540px) {
    .lv-hero-stage { min-height: 360px; }
}

/* Sombra del stage */
.lv-stage-shadow {
    position: absolute;
    left: 8%; right: 8%; bottom: 16px;
    height: 40px;
    background: radial-gradient(closest-side, rgba(8, 20, 60, 0.20), transparent 70%);
    filter: blur(14px);
    border-radius: 50%;
    z-index: 0;
}

/* Device — un "panel" del backoffice flotando, sin transforms agresivos */
.lv-device {
    position: absolute;
    top: 8%;
    left: 6%;
    right: 6%;
    bottom: 6%;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 14px;
    box-shadow: var(--sh-xl);
    overflow: hidden;
    z-index: 1;
}
.lv-device-bar {
    height: 28px;
    background: var(--c-fog-2);
    border-bottom: 1px solid var(--c-line-2);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 6px;
}
.lv-device-bar .d { width: 8px; height: 8px; border-radius: 50%; background: var(--c-line); }
.lv-device-bar .url {
    margin-left: 12px;
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--c-mute);
    letter-spacing: 0;
}
.lv-device-body {
    padding: 16px 16px 14px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 12px;
}

.lv-device-lesson {
    background: linear-gradient(180deg, #F5F8FF 0%, #FFFFFF 100%);
    border: 1px solid var(--c-line-2);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lv-device-lesson .play {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2B5BD9, #163A9E);
    color: #fff;
    display: grid; place-items: center;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.15);
}
.lv-device-lesson .play svg { width: 14px; height: 14px; }
.lv-device-lesson .ttl {
    font-size: 13px; font-weight: 600;
    color: var(--c-ink);
    letter-spacing: -0.012em;
}
.lv-device-lesson .meta {
    font-family: var(--f-mono);
    font-size: 9.5px;
    color: var(--c-slate);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.lv-device-lesson .bar {
    position: relative;
    height: 4px;
    background: var(--c-line-2);
    border-radius: 999px;
    overflow: hidden;
}
.lv-device-lesson .bar::after {
    content: '';
    position: absolute;
    inset: 0 32% 0 0;
    background: linear-gradient(90deg, var(--c-pos), #4FC8A0);
    border-radius: 999px;
}
.lv-device-lesson .pct {
    display: flex; justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--c-slate);
}
.lv-device-lesson .pct b { color: var(--c-pos); font-weight: 500; }

.lv-device-card {
    background: #fff;
    border: 1px solid var(--c-line-2);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lv-device-card-row {
    display: flex; align-items: center; gap: 10px;
}
.lv-device-card-icon {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: var(--c-gold-bg);
    color: var(--c-gold);
    display: grid; place-items: center;
    flex-shrink: 0;
    border: 1px solid rgba(201, 162, 39, 0.20);
}
.lv-device-card-icon svg { width: 14px; height: 14px; }
.lv-device-card .lbl {
    font-family: var(--f-mono);
    font-size: 9.5px;
    color: var(--c-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}
.lv-device-card .val {
    font-family: var(--f-mono);
    font-size: 16px;
    color: var(--c-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.lv-device-card svg.spark {
    width: 100%; height: 28px; margin-top: 2px;
}

/* Card flotante 1 — "Asistente IA" */
.lv-float-ai {
    position: absolute;
    top: 4%; left: -4%;
    width: 232px;
    max-width: 60%;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: var(--sh-card);
    z-index: 3;
    animation: lv-float 9s ease-in-out infinite;
}
@media (max-width: 540px) {
    .lv-float-ai { left: 0; top: 2%; width: 200px; padding: 10px 12px; }
    .lv-float-ai .msg { font-size: 11.5px; line-height: 1.4; }
}
.lv-float-ai .head {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--c-slate);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: 8px;
}
.lv-float-ai .head .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-pos); }
.lv-float-ai .msg {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--c-ink-2);
    letter-spacing: -0.005em;
}
.lv-float-ai .msg b { color: var(--c-brand-deep); font-weight: 600; }

/* Card flotante 2 — "Diploma" */
.lv-float-cert {
    position: absolute;
    bottom: 4%; right: -4%;
    width: 220px;
    max-width: 56%;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: var(--sh-card);
    z-index: 3;
    animation: lv-float 10s ease-in-out infinite 1.2s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
@media (max-width: 540px) {
    .lv-float-cert { right: 0; bottom: 2%; width: 200px; padding: 10px 12px; }
    .lv-float-cert .ttl { font-size: 11.5px; }
}
.lv-float-cert .head {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--c-gold);
    text-transform: uppercase;
    letter-spacing: 0.10em;
}
.lv-float-cert .head svg { width: 14px; height: 14px; }
.lv-float-cert .ttl {
    font-size: 12.5px;
    color: var(--c-ink);
    font-weight: 600;
    letter-spacing: -0.008em;
}
.lv-float-cert .sub {
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--c-slate);
}

@keyframes lv-float {
    0%, 100% { transform: translate3d(0,0,0); }
    50%      { transform: translate3d(0, -8px, 0); }
}
@keyframes lv-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(17, 122, 74, 0.35); }
    70%      { box-shadow: 0 0 0 8px rgba(17, 122, 74, 0); }
}

/* ── 9. Trust strip ────────────────────────────────────────────────────── */
.lv-trust-strip {
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    padding: 28px 0;
    background: var(--c-fog-2);
}
.lv-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 48px;
    align-items: center;
    justify-content: space-between;
}
.lv-trust-row .lbl {
    font-family: var(--f-mono);
    font-size: var(--t-tiny);
    color: var(--c-mute);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
}
.lv-trust-items {
    display: flex; flex-wrap: wrap;
    gap: 24px 32px;
    align-items: center;
}
.lv-trust-items .item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-ink-2);
    font-size: var(--t-body);
    font-weight: 500;
    letter-spacing: -0.005em;
}
.lv-trust-items .item svg { width: 16px; height: 16px; color: var(--c-brand); }

/* ── 10. Feature cards (3-col) ─────────────────────────────────────────── */
.lv-features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
@media (max-width: 980px) { .lv-features-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .lv-features-grid { grid-template-columns: 1fr; } }

.lv-feat {
    background: #fff;
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
    padding: var(--s-24);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: box-shadow var(--d-norm) var(--ease), transform var(--d-norm) var(--ease);
}
.lv-feat:hover { box-shadow: var(--sh-card-h); transform: translateY(-2px); }
.lv-feat-num {
    font-family: var(--f-mono);
    font-size: var(--t-caption);
    color: var(--c-mute);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
}
.lv-feat-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: grid; place-items: center;
    background: var(--c-brand-soft);
    color: var(--c-brand-deep);
    border: 1px solid var(--c-brand-line);
}
.lv-feat-icon svg { width: 18px; height: 18px; }
.lv-feat h3 {
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -0.018em;
    color: var(--c-ink);
    font-weight: 600;
}
.lv-feat p {
    font-size: var(--t-body);
    line-height: 1.55;
    color: var(--c-slate);
    margin: 0;
}
.lv-feat-link {
    margin-top: auto;
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--c-brand);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.lv-feat-link svg { width: 12px; height: 12px; transition: transform var(--d-fast) var(--ease); }
.lv-feat:hover .lv-feat-link svg { transform: translateX(3px); }
.lv-feat.gold .lv-feat-icon { background: var(--c-gold-bg); color: var(--c-gold); border-color: rgba(201,162,39,0.30); }

/* ── 11. Two-column "showcase" sections ────────────────────────────────── */
.lv-show {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}
.lv-show.reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.lv-show.reverse .lv-show-text { order: 2; }
@media (max-width: 980px) {
    .lv-show, .lv-show.reverse { grid-template-columns: 1fr; gap: 40px; }
    .lv-show.reverse .lv-show-text { order: 0; }
}

.lv-show-list {
    margin-top: var(--s-24);
    display: flex; flex-direction: column;
    gap: 14px;
}
.lv-show-list .row {
    display: flex; gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-top: 1px solid var(--c-line-2);
}
.lv-show-list .row:first-child { border-top: 0; padding-top: 0; }
.lv-show-list .ic {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: var(--c-fog);
    border: 1px solid var(--c-line);
    color: var(--c-brand-deep);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.lv-show-list .ic svg { width: 14px; height: 14px; }
.lv-show-list h4 {
    font-size: var(--t-body-lg);
    font-weight: 600;
    color: var(--c-ink);
    letter-spacing: -0.014em;
    margin-bottom: 2px;
}
.lv-show-list p {
    font-size: 13.5px;
    color: var(--c-slate);
    margin: 0;
    line-height: 1.55;
}

/* Mock UI grandes — usado como visual del lado derecho */
.lv-mock {
    position: relative;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--sh-xl);
    border: 1px solid var(--c-line);
    overflow: hidden;
}
.lv-mock-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-line-2);
    background: var(--c-fog-2);
}
.lv-mock-head .d { width: 9px; height: 9px; border-radius: 50%; background: var(--c-line); }
.lv-mock-head .name {
    margin-left: 8px;
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--c-slate);
    letter-spacing: 0;
}
.lv-mock-head .name b { color: var(--c-ink-2); font-weight: 600; }
.lv-mock-body { padding: 18px; }

/* AI mock */
.lv-mock-ai .lv-mock-body {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--c-fog-2);
    min-height: 260px;
}
.lv-mock-msg {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: -0.005em;
    animation: lv-msg-in 600ms var(--ease) backwards;
}
.lv-mock-msg.user {
    background: var(--c-brand);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.lv-mock-msg.bot {
    background: #fff;
    border: 1px solid var(--c-line);
    color: var(--c-ink-2);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}
.lv-mock-msg.bot b { color: var(--c-brand-deep); font-weight: 600; }
.lv-mock-msg.delay-1 { animation-delay: .1s; }
.lv-mock-msg.delay-2 { animation-delay: .5s; }
.lv-mock-msg.delay-3 { animation-delay: 1.1s; }
@keyframes lv-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lv-mock-typing {
    align-self: flex-start;
    display: inline-flex; gap: 4px;
    background: #fff;
    border: 1px solid var(--c-line);
    padding: 12px 14px;
    border-radius: 12px;
    border-bottom-left-radius: 4px;
}
.lv-mock-typing span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-mute);
    animation: lv-bounce 1.4s ease-in-out infinite;
}
.lv-mock-typing span:nth-child(2) { animation-delay: .15s; }
.lv-mock-typing span:nth-child(3) { animation-delay: .30s; }
@keyframes lv-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* ── 12. Steps numerados (cómo funciona) ───────────────────────────────── */
.lv-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--sh-card);
}
.lv-step {
    padding: clamp(24px, 3vw, 36px);
    border-right: 1px solid var(--c-line-2);
    display: flex; flex-direction: column; gap: 12px;
}
.lv-step:last-child { border-right: 0; }
@media (max-width: 880px) {
    .lv-steps { grid-template-columns: 1fr; }
    .lv-step { border-right: 0; border-bottom: 1px solid var(--c-line-2); }
    .lv-step:last-child { border-bottom: 0; }
}
.lv-step-num {
    font-family: var(--f-mono);
    font-size: var(--t-caption);
    color: var(--c-mute);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
}
.lv-step-num b { color: var(--c-brand-deep); font-weight: 600; }
.lv-step h3 {
    font-size: var(--t-h-sm);
    line-height: 1.2;
    letter-spacing: -0.018em;
    color: var(--c-ink);
}
.lv-step p {
    font-size: var(--t-body);
    color: var(--c-slate);
    line-height: 1.55;
}
.lv-step-meta {
    margin-top: 8px;
    display: flex; gap: 8px; flex-wrap: wrap;
}

/* ── 13. Bento de módulos educativos ──────────────────────────────────── */
.lv-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}
@media (max-width: 980px) { .lv-bento { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 600px) { .lv-bento { grid-template-columns: 1fr; gap: 12px; } }
.lv-bento .span-12 { grid-column: span 12; }
.lv-bento .span-8  { grid-column: span 8; }
.lv-bento .span-6  { grid-column: span 6; }
.lv-bento .span-4  { grid-column: span 4; }
@media (max-width: 980px) {
    .lv-bento .span-8, .lv-bento .span-6, .lv-bento .span-4 { grid-column: span 6; }
    .lv-bento .span-12 { grid-column: span 6; }
}
@media (max-width: 600px) {
    .lv-bento [class*="span-"] { grid-column: span 1; }
}

.lv-mod {
    position: relative;
    background: #fff;
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
    padding: var(--s-24);
    display: flex; flex-direction: column;
    gap: 12px;
    transition: box-shadow var(--d-norm) var(--ease), transform var(--d-norm) var(--ease);
    overflow: hidden;
    min-height: 200px;
}
.lv-mod:hover { box-shadow: var(--sh-card-h); transform: translateY(-2px); }
.lv-mod.featured {
    grid-column: span 8;
    background:
        radial-gradient(70% 90% at 100% 0%, rgba(43, 91, 217, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
    min-height: 260px;
}
@media (max-width: 980px) { .lv-mod.featured { grid-column: span 6; } }
@media (max-width: 600px) { .lv-mod.featured { grid-column: span 1; } }

.lv-mod-meta {
    font-family: var(--f-mono);
    font-size: var(--t-caption);
    color: var(--c-mute);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    display: inline-flex; gap: 8px; align-items: center;
}
.lv-mod-meta .level { color: var(--c-brand-deep); font-weight: 600; }
.lv-mod h3 {
    font-size: var(--t-h-sm);
    line-height: 1.2;
    letter-spacing: -0.020em;
    color: var(--c-ink);
}
.lv-mod p {
    font-size: var(--t-body);
    line-height: 1.55;
    color: var(--c-slate);
    margin: 0;
}
.lv-mod-foot {
    margin-top: auto;
    display: flex; align-items: center; gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--c-line-2);
    font-family: var(--f-mono);
    font-size: var(--t-caption);
    color: var(--c-mute);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
}
.lv-mod-foot .bar {
    flex: 1;
    height: 3px;
    background: var(--c-line-2);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.lv-mod-foot .bar::after {
    content: '';
    position: absolute;
    inset: 0 calc(100% - var(--p, 0%)) 0 0;
    background: linear-gradient(90deg, var(--c-pos), #4FC8A0);
}
.lv-mod-foot .bar.gold::after { background: linear-gradient(90deg, var(--c-gold-soft), var(--c-gold)); }

.lv-mod-icon {
    position: absolute;
    top: 24px; right: 24px;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--c-brand-soft);
    border: 1px solid var(--c-brand-line);
    color: var(--c-brand-deep);
    display: grid; place-items: center;
}
.lv-mod-icon svg { width: 16px; height: 16px; }
.lv-mod.gold .lv-mod-icon { background: var(--c-gold-bg); border-color: rgba(201,162,39,0.30); color: var(--c-gold); }
.lv-mod.green .lv-mod-icon { background: var(--c-pos-bg); border-color: rgba(17,122,74,0.20); color: var(--c-pos); }

/* ── 14. Pricing ───────────────────────────────────────────────────────── */
.lv-pricing {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 1024px) { .lv-pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .lv-pricing { grid-template-columns: 1fr; } }

.lv-price {
    background: #fff;
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
    padding: var(--s-32) var(--s-24);
    display: flex; flex-direction: column;
    gap: 14px;
    position: relative;
    transition: box-shadow var(--d-norm) var(--ease), transform var(--d-norm) var(--ease);
}
.lv-price:hover { box-shadow: var(--sh-card-h); transform: translateY(-2px); }
.lv-price.featured {
    background:
        radial-gradient(60% 80% at 50% 0%, rgba(43,91,217,0.08), transparent 60%),
        #fff;
    box-shadow:
        0 0 0 1px var(--c-brand-line),
        0 0 0 4px rgba(43,91,217,0.06),
        var(--sh-card);
}
.lv-price-tag {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--c-brand);
    color: #fff;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    font-family: var(--f-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(43, 91, 217, 0.30);
}
.lv-price h3 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.014em;
    color: var(--c-ink);
}
.lv-price-desc {
    font-size: 13px;
    color: var(--c-slate);
    line-height: 1.5;
    min-height: 38px;
}
.lv-price-amt {
    display: flex; align-items: baseline; gap: 6px;
    margin-top: 4px;
}
.lv-price-amt .v {
    font-family: var(--f-display);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.030em;
    color: var(--c-ink);
}
.lv-price-amt .c {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--c-slate);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
}
.lv-price-period {
    font-family: var(--f-mono);
    font-size: 10.5px;
    color: var(--c-mute);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
}
.lv-price-feat {
    margin: 12px 0;
    display: flex; flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--c-line-2);
}
.lv-price-feat li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13.5px;
    color: var(--c-ink-2);
    line-height: 1.5;
}
.lv-price-feat li svg {
    width: 14px; height: 14px;
    color: var(--c-pos);
    margin-top: 2px;
    flex-shrink: 0;
}
.lv-price .lv-btn { margin-top: auto; }

/* ── 15. Testimonios ───────────────────────────────────────────────────── */
.lv-testi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 980px) { .lv-testi { grid-template-columns: 1fr; } }
.lv-testi-card {
    background: #fff;
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
    padding: var(--s-24);
    display: flex; flex-direction: column; gap: 16px;
    position: relative;
}
.lv-testi-stars {
    display: flex; gap: 2px;
    color: var(--c-gold);
}
.lv-testi-stars svg { width: 14px; height: 14px; }
.lv-testi-text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--c-ink-2);
    letter-spacing: -0.010em;
    flex: 1;
}
.lv-testi-foot {
    display: flex; align-items: center; gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--c-line-2);
}
.lv-testi-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-brand), var(--c-brand-deep));
    color: #fff;
    display: grid; place-items: center;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.010em;
}
.lv-testi-avatar.gold { background: linear-gradient(135deg, var(--c-gold-soft), var(--c-gold)); color: #4A3A05; }
.lv-testi-avatar.pos  { background: linear-gradient(135deg, #4FC8A0, var(--c-pos)); }
.lv-testi-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-ink);
    letter-spacing: -0.012em;
}
.lv-testi-role {
    font-family: var(--f-mono);
    font-size: 10.5px;
    color: var(--c-mute);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    margin-top: 2px;
}

/* ── 16. FAQ ──────────────────────────────────────────────────────────── */
.lv-faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 800px) { .lv-faq { grid-template-columns: 1fr; } }
.lv-faq details {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    padding: 18px 20px;
    transition: border-color var(--d-fast) var(--ease);
    cursor: pointer;
}
.lv-faq details[open] { border-color: var(--c-brand-line); background: var(--c-fog-2); }
.lv-faq summary {
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    font-size: var(--t-body-lg);
    font-weight: 500;
    color: var(--c-ink);
    letter-spacing: -0.012em;
}
.lv-faq summary::-webkit-details-marker { display: none; }
.lv-faq summary svg {
    width: 18px; height: 18px;
    color: var(--c-slate);
    transition: transform var(--d-fast) var(--ease);
}
.lv-faq details[open] summary svg { transform: rotate(180deg); }
.lv-faq details p {
    margin-top: 12px;
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--c-slate);
}

/* ── 17. CTA final premium ────────────────────────────────────────────── */
.lv-cta {
    position: relative;
    border-radius: 16px;
    padding: clamp(48px, 7vw, 80px);
    background:
        radial-gradient(60% 80% at 50% 110%, rgba(43,91,217,0.30) 0%, transparent 60%),
        linear-gradient(160deg, #0B1F58 0%, #0E2A6E 50%, #0A1B49 100%);
    color: #fff;
    text-align: center;
    overflow: hidden;
    box-shadow: var(--sh-xl);
}
.lv-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.18) 1.2px, transparent 1.4px);
    background-size: 28px 28px;
    background-position: 0 0;
    mask-image: radial-gradient(70% 75% at 50% 50%, #000 30%, transparent 88%);
    -webkit-mask-image: radial-gradient(70% 75% at 50% 50%, #000 30%, transparent 88%);
    opacity: 0.40;
    pointer-events: none;
}
.lv-cta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.lv-cta .lv-eyebrow { color: var(--c-gold-soft); justify-content: center; }
.lv-cta .lv-eyebrow::before { background: var(--c-gold); opacity: 0.7; }
.lv-cta h2 {
    color: #fff;
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: 1.05;
    letter-spacing: var(--ls-display);
    font-weight: 600;
    margin-bottom: 16px;
    text-wrap: balance;
}
.lv-cta h2 em {
    font-style: normal;
    background: linear-gradient(120deg, #FFE9A6 0%, #F4D88A 50%, #C9A227 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline;
}
.lv-cta p {
    color: rgba(255,255,255,0.78);
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.55;
    max-width: 56ch;
    margin: 0 auto 32px;
}
.lv-cta-row {
    display: flex; flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 28px;
}
.lv-cta .lv-btn-primary {
    background: #fff;
    color: var(--c-brand-deep);
}
.lv-cta .lv-btn-primary:hover { background: var(--c-fog); color: var(--c-brand-deep); }
.lv-cta .lv-btn-outline {
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.30);
}
.lv-cta .lv-btn-outline:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.08); }

.lv-cta-trust {
    display: flex; flex-wrap: wrap;
    justify-content: center; gap: 14px 24px;
    color: rgba(255,255,255,0.62);
    font-family: var(--f-mono);
    font-size: var(--t-caption);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
}
.lv-cta-trust .item { display: inline-flex; align-items: center; gap: 6px; }
.lv-cta-trust .item svg { width: 12px; height: 12px; color: var(--c-gold-soft); }

/* ── 18. Footer ───────────────────────────────────────────────────────── */
.lv-footer {
    border-top: 1px solid var(--c-line);
    padding: clamp(48px, 6vw, 72px) 0 32px;
    background: var(--c-paper);
}
.lv-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 4vw, 64px);
    align-items: flex-start;
}
@media (max-width: 880px) {
    .lv-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 540px) { .lv-footer-inner { grid-template-columns: 1fr; } }

.lv-footer-brand p {
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--c-slate);
    max-width: 36ch;
    line-height: 1.55;
}
.lv-footer h5 {
    font-family: var(--f-mono);
    font-size: var(--t-caption);
    color: var(--c-mute);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    font-weight: 500;
    margin-bottom: 14px;
}
.lv-footer ul { display: flex; flex-direction: column; gap: 10px; }
.lv-footer li a {
    font-size: 13.5px;
    color: var(--c-ink-2);
    transition: color var(--d-fast) var(--ease);
}
.lv-footer li a:hover { color: var(--c-brand); }

.lv-footer-bot {
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: 22px;
    border-top: 1px solid var(--c-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--c-mute);
    letter-spacing: 0.02em;
}
.lv-footer-bot .status {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--c-pos);
    font-weight: 500;
}
.lv-footer-bot .status .pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--c-pos);
    animation: lv-pulse 2.4s ease-in-out infinite;
}

/* ── 19. Reveal animations ────────────────────────────────────────────── */
/* Solo aplican cuando el JS ha marcado <html> con .js (evita que
   el contenido quede oculto si JS no carga o en captures headless). */
html.js body.landing-v2 [data-reveal-v2] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 720ms var(--ease), transform 720ms var(--ease);
}
html.js body.landing-v2 [data-reveal-v2].is-in {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal-v2], .lv-float-ai, .lv-float-cert, .lv-mock-msg, .lv-mock-typing span,
    .lv-footer-bot .status .pulse, .lv-hero-eyebrow .dot {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── 20. Numbered metric blocks (mini-stats) ──────────────────────────── */
.lv-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--sh-card);
}
@media (max-width: 880px) { .lv-metrics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .lv-metrics { grid-template-columns: 1fr; } }
.lv-metric {
    padding: 24px 24px 22px;
    border-right: 1px solid var(--c-line-2);
    display: flex; flex-direction: column; gap: 8px;
}
@media (max-width: 880px) {
    .lv-metric { border-right: 0; border-bottom: 1px solid var(--c-line-2); }
    .lv-metric:nth-child(2n) { border-right: 0; }
    .lv-metric:nth-child(odd) { border-right: 1px solid var(--c-line-2); }
}
.lv-metric:last-child { border-right: 0; border-bottom: 0; }
.lv-metric-lbl {
    font-family: var(--f-mono);
    font-size: var(--t-caption);
    color: var(--c-mute);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
}
.lv-metric-val {
    font-family: var(--f-display);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 600;
    letter-spacing: -0.030em;
    color: var(--c-ink);
    line-height: 1;
}
.lv-metric-val small {
    font-size: 0.6em;
    color: var(--c-brand);
    font-weight: 600;
    margin-left: 2px;
}
.lv-metric-desc {
    font-size: 12.5px;
    color: var(--c-slate);
    line-height: 1.45;
}

/* ── 21. Affiliate small block ─────────────────────────────────────────── */
.lv-affiliate {
    background: var(--c-fog-2);
    border: 1px solid var(--c-line);
    border-radius: 12px;
    padding: clamp(28px, 4vw, 40px);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}
@media (max-width: 880px) { .lv-affiliate { grid-template-columns: 1fr; } }
.lv-affiliate-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--c-gold-bg);
    color: var(--c-gold);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(201,162,39,0.30);
    font-family: var(--f-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    font-weight: 500;
    margin-bottom: 14px;
}
.lv-affiliate h3 {
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.18;
    letter-spacing: -0.022em;
    color: var(--c-ink);
    margin-bottom: 12px;
    font-weight: 600;
}
.lv-affiliate p {
    font-size: var(--t-body-lg);
    line-height: 1.55;
    color: var(--c-slate);
    margin-bottom: 18px;
}
.lv-affiliate-flow {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    background: #fff;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid var(--c-line);
}
.lv-affiliate-step {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 12px;
    background: var(--c-fog-2);
    border-radius: 8px;
}
.lv-affiliate-step .lbl {
    font-family: var(--f-mono);
    font-size: 9.5px;
    color: var(--c-mute);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
}
.lv-affiliate-step .val {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-ink);
    letter-spacing: -0.012em;
}
.lv-affiliate-disclaimer {
    margin-top: 16px;
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--c-mute);
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
}

/* ── 22. Asegurar overflow horizontal limpio en mobile ─────────────────── */
@media (max-width: 540px) {
    body.landing-v2 { font-size: 15px; }
    .lv-hero h1 { font-size: clamp(34px, 9vw, 44px); }
    .lv-hero-sub { font-size: 15px; }
    .lv-hero-grid { gap: 28px; }
    .lv-section-title { font-size: clamp(26px, 7vw, 36px); }
    .lv-display, .lv-display-xl { font-size: clamp(28px, 8vw, 40px); }
    .lv-section { padding: clamp(56px, 8vw, 80px) 0; }
    .lv-head { margin-bottom: 36px; }
    .lv-trust-row { flex-direction: column; align-items: flex-start; }
    .lv-features-grid { gap: 14px; }
    .lv-feat { padding: 20px; }
    .lv-mod { padding: 20px; }
    .lv-price { padding: 24px 20px; }
    /* Pricing en mobile: el "Recomendado" pill se acerca al borde */
    .lv-price.featured { box-shadow: 0 0 0 1px var(--c-brand-line), var(--sh-card); }
    .lv-cta { padding: 36px 22px 32px; border-radius: 14px; }
    .lv-cta h2 { font-size: clamp(28px, 8vw, 40px); }
}