/* ============ TIPOGRAFÍAS AUTOALOJADAS (sin peticiones a Google) ============ */
@font-face{font-family:'Unbounded';src:url('../fonts/unbounded-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Unbounded';src:url('../fonts/unbounded-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/sora-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/sora-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/sora-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/sora-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
    --bg: #07070C;
    --surface: #0D0E15;
    --surface-2: #12141F;
    --line: var(--elev-2);
    --red: #FE2C55;
    --cyan: #25F4EE;
    --gold: #FFC24B;
    --text: #F4F5F9;
    --muted: #98A0B3;
    --r: 18px;
    --fd: 'Unbounded', sans-serif;
    --fb: 'Sora', -apple-system, sans-serif;

    /* Capas y sombras: cambian con el tema */
    --elev-05: rgba(255,255,255,.025);
    --elev-1:  rgba(255,255,255,.055);
    --elev-2:  rgba(255,255,255,.10);
    --elev-3:  rgba(255,255,255,.14);
    --border-2: rgba(255,255,255,.22);
    --border-3: rgba(255,255,255,.32);
    --shadow-sm: rgba(0,0,0,.35);
    --shadow-md: rgba(0,0,0,.45);
    --shadow-lg: rgba(0,0,0,.55);
    --shadow-xl: rgba(0,0,0,.7);
    --header-bg:   rgba(7,7,12,.72);
    --header-bg-2: rgba(7,7,12,.9);
    --menu-bg: rgba(7,7,12,.97);
    --glow-red:  rgba(254,44,85,.13);
    --glow-cyan: rgba(37,244,238,.08);
    --logo-dark: block;
    --logo-light: none;
    --ok: #27b667;
    color-scheme: dark;
}

/* =====================================================================
   TEMA CLARO
   Por defecto se sigue la preferencia del sistema; el botón del header
   la sobrescribe y la elección queda guardada en el navegador.
   ===================================================================== */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
    --bg: #F4F6FB;
    --surface: #FFFFFF;
    --surface-2: #EDF0F7;
    --line: rgba(16,20,34,.11);
    --red: #D81348;
    --cyan: #068B85;
    --gold: #A9720A;
    --text: #10131E;
    --muted: #59617A;

    --elev-05: rgba(16,20,34,.025);
    --elev-1:  rgba(16,20,34,.05);
    --elev-2:  rgba(16,20,34,.085);
    --elev-3:  rgba(16,20,34,.13);
    --border-2: rgba(16,20,34,.20);
    --border-3: rgba(16,20,34,.30);
    --shadow-sm: rgba(22,28,48,.07);
    --shadow-md: rgba(22,28,48,.10);
    --shadow-lg: rgba(22,28,48,.14);
    --shadow-xl: rgba(22,28,48,.18);
    --header-bg:   rgba(255,255,255,.78);
    --header-bg-2: rgba(255,255,255,.95);
    --menu-bg: rgba(248,249,253,.98);
    --glow-red:  rgba(254,44,85,.10);
    --glow-cyan: rgba(37,244,238,.10);
    --logo-dark: none;
    --logo-light: block;
    --ok: #17944f;
    color-scheme: light;
    }
}
:root[data-theme="light"] {
    --bg: #F4F6FB;
    --surface: #FFFFFF;
    --surface-2: #EDF0F7;
    --line: rgba(16,20,34,.11);
    --red: #D81348;
    --cyan: #068B85;
    --gold: #A9720A;
    --text: #10131E;
    --muted: #59617A;

    --elev-05: rgba(16,20,34,.025);
    --elev-1:  rgba(16,20,34,.05);
    --elev-2:  rgba(16,20,34,.085);
    --elev-3:  rgba(16,20,34,.13);
    --border-2: rgba(16,20,34,.20);
    --border-3: rgba(16,20,34,.30);
    --shadow-sm: rgba(22,28,48,.07);
    --shadow-md: rgba(22,28,48,.10);
    --shadow-lg: rgba(22,28,48,.14);
    --shadow-xl: rgba(22,28,48,.18);
    --header-bg:   rgba(255,255,255,.78);
    --header-bg-2: rgba(255,255,255,.95);
    --menu-bg: rgba(248,249,253,.98);
    --glow-red:  rgba(254,44,85,.10);
    --glow-cyan: rgba(37,244,238,.10);
    --logo-dark: none;
    --logo-light: block;
    --ok: #17944f;
    color-scheme: light;
}

/* La tarjeta del live imita la pantalla de TikTok: se queda oscura siempre.
   Al redefinir aquí las variables, todo lo de dentro hereda los valores oscuros. */
.live-card, .live-card-wrap .live-card * {
    --surface: #0D0E15;
    --surface-2: #12141F;
    --text: #F4F5F9;
    --muted: #98A0B3;
    --line: rgba(255,255,255,.08);
    --elev-05: rgba(255,255,255,.025);
    --elev-1: rgba(255,255,255,.055);
    --elev-2: rgba(255,255,255,.10);
    --elev-3: rgba(255,255,255,.14);
    --border-2: rgba(255,255,255,.22);
    --border-3: rgba(255,255,255,.32);
    --red: #FE2C55;
    --cyan: #25F4EE;
    --gold: #FFC24B;
    /* El color se hereda: sin esto los textos de dentro tomarían el del tema claro. */
    color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}

body {
    font-family: var(--fb);
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 22px; }

/* ============ AMBIENT BACKGROUND ============ */
.bg-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
    radial-gradient(600px 400px at 85% -5%, var(--glow-red), transparent 65%),
    radial-gradient(700px 500px at -10% 30%, var(--glow-cyan), transparent 65%),
    radial-gradient(500px 400px at 60% 110%, var(--glow-red), transparent 65%);
}

/* ============ HEADER ============ */
/* Solo el encabezado del sitio: #siteHeader. Un <header> dentro de una tarjeta
   no debe volverse fijo. */
#siteHeader {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    padding: .65rem 0;
    background: var(--header-bg);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, background .3s ease;
}
#siteHeader.scrolled { border-bottom-color: var(--line); background: var(--header-bg-2); }
.header-content { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo-space a { display: flex; align-items: center; }
.logo-space img { height: 44px; width: auto; }

.main-nav { display: flex; align-items: center; gap: .4rem; }
.nav-link {
    font-size: .88rem; font-weight: 500; color: var(--muted);
    text-decoration: none; padding: .5rem .85rem; border-radius: 999px;
    transition: color .2s ease, background .2s ease;
}
.nav-link:hover, .nav-link.active { color: var(--text); background: var(--elev-1); }
.nav-cta {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--red); color: #fff !important;
    font-family: var(--fb); font-weight: 600; font-size: .88rem;
    border: none; cursor: pointer; padding: .55rem 1.15rem; border-radius: 999px;
    box-shadow: 0 4px 22px rgba(254,44,85,.4);
    transition: transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(254,44,85,.55); background: var(--red); }

/* Lang selector */
.lang-selector { position: relative; }
.lang-toggle {
    display: inline-flex; align-items: center; gap: .4rem;
    background: transparent; border: 1px solid var(--line); color: var(--muted);
    font-family: var(--fb); font-size: .82rem; font-weight: 500;
    padding: .45rem .75rem; border-radius: 999px; cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}
.lang-toggle:hover { border-color: var(--border-2); color: var(--text); }
.lang-toggle svg { width: 15px; height: 15px; }
.lang-toggle .chevron { width: 9px; height: 6px; transition: transform .2s ease; }
.lang-selector.open .chevron { transform: rotate(180deg); }
.lang-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
    padding: .4rem; opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: all .2s ease; box-shadow: 0 18px 50px var(--shadow-lg);
}
.lang-selector.open .lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-option {
    display: flex; align-items: center; gap: .5rem; font-size: .85rem;
    padding: .55rem .7rem; border-radius: 9px; text-decoration: none; color: var(--muted);
}
.lang-option:hover { background: var(--elev-1); color: var(--text); }
.lang-option .lang-check { margin-left: auto; opacity: 0; color: var(--cyan); }
.lang-option.active { color: var(--text); }
.lang-option.active .lang-check { opacity: 1; }

/* Mobile menu */
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 1101; }
.mobile-menu-btn span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
    position: fixed; inset: 0; z-index: 1100; padding: 90px 28px 40px;
    background: var(--menu-bg); backdrop-filter: blur(20px);
    display: flex; flex-direction: column; gap: .4rem;
    opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-nav-link {
    font-size: 1.15rem; font-weight: 600; color: var(--text); text-decoration: none;
    padding: .9rem 0; border-bottom: 1px solid var(--line); background: none; border-top: none; border-left: none; border-right: none;
    text-align: left; cursor: pointer; font-family: var(--fb); width: 100%;
}
.mobile-lang-group { margin-top: 1.2rem; display: flex; flex-direction: column; }
.mobile-lang-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; padding: 8px 0 4px; }

/* ============ HERO ============ */
.hero { padding: 148px 0 70px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem; align-items: center; }

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--cyan); border: 1px solid rgba(37,244,238,.3); background: rgba(37,244,238,.07);
    padding: .45rem 1rem; border-radius: 999px; margin-bottom: 1.4rem;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(254,44,85,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(254,44,85,.55); } 70% { box-shadow: 0 0 0 9px rgba(254,44,85,0); } 100% { box-shadow: 0 0 0 0 rgba(254,44,85,0); } }

h1 {
    font-family: var(--fd); font-weight: 700;
    font-size: clamp(1.8rem, 4.6vw, 3.15rem);
    line-height: 1.13; letter-spacing: -.01em; margin-bottom: 1.3rem;
}
h1 .h1-red { color: var(--red); }
h1 .h1-cyan { color: var(--cyan); }
.hero-sub { color: var(--muted); font-size: clamp(.98rem, 2.4vw, 1.12rem); max-width: 34rem; margin-bottom: 2rem; }
.hero-sub strong { color: var(--text); font-weight: 600; }

.hero-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.cta-button {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--fb); font-weight: 700; font-size: 1.02rem;
    background: var(--red); color: #fff; border: none; cursor: pointer;
    padding: 1rem 2rem; border-radius: 999px;
    box-shadow: 0 8px 34px rgba(254,44,85,.42);
    transition: transform .2s ease, box-shadow .2s ease;
}
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 12px 44px rgba(254,44,85,.55); }
.cta-ghost {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 600; font-size: .95rem; color: var(--text); text-decoration: none;
    padding: .95rem 1.6rem; border-radius: 999px; border: 1px solid var(--line);
    transition: border-color .2s ease, background .2s ease;
}
.cta-ghost:hover { border-color: var(--border-3); background: var(--elev-1); }

.trust-badges { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.trust-badge { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--muted); }
.trust-badge b { color: var(--text); font-weight: 600; }
.trust-badge-icon { color: var(--cyan); font-weight: 700; }

/* --- Live phone card (signature) --- */
.live-visual { display: flex; justify-content: center; perspective: 1200px; }
.live-card-wrap { position: relative; transform-style: preserve-3d; transition: transform .35s ease; will-change: transform; }
.live-card {
    position: relative; width: min(340px, 84vw); aspect-ratio: 9 / 16;
    border-radius: 36px; padding: 14px;
    background: linear-gradient(160deg, #141520 0%, #0B0C13 60%, #101019 100%);
    border: 1px solid var(--elev-2);
    box-shadow: 0 44px 100px var(--shadow-xl), 0 0 60px rgba(254,44,85,.12);
    overflow: hidden; isolation: isolate; cursor: pointer;
    display: flex; flex-direction: column;
}
/* anillo animado */
.live-card::before {
    content: ''; position: absolute; inset: -60%; z-index: -2;
    background: conic-gradient(from 0deg, transparent 0 55%, rgba(37,244,238,.65) 72%, rgba(254,44,85,.7) 86%, transparent 100%);
    animation: spin 8s linear infinite;
}
.live-card::after { content: ''; position: absolute; inset: 1.5px; border-radius: 35px; background: linear-gradient(160deg, #141520 0%, #0B0C13 60%, #101019 100%); z-index: -1; }
@keyframes spin { to { transform: rotate(1turn); } }

/* =====================================================================
   TARJETA DE LIVE — réplica de la interfaz de TikTok LIVE
   Estructura: video de fondo + capas de la interfaz encima.
   ===================================================================== */

/* ===== VIDEO DE FONDO (tu live real) ===== */
.live-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; border-radius: 33px;
    opacity: 0; transition: opacity .8s ease;
}
.live-card.video-on .live-video { opacity: 1; }
/* Sin video: un fondo de escenario para que la interfaz no flote en negro plano */
.live-stage {
    position: absolute; inset: 0; z-index: 0; border-radius: 33px; overflow: hidden;
    background:
        radial-gradient(120% 65% at 50% 8%, rgba(254,44,85,.20), transparent 62%),
        radial-gradient(110% 60% at 20% 96%, rgba(37,244,238,.16), transparent 60%),
        linear-gradient(168deg, #16172400 0%, #0B0C13 62%, #101019 100%);
    transition: opacity .8s ease;
}
.live-card.video-on .live-stage { opacity: 0; }

/* Degradados para que el texto se lea sobre el video */
.live-scrim { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; border-radius: 33px; }
.live-scrim.top { top: 0; height: 30%; background: linear-gradient(to bottom, rgba(5,5,10,.72), transparent); }
.live-scrim.bottom { bottom: 0; height: 52%; background: linear-gradient(to top, rgba(5,5,10,.88) 18%, rgba(5,5,10,.35) 55%, transparent); }
/* Con video activo el centro se oculta para lucir el stream */
.live-card.video-on .live-center { opacity: 0; visibility: hidden; }
.live-card.video-on .live-caption { color: var(--text); }

/* ---------- Fila 1: anfitrión, espectadores y cerrar ---------- */
.live-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; position: relative; z-index: 3; }
.host-pill {
    display: inline-flex; align-items: center; gap: .42rem; min-width: 0;
    background: rgba(18,18,26,.55); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px; padding: 3px 4px 3px 3px;
}
.host-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #000; }
.host-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.host-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.host-name { font-size: .69rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.host-followers { font-size: .6rem; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }
.host-follow {
    font-size: .62rem; font-weight: 700; color: #fff; background: var(--red);
    border-radius: 999px; padding: .26rem .62rem; white-space: nowrap; flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(254,44,85,.45);
}
.live-top-right { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.live-watchers {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(18,18,26,.55); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px; padding: 3px 8px 3px 3px;
    font-size: .66rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
}
.watch-avatars { display: inline-flex; }
.watch-avatars i {
    width: 19px; height: 19px; border-radius: 50%; display: block;
    background-size: cover; background-position: center;
    border: 1.5px solid rgba(20,20,28,.9);
}
.watch-avatars i + i { margin-left: -8px; }
.live-close { font-size: .82rem; color: rgba(255,255,255,.7); padding: .12rem .2rem; }

/* ---------- Fila 2: EN VIVO + diamantes ---------- */
.live-badges { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; position: relative; z-index: 3; }
.live-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .62rem; font-weight: 800; letter-spacing: .09em;
    background: var(--red); color: #fff; padding: .26rem .55rem; border-radius: 6px;
    box-shadow: 0 2px 12px rgba(254,44,85,.5);
}
.live-pill i { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.live-diamonds {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .66rem; font-weight: 700; color: #fff;
    background: rgba(18,18,26,.55); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.10);
    padding: .24rem .55rem; border-radius: 999px;
    font-variant-numeric: tabular-nums; transition: transform .2s ease;
}
.live-diamonds b { color: var(--cyan); font-size: .72rem; line-height: 1; }
.live-diamonds.bump { animation: bump .35s ease; }
@keyframes bump { 40% { transform: scale(1.14); } }

/* ---------- Objetivo de la transmisión ---------- */
.live-goal {
    display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
    margin-top: .45rem; position: relative; z-index: 3;
    background: rgba(18,18,26,.5); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px; padding: .25rem .6rem .25rem .55rem;
}
.goal-label { font-size: .56rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.62); white-space: nowrap; }
.goal-bar { width: 68px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; }
.goal-bar i { display: block; height: 100%; width: 25%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--red)); transition: width .6s ease; }
.goal-num { font-size: .58rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Centro (mensaje de venta; se oculta al cargar el video) ---------- */
.live-center { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: .6rem 6px; position: relative; z-index: 3; transition: opacity .5s ease, visibility .5s ease; }
.live-check {
    width: 58px; height: 58px; margin: 0 auto .75rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    background: linear-gradient(140deg, rgba(37,244,238,.18), rgba(254,44,85,.18));
    border: 1px solid rgba(255,255,255,.14);
    animation: floaty 4.5s ease-in-out infinite;
}
@keyframes floaty { 50% { transform: translateY(-7px); } }
.live-center h3 { font-family: var(--fd); font-size: .9rem; font-weight: 600; line-height: 1.4; color: #fff; }
.live-center p { font-size: .74rem; color: rgba(255,255,255,.6); margin-top: .35rem; }
.live-tags { display: flex; justify-content: center; gap: .35rem; flex-wrap: wrap; margin-top: .75rem; }
.live-tag { font-size: .62rem; font-weight: 600; color: var(--cyan); border: 1px solid rgba(37,244,238,.3); padding: .2rem .5rem; border-radius: 999px; background: rgba(0,0,0,.35); }

/* ---------- Zona inferior ---------- */
.live-bottom { position: relative; z-index: 3; display: flex; flex-direction: column; gap: .45rem; }

/* Banner de regalo con combo: flota sobre el vídeo, no empuja el chat */
.gift-banner {
    position: absolute; left: 0; bottom: 100%; margin-bottom: .4rem; z-index: 4;
    display: flex; align-items: center; gap: .5rem;
    background: linear-gradient(90deg, rgba(254,44,85,.95), rgba(254,44,85,.45) 82%, transparent);
    border-radius: 999px; padding: .3rem 1.4rem .3rem .3rem;
    transform: translateX(-120%); opacity: 0; pointer-events: none;
    transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .3s ease;
    max-width: 90%;
}
.gift-banner.show { transform: translateX(0); opacity: 1; }
.gift-avatar { width: 27px; height: 27px; border-radius: 50%; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; font-size: .88rem; border: 1.5px solid rgba(255,255,255,.5); flex-shrink: 0; }
.gift-info { line-height: 1.15; min-width: 0; display: flex; flex-direction: column; }
.gift-user { font-size: .65rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gift-name { font-size: .6rem; color: rgba(255,255,255,.85); white-space: nowrap; }
.gift-combo { font-family: var(--fd); font-weight: 700; font-size: 1rem; color: var(--gold); margin-left: .15rem; }
.gift-combo.pulse { animation: combopulse .3s ease; }
@keyframes combopulse { 45% { transform: scale(1.4) rotate(6deg); } }

/* Chat: filas con avatar, igual que en la app */
.live-chat { display: flex; flex-direction: column; gap: .35rem; min-height: 104px; justify-content: flex-end; padding-right: 6px; }
.chat-msg {
    display: flex; align-items: flex-start; gap: .4rem; max-width: 94%;
    animation: chatIn .45s cubic-bezier(.2,.9,.3,1.15) both; align-self: flex-start;
}
.chat-av { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background-size: cover; background-position: center; background-color: rgba(255,255,255,.12); margin-top: 1px; }
.chat-body {
    background: rgba(12,12,18,.5); backdrop-filter: blur(8px);
    border-radius: 11px; padding: .32rem .58rem;
    font-size: .69rem; line-height: 1.45; color: #fff; min-width: 0;
}
.chat-body b { display: block; color: rgba(255,255,255,.56); font-weight: 600; font-size: .64rem; }
.chat-msg.gift .chat-body { background: rgba(255,194,75,.18); }
.chat-msg.gift .chat-body span { color: var(--gold); font-weight: 600; }
@keyframes chatIn { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }

/* Barra de acciones inferior */
.live-bar { display: flex; align-items: center; gap: .4rem; margin-top: .15rem; }
.live-input {
    flex: 1; min-width: 0;
    font-size: .68rem; color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.10); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px; padding: .45rem .8rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-btn {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; color: #fff;
    background: rgba(255,255,255,.10); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.10);
    transition: transform .2s ease, background .2s ease;
}
.bar-btn svg { width: 16px; height: 16px; }
.bar-btn.heart { background: var(--red); border-color: transparent; box-shadow: 0 3px 14px rgba(254,44,85,.5); }
.bar-btn.pop { animation: railpop .45s ease; }
@keyframes railpop { 40% { transform: scale(1.3) rotate(-8deg); } }

/* Corazones flotantes que suben por la derecha */
.float-heart { position: absolute; z-index: 5; pointer-events: none; animation: heart var(--dur,2.6s) cubic-bezier(.3,.1,.4,1) forwards; font-size: var(--sz,1.1rem); }
@keyframes heart {
    0% { opacity: 0; transform: translate(0,0) scale(.5); }
    12% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx,-20px), -230px) scale(1.2) rotate(var(--rot,-14deg)); }
}
.live-caption { text-align: center; font-size: .78rem; color: var(--muted); margin-top: 1rem; position: relative; z-index: 3; }

/* ============ TICKER ============ */
.ticker { border-block: 1px solid var(--line); background: var(--elev-05); overflow: hidden; padding: .85rem 0; }
.ticker-track { display: flex; gap: 3rem; width: max-content; animation: ticker 30s linear infinite; }
.ticker span { display: inline-flex; align-items: center; gap: .6rem; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ticker span::before { content: '◆'; color: var(--red); font-size: .6rem; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ============ SECTIONS COMMON ============ */
section { padding: 88px 0; }
.section-head { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.section-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: .8rem; }
h2 { font-family: var(--fd); font-weight: 600; font-size: clamp(1.4rem, 3.4vw, 2.1rem); line-height: 1.25; }
.section-sub { color: var(--muted); margin-top: .9rem; font-size: .98rem; }

/* Importante: la animación de entrada solo se aplica si el JavaScript arrancó
   (el script en línea del <head> pone class="js"). Sin JavaScript —o si un
   rastreador no lo ejecuta— todo el contenido se ve con normalidad en vez de
   quedarse invisible con opacity:0. */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.in { opacity: 1; transform: none; }

/* ============ PRODUCTS ============ */
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }
.product-card {
    position: relative; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: 2rem 1.7rem 1.7rem;
    display: flex; flex-direction: column;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.product-card:hover { transform: translateY(-6px); border-color: var(--border-2); box-shadow: 0 24px 60px var(--shadow-lg); }
.product-card.featured { border-color: rgba(254,44,85,.5); background: linear-gradient(170deg, rgba(254,44,85,.08), var(--surface) 45%); box-shadow: 0 0 50px rgba(254,44,85,.12); }
.card-flag {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: .32rem .85rem; border-radius: 999px; white-space: nowrap;
}
.flag-hot { background: var(--red); color: #fff; box-shadow: 0 4px 18px rgba(254,44,85,.5); }
.flag-stock { background: var(--surface-2); color: var(--gold); border: 1px solid rgba(255,194,75,.4); }
.product-icon { width: 58px; height: 58px; border-radius: 15px; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1.2rem; overflow: hidden; }
.product-icon img { width: 100%; height: 100%; object-fit: cover; }
.product-name { font-family: var(--fd); font-weight: 600; font-size: 1.05rem; margin-bottom: .35rem; }
.product-tag { font-size: .8rem; color: var(--muted); margin-bottom: 1.2rem; }
.product-features { list-style: none; display: grid; gap: .55rem; margin-bottom: 1.6rem; flex-grow: 1; }
.product-features li { position: relative; padding-left: 1.5rem; font-size: .88rem; color: var(--muted); }
.product-features li::before { content: '✓'; position: absolute; left: 0; color: var(--cyan); font-weight: 700; }
.product-cta {
    font-family: var(--fb); font-weight: 700; font-size: .95rem;
    background: var(--elev-1); color: var(--text);
    border: 1px solid var(--line); border-radius: 999px; padding: .85rem;
    cursor: pointer; transition: background .2s ease, border-color .2s ease;
}
.product-cta:hover { background: var(--elev-2); border-color: var(--border-2); }
.featured .product-cta { background: var(--red); border-color: transparent; color: #fff; box-shadow: 0 6px 26px rgba(254,44,85,.4); }
.featured .product-cta:hover { box-shadow: 0 10px 34px rgba(254,44,85,.55); }
.products-note { text-align: center; color: var(--muted); font-size: .88rem; margin-top: 2rem; }
.products-note b { color: var(--text); }

/* ============ STEPS ============ */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; counter-reset: step; }
.step-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.8rem 1.6rem; position: relative; }
.step-num { font-family: var(--fd); font-size: .8rem; font-weight: 700; color: var(--red); letter-spacing: .1em; margin-bottom: .9rem; }
.step-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.step-card p { font-size: .88rem; color: var(--muted); }
.step-card p b { color: var(--text); }

/* ============ ACTIVAR LIVE ============ */
.live-access-intro { max-width: 800px; margin: 0 auto 2.4rem; text-align: center; color: var(--muted); font-size: .98rem; }
.live-access-intro strong { color: var(--text); }
.live-access-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; max-width: 920px; margin: 0 auto; }
.live-access-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.9rem 1.7rem; }
.live-access-card h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 1.1rem; }
.live-access-card ul { list-style: none; display: grid; gap: .65rem; }
.live-access-card li { position: relative; padding-left: 1.5rem; color: var(--muted); font-size: .9rem; }
.live-access-card li strong { color: var(--text); }
.la-slow li::before { content: '✕'; position: absolute; left: 0; color: var(--red); font-weight: 700; }
.la-fast { border-color: rgba(37,244,238,.4); background: linear-gradient(170deg, rgba(37,244,238,.07), var(--surface) 50%); }
.la-fast li::before { content: '✓'; position: absolute; left: 0; color: var(--cyan); font-weight: 700; }
.live-access-countries { max-width: 800px; margin: 2.4rem auto 0; text-align: center; color: var(--muted); font-size: .92rem; }
.live-access-countries strong { color: var(--text); }
.live-access-link { color: var(--cyan); text-underline-offset: 3px; }
.live-access-link:hover { color: var(--red); }

/* ============ RESULTS ============ */
.results-grid { display: grid; grid-template-columns: 1fr .8fr; gap: 3.5rem; align-items: center; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 2rem; }
.stat-item {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 1.15rem 1.25rem 1.2rem;
    transition: border-color .25s ease, transform .25s ease;
}
/* Filete de acento a la izquierda: distingue las tarjetas sin usar brillos */
.stat-item::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--cyan); opacity: .85;
}
.stat-item:nth-child(even)::before { background: var(--red); }
.stat-item:hover { border-color: var(--border-2); transform: translateY(-2px); }
.stat-number {
    font-family: var(--fd); font-weight: 700;
    font-size: clamp(1.35rem, 2.8vw, 1.8rem);
    line-height: 1.1; color: var(--text);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.stat-label { font-size: .78rem; color: var(--muted); margin-top: .45rem; line-height: 1.35; }
.results-text > p { color: var(--muted); font-size: .98rem; }

/* Las capturas ya traen el marco del telefono dibujado y fondo transparente:
   el contenedor respeta su proporcion real (399x482) y no recorta nada. */
.phone-slideshow {
    position: relative; width: min(399px, 100%); aspect-ratio: 399 / 482; margin: 0 auto;
    filter: drop-shadow(0 26px 50px var(--shadow-lg));
}
.phone-slideshow img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; object-position: center top;
    opacity: 0; transition: opacity .7s ease;
}
.phone-slideshow img.active { opacity: 1; }

/* ============ TESTIMONIALS (live chat style) ============ */
.testimonials-wrap { margin: 0; }
.testimonial-card {
    display: flex; flex-direction: column; gap: .9rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: 1.5rem 1.5rem 1.6rem;
    transition: border-color .25s ease, transform .25s ease;
}
.testimonial-card:hover { border-color: var(--border-2); transform: translateY(-4px); }
.testimonial-avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid rgba(37,244,238,.5); }
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-body { flex: 1; }
.testimonial-text { position: relative; }
.testimonial-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.testimonial-head h3 { font-size: .95rem; font-weight: 700; }
.testimonial-verified { font-size: .68rem; font-weight: 600; color: var(--cyan); border: 1px solid rgba(37,244,238,.35); padding: .12rem .5rem; border-radius: 999px; }
.testimonial-stars { font-size: .72rem; letter-spacing: 2px; margin-bottom: .35rem; }
.testimonial-text { font-size: .9rem; color: var(--muted); }

/* ============ GUARANTEE ============ */
.guarantee-band {
    display: grid; grid-template-columns: auto 1fr; gap: 2.2rem; align-items: center;
    background: linear-gradient(120deg, rgba(37,244,238,.09), rgba(254,44,85,.09));
    border: 1px solid var(--line); border-radius: 24px; padding: 2.4rem 2.6rem;
}
.guarantee-badge img { width: 130px; height: auto; }
.guarantee-band h2 { font-size: clamp(1.2rem, 2.6vw, 1.6rem); margin-bottom: .6rem; }
.guarantee-band p { color: var(--muted); font-size: .95rem; max-width: 46rem; }
.guarantee-features { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.guarantee-feature { display: flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 600; }
.guarantee-feature span:first-child { color: var(--cyan); }

/* ============ SUPPORT ============ */
.support-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem 1.5rem; transition: border-color .25s ease, transform .25s ease; }
.support-card:hover { border-color: var(--border-2); transform: translateY(-4px); }
.support-icon { font-size: 1.5rem; margin-bottom: .8rem; }
.support-card h3 { font-size: .98rem; font-weight: 700; margin-bottom: .45rem; }
.support-card p { font-size: .86rem; color: var(--muted); }
.support-foot { text-align: center; margin-top: 2.4rem; }
.support-foot p { color: var(--muted); font-size: .92rem; max-width: 40rem; margin: 0 auto 1.4rem; }
.support-foot b { color: var(--text); }

/* ============ FAQ (carrusel horizontal con anticipo de la respuesta) ============ */
.faq-container { margin: 0 auto; }
/* Tarjetas un poco más anchas que el resto del carrusel: las preguntas son largas */
.faq-container.hrow-track > * { flex: 0 0 clamp(280px, 32%, 380px); }
.faq-item {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-radius: 15px;
    overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-item:hover { border-color: var(--border-2); }
.faq-item.active { border-color: rgba(37,244,238,.45); box-shadow: 0 12px 34px var(--shadow-sm); }
.faq-question {
    display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem;
    flex: 1 1 auto;                 /* iguala la altura: las respuestas quedan alineadas abajo */
    width: 100%; text-align: left; background: none; border: 0; color: inherit;
    font-family: var(--fb); line-height: 1.45;
    padding: 1.15rem 1.25rem .9rem; cursor: pointer; font-weight: 600; font-size: .93rem;
}
.faq-toggle {
    font-size: 1.15rem; font-weight: 400; line-height: 1; color: var(--cyan);
    transition: transform .3s ease, color .3s ease; flex-shrink: 0;
    width: 22px; height: 22px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 50%; margin-top: .1rem;
}
.faq-item.active .faq-toggle { transform: rotate(45deg); color: var(--red); border-color: rgba(254,44,85,.4); }

/* Cerrada: se ve un anticipo de la respuesta con un degradado de corte.
   Abierta: el JS pone max-height con la altura real. */
.faq-answer { position: relative; max-height: 5.2em; overflow: hidden; transition: max-height .4s ease; }
.faq-answer::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.6em;
    background: linear-gradient(to top, var(--surface) 28%, transparent);
    pointer-events: none; opacity: 1; transition: opacity .3s ease;
}
.faq-item.active .faq-answer::after { opacity: 0; }
.faq-answer p { padding: 0 1.25rem 1.15rem; color: var(--muted); font-size: .87rem; line-height: 1.6; }

/* ============ FINAL CTA ============ */
.footer-cta { text-align: center; }
.footer-cta-inner {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: 28px;
    padding: 4rem 2rem;
}
.footer-cta-inner::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(500px 260px at 50% -20%, rgba(254,44,85,.22), transparent 70%);
}
.footer-cta h2 { margin-bottom: 1rem; }
.footer-cta p { color: var(--muted); max-width: 38rem; margin: 0 auto 2rem; font-size: .98rem; }
.footer-cta-trust { margin-top: 1.6rem; font-size: .85rem; color: var(--muted); display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap; }

/* ============ FOOTER ============ */
body > footer { border-top: 1px solid var(--line); padding: 2.6rem 0 5.5rem; text-align: center; }
body > footer p { font-size: .82rem; color: var(--muted); }
body > footer a { color: var(--muted); text-underline-offset: 3px; }
body > footer a:hover { color: var(--text); }
.footer-links { margin-top: .9rem; font-size: .82rem; display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; }

/* ============ PURCHASE MODAL ============ */
.purchase-modal-overlay {
    position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
    background: rgba(4,4,8,.8); backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden; transition: opacity .25s ease; padding: 20px;
}
.purchase-modal-overlay.active { opacity: 1; visibility: visible; }
.purchase-modal {
    position: relative; width: 100%; max-width: 430px;
    background: var(--surface-2); border: 1px solid var(--elev-3);
    border-radius: 24px; padding: 2.4rem 1.9rem 1.9rem; text-align: center;
    transform: translateY(16px) scale(.97); transition: transform .3s ease;
    box-shadow: 0 40px 100px var(--shadow-xl);
}
.purchase-modal-overlay.active .purchase-modal { transform: none; }
.purchase-modal-close {
    position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
    border-radius: 50%; border: 1px solid var(--line); background: var(--elev-1);
    color: var(--muted); cursor: pointer; font-size: .9rem;
}
.purchase-modal-close:hover { color: var(--text); }
.purchase-modal-icon { font-size: 2rem; display: block; margin-bottom: .6rem; }
.purchase-modal-title { font-family: var(--fd); font-size: 1.15rem; font-weight: 600; margin-bottom: .5rem; }
.purchase-modal-subtitle { font-size: .86rem; color: var(--muted); margin-bottom: 1.5rem; }
.purchase-modal-subtitle strong { color: var(--text); }
.purchase-options { display: grid; gap: .75rem; }
.purchase-option {
    display: flex; align-items: center; gap: .9rem; text-decoration: none;
    padding: .9rem 1.1rem; border-radius: 15px; border: 1px solid var(--line);
    background: var(--elev-05); transition: transform .2s ease, border-color .2s ease;
}
.purchase-option:hover { transform: translateY(-2px); }
.opt-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.opt-whatsapp .opt-icon { background: #25D366; }
.opt-whatsapp:hover { border-color: rgba(37,211,102,.5); }
.opt-telegram .opt-icon { background: #2AABEE; }
.opt-telegram:hover { border-color: rgba(42,171,238,.5); }
.opt-email .opt-icon { background: var(--red); }
.opt-email:hover { border-color: rgba(254,44,85,.5); }
.opt-text { text-align: left; flex: 1; min-width: 0; }
.opt-label { display: block; font-weight: 700; font-size: .92rem; }
.opt-desc { display: block; font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.opt-arrow { color: var(--muted); }
.purchase-modal-footer { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; font-size: .74rem; color: var(--muted); }

/* ============ FLOAT BUY ============ */
.buy-float {
    position: fixed; bottom: 18px; left: 50%; transform: translate(-50%, 90px); z-index: 900;
    font-family: var(--fb); font-weight: 700; font-size: .95rem;
    background: var(--red); color: #fff; border: none; cursor: pointer;
    padding: .9rem 1.9rem; border-radius: 999px;
    box-shadow: 0 10px 34px rgba(254,44,85,.5);
    transition: transform .35s ease;
}
.buy-float.show { transform: translate(-50%, 0); }

/* ============ RESPONSIVE ============ */
@media (max-width: 960px) {
    .hero-grid, .results-grid { grid-template-columns: 1fr; gap: 3rem; }
    .hero { padding-top: 120px; }
}
@media (max-width: 820px) {
    /* En móvil la tarjeta de live no aporta y encarece la carga: se oculta
       y el JS ni siquiera arranca la simulación ni descarga el vídeo. */
    .live-visual { display: none; }
    .hero { padding-top: 104px; }
    .hero-grid { gap: 0; }
    .main-nav { display: none; }
    .mobile-menu-btn { display: block; }
    section { padding: 66px 0; }
    .guarantee-band { grid-template-columns: 1fr; text-align: center; padding: 2.2rem 1.6rem; }
    .guarantee-badge { margin: 0 auto; }
    .guarantee-features { justify-content: center; }
}
/* ===== CTA con barrido de brillo ===== */
.cta-button, .nav-cta, .featured .product-cta { position: relative; overflow: hidden; }
.cta-button::after, .nav-cta::after, .featured .product-cta::after {
    content: ''; position: absolute; top: -40%; left: -80%; width: 45%; height: 200%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
    transform: rotate(18deg); transition: left .6s ease;
}
.cta-button:hover::after, .nav-cta:hover::after, .featured .product-cta:hover::after { left: 150%; }

/* ===== Spotlight en tarjetas (sigue al cursor) ===== */
.product-card, .step-card, .support-card, .live-access-card {
    --mx: 50%; --my: 50%;
}
@media (hover: hover) and (pointer: fine) {
    .product-card::before, .step-card::before, .support-card::before, .live-access-card::before {
        content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
        background: radial-gradient(340px circle at var(--mx) var(--my), var(--elev-1), transparent 65%);
        opacity: 0; transition: opacity .3s ease;
    }
    .product-card, .step-card, .support-card, .live-access-card { position: relative; }
    .product-card:hover::before, .step-card:hover::before, .support-card:hover::before, .live-access-card:hover::before { opacity: 1; }
}

/* ===== Entrada del hero ===== */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero-content > * { animation: rise .7s ease both; }
.hero-content > *:nth-child(1) { animation-delay: .05s; }
.hero-content > *:nth-child(2) { animation-delay: .14s; }
.hero-content > *:nth-child(3) { animation-delay: .24s; }
.hero-content > *:nth-child(4) { animation-delay: .34s; }
.hero-content > *:nth-child(5) { animation-delay: .44s; }
.live-visual { animation: rise .8s ease .25s both; }

/* ===== Ticker: pausa al pasar el mouse ===== */
.ticker:hover .ticker-track { animation-play-state: paused; }

/* ===== Stats: al terminar de contar se marca el filete de acento (sin brillos) ===== */
html.js .stat-item::before { transform: scaleY(.35); transform-origin: center; transition: transform .5s ease; }
.stat-item.counted::before { transform: scaleY(1); }

/* ===== Buy float con pulso ===== */
.buy-float.show { animation: floatpulse 2.6s ease-in-out infinite; }
@keyframes floatpulse { 50% { box-shadow: 0 10px 44px rgba(254,44,85,.75); } }

/* ===== Scrollbar personalizada ===== */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--red), var(--cyan)); border-radius: 8px; border: 3px solid var(--bg); }

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


/* ============ ACCESIBILIDAD Y ESTADOS AÑADIDOS ============ */
.skip-link {
    position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
    z-index: 2000; background: var(--red); color: #fff; font-weight: 600; font-size: .85rem;
    padding: .6rem 1.2rem; border-radius: 0 0 12px 12px; text-decoration: none;
    transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* Opción de idioma aún no disponible */
.lang-option.is-soon, .mobile-nav-link.is-soon {
    opacity: .45; cursor: default; pointer-events: none;
}
.lang-option.is-soon { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; font-size: .85rem; }
.lang-soon { margin-left: auto; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* ============ OFERTA ÚNICA: LIVE STUDIO + PAÍSES ============ */
.offer-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start;
    max-width: 1000px; margin: 0 auto;
}

/* --- Panel izquierdo: países y precios --- */
.countries-panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    padding: 1.9rem 1.7rem;
}
.countries-title { font-family: var(--fd); font-size: 1.1rem; margin-bottom: .35rem; }
.countries-sub { color: var(--muted); font-size: .85rem; line-height: 1.55; }

/* Cada país es un enlace a la tienda: el precio solo se muestra allí. */
.price-tiers { display: grid; gap: .7rem; margin: 1.4rem 0 1.6rem; }
.price-tier {
    display: flex; align-items: center; gap: .9rem;
    text-decoration: none; color: inherit;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 14px; padding: .95rem 1.1rem;
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.price-tier:hover { border-color: var(--border-2); transform: translateX(3px); }
.price-tier.tier-us { border-color: rgba(37,244,238,.35); background: linear-gradient(120deg, rgba(37,244,238,.08), var(--surface-2)); }
.price-tier.tier-us:hover { border-color: rgba(37,244,238,.6); }
.tier-flag { line-height: 1; flex-shrink: 0; display: flex; }
.tier-text { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.tier-name { font-weight: 600; font-size: .92rem; }
.tier-note { color: var(--muted); font-size: .76rem; }
.tier-go {
    margin-left: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .78rem; font-weight: 600; color: var(--cyan); white-space: nowrap;
}
.tier-go svg { width: 13px; height: 13px; transition: transform .2s ease; }
.price-tier:hover .tier-go svg { transform: translateX(3px); }
@media (max-width: 380px) {
    .tier-go span, .tier-go { font-size: 0; gap: 0; }
    .tier-go svg { width: 16px; height: 16px; }
}

.countries-label {
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .8rem;
}
.country-list {
    list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem .8rem; margin: 0 0 1.2rem;
}
.country-list li {
    display: flex; align-items: center; gap: .5rem;
    font-size: .84rem; color: var(--text); min-width: 0;
}
.country-list li span { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.countries-note { color: var(--muted); font-size: .78rem; line-height: 1.55; border-top: 1px solid var(--line); padding-top: 1rem; }

/* --- Tarjeta derecha --- */
.offer-card { height: auto; }
.offer-price { font-family: var(--fd); line-height: 1; margin: .2rem 0 1.2rem; }
.offer-price .offer-from { font-family: var(--fb); font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.offer-price b { font-size: 2.6rem; color: var(--text); }
.offer-price small { font-family: var(--fb); font-size: .8rem; font-weight: 600; color: var(--muted); }
.offer-note { color: var(--muted); font-size: .76rem; line-height: 1.5; margin-top: .9rem; text-align: center; }

@media (max-width: 900px) {
    .offer-grid { grid-template-columns: 1fr; max-width: 460px; }
    .countries-panel { padding: 1.5rem 1.3rem; }
}
@media (max-width: 380px) {
    .country-list { grid-template-columns: 1fr; }
}

/* ============ CAMBIO DE TEMA (claro / oscuro) ============ */
.logo-space img.logo-dark  { display: var(--logo-dark); }
.logo-space img.logo-light { display: var(--logo-light); }

.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0; cursor: pointer;
    background: transparent; border: 1px solid var(--line); border-radius: 50%;
    color: var(--muted);
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .35s ease;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-2); background: var(--elev-1); }
.theme-toggle svg { width: 17px; height: 17px; }
/* En tema oscuro se ve el sol (pulsa para ir al claro) y viceversa. */
.theme-toggle .i-sun  { display: var(--logo-dark); }
.theme-toggle .i-moon { display: var(--logo-light); }
.mobile-menu .theme-toggle { width: auto; height: auto; gap: .6rem; border-radius: 999px; padding: .55rem 1.1rem; font-family: var(--fb); font-size: 1rem; font-weight: 500; }

/* En modo claro el vídeo del hero y los degradados se suavizan */
:root[data-theme="light"] .bg-glow { opacity: .85; }

/* ============ VENTANA EMERGENTE DE PROMOCIÓN ============ */
.promo-overlay {
    position: fixed; inset: 0; z-index: 2000; display: none;
    align-items: center; justify-content: center; padding: 1.2rem;
    background: rgba(4,5,9,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .3s ease;
}
.promo-overlay.show { display: flex; opacity: 1; }
.promo-box {
    position: relative; width: 100%; max-width: 420px; text-align: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
    padding: 2.4rem 1.9rem 1.9rem; box-shadow: 0 30px 90px var(--shadow-xl);
    transform: translateY(14px) scale(.97); transition: transform .35s cubic-bezier(.2,.8,.3,1);
    overflow: hidden;
}
.promo-overlay.show .promo-box { transform: none; }
.promo-box::before {
    content: ''; position: absolute; inset: -1px -1px auto; height: 4px;
    background: linear-gradient(90deg, var(--red), var(--cyan));
}
.promo-close {
    position: absolute; top: .8rem; right: .9rem; width: 32px; height: 32px; cursor: pointer;
    background: var(--elev-1); border: 1px solid var(--line); border-radius: 50%;
    color: var(--muted); font-size: 1rem; line-height: 1; display: grid; place-items: center;
    transition: color .2s ease, background .2s ease;
}
.promo-close:hover { color: var(--text); background: var(--elev-2); }
.promo-badge {
    display: inline-block; font-family: var(--fd); font-weight: 700; line-height: 1;
    font-size: clamp(2.6rem, 11vw, 3.6rem);
    color: var(--red);
    margin-bottom: .4rem;
}
.promo-title { font-family: var(--fd); font-size: 1.25rem; line-height: 1.25; margin-bottom: .6rem; }
.promo-text { color: var(--muted); font-size: .92rem; line-height: 1.6; }
.promo-code-wrap { margin: 1.4rem 0 1.2rem; }
.promo-code-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.promo-code {
    display: inline-flex; align-items: center; gap: .7rem; cursor: pointer;
    font-family: var(--fd); font-weight: 700; font-size: 1.15rem; letter-spacing: .08em;
    color: var(--text); background: var(--surface-2);
    border: 1px dashed var(--border-2); border-radius: 12px; padding: .7rem 1.2rem;
    transition: border-color .2s ease, background .2s ease;
}
.promo-code:hover { border-color: var(--cyan); background: var(--elev-1); }
.promo-code small { font-family: var(--fb); font-size: .68rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.promo-cta { width: 100%; justify-content: center; text-decoration: none; display: inline-block; text-align: center; }
.promo-foot { margin-top: .9rem; font-size: .74rem; color: var(--muted); }
.promo-foot button { background: none; border: 0; color: inherit; font-family: var(--fb); font-size: inherit; cursor: pointer; text-decoration: underline; }

/* Cinta fija con la promo, por si cierran la ventana */
.promo-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: none;
    align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap;
    padding: .7rem 3rem .7rem 1rem; font-size: .84rem;
    background: linear-gradient(90deg, var(--red), #b8123c);
    color: #fff; text-align: center;
}
.promo-bar.show { display: flex; }
.promo-bar b { font-weight: 700; }
.promo-bar a { color: #fff; font-weight: 700; }
.promo-bar-close {
    position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; cursor: pointer; color: #fff; font-size: .9rem;
    background: rgba(255,255,255,.18); border: 0; border-radius: 50%; display: grid; place-items: center;
}
body.has-promo-bar .buy-float { bottom: 4.2rem; }

/* ============ CARRUSEL HORIZONTAL ============ */
/* Se usa en «Lo que dicen nuestros clientes» y «Problemas de Live que resolvemos». */
.hrow { position: relative; }
.hrow-track {
    display: flex; gap: 1.2rem; overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory; scroll-padding-inline: 2px;
    padding: .4rem 2px 1.2rem;
    /* La barra de desplazamiento se oculta: se navega con las flechas, el dedo o la rueda */
    scrollbar-width: none; -ms-overflow-style: none;
}
.hrow-track::-webkit-scrollbar { display: none; }
.hrow-track > * {
    flex: 0 0 clamp(268px, 31%, 360px);
    scroll-snap-align: start;
    min-width: 0;
}
.hrow-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 42px; height: 42px; display: none; place-items: center; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: 50%;
    color: var(--text); box-shadow: 0 8px 26px var(--shadow-md);
    transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.hrow-nav:hover { background: var(--elev-2); border-color: var(--border-2); }
.hrow-nav[disabled] { opacity: .3; cursor: default; }
.hrow-nav svg { width: 17px; height: 17px; }
.hrow-prev { left: -21px; }
.hrow-next { right: -21px; }
@media (max-width: 1220px) {
    .hrow-prev { left: -8px; }
    .hrow-next { right: -8px; }
}
@media (hover: hover) and (pointer: fine) {
    .hrow-nav { display: grid; }
}
/* Pista de progreso, útil sobre todo en móvil */
.hrow-dots { display: flex; justify-content: center; gap: .4rem; margin-top: .2rem; }
.hrow-dots i {
    width: 7px; height: 7px; border-radius: 50%; background: var(--elev-3);
    transition: background .25s ease, width .25s ease;
}
.hrow-dots i.on { width: 20px; border-radius: 999px; background: var(--red); }

@media (max-width: 620px) {
    .hrow-track { gap: .9rem; }
    .hrow-track > * { flex-basis: min(84%, 320px); }
}

/* ============ BANDERAS ============ */
.flag {
    display: inline-block; vertical-align: -.18em; flex-shrink: 0;
    border-radius: 3px; object-fit: cover;
    box-shadow: 0 0 0 1px var(--elev-3);
}
.tier-flag .flag { width: 30px; height: 23px; border-radius: 4px; }
.country-list li .flag { width: 22px; height: 17px; }
.variant-flag .flag { width: 30px; height: 23px; border-radius: 4px; }

/* Enlace «Mi cuenta» del encabezado */
.nav-account { display: inline-flex; align-items: center; gap: .4rem; }
.nav-account svg { width: 15px; height: 15px; }
@media (max-width: 1080px) {
    .nav-account span { display: none; }
    .nav-account { padding: .5rem .6rem; }
}

/* =====================================================================
   BANDA DE ASESOR (empresas, compras por cantidad, dudas)
   ===================================================================== */
.advisor-band {
    display: grid; grid-template-columns: 1.4fr auto; gap: 1.8rem; align-items: center;
    margin-top: 2.4rem; padding: 2rem 2.2rem;
    background: linear-gradient(130deg, color-mix(in srgb, var(--cyan) 8%, var(--surface)), var(--surface) 62%);
    border: 1px solid var(--line); border-radius: var(--r);
}
.advisor-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: .5rem; }
.advisor-text h3 { font-family: var(--fd); font-size: clamp(1.1rem, 2.4vw, 1.4rem); margin-bottom: .6rem; }
.advisor-text p { color: var(--muted); font-size: .92rem; line-height: 1.6; max-width: 44rem; }
.advisor-text p b { color: var(--text); font-weight: 600; }
.advisor-actions { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 820px) {
    .advisor-band { grid-template-columns: 1fr; padding: 1.7rem 1.4rem; }
    .advisor-actions { width: 100%; }
    .advisor-actions .cta-button { flex: 1; justify-content: center; }
}

/* =====================================================================
   EFECTOS Y MICROANIMACIONES
   ===================================================================== */

/* --- Barra de progreso de lectura --- */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 1200;
    transform: scaleX(0); transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--cyan), var(--red));
    pointer-events: none; will-change: transform;
}

/* --- Revelado escalonado: el JS pone --i en cada hijo --- */
html.js .reveal { transition-delay: calc(var(--i, 0) * 70ms); }

/* --- Los anclajes no quedan tapados por la cabecera fija --- */
:target, section[id], [id^="activar"], #faq, #productos, #como-comprar { scroll-margin-top: 96px; }

/* --- Tarjetas: se levantan un poco al pasar el ratón --- */
.step-card, .support-card, .live-access-card, .testimonial-card, .product-card {
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine) {
    .step-card:hover, .support-card:hover, .live-access-card:hover, .testimonial-card:hover {
        transform: translateY(-4px);
        border-color: var(--border-2);
        box-shadow: 0 18px 40px var(--shadow-sm);
    }
    .product-card.featured:hover { transform: translateY(-4px); box-shadow: 0 22px 52px var(--shadow-md); }
}

/* --- Numeración de los pasos con una línea que los une --- */
.step-card { overflow: hidden; }
.step-card::after {
    content: ''; position: absolute; left: 1.6rem; right: 1.6rem; top: 0; height: 2px;
    background: linear-gradient(90deg, var(--red), transparent);
    transform-origin: 0 50%;
    transition: transform .6s cubic-bezier(.2,.8,.3,1);
}
html.js .step-card::after { transform: scaleX(0); }
.step-card.in::after { transform: scaleX(1); }
.steps-grid .step-card:nth-child(2)::after { transition-delay: .12s; }
.steps-grid .step-card:nth-child(3)::after { transition-delay: .24s; }

/* --- Chips de países: entran escalonados y responden al ratón --- */
.country-list li { transition: color .2s ease, transform .2s ease; }
.country-list li:hover { color: var(--cyan); transform: translateX(3px); }

/* --- El eyebrow de sección dibuja su subrayado al aparecer --- */
.section-eyebrow { position: relative; display: inline-block; }
.section-eyebrow::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
    background: currentColor; opacity: .35;
    transform-origin: 0 50%;
    transition: transform .7s cubic-bezier(.2,.8,.3,1) .15s;
}
html.js .section-eyebrow::after { transform: scaleX(0); }
.reveal.in .section-eyebrow::after, .section-head.in .section-eyebrow::after { transform: scaleX(1); }

/* --- Botón de volver arriba --- */
.to-top {
    position: fixed; right: 20px; bottom: 20px; z-index: 900;
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    color: var(--text); background: var(--surface); border: 1px solid var(--line);
    box-shadow: 0 10px 30px var(--shadow-md); cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s, border-color .2s ease;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--border-2); transform: translateY(-2px); }
.to-top svg { width: 18px; height: 18px; }
@media (max-width: 820px) { .to-top { right: 14px; bottom: 14px; } }

/* --- Foco visible coherente en todo el sitio --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px;
}

/* --- Las insignias de confianza laten muy suavemente al entrar --- */
.trust-badge { transition: transform .25s ease, color .25s ease; }
@media (hover: hover) and (pointer: fine) {
    .trust-badge:hover { transform: translateY(-2px); color: var(--text); }
}

@media (prefers-reduced-motion: reduce) {
    html.js .reveal { transition-delay: 0ms !important; }
    .scroll-progress { display: none; }
}

/* Párrafo descriptivo del pie: contexto para el visitante y para los buscadores */
.footer-seo { max-width: 62rem; margin: 1.4rem auto 0; font-size: .8rem; line-height: 1.7; color: var(--muted); }
.footer-seo b { color: var(--text); font-weight: 600; }