/* ===================================================================
   PULSE Touch · Landing — Sistema de diseño (negro + azul neón)
   =================================================================== */
:root{
  --bg:#04050a; --bg2:#080a11; --bg3:#0d1018;
  --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.17);
  --text:#eef3fb; --muted:#94a0b4; --muted2:#7d89a0;
  --neon:#00d4ff; --neon2:#5fe9ff; --neon-deep:#0a7cff;
  --blue:#2d8cff; --mint:#7CFFB2; --gold:#ffb020;
  --grad:linear-gradient(115deg,#0a7cff 0%,#00c8ff 50%,#5fe9ff 115%);
  --glow-o:0 0 0 1px rgba(0,212,255,.45), 0 14px 44px -8px rgba(0,212,255,.6);
  --r:18px; --r-lg:28px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-bk:cubic-bezier(.34,1.56,.64,1);
  --maxw:1180px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.8);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:'Space Grotesk',sans-serif; line-height:1.05; letter-spacing:-.02em; font-weight:700}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit; cursor:pointer; color:inherit; border:none; background:none}
::selection{background:var(--neon); color:#04050a}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.container-narrow{max-width:780px}
.muted{color:var(--muted)}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- Logo ---------- */
.logo{display:inline-flex; align-items:center; font-family:'Archivo Black','Arial Black',system-ui,sans-serif; color:#fff; line-height:1; user-select:none; transition:filter .3s}
.logo-tx{font-size:1.5rem; letter-spacing:.01em}
.logo-e{display:inline-flex; flex-direction:column; justify-content:space-between; width:.6em; height:.72em; margin-left:.11em; font-size:1.5rem}
.logo-e i{height:.17em; width:100%; background:currentColor; border-radius:1px}
.brand:hover .logo{filter:drop-shadow(0 0 12px rgba(0,212,255,.7))}

/* ---------- FX globales ---------- */
.scroll-progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:200; background:var(--grad); box-shadow:0 0 18px rgba(0,212,255,.7)}
.cursor-glow{position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(0,212,255,.10), rgba(10,124,255,.06) 40%, transparent 65%); transition:opacity .4s; opacity:0; mix-blend-mode:screen}
.cursor-ring{position:fixed; top:0; left:0; width:40px; height:40px; margin:-20px 0 0 -20px; border:1.5px solid rgba(0,212,255,.55); border-radius:50%; pointer-events:none; z-index:300; opacity:0; mix-blend-mode:screen; transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background .25s,border-color .25s,opacity .3s}
.cursor-dot{position:fixed; top:0; left:0; width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--neon); border-radius:50%; pointer-events:none; z-index:301; opacity:0; box-shadow:0 0 10px var(--neon); transition:opacity .3s}
.cursor-ring.show,.cursor-dot.show{opacity:1}
.cursor-ring.hover{width:70px; height:70px; margin:-35px 0 0 -35px; background:rgba(0,212,255,.12); border-color:var(--neon)}
.cursor-ring.click{width:28px; height:28px; margin:-14px 0 0 -14px}
@media(pointer:coarse){.cursor-ring,.cursor-dot,.cursor-glow{display:none!important}}
.grain{position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.bg-aurora{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.bg-aurora span{position:absolute; border-radius:50%; opacity:.5; filter:blur(60px); will-change:transform; animation:floaty 18s var(--ease) infinite alternate}
.bg-aurora span:nth-child(1){width:60vw; height:60vw; top:-20%; left:-10%; background:radial-gradient(circle,rgba(10,124,255,.2),transparent 60%)}
.bg-aurora span:nth-child(2){width:55vw; height:55vw; top:30%; right:-15%; background:radial-gradient(circle,rgba(0,212,255,.16),transparent 60%); animation-delay:-6s}
.bg-aurora span:nth-child(3){width:40vw; height:40vw; bottom:-10%; left:25%; background:radial-gradient(circle,rgba(45,140,255,.12),transparent 60%); animation-delay:-12s}
.bg-aurora span:nth-child(4){width:46vw; height:46vw; top:46%; left:42%; background:radial-gradient(circle,rgba(0,212,255,.14),transparent 60%); animation-delay:-9s}
@keyframes floaty{to{transform:translate(6%,8%) scale(1.15)}}
@media(max-width:760px){.bg-aurora span{filter:blur(40px)}}
.bg-particles{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.55}

/* ---------- Loader ---------- */
html:not(.js) #loader{display:none}
.loader{position:fixed; inset:0; z-index:9999; background:radial-gradient(circle at 50% 42%,#0a1626,#04050a 72%); display:grid; place-items:center; animation:loaderOut .6s var(--ease) 1.2s forwards}
.loader.done{animation:loaderOut .7s var(--ease) forwards}
@keyframes loaderOut{to{opacity:0; visibility:hidden; pointer-events:none}}
.loader-core{display:flex; flex-direction:column; align-items:center; gap:20px}
.loader-eq{display:flex; align-items:flex-end; gap:5px; height:56px}
.loader-eq span{width:6px; border-radius:6px; background:var(--grad); height:20%; animation:ldeq 1s ease-in-out infinite; box-shadow:0 0 12px rgba(0,212,255,.6)}
.loader-eq span:nth-child(1){animation-delay:0s}.loader-eq span:nth-child(2){animation-delay:.1s}.loader-eq span:nth-child(3){animation-delay:.2s}.loader-eq span:nth-child(4){animation-delay:.3s}.loader-eq span:nth-child(5){animation-delay:.2s}.loader-eq span:nth-child(6){animation-delay:.1s}.loader-eq span:nth-child(7){animation-delay:0s}
@keyframes ldeq{0%,100%{height:16%}50%{height:100%}}
.loader-word .logo-tx,.loader-word .logo-e{font-size:2rem}
.loader-bar{width:170px; height:3px; border-radius:9px; background:rgba(255,255,255,.1); overflow:hidden}
.loader-bar i{display:block; height:100%; width:8%; background:var(--grad); border-radius:9px; box-shadow:0 0 12px var(--neon); animation:ldbar 2.3s var(--ease) forwards}
@keyframes ldbar{to{width:100%}}

/* ---------- Topbar ---------- */
.topbar{position:relative; z-index:90; background:var(--grad); color:#04121a; font-weight:700; font-size:.8rem; overflow:hidden; white-space:nowrap; padding:7px 0}
.topbar-track{display:inline-flex; gap:16px; align-items:center; animation:marq 28s linear infinite; padding-left:100%}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Nav ---------- */
.nav{position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 24px; backdrop-filter:blur(14px); background:rgba(4,5,10,.55); border-bottom:1px solid transparent; transition:.4s var(--ease)}
.nav.scrolled{background:rgba(4,5,10,.85); border-color:var(--line); padding:10px 24px}
.brand{display:flex; align-items:center; gap:10px}
.nav-links{display:flex; gap:26px}
.nav-links a{font-size:.92rem; color:var(--muted); font-weight:500; position:relative; transition:.25s}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--grad); transition:.3s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-actions{display:flex; align-items:center; gap:10px}
.sound-toggle{display:flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; font-size:.82rem; color:var(--muted); transition:.25s}
.sound-toggle:hover{border-color:var(--line2); color:var(--text)}
.sound-toggle.on{border-color:var(--neon); color:var(--neon); box-shadow:0 0 0 3px rgba(0,212,255,.12)}
.nav-buy{padding:10px 18px; font-size:.9rem}
@media(max-width:860px){.nav-links{display:none}.logo-tx,.logo-e{font-size:1.25rem}.sound-toggle .st-label{display:none}}

/* ---------- Botones ---------- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 22px; border-radius:999px; font-weight:600; font-size:.95rem; transition:transform .3s var(--ease), box-shadow .3s, background .3s; overflow:hidden; white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn-lg{padding:17px 30px; font-size:1.02rem}
.btn-primary{background:var(--grad); background-size:200% 100%; animation:gradShift 6s ease infinite; color:#04121a; box-shadow:var(--glow-o)}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.btn-primary:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 0 0 1px rgba(0,212,255,.5),0 18px 50px -8px rgba(0,212,255,.7)}
.btn-ghost{background:var(--panel); border:1px solid var(--line); color:var(--text)}
.btn-ghost:hover{background:var(--panel2); border-color:var(--line2); transform:translateY(-2px)}
.btn-outline{background:transparent; border:1px solid var(--line2); color:var(--text)}
.btn-outline:hover{border-color:var(--neon); color:var(--neon); box-shadow:0 0 0 3px rgba(0,212,255,.12)}
.btn-outline.on{background:var(--neon); border-color:var(--neon); color:#04121a}
.btn-shine{position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-20deg); animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-120%}80%,100%{left:160%}}

/* ---------- Reveal (visible por defecto; oculta SOLO con JS + failsafe) ---------- */
.reveal{transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease)}
html.js .reveal:not(.in){opacity:0; transform:translateY(44px) scale(.97); filter:blur(6px)}
.reveal.in{opacity:1; transform:none; filter:none}
.hero-in{opacity:1}
html.js .hero-in{animation:heroIn 1s var(--ease) both}
html.js .hero-head.hero-in{animation-delay:.35s}
html.js .hero-offer.hero-in{animation-delay:.55s}
html.js .hero-stage.hero-in{animation-delay:.25s}
@keyframes heroIn{from{transform:translateY(42px) scale(.985)}to{transform:none}}
@media(prefers-reduced-motion:reduce){html.js .reveal:not(.in),html.js .hero-in{opacity:1!important; transform:none!important; filter:none!important; animation:none!important}}

/* ===================================================================
   HERO
   =================================================================== */
.hero{position:relative; z-index:3; padding:60px 24px 40px; min-height:calc(100vh - 90px); display:flex; flex-direction:column; justify-content:center}
.hero-glow{position:absolute; top:10%; left:50%; transform:translateX(-50%); width:900px; height:600px; background:radial-gradient(circle,rgba(0,212,255,.15),transparent 60%); filter:blur(40px); pointer-events:none}
.hero-inner{position:relative; max-width:var(--maxw); margin:0 auto; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
.hero-copy{display:contents}
.eyebrow{display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border:1px solid var(--line); border-radius:999px; font-size:.82rem; color:var(--muted); background:var(--panel); margin-bottom:22px; font-weight:500}
.dot-pulse{width:8px; height:8px; border-radius:50%; background:var(--neon); box-shadow:0 0 0 0 rgba(0,212,255,.6); animation:dp 1.8s infinite}
@keyframes dp{0%{box-shadow:0 0 0 0 rgba(0,212,255,.6)}70%{box-shadow:0 0 0 10px rgba(0,212,255,0)}100%{box-shadow:0 0 0 0 rgba(0,212,255,0)}}
.hero-title{font-size:clamp(2.5rem,6vw,4.4rem); margin-bottom:20px}
.hero-title .grad-text{text-shadow:0 0 40px rgba(0,212,255,.35)}
.hero-title .ch,.hero-title .gw{display:inline-block; will-change:transform,opacity}
html.js .hero-title.split .ch,html.js .hero-title.split .gw{opacity:0; transform:translateY(.7em) rotateX(50deg); animation:chIn .6s var(--ease-bk) forwards}
@keyframes chIn{to{opacity:1; transform:none}}
.hero-sub{font-size:clamp(1rem,1.5vw,1.15rem); color:var(--muted); max-width:520px; margin-bottom:22px}
.hero-sub strong{color:var(--text)}
.hero-price{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.hero-price b{font-family:'Space Grotesk',sans-serif; font-size:2.3rem; line-height:1}
.hero-price span{color:var(--mint); font-weight:600; font-size:.95rem}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px}
.hero-trust{display:flex; flex-wrap:wrap; gap:14px 16px; list-style:none}
.hero-trust li{font-size:.84rem; color:var(--muted); font-weight:500}
.hero-head,.hero-offer{grid-column:1}
.hero-head{align-self:end} .hero-offer{align-self:start}
.hero-inner{row-gap:0}
.hero-stage{grid-column:2; grid-row:1 / span 2}
.hero-ribbon{position:absolute; left:0; right:0; bottom:0; height:96px; display:flex; align-items:flex-end; justify-content:center; gap:3px; padding:0 4%; pointer-events:none; opacity:.6; z-index:1; -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.hero-ribbon span{flex:1; max-width:9px; border-radius:6px 6px 0 0; background:linear-gradient(to top,var(--neon),rgba(0,212,255,0)); height:8%; transition:height .1s linear}
.scroll-down{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); width:26px; height:42px; border:2px solid var(--line2); border-radius:14px; display:grid; justify-items:center; padding-top:7px}
.scroll-down span{width:4px; height:8px; border-radius:9px; background:var(--neon); animation:scrolldn 1.6s var(--ease) infinite}
@keyframes scrolldn{0%{transform:translateY(0);opacity:1}100%{transform:translateY(14px);opacity:0}}
@media(max-width:900px){
  .hero{padding-top:36px; min-height:0}
  .hero-inner{grid-template-columns:1fr; gap:26px; text-align:center}
  .hero-head{order:1} .hero-stage{order:2; grid-row:auto; grid-column:1} .hero-offer{order:3}
  .hero-sub{margin-left:auto;margin-right:auto; font-size:.98rem; margin-bottom:14px} .hero-cta,.hero-trust,.hero-price{justify-content:center}
  .eyebrow{font-size:.74rem; padding:6px 12px; margin-bottom:16px} .hero-title{font-size:clamp(2.3rem,11vw,3.2rem); margin-bottom:14px}
  .scroll-down{display:none}
}

/* ---------- Marquee ---------- */
.marquee{position:relative; z-index:3; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg2); padding:18px 0}
.marquee-track{display:flex; gap:26px; align-items:center; white-space:nowrap; animation:marq2 34s linear infinite; font-family:'Space Grotesk',sans-serif; font-size:1.15rem; font-weight:600; color:var(--muted)}
.marquee-track i{color:var(--neon); font-style:normal}
.marquee-track span:hover{color:var(--text)}
@keyframes marq2{to{transform:translateX(-50%)}}

/* ===================================================================
   SECCIONES BASE
   =================================================================== */
.section{position:relative; z-index:3; padding:clamp(56px,8vw,96px) 0}
.section-dark{background:linear-gradient(180deg,transparent,rgba(0,0,0,.35) 12%,rgba(0,0,0,.35) 88%,transparent)}
.sec-head{max-width:760px; margin:0 auto 40px; text-align:center}
.kicker{display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--neon2); margin-bottom:16px}
.kicker::before,.kicker::after{content:""; display:inline-block; width:26px; height:1px; background:var(--neon); vertical-align:middle; box-shadow:0 0 8px var(--neon)}
.kicker::before{margin-right:10px}.kicker::after{margin-left:10px}
.sec-head h2{font-size:clamp(1.9rem,4.2vw,3.1rem)}
.sec-lead{margin-top:18px; color:var(--muted); font-size:1.05rem}

.prod-kicker{display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--neon2); margin-bottom:12px}
.prod-name{font-size:clamp(2.2rem,5vw,3.6rem); letter-spacing:-.02em}
.prod-name b{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.prod-copy .prod-kicker{margin-bottom:8px}
.prod-copy .prod-name{font-size:clamp(1.9rem,3.6vw,2.8rem); margin-bottom:10px}
.prod-lead{color:var(--muted); font-size:1.02rem; margin-bottom:14px}
.prod-lead strong{color:var(--text)}
.prod-feats{list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:22px}
.prod-feats li{position:relative; padding-left:26px; color:var(--muted); font-size:.97rem}
.prod-feats li::before{content:"✦"; position:absolute; left:2px; color:var(--neon)}
.prod-feats b{color:var(--text)}
.prod-demo-cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:26px}
.pd-hint{font-size:.82rem; color:var(--muted2)}
.prod-buy{display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--line)}
.pb-price b{display:block; font-family:'Space Grotesk',sans-serif; font-size:2rem; font-weight:700; line-height:1}
.pb-price small{color:var(--mint); font-size:.84rem}
@keyframes radar{0%{transform:scale(.4); opacity:.9}100%{transform:scale(3.2); opacity:0}}
@keyframes shake{0%,100%{transform:translateX(-1.5px) rotate(-.6deg)}50%{transform:translateX(1.5px) rotate(.6deg)}}

/* ===================================================================
   STATS / GARANTÍAS / REVIEWS / FAQ / CTA / FOOTER
   =================================================================== */
.stats{position:relative; z-index:3; padding:50px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg2)}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center}
@media(max-width:680px){.stats-grid{grid-template-columns:repeat(2,1fr); gap:34px}}
.stat b{font-family:'Space Grotesk',sans-serif; font-size:clamp(2.4rem,6vw,3.6rem); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; filter:drop-shadow(0 0 22px rgba(0,212,255,.4))}
.stat span{display:block; margin-top:8px; color:var(--muted); font-size:.92rem}

.guarantees{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media(max-width:900px){.guarantees{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.guarantees{grid-template-columns:1fr}}
.guar{padding:28px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); text-align:center; transition:.4s var(--ease)}
.guar:hover{transform:translateY(-5px); border-color:var(--neon); background:rgba(0,212,255,.05); box-shadow:0 24px 60px -28px rgba(0,0,0,.85),0 0 40px -10px rgba(0,212,255,.35)}
.guar-ic{font-size:2rem; margin-bottom:14px}
.guar h3{font-size:1.05rem; margin-bottom:8px}
.guar p{color:var(--muted); font-size:.9rem}

/* ---------- Sistema de reseñas ---------- */
.rv-wrap{display:grid; grid-template-columns:300px 1fr; gap:26px; align-items:start}
@media(max-width:860px){.rv-wrap{grid-template-columns:1fr}}
.rv-summary{position:sticky; top:96px; padding:26px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel)}
@media(max-width:860px){.rv-summary{position:static}}
.rvs-score{text-align:center; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:18px}
.rvs-score b{display:block; font-family:'Space Grotesk',sans-serif; font-size:3.2rem; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.rvs-score .stars{display:block; color:var(--gold); font-size:1.15rem; letter-spacing:3px; margin:8px 0 4px}
.rvs-score small{color:var(--muted); font-size:.86rem}
.rvs-bars{display:flex; flex-direction:column; gap:8px}
.rvb{display:grid; grid-template-columns:34px 1fr 30px; align-items:center; gap:10px; font-size:.8rem; color:var(--muted)}
.rvb-track{height:7px; border-radius:9px; background:rgba(255,255,255,.08); overflow:hidden}
.rvb-fill{height:100%; border-radius:9px; background:linear-gradient(90deg,#ffb020,#ffcf60); width:0; transition:width 1s var(--ease)}
.rvs-note{margin-top:18px; font-size:.78rem; color:var(--muted2); text-align:center}
.rvs-photo{margin-top:18px; border-radius:14px; overflow:hidden; border:1px solid var(--line)}
.rvs-photo img{width:100%; aspect-ratio:1; object-fit:cover}
.rvs-photo figcaption{padding:8px 10px; font-size:.74rem; color:var(--muted2); text-align:center; background:var(--panel)}
.reviews{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:640px){.reviews{grid-template-columns:1fr}}
.review{padding:20px 22px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); transition:.35s var(--ease); animation:rvIn .4s var(--ease)}
@keyframes rvIn{from{opacity:0; transform:translateY(14px)}}
.review:hover{border-color:var(--line2); box-shadow:0 16px 44px -22px rgba(0,0,0,.8),0 0 0 1px rgba(0,212,255,.18)}
.rv-head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.rv-av{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:.9rem; flex-shrink:0}
.rv-who{flex:1; min-width:0}
.rv-who b{display:block; font-size:.88rem}
.rv-who small{color:var(--muted2); font-size:.72rem}
.rv-prod{padding:3px 10px; border-radius:999px; border:1px solid rgba(0,212,255,.3); background:rgba(0,212,255,.08); color:var(--neon2); font-size:.68rem; font-weight:700; white-space:nowrap}
.rv-stars{color:var(--gold); letter-spacing:2px; font-size:.85rem; margin-bottom:8px}
.rv-stars .off{color:rgba(255,255,255,.18)}
.review p{font-size:.92rem; color:var(--text)}
.rv-photo{margin-top:12px; border-radius:12px; max-height:150px; width:auto; border:1px solid var(--line)}
.rv-reply{margin-top:12px; padding:12px 14px; border-left:2px solid var(--neon); border-radius:0 12px 12px 0; background:rgba(0,212,255,.06)}
.rv-reply b{display:block; font-size:.76rem; color:var(--neon2); margin-bottom:4px}
.rv-reply p{font-size:.84rem; color:var(--muted)}
.rv-foot{display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:1px solid var(--line)}
.rv-verified{font-size:.72rem; color:var(--mint)}
.rv-helpful{font-size:.76rem; color:var(--muted2); background:none; transition:.2s}
.rv-helpful:hover{color:var(--neon2)}
.rv-helpful.voted{color:var(--neon)}

.faq{display:flex; flex-direction:column; gap:12px}
.faq-i{border:1px solid var(--line); border-radius:var(--r); background:var(--panel); overflow:hidden; transition:.3s}
.faq-i[open]{border-color:var(--line2); background:var(--panel2)}
.faq-i summary{list-style:none; cursor:pointer; padding:20px 24px; font-weight:600; font-size:1.02rem; display:flex; align-items:center; justify-content:space-between; gap:16px}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary i{position:relative; width:18px; height:18px; flex-shrink:0}
.faq-i summary i::before,.faq-i summary i::after{content:""; position:absolute; background:var(--neon); border-radius:9px; transition:.3s var(--ease)}
.faq-i summary i::before{top:8px; left:0; width:18px; height:2px}
.faq-i summary i::after{top:0; left:8px; width:2px; height:18px}
.faq-i[open] summary i::after{transform:rotate(90deg); opacity:0}
.faq-a{padding:0 24px 22px; color:var(--muted); font-size:.96rem; animation:faqIn .4s var(--ease)}
.faq-a strong{color:var(--text)}
@keyframes faqIn{from{opacity:0; transform:translateY(-8px)}to{opacity:1}}

.final-cta{position:relative; z-index:3; padding:clamp(80px,12vw,140px) 24px; text-align:center; overflow:hidden}
.final-cta::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 40%,rgba(0,212,255,.14),transparent 60%)}
.final-inner{position:relative}
.final-inner h2{font-size:clamp(2.2rem,6vw,4rem); margin-bottom:18px}
.final-inner p{color:var(--muted); font-size:1.1rem; max-width:520px; margin:0 auto 30px}
.fc-mini{display:block; margin-top:18px; font-size:.84rem; color:var(--muted)}

.footer{position:relative; z-index:3; border-top:1px solid var(--line); background:var(--bg2); padding:60px 0 0}
.footer-inner{display:grid; grid-template-columns:1.4fr 2fr; gap:40px; padding-bottom:40px}
.footer-brand p{color:var(--muted); font-size:.92rem; max-width:340px; margin-top:16px}
.footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.footer-cols h3{font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted2); margin-bottom:14px}
.footer-cols a{display:block; color:var(--muted); font-size:.92rem; padding:5px 0; transition:.2s}
.footer-cols a:hover{color:var(--neon2); transform:translateX(3px)}
.footer-bottom{border-top:1px solid var(--line); padding:22px 24px calc(22px + 70px); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; max-width:var(--maxw); margin:0 auto; font-size:.82rem; color:var(--muted2)}
@media(max-width:760px){.footer-inner{grid-template-columns:1fr; gap:30px}}

/* toast ARRIBA (bajo la nav): siempre visible sin scrollear */
.toast{position:fixed; top:74px; left:50%; transform:translate(-50%,-300%); z-index:300; padding:14px 24px; border-radius:999px; background:var(--grad); color:#04121a; font-weight:700; font-size:.92rem; box-shadow:0 14px 40px -8px rgba(0,212,255,.6); transition:transform .5s var(--ease-bk); display:flex; align-items:center; gap:8px; max-width:92vw}
.toast.show{transform:translate(-50%,0)}

/* beat global cuando suena */
body.beat .brand .logo,body.beat .hero-glow{animation:beatPulse .25s var(--ease)}
@keyframes beatPulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ===================================================================
   ESTUCHE 3D (CSS puro) · PANTALLA · SCROLLY · BENEFICIOS · FOTOS · OFERTA
   =================================================================== */
/* --- escenario --- */
.stage{position:relative; display:grid; place-items:center; padding:34px 0 54px; perspective:1100px}
.stage-aura{position:absolute; width:min(520px,100%); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(0,212,255,.16),transparent 62%); filter:blur(34px); animation:pulseAura 5s var(--ease) infinite alternate; pointer-events:none}
@keyframes pulseAura{to{transform:scale(1.08); opacity:.75}}
.stage-shadow{position:absolute; bottom:10%; width:70%; height:12%; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.75),transparent 70%); filter:blur(10px); pointer-events:none}

/* --- estuche: cara frontal + extrusión por box-shadow (sigue el tilt vía --ex/--ey) --- */
.case3d{
  --cw:min(360px,78vw); --ch:calc(var(--cw)*.96); --seam:35%;
  --rx:-8deg; --ry:-14deg;
  --ex:calc(var(--cw)*.00424); --ey:calc(var(--cw)*-.00244);   /* CALIBRAR: pasos de extrusión (EXT_STEPS=24 en app.js) */
  --f1:#363941; --f2:#1c1f25; --f3:#0f1014; --side1:#23262d; --side:#14161b; --side2:#0a0b0e; --rim:rgba(255,255,255,.2); --logo:rgba(255,255,255,.07);
  position:relative; width:var(--cw); height:var(--ch); z-index:2;
  transform:rotateX(var(--rx)) rotateY(var(--ry)); transform-style:flat;
  transition:transform .6s var(--ease); will-change:transform; outline:none; cursor:grab; user-select:none; -webkit-user-select:none; touch-action:pan-y}
.case3d:active{cursor:grabbing}
.case3d.gyro{transition:none}
.case3d.plata{--f1:#f3f5f8; --f2:#c6ccd6; --f3:#98a1b0; --side1:#d4d9e1; --side:#9aa3b2; --side2:#6a7282; --rim:rgba(255,255,255,.9); --logo:rgba(0,0,0,.14)}
.case-body{position:absolute; inset:0; border-radius:calc(var(--cw)*.22);
  background:radial-gradient(80% 50% at 28% 4%, rgba(255,255,255,.10), transparent 60%), radial-gradient(60% 40% at 80% 100%, rgba(0,0,0,.25), transparent 70%), linear-gradient(155deg,var(--f1) 0%,var(--f2) 46%,var(--f3) 100%);
  box-shadow:
    inset 0 1px 0 var(--rim), inset 0 -1px 0 rgba(0,0,0,.6), inset 1px 0 0 rgba(255,255,255,.05),
    inset 0 0 calc(var(--cw)*.09) rgba(0,0,0,.42), inset calc(var(--cw)*.012) calc(var(--cw)*.014) calc(var(--cw)*.04) rgba(255,255,255,.07),
    calc(var(--ex)*1) calc(var(--ey)*1) 0 var(--side1), calc(var(--ex)*2) calc(var(--ey)*2) 0 var(--side1),
    calc(var(--ex)*3) calc(var(--ey)*3) 0 var(--side), calc(var(--ex)*4) calc(var(--ey)*4) 0 var(--side),
    calc(var(--ex)*5) calc(var(--ey)*5) 0 var(--side), calc(var(--ex)*6) calc(var(--ey)*6) 0 var(--side),
    calc(var(--ex)*7) calc(var(--ey)*7) 0 var(--side), calc(var(--ex)*8) calc(var(--ey)*8) 0 var(--side),
    calc(var(--ex)*9) calc(var(--ey)*9) 0 var(--side), calc(var(--ex)*10) calc(var(--ey)*10) 0 var(--side),
    calc(var(--ex)*11) calc(var(--ey)*11) 0 var(--side), calc(var(--ex)*12) calc(var(--ey)*12) 0 var(--side),
    calc(var(--ex)*13) calc(var(--ey)*13) 0 var(--side), calc(var(--ex)*14) calc(var(--ey)*14) 0 var(--side),
    calc(var(--ex)*15) calc(var(--ey)*15) 0 var(--side), calc(var(--ex)*16) calc(var(--ey)*16) 0 var(--side),
    calc(var(--ex)*17) calc(var(--ey)*17) 0 var(--side), calc(var(--ex)*18) calc(var(--ey)*18) 0 var(--side),
    calc(var(--ex)*19) calc(var(--ey)*19) 0 var(--side), calc(var(--ex)*20) calc(var(--ey)*20) 0 var(--side),
    calc(var(--ex)*21) calc(var(--ey)*21) 0 var(--side2), calc(var(--ex)*22) calc(var(--ey)*22) 0 var(--side2),
    calc(var(--ex)*23) calc(var(--ey)*23) 0 var(--side2), calc(var(--ex)*24) calc(var(--ey)*24) 0 var(--side2),
    calc(var(--ex)*24) calc(var(--ey)*24 + 46px) 70px -14px rgba(0,0,0,.8),
    0 0 90px -30px rgba(0,212,255,.35)}
.case-body::after{content:""; position:absolute; left:18%; right:18%; top:calc(var(--seam) + 6% + 46%); height:22%; border-radius:50%; background:radial-gradient(ellipse at 50% 0%, rgba(69,179,255,.22), transparent 70%); pointer-events:none; filter:blur(6px)}
.case-body{animation:caseFloat 7s ease-in-out infinite}
@keyframes caseFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.case-lid{position:absolute; left:0; right:0; top:0; height:var(--seam); border-radius:calc(var(--cw)*.22) calc(var(--cw)*.22) calc(var(--cw)*.02) calc(var(--cw)*.02); pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 38%,rgba(0,0,0,0) 70%,rgba(0,0,0,.22) 100%);
  box-shadow:inset 0 calc(var(--cw)*-.012) calc(var(--cw)*.02) rgba(0,0,0,.25)}
.case-hinge{position:absolute; left:1.5%; right:1.5%; top:calc(var(--seam) - 1px); height:3px; border-radius:2px; background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.95)); box-shadow:0 1px 0 rgba(255,255,255,.10), 0 2px 4px rgba(0,0,0,.35); pointer-events:none}
.case-hinge::before{content:""; position:absolute; left:3%; right:3%; top:-1px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 30%,rgba(255,255,255,.06) 70%,transparent)}
.case-glare{position:absolute; inset:0; border-radius:calc(var(--cw)*.21); background:linear-gradient(118deg,transparent calc(34% + var(--gl,0%)),rgba(255,255,255,.07) calc(46% + var(--gl,0%)),transparent calc(58% + var(--gl,0%))); pointer-events:none; transition:background .25s}
.case3d.plata .case-glare{background:linear-gradient(118deg,transparent calc(34% + var(--gl,0%)),rgba(255,255,255,.35) calc(46% + var(--gl,0%)),transparent calc(58% + var(--gl,0%)))}
@media(min-width:900px){.case-body::before{content:""; position:absolute; inset:0; border-radius:inherit; opacity:.12; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}}

/* --- pantalla --- */
.screen{position:absolute; left:50%; top:calc(var(--seam) + 6%); width:73%; aspect-ratio:1.62; transform:translateX(-50%);
  background:#050607; border-radius:calc(var(--cw)*.055); overflow:hidden; overflow:clip; touch-action:pan-y; user-select:none; cursor:grab;
  box-shadow:inset 0 0 0 calc(var(--cw)*.012) #0b0c0f, inset 0 calc(var(--cw)*.016) calc(var(--cw)*.024) rgba(0,0,0,.95), inset 0 calc(var(--cw)*-.004) calc(var(--cw)*.01) rgba(255,255,255,.05), 0 1px 0 rgba(255,255,255,.09), 0 0 0 1px rgba(0,0,0,.6), 0 0 26px -8px rgba(69,179,255,.3);
  --scr-fg:#45b3ff; --scr-dim:rgba(69,179,255,.32); --scr-btn:#0c2748; --scr-on:#1f8fff; --scr-purple:#b04cff; --scr-pink:#ff5aa8;
  font-family:'Inter',system-ui,sans-serif; font-size:calc(var(--cw)*.036); color:var(--scr-fg); line-height:1.2}
.screen:active{cursor:grabbing}
.scr-lcd{position:absolute; inset:6% 5%; border-radius:calc(var(--cw)*.02); overflow:hidden; overflow:clip; background:#000}
.scr-status{position:absolute; top:.2em; left:.45em; right:.45em; display:flex; align-items:center; gap:.45em; font-size:.66em; font-weight:600; z-index:2; pointer-events:none}
.scr-status .ic{width:1.05em; height:1.05em; stroke-width:2.2}
.scr-status span{display:inline-flex; align-items:center; gap:.22em}
.scr-status span i{width:1.15em; height:1.15em; border-radius:50%; background:var(--scr-fg); color:#000; font-style:normal; font-size:.72em; display:grid; place-items:center; font-weight:800; line-height:1}
.scr-time{margin-left:auto}
.scr-track{position:absolute; inset:0; display:flex; transform:translateX(calc(var(--p,0) * -100%)); transition:transform .34s var(--ease); will-change:transform}
.scr-track.dragging{transition:none}
.scr-page{flex:0 0 100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25em; padding:1.3em .5em .8em}
.sp-title{align-self:stretch; display:flex; align-items:center; justify-content:space-between; padding:0 .45em; font-size:1em; font-weight:600; min-height:1.15em; margin-top:-.15em}
.sp-title-empty{min-height:0; margin:0}
.sp-icons{display:flex; align-items:center; justify-content:center; gap:.75em}
.sp-ico{width:2.9em; height:2.9em; border-radius:50%; background:var(--scr-btn); color:var(--scr-fg); display:grid; place-items:center; transition:transform .18s var(--ease-bk), background .2s, color .2s}
.sp-ico .ic{width:1.4em; height:1.4em; stroke-width:2}
.sp-ico b{font-size:.84em; font-weight:700; letter-spacing:.01em}
.sp-ico.on{background:var(--scr-on); color:#fff}
.sp-ico.purple{color:var(--scr-purple)} .sp-ico.purple.on{background:var(--scr-purple); color:#fff}
.sp-ico.tap,.sp-arr.tap,.sp-single.tap,.sp-bud.tap{transform:scale(.86)}
.sp-stepper{display:flex; align-items:center; justify-content:center; gap:.65em}
.sp-arr{width:2.3em; height:2.3em; border-radius:50%; background:var(--scr-btn); color:var(--scr-fg); display:grid; place-items:center; transition:transform .18s var(--ease-bk)}
.sp-arr .ic{width:1.15em; height:1.15em}
.sp-val{min-width:4.6em; text-align:center; font-size:1.18em; font-weight:500}
.sp-val-sm{min-width:2.6em; text-align:left}
.sp-meter{display:inline-flex; gap:.13em; align-items:flex-end; height:.8em}
.sp-meter i{width:.3em; background:var(--scr-dim); border-radius:1px; height:.35em}
.sp-meter i:nth-child(2){height:.5em} .sp-meter i:nth-child(3){height:.65em} .sp-meter i:nth-child(4){height:.8em}
.sp-meter[data-level="0"] i:nth-child(-n+1),.sp-meter[data-level="1"] i:nth-child(-n+2),.sp-meter[data-level="2"] i:nth-child(-n+3),.sp-meter[data-level="3"] i:nth-child(-n+4){background:var(--scr-fg)}
.sp-thumb{width:2.8em; height:1.6em; border:2px solid var(--scr-fg); border-radius:.16em; background:#000}
.sp-thumb.w1{background:linear-gradient(135deg,#0a2a5a,#000)} .sp-thumb.w2{background:radial-gradient(circle at 30% 30%,#3a0a5a,#000)} .sp-thumb.w3{background:linear-gradient(135deg,#0a4a3a,#000)}
.sp-toggle{width:1.9em; height:1.05em; border-radius:1em; background:var(--scr-dim); position:relative; transition:background .2s; flex-shrink:0}
.sp-toggle::after{content:""; position:absolute; top:.12em; left:.12em; width:.81em; height:.81em; border-radius:50%; background:#fff; transition:transform .2s var(--ease)}
.sp-toggle.on{background:var(--scr-on)} .sp-toggle.on::after{transform:translateX(.85em)}
.sp-pill{background:var(--scr-pink); color:#fff; border-radius:999px; padding:.14em .85em; font-size:.66em; font-weight:700; margin-top:.15em; transition:transform .15s, filter .15s}
.sp-pill.flash{filter:brightness(1.5); transform:scale(1.08)}
.sp-clockwrap{display:flex; flex-direction:column; align-items:center; gap:.08em}
.sp-date{font-size:.78em}
.sp-clock{font-size:1.55em; font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:.06em; font-variant-numeric:tabular-nums; line-height:1.1}
.sp-find{display:flex; gap:.85em}
.sp-bud{width:3.7em; height:1.4em; border-radius:999px; background:var(--scr-btn); color:var(--scr-fg); font-weight:700; font-size:.95em; transition:transform .18s var(--ease-bk), background .2s}
.sp-bud.ring{animation:shake .18s linear infinite; background:var(--scr-on); color:#fff}
.sp-singlewrap{display:flex; flex-direction:column; align-items:center; gap:.2em}
.sp-single{width:3em; height:3em; border-radius:50%; display:grid; place-items:center; color:var(--scr-fg); transition:transform .18s var(--ease-bk), color .2s}
.sp-single .ic{width:2.4em; height:2.4em; stroke-width:1.7}
.sp-single.purple{color:var(--scr-purple)}
.sp-single.on{color:#fff; filter:drop-shadow(0 0 .4em #fff)}
.sp-wave{display:flex; gap:.16em; align-items:center; height:1em; opacity:0; transition:opacity .2s}
.sp-wave i{width:.22em; height:.3em; background:var(--scr-fg); border-radius:1px}
.sp-wave.on{opacity:1} .sp-wave.on i{animation:ldeq .5s ease-in-out infinite}
.sp-wave.on i:nth-child(2){animation-delay:.1s} .sp-wave.on i:nth-child(3){animation-delay:.2s} .sp-wave.on i:nth-child(4){animation-delay:.1s}
.sp-num{font-family:'Space Grotesk',sans-serif; font-size:1.55em; min-width:2em; text-align:center; font-weight:600; line-height:1}
.sp-batt{display:flex; gap:1.3em}
.sp-batt span{display:flex; flex-direction:column; align-items:center; gap:.05em}
.sp-batt small{font-size:.64em; opacity:.8} .sp-batt b{font-size:1.15em}
.scr-dots{position:absolute; bottom:.12em; left:0; right:0; display:flex; justify-content:center; gap:.1em; z-index:2}
.scr-dot{width:.64em; height:.8em; display:grid; place-items:center; padding:0; cursor:pointer}
.scr-dot::before{content:""; width:3px; height:3px; border-radius:50%; background:var(--scr-dim); transition:.2s}
.scr-dot.on::before{background:var(--scr-fg); box-shadow:0 0 4px var(--scr-fg)}
.scr-glare{position:absolute; inset:0; background:linear-gradient(160deg,rgba(255,255,255,.08),transparent 42%); pointer-events:none; border-radius:inherit}
.scr-flash{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; transition:opacity .12s}
.screen.flash .scr-flash{opacity:.95}
.screen.torch .scr-flash{opacity:.94; transition:opacity .25s}
.screen.torch{box-shadow:inset 0 0 0 calc(var(--cw)*.012) #0a0b0d, 0 0 0 1px rgba(255,255,255,.3), 0 0 80px 24px rgba(255,255,255,.32)}

/* --- flechas (desktop), hint y botón 3D --- */
.case-arrows{position:absolute; inset:0; pointer-events:none; z-index:3}
.case-arrow{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.07); border:1px solid var(--line2); color:#fff; display:grid; place-items:center; opacity:0; transition:.25s; backdrop-filter:blur(6px); z-index:3; pointer-events:auto}
.case-arrow .ic{width:18px; height:18px}
.case-arrow.prev{left:0} .case-arrow.next{right:0}
.stage:hover .case-arrow,.case3d:focus-visible ~ .case-arrows .case-arrow,.case3d.show-arrows ~ .case-arrows .case-arrow,.case-arrows:focus-within .case-arrow{opacity:1}
.case-arrow:hover{background:var(--neon); color:#04121a; border-color:var(--neon)}
@media(pointer:coarse){.case-arrow{display:none}}
.case-hint{position:absolute; bottom:8px; left:0; right:0; text-align:center; font-size:.8rem; color:var(--muted2); display:flex; align-items:center; justify-content:center; gap:10px; transition:opacity .4s; pointer-events:none}
.case-hint.hide{opacity:0}
.case-hint i{display:inline-block; width:34px; height:2px; background:var(--line2); border-radius:2px; position:relative; overflow:visible}
.case-hint i::after{content:""; position:absolute; top:-4px; left:0; width:10px; height:10px; border-radius:50%; background:var(--neon); box-shadow:0 0 10px var(--neon); animation:swipeHint 1.6s var(--ease) infinite}
@keyframes swipeHint{0%,100%{transform:translateX(0)}50%{transform:translateX(24px)}}
.gyro-btn{position:absolute; top:0; right:0; padding:8px 14px; border:1px solid var(--line2); border-radius:999px; font-size:.78rem; color:var(--text); background:var(--panel); z-index:3}
.gyro-btn[hidden]{display:none}

/* --- scrollytelling --- */
.scrolly-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:start}
.scrolly-stage{position:sticky; top:calc(84px + 2vh); height:calc(100svh - 120px); min-height:420px; padding:0}
.scrolly-stage .case3d{--cw:min(320px,28vw)}
.chapters{display:flex; flex-direction:column; gap:18px; padding:0 0 6vh}
.chapter{min-height:52vh; display:flex; flex-direction:column; justify-content:center; gap:12px; padding:28px 30px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); cursor:default; transition:border-color .4s, background .4s, opacity .5s, box-shadow .4s}
.chapter.reveal.in:not(.is-on){opacity:.55}
.chapter.is-on{border-color:rgba(0,212,255,.45); background:rgba(0,212,255,.05); box-shadow:0 0 60px -20px rgba(0,212,255,.4)}
.ch-n{font-family:'Space Grotesk',sans-serif; font-size:.78rem; letter-spacing:.18em; color:var(--neon2); font-weight:700}
.chapter h3{font-size:clamp(1.4rem,2.6vw,2rem)}
.chapter p{color:var(--muted); font-size:1.02rem}
.chapter p strong{color:var(--text)}
.ch-cta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px}
.ch-pages{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.ch-pages button{padding:7px 13px; border:1px solid var(--line2); border-radius:999px; font-size:.8rem; color:var(--muted); transition:.2s}
.ch-pages button:hover{border-color:var(--neon); color:var(--neon)}
@media(max-width:860px){
  .scrolly-grid{grid-template-columns:1fr; gap:0}
  .scrolly-stage{top:58px; z-index:5; height:min(40svh,320px); min-height:240px; margin:0 -24px; padding:6px 24px 0; background:linear-gradient(var(--bg) 84%,transparent)}
  .scrolly-stage .case3d{--cw:min(200px,50vw)}
  .scrolly-stage .stage-aura{width:min(360px,90%)}
  .chapters{padding:10px 0 30px}
  .chapter{min-height:0; padding:22px}
  .chapter.reveal.in:not(.is-on){opacity:.7}
}

/* --- beneficios --- */
.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:900px){.benefits{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.benefits{grid-template-columns:1fr}}
.ben{padding:26px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); transition:.35s var(--ease)}
.ben:hover{border-color:rgba(0,212,255,.4); transform:translateY(-4px); box-shadow:0 24px 60px -28px rgba(0,0,0,.85),0 0 40px -12px rgba(0,212,255,.3)}
.ben-ic{width:46px; height:46px; border-radius:14px; background:rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.2); display:grid; place-items:center; color:var(--neon); margin-bottom:16px}
.ben-ic .ic{width:22px; height:22px}
.ben h3{font-size:1.15rem; margin-bottom:8px}
.ben p{color:var(--muted); font-size:.93rem}

/* --- fotos reales --- */
.photos{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media(max-width:520px){.photos{grid-template-columns:1fr}}
.ph{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--panel); aspect-ratio:1}
.ph img{width:100%; height:100%; object-fit:cover}
.ph figcaption{position:absolute; left:14px; bottom:14px; padding:6px 12px; border-radius:999px; background:rgba(4,5,10,.7); backdrop-filter:blur(8px); font-size:.78rem; color:var(--text); border:1px solid var(--line)}
.ph[hidden]{display:none}
.strip-head{margin:46px 0 16px; text-align:center}
.strip-head h3{font-size:clamp(1.3rem,2.6vw,1.8rem); margin-bottom:6px}
.strip-head p{color:var(--muted); font-size:.95rem}
.strip{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.sp-shot{flex:0 0 min(230px,62vw); scroll-snap-align:start; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--panel); position:relative; aspect-ratio:1}
.sp-shot img{width:100%; height:100%; object-fit:cover; object-position:50% 70%; transform:scale(1.16)}
.sp-shot figcaption{position:absolute; left:10px; bottom:10px; padding:5px 10px; border-radius:999px; background:rgba(4,5,10,.72); backdrop-filter:blur(8px); font-size:.74rem; border:1px solid var(--line)}
.rv-more{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:18px}
.rv-shown{font-size:.78rem; color:var(--muted2)}
.rv-more button[hidden]{display:none}

/* --- comprar --- */
.buy-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:start}
@media(max-width:860px){.buy-grid{grid-template-columns:1fr; gap:22px} .buy-visual{order:2} #comprar .prod-copy{order:1}}
.buy-visual{position:sticky; top:96px; display:grid; place-items:center; min-height:0; border-radius:var(--r-lg); border:1px solid var(--line); background:radial-gradient(120% 100% at 50% 0,rgba(0,212,255,.08),rgba(0,0,0,.25)); padding:18px 20px 22px; overflow:hidden}
.buy-visual .stage{padding:26px 0 44px}
.buy-visual .case3d{--cw:min(300px,62vw)}
@media(max-width:860px){.buy-visual{position:static} .buy-visual .case3d{--cw:min(220px,56vw)} .buy-visual .stage{padding:14px 0 30px}}
.buy-photo{position:absolute; right:16px; bottom:16px; width:96px; height:96px; border-radius:16px; object-fit:cover; border:1px solid var(--line2); box-shadow:var(--shadow); z-index:4}
.buy-photo[hidden]{display:none}
.anchor{display:flex; flex-direction:column; gap:6px; margin:14px 0 14px; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.03)}
.anchor-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.anchor-row .an-name{color:var(--muted); font-size:.92rem}
.anchor-row s{color:var(--muted2); font-size:1.05rem}
.anchor-row.ours .an-name{color:var(--text); font-weight:600}
.anchor-row.ours b{font-family:'Space Grotesk',sans-serif; font-size:2.3rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1}
.anchor-save{align-self:flex-start; padding:4px 12px; border-radius:999px; background:rgba(124,255,178,.12); border:1px solid rgba(124,255,178,.35); color:var(--mint); font-size:.8rem; font-weight:700}
.anchor-note{font-size:.72rem; color:var(--muted2)}
.buy-cuotas{display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--mint); font-weight:600; font-size:.95rem; margin-bottom:14px}
.buy-cuotas .mp{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; background:rgba(0,158,227,.16); border:1px solid rgba(0,158,227,.4); color:#8fd8ff; font-size:.72rem; font-weight:700; letter-spacing:.02em}
.opt-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.opt-label{font-size:.82rem; color:var(--muted); min-width:68px}
.swatch{display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 7px; border:1px solid var(--line2); border-radius:999px; font-size:.88rem; font-weight:600; color:var(--muted); transition:.25s; background:var(--panel)}
.swatch i{width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.2)}
.swatch[data-color="negro"] i{background:linear-gradient(150deg,#3a3d44,#0b0c10)}
.swatch[data-color="plata"] i{background:linear-gradient(150deg,#f1f3f6,#8e97a5)}
.swatch[aria-pressed="true"]{border-color:var(--neon); color:var(--text); box-shadow:0 0 0 3px rgba(0,212,255,.14)}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line2); border-radius:999px; padding:2px; background:var(--panel)}
.qty button{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--text); transition:.2s}
.qty button:hover{background:var(--panel2); color:var(--neon)}
.qty button .ic{width:14px; height:14px}
.qty b{min-width:28px; text-align:center; font-family:'Space Grotesk',sans-serif}
.buy-total{display:flex; justify-content:space-between; align-items:baseline; padding:14px 0 4px; border-top:1px solid var(--line); margin-top:6px}
.buy-total span{color:var(--muted)}
.buy-total b{font-family:'Space Grotesk',sans-serif; font-size:1.7rem}
.buy-total small{display:block; color:var(--mint); font-size:.8rem; text-align:right; font-weight:600}
.qty-note{font-size:.78rem; color:var(--muted2); margin:4px 0 0}
.qty-note[hidden]{display:none}
#comprar .prod-buy{display:flex; flex-direction:column; align-items:stretch; gap:10px; padding-top:16px}
#comprar .prod-buy .btn{width:100%}
.buy-wa{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:.9rem; color:var(--muted); padding:10px; transition:.2s}
.buy-wa:hover{color:var(--mint)}
.stock-note{font-size:.82rem; color:var(--gold); font-weight:600; margin-bottom:8px}
.stock-note[hidden]{display:none}

/* ===================================================================
   FIXES DE AUDITORÍA (a11y + CRO + responsive)
   =================================================================== */
/* iconos SVG (profesionales, sin emojis) */
.ic{width:1.05em; height:1.05em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.14em; flex-shrink:0}
.ic-lg{width:20px; height:20px}
.ic-xs{width:.9em; height:.9em}
.guar-ic .ic{width:30px; height:30px; color:var(--neon)}
.btn .ic{margin-right:2px}
/* anclas: que las secciones no queden tapadas por la nav sticky */
section[id]{scroll-margin-top:84px}
/* foco visible para teclado */
:focus-visible{outline:2px solid var(--neon); outline-offset:3px; border-radius:6px}
.case3d:focus-visible{outline-offset:10px; border-radius:calc(var(--cw)*.21)}

/* targets táctiles */
.sound-toggle{padding:11px 14px}

/* sticky buy bar */
.buybar{position:fixed; left:0; right:0; bottom:0; z-index:120; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px clamp(16px,4vw,28px); padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:rgba(6,8,14,.92); backdrop-filter:blur(14px); border-top:1px solid var(--line);
  transform:translateY(110%); visibility:hidden; transition:transform .45s var(--ease), visibility 0s linear .45s}
.buybar.show{transform:none; visibility:visible; transition-delay:0s}
.bb-info{display:flex; flex-direction:column; min-width:0}
.bb-info b{font-family:'Space Grotesk',sans-serif; font-size:1rem}
.bb-info span{color:var(--neon2); font-weight:700; font-size:.95rem}
.buybar .btn{padding:12px 22px; white-space:nowrap; margin-left:auto}
.bb-wa{width:44px; height:44px; border-radius:50%; border:1px solid var(--line2); display:grid; place-items:center; color:var(--mint); flex-shrink:0}
.bb-wa .ic{width:20px; height:20px}
@media(max-width:400px){.bb-info span{font-size:.82rem}.buybar .btn{padding:12px 16px}}

/* confianza junto al CTA */
.buy-trust{margin-top:12px; font-size:.8rem; color:var(--muted)}
.ship-cutoff{margin:0 0 12px; font-size:.8rem; color:var(--mint); font-weight:600}
.prod-rating{display:inline-block; margin:-6px 0 12px; font-size:.88rem; font-weight:700; color:var(--gold)}
.prod-rating:hover{text-decoration:underline}
.hero-rating{margin:-8px 0 14px}

/* nav hamburguesa (móvil) */
.nav-burger{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.nav-burger span{width:18px; height:2px; border-radius:2px; background:var(--text); transition:.3s var(--ease)}
.nav.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.menu-open .nav-burger span:nth-child(2){opacity:0}
.nav.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:860px){
  .nav-burger{display:flex}
  .nav-links{display:none}
  .nav.menu-open .nav-links{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:rgba(6,8,14,.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding:8px 0}
  .nav.menu-open .nav-links a{padding:14px 24px; font-size:1rem}
  .nav.menu-open .nav-links a::after{display:none}
}

/* reduced motion: las animaciones infinitas corren una sola vez */
@media(prefers-reduced-motion:reduce){
  *{animation-iteration-count:1!important}
  .buybar,.scr-track,.case3d{transition:none}
  .topbar-track{animation:none; padding-left:0; transform:none}
}