/* ==========================================================================
   INSTITUTIONAL HERO — Nosotros — DIGART Studio
   Pattern: Institutional Hero

   Referencia documental:
     project/01-CONSTITUTION/C-01-IDENTITY.md (§3 Razón de existir)
     project/03-PRODUCT/P-02-FRONTEND.md (4.2 Contenedores, 6 Dirección de
     Arte, 10 Tipografía, 17 Sistema de Accesibilidad)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-full-width, .l-container). No
   declara valores independientes de color, tipografía, espaciado, tiempo,
   easing, z-index, sombra ni punto de quiebre. Reconstrucción del sprint
   "Nosotros v2": incorpora capas superpuestas (fondo + overlay), mismo
   criterio ya certificado en hero.css; el bloque editorial conserva su
   alineación centrada en .l-container, sin cambios respecto a la
   implementación anterior.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   Hero breve (Blueprint del sprint, "Hero breve y limpio"): altura
   moderada, no viewport completo. position: relative + overflow: hidden
   habilitan las capas superpuestas (2, Elements) sin necesidad de
   z-index (Home hero.css, mismo criterio).
   -------------------------------------------------------------------- */
.institutional-hero {
  position: relative;
  overflow: hidden;
  min-height: 28rem;
  display: flex;
  align-items: center;
  background-color: var(--color-background-inverse);
}

/* --------------------------------------------------------------------
   2. Elements — capas superpuestas
   -------------------------------------------------------------------- */
.institutional-hero__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.institutional-hero__background img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay oscuro plano suficiente para lectura (Blueprint del sprint):
   mismo Token Overlay ya oficial (--color-overlay-emphasis, tokens.css
   3.1) ya usado como capa de legibilidad en el Hero de la Home; sin
   declarar ningún color independiente. */
.institutional-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay-emphasis);
}

/* --------------------------------------------------------------------
   3. Container
   position: relative (sin z-index) sitúa el bloque editorial por encima
   de fondo/overlay, mismo criterio que hero.css. padding-block resuelve
   la separación respecto al Header fijo (position: fixed, header.css) y
   respecto al siguiente Pattern.
   -------------------------------------------------------------------- */
.institutional-hero__container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block-start: calc(var(--space-8) + var(--space-6));
  padding-block-end: var(--space-8);
}

/* --------------------------------------------------------------------
   4. Elements — bloque editorial
   -------------------------------------------------------------------- */
.institutional-hero__eyebrow {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-error);
}

.institutional-hero__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-inverse);
  max-width: 42rem;
}

.institutional-hero__support-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-inverse);
  max-width: 36rem;
}

/* --------------------------------------------------------------------
   5. Variants
   Sección reservada: este Pattern no define variantes.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. States
   Sección editorial sin elementos interactivos propios; estado base
   (Default) representado por el resto de las reglas.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   7. Motion Hooks
   Sin disparador funcional propio: esta página no reproduce la cadena de
   eventos narrativos de la Home (P-03); el contenido se presenta
   directamente en su estado final (mismo criterio ya aplicado en el
   resto de páginas institucionales).
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   8. Responsive
   Sistema Responsive (Cap. 11), breakpoint oficial de tokens.css
   reproducido en valor literal, mismo criterio que layout.css.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .institutional-hero {
    min-height: 24rem;
  }

  .institutional-hero__container {
    padding-block-start: calc(var(--space-7) + var(--space-6));
  }

  .institutional-hero__title,
  .institutional-hero__support-text {
    max-width: none;
  }
}