/* ==========================================================================
   GRAZIANI — Hero animado (prototipo)
   Tokens tomados del sitio actual (styles.css): azul #265c7f, celeste #f1f9fd,
   gris texto #3a3737. Verde tomado de la etiqueta Eco Agua.
   ========================================================================== */

:root {
  --azul: #265c7f;
  --azul-2: #436694;
  --azul-oscuro: #154b7a;
  --celeste-bg: #f1f9fd;
  --gris-texto: #3a3737;
  --verde-eco: #3fb56a;
  --blanco: #ffffff;

  /* Curvas fuertes (las nativas son flojas) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* curva de cajón de iOS (la de Vaul) */

  --bottle-h: 86vh;          /* el frame trae margen: la botella visible queda ~80vh, como el original */
}

@font-face { font-family: "Montserrat"; font-weight: 200; font-style: normal; font-display: swap; src: url("../fonts/montserratextralight.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/montserratlight.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/montserratregular.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/montserratmedium.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/montserratsemibold.ttf") format("truetype"); }

/* Resets acotados al nav, al hero y a las secciones del prototipo: no tocan el CSS original del resto de la página */
.nav, .nav *, .hero, .hero *, .section, .section * { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* styles.css pone height:100% en html/body con overflow-x:hidden: el scroll pasaba dentro del body y
   ScrollTrigger (que escucha la ventana) no lo veía. Con altura automática scrollea la ventana. */
html, body { height: auto; }
/* El contenedor original es flex en columna: ahí el espaciador del pin de ScrollTrigger no crece y las secciones
   siguientes se deslizan escondidas bajo el hero. Como bloque normal el layout es idéntico y el pin reserva su espacio. */
#indexcontainer { display: block; }
body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.nav img, .hero img { display: block; max-width: 100%; }
.section { color: var(--gris-texto); background: var(--celeste-bg); }

/* --------------------------------------------------------------------------
   Nav (píldora translúcida, como el sitio actual)
   -------------------------------------------------------------------------- */
/* Medidas del original: nav a 35 px del borde y 60 px del lado, píldora radio 8, logo de 40 px */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 35px 60px 0;
  pointer-events: none;
}
.nav__links {
  display: flex;
  gap: clamp(5px, 1vw, 15px);
  padding: 10px 20px;
  border-radius: 8px;
  background: rgba(10, 29, 54, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
  max-width: 75%;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav__links::-webkit-scrollbar { display: none; }
.nav__links a {
  position: relative;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-weight: 200;
  font-size: clamp(14px, 1.5vw, 20px);
  padding: 5px clamp(5px, 1vw, 10px);
  white-space: nowrap;
  transition: color 220ms var(--ease-out);
}
/* subrayado del original (celeste), más rápido */
.nav__links a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -4px;
  width: 0;
  height: 5px;
  background: #009fe3;
  transition: width 320ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover::after { width: calc(100% - 20px); }
}
.nav__brand {
  position: relative;
  display: block;
  height: 40px;
  pointer-events: auto;
}
.nav__logo {
  height: 40px;
  width: auto;
  transition: opacity 220ms var(--ease-out);
}
.nav__logo--blanco { filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.3)); }
.nav__logo--azul { position: absolute; top: 0; left: 0; opacity: 0; }

/* Sobre fondo claro (secciones con data-nav="light"): logo azul y píldora clara */
.nav--light .nav__logo--blanco { opacity: 0; }
.nav--light .nav__logo--azul { opacity: 1; }
.nav__links { transition: background-color 220ms var(--ease-out); }
.nav--light .nav__links { background: rgba(255, 255, 255, 0.62); }
.nav--light .nav__links a { color: var(--azul); }

/* --------------------------------------------------------------------------
   Hero (sección pineada; GSAP anima SOLO a los hijos, nunca a .hero)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100vh; /* en celulares equivale al viewport grande: pineado no deja franja al ocultarse la barra */
  overflow: hidden;
  background: #0f2438;
  color: #fff;
}

/* Fondo más alto que el viewport: deja recorrido para "bajar la toma" */
.hero__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 130%;
  transform-origin: 50% 50%;
  will-change: transform;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

/* Velo para legibilidad del texto sobre la nieve */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 24, 44, 0.55) 0%, rgba(8, 24, 44, 0.18) 45%, rgba(8, 24, 44, 0) 70%),
    linear-gradient(180deg, rgba(8, 24, 44, 0.35) 0%, rgba(8, 24, 44, 0) 32%);
}

.hero__copy {
  position: absolute;
  left: 15%;                 /* como el .text-container original (padding-left: 15 %) */
  top: 50%;
  transform: translateY(-50%);
  max-width: 40rem;
  z-index: 2;
}
.hero__copy--b { opacity: 0; visibility: hidden; }

/* Tipografía del hero: mismos tamaños y pesos que el sitio original (.main-text / .secondary-text) */
.hero h1,
.hero h2 {
  margin: 0 0 30px;
  font-weight: 500;
  font-size: clamp(40px, 4vw, 68px);
  line-height: 1.1;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.hero h1 strong,
.hero h2 strong { font-weight: 500; }
.hero p {
  margin: 0;
  max-width: 30rem;
  font-weight: 400;
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c9f2d8;
  background: rgba(63, 181, 106, 0.18);
  border: 1px solid rgba(63, 181, 106, 0.4);
}

/* Botella: wrapper flex para centrar en mobile sin transforms (GSAP usa el transform de .hero__stage) */
.hero__stagewrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4vh;
  display: flex;
  justify-content: flex-end;
  padding-right: 17vw;       /* centro de la botella ~75 % del ancho, como en el original */
  pointer-events: none;
  z-index: 1;
}
.hero__stage {
  position: relative;
  height: var(--bottle-h);
  aspect-ratio: 1700 / 5280; /* encuadre de los recortes botella-*.webp */
  perspective: 1800px;
  will-change: transform;
}
.hero__shadow {
  position: absolute;
  left: 50%;
  bottom: -1.5%;
  width: 150%;
  height: 5%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0) 68%);
  filter: blur(6px);
}
.flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.flip__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip__face--back { transform: rotateY(180deg); }

/* Secuencias de frames (canvas). Se activan con .has-giro / .has-cord desde hero.js.
   .hero__bgseq vive DENTRO de .hero__bg (130 % de alto): hereda el paneo de "bajar la toma". */
.hero__seq,
.hero__bgseq {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.hero.has-giro .hero__seq { display: block; }
.hero.has-giro .flip { display: none; }
.hero.has-cord .hero__bgseq { display: block; }

.hero__hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  z-index: 2;
}
.hero__hint::after {
  content: "";
  display: block;
  width: 1px;
  height: 28px;
  margin: 10px auto 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}

/* Estado estático: reduced-motion o sin GSAP. Muestra el resultado final (Eco Agua). */
.hero.is-static .hero__copy--a,
.hero.is-static .hero__hint { display: none; }
.hero.is-static .hero__copy--b { opacity: 1; visibility: visible; }
.hero.is-static .flip { transform: rotateY(180deg); }

/* --------------------------------------------------------------------------
   Secciones siguientes (placeholder para que el paneo "aterrice" en algo)
   -------------------------------------------------------------------------- */
.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 10vw, 140px) clamp(24px, 7vw, 120px);
}
/* Pantalla completa: el segundo scroll aterriza en una pantalla entera, con el contenido centrado */
.section--pantalla {
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section h2 {
  margin: 0 0 32px;
  font-weight: 300;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
}
.section p {
  margin: 0 0 20px;
  max-width: 60ch;
  font-size: 1.05rem;
  line-height: 1.7;
}
.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.section--aviso {
  text-align: center;
  color: var(--azul-2);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root { --bottle-h: 46vh; }
  .nav__brand, .nav__logo { height: 20px; }   /* mobile del original */
  .hero__copy {
    left: 20px;
    right: 20px;
    top: 13vh;
    transform: none;
    max-width: none;
  }
  .hero h1,
  .hero h2 { font-size: 35px; margin-bottom: 16px; }   /* valores mobile del original */
  .hero p { font-size: 20px; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(8, 24, 44, 0.6) 0%, rgba(8, 24, 44, 0.25) 40%, rgba(8, 24, 44, 0) 60%);
  }
  .hero__stagewrap { justify-content: center; padding-right: 0; bottom: 10vh; }   /* termina arriba del "Deslizá" */
  .cols { grid-template-columns: 1fr; gap: 0; }
}

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

/* ==========================================================================
   MÓVIL: menú hamburguesa + cajón lateral (≤ 768 px, el breakpoint del sitio original)
   Va al FINAL del archivo a propósito: un override en el medio pierde por orden de cascada
   (lección de la skill ghm-web). Cajón: entra y sale por la izquierda (consistencia espacial),
   curva de iOS al abrir, salida más rápida que la entrada.
   ========================================================================== */
.nav__burger,
.nav__scrim { display: none; }

@media (max-width: 768px) {
  .nav { padding: 22px 16px 0; align-items: center; }

  .nav__burger {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    width: 44px;                        /* área táctil mínima de 44 px */
    height: 44px;
    padding: 10px;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: transform 160ms var(--ease-out);
  }
  .nav__burger:active { transform: scale(0.94); }
  .nav__burger span {
    display: block;
    width: 24px;
    height: 2.5px;
    border-radius: 2px;
    background: #fff;
    transition: transform 280ms var(--ease-drawer), opacity 160ms var(--ease-out), background-color 220ms var(--ease-out);
  }
  .nav--light .nav__burger span { background: var(--azul); }
  .nav.is-open .nav__burger span { background: #fff; }
  .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

  .nav__links {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    box-sizing: border-box;
    width: min(82%, 320px);
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 92px 28px 32px;
    border-radius: 0;
    background: var(--azul-2);          /* #436694, el color del menú del sitio original */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;                  /* cerrado: fuera del orden de tabulación */
    transition: transform 240ms var(--ease-out), visibility 0s linear 240ms;
  }
  .nav.is-open .nav__links {
    transform: none;
    visibility: visible;
    transition: transform 420ms var(--ease-drawer), visibility 0s;
  }
  .nav__links a,
  .nav--light .nav__links a {
    padding: 16px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 18px;
    font-weight: 300;
  }
  .nav__links a::after { display: none; }
  .nav__links a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: -2px;
    border-radius: 6px;
  }

  .nav__scrim {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    background: rgba(8, 24, 44, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms var(--ease-out);
  }
  .nav.is-open .nav__scrim {
    opacity: 1;
    pointer-events: auto;
    transition-duration: 320ms;
  }

  html.menu-abierto,
  html.menu-abierto body { overflow: hidden; }   /* sin scroll de fondo con el menú abierto */
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .nav__links,
  .nav.is-open .nav__links,
  .nav__burger span { transition: none; }
}