/* ============================================================
   Salsas Don Andrés — sistema visual "Mercado regiomontano"
   Tipografía y paleta oficiales de marca (etiquetas físicas + PDF de paleta)
   ============================================================ */
@font-face {
  font-family: "Vanilla Whale";
  src: url("../fonts/vanilla-whale.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Market Deco";
  src: url("../fonts/market-deco.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:root {
  --paper: #f5e6c8;
  --paper-2: color-mix(in srgb, #f5e6c8 88%, #4e342e 12%);
  --paper-card: color-mix(in srgb, var(--paper) 94%, var(--ink) 6%);
  --ink: #4e342e;
  --ink-2: color-mix(in srgb, #4e342e 70%, #f5e6c8 30%);
  --ink-3: color-mix(in srgb, #4e342e 45%, #f5e6c8 55%);
  --clay: #bf360c;
  --clay-deep: #8e1b1b;
  --green: #2e7d32;
  --green-lime: #66bb6a;
  --gold: #fbc02d;
  --habanero: #f4511e;
  --line: rgba(78, 52, 46, .14);
  --line-2: rgba(78, 52, 46, .22);
  --shadow: 0 24px 60px -20px rgba(78, 52, 46, .58);
  --shadow-clay: 0 28px 70px -26px rgba(191, 54, 12, .28);
  /* Única tipografía de marca con soporte completo de acentos/ñ — es la que
     carga todo el sitio (títulos, cuerpo, mono/números). Market Deco no tiene
     glifos para acentos (á é í ó ú ñ), así que solo se usa en texto corto que
     controlamos y que nunca los lleva (ver --deco abajo). */
  --display: "Vanilla Whale", serif;
  --sans: "Vanilla Whale", sans-serif;
  --mono: "Vanilla Whale", monospace;
  --deco: "Market Deco", var(--display);
  --r: 14px;
  --maxw: 1180px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-draw: cubic-bezier(0.32, 0.72, 0, 1);
  --wa: #25d366;
  --wa-deep: #128c7e;
  --error: #8e1b1b;
  --error-bg: color-mix(in srgb, #8e1b1b 10%, #f5e6c8);
}

* { box-sizing: border-box; }
/* scroll-behavior: smooth removido — interfiere con el momentum nativo de macOS */
html { scroll-padding-top: 20px; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
  /* Vanilla Whale solo trae peso Regular — sin esto el navegador "inventa"
     una negrita sintética que engorda los trazos y tapa los huecos finos
     del diseño distressed, uniendo las letras en una placa sólida. */
  font-weight: 400;
  font-synthesis: none;
  /* Vanilla Whale conecta las minúsculas entre sí con una línea arriba/abajo
     (rasgo del glifo), pero las mayúsculas no la llevan — se quedan como
     capitulares sueltas. Para que todo el sitio use ese estilo de capitular
     independiente (sin la línea de conexión), todo el texto va en mayúsculas. */
  text-transform: uppercase;
}
/* Fondo fijo en su propia capa compositor — no repinta al hacer scroll.
   La foto de parchment completa (con su viñeta original), crédito Freepik en
   el footer — sin velo que la diluya. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("../fondo-parchment.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: -1;
}
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.05; text-wrap: balance; }
button { font-family: inherit; cursor: pointer; }
section { position: relative; }
::selection { background: var(--clay); color: #f5e6c8; }

@keyframes spinSeal { to { transform: rotate(360deg); } }

/* ---------- Wordmark ---------- */
.wordmark { display: inline-flex; flex-direction: column; line-height: .92; color: var(--ink); }
.wordmark__top {
  font-family: var(--deco); font-weight: 400; letter-spacing: .42em;
  font-size: .62em; text-indent: .42em; color: var(--clay); margin-bottom: .12em;
}
.wordmark__bot { font-family: var(--display); font-size: 1.4em; letter-spacing: -.01em; font-weight: 400; font-synthesis: none; }
.wordmark--xl { font-size: clamp(40px, 8.5vw, 104px); }
.wordmark--xl .wordmark__top { letter-spacing: .5em; }
.wordmark--sm { font-size: 17px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: .01em;
  padding: 13px 22px; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out), box-shadow 160ms var(--ease-out), color 160ms var(--ease-out); white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.97); }
.btn--primary { background: var(--clay); color: var(--paper); box-shadow: 0 10px 22px -10px rgba(191, 54, 12, .7); }
.btn--primary:hover { background: var(--clay-deep); }
.btn--ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(78, 52, 46, .04); }
.btn--wa { background: var(--wa); color: var(--paper); }
.btn--wa:hover { background: var(--wa-deep); }
.btn--block { width: 100%; }
/* Solo en botones cuyo texto no lleva acentos — el resto de .btn se queda en
   Vanilla Whale porque Market Deco no tiene glifos para á/é/í/ó/ú/ñ. */
.btn--deco { font-family: var(--deco); }
.btn--add { padding: 13px 18px; }
.btn:disabled { opacity: .6; cursor: wait; }

.iconbtn { background: transparent; border: none; color: var(--ink-2); padding: 6px; border-radius: 10px; display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.iconbtn:hover { background: rgba(78, 52, 46, .06); color: var(--ink); }

/* ---------- Eyebrow / headings ---------- */
.h2 { font-family: var(--display); font-size: clamp(28px, 4.2vw, 50px); letter-spacing: -.015em; font-weight: 400; font-synthesis: none; }
.h2 em { color: var(--clay); }
.lede { font-size: clamp(17px, 1.9vw, 21px); color: var(--ink-2); max-width: 56ch; line-height: 1.55; }
.lede--center { margin: 0 auto; text-align: center; }
.muted { color: var(--ink-3); font-size: 15px; }
.section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.section-head .h2 { margin-bottom: 2px; }

/* ---------- Hero ---------- */
.hero { padding: 40px 24px; overflow: hidden; min-height: 62vh; min-height: 62svh; display: flex; flex-direction: column; }
.hero__grid { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: center; flex: 1; }

/* ---------- About ---------- */
.about { max-width: var(--maxw); margin: 0 auto; padding: 110px 24px; }
.about__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }
.about__media { position: relative; }
.about__tag { position: absolute; bottom: -16px; left: -16px; background: var(--green); color: #f5e6c8; padding: 10px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow); }
.about__copy .h2 { margin: 4px 0 18px; }
.about__copy .lede { margin-bottom: 16px; }
.about__facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.about__facts strong { font-family: var(--deco); font-weight: 800; font-size: 21px; color: var(--clay); line-height: 1; }
.about__facts-sep { color: var(--line-2); font-size: 18px; }

/* ---------- Salsas ---------- */
/* Home: grid de 5 miniaturas (.salsas__list), todas idénticas entre sí —
   fila horizontal en desktop/tablet, columna en mobile (ver media queries).
   Detalle (.salsas--detail): la ficha completa de una sola salsa, con media
   al lado del cuerpo en pantallas anchas para que la foto no quede diminuta
   en un carril de color kilométrico; colapsa a foto-arriba/cuerpo-abajo en
   ≤900px. Ambas reutilizan las mismas clases .scard/.scard__media/.scard__body. */
.salsas { max-width: var(--maxw); margin: 0 auto; padding: 12px 24px 110px; }
/* minmax(0, 1fr), no solo 1fr: un track "1fr" plano tiene min-width:auto
   implícito, así que si el nombre de una salsa trae una palabra larga sin
   espacios ("Tlaquepaque", "Fresadilla") esa columna se estira para no
   partirla, y como la foto es un % del ancho de su columna, crece con
   ella — eso hacía que esas dos miniaturas se vieran más grandes que las
   demás aunque el contenedor CSS fuera "igual" en las 6. minmax(0, 1fr)
   fuerza min-width:0 para que las 6 columnas midan siempre lo mismo. */
.salsas__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.salsas--detail { display: block; }
/* Foto de ambiente de fondo — se distingue con claridad como imagen, pero el
   texto/CTA siguen legibles porque viven sobre .scard__body, un panel sólido
   var(--paper-card). Solo se desvanece arriba/abajo para fundirse con el
   parchment de la página; sin máscara central, así no se recorta la parte
   relevante de cada foto (el producto/platillo). */
.detail__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  opacity: .32;
  mask-image: linear-gradient(to bottom, transparent 0%, var(--ink) 8%, var(--ink) 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--ink) 8%, var(--ink) 92%, transparent 100%);
  mask-mode: alpha;
  pointer-events: none;
  z-index: 0;
}
.salsas--detail .detail__back,
.salsas--detail .scard { position: relative; z-index: 1; }
/* Congela la columna de la foto: no se estira ni se desliza cuando "Va bien
   con"/"Información nutrimental" alargan el cuerpo de al lado. Además, sin
   caja de color detrás de la foto — el tinte por-salsa se queda solo en el
   grid de miniaturas de la home. Aquí la foto flota sobre el fondo general
   del sitio; el único recuadro (borde + sombra) rodea el panel de info, no
   la foto — elimina de raíz el problema de "corte de color": ya no existe
   ninguna caja de color con altura finita que se pueda desalinear. */
.salsas--detail .scard {
  align-items: start;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  gap: 32px;
}
@media (hover: hover) and (pointer: fine) {
  .salsas--detail .scard:hover { transform: none; box-shadow: none; }
}
/* Offset fijo (no centrado dinámico): la foto queda anclada a la altura que
   tenía con ambos toggles cerrados y ya no se mueve cuando el cuerpo crece
   o se encoge. */
.salsas--detail .scard__media { background: none; box-shadow: none; margin-top: 66px; justify-items: center; }
.salsas--detail .scard__media > div:last-of-type { width: 84%; margin: 0 auto; }
.salsas--detail .scard__media::after { display: none; }
.salsas--detail .scard__body {
  background: var(--paper-card);
  border: 1px solid var(--line-2);
  border-radius: 34px 34px 10px 10px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(245, 230, 200,.82);
}
.scard {
  display: grid; grid-template-columns: 340px 1fr; gap: 0; background: var(--paper-card);
  border: 1px solid var(--line-2); border-radius: 34px 34px 10px 10px; overflow: hidden; box-shadow: var(--shadow);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .scard:hover { transform: translateY(-4px); box-shadow: var(--shadow-clay); }
}
.scard { cursor: pointer; }
.scard__media { position: relative; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 12%, #f5e6c8), color-mix(in srgb, var(--c) 20%, #f5e6c8)); display: grid; place-items: center; padding: 40px 30px; box-shadow: inset -1px 0 0 var(--line); }
.scard__media::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 28px;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--c) 30%, transparent));
  pointer-events: none;
}
.scard__media > div:last-of-type { width: 62%; }
.scard__index { position: absolute; top: 18px; left: 22px; font-family: var(--deco); font-weight: 800; font-size: 64px; color: var(--c); opacity: .16; line-height: 1; }
.scard__body { padding: 38px 40px; display: flex; flex-direction: column; align-items: flex-start; }

/* Miniatura del grid principal: mismo sistema visual que .scard, pero
   foto-arriba/cuerpo-abajo y todo a escala reducida — sin ingredientes,
   picor, precio ni nutrición (ver SalsaCardMini, solo pinta foto+nombre+tag). */
/* Sin caja: la foto flota directo sobre el fondo parchment del sitio (estilo
   tajin.com/mx) — nada de fondo, borde ni sombra de contenedor. La separación
   visual la da la sombra de piso (gradiente estático) que ya trae cada foto
   (FotoProducto en ui.jsx), no un recuadro ni un filter drop-shadow. */
/* minmax(0, 1fr) — mismo motivo que .salsas__list arriba: un "1fr" plano
   deja que esta tarjeta se estire más allá de la columna que le tocó en el
   grid exterior cuando el nombre trae una palabra larga sin espacios
   ("Tlaquepaque"), lo que hacía que su foto (un % de este ancho) creciera
   más que las demás. */
/* align-content: start — sin esto, cuando el grid exterior estira esta
   tarjeta a la altura de la más alta de la fila (ej. "Estilo Tlaquepaque",
   cuyo nombre envuelve a 2 líneas y necesita más alto de .scard__body), el
   espacio sobrante se repartía en la fila de la FOTO (.scard__media, la
   única fila "auto" sin tope), agrandándola/encogiéndola según cuántas
   líneas ocupe el nombre de cada salsa — eso descentraba la foto verticalmente
   entre tarjetas (fotos "más arriba" o "más abajo"), aunque el tamaño real
   de la imagen (el div envoltorio) ya fuera idéntico en las 6. Con
   align-content:start el sobrante queda invisible después del body (no se
   nota, la tarjeta no tiene fondo ni borde) y la fila de foto ya no se mueve. */
.scard.scard--mini { grid-template-columns: minmax(0, 1fr); align-content: start; background: none; border: none; border-radius: 0; overflow: visible; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .scard.scard--mini:hover { box-shadow: none; }
}
.scard--mini .scard__media { padding: 14px 8px; background: none; box-shadow: none; }
.scard--mini .scard__media::after { display: none; }
.scard--mini .scard__media > div:last-of-type { width: 92%; max-width: 200px; }
.scard--mini .scard__body { padding: 16px 12px 20px; align-items: center; text-align: center; }
.scard--mini .scard__name { font-size: clamp(27px, 2.7vw, 37px); }
.scard--mini .scard__perfil { font-size: 10px; }

/* Composición del Kit de Regalo (KitBotes en ui.jsx): las 5 salsas flotando
   en acomodo escalonado/diagonal con sombra — es la misma composición que
   tenía .hero__botes en el Hero original, antes de que se simplificara a
   solo-logo (eliminada en b3b676b). Se usa TANTO en la miniatura del grid
   del home COMO en la ficha de detalle — mismo componente, mismas clases;
   solo cambia el tamaño del contenedor que la envuelve en cada lugar
   (.scard--mini vs .salsas--detail), así ambas vistas quedan visualmente
   idénticas en proporción, solo que la de detalle es más grande. Se
   reemplaza por la foto real del kit armado en cuanto el dueño la entregue.

   El contenedor usa un aspect-ratio más corto que el de una sola salsa
   (vs 3/5 de FotoProducto): 5 botes en fila necesitan una caja más ancha
   que alta para leerse sin amontonarse, y como .scard--mini no tiene fondo
   ni borde visible, esa caja invisible no se nota. flex-shrink: 0 evita
   que flexbox encoja los botes para caber en el 100% del contenedor. Estos
   son los valores BASE (ficha de detalle, caja grande — ver .salsas--detail
   más abajo en el archivo); la miniatura del grid del home tiene su propio
   override (ver bloque "MINIATURA DEL KIT" más abajo) con botes bastante
   más grandes y traslapados, para que cada frasco se reconozca aunque la
   tarjeta sea chica. */
.kitbotes {
  position: relative; width: 100%; aspect-ratio: 3 / 4.2;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 3%;
}
.kitbotes__bote { width: 60%; flex-shrink: 0; position: relative; transition: transform .4s var(--ease-out); }
.kitbotes__bote--0 { z-index: 3; transform: translateY(-4%) rotate(-6deg); }
.kitbotes__bote--1 { z-index: 4; margin: 0 -22%; transform: translateY(3%); }
.kitbotes__bote--2 { z-index: 5; margin: 0 -22%; transform: translateY(-7%) rotate(2deg); }
.kitbotes__bote--3 { z-index: 4; margin: 0 -22%; transform: translateY(5%) rotate(-2deg); }
.kitbotes__bote--4 { z-index: 2; transform: translateY(8%) rotate(7deg); }
@media (hover: hover) and (pointer: fine) {
  .kitbotes__bote:hover { transform: translateY(-8%) rotate(0) scale(1.06); z-index: 9; }
}
.kitbotes__shadow {
  position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%);
  width: 86%; height: 16px; background: radial-gradient(ellipse, rgba(78, 52, 46, .3), transparent 70%);
  filter: blur(6px); z-index: 1;
}

/* MINIATURA DEL KIT (grid del home) — override de KitBotes solo para
   .scard--mini (la ficha de detalle no se toca: sigue con los valores base
   de arriba). La huella total del contenedor (mismo % de la tarjeta que
   ocupan las demás miniaturas) no cambia; lo que crece es la escala de
   cada bote (60% → 58% de ancho... en realidad AUMENTA el tamaño real
   percibido porque se abandona el traslape simétrico "centro hacia afuera"
   por un ABANICO ascendente: cada bote se apila sobre el anterior en una
   sola dirección (z-index creciente, margen negativo solo a la izquierda),
   así los 5 quedan visibles como una fila de cartas abiertas — cada uno
   muestra su propio frasco/etiqueta — en vez de 2-3 al frente tapando a
   los otros por completo. Total horizontal ≈ mismo que el traslape
   anterior (58 + 4×(58−30) ≈ 170%), así no invade la tarjeta vecina. */
.scard--mini .kitbotes { aspect-ratio: 3 / 5; padding-bottom: 18%; }
.scard--mini .kitbotes__bote { width: 58%; margin: 0; }
.scard--mini .kitbotes__bote--0 { z-index: 1; margin: 0; transform: translateY(-2%) rotate(-9deg); }
.scard--mini .kitbotes__bote--1 { z-index: 2; margin: 0 0 0 -30%; transform: translateY(-5%) rotate(-4deg); }
.scard--mini .kitbotes__bote--2 { z-index: 3; margin: 0 0 0 -30%; transform: translateY(-6%) rotate(0deg); }
.scard--mini .kitbotes__bote--3 { z-index: 4; margin: 0 0 0 -30%; transform: translateY(-5%) rotate(4deg); }
.scard--mini .kitbotes__bote--4 { z-index: 5; margin: 0 0 0 -30%; transform: translateY(-2%) rotate(9deg); }

/* Balance de proporciones del Kit de Regalo (desktop/tablet ancho): la
   columna de foto heredaba el ancho fijo de .scard (340px) mientras el
   panel de info se quedaba con todo el resto (1fr) — en el maxw de esta
   página (1180px) eso daba ~340/760, un panel visiblemente más grande que
   la composición de fotos y con el párrafo de "Qué incluye" estirándose
   ~100 caracteres por línea (por eso se sentía "denso"/apretado aunque
   hubiera espacio de sobra). Aquí se balancea a ~44/56 con fr en vez de
   px fijo, se le da más aire al gap entre columnas, y se limita el ancho
   del párrafo a una medida de lectura cómoda. El espaciado VERTICAL del
   panel (padding, márgenes entre secciones) se mantiene compacto a
   propósito — el dueño pidió que la caja completa (título → 5 chips) se
   alcance a ver sin hacer scroll en una pantalla de laptop típica, así
   que aquí se prioriza altura corta sobre aire vertical. Solo aplica en
   pantallas >900px: a partir de ahí el layout colapsa a una sola columna
   (ver .scard en el media query de 900px) y no hay "columnas" que
   balancear. */
@media (min-width: 901px) {
  .kit-detail .scard { grid-template-columns: 1fr 1.28fr; gap: 48px; }
  /* La columna de foto creció (ver grid-template-columns arriba), pero
     KitBotes hereda width:84% de esa columna como ancho NOMINAL — los
     botes rotados/traslapados sobresalen de esa caja nominal (ver
     comentario de .kitbotes más abajo), así que a 84% de una columna más
     ancha el último bote terminaba pegado al borde del panel. Se baja a
     64% para que, aun con el sobresaliente del traslape, quede aire real
     antes del panel. */
  .kit-detail .scard__media { margin-top: 32px; }
  .kit-detail .scard__media > div:last-of-type { width: 64%; }
  .kit-detail .scard__body { padding: 34px 50px; }
  .kit-detail .scard__section { margin-bottom: 10px; }
  .kit-detail .scard__section p.muted { max-width: 54ch; }
  .kit-detail .scard__buy { margin-bottom: 16px; }
  .kit-detail .scard__rule { margin: 16px 0; }
  .kit-detail .kit-chips { margin: 14px 0 4px; }
}

/* Ficha del Kit de Regalo: fila de cuadraditos "incluye estas 5 salsas",
   dentro del panel .scard__body, justo debajo del título — cada cuadradito
   sigue siendo un <a> hacia la ficha de esa salsa. flex:1 (en vez de un
   ancho fijo chico) para que los 5 repartan entre sí todo el ancho
   disponible del panel — antes dejaban aire de sobra a la derecha. */
.kit-chips { display: flex; gap: 16px; margin: 14px 0 4px; }
.kit-chip { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; min-width: 0; }
/* Sombra pareja para las 5 miniaturas — gris neutro semitransparente en el
   propio cuadrado (box-shadow en .kit-chip__thumb, no drop-shadow en la
   img), así el cuadrado se marca igual de bien en las 5 sin importar el
   color de cada salsa (antes el filter drop-shadow tomaba var(--c), y
   como sigue la silueta del frasco/botella en vez de un cuadrado, cada
   miniatura se veía distinta). */
.kit-chip__thumb {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 14px;
  overflow: hidden;
  background: none;
  box-shadow: 0 12px 20px -5px rgba(50,38,32,.42), 0 2px 5px rgba(50,38,32,.3), inset 0 0 0 1px rgba(50,38,32,.14);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
/* translateY(7%) — las fotos fuente (productos/*.webp) traen bastante
   lienzo transparente vacío abajo (el jarro/botella arranca casi pegado
   al borde superior de la imagen y deja ~16-20% de aire abajo), así que
   con object-fit:contain centrado "a la de a de", el producto se veía
   desplazado hacia arriba dentro del cuadrado. Se compensa bajando la
   imagen renderizada; el sobrante (puro aire) que se sale del cuadrado
   por abajo lo recorta el overflow:hidden del padre, sin cortar nada
   del producto en sí. */
.kit-chip__thumb img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; transform: translateY(7%); }
.kit-chip__label { font-family: var(--deco); font-size: 12px; letter-spacing: .01em; color: var(--ink-2); text-align: center; line-height: 1.2; }
@media (hover: hover) and (pointer: fine) {
  .kit-chip:hover .kit-chip__thumb { transform: translateY(-3px); box-shadow: 0 12px 20px -5px rgba(50,38,32,.42), 0 2px 5px rgba(50,38,32,.3), inset 0 0 0 1.5px var(--c); }
}

/* Link "volver al catálogo" en la página de detalle */
.detail__back { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-family: var(--deco); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 20px; transition: color .15s var(--ease-out); }
.detail__back:hover { color: var(--clay); }
.scard__perfil { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c); font-weight: 700; }
.scard__name { font-family: var(--display); font-size: clamp(28px, 3.4vw, 40px); margin: 8px 0 10px; letter-spacing: -.015em; font-weight: 400; font-synthesis: none; }
.scard__desc { color: var(--ink-2); font-size: 16.5px; max-width: 52ch; margin-bottom: 4px; }
.scard__rule { width: 100%; height: 1px; background: var(--line); margin: 16px 0; }
.scard__picor-row { display: flex; align-items: center; gap: 16px; width: 100%; }
.scard__slabel { font-family: var(--deco); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.scard__slabel svg { color: var(--green); }
.scard__section { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-bottom: 6px; }
.scard__ings { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip { font-family: var(--deco); font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink); }
.scard__pres { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.presbtn { -webkit-appearance: none; appearance: none; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; background: transparent; border: 1.5px solid var(--line-2); border-radius: 12px; padding: 9px 16px; color: var(--ink); transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out), color 150ms var(--ease-out); }
.presbtn span:first-child { font-weight: 600; font-size: 14px; color: inherit; }
.presbtn__unit { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.presbtn.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); color: var(--c); }
.presbtn.is-on .presbtn__unit { color: var(--c); }
.scard__buy { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.scard__price { display: flex; flex-direction: column; }
.scard__unit { font-size: 14px; font-weight: 600; color: var(--ink); }
.scard__nuttoggle { background: transparent; border: none; color: var(--ink-2); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; min-height: 44px; border-top: 1px solid var(--line); width: 100%; justify-content: flex-start; margin-top: 4px; }
.scard__nuttoggle:hover { color: var(--clay); }

/* Nutrition table */
.nut { width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-top: 6px; animation: fadeIn .25s var(--ease-out) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.nut__head { font-family: var(--deco); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.nut__table { width: 100%; border-collapse: collapse; }
.nut__table th { font-family: var(--deco); text-align: left; font-weight: 500; font-size: 14px; color: var(--ink-2); padding: 5px 0; border-bottom: 1px dotted var(--line); }
.nut__table td { text-align: right; font-family: var(--deco); font-size: 13px; color: var(--ink); padding: 5px 0; border-bottom: 1px dotted var(--line); white-space: nowrap; }
.nut__code { margin-top: 12px; font-family: var(--deco); font-size: 11px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Cómo pedir ---------- */
.comopedir { background: var(--ink); color: var(--paper); padding: 80px 24px 60px; }
.comopedir > div:first-child { max-width: var(--maxw); margin: 0 auto 6px; }
.comopedir__steps { max-width: var(--maxw); margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.step { padding: 36px 40px; border-top: 1px solid rgba(245, 230, 200, .13); display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.step:nth-child(odd) { border-right: 1px solid rgba(245, 230, 200, .13); }
.step__n { font-family: var(--deco); font-weight: 800; font-size: 52px; line-height: 1; color: var(--clay); opacity: .5; }
.step__body { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.step h3 { font-family: var(--display); font-size: 19px; margin: 0; color: var(--paper); font-weight: 400; font-synthesis: none; }
.step p { font-family: var(--deco); color: rgba(245, 230, 200, .6); font-size: 14.5px; margin: 0; line-height: 1.6; }
.step svg { color: var(--gold); }
.comopedir__zona { max-width: var(--maxw); margin: 0 auto; padding: 22px 40px 0; display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(245, 230, 200, .44); flex-wrap: wrap; }
.comopedir__zona svg { flex-shrink: 0; color: rgba(251, 192, 45, .65); }
.comopedir__zona-link { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-left: auto; white-space: nowrap; }
.comopedir__zona-link:hover { color: var(--paper); }

/* ---------- Puntos de venta ---------- */
.puntos { max-width: var(--maxw); margin: 0 auto; padding: 110px 24px; }
.puntos__list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.cityard { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.cityard__head { display: flex; flex-direction: column; gap: 4px; }
.cityard__head h3 { font-family: var(--display); font-size: 18px; color: var(--ink); margin: 0; display: flex; align-items: center; gap: 7px; font-weight: 400; font-synthesis: none; }
.cityard__head h3 svg { color: var(--clay); flex-shrink: 0; }
.cityard__stores { display: flex; flex-wrap: wrap; gap: 6px 0; }
.cityard__store { font-family: var(--deco); font-size: 14.5px; color: var(--ink-2); }
.cityard__store:not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--ink-3); }

/* ---------- Contacto ---------- */
.contacto { max-width: var(--maxw); margin: 0 auto; padding: 0 24px 110px; }
.contacto__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: center; background: var(--paper-card); border: 1px solid var(--line-2); border-radius: 24px; padding: 56px; box-shadow: var(--shadow); }
.contacto__grid .h2 { margin: 4px 0 14px; }
.contacto__links { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.rlink { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; transition: border-color .22s var(--ease-out), transform .22s var(--ease-out), box-shadow .22s var(--ease-out); background: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .rlink:hover { border-color: var(--clay); transform: translateX(6px); box-shadow: var(--shadow-clay); }
}
.rlink svg { color: var(--ink); flex-shrink: 0; }
.rlink div { display: flex; flex-direction: column; }
.rlink span { font-size: 12px; color: var(--ink-3); font-family: var(--deco); letter-spacing: .08em; text-transform: uppercase; }
.rlink strong { font-size: 16px; }
.rlink--wa svg { color: var(--wa); }
.contacto__card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.contacto__wordmark { font-size: 22px; margin-top: 12px; }
.contacto__card p { color: var(--ink-2); font-size: 14px; margin: 0 0 14px; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--paper); padding: 72px 24px 32px; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; }
.footer__top { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 48px; border-bottom: 1px solid rgba(245, 230, 200, .12); text-align: center; }
.footer__tagline { color: rgba(245, 230, 200, .5); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; font-family: var(--mono); margin: 0; }
.footer__cols-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 44px 0 40px; border-bottom: 1px solid rgba(245, 230, 200, .08); }
.footer__cols-row h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
/* Primera columna (Navega): único bloque del footer sin acentos —
   los otros dos (Síguenos / razón social) sí los llevan y se quedan en Vanilla Whale. */
.footer__cols-row > div:first-child h3,
.footer__cols-row > div:first-child a { font-family: var(--deco); }
.footer__cols-row a { display: block; color: rgba(245, 230, 200, .65); font-size: 14.5px; margin-bottom: 10px; transition: color .15s var(--ease-out); }
.footer__cols-row a:hover { color: var(--paper); }
.footer__note { color: rgba(245, 230, 200, .55); font-size: 13.5px; line-height: 1.7; margin: 0; }
.footer__social { display: flex; gap: 10px; margin-bottom: 14px; }
.footer__cols-row .footer__social-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 0; border-radius: 50%;
  border: 1px solid rgba(245, 230, 200, .22);
  color: rgba(245, 230, 200, .75);
  transition: transform .2s var(--ease-out), background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.footer__cols-row .footer__social-btn:hover, .footer__cols-row .footer__social-btn:focus-visible {
  background: var(--gold); border-color: var(--gold); color: var(--ink);
  transform: translateY(-2px) scale(1.06);
}
.footer__social-btn:active { transform: translateY(0) scale(.98); }
.footer__social-icon { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); }
.footer__wa-number { display: block; color: rgba(245, 230, 200, .55); font-size: 13.5px; transition: color .15s var(--ease-out); }
.footer__wa-number:hover { color: var(--paper); }
.footer__base { max-width: var(--maxw); margin: 24px auto 0; display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: rgba(245, 230, 200, .4); align-items: center; }
.footer__legal-btn { background: transparent; border: none; color: rgba(245, 230, 200, .4); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; font-family: inherit; transition: color .15s var(--ease-out); }
.footer__legal-btn:hover { color: var(--paper); }

/* ---------- Aviso de privacidad modal ---------- */
.aviso-scrim { position: fixed; inset: 0; background: rgba(78, 52, 46, .72); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.aviso-panel { background: var(--paper); border-radius: 20px; width: min(600px, 100%); max-height: min(80vh, 700px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 40px 80px -20px rgba(78, 52, 46, .6); }
.aviso-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.aviso-head h2 { font-family: var(--display); font-size: 22px; font-weight: 400; font-synthesis: none; }
.aviso-body { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.aviso-body h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); margin-top: 8px; margin-bottom: 2px; }
.aviso-body p { color: var(--ink-2); font-size: 14px; line-height: 1.7; margin: 0; }
.aviso-fecha { font-family: var(--mono); font-size: 12px; color: var(--ink-3) !important; margin-top: 8px; }
.aviso-foot { padding: 16px 24px 20px; border-top: 1px solid var(--line); flex-shrink: 0; display: flex; justify-content: flex-end; }

/* ---------- Cart drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(78, 52, 46, .52); opacity: 0; pointer-events: none; transition: opacity .38s var(--ease-draw); z-index: 90; }
.scrim.is-open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--paper); z-index: 100; transform: translateX(100%); transition: transform .38s var(--ease-draw); display: flex; flex-direction: column; box-shadow: -30px 0 60px -30px rgba(78, 52, 46, .5); }
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 18px; border-bottom: 1px solid var(--line); }
.drawer__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); }
.drawer__head h3 { font-family: var(--display); font-size: 24px; margin-top: 3px; font-weight: 400; font-synthesis: none; }
.drawer__head h3 em { color: var(--ink-3); font-style: normal; font-family: var(--mono); font-size: 16px; }
.drawer__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--ink-3); padding: 40px; }
.drawer__items { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.litem { display: grid; grid-template-columns: 52px 1fr auto; gap: 13px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-card); transition: box-shadow .3s, border-color .3s; }
.litem--flash { border-color: var(--clay); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 20%, transparent); }
.litem__thumb { width: 52px; height: 64px; border-radius: 8px; background: linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 70%, #4e342e)); display: grid; place-items: center; }
.litem__thumb span { font-family: var(--display); color: #f5e6c8; font-size: 17px; font-weight: 400; font-synthesis: none; }
.litem__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.litem__info strong { font-size: 15px; }
.litem__sub { font-size: 12.5px; color: var(--ink-3); }
.litem__row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; gap: 10px; }
.litem__price { font-family: var(--mono); font-weight: 700; font-size: 14px; }
.litem__del { background: transparent; border: none; color: var(--ink-3); padding: 4px; }
.litem__del:hover { color: var(--clay); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.stepper button { background: transparent; border: none; padding: 8px 11px; display: grid; place-items: center; color: var(--ink); }
.stepper button:hover { background: var(--paper-2); }
.stepper span { min-width: 26px; text-align: center; font-weight: 600; font-size: 14px; font-family: var(--mono); }
.drawer__foot { padding: 18px 22px 22px; border-top: 1px solid var(--line); background: var(--paper-card); }
.drawer__line { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.drawer__line span:first-child { color: var(--ink-2); }
.drawer__line strong { font-family: var(--display); font-size: 22px; font-weight: 400; font-synthesis: none; }
.drawer__line--muted { font-size: 13.5px; color: var(--ink-3); }
.drawer__line--muted span { color: var(--ink-3) !important; }
.drawer__foot .btn { margin-top: 8px; }
.drawer__note { font-size: 12px; color: var(--ink-3); text-align: center; margin: 10px 0 0; }

/* ---------- Checkout ---------- */
.co { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; }
.co__scrim { position: absolute; inset: 0; background: rgba(78, 52, 46, .58); }
.co__panel { position: relative; width: min(960px, 100%); max-height: 92vh; background: var(--paper); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); animation: pop .3s; }
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(8px); } }
.co__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; border-bottom: 1px solid var(--line); background: var(--paper-card); }
.co__steps { display: flex; gap: 8px; padding: 16px 26px 0; }
.co__step { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.co__step:not(:last-child)::after { content: ""; width: 28px; height: 1px; background: var(--line-2); margin-left: 4px; }
.co__stepn { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: 12px; font-family: var(--mono); }
.co__step.is-on { color: var(--ink); }
.co__step.is-on .co__stepn { border-color: var(--clay); color: var(--clay); }
.co__step.is-done .co__stepn { background: var(--green); border-color: var(--green); color: #f5e6c8; }
.co__body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; overflow: hidden; flex: 1; min-height: 0; }
.co__main { padding: 26px 30px 30px; overflow-y: auto; }
.co__title { font-family: var(--display); font-size: 24px; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-weight: 400; font-synthesis: none; }
.co__title svg { color: var(--clay); }
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.cgrid--2 { margin-bottom: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field__label i { color: var(--clay); font-style: normal; }
.field input, .field textarea { font-family: var(--sans); font-size: 15px; padding: 11px 13px; border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--paper-card); color: var(--ink); resize: vertical; transition: border-color .15s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--clay); }
.field input.is-mono { font-family: var(--mono); letter-spacing: .04em; }
.field--err input, .field--err textarea { border-color: var(--error); background: var(--error-bg); }
.field__err { font-size: 12px; color: var(--error); margin-top: 4px; font-weight: 500; }

/* Phone field con selector de país */
.field--phone .phone__row { display: flex; border: 1.5px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--paper-card); transition: border-color .15s; }
.field--phone.field--err .phone__row { border-color: var(--error); background: var(--error-bg); }
.field--phone .phone__row:focus-within { border-color: var(--clay); }
.phone__select-wrap { position: relative; flex-shrink: 0; border-right: 1.5px solid var(--line-2); }
.phone__select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.phone__trigger { display: flex; align-items: center; gap: 5px; padding: 11px 10px 11px 12px; font-size: 14px; font-family: var(--sans); color: var(--ink); white-space: nowrap; pointer-events: none; }
.phone__code { font-weight: 600; color: var(--clay); }
.phone__chevron { color: var(--ink-2); flex-shrink: 0; }
.phone__input { flex: 1; font-family: var(--sans); font-size: 15px; padding: 11px 13px; border: none; background: transparent; color: var(--ink); outline: none; min-width: 0; }

/* SearchableSelect — selector con búsqueda */
.sselect { position: relative; }
.sselect__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--sans); font-size: 15px; padding: 11px 13px; border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--paper-card); color: var(--ink); cursor: pointer; text-align: left; transition: border-color .15s; }
.sselect__btn:hover:not(:disabled) { border-color: var(--ink-3); }
.sselect__btn.is-open { border-color: var(--clay); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sselect__btn.is-placeholder { color: var(--ink-3); }
.sselect__btn.is-disabled { opacity: .45; cursor: not-allowed; background: var(--paper-2); }
.sselect__btn span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sselect__chevron { flex-shrink: 0; color: var(--ink-2); transition: transform .15s; }
.sselect__btn.is-open .sselect__chevron { transform: rotate(180deg); }
.field--err .sselect__btn { border-color: var(--error); background: var(--error-bg); }
.sselect__drop { position: absolute; left: 0; right: 0; top: 100%; z-index: 200; background: var(--paper-card); border: 1.5px solid var(--clay); border-top: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; box-shadow: 0 8px 24px rgba(78, 52, 46,.12); overflow: hidden; }
.sselect__search-wrap { padding: 8px 8px 4px; border-bottom: 1px solid var(--line); }
.sselect__search { width: 100%; font-family: var(--sans); font-size: 14px; padding: 8px 10px; border: 1.5px solid var(--line-2); border-radius: 7px; background: var(--paper-2); color: var(--ink); outline: none; box-sizing: border-box; }
.sselect__search:focus { border-color: var(--clay); }
.sselect__list { list-style: none; margin: 0; padding: 4px 0; max-height: 200px; overflow-y: auto; }
.sselect__opt { padding: 9px 14px; font-size: 14.5px; cursor: pointer; color: var(--ink); transition: background .1s; }
.sselect__opt:hover { background: color-mix(in srgb, var(--clay) 8%, transparent); }
.sselect__opt.is-selected { color: var(--clay); font-weight: 600; background: color-mix(in srgb, var(--clay) 6%, transparent); }
.sselect__empty { padding: 12px 14px; font-size: 14px; color: var(--ink-3); text-align: center; }

.co__back { background: transparent; border: none; color: var(--ink-2); font-size: 14px; font-weight: 600; margin-top: 14px; width: 100%; padding: 8px; }
.co__back:hover { color: var(--clay); }
.co__pay-info { background: color-mix(in srgb, var(--wa) 7%, transparent); border: 1px solid color-mix(in srgb, var(--wa) 22%, transparent); border-radius: 14px; padding: 18px 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 14px; }
.co__pay-info p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.6; }
.co__pay-steps { display: flex; flex-direction: column; gap: 8px; }
.co__pay-step { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.co__pay-n { width: 22px; height: 22px; border-radius: 50%; background: var(--wa); color: #f5e6c8; font-size: 12px; font-weight: 700; font-family: var(--mono); display: grid; place-items: center; flex-shrink: 0; }

.co__summary { background: var(--paper-2); padding: 26px 26px; overflow-y: auto; border-left: 1px solid var(--line); }
.co__summary h4 { font-family: var(--display); font-size: 18px; margin-bottom: 16px; font-weight: 400; font-synthesis: none; }
.co__items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.co__item { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; }
.co__qty { width: 26px; height: 26px; border-radius: 7px; background: var(--c); color: #f5e6c8; font-family: var(--mono); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.co__iteminfo { display: flex; flex-direction: column; }
.co__iteminfo strong { font-size: 14px; }
.co__iteminfo span { font-size: 12px; color: var(--ink-3); }
.co__itemp { font-family: var(--mono); font-size: 13px; font-weight: 700; }
.co__totals { border-top: 1px solid var(--line); padding-top: 14px; }
.co__line { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; color: var(--ink-2); }
.co__line--muted { color: var(--ink-3); font-size: 13px; }
.co__line--total { color: var(--ink); font-size: 16px; margin-top: 6px; }
.co__line--total strong { font-family: var(--display); font-size: 22px; font-weight: 400; font-synthesis: none; }
.co__disc { font-size: 11.5px; color: var(--ink-3); margin: 12px 0 0; line-height: 1.5; }

.cdone { text-align: center; max-width: 460px; margin: 0 auto; padding: 30px 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; grid-column: 1 / -1; }
.cdone__check { width: 76px; height: 76px; border-radius: 50%; background: var(--green); color: #f5e6c8; display: grid; place-items: center; margin-bottom: 6px; animation: pop .4s; }
.cdone h3 { font-family: var(--display); font-size: 30px; font-weight: 400; font-synthesis: none; }
.cdone__num { font-family: var(--mono); color: var(--ink-2); font-size: 14px; }
.cdone__num strong { color: var(--clay); }
.cdone p { color: var(--ink-2); font-size: 15px; margin: 0; }
.cdone__contact { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); background: var(--paper-2); padding: 8px 14px; border-radius: 999px; margin: 6px 0 8px; text-decoration: none; transition: background .18s, color .18s; }
.cdone__contact:hover { background: var(--paper-card); color: var(--wa); }
.cdone__contact svg { color: var(--wa); }
.cdone__wa-hint { font-size: 12.5px; color: var(--ink-3); margin: 0; }
.cdone__actions { width: 100%; display: flex; flex-direction: column; gap: 8px; background: var(--paper-2); border-radius: var(--r); padding: 16px; }
.cdone__actions-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0; }
.cdone__vendor { width: 100%; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; text-align: left; }
.cdone__vendor > summary { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); cursor: pointer; list-style: none; user-select: none; }
.cdone__vendor > summary::-webkit-details-marker { display: none; }
.cdone__vendor-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* ---------- Skip link ---------- */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: fixed; left: 16px; top: 16px; width: auto; height: auto; padding: 10px 22px; background: var(--clay); color: var(--paper); border-radius: 999px; font-weight: 600; font-size: 14px; z-index: 9999; box-shadow: var(--shadow-clay); }

/* ---------- Focus visible (global) ---------- */
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .iconbtn:focus-visible, .presbtn:focus-visible,
.scard__nuttoggle:focus-visible { border-radius: 12px; }
a:focus-visible { border-radius: 4px; }

/* Scroll reveal desactivado — elementos siempre visibles para scroll nativo sin jank */
.reveal, .reveal.is-in { opacity: 1; }

/* ---------- Hero entrance (rise) ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.rise { opacity: 0; }
body.loaded .rise { animation: riseIn .85s var(--ease-out) both; }
body.loaded .rise-1 { animation-delay: .04s; }
body.loaded .rise-2 { animation-delay: .11s; }
body.loaded .rise-3 { animation-delay: .20s; }
body.loaded .rise-4 { animation-delay: .30s; }
body.loaded .rise-5 { animation-delay: .40s; }
body.loaded .rise-6 { animation-delay: .52s; }
body.loaded .rise-art { animation-delay: .16s; }

/* ---------- Hero bg, halo y botes ---------- */
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 58% at 76% 36%, rgba(191, 54, 12, .15), transparent 66%),
    radial-gradient(ellipse 55% 44% at 18% 78%, rgba(46, 125, 50, .09), transparent 58%),
    radial-gradient(ellipse 46% 38% at 50% 98%, rgba(251, 192, 45, .07), transparent 68%),
    radial-gradient(ellipse 36% 28% at 6% 8%, rgba(191, 54, 12, .06), transparent 52%);
  pointer-events: none;
  z-index: 0;
  /* Disuelve el halo antes del borde inferior del hero, en vez de cortarlo
     en seco contra el parchment plano de la siguiente sección (mismo
     principio de transición de luz del hallazgo B, aplicado aquí al halo).
     mask-mode: alpha fuerza que los stops del gradiente se lean por canal
     alfa (opaco → transparente) en vez de por luminancia — sin esto, un
     motor que interprete por luminancia vería var(--ink) (casi negro, poca
     luminancia) como "casi transparente" e invertiría el efecto. */
  mask-image: linear-gradient(to bottom, var(--ink) 0%, var(--ink) 78%, transparent 100%);
  mask-mode: alpha;
  -webkit-mask-image: linear-gradient(to bottom, var(--ink) 0%, var(--ink) 78%, transparent 100%);
}
.hero__halo {
  position: absolute;
  inset: -20% -10%;
  background: radial-gradient(ellipse at 50% 52%, rgba(191, 54, 12, .20), rgba(251, 192, 45, .07) 42%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  /* inset: -20% -10% hace que esta caja mida 1.4× el alto del hero, así que
     el borde inferior real del hero (donde .hero recorta con overflow:
     hidden) cae al 85.7% de la altura de ESTA caja, no al 100%. Sin máscara
     propia, el halo llegaba con opacidad aún visible hasta ese punto y
     overflow:hidden lo cortaba en seco — la línea dura reportada en el
     borde inferior del hero. Se desvanece a 0 desde el 78%, antes del
     85.7%, para que el recorte del overflow ya no atrape nada visible. */
  mask-image: linear-gradient(to bottom, var(--ink) 0%, var(--ink) 45%, transparent 78%);
  mask-mode: alpha;
  -webkit-mask-image: linear-gradient(to bottom, var(--ink) 0%, var(--ink) 45%, transparent 78%);
}
/* ---------- Flavor tags (hero) ---------- */
.flavtag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c);
  background: var(--paper-card);
  border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent);
  padding: 6px 13px;
  border-radius: 999px;
  box-shadow: 0 4px 16px -4px rgba(78, 52, 46, .35), 0 0 0 1px color-mix(in srgb, var(--c) 12%, transparent);
  pointer-events: none;
  opacity: 0;
}
.flavtag__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.flavtag--1 { top: 14%; right: 0; }
.flavtag--2 { top: 50%; right: -3%; }
.flavtag--3 { bottom: 14%; left: 2%; }
body.loaded .flavtag { animation: riseIn .8s cubic-bezier(.22, 1, .36, 1) both; }
body.loaded .flavtag--1 { animation-delay: .52s; }
body.loaded .flavtag--2 { animation-delay: .66s; }
body.loaded .flavtag--3 { animation-delay: .80s; }

/* ---------- About blockquote ---------- */
.about__quote {
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 24px);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
  margin: 24px 0 16px;
  padding: 18px 22px 18px 22px;
  background: color-mix(in srgb, var(--clay) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--clay) 18%, transparent);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  font-weight: 400;
  font-synthesis: none;
}
.about__quotemark {
  position: absolute;
  right: 14px;
  bottom: -22px;
  font-family: var(--display);
  font-size: 7em;
  line-height: 1;
  color: var(--clay);
  opacity: .1;
  pointer-events: none;
  user-select: none;
  font-style: normal;
  font-weight: 400;
  font-synthesis: none;
}

/* ---------- ComoPedir heading ---------- */
.comopedir__head { max-width: var(--maxw); margin: 0 auto; }
.comopedir__title { color: var(--paper); margin-top: 10px; }

/* ---------- Heat scale ---------- */
.heat { display: inline-flex; align-items: center; gap: 8px; }
.heat__dots { display: inline-flex; gap: 4px; }
.heat__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-2); border: 1.5px solid var(--line-2); transition: background .2s; }
.heat__dot.is-on { border-color: transparent; }
.heat__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

/* ---------- SalsaCard top row ---------- */
.scard__toprow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ---------- Maridaje ---------- */
.scard__maridaje { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.scard__maridaje-label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; margin-right: 2px; }
.chip--pair { background: color-mix(in srgb, var(--c) 8%, var(--paper-card)); border-color: color-mix(in srgb, var(--c) 22%, transparent); color: var(--ink-2); font-size: 12px; }

/* ---------- Testimonios (editorial rotante) ---------- */
.testi { max-width: var(--maxw); margin: 0 auto; padding: 0 24px 110px; text-align: center; }
.testi__stage { max-width: 820px; margin: 0 auto 28px; }
.testi__quote { font-family: var(--display); font-style: italic; font-size: clamp(22px, 3vw, 38px); line-height: 1.32; color: var(--ink); margin: 0 0 20px; letter-spacing: -.01em; animation: testiIn .42s var(--ease-out) both; font-weight: 400; font-synthesis: none; }
@keyframes testiIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.testi__byline { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.testi__sep { color: var(--clay); line-height: 1; font-size: 18px; }
.testi__nav { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.testi__pip { width: 32px; height: 4px; border-radius: 2px; border: none; background: var(--line-2); padding: 0; cursor: pointer; transition: background .22s var(--ease-out), transform .22s var(--ease-out); transform-origin: left; }
.testi__pip.is-on { background: var(--clay); transform: scaleX(1.375); }
.testi__pip:focus-visible { outline-offset: 5px; }

/* ---------- Checkout mobile total bar ---------- */
.co__mobile-bar { display: none; }
@media (max-width: 900px) {
  .co__mobile-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 20px; background: var(--paper-2);
    border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2);
    font-family: var(--sans);
  }
  .co__mobile-bar strong { font-family: var(--display); font-size: 16px; color: var(--clay); font-weight: 400; font-synthesis: none; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--paper);
  padding: 11px 14px 11px 16px; border-radius: 999px;
  box-shadow: 0 12px 32px -8px rgba(78, 52, 46, .6);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  animation: toastIn .26s var(--ease-out);
  pointer-events: auto;
}
.toast__icon { color: var(--green); display: grid; place-items: center; flex-shrink: 0; }
.toast__msg { font-family: var(--sans); }
.toast__msg strong { font-weight: 700; }
.toast__cta {
  background: rgba(245, 230, 200, .14); border: none; color: var(--paper);
  font-family: var(--sans); font-weight: 700; font-size: 13px;
  padding: 5px 12px; border-radius: 999px; margin-left: 4px;
  cursor: pointer; transition: background .15s var(--ease-out);
}
.toast__cta:hover { background: rgba(245, 230, 200, .26); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(-50%) translateY(10px); }
}
.toast.is-exiting { animation: toastOut 180ms var(--ease-out) forwards; }

/* ---------- WhatsApp flotante ---------- */
.wachat__fab {
  position: fixed; z-index: 80; right: 24px; bottom: 24px;
  width: 76px; height: 76px; border-radius: 50%;
  border: none; background: linear-gradient(155deg, var(--wa), var(--wa-deep));
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 16px 36px -8px rgba(37, 211, 102, .65), 0 4px 14px rgba(18, 140, 126, .35);
  transition: transform 200ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.wachat__fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 22px 44px -10px rgba(37, 211, 102, .75), 0 4px 16px rgba(18, 140, 126, .4); }
.wachat__fab:active { transform: scale(0.96); }
.wachat__fab:focus-visible { outline: 2px solid var(--wa); outline-offset: 3px; }

.wachat__pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--wa);
  animation: waPulseRing 1100ms var(--ease-io);
  pointer-events: none;
}
@keyframes waPulseRing {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---------- Responsive ---------- */
/* ---------- Logo imagen global ---------- */
.logo-img { display: block; }

/* Hero: logo protagonista, único elemento, centrado (sin wordmark de texto) */
.hero__logo-img { text-align: center; }
.hero__logo-img .logo-img { width: 460px; max-width: 100%; height: auto; margin: 0 auto; }

/* Contacto */
.contacto__logo { height: 110px; width: auto; margin: 8px auto 0; }

/* Footer */
/* invert(1) vuelve blanca la silueta negra (visible sobre el --ink café del
   footer); hue-rotate(165deg) recupera el bigote como acento dorado en vez
   de perderlo en blanco puro (brightness(0) aplanaba todo el logo a un solo
   color y el bigote desaparecía dentro de la silueta). */
.footer__logo { height: 130px; width: auto; filter: invert(1) hue-rotate(165deg); opacity: .92; }

@media (max-width: 900px) {
  .wachat__fab { right: 16px; bottom: 16px; width: 64px; height: 64px; }
  .wachat__fab svg { width: 37px; height: 37px; }

  /* Hero mobile: logo grande, protagonista — altura acotada al contenido
     (antes forzaba 100svh con el logo centrado, lo que dejaba un colchón de
     aire enorme entre el logo y el catálogo sin importar qué tan chico fuera
     el padding de .salsas; el hueco vivía aquí, no ahí). */
  .hero { padding: 32px 24px 16px; min-height: 60vh; min-height: 60svh; justify-content: center; }
  .hero__grid { width: 100%; align-items: flex-end; }
  .hero__logo-img { margin-bottom: 8px; }
  .hero__logo-img .logo-img { width: 410px; max-width: 100%; height: auto; }

  /* About */
  .about { padding: 64px 20px; }
  .about__grid { grid-template-columns: 1fr; gap: 32px; }
  .about__media { max-width: 400px; margin: 0 auto; }

  /* Salsas — colapsa a foto-arriba/cuerpo-abajo (una sola columna real) */
  .salsas { padding: 4px 16px 64px; }
  .salsas__list { grid-template-columns: 1fr; gap: 16px; }

  /* La Bala es la más vendida: en mobile va al final del catálogo para
     cerrar la lista con el producto estrella (desktop mantiene el orden
     original del grid de 6 columnas). */
  .salsas__list a[href="/salsas/la-bala"] { order: 999; }
  .scard { grid-template-columns: 1fr; }
  .salsas--detail .scard { gap: 40px; }
  .salsas--detail .scard__media { margin-top: 0; padding: 14px 10px; }
  .scard__media { padding: 28px; box-shadow: inset 0 -1px 0 var(--line); }
  .scard__media::after {
    top: auto; right: 0; bottom: 0; left: 0;
    width: auto; height: 26px;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--c) 30%, transparent));
  }
  .scard__media > div:last-of-type { width: 52%; max-width: 230px; }
  .salsas--detail .scard__media > div:last-of-type { width: 94%; max-width: 480px; }
  .scard--mini .scard__media > div:last-of-type { max-width: 320px; }
  .scard--mini .scard__name { font-size: clamp(26px, 7vw, 32px); }

  /* Kit de Regalo — la composición de botes de arriba (KitBotes) es la que
     más espacio vertical ocupa; se achica solo en esta página (no afecta a
     las 5 fichas individuales, que usan FotoProducto directo) para que el
     panel completo (título + cuadraditos + qué incluye + botón) quepa sin
     scroll en mobile/tablet. */
  .kit-detail .detail__back { margin-bottom: 10px; }
  .kit-detail .scard { gap: 8px; }
  .kit-detail .scard__media { padding: 6px 20px; }
  .kit-detail .scard__media > div:last-of-type { width: 68%; max-width: 320px; }

  /* ComoPedir */
  .comopedir__steps { grid-template-columns: 1fr 1fr; }
  .step { padding: 24px; }

  /* Puntos */
  .puntos { padding: 56px 20px; }
  .cityard { grid-template-columns: 160px 1fr; gap: 16px; }

  /* Contacto — ocultar sello en mobile, solo mostrar links */
  .contacto { padding: 0 20px 72px; }
  .contacto__grid { grid-template-columns: 1fr; padding: 28px 24px; gap: 28px; }
  .contacto__card { display: none; }

  /* Footer compacto */
  .footer { padding: 48px 20px 24px; }
  .footer__logo { height: 90px; }
  .footer__top { padding-bottom: 32px; gap: 12px; }
  .footer__cols-row { grid-template-columns: 1fr 1fr; gap: 20px; padding: 32px 0 28px; }
  .footer__base { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* About facts */
  .about__facts { grid-template-columns: 1fr 1fr; }

  /* Checkout */
  .co__body { grid-template-columns: 1fr; overflow-y: auto; }
  .co__summary { border-left: none; border-top: 1px solid var(--line); }

  /* Touch targets — WCAG 2.5.5 */
  .stepper { min-height: 44px; }
  .stepper button { min-width: 44px; min-height: 44px; padding: 0; }
  .iconbtn { min-height: 44px; min-width: 44px; }
  .presbtn { min-height: 44px; }
  .scard__nuttoggle { min-height: 44px; }
  .litem__del { min-height: 44px; min-width: 44px; display: grid; place-items: center; }
}

@media (max-width: 560px) {
  /* Hero */
  .hero { padding: 20px 20px 8px; }
  .hero__logo-img .logo-img { max-width: 335px; }
  .hero__sello-float { display: none; }

  /* Sections padding */
  .about { padding: 56px 16px; }
  .salsas { padding: 16px 16px 56px; }
  .section-head { margin-bottom: 36px; }
  .puntos { padding: 56px 16px; }

  /* About */
  .about__facts { grid-template-columns: 1fr 1fr; }
  .about__grid { gap: 20px; }
  .about__media { max-width: 100%; min-height: 200px; border-radius: 10px; overflow: hidden; }
  .about__media > div:first-child { height: 200px; }
  .about__tag { bottom: 10px; left: 10px; }

  /* Salsas card — media más pequeña */
  .scard__media { padding: 14px 18px; }
  .scard__media > div:last-of-type { max-width: 140px; }
  .salsas--detail .scard__media { padding: 14px 6px; }
  .salsas--detail .scard__media > div:last-of-type { max-width: 340px; }
  .scard--mini .scard__media > div:last-of-type { max-width: 230px; }
  .kit-detail .scard__media { padding: 4px 24px; }
  .kit-detail .scard__media > div:last-of-type { max-width: 240px; }
  /* Salsas card — body más compacto */
  .scard__body { padding: 16px 18px 14px; }
  .scard__index { font-size: 44px; }
  .scard__rule { margin: 12px 0; }
  .scard__buy { margin-bottom: 14px; gap: 12px; }
  .scard__ings { margin-bottom: 10px; gap: 8px; }
  .scard__maridaje { margin-bottom: 12px; gap: 6px; }
  .scard__section { gap: 8px; margin-bottom: 8px; }

  /* Kit de Regalo — menos aire entre cuadraditos y letra más chica para que
     el panel completo quepa sin scroll en pantallas bajas; el tamaño en sí
     lo sigue repartiendo flex:1 (ver regla base), no un ancho fijo. */
  .kit-chips { gap: 8px; margin: 8px 0 2px; }
  .kit-chip { gap: 4px; }
  .kit-chip__thumb { border-radius: 10px; }
  .kit-chip__label { font-size: 8.5px; }

  /* ComoPedir */
  .comopedir { padding: 52px 20px 36px; }
  .comopedir__steps, .cgrid { grid-template-columns: 1fr; }
  .step { padding: 22px 18px; grid-template-columns: 40px 1fr; gap: 12px; }
  .step:nth-child(odd) { border-right: none; }
  .step__n { font-size: 38px; }
  .comopedir__zona { padding: 16px 18px 0; }
  .comopedir__zona-link { margin-left: 0; }

  /* Puntos */
  .cityard { grid-template-columns: 1fr; gap: 10px; padding: 18px 0; }

  /* Contacto */
  .contacto { padding: 0 16px 56px; }
  .contacto__grid { padding: 22px 18px; }

  /* Footer */
  .footer__cols-row { grid-template-columns: 1fr; }

  /* Combo */
  .cgrid--2 { grid-template-columns: 1fr 1fr; }

  /* Misc */
  .flavtag { display: none; }
}

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

/* ====================================================================
   UPGRADES — design-taste-frontend + high-end-visual-design
   ==================================================================== */

/* Spring easing token */
:root { --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Buttons: spring easing + micro-lift + nested icon */
.btn {
  transition:
    transform 200ms var(--ease-spring),
    background 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out),
    color 160ms var(--ease-out);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(191, 54, 12, .6); }
.btn--primary:active { transform: translateY(1px) scale(0.97); box-shadow: none; }
.btn--ghost:hover { transform: translateY(-1px); }
.btn__icon-wrap {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(245, 230, 200,.18);
  display: grid; place-items: center;
  margin-left: 2px; flex-shrink: 0;
  transition: transform 220ms var(--ease-spring), background 160ms var(--ease-out);
}
.btn--primary:hover .btn__icon-wrap { transform: translate(3px, -2px); background: rgba(245, 230, 200,.32); }

/* About section: card treatment */
.about__grid {
  background: var(--paper-card);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  padding: 52px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(245, 230, 200,.9);
  gap: 48px;
}
@media (max-width: 900px) { .about__grid { padding: 28px 24px; border-radius: 18px; } }
@media (max-width: 560px)  { .about__grid { padding: 22px 18px; border-radius: 14px; } }

/* Salsa cards: double-bezel inner highlight + spring lift */
.scard { box-shadow: var(--shadow), inset 0 1px 0 rgba(245, 230, 200,.82); }
@media (hover: hover) and (pointer: fine) {
  .scard:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(245, 230, 200,.82);
    transition: transform .38s var(--ease-spring), box-shadow .38s var(--ease-out);
  }
}

/* ComoPedir: atmospheric radial depth */
.comopedir { overflow: hidden; }
.comopedir::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 12% 52%, rgba(191, 54, 12, .11), transparent 58%),
    radial-gradient(ellipse 38% 55% at 90% 22%, rgba(251, 192, 45, .07), transparent 52%),
    radial-gradient(ellipse 30% 40% at 60% 88%, rgba(191, 54, 12, .06), transparent 48%);
  pointer-events: none;
}

/* Testimonios: floating card + giant decorative quote mark */
.testi {
  background: var(--paper-card);
  border: 1px solid var(--line-2);
  border-radius: 28px;
  padding: 80px 48px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(245, 230, 200,.88);
  overflow: hidden;
}
.testi::before {
  content: '\201C';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 260px;
  line-height: 1;
  color: var(--clay);
  opacity: .055;
  pointer-events: none;
  user-select: none;
  font-weight: 400;
  font-synthesis: none;
}
@media (max-width: 900px) { .testi { padding: 52px 28px; border-radius: 20px; } }
@media (max-width: 560px)  { .testi { padding: 40px 20px; border-radius: 16px; margin: 0 12px; } }

/* Hero halo: más dramático */
.hero__halo {
  background: radial-gradient(ellipse at 50% 52%, rgba(191, 54, 12, .26), rgba(251, 192, 45, .10) 44%, transparent 68%);
}

/* Scroll reveal desactivado (ver arriba) */

/* Contacto: inner shine */
.contacto__grid { box-shadow: var(--shadow), inset 0 1px 0 rgba(245, 230, 200,.88); }

/* Contact links: spring on hover */
@media (hover: hover) and (pointer: fine) {
  .rlink:hover { transition: border-color .22s var(--ease-out), transform .28s var(--ease-spring), box-shadow .22s var(--ease-out); }
}

/* ---- Stripe / PayPal success-cancel banner ---- */
.stripe-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; font-size: 14px; font-weight: 500; font-family: var(--sans);
  box-shadow: 0 4px 20px rgba(78, 52, 46,.12);
  animation: toastIn .3s var(--ease-out);
}
.stripe-banner--ok { background: #2e7d32; color: #f5e6c8; }
.stripe-banner--cancelado { background: #8e1b1b; color: #f5e6c8; }
.stripe-banner span { flex: 1; }
.stripe-banner__close {
  background: rgba(245, 230, 200,.18); border: none; color: inherit;
  width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1;
  cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
  transition: background .15s;
}
.stripe-banner__close:hover { background: rgba(245, 230, 200,.32); }

/* ---- Métodos de pago (checkout step 2) ---- */
.co__pay-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.co__pay-method {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper-card); border: 1.5px solid var(--line-2);
  border-radius: 12px; padding: 14px 16px; width: 100%; text-align: left;
  cursor: pointer; transition: border-color .18s, box-shadow .18s, background .18s;
  position: relative;
}
.co__pay-method:hover:not([disabled]) { border-color: var(--clay); background: color-mix(in srgb, var(--clay) 4%, var(--paper-card)); }
.co__pay-method.is-on { border-color: var(--clay); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 14%, transparent); background: color-mix(in srgb, var(--clay) 5%, var(--paper-card)); }
.co__pay-method.is-soon { opacity: .55; cursor: not-allowed; }
.co__pay-icon {
  width: 40px; height: 40px; border-radius: 10px; background: var(--paper-2);
  border: 1px solid var(--line); display: grid; place-items: center;
  font-size: 18px; flex-shrink: 0; color: var(--clay);
}
.co__pay-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.co__pay-text strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.co__pay-text span { font-size: 12.5px; color: var(--ink-3); }
.co__pay-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; background: var(--paper-2); color: var(--ink-3);
  border: 1px solid var(--line-2); padding: 3px 8px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.co__pay-brands { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.co__pay-brands svg { border-radius: 3px; box-shadow: 0 1px 3px rgba(78, 52, 46,.15); flex-shrink: 0; }
.co__paypal-btn { margin-top: 4px; min-height: 48px; }
.co__pay-loading { font-size: 13.5px; color: var(--ink-3); margin: 8px 0 0; text-align: center; }
.co__pay-error { font-size: 13px; color: var(--error); background: var(--error-bg); border: 1px solid color-mix(in srgb, var(--error) 22%, transparent); border-radius: 8px; padding: 10px 14px; margin: 8px 0 0; }
.co__pay-note { font-size: 13.5px; color: var(--ink-3); margin: 0 0 16px; line-height: 1.6; }
.co__pay-note a { color: var(--clay); text-decoration: none; font-weight: 600; }
.co__pay-note a:hover { text-decoration: underline; }