/* ============================================================
   GOLD FRITZ SNACKS — Catálogo "Pop Botana"
   Bright · cartoon · ruidoso · microanimaciones · CSS puro
   ============================================================ */

:root{
  /* Marca */
  --ink:    #0E0E10;
  --paper:  #FFFDF6;
  --cream:  #FFF6E3;

  /* Pop palette */
  --blue:   #1F8FFF;   /* cacahuates */
  --teal:   #14C2A8;   /* semillas   */
  --purple: #9B4DFF;   /* legumbres  */
  --yellow: #FFC01E;   /* maíces     */
  --orange: #FF7A1A;
  --red:    #EE2B2B;   /* chile      */
  --pink:   #FF4D9D;
  --green:  #3FD14A;

  --maxw: 1280px;
  --ease:   cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.56,.64,1); /* rebote jelly */

  --f-display: "Luckiest Guy", system-ui, sans-serif;
  --f-body:    "Nunito", system-ui, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
.bag{ display:block; width:100%; height:auto; }
.bag-photo{ filter:drop-shadow(0 12px 16px rgba(0,0,0,.28)); object-fit:contain; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--f-body); font-weight:600;
  background:var(--paper); color:var(--ink);
  line-height:1.55; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--yellow); color:var(--ink); }

/* ---------- Tipografía utilitaria ---------- */
.display{
  font-family:var(--f-display); font-weight:400; line-height:.92;
  letter-spacing:.01em; text-transform:uppercase;
}
/* Logo/headline outline estilo Gold Fritz */
.outline{
  color:#fff;
  -webkit-text-stroke:clamp(2px,.4vw,4px) var(--ink);
  paint-order:stroke fill;
  text-shadow:4px 5px 0 var(--ink);
}
.outline--dark{ color:var(--ink); -webkit-text-stroke:0; text-shadow:5px 6px 0 rgba(0,0,0,.12); }

.eyebrow{
  font-family:var(--f-display); font-size:clamp(.85rem,1.4vw,1.1rem);
  letter-spacing:.12em; color:var(--red);
}
.section-title{ font-size:clamp(2.4rem,7vw,5.5rem); }
.center{ text-align:center; }

/* ============================================================
   FONDO DE GARABATOS (signature doodles)
   ============================================================ */
.doodles{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.doodle{ position:absolute; opacity:.9; }
.doodle svg{ width:100%; height:100%; overflow:visible; }
.doodle path{ fill:none; stroke-width:9; stroke-linecap:round; }
.d1{ width:160px; height:160px; top:12%; left:6%;  animation:floaty 9s ease-in-out infinite; }
.d2{ width:120px; height:120px; top:24%; right:8%; animation:floaty 11s ease-in-out infinite reverse; }
.d3{ width:200px; height:200px; bottom:14%; left:10%; animation:floaty 13s ease-in-out infinite; }
.d4{ width:140px; height:140px; bottom:22%; right:6%; animation:floaty 10s ease-in-out infinite reverse; }
.d5{ width:110px; height:110px; top:55%; left:48%; animation:floaty 12s ease-in-out infinite; }
@keyframes floaty{
  0%,100%{ transform:translateY(0) rotate(0) }
  50%{ transform:translateY(-26px) rotate(14deg) }
}

/* ============================================================
   GRAIN + CURSOR
   ============================================================ */
.cursor{
  position:fixed; top:0; left:0; z-index:10000; pointer-events:none;
  width:16px; height:16px; border-radius:50%;
  background:var(--red); border:2px solid #fff; transform:translate(-50%,-50%);
  transition:width .25s var(--spring), height .25s var(--spring), background .25s;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.cursor.is-hover{ width:54px; height:54px; background:var(--yellow); }
.cursor.is-down{ scale:.8; }
@media (hover:none){ body{cursor:auto} .cursor{display:none} }

/* ============================================================
   LOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:grid; place-content:center; gap:1.6rem; justify-items:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__logo{ font-size:clamp(2.4rem,9vw,4.5rem); }
.loader__logo span{ display:inline-block; animation:bounceIn .6s var(--spring) backwards; }
.loader__logo span:nth-child(1){animation-delay:.0s}
.loader__logo span:nth-child(2){animation-delay:.07s}
.loader__logo span:nth-child(3){animation-delay:.14s}
.loader__logo span:nth-child(4){animation-delay:.21s}
@keyframes bounceIn{ from{opacity:0; transform:translateY(-60px) scale(.6) rotate(-12deg)} }
.loader__bar{ width:min(220px,55vw); height:10px; border-radius:99px; background:rgba(255,255,255,.15); overflow:hidden; border:2px solid #fff;}
.loader__bar i{ display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--red),var(--yellow),var(--green),var(--blue));
  animation:fill .65s var(--ease) .1s forwards; }
@keyframes fill{ to{width:100%} }

/* ============================================================
   BOTONES (jelly)
   ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-display); font-size:1.05rem; letter-spacing:.02em;
  padding:.95rem 1.8rem; border-radius:99px; border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink); cursor:pointer;
  transition:transform .18s var(--spring), box-shadow .18s var(--spring), background .2s;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.btn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.btn--red{ background:var(--red); color:#fff; }
.btn--yellow{ background:var(--yellow); color:var(--ink); }
.btn--white{ background:#fff; color:var(--ink); }
.btn--lg{ font-size:1.25rem; padding:1.1rem 2.2rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem clamp(1rem,4vw,2.5rem);
  background:rgba(255,253,246,.0); transition:transform .5s var(--ease), background .35s, box-shadow .35s;
}
.nav.is-scrolled{ background:rgba(255,253,246,.92); backdrop-filter:blur(10px);
  box-shadow:0 4px 0 var(--ink); border-bottom:3px solid var(--ink); }
.nav.is-hidden{ transform:translateY(-130%); }
.nav__brand{ font-family:var(--f-display); font-size:1.5rem; line-height:.85; transform:rotate(-3deg);
  transition:transform .3s var(--spring); }
.nav__brand small{ display:block; font-size:.5em; color:var(--red); letter-spacing:.25em; }
.nav__brand:hover{ transform:rotate(2deg) scale(1.05); }
.nav__links{ display:flex; gap:1.8rem; }
.nav__links a{ font-family:var(--f-display); font-size:1rem; position:relative; }
.nav__links a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px;
  border-radius:9px; background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--spring); }
.nav__links a:hover::after{ transform:scaleX(1); }
@media(max-width:820px){ .nav__links{ display:none } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; z-index:1;
  background:var(--ink); color:#fff; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:7rem 1.2rem 4rem;
}
.hero__doodles{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__doodles path{ fill:none; stroke-width:10; stroke-linecap:round; opacity:.85; }
.hero__grid{ position:relative; z-index:2; width:100%; max-width:1180px;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(1rem,4vw,3rem); }
.hero__inner{ position:relative; z-index:2; }

/* Render 3D */
.hero__art{ position:relative; display:grid; place-items:center; }
.hero__glow{ position:absolute; width:90%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,122,26,.55), transparent 65%); filter:blur(20px);
  animation:pulse 4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(.9); opacity:.7 } 50%{ transform:scale(1.05); opacity:1 } }
.hero__product{ position:relative; width:min(440px,90%); height:auto;
  filter:drop-shadow(0 28px 34px rgba(0,0,0,.55));
  animation:heroFloat 6s ease-in-out infinite; }
@keyframes heroFloat{ 0%,100%{ transform:translateY(0) rotate(-2deg) } 50%{ transform:translateY(-22px) rotate(2deg) } }

@media(min-width:861px){
  .hero__inner{ text-align:left; }
  .hero__inner .hero__cta{ justify-content:flex-start; }
}
@media(max-width:860px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__art{ order:-1; }
  .hero__product{ width:min(320px,72%); }
}
.hero__eyebrow{ font-family:var(--f-display); color:var(--yellow); font-size:clamp(1rem,2.4vw,1.6rem);
  letter-spacing:.18em; margin-bottom:1rem; opacity:0; animation:popUp .6s var(--spring) .4s forwards; }
.hero__title{ font-size:clamp(3rem,12vw,9rem); }
.hero__title .l{ display:block; overflow:hidden; }
.hero__title .w{ display:inline-block; transform:translateY(110%) rotate(6deg);
  animation:wordUp .8s var(--spring) forwards; }
.l:nth-child(1) .w{ animation-delay:.55s } .l:nth-child(2) .w{ animation-delay:.7s }
@keyframes wordUp{ to{ transform:none } }
@keyframes popUp{ to{ opacity:1 } }
.hero__sub{ font-size:clamp(1.05rem,2.2vw,1.4rem); max-width:40ch; margin:1.6rem auto 2.2rem;
  color:#ffe; font-weight:700; opacity:0; animation:popUp .6s var(--ease) 1s forwards; }
.hero__cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  opacity:0; animation:popUp .6s var(--ease) 1.15s forwards; }

/* fila de mascotas hero */
.hero__mascots{ display:flex; gap:clamp(.5rem,3vw,2.5rem); justify-content:center; margin-top:2.6rem; }
.hero__mascots .mascot{ width:clamp(60px,11vw,120px); }
.hero__mascots .mascot:nth-child(odd){ animation:bob 3s ease-in-out infinite; }
.hero__mascots .mascot:nth-child(even){ animation:bob 3.6s ease-in-out infinite .4s; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

.hero__scroll{ position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--f-display); font-size:.8rem; letter-spacing:.2em; color:var(--yellow);
  display:flex; flex-direction:column; align-items:center; gap:.4rem; animation:bob 2s ease-in-out infinite; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ background:var(--yellow); border-top:4px solid var(--ink); border-bottom:4px solid var(--ink);
  overflow:hidden; padding:.6rem 0; position:relative; z-index:2; }
.marquee__track{ display:flex; width:max-content; align-items:center; gap:1.4rem;
  animation:scroll 26s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{ font-family:var(--f-display); font-size:clamp(1.4rem,3vw,2.4rem); white-space:nowrap; }
.marquee__track .mascot{ width:clamp(34px,5vw,54px); }
@keyframes scroll{ to{ transform:translateX(-50%) } }

/* ============================================================
   SECCIÓN base
   ============================================================ */
.section{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  padding:clamp(4rem,9vw,8rem) clamp(1.2rem,5vw,3rem); }
.section__head{ margin-bottom:2.6rem; }

/* ============================================================
   CATEGORÍAS
   ============================================================ */
.cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.cats .cat:first-child{ grid-column:span 2; }
@media(max-width:900px){ .cats{ grid-template-columns:repeat(2,1fr) } .cats .cat:first-child{ grid-column:span 2 } }
@media(max-width:560px){ .cats{ grid-template-columns:1fr } .cats .cat:first-child{ grid-column:span 1 } }
.cat{
  position:relative; border-radius:26px; border:4px solid var(--ink); overflow:hidden;
  min-height:280px; padding:1.6rem; display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--c); box-shadow:7px 7px 0 var(--ink); cursor:pointer;
  transition:transform .3s var(--spring), box-shadow .3s var(--spring);
}
.cat:hover{ transform:translate(-3px,-3px) rotate(-1deg); box-shadow:12px 12px 0 var(--ink); }
.cat__bag{ position:absolute; top:50%; left:50%; width:55%; transform:translate(-50%,-58%) rotate(-6deg);
  transition:transform .4s var(--spring); filter:drop-shadow(0 12px 18px rgba(0,0,0,.3)); }
.cat:hover .cat__bag{ transform:translate(-50%,-62%) rotate(4deg) scale(1.06); }
.cat__name{ position:relative; font-family:var(--f-display); font-size:clamp(1.6rem,3vw,2.4rem);
  color:#fff; -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; text-shadow:3px 3px 0 var(--ink); }
.cat__go{ position:relative; font-family:var(--f-display); font-size:.85rem; color:var(--ink);
  background:#fff; border:3px solid var(--ink); border-radius:99px; padding:.25rem .8rem;
  align-self:flex-start; margin-top:.6rem; opacity:0; transform:translateY(8px);
  transition:opacity .3s var(--spring), transform .3s var(--spring); }
.cat:hover .cat__go{ opacity:1; transform:none; }

/* ============================================================
   WELCOME STRIP
   ============================================================ */
.welcome{ background:var(--ink); color:#fff; position:relative; z-index:1; overflow:hidden; }
.welcome__inner{ max-width:900px; margin:0 auto; padding:clamp(3.5rem,8vw,7rem) clamp(1.2rem,5vw,3rem);
  text-align:center; }
.welcome p{ font-size:clamp(1.2rem,3vw,2rem); font-weight:800; }
.welcome p .hl{ color:var(--yellow); }

/* ============================================================
   CATÁLOGO
   ============================================================ */
.filters{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.filter{ font-family:var(--f-display); font-size:1rem; color:var(--ink); background:#fff;
  border:3px solid var(--ink); border-radius:99px; padding:.5rem 1.2rem; cursor:pointer;
  box-shadow:3px 3px 0 var(--ink); transition:transform .2s var(--spring), background .2s, color .2s, box-shadow .2s; }
.filter:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink); }
.filter.is-active{ background:var(--red); color:#fff; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.4rem; }
.card{
  position:relative; border-radius:24px; border:4px solid var(--ink); overflow:hidden;
  background:var(--c-bg); box-shadow:6px 6px 0 var(--ink); cursor:pointer; padding:1.2rem;
  display:flex; flex-direction:column; align-items:center;
  transition:transform .3s var(--spring), box-shadow .3s var(--spring), opacity .3s;
  will-change:transform;
}
.card.is-out{ opacity:0; transform:scale(.85); pointer-events:none; }
.card:hover{ transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--ink); }
.card__badge{ position:absolute; top:10px; left:10px; font-family:var(--f-display); font-size:.62rem;
  background:var(--ink); color:#fff; border-radius:99px; padding:.2rem .6rem; letter-spacing:.04em; }
.card__bag{ width:62%; margin:.6rem 0 .8rem; transition:transform .4s var(--spring);
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.25)); }
.card:hover .card__bag{ transform:rotate(5deg) translateY(-6px) scale(1.05); }
.card__name{ font-family:var(--f-display); font-size:1.25rem; line-height:1; text-align:center; color:var(--ink); }
.card__tag{ font-style:italic; font-weight:800; color:rgba(14,14,16,.7); margin-top:.2rem; font-size:.92rem; }
.card__foot{ display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:.9rem; }
.spice{ display:flex; gap:3px; }
.spice i{ font-size:.95rem; filter:grayscale(1) opacity(.35); transition:filter .25s; }
.spice i.on{ filter:none; }
.card__view{ font-family:var(--f-display); font-size:.78rem; color:#fff; background:var(--red);
  border:2px solid var(--ink); border-radius:99px; padding:.22rem .7rem;
  transition:transform .25s var(--spring); }
.card:hover .card__view{ transform:scale(1.08) rotate(-3deg); }

/* ============================================================
   ¿CUÁL ES TU FAVORITO? (comparador)
   ============================================================ */
.versus{ background:var(--ink); color:#fff; position:relative; z-index:1; }
.versus__head{ text-align:center; padding:clamp(3rem,7vw,5rem) 1.2rem 2rem; }
.versus__sub{ color:#ffe; font-weight:700; margin-top:.6rem; }
.compare{ position:relative; max-width:1000px; margin:0 auto; aspect-ratio:16/10;
  border-top:5px solid var(--ink); border-bottom:5px solid var(--ink); overflow:hidden; user-select:none; }
.compare__side{ position:absolute; inset:0; display:grid; place-items:center; }
.compare__side--a{ background:linear-gradient(135deg,#ff8a3a,var(--red)); }
.compare__side--b{ background:linear-gradient(135deg,#ffd27a,var(--orange));
  clip-path:inset(0 0 0 var(--split,50%)); }
.compare__label{ position:absolute; bottom:8%; font-family:var(--f-display); text-align:center; }
.compare__label .small{ display:block; font-size:.8rem; color:#fff; letter-spacing:.1em; }
.compare__label .big{ font-size:clamp(1.6rem,4vw,3rem); color:#fff;
  -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; text-shadow:3px 3px 0 var(--ink); }
.compare__side--a .compare__label{ left:6%; }
.compare__side--b .compare__label{ right:6%; }
.compare__bag{ width:30%; max-width:220px; filter:drop-shadow(0 14px 20px rgba(0,0,0,.35));
  animation:bob 3.4s ease-in-out infinite; }
.compare__handle{ position:absolute; top:0; bottom:0; left:var(--split,50%); width:5px; background:var(--ink);
  transform:translateX(-50%); cursor:pointer; }
.compare__handle::after{ content:"⟺"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%; background:var(--yellow); border:4px solid var(--ink);
  display:grid; place-content:center; font-size:1.3rem; box-shadow:3px 3px 0 var(--ink); }

/* ============================================================
   RESEÑAS
   ============================================================ */
.reviews{ background:var(--cream); }
.reviews__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
@media(max-width:820px){ .reviews__grid{ grid-template-columns:1fr } }
.review{ background:#fff; border:4px solid var(--ink); border-radius:22px; padding:1.6rem;
  box-shadow:6px 6px 0 var(--ink); transition:transform .3s var(--spring); }
.review:hover{ transform:rotate(-1.5deg) translateY(-4px); }
.review__stars{ color:var(--red); font-size:1.3rem; letter-spacing:.1em; }
.review__title{ font-family:var(--f-display); font-size:1.3rem; margin:.4rem 0; }
.review__text{ font-weight:600; color:#333; }
.review__by{ margin-top:.8rem; font-size:.85rem; font-weight:800; color:#888; }

/* ============================================================
   COMPRAR
   ============================================================ */
.buy__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media(max-width:760px){ .buy__grid{ grid-template-columns:1fr } }
.retailer{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start;
  background:#fff; border:4px solid var(--ink); border-radius:20px; padding:1.8rem;
  box-shadow:6px 6px 0 var(--ink); cursor:pointer;
  transition:transform .25s var(--spring), box-shadow .25s var(--spring), background .25s; }
.retailer:hover{ transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--ink); background:var(--yellow); }
.retailer__name{ font-family:var(--f-display); font-size:1.5rem; }
.retailer__go{ font-family:var(--f-display); color:var(--red); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:#fff; position:relative; z-index:1;
  padding:clamp(3rem,6vw,5rem) clamp(1.2rem,5vw,3rem) 2.5rem; text-align:center; overflow:hidden; }
.footer__big{ font-family:var(--f-display); font-size:clamp(3rem,18vw,16rem); line-height:.8;
  color:#fff; -webkit-text-stroke:3px var(--yellow); paint-order:stroke; opacity:.9; }
.footer__row{ display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; margin-top:1.4rem;
  font-weight:700; color:#ffd; }
.footer__row a:hover{ color:var(--yellow); }

/* ============================================================
   MODAL / QUICKVIEW
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:9500; display:grid; place-items:center; padding:1.2rem;
  visibility:hidden; opacity:0; transition:opacity .35s var(--ease), visibility .35s; }
.modal.is-open{ visibility:visible; opacity:1; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(14,14,16,.72); backdrop-filter:blur(6px); cursor:pointer; }
.modal__panel{ position:relative; z-index:2; width:min(860px,100%); max-height:90vh; overflow:auto;
  display:grid; grid-template-columns:1fr 1.1fr; background:var(--paper);
  border:5px solid var(--ink); border-radius:26px; box-shadow:12px 12px 0 var(--ink);
  transform:translateY(30px) scale(.94); opacity:0; transition:transform .45s var(--spring) .05s, opacity .4s .05s; }
.modal.is-open .modal__panel{ transform:none; opacity:1; }
.modal__media{ display:grid; place-items:center; padding:2rem; background:var(--m-bg,var(--blue));
  border-right:5px solid var(--ink); }
.modal__media .bag{ width:70%; animation:bob 3.4s ease-in-out infinite;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.3)); }
.modal__body{ padding:2.2rem; }
.modal__cat{ font-family:var(--f-display); color:var(--red); font-size:.85rem; letter-spacing:.08em; }
.modal__name{ font-family:var(--f-display); font-size:clamp(1.8rem,4vw,2.6rem); line-height:.95; margin:.2rem 0; }
.modal__tag{ font-style:italic; font-weight:800; color:#666; margin-bottom:1rem; }
.modal__desc{ font-weight:600; color:#333; margin-bottom:1.2rem; }
.modal__meta{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-bottom:1.4rem; font-weight:800; }
.modal__meta .spice i{ font-size:1.1rem; }
.modal__buylabel{ font-family:var(--f-display); color:var(--red); font-size:.85rem; margin-bottom:.6rem; }
.modal__buy{ display:flex; flex-direction:column; gap:.55rem; }
.modal__buy a{ display:flex; justify-content:space-between; align-items:center; font-family:var(--f-display);
  font-size:.95rem; padding:.8rem 1.1rem; border:3px solid var(--ink); border-radius:14px; background:#fff;
  cursor:pointer; box-shadow:3px 3px 0 var(--ink); transition:transform .2s var(--spring), background .2s; }
.modal__buy a:hover{ background:var(--yellow); transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.modal__close{ position:absolute; top:-18px; right:-18px; z-index:5; width:46px; height:46px; border-radius:50%;
  background:var(--red); color:#fff; border:4px solid var(--ink); font-size:1.1rem; cursor:pointer;
  box-shadow:3px 3px 0 var(--ink); transition:transform .25s var(--spring); }
.modal__close:hover{ transform:rotate(90deg) scale(1.1); }
@media(max-width:640px){ .modal__panel{ grid-template-columns:1fr } .modal__media{ border-right:0; border-bottom:5px solid var(--ink) } }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .7s var(--ease), transform .7s var(--spring); }
.reveal.in{ opacity:1; transform:none; }

/* confeti / lluvia de cacahuates */
.peanut-drop{ position:fixed; top:-40px; z-index:9400; font-size:1.6rem; pointer-events:none;
  animation:drop linear forwards; }
@keyframes drop{ to{ transform:translateY(110vh) rotate(540deg); opacity:.2 } }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__title .w,.hero__eyebrow,.hero__sub,.hero__cta{ opacity:1; transform:none; }
}