/* tokens.css se carga con su propio <link> en index.html (un @import acá obligaba a esperar a styles.css antes de pedirlo). */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Con GSAP, animations.js anima el scroll a las anclas. Dos suavizados superpuestos (CSS + GSAP) hacían que la
   página "esperara" ~1 s sin moverse y después saliera disparada, así que se desactiva el nativo cuando GSAP lo maneja. */
html.gsap-scroll { scroll-behavior: auto; }
section[id], footer[id] { scroll-margin-top: 89px; } /* alto del header (77px) + 12px: las anclas nativas (sin JS/GSAP) caen en el mismo lugar que el scroll de animations.js */
[tabindex="-1"]:focus { outline: none; } /* animations.js enfoca la sección de destino tras el scroll (accesibilidad); no es un control, no lleva anillo */
a, button, summary { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul { margin: 0; padding: 0; }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.icon { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon.is-filled { fill: currentColor; stroke: none; }
.icon-sprite { display: none; }
#scroll-sentinel { position: absolute; top: 0; width: 1px; height: 1px; }

/* ---------- Buttons (radio de pill en toda la web) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-base);
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  touch-action: manipulation;
  /* Hover y "presionado" usan las propiedades independientes translate / scale (no "transform"): así se pueden
     combinar (antes el :hover pisaba al :active y el botón nunca mostraba que se estaba apretando). */
  transition: translate 0.25s var(--ease-out), scale 0.15s ease, box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn .icon { width: 1.1em; height: 1.1em; }
.btn-primary { background: var(--color-accent-dark); color: #fff; box-shadow: var(--shadow-sm); }
.btn-outline { background: transparent; color: var(--color-ink); border-color: var(--color-border); }
.btn-outline-light { background: transparent; color: var(--color-cream-text); border-color: rgba(236,238,228,0.35); }
.btn-light { background: var(--color-cream-text); color: var(--color-forest-deep); }
.btn-whatsapp { background: #3E6146; color: #fff; }
.btn-sm { padding: 0.5rem 1.1rem; font-size: var(--fs-sm); }
/* Los efectos de hover solo en dispositivos con mouse: en el celular el hover queda "pegado" después de tocar */
@media (hover: hover) {
  .btn-primary:hover { background: #7A4718; box-shadow: var(--shadow-md); translate: 0 -2px; }
  .btn-outline:hover { background: var(--color-surface); border-color: var(--color-sage); translate: 0 -2px; }
  .btn-outline-light:hover { background: rgba(236,238,228,0.1); translate: 0 -2px; }
  .btn-light:hover { background: #fff; box-shadow: var(--shadow-md); translate: 0 -2px; }
  .btn-whatsapp:hover { background: #335239; box-shadow: var(--shadow-md); translate: 0 -2px; }
}
.btn:active { scale: 0.97; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg); /* sólido: sin desenfoque, un fondo translúcido dejaría ver el texto "fantasma" de lo que pasa por debajo */
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* El desenfoque de fondo se recalcula en cada cuadro del scroll: en el celular es lo que más cuesta, así que
   solo se usa en pantallas grandes con mouse (en el resto el fondo es casi sólido y se ve igual). */
@media (hover: hover) and (min-width: 1001px) {
  .site-header { background: rgba(236, 238, 228, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.site-header.is-scrolled { border-color: var(--color-border); box-shadow: var(--shadow-sm); }

/* Barra de progreso de lectura bajo el header (scroll-driven animation: la maneja el compositor, sin JS).
   Donde el navegador no lo soporta simplemente no se muestra. */
.scroll-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
    transform: scaleX(0); transform-origin: 0 50%;
    animation: scroll-progress linear both; animation-timeline: scroll(root block);
  }
}
@keyframes scroll-progress { to { transform: scaleX(1); } }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 0.7rem;
  min-height: 64px;
}
.nav-logo { display: inline-flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 34px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
}
.nav-links a { text-decoration: none; color: var(--color-ink-soft); font-weight: 500; font-size: 0.95rem; position: relative; white-space: nowrap; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
/* aria-current lo pone animations.js según la sección que se está mirando (scrollspy) */
.nav-links a[aria-current="location"] { color: var(--color-ink); }
.nav-links a[aria-current="location"]::after { transform: scaleX(1); }
@media (hover: hover) {
  .nav-links a:hover { color: var(--color-ink); }
  .nav-links a:hover::after { transform: scaleX(1); }
}
.nav-cta { display: flex; align-items: center; gap: var(--space-3); }
.nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  color: var(--color-ink);
  touch-action: manipulation;
}
/* Los dos íconos se apilan y se cruzan (giro + fundido) en vez de cambiar de golpe */
.nav-toggle .icon { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; transition: opacity 0.2s ease, rotate 0.4s var(--ease-out); }
.nav-toggle .icon-close { opacity: 0; rotate: -90deg; }
.nav-toggle.is-open .icon-menu { opacity: 0; rotate: 90deg; }
.nav-toggle.is-open .icon-close { opacity: 1; rotate: 0deg; }

/* ---------- Hero (split asimétrico) ---------- */
.hero {
  padding-block: clamp(2.5rem, 2rem + 2vw, 5.5rem) var(--space-6);
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
}
.hero-tag {
  font-family: var(--font-script);
  font-size: 1.4rem;
  color: var(--color-accent-dark);
  display: inline-block;
  margin-bottom: var(--space-2);
  line-height: 1.3;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.hero h1 em { font-style: italic; color: var(--color-accent-dark); font-weight: 500; }
.hero .lead {
  margin-top: var(--space-4);
  font-size: var(--fs-lg);
  color: var(--color-ink-soft);
  max-width: 46ch;
}
.hero .lead p + p { margin-top: var(--space-3); }
.hero .lead strong { font-weight: 600; color: var(--color-ink); }
.hero-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}
.hero-visual {
  position: relative;
  aspect-ratio: 1100 / 1005; /* la proporción de la foto (3 velas, casi cuadrada): se ve entera, sin recortes, también en el celular */
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-bg-soft); /* color de espera mientras llega la foto (después se funde con ella) */
  box-shadow: var(--shadow-lg);
  --hero-scale: 1;
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; scale: var(--hero-scale); }
.hero-visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,35,26,0) 55%, rgba(28,35,26,0.35) 100%);
}

/* Entrada del hero en CSS puro: arranca en el primer cuadro, sin esperar a ningún script. Antes la hacía GSAP
   (que viene de un CDN), así que el texto se veía, desaparecía y recién ahí se animaba (parpadeo en conexiones lentas).
   Lleva "backwards" (no "both") para no dejar ninguna animación activa una vez terminada.
   La foto (y su marco) entra SOLO con movimiento, sin animar la opacidad: Chrome no toma como "contenido principal" (LCP)
   una imagen que nace transparente, y medíamos el LCP en 1,3 s en vez de 0,4 s. El texto sí se funde: es más chico que la foto. */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-tag { animation: wipe-in 1s var(--ease-out) 0.1s backwards; }
  .hero h1 { animation: rise-in 0.95s var(--ease-out) 0.18s backwards; }
  .hero .lead { animation: rise-in 0.95s var(--ease-out) 0.32s backwards; }
  .hero .hero-actions { animation: rise-in 0.95s var(--ease-out) 0.44s backwards; }
  .hero-visual { animation: unveil 1.3s var(--ease-out) 0.05s backwards; }
  .hero-visual img { animation: image-settle 2s var(--ease-out) 0.05s backwards; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(28px); } }
/* la firma manuscrita se "escribe" de izquierda a derecha (el inset negativo evita cortar las astas de la q/g) */
@keyframes wipe-in { from { clip-path: inset(-0.3em 100% -0.3em -0.1em); opacity: 0; } to { clip-path: inset(-0.3em -0.1em -0.3em -0.1em); opacity: 1; } }
@keyframes unveil { from { transform: translateY(26px) scale(0.955); } }
@keyframes image-settle { from { scale: calc(var(--hero-scale) + 0.14); } }

/* Paralaje suave de la foto del hero al scrollear (solo escritorio y donde el navegador soporta animaciones
   ligadas al scroll; corre en el compositor). La foto se agranda un 5% para que al moverse no deje bordes (poco: las velas
   de los costados están cerca del borde y no hay que cortarlas); donde no hay paralaje no se agranda (queda el encuadre original). */
@supports (animation-timeline: view()) {
  @media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
    .hero-visual { --hero-scale: 1.05; }
    .hero-visual img {
      animation: image-settle 2s var(--ease-out) 0.05s backwards, hero-parallax linear both;
      animation-timeline: auto, view();
      animation-range: normal, exit 0% exit 100%;
    }
  }
}
@keyframes hero-parallax { to { translate: 0 2.4%; } }

/* ---------- Franja de categorías ---------- */
/* ---------- Destacados (franja de iconos, mismo lenguaje visual que Medios de pago) ---------- */
.highlights-strip { background: var(--color-bg-soft); padding-block: var(--space-6); }
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}
.highlight-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-3); }
.highlight-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-accent-dark);
  border: 1px solid var(--color-border);
}
.highlight-icon .icon { width: 24px; height: 24px; }
.highlight-item h3 { font-size: var(--fs-base); font-weight: 700; color: var(--color-ink); }
.highlight-item p { font-size: var(--fs-sm); color: var(--color-ink-soft); max-width: 24ch; }

.category-strip { padding-block: var(--space-6); }
/* 300px mínimos: con las 6 categorías del cliente quedan 3 + 3 (con 200px quedaban 5 + 1, una tarjeta huérfana en la segunda fila) */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-4);
}
.category-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-ink);
  touch-action: manipulation;
  /* "translate" y no "transform": el reveal de entrada (animations.js) usa transform, así no se pisan */
  transition: translate 0.35s var(--ease-out), scale 0.15s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
@media (hover: hover) {
  .category-card:hover { translate: 0 -6px; box-shadow: var(--shadow-md); border-color: var(--color-accent); }
  .category-card:hover .category-arrow { translate: 6px 0; }
}
.category-card:active { scale: 0.98; }
.category-card .category-arrow { transition: translate 0.35s var(--ease-out); }
.category-card.is-active { background: var(--color-forest); border-color: var(--color-forest); color: var(--color-cream-text); }
.category-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
}
.category-card.is-active .category-icon { background: rgba(236,238,228,0.14); color: var(--color-cream-text); }
.category-card .icon { width: 24px; height: 24px; }
.category-card h3 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; }
.category-card p { font-size: var(--fs-sm); color: var(--color-ink-soft); }
.category-card.is-active p { color: var(--color-sage-on-dark); }
.category-card .category-arrow { margin-top: auto; color: var(--color-accent-dark); }
.category-card.is-active .category-arrow { color: var(--color-accent); }

/* ---------- Section shell (sin eyebrows: el titulo alcanza) ---------- */
.section { padding-block: var(--space-7); }
.section--soft { background: var(--color-bg-soft); }
.section-head { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--space-6); }
.section-head h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xl); color: var(--color-ink); letter-spacing: -0.01em; }
.section-head p { margin-top: var(--space-3); color: var(--color-ink-soft); font-size: var(--fs-lg); }
.section--dark { background: var(--color-forest); color: var(--color-cream-text); }
.section--dark .section-head h2 { color: var(--color-cream-text); }
.section--dark .section-head p { color: var(--color-sage-on-dark); }

/* ---------- Catálogo ---------- */
.catalog-filters {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.filter-pill {
  padding: 0.6rem 1.05rem; /* con las 6 categorías del cliente (nombres largos) las 7 píldoras entran en una sola fila en escritorio */
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  font-weight: 600;
  font-size: 0.92rem;
  touch-action: manipulation;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, scale 0.15s ease;
}
@media (hover: hover) {
  .filter-pill:hover { border-color: var(--color-accent); color: var(--color-ink); }
}
.filter-pill:active { scale: 0.96; }
.filter-pill.is-active { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; }

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5); /* + el margen de abajo de los filtros = el mismo aire de siempre cuando no hay fila de líneas ni descripción */
}
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  /* "translate" y no "transform": GSAP (filtro) y el reveal de entrada usan transform; con transform acá el hover
     quedaba tapado por los estilos inline que dejaba GSAP y las tarjetas se quedaban corridas 22px. */
  transition: translate 0.35s var(--ease-out), box-shadow 0.3s ease;
}
.product-card.is-hidden { display: none; }
.product-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-bg-soft); }
.product-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
@media (hover: hover) {
  .product-card:hover { translate: 0 -5px; box-shadow: var(--shadow-md); }
  .product-card:hover .product-photo img { transform: scale(1.05); }
}
.product-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.product-body h4 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: var(--lh-tight); color: var(--color-ink); flex: 1; } /* el nombre se estira: así los botones quedan alineados abajo */
.product-price { font-size: var(--fs-lg); font-weight: 700; color: var(--color-ink); }
/* Varias opciones (tamaños o cantidades): más chico, una opción por "renglón" cuando no entran juntas */
.product-price--multi { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); font-size: var(--fs-base); line-height: 1.5; }
.product-price--multi > span { white-space: nowrap; }
.product-body .btn { margin-top: var(--space-2); width: 100%; }
/* Rótulo de grupo (categoría + línea) dentro de la grilla: ocupa toda la fila y solo se ve cuando hay más de una línea a la vista
   (main.js le pone .show-heads a la grilla; .show-cats suma el nombre de la categoría cuando se ve todo el catálogo). */
.group-head { display: none; grid-column: 1 / -1; align-items: baseline; flex-wrap: wrap; gap: 0.15rem var(--space-3); margin-top: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.show-heads .group-head { display: flex; }
.show-heads .group-head.is-hidden { display: none; }
.group-cat { display: none; flex-basis: 100%; font-size: 0.75rem; font-weight: 600; color: var(--color-accent-dark); text-transform: uppercase; letter-spacing: 0.05em; }
.show-cats .group-cat { display: block; }
.group-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; line-height: var(--lh-tight); color: var(--color-ink); }
@media (prefers-reduced-motion: no-preference) {
  .show-heads .group-head { animation: rise-in 0.55s var(--ease-out) backwards; }
}

/* ---------- Líneas de producto, descripción y aviso de "sin productos" (los dibuja main.js al filtrar) ---------- */
/* Sin esto, el display de abajo le gana al atributo hidden y los bloques vacíos quedarían ocupando lugar */
.catalog-lines[hidden], .catalog-info[hidden], .catalog-empty[hidden] { display: none; }

/* Segunda fila de filtros: más liviana que las píldoras de categoría (borde fino; la activa va en tono ámbar suave, no relleno) */
.catalog-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.line-pill {
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-ink-soft);
  font-size: 0.85rem; font-weight: 500; line-height: 1.3;
  touch-action: manipulation;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, scale 0.15s ease;
}
@media (hover: hover) {
  .line-pill:hover { border-color: var(--color-accent); color: var(--color-ink); }
}
.line-pill:active { scale: 0.96; }
.line-pill.is-active { background: var(--color-accent-soft); border-color: var(--color-accent-dark); color: var(--color-accent-dark); font-weight: 600; }
/* En pantallas táctiles el botón se agranda un poco: con el dedo, 30 px de alto es poco */
@media (pointer: coarse) {
  .line-pill { padding-block: 0.6rem; }
}

.catalog-info { margin-bottom: var(--space-3); }
.info-card {
  max-width: 880px; margin-inline: auto;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  animation: info-in 0.5s var(--ease-out) backwards; /* se vuelve a disparar cada vez que main.js cambia el contenido */
}
.info-card--wide { max-width: none; }
@keyframes info-in { from { opacity: 0; translate: 0 10px; } }
.info-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.info-card h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); line-height: var(--lh-tight); color: var(--color-ink); }
.info-code {
  display: inline-block; flex-shrink: 0;
  padding: 0.25rem 0.7rem;
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.3;
  color: var(--color-accent-dark);
}
.info-tagline { margin-top: var(--space-1); font-family: var(--font-script); font-size: 1.4rem; line-height: 1.3; color: var(--color-accent-dark); }
.info-text { margin-top: var(--space-3); max-width: 68ch; color: var(--color-ink-soft); }
.info-text--note { margin-top: var(--space-2); font-size: var(--fs-sm); font-weight: 500; color: var(--color-accent-dark); }
/* Regla comercial del cliente: dos frases separadas por una raya fina, y el link a los blends a la derecha */
.info-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm); color: var(--color-ink-soft);
}
.info-note span + span { padding-left: var(--space-3); border-left: 1px solid var(--color-border); }
.info-note a {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding-block: var(--space-1);
  font-weight: 600; text-decoration: none; color: var(--color-accent-dark);
  touch-action: manipulation;
}
.info-note a .icon { width: 1.1em; height: 1.1em; transition: translate 0.3s var(--ease-out); }
@media (hover: hover) {
  .info-note a:hover { color: #7A4718; }
  .info-note a:hover .icon { translate: 4px 0; }
}
.info-note a:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 3px; border-radius: 4px; }

/* Souvenirs (categoría completa): ocasiones, personalización y packaging debajo de la introducción */
.souv-extras {
  display: grid; justify-items: start; gap: var(--space-5);
  margin-top: var(--space-5); padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.souv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); width: 100%; }
.souv-block { width: 100%; }
.souv-block h4 { margin-bottom: var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); line-height: var(--lh-tight); color: var(--color-ink); }
.info-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.info-chips li {
  padding: 0.35rem 0.85rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.85rem; line-height: 1.3;
  color: var(--color-ink-soft);
}
/* flex + center (como los blends): la última fila incompleta (7 opciones de packaging) queda centrada, no huérfana a la izquierda */
.packaging-grid { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.packaging-grid li {
  flex: 0 1 calc((100% - 3 * var(--space-3)) / 4);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.packaging-grid strong { margin-top: var(--space-1); font-weight: 600; color: var(--color-ink); }
.packaging-grid p { font-size: var(--fs-sm); color: var(--color-ink-soft); }
.souv-hint { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--color-ink-soft); }

/* Categoría o línea sin productos cargados: no queda un hueco, se invita a consultar */
.catalog-empty {
  max-width: 640px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-5);
  text-align: center;
  color: var(--color-ink-soft);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-card);
}
.catalog-empty strong { font-weight: 600; color: var(--color-ink); }

/* ---------- Blends sugeridos (catálogo de aromas: sin fotos ni precios; banda crema cálida para separarlo del catálogo de venta) ---------- */
.blends-section { --blends-line: rgba(140, 85, 31, 0.2); background: var(--color-sand); }
.blends-head { max-width: 780px; }
.blends-applies {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2);
  margin-top: var(--space-4);
}
.blends-applies li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.45rem 0.95rem;
  background: var(--color-surface);
  border: 1px solid var(--blends-line);
  border-radius: var(--radius-pill);
  font-size: 0.85rem; font-weight: 500; line-height: 1.3;
  color: var(--color-ink-soft);
}
.blends-applies .icon { width: 16px; height: 16px; color: var(--color-accent-dark); }

.blends-families { display: flex; flex-direction: column; gap: var(--space-6); counter-reset: blend; }
.blend-family-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding-bottom: var(--space-3); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--blends-line);
}
.blend-family-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--blends-line);
  color: var(--color-accent-dark);
}
.blend-family-icon .icon { width: 22px; height: 22px; }
.blend-family-head h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); line-height: var(--lh-tight); color: var(--color-ink); }
.blend-family-count { margin-left: auto; font-size: var(--fs-sm); color: var(--color-ink-soft); white-space: nowrap; }

/* flex + center: si la última fila queda incompleta (5 blends) se centra en vez de quedar huérfana a la izquierda */
.blend-grid { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.blend-card {
  flex: 0 1 calc((100% - 2 * var(--space-4)) / 3);
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--blends-line);
  border-radius: var(--radius-card);
  counter-increment: blend;
  /* "translate" (no "transform") para que el hover no pelee con la animación de entrada */
  transition: translate 0.35s var(--ease-out), box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Una familia de 4 blends dejaría una tarjeta suelta en una grilla de 3: va en una sola fila de 4 (pantalla ancha) o en 2x2 (tablet) */
@media (min-width: 1100px) {
  .blend-grid[data-count="4"] .blend-card { flex-basis: calc((100% - 3 * var(--space-4)) / 4); }
}
@media (min-width: 641px) and (max-width: 1099px) {
  .blend-grid[data-count="4"] .blend-card { flex-basis: calc((100% - var(--space-4)) / 2); }
}
.blend-card::before {
  content: counter(blend, decimal-leading-zero);
  font-family: var(--font-display); font-style: italic; font-size: 1.1rem; line-height: 1; letter-spacing: 0.08em;
  font-variant-numeric: lining-nums;
  color: var(--color-accent-dark);
}
@media (hover: hover) {
  .blend-card:hover { translate: 0 -4px; box-shadow: var(--shadow-md); border-color: var(--color-accent); }
}
.blend-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.55rem, 1.35rem + 0.6vw, 1.85rem); line-height: 1.1; color: var(--color-ink); }
.blend-notes { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.blend-notes li {
  padding: 0.3rem 0.7rem;
  background: var(--color-sand);
  border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-dark);
}
.blend-desc { flex: 1; font-size: var(--fs-sm); line-height: 1.6; color: var(--color-ink-soft); }
.blend-desc em { display: block; margin-bottom: var(--space-1); font-family: var(--font-display); font-size: 1.2rem; font-style: italic; line-height: 1.25; color: var(--color-accent-dark); }
.blend-ask {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding-block: var(--space-2);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  color: var(--color-accent-dark);
}
.blend-ask { touch-action: manipulation; }
.blend-ask .icon { width: 1.1em; height: 1.1em; transition: transform 0.3s var(--ease-out); }
@media (hover: hover) {
  .blend-ask:hover { color: #7A4718; }
  .blend-ask:hover .icon { transform: translateX(4px); }
}
.blend-ask:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 3px; border-radius: 4px; }

/* Pedido de aroma personalizado: bloque de color sólido al final de la lista, para que sea lo que se ve al terminar de recorrerla */
.blends-custom {
  margin-top: var(--space-7);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--color-accent-dark);
  color: var(--color-cream-text);
  border-radius: var(--radius-card);
}
.blends-custom-icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(236, 238, 228, 0.14);
  color: var(--color-cream-text);
}
.blends-custom-icon .icon { width: 30px; height: 30px; }
.blends-custom h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); line-height: var(--lh-tight); }
.blends-custom p { margin-top: var(--space-2); max-width: 54ch; color: var(--color-cream-text); }

/* ---------- Quienes somos (solo texto: una columna de lectura) ---------- */
.about-grid { max-width: 56rem; }
.about-text h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xl); color: var(--color-ink); margin-bottom: var(--space-4); }
.about-text p { color: var(--color-ink-soft); font-size: var(--fs-lg); margin-bottom: var(--space-3); max-width: 52ch; }
.about-signature { font-family: var(--font-script); font-size: 1.5rem; color: var(--color-accent-dark); margin-top: var(--space-4); }

/* ---------- Medios de pago (franja de iconos) ---------- */
.payment-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}
.payment-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-4); }
.payment-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-bg-soft);
  color: var(--color-accent-dark);
  border: 1px solid var(--color-border);
}
.payment-icon .icon { width: 26px; height: 26px; }
.payment-item h3 { font-size: var(--fs-base); font-weight: 700; color: var(--color-ink); }
.payment-item p { font-size: var(--fs-sm); color: var(--color-ink-soft); }

/* ---------- Opiniones (loop infinito, lento, se pausa al pasar el mouse) ---------- */
.testimonial-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testimonial-track {
  display: flex;
  width: max-content;
  gap: var(--space-4);
  animation: testimonial-marquee 130s linear infinite;
}
.testimonial-track:hover { animation-play-state: paused; }
/* animations.js lo pausa cuando la franja no está a la vista (no tiene sentido animar lo que nadie ve: gasta batería) */
.testimonial-track.is-paused { animation-play-state: paused; }
@keyframes testimonial-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / 3)); }
}
.testimonial-card {
  flex: 0 0 min(340px, 80vw);
  background: rgba(236,238,228,0.06);
  border: 1px solid rgba(236,238,228,0.16);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.testimonial-stars { display: flex; gap: 0.15rem; color: var(--color-star); }
.testimonial-stars .icon { width: 16px; height: 16px; }
.testimonial-card p.quote { font-size: var(--fs-lg); line-height: var(--lh-normal); }
.testimonial-author { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.testimonial-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--color-accent);
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: var(--fs-sm); }
/* Solo el "Clienta" de abajo del nombre (está en el div interior). Antes la regla era ".testimonial-author span" y también
   le pegaba al avatar: las iniciales salían gris-verdoso sobre naranja (contraste 1,9:1) en vez del blanco que define
   .testimonial-avatar. */
.testimonial-author div span { font-size: 0.8rem; color: var(--color-sage-on-dark); }

/* ---------- Prensa: franja secundaria, mucho más chica que una section normal ---------- */
.press-strip { background: var(--color-forest-deep); color: var(--color-sage-on-dark); }
.press-strip-inner {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding-block: var(--space-4); text-align: center; flex-wrap: wrap;
}
.press-strip-inner .icon { width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; }
.press-strip-inner p { font-size: var(--fs-sm); }
.press-strip-inner strong { color: var(--color-cream-text); }
.press-strip-inner a { color: var(--color-accent); text-decoration: underline; text-decoration-color: rgba(193,117,46,0.4); }
.press-strip-inner a:hover { text-decoration-color: var(--color-accent); }

/* ---------- FAQ (acordeon) ---------- */
.faq-list { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  overflow: hidden;
}
.faq-item summary {
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon { color: var(--color-accent-dark); flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { overflow: hidden; height: 0; }
.faq-answer p { padding: 0 var(--space-5) var(--space-4); color: var(--color-ink-soft); font-size: var(--fs-base); }

/* ---------- CTA final ---------- */
.cta-band { text-align: center; }
.cta-band h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xl); }
/* Esta franja está sobre el fondo claro de la página: antes usaba el verde grisáceo pensado para fondos oscuros (contraste 1,6:1) */
.cta-band p { margin-top: var(--space-3); font-size: var(--fs-lg); color: var(--color-ink-soft); max-width: 46ch; margin-inline: auto; }
.cta-band .hero-actions { justify-content: center; margin-top: var(--space-5); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-forest-deep); color: var(--color-cream-text); padding-block: var(--space-7) var(--space-5); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: var(--space-5);
}
.footer-brand img { height: 32px; margin-bottom: var(--space-3); }
.footer-brand p { color: var(--color-sage-on-dark); font-size: var(--fs-sm); max-width: 280px; }
.footer-col h3 { font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--space-3); letter-spacing: 0.02em; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-sage-on-dark); }
.footer-col li .icon { width: 16px; height: 16px; margin-top: 0.2rem; flex-shrink: 0; color: var(--color-accent); }
.footer-col a { text-decoration: none; color: var(--color-sage-on-dark); }
.footer-col a:hover { color: var(--color-cream-text); }
.footer-contact-highlight { align-items: center; margin-bottom: var(--space-1); }
.footer-col .footer-contact-highlight .icon {
  width: 34px; height: 34px; padding: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-forest-deep);
  margin-top: 0; flex-shrink: 0;
}
.footer-col .footer-contact-highlight a { font-weight: 700; font-size: var(--fs-base); color: var(--color-cream-text); }
.footer-col .footer-contact-highlight a:hover { color: var(--color-accent); }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(236,238,228,0.25);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, translate 0.3s var(--ease-out);
}
@media (hover: hover) {
  .footer-social a:hover { background: rgba(236,238,228,0.12); translate: 0 -2px; }
}
.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(236,238,228,0.14);
  font-size: 0.82rem;
  color: var(--color-sage-on-dark);
  text-align: center;
}

/* ---------- WhatsApp flotante ---------- */
.whatsapp-float {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 60;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #3E6146;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(18px) scale(0.85);
  pointer-events: none;
  visibility: hidden;
  /* Antes aparecía de golpe (la transición solo cubría el color de fondo). Ahora entra deslizando y asentándose con la
     misma curva del resto de la web (sin rebote); al ocultarse "visibility" espera a que termine el fundido para no cortarlo. */
  transition: opacity 0.35s ease, transform 0.6s var(--ease-out), visibility 0s linear 0.6s, background 0.2s ease;
}
.whatsapp-float.is-visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
@media (hover: hover) {
  .whatsapp-float:hover { background: #335239; transform: scale(1.08); }
}
.whatsapp-float:active { transform: scale(0.94); transition-duration: 0.12s; }
.whatsapp-float .icon { width: 28px; height: 28px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .catalog-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}
/* Menú superior: con 6 links ya no entra completo en pantallas medianas. Primero se
   achica el espacio entre links, después se oculta "Escribinos" (queda "Ver catálogo")
   y, antes que el resto del layout, se colapsa al menú hamburguesa. */
@media (max-width: 1180px) {
  .nav-links { gap: var(--space-4); }
}
@media (max-width: 1120px) {
  .nav-cta .btn-outline { display: none; }
}
@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  /* El panel del menú ya no aparece de golpe (display none -> flex): siempre está en el layout y se muestra con
     fundido + deslizamiento, y los links entran uno tras otro. "visibility" lo saca del foco/lectores de pantalla
     mientras está cerrado y espera a que termine la salida antes de ocultarse. */
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-bg); border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-4) var(--space-3); box-shadow: var(--shadow-md);
    visibility: hidden; opacity: 0; translate: 0 -12px; pointer-events: none;
    transition: opacity 0.2s ease, translate 0.4s var(--ease-out), visibility 0s linear 0.4s;
  }
  .site-header.nav-open .nav-links { visibility: visible; opacity: 1; translate: 0 0; pointer-events: auto; transition-delay: 0s; }
  .nav-links li { opacity: 0; translate: 0 -8px; transition: opacity 0.2s ease, translate 0.3s ease; }
  .site-header.nav-open .nav-links li { opacity: 1; translate: 0 0; transition: opacity 0.35s ease, translate 0.5s var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms + 70ms); }
  .nav-links li:nth-child(1) { --i: 0; }
  .nav-links li:nth-child(2) { --i: 1; }
  .nav-links li:nth-child(3) { --i: 2; }
  .nav-links li:nth-child(4) { --i: 3; }
  .nav-links li:nth-child(5) { --i: 4; }
  .nav-links li:nth-child(6) { --i: 5; }
  .nav-links a { display: block; padding: var(--space-3) 0; }
  .nav-links a::after { display: none; }
  .nav-links a[aria-current="location"] { color: var(--color-accent-dark); }
}
@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .hero .lead { max-width: none; font-size: var(--fs-base); }

  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }

  .blend-card { flex-basis: calc((100% - var(--space-4)) / 2); }
  .blends-custom { grid-template-columns: 1fr; justify-items: start; gap: var(--space-4); padding: var(--space-5); }

  .payment-row { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blend-card { flex-basis: 100%; }
}
@media (max-width: 520px) {
  .category-grid { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: 1fr; }
  .blend-family-head h3 { font-size: var(--fs-xl); }
  .blends-custom .btn { width: 100%; white-space: normal; text-align: center; }
  .payment-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand p { max-width: none; }
}
/* En el celular, las dos filas de filtros (categorías y líneas) son una sola línea que se desliza hacia el costado: envueltas
   ocupaban unos 380 px antes del primer producto. Llegan hasta los bordes de la pantalla y un degradé a la derecha avisa que hay más;
   main.js lleva la píldora activa al centro. justify-content: flex-start porque centrado y con desborde se corta el principio. */
@media (max-width: 640px) {
  .catalog-filters, .catalog-lines {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; overscroll-behavior-x: contain;
    margin-inline: calc(var(--space-4) * -1);
    padding: 2px var(--space-4) var(--space-1);
    padding-right: calc(var(--space-4) + 28px);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .catalog-filters::-webkit-scrollbar, .catalog-lines::-webkit-scrollbar { display: none; }
  .filter-pill, .line-pill { flex-shrink: 0; white-space: nowrap; }
}
/* Líneas, descripción y souvenirs del catálogo */
@media (max-width: 1000px) {
  .packaging-grid li { flex-basis: calc((100% - 2 * var(--space-3)) / 3); }
}
@media (max-width: 760px) {
  .info-card { padding: var(--space-4); }
  .souv-cols { grid-template-columns: 1fr; }
  .packaging-grid li { flex-basis: calc((100% - var(--space-3)) / 2); }
}
@media (max-width: 640px) {
  /* Si las dos frases de la regla comercial ya no entran en una línea, la raya divisoria quedaría al principio de la segunda */
  .info-note span + span { padding-left: 0; border-left: 0; }
  .info-note a { margin-left: 0; }
}
@media (max-width: 520px) {
  .info-card h3 { font-size: var(--fs-xl); }
  .packaging-grid li { flex-basis: 100%; }
  .catalog-empty { padding: var(--space-4); }
  .catalog-empty .btn { width: 100%; white-space: normal; text-align: center; }
  .souv-extras > .btn { width: 100%; white-space: normal; text-align: center; }
}

/* ---------- Reveal al scrollear ----------
   animations.js le agrega .reveal (más una variante) a lo que todavía está debajo de la pantalla y .is-in cuando entra a la
   vista; al terminar la transición saca las clases (el elemento queda "limpio": sin clases ni estilos inline).
   Es una transición CSS y no un tween de JS por cuadro: corre en el compositor y sigue fluida aunque el hilo
   principal esté ocupado (decodificando fotos, por ejemplo). Sin JS no se oculta nada.
   Variantes (el desplazamiento inicial): .rv-s corto, .rv-l largo, .rv-x entra desde la izquierda, .rv-pop suma una
   leve escala. Son clases con valores fijos (sin variables CSS inline por elemento) y sin "transition-delay": el
   escalonado lo hace animations.js demorando cuándo agrega .is-in. Chrome confirma que estas transiciones se componen
   (LayerTree: ActiveTransformAnimation / ActiveOpacityAnimation); escalonar cuesta algo más de contabilidad de estilo
   en el hilo principal que arrancar todo junto, pero el CPU total de scrollear toda la página quedó por debajo del
   que tenía la versión con GSAP + ScrollTrigger. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.6s ease, transform 0.9s var(--ease-out);
}
.reveal.rv-s { transform: translate3d(0, 14px, 0); }
.reveal.rv-l { transform: translate3d(0, 34px, 0); }
.reveal.rv-x { transform: translate3d(-26px, 0, 0); }
.reveal.rv-pop { transform: translate3d(0, 30px, 0) scale(0.985); }
.reveal.is-in { opacity: 1; transform: none; }
/* la foto del producto "se asienta" (leve zoom-out) mientras la tarjeta entra */
.reveal .product-photo img { scale: 1.07; transition: scale 1.2s var(--ease-out), opacity 0.8s ease, transform 0.6s var(--ease-out); }
.reveal.is-in .product-photo img { scale: 1; }

/* ---------- Fotos que se funden al terminar de cargar ----------
   Antes la foto "aparecía de golpe" sobre el fondo gris. main.js marca .is-loaded cuando el navegador la tiene.
   Solo se esconden si el JS cargó (clase "js" que pone boot.js): sin JS se ven normal.
   Es para fotos que están más abajo (catálogo, Quiénes somos); la del hero NO lleva data-fade (afectaría el LCP). */
.js img[data-fade] { opacity: 0; transition: opacity 0.8s ease, transform 0.6s var(--ease-out); }
.js img[data-fade].is-loaded { opacity: 1; }

/* ---------- Accesibilidad de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}