/* BetaCel · Web V3 — estilo (fuente de verdad). Lo copia gen_web_v3.py a web_v3/. Marca propia: menta -> celeste -> azul. */
:root{
  --negro:#000; --carbon:#161617; --carbon2:#1d1d1f;
  --claro:#f5f5f7; --blanco:#fff;
  --t-osc:#f5f5f7;  --s-osc:#a1a1a6;
  --t-cla:#1d1d1f;  --s-cla:#6e6e73;
  --menta:#2ee6b6; --celeste:#2bb7f5; --azul:#5b7cff;
  --marca:linear-gradient(90deg,var(--menta),var(--celeste) 52%,var(--azul));
  --wsp:#25d366; --wsp2:#1fbd5a; --wsp-t:#062612;
  --enlace-osc:#2997ff; --enlace-cla:#0066cc;
  --linea-osc:rgba(255,255,255,.1); --linea-cla:#d2d2d7;
  --sale:cubic-bezier(.16,1,.3,1); --va:cubic-bezier(.65,0,.35,1);
  --r:24px;
  --fuente:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  interpolate-size:allow-keywords;
}
@media(min-width:740px){:root{--r:28px}}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#000}
body{font-family:var(--fuente);font-size:17px;line-height:1.45;color:var(--t-osc);background:#000;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.con-barra{padding-bottom:96px}
img,video,svg{display:block;max-width:100%}
img{height:auto}
picture{display:contents}
a{color:var(--enlace-osc);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--enlace-osc);outline-offset:3px;border-radius:8px}
section{scroll-margin-top:48px}
.cont{max-width:1080px;margin:0 auto;padding:0 22px}
.saltar{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;color:#000;padding:10px 14px;border-radius:10px}
.saltar:focus{left:16px}
.grad{background:var(--marca);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---------- secciones ---------- */
.sec{position:relative;padding:88px 0}
.osc{background:#000;color:var(--t-osc)}
.cla{background:var(--claro);color:var(--t-cla)}
@media(min-width:740px){.sec{padding:112px 0}}
@media(min-width:1020px){.sec{padding:140px 0}}
.h2{font-size:clamp(2.1rem,8.6vw,4rem);font-weight:700;line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.eti{font-size:15px;font-weight:600;color:var(--s-osc)}
.sub{font-size:clamp(19px,4.8vw,21px);line-height:1.4;color:var(--s-osc)}
.cla .sub{color:var(--s-cla)}
.nota{font-size:13px;line-height:1.45;color:var(--s-osc)}
.cla .nota{color:var(--s-cla)}
.centro{text-align:center}

/* palabras de los titulares */
.pal{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin:0 -.04em -.14em}
.pal>span{display:inline-block}

/* ---------- barra de arriba ---------- */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none}
.prog i{display:block;height:100%;background:var(--marca);transform-origin:0 50%;transform:scaleX(var(--sp,0))}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:48px}
.nav::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--linea-osc);opacity:0;transition:opacity .4s var(--va)}
.nav.sc::before{opacity:1}
.nav .cont{position:relative;height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav-marca{display:flex;align-items:center;gap:9px;color:var(--t-osc);font-size:17px;font-weight:600;letter-spacing:-.01em}
.nav-marca:hover{text-decoration:none}
.nav-marca img{width:26px;height:26px;border-radius:7px}
.nav-links{display:flex;align-items:center;gap:20px}
.nav-links a:not(.btn){font-size:14px;color:var(--s-osc);transition:color .2s}
.nav-links a:not(.btn):hover{color:var(--t-osc);text-decoration:none}
.nav .nav-pedir{display:none}

/* ---------- botones ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;border-radius:999px;border:0;cursor:pointer;overflow:hidden;font-family:var(--fuente);font-size:17px;font-weight:600;line-height:1.15;letter-spacing:-.005em;text-decoration:none;text-align:center;transition:transform .35s var(--sale),background-color .2s;-webkit-tap-highlight-color:transparent}
.btn:hover{text-decoration:none}
.btn svg{width:22px;height:22px;flex:none}
.btn>span{display:block}
.wsp{background:var(--wsp);color:var(--wsp-t)}
.wsp:hover{background:var(--wsp2);transform:scale(1.02)}
.wsp:active{transform:scale(.97)}
.btn-ancho{width:100%}
.btn-mini{min-height:34px;padding:0 14px;font-size:14px;gap:7px}
.btn-mini svg{width:16px;height:16px}
.btn-brillo::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-140%) skewX(-18deg);animation:brillo 6s ease-in-out 2.4s infinite;pointer-events:none}
@keyframes brillo{0%,68%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(280%) skewX(-18deg)}}
.enlace{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:17px;color:var(--enlace-osc)}
.cla .enlace{color:var(--enlace-cla)}
@media(max-width:359px){.btn{font-size:15px;padding:0 14px;gap:8px}.btn svg{width:20px;height:20px}}

/* ---------- 1. portada ---------- */
.hero{--p:0;position:relative;min-height:100vh;min-height:100svh;padding:76px 0 40px;text-align:center;background:#000;overflow-x:clip}
.hero-top,.hero-bot{opacity:calc(1 - var(--p)*.75)}
.hero .eti{margin-bottom:10px}
.hero h1{font-size:clamp(2.25rem,11.6vw,6rem);font-weight:700;line-height:1.03;letter-spacing:-.035em;text-wrap:balance;max-width:14ch;margin:0 auto}
.hero .sub{margin:14px auto 0;max-width:30ch}
.hero-precio{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px;margin-top:18px}
.hero-precio b{font-size:28px;line-height:1;font-weight:700;letter-spacing:-.02em;color:#fff}
.hero-precio s{font-size:19px;color:#6e6e73;text-decoration-thickness:1.5px}
.pastilla{font-size:13px;font-weight:600;line-height:1;padding:7px 12px;border-radius:999px;color:var(--menta);background:rgba(46,230,182,.1);box-shadow:inset 0 0 0 1px rgba(46,230,182,.32)}
.hero-cta{margin-top:20px}
.hero-foto{position:relative;width:min(88vw,560px);margin:6px auto 0;transform:translate3d(0,calc(var(--p)*40px),0) scale(calc(1 - var(--p)*.08))}
.hero-foto img,.cierre-foto img,.esc-foto{mix-blend-mode:screen;-webkit-mask-image:radial-gradient(closest-side,#000 92%,transparent 100%);mask-image:radial-gradient(closest-side,#000 92%,transparent 100%)}
.hero-foto img{position:relative;width:100%;aspect-ratio:1;animation:fotoin 1.2s var(--sale) .1s both,flota 6s ease-in-out 1.3s infinite alternate}
.glow{position:absolute;inset:-14%;pointer-events:none;animation:glowin 1.4s var(--sale) .15s both}
.glow::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,rgba(59,107,255,.38),transparent 72%),radial-gradient(closest-side at 32% 66%,rgba(46,230,182,.16),transparent 70%);animation:respira 7s ease-in-out infinite}
@keyframes fotoin{from{opacity:0;transform:scale(1.14);filter:blur(14px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes flota{from{translate:0 -5px}to{translate:0 5px}}
@keyframes glowin{from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}}
@keyframes respira{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.12);opacity:1}}
.hero-bot{margin-top:6px}
.hero-bot .nota{max-width:46ch;margin:0 auto}
.datos{display:grid;grid-template-columns:1fr;max-width:1080px;margin:36px auto 0;text-align:center}
.dato{padding:20px 14px;border-top:1px solid var(--linea-osc)}
.dato b{display:block;font-size:17px;font-weight:600;color:#fff;line-height:1.3}
.dato span{display:block;font-size:15px;color:var(--s-osc);margin-top:2px}
@media(min-width:740px){
  .hero{padding-top:96px}
  .hero-cta .btn-ancho,.cierre-cta .btn-ancho{width:auto;min-width:340px}
  .datos{grid-template-columns:repeat(3,1fr);margin-top:56px}
  .dato{border-top:0;border-left:1px solid var(--linea-osc);padding:8px 24px}
  .dato:first-child{border-left:0}
}
/* entrada al cargar */
.ent{animation:entra 1s var(--sale) both;animation-delay:calc(.2s + var(--i,0)*90ms)}
@keyframes entra{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
.t-hero .pal>span{animation:palsube 1.1s var(--sale) both;animation-delay:calc(.3s + var(--w,0)*60ms)}
@keyframes palsube{from{transform:translate3d(0,110%,0)}to{transform:none}}

/* ---------- 2. escena «del ruido al silencio» ---------- */
.escena{--p:1;--q:1;position:relative;background:#000}
/* --f = lado de la foto; --cy = centro del escenario (algo abajo del medio: arriba va el texto y abajo la barra) */
.esc-fija{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;overflow:clip;background:#000;--f:min(92vw,52vh,480px);--cy:54%}
@supports(height:100svh){.esc-fija{--f:min(92vw,52svh,480px)}}
@media(min-width:1020px){.esc-fija{--cy:55%}}
.esc-glow{position:absolute;left:50%;top:var(--cy);width:min(130vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(46,230,182,.2),rgba(43,183,245,.13) 46%,transparent 72%);opacity:var(--q);pointer-events:none}
.pn-caja{position:absolute;left:50%;top:var(--cy);width:min(92vw,1000px);height:min(70vh,560px);height:min(70svh,560px);transform:translate(-50%,-50%)}
.pn{position:absolute;opacity:calc(1 - var(--q)*1.6);font-size:clamp(1.05rem,4.6vw,1.9rem);font-weight:700;letter-spacing:-.02em;color:rgba(245,245,247,.5);white-space:nowrap}
.pn span{display:inline-block;animation:tiembla .22s steps(2,end) infinite alternate}
.pn:nth-child(2) span{animation-duration:.27s}
.pn:nth-child(3) span{animation-duration:.19s}
.pn:nth-child(4) span{animation-duration:.25s}
@keyframes tiembla{from{transform:translate3d(-2px,1px,0) rotate(-.6deg)}to{transform:translate3d(2px,-1px,0) rotate(.6deg)}}
.onda{position:absolute;left:50%;top:var(--cy);width:min(88vw,316px);height:220px;margin:-110px 0 0;transform:translateX(-50%);opacity:calc(1 - (var(--q) - .85)*6.7);display:flex;align-items:center;justify-content:space-between}
.onda i{flex:0 0 4px;height:calc(var(--h)*220px);transform:scaleY(calc(.02 + .98*(1 - var(--q))))}
.onda i::before{content:"";display:block;width:100%;height:100%;border-radius:999px;background:var(--c);animation:vibra var(--d) ease-in-out var(--l) infinite alternate}
@keyframes vibra{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@media(max-width:739px){.onda i.x{display:none}}
@media(min-width:740px){.onda{width:min(88vw,508px)}}
/* la línea de calma sale por los dos lados del producto: la máscara la corta en el centro, como si pasara por detrás */
.linea{position:absolute;left:50%;top:var(--cy);width:min(96vw,760px);height:44px;margin-top:-22px;transform:translateX(-50%);opacity:var(--q);-webkit-mask-image:linear-gradient(90deg,#000 calc(50% - var(--f)*.47),transparent calc(50% - var(--f)*.34),transparent calc(50% + var(--f)*.34),#000 calc(50% + var(--f)*.47));mask-image:linear-gradient(90deg,#000 calc(50% - var(--f)*.47),transparent calc(50% - var(--f)*.34),transparent calc(50% + var(--f)*.34),#000 calc(50% + var(--f)*.47))}
.linea::before{content:"";position:absolute;left:0;right:0;top:21px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--menta) 22%,var(--celeste) 78%,transparent);box-shadow:0 0 18px 2px rgba(46,230,182,.5)}
.esc-foto{position:absolute;left:50%;top:var(--cy);width:var(--f);aspect-ratio:1;margin:calc(var(--f)/-2) 0 0 calc(var(--f)/-2);opacity:calc((var(--q) - .6)*2.8);transform:scale(calc(.8 + .2*var(--q)))}
.esc-txt{position:absolute;left:0;right:0;top:calc(48px + 5vh);top:calc(48px + 5svh);padding:0 22px;text-align:center;display:grid;justify-items:center}
.ft{grid-area:1/1;max-width:880px}
.ft h2{font-size:clamp(2.1rem,8.6vw,4rem);font-weight:700;line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.ft p{margin-top:12px;font-size:clamp(14px,3.6vw,17px);color:var(--s-osc)}
.t1,.t2{display:none}
.esc-txt .t3{display:block}
.esc-fija .esc-txt{z-index:3}
.esc-foto{z-index:2}

/* ---------- 3. tarjetas que se deslizan ---------- */
.rasgos .h2{margin-bottom:40px}
.car{position:relative;display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:6px max(22px,calc((100% - 1036px)/2));scroll-padding-inline:max(22px,calc((100% - 1036px)/2))}
.car::-webkit-scrollbar{display:none}
.tj{position:relative;flex:0 0 min(82vw,372px);height:470px;scroll-snap-align:start;border-radius:var(--r);background:var(--carbon);box-shadow:inset 0 0 0 1px var(--linea-osc);overflow:hidden;padding:28px 26px;display:flex;flex-direction:column}
.tj-eti{font-size:14px;font-weight:600;letter-spacing:.01em;line-height:1.2}
.tj-fr{margin-top:10px;font-size:clamp(1.6rem,6.9vw,1.75rem);font-weight:700;line-height:1.16;letter-spacing:-.022em;text-wrap:balance;position:relative;z-index:1}
.tj-dib{position:relative;margin-top:auto;height:176px;display:flex;align-items:center;justify-content:center}
.tj-cla{background:var(--claro);box-shadow:none;color:var(--t-cla)}
.tj-cla .tj-eti{color:var(--enlace-cla);-webkit-text-fill-color:currentColor;background:none}
.tj-foto{position:absolute;left:0;right:0;bottom:0;width:100%;height:54%;object-fit:cover;object-position:50% 80%;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 26%);mask-image:linear-gradient(to bottom,transparent,#000 26%)}
/* mini onda */
.mini{width:100%;height:150px;display:flex;align-items:center;justify-content:space-between}
.mini i{flex:0 0 5px;height:calc(var(--h)*150px);animation:calma 6s var(--va) infinite}
.mini i::before{content:"";display:block;width:100%;height:100%;border-radius:999px;background:var(--c);animation:vibra var(--d) ease-in-out var(--l) infinite alternate}
@keyframes calma{0%,30%{transform:scaleY(1)}48%,66%{transform:scaleY(.03)}84%,100%{transform:scaleY(1)}}
/* anillos */
.anillos{position:relative;width:100%;height:100%;display:grid;place-items:center}
.anillo{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;border:2px solid var(--menta);opacity:0;animation:late 3.3s var(--sale) infinite;animation-delay:calc(var(--i)*1.1s)}
@keyframes late{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(3.1)}}
.rayo{position:relative;width:52px;height:52px;color:var(--menta);filter:drop-shadow(0 0 10px rgba(46,230,182,.55));animation:pulso 3.3s ease-in-out infinite}
@keyframes pulso{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* números gigantes */
.gnum{font-size:min(11.5vw,4.4rem);font-weight:700;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.gnum small,.num small{font-size:.42em;letter-spacing:-.01em;font-weight:700;margin-left:.12em}
.glab{margin-top:8px;font-size:15px;color:var(--s-osc)}
.dos .gnum{font-size:min(15vw,5.4rem)}
.dos{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.uno{width:100%;display:flex;align-items:flex-end;gap:14px}
.uno .gnum{font-size:min(26vw,7.4rem)}
/* pausa cuando no se ve */
@media(prefers-reduced-motion:no-preference){
  .js:not(.todo) .tj:not(.on) .tj-dib *,.js:not(.todo) .tj:not(.on) .tj-dib::before{animation-play-state:paused}
}
.car-ctl{display:flex;align-items:center;justify-content:center;margin-top:22px;min-height:44px}
.puntos{display:flex;gap:2px}
.pt{width:24px;height:24px;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.pt::before{content:"";width:8px;height:8px;border-radius:50%;background:#48484a;transition:transform .4s var(--sale),background-color .3s}
.pt[aria-current="true"]::before{background:var(--t-osc);transform:scale(1.25)}
.flechas{display:none}
.fl{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:opacity .25s,transform .3s var(--sale)}
.fl:hover{transform:scale(1.06)}
.fl svg{width:18px;height:18px}
.fl[aria-disabled="true"]{opacity:.3;pointer-events:none}
@media(min-width:1020px){
  .car-ctl{justify-content:space-between}
  .flechas{display:flex;gap:10px}
}

/* ---------- 4. míralos en acción ---------- */
.video{overflow-x:clip}
.vid-grid{display:grid;grid-template-columns:1fr;grid-template-areas:"t" "v" "c";justify-items:center;text-align:center;gap:0}
.vid-t{grid-area:t}
.vid-box{grid-area:v;position:relative;width:min(78vw,340px);aspect-ratio:9/16;margin:44px auto 36px}
.vid-box::before{content:"";position:absolute;inset:-18%;background:radial-gradient(closest-side,rgba(59,107,255,.4),rgba(46,230,182,.14) 55%,transparent 75%);pointer-events:none}
.vid-box video{position:relative;width:100%;height:100%;border-radius:28px;background:#000;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 80px rgba(0,0,0,.6)}
.play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:grid;place-items:center;cursor:pointer;transition:opacity .3s,transform .4s var(--sale)}
.play:hover{transform:scale(1.07)}
.play svg{width:28px;height:28px;margin-left:4px}
.play.oculto{opacity:0;pointer-events:none;transform:scale(.8)}
.vid-c{grid-area:c;width:100%}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--linea-osc);background:rgba(255,255,255,.08);color:var(--t-osc);font-size:15px;font-weight:600;cursor:pointer;transition:background-color .25s,color .25s}
.chip[aria-pressed="true"]{background:var(--claro);border-color:var(--claro);color:var(--t-cla)}
@media(max-width:739px){.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}.chip{min-height:48px;padding:6px 8px;font-size:13.5px;line-height:1.15}}
.vid-c .nota{margin-top:14px}
.vid-c .btn{margin-top:20px;min-width:min(100%,320px)}
@media(min-width:1020px){
  .vid-grid{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"v t" "v c";grid-template-rows:1fr 1fr;column-gap:96px;text-align:left;justify-items:start;align-items:start;max-width:880px;margin:0 auto}
  .vid-box{margin:0;align-self:center}
  .vid-t{align-self:end;padding-bottom:28px}
  .vid-c{align-self:start}
  .chips{justify-content:flex-start}
  .vid-c .btn{min-width:0;width:auto;padding:0 32px}
}

/* ---------- 5. cómo comprar ---------- */
.comprar .sub{margin-top:14px}
.tl ol{list-style:none}
.tl{--p:1;position:relative;max-width:640px;margin:48px auto 0;padding-left:68px}
.tl::before,.tl-fill{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;border-radius:2px}
.tl::before{background:var(--linea-cla)}
.tl-fill{background:linear-gradient(var(--menta),var(--celeste),var(--azul));transform-origin:50% 0;transform:scaleY(var(--p))}
.tl li{position:relative;padding-bottom:44px}
.tl li:last-child{padding-bottom:0}
.tl li:last-child::after{content:"";position:absolute;left:-51px;top:20px;bottom:-6px;width:6px;background:var(--claro)}
.nodo{position:absolute;left:-68px;top:0;z-index:2;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--linea-cla);display:grid;place-items:center;font-size:17px;font-weight:700;color:var(--s-cla)}
.nodo::before{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,var(--menta),var(--celeste) 55%,var(--azul));opacity:1;transition:opacity .45s var(--va)}
.nodo span{position:relative}
.nodo .n1{position:absolute;color:#fff;opacity:1;transition:opacity .45s var(--va)}
.tl li.on .nodo{animation:pop .6s var(--sale)}
@keyframes pop{0%{transform:scale(.82)}55%{transform:scale(1.1)}100%{transform:scale(1)}}
.tl h3{font-size:clamp(1.35rem,5.4vw,1.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;padding-top:4px}
.tl p{margin-top:6px;font-size:17px;color:var(--s-cla);max-width:46ch}
.fr-grande{max-width:780px;margin:96px auto 0;font-size:clamp(1.8rem,6.6vw,3rem);font-weight:700;line-height:1.1;letter-spacing:-.03em;text-align:center;text-wrap:balance}
.fichas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:56px}
.ficha{background:#fff;border-radius:var(--r);padding:28px 16px 26px;text-align:center}
.num{display:block;font-size:clamp(2.2rem,12.6vw,4rem);font-weight:700;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.ficha p{margin-top:12px;font-size:15px;line-height:1.35;color:var(--s-cla)}
@media(min-width:1020px){.fichas{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.ficha{padding:40px 20px 34px}}

/* ---------- 6. la oferta ---------- */
.oferta{text-align:center}
.of-antes{margin-top:22px;font-size:clamp(1.5rem,6vw,2.2rem);font-weight:600;line-height:1;color:#6e6e73;text-decoration:line-through;text-decoration-thickness:2px}
.of-gig{margin-top:6px;font-size:clamp(6rem,30vw,12.5rem);font-weight:700;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;padding-bottom:.06em}
.of-env{font-size:19px;color:var(--s-osc)}
.oferta .h2{margin-top:72px}
.ops{border:0;min-width:0;max-width:640px;margin:32px auto 0;display:grid;gap:12px;text-align:left}
.op{position:relative}
.op input{position:absolute;opacity:0;width:1px;height:1px}
.op label{display:block}
.op-c{position:relative;display:flex;align-items:center;gap:16px;min-height:88px;padding:20px;border-radius:var(--r);background:var(--carbon);box-shadow:inset 0 0 0 1px var(--linea-osc);cursor:pointer;-webkit-tap-highlight-color:transparent}
.op-c::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--marca);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .35s var(--va);pointer-events:none}
.op input:checked + .op-c::after{opacity:1}
.op input:focus-visible + .op-c{outline:3px solid var(--enlace-osc);outline-offset:3px}
.op-r{position:relative;flex:none;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px #6e6e73;display:grid;place-items:center}
.op-r::before{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,var(--menta),var(--celeste) 55%,var(--azul));transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.op-r svg{position:relative;width:14px;height:14px;transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1) .05s}
.op input:checked + .op-c .op-r{box-shadow:none}
.op input:checked + .op-c .op-r::before,.op input:checked + .op-c .op-r svg{transform:scale(1)}
.op-t{flex:1;min-width:0}
.op-t b{display:block;font-size:19px;font-weight:600;line-height:1.25;color:#fff}
.op-t small{display:block;margin-top:4px;font-size:14.5px;line-height:1.35;color:var(--s-osc)}
.op-p{flex:none;font-size:24px;font-weight:700;letter-spacing:-.02em;color:#fff}
.op-ver{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;font-size:15px}
.incl{max-width:640px;margin:44px auto 0;text-align:left}
.incl h3{font-size:21px;font-weight:700;letter-spacing:-.01em}
.incl ul{list-style:none;margin-top:8px}
.incl li{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--linea-osc);font-size:17px}
.incl li svg{flex:none;width:20px;height:20px}
.pedido-f{max-width:640px;margin:36px auto 0;text-align:left}
.pedido-f label{display:block;margin-bottom:8px;font-size:15px;font-weight:600}
.campo{display:block;width:100%;min-height:54px;padding:0 18px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:var(--carbon);color:#fff;font-family:var(--fuente);font-size:17px}
.campo::placeholder{color:#6e6e73}
.campo:focus-visible{outline:3px solid var(--enlace-osc);outline-offset:2px;border-color:transparent}
.pedido-f .btn{margin-top:18px}
.pedido-f .nota{margin-top:16px;text-align:center}

/* ---------- 7. preguntas ---------- */
.faq{max-width:760px;margin:44px auto 0}
.faq details{border-top:1px solid var(--linea-cla)}
.faq details:last-child{border-bottom:1px solid var(--linea-cla)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;cursor:pointer;list-style:none;font-size:clamp(1.15rem,4.6vw,1.45rem);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:2rem;font-weight:300;line-height:1;color:var(--enlace-cla);transition:transform .4s var(--sale)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 26px;font-size:17px;color:var(--s-cla);max-width:660px}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--sale),content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.gar{max-width:760px;margin:40px auto 0;text-align:center;font-size:17px;color:var(--s-cla)}
.gar a{display:inline-block;margin-top:4px;color:var(--enlace-cla)}

/* ---------- 8. cierre ---------- */
.cierre{position:relative;text-align:center;overflow-x:clip}
.cierre-foto{position:relative;width:min(300px,78vw);margin:0 auto 28px}
.cierre-foto img{position:relative;width:100%;aspect-ratio:1}
.cierre .h2{max-width:16ch;margin:0 auto}
.cierre-cta{max-width:420px;margin:32px auto 0}
.packs{max-width:640px;margin:96px auto 0;text-align:left}
.packs h3{font-size:21px;font-weight:700;letter-spacing:-.01em;margin-bottom:16px}
.packs ul{list-style:none;display:grid;gap:10px}
.packs a{display:flex;align-items:center;gap:12px;min-height:68px;padding:14px 20px;border-radius:20px;background:var(--carbon);box-shadow:inset 0 0 0 1px var(--linea-osc);color:var(--t-osc);transition:transform .35s var(--sale)}
.packs a:hover{text-decoration:none;transform:scale(1.015)}
.packs a span{flex:1;min-width:0;font-size:17px;font-weight:600;line-height:1.3}
.packs a b{font-size:19px;font-weight:700;white-space:nowrap}
.packs a svg{flex:none;width:16px;height:16px;color:var(--s-osc)}

/* ---------- pie ---------- */
footer{background:#000;border-top:1px solid var(--linea-osc);color:var(--s-osc);font-size:13px;line-height:1.5;padding:48px 0 40px}
footer .cols{display:grid;grid-template-columns:1fr;gap:28px}
footer b{display:block;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--t-osc)}
footer a{display:block;padding:5px 0;color:var(--s-osc)}
footer a:hover{color:var(--t-osc)}
@media(min-width:740px){footer .cols{grid-template-columns:repeat(4,1fr)}}

/* ---------- barra fija de abajo (celular y tablet) ---------- */
.barra{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;max-width:560px;margin:0 auto;border-radius:20px;background:rgba(22,22,23,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 10px 40px rgba(0,0,0,.5)}
.barra-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px}
.barra-t{min-width:0}
.barra b{display:block;font-size:21px;line-height:1.1;font-weight:700;letter-spacing:-.02em;color:#fff}
.barra small{display:block;margin-top:2px;font-size:12px;line-height:1.25;color:var(--s-osc)}
.barra .btn{flex:none;min-height:46px;padding:0 20px;font-size:16px}
.barra.v-obs{transition:transform .55s var(--sale),visibility 0s}
.js:not(.todo):not(.fuera) .barra{transform:translateY(140%);visibility:hidden}
.barra.v-obs.v-oculta{transform:translateY(140%);visibility:hidden;transition:transform .55s var(--sale),visibility 0s linear .55s}
@media(max-width:359px){.barra .btn{padding:0 14px;font-size:15px}.barra-in{padding-left:14px}}

/* ---------- computadora ---------- */
@media(min-width:1020px){
  body.con-barra{padding-bottom:0}
  .barra{display:none}
  .nav .nav-pedir{display:inline-flex;opacity:0;visibility:hidden;transform:translate3d(0,6px,0);transition:opacity .4s var(--sale),transform .4s var(--sale),visibility 0s linear .4s}
  .fuera .nav .nav-pedir{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--sale),transform .4s var(--sale),visibility 0s}
  .nav-links{gap:24px}
  .tj{height:470px}
}

/* ---------- movimiento al bajar (solo si hay JS y se permite movimiento) ---------- */
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .js:not(.todo) .r{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s var(--sale),transform 1.1s var(--sale);transition-delay:calc(var(--i,0)*90ms)}
  .js:not(.todo) .r-z{transform:scale(.94)}
  .js:not(.todo) .r.on{opacity:1;transform:none}
  .js:not(.todo) .tit:not(.t-hero) .pal>span{transform:translate3d(0,110%,0)}
  .js:not(.todo) .tit.on:not(.t-hero) .pal>span{transform:none;transition:transform 1.1s var(--sale);transition-delay:calc(var(--w,0)*60ms)}
  .js:not(.todo) .tl li:not(.on) .nodo::before,.js:not(.todo) .tl li:not(.on) .nodo .n1{opacity:0}
  /* escena fija: solo cuando JS mueve el avance */
  .js:not(.todo) .escena{--p:0;--q:0;height:260vh;height:260svh}
  .js:not(.todo) .esc-fija{position:sticky;top:0}
  .js:not(.todo) .esc-txt .ft{display:block;opacity:0;transform:translate3d(0,18px,0);transition:opacity .2s var(--va),transform .45s var(--va)}
  .js:not(.todo) .escena[data-fase="1"] .t1,.js:not(.todo) .escena[data-fase="2"] .t2,.js:not(.todo) .escena[data-fase="3"] .t3{opacity:1;transform:none;transition:opacity .45s var(--va) .2s,transform .6s var(--sale) .2s}
  .js:not(.todo) .escena:not(.vis) .onda i::before,.js:not(.todo) .escena:not(.vis) .pn span{animation-play-state:paused}
}
@media(min-width:1020px) and (prefers-reduced-motion:no-preference){
  .js:not(.todo) .escena{height:300vh;height:300svh}
}
/* ---------- movimiento reducido o JS caido: todo visible y quieto ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-top,.hero-bot{opacity:1}
  .hero-foto{transform:none}
}
.todo *,.todo *::before,.todo *::after{animation:none!important;transition:none!important}
.todo .hero-top,.todo .hero-bot{opacity:1}
.todo .hero-foto{transform:none}

/* computadora: la portada entra en una pantalla de 800 px de alto */
@media(min-width:1020px){
  .hero{padding-top:76px;padding-bottom:56px}
  .hero h1{font-size:min(6rem,max(3.4rem,10.5vh))}
  .hero-foto{width:min(560px,40vh);width:min(560px,40svh)}
}

/* computadora: en las secciones claras el contenido va en una columna angosta al centro; su título también */
@media(min-width:1020px){.comprar .cont>.tit,.comprar .cont>.sub,#preguntas .cont>.tit{text-align:center}}

/* ================= parte 2: el mismo estilo en todo el sitio (reglas nuevas; las de arriba no se tocan) ================= */
/* portada de producto: titulares largos y línea «por separado» */
.hero h1.t-largo{font-size:clamp(2rem,9.4vw,4.6rem);max-width:17ch}
@media(min-width:1020px){.hero h1.t-largo{font-size:min(4.4rem,max(2.8rem,8.6vh));max-width:24ch}}
.hero-sep{margin-top:10px;font-size:15px;line-height:1.35;color:var(--s-osc)}
.hero-cta .enlace{margin-top:6px}
.hero-bot .enlace{margin-top:0}
/* oferta sin precio de antes (packs y accesorios) */
.eti + .of-gig{margin-top:18px}
.of-sep{margin-top:8px;font-size:15px;color:var(--s-osc)}

/* packs: «Qué incluye» con una tarjeta grande por cosa */
.incluye .h2{margin-bottom:40px}
.inc-g{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.inc-c{border-radius:var(--r);background:var(--carbon);box-shadow:inset 0 0 0 1px var(--linea-osc);overflow:hidden}
.inc-f{position:relative;aspect-ratio:4/3;background:#e9ebef;overflow:hidden}
.inc-f img{position:absolute;top:50%;width:calc(var(--z,1)*100%);max-width:none;height:auto;aspect-ratio:1;left:calc((1 - var(--z,1))*var(--p,.5)*100%);transform:translateY(-50%)}
.inc-c b{display:block;padding:20px 22px 24px;font-size:clamp(1.2rem,5vw,1.5rem);font-weight:700;letter-spacing:-.015em;line-height:1.2}
@media(min-width:740px){.inc-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(min-width:1020px){.inc-g{grid-template-columns:repeat(var(--n,2),minmax(0,1fr))}}

/* inicio: rejilla de packs y accesorios */
.catalogo .sub{margin-top:14px;max-width:46ch}
.cat-2{padding-top:0}
.rej{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:44px}
@media(min-width:740px){.rej{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(min-width:1020px){.rej{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cd{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:var(--carbon);box-shadow:inset 0 0 0 1px var(--linea-osc);color:var(--t-osc);overflow:hidden}
.cd:hover{text-decoration:none}
.cd-foto{display:block;padding:8px 8px 0}
.cd-foto img{width:100%;aspect-ratio:1;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(closest-side,#000 90%,transparent 100%);mask-image:radial-gradient(closest-side,#000 90%,transparent 100%);transition:transform .8s var(--sale)}
.cd:hover .cd-foto img{transform:scale(1.05)}
.cd-c{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:0 24px 24px;flex:1}
.cd h3{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.cd-corto{font-size:15px;line-height:1.4;color:var(--s-osc)}
.cd-sep{font-size:14px;color:var(--s-osc)}
.cd-pie{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;width:100%}
.cd-precio b{font-size:28px;font-weight:700;letter-spacing:-.025em;color:#fff}
.cd-precio s{margin-left:10px;font-size:17px;color:#6e6e73}
.cd-fl{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:background-color .3s,color .3s}
.cd-fl svg{width:16px;height:16px}
.cd:hover .cd-fl{background:var(--claro);color:#000}
.tranquilo .sub{margin-top:14px}
.gg-g{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:44px}
.gg{border-radius:var(--r);background:var(--carbon);box-shadow:inset 0 0 0 1px var(--linea-osc);padding:32px 26px 30px}
.gg .gnum{font-size:clamp(2.6rem,12vw,4rem);letter-spacing:-.04em;white-space:nowrap}
.gg span{display:block;margin-top:12px;font-size:17px;line-height:1.4;color:var(--s-osc)}
@media(min-width:740px){.gg-g{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}

/* garantía: cabecera negra y política en columna de lectura */
.cab{background:#000;padding:112px 0 56px;text-align:center}
.cab h1{font-size:clamp(2.1rem,9.2vw,4.6rem);font-weight:700;line-height:1.05;letter-spacing:-.035em;text-wrap:balance;max-width:18ch;margin:0 auto}
.legal-sec{background:var(--claro);color:var(--t-cla);padding:72px 0 96px}
.legal{max-width:680px;margin:0 auto}
.legal h2{margin:56px 0 14px;padding-top:30px;border-top:1px solid var(--linea-cla);font-size:clamp(1.6rem,6vw,2.2rem);font-weight:700;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal p,.legal li{margin:10px 0;font-size:17px;line-height:1.55;color:#3a3a3c}
.legal strong{color:var(--t-cla);font-weight:600}
.legal ul,.legal ol{margin:10px 0 10px 24px}
.legal-cta{max-width:680px;margin:56px auto 0}
.legal-cta p{margin-top:8px}
.legal-sec .enlace{color:var(--enlace-cla);padding-left:0}
@media(min-width:740px){.legal-cta .btn{width:auto;min-width:320px}}
@media(min-width:1020px){.cab{padding:150px 0 80px}.legal-sec{padding:112px 0 140px}}