/* =====================================================================
   Super Carnes — carnicería boutique
   Materiales: carbón, madera, piedra, latón y marfil. Bordó de acento.
   Una sola fuente de luz: arriba. Todas las sombras caen hacia abajo.
   ===================================================================== */

/* ---------------------------------------------------------------- base */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
/* Una sola mesada de piedra debajo de toda la página: la misma piedra de la foto de la tabla
   (scripts/fondo-piedra.py), repetible sin costura y a la misma escala y tono que la foto. Así las
   fotos y las secciones parecen apoyadas sobre lo mismo, no pegadas sobre un negro liso.
   Medida: el texto más tenue (--cream-mute) da 4,5:1 o más sobre el 99,9% de la textura. */
body{
  background:var(--stone-base) url(../../../assets/piedra.jpg) center top/600px auto repeat;
  color:var(--cream);
  font:400 1rem/1.6 var(--font-body);
  font-feature-settings:"kern","liga";
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
svg{display:block}
a{color:inherit;text-decoration:none;text-underline-offset:.22em;text-decoration-thickness:1px}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}

/* grano fino sobre toda la página: rompe el plano digital */
body::after{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.5;
  background:var(--grain);
}
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .93 0 0 0 0 .82 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------- tipografía */
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.025em;line-height:1.04;text-wrap:balance}
p{text-wrap:pretty}

.eyebrow{
  display:flex;align-items:baseline;gap:12px;
  color:var(--brass);font-family:var(--font-body);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.4;
}
.eyebrow::before{content:"";flex:none;width:28px;height:1px;background:currentColor;opacity:.65;transform:translateY(-.3em)}

.sub-head{margin-bottom:clamp(22px,3vw,34px)}
.sub-head h2{margin-top:14px;font-size:clamp(1.7rem,3.4vw,2.5rem)}

.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-64px;z-index:120;padding:12px 20px;border-radius:var(--r-pill);background:var(--cream);color:var(--char);font-weight:700;transition:top var(--t-base) var(--ease-out)}
.skip:focus{top:14px}

::selection{background:var(--bordo-hi);color:var(--cream)}
input,textarea{caret-color:var(--brass)}
html{scrollbar-color:var(--scrollbar) var(--noir);scrollbar-width:thin}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:var(--r-xs)}
.btn:focus-visible,.chip:focus-visible,.cart-btn:focus-visible{border-radius:var(--r-pill)}
.cat:focus-visible,.card:focus-within{border-radius:var(--r-lg)}

/* ------------------------------------------------------------ botones */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 30px;border-radius:var(--r-pill);
  border:1px solid transparent;
  font-weight:500;font-size:1rem;letter-spacing:.012em;cursor:pointer;
  transition:transform var(--t-fast) var(--ease-out),background var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease-out),border-color var(--t-base),color var(--t-base);
}
.btn-sm{min-height:44px;padding:0 22px;font-size:.92rem}
.btn.block{width:100%}
.btn[disabled]{opacity:.42;cursor:not-allowed;transform:none!important;box-shadow:none}

.btn-primary{
  background:var(--grad-bordo);
  border-color:var(--edge-bordo);
  color:var(--cream);
  box-shadow:var(--lift-bordo);
}
@media (hover:hover){
  .btn-primary:hover{background:var(--grad-bordo-hi);border-color:var(--brass-soft);transform:translateY(-2px);box-shadow:var(--lift-bordo-hi)}
}
.btn-primary:active{transform:translateY(0) scale(.985);box-shadow:inset 0 2px 6px rgb(var(--shade) / .4)}

.btn-ghost{
  background:var(--glass);
  border-color:rgb(var(--brass-rgb) / .38);
  box-shadow:var(--glass-lip);
  color:var(--cream);
  backdrop-filter:blur(8px);
}
@media (hover:hover){
  .btn-ghost:hover{background:var(--glass-hover);border-color:var(--brass);transform:translateY(-2px)}
}
.btn-ghost:active{transform:translateY(0) scale(.985)}

/* ------------------------------------------------------------ header */
.site-header{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:22px;
  min-height:var(--header-h);
  padding:0 var(--gutter);
  background:rgb(var(--scrim) / .78);
  backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 1px 0 rgb(var(--brass-rgb) / .14),0 18px 36px -28px rgb(var(--shade) / .95);
  transition:background var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),min-height var(--t-base) var(--ease);
}
.brand{display:flex;align-items:center;gap:13px;min-height:48px;font-family:var(--font-display);font-weight:600;font-size:1.08rem;letter-spacing:-.015em}
/* las páginas legales traen el logo suelto dentro de .brand, sin medallón */
.brand>img{
  flex:none;width:46px;height:46px;padding:2px;border-radius:50%;object-fit:cover;
  background:var(--brass-ring);
  box-shadow:var(--seal-edge),0 5px 14px rgb(var(--shade) / .6);
}
.brand-mark{
  display:grid;place-items:center;flex:none;width:46px;height:46px;padding:2px;border-radius:50%;
  background:var(--brass-ring);
  box-shadow:var(--seal-edge),0 5px 14px rgb(var(--shade) / .6);
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out);
}
.brand-mark img{width:100%;height:100%;border-radius:50%;object-fit:cover}
@media (hover:hover){.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.04);box-shadow:var(--seal-edge),0 8px 22px -4px rgb(var(--brass-rgb) / .45)}}
.brand-name{display:grid;font-family:var(--font-display);font-weight:600;font-size:1.08rem;line-height:1.05;letter-spacing:-.015em}
.brand-name small{font-family:var(--font-body);font-weight:400;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);opacity:.9}

.nav{display:flex;gap:4px;margin-left:auto;color:var(--cream-dim);font-size:.94rem;font-weight:400}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-sm);transition:color var(--t-fast)}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:10px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease-out)}
.nav a:hover{color:var(--cream)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}

.cart-btn{
  position:relative;display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line-field);background:var(--glass);box-shadow:var(--glass-lip);cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast) var(--ease-out);
}
@media (hover:hover){.cart-btn:hover{background:var(--glass-hover);border-color:var(--brass)}}
.cart-btn:active{transform:scale(.93)}
.cart-count{
  position:absolute;top:-3px;right:-3px;min-width:21px;height:21px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--grad-bordo);
  box-shadow:inset 0 1px 0 rgb(var(--sheen) / .22),0 0 0 2px var(--noir),0 3px 8px rgb(var(--shade) / .6);
  font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;display:grid;place-items:center;
}
.cart-count.bump{animation:bump .5s var(--ease-out)}
@keyframes bump{35%{transform:scale(1.42)}70%{transform:scale(.96)}}

/* el header flota sobre la portada mientras no se scrollea */
@media (min-width:861px){
  :root.at-top .site-header{background:transparent;backdrop-filter:none;box-shadow:none;min-height:86px}
}

/* ===================================================================
   PORTADA — la cámara: cortes colgando del riel, luz cálida cenital
   =================================================================== */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;
  display:grid;align-items:end;
  margin-top:calc(var(--header-h) * -1);
  background:
    radial-gradient(62% 44% at 64% -6%,rgb(var(--glow-warm) / .26),transparent 70%),
    radial-gradient(38% 28% at 14% 2%,rgb(var(--glow-warm) / .13),transparent 72%),
    var(--grad-night);
}
.hero-scene{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
/* La foto del mostrador (cortes sobre piedra) es la escena. Se la lleva a la
   paleta de la marca y se encuadra para que los cortes caigan a la derecha,
   fuera de la columna de texto.
   Se dibuja más alta que su marco para que el parallax nunca descubra un borde. */
.rail-photo{
  position:absolute;left:0;right:0;top:-8%;width:100%;height:116%;
  object-fit:cover;object-position:62% 52%;
  /* el sepia saca el frío de la piedra y el hue-rotate devuelve el rojo a la carne */
  filter:brightness(.92) contrast(1.04) saturate(.9) sepia(.14) hue-rotate(-6deg);
}
/* Luz cálida de la carnicería: un foco por arriba a la derecha. */
.hero-grade{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 48% at 68% 0%,rgb(var(--glow-warm) / .17),transparent 70%),
    linear-gradient(180deg,rgb(96 56 26 / .1) 0%,rgb(30 18 10 / .22) 100%);
}
/* apoyo de sombra al pie, para que la escena se funda con la página */
.hero-floor{
  position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgb(32 19 11 / .3) 48%,rgb(var(--scrim) / .9) 100%);
}
/* Velo de lectura: fuerte sobre la columna de texto, limpio sobre los cortes. */
.hero-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(97deg,rgb(var(--scrim) / .93) 0%,rgb(var(--scrim) / .82) 16%,rgb(var(--scrim) / .5) 36%,rgb(var(--scrim) / .14) 56%,transparent 72%),
    linear-gradient(180deg,rgb(var(--scrim) / .72) 0%,rgb(var(--scrim) / .2) 12%,transparent 24%),
    linear-gradient(0deg,rgb(var(--scrim) / .9) 0%,rgb(var(--scrim) / .3) 18%,transparent 40%),
    radial-gradient(92% 84% at 58% 36%,transparent 52%,rgb(var(--shade) / .55) 100%);
}
.hero-inner{
  position:relative;z-index:2;width:100%;max-width:var(--page);margin-inline:auto;
  padding:calc(var(--header-h) + 24px) var(--gutter) clamp(76px,11vh,128px);
}
.hero-text{max-width:min(648px,52%)}

.emblem{
  display:grid;place-items:center;width:clamp(92px,8.6vw,124px);aspect-ratio:1;padding:5px;border-radius:50%;
  background:var(--brass-ring);
  box-shadow:var(--seal-edge),0 22px 48px -18px rgb(var(--shade) / .95),0 0 72px -14px rgb(var(--brass-rgb) / .42);
}
.emblem img{width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:inset 0 0 0 1px rgb(var(--shade) / .5)}

.hero .eyebrow{margin-top:clamp(22px,3vh,32px)}
.hero h1{
  margin-top:.2em;
  font-size:clamp(2.6rem,6.1vw,5.2rem);
  line-height:.95;letter-spacing:-.035em;
  text-shadow:0 2px 3px rgb(var(--shade) / .4),0 10px 48px rgb(var(--shade) / .6);
}
.hero-lead{
  max-width:46ch;margin-top:clamp(18px,2.4vh,26px);
  color:var(--cream-dim);font-size:clamp(1.02rem,1.2vw,1.16rem);line-height:1.65;
  text-shadow:0 1px 14px rgb(var(--shade) / .6);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vh,38px)}
/* el titular se arma letra por letra (lo parte anim.js); sin JS se ve entero */
.hero h1 .w{display:inline-block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;vertical-align:top}
.hero h1 .c{display:inline-block}

.trust{
  display:flex;flex-wrap:wrap;gap:10px 32px;
  margin-top:clamp(28px,4vh,44px);padding-top:22px;
  border-top:1px solid var(--brass-line);
  list-style:none;color:var(--cream-dim);font-size:.92rem;letter-spacing:.012em;
}
.trust li{position:relative;padding-left:18px}
.trust li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 3px rgb(var(--brass-rgb) / .15)}

.cue{
  position:absolute;z-index:2;right:var(--gutter);bottom:30px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--cream-mute);font-size:.62rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
}
.cue-line{display:block;width:1px;height:38px;background:linear-gradient(var(--brass),transparent);transform-origin:top;animation:cue 2.6s var(--ease-in-out) infinite}
@media (max-height:720px){.cue{display:none}}
@keyframes cue{0%{transform:scaleY(.1);opacity:0}30%{opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}


/* ===================================================================
   OFERTAS Y COMBOS — las dos bandas de protagonismo
   =================================================================== */
.deals{max-width:var(--page);margin:0 auto;padding:clamp(64px,9vw,120px) var(--gutter) 0}
.band + .band{margin-top:clamp(56px,8vw,100px)}
.band-head{
  display:grid;gap:14px;align-items:end;
  grid-template-columns:minmax(0,1fr) auto;
  margin-bottom:clamp(24px,3.4vw,38px);
  padding-bottom:22px;
  border-bottom:1px solid var(--brass-line);
}
.band-head .eyebrow{grid-column:1}
.band-head h2{grid-column:1;font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:-.035em}
.band-sub{grid-column:1;max-width:46ch;color:var(--cream-mute);font-size:.98rem}
.band-head .btn{grid-column:2;grid-row:2 / span 2;align-self:end;justify-self:end}

.deals-grid{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
@media (min-width:1000px){
  .deals-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* Con pocos productos la grilla se ajusta sola para no dejar huecos:
     el local puede tener 2, 3 o 20 ofertas y la banda siempre queda llena. */
  .deals-grid:has(> .card:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .deals-grid:has(> .card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===================================================================
   TARJETA DE PRODUCTO — el producto es el protagonista
   =================================================================== */
.card{
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  border-radius:var(--r-lg);
  background:var(--grad-surface);
  border:1px solid var(--line);
  box-shadow:var(--elev-1);
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease);
}
/* filete de luz en el borde superior: sugiere una vitrina iluminada */
.card::before{
  content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgb(var(--sheen) / .1);
  transition:box-shadow var(--t-base) var(--ease);
}
@media (hover:hover){
  .card:hover{transform:translateY(-7px);box-shadow:var(--elev-2);border-color:var(--brass-soft)}
  .card:hover::before{box-shadow:inset 0 1px 0 rgb(var(--sheen) / .2),inset 0 0 0 1px rgb(var(--brass-rgb) / .14)}
}

.media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:
    radial-gradient(90% 80% at 50% 16%,rgb(var(--brass-rgb) / .1),transparent 62%),
    var(--grad-well);
}
.media img{width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--ease),transform .9s var(--ease-out),filter var(--t-base)}
@media (hover:hover){.card:hover .media img{transform:scale(1.055)}}
.media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgb(var(--scrim) / .62) 0%,rgb(var(--scrim) / .12) 34%,transparent 60%);
}
/* marca de agua del logo cuando todavía no hay foto */
.media .ph{
  position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:12px;
  padding:16px;color:var(--cream-mute);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;
}
.media .ph::before{
  content:"";width:min(46%,132px);aspect-ratio:1;border-radius:50%;
  background:url(../../../assets/logo-original.png) center/cover no-repeat;
  opacity:.3;filter:grayscale(.55) sepia(.35) saturate(1.2);
}

.badges{position:absolute;z-index:3;top:12px;right:12px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.badge{
  padding:5px 11px;border-radius:var(--r-pill);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--cream);color:var(--bordo-deep);box-shadow:0 4px 12px rgb(var(--shade) / .5);
}
.badge.warn{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--wood-deep)}
.badge.out{background:rgb(var(--scrim) / .92);color:var(--cream-dim);box-shadow:0 0 0 1px rgb(var(--cream-rgb) / .2)}

/* placa de oferta: metal esmaltado, no etiqueta de papel */
.tag{
  position:absolute;z-index:3;top:12px;left:12px;display:grid;gap:3px;justify-items:center;
  padding:9px 13px 8px;border-radius:var(--r-sm);
  background:var(--grad-bordo);
  border:1px solid var(--edge-bordo);
  box-shadow:inset 0 1px 0 rgb(var(--sheen) / .22),inset 0 -1px 0 rgb(var(--shade) / .3),0 10px 20px -8px rgb(var(--shade) / .85);
  color:var(--cream);text-align:center;
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out);
}
.tag-k{font-family:var(--font-display);font-weight:600;font-size:1.18rem;line-height:1;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.tag small{display:block;font-size:.63rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:rgb(var(--cream-rgb) / .92)}
@media (hover:hover){.card:hover .tag{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgb(var(--sheen) / .3),inset 0 -1px 0 rgb(var(--shade) / .3),0 14px 26px -8px rgb(var(--shade) / .9)}}

.body{display:flex;flex-direction:column;gap:7px;flex:1;padding:18px 18px 20px}
.feat-label{
  color:var(--brass);font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
}
.body h3{font-size:1.26rem;line-height:1.16;letter-spacing:-.015em}
.body p{color:var(--cream-mute);font-size:.9rem;line-height:1.5}

.price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
}
.price strong{
  font-family:var(--font-display);font-weight:600;font-size:1.56rem;letter-spacing:-.025em;color:var(--cream);
  font-variant-numeric:lining-nums tabular-nums;
}
.price s{color:var(--cream-mute);font-size:.92rem;text-decoration-thickness:1px;font-variant-numeric:tabular-nums}
.price small{color:var(--cream-mute);font-size:.8rem;white-space:nowrap}
.save{
  flex-basis:100%;margin-top:4px;color:var(--brass);font-size:.78rem;font-weight:500;letter-spacing:.04em;
}
.card:not(.card--feature) .save{display:none}

.ctl{margin-top:14px}
.add{
  width:100%;min-height:50px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--line-field);background:var(--glass);box-shadow:var(--glass-lip);color:var(--cream);
  font-weight:500;font-size:.98rem;letter-spacing:.015em;
  transition:background var(--t-base) var(--ease),border-color var(--t-fast),transform var(--t-fast) var(--ease-out),box-shadow var(--t-base) var(--ease-out);
}
@media (hover:hover){
  .add:hover:not([disabled]),.card:hover .add:not([disabled]){
    background:var(--grad-bordo);border-color:var(--edge-bordo);
    box-shadow:var(--lift-bordo);
  }
}
.add:focus-visible{background:var(--grad-bordo);border-color:var(--brass)}
.add:active:not([disabled]){transform:scale(.98)}
.add[disabled]{border-color:rgb(var(--cream-rgb) / .1);background:rgb(var(--cream-rgb) / .02);color:var(--cream-mute);cursor:not-allowed}

.qty{
  display:flex;align-items:center;justify-content:space-between;min-height:50px;border-radius:var(--r-sm);
  background:var(--grad-bordo);
  border:1px solid var(--edge-bordo);
  box-shadow:var(--lift-bordo);
  animation:qty-in var(--t-base) var(--ease-out);
}
@keyframes qty-in{from{opacity:0;transform:scale(.96)}}
.qty button{
  width:50px;height:48px;border:0;background:none;color:var(--cream);font-size:1.3rem;font-weight:500;cursor:pointer;
  border-radius:var(--r-sm);transition:background var(--t-fast),transform var(--t-fast) var(--ease-out);
}
@media (hover:hover){.qty button:hover{background:rgb(var(--shade) / .2)}}
.qty button:active{background:rgb(var(--shade) / .3);transform:scale(.9)}
.qty>span{font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* --- tarjeta grande: oferta principal y combo destacado --- */
@media (min-width:1000px){
  .card--feature{grid-column:span 2;flex-direction:row}
  .card--feature .media{flex:0 0 47%;aspect-ratio:auto;min-height:320px;border-radius:var(--r-lg) 0 0 var(--r-lg)}
  .card--feature .body{padding:clamp(22px,2.2vw,32px);gap:10px;justify-content:center}
  .card--feature h3{font-size:clamp(1.6rem,2.2vw,2.1rem)}
  .card--feature p{font-size:.98rem;max-width:40ch}
  .card--feature .price{margin-top:20px}
  .card--feature .price strong{font-size:clamp(2rem,2.8vw,2.6rem)}
  .card--feature .ctl{margin-top:18px}
  .card--feature .add,.card--feature .qty{max-width:280px}
  /* si solo hay dos productos, la destacada vuelve a formato vertical */
  .deals-grid:has(> .card:nth-child(2):last-child) .card--feature{flex-direction:column}
  .deals-grid:has(> .card:nth-child(2):last-child) .card--feature .media{flex:none;aspect-ratio:16/10;min-height:0;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .deals-grid:has(> .card:only-child) .card--feature .media{min-height:300px}
}
/* brillo que sigue al cursor, solo en las tarjetas grandes */
.card--feature::after{
  content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--px,50%) var(--py,50%),rgb(var(--brass-rgb) / .1),transparent 70%);
  transition:opacity var(--t-base) var(--ease);
}
@media (hover:hover){.card--feature:hover::after{opacity:1}}

/* ===================================================================
   CATÁLOGO
   =================================================================== */
.catalog{max-width:var(--page);margin:0 auto;padding:clamp(56px,8vw,104px) var(--gutter) clamp(72px,10vw,120px)}
.catalog-head{
  display:flex;flex-wrap:wrap;gap:20px 28px;align-items:flex-end;justify-content:space-between;
  padding-bottom:24px;position:relative;
}
.catalog-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;
  background:var(--wood-grain) center/600px 100%,var(--wood-base);
  box-shadow:inset 0 1px 0 rgb(var(--sheen) / .22),0 3px 8px -2px rgb(var(--shade) / .7);
}
.catalog-head-text h2{margin-top:14px;font-size:clamp(2rem,4.2vw,3rem)}

.search{position:relative;display:flex;align-items:center;flex:0 1 400px}
.search-icon{position:absolute;left:20px;color:var(--cream-mute);pointer-events:none;transition:color var(--t-fast)}
.search input{
  width:100%;min-height:52px;padding:0 22px 0 50px;border-radius:var(--r-pill);
  border:1px solid var(--line-field);background:var(--glass);box-shadow:var(--glass-lip);color:var(--cream);
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-base) var(--ease-out);
}
.search input::placeholder{color:var(--cream-mute)}
@media (hover:hover){.search input:hover{border-color:var(--line-hover)}}
.search input:focus{outline:none;border-color:var(--brass);background:rgb(var(--cream-rgb) / .06);box-shadow:var(--ring)}
.search:focus-within .search-icon{color:var(--brass)}

/* ===================================================================
   VISTA RÁPIDA — cinta de cortes que desfila sola
   Sin JS es un carrusel que se arrastra con el dedo o el teclado.
   Con JS (y sin "reducir movimiento") se duplica la cinta y desfila sola.
   =================================================================== */
.reel{margin-top:clamp(32px,4.5vw,52px)}
/* solo el control de pausa: el título iría pegado al de "Nuestros cortes" y sobraba */
.reel-head{display:flex;justify-content:flex-end}

.reel-toggle{
  /* el margen va en el botón y no en el contenedor: sin JS el botón no existe
     y la cinta no queda con un hueco arriba */
  margin-bottom:14px;
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;flex:none;
  border-radius:var(--r-pill);border:1px solid var(--brass-soft);
  background:var(--glass);box-shadow:var(--glass-lip);color:var(--cream-dim);
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-out);
}
@media (hover:hover){.reel-toggle:hover{background:var(--glass-hover);border-color:var(--brass);color:var(--cream)}}
.reel-toggle:active{transform:scale(.96)}
.reel-toggle .reel-ico-play{display:none}
.reel-toggle[aria-pressed=true] .reel-ico-pause{display:none}
.reel-toggle[aria-pressed=true] .reel-ico-play{display:block}

/* el viewport sangra hasta los bordes y se desvanece a los costados */
.reel-viewport{
  margin-inline:calc(var(--gutter) * -1);
  padding:4px var(--gutter) 10px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.reel-viewport::-webkit-scrollbar{display:none}
.reel-viewport:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:var(--r)}

/* align-items:start evita que las tarjetas se estiren a la más alta:
   si no, una etiqueta de dos líneas agranda la foto de las vecinas. */
.reel-track{display:flex;align-items:start;gap:clamp(12px,1.4vw,18px);list-style:none;margin:0;padding:0;width:max-content}

.reel-item{
  flex:0 0 clamp(146px,15vw,200px);scroll-snap-align:start;
  display:grid;gap:10px;align-content:start;
}
/* height:auto neutraliza el atributo height del HTML (que varía según la plancha
   de origen); sin esto el aspect-ratio se ignora y las tarjetas quedan desparejas. */
.reel-item img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r);border:1px solid var(--line);
  box-shadow:var(--elev-1);
  transition:opacity .7s var(--ease),transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),border-color var(--t-base);
}
/* altura fija para la etiqueta: con una o dos líneas, todas las tarjetas miden igual */
.reel-item span{
  display:flex;align-items:center;justify-content:center;min-height:2.8em;
  color:var(--cream-dim);font-size:.76rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  text-align:center;line-height:1.35;transition:color var(--t-fast);
}
@media (hover:hover){
  .reel-item:hover img{transform:translateY(-4px) scale(1.015);box-shadow:var(--elev-2);border-color:var(--brass-soft)}
  .reel-item:hover span{color:var(--cream)}
}

/* --- modo automático: lo enciende anim.js tras duplicar la cinta --- */
.reel--auto .reel-viewport{overflow-x:hidden;scroll-snap-type:none}
.reel--auto .reel-track{animation:reel-scroll var(--reel-dur,120s) linear infinite}
@keyframes reel-scroll{to{transform:translateX(calc(var(--reel-half,50%) * -1))}}
/* se frena al pasar el mouse, al enfocar con teclado o con el botón */
@media (hover:hover){.reel--auto .reel-viewport:hover .reel-track{animation-play-state:paused}}
.reel--auto .reel-viewport:focus-visible .reel-track,
.reel--auto.is-paused .reel-track{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .reel--auto .reel-viewport{overflow-x:auto;scroll-snap-type:x proximity}
  .reel--auto .reel-track{animation:none}
}

/* ---- La misma cinta, dentro de la barra superior -----------------------------------------
   Lo pidió el cliente: el carrusel entre el logo y los botones de la derecha.
   Solo de 861px para arriba. Más abajo la navegación ya se oculta (ver el bloque de 860px) y
   en la barra no entra nada más que el logo y el carrito, así que en celular sigue valiendo el
   carrusel de la sección, donde está hoy. */
.reel-bar{display:none}

@media (min-width:861px){
  .reel-bar{
    display:flex;align-items:center;gap:10px;
    flex:1 1 0;min-width:0;max-width:46vw;margin-top:0;
  }
  /* El viewport de la sección se sale de los márgenes a propósito; acá adentro no. */
  .reel-bar .reel-viewport{
    flex:1 1 auto;min-width:0;
    margin-inline:0;padding:0;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  }
  .reel-bar .reel-track{gap:8px;align-items:center}
  .reel-bar .reel-item{flex:0 0 auto;gap:0}
  /* Fotos chicas y sin sombra: tienen que leerse como una cinta, no como tarjetas. */
  .reel-bar .reel-item img{
    width:58px;height:42px;aspect-ratio:auto;
    border-radius:var(--r-sm);box-shadow:none;transition:none;
  }
  /* Sin el salto del hover: adentro de una barra de 72px con overflow oculto, se corta. */
  .reel-bar .reel-item:hover img{transform:none;box-shadow:none;border-color:rgb(var(--cream-rgb) / .08)}
  .reel-bar-toggle{flex:0 0 auto;min-height:32px;padding:0 10px}

  /* Con la cinta arriba, el carrusel de abajo sería el mismo contenido dos veces en la misma
     pantalla. La clase la pone anim.js recién cuando la barra quedó armada: si el JS no corre,
     abajo sigue estando, que es la única copia que no depende de nada. */
  .reel-en-barra #reel{display:none}
}

.featured{margin-top:clamp(42px,6vw,72px)}
.sections{margin-top:clamp(48px,7vw,84px)}
.rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(14px,1.6vw,22px)}
@media (min-width:761px){.rail .card:nth-child(n+5){display:none}}

/* --- secciones (categorías): vitrinas --- */
.cats{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  grid-auto-rows:clamp(168px,17vw,224px);grid-auto-flow:dense;gap:clamp(14px,1.6vw,22px);
}
.cat{
  position:relative;display:block;overflow:hidden;padding:0;cursor:pointer;text-align:left;
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--grad-well);
  color:var(--cream);box-shadow:var(--elev-1);
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),border-color var(--t-base);
}
.cats .cat.hot{grid-column:span 2;border-color:rgb(var(--brass-rgb) / .3)}
.cat-media{position:absolute;inset:0}
.cat-media img{width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--ease),transform 1s var(--ease-out)}
.cat.noimg .cat-media::before{
  content:"";position:absolute;left:50%;top:14%;width:min(42%,148px);aspect-ratio:1;translate:-50% 0;border-radius:50%;
  background:url(../../../assets/logo-original.png) center/cover no-repeat;opacity:.17;
  filter:grayscale(.35) sepia(.5) saturate(1.3);transition:transform 1s var(--ease-out)
}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(var(--scrim) / .94) 0%,rgb(var(--scrim) / .5) 36%,transparent 66%)}
.cat::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgb(var(--sheen) / .1),inset 0 0 0 1px rgb(var(--shade) / .22)}
.cat-info{position:absolute;z-index:1;left:22px;right:68px;bottom:20px;display:grid;gap:2px}
.cat-info strong{font-family:var(--font-display);font-weight:600;font-size:1.5rem;line-height:1.08;letter-spacing:-.02em;text-shadow:0 2px 20px rgb(var(--shade) / .7)}
.cat-info small{color:var(--cream-dim);font-size:.82rem;letter-spacing:.03em}
.cat.hot .cat-info strong{font-size:clamp(1.6rem,3.2vw,2.3rem)}
.cat-arrow{
  position:absolute;z-index:1;right:18px;bottom:18px;box-sizing:content-box;width:20px;height:20px;padding:10px;border-radius:50%;
  background:rgb(var(--cream-rgb) / .1);border:1px solid rgb(var(--cream-rgb) / .2);backdrop-filter:blur(6px);
  transition:transform var(--t-base) var(--ease-out),background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
@media (hover:hover){
  .cat:hover{transform:translateY(-6px);box-shadow:var(--elev-2);border-color:var(--brass-soft)}
  .cat:hover .cat-media img,.cat.noimg:hover .cat-media::before{transform:scale(1.07)}
  .cat:hover .cat-arrow{transform:translateX(4px);background:var(--brass);color:var(--wood-deep);border-color:var(--brass-hi)}
}
.cat:active{transform:translateY(-2px) scale(.99)}

/* --- vista de productos --- */
.back{
  display:inline-flex;align-items:center;gap:9px;min-height:46px;margin:22px 0 10px;padding:0 6px;
  border:0;background:none;color:var(--cream-mute);cursor:pointer;font-weight:500;font-size:.94rem;
  transition:color var(--t-fast);
}
.back:hover{color:var(--cream)}
.back svg{transition:transform var(--t-base) var(--ease-out)}
.back:hover svg{transform:translateX(-4px)}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 26px}
.chip{
  flex:none;min-height:44px;padding:0 20px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--line-field);background:var(--glass);box-shadow:var(--glass-lip);color:var(--cream-dim);
  font-size:.94rem;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-out);
}
@media (hover:hover){.chip:hover{background:var(--glass-hover);border-color:var(--brass-soft);color:var(--cream)}}
.chip:active{transform:scale(.96)}
.chip[aria-pressed=true]{
  background:var(--grad-bordo);border-color:var(--edge-bordo);color:var(--cream);font-weight:500;
  box-shadow:var(--lift-bordo);
}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:clamp(14px,1.6vw,22px)}
.empty{grid-column:1/-1;padding:56px 0;text-align:center;color:var(--cream-mute)}

/* --- estados de carga: esqueletos con la forma real --- */
.skel{position:relative;overflow:hidden;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--panel),var(--stone));border:1px solid rgb(var(--cream-rgb) / .05)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgb(var(--cream-rgb) / .05),transparent);animation:shimmer 1.9s var(--ease-in-out) infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skel-cat{min-height:clamp(168px,17vw,224px)}
.skel-card{min-height:380px}
.grid .skel-card,.rail .skel-card{width:100%}

/* ===================================================================
   DIVISOR DE MADERA CON EL SELLO
   =================================================================== */
.plank{
  position:relative;height:clamp(52px,6vw,70px);margin:clamp(28px,5vw,56px) 0;display:grid;place-items:center;
  background:
    linear-gradient(180deg,rgb(var(--sheen) / .09),transparent 22%,transparent 74%,rgb(var(--shade) / .6)),
    var(--wood-grain) center/640px 100%,var(--wood-dark);
  box-shadow:inset 0 1px 0 rgb(var(--sheen) / .14),inset 0 -1px 0 rgb(var(--shade) / .65),0 24px 40px -26px rgb(var(--shade) / .95);
}
/* En las uniones con una foto o con el pie va pegado, sin aire: es el marco entre las dos piezas
   y evita el corte seco de una foto contra el fondo. */
.plank.plank--junta{margin:0}
/* Sin sello (junto a la tabla, que ya trae el suyo, y junto al logo del pie): un listón más fino. */
.plank:empty,.plank.plank--junta:empty{height:clamp(20px,2.2vw,28px)}
/* Sin ofertas ni combos, el divisor pegado a la tabla ya hace de separador del catálogo. */
.deals[hidden]+.plank{display:none}
.plank::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--brass-soft) 22%,var(--brass-soft) 78%,transparent)}
.plank img{
  position:relative;z-index:1;width:clamp(62px,7vw,84px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;padding:3px;
  background:var(--brass-ring);
  box-shadow:var(--seal-edge),0 12px 24px -8px rgb(var(--shade) / .85);
}

/* ===================================================================
   POR QUÉ ELEGIRNOS / CIERRE / PIE
   =================================================================== */
.why{max-width:var(--page);margin:0 auto;padding:clamp(48px,7vw,90px) var(--gutter)}
.why h2{font-size:clamp(2rem,4.2vw,3rem);max-width:16ch}
.why dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));gap:34px clamp(26px,4vw,56px)}
.why div{position:relative;padding-top:22px;border-top:1px solid rgb(var(--cream-rgb) / .1)}
.why div::before{content:"";position:absolute;left:0;top:-1px;width:46px;height:2px;background:linear-gradient(90deg,var(--bordo-hi),var(--brass));transition:width var(--t-slow) var(--ease-out)}
@media (hover:hover){.why div:hover::before{width:92px}}
.why dt{font-family:var(--font-display);font-weight:600;font-size:1.26rem;letter-spacing:-.015em}
.why dd{margin:9px 0 0;color:var(--cream-mute);line-height:1.6;max-width:32ch}

/* Invitación. Era el cierre de la página (.final) y el cliente la pidió arriba de las ofertas.
   Al dejar de ser el remate y pasar a ser lo primero después de la portada, se le bajó el aire
   vertical: con el padding de antes empujaba las ofertas media pantalla más abajo, que es justo
   lo contrario de para qué se subió. */
/* La tabla: una foto, con el cuchillo y el tenedor, y el sello de Super Carnes quemado en la
   madera (lo genera scripts/tabla-con-sello.py, que deja dos recortes: uno ancho para la
   computadora y uno más cerrado para el celular).
   El título y el botón NO van encima del sello: la madera de la foto es clara y el sello es
   oscuro, así que ni el marfil ni un texto oscuro se leían sobre él. Van debajo de la tabla,
   sobre la piedra oscura de la foto: primero se ve la marca, después la pregunta y el botón.
   El fondo de la sección es el color de esa piedra, así la foto no deja bordes. */
.invite{
  position:relative;overflow:hidden;
  box-shadow:0 24px 50px -26px rgb(var(--shade) / .85);
  /* las medidas del texto van en cqw: siguen al ancho de la tabla, no al de la pantalla */
  container-type:inline-size;
}
.invite-foto,.invite-foto img{display:block;width:100%;height:auto}
/* La foto queda quieta al scrollear (pedido del 31/10): sin zoom ni aparición. */
.invite-foto{overflow:hidden}
/* La madera clara encandilaba al llegar desde la portada oscura: se baja un 20% (y apenas la
   saturación). El fondo de toda la página es esta misma piedra con el mismo ajuste (piedra.jpg). */
.invite-foto img{transition:opacity .9s var(--ease);transform-origin:44% 45%;filter:brightness(.8) saturate(.92)}
/* La franja de piedra que queda bajo la tabla, en % del recorte ancho: la tabla termina al
   71,3% del alto y su parte libre (sin cubiertos) va del 23,2% al 65,6% del ancho. Si cambian
   los recortes, el script imprime los números nuevos. */
.invite-inner{
  position:absolute;left:23.2%;right:34.4%;top:71.3%;bottom:0;z-index:1;
  display:grid;place-content:center;justify-items:center;gap:clamp(10px,1.7cqw,22px);text-align:center;
}
/* el botón marfil sobre la piedra oscura: máxima jerarquía */
.invite .btn-primary{background:var(--cream);color:var(--bordo-deep);border-color:rgb(var(--shade) / .18);box-shadow:var(--lift-cream)}
@media (hover:hover){.invite .btn-primary:hover{background:#fff;border-color:rgb(var(--shade) / .25);box-shadow:0 1px 0 #fff inset,0 24px 40px -14px rgb(var(--shade) / .85)}}
.invite :focus-visible{outline-color:var(--cream)}
.invite h2{font-size:clamp(1.35rem,3.2cqw,2.8rem);line-height:1.08;letter-spacing:-.03em;white-space:nowrap}
/* Hasta 900 px el texto va abajo, fuera de la foto: más angosto, la franja de piedra bajo la
   tabla no alcanza para el título y el botón (en 768 px el botón se salía). En el celular,
   además, la foto es el recorte más cerrado (el <source> de index.html, hasta 700 px). */
@media (max-width:900px){
  /* La foto se funde abajo en la piedra del fondo (que es la misma): sin costura donde termina. */
  .invite-foto{position:relative}
  .invite-foto img{-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
  .invite-inner{position:static;padding:clamp(18px,5cqw,28px) var(--gutter) clamp(28px,8cqw,40px);gap:18px}
  .invite h2{font-size:clamp(1.7rem,8.5cqw,2.4rem);white-space:normal;max-width:14ch}
}

.footer{
  position:relative;padding:clamp(48px,6vw,80px) var(--gutter);text-align:center;
  color:var(--cream-dim);line-height:1.65;
  background:linear-gradient(180deg,transparent,rgb(var(--scrim) / .6));
}
.footer-logo{
  display:block;width:clamp(80px,9vw,104px);height:auto;aspect-ratio:1;margin:0 auto 16px;border-radius:50%;object-fit:cover;padding:4px;
  background:var(--brass-ring);
  box-shadow:var(--seal-edge),0 18px 34px -12px rgb(var(--shade) / .9);
}
.footer p{margin-top:7px}
.footer>p:first-of-type{font-family:var(--font-display);font-weight:600;font-size:1.35rem;letter-spacing:-.015em;color:var(--cream)}
.footer a{display:inline-block;min-height:24px;text-decoration:underline;text-decoration-color:rgb(var(--cream-rgb) / .28);transition:color var(--t-fast),text-decoration-color var(--t-fast)}
.footer a:hover{color:var(--cream);text-decoration-color:var(--brass)}
.btn-arrep{
  display:inline-flex;align-items:center;min-height:54px;margin:26px 0 8px;padding:0 32px;border-radius:var(--r-pill);
  background:var(--cream);color:var(--bordo-deep)!important;font-weight:700;font-size:1.04rem;
  text-decoration:none!important;box-shadow:var(--lift-cream);
  transition:transform var(--t-fast) var(--ease-out),background var(--t-fast);
}
@media (hover:hover){.btn-arrep:hover{background:#fff;transform:translateY(-2px)}}
.btn-arrep:active{transform:scale(.98)}
.legal-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:20px}
.consumer{margin-top:16px}
.ai-note{margin-top:14px;font-size:.82rem;color:var(--cream-mute)}
.biz{margin-top:14px;font-size:.84rem;color:var(--cream-mute)}

/* ===================================================================
   CARRITO — papel de carnicería sobre fondo oscuro
   =================================================================== */
.scrim{position:fixed;inset:0;z-index:80;background:rgb(var(--shade) / .66);backdrop-filter:blur(4px);opacity:0;transition:opacity var(--t-base) var(--ease)}
.scrim.on{opacity:1}
.drawer{
  position:fixed;z-index:90;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:min(440px,100%);
  background:#F3EADA;color:#2A211A;
  box-shadow:-40px 0 90px -30px rgb(var(--shade) / .85);
  transform:translateX(104%);transition:transform var(--t-base) var(--ease-out);
}
.drawer.open{transform:none}
/* borde troquelado, como el papel arrancado del rollo */
.drawer::before{
  content:"";position:absolute;left:-9px;top:0;bottom:0;width:18px;
  background:radial-gradient(circle at 9px 11px,#F3EADA 7px,transparent 7.5px) 0 0/18px 22px repeat-y;
  filter:drop-shadow(-2px 0 4px rgb(var(--shade) / .3));
}
.drawer header,.drawer>footer{padding:22px 26px}
.drawer header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #CFBFA4}
.drawer h2{font-size:1.5rem;color:#241B14}
.close{width:46px;height:46px;border:0;background:none;font-size:2rem;line-height:1;cursor:pointer;color:#5A4A3A;border-radius:50%;transition:background var(--t-fast),transform var(--t-fast) var(--ease-out)}
.close:hover{background:rgb(42 33 26 / .07)}
.close:active{transform:scale(.9)}
.lines{flex:1;overflow:auto;padding:10px 26px;scrollbar-color:#C3B199 transparent;scrollbar-width:thin}
.line{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:16px 0;border-bottom:1px solid #DDCFB8}
.line b{font-weight:700;color:#241B14}
.line small{color:#6B5B49;font-size:.86rem}
.line.new{animation:rise var(--t-base) var(--ease-out)}
.line.gone{animation:gone .26s var(--ease) forwards}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes gone{to{opacity:0;transform:translateX(44px)}}
.step{display:flex;align-items:center;gap:8px;margin-top:8px}
.step button{
  width:38px;height:38px;border-radius:50%;border:1px solid #A8947A;background:none;cursor:pointer;color:#3A2E24;font-size:1.1rem;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast) var(--ease-out);
}
.step button:hover{background:rgb(var(--bordo-rgb) / .08);border-color:var(--bordo)}
.step button:active{transform:scale(.9)}
.step span{min-width:60px;text-align:center;font-variant-numeric:tabular-nums;font-weight:500}
.line .rm{grid-column:2;grid-row:2;align-self:end;border:0;background:none;color:var(--bordo);cursor:pointer;text-decoration:underline;font-size:.84rem;min-height:36px;padding:0;transition:color var(--t-fast)}
.line .rm:hover{color:var(--bordo-deep)}
.drawer>footer{border-top:1px solid #CFBFA4;background:linear-gradient(180deg,rgb(var(--cream-rgb) / .5),transparent)}
.sums div{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-variant-numeric:tabular-nums}
.sums dd{margin:0}
.sums .total{margin:10px 0 18px;padding-top:10px;border-top:1px solid #CFBFA4;font-family:var(--font-display);font-weight:600;font-size:1.4rem;color:#241B14}
.drawer>footer small{display:block;margin-top:10px;color:#6B5B49;font-size:.8rem}
.drawer>footer .deposit-hint{color:#7A4A14;font-weight:500}
.drawer .btn-primary{color:var(--cream)}
.lines .empty{display:grid;justify-items:center;gap:20px;padding:60px 0;color:#6B5B49}
.lines .empty .btn{color:var(--cream)}
.drawer :focus-visible{outline-color:var(--bordo)}

/* --- aviso flotante --- */
.toast{
  position:fixed;z-index:110;left:50%;bottom:26px;max-width:calc(100% - 32px);
  padding:13px 22px;border-radius:var(--r-pill);
  background:var(--cream);color:var(--char);font-weight:500;text-align:center;
  box-shadow:var(--lift-cream);
  opacity:0;transform:translate(-50%,24px) scale(.96);pointer-events:none;
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);
}
.toast.on{opacity:1;transform:translate(-50%,0) scale(1)}

/* --- bolita que vuela al carrito --- */
.fly{position:fixed;left:0;top:0;z-index:115;width:16px;height:16px;border-radius:50%;background:var(--bordo-hi);box-shadow:0 0 14px rgb(var(--bordo-rgb) / .7);pointer-events:none}

/* --- barra fija del pedido (celular) --- */
.cartbar{display:none}

/* ===================================================================
   PEDIDO FINAL (diálogo)
   =================================================================== */
dialog{margin:auto}
/* El detalle del combo usa la misma caja que el checkout: no hay motivo para tener dos. */
.checkout,.combo{
  width:min(580px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;
  padding:clamp(22px,4vw,36px);border-radius:var(--r-xl);
  border:1px solid rgb(var(--cream-rgb) / .1);
  background:var(--grad-surface);
  color:var(--cream);
  box-shadow:var(--elev-3);
  scrollbar-color:var(--scrollbar) transparent;scrollbar-width:thin;
}
.checkout::backdrop,.combo::backdrop{background:rgb(var(--shade) / .74);backdrop-filter:blur(6px)}
.checkout h2{font-size:1.7rem;margin-bottom:18px}
.checkout label{display:flex;flex-direction:column;gap:7px;font-size:.88rem;color:var(--cream-dim)}
.checkout input:not([type=radio]):not([type=checkbox]),.checkout textarea{
  min-height:50px;padding:12px 15px;border-radius:var(--r-sm);
  border:1px solid rgb(var(--cream-rgb) / .18);background:rgb(var(--shade) / .3);color:var(--cream);
  transition:border-color var(--t-fast),box-shadow var(--t-base) var(--ease-out),background var(--t-fast);
}
.checkout input:not([type=radio]):not([type=checkbox]):hover,.checkout textarea:hover{border-color:rgb(var(--cream-rgb) / .34)}
.checkout input:not([type=radio]):not([type=checkbox]):focus,.checkout textarea:focus{outline:none;border-color:var(--brass);box-shadow:var(--ring)}
.checkout input:user-invalid,.checkout textarea:user-invalid{border-color:var(--err);box-shadow:0 0 0 4px rgb(224 138 138 / .12)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.wide-field{grid-column:1/-1}
.fields .help{grid-column:1/-1;margin:-6px 0 0}
.help{display:block;margin:7px 0 12px;color:var(--cream-mute);font-size:.8rem}
.req-note{margin:-6px 0 14px}
.delivery{display:flex;flex-wrap:wrap;gap:10px 26px;margin:8px 0 16px;padding:0;border:0}
.delivery legend{margin-bottom:10px;font-weight:700}
.delivery label{flex-direction:row;align-items:center;gap:10px;min-height:46px;color:var(--cream);cursor:pointer}
/* Envío fuera de la franja horaria: se ve apagado y no se puede elegir, pero se sigue leyendo.
   Esconderlo dejaría al cliente sin saber que el envío existe. El aviso de al lado dice hasta
   qué hora se toman. */
.delivery label.is-off{color:var(--cream-dim);opacity:.55;cursor:not-allowed}
.delivery #deliveryClosed{flex:1 0 100%;margin:0}
input[type=checkbox],input[type=radio]{accent-color:var(--bordo-hi)}
.ship-cost{color:var(--cream-mute);margin-left:4px}
.checkout .note{margin:14px 0 0;color:var(--cream-mute);font-size:.86rem}
.err{min-height:1.4em;margin-top:10px;color:var(--err);font-weight:500}
.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}

.co-sum{margin-top:20px;padding:18px 20px;border-radius:var(--r);background:rgb(var(--shade) / .28);border:1px solid rgb(var(--cream-rgb) / .09)}
.co-sum h3{font-family:var(--font-body);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:12px}
.co-items{list-style:none;padding:0;margin:0 0 12px;border-bottom:1px solid rgb(var(--cream-rgb) / .14)}
.co-items li{display:flex;justify-content:space-between;gap:12px;padding:5px 0 9px;font-size:.92rem}
.co-items small{color:var(--cream-mute)}
.co-sum .sums .total{margin:8px 0 0;padding-top:10px;border-top:1px solid rgb(var(--cream-rgb) / .14);font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:var(--cream)}
.co-sum .deposit-row{margin-top:8px;padding-top:9px;border-top:1px dashed rgb(var(--brass-rgb) / .4);color:var(--brass-hi);font-weight:700}

/* Fuera del horario de pedidos: el formulario se ve, pero no se puede confirmar. */
.closed-note{margin:0 0 16px;padding:14px 16px;border-radius:var(--r);background:rgb(var(--bordo-rgb) / .14);border:1px solid rgb(var(--bordo-rgb) / .5);color:var(--cream);font-weight:500;line-height:1.5}
.deposit{margin:16px 0 4px;padding:15px 17px;border-radius:var(--r);background:rgb(var(--brass-rgb) / .08);border:1px solid rgb(var(--brass-rgb) / .34);color:var(--cream)}
.deposit strong{display:block;font-size:.98rem;color:var(--brass-hi)}
.deposit p{margin-top:7px;color:var(--cream-dim);font-size:.87rem;line-height:1.55}

.consent{flex-direction:row!important;align-items:flex-start;gap:12px!important;margin:18px 0 8px;color:var(--cream)!important;font-size:.89rem!important;line-height:1.5}
.consent input{flex:none;width:22px;height:22px;margin-top:2px}
.consent a,.legend a{text-decoration:underline}
.legend{margin-top:12px;color:var(--cream-mute);font-size:.73rem;line-height:1.5}
#coDone p{margin-bottom:22px;color:var(--cream-dim)}
.order-no{margin:-4px 0 16px!important;font-size:1.05rem;color:var(--cream)!important}
.order-no strong{font-family:var(--font-display);font-weight:600;font-size:2.2rem;margin-left:8px;color:var(--brass-hi);font-variant-numeric:lining-nums tabular-nums}

@media (prefers-reduced-motion:no-preference){
  .checkout[open]{animation:dlg-in .42s var(--ease-out)}
  .checkout[open]::backdrop{animation:fade-in .42s var(--ease-out)}
}
@keyframes dlg-in{from{opacity:0;transform:translateY(16px) scale(.985)}}
@keyframes fade-in{from{opacity:0}}

/* ===================================================================
   TRANSICIONES DE VISTA
   =================================================================== */
.out{animation:fadeOut var(--t-base) var(--ease) forwards}
@keyframes fadeOut{to{opacity:0;transform:translateY(-14px)}}
.prodview:not([hidden]){animation:rise var(--t-base) var(--ease-out) backwards}
/* La vista que llega al volver a las secciones (main.js, show): sube suave, como la de productos. */
.entra{animation:rise var(--t-base) var(--ease-out) backwards}
.grid .card{animation:rise .55s var(--ease-out) backwards;animation-delay:calc(min(var(--i),11) * 55ms)}
.cat{animation:rise .6s var(--ease-out) backwards;animation-delay:calc(min(var(--i),10) * 70ms)}
/* Con GSAP activo, la PRIMERA entrada de las secciones la maneja anim.js (catsReveal). Las
   tarjetas del catálogo (#grid) no las anima anim.js, así que conservan su entrada: antes
   también se apagaba y los productos de una sección aparecían de golpe. */
.anim .cat{animation:none}
.anim .entra .cat{animation:rise .6s var(--ease-out) backwards;animation-delay:calc(min(var(--i),10) * 60ms)}
/* Fotos: escondidas hasta que terminan de cargar y entonces se funden (anim.js, fotos).
   La portada no: su entrada la hace anim.js con GSAP. */
.img-fade .media img:not(.is-loaded),.img-fade .cat-media img:not(.is-loaded),
.img-fade .reel-item img:not(.is-loaded),.img-fade .invite-foto img:not(.is-loaded){opacity:0}
.anim [data-reveal]{will-change:transform,opacity}

/* ===================================================================
   RESPONSIVE — el celular tiene su propia composición, no una reducción
   =================================================================== */
@media (max-width:1100px){
  .hero-text{max-width:min(600px,62%)}
}

@media (max-width:860px){
  :root{--header-h:64px}
  .nav{display:none}
  .site-header{justify-content:space-between;gap:12px}

  /* portada: escena arriba, texto debajo sobre la piedra del fondo (la de toda la página) */
  .hero{min-height:0;display:block;margin-top:0;background:
    radial-gradient(90% 34% at 60% 0%,rgb(var(--glow-warm) / .2),transparent 72%)}
  /* en el celular la escena es una banda arriba y el encuadre se corre
     a los cortes de la derecha, que son los que tienen más luz */
  .hero-scene{position:relative;inset:auto;height:clamp(265px,42svh,375px);
    -webkit-mask-image:linear-gradient(#000 64%,transparent);mask-image:linear-gradient(#000 64%,transparent)}
  .rail-photo{object-position:50% 50%}
  .hero-floor{height:50%}
  .hero-vignette{background:
    linear-gradient(0deg,rgb(var(--scrim) / .97) 0%,rgb(var(--scrim) / .5) 20%,transparent 54%),
    radial-gradient(92% 86% at 50% 32%,transparent 54%,rgb(var(--shade) / .5) 100%)}
  .hero-inner{padding:0 var(--gutter) clamp(48px,8vw,68px);max-width:none}
  .hero-text{max-width:none;margin-top:-30px;display:grid;justify-items:start}
  .hero h1{font-size:clamp(2.1rem,9vw,3rem)}
  .hero-lead{font-size:1rem;max-width:38ch}
  .hero .eyebrow{font-size:.62rem;letter-spacing:.14em}
  .hero .eyebrow::before{width:22px}
  .hero-cta{width:100%;margin-top:26px}
  .hero-cta .btn{flex:1 1 190px;padding:0 20px;min-height:54px}
  .trust{gap:6px 20px;font-size:.86rem}
  .cue{display:none}

  /* ofertas y combos: carrusel con imán */
  .band-head{grid-template-columns:1fr}
  .band-head .btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:4px}
  .deals-grid{
    display:flex;gap:12px;margin:0 calc(var(--gutter) * -1);
    padding:4px var(--gutter) 10px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter);scrollbar-width:none;
  }
  .deals-grid::-webkit-scrollbar{display:none}
  .deals-grid .card{flex:0 0 76%;scroll-snap-align:start}

  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .body{padding:14px 14px 16px}
  .body h3{font-size:1.04rem}
  .grid .body p,.rail .body p{display:none}
  .price strong{font-size:1.3rem}
  .add,.qty{min-height:46px}
  .qty button{width:46px;height:44px}

  .rail{display:flex;gap:12px;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail .card{flex:0 0 58%;scroll-snap-align:start}

  .cats{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:12px}
  .cat-info{left:14px;right:46px;bottom:13px}
  .cat-info strong{font-size:1.1rem}
  .cat.hot .cat-info strong{font-size:1.3rem}
  .cat-arrow{right:10px;bottom:12px;width:18px;height:18px;padding:7px}
  .skel-cat{min-height:150px}

  .catalog-head{align-items:stretch}
  .search{flex:1 1 100%}
  .chips{flex-wrap:nowrap;margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 8px;overflow-x:auto;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}

  .drawer{width:100%}
  .drawer::before{display:none}

  /* barra fija "Ver mi pedido" */
  .cartbar:not([hidden]){
    position:fixed;z-index:70;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));
    display:flex;align-items:center;gap:12px;min-height:58px;padding:0 22px;border:0;border-radius:var(--r-pill);
    background:var(--grad-bordo);color:var(--cream);font-weight:500;cursor:pointer;
    box-shadow:inset 0 1px 0 rgb(var(--sheen) / .22),inset 0 -1px 0 rgb(var(--shade) / .3),0 18px 36px -12px rgb(var(--shade) / .85);
    animation:rise var(--t-base) var(--ease-out);
  }
  .cartbar:active{transform:scale(.99)}
  .cb-count{opacity:.82;font-size:.9rem}
  .cb-label{margin-left:auto}
  .cartbar strong{padding-left:14px;border-left:1px solid rgb(var(--cream-rgb) / .35);font-variant-numeric:tabular-nums}
  body.has-bar{padding-bottom:88px}
  body.has-bar .toast{bottom:92px}

  .plank{height:clamp(44px,9vw,56px);margin:26px 0}
  .why div::before{width:36px}
}

/* Tablet: la banda de la escena crece para que los cortes se lean grandes */
@media (min-width:561px) and (max-width:860px){
  .hero-scene{height:clamp(330px,46svh,470px)}
  .rail-photo{object-position:56% 50%}
  .hero-text{max-width:640px}
  .grid,.cats{grid-template-columns:repeat(3,1fr)}
  .deals-grid .card{flex:0 0 46%}
  .rail .card{flex:0 0 36%}
}

@media (max-width:560px){
  .fields{grid-template-columns:1fr}
  .actions{flex-direction:column-reverse}
  .actions .btn{width:100%}
  .deals-grid .card{flex:0 0 84%}
  .rail .card{flex:0 0 68%}
}

/* ===================================================================
   ACCESIBILIDAD
   =================================================================== */
#catTitle:focus{outline:none}
#catTitle:focus-visible{outline:2px solid var(--brass)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .cue-line,.skel::after{animation:none!important}
}

/* ===== Detalle del combo =============================================================
   El cliente pidió que al tocar un combo se agrande y se vea qué trae. La tarjeta entera
   abre el diálogo; el botón "Ver qué trae" existe para que también se llegue con teclado
   y para que se note que hay algo más para ver. */
.card-combo{cursor:pointer}
/* El nombre del combo ES el boton, y su ::after se estira sobre toda la tarjeta: el
   recuadro entero abre el detalle y el teclado llega igual, sin anidar un boton adentro
   de otro (envolver la tarjeta en un <button> dejaria "Agregar" adentro, que no es valido). */
.combo-abrir{
  display:inline;margin:0;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;text-align:left;
}
.combo-abrir::after{content:"";position:absolute;inset:0;z-index:3}
.combo-abrir:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
/* El control de cantidad queda POR ENCIMA de ese manto: es la excepcion, tocar
   "Agregar" agrega y no abre el detalle. */
.card-combo .ctl{position:relative;z-index:5}
@media (hover:hover){.card-combo:hover .combo-abrir{color:var(--brass-hi)}}

.combo h2{font-size:clamp(1.55rem,4vw,2.1rem);margin-bottom:6px}
.combo h2:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:4px}
/* El total va arriba y en latón: es el dato que decide la compra. */
.cb-total{
  color:var(--brass);font-weight:700;font-size:.82rem;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:18px;
}
.cb-list{list-style:none;display:grid;margin:0 0 20px;padding:0}
.cb-list li{
  display:flex;align-items:baseline;gap:16px;
  padding:11px 2px;border-bottom:1px solid var(--brass-line);
}
.cb-list li:last-child{border-bottom:0}
/* Las cantidades alineadas en columna: así se comparan de un vistazo. */
.cb-q{flex:none;min-width:4.6em;font-weight:700;font-variant-numeric:tabular-nums}
.cb-n{color:var(--cream-dim)}
.cb-n::first-letter{text-transform:uppercase}
.cb-desc{color:var(--cream-dim);margin-bottom:20px}
.cb-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:18px}
.cb-price strong{font-family:var(--font-display);font-size:clamp(1.6rem,4.4vw,2rem);line-height:1}
.cb-price s{color:var(--cream-mute)}
/* El precio por kilo es lo que deja comparar el combo contra comprar suelto. */
.cb-price small{color:var(--cream-mute);font-size:.9rem}
.combo .ctl{margin-bottom:6px}
.cb-x{width:100%;margin-top:12px}

/* "Se agranda": entra creciendo desde un poco más chico. Sin movimiento si la persona
   pidió que no haya: el diálogo aparece igual, nada más que sin la animación. */
@media (prefers-reduced-motion:no-preference){
  .combo[open]{animation:combo-entra var(--t-base) var(--ease-out) both}
  @keyframes combo-entra{from{opacity:0;transform:scale(.93) translateY(12px)}to{opacity:1;transform:none}}
}