/* ==========================================================================
   INSTITUTIONAL PROCESS — Nosotros — DIGART Studio
   Pattern: Institutional Process

   Referencia documental:
     project/01-CONSTITUTION/C-01-IDENTITY.md (§5 Cómo trabajamos)
     project/03-PRODUCT/P-02-FRONTEND.md (4.1 Grid, 4.2 Contenedores, 12
     Iconografía)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-container, .l-grid,
   .l-col-3). No declara valores independientes de color, tipografía,
   espaciado, tiempo, easing, z-index, sombra ni punto de quiebre. Cuatro
   columnas equivalentes, sin tarjeta ni fondo individual por paso, sin
   numeración explícita.
   ========================================================================== */

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

/* --------------------------------------------------------------------
   2. Elements — encabezado
   El Label es el único encabezado de la sección: <h2> semántico con el
   mismo tratamiento visual de eyebrow ya usado en el resto del sitio
   (mayúsculas, acento rojo), evitando un salto de jerarquía hacia los
   <h3> de cada paso (3, Elements).
   -------------------------------------------------------------------- */
.institutional-process__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);
  text-align: center;
  margin-block-end: var(--space-7);
}

/* --------------------------------------------------------------------
   3. Elements — pasos
   Separadores verticales sutiles entre columnas en escritorio (Blueprint
   del sprint): borde izquierdo en todos los pasos salvo el primero, sin
   fondo ni sombra propia (nunca se convierten en tarjetas).
   -------------------------------------------------------------------- */
.institutional-process__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-inline-start: var(--space-5);
  border-inline-start: var(--border-width-default) var(--border-style-solid) var(--color-overlay-inverse);
}

.institutional-process__step:first-child {
  padding-inline-start: 0;
  border-inline-start: none;
}

/* Tamaño fijo en píxel (excepción de composición, mockup aprobado):
   56px en escritorio, 48px en móvil (7, Responsive) — mayor peso visual
   que el Token --space-6 anterior. margin-block-end adicional (además
   del gap de .institutional-process__step) separa el icono del título
   para conservar una jerarquía limpia con el nuevo tamaño. */
.institutional-process__icon {
  width: 56px;
  height: 56px;
  color: var(--color-error);
  margin-block-end: var(--space-2);
}

.institutional-process__step-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-inverse);
}

.institutional-process__step-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-overlay-inverse);
}

/* --------------------------------------------------------------------
   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 ni JavaScript (Blueprint del sprint,
   "No agregues JavaScript para Process ni Criterion"); el contenido se
   presenta directamente en su estado final.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   7. Responsive
   Sistema Responsive (Cap. 11). El remapeo oficial de spans (RWD-08,
   layout.css) ya linealiza .l-col-3 en una sola columna apilada; los
   separadores verticales pierden sentido en una sola columna y se
   retiran aquí para no producir un trazo suelto ni desbordamiento
   horizontal, sustituidos por el espaciado vertical ya resuelto por
   .l-grid (row-gap, layout.css).
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .institutional-process__step {
    padding-inline-start: 0;
    border-inline-start: none;
  }

  .institutional-process__icon {
    width: 48px;
    height: 48px;
  }
}