/* ============================================================================
   EL MARIACHI — estilos del sitio
   Tema oscuro. Paleta del negocio. Pensado mobile-first y liviano.
   ========================================================================== */
:root {
  /* Rojo y negro dominan; oro queda solo para detalles puntuales; verde como
     acento secundario (guiño a la bandera, sin caer en cliché navideño). */
  --red: #c8102e;
  --red-dark: #7a0a1e;
  --gold: #c79a44;
  --gold-light: #e0b968;
  --green: #16794a;
  --green-light: #4caf7d;
  --ink-1: #0a0a0b;
  --ink-2: #141415;
  --ink-3: #1c1c1e;
  --cream: #f2ede6;
  --cream-dim: #a9a6a1;
  --ok: var(--green);
  --danger: #e5484d;

  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Bricolage Grotesque", -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Números prolijos: cifras del mismo ancho, bien alineadas. */
  --num-feat: "tnum" 1, "lnum" 1;

  --radius: 16px;
  --radius-sm: 11px;
  --shadow-tint: 0, 0, 0;
  --shadow: 0 14px 34px rgba(var(--shadow-tint), 0.6);
  --wrap: 1120px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1.3, 0.32, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --header-h: 64px;
}

/* Compat: el resto del archivo referencia --night-*, mapeado a la nueva base. */
:root {
  --night-1: var(--ink-1);
  --night-2: var(--ink-2);
  --night-3: var(--ink-3);
}

* { box-sizing: border-box; }

/* El atributo/propiedad `hidden` siempre gana, aunque una clase fije `display`. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--cream);
  /* Base con un poco de profundidad aunque la animación esté apagada. */
  background:
    radial-gradient(120% 80% at 50% -10%, #17090c, transparent 60%),
    linear-gradient(180deg, #0d0d0e, #060606);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- FONDO (degradado + grano) ----------
   Quietos a propósito: el único movimiento ambiental de la página son los
   sombreros, y solo cuando el usuario scrollea. Antes el degradado derivaba
   en loop y el grano titilaba; con el campo de sombreros encima eso sumaba
   ruido y competía con la lectura de precios. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
}
body::before {
  background:
    radial-gradient(42% 38% at 18% 14%, rgba(200, 16, 46, 0.30), transparent 70%),
    radial-gradient(46% 42% at 86% 22%, rgba(122, 10, 30, 0.30), transparent 72%),
    radial-gradient(58% 50% at 55% 98%, rgba(22, 121, 74, 0.12), transparent 70%),
    radial-gradient(26% 26% at 92% 68%, rgba(199, 154, 68, 0.07), transparent 75%);
  filter: blur(26px);
}
body::after {
  z-index: -1;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- CAMPO DE SOMBREROS ----------
   Capa decorativa que cubre toda la pantalla y acompaña el scroll en todas
   las secciones. Es "fixed" y los sombreros los posiciona motion.js según
   cuánto se scrolleó: si el usuario para, quedan quietos.
   z-index NEGATIVO: quedan detrás de todo el contenido de la página por
   construcción, no por una carrera de z-index (una capa fixed con z-index
   positivo se compone por delante de las tarjetas en el primer pintado).
   Para que igual se vean, las secciones que tienen que dejarlos pasar usan
   fondos semitransparentes (.hero, .site-footer); las tarjetas son opacas a
   propósito, así ningún sombrero se cruza por delante de un precio.
   pointer-events:none => no reaccionan al mouse ni al tap, son solo scroll. */
.hat-field {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  --hat-base: 210px;
}
/* Sin will-change a propósito: promoverlos a capa de composición propia les
   permitía pintarse por delante del contenido en algunos navegadores. Son 10
   SVGs chicos moviéndose con transform, no hace falta la optimización. */
.hat {
  position: absolute; top: 0;
  height: auto;
  transform-origin: 50% 50%;
}
@media (max-width: 720px) {
  .hat-field { --hat-base: 150px; }
}

h1, h2, h3, legend { font-family: var(--font-head); line-height: 1.1; margin: 0; font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }

/* Cifras tabulares en precios, cantidades y totales. */
.num, .card__price, .summary, .cart-item__line, .cart-item__unit, .cart-badge {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--num-feat);
  letter-spacing: 0.01em;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }
.muted { color: var(--cream-dim); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--red); color: var(--cream); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; }

/* ---------- PANTALLA DE CARGA ---------- */
html.is-loading, html.is-loading body { overflow: hidden; }
.loader {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background:
    radial-gradient(120% 80% at 50% 30%, #1a0a0d, transparent 60%),
    var(--night-1);
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__stage { position: relative; width: 180px; height: 180px; }
.loader__model {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 0.4s ease;
  --poster-color: transparent; background: transparent;
}
.loader.is-3d .loader__model { opacity: 1; }
.loader__name { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--cream); letter-spacing: 0.3px; }
.loader__dots { display: flex; gap: 7px; }
.loader__dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--red); animation: dotPulse 1s ease-in-out infinite; }
.loader__dots i:nth-child(2) { animation-delay: 0.15s; }
.loader__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotPulse { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

/* ---------- BOTONES ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 999px;
  padding: 13px 24px; font-weight: 600; letter-spacing: 0.1px; font-size: 0.96rem;
  transition: transform 0.2s var(--ease-spring), background 0.2s, box-shadow 0.25s, opacity 0.2s, border-color 0.2s;
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--primary {
  background: linear-gradient(155deg, var(--red), var(--red-dark));
  color: var(--cream); box-shadow: 0 10px 26px -6px rgba(156, 37, 48, 0.55);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -6px rgba(156, 37, 48, 0.65); }
/* Barrido de brillo al pasar el mouse. */
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.22) 48%, transparent 62%);
  transform: translateX(-120%); transition: transform 0.6s var(--ease);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--primary > * { position: relative; z-index: 1; }
.btn--ghost { background: transparent; border-color: rgba(244, 233, 211, 0.24); color: var(--cream); }
.btn--ghost:hover { border-color: var(--red); color: var(--cream); transform: translateY(-1px); }
.btn--sm { padding: 9px 16px; font-size: 0.88rem; }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- BARRA DE PROGRESO DE SCROLL ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 260;
  background: linear-gradient(90deg, var(--red), var(--gold));
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* ---------- HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 10, 11, 0.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(242, 237, 230, 0.08);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Se "compacta" visualmente al bajar: más opaco, sombra propia (ver motion.js). */
.site-header.is-scrolled {
  background: rgba(6, 6, 7, 0.94);
  border-bottom-color: rgba(200, 16, 46, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.header-inner {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark { display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.brand__mark svg { width: 40px; height: auto; }
.brand__text { display: flex; flex-direction: column; }
.brand__name { font-family: var(--font-head); font-weight: 600; font-size: 1.32rem; color: var(--cream); letter-spacing: -0.01em; }
.brand__tag { font-size: 0.66rem; color: var(--cream-dim); letter-spacing: 0.4px; text-transform: uppercase; }
.brand { transition: opacity 0.2s ease; }
.brand:hover { opacity: 0.85; }

.header-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: 12px;
  transition: background 0.2s, border-color 0.2s, transform 0.15s var(--ease);
}
.icon-btn:hover { background: var(--night-3); border-color: rgba(200,16,46,0.35); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: var(--cream); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cart-btn { position: relative; }
.cart-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--gold); color: var(--night-1);
  font-size: 0.72rem; font-weight: 800; border-radius: 999px;
  display: grid; place-items: center;
}
.cart-badge.bump { animation: badgeBump 0.4s var(--ease); }
@keyframes badgeBump { 0%{transform:scale(1)} 40%{transform:scale(1.5)} 100%{transform:scale(1)} }

/* ---------- BÚSQUEDA ---------- */
.search-bar {
  border-top: 1px solid rgba(242,237,230,0.1);
  padding: 10px 0;
  animation: slideDown 0.25s var(--ease);
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.search-field { position: relative; display: flex; align-items: center; }
.search-field__icon { position: absolute; left: 12px; width: 18px; height: 18px; fill: none; stroke: var(--cream-dim); stroke-width: 2; stroke-linecap: round; }
#searchInput {
  width: 100%; padding: 12px 40px 12px 40px;
  background: var(--night-2); border: 1px solid rgba(244,233,211,0.18);
  border-radius: 999px; color: var(--cream);
}
#searchInput::placeholder { color: var(--cream-dim); }
.search-field__clear {
  position: absolute; right: 8px; width: 30px; height: 30px; border-radius: 999px;
  background: var(--night-3); border: none; color: var(--cream); font-size: 1.2rem; line-height: 1;
}

/* ---------- HERO ---------- */
/* Fondo semitransparente a propósito: deja ver los sombreros del fondo, que
   están en una capa por debajo (.hat-field, z-index negativo). */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(200,16,46,0.16), transparent 60%),
    linear-gradient(180deg, rgba(20,20,21,0.72), rgba(10,10,11,0.86));
  border-bottom: 1px solid rgba(242,237,230,0.08);
}
.hero__inner {
  position: relative; z-index: 1;
  padding: 64px 18px 52px; max-width: var(--wrap); margin: 0 auto;
  display: grid; gap: 20px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) {
  .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; padding-top: 84px; padding-bottom: 76px; }
}
.hero__copy { min-width: 0; position: relative; z-index: 1; }
.hero__badge {
  display: none;
}
@media (min-width: 860px) {
  .hero__badge {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; right: 6%; bottom: 14%; z-index: 1;
    width: 76px; height: 76px; border-radius: 999px;
    background: var(--ink-1); border: 1px solid rgba(199,154,68,0.4);
    color: var(--gold-light); font-family: var(--font-head); font-weight: 700;
    font-size: 0.95rem; letter-spacing: 0.02em; transform: rotate(-8deg);
    box-shadow: 0 10px 30px rgba(var(--shadow-tint), 0.45);
    opacity: 0; animation: heroUp 0.8s var(--ease-spring) 0.58s forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__badge { animation: none; opacity: 1; }
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: 2.2px; font-size: 0.72rem; font-weight: 600;
  color: var(--cream-dim); margin: 0 0 14px;
  opacity: 0; animation: heroUp 0.7s var(--ease-spring) 0.05s forwards;
}
.hero__eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--red); }
.hero__title {
  font-size: clamp(2.3rem, 6.4vw, 3.6rem);
  font-weight: 600; letter-spacing: -0.02em; color: var(--cream);
  opacity: 0; animation: heroUp 0.8s var(--ease-spring) 0.16s forwards;
}
.hero__title em { font-style: italic; font-weight: 500; color: var(--red); }
.hero__title span { color: var(--red); font-style: italic; }
.hero__sub {
  max-width: 46ch; color: var(--cream-dim); margin: 18px 0 26px; font-size: 1.05rem;
  opacity: 0; animation: heroUp 0.8s var(--ease-spring) 0.28s forwards;
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  opacity: 0; animation: heroUp 0.8s var(--ease-spring) 0.38s forwards;
}
.hero__note {
  margin: 22px 0 0; font-size: 0.85rem; color: var(--cream-dim);
  opacity: 0; animation: heroUp 0.8s var(--ease-spring) 0.48s forwards;
}
@keyframes heroUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow, .hero__title, .hero__sub, .hero__cta, .hero__note { opacity: 1; animation: none; }
}

/* ---------- CATEGORÍAS ---------- */
.cats {
  position: sticky; top: var(--header-h); z-index: 90;
  background: rgba(10, 10, 11, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(242,237,230,0.08);
}
.cats__inner {
  position: relative;
  display: flex; gap: 8px; overflow-x: auto; padding: 12px 18px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
/* Pill que se desliza detrás de la categoría activa (en vez de saltar entre chips). */
.chip-indicator {
  position: absolute; top: 6px; bottom: 6px; left: 0; width: 0;
  border-radius: 999px; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(199,154,68,0.16), rgba(199,154,68,0.05));
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 1px rgba(199,154,68,0.2), 0 6px 16px rgba(var(--shadow-tint), 0.35);
  transition: transform 0.4s var(--ease-spring), width 0.4s var(--ease-spring);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .chip-indicator { transition: none; } }
.cats__inner::-webkit-scrollbar { display: none; }
.chip {
  position: relative; z-index: 1;
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px 9px 13px; border-radius: 999px;
  background: var(--night-3); border: 1px solid rgba(244,233,211,0.14);
  color: var(--cream-dim); font-weight: 500; font-size: 0.88rem;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.chip__icon {
  width: 17px; height: 17px; flex: 0 0 auto;
  transition: transform 0.28s var(--ease-spring), color 0.2s var(--ease);
}
/* Hover solo con mouse fino: en touch el :hover queda "pegado" tras el tap. */
@media (hover: hover) and (pointer: fine) {
  .chip:hover { color: var(--cream); border-color: rgba(200,16,46,0.45); transform: translateY(-1px); }
  .chip:hover .chip__icon { transform: scale(1.16) rotate(-4deg); color: var(--gold-light); }
}
/* Feedback al tocar/clickear, que es lo que sí funciona en celular. */
.chip:active { transform: translateY(0) scale(0.97); }
.chip:active .chip__icon { transform: scale(1.1); }
.chip.is-active { color: var(--gold-light); border-color: transparent; background: transparent; }
.chip.is-active .chip__icon { color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .chip, .chip__icon { transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
  .chip:hover, .chip:active, .chip:hover .chip__icon, .chip:active .chip__icon { transform: none; }
}

/* ---------- CATÁLOGO ---------- */
/* z-index 1: el contenido siempre por encima del campo de sombreros (que
   también es 1, pero está antes en el DOM). Sin fondo propio, así que en los
   huecos entre tarjetas los sombreros se siguen viendo. */
#catalogo {
  position: relative; z-index: 1;
  padding: 44px 18px 88px;
  scroll-margin-top: calc(var(--header-h) + 52px);
}
@media (min-width: 860px) { #catalogo { padding: 60px 18px 110px; } }
.section-head { margin: 0 0 30px; max-width: 40ch; }
.section-head__eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 10px;
  text-transform: uppercase; letter-spacing: 2.4px; font-size: 0.7rem; font-weight: 600;
  color: var(--cream-dim);
}
.section-head__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--red); }
.section-head__title {
  margin: 0; font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.55rem, 3.4vw, 2.15rem); line-height: 1.12;
  letter-spacing: -0.02em; color: var(--cream);
}
.catalog-status { color: var(--cream-dim); padding: 20px 0; text-align: center; }
.no-results { text-align: center; color: var(--cream-dim); padding: 40px 0; }

/* Aparición suave de bloques estáticos al entrar en pantalla (motion.js les
   pone .is-visible). Mismo lenguaje que el reveal de las tarjetas. */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.catalog {
  position: relative; z-index: 1;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (min-width: 560px) { .catalog { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; } }

.card {
  position: relative;
  background: linear-gradient(175deg, var(--night-3), var(--night-2));
  border: 1px solid rgba(244,233,211,0.08);
  border-radius: var(--radius);
  padding: 13px 15px 15px;
  display: flex; flex-direction: column;
  transition:
    transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out),
    border-color 0.25s ease, box-shadow 0.3s ease;
  /* Estado inicial: oculta hasta que motion.js confirma que entró al viewport
     (IntersectionObserver) — así revela en cascada al hacer scroll, no solo al montarse. */
  opacity: 0;
  transform: translateY(18px) scale(0.97);
}
.card.is-visible { opacity: 1; transform: none; }
/* Borde "spotlight": sigue el cursor vía --mx/--my (seteadas por motion.js). */
.card::before {
  content: ""; position: absolute; inset: -1px; z-index: 0; border-radius: inherit;
  padding: 1px; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(200,16,46,0.5), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.card > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-5px); border-color: rgba(200,16,46,0.35); box-shadow: var(--shadow); }
  .card:hover::before { opacity: 1; }
}
/* Producto sin stock: tarjeta "apagada" (visible de entrada, sin depender del reveal). */
.card.is-out {
  opacity: 0.45 !important;
  transform: none !important;
  filter: grayscale(0.6) brightness(0.8);
}
.card.is-out:hover { border-color: rgba(244,233,211,0.08); box-shadow: none; }
.card.is-out:hover::before { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .card { opacity: 1; transform: none; }
}
/* ---------- Foto del producto (o placeholder de marca) ----------
   Mismo hueco siempre, haya foto o no: cuando se carga la URL de la foto
   real desde el panel, entra un <img> en el mismo lugar y la tarjeta no se
   mueve ni un pixel. Sin foto, queda el ícono de la categoría sobre un
   degradado oscuro de marca. */
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(200,16,46,0.16), transparent 62%),
    linear-gradient(160deg, #1f1f22, #131315);
  border: 1px solid rgba(244,233,211,0.07);
  display: grid; place-items: center;
}
.card__img { width: 100%; height: 100%; object-fit: cover; }
.card__media-icon {
  width: 34%; max-width: 54px; height: auto;
  color: var(--gold);
  opacity: 0.5;
  transition: transform 0.35s var(--ease-spring), opacity 0.25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__media-icon { transform: scale(1.09) rotate(-3deg); opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  .card__media-icon { transition: opacity 0.25s var(--ease); }
  .card:hover .card__media-icon { transform: none; }
}

.card__cat { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 1.1px; color: var(--cream-dim); font-weight: 600; }
.card__name { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; margin: 7px 0 4px; color: var(--cream); letter-spacing: -0.01em; }
.card__spacer { flex: 1; }
.card__price { font-size: 1.32rem; font-weight: 700; color: var(--gold-light); margin: 8px 0 2px; letter-spacing: -0.01em; }
.card__price-unit { font-size: 0.7rem; font-weight: 500; color: var(--cream-dim); letter-spacing: 0; }
.card__stock { font-size: 0.74rem; color: var(--green-light); min-height: 1.1em; margin-bottom: 10px; font-weight: 500; }
.card__stock.low { color: var(--gold-light); }
.card__stock.out {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(229,84,75,0.18);
  border: 1px solid var(--danger);
  color: var(--danger);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.add-btn {
  width: 100%; border: 1px solid var(--red); background: rgba(184,30,35,0.16); color: var(--cream);
  border-radius: 999px; padding: 10px; font-weight: 700;
  transition: background 0.2s, transform 0.12s var(--ease);
}
/* Hover solo con mouse: en touch quedaba "pintado" en rojo después del tap. */
@media (hover: hover) and (pointer: fine) {
  .add-btn:hover { background: var(--red); color: #fff; }
}
.add-btn:active { transform: scale(0.95); }
.add-btn.added { background: var(--ok); border-color: var(--ok); color: #fff; }

.qty-inline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qty-inline button {
  width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(244,233,211,0.2);
  background: var(--night-1); color: var(--cream); font-size: 1.2rem; line-height: 1;
  transition: transform 0.12s var(--ease), border-color 0.2s var(--ease);
}
/* Se tocan muchas veces por compra: feedback corto y casi imperceptible,
   nada de rebotes largos que cansen. */
.qty-inline button:active { transform: scale(0.9); }
@media (hover: hover) and (pointer: fine) {
  .qty-inline button:hover { border-color: rgba(200,16,46,0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .add-btn:active, .qty-inline button:active { transform: none; }
}
.qty-inline span { font-weight: 800; min-width: 2ch; text-align: center; }

/* Chip que "vuela" al carrito al agregar */
.fly-dot {
  position: fixed; z-index: 300; width: 18px; height: 18px; border-radius: 999px;
  background: var(--red); box-shadow: 0 0 12px rgba(200,16,46,0.7);
  pointer-events: none;
}

/* ---------- PÁGINA LEGAL (Términos y Condiciones) ---------- */
.legal { padding: 32px 18px 72px; max-width: 760px; }
.legal h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); color: var(--red); margin-bottom: 6px; }
.legal__updated { color: var(--cream-dim); font-size: 0.85rem; margin: 0 0 26px; }
.legal section { margin-bottom: 26px; }
.legal h2 { font-size: 1.2rem; color: var(--cream); margin-bottom: 8px; }
.legal p { color: var(--cream-dim); margin: 0 0 10px; }
.legal ul { color: var(--cream-dim); margin: 0 0 10px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--cream); }
.legal__note { font-size: 0.86rem; border-left: 2px solid rgba(199,154,68,0.5); padding-left: 12px; }
.legal a { color: var(--gold-light); }
.legal__back { margin-top: 34px; }

/* Aviso legal chico, debajo del botón/arriba de "Confirmar pedido". */
.legal-note { font-size: 0.78rem; color: var(--cream-dim); margin: 2px 0 10px; line-height: 1.45; }
.legal-note a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- BOTÓN DE ARREPENTIMIENTO ---------- */
.regret-form { display: grid; gap: 4px; margin-top: 18px; }
.regret-done { margin-top: 18px; padding: 18px; border: 1px solid rgba(76,175,125,0.5); border-radius: var(--radius-sm); background: rgba(22,121,74,0.12); }
.regret-done b { font-family: var(--font-head); font-size: 1.5rem; letter-spacing: 2px; color: var(--cream); }
.legal__back a { color: var(--gold-light); }
.legal__back a:hover { color: var(--cream); }

/* ---------- SEGUIMIENTO DE PEDIDO (página pública, sin login) ---------- */
.tracking { padding: 48px 18px 90px; max-width: 480px; display: flex; justify-content: center; }
.tracking-card {
  width: 100%; background: linear-gradient(180deg, var(--night-3), var(--night-2));
  border: 1px solid rgba(244,233,211,0.1); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow);
}
.tracking-card h1 { color: var(--cream); font-size: 1.4rem; margin: 0 0 8px; }
.tracking-eyebrow {
  text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.72rem; font-weight: 600;
  color: var(--cream-dim); margin: 0 0 22px;
}
.tracking-eyebrow span { color: var(--cream); }

.tracking-steps { list-style: none; display: flex; margin: 0 0 22px; padding: 0; }
.tracking-step {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative; text-align: center;
}
.tracking-step::before {
  content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px;
  background: rgba(244,233,211,0.12); z-index: 0;
}
.tracking-step:first-child::before { display: none; }
.tracking-step.is-done::before { background: var(--green); }
.tracking-step__dot {
  width: 16px; height: 16px; border-radius: 999px; background: var(--night-1);
  border: 2px solid rgba(244,233,211,0.25); position: relative; z-index: 1;
  transition: background 0.25s, border-color 0.25s;
}
.tracking-step.is-done .tracking-step__dot { background: var(--green); border-color: var(--green); }
.tracking-step.is-current .tracking-step__dot {
  background: var(--red); border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(200,16,46,0.22);
}
.tracking-step__label { font-size: 0.74rem; color: var(--cream-dim); font-weight: 600; }
.tracking-step.is-done .tracking-step__label,
.tracking-step.is-current .tracking-step__label { color: var(--cream); }

.tracking-status { color: var(--cream-dim); margin: 0 0 22px; font-size: 0.95rem; }

.tracking-code {
  background: rgba(199,154,68,0.08); border: 1px solid rgba(199,154,68,0.3);
  border-radius: var(--radius-sm); padding: 16px; text-align: center; margin-bottom: 18px;
}
.tracking-code__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--cream-dim); margin-bottom: 6px; }
.tracking-code__value { display: block; font-family: var(--font-head); font-size: 1.8rem; font-weight: 700; letter-spacing: 4px; color: var(--gold-light); }
.tracking-code__hint { margin: 8px 0 0; font-size: 0.78rem; color: var(--cream-dim); }

.tracking-summary {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px; border-top: 1px solid rgba(244,233,211,0.1);
  color: var(--cream-dim); font-size: 0.9rem;
}
.tracking-summary__total { font-weight: 700; color: var(--cream); font-variant-numeric: tabular-nums; }

/* ---------- FOOTER ---------- */
.site-footer {
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(242,237,230,0.08); padding: 28px 0 96px; background: rgba(6,6,7,0.7);
}
.footer__inner {
  position: relative; z-index: 1;
  display: grid; gap: 16px;
}
@media (min-width: 640px) {
  .footer__inner { grid-template-columns: 1fr auto; align-items: end; }
}
.site-footer p { margin: 4px 0; font-size: 0.88rem; }
.site-footer__links { margin-top: 10px !important; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.site-footer__links a { color: var(--gold-light); border-bottom: 1px solid rgba(240,195,73,0.4); padding-bottom: 1px; }
.site-footer__links a:hover { color: var(--cream); }

/* ---------- NOTA DE ENVÍO EN EL CHECKOUT ---------- */
.ship-note {
  background: rgba(22,121,74,0.12); border: 1px solid rgba(22,121,74,0.4);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 0.82rem; color: var(--cream-dim);
}
.ship-note strong { color: var(--green-light); }

/* ---------- LAUNCHER DE SOPORTE (reemplaza el botón de WhatsApp) ---------- */
.support-launcher {
  position: fixed; right: 16px; bottom: 16px; z-index: 130;
  width: 56px; height: 56px; border-radius: 999px; border: 1px solid rgba(242,237,230,0.14);
  background: linear-gradient(160deg, var(--red), var(--red-dark));
  color: var(--cream); display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  transition: transform 0.2s var(--ease), background 0.2s;
}
.support-launcher:hover { transform: scale(1.08); }
.support-launcher svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; grid-area: 1 / 1; }
.support-launcher__close { opacity: 0; transform: rotate(-90deg) scale(0.6); transition: 0.2s var(--ease); }
.support-launcher__help { transition: 0.2s var(--ease); }
.support-launcher.is-open .support-launcher__help { opacity: 0; transform: rotate(90deg) scale(0.6); }
.support-launcher.is-open .support-launcher__close { opacity: 1; transform: none; }

/* ---------- PANEL DE SOPORTE ---------- */
.support-panel {
  position: fixed; right: 16px; bottom: 84px; z-index: 129;
  width: min(370px, calc(100vw - 32px)); max-height: min(70vh, 560px);
  display: flex; flex-direction: column;
  background: var(--night-2); border: 1px solid rgba(242,237,230,0.12);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
  animation: supIn 0.25s var(--ease);
}
@keyframes supIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.support-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 12px 16px; background: linear-gradient(160deg, var(--night-3), var(--night-2));
  border-bottom: 1px solid rgba(242,237,230,0.1);
}
.support-panel__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; color: var(--cream); }
.support-panel__hat { width: 30px; height: auto; }
.support-panel__head-actions { display: flex; align-items: center; gap: 2px; }
.support-wa {
  color: var(--green-light);
  transition: background 0.2s, color 0.2s, transform 0.15s var(--ease-spring);
}
.support-wa:hover { background: rgba(22,121,74,0.16); color: var(--green-light); transform: scale(1.06); }
.support-wa svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
/* Latido sutil una sola vez al abrir el panel, para que se note el canal nuevo. */
.support-wa.is-new { animation: waPulse 1.4s var(--ease-spring) 1; }
@keyframes waPulse { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .support-wa.is-new { animation: none; } }
.support-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.support-msg {
  max-width: 85%; padding: 10px 13px; border-radius: 14px; font-size: 0.9rem; line-height: 1.45;
  animation: supIn 0.2s var(--ease);
}
.support-msg--bot { align-self: flex-start; background: var(--night-3); border: 1px solid rgba(244,233,211,0.1); border-bottom-left-radius: 4px; }
.support-msg--user { align-self: flex-end; background: var(--red); color: #fff; border-bottom-right-radius: 4px; }
.support-msg--typing { color: var(--cream-dim); font-style: italic; }
.support-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.support-chips button {
  font-size: 0.78rem; padding: 6px 11px; border-radius: 999px;
  background: var(--night-3); border: 1px solid rgba(242,237,230,0.14); color: var(--cream-dim);
}
.support-chips button:hover { color: var(--cream); border-color: rgba(200,16,46,0.5); }
.support-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(244,233,211,0.1); }
.support-input input {
  flex: 1; background: var(--night-1); border: 1px solid rgba(244,233,211,0.2);
  border-radius: 999px; padding: 9px 14px; color: var(--cream);
}
.support-input button {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 999px; border: none;
  background: var(--red); color: #fff; display: grid; place-items: center;
}
.support-input button svg { width: 18px; height: 18px; fill: currentColor; }
.support-open-complaint {
  border: none; background: transparent; color: var(--cream-dim); font-size: 0.8rem;
  padding: 8px; border-top: 1px solid rgba(244,233,211,0.08); text-decoration: underline;
}
.support-open-complaint:hover { color: var(--cream); }
.support-complaint { padding: 14px; border-top: 1px solid rgba(244,233,211,0.1); overflow-y: auto; }
.support-complaint h3 { font-size: 1.05rem; color: var(--cream); margin-bottom: 4px; }
.support-complaint .field { margin-bottom: 8px; }
.support-complaint__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
@media (max-width: 480px) {
  .support-panel { right: 8px; left: 8px; width: auto; bottom: 80px; }
}

/* ---------- DRAWER (CARRITO) ---------- */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,0.55);
  animation: fade 0.2s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.drawer {
  position: fixed; top: 0; right: 0; z-index: 120;
  width: min(430px, 100vw); height: 100dvh;
  background: var(--night-2); border-left: 1px solid rgba(242,237,230,0.1);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.32s var(--ease);
}
.drawer.is-open { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid rgba(244,233,211,0.12);
}
.drawer__head h2 { font-size: 1.3rem; color: var(--cream); }
.drawer__body { flex: 1; overflow-y: auto; padding: 16px 18px 26px; }

.cart-empty { text-align: center; color: var(--cream-dim); padding: 40px 10px; display: grid; gap: 14px; }

.cart-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.cart-item {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  padding: 12px; background: var(--night-3); border-radius: var(--radius-sm);
  border: 1px solid rgba(244,233,211,0.08);
  animation: cardIn 0.25s var(--ease) both;
}
.cart-item.removing { animation: itemOut 0.25s var(--ease) forwards; }
@keyframes itemOut { to { opacity: 0; transform: translateX(30px); height: 0; padding: 0; margin: 0; } }
.cart-item__name { font-weight: 700; font-size: 0.95rem; }
.cart-item__unit { grid-column: 1 / -1; font-size: 0.76rem; color: var(--cream-dim); }
.cart-item__line { font-weight: 800; color: var(--gold-light); align-self: center; }
.cart-item__controls { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cart-item__controls button {
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(244,233,211,0.2);
  background: var(--night-1); color: var(--cream); font-size: 1.1rem; line-height: 1;
}
.cart-item__controls .rm { margin-left: auto; border-color: rgba(229,84,75,0.5); color: var(--danger); width: auto; padding: 0 12px; border-radius: 999px; font-size: 0.8rem; }

/* ---------- CHECKOUT ---------- */
.checkout { display: grid; gap: 16px; }
.fs { border: 1px solid rgba(244,233,211,0.12); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0; }
.fs legend { padding: 0 6px; font-size: 0.95rem; color: var(--cream); }

.zones { display: grid; gap: 8px; }
.zone-opt, .pay-opt {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--night-3); border: 1px solid rgba(244,233,211,0.12); border-radius: var(--radius-sm);
  transition: border-color 0.2s, background 0.2s;
}
.zone-opt:has(input:checked), .pay-opt:has(input:checked) { border-color: var(--red); background: rgba(200,16,46,0.1); }
.zone-opt input, .pay-opt input { accent-color: var(--red); width: 18px; height: 18px; }
.zone-opt__name { flex: 1; }
.zone-opt__cost { font-weight: 800; color: var(--gold-light); }
.pay-opt__body { display: flex; flex-direction: column; }
.pay-opt__body small { color: var(--cream-dim); }
.pay-methods { display: grid; gap: 8px; }
.pay-opt.is-disabled { opacity: 0.5; }

.field { display: grid; gap: 4px; margin-bottom: 10px; }
.field span { font-size: 0.82rem; color: var(--cream-dim); }
.field input, .field textarea {
  background: var(--night-1); border: 1px solid rgba(244,233,211,0.2); border-radius: 10px;
  padding: 10px 12px; color: var(--cream); resize: vertical;
}
.field input:focus, .field textarea:focus { border-color: var(--red); outline: none; }

.gps-status { font-size: 0.82rem; margin: 10px 0 0; }
.gps-status.ok { color: var(--ok); }
.gps-status.err { color: var(--danger); }

.summary { display: grid; gap: 6px; padding: 12px 4px 0; border-top: 1px dashed rgba(244,233,211,0.2); }
.summary__row { display: flex; justify-content: space-between; font-size: 0.95rem; }
.summary__row--total { font-size: 1.2rem; font-weight: 800; color: var(--gold-light); margin-top: 6px; }

.form-error { color: var(--danger); font-size: 0.86rem; margin: 0; }
.min-order-note { color: var(--gold-light); font-size: 0.82rem; margin: 0; }
.store-closed-note { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(199, 154, 68, 0.4); background: rgba(199, 154, 68, 0.08); color: var(--gold-light); font-size: 0.86rem; line-height: 1.4; }

/* ---------- OVERLAY DE CONFIRMACIÓN ---------- */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(10, 7, 5, 0.8); backdrop-filter: blur(4px); padding: 20px;
  animation: fade 0.25s ease;
}
.confirm-card {
  background: linear-gradient(180deg, var(--night-3), var(--night-2));
  border: 1px solid rgba(200,16,46,0.4); border-radius: var(--radius);
  padding: 30px 24px; max-width: 380px; width: 100%; text-align: center;
  box-shadow: var(--shadow);
  animation: pop 0.45s var(--ease-spring);
}
@keyframes pop { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
.confirm-card h2 { font-family: var(--font-head); color: var(--cream); margin: 14px 0 8px; font-size: 1.4rem; }
.confirm-card p#confirmMsg { color: var(--cream-dim); margin: 0 0 20px; font-size: 0.92rem; }

.confirm-icon { position: relative; width: 84px; height: 84px; margin: 0 auto; }
.confirm-check { position: absolute; inset: 0; width: 84px; height: 84px; }
.confirm-check circle { fill: none; stroke: var(--ok); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw 0.5s var(--ease) forwards; }
.confirm-check path { fill: none; stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw 0.4s 0.45s var(--ease) forwards; }
.confirm-check--pending circle, .confirm-check--pending path { stroke: var(--gold-light); }
@keyframes draw { to { stroke-dashoffset: 0; } }

.confirm-code {
  margin: 4px 0 22px; padding: 14px 16px; border: 1px dashed rgba(199,154,68,0.5);
  border-radius: var(--radius-sm); background: rgba(199,154,68,0.08);
}
.confirm-code__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--gold-light); margin-bottom: 6px; }
.confirm-code__row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.confirm-code__value { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; letter-spacing: 4px; color: var(--cream); font-variant-numeric: var(--num-feat); }
.confirm-code__copy {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; flex: 0 0 auto;
  border: 1px solid rgba(244,233,211,0.24); background: transparent; color: var(--cream-dim); padding: 0;
  cursor: pointer; transition: border-color 0.2s, color 0.2s, transform 0.15s var(--ease-spring);
}
.confirm-code__copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .confirm-code__copy:hover { border-color: var(--gold); color: var(--gold-light); }
}
.confirm-code__copy:active { transform: scale(0.92); }
.confirm-code__hint { display: block; margin-top: 8px; font-size: 0.78rem; color: var(--cream-dim); }

.confirm-actions { display: grid; gap: 8px; }
.confirm-close-link {
  display: block; width: 100%; margin-top: 14px; background: none; border: none;
  color: var(--cream-dim); font-size: 0.86rem; font-weight: 600; cursor: pointer;
  padding: 6px; transition: color 0.2s;
}
.confirm-close-link:hover { color: var(--cream); }

/* ---------- TOASTS ---------- */
.toasts { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 210; display: grid; gap: 8px; width: max-content; max-width: 90vw; }
.toast {
  background: var(--night-3); border: 1px solid rgba(242,237,230,0.14); color: var(--cream);
  padding: 10px 16px; border-radius: 999px; font-size: 0.88rem; font-weight: 600;
  box-shadow: var(--shadow);
  animation: toastIn 0.25s var(--ease), toastOut 0.3s var(--ease) 2.4s forwards;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(12px); } }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}


/* ============================================================================
   OFERTAS Y COMBOS
   ========================================================================== */
.offers { margin: 0 0 28px; }
.offers__title { font-family: var(--font-head); font-size: 20px; margin: 0 0 12px; color: var(--gold-light); letter-spacing: -0.01em; }
.offers__row { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; }
.offer-card { position: relative; flex: 0 0 min(300px, 82vw); scroll-snap-align: start; display: grid; gap: 6px; padding: 16px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(200, 16, 46, 0.18), rgba(199, 154, 68, 0.10)); border: 1px solid rgba(199, 154, 68, 0.35); }
.offer-card--combo { background: linear-gradient(160deg, rgba(199, 154, 68, 0.20), rgba(22, 121, 74, 0.12)); }
.offer-card__img { width: 100%; height: 110px; object-fit: cover; border-radius: 10px; }
.offer-card__tag { justify-self: start; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--gold); color: var(--night-1); }
.offer-card__name { margin: 0; font-family: var(--font-head); font-size: 18px; line-height: 1.2; }
.offer-card__items { margin: 0; color: var(--cream-dim); font-size: 13.5px; line-height: 1.4; }
.offer-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 2px; }
.offer-card__price strong { font-size: 22px; color: var(--cream); }
.offer-card__price s { color: var(--cream-dim); font-size: 14px; }
.offer-card__save { color: var(--green-light); font-size: 12.5px; font-weight: 600; }
.offer-card__btn { margin-top: 6px; }

.card__price--offer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; color: var(--gold-light); }
.card__offer-badge { padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--red); color: var(--cream); align-self: center; }
.card__was { color: var(--cream-dim); font-size: 0.78em; font-weight: 400; }
.cart-item__was { color: var(--cream-dim); font-size: 0.8em; font-weight: 400; margin-left: 4px; }
.cart-item__promo { color: var(--green-light); font-style: normal; font-size: 0.92em; }
.summary__row--saving { color: var(--green-light); font-weight: 600; }


/* ============================================================================
   PRESENTACIONES (una tarjeta, varios tamaños)
   ========================================================================== */
.card__variants { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.variant { padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(242, 237, 230, 0.22); background: transparent; color: var(--cream); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease; }
.variant:hover { border-color: var(--gold); }
.variant.is-active { border-color: var(--gold); background: rgba(199, 154, 68, 0.18); color: var(--gold-light); font-weight: 600; }
.variant.is-out { opacity: 0.5; text-decoration: line-through; }
.variant:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .variant { transition: none; } }


/* ---------- CARTEL DE TIENDA CERRADA (cuenta regresiva) ---------- */
/* Va arriba de todo, en el flujo normal (el header sigue pegado al hacer scroll). Oro sobre fondo oscuro:
   avisa sin gritar; el rojo queda para la marca y los errores. */
.store-closed {
  position: relative; z-index: 101;
  background: linear-gradient(180deg, rgba(199, 154, 68, 0.16), rgba(199, 154, 68, 0.07));
  border-bottom: 1px solid rgba(199, 154, 68, 0.38);
}
.store-closed__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.store-closed__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.store-closed__txt strong { font-family: var(--font-head); font-size: 1rem; letter-spacing: -0.01em; text-wrap: balance; }
.store-closed__when { color: var(--gold-light); font-weight: 600; font-size: 0.92rem; }
.store-closed__note { color: var(--cream-dim); font-size: 0.84rem; line-height: 1.4; max-width: 62ch; text-wrap: pretty; }
.store-closed__count { display: flex; gap: 8px; flex: 0 0 auto; }
.sc-unit {
  display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 6px 8px 5px;
  border-radius: var(--radius-sm); background: rgba(10, 10, 11, 0.55); border: 1px solid rgba(199, 154, 68, 0.28);
}
.sc-unit b { font-family: var(--font-head); font-size: 1.45rem; line-height: 1.1; font-weight: 700; font-feature-settings: var(--num-feat); font-variant-numeric: tabular-nums; color: var(--cream); }
.sc-unit i { font-style: normal; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-light); }
@media (max-width: 520px) {
  .store-closed__count { width: 100%; justify-content: stretch; }
  .sc-unit { flex: 1 1 0; }
}


/* ---------- MIS PEDIDOS ---------- */
.my-orders { display: grid; gap: 12px; }
.mo-card { display: grid; gap: 8px; padding: 14px; background: var(--night-3); border: 1px solid rgba(244, 233, 211, 0.1); border-radius: var(--radius-sm); animation: cardIn 0.25s var(--ease) both; }
.mo-card.is-done { opacity: 0.78; }
.mo-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mo-card__head > div { display: grid; gap: 2px; min-width: 0; }
.mo-card__head b { font-family: var(--font-head); font-size: 1.05rem; }
.mo-card__head small { color: var(--cream-dim); font-size: 0.8rem; }
.mo-card__sub { margin: 0; color: var(--cream-dim); font-size: 0.9rem; }
.mo-card__sub b { color: var(--cream); font-feature-settings: var(--num-feat); }
.mo-card__hint { margin: 0; color: var(--green-light); font-size: 0.9rem; }
.mo-card__link { justify-self: start; }
.mo-pill { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(242, 237, 230, 0.1); color: var(--cream); }
.mo-pill--nuevo { background: rgba(199, 154, 68, 0.18); color: var(--gold-light); }
.mo-pill--en_camino { background: rgba(200, 16, 46, 0.2); color: #ff8a98; }
.mo-pill--entregado { background: rgba(22, 121, 74, 0.25); color: var(--green-light); }
.mo-code { display: grid; gap: 4px; padding: 12px; border-radius: var(--radius-sm); border: 1px dashed rgba(199, 154, 68, 0.5); background: rgba(199, 154, 68, 0.07); text-align: center; }
.mo-code > span { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light); }
.mo-code__value { font-family: var(--font-head); font-size: 2rem; letter-spacing: 0.22em; padding-left: 0.22em; font-feature-settings: var(--num-feat); user-select: all; }
.mo-code small { color: var(--cream-dim); font-size: 0.8rem; line-height: 1.4; }
.mo-empty { padding: 28px 8px; text-align: center; color: var(--cream-dim); display: grid; gap: 8px; line-height: 1.5; }
.mo-empty p { margin: 0; }
.mo-empty b { color: var(--cream); }
.mo-add { display: grid; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(244, 233, 211, 0.1); }
.mo-add label { font-size: 0.84rem; color: var(--cream-dim); }
.mo-add__row { display: flex; gap: 8px; }
.mo-add__row input { flex: 1 1 auto; min-width: 0; }
.mo-add__row input { background: var(--night-1); border: 1px solid rgba(244, 233, 211, 0.2); border-radius: 10px; padding: 10px 12px; color: var(--cream); }
.mo-add__row input:focus { border-color: var(--red); outline: none; }