/* =========================================================
   BANGOVER · SIN LÍMITES
   Lenguaje: oscuro, pulido, estilo Apple. Cormorant Garamond para titulares, Inter para todo lo demás.
   Un solo acento (oro de marca) y el verde de WhatsApp. Esquinas redondeadas en todo,
   reacciones al tacto, movimiento con motivo y apagable.
   ========================================================= */

:root{
  color-scheme:dark;
  --bg:#0a0a0a;
  --bg-2:#0f0e0d;
  --card:#171717;
  --card-2:#1e1c1a;
  --tx:#f5f1e8;
  --tx-2:rgb(245 241 232 / .74);
  --tx-3:rgb(245 241 232 / .5);
  --line:rgb(255 255 255 / .1);
  --line-2:rgb(255 255 255 / .18);
  --gold:#c9a227;
  --gold-hi:#e3c55c;
  --gold-dim:rgb(201 162 39 / .14);
  --grad-gold:linear-gradient(#e3c55c,#c9a227);
  --grad-wa:linear-gradient(#0e6e4a,#084a31);
  --ink:#0a0a0a;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-s:12px;--r-m:18px;--r-l:26px;
  --gut:clamp(20px,4vw,40px);
  --wrap:1200px;
  --nav-h:64px;
  --spring:cubic-bezier(.32,.72,0,1);
  --out:cubic-bezier(.22,1,.36,1);
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --z-nav:40;--z-dock:45;--z-toast:90;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--tx);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:8px}
::selection{background:var(--gold);color:var(--ink)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--gold);color:var(--ink);padding:12px 18px;font-weight:600;border-radius:999px;text-decoration:none}
.skip:focus{top:12px}

.wrap{width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto}
section{position:relative}
[data-ic]{display:inline-flex;align-items:center;justify-content:center;flex:none}
[data-ic] svg{width:1.2em;height:1.2em;display:block}

/* ---------- tipografía ---------- */
.h-xl,.h-md{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.h-xl{font-size:clamp(32px,3.7vw,52px);line-height:1.08}
.h-md{font-size:clamp(25px,2.3vw,32px);line-height:1.12}
.h-xl em,.h-md em,.cierre-t em,.hero-title em{font-style:italic;color:var(--gold);font-weight:600}
.lead{font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--tx-2);max-width:58ch;text-wrap:pretty}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:16px;font:600 11.5px/1.2 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";flex:none;width:34px;height:1px;background:currentColor}
.nota{font-size:14px;line-height:1.6;color:var(--tx-3);max-width:62ch}
.nota b{color:var(--tx-2);font-weight:600}

/* ---------- reacciones al tacto: presión, onda dorada y brillo ---------- */
.chap{position:relative;overflow:hidden;transition:scale .34s var(--spring),transform .45s var(--spring),border-color .3s,background-color .3s,color .3s,box-shadow .45s var(--spring),filter .2s}
.chap:active{scale:.97;transition-duration:90ms}
.chap::before{content:"";position:absolute;left:var(--x,50%);top:var(--y,50%);width:220%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgb(227 197 92 / .34),transparent 65%);opacity:0;scale:0}
.chap.rip::before{animation:ripple .65s var(--out)}
@keyframes ripple{0%{opacity:1;scale:0}100%{opacity:0;scale:1}}
@keyframes sheen{0%,55%{transform:translateX(-130%)}to{transform:translateX(130%)}}

/* ---------- botones ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 24px;border:2px solid transparent;border-radius:999px;font:600 14px/1 var(--sans);letter-spacing:.02em;text-decoration:none;white-space:nowrap;isolation:isolate}
.btn [data-ic] svg{width:1.3em;height:1.3em}
.btn-gold{background:var(--grad-gold);border-color:var(--gold-hi);color:var(--ink)}
.btn-wa{background:var(--grad-wa);border-color:var(--gold);color:var(--tx)}
.btn-gold::after,.btn-wa::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 28%,rgb(255 255 255 / .34) 50%,transparent 72%);transform:translateX(-130%);animation:sheen 3.8s var(--spring) infinite;animation-delay:var(--sd,.4s)}
.btn-wa::after{background:linear-gradient(100deg,transparent 28%,rgb(227 197 92 / .42) 50%,transparent 72%)}
.btn-line{border-color:rgb(201 162 39 / .45);color:var(--gold-hi);background:rgb(10 10 10 / .35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-lg{min-height:56px;padding:0 32px;font-size:15.5px}
.btn-sm{min-height:44px;padding:0 18px;font-size:13px}
@media (hover:hover){
  .btn-gold:hover,.btn-wa:hover{filter:brightness(1.12)}
  .btn-line:hover{background:var(--gold-dim);border-color:var(--gold)}
}
.link-btn{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:14px;font-weight:500;color:var(--tx-2);transition:color .2s}
.link-btn:hover{color:var(--gold-hi)}

/* ---------- aparición ---------- */
.js .rv:not(.in){opacity:0;translate:0 22px}
.js .rv.in{animation:rvIn .8s var(--out) both;animation-delay:var(--d,0ms)}
@keyframes rvIn{from{opacity:0;translate:0 22px}to{opacity:1;translate:none}}

/* ---------- marca: corona y letras ---------- */
.marca{display:inline-flex;flex-direction:column;align-items:center;line-height:1;font-size:14px;text-decoration:none}
.marca-corona{display:inline-block;margin-bottom:4px;color:var(--gold);animation:coronaCae .9s var(--bounce) both}
.marca-corona svg{display:block;width:14px;height:10px}
.marca-palabra{display:inline-flex;overflow:hidden;padding-bottom:.12em;margin-right:-.3em;font-weight:600;letter-spacing:.3em}
.marca-letra{display:inline-block;color:var(--tx);animation:letraSube .62s var(--out) both;animation-delay:calc(.42s + var(--n) * 45ms)}
.marca-letra:nth-child(n+5){color:var(--gold)}
.marca-lg{font-size:18px}
.marca-lg .marca-corona svg{width:20px;height:14px}
@keyframes coronaCae{0%{opacity:0;transform:translateY(-140%) scale(.7) rotate(-14deg)}55%{opacity:1}to{opacity:1;transform:none}}
@keyframes letraSube{0%{opacity:0;transform:translateY(105%)}to{opacity:1;transform:none}}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);height:var(--nav-h);border-bottom:1px solid transparent;transition:background-color .5s var(--spring),border-color .5s,backdrop-filter .5s}
.nav.scrolled{background:rgb(10 10 10 / .8);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--line)}
.nav-in{height:100%;width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav .marca{margin:-8px;padding:8px;border-radius:14px}
.pill-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 18px;border:2px solid var(--gold);border-radius:999px;background:var(--grad-wa);color:var(--tx);font:600 12.5px/1 var(--sans);letter-spacing:.025em;text-decoration:none;isolation:isolate}
.pill-wa::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 28%,rgb(227 197 92 / .42) 50%,transparent 72%);transform:translateX(-130%);animation:sheen 3.8s var(--spring) infinite}
.pill-wa [data-ic] svg{width:17px;height:17px}
.pill-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;background:rgb(23 23 23 / .8);font:600 12.5px/1 var(--sans);color:var(--tx)}
.pill-cart svg{width:20px;height:20px}
.pill-cart .dk-n{position:static}
@media (hover:hover){.pill-cart:hover{border-color:var(--gold);color:var(--gold-hi)}}
@media (hover:hover){.pill-wa:hover{filter:brightness(1.18)}}

/* ---------- HERO: dos mundos, un solo escenario ---------- */
.hero{position:relative;min-height:max(100svh,600px);display:flex;align-items:center;overflow:hidden;isolation:isolate;background:var(--bg)}
.reel{position:absolute;inset:0;z-index:-2}
.reel picture,.reel img{position:absolute;inset:0;width:100%;height:100%}
.reel img{object-fit:cover;object-position:78% center;opacity:0;transform:translateX(28px);transition:opacity .18s linear,transform .45s var(--out)}
.reel img.on{opacity:1;transform:none;z-index:2}
.reel img.out{opacity:1;transform:none;z-index:1;transition:none}
.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgb(10 10 10 / .9) 0,rgb(10 10 10 / .55) 34%,transparent 62%),linear-gradient(to bottom,rgb(10 10 10 / .6) 0,transparent 22%,transparent 70%,var(--bg) 100%)}
.hero-copy{padding-top:var(--nav-h);padding-bottom:56px}
.hero-copy>*{max-width:560px}
.hero-title{font:600 clamp(52px,6.6vw,104px)/.96 var(--serif);letter-spacing:-.015em;margin-top:2px;padding-bottom:.08em}
.hero-sub{margin-top:22px;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--tx-2);text-wrap:balance}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-now{position:absolute;right:max(var(--gut),calc((100% - var(--wrap)) / 2));bottom:max(40px,calc(env(safe-area-inset-bottom) + 40px));display:grid;justify-items:end;gap:6px}
.now{display:grid;grid-template-columns:auto auto;grid-template-areas:'w a' 'n a' 'p a';gap:2px 18px;align-items:center;width:300px;padding:11px 18px;border:1px solid var(--line-2);border-radius:var(--r-m);background:rgb(10 10 10 / .55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);text-align:left}
.now-w{grid-area:w;font:600 10.5px/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.now-n{grid-area:n;font:600 24px/1.05 var(--serif)}
.now-p{grid-area:p;font-size:13px;color:var(--tx-2)}
.now-a{grid-area:a;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gold-dim);color:var(--gold-hi);transition:transform .45s var(--spring),background-color .3s}
.now-a svg{width:18px;height:18px}
.now.swap .now-w,.now.swap .now-n,.now.swap .now-p{animation:txtUp .3s var(--out)}
@keyframes txtUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (hover:hover){.now:hover{border-color:rgb(201 162 39 / .6)}.now:hover .now-a{transform:translateX(3px);background:var(--gold);color:var(--ink)}}
.ticks{display:flex;gap:6px}
.tick{width:34px;height:44px;margin:-12px 0;display:grid;align-items:center;border-radius:6px}
.tick::before{content:"";display:block;height:3px;border-radius:2px;background:rgb(245 241 232 / .25);transition:background-color .2s,height .2s}
.tick[aria-current="true"]::before{background:var(--gold-hi);height:4px}

/* ---------- MARQUEE ---------- */
.marquee{position:relative;overflow:hidden;border-block:1px solid var(--line);background:var(--bg-2);padding:18px 64px 18px 0}
.marquee-track{display:flex;width:max-content;animation:marquee 60s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{position:relative;padding:0 30px;font:500 12.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--tx-2);white-space:nowrap}
.marquee-track span::after{content:"";position:absolute;right:-3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--gold)}
@keyframes marquee{to{transform:translateX(-50%)}}
.motion-toggle{position:absolute;right:10px;top:50%;translate:0 -50%;z-index:2;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:rgb(10 10 10 / .85);border:1px solid var(--line);color:var(--tx-2)}
.motion-toggle:hover{color:var(--gold-hi);border-color:rgb(201 162 39 / .5)}
.motion-toggle svg{width:18px;height:18px}

/* ---------- secciones ---------- */
.sec{padding:clamp(64px,7vw,104px) 0}
.reloj,.catalogo,.pack,.confianza,.voces,.entregas,.pedir,.faq{padding:clamp(60px,6.5vw,96px) 0}

/* ---------- RELOJ ---------- */
.reloj{overflow:hidden;overflow:clip;background:var(--bg-2);border-block:1px solid var(--line);--sx:50%;--sy:20%;--lum:.5}
.reloj-glow{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(60% 70% at var(--sx) var(--sy),rgb(201 162 39 / calc(.05 + .24*var(--lum))),transparent 70%),
  radial-gradient(70% 60% at 50% 110%,rgb(245 241 232 / calc(.06*(1 - var(--lum)))),transparent 70%);transition:background .4s}
.reloj-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,96px);align-items:start}
.reloj-dial-col{display:grid;gap:18px;justify-items:start;position:sticky;top:calc(var(--nav-h) + 20px)}
.dial{--d:min(400px,80vw,44vh);position:relative;width:var(--d);aspect-ratio:1;border-radius:50%;margin-top:6px;touch-action:pan-y;cursor:grab;user-select:none;outline-offset:10px}
.dial:active{cursor:grabbing}
.dial-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line-2);color:var(--tx-3);background:radial-gradient(circle,rgb(23 23 23 / .85),rgb(10 10 10 / .4) 72%);box-shadow:inset 0 0 40px rgb(0 0 0 / .5)}
.dial-ring i{position:absolute;left:50%;top:50%;width:1px;height:7px;background:currentColor;transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--d) * -.5 + 12px));opacity:.55}
.dial-ring i.h{height:13px;opacity:1;background:var(--tx-2)}
.dial-ring b{position:absolute;left:50%;top:50%;font:500 11px/1 var(--sans);letter-spacing:.04em;color:var(--tx-3);transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--d) * -.5 + 36px)) rotate(calc(var(--a) * -1))}
.dial-hand{position:absolute;inset:0;transform:rotate(var(--ang,0deg));transition:transform .45s var(--spring);pointer-events:none}
.dial.drag .dial-hand{transition:none}
.dial-hand::before{content:"";position:absolute;left:50%;top:9%;bottom:calc(50% + var(--d) * .3);width:1px;background:linear-gradient(to bottom,var(--gold-hi),transparent)}
.dial-knob{position:absolute;left:50%;top:0;width:26px;height:26px;margin:-1px 0 0 -13px;border-radius:50%;pointer-events:auto;touch-action:none;cursor:grab;background:var(--grad-gold);box-shadow:0 0 0 8px rgb(201 162 39 / .16),0 8px 28px rgb(201 162 39 / .4)}
.dial-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.dial-time{font:600 calc(var(--d) * .26)/.9 var(--serif);font-variant-numeric:lining-nums tabular-nums;display:flex;justify-content:center;align-items:baseline}
.dial-colon{color:var(--gold-hi);padding:0 .02em}
.dial-ampm{font:500 calc(var(--d) * .036)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--tx-3);margin-top:8px}
.dial-name{font:600 calc(var(--d) * .07)/1 var(--serif);font-style:italic;color:var(--gold-hi);margin-top:10px}
.reloj-cards{display:grid;gap:18px}
.reloj-titulo{font:600 clamp(26px,2.6vw,36px)/1.1 var(--serif);max-width:22ch;min-height:2.2em;text-wrap:balance}
.reloj-list{display:grid;gap:10px}
.reloj-list>li{display:grid;grid-template-columns:84px 1fr auto;gap:4px 18px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);animation:swapIn .6s var(--out) both;animation-delay:calc(var(--i,0) * 70ms);transition:border-color .3s,transform .45s var(--spring)}
@media (hover:hover){.reloj-list>li:hover{border-color:rgb(201 162 39 / .45)}}
@keyframes swapIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rl-img{width:84px;aspect-ratio:1;object-fit:cover;border-radius:var(--r-s);background:var(--card-2);cursor:pointer;grid-row:1/3}
.rl-name{font:600 22px/1.1 var(--serif);text-align:left}
.rl-name:hover{color:var(--gold-hi)}
.rl-nota{grid-column:2;grid-row:2;font-size:14px;color:var(--tx-2);line-height:1.5;max-width:52ch}
.rl-act{grid-column:3;grid-row:1/3;display:grid;gap:8px;justify-items:end;align-self:center}
.rl-precio{font:600 20px/1 var(--serif);white-space:nowrap}
.rl-precio small{font:400 12px/1 var(--sans);color:var(--tx-3);margin-right:5px}
.mini-add{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 16px;border:1px solid rgb(201 162 39 / .45);border-radius:999px;font:600 12.5px/1 var(--sans);color:var(--gold-hi)}
@media (hover:hover){.mini-add:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}}

/* ---------- CATÁLOGO ---------- */
.cat-head{display:grid;max-width:860px;margin-bottom:clamp(30px,3.6vw,48px)}
.cat-head .lead{margin-top:18px}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.door{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(150px,15vw,220px);display:flex;align-items:flex-end;padding:clamp(18px,2vw,26px);text-align:left;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--card-2)}
.door video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:62% 28%;transition:transform 1.4s var(--out);opacity:.9}
.door:nth-child(2) video{object-position:84% 50%}
.door::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgb(10 10 10 / .92) 0,rgb(10 10 10 / .2) 72%)}
.door-txt{display:grid;gap:3px}
.door-txt b{font:600 clamp(26px,2.5vw,36px)/1.02 var(--serif)}
.door-txt small{font-size:13.5px;color:var(--tx-2);white-space:nowrap}
.door[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold),0 14px 40px -18px rgb(201 162 39 / .5)}
.door[aria-pressed="true"] .door-txt small{color:var(--gold-hi)}
@media (hover:hover){.door:hover video{transform:scale(1.05)}.door:hover{border-color:rgb(201 162 39 / .6)}}
.door-all{grid-column:1/-1;justify-self:start;min-height:48px;padding:0 28px;border:1px solid var(--line-2);border-radius:999px;font:600 14px/1.2 var(--sans);color:var(--tx-2);background:var(--card)}
.door-all[aria-pressed="true"]{background:var(--gold-dim);color:var(--gold-hi);border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.filtros{display:grid;gap:18px;margin-bottom:22px}
.chips{display:flex;gap:8px;flex-wrap:wrap;min-height:44px}
.chip{min-height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;font:500 13.5px/1 var(--sans);color:var(--tx-2);background:var(--card)}
@media (hover:hover){.chip:hover{border-color:var(--gold);color:var(--tx)}}
.chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}

.cat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;grid-auto-flow:dense}
.card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;cursor:pointer;transition:transform .45s var(--spring),scale .34s var(--spring),border-color .35s,box-shadow .45s var(--spring),opacity .8s var(--out)}
@media (hover:hover){.card:hover{transform:translateY(-5px);border-color:rgb(201 162 39 / .55);box-shadow:0 26px 48px -24px rgb(0 0 0 / .95),0 0 0 1px rgb(201 162 39 / .14)}.card:hover .card-media img{transform:scale(1.05)}}
.card:active{scale:.985;transition-duration:90ms}
.card-media{position:relative;display:block;width:100%;aspect-ratio:10/11;overflow:hidden;margin:0;background:var(--card-2)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--out),opacity .35s}
.card-body{display:flex;flex-direction:column;gap:5px;padding:14px;flex:1}
.card-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.card-name{font:600 24px/1.05 var(--serif);letter-spacing:-.005em}
.card-name button{text-align:left;color:inherit}
.card-name button::after{content:"";position:absolute;inset:0;z-index:1}
.card-name button:focus-visible{outline:0}
.card:has(.card-name button:focus-visible){outline:2px solid var(--gold-hi);outline-offset:2px}
.card-line{font-size:13.5px;color:var(--tx-2);line-height:1.45;min-height:2.9em;text-wrap:pretty}
.card-badge{min-height:1.5em;font-size:12px;font-weight:500;color:var(--gold-hi)}
.card-sizes{position:relative;z-index:2;display:flex;flex-wrap:nowrap;gap:6px;margin-top:4px;padding-inline-end:22px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent)}
.card-sizes::-webkit-scrollbar{display:none}
.sz{flex:none;position:relative;min-height:40px;padding:0 13px;border:1px solid var(--line-2);border-radius:999px;font:500 12.5px/1 var(--sans);color:var(--tx-2);background:transparent}
@media (hover:hover){.sz:hover{border-color:var(--gold);color:var(--tx)}}
.sz[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}
.card-buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.card-price{font:600 28px/1 var(--serif);white-space:nowrap}
.card-price small{display:block;font:500 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-bottom:4px}
.card .mini-add{position:relative;z-index:2;width:46px;min-height:46px;padding:0;border:0;background:var(--grad-gold);color:var(--ink);border-radius:50%}
.card .mini-add svg{width:20px;height:20px}
.card .mini-add .mini-add-t{display:none}
.mini-add.ok{background:var(--grad-wa);color:var(--tx)}
.card.tile{cursor:default;justify-content:space-between;gap:22px;padding:clamp(20px,2vw,28px);background:linear-gradient(160deg,rgb(201 162 39 / .2),rgb(201 162 39 / .06));border-color:rgb(201 162 39 / .45)}
.card.tile .card-name{font-size:clamp(28px,2.6vw,36px);margin:10px 0}
.card.tile .card-line{font-size:15px;max-width:34ch;min-height:0}
.card.tile .btn{width:100%;padding:10px 14px;white-space:normal;text-align:center;line-height:1.15;min-height:52px}
@media (hover:hover){.card.tile:hover{transform:none}}
.card.tile-wide{grid-column:1/-1!important;flex-direction:row;align-items:center;gap:28px;padding:20px 26px}
.card.tile-wide .card-line{display:none}
.card.tile-wide .card-name{margin:6px 0 0}
.card.tile-wide .btn{width:auto;flex:none;padding:0 26px}

/* ---------- PACK ---------- */
.pack{background:var(--bg-2);border-block:1px solid var(--line);overflow:hidden}
.pack-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,90px);align-items:center}
.pack-copy{display:grid;gap:22px}
.pack-math{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,52px);align-items:flex-end;padding:20px 24px;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--card)}
.pack-math p{display:grid;gap:4px}
.pack-math span{font:500 11px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.pack-math s{font:600 clamp(26px,2.6vw,36px)/1 var(--serif);color:var(--tx-3);text-decoration-thickness:2px;text-decoration-color:var(--gold)}
.pm-new b{font:600 clamp(52px,6vw,88px)/.9 var(--serif);color:var(--gold-hi)}
.pm-save i{font-style:normal}
.pm-save b{font:600 clamp(26px,2.6vw,36px)/1 var(--serif)}
.pack-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pack-trio li{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--card)}
.pack-trio img{width:52px;height:52px;object-fit:cover;border-radius:10px;background:var(--card-2)}
.pack-trio b{display:block;font:600 19px/1.05 var(--serif)}
.pack-trio small{font-size:12.5px;color:var(--tx-3);line-height:1.35;display:block;margin-top:3px}
.pack-cta{display:flex;flex-wrap:wrap;gap:12px}
.pack-media img{width:82%;margin-left:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 35%;border-radius:var(--r-l);border:1px solid var(--line-2);box-shadow:0 40px 80px -30px rgb(0 0 0 / .85)}

/* ---------- CONFIANZA ---------- */
.conf-head{display:grid;max-width:900px;margin-bottom:clamp(32px,4vw,56px)}
.conf-head .lead{margin-top:18px}
.conf-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.cb{position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:space-between;gap:30px;padding:clamp(22px,2.6vw,36px);border:1px solid var(--line);border-radius:var(--r-l);background:var(--card);min-height:290px}
.cb-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.5;transition:transform 1.2s var(--out),opacity .6s}
.cb::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgb(10 10 10 / .97) 34%,rgb(10 10 10 / .72) 100%)}
@media (hover:hover){.cb:hover .cb-bg{transform:scale(1.05);opacity:.65}}
.cb-1{grid-column:span 7}.cb-2{grid-column:span 5}.cb-3{grid-column:span 5}.cb-4{grid-column:span 7}
.cb-cifra{font:600 clamp(44px,5vw,76px)/.95 var(--serif);color:var(--gold-hi)}
.cb-4 .cb-cifra{font-size:clamp(36px,4vw,60px)}
.cb h3{font:600 clamp(22px,2vw,28px)/1.1 var(--serif);margin-bottom:10px}
.cb p:not(.cb-cifra){color:var(--tx-2);max-width:54ch;font-size:15.5px;text-wrap:pretty}
.cb small{display:block;margin-top:12px;font-size:13px;color:var(--tx-3)}

/* ---------- VOCES ---------- */
.voces{background:var(--bg-2);border-block:1px solid var(--line);overflow:hidden}
.voces-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,6vw,90px);align-items:end;margin-bottom:clamp(30px,4vw,52px)}
.voces-top .lead{margin-top:16px}
.comunidad{display:grid;gap:8px;padding:clamp(20px,2.4vw,30px);border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--card)}
.com-num{font:600 clamp(52px,6vw,88px)/.9 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.com-num span{color:var(--gold-hi)}
.com-txt{font-size:15.5px;color:var(--tx-2);max-width:32ch}
.com-links{display:flex;gap:8px;margin-top:8px}
.com-links a,.foot-social a{display:inline-grid;place-items:center;width:46px;height:46px;border:1px solid var(--line-2);border-radius:50%;background:var(--card-2);transition:background-color .3s,color .3s,border-color .3s,scale .34s var(--spring)}
.com-links a:hover,.foot-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.com-links a:active,.foot-social a:active{scale:.94}
.com-links svg,.foot-social svg{width:21px;height:21px}
.voces-rail{scroll-padding-inline:var(--gut);display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px var(--gut) 20px;margin-inline:calc(var(--gut) * -1);cursor:grab;scrollbar-width:thin;scrollbar-color:var(--gold) var(--line)}
.voces-rail.drag{cursor:grabbing;scroll-snap-type:none}
.quote{flex:0 0 min(400px,82vw);scroll-snap-align:start;display:grid;gap:20px;align-content:space-between;padding:26px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--card);min-height:240px;user-select:none}
.quote p{font-size:16.5px;line-height:1.55;color:var(--tx);text-wrap:pretty}
.quote footer{display:grid;gap:2px;padding-top:14px;border-top:1px solid var(--line)}
.quote b{font-size:14.5px;font-weight:600}
.quote span{font-size:13px;color:var(--tx-3)}

/* ---------- ENTREGAS ---------- */
.entregas{padding-bottom:clamp(52px,5.5vw,84px)}
.entregas-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(22px,5vw,72px);align-items:end;margin-bottom:clamp(26px,3.6vw,44px)}
.entregas-strip{scroll-padding-inline:max(var(--gut),calc((100% - var(--wrap)) / 2));display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px max(var(--gut),calc((100% - var(--wrap)) / 2)) 20px;cursor:grab;scrollbar-width:thin;scrollbar-color:var(--gold) var(--line)}
.entregas-strip.drag{cursor:grabbing;scroll-snap-type:none}
.ef{position:relative;flex:0 0 clamp(190px,19vw,270px);margin:0;overflow:hidden;border-radius:var(--r-m);background:var(--card-2);scroll-snap-align:start}
.ef img,.ef video{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;transition:transform 1s var(--out)}
@media (hover:hover){.ef:hover img{transform:scale(1.04)}}
.ef-video figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(to top,rgb(10 10 10 / .9),transparent);font-size:13.5px;font-weight:500}

/* ---------- CÓMO PEDIR ---------- */
.pedir{background:var(--bg-2);border-block:1px solid var(--line)}
.pedir-head{max-width:880px}
.pasos{counter-reset:paso;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:clamp(30px,4vw,52px) 0}
.pasos li{counter-increment:paso;display:grid;gap:10px;align-content:start;padding:22px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--card)}
.pasos li::before{content:counter(paso);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gold-dim);color:var(--gold-hi);font:600 22px/1 var(--serif)}
.pasos b{font:600 28px/1 var(--serif)}
.pasos p{color:var(--tx-2);font-size:15px;max-width:30ch}
.pedir-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.pedir-cols .h-md{margin-bottom:18px}
.env{display:grid;grid-template-columns:1fr auto;grid-template-areas:'z c' 'n c' 'h h' 'p p';gap:4px 22px;padding:18px 20px;margin-bottom:10px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--card)}
.env-z{grid-area:z;font:600 10.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.env h4{grid-area:n;font:600 24px/1.05 var(--serif)}
.env-h{grid-area:h;margin-top:8px;font-size:14.5px;color:var(--tx);font-weight:500}
.env>p:last-child{grid-area:p}
.env-c{grid-area:c;align-self:center;font:600 30px/1 var(--serif);white-space:nowrap;text-align:right}
.env-c small{display:block;font:500 10.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-bottom:3px}
.env p{font-size:14px;color:var(--tx-2);line-height:1.55;max-width:58ch}
.envios .nota{margin-top:12px}
.pagos{display:grid;gap:12px;padding:20px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--card)}
.pago-yape{display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line)}
.pago-yape img{width:140px;height:140px;object-fit:cover;background:#fff;border-radius:var(--r-m)}
.pago-t{font:600 10.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.pago-bco{display:grid;gap:4px}
.pb-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:8px 0}
.pb-row small{display:block;font:500 10.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.pb-row code{font:600 19px/1.3 var(--sans);letter-spacing:.03em;font-variant-numeric:tabular-nums;word-break:break-all}
.copy{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;font:600 12.5px/1 var(--sans);color:var(--tx-2)}
.copy:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.paises{margin-top:clamp(40px,5vw,68px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line);display:grid;gap:12px}
.paises .pais-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:8px}
.paises .pais-chips a{display:grid;grid-template-columns:1fr auto;grid-template-areas:'n a' 's a';gap:2px 10px;align-items:center;padding:16px 18px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--card);text-decoration:none;transition:border-color .3s,background-color .3s,transform .45s var(--spring)}
.paises .pais-chips a:hover{border-color:var(--gold);background:var(--gold-dim);transform:translateY(-3px)}
.paises .pais-chips b{grid-area:n;font:600 22px/1.05 var(--serif)}
.paises .pais-chips small{grid-area:s;font-size:12.5px;color:var(--tx-2);font-variant-numeric:tabular-nums}
.paises .pais-a{grid-area:a;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line-2);border-radius:50%}
.paises .pais-a svg{width:16px;height:16px}
.paises .nota a{color:var(--gold-hi);text-underline-offset:4px}

/* ---------- FAQ ---------- */
.faq{background:var(--bg-2);border-block:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(30px,6vw,90px);align-items:start}
.faq-grid>.h-xl{position:sticky;top:calc(var(--nav-h) + 24px)}
.faq-list{display:grid;gap:8px}
details.q{border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);transition:border-color .3s}
details.q[open]{border-color:rgb(201 162 39 / .4)}
details.q summary,.f-acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:14px 20px;cursor:pointer;font:600 22px/1.2 var(--serif)}
details.q summary::-webkit-details-marker,.f-acc summary::-webkit-details-marker{display:none}
details.q summary:hover,.f-acc summary:hover{color:var(--gold-hi)}
.q-i{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--card-2);border:1px solid var(--line-2)}
.q-i::before,.q-i::after{content:"";position:absolute;left:8px;top:13px;width:12px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .35s var(--spring)}
.q-i::after{transform:rotate(90deg)}
details[open]>summary .q-i::after{transform:rotate(0)}
.q-a{padding:0 20px 20px;color:var(--tx-2);max-width:62ch;text-wrap:pretty;font-size:15.5px;animation:swapIn .5s var(--out)}

/* ---------- CIERRE ---------- */
.cierre{padding:clamp(76px,9vw,130px) 0 clamp(150px,13vw,170px);overflow:hidden;text-align:center;isolation:isolate}
.cierre-bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,var(--bg),rgb(10 10 10 / .45) 40%,var(--bg)),url("../assets/img/hero-climax-escritorio.webp") center/cover no-repeat;opacity:.6}
.cierre-in{display:grid;justify-items:center;gap:22px}
.cierre-t{font:600 clamp(48px,8vw,116px)/.96 var(--serif);letter-spacing:-.015em;padding-bottom:.08em}
.cierre .lead{margin:0 auto;text-align:center;max-width:52ch}
.cierre-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:10px}

/* ---------- FOOTER ---------- */
.foot{padding:clamp(48px,6vw,84px) 0 130px;border-top:1px solid var(--line);background:var(--bg-2)}
.foot-grid{align-items:start;display:grid;grid-template-columns:1.2fr 1fr 1.2fr 1fr;gap:clamp(22px,4vw,56px)}
.foot-brand{display:grid;gap:16px;align-content:start;justify-items:start}
.foot-brand p,.foot-col p{font-size:14.5px;color:var(--tx-2);line-height:1.6}
.foot-social{display:flex;flex-wrap:wrap;gap:8px}
.foot-t{font:600 10.5px/1.4 var(--sans)!important;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)!important;margin-bottom:10px}
.foot-col a{color:var(--tx);text-underline-offset:4px}
.foot-legal{margin-top:42px;padding-top:24px;border-top:1px solid var(--line);display:grid;gap:12px}
.foot-legal p{font-size:13.5px;color:var(--tx-2);line-height:1.6;max-width:120ch}
.foot-legal p:last-child{font-size:12.5px;color:var(--tx-3)}

/* ---------- DOCK inferior (estilo Apple) ---------- */
.dock{position:fixed;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:var(--z-dock);display:flex;justify-content:center;padding:0 16px;pointer-events:none;transform:translateY(130%);opacity:0;transition:transform .42s var(--spring),opacity .42s}
.dock.on{transform:none;opacity:1}
.dock-in{pointer-events:auto;display:flex;gap:2px;width:100%;max-width:392px;padding:6px;border:1px solid var(--line);border-radius:28px;background:rgb(10 8 7 / .78);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);box-shadow:0 18px 40px -16px rgb(0 0 0 / .9)}
.dk{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 0 8px;border-radius:22px;color:rgb(245 241 232 / .5);font:500 10px/1 var(--sans);text-decoration:none;transition:color .34s,scale .34s var(--spring)}
.dk:active{scale:.94;transition-duration:90ms}
.dk-ic{position:relative;display:grid;place-items:center;width:32px;height:32px}
.dk-ic::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgb(201 162 39 / .16);scale:.5;opacity:0;transition:scale .42s var(--bounce),opacity .42s}
.dk-ic svg{position:relative;width:21px;height:21px;transition:scale .34s}
.dk[aria-current="true"]{color:var(--gold-hi)}
.dk[aria-current="true"] .dk-ic::before{scale:1;opacity:1}
.dk[aria-current="true"] .dk-ic svg{scale:1.06}
.dk-n{position:absolute;top:-3px;right:-5px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:var(--grad-gold);color:var(--ink);font:700 10.5px/1 var(--sans)}
.dk-n.bump{animation:bump .5s var(--bounce)}
@keyframes bump{0%{scale:1}40%{scale:1.5}100%{scale:1}}
@media (hover:hover){.dk:hover{color:var(--tx)}}

.toast{position:fixed;left:50%;bottom:calc(98px + env(safe-area-inset-bottom,0px));z-index:var(--z-toast);transform:translate(-50%,24px);opacity:0;pointer-events:none;background:rgb(245 241 232 / .96);color:var(--ink);padding:12px 20px;border-radius:999px;font:600 14px/1.3 var(--sans);transition:all .45s var(--spring);max-width:calc(100vw - 32px);text-align:center}
.toast.on{transform:translate(-50%,0);opacity:1}

/* ---------- DIÁLOGOS ---------- */
dialog{border:0;padding:0;color:var(--tx);background:var(--bg)}
dialog::backdrop{background:rgb(5 4 4 / .78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.36s;animation-timing-function:var(--spring)}
::view-transition-group(prod){animation-duration:.6s;animation-timing-function:var(--spring);border-radius:var(--r-l);overflow:clip}
::view-transition-old(prod),::view-transition-new(prod){height:100%;object-fit:cover}

/* ficha: pantalla completa, como una página */
.ficha{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(110% 55% at 85% 0,rgb(90 40 14 / .3),transparent 62%),var(--bg);scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.no-vt .ficha[open]{animation:zoomIn .5s var(--spring)}
@keyframes zoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.f-topbar{position:sticky;top:0;z-index:6;background:rgb(10 10 10 / .86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.f-top{width:min(1180px,100% - 2*var(--gut));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--nav-h)}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 12px;border:1px solid var(--line-2);border-radius:999px;background:rgb(23 23 23 / .8);font:500 13.5px/1 var(--sans);color:var(--tx)}
.back svg{width:18px;height:18px;rotate:180deg}
@media (hover:hover){.back:hover{border-color:var(--gold);color:var(--gold-hi)}}
.f-grid{width:min(1180px,100% - 2*var(--gut));margin:6px auto 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4.5vw,64px);align-items:start}
.f-gal{position:sticky;top:calc(var(--nav-h) + 4px);display:grid;gap:12px}
.f-stage{border-radius:var(--r-l);overflow:hidden;background:var(--card);border:1px solid var(--line)}
.f-main{width:100%;height:auto;max-height:calc(100dvh - var(--nav-h) - 130px);object-fit:contain;margin-inline:auto;transition:opacity .25s}
.f-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.f-thumbs button{width:64px;height:64px;border:1px solid var(--line);border-radius:14px;overflow:hidden;opacity:.6;background:var(--card-2);transition:opacity .25s,border-color .25s,scale .34s var(--spring)}
.f-thumbs button img{width:100%;height:100%;object-fit:cover}
.f-thumbs button:hover{opacity:1}
.f-thumbs button[aria-current="true"]{opacity:1;border-color:var(--gold)}
.f-info{display:grid;gap:18px;align-content:start;min-width:0;padding-bottom:20px}
.f-meta{margin-bottom:-4px}
.f-nombre{font:600 clamp(38px,4.6vw,64px)/1 var(--serif);letter-spacing:-.015em;padding-bottom:.04em;outline:0}
.f-titular{font:italic 600 clamp(22px,2vw,28px)/1.2 var(--serif);color:var(--gold-hi);margin-top:-6px}
.f-sub{color:var(--tx-2);max-width:56ch;text-wrap:pretty}
.f-momento{display:grid;gap:6px;padding:4px 0 4px 18px;border-left:2px solid rgb(201 162 39 / .6);font:italic 500 19px/1.4 var(--serif);color:var(--tx-2)}
.f-buy{display:grid;gap:14px;padding:20px;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--card)}
.f-pres{display:grid;gap:8px}
.f-pres-t,.f-sec-t{font:600 10.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3)}
.f-opt,.opt{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;width:100%;padding:13px 16px;border:1px solid var(--line-2);border-radius:var(--r-m);text-align:left;background:transparent}
@media (hover:hover){.f-opt:hover,.opt:hover{border-color:var(--gold)}}
.f-opt[aria-checked="true"],.opt[aria-checked="true"]{border-color:var(--gold);background:var(--gold-dim)}
.f-radio{position:relative;width:20px;height:20px;border:1.5px solid var(--line-2);border-radius:50%;transition:border-color .25s}
.f-opt[aria-checked="true"] .f-radio,.opt[aria-checked="true"] .f-radio{border-color:var(--gold-hi)}
.f-opt[aria-checked="true"] .f-radio::after,.opt[aria-checked="true"] .f-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--gold-hi);animation:pop .4s var(--bounce)}
@keyframes pop{from{scale:0}to{scale:1}}
.f-opt b,.opt b{display:block;font-size:15.5px;font-weight:600}
.f-opt small,.opt small{font-size:12.5px;color:var(--tx-2);display:block}
.f-opt .f-p{font:600 24px/1 var(--serif);white-space:nowrap}
.opt .o-c{font:600 20px/1 var(--serif);white-space:nowrap}
.f-buyrow{display:grid;grid-template-columns:auto 1fr;gap:10px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;min-height:52px;background:rgb(10 10 10 / .4)}
.qty button{width:46px;min-height:46px;display:grid;place-items:center;border-radius:50%;transition:background-color .2s,scale .34s var(--spring)}
.qty button:hover{background:var(--card-2)}
.qty button:active{scale:.9}
.qty button svg{width:16px;height:16px}
.qty output{min-width:30px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.f-buyrow .btn{width:100%;min-height:52px}
.f-buyrow .btn b{font-weight:700}
.f-wa{justify-self:start}
.f-acc{display:grid;gap:8px}
.f-acc details{border:1px solid var(--line);border-radius:var(--r-m);background:var(--card)}
.f-acc details[open]{border-color:rgb(201 162 39 / .35)}
.f-acc .acc-b{padding:0 20px 20px;display:grid;gap:12px;color:var(--tx-2);font-size:15px;line-height:1.6}
.f-acc ul.pts{display:grid;gap:9px}
.f-acc ul.pts li{position:relative;padding-left:20px}
.f-acc ul.pts li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.f-acc ul.warn li::before{background:var(--tx-3)}
.comps{display:flex;flex-wrap:wrap;gap:6px}
.comp{min-height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;font:500 13px/1 var(--sans);color:var(--tx-2);text-align:left}
.comp:hover{border-color:var(--gold);color:var(--tx)}
.comp[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}
.comp-out{padding:16px 18px;border-radius:var(--r-s);background:var(--bg);border:1px solid var(--line);color:var(--tx);min-height:80px}
.comp-out b{display:block;font:600 20px/1.2 var(--serif);margin-bottom:4px}
.nutri{width:100%;border-collapse:collapse;font-size:14px}
.nutri th,.nutri td{padding:7px 0;text-align:left;border-top:1px solid var(--line);font-weight:400}
.nutri td:last-child{text-align:right;color:var(--tx-3)}
.nutri caption{text-align:left;color:var(--tx-3);font-size:13px;padding-bottom:8px}
.faqp{padding:0 12px 12px!important}
.faqp details{border-radius:var(--r-s);background:var(--card-2)}
.faqp summary{font:600 16px/1.3 var(--sans);min-height:48px;padding:10px 14px}

/* ficha: lo que va bien con esto */
.f-recs{width:min(1180px,100% - 2*var(--gut));margin:clamp(34px,4.5vw,64px) auto 0;padding-bottom:140px}
.f-recs .h-md{margin-bottom:16px}
.rec-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rec{position:relative;display:grid;grid-template-columns:76px 1fr auto;gap:4px 14px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);text-align:left}
.rec img{grid-row:1/3;width:76px;height:76px;object-fit:cover;border-radius:var(--r-s);background:var(--card-2)}
.rec-n{font:600 21px/1.05 var(--serif);align-self:end}
.rec-n button{text-align:left}
.rec-n button::after{content:"";position:absolute;inset:0;z-index:1}
.rec-l{grid-column:2;font-size:12.5px;color:var(--tx-2);line-height:1.35;align-self:start}
.rec-p{grid-column:3;grid-row:1;font:600 19px/1 var(--serif);white-space:nowrap}
.rec .mini-add{grid-column:3;grid-row:2;position:relative;z-index:2;width:42px;min-height:42px;padding:0;border:0;border-radius:50%;background:var(--grad-gold);color:var(--ink);justify-self:end}
.rec .mini-add svg{width:18px;height:18px}
@media (hover:hover){.rec:hover{border-color:rgb(201 162 39 / .5)}}

/* ficha: barra de compra flotante cuando el panel sale de pantalla */
.f-bar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:7;width:min(560px,100% - 28px);translate:-50% 150%;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 22px;border:1px solid var(--line-2);border-radius:999px;background:rgb(16 15 14 / .86);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 18px 40px -14px rgb(0 0 0 / .9);transition:translate .5s var(--spring)}
.f-bar.on{translate:-50% 0}
.f-bar-t{display:grid;min-width:0;margin-right:auto}
.f-bar-t b{font:600 18px/1.1 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-bar-t span{font-size:12.5px;color:var(--tx-2)}

/* ficha: lo que sigue después de añadir */
.f-sheet{position:fixed;left:50%;bottom:0;z-index:8;width:min(760px,100%);translate:-50% 0;padding:22px clamp(18px,3vw,30px) calc(22px + env(safe-area-inset-bottom,0px));border:1px solid var(--line-2);border-bottom:0;border-radius:var(--r-l) var(--r-l) 0 0;background:rgb(18 17 16 / .94);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);box-shadow:0 0 0 100vmax rgb(5 4 4 / .55),0 -30px 80px -20px rgb(0 0 0 / .95);animation:sheetUp .55s var(--spring)}
@keyframes sheetUp{from{translate:-50% 100%}to{translate:-50% 0}}
.sh-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sh-ok{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--grad-wa);color:var(--tx);animation:pop .5s var(--bounce)}
.sh-ok svg{width:20px;height:20px}
.sh-head b{display:block;font:600 22px/1.1 var(--serif)}
.sh-head span{font-size:13px;color:var(--tx-2)}
.sh-recs{display:grid;gap:8px;margin-bottom:16px}
.sh-recs .rec,.car-recs .rec{grid-template-columns:56px 1fr auto auto;padding:8px 10px;gap:0 12px}
.sh-recs .rec img,.car-recs .rec img{width:56px;height:56px;grid-row:1}
.sh-recs .rec-n,.car-recs .rec-n{grid-row:1;grid-column:2;align-self:center;font-size:19px}
.sh-recs .rec-l,.car-recs .rec-l{display:none}
.sh-recs .rec-p,.car-recs .rec-p{grid-row:1;grid-column:3;align-self:center;font-size:18px}
.sh-recs .rec .mini-add,.car-recs .rec .mini-add{grid-row:1;grid-column:4;align-self:center}
.sh-t{font:600 10.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3);margin-bottom:8px}
.sh-cta{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}

/* carrito: panel flotante a la derecha, hoja desde abajo en móvil */
.carrito{position:fixed;inset:8px 8px 8px auto;margin:0;width:min(520px,100vw - 16px);max-width:none;height:calc(100dvh - 16px);max-height:none;border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden;background:radial-gradient(120% 40% at 100% 0,rgb(90 40 14 / .28),transparent 60%),var(--bg)}
.carrito[open]{display:flex;flex-direction:column;animation:drawerIn .55s var(--spring)}
.no-vt .carrito[open]{animation:drawerIn .55s var(--spring)}
@keyframes drawerIn{from{transform:translateX(48px);opacity:0}to{transform:none;opacity:1}}
.car-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px}
.car-head h2{font:600 32px/1 var(--serif)}
.ficha-x{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;background:rgb(23 23 23 / .8)}
.ficha-x:hover{border-color:var(--gold);color:var(--gold-hi)}
.ficha-x svg{width:18px;height:18px}
.car-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.car-vacio{margin:auto;padding:36px 28px;display:grid;gap:16px;justify-items:center;text-align:center}
.car-vacio h3{font:600 32px/1.05 var(--serif)}
.car-vacio p{color:var(--tx-2);max-width:30ch}
.car-items{padding:4px 20px;display:grid;gap:8px}
.ci{display:grid;grid-template-columns:72px 1fr auto;gap:4px 14px;padding:12px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);align-items:start}
.ci img{width:72px;height:72px;object-fit:cover;grid-row:1/3;border-radius:var(--r-s);background:var(--card-2)}
.ci b{font:600 20px/1.1 var(--serif);display:block}
.ci small{color:var(--tx-3);font-size:13px}
.ci-p{font:600 20px/1 var(--serif);white-space:nowrap}
.ci .qty{min-height:40px;grid-column:2;justify-self:start}
.ci .qty button{width:38px;min-height:38px}
.ci-x{grid-column:3;justify-self:end;align-self:end;min-height:44px;padding:0 4px;color:var(--tx-3);font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.ci-x:hover{color:var(--gold-hi)}
.car-recs{padding:16px 20px 4px;display:grid;gap:8px}
.car-recs .sh-t{margin-bottom:2px}
.car-sec{padding:16px 20px;display:grid;gap:12px}
.car-sec label,.car-sec .lbl{font:600 10.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3)}
.sel{width:100%;min-height:52px;padding:0 16px;background:var(--card);color:var(--tx);border:1px solid var(--line-2);border-radius:var(--r-m);font:500 15px/1 var(--sans)}
.car-nota{padding:6px 20px 16px;font-size:12.5px}
.car-foot{position:sticky;bottom:0;padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-2);display:grid;gap:10px;background:rgb(10 10 10 / .94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.tot{display:flex;justify-content:space-between;align-items:baseline;color:var(--tx-2);font-size:15px}
.tot.g{color:var(--tx);font-weight:600}
.tot.g b{font:600 40px/1 var(--serif);color:var(--gold-hi)}
.tot-sub{font-size:13px;color:var(--tx-2);margin-top:-6px}
.car-foot .btn{width:100%}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1359px){.cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1099px){
  .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
  .pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .entregas-top{grid-template-columns:1fr}
  .paises .pais-chips{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rec-rail{grid-template-columns:1fr}
}
@media (max-width:899px){
  :root{--nav-h:60px}
  .pill-wa{width:44px;padding:0}
  .pill-wa .pw-t,.pill-cart .pw-t{display:none}
  .pill-cart{padding:0 12px}
  .hero{display:block;min-height:0}
  .reel{height:min(52svh,125vw);bottom:auto}
  .reel img{object-position:50% 45%}
  .hero-shade{background:linear-gradient(to bottom,rgb(10 10 10 / .55) 0,transparent 20%),linear-gradient(to bottom,transparent 0,transparent calc(min(52svh,125vw) - 80px),var(--bg) min(52svh,125vw))}
  .hero-copy{padding-top:calc(min(52svh,125vw) + 8px);padding-bottom:32px}
  .hero-title{font-size:clamp(44px,13vw,68px)}
  .hero-sub{margin-top:14px;font-size:15px}
  .hero-cta{margin-top:20px;max-width:420px}
  .hero-cta .btn{flex:1 1 100%}
  .hero-now{position:absolute;right:auto;left:var(--gut);top:calc(min(52svh,125vw) - 94px);bottom:auto;justify-items:start;gap:6px}
  .now{width:min(300px,calc(100vw - 2*var(--gut)));padding:9px 12px 9px 16px;gap:0 14px}
  .now-n{font-size:21px}
  .now-p{display:none}
  .now-a{width:34px;height:34px}
  .tick{width:28px}
  .reloj-grid{grid-template-columns:1fr}
  .reloj-dial-col{position:relative;top:auto;justify-items:center;text-align:center}
  .reloj-dial-col .lead{margin-inline:auto}
  .dial{--d:min(300px,78vw)}
  .reloj-list>li{grid-template-columns:68px 1fr;gap:4px 14px}
  .rl-img{width:68px}
  .rl-nota{grid-column:1/-1;grid-row:3}
  .rl-act{grid-column:1/-1;grid-row:4;grid-template-columns:1fr auto;justify-items:start;align-items:center;width:100%}
  .doors{grid-template-columns:1fr 1fr}
  .door{min-height:150px;padding:14px}
  .door-txt b{font-size:clamp(20px,6vw,24px)}
  .door::after{background:linear-gradient(to top,rgb(10 10 10 / .95) 0,rgb(10 10 10 / .5) 55%,rgb(10 10 10 / .1))}
  .door video{object-position:80% 30%}
  .door-txt small{font-size:12.5px}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card-body{padding:12px}
  .card-price{font-size:25px}
  .card.tile{grid-column:1/-1!important}
  .card.tile .btn{width:100%}
  .pack-grid{grid-template-columns:1fr}
  .pack-trio{grid-template-columns:1fr}
  .pack-media{max-width:440px}
  .conf-bento{grid-template-columns:1fr}
  .cb-1,.cb-2,.cb-3,.cb-4{grid-column:auto}
  .cb{min-height:230px;gap:22px}
  .voces-top{grid-template-columns:1fr}
  .pedir-cols{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .faq-grid>.h-xl{position:relative;top:auto}
  .foot-grid{grid-template-columns:1fr}
  .entregas-strip .ef{flex-basis:56vw}
  .paises .pais-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-grid{grid-template-columns:1fr}
  .f-gal{position:relative;top:auto}
  .f-main{max-height:58svh}
  .carrito{inset:auto 0 0 0;width:100vw;height:min(94dvh,100%);border-radius:var(--r-l) var(--r-l) 0 0;border-bottom:0}
  @keyframes drawerIn{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
}
@media (max-width:520px){
  .card-line{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;min-height:0}
  .card-badge{display:none}
  .card-name{font-size:21px}
  .pasos{grid-template-columns:1fr}
  .pago-yape{grid-template-columns:104px 1fr}
  .pago-yape img{width:104px;height:104px}
  .env-c{font-size:24px}
  .card.tile-wide{flex-direction:column;align-items:stretch}
  .card.tile-wide .btn{width:100%}
  .sh-cta{grid-template-columns:1fr}
}
@media (max-width:420px){
  .hero-cta .btn{flex:1 1 auto}
  .cierre-cta .btn{width:100%}
  .btn-lg{min-height:54px;padding:0 18px;font-size:14.5px}
}
@media (max-width:380px){.paises .pais-chips{grid-template-columns:1fr}.dk{font-size:9.5px}}

/* pantallas bajas de escritorio */
@media (min-width:900px) and (max-height:760px){
  .hero-copy{padding-bottom:30px}
  .hero-now{bottom:28px}
  .reloj-dial-col .lead{display:none}
  .dial{--d:min(340px,42vh)}
}
@media (min-width:900px) and (max-height:860px){.reloj{padding:48px 0 52px}}

/* pausa del movimiento */
.paused .marquee-track,.paused .btn-gold::after,.paused .btn-wa::after,.paused .pill-wa::after{animation-play-state:paused!important}
.paused .rv.in{animation:none}

/* movimiento reducido */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:10px}
  .marquee-track span[data-dup]{display:none}
  .js .rv:not(.in){opacity:1;translate:none}
  .btn-gold::after,.btn-wa::after,.pill-wa::after{display:none}
}

/* cifras de la misma altura en toda la página (la regla font:{...} las reinicia, por eso va aparte) */
*,*::before,*::after{font-variant-numeric:lining-nums!important}
@media (max-width:360px){.door-txt small{white-space:normal}.door-txt b{font-size:19px}}