/* =====================================================================
   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);
}

/* ── 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;
  /* Continuación del cielo hacia la izquierda: la foto no llega a cubrir
     todo el ancho en pantallas anchas y este degradado la prolonga. */
  /* El cielo llega hasta abajo sin blanquearse: la disolución a blanco la
     hace una sola capa por encima de todo (.hero-velo). Antes cada capa
     tenía su propio desvanecido y los tres blancos se sumaban formando
     una mancha clara en el medio. */
  background: linear-gradient(
    to bottom,
    var(--cielo-medio) 0%,
    var(--cielo-bajo)  38%,
    var(--cielo-pie)   68%,
    #C9D8DF            100%
  );
}

/* Foto de fondo, anclada a la derecha para que el trekker quede en la esquina */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Alto completo y ancho automático: así entra la figura entera con la cresta
   rocosa bajo los pies, que es lo que pide la referencia. Anclada a la
   derecha para que el trekker quede en la esquina y el cielo se lleve
   la mayor parte de la pantalla. */
/* Selector acotado a la foto: si se apunta a `.hero-bg img` también alcanza
   a las sierras y las saca del flujo, dejándolas sin alto. */
.hero-foto img {
  position: absolute;
  right: -2%;   /* sangra por el borde para que no quede una franja al costado */
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: none;
  /* Dos disoluciones: el borde izquierdo se funde con el degradado del cielo
     y la base se funde con el blanco que entrega la página. */
  /* Solo se disuelve el borde izquierdo, contra el cielo. La base la
     resuelve el velo único, así el trekker se ve entero y no se corta. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 48%);
  mask-image: linear-gradient(to right, transparent 0%, #000 48%);
}

/* Sierras de fondo: la foto sola no llega a cubrir el ancho del hero
   (le faltan unos 900px de escena). Estas capas la continúan hacia la
   izquierda, muy desaturadas para que lean como cordón lejano y no
   compitan con el trekker. */
/* Cordón lejano. Va por encima de la capa que disuelve la costura, si no
   queda tapado, y se apoya en la base del hero donde nace la bruma.
   Enfriado y desaturado: a esa distancia la atmósfera lava el color. */
.hero-cordon {
  position: absolute;
  left: -3%;
  bottom: 0;
  width: 76%;
  z-index: 3;
  display: block;
  pointer-events: none;
  opacity: 0.62;
  filter: saturate(0.26) brightness(1.16) contrast(0.94) hue-rotate(-10deg);
  /* Se funde solo por arriba y por la derecha; abajo lo toma el velo. */
  -webkit-mask-image:
    linear-gradient(to right,  #000 52%, transparent 94%),
    linear-gradient(to bottom, transparent 2%, #000 34%);
  mask-image:
    linear-gradient(to right,  #000 52%, transparent 94%),
    linear-gradient(to bottom, transparent 2%, #000 34%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Velo único: es lo ÚNICO que blanquea el hero. Una sola rampa pareja de
   arriba abajo, por encima de foto y cordón, para que el degradado se lea
   natural y no como una mancha. */
.hero-velo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0)    0%,
    rgba(255, 255, 255, 0.16) 34%,
    rgba(255, 255, 255, 0.52) 62%,
    rgba(255, 255, 255, 0.88) 84%,
    #FFFFFF                   100%
  );
}

.hero-cordon img {
  position: static;
  width: 100%;
  height: auto;
  display: block;
}

/* El cielo de la foto y el degradado de CSS no son idénticos, así que
   sin esto queda una costura vertical donde arranca la imagen. Esta capa
   pinta el mismo cielo por encima y se retira hacia la derecha,
   disolviendo el empalme. */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    var(--cielo-medio) 0%,
    var(--cielo-bajo)  34%,
    var(--cielo-pie)   58%,
    #DDE7EC            72%,
    #FFFFFF            88%
  );
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 78%);
  mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 78%);
}

.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; }

.hero-heading .word--accent { color: var(--brand-primary); }

.hero-tagline {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  font-weight: 400;
  color: #14384F;
  line-height: 1.55;
  margin-bottom: 2.5rem;
}

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

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  background: var(--brand-primary);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 600;
  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.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #14384F;
}

.hero-seal svg {
  width: 1.2em;
  height: 1.2em;
  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;
  height: 460vh;
  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;
  color: var(--text-muted);
  max-width: 34ch;
  text-shadow: 0 1px 12px rgba(238, 247, 248, 0.8);
}

/* ── 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;
}

.stats-label {
  display: block;
  margin-bottom: 2rem;
  color: rgba(238, 247, 248, 0.6);
}

.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;
  color: rgba(238, 247, 248, 0.55);
  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: var(--bg-light);
  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);
  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); }

  .align-left .section-body,
  .align-right .section-body { color: rgba(238, 247, 248, 0.8); max-width: none; }

  .align-left .section-label,
  .align-right .section-label { color: var(--brand-light); }

  /* 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: var(--bg-light);
  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: var(--bg-light);
}

.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;
  color: var(--text-muted);
}
.steps-cta {
  text-align: center;
  margin-top: 3rem;
}
.steps-tip {
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 1rem;
}

/* ── 010 / Transparencia / Ingredientes ─────────────────────────────── */
.transparencia {
  background: var(--bg-light);
  color: var(--text-on-light);
  /* Más juntas que antes: en producto.html las tres secciones quedaban
     separadas por más aire del que usa la portada. */
  padding: clamp(3rem, 6vh, 4.5rem) 0;
}
/* 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;
  color: var(--text-muted);
  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: var(--bg-light);
  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: var(--bg-light);
  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);
}

.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(5, 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);
}

@media (max-width: 900px) {
  .beneficios-grid { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
  .beneficio:nth-child(4) { grid-column: 1 / 2; }
  .beneficio:nth-child(5) { grid-column: 2 / 4; }
}

@media (max-width: 560px) {
  .beneficios-grid { grid-template-columns: repeat(2, 1fr); }
  .beneficio:nth-child(4),
  .beneficio:nth-child(5) { grid-column: auto; }
  .beneficio:nth-child(5) { grid-column: 1 / -1; }
}

/* =====================================================================
   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
   En pantalla angosta la foto ya cubre todo el ancho, así que las capas
   que existen para extender la escena a lo ancho sobran y solo lavan la
   imagen: el trekker quedaba casi borrado.
   ===================================================================== */
@media (max-width: 768px) {
  /* No hay costura que disolver: la foto llega a los dos bordes */
  .hero-bg::after { display: none; }

  /* El cordón está para rellenar el vacío de la izquierda, que en celular
     no existe. Encima compite con la figura en poco espacio. */
  .hero-cordon { display: none; }

  /* El velo cubría más de media pantalla y se comía al trekker entero */
  .hero-velo {
    height: 30%;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0)    0%,
      rgba(255, 255, 255, 0.30) 42%,
      rgba(255, 255, 255, 0.86) 80%,
      #FFFFFF                   100%
    );
  }

  /* Un poco más baja para que la figura no toque el sello de arriba.
     Se difumina también por arriba: al no llegar al tope, se veía el
     canto de la foto contra el degradado del cielo. */
  .hero-bg img {
    right: -12%;
    height: 86%;
    -webkit-mask-image:
      linear-gradient(to right,  transparent 0%, #000 26%),
      linear-gradient(to bottom, transparent 0%, #000 16%);
    mask-image:
      linear-gradient(to right,  transparent 0%, #000 26%),
      linear-gradient(to bottom, transparent 0%, #000 16%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  .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;
}

.section-puntos li {
  position: relative;
  padding-left: 1.1rem;
  font-size: clamp(0.85rem, 1.05vw, 0.95rem);
  line-height: 1.6;
  color: var(--text-muted);
}

.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;
  color: var(--text-muted);
}

/* ── 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: var(--bg-light);
  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; transform: none; }
  .viento-perfil.visible { transform: 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 turnan por opacidad al cambiar de cerro */
/* El cambio de cerro no es solo un fundido: el que entra sube unos píxeles
   mientras aparece y el que sale se hunde. Con la opacidad sola el cambio se
   notaba como un parpadeo; con el desplazamiento lee como que el paisaje se
   mueve. Solo se anima transform y opacity, que resuelve el compositor. */
.viento-perfil {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 58%;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.5s ease, transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.viento-perfil.visible {
  opacity: 0.34;
  transform: translateY(0);
}

/* De noche los cerros pisan más fuerte: son lo único que se ve contra el
   cielo apagado, y al 34% se perdían. */
.viento.noche .viento-perfil.visible { opacity: 0.62; }

.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;
}

/* 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, background 1.2s ease; }

.viento.noche {
  background: linear-gradient(180deg, #04303C 0%, #06475A 55%, #0A5E74 100%);
}

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

.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;
  transform: rotate(calc(var(--empuje, 0) * var(--hondo, 1) * 1deg));
}

.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;
}

@keyframes mecerse {
  from { transform: rotate(-1.6deg); }
  to   { transform: rotate(1.6deg); }
}

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

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

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

.pasto {
  position: absolute;
  bottom: 0;
  display: block;
  transform-origin: bottom center;
  transform: rotate(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; }

/* Las secciones claras se vuelven transparentes para que el fondo se vea.
   El color de base lo sigue poniendo el body. */
.lifestyle-gallery,
.store-section,
.transparencia,
.merch,
.faq-section,
.donde,
/* Las páginas sueltas ahora también llevan el paisaje detrás, así que sus
   secciones tienen que dejarlo pasar igual que las de la portada. */
.pdp-hero,
.carrito-pagina,
.checkout-pagina,
.confirmado-pagina {
  background: transparent;
}

/* 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;
}