/* ==========================================================================
   FRUTALIA — styles.css
   Paleta oficial: Verde natural / Naranja vibrante / Amarillo mburucuyá.
   Los colores de marca se reservan para tipografía, bordes, botones,
   iconos y líneas decorativas — nunca como color de fondo plano en el
   cuerpo de la página. La única excepción intencional es el FOOTER
   (banda sólida --verde-oscuro), que por ser el cierre clásico del
   sitio sí usa el color de marca como fondo.

   ARQUITECTURA: sitio multipágina — index.html (Hero), somos.html,
   productos.html, tienda.html y contactos.html son plantillas
   independientes que comparten este mismo stylesheet, el mismo
   js/main.js y el mismo header/footer (duplicados en cada .html: al no
   haber build step, no hay includes). Cada página aloja su propia
   sección con la clase de siempre (.hero/.somos/.productos/.tienda/
   .contactos), así que casi todo este archivo es válido sin cambios
   sin importar en qué página se cargue.

   FONDO: Hero, Somos, Productos y Contactos llevan cada una su propio
   <video> de fondo (.section-bg-video, embebido directo en el HTML de
   esa página), con .glass-card envolviendo el texto principal para
   garantizar contraste sin importar el fotograma del video. Tienda es
   la excepción: no lleva video, usa la imagen de concepto desenfocada
   (ver bloque TIENDA). Todo el texto usa siempre la paleta
   oscura-sobre-clara (--texto-principal/--texto-suave). @media
   (prefers-reduced-motion: reduce) más abajo solo oculta los videos
   (revelando el background-image de respaldo de cada sección), sin
   depender de JS para que el fallback sea robusto.
   ========================================================================== */

:root {
  /* Paleta de marca */
  --verde: #3E8E4F;
  --verde-oscuro: #2C6B3A;
  --naranja: #F2790C;
  --naranja-fuerte: #E0670A;
  --amarillo: #F2B705;

  /* Acentos por sabor (dentro de la familia cromática de marca) */
  --acento-naranja: var(--naranja);
  --acento-pomelo: #E8724A;   /* naranja-coral, evoca el pomelo rosado */
  --acento-mburucuya: var(--amarillo);

  /* Fondos neutros / orgánicos (fallback y componentes "tarjeta") */
  --bg-crema: #F8F5EE;
  --bg-blanco: #FFFFFF;
  --bg-gris-claro: #F3F2EF;

  /* Texto sobre fondo neutro (dentro de tarjetas blancas/crema y dentro
     de .glass-card, que es donde vive ahora todo el texto que antes
     flotaba directo sobre el video) */
  --texto-principal: #2B2A26;
  --texto-suave: #605E56;

  /* Tipografía */
  --font-titulos: 'Poppins', sans-serif;
  --font-cuerpo: 'Nunito Sans', sans-serif;

  /* Layout */
  --max-width: 1240px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 20px 45px -25px rgba(43, 42, 38, 0.35);

  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-cuerpo);
  color: var(--texto-principal);
  background: var(--bg-crema);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

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

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3 {
  font-family: var(--font-titulos);
  margin: 0 0 0.5em;
  line-height: 1.15;
}

p { margin: 0 0 1em; color: var(--texto-suave); }

button { font-family: inherit; cursor: pointer; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--verde);
  color: #fff;
  padding: 12px 18px;
  z-index: 999;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--amarillo);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
   UTILIDADES DE SECCIÓN
   -------------------------------------------------------------------- */
/* .section-tag/.section-title/.section-subtitle viven dentro de
   .glass-card (Hero/Somos/Productos) o directamente dentro de secciones
   claras sin video (Tienda/Contactos), así que siempre van en paleta
   oscura-sobre-claro para garantizar contraste con "impecable
   legibilidad" en ambos casos. */
.section-tag {
  display: inline-block;
  font-family: var(--font-titulos);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-oscuro);
  border-bottom: 2px solid var(--amarillo);
  padding-bottom: 6px;
  margin-bottom: 14px;
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--texto-principal);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.section-subtitle {
  max-width: 560px;
  font-size: 1.05rem;
  color: var(--texto-suave);
}

.section-head {
  max-width: 720px;
  margin: 0 auto 3rem;
  text-align: center;
}
.section-head .section-subtitle { margin-inline: auto; }

/* Botones — únicos elementos con fondo de color de marca */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-titulos);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}

.btn--primary {
  background: var(--naranja);
  color: #fff;
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--naranja-fuerte);
  transform: translateY(-3px) scale(1.03);
}

.btn--ghost {
  background: transparent;
  color: var(--verde-oscuro);
  border-color: var(--verde);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--verde);
  color: #fff;
  transform: translateY(-3px);
}

.btn--cta {
  background: #fff;
  color: var(--verde-oscuro);
  border-color: var(--verde);
  width: 100%;
}
.btn--cta:hover, .btn--cta:focus-visible {
  background: var(--verde);
  color: #fff;
  transform: scale(1.06);
}

.btn--full { width: 100%; }

/* --------------------------------------------------------------------
   PRELOADER
   -------------------------------------------------------------------- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-crema);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.preloader__logo {
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--verde-oscuro);
  letter-spacing: 0.02em;
  opacity: 0;
  animation: preloaderLogoIn 1.1s ease forwards 0.15s;
}

.preloader__bar {
  width: min(240px, 60vw);
  height: 4px;
  border-radius: 4px;
  background: var(--bg-gris-claro);
  overflow: hidden;
}
.preloader__bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--verde), var(--amarillo), var(--naranja));
  border-radius: 4px;
}

.preloader__count {
  font-family: var(--font-titulos);
  font-size: 0.85rem;
  color: var(--texto-suave);
  letter-spacing: 0.08em;
}

@keyframes preloaderLogoIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  background: rgba(248, 245, 238, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(62, 142, 79, 0.12);
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}

.brand {
  display: flex;
  align-items: center;
}
.brand__logo {
  display: block;
  width: auto;
}
/* Alto de la "ranura" del logo en el header = alto original (34px),
   fijado solo acá (no en .brand genérico, que también usa el footer
   con su propio alto de 64px): así .brand__logo--header puede crecer
   +60% sin agrandar el nav bar ni desplazar sus demás componentes (nav,
   botón hamburguesa). El overflow (visible por defecto) deja que el
   logo sobresalga arriba/abajo del header sin afectar el alto real de
   .site-header__inner. */
.site-header .brand { height: 34px; }
/* +60% sobre el alto original (34px) */
.brand__logo--header { height: 54.4px; }

/* Elementos que se revelan en cascada al finalizar el preloader */
[data-reveal-item] {
  opacity: 0;
  transform: translateY(-14px);
}

/* Revelación escalonada genérica al hacer scroll: cada hijo directo del
   contenedor marcado arranca oculto y GSAP los anima uno a uno (ver
   initStaggerReveals() en js/main.js). Usada por el texto corporativo
   de Somos y reutilizable en cualquier otra página. */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
}

.primary-nav ul {
  display: flex;
  gap: 32px;
}

.primary-nav a {
  font-family: var(--font-titulos);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--texto-principal);
  position: relative;
  padding: 4px 0;
}
.primary-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--naranja);
  transition: width 0.3s ease;
}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { width: 100%; }
/* Página activa: cada plantilla marca su propio enlace con
   aria-current="page" (ver <header> de cada .html); mismo subrayado
   permanente que el hover, más color de marca para remarcarlo. */
.primary-nav a[aria-current="page"] {
  color: var(--naranja-fuerte);
}
.primary-nav a[aria-current="page"]::after { width: 100%; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  z-index: 510;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--verde-oscuro);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------
   VIDEOS DE FONDO POR SECCIÓN (Hero / Somos / Productos / Contactos)
   Cada una de esas cuatro páginas aloja su propio <video> en su
   sección, así que estas reglas son genéricas por clase y se aplican
   igual en las cuatro. La sección que lo contiene necesita
   position:relative + overflow:hidden para poder anclarlo (ver los
   bloques HERO/SOMOS/PRODUCTOS/CONTACTOS más abajo). Tienda es la
   única página sin <video> (ver bloque TIENDA).
   -------------------------------------------------------------------- */
.section-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: cover;
}

/* Máscara oscura semitransparente: refuerza el contraste de los
   elementos decorativos que no viven dentro de un .glass-card (p. ej.
   el scroll-cue del Hero o las frutas en parallax de Somos). El texto
   principal de cada sección ya está protegido por su propia
   .glass-card, así que esta capa se mantiene deliberadamente sutil. */
.section-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

/* --------------------------------------------------------------------
   GLASSMORPHISM — tarjetas de vidrio esmerilado para el texto que
   flota sobre los videos de fondo. Fondo blanco translúcido + blur,
   con "impecable legibilidad" garantizada sin importar qué frame del
   video quede detrás.
   -------------------------------------------------------------------- */
.glass-card {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
}

@media (max-width: 640px) {
  .glass-card {
    padding: 1.75rem;
    border-radius: 20px;
  }
}

/* --------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 120px 24px 80px;
  /* REGLA CERO-GRIS: fondo de respaldo por defecto mientras el video
     (.section-bg-video) carga su primer frame, falla o el navegador
     bloquea el autoplay. Las rutas de un .css se resuelven relativas a
     la ubicación del archivo (css/styles.css), por eso el "../". */
  background-image: url('../frutalia_landing_hero_concept.jpg');
  background-size: cover;
  background-position: center;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.hero__eyebrow {
  font-family: var(--font-titulos);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--verde-oscuro);
  text-align: center;
}

.hero__title {
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  color: var(--texto-principal);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.hero__title em {
  font-style: normal;
  color: var(--naranja);
}
.hero__title-line {
  display: block;
  overflow: hidden;
}
/* Cada letra se envuelve en main.js dentro de un <span class="char"> para
   lograr la revelación tipo máscara de izquierda a derecha */
.hero__title .char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
}

.hero__subtitle {
  font-size: 1.1rem;
  margin: 20px auto 28px;
  max-width: 480px;
  color: var(--texto-suave);
}

.hero__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* @keyframes bottleFloat se conserva: la reutiliza .somos__bottle-slot
   .bottle (botella estática de la sección Somos), aunque ya no exista
   la botella flotante del Hero. */
@keyframes bottleFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-22px) rotate(1deg); }
}

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: none;
  border: none;
  color: var(--verde-oscuro);
  font-family: var(--font-titulos);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.scroll-cue span {
  width: 1px;
  height: 32px;
  background: var(--verde);
  position: relative;
  overflow: hidden;
}
.scroll-cue span::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--amarillo);
  animation: scrollCueDrop 1.8s ease-in-out infinite;
}
@keyframes scrollCueDrop {
  0%   { top: -100%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

/* --------------------------------------------------------------------
   BOTELLA (SVG reutilizable) — estilada por sabor vía data-flavor
   -------------------------------------------------------------------- */
.bottle { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15)); }
/* Achicada a propósito para que quepa entera dentro de los 160px de
   .shop-card__media (ver abajo) sin desbordar sobre el título/texto de
   la tarjeta ni sobre la cabecera de la sección Tienda. */
.bottle--sm { max-width: 62px; margin: 0 auto; }

.bottle__cap { fill: #D8B65C; }
.bottle__neck { fill: rgba(242, 121, 12, 0.28); }
.bottle__body { fill: rgba(242, 121, 12, 0.42); stroke: rgba(242, 121, 12, 0.6); stroke-width: 2; }
.bottle__label { fill: #FDFBF6; stroke: var(--naranja); stroke-width: 1.5; }
.bottle__label-text { font-family: var(--font-titulos); font-weight: 700; font-size: 20px; fill: var(--verde-oscuro); }
.bottle__label-flavor { font-family: var(--font-titulos); font-weight: 600; font-size: 10px; letter-spacing: 0.1em; fill: var(--naranja); }
.bottle__shine { fill: none; stroke: rgba(255,255,255,0.55); stroke-width: 6; stroke-linecap: round; }

[data-flavor="pomelo"] .bottle__neck,
[data-flavor="pomelo"] .bottle__body { fill-opacity: 1; fill: rgba(232, 114, 74, 0.4); stroke: rgba(232,114,74,0.65); }
[data-flavor="pomelo"] .bottle__label-flavor { fill: var(--acento-pomelo); }

[data-flavor="mburucuya"] .bottle__neck,
[data-flavor="mburucuya"] .bottle__body { fill: rgba(242, 183, 5, 0.35); stroke: rgba(242,183,5,0.6); }
[data-flavor="mburucuya"] .bottle__label-flavor { fill: var(--acento-mburucuya); }

/* --------------------------------------------------------------------
   SOMOS
   -------------------------------------------------------------------- */
.somos {
  position: relative;
  padding: 120px 24px;
  overflow: hidden;
  /* REGLA CERO-GRIS: fondo de respaldo mientras carga/falla el video
     propio de la sección (.section-bg-video). */
  background-image: url('../frutalia_landing_hero_concept.jpg');
  background-size: cover;
  background-position: center;
}

.somos__text {
  color: var(--texto-suave);
}

.parallax-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.deco { position: absolute; opacity: 0.85; }
.deco--orange-slice { width: 90px; top: 8%; left: 6%; }
.deco--grapefruit   { width: 110px; top: 62%; left: 4%; }
.deco--passion       { width: 80px; top: 14%; right: 8%; }
.deco--leaf-1        { width: 60px; top: 78%; right: 14%; }
.deco--leaf-2        { width: 50px; top: 40%; right: 3%; }

.somos__grid {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

.somos__bottle-slot {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(30px) scale(0.92);
}
.somos__bottle-slot .bottle {
  width: min(220px, 60%);
  animation: bottleFloat 5s ease-in-out infinite;
}

.somos__pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
}
.somos__pillars li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-titulos);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--verde-oscuro);
  /* Chip "vidrio esmerilado": necesita su propio fondo casi opaco para
     seguir siendo legible sobre cualquier fotograma del video de fondo. */
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(62,142,79,0.25);
  border-radius: 999px;
  padding: 10px 18px;
}
.somos__pillars .icon { width: 22px; height: 22px; color: var(--verde); flex-shrink: 0; }

/* --------------------------------------------------------------------
   PRODUCTOS
   -------------------------------------------------------------------- */
.productos {
  position: relative;
  overflow: hidden;
  padding: 120px 24px;
  /* REGLA CERO-GRIS: fondo de respaldo mientras carga/falla el video
     propio de la sección (.section-bg-video). */
  background-image: url('../frutalia_landing_hero_concept.jpg');
  background-size: cover;
  background-position: center;
}

/* Transición cromática: al enfocar/hacer hover en una tarjeta, main.js
   marca data-flavor-focus en la sección y este velo tiñe suavemente el
   fondo hacia el color de ese sabor (encima del overlay oscuro fijo,
   sin reemplazarlo, para no perder contraste). */
.productos__flavor-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
  opacity: 0;
  transition: background-color 0.7s ease, opacity 0.7s ease;
  pointer-events: none;
}
.productos[data-flavor-focus="naranja"] .productos__flavor-tint { background: var(--naranja); opacity: 0.16; }
.productos[data-flavor-focus="pomelo"] .productos__flavor-tint { background: var(--acento-pomelo); opacity: 0.16; }
.productos[data-flavor-focus="mburucuya"] .productos__flavor-tint { background: var(--amarillo); opacity: 0.18; }

.product-grid {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.product-card {
  position: relative;
  background: var(--bg-blanco);
  border-radius: var(--radius-lg);
  padding: 36px 28px 32px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0,0,0,0.04);
  overflow: visible;
  transform: translateY(60px);
  opacity: 0;
  transition: border-color 0.4s ease;
  --card-accent: var(--naranja);
  --card-accent-soft: rgba(242, 121, 12, 0.16);
}
.product-card[data-flavor="pomelo"] {
  --card-accent: var(--acento-pomelo);
  --card-accent-soft: rgba(232, 114, 74, 0.16);
}
.product-card[data-flavor="mburucuya"] {
  --card-accent: var(--acento-mburucuya);
  --card-accent-soft: rgba(242, 183, 5, 0.18);
}

.product-card:hover,
.product-card:focus-visible {
  border-color: var(--card-accent);
}

/* Halo de acento: NO se tiñe el fondo neutro de la sección (regla de
   marca innegociable), sino un resplandor propio y contenido de cada
   tarjeta, detrás del bidón, que se enciende suavemente en hover. */
.product-card__glow {
  position: absolute;
  inset: 8%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--card-accent-soft) 0%, rgba(0,0,0,0) 72%);
  opacity: 0;
  transition: opacity 0.8s ease, background-color 0.8s ease;
  pointer-events: none;
}
.product-card:hover .product-card__glow,
.product-card:focus-visible .product-card__glow,
.product-card.is-orbiting .product-card__glow {
  opacity: 1;
}

.product-card__bottle {
  position: relative;
  z-index: 1;
  width: clamp(96px, 30%, 138px);
  margin: 0 auto 20px;
  transform-style: preserve-3d;
  /* El escalado/rotación de hover lo controla GSAP (ver main.js) para
     evitar que compita con la animación de flotación orgánica de abajo. */
}

/* Flotación orgánica infinita, ligeramente desfasada por botella
   (duración distinta por tarjeta + --bob-delay asignado desde JS) para
   que las tres no floten de forma sincronizada. Se aplica tanto al SVG
   de respaldo como al PNG real, cualquiera que esté visible. */
.product-card__bottle .bidon,
.product-card__photo {
  animation: productBob 4.4s ease-in-out infinite;
  animation-delay: var(--bob-delay, 0s);
}
.product-card:nth-child(2) .bidon,
.product-card:nth-child(2) .product-card__photo { animation-duration: 5s; }
.product-card:nth-child(3) .bidon,
.product-card:nth-child(3) .product-card__photo { animation-duration: 4.7s; }

.product-card__bottle .bidon {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 22px 20px rgba(0,0,0,0.16));
  /* Posicionado (no estático) para poder ordenarse por z-index frente a
     las capas de órbita --back/--front (ver más abajo). */
  position: relative;
  z-index: 1;
}

@keyframes productBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Foto real del producto (PNG transparente, ver data-photo + main.js):
   oculta hasta confirmar que cargó; entonces sustituye en vivo al SVG.
   Al no llevar fondo propio, las capas de órbita pueden pasar tanto por
   detrás como por delante de sus píxeles no transparentes. */
.product-card__photo {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 20px rgba(0,0,0,0.16));
}
.product-card.has-photo .bidon { visibility: hidden; }
.product-card.has-photo .product-card__photo { display: block; }

.product-card__title {
  position: relative;
  z-index: 1;
  font-size: 1.3rem;
  color: var(--texto-principal);
  transition: color 0.4s ease;
}
.product-card:hover .product-card__title,
.product-card:focus-visible .product-card__title { color: var(--card-accent); }

.product-card__desc { position: relative; z-index: 1; font-size: 0.95rem; }

.product-card__tag {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--font-titulos);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--card-accent);
  border-top: 2px solid var(--card-accent);
  padding-top: 10px;
  margin-top: 6px;
  transition: color 0.4s ease, border-color 0.4s ease;
}

/* --------------------------------------------------------------------
   "Explosión de sabor": partículas de fruta orbitando el bidón en hover.
   El radio de órbita usa clamp() para reajustarse a pantallas chicas sin
   desbordar la tarjeta (mobile-first), y cada partícula oscila de escala/
   opacidad durante el recorrido para simular profundidad (parallax de
   micro-capas: se aleja y se acerca del plano de la botella).
   -------------------------------------------------------------------- */
.product-card {
  /* Radios acotados para que la órbita quede contenida alrededor del
     bidón y nunca invada el título/descripción de la tarjeta. */
  --orbit-r-1: clamp(48px, 14vw, 72px);
  --orbit-r-2: clamp(40px, 11vw, 58px);
  --orbit-r-3: clamp(52px, 15vw, 78px);
  --orbit-r-4: clamp(34px, 9vw, 50px);
}

.product-card__orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0; /* GSAP la enciende/apaga en mouseenter/mouseleave (main.js) */
}
/* Dos capas de profundidad relativas al bidón (z-index:1, ver arriba):
   --back queda detrás de sus píxeles, --front por delante, logrando el
   efecto de órbita 3D real que solo un PNG transparente permite. */
.product-card__orbit--back { z-index: 0; }
.product-card__orbit--front { z-index: 2; }
.orbit-fruit {
  position: absolute;
  width: clamp(22px, 7vw, 32px);
  top: 50%;
  left: 50%;
  opacity: 0;
  margin: -16px 0 0 -16px;
  transform: scale(0);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
}

.product-card.is-orbiting .orbit-fruit--1 { animation: orbit1 3.4s linear infinite; }
.product-card.is-orbiting .orbit-fruit--2 { animation: orbit2 3.9s linear infinite reverse; }
.product-card.is-orbiting .orbit-fruit--3 { animation: orbit3 4.6s linear infinite; }
.product-card.is-orbiting .orbit-fruit--4 { animation: orbit4 3.1s linear infinite reverse; }

/* Cada keyframe combina traslación circular + oscilación de escala/opacidad:
   en el punto "lejano" de la órbita (detrás del bidón) se achica y
   atenúa; en el punto "cercano" crece y se aprecia con nitidez. */
@keyframes orbit1 {
  0%   { transform: rotate(0deg)   translateX(var(--orbit-r-1)) rotate(0deg)   scale(0.75); opacity: 0.55; }
  25%  { transform: rotate(90deg)  translateX(var(--orbit-r-1)) rotate(-90deg) scale(1.05); opacity: 1; }
  50%  { transform: rotate(180deg) translateX(var(--orbit-r-1)) rotate(-180deg) scale(0.75); opacity: 0.55; }
  75%  { transform: rotate(270deg) translateX(var(--orbit-r-1)) rotate(-270deg) scale(1.05); opacity: 1; }
  100% { transform: rotate(360deg) translateX(var(--orbit-r-1)) rotate(-360deg) scale(0.75); opacity: 0.55; }
}
@keyframes orbit2 {
  0%   { transform: rotate(0deg)   translateX(var(--orbit-r-2)) rotate(0deg)   scale(1); opacity: 0.9; }
  50%  { transform: rotate(180deg) translateX(var(--orbit-r-2)) rotate(-180deg) scale(0.6); opacity: 0.45; }
  100% { transform: rotate(360deg) translateX(var(--orbit-r-2)) rotate(-360deg) scale(1); opacity: 0.9; }
}
@keyframes orbit3 {
  0%   { transform: rotate(90deg)  translateX(var(--orbit-r-3)) rotate(-90deg)  scale(0.7); opacity: 0.5; }
  50%  { transform: rotate(270deg) translateX(var(--orbit-r-3)) rotate(-270deg) scale(1.1); opacity: 1; }
  100% { transform: rotate(450deg) translateX(var(--orbit-r-3)) rotate(-450deg) scale(0.7); opacity: 0.5; }
}
@keyframes orbit4 {
  0%   { transform: rotate(45deg)  translateX(var(--orbit-r-4)) rotate(-45deg)  scale(1); opacity: 0.85; }
  50%  { transform: rotate(225deg) translateX(var(--orbit-r-4)) rotate(-225deg) scale(0.65); opacity: 0.5; }
  100% { transform: rotate(405deg) translateX(var(--orbit-r-4)) rotate(-405deg) scale(1); opacity: 0.85; }
}

/* --------------------------------------------------------------------
   BIDÓN DE 5L — estructura y theming por sabor
   -------------------------------------------------------------------- */
.bidon__handle,
.bidon__shoulder,
.bidon__body {
  fill: rgba(255, 255, 255, 0.16);
  stroke: rgba(60, 50, 30, 0.28);
  stroke-width: 2;
}
.bidon__neck { fill: rgba(255, 255, 255, 0.22); stroke: rgba(60,50,30,0.28); stroke-width: 2; }
.bidon__cap { fill: #D8B65C; stroke: #B99640; stroke-width: 1.5; }
.bidon__cap-ridge { stroke: rgba(0,0,0,0.18); stroke-width: 2; stroke-linecap: round; }
.bidon__label { fill: #FDFBF6; stroke: var(--naranja); stroke-width: 1.5; }
.bidon__label-text {
  font-family: var(--font-titulos); font-weight: 700; font-size: 22px;
  fill: var(--verde-oscuro);
}
.bidon__label-flavor {
  font-family: var(--font-titulos); font-weight: 600; font-size: 11px;
  letter-spacing: 0.1em; fill: var(--naranja);
}
.bidon__label-icon { transition: opacity 0.3s ease; }
.bidon__shine { fill: none; stroke: rgba(255,255,255,0.6); stroke-width: 7; stroke-linecap: round; }

/* Líquido: color según sabor, visible a través del cuerpo translúcido */
.bidon__liquid { fill: #F2790C; fill-opacity: 0.82; }
.bidon__liquid-surface { fill: rgba(255,255,255,0.35); }

[data-flavor="naranja"] .bidon__label { stroke: var(--naranja); }
[data-flavor="naranja"] .bidon__label-flavor { fill: var(--naranja); }

[data-flavor="pomelo"] .bidon__liquid { fill: #F7DE6B; fill-opacity: 0.8; }
[data-flavor="pomelo"] .bidon__label { stroke: var(--acento-pomelo); }
[data-flavor="pomelo"] .bidon__label-flavor { fill: var(--acento-pomelo); }
[data-flavor="pomelo"] .bidon__handle,
[data-flavor="pomelo"] .bidon__shoulder,
[data-flavor="pomelo"] .bidon__body { stroke: rgba(232,114,74,0.35); }

[data-flavor="mburucuya"] .bidon__liquid { fill: #F2A30F; fill-opacity: 0.85; }
[data-flavor="mburucuya"] .bidon__label { stroke: var(--amarillo); }
[data-flavor="mburucuya"] .bidon__label-flavor { fill: #C97B0A; }
[data-flavor="mburucuya"] .bidon__handle,
[data-flavor="mburucuya"] .bidon__shoulder,
[data-flavor="mburucuya"] .bidon__body { stroke: rgba(242,183,5,0.4); }

/* --------------------------------------------------------------------
   TIENDA — a diferencia de Hero/Somos/Productos/Contactos, esta página
   no lleva <video> de fondo: diseño "limpio premium" con la imagen de
   concepto desenfocada detrás (::before, blureada y ligeramente
   escalada para que el blur no deje bordes nítidos) más un velo claro
   (::after) que la aclara para que siga sintiéndose "premium claro" y
   no oscura. REGLA CERO-GRIS: al ser una imagen local ya empaquetada
   (no un video que pueda fallar/tardar), no necesita fallback aparte.
   -------------------------------------------------------------------- */
.tienda {
  position: relative;
  overflow: hidden;
  padding: 120px 24px;
}
.tienda::before {
  content: '';
  position: absolute;
  inset: -20px;
  background-image: url('../frutalia_landing_hero_concept.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(14px) saturate(110%);
  transform: scale(1.05);
  z-index: 0;
}
.tienda::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
  z-index: 0;
}

.shop-grid {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.shop-card {
  background: var(--bg-blanco);
  border-radius: var(--radius-md);
  padding: 28px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(40px);
}

.shop-card__media {
  height: 160px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 18px;
}
.shop-card__media--naranja [data-flavor],
.shop-card__media .bottle { --unused: 0; }
.shop-card__media--pomelo .bottle .bottle__neck,
.shop-card__media--pomelo .bottle .bottle__body { fill: rgba(232,114,74,0.4); stroke: rgba(232,114,74,0.65); }
.shop-card__media--mburucuya .bottle .bottle__neck,
.shop-card__media--mburucuya .bottle .bottle__body { fill: rgba(242,183,5,0.35); stroke: rgba(242,183,5,0.6); }
.snack-icon { width: 90px; }

.shop-card h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.shop-card p { font-size: 0.92rem; }

.shop-card__price {
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--naranja-fuerte);
  margin: 4px 0 14px;
}
.shop-card__price small {
  font-family: var(--font-cuerpo);
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 4px;
}

/* --------------------------------------------------------------------
   CONTACTOS
   -------------------------------------------------------------------- */
.contactos {
  position: relative;
  overflow: hidden;
  padding: 120px 24px 80px;
  /* REGLA CERO-GRIS: fondo de respaldo mientras carga/falla el video
     propio de la sección (.section-bg-video). */
  background-image: url('../frutalia_landing_hero_concept.jpg');
  background-size: cover;
  background-position: center;
}

.contactos__grid {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto 60px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.contactos__info,
.contactos__form-wrap {
  opacity: 0;
}
[data-reveal-dir="left"] { transform: translateX(-50px); }
[data-reveal-dir="right"] { transform: translateX(50px); }

.contact-list { margin-top: 24px; display: flex; flex-direction: column; gap: 22px; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; }
.contact-list .icon { width: 26px; height: 26px; color: var(--amarillo); flex-shrink: 0; margin-top: 2px; }
.contact-list strong { font-family: var(--font-titulos); color: var(--texto-principal); display: block; margin-bottom: 2px; }
.contact-list p { color: var(--texto-suave); }
.contact-list a:hover { color: var(--amarillo); }

.contact-form {
  background: var(--bg-crema);
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid rgba(62,142,79,0.15);
}
.contact-form h3 { color: var(--verde-oscuro); margin-bottom: 20px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--font-titulos);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--texto-principal);
}
.field input, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: #fff;
  font-family: var(--font-cuerpo);
  font-size: 0.95rem;
  resize: vertical;
  transition: border-color 0.3s ease;
}
.field input:focus, .field textarea:focus {
  border-color: var(--verde);
}
.form-note {
  margin: 14px 0 0;
  font-size: 0.88rem;
  color: var(--verde-oscuro);
  font-weight: 600;
  min-height: 1.2em;
}

.map-wrap {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  opacity: 0;
  transform: translateY(40px);
}
.map-wrap iframe {
  width: 100%;
  height: 360px;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------
   FOOTER — versión compacta de una sola fila (aprox. mitad de alto que
   la versión anterior en columnas): mismo tratamiento "vidrio" que el
   header (fondo crema translúcido + blur, sin verde de fondo), logo
   más grande que en el header, y navegación/contacto en línea con
   textos chicos en vez de listas apiladas.
   -------------------------------------------------------------------- */
.site-footer {
  background: rgba(248, 245, 238, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(62, 142, 79, 0.12);
  padding: 28px 24px 0;
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Más grande que el logo del header (34px): es el único elemento al
   que se le pidió crecer pese a que el footer en conjunto se achicó. */
.brand__logo--footer { height: 64px; }

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.site-footer__nav a {
  font-family: var(--font-titulos);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--texto-principal);
  transition: color 0.3s ease;
}
.site-footer__nav a:hover, .site-footer__nav a:focus-visible { color: var(--naranja); }

.site-footer__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}
.site-footer__contact li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--texto-suave);
  white-space: nowrap;
}
.site-footer__contact .icon { width: 16px; height: 16px; color: var(--naranja); flex-shrink: 0; }
.site-footer__contact a { color: var(--texto-suave); transition: color 0.3s ease; }
.site-footer__contact a:hover, .site-footer__contact a:focus-visible { color: var(--naranja); }

.site-footer__bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 0 16px;
  text-align: center;
}
.site-footer__legal { font-size: 0.75rem; color: var(--texto-suave); margin: 0; }

/* --------------------------------------------------------------------
   BOTÓN FLOTANTE DE WHATSAPP
   -------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 600;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px -8px rgba(44, 107, 58, 0.6);
  animation: whatsappPulse 2.6s ease-in-out infinite;
}
.whatsapp-float svg { width: 28px; height: 28px; }
.whatsapp-float:hover, .whatsapp-float:focus-visible {
  background: var(--verde-oscuro);
  animation-play-state: paused;
  transform: scale(1.1);
}

@keyframes whatsappPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 25px -8px rgba(44,107,58,0.6); }
  50%      { transform: scale(1.05); box-shadow: 0 14px 30px -6px rgba(44,107,58,0.75); }
}

/* --------------------------------------------------------------------
   RESPONSIVE — Mobile-first: reglas base ya son mobile.
   A partir de aquí ampliamos para tablet / desktop.
   -------------------------------------------------------------------- */
@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px) {
  .nav-toggle { display: none; }
}

@media (max-width: 859px) {
  .primary-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: var(--bg-crema);
    box-shadow: -12px 0 30px rgba(0,0,0,0.08);
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
    padding: 100px 32px;
    z-index: 505;
  }
  .primary-nav.is-open { transform: translateX(0); }
  .primary-nav ul { flex-direction: column; gap: 26px; }
  .nav-toggle { display: flex; }
}

@media (min-width: 960px) {
  .somos__grid { grid-template-columns: 0.9fr 1.1fr; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .shop-grid { grid-template-columns: repeat(4, 1fr); }
  .contactos__grid { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------
   REDUCED MOTION — respeta la preferencia del sistema operativo
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .whatsapp-float { animation: none; }

  /* Los videos de fondo por sección se ocultan (además main.js los
     pausa, ver initSectionVideos() en js/main.js) y queda visible el
     background-image de respaldo de cada <section> — estático, sin
     movimiento, pero sin caer nunca en una caja gris. El texto ya vive
     en paleta oscura-sobre-clara por defecto (dentro de .glass-card o
     directamente en Tienda/Contactos), así que no necesita revertirse. */
  .section-bg-video { display: none; }
}

/* --------------------------------------------------------------------
   TOUCH DEVICES — simplifica micro-interacciones de hover pesadas
   (regla mandatoria de Mobile-First / optimización táctil)
   -------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  /* En táctil, main.js nunca agrega los listeners de hover (ver
     isTouchDevice), así que la "explosión de sabor" y el escalado 3D del
     bidón simplemente no se disparan; esto solo asegura que, si algo
     igual queda con la clase is-orbiting, no anime partículas de más. */
  .product-card.is-orbiting .orbit-fruit { animation: none; opacity: 0; }
  .btn--primary:hover, .btn--cta:hover, .btn--ghost:hover {
    transform: none;
  }
}