/* ==========================================================================
   SPECIALTIES INTRODUCTION — Especialidades v2 — DIGART Studio
   Pattern: Specialties Introduction

   Referencia documental:
     project/01-CONSTITUTION/C-01-IDENTITY.md (§12 Arquitectura de marca)
     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). No declara
   valores independientes de color, tipografía, espaciado, tiempo, easing,
   z-index, sombra ni punto de quiebre. Banda horizontal sobria de cinco
   capacidades, sin cards ni fondo individual.
   ========================================================================== */

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

/* --------------------------------------------------------------------
   2. Elements — encabezado
   -------------------------------------------------------------------- */
.specialties-introduction__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 46rem;
  margin-inline: auto;
  margin-block-end: var(--space-8);
  text-align: center;
}

.specialties-introduction__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);
}

/* Único énfasis cromático permitido (Blueprint del sprint, "Resalta
   visualmente, con rojo institucional, solo: Tres enfoques
   especializados"): mismo Token de acento ya usado en el resto del
   sitio (--color-error), sin introducir un color nuevo. */
.specialties-introduction__title-accent {
  color: var(--color-error);
}

.specialties-introduction__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-secondary);
}

/* --------------------------------------------------------------------
   3. Elements — banda de capacidades
   Cinco capacidades en una sola fila, separadas por líneas discretas
   (border-inline-start en todas salvo la primera), sin fondo ni sombra
   propia: nunca se convierten en tarjetas.
   -------------------------------------------------------------------- */
.specialties-introduction__capabilities {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.specialties-introduction__capability {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  text-align: center;
  border-inline-start: var(--border-width-default) var(--border-style-solid) var(--color-border-subtle);
}

.specialties-introduction__capability:first-child {
  border-inline-start: none;
  padding-inline-start: 0;
}

/* Tamaño fijo en píxel (Blueprint del sprint, "claramente visibles: 48px
   en escritorio y 40px en móvil, 4. Responsive"), mayor peso visual que
   la escala de espaciado habitual. */
.specialties-introduction__icon {
  width: 48px;
  height: 48px;
  color: var(--color-error);
}

.specialties-introduction__capability-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------
   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; el contenido se
   presenta directamente en su estado final.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   7. Responsive
   Sistema Responsive (Cap. 11), breakpoint oficial de tokens.css
   reproducido en valor literal, mismo criterio que layout.css. La banda
   se apila en móvil (una columna) conservando el orden narrativo del
   marcado, sin desbordamiento horizontal; los separadores verticales
   pierden sentido en una sola columna y se retiran.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .specialties-introduction__capabilities {
    grid-template-columns: 1fr;
    row-gap: var(--space-5);
  }

  .specialties-introduction__capability {
    border-inline-start: none;
    padding-inline: 0;
  }

  .specialties-introduction__icon {
    width: 40px;
    height: 40px;
  }
}