/* ==========================================================================
   Alun Gluten Free — Componentes y secciones
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--c-white);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.8em 1.5em;
  min-height: 44px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-cond);
  font-variation-settings: "wdth" 88;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur-spring) var(--ease-spring-soft);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

/* Al presionar el botón se hunde un poco: confirma el toque antes de que
   WhatsApp tarde en abrir. La bajada es casi inmediata (--dur-press) y al
   soltar vuelve con el resorte de la regla base. */
.btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: var(--dur), var(--dur), var(--dur), var(--dur-press);
}

.btn svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  fill: currentcolor;
}

.btn--primary:hover {
  --btn-bg: var(--accent-hover);
}

.btn--amber {
  --btn-bg: var(--c-amber);
  --btn-fg: var(--c-ink-900);
}

.btn--amber:hover {
  --btn-bg: #ffe14d;
}

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: color-mix(in srgb, var(--text) 30%, transparent);
}

.btn--outline:hover {
  --btn-bg: var(--text);
  --btn-fg: var(--bg);
  --btn-border: var(--text);
}

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: var(--text-on-dark);
  --btn-border: var(--border-dark);
}

.btn--outline-light:hover {
  --btn-bg: var(--text-on-dark);
  --btn-fg: var(--c-ink-900);
  --btn-border: var(--text-on-dark);
}

.btn--sm {
  padding: 0.6em 1.15em;
  font-size: var(--fs-xs);
}

.btn--block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 130;
  background: color-mix(in srgb, var(--c-ink-900) 80%, transparent);
  border-block-end: 1px solid transparent;
  transition: background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header {
    backdrop-filter: blur(14px) saturate(1.3);
  }
}

.site-header.is-scrolled {
  background: var(--c-ink-900);
  border-block-end-color: var(--border-dark);
}

/* Con el menú abierto la cabecera se vuelve transparente: el botón y el logo
   siguen encima del overlay, sin una banda opaca cortando el fondo. */
.menu-open .site-header,
.menu-open .site-header.is-scrolled {
  background: transparent;
  border-block-end-color: transparent;
  backdrop-filter: none;
}

/* Tres columnas con la tercera vacía: así el logo queda centrado respecto al
   ancho completo y no desplazado por el botón de menú. */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--header-h);
}

.site-header__inner::after {
  content: "";
  grid-column: 3;
}

.site-header__logo {
  grid-column: 2;
  justify-self: center;
  display: block;
  padding: var(--s-2);
}

.site-header__logo img {
  width: auto;
  height: clamp(2rem, 1.4rem + 2vw, 2.75rem);
}

/* --------------------------------------------------------------------------
   Botón de menú (visible en todos los tamaños)
   -------------------------------------------------------------------------- */

.menu-btn {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  background: none;
  color: var(--text-on-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur) var(--ease),
    border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.menu-btn:hover {
  background: color-mix(in srgb, var(--c-white) 10%, transparent);
  border-color: color-mix(in srgb, var(--c-white) 35%, transparent);
}

.menu-btn__label {
  font-family: var(--font-cond);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Tres rayas que se transforman en aspa. */
.menu-btn__bars {
  position: relative;
  display: block;
  width: 22px;
  height: 14px;
  flex: none;
}

.menu-btn__bars span {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  border-radius: 2px;
  background: currentcolor;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.menu-btn__bars span:nth-child(1) { top: 0; }
.menu-btn__bars span:nth-child(2) { top: 6px; }
.menu-btn__bars span:nth-child(3) { top: 12px; }

.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(2) {
  opacity: 0;
}

.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (width < 30rem) {
  .menu-btn__label {
    display: none;
  }

  .menu-btn {
    padding: var(--s-2);
    width: 44px;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Panel de menú a pantalla completa
   -------------------------------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-ink-900);
  color: var(--text-on-dark);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}

.menu[data-open] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Foto de fondo tenue: el menú también comunica marca, no solo enlaces. */
.menu__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
}

.menu__inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: var(--s-8);
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-block: calc(var(--header-h) + var(--s-8)) var(--s-8);
}

@media (width >= 60rem) {
  .menu__inner {
    grid-template-columns: 1.35fr 1fr;
    align-items: center;
    gap: var(--s-10);
  }
}

.menu__nav ul {
  display: grid;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: menu;
}

.menu__nav a {
  --menu-shift: 0;

  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: clamp(var(--s-2), 1.4vw, var(--s-4));
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: var(--vf-display);
  font-size: clamp(2rem, 1.1rem + 4.2vw, 4rem);
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  text-decoration: none;
  transition: color var(--dur) var(--ease),
    transform var(--dur-spring) var(--ease-spring-soft);
}

.menu__nav a::before {
  counter-increment: menu;
  content: counter(menu, decimal-leading-zero);
  flex: none;
  font-family: var(--font-cond);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-leaf);
  transition: color var(--dur) var(--ease);
}

.menu__nav a:hover,
.menu__nav a:focus-visible {
  color: var(--c-amber);
  transform: translateX(0.4rem);
}

.menu__nav a:hover::before,
.menu__nav a:focus-visible::before {
  color: var(--c-amber);
}

/* Entrada escalonada de los enlaces al abrir. */
.menu[data-open] .menu__nav li {
  animation: menu-in 460ms var(--ease) backwards;
  animation-delay: calc(60ms + var(--i, 0) * 55ms);
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.menu__aside {
  display: grid;
  gap: var(--s-5);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--border-dark);
}

@media (width >= 60rem) {
  .menu__aside {
    padding-block-start: 0;
    padding-inline-start: var(--s-8);
    border-block-start: 0;
    border-inline-start: 1px solid var(--border-dark);
  }
}

.menu__titulo {
  font-family: var(--font-cond);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-leaf);
}

.menu__contact {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__contact a,
.menu__contact span {
  color: var(--text-on-dark);
  font-size: var(--fs-md);
  text-decoration: none;
}

.menu__contact a:hover {
  color: var(--c-amber);
  text-decoration: underline;
}

.menu__contact small {
  display: block;
  font-family: var(--font-cond);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

.menu[data-open] .menu__aside {
  animation: menu-in 520ms var(--ease) 320ms backwards;
}

/* Bloqueo de scroll del fondo mientras el menú está abierto. */
.menu-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(32rem, 78svh, 44rem);
  margin-block-start: calc(var(--header-h) * -1);
  padding-block: calc(var(--header-h) + var(--s-6)) var(--s-7);
  background: var(--c-ink-900);
  color: var(--text-on-dark);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* La foto y el video tienen que ocupar la MISMA caja para que uno aparezca
   sobre el otro. En flujo normal se apilaban: como `picture` es
   `display: contents`, la imagen es hija directa de .hero__media y el video
   quedaba 751 px más abajo, fuera del hero y sin verse nunca. */
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media video {
  opacity: 0;
  transition: opacity 900ms var(--ease);
}

.hero__media video.is-ready {
  opacity: 1;
}

/* Velo doble: oscurece para el texto y tiñe con el verde de marca. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      180deg,
      rgb(15 16 18 / 78%) 0%,
      rgb(15 16 18 / 52%) 38%,
      rgb(15 16 18 / 72%) 78%,
      rgb(15 16 18 / 92%) 100%
    ),
    radial-gradient(
      120% 80% at 50% 40%,
      transparent 30%,
      rgb(22 48 26 / 55%) 100%
    );
}

.hero__inner {
  position: relative;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--s-4);
}

.hero__logo {
  width: min(72vw, 23rem);
  height: auto;
  filter: drop-shadow(0 6px 24px rgb(0 0 0 / 45%));
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: var(--vf-display);
  font-size: var(--fs-2xl);
  letter-spacing: var(--tracking-display);
  max-width: 16ch;
}

.hero__title em {
  display: block;
  line-height: 1.3;
  margin-block-start: 0.02em;
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-variation-settings: normal;
  font-size: 0.86em;
  letter-spacing: 0;
  color: var(--c-leaf);
  transform: rotate(-1.5deg);
}

.hero__lead {
  max-width: 44ch;
  color: var(--text-on-dark);
  font-size: var(--fs-md);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  margin-block-start: var(--s-2);
  font-family: var(--font-cond);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

.hero__meta li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.hero__meta li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-leaf);
}

/* En pantallas chicas el hero se compacta para que el primer botón quede
   dentro del primer pantallazo. */
@media (width < 40rem) {
  .hero {
    padding-block: calc(var(--header-h) + var(--s-6)) var(--s-7);
  }

  .hero__inner {
    gap: var(--s-4);
  }

  .hero__logo {
    width: min(66vw, 18rem);
  }

  .hero__lead {
    font-size: var(--fs-base);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 22rem);
  }
}

/* --------------------------------------------------------------------------
   Franja de sellos
   -------------------------------------------------------------------------- */

.seals {
  background: var(--c-green);
  color: var(--c-white);
}

.seals__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-3) clamp(var(--s-5), 4vw, var(--s-9));
  margin: 0;
  padding-block: var(--s-4);
  font-family: var(--font-cond);
  font-weight: 700;
  font-variation-settings: "wdth" 82;
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.seals__list li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.seals__list svg {
  width: 1.15em;
  height: 1.15em;
  fill: var(--c-leaf);
}

/* --------------------------------------------------------------------------
   Encabezado de sección
   -------------------------------------------------------------------------- */

.section-head {
  display: grid;
  gap: var(--s-3);
  max-width: 52rem;
  margin-block-end: var(--s-8);
}

.section-head--center {
  justify-items: center;
  text-align: center;
  margin-inline: auto;
}

.section-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: var(--vf-display);
  font-size: var(--fs-2xl);
  letter-spacing: var(--tracking-display);
}

.section-head__title em {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-variation-settings: normal;
  font-size: 1.08em;
  letter-spacing: 0;
  color: var(--accent-warm-text);
}

.section--dark .section-head__title em {
  color: var(--c-amber-deep);
}

.section-head__lead {
  color: var(--text-muted);
  max-width: 60ch;
}

.section--dark .section-head__lead {
  color: var(--text-on-dark-muted);
}

/* --------------------------------------------------------------------------
   Dos formas de comprar
   -------------------------------------------------------------------------- */

.paths {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.path {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  padding: clamp(var(--s-5), 3vw, var(--s-7));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.path--featured {
  background: var(--c-ink-900);
  border-color: transparent;
  color: var(--text-on-dark);
  box-shadow: var(--shadow-md);
}

.path__tag {
  justify-self: start;
  padding: 0.4em 0.95em;
  background: var(--c-amber);
  color: var(--c-ink-900);
  border-radius: var(--radius-pill);
  font-family: var(--font-cond);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.path--plain .path__tag {
  background: var(--c-paper-3);
  color: var(--c-text);
}

.path__title {
  font-family: var(--font-cond);
  font-weight: 800;
  font-variation-settings: var(--vf-cond);
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-cond);
  text-transform: uppercase;
}

.path__text {
  color: var(--text-muted);
}

.path--featured .path__text {
  color: var(--text-on-dark-muted);
}

.path__list {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--fs-sm);
}

.path__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
}

.path__list li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-block-start: 0.55em;
  border-radius: 50%;
  background: var(--accent);
}

.path--featured .path__list li::before {
  background: var(--c-leaf);
}

.path__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-2);
}

/* --------------------------------------------------------------------------
   Catálogo de productos
   -------------------------------------------------------------------------- */

.product-group + .product-group {
  margin-block-start: var(--s-9);
}

.product-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block-end: var(--s-3);
  margin-block-end: var(--s-6);
  border-block-end: 2px solid var(--border);
}

.section--dark .product-group__head {
  border-block-end-color: var(--border-dark);
}

.product-group__title {
  font-family: var(--font-cond);
  font-weight: 800;
  font-variation-settings: var(--vf-cond);
  font-size: var(--fs-lg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.product-group__note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.section--dark .product-group__note {
  color: var(--text-on-dark-muted);
}

.product-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

/* Grupo de dos productos: tarjetas horizontales, para no dejar media fila
   vacía junto a los grupos de cuatro. */
.product-grid--duo {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

/* Grupo de tres productos: columnas explícitas para que la fila quede
   completa en vez de dejar un hueco al final. */
.product-grid--trio {
  grid-template-columns: minmax(0, 1fr);
}

@media (width >= 34rem) {
  .product-grid--trio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 62rem) {
  .product-grid--trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Los sacos de legumbres: tres en una fila desde tablet. */
.product-grid--bulk {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (width >= 48rem) {
  .product-grid--bulk {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.product-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--c-ink-900);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-spring) var(--ease-spring-soft),
    box-shadow var(--dur-slow) var(--ease-out-expo);
  -webkit-tap-highlight-color: transparent;
}

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

.product-card__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--c-ink-800);
}

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

/* Degradado sutil hacia el cuerpo de la tarjeta: unifica las fotos de fondo
   claro con las de fondo oscuro sin alterar el producto. */
.product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 62%,
    rgb(15 16 18 / 45%) 100%
  );
}

.product-card--tall .product-card__media {
  aspect-ratio: 3 / 4;
}

@media (width >= 34rem) {
  .product-card--wide {
    grid-template-rows: auto;
    grid-template-columns: 42% 1fr;
  }

  /* La media se estira a la altura de la fila; la foto se posiciona
     absoluta para poder cubrirla sin depender de una altura definida. */
  .product-card--wide .product-card__media {
    aspect-ratio: auto;
  }

  .product-card--wide .product-card__media img {
    position: absolute;
    inset: 0;
  }

  .product-card--wide .product-card__media::after {
    background: linear-gradient(
      to right,
      transparent 62%,
      rgb(15 16 18 / 45%) 100%
    );
  }
}

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

/* El precio y el botón quedan alineados al pie de todas las tarjetas de la
   fila, aunque las descripciones tengan distinto largo. */
.product-card__body .price {
  margin-block-start: auto;
}

.product-card__name {
  font-family: var(--font-cond);
  font-weight: 800;
  font-variation-settings: var(--vf-cond-tight);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.product-card__name em {
  display: block;
  margin-block-start: 0.02em;
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-variation-settings: normal;
  font-size: 0.9em;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  /* Dorado, no el amarillo del precio: el subtítulo no debe competir con la
     cifra. Sobre el negro del packaging da 8,9:1 de contraste. */
  color: var(--c-amber-deep);
}

.product-card__text {
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
}

.product-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
}

.tag {
  padding: 0.35em 0.8em;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-pill);
  font-family: var(--font-cond);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  white-space: nowrap;
}

.price {
  display: grid;
  gap: 2px;
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--border-dark);
}

.price__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4em;
  font-family: var(--font-cond);
  font-weight: 800;
  font-variation-settings: var(--vf-cond-tight);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xl);
  line-height: 1.15;
  color: var(--c-amber);
  letter-spacing: 0.005em;
}

.price__unit {
  font-family: var(--font-cond);
  font-variation-settings: "wdth" 100;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-on-dark-muted);
  letter-spacing: 0;
  /* "por kilo" o "la caja" nunca se parten entre dos líneas. */
  white-space: nowrap;
}

.price__note {
  font-size: var(--fs-xs);
  color: var(--text-on-dark-muted);
}

/* Producto sin precio en el catálogo todavía: se mantiene la estructura de
   la tarjeta pero sin el tamaño ni el color reservados a una cifra real. */
.price--ask .price__amount {
  font-family: var(--font-cond);
  font-variation-settings: var(--vf-cond);
  font-size: var(--fs-lg);
  color: var(--text-on-dark);
}

.product-card .btn {
  margin-block-start: var(--s-1);
}

/* --------------------------------------------------------------------------
   Aviso de precios
   -------------------------------------------------------------------------- */

.notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-5);
  margin-block-start: var(--s-8);
  background: color-mix(in srgb, var(--c-amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-amber-deep) 45%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}

.notice svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--c-amber-deep);
}

.notice p + p {
  margin-block-start: var(--s-2);
}

.section--dark .notice {
  background: color-mix(in srgb, var(--c-amber) 10%, transparent);
  color: var(--text-on-dark);
}

/* --------------------------------------------------------------------------
   Historia
   -------------------------------------------------------------------------- */

.story {
  display: grid;
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.story__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.story__media img {
  width: 100%;
}

.story__body {
  display: grid;
  gap: var(--s-4);
}

.story__body p {
  color: var(--text-muted);
}

.story__quote {
  margin: 0;
  padding-inline-start: var(--s-6);
  border-inline-start: 3px solid var(--c-leaf);
  font-family: var(--font-script);
  font-size: var(--fs-2xl);
  line-height: 1.35;
  color: var(--accent);
  transform: rotate(-0.8deg);
}

/* Grilla fija de 2 columnas a propósito, no auto-fit: con 4 ítems calza en
   2x2 —26 años/100% arriba, Chile/sello abajo, cada uno bajo su par— y ese
   orden parejo es justo lo que se pidió. Un auto-fit habría recalculado el
   número de columnas según el ancho disponible y roto el emparejamiento. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5) var(--s-6);
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--border);
}

.facts__item {
  display: grid;
  align-content: start;
  gap: var(--s-1);
}

/* El sello no lleva valor ni etiqueta, así que sin esto quedaría más alto
   que "Chile" y se vería descolgado respecto a su fila. */
.facts__item--sello {
  align-items: center;
}

.facts__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: var(--vf-display-sm);
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  color: var(--accent);
}

.facts__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Sello de ProChile: recorte de un logo mucho más grande (ver el comentario
   dentro del propio SVG). object-fit: cover + object-position ancla la
   esquina superior izquierda, que es donde vive la marca visible; el resto
   del archivo es lienzo vacío.
   OJO al tocar esto: no se puede lograr el mismo recorte cambiando el
   viewBox del SVG ni con transform:scale dentro de un contenedor con
   overflow:hidden — las tres formas probadas dejan el logo invisible en
   Chromium con este archivo en particular (path enorme, fill-rule
   evenodd). Recortar por CSS con object-fit, como está aquí, es la única
   variante que sí funciona. */
.facts__sello {
  width: 5.5rem;
  height: 2.5rem;
  object-fit: cover;
  object-position: 0% 4%;
}

/* --------------------------------------------------------------------------
   Recetas / Instagram
   -------------------------------------------------------------------------- */

.recipes-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.recipe-card {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-ink-800);
  border: 1px solid var(--border-dark);
}

.recipe-card__embed {
  aspect-ratio: 9 / 12;
  container-type: inline-size;
}

.recipe-card__embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Marcador visible mientras no haya reels cargados desde el CMS/lista. */
.recipe-card--placeholder {
  aspect-ratio: 9 / 12;
}

.recipe-card--placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
}

.recipe-card__overlay {
  position: relative;
  display: grid;
  align-content: end;
  gap: var(--s-3);
  padding: var(--s-5);
  background: linear-gradient(
    180deg,
    transparent 30%,
    rgb(15 16 18 / 85%) 100%
  );
}

.recipe-card__overlay h3 {
  font-family: var(--font-cond);
  font-weight: 800;
  font-variation-settings: var(--vf-cond);
  font-size: var(--fs-lg);
  text-transform: uppercase;
}

.recipe-card__overlay p {
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
}

/* --------------------------------------------------------------------------
   Punto de venta
   -------------------------------------------------------------------------- */

.local {
  display: grid;
  gap: clamp(var(--s-6), 4vw, var(--s-8));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  align-items: start;
}

.local__body {
  display: grid;
  gap: var(--s-5);
}

.info-list {
  display: grid;
  gap: var(--s-4);
  margin: 0;
}

.info-list__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
}

.info-list__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 50%;
}

.info-list__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--accent);
}

.info-list__label {
  font-family: var(--font-cond);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.info-list__value {
  font-weight: 700;
}

.info-list__value a {
  text-decoration: none;
}

.info-list__value a:hover {
  text-decoration: underline;
}

.map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-paper-3);
  border: 1px solid var(--border);
}

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   Cierre y pie
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-green-deep);
  color: var(--text-on-dark);
  text-align: center;
}

.cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
}

.cta-band__inner {
  display: grid;
  justify-items: center;
  gap: var(--s-5);
}

.cta-band__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: var(--vf-display);
  font-size: var(--fs-2xl);
  letter-spacing: var(--tracking-display);
}

.site-footer {
  background: var(--c-ink-900);
  color: var(--text-on-dark-muted);
  font-size: var(--fs-sm);
}

.site-footer__grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  padding-block: var(--s-9) var(--s-7);
}

.site-footer__logo {
  height: 3rem;
  width: auto;
  margin-block-end: var(--s-4);
}

.site-footer h2 {
  margin-block-end: var(--s-4);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark);
}

.site-footer ul {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--text-on-dark-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--c-leaf);
  text-decoration: underline;
}

.socials {
  display: flex;
  gap: var(--s-3);
  margin-block-start: var(--s-4);
}

.socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-dark);
  border-radius: 50%;
}

.socials a:hover {
  background: var(--c-white);
  border-color: var(--c-white);
}

.socials svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--text-on-dark);
}

.socials a:hover svg {
  fill: var(--c-ink-900);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  /* Espacio extra abajo para que el botón flotante no tape esta línea. */
  padding-block: var(--s-5) var(--s-9);
  border-block-start: 1px solid var(--border-dark);
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   Botón flotante de WhatsApp
   -------------------------------------------------------------------------- */

.wa-float {
  position: fixed;
  inset-block-end: clamp(var(--s-4), 3vw, var(--s-6));
  inset-inline-end: clamp(var(--s-4), 3vw, var(--s-6));
  z-index: 90;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5) var(--s-3) var(--s-4);
  background: #25d366;
  color: #06331a;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-spring) var(--ease-spring-soft);
  -webkit-tap-highlight-color: transparent;
}

.wa-float:hover {
  color: #06331a;
  transform: translateY(-3px);
}

.wa-float svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: currentcolor;
}

@media (width < 40rem) {
  .wa-float span {
    display: none;
  }

  .wa-float {
    padding: var(--s-4);
  }
}

/* --------------------------------------------------------------------------
   Aparición al hacer scroll (mejora progresiva)
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Textura de papel
   --------------------------------------------------------------------------
   Grano finísimo sobre toda la página. Le da al sitio el aire impreso del
   packaging y quita la planitud de las superficies grandes de color.
   -------------------------------------------------------------------------- */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Cinta de sellos en movimiento
   -------------------------------------------------------------------------- */

.ticker {
  overflow: hidden;
  background: var(--c-green);
  color: var(--c-white);
  border-block: 2px solid var(--c-green-dark);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 38s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

.ticker__group {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-5), 4vw, var(--s-8));
  margin: 0;
  padding: var(--s-4) clamp(var(--s-5), 4vw, var(--s-8)) var(--s-4) 0;
  list-style: none;
  font-family: var(--font-cond);
  font-weight: 700;
  font-variation-settings: "wdth" 82;
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ticker__group li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.ticker__group svg {
  width: 1.1em;
  height: 1.1em;
  fill: var(--c-leaf);
  flex: none;
}

/* --------------------------------------------------------------------------
   Sello circular "Calidad Premium"
   --------------------------------------------------------------------------
   Recreación del timbre impreso en las cajas. Decorativo.
   -------------------------------------------------------------------------- */

.stamp {
  position: absolute;
  z-index: 2;
  width: clamp(6rem, 9vw, 8.5rem);
  height: auto;
  color: var(--c-amber);
  opacity: 0.9;
  pointer-events: none;
  animation: stamp-spin 34s linear infinite;
}

.stamp text {
  font-family: var(--font-cond);
  font-size: 8.4px;
  font-weight: 700;
  letter-spacing: 0.28em;
  fill: currentcolor;
  text-transform: uppercase;
}

.stamp__core {
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  fill: currentcolor;
}

@keyframes stamp-spin {
  to {
    transform: rotate(360deg);
  }
}

.hero .stamp {
  inset-block-end: clamp(var(--s-5), 4vw, var(--s-8));
  inset-inline-start: clamp(var(--s-4), 4vw, var(--s-9));
}

@media (width < 64rem) {
  .hero .stamp {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Retoques de personalidad en componentes existentes
   -------------------------------------------------------------------------- */

/* La foto de producto se acerca un poco al pasar el cursor por la tarjeta. */
.product-card__media img {
  transition: transform 900ms var(--ease-out-expo);
}

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

/* Filete decorativo bajo los títulos de sección. */
.section-head__title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-block-start: var(--s-4);
  border-radius: 2px;
  background: var(--accent-warm);
}

.section-head--center .section-head__title::after {
  margin-inline: auto;
}

.section--dark .section-head__title::after {
  background: var(--c-amber);
}

/* Número de orden en los grupos del catálogo. */
.product-group__head {
  counter-increment: grupo;
}

.product-group__title::before {
  content: counter(grupo, decimal-leading-zero) " / ";
  color: var(--accent-warm-text);
  font-variant-numeric: tabular-nums;
}

.section--dark .product-group__title::before {
  color: var(--c-amber-deep);
}

#mayorista .container,
#granel .container {
  counter-reset: grupo;
}

/* La cita de la historia lleva comillas dibujadas. */
.story__quote::before {
  content: "\201C";
  position: absolute;
  inset-block-start: -0.35em;
  inset-inline-start: 0.15em;
  font-size: 2.4em;
  line-height: 1;
  color: var(--c-leaf);
  pointer-events: none;
}

.story__quote {
  position: relative;
}

/* Firma de la cita. Va en la tipografía condensada, no en la manuscrita: si
   las dos van en script, la firma compite con la frase en vez de cerrarla. */
.story__quote cite {
  display: block;
  margin-block-start: var(--s-3);
  font-family: var(--font-cond);
  font-variation-settings: var(--vf-cond);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Sección actual dentro del menú. */
.menu__nav a[aria-current="true"] {
  color: var(--c-amber);
}

.menu__nav a[aria-current="true"]::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  margin-inline-start: 0.35em;
  border-radius: 50%;
  background: currentcolor;
  align-self: center;
}

/* ==========================================================================
   Ficha de producto (productos/<slug>.html)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tarjeta enlazada
   --------------------------------------------------------------------------
   La tarjeta completa lleva a la ficha, pero el botón de WhatsApp tiene que
   seguir siendo pulsable: el enlace que cubre la tarjeta queda por debajo.
   -------------------------------------------------------------------------- */

.product-card {
  position: relative;
}

.product-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.product-card__link:focus-visible {
  outline-offset: -4px;
}

.product-card__body .btn,
.product-card__specs {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Migas de pan
   -------------------------------------------------------------------------- */

.breadcrumb {
  padding-block: var(--s-5) 0;
  font-family: var(--font-cond);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "/";
  margin-inline-end: var(--s-3);
  color: var(--c-paper-3);
}

.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.breadcrumb [aria-current] {
  color: var(--text);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Cabecera de la ficha
   -------------------------------------------------------------------------- */

.pdp {
  padding-block-start: var(--s-6);
}

.pdp__grid {
  display: grid;
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  align-items: start;
}

@media (width >= 62rem) {
  .pdp__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.pdp__media {
  position: relative;
  overflow: hidden;
  background: var(--c-ink-800);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.pdp__media img {
  width: 100%;
  height: auto;
}

.pdp__info {
  display: grid;
  align-content: start;
  gap: var(--s-3);
}

.pdp__name {
  font-family: var(--font-cond);
  font-weight: 800;
  font-variation-settings: var(--vf-cond-tight);
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.pdp__name em {
  display: block;
  margin-block-start: 0.02em;
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-variation-settings: normal;
  font-size: 0.56em;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent-warm-text);
}

.pdp__text {
  display: grid;
  gap: var(--s-3);
  color: var(--text-muted);
}

/* Etiquetas sobre fondo claro. */
.tag--light {
  border-color: var(--border);
  color: var(--text-muted);
}

.pdp__price {
  display: grid;
  gap: 2px;
  padding-block: var(--s-3);
  border-block: 1px solid var(--border);
}

.pdp__amount {
  font-family: var(--font-cond);
  font-weight: 800;
  font-variation-settings: var(--vf-cond-tight);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  color: var(--accent);
}

.pdp__unit {
  font-family: var(--font-cond);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-muted);
}

.pdp__note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.pdp__price--ask .pdp__amount {
  font-size: var(--fs-lg);
  color: var(--text);
}

.pdp__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-2);
}

/* --------------------------------------------------------------------------
   Ficha técnica
   -------------------------------------------------------------------------- */

.spec {
  display: grid;
  gap: 0;
  margin: 0;
}

.spec__row {
  display: grid;
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--border-dark);
}

@media (width >= 40rem) {
  .spec__row {
    grid-template-columns: 14rem 1fr;
    align-items: baseline;
  }
}

.spec__label {
  font-family: var(--font-cond);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-leaf);
}

.spec__value {
  margin: 0;
  color: var(--text-on-dark);
}

/* --------------------------------------------------------------------------
   Dónde comprar por unidad
   -------------------------------------------------------------------------- */

.retail__grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.retail__card {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: clamp(var(--s-5), 3vw, var(--s-6));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.retail__nombre {
  font-family: var(--font-cond);
  font-weight: 800;
  font-variation-settings: var(--vf-cond);
  font-size: var(--fs-lg);
  text-transform: uppercase;
}

.retail__dato {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.retail__card .btn {
  justify-self: start;
  margin-block-start: var(--s-2);
}

.retail__pendiente {
  margin-block-start: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Aviso bajo el precio mayorista: existe además venta por unidad. */
.pdp__hint {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-inline-start: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Logo de la cadena dentro de la tarjeta de retail. Se muestra a tamaño fijo
   y sin recortar, para no deformar una marca de terceros. */
/* Distintivo de la tarjeta: el logo de la cadena o la marca de Alun. Es
   decorativo (alt vacío) porque el nombre va en texto justo debajo. */
.retail__logo {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* ==========================================================================
   Prosa: páginas de texto largo (privacidad y lo que venga después)
   --------------------------------------------------------------------------
   Una sola columna estrecha. El ancho lo manda la medida de lectura, no la
   rejilla, por eso no reutiliza .section-head.
   ========================================================================== */
.prosa__col {
  max-width: 46rem;
}

.prosa__titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: var(--vf-display);
  font-size: var(--fs-3xl);
  letter-spacing: var(--tracking-display);
  margin-block: var(--s-2) var(--s-5);
}

.prosa__titulo em {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-variation-settings: normal;
  font-size: 1.08em;
  letter-spacing: 0;
  color: var(--accent-warm-text);
}

/* Entradilla: el resumen que evita tener que leerlo todo. */
.prosa__resumen {
  font-size: var(--fs-md);
  color: var(--text);
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: var(--s-4);
  margin-block-end: var(--s-8);
}

.prosa h2 {
  font-family: var(--font-cond);
  font-variation-settings: var(--vf-cond);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-block: var(--s-8) var(--s-3);
}

.prosa p,
.prosa li {
  color: var(--text-muted);
  max-width: 68ch;
}

.prosa p {
  margin-block-end: var(--s-4);
}

.prosa ul {
  margin-block-end: var(--s-4);
  padding-inline-start: var(--s-5);
  display: grid;
  gap: var(--s-2);
}

.prosa strong {
  color: var(--text);
  font-weight: 700;
}

.prosa__fecha {
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   Capa de movimiento
   --------------------------------------------------------------------------
   Todo lo de esta sección es decorativo.

   El sitio NO consulta `prefers-reduced-motion`: las animaciones corren
   siempre, también si el sistema pide «reducir movimiento». Es una decisión
   de Juan (septiembre de 2026), la misma que ya se había tomado con el video
   del hero; el detalle y cómo revertirlo están en el README, «El sitio
   ignora prefers-reduced-motion a propósito».

   Reglas para no pisar lo que ya existía:
   · Las entradas animan las propiedades sueltas `translate`, `scale` y
     `opacity`, nunca `transform`. Los hover de tarjetas y botones usan
     `transform`, así que los dos efectos se suman en vez de anularse.
   · El motivo que se repite es la tinta: los acentos en Imperial Script
     se "escriben" de izquierda a derecha, como a mano, y el filete bajo
     cada título se traza después.
   · Lo atado al scroll (paralaje, barra de progreso) usa animaciones
     ligadas al scroll de CSS y solo existe donde el navegador las soporta.
     Donde no, la página queda exactamente como antes.
   ========================================================================== */

/* Cifras de la historia que cuentan desde cero (main.js): con dígitos de
   ancho fijo, " años" no baila mientras cambia el número. */
[data-count] {
  font-variant-numeric: tabular-nums;
}

/* Fotos de las recetas: se aclaran al pasar el cursor, como las fichas. */
.recipe-card--placeholder img {
  transition: opacity var(--dur) var(--ease),
    scale var(--dur-slow) var(--ease);
}

.recipe-card--placeholder:hover img {
  opacity: 0.8;
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 var(--rise, 22px);
  }
}

/* Recorte que avanza de izquierda a derecha. Los márgenes negativos dejan
   sitio a los rasgos de la caligráfica, que se salen de su caja. Al
   terminar la animación el recorte desaparece (sin `forwards`), así que
   nunca queda cortando un trazo. */
@keyframes ink {
  from {
    clip-path: inset(-30% 102% -30% -10%);
  }

  to {
    clip-path: inset(-30% -10% -30% -10%);
  }
}

/* ---- Hero: coreografía de entrada -------------------------------------
   La foto se asienta, el logo sube, "hecho en familia" se escribe y al
   final cae el sello. En total ~1,8 s; el texto es legible desde ~1 s. */
.hero__media {
  animation: hero-settle 7s var(--ease-out-expo) backwards;
}

.hero__heading,
.hero__title,
.hero__lead,
.hero__actions,
.hero__meta {
  animation: rise 900ms var(--ease-out-expo) backwards;
}

.hero__heading { animation-delay: 80ms; }
.hero__title { animation-delay: 220ms; }
.hero__lead { animation-delay: 420ms; }
.hero__actions { animation-delay: 540ms; }
.hero__meta { animation-delay: 660ms; }

.hero__title em {
  animation: ink 1400ms var(--ease-out-expo) 560ms backwards;
}

/* El giro sigue siendo el de siempre; se le antepone el golpe del timbre
   sobre el papel. `scale` y `rotate` (del giro) no se pisan. */
.hero .stamp {
  animation: stamp-press 750ms var(--ease-spring) 1100ms backwards,
    stamp-spin 34s linear infinite;
}

@keyframes hero-settle {
  from {
    scale: 1.12;
  }
}

@keyframes stamp-press {
  from {
    opacity: 0;
    scale: 1.9;
  }
}

/* ---- Encabezados de sección ------------------------------------------ */
.js .section-head.reveal.is-visible .section-head__title em {
  animation: ink 1300ms var(--ease-out-expo) 260ms backwards;
}

.js .section-head.reveal .section-head__title::after {
  scale: 0 1;
  transform-origin: left;
  transition: scale 1000ms var(--ease-out-expo) 420ms;
}

.js .section-head--center.reveal .section-head__title::after {
  transform-origin: center;
}

.js .section-head.reveal.is-visible .section-head__title::after {
  scale: 1;
}

/* ---- Aparición al hacer scroll ----------------------------------------
   Misma idea que la regla base, pero con la curva de la capa: el bloque
   llega rápido y se posa despacio, en vez de arrastrarse a ritmo parejo. */
.js .reveal {
  transform: translateY(26px);
  transition: opacity 900ms var(--ease-out-expo),
    transform 1000ms var(--ease-out-expo);
}

/* ---- Grillas escalonadas ----------------------------------------------
   main.js marca con .stagger las grillas de tarjetas y datos y numera a
   sus hijos en --i. Las tarjetas entran una detrás de otra cuando su
   bloque .reveal aparece. */
.is-visible .stagger > *,
.stagger.is-visible > * {
  animation: rise 750ms var(--ease-out-expo) backwards;
  animation-delay: calc(100ms + var(--i, 0) * var(--stagger));
}

/* Las dos formas de comprar: la segunda llega un instante después. */
.js .paths > .reveal + .reveal {
  transition-delay: 140ms;
}

/* ---- Fotos de la historia ---------------------------------------------
   Al aparecer, la foto se aleja un poco dentro de su marco. */
.js .story__media.reveal img {
  scale: calc(var(--media-rest, 1) + 0.1);
  transition: scale 1600ms var(--ease-out-expo);
}

.js .story__media.reveal.is-visible img {
  scale: var(--media-rest, 1);
}

.recipe-card--placeholder:hover img {
  scale: 1.05;
}

/* ---- Botón flotante de WhatsApp ----------------------------------------
   En la portada llega desde abajo cuando el hero ya terminó y avisa con
   tres ondas. Después se queda quieto: un pulso permanente distrae de la
   lectura. En las fichas ya está ahí: repetir la entrada en cada página
   sería ruido. */
body:has(.hero) .wa-float {
  animation: rise 700ms var(--ease-spring) 1500ms backwards;
  --rise: 160%;
}

body:has(.hero) .wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #25d366;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  animation: wa-ping 1800ms var(--ease-out-expo) 2400ms 3;
}

@keyframes wa-ping {
  from {
    opacity: 0.75;
    scale: 1;
  }

  to {
    opacity: 0;
    scale: 1.35;
  }
}

/* ---- Menú: se abre desde el botón -------------------------------------
   El panel crece como un círculo desde el propio botón de menú (main.js
   deja su centro en --menu-x/--menu-y), así se entiende de dónde sale y
   adónde vuelve. Cerrar es más corto que abrir: el que cierra ya decidió.
   Solo con .js: sin JavaScript el menú es una lista normal y no se toca. */
.js .menu {
  clip-path: circle(0px at var(--menu-x, 3rem) var(--menu-y, 2.25rem));
  transition: clip-path 480ms var(--ease-in-quick),
    opacity 480ms var(--ease), visibility 0s linear 480ms;
}

.js .menu[data-open] {
  clip-path: circle(150vmax at var(--menu-x, 3rem) var(--menu-y, 2.25rem));
  transition: clip-path 850ms var(--ease-out-expo),
    opacity 160ms var(--ease), visibility 0s;
}

/* ---- Transiciones entre páginas ---------------------------------------
   Al pasar de la portada a una ficha (y de vuelta) la página no parpadea
   en blanco: la vieja se va rápido, la nueva sube, y la foto del producto
   viaja de la tarjeta a la ficha. La cabecera no se mueve: es la misma en
   las dos páginas. Qué foto viaja lo decide main.js; ver el detalle allí.
   Chrome/Edge 126+ y Safari 18.2+; en el resto se navega como siempre. */
@view-transition {
  navigation: auto;
}

/* Cabecera y botón flotante son iguales en las dos páginas: con nombre
   propio se quedan quietos. Sin él viajarían con la página y, al fundirse
   la vieja con la nueva, el botón se veía duplicado. */
.site-header {
  view-transition-name: cabecera;
}

.wa-float {
  view-transition-name: whatsapp;
}

/* Al llegar a la portada desde una ficha el botón ya estaba en pantalla:
   no tiene que volver a entrar. main.js pone la clase en `pagereveal`. */
.llega-con-transicion body:has(.hero) .wa-float,
.llega-con-transicion body:has(.hero) .wa-float::before {
  animation: none;
}

.pdp__media {
  view-transition-name: producto;
}

::view-transition-old(root) {
  animation: vt-salida 220ms var(--ease-in-quick) both;
}

::view-transition-new(root) {
  animation: vt-entrada 560ms var(--ease-out-expo) 60ms both;
}

::view-transition-group(producto) {
  overflow: clip;
  border-radius: var(--radius-lg);
  animation-duration: 600ms;
  animation-timing-function: var(--ease-out-expo);
}

/* La tarjeta ancha y la ficha tienen proporciones distintas: se recorta
   en vez de estirar la foto durante el viaje. */
::view-transition-old(producto),
::view-transition-new(producto) {
  height: 100%;
  object-fit: cover;
}

@keyframes vt-salida {
  to {
    opacity: 0;
    translate: 0 -10px;
  }
}

@keyframes vt-entrada {
  from {
    opacity: 0;
    translate: 0 18px;
  }
}

/* ---- Pantallas táctiles --------------------------------------------------
   Sin cursor, :hover se queda "pegado" después de tocar: la tarjeta seguía
   levantada y la foto agrandada al volver de WhatsApp. En esos equipos se
   anulan las elevaciones de hover y queda solo la respuesta al toque. */
@media (hover: none) {
  /* El :not(:active) deja pasar la presión del botón, que tiene la misma
     especificidad y está antes en el archivo. La de la tarjeta gana sola:
     su selector es más específico. */
  .btn:hover:not(:active),
  .wa-float:hover,
  .product-card:hover {
    transform: none;
  }

  .product-card:hover {
    box-shadow: var(--shadow-sm);
  }

  .product-card:hover .product-card__media img {
    transform: none;
  }
}

/* La tarjeta entera es un enlace a su ficha: al presionarla se hunde un
   poco, igual que los botones. Si lo presionado es el botón de WhatsApp de
   adentro, se hunde solo el botón. */
.product-card:active:not(:has(.btn:active)) {
  transform: scale(0.985);
  transition-duration: var(--dur-press), var(--dur-slow);
}

/* ---- Efectos atados al scroll -------------------------------------------
   Chrome/Edge 115+ y Safari 26+. Firefox todavía no: allí simplemente no
   existen. Van dentro de @supports porque, sin soporte, la animación
   duraría 0 s y el `both` dejaría todo clavado en el fotograma final. */
@supports (animation-timeline: view()) {
  /* Barra de progreso de lectura bajo la cabecera, en los colores del
     logo: del verde hoja al amarillo del packaging. */
  .site-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--c-leaf), var(--c-amber));
    transform-origin: left;
    animation: scroll-progress linear both;
    animation-timeline: scroll(root block);
    transition: opacity var(--dur) var(--ease);
  }

  .menu-open .site-header::after {
    opacity: 0;
  }

  /* Al salir del hero, la foto se queda atrás (paralaje) y el texto se
     desvanece. La línea de tiempo es la del propio hero. */
  .hero {
    view-timeline-name: --hero;
  }

  .hero__media {
    animation: hero-settle 7s var(--ease-out-expo) backwards,
      hero-drift linear both;
    animation-timeline: auto, --hero;
    animation-range: normal, exit;
  }

  .hero__inner {
    animation: hero-fade linear both;
    animation-timeline: --hero;
    animation-range: exit 0% exit 80%;
  }

  /* Paralaje suave en las fotos de la historia y en el fondo del cierre.
     La foto se agranda lo justo para que el desplazamiento nunca deje ver
     el borde. */
  .story__media {
    --media-rest: 1.1;
  }

  .story__media img {
    scale: var(--media-rest);
    animation: media-drift linear both;
    animation-timeline: view();
  }

  .cta-band__bg {
    scale: 1.25;
    animation: media-drift-lg linear both;
    animation-timeline: view();
  }

  @keyframes scroll-progress {
    from {
      scale: 0 1;
    }

    to {
      scale: 1 1;
    }
  }

  @keyframes hero-drift {
    to {
      translate: 0 22%;
    }
  }

  @keyframes hero-fade {
    to {
      opacity: 0;
      translate: 0 -3rem;
    }
  }

  @keyframes media-drift {
    from {
      translate: 0 -4%;
    }

    to {
      translate: 0 4%;
    }
  }

  @keyframes media-drift-lg {
    from {
      translate: 0 -9%;
    }

    to {
      translate: 0 9%;
    }
  }
}