/* ============================================================================
   FEASTABLES COLOMBIA — DESIGN SYSTEM v1.0
   Arquitectura: Neo-Brutalism | Vanilla CSS | Zero-weight effects
   Fuente de verdad: feastables_design_system.md
   ============================================================================ */

/* ── 1. TIPOGRAFÍA: Kanit autohospedada (antes @import a Google Fonts) ── */
/* Kanit autohospedada — generado desde Google Fonts CSS2 API, subsets latin + latin-ext
   (sitio en español, no hace falta thai/vietnamita/cirílico/griego/etc. que Google
   manda por defecto). AUDITORIA-Y-PLAN.md §39/§3i,§3j. */

@font-face {
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/kanit-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/kanit-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/kanit-700-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/kanit-700-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/kanit-900-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/kanit-900-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/kanit-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/kanit-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/kanit-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/kanit-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/kanit-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/kanit-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/kanit-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/kanit-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/kanit-800-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/kanit-800-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/kanit-900-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/kanit-900-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ── 2. RESET MODERNO ───────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* El header es sticky y mide 78px (§10), así que el salto NATIVO del
     navegador a un ancla (`/#combos` escrito en la barra de direcciones, o
     llegando desde otra página) dejaba el borde superior de la sección
     tapado debajo del header. main.js solo compensaba los enlaces que
     empiezan por `#` — es decir los de la MISMA página — y nunca los
     `/#combos` del menú, que son una navegación completa.
     scroll-padding-top lo resuelve para todos los casos sin JS. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

a:hover,
button:hover,
[role="button"]:hover {
  cursor: url('/assets/images/ui/cursor-glove.png') 10 10, pointer;
}

ul,
ol {
  list-style: none;
}

/* ── 3. DESIGN TOKENS — COLORES ─────────────────────────────────────────────── */
:root {
  /* Colores Principales (Brand) */
  --color-feast-blue: #61d8ff;
  /* Azul celeste claro oficial de la captura */
  --color-feast-pink: #f213a4;
  /* Rosa chicle / Magenta */
  --color-feast-yellow: #ffea00;
  /* Amarillo eléctrico */
  --color-feast-purple: #5c248b;
  /* Morado oficial de Feastables (de la imagen) */

  /* Neutros y Contraste */
  --color-black: #000000;
  /* Negro puro para bordes y sombras */
  --color-white: #ffffff;
  /* Blanco puro */
  --color-cream: #F2EBE0;
  /* Crema cálido vintage oficial Feastables para fondos */

  /* Semáforo de estados */
  --color-success: #22c55e;
  --color-error: #ef4444;
  --color-warning: #f59e0b;

  /* Grosor de Trazos Neo-Brutalism */
  --border-thick: 4px solid var(--color-black);
  --border-thin: 2px solid var(--color-black);
  --border-ultra: 6px solid var(--color-black);

  /* Sombras Duras (sin desenfoque) */
  --shadow-sm: 4px 4px 0px var(--color-black);
  --shadow-md: 6px 6px 0px var(--color-black);
  --shadow-lg: 8px 8px 0px var(--color-black);
  --shadow-xl: 12px 12px 0px var(--color-black);
}

/* ── 4. DESIGN TOKENS — TIPOGRAFÍA ─────────────────────────────────────────── */
:root {
  --font-display: 'Kanit', system-ui, sans-serif;
  --font-body: 'Kanit', system-ui, sans-serif;
  /* Usada 12 veces en este archivo pero nunca definida (AUDITORIA-Y-PLAN.md
     §39/§3i) — el texto se veía bien de casualidad porque font-family sin
     valor válido hereda del padre, y el padre ya es Kanit vía --font-body.
     feastables_design_system.md solo define Display y Body, ambos Kanit, así
     que --font-heading es un alias del mismo valor (no una fuente distinta
     inventada) — si el diseño pide una tipografía de titulares diferente
     algún día, cambia en un solo lugar. */
  --font-heading: var(--font-display);

  /* Escala tipográfica (fluid) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: clamp(2.5rem, 8vw, 5rem);
  --text-hero: clamp(3rem, 12vw, 7.5rem);
}

/* ── 5. DESIGN TOKENS — ESPACIADO ───────────────────────────────────────────── */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
}

/* ── 6. DESIGN TOKENS — LAYOUT ──────────────────────────────────────────────── */
:root {
  --container-max: 1280px;
  --container-pad: clamp(1rem, 5vw, 2rem);
  /* Alto del header sticky. Vive acá porque además del propio `.site-header`
     lo necesitan el scroll-padding-top del html y el offset que calcula
     main.js al saltar a un ancla. Un solo número que cambiar. */
  --header-h: 78px;
  --z-topbar: 100;
  --z-header: 200;
  --z-overlay: 99990;
  --z-cart: 100000;
  --z-modal: 110000;
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.25s ease-in-out;
}

/* ── 7. ESTILOS BASE ────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  background-color: var(--color-cream);
  background-image: url('/assets/images/PaperTextureBg.jpg');
  background-repeat: repeat;
  background-size: auto;
  color: var(--color-black);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.price-tag {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.1;
  /* Los titulares van en Kanit 900 mayúsculas: nombres como "MUG MÁGICO BEAST
     ICONIC BLACK" o "PEANUT-BUTTER" generan palabras más anchas que la tarjeta
     en móvil y se salían de su caja (medido: 158px de texto en 146px de
     columna). break-word solo corta cuando la palabra NO cabe de ninguna
     forma, así que no afecta a los titulares que ya entran. */
  overflow-wrap: break-word;
}

p,
span,
.description {
  font-family: var(--font-body);
}

/* ── 8. CONTENEDOR GLOBAL ───────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--fullwidth {
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: 25px !important;
  margin-inline: 0 !important;
}

/* ── 9. TOP BAR (Marquee de Promociones) ────────────────────────────────────── */
/* Referencia: Design System §6, Regla 1 */
.topbar {
  background-color: var(--color-feast-purple);
  color: var(--color-white);
  border-bottom: none;
  overflow: hidden;
  padding-block: var(--space-2);
  position: relative;
  z-index: var(--z-topbar);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.topbar__item {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  padding-inline: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* El aviso mide 395px con nowrap + 2rem de padding a cada lado: a 375px se
   salía 10px por cada borde y .topbar (overflow:hidden) cortaba las palabras
   de los extremos — "ENVÍOS" y "COMBOS" aparecían mochos. Con 12px y padding
   reducido entra en una línea hasta ~365px de ancho. */
@media (max-width: 640px) {
  .topbar__item {
    padding-inline: var(--space-3);
    font-size: var(--text-xs);
    gap: var(--space-2);
  }
}

/* Por debajo de ~365px ya no cabe en una línea. Se deja ENVOLVER en dos
   renglones en vez de seguir bajando el cuerpo de letra: a 0.68rem quedaba en
   10.9px, por debajo del mínimo legible en un teléfono, y el mensaje
   ("envíos gratis desde $150.000") es justo el gancho que no conviene que
   nadie tenga que entrecerrar los ojos para leer. */
@media (max-width: 400px) {
  .topbar {
    padding-block: var(--space-1);
  }

  .topbar__item {
    white-space: normal;
    text-align: center;
    padding-inline: var(--space-2);
    line-height: 1.25;
  }
}

/* ── 10. HEADER / NAVEGACIÓN ────────────────────────────────────────────────── */
.site-header {
  background-color: var(--color-feast-blue);
  border-bottom: var(--border-thick);
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* Antes: 50px fijos en todos los anchos. A 375px eso deja 275px útiles para
     logo (165px) + carrito (69px) + hamburguesa (44px) + gaps ≈ 290px, así que
     el botón de menú quedaba CORTADO fuera del viewport: el único acceso a la
     navegación en móvil era literalmente inalcanzable. Con clamp el gutter se
     encoge con la pantalla y conserva los 50px del diseño en desktop. */
  padding-inline: clamp(12px, 3.5vw, 50px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding-block: 0;
  gap: var(--space-10);
  width: 100%;
  max-width: none;
  /* Full Width */
  padding-inline: 0;
}

.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
}

.site-logo img {
  height: 68px;
  /* Logo más grande, proporcional a los 78px de altura */
  width: auto;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-nav__link {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  /* Negrita Kanit 700 */
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0.8px;
  /* Un poco de separación entre letras */
  color: var(--color-black);
  padding: 0 var(--space-1);
  -webkit-text-stroke: 0.5px var(--color-black);
  transition: all var(--transition-fast);
}

.site-nav__link:hover {
  -webkit-text-stroke: 0.8px var(--color-black);
  transform: scale(1.02);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-shrink: 0;
}

/* ── 10.1 HEADER EN MÓVIL ───────────────────────────────────────────────────
   El header es una fila de 3 piezas de ancho fijo (logo 165px + carrito 69px +
   hamburguesa 44px) que sumaban más que el viewport. Además del gutter (§10),
   acá se reduce cada pieza para que quepan las tres con aire, sin bajar de los
   44px de área táctil que pide WCAG 2.5.5 en los dos botones. */
@media (max-width: 768px) {
  .site-header__inner {
    /* var(--space-10) = 2.5rem entre logo y nav: en móvil la nav está oculta,
       así que ese hueco solo empujaba las acciones contra el borde. */
    gap: var(--space-3);
  }

  .site-logo img {
    height: 50px;
  }

  /* El carrito es un SVG de 52×57 dentro de un botón de 69px: se baja el botón
     a 48px (sigue por encima del mínimo táctil) y el ícono en proporción. */
  #cart-toggle-btn {
    width: 48px;
    height: 48px;
  }

  .cart-bag-icon {
    width: 40px;
    height: 44px;
  }
}

@media (max-width: 380px) {
  .site-logo img {
    height: 42px;
  }

  .header-actions {
    gap: var(--space-2);
  }
}

/* ── 10.2 MENÚ MÓVIL (panel desplegable) ────────────────────────────────────
   .mobile-nav NO tenía ninguna regla CSS en toda la hoja: el <nav> del
   hamburguesa caía a display:block sin fondo, sin borde y sin z-index, así que
   al abrirlo los 5 enlaces quedaban sueltos sobre el celeste del header,
   pisando el contenido de la página y sin límite visible. Se le da la caja
   neo-brutalista del sistema y se ancla debajo del header sticky. */
.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-feast-blue);
  border-bottom: var(--border-thick);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.15);
  z-index: 999;
  /* El header mide 78px y la topbar ~38px: el panel nunca debe tapar toda la
     pantalla en horizontal, así que scrollea si los enlaces no caben. */
  max-height: calc(100dvh - var(--header-h) - 40px);
  overflow-y: auto;
}

.mobile-nav .site-nav__link {
  /* Los enlaces heredan el estilo de la nav de desktop (20px, itálica); acá
     necesitan además ser filas táctiles completas, no texto suelto. */
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
}

.mobile-nav .site-nav__link:last-child {
  border-bottom: none;
}

.mobile-nav .site-nav__link:hover,
.mobile-nav .site-nav__link:focus-visible {
  background-color: var(--color-feast-yellow);
  transform: none;
}

/* El menú es exclusivo de móvil/tablet: si se abre y el visitante gira el
   dispositivo o agranda la ventana hasta el layout de desktop, la nav normal
   reaparece y el panel quedaría duplicado encima. El corte coincide con el de
   #mobile-menu-btn y .site-nav (1023px). */
@media (min-width: 1024px) {
  .mobile-nav {
    display: none !important;
  }
}

/* ── 11. BOTONES — NEO-BRUTALISM ────────────────────────────────────────────── */
/* Referencia: Design System §3.1 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-md);
  border: var(--border-thick);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── 11.1 BOTONES EN MÓVIL ──────────────────────────────────────────────────
   `white-space: nowrap` + padding de var(--space-8) (32px por lado) deja a
   TODO botón con un ancho mínimo igual al largo de su etiqueta: no puede
   encogerse nunca. Eso fue la causa de tres desbordamientos distintos —
   los CTA del hero (398px), la navegación del checkout (349px) y
   "Temporalmente Agotado" en la ficha de producto (312px en una columna de
   288px). En vez de parchear cada caso, en móvil las etiquetas envuelven: es
   la única forma de que un botón quepa en 320px sin recortar el texto. */
@media (max-width: 640px) {
  .btn {
    white-space: normal;
    padding-inline: var(--space-5);
    max-width: 100%;
    text-align: center;
    line-height: 1.25;
  }
}

/* Botón Primario — Amarillo Eléctrico */
.btn-primary {
  background-color: var(--color-feast-yellow);
  color: var(--color-black);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  transform: translate(3px, 3px);
  box-shadow: var(--shadow-sm);
}

.btn-primary:active {
  transform: translate(6px, 6px);
  box-shadow: 0px 0px 0px var(--color-black);
}

/* Botón Secundario — Rosa Magenta */
.btn-secondary {
  background-color: var(--color-feast-pink);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.btn-secondary:hover {
  transform: translate(3px, 3px);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:active {
  transform: translate(6px, 6px);
  box-shadow: 0px 0px 0px var(--color-black);
}

/* Botón Ghost — Transparente */
.btn-ghost {
  background-color: transparent;
  color: var(--color-black);
  box-shadow: var(--shadow-sm);
}

.btn-ghost:hover {
  background-color: var(--color-black);
  color: var(--color-white);
  transform: translate(2px, 2px);
  box-shadow: 0px 0px 0px var(--color-black);
}

/* Botón Icono (genérico para menús, botones de cantidad, etc.) */
.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: var(--text-xl);
  border-radius: var(--radius-md);
  border: var(--border-thin);
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background-color: var(--color-feast-yellow);
  transform: translate(2px, 2px);
  box-shadow: 0px 0px 0px var(--color-black);
}

/* Antes: style="display: none;" en el HTML + main.js lo cambiaba a "flex"
   después de DOMContentLoaded SOLO si window.innerWidth <= 768 — el botón
   quedaba invisible hasta que el JS corriera, un salto visible justo en el
   dispositivo donde más importa (AUDITORIA-Y-PLAN.md §40/§6, "Mobile-First
   zona del pulgar"). Con media query el navegador decide en el primer
   pintado, sin esperar JS ni recalcular en el evento resize. */
/* El corte es 1023px, no 768px: medido, el header necesita 970px como mínimo
   para la nav de desktop (logo 165 + nav 593 + carrito 69 + 2 gaps de 40 +
   gutters). Entre 769px y 970px la nav reaparecía y el header desbordaba 70px
   — justo el rango de una tablet en horizontal. Las 5 etiquetas en español
   ("Combos de regalo", "Juguetes") son largas; recortarlas para que quepan
   apretadas se ve peor que dejar el hamburguesa hasta la tablet grande. */
#mobile-menu-btn {
  display: none;
}
@media (max-width: 1023px) {
  #mobile-menu-btn {
    display: flex;
  }
}

/* Botón Carrito Específico (Sin recuadro, transparente, solo el icono) */
#cart-toggle-btn {
  background-color: transparent;
  border: none;
  box-shadow: none;
  width: 69px;
  height: 69px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  /* Para que el ripple de box-shadow sea circular */
  transition: transform var(--transition-base);
}

#cart-toggle-btn:hover {
  background-color: transparent;
  transform: scale(1.05);
  /* Sutil escala en hover */
  box-shadow: none;
}

/* Ícono de bolsa de compras SVG */
.cart-bag-icon {
  width: 52px;
  height: 57px;
  color: var(--color-black);
  display: block;
  transition: transform var(--transition-base);
}

/* Capa de la sombra (detrás): invisible y en su posición por defecto */
.cart-bag-shadow {
  opacity: 0;
  transform: translate(0, 0);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

#cart-toggle-btn:hover .cart-bag-shadow {
  opacity: 1;
  transform: translate(4px, 4px);
  /* Desplazamiento de la sombra */
}

/* Cuerpo de la bolsa de compras (frente): con fondo azul del header */
.cart-bag-body {
  fill: var(--color-feast-blue);
}

/* Número dentro de la bolsa SVG */
.cart-bag-number {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  fill: currentColor;
}

/* Screen-reader only */
.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;
}

/* ── Animación carrito: cart-bounce ─────────────────────────────────────── */
@keyframes cart-shake-scale {
  0% {
    transform: scale(1) rotate(0deg);
  }

  10% {
    transform: scale(1.25) rotate(-8deg);
  }

  20% {
    transform: scale(1.3) rotate(8deg);
  }

  30% {
    transform: scale(1.25) rotate(-6deg);
  }

  40% {
    transform: scale(1.2) rotate(5deg);
  }

  50% {
    transform: scale(1.15) rotate(-3deg);
  }

  60% {
    transform: scale(1.1) rotate(2deg);
  }

  75% {
    transform: scale(1.05) rotate(-1deg);
  }

  90% {
    transform: scale(1.02) rotate(0.5deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes cart-ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 45, 146, 0.7), var(--shadow-sm);
  }

  40% {
    box-shadow: 0 0 0 10px rgba(255, 45, 146, 0), var(--shadow-sm);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 45, 146, 0), var(--shadow-sm);
  }
}

.cart-bounce {
  animation:
    cart-shake-scale 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both,
    cart-ripple 0.7s ease-out both;
}

.cart-bounce .cart-bag-icon {
  animation: cart-shake-scale 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Estado: Deshabilitado */
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── 12. TARJETAS DE PRODUCTO ───────────────────────────────────────────────── */
/* Referencia: Design System §3.2 */
.product-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  border: var(--border-thick);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.product-card__image-wrapper {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: var(--border-thick);
  background-color: var(--color-feast-blue);
  position: relative;
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.product-card:hover .product-card__image {
  transform: scale(1.05);
}

.product-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background-color: var(--color-feast-yellow);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border: var(--border-thin);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
  z-index: 1;
}

.product-card__badge--new {
  background-color: var(--color-feast-pink);
  color: var(--color-white);
}

.product-card__badge--hot {
  background-color: var(--color-feast-yellow);
  color: var(--color-black);
}

.product-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.product-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
}

/* Nombre + precio en la misma fila (tarjetas de combo). flex-wrap es lo que
   evita que el precio se salga de la tarjeta: cuando los dos no caben, el
   precio baja a la línea siguiente en vez de desbordar. */
.product-card__name--row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.product-card__name--row .price-tag {
  font-size: var(--text-lg);
  white-space: nowrap;
}

.product-card__desc {
  font-size: var(--text-sm);
  opacity: 0.75;
  line-height: 1.5;
}

.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-top: var(--border-thin);
  background-color: var(--color-cream);
  gap: var(--space-3);
  flex-wrap: wrap;
}

.price-tag {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-black);
}

/* ── 12.1 TARJETAS DE MERCH (DISEÑO NEO-BRUTALISTA CON OLA SVG Y SIN FONDO AZUL) ── */
.product-card--merch {
  background-color: #FFFFFF;
  border: 3.5px solid var(--color-black, #000000);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 4px 4px 0px var(--color-black, #000000);
  transition: transform var(--transition-base, 0.2s ease), box-shadow var(--transition-base, 0.2s ease);
  display: flex;
  flex-direction: column;
  position: relative;
}

.product-card--merch:hover {
  transform: translateY(-6px);
  box-shadow: 6px 8px 0px var(--color-black, #000000);
}

.product-card--merch .product-card__image-wrapper {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: none;
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
  width: 100%;
}

.product-card--merch .product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center;
  display: block;
  transition: opacity 0.35s ease, transform 0.4s ease;
}

.product-card--merch .product-card__image--primary {
  position: relative;
  z-index: 1;
  opacity: 1;
}

.product-card--merch .product-card__image--hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.product-card--merch:hover .product-card__image--primary {
  transform: scale(1.05);
}

.product-card--merch:hover .product-card__image-wrapper:has(.product-card__image--hover) .product-card__image--primary {
  opacity: 0;
}

.product-card--merch:hover .product-card__image--hover {
  opacity: 1;
  transform: scale(1.05);
}

.product-card__wave-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 34px;
  pointer-events: none;
  z-index: 2;
  line-height: 0;
}

.product-card__wave-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

.product-card--merch .product-card__body {
  padding: 0.15rem 1.25rem 0.5rem 1.25rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
  z-index: 3;
}

.product-card--merch .product-card__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-black, #000000);
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.01em;
}

.product-card--merch .product-card__sizes {
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}

.product-card--merch .product-card__sizes-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
}

.product-card--merch .product-card__sizes-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-black, #000000);
  letter-spacing: 0.03em;
}

/* Botón/ícono de información ℹ️ */
.size-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-feast-blue, #50D2FE);
  border: 1.5px solid #000000;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  color: #000000;
  cursor: pointer;
  box-shadow: 1px 1px 0px #000000;
  transition: transform 0.15s ease, background-color 0.15s ease;
  user-select: none;
}

.size-info-btn:hover {
  transform: scale(1.1);
  background-color: var(--color-feast-yellow, #FFDF00);
}

/* Igual que .feast-dot: el círculo de 20px se ve bien al lado de "TALLA:" pero
   es demasiado chico para el pulgar. Se amplía sólo el área de toque. */
.size-info-btn {
  position: relative;
}

.size-info-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
}

/* Tooltip / Modal de Guía de Tallas */
.size-guide-tooltip {
  position: absolute;
  bottom: 125%;
  left: 0;
  width: 260px;
  background-color: #FFFFFF;
  border: 2.5px solid #000000;
  border-radius: 12px;
  padding: 0.85rem;
  box-shadow: 4px 4px 0px #000000;
  z-index: 100;
  font-size: 0.78rem;
  color: #000000;
  pointer-events: auto;
  animation: fadeInTooltip 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.size-guide-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 24px;
  border-width: 8px 8px 0 8px;
  border-style: solid;
  border-color: #000000 transparent transparent transparent;
}

.size-guide-tooltip__title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border-bottom: 1.5px solid #000000;
  padding-bottom: 0.3rem;
}

.size-guide-tooltip__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.size-guide-tooltip__list li {
  font-weight: 700;
  line-height: 1.35;
}

@keyframes fadeInTooltip {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Select Desplegable Neo-Brutalista */
.product-card__size-select {
  width: 100%;
  padding: 0.55rem 2.2rem 0.55rem 0.85rem;
  border: 2.5px solid #000000;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 14px;
  color: #000000;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 2px 2px 0px #000000;
  transition: all 0.15s ease;
}

.product-card__size-select:focus {
  outline: none;
  border-color: var(--color-feast-blue, #50D2FE);
  box-shadow: 3px 3px 0px #000000;
}

.product-card--merch .product-card__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.25rem 1.25rem 1.25rem 1.25rem;
  border-top: none;
  background-color: #FFFFFF;
  gap: 0.5rem;
  z-index: 3;
  width: 100%;
}

.product-card--merch .price-tag {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--color-black, #000000);
  margin-bottom: 0.2rem;
}

/* Botón Añadir/Agregar (Morado #7B288A, letra blanca, centrado) */
.btn-add-merch {
  width: 100% !important;
  background-color: #7B288A !important;
  color: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  border-radius: 12px !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 3px 3px 0px #000000 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-add-merch:hover {
  background-color: #621D70 !important;
  transform: translateY(-2px) !important;
  box-shadow: 4px 5px 0px #000000 !important;
}

.btn-add-merch:active {
  transform: translateY(0) !important;
  box-shadow: 1px 1px 0px #000000 !important;
}

/* Botón Más detalles */
.btn-details-merch {
  display: inline-block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 0.35rem 0 !important;
  font-family: var(--font-display) !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #000000 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transition: color 0.15s ease, opacity 0.15s ease !important;
  cursor: pointer !important;
}

.btn-details-merch:hover {
  color: #7B288A !important;
  opacity: 0.85 !important;
}

/* ── GRID DE 4 COLUMNAS EN FULLWIDTH (DISTRIBUCIÓN AMPLIA Y TARJETAS MÁS GRANDES) ── */
@media (min-width: 1024px) {
  .container--fullwidth .products-grid,
  #ropa-grid-items {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.75rem !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .container--fullwidth .products-grid,
  #ropa-grid-items {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
}

/* ── 13. EFECTOS VISUALES CERO-PESO ─────────────────────────────────────────── */

/* 13.1 — Patrón Halftone (puntitos estilo cómic) */
/* Referencia: Design System §4.1 */
.bg-halftone-blue {
  background-color: var(--color-feast-blue);
  background-image: radial-gradient(var(--color-black) 10%, transparent 11%);
  background-size: 20px 20px;
}

.bg-halftone-yellow {
  background-color: var(--color-feast-yellow);
  background-image: radial-gradient(var(--color-black) 10%, transparent 11%);
  background-size: 20px 20px;
}

.bg-halftone-pink {
  background-color: var(--color-feast-pink);
  background-image: radial-gradient(rgba(0, 0, 0, 0.2) 10%, transparent 11%);
  background-size: 16px 16px;
}

/* 13.2 — Fondo tipográfico repetido (estilo Feastables USA) */
/* Referencia: Design System §6, Regla 4 */
.bg-text-pattern {
  background-color: var(--color-feast-pink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100'%3E%3Ctext x='0' y='80' font-family='Arial Black, sans-serif' font-weight='900' font-size='60' fill='rgba(255,255,255,0.08)' text-anchor='start'%3EWANT FEASTABLES WANT FEASTABLES%3C/text%3E%3C/svg%3E");
  background-size: 700px 120px;
  background-repeat: repeat;
}

/* 13.3 — Divisor ondulado */
/* Referencia: Design System §4.2 */
.wave-divider {
  width: 100%;
  height: 60px;
  overflow: hidden;
  position: relative;
}

.wave-divider svg {
  width: 100%;
  height: 100%;
}

/* 13.4 — Text Outline (Feastables USA style) */
/* Referencia: Design System §6, Regla 2 */
.text-outline {
  -webkit-text-stroke: 3px var(--color-black);
  color: transparent;
}

.text-outline-white {
  -webkit-text-stroke: 3px var(--color-white);
  color: transparent;
}

.text-stroke-yellow {
  -webkit-text-stroke: 2px var(--color-black);
  color: var(--color-feast-yellow);
}

/* ── 13.5 Banner SEO H1 — Feastables Colombia ───────────────────────────── */
.brand-seo-banner {
  padding: 40px 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand-seo-banner__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 4.8rem);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.1;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  
  /* Bandera de Colombia (50% Amarillo, 25% Azul, 25% Rojo) */
  background-image: linear-gradient(
    to bottom,
    #FFD100 0%,
    #FFD100 50%,
    #003087 50%,
    #003087 75%,
    #CE1126 75%,
    #CE1126 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  /* Delineado gris (Outline) alrededor de las letras */
  filter: drop-shadow(1.5px 0px 0px #666666) 
          drop-shadow(-1.5px 0px 0px #666666) 
          drop-shadow(0px 1.5px 0px #666666) 
          drop-shadow(0px -1.5px 0px #666666);
}

/* Efecto de brillo continuo sobre el texto */
.brand-seo-banner__title::after {
  content: "FEASTABLES COLOMBIA";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    110deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: flag-text-shine 3.5s infinite;
  pointer-events: none;
}

@keyframes flag-text-shine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ── 14. SECCIÓN HERO ────────────────────────────────────────────────────────── */
.hero {
  min-height: 90vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: var(--border-ultra);
  overflow: hidden;
  position: relative;
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--container-pad);
  padding-right: var(--space-8);
  z-index: 1;
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 2px;
  background-color: var(--color-feast-yellow);
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  border: var(--border-thin);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
  width: fit-content;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -1px;
}

.hero__title em {
  font-style: normal;
  color: var(--color-feast-pink);
  display: block;
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  max-width: 45ch;
  line-height: 1.5;
}

.hero__cta-group {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero__media {
  position: relative;
  border-left: var(--border-ultra);
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 15. SECCIÓN SPLIT-SCREEN (Feastables vs Them) ─────────────────────────── */
/* Referencia: Design System §6, Regla 3 */
.split-screen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-block: var(--border-ultra);
  min-height: 500px;
}

.split-screen__panel {
  padding: var(--space-16) var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
}

.split-screen__panel--feast {
  background-color: var(--color-feast-blue);
}

.split-screen__panel--them {
  background-color: var(--color-cream);
  border-left: var(--border-ultra);
}

.split-screen__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 3px;
  opacity: 0.6;
}

.split-screen__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  text-transform: uppercase;
  line-height: 1;
}

.ingredient-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ingredient-list__item {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-white);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.ingredient-list--them .ingredient-list__item {
  background-color: rgba(0, 0, 0, 0.05);
  text-decoration: line-through;
  opacity: 0.6;
}

/* ── 16. SECCIÓN DE PRODUCTOS (Grid) ────────────────────────────────────────── */
.section-productos {
  padding-block: clamp(5rem, 8vw, 7rem) 5rem;
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  margin-bottom: 4rem;
}

.section-header__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-feast-pink);
}

.section-header__title {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  text-transform: uppercase;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-8);
}

.section-combos-bg {
  background-image: url('/assets/images/fondo-combos.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0f0b1c;
  position: relative;
  /* Dark overlay to ensure contrast */
  z-index: 0;
  padding-block: calc(var(--space-20) + 60px);
}

.section-combos-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4); /* Medium opacity for balance */
  z-index: -1;
}

.section-combos-bg .container {
  position: relative;
  z-index: 1;
}

.section-combos-bg .section-header {
  margin-bottom: var(--space-4);
}

.section-combos-bg .feast-carousel__track {
  padding-top: 60px;
}

.section-combos-bg .section-header__desc {
  color: var(--color-white);
}

/* ── BANNER DESTACADO DE AVISO DE COMBOS ── */
.combos-notice-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 720px;
  margin: 2.8rem auto 0 auto;
  padding: 1.1rem 1.8rem;
  background-color: #FFFFFF; /* Fondo blanco */
  color: #000000;
  border: 3.5px solid #000000;
  border-radius: 16px;
  box-shadow: 5px 5px 0px #000000;
  text-align: left;
}

.combos-notice-banner__icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.combos-notice-banner__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.98rem;
  line-height: 1.45;
  color: #000000;
}

.combos-notice-banner__text strong {
  font-family: var(--font-heading), 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.1px;
}

.combos-notice-banner__text span {
  font-weight: 700;
  color: #222222;
}

@media (max-width: 640px) {
  .combos-notice-banner {
    flex-direction: column;
    text-align: center;
    padding: 1rem 1.2rem;
  }
}

/* ── Título COMBOS DE REGALO: estilo "A FLAVOR FOR EVERY CRAVING" ── */
.section-combos-bg .section-header__title {
  color: #ffffff;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.4rem, 8vw, 5.8rem);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -1px;
  -webkit-text-stroke: 3px #000000;
  text-shadow:
    3px 3px 0 #000,
    6px 6px 0 #000,
    9px 9px 0 #000;
  paint-order: stroke fill;
}

/* La sombra de 3 capas (3/6/9px) y el trazo de 3px están calibrados para los
   5.8rem del título en desktop. A 2.4rem (el piso del clamp, que es lo que se
   ve en móvil) esas mismas medidas son proporcionalmente el triple: el título
   se leía como un borrón con un fantasma detrás. Se escalan con el cuerpo. */
@media (max-width: 640px) {
  .section-combos-bg .section-header__title {
    -webkit-text-stroke: 2px #000000;
    text-shadow:
      2px 2px 0 #000,
      4px 4px 0 #000;
  }
}

/* For contrast the cards could have some subtle styling but they are probably white inside */
.section-combos-bg .product-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
}

/* ── TAMAÑO DE TARJETAS EN CARRUSEL DE COMBOS ───────────────────────────────── */
.feast-carousel__track .product-card {
  /* 4 tarjetas exactas en desktop: gap es 16px, así que (16px * 3 gaps) / 4 = 12px */
  flex: 0 0 calc(25% - 12px);
  scroll-snap-align: start;
}

@media (max-width: 1200px) {
  .feast-carousel__track .product-card {
    /* 3 tarjetas: (16px * 2) / 3 = 10.66px */
    flex: 0 0 calc(33.333% - 10.66px);
  }
}

@media (max-width: 1024px) {
  .feast-carousel__track .product-card {
    /* 2 tarjetas: 16px / 2 = 8px */
    flex: 0 0 calc(50% - 8px);
  }
}

@media (max-width: 640px) {
  .feast-carousel__track .product-card {
    flex: 0 0 85%;
  }
}

/* ── 17. BÚNKER SEO (Estructura Elegante con Textura y Sombra Neo-Brutalista) ──────── */
.bunker-seo {
  padding-block: 4.5rem 4rem;
  border-top: 3.5px solid #000000;
  background-color: var(--color-cream);
  background-image: 
    linear-gradient(135deg, rgba(255, 242, 0, 0.07) 0%, rgba(56, 197, 246, 0.07) 50%, rgba(255, 42, 133, 0.07) 100%),
    url('/assets/images/PaperTextureBg.jpg');
  background-repeat: repeat;
  background-size: cover, auto;
  position: relative;
}

.bunker-seo .container {
  max-width: 960px;
}

.bunker-seo__grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.bunker-seo__card {
  background: #FFFFFF;
  border: 3.5px solid #000000;
  border-radius: 18px;
  padding: 2.5rem 2.2rem;
  box-shadow: 5px 5px 0px #000000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bunker-seo__card:hover {
  transform: translateY(-3px);
  box-shadow: 7px 7px 0px #000000;
}

.bunker-seo__badge {
  font-family: var(--font-heading), 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  background: #FFF200;
  color: #000000;
  padding: 0.25rem 0.65rem;
  border: 1.5px solid #000000;
  border-radius: 20px;
  margin-bottom: 1rem;
}

.bunker-seo__badge--pink {
  background: #FF2A85;
  color: #FFFFFF;
}

.bunker-seo h2 {
  font-family: var(--font-heading), 'Outfit', sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  color: #492425;
  margin-bottom: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.3;
}

.bunker-seo p {
  font-family: var(--font-body), sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #492425;
  margin-bottom: 1.25rem;
}

.bunker-seo__cities-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
}

.bunker-seo__city-tag {
  font-family: var(--font-body), sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: #492425;
  background: #F4F4F5;
  border: 1.5px solid #E4E4E7;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
}

.bunker-seo__delivery-info {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 2px dashed #E4E4E7;
  font-family: var(--font-body), sans-serif;
  font-size: 0.84rem;
  font-weight: 800;
  color: #492425;
  line-height: 1.5;
}

/* ── FAQ HERO BANNER (Estilo Feastables Oficial) ─────────────────────────────────── */
.faq-banner-section {
  padding-block: 4rem 3rem;
  background-color: var(--color-cream);
}

.faq-hero-banner {
  position: relative;
  width: 100%;
  padding: 3.5rem 1.5rem 3rem 1.5rem;
  background: #38C5F6;
  background-image: 
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(255, 255, 255, 0.16) 0deg 12deg,
      transparent 12deg 24deg
    );
  border: 4px solid #000000;
  border-radius: 20px;
  box-shadow: 0px 6px 0px #000000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 2.5rem;
}

.faq-hero-banner__content {
  position: relative;
  z-index: 2;
}

.faq-hero-banner__title {
  font-family: var(--font-heading), 'Outfit', 'Inter', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  padding: 0;
  text-shadow: 
    3.5px 3.5px 0px #043659,
    -2px -2px 0px #043659,
    2px -2px 0px #043659,
    -2px 2px 0px #043659,
    0px 5px 0px #043659,
    5px 7px 0px rgba(0,0,0,0.35);
  -webkit-text-stroke: 1.5px #043659;
  paint-order: stroke fill;
}

.faq-hero-banner__subtitle {
  font-family: var(--font-body), sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 800;
  color: #043659;
  margin-top: 0.75rem;
  letter-spacing: -0.2px;
}

/* Nubes y Globos flotantes */
.faq-hero-banner__deco {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.faq-hero-banner__deco--left {
  top: 15px;
  left: 20px;
}

.faq-hero-banner__deco--right {
  top: 15px;
  right: 25px;
}

.faq-hero-banner__deco--bottom-right {
  bottom: 12px;
  right: 45px;
}

.faq-hot-balloon {
  font-size: 1.8rem;
  filter: drop-shadow(1px 2px 0px rgba(0,0,0,0.4));
  animation: floatBalloon 3s ease-in-out infinite alternate;
}

@keyframes floatBalloon {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-6px) rotate(3deg); }
}

.faq-cloud {
  filter: drop-shadow(1px 2px 0px rgba(0,0,0,0.25));
}

/* FAQ Accordion */
.faq-item {
  border: 3px solid #000000;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-3);
  box-shadow: 0px 4px 0px #000000;
  background-color: var(--color-white);
}

.faq-item__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  border: none;
  transition: background-color var(--transition-fast);
}

.faq-item__question:hover {
  background-color: #FFF200;
}

.faq-item__icon {
  font-size: var(--text-xl);
  font-weight: 900;
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.faq-item--open .faq-item__question {
  background-color: #FFF200;
}

.faq-item__answer {
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-base);
  line-height: 1.7;
  background-color: #FAFAFA;
  border-top: 2px solid #000000;
}

/* ── 18. MINI-CARRITO SLIDE-OUT ─────────────────────────────────────────────── */
.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 999990;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.cart-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ── 18. MINI-CARRITO SLIDE-OUT (OFICIAL FEASTABLES) ────────────────────────── */
.mini-cart-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(660px, 96vw);
  z-index: 999999;
  transform: translateX(calc(100% + 60px));
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(-4px 0 0 #000000) drop-shadow(-10px 0 20px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.mini-cart-wrapper.is-open {
  transform: translateX(0);
  pointer-events: auto;
}

.mini-cart {
  width: calc(100% + 20px);
  margin-left: -20px;
  height: 100%;
  background-color: var(--color-cream, #FAF6EE);
  display: flex;
  flex-direction: column;
  clip-path: polygon(100% 100%, 100% 0, 3.5% 0, 3.1% 2%, 2.6% 4%, 2.2% 6%, 1.7% 8%, 1.25% 10%, 0.85% 12%, 0.5% 14%, 0.25% 16%, 0.08% 18%, 0% 20%, 0.03% 22%, 0.16% 24%, 0.39% 26%, 0.7% 28%, 1.08% 30%, 1.5% 32%, 1.98% 34%, 2.46% 36%, 2.93% 38%, 3.37% 40%, 3.76% 42%, 4.07% 44%, 4.31% 46%, 4.46% 48%, 4.5% 50%, 4.44% 52%, 4.28% 54%, 4.03% 56%, 3.7% 58%, 3.3% 60%, 2.85% 62%, 2.38% 64%, 1.9% 66%, 1.44% 68%, 1.01% 70%, 0.64% 72%, 0.34% 74%, 0.13% 76%, 0.02% 78%, 0% 80%, 0.1% 82%, 0.28% 84%, 0.56% 86%, 0.91% 88%, 1.33% 90%, 1.78% 92%, 2.26% 94%, 2.74% 96%, 3.2% 98%, 3.6% 100%);
}

/* Header del carrito */
.mini-cart__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 28px 4px 72px;
  background-color: transparent;
  border-bottom: none;
}

.mini-cart__title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.mini-cart__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.5px;
  color: #FF5E97;
  -webkit-text-stroke: 2.5px #000;
  text-shadow: 4px 4px 0 #000;
  line-height: 1;
  margin: 0;
  transform: rotate(-1deg);
  white-space: nowrap;
  text-align: center;
}

.mini-cart__item-count {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #000;
  letter-spacing: 0.5px;
  margin-top: 4px;
  text-align: center;
}

.mini-cart__close {
  position: absolute;
  right: 24px;
  top: 32px;
  width: 42px;
  height: 42px;
  background-color: #FFF;
  border: 3.5px solid #000;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 4px 4px 0 #000;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  z-index: 2;
}

.mini-cart__close:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
  background-color: #FFF;
}

/* Medidor de envío gratis */
.shipping-meter {
  padding: 10px 28px 20px 72px;
}

.shipping-meter__track-wrapper {
  position: relative;
  margin-top: 26px;
}

.shipping-meter__indicator {
  position: absolute;
  top: -30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  transition: left 0.4s ease;
  pointer-events: none;
}

.shipping-meter__you-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 900;
  color: #000;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  line-height: 1;
}

.shipping-meter__smiley-badge {
  width: 28px;
  height: 28px;
  background-color: #00D2FF;
  border: 3.5px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  box-shadow: 2px 2px 0 #000;
}

.shipping-meter__bar {
  height: 32px;
  border: 4px solid #000;
  border-radius: 9999px;
  background-color: #FFF;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 #000;
}

.shipping-meter__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #00D2FF;
  transition: width 0.4s ease;
  border-right: 4px solid #000;
}

.shipping-meter__label {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000;
}

.shipping-meter__labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  color: #000;
  margin-top: 10px;
}

/* Lista de Items */
.mini-cart__items {
  flex: 1;
  overflow-y: auto;
  padding: 12px 28px 12px 72px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Con el carrito vacío no hay filas que despejar del borde rasgado, así que
   el padding vuelve a ser simétrico y la carita queda centrada de verdad. */
.mini-cart__items--empty {
  padding-left: 28px;
}

/* Estado vacío: carita triste + titular, a negro pleno. Antes iba con
   opacity 0.7 sobre un emoji 🍫, y el panel parecía a medio cargar. */
.mini-cart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 28px;
  text-align: center;
  padding-bottom: 40px;
}

.mini-cart__empty-face {
  width: clamp(120px, 45%, 190px);
  height: auto;
  flex-shrink: 0;
}

.mini-cart__empty-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #000;
  margin: 0;
}

/* Cart Item Row */
.cart-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: none;
}

.cart-item__image-wrap {
  width: 76px;
  height: 76px;
  border: 2.5px solid #000;
  border-radius: 10px;
  background-color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: none;
}

/* `contain`, no `cover`: las fotos del catálogo son empaques horizontales
   (barras, packs de 5, camisetas) y el recuadro del carrito es cuadrado, así
   que `cover` recortaba los bordes — se veía un trozo del envoltorio sin la
   marca ni la forma del producto. Con `contain` + un respiro de padding entra
   completo, con la banda blanca del recuadro alrededor. */
.cart-item__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

.cart-item__content {
  flex: 1;
  min-width: 0;
}

.cart-item__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.02rem;
  text-transform: uppercase;
  color: #000;
  line-height: 1.15;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item__meta {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: #000;
  opacity: 1;
  margin: 0 0 10px 0;
}

.cart-item__stepper {
  display: inline-flex;
  align-items: center;
  border: 2px solid #000;
  border-radius: 8px;
  background-color: transparent;
  height: 32px;
  padding: 0 4px;
  box-shadow: none;
}

.stepper-btn {
  width: 26px;
  height: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1rem;
  cursor: pointer;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease;
}

.stepper-btn:active {
  transform: scale(0.9);
}

.stepper-qty {
  padding: 0 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.95rem;
  color: #000;
}

.cart-item__action {
  flex-shrink: 0;
}

.cart-item__delete {
  border: 2px solid #000;
  border-radius: 8px;
  background-color: transparent;
  padding: 6px 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 0.82rem;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.1s ease, background-color 0.1s ease;
}

.cart-item__delete:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Footer Section (Dos tonos de azul oficial) */
.mini-cart__footer {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  border-top: 3.5px solid #000;
}

.mini-cart__subtotal-block {
  background-color: #6FE3FF;
  padding: 16px 28px 16px 72px;
}

.mini-cart__subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mini-cart__subtotal-label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
  color: #000;
}

.mini-cart__subtotal-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.45rem;
  color: #000;
}

.mini-cart__actions-block {
  background-color: #00D2FF;
  padding: 20px 28px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.minimum-order-alert {
  background-color: #FFDE00;
  border: 3px solid #000;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  color: #000;
  box-shadow: 3px 3px 0 #000;
}

.minimum-order-alert__title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #000;
}

.minimum-order-alert__icon-badge {
  width: 24px;
  height: 24px;
  background-color: #000;
  color: #FFDE00;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}

.minimum-order-alert__sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: #000;
}

.minimum-order-alert__amount {
  font-weight: 900;
  background-color: #FFF;
  border: 1.5px solid #000;
  border-radius: 6px;
  padding: 1px 7px;
  display: inline-block;
  color: #000;
}

.cart-checkout-btn {
  background-color: #BAFF00;
  border: 3px solid #000;
  border-radius: 12px;
  padding: 15px 20px;
  width: 100%;
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.15rem;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 3.5px 3.5px 0 #000;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.cart-checkout-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5.5px 5.5px 0 #000;
}

.mini-cart__disclaimer {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #000;
  text-align: center;
  margin: 0;
}

/* ── 19. FOOTER ──────────────────────────────────────────────────────────────── */
.site-footer {
  background-color: var(--color-black);
  color: var(--color-white);
  border-top: var(--border-ultra);
  padding-block: var(--space-16);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
}

.footer__brand-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.footer__brand-title span {
  color: var(--color-feast-pink);
}

.footer__brand-desc {
  font-size: var(--text-sm);
  opacity: 0.6;
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.footer__col-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-4);
  color: var(--color-feast-yellow);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__links a {
  font-size: var(--text-sm);
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.footer__links a:hover {
  opacity: 1;
  color: var(--color-feast-yellow);
}

.footer__bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  opacity: 0.5;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ── 20. UTILIDADES ──────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.text-center {
  text-align: center;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-display {
  font-family: var(--font-display);
}

.text-pink {
  color: var(--color-feast-pink);
}

.text-yellow {
  color: var(--color-feast-yellow);
}

.text-blue {
  color: var(--color-feast-blue);
}

.bg-black {
  background-color: var(--color-black);
}

.bg-white {
  background-color: var(--color-white);
}

.bg-cream {
  background-color: var(--color-cream);
}

.bg-yellow {
  background-color: var(--color-feast-yellow);
}

.bg-pink {
  background-color: var(--color-feast-pink);
}

.bg-blue {
  background-color: var(--color-feast-blue);
}

.border-bottom {
  border-bottom: var(--border-thick);
}

.border-top {
  border-top: var(--border-thick);
}

.hidden {
  display: none;
}

/* ── 21. RESPONSIVE ──────────────────────────────────────────────────────────── */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero__media {
    border-left: none;
    border-top: var(--border-ultra);
    min-height: 350px;
  }

  .hero__content {
    padding: var(--space-12) var(--container-pad);
  }

  .split-screen {
    grid-template-columns: 1fr;
  }

  .split-screen__panel--them {
    border-left: none;
    border-top: var(--border-ultra);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

/* La nav de desktop se oculta hasta 1023px, no hasta 768px: ver el comentario
   de #mobile-menu-btn (§11). Va en su propio bloque porque el resto de este
   @media sí corresponde a ≤768px. */
@media (max-width: 1023px) {
  .site-nav {
    display: none;
    /* Se reemplaza por .mobile-nav (§10.2), abierta con Alpine. */
  }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  /* El panel ocupa todo el ancho: se estira el WRAPPER (que es quien tiene el
     ancho y el translateX de la animación), no .mini-cart. Antes se ponía
     width:100vw en .mini-cart, que pelea con el `calc(100% + 20px)` +
     margin-left:-20px de su regla base — ese desfase de 20px es lo que mete el
     borde rasgado (clip-path) fuera de la vista, y forzarlo a 100vw lo
     descuadraba. */
  .mini-cart-wrapper {
    width: 100vw;
  }

  .hero__title {
    font-size: clamp(2.5rem, 12vw, 5rem);
  }
}

/* ── 18.1 MINI-CARRITO EN MÓVIL ─────────────────────────────────────────────
   Todo el panel está construido con padding-left de 72px para despejar el
   borde rasgado del clip-path, pensado para 660px de ancho. A 375px esos 72px
   se comen un quinto de la pantalla y, sobre todo, el título va con
   white-space:nowrap a 35.2px (el piso del clamp): "TU CARRITO" se metía
   DEBAJO del botón de cerrar, que está en position:absolute right:24px. */
@media (max-width: 640px) {
  .mini-cart__header {
    /* Simétrico respecto al botón de cerrar (24px + 42px de ancho = 66px) para
       que el título quede centrado de verdad entre el rasgado y la X. */
    padding: 24px 72px 4px 44px;
  }

  .mini-cart__title {
    /* Deja de ser nowrap: si el nombre no cabe, envuelve en vez de pisar la X. */
    white-space: normal;
    font-size: clamp(1.55rem, 7vw, 2.2rem);
    text-shadow: 3px 3px 0 #000;
  }

  .mini-cart__item-count {
    font-size: 0.95rem;
  }

  .mini-cart__close {
    right: 16px;
    top: 24px;
  }

  .shipping-meter {
    padding: 10px 20px 20px 44px;
  }

  .shipping-meter__labels {
    font-size: 1rem;
  }

  /* El indicador "TÚ 😊" va montado sobre la barra (top:-30px deja la carita a
     caballo del borde). En desktop la barra es larga y la carita cae lejos del
     "ENVÍO GRATIS" centrado; a 375px la barra mide ~270px y con el carrito a
     media meta la carita se planta justo encima del texto y lo tapa. En móvil
     sube por completo por encima de la barra. */
  .shipping-meter__track-wrapper {
    margin-top: 44px;
  }

  /* -50px y no -44px: la carita lleva box-shadow 2px 2px, así que su borde
     visible cae 2px por debajo de su caja. Con -44px quedaba 1px libre de la
     barra y la sombra la tocaba. */
  .shipping-meter__indicator {
    top: -50px;
  }

  .shipping-meter__label {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
  }

  .mini-cart__items {
    padding: 12px 20px 12px 44px;
  }

  .mini-cart__items--empty {
    padding-left: 20px;
  }

  .mini-cart__subtotal-block {
    padding: 14px 20px 14px 44px;
  }

  .mini-cart__actions-block {
    padding: 16px 20px 20px 44px;
  }

  /* El nombre del producto llevaba nowrap + ellipsis: en una fila de ~200px
     "Hoodie Mr Beast Iconic Black" se cortaba en "Hoodie Mr Be…". Con dos
     líneas entra completo. */
  .cart-item__name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 0.95rem;
  }

  .cart-item {
    gap: 10px;
  }

  .cart-item__image-wrap {
    width: 64px;
    height: 64px;
  }
}

/* Mobile pequeño (≤ 480px) */
@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr;
  }

  .hero__cta-group {
    flex-direction: column;
  }

  .hero__cta-group .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── 22. PRINT ───────────────────────────────────────────────────────────────── */
@media print {

  .topbar,
  .site-header,
  .mini-cart,
  .cart-overlay {
    display: none;
  }

  body {
    background: white;
  }
}

/* ── 23. ACCESIBILIDAD — Focus visible ──────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--color-feast-pink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════════════════════════════════════════════
   MÓDULO 2 — CATÁLOGO Y PÁGINAS DE PRODUCTO
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 24. BREADCRUMB ─────────────────────────────────────────────────────────── */
.breadcrumb {
  padding: var(--space-3) 0;
  border-bottom: var(--border-thin);
  background: var(--color-white);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  font-weight: 500;
}

.breadcrumb__item a {
  color: var(--color-feast-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb__item a:hover {
  color: var(--color-feast-pink);
  text-decoration: underline;
}

.breadcrumb__item--current {
  color: var(--color-gray-500);
}

.breadcrumb__sep {
  color: var(--color-gray-400);
  font-size: var(--text-xs);
}

/* ── 25. PÁGINA DE PRODUCTO — LAYOUT PRINCIPAL ──────────────────────────────── */
.product-detail {
  padding: var(--space-10) 0;
}

/* minmax(0, 1fr) y no `1fr`: mismo motivo que en el footer y el checkout —
   `1fr` no baja del min-content de su contenido, y acá ese mínimo (el título
   del producto y la fila de precio) desbordaba la columna 24px a 320px. */
.product-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}

.product-detail__grid > * {
  min-width: 0;
}

@media (max-width: 768px) {
  .product-detail__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
}

/* ── 26. GALERÍA ────────────────────────────────────────────────────────────── */
.product-detail__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-6);
}

/* El sticky tiene sentido con dos columnas (la foto se queda a la vista
   mientras se recorre la columna de información). Con una sola columna
   (≤768px, ver .product-detail__grid) la galería queda ENCIMA de la
   información: al bajar se quedaba clavada en top:24px y su última fila —el
   rating— flotaba sobre el estado de stock y el botón de compra, pisándolos.
   En móvil vuelve al flujo normal. */
@media (max-width: 768px) {
  .product-detail__gallery {
    position: static;
    top: auto;
  }
}

.product-detail__img-main {
  position: relative;
  border: var(--border-thick);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-brutal-lg);
  background: var(--color-gray-100);
  aspect-ratio: 1 / 1;
}

.product-detail__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}

.product-detail__img-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-detail__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 2px solid var(--color-black);
  border-radius: var(--radius-sm);
  z-index: 1;
}

.product-detail__badge--hot {
  background-color: var(--color-feast-yellow);
  color: var(--color-black);
}

.product-detail__badge--new {
  background-color: var(--color-feast-pink);
  color: var(--color-white);
}

.product-detail__badge--sold-out {
  background-color: var(--color-gray-400);
  color: var(--color-white);
}

/* ── 27. RATING ─────────────────────────────────────────────────────────────── */
.product-detail__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.rating-stars {
  color: var(--color-feast-yellow);
  font-size: var(--text-lg);
  letter-spacing: 0.05em;
  text-shadow: 0 0 1px var(--color-black);
}

.rating-text {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

/* ── 28. INFO DEL PRODUCTO ──────────────────────────────────────────────────── */
.product-detail__category {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-feast-blue);
  margin-bottom: var(--space-2);
}

.product-detail__title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

@media (max-width: 768px) {
  .product-detail__title {
    font-size: var(--text-4xl);
  }
}

/* ── 29. PRICING ────────────────────────────────────────────────────────────── */
.product-detail__pricing {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.product-detail__price {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--color-feast-pink);
}

.product-detail__price-old {
  font-size: var(--text-xl);
  color: var(--color-gray-400);
  text-decoration: line-through;
}

.product-detail__discount-badge {
  background: var(--color-feast-yellow);
  color: var(--color-black);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border: var(--border-thin);
  border-radius: var(--radius-sm);
}

/* ── 30. DESCRIPCIÓN ────────────────────────────────────────────────────────── */
.product-detail__desc {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-gray-700);
  margin-bottom: var(--space-6);
  border-left: 4px solid var(--color-feast-yellow);
  padding-left: var(--space-4);
}

/* ── 31. OPCIONES — SELECTOR DE TALLAS ──────────────────────────────────────── */
.product-detail__option-group {
  margin-bottom: var(--space-5);
}

.product-detail__option-label {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

.talla-selector {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.talla-btn {
  min-width: 48px;
  height: 48px;
  padding: 0 var(--space-3);
  border: var(--border-thick);
  background: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: var(--radius-sm);
}

.talla-btn:hover {
  background: var(--color-feast-yellow);
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--color-black);
}

.talla-btn--active {
  background: var(--color-feast-yellow) !important;
  box-shadow: var(--shadow-brutal) !important;
  transform: translate(-2px, -2px) !important;
}

/* ── 32. INCLUYE (Combos) ───────────────────────────────────────────────────── */
.product-detail__incluye {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.incluye-item {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-100);
  border-left: 3px solid var(--color-feast-yellow);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── 33. DETALLES (Ingredientes) ────────────────────────────────────────────── */
.product-detail__details {
  margin-bottom: var(--space-5);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.product-detail__details-trigger {
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  background: var(--color-gray-100);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--transition-fast);
}

.product-detail__details-trigger::-webkit-details-marker {
  display: none;
}

.product-detail__details-trigger::after {
  content: '+';
  font-size: var(--text-lg);
}

details[open] .product-detail__details-trigger::after {
  content: '−';
}

details[open] .product-detail__details-trigger {
  background: var(--color-feast-yellow);
}

.product-detail__details-content {
  padding: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.product-detail__alergenos {
  color: var(--color-feast-pink);
}

/* ── 34. ESTADO DE STOCK ────────────────────────────────────────────────────── */
.product-detail__stock-status {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  min-height: 1.5em;
}

.stock-loading {
  color: var(--color-gray-500);
}

.stock-in-stock {
  color: #16a34a;
}

.stock-out {
  color: var(--color-feast-pink);
}

/* ── 35. CTA: BOTÓN AGREGAR AL CARRITO ──────────────────────────────────────── */
.btn-add-to-cart {
  width: 100%;
  justify-content: center;
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-4);
}

.btn-add-to-cart:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.product-detail__agotado-msg {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  text-align: center;
  margin-top: var(--space-3);
}

/* ── 36. TRUST BADGES ───────────────────────────────────────────────────────── */
.product-detail__trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-thin);
}

.trust-item {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-gray-700);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ── 37. SECCIÓN UPSELL / RELACIONADOS ──────────────────────────────────────── */
.section-upsell {
  padding: var(--space-12) 0;
  background: var(--color-gray-100);
  border-top: var(--border-thick);
}

/* ── 38. PÁGINA DE CATEGORÍA ────────────────────────────────────────────────── */
.category-page {
  padding: var(--space-10) 0;
}

.category-page__header {
  margin-bottom: var(--space-10);
  text-align: center;
}

.category-page__title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

/* ── 39. CARRITO — VALIDACIÓN VISUAL ────────────────────────────────────────── */
.cart-min-order-alert {
  background: var(--color-feast-pink);
  color: var(--color-white);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.cart-free-shipping-bar {
  margin-bottom: var(--space-4);
}

.cart-free-shipping-bar__label {
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.cart-free-shipping-bar__track {
  height: 8px;
  background: var(--color-gray-200);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--color-black);
}

.cart-free-shipping-bar__fill {
  height: 100%;
  background: var(--color-feast-yellow);
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* ── 40. UTILIDADES ADICIONALES ─────────────────────────────────────────────── */
.text-pink {
  color: var(--color-feast-pink);
}

.text-blue {
  color: var(--color-feast-blue);
}

.text-yellow {
  color: var(--color-feast-yellow);
}


/* ══════════════════════════════════════════════════════════════════════════════
   41. HOME ICP — REDISEÑO ADULTO
   Secciones nuevas para la estrategia de regalos orientada al comprador adulto
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 41.1 HERO ICP (Buscador de Regalos) ────────────────────────────────────── */
.hero-icp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 90dvh;
  border-bottom: var(--border-ultra);
}

.hero-icp__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-16) var(--space-10) var(--space-16) clamp(1.5rem, 6vw, 5rem);
  background-color: var(--color-feast-yellow);
}

.hero-icp__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background-color: var(--color-black);
  color: var(--color-feast-yellow);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  width: fit-content;
}

.hero-icp__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.hero-icp__title em {
  font-style: normal;
  -webkit-text-stroke: 3px var(--color-black);
  color: transparent;
}

.hero-icp__subtitle {
  font-size: var(--text-lg);
  line-height: 1.5;
  max-width: 45ch;
}

/* Gift Finder Tiles */
.gift-finder {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.gift-finder__label {
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.gift-finder__tiles {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.gift-finder__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-white);
  border: var(--border-thick);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-black);
  font-weight: 700;
  font-size: var(--text-sm);
  text-align: center;
  min-width: 100px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.gift-finder__tile:hover,
.gift-finder__tile:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-md);
}

.gift-finder__tile-icon {
  font-size: 1.75rem;
}

.gift-finder__tile-text {
  line-height: 1.2;
}

.gift-finder__tile-arrow {
  font-size: 1.2rem;
  opacity: 0.6;
}

/* Trust Badges */
.hero-icp__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.trust-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: rgba(0, 0, 0, 0.08);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

/* Hero Media */
.hero-icp__media {
  background-color: var(--color-feast-blue);
  border-left: var(--border-ultra);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-icp__media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-12);
}

.hero-icp__media-emoji {
  font-size: 5rem;
}

/* Nav highlight */
.site-nav__link--highlight {
  background-color: var(--color-feast-yellow);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-weight: 700;
}

/* ── 41.2 SPLIT VIRAL (El Regalo Típico vs La Experiencia Viral) ────────────── */
.split-viral-wrapper {
  padding: 0 25px 40px 25px; /* 0px arriba para mantener 40px exactos desde el H1 banner */
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.split-viral-container {
  width: 100%;
  border: var(--border-ultra);
  border-radius: 24px;
  overflow: hidden;
  background-color: transparent;
  position: relative;
}

.split-viral {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 82dvh;
}

.split-viral__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-10) var(--space-8);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-white);
}

.split-viral__panel--left {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.1) 35%,
    rgba(0, 0, 0, 0.1) 65%,
    rgba(0, 0, 0, 0.8) 100%
  ), url('/assets/images/antes-regalo-comun.webp');
}

.split-viral__panel--right {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.1) 35%,
    rgba(0, 0, 0, 0.1) 65%,
    rgba(0, 0, 0, 0.8) 100%
  ), url('/assets/images/despues-regalo-feastables-sorprendente.webp');
}

.split-viral__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.split-viral__badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  width: fit-content;
  transition: transform var(--transition-fast);
}

.split-viral__badge--bad {
  background-color: #dc2626;
  color: var(--color-white);
  transform: rotate(-1deg);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.split-viral__badge--good {
  background-color: var(--color-feast-yellow);
  color: var(--color-black);
  transform: rotate(1deg);
}

.split-viral__badge:hover {
  transform: scale(1.04) rotate(0deg);
}

.split-viral__title-wrapper {
  position: relative;
  display: inline-block;
  width: fit-content;
}

.split-viral__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 2.2rem);
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--color-white);
  text-shadow: 2px 2px 0 var(--color-black), -1px -1px 0 var(--color-black), 1px -1px 0 var(--color-black), -1px 1px 0 var(--color-black), 0 4px 12px rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 1;
}

/* ── ANIMATED EMOJIS MICRO-ANIMATIONS ─────────────────────────────────────── */
.animated-emoji {
  position: absolute;
  font-size: clamp(0.95rem, 1.4vw, 1.35rem);
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

/* Party Emojis (Right Panel) */
.animated-emoji--party {
  animation: partyFloat 2.4s infinite ease-in-out alternate;
}
.animated-emoji--party.e1 { top: -14px; right: -12px; animation-delay: 0s; }
.animated-emoji--party.e2 { top: -18px; left: 45%; animation-delay: 0.4s; }
.animated-emoji--party.e3 { bottom: -8px; right: 5px; animation-delay: 0.8s; }
.animated-emoji--party.e4 { top: 25%; right: -18px; animation-delay: 1.2s; }
.animated-emoji--party.e5 { bottom: -12px; left: -5px; animation-delay: 1.6s; }

@keyframes partyFloat {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: drop-shadow(0 0 4px rgba(255, 221, 0, 0.9));
  }
  50% {
    transform: translateY(-8px) scale(1.15) rotate(12deg);
    filter: drop-shadow(0 0 10px rgba(255, 221, 0, 1));
  }
  100% {
    transform: translateY(4px) scale(0.95) rotate(-10deg);
    filter: drop-shadow(0 0 6px rgba(255, 0, 128, 0.9));
  }
}

/* Bored Emojis (Left Panel) */
.animated-emoji--bored {
  animation: boredDroop 3.6s infinite ease-in-out alternate;
  opacity: 0.85;
}
.animated-emoji--bored.e1 { top: -14px; right: 5px; animation-delay: 0s; }
.animated-emoji--bored.e2 { bottom: -12px; right: -10px; animation-delay: 0.8s; }
.animated-emoji--bored.e3 { top: 25%; right: -18px; animation-delay: 1.6s; }
.animated-emoji--bored.e4 { top: -14px; left: -8px; animation-delay: 2.4s; }

/* Los emojis decorativos sobresalen hasta 18px del bloque del título con
   offsets negativos. En pantallas anchas eso cae dentro del padding del panel,
   pero a 320-360px se salía del viewport (aportaba los últimos 20px de
   desbordamiento) y quedaba recortado por el overflow-x:hidden del body. Se
   meten dentro del bloque: siguen "flotando" alrededor del título sin
   sobresalir de la caja. */
@media (max-width: 480px) {
  .animated-emoji--party.e1 { right: 0; }
  .animated-emoji--party.e4 { right: 0; }
  .animated-emoji--party.e5 { left: 0; }
  .animated-emoji--bored.e2 { right: 0; }
  .animated-emoji--bored.e3 { right: 0; }
  .animated-emoji--bored.e4 { left: 0; }
}

@keyframes boredDroop {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(6px) rotate(-10deg) scale(1.05);
  }
  100% {
    transform: translateY(10px) rotate(-4deg) scale(0.95);
  }
}

.split-viral__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: fit-content;
}

.split-viral__list li {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.3px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.4);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.95);
  color: var(--color-white);
}

.split-viral__list--bad li {
  border-left: 4px solid #ef4444;
}

.split-viral__list--good li {
  border-left: 4px solid #22c55e;
}

.split-viral__divider {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-black);
  border-inline: var(--border-thick);
}

.split-viral__divider span {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-feast-yellow);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 4px;
}

/* ── 41.3 COMBOS NOTE ───────────────────────────────────────────────────────── */
.combos-note {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background-color: transparent;
  border: none;
  border-radius: 0;
  font-size: var(--text-sm);
  text-align: center;
}

/* Section header description */
.section-header__desc {
  max-width: 55ch;
  font-size: var(--text-lg);
  line-height: 1.5;
}

.section-header--centered {
  text-align: center;
}

.section-header--centered .section-header__desc {
  margin-inline: auto;
}

/* ── 41.4 STEPPER WALMART (Botón mutante en tarjetas de chocolate) ───────────── */
.stepper-combo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  width: 100%;
}

.stepper {
  display: flex;
  align-items: center;
  border: var(--border-thick);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background-color: var(--color-white);
}

.stepper__btn {
  background: var(--color-black);
  color: var(--color-white);
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  border: none;
  flex-shrink: 0;
}

.stepper__btn:hover {
  background-color: var(--color-feast-purple);
}

.stepper__qty {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  padding-inline: var(--space-2);
}

.size-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  background-color: #f4f4f4;
  border: 1.5px solid #000000;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 900;
  color: #000000;
}

.size-btn:hover {
  background-color: #e5e7eb;
}

.size-btn.size-btn--active {
  background-color: #FAAA1E;
  border-color: #000000;
  color: #000000;
  box-shadow: 1px 1px 0px #000000;
}

/* Stepper específico para tarjetas del carrusel estilo USA */
.feast-card .stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #FAAA1E;
  border-radius: 12px;
  padding: 4px;
  border: none;
  box-shadow: none;
  width: 100%;
}

.feast-card .stepper__btn {
  background-color: #000000;
  color: #ffffff;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: none;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.feast-card .stepper__btn:hover {
  background-color: #222222;
}

.feast-card .stepper__qty {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 900;
  color: #000000;
}

.btn-armar-combo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-feast-yellow);
  border: var(--border-thick);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-armar-combo:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-md);
}

/* ── 41.5 MERCH SPLIT-SCREEN ─────────────────────────────────────────────────── */
.merch-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: var(--border-ultra);
  min-height: 70dvh;
}

.merch-split__media {
  background-color: var(--color-feast-pink);
  border-right: var(--border-ultra);
  display: flex;
  align-items: center;
  justify-content: center;
}

.merch-split__img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-12);
  color: var(--color-white);
}

.merch-split__img-placeholder span {
  font-size: 5rem;
}

.merch-split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-16) clamp(1.5rem, 6vw, 5rem);
  background-color: var(--color-white);
}

.merch-split__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-feast-pink);
}

.merch-split__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  text-transform: uppercase;
  line-height: 1.1;
}

.merch-split__desc {
  font-size: var(--text-lg);
  max-width: 38ch;
}

/* Guía de Tallas */
.size-reference {
  background-color: var(--color-feast-yellow);
  border: var(--border-thick);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
}

.size-reference__title {
  font-weight: 700;
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
}

.size-reference__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.size-reference__list li {
  list-style: none;
  padding: var(--space-1) 0;
}

/* ── 41.6 UGC GALLERY (Social Proof Vertical) ──────────────────────────────── */
.ugc-section {
  padding-block: var(--space-20);
  background-color: var(--color-black);
  color: var(--color-white);
}

.ugc-section .section-header__eyebrow {
  color: var(--color-feast-yellow);
}

.ugc-section .section-header__title {
  color: var(--color-white);
}

.ugc-section .section-header__desc {
  color: rgba(255, 255, 255, 0.7);
}

.ugc-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.ugc-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background-color: #111;
  border: var(--border-thin);
  border-color: #333;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ugc-item__media {
  position: relative;
  aspect-ratio: 9 / 16;
  background-color: #1a1a1a;
  overflow: hidden;
}

.ugc-item__media--video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 40%);
}

.ugc-item__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-6);
  color: rgba(255, 255, 255, 0.5);
}

.ugc-item__placeholder span {
  font-size: 3rem;
}

.ugc-item__placeholder p {
  font-size: var(--text-sm);
  line-height: 1.4;
}

.ugc-item__placeholder small {
  font-size: var(--text-xs);
  opacity: 0.5;
}

.ugc-item__play-badge {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color-black);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
}

.ugc-item__review {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ugc-item__stars {
  font-size: var(--text-sm);
}

.ugc-item__text {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
}

.ugc-item__author {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-feast-yellow);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── 41.7 PRODUCT CARD — Placeholder image helper ──────────────────────────── */
.product-card__img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}

/* ── 41.8 RESPONSIVE — Mobile ICP Sections ──────────────────────────────────── */
@media (max-width: 768px) {
  .hero-icp {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-icp__media {
    display: none;
    /* Ocultar en móvil para priorizar el contenido */
  }

  .hero-icp__content {
    padding: var(--space-10) var(--space-4);
  }

  .gift-finder__tiles {
    gap: var(--space-2);
  }

  .gift-finder__tile {
    min-width: auto;
    flex: 1;
    padding: var(--space-3) var(--space-2);
  }

  .split-viral-wrapper {
    padding: 20px 15px;
  }

  .split-viral {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: auto;
  }

  .split-viral__divider {
    width: 100%;
    height: 60px;
    writing-mode: horizontal-tb;
    border-inline: none;
    border-block: var(--border-thick);
  }

  .split-viral__divider span {
    writing-mode: horizontal-tb;
  }

  .split-viral__panel {
    padding: var(--space-10) var(--space-4);
    gap: var(--space-4);
  }

  .merch-split {
    grid-template-columns: 1fr;
  }

  .merch-split__media {
    min-height: 300px;
    border-right: none;
    border-bottom: var(--border-ultra);
  }

  .merch-split__content {
    padding: var(--space-10) var(--space-4);
  }

  .ugc-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

@media (max-width: 480px) {
  /* Antes seguía en 2 columnas: a 375px cada tarjeta queda en ~160px y los
     testimonios salían a 3 palabras por renglón ("Le compré el / combo a mi /
     ahijado por sus 12 / años y quedó…"), ilegible. Con una columna el texto
     recupera un ancho de lectura normal y la foto/vídeo vertical se ve grande,
     que es justo el argumento de esta sección. */
  .ugc-gallery {
    grid-template-columns: 1fr;
  }

  .gift-finder__tile-text {
    font-size: 0.7rem;
  }
}

/* ── HERO BANNER ─────────────────────────────────────────────────────────── */
.hero-banner {
  padding: 40px 25px 0 25px; /* 0px abajo para mantener 40px exactos hacia el H1 banner */
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-banner__container {
  width: 100%;
  border: var(--border-ultra);
  border-radius: 24px;
  overflow: hidden;
  background-color: transparent; /* Removido el fondo negro para dejar el de la página */
  position: relative; /* Para los botones y h1 */
  container-type: inline-size; /* El texto overlay escala en cqw junto con la imagen */
}

/* Overlay de texto sobre el hero — posiciones/colores extraídos por pixel del
   banner de referencia (combos-desktop2 con texto). En cqw para que escale
   siempre proporcional a la imagen, sin importar el viewport. */
.hero-banner__text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.hero-banner__heading {
  position: absolute;
  inset: 0;
  margin: 0;
}

.hero-banner__heading-line {
  position: absolute;
  left: 6.14%;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* Tamaños y posiciones medidos por pixel sobre el banner de referencia: las dos
   líneas tienen distinto cuerpo pero ocupan el mismo largo (~41% del ancho) y
   cierran en ~47%, así que nunca se montan sobre la mano ni el botilito. */
.hero-banner__heading-line--purple {
  top: 15.04%;
  font-size: 8cqw;
  color: #6365D2;
}

.hero-banner__heading-line--mint {
  top: 29.47%;
  font-size: 4.22cqw;
  color: #A7ECD7;
}

.hero-banner__subtext {
  position: absolute;
  top: 41.5%;
  left: 6.1%;
  width: 39%;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 2cqw;
  line-height: 1.3;
  color: var(--color-white);
}

@media (max-width: 640px) {
  /* El titular ya está en cqw/%: escala solo y mantiene la proporción del
     banner de referencia en cualquier ancho, así que no se toca aquí. */
  /* La imagen es muy panorámica (1.79:1): en móvil su altura queda tan
     reducida (~175px) que no cabe el párrafo sin encimarse con el
     titular o los botones. Se oculta y se deja solo el titular. */
  .hero-banner__subtext {
    display: none;
  }
}

.hero-banner__title {
  display: none;
  position: absolute;
  top: 40px;
  left: 6%; /* Alineado con los botones */
  z-index: 5;
  margin: 0;
  
  /* Estilos exactos de la imagen */
  font-size: 67px;
  font-weight: 800;
  text-transform: uppercase;
  font-style: italic;
  -webkit-text-stroke-width: 2px;
  stroke-width: 2px;
  -webkit-text-stroke-color: #00000059;
  stroke: #00000059;
  color: #FFFFFF00;
}

.hero-banner__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px; /* Slightly less than container to fit inside border */
}

.hero-banner__actions {
  position: absolute;
  top: calc(60% + 50px); /* Ajustado 50px más abajo del texto */
  left: 6%; /* Porcentaje para alinearlo con el margen izquierdo del texto */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-6);
  z-index: 10;
}

/* Modificadores de botones para el Hero */
.btn-hero-purple,
.btn-hero-mint {
  border-color: var(--color-white);
  font-weight: 600;
  font-style: italic;
  font-size: calc(var(--text-lg) + 3px);
}

.btn-hero-purple:hover,
.btn-hero-mint:hover {
  box-shadow: 
    1px 1px 0px var(--color-white),
    2px 2px 0px var(--color-white),
    3px 3px 0px var(--color-white),
    4px 4px 0px var(--color-white),
    5px 5px 0px var(--color-white),
    6px 6px 0px var(--color-white);
  transform: translate(-6px, -6px);
}

.btn-hero-purple {
  background-color: #6465D3;
  color: var(--color-white);
}

.btn-hero-mint {
  background-color: #A8ECD1;
  color: var(--color-black);
}

.btn-combo {
  background-color: #6465D3;
  color: var(--color-white);
  border-color: var(--color-white);
  font-weight: 800;
  font-style: italic;
  font-size: calc(var(--text-md) + 5px);
  white-space: normal;
  line-height: 1.2;
  padding: calc(var(--space-2) + 10px) calc(var(--space-4) + 10px);
  text-align: center;
}

.btn-combo:hover {
  /* Sin efecto hover especial */
}

/* ── HERO EN MÓVIL: los CTA salen de encima de la imagen ────────────────────
   El banner es panorámico (2200×1228 = 1.79:1). A 375px la imagen mide ~181px
   de alto, y los dos botones miden 398px y 313px de ancho (.btn lleva
   white-space:nowrap + padding var(--space-8)): no cabían ni a lo ancho ni a
   lo alto. El bloque además tenía `top` Y `bottom` a la vez, así que se
   estiraba a 0px de alto y .hero-banner__container (overflow:hidden) recortaba
   los botones — el CTA principal del sitio quedaba inutilizable en móvil.

   Solución: bajo 1024px los botones dejan de ser overlay absoluto y pasan a
   ser un bloque normal DEBAJO de la imagen, a todo el ancho y apilados. El
   titular sigue encima de la foto (está en cqw, escala solo).

   El corte es 1023px y no 768px porque los dos botones en fila piden
   6% + 398 + 24 + 313 = 782px de contenedor, o sea ~832px de viewport: entre
   769px y 832px seguían saliéndose (medido en horizontal de teléfono, 812×375:
   30px recortados). Coincide con el corte de la navegación (§11). */
@media (max-width: 1023px) {
  .hero-banner__actions {
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-4);
    background-color: var(--color-black);
  }

  .hero-banner__actions .btn {
    /* Sin nowrap el texto largo ("Comprar el regalo perfecto") envuelve en dos
       renglones en vez de forzar 398px de ancho mínimo. */
    white-space: normal;
    width: 100%;
    padding-inline: var(--space-4);
    font-size: var(--text-base);
    line-height: 1.2;
    text-align: center;
  }
}

/* ── CARRUSEL FEASTABLES (Chocolates & Productos) ─────────────────────────── */

.feast-carousel-section {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background-color: #72E2FF; /* Azul Feastables exacto */
  border-top: var(--border-thick);
  border-bottom: var(--border-thick);
  overflow: hidden;
  min-height: 480px;
  padding-block: 80px;
}

/* Panel izquierdo */
.feast-carousel__panel {
  flex: 0 0 25vw;
  min-width: 330px;
  background-color: #72E2FF;
  padding: var(--space-10) var(--space-6) var(--space-10) 52px; /* 20px más a la izquierda */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  border-right: none; /* Sin línea separadora como en el diseño de referencia */
  position: relative;
  z-index: 2;
}

.feast-carousel__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #004f5c;
  margin: 0;
}

.feast-carousel__title {
  font-size: clamp(2.6rem, 4.2vw, 3.4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.01em; /* Espaciado limpio entre letras idéntico a la referencia */
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0;
}

.feast-carousel__desc {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-black);
  margin: 0;
  letter-spacing: -0.01em;
}

.feast-carousel__cta {
  display: inline-block;
  background-color: #00609c; /* Azul del botón de referencia */
  color: var(--color-white);
  font-size: 1.3rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 0.8rem 2rem;
  border: 3px solid var(--color-black);
  border-radius: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  align-self: flex-start;
  margin-top: var(--space-4);
}

.feast-carousel__cta:hover {
  transform: translate(-4px, -4px);
  box-shadow: 
    1px 1px 0px var(--color-black),
    2px 2px 0px var(--color-black),
    3px 3px 0px var(--color-black),
    4px 4px 0px var(--color-black),
    5px 5px 0px var(--color-black),
    6px 6px 0px var(--color-black);
}

/* Wrapper del track (ocupa el resto del ancho y contiene el scroll) */
.feast-carousel__wrapper {
  flex: 1 1 0;
  position: relative;
  overflow: hidden;
  padding-bottom: 56px; /* espacio para dots + flechas */
}

/* Track horizontal scrollable: padding-top a 140px para albergar la chocolatina gigante flotante sin recortes */
.feast-carousel__track {
  display: flex;
  flex-direction: row;
  gap: 33px;
  padding: 140px 24px 36px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  
  /* Efecto difuminado a los bordes (solo lado derecho) */
  -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, black, black calc(100% - 24px), transparent);
}

.feast-carousel__track.is-dragging {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

.feast-carousel__track img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.feast-carousel__track::-webkit-scrollbar {
  display: none;
}

/* Flechas de navegación del carrusel */
.feast-carousel__arrow {
  position: absolute;
  bottom: 12px;
  width: 38px;
  height: 38px;
  background-color: var(--color-black);
  color: var(--color-white);
  border: 2px solid var(--color-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
  z-index: 10;
}

.feast-carousel__arrow--prev {
  right: 64px;
}

.feast-carousel__arrow--next {
  right: 20px;
}

.feast-carousel__arrow:hover {
  background-color: #333;
  transform: scale(1.1);
}

/* Dots de navegación por defecto (Carrusel Chocolatinas: alineados a la izquierda) */
.feast-carousel__dots {
  position: absolute;
  bottom: 20px;
  left: 24px;
  right: 120px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  z-index: 10;
}

/* Dots de navegación en la sección de Combos (Centrados) */
.section-combos-bg .feast-carousel__dots {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  justify-content: center;
}

.feast-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 2.5px solid var(--color-black);
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
  flex-shrink: 0;
  /* El punto visible mide 17px, muy por debajo del mínimo táctil: en un
     teléfono hay que apuntar con precisión de ratón y se falla al de al lado.
     El área de toque se agranda a 32×32 con un pseudo-elemento, así que el
     punto se ve igual (no cambia el diseño) pero se puede tocar con el pulgar.
     Se mantiene el gap de 10px del contenedor, de modo que las áreas
     ampliadas quedan contiguas sin solaparse. */
  position: relative;
}

.feast-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
}

.feast-dot--active {
  background-color: #0069A6;
  transform: scale(1.2);
}

.feast-dot:hover:not(.feast-dot--active) {
  background-color: #e0e0e0;
}

/* ── CARRUSEL DE CHOCOLATINAS EN TABLET/MÓVIL ──────────────────────────────
   Esta sección NO tenía ni una media query: se quedaba en `flex-direction:row`
   con el panel de texto en `flex: 0 0 25vw; min-width: 330px`. A 375px el panel
   se llevaba 330px de los 375 y el track arrancaba en x=354 — es decir, las 17
   chocolatinas quedaban ENTERAS fuera del viewport (medido: primera tarjeta en
   left:354, right:694). En móvil la sección se veía como un bloque celeste con
   un título y nada más: el catálogo principal era invisible.

   Bajo 900px el panel pasa arriba y el carrusel abajo, cada uno a todo el
   ancho — el patrón que ya usa la ficha de producto (.choc-container). */
@media (max-width: 900px) {
  .feast-carousel-section {
    flex-direction: column;
    min-height: 0;
    padding-block: var(--space-10);
  }

  .feast-carousel__panel {
    /* El min-width:330px es lo que rompía el layout: en columna el panel debe
       poder medir lo que mida el viewport. */
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    padding: 0 var(--container-pad) var(--space-6);
    text-align: center;
    align-items: center;
  }

  .feast-carousel__title,
  .feast-carousel__desc,
  .feast-carousel__eyebrow {
    text-align: center;
  }

  .feast-carousel__cta {
    align-self: center;
  }

  .feast-carousel__wrapper {
    width: 100%;
    flex: 0 0 auto;
  }

  .feast-carousel__track {
    /* 140px de padding-top existían para dar aire a la chocolatina flotante
       (top:32px sobre una imagen de hasta 390px); en móvil la tarjeta es más
       chica y ese hueco dejaba media pantalla vacía. */
    padding: 90px 16px 32px;
    gap: 16px;
    /* scroll-snap-align:start alinea la tarjeta con el borde del scrollport
       IGNORANDO el padding: el track se auto-desplazaba 16px y la primera
       tarjeta quedaba pegada al borde con la esquina redondeada cortada.
       scroll-padding le dice al snap que respete el gutter. */
    scroll-padding-inline: 16px;
  }

  /* El panel ocupaba una pantalla completa antes de que apareciera el primer
     producto: el título arrancaba en 41.6px (el piso del clamp de desktop,
     que a 375px no se reduce porque 4.2vw = 15.75px queda por debajo). */
  .feast-carousel__title {
    font-size: clamp(1.9rem, 8.5vw, 2.6rem);
  }

  .feast-carousel__desc {
    font-size: clamp(1rem, 4vw, 1.2rem);
  }
}

/* Las flechas quedaban montadas sobre los dots al reducirse el ancho del
   wrapper; en móvil el gesto es swipe, así que sobran. */
@media (max-width: 640px) {
  .feast-carousel__dots {
    left: 16px;
    right: 16px;
    bottom: 14px;
    justify-content: center;
  }

  /* Los dots de la sección de combos se centraban con `left:50%` +
     translateX(-50%) y `right:auto`. Eso deja el contenedor midiendo sólo de la
     mitad al borde derecho (~187px de 375), así que los 9 puntos se partían en
     dos filas. En móvil se centran usando todo el ancho. */
  .section-combos-bg .feast-carousel__dots {
    left: 16px;
    right: 16px;
    transform: none;
  }

  .feast-carousel__arrow {
    display: none;
  }
}

.feast-card {
  flex: 0 0 340px;
  width: 340px;
  max-width: 340px;
  height: 530px;
  max-height: 530px;
  background-color: var(--color-white);
  border-radius: 20px; /* Bordes suaves redondeados idénticos a la referencia */
  border: none;
  box-shadow: 4px 6px 16px rgba(0, 30, 45, 0.12); /* Sombra definida y natural */
  overflow: visible; /* Permite el overflow flotante de la chocolatina */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

.feast-card:hover {
  /* Sin animación de agrandamiento de la caja */
  box-shadow: 4px 6px 16px rgba(0, 30, 45, 0.12);
}

/* Imagen flotante GIGANTE exactamente igual a la captura de referencia Caramel */
.feast-card__img-link {
  display: flex;
  justify-content: center;
  text-decoration: none;
  width: 100%;
}

.feast-card__img-wrap {
  position: relative;
  width: 100%;
  height: 270px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: transparent;
  border-bottom: none;
  overflow: visible;
}

.feast-card__img {
  max-height: 390px;
  width: auto;
  object-fit: contain;
  position: relative;
  top: 32px; /* Desplaza la chocolatina 32px directamente hacia abajo */
  transition: filter 0.2s ease;
  filter: drop-shadow(0px 10px 22px rgba(0, 0, 0, 0.18));
}

.feast-card:hover .feast-card__img {
  /* Sin animación de escala en la chocolatina */
  transform: none;
}


/* Badge (Oculto temporalmente) */
.feast-card__badge {
  display: none !important;
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--color-feast-yellow);
  color: var(--color-black);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1.5px solid var(--color-black);
  z-index: 2;
}


/* Body de la card: Alineación hacia abajo con padding ajustado */
.feast-card__body {
  padding: 0 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-align: center;
  justify-content: flex-end;
}

.feast-card__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: auto;
  padding-top: 5px;
}

.feast-card__sizes {
  display: flex;
  gap: 6px;
  width: 100%;
  height: 34px;
  margin-top: 4px;
  margin-bottom: 0;
}

.feast-card__sizes--placeholder {
  visibility: hidden;
  height: 18px;
  margin-top: 2px;
  margin-bottom: 0;
}

/* Distancia exacta de 10px entre cajas de tamaño (60g/35g) y botón de agregar */
.feast-card__action {
  margin-top: 10px;
  width: 100%;
  padding-top: 0;
}

/* 2. Título (Title Case: Inicio Mayúscula, Ultra-negrita 900, Altura fija 58px de 2 líneas para nivelación perfecta) */
.feast-card__name {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.65rem;
  font-weight: 900;
  font-style: normal;
  text-transform: capitalize;
  line-height: 1.08;
  margin: 0 0 2px;
  color: #000000;
  letter-spacing: -0.02em;
  height: 58px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  padding-top: 8px;
}

.feast-card__name a {
  text-decoration: none;
  color: inherit;
}

/* 3. Precio (Limpio en color negro, peso 400 regular/menor a medio idéntico al $45.00 de referencia) */
.feast-card__price {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.25rem;
  font-weight: 400; /* Regular / Menor a medio */
  color: #000000;
  margin: 10px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: -0.01em;
}

.feast-card__price-old {
  font-size: 0.85rem;
  font-weight: 400;
  color: #a0a0a0;
  text-decoration: line-through;
}

/* 1. Botón CTA (Plano en reposo, proyecta sombra negra 3D en hover, altura idéntica al stepper 46px) */
.feast-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px; /* Altura idéntica al stepper al agregar */
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  background-color: #FAAA1E; /* Amarillo Dorado por defecto */
  color: #000000;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  font-style: normal; /* Sin itálica */
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0 16px;
  border-radius: 10px;
  border: none;
  box-shadow: none; /* Plano en estado normal */
  margin-top: auto;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}

.feast-card__btn:hover {
  background-color: #FAAA1E; /* No cambia de color */
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0px #000000; /* Proyecta la sombra negra 3D en hover */
}

/* Personalización específica por producto según el color del filo superior/inferior del empaque */

/* 1. Milk Chocolate: Rosado (#E64883) */
.feast-card--milk-chocolate .feast-card__btn {
  background-color: #E64883;
  color: #FFFFFF;
  font-style: normal;
  border: none;
  box-shadow: none;
}
.feast-card--milk-chocolate .feast-card__btn:hover {
  background-color: #E64883;
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0px #000000;
}
.feast-card--milk-chocolate .size-btn.size-btn--active {
  background-color: #E64883;
  border-color: #000000;
  color: #FFFFFF;
}
.feast-card--milk-chocolate .stepper {
  background-color: #E64883;
  border: none;
  box-shadow: none;
}
.feast-card--milk-chocolate .stepper__qty {
  color: #FFFFFF;
}

/* 2. Peanut Butter: Naranja Filo (#EF5F13) */
.feast-card--peanut-butter .feast-card__btn {
  background-color: #EF5F13;
  color: #FFFFFF;
  font-style: normal;
  border: none;
  box-shadow: none;
}
.feast-card--peanut-butter .feast-card__btn:hover {
  background-color: #EF5F13;
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0px #000000;
}
.feast-card--peanut-butter .size-btn.size-btn--active {
  background-color: #EF5F13;
  border-color: #000000;
  color: #FFFFFF;
}
.feast-card--peanut-butter .stepper {
  background-color: #EF5F13;
  border: none;
  box-shadow: none;
}
.feast-card--peanut-butter .stepper__qty {
  color: #FFFFFF;
}

/* 3. Milk Crunch: Rojo Filo (#F4343F) */
.feast-card--milk-crunch .feast-card__btn {
  background-color: #F4343F;
  color: #FFFFFF;
  font-style: normal;
  border: none;
  box-shadow: none;
}
.feast-card--milk-crunch .feast-card__btn:hover {
  background-color: #F4343F;
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0px #000000;
}
.feast-card--milk-crunch .size-btn.size-btn--active {
  background-color: #F4343F;
  border-color: #000000;
  color: #FFFFFF;
}
.feast-card--milk-crunch .stepper {
  background-color: #F4343F;
  border: none;
  box-shadow: none;
}
.feast-card--milk-crunch .stepper__qty {
  color: #FFFFFF;
}

/* 4. Caramel: Caramelo Dorado Filo (#FCAA2B) */
.feast-card--caramel .feast-card__btn {
  background-color: #FCAA2B;
  color: #000000;
  font-style: normal;
  border: none;
  box-shadow: none;
}
.feast-card--caramel .feast-card__btn:hover {
  background-color: #FCAA2B;
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0px #000000;
}
.feast-card--caramel .size-btn.size-btn--active {
  background-color: #FCAA2B;
  border-color: #000000;
  color: #000000;
}
.feast-card--caramel .stepper {
  background-color: #FCAA2B;
  border: none;
  box-shadow: none;
}
.feast-card--caramel .stepper__qty {
  color: #000000;
}

/* 5. Almond: Amarillo Filo (#F8C80F) */
.feast-card--almond .feast-card__btn {
  background-color: #F8C80F;
  color: #000000;
  font-style: normal;
  border: none;
  box-shadow: none;
}
.feast-card--almond .feast-card__btn:hover {
  background-color: #F8C80F;
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0px #000000;
}
.feast-card--almond .size-btn.size-btn--active {
  background-color: #F8C80F;
  border-color: #000000;
  color: #000000;
}
.feast-card--almond .stepper {
  background-color: #F8C80F;
  border: none;
  box-shadow: none;
}
.feast-card--almond .stepper__qty {
  color: #000000;
}

/* 6. Cookies & Creme: Crema Filo (#F0EEDF) */
.feast-card--cookies--creme .feast-card__btn,
.feast-card--cookies-creme .feast-card__btn {
  background-color: #F0EEDF;
  color: #000000;
  font-style: normal;
  border: 2px solid #000000;
  box-shadow: none;
}
.feast-card--cookies--creme .feast-card__btn:hover,
.feast-card--cookies-creme .feast-card__btn:hover {
  background-color: #F0EEDF;
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0px #000000;
}
.feast-card--cookies--creme .size-btn.size-btn--active,
.feast-card--cookies-creme .size-btn.size-btn--active {
  background-color: #F0EEDF;
  border-color: #000000;
  color: #000000;
}
.feast-card--cookies--creme .stepper,
.feast-card--cookies-creme .stepper {
  background-color: #F0EEDF;
  border: 2px solid #000000;
  box-shadow: none;
}
.feast-card--cookies--creme .stepper__qty,
.feast-card--cookies-creme .stepper__qty {
  color: #000000;
}

/* 7. Dark Chocolate: Azul Rey Filo (#096CA8) */
.feast-card--dark-chocolate .feast-card__btn {
  background-color: #096CA8;
  color: #FFFFFF;
  font-style: normal;
  border: none;
  box-shadow: none;
}
.feast-card--dark-chocolate .feast-card__btn:hover {
  background-color: #096CA8;
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0px #000000;
}
.feast-card--dark-chocolate .size-btn.size-btn--active {
  background-color: #096CA8;
  border-color: #000000;
  color: #FFFFFF;
}
.feast-card--dark-chocolate .stepper {
  background-color: #096CA8;
  border: none;
  box-shadow: none;
}
.feast-card--dark-chocolate .stepper__qty {
  color: #FFFFFF;
}

/* 8. Dark Chocolate Sea Salt: Azul Sal Marina Filo (#0C5DA7) */
.feast-card--dark-chocolate-sea-salt .feast-card__btn {
  background-color: #0C5DA7;
  color: #FFFFFF;
  font-style: normal;
  border: none;
  box-shadow: none;
}
.feast-card--dark-chocolate-sea-salt .feast-card__btn:hover {
  background-color: #0C5DA7;
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0px #000000;
}
.feast-card--dark-chocolate-sea-salt .size-btn.size-btn--active {
  background-color: #0C5DA7;
  border-color: #000000;
  color: #FFFFFF;
}
.feast-card--dark-chocolate-sea-salt .stepper {
  background-color: #0C5DA7;
  border: none;
  box-shadow: none;
}
.feast-card--dark-chocolate-sea-salt .stepper__qty {
  color: #FFFFFF;
}

/* 9. Hazelnut Cups: Dorado Avellana (#DAAB7B) */
.feast-card--hazelnut-cups .feast-card__btn {
  background-color: #DAAB7B;
  color: #000000;
  font-style: normal;
  border: none;
  box-shadow: none;
}
.feast-card--hazelnut-cups .feast-card__btn:hover {
  background-color: #DAAB7B;
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0px #000000;
}
.feast-card--hazelnut-cups .stepper {
  background-color: #DAAB7B;
  border: none;
  box-shadow: none;
}
.feast-card--hazelnut-cups .stepper__qty {
  color: #000000;
}

/* 10 & 11. Peanut Butter Cups X 2 y Pack X 5: Naranja Mantequilla de Maní (#EF5F13) */
.feast-card--peanut-butter-cups-x-2 .feast-card__btn,
.feast-card--peanut-butter-cups-pack-x-5 .feast-card__btn {
  background-color: #EF5F13;
  color: #FFFFFF;
  font-style: normal;
  border: none;
  box-shadow: none;
}
.feast-card--peanut-butter-cups-x-2 .feast-card__btn:hover,
.feast-card--peanut-butter-cups-pack-x-5 .feast-card__btn:hover {
  background-color: #EF5F13;
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0px #000000;
}
.feast-card--peanut-butter-cups-x-2 .stepper,
.feast-card--peanut-butter-cups-pack-x-5 .stepper {
  background-color: #EF5F13;
  border: none;
  box-shadow: none;
}
.feast-card--peanut-butter-cups-x-2 .stepper__qty,
.feast-card--peanut-butter-cups-pack-x-5 .stepper__qty {
  color: #FFFFFF;
}

/* 12. Sour Strikes Gummies: Verde Neón (#BACF34) */
.feast-card--sour-strikes-gummies-127g-45oz .feast-card__btn {
  background-color: #BACF34;
  color: #000000;
  font-style: normal;
  border: none;
  box-shadow: none;
}
.feast-card--sour-strikes-gummies-127g-45oz .feast-card__btn:hover {
  background-color: #BACF34;
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0px #000000;
}
.feast-card--sour-strikes-gummies-127g-45oz .stepper {
  background-color: #BACF34;
  border: none;
  box-shadow: none;
}
.feast-card--sour-strikes-gummies-127g-45oz .stepper__qty {
  color: #000000;
}

/* 13. Mario Galaxy Sour Boosts: Morado Galáctico (#7B288A) */
.feast-card--mario-galaxy-sour-boosts .feast-card__btn {
  background-color: #7B288A;
  color: #FFFFFF;
  font-style: normal;
  border: none;
  box-shadow: none;
}

/* 14. Milk Chocolate Pack y Sampler Pack: Rosado (#E64883) */
.feast-card--milk-chocolate-pack .feast-card__btn,
.feast-card--sampler-pack .feast-card__btn {
  background-color: #E64883;
  color: #FFFFFF;
  font-style: normal;
  border: none;
  box-shadow: none;
}
.feast-card--milk-chocolate-pack .feast-card__btn:hover,
.feast-card--sampler-pack .feast-card__btn:hover {
  background-color: #E64883;
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0px #000000;
}
.feast-card--milk-chocolate-pack .stepper,
.feast-card--sampler-pack .stepper {
  background-color: #E64883;
  border: none;
  box-shadow: none;
}
.feast-card--milk-chocolate-pack .stepper__qty,
.feast-card--sampler-pack .stepper__qty {
  color: #FFFFFF;
}

/* ── Tarjeta de chocolatina en móvil ───────────────────────────────────────
   340px fijos (+ 530px de alto fijo) no caben en un viewport de 375px con el
   padding del track: la tarjeta salía cortada por el borde derecho. Con 78vw
   se ve la tarjeta actual y un adelanto de la siguiente, que es la señal de
   que el carrusel se desliza. El alto pasa a `auto` porque al angostarse la
   tarjeta el título ocupa más renglones y a 530px fijos se desbordaba.

   Va DESPUÉS de las 14 variantes .feast-card--* a propósito: mismo peso de
   especificidad, así que gana la que se declara al final. */
@media (max-width: 640px) {
  .feast-card {
    flex: 0 0 78vw;
    width: 78vw;
    max-width: 300px;
    height: auto;
    max-height: none;
  }

  .feast-card__img-wrap {
    height: 190px;
  }

  .feast-card__img {
    max-height: 260px;
    top: 20px;
  }

  .feast-card__name {
    font-size: 1.3rem;
    height: 48px;
  }

  .feast-card__body {
    padding: 0 16px 18px;
  }
}

/* ── NUEVO FOOTER FEASTABLES COLOMBIA ── */
.site-footer-new {
  position: relative;
  width: 100%;
}

.footer-cyan-bar {
  position: relative;
  width: 100%;
  padding-block: 2.5rem;
  background: #38C5F6;
  background-image: 
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(255, 255, 255, 0.16) 0deg 12deg,
      transparent 12deg 24deg
    );
  border-top: 4px solid #000000;
}

.footer-cyan-box {
  background-color: #4ED4FF;
  border: 3.5px solid #000000;
  border-radius: 20px;
  padding: 5% 7% 40px 7%;
  box-shadow: 0px 6px 0px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
}

@media (max-width: 992px) {
  .footer-cyan-box {
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    border-radius: 14px;
  }
}

/* Grid de 2 Columnas Principales (60% / 40%) */
/* minmax(0, …) en vez de `1.25fr 1fr` a secas: `1fr` es un atajo de
   `minmax(auto, 1fr)`, y ese `auto` significa "nunca menos que el min-content
   del contenido". Los títulos del footer son Kanit 900 a 1.5rem, así que el
   min-content de la sub-grilla de navegación era 447px y la columna se
   estiraba a 447px DENTRO de un contenedor de 270px: era la causa del scroll
   horizontal de todo el sitio (document.scrollWidth 499px a 375px de ancho).
   Con minmax(0, …) la columna puede encogerse y el texto envuelve. */
.footer-cyan-box__main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}

@media (max-width: 992px) {
  .footer-cyan-box__main-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
}

/* Mismo motivo: los ítems de grid traen min-width:auto y no se dejan encoger
   por debajo de su palabra más larga si no se les dice explícitamente. */
.footer-cyan-box__col-left,
.footer-cyan-box__col-right {
  min-width: 0;
}

/* Columna Izquierda: Navegación de 3 columnas */
/* auto-fit en vez de repeat(3, …) fijo: la navegación vive dentro de la
   columna de 1.25fr del grid principal, así que a 1024px cada una de las 3
   columnas medía sólo 117px y palabras sueltas como "Devoluciones" (148px a
   1.25rem) se salían de su columna. Con auto-fit + minmax(150px, 1fr) el
   footer usa 3 columnas cuando hay sitio (≥1440px, el ancho del diseño), 2
   cuando no, y nunca deja una columna más angosta que su contenido. */
.footer-nav-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2.5rem;
}

@media (max-width: 600px) {
  .footer-nav-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* A 2 columnas de ~150px, "INFORMACIÓN" a 1.5rem/900 medía 212px y forzaba el
   ancho de la columna. Se baja el cuerpo de títulos y enlaces en móvil. */
@media (max-width: 600px) {
  .footer-nav-title {
    font-size: 1.15rem;
    line-height: 1.5rem;
  }

  .footer-nav-list a,
  .footer-nav-badge {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  /* Filas táctiles: los enlaces del footer eran texto de 1 línea sin área de
     toque propia (WCAG 2.5.5). */
  .footer-nav-list a {
    display: flex;
    align-items: center;
    min-height: 40px;
  }
}

/* Bajo 480px las 2 columnas quedan en ~116px cada una y las etiquetas en
   español no caben en una palabra: "INFORMACIÓN" medía 168px y se salía de su
   columna (partirla a mitad de palabra se ve peor que apilar). Los 3 grupos
   pasan a una sola columna, que es además el patrón normal de footer en
   móvil. */
@media (max-width: 480px) {
  .footer-nav-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .footer-nav-title {
    font-size: 1.25rem;
  }
}

/* Red de seguridad: si mañana entra una etiqueta más larga, se parte en vez de
   desbordar la columna. */
.footer-nav-title,
.footer-nav-list a,
.footer-nav-badge {
  overflow-wrap: break-word;
}

.footer-nav-title {
  font-family: var(--font-heading), 'Outfit', sans-serif;
  font-weight: 900;
  /* Fluido en vez de 1.5rem fijo: la columna de navegación mide ~181px entre
     993px y 1200px de viewport, y "INFORMACIÓN" a 1.5rem/900 mide 212px — se
     salía de su columna 31px. El clamp la mantiene dentro en todo el rango y
     recupera los 1.5rem del diseño en pantallas grandes. */
  font-size: clamp(1.1rem, 1.35vw, 1.5rem);
  line-height: 1.35;
  color: #492425;
  letter-spacing: 0.5px;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer-nav-list a {
  font-family: var(--font-heading), 'Outfit', sans-serif;
  font-weight: 700;
  font-style: italic;
  /* Fluido por el mismo motivo que .footer-nav-title: a 1.25rem fijos
     "Devoluciones" mide 148px y no cabía en la columna en el rango 993-1200px. */
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  line-height: 1.5;
  color: #492425;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.footer-nav-list a:hover {
  color: #000000;
  transform: translateX(3px);
}

.footer-nav-badge {
  font-family: var(--font-heading), 'Outfit', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: #492425;
  display: inline-block;
}

.footer-nav-badge.bold-highlight {
  background-color: #FFF200;
  color: #000000;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: 1.5px solid #000000;
  font-weight: 900;
}

/* Logo Grande Centrado en la mitad de las 3 columnas */
.footer-cyan-box__brand-bottom {
  margin-top: 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  width: 100%;
}

.footer-cyan-box__logo-large {
  max-height: 180px;
  width: auto;
  object-fit: contain;
}

.footer-cyan-box__copyright-left {
  font-family: var(--font-body), sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: #492425;
  margin: 0;
  text-align: center;
}

/* Columna Derecha: Redes + El Suscriptor + Bold (Centrado) */
.footer-cyan-box__col-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.75rem;
}

.footer-socials-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.footer-social-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #FFFFFF;
  border: 2.5px solid #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  box-shadow: 2.5px 2.5px 0px #000000;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.footer-social-btn:hover {
  transform: translate(-2px, -2px);
  background-color: #FFFFFF;
  box-shadow: 4.5px 4.5px 0px #000000;
  color: #000000;
}

/* Formulario Suscriptor (Estilo Oficial Feastables) */
.footer-newsletter-box {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-newsletter-tag {
  font-family: var(--font-heading), 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 0.85rem;
  color: #492425;
  letter-spacing: 0.5px;
  margin: 0 0 0.3rem 0;
  text-align: center;
}

.footer-newsletter-title {
  font-family: var(--font-heading), 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 0.95rem;
  color: #492425;
  letter-spacing: 0.3px;
  margin: 0 0 1rem 0;
  text-align: center;
}

.footer-newsletter-form {
  display: flex;
  width: 100%;
  gap: 0;
  box-shadow: none;
  border: 3.5px solid #000000;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
}

.footer-newsletter-input {
  flex: 1;
  /* Los <input> traen un ancho intrínseco por defecto (~size=20 caracteres) y
     como ítem flex no bajan de él sin un min-width:0 explícito. Con el botón
     al lado (173px) la fila medía 441px dentro de una caja de 268px y se salía
     del footer: era el último resto de scroll horizontal a 320px. */
  min-width: 0;
  padding: 0.9rem 1.25rem;
  border: none;
  font-family: var(--font-heading), 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  background: #FFFFFF;
  color: #000000;
  outline: none;
  letter-spacing: 0.5px;
}

.footer-newsletter-input::placeholder {
  color: #6B7280;
  font-weight: 900;
  font-family: var(--font-heading), 'Outfit', sans-serif;
}

.footer-newsletter-submit {
  padding: 0.9rem 1.6rem;
  background-color: #0088B5;
  color: #FFFFFF;
  border: none;
  border-left: 3.5px solid #000000;
  font-family: var(--font-heading), 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.footer-newsletter-submit:hover {
  background-color: #007096;
}

/* Bajo 420px el input y el botón lado a lado dejan al input en ~90px: no cabe
   ni un correo corto. Se apilan y el formulario pasa a dos filas. */
@media (max-width: 420px) {
  .footer-newsletter-form {
    flex-direction: column;
  }

  .footer-newsletter-submit {
    border-left: none;
    border-top: 3.5px solid #000000;
    width: 100%;
  }
}

.footer-newsletter-disclaimer {
  font-family: var(--font-body), sans-serif;
  font-size: 0.85rem;
  color: #000000;
  font-weight: 700;
  margin-top: 0.75rem;
  text-align: center;
}

.footer-newsletter-disclaimer a {
  color: #000000;
  text-decoration: underline;
  font-weight: 800;
}

.footer-cyan-box__bold-powered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: 100%;
  margin-top: 1.25rem;
}

.bold-brand-badge {
  background: #111827;
  color: #38C5F6;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  border: 1.5px solid #000;
}

/* Divisor Horizontal Interno */
.footer-cyan-box__divider {
  height: 2px;
  background-color: rgba(73, 36, 37, 0.22);
  width: 100%;
  margin-top: 2.7rem;
  margin-bottom: 2.2rem;
}

/* Pie Inferior Interno */
.footer-cyan-box__bottom-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem 1.2rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #492425;
  margin-top: 1rem;
}

.footer-cyan-box__bottom-legal a {
  color: #492425;
  text-decoration: none;
}

.footer-cyan-box__bottom-legal a:hover {
  text-decoration: underline;
}

.footer-cyan-box__shipping-text {
  font-family: var(--font-body), 'Inter', sans-serif;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 800;
  line-height: 1.5;
  color: #492425;
  text-align: center;
  margin: 0;
  max-width: 920px;
  margin-inline: auto;
}

/* Botón flotante WhatsApp */
.floating-whatsapp-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: #25D366;
  border: 3.3px solid #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0px 4px 0px #000000;
  z-index: 1000;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.floating-whatsapp-btn:hover {
  transform: scale(1.1);
  background-color: #20BA5A;
}

.btn-store {
  margin-top: 0.5rem;
  padding: 0.75rem 2rem;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 99px;
  font-weight: 900;
  cursor: pointer;
}


/* ── FICHA DE CHOCOLATE (/chocolatinas/{slug}/) ───────────────────────────────
   Este bloque se había perdido: quedó solo el @media de abajo, huérfano. Sin
   las reglas base, .choc-container caía a `display:block` y el panel de
   selección terminaba debajo de una imagen de 850px de alto — invisible sin
   scroll, aunque el HTML y Alpine funcionaban. Reconstruido desde la
   referencia de marca. */

.chocolate-detail {
  /* Transparente a propósito: deja ver la textura de papel del body, que es
     el fondo general del sitio (el mockup del cliente la muestra). */
  background-color: transparent;
  border-bottom: var(--border-thick);
}

.choc-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* stretch (default): con "start" la columna del panel medía solo lo que
     ocupaba su contenido y el justify-content:center de .choc-panel-col no
     tenía espacio de sobra donde centrar — quedaba pegada arriba. */
  align-items: stretch;
}

/* Altura fija de la sección para las 17 chocolatinas (no para combos/merch,
   que reusan .choc-container con su propio contenido): sin esto, un sabor
   con selector de tamaño + título de 2 líneas (ej. Milk Chocolate) medía
   ~200px más que uno sin selector y título de 1 línea (Almond, Caramel), y
   como la foto crece para llenar la columna (flex:1 1 0 en .choc-main-image),
   ese salto de alto hacía que la foto se viera más chica al cambiar de
   sabor. Con un piso fijo, los cortos quedan con la misma altura que el más
   alto (medido: 949px en Dark Chocolate Sea Salt) y la foto se ve del mismo
   tamaño en las 17. min-height (no height): si algún nombre futuro fuera aún
   más largo, la sección crece en vez de recortar contenido. */
.chocolate-detail:not(.combo-detail) .choc-container {
  min-height: 960px;
}

@media (max-width: 900px) {
  .chocolate-detail:not(.combo-detail) .choc-container {
    min-height: 0;
  }
}

/* Columna izquierda: foto sobre el celeste Feastables con rayitos radiales,
   igual al fondo de la galería de producto en feastables.com (recreado como
   asset propio en vez de enlazar su CDN). */
.choc-image-col {
  background-color: #72E2FF;
  background-image: url('/assets/images/ui/rayos-fondo.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-right: var(--border-thick);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  position: relative;
  overflow: hidden;
}

/* Nubes decorativas de la columna de foto — flotan suavemente arriba/abajo,
   igual que los globos del FAQ pero sin la rotación (acá no pega con el
   producto que gira debajo). */
.choc-cloud {
  position: absolute;
  filter: drop-shadow(1px 2px 0px rgba(0, 0, 0, 0.25));
  pointer-events: none;
  animation: floatCloud 5s ease-in-out infinite;
}

.choc-cloud--left {
  top: 8%;
  left: 5%;
}

.choc-cloud--right {
  bottom: 10%;
  right: 6%;
  animation-duration: 6s;
  animation-delay: -2s; /* desfasada: que no floten sincronizadas */
}

@keyframes floatCloud {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 900px) {
  .choc-cloud {
    transform: scale(0.7);
  }
  .choc-cloud--left { top: 3%; left: 2%; }
  .choc-cloud--right { bottom: 4%; right: 2%; }
}

.choc-main-image {
  /* La columna es tan alta como el panel de la derecha (título + precio +
     tamaños + sabores + footer), que le saca mucha ventaja a la foto. En vez
     de fijar un ancho y dejar que sobre celeste arriba/abajo, la foto CRECE
     para ocupar todo el alto disponible (flex-basis:0 fuerza a ignorar su
     tamaño intrínseco) y object-fit:contain la escala manteniendo proporción
     — como el "letterbox" es transparente y el fondo celeste es el mismo
     adentro y afuera, no se nota el recorte, solo se ve la foto grande. */
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  max-width: 780px;
  object-fit: contain;
  display: block;
}

.choc-panel-col {
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}

/* El bloque no se estira a todo el ancho de la columna: en el diseño de
   referencia el panel es compacto y va centrado, con aire a los lados. El
   título se mide contra este mismo ancho, así que ambos quedan alineados. */
.choc-header-text,
.choc-panel-col .choc-panel {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

.choc-eyebrow {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-black);
}

/* Título: relleno en el color del sabor + contorno negro, una línea por
   palabra y cada línea escalada al ancho (el font-size lo calcula Alpine
   según el largo). */
.choc-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.78;
}

.choc-title__line {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tema, #E64883);
  /* El trazo se centra sobre el contorno de la letra, así que la mitad queda
     tapada por el relleno: para ver ~3px por fuera hay que pedir 6px. */
  -webkit-text-stroke: 6px var(--color-black);
  paint-order: stroke fill;
}

/* Descripción breve de la prenda, entre el título y el panel de compra. El
   título usa line-height 0.78 para apretar sus renglones, así que necesita un
   margen superior propio: sin él el texto quedaba pegado a las letras de
   arriba. */
.choc-desc {
  margin: var(--space-4) 0 var(--space-5);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-black);
  max-width: 46ch; /* renglones cortos, más fáciles de barrer con la vista */
}

/* Panel bordeado que agrupa precio, tamaño, sabores y compra.
   Todo lo de adentro se mide en cqw contra el ancho del propio panel, para
   que las proporciones internas (altura de botones, gaps, paddings) sean las
   mismas del diseño de referencia sin importar cuánto mida el panel. Los
   clamp() ponen piso y techo para que en móvil no quede ilegible. */
.choc-panel {
  border: var(--border-thick);
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--color-cream);
  container-type: inline-size;
}

.choc-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: clamp(8px, 3.0cqw, 18px) clamp(16px, 7.1cqw, 40px);
  border-bottom: var(--border-thick);
  line-height: 1.2; /* sin esto el 1.6 heredado del body inflaba la fila */
}

.choc-panel__header-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(13px, 3.5cqw, 20px);
  text-transform: uppercase;
}

.choc-panel__rating {
  color: #C6F03C;
  -webkit-text-stroke: 1px var(--color-black);
  paint-order: stroke fill;
  font-size: clamp(12px, 3.5cqw, 20px);
  letter-spacing: 2px;
}

/* Padding asimétrico: en la referencia hay más aire arriba (bajo la línea
   divisoria) que abajo. */
.choc-panel__section {
  /* padding-top bajado ~20px: el hueco entre la línea divisoria y el texto
     "SELECCIONA UN TAMAÑO" era mucho más grande que en la referencia. */
  padding: clamp(4px, 1.2cqw, 7px) clamp(16px, 7.1cqw, 40px) clamp(9px, 3.2cqw, 18px);
  border-bottom: var(--border-thick);
}

/* La grilla de sabores necesita su propio aire: a diferencia del selector de
   tamaño (arriba), acá el mismo padding asimétrico dejaba las cajas de sabor
   pegadas arriba y con más aire abajo/costados — parejo en los 4 lados. */
.choc-panel__section--flavors {
  padding-top: clamp(16px, 7.1cqw, 40px);
  padding-bottom: clamp(16px, 7.1cqw, 40px);
}

.choc-panel__section-title {
  margin: 0 0 clamp(4px, 1.6cqw, 9px);
  font-family: var(--font-display);
  font-size: clamp(11px, 3.0cqw, 17px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Sección del selector de tamaño: necesita position:relative para anclar la
   flecha que apunta a los 2 botones de abajo. */
.choc-panel__section--size {
  position: relative;
}

/* Flecha que señala los 2 botones de tamaño — reemplaza al sticker circular
   anterior: apuntar directo se entiende más rápido que un número suelto.
   Flota arriba/abajo sin parar para engancharla con el ojo apenas se entra
   a la sección (sin esto la gente no notaba que había King Size y Standard). */
/* El `right` deja la punta sobre el centro del botón "Standard Size" (el
   segundo): la punta del SVG cae a ~44px de su borde derecho, y el botón
   derecho tiene su centro a ~148px del borde derecho del panel. */
.choc-size-arrow {
  position: absolute;
  top: -34px;
  right: clamp(24px, 20cqw, 105px);
  pointer-events: none;
  animation: sizeArrowFloat 1.8s ease-in-out infinite;
}

@keyframes sizeArrowFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* Control segmentado: en la referencia los dos tamaños van PEGADOS,
   compartiendo una sola línea divisoria — no son píldoras separadas. */
.choc-size-selector {
  display: flex;
  gap: 0;
}

/* ── SELECTOR EN GRILLA ────────────────────────────────────────────────────
   Para opciones de etiqueta larga (los 7 sabores de chocolatina de combo-2 y
   combo-5, los packs de combo-3, los cups de combo-7). El control segmentado
   les daba ~90px por botón y "PEANUT BUTTER" salía partido en tres renglones
   con el texto cortado; acá cada botón tiene ancho mínimo y las filas se
   acomodan solas. Los botones dejan de compartir borde, así que recuperan su
   radio completo y el margen negativo de la costura no aplica. */
.choc-size-selector--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(96px, 30cqw, 150px), 1fr));
  gap: clamp(6px, 1.6cqw, 10px);
}

.choc-size-selector--grid .choc-size-btn {
  min-height: clamp(36px, 8.5cqw, 48px);
  padding: clamp(4px, 1.2cqw, 8px) clamp(6px, 1.8cqw, 10px);
  border-radius: 6px;
  /* El texto largo ya no se corta: cabe en dos renglones si hace falta. */
  font-size: clamp(10px, 2.5cqw, 14px);
  line-height: 1.1;
  white-space: normal;
}

.choc-size-selector--grid .choc-size-btn:first-of-type,
.choc-size-selector--grid .choc-size-btn:last-of-type {
  border-radius: 6px;
}

.choc-size-selector--grid .choc-size-btn + .choc-size-btn {
  margin-left: 0;
}

.choc-size-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: clamp(30px, 6.9cqw, 40px);
  padding: 0 var(--space-2);
  /* Columna para que la marca "AGOTADO" de los combos quede debajo del valor
     (las tallas van 6 en fila: al lado no cabría). Con un único hijo de texto
     —chocolatinas, merch— centra igual que antes. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: var(--border-thin);
  /* Radio solo en las esquinas exteriores del grupo — con las 4 esquinas
     redondeadas en ambos botones, el punto de unión quedaba con una muesca
     en vez de una costura recta (las curvas se separan en vez de tocarse). */
  border-radius: 0;
  background-color: var(--color-cream);
  font-family: var(--font-display);
  font-size: clamp(11px, 3.0cqw, 17px);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* :first-child no sirve aquí: Alpine deja el <template> del x-for como nodo
   hijo real (vacío) antes del primer botón renderizado, así que el primer
   <button> nunca es :first-child. :first-of-type / :last-of-type sí ignoran
   ese <template>, porque no es del mismo tipo de elemento. */
.choc-size-btn:first-of-type {
  border-radius: 6px 0 0 6px;
}

.choc-size-btn:last-of-type {
  border-radius: 0 6px 6px 0;
}

/* El borde compartido se solapa para que quede una sola línea, no dos. */
.choc-size-btn + .choc-size-btn {
  margin-left: -2px;
}

.choc-size-btn:hover {
  background-color: #E5DCCD;
}

.choc-size-btn.active {
  background-color: #C6F03C; /* verde lima de los mockups */
  color: var(--color-black);
}

/* ── OPCIÓN AGOTADA (combos) ───────────────────────────────────────────────
   Una talla o color puntual sin stock. Se marca la opción —no se bloquea la
   ficha— porque el combo sí se puede armar con otra: el visitante tiene que
   ver que le falta UNA pieza y cuál. El botón sigue siendo clickeable a
   propósito: al elegirlo aparece el aviso que lo explica. */
.choc-size-btn.is-agotado {
  background-color: #E3DAC9;
  color: #7A7266;
}

.choc-size-btn.is-agotado .choc-size-btn__val {
  text-decoration: line-through;
}

/* Elegida y agotada: se despinta del verde "disponible" y se resalta en rosa
   de error, que es lo que la sección del botón está diciendo al mismo tiempo. */
.choc-size-btn.is-agotado.active {
  background-color: #FBD8EE;
  border-color: var(--color-feast-pink);
  color: var(--color-black);
}

.choc-size-btn__agotado {
  font-size: clamp(6px, 1.6cqw, 9px);
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-feast-pink);
}

/* Aviso bajo el selector de tallas: el recargo de las tallas adultas de los
   buzos. Mismo tratamiento que el resto de las notas del panel (rosa de
   marca, seminegrita) para que se lea como parte del bloque de tallas y no
   como un error. */
.choc-size-note {
  font-size: clamp(0.8rem, 3cqw, 0.95rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-feast-pink);
  margin: 10px 0 0 0;
}

/* Grilla de sabores — 2 columnas con radio, igual que la referencia */
/* El gap vertical es MENOR que el horizontal en la referencia (2.9% vs 4.8%);
   con ambos iguales las filas se veían despegadas. */
.choc-flavor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(10px, 4.8cqw, 27px);
  row-gap: clamp(7px, 2.9cqw, 16px);
}

/* Padding lateral y separación radio-texto ajustados a la referencia (2.1% y
   0.9%). Con valores mayores no cabía "MILK CHOCOLATE" en una línea y el
   botón crecía al doble de alto. */
.choc-flavor-btn {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.9cqw, 6px);
  width: 100%;
  min-height: clamp(36px, 9.6cqw, 54px);
  padding: clamp(4px, 1.2cqw, 8px) clamp(7px, 2.1cqw, 12px);
  border: var(--border-thin);
  border-radius: 6px;
  background-color: var(--color-cream);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.choc-flavor-btn:hover {
  background-color: #E5DCCD;
}

/* El activo no se pinta de fondo: en los mockups solo se rellena el radio con
   el color del sabor y el borde engorda. */
.choc-flavor-btn.active {
  border-width: 3px;
}

.radio-circle {
  flex: 0 0 auto;
  width: clamp(16px, 4.7cqw, 26px);
  height: clamp(16px, 4.7cqw, 26px);
  border: 3px solid var(--color-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El relleno ocupa todo el interior del círculo — en la referencia no queda
   halo blanco entre el borde negro y el color. */
.radio-fill {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--tema, #E64883);
}

.choc-flavor-name {
  font-family: var(--font-display);
  font-size: clamp(11px, 3.4cqw, 19px);
  font-weight: 800;
  font-style: italic;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Variante para el selector de merch (camisetas/buzos/gorras): a diferencia
   de los sabores de chocolate (1 palabra, 1 línea), acá el nombre trae 3-4
   palabras y envuelve en varias líneas — con el padding/alto mínimo/gap
   pensados para una sola línea, las cajas quedaban apretadísimas. Acá se les
   da más aire y se alinea todo arriba en vez de centrado, que es lo que se
   ve raro cuando el texto ocupa varias líneas junto a un radio pequeño. */
.choc-flavor-grid--merch {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  column-gap: clamp(12px, 5cqw, 24px);
  row-gap: clamp(10px, 4cqw, 20px);
}

.choc-flavor-btn--merch {
  align-items: flex-start;
  gap: clamp(8px, 2.4cqw, 12px);
  min-height: clamp(56px, 15cqw, 78px);
  padding: clamp(10px, 3.2cqw, 16px) clamp(10px, 3cqw, 14px);
}

/* El radio queda vertical-céntrico respecto a la primera línea de texto, no
   respecto a las 3-4 líneas completas. */
.choc-flavor-btn--merch .radio-circle {
  margin-top: 0.15em;
}

.choc-flavor-btn--merch .choc-flavor-name {
  font-size: clamp(10.5px, 2.7cqw, 15px);
  line-height: 1.3;
}

/* Pie: cantidad + añadir al carrito, sobre el celeste de marca */
.choc-panel__footer {
  display: flex;
  align-items: stretch;
  gap: clamp(8px, 3.4cqw, 18px);
  padding: clamp(12px, 4.8cqw, 27px) clamp(16px, 7.1cqw, 40px);
  background-color: #22C3F3;
  border-top: var(--border-thick);
}

.choc-qty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  border: var(--border-thin);
  border-radius: 6px;
  background-color: var(--color-white);
}

.qty-btn {
  border: none;
  background: none;
  padding: var(--space-2);
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.qty-val {
  min-width: 1.5rem;
  text-align: center;
  font-weight: 800;
}

.choc-add-btn {
  flex: 1 1 auto;
  min-height: clamp(34px, 10.5cqw, 56px);
  padding: 0 var(--space-4);
  border: var(--border-thin);
  border-radius: 6px;
  background-color: var(--tema-btn, #E64883);
  color: var(--tema-btn-texto, var(--color-white));
  font-family: var(--font-display);
  font-size: clamp(14px, 4.1cqw, 22px);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.choc-add-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.choc-add-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Enlace suelto FUERA del panel ("COMPRAR PACKS"), como el texto subrayado bajo
   la caja en los mockups. No es un botón a propósito: debe pesar menos que ADD
   TO BAG. Mismo ancho máximo que el panel para que quede alineado con él (el
   gap de .choc-panel-col da la separación). */
.choc-panel-link {
  display: block;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  /* Guiño cada 7s (ver keyframes): el 70% del ciclo está quieto, así llama la
     atención sin convertirse en un parpadeo constante al lado de la flecha del
     selector de tamaño, que ya se mueve. Arranca a los 3s para no competir con
     la entrada de la página. */
  animation: packLinkGuino 7s ease-in-out 3s infinite;
}

/* Con el mouse encima se CORTA la animación en vez de pausarla: los valores
   animados le ganan en el cascade a los del :hover, así que pausándola el
   enlace se quedaría del color del guiño y no reaccionaría al puntero. */
.choc-panel-link:hover,
.choc-panel-link:focus-visible {
  animation: none;
  color: var(--color-feast-pink);
  transform: scale(1.04);
}

/* Brillo (rosa de marca, dos halos) + zarandeo. El destello y el movimiento van
   juntos en un solo keyframes para que ocurran en el mismo instante del ciclo. */
@keyframes packLinkGuino {
  0%, 70% {
    transform: scale(1) rotate(0deg);
    color: var(--color-black);
    text-shadow: none;
  }
  74% {
    transform: scale(1.07) rotate(-2.5deg);
    color: var(--color-feast-pink);
    text-shadow: 0 0 10px rgba(242, 19, 164, 0.85), 0 0 22px rgba(242, 19, 164, 0.45);
  }
  79% {
    transform: scale(1.07) rotate(2.5deg);
    color: var(--color-feast-pink);
    text-shadow: 0 0 14px rgba(242, 19, 164, 1), 0 0 30px rgba(242, 19, 164, 0.6);
  }
  84% {
    transform: scale(1.07) rotate(-2.5deg);
    color: var(--color-feast-pink);
    text-shadow: 0 0 14px rgba(242, 19, 164, 1), 0 0 30px rgba(242, 19, 164, 0.6);
  }
  89% {
    transform: scale(1.07) rotate(2deg);
    color: var(--color-feast-pink);
    text-shadow: 0 0 10px rgba(242, 19, 164, 0.85), 0 0 22px rgba(242, 19, 164, 0.45);
  }
  94%, 100% {
    transform: scale(1) rotate(0deg);
    color: var(--color-black);
    text-shadow: none;
  }
}

/* Quien pide menos movimiento en el sistema se queda con el enlace quieto — el
   destino y el subrayado no dependen de la animación. */
@media (prefers-reduced-motion: reduce) {
  .choc-panel-link {
    animation: none;
  }
}

/* La ficha de chocolate hereda el estado de stock del resto del sitio, pero
   aquí vive dentro del panel bordeado y necesita su propio respiro. */
.chocolate-detail .product-detail__stock-status {
  padding: clamp(8px, 2.8cqw, 15px) clamp(16px, 7.1cqw, 40px);
  border-bottom: var(--border-thick);
  font-size: clamp(10px, 2.8cqw, 15px);
  font-weight: 600;
}

/* ── FICHA DE COMBO ─────────────────────────────────────────────────────────
   Reusa el layout de la ficha de chocolate (.choc-*) con dos diferencias: la
   foto manda en la columna izquierda, y los productos que trae el combo van
   en una fila bajo ella. El título se pinta con el color_tema del combo, que
   el <section> expone como --tema igual que en la ficha de chocolate. */

/* La foto ya no estira para llenar la columna (ver abajo), así que en los
   combos con muchas opciones —donde el panel de la derecha es más alto que
   foto + fila de productos— el sobrante de celeste se reparte arriba y abajo
   en vez de acumularse abajo. */
.combo-detail .choc-image-col {
  justify-content: center;
}

/* La foto del combo es cuadrada y es el argumento de venta, así que ocupa
   todo el ancho de la columna. Con el flex:1 1 0 + object-fit:contain que
   hereda de .choc-main-image quedaba encajada en el alto que sobraba, y lo
   que sobraba era poco: la fila de productos y las miniaturas se llevaban
   más de la mitad, dejando la foto en ~360px dentro de una columna de 640. */
.combo-detail .choc-main-image {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Los productos que trae el combo, en fila horizontal bajo la foto. Son 4 como
   máximo, así que entran sin envolver. El layout va acá y no en un style=""
   del template: x-show borra la propiedad display del inline al mostrar el
   bloque, así que un display:flex escrito ahí desaparecía y la fila caía al
   display:block por defecto — los ítems quedaban en vertical. */
.combo-items-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 18px);
  width: 100%;
}

.combo-item {
  flex: 1 1 0;
  min-width: 0;
  max-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.combo-item__img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  /* `contain` + padding, no `cover`: estas miniaturas ahora traen la foto de
     catálogo del producto (empaques verticales, mugs, figuras) y recortarlas a
     un cuadrado les cortaba media pieza. El fondo blanco es el del recuadro,
     no el de la foto. */
  object-fit: contain;
  padding: 6px;
  background-color: var(--color-white);
  border: var(--border-thin);
  border-radius: 10px;
}

.combo-item__name {
  font-family: var(--font-display);
  font-size: clamp(9px, 1.1vw, 13px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-black);
}

@media (max-width: 900px) {
  /* minmax(0, 1fr), no `1fr`: la regla base ya usaba minmax pero este override
     de móvil lo perdía, y con `1fr` la columna no baja del min-content de su
     contenido — en la ficha de combo-mug se salía 14px a 320px. */
  .choc-container {
    grid-template-columns: minmax(0, 1fr);
  }
  .choc-image-col {
    border-right: none;
    border-bottom: var(--border-thick);
    padding: var(--space-5) var(--space-4);
  }
  .choc-main-image {
    flex: none;
    max-height: 70vh;
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .choc-flavor-grid {
    grid-template-columns: 1fr;
  }
  .choc-title {
    font-size: 3rem;
  }
  .choc-panel__footer {
    flex-direction: column;
  }
}

/* Gallery Thumbnails — círculos pequeños, como en feastables.com */
.product-gallery-btn {
  border: 2px solid transparent;
  border-radius: 50%;
  overflow: hidden;
  width: 52px;
  height: 52px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  background: #fff;
  transition: border-color 0.2s ease;
}
.product-gallery-btn:hover {
  border-color: #ddd;
}
.product-gallery-btn.active {
  border-color: var(--color-black) !important;
}

/* Variante del producto en el mini-carrito (talla, sabor, color). Va bajo
   el nombre y no dentro de él: el nombre debe poder leerse de un vistazo. */
.cart-item__variant {
  margin: .15rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6a6a6a;
  text-transform: none;
}

/* ══════════════════════════════════════════════════════════════════════
   POPUP DE LA BEASTLIST
   Estilo del sitio (azul de marca, borde negro, esquinas redondeadas),
   pero contenido: es una interrupción, así que entra suave y se puede
   cerrar de tres formas distintas.
   ══════════════════════════════════════════════════════════════════════ */
.bl-popup {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.bl-popup__fondo {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .55);
}
.bl-popup__panel {
  position: relative;
  width: 100%; max-width: 440px;
  max-height: calc(100vh - 2rem); overflow-y: auto;
  padding: 2rem 1.75rem 1.5rem;
  text-align: center;
  background: var(--color-feast-blue);
  border: 4px solid var(--color-black);
  border-radius: 20px;
  box-shadow: 8px 8px 0 var(--color-black);
  animation: bl-popup-entrada .28s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes bl-popup-entrada {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
/* Respeta a quien pidió menos animación en su sistema. */
@media (prefers-reduced-motion: reduce) {
  .bl-popup__panel { animation: none; }
}
.bl-popup__cerrar {
  position: absolute; top: .75rem; right: .75rem;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1; color: var(--color-black);
  background: var(--color-white);
  border: 3px solid var(--color-black); border-radius: 10px;
  cursor: pointer;
}
.bl-popup__cerrar:hover { background: var(--color-feast-yellow); }
.bl-popup__imagen { display: block; margin: 0 auto .75rem; height: auto; max-width: 150px; }
.bl-popup__titulo {
  /* Espacio a la derecha para que el título no pase por debajo del botón
     de cerrar (38px + 12px de separación). */
  margin: 0 0 .625rem;
  padding: 0 3rem;
  font-family: var(--font-display), sans-serif;
  font-size: 1.6rem; line-height: 1.1; font-weight: 900;
  color: var(--color-white);
  -webkit-text-stroke: 2px var(--color-black);
  paint-order: stroke fill;
}
.bl-popup__texto {
  margin: 0 0 1.25rem; font-size: .9375rem; line-height: 1.45;
  color: var(--color-black);
}
.bl-popup__form { display: flex; flex-direction: column; gap: .625rem; }
.bl-popup__input {
  width: 100%; box-sizing: border-box; padding: .875rem 1rem;
  font-family: inherit; font-size: 1rem; text-align: center;
  background: var(--color-white);
  border: 3px solid var(--color-black); border-radius: 12px;
}
.bl-popup__input:focus {
  outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0, .25);
}
.bl-popup__btn {
  width: 100%; padding: .9375rem 1rem;
  font-family: var(--font-display), sans-serif;
  font-size: 1rem; font-weight: 800; letter-spacing: .02em;
  color: var(--color-black); background: #ef5f13;
  border: 3px solid var(--color-black); border-radius: 12px;
  cursor: pointer; transition: transform .06s;
}
.bl-popup__btn:hover:not(:disabled) { background: #fcaa2b; }
.bl-popup__btn:active:not(:disabled) { transform: translateY(2px); }
.bl-popup__btn:disabled { opacity: .65; cursor: not-allowed; }
.bl-popup__ok, .bl-popup__error {
  margin: .75rem 0 0; font-weight: 700; font-size: .9375rem;
  color: var(--color-black);
}
.bl-popup__error { color: #7f1020; }
.bl-popup__legal {
  margin: .875rem 0 0; font-size: .75rem; line-height: 1.4;
  color: rgba(0, 0, 0, .7);
}
.bl-popup__legal a { color: var(--color-black); text-decoration: underline; }

@media (max-width: 480px) {
  .bl-popup__panel { padding: 1.75rem 1.25rem 1.25rem; box-shadow: 5px 5px 0 var(--color-black); }
  .bl-popup__titulo { font-size: 1.35rem; }
  .bl-popup__imagen { max-width: 110px; }
}