/* =========================================================
   La Comadre en Casa · Concepto B "La Tienda del Barrio"
   Hoja de estilos compartida. El cartel de la taquería,
   hecho tienda. Color que inunda, neo-brutalista, ruidoso.
   ========================================================= */

:root{
  --rojo:#B02216;
  --rojo-osc:#86221B;
  --crema:#E5CF97;
  --crema-d:#d8bf7d;
  --blanco:#FFFFFF;
  --negro:#2B2A2C;
  --verde:#4B5646;
  --marron:#794023;
  --gris:#9b958a;
  --disp:'Anton',Impact,sans-serif;
  --body:'Manrope',system-ui,-apple-system,sans-serif;
  --mano:'Caveat',cursive;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--body);color:var(--negro);background:var(--blanco);
  line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;
  padding-bottom:62px;
}
@media(min-width:960px){body{padding-bottom:0;}}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;line-height:.96;text-transform:uppercase;letter-spacing:.01em;}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px;}
.wrap-narrow{max-width:800px;margin:0 auto;padding:0 20px;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--negro);color:var(--crema);padding:10px 16px;z-index:200;font-family:var(--disp);}
.skip-link:focus{left:0;}
:focus-visible{outline:3px solid var(--negro);outline-offset:2px;}

/* ---------- marquesina ---------- */
.marquee{
  background:var(--negro);color:var(--crema);overflow:hidden;white-space:nowrap;
  padding:7px 0;border-bottom:3px solid var(--negro);
}
.marquee .track{
  display:inline-block;white-space:nowrap;animation:slide 52s linear infinite;
  font-family:var(--disp);font-size:15px;letter-spacing:.06em;
}
.marquee .track span{padding:0 6px;}
.marquee .star{color:var(--rojo);}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){
  .marquee .track{animation:none;}
}

/* ---------- nav ---------- */
nav.site{position:sticky;top:0;z-index:90;background:var(--blanco);border-bottom:4px solid var(--negro);}
.nav-in{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 26px;max-width:1320px;margin:0 auto;
}
.nav-logo{display:block;text-decoration:none;border:none;outline:none;line-height:0;overflow:hidden;}
.nav-logo img{
  height:96px;width:auto;display:block;border:none;outline:none;text-decoration:none;
}
.nav-links{display:none;gap:30px;font-family:var(--disp);font-size:22px;text-transform:uppercase;letter-spacing:.02em;}
.nav-links a{transition:color .12s;}
.nav-links a:hover,.nav-links a.on{color:var(--rojo);}
.nav-right{display:flex;align-items:center;gap:10px;}
.cart-btn{
  font-family:var(--disp);font-size:19px;text-transform:uppercase;letter-spacing:.02em;
  background:var(--rojo);color:var(--crema);border:3px solid var(--negro);
  box-shadow:4px 4px 0 var(--negro);padding:11px 16px;cursor:pointer;
  display:flex;gap:7px;align-items:center;transition:transform .1s;
}
.cart-btn:hover{transform:translate(-1px,-1px);}
.cart-count{
  background:var(--crema);color:var(--rojo);border-radius:50%;
  min-width:22px;height:22px;padding:0 4px;display:grid;place-items:center;
  font-size:13px;font-family:var(--body);font-weight:800;line-height:1;
}
.burger{display:flex;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px;}
.burger span{width:24px;height:3px;background:var(--negro);display:block;}
@media(min-width:960px){.nav-links{display:flex;}.burger{display:none;}}
.mobile-menu{display:none;background:var(--crema);border-bottom:3px solid var(--negro);padding:6px 20px 14px;}
.mobile-menu.open{display:block;}
.mobile-menu a{
  display:block;padding:11px 0;font-family:var(--disp);font-size:21px;text-transform:uppercase;
  border-bottom:2px solid var(--crema-d);
}
.mobile-menu a:last-child{border-bottom:none;}
@media(min-width:960px){.mobile-menu{display:none!important;}}

/* ---------- mascota ---------- */
.run{animation:run 1s ease-in-out infinite;transform-origin:bottom center;}
@keyframes run{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-7px) rotate(2deg);}}
@media(prefers-reduced-motion:reduce){.run{animation:none;}}
.bocadillo{
  font-family:var(--mano);font-weight:700;font-size:23px;
  background:var(--blanco);color:var(--negro);border:3px solid var(--negro);
  border-radius:18px;padding:6px 14px;display:inline-block;position:relative;
  box-shadow:3px 3px 0 var(--negro);
}
.bocadillo::after{
  content:"";position:absolute;bottom:-13px;left:24px;width:0;height:0;
  border:8px solid transparent;border-top-color:var(--negro);
}
.bocadillo.crema{background:var(--crema);}

/* ---------- botones ---------- */
.btn{
  font-family:var(--disp);font-size:20px;text-transform:uppercase;cursor:pointer;
  border:3px solid var(--negro);padding:13px 24px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:5px 5px 0 var(--negro);transition:transform .1s,box-shadow .1s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--negro);}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--negro);}
.btn-crema{background:var(--crema);color:var(--negro);}
.btn-rojo{background:var(--rojo);color:var(--crema);}
.btn-negro{background:var(--negro);color:var(--crema);}
.btn-blanco{background:var(--blanco);color:var(--negro);}
.btn-ghost{background:transparent;color:var(--crema);box-shadow:none;border-color:var(--crema);}
.btn-ghost:hover{background:var(--crema);color:var(--negro);box-shadow:none;transform:none;}
.btn-block{width:100%;}
.btn-lg{font-size:26px;padding:16px 30px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:3px 3px 0 var(--gris);border-color:var(--gris);}
.linkbig{
  font-family:var(--disp);font-size:17px;text-transform:uppercase;
  border-bottom:3px solid var(--rojo);padding-bottom:2px;display:inline-block;
}
.linkbig:hover{color:var(--rojo);}

/* ---------- secciones ---------- */
section{position:relative;}
.pad{padding:54px 0;}
.pad-sm{padding:36px 0;}
.sec-crema{background:var(--crema);}
.sec-negro{background:var(--negro);color:var(--crema);}
.sec-rojo{background:var(--rojo);color:var(--crema);}
.sec-blanco{background:var(--blanco);}
.kicker{font-family:var(--mano);font-weight:700;font-size:26px;color:var(--rojo);display:block;line-height:1.22;margin-bottom:7px;}
.sec-negro .kicker,.sec-rojo .kicker{color:var(--crema);}
h2.big{font-size:clamp(34px,7vw,66px);margin-bottom:10px;}
.sec-negro h2.big,.sec-rojo h2.big{color:var(--crema);}
.sub2{font-size:15.5px;max-width:52ch;margin-bottom:26px;opacity:.92;}

/* ---------- zonas de foto ---------- */
.foto{
  border:3px solid var(--negro);position:relative;
  display:flex;align-items:flex-end;padding:10px;
  background:repeating-linear-gradient(45deg,#9c1d12,#9c1d12 16px,#86221B 16px,#86221B 32px);
  min-height:200px;
}
.foto.tone-verde{background:repeating-linear-gradient(45deg,#414c3d,#414c3d 16px,#384234 16px,#384234 32px);}
.foto.tone-marron{background:repeating-linear-gradient(45deg,#6a3a1f,#6a3a1f 16px,#5c321b 16px,#5c321b 32px);}
.foto.tone-negro{background:repeating-linear-gradient(45deg,#3a3939,#3a3939 16px,#2b2a2c 16px,#2b2a2c 32px);}
.foto.tone-crema{background:repeating-linear-gradient(45deg,#dcc488,#dcc488 16px,#d2b877 16px,#d2b877 32px);}
.foto.tone-blanco{background:repeating-linear-gradient(45deg,#e7e2d4,#e7e2d4 16px,#ddd6c4 16px,#ddd6c4 32px);}
.foto .fc{
  font-family:var(--mano);font-weight:700;font-size:18px;
  background:rgba(0,0,0,.5);color:#fff;padding:2px 10px;
}
.foto.tone-crema .fc,.foto.tone-blanco .fc{background:rgba(255,255,255,.65);color:var(--negro);}
.foto-note{
  position:absolute;top:8px;left:8px;font-family:var(--disp);
  font-size:11px;letter-spacing:.04em;background:var(--crema);color:var(--negro);
  padding:3px 8px;border:2px solid var(--negro);
}
.foto.tone-crema .foto-note,.foto.tone-blanco .foto-note{background:var(--rojo);color:var(--crema);border-color:var(--negro);}

/* ---------- hero ---------- */
.hero{
  background:var(--rojo);color:var(--crema);
  border-bottom:4px solid var(--negro);
  padding:36px 0 40px;overflow:hidden;
  /* viewport completo menos marquee (~36px) y header (~110px) */
  min-height:calc(100vh - 150px);
  display:flex;align-items:center;
}
@media(max-width:859px){
  .hero{min-height:auto;padding:26px 0 34px;}
}
.hero .wrap{width:100%;}
.hero-grid{display:grid;gap:28px;align-items:center;}
@media(min-width:860px){.hero-grid{grid-template-columns:1.15fr 1fr;gap:36px;}}
.hero-col-left{display:flex;flex-direction:column;justify-content:center;gap:32px;}
.hero-logo-mark{
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  margin:4px 0;
}
.hero-logo-big{
  width:100%;max-width:440px;height:auto;display:block;
  filter:brightness(0) saturate(100%) invert(94%) sepia(15%) saturate(522%) hue-rotate(355deg) brightness(101%) contrast(89%);
}
@media(min-width:1100px){.hero-logo-big{max-width:500px;}}
.hero-en-caja{
  font-family:var(--mano);font-weight:700;
  text-transform:lowercase;letter-spacing:-0.01em;line-height:.95;
  color:var(--rojo);background:var(--crema);
  padding:4px 22px 8px;display:inline-block;transform:rotate(-2deg);
  font-size:clamp(38px,5.4vw,62px);
  box-shadow:5px 5px 0 var(--negro);
}
.hero .sub{font-size:16.5px;margin:14px 0 18px;max-width:44ch;color:#f4e6c8;}
.hero .btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px;}
.hero-art{
  position:relative;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:0;height:100%;
}
.boc-ruleta{
  position:relative;align-self:flex-start;margin-left:10%;
  display:flex;align-items:flex-start;gap:4px;z-index:3;margin-bottom:-12px;
}
.boc-ruleta .bocadillo{
  font-family:var(--mano);font-weight:700;font-size:28px;
  background:var(--crema);color:var(--negro);border:3px solid var(--negro);
  border-radius:20px;padding:7px 16px;display:inline-block;position:relative;
  box-shadow:4px 4px 0 var(--negro);transform:rotate(-2deg);
}
.boc-ruleta .flecha-abajo{margin-top:18px;margin-left:-4px;width:46px;height:62px;}
.hero-art img.run{
  width:260px;height:auto;margin-top:4px;
  animation:bob 2.4s ease-in-out infinite;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.2));
}
@media(min-width:1100px){.hero-art img.run{width:300px;}}
/* Imagen de la caja en hero (desktop) */
.hero-caja-img{
  display:none;
  width:100%;max-width:500px;height:auto;
  filter:drop-shadow(0 12px 36px rgba(0,0,0,.5));
  transform:rotate(3deg);
  animation:bob-caja 3.5s ease-in-out infinite;
}
@keyframes bob-caja{
  0%,100%{transform:rotate(3deg) translateY(0);}
  50%{transform:rotate(3deg) translateY(-10px);}
}
@media(min-width:860px){
  .hero-caja-img{display:block;}
  .hero-art-mobile{display:none !important;}
}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(-1deg);}
  50%{transform:translateY(-6px) rotate(1deg);}
}
@media(prefers-reduced-motion:reduce){.hero-art img.run{animation:none;}}

/* ---------- hero split (desktop estilo hotones) ---------- */
.hero-split{display:flex;flex-direction:column;width:100%;}
.hero-split-left{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  width:100%;gap:32px;padding:0 20px;
}
.hero-split-right{width:100%;}
.hero-only-mobile{display:block;}
.hero-caja-wrap{
  position:relative;display:none;width:90%;max-width:560px;align-self:center;
}
.hero-caja-principal{width:100%;height:auto;display:block;}
.hero-sticker{
  position:absolute;bottom:-12px;left:-12px;
  width:110px;height:110px;display:grid;place-items:center;z-index:3;
}
.hero-sticker svg{position:absolute;inset:0;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.25));}
.hero-sticker-txt{
  position:relative;font-family:var(--mano);font-weight:700;
  font-size:12px;line-height:1.02;color:#B02216;text-align:center;
  transform:rotate(-8deg);
}
@media(min-width:860px){
  .hero{padding:0;min-height:0;align-items:stretch;}
  .hero-split{flex-direction:row;height:calc(100vh - 162px);min-height:500px;max-height:820px;}
  .hero-split-left{
    width:50%;align-items:center;justify-content:flex-start;gap:8px;padding:8px 12px 80px;position:relative;
    background:url('assets/fondo-hero.jpg') center/cover no-repeat;
  }
  .hero-split-left .btns{position:absolute;bottom:14%;left:50%;transform:translateX(-38%);width:90%;}
  .hero-split-left > a[href*="taqueria"]{position:absolute;bottom:6%;left:50%;transform:translateX(-38%);white-space:nowrap;}
  .hero-split-right{width:50%;background:var(--rojo);}
  .hero-only-mobile{display:none;}
  .hero-caja-wrap{display:flex;align-items:center;justify-content:center;width:100%;position:relative;}
  .hero-caja-principal{width:100%;height:auto;max-height:calc(100vh - 160px);}
  .hero-sticker{position:absolute;bottom:18%;left:5%;width:110px;height:110px;}
}

/* RULETA CTA grande callejero estilo Temu */
.ruleta-cta{
  margin-top:14px;cursor:pointer;
  background:linear-gradient(135deg,#FFD23F 0%,#F4A300 70%,#E18900 100%);
  color:var(--negro);border:4px solid var(--negro);
  box-shadow:6px 6px 0 var(--negro);padding:15px 26px;
  display:flex;align-items:center;gap:16px;font-family:var(--body);
  transform:rotate(-1deg);transition:transform .12s,box-shadow .12s;
  position:relative;animation:pulseRuleta 2.8s ease-in-out infinite;
  text-align:left;
}
.ruleta-cta::before{
  content:"¡NUEVO!";position:absolute;top:-14px;right:-12px;
  background:var(--rojo);color:var(--crema);font-family:var(--disp);
  font-size:13px;letter-spacing:.08em;padding:4px 10px;
  border:3px solid var(--negro);transform:rotate(8deg);
}
.ruleta-cta:hover{transform:rotate(-1deg) translate(-2px,-2px);box-shadow:8px 8px 0 var(--negro);}
.ruleta-cta:active{transform:rotate(-1deg) translate(2px,2px);box-shadow:2px 2px 0 var(--negro);}
.ruleta-cta .ic-ruleta{
  width:48px;height:48px;background:var(--negro);color:#FFD23F;
  border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  animation:spinIcono 7s linear infinite;
}
.ruleta-cta .ic-ruleta svg{width:30px;height:30px;}
.ruleta-cta .ruleta-txt{display:flex;flex-direction:column;line-height:1;}
.ruleta-cta .r1{font-family:var(--disp);font-size:26px;letter-spacing:.04em;text-transform:uppercase;}
.ruleta-cta .r2{font-family:var(--mano);font-size:21px;font-weight:700;color:var(--rojo);margin-top:3px;}
@keyframes pulseRuleta{
  0%,100%{box-shadow:6px 6px 0 var(--negro);}
  50%{box-shadow:6px 6px 0 var(--negro),0 0 0 8px rgba(255,210,63,.35);}
}
@keyframes spinIcono{from{transform:rotate(0);}to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){
  .ruleta-cta{animation:none;}
  .ruleta-cta .ic-ruleta{animation:none;}
}

/* MODAL RULETA */
.ruleta-modal{position:fixed;inset:0;z-index:200;display:none;}
.ruleta-modal.open{display:flex;}
.ruleta-modal-back{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);}
.ruleta-modal-card{
  position:relative;margin:auto;max-width:560px;width:calc(100% - 32px);
  background:var(--crema);color:var(--negro);border:4px solid var(--negro);
  box-shadow:10px 10px 0 var(--rojo);padding:28px 24px 22px;
  text-align:center;max-height:96vh;overflow-y:auto;
}
.ruleta-close{
  position:absolute;top:8px;right:10px;background:transparent;border:none;
  font-size:36px;line-height:1;cursor:pointer;color:var(--negro);font-family:var(--disp);
}
.ruleta-sub{font-size:14.5px;margin:4px 0 14px;color:#3a3936;max-width:42ch;margin-left:auto;margin-right:auto;}
.ruleta-stage{position:relative;margin:6px auto 14px;width:min(360px,86vw);}
.ruleta-marker{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:5;
}
.ruleta-wheel{
  width:100%;height:auto;display:block;
  transition:transform 4.2s cubic-bezier(.18,.85,.18,1);
  transform:rotate(0deg);
}
.ruleta-wheel text{font-family:'Anton',sans-serif;font-size:15px;letter-spacing:.02em;pointer-events:none;}
.ruleta-actions{margin:6px 0 14px;}
.btn-girar{font-family:var(--disp);font-size:24px;padding:14px 36px;}
.btn-girar:disabled{opacity:.5;cursor:not-allowed;}
.ruleta-resultado{
  display:none;background:var(--blanco);border:3px solid var(--negro);
  box-shadow:5px 5px 0 var(--negro);padding:18px;margin:10px 0;
}
.ruleta-resultado.show{display:block;animation:popPremio .4s ease;}
@keyframes popPremio{from{transform:scale(.85);opacity:0;}to{transform:scale(1);opacity:1;}}
.rr-eyebrow{font-family:var(--disp);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--rojo);margin:0 0 4px;}
.rr-premio{font-family:var(--disp);font-size:32px;text-transform:uppercase;line-height:1;margin:2px 0 8px;}
.rr-code{font-family:var(--body);font-size:14px;margin:2px 0 10px;}
.rr-code span{font-family:var(--disp);font-size:20px;letter-spacing:.06em;background:var(--negro);color:var(--crema);padding:3px 10px;}
.rr-note{font-size:12px;color:#555;margin:10px 0 0;}
.ruleta-mini{font-size:11px;color:#555;margin:6px 0 0;letter-spacing:.02em;}

/* ---------- badges ---------- */
.badges{background:var(--negro);color:var(--crema);display:grid;grid-template-columns:repeat(2,1fr);}
.badges div{
  padding:16px 14px;display:flex;gap:10px;align-items:center;
  font-family:var(--disp);font-size:16px;text-transform:uppercase;
  border-right:2px solid #45433f;border-bottom:2px solid #45433f;
}
.badges .ic{
  width:36px;height:36px;border-radius:50%;background:var(--rojo);
  display:grid;place-items:center;flex-shrink:0;
}
@media(min-width:760px){.badges{grid-template-columns:repeat(4,1fr);}.badges div{border-bottom:none;}}

/* ---------- grid de cajas ---------- */
.cajas{display:grid;gap:18px;}
@media(min-width:620px){.cajas{grid-template-columns:repeat(2,1fr);}}
@media(min-width:980px){.cajas.cols-3{grid-template-columns:repeat(3,1fr);}}
.caja{
  border:3px solid var(--negro);box-shadow:6px 6px 0 var(--negro);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .12s,box-shadow .12s;
}
.caja:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--negro);}
.caja .foto{min-height:170px;border:none;border-bottom:3px solid var(--negro);}
.caja .body{padding:16px;flex-grow:1;display:flex;flex-direction:column;}
.caja h3{font-size:36px;line-height:.9;}
.caja .meta{font-family:var(--disp);font-size:15px;text-transform:uppercase;opacity:.85;margin:3px 0 8px;}
.caja p{font-size:13.5px;flex-grow:1;margin-bottom:12px;}
.caja .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.caja .precio{font-family:var(--disp);font-size:44px;line-height:.8;}
.caja .add{
  font-family:var(--disp);font-size:16px;text-transform:uppercase;
  border:3px solid var(--negro);padding:9px 14px;cursor:pointer;
  box-shadow:3px 3px 0 var(--negro);background:var(--negro);color:var(--crema);
  transition:transform .1s;
}
.caja .add:hover{transform:translate(-1px,-1px);}
.cinta{
  position:absolute;top:14px;right:-36px;transform:rotate(34deg);
  background:var(--negro);color:var(--crema);font-family:var(--disp);
  font-size:13px;text-transform:uppercase;padding:5px 42px;z-index:3;
}
/* color-blocking por caja */
.c-estandar{background:var(--rojo);color:var(--crema);}
.c-premium{background:var(--verde);color:var(--crema);}
.c-evento{background:var(--negro);color:var(--crema);}
.c-quesa{background:var(--crema);color:var(--negro);}
.c-quesa .add{background:var(--rojo);color:var(--crema);}
.c-quesa .cinta{background:var(--rojo);}
.c-salsa{background:var(--blanco);color:var(--negro);}
.c-salsa .add{background:var(--rojo);color:var(--crema);}
.c-merch{background:var(--marron);color:var(--crema);}

/* ---------- 3 pasos ---------- */
.pasos{display:grid;gap:20px;}
@media(min-width:760px){.pasos{grid-template-columns:repeat(3,1fr);}}
.paso{background:var(--blanco);border:3px solid var(--negro);box-shadow:6px 6px 0 var(--negro);padding:22px;text-align:center;}
.sec-rojo .paso,.sec-negro .paso{background:var(--blanco);color:var(--negro);}
.paso .ic{
  width:74px;height:74px;border-radius:50%;background:var(--rojo);
  display:grid;place-items:center;margin:0 auto 12px;border:3px solid var(--negro);
}
.paso .n{font-family:var(--disp);font-size:20px;color:var(--rojo);}
.paso h3{font-size:28px;margin:2px 0 6px;}
.paso p{font-size:14px;}
.paso .foto{margin-top:12px;min-height:120px;}

/* ---------- salsas con heat-meter ---------- */
.salsas-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:20px;}
.salsa-btn{
  background:var(--negro);border:3px solid var(--crema);padding:12px 4px 10px;
  cursor:pointer;font-family:var(--body);text-align:center;color:var(--crema);transition:transform .1s;
}
.salsa-btn:hover{transform:translateY(-4px);}
.salsa-btn.on{background:var(--rojo);border-color:var(--rojo);box-shadow:0 0 0 3px var(--crema);}
.frasco{
  width:28px;height:42px;margin:0 auto 6px;
  background:linear-gradient(180deg,#cdb98a 0 24%,var(--vc,#7aa05c) 24% 100%);
  border:2.5px solid var(--crema);border-radius:3px 3px 5px 5px;
}
.salsa-btn .nm{font-family:var(--disp);font-size:16px;text-transform:uppercase;line-height:1;}
.salsa-detail{
  background:var(--crema);color:var(--negro);border:3px solid var(--negro);
  box-shadow:6px 6px 0 var(--negro);padding:22px;
}
.salsa-detail h3{font-size:40px;color:var(--rojo);}
.heat{display:flex;gap:5px;margin:10px 0;}
.heat .pip{width:36px;height:15px;border:2.5px solid var(--negro);background:var(--blanco);}
.heat .pip.on{background:var(--rojo);}
.salsa-detail .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.tag{font-family:var(--disp);font-size:14px;text-transform:uppercase;border:2.5px solid var(--negro);padding:3px 10px;}

/* ---------- caja iglú ---------- */
.iglu-grid{display:grid;gap:16px;}
@media(min-width:760px){.iglu-grid{grid-template-columns:repeat(3,1fr);}}
.iglu-card{background:var(--rojo-osc);border:3px solid var(--crema);padding:22px;text-align:center;}
.iglu-card .ic{width:64px;height:64px;border-radius:50%;background:var(--crema);display:grid;place-items:center;margin:0 auto 12px;}
.iglu-card h3{font-size:26px;color:var(--crema);}
.iglu-card p{font-size:13.5px;opacity:.92;margin-top:5px;}
.sello{
  font-family:var(--mano);font-weight:700;font-size:24px;
  background:var(--crema);color:var(--rojo);border:3px solid var(--negro);
  box-shadow:4px 4px 0 var(--negro);padding:9px 18px;display:inline-block;
  transform:rotate(-2deg);
}
.sello.sm{font-size:20px;padding:7px 14px;}

/* ---------- unboxing ---------- */
.unbox-grid{display:grid;gap:22px;align-items:center;}
@media(min-width:820px){.unbox-grid{grid-template-columns:1.1fr 1fr;}}
.video-zone{
  border:3px solid var(--negro);box-shadow:7px 7px 0 var(--negro);
  min-height:300px;display:grid;place-items:center;position:relative;
}
.play{width:78px;height:78px;border-radius:50%;background:var(--crema);border:3px solid var(--negro);display:grid;place-items:center;}
.play::after{content:"";border-left:24px solid var(--rojo);border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px;}
.unbox-list{list-style:none;display:grid;gap:11px;}
.unbox-list li{display:flex;gap:11px;align-items:center;font-size:14.5px;font-weight:600;}
.unbox-list .ic{width:38px;height:38px;border-radius:8px;background:var(--rojo);display:grid;place-items:center;flex-shrink:0;border:2.5px solid var(--negro);}

/* ---------- testimonios ---------- */
.testi-grid{display:grid;gap:18px;}
@media(min-width:760px){.testi-grid{grid-template-columns:repeat(3,1fr);}}
.testi{border:3px solid var(--negro);box-shadow:6px 6px 0 var(--negro);padding:20px;}
.testi.tr{background:var(--rojo);color:var(--crema);}
.testi.tv{background:var(--verde);color:var(--crema);}
.testi.tc{background:var(--crema);color:var(--negro);}
.testi .stars{font-size:17px;letter-spacing:2px;}
.testi blockquote{font-size:16px;font-weight:600;margin:8px 0 12px;line-height:1.35;}
.testi .who{font-family:var(--disp);font-size:17px;text-transform:uppercase;}
.gbox{
  margin-top:24px;background:var(--blanco);border:3px solid var(--negro);
  box-shadow:6px 6px 0 var(--negro);padding:18px 22px;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
}
.gbox .score{font-family:var(--disp);font-size:60px;color:var(--rojo);line-height:.8;}
.gbox p{font-size:14px;max-width:46ch;}

/* ---------- quienes ---------- */
.quien-grid{display:grid;gap:22px;align-items:center;}
@media(min-width:820px){.quien-grid{grid-template-columns:1fr 1.2fr;}}
.quien-grid .foto{min-height:260px;}

/* ---------- faq ---------- */
.faq-item{border:3px solid var(--negro);box-shadow:5px 5px 0 var(--negro);margin-bottom:12px;background:var(--blanco);}
.faq-q{
  width:100%;background:none;border:none;cursor:pointer;
  font-family:var(--disp);font-size:22px;text-transform:uppercase;text-align:left;
  padding:15px 50px 15px 18px;position:relative;color:var(--negro);
}
.faq-q::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:32px;color:var(--rojo);font-family:var(--disp);}
.faq-q[aria-expanded="true"]::after{content:"\2212";}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a-inner{padding:0 18px 16px;font-size:14.5px;}
.faq-a-inner p+p{margin-top:8px;}

/* ---------- newsletter ---------- */
.news-form{display:flex;flex-wrap:wrap;gap:12px;max-width:540px;}
.news-form input{flex:1;min-width:220px;font-family:var(--body);font-size:16px;padding:14px 16px;border:3px solid var(--negro);}
.news-micro{font-size:12.5px;opacity:.85;margin-top:10px;}
.news-ok{font-family:var(--mano);font-weight:700;font-size:26px;margin-top:12px;display:none;}
.news-ok.show{display:block;}

/* ---------- cierre ---------- */
.cierre{background:var(--rojo);color:var(--crema);text-align:center;padding:62px 0;border-top:4px solid var(--negro);}
.cierre h2{font-size:clamp(40px,9vw,92px);margin-bottom:18px;color:var(--crema);}
.cierre img.frase{max-width:360px;margin:24px auto 0;}
.tagline{
  display:inline-block;margin-top:22px;font-family:var(--disp);font-size:16px;
  letter-spacing:.34em;color:var(--negro);background:var(--crema);padding:6px 16px;
}

/* ---------- footer ---------- */
footer.site{background:var(--negro);color:var(--crema);padding:44px 0 0;}
.foot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:30px;}
.foot-brand img{height:50px;width:auto;margin-bottom:12px;}
.foot-brand p{font-size:13px;color:#bdb6a6;max-width:30ch;}
.foot-col h4{font-family:var(--disp);font-size:20px;text-transform:uppercase;color:var(--rojo);margin-bottom:8px;}
.foot-col a{display:block;font-size:14px;padding:3px 0;color:#e4ddc9;}
.foot-col a:hover{color:#fff;}
@media(min-width:680px){.foot-grid{grid-template-columns:1.5fr repeat(3,1fr);}}
.foot-marquee{background:var(--rojo);color:var(--crema);overflow:hidden;white-space:nowrap;padding:8px 0;border-top:3px solid var(--negro);}
.foot-marquee .track{display:inline-block;animation:slide 20s linear infinite;font-family:var(--disp);font-size:17px;text-transform:uppercase;letter-spacing:.08em;}
@media(prefers-reduced-motion:reduce){.foot-marquee .track{animation:none;}}
.foot-cr{text-align:center;font-size:12px;color:#9b958a;padding:14px;}

/* ---------- sticky móvil ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--negro);padding:9px 14px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  border-top:3px solid var(--rojo);
}
.sticky-cta span{font-family:var(--disp);font-size:19px;text-transform:uppercase;color:var(--crema);}
.sticky-cta .btn{font-size:16px;padding:10px 16px;box-shadow:3px 3px 0 var(--rojo);}
@media(min-width:960px){.sticky-cta{display:none;}}

/* ---------- breadcrumb ---------- */
.crumbs{font-family:var(--disp);font-size:15px;text-transform:uppercase;padding:14px 0 0;}
.crumbs.on-rojo{color:#f4e6c8;}
.crumbs a:hover{color:var(--rojo);}
.crumbs.on-rojo a:hover{color:var(--negro);}

/* ---------- page hero genérico ---------- */
.page-hero{padding:40px 0;}
.page-hero h1{font-size:clamp(40px,8vw,82px);}
.page-hero .lead{font-size:17px;max-width:54ch;margin-top:14px;}

/* =========================================================
   PÁGINA DE PRODUCTO
   ========================================================= */
.phero{background:var(--rojo);color:var(--crema);border-bottom:4px solid var(--negro);padding:6px 0 44px;}
.phero-grid{display:grid;gap:26px;}
@media(min-width:880px){.phero-grid{grid-template-columns:1fr 1fr;align-items:start;}}
.gal-main{min-height:340px;}
.thumbs{display:flex;gap:9px;margin-top:12px;}
.thumb{flex:1;height:60px;border:3px solid var(--negro);cursor:pointer;
  background:repeating-linear-gradient(45deg,#9c1d12,#9c1d12 12px,#86221B 12px,#86221B 24px);}
.thumb.tone-verde{background:#414c3d;}
.thumb.tone-marron{background:#6a3a1f;}
.thumb.tone-negro{background:#2B2A2C;}
.thumb.tone-crema{background:#d8bf7d;}
.thumb.tone-blanco{background:#e7e2d4;}
.thumb.on{outline:4px solid var(--crema);outline-offset:2px;}
.cinta-tag{display:inline-block;background:var(--negro);color:var(--crema);font-family:var(--disp);font-size:15px;text-transform:uppercase;padding:5px 14px;margin-bottom:6px;}
.cinta-tag.verde{background:var(--verde);}
.phero h1{font-size:clamp(48px,9vw,88px);color:var(--crema);}
.phero .one{font-size:16px;margin:8px 0 16px;color:#f4e6c8;}
.precio-box{
  background:var(--crema);color:var(--negro);border:3px solid var(--negro);
  box-shadow:5px 5px 0 var(--negro);padding:14px 18px;display:inline-block;margin-bottom:18px;
}
.precio-box .p{font-family:var(--disp);font-size:64px;line-height:.8;}
.precio-box .x{font-family:var(--disp);font-size:16px;text-transform:uppercase;display:block;margin-top:5px;}
.selector{margin-bottom:18px;}
.selector h3,.selector .lbl{font-family:var(--disp);font-size:19px;text-transform:uppercase;margin-bottom:10px;display:block;}
.size-opts{display:grid;gap:10px;}
@media(min-width:520px){.size-opts{grid-template-columns:repeat(3,1fr);}}
.size-opt{
  border:3px solid var(--negro);background:var(--crema);color:var(--negro);
  padding:12px;cursor:pointer;box-shadow:4px 4px 0 var(--negro);transition:transform .1s;text-align:center;
}
.size-opt:hover{transform:translate(-1px,-1px);}
.size-opt.on{background:var(--negro);color:var(--crema);}
.size-opt .sn{font-family:var(--disp);font-size:24px;text-transform:uppercase;display:block;line-height:.95;}
.size-opt .sp{font-family:var(--disp);font-size:14px;text-transform:uppercase;}
/* selector carnes */
.carnes-wrap{margin-bottom:18px;}
.slots{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:14px;}
@media(min-width:480px){.slots{grid-template-columns:repeat(4,1fr);}}
.slot{
  border:3px dashed var(--negro);background:var(--crema);
  min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:8px 6px;cursor:pointer;text-align:center;color:var(--negro);
}
.slot.filled{border-style:solid;background:var(--negro);color:var(--crema);}
.slot.selected{box-shadow:0 0 0 3px var(--crema);}
.slot .slot-n{font-family:var(--disp);font-size:12px;text-transform:uppercase;}
.slot .slot-v{font-family:var(--disp);font-size:20px;text-transform:uppercase;line-height:.95;}
.slot:not(.filled) .slot-v{opacity:.5;}
.slot .slot-clear{font-size:10px;text-transform:uppercase;font-family:var(--disp);}
.carne-opts{display:flex;flex-wrap:wrap;gap:8px;}
.carne-chip{
  border:3px solid var(--negro);background:var(--crema);color:var(--negro);
  padding:8px 14px;cursor:pointer;font-family:var(--disp);font-size:17px;text-transform:uppercase;
  box-shadow:3px 3px 0 var(--negro);transition:transform .1s;
}
.carne-chip:hover{transform:translate(-1px,-1px);}
.carne-count{font-family:var(--disp);font-size:17px;text-transform:uppercase;margin-top:10px;}
.carne-count.ok{color:#bfe6a8;}
.phero .carne-count{color:#f4e6c8;}
.phero .carne-count.ok{color:#cdeebb;}
.qty-row{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap;}
.qty-row .lbl{font-family:var(--disp);font-size:18px;text-transform:uppercase;}
.stepper{display:flex;align-items:center;border:3px solid var(--negro);background:var(--crema);box-shadow:3px 3px 0 var(--negro);}
.stepper button{width:42px;height:42px;border:none;background:none;font-size:24px;cursor:pointer;font-family:var(--disp);color:var(--negro);}
.stepper button:hover{background:var(--crema-d);}
.stepper .val{width:40px;text-align:center;font-family:var(--disp);font-size:22px;}
.add-big{width:100%;font-size:24px;padding:17px;margin-bottom:14px;}
.reass{display:grid;gap:10px;font-size:13.5px;}
.reass .pago{display:flex;gap:8px;align-items:center;color:#f4e6c8;flex-wrap:wrap;}
.reass .pago b{background:var(--negro);color:var(--crema);font-family:var(--disp);font-size:14px;padding:3px 9px;}
.inc-grid{display:grid;gap:14px;grid-template-columns:1fr;}
@media(min-width:600px){.inc-grid{grid-template-columns:repeat(2,1fr);}}
.inc{display:flex;gap:12px;align-items:center;background:var(--blanco);border:3px solid var(--negro);box-shadow:4px 4px 0 var(--negro);padding:13px;}
.inc .ic{width:42px;height:42px;border-radius:9px;background:var(--rojo);display:grid;place-items:center;flex-shrink:0;border:2.5px solid var(--negro);}
.inc span{font-size:14px;}.inc b{font-weight:800;}
.envio-tabla{display:grid;gap:10px;}
@media(min-width:600px){.envio-tabla{grid-template-columns:repeat(3,1fr);}}
.et{border:3px solid var(--negro);padding:14px;background:var(--blanco);}
.sec-negro .et,.sec-rojo .et{border-color:var(--crema);background:transparent;}
.et .d{font-family:var(--disp);font-size:20px;text-transform:uppercase;}
.et .v{font-size:13.5px;opacity:.9;}
.et.free{background:var(--crema);color:var(--negro);border-color:var(--negro);}
.cross{background:var(--blanco);border:3px solid var(--negro);box-shadow:6px 6px 0 var(--negro);padding:22px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;}
.cross h3{font-size:32px;}
.cross .old{text-decoration:line-through;opacity:.5;}
.videozone{margin-top:24px;border:3px solid var(--negro);box-shadow:6px 6px 0 var(--negro);min-height:160px;display:grid;place-items:center;font-family:var(--disp);font-size:24px;text-transform:uppercase;background:repeating-linear-gradient(45deg,#3a3939,#3a3939 22px,#2b2a2c 22px,#2b2a2c 44px);color:var(--crema);}

/* =========================================================
   TIENDA
   ========================================================= */
.filtros{
  display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;
  padding:18px 0;border-top:3px solid var(--negro);border-bottom:3px solid var(--negro);margin-bottom:30px;
}
.filtro-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.filtro-label{font-family:var(--disp);font-size:16px;text-transform:uppercase;margin-right:4px;}
.chip{
  border:3px solid var(--negro);background:var(--blanco);
  padding:6px 14px;cursor:pointer;font-family:var(--disp);font-size:16px;text-transform:uppercase;
  box-shadow:3px 3px 0 var(--negro);transition:transform .1s;
}
.chip:hover{transform:translate(-1px,-1px);}
.chip.on{background:var(--rojo);color:var(--crema);}
.tienda-empty{display:none;font-family:var(--disp);font-size:28px;text-transform:uppercase;text-align:center;padding:50px 20px;color:var(--rojo);}

/* =========================================================
   CARRITO
   ========================================================= */
.cart-grid{display:grid;gap:24px;}
@media(min-width:840px){.cart-grid{grid-template-columns:1.5fr 1fr;align-items:start;}}
.prog{background:var(--blanco);border:3px solid var(--negro);box-shadow:5px 5px 0 var(--negro);padding:14px 16px;margin:18px 0 22px;}
.prog .txt{font-family:var(--disp);font-size:22px;text-transform:uppercase;margin-bottom:9px;}
.prog .txt.done{color:var(--verde);}
.bar{height:18px;background:var(--crema);border:3px solid var(--negro);overflow:hidden;}
.bar i{display:block;height:100%;background:var(--rojo);transition:width .35s ease,background .3s;width:0;}
.bar i.done{background:var(--verde);}
.line{display:grid;grid-template-columns:78px 1fr auto;gap:14px;border:3px solid var(--negro);box-shadow:5px 5px 0 var(--negro);padding:14px;margin-bottom:14px;background:var(--blanco);}
.line .ph{border:2.5px solid var(--negro);min-height:74px;background:repeating-linear-gradient(45deg,#9c1d12,#9c1d12 12px,#86221B 12px,#86221B 24px);}
.line .ph.salsa{background:repeating-linear-gradient(45deg,#c98b48,#c98b48 12px,#a8702f 12px,#a8702f 24px);}
.line .ph.merch{background:repeating-linear-gradient(45deg,#6a3a1f,#6a3a1f 12px,#5c321b 12px,#5c321b 24px);}
.line h3{font-size:26px;}
.line .variant{font-size:12.5px;color:#615c56;margin-bottom:6px;font-weight:600;}
.line .controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.line .stepper button{width:32px;height:32px;font-size:20px;}
.line .stepper .val{width:34px;font-size:18px;}
.rm{background:none;border:none;cursor:pointer;font-size:12.5px;color:var(--gris);text-decoration:underline;font-weight:600;}
.rm:hover{color:var(--rojo);}
.line .price{font-family:var(--disp);font-size:32px;color:var(--rojo);text-align:right;white-space:nowrap;}
.xsell{background:var(--negro);color:var(--crema);border:3px solid var(--negro);box-shadow:5px 5px 0 var(--rojo);padding:16px;margin-bottom:16px;display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;}
.xsell .t{font-family:var(--disp);font-size:21px;text-transform:uppercase;}
.xsell button{font-family:var(--disp);font-size:16px;text-transform:uppercase;background:var(--crema);color:var(--negro);border:3px solid var(--crema);padding:9px 15px;cursor:pointer;}
.resumen{background:var(--rojo);color:var(--crema);border:3px solid var(--negro);box-shadow:6px 6px 0 var(--negro);padding:22px;}
.resumen h2{font-size:34px;color:var(--crema);margin-bottom:14px;}
.rrow{display:flex;justify-content:space-between;font-size:15px;padding:6px 0;gap:12px;}
.rrow.muted{opacity:.82;font-size:13.5px;}
.rrow.descuento{color:#cdeebb;font-weight:700;}
.rrow.tot{border-top:3px solid var(--crema);margin-top:8px;padding-top:12px;align-items:center;}
.rrow.tot .l{font-family:var(--disp);font-size:26px;text-transform:uppercase;}
.rrow.tot .v{font-family:var(--disp);font-size:48px;color:var(--crema);line-height:.8;}
.codigo{margin:14px 0;}
.codigo summary{cursor:pointer;font-family:var(--disp);font-size:16px;text-transform:uppercase;}
.codigo .cin{display:flex;gap:8px;margin-top:10px;}
.codigo input{flex:1;border:3px solid var(--negro);padding:10px;font-family:var(--body);font-size:13.5px;text-transform:uppercase;}
.codigo button{border:3px solid var(--negro);background:var(--crema);color:var(--negro);font-family:var(--disp);font-size:15px;text-transform:uppercase;padding:0 14px;cursor:pointer;}
.codigo .msg{font-size:13px;margin-top:7px;font-weight:700;}
.codigo .msg.ok{color:#cdeebb;}
.codigo .msg.err{color:#f6c9c4;}
.pago{font-size:12.5px;margin-top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:#f4e6c8;}
.pago b{background:var(--negro);color:var(--crema);font-family:var(--disp);font-size:13px;padding:3px 8px;}
.tranq{margin-top:16px;background:var(--crema);color:var(--negro);border:3px solid var(--negro);padding:16px;}
.tranq .sello{font-family:var(--mano);font-weight:700;font-size:22px;color:var(--rojo);display:inline-block;margin-bottom:8px;}
.tranq p{font-size:13px;}
.cart-empty{display:none;text-align:center;padding:54px 22px;background:var(--blanco);border:3px solid var(--negro);box-shadow:6px 6px 0 var(--negro);}
.cart-empty img{width:90px;margin:0 auto 14px;}
.cart-empty h2{font-size:42px;margin-bottom:8px;}
.cart-empty p{font-family:var(--mano);font-weight:700;font-size:25px;color:var(--rojo);margin-bottom:22px;}
.cart-empty .btn{display:inline-flex;}

/* =========================================================
   CHECKOUT
   ========================================================= */
.checkout-grid{display:grid;gap:28px;}
@media(min-width:880px){.checkout-grid{grid-template-columns:1.4fr 1fr;align-items:start;}}
.steps-bar{display:flex;gap:8px;margin-bottom:26px;}
.step-pill{
  flex:1;text-align:center;font-family:var(--disp);font-size:15px;text-transform:uppercase;
  padding:10px 6px;border:3px solid var(--negro);background:var(--blanco);color:var(--gris);
}
.step-pill.on{background:var(--rojo);color:var(--crema);}
.step-pill.done{background:var(--crema);color:var(--negro);}
.checkout-step{display:none;}
.checkout-step.on{display:block;}
.field{margin-bottom:16px;}
.field label{display:block;font-family:var(--disp);font-size:16px;text-transform:uppercase;margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:15px;padding:12px 13px;
  border:3px solid var(--negro);background:var(--blanco);color:var(--negro);
}
.field .err-msg{display:none;font-size:12.5px;color:var(--rojo);margin-top:5px;font-weight:700;}
.field.error input,.field.error select,.field.error textarea{border-color:var(--rojo);background:#fbeae8;}
.field.error .err-msg{display:block;}
.field-row{display:grid;gap:0 14px;}
@media(min-width:520px){.field-row{grid-template-columns:1fr 1fr;}}
.field-row.thirds{grid-template-columns:1fr;}
@media(min-width:520px){.field-row.thirds{grid-template-columns:2fr 1fr 1fr;}}
.pay-opts{display:grid;gap:10px;margin:6px 0 18px;}
.pay-opt{border:3px solid var(--negro);background:var(--blanco);padding:14px 15px;cursor:pointer;display:flex;align-items:center;gap:12px;box-shadow:4px 4px 0 var(--negro);}
.pay-opt.on{background:var(--rojo);color:var(--crema);}
.pay-opt .pay-name{font-family:var(--disp);font-size:24px;text-transform:uppercase;}
.pay-opt .pay-desc{font-size:13px;opacity:.85;}
.pay-fields{margin-top:8px;}
.checkout-summary .line{grid-template-columns:1fr auto;background:transparent;border:none;box-shadow:none;padding:8px 0;border-bottom:2px solid var(--rojo-osc);margin:0;}
.checkout-summary .line .ph{display:none;}
.checkout-summary .line h3{font-size:20px;color:var(--crema);}
.checkout-summary .line .variant{color:#f0ddb4;}
.checkout-summary .line .price{font-size:22px;color:var(--crema);}
.order-ok{display:none;text-align:center;padding:50px 22px;}
.order-ok img.mascota{width:110px;margin:0 auto 18px;}
.order-ok h1{font-size:clamp(44px,8vw,80px);margin-bottom:10px;}
.order-ok p{font-size:16px;max-width:50ch;margin:0 auto 8px;}
.order-ok .ref{font-family:var(--mano);font-weight:700;font-size:28px;color:var(--rojo);margin:14px 0 8px;}

/* =========================================================
   HISTORIA / ENVIO / RECETARIO / CONTACTO / 404
   ========================================================= */
.prose{font-size:16px;max-width:64ch;}
.prose p+p{margin-top:14px;}
.prose h3{font-family:var(--disp);font-size:28px;text-transform:uppercase;margin:26px 0 8px;}
.diagram{display:grid;gap:10px;}
.diagram .layer{
  display:flex;gap:12px;align-items:center;padding:13px 16px;
  border:3px solid var(--negro);box-shadow:4px 4px 0 var(--negro);background:var(--blanco);font-size:14px;
}
.diagram .layer .n{font-family:var(--disp);font-size:30px;color:var(--rojo);width:40px;flex-shrink:0;}
.cobertura{display:grid;gap:18px;}
@media(min-width:680px){.cobertura{grid-template-columns:repeat(2,1fr);}}
.cob-card{border:3px solid var(--negro);box-shadow:5px 5px 0 var(--negro);padding:20px;background:var(--blanco);}
.cob-card.crema{background:var(--crema);}
.cob-card h3{font-size:30px;color:var(--rojo);margin-bottom:6px;}
.cob-card .cps{font-size:13px;color:var(--gris);margin-top:8px;}
.recetas-grid{display:grid;gap:26px;}
.receta{border:3px solid var(--negro);box-shadow:6px 6px 0 var(--negro);overflow:hidden;display:grid;background:var(--blanco);}
@media(min-width:760px){.receta{grid-template-columns:1fr 1.4fr;}}
.receta .foto{min-height:230px;border:none;border-right:3px solid var(--negro);}
@media(max-width:759px){.receta .foto{border-right:none;border-bottom:3px solid var(--negro);}}
.receta .receta-body{padding:24px;}
.receta .receta-meta{font-family:var(--disp);font-size:15px;text-transform:uppercase;color:var(--rojo);margin-bottom:6px;}
.receta h2{font-size:34px;margin-bottom:8px;}
.receta p{font-size:14.5px;margin-bottom:12px;}
.equipo-grid{display:grid;gap:20px;margin-top:10px;}
@media(min-width:680px){.equipo-grid{grid-template-columns:repeat(3,1fr);}}
.persona{border:3px solid var(--negro);box-shadow:6px 6px 0 var(--negro);background:var(--blanco);}
.persona .foto{min-height:200px;border:none;border-bottom:3px solid var(--negro);}
.persona .persona-body{padding:16px;text-align:center;}
.persona h3{font-size:28px;}
.persona .rol{font-family:var(--mano);font-weight:700;font-size:22px;color:var(--rojo);}
.persona p{font-size:13.5px;margin-top:6px;}
.contacto-grid{display:grid;gap:28px;}
@media(min-width:820px){.contacto-grid{grid-template-columns:1fr 1fr;}}
.info-block{border:3px solid var(--negro);box-shadow:5px 5px 0 var(--negro);background:var(--blanco);padding:20px;margin-bottom:16px;}
.info-block.rojo{background:var(--rojo);color:var(--crema);}
.info-block.crema{background:var(--crema);}
.info-block h3{font-size:26px;margin-bottom:8px;}
.info-block p{font-size:14.5px;}
.info-block a{font-family:var(--disp);text-transform:uppercase;border-bottom:3px solid currentColor;}
.mapa{border:3px solid var(--negro);box-shadow:6px 6px 0 var(--negro);background:var(--crema);min-height:260px;position:relative;overflow:hidden;}
.mapa .grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(43,42,44,.12) 2px,transparent 2px),linear-gradient(90deg,rgba(43,42,44,.12) 2px,transparent 2px);background-size:36px 36px;}
.mapa .calle{position:absolute;background:var(--blanco);}
.mapa .marker{position:absolute;left:50%;top:48%;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:3px;z-index:2;}
.mapa .marker .dot{width:24px;height:24px;background:var(--rojo);border:3px solid var(--negro);border-radius:50% 50% 50% 0;transform:rotate(45deg);}
.mapa .marker .lbl{font-family:var(--disp);font-size:18px;text-transform:uppercase;color:var(--crema);background:var(--rojo);padding:3px 9px;border:3px solid var(--negro);}
.notfound{background:var(--rojo);color:var(--crema);text-align:center;padding:60px 22px;border-bottom:4px solid var(--negro);}
.notfound .big{font-family:var(--disp);font-size:clamp(110px,24vw,240px);line-height:.8;color:var(--crema);}
.notfound h1{font-size:clamp(34px,6vw,56px);margin:6px 0 12px;color:var(--crema);}
.notfound p{font-size:16px;max-width:46ch;margin:0 auto 24px;color:#f4e6c8;}
.notfound img.mascota{width:150px;margin:0 auto 4px;}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:78px;transform:translateX(-50%) translateY(20px);
  background:var(--crema);color:var(--negro);padding:12px 18px;
  border:3px solid var(--negro);box-shadow:5px 5px 0 var(--rojo);
  font-family:var(--disp);font-size:18px;text-transform:uppercase;
  z-index:120;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;
  max-width:90vw;display:flex;align-items:center;gap:10px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast img{width:34px;height:auto;}
@media(min-width:960px){.toast{bottom:24px;}}

/* ---------- utilidades ---------- */
.center{text-align:center;}
.mt-s{margin-top:14px;}
.mt-m{margin-top:24px;}
.mt-l{margin-top:36px;}
.hidden{display:none!important;}
.nowrap{white-space:nowrap;}

/* ---------- frases rotador estilo Hot Ones ---------- */
.frases-rotador{
  background:var(--rojo);
  border-top:4px solid var(--negro);
  border-bottom:4px solid var(--negro);
  color:var(--crema);
  padding:46px 22px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.frases-rotador::before,
.frases-rotador::after{
  content:'';
  position:absolute;left:0;right:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--crema) 0 14px,transparent 14px 28px);
  opacity:.18;
}
.frases-rotador::before{top:0;}
.frases-rotador::after{bottom:0;}
.fr-wrap{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  max-width:980px;margin:0 auto;
}
.fr-prefijo{
  font-family:var(--accent);font-weight:700;
  font-size:clamp(32px,5.4vw,58px);
  color:var(--beige);
  line-height:1;transform:rotate(-2deg);
}
.fr-stage{
  position:relative;width:100%;
  min-height:clamp(58px,9vw,108px);
  display:flex;align-items:center;justify-content:center;
}
.fr-item{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) translateY(8px);
  font-family:var(--disp);
  font-size:clamp(36px,7vw,86px);
  letter-spacing:.01em;text-transform:uppercase;
  line-height:1;color:var(--crema);
  white-space:nowrap;max-width:96vw;
  opacity:0;pointer-events:none;
  transition:opacity .42s ease, transform .42s ease;
}
.fr-item.is-on{
  opacity:1;transform:translate(-50%,-50%) translateY(0);
}
@media(max-width:520px){
  .fr-item{font-size:clamp(28px,8vw,46px);white-space:normal;text-align:center;}
}

/* ---------- sticky-tag para Premium en sticky CTA ---------- */
.sticky-cta .sticky-tag{
  display:inline-block;
  font-family:var(--disp);
  font-style:normal;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--rojo);
  color:var(--crema);
  padding:2px 7px;
  margin-left:6px;
  border:2px solid var(--negro);
  vertical-align:middle;
}

/* ---------- cierre, link alternativo ---------- */
.cierre-alt{
  margin-top:10px;
  font-family:var(--disp);
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--crema);
  opacity:.82;
}
.cierre-alt a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
.cierre-alt a:hover{opacity:1;color:var(--beige);}

/* =========================================================
   AJUSTE MÓVIL · escala compacta (≤640px)
   ========================================================= */
@media(max-width:640px){
  /* marquesina */
  .marquee{padding:5px 0;}
  .marquee .track{font-size:12px;}

  /* nav compacto */
  .nav-in{padding:9px 14px;gap:8px;}
  .nav-logo img{height:54px;}
  .cart-btn{font-size:13px;padding:8px 10px;gap:5px;box-shadow:3px 3px 0 var(--negro);}
  .cart-count{min-width:18px;height:18px;font-size:11px;}
  .burger span{width:22px;}

  /* hero */
  .hero{padding:0;}
  .hero-col-left{gap:16px;}
  .hero-logo-mark{gap:10px;}
  .hero-logo-big{max-width:270px;}
  .hero-en-caja{font-size:33px;padding:3px 15px 6px;}
  .hero .btns{gap:10px;margin-top:12px;}

  /* hero split móvil */
  .hero-split{flex-direction:column;}
  .hero-split-left{
    width:100%;
    background:url('assets/fondo-hero.jpg') center/cover no-repeat;
    align-items:center;justify-content:flex-start;
    padding:28px 16px 24px;
    gap:16px;
    position:static;
  }
  .hero-only-mobile{display:none;}
  .hero-caja-wrap{
    display:flex!important;align-items:center;justify-content:center;
    width:72%;max-width:280px;position:relative;
  }
  .hero-caja-principal{width:100%;height:auto;}
  .hero-sticker{position:absolute;bottom:2%;left:-4%;width:88px;height:88px;}
  .hero-sticker svg{width:100%!important;height:100%!important;}
  .hero-sticker-txt{font-size:12px;line-height:1.1;}
  .hero-split-left .btns{
    position:static;transform:none;
    width:100%;max-width:340px;
    display:flex;flex-direction:column;gap:10px;
  }
  .hero-split-left .btns .btn{width:100%;justify-content:center;font-size:16px;padding:13px 16px;}
  .hero-split-left > a[href*="taqueria"]{
    position:static;transform:none;
    font-size:.82rem;margin-top:2px;
  }
  .hero-split-right{
    width:100%;background:var(--rojo);
    padding:20px 16px 24px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  .boc-ruleta{display:none!important;}
  .hero-art img.run{display:none!important;}
  .ruleta-cta{padding:9px 12px;gap:8px;margin-top:0;width:74%;max-width:260px;align-self:center;}
  .ruleta-cta::before{font-size:9px;padding:1px 6px;top:-10px;right:-8px;}
  .ruleta-cta .ic-ruleta{width:30px;height:30px;flex-shrink:0;}
  .ruleta-cta .ic-ruleta svg{width:18px;height:18px;}
  .ruleta-cta .r1{font-size:15px;}
  .ruleta-cta .r2{font-size:12px;margin-top:1px;}

  /* botones */
  .btn{font-size:15px;padding:11px 15px;box-shadow:4px 4px 0 var(--negro);}
  .btn-lg{font-size:18px;padding:13px 20px;}

  /* secciones */
  .pad{padding:34px 0;}
  .pad-sm{padding:24px 0;}
  .kicker{font-size:21px;margin-bottom:5px;}
  h2.big{font-size:clamp(28px,8.5vw,38px);}
  .sub2{font-size:14px;margin-bottom:20px;}

  /* badges */
  .badges div{padding:12px 9px;font-size:12.5px;gap:8px;}
  .badges .ic{width:30px;height:30px;}

  /* cajas */
  .caja h3{font-size:30px;}
  .caja .precio{font-size:38px;}

  /* sticky CTA */
  .sticky-cta{padding:7px 11px;}
  .sticky-cta span{font-size:15px;}
  .sticky-cta .btn{font-size:14px;padding:8px 12px;}
  .sticky-cta .sticky-tag{font-size:10px;padding:2px 5px;}

  /* cierre */
  .cierre{padding:44px 0;}
  .cierre h2{font-size:clamp(34px,11vw,56px);}
}

/* =========================================================
   AVISO "PRONTO" · tienda en pruebas, pre-lanzamiento.
   Banner fino arriba del todo; no tapa nada, la web sigue
   navegable y se va al hacer scroll.
   ========================================================= */
.aviso-pronto{
  display:flex;align-items:center;justify-content:center;
  gap:.55rem;flex-wrap:wrap;text-align:center;
  background:var(--rojo);color:var(--crema);
  padding:9px 16px;border-bottom:3px solid var(--negro);
  font-family:var(--body);font-size:.84rem;font-weight:700;
  line-height:1.3;letter-spacing:.01em;
}
.aviso-pronto .ap-tag{
  font-family:var(--disp);background:var(--crema);color:var(--negro);
  padding:1px 11px;border-radius:2px;letter-spacing:.07em;
  font-size:.95rem;line-height:1.25;white-space:nowrap;
}
.aviso-pronto .ap-txt{opacity:.96;}
@media(max-width:560px){
  .aviso-pronto{font-size:.76rem;padding:8px 12px;gap:.45rem;}
  .aviso-pronto .ap-tag{font-size:.84rem;padding:1px 9px;}
}