/* ==========================================================================
   BILU GLUTEN FREE — SISTEMA DE DISEÑO (identidad 2026)
   Paleta: verde oliva #65644C · beige oscuro #BDB1A1 · beige claro #F9F4EC
           + terracota #C89E87 (acento tomado del feed de Instagram)
   Tipografías: Inter (títulos y textos) · Kaushan Script (acentos manuscritos)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TIPOGRAFÍAS ALOJADAS EN EL TEMA (fonts/)
   Inter variable: un solo archivo con todos los pesos (100–900) y tamaño óptico.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-italic-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Kaushan Script';
  src: url('../fonts/kaushan-script-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   Los mismos valores están en tailwind.config (index.php). Si cambia un color
   de marca, cambiarlo en ambos lugares.
   -------------------------------------------------------------------------- */
:root {
  --olive-50: #F5F4EE;
  --olive-100: #EAE9DE;
  --olive-200: #D6D5C2;
  --olive-300: #B9B89E;
  --olive-400: #97967A;
  --olive-500: #7C7B60;
  --olive-600: #65644C; /* marca */
  --olive-700: #53523E;
  --olive-800: #434233;
  --olive-900: #36352A;
  --olive-950: #24231B;

  --sand-50: #FCFAF6;
  --sand-100: #F9F4EC; /* marca */
  --sand-200: #F1EADF;
  --sand-300: #E5DCCD;
  --sand-400: #D2C6B5;
  --sand-500: #BDB1A1; /* marca */
  --sand-600: #A29581;
  --sand-700: #857867;

  --terra-100: #F5E7DF;
  --terra-400: #C89E87; /* acento del feed */
  --terra-500: #B6856C;
  --terra-600: #9C6C55;
  --terra-700: #7F5745;

  --paper: #FFFDF8;
  --ink: #36352A;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Kaushan Script', cursive;

  --shadow-soft: 0 18px 40px -18px rgba(54, 53, 42, 0.28), 0 4px 12px -4px rgba(54, 53, 42, 0.08);
  --shadow-card: 0 2px 6px rgba(54, 53, 42, 0.04), 0 10px 30px -12px rgba(54, 53, 42, 0.12);
  --shadow-card-hover: 0 6px 14px rgba(54, 53, 42, 0.06), 0 26px 48px -18px rgba(54, 53, 42, 0.26);
  --shadow-sticker: 0 3px 10px rgba(54, 53, 42, 0.12), 0 1px 2px rgba(54, 53, 42, 0.08);

  --ease-delicate-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-gentle-exit: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-reveal: 0.8s;
  --duration-exit: 0.45s;

  /* Textura de papel: ruido muy tenue generado en SVG (sin imágenes externas) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.33 0 0 0 0 0.32 0 0 0 0 0.24 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.98 0 0 0 0 0.94 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. BASE
   IMPORTANTE: el overflow-x: hidden va SOLO en <html> (se aplica al viewport).
   En body o en wrappers usamos "clip": "hidden" los convierte en contenedores de
   scroll y eso rompe el position: sticky del header.
   -------------------------------------------------------------------------- */
html {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: var(--sand-100);
  color: var(--ink);
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  position: relative;
  line-height: 1.6;
  min-height: 100%;
  font-feature-settings: 'kern', 'calt';
  text-rendering: optimizeLegibility;
}

/* Clase heredada del tema anterior: ahora es el papel crema con textura.
   Los fondos crema heredados también la llevan, para que no se noten cortes. */
.bg-craft-texture,
.bg-grain,
.bg-cream-50,
.bg-cream-100 {
  background-image: var(--grain);
}

.bg-grain-light {
  background-image: var(--grain-light);
}

h1, h2, h3, h4 {
  letter-spacing: -0.022em;
}

.font-script,
.font-handwriting {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
}

/* Bloqueo del scroll de fondo cuando el carrito está abierto.
   Sin "height: 100%": eso reseteaba el scroll y al cerrar volvías al inicio. */
html.drawer-open,
body.drawer-open {
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

body.drawer-open {
  touch-action: none;
}

body.drawer-open .floating-whatsapp-btn {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Envoltura universal para evitar cualquier fuga horizontal en navegadores móviles */
.page-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  position: relative;
}

/* Blindaje contra desbordamiento horizontal en secciones y footer */
section, footer, header {
  max-width: 100%;
  overflow-x: clip;
}

/* Navegadores sin "clip" (Safari < 16): no usamos "hidden" acá porque rompería
   el header sticky; el overflow-x del <html> ya evita el scroll horizontal. */

/* Las anclas del menú no quedan tapadas por el header al subir */
section[id] {
  scroll-margin-top: 5.5rem;
}

/* --------------------------------------------------------------------------
   3. TÍTULOS Y ETIQUETAS DE SECCIÓN (lenguaje del feed: Inter extrabold + script)
   -------------------------------------------------------------------------- */
.section-title {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--olive-800);
  text-wrap: balance;
}

/* Palabra manuscrita dentro de un título: "Nuestro catálogo *de antojos*" */
.script-accent {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--terra-600);
  display: inline-block;
  font-size: 1.08em;
  line-height: 1;
  transform: rotate(-3deg) translateY(0.04em);
  padding: 0 0.06em;
}

/* Etiqueta pequeña sobre los títulos, con la ramita dibujada */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-500);
}

@media (min-width: 640px) {
  .eyebrow {
    font-size: 0.8125rem;
  }
}

.eyebrow > svg {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  color: var(--sand-600);
}

/* Píldoras planas como las del feed (oliva con texto crema, o arena) */
.label-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.95rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--olive-600);
  color: var(--sand-100);
}

.label-pill--soft {
  background: rgba(255, 253, 248, 0.75);
  color: var(--olive-700);
  box-shadow: inset 0 0 0 1px var(--sand-400);
}

.label-pill--light {
  background: var(--sand-100);
  color: var(--olive-800);
  box-shadow: 0 6px 16px -6px rgba(36, 35, 27, 0.4);
}

/* Ícono dentro de un círculo con anillo punteado (como los del post del combo) */
.icon-badge {
  position: relative;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sand-200);
  color: var(--olive-600);
}

.icon-badge::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 9999px;
  border: 1.2px dashed var(--sand-500);
}

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */
/* Navbar pegajoso: se oculta al bajar y reaparece al subir (clase .nav-hidden desde app.js) */
#mainNavbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    background-color 0.25s ease;
  will-change: transform;
}

#mainNavbar.nav-hidden {
  transform: translate3d(0, -100%, 0);
  box-shadow: none;
}

#mainNavbar.shadow-md {
  box-shadow: 0 10px 30px -18px rgba(54, 53, 42, 0.35);
}

/* Si la barra de administración de WordPress está activa */
.admin-bar #mainNavbar {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar #mainNavbar {
    top: 46px;
  }
}
/* Debajo de 600px la barra de WP deja de ser fija y se va con el scroll */
@media screen and (max-width: 600px) {
  .admin-bar #mainNavbar {
    top: 0;
  }
}

/* Logo: el sello gira apenas al pasar el mouse */
.brand-mark {
  flex-shrink: 0;
  display: block;
  transition: transform 0.6s var(--ease-bounce-soft);
}

.brand:hover .brand-mark {
  transform: rotate(-10deg) scale(1.05);
}

/* Botones de ícono del header (carrito y menú mobile): mismo tamaño y forma */
.header-icon-btn {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--sand-200);
  border: 1px solid var(--sand-300);
  color: var(--olive-800);
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.header-icon-btn:hover {
  background-color: var(--sand-300);
  border-color: var(--sand-400);
}

.header-icon-btn:active {
  transform: scale(0.95);
}

/* Enlaces de navegación con subrayado animado */
.nav-link {
  position: relative;
  display: inline-block;
  padding: 0.25rem 0;
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 0%;
  height: 2px;
  background-color: var(--terra-400);
  border-radius: 9999px;
  transform: translateX(-50%);
  transition: width 0.35s var(--ease-delicate-out);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: var(--olive-800) !important;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. BOTONES
   Los nombres de clase se mantienen del tema anterior (btn-whatsapp-primary,
   btn-rustic-wood, btn-outline-wood) para no tocar el marcado existente.
   -------------------------------------------------------------------------- */
.btn-whatsapp-primary,
.btn-primary {
  background-color: var(--olive-600);
  color: var(--sand-100);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border-radius: 9999px;
  letter-spacing: -0.005em;
  box-shadow: 0 10px 24px -12px rgba(54, 53, 42, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background-color 0.25s ease, transform 0.35s var(--ease-bounce-soft), box-shadow 0.3s ease;
  text-decoration: none;
}

.btn-whatsapp-primary:hover,
.btn-primary:hover {
  background-color: var(--olive-700);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(54, 53, 42, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn-rustic-wood {
  background-color: var(--olive-800);
  color: var(--sand-100);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 9999px;
  box-shadow: 0 10px 24px -12px rgba(54, 53, 42, 0.6);
  transition: background-color 0.25s ease, transform 0.35s var(--ease-bounce-soft), box-shadow 0.3s ease;
}

.btn-rustic-wood:hover {
  background-color: var(--olive-900);
  transform: translateY(-2px);
}

/* Secundario liviano: acompaña al principal sin competir con él */
.btn-outline-wood {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 9999px;
  font-weight: 600;
  color: var(--olive-800);
  background-color: rgba(255, 253, 248, 0.6);
  border: 1.5px solid var(--sand-400);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.35s var(--ease-bounce-soft);
}

.btn-outline-wood:hover {
  border-color: var(--olive-500);
  background-color: var(--paper);
  transform: translateY(-2px);
}

/* Botón claro para fondos oliva */
.btn-light {
  background-color: var(--sand-100);
  color: var(--olive-800);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border-radius: 9999px;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45);
  transition: background-color 0.25s ease, transform 0.35s var(--ease-bounce-soft);
}

.btn-light:hover {
  background-color: var(--paper);
  transform: translateY(-2px);
}

/* Sobre los bloques oliva, el botón principal se invierte para mantener el contraste */
.bg-wood-grain .btn-whatsapp-primary,
.season-card .btn-whatsapp-primary {
  background-color: var(--sand-100);
  color: var(--olive-800);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5);
}

.bg-wood-grain .btn-whatsapp-primary:hover,
.season-card .btn-whatsapp-primary:hover {
  background-color: var(--paper);
}

/* Micro-interacción táctil */
.btn-whatsapp-primary:active,
.btn-primary:active,
.btn-rustic-wood:active,
.btn-outline-wood:active,
.btn-light:active,
.category-pill:active,
.btn-add-tray:active,
.floating-whatsapp-btn:active {
  transform: scale(0.97) !important;
}

/* Brillo único sobre el botón principal del hero */
.hero-cta-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   6. STICKERS (re-coloreados con la paleta nueva; mismos nombres de clase)
   -------------------------------------------------------------------------- */
.sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.38rem 0.85rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.8rem;
  border: 1.5px solid rgba(255, 253, 248, 0.85);
  box-shadow: var(--shadow-sticker);
  transition: transform 0.35s var(--ease-bounce-soft), box-shadow 0.25s ease;
  user-select: none;
  position: relative;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* Los íconos nunca se comprimen: antes, en mobile, el flex los achicaba a 0px */
.sticker svg {
  flex-shrink: 0;
}

.sticker:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 20px rgba(54, 53, 42, 0.16);
}

/* Nota: no limitar el ancho de .sticker con max-width en %. Sus contenedores son
   absolutos (ancho = contenido), así que el % lo dejaba siempre más angosto que su
   contenido: se recortaba el padding lateral y los íconos desaparecían. */

.sticker-yellow { background-color: var(--sand-200); color: var(--olive-700); }
.sticker-green  { background-color: var(--olive-100); color: var(--olive-800); }
.sticker-coral  { background-color: var(--terra-100); color: var(--terra-700); }
.sticker-amber  { background-color: var(--sand-300); color: var(--olive-800); }
.sticker-blue   { background-color: var(--sand-200); color: var(--olive-700); }
.sticker-purple { background-color: var(--olive-600); color: var(--sand-100); }
.sticker-wood   { background-color: var(--paper); color: var(--olive-700); border-color: var(--sand-300); }

/* Inclinaciones naturales */
.tilt-left { transform: rotate(-3deg); }
.tilt-right { transform: rotate(3deg); }
.tilt-left-sm { transform: rotate(-1.5deg); }
.tilt-right-sm { transform: rotate(1.5deg); }

.sticker.tilt-left:hover { transform: rotate(-1deg) translateY(-4px) scale(1.05); }
.sticker.tilt-right:hover { transform: rotate(1deg) translateY(-4px) scale(1.05); }

/* Etiqueta artesanal dentro de las fotos de producto */
.wood-tray-badge,
.artisanal-badge {
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid var(--sand-300);
  color: var(--olive-800);
  border-radius: 9999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  backdrop-filter: blur(6px);
}

/* Micro-animaciones de flotación (stickers de la historia y del CTA) */
@keyframes subtleFloat1 {
  0% { transform: translateY(0px) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(-0.5deg); }
  100% { transform: translateY(0px) rotate(-2deg); }
}

@keyframes subtleFloat2 {
  0% { transform: translateY(0px) rotate(2deg); }
  50% { transform: translateY(-7px) rotate(0.8deg); }
  100% { transform: translateY(0px) rotate(2deg); }
}

@keyframes subtleFloat3 {
  0% { transform: translateY(0px) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(-1deg); }
}

@keyframes floatSubtle {
  0% { transform: translateY(0px) rotate(-2deg); }
  100% { transform: translateY(-8px) rotate(1deg); }
}

.animate-float-1 { animation: subtleFloat1 4.8s ease-in-out infinite; }
.animate-float-2 { animation: subtleFloat2 5.6s ease-in-out infinite; animation-delay: 0.8s; }
.animate-float-3 { animation: subtleFloat3 6.2s ease-in-out infinite; animation-delay: 1.4s; }

/* --------------------------------------------------------------------------
   7. RECURSOS GRÁFICOS DEL FEED
   -------------------------------------------------------------------------- */

/* Ilustraciones de trazo (ramitas, rulos, trazos de énfasis). Se dibujan solas
   al entrar en pantalla: cada <path> tiene pathLength="1". */
.doodle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

html.reveal-ready .draw-on {
  stroke-dasharray: 1 1.02;
  stroke-dashoffset: 1.01;
  opacity: 0;
  transition:
    stroke-dashoffset 1.9s var(--ease-delicate-out),
    opacity 0.3s ease;
}

html.reveal-ready .draw-on.in-view {
  stroke-dashoffset: 0;
  opacity: 1;
}

/* Nota de papel con borde de estampilla (como la del post "El combo perfecto").
   El borde troquelado se hace con una máscara: los círculos recortan el contorno. */
.stamp-card {
  --r: 6px;
  position: relative;
  background: var(--paper);
  padding: calc(2 * var(--r) + 1.25rem);
  -webkit-mask:
    radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
  mask:
    radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

/* La máscara recorta la sombra, así que va en el contenedor */
.stamp-shadow {
  filter: drop-shadow(0 14px 22px rgba(54, 53, 42, 0.1)) drop-shadow(0 2px 3px rgba(54, 53, 42, 0.06));
}

/* Cinta washi con bordes dentados */
.washi-tape {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 84px;
  height: 24px;
  background: linear-gradient(90deg, rgba(210, 198, 181, 0.85), rgba(229, 220, 205, 0.85));
  box-shadow: 0 1px 3px rgba(54, 53, 42, 0.1);
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%);
  z-index: 10;
  pointer-events: none;
}

/* Sello festoneado con texto en anillo (versión web de las insignias del feed) */
.seal {
  width: 116px;
  height: 116px;
  filter: drop-shadow(0 12px 20px rgba(54, 53, 42, 0.25));
}

.seal svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.seal-ring {
  transform-origin: 60px 60px;
  animation: sealSpin 40s linear infinite;
}

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

@media (max-width: 639.98px) {
  .seal {
    width: 92px;
    height: 92px;
  }
}

/* Insignia redonda clara con anillo punteado ("100% sin TACC" del feed) */
.badge-round {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--sand-500);
  color: var(--olive-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--shadow-soft);
  position: relative;
}

.badge-round::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1.5px dashed rgba(54, 53, 42, 0.45);
}

/* Mancha orgánica que "respira" detrás de las fotos */
.blob {
  position: absolute;
  border-radius: 42% 58% 63% 37% / 45% 38% 62% 55%;
  background: radial-gradient(circle at 30% 30%, var(--sand-300), var(--sand-200) 70%);
  animation: blobMorph 18s ease-in-out infinite alternate;
}

@keyframes blobMorph {
  0% { border-radius: 42% 58% 63% 37% / 45% 38% 62% 55%; transform: rotate(0deg) scale(1); }
  50% { border-radius: 58% 42% 38% 62% / 52% 61% 39% 48%; transform: rotate(6deg) scale(1.03); }
  100% { border-radius: 37% 63% 52% 48% / 61% 44% 56% 39%; transform: rotate(-4deg) scale(0.98); }
}

/* Ondas entre secciones (bordes orgánicos en lugar de líneas rectas) */
.wave {
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(24px, 4vw, 56px);
  line-height: 0;
  pointer-events: none;
  z-index: 1;
}

.wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wave--top {
  bottom: calc(100% - 1px);
}

.wave--bottom {
  top: calc(100% - 1px);
  transform: scaleY(-1);
}

/* Foto que se descubre de abajo hacia arriba al entrar en pantalla.
   El recorte va en la <img> y no en el contenedor: Chrome considera "fuera de
   pantalla" a un elemento recortado por completo y el observador nunca lo detecta. */
.img-reveal {
  overflow: hidden;
  background-color: var(--sand-300);
}

html.reveal-ready .img-reveal img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.14);
  transition:
    clip-path 1.25s var(--ease-delicate-out),
    transform 1.8s var(--ease-delicate-out);
}

html.reveal-ready .img-reveal.in-view img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* Parallax muy suave para adornos (solo navegadores con scroll-driven animations) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .parallax-soft {
      animation: parallaxSoft linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    @keyframes parallaxSoft {
      from { transform: translate3d(0, var(--parallax-from, 40px), 0); }
      to { transform: translate3d(0, var(--parallax-to, -40px), 0); }
    }
  }
}

/* --------------------------------------------------------------------------
   8. HERO
   Animación de entrada única al cargar:
   html.hero-intro -> estados iniciales desde el primer pintado (sin parpadeo)
   html.hero-play  -> arranca la secuencia (la dispara el script del <head>)
   Orden: etiqueta, título línea por línea, foto que "se apoya", cinta que se
   pega, subrayado que se dibuja, sello que se estampa, epígrafe que se escribe
   y un brillo sobre el botón de pedido. Después solo queda un zoom lentísimo
   en la foto y el giro del texto del sello.
   -------------------------------------------------------------------------- */
.hero-script {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--terra-600);
  font-size: 1.04em;
  line-height: 1.12;
}

/* Subrayado de pincel bajo la frase manuscrita */
.hero-underline {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C46 3.5 120 2.5 197 7' stroke='%23BDB1A1' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M30 12.5C80 8 140 8 180 10' stroke='%23BDB1A1' stroke-opacity='0.55' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.24em;
  padding-bottom: 0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Marco polaroid: leve inclinación que se endereza al pasar el mouse */
.hero-frame {
  transform: rotate(-1.5deg);
  transition: transform 0.6s var(--ease-delicate-out);
  box-shadow: var(--shadow-soft);
}

.hero-photo:hover .hero-frame {
  transform: rotate(0deg);
}

/* Cada línea del título sube desde una máscara (con aire para los trazos script) */
.hero-line {
  display: block;
  overflow: hidden;
  padding: 0.04em 0.12em 0.16em;
  margin: -0.04em -0.12em -0.16em;
}

.hero-line-inner {
  display: block;
}

.hero-blob {
  inset: 6% -4% -2% 8%;
  opacity: 0.9;
}

@media (max-width: 1023.98px) {
  .hero-blob {
    inset: 4% -6% -4% -6%;
  }
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes heroEyebrow {
  from { opacity: 0; letter-spacing: 0.42em; }
  to { opacity: 1; letter-spacing: 0.18em; }
}

@keyframes heroLineRise {
  from { opacity: 0; transform: translate3d(0, 105%, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes heroPhotoDrop {
  0% { opacity: 0; transform: translate3d(0, -28px, 0) rotate(-6deg) scale(0.94); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@keyframes heroTapeStick {
  from { opacity: 0; transform: translateX(-50%) rotate(-2deg) scaleX(0.2); }
  to { opacity: 1; transform: translateX(-50%) rotate(-2deg) scaleX(1); }
}

@keyframes heroUnderlineDraw {
  from { background-size: 0% 0.24em; }
  to { background-size: 100% 0.24em; }
}

@keyframes heroStampPress {
  0% { opacity: 0; transform: scale(1.9) rotate(-28deg); }
  55% { opacity: 1; transform: scale(0.92) rotate(-4deg); }
  100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}

@keyframes heroStampRing {
  from { opacity: 0.55; transform: scale(0.95); }
  to { opacity: 0; transform: scale(1.65); }
}

@keyframes heroWrite {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes heroShine {
  from { transform: translateX(-120%) skewX(-20deg); }
  to { transform: translateX(320%) skewX(-20deg); }
}

@keyframes heroKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

.hero-stamp {
  transform: rotate(-8deg);
}

/* Estados iniciales */
html.hero-intro .hero-anim,
html.hero-intro .hero-photo {
  opacity: 0;
}

html.hero-intro .hero-underline {
  background-size: 0% 0.24em;
}

/* Secuencia */
html.hero-play .hero-anim {
  animation: heroFadeUp 0.8s var(--ease-delicate-out) var(--hero-delay, 0ms) both;
}

html.hero-play .hero-eyebrow {
  animation-name: heroEyebrow;
  animation-duration: 1s;
}

html.hero-play .hero-line-inner {
  animation-name: heroLineRise;
  animation-duration: 0.95s;
}

html.hero-play .hero-underline {
  animation: heroUnderlineDraw 0.9s var(--ease-delicate-out) 1.1s both;
}

/* Foto: la clase .photo-play la agrega el script del <head> cuando la foto se ve.
   --photo-start = 350ms si ya estaba visible al cargar, 0ms si llega con el scroll. */
html.hero-intro .hero-photo.photo-play {
  animation: heroPhotoDrop 1s cubic-bezier(0.34, 1.4, 0.64, 1) var(--photo-start, 0ms) both;
}

html.hero-intro .photo-play .hero-tape {
  transform-origin: left center;
  animation: heroTapeStick 0.45s var(--ease-delicate-out) calc(var(--photo-start, 0ms) + 700ms) both;
}

html.hero-intro .photo-play .hero-stamp {
  animation: heroStampPress 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--photo-start, 0ms) + 900ms) both;
}

html.hero-intro .photo-play .hero-stamp::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid rgba(101, 100, 76, 0.45);
  opacity: 0;
  pointer-events: none;
  animation: heroStampRing 0.85s ease-out calc(var(--photo-start, 0ms) + 1200ms) forwards;
}

html.hero-intro .photo-play .hero-caption {
  animation: heroWrite 1.1s cubic-bezier(0.5, 0.1, 0.3, 1) calc(var(--photo-start, 0ms) + 1100ms) both;
}

html.hero-play .hero-cta-shine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255, 253, 248, 0.32), transparent);
  pointer-events: none;
  animation: heroShine 0.9s ease-in-out 2s both;
}

/* Vida continua y muy sutil: la foto se acerca y aleja lentamente */
html.hero-intro .photo-play .hero-photo-img {
  transform-origin: 60% 55%;
  animation: heroKenBurns 18s ease-in-out calc(var(--photo-start, 0ms) + 1000ms) infinite alternate;
}

/* --------------------------------------------------------------------------
   9. CINTA DE PRODUCTOS EN MOVIMIENTO
   Dos copias idénticas: al desplazar -50% el bucle es perfecto.
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 55s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1.75rem;
  padding-right: 1.75rem;
  margin: 0;
  list-style: none;
  white-space: nowrap;
}

.marquee-item {
  font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

.marquee-item--script {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--terra-400);
  font-size: clamp(1.35rem, 2.8vw, 2.05rem);
}

.marquee-sep {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--sand-500);
  flex-shrink: 0;
}

@keyframes marqueeScroll {
  to { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   10. BLOQUE "AÑOS DE EXPERIENCIA" (contadores)
   -------------------------------------------------------------------------- */
.stat-number {
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.stat-hero {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  background-color: var(--olive-600);
  background-image:
    radial-gradient(circle at 85% 12%, rgba(200, 158, 135, 0.28), transparent 45%),
    radial-gradient(circle at 10% 95%, rgba(249, 244, 236, 0.1), transparent 45%),
    var(--grain-light);
  color: var(--sand-100);
}

/* --------------------------------------------------------------------------
   11. HISTORIA
   -------------------------------------------------------------------------- */
/* Marco con forma de arco (ventana de panadería) y un contorno separado */
.arch-frame {
  border-radius: 999px 999px 1.75rem 1.75rem;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--sand-300);
}

.arch-outline {
  position: absolute;
  inset: -12px;
  border-radius: 999px 999px 2.4rem 2.4rem;
  border: 1.5px solid var(--sand-500);
  pointer-events: none;
}

.quote-mark {
  font-family: var(--font-script);
  color: var(--terra-400);
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.28em;
  margin-right: 0.04em;
}

/* --------------------------------------------------------------------------
   12. MITO (adaptación del post del feed)
   -------------------------------------------------------------------------- */
.mito-stack {
  display: flex;
  flex-direction: column;
  line-height: 0.82;
}

.mito-word {
  position: relative;
  display: inline-block;
  align-self: center;
  font-family: var(--font-script);
  font-size: clamp(4.5rem, 13vw, 8.5rem);
  color: var(--olive-600);
}

@media (min-width: 1024px) {
  .mito-word {
    align-self: flex-start;
  }
}

.mito-word--2 { opacity: 0.45; }
.mito-word--3 { opacity: 0.18; }

/* Tachado de pincel que se dibuja sobre el primer "Mito" */
.mito-strike {
  position: absolute;
  left: -6%;
  top: 46%;
  width: 112%;
  height: 0.32em;
  color: var(--terra-500);
  stroke-width: 9;
  pointer-events: none;
}

.mito-pill {
  display: inline-block;
  background: var(--olive-600);
  color: var(--sand-100);
  padding: 1rem 1.4rem;
  border-radius: 1.4rem;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.45;
  box-shadow: var(--shadow-soft);
  max-width: 30rem;
}

.mito-photo {
  border-radius: 2.25rem;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-soft);
}

@media (min-width: 640px) {
  .mito-photo {
    aspect-ratio: 5 / 4;
  }
}

@media (min-width: 1024px) {
  .mito-photo {
    aspect-ratio: 4 / 5;
  }
}

/* --------------------------------------------------------------------------
   13. TEMPORADA
   -------------------------------------------------------------------------- */
.season-card {
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
  background-color: var(--olive-700);
  background-image:
    radial-gradient(circle at 0% 0%, rgba(249, 244, 236, 0.08), transparent 40%),
    var(--grain-light);
  color: var(--sand-100);
  box-shadow: var(--shadow-soft);
}

/* --------------------------------------------------------------------------
   14. CATÁLOGO
   -------------------------------------------------------------------------- */
#catalogo {
  /* color de fondo de la sección: lo usa el degradado de "ver más" */
  --peek-bg: 241, 234, 223;
}

.product-card {
  background: var(--paper);
  border: 1px solid var(--sand-300);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    transform 0.45s var(--ease-spring-soft),
    box-shadow 0.45s var(--ease-spring-soft),
    border-color 0.3s ease,
    opacity 0.35s var(--ease-delicate-out);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--sand-400);
}

.product-card .img-container {
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sand-200);
}

.product-card .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-delicate-out);
}

.product-card:hover .img-container img {
  transform: scale(1.06);
}

.product-card h3 {
  letter-spacing: -0.025em;
}

/* Botón "+" de las tarjetas */
.btn-add-tray {
  border: 1px solid var(--sand-300);
}

/* Línea superior de la tarjeta: categoría · formato (por unidad, por docena, 100 g...) */
.product-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive-500);
}

.product-price {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--olive-700);
}

/* "Foto próximamente": recuadro de marca en lugar de una foto ajena */
.img-placeholder {
  background-color: var(--sand-200);
  background-image:
    radial-gradient(circle at 50% 40%, rgba(255, 253, 248, 0.85), transparent 60%),
    var(--grain);
}

.placeholder-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.placeholder-badge {
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--olive-500);
  box-shadow: 0 6px 18px -8px rgba(54, 53, 42, 0.3);
}

.placeholder-badge::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 9999px;
  border: 1.2px dashed var(--sand-500);
}

.placeholder-text {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand-700);
}

/* Selector de variantes (sabores, tamaños, cantidades) dentro de la tarjeta */
.variant-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.variant-legend {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--olive-700);
  transition: color 0.2s ease;
}

.variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.variant-chip {
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--olive-800);
  background: var(--sand-100);
  border: 1px solid var(--sand-300);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.25s var(--ease-bounce-soft);
}

.variant-chip:hover {
  border-color: var(--sand-500);
  background: var(--paper);
}

.variant-chip[aria-pressed="true"] {
  background: var(--olive-600);
  border-color: var(--olive-600);
  color: var(--sand-100);
}

.variant-chip:active {
  transform: scale(0.95);
}

/* Si se toca "+" sin elegir: aviso suave en el grupo que falta */
@keyframes variantNudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.variant-group.needs-choice .variant-legend {
  color: var(--terra-600);
}

.variant-group.needs-choice .variant-options {
  animation: variantNudge 0.35s ease-in-out 2;
}

.variant-group.needs-choice .variant-chip {
  border-color: var(--terra-400);
}

/* Encargos: ocasiones y polaroid de la caja */
.occasion-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--sand-100);
  background: rgba(249, 244, 236, 0.08);
  border: 1px solid rgba(249, 244, 236, 0.18);
}

.encargo-polaroid {
  background: var(--paper);
  padding: 0.45rem 0.45rem 0.55rem;
  border-radius: 0.85rem;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.55);
  transition: transform 0.6s var(--ease-delicate-out);
}

.season-card:hover .encargo-polaroid {
  transform: rotate(-1deg) translateY(-4px);
}

/* Fila de categorías.
   Centrada cuando entra completa; si no entra (según el ancho de pantalla) arranca
   desde la izquierda y se recorre con scroll. NO usar justify-content: center acá:
   con overflow, el sobrante se reparte a ambos lados y el borde izquierdo queda
   cortado e inalcanzable. Los márgenes auto de los extremos centran sin ese defecto. */
.category-scroll {
  position: relative; /* referencia para centrar la categoría activa al scrollear */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* Aire arriba y a los lados para que no se recorte la sombra de la píldora activa */
  padding: 0.25rem 0.25rem 0.85rem;
}

/* En pantallas anchas la fila usa también el margen lateral del contenedor para que
   las 6 categorías entren en una línea sin necesidad de scroll */
@media (min-width: 1280px) {
  .category-scroll {
    margin-left: -1rem;
    margin-right: -1rem;
  }
}

.category-scroll > :first-child {
  margin-left: auto;
}

.category-scroll > :last-child {
  margin-right: auto;
}

/* Barra de scroll con la paleta del sitio.
   Solo con mouse: en pantallas táctiles queda la barra nativa, que se oculta sola. */
@media (hover: hover) and (pointer: fine) {
  .category-scroll::-webkit-scrollbar {
    height: 8px;
  }

  .category-scroll::-webkit-scrollbar-track {
    background: rgba(189, 177, 161, 0.3);
    border-radius: 9999px;
  }

  .category-scroll::-webkit-scrollbar-thumb {
    background: var(--sand-600);
    border-radius: 9999px;
  }

  .category-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--olive-600);
  }

  /* Sin las flechitas ◀ ▶ del sistema */
  .category-scroll::-webkit-scrollbar-button {
    display: none;
  }

  /* Firefox no soporta ::-webkit-scrollbar; Chrome/Safari sí, y para ellos
     scrollbar-color/width anularía los estilos de arriba, por eso el @supports */
  @supports not selector(::-webkit-scrollbar) {
    .category-scroll {
      scrollbar-width: thin;
      scrollbar-color: var(--sand-600) rgba(189, 177, 161, 0.3);
    }
  }
}

/* Píldoras de filtro de categoría */
.category-pill {
  flex-shrink: 0;
  padding: 0.6rem 1.1rem;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 600;
  background-color: var(--paper);
  border: 1.5px solid var(--sand-300);
  color: var(--olive-700);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.category-pill:hover {
  border-color: var(--sand-500);
  color: var(--olive-900);
}

.category-pill.active {
  background-color: var(--olive-600);
  color: var(--sand-100);
  border-color: var(--olive-600);
  box-shadow: 0 8px 18px -10px rgba(54, 53, 42, 0.7);
}

/* Buscador */
.search-wrapper {
  position: relative;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.75rem;
}

.search-input {
  width: 100%;
  padding: 0.95rem 1.25rem 0.95rem 3.1rem;
  background-color: var(--paper);
  border-radius: 9999px;
  border: 1.5px solid var(--sand-300);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 2px 10px rgba(54, 53, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.25s var(--ease-spring-soft);
  outline: none;
}

.search-input::placeholder {
  color: var(--sand-700);
  font-weight: 400;
}

.search-input:focus {
  border-color: var(--olive-500);
  box-shadow: 0 0 0 4px rgba(101, 100, 76, 0.14), 0 6px 18px rgba(54, 53, 42, 0.08);
}

.search-icon-wrapper {
  position: absolute;
  left: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--sand-600);
  transition: color 0.2s ease;
}

.search-wrapper:focus-within .search-icon-wrapper {
  color: var(--olive-600);
}

/* Filtrado de productos */
.product-card.card-hidden {
  display: none !important;
}

.product-card.card-fade-out {
  opacity: 0;
  transform: scale(0.96) translateY(12px);
  pointer-events: none;
}

.product-card.card-fade-in {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Catálogo expandible ("Ver más" / peek) */
.catalog-peek-fade {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(var(--peek-bg, 249, 244, 236), 0) 0%, rgba(var(--peek-bg, 249, 244, 236), 0.88) 60%, rgba(var(--peek-bg, 249, 244, 236), 1) 100%);
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 5;
}

.catalog-peek-fade.fade-hidden {
  opacity: 0;
  visibility: hidden;
}

/* Ocultamiento de tarjetas excedentes durante vista previa */
.product-card.card-preview-hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   15. PREGUNTAS FRECUENTES
   -------------------------------------------------------------------------- */
.faq-item {
  border: 1px solid var(--sand-300);
  border-radius: 1.25rem;
  background-color: rgba(255, 253, 248, 0.7);
  overflow: hidden;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
  border-color: var(--sand-400);
}

.faq-item.open {
  background-color: var(--paper);
  border-color: var(--sand-400);
  box-shadow: var(--shadow-card);
}

.faq-header {
  width: 100%;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  font-weight: 600;
  color: var(--olive-900);
  cursor: pointer;
  background: none;
  border: none;
  letter-spacing: -0.01em;
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s ease, opacity 0.3s ease;
  padding: 0 1.5rem;
  color: rgba(54, 53, 42, 0.78);
}

.faq-item.open .faq-content {
  max-height: 380px;
  opacity: 1;
  padding-bottom: 1.35rem;
}

.faq-icon {
  transition: transform 0.35s var(--ease-delicate-out), background-color 0.25s ease, color 0.25s ease;
  color: var(--olive-600);
  box-sizing: content-box;
  padding: 0.4rem;
  border-radius: 9999px;
  background-color: var(--sand-200);
}

.faq-item.open .faq-icon {
  transform: rotate(180deg);
  background-color: var(--olive-600);
  color: var(--sand-100);
}

/* --------------------------------------------------------------------------
   16. CTA FINAL Y BARRA SUPERIOR (clase heredada: bg-wood-grain = oliva con textura)
   -------------------------------------------------------------------------- */
.bg-wood-grain {
  position: relative;
  background-color: var(--olive-700);
  background-image:
    radial-gradient(circle at 12% 15%, rgba(249, 244, 236, 0.1), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(200, 158, 135, 0.22), transparent 45%),
    var(--grain-light);
}

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background-color: var(--olive-900);
  background-image: var(--grain-light);
}

/* "Bilu" gigante y tenue, como marca de agua */
.footer-watermark {
  position: absolute;
  left: 50%;
  bottom: -0.22em;
  transform: translateX(-50%);
  font-family: var(--font-script);
  font-size: clamp(9rem, 30vw, 24rem);
  line-height: 1;
  color: rgba(249, 244, 236, 0.04);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   18. BOTÓN FLOTANTE, TOAST Y CARRITO
   -------------------------------------------------------------------------- */
.floating-whatsapp-btn {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  right: 1.5rem;
  z-index: 990;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background-color: var(--olive-600);
  color: var(--sand-100);
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  box-shadow: 0 16px 34px -14px rgba(36, 35, 27, 0.75);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.35s var(--ease-bounce-soft), background-color 0.25s ease, box-shadow 0.3s ease;
  border: 3px solid var(--sand-100);
}

.floating-whatsapp-btn:hover {
  background-color: var(--olive-700);
  transform: translateY(-4px) scale(1.04);
}

/* En mobile: botón circular solo con el ícono */
@media (max-width: 639.98px) {
  .floating-whatsapp-btn {
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    justify-content: center;
  }
}

/* Toast de notificación rápida — siempre en una sola línea */
.toast-notice {
  position: fixed;
  bottom: 5.5rem;
  right: 1.75rem;
  z-index: 1050;
  background-color: var(--olive-900);
  color: var(--sand-100);
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 16px 34px -14px rgba(36, 35, 27, 0.7);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.4s var(--ease-delicate-out);
  pointer-events: none;
  max-width: min(26rem, calc(100vw - 2rem));
  white-space: nowrap;
}

.toast-notice.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-notice .toast-label {
  flex-shrink: 0;
  color: var(--sand-500);
}

.toast-notice .toast-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

@media (max-width: 639.98px) {
  .toast-notice {
    left: 1rem;
    right: auto;
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    font-size: 0.8125rem;
    padding: 0.65rem 1rem;
    gap: 0.45rem;
  }
}

/* Rebote único del contador del carrito al agregar un producto */
@keyframes softBadgeBump {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.3); }
}

.tray-badge-count.badge-bump {
  animation: softBadgeBump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Cajón lateral "Mi pedido" (100% del alto real en mobile con 100dvh) */
.order-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background-color: rgba(36, 35, 27, 0.55);
  backdrop-filter: blur(5px);
  z-index: 1000;
  display: none;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  overscroll-behavior: contain;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.order-drawer.active {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.order-drawer-content {
  width: 100%;
  max-width: 100%;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background-color: var(--sand-100);
  background-image: var(--grain);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overscroll-behavior: contain;
}

@media (min-width: 640px) {
  .order-drawer-content {
    max-width: 440px;
    box-shadow: -10px 0 40px rgba(36, 35, 27, 0.25);
  }
}

.order-drawer.active .order-drawer-content {
  transform: translateX(0);
}

.order-drawer-header {
  flex-shrink: 0;
  background-color: var(--sand-200);
  border-bottom: 1px solid var(--sand-300);
  padding: calc(0.85rem + env(safe-area-inset-top, 0px)) 1.25rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.25rem;
}

.order-drawer-footer {
  flex-shrink: 0;
  width: 100%;
  background-color: var(--sand-200);
  border-top: 1px solid var(--sand-300);
  box-shadow: 0 -6px 18px rgba(54, 53, 42, 0.05);
  display: flex;
  flex-direction: column;
}

.order-drawer-footer-inputs {
  padding: 0.85rem 1.25rem 0.4rem;
}

.order-drawer-footer-actions {
  width: 100%;
  padding: 0.4rem 1.25rem;
  padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
}

.btn-whatsapp-cart {
  width: 100%;
  background-color: var(--olive-600);
  color: var(--sand-100);
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.25rem;
  border-radius: 9999px;
  box-shadow: 0 12px 26px -14px rgba(54, 53, 42, 0.75);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.btn-whatsapp-cart:hover {
  background-color: var(--olive-700);
  transform: translateY(-1px);
}

.btn-whatsapp-cart:active {
  transform: scale(0.98);
}

/* --------------------------------------------------------------------------
   19. SISTEMA DE ANIMACIONES AL SCROLLEAR (ENTRADA Y SALIDA SUAVES)
   Solo se activa si JavaScript añade .reveal-ready al <html> (sin JS todo se ve).
   -------------------------------------------------------------------------- */
html.reveal-ready .reveal {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity var(--duration-exit) var(--ease-gentle-exit),
    transform var(--duration-exit) var(--ease-gentle-exit);
}

html.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  transition:
    opacity var(--duration-reveal) var(--ease-delicate-out),
    transform var(--duration-reveal) var(--ease-delicate-out);
}

html.reveal-ready .reveal-fade-up { transform: translate3d(0, 28px, 0); }
html.reveal-ready .reveal-fade-up.is-visible { transform: translate3d(0, 0, 0); }

html.reveal-ready .reveal-fade-down { transform: translate3d(0, -20px, 0); }
html.reveal-ready .reveal-fade-down.is-visible { transform: translate3d(0, 0, 0); }

html.reveal-ready .reveal-fade-left { transform: translate3d(28px, 0, 0); }
html.reveal-ready .reveal-fade-left.is-visible { transform: translate3d(0, 0, 0); }

html.reveal-ready .reveal-fade-right { transform: translate3d(-28px, 0, 0); }
html.reveal-ready .reveal-fade-right.is-visible { transform: translate3d(0, 0, 0); }

/* En mobile y tablets, sin desplazamiento horizontal (evita scroll lateral) */
@media (max-width: 1023.98px) {
  html.reveal-ready .reveal-fade-left,
  html.reveal-ready .reveal-fade-right {
    transform: translate3d(0, 20px, 0);
  }
  html.reveal-ready .reveal-fade-left.is-visible,
  html.reveal-ready .reveal-fade-right.is-visible {
    transform: translate3d(0, 0, 0);
  }
}

html.reveal-ready .reveal-scale { transform: scale(0.95); }
html.reveal-ready .reveal-scale.is-visible { transform: scale(1); }

/* Delays escalonados */
.reveal-delay-100 { transition-delay: 0.08s !important; }
.reveal-delay-150 { transition-delay: 0.14s !important; }
.reveal-delay-200 { transition-delay: 0.20s !important; }
.reveal-delay-250 { transition-delay: 0.26s !important; }
.reveal-delay-300 { transition-delay: 0.32s !important; }
.reveal-delay-350 { transition-delay: 0.38s !important; }
.reveal-delay-400 { transition-delay: 0.44s !important; }
.reveal-delay-500 { transition-delay: 0.52s !important; }

/* --------------------------------------------------------------------------
   20. ACCESIBILIDAD: MOVIMIENTO REDUCIDO
   Todo se muestra en su estado final, sin animaciones continuas.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html.reveal-ready .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html.reveal-ready .draw-on {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }

  html.reveal-ready .img-reveal img {
    clip-path: none !important;
    transform: none !important;
  }

  .animate-float-1,
  .animate-float-2,
  .animate-float-3,
  .seal-ring,
  .blob,
  .marquee-track,
  .tray-badge-count {
    animation: none !important;
  }

  /* La cinta queda quieta y se puede recorrer con scroll */
  .marquee {
    overflow-x: auto;
  }
}