@font-face {
  font-display: swap;
  font-family: "super-med";
  font-style: normal;
  src: url(../fonts/super-med.woff2) format("woff2"),
       url(../fonts/super-med.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: "super-reg";
  font-style: normal;
  src: url(../fonts/super-reg.woff2) format("woff2"),
       url(../fonts/super-reg.woff) format("woff");
}

:root {
  --c-bg: #F4EBE1; /* Beige y crudo - el yute, lo artesanal */
  --c-text: #1A1A1A; /* Negro para el texto de lectura */
  --c-text-alt: #F4EBE1; /* Texto claro para fondos oscuros */
  --c-green: #2B3A2C; /* Verde oscuro - el campo, la planta */
  --c-brand: #CBA058; /* Dorado - detalles premium, logo */
  --c-dark: #121212; /* Negro puro para fondos premium */
  --c-earth: #6B4423; /* Marrones y tierras - calabaza, tierra */
  --c-accent: var(--c-brand); /* Acentos dorados */
  --c-secondary: var(--c-green);

  --font-serif: 'super-med', Helvetica, sans-serif;
  --font-sans: 'super-reg', Helvetica, sans-serif;

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --header-h: max(10rem, min(10vw, 20rem));
  
  --columns: 12;
  --width: 90vw;
  --gutter: max(2rem, min(2vw, 4rem));
  --radius: max(1.5rem, min(1.5vw, 3rem));
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  scroll-behavior: auto;
  background-color: #140C06;
}
/* .ios-spacer — CORTINA del notch (mobile only).
   MECÁNICA del bug: al scrollear, iOS Safari entra en "minimal UI" —
   la página se dibuja bajo el status bar pero el viewport de layout
   (al que se anclan los position:fixed) queda DESPLAZADO hacia abajo.
   La franja física entre el tope de pantalla y el navbar muestra el
   contenido de la página = el "hueco".

   El spacer cubre esa franja: va de -80px a +4px en coords de layout.
   · En reposo (layout top = tope físico): solo asoman 4px dark sobre
     el bg dark del navbar → invisible.
   · Scrolleado (layout corrido ~60px abajo): cubre exactamente la
     franja física 0..64 donde aparecía el hueco.
   z-index 9999 = encima de todo (config probada que "nunca se va").
   GPU-pinned con translateZ para que el compositor no lo descarte. */
.ios-spacer {
  display: none;
}
@media (max-width: 900px) {
  /* ios-spacer DESACTIVADO. El notch ahora lo cubre el PROPIO header con
     padding-top: env(safe-area-inset-top) + viewport-fit=cover (approach
     estándar, sin hacks). Era la franja fija top:-80 z-9999 que peleaba
     con el render del navbar en iOS. Ver header mobile más abajo. */
  .ios-spacer { display: none !important; }
}

body {
  font-family: var(--font-serif);
  font-size: max(2rem, min(2vw, 3rem));
  color: var(--c-text);
  /* Body bg DARK — mismo color que el navbar (#140C06). En iOS Safari
     con viewport-fit=cover, el safe-area arriba del navbar muestra el
     body bg, por eso debe coincidir con el del navbar. Idéntico approach
     a kraftpadel.com — el truco no es cubrir el notch con CSS, sino
     que el fondo del body match con el del navbar para que sea invisible.
     Las secciones cream/cuero tienen su propio background-color explícito. */
  background-color: #140C06;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: contain;
}
/* main es el contenedor por defecto del contenido cream — sin esto, los
   gaps entre secciones se verían dark. */
main {
  background-color: var(--c-bg);
}

/* ═══ FIX CRÍTICO iOS Safari: mix-blend-mode rompe position:fixed ═══
   Bug documentado de WebKit: cuando un elemento con mix-blend-mode
   (las ilustraciones multiply del origen-museo, los noise overlays de
   proceso/productos/stats/b2b/ig-gallery/footer) entra al viewport y
   su sección padre NO crea un stacking context, Safari arma el
   "blending group" contra la RAÍZ de la página. Eso obliga a aplanar
   las layers del compositor — incluyendo la del navbar fixed — que
   pierde su render: se ve transparente / desaparece media barra / el
   contenido se ve por encima. Era EXACTAMENTE lo que pasaba al salir
   del hero (ahí entran las ilustraciones multiply del origen-museo).

   isolation: isolate en cada sección contenedora limita el blend a la
   propia sección: Safari ya no toca la raíz y el navbar queda intacto.
   CERO cambio visual — los blends están diseñados para mezclar con el
   fondo de su PROPIA sección, que sigue dentro del grupo aislado. */
main,
.footer,
.origen-museo,
.proceso-3d,
.productos,
.ig-gallery,
.stats-v2,
.b2b-v2 {
  isolation: isolate;
}

/* Sin viewport-fit=cover el page NO se extiende al safe-area. iOS
   Safari usa el theme-color del meta para tintar la status bar.
   theme-color="#140C06" → status bar dark, sin overlays ni hacks. */

/* Espacio reservado — el safe-area lo gestiona el .header directamente
   con padding-top: env(safe-area-inset-top). Ver la sección del header
   más abajo. */

a {
  text-decoration: none;
  color: inherit;
}

/* ═══════════════════════════════════════════════════════════════════
   ░░░░░░░░░░░░░ PAGE CURTAIN — TRANSICIÓN ENTRE PÁGINAS ░░░░░░░░░░░░
   ═══════════════════════════════════════════════════════════════════
   Reemplaza la transición vieja (que animaba width/height del header
   logo a fullscreen — propiedades de LAYOUT, causaban stutter durante
   1.2s + 800ms de wait = ~2 segundos lentos).

   Esta versión usa SOLO opacity + transform sobre un overlay fijo:
     · GPU-only compositing (cero reflow)
     · Misma textura cuero que el logo (visual coherente)
     · Logo centrado que crece 8% durante el fade-out (efecto "zoom in")
     · Total: 550ms entrada + 320ms salida = ~870ms (vs ~4s antes)
   ─────────────────────────────────────────────────────────────────── */
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  /* Misma textura cuero que .header__logo (coherencia visual al cargar) */
  background-color: var(--c-earth);
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(255, 230, 200, 0.18), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(46, 24, 12, 0.30), transparent 65%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.28 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: cover, cover, 180px 180px;
  background-blend-mode: normal, normal, overlay;
  /* DEFAULT — al re-aparecer (click en un link) tiene que animar también.
     Ambas direcciones usan el mismo ease para que se sienta consistente. */
  transition:
    opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1),
    visibility 0s linear 0s;
  will-change: opacity;
}
/* Estado oculto — fade out completo. visibility 0s con delay para que
   no bloquee clicks una vez invisible. */
.page-curtain.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1),
    visibility 0s linear 0.5s;
}
/* Logo centrado con scale-up sutil — al fade out crece 6% generando
   sensación "zoom hacia adentro de la página". GPU-only (transform).
   Timing matchea el del curtain para que se sienta una sola pieza. */
.page-curtain__logo {
  max-width: clamp(220px, 32vw, 460px);
  max-height: clamp(140px, 20vw, 280px);
  width: auto;
  height: auto;
  object-fit: contain;
  transform: scale(1);
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}
.page-curtain.is-hidden .page-curtain__logo {
  transform: scale(1.06);
}
/* En mobile el logo se veía minúsculo (~140x140) porque max-height
   140px limitaba al cuadrado. Subimos los dos clamps para que ocupe
   ~60% del ancho del viewport, sensación pantalla de carga premium. */
@media (max-width: 720px) {
  .page-curtain__logo {
    max-width: 60vw;
    max-height: 60vw;
  }
}
@media (max-width: 380px) {
  .page-curtain__logo {
    max-width: 68vw;
    max-height: 68vw;
  }
}

/* HEADER */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--gutter);
  z-index: 100;
  background-color: transparent;
  /* Smart header transition — slide cinematográfico de 0.55s con
     curve ease-out-cubic para "deceleration" suave. */
  transition:
    background-color 0.4s var(--ease-out),
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.4s ease;
  pointer-events: none; /* Let clicks pass through transparent areas */
}
/* SMART HEADER (PC only ≥901px) — se oculta al scroll-down, vuelve
   al scroll-up. NO se oculta cuando estamos sobre un hero (los heroes
   siempre tienen header visible — el JS lo gestiona). */
.header.is-hidden {
  transform: translateY(-105%);
  opacity: 0;
  pointer-events: none !important;
}

.header__nav, .header__center {
  pointer-events: auto;
}

.header.is-scrolled {
  background-color: transparent !important;
  height: max(6rem, min(6vw, 10rem));
  color: #2A1810;
  transition: color 0.4s var(--ease-out), background-color 0.4s var(--ease-out), height 0.4s var(--ease-out);
}

.header.is-scrolled.is-dark-bg {
  color: var(--c-text-alt); /* Cream claro sobre tierra negro — máximo contraste */
}
.header.is-scrolled.is-leather-bg {
  color: #F0E2C9; /* Cream cálido sobre cuero terracotta */
}

/* Aplico color directo a los <a> con specificity alta — el inherit del
   <header> no propaga bien en algunos browsers durante transición. */
.header.is-scrolled .header__nav a {
  color: #2A1810; /* Default sobre crudo */
  transition: color 0.4s var(--ease-out);
}
/* Dark-bg y leather-bg aplican también cuando NO está scrolled, para que
   al entrar a la página (hero oscuro) el navbar ya se lea correctamente. */
.header.is-dark-bg .header__nav a {
  color: var(--c-text-alt); /* Cream claro #F4EBE1 — alto contraste sobre fondo oscuro */
  transition: color 0.4s var(--ease-out);
}
.header.is-leather-bg .header__nav a {
  color: #F0E2C9; /* Tierra cream brillante sobre el marrón cuero */
  transition: color 0.4s var(--ease-out);
}
.header[data-theme="dark"]:not(.is-scrolled) {
  color: var(--c-text-alt);
}

.header__nav {
  display: flex;
  gap: max(2rem, min(3vw, 4rem));
  font-size: max(1.2rem, min(1.2vw, 1.8rem));
  text-transform: uppercase;
  letter-spacing: 1px;
}

.header__nav a {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.header__nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px; /* Made slightly thicker so the earth color pops */
  background-color: currentColor; /* Hover line dynamically matches text color */
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}

.header__nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header__center {
  position: absolute;
  left: 50%;
  top: 0; /* Attach to top to hang down */
  transform: translateX(-50%);
  height: 100%;
  display: flex;
  align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════
   PLACA CUERO PREMIUM — header logo
   ═══════════════════════════════════════════════════════════════════
   Concepto: parece una placa de cuero real cosida a mano. Cinco capas:
     1. Background: gradient cuero oscuro multitono (135deg, no plano)
     2. Radiales: highlight superior izq + sombra inferior der (relieve)
     3. Noise/grano sobre todo (textura papel cuero)
     4. ::before  — borde con costura/trenzado dorado (decorativo)
     5. ::after   — borde interno punteado dorado (segunda costura)
   El sombreado inset crea sensación 3D — la placa parece "hundida".
   ─────────────────────────────────────────────────────────────────── */
.header__logo {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  isolation: isolate; /* Para que ::before / ::after compongan limpio */
  /* CUERO multitono — gradient diagonal con 4 paradas para dar volumen,
     más radiales para el highlight/sombra, más grano SVG encima. */
  background:
    radial-gradient(ellipse at 28% 22%, rgba(255, 230, 200, 0.22), transparent 55%),
    radial-gradient(ellipse at 75% 82%, rgba(20, 10, 4, 0.42), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(135deg, #7a5635 0%, #5b3f24 42%, #3a2814 100%);
  background-size: cover, cover, 220px 220px, cover;
  background-blend-mode: normal, normal, overlay, normal;
  /* Placa proporcional al viewport — nunca más ancha que el 50vw para
     dejar espacio cómodo al nav izquierda/derecha del header. Y nunca
     más alta que el 18% del viewport para que no domine sobre la imagen
     hero ni se desborde en pantallas chicas. */
  width: clamp(26rem, 32vw, 42rem);
  height: clamp(13rem, 16vw, 19rem);
  max-width: 50vw;
  border-radius: 8px;
  overflow: hidden; /* Para que object-fit:cover del logo cerrado clippe */
  transform-origin: top center;
  transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out);
  /* Sombras: drop shadow grande hacia abajo + inset highlight top + inset
     sombra bottom para el efecto relieve "placa hundida". */
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 230, 200, 0.20),
    inset 0 -14px 28px rgba(0, 0, 0, 0.30),
    inset 0 0 0 1px rgba(0, 0, 0, 0.40);
}

/* ::before — DESHABILITADO (el trenzado dorado exterior).
   El cliente prefirió quedarse sólo con la costura finita del ::after.
   Se mantiene el bloque comentado para volver atrás si hace falta.
.header__logo::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 0;
  border-radius: 5px;
  padding: 3px;
  background:
    repeating-linear-gradient(45deg,
      rgba(213, 175, 105, 0.85) 0 4px,
      rgba(101, 65, 28, 0.85) 4px 7px,
      rgba(180, 140, 70, 0.65) 7px 11px,
      rgba(64, 38, 14, 0.85) 11px 14px);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
*/

/* ::after — COSTURA INTERIOR PUNTEADA
   Única línea decorativa que rodea la placa. Dashed dorada — simula
   el hilo cosido a mano. Inset ajustado (10px) para que respire más
   ahora que no está el trenzado exterior. */
.header__logo::after {
  content: "";
  position: absolute;
  inset: 14px;
  pointer-events: none;
  z-index: 0;
  border-radius: 4px;
  border: 1.5px dashed rgba(213, 175, 105, 0.6);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.header.is-transitioning {
  pointer-events: none; /* Block clicks during transition */
}
.header.is-transitioning .header__nav,
.header.is-transitioning-out .header__nav {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.header.is-transitioning .header__logo {
  width: 100vw !important;
  height: 100vh !important;
  cursor: default;
  border-radius: 0 !important;
}
.header.is-transitioning .header__logo,
.header.is-transitioning-out .header__logo {
  /* La expansión hacia pantalla completa también es lenta */
  transition: width 1.2s cubic-bezier(0.8, 0, 0.2, 1), height 1.2s cubic-bezier(0.8, 0, 0.2, 1) !important;
}

.header.is-transitioning .header__logo--open {
  transform: translate(-50%, -50%) scale(1.1); /* Make logo slightly bigger when full screen */
}
.header.is-transitioning .header__logo--open,
.header.is-transitioning-out .header__logo--open {
  transition: transform 1.2s cubic-bezier(0.8, 0, 0.2, 1);
}

/* Scrolled state — placa cerrada. Más alta y menos ancha para que el
   texto JIcrea ocupe mejor el espacio, sin tanto vacío a los costados. */
.header.is-scrolled .header__logo {
  height: max(8rem, min(8vw, 11rem));
  width: max(20rem, min(20vw, 26rem));
  background-color: var(--c-earth);
}
.header.is-scrolled .header__logo:hover {
  height: clamp(13rem, 16vw, 19rem);
  width: clamp(26rem, 32vw, 42rem);
  max-width: 50vw;
  background-color: var(--c-earth);
}

/* LOGO ELEMENTS
   Closed = scrolled. Texto "JIcrea" horizontal (PNG 02_jlcrea_texto).
   El PNG es cuadrado con MUCHO padding transparente arriba y abajo del
   texto — con object-fit:contain el texto visible quedaba minúsculo
   porque la imagen entraba entera (incluyendo el aire transparente).
   AHORA: object-fit:cover + overflow:hidden en el padre — la imagen
   se escala para llenar el contenedor, croppeando el aire transparente
   vertical. Resultado: el texto visible es ~2x más grande. */
.header__logo--closed {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 82% = 96% × 0.85 → 15% más chico que la versión anterior. */
  width: 82%;
  height: 82%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  object-fit: cover;
  object-position: center;
  z-index: 2; /* Sobre el trenzado/costura */
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}

.header__logo--open {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  /* Altura del bloque CONTENT (logo + side-texts) ~ 70% del alto de
     la placa. Si la placa mide 16vw alto, el contenido es ~11vw. */
  height: clamp(9rem, 11vw, 13rem);
  transform: translate(-50%, -50%);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.6rem, 2.4vw, 3.2rem);
  transition: opacity 0.5s var(--ease-out), transform 1.2s cubic-bezier(0.8, 0, 0.2, 1);
  /* z-index > ::before/::after para que el contenido quede sobre el
     trenzado decorativo y la costura punteada. */
  z-index: 2;
}

.header__logo--open img {
  height: 100%;
  width: auto;
  object-fit: contain;
  /* Drop shadow sutil bajo el logo para "pegarlo" a la placa, no flotando */
  filter:
    drop-shadow(0 3px 2px rgba(0, 0, 0, 0.45))
    drop-shadow(0 -1px 0 rgba(255, 230, 200, 0.10));
}

/* Side-text: "DESDE / 2015" y "HECHOS / A MANO" — dos líneas dorado claro
   con un hairline dorado horizontal arriba y abajo (firma artesanal). */
.header__side-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  color: #d5bb75; /* Dorado claro, más legible que --c-brand sobre cuero */
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.18em;
  gap: 4px;
  position: relative;
  /* Padding superior/inferior para dar lugar a los hairlines decorativos */
  padding: 8px 2px;
}
.header__side-text span {
  font-size: clamp(0.95rem, 0.8vw, 1.2rem);
  opacity: 0.92;
}
.header__side-text strong {
  font-size: clamp(1.05rem, 0.9vw, 1.35rem);
  font-weight: 800;
}
/* Hairlines dorados arriba y abajo del side-text — firma artesanal */
.header__side-text::before,
.header__side-text::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(40px, 4.5vw, 68px);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(213, 187, 117, 0.85) 50%, transparent 100%);
}
.header__side-text::before { top: 0; }
.header__side-text::after  { bottom: 0; }

/* STATE LOGIC */
.header.is-scrolled .header__logo--open {
  opacity: 0;
  transform: translate(-50%, -30%) scale(0.9);
  pointer-events: none;
}

.header.is-scrolled .header__logo--closed {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.header.is-scrolled .header__logo:hover .header__logo--open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.header.is-scrolled .header__logo:hover .header__logo--closed {
  opacity: 0;
  transform: translate(-55%, -70%) scale(0.5);
}

/* HERO */
.hero {
  position: relative;
  /* 100vh causa "temblor" en iOS Safari porque la URL bar al colapsar
     recalcula viewport height y el cover-bg redibuja. 100dvh (dynamic
     viewport height) es estable — no recalcula durante el scroll. */
  height: 100vh; /* fallback browsers viejos */
  height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--c-text-alt);
}
.hero__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../img/hero1.jpg') center/cover no-repeat;
  z-index: 1;
  transform: scale(1.1);
}
.hero__media::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Vignette + degradado izq→der para que la imagen respire del lado
     derecho y el texto pegado a la izquierda quede legible sin tapar
     toda la foto. Más oscuro abajo, transparente arriba para que la
     placa de cuero del header se vea limpia. */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 22%, transparent 40%, rgba(0,0,0,0.50) 90%),
    linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 45%, transparent 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: max(10rem, min(12vw, 18rem)); /* Added space so banner doesn't cover text */
}

/* HERO CINEMA — variante con imagen protagonista y texto a la izquierda
   abajo. La placa del header sigue centrada arriba. Layout inspirado
   en el mockup del cliente: foto domina, texto al pie izquierdo, ritmo
   título → linea dorada → subtítulo poético → CTA al proceso. */
.hero--cinema {
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
}
.hero__inner--left {
  text-align: left;
  padding-top: 0;
  padding-bottom: max(6rem, min(7vw, 11rem));
  padding-left: max(2.4rem, min(6vw, 10rem));
  width: min(820px, 80vw);
}
.hero--cinema .hero__title {
  /* Cormorant Garamond — serif elegante y delicado. Reemplaza al
     super-med (heavy display) para darle al título un aire premium
     editorial en vez de bold publicitario. Tamaños MODERADOS para no
     comer todo el hero (Cormorant renderiza más alto que super-med por
     sus ascenders largos, así que el clamp baja a 5.5rem máx en vw). */
  font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(3.6rem, 5.5vw, 7.8rem) !important;
  line-height: 1.0 !important;
  letter-spacing: 0.005em;
  text-shadow: 0 6px 20px rgba(0,0,0,0.55);
}
/* Cada .line del hero cinema NO debe wrappear — la pieza "DEL CAMPO"
   tiene que quedar en una sola línea aunque haya espacio. */
.hero--cinema .line {
  white-space: nowrap;
}

/* Línea dorada decorativa entre título y subtítulo — separador artesanal */
.hero__rule {
  width: 72px;
  height: 2px;
  margin: 2.4rem 0 2rem;
  background: linear-gradient(90deg, var(--c-brand) 0%, rgba(203,160,88,0.2) 100%);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left center;
  animation: heroRule 1.2s 1.6s var(--ease-out) forwards;
}
@keyframes heroRule {
  to { opacity: 1; transform: scaleX(1); }
}

/* CTA "Conocé el proceso →" — pequeño, dorado, con flecha que se desliza
   en hover. Bajo perfil para no robarle protagonismo a la imagen. */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2.6rem;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.15rem, 1vw, 1.4rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-brand);
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  animation: heroCta 1.2s 1.9s var(--ease-out) forwards;
  transition: gap 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.hero__cta:hover { gap: 1.8rem; color: #d8b070; }
.hero__cta svg { transition: transform 0.3s var(--ease-out); }
.hero__cta:hover svg { transform: translateX(4px); }
@keyframes heroCta {
  to { opacity: 1; transform: translateY(0); }
}

.hero__title {
  font-family: var(--font-serif);
  font-size: max(10rem, min(10vw, 24rem));
  line-height: 85%;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
}
.line {
  display: block;
  overflow: hidden;
  clip-path: inset(-20% 0 0 0);
}
.line::before {
  content: attr(data-text);
  display: block;
  transform: translateY(115%);
}
.hero__subtitle {
  margin-top: 2rem;
  font-family: var(--font-sans);
  font-size: max(2rem, min(2vw, 3.5rem));
  font-weight: 400;
  opacity: 0;
}
/* En el hero--cinema el subtítulo es más chico y va en UNA sola línea.
   max-width amplio + white-space:nowrap para forzar la línea única.
   En mobile (override más abajo) se permite wrap natural. */
.hero--cinema .hero__subtitle {
  font-size: clamp(1.3rem, 1.25vw, 1.85rem) !important;
  line-height: 1.4 !important;
  max-width: none;
  white-space: nowrap;
  margin-top: 0; /* Ya hay separación del .hero__rule arriba */
  color: rgba(244, 238, 227, 0.92);
}
.hero__scroll {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 2px;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* MANIFESTO */
.manifesto {
  padding: max(8rem, min(10vw, 15rem)) var(--gutter) 2rem; /* Less padding at bottom so it joins the cards */
  text-align: center;
  background-color: var(--c-bg); /* Beige background */
  color: var(--c-green); /* Verde oscuro para este título */
}
.manifesto__inner {
  max-width: 1000px;
  margin: 0 auto;
}
.manifesto__icon {
  margin: 0 auto 1.5rem;
  width: 2rem;
  height: 2rem;
  background-color: var(--c-brand); /* Dorado */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.manifesto__title {
  font-family: var(--font-serif); /* Cambiado a serif para más presencia */
  font-size: max(3rem, min(4vw, 5rem)); /* Mucho más grande */
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 3rem;
  letter-spacing: 2px;
  /* line-height: super-med tiene métricas verticales muy ajustadas — al
     romper el título en varias líneas (<br>) las cajas se superponen.
     1.05 da aire entre líneas sin perder presencia visual. */
  line-height: 1.05;
}
.manifesto__text {
  font-family: var(--font-sans); /* Use sans-serif for the all-caps look */
  font-size: max(1.5rem, min(2vw, 2.5rem)); /* Smaller than before */
  line-height: 1.4;
  font-weight: 500;
  text-transform: uppercase;
}

/* CARDS */
.cards {
  padding-bottom: max(10rem, min(10vw, 15rem));
  padding-top: 4rem; /* Small top padding because it continues from manifesto */
  background-color: var(--c-bg);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cards__inner {
  position: relative;
  width: calc(45vw - 1rem);
  aspect-ratio: 580 / 770;
}
@media (min-width: 960px) {
  .cards__inner {
    width: calc(30vw);
  }
}
@media (min-width: 1280px) {
  .cards__inner {
    width: calc(25vw);
  }
}
.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  transform-origin: center;
  will-change: transform;
}
.card__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card--left { z-index: 1; transform: rotate(12deg) translateZ(0); }
.card--center { z-index: 2; transform: rotate(-30deg); }
.card--right { z-index: 3; transform: rotate(-14deg) translateZ(0); }

/* AMARGOR */
.amargor {
  padding: clamp(4rem, 6vw, 7rem) var(--gutter);
  background-color: var(--c-bg);
  color: var(--c-text);
  text-align: center;
}
.amargor__giant {
  font-family: var(--font-serif);
  /* Reducido del original (max 30rem → 18rem). El cliente comentó
     que se sentía demasiado grande. 18rem como techo da presencia
     sin abrumar, y mantiene el clamp para desktop / tablet. */
  font-size: max(5.6rem, min(10vw, 18rem));
  line-height: 88%;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  /* Color original (heredado de .amargor → var(--c-text) = #1A1A1A negro
     tierra). Probamos efecto cuero con background-clip:text pero no quedó
     bien — texto se mantiene en su color sólido original como antes. */
}
.amargor__text {
  margin-top: clamp(1.8rem, 3vw, 3rem);
  font-family: var(--font-sans);
  font-size: max(2rem, min(2vw, 3.5rem));
  max-width: 60vw;
  margin-left: auto;
  margin-right: auto;
  color: var(--c-text);
}

/* STICKY SHOWCASE */
.sticky {
  height: 200vh;
  background-color: var(--c-green); /* Verde oscuro */
  color: var(--c-text-alt);
  position: relative;
}
.sticky__giant {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--font-serif);
  font-size: max(7rem, min(17vw, 34rem));
  text-transform: uppercase;
  line-height: 85%;
  display: flex;
  flex-direction: column;
}

/* MANIFIESTO 2 */
.manifiesto {
  padding: max(10rem, min(10vw, 20rem)) var(--gutter);
  text-align: center;
  background-color: var(--c-earth); /* Marrones y tierras */
  color: var(--c-text-alt);
}
.manifiesto__inner {
  max-width: 90vw;
  margin: 0 auto;
}
.manifiesto__text {
  font-family: var(--font-serif);
  font-size: max(6rem, min(6vw, 11rem));
  line-height: 90%;
  margin-bottom: 4rem;
}
.manifiesto__close {
  font-family: var(--font-sans);
  font-size: max(2rem, min(2vw, 3.5rem));
  color: var(--c-secondary);
}
em {
  font-style: italic;
  font-family: var(--font-serif);
}

/* PILLARS */
.pillar {
  position: relative;
  /* dvh evita el temblor en iOS Safari al colapsar URL bar */
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pillar__media {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
}
.pillar__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.15);
}
.pillar__media::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
}
.pillar__overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--c-text-alt);
}
.pillar__title {
  font-family: var(--font-serif);
  font-size: max(8rem, min(15vw, 30rem));
  line-height: 85%;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
}
.pillar__caption {
  margin-top: 2rem;
  font-family: var(--font-sans);
  font-size: max(1.6rem, min(1.6vw, 2.4rem));
  max-width: 50vw;
  margin-left: auto; margin-right: auto;
}

/* ORIGEN - MUSEO BOTANICO 4 ESQUINAS */
.origen-museo {
  padding: max(8rem, min(10vw, 12rem)) var(--gutter);
  background-color: var(--c-bg); /* Beige background para estilo botanical */
  position: relative;
  overflow: hidden;
}
.origen-museo__header {
  text-align: center;
  margin-bottom: max(3rem, 5vw);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.origen-museo__main-title {
  font-family: var(--font-serif);
  font-size: max(3rem, min(4vw, 5rem)); /* Igual al manifesto */
  font-weight: 700;
  color: var(--c-green);
  text-transform: uppercase;
  margin-top: 1rem;
}
.origen-museo__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  gap: 2rem 1.5rem; /* Menor espacio de columna para acercarlos al centro */
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}
.origen-museo__center {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  width: 40vw;
  max-width: 350px; /* Tamaño mucho más chico y fijo */
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.origen-museo__img {
  width: 100%;
  height: auto;
  filter: drop-shadow(15px 25px 25px rgba(0,0,0,0.25));
  transform-origin: center bottom;
  transition: transform 0.4s ease;
}
.origen-museo__img:hover {
  transform: scale(1.03); /* Leve efecto interactivo al pasar el mouse */
}
.origen-museo__corner {
  display: flex;
  align-items: center; /* Centrar verticalmente icono y texto */
  gap: 2rem; /* Separar el texto del icono para que el icono destaque más hacia el centro */
}
.origen-museo__corner--tl, .origen-museo__corner--bl {
  justify-content: flex-end; /* Alinear a la derecha, cerca del centro */
  text-align: right;
}
.origen-museo__corner--tr, .origen-museo__corner--br {
  justify-content: flex-start; /* Alinear a la izquierda, cerca del centro */
  text-align: left;
}
.origen-museo__icon {
  flex-shrink: 0;
  width: max(100px, min(14vw, 175px)); /* Tamaño 15% más grande */
  height: max(100px, min(14vw, 175px));
  object-fit: contain;
}
.origen-museo__content {
  display: flex;
  flex-direction: column;
}
.origen-museo__title {
  font-family: var(--font-serif);
  font-size: max(1.5rem, 2vw);
  color: var(--c-green); /* Verde campo premium */
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.origen-museo__corner p {
  font-size: max(1rem, 1.1vw);
  line-height: 1.6;
  color: var(--c-text); /* Black text */
  opacity: 0.8;
  max-width: 300px;
}
@media (max-width: 900px) {
  .origen-museo__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 3rem;
  }
  .origen-museo__center {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    max-width: 250px;
  }
  .origen-museo__corner {
    flex-direction: column; /* Apilar en movil */
    text-align: center;
  }
  .origen-museo__corner--tl, .origen-museo__corner--bl, 
  .origen-museo__corner--tr, .origen-museo__corner--br {
    justify-content: center;
    text-align: center;
  }
  .origen-museo__icon {
    order: -1; /* Icono arriba en movil */
    margin-bottom: 1rem;
  }
}

/* PROCESO 3D — scroll-pinned. Fondo NEGRO profundo (estilo oryzo) para que
   las fotos se desvanezcan limpias y el mate 3D destaque con todo su
   detalle. Textura sutil de noise para que no quede plano. */
.proceso-3d {
  position: relative;
  /* dvh evita el temblor de iOS Safari al colapsar URL bar (vs vh que
     recalcula durante scroll y hace que el video con object-fit:cover
     redibuje). */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #0A0807;
  color: #F4EBE1;
}
.proceso-3d::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: 0.4;
  mix-blend-mode: overlay;
}
/* Que el contenido quede por encima del noise */
.proceso-3d > * {
  position: relative;
  z-index: 1;
}
.proceso-3d__pin {
  /* Antes sticky (para scroll-scrub). Ahora el video se reproduce solo,
     no necesita pin — el pin queda simple full-bleed dentro de la
     sección 100vh. dvh evita el temblor del video en iOS. */
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   VIDEO CINEMÁTICO — reemplaza al sistema 3D + fotos. Full-bleed, sin
   controles ni sonido. El JS scrubea currentTime con el scroll.
   ═══════════════════════════════════════════════════════════════════ */
.proceso-3d__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  z-index: 0;
  /* Pre-paint negro para evitar flash blanco mientras el video carga */
  background: #0A0807;
  display: block;
  /* GRADE CINEMATOGRÁFICO (CSS, sin re-encode):
       · saturate(1.18)  — colores más jugosos sin caer en chillón
       · contrast(1.06)  — negros más profundos, look de cine
       · brightness(0.96)— una pizca abajo para sumar densidad
     El vignette (.proceso-3d__vignette) sigue encima y termina de
     encerrar el ojo en el centro. Mismo recipe sirve para el video
     de desktop y el de mobile — ambos pasan por este filtro. */
  filter: saturate(1.18) contrast(1.06) brightness(0.96);
  /* will-change para que el browser ponga el video en su propia capa
     GPU — el filtro corre en compositor sin re-pintar el resto */
  will-change: filter;
}

/* Vignette radial + gradient TOP — el radial vignettea bordes para foco
   cinematográfico; el linear-gradient superior oscurece el ~40% de arriba
   para que el título overlay sea legible sobre cualquier frame del video. */
.proceso-3d__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(10, 8, 7, 0.75) 0%, rgba(10, 8, 7, 0.30) 35%, transparent 60%),
    radial-gradient(ellipse 80% 90% at center, transparent 50%, rgba(10, 8, 7, 0.55) 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   TÍTULO OVERLAY — gancho emocional. Centrado absoluto en el video.
   Aparece SOLO al inicio (cuando la sección entra al viewport) con un
   fade-in + rise sutil, queda 4.5s visible, y después fade-out — el
   video sigue corriendo limpio. JS añade/quita .is-visible.
   ═══════════════════════════════════════════════════════════════════ */
.proceso-3d__title-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Centrado absoluto via translate -50%, -50%. El translateY(20px) extra
     es el offset del estado inicial — el título arranca 20px abajo del
     centro y "sube" al hacer fade-in. Cuando is-visible, el translateY(0)
     lo deja en el centro exacto. */
  transform: translate(-50%, -50%) translateY(20px);
  width: min(100%, 1100px);
  z-index: 2;
  text-align: center;
  padding: 0 clamp(24px, 5vw, 80px);
  pointer-events: none;
  opacity: 0;
  transition:
    opacity   1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.proceso-3d__title-overlay.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}
.proceso-3d__title-eyebrow {
  display: inline-block;
  color: var(--c-brand);
  font-family: var(--font-serif, "super-med"), Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: clamp(20px, 3vh, 36px);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(203, 160, 88, 0.45);
}
.proceso-3d__title-text {
  font-family: var(--font-serif, "super-med"), Helvetica, sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #F4EBE1;
  margin: 0;
  /* drop-shadow leve para asegurar lectura en frames claros del video */
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   MUTE TOGGLE — botón sutil bottom-right. Estado por defecto: muted
   (ícono speaker-off visible + label "Activar sonido"). Cuando el
   usuario clickea: aria-pressed=true, ícono speaker-on, label "Silenciar".
   ═══════════════════════════════════════════════════════════════════ */
.proceso-3d__mute-toggle {
  position: absolute;
  bottom: clamp(24px, 4vh, 48px);
  right: clamp(24px, 3vw, 48px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(10, 8, 7, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(203, 160, 88, 0.35);
  color: var(--c-brand);
  font-family: var(--font-serif, "super-med"), Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.3s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 0.3s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    color 0.3s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.proceso-3d__mute-toggle:hover {
  background: rgba(10, 8, 7, 0.75);
  border-color: rgba(203, 160, 88, 0.65);
  color: #F4EBE1;
}
/* Estado: muted (default) → muestra ícono off, label "Activar sonido" */
.proceso-3d__mute-icon--on { display: none; }
.proceso-3d__mute-icon--off { display: block; }
/* Estado: unmuted → muestra ícono on, label "Silenciar" */
.proceso-3d__mute-toggle[aria-pressed="true"] .proceso-3d__mute-icon--on { display: block; }
.proceso-3d__mute-toggle[aria-pressed="true"] .proceso-3d__mute-icon--off { display: none; }
.proceso-3d__mute-toggle[aria-pressed="true"] .proceso-3d__mute-label::before {
  content: "Silenciar";
}
.proceso-3d__mute-toggle[aria-pressed="true"] .proceso-3d__mute-label {
  font-size: 0; /* oculta el texto original "Activar sonido" */
}
.proceso-3d__mute-toggle[aria-pressed="true"] .proceso-3d__mute-label::before {
  font-size: 11px; /* el ::before sí muestra */
}
@media (max-width: 600px) {
  /* En mobile, sólo ícono (sin label) para ahorrar espacio */
  .proceso-3d__mute-label { display: none; }
  .proceso-3d__mute-toggle { padding: 10px; }
}

/* Contenedor de los fondos por etapa: cubre el pin exactamente (100vh).
   Cada bg-layer es una foto distinta que el JS controla con 3 propiedades:
   opacity, filter brightness y transform scale → da el efecto oryzo-like
   de "la foto se achica y se vuelve oscura hasta desaparecer" mientras el
   mate 3D queda flotando en el centro. */
.proceso-3d__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.proceso-3d__bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transform-origin: center center;
  will-change: opacity, filter, transform;
  /* Máscara radial controlada por variables. Cuando ambas son 100% el
     gradiente es sólido (mask OFF) → foto cuadrada nítida, perfecta para
     que el mate parezca apoyado en la mesa de verdad. Cuando bajan a
     28%/88% se activa el feather → los bordes se desvanecen al achicarse. */
  --mask-inner: 100%;
  --mask-outer: 100%;
  -webkit-mask-image: radial-gradient(ellipse 78% 90% at center, #000 var(--mask-inner), transparent var(--mask-outer));
  mask-image: radial-gradient(ellipse 78% 90% at center, #000 var(--mask-inner), transparent var(--mask-outer));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: opacity 0.12s linear, filter 0.12s linear, transform 0.12s linear;
}
.proceso-3d__bg-layer[data-step="0"] {
  background-image: url('../img/proceso-fondo1.png');
  /* La foto 1 arranca SIEMPRE visible — antes de que el JS corra, antes
     de scrollear, en cuanto el navegador renderiza. Evita el flash en
     negro al entrar a la sección. */
  opacity: 1;
}
.proceso-3d__bg-layer[data-step="1"] {
  background-image: url('../img/proceso-fondo2.png');
}
/* Step 1-mate: misma escena del taller pero con mate ya en la mesa.
   El JS cross-fadea esta capa con la step="1" al final del step 1 →
   el cliente percibe que el mate 3D se "asentó" en el mate fotográfico. */
.proceso-3d__bg-layer[data-step="1-mate"] {
  background-image: url('../img/proceso-fondo2-2.png');
}
.proceso-3d__bg-layer[data-step="2"] {
  background-image: url('../img/proceso-fondo3.png');
}
/* Step 2-mate: la misma escena de manos pero con mate + posamate ya en
   la mesa. Cross-fade con step="2" al cerrar el efecto de emergencia. */
.proceso-3d__bg-layer[data-step="2-mate"] {
  background-image: url('../img/proceso-fondo3-2.png');
}
.proceso-3d__bg-layer[data-step="2-final"] {
  background-image: url('../img/proceso-fondo3-final.png');
}

/* VISOR 3D — tamaño completo, centrado. La rotación NO se aplica al wrapper
   (eso rotaría el canvas 2D y queda plano). Se aplica directamente al modelo
   vía `orientation` (rotación real en 3D). El opacity arranca en 0: el JS lo
   sube super rápido en los primeros 3% del scroll para dar la ilusión de
   que el porongo de la foto "se despegó" como un mate 3D del mismo tamaño. */
.proceso-3d__viewer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(280px, 42vw, 620px);
  height: clamp(360px, 60vh, 640px);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  /* `filter` en will-change → el browser promueve el viewer a su propia
     capa compuesta. El filter se rasteriza una vez por cambio real, no
     cada frame del WebGL del model-viewer que tiene debajo. Sin esto la
     entrada (ramp de opacity 0→1) se notaba trabada porque cada frame
     re-blureaba 3 sombras sobre un elemento de ~600px. */
  will-change: opacity, transform, filter;
  /* Stack de 3 drop-shadows que da sensación de "despegue" del mate
     sobre la foto SIN moverlo ni cambiar su tamaño.
       1) Contact shadow — tight, oscura, ancla el pie del mate.
       2) Mid shadow — media distancia, da el primer nivel de elevación.
       3) Ambient shadow — larga y difusa, vende la altura/levitación.
     Truco clave: el offset Y de cada sombra es MAYOR que su blur radius.
     Eso enmascara el halo superior y lateral detrás de la silueta del
     mate (el halo cae dentro de los alphas del propio modelo) y solo
     deja la elongación visible HACIA ABAJO — lectura inequívoca de
     "objeto flotando sobre la foto".
     La 3ª sombra está calibrada con blur reducido (18px en vez de 28px)
     para que cada frame de blur sea ~38% más barato sin perder lectura
     de altura: sigue elongada hacia abajo, sigue suave.
     La sombra de luz interna la sigue poniendo model-viewer (shadow-intensity). */
  filter:
    drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55))
    drop-shadow(0 18px 12px rgba(0, 0, 0, 0.38))
    drop-shadow(0 36px 18px rgba(0, 0, 0, 0.32));
}
.proceso-3d__spin {
  width: 100%;
  height: 100%;
}
/* Los 3 model-viewers superpuestos. Solo uno visible a la vez via
   .is-visible. El cross-fade es 0.5s con cubic-bezier suave. */
.proceso-3d__viewer model-viewer,
.proceso-3d__model {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--gold, #C9A24A);
  outline: none;
  pointer-events: none;
  opacity: 0;
  /* Cross-fade más rápido (0.3s) para que coincida con el fade-in de la
     foto al cruzar el step boundary. Ambos terminan ~al mismo tiempo. */
  transition: opacity 0.3s cubic-bezier(0.45, 0, 0.15, 1);
}
.proceso-3d__model.is-visible {
  opacity: 1;
  pointer-events: auto;
}


/* Tronco / posa-mate — RETIRADO. El concepto se simplificó. */

/* OVERLAY — texto a los costados, no en columnas. El mate respira en el medio. */
/* ═══════════════ Overlay tipográfico estilo oryzo ═══════════════
   Sobre fondo negro, el texto va en cream (#F4EBE1) con acentos en gold
   (#CBA058). Las animaciones tipo "char-mask reveal" se controlan vía
   JS: cuando cambia de step, .is-changing pone el texto fuera de su
   máscara (translateY +110% clipeado) y al sacarse la clase el texto
   vuelve a su lugar — entra desde abajo, escalonado, tipo oryzo.
   ──────────────────────────────────────────────────────────────── */
.proceso-3d__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  padding: clamp(40px, 6vh, 80px) clamp(32px, 5vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Lado izquierdo: eyebrow + número + título + descripción */
.proceso-3d__copy-left {
  width: clamp(320px, 38vw, 600px);
  pointer-events: auto;
}
.proceso-3d__eyebrow {
  color: var(--c-brand, #CBA058);
  margin-bottom: 36px;
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(203, 160, 88, 0.35);
}

/* Wrapper del texto cambiante. Cada hijo se anima con su propio delay
   creando un staggered reveal tipo oryzo. */
.proceso-3d__text {
  display: block;
}
.proceso-3d__text .reveal {
  display: block;
  overflow: hidden; /* clip-path container para el char-mask reveal */
}
.proceso-3d__text .reveal-inner {
  display: block;
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Al cambiar de step → todo sale hacia ARRIBA escalonado */
.proceso-3d__text.is-changing .reveal-inner {
  transform: translateY(-115%);
  opacity: 0;
}
.proceso-3d__text.is-changing .reveal:nth-child(1) .reveal-inner { transition-delay: 0s; }
.proceso-3d__text.is-changing .reveal:nth-child(2) .reveal-inner { transition-delay: 0.04s; }
.proceso-3d__text.is-changing .reveal:nth-child(3) .reveal-inner { transition-delay: 0.08s; }
/* Estado de entrada después del cambio (sale del clip-path desde abajo) */
.proceso-3d__text.is-entering .reveal-inner {
  transform: translateY(115%);
  opacity: 0;
  transition: none;
}
.proceso-3d__text.is-entering .reveal:nth-child(1) .reveal-inner { transition-delay: 0.05s; }
.proceso-3d__text.is-entering .reveal:nth-child(2) .reveal-inner { transition-delay: 0.13s; }
.proceso-3d__text.is-entering .reveal:nth-child(3) .reveal-inner { transition-delay: 0.21s; }

.proceso-3d__num {
  font-family: "EB Garamond", "Times New Roman", Georgia, serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--c-brand, #CBA058);
  margin-bottom: 14px;
}
.proceso-3d__title {
  font-family: var(--font-display, "Super", Helvetica, sans-serif);
  font-weight: 500;
  font-size: clamp(48px, 6.4vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #F4EBE1;
  margin: 0 0 26px 0;
}
.proceso-3d__desc {
  font-family: "EB Garamond", "Times New Roman", Georgia, serif;
  font-style: italic;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.55;
  color: rgba(244, 235, 225, 0.72);
  margin: 0;
  max-width: 420px;
}

/* Lado derecho: indicador de paso */
.proceso-3d__copy-right {
  width: clamp(200px, 24vw, 320px);
  pointer-events: auto;
  align-self: flex-end;
  padding-bottom: clamp(20px, 4vh, 40px);
}
.proceso-3d__indicator {
  display: flex;
  align-items: center;
  gap: 18px;
}
.proceso-3d__bar {
  flex: 1;
  height: 1px;
  background: rgba(244, 235, 225, 0.18);
  position: relative;
  overflow: hidden;
}
.proceso-3d__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--c-brand, #CBA058);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.proceso-3d__count {
  font-family: var(--font-display, "Super", Helvetica, sans-serif);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-brand, #CBA058);
  white-space: nowrap;
}

@media (max-width: 900px) {
  /* Mobile: el video es self-contained (autoplay loop), no necesita
     360vh de scroll-track. 100vh alcanza para mostrarlo full-bleed.
     Antes había un legacy scroll-scrub que requería 360vh — ahora
     genera 2923px de espacio negro debajo del video. */
  .proceso-3d {
    height: 100vh;
    min-height: 560px;
  }
  .proceso-3d__overlay {
    flex-direction: column;
    justify-content: space-between;
    padding: 12vh var(--gutter, 24px) 6vh;
    text-align: left;
    align-items: stretch;
  }
  .proceso-3d__copy-left,
  .proceso-3d__copy-right {
    width: 100%;
  }
  .proceso-3d__copy-right {
    padding-bottom: 0;
  }
  .proceso-3d__title {
    font-size: clamp(36px, 9vw, 56px);
  }
}

/* PRODUCTOS TABS — fondo cuero/terracotta con textura de granulado fino
   (cuero curtido). El base es un degradé terracotta. Encima un overlay
   ::before con SVG noise inline (fractalNoise) que da el grain sutil
   tipo piel. El ::after agrega un segundo layer de noise más fino para
   profundidad de textura. Todo CSS, sin imágenes externas. */
.productos {
  padding: max(10rem, min(10vw, 15rem)) 0;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 230, 200, 0.10), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(46, 24, 12, 0.30), transparent 60%),
    linear-gradient(135deg, #6B4423 0%, #8B5A33 50%, #7A4A28 100%);
  color: var(--c-text, #2A2520);
}
.productos::before,
.productos::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Layer 1 — grain principal, granos gruesos tipo poros de cuero */
.productos::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.55;
  mix-blend-mode: multiply;
}
/* Layer 2 — grano fino encima, simula la microtextura del cuero */
.productos::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 140px 140px;
  opacity: 0.4;
  mix-blend-mode: overlay;
}
/* Asegurar que el contenido quede por encima del noise */
.productos > * {
  position: relative;
  z-index: 1;
}
.productos__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  pointer-events: none;
  z-index: 1;
}
.productos__giant {
  font-family: var(--font-sans);
  font-size: max(10rem, min(15vw, 25rem));
  font-weight: 900;
  line-height: 0.8;
  color: #2A1810; /* negro tierra, alto contraste sobre el cuero */
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  opacity: 0.92;
}
.productos__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
/* "Nuestros mates" como TÍTULO de la sección. */
.productos__heading {
  display: block;
  text-align: center;
  font-family: var(--font-serif);
  font-size: max(3rem, min(4vw, 5rem));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #2A1810;
  margin: 0 0 .5rem;
}
/* "Calidad en lo sencillo" — debajo del mate, arriba de los botones.
   Color oscuro de marca y bien grande. */
.productos__eyebrow {
  display: block;
  text-align: center;
  font-family: "EB Garamond", "Times New Roman", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.03em;
  color: #2A1810;
  margin: 1.4rem 0 2rem;
}
/* En PC el i18n usa "Calidad<br>en lo sencillo" (para que en mobile
   queden 2 líneas legibles). En desktop hay espacio de sobra y
   queremos UNA sola línea — ocultamos el <br> via CSS. */
@media (min-width: 641px) {
  .productos__eyebrow br { display: none; }
}
.productos__stage {
  width: max(20rem, min(30vw, 40rem));
  height: max(20rem, min(30vw, 40rem));
  margin: 0 0 4rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.3)); /* Premium 3D drop shadow */
}
.productos__mate {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.productos__tabs {
  display: flex;
  gap: max(1.5rem, min(2vw, 3rem));
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 3rem;
}
.productos__tab {
  padding: 0.5rem 0;
  background: none;
  border: none;
  color: rgba(42, 24, 16, 0.55); /* negro tierra suave en estado normal */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: max(1rem, min(1vw, 1.5rem));
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s var(--ease-out);
  position: relative;
}
.productos__tab:hover {
  color: #2A1810;
}
.productos__tab.is-active {
  color: #2A1810;
}
.productos__tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #2A1810;
  transform: scaleX(0);
  transition: transform 0.3s var(--ease-out);
}
.productos__tab.is-active::after,
.productos__tab:hover::after {
  transform: scaleX(1);
}
.productos__desc {
  font-size: max(1.2rem, min(1.2vw, 1.6rem));
  text-align: center;
  color: #2A1810; /* negro tierra sobre el fondo cuero */
  font-weight: 500;
}

/* FOOTER — textura cuero/terracotta, misma que .productos.
   Base: degradé terracotta + dos capas de noise (grano grueso + micrograno)
   simulando piel curtida. Texto en tonos oscuros (negro-tierra y crema)
   que leen alto contraste sobre el cuero. */
.footer {
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 230, 200, 0.10), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(46, 24, 12, 0.30), transparent 60%),
    linear-gradient(135deg, #6B4423 0%, #8B5A33 50%, #7A4A28 100%);
  color: #2A1810;
}
.footer::before,
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Layer 1 — grano grueso tipo poros de cuero (igual a .productos::before) */
.footer::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.55;
  mix-blend-mode: multiply;
}
/* Layer 2 — micrograno fino encima (igual a .productos::after) */
.footer::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 140px 140px;
  opacity: 0.4;
  mix-blend-mode: overlay;
}
/* Contenido del footer por encima del noise */
.footer__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}
.footer__brand {
  margin-bottom: 6rem;
  text-align: center;
}
.footer__logo {
  /* +30% sobre el size anterior (160/18vw/260 × 1.3) — el cliente
     pidió más presencia del logo en el footer. */
  width: clamp(208px, 23vw, 338px);
  height: auto;
  margin-bottom: 2.4rem;
  /* Drop shadow sutil para "asentar" el logo sobre el cuero del footer */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}
.footer__slogan {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 4.5vw, 4rem);
  line-height: 1.1;
  color: #2A1810;
}
/* Mobile: stack vertical centrado. Desktop/tablet: flex row con
   justify-content:center → con 3 o 4 columnas SIEMPRE centradas
   (no quedan huérfanas a la izquierda con espacio vacío a la derecha
   como pasaba con grid de 4 columnas fijas cuando solo había 3 cols). */
.footer__cols {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-bottom: 6rem;
  text-align: center;
  align-items: center;
}
@media (min-width: 600px) {
  .footer__cols {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(4rem, 6vw, 8rem);
    text-align: left;
  }
  /* Ancho fijo por columna para que el layout sea predecible y las
     columnas tengan visualmente la misma "presencia" sin importar
     cuántas haya. */
  .footer__col {
    flex: 0 0 auto;
    min-width: 16rem;
    max-width: 24rem;
  }
}
.footer__col h4 {
  text-transform: uppercase;
  color: #2A1810;
  margin-bottom: 2rem;
  font-weight: 700;
}
.footer__col a, .footer__col p {
  display: block;
  margin-bottom: 1rem;
  color: rgba(42, 24, 16, 0.78);
}
.footer__col a {
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}
.footer__col a:hover {
  color: #2A1810;
}
.footer__base {
  border-top: 1px solid rgba(42, 24, 16, 0.22);
  padding-top: 2rem;
  text-align: center;
  font-size: 1.4rem;
  color: rgba(42, 24, 16, 0.6);
}

/* FAB */
.wa-fab {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  background-color: #25D366;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 100;
  transition: transform 0.3s ease;
}
.wa-fab:hover {
  transform: scale(1.1);
}

/* ANIMATION UTILS */
.intro {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: var(--c-brand);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro__logo {
  width: 150px;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
}

/* ═══════════════════════════════════════════════════════════════════
   ░░░░░░░░░░░░ SECCIÓN B2B — MARCAS BLANCAS & MAYORISTAS ░░░░░░░░░░░░
   ═══════════════════════════════════════════════════════════════════
   Estética cálida cream/terracotta — match con manifesto/amargor. Header
   centrado con eyebrow dorado + título serif grande en verde tierra +
   lead. Debajo dos cards limpias en cream con border tierra, texto
   oscuro y CTA flecha terracotta. NO dark, NO glass, NO futurístico.
   ─────────────────────────────────────────────────────────────────── */
.b2b {
  position: relative;
  background-color: var(--c-bg); /* Cream beige, igual que manifesto */
  color: var(--c-text);
  padding: clamp(80px, 14vh, 180px) 0;
}

.b2b__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(28px, 5vw, 80px);
}

/* Header centrado — mismo formato que manifesto: pequeño rombo dorado
   arriba (decorativo), eyebrow, título serif grande, lead. */
.b2b__header {
  text-align: center;
  margin: 0 auto clamp(48px, 8vh, 100px);
  max-width: 820px;
}
.b2b__eyebrow {
  display: inline-block;
  color: var(--c-earth, #6B4423);
  font-family: var(--font-sans, "super-reg"), Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 26px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(107, 68, 35, 0.35);
}
.b2b__title {
  font-family: var(--font-serif, "super-med"), Helvetica, sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 6.5vw, 84px);
  line-height: 0.95;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-green, #2B3A2C);
  margin: 0 0 24px 0;
}
.b2b__lead {
  font-family: var(--font-sans, "super-reg"), Helvetica, sans-serif;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--c-text);
  margin: 0 auto;
  max-width: 640px;
}

/* Grid de 2 cards lado a lado (collapses a 1 columna en mobile <800px) */
.b2b__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 36px);
}
@media (max-width: 800px) {
  .b2b__cards { grid-template-columns: 1fr; }
}

/* Variante de UNA sola card (cuando se retira marca blanca y queda
   sólo mayoristas). Card centrada y ancha pero no full-width — queda
   premium sin parecer huérfana en el grid. */
.b2b__cards--single {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════
   B2B SINGLE — features grid abierto + CTA grande
   ═══════════════════════════════════════════════════════════════════
   Cuando hay UNA sola propuesta (mayoristas), no usamos card wrapper.
   Mostramos 3 features en grid 1x3 directo sobre el cream bg, cada una
   con número grande dorado, título serif y descripción Garamond italic.
   El CTA grande va centrado al pie con icono WhatsApp.
   ─────────────────────────────────────────────────────────────────── */
.b2b__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 64px);
  max-width: 1100px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  padding: 0 clamp(8px, 2vw, 24px);
}
@media (max-width: 800px) {
  .b2b__features { grid-template-columns: 1fr; gap: clamp(40px, 6vw, 56px); }
}

/* Cada feature — número grande con stroke dorado decorativo arriba,
   título serif uppercase, descripción italic. Separadas con un
   hairline dorado entre columnas en desktop (decorativo). */
.b2b__feature {
  position: relative;
  padding: 0 clamp(8px, 1.5vw, 20px);
}
/* Hairline dorada vertical entre features (sólo en desktop) */
@media (min-width: 801px) {
  .b2b__feature + .b2b__feature::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    margin-left: clamp(-32px, -2vw, -16px); /* mitad del gap */
    width: 1px;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(107, 68, 35, 0.25) 30%,
      rgba(107, 68, 35, 0.25) 70%,
      transparent 100%);
  }
}

/* Ícono SVG dorado — reemplaza al número 01/02/03 genérico. Cada
   feature tiene un ícono temático (etiqueta/cajas/camión). Tamaño
   responsive con clamp + stroke fino para look artesanal premium. */
.b2b__feature-icon {
  display: block;
  width: clamp(40px, 4vw, 52px);
  height: clamp(40px, 4vw, 52px);
  margin-bottom: 1.6rem;
  color: var(--c-brand, #CBA058);
}
.b2b__feature-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.b2b__feature-title {
  font-family: var(--font-serif, "super-med"), Helvetica, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-green, #2B3A2C);
  margin: 0 0 1.2rem 0;
}
.b2b__feature-desc {
  font-family: "EB Garamond", "Times New Roman", Georgia, serif;
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: rgba(42, 24, 16, 0.78);
  margin: 0;
}

/* CTA row — centrado, botón grande con icono WhatsApp + flecha. Sombra
   sutil dorada en hover. Nota chica italic abajo informando timing. */
.b2b__cta-row {
  text-align: center;
  margin-top: clamp(20px, 3vw, 40px);
}
.b2b__cta-grande {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 1.6rem 3.2rem;
  background: var(--c-green, #2B3A2C);
  color: var(--c-bg, #F4EBE1);
  text-decoration: none;
  font-family: var(--font-serif, "super-med"), Helvetica, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  border-radius: 3px;
  box-shadow: 0 4px 0 rgba(46, 24, 12, 0.22);
  transition:
    transform 0.35s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    background 0.35s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.35s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.b2b__cta-grande:hover {
  background: #1d2a1e;
  transform: translateY(-3px);
  box-shadow:
    0 10px 24px -8px rgba(46, 24, 12, 0.40),
    0 4px 0 rgba(46, 24, 12, 0.30);
}
.b2b__cta-grande:active { transform: translateY(0); }
.b2b__cta-grande svg:last-of-type {
  transition: transform 0.35s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.b2b__cta-grande:hover svg:last-of-type { transform: translateX(4px); }

/* .b2b__cta-note — eliminado del HTML por decisión del cliente.
   La regla se mantiene comentada por si se quiere reactivar después.
.b2b__cta-note {
  margin: 1.8rem 0 0;
  font-family: "EB Garamond", "Times New Roman", Georgia, serif;
  font-style: italic;
  font-size: clamp(13px, 1vw, 15px);
  color: rgba(42, 24, 16, 0.55);
} */

/* Cards en blanco roto sobre el cream, border terroso. Bordes redondeados
   para ligereza, hover sube ligeramente. */
.b2b__card {
  position: relative;
  background: rgba(255, 252, 246, 0.65); /* Off-white sobre cream */
  border: 1px solid rgba(107, 68, 35, 0.18);
  border-radius: clamp(8px, 1vw, 14px);
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 26px);
  transition:
    border-color 0.4s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform    0.4s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow   0.4s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.b2b__card:hover {
  border-color: rgba(107, 68, 35, 0.45);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(46, 24, 12, 0.10);
}

.b2b__card-eyebrow {
  font-family: var(--font-sans, "super-reg"), Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-earth, #6B4423);
}
.b2b__card-title {
  font-family: var(--font-serif, "super-med"), Helvetica, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-green, #2B3A2C);
  margin: 0;
}
.b2b__card-desc {
  font-family: var(--font-sans, "super-reg"), Helvetica, sans-serif;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--c-text);
  margin: 0;
}

/* Lista con dash terroso en vez de bullet */
.b2b__card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.b2b__card-list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-sans, "super-reg"), Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(26, 26, 26, 0.78);
}
.b2b__card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 1px;
  background: var(--c-earth, #6B4423);
}

/* CTA flecha — color tierra, separado por un line-top sutil. Empuja
   a la derecha en hover. */
.b2b__card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding-top: 18px;
  border-top: 1px solid rgba(107, 68, 35, 0.22);
  color: var(--c-earth, #6B4423);
  text-decoration: none;
  font-family: var(--font-sans, "super-reg"), Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  transition:
    color 0.35s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    gap   0.35s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.b2b__card-cta:hover { color: var(--c-green, #2B3A2C); gap: 14px; }
.b2b__card-cta svg {
  transition: transform 0.35s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.b2b__card-cta:hover svg { transform: translateX(4px); }

/* ════════════════════════════════════════════════════════════════════════
   GALERÍA INSTAGRAM — grid 4x2 con placeholders
   ════════════════════════════════════════════════════════════════════════
   Cream parchment bg. 8 tiles cuadrados con esperanza de foto real
   (background-image inline o ::data-img). Mientras no haya foto,
   el placeholder muestra "Foto N" en el centro. Link al perfil IG.
   ──────────────────────────────────────────────────────────────────── */
.ig-gallery {
  position: relative;
  padding: clamp(5rem, 8vw, 11rem) var(--gutter);
  background-color: #EFE5D5;
  color: var(--c-text);
  overflow: hidden;
}
.ig-gallery::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: 0.25;
  mix-blend-mode: multiply;
}
.ig-gallery__inner { position: relative; z-index: 1; max-width: 1300px; margin: 0 auto; }
.ig-gallery__head { text-align: center; margin-bottom: 4rem; }
.ig-gallery__eyebrow {
  display: inline-block;
  font-family: "EB Garamond", "Times New Roman", Georgia, serif;
  font-style: italic;
  font-size: 1.35rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: 1.4rem;
}
.ig-gallery__title {
  font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
  font-size: clamp(2.6rem, 4.4vw, 5.2rem);
  font-weight: 500;
  line-height: 1.1;
  color: #2B3A2C;
  margin: 0 0 1rem;
}
.ig-gallery__lead {
  font-family: "EB Garamond", "Times New Roman", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.45rem, 1.3vw, 1.75rem);
  color: rgba(42, 24, 16, 0.7);
  margin: 0;
}
.ig-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 1.2vw, 1.4rem);
  margin-bottom: 4rem;
}
.ig-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: rgba(107, 68, 35, 0.10);
  border: 1px solid rgba(107, 68, 35, 0.15);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
/* Imagen dentro del tile — llena el cuadro completo. Con scale en hover
   para sensación "se acerca", manteniendo overflow hidden del .ig-tile. */
.ig-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.ig-tile:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 28px rgba(46, 24, 12, 0.20);
}
.ig-tile:hover img { transform: scale(1.05); }
/* Overlay con icono IG en hover */
.ig-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 6, 0.0);
  transition: background-color 0.3s var(--ease-out);
  pointer-events: none;
}
.ig-tile:hover::after { background: rgba(20, 12, 6, 0.30); }
/* Placeholder cuando no hay foto cargada */
.ig-tile[data-placeholder] {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(107, 68, 35, 0.04) 0 12px, transparent 12px 24px),
    #f7eedd;
}
.ig-tile__placeholder {
  font-family: "EB Garamond", "Times New Roman", Georgia, serif;
  font-style: italic;
  font-size: 1.4rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(107, 68, 35, 0.4);
}
.ig-gallery__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 auto;
  padding: 1.2rem 2.4rem;
  background: transparent;
  border: 1px solid var(--c-brand);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-brand);
  text-decoration: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.ig-gallery__cta:hover {
  background: var(--c-brand);
  color: #2A1810;
  transform: translateX(-50%) translateY(-2px);
}
@media (max-width: 900px) {
  .ig-gallery { padding: 4rem 1.4rem !important; }
  /* 2x2 desde tablet — 4 fotos en 3 columnas dejan un slot solo
     en la segunda fila → feo. 2x2 es siempre simétrico. */
  .ig-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .ig-tile__placeholder { font-size: 1.1rem; }
}
@media (max-width: 480px) {
  .ig-gallery__grid { gap: 0.8rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   COOKIE BANNER — aviso legal sutil abajo-derecha
   ════════════════════════════════════════════════════════════════════════
   Toast pequeño con texto cream sobre fondo dark + 2 botones (Aceptar /
   Más info). Se oculta con localStorage 'jicrea_cookies_v1' = 'accepted'.
   La lógica vive en jicrea-pro.js. */
.cookie-banner {
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  z-index: 90;
  max-width: 360px;
  padding: 1.4rem 1.6rem;
  background: rgba(20, 12, 6, 0.92);
  color: rgba(244, 235, 225, 0.92);
  border: 1px solid rgba(203, 160, 88, 0.4);
  border-radius: 4px;
  font-family: "EB Garamond", "Times New Roman", Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.45;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}
.cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cookie-banner__text { margin: 0 0 1rem; }
.cookie-banner__actions {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
.cookie-banner__btn {
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.cookie-banner__btn--primary {
  background: var(--c-brand);
  color: #2A1810;
}
.cookie-banner__btn--primary:hover { background: #d8b070; }
.cookie-banner__btn--ghost {
  background: transparent;
  color: rgba(244, 235, 225, 0.7);
  text-decoration: underline;
  padding: 0.6rem 0.4rem;
}
.cookie-banner__btn--ghost:hover { color: var(--c-brand); }
@media (max-width: 480px) {
  .cookie-banner {
    left: 1rem; right: 1rem; bottom: 1rem;
    max-width: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   LOADING STATES — spinners + dot animations
   ════════════════════════════════════════════════════════════════════════
   Reutilizable: .is-loading en un botón muestra un spinner al lado del
   texto. .skeleton-line para placeholders mientras carga data. */
.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}
.is-loading::after {
  content: "";
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.8rem;
  vertical-align: middle;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton lines — para placeholders mientras carga JS */
.skeleton-line {
  display: block;
  height: 1em;
  background: linear-gradient(90deg, rgba(107, 68, 35, 0.10) 0%, rgba(107, 68, 35, 0.20) 50%, rgba(107, 68, 35, 0.10) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: 3px;
  margin-bottom: 0.6em;
}
.skeleton-line--short { width: 40%; }
.skeleton-line--medium { width: 70%; }
.skeleton-line--long { width: 95%; }
.skeleton-block {
  background: linear-gradient(90deg, rgba(107, 68, 35, 0.10) 0%, rgba(107, 68, 35, 0.20) 50%, rgba(107, 68, 35, 0.10) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── ACENTOS VERDES — palabras destacadas en verde brand ──────────
   Se usa en frases sueltas con <em class="text-accent-green">. Italic
   por default (porque viene del em) + color verde de la marca.
   Sobre fondo claro queda verde sólido; sobre cuero/oscuro saturamos
   un poco para que se lea. */
.text-accent-green {
  color: var(--c-green);
  font-style: italic;
  font-weight: 600;
}
.manifesto--banner[data-bg="leather"] .text-accent-green,
.manifesto--banner[data-bg="leaf"] .text-accent-green,
[data-bg="dark"] .text-accent-green,
[data-bg="leather"] .text-accent-green,
[data-bg="leaf"] .text-accent-green,
.hist-block--leaf .text-accent-green,
.b2b-v2 .text-accent-green,
.stats-v2 .text-accent-green {
  /* En fondos verdes (leaf) el dorado se lee mejor que el verde claro */
  color: var(--c-brand);
  opacity: 0.95;
}

/* ════════════════════════════════════════════════════════════════════════
   INDEX V2 — Navbar alternativo (sin placa cuero, logo fijo apilado)
   ════════════════════════════════════════════════════════════════════════
   Propuesta alternativa para que el dueño compare. Header transparente,
   logo central FIJO (mate dorado arriba + texto JIcrea abajo, apilados
   verticalmente), nav limpio con icono de bag al final.
   Se activa con body.page-index-v2 — no afecta a las demás páginas.
   ════════════════════════════════════════════════════════════════════════ */
.page-index-v2 .header--v2 {
  background: transparent !important;
  height: auto !important;
  padding: 1rem var(--gutter) 0.8rem;
  /* GRID layout — 3 columnas (1fr | auto | 1fr) garantiza que el centro
     quede EXACTAMENTE en el centro de la página, independiente del
     ancho del nav-left vs nav-right. Mismo eje horizontal que el
     footer__logo (que también vive en un layout centrado). */
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.page-index-v2 .header--v2 .header__nav--left  { justify-self: start; }
.page-index-v2 .header--v2 .header__nav--right { justify-self: end; }
/* .header__center entra al grid del header v2 — sin posicionamiento
   absoluto. justify-self:center lo deja exactamente en el centro,
   mismo eje que el footer__logo. */
.page-index-v2 .header--v2 .header__center {
  position: static !important;
  transform: none !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
}
/* Anulamos el efecto scroll-shrink — el header v2 mantiene su tamaño */
.page-index-v2 .header.is-scrolled {
  height: auto !important;
  background: rgba(10, 8, 7, 0.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding-top: 1.2rem;
  padding-bottom: 1rem;
  transition: background-color 0.4s var(--ease-out), padding 0.4s var(--ease-out);
}

/* Logo v2 — sin placa cuero, sin trenzado, sin nada de la versión 1.
   Sólo mate dorado arriba + texto JIcrea abajo, apilados.
   Los 2 PNGs tienen MUCHO padding transparente (mate ocupa ~50% del
   alto, texto ocupa ~30% del alto). Usamos margin-bottom negativo en
   el mate + margin-top negativo en el texto para que las partes
   visibles se acerquen y parezcan un solo bloque cohesivo. */
.page-index-v2 .header__logo--v2 {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  text-decoration: none;
  line-height: 0; /* Sin line-height heredado que infle el bloque */
}
.page-index-v2 .header__logo--v2::before,
.page-index-v2 .header__logo--v2::after { display: none !important; }
/* Mate y texto apilados verticalmente, pegaditos pero SIN superponerse.
   Margins negativos suaves — sólo compensan el padding transparente
   sin invadir el espacio visible del otro elemento. */
.page-index-v2 .header__v2-mate {
  /* Mate -10% adicional (era 2.6-3.8rem, ahora 2.3-3.4rem). */
  width: clamp(2.3rem, 2.7vw, 3.4rem);
  height: auto;
  display: block;
  margin-bottom: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
.page-index-v2 .header__v2-text {
  width: clamp(7.5rem, 8.5vw, 11rem);
  height: auto;
  display: block;
  /* Pequeño respiro entre mate y texto: 0 margin (los PNGs naturales
     ya quedan apenas separados gracias a su padding intrínseco). */
  margin-top: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

/* Nav links v2 — más limpios, color cream-dorado sobre el hero dark */
.page-index-v2 .header--v2 .header__nav {
  align-items: center;
  gap: clamp(2rem, 2.5vw, 3.5rem);
  font-size: clamp(1.1rem, 0.95vw, 1.35rem);
  letter-spacing: 0.24em;
  font-weight: 600;
}
.page-index-v2 .header--v2 .header__nav a {
  color: rgba(244, 235, 225, 0.92);
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}
.page-index-v2 .header--v2 .header__nav a:hover { color: var(--c-brand); }
.page-index-v2 .header--v2 .header__nav a.is-current { color: var(--c-brand); }
.page-index-v2 .header--v2 .header__nav a::after { display: none; }

/* ─── i18n toggle button (EN/ES) ──────────────────────────────────
   Pill chico al lado del bag icon en el nav-right. Muestra el OTRO
   idioma — al hacer click cambia el idioma actual. */
.i18n-toggle {
  background: transparent;
  border: 1px solid rgba(203, 160, 88, 0.5);
  color: rgba(244, 235, 225, 0.92);
  cursor: pointer;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.18em;
  border-radius: 999px;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.i18n-toggle:hover {
  background: rgba(203, 160, 88, 0.18);
  border-color: var(--c-brand);
  color: var(--c-brand);
}

/* Icono bag al final del nav derecho.
   Cuando es un <button> (cart-btn en tienda/producto) reseteamos
   background/border para que se vea igual que el <a> del index. */
.page-index-v2 .header__v2-bag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(244, 235, 225, 0.92);
  padding: 0.4rem;
  position: relative;
  margin-left: 0; /* override del cart-btn original */
  transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.page-index-v2 .header__v2-bag:hover { color: var(--c-brand); transform: translateY(-2px); }

/* En mobile el logo achica pero NO desaparece — la idea v2 es "logo
   siempre presente". Nav un poco más chico y gap menor. */
@media (max-width: 640px) {
  .page-index-v2 .header--v2 { padding: 0.6rem 1rem 0.5rem; gap: 0.6rem; }
  .page-index-v2 .header__v2-mate {
    width: 1.9rem;
    margin-bottom: 0;
  }
  .page-index-v2 .header__v2-text {
    width: 5.6rem;
    margin-top: 0;
  }
  /* En mobile el grid sigue funcionando — el logo ya está centrado. */
  .page-index-v2 .header--v2 .header__nav {
    gap: 1.4rem;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
  }
  /* En pantallas chicas ocultamos "Nuestra Historia" para que no se
     amontone con el logo central. Queda el bag + Proceso. */
  .page-index-v2 .header--v2 .header__nav--right a:not(.header__v2-bag):nth-of-type(2) {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   INDEX V2 — TIPOGRAFÍA DELICADA (Cormorant Garamond en TODOS los títulos)
   ════════════════════════════════════════════════════════════════════════
   El dueño pidió "más delicado, cálido y sencillo — no tanta letra grande
   y bold". Reemplazamos super-med (heavy display) por Cormorant Garamond
   en todos los headers principales de la página. Pesos 400-500 para
   suavidad. Italic en acentos para sensación editorial.
   Scopeado a body.page-index-v2 — index original mantiene super-med.
   ════════════════════════════════════════════════════════════════════════ */
.page-index-v2 .manifesto__title,
.page-index-v2 .productos__giant,
.page-index-v2 .amargor__giant,
.page-index-v2 .b2b__title,
.page-index-v2 .origen-museo__main-title,
.page-index-v2 .origen-museo__title,
.page-index-v2 .proceso-3d__title-text {
  font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.005em;
}

/* Tamaños recalibrados — Cormorant a la misma px nominal se ve más alto
   que super-med, así que bajamos los clamps para no abrumar. */
.page-index-v2 .manifesto__title {
  font-size: clamp(2.6rem, 4vw, 5rem) !important;
  line-height: 1.08 !important;
}
.page-index-v2 .amargor__giant {
  font-size: clamp(2.6rem, 5.5vw, 7rem) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
}
.page-index-v2 .productos__giant {
  font-size: clamp(5rem, 10vw, 18rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em;
}
/* Sin texto gigante detrás del mate: el título va arriba (Nuestros mates). */
.page-index-v2 .productos__bg { display: none !important; }
/* Título "Nuestros mates" (gana al estilo h2 genérico de la página). */
.page-index-v2 .productos__heading {
  font-family: var(--font-serif) !important;
  font-size: clamp(2.6rem, 5vw, 4.6rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  line-height: 1.05 !important;
  color: #2A1810 !important;
  /* Más separación con el mate de abajo (antes .5rem quedaba pegado). */
  margin: 0 0 clamp(2.4rem, 5vw, 5rem) !important;
}
.page-index-v2 .origen-museo__main-title {
  font-size: clamp(2.6rem, 4.2vw, 5.4rem) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
}
.page-index-v2 .origen-museo__title {
  font-size: clamp(1.6rem, 1.9vw, 2.3rem) !important;
  font-weight: 600 !important;
}

/* Textos de cuerpo en serif también — más cálido que sans-serif geométrico */
.page-index-v2 .manifesto__text,
.page-index-v2 .amargor__text,
.page-index-v2 .productos__desc,
.page-index-v2 .b2b__lead,
.page-index-v2 .origen-museo__corner p,
.page-index-v2 .producto-hero__short,
.page-index-v2 .producto-hero__title,
.page-index-v2 .seccion-prod__head .manifesto__title,
.page-index-v2 .seccion-prod__head .manifesto__text,
.page-index-v2 .tienda-card__name,
.page-index-v2 .tienda-card__desc,
.page-index-v2 .prod__name,
.page-index-v2 .prod__desc,
.page-index-v2 .hist-title,
.page-index-v2 .hist-lead,
.page-index-v2 .hist-body p,
.page-index-v2 .hist-mision__text,
.page-index-v2 .hist-callout__text {
  font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal;
  letter-spacing: 0.005em !important;
}
/* Títulos: weight 500 para presencia (los cuerpos quedan en 400). */
.page-index-v2 .producto-hero__title,
.page-index-v2 .seccion-prod__head .manifesto__title,
.page-index-v2 .tienda-card__name,
.page-index-v2 .prod__name,
.page-index-v2 .hist-title,
.page-index-v2 .hist-mision__text,
.page-index-v2 .hist-callout__text {
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  line-height: 1.08 !important;
}
/* Headers de sección un poco más calmos en mayúsculas pero NO con
   tracking 2px del super-med — Cormorant respira mejor con menos. */
.page-index-v2 .seccion-prod__head .manifesto__title {
  font-size: clamp(2.8rem, 4vw, 5rem) !important;
  letter-spacing: 0.005em !important;
}
/* Lead/desc en italic Garamond cuando aplica para acentuar */
.page-index-v2 .producto-hero__short,
.page-index-v2 .seccion-prod__head .manifesto__text,
.page-index-v2 .tienda-card__desc,
.page-index-v2 .prod__desc,
.page-index-v2 .hist-body p {
  font-style: italic !important;
}
.page-index-v2 .manifesto__text {
  font-size: clamp(1.6rem, 1.5vw, 2.2rem) !important;
  line-height: 1.55 !important;
}
.page-index-v2 .amargor__text {
  font-size: clamp(1.75rem, 2.1vw, 2.5rem) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: var(--c-text) !important;
  max-width: 46ch !important;
}
/* Descripción del selector de mates ("Calabaza curada. La forma más antigua…"):
   el italic fino peso 400 quedaba casi invisible sobre el cuero. Subo el peso y
   la pongo derecha para que se lea claro, con el mismo color que el título. */
.page-index-v2 .productos__desc {
  color: #2A1810 !important;
  font-weight: 600 !important;
  font-style: normal !important;
}

/* Eyebrows tipo Garamond italic — "PARA DISTRIBUIDORES", etc */
.page-index-v2 .eyebrow,
.page-index-v2 .b2b__eyebrow {
  font-family: "EB Garamond", "Times New Roman", Georgia, serif !important;
  font-style: italic !important;
  letter-spacing: 0.32em !important;
  font-weight: 600 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   STATS V2 — 4 estadísticas (+100 clientes, 100%, +50 productos, UY)
   ════════════════════════════════════════════════════════════════════════
   Fondo dark-leather (cuero oscuro tipo verde-musgo). Grid 4 col / 2x2
   en mobile. Números enormes Cormorant en dorado, labels italic Garamond.
   Va antes de la sección mayorista — refuerza confianza con datos. */
.stats-v2 {
  position: relative;
  padding: clamp(5rem, 8vw, 11rem) var(--gutter);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(203, 160, 88, 0.06), transparent 60%),
    linear-gradient(135deg, #2b3a2c 0%, #1f2b1f 50%, #15201a 100%);
  color: var(--c-text-alt);
  overflow: hidden;
}
.stats-v2::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: 0.5;
  mix-blend-mode: overlay;
}
.stats-v2 > * { position: relative; z-index: 1; }
.stats-v2__inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.stats-v2__eyebrow {
  display: block;
  font-family: "EB Garamond", "Times New Roman", Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: 4rem;
}
.stats-v2__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  align-items: center;
}
.stats-v2__item {
  position: relative;
  padding: 0 1rem;
}
.stats-v2__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -1rem;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(203, 160, 88, 0.32) 50%, transparent 100%);
}
.stats-v2__num {
  display: block;
  font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
  font-size: clamp(4.2rem, 6.5vw, 9rem);
  font-weight: 500;
  line-height: 1;
  color: var(--c-brand);
  letter-spacing: -0.01em;
  margin-bottom: 1.4rem;
}
.stats-v2__label {
  display: block;
  font-family: "EB Garamond", "Times New Roman", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.3rem, 1.2vw, 1.7rem);
  letter-spacing: 0.06em;
  color: rgba(244, 235, 225, 0.82);
}
@media (max-width: 720px) {
  .stats-v2 { padding: 4rem 1.4rem !important; }
  .stats-v2__grid { grid-template-columns: repeat(2, 1fr); gap: 3rem 1.6rem; }
  .stats-v2__item:nth-child(2n)::after,
  .stats-v2__item:nth-child(3)::after { display: none; }
  .stats-v2__eyebrow { margin-bottom: 3rem; font-size: 1.1rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   B2B V2 — Mayorista rediseñada según mockup del dueño
   ════════════════════════════════════════════════════════════════════════
   Fondo verde profundo (dark-leaf). Eyebrow con guión "— PARA DISTRIBUIDORES".
   Título serif "¿Querés vender JIcrea?" con "JIcrea" en italic más grande.
   Lista de 3 items con flechita → en cuadrito a la izquierda. CTA verde
   WhatsApp grande. Todo en Cormorant Garamond — cálido, editorial.
   ════════════════════════════════════════════════════════════════════════ */
.b2b-v2 {
  position: relative;
  padding: clamp(6rem, 10vw, 14rem) var(--gutter);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(203, 160, 88, 0.05), transparent 60%),
    linear-gradient(135deg, #1f2b1f 0%, #15201a 60%, #0d1410 100%);
  color: var(--c-text-alt);
  overflow: hidden;
}
.b2b-v2::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.20 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: 0.45;
  mix-blend-mode: overlay;
}
.b2b-v2 > * { position: relative; z-index: 1; }
.b2b-v2__inner {
  max-width: 980px;
  margin: 0 auto;
}

.b2b-v2__eyebrow {
  display: inline-block;
  font-family: "EB Garamond", "Times New Roman", Georgia, serif;
  font-style: italic;
  font-size: 1.35rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: 2rem;
}
.b2b-v2__title {
  font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
  font-size: clamp(4rem, 7vw, 9rem);
  font-weight: 500;
  line-height: 1.0;
  color: var(--c-text-alt);
  margin: 0 0 2.4rem;
  letter-spacing: -0.005em;
}
.b2b-v2__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--c-brand);
  /* Mismo font-size que el resto del título — el bump previo (1.04em)
     desalineaba el "?" que viene después porque la línea base subía. */
}
.b2b-v2__lead {
  max-width: 720px;
  font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
  font-size: clamp(1.5rem, 1.4vw, 2rem);
  line-height: 1.55;
  color: rgba(244, 235, 225, 0.85);
  margin: 0 0 5rem;
}

/* Lista features con flechita en cuadrito a la izquierda + título/desc */
.b2b-v2__features {
  list-style: none;
  margin: 0 0 4rem;
  padding: 0;
}
.b2b-v2__feature {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(203, 160, 88, 0.18);
}
.b2b-v2__feature:first-child { border-top: 1px solid rgba(203, 160, 88, 0.18); }
.b2b-v2__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  border: 1px solid rgba(203, 160, 88, 0.45);
  color: var(--c-brand);
  border-radius: 4px;
  transition: background-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.b2b-v2__feature:hover .b2b-v2__arrow {
  background: rgba(203, 160, 88, 0.12);
  transform: translateX(4px);
}
.b2b-v2__feature-text h3 {
  font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
  font-size: clamp(1.8rem, 1.8vw, 2.4rem);
  font-weight: 600;
  margin: 0 0 0.4rem;
  color: var(--c-text-alt);
}
.b2b-v2__feature-text p {
  font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
  font-size: clamp(1.4rem, 1.25vw, 1.8rem);
  line-height: 1.45;
  margin: 0;
  color: rgba(244, 235, 225, 0.7);
}

/* CTA verde WhatsApp grande */
.b2b-v2__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  width: fit-content;
  max-width: 100%;
  /* Centrado horizontal dentro del .b2b-v2__inner */
  margin-left: auto;
  margin-right: auto;
  padding: 1.8rem 3.6rem;
  background: #25D366;
  color: #0A0807;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.05vw, 1.4rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.30);
  transition: background-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.b2b-v2__cta:hover {
  background: #1ebe5b;
  transform: translateY(-3px);
  box-shadow: 0 9px 0 rgba(0, 0, 0, 0.35);
}

@media (max-width: 720px) {
  .b2b-v2 { padding: 5rem 1.4rem !important; }
  .b2b-v2__title { font-size: clamp(3.2rem, 9vw, 5.4rem); }
  .b2b-v2__lead { margin-bottom: 3rem; font-size: 1.55rem; }
  /* CENTRADO MOBILE — el resto de la página está centrado, así que
     b2b también. Head (eyebrow + title + lead) centrado, cards con
     contenido apilado y centrado (arrow arriba, texto debajo). */
  .b2b-v2__head { text-align: center; }
  .b2b-v2__lead { margin-left: auto; margin-right: auto; }
  /* En mobile cada feature pasa a ser una CARD vertical centrada —
     fondo sutil, border + padding generoso, arrow arriba del texto. */
  .b2b-v2__features {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
  }
  .b2b-v2__feature {
    padding: 2rem 1.6rem !important;
    gap: 1.2rem !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    background: rgba(255, 250, 235, 0.04);
    border: 1px solid rgba(203, 160, 88, 0.22) !important;
    border-radius: 6px !important;
    border-bottom: 1px solid rgba(203, 160, 88, 0.22) !important;
  }
  .b2b-v2__feature:first-child { border-top: 1px solid rgba(203, 160, 88, 0.22) !important; }
  /* En mobile las flechitas no aportan — el card ya queda elegante
     solo con título + descripción centrada. */
  .b2b-v2__arrow { display: none !important; }
  .b2b-v2__feature-text { text-align: center; }
  .b2b-v2__feature-text h3 { font-size: 1.6rem; }
  .b2b-v2__feature-text p { font-size: 1.4rem; }
  .b2b-v2__cta {
    width: 100%;
    justify-content: center;
    padding: 1.6rem 1.4rem;
    font-size: 1.15rem;
    letter-spacing: 0.14em;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   MOBILE — overrides para celular (≤640px y ≤480px)
   ════════════════════════════════════════════════════════════════════════
   El sitio se diseñó desktop-first. Acá compactamos todo para que en un
   iPhone SE / 12 / Android estándar (320–414px de ancho) se vea pulido:
     · Header slim siempre (modo "scrolled" forzado) + sin side-texts
     · Hero tipografía escalada para no overflow
     · Manifesto / amargor / productos: padding + font reducidos
     · Origen museo: layout vertical en cuadrícula simple
     · B2B / footer: stack vertical limpio
   Las páginas tienda/producto/historia tienen su propio bloque en sus CSS
   respectivos. Estos overrides son SOLO para index.html y las clases
   compartidas (.header, .footer, .hero, .manifesto, etc).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root {
    --header-h: 6.4rem; /* Header SIEMPRE slim en mobile (vs 10rem desktop) */
    --gutter: 1.6rem;   /* Gutters más chicos para aprovechar el ancho */
  }

  /* ─── HEADER MOBILE — PLACA COMPACTA ────────────────────────────────
     En mobile la placa cuero se mantiene (sigue viéndose premium) pero
     compacta: cuadrada de ~5.4rem, sólo con el ícono mate dorado
     centrado. El trenzado decorativo (::before) y la costura punteada
     (::after) se conservan, escalados proporcionalmente al tamaño chico.
     Side-texts (DESDE 2015 / HECHOS A MANO) ocultos — no entran. */
  /* El fondo del header se extiende hacia ARRIBA dentro del notch
     (padding-top = safe-area) y su contenido (logo/links) queda DEBAJO del
     status bar. Con viewport-fit=cover, env() devuelve la altura real del
     notch; sin notch devuelve 0 y no cambia nada. Vale para reposo y scrolled. */
  .header,
  .header.is-scrolled {
    height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 1.4rem 0;
  }
  .header__logo {
    width: 5.4rem !important;
    height: 5.4rem !important;
    border-radius: 6px;
  }
  /* Trenzado externo deshabilitado, sólo queda la costura punteada
     pegada al borde para que se siga viendo en placa chica. */
  .header__logo::after { inset: 5px !important; border-radius: 3px !important; }
  .header.is-scrolled .header__logo,
  .header.is-scrolled .header__logo:hover {
    width: 5.4rem !important;
    height: 5.4rem !important;
  }
  /* Esconder el logo abierto (con frases laterales) — no hay espacio */
  .header__logo--open,
  .header__side-text { display: none !important; }
  /* Mostrar siempre el cerrado, sin transición */
  .header__logo--closed {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
    width: 62%;
  }
  /* Nav: tipografía + gap reducidos para que entre */
  .header__nav {
    gap: 1rem;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
  }
  .header__nav a {
    padding-bottom: 1px;
  }
  /* En index el hero es dark — el nav arranca cream sobre dark. Ya está. */

  /* ─── HERO ───────────────────────────────────────────────────────────
     Título escalable, subtítulo legible, padding generoso */
  .hero {
    height: 100vh;
    min-height: 560px;
    padding: 0 1.6rem;
  }
  .hero__title {
    font-size: clamp(3.2rem, 13vw, 6rem) !important;
    line-height: 1.0;
    letter-spacing: 1px;
  }
  .hero__subtitle {
    font-size: 1.35rem !important;
    line-height: 1.55;
    margin-top: 1.6rem;
    max-width: 92%;
  }
  /* Hero cinema en mobile — padding-left más chico, todo más compacto.
     El título mantiene su escala pero permitimos <br> wrap natural. */
  .hero--cinema .hero__inner--left {
    padding: 0 1.8rem;
    padding-bottom: 7rem;
    width: 100%;
  }
  .hero--cinema .hero__title {
    /* En mobile el título tiene que quedar SIEMPRE en 2 líneas
       ("DEL CAMPO" / "A TUS MANOS", "PIEZAS" / "HECHAS A MANO",
       "NUESTRA" / "HISTORIA"). El font-size es lo suficientemente
       chico para que ambas líneas entren en 1 sola línea cada una. */
    font-size: clamp(3.4rem, 10vw, 5.6rem) !important;
    line-height: 1.0 !important;
    letter-spacing: 0 !important;
  }
  /* Cada .line ES una línea entera del título — nowrap para que NO
     wrappee dentro de sí misma. El font-size de arriba garantiza que
     "A TUS MANOS" (la más larga) entre en 1 sola línea a 360px. */
  .hero--cinema .line {
    white-space: nowrap !important;
    display: block;
  }
  .hero--cinema .hero__subtitle {
    font-size: 1.4rem !important;
    line-height: 1.5 !important;
    max-width: 100%;
    white-space: normal !important;
    color: rgba(244, 235, 225, 0.92) !important;
  }
  .hero__rule { width: 54px; margin: 2rem 0 1.6rem; }
  /* CTA mobile: full-width tap target, fondo dorado sutil para que se
     vea como botón premium, no solo texto. */
  .hero__cta {
    display: inline-flex;
    align-self: flex-start;
    font-size: 1.15rem !important;
    letter-spacing: 0.24em;
    margin-top: 2.4rem;
    padding: 1.2rem 2rem;
    border: 1px solid var(--c-brand);
    border-radius: 2px;
    background: rgba(203, 160, 88, 0.06);
    backdrop-filter: blur(2px);
  }
  /* Eyebrow del hero (cuando existe, ej historia) más legible */
  .historia-hero__eyebrow,
  .hero__eyebrow {
    font-size: 1.15rem !important;
    letter-spacing: 0.32em !important;
    margin-bottom: 1.4rem !important;
  }

  /* ─── MANIFESTO ──────────────────────────────────────────────────────
     "La importancia del mate" y similares — encajados con menos padding */
  .manifesto {
    padding: 6rem 1.6rem 1.6rem !important;
  }
  .manifesto__title {
    font-size: 2.8rem !important;
    letter-spacing: 1px;
    line-height: 1.08;
  }
  .manifesto__text {
    font-size: 1.4rem !important;
    line-height: 1.5;
  }
  .manifesto__icon {
    width: 1.4rem;
    height: 1.4rem;
    margin-bottom: 1rem;
  }

  /* ─── ORIGEN MUSEO ───────────────────────────────────────────────────
     Las 4 esquinas + el porongo central — en mobile pasa a stack vertical.
     Cada corner se muestra como una card simple, el porongo del centro
     se intercala como pieza visual. */
  .origen-museo {
    padding: 5rem 1.4rem !important;
  }
  .origen-museo__main-title {
    font-size: 2.4rem !important;
    letter-spacing: 0.5px;
    line-height: 1.1;
  }
  /* ═══════════════════════════════════════════════════════════════
     ORIGEN MUSEO — Mobile con 4 ilustraciones en esquinas (como PC)
     ═══════════════════════════════════════════════════════════════
     Layout pedido por el dueño: igual que desktop pero achicado al
     ancho mobile. Porongo central + 4 ilustraciones en las 4 esquinas
     (tl/tr/bl/br) formando un cuadrante perfecto alrededor del mate.
     Las descripciones (h3 + p) van debajo del cuadrante, en stack
     vertical, sin cards — sólo texto sobre el cream.

     Técnica: CSS Grid 3 columnas (auto 1fr auto) + display:contents
     en .corner para que sus hijos (icon + content) se vuelvan items
     directos del grid. Así podemos:
     - Icons → cells de esquina del grid 2x2 (rows 1-2)
     - Center → cell central (col 2, span row 1-2)
     - Contents → rows 3-6 spanning full width
  */
  .origen-museo {
    position: relative;
    overflow: visible !important;
  }
  .origen-museo__grid {
    display: grid !important;
    /* 3 columnas iguales — los íconos toman su 1fr propio + se overlap
       hacia adentro de la columna central con margin negativo. El porongo
       sigue dominando visualmente por z-index 2 y su tamaño grande. */
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 0.4rem 0;
    align-items: center;
    flex-direction: unset !important;
    position: static;
  }
  /* display:contents — sacamos la .corner box y sus hijos (icon +
     content) suben a ser items directos del grid */
  .origen-museo__corner {
    display: contents !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  /* Las 4 ilustraciones GRANDES, metidas debajo/atrás del porongo —
     referencia Cartapani (las ilustraciones casi tocan o se meten
     bajo la bolsa central). */
  .origen-museo__corner .origen-museo__icon {
    position: static !important;
    width: 11rem !important;
    height: 11rem !important;
    z-index: 1; /* DEBAJO del porongo (z-index 2) */
    pointer-events: none;
    opacity: 0.88;
    margin: 0 !important;
    align-self: center;
    /* Look tinta sobre papel — multiply hace que el bg cream se
       una con el dibujo, sin recorte blanco. */
    mix-blend-mode: multiply;
    filter: saturate(0.5) brightness(0.9);
  }
  /* Cada ícono a su esquina del cuadrante, OVERLAPPING hacia el
     centro con margin negativo (se mete bajo el porongo). */
  .origen-museo__corner--tl .origen-museo__icon {
    grid-column: 1; grid-row: 1;
    transform: rotate(-4deg);
    justify-self: end;
    margin-right: -2.4rem !important;
  }
  .origen-museo__corner--tr .origen-museo__icon {
    grid-column: 3; grid-row: 1;
    transform: rotate(4deg);
    justify-self: start;
    margin-left: -2.4rem !important;
  }
  .origen-museo__corner--bl .origen-museo__icon {
    grid-column: 1; grid-row: 2;
    transform: rotate(-3deg);
    justify-self: end;
    margin-right: -2.4rem !important;
  }
  .origen-museo__corner--br .origen-museo__icon {
    grid-column: 3; grid-row: 2;
    transform: rotate(3deg);
    justify-self: start;
    margin-left: -2.4rem !important;
  }
  /* Porongo dominante — z-index 2 para que tape parcialmente los
     íconos que se meten debajo. width chico para que las
     ilustraciones tengan espacio a los costados. */
  .origen-museo__center {
    grid-column: 2;
    grid-row: 1 / 3;
    order: 0;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    justify-self: center;
    align-self: center;
    position: relative;
    z-index: 2;
  }
  .origen-museo__img {
    width: 100%;
    height: auto;
    max-width: 18rem;
    display: block;
    margin: 0 auto;
  }
  /* Cada bloque de texto (h3 + p) va en su propia row debajo del
     cuadrante, ancho completo, sin cards — sólo texto centrado
     (coherente con el resto de la página mobile). */
  .origen-museo__content {
    grid-column: 1 / -1;
    padding: 0 1.2rem;
    text-align: center;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
  }
  .origen-museo__corner--tl .origen-museo__content { grid-row: 3; margin-top: 2rem; }
  .origen-museo__corner--tr .origen-museo__content { grid-row: 4; }
  .origen-museo__corner--bl .origen-museo__content { grid-row: 5; }
  .origen-museo__corner--br .origen-museo__content { grid-row: 6; }
  /* Separación entre bloques de texto */
  .origen-museo__corner--tr .origen-museo__content,
  .origen-museo__corner--bl .origen-museo__content,
  .origen-museo__corner--br .origen-museo__content {
    margin-top: 1.8rem;
  }
  .origen-museo__title {
    font-size: 1.7rem !important;
    margin-bottom: 0.6rem !important;
    color: #2A1810;
  }
  .origen-museo__corner p {
    font-size: 1.4rem !important;
    line-height: 1.55;
    color: rgba(42, 24, 16, 0.78);
    margin: 0;
  }

  /* ─── PROCESO VIDEO ──────────────────────────────────────────────────
     El title overlay tiene que ser más chico para no chocar con bordes */
  .proceso-3d__title-text {
    font-size: clamp(2.8rem, 10vw, 4.8rem) !important;
    line-height: 1.05;
    letter-spacing: 0.5px;
  }
  .proceso-3d__title-eyebrow {
    font-size: 1.05rem;
    letter-spacing: 0.22em;
    margin-bottom: 1.4rem;
  }

  /* ─── CARDS DE MOMENTOS (index) ──────────────────────────────────────
     Las 3 polaroids — en mobile las mantenemos como polaroids reales:
     frame cream/cuero, rotación alterna sutil, ligeramente off-center
     para sensación "fotos sobre la mesa" en vez de tarjetas planas. */
  .cards {
    padding: 5rem 1.4rem 6rem !important;
    display: block !important; /* override del flex de desktop */
  }
  .cards__inner {
    width: 100% !important;
    aspect-ratio: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.8rem;
    padding: 1.6rem 0;
  }
  .card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 80% !important;
    max-width: 320px;
    height: auto !important;
    aspect-ratio: 4 / 5; /* proporción polaroid clásica */
    margin-bottom: 0 !important;
    /* Polaroid frame — fondo cream con padding inferior más grande
       (espacio "para escribir") y sombra cuero. */
    background: #FAF3E8;
    padding: 0.9rem 0.9rem 3.6rem;
    box-shadow:
      0 1px 0 rgba(107, 68, 35, 0.18),
      0 18px 30px -10px rgba(46, 24, 12, 0.35),
      0 30px 60px -20px rgba(46, 24, 12, 0.25);
    border-radius: 2px;
  }
  /* Rotación alternada — polaroid 1 izq, polaroid 2 der, polaroid 3 izq.
     Pequeña así no rompe el flow de scroll. */
  .card--left   { transform: rotate(-3deg) !important; z-index: 3 !important; }
  .card--center { transform: rotate(2.5deg) !important; z-index: 2 !important; margin-top: -2rem !important; }
  .card--right  { transform: rotate(-2deg) !important; z-index: 1 !important; margin-top: -2rem !important; }
  .card__media {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #2A1810;
  }
  .card__media img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
  }

  /* ─── AMARGOR (es amargo / es lento / es nuestro) ──────────────────── */
  .amargor {
    padding: 5rem 1.4rem !important;
  }
  .amargor__giant {
    font-size: 3.6rem !important;
    line-height: 1.05;
  }
  .amargor__text {
    font-size: 1.5rem !important;
    margin-top: 2rem;
    line-height: 1.5;
  }

  /* ─── PRODUCTOS SELECTOR (index — Porongo/Algarrobo/etc) ─────────────
     Stack vertical: eyebrow, mate, tabs, descripción. El giant title
     "NUESTROS / MATES" se oculta en mobile — superpuesto con eyebrow
     y mate creaba un revoltijo visual sin sumar contexto. */
  .productos {
    padding: 5rem 1.4rem !important;
  }
  .productos__bg { display: none !important; }
  .productos__inner { padding: 2rem 0 !important; }
  /* Eyebrow grande en mobile — el user pidió tipografía más grande.
     Ahora con <br> entre "Calidad" y "en lo sencillo" rompe en 2
     líneas, lo que permite agrandarla sin que se desborde. */
  .productos__eyebrow {
    font-size: 2.6rem !important;
    letter-spacing: 0.2em !important;
    line-height: 1.25 !important;
    text-align: center;
    margin-bottom: 3rem !important;
    white-space: normal;
    /* Quitamos el font-weight bold default del .eyebrow para que se
       lea más editorial (Garamond italic shines en weight 600). */
  }
  .productos__stage {
    width: 100% !important;
    height: 28rem !important;
  }
  .productos__mate {
    width: 80%;
    max-width: 22rem;
  }
  .productos__tabs {
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
  }
  .productos__tab {
    font-size: 1.1rem !important;
    padding: 0.8rem 1.2rem !important;
  }
  .productos__desc {
    /* Texto oscuro como el resto de la sección (las tabs PORONGO,
       PORONGO C/CUERO, etc también son dark earth). El user prefiere
       coherencia con la sección que un texto cream contrastando. */
    font-size: 1.7rem !important;
    line-height: 1.5;
    margin-top: 2rem;
    color: #2A1810 !important;
    font-weight: 500 !important;
    padding: 0 1rem;
    font-style: normal !important;
    text-shadow: none !important;
  }

  /* ─── B2B (Para tu negocio) ─────────────────────────────────────────── */
  .b2b {
    padding: 5rem 1.4rem !important;
  }
  .b2b__title { font-size: 2.6rem !important; line-height: 1.1; }
  .b2b__lead  { font-size: 1.4rem !important; line-height: 1.5; }
  .b2b__features { gap: 2.4rem !important; }
  .b2b__feature-title { font-size: 1.7rem !important; }
  .b2b__feature-desc  { font-size: 1.35rem !important; }
  .b2b__cta-grande {
    padding: 1.4rem 2rem !important;
    font-size: 1.2rem !important;
    width: 100%;
    justify-content: center;
  }

  /* ─── FOOTER ────────────────────────────────────────────────────────── */
  .footer {
    padding: 4rem 1.6rem 2rem !important;
  }
  .footer__cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 2.4rem 1.6rem !important;
  }
  .footer__col h4 { font-size: 1.3rem !important; }
  .footer__col a, .footer__col p { font-size: 1.25rem !important; }
  .footer__base { font-size: 1.1rem !important; padding-top: 2rem; }

  /* ─── WHATSAPP FAB ───────────────────────────────────────────────────
     Más chico y posicionado para no chocar con la isla flotante. */
  .wa-fab {
    bottom: 1.4rem !important;
    right: 1.4rem !important;
    width: 5rem;
    height: 5rem;
  }
}

/* ─── MOBILE SUPER CHICO (iPhone SE / 320–360px) ─────────────────────── */
@media (max-width: 380px) {
  :root { --gutter: 1.2rem; }
  .header__nav { gap: 0.7rem; font-size: 0.95rem; }
  .hero__title { font-size: clamp(2.8rem, 12vw, 5rem) !important; }
  .manifesto__title { font-size: 2.4rem !important; }
  .amargor__giant { font-size: 3rem !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   HAMBURGER + MOBILE MENU OVERLAY
   ════════════════════════════════════════════════════════════════════════
   Filosofía: desktop mantiene su nav horizontal limpio; mobile (≤900px)
   colapsa los links a un overlay full-screen estilo "drawer cinematográfico"
   con fondo cuero, links serif XL, gold accents. Cart + logo siempre
   visibles en el header (no se ocultan nunca — son CTAs críticos).
   ════════════════════════════════════════════════════════════════════════ */

/* HAMBURGER BUTTON — invisible en desktop, sale en mobile.
   El color se adapta dinámicamente al tema del fondo: cream sobre
   dark, terracotta-cream sobre leather, dark sobre páginas scrolleadas.
   Por default arranca cream — coherente con hero dark del index/tienda/
   historia. */
.hamburger {
  display: none;
  position: relative;
  z-index: 110;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  color: var(--c-text-alt);  /* default: cream para hero dark inicial */
  transition: color 0.4s var(--ease-out);
  /* Touch target ≥44x44px (WCAG). El padding del span lo logra. */
}
/* COLOR DINÁMICO — matchea las reglas del .header__nav a para que el
   hamburger se vea siempre, sea cual sea el fondo de la sección actual. */
.header.is-dark-bg .hamburger,
.header[data-theme="dark"]:not(.is-scrolled) .hamburger {
  color: var(--c-text-alt);  /* cream brillante sobre fondo oscuro */
}
.header.is-leather-bg .hamburger {
  color: #F0E2C9;  /* cream cálido sobre cuero terracotta */
}
.header.is-scrolled .hamburger {
  color: #2A1810;  /* dark earth sobre cream — scrolled state */
}
.header.is-scrolled.is-dark-bg .hamburger {
  color: var(--c-text-alt);
}
.header.is-scrolled.is-leather-bg .hamburger {
  color: #F0E2C9;
}
/* Cuando el menu está abierto, el hamburger queda sobre el overlay
   cuero — siempre cream (alto contraste). */
.hamburger[aria-expanded="true"] {
  color: #F4EBE1 !important;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.35s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.25s ease,
    background-color 0.3s var(--ease-out);
}
.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* MOBILE MENU OVERLAY — fullscreen drawer cinematográfico */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 105;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition:
    opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1),
    visibility 0s linear 0.4s;
}
.mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transition:
    opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1),
    visibility 0s linear 0s;
}
/* Background cuero (mismo que el page-curtain — coherencia visual) */
.mobile-menu__bg {
  position: absolute;
  inset: 0;
  background-color: var(--c-earth, #2A1810);
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(255, 230, 200, 0.16), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(46, 24, 12, 0.30), transparent 65%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: cover, cover, 180px 180px;
  background-blend-mode: normal, normal, overlay;
}
.mobile-menu__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(244, 235, 225, 0.18);
  border-radius: 999px;
  color: #F4EBE1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.mobile-menu__close:hover {
  background: rgba(244, 235, 225, 0.08);
  border-color: rgba(244, 235, 225, 0.35);
}
.mobile-menu__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  padding: 2rem;
  text-align: center;
  /* Stagger animation desde abajo cuando se abre el menú */
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1) 0.1s, opacity 0.55s ease 0.1s;
}
.mobile-menu.is-open .mobile-menu__inner {
  transform: translateY(0);
  opacity: 1;
}
/* Links — serif XL, gold hairline animation en hover */
.mobile-menu__link {
  position: relative;
  font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
  font-size: clamp(3rem, 7vw, 4.4rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #F4EBE1;
  text-decoration: none;
  line-height: 1.1;
  padding: 0.4rem 0;
  transition: color 0.3s var(--ease-out);
}
.mobile-menu__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--c-brand, #CBA058);
  transform: translateX(-50%);
  transition: width 0.4s var(--ease-out);
}
.mobile-menu__link:hover { color: var(--c-brand, #CBA058); }
.mobile-menu__link:hover::after { width: 60%; }

.mobile-menu__lang {
  margin-top: 1.4rem;
  padding: 1rem 2.4rem;
  background: transparent;
  border: 1px solid rgba(244, 235, 225, 0.3);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: #F4EBE1;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.mobile-menu__lang:hover {
  background: var(--c-brand, #CBA058);
  border-color: var(--c-brand, #CBA058);
  color: #2A1810;
}
.mobile-menu__ig {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.4rem;
  padding: 1rem 2rem;
  color: var(--c-brand, #CBA058);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  transition: opacity 0.3s var(--ease-out);
}
.mobile-menu__ig:hover { opacity: 0.7; }

/* Lock scroll cuando el menú está abierto */
body.menu-open { overflow: hidden; }

/* ─── MOBILE ACTIVATION (≤900px) ────────────────────────────────────────
   Acá es donde el hamburger se vuelve visible, los nav links desktop se
   ocultan, y el layout se reordena para que el cart quede a la derecha
   sin importar el viewport. */
@media (max-width: 900px) {

  /* Mostrar hamburger */
  .hamburger { display: inline-flex; }

  /* Ocultar links de texto del nav desktop — aparecen en el overlay.
     PERO mantenemos #i18nToggle y #cartBtn visibles porque viven al
     lado uno del otro como acciones rápidas en el header. */
  .header__nav--left { display: none !important; }
  .header__nav--right > a { display: none !important; }

  /* El header__nav--right ahora contiene solo el EN toggle + cart.
     Quedan al borde derecho con gap chico. */
  .header__nav--right {
    margin-left: auto;
    gap: 0.8rem;
    align-items: center;
  }

  /* ─── NAVBAR MOBILE — sólido oscuro SIEMPRE (incluso scrolled) ───
     CRÍTICO: en desktop hay una regla '.page-index-v2 .header.is-scrolled'
     que pone bg: rgba(10,8,7,0.55) + blur (semi-transparente). En
     mobile NO queremos eso — queremos sólido siempre. La selector
     '.page-index-v2 .header.is-scrolled' tiene specificity 0,3,0
     así que necesitamos al menos esa specificity para ganar.

     Listo todos los variantes posibles: con .is-scrolled, con .is-hidden,
     con .header--v2 — todos sólidos #140C06. */
  /* NAVBAR mobile LIMPIO — top:0 natural, bg sólido dark en TODOS los
     estados, sin transforms.

     IMPORTANTE: NADA de transform/will-change acá. Transform sobre un
     position:fixed es un bug conocido de iOS Safari — al recomponer
     (URL bar collapse, blend groups) el elemento puede quedar anclado
     a la página en vez del viewport. Ese era uno de los dos bugs que
     teníamos (el otro: mix-blend-mode sin isolation, ya arreglado).

     La cobertura del notch la hace el .ios-spacer (arriba del archivo),
     que es un bloque simple sin clases dinámicas — config probada.

     transition: none mata cualquier fade que muestre transparencia.
     Specificity body.page-index-v2 (sin espacio) le gana a la regla
     desktop .page-index-v2 .header.is-scrolled { rgba(...) blur }. */
  body.page-index-v2 .header,
  body.page-index-v2 .header.is-scrolled,
  body.page-index-v2 .header.is-scrolled.is-dark-bg,
  body.page-index-v2 .header.is-scrolled.is-leather-bg,
  body.page-index-v2 .header.is-hidden,
  body.page-index-v2 .header--v2,
  body.page-index-v2 .header--v2.is-scrolled,
  html body .header,
  html body .header.is-scrolled,
  html body .header.is-scrolled.is-dark-bg,
  html body .header.is-scrolled.is-leather-bg,
  html body .header.is-hidden {
    background: #140C06 !important;
    background-color: #140C06 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto;
    top: 0 !important;
    box-shadow: 0 1px 0 rgba(203, 160, 88, 0.22), 0 4px 16px rgba(0, 0, 0, 0.25);
  }
  /* Lock cream — override de TODAS las reglas dinámicas (is-scrolled
     / is-dark-bg / is-leather-bg). Cream siempre. */
  .hamburger,
  .header.is-scrolled .hamburger,
  .header.is-leather-bg .hamburger,
  .header.is-scrolled.is-leather-bg .hamburger {
    color: #F4EBE1 !important;
  }
  .header__nav--right .i18n-toggle,
  .header.is-scrolled .header__nav--right .i18n-toggle {
    padding: 0.4rem 0.8rem;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    color: #F4EBE1 !important;
    border-color: rgba(244, 235, 225, 0.4) !important;
    opacity: 0.95;
  }
  .header__nav--right .i18n-toggle:hover { opacity: 1; }
  /* Cart icon también cream siempre */
  .page-index-v2 .header__v2-bag,
  .header.is-scrolled .page-index-v2 .header__v2-bag {
    color: #F4EBE1 !important;
  }
  .page-index-v2 .cart-btn__count {
    /* Badge dorado del contador del carrito — se mantiene */
    background: var(--c-brand, #CBA058) !important;
    color: #2A1810 !important;
  }
  /* Logo del header (mate dorado + texto JIcrea) — el texto JIcrea
     blanco siempre, sin filtros que lo manchen */
  .page-index-v2 .header__v2-text {
    filter: brightness(1.05);
  }

  /* Ocultar el lang toggle DUPLICADO dentro del mobile menu — ahora
     vive en el header. Mantenemos el HTML por compatibilidad con
     traducciones que pudieran apuntarle. */
  .mobile-menu__lang { display: none; }

  /* Logo central sigue centrado — el grid de 3 columnas auto del
     .page-index-v2 lo respeta. */
}

/* ════════════════════════════════════════════════════════════════════════
   ENTRY ANIMATIONS — sistema AOS-like nativo (IntersectionObserver)
   ════════════════════════════════════════════════════════════════════════
   Aplicar [data-aos="fade-up"] (o variantes) a cualquier elemento. El JS
   en jicrea-pro.js detecta cuando entra al viewport y agrega .aos-in.
   ECONOMÍA: solo opacity + transform (GPU-friendly). NO se usa intersection
   ratio threshold para evitar jitter — basta con "está visible" / "no está".

   Variantes disponibles:
     data-aos="fade-up"     → desde abajo, 30px (default)
     data-aos="fade-down"   → desde arriba
     data-aos="fade-left"   → desde la derecha hacia centro
     data-aos="fade-right"  → desde la izquierda hacia centro
     data-aos="scale-up"    → desde scale(0.92), opacity 0
     data-aos="fade"        → solo opacity (sin movimiento)

   Stagger: agregar data-aos-delay="100" (en ms) para escalar grupos.
   ════════════════════════════════════════════════════════════════════════ */
[data-aos] {
  opacity: 0;
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
[data-aos="fade-up"]    { transform: translate3d(0, 32px, 0); }
[data-aos="fade-down"]  { transform: translate3d(0, -32px, 0); }
[data-aos="fade-left"]  { transform: translate3d(32px, 0, 0); }
[data-aos="fade-right"] { transform: translate3d(-32px, 0, 0); }
[data-aos="scale-up"]   { transform: scale(0.92); }
[data-aos="fade"]       { transform: none; }
/* In-view state: anulamos transforms para que llegue a su posición natural */
[data-aos].aos-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Reduce motion: respetar preferencias del user — sin animaciones */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Botones del manifiesto de la tienda (Ver productos / Compra por mayor) ── */
.manifesto__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }
.manifesto__cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .95rem 2rem; border-radius: 100px; text-decoration: none;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600; letter-spacing: .01em;
  border: 1.6px solid transparent; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease;
}
.manifesto__cta--primary { background: #2A1810; color: #F4EBE1; }
.manifesto__cta--primary:hover { transform: translateY(-2px); background: #3d2718; }
.manifesto__cta--ghost { background: transparent; color: #2A1810; border-color: rgba(42,24,16,.32); }
.manifesto__cta--ghost:hover { background: rgba(42,24,16,.07); transform: translateY(-2px); }

/* ── CATEGORÍAS: bucle infinito de fotos (tienda) ─────────────────────────
   Track con el set duplicado; anima translateX -50% (seamless por el
   margin-right uniforme). Hover sobre el track pausa el bucle. */
/* .cat-loop SOLO recorta en horizontal; el padding vertical generoso deja
   lugar para la rotación y el scale del hover SIN que se corten las cards.
   El viewport NO lleva overflow (si no, recortaría vertical en el hover). */
.cat-loop { padding: clamp(3.5rem, 6vw, 6rem) 0; overflow: hidden; }
.cat-loop__viewport { width: 100%; }
.cat-loop__track { display: flex; align-items: center; width: max-content; animation: catLoop 42s linear infinite; will-change: transform; }
.cat-loop__track:hover { animation-play-state: paused; }
.cat-card {
  flex: 0 0 auto;
  width: clamp(220px, 22vw, 300px);
  aspect-ratio: 3 / 4;
  margin-right: clamp(1.2rem, 1.8vw, 1.8rem);
  border-radius: 16px;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 12px 32px rgba(20, 12, 6, .2);
  transform: rotate(-2.5deg);
  transition: transform .35s ease, box-shadow .35s ease;
}
/* Desorden tipo polaroid: rotaciones y alturas alternadas a los costados. */
.cat-card:nth-child(3n+1) { transform: rotate(-3.5deg) translateY(10px); }
.cat-card:nth-child(3n+2) { transform: rotate(2.5deg) translateY(-12px); }
.cat-card:nth-child(3n+3) { transform: rotate(-1.5deg) translateY(4px); }
.cat-card:hover { transform: rotate(0deg) translateY(-6px) scale(1.05); box-shadow: 0 22px 48px rgba(20, 12, 6, .34); z-index: 2; }
@keyframes catLoop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cat-loop__track { animation: none; } }

/* Botones del manifiesto sobre fondo claro: el outline necesita texto/borde
   oscuros (la versión de la sección mayorista usa texto claro para fondo dark). */
.manifesto__actions .cta-grande--outline { color: #2A1810; border-color: rgba(42, 24, 16, .4); background: transparent; }
.manifesto__actions .cta-grande--outline:hover { background: rgba(42, 24, 16, .07); color: #2A1810; }

/* ═══════════════════════════════════════════════════════════════════════
   NAVBAR MOBILE DEDICADO (≤900px) — barra propia, simple y fija, estilo
   KRAFT. En mobile escondemos el header de PC (arrastraba transiciones,
   smart-hide y blends que rompían el render fijo en iOS Safari). Esta barra
   es un elemento limpio: position:fixed, top:0, SIN transforms ni blends, y
   cubre el notch con padding-top: env(safe-area-inset-top) (requiere
   viewport-fit=cover, ya activo). Se inyecta por JS (jicrea-pro.js).
   ═══════════════════════════════════════════════════════════════════════ */
.mnav { display: none; }
@media (max-width: 900px) {
  /* Especificidad alta para ganarle a '.page-index-v2 .header--v2{display:grid!important}'. */
  .header,
  body.page-index-v2 .header--v2,
  body.page-index-v2 .header--v2.is-scrolled { display: none !important; }
  .mnav {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0; left: 0; right: 0;
    /* z-index 100 (igual que el header de PC): DEBAJO del carrito (201), su
       backdrop (200) y el menú mobile (105) para no tapar el botón de cerrar,
       y ARRIBA del contenido de la página. */
    z-index: 100;
    background: #140C06;
    padding: env(safe-area-inset-top, 0px) 1.6rem 0;
    height: calc(6.4rem + env(safe-area-inset-top, 0px));
    box-shadow: 0 1px 0 rgba(203, 160, 88, 0.22), 0 4px 16px rgba(0, 0, 0, 0.25);
    /* Smart hide: se esconde al bajar, vuelve al subir (como el header de PC). */
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .mnav.mnav--hidden { transform: translateY(-100%); }
  .mnav__burger {
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: 0; padding: 6px; cursor: pointer; z-index: 2;
  }
  .mnav__burger span { display: block; width: 24px; height: 2px; background: #F4EBE1; border-radius: 2px; }
  .mnav__logo {
    position: absolute; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  }
  .mnav__logo .mnav__mate { height: 2.6rem; width: auto; display: block; }
  .mnav__logo .mnav__text { height: 2rem; width: auto; display: block; }
  .mnav__actions { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; z-index: 2; }
  .mnav__lang {
    background: none; border: 1px solid rgba(244, 235, 225, 0.4); color: #F4EBE1;
    font-size: 1.1rem; letter-spacing: 0.12em; padding: 0.4rem 0.8rem;
    border-radius: 999px; cursor: pointer; font-family: var(--font-serif);
  }
  .mnav__cart { position: relative; background: none; border: 0; color: #F4EBE1; cursor: pointer; padding: 4px; display: flex; }
  .mnav__count {
    position: absolute; top: -4px; right: -4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--c-brand, #CBA058); color: #2A1810;
    font-size: 1rem; line-height: 16px; text-align: center; font-family: sans-serif; font-weight: 700;
  }
}