/* ==========================================================================
   A lo grande Mayorista · Hoja de estilos

   Índice
   1. Tipografías
   2. Tokens de diseño (colores, tipografía, espaciado, radios, sombras)
   3. Base
   4. Utilidades y layout
   5. Componentes (botones, formularios, íconos, textos de sección)
   6. Secciones (encabezado, hero, productos, zonas, nosotros, contacto, pie)
   7. Responsive
   8. Accesibilidad: movimiento reducido

   Regla de oro: los colores, tamaños y espacios se cambian en los tokens
   (sección 2). No se escriben valores sueltos en los componentes.
   ========================================================================== */

/* 1. TIPOGRAFÍAS ---------------------------------------------------------- */

@font-face {
  font-family: "Sora";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/sora-600.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/sora-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/inter-600.woff2") format("woff2");
}
/* Excepción puntual a "solo Sora e Inter": título cursivo de la sección Recetas (ver CLAUDE.md) */
@font-face {
  font-family: "Fraunces";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("../assets/fonts/fraunces-italic-400.woff2") format("woff2");
}

/* 2. TOKENS DE DISEÑO ----------------------------------------------------- */

:root {
  /* Color */
  --color-bone: #f3f0e9;
  --color-navy: #12182b;
  --color-slate: #2b3247;
  --color-cobalt: #2646c8;
  --color-cobalt-dark: #1c379f;
  --color-amber: #f0b429;
  --color-cool: #dde0e8;
  --color-white: #fff;
  --color-text: var(--color-navy);
  --color-muted: #5b6072;
  --color-line: #d9d6cc;
  --color-input-border: #c9cedc;
  --color-placeholder: #8a90a3;
  --color-error: #b3261e;
  --color-on-dark: rgb(255 255 255 / 0.8);
  --color-on-dark-soft: rgb(255 255 255 / 0.6);
  --color-hairline-dark: rgb(255 255 255 / 0.12);
  --color-map-dot: #7c93ff;
  --color-map-dot-minor: rgb(124 147 255 / 0.85);

  /* Encuadre de fotos de producto (object-position) */
  --image-position-top: top;
  --image-position-bottom: bottom;

  /* Canales RGB de colores de marca (los mismos de arriba), para overlays con opacidad variable */
  --rgb-navy: 18 24 43;
  --rgb-cobalt: 38 70 200;

  /* Video de fondo (componente bg-video: portada y contacto) */
  --bg-video-fade: 0.8s;
  --video-toggle-size: 44px;

  /* Título partido (Sora + Fraunces itálica) y etiqueta editorial: portada y contacto */
  --text-split-sans: clamp(1.75rem, 1.15rem + 2.4vw, 3rem);
  --text-split-script: clamp(2.35rem, 1.3rem + 4.4vw, 4.75rem);
  --text-split-sans-section: clamp(1.6rem, 1.15rem + 1.8vw, 2.5rem);
  --text-split-script-section: clamp(2.2rem, 1.3rem + 3.6vw, 4rem);
  --split-rise-duration: 0.55s;
  --split-rise-stagger: 90ms;
  --text-kicker: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
  --kicker-rule: 36px;

  /* Formularios (panel de papel) */
  --field-line-height: 48px;
  --field-textarea-height: 120px;

  /* Portada: video del camión (assets/video/hero-camion-v1.*) y composición "portada de revista" */
  --hero-video-position: 50% 55%;
  --hero-overlay-strong: 0.85;
  --hero-overlay-mid: 0.68;
  --hero-overlay-soft: 0.45;
  --hero-overlay-bottom: 0.55;
  --hero-min-height: clamp(560px, 46vw + 220px, 720px);
  --hero-form-width: 340px;
  --hero-gap: clamp(3rem, 1rem + 6vw, 7.5rem);
  --hero-lead-width: 40ch;
  --hero-idea-sep: 1.6em; /* ancho del punto medio entre ideas */
  --hero-form-delay: 0.3s;
  --hero-form-duration: 0.6s;

  /* Contacto: video de huevos en el maple (assets/video/contacto-huevos-v1.*) */
  --contact-video-position: 50% 62%;
  /* Overlay azul de Contacto: izquierda (detrás del texto) y derecha (lado del formulario);
     el punto medio se calcula entre los dos. En pantallas apiladas, un valor parejo propio. */
  --contacto-overlay-izq: 0.55;
  --contacto-overlay-der: 0.25;
  --contacto-overlay-mobile: 0.6;
  /* Refuerzo localizado detrás de la columna de texto (se suma al overlay): mantiene AA sobre los
     fotogramas claros (bandeja y huevos) sin oscurecer el resto del video */
  --contacto-overlay-texto: 0.62;
  --contact-form-width: 400px;
  --contact-form-offset: var(--space-6);
  --contact-text-width: 45ch;

  /* Tipografía */
  --font-head: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Fraunces", Georgia, serif;
  --text-hero: clamp(2.2rem, 1.1rem + 3.9vw, 3.7rem);
  --text-h2: clamp(1.9rem, 1.2rem + 2.4vw, 2.8rem);
  --text-h3: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  --text-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --text-base: 1rem;
  --text-sm: 0.9rem;
  --text-xs: 0.8rem;
  --text-map-label: clamp(0.8rem, 0.6rem + 0.7vw, 1.2rem);

  /* Espaciado y layout */
  --container: 1200px;
  --gutter: 24px;
  --header-height: 80px;
  /* Logo (imagen 891 × 483): el alto lo fija el token y el ancho sale de la proporción */
  --logo-header-h: 64px;
  --logo-footer-h: 96px;
  --nav-gap: clamp(20px, 2.4vw, 30px);
  --section-padding: clamp(4.5rem, 3rem + 4vw, 6.5rem);
  --grid-gap: clamp(2.75rem, 1rem + 4.5vw, 4.5rem);
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3.5rem;

  /* Formas y efectos */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 30px 60px -28px rgb(0 0 0 / 0.55);
  --focus-ring: 3px solid var(--color-amber);
  --ease: 0.2s ease;

  /* Recetas: carrusel y modal */
  --recipe-card-width: clamp(240px, 78vw, 280px);
  --recipe-gap: var(--space-4);
  --recipe-media-ratio: 4 / 5;
  --recipe-media-zoom: 1.05;
  --recipe-media-ease: 0.35s ease;
  --recipe-title-lift: -2px;
  --recipe-reveal-distance: 18px;
  --recipe-reveal-duration: 0.5s;
  --recipe-reveal-ease: ease-out;
  --recipes-intro-width: 55ch;
  --modal-max-width: 640px;
  --modal-max-height: min(86vh, 760px);
  --modal-media-height: 360px;
  --modal-media-height-mobile: 40vh;
  --modal-ease: 0.25s ease;

  /* Aparición al hacer scroll (bloques con data-reveal) */
  --reveal-distance: 24px;
  --reveal-duration: 0.7s;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Elevación en hover y foco (chips y tarjetas) */
  --lift-sm: -3px;
  --shadow-lift: 0 14px 28px -16px rgb(18 24 43 / 0.5);
  --shadow-lift-dark: 0 18px 36px -18px rgb(0 0 0 / 0.7);

  /* Nosotros: capítulos */
  --chapters-tabs-width: clamp(250px, 27vw, 340px);
  --text-chapter-name: clamp(1.35rem, 1rem + 1.1vw, 1.95rem);
  --text-chapter-lead: clamp(1.12rem, 1rem + 0.45vw, 1.38rem);
  --text-figure: clamp(3rem, 2rem + 3.6vw, 4.8rem);
  --text-ghost-num: clamp(8rem, 5rem + 10vw, 15rem);
  --text-ghost-num-compact: clamp(4rem, 3rem + 5vw, 5.5rem);
  --color-ghost: rgb(18 24 43 / 0.05);
  --shadow-panel: 0 30px 60px -40px rgb(18 24 43 / 0.45);
  --chapter-panel-padding: clamp(28px, 1.2rem + 2.6vw, 56px);
  --chapter-panel-padding-compact: var(--space-4) var(--space-3) var(--space-5);
  --chapter-row-height: 68px;
  --chapter-chevron-size: 9px;
  --chapter-control-size: 44px;
  --chapter-progress-height: 2px;
  --color-chapter-progress: var(--color-amber);
  --chapter-duration: 0.5s;
  --chapter-shift: 14px;
  --chapter-stagger: 70ms;
  --chapter-child-shift: 10px;

  /* Mapa de zonas */
  --map-dot-minor-size: 7px;
  --map-stage-max: 1000px;
  --map-stage-padding: clamp(6px, 1vw, 14px);
  --map-dim-opacity: 0.2;
  --map-pending-opacity: 0.18;
  --map-route-clearance: 8px;
  --map-trail-dots: 6;
  --map-trail-gap: 28ms;
  --map-trail-opacity: 0.55;
  --map-fx-dot-size: 10px;
  --map-fx-spark-size: 6px;
  --map-ripple-size: 40px;
  --map-pulse-size: 24px;
  --map-travel-duration: 1.6s;
  --map-spread-duration: 0.8s;
  --map-spread-stagger: 110ms;
  --map-ripple-duration: 0.9s;
  --map-pulse-duration: 1.2s;
  --map-light-duration: 0.35s;
  /* Nombre de localidad al llegar cada puntito (píldora) */
  --text-map-tag: clamp(12px, 0.7rem + 0.25vw, 13px);
  --color-map-tag-bg: rgb(18 24 43 / 0.9);
  --color-map-tag-border: rgb(255 255 255 / 0.22);
  --map-tag-in: 0.3s;
  --map-tag-hold: 1.4s;
  --map-tag-out: 0.4s;
  --map-tag-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --map-tag-rise: 6px;
  --map-tag-gap: 8px;
  --map-tag-gap-diagonal: 4px;
  --map-tag-margin: 6px;
  --map-tag-padding: 3px 9px;
  --map-hit-size: 24px;
  --color-card-dark: rgb(255 255 255 / 0.04);
  --color-card-dark-hover: rgb(255 255 255 / 0.08);
  --color-card-dark-border: rgb(255 255 255 / 0.14);
}

/* 3. BASE ----------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bone);
  color: var(--color-text);
  font: 400 var(--text-base) / 1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}
ul {
  padding: 0;
  list-style: none;
}
h1,
h2,
h3 {
  font-family: var(--font-head);
  letter-spacing: -0.02em;
}
a {
  color: inherit;
}
img,
svg {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 6px;
}

/* 4. UTILIDADES Y LAYOUT -------------------------------------------------- */

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.sprite {
  position: absolute;
}

/* Texto solo para lectores de pantalla */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Bloques que aparecen una vez al entrar en pantalla (initReveal en main.js).
   Solo se ocultan si hay JS, para no esconder contenido si el script no carga. */
.has-js [data-reveal]:not(.recipe-card):not(.split-title) {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) ease,
    transform var(--reveal-duration) var(--ease-out-expo);
}
.has-js [data-reveal].is-visible:not(.recipe-card):not(.split-title) {
  opacity: 1;
  transform: none;
}

.skip-link {
  position: absolute;
  top: var(--space-1);
  left: -9999px;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-navy);
  color: var(--color-white);
}
.skip-link:focus {
  left: var(--space-1);
}

.section {
  padding-block: var(--section-padding);
}
.section--dark {
  background: var(--color-navy);
  color: var(--color-white);
}
.section--brand {
  background: var(--color-cobalt);
  color: var(--color-white);
}

/* 5. COMPONENTES ---------------------------------------------------------- */

/* Íconos */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--solid {
  fill: currentColor;
  stroke: none;
}

/* Etiqueta superior de cada sección */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 12px / 1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cobalt);
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--color-amber);
}
.section--dark .eyebrow,
.section--brand .eyebrow {
  color: var(--color-white);
}

/* Título de sección */
.section-title {
  margin-top: var(--space-3);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: 1.12;
}
/* Variante cursiva (Fraunces): títulos de Recetas, Zonas y Nosotros.
   El padding inferior evita que se corten los trazos descendentes (g, p). */
.section-title--script {
  padding-bottom: 0.08em;
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 400;
}

/* Encabezado centrado: etiqueta + título (+ bajada opcional) */
.section-head {
  max-width: 40em;
  margin-inline: auto;
  text-align: center;
}
.section-head .eyebrow {
  justify-content: center;
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  font: 600 15px / 1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--ease),
    color var(--ease),
    border-color var(--ease);
}
.btn .icon {
  width: 16px;
  height: 16px;
}
.btn--primary {
  background: var(--color-cobalt);
  color: var(--color-white);
}
.btn--primary:hover {
  background: var(--color-cobalt-dark);
}
.btn--outline {
  border-color: var(--color-cobalt);
  color: var(--color-cobalt);
  background: transparent;
}
.btn--outline:hover {
  background: var(--color-cobalt);
  color: var(--color-white);
}
.btn--block {
  width: 100%;
}
.btn[disabled] {
  opacity: 0.7;
  cursor: progress;
}

/* Formularios: panel de papel (portada y contacto). Crema, borde fino, radio chico, sin sombra,
   campos con solo línea inferior. */
.form-card {
  padding: clamp(24px, 1.2rem + 1vw, 32px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xs);
  background: var(--color-bone);
  color: var(--color-text);
}
.form-card__title {
  font: italic 400 1.75rem / 1.1 var(--font-script);
  letter-spacing: 0;
}
.form-card__sub {
  margin: var(--space-1) 0 var(--space-4);
  color: var(--color-muted);
  font: italic 400 1.02rem / 1.35 var(--font-script);
}
.form-card__note {
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-xs);
  text-align: center;
}
.form-card__status {
  margin-top: var(--space-2);
  font-size: 14px;
}
.form-card__status--error {
  color: var(--color-error);
}
.form-card__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-card__done {
  padding: 14px 4px;
  text-align: center;
}
.form-card__done .icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  color: var(--color-cobalt);
  stroke-width: 1.6;
}
.form-card__done h3 {
  margin-bottom: var(--space-1);
  font-size: 1.35rem;
  font-weight: 700;
}
.form-card__done p {
  color: var(--color-muted);
}
/* Sobre el crema el anillo ámbar del sitio no llega a 3:1: en el panel, el foco es cobalto */
.form-card :focus-visible {
  outline-color: var(--color-cobalt);
}

/* Botón de envío: sin flecha; subrayado animado del texto al pasar o enfocar */
.form-card__submit {
  min-height: var(--field-line-height);
  margin-top: var(--space-2);
  border-radius: var(--radius-xs);
}
.btn__label {
  position: relative;
}
.form-card__submit .btn__label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease);
}
.form-card__submit:hover .btn__label::after,
.form-card__submit:focus-visible .btn__label::after {
  transform: scaleX(1);
}
.form-card__submit[disabled] .btn__label::after {
  transform: scaleX(0);
}

/* Campos: etiqueta chica y liviana, solo línea inferior, línea de foco animada */
.field {
  margin-bottom: var(--space-3);
}
.field__label {
  display: block;
  color: var(--color-muted);
  font: 400 var(--text-xs) / 1.3 var(--font-body);
  letter-spacing: 0.01em;
}
.field__control {
  width: 100%;
  min-height: var(--field-line-height);
  padding: 10px 0 8px;
  border: 0;
  border-bottom: 1px solid var(--color-muted);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font: 400 var(--text-base) / 1.4 var(--font-body);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--ease);
}
.field__control::placeholder {
  color: var(--color-muted);
}
.field__control:focus {
  outline: none;
}
.field__control[aria-invalid="true"] {
  border-bottom-color: var(--color-error);
}
/* Select: flecha propia (CSS) a la derecha; el control sigue siendo el select nativo */
.field__control--select {
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2312182B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  cursor: pointer;
}
textarea.field__control {
  min-height: var(--field-textarea-height);
  padding-top: 12px;
  line-height: 1.5;
  resize: vertical;
}
/* Línea de foco: crece desde la izquierda sobre el borde inferior (cobalto: 6:1 sobre el crema) */
.field__underline {
  display: block;
  height: 2px;
  margin-top: -2px;
  background: var(--color-cobalt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--chapter-duration) var(--ease-out-expo);
}
.field__control:focus + .field__underline {
  transform: scaleX(1);
}
.field__control[aria-invalid="true"] + .field__underline {
  background: var(--color-error);
}
.field__error {
  margin-top: 6px;
  color: var(--color-error);
  font-size: 13px;
}

/* Etiqueta editorial (portada y contacto): guion ámbar + Fraunces itálica, sin mayúsculas */
.kicker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-on-dark);
  font: italic 400 var(--text-kicker) / 1.3 var(--font-script);
}
.kicker::before {
  content: "";
  flex: none;
  width: var(--kicker-rule);
  height: 1px;
  background: var(--color-amber);
}

/* Título partido (portada y contacto): Sora 500 + Fraunces itálica más grande.
   Cada tramo sube desde una máscara. En la portada arranca al cargar; con data-reveal
   (contacto) espera a que el título entre en pantalla. */
.split-title {
  margin: 0;
  font-weight: 500;
  letter-spacing: normal;
}
.split-title__line {
  display: block;
  overflow: hidden;
  /* aire para los descendentes (g, p) dentro de la máscara */
  padding-bottom: 0.08em;
}
.split-title__text {
  display: block;
  font: 500 var(--text-split-sans) / 1.15 var(--font-head);
  letter-spacing: -0.01em;
  animation: split-rise var(--split-rise-duration) var(--ease-out-expo) both;
}
.split-title__line--script .split-title__text {
  font: italic 400 var(--text-split-script) / 1.02 var(--font-script);
  letter-spacing: 0;
  animation-delay: var(--split-rise-stagger);
}
.split-title--section {
  --text-split-sans: var(--text-split-sans-section);
  --text-split-script: var(--text-split-script-section);
}
.has-js .split-title[data-reveal]:not(.is-visible) .split-title__text {
  animation-play-state: paused;
}
@keyframes split-rise {
  from {
    transform: translateY(105%);
  }
  to {
    transform: none;
  }
}

/* Video de fondo (portada y contacto): póster debajo, video encima (entra con fade al empezar) y
   overlay para el texto. Todo es absoluto dentro de la sección: no cambia su alto ni produce saltos.
   Cada sección define --bg-video-tint (canales RGB), las opacidades y el encuadre. */
.bg-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.bg-video__poster,
.bg-video__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bg-video-position);
}
.bg-video__video {
  opacity: 0;
  transition: opacity var(--bg-video-fade) ease;
}
.bg-video.is-playing .bg-video__video {
  opacity: 1;
}
/* Más opaco a la izquierda (texto), más suave a la derecha y refuerzo abajo.
   --bg-video-local (opcional) agrega un refuerzo solo detrás del texto. */
.bg-video__overlay {
  position: absolute;
  inset: 0;
  background:
    var(--bg-video-local, none),
    linear-gradient(
      0deg,
      rgb(var(--bg-video-tint) / var(--bg-video-bottom)) 0%,
      transparent 40%
    ),
    linear-gradient(
      90deg,
      rgb(var(--bg-video-tint) / var(--bg-video-strong)) 0%,
      rgb(var(--bg-video-tint) / var(--bg-video-strong)) 38%,
      rgb(var(--bg-video-tint) / var(--bg-video-mid)) 60%,
      rgb(var(--bg-video-tint) / var(--bg-video-soft)) 100%
    );
}
/* Pausa del video: discreto, abajo a la derecha de la sección, por encima del overlay */
.video-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-4);
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--video-toggle-size);
  height: var(--video-toggle-size);
  padding: 0;
  border: 1px solid var(--color-card-dark-border);
  border-radius: 50%;
  background: rgb(var(--rgb-navy) / 0.6);
  color: var(--color-white);
  cursor: pointer;
  transition:
    background var(--ease),
    border-color var(--ease);
}
.video-toggle[hidden] {
  display: none;
}
.video-toggle:hover {
  border-color: var(--color-amber);
  background: var(--color-navy);
}
.video-toggle .icon {
  width: 18px;
  height: 18px;
}

/* 6. SECCIONES ------------------------------------------------------------ */

/* ---- Encabezado ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgb(18 24 43 / 0.08);
  background: rgb(243 240 233 / 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-height);
}
.site-header__cta {
  padding: 13px 20px;
  white-space: nowrap;
}

/* Logo: imagen dentro del enlace al inicio. width="891" height="483" en el HTML reservan
   el lugar antes de que cargue; el tamaño real lo manda el CSS (alto por token, ancho por
   proporción). object-fit evita que se deforme si algún contenedor lo achica. */
.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.brand__logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--logo-header-h);
  aspect-ratio: 891 / 483;
  object-fit: contain;
}
.brand__logo--footer {
  height: var(--logo-footer-h);
}

.nav__list {
  display: flex;
  gap: var(--nav-gap);
}
.nav__link {
  position: relative;
  padding: var(--space-1) 0;
  color: rgb(18 24 43 / 0.78);
  font: 500 15px / 1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="true"] {
  color: var(--color-cobalt);
}
.nav__link[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-cobalt);
}
.nav__cta-mobile {
  display: none;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
.nav-toggle .icon {
  width: 26px;
  height: 26px;
  margin: auto;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-white);
  /* Video de fondo: navy de marca */
  --bg-video-tint: var(--rgb-navy);
  --bg-video-position: var(--hero-video-position);
  --bg-video-strong: var(--hero-overlay-strong);
  --bg-video-mid: var(--hero-overlay-mid);
  --bg-video-soft: var(--hero-overlay-soft);
  --bg-video-bottom: var(--hero-overlay-bottom);
}

/* Contenido (dirección "portada de revista"): la etiqueta queda arriba a la izquierda, el título y lo
   demás bajan al pie, y el formulario (más angosto) flota centrado a la derecha. */
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hero-form-width);
  gap: var(--hero-gap);
  align-items: stretch;
  min-height: var(--hero-min-height);
  padding-block: clamp(3rem, 1.5rem + 4vw, 5.5rem);
}
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
}

.hero__lead {
  max-width: var(--hero-lead-width);
  margin-top: var(--space-4);
  color: rgb(255 255 255 / 0.82);
  font: 400 var(--text-lead) / 1.55 var(--font-body);
}

/* Las tres ideas: una línea de texto con punto medio ámbar y subrayado fino al pasar.
   Cada ítem deja a su derecha el espacio del separador y dibuja su punto a la izquierda, por fuera
   de su caja. El punto del primer ítem de cada renglón cae fuera de la lista y se recorta
   (overflow: hidden), así al envolverse en móvil ningún renglón empieza con un punto. */
.hero__ideas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) 0;
  margin-top: var(--space-4);
  padding-bottom: 4px;
  overflow: hidden;
  color: rgb(255 255 255 / 0.88);
  font: 500 var(--text-sm) / 1.4 var(--font-body);
}
.hero__idea {
  position: relative;
  margin-right: var(--hero-idea-sep);
  white-space: nowrap;
}
.hero__idea::before {
  content: "·";
  position: absolute;
  left: calc(var(--hero-idea-sep) * -1);
  width: var(--hero-idea-sep);
  color: var(--color-amber);
  text-align: center;
}
.hero__idea::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease);
}
.hero__idea:hover::after {
  transform: scaleX(1);
}

/* Formulario de la portada: panel de papel. Entra con un fade después del título. */
.hero .form-card {
  align-self: center;
  animation: hero-form-in var(--hero-form-duration) var(--ease-out-expo)
    var(--hero-form-delay) both;
}
@keyframes hero-form-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Productos ---- */
.products__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}
.products__note {
  max-width: 22em;
  color: var(--color-muted);
  font-size: 14.5px;
  text-align: right;
}

.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  align-items: center;
  margin-top: var(--space-6);
}
.product--reverse .product__media {
  order: 2;
}
.product__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-cool);
}
.product__media--top {
  --image-position: var(--image-position-top);
}
.product__media--bottom {
  --image-position: var(--image-position-bottom);
}
.product__media--low {
  --image-position: center 16%;
}
.product__media--white {
  background: var(--color-white);
}
.product__media--portrait {
  aspect-ratio: 4 / 5;
  width: min(100%, 26rem);
  justify-self: center;
}
.product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--image-position, center);
}
.product__media--white img {
  object-fit: contain;
}
.product__num {
  color: var(--color-cobalt);
  font: 600 16px / 1 var(--font-head);
}
.product__title {
  margin: 14px 0 12px;
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: 1.15;
}
.product__meta {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 15px;
}
.product__text {
  max-width: 30em;
  margin-bottom: var(--space-4);
  color: var(--color-muted);
}

.divider {
  height: 1px;
  margin-top: 96px;
  background: var(--color-line);
}

/* ---- Recetas ---- */
.recipes__intro {
  max-width: var(--recipes-intro-width);
  margin-top: var(--space-2);
  margin-inline: auto;
  color: var(--color-muted);
}

.carousel {
  margin-top: var(--space-5);
}
.carousel__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.carousel__track {
  display: flex;
  gap: var(--recipe-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-block: var(--space-1);
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar {
  display: none;
}
.carousel__item {
  flex: 0 0 var(--recipe-card-width);
  scroll-snap-align: start;
}
.carousel__btn {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  box-shadow: var(--shadow-card);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.carousel__btn--autoplay.is-playing {
  color: var(--color-cobalt);
}
.carousel__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.carousel__btn[hidden] {
  display: none;
}

.recipe-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(var(--recipe-reveal-distance));
  transition:
    opacity var(--recipe-reveal-duration) var(--recipe-reveal-ease),
    transform var(--recipe-reveal-duration) var(--recipe-reveal-ease);
}
.recipe-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.recipe-card__media {
  display: block;
  aspect-ratio: var(--recipe-media-ratio);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-cool);
}
.recipe-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--recipe-media-ease);
}
.recipe-card:hover .recipe-card__media img,
.recipe-card:focus-visible .recipe-card__media img {
  transform: scale(var(--recipe-media-zoom));
}
.recipe-card__title {
  display: block;
  margin-top: var(--space-2);
  font-weight: 600;
  transition:
    color var(--ease),
    transform var(--ease);
}
.recipe-card:hover .recipe-card__title,
.recipe-card:focus-visible .recipe-card__title {
  color: var(--color-cobalt);
  transform: translateY(var(--recipe-title-lift));
}
.recipe-card__meta {
  display: block;
  margin-top: 2px;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

/* ---- Modal de receta ---- */
.recipe-modal {
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  width: min(100% - 2 * var(--gutter), var(--modal-max-width));
  max-height: var(--modal-max-height);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity var(--modal-ease),
    transform var(--modal-ease),
    overlay var(--modal-ease) allow-discrete,
    display var(--modal-ease) allow-discrete;
}
.recipe-modal[open] {
  opacity: 1;
  transform: scale(1);
}
@starting-style {
  .recipe-modal[open] {
    opacity: 0;
    transform: scale(0.96);
  }
}
.recipe-modal::backdrop {
  background: rgb(18 24 43 / 0.6);
  opacity: 0;
  transition:
    opacity var(--modal-ease),
    overlay var(--modal-ease) allow-discrete,
    display var(--modal-ease) allow-discrete;
}
.recipe-modal[open]::backdrop {
  opacity: 1;
}
@starting-style {
  .recipe-modal[open]::backdrop {
    opacity: 0;
  }
}
.recipe-modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.recipe-modal__panel {
  max-height: inherit;
  overflow-y: auto;
  background: var(--color-white);
  color: var(--color-text);
}
.recipe-modal__media {
  display: block;
  width: 100%;
  height: var(--modal-media-height);
  object-fit: cover;
}
.recipe-modal__body {
  padding: var(--space-4);
}
.recipe-modal__title {
  font-size: var(--text-h3);
  font-weight: 600;
}
.recipe-modal__meta {
  margin-top: 4px;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.recipe-modal__subtitle {
  margin: var(--space-3) 0 var(--space-1);
  font-weight: 600;
}
.recipe-modal__list,
.recipe-modal__steps {
  display: grid;
  gap: 6px;
  padding-left: 1.2em;
}
.recipe-modal__list {
  list-style: disc;
}
.recipe-modal__steps {
  list-style: decimal;
}
.recipe-modal__tip {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-cool);
  font-size: var(--text-sm);
}

/* ---- Zonas de reparto ---- */
.zones__head {
  max-width: 44em;
}
.zones__text {
  max-width: 38em;
  margin: var(--space-3) auto 0;
  color: var(--color-on-dark);
}

/* Escenario del mapa: marco redondeado centrado */
.zones__stage {
  position: relative;
  max-width: var(--map-stage-max);
  margin: var(--space-5) auto 0;
  padding: var(--map-stage-padding);
  border: 1px solid var(--color-card-dark-border);
  border-radius: calc(var(--radius-md) + var(--map-stage-padding));
  background: var(--color-card-dark);
}

/* Mapa: la geografía es una imagen (mapa-zonas.<hash>.svg, ver index.html) y los puntos son HTML encima.
   Para agregar una zona: un <li> nuevo en el HTML y su posición en % acá abajo.
   Las posiciones salen de la misma proyección del SVG (ver docs/MAPA-ZONAS.md). */
.coverage-map {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-slate);
}
.coverage-map__base {
  width: 100%;
  height: 100%;
  object-fit: fill; /* misma proporción que el contenedor: nunca se recorta */
}
.coverage-map__points {
  position: absolute;
  inset: 0;
}
.coverage-map__point {
  position: absolute;
  top: var(--y);
  left: var(--x);
}

/* Posiciones para styles.css (salen de scripts/generar-mapa.py) */
.coverage-map__point--mercedes {
  --x: 72.5%;
  --y: 8.87%;
}
.coverage-map__point--pigue {
  --x: 61.56%;
  --y: 30.39%;
}
.coverage-map__point--bahia-blanca {
  --x: 62.07%;
  --y: 38.71%;
}
.coverage-map__point--punta-alta {
  --x: 62.77%;
  --y: 39.91%;
}
.coverage-map__point--bolivar {
  --x: 66.31%;
  --y: 20.26%;
}
.coverage-map__point--trenque-lauquen {
  --x: 60.35%;
  --y: 18.38%;
}
.coverage-map__point--carhue {
  --x: 60.26%;
  --y: 27.22%;
}
.coverage-map__point--neuquen {
  --x: 40.78%;
  --y: 40.47%;
}
.coverage-map__point--san-martin-de-los-andes {
  --x: 28.66%;
  --y: 49.67%;
}
.coverage-map__point--villa-la-angostura {
  --x: 27.59%;
  --y: 54.35%;
}
.coverage-map__point--cipolletti {
  --x: 41.03%;
  --y: 40.34%;
}
.coverage-map__point--allen {
  --x: 41.63%;
  --y: 40.67%;
}
.coverage-map__point--villa-regina {
  --x: 44.36%;
  --y: 41.56%;
}
.coverage-map__point--choele-choel {
  --x: 49.59%;
  --y: 43.03%;
}
.coverage-map__point--rio-colorado {
  --x: 55.35%;
  --y: 40.77%;
}
.coverage-map__point--viedma {
  --x: 59.39%;
  --y: 54.75%;
}
.coverage-map__point--bariloche {
  --x: 28.82%;
  --y: 57.24%;
}
.coverage-map__point--comodoro-rivadavia {
  --x: 42.84%;
  --y: 95.63%;
}

.coverage-map__point::before,
.coverage-map__point::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.coverage-map__point::before {
  width: 11px;
  height: 11px;
  background: var(--color-map-dot);
  box-shadow: 0 0 0 2px var(--color-slate);
}
.coverage-map__point::after {
  z-index: -1;
  width: 30px;
  height: 30px;
  background: var(--color-map-dot);
  opacity: 0.2;
}
.coverage-map__point--base::before {
  width: 15px;
  height: 15px;
  background: var(--color-amber);
}
.coverage-map__point--base::after {
  width: 44px;
  height: 44px;
  background: var(--color-amber);
  opacity: 0.22;
}
/* Localidades sin etiqueta: punto chico, sin halo */
.coverage-map__point--minor::before {
  width: var(--map-dot-minor-size);
  height: var(--map-dot-minor-size);
  background: var(--color-map-dot-minor);
  box-shadow: none;
}
/* Área de toque invisible (hover y clic) alrededor del punto chico */
.coverage-map__point--minor::after {
  z-index: auto;
  width: var(--map-hit-size);
  height: var(--map-hit-size);
  background: none;
  opacity: 1;
}
.coverage-map__point--minor {
  cursor: default;
}
.coverage-map__point--minor:focus {
  outline: none;
}
.coverage-map__point--minor:focus-visible::before {
  box-shadow:
    0 0 0 3px var(--color-slate),
    0 0 0 5px var(--color-amber);
}

.coverage-map__label {
  position: absolute;
  top: 0;
  left: 16px;
  transform: translateY(-50%);
  color: var(--color-white);
  font: 600 var(--text-map-label) / 1.2 var(--font-head);
  white-space: nowrap;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.65);
}
.coverage-map__label small {
  display: block;
  font: 400 0.78em / 1.3 var(--font-body);
  opacity: 0.78;
}
.coverage-map__point--base .coverage-map__label {
  left: 22px;
}
.coverage-map__point--left .coverage-map__label {
  right: 16px;
  left: auto;
  text-align: right;
}

/* Nombre de la localidad (píldora). La posición respecto del punto la elige main.js
   (data-label-pos y, si no entra, el lado contrario) con un modificador --top/--bottom/--left/--right.
   La ubicación usa la propiedad translate; la animación de aparición, transform. */
.coverage-map__tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: var(--map-tag-padding);
  border: 1px solid var(--color-map-tag-border);
  border-radius: var(--radius-pill);
  background: var(--color-map-tag-bg);
  box-shadow: 0 4px 12px -4px rgb(0 0 0 / 0.6);
  color: var(--color-white);
  font: 500 var(--text-map-tag) / 1.3 var(--font-body);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(var(--map-tag-rise));
  transition:
    opacity var(--map-tag-in) var(--map-tag-ease),
    transform var(--map-tag-in) var(--map-tag-ease);
}
.coverage-map__tag--top {
  translate: -50% calc(-100% - var(--map-tag-gap));
}
.coverage-map__tag--bottom {
  translate: -50% var(--map-tag-gap);
}
.coverage-map__tag--left {
  translate: calc(-100% - var(--map-tag-gap)) -50%;
}
.coverage-map__tag--right {
  translate: var(--map-tag-gap) -50%;
}
/* Diagonales: solo si ningún lado recto entra */
.coverage-map__tag--top-right {
  translate: var(--map-tag-gap-diagonal)
    calc(-100% - var(--map-tag-gap-diagonal));
}
.coverage-map__tag--top-left {
  translate: calc(-100% - var(--map-tag-gap-diagonal))
    calc(-100% - var(--map-tag-gap-diagonal));
}
.coverage-map__tag--bottom-right {
  translate: var(--map-tag-gap-diagonal) var(--map-tag-gap-diagonal);
}
.coverage-map__tag--bottom-left {
  translate: calc(-100% - var(--map-tag-gap-diagonal))
    var(--map-tag-gap-diagonal);
}
/* Visible con hover, foco o provincia activa (las de la secuencia las anima main.js) */
.coverage-map__point:hover .coverage-map__tag,
.coverage-map__point:focus-visible .coverage-map__tag,
.coverage-map__point.is-tagged .coverage-map__tag {
  opacity: 1;
  transform: none;
}
/* Para medir la ubicación sin el desplazamiento de entrada */
.coverage-map__tag.is-measuring {
  transform: none;
  transition: none;
}
/* El punto con etiqueta visible queda por encima de los demás puntos */
.coverage-map__point:hover,
.coverage-map__point:focus-visible,
.coverage-map__point.is-tagged,
.coverage-map__point.is-announcing {
  z-index: 2;
}

/* Capa de animación (initCoverageMap): mismo viewBox que la imagen base.
   El contenedor tiene siempre 16:10, igual que la imagen (object-fit: fill) y el viewBox,
   así que imagen, capa SVG y puntos en % comparten el mismo sistema de coordenadas. */
.coverage-map__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* El ámbar queda solo para lo que se mueve: puntito, su estela y las ondas de llegada.
   Las rutas no quedan dibujadas. */
.coverage-map__traveler,
.coverage-map__trail {
  fill: var(--color-amber);
}
.coverage-map__ripple {
  fill: none;
  stroke: var(--color-amber);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

/* Antes de la animación, los puntos esperan apagados; se encienden al llegar cada viajero */
.coverage-map__point {
  transition: opacity var(--map-light-duration) ease;
}
.coverage-map__point.is-pending {
  opacity: var(--map-pending-opacity);
}

/* Provincia activa (tarjetas): se atenúa el resto y pulsan en ámbar sus puntos */
.coverage-map.has-highlight .coverage-map__point:not(.is-highlighted) {
  opacity: var(--map-dim-opacity);
}
.coverage-map__point.is-highlighted {
  opacity: 1;
}
/* Hover o foco: el punto se ve entero aunque esté atenuado o esperando la animación */
.coverage-map.has-highlight
  .coverage-map__point--minor:is(:hover, :focus-visible),
.coverage-map
  .coverage-map__point--minor.is-pending:is(:hover, :focus-visible) {
  opacity: 1;
}
.coverage-map__point.is-highlighted::before {
  background: var(--color-amber);
}
.coverage-map__point.is-highlighted::after {
  display: block;
  width: var(--map-pulse-size);
  height: var(--map-pulse-size);
  border: 2px solid var(--color-amber);
  background: none;
  opacity: 0;
  animation: map-pulse var(--map-pulse-duration) ease-out 3;
}
@keyframes map-pulse {
  from {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.4);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
  }
}

/* Botón "Ver de nuevo": esquina inferior derecha, sobre el océano */
.coverage-map__replay {
  position: absolute;
  right: calc(var(--map-stage-padding) + var(--space-2));
  bottom: calc(var(--map-stage-padding) + var(--space-2));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--color-card-dark-border);
  border-radius: var(--radius-pill);
  background: rgb(18 24 43 / 0.78);
  color: var(--color-white);
  font: 600 var(--text-xs) / 1 var(--font-body);
  cursor: pointer;
  transition:
    background var(--ease),
    border-color var(--ease),
    transform var(--ease);
}
.coverage-map__replay[hidden] {
  display: none;
}
.coverage-map__replay .icon {
  width: 16px;
  height: 16px;
  color: var(--color-amber);
}
.coverage-map__replay:hover {
  border-color: var(--color-amber);
  background: var(--color-navy);
}
.coverage-map__replay:active {
  transform: scale(0.97);
}

/* Tarjetas de provincia: versión navegable del mapa (initProvinceCards) */
.province-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  max-width: var(--map-stage-max);
  margin: var(--space-4) auto 0;
}
.province-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  height: 100%;
  padding: var(--space-4) 20px 22px;
  overflow: hidden;
  border: 1px solid var(--color-card-dark-border);
  border-radius: var(--radius-md);
  background: var(--color-card-dark);
  color: var(--color-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--ease),
    background var(--ease),
    border-color var(--ease),
    box-shadow var(--ease);
}
/* Línea superior que se dibuja al activar la tarjeta */
.province-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--color-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--chapter-duration) var(--ease-out-expo);
}
.province-card:hover,
.province-card:focus-visible {
  transform: translateY(var(--lift-sm));
  border-color: rgb(255 255 255 / 0.32);
  background: var(--color-card-dark-hover);
  box-shadow: var(--shadow-lift-dark);
}
.province-card:active {
  transform: translateY(0) scale(0.99);
}
.province-card[aria-pressed="true"] {
  border-color: var(--color-amber);
  background: var(--color-card-dark-hover);
}
.province-card[aria-pressed="true"]::before {
  transform: scaleX(1);
}
.province-card__name {
  font: 600 1.05rem / 1.25 var(--font-head);
  letter-spacing: -0.01em;
}
.province-card[aria-pressed="true"] .province-card__name {
  color: var(--color-amber);
}
.province-card__places {
  color: var(--color-on-dark);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.zones__foot {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  text-align: center;
}
.zones__more {
  color: var(--color-on-dark);
  font-size: var(--text-sm);
}
.ask-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  text-decoration: none;
}
.ask-link .icon {
  color: var(--color-amber);
}
.ask-link u {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.ask-link:hover u {
  text-decoration-thickness: 2px;
}

/* ---- Nosotros: capítulos (initChapters en main.js) ----
   Escritorio: patrón WAI-ARIA tabs, pestañas a la izquierda y la tarjeta a la derecha.
   Hasta 1000px (.is-accordion): acordeón; el JS mueve cada panel debajo de su botón.
   Sin JS: pestañas arriba y los cuatro paneles uno debajo del otro.
   La altura del cambio de capítulo la anima el JS (Web Animations API). */
.chapters {
  display: grid;
  grid-template-columns: var(--chapters-tabs-width) 1fr;
  grid-template-rows: auto 1fr;
  column-gap: var(--grid-gap);
  align-items: start;
  margin-top: var(--space-6);
}

/* Pestañas */
.chapters__tabs {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
}
.chapters__tab {
  position: relative;
  display: grid;
  grid-template-columns: 2.4em 1fr;
  align-items: baseline;
  padding: var(--space-3) 0 var(--space-3) 2px;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  background: none;
  color: var(--color-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--ease);
}
/* Línea que se dibuja debajo de la pestaña activa */
.chapters__tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--color-cobalt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--chapter-duration) var(--ease-out-expo);
}
.chapters__tab:hover {
  color: var(--color-text);
}
.chapters__tab[aria-selected="true"] {
  color: var(--color-cobalt);
}
.chapters__tab[aria-selected="true"]::after {
  transform: scaleX(1);
}
.chapters__tab:focus-visible {
  outline-offset: -3px;
}
.chapters__num {
  font: 600 var(--text-sm) / 1 var(--font-head);
  letter-spacing: 0.04em;
}
.chapters__name {
  padding-bottom: 0.08em;
  font: italic 400 var(--text-chapter-name) / 1.15 var(--font-script);
  transition: transform var(--chapter-duration) var(--ease-out-expo);
}
.chapters__tab[aria-selected="true"] .chapters__name {
  transform: translateX(6px);
}

/* Progreso del cambio automático: el JS anima scaleX de 0 a 1 en el capítulo activo */
.chapters__progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 1;
  height: var(--chapter-progress-height);
  background: var(--color-chapter-progress);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* Botón de pausa y reanudación (lo agrega el JS) */
.chapters__controls {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  margin-top: var(--space-4);
}
.chapters__autoplay {
  display: grid;
  place-items: center;
  width: var(--chapter-control-size);
  height: var(--chapter-control-size);
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-muted);
  cursor: pointer;
  transition:
    color var(--ease),
    border-color var(--ease);
}
.chapters__autoplay:hover {
  border-color: var(--color-muted);
  color: var(--color-text);
}
.chapters__autoplay.is-playing {
  color: var(--color-cobalt);
}

/* Paneles: cada uno mide lo que su contenido, alineado arriba */
.chapters__panels {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  gap: var(--space-4);
}
.chapters__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  padding: var(--chapter-panel-padding);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-panel);
}
.chapters__panel[hidden] {
  display: none;
}
.chapters__panel > * {
  position: relative;
}

/* Pestañas con JS: la tarjeta es el contenedor (mide como mínimo lo que la columna de pestañas
   y su alto se anima); el panel que sale queda encima, alineado arriba, mientras se desvanece */
.chapters.is-ready:not(.is-accordion) .chapters__panels {
  position: relative;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-panel);
}
.chapters.is-ready:not(.is-accordion) .chapters__panel {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.chapters.is-ready .chapters__panel {
  opacity: 0;
  transform: translateY(var(--chapter-shift));
  transition:
    opacity var(--chapter-duration) ease,
    transform var(--chapter-duration) var(--ease-out-expo);
}
.chapters.is-ready .chapters__panel.is-active {
  opacity: 1;
  transform: none;
}
.chapters.is-ready .chapters__panel.is-leaving {
  position: absolute;
  inset: 0 0 auto;
  transform: translateY(calc(var(--chapter-shift) * -0.6));
}

/* Contenido del panel: entra escalonado */
.chapters.is-ready .chapters__panel > :not(.chapters__ghost) {
  opacity: 0;
  transform: translateY(var(--chapter-child-shift));
  transition:
    opacity var(--chapter-duration) ease,
    transform var(--chapter-duration) var(--ease-out-expo);
}
.chapters.is-ready .chapters__panel.is-active > :not(.chapters__ghost) {
  opacity: 1;
  transform: none;
}
.chapters.is-ready
  .chapters__panel.is-active
  > :not(.chapters__ghost):nth-child(4) {
  transition-delay: calc(var(--chapter-stagger) * 1);
}
.chapters.is-ready
  .chapters__panel.is-active
  > :not(.chapters__ghost):nth-child(5) {
  transition-delay: calc(var(--chapter-stagger) * 2);
}
.chapters.is-ready
  .chapters__panel.is-active
  > :not(.chapters__ghost):nth-child(6) {
  transition-delay: calc(var(--chapter-stagger) * 3);
}
.chapters.is-ready
  .chapters__panel.is-active
  > :not(.chapters__ghost):nth-child(7) {
  transition-delay: calc(var(--chapter-stagger) * 4);
}
.chapters.is-ready
  .chapters__panel.is-active
  > :not(.chapters__ghost):nth-child(n + 8) {
  transition-delay: calc(var(--chapter-stagger) * 5);
}

/* Número gigante de fondo (decorativo) */
.chapters__ghost {
  position: absolute;
  top: -0.18em;
  right: 0.06em;
  color: var(--color-ghost);
  font: italic 400 var(--text-ghost-num) / 1 var(--font-script);
  pointer-events: none;
  user-select: none;
  transition: transform calc(var(--chapter-duration) * 2) var(--ease-out-expo);
}
.chapters.is-ready .chapters__panel:not(.is-active) .chapters__ghost {
  transform: translateX(0.12em);
}
/* Pestañas: el número va abajo y ocupa el espacio que queda si el capítulo es más bajo que la lista */
.chapters.is-ready:not(.is-accordion) .chapters__ghost {
  top: auto;
  bottom: -0.2em;
}

/* ---- Capítulos en modo acordeón (hasta 1000px, con JS) ---- */
.chapters.is-accordion .chapters__controls {
  justify-content: flex-end;
  margin-top: 0;
}
.chapters.is-accordion .chapters__tab {
  grid-template-columns: 2.4em 1fr auto;
  align-items: center;
  min-height: var(--chapter-row-height);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
}
.chapters.is-accordion .chapters__tab:not(:first-child) {
  margin-top: var(--space-2);
}
.chapters.is-accordion .chapters__tab[aria-expanded="true"] {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--color-cobalt);
}
.chapters.is-accordion .chapters__tab::after {
  display: none;
}
/* Indicador: flecha que gira al abrir */
.chapters.is-accordion .chapters__tab::before {
  content: "";
  order: 1;
  width: var(--chapter-chevron-size);
  height: var(--chapter-chevron-size);
  margin-inline: var(--space-2) 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--chapter-duration) var(--ease-out-expo);
}
.chapters.is-accordion .chapters__tab[aria-expanded="true"]::before {
  transform: translateY(25%) rotate(-135deg);
}
.chapters.is-accordion .chapters__panel {
  padding: var(--chapter-panel-padding-compact);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: none;
  opacity: 1;
  transform: none;
}
.chapters.is-accordion .chapters__panels {
  display: none;
}
.chapters.is-accordion .chapters__ghost {
  top: -0.12em;
  font-size: var(--text-ghost-num-compact);
}

/* Mientras el cambio automático anima la altura, el navegador no corrige el scroll
   (scroll anchoring): la página no se mueve. Lo activa initChapters. */
.is-anchor-frozen,
.is-anchor-frozen body {
  overflow-anchor: none;
}

/* Jerarquía tipográfica dentro del panel */
.chapters__figure {
  margin-bottom: var(--space-2);
  padding-bottom: 0.06em;
  color: var(--color-cobalt);
  font: italic 400 var(--text-figure) / 1.05 var(--font-script);
}
.chapters__figure--words {
  margin-top: var(--space-5);
}
.chapters__lead {
  max-width: 32em;
  color: var(--color-text);
  font: 500 var(--text-chapter-lead) / 1.45 var(--font-body);
  letter-spacing: -0.01em;
}
.chapters__text {
  max-width: 38em;
  margin-top: var(--space-3);
  color: var(--color-muted);
}

.chapters__features {
  display: grid;
  gap: var(--space-3);
  max-width: 36em;
}
.chapters__feature {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-3);
  align-items: center;
  color: var(--color-text);
  font: 500 var(--text-base) / 1.5 var(--font-body);
}
.chapters__feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-cool);
  color: var(--color-cobalt);
}

/* Sede, depósito y carga */
.hubs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.hub {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bone);
}
.hub__place {
  font: 600 1.05rem / 1.2 var(--font-head);
}
.hub__role {
  color: var(--color-cobalt);
  font: 600 var(--text-xs) / 1.2 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hub--main {
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: var(--color-white);
}
.hub--main .hub__role {
  color: var(--color-amber);
}

/* Localidades por provincia */
.chapters__places {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}
.chapters__places > .chapters__text:first-child {
  margin-top: 0;
}
.chapters__provinces {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.province-chips__name {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-text);
  font: 600 var(--text-sm) / 1.2 var(--font-head);
}
.province-chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.place-chip {
  padding: 6px 12px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-bone);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.3;
  transition:
    transform var(--ease),
    background var(--ease),
    border-color var(--ease),
    color var(--ease),
    box-shadow var(--ease);
}
.place-chip:hover {
  transform: translateY(var(--lift-sm));
  border-color: var(--color-cobalt);
  background: var(--color-cobalt);
  color: var(--color-white);
  box-shadow: var(--shadow-lift);
}

/* Aparición del bloque: las pestañas entran escalonadas */
.has-js .chapters[data-reveal] .chapters__tab {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity var(--reveal-duration) ease,
    transform var(--reveal-duration) var(--ease-out-expo),
    color var(--ease);
}
.has-js .chapters[data-reveal].is-visible .chapters__tab {
  opacity: 1;
  transform: none;
}
.has-js .chapters.is-visible .chapters__tab:nth-child(2) {
  transition-delay:
    calc(var(--chapter-stagger) * 1), calc(var(--chapter-stagger) * 1), 0s;
}
.has-js .chapters.is-visible .chapters__tab:nth-child(3) {
  transition-delay:
    calc(var(--chapter-stagger) * 2), calc(var(--chapter-stagger) * 2), 0s;
}
.has-js .chapters.is-visible .chapters__tab:nth-child(4) {
  transition-delay:
    calc(var(--chapter-stagger) * 3), calc(var(--chapter-stagger) * 3), 0s;
}

/* ---- Contacto ---- */
/* Mismo criterio que la portada: video de fondo (huevos en el maple) con overlay en el azul de la
   sección, texto con aire a la izquierda y panel de papel más angosto a la derecha, un poco más abajo. */
.contact {
  position: relative;
  overflow: hidden;
  --bg-video-tint: var(--rgb-cobalt);
  --bg-video-position: var(--contact-video-position);
  --bg-video-strong: var(--contacto-overlay-izq);
  --bg-video-mid: calc((var(--contacto-overlay-izq) + var(--contacto-overlay-der)) / 2);
  --bg-video-soft: var(--contacto-overlay-der);
  --bg-video-local: radial-gradient(
    ellipse 50% 46% at 26% 28%,
    rgb(var(--rgb-cobalt) / var(--contacto-overlay-texto)) 0%,
    rgb(var(--rgb-cobalt) / var(--contacto-overlay-texto)) 60%,
    transparent 100%
  );
  --bg-video-bottom: 0;
}
.contact__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--contact-form-width);
  gap: var(--hero-gap);
  align-items: start;
}
.contact__title {
  margin-top: var(--space-3);
}
.contact__text {
  max-width: var(--contact-text-width);
  margin-top: var(--space-4);
  color: rgb(255 255 255 / 0.88);
  font: 400 var(--text-lead) / 1.55 var(--font-body);
}
.contact .form-card {
  margin-top: var(--contact-form-offset);
}

/* Datos de contacto (los completa SITE_CONFIG): etiqueta en Fraunces itálica y valor en Inter */
.contact-list {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.contact-list__item[hidden] {
  display: none;
}
.contact-list__label {
  display: block;
  color: var(--color-on-dark);
  font: italic 400 var(--text-sm) / 1.3 var(--font-script);
}
.contact-list__value {
  position: relative;
  display: inline-block;
  margin-top: 2px;
  color: var(--color-white);
  font: 500 var(--text-lead) / 1.4 var(--font-body);
  text-decoration: none;
  word-break: break-word;
}
a.contact-list__value::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 1px;
  background: var(--color-amber);
  transform: scaleX(0.25);
  transform-origin: left;
  transition: transform var(--ease);
}
a.contact-list__value:hover::after,
a.contact-list__value:focus-visible::after {
  transform: scaleX(1);
}

/* ---- Pie ---- */
.site-footer {
  padding: var(--space-6) 0 30px;
  background: var(--color-navy);
  color: var(--color-on-dark);
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: 30px;
  border-bottom: 1px solid var(--color-hairline-dark);
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.site-footer__nav a {
  font-size: 14.5px;
  text-decoration: none;
}
.site-footer__nav a:hover {
  color: var(--color-white);
}
.site-footer__social {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1.5px solid rgb(255 255 255 / 0.35);
  border-radius: var(--radius-sm);
  color: var(--color-white);
}
.site-footer__social[hidden] {
  display: none;
}
.site-footer__legal {
  padding-top: var(--space-4);
  color: var(--color-on-dark-soft);
  font-size: 13px;
}

/* 7. RESPONSIVE ----------------------------------------------------------- */
/* Los breakpoints no admiten variables CSS: 1000px = tablet, 560px = celular. */

@media (max-width: 1000px) {
  /* Secciones apiladas: el texto ocupa todo el ancho, así que el overlay es parejo */
  .bg-video__overlay {
    --bg-video-mid: var(--bg-video-strong);
    --bg-video-soft: var(--bg-video-strong);
  }
  /* En la portada, el recorte del video se corre hacia el logo del semi */
  .hero {
    --bg-video-position: 22% 50%;
  }
  /* Contacto apilado: overlay parejo, algo más fuerte que el lado izquierdo de escritorio */
  .contact {
    --bg-video-strong: var(--contacto-overlay-mobile);
    /* El texto ocupa todo el ancho arriba: el refuerzo es una franja superior que se desvanece antes del formulario */
    --bg-video-local: linear-gradient(
      180deg,
      rgb(var(--rgb-cobalt) / var(--contacto-overlay-texto)) 0%,
      rgb(var(--rgb-cobalt) / var(--contacto-overlay-texto)) 32%,
      transparent 46%
    );
  }
  /* El formulario llega casi al borde inferior: el botón baja al margen libre debajo */
  .video-toggle {
    bottom: var(--space-1);
  }
  .hero__grid,
  .contact__grid,
  .product {
    grid-template-columns: 1fr;
  }
  /* Portada apilada: texto arriba y formulario debajo */
  .hero__grid {
    min-height: 0;
  }
  .hero__copy {
    gap: var(--space-4);
  }
  .hero .form-card,
  .contact .form-card {
    width: min(100%, 30rem);
  }
  .contact .form-card {
    margin-top: var(--space-2);
  }

  .product {
    margin-top: 44px;
  }
  .product--reverse .product__media {
    order: 0;
  }
  .province-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Capítulos: una sola columna (con JS es acordeón, ver .chapters.is-accordion) */
  .chapters {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: var(--space-3);
  }
  .chapters__tabs,
  .chapters__controls,
  .chapters__panels {
    grid-column: 1;
    grid-row: auto;
  }
  .has-js .chapters[data-reveal] .chapters__tab {
    transform: translateY(8px);
  }
  .products__note {
    text-align: left;
  }
  .divider {
    margin-top: 72px;
  }

  .site-header__cta {
    display: none;
  }
  .nav-toggle {
    display: grid;
  }

  .nav {
    position: absolute;
    top: var(--header-height);
    right: 0;
    left: 0;
    display: none;
    padding: var(--space-1) var(--gutter) 22px;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-bone);
    box-shadow: 0 24px 40px -24px rgb(18 24 43 / 0.35);
  }
  .nav.is-open {
    display: block;
  }
  .nav__list {
    flex-direction: column;
    gap: 0;
  }
  .nav__link {
    display: block;
    padding: var(--space-3) 0;
    border-bottom: 1px solid rgb(18 24 43 / 0.08);
    font-size: 16px;
  }
  .nav__link[aria-current="true"]::after {
    display: none;
  }
  .nav__cta-mobile {
    display: block;
    margin-top: 18px;
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 18px;
    --header-height: 64px;
    --logo-header-h: 52px;
    --logo-footer-h: 80px;
    /* Mapa chico: las localidades cercanas encadenan sus nombres; el mínimo acorta la secuencia */
    --map-tag-hold: 1.2s;
    --map-tag-padding: 2px 7px;
    --map-tag-gap: 6px;
    --map-tag-margin: 3px;
    /* Mapa sin marco interno: gana ancho sin recortar la geografía */
    --map-stage-padding: 0px;
    --modal-media-height: var(--modal-media-height-mobile);
  }
  .form-card {
    padding: 24px 20px;
  }
  .province-cards,
  .chapters__provinces {
    grid-template-columns: 1fr;
  }
  .hub {
    gap: 4px;
    padding: 10px;
  }
  .hub__place {
    font-size: var(--text-sm);
  }
  .hub__role {
    font-size: 0.68rem;
    letter-spacing: 0.03em;
  }
  .chapters__panel {
    padding: var(--chapter-panel-padding-compact);
  }
  .chapters__provinces {
    gap: var(--space-3);
  }
  .place-chip {
    padding: 4px 10px;
    font-size: var(--text-xs);
  }
  .coverage-map__point:not(.coverage-map__point--base)
    .coverage-map__label
    small {
    display: none;
  }
  .recipe-modal {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    inset: 0;
    border-radius: 0;
  }
}

/* 8. MOVIMIENTO REDUCIDO -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .split-title__text,
  .hero .form-card {
    animation: none;
  }
  * {
    transition: none !important;
  }
  /* "*" no alcanza a los pseudo-elementos: línea de la pestaña y flecha del acordeón */
  .chapters__tab::before,
  .chapters__tab::after {
    transition: none !important;
  }

  .recipe-card,
  .recipe-card.is-visible,
  .has-js [data-reveal]:not(.recipe-card),
  .has-js .chapters[data-reveal] .chapters__tab,
  .chapters.is-ready .chapters__panel > :not(.chapters__ghost) {
    opacity: 1;
    transform: none;
  }
  .chapters.is-ready .chapters__panel,
  .chapters.is-ready .chapters__panel.is-leaving,
  .chapters__ghost,
  .chapters__tab[aria-selected="true"] .chapters__name {
    transform: none;
  }
  .chapters.is-ready .chapters__panel:not(.is-active) .chapters__ghost {
    transform: none;
  }
  .coverage-map__point.is-highlighted::after {
    animation: none;
  }
  .place-chip:hover,
  .province-card:hover,
  .province-card:focus-visible {
    transform: none;
  }
  .recipe-card:hover .recipe-card__media img,
  .recipe-card:focus-visible .recipe-card__media img,
  .recipe-card:hover .recipe-card__title,
  .recipe-card:focus-visible .recipe-card__title {
    transform: none;
  }
}