/* =====================================================================
   HIDRATACCIÓN — Brand-accurate scroll-driven website styles
   Colors: #0EA4CF (cyan) · #065F75 (dark teal) · #EEF7F8 (bg-light)
   Fonts: Barlow Condensed (display) · DM Sans (body)
   ===================================================================== */

/* ── CSS Custom Properties ────────────────────────────────────────── */
:root {
  --bg-light:       #EEF7F8;
  --bg-dark:        #065F75;
  --bg-mid:         #297786;
  --brand-primary:  #0EA4CF;
  --brand-dark:     #065F75;
  --brand-mid:      #297786;
  --brand-light:    #78B4BC;
  --text-on-light:  #0D2B33;
  --text-on-dark:   #EEF7F8;
  --text-muted:     #2A5F70;
  --font-display:   'Barlow Condensed', sans-serif;
  --font-body:      'DM Sans', sans-serif;

  --section-label-size: 0.68rem;
  --body-text-size:     clamp(0.9rem, 1.1vw, 1.05rem);
  --transition-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Texto que cae DIRECTAMENTE sobre el paisaje, sin sección que le ponga un
     piso claro: las secciones de la animación. Ahí no se puede usar el velo
     —el paisaje es lo que se está mirando— así que cada texto se trae su
     propio piso: una neblina clara que lo despega del cerro que tenga detrás.

     Ya existía en .section-body como una sola sombra; se sube a variable
     porque el mismo tratamiento lo necesitan las viñetas, y tenerlo en dos
     lugares con valores distintos fue justamente lo que dejó a las viñetas
     en 2,66:1 mientras el párrafo de al lado estaba en 3,90:1.

     Tres radios y no uno: el ancho da la neblina —que es lo que se ve— y el
     angosto es el que sostiene el contraste, porque lo que decide si un
     texto se lee son los píxeles pegados a la letra, no los del borde de la
     caja. Un solo radio ancho reparte poca opacidad justo ahí.

     Desde el 2026-08-31 vuelve al valor suave que tenía en línea. El halo
     de tres radios era para un paisaje oscuro detrás del texto; ahora el
     paisaje va lavado (ver --lavado-paisaje) y llega pálido y parejo, así
     que la neblina no tiene nada que despegar. Queda la sombra original —
     casi invisible sobre un fondo claro— y no un contorno alrededor de cada
     letra. Si algún día se saca el lavado, el que hay que subir es este
     valor: es la perilla, y está en un solo lugar. */
  --halo-paisaje: 0 1px 12px rgba(238, 247, 248, 0.8);
}

/* ── Reset & Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: auto;
  overflow-x: hidden; /* on html (not body) — prevents horizontal scroll at viewport level without affecting position:fixed elements */
}

body {
  background: var(--bg-light);
  color: var(--text-on-light);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden; /* trust bar is self-contained; body hidden prevents layout shift */
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── Grain overlay ────────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── LOADER ───────────────────────────────────────────────────────── */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
}

.loader-bar-track {
  width: min(320px, 70vw);
  height: 2px;
  background: rgba(238, 247, 248, 0.15);
  border-radius: 1px;
  overflow: hidden;
}

#loader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-primary), #78B4BC);
  border-radius: 1px;
  transition: width 0.1s linear;
}

#loader-percent {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: rgba(238, 247, 248, 0.5);
}

/* ── HEADER ───────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  height: 64px;
  display: flex;
  align-items: center;
  mix-blend-mode: normal;
  transition: background 0.4s ease;
}

/* En las páginas sin hero el header nunca se "scrollea": no cargan app.js, así
   que la clase .scrolled no llega nunca y quedaba transparente sobre el
   contenido. Estas llevan el fondo puesto desde el arranque. */
.site-header--solida,
.site-header.scrolled {
  background: rgba(238, 247, 248, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(6, 95, 117, 0.08);
}

.nav-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo img {
  height: 38px;
  width: auto;
  transition: opacity 0.2s ease;
}

.nav-logo:hover img { opacity: 0.8; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-light);
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.nav-link:hover { opacity: 1; color: var(--brand-dark); }

.nav-cta {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  background: var(--brand-dark);
  padding: 0.55rem 1.4rem;
  border-radius: 2rem;
  transition: background 0.25s ease, transform 0.2s var(--transition-spring);
}

.nav-cta:hover {
  background: var(--brand-primary);
  transform: translateY(-1px);
}

.nav-cta:active { transform: translateY(0); }

/* ── HERO STANDALONE ──────────────────────────────────────────────── */
/* Los tonos salen de muestrear el cielo de la propia foto, así el degradado
   de la izquierda y la foto de la derecha son el mismo cielo. */
:root {
  --cielo-alto:  #3C70AC;
  --cielo-medio: #6D9FD0;
  --cielo-bajo:  #8BB7D2;
  --cielo-pie:   #ACC2D0;
}

.hero-standalone {
  position: relative;
  z-index: 20;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  /* Este degradado es el respaldo. La portada real lo tapa con el video y su
     propio fondo —ver HERO EN VIDEO, al final del archivo—; queda puesto por
     si el video no llega a pintar, así el hero nunca aparece en blanco. */
  background: linear-gradient(
    to bottom,
    var(--cielo-medio) 0%,
    var(--cielo-bajo)  38%,
    var(--cielo-pie)   68%,
    #C9D8DF            100%
  );
}

.hero-inner {
  position: relative;
  z-index: 10;   /* por encima del velo */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 clamp(1.5rem, 6vw, 5rem);
  padding-top: 64px; /* alto del nav */
}

.hero-text-col {
  flex: 0 0 auto;
  max-width: min(52vw, 46rem);
}

.hero-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(4rem, 11vw, 9rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  color: #0A1A2B;
  margin-bottom: 1.5rem;
}

.hero-heading .word { display: block; }

/* El titular va entero en un tono. Antes «PURA.» iba en el cyan de marca, que
   sobre el video medía 1,9:1 de contraste contra un mínimo de 3:1 y no podía
   llegar: el techo del cyan contra blanco puro es 2,90:1. Al quedar una sola
   palabra el problema se fue solo. Si alguna vez hace falta un acento acá, la
   salida es --brand-dark, que en esta posición da 4,8:1. */

.hero-tagline {
  font-family: var(--font-body);
  /* Agrandada el 2026-08-26 por pedido de Franco. Al lado de un titular de 9vw
     quedaba enana, y acá es donde está la frase de la marca. El interlineado
     baja de 1,55 a 1,3 porque son dos renglones cortos: al tamaño nuevo, el
     valor viejo los separaba tanto que dejaban de leerse como una frase.

     Más grande y más gruesa desde el 2026-08-31, otro pedido de Franco: la
     frase es lo que dice la marca y estaba en 400, o sea el mismo peso que
     un párrafo cualquiera. */
  font-size: clamp(1.4rem, 2.5vw, 2.3rem);
  font-weight: 600;
  color: #14384F;
  line-height: 1.28;
  margin-bottom: 2.5rem;
}

/* «Acción», destacada. Es la mitad del nombre de la marca y la palabra que
   carga el sentido de la frase.

   NO va en el cyan de marca, y no es una elección de gusto: #0EA4CF sobre el
   video mide 1,9:1 contra un mínimo de 3:1, y no hay veló que lo arregle
   porque su techo contra blanco PURO es 2,90:1 — o sea que ni aclarando el
   fondo del todo llega. Es el mismo problema que ya está anotado arriba, de
   cuando «PURA.» iba en cyan en el titular.

   --brand-dark es la salida que quedó documentada entonces y acá mide 4,3:1.
   Es un cyan profundo: al lado del #14384F del resto de la frase se lee
   claramente como otro color, que es lo que se buscaba, y encima aguanta.

   Si alguna vez se quiere el celeste brillante de verdad, el camino no es
   cambiar este valor sino ponerle una placa clara y opaca detrás a la frase.
   Mientras el fondo sea el video, este es el límite. */
.hero-tagline__acento {
  color: var(--brand-dark);
  font-weight: 800;
}

/* Botón y sello */
.hero-actions {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  flex-wrap: wrap;
}

/* Agrandado el 2026-08-31: es la única acción de la portada y estaba con el
   mismo cuerpo que el sello de al lado, que no se toca. */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 2.1rem;
  border-radius: 999px;
  background: var(--brand-primary);
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(6, 95, 117, 0.28);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.25s ease,
              box-shadow 0.25s ease;
}

.hero-cta svg {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-cta:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(6, 95, 117, 0.34);
}

.hero-cta:hover svg { transform: translateX(4px); }
.hero-cta:active { transform: translateY(0); }

.hero-cta:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

.hero-seal {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  /* Sube con el botón, para que los dos sigan pesando parecido en la fila. */
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #14384F;
}

/* «Patagonia» va en cursiva ligada, como en el envase. Tres cosas del sello
   hay que apagar acá o el trazo se rompe:
   · las mayúsculas, que en una script se leen mal y no es lo que dice el sobre;
   · el letter-spacing de 0,16em, que separa las letras y corta los enlaces
     entre una y otra, que es justo lo que hace que una script sea una script;
   · la itálica, porque la fuente ya viene inclinada y encimarle una oblicua
     sintética la deforma.
   El cuerpo va más grande porque la equis de una script es mucho más baja que
   la de la DM Sans de al lado: al mismo font-size se vería enana.

   Del 1,7 al 2,1 el 2026-08-31. Franco pidió que «Patagonia» pese más que el
   «inspirado en la» que la presenta, y acá el peso se hace con el cuerpo y no
   con el color: el sello ya va en --brand-dark y subirle el tono no le queda
   ningún lugar adonde ir. */
.sello-patagonia {
  font-family: 'Dancing Script', cursive;
  text-transform: none;
  letter-spacing: 0;
  font-style: normal;
  font-weight: 700;
  font-size: 2.1em;
  line-height: 1;
  /* La script cuelga un poco por debajo; esto la vuelve a apoyar en la misma
     línea de base que el resto del sello. */
  position: relative;
  top: 0.06em;
}

/* La gota acompaña al cuerpo nuevo del sello: si se queda como estaba, al
   lado de una «Patagonia» más grande parece un resto. */
.hero-seal svg {
  width: 1.35em;
  height: 1.35em;
  fill: none;
  stroke: var(--brand-dark);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

/* Hero image slot (se sigue usando en otras secciones) */
.hero-image-col {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  max-width: 40vw;
}

.hero-image-col .img-slot {
  width: 100%;
  max-width: 380px;
  position: relative;
}

.hero-image-col .img-slot img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow:
    0 8px 32px rgba(6, 95, 117, 0.12),
    0 2px 8px rgba(6, 95, 117, 0.08);
}

/* ── CANVAS WRAP ──────────────────────────────────────────────────── */
.canvas-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0s; /* JS handles smoothness via scrub */
  will-change: clip-path, opacity;
  transform: translateZ(0); /* force own compositing layer — prevents repaint on first mobile scroll */
  pointer-events: none; /* canvas is purely visual — never intercept clicks */
}

/* El tamaño lo fija updateCanvasSize() en JS, respetando la proporción del
   cuadro (720x1287).
   El sobre queda quieto y centrado. La separación con el texto la da el
   propio texto, corriéndose hacia su borde (ver .align-left/.align-right).

   Acá había una máscara elíptica y, encima, dos degradados del color de fondo
   que difuminaban los bordes del canvas. Los dos tapaban lo mismo: que los
   cuadros traían su propio fondo casi blanco y se veía el rectángulo. Desde
   que los cuadros están recortados (scripts/recortar-frames.mjs) no hay
   ningún rectángulo que tapar, y los degradados eran peores que el problema:
   pintaban bandas claras encima del paisaje, que es justo lo que se veía como
   dos líneas verticales a los costados del sobre. */
/* El sobre de la animación es un link a la página del producto. El envoltorio
   sigue sin recibir clics —tapa toda la pantalla y se comería los de las
   secciones—; el que los recibe es este link, del tamaño del sobre, y solo
   mientras el sobre se ve: apagado, deja pasar todo. */
.canvas-link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  pointer-events: none;
  cursor: pointer;
}

.canvas-link.is-activo { pointer-events: auto; }

.canvas-link:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 6px;
  border-radius: 8px;
}

#product-canvas {
  display: block;
  transition: transform 0.4s var(--transition-spring);
}

/* Apenas se agranda al pasarle el mouse: alcanza para que se note que responde */
.canvas-link.is-activo:hover #product-canvas { transform: scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  #product-canvas { transition: none; }
  .canvas-link.is-activo:hover #product-canvas { transform: none; }
}

/* El velo oscuro que había acá se retiró: la sección de números ahora se
   resuelve apagando el propio paisaje (ver "NOCHE" más abajo), en vez de
   taparlo con una capa negra por encima de todo. */

/* ── CTA DEL SOBRE ────────────────────────────────────────────────────
   Va colgado del propio sobre y no de la pantalla: --alto-sobre lo escribe
   updateCanvasSize() en JS, que es quien sabe cuánto mide el sobre en cada
   tamaño de ventana. Con un valor fijo, en pantallas anchas quedaba pegado
   al producto y en angostas se separaba demasiado. */
.sobre-cta {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--alto-sobre, 60vh) / 2 + 1.4rem);
  transform: translate(-50%, 8px);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.6rem;
  background: var(--brand-dark);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;   /* el envoltorio no recibe clics; el botón sí, ya visible */
  box-shadow: 0 10px 28px rgba(6, 95, 117, 0.22);
  transition: opacity 0.5s ease, transform 0.5s var(--transition-spring), visibility 0s linear 0.5s, background 0.25s ease;
}

.sobre-cta.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
  transition: opacity 0.5s ease, transform 0.5s var(--transition-spring), visibility 0s, background 0.25s ease;
}

.sobre-cta:hover  { background: var(--brand-primary); }
.sobre-cta:active { transform: translate(-50%, 1px); }
.sobre-cta:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }

.sobre-cta svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 768px) {
  .sobre-cta { font-size: 0.7rem; padding: 0.6rem 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sobre-cta { transition: opacity 0.3s ease, visibility 0s linear 0.3s; transform: translate(-50%, 0); }
}

/* ── MARQUEE ──────────────────────────────────────────────────────── */
.marquee-wrap {
  position: fixed;
  bottom: 8vh;
  left: 0;
  width: 100%;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}

.marquee-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(8vw, 12vw, 14vw);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(238, 247, 248, 0.08);
  will-change: transform;
}

/* ── SCROLL CONTAINER ─────────────────────────────────────────────── */
/* 460vh, no 700: el bloque animado terminaba con tres secciones más detrás
   (004, 005 y 006) que salieron de la portada. El alto no es libre — manda
   cuánto scroll tarda la animación en pasar los 243 cuadros. Si se toca acá,
   hay que rehacer la tabla de tramos de app.js. */
#scroll-container {
  position: relative;
  /* 620vh desde el 2026-08-26. Eran 460 y toda la secuencia —las tres
     secciones más el giro del sobre— entraba en 3,6 pantallas de scroll: se
     sentía apurada. Los tramos son porcentajes del contenedor, así que
     estirarlo alarga todo en la misma proporción sin recalibrar nada. El
     sobre además gira más lento, que era parte de lo que se buscaba. */
  height: 620vh;
  width: 100%;
  overflow: visible;
}

/* Los clics tienen que poder llegar al sobre, que se dibuja detrás de estas
   secciones. Cada sección ocupa todo el ancho aunque su texto esté contra un
   costado, así que sin esto atajaban cualquier clic en el medio de la
   pantalla —justo donde está el sobre— y el link no recibía ninguno.
   Lo que sí tiene que seguir recibiendo clics son los links y botones. */
#scroll-container,
.scroll-section { pointer-events: none; }

.scroll-section a,
.scroll-section button { pointer-events: auto; }

/* ── SCROLL SECTIONS ──────────────────────────────────────────────── */
.scroll-section {
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 5;
  pointer-events: none;
  padding: 3rem 0;
}

/* Side-aligned text zones */
/* El sobre queda fijo y centrado, ocupando ~378px (proporción del frame).
   O sea que a cada lado sobran unos 530px. El texto se va contra su borde
   para despegarse del sobre: antes arrancaba a 55vw y se le montaba encima.
   Con estos valores queda un aire de ~70px entre el texto y el sobre. */
.align-left {
  padding-left: 6vw;
  padding-right: 68vw;
}

.align-right {
  padding-left: 68vw;
  padding-right: 6vw;
}

.align-left .section-inner,
.align-right .section-inner {
  max-width: 30vw;
  background: radial-gradient(ellipse at center, rgba(238, 247, 248, 0.55) 0%, transparent 75%);
  padding: 2rem 0;
}

.section-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem 5vw;
}

.section-cta .section-inner {
  text-align: left;
}

/* ── SECTION TYPOGRAPHY ───────────────────────────────────────────── */
.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--section-label-size);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 0.75rem;
}

.section-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.8rem, 5.5vw, 4.5rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--text-on-light);
  margin-bottom: 1.25rem;
  text-shadow:
    0 1px 0 rgba(238, 247, 248, 0.5),
    0 4px 24px rgba(238, 247, 248, 0.6),
    0 8px 48px rgba(238, 247, 248, 0.3);
}

.section-body {
  font-family: var(--font-body);
  font-size: var(--body-text-size);
  font-weight: 500;
  line-height: 1.75;
  /* Va en el tono pleno y no en el apagado: acá atrás no hay una sección que
     ponga fondo, está el paisaje. El apagado #2A5F70 sólo tiene 7:1 contra
     blanco puro, así que sobre un cerro se queda sin margen enseguida. */
  color: var(--text-muted);
  max-width: 34ch;
  text-shadow: var(--halo-paisaje);
}

/* ── SECTION IMAGE SLOTS (inside scroll sections) ─────────────────── */
.section-image {
  margin-top: 1.5rem;
}

.section-image img {
  width: 100%;
  max-width: 360px;
  border-radius: 3px;
  box-shadow: 0 4px 24px rgba(6, 95, 117, 0.15);
}

/* ── Collage de sección ──────────────────────────────────────────────
   El texto de estas secciones ocupa un costado —004 a la izquierda, 005 a la
   derecha, 006 al centro— y el otro quedaba vacío desde que el sobre se
   retira. Ahí va el collage: dos fotos superpuestas, con marco blanco y
   apenas giradas, como fotos apoyadas sobre la mesa.

   Cada una lleva el velo del color de la marca: las fotos son de la Patagonia
   real —cielos celestes, un atardecer naranja— y sin tratar se pelean con la
   paleta fría del resto. */
.section-collage {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(240px, 26vw, 400px);
  pointer-events: none;
}

/* Del lado contrario al texto */
.align-left  .section-collage { right: 9vw; }
.align-right .section-collage { left: 9vw; }
.section-cta .section-collage { right: 12vw; }

/* El marco: un panel del color de la marca corrido detrás de las fotos, que
   es lo que las sostiene visualmente y las despega del fondo. */
.section-collage::before {
  content: '';
  position: absolute;
  left: -6%;
  top: 6%;
  width: 92%;
  height: 88%;
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(14, 164, 207, 0.20), rgba(6, 95, 117, 0.10));
  transform: rotate(-3deg);
}

.collage-foto {
  position: relative;
  margin: 0;
  padding: 8px;
  background: #fff;
  border-radius: 6px;
  box-shadow:
    0 20px 44px rgba(6, 95, 117, 0.20),
    0 3px 10px rgba(6, 95, 117, 0.10);
}

.collage-foto picture { display: block; }

.collage-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 3px;
}

/* El velo va sobre la foto y no sobre el marco blanco */
.collage-foto picture::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 3px;
  background:
    linear-gradient(to top, rgba(6, 95, 117, 0.40), rgba(6, 95, 117, 0) 60%),
    rgba(14, 164, 207, 0.14);
  mix-blend-mode: multiply;
}

.collage-foto--grande {
  width: 78%;
  transform: rotate(-2deg);
}

/* La chica pisa a la grande por una esquina: es lo que hace que se lea como
   collage y no como dos fotos puestas una al lado de la otra. */
.collage-foto--chica {
  width: 46%;
  margin-top: -22%;
  margin-left: auto;
  transform: rotate(3.5deg);
}

/* En celular el texto pasa a ocupar todo el ancho sobre un panel oscuro: un
   collage flotando encima taparía justo lo que hay que leer. */
@media (max-width: 900px) {
  .section-collage { display: none; }
}

/* ── STATS SECTION ────────────────────────────────────────────────── */
.section-stats {
  text-align: center;
  padding: 4rem 5vw;
  pointer-events: none;
}

/* Un piso para el contador, y no una caja.

   El problema no es la opacidad del texto: es la NIEVE. Los cerros de noche
   dejan el texto claro entre 4,2:1 y 9,4:1, pero las manchas de nieve siguen
   en #CDEDF6 —casi blancas, porque una montaña nevada sin nieve no se lee
   como montaña— y caen justo detrás de «AZÚCARES». Ahí el rótulo medía
   1,13:1: el mismo color que el fondo.

   Subir la opacidad del rótulo no alcanza y una sombra difuminada tampoco:
   ya se probó con las viñetas de la 002 y cada refuerzo daba una décima
   mientras empezaba a verse como un resplandor. Una sombra nunca llega a ser
   un piso.

   Entonces va un piso de verdad, pero sin recuadro: una elipse oscura que se
   apaga antes de llegar a los bordes. No se recorta contra nada, así que no
   dibuja una caja encima del paisaje — sobre una escena de noche se lee como
   profundidad, no como un panel. El color es el del cielo nocturno y no un
   gris, para que sume a la escena en vez de ensuciarla.

   Cuelga de .es-noche porque la sección está `fixed` en el medio de la
   ventana desde mucho antes de entrar: sin eso, la mancha oscura se vería
   flotando sola mientras el contador todavía no llegó. Y sirve que sea justo
   la noche: dura exactamente lo mismo que el contador en pantalla. */
.section-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;             /* .scroll-section tiene z-index, así que el
                              contexto es de ella: queda debajo del texto y
                              no se hunde detrás del paisaje */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;   /* el mismo tiempo que el amanecer */
  background: radial-gradient(
    ellipse 42% 88% at 50% 50%,
    rgba(4, 48, 60, 0.88) 0%,
    rgba(4, 48, 60, 0.78) 52%,
    rgba(4, 48, 60, 0)   100%);
}

.es-noche .section-stats::before { opacity: 1; }

/* En celular la elipse no sirve, y se ve enseguida: los radios salen del
   ancho de la caja, así que en 390px la elipse mide 164 de radio y sus dos
   bordes laterales caen ADENTRO de la pantalla. En vez de niebla se ve un
   rectángulo redondeado.

   Acá la niebla va de lado a lado y se apaga sólo arriba y abajo, que es la
   única dirección donde queda un borde que disimular. Es la misma idea —un
   piso que se apaga antes del borde— resuelta con la forma que corresponde a
   una pantalla angosta. */
@media (max-width: 768px) {
  .section-stats::before {
    background: linear-gradient(
      180deg,
      rgba(4, 48, 60, 0)    0%,
      rgba(4, 48, 60, 0.86) 24%,
      rgba(4, 48, 60, 0.86) 76%,
      rgba(4, 48, 60, 0)    100%);
  }
}

.stats-label {
  display: block;
  margin-bottom: 2rem;
  /* Iba en 0,6. Con el piso puesto se puede subir sin que el rótulo compita
     con los números, y hace falta: a 11px el margen se agota rápido. */
  color: rgba(238, 247, 248, 0.8);
}

.stats-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2rem, 6vw, 6rem);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number-wrap {
  display: flex;
  align-items: flex-start;
  line-height: 1;
}

.stat-number {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(4rem, 8vw, 6.5rem);
  color: var(--text-on-dark);
  line-height: 1;
  letter-spacing: -0.03em;
}

.stat-suffix {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--brand-primary);
  margin-top: 0.5rem;
  margin-left: 0.1em;
}

.stat-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Iba en 0,55, que a 11px y con 0,18em de espaciado era lo más flojo de la
     sección: es el texto que Franco no podía leer. Ver el piso de arriba. */
  color: rgba(238, 247, 248, 0.85);
  margin-top: 0.6rem;
  display: block;
}

/* ── CTA BUTTON ───────────────────────────────────────────────────── */
.cta-heading {
  font-size: clamp(3.5rem, 7vw, 5.5rem) !important;
  color: var(--text-on-light);
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding: 0.85rem 2.2rem;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-dark));
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2rem;
  pointer-events: all;
  box-shadow: 0 4px 20px rgba(14, 164, 207, 0.3);
  transition: transform 0.25s var(--transition-spring), box-shadow 0.25s ease;
}

.cta-button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px rgba(14, 164, 207, 0.4);
}

.cta-button:active {
  transform: translateY(0) scale(0.99);
}

.cta-button:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 4px;
}

/* ── POST-SCROLL LIFESTYLE GALLERY ───────────────────────────────── */
.lifestyle-gallery {
  position: relative;
  z-index: 10;
  background: transparent;
  padding: clamp(4rem, 8vh, 7rem) clamp(1.5rem, 6vw, 5rem);
}

/* Mismo techo de 1200px que el resto de la página. Sin esto la galería era lo
   único a todo el ancho: al alejar el zoom del navegador el texto se quedaba
   en 1200 y las fotos y el video seguían creciendo —2720px al 50%—, así que
   parecía que solo las imágenes no se achicaban. */
.gallery-header,
.gallery-video,
.gallery-grid {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.gallery-header {
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}

.gallery-header .section-label {
  display: block;
  margin-bottom: 0.75rem;
}

.gallery-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--text-on-light);
  margin-bottom: 0.75rem;
}

.gallery-sub {
  font-family: var(--font-body);
  font-size: var(--body-text-size);
  /* En el tono pleno, como .ing-role y por lo mismo: esta bajada cae sobre la
     franja del agua y del suelo, que es lo más oscuro del paisaje. Con el
     secundario se quedaba en 4,38:1 contra un mínimo de 4,5 — poco, pero
     medido dos veces seguidas, así que no es el ruido de las corridas. */
  color: var(--text-muted);
  max-width: 42ch;
}

/* ── El video de la sección ───────────────────────────────────────────
   Es la pieza principal: va a todo el ancho, arriba de las tres fotos.
   A diferencia del video del pie, acá NO se aplana con `luminosity` — el
   punto es que se vea el lugar, no que aporte textura. Lo único que se le
   pone encima es el degradé de abajo, que es lo que sostiene el rótulo.
   El alto va fijo y NO por `aspect-ratio`: con 16/9 a todo el ancho daban más
   de 700px y se comía la pantalla, pero al limitarlo con `max-height` el
   `aspect-ratio` achicaba también el ancho y el video quedaba más angosto que
   la grilla de fotos de abajo. Con alto propio y `cover`, ocupa el ancho
   completo y el recorte lo absorbe la altura. */
.gallery-video {
  position: relative;
  /* `auto` a los costados, no 0: esta regla va después de la que centra la
     galería y le ganaría, dejando el video pegado a la izquierda. */
  margin: 0 auto clamp(0.75rem, 1.5vw, 1.5rem);
  width: 100%;
  height: clamp(300px, 52vh, 560px);
  border-radius: 3px;
  overflow: hidden;
  background: var(--brand-dark);
}

.gallery-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-video::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(4, 43, 54, 0.6) 0%, rgba(4, 43, 54, 0) 38%);
}

/* Sin movimiento: queda el póster, que es un cuadro del mismo video. */
@media (prefers-reduced-motion: reduce) {
  .gallery-video video { display: none; }
  .gallery-video {
    background: url('../video/montania-poster.webp') center / cover no-repeat;
  }
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  align-items: end;
}

/* Las tres piezas comparten proporción. Sin esto, cada una medía lo que
   midiera su foto: el sobre es altísimo y angosto y rompía la fila. */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  cursor: pointer;
  aspect-ratio: 400 / 530;
}

/* Las tres van a la misma altura. La del medio subía 2rem y le tapaba una
   franja al video que ahora encabeza la sección. */
.gallery-item--tall {
  transform: none;
}

/* <picture> es inline: sin esto la foto no llena el recuadro de la galería */
.gallery-item picture { display: block; width: 100%; height: 100%; }

/* El envase va entero sobre el fondo del recuadro y no recortado como las
   fotos: está recortado con transparencia justamente para eso. */
/* ── La pieza del producto ────────────────────────────────────────────
   Tres capas: la foto de fondo desenfocada, un velo que la asienta, y el
   sobre entero encima. El velo no es decorativo: sin él, el envase —que es
   claro y plateado— se perdía contra el cielo de la foto. */
.gallery-item__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(7px) saturate(0.9);
  /* El desenfoque deja los bordes transparentes; agrandarla los tapa. */
  transform: scale(1.1);
}

.gallery-item--producto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 95, 117, 0.3) 0%, rgba(4, 43, 54, 0.5) 100%);
}

.gallery-item__producto {
  position: relative;
  z-index: 2;
  object-fit: contain !important;
  padding: 12% 18%;
  /* Ya no lleva fondo propio: el fondo ahora es la foto de atrás. */
  filter: drop-shadow(0 12px 28px rgba(4, 43, 54, 0.45));
}

.gallery-item--producto .gallery-caption { z-index: 3; }

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 95, 117, 0.55) 0%, transparent 50%);
  transition: opacity 0.4s ease;
}

.gallery-item:hover img { transform: scale(1.04); }

/* Al pasar el mouse el velo se REFUERZA, no se afloja. Antes bajaba a
   opacidad 0.7, que lo debilitaba justo cuando entra la frase: sobre las
   fotos claras —el lago de "Vida cotidiana"— quedaba blanco sobre celeste. */
/* El degradé llega hasta el 70%: con la frase más grande el texto sube más
   arriba, y cortando en 58% el primer renglón quedaba sobre foto limpia. */
.gallery-item:hover::after {
  background: linear-gradient(to top, rgba(4, 43, 54, 0.82) 0%, rgba(4, 43, 54, 0) 70%);
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1.25rem;
  z-index: 2;
  transform: translateY(4px);
  transition: transform 0.35s ease;
}

.gallery-item:hover .gallery-caption { transform: translateY(0); }

.gallery-caption-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(238, 247, 248, 0.85);
  font-weight: 500;
}

/* ── La frase que aparece al pasar el mouse ───────────────────────────
   El rótulo dice QUÉ es la foto y se ve siempre; la frase dice para qué
   sirve el producto en ese momento y entra al pasar por encima.
   Solo se anima opacidad y transform, que resuelve el compositor. */
.gallery-frase {
  margin-top: 0.45rem;
  max-width: 18ch;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  /* 1.08 era muy justo: con esta itálica pesada y las tildes de "Subí" o
     "día", los renglones se tocaban entre sí. */
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  text-shadow: 0 2px 14px rgba(4, 43, 54, 0.45);
  text-wrap: balance;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.45s var(--transition-spring);
}

.gallery-item:hover .gallery-frase,
.gallery-item:focus-within .gallery-frase,
.gallery-video:hover .gallery-frase,
.gallery-video:focus-within .gallery-frase {
  opacity: 1;
  transform: translateY(0);
}

/* El video no tenía nada de esto: le hacía falta el mismo velo de abajo
   que las fotos para que la frase se lea, y que la leyenda se corra igual. */
.gallery-video .gallery-caption { transition: transform 0.35s ease; }
.gallery-video:hover .gallery-caption { transform: translateY(0); }
.gallery-video:hover::after {
  background: linear-gradient(to top, rgba(4, 43, 54, 0.72) 0%, rgba(4, 43, 54, 0) 55%);
}

/* En pantallas sin mouse no hay "pasar por encima": la frase va siempre. */
@media (hover: none) {
  .gallery-frase { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-frase { transition: opacity 0.2s ease; transform: none; }
}

/* ── FINAL CTA SECTION ────────────────────────────────────────────── */
.final-cta {
  position: relative;
  z-index: 10;
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.final-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.final-cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.final-cta-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(6, 95, 117, 0.88) 0%,
    rgba(6, 95, 117, 0.75) 50%,
    rgba(14, 164, 207, 0.6) 100%
  );
}

.final-cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 6vw, 5rem);
}

.final-cta-eyebrow {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: rgba(238, 247, 248, 0.7);
  margin-bottom: 0.75rem;
}

.final-cta-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(4rem, 9vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--text-on-dark);
  margin-bottom: 2.5rem;
}

.cta-button--large {
  font-size: 0.85rem;
  padding: 1rem 2.8rem;
}

/* ── FOOTER ───────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 10;
  background: var(--bg-dark);
  padding: 2.5rem clamp(1.5rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.footer-logo {
  height: 30px;
  width: auto;
  opacity: 0.9;
}

.footer-copy {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(238, 247, 248, 0.45);
}

/* ── IMAGE SLOT BADGES (dev-only helper) ──────────────────────────── */
.slot-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(14, 164, 207, 0.9);
  color: white;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 3px;
  z-index: 10;
  pointer-events: none;
}

.img-slot { position: relative; }

/* ── MOBILE RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Header */
  .nav-links { display: none; }

  /* Hero */
  .hero-inner { flex-direction: column; padding-top: 80px; }
  .hero-text-col { max-width: 100%; }
  .hero-image-col { display: none; }
  .hero-heading { font-size: clamp(4rem, 15vw, 6rem); }

  /* Scroll container */
  #scroll-container { height: 400vh; }

  /* Side sections → centered with dark backdrop */
  .align-left,
  .align-right {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    justify-content: center;
  }

  .align-left .section-inner,
  .align-right .section-inner {
    max-width: 100%;
    background: rgba(6, 95, 117, 0.95); /* increased opacity — no blur needed */
    border-radius: 4px;
    padding: 1.5rem;
  }

  .align-left .section-heading,
  .align-right .section-heading { color: var(--text-on-dark); }

  /* Adentro del panel el tratamiento se da vuelta: texto claro sobre oscuro,
     y sin neblina. El halo existe para despegar el texto del paisaje; acá
     atrás hay un panel sólido, así que sólo dibujaría un contorno claro
     alrededor de cada letra. */
  .align-left .section-body,
  .align-right .section-body {
    color: rgba(238, 247, 248, 0.8);   /* 4,88:1 sobre el panel */
    max-width: none;
    text-shadow: none;
  }

  /* Las viñetas y los sellos se habían quedado afuera de esta lista desde que
     el panel existe, y era el peor caso medido de toda la página: el apagado
     #2A5F70 sobre el panel #065F75 da 1,02:1, o sea el mismo color. En la
     captura no se leían: se adivinaban. */
  .align-left .section-puntos li,
  .align-right .section-puntos li,
  .align-left .sello-nombre,
  .align-right .sello-nombre {
    color: rgba(238, 247, 248, 0.86);  /* 5,38:1 sobre el panel */
    text-shadow: none;
  }

  /* El aro y el símbolo van con --brand-mid, que NO es currentColor: hay que
     cambiarlos aparte o quedan en 1,41:1 sobre el panel, todavía peor que el
     nombre de abajo. Un gráfico necesita 3:1; este queda en 4,48:1. */
  .align-left .sello-marca svg,
  .align-right .sello-marca svg { stroke: #A9D3D9; }

  .align-left .section-label,
  .align-right .section-label {
    /* El panel es translúcido sobre un paisaje que cambia, así que lo medido
       da casi un punto menos que lo teórico: hay que elegir con margen.
       --brand-light se quedaba en 3,12:1 y #BFE0E5, que en teoría daba 5,17,
       medía 4,23. Este está en 6,09 teórico. */
    color: #DCEFF2;
  }

  /* Stats */
  .stats-grid { gap: 2rem; }
  .stat-number { font-size: clamp(3rem, 15vw, 5rem); }

  /* Gallery */
  .gallery-grid { grid-template-columns: 1fr; gap: 1rem; }
  .gallery-item--tall { transform: none; }

  /* Marquee */
  .marquee-text { font-size: 20vw; }

  /* Show mobile controls, hide desktop nav-links (already display:none above) */
  .nav-mobile-controls { display: flex; }

  /* Mobile menu visible (off-screen until .is-open) */
  .mobile-menu { display: flex; }
}

/* ── Hamburger button ────────────────────────────────────────────────── */
/* Hide on desktop — must use min-width here because the mobile media query
   above sets display:flex, and a global display:none after it would override. */
@media (min-width: 769px) {
  .nav-mobile-controls { display: none; }
}

.nav-mobile-controls {
  align-items: center;
  gap: 0.75rem;
}

.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s ease;
}
.nav-hamburger:hover  { background: rgba(6, 95, 117, 0.08); }
.nav-hamburger:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-on-light);
  border-radius: 2px;
  transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity  0.20s ease;
  transform-origin: center;
}

.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile menu overlay ─────────────────────────────────────────────── */
/* Ojo con el orden: la media query de celular que enciende este menú está
   más arriba en el archivo, así que un `display: none` acá la pisaba y el
   menú no aparecía nunca, ni con la clase is-open puesta. Se muestra por
   defecto y se lo esconde en escritorio, que es la única regla que puede ir
   después. */
.mobile-menu {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 99; /* below header (100) so header stays on top */
  background: var(--bg-light);
  padding: 80px 2.5rem 3rem;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow-y: auto;
}

@media (min-width: 769px) {
  .mobile-menu { display: none; }
}

.mobile-menu.is-open { transform: translateY(0); }

.mobile-menu-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2rem;
}

.mobile-menu-link,
.mobile-menu-cta {
  display: block;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.4rem, 10vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-on-light);
  border-bottom: 1px solid rgba(6, 95, 117, 0.12);
  transition: color 0.2s ease;
}
.mobile-menu-link:hover   { color: var(--brand-primary); }

.mobile-menu-cta {
  color: var(--brand-primary);
  border-bottom: none;
  margin-top: 1.5rem;
}
.mobile-menu-cta:hover    { opacity: 0.75; }
.mobile-menu-cta:active   { opacity: 0.5; }

/* Prevent body scroll while menu is open */
body.menu-open { overflow: hidden; }

@media (max-width: 480px) {
  .hero-heading { font-size: clamp(3.5rem, 18vw, 5rem); }
  .section-heading { font-size: clamp(2.2rem, 9vw, 3rem) !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   STORE — Product listing + cart
   ══════════════════════════════════════════════════════════════════════ */

/* ── Nav cart icon ───────────────────────────────────────────────────── */
.nav-cart {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--text-on-light);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.nav-cart:hover { opacity: 1; }
.nav-cart svg   { display: block; }

.cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--brand-primary);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
}

/* ── Store section ───────────────────────────────────────────────────── */
/* Achicada a propósito: en una notebook la tienda no entraba en una pantalla
   y había que scrollear para llegar al precio y al botón. El recorte está en
   el aire y en el título, no en la ficha, que es lo que hay que leer. */
.store-section {
  position: relative;
  z-index: 10;
  background: transparent;
  padding: clamp(2rem, 4vh, 3rem) 0;
}

.store-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 6vw, 5rem);
}

.store-header {
  margin-bottom: clamp(1.25rem, 2.5vh, 2rem);
}

.store-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--text-on-light);
  margin-bottom: 0.75rem;
}

.store-sub {
  font-family: var(--font-body);
  font-size: var(--body-text-size);
  color: var(--text-muted);
}

/* ── Product grid ────────────────────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

/* ── Product card ────────────────────────────────────────────────────── */
.product-card {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 2px 12px rgba(6, 95, 117, 0.06),
    0 1px 3px rgba(6, 95, 117, 0.04);
  transition: transform 0.3s var(--transition-spring), box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 8px 32px rgba(6, 95, 117, 0.12),
    0 2px 8px rgba(6, 95, 117, 0.06);
}

.product-card__image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-light);
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  pointer-events: none;
}
.product-badge--low  { background: #F59E0B; color: #fff; }
.product-badge--out  { background: rgba(6, 95, 117, 0.15); color: var(--brand-dark); }

.product-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
}

.product-card__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-on-light);
}

.product-card__desc {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-muted);
  flex: 1;
}

.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.product-card__price {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--brand-dark);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.product-card__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* ── Quantity control ────────────────────────────────────────────────── */
.qty-control {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-light);
  border-radius: 2rem;
  padding: 0.2rem 0.5rem;
}

.qty-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease;
}
.qty-btn:hover  { background: var(--brand-primary); color: #fff; }
.qty-btn:active { transform: scale(0.9); }
.qty-btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.qty-display {
  min-width: 1.5rem;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-on-light);
}

/* ── Add to cart button ──────────────────────────────────────────────── */
.product-add-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.2rem;
  background: var(--brand-dark);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.2s var(--transition-spring);
}
.product-add-btn:hover:not(:disabled) {
  background: var(--brand-primary);
  transform: translateY(-1px);
}
.product-add-btn:active:not(:disabled) { transform: translateY(0); }
.product-add-btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}
.product-add-btn.added      { background: #16A34A; }
.product-add-btn--disabled  { opacity: 0.45; cursor: not-allowed; }

/* ── Checkout CTA bar ────────────────────────────────────────────────── */
.store-checkout-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 0.9rem 1.5rem;
  background: var(--brand-dark);
  border-radius: 6px;
  flex-wrap: wrap;
}

.store-cta-summary {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(238, 247, 248, 0.8);
}

.store-cta-btn {
  background: var(--brand-primary);
  margin-top: 0;
  white-space: nowrap;
}
.store-cta-btn:hover {
  background: #fff;
  color: var(--brand-dark);
}

/* ── Ficha del monoproducto ──────────────────────────────────────────
   Con un solo producto la grilla se apaga: la ficha ocupa el ancho de la
   sección, con la foto fija a la izquierda y todo lo que se lee y se elige
   a la derecha. */
.products-grid--ficha { display: block; }

.ficha-producto {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: stretch;
  background: #fff;
  border-radius: 6px;
  padding: clamp(0.75rem, 1.4vw, 1rem);
  box-shadow:
    0 2px 12px rgba(6, 95, 117, 0.06),
    0 1px 3px rgba(6, 95, 117, 0.04);
}

/* La foto no se mueve ni reacciona: es la referencia quieta de la sección,
   justo después de toda la animación del sobre girando. El recorte es al
   alto para que el sobre entre entero y lo que se pierda sean los márgenes
   vacíos de los costados. */
/* Sin recuadro: el sobre viene recortado, así que flota sobre la tarjeta y lo
   único que lo acompaña es un halo que se apaga antes de llegar a los bordes.
   Cualquier fondo con borde definido vuelve a dibujar el marco que había que
   sacar. */
.ficha-foto {
  position: relative;
  min-height: clamp(260px, 38vh, 400px);
  background: radial-gradient(
    closest-side at 50% 55%,
    rgba(14, 164, 207, 0.13),
    rgba(14, 164, 207, 0.05) 55%,
    rgba(14, 164, 207, 0) 78%
  );
}

/* El sobre viene recortado, sin fondo, así que se muestra entero (`contain`)
   sobre el degradé del panel. Con la foto rectangular anterior había que
   recortarla al alto para disimular su fondo; ya no hace falta. */
.ficha-foto__img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: contain;
  object-position: center;
  padding: clamp(1rem, 2.5vw, 2rem);
}

/* ── Las tomas del sobre ──────────────────────────────────────────────
   Botones chicos abajo de la foto que cambian la vista grande. Van sobre la
   foto y no debajo de la tarjeta para que se entienda que pertenecen a ella. */
.ficha-tomas {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.ficha-toma {
  width: 46px;
  height: 58px;
  padding: 3px;
  border: 1.5px solid transparent;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s var(--transition-spring);
}

.ficha-toma img { width: 100%; height: 100%; object-fit: contain; }

.ficha-toma:hover        { transform: translateY(-2px); }
.ficha-toma.is-elegida   { border-color: var(--brand-primary); background: #fff; }
.ficha-toma:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ficha-toma:hover { transform: none; }
}

.ficha-datos {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(0.4rem, 1.4vw, 0.85rem) clamp(0.4rem, 1.4vw, 0.85rem) clamp(0.4rem, 1vw, 0.6rem) 0;
}

.ficha-nombre {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-on-light);
}

.ficha-desc {
  font-size: var(--body-text-size);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 46ch;
}

/* ── Selector de packs ───────────────────────────────────────────────── */
.ficha-packs {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.ficha-packs__titulo {
  font-family: var(--font-body);
  font-size: var(--section-label-size);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-mid);
}

/* Cuatro columnas fijas: marca · nombre · precio · descuento. El descuento
   tiene su propia columna aunque el pack no tenga, así los precios de todas
   las filas caen sobre la misma línea. */
.pack {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 3rem;
  align-items: center;
  gap: 0.1rem 0.85rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(6, 95, 117, 0.16);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--transition-spring);
}

.pack:hover        { border-color: var(--brand-primary); transform: translateY(-1px); }
.pack:active       { transform: translateY(0); }
.pack:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.pack.is-selected {
  border-color: var(--brand-dark);
  background: rgba(14, 164, 207, 0.06);
  box-shadow: inset 3px 0 0 var(--brand-primary);
}

.pack__dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid rgba(6, 95, 117, 0.4);
  position: relative;
  transition: border-color 0.2s ease;
}
.pack.is-selected .pack__dot { border-color: var(--brand-dark); }
.pack.is-selected .pack__dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--brand-dark);
}

.pack__nombre {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-on-light);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pack__unidades {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0;
  color: var(--text-muted);
}

.pack__precio {
  grid-column: 3;
  justify-self: end;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
  white-space: nowrap;
}

.pack__ahorro {
  grid-column: 4;
  justify-self: end;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--brand-primary);
  padding: 3px 7px;
  border-radius: 3px;
  white-space: nowrap;
}

/* Va montado sobre el borde de la fila, como una pestaña, en vez de ocupar
   un renglón propio arriba del nombre: así marca el pack recomendado sin
   sumarle 28px de alto a la ficha, que es lo que hacía que la tienda no
   entrara en una pantalla. */
.pack__destacado {
  position: absolute;
  top: -0.55rem;
  left: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: #DCEEF2;
  padding: 2px 8px;
  border-radius: 3px;
}

.pack__regalos {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.pack__regalo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--brand-mid);
  background: var(--bg-light);
  border-radius: 2rem;
  padding: 0.2rem 0.6rem 0.2rem 0.45rem;
}

.pack__regalo svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* El control de cantidad ocupa el lugar del precio y del descuento. */
.pack__cantidad {
  grid-column: 3 / -1;
  justify-self: end;
}

/* ── Precio y compra ─────────────────────────────────────────────────── */
.ficha-compra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(6, 95, 117, 0.12);
}

.ficha-precio {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.ficha-precio__total {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  letter-spacing: -0.02em;
  color: var(--brand-dark);
}

.ficha-precio__unidad {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ficha-compra .product-add-btn {
  padding: 0.8rem 2rem;
  font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
  .pack { transition: border-color 0.2s ease, background 0.2s ease; }
  .pack:hover { transform: none; }
}

/* ── Cómo tomarlo, al pie de la columna de compra ─────────────────────
   Es información de apoyo, no un cuarto paso de la decisión: por eso va
   separada por una línea, en cuerpo chico y con el número tenue. El 01/02/03
   se justifica porque acá el orden sí importa —primero se abre, después se
   diluye— y no es una numeración decorativa. */
/* Sin `margin-top: auto`: ese lugar ya lo ocupa .ficha-compra, y si los dos
   lo piden el espacio sobrante se reparte entre ambos y la tira queda
   descolgada del bloque de compra al que pertenece. */
.ficha-uso {
  padding-top: 0.7rem;
  border-top: 1px solid rgba(41, 119, 134, 0.16);
}

.ficha-uso__titulo {
  display: block;
  font-family: var(--font-body);
  font-size: var(--section-label-size);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-mid);
  margin-bottom: 0.4rem;
}

/* Flex y no grid: con tres columnas iguales el paso del medio —el único con
   una cifra adentro— se partía en dos renglones mientras a los costados
   sobraba lugar. Así cada paso ocupa lo que mide y el sobrante se reparte. */
.ficha-uso__pasos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}

.ficha-uso__pasos li {
  flex: 0 1 auto;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.ficha-uso__n {
  flex: none;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  color: var(--brand-light);
}

/* =====================================================================
   006 / MERCHANDISING — el resto de los productos

   Acá todavía no se puede comprar nada: no hay fotos, no hay precios y
   estos productos no existen en la base. La sección está para que se vea
   DÓNDE va a ir el merchandising, así que no simula una tienda — no lleva
   precio ni botón, y cada pieza dice en qué estado está. Cuando lleguen
   las fotos se cambia el src; el precio y el botón salen de store.js.
   ===================================================================== */
.merch {
  position: relative;
  z-index: 10;
  padding: clamp(3rem, 6vh, 5rem) 0;
}

.merch-header {
  margin-bottom: clamp(1.75rem, 3.5vh, 2.75rem);
}

.merch-sub { max-width: 54ch; }

.merch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

.merch-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

/* El marcador de foto pendiente ya trae su propio fondo con el cordón de
   montañas, así que el recuadro no pone ninguno: solo lo recorta. */
/* El degradé del marcador es casi el color de la página, así que sin una
   línea de borde las tres piezas se desdibujaban contra el paisaje y no se
   leían como objetos apoyados sobre la página. */
.merch-foto {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(6, 95, 117, 0.1);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 2px 12px rgba(6, 95, 117, 0.06),
    0 1px 3px rgba(6, 95, 117, 0.04);
}

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

/* Bajada y variantes: los datos que ahora trae cada pieza del catálogo. Las
   opciones se muestran como fichitas, igual que los talles de cualquier
   tienda de ropa. Es solo lectura hasta que se pueda comprar. */
.merch-bajada {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.merch-variante {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.merch-variante__etiqueta {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-mid);
}

.merch-variante__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  list-style: none;
}

.merch-variante__opciones li {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-on-light);
  border: 1px solid rgba(6, 95, 117, 0.2);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
}

.merch-nombre {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-on-light);
}

.merch-estado {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-mid);
  background: rgba(14, 164, 207, 0.1);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

/* =====================================================================
   CARRITO — panel lateral y página
   El panel se dibuja en todas las páginas que cargan js/carrito.js; la
   página del carrito reusa las mismas líneas de producto, más grandes.
   ===================================================================== */

/* El fondo oscurecido no es decoración: es la superficie que se toca para
   cerrar, así que tiene que cubrir todo. */
.carrito-fondo {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(13, 43, 51, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.carrito-fondo.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

.carrito-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 301;
  width: min(420px, 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -18px 0 48px rgba(6, 95, 117, 0.16);
  transform: translateX(100%);
  /* `visibility` cambia de golpe, nunca de a poco: cerrado espera a que
     termine el deslizamiento para desaparecer, y abierto aparece en el acto.
     Si se la animara, en el primer cuadro el panel seguiría contando como
     oculto y rechazaría el foco del teclado. */
  visibility: hidden;
  transition:
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0s linear 0.35s;
}
.carrito-panel.is-open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0s;
}

body.carrito-abierto { overflow: hidden; }

.carrito-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(6, 95, 117, 0.12);
}

.carrito-panel__titulo {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-on-light);
}

.carrito-cerrar {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--brand-dark);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--transition-spring);
}
.carrito-cerrar:hover  { background: var(--brand-primary); color: #fff; }
.carrito-cerrar:active { transform: scale(0.92); }
.carrito-cerrar:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* La lista es lo único que scrollea: el pie con el total queda siempre a la
   vista, que es el dato por el que se abre el carrito. */
.carrito-panel__cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1.5rem;
}

.carrito-panel__pie {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(6, 95, 117, 0.12);
  background: #fff;
}

/* ── Una línea del carrito ───────────────────────────────────────────── */
.carrito-item {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(6, 95, 117, 0.1);
}
.carrito-item:last-child { border-bottom: none; }

/* `contain` y no `cover`: el sobre está recortado y es muy alto y angosto, así
   que recortarlo a un cuadrado dejaría un pedazo del medio sin producto. */
.carrito-item__foto {
  width: 68px;
  height: 68px;
  object-fit: contain;
  padding: 4px;
  border-radius: 4px;
  background: var(--bg-light);
}

.carrito-item__nombre {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-on-light);
}

.carrito-item__unitario {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.carrito-item__cantidad { width: fit-content; }

.carrito-item__derecha {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.carrito-item__precio {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
  white-space: nowrap;
}

.carrito-item__quitar {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.carrito-item__quitar:hover { color: var(--brand-primary); }
.carrito-item__quitar:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* ── Totales y acciones ──────────────────────────────────────────────── */
.carrito-subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-on-light);
}

.carrito-subtotal > :last-child {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
}

.carrito-nota {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0.35rem 0 1rem;
}

.carrito-checkout {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0;
}

.carrito-link {
  display: block;
  margin-top: 0.75rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.carrito-link:hover { color: var(--brand-primary); }
.carrito-link:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }

.carrito-vacio {
  padding: 3rem 0;
  text-align: center;
  color: var(--text-muted);
}
.carrito-vacio .cta-button { margin-top: 1.25rem; display: inline-flex; }

/* ── Página del carrito ──────────────────────────────────────────────── */
.carrito-pagina {
  min-height: 70vh;
  padding: clamp(6rem, 12vh, 9rem) 0 clamp(3rem, 6vh, 5rem);
  background: transparent;
}

.carrito-pagina__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 6vw, 5rem);
}

.carrito-pagina__top { margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }

.carrito-pagina__titulo {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--text-on-light);
  margin: 0.4rem 0 0.3rem;
}

.carrito-pagina__cuenta {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.carrito-pagina__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

/* `display: grid` le gana al `hidden` del navegador, así que hay que
   decirlo acá o la grilla vacía sigue ocupando lugar. */
.carrito-pagina__grid[hidden] { display: none; }

.carrito-pagina__lista {
  background: #fff;
  border-radius: 6px;
  padding: 0.5rem 1.5rem;
  box-shadow:
    0 2px 12px rgba(6, 95, 117, 0.06),
    0 1px 3px rgba(6, 95, 117, 0.04);
}

/* En la página hay lugar de sobra, así que la foto se ve más grande. */
.carrito-pagina__lista .carrito-item {
  grid-template-columns: 96px minmax(0, 1fr) auto;
  padding: 1.35rem 0;
}
.carrito-pagina__lista .carrito-item__foto { width: 96px; height: 96px; }
.carrito-pagina__lista .carrito-item__nombre { font-size: 1.3rem; }

.carrito-pagina__resumen {
  position: sticky;
  top: 90px;
  background: #fff;
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow:
    0 2px 12px rgba(6, 95, 117, 0.06),
    0 1px 3px rgba(6, 95, 117, 0.04);
}

.carrito-resumen__titulo {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--text-on-light);
  margin-bottom: 1rem;
}

.carrito-vacio--pagina {
  background: #fff;
  border-radius: 6px;
  padding: clamp(3rem, 8vh, 5rem) 1.5rem;
}

@media (max-width: 860px) {
  .carrito-pagina__grid { grid-template-columns: 1fr; }
  .carrito-pagina__resumen { position: static; }
}

@media (max-width: 480px) {
  .carrito-item { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 0.7rem; }
  .carrito-item__foto { width: 56px; height: 56px; }
  .carrito-pagina__lista .carrito-item { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .carrito-pagina__lista .carrito-item__foto { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .carrito-panel,
  .carrito-fondo { transition: none; }
}

/* ── Skeleton loader ─────────────────────────────────────────────────── */
.product-skeleton {
  border-radius: 6px;
  min-height: 480px;
  background: linear-gradient(
    90deg,
    rgba(6, 95, 117, 0.05) 25%,
    rgba(6, 95, 117, 0.10) 50%,
    rgba(6, 95, 117, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.store-empty {
  color: var(--text-muted);
  font-style: italic;
  padding: 2rem 0;
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
  /* En celular la ficha va a una sola columna: foto arriba, datos abajo.
     No entran dos columnas en 400px. */
  .ficha-producto {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .ficha-foto {
    min-height: 320px;
  }
  .ficha-datos {
    padding: 0 0.5rem 0.5rem;
  }
  /* En 400px el nombre del pack se parte en dos líneas antes que achicar
     el precio, que es lo que la persona vino a comparar. */
  .pack {
    grid-template-columns: auto minmax(0, 1fr) auto 2.6rem;
    gap: 0.15rem 0.6rem;
    padding: 0.7rem 0.8rem;
  }
  .pack__nombre  { font-size: 1.1rem; }
  .pack__precio  { font-size: 1.05rem; }
  .ficha-compra {
    justify-content: flex-start;
  }
  .store-checkout-cta {
    flex-direction: column;
    text-align: center;
  }
}

/* =====================================================================
   EXTENDED COMPONENTS — Trust bar, Sections 009-012, PDP, Nosotros
   ===================================================================== */

/* ── Trust bar ────────────────────────────────────────────────────────── */
.trust-bar {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 99;
  /* Translúcida y aclarada: antes era el cyan pleno y pesaba como una segunda
     barra de menú. El desenfoque de atrás es lo que la mantiene legible sobre
     cualquier cosa que pase por debajo. */
  background: rgba(14, 164, 207, 0.72);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
  pointer-events: none;
}
.trust-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ── Desktop: centered static flex ──────────────────────────────────── */
.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0.5rem 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.trust-bar-inner::-webkit-scrollbar { display: none; }
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  padding: 0 1rem;
  flex-shrink: 0;
}
.trust-icon {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.8);
}
.trust-text {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.trust-divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.3);
  flex-shrink: 0;
}

/* ── Mobile: CSS auto-scroll ticker ─────────────────────────────────── */
/*
   Approach: overflow: hidden on the trust bar itself (not body/html) clips
   content cleanly. A CSS @keyframes animation on .trust-bar-inner scrolls
   items via transform: translateX — no overflow-x scrolling dependency.
   JS duplicates the item list once so the loop is seamless at -50%.
*/
@media (max-width: 768px) {
  .trust-bar {
    overflow: hidden; /* clips ticker to bar width — self-contained, no body dep */
  }

  /* Edge fade-out for a polished tape-reader look */
  .trust-bar::before,
  .trust-bar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2.5rem;
    z-index: 1;
    pointer-events: none;
  }
  .trust-bar::before {
    left: 0;
    background: linear-gradient(to right, var(--brand-primary) 20%, transparent);
  }
  .trust-bar::after {
    right: 0;
    background: linear-gradient(to left, var(--brand-primary) 20%, transparent);
  }

  .trust-bar-inner {
    /* Override desktop centered layout */
    display: inline-flex;   /* shrink-wraps to content width */
    justify-content: flex-start;
    width: max-content;
    padding: 0.5rem 0;
    overflow: visible;      /* inner doesn't clip — bar does */
    animation: trust-ticker 22s linear infinite;
    will-change: transform;
  }

  /* Pause on touch so user can read if needed */
  .trust-bar-inner:active { animation-play-state: paused; }

  /* Items slightly larger on mobile for readability */
  .trust-text { font-size: 0.75rem; }
  .trust-item  { padding: 0 1.2rem; }
}

@keyframes trust-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* -50% = one full set; JS doubled the content */
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .trust-bar-inner { animation: none !important; overflow-x: auto; }
}

/* ── Section layout utilities ────────────────────────────────────────── */
.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.section-container--narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.section-heading-static {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: inherit;
  margin-bottom: 1rem;
}
.section-body-static {
  font-family: var(--font-body);
  font-size: var(--body-text-size);
  line-height: 1.7;
  color: inherit;
  opacity: 0.85;
}
.section-header-center {
  text-align: center;
  margin-bottom: 3.5rem;
}
.nav-link--active {
  color: var(--brand-primary) !important;
}

/* ── 009 / Cómo usarlo ───────────────────────────────────────────────── */
/* Sin fondo propio: se ve el paisaje animado que atraviesa toda la página.
   Antes esta sección era una isla oscura y cortaba el recorrido en dos. */
.como-usarlo {
  background: transparent;
  color: var(--text-on-light);
  padding: clamp(3rem, 6vh, 4.5rem) 0;
}
/* ── Los tres pasos, como las postas de un sendero ────────────────────
   Rediseñados para la página de producto, que ahora tiene el paisaje de la
   marca detrás. Antes eran tres tarjetas blancas apoyadas encima, que lo
   tapaban y no tenían nada que ver con él.
   Ahora son tres postas unidas por una huella punteada: el mismo lenguaje
   de un mapa de trekking, que es de donde viene la marca. Las tarjetas se
   van, el fondo se ve, y el orden lo cuenta el sendero y no un recuadro. */
.steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 3rem;
}

/* La huella. Va por detrás de los marcadores y arranca y termina adentro de
   las columnas de los extremos, para que no salga colgando al vacío. */
.steps-grid::before {
  content: '';
  position: absolute;
  top: 1.55rem;
  left: 16%;
  right: 16%;
  border-top: 2px dashed rgba(41, 119, 134, 0.32);
}
.step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}
/* Ya no hay tarjeta que iluminar: lo que reacciona es la foto de la posta. */
.step-card:hover .step-visual { transform: translateY(-4px); }
.step-visual { transition: transform 0.3s var(--transition-spring); }
@media (prefers-reduced-motion: reduce) {
  .step-card:hover .step-visual { transform: none; }
}
/* El marcador de la posta. Va opaco y por encima de la huella, o la línea
   punteada se le vería cruzando por adentro. */
.step-number {
  position: relative;
  z-index: 1;
  width: 3.1rem;
  height: 3.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-dark);
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 18px rgba(6, 95, 117, 0.22);
}
/* Redonda como la posta, no cuadrada: en el sendero la foto es otra parada
   más y no una tarjeta. */
.step-visual {
  width: clamp(7.5rem, 13vw, 10.5rem);
  aspect-ratio: 1;
  margin: 1.4rem 0 1.1rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(6, 95, 117, 0.14);
  background: rgba(14, 164, 207, 0.08);
}
.step-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.step-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-on-light);
}
.step-desc {
  font-size: 0.88rem;
  line-height: 1.65;
  /* .como-usarlo también va sin fondo, a propósito: las tres postas se
     apoyan sobre el paisaje. O sea que su texto necesita lo mismo que el de
     la animación, no el velo de las secciones con fondo. */
  color: var(--text-muted);
  text-shadow: var(--halo-paisaje);
}
.steps-cta {
  text-align: center;
  margin-top: 3rem;
}
.steps-tip {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-shadow: var(--halo-paisaje);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 1rem;
}

/* ── 010 / Transparencia / Ingredientes ─────────────────────────────── */
/* ── Fórmula, adentro de la noche ────────────────────────────────────
   El azul de acá NO es una capa propia de la sección: es el mismo paisaje de
   noche que tiene el contador, que ahora dura hasta el final de la 004. Lo
   extiende app.js. Pedido de Franco el 2026-08-31, y es la idea original —
   antes se había probado una placa azul sólo para esta sección y se veía
   como una banda pegada encima del día.

   Lo que sí queda es el PISO, y no es lo mismo que una capa de color: es
   exactamente lo que ya tiene el contador y por el mismo motivo. El paisaje
   de noche deja el texto claro entre 4,2:1 y 9,4:1 contra los cerros, pero
   las manchas de NIEVE siguen en #CDEDF6 —casi blancas, porque una montaña
   nevada sin nieve no se lee como montaña— y caen justo detrás del listado:
   ahí el texto claro mide 1,12:1, o sea invisible. Bajar la nieve en la
   paleta no es salida: para que el texto llegue al mínimo habría que dejarla
   del mismo tono que la roca. Con la noche puesta alrededor, el piso no se
   lee como una caja sino como profundidad, igual que el del contador.

   Se apaga arriba y abajo y va de lado a lado. La elipse del contador no
   sirve acá: sus radios se miden por eje, así que las ESQUINAS del contenido
   quedan mucho más lejos del centro que sus lados. Con algo centrado y
   angosto no se nota; con un listado que ocupa los 1200 del contenedor, el
   título de arriba a la izquierda se quedaba con la mitad de piso que las
   cantidades del medio. En un solo eje, todo el ancho recibe lo mismo.

   El apagado mide el 8% del alto, menos que el padding de la sección, así que
   el degradé termina antes de que empiece el texto.

   Todo lo de noche cuelga de .es-noche, que app.js pone en <html>. Sin eso,
   producto.html —que tiene la misma sección y NO tiene noche— quedaría con
   texto claro sobre el paisaje claro. */
.transparencia {
  position: relative;
  z-index: 10;
  background: transparent;
  color: var(--text-on-light);
  padding: clamp(3rem, 6vh, 4.5rem) 0;

  /* El aire entre la 004 y la 005, y es LOAD-BEARING: no es una decisión de
     maqueta sino el lugar donde amanece.

     El fondo de noche es uno solo para toda la ventana, así que no puede
     estar oscuro para Fórmula y claro para la tienda al mismo tiempo. Como
     Fórmula mide 776 y la ventana 900, sin este aire las dos comparten
     pantalla y el amanecer le agarra a la tienda su texto oscuro sobre el
     fondo todavía oscuro — medido cuando pasó: 2,02:1.

     El 108vh no es un número redondo elegido a ojo: la noche se apaga cuando
     el borde de abajo de Fórmula cruza el techo de la ventana, y en ese
     instante lo que se ve es justo este aire. Para que el rótulo de la tienda
     —que está 42px adentro de su sección— no haya asomado todavía, el aire
     tiene que medir por lo menos una ventana menos esos 42px. O sea 100vh, y
     el resto es margen.

     Medido con 78vh, que era el valor anterior: entre y=7600 y y=7733 el
     rótulo ya estaba en pantalla, abajo de todo, y todavía era de noche.
     Contraste 1,21:1. Con 108vh esa franja no existe.

     Va con max() y no con clamp(): un tope en rem lo rompería en pantallas
     altas, que es justo donde más aire hace falta. */
  margin-bottom: max(20rem, 108vh);
}

.transparencia::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;            /* adentro del contexto de la sección: debajo de su
                             texto y sin hundirse detrás del paisaje */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;   /* el mismo tiempo que el amanecer */
  /* El tono es #06475A, que es el MEDIO del degradé del cielo nocturno
     —#04303C arriba, #06475A al 55%, #0A5E74 abajo—, y no el #04303C casi
     negro que tenía antes. Franco lo llamó «el recuadro negro», y tenía
     razón: con el tono más oscuro de la escena, el piso se leía como una
     caja apoyada encima en vez de como más cielo.

     La contra de aclarar el tono es que hay que subir la opacidad para tapar
     lo mismo, así que se compensa: 0,90 en vez de 0,82. Sobre la nieve
     —#CDEDF6, el peor caso de la escena— eso deja el texto claro en 4,76:1 y
     el blanco puro en 7:1. Con 0,82 del tono anterior daba parecido; lo que
     cambia es que ahora el color de la placa es el del cielo que tiene
     alrededor y no uno más oscuro que todo lo demás. */
  background: linear-gradient(
    180deg,
    rgba(6, 71, 90, 0)    0%,
    rgba(6, 71, 90, 0.90) 8%,
    rgba(6, 71, 90, 0.90) 92%,
    rgba(6, 71, 90, 0)   100%);
}

.es-noche .transparencia::before { opacity: 1; }

.es-noche .transparencia {
  --text-on-light: #EAF6F9;
  --text-muted:    #A9CFD9;
  --brand-primary: #7FD3EE;
  --brand-dark:    #CFE9F2;
}

/* Las líneas del listado son lo único escrito a mano acá adentro: se
   dibujaron con el azul de marca a baja opacidad y sobre el piso oscuro
   desaparecen. Van con .es-noche por lo mismo que los tokens: de día, en
   producto.html, las líneas claras no se verían. */
.es-noche .transparencia .ingredientes-list { border-top-color:    rgba(234, 246, 249, 0.20); }
.es-noche .transparencia .ingrediente-item  { border-bottom-color: rgba(234, 246, 249, 0.20); }
.es-noche .transparencia .ingrediente-barra { background:          rgba(234, 246, 249, 0.16); }
/* Una columna, no dos: el cliente pidió la placa de ingredientes DEBAJO del
   título, no al costado. Antes el título quedaba pegado a la izquierda y la
   lista a la derecha, y se leía como dos cosas separadas en vez de como un
   titular y su contenido. */
.transparencia-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vh, 2.5rem);
  align-items: start;
}
.transparencia-header {
  position: static;
  max-width: 62ch;
}
.transparencia-nota {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 1.5rem;
  font-style: italic;
}
.ingredientes-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(6,95,117,0.12);
}
.ingrediente-item {
  border-bottom: 1px solid rgba(6,95,117,0.12);
}
.ingrediente-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.25rem 0;
  text-align: left;
  gap: 1rem;
}
.ingrediente-trigger:hover .ing-name { color: var(--brand-primary); }
.ingrediente-trigger:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.ing-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--text-on-light);
  transition: color 0.2s ease;
}
.ing-role {
  font-size: 0.75rem;
  /* En el tono pleno y no en el apagado. Con 12px, versalita y espaciada,
     este es el texto más chico de la sección y el apagado no le alcanza:
     adentro de Fórmula —que va oscura— #A9CFD9 se queda abajo de 4,5:1.

     Es el único de los siete que volvieron al apagado el 2026-08-31 que se
     tuvo que quedar en el pleno: los otros seis caen sobre el paisaje, que
     ahora va lavado y claro, pero este cae sobre el panel oscuro y ahí la
     cuenta es al revés. Va por variable, así que se da vuelta con el resto
     de la sección sin una regla aparte. */
  color: var(--text-on-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.ing-toggle {
  font-size: 1.2rem;
  color: var(--brand-primary);
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.ingrediente-item[data-expanded="true"] .ing-toggle {
  transform: rotate(45deg);
}
.ingrediente-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s ease;
  padding: 0;
}
.ingrediente-item[data-expanded="true"] .ingrediente-panel {
  max-height: 200px;
  padding-bottom: 1.25rem;
}
.ingrediente-panel p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ── 011 / Comunidad ─────────────────────────────────────────────────
   Carrusel horizontal con lo que se publica en Instagram. Se desplaza con el
   dedo, con el gesto lateral del trackpad, arrastrando con el mouse y con las
   flechas. El encastre (scroll-snap) hace que siempre quede una pieza
   completa a la vista y no media cortada. */
.comunidad {
  background: transparent;
  padding: 7rem 0 6rem;
}

.comunidad-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.comunidad-acciones {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.comunidad-cuenta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--brand-dark);
  transition: color 0.2s ease;
}
.comunidad-cuenta:hover { color: var(--brand-primary); }
.comunidad-cuenta:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }

.comunidad-cuenta svg,
.comunidad-pieza__marca svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.comunidad-flechas { display: flex; gap: 0.4rem; }

.comunidad-flechas button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(6, 95, 117, 0.18);
  border-radius: 50%;
  background: #fff;
  color: var(--brand-dark);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--transition-spring);
}
.comunidad-flechas button:hover  { background: var(--brand-dark); color: var(--text-on-dark); }
.comunidad-flechas button:active { transform: scale(0.94); }
.comunidad-flechas button:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.comunidad-carrusel {
  /* Ya no scrollea: la pista de adentro se mueve por transform. El overflow
     sigue siendo lo que recorta lo que sobra por los costados.
     `touch-action: pan-y` deja que el dedo siga bajando la página por
     encima del carrusel, y se queda solo con el gesto horizontal. */
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

/* La pista: todas las piezas en fila, y la copia que hace posible el giro
   sin fin. `will-change` la manda a su propia capa, así moverla no obliga a
   repintar la sección entera en cada cuadro. */
.comunidad-pista {
  display: flex;
  gap: 1rem;
  width: max-content;
  will-change: transform;
}
.comunidad-carrusel:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 4px; }
.comunidad-carrusel.arrastrando { cursor: grabbing; }

/* La copia va pegada a la primera vuelta, con la misma separación que
   hay entre las piezas: si no, el empalme se nota como un hueco. */
.comunidad-copia { display: flex; gap: 1rem; }

/* Ni la foto ni el video se pueden arrastrar como archivo: el único arrastre
   es el del carrusel. */
.comunidad-pieza img,
.comunidad-pieza video { pointer-events: none; -webkit-user-drag: none; user-select: none; }

/* ── Cada publicación: el medio y lo que dice, al lado ────────────────
   Las dos piezas del par viajan juntas por el carrusel y frenan juntas: el
   scroll-snap va en el par, no en cada mitad, o el texto quedaba cortado a
   mitad de camino de su propia foto. */
.comunidad-dupla {
  display: flex;
  gap: 1rem;
  flex: none;
  /* Los dos hijos se estiran a lo alto del más alto —el medio— y la ficha
     decide adentro cuánto ocupa de ese alto. */
  align-items: stretch;
}

.comunidad-pieza {
  position: relative;
  /* Vertical 9:16, que es como se publica en Instagram */
  flex: 0 0 clamp(190px, 20vw, 250px);
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(6, 95, 117, 0.08);
  box-shadow:
    0 14px 30px rgba(6, 95, 117, 0.14),
    0 2px 8px rgba(6, 95, 117, 0.08);
  transition: transform 0.3s var(--transition-spring), box-shadow 0.3s ease;
}

/* El botón de play dice que eso se toca. Va también sobre las fotos: hasta
   que lleguen los reels, el clic igual lleva a la publicación. */
.comunidad-pieza__play {
  /* Es un <button> de verdad, no un adorno: se dibuja solo cuando la pieza
     tiene video, y al tocarlo frena el carrusel y reproduce. */
  border: 0;
  padding: 0;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.6rem;
  height: 3.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(4, 43, 54, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: transform 0.3s var(--transition-spring), background 0.3s ease;
}

.comunidad-pieza__play svg { width: 1.5rem; height: 1.5rem; fill: #fff; }

.comunidad-pieza:hover .comunidad-pieza__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--brand-primary);
}

.comunidad-pieza__play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Mientras se mira, el botón se va: taparía justo el medio del video. Vuelve
   solo al terminar, al pausar o al salir de pantalla. */
.comunidad-pieza.esta-reproduciendo .comunidad-pieza__play {
  opacity: 0;
  pointer-events: none;
}

.comunidad-pieza__play { transition: transform 0.3s var(--transition-spring), background 0.3s ease, opacity 0.25s ease; }

/* La tarjeta con lo que dice. Oscura a propósito: es lo único de la sección
   que no es una foto, y así el carrusel alterna respiro y contenido. */
.comunidad-dicho {
  flex: 0 0 clamp(200px, 21vw, 270px);
  /* Ocupa como mucho la mitad de abajo del alto del medio que tiene al lado:
     no compite con la foto, la acompaña. */
  align-self: flex-end;
  height: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: clamp(1rem, 1.6vw, 1.4rem);
  border-radius: 12px;
  background:
    linear-gradient(160deg, #0A5468 0%, #065F75 45%, #043A48 100%);
  color: var(--text-on-dark);
  box-shadow:
    0 16px 34px rgba(4, 43, 54, 0.28),
    inset 0 1px 0 rgba(238, 247, 248, 0.08);
}

/* El cordón de la marca, dibujado adentro de la ficha. Es lo que la saca de
   "rectángulo azul con texto" y la hace pertenecer al resto de la página. */
.comunidad-dicho::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'%3E%3Cpath d='M0 78 L46 40 L78 66 L122 26 L166 64 L206 38 L258 74 L300 46 L300 120 L0 120 Z' fill='%23EEF7F8' opacity='0.07'/%3E%3Cpath d='M0 96 L58 62 L104 92 L152 58 L200 88 L252 56 L300 84 L300 120 L0 120 Z' fill='%23EEF7F8' opacity='0.05'/%3E%3C/svg%3E")
    bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.comunidad-dicho__tema,
.comunidad-dicho__frase,
.comunidad-dicho__logo { position: relative; z-index: 1; }

.comunidad-dicho__tema {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 0.6rem;
}

.comunidad-dicho__frase {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* El logo, arriba a la derecha y tenue: firma la ficha sin robarle lugar al
   texto, que ahora tiene la mitad del alto para entrar. */
.comunidad-dicho__logo {
  position: absolute;
  top: clamp(1rem, 1.6vw, 1.4rem);
  right: clamp(1rem, 1.6vw, 1.4rem);
  z-index: 1;
  opacity: 0.5;
  width: auto;
}

/* ── Seguinos, al pie de la sección ──────────────────────────────────── */
.comunidad-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1.5rem;
  margin-top: clamp(2rem, 4vh, 3rem);
  text-align: center;
}

.comunidad-cta__texto {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-on-light);
}

.comunidad-pieza picture { display: block; width: 100%; height: 100%; }

.comunidad-pieza img,
.comunidad-pieza video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.comunidad-pieza:hover { transform: translateY(-4px); }
.comunidad-pieza:hover img,
.comunidad-pieza:hover video { transform: scale(1.05); }
.comunidad-pieza:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }

/* El velo de siempre, para que las fotos no se peleen con la paleta */
.comunidad-pieza::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(6, 95, 117, 0.5), rgba(6, 95, 117, 0) 55%),
    rgba(14, 164, 207, 0.12);
  mix-blend-mode: multiply;
}

.comunidad-pieza__marca {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  z-index: 2;
  display: inline-flex;
  color: #fff;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s var(--transition-spring);
}
.comunidad-pieza:hover .comunidad-pieza__marca { opacity: 1; transform: scale(1.1); }

@media (max-width: 768px) {
  .comunidad { padding: 4.5rem 0; }
  .comunidad-flechas { display: none; }   /* con el dedo se desliza directo */
}

@media (prefers-reduced-motion: reduce) {
  .comunidad-pieza,
  .comunidad-pieza img,
  .comunidad-pieza video { transition: none; }
  .comunidad-pieza:hover { transform: none; }
  .comunidad-pieza:hover img,
  .comunidad-pieza:hover video { transform: none; }
}

/* ── 012 / FAQ ───────────────────────────────────────────────────────── */
.faq-section {
  background: transparent;
  color: var(--text-on-light);
  padding: 7rem 0;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(6,95,117,0.12);
  margin-top: 3rem;
}
.faq-item {
  border-bottom: 1px solid rgba(6,95,117,0.12);
}
.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.5rem 0;
  text-align: left;
  gap: 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-on-light);
  transition: color 0.2s ease;
}
.faq-trigger:hover { color: var(--brand-primary); }
.faq-trigger:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.faq-icon {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--brand-primary);
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.25s ease;
}
.faq-item[data-expanded="true"] .faq-icon {
  transform: rotate(45deg);
}
.faq-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s ease;
  padding: 0;
}
.faq-item[data-expanded="true"] .faq-panel {
  max-height: 400px;
  padding-bottom: 1.5rem;
}
.faq-panel p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-muted);
}
.faq-cta {
  text-align: center;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(6,95,117,0.12);
}
.faq-cta p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.faq-contact-link {
  color: var(--brand-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq-contact-link:hover { color: var(--brand-dark); }

/* ── PDP — producto.html ─────────────────────────────────────────────── */
.pdp-hero {
  background: transparent;
  padding: clamp(2.5rem, 5vh, 4rem) 0 clamp(3rem, 6vh, 4.5rem);
}
.pdp-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* Cuando el hero lleva la ficha compartida con la portada, la grilla de dos
   columnas sobra: la ficha ya se arma sola en dos columnas por dentro. */
.pdp-hero-inner--ficha {
  display: block;
}

.pdp-hero-inner--ficha .pdp-breadcrumb {
  margin-bottom: 1.25rem;
}
.pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* El sobre es alto y angosto: en un recuadro cuadrado quedaba chiquito y con
   aire de sobra a los costados. Un recuadro vertical lo muestra más grande. */
/* Alto fijo y no `aspect-ratio`: la foto del sobre es altísima (589x1600) y,
   como la imagen de adentro definía el alto del recuadro, la columna de la
   foto terminaba midiendo 1275px contra los 665 de la descripción. Con un
   alto propio, la foto queda a la altura del resto. */
.pdp-main-image {
  position: relative;
  width: 100%;
  height: clamp(340px, 52vh, 520px);
  background: radial-gradient(
    closest-side at 50% 55%,
    rgba(14, 164, 207, 0.14),
    rgba(14, 164, 207, 0.05) 55%,
    rgba(14, 164, 207, 0) 78%
  );
}
/* Igual que en la tienda: el sobre recortado se muestra entero sobre el
   fondo del recuadro, no encajado a la fuerza en un cuadrado. Va absoluta
   para que su alto natural no estire al recuadro. */
.pdp-main-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  transition: opacity 0.25s ease;
}
.pdp-thumbnails {
  display: flex;
  gap: 0.75rem;
}
/* Las miniaturas sí llevan recuadro: son botones, y el borde es lo que
   muestra cuál está elegida. */
.pdp-thumb {
  width: 74px;
  height: 92px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s var(--transition-spring);
  background: rgba(14, 164, 207, 0.07);
  flex-shrink: 0;
}
.pdp-thumb:hover { transform: translateY(-2px); }
.pdp-thumb.active { border-color: var(--brand-primary); }
.pdp-thumb:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.pdp-info { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1rem; }
.pdp-breadcrumb {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pdp-breadcrumb a { color: var(--brand-primary); }
.pdp-breadcrumb a:hover { text-decoration: underline; }
.pdp-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-on-light);
}
.pdp-stars {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.pdp-stars-icons { color: #F59E0B; letter-spacing: 0.05em; }
.pdp-stars-count { color: var(--text-muted); }
.pdp-price {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 2.5rem;
  letter-spacing: -0.03em;
  color: var(--brand-dark);
  line-height: 1;
}
.pdp-price-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}
.pdp-trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pdp-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  background: rgba(14,164,207,0.1);
  border: 1px solid rgba(14,164,207,0.2);
  border-radius: 2rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--brand-dark);
  letter-spacing: 0.04em;
}
.pdp-desc {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--text-muted);
}
.pdp-purchase {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background: rgba(6,95,117,0.04);
  border: 1px solid rgba(6,95,117,0.1);
  border-radius: 8px;
  margin-top: 0.5rem;
}
.pdp-qty-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pdp-qty-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pdp-add-btn {
  width: 100%;
  padding: 1rem;
  background: var(--brand-dark);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s var(--transition-spring);
}
.pdp-add-btn:hover { background: var(--brand-primary); transform: translateY(-1px); }
.pdp-add-btn:active { transform: translateY(0); }
.pdp-add-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
.pdp-checkout-btn {
  width: 100%;
  padding: 1rem;
  background: none;
  color: var(--brand-dark);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid var(--brand-dark);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s var(--transition-spring);
  text-align: center;
  display: block;
  text-decoration: none;
}
.pdp-checkout-btn:hover { background: var(--brand-dark); color: var(--text-on-dark); transform: translateY(-1px); }
.pdp-checkout-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
.pdp-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(6,95,117,0.1);
}
.pdp-assurance-item {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* PDP — Diferenciadores */
.pdp-diferenciadores {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: 6rem 0;
}
.dif-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.dif-card {
  padding: 2rem 1.5rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.dif-icon { font-size: 1.75rem; }
.dif-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--text-on-dark);
  line-height: 1.1;
}
.dif-text { font-size: 0.85rem; line-height: 1.65; color: rgba(238,247,248,0.7); }

/* PDP — Reviews */
.pdp-reviews {
  background: var(--bg-light);
  padding: 6rem 0;
}
.pdp-reviews-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.pdp-rating-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pdp-rating-big {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--brand-dark);
}
.pdp-rating-stars { color: #F59E0B; font-size: 1.1rem; }
.pdp-rating-count { font-size: 0.8rem; color: var(--text-muted); }
.pdp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.pdp-review-card {
  background: #fff;
  border-radius: 8px;
  padding: 1.75rem;
  border: 1px solid rgba(6,95,117,0.08);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pdp-review-stars { color: #F59E0B; font-size: 0.8rem; }
.pdp-review-text { font-size: 0.9rem; line-height: 1.7; color: var(--text-on-light); }
.pdp-review-author {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* PDP — Upsell */
.pdp-upsell {
  background: var(--bg-dark);
  padding: 6rem 0;
}
.pdp-upsell-cta {
  text-align: center;
  margin-top: 3rem;
}

/* ── Nosotros ─────────────────────────────────────────────────────────── */
.nosotros-hero {
  position: relative;
  height: 60vh;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.nosotros-hero-bg {
  position: absolute;
  inset: 0;
}
.nosotros-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nosotros-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,95,117,0.92) 0%, rgba(6,95,117,0.4) 60%, transparent 100%);
}
.nosotros-hero-content {
  position: relative;
  z-index: 2;
  padding: 3rem 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.nosotros-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}
.nosotros-story {
  background: var(--bg-light);
  padding: 7rem 0;
}
.nosotros-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.nosotros-story-img {
  border-radius: 10px;
  overflow: hidden;
  background: #e8f4f6;
  aspect-ratio: 4/5;
}
.nosotros-story-img img { width: 100%; height: 100%; object-fit: cover; }
.nosotros-story-text { display: flex; flex-direction: column; gap: 1.25rem; }
.nosotros-body {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-muted);
}
.nosotros-mision {
  background: var(--bg-dark);
  padding: 7rem 0;
  text-align: center;
}
.mision-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.mision-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text-on-dark);
}
.mision-quote::before { content: '"'; color: var(--brand-primary); }
.mision-quote::after  { content: '"'; color: var(--brand-primary); }
.nosotros-valores {
  background: var(--bg-light);
  padding: 7rem 0;
}
.valores-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.valor-card {
  padding: 2.5rem 2rem;
  border: 1px solid rgba(6,95,117,0.12);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: box-shadow 0.3s ease, transform 0.3s var(--transition-spring);
}
.valor-card:hover {
  box-shadow: 0 8px 32px rgba(6,95,117,0.08);
  transform: translateY(-3px);
}
.valor-icon { font-size: 2rem; }
.valor-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--text-on-light);
}
.valor-text { font-size: 0.88rem; line-height: 1.7; color: var(--text-muted); }
.nosotros-equipo {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: 7rem 0;
}
.equipo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 3rem;
}
.equipo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 260px;
  text-align: center;
}
.equipo-avatar {
  width: 160px;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
}
.equipo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.equipo-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--text-on-dark);
}
.equipo-role {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-primary);
}
.equipo-bio { font-size: 0.85rem; line-height: 1.65; color: rgba(238,247,248,0.7); }

/* ── Footer — full version ───────────────────────────────────────────── */
.site-footer--full {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: 0;
  display: block;
}
.site-footer--full .footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 2.5rem 3.5rem;
}
.footer-brand { display: flex; flex-direction: column; gap: 1rem; }
.footer-logo-full { height: 36px; }
.footer-tagline {
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgba(238,247,248,0.6);
  max-width: 240px;
}
.footer-nav-col { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-nav-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(238,247,248,0.5);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.footer-nav-col a {
  font-size: 0.875rem;
  color: rgba(238,247,248,0.75);
  transition: color 0.2s ease;
  display: block;
}
.footer-nav-col a:hover { color: var(--brand-primary); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.25rem 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-copy {
  font-size: 0.75rem;
  color: rgba(238,247,248,0.4);
}
.footer-legal {
  display: flex;
  gap: 1.5rem;
}
.footer-legal a {
  font-size: 0.72rem;
  color: rgba(238,247,248,0.4);
  transition: color 0.2s ease;
}
.footer-legal a:hover { color: rgba(238,247,248,0.8); }

/* ── Responsive — extended components ───────────────────────────────── */
@media (max-width: 900px) {
  .steps-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .steps-grid::before { display: none; }  /* en una columna no une nada */
  /* .transparencia-layout ya va en una sola columna en todos los anchos */
  .merch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testimonios-grid { grid-template-columns: 1fr; }
  .dif-grid { grid-template-columns: repeat(2, 1fr); }
  .pdp-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .pdp-reviews-grid { grid-template-columns: 1fr; }
  .nosotros-story-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .valores-grid { grid-template-columns: 1fr; }
  .site-footer--full .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; padding: 3rem 1.5rem 2rem; }
}
@media (max-width: 600px) {
  /* .trust-bar-inner handled by 768px ticker block */
  .merch-grid { grid-template-columns: 1fr; }
  .ficha-uso__pasos { flex-direction: column; }
  .como-usarlo, .transparencia, .merch, .testimonios, .faq-section,
  .pdp-hero, .pdp-diferenciadores, .pdp-reviews, .pdp-upsell,
  .nosotros-story, .nosotros-mision, .nosotros-valores, .nosotros-equipo { padding: 4rem 0; }
  .section-container, .section-container--narrow { padding: 0 1.25rem; }
  .dif-grid { grid-template-columns: 1fr; }
  .site-footer--full .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   BENEFICIOS — sellos debajo del hero, ya sobre blanco
   ===================================================================== */
.beneficios {
  position: relative;
  z-index: 20;
  background: #FFFFFF;
  /* El botón del hero ancla acá. Sin esto el título queda detrás del
     header fijo y la barra de sellos. */
  scroll-margin-top: 104px;
  /* Menos aire arriba: la sección arranca más pegada al hero. */
  padding: clamp(1.5rem, 3.5vw, 3rem) clamp(1.5rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem);
}

.beneficios-inner {
  max-width: 68rem;
  margin: 0 auto;
  text-align: center;
}

.beneficios-eyebrow {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 1.1rem;
}

.beneficios-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text-on-light);
  margin-bottom: 1rem;
}

.beneficios-sub {
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 34rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

/* Seis y no cinco desde el 2026-08-26, y eso simplificó el archivo en vez de
   complicarlo: con cinco, ninguna de las columnas de abajo cerraba y hacían
   falta tres nth-child para acomodar al huérfano. Seis divide exacto por tres
   y por dos, así que esos parches se fueron. */
.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  list-style: none;
}

.beneficio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.beneficio-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 0.7rem;
  fill: none;
  stroke: var(--brand-dark);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.beneficio-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-on-light);
}

.beneficio-desc {
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── El eje de la grilla ───────────────────────────────────────────── */
/* La frase de la marca entre los beneficios. Se distingue por relleno y no
   por una tarjeta: el resto de la página no tiene cajas y meter una acá
   cantaría. El disco además le da el peso que un ícono de contorno más no
   tendría. */
.beneficio--eje .beneficio-icon {
  width: 46px;
  height: 46px;
  padding: 9px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--brand-primary);
  stroke: #FFFFFF;
  /* Sombra tintada del propio color, no un gris: apoya el disco sin
     ensuciar el fondo claro. */
  box-shadow: 0 6px 18px rgba(14, 164, 207, 0.32);
}

.beneficio--eje .beneficio-title {
  font-size: 0.78rem;
  color: var(--brand-dark);
}

.beneficio--eje .beneficio-desc { color: var(--brand-dark); }

@media (max-width: 900px) {
  .beneficios-grid { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
}

@media (max-width: 560px) {
  .beneficios-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   AJUSTES DE LA DEVOLUCIÓN
   ===================================================================== */

/* La barra de sellos repite lo que muestra la sección de números.
   Se retira a partir de ahí en vez de convivir con ella. */
.trust-bar.is-muted {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}

.trust-bar {
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Contraste del menú sobre los fondos turquesa.
   Reportado por el cliente: "al ser turquesa el fondo, se pierden".
   Se le da al header una capa propia y peso a los links cuando hay
   una sección oscura detrás. */
.site-header.over-dark .nav-link,
.site-header.over-dark .nav-logo {
  color: #FFFFFF;
}

/* El logo es celeste y también se perdía sobre el fondo oscuro.
   Se intercambia por la versión blanca. */
.nav-logo { position: relative; display: inline-flex; }
.nav-logo__blanco {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.nav-logo__color { transition: opacity 0.3s ease; }

.site-header.over-dark .nav-logo__color  { opacity: 0; }
.site-header.over-dark .nav-logo__blanco { opacity: 1; }

.site-header.over-dark .nav-link::after { background: #FFFFFF; }

.site-header.over-dark .nav-link:hover,
.site-header.over-dark .nav-link:focus-visible {
  color: #FFFFFF;
  opacity: 1;
}

/* Doble clase a propósito: la regla de `.site-header.scrolled` que pinta el
   header de blanco vive más abajo en el archivo y con igual especificidad le
   ganaba a esta, dejando el logo blanco sobre fondo blanco. */
.site-header.over-dark,
.site-header.scrolled.over-dark {
  background: linear-gradient(to bottom, rgba(7, 18, 26, 0.55), rgba(7, 18, 26, 0.12));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom-color: transparent;
}

/* Respeta a quien pidió menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
  .trust-bar { transition: none; }
  .hero-cta, .hero-cta svg { transition: none; }
}

/* (Acá había un cambio de aspecto del header y la barra de sellos que
   se revirtió el 2026-08-14: se hizo por una lectura equivocada del
   pedido. El header y la barra quedan como estaban.) */

/* =====================================================================
   HERO EN CELULAR
   Lo propio del video en vertical vive en la sección HERO EN VIDEO, al
   final del archivo. Acá quedan solo los ajustes que valen para cualquier
   portada: la columna de texto a todo el ancho y los botones apilados.
   ===================================================================== */
@media (max-width: 768px) {
  .hero-text-col { max-width: 100%; }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* =====================================================================
   FÓRMULA — cantidades por ingrediente
   Los mg cuentan desde cero al entrar en pantalla y una barra se llena
   en proporción, para poder comparar de un vistazo cuánto hay de cada uno.
   ===================================================================== */
.ing-cantidad {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: auto;
  padding-left: 1.25rem;
}

.ing-mg { font-size: 1.35rem; }

/* Barra proporcional: se llena junto con el número */
.ingrediente-barra {
  height: 3px;
  background: rgba(6, 95, 117, 0.10);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 0 0.15rem;
}

.ingrediente-barra > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(to right, var(--brand-primary), var(--brand-dark));
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.ingredientes-list.contando .ingrediente-barra > span { width: var(--pct); }

/* Escalonado: cada barra arranca un poco después que la anterior */
.ingrediente-item:nth-child(1) .ingrediente-barra > span { transition-delay: 0.00s; }
.ingrediente-item:nth-child(2) .ingrediente-barra > span { transition-delay: 0.10s; }
.ingrediente-item:nth-child(3) .ingrediente-barra > span { transition-delay: 0.20s; }
.ingrediente-item:nth-child(4) .ingrediente-barra > span { transition-delay: 0.30s; }
.ingrediente-item:nth-child(5) .ingrediente-barra > span { transition-delay: 0.40s; }

@media (max-width: 768px) {
  .ing-cantidad { font-size: 0.9rem; padding-left: 0.6rem; }
  .ing-mg { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ingrediente-barra > span { transition: none; }
}

/* Viñetas de la sección 002 */
.section-puntos {
  list-style: none;
  margin-top: 1.1rem;
  display: grid;
  gap: 0.55rem;

  /* Acá vivía un óvalo claro que les hacía de piso: estas viñetas son lo más
     bajo de la columna, o sea que caían sobre la parte más oscura del
     paisaje, y eran el peor caso medido de la sección.

     Se fue el 2026-08-31 junto con el velo por sección. Ahora el paisaje va
     lavado parejo (ver --lavado-paisaje), así que abajo de la columna hay el
     mismo tono claro que arriba y no queda nada de qué despegarlas. El óvalo
     sobre un fondo ya pálido no se veía, pero seguía ahí pidiendo padding y
     un margen negativo que lo compensara.

     Si vuelve el paisaje oscuro, esto vuelve con él: un óvalo sin caja,
     `radial-gradient(closest-side at 34% 50%, ...)` corrido a la izquierda
     —que es donde están las letras en una columna alineada a la izquierda—
     con `padding-right` para darle aire y `margin-right` negativo para
     devolverle el ancho, porque sin eso «garantizada.» se cae de renglón. */
}

.section-puntos li {
  position: relative;
  padding-left: 1.1rem;
  font-size: clamp(0.85rem, 1.05vw, 0.95rem);
  line-height: 1.6;
  /* Mismo tratamiento que .section-body, por el mismo motivo: estas viñetas
     caen más abajo en la pantalla que el párrafo, o sea sobre la parte más
     oscura del paisaje, y eran el peor caso medido de toda la sección. */
  color: var(--text-muted);
  text-shadow: var(--halo-paisaje);
}

.section-puntos li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-primary);
}

/* =====================================================================
   SELLOS DE APTITUD (sección 001)
   ===================================================================== */
/* ── Sellos con ícono ─────────────────────────────────────────────────
   Pasaron de píldoras de texto a círculo + nombre debajo, que es como se
   leen estos sellos en cualquier envase. El círculo lo dibuja el SVG, no un
   `border`: así el trazo del aro y el del símbolo son el mismo grosor. */
.sellos-aptos {
  display: flex;
  flex-wrap: wrap;
  /* Son siete y no entran en una fila: se acomodan en dos, cuatro y tres.
     Forzarlos a una sola los dejaría demasiado chicos para distinguir los
     símbolos, que es justamente para lo que están. */
  gap: 0.9rem 0.55rem;
  margin-top: 1.5rem;
  list-style: none;
  /* Justo el ancho de cuatro: así la fila de arriba lo llena exacta y el
     `center` no la mueve, pero sí acomoda los tres de abajo en el medio en
     vez de dejarlos alineados uno debajo del otro. */
  max-width: calc(4 * 4.3rem + 3 * 0.55rem);
  justify-content: center;
}

.sello {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 4.3rem;
}

.sello-marca svg {
  width: 2.2rem;
  height: 2.2rem;
  fill: none;
  stroke: var(--brand-mid);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sello-nombre {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-align: center;
  /* Sobre el paisaje, como el resto de la sección 002. Son los más chicos de
     la página —9,6px— y caen a la altura del agua y del suelo, así que eran
     el peor caso que quedaba: «Vegano» medía 2,64:1. */
  color: var(--text-muted);
  text-shadow: var(--halo-paisaje);
}

/* ── Merchandising, en chico y pegado a la ficha ──────────────────────
   Es una continuación de la ficha, no otra sección: comparte su tarjeta
   blanca y solo la separa una línea. Sin bajada y sin botones — imagen y
   nombre, como las tiras de productos relacionados de cualquier tienda. */
.pdp-otros {
  margin-top: -1px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: #fff;
  border-top: 1px solid rgba(6, 95, 117, 0.12);
  border-radius: 0 0 6px 6px;
  box-shadow:
    0 2px 12px rgba(6, 95, 117, 0.06),
    0 1px 3px rgba(6, 95, 117, 0.04);
}

.pdp-otros__titulo {
  font-family: var(--font-body);
  font-size: var(--section-label-size);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-mid);
  margin-bottom: 0.9rem;
}

.pdp-otros__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: clamp(0.6rem, 1.5vw, 1rem);
  list-style: none;
}

.pdp-otro {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pdp-otro__foto {
  aspect-ratio: 1;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(6, 95, 117, 0.1);
}

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

.pdp-otro__nombre {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-on-light);
}

.pdp-otro__estado {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-mid);
}

/* ── "Cuántos por día", al pie de Cómo tomarlo ────────────────────────
   Los datos salen del FAQ del cliente. Va después de los tres pasos porque
   es la pregunta que sigue: primero cómo se prepara, después cuánto. */
.uso-dosis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 4vh, 3rem);
  padding-top: clamp(1.5rem, 3vh, 2.25rem);
  border-top: 1px solid rgba(238, 247, 248, 0.16);
}

.uso-dosis__item {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}

.uso-dosis__dato {
  flex: none;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--brand-primary);
}

.uso-dosis__texto {
  font-size: var(--body-text-size);
  line-height: 1.6;
  color: inherit;
  opacity: 0.85;
}

.uso-dosis__texto strong { font-weight: 600; opacity: 1; }

/* Acá estaban las píldoras de texto de los sellos. Ahora cada uno es un
   círculo con su símbolo (ver .sello, más arriba), así que el borde y el
   relleno de la píldora sobraban: dibujaban un segundo aro alrededor. */

/* =====================================================================
   DÓNDE ENCONTRARNOS — reemplaza el bloque grande de cierre
   ===================================================================== */
.donde {
  position: relative;
  z-index: 20;
  background: transparent;
  padding: clamp(4rem, 9vw, 7rem) 0;
  scroll-margin-top: 104px;
}

.donde-canales {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  list-style: none;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.donde-canal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  border: 1px solid rgba(6, 95, 117, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
}

.donde-canal__rotulo {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.donde-canal__valor {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--brand-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.donde-canal__valor:hover        { color: var(--brand-primary); }
.donde-canal__valor:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

.donde-nota {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-muted);
}

@media (max-width: 700px) {
  .donde-canales { grid-template-columns: 1fr; }
}



/* =====================================================================
   PIE DE PÁGINA — escena patagónica sobre fondo oscuro de marca
   Base en #065F75, el tono más profundo del manual, con la ilustración
   por encima: lo lejano se aclara por la bruma y lo cercano se oscurece
   hasta quedar en silueta. Los cordones van quietos.
   ===================================================================== */
.site-footer--full {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #297786 0%, #0A5468 42%, #065F75 72%, #043A48 100%);
  padding-top: clamp(4rem, 7vw, 6rem);
  color: #EEF7F8;
}

/* ── ⚠ PRUEBA: video de fondo del pie ─────────────────────────────────
   Las capas del pie, de abajo hacia arriba:
     0  el video y su velo
     2  el texto
   La escena patagónica dibujada que iba en el medio se sacó: era otro cordón
   de montañas encima del cordón real del video y los dos se leían como ruido.
   Está guardada entera en secciones-archivadas/pie-escena-dibujada.html.

   El video va sin `mix-blend-mode`: se lo aplanaba con `luminosity` para que
   leyera como textura, pero así casi no se percibía. Ahora se ve la toma. */
.footer-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* El velo va aparte del degradé del pie porque tiene que quedar ENCIMA del
   video: si fuera el fondo del <footer>, el video lo taparía. Es LO ÚNICO que
   sostiene el contraste del texto del pie ahora que el video se ve entero, así
   que no se puede aclarar sin volver a mirar que el pie se siga leyendo.
   Mantiene el turquesa de la marca en vez de un negro neutro. */
.footer-video-velo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(6, 62, 78, 0.66) 0%,
    rgba(5, 52, 66, 0.78) 45%,
    rgba(4, 43, 54, 0.88) 100%
  );
}

/* Quien pidió menos movimiento no ve el video: queda el póster, quieto. */
@media (prefers-reduced-motion: reduce) {
  .footer-video { display: none; }
}

.footer-escena {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 3.6rem;   /* si llega abajo, la línea divisoria corta los pinos */
  width: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.62;
}

/* Lo único que se mueve son las nubes, a 240s: se percibe recién si te
   quedás mirando. Para dejarlo totalmente quieto, borrar esta regla. */
.escena-nubes { animation: nubes-deriva 240s linear infinite; }

@keyframes nubes-deriva {
  from { transform: translateX(-3%); }
  50%  { transform: translateX(3%); }
  to   { transform: translateX(-3%); }
}

@media (prefers-reduced-motion: reduce) {
  .escena-nubes { animation: none; }
}

/* ── Contenido encima de la escena ─────────────────────────────────── */
.site-footer--full .footer-inner,
.site-footer--full .footer-bottom {
  position: relative;
  z-index: 2;
}

.site-footer--full .footer-nav-title { color: #96BEC2; }

.site-footer--full .footer-nav-col a {
  color: #EEF7F8;
  opacity: 0.82;
}

.site-footer--full .footer-nav-col a:hover,
.site-footer--full .footer-nav-col a:focus-visible {
  color: #FFFFFF;
  opacity: 1;
}

.site-footer--full .footer-tagline { color: rgba(238, 247, 248, 0.68); }
.site-footer--full .footer-copy    { color: rgba(238, 247, 248, 0.55); }
.site-footer--full .footer-legal a { color: rgba(238, 247, 248, 0.55); }
.site-footer--full .footer-legal a:hover { color: #FFFFFF; }

.site-footer--full .footer-bottom {
  border-top: 1px solid rgba(238, 247, 248, 0.16);
}

/* Sobre fondo oscuro manda el logo blanco */
.footer-logo-full {
  width: auto;
  align-self: flex-start;
  height: 44px;
  opacity: 0.95;
}

/* El logo iba a la izquierda pero el eslogan salía centrado */
.footer-brand {
  text-align: left;
  align-items: flex-start;
}

.footer-origen {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(238, 247, 248, 0.6);
}

/* En celular los enlaces se apilan y el pie queda muy alto: si la escena
   ocupa todo ese alto, el recorte la deja como una franja rara arriba. */
@media (max-width: 768px) {
  .footer-escena {
    top: auto;
    height: 180px;
    bottom: 3.2rem;
    opacity: 0.55;
  }
}

/* Cordón dentro de la sección oscura: mismos cerros, colores dados vuelta.
   Va acá adentro y no en el fondo fijo, así el fondo oscuro de la sección
   sigue tapando y no hay que sincronizar nada al entrar y salir. */
.testimonios { position: relative; overflow: hidden; }

.testimonios-sierra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  pointer-events: none;
  z-index: 0;
}

.testimonios-sierra .viento-perfil { height: 100%; }
.testimonios-sierra .viento-perfil.visible { opacity: 0.85; }

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

@media (prefers-reduced-motion: reduce) {
  .viento-perfil { transition: none; }
}

/* =====================================================================
   PAISAJE DEL FONDO
   Marca de agua detrás de toda la página posterior al hero. Los cerros
   van quietos y cambian según la sección; lo que se mueve son los
   árboles, los pastos, las nubes y las hojas.

   Regla de oro: acá solo se anima transform. Cualquier otra propiedad
   obligaría a recalcular la página en cada cuadro y competiría con el
   dibujo del sobre.
   ===================================================================== */
.viento {
  position: fixed;
  inset: 0;
  z-index: -1;            /* detrás del contenido, delante del fondo del body */
  pointer-events: none;
  overflow: hidden;
  opacity: 0;             /* lo enciende el JS al pasar el hero */
  transition: opacity 1.2s ease;
}

.viento.encendido { opacity: 1; }

/* ── Cerros ─────────────────────────────────────────────────────────── */
/* Dos capas en el mismo lugar que se cruzan por opacidad cuando cambia la
   paleta al hacerse de noche.

   El que entra subía unos píxeles mientras aparecía y el que salía se hundía.
   Eso tenía sentido cuando el cerro CAMBIABA con la sección: eran dos cerros
   distintos y el desplazamiento hacía leer el cambio como que el paisaje se
   movía, en vez de como un parpadeo.

   Ahora el cerro es siempre el mismo y lo único que cambia son los colores.
   Con el desplazamiento puesto, la montaña entera se corría en cada
   anochecer para volver exactamente al mismo lugar: movimiento que no
   significa nada. Sin él, los colores se cruzan y nada se mueve. */
.viento-perfil {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  /* Cuánto de la pantalla ocupa la escena, medido desde abajo. Es la perilla
     de qué tan presentes son los cerros en la página: subirla los agranda y
     los sube. El recuadro va con `preserveAspectRatio="none"`, así que además
     los estira a lo alto —a 68% el estiramiento es de 1,7— y eso los hace algo
     más filosos, que para un cerro no viene mal.
     Ojo con pasarse: la escena arranca en (100 − esto)% de la pantalla y por
     arriba está el header, que tiene fondo propio y taparía las cumbres. */
  height: 68%;
  opacity: 0;
  transition: opacity 1.1s ease;
}

/* Opacidad plena, de día y de noche: el color de la paleta es exactamente lo
   que se ve. Antes la capa iba al 34% y los tonos se elegían adivinando qué
   iban a dar después de multiplicarlos por el fondo. No salía: al 34% sobre un
   cielo casi blanco toda la paleta se aplastaba contra el fondo y entre la
   nieve y la roca quedaban siete puntos de luz sobre 255. Elegir el color
   final directo es más fácil de razonar y de corregir. */
.viento-perfil.visible {
  opacity: 1;
}

.viento-perfil svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Cielo ──────────────────────────────────────────────────────────── */
/* ── NOCHE ───────────────────────────────────────────────────────────
   En la sección de números la página se apaga. No es un velo por encima:
   es el cielo del propio paisaje el que se oscurece, así los cerros y los
   árboles siguen ahí —dados vuelta, claros sobre el fondo profundo— en vez
   de quedar tapados. Lo enciende app.js cuando entra esa sección. */
.viento-cielo {
  position: absolute;
  inset: 0;
  transition: opacity 1.1s ease;

  /* Los dos tonos de la nube, y son los únicos: el cuerpo casi blanco y la
     panza en un celeste bastante más saturado. Sobre un cielo de #EEF7F8 el
     blanco solo no se ve —son cinco por ciento de diferencia— y lo que dibuja
     la nube es el borde de abajo. De noche se apagan los dos, pero la nube
     sigue siendo más clara que el cielo: una nube nocturna oscura sobre cielo
     oscuro desaparece. */
  --nube-cuerpo: #FFFFFF;
  --nube-panza:  #BAD5DB;
}

.viento.noche .viento-cielo {
  --nube-cuerpo: #8FC0CE;
  --nube-panza:  #5B93A6;
}

/* La nube respira: se estira y se encoge muy de a poco, anclada abajo, en un
   ciclo largo y con pasos irregulares para que no se lea el ritmo. Va sobre el
   <svg> entero y no sobre grupos de adentro porque el relieve se dibuja bollo
   por bollo, cada uno con su sombra encimada: deformar unos bollos y otros no
   descoloca las sombras del vecino. Estirando la nube completa, las sombras se
   estiran con ella.

   Y va en el <svg> y no en el <span> que lo contiene porque a ese span el JS le
   escribe el transform del desplazamiento en cada cuadro; una animación de CSS
   sobre la misma propiedad no le ganaría. */
@keyframes nube-respira {
  0%   { transform: scale(1, 1); }
  31%  { transform: scale(1.035, 0.975); }
  58%  { transform: scale(0.985, 1.02); }
  79%  { transform: scale(1.02, 0.99); }
  100% { transform: scale(1, 1); }
}

.pieza-cielo svg { transform-origin: 50% 100%; }
.pieza-cielo.nube svg { animation: nube-respira 27s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .pieza-cielo.nube svg { animation: none; }
}

/* El cielo nocturno va en el contenedor y no en la capa de las nubes: las
   nubes llevan su propia opacidad puesta desde el JS —cada una la suya— y
   una regla sobre ellas no les gana. Bajando la capa entera se apagan las
   nubes y los pájaros juntos, y el degradé del cielo queda intacto. */
.viento { background: transparent; transition: opacity 1.2s ease; }

/* ── El cielo de noche, en su propia capa ────────────────────────────
   Acá estaba el bug del amanecer «inmediato» que marcó Franco.

   El degradé vivía en `background` de .viento y se apagaba volviendo a
   `transparent`, con `transition: background 1.2s` puesta al lado. Esa
   transición NO HACÍA NADA: CSS no sabe interpolar de un color a un degradé
   —son tipos distintos, uno es <color> y el otro <image>— así que el cambio
   era un corte seco. Lo demás sí se fundía —los cerros y las nubes tienen su
   propia transición de opacidad— y por eso el corte se notaba tanto: la
   parte más grande de la pantalla saltaba de golpe mientras el resto
   acompañaba.

   Medido antes de arreglarlo, con la página quieta y cronómetro: a los 308ms
   de apagarse la noche el cielo de arriba ya estaba en rgb(237,246,247), o
   sea de día del todo, mientras los cerros recién iban por la mitad.

   Ahora el degradé vive en su propia capa y lo que cambia es la OPACIDAD,
   que sí se interpola. Mismo dibujo, misma duración que el resto, y el
   amanecer pasa entero al mismo tiempo. */
.viento::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;            /* detrás de los cerros y las nubes, que son
                             posicionados, y delante del fondo del body */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  background: linear-gradient(180deg, #04303C 0%, #06475A 55%, #0A5E74 100%);
}

.viento.noche::before { opacity: 1; }

.viento.noche .viento-cielo { opacity: 0.3; }

/* ── Fórmula ya no va de noche ────────────────────────────────────────
   Del 2026-08-29 al 31 esta sección tuvo un velo oscuro propio y la noche
   del paisaje llegaba hasta ella. Franco lo pidió y después lo dio de baja:
   con el paisaje lavado y pálido, «Sabés exactamente qué tomás» vuelve a ir
   clara como el resto.

   Lo que había acá era: `background: rgba(4, 48, 60, 0.72)` sobre la sección
   —no sobre la ventana, que era el primer intento y fallaba porque la sección
   mide 776px contra 900 de ventana y nunca está sola en pantalla— más los
   cuatro tokens dados vuelta (--text-on-light, --text-muted, --brand-primary,
   --brand-dark) y los bordes del listado, que están escritos con el azul de
   marca a baja opacidad y sobre fondo oscuro desaparecían.

   Si alguna vez vuelve: el problema a resolver no son los cerros —quedan
   entre 4,2:1 y 9,4:1— sino la NIEVE, que sigue en #CDEDF6 porque una montaña
   nevada sin nieve no se lee como montaña. Las manchas caen justo detrás del
   listado y ahí el texto claro medía 1,12:1. Se arregla con un velo sobre la
   caja, no bajando la nieve en la paleta. */

.pieza-cielo {
  position: absolute;
  left: 0;
  display: block;
  will-change: transform;
}

.pieza-cielo svg { width: 100%; height: auto; display: block; }

/* ── Árboles y arbustos ─────────────────────────────────────────────── */
.viento-arboles { position: absolute; inset: 0; }

/* Dos piezas anidadas a propósito: la de afuera toma el empuje del
   viento (una variable que el JS escribe una vez para todo el grupo) y la
   de adentro hace el vaivén en reposo con una animación de CSS, que corre
   en el compositor y no cuesta nada por cuadro. */
.planta {
  position: absolute;
  display: block;
  transform-origin: bottom center;
  /* El empuje del viento es un SHEAR y no una rotación, y la diferencia es
     justo lo que se veía mal.

     Rotando, el pie del árbol se despega del suelo. El origen está en el
     centro de abajo de la CAJA, pero el tronco casi nunca cae en el centro
     exacto de su caja —los arrayanes salen en mata y ladeados—, así que al
     girar ese pie describe un arco y sube unos píxeles. A 9 grados y con el
     tronco 20 px corrido del centro son 3 px de levante: poco, pero el ojo
     lo lee enseguida como que el árbol flota.

     El shear no puede hacer eso: deja quieta la línea y = 0 —el suelo— y
     corre cada punto en proporción a lo alto que esté. El pie no se mueve
     nunca, el tronco se mueve poco y la copa es la que se va con el viento,
     que es como se dobla un árbol de verdad. */
  transform: skewX(calc(var(--empuje, 0) * var(--hondo, 1) * -1deg));
  /* Cada planta en su propia capa. Adentro del arrayán hay decenas de grupos
     de SVG animados, y los transform de SVG se rehacen en el hilo principal:
     sin capa propia, cada cuadro de ese vaivén obliga a redibujar la franja
     de página que la planta ocupa. Con capa, el redibujo queda encerrado en
     la planta. Medido scrolleando: 81 cuadros por segundo contra 98.
     Son ocho plantas, o sea ocho capas: barato. Adentro NO se hace lo mismo
     —ver .ar-rama—, porque ahí serían cientos. */
  will-change: transform;
}

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

.mece {
  display: block;
  height: 100%;
  transform-origin: bottom center;
  animation-name: mecerse;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform;
}

/* El vaivén en reposo también es shear y por el mismo motivo: si fuera una
   rotación, el pie del árbol iría subiendo y bajando todo el tiempo. */
@keyframes mecerse {
  from { transform: skewX(1.6deg); }
  to   { transform: skewX(-1.6deg); }
}

.mece--rapido { animation-name: mecerse-rapido; }

@keyframes mecerse-rapido {
  from { transform: skewX(5deg); }
  to   { transform: skewX(-5deg); }
}

/* ── Arrayanes ──────────────────────────────────────────────────────── */
/* El árbol no se mece como una pieza: cada rama cuelga de la anterior y se
   mece por su cuenta, más rápido y más amplio cuanto más lejos del suelo.
   Eso es lo que lo hace parecer vivo en vez de un recorte de cartón sobre
   un eje.

   El período y la amplitud los escribe el JS en cada grupo como variables,
   una sola vez al armar el árbol. Después no vuelve a tocarlo: el vaivén lo
   lleva el CSS. Con veinte o treinta grupos por árbol, escribirlos por
   cuadro desde JS no sería viable. */

/* Los pasos son irregulares a propósito, y ahí está casi todo el efecto.

   Un vaivén de dos posiciones —izquierda, derecha, izquierda— es un péndulo,
   y un péndulo se lee enseguida como un mecanismo: el ojo aprende el ritmo en
   dos ciclos y a partir de ahí lo ignora. Acá la rama sale, se pasa, vuelve
   corta, se queda un momento y recién después completa el recorrido. Nunca
   apoya dos veces en el mismo lugar, así que no hay ritmo que aprender.

   La otra mitad del truco está en el JS: los períodos de cada nivel no son
   múltiplos entre sí, así que al superponerse el movimiento tarda muchísimo
   en volver a repetirse. */
@keyframes ar-mecer {
  0%   { transform: rotate(calc(var(--amp, 1) * -1deg)); }
  16%  { transform: rotate(calc(var(--amp, 1) * 0.52deg)); }
  31%  { transform: rotate(calc(var(--amp, 1) * -0.28deg)); }
  49%  { transform: rotate(calc(var(--amp, 1) * 1deg)); }
  62%  { transform: rotate(calc(var(--amp, 1) * 0.34deg)); }
  78%  { transform: rotate(calc(var(--amp, 1) * -0.66deg)); }
  91%  { transform: rotate(calc(var(--amp, 1) * -0.42deg)); }
  100% { transform: rotate(calc(var(--amp, 1) * -1deg)); }
}

/* La hoja tiembla más rápido que la madera que la sostiene y además cede un
   poco hacia abajo: la copa tiene peso. Como el grupo de la copa vive adentro
   del de su rama, este movimiento se suma al de la rama en vez de reemplazarlo. */
@keyframes ar-temblar {
  0%   { transform: rotate(-1.5deg) translate(0, 0); }
  21%  { transform: rotate(0.9deg) translate(0.4px, 0.5px); }
  43%  { transform: rotate(-0.5deg) translate(-0.3px, 0.2px); }
  67%  { transform: rotate(1.6deg) translate(0.5px, 0.6px); }
  85%  { transform: rotate(0.2deg) translate(-0.2px, 0.3px); }
  100% { transform: rotate(-1.5deg) translate(0, 0); }
}

/* `transform-origin` va en píxeles del recuadro del SVG y lo escribe el JS:
   es el punto exacto donde esta rama se agarra de la anterior. Si pivotara en
   su centro, la rama se despegaría del tronco en cada vaivén. */
.ar-rama {
  animation: ar-mecer var(--per, 4s) ease-in-out infinite;
}

/* La copa pivota en el borde de abajo de su propia figura, que es de donde
   cuelga. `fill-box` es lo que hace que ese 50% 100% se mida contra la copa
   y no contra el recuadro del árbol entero. */
.ar-hoja {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ar-temblar var(--per, 2s) ease-in-out infinite;
}

/* Nada de `will-change` acá: son cientos de grupos y pedir una capa para cada
   uno cuesta bastante más de lo que ahorra. */
@media (prefers-reduced-motion: reduce) {
  .ar-rama, .ar-hoja { animation: none; }
}

/* ── Pastos ─────────────────────────────────────────────────────────── */
.viento-pastos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;

  /* Los dos tonos de la mata. De día van oscuros: el pasto es el plano más
     cercano de la escena y tiene que ser lo más marcado, no lo más lavado.
     De noche se dan vuelta —claros sobre el cielo apagado— igual que hacen
     los cerros. Como son variables, el cambio es una regla de CSS y no hay
     que volver a generar las matas. */
  --pasto-frente: #24545F;
  --pasto-fondo:  #366F7C;
}

.viento.noche .viento-pastos {
  --pasto-frente: #BFE4EC;
  --pasto-fondo:  #7FBACB;
}

.pasto {
  position: absolute;
  bottom: 0;
  display: block;
  transform-origin: bottom center;
  /* Shear y no rotación, por lo mismo que las plantas: el pie de la mata
     tiene que quedarse en el suelo. Acá pesaba más todavía, porque el empuje
     del pasto llega a 16 grados contra los 7 del árbol. */
  transform: skewX(calc(var(--empuje, 0) * var(--hondo, 1) * -1deg));
}

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

/* ── Hojas ──────────────────────────────────────────────────────────── */
.viento-hojas { position: absolute; inset: 0; }

/* El tamaño, el color y la opacidad los pone el JS, para que cada hoja
   sea distinta de la de al lado. */
.hoja {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  will-change: transform;
}

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

/* ── Lavado del paisaje ───────────────────────────────────────────────
   Una sola capa clara sobre el paisaje entero, y las secciones vuelven a
   ser transparentes como en la versión en línea.

   El problema que se veía como "el fondo se oscureció" es que el paisaje es
   fijo y su luminosidad cae de arriba hacia abajo —cielo casi blanco,
   después los cerros, el agua, el suelo y el pasto, que es lo más oscuro—.
   Como las secciones no ponían ningún fondo, el MISMO color de texto pasaba
   de 6,5:1 arriba de la pantalla a 1,18:1 sobre el pasto. No cambiaba el
   texto: cambiaba lo que le tocaba atrás según dónde cayera al scrollear.

   El primer arreglo fue un velo por sección (--velo-seccion). Funcionaba
   para el contraste pero tenía dos costos: el tono cambiaba según si en ese
   punto de la pantalla había sección o no —se veían los escalones— y cada
   página nueva había que acordarse de sumarla a la lista.

   Acá el aclarado va donde está el problema, que es el paisaje. Uno solo,
   parejo, y ninguna sección se entera. Es lo que pidió Franco el 2026-08-31:
   llevar el fondo al tono de https://hidrataccion-video.pages.dev/, que es
   un paisaje plano y pálido donde todo el texto se lee igual en cualquier
   punto del scroll.

   El 0,75 está medido, no elegido a ojo. Franqueando los márgenes de la
   pantalla —donde no hay texto ni producto— la versión en línea da un piso
   de luminancia (percentil 5) de 210 sobre 255. Sin lavado, esta da 120;
   con 0,70 da 204 y con 0,80 da 217. 0,75 cae justo en 210.

   Lo que se paga es lo que Franco ya le adelantó al cliente: con el rango de
   tonos comprimido se pierde detalle del dibujo. Los cerros, el lago y los
   árboles quedan como siluetas apenas insinuadas. Es el mismo trato que
   tiene la versión en línea, y es a propósito.

   Va con :not(.noche) porque de noche el paisaje ya tiene su propio fondo
   oscuro y lavarlo lo dejaría gris.

   OJO con sacar esto: para que el lavado se vea, las secciones tienen que
   estar en `transparent`. Varias traen `background: var(--bg-light)` de
   cuando no había paisaje —.lifestyle-gallery, .store-section, .faq-section,
   .donde, .pdp-hero, .carrito-pagina—, y ese fondo es OPACO. Mientras existió
   el velo por sección no se notaba: la regla del velo iba después en el
   archivo y, con la misma especificidad, ganaba. Al borrarla revivieron los
   opacos y preguntas frecuentes quedó blanco liso, sin nada de paisaje.
   Por eso ahora dicen `transparent` de frente: el fondo de la página es el
   paisaje, y una sección que quiera tapar el paisaje tiene que decirlo.
   (.beneficios sí lo dice: va en #FFFFFF a propósito.)

   La perilla: más bajo se ve más paisaje y menos contraste, más alto al
   revés. Abajo de 0,60 el texto apagado (#2A5F70) deja de tener 4,5:1 sobre
   la parte baja de la escena, que es donde caen las viñetas.

   Ojo al medir: el paisaje está VIVO —las nubes se desplazan, las hojas
   caen— y Lenis no frena dos veces en el mismo píxel, así que lo que queda
   justo en el límite cruza la línea para cualquier lado según la corrida.
   Por eso el valor elegido tiene margen y no es el mínimo exacto. */
:root { --lavado-paisaje: 0.75; }

/* El lavado se apaga por OPACIDAD y no dejando de existir, y es por lo mismo
   que el cielo de acá arriba: con `:not(.noche)` la capa desaparecía en el
   mismo cuadro en que entraba la noche, o sea otro corte seco encima del
   corte del cielo. Estando siempre puesta y cruzándose por opacidad, el
   lavado se va mientras el cielo nocturno entra, en el mismo 1,2s. */
.viento::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;              /* encima de cerros, árboles, pastos y hojas */
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.2s ease;
  background: rgba(238, 247, 248, var(--lavado-paisaje));
}

.viento.noche::after { opacity: 0; }

/* Quien pidió menos movimiento en su sistema, ve el paisaje quieto */
@media (prefers-reduced-motion: reduce) {
  .viento { opacity: 0.55; }
  .viento-perfil { transition: none; }
  .hoja, .pieza-cielo { display: none; }
  .mece { animation: none; }
}

@media (max-width: 768px) {
  .viento.encendido { opacity: 0.85; }
  .viento-pastos { height: 44px; }
}


/* =====================================================================
   WHATSAPP — botón flotante
   Va en verde de WhatsApp y no en los colores de la marca a propósito: es
   un botón de utilidad y se reconoce por el color antes que por el dibujo.
   Cambiarlo al turquesa de Hidratacción lo haría más prolijo y menos
   reconocible, que es lo contrario de lo que un botón de contacto necesita.
   ===================================================================== */
.wapp {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 120;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  box-shadow:
    0 10px 24px rgba(4, 43, 54, 0.28),
    0 2px 6px rgba(4, 43, 54, 0.18);
  transition: transform 0.25s var(--transition-spring), box-shadow 0.25s ease;
}

.wapp svg { width: 1.85rem; height: 1.85rem; fill: #fff; }

.wapp:hover  { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 30px rgba(4, 43, 54, 0.34); }
.wapp:active { transform: translateY(0) scale(0.98); }
.wapp:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .wapp, .wapp:hover, .wapp:active { transition: none; transform: none; }
}


/* =====================================================================
   LEGALES — términos, privacidad y arrepentimiento
   Texto largo y nada más: una sola columna angosta, jerarquía clara y
   ningún adorno. Lo que se resalta en amarillo son los datos que faltan.
   ===================================================================== */
.legales {
  position: relative;
  z-index: 10;
  background: transparent;
  padding: clamp(5rem, 10vh, 8rem) 0 clamp(3rem, 6vh, 5rem);
}

.legales-cabeza { margin-bottom: clamp(2rem, 4vh, 3rem); }
.legales-cabeza .section-label { display: block; margin-bottom: 0.75rem; }

.legales-indice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}

.legales-indice a {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-dark);
  border: 1px solid rgba(6, 95, 117, 0.22);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.legales-indice a:hover { background: #fff; border-color: var(--brand-primary); }
.legales-indice a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.legal-bloque { margin-bottom: clamp(2.5rem, 5vh, 4rem); scroll-margin-top: 90px; }

.legal-bloque h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-on-light);
  padding-bottom: 0.6rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(6, 95, 117, 0.16);
}

.legal-bloque h3 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-mid);
  margin: 1.5rem 0 0.5rem;
}

.legal-bloque p {
  font-size: var(--body-text-size);
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  max-width: 68ch;
}

.legal-bloque strong { color: var(--text-on-light); font-weight: 600; }
.legal-bloque a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }

/* Lo que falta completar. Amarillo de verdad: tiene que molestar hasta que
   alguien lo llene, no pasar por decorativo. */
.legal-falta {
  background: #FFE9A8;
  color: #4A3B00;
  font-weight: 600;
  padding: 0.05em 0.4em;
  border-radius: 3px;
}

.legal-nota,
.legal-aviso {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--brand-mid);
  background: rgba(14, 164, 207, 0.08);
  border-left: 3px solid var(--brand-primary);
  border-radius: 0 4px 4px 0;
  padding: 0.9rem 1.1rem;
  margin-top: 1.25rem;
  max-width: 68ch;
}


/* =====================================================================
   CONTACTO — página propia

   Tres bloques y el orden importa: primero POR DÓNDE escribirnos, después
   el formulario para los que no quieren elegir canal, y al final mayoristas,
   que es otra conversación y otra persona.

   Va sobre el paisaje lavado como el resto de las páginas sueltas: las
   superficies blancas son las tarjetas, no la sección.
   ===================================================================== */
.contacto {
  position: relative;
  z-index: 10;
  background: transparent;
  padding: clamp(5rem, 9vh, 7rem) 0 clamp(4rem, 8vh, 6rem);
}

.contacto-cabeza { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.contacto-cabeza .section-label { display: block; margin-bottom: 0.75rem; }
.contacto-bajada { margin-top: 1rem; }

/* ── Los tres canales ────────────────────────────────────────────────
   Tres columnas iguales: ninguno es «el principal», dependen de para qué.
   Cada tarjeta se levanta al pasar el mouse porque entera es una unidad de
   decisión, aunque lo que se clickea sea el enlace de adentro. */
.contacto-canales {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(3.5rem, 7vh, 5.5rem);
}

.canal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  background: #fff;
  border-radius: 6px;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  box-shadow:
    0 2px 12px rgba(6, 95, 117, 0.06),
    0 1px 3px rgba(6, 95, 117, 0.04);
  transition:
    transform 0.25s var(--transition-spring),
    box-shadow 0.25s ease;
}

.canal:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 28px rgba(6, 95, 117, 0.12),
    0 2px 6px rgba(6, 95, 117, 0.06);
}

/* El disco es el mismo recurso que las características de la botella: sobre
   blanco, un trazo de 1,5 suelto se pierde. */
.canal__marca {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: radial-gradient(
    closest-side at 50% 42%,
    rgba(14, 164, 207, 0.16),
    rgba(14, 164, 207, 0.05)
  );
  box-shadow: inset 0 0 0 1px rgba(6, 95, 117, 0.12);
  margin-bottom: 0.35rem;
}

.canal__marca svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--brand-mid);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* WhatsApp con su verde y no con el turquesa de la marca: es la misma razón
   por la que el botón flotante va en verde. Se reconoce por el color antes
   que por el dibujo. */
.canal--wapp .canal__marca {
  background: radial-gradient(closest-side at 50% 42%, rgba(37, 211, 102, 0.18), rgba(37, 211, 102, 0.06));
}
.canal--wapp .canal__marca svg { stroke: #128C4A; fill: #128C4A; }

.canal__titulo {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-on-light);
}

.canal__para {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

.canal__accion {
  margin-top: auto;
  padding-top: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-dark);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(6, 95, 117, 0.25);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.canal__accion span { display: inline-block; transition: transform 0.25s var(--transition-spring); }
.canal__accion:hover { color: var(--brand-primary); border-color: var(--brand-primary); }
.canal__accion:hover span { transform: translateX(4px); }
.canal__accion:active { transform: translateY(1px); }
.canal__accion:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; border-radius: 2px; }

.canal__dato {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0.35rem 0 0;
}

/* ── La casilla de consulta ──────────────────────────────────────────
   Dos columnas: a la izquierda por qué escribir, a la derecha los campos.
   El texto al lado y no arriba para que el formulario arranque en la misma
   línea que su explicación y no haya que scrollear para ver el primer campo. */
.contacto-consulta {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  background: #fff;
  border-radius: 6px;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  box-shadow:
    0 2px 12px rgba(6, 95, 117, 0.06),
    0 1px 3px rgba(6, 95, 117, 0.04);
  margin-bottom: clamp(3.5rem, 7vh, 5.5rem);
  scroll-margin-top: 90px;
}

.consulta-intro .section-label { display: block; margin-bottom: 0.6rem; }

.consulta-titulo {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text-on-light);
}

.consulta-bajada {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-top: 0.9rem;
}

/* El componente de campo viene de checkout.css. Acá sólo se acomoda el
   ritmo vertical, que en el checkout es más apretado porque compite con el
   resumen del pedido. */
.consulta-form .form-row { margin-bottom: 1.1rem; }

.consulta-envio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.4rem;
}

.consulta-boton { border: none; cursor: pointer; font-family: var(--font-body); }

/* El aviso ocupa lugar SIEMPRE, aunque esté vacío: si apareciera de la nada
   empujaría el botón hacia abajo justo cuando alguien acaba de apretarlo. */
.consulta-aviso {
  flex: 1 1 16rem;
  min-height: 2.6em;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.consulta-aviso.is-visible { opacity: 1; }

/* ── Mayoristas ──────────────────────────────────────────────────────
   Es la otra conversación de la página y por eso arranca con su propia
   cabecera y su propio aire. Quien busca proveedor no está buscando lo
   mismo que quien tiene una duda de un pedido. */
.mayoristas { scroll-margin-top: 90px; }

.mayoristas-cabeza { max-width: 58ch; margin-bottom: clamp(1.75rem, 3.5vh, 2.5rem); }
.mayoristas-cabeza .section-label { display: block; margin-bottom: 0.75rem; }

.mayoristas-titulo {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--text-on-light);
}

.mayoristas-bajada {
  font-family: var(--font-body);
  font-size: var(--body-text-size);
  line-height: 1.7;
  color: var(--text-muted);
  margin-top: 1rem;
}

/* La ficha del producto para quien compra para revender. Sin dibujos: son
   datos, y lo que hace falta es poder compararlos de un vistazo con lo que
   ya tiene en la góndola. */
.mayoristas-ficha {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin: 0 0 clamp(2.5rem, 5vh, 3.5rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
  border-top: 1px solid rgba(6, 95, 117, 0.14);
  border-bottom: 1px solid rgba(6, 95, 117, 0.14);
}

.mayoristas-ficha__dato {
  display: block;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-on-light);
}

.mayoristas-ficha__pie {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Los tres pasos. El número va grande y tenue: ordena sin competir con el
   título, que es lo que hay que leer. */
.mayoristas-pasos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin: 0 0 clamp(2.5rem, 5vh, 3.5rem);
  padding: 0;
}

.mayoristas-paso {
  background: #fff;
  border-radius: 6px;
  padding: clamp(1.25rem, 2.2vw, 1.6rem);
  box-shadow:
    0 2px 12px rgba(6, 95, 117, 0.06),
    0 1px 3px rgba(6, 95, 117, 0.04);
}

.mayoristas-paso__n {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--brand-primary);
  opacity: 0.55;
  margin-bottom: 0.6rem;
}

.mayoristas-paso__titulo {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-on-light);
  margin-bottom: 0.4rem;
}

.mayoristas-paso__texto {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* Lo que hay que contarnos. Va sobre un panel apenas teñido y no blanco:
   es una instrucción, no una tarjeta más de las de arriba. */
.mayoristas-checklist {
  background: rgba(238, 247, 248, 0.72);
  border: 1px solid rgba(6, 95, 117, 0.14);
  border-radius: 6px;
  padding: clamp(1.35rem, 2.6vw, 2rem);
}

.mayoristas-checklist__titulo {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-on-light);
  margin-bottom: 0.9rem;
}

.mayoristas-checklist ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem clamp(1rem, 2vw, 2rem);
  margin: 0 0 1.35rem;
  padding: 0;
}

.mayoristas-checklist li {
  position: relative;
  padding-left: 1.35rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* La tilde dibujada con dos bordes: no depende de ninguna fuente de íconos
   y hereda el color con currentColor. */
.mayoristas-checklist li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.42em;
  width: 0.4rem;
  height: 0.72rem;
  border: solid var(--brand-primary);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}

.mayoristas-cta { border: none; cursor: pointer; }

.mayoristas-nota {
  margin: clamp(1.25rem, 2.5vh, 1.75rem) 0 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 68ch;
}

/* ── Angosto ─────────────────────────────────────────────────────────
   Los tres canales y los tres pasos bajan a una columna recién en celular:
   en tablet siguen entrando de a tres porque son textos cortos. La ficha
   de cuatro sí pasa a dos antes, que es donde sus títulos —el más largo
   tiene cinco palabras— empiezan a partirse. */
@media (max-width: 900px) {
  .mayoristas-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contacto-consulta { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .contacto-canales,
  .mayoristas-pasos { grid-template-columns: 1fr; }
  .mayoristas-checklist ul { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .mayoristas-ficha { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .canal, .canal:hover { transition: none; transform: none; }
  .canal__accion span { transition: none; }
}
/* =====================================================================
   HERO EN VIDEO
   La portada es el video de montaña a pantalla completa. Esta sección va
   al final a propósito: nació como hoja aparte cargada después de
   style.css, y acá abajo conserva exactamente la misma cascada.

   Los colores del texto son los de siempre. Para que el texto oscuro se
   lea, va sobre la parte clara del cuadro —arriba a la izquierda, sobre
   el cielo y la bruma— y no sobre el bosque.
   ===================================================================== */

/* ── El contenedor ─────────────────────────────────────────────────── */
/* svh en vez de vh: en celular la barra del navegador entra y sale, y con
   vh el hero cambia de alto a mitad de scroll. */
.hero-standalone--video {
  height: 100svh;
  min-height: 34rem;
  background: #DCEAF0;
}

/* El póster de fondo evita el rectángulo vacío mientras el video decodifica,
   y es el último cuadro, así que no hay salto de encuadre al arrancar. */
.hero-video-capa {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #DCEAF0 url('../video/hero-montania-poster.webp') center / cover no-repeat;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% center;
  display: block;
}

/* ── Los dos velos ─────────────────────────────────────────────────── */
/* Arriba: bruma clara, para que el encabezado oscuro se despegue del cielo
   y no quede pisado contra la copa del árbol de la esquina derecha. */
.hero-video-bruma {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 24%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(238, 247, 248, 0.58) 0%,
    rgba(238, 247, 248, 0.44) 26%,
    rgba(238, 247, 248, 0.18) 56%,
    rgba(238, 247, 248, 0)    100%
  );
}

/* A la izquierda: el mismo recurso que usa la portada publicada, donde el
   cielo se continúa por CSS hacia la izquierda y la foto queda a la derecha.
   Acá el video se lava hacia el margen izquierdo y se recupera entero antes
   de la mitad, así el texto se apoya en claro y el filo de roca y los árboles
   quedan sin tocar.
   La fuerza sale de medir: la zona del texto tiene luminancia 0,18 en su peor
   percentil sobre los siete cuadros muestreados; con este velo sube a 0,56 y
   el negro pasa de 3,8:1 a más de 10:1. */
.hero-video-velo {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* Radial y no una banda vertical: el texto ocupa la esquina de arriba a la
     izquierda, así que el lavado se concentra ahí y suelta hacia la derecha y
     hacia abajo. Con una banda de lado a lado el bosque del pie quedaba
     empañado sin necesidad y el plano perdía la mitad. */
  background: radial-gradient(
    124% 116% at 3% 20%,
    rgba(238, 247, 248, 0.82)  0%,
    rgba(238, 247, 248, 0.68) 24%,
    rgba(238, 247, 248, 0.46) 42%,
    rgba(238, 247, 248, 0.22) 58%,
    rgba(238, 247, 248, 0.06) 70%,
    rgba(238, 247, 248, 0)    82%
  );
}

/* ── El texto ──────────────────────────────────────────────────────── */
/* Arriba a la izquierda, contra la esquina, como en la portada publicada. */
.hero-standalone--video .hero-inner {
  align-items: flex-start;
  padding-left: clamp(1.25rem, 4vw, 3.5rem);
  padding-right: clamp(1.5rem, 6vw, 5rem);
  padding-top: calc(64px + clamp(1.25rem, 5vh, 3rem));
}

.hero-standalone--video .hero-text-col {
  max-width: min(58vw, 44rem);
}

.hero-standalone--video .hero-heading {
  font-size: clamp(3.6rem, 9vw, 9rem);
  margin-bottom: 1.25rem;
}

.hero-standalone--video .hero-tagline { margin-bottom: 2rem; }

/* El botón lleva sombra propia porque acá se apoya sobre el video y no sobre
   un fondo plano; sin esto flota sin peso. */
.hero-standalone--video .hero-cta {
  box-shadow: 0 10px 28px rgba(6, 95, 117, 0.30);
}

/* ── El encabezado sobre el video ──────────────────────────────────── */
/* Los enlaces del encabezado van al 70% de opacidad, que sobre el cielo del
   video da 3,5:1 y no llega. Acá van casi enteros. La regla se apaga sola en
   cuanto aparece .scrolled, que ya pinta la barra sólida. */
/* Enteros, no al 70%: la opacidad mezcla el texto con el cielo y baja el
   contraste sin que se note en el CSS. Así lo que se mide es lo que se ve.
   La regla se apaga sola en cuanto aparece .scrolled, que pinta la barra. */
.site-header--sobre-video:not(.scrolled) .nav-link { opacity: 1; }

/* ── Reducir movimiento ────────────────────────────────────────────── */
/* Se esconde el video y queda el póster de fondo, que es la toma fija. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* ── Celular ───────────────────────────────────────────────────────── */
/* Un plano de dron 16:9 recortado a una pantalla vertical se queda con el
   26% del ancho: se pierden el filo de roca y la profundidad del valle, que
   son la toma. Así que en vertical el video no se recorta a pantalla
   completa: ocupa la parte de arriba y se disuelve en el panel claro donde va
   el texto, que es la misma estructura de la portada publicada —la foto se
   deshace en claro y entrega la página—. */
@media (max-width: 768px) {
  .hero-standalone--video {
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: #EEF7F8;
  }

  /* El video se queda con todo lo que no usa el texto, así no sobra un panel
     vacío abajo y el plano gana la mayor superficie posible. */
  .hero-video-capa {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    width: 100%;
    min-height: 42svh;
    background-position: center 38%;
  }

  /* En vertical el texto ya no está sobre el video, así que el lavado de la
     izquierda no va: el velo pasa a ser la disolución hacia el panel. */
  .hero-video-velo {
    background: linear-gradient(
      to top,
      #EEF7F8                   0%,
      rgba(238, 247, 248, 0.86) 16%,
      rgba(238, 247, 248, 0.42) 32%,
      rgba(238, 247, 248, 0)    52%
    );
  }

  .hero-video-bruma { height: 18%; }

  .hero-standalone--video .hero-inner {
    position: relative;
    height: auto;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;   /* si no, la columna se encoge al ancho del titular */
    padding: 0 clamp(1.25rem, 5vw, 3rem) clamp(2.5rem, 8vw, 3.5rem);
  }

  .hero-standalone--video .hero-text-col { max-width: 100%; width: 100%; }

  .hero-standalone--video .hero-heading {
    font-size: clamp(3.2rem, 15vw, 5rem);
  }
}


/* =====================================================================
   BOTELLA — COLORES, FICHA Y VARIANTES EN EL CARRITO
   =====================================================================
   Todo lo que trajo el paso de "la botella es un dibujo próximamente" a
   "la botella se compra, y hay que elegir de qué color".

   Tres lugares distintos piden lo mismo con tamaños distintos, así que hay
   dos selectores de color y no uno solo: el de la fila del pack, que entra
   en el hueco de una fila y va en chico, y el de la ficha de la botella,
   que es el control principal de la página y va en grande. Comparten la
   idea y no el CSS a propósito: forzar un solo bloque para los dos habría
   dejado media docena de sobrescrituras por contexto.
   ===================================================================== */

/* ── La tarjeta del catálogo, ahora enlace ───────────────────────────
   El <a> envuelve el bloque entero. Sin display:contents la tarjeta se
   rompe, porque la grilla espera a sus hijos directos. */
.merch-enlace {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.merch-item:has(.merch-enlace),
.pdp-otro:has(.merch-enlace) { cursor: pointer; }

/* El movimiento va en la foto y no en la tarjeta entera: mover la tarjeta
   corre el texto de las de al lado por el gap de la grilla. */
.merch-item:has(.merch-enlace:hover) .merch-foto,
.merch-item:has(.merch-enlace:focus-visible) .merch-foto {
  transform: translateY(-3px);
  box-shadow:
    0 10px 28px rgba(6, 95, 117, 0.16),
    0 2px 6px rgba(6, 95, 117, 0.08);
}

.merch-foto {
  transition:
    transform 0.35s var(--transition-spring),
    box-shadow 0.35s ease;
}

.merch-item:has(.merch-enlace:active) .merch-foto { transform: translateY(-1px); }

.merch-enlace:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* La foto del regalo dentro de la fila del pack. Antes era un SVG de línea;
   ahora es una foto, así que lleva recorte redondo y un borde que la separa
   del fondo claro de la fichita. */
.pack__regalo picture { display: flex; flex-shrink: 0; }

.pack__regalo img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(6, 95, 117, 0.18);
}

/* ── Selector de color dentro de la fila del pack ────────────────────
   Solo aparece en el pack elegido. Se dibuja siempre y se oculta con CSS
   en vez de montarlo y desmontarlo: así elegir un pack no redibuja la
   ficha y el color elegido no se pierde al pasar por otro pack. */
.pack__colores {
  grid-column: 2 / -1;
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px dashed rgba(6, 95, 117, 0.18);
}

.pack.is-selected .pack__colores { display: flex; }

.pack__colores-titulo {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-right: 0.15rem;
}

.pack__color {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem 0.2rem 0.3rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  background: #fff;
  border: 1px solid rgba(6, 95, 117, 0.2);
  border-radius: 2rem;
  cursor: pointer;
  transition:
    transform 0.2s var(--transition-spring),
    border-color 0.2s ease,
    color 0.2s ease;
}

.pack__color:hover        { border-color: var(--brand-primary); transform: translateY(-1px); }
.pack__color:active       { transform: translateY(0); }
.pack__color:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.pack__color.is-elegido {
  border-color: var(--brand-dark);
  color: var(--brand-dark);
  font-weight: 600;
}

.pack__color-muestra {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(6, 95, 117, 0.25);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ── Ficha de la botella ─────────────────────────────────────────────
   La foto es vertical 3:4, no el 589x1600 estirado del sobre. */
.ficha-foto--botella {
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-light);
  box-shadow:
    0 18px 44px rgba(6, 95, 117, 0.14),
    0 3px 10px rgba(6, 95, 117, 0.08);
}

.ficha-foto--botella > picture { display: block; height: 100%; }

.ficha-foto--botella > picture > .ficha-foto__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El cambio de color entra con un fundido corto. Solo opacidad: es la
     única propiedad que no obliga al navegador a rehacer el layout. */
  animation: botella-entra 0.32s ease both;
}

@keyframes botella-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.botella-colores,
.botella-cantidad { margin-top: 1.1rem; }

.botella-colores__titulo,
.botella-cantidad__titulo {
  display: block;
  font-family: var(--font-body);
  font-size: var(--section-label-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.botella-colores__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.botella-color {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem 0.45rem 0.5rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-on-light);
  background: #fff;
  border: 1px solid rgba(6, 95, 117, 0.2);
  border-radius: 3rem;
  cursor: pointer;
  transition:
    transform 0.22s var(--transition-spring),
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.botella-color:hover {
  border-color: var(--brand-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(14, 164, 207, 0.16);
}

.botella-color:active { transform: translateY(0); }

.botella-color:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}

.botella-color.is-elegido {
  border-color: var(--brand-dark);
  font-weight: 600;
  box-shadow:
    0 0 0 1px var(--brand-dark) inset,
    0 6px 18px rgba(6, 95, 117, 0.14);
}

.botella-color__muestra {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(6, 95, 117, 0.25);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18);
}

/* El aviso del precio provisorio. Discreto: informa, no alarma. */
.ficha-aviso {
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-muted);
  opacity: 0.85;
}

/* ── La variante en el carrito ───────────────────────────────────────
   Dos botellas de distinto color son dos filas iguales sin esta línea. */
.carrito-item__variante {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--brand-mid);
  margin: 0.1rem 0 0.15rem;
}

/* Ajustes de la ficha de la botella tras la primera pasada de capturas.

   La botella tiene menos controles que el sobre —dos colores y una cantidad,
   contra cinco filas de packs—, así que la columna derecha se quedaba corta
   y `.ficha-compra { margin-top: auto }` empujaba el precio al fondo dejando
   un pozo blanco en el medio. La foto es lo que define el alto de la tarjeta,
   así que se limita ahí: con la tarjeta más baja, el mismo margen automático
   deja un respiro en vez de un pozo. */
.ficha-foto--botella { max-height: 460px; }

/* En una columna flex los hijos se estiran a lo ancho. El control de cantidad
   es una pastilla, no una barra: tiene que medir lo que mide su contenido. */
.botella-cantidad .qty-control {
  align-self: flex-start;
  width: max-content;
}

/* La muestra blanca sobre fondo blanco necesita más borde que la negra para
   leerse como un círculo y no como un hueco. */
.botella-color__muestra,
.pack__color-muestra { border-color: rgba(6, 95, 117, 0.4); }

/* La foto del sobre lleva `padding: clamp(1rem, 2.5vw, 2rem)` en el propio
   <img>, y tiene razón: el sobre es un recorte sin fondo apoyado sobre un
   degradé, y sin ese aire toca los bordes del recuadro.

   La botella es lo contrario: una foto rectangular que tiene que ir a sangre.
   Con el padding heredado, `object-fit: cover` recortaba contra la caja de
   contenido —32px menos por lado— y la foto quedaba flotando adentro de un
   marco pálido. Era eso y no el <picture>, aunque lo pareciera.

   El <picture> igual toma el posicionado absoluto: la regla base se lo daba
   al <img> contando con que fuera hijo directo del recuadro, y ahora hay un
   elemento en el medio para servir AVIF con respaldo WebP. */
/* `> picture` y no `picture` a secas: la tira de miniaturas también tiene
   <picture> adentro del recuadro, y con el selector suelto heredaban el
   `position: absolute; inset: 0` de la foto grande. Cada miniatura se estiraba
   a todo el recuadro y se veía una franja de imagen en vez de una foto. */
.ficha-foto--botella > picture {
  position: absolute;
  inset: 0;
  display: block;
}

.ficha-foto--botella > picture > .ficha-foto__img {
  position: static;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
}

/* El hero de las fichas arrancaba a 45px del borde y el header mide 64: el
   breadcrumb nacía tapado. Pasaba en producto.html desde antes de la botella;
   se arregla en el lugar compartido para las dos. */
.pdp-hero { padding-top: calc(64px + 1.75rem); }

/* ── Merchandising con un solo producto ──────────────────────────────
   La grilla era `repeat(3, 1fr)` fija, de cuando había tres piezas. Con la
   remera y el gorro afuera queda una sola, y una tarjeta sola en una grilla
   de tres dejaba 1200 px vacíos a la derecha en una pantalla de 1920. No se
   leía como espacio: se leía como que algo no cargó.

   El primer intento fue achicar la columna para que la tarjeta no se
   estirara. Eso arregla la tarjeta y no la sección: el hueco seguía ahí.

   Con un solo producto el formato correcto no es catálogo sino pieza
   destacada. La cabecera pasa a la izquierda y el producto ocupa la derecha
   con la foto apaisada. La regla se dispara con `data-merch-vista`, que lo
   escribe merch.js según cuántas piezas dibujó: el día que haya dos o más,
   vuelve sola la grilla de siempre y nadie tiene que desarmar esto. */
.merch-layout:has([data-merch-vista="destacada"]) {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  /* `start` y no `center`: el título tiene que arrancar a la altura del borde
     de arriba de la foto. Centrado quedaba flotando en el medio, sin apoyarse
     en nada, y la sección perdía la línea horizontal que la ordena. */
  align-items: start;
}

/* La cabecera deja de empujar hacia abajo: en dos columnas se acomoda al
   lado del producto, no encima. */
.merch-layout:has([data-merch-vista="destacada"]) .merch-header {
  margin-bottom: 0;
}

/* Con la destacada no hay grilla que valga: es una sola pieza. */
.merch-grid[data-merch-vista="destacada"] {
  display: block;
}

.merch-item--destacada {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: stretch;
}

/* La foto apaisada: acá sobra ancho y falta alto, que es exactamente al revés
   de lo que da el 3:4 del teléfono. Por eso el recorte 3:2 (ver
   scripts/fotos-botella.mjs). */
.merch-foto--ancha {
  display: block;
  width: 100%;
  /* Proporción y NO alto fijo. Se probó fijar el alto en vh para que la
     sección entrara siempre en pantalla, y estaba mal: al fijar el alto, el
     `object-fit: cover` recortaba la foto por arriba y por abajo y le comía
     la tapa y la base a la botella. Entre ver el botón sin scrollear y ver el
     producto entero, gana el producto — es una sección cuyo trabajo es
     mostrar la botella.

     El 4:3 lo decide el recorte del archivo (ver scripts/fotos-botella.mjs),
     así que esta proporción tiene que seguir a aquella: si allá se cambia el
     encuadre, acá se cambia el número o vuelve el recorte. */
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(6, 95, 117, 0.1);
  box-shadow:
    0 18px 44px rgba(6, 95, 117, 0.15),
    0 3px 10px rgba(6, 95, 117, 0.08);
  transition: box-shadow 0.3s ease;
}

.merch-foto--ancha picture { display: block; height: 100%; }

.merch-foto--ancha img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El zoom es del contenido, no del recuadro: el recuadro se queda quieto y
     la foto crece adentro. Así no se mueve nada de lo que está alrededor. */
  transition: transform 0.5s var(--transition-spring);
}

a.merch-foto--ancha:hover img,
a.merch-foto--ancha:focus-visible img { transform: scale(1.03); }

a.merch-foto--ancha:hover {
  box-shadow:
    0 22px 54px rgba(6, 95, 117, 0.2),
    0 4px 12px rgba(6, 95, 117, 0.1);
}

a.merch-foto--ancha:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 4px;
}

.merch-destacada__datos {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.merch-item--destacada .merch-nombre {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}

.merch-item--destacada .merch-bajada {
  max-width: 46ch;
}

/* El selector de color. Cambia la foto acá mismo: ver el producto en el color
   que a uno le interesa es lo que hace que valga la pena entrar a la ficha. */
.merch-colores {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 0.15rem;
}

.merch-colores__titulo {
  font-family: var(--font-body);
  font-size: var(--section-label-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.merch-colores__lista {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.merch-color {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem 0.35rem 0.4rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-on-light);
  background: #fff;
  border: 1px solid rgba(6, 95, 117, 0.2);
  border-radius: 3rem;
  cursor: pointer;
  transition:
    transform 0.22s var(--transition-spring),
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.merch-color:hover {
  border-color: var(--brand-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(14, 164, 207, 0.16);
}

.merch-color:active { transform: translateY(0); }

.merch-color:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}

.merch-color.is-elegido {
  border-color: var(--brand-dark);
  font-weight: 600;
  box-shadow:
    0 0 0 1px var(--brand-dark) inset,
    0 5px 14px rgba(6, 95, 117, 0.13);
}

.merch-color__muestra {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(6, 95, 117, 0.4);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.merch-destacada__pie {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* La llamada tiene su propio hover y NO reacciona al de la foto. Antes la
   tarjeta entera era un solo enlace, así que pasar el mouse por la foto movía
   el botón: parecía que se animaba solo, sin que uno lo estuviera tocando. */
.merch-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.4rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-on-dark);
  background: var(--brand-dark);
  border-radius: 3rem;
  transition:
    transform 0.25s var(--transition-spring),
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.merch-cta:hover,
.merch-cta:focus-visible {
  background: var(--brand-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(14, 164, 207, 0.3);
}

.merch-cta:active { transform: translateY(0); }

.merch-cta:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 3px;
}

.merch-cta span { transition: transform 0.25s var(--transition-spring); }
.merch-cta:hover span { transform: translateX(4px); }

/* En celular las dos columnas no entran: vuelve a apilarse. */
@media (max-width: 900px) {
  .merch-layout:has([data-merch-vista="destacada"]) {
    display: block;
  }
  .merch-layout:has([data-merch-vista="destacada"]) .merch-header {
    margin-bottom: 1.75rem;
  }
}

/* Legibilidad del merchandising sobre el paisaje.

   La sección apoya el texto directamente sobre el dibujo de cerros y lago, sin
   recuadro —así está pensada toda la página—. Mientras la pieza decía
   "Próximamente" daba igual; ahora dice un precio, y un precio que no se lee
   es peor que no ponerlo.

   La solución no es meter el texto en una caja, que rompería el criterio de la
   página, sino separarlo del fondo: un halo del color de la página detrás de
   las letras y un poco más de peso. */
.merch-nombre,
.merch-bajada,
.merch-variante__etiqueta,
.merch-variante__opciones li {
  text-shadow:
    0 1px 0 rgba(238, 247, 248, 0.95),
    0 0 10px rgba(238, 247, 248, 0.85);
}

.merch-bajada {
  color: var(--text-on-light);
  font-weight: 500;
}

/* El precio pasa a ser un dato de venta, no una etiqueta de estado: va opaco
   y con el color de marca, para que se despegue del cerro que tiene detrás. */
.merch-estado {
  color: #fff;
  background: var(--brand-dark);
  box-shadow: 0 2px 10px rgba(6, 95, 117, 0.28);
}

/* ── Lo que trae la botella ──────────────────────────────────────────
   Va arriba de todo en la columna de la derecha, justo debajo del nombre.
   Ese lugar lo ocupaba una <dl> de dos filas —"Para" y "El sobre"— que
   Franco dio de baja el 2026-08-31: decía menos que esto y estaba primero.

   Estuvo un rato cruzando las dos columnas, al pie de la tarjeta. No quedó:
   lo primero que alguien lee de un producto es por qué le conviene, y ahí
   estaba último. Ahora va arriba y la compra —color, cantidad, precio— baja,
   que es el orden en que se decide.

   Dos y dos, no cuatro en fila: adentro de una columna sola, cuatro no
   entran sin que cada texto quede en una tira de 140px.

   El dibujo va adentro de un disco claro porque sobre el blanco de la
   tarjeta un trazo suelto de 1,1 se pierde; el disco le da un borde sin
   dibujar una caja. Las dos líneas de arriba y de abajo son las que tenía la
   tabla que estaba acá: separan el bloque sin encerrarlo. */
.botella-caracteristicas {
  list-style: none;
  margin: 1rem 0 0;
  padding: 1rem 0;
  border-top: 1px solid rgba(6, 95, 117, 0.12);
  border-bottom: 1px solid rgba(6, 95, 117, 0.12);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem clamp(1rem, 2vw, 1.75rem);
}

.botella-caracteristica {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.botella-caracteristica__marca {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: radial-gradient(
    closest-side at 50% 42%,
    rgba(14, 164, 207, 0.16),
    rgba(14, 164, 207, 0.05)
  );
  box-shadow: inset 0 0 0 1px rgba(6, 95, 117, 0.12);
}

/* El mismo trazo que los sellos del sobre: sin relleno, 1,1 de grosor y
   puntas redondeadas. Está repetido y no heredado porque .sello-marca vive
   en la secuencia animada y arrastra su propio tamaño. */
.botella-caracteristica__marca svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: var(--brand-mid);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.botella-caracteristica__titulo {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-on-light);
  margin-bottom: 0.2rem;
}

.botella-caracteristica__texto {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Una sola columna en pantallas angostas. El corte es 560 y no el 768 de la
   ficha: entre esos dos anchos la ficha ya está apilada, así que estas cuatro
   tienen la pantalla entera y dos siguen entrando cómodas. Abajo de 560 cada
   una quedaría en una tira de 150px con el dibujo comiéndose la mitad. */
@media (max-width: 560px) {
  .botella-caracteristicas { grid-template-columns: 1fr; }
}

/* ── Un color sin fotos todavía ──────────────────────────────────────
   La transparente entró al catálogo antes que sus fotos: Franco avisó que
   las de la botella se van a cambiar, así que apuntar a archivos que no
   existen habría dejado tres imágenes rotas.

   Va el marcador de la marca, el mismo que ya usa producto.html, y un
   renglón que dice qué está pasando. Un recuadro vacío se lee como que la
   página se rompió; esto se lee como que la foto todavía no llegó, que es la
   verdad y además es información. */
.ficha-foto__pendiente {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  padding: 1.5rem;
  text-align: center;
}

.ficha-foto__pendiente img {
  width: min(55%, 190px);
  height: auto;
}

.ficha-foto__pendiente span {
  font-family: var(--font-body);
  font-size: var(--section-label-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

/* ── Comunidad unificada dentro de Momentos ──────────────────────────
   El carrusel arranca apenas termina el video. Entre los dos había una barra
   con la cuenta de Instagram y las flechas, y se sacó: partía la sección en
   dos justo donde había que juntarla, y el enlace a Instagram ya está abajo,
   en el cierre.

   Las flechas no se extrañan: el carrusel avanza solo con un bucle de
   requestAnimationFrame y además se arrastra con el mouse o con el dedo. En
   celular ya estaban ocultas por ese mismo motivo.

   El respiro entre las piezas es corto a propósito. El video y las
   publicaciones son dos caras de lo mismo, y el sentido de haberlas unificado
   es que se lean como una sola cosa y no como dos bloques apilados. */
/* De borde a borde de la pantalla. El carrusel ya salió del
   .section-container en el HTML, así que lo único que queda por descontar es
   el padding lateral de la propia sección — el mismo valor, en negativo.

   Se hace así y no con `width: 100vw` porque 100vw incluye el ancho de la
   barra de scroll: en Windows eso son unos 15px de más y aparece un scroll
   horizontal en toda la página. Con el margen negativo el número es exacto y
   no depende del sistema. */
.lifestyle-gallery .comunidad-carrusel {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  margin-left:  calc(-1 * clamp(1.5rem, 6vw, 5rem));
  margin-right: calc(-1 * clamp(1.5rem, 6vw, 5rem));
}

/* El cierre también se acerca: estaba a la distancia que tenía cuando era el
   final de una sección propia. */
.lifestyle-gallery .comunidad-cta {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* ── La tira de tomas de la botella ──────────────────────────────────
   Mismo criterio que la del sobre: miniaturas apoyadas sobre la foto grande,
   abajo a la izquierda, sin robarle lugar a la imagen. Cambian de foto y
   siguen al color elegido — cada color tiene su propia foto de alguien
   tomando de ESA botella. */
.botella-tomas {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  display: flex;
  gap: 0.45rem;
}

.botella-toma {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  box-shadow: 0 3px 10px rgba(4, 43, 54, 0.3);
  transition:
    transform 0.22s var(--transition-spring),
    border-color 0.22s ease;
}

.botella-toma picture { display: block; height: 100%; }

.botella-toma img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
}

.botella-toma:hover        { transform: translateY(-2px); border-color: #fff; }
.botella-toma:active       { transform: translateY(0); }
.botella-toma:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.botella-toma.is-elegida {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px rgba(14, 164, 207, 0.35), 0 3px 10px rgba(4, 43, 54, 0.3);
}


/* =====================================================================
   RESPONSIVE — ZONAS TOCABLES Y LEGIBILIDAD
   =====================================================================
   Sale de auditar las seis páginas en diez tamaños con
   scripts/auditar-responsive.mjs. La buena noticia primero: no hay scroll
   horizontal en ninguna de las sesenta combinaciones, que es el error que
   de verdad arruina una página en un teléfono. Lo que faltaba era otra cosa.

   Dos bloques, con dos criterios distintos a propósito:

   1. ZONAS TOCABLES · @media (pointer: coarse)
      La consulta correcta no es el ancho sino el tipo de dedo. Una tablet de
      1024px necesita botones grandes y una notebook de 1024px no. `coarse`
      es exactamente "el que apunta acá es un dedo", sin importar el tamaño.
      El mínimo de 44x44 lo recomiendan Apple y Google por la misma razón
      física: la yema tapa unos 45px, así que abajo de eso uno le erra.

   2. LEGIBILIDAD · @media (max-width: 1024px)
      Acá sí manda el ancho. En escritorio, una etiqueta en versalitas de
      10,9px con mucho interletrado es un recurso editorial deliberado y se
      lee bien; en un teléfono es una fila de hormigas. Se sube el piso a
      12px en teléfonos y tablets y NO se toca el escritorio, que es el
      diseño ya revisado y aprobado.
   ===================================================================== */

/* ── 1. Zonas tocables ─────────────────────────────────────────────── */
@media (pointer: coarse) {

  /* El carrito medía 20x20. Es el camino de compra entero y era la zona más
     chica de todo el sitio. Se agranda la caja, no el ícono. */
  .nav-cart {
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* La chapita del contador cuelga de la esquina del ícono, no de la caja.
     Sin esto, al agrandar la caja quedaba flotando lejos, despegada. */
  .nav-cart .cart-badge {
    top: 6px;
    right: 4px;
  }

  .nav-hamburger {
    width: 44px;
    height: 44px;
  }

  /* El logo se extiende con un pseudo-elemento y no con padding: adentro
     tiene el logo blanco en `position: absolute; inset: 0`, así que agrandar
     la caja lo estiraría. Esto agranda solo lo que se toca. */
  .nav-logo::after {
    content: "";
    position: absolute;
    inset: -3px -8px;
  }

  /* Los −/+ de cantidad medían 24x24. Son los que más se tocan de la página
     y los que más molesta errarle: sumás cuando querías restar. */
  .qty-btn {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }

  .qty-control { gap: 0.15rem; padding: 0.15rem 0.35rem; }

  /* Los enlaces del pie medían 59x18: alto de una línea de texto, nada más.
     El padding vertical además los separa entre sí, que era el otro problema
     —caían tan juntos que se tocaba el de al lado—. */
  .footer-nav-col a,
  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .nav-cta,
  .mobile-menu-cta { min-height: 44px; }

  /* Los selectores de color y las fichas de pack: 38px de alto, cerca pero
     abajo del mínimo. */
  .botella-color,
  .merch-color,
  .pack__color { min-height: 44px; }

  .botella-toma,
  .ficha-toma { min-width: 44px; min-height: 44px; }

  .form-input,
  .form-select { min-height: 46px; }
}

/* ── 2. Legibilidad en teléfonos y tablets ─────────────────────────── */
@media (max-width: 1024px) {

  /* La variable de las etiquetas de sección. Cambiarla acá arregla de una
     todas las que la usan: "004 / FÓRMULA", "ELEGÍ TU PACK", "COLOR",
     "CANTIDAD" y las etiquetas de la ficha de la botella. */
  :root { --section-label-size: 0.75rem; }

  /* Los peores: 9,6px. Eran ilegibles hasta en escritorio. */
  .pack__destacado,
  .pdp-otro__estado { font-size: 0.75rem; }

  .cart-badge {
    font-size: 0.7rem;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
  }

  .pack__ahorro     { font-size: 0.75rem; }
  .pack__regalo     { font-size: 0.78rem; }
  .beneficios-eyebrow { font-size: 0.75rem; }
  .beneficio-desc   { font-size: 0.78rem; }
  .beneficio-title  { font-size: 0.8rem; }
  .trust-text       { font-size: 0.78rem; }
  .hero-cta         { font-size: 0.8rem; }
  .hero-seal        { font-size: 0.75rem; }
  .footer-nav-title { font-size: 0.78rem; }
  .footer-legal a   { font-size: 0.78rem; }
  .ficha-aviso      { font-size: 0.78rem; }
  .merch-colores__titulo { font-size: 0.75rem; }
}

/* ── Segunda pasada ────────────────────────────────────────────────────
   Los de arriba tapaban a estos: recién con el carrito y los −/+ resueltos
   aparecieron los que seguían. Varios estaban a uno o cuatro píxeles del
   mínimo, que es peor que estar lejos — pasan desapercibidos y se le erra
   igual. */
@media (pointer: coarse) {
  .product-add-btn,          /* medía 43px de alto: le faltaba UNO */
  .merch-cta,                /* 40 */
  .faq-contact-link,         /* 21 */
  .donde-canal__valor,       /* 26 */
  .legales-indice a,         /* 33 */
  .pdp-breadcrumb a {        /* 16 */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* La miga de pan es una línea de texto con dos enlaces: si se estiran a 44
     de alto quedan separados del "/" que los une. Se les da el alto por
     dentro, sin empujar la línea. */
  .pdp-breadcrumb { line-height: 1; }
  .pdp-breadcrumb a { padding-block: 0.85rem; }
}

/* ⚠ Los enlaces que van ADENTRO de un párrafo —los mailto de legales, por
   ejemplo— se quedan como están. Un enlace en medio de una oración no puede
   medir 44px de alto sin romper el interlineado del párrafo entero, y la
   propia recomendación de accesibilidad hace esa excepción para texto
   corrido. El resto de la página ya cumple. */

@media (max-width: 1024px) {
  .sello-nombre           { font-size: 0.75rem; }
  .donde-canal__rotulo    { font-size: 0.75rem; }
  .merch-estado           { font-size: 0.75rem; }
  .stat-label             { font-size: 0.78rem; }
  .gallery-caption-label  { font-size: 0.78rem; }
  .comunidad-dicho__tema  { font-size: 0.78rem; }
}

/* ── Tercera pasada: lo que quedó al fondo ──────────────────────────── */
@media (max-width: 1024px) {
  .legales-indice a { font-size: 0.8rem; }
  .carrito-nota     { font-size: 0.78rem; }
  .cart-badge       { font-size: 0.72rem; }
}

@media (pointer: coarse) {
  /* La miga de pan: el alto ya quedó en 44, faltaba el ancho. "Inicio" es
     una palabra corta y medía 39px. Se le da aire a los costados en vez de
     un ancho fijo, así sigue funcionando con cualquier texto. */
  .pdp-breadcrumb a { padding-inline: 0.2rem; }
}

/* ── Tablets: el menú de escritorio, tocado con el dedo ───────────────
   Arriba de 768px aparece la barra de navegación completa, y en una tablet
   eso se toca con el dedo igual que en el teléfono. Los enlaces medían 17px
   de alto: el alto de su propia línea de texto.

   Es el caso que justifica haber usado `pointer: coarse` en vez del ancho —
   una notebook de 1024px no necesita esto y una tablet de 1024px sí, y la
   única forma de distinguirlas es preguntar por el tipo de puntero. */
@media (pointer: coarse) {
  .nav-link,
  .mobile-menu-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Con los enlaces más altos, la fila necesita menos separación vertical
     propia o el encabezado crece de más. */
  .nav-links { align-items: center; }
}

@media (max-width: 1024px) {
  .cart-badge { font-size: 0.75rem; }
}

/* ── Los packs en pantallas muy angostas ─────────────────────────────
   La regla de 768px sigue sirviendo hasta unos 400px: ahí el nombre se parte
   en dos líneas y se acepta, porque lo que la persona vino a comparar es el
   precio y ese no se toca.

   Abajo de 400 deja de alcanzar. En un iPhone SE de 320 el nombre se partía
   en TRES líneas —"Pedidos / por / unidad"— y la chapita de "Más elegido",
   que va en posición absoluta sobre el borde de arriba, terminaba pisando el
   título. Cuatro columnas no entran en 320px y no hay ajuste de tamaños que
   lo salve.

   Se pasa a tres columnas y el descuento baja abajo del precio, sobre la
   misma columna derecha. El nombre gana el ancho que ocupaba la cuarta
   columna y vuelve a entrar en una línea. */
@media (max-width: 400px) {
  .pack {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.2rem 0.55rem;
    padding: 0.85rem 0.7rem 0.7rem;
  }

  .pack__precio { grid-column: 3; grid-row: 1; }
  .pack__ahorro { grid-column: 3; grid-row: 2; }

  /* La cantidad libre ocupaba de la tercera a la última; con tres columnas
     el rango sigue valiendo, pero necesita su propia fila para no chocar con
     el nombre partido. */
  .pack__cantidad { grid-column: 2 / -1; grid-row: 2; justify-self: start; }

  /* La chapita se apoya sobre el borde y hay que dejarle lugar arriba, o se
     superpone con el título. */
  /* 0.75rem y no menos: la regla de ≤1024px ya subió el piso a 12px, y
     bajarlo acá lo pisaba sin querer. Se achica el padding, no la letra. */
  .pack__destacado { font-size: 0.75rem; padding: 0.1rem 0.45rem; }

  .pack__nombre   { font-size: 1rem; }
  .pack__unidades { font-size: 0.75rem; }
  .pack__precio   { font-size: 1rem; }

  .pack__regalos,
  .pack__colores { grid-column: 1 / -1; }
}

/* El "Descubrí" del menú es un <a> sin `display` declarado, o sea `inline`,
   y a un elemento inline el `min-height` no le hace nada — el navegador lo
   ignora sin avisar. Por eso la primera regla no movió el aguja: hacía falta
   sacarlo de inline antes de darle alto. */
@media (pointer: coarse) {
  .nav-cta,
  .mobile-menu-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Últimos dos, que solo se veían una vez resueltos los de arriba: el botón
   de cerrar el panel del carrito —34x34, y es el único modo de salir del
   panel sin comprar— y el llamado del sobre, que se quedaba a dos píxeles. */
@media (pointer: coarse) {
  .carrito-cerrar {
    width: 44px;
    height: 44px;
  }

  .sobre-cta { min-height: 44px; }
}

/* El llamado flotante del sobre tenía 0,7rem (11,2px) desde una regla de
   768px anterior. Va después para pisarla: el piso de 12px vale también acá,
   que es un botón de compra. */
@media (max-width: 1024px) {
  .sobre-cta { font-size: 0.78rem; }
}