/*
 * hero-interior.css — "hero-pagina-interior" (plan-segmentacion.md §2.3), usado en las 6 páginas
 * interiores (todas menos `inicio`). Foto de fondo + nav superpuesta (ya la resuelve
 * .gyo-hero/.gyo-nav de header.css, mismo mecanismo que `inicio`) + eyebrow + H1 de 1–2 líneas.
 * Alto consistente ~692–693px en `estudio`/`servicios`/`proyectos`/`equipo`; `contacto` y
 * `proyecto-detalle` tienen su propia medida, se aplica por variante de página.
 */

.gyo-hero-interior__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 1; /* por debajo de .gyo-nav (z-index:2) — bug real encontrado 2026-08-17: con el
    mismo z-index que el nav, el orden de aparición en el DOM (este bloque va después de <nav>)
    lo dejaba pintado — y por lo tanto capturando los clics — por ENCIMA de la barra de
    navegación en toda su caja de 100% de alto, aunque visualmente el texto solo ocupe la mitad
    inferior. El nav quedaba inutilizable de punta a punta en las 6 páginas interiores. No hace
    falta pointer-events acá: este bloque no tiene ningún link/botón adentro, solo texto. */
  display: flex;
  align-items: center;
}

.gyo-hero-interior__eyebrow {
  display: block;
  font-size: var(--gyo-font-size-eyebrow-hero); /* 26→17, Fase 3 */
  color: var(--color-beige); /* texto claro sobre foto = beige, no blanco (P3) */
  text-transform: uppercase;
  margin: 0 0 var(--gyo-space-3) 0;
}

.gyo-hero-interior__titulo {
  font-size: var(--gyo-font-size-h1-inicio); /* 80px, mismo tamaño que el H1 de inicio */
  font-weight: 600; /* SemiBold, mismo criterio PROVISIONAL ya usado en hero-inicio */
  line-height: 1.175; /* 94/80, Fase 3: múltiplo en vez de px fijo, mismo criterio que
    hero-inicio (inicio.css) — reproduce el mismo 94px exacto en el ancho de referencia */
  color: var(--color-beige);
  margin: 0;
  /* Sin max-width: el salto de línea ya viene marcado con <br> en el HTML (medido del PDF,
     span por span). Un max-width fijo aquí forzaba un segundo wrap automático encima del <br>
     en textos más largos que los de `estudio` (ej. "pensados como uno solo" de `servicios`,
     ~954px, no cabía en los 900px pensados solo para el caso de `estudio`). Corregido 2026-08-17. */
}

/* Fase 3 (2026-08-18): a diferencia de hero-inicio (varios elementos posicionados absoluto cada
   uno con su propio `top`/`left` medido), acá solo el wrapper `.gyo-hero-interior__content` es
   absoluto — el eyebrow y el H1 ya fluyen normal adentro, centrados verticalmente por flex. Alcanza
   con que el wrapper deje de ser absoluto (y el `.gyo-hero` de cada página deje de tener un alto
   fijo) para que el contenido no se corte ni se superponga al nav. */
@media (max-width: 991.98px) {
  .gyo-hero-interior__content {
    position: static;
    height: auto;
    padding-top: calc(var(--gyo-header-gap-topbar-nav-6) + var(--gyo-header-height-9) + var(--gyo-space-4));
    padding-bottom: var(--gyo-space-5);
  }
}