/* ==========================================================================
   INSTITUTIONAL PROMISE — Nosotros — DIGART Studio
   Pattern: Institutional Promise

   Referencia documental:
     project/01-CONSTITUTION/C-01-IDENTITY.md (§10 La Promesa DIGART)
     project/03-PRODUCT/P-02-FRONTEND.md (4.1 Grid, 4.2 Contenedores, 8.1
     Botones)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-container, .l-grid,
   .l-col-8). 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
   institutional-hero.css, en lugar del fondo plano sin imagen de la
   implementación anterior. El botón del CTA se resuelve íntegro en el
   Componente oficial Button v1.0 (button.css); este archivo solo
   conserva el layout que lo aloja.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   position: relative + overflow: hidden habilitan las capas superpuestas
   (2, Elements) sin necesidad de z-index, mismo criterio que
   institutional-hero.css.
   -------------------------------------------------------------------- */
.institutional-promise {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8);
  background-color: var(--color-background-inverse);
}

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

.institutional-promise__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) ya usado en
   institutional-hero.css; sin declarar ningún color independiente. */
.institutional-promise__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 institutional-hero.css.
   -------------------------------------------------------------------- */
.institutional-promise__container {
  position: relative;
}

/* --------------------------------------------------------------------
   4. Elements — mensaje
   -------------------------------------------------------------------- */
.institutional-promise__message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.institutional-promise__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-promise__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-inverse);
}

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

.institutional-promise__actions {
  display: flex;
  align-items: center;
  margin-block-start: var(--space-2);
}

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

/* --------------------------------------------------------------------
   6. States
   Estado base (Default) representado por el resto de las reglas. Los
   estados de interacción (Hover, Focus, Active) del CTA los resuelve el
   Componente oficial Button v1.0 (button.css), ya integrado en este
   Pattern.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   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. institutional-promise.js sigue
   emitiendo "calltoaction:ready" al inicializar (contrato ya certificado
   con footer.js, sin cambios en ese archivo).
   -------------------------------------------------------------------- */

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