/* ==========================================================================
   DESCUBRE TODO LO QUE PODEMOS HACER — DIGART Studio
   Pattern: Capabilities Overview

   Referencia documental:
     project/10-HOME-BLUEPRINT.md (5. Descubre todo lo que podemos hacer)
     project/12-HOME-MOCKUP.md (3.5 Descubre todo lo que podemos hacer)
     project/13-UI-DESIGN-SYSTEM.md (4. Layout, 5.4 Jerarquía,
     7. Iconografía, Cap. 9 Estados, Cap. 10 Motion, Cap. 11 Responsive)
     D-036 (evolución de la Dirección de Arte hacia un lenguaje editorial
     premium)

   Reconstrucción completa (Entregable B-010.1, Operación REPRODUCCIÓN
   FIEL DEL MOCKUP). La sección se compone como un único bloque
   editorial compacto: bloque narrativo introductorio (eyebrow, título,
   párrafo breve) junto a la fotografía editorial única de la sección,
   seguido de una cuadrícula compacta de tres capacidades (icono,
   nombre, descripción breve) que favorece la lectura de conjunto en
   lugar del recorrido secuencial de bloques independientes.

   Sección editorial: consume el Content Container (.l-container) y el
   Grid oficial de 12 columnas (.l-grid, .l-col-5, .l-col-7, .l-col-4)
   ya resueltos en layout.css. Este archivo no redefine su
   comportamiento. Todo valor (color, tipografía, espaciado, motion)
   proviene exclusivamente de tokens.css.

   Fondo editorial oscuro (--color-background-inverse): alternancia de
   fondos claros y oscuros entre secciones consecutivas como recurso de
   ritmo editorial (Mockup 4.6, Ritmo visual), en contraste con el fondo
   claro de Idea Origin.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   Espaciado vertical de sección mediante Tokens de la Space Scale y
   fondo editorial oscuro. El contenedor delega en .l-container.
   -------------------------------------------------------------------- */
.capabilities-overview {
  padding-block: var(--space-8);
  background-color: var(--color-background-inverse);
}

/* --------------------------------------------------------------------
   2. Container
   .capabilities-overview__container delega por completo su
   comportamiento en .l-container (layout.css); no se declara ninguna
   propiedad adicional para evitar duplicar lógica ya resuelta
   (13.3 Consumo del Sistema).
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   3. Elements
   -------------------------------------------------------------------- */

/* Fila introductoria: bloque narrativo (l-col-5) y fotografía editorial
   única (l-col-7) en una misma fila del Grid oficial, integrando la
   fotografía en la composición en lugar de asignar un recurso visual a
   cada capacidad (Mockup 3.5, Dirección de arte). */
.capabilities-overview__intro {
  align-items: center;
}

/* Bloque narrativo introductorio: eyebrow, título y párrafo breve
   (Blueprint 5, Composición visual). */
.capabilities-overview__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Eyebrow y divisor: dispositivo de jerarquía previo al título, mismo
   lenguaje editorial ya establecido por la nueva Dirección de Arte
   (D-036). */
.capabilities-overview__eyebrow-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.capabilities-overview__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);
}

.capabilities-overview__divider {
  display: block;
  width: var(--space-6);
  height: var(--border-width-thick);
  border-radius: var(--border-radius-full);
  background-color: var(--color-error);
}

.capabilities-overview__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-inverse);
}

/* Énfasis cromático sobre "todo": Token de rojo institucional ya
   existente (--color-error), mismo criterio ya aplicado en el resto de
   Patterns de la nueva Dirección de Arte. */
.capabilities-overview__title-accent {
  color: var(--color-error);
}

.capabilities-overview__intro-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-inverse);
}

/* Área de montaje de la fotografía editorial única: proporción nativa
   del recurso (3:2) resuelta mediante object-fit: cover y fondo neutro
   de Superficie mientras carga (mismo criterio ya aplicado en Idea
   Origin). */
.capabilities-overview__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  background-color: var(--color-surface-subtle);
  border-radius: var(--border-radius-md);
}

.capabilities-overview__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-md);
}

/* Cuadrícula compacta de capacidades: tres columnas iguales (l-col-4)
   dentro del Grid oficial, para una lectura de conjunto (Blueprint 5,
   Composición visual; Mockup 3.5, Dirección de arte). El espacio
   respecto a la fila introductoria mantiene ambos bloques como una
   sola composición editorial. */
.capabilities-overview__grid {
  margin-block-start: var(--space-7);
}

/* Capacidad individual: icono, nombre y descripción breve. */
.capabilities-overview__capability {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Icono del Sistema de Iconografía oficial: monocromático, color
   resuelto mediante Token del Sistema Cromático (acento estratégico de
   la Dirección de Arte). Tamaño resuelto mediante Token de la Space
   Scale, en tanto los Tokens numéricos de la escala de iconografía
   permanecen reservados (13-UI-DESIGN-SYSTEM.md, 7.2). */
.capabilities-overview__icon {
  display: inline-flex;
  color: var(--color-error);
}

.capabilities-overview__icon svg {
  width: var(--space-6);
  height: var(--space-6);
}

.capabilities-overview__capability-name {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-text-inverse);
}

.capabilities-overview__capability-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-inverse);
}

/* --------------------------------------------------------------------
   4. Variants
   El Pattern no define variantes en el Mockup oficial de la Home;
   sección reservada sin reglas.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   5. States
   Sección editorial sin elementos interactivos propios; estado base
   (Default) representado por las reglas de Root, Container y Elements.
   Sección reservada sin reglas adicionales.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. Motion Hooks
   Activa la aparición progresiva de la sección mediante su disparador
   funcional real ya existente: capabilities-overview.js aplica la
   clase .capabilities-overview--ready sobre .capabilities-overview tan
   pronto el IntersectionObserver detecta la sección en el viewport,
   después de recibir ideaorigin:ready. El estado Default permanece
   invisible (opacity: 0) y solo se revela mediante el selector
   descendiente .capabilities-overview--ready, sin introducir ningún
   valor ajeno a los Motion Tokens ya definidos: la fila introductoria
   y la cuadrícula aparecen simultáneamente, como una sola composición.
   -------------------------------------------------------------------- */
.capabilities-overview__intro,
.capabilities-overview__grid {
  opacity: 0;
  transition: opacity var(--motion-duration-slow) var(--motion-easing-standard);
}

.capabilities-overview--ready .capabilities-overview__intro,
.capabilities-overview--ready .capabilities-overview__grid {
  opacity: 1;
}

/* --------------------------------------------------------------------
   7. Responsive
   Sección reservada del Sistema Responsive (Cap. 11); sin reglas
   específicas todavía.
   -------------------------------------------------------------------- */