/* =========================================================
   GAP Broker — stage.css
   Navegación "hub" sin scroll de página: el hero es la vista base y
   cada sección se abre desde el header ocupando la misma caja, con
   fundido cruzado. Si el contenido de una vista no entra, scrollea
   dentro de sí misma, no la página.

   Todo esto se activa recién cuando main.js agrega .stage-on al body:
   sin JS el sitio se degrada a una página normal con scroll y todas
   las secciones visibles.
   ========================================================= */

.stage { position: relative; }

body.stage-on { overflow: hidden; }

body.stage-on .stage {
  height: var(--page-h, calc(100vh - 79px));
  overflow: hidden;
}

body.stage-on .page {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  /* visibility acompaña al fundido: al entrar se prende de una, al salir
     espera a que termine la opacidad. Así el cruce se ve completo. */
  transition: opacity .45s cubic-bezier(.16, .84, .44, 1), visibility .45s;
}

body.stage-on .page.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

body.stage-on .page:focus { outline: none; }

/* El pie del mockup va al final de CADA vista (main.js lo clona). En las
   secciones que entran sin scrollear queda pegado abajo; en las largas
   aparece después del contenido. */
.page__scroll { min-height: 100%; display: flex; flex-direction: column; }
.page__scroll > .footer, .page > .footer { margin-top: auto; }

/* En el hero, la foto de fondo tiene que cubrir toda la vista */
body.stage-on .page.hero { display: flex; flex-direction: column; }
body.stage-on .page.hero .hero__inner { flex: 1 0 auto; }

/* ---------- Ancla deslizante del nav ----------
   Marca la sección en la que estás y se desplaza al ítem que tocás. */
.nav__ink {
  position: absolute;
  left: 0;
  bottom: -7px;
  height: 2.5px;
  width: 0;
  background: var(--gold);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
  transition: transform .34s cubic-bezier(.16, .84, .44, 1),
              width .34s cubic-bezier(.16, .84, .44, 1),
              opacity .2s ease;
}
.nav__ink.is-on { opacity: 1; }

/* Solo cambia el color: poner el ítem actual en negrita lo ensancha y
   corre todo el nav un pixel cada vez que cambiás de sección. Quién es el
   actual ya lo dice el ancla dorada. */
.nav__link.is-current { color: var(--deep); }

@media (prefers-reduced-motion: reduce) {
  .nav__ink { transition: none; }
  body.stage-on .page { transition: none; }
}

/* En mobile no hay ancla deslizante (el nav horizontal no existe) */
@media (max-width: 1060px) {
  .nav__ink { display: none; }
}

/* En pantallas chicas el botón queda solo con la flecha: entre la marca y
   la hamburguesa no hay lugar para el texto. */
@media (max-width: 620px) {
  .footer__grid { padding-top: 44px; padding-bottom: 30px; }
}