/* ============================================================
   NEXA SLAB — LOCAL FONTS
   Verificado sobre los archivos reales: thin / light / book / regular / bold
   renderizan TODOS con el mismo grosor; el unico bold real de la familia es
   black. Declarar pesos intermedios inexistentes era lo que volvia
   impredecible a <strong> y a font-weight (700 no se veia bold).
   Escala honesta: 400 = book, 700 y 900 = black.
   ============================================================ */
@font-face {
  font-family: 'Nexa Slab';
  src: url('../fonts/nexa-slab-book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nexa Slab';
  src: url('../fonts/nexa-slab-book-italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nexa Slab';
  src: url('../fonts/nexa-slab-black.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nexa Slab';
  src: url('../fonts/nexa-slab-black-italic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nexa Slab';
  src: url('../fonts/nexa-slab-black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nexa Slab';
  src: url('../fonts/nexa-slab-black-italic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   VARIABLES & RESET
   ============================================================ */
:root {
  --purple-dark:   #330B39;
  --purple:        #401651 ;
  --purple-mid:    #633979;
  --pink:          #f05a5a;
  --pink-light:    #f47a7a;
  --cream:         #F5EFE0;
  --cream-dark:    #ede8df;
  --yellow:        #FFBA31;
  --orange:        #E99F5D;
  --orange-dark:   #d4793a;
  --white:         #ffffff;
  --text-dark:     #330B39;

  --font-display:  'Nexa Slab', Georgia, serif;
  --font-impact:   'Nexa Slab', Georgia, serif;
  --font-body:     'Nexa Slab', Georgia, serif;

  --ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Ritmo de las animaciones en bucle ----
     Son las únicas que nunca terminan (vaso, loro, badge, las dos bandas y el
     botón flotante), así que son las que cansan si van rápido: están siempre
     en pantalla y compiten con la lectura. Se centralizan acá para poder
     ajustar el ritmo del sitio entero desde un solo lugar.
     Criterio: bucles decorativos por encima de los 6s, y marquees a ~35 px/s
     (por eso los tiempos de las bandas dependen de cuánto texto llevan: si se
     agregan o sacan ítems en el HTML, hay que recalcular la duración). */
  --loop-cup:    9s;
  --loop-parrot: 11s;
  --loop-badge:  6s;
  --loop-heart:  3.4s;
  --loop-ticker: 90s;   /* ~3.100px de recorrido */
  --loop-shout:  85s;   /* ~3.600px de recorrido */
}

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

html { scroll-behavior: smooth; }

/* ============================================================
   SCROLLBARS DE MARCA
   Dos mecanismos porque ninguno cubre todo solo:
   - scrollbar-width / scrollbar-color: el estándar. Firefox y Chrome 121+.
   - ::-webkit-scrollbar: Safari y Chrome viejo.
   OJO con el orden de precedencia: scrollbar-color SE HEREDA y, cuando está
   presente, el navegador moderno IGNORA los ::-webkit-scrollbar de ese
   elemento. Por eso cualquier scroll que quiera un aspecto propio tiene que
   redeclarar scrollbar-color, no alcanza con el pseudo-elemento.
   ============================================================ */
html {
  scrollbar-width: thin;
  /* pulgar / riel — sobre las secciones claras del sitio */
  scrollbar-color: var(--purple-mid) rgba(51, 11, 57, 0.10);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(51, 11, 57, 0.10); }
::-webkit-scrollbar-thumb {
  background: var(--purple-mid);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--purple-dark);
  background-clip: padding-box;
}

/* Sobre superficies violetas el riel oscuro desaparece: se aclara y el pulgar
   pasa al amarillo de marca al pasar el mouse. */
.oak-modal {
  scrollbar-color: var(--purple-mid) rgba(255, 255, 255, 0.08);
}
.oak-modal::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); }
.oak-modal::-webkit-scrollbar-thumb { background: var(--purple-mid); background-clip: padding-box; }
.oak-modal::-webkit-scrollbar-thumb:hover { background: var(--yellow); background-clip: padding-box; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text-dark);
  overflow-x: hidden;
  /* Prohibe al navegador fabricar negritas o itálicas falsas: si un peso no
     existe usa el real más cercano en vez de deformar los glifos. */
  font-synthesis: none;
  -webkit-font-synthesis: none;
}

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

/* Reset de headings — el navegador les aplica font-size y márgenes en em
   (h3 = 1.17em, margin = 1em). Todo el sitio define tamaños en px, así que se
   neutralizan acá: ningún heading depende de un valor relativo. Cada uno tiene
   su tamaño explícito en su propia regla, que gana por especificidad. */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  margin: 0;
}

/* Realce de texto — reemplaza a <strong>. La familia no tiene un bold
   intermedio (salta de regular a Black), así que los realces se diferencian
   por COLOR, nunca por peso. El color lo pone cada contexto. */
.hl { font-weight: 400; }

/* ============================================================
   CONTENT MAX-WIDTH  (1000px centrado)
   ============================================================ */
.section-menu,
.section-about,
.section-stats,
.section-brand,
.section-location,
.section-faq,
.section-social,
.section-franchise {
  padding-left:  max(1.5rem, calc((100% - 1000px) / 2));
  padding-right: max(1.5rem, calc((100% - 1000px) / 2));
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor {
  position: fixed;
  width: 12px; height: 12px;
  background: var(--pink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.15s var(--ease-smooth), width 0.3s, height 0.3s, background 0.3s;
  mix-blend-mode: multiply;
}
.cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 2px solid var(--pink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: left 0.08s var(--ease-smooth), top 0.08s var(--ease-smooth), width 0.3s, height 0.3s;
  opacity: 0.6;
}
.cursor.hover { width: 24px; height: 24px; background: var(--yellow); }
.cursor-ring.hover { width: 56px; height: 56px; border-color: var(--yellow); opacity: 0.3; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(1.5rem, calc((100% - 1000px) / 2));
  height: 64px;
  background: var(--purple-dark);
  transition: background 0.4s, box-shadow 0.4s;
}
.navbar.scrolled {
  background: rgba(45, 10, 78, 0.95);
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 32px rgba(45,10,78,0.4);
}

.nav-logo {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-impact);
  font-size: 24px;
  letter-spacing: 0.08em;
  color: var(--white);
}
/* El SVG es 239x31 (ratio 7.7:1). flex-shrink:0 evita que el flex lo comprima y
   object-fit:contain es la red de seguridad: si el reset global (img{max-width:100%})
   llega a recortar el ancho, el wordmark se achica pero nunca se deforma. */
.nav-logo img {
  height: 32px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.nav-logo-divider {
  width: 1px; height: 28px;
  background: rgba(255,255,255,0.3);
}
.nav-logo-country {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
}

.btn-nav {
  background: var(--pink);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 50px;
  border: none; cursor: pointer;
  transition: background 0.3s, transform 0.2s var(--ease-bounce), box-shadow 0.3s;
  white-space: nowrap;
}
.btn-nav:hover {
  background: var(--pink-light);
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(240,90,90,0.5);
}

/* ---- Relevo de CTA en la navbar ----
   Los dos botones comparten la misma celda del grid (fila 1 / columna 1), así
   que el hueco mide siempre lo del más ancho y nada se mueve al intercambiar.
   Arriba de todo manda el de franquicia; con .navbar.scrolled se desvanece y
   entra el de OAKBERRY CLUB. `visibility` además del opacity es lo que evita
   que el botón invisible siga siendo clickeable o alcanzable con Tab. */
.nav-cta-swap {
  display: grid;
  align-items: center;
  justify-items: end;
}
.nav-cta-swap > * {
  grid-area: 1 / 1;
  transition: opacity 0.35s var(--ease-smooth), transform 0.35s var(--ease-smooth), visibility 0.35s;
}
.btn-nav-club {
  background: var(--yellow);
  color: var(--purple-dark);
  display: inline-block;
  text-align: center;
}
.btn-nav-club:hover {
  background: var(--white);
  box-shadow: 0 6px 24px rgba(255,186,49,0.45);
}
.navbar .btn-nav-club {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}
.navbar.scrolled .btn-nav-franchise {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
}
.navbar.scrolled .btn-nav-club {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* El transform propio del relevo pisa al scale del hover de .btn-nav (misma
   especificidad, gana el que va después), así que se repone acá combinado. */
.navbar.scrolled .btn-nav-club:hover { transform: translateY(0) scale(1.05); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: calc(100vh - 52px);
  height: calc(100vh - 52px);
  /* iOS Safari: 100vh mide el viewport GRANDE, el de la barra del navegador
     retraída, que es más alto que lo que se ve al entrar. Con eso el hero
     quedaba más largo que la pantalla y la banda del ticker caía por debajo
     del pliegue. svh mide el viewport CHICO (barra desplegada), que es lo que
     realmente ve alguien al abrir el sitio.
     Va después del vh y no lo reemplaza: los navegadores viejos que no
     entienden svh descartan estas dos líneas y se quedan con el fallback. */
  min-height: calc(100svh - 52px);
  height: calc(100svh - 52px);
  background: var(--purple-dark);
  position: relative;
  overflow: hidden;
  /* Encierra el mix-blend-mode de .hero::after: sin esto la mezcla se
     propagaría al fondo de la página, fuera del hero. */
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 80px max(1.5rem, calc((100% - 1000px) / 2)) 0;
}

/* Radial glow background */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(100,30,160,0.6) 0%, rgba(45,10,78,0) 70%);
  pointer-events: none;
}

/* Textura de pasta de avellana fundida en el violeta.
   NO va como "imagen marrón al 15%": bajar la opacidad de un marrón sobre
   violeta lo enturbia y se ve sucio. Va con mix-blend-mode: soft-light, que
   toma sólo el RELIEVE del remolino (sus luces y sombras) y lo aplica sobre
   el color de la sección, así que el tono violeta se conserva intacto.
   La máscara radial la desvanece contra los bordes para que no se lea como
   un rectángulo pegado encima.
   z-index 1: por encima del glow, por debajo del texto y del vaso (ambos en 2). */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: url('../img/texturas/HAZELNUT-PASTE.webp') center / cover no-repeat;
  opacity: 0.3;
  mix-blend-mode: soft-light;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, #000 25%, transparent 82%);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, #000 25%, transparent 82%);
  pointer-events: none;
}

/* Decorative plants */
.hero-plant-left {
  position: absolute; left: -60px; bottom: 80px;
  width: 340px; opacity: 0.35;
  pointer-events: none;
  transform: rotate(-5deg);
}
.hero-plant-right {
  position: absolute; right: 0; bottom: 60px;
  width: 240px; opacity: 0.25;
  pointer-events: none;
}

/* Parrot — reposicionado por feedback del cliente (punto 2): un poco más arriba y a la izquierda */
.hero-parrot {
  position: absolute; top: 76px; right: 96px;
  width: 120px;
  height: 96px; /* mantiene la relación real 432x346 del archivo, evita que se estire */
  object-fit: contain;
  pointer-events: none;
  z-index: 10;
  animation: parrot-float var(--loop-parrot) ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
}
/* Planeo, no aleteo: recorrido corto y lento. Con los -18px y el giro de 6°
   que tenía antes el loro llamaba más la atención que el título del hero. */
@keyframes parrot-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-10px) rotate(2deg); }
}

/* ============================================================
   ENTRADA DEL HERO
   Es CSS puro y NO usa GSAP. Antes la hacía un timeline con .from():

   1) .from() tiene immediateRender: como js/main.js va con defer, el navegador
      ya había pintado el titular cuando GSAP le escribía opacity:0 encima. Eso
      era el parpadeo — el texto aparecía y desaparecía en el primer segundo.
   2) Peor: con .from() el estado VISIBLE es el que produce la animación, así
      que el H1 principal quedaba a merced del ticker de GSAP. Y ese ticker se
      atasca: tiene lagSmoothing, que ante frames lentos (la foto del vaso
      decodificando, más los bucles infinitos de esta hoja) avanza sólo 33ms por
      frame. Medido en Chrome: el eyebrow iba por el 89% después de 6s y el 98,9%
      después de 15s, con el título todavía en opacity:0 esperando su turno.

   Ahora el ciclo es: el script inline del <head> pone .js-anim antes del primer
   pintado (sin parpadeo posible) y, apenas termina de parsear el HTML, agrega
   .hero-in y estas transiciones llevan todo a su estado final. Ese script es el
   único responsable de las dos mitades, así que no pueden desincronizarse, y al
   ser transiciones CSS las maneja el compositor: no dependen de ninguna CDN ni
   de que el hilo principal esté libre.
   Sin JS directamente no hay .js-anim y el hero se ve tal cual está en el HTML.
   ============================================================ */
.js-anim .hero-eyebrow,
.js-anim .hero-title,
.js-anim .hero-subtitle,
.js-anim .hero-image-wrap {
  opacity: 0;
  transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
}
.js-anim .hero-eyebrow    { transform: translateY(20px); }
.js-anim .hero-title      { transform: translateY(50px); }
.js-anim .hero-subtitle   { transform: translateY(30px); }
.js-anim .hero-image-wrap { transform: translateX(60px); opacity: 1; }

/* El escalonado se hace con transition-delay, no con animaciones encadenadas:
   si una se pierde, las otras llegan igual. Tienen que ir DESPUÉS de las reglas
   .js-anim — misma especificidad, gana la última. */
.hero-in .hero-eyebrow,
.hero-in .hero-title,
.hero-in .hero-subtitle,
.hero-in .hero-image-wrap { opacity: 1; transform: none; }

.hero-in .hero-eyebrow    { transition-delay: 0.15s; }
.hero-in .hero-image-wrap { transition-delay: 0.20s; }
.hero-in .hero-title      { transition-delay: 0.30s; }
.hero-in .hero-subtitle   { transition-delay: 0.45s; }

/* Con movimiento reducido el hero igual entra, pero sólo fundiendo: se saca el
   desplazamiento y se deja la opacidad. Ver el bloque MOVIMIENTO REDUCIDO al
   final de esta hoja para el criterio completo. */
@media (prefers-reduced-motion: reduce) {
  .js-anim .hero-eyebrow,
  .js-anim .hero-title,
  .js-anim .hero-subtitle,
  .js-anim .hero-image-wrap { transform: none; }
}

/* Hero text */
.hero-content { z-index: 2; }

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 1.5rem;
}

.hero-title {
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 900;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 1.5rem;
}
.hero-title em {
  font-style: normal;
  color: var(--pink);
}
.hero-title .brand-name {
  font-style: normal;
  color: var(--white);
}

/* Es el único párrafo del hero y el que explica de qué se trata la marca:
   se le sube el cuerpo para que compita con el titular en vez de leerse como
   una nota al pie. Al agrandar la tipografía hay que agrandar también el
   max-width, si no las líneas se parten en tres o cuatro palabras. */
.hero-subtitle {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  max-width: 480px;
  margin-bottom: 2.5rem;
}
.hero-subtitle .hl { color: var(--white); }

.btn-hero {
  display: inline-block;
  background: var(--pink);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 16px 40px;
  border-radius: 50px;
  border: none; cursor: pointer;
  transition: all 0.3s var(--ease-bounce);
  box-shadow: 0 8px 32px rgba(240,90,90,0.4);
}

.btn-hero:hover {
  transform: scale(1.07) translateY(-2px);
  box-shadow: 0 16px 48px rgba(240,90,90,0.55);
  background: var(--pink-light);
}

/* Hero image */
.hero-image-wrap {
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  overflow: visible;
}
/* Feedback del cliente (punto 1): el bowl sube para quedar centrado con el bloque de texto */
.hero-cup {
  height: 72vh;
  height: 72svh;   /* mismo motivo que en .hero: si no, el vaso se dimensiona
                      contra un viewport más alto que el visible */
  width: auto;
  max-width: none;
  object-fit: contain;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(-16px 40px 50px rgba(0,0,0,0.55)) drop-shadow(16px 20px 40px rgba(0,0,0,0.3));
  transform-origin: bottom center;
  animation: cup-rock var(--loop-cup) ease-in-out infinite;
}
/* El vaso es el objeto más grande de la página: cualquier movimiento suyo se
   amplifica. A 3s con ±3° y 10px de rebote se leía como un balanceo nervioso
   y arrastraba la vista todo el tiempo. Mismo gesto, la mitad de amplitud y
   tres veces más lento: se nota que respira, no que se sacude. */
@keyframes cup-rock {
  0%   { transform: translateX(-50%) rotate(-1.5deg) translateY(0px); }
  25%  { transform: translateX(-50%) rotate(0deg)    translateY(-6px); }
  50%  { transform: translateX(-50%) rotate(1.5deg)  translateY(0px); }
  75%  { transform: translateX(-50%) rotate(0deg)    translateY(-6px); }
  100% { transform: translateX(-50%) rotate(-1.5deg) translateY(0px); }
}

/* Floating badge */
.hero-badge {
  position: absolute;
  left: 48%;
  bottom: 110px;
  background: var(--yellow);
  color: var(--purple-dark);
  font-family: var(--font-impact);
  font-size: 14px;
  letter-spacing: 0.1em;
  padding: 8px 18px;
  border-radius: 50px;
  transform: rotate(-4deg);
  box-shadow: 0 8px 24px rgba(245,183,49,0.4);
  white-space: nowrap;
  z-index: 3;
  animation: badge-pop var(--loop-badge) ease-in-out infinite;
}
@keyframes badge-pop {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50%       { transform: rotate(-4deg) scale(1.03); }
}

/* ============================================================
   TICKER / MARQUEE
   ============================================================ */
.ticker-wrap {
  background: var(--pink);
  padding: 14px 0;
  overflow: hidden;
  position: relative;
  z-index: 5;
}
.ticker-track {
  display: flex;
  gap: 0;
  animation: ticker-scroll var(--loop-ticker) linear infinite;
  width: max-content;
}
.ticker-item {
  font-family: var(--font-impact);
  font-size: 24px;
  letter-spacing: 0.18em;
  color: var(--white);
  white-space: nowrap;
  padding: 0 2rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.ticker-dot {
  color: rgba(255,255,255,0.7);
  font-size: 10px;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Banda #RESPECTTHEOAK ----
   Va entre STATS (naranja) y OAKVILLE (violeta). El fondo es un violeta más
   oscuro que --purple-dark a propósito: contra el naranja de arriba corta
   fuerte, y contra el violeta de abajo mantiene el borde visible en vez de
   fundirse con la sección.
   La separación entre ítems se hace con padding-right y NO con gap de flex:
   con gap, el translateX(-50%) queda media separación corrido y se ve el
   salto en cada vuelta del loop. */
.oak-shout {
  background: #26082C;
  overflow: hidden;
  position: relative;
  z-index: 5;
  padding: 9px 0;
}
.oak-shout-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll var(--loop-shout) linear infinite;
}
/* Nexa Slab es bastante más ancha que la tipografía de la referencia, así que
   con el cuerpo del print entrarían la mitad de repeticiones. Se baja el tamaño
   para recuperar la densidad de la banda sin achicar el alto de la franja. */
.oak-shout-item {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(19px, 2vw, 34px);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--white);
  white-space: nowrap;
  padding-right: 0.55em;
}

/* ============================================================
   ZIGZAG DIVIDERS
   ============================================================ */
.zz {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  position: relative;
  z-index: 4;
}

/* ---- Banner divisor fotográfico (Natural.webp) ----
   Cumple el mismo rol que .zz pero con una foto: los dientes del zigzag ya
   vienen recortados en el alfa de la imagen. El gradiente duro 50/50 de acá
   abajo es lo que se ve A TRAVÉS de esos dientes, así que sus dos colores
   tienen que coincidir con la sección de arriba y la de abajo. Hoy: FAQ
   (crema) y SOCIAL (violeta oscuro).
   El margin negativo tapa la costura de subpíxel que deja el escalado de la
   imagen contra el borde de las secciones vecinas. */
.zz-banner {
  position: relative;
  width: 100%;
  line-height: 0;
  z-index: 4;
  background: linear-gradient(to bottom, var(--cream) 50%, var(--purple-dark) 50%);
  margin-top: -1px;
  margin-bottom: -1px;
}
.zz-banner img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}
/* El aire vacío de la foto está a la izquierda, debajo del sello */
.zz-banner-copy {
  position: absolute;
  z-index: 2;
  left: 7%;
  top: 56%;
  transform: translateY(-50%);
  max-width: 42%;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(18px, 2.6vw, 44px);
  line-height: 1.15;
  color: var(--cream);
  text-wrap: balance;
}

/* Abajo de 768px el texto no entra sobre la foto sin pisar el vaso: queda
   sólo la imagen haciendo de divisor. */
@media (max-width: 767px) {
  .zz-banner-copy { display: none; }
}
.zz svg { display: block; width: 100%; }

.zz-linea-amarilla {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  position: relative;
  z-index: 4;
  background: linear-gradient(to bottom, var(--cream) 50%, var(--orange) 50%);
}
.zz-linea-amarilla img {
  display: block;
  width: 100%;
}

.zz-linea-amarilla--purple {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  position: relative;
  z-index: 4;
  background: linear-gradient(to bottom, var(--purple-dark) 50%, var(--yellow) 50%);
}
.zz-linea-amarilla--purple img {
  display: block;
  width: 100%;
}

/* Variante rosa: el divisor baja desde la banda de OAKBERRY CLUB hacia la
   sección amarilla. Acá la banda del SVG es amarilla y la sección de destino
   también, así que su mitad inferior no se ve: eran ~125px de amarillo plano
   que se leían como un hueco antes del título. Se recorta a la franja del
   zigzag superior, que es lo único que aporta.
   El aspect-ratio (en vez de un alto fijo) mantiene el recorte proporcional:
   con height fijo, en mobile el SVG renderiza más bajo que la caja y se
   deformaría. */
.zz-linea-amarilla--pink {
  background: var(--pink);
}
.zz-linea-amarilla--pink img {
  aspect-ratio: 13;
  height: auto;
  object-fit: cover;
  object-position: top center;
}

/* ============================================================
   FRANCHISE SECTION
   ============================================================ */
.section-franchise {
  background: var(--cream);
  padding-top: 90px;
  padding-bottom: 60px;
  text-align: center;
}

.franchise-label { justify-content: center; }

.franchise-heading {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 900;
  line-height: 1.08;
  color: var(--text-dark);
  margin-bottom: 2rem;
}
.franchise-heading em {
  font-style: italic;
  color: var(--pink);
}

.franchise-text {
  max-width: 640px;
  margin: 0 auto 3rem;
}
.franchise-text p {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(45,10,78,0.75);
  margin-bottom: 1.25rem;
}
.franchise-text p:last-child { margin-bottom: 0; }
.franchise-text .hl { color: var(--purple); }

/* Pilares del modelo de franquicia */
.franchise-pillars {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto 3rem;
}
/* Cards crema sobre el crema de la sección. Como fondo y card comparten
   familia de color, la separación NO puede depender del relleno: la dan el
   degradado (arranca casi blanco arriba a la izquierda y cierra en
   --cream-dark abajo a la derecha, o sea más claro que la página arriba y más
   oscuro abajo), más el borde violeta al 10% y la sombra.
   La jerarquía interna (número acento + título + descripción) es la misma de
   .oakville-steps li; ahí el acento es amarillo sobre violeta y acá es rosa
   sobre crema, porque el amarillo sobre crema no contrasta. */
.franchise-pillars li {
  position: relative;
  background: linear-gradient(155deg, #FFFDF7 0%, #F8F3E7 55%, var(--cream-dark) 100%);
  border: 1px solid rgba(51,11,57,0.10);
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  box-shadow: 0 12px 30px rgba(51,11,57,0.12),
              inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
}
/* Rosa de marca: medido 3,27:1 sobre el crema de la card. Cumple el umbral de
   texto grande (3:1, >=24px) y el número está a 32px, pero con poco margen:
   si alguna vez se achica, hay que oscurecer el rosa o pasarlo a violeta. */
.franchise-pillar-num {
  font-family: var(--font-impact);
  font-size: 32px;
  line-height: 1;
  color: var(--pink);
}
.franchise-pillar-title {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--purple-dark);
}
/* Mismo valor que .franchise-text p, para que la bajada de la card y el
   párrafo de arriba de la sección se lean como el mismo tono de texto. */
.franchise-pillars li span:last-child {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(45,10,78,0.75);
}
.franchise-pillars li:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(51,11,57,0.18),
              inset 0 1px 0 rgba(255,255,255,0.9);
}

@media (max-width: 900px) {
  .franchise-pillars { grid-template-columns: 1fr; }
  .franchise-pillars li { padding: 1.5rem 1.35rem; }
}

/* ============================================================
   MENU SECTION
   ============================================================ */
.section-menu {
  background: var(--cream);
  padding-top: 72px;
  padding-bottom: 72px;
}

/* Encabezado que existe para la estructura del documento (lectores de
   pantalla y extractores) pero no se dibuja: se usa donde el título visual
   ya lo cumplen otros elementos, como los tabs del menú. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.section-label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 16px;
}
.section-label::before {
  content: '';
  display: inline-block; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f05a5a'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- Tamaños de vaso (THE OAK en Argentina: 600 ml) ---- */
.menu-sizes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  margin: -16px 0 40px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(51,11,57,0.55);
}
.menu-sizes .menu-size-name {
  color: var(--purple-dark);
  letter-spacing: 0.14em;
  margin-right: 6px;
}

/* ---- Tab toggle ---- */
.menu-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}
.menu-tab {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(51, 11, 57, 0.32);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 28px;
  line-height: 1;
  transition: color 0.25s ease;
}
.menu-tab.active {
  color: var(--purple-dark);
  font-weight: 900;
}
.menu-tab-sep {
  display: block;
  width: 2px;
  height: 35px;
  background: rgba(51, 11, 57, 0.22);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ---- Panels ---- */
.menu-panel { display: none; }
.menu-panel.active { display: block; }

/* ---- Scrolling carousel (infinite loop) ---- */
.menu-carousel-viewport {
  overflow: hidden;
  width: 100%;
}
/* Full-bleed: el carrusel se escapa del ancho máximo de 1000px de .section-menu
   y ocupa el viewport completo. Debajo de 600px se mantiene el inset de la
   sección: a pantalla completa el nombre del producto quedaría pegado al borde. */
@media (min-width: 600px) {
  .menu-carousel-viewport {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}
.menu-carousel {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px;
  animation: menu-scroll linear infinite;
  will-change: transform;
}
.menu-prod-card {
  flex-shrink: 0;
  flex-grow: 0;
  min-width: 0;
}

/* ---- Product card ---- */
.menu-prod-img {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-prod-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* Placeholder cuando todavía no cargamos la foto oficial del producto */
.menu-prod-img.is-pending {
  background: var(--cream-dark);
  position: relative;
}
.menu-prod-img.is-pending img { display: none; }
.menu-prod-img.is-pending::after {
  content: '';
  position: absolute;
  inset: 22%;
  background: url('../img/Escudoak_Variation_Superfoods_Logo_Prancheta 1.png') center/contain no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.35;
}
.menu-prod-name {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: var(--purple-dark);
  margin: 0 0 9px;
  text-transform: uppercase;
}
.menu-prod-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(51, 11, 57, 0.7);
  margin-bottom: 0;
}
.menu-prod-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--purple-dark);
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
}
.menu-prod-cta:hover { opacity: 0.6; }

/* ---- Keyframe: infinite horizontal scroll ---- */
@keyframes menu-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--menu-scroll-to, -50%)); }
}

/* NOTA: desde el 2026-07-29 el menú usa tarjetas de TAMAÑO y ya no el carrusel
   de sabores. Todo lo de arriba (.menu-sizes, .menu-carousel*, .menu-prod-*,
   @keyframes menu-scroll) quedó sin uso en index.html, pero lo sigue usando
   docs/menu-sabores-respaldo.html. Se conserva para poder restaurar los
   sabores; si se descarta ese respaldo, este bloque se puede borrar entero. */

/* ============================================================
   MENÚ — TARJETAS DE TAMAÑO
   Espejo de oakberry.com/pt-BR. Los vasos ilustrados vienen en un lienzo
   compartido de 640x987, así que la diferencia de tamaño entre CLASSIC,
   WORKS y THE OAK ya está dibujada en el propio archivo. Para que se lea,
   las tres cajas tienen que compartir aspect-ratio y usar object-fit:contain:
   así el factor de escala es idéntico y la comparación es real. Cambiar el
   aspect-ratio a algo distinto de 640/987 rompe esa comparación.
   ============================================================ */
.menu-cat-desc {
  max-width: 640px;
  margin: -16px auto 40px;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(51, 11, 57, 0.7);
}

.menu-sizes-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
}

/* Bowls tiene cuatro tamaños (con BIG OAK) y smoothies tres. Con flex, cuatro
   tarjetas de 300px no entran en los 1000px de la sección y se van a dos filas
   3+1, que rompe la comparación de tamaños —que es todo el sentido de la fila—.
   Para ese caso se pasa a grid: cuatro columnas iguales que se achican juntas y
   recién a 620px bajan a 2x2, nunca a 3+1. */
/* align-items:start y no end: las cuatro miniaturas tienen el mismo
   aspect-ratio y el mismo ancho, así que alineadas arriba quedan también
   alineadas abajo. Con `end`, en cuanto una etiqueta se parte en dos líneas
   (pasa en mobile con "CLASSIC 350 ml") su vaso baja y se desalinea de los
   demás, que es justo lo que esta fila no puede permitirse. */
.menu-sizes-grid--4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}
.menu-sizes-grid--4 .menu-size-card { max-width: none; }
@media (max-width: 620px) {
  .menu-sizes-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

.menu-size-card {
  flex: 0 1 300px;
  max-width: 320px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.menu-size-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 640 / 987;
  background: var(--cream-dark);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}
.menu-size-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.menu-size-card:hover .menu-size-thumb,
.menu-size-card:focus-visible .menu-size-thumb {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(51, 11, 57, 0.18);
}
.menu-size-label {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--purple-dark);
  text-transform: uppercase;
}
.menu-size-label .menu-size-name { font-weight: 900; }
.menu-size-label .menu-size-ml {
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(51, 11, 57, 0.55);
  text-transform: none;
}
.menu-size-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple-dark);
  border: 2px solid var(--purple-dark);
  border-radius: 999px;
  padding: 9px 22px;
  transition: background 0.25s, color 0.25s;
}
.menu-size-card:hover .menu-size-cta,
.menu-size-card:focus-visible .menu-size-cta {
  background: var(--purple-dark);
  color: var(--cream);
}

@media (max-width: 720px) {
  .menu-sizes-grid { gap: 28px; }
  .menu-size-card  { flex-basis: 240px; }
}

/* ============================================================
   MENÚ — MODAL DE PRODUCTO
   ============================================================ */
/* Doble clase a propósito: .oak-modal (max-width 480px) está declarado más
   abajo en esta misma hoja, en el bloque MODAL DE FRANQUICIA. Con una sola
   clase acá ganaría por orden y el modal de producto quedaría a 480px con el
   contenido desbordado. No bajar la especificidad. */
.oak-modal.oak-modal--product {
  max-width: 940px;
  padding: 2.75rem 2rem 2rem;
  text-align: left;
}
.menu-modal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 820px) {
  .oak-modal.oak-modal--product { padding: 2.75rem 2.5rem 2.25rem; }
  .menu-modal-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2.5rem; }
}

.menu-modal-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 1.25rem;
}

/* Lista de tamaños: se resalta aquel desde el que se abrió el modal */
.menu-modal-sizes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}
.menu-modal-sizes li {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  transition: color 0.2s;
}
.menu-modal-sizes .mm-size { font-weight: 900; letter-spacing: 0.03em; }
.menu-modal-sizes .mm-ml {
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-left: 6px;
}
.menu-modal-sizes li.is-active { color: var(--yellow); }

.menu-modal-cup {
  display: block;
  width: 100%;
  max-width: 250px;
  height: auto;
  margin: 0 auto 1.5rem;
}
.menu-modal-seals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
/* El de marca viene con fondo blanco: se recorta en círculo para que no quede
   un cuadrado sobre el violeta (mismo criterio que .oakville-seal). El de
   Kosher ya es transparente, así que se apoya entero sobre el disco. */
.menu-modal-seals img {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--white);
}
.menu-modal-seals img[src*="kosher"] { object-fit: contain; }

.menu-modal-subhead {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.75rem;
}
.menu-modal-nutri .menu-modal-subhead:not(:first-child) { margin-top: 1.5rem; }

/* La tabla puede desbordar en pantallas chicas: scrollea dentro de su caja,
   nunca empuja el ancho del modal. */
.menu-modal-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  background: var(--white);
}
/* table-layout:fixed + los anchos del <colgroup>: sin esto el navegador
   reparte el ancho según el contenido de cada columna y las tres columnas
   numéricas terminan con anchos distintos, que es lo que se veía torcido. */
.menu-modal-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--purple-dark);
  min-width: 300px;
}
/* 44% no es arbitrario: es el mínimo con el que "Azúcares añadidos" —la
   etiqueta más larga— entra en una sola línea en un teléfono de 390px. Con
   menos, esa fila crecía a dos líneas y rompía la simetría de la tabla. */
.mm-col-label { width: 44%; }
.mm-col-num   { width: 18.66%; }

.menu-modal-table th,
.menu-modal-table td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(51, 11, 57, 0.12);
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
  /* Las celdas numéricas NO parten: "84 kcal" se leía como "84 / kcal" */
  white-space: nowrap;
}
.menu-modal-table thead th {
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.03em;
}
/* La etiqueta de fila y su encabezado comparten alineación: antes "Cantidad"
   iba a la derecha sobre una columna de textos alineados a la izquierda. */
.menu-modal-table tbody th,
.menu-modal-table thead th:first-child {
  text-align: left;
  white-space: normal;
}
.menu-modal-table tbody th { font-weight: 300; }
.menu-modal-table tbody tr:last-child th,
.menu-modal-table tbody tr:last-child td { border-bottom: none; }

.menu-modal-note {
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.75rem;
}
.menu-modal-ing {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

/* ---- Toppings ---- */
.menu-modal-toppings {
  margin-top: 2.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.5rem;
}
.menu-toppings-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1.25rem;
}
.menu-toppings-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 22px;
  color: var(--yellow);
}
.menu-toppings-legend {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}
.menu-toppings-legend b { color: var(--yellow); font-weight: 900; }

.menu-toppings-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 620px) {
  .menu-toppings-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.menu-topping-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.6rem;
}
.menu-topping-group ul + .menu-topping-name { margin-top: 1.25rem; }
.menu-topping-extra {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.5);
}
.menu-topping-group ul { list-style: none; }
.menu-topping-group li {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  padding: 3px 0;
}
/* Bloque de toppings premium: va debajo de las tres columnas y a ancho
   completo, para que se lea como un apartado aparte y no como una cuarta
   categoría más del mismo nivel. */
.menu-toppings-cols--premium {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* Dos columnas y no tres, como en la carta: son 7 items y varios llevan precio
   + marcas, así que a tres columnas los nombres largos ("Granola almendras y
   sal marina") se parten en dos líneas y la grilla queda despareja. Se usa
   multi-columna en vez de grid para que el orden de lectura sea hacia abajo
   primero —4 y 3— igual que en el impreso. */
@media (min-width: 620px) {
  .menu-toppings-cols--premium { grid-template-columns: 1fr; }
  .menu-toppings-cols--premium .menu-topping-group ul {
    columns: 2;
    column-gap: 2.5rem;
  }
  .menu-toppings-cols--premium .menu-topping-group li { break-inside: avoid; }
  /* Sin esto el balanceo automático reparte 3 y 4; la carta corta después de
     "Granola almendras y sal marina", que es el cuarto. */
  .menu-toppings-cols--premium .menu-topping-group li:nth-child(4) { break-after: column; }
}
.menu-toppings-foot {
  margin-top: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
}
.menu-toppings-foot b { color: var(--yellow); font-weight: 900; }

.tp-cal { color: rgba(255, 255, 255, 0.45); font-size: 11.5px; }

/* Marcas de la carta: los mismos cuatro pictogramas del impreso (hoja doble =
   vegano, espiga tachada = libre de gluten, bellota = nueces, sello AK =
   kosher). Los tres primeros salen del sprite <symbol> que está en el modal y
   toman el color por currentColor; el AK es el PNG real del sello. */
.tp-ico {
  display: inline-block;
  width: 17px;
  height: 17px;
  vertical-align: -3.5px;
  fill: currentColor;
  color: rgba(255, 255, 255, 0.8);
}
/* El sello AK es un PNG azul marino: brightness(0) invert(1) lo lleva a blanco
   puro para que iguale a los SVG (mismo truco que el wordmark de la navbar). */
.tp-ico--ak {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}
/* La bellota va en amarillo: es la única marca que es un alérgeno, o sea la
   única donde no verla puede terminar mal. */
.tp-ico--n { color: var(--yellow); }
/* Los "NEW" de la carta. En rosa, como en el impreso. */
.tp-new {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--pink);
  border-radius: 50px;
  padding: 1px 6px;
  vertical-align: 1px;
}
.menu-topping-name--premium { color: var(--pink); }

/* Guía de marcas: mismo lugar que en la carta, justo antes de la letra chica. */
.menu-toppings-guide {
  margin-top: 1.5rem;
  font-size: 12px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.6);
}
.menu-toppings-guide b {
  color: var(--white);
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* En un teléfono de 390px el modal quedaba con 278px útiles y la tabla, que
   no baja de 300px, obligaba a scrollear en horizontal. Se recupera ancho
   achicando el padding lateral del modal y comprimiendo la tabla: con esto
   entra entera y deja de haber scroll lateral. */
@media (max-width: 560px) {
  .oak-modal.oak-modal--product { padding: 2.5rem 1.1rem 1.5rem; }
  .menu-modal-table { font-size: 12px; }
  .menu-modal-table th,
  .menu-modal-table td { padding: 7px 4px; }
  .menu-modal-table thead th { font-size: 11px; }
  .menu-modal-cup { max-width: 200px; }
}

/* Sólo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   ABOUT / NXT LVL SECTION
   ============================================================ */
.section-about {
  background: var(--cream);
  padding-top: 80px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.about-left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.about-video {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(45,10,78,0.18);
}
.about-video video {
  display: block;
  width: 100%;
  height: auto;
}

.about-headline {
  font-family: var(--font-impact);
  font-size: 112px;
  line-height: 1;
  font-weight: 900;
  color: var(--text-dark);
}
.about-headline .accent { color: var(--pink); }

.about-text { max-width: 480px; }
.about-lead {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: 22px !important;
  font-weight: 900;
  color: var(--purple-dark) !important;
  line-height: 1.3 !important;
  margin-bottom: 1rem !important;
}
.about-text p {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(45,10,78,0.75);
  margin-bottom: 1.25rem;
}
.about-text p .hl { color: var(--text-dark); }
.about-text p em {
  font-style: italic;
  color: var(--purple-mid);
  font-weight: 400;
}

/* ============================================================
   STATS SECTION
   ============================================================ */
.section-stats {
  background: var(--orange);
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
  position: relative;
}

.stats-title {
  font-family: var(--font-display);
  font-size: 45px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: 0.04em;
  margin-bottom: 3rem;
}
.stats-title em { font-style: italic; color: var(--purple-dark); }

/* El sprite sólo define los <symbol>: no debe ocupar lugar ni empujar la grilla */
.stats-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Las seis cifras van en UNA sola fila, así que esta banda usa un ancho propio
   más generoso que los 1000px del resto del sitio: a 1000px las cards caerían
   a 153px y las etiquetas en castellano (más largas que las portuguesas de la
   referencia) romperían en tres líneas. Es una excepción deliberada y se puede
   sostener porque la sección es una banda full-bleed sin columna de texto. */
.section-stats {
  padding-left:  max(1.5rem, calc((100% - 1180px) / 2));
  padding-right: max(1.5rem, calc((100% - 1180px) / 2));
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.9rem;
}

/* Cards sobre el naranja de la sección, como en la referencia de Brasil.
   El degradado es muy corto a propósito (crema claro -> --cream-dark): sobre
   naranja, cualquier salto más marcado se lee como suciedad y no como
   volumen. Todo el contenido está dimensionado para el peor caso: en un
   portátil de 1024px las cards bajan a ~149px y tiene que seguir entrando. */
.stat-item {
  background: linear-gradient(155deg, #FBF8F1 0%, var(--cream) 52%, var(--cream-dark) 100%);
  border: 1px solid rgba(51,11,57,0.07);
  border-radius: 16px;
  padding: 1.15rem 0.6rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 8px 20px rgba(51,11,57,0.10);
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
}
.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(51,11,57,0.16);
}

/* fill hereda de currentColor: el color del icono se define acá, no en el SVG */
.stat-icon {
  width: 36px;
  height: 36px;
  display: block;
  color: var(--purple);
  fill: currentColor;
}

.stat-number {
  font-family: var(--font-impact);
  font-size: clamp(26px, 2.6vw, 34px);
  color: var(--purple-dark);
  line-height: 1;
  white-space: nowrap;
}
.stat-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(51,11,57,0.6);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   BRAND STORY SECTION
   ============================================================ */
.section-brand {
  background: var(--purple-dark);
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.section-brand::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(74,18,120,0.6) 0%, transparent 70%);
  pointer-events: none;
}

.brand-title {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 900;
  font-style: italic;
  color: var(--white);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
.brand-title span { color: var(--yellow); }

.brand-desc {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(255,255,255,0.7);
  max-width: 640px;
  margin: 0 auto 1.5rem;
  position: relative; z-index: 1;
}
.brand-desc .hl { color: var(--white); }

/* ---- OAKVILLE: origen (mapa de Brasil + ficha de Santa Izabel do Pará) ----
   La línea guía amarilla que sale del pin NO es CSS: está dibujada dentro de
   MAP.webp y termina sobre el borde derecho de la imagen, al 70% de su altura.
   Por eso las columnas van en % fijos y no en fr con gap libre: con 65.5% /
   32.5% el extremo de la línea aterriza justo entre la foto y el título de la
   ficha. Si se tocan esos anchos, la línea deja de conectar con nada. */
.oakville-origin {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 65.5% 32.5%;
  justify-content: space-between;
  align-items: start;
  margin: 3.5rem 0 1rem;
  text-align: left;
}
.oakville-map img,
.oakville-origin-card img {
  display: block;
  width: 100%;
  height: auto;
}
/* El borde amarillo redondeado de la ficha ya viene quemado en factory-3.webp */
.oakville-origin-card figcaption {
  margin-top: 0.9rem;
  text-align: center;
}
.oakville-origin-title {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.9vw, 21px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--yellow);
  margin-bottom: 0.7rem;
}
.oakville-origin-card p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--white);
}
/* Avioneta decorativa: sangra hacia el gutter izquierdo sobre el suroeste del
   mapa. En pantallas < 1000px se va del ancho de contenido y la recorta el
   overflow:hidden de .section-brand, igual que en la referencia. */
.oakville-plane {
  position: absolute;
  left: -17%;
  top: 70%;
  width: 29%;
  max-width: 300px;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* ---- OAKVILLE: proceso ---- */
.oakville-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 3rem 0;
  text-align: left;
  position: relative; z-index: 1;
}
.oakville-steps li {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.oakville-step-num {
  font-family: var(--font-impact);
  font-size: 32px;
  line-height: 1;
  color: var(--yellow);
}
.oakville-step-title {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--white);
}
.oakville-steps span:last-child {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.65);
}

/* ---- OAKVILLE: certificaciones + logo secundario ---- */
.oakville-certs {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
  position: relative; z-index: 1;
}
/* El PNG del sello viene con fondo blanco: lo recortamos en círculo para que no
   quede un cuadrado blanco sobre el violeta. */
.oakville-seal {
  width: 120px; height: 120px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
/* Grupo de sellos: logo OAKBERRY + certificación Kosher */
.oakville-cert-marks {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
/* Sello Kosher AK. A diferencia del de marca, este SÍ tiene canal alfa
   (img/kosher-ak.png, generado a partir del original que venía como cuadrado
   blanco con el círculo pegado al borde: así se veía un filo blanco y el
   recorte circular del CSS le comía el anillo). Al ser transparente ya no se
   recorta con `cover`: se apoya entero sobre el disco blanco que hereda de
   .oakville-seal, con su propio margen dentro del PNG. */
.oakville-seal-kosher {
  width: 120px;
  height: 120px;
  object-fit: contain;
}
.oakville-certs p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
}
.oakville-certs .hl { color: var(--yellow); }

@media (max-width: 900px) {
  .oakville-steps { grid-template-columns: 1fr; }
  .oakville-certs { flex-direction: column; text-align: center; }

  /* Apilado. El mapa se recorta por la derecha con object-fit para no arrastrar
     el codo de la línea guía, que solo tiene sentido con la ficha al costado.
     1.128 = 2136/1571 x 0.83, o sea el 83% izquierdo de MAP.webp. */
  .oakville-origin {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2rem;
    margin-bottom: 0;
  }
  .oakville-map { width: 100%; max-width: 440px; }
  .oakville-map img {
    aspect-ratio: 1.128;
    object-fit: cover;
    object-position: left center;
  }
  .oakville-origin-card { width: 100%; max-width: 300px; }
  .oakville-plane {
    left: -6%;
    top: 24%;
    width: 42%;
    max-width: 200px;
  }
}

/* ============================================================
   OAKBERRY CLUB
   ============================================================ */
.section-club {
  background: var(--pink);
  padding: 96px max(1.5rem, calc((100% - 1000px) / 2));
  text-align: center;
  /* La navbar es fixed y mide 64px: sin esto el ancla #club de la propia
     navbar deja el título tapado. */
  scroll-margin-top: 64px;
}
.club-eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 12px;
}
.club-title {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}
.club-title em { font-style: italic; color: var(--purple-dark); }

/* La bajada carga el mecanismo completo del programa, así que va más grande
   que un subtítulo normal: es la frase que tiene que entenderse de una
   pasada. El <strong> se resalta por COLOR, no por peso: la familia no tiene
   un bold intermedio (ver nota en .hl). */
.club-lead {
  font-size: 19px;
  line-height: 1.65;
  color: rgba(255,255,255,0.88);
  max-width: 640px;
  margin: 0 auto 2.5rem;
}
.club-lead strong {
  display: block;
  font-weight: 400;
  color: var(--purple-dark);
  font-size: 22px;
  line-height: 1.45;
  margin: 0.6rem 0;
}

/* ---- Tarjeta de sellos ----
   Es la pieza que explica el programa sin leer: 9 sellos + el premio. Los
   cinco primeros van "cargados" a propósito, para que se lea como una tarjeta
   en uso y no como una grilla vacía. */
.club-card {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 22px;
  padding: 1.5rem 1.75rem 1.75rem;
  max-width: 640px;
  margin: 0 auto 3rem;
  backdrop-filter: blur(4px);
}
.club-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin-bottom: 1.25rem;
}
.club-card-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}
.club-card-count {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--purple-dark);
  background: var(--yellow);
  border-radius: 50px;
  padding: 4px 12px;
}
.club-stamps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.club-stamp {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* El escudo ya viene recortado en círculo y con su propio aire: a 82% del
   disco queda un anillo blanco parejo alrededor, que es lo que hace que se lea
   como un sello estampado sobre la tarjeta y no como un logo pegado. */
.club-stamp img {
  width: 82%;
  height: auto;
  object-fit: contain;
}
/* Sello todavía sin marcar: sólo el contorno y el número de orden. */
.club-stamp.is-empty {
  background: transparent;
  border: 2px dashed rgba(255,255,255,0.55);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  color: rgba(255,255,255,0.65);
}
.club-stamp.is-prize {
  background: var(--yellow);
  border: none;
}
.club-stamp-prize-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--purple-dark);
  text-align: center;
}

/* ---- Los tres pasos ---- */
.club-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto 2.75rem;
  text-align: left;
}
.club-steps li {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 1rem;
  border-top: 2px solid rgba(255,255,255,0.35);
}
.club-step-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 28px;
  color: var(--purple-dark);
  line-height: 1;
}
.club-step-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--white);
}
.club-step-desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
}

.club-actions { display: block; }
.club-cta {
  background: var(--purple-dark);
  box-shadow: 0 8px 32px rgba(51,11,57,0.35);
}
.club-cta:hover { background: var(--purple); }
.club-note {
  margin-top: 1rem;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.8);
}

@media (max-width: 760px) {
  .section-club  { padding-top: 72px; padding-bottom: 72px; }
  .club-lead     { font-size: 17px; }
  .club-lead strong { font-size: 19px; }
  .club-card     { padding: 1.25rem 1rem 1.4rem; }
  .club-stamps   { gap: 8px; }
  /* El sello del premio pasa de ~108px a ~55px: con 11px el texto tocaba el
     borde del círculo. */
  .club-stamp-prize-text { font-size: 9px; }
  .club-steps    { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Floating leaves bg */
.brand-leaves {
  position: absolute; bottom: 0; left: 0;
  width: 100%; display: flex; justify-content: space-between;
  pointer-events: none; opacity: 0.15;
}
.brand-leaves img { width: 220px; }

/* ============================================================
   LOCATION SECTION
   ============================================================ */
.section-location {
  background: var(--yellow);
  padding-top: 80px;
  padding-bottom: 80px;
  /* Destino del enlace "Mirá el mapa de tiendas" de la FAQ. La navbar es
     fixed (64px), así que sin este margen el salto deja el título tapado. */
  scroll-margin-top: 64px;
}

.location-head { text-align: center; margin-bottom: 3rem; }
.location-head .section-label { justify-content: center; }

.location-title {
  font-family: var(--font-impact);
  font-size: 64px;
  letter-spacing: 0.04em;
  color: var(--purple-dark);
  margin-bottom: 0.75rem;
}
.location-sub {
  font-size: 16px;
  color: rgba(45,10,78,0.7);
}

/* ---- Mapa interactivo de tiendas (Leaflet) ----
   El wrapper arranca oculto y sólo se muestra si Leaflet cargó: sin mapa, las
   tarjetas de abajo siguen teniendo dirección, horarios y "Cómo llegar". */
.store-map-wrap { display: none; margin-bottom: 40px; }
.store-map-wrap.is-ready { display: block; }

.store-map {
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(45,10,78,0.18);
  /* isolation crea un contexto de apilado propio: Leaflet usa z-index altos
     (hasta 1000) en sus paneles y controles, y sin esto se montarían sobre el
     navbar fijo y el CTA flotante. */
  position: relative;
  isolation: isolate;
  z-index: 0;
}

.store-map-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.store-geo-btn {
  background: var(--purple-dark);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 26px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s var(--ease-bounce);
}
.store-geo-btn:hover { background: var(--purple); transform: scale(1.04); }
.store-geo-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.store-geo-msg {
  font-size: 14px;
  color: var(--purple-dark);
  text-align: center;
  min-height: 1.2em;
}

/* Suavizado de los tiles: OSM viene muy saturado (verdes y amarillos fuertes)
   y compite con los pins. Bajar la saturación lo acerca al gris-color contenido
   de Google Maps conservando los códigos que la gente ya lee: agua azul,
   parques verdes, avenidas destacadas. Va SOLO al panel de tiles — los pins
   viven en .leaflet-marker-pane y no se ven afectados. */
.store-map .leaflet-tile-pane {
  filter: saturate(0.5) brightness(1.07) contrast(0.9);
}

/* Pin propio: gota violeta con el sello circular de OAKBERRY adentro.
   Evita además descargar los PNG de marcador por defecto de Leaflet. */
.store-marker span {
  display: block;
  position: relative;
  width: 38px; height: 38px;
  margin: 1px;
  background: var(--purple-dark);
  border: 3px solid var(--white);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 5px 14px rgba(0,0,0,0.4);
}
.store-marker span::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--white) url('../img/Escudoak_Variation_Superfoods_Logo_Prancheta%201.png')
              center / 88% no-repeat;
  transform: rotate(45deg);   /* contrarresta la rotación de la gota */
}
/* La más cercana se distingue por el aro rosa, no por el color de fondo */
.store-marker.is-nearest span {
  border-color: var(--pink);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 3px rgba(240,90,90,0.35);
}
.store-marker-me span {
  display: block;
  width: 16px; height: 16px;
  margin: 6px;
  background: var(--pink);
  border: 3px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}

/* Popup con la paleta de marca.
   Los selectores van prefijados con .leaflet-container a propósito: el CSS de
   Leaflet se inyecta en runtime, o sea DESPUÉS de esta hoja, así que a igual
   especificidad ganaría él y el popup quedaría blanco con texto blanco. */
.leaflet-container .leaflet-popup-content-wrapper {
  background: var(--purple-dark);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.leaflet-container .leaflet-popup-tip { background: var(--purple-dark); }
/* Compacto a propósito: cada píxel de alto del globo es un píxel que tiene que
   entrar arriba del pin dentro del mapa. */
.leaflet-container .leaflet-popup-content { margin: 12px 16px; font-family: var(--font-body); }
.leaflet-container a.leaflet-popup-close-button { color: rgba(255,255,255,0.6); }
.store-popup-name  { font-size: 16px; color: var(--white); line-height: 1.25; }
.store-popup-area  {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--yellow); margin: 4px 0 8px;
}
.store-popup-hours { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.7); }
/* .leaflet-container en el selector: Leaflet pinta TODOS sus links de azul
   (.leaflet-container a) y con menor especificidad ganaría él, dejando el link
   en 3,4:1 de contraste sobre el violeta. */
.leaflet-container a.store-popup-link {
  display: inline-block; margin-top: 10px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pink-light);
}

/* Tienda más cercana detectada por geolocalización */
.store-card.is-nearest {
  box-shadow: 0 0 0 3px var(--pink), 0 12px 32px rgba(45,10,78,0.2);
}
.store-map-wrap.is-ready ~ .store-list-collapse .store-card { cursor: pointer; }

/* ---- Lista de locales plegable ----
   Se anima con grid-template-rows 1fr -> 0fr, que se adapta solo al alto real
   del contenido (a diferencia de un max-height fijo, que recorta en silencio
   si mañana se agrega una tienda). En navegadores que no soporten 0fr la
   declaración se descarta y la lista simplemente queda siempre visible. */
.store-list-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.store-list-toggle {
  background: transparent;
  color: var(--purple-dark);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 26px;
  border: 2px solid var(--purple-dark);
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.2s var(--ease-bounce);
}
.store-list-toggle:hover {
  background: var(--purple-dark);
  color: var(--white);
  transform: scale(1.04);
}
.store-list-toggle::after {
  content: ' ▾';
  display: inline-block;
  transition: transform 0.3s var(--ease-smooth);
}
.store-list-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

.store-list-collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.45s var(--ease-smooth);
}
.store-list-collapse.is-collapsed { grid-template-rows: 0fr; }
.store-list-inner {
  overflow: hidden;
  min-height: 0;
  /* Sólo padding HORIZONTAL: da aire a las sombras laterales sin sumar alto.
     Con padding vertical acá quedarían 40px visibles al plegar, porque
     box-sizing:border-box no comprime el padding cuando la altura es 0. */
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
}
/* El aire vertical para las sombras va acá dentro, donde sí queda recortado
   al plegar. El margen negativo evita que altere el espaciado de la sección. */
.store-list-collapse .store-list {
  padding-top: 6px;
  padding-bottom: 30px;
  margin-top: -6px;
  margin-bottom: -30px;
}
@media (prefers-reduced-motion: reduce) {
  .store-list-collapse { transition: none; }
}

@media (max-width: 600px) {
  /* 380px y no menos: el globo del popup mide ~170px más 38px de anclaje, y
     en un mapa de 300px no entra arriba del pin por más que se desplace el
     centro — quedaba cortado contra el borde superior. */
  .store-map { height: 380px; }
}

/* ---- Grilla de tiendas ---- */
.store-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.store-card {
  background: var(--cream);
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow: 0 12px 32px rgba(45,10,78,0.12);
}
/* Pin de la tarjeta: misma gota violeta con el sello que usan los marcadores
   del mapa, dibujada en CSS. A diferencia del marcador, acá la gota (::before)
   y el sello (::after) son hermanos y no anidados, así que el sello no necesita
   contrarrotarse: sólo rota la gota. */
.store-pin {
  display: block;
  position: relative;
  width: 26px;
  height: 26px;
  margin-bottom: 14px;
  font-size: 0;
}
.store-pin::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--purple-dark);
  border: 2px solid var(--white);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 8px rgba(45,10,78,0.28);
}
.store-pin::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--white) url('../img/Escudoak_Variation_Superfoods_Logo_Prancheta%201.png')
              center / 88% no-repeat;
}
.store-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--purple-dark);
  line-height: 1.25;
}
.store-area {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink);
}
.store-hours {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(45,10,78,0.7);
  margin-top: 0.35rem;
}
.store-link {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple-dark);
  border-bottom: 0;
  transition: color 0.2s;
}
.store-link::after { content: ' →'; }
.store-link:hover { color: var(--pink); }

@media (max-width: 900px) {
  .store-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .store-list { grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ SECTION
   ============================================================ */
.section-faq {
  background: var(--cream);
  padding-top: 80px;
  padding-bottom: 80px;
}
.faq-title {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 900;
  color: var(--text-dark);
  margin-bottom: 3rem;
  text-align: center;
}
.faq-title em { color: var(--pink); font-style: italic; }

.faq-item {
  border-bottom: 1px solid rgba(45,10,78,0.12);
  overflow: hidden;
}
.faq-q {
  padding: 1.25rem 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-dark);
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
  gap: 16px;
  transition: color 0.2s;
}
.faq-q:hover { color: var(--pink); }
.faq-arrow {
  font-size: 19px;
  color: var(--pink);
  transition: transform 0.3s var(--ease-smooth);
  flex-shrink: 0;
}
.faq-item.open .faq-arrow { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  line-height: 1.7;
  color: rgba(45,10,78,0.65);
  transition: max-height 0.4s var(--ease-smooth), padding 0.3s;
  padding: 0;
}
/* 340 y no 200: con las respuestas que mandan al mapa y explican OAKBERRY CLUB
   el texto pasa de 200px en pantallas angostas y quedaba cortado a la mitad.
   Es un max-height de animación, no un límite real: pasarse no rompe nada. */
.faq-item.open .faq-a { max-height: 340px; padding-bottom: 1.25rem; }

/* Enlace dentro de una respuesta (p. ej. "Mirá el mapa de tiendas"). Va
   subrayado y en rosa porque dentro de un párrafo gris el color solo no
   alcanza para que se lea como clickeable. */
.faq-link {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.faq-link:hover { color: var(--purple-dark); }

/* ============================================================
   SOCIAL SECTION
   ============================================================ */
.section-social {
  background: var(--purple-dark);
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.social-title {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 0.75rem;
}
.social-title em { color: var(--pink); font-style: italic; }
.social-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2.5rem;
}

/* ---- Botón Instagram ---- */
.btn-instagram {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--pink);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 13px 28px;
  border-radius: 50px;
  margin-bottom: 2.5rem;
  box-shadow: 0 8px 32px rgba(240,90,90,0.4);
  transition: all 0.3s var(--ease-bounce);
}
.btn-instagram svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-instagram:hover {
  transform: scale(1.06) translateY(-2px);
  background: var(--pink-light);
  box-shadow: 0 16px 48px rgba(240,90,90,0.55);
}

.gallery-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--pink);
  font-size: 24px;
  margin-bottom: 1.75rem;
}

/* ---- Bento gallery grid ----
   6 columnas x 3 filas para las 7 fotos. Los spans están calculados para que
   sumen exactamente 18 celdas y no queden huecos:
     fila 1-2:  Franco 3x2  |  auto Alpine 3x1
     fila 2:                |  tenis 2x1 | gradas 1x1
     fila 3:    karting 2x1 | F1 2x1     | festival 2x1
   Si se agrega o se saca una foto hay que rehacer la cuenta. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px;
  gap: 12px;
  margin-bottom: 3rem;
}
.gallery-item:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.gallery-item:nth-child(2) { grid-column: span 3; grid-row: span 1; }
.gallery-item:nth-child(3) { grid-column: span 2; grid-row: span 1; }
.gallery-item:nth-child(4) { grid-column: span 1; grid-row: span 1; }
.gallery-item:nth-child(5) { grid-column: span 2; grid-row: span 1; }
.gallery-item:nth-child(6) { grid-column: span 2; grid-row: span 1; }
.gallery-item:nth-child(7) { grid-column: span 2; grid-row: span 1; }

/* El recorte del auto ya viene encuadrado sobre el ala delantera, donde está
   el logo OAKBERRY: se ancla a la izquierda para que ningún `cover` se lo
   coma cuando la celda queda más angosta que la foto. */
.gallery-item:nth-child(2) img { object-position: left center; }

.gallery-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: var(--purple);
  box-shadow: inset 0 0 0 0 var(--pink);
  transition: box-shadow 0.35s var(--ease-smooth);
}
.gallery-item:hover { box-shadow: inset 0 0 0 3px var(--pink); }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-smooth);
}
.gallery-item:hover img { transform: scale(1.12); }
.gallery-item-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 1rem;
  background: linear-gradient(to top, rgba(51,11,57,0.92) 0%, rgba(51,11,57,0.25) 55%, transparent 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease-smooth), transform 0.35s var(--ease-smooth);
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; transform: translateY(0); }
.gallery-item-icon { font-size: 19px; }
.gallery-item-caption {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--white);
  text-transform: uppercase;
}

/* ---- Gallery lightbox ---- */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(51,11,57,0.92);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-smooth), visibility 0.35s;
}
.gallery-lightbox.is-open { opacity: 1; visibility: visible; }
.gallery-lightbox-inner {
  position: relative;
  width: 100%;
  max-width: 520px;
  transform: scale(0.9);
  transition: transform 0.35s var(--ease-bounce);
}
.gallery-lightbox.is-open .gallery-lightbox-inner { transform: scale(1); }
.gallery-lightbox-inner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
.gallery-lightbox-caption {
  margin-top: 1rem;
  text-align: center;
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
}
.gallery-lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}
.gallery-lightbox-close:hover {
  background: var(--pink);
  border-color: var(--pink);
}

.social-links { display: flex; gap: 16px; justify-content: center; }
.social-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.1);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.2);
  transition: all 0.3s;
}
.social-btn:hover {
  background: var(--pink);
  border-color: var(--pink);
  transform: translateY(-2px);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer { color: rgba(255,255,255,0.6); }

/* ---- Main purple area with illustration ---- */
.footer-main {
  position: relative;
  background: var(--purple-dark);
}
/* Plane floats directly over the purple background */
.footer-airplane {
  position: absolute;
  top: 32px;
  left: 3%;
  width: clamp(200px, 16vw, 280px);
  height: auto;
  z-index: 2;
}
/* In normal flow (not absolute) so its natural aspect ratio sets the
   footer's height directly: full window width, image never cropped. */
.footer-illustration {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}
.footer-columns {
  position: absolute;
  top: 220px;
  left: 0;
  z-index: 1;
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(150px, 210px));
  gap: 2.5rem;
  margin-left: max(1.5rem, calc((100% - 1000px) / 2));
}
.footer-col h4 {
  font-family: var(--font-impact);
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.25rem;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.7rem; }
.footer-col ul li a,
.footer-col ul li span {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  transition: color 0.2s;
}
.footer-col ul li a { cursor: pointer; }
.footer-col ul li a:hover { color: var(--pink); }

.footer-country {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 1.5rem;
  padding: 8px 18px;
  border-radius: 50px;
  background: rgba(255,255,255,0.08);
  font-size: 14px;
  color: var(--white);
}

.footer-socials { display: flex; gap: 10px; margin-top: 1.25rem; }
.footer-social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--white);
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease-bounce);
}
.footer-social-icon svg { width: 18px; height: 18px; }
.footer-social-icon:hover {
  background: var(--pink);
  color: var(--white);
  transform: translateY(-3px);
}

.footer-bottom {
  position: relative;
  z-index: 1;
  background: var(--purple-dark);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.5rem max(1.5rem, calc((100% - 1000px) / 2));
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
}
.footer-heart { color: #a855f7; }

/* Crédito de autoría: última línea de la página, centrada y en el tono más
   apagado del footer — tiene que estar, no que competir con el resto. */
.footer-credit {
  position: relative;
  z-index: 1;
  background: var(--purple-dark);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 0.9rem 1.5rem;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.4);
}
.footer-credit a {
  color: rgba(255,255,255,0.62);
  border-bottom: 1px solid rgba(255,255,255,0.22);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.footer-credit a:hover {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}

/* ============================================================
   FLOATING CTA BUTTON
   ============================================================ */
.float-cta {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.float-cta-btn {
  background: var(--purple-dark);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s var(--ease-bounce);
  box-shadow: 0 8px 28px rgba(45,10,78,0.4);
  white-space: nowrap;
  transform: translateX(120px);
  opacity: 0;
}
.float-cta-btn.visible {
  transform: translateX(0);
  opacity: 1;
}
.float-cta-btn:hover {
  background: var(--pink);
  transform: scale(1.06) translateX(0);
  box-shadow: 0 12px 36px rgba(240,90,90,0.5);
}
.float-heart {
  width: 52px; height: 52px;
  background: var(--pink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(240,90,90,0.45);
  transition: transform 0.3s var(--ease-bounce), box-shadow 0.3s;
  position: relative;
  animation: heartbeat var(--loop-heart) ease-in-out infinite;
}
/* ripple ring */
.float-heart::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(240,90,90,0.55);
  animation: heart-ripple var(--loop-heart) ease-out infinite;
}
.float-heart svg {
  width: 22px; height: 22px;
  fill: var(--white);
  /* slight pop in sync with heartbeat */
  animation: heart-icon-beat var(--loop-heart) ease-in-out infinite;
}
.float-heart:hover {
  transform: scale(1.15);
  box-shadow: 0 12px 36px rgba(240,90,90,0.6);
  animation: none;
}
.float-heart:hover::after { animation: none; opacity: 0; }
/* Latido + descanso. Antes el ciclo entero duraba 1,4s y el golpe ocupaba el
   56%: el botón no paraba nunca y, al estar fijo en la esquina, quedaba
   pulsando en el rabillo del ojo durante toda la navegación. Ahora el golpe
   sigue siendo rápido (ocupa el 22% de un ciclo de 3,4s ≈ 0,75s, igual que
   antes) pero después viene una pausa larga y quieta. Los tres keyframes
   comparten los mismos porcentajes: si se cambia uno hay que cambiar los
   tres o el ícono se desincroniza del círculo. */
@keyframes heartbeat {
  0%, 22%, 100% { transform: scale(1); }
  6%             { transform: scale(1.06); }
  11%            { transform: scale(1); }
  17%            { transform: scale(1.035); }
}
@keyframes heart-icon-beat {
  0%, 22%, 100% { transform: scale(1); }
  6%             { transform: scale(1.12); }
  11%            { transform: scale(1); }
  17%            { transform: scale(1.06); }
}
/* La onda se expande dentro del golpe y se queda invisible el resto del
   ciclo; estirarla a los 3,4s completos la volvía un aro que crece solo. */
@keyframes heart-ripple {
  0%        { transform: scale(1);   opacity: 0.6; }
  22%, 100% { transform: scale(1.9); opacity: 0; }
}

/* ============================================================
   ANIMATION STATES (Intersection Observer)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Staggered children */
.stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
}
.stagger.visible > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay: 0s; }
.stagger.visible > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay: 0.1s; }
.stagger.visible > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay: 0.2s; }
.stagger.visible > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay: 0.3s; }
.stagger.visible > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay: 0.4s; }
.stagger.visible > *:nth-child(6) { opacity:1; transform:translateY(0); transition-delay: 0.5s; }
.stagger.visible > *:nth-child(n+7) { opacity:1; transform:translateY(0); transition-delay: 0.6s; }

/* NXT LVL word reveal */
.word-reveal span {
  display: inline-block;
  opacity: 0;
  transform: translateY(60px) skewY(5deg);
  transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
}
.word-reveal.visible span:nth-of-type(1) { opacity:1; transform:translateY(0) skewY(0); transition-delay: 0s; }
.word-reveal.visible span:nth-of-type(2) { opacity:1; transform:translateY(0) skewY(0); transition-delay: 0.12s; }
.word-reveal.visible span:nth-of-type(3) { opacity:1; transform:translateY(0) skewY(0); transition-delay: 0.24s; }
.word-reveal.visible span:nth-of-type(4) { opacity:1; transform:translateY(0) skewY(0); transition-delay: 0.36s; }
.word-reveal.visible span.accent { color: var(--pink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  /* Mobile: el hero pasa a dos filas apiladas (texto arriba, vaso abajo) en vez de
     superponer la imagen absoluta sobre el texto. La fila 2 (1fr) se queda con todo
     el alto sobrante, así el vaso es lo más grande que permita la pantalla. */
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-items: stretch;
    row-gap: 0.5rem;
    padding-top: 124px;
    /* 68px en vez de los 52 del desktop: la banda del ticker mide 57px, así
       que con 68 entra entera y sobran unos pocos píxeles. Con 52 quedaba
       recortada por abajo. Ver la nota sobre svh en la regla base de .hero. */
    min-height: calc(100vh - 68px);
    height: calc(100vh - 68px);
    min-height: calc(100svh - 68px);
    height: calc(100svh - 68px);
  }
  .hero-content  { grid-row: 1; z-index: 3; }
  .hero-subtitle { margin-bottom: 0; }
  .hero-image-wrap {
    grid-row: 2;
    position: relative;
    right: auto; bottom: auto;
    width: 100%;
    min-height: 150px;
    pointer-events: none;
  }
  .hero-cup      {
    height: 100%;
    max-width: 82vw;
    bottom: 8px;
    object-position: center bottom;
  }
  /* El loro baja hasta 72px para no quedar detrás del navbar (64px) y termina
     en 126px, justo donde arranca el texto */
  .hero-parrot   { width: 68px; height: 54px; top: 72px; right: 16px; }
  .hero-title    { font-size: 48px; }
  /* Escala tipográfica mobile. Antes la resolvía el vw dentro de cada clamp();
     ahora que todo es px, estos son los valores que el clamp entregaba en el
     tramo chico (su mínimo). */
  .franchise-heading { font-size: 40px; }
  .brand-title       { font-size: 40px; }
  .location-title    { font-size: 40px; }
  .club-title        { font-size: 35px; }
  .faq-title         { font-size: 32px; }
  .social-title      { font-size: 32px; }
  .stats-title       { font-size: 29px; }
  .stat-number       { font-size: 38px; }
  .oak-modal-title   { font-size: 32px; }
  .menu-tab          { font-size: 26px; }
  .gallery-tag       { font-size: 18px; }
  .section-about { grid-template-columns: 1fr; }
  .about-video { max-width: 480px; }
  /* Debajo de 900px las seis en fila ya no entran: 3 + 3. Como las cards se
     ensanchan, el icono y la cifra vuelven a crecer. */
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .stat-item  { padding: 1.4rem 0.8rem 1.2rem; }
  .stat-icon  { width: 42px; height: 42px; }
  .stat-label { font-size: 11.5px; }
  .footer-columns {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    width: 100%;
    margin: 0;
    padding: 0 1.5rem;
  }
  .footer-main    { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .footer-illustration,
  .footer-airplane { display: none; }
  /* A 2 columnas la cuenta vuelve a cerrar en 12 celdas (6 filas): Franco 2x2,
     el auto en banda completa, cuatro chicas y el festival cerrando ancho. */
  .gallery-grid  { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .gallery-item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .gallery-item:nth-child(2),
  .gallery-item:nth-child(7) { grid-column: span 2; grid-row: span 1; }
  .navbar        { padding: 0 1.5rem; }
  .cursor, .cursor-ring { display: none; }
}

@media (max-width: 600px) {
  /* Navbar: el logo a 32px ocupa 247px de ancho y no deja lugar al CTA.
     Se achica el wordmark y se ocultan divisor + país (el dato "Argentina"
     sigue estando en el subtítulo del hero). */
  .navbar           { padding: 0 1rem; gap: 0.75rem; }
  .nav-logo img     { height: 22px; }
  .nav-logo-divider,
  .nav-logo-country { display: none; }
  .btn-nav          { font-size: 11px; letter-spacing: 0.08em; padding: 9px 16px; }

  .section-menu, .section-about, .section-brand,
  .section-location, .section-faq, .section-social,
  .section-franchise { padding-left: 1.5rem; padding-right: 1.5rem; }
  .section-club { padding-left: 1.5rem; padding-right: 1.5rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .about-headline { font-size: 80px; }
  /* Escalón intermedio del hero entre 600 y 480px: sin el vw haría falta este
     paso para que el título no quede sobredimensionado a ~500px de ancho. */
  .hero-title { font-size: 38px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 110px; }
  .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

/* ============================================================
   MOVIMIENTO REDUCIDO
   "reduce" pide reducir el MOVIMIENTO, no apagar la interfaz. Lo que provoca
   mareo o desorientación son los desplazamientos grandes, el parallax, los
   zooms y el contenido que se mueve solo; un fundido de opacidad no. Así que
   acá se apagan los bucles decorativos y los marquees, y las entradas se
   conservan pero fundiendo, sin desplazarse.

   Antes esto era un `*` con animation-duration: 0.01ms, que dejaba el sitio
   completamente muerto — y encima tenía un bug: sin animation-iteration-count
   los bucles infinitos no se apagaban, se repetían cada 0,01ms, o sea unas
   100.000 veces por segundo. Ese parpadeo a máxima velocidad era el
   "las animaciones andan a gran velocidad" del reporte original.

   OJO al probar: Windows (Configuración › Accesibilidad › Efectos visuales ›
   Efectos de animación) y macOS (Accesibilidad › Pantalla › Reducir
   movimiento) activan esta preferencia para todo el navegador. Con el ajuste
   apagado no se ve NINGUNA de las animaciones del sitio, y no es un bug.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* El scroll animado de los anchors es movimiento no solicitado */
  html { scroll-behavior: auto; }

  /* Bucles decorativos que no terminan nunca */
  .hero-cup,
  .hero-parrot,
  .hero-badge,
  .float-heart,
  .float-heart::after,
  .float-heart svg { animation: none; }

  /* Contenido que se desplaza solo — WCAG 2.2.2 (Pausar, detener, ocultar) */
  .ticker-track,
  .oak-shout-track,
  .menu-carousel { animation: none; }

  /* Entradas al hacer scroll: se queda el fundido, se va el desplazamiento.
     Sin esto la página no tendría ninguna señal de que el contenido entró. */
  .reveal,
  .reveal-left,
  .reveal-right,
  .stagger > *,
  .word-reveal span { transform: none !important; }
}

/* ============================================================
   MODAL DE FRANQUICIA
   Estilos genéricos .oak-modal-overlay / .oak-modal / .oak-form
   (initModal en main.js los reutiliza si se agregan más modales).
   ============================================================ */
.oak-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(30, 6, 50, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  /* visibility, no solo opacity: con opacity:0 el modal sigue existiendo para
     el teclado y para los lectores de pantalla, así que al tabular se cae
     adentro de campos invisibles sin poder salir. Mismo patrón que
     .gallery-lightbox (línea 2554), que ya lo hacía bien. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-smooth), visibility 0.3s;
}
.oak-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.oak-modal {
  background: var(--purple-dark);
  background: radial-gradient(ellipse 100% 100% at 50% 0%, #5a1a7a 0%, var(--purple-dark) 65%);
  border-radius: 24px;
  width: 100%;
  max-width: 480px;
  padding: 2.5rem 2rem 2rem;
  position: relative;
  transform: translateY(28px) scale(0.97);
  transition: transform 0.35s var(--ease-bounce);
  max-height: 90vh;
  overflow-y: auto;
}
/* Franquicia: formulario largo -> en desktop usa más ancho y 2 columnas
   por fila para no depender de un scroll interno tan largo. */
@media (min-width: 640px) {
  .oak-modal--wide {
    max-width: 680px;
    padding: 2.5rem 3rem 2rem;
  }
  .oak-modal--wide .oak-form-row { gap: 1.25rem; }
  .oak-modal--wide .oak-form { gap: 1.1rem; }
}
.oak-modal.picker-open {
  overflow: visible;
}
.oak-modal-overlay.is-open .oak-modal {
  transform: translateY(0) scale(1);
}

.oak-modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: rgba(255,255,255,0.12);
  border: none;
  color: white;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.oak-modal-close:hover { background: rgba(255,255,255,0.22); }

.oak-modal-header {
  text-align: center;
  margin-bottom: 1.75rem;
}
/* Etiqueta chica arriba del título (modal de ayuda). */
.oak-modal-badge {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 10px;
}
.oak-modal-title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}
.oak-modal-title em {
  color: var(--pink);
  font-style: italic;
}
.oak-modal-sub {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  max-width: 340px;
  margin: 0 auto;
}
.oak-modal-sub .hl { color: var(--pink); }

/* Form */
.oak-form { display: flex; flex-direction: column; gap: 1rem; }

.oak-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.oak-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.oak-form-group label {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
}
/* "(opcional)" dentro de un label: marcar lo que NO es obligatorio baja la
   fricción del formulario sin agregar asteriscos a todo el resto. */
.oak-form-optional {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.oak-form-group input,
.oak-form-group select {
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: 50px;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dark);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.oak-form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23330B39'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 40px;
}
.oak-form-group textarea {
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: 20px;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dark);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  resize: vertical;
  min-height: 80px;
}
.oak-form-group input::placeholder,
.oak-form-group textarea::placeholder { color: rgba(51,11,57,0.4); }
.oak-form-group input:focus,
.oak-form-group select:focus,
.oak-form-group textarea:focus { border-color: var(--pink); }

.oak-form-checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.oak-form-checkbox-group input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--pink);
  cursor: pointer;
}
.oak-form-checkbox-group label {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
}

.oak-phone-wrap {
  display: flex;
  align-items: center;
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: 50px;
  overflow: visible;
  transition: border-color 0.2s;
  position: relative;
}
.oak-phone-wrap:focus-within { border-color: var(--pink); }

/* Custom country picker */
.oak-country-picker {
  position: relative;
  flex-shrink: 0;
}
.oak-country-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(51,11,57,0.15);
  padding: 12px 10px 12px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dark);
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.oak-country-btn .oak-caret {
  font-size: 10px;
  opacity: 0.5;
  transition: transform 0.2s;
}
.oak-country-picker.open .oak-caret { transform: rotate(180deg); }

.oak-country-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #2a0a38;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  overflow: hidden;
  z-index: 10000;
  min-width: 160px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  max-height: 220px;
  overflow-y: auto;
}
.oak-country-picker.open .oak-country-dropdown { display: block; }

.oak-country-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.oak-country-option:hover,
.oak-country-option.selected { background: rgba(240,90,90,0.2); color: white; }
.oak-country-option .opt-code { color: rgba(255,255,255,0.5); font-size: 12px; }

/* Scrollbar inside dropdown */
/* Barra propia, más fina que la del resto: es una lista anidada dentro del
   modal. Hay que redeclarar scrollbar-color sí o sí — sin esto hereda el
   violeta global de html y el navegador moderno descarta las reglas
   ::-webkit-scrollbar de abajo (ver bloque SCROLLBARS DE MARCA). */
.oak-country-dropdown {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.oak-country-dropdown::-webkit-scrollbar { width: 4px; }
.oak-country-dropdown::-webkit-scrollbar-track { background: transparent; }
.oak-country-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }

/* Hidden real select (fallback) */
.oak-phone-select { display: none; }

.oak-phone-wrap input {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 12px 16px;
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dark);
  outline: none;
}
.oak-phone-wrap input::placeholder { color: rgba(51,11,57,0.4); }

.oak-form-submit {
  background: var(--pink);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  border: none;
  border-radius: 50px;
  padding: 16px;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(240,90,90,0.35);
  transition: background 0.25s, transform 0.2s var(--ease-bounce), box-shadow 0.25s;
  margin-top: 0.25rem;
}
.oak-form-submit:hover {
  background: var(--pink-light);
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(240,90,90,0.5);
}

.oak-form-legal {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}

.oak-modal-brand {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-top: 1.5rem;
}

.oak-form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.oak-form-error {
  color: #ff6b6b;
  font-size: 13px;
  font-family: var(--font-body);
  text-align: center;
  margin-bottom: 8px;
}

/* Success state */
.oak-form-success {
  text-align: center;
  padding: 2rem 0;
}
.oak-form-success .success-icon {
  font-size: 48px;
  margin-bottom: 1rem;
}
.oak-form-success h3 {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: 16px;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.oak-form-success p {
  color: rgba(255,255,255,0.65);
  font-size: 14px;
}

@media (max-width: 480px) {
  .oak-form-row { grid-template-columns: 1fr; }
  .oak-modal { padding: 2rem 1.25rem 1.5rem; }
  .hero-title { font-size: 32px; }

  /* A 360-400px el logo + CTA entran justos: se ajustan ambos para que el
     botón nunca se recorte ni empuje el logo fuera de pantalla */
  .navbar       { padding: 0 14px; }
  .nav-logo img { height: 18px; }
  .btn-nav      { font-size: 11px; letter-spacing: 0.02em; padding: 9px 13px; }

  .hero          { padding-top: 118px; }
  .hero-eyebrow  { font-size: 11px; letter-spacing: 0.18em; margin-bottom: 1rem; }
  .hero-subtitle { font-size: 17px; line-height: 1.55; }
  .hero-parrot   { width: 58px; height: 46px; right: 12px; }
}