/* ==========================================================================
   INSTITUTIONAL STORY — Nosotros — DIGART Studio
   Pattern: Institutional Story

   Referencia documental:
     project/01-CONSTITUTION/C-01-IDENTITY.md (§4 Cómo pensamos, §5 Cómo
     trabajamos, §6 Cómo se trata a las personas)
     project/03-PRODUCT/P-02-FRONTEND.md (4.1 Grid, 4.2 Contenedores)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-container, .l-grid,
   .l-col-4). No declara valores independientes de color, tipografía,
   espaciado, tiempo, easing, z-index, sombra ni punto de quiebre.
   Reconstrucción del sprint "Nosotros v2": tres columnas de igual peso
   con imagen propia, en lugar de la fila de dos columnas (bloque
   narrativo + área de montaje única) de la implementación anterior.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   -------------------------------------------------------------------- */
.institutional-story {
  padding-block: var(--space-8);
  background-color: var(--color-background-default);
}

/* --------------------------------------------------------------------
   2. Container / Intro
   -------------------------------------------------------------------- */
.institutional-story__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 42rem;
  margin-inline: auto;
  margin-block-end: var(--space-7);
  text-align: center;
}

.institutional-story__eyebrow-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.institutional-story__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-story__divider {
  display: block;
  width: var(--space-6);
  height: var(--border-width-thick);
  border-radius: var(--border-radius-full);
  background-color: var(--color-error);
}

.institutional-story__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------
   3. Elements — columnas
   Tres columnas de igual peso (l-col-4, layout.css): sin números, sin
   fondo de tarjeta ni sombra propia, ninguna domina visualmente sobre
   las otras dos.
   -------------------------------------------------------------------- */
.institutional-story__grid {
  align-items: start;
}

.institutional-story__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Imagen rectangular de apoyo contextual (Blueprint del sprint): mismo
   tratamiento object-fit: cover ya usado en el resto de áreas de montaje
   del sitio, proporción editorial 4:3 uniforme en las tres columnas. */
.institutional-story__item-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface-subtle);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

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

.institutional-story__item-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
}

.institutional-story__item-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

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

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

/* --------------------------------------------------------------------
   6. 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).
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   7. Responsive
   Sistema Responsive (Cap. 11). El remapeo oficial de spans (RWD-08,
   layout.css) ya linealiza .l-col-4 en una sola columna apilada de ancho
   completo; sin reglas adicionales.
   -------------------------------------------------------------------- */