/* ==========================================================================
   SOLUCIONES ESPECIALIZADAS — DIGART Studio
   Pattern: Specialized Solutions

   Referencia documental:
     project/10-HOME-BLUEPRINT.md (6. Soluciones especializadas)
     project/12-HOME-MOCKUP.md (3.6 Soluciones especializadas)
     project/13-UI-DESIGN-SYSTEM.md (4. Layout, 5.4 Jerarquía,
     7. Iconografía, 8.1 Botones, Cap. 9 Estados, Cap. 10 Motion,
     Cap. 11 Responsive)
     D-006, D-010 (tres unidades especializadas exclusivas)
     D-036 (evolución de la Dirección de Arte hacia un lenguaje editorial
     premium)

   Reconstrucción completa (Entregable B-010.2, Operación REPRODUCCIÓN
   FIEL DEL MOCKUP). La sección se compone como un único bloque
   editorial horizontal: bloque narrativo introductorio (eyebrow,
   título, párrafo breve) seguido de una banda de tres columnas
   exactamente del mismo ancho (l-col-4), cada una con icono en
   insignia circular, nombre, descripción, enlace y área fotográfica
   propia a ancho completo de tarjeta. Las tres áreas fotográficas
   comparten proporción idéntica (misma altura) y las tres tarjetas se
   estiran a la misma altura mediante el Grid oficial; la fotografía se
   ancla a la base de cada tarjeta para que las tres queden alineadas.

   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 claro (--color-background-default): alternancia de
   fondos claros y oscuros entre secciones consecutivas como recurso de
   ritmo editorial (Mockup 4.6), en contraste con el fondo oscuro de
   Capabilities Overview.
   ========================================================================== */

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

/* --------------------------------------------------------------------
   2. Container
   .specialized-solutions__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, título y párrafo breve
   (Mockup 3.6, Dirección de arte), con el mismo lenguaje editorial ya
   establecido por Hero, Idea Origin y Capabilities Overview (D-036). */
.specialized-solutions__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 60ch;
}

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

.specialized-solutions__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);
}

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

.specialized-solutions__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);
}

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

.specialized-solutions__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-secondary);
}

/* Banda editorial de tres columnas: superficie sutil con borde y
   esquinas redondeadas que agrupa las tres tarjetas como un único
   bloque editorial (Mockup 3.6: "agrupadas en una misma fila...
   facilitando la comparación entre segmentos sin fragmentar la
   experiencia narrativa"). El Grid oficial (.l-grid) resuelve las tres
   columnas del mismo ancho (l-col-4) con separación uniforme (gap de
   layout.css) y tarjetas de la misma altura (align stretch, valor por
   defecto de Grid). */
.specialized-solutions__grid {
  margin-block-start: var(--space-7);
  padding: var(--space-6);
  background-color: var(--color-surface-default);
  border: var(--border-width-default) var(--border-style-solid) var(--color-border-subtle);
  border-radius: var(--border-radius-lg);
}

/* Tarjeta de unidad especializada: columna flexible cuya área
   fotográfica se ancla a la base (margin-block-start: auto en
   3. Elements, __visual), garantizando que las tres fotografías queden
   alineadas y las tres tarjetas midan exactamente lo mismo. */
.specialized-solutions__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Cabecera de tarjeta: insignia circular con icono a la izquierda y
   bloque de texto (nombre, descripción, enlace) a la derecha. Crece
   para ocupar el espacio disponible sobre la fotografía, manteniendo
   las tres áreas fotográficas alineadas a la base. align-items: stretch
   (en vez de flex-start) permite que __card-body ocupe toda la altura
   disponible de __card-header: sin esto, el espacio ganado por
   flex-grow quedaba como hueco invisible debajo de __card-body, sin
   afectar la posición real del botón, y los tres enlaces desalineaban
   su altura según la longitud de cada descripción. El icono conserva su
   tamaño fijo (width/height explícitos) y no se ve afectado por stretch. */
.specialized-solutions__card-header {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  flex-grow: 1;
}

/* Insignia circular del icono de unidad: icono del Sistema de
   Iconografía oficial, monocromático, acento estratégico de la
   Dirección de Arte sobre Superficie sutil. Tamaños resueltos mediante
   Tokens 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). */
.specialized-solutions__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--border-radius-full);
  background-color: var(--color-surface-subtle);
  color: var(--color-error);
}

.specialized-solutions__icon svg {
  width: var(--space-6);
  height: var(--space-6);
}

/* Bloque de texto de la tarjeta: nombre, descripción y enlace. */
.specialized-solutions__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.specialized-solutions__name {
  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);
}

.specialized-solutions__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-secondary);
}

/* .specialized-solutions__actions agrupa el enlace de cada unidad
   (Blueprint 6, "Interacción"), resuelto mediante el Componente oficial
   Button v1.0 en su variante Outline (13-UI-DESIGN-SYSTEM.md 8.1,
   D-026). margin-block-start: auto empuja el botón al límite inferior
   de __card-body (ahora estirado a toda la altura de __card-header):
   con esto, los tres botones alinean su altura sin importar cuántas
   líneas ocupe cada descripción, sin alturas fijas ni saltos de línea
   manuales. Tipografía, radio, padding y estados base del botón viven
   en button.css (el Pattern no implementa responsabilidades del
   Componente); el acento rojo institucional se aplica aquí mismo,
   scoped a este Pattern, sin modificar la variante Outline global. */
.specialized-solutions__actions {
  margin-block-start: auto;
}

/* Acento rojo institucional scoped a este Pattern: la variante Outline
   global (button.css) usa un borde y texto neutros para mantenerse
   genérica en cualquier contexto; aquí se sobreescribe únicamente
   border-color y color (Hover/Active/Focus-visible se heredan sin
   cambios de button.css, ya accesibles y consistentes). */
.specialized-solutions__actions .button--outline {
  border-color: var(--color-error);
  color: var(--color-error);
}

/* Área fotográfica de la unidad: anclada a la base de la tarjeta para
   que las tres fotografías queden alineadas entre sí. */
.specialized-solutions__visual {
  margin-block-start: auto;
}

/* Área de montaje del recurso fotográfico de cada unidad: ancho
   completo de la tarjeta y proporción idéntica en las tres columnas
   (misma altura garantizada), con fondo neutro de Superficie mientras
   no existe el recurso definitivo (mismo criterio ya aplicado en el
   resto de Patterns). */
.specialized-solutions__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface-subtle);
  border-radius: var(--border-radius-md);
}

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

/* --------------------------------------------------------------------
   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 del Pattern es el enlace discreto de
   cada unidad, resuelto por el Componente oficial Button v1.0 (Cap.
   8.1, D-026): sus estados (Default, Hover, Focus, Active) viven en
   button.css y este Pattern no declara estados propios para dicho
   elemento. El resto del Pattern no posee elementos interactivos;
   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: specialized-solutions.js aplica la
   clase .specialized-solutions--ready sobre .specialized-solutions tan
   pronto el IntersectionObserver detecta la sección en el viewport,
   después de recibir capabilitiesoverview:ready. El estado Default
   permanece invisible (opacity: 0) y solo se revela mediante el
   selector descendiente .specialized-solutions--ready, sin introducir
   ningún valor ajeno a los Motion Tokens ya definidos: el bloque
   narrativo y la banda de tres columnas aparecen simultáneamente, como
   una sola composición. Las microinteracciones del CTA se reservan al
   Componente oficial Button v1.0 (button.css, 8.1).
   -------------------------------------------------------------------- */
.specialized-solutions__header,
.specialized-solutions__grid {
  opacity: 0;
  transition: opacity var(--motion-duration-slow) var(--motion-easing-standard);
}

.specialized-solutions--ready .specialized-solutions__header,
.specialized-solutions--ready .specialized-solutions__grid {
  opacity: 1;
}

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