/* ============================================================
   SENADOR — Tequila de Prestigio · Tienda
   Fusión: energía editorial de Casa Malka + mundo Piedreros/Senador
   ============================================================ */

:root{
  --charcoal:#292B31;
  --charcoal-deep:#1D1F24;
  --charcoal-soft:#34363D;
  --blanco:#EDF6EA;
  --reposado:#485A32;
  --anejo:#9C6B2E;
  --coral:#F26C6A;
  --paper:#FFFFFF;
  --ink:#292B31;
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.08);

  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
  --display:'Anton','Montserrat',sans-serif;
  --mono:'Space Mono','Courier New',monospace;

  --container:1360px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--charcoal);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--coral);color:#fff}
.wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(1.2rem,4vw,3rem)}

/* ---------- typography utilities ---------- */
.kicker{
  font-family:var(--mono);
  font-size:clamp(.62rem,1.2vw,.76rem);
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:400;
  opacity:.75;
}
.display{
  font-family:var(--display);
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:-.01em;
}
.serif{font-family:var(--serif)}
.rule{width:52px;height:1px;background:var(--coral);margin:2rem auto;border:0}
.rule.left{margin:1.6rem 0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  padding:1rem 1.9rem;border:1px solid currentColor;background:transparent;color:#fff;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
  white-space:nowrap;
}
.btn:hover{background:#fff;color:var(--ink)}
.btn.solid{background:#fff;color:var(--ink)}
.btn.solid:hover{background:var(--coral);color:#fff;border-color:var(--coral)}
.btn.coral{background:var(--coral);color:#fff;border-color:var(--coral)}
.btn.coral:hover{background:transparent;color:var(--coral)}
.btn.block{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}
.rv.d2{transition-delay:.2s}
.rv.d3{transition-delay:.3s}

/* ============================================================
   AGE GATE
   ============================================================ */
.age-gate{
  position:fixed;inset:0;z-index:999;background:var(--charcoal-deep);
  display:flex;align-items:center;justify-content:center;padding:1.4rem;
}
.age-gate[hidden]{display:none}
.age-card{
  max-width:420px;width:100%;text-align:center;
  border:1px solid var(--line);padding:clamp(2rem,5vw,3.2rem) clamp(1.6rem,5vw,2.6rem);
  background:var(--charcoal);
}
.age-card .h-mark{width:38px;margin:0 auto 1.4rem}
.age-card h2{font-family:var(--sans);font-size:.92rem;letter-spacing:.02em;line-height:1.5;font-weight:500;margin-bottom:1.8rem}
.age-actions{display:flex;gap:.8rem;justify-content:center;margin-bottom:1.6rem}
.age-actions .btn{flex:1}
.age-fine{font-size:.72rem;opacity:.55;line-height:1.6}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.2rem,4vw,2.4rem);
  background:linear-gradient(180deg,rgba(29,31,36,.92),rgba(29,31,36,0));
  transition:background .3s ease;
}
.site-header.solid{background:var(--charcoal-deep);border-bottom:1px solid var(--line-soft)}
.nav-left,.nav-right{display:flex;align-items:center;gap:1.6rem}
.nav-left a,.nav-right a,.nav-right button{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:.85;transition:opacity .2s ease;background:none;border:0;color:#fff;padding:0;
}
.nav-left a:hover,.nav-right a:hover,.nav-right button:hover{opacity:1}
.logo-wordmark{height:22px}
.logo-link{display:flex;align-items:center}
.cart-btn{position:relative}
.cart-count{
  position:absolute;top:-9px;right:-14px;background:var(--coral);color:#fff;
  font-family:var(--mono);font-size:.6rem;width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.burger{display:none}
@media(max-width:820px){
  .nav-left{display:none}
  .burger{display:flex;align-items:center;background:none;border:0;color:#fff}
}

.mobile-menu{
  position:fixed;inset:0;z-index:250;background:var(--charcoal-deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  transform:translateY(-100%);transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{font-family:var(--serif);font-size:2rem}
.mobile-menu .close-menu{position:absolute;top:1.4rem;right:1.4rem;background:none;border:0;color:#fff;font-size:1.6rem}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;padding-bottom:clamp(2rem,6vw,4rem);
}
.hero-bg{position:absolute;inset:-6%;background-size:cover;background-position:center;animation:kenburns 28s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.1)}to{transform:scale(1)}}
.hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(29,31,36,.55) 0%,rgba(29,31,36,.15) 38%,rgba(29,31,36,.35) 62%,rgba(29,31,36,.94) 100%);
}
.hero-content{position:relative;z-index:2;width:100%;text-align:center;padding:0 1.2rem}
.hero-kicker{margin-bottom:1.4rem}
.hero-title{
  display:flex;justify-content:center;
}
.hero-title img{
  width:clamp(220px,34vw,620px);
  height:auto;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.35));
}
.hero-sub{margin-top:1.6rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.4vw,1.6rem);opacity:.92}
.hero-scroll{margin-top:2.4rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.3em;opacity:.6;text-transform:uppercase}

/* ============================================================
   SECTIONS generic
   ============================================================ */
section{position:relative}
.section-pad{padding:clamp(4.5rem,9vw,8rem) 0}
.section-dark{background:var(--charcoal)}
.section-deep{background:var(--charcoal-deep)}
.section-light{background:var(--paper);color:var(--ink)}
.center{text-align:center}
.eyebrow{margin-bottom:1.2rem}

/* ---------- statement / big type ---------- */
.statement{
  padding:clamp(5rem,12vw,10rem) 0;text-align:center;
}
.statement .display{font-size:clamp(2.4rem,7.4vw,5.6rem);}
.statement .display span{color:var(--coral)}

/* ---------- story ---------- */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.story-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.story-copy h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4vw,3rem);margin-bottom:1.4rem}
.story-copy p{opacity:.85;line-height:1.75;margin-bottom:1.1rem;font-size:1.02rem}
.story-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.6rem}
.stat b{display:block;font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem)}
.stat span{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
@media(max-width:760px){.story-grid{grid-template-columns:1fr}.story-stats{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   PRODUCT LINEUP / CARDS
   ============================================================ */
.lineup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft)}
.product-card{background:var(--charcoal);padding:clamp(2rem,3.6vw,3rem) clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.2rem}
.product-card img{width:auto;height:clamp(220px,28vw,320px);margin:0 auto;transition:transform .5s ease}
.product-card:hover img{transform:translateY(-6px)}
.product-badge{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;padding:.4rem .8rem;border:1px solid var(--line);text-transform:uppercase}
.product-card h3{font-family:var(--serif);font-size:2.1rem;font-weight:500}
.product-card p{opacity:.75;font-size:.92rem;line-height:1.6;max-width:30ch}
.product-price{font-family:var(--mono);font-size:1rem;letter-spacing:.06em}
@media(max-width:900px){.lineup-grid{grid-template-columns:1fr}}

/* ============================================================
   COCKTAIL / RECIPE CARDS
   ============================================================ */
.recipe-scroller{display:flex;gap:1.4rem;overflow-x:auto;padding:.4rem clamp(1.2rem,4vw,3rem) 2rem;scroll-snap-type:x mandatory}
.recipe-scroller::-webkit-scrollbar{height:4px}
.recipe-scroller::-webkit-scrollbar-thumb{background:var(--line)}
.recipe-card{
  scroll-snap-align:start;flex:0 0 clamp(260px,32vw,340px);
  background:var(--charcoal-deep);border:1px solid var(--line-soft);
  display:flex;flex-direction:column;
}
.recipe-media{aspect-ratio:4/3;background:linear-gradient(160deg,var(--charcoal-soft),var(--charcoal-deep));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.recipe-media .glyph{font-family:var(--serif);font-size:4.2rem;color:rgba(255,255,255,.18)}
.recipe-tag{position:absolute;top:.9rem;left:.9rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(0,0,0,.4);padding:.3rem .6rem}
.recipe-body{padding:1.5rem;display:flex;flex-direction:column;gap:.9rem;flex:1}
.recipe-body h3{font-family:var(--serif);font-size:1.5rem;font-weight:500}
.recipe-body .kicker{opacity:.5}
.recipe-list{font-size:.86rem;line-height:1.7;opacity:.85;list-style:none}
.recipe-list li::before{content:'—';color:var(--coral);margin-right:.5rem}
.recipe-steps{font-size:.82rem;line-height:1.7;opacity:.7}
.recipe-card .btn{margin-top:auto;align-self:flex-start}
.recipe-full{padding:2rem;border:1px solid var(--line-soft);background:var(--charcoal-deep);display:grid;grid-template-columns:1fr 1fr;gap:2.4rem}
@media(max-width:760px){.recipe-full{grid-template-columns:1fr}}

/* ============================================================
   SHOP / MERCH GRID
   ============================================================ */
.shop-toolbar{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.6rem;flex-wrap:wrap;gap:1rem}
.merch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
@media(max-width:1000px){.merch-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.merch-grid{grid-template-columns:1fr}}
.merch-card{background:var(--charcoal-deep);border:1px solid var(--line-soft);display:flex;flex-direction:column}
.merch-media{aspect-ratio:3/4;background:linear-gradient(150deg,var(--charcoal-soft),var(--charcoal-deep));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.merch-media img{width:100%;height:100%;object-fit:cover}
.merch-monogram{font-family:var(--serif);font-size:3rem;color:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.22);width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.merch-soon{position:absolute;top:.8rem;right:.8rem;background:var(--coral);color:#fff;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;padding:.3rem .55rem;text-transform:uppercase}
.merch-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.merch-body .kicker{opacity:.5}
.merch-body h3{font-family:var(--serif);font-size:1.25rem;font-weight:500}
.merch-price{font-family:var(--mono);font-size:.86rem;margin-top:.2rem}
.merch-note{font-size:.8rem;opacity:0;max-height:0;overflow:hidden;transition:opacity .2s ease}

/* ============================================================
   SOCIAL WALL
   ============================================================ */
.social-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;background:var(--line-soft)}
.social-tile{aspect-ratio:1;background:linear-gradient(150deg,var(--charcoal-soft),var(--charcoal));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.social-tile img{width:100%;height:100%;object-fit:cover}
.social-tile::after{content:'@TEQUILASENADOR';position:absolute;bottom:.6rem;left:.6rem;font-family:var(--mono);font-size:.52rem;letter-spacing:.06em;opacity:.7}
@media(max-width:900px){.social-grid{grid-template-columns:repeat(3,1fr)}}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--charcoal-deep);border-top:1px solid var(--line-soft);padding:clamp(3rem,6vw,5rem) 0 2rem}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.4rem;padding-bottom:2.6rem;border-bottom:1px solid var(--line-soft)}
.footer-brand .logo-wordmark{height:26px;margin-bottom:1rem}
.footer-brand p{opacity:.6;font-size:.86rem;line-height:1.6;max-width:32ch}
.footer-col h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-bottom:1rem}
.footer-col a,.footer-col p{display:block;font-size:.88rem;opacity:.8;margin-bottom:.6rem}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.6rem;font-size:.74rem;opacity:.5;font-family:var(--mono)}
@media(max-width:820px){.footer-top{grid-template-columns:1fr 1fr}}

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;opacity:0;pointer-events:none;transition:opacity .3s ease}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:310;
  background:var(--charcoal-deep);border-left:1px solid var(--line);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.cart-drawer.open{transform:translateX(0)}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 1.6rem;border-bottom:1px solid var(--line-soft)}
.cart-head h3{font-family:var(--serif);font-size:1.3rem}
.cart-close{background:none;border:0;color:#fff;font-size:1.3rem}
.cart-items{flex:1;overflow-y:auto;padding:1rem 1.6rem}
.cart-item{display:grid;grid-template-columns:56px 1fr auto;gap:.9rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line-soft)}
.cart-item img{width:56px;height:56px;object-fit:cover;background:var(--charcoal-soft)}
.cart-item-name{font-size:.88rem;font-weight:500}
.cart-item-meta{font-family:var(--mono);font-size:.72rem;opacity:.6;margin-top:.2rem}
.qty-row{display:flex;align-items:center;gap:.6rem;margin-top:.5rem}
.qty-row button{background:none;border:1px solid var(--line);color:#fff;width:22px;height:22px;font-size:.8rem;line-height:1}
.cart-item-price{font-family:var(--mono);font-size:.86rem;text-align:right}
.cart-empty{text-align:center;padding:3rem 1rem;opacity:.7}
.cart-empty p{margin-top:.6rem;font-size:.9rem}
.cart-foot{padding:1.4rem 1.6rem 1.8rem;border-top:1px solid var(--line-soft)}
.cart-subtotal{display:flex;justify-content:space-between;font-family:var(--mono);margin-bottom:1rem;font-size:.92rem}
.cart-fine{font-size:.72rem;opacity:.55;margin-top:.8rem;line-height:1.5;text-align:center}

/* toast */
.toast{
  position:fixed;bottom:1.6rem;left:50%;transform:translateX(-50%) translateY(20px);
  background:#fff;color:var(--ink);font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
  padding:.9rem 1.4rem;z-index:400;opacity:0;transition:opacity .3s ease,transform .3s ease;text-transform:uppercase;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* page hero (interior pages) */
.page-hero{padding:clamp(8rem,14vw,11rem) 0 clamp(3rem,6vw,4rem);text-align:center}
.page-hero .display{font-size:clamp(2.6rem,8vw,5rem)}
.page-hero p{opacity:.75;max-width:56ch;margin:1.2rem auto 0;line-height:1.7}

/* breadcrumb-ish tag row */
.tag-row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}
.tag-row span{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:.35rem .7rem;opacity:.7}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 0;font-family:var(--serif);font-size:1.2rem;background:none;border:0;color:#fff;width:100%;text-align:left}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{opacity:.75;line-height:1.7;padding-bottom:1.4rem;font-size:.94rem}
.faq-item.open .faq-a{max-height:300px}
.faq-item.open .faq-q .plus{transform:rotate(45deg)}
.faq-q .plus{transition:transform .25s ease;font-size:1.4rem}

/* map / find us */
.locations-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
@media(max-width:760px){.locations-grid{grid-template-columns:1fr}}
.location-card{border:1px solid var(--line-soft);padding:2.2rem}
.location-card h3{font-family:var(--serif);font-size:1.6rem;margin-bottom:.8rem}
.location-card p{opacity:.75;line-height:1.7;font-size:.92rem;margin-bottom:.4rem}

/* utility */
.mt{margin-top:2.4rem}
.hide-desktop{display:none}
@media(max-width:820px){.hide-desktop{display:block}.hide-mobile{display:none}}

/* ============================================================
   SISTEMA DE MOVIMIENTO — "se sirve despacio"
   ============================================================ */

/* ---------- grain fílmico global ---------- */
body::after{
  content:'';position:fixed;inset:0;z-index:900;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.035;mix-blend-mode:overlay;
}

/* ---------- age gate con ceremonia ---------- */
.age-card .h-mark{animation:breathe 4.2s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.age-gate{transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.age-gate.closing{opacity:0;transform:translateY(-4%);pointer-events:none}
.age-card{transition:transform .9s cubic-bezier(.16,1,.3,1)}
.age-gate.closing .age-card{transform:translateY(18px) scale(.98)}

/* ---------- hero cinematográfico ---------- */
.hero-bg{animation-duration:38s}
.hero-title img{animation:heroReveal 1.6s cubic-bezier(.16,1,.3,1) both .3s}
@keyframes heroReveal{from{opacity:0;transform:translateY(26px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.hero-sub{animation:heroReveal 1.4s cubic-bezier(.16,1,.3,1) both .7s}
.hero-kicker{animation:heroReveal 1.2s cubic-bezier(.16,1,.3,1) both .15s}
.hero-scroll{animation:heroReveal 1.2s both 1.2s, sway 2.6s ease-in-out infinite 2.4s}
@keyframes sway{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.hero video.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- ticker de destilería ---------- */
.ticker{overflow:hidden;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:1.05rem 0;background:var(--charcoal-deep)}
.ticker-track{display:flex;gap:3.4rem;width:max-content;animation:tick 46s linear infinite}
.ticker-track span{font-family:var(--mono);font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;opacity:.55;white-space:nowrap}
.ticker-track span i{font-style:normal;color:var(--coral);margin-left:3.4rem}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* ---------- parallax ---------- */
.plx{overflow:hidden}
.plx>img{transform:translateY(var(--plx,0));transition:transform .1s linear;will-change:transform;scale:1.12}

/* ---------- botellas vivas ---------- */
.product-card img{transition:transform .6s cubic-bezier(.16,1,.3,1),filter .6s ease}
.product-card:hover img{transform:translateY(-10px) rotate(-1.2deg);filter:drop-shadow(0 26px 30px rgba(0,0,0,.45))}
.buy-media img{animation:bottleFloat 6.5s ease-in-out infinite;filter:drop-shadow(0 30px 34px rgba(0,0,0,.4))}
@keyframes bottleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- proceso: riel del tiempo ---------- */
.rail-wrap{position:relative}
.rail{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line-soft);transform:translateX(-50%)}
.rail-fill{position:absolute;left:0;top:0;width:100%;height:var(--rail,0%);background:var(--coral);transition:height .2s linear}
@media(max-width:900px){.rail{display:none}}
.step-card{position:relative;overflow:hidden}
.step-card .step-img{margin:-2rem -2rem 0;aspect-ratio:16/10;overflow:hidden}
@media(max-width:900px){.step-card .step-img{margin:-2rem -1.6rem 0}}
.step-card .step-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1);filter:saturate(.92)}
.step-card:hover .step-img img{transform:scale(1.05)}

/* ---------- media real en recetas y merch ---------- */
.recipe-media img,.merch-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.recipe-card:hover .recipe-media img{transform:scale(1.06)}
.merch-card:hover .merch-media img{transform:scale(1.05)}
.merch-card.coming .merch-media{opacity:1}
.render-tag{position:absolute;bottom:.8rem;left:.8rem;font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(0,0,0,.45);padding:.28rem .5rem;opacity:.85}

/* ---------- contadores ---------- */
.stat b{font-variant-numeric:tabular-nums}

/* ---------- botones con barrido ---------- */
.btn{position:relative;overflow:hidden;z-index:1}
.btn::before{content:'';position:absolute;inset:0;background:#fff;transform:translateX(-101%);transition:transform .35s cubic-bezier(.16,1,.3,1);z-index:-1}
.btn:hover{background:transparent}
.btn:hover::before{transform:translateX(0)}
.btn.coral::before{background:var(--coral)}
.btn.coral:hover{color:#fff}
.btn.solid::before{background:var(--coral)}
.btn.solid:hover{color:#fff;border-color:var(--coral)}

/* ---------- transición entre páginas ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .34s ease both}
::view-transition-new(root){animation:vtIn .5s ease both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .hero-bg,.hero-title img,.hero-sub,.hero-kicker,.hero-scroll,.buy-media img,.ticker-track,.age-card .h-mark{animation:none!important}
  .plx>img{transform:none;scale:1}
  .rv{transition:none;opacity:1;transform:none}
}

/* ============================================================
   LAS TRES EXPRESIONES — scroll story (pieza firma)
   ============================================================ */
.exp-story{position:relative;height:340svh;background:var(--charcoal)}
.exp-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}

/* glow de fondo por expresión */
.exp-bg{position:absolute;inset:0;opacity:0;transition:none;pointer-events:none}
.exp-bg.b1{background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(237,246,234,.10),transparent 70%)}
.exp-bg.b2{background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(72,90,50,.28),transparent 70%)}
.exp-bg.b3{background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(156,107,46,.24),transparent 70%)}

/* palabra gigante detrás de la botella */
.exp-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(4.2rem,17vw,15rem);line-height:1;color:rgba(255,255,255,.06);
  opacity:0;white-space:nowrap;pointer-events:none}

/* botella al centro */
.exp-bottle{position:relative;z-index:2;height:min(70svh,620px);aspect-ratio:1/2}
.exp-bottle img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;
  filter:drop-shadow(0 34px 40px rgba(0,0,0,.5));will-change:opacity,transform;
  backface-visibility:hidden;transform:translateZ(0)}
.exp-word{will-change:opacity,transform}
.exp-copy{will-change:opacity,transform}

/* gleam confinado al vidrio (mask con el propio render) */
.exp-gleam{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;
  -webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;
  mask-size:contain;mask-position:center;mask-repeat:no-repeat;overflow:hidden}
.exp-gleam::after{content:'';position:absolute;inset:-20%;
  background:linear-gradient(115deg,transparent 43%,rgba(255,255,255,.22) 50%,transparent 57%);
  transform:translateX(-130%);animation:gleamSweep 5.2s ease-in-out infinite}
@keyframes gleamSweep{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}

/* ficha de la expresión */
.exp-copy{position:absolute;z-index:4;left:clamp(1.2rem,6vw,6rem);bottom:clamp(4.2rem,10svh,8rem);
  max-width:300px;opacity:0;transform:translateY(14px);will-change:opacity,transform}
.exp-copy .kicker{margin-bottom:.6rem}
.exp-copy h3{font-family:var(--serif);font-size:2.3rem;font-weight:500;margin-bottom:.5rem}
.exp-copy p{opacity:.75;font-size:.92rem;line-height:1.6;margin-bottom:1rem}
.exp-copy .exp-price{font-family:var(--mono);font-size:1rem;letter-spacing:.06em;display:block;margin-bottom:1.2rem}

/* numerales de progreso */
.exp-nums{position:absolute;right:clamp(1.2rem,5vw,4.5rem);top:50%;transform:translateY(-50%);z-index:4;
  display:flex;flex-direction:column;gap:1.5rem;font-family:var(--serif);font-size:1.05rem}
.exp-nums span{opacity:.3;transition:opacity .4s ease,color .4s ease}
.exp-nums span.on{opacity:1;color:var(--coral)}

/* hint de scroll */
.exp-hint{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:4;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;opacity:.45}

@media(max-width:760px){
  .exp-sticky{align-items:flex-start;padding-top:11svh}
  .exp-bottle{height:46svh}
  .exp-bottle img{filter:none} /* drop-shadow es lo más caro del crossfade en GPU móvil */
  .exp-gleam{display:none}     /* las máscaras animadas cuestan composición — en móvil fuera */
  .exp-word{top:33svh;font-size:clamp(3.4rem,23vw,6.5rem)}
  .exp-copy{left:0;right:0;bottom:0;max-width:none;text-align:center;
    background:linear-gradient(0deg,rgba(29,31,36,.96) 0%,rgba(29,31,36,.78) 72%,transparent 100%);
    padding:2rem 1.2rem 3.4rem}
  .exp-copy h3{font-size:1.7rem}
  .exp-copy p{font-size:.85rem;margin-bottom:.7rem}
  .exp-copy .exp-price{margin-bottom:.9rem}
  .exp-nums{top:auto;bottom:.9rem;right:auto;left:50%;transform:translateX(-50%);flex-direction:row;gap:1.7rem;font-size:.9rem}
  .exp-hint{display:none}
}

/* fallback: sin JS o reduced-motion → grid clásico */
.lineup-fallback{display:none}
@media(prefers-reduced-motion:reduce){
  .exp-story{display:none}
  .lineup-fallback{display:block}
}
html.no-js .exp-story{display:none}
html.no-js .lineup-fallback{display:block}

/* ============================================================
   HERO VIVO — parallax de cursor + sheen del wordmark
   ============================================================ */
.hero-title{position:relative}
.hero-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;
  -webkit-mask-image:var(--wm);-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;
  mask-image:var(--wm);mask-size:contain;mask-position:center;mask-repeat:no-repeat;overflow:hidden}
.hero-sheen::after{content:'';position:absolute;inset:-30%;
  background:linear-gradient(110deg,transparent 44%,rgba(255,255,255,.55) 50%,transparent 56%);
  transform:translateX(-140%);animation:gleamSweep 7s ease-in-out infinite 2.2s}
.hero-bg{will-change:transform}

@media(prefers-reduced-motion:reduce){
  .exp-gleam::after,.hero-sheen::after{animation:none}
}

/* ---------- mini-juego: la jima ---------- */
.jima-game .kicker{margin-bottom:1.1rem}
.jima-stage{height:min(280px,34svh);display:flex;align-items:flex-end;justify-content:center;
  margin-bottom:1rem;cursor:pointer;position:relative;overflow:visible;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.jima-stage svg{height:100%;max-width:100%;overflow:visible}
.penca{transition:transform .55s cubic-bezier(.3,.7,.4,1),opacity .5s ease;transform-box:fill-box;transform-origin:50% 100%}
.jima-coa{position:absolute;width:72px;height:72px;pointer-events:none;z-index:5;opacity:0;transform-origin:12% 88%}
.jima-coa.swing{animation:coaSwing .34s ease-out}
@keyframes coaSwing{0%{opacity:1;transform:rotate(-80deg)}68%{opacity:1;transform:rotate(14deg)}100%{opacity:0;transform:rotate(20deg)}}
.jima-stage.shake svg{animation:jimaShake .2s ease}
@keyframes jimaShake{25%{transform:translateX(-4px) rotate(-.6deg)}70%{transform:translateX(3px) rotate(.5deg)}}
.jima-status{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.78;min-height:1.2em;margin-bottom:1.4rem}
.pina.done{animation:pinaPulse .9s ease;transform-box:fill-box;transform-origin:center}
@keyframes pinaPulse{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}

/* ---------- age gate: fecha de nacimiento ---------- */
.age-dob{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1.1rem}
.age-dob input{
  width:64px;background:var(--charcoal-deep);border:1px solid var(--line);color:#fff;
  font-family:var(--mono);font-size:1.05rem;text-align:center;padding:.8rem .2rem;
  border-radius:0;outline:none;transition:border-color .2s ease;
  -moz-appearance:textfield;appearance:textfield;
}
.age-dob input::-webkit-outer-spin-button,.age-dob input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.age-dob input:focus{border-color:var(--coral)}
.age-dob input#dob-y{width:88px}
.age-dob span{opacity:.4;font-family:var(--mono)}
.age-dob input::placeholder{color:rgba(255,255,255,.28);letter-spacing:.06em}
.age-error{color:var(--coral);font-size:.78rem;margin:-.3rem 0 1rem;line-height:1.5;min-height:1em}
.age-error[hidden]{display:none}
.age-form .btn{width:100%}