/* ==========================================================================
   CASOS DE ÉXITO — DIGART Studio
   Pattern: Success Stories

   Referencia documental:
     project/10-HOME-BLUEPRINT.md (7. Casos de éxito)
     project/12-HOME-MOCKUP.md (3.7 Casos de éxito)
     project/13-UI-DESIGN-SYSTEM.md (4. Layout, 5.4 Jerarquí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.3, Operación REPRODUCCIÓN
   FIEL DEL MOCKUP). La sección se compone como una vitrina editorial
   compacta: bloque narrativo introductorio (eyebrow, divisor, título,
   párrafo breve) seguido de una fila de tres tarjetas exactamente del
   mismo tamaño (l-col-4), cada una con fotografía principal, indicador
   breve del sector, nombre del proyecto, descripción breve y enlace
   discreto. Las tres tarjetas se estiran a la misma altura mediante el
   Grid oficial y el enlace se ancla a la base de cada tarjeta,
   manteniendo un único ritmo visual de galería editorial.

   Sección editorial: consume el Content Container (.l-container) y el
   Grid oficial de 12 columnas (.l-grid, .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), en contraste con el fondo claro de
   Specialized Solutions.
   ========================================================================== */

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

/* --------------------------------------------------------------------
   2. Container
   .success-stories__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
   -------------------------------------------------------------------- */

/* Bloque narrativo introductorio: eyebrow, divisor, título y párrafo
   breve (Mockup 3.7, Dirección de arte), con el mismo lenguaje
   editorial ya establecido por Hero, Idea Origin, Capabilities
   Overview y Specialized Solutions (D-036). */
.success-stories__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 60ch;
}

.success-stories__eyebrow-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.success-stories__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);
}

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

.success-stories__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);
  /* Refinamiento B-010.3A: reparto equilibrado de líneas del titular,
     evitando la palabra huérfana que debilitaba el peso editorial del
     encabezado frente a Capabilities Overview y Specialized Solutions. */
  text-wrap: balance;
}

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

.success-stories__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);
}

/* Vitrina editorial: fila de tres tarjetas del mismo tamaño (l-col-4)
   con separación uniforme (gap del Grid oficial) y alturas iguales
   (align stretch, valor por defecto de Grid). Refinamiento B-010.3A:
   la vitrina comienza inmediatamente después del bloque introductorio,
   con el mismo paso de la Space Scale que el gutter del Grid
   (--space-6), eliminando la separación excesiva anterior (--space-7). */
.success-stories__grid {
  margin-block-start: var(--space-6);
}

/* Tarjeta de proyecto: superficie inversa elevada sobre el fondo de la
   sección, fotografía a sangre en la parte superior y bloque de texto
   inferior. El enlace se ancla a la base (margin-block-start: auto en
   __actions), garantizando el mismo ritmo visual en las tres tarjetas. */
.success-stories__card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface-inverse);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  /* Refinamiento B-010.4: presencia de tarjeta premium sobre el fondo
     inverso — filete extremadamente sutil y sombra discreta mediante
     Tokens existentes. La categoría Border no define todavía un neutro
     para superficies inversas; se consume el neutro intermedio de la
     Escala de Neutros ya expuesto como Token (--color-text-secondary,
     #4B4F58), sin introducir ningún valor independiente. */
  border: var(--border-width-default) var(--border-style-solid) var(--color-text-secondary);
  box-shadow: var(--elevation-4);
}

/* Área de montaje de la fotografía principal de cada proyecto: ancho
   completo de la tarjeta y proporción idéntica en las tres (misma
   altura garantizada), con fondo neutro de Superficie mientras no
   existe el recurso definitivo, lista para el Asset Intake Pipeline
   (D-034). La regla img queda preparada para el montaje posterior
   (object-fit: cover), mismo criterio ya aplicado en el resto de
   Patterns. */
.success-stories__image {
  display: block;
  width: 100%;
  /* Refinamiento B-010.3A: proporción 3:2, coincidente con el formato
     nativo (1536×1024) de la fotografía oficial del proyecto que
     llegará mediante el Asset Intake Pipeline (D-034); compacta el
     ritmo vertical de la vitrina sin alterar la igualdad de alturas. */
  aspect-ratio: 3 / 2;
  background-color: var(--color-surface-subtle);
}

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

/* Bloque de texto de la tarjeta: indicador de sector, nombre del
   proyecto, descripción breve y enlace. Crece para ocupar el espacio
   restante de la tarjeta, manteniendo las tres tarjetas exactamente
   iguales. */
.success-stories__body {
  display: flex;
  flex-direction: column;
  /* Refinamiento B-010.4: ritmo interno más pausado — un paso más de la
     Space Scale entre fotografía, categoría y contenido. */
  gap: var(--space-4);
  padding: var(--space-6);
  flex-grow: 1;
}

/* Indicador breve del sector (Mockup 3.7, Dirección de arte): eyebrow
   pequeño con el acento cromático institucional. */
.success-stories__category {
  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);
}

.success-stories__project-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);
}

.success-stories__description {
  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);
}

/* Enlace discreto hacia el estudio de caso completo (Blueprint 7,
   "Interacción"), anclado a la base de la tarjeta; mismo dispositivo
   editorial ya establecido por Idea Origin. */
.success-stories__actions {
  margin-block-start: auto;
  padding-block-start: var(--space-2);
}

.success-stories__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-error);
  text-decoration: none;
}

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

/* --------------------------------------------------------------------
   5. States
   El único elemento interactivo propio del Pattern es
   .success-stories__link (enlace discreto de cada tarjeta): sus estados
   Hover y Focus se definen aquí, junto al resto de sus reglas
   (3. Elements), con la misma respuesta ya establecida por el enlace
   discreto de Idea Origin. El resto del Pattern no posee elementos
   interactivos.
   -------------------------------------------------------------------- */
.success-stories__link:hover,
.success-stories__link:focus-visible {
  text-decoration: underline;
}

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

.success-stories--ready .success-stories__header,
.success-stories--ready .success-stories__grid {
  opacity: 1;
}

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