/* ==========================================================================
   SERVICES HERO — Servicios v2 — DIGART Studio
   Pattern: Services Hero

   Referencia documental:
     incoming/services/services-v2-mockup-reference.png (guía de
     composición; no fuente de contenido ni de assets)
     docs/002-information-architecture.md (D-042, entrada "Servicios")
     project/03-PRODUCT/P-02-FRONTEND.md (4.2 Contenedores, 6 Dirección de
     Arte, 10 Tipografía, 12 Iconografía, 17 Sistema de Accesibilidad)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-full-width). No declara
   valores independientes de color, tipografía, espaciado, tiempo, easing,
   z-index, sombra ni punto de quiebre. Reconstrucción del sprint
   "Servicios v2": adopta la misma técnica de capas superpuestas ya
   certificada en hero.css (fondo absoluto + overlay absoluto + contenedor
   relativo, sin z-index) y el mismo cálculo de margen izquierdo
   (--breakpoint-desktop, --space-6), sustituyendo el fondo plano y el
   texto centrado de la implementación anterior.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   Igual que .hero (hero.css): posición relativa, altura de viewport
   completa, capas superpuestas y bloque editorial centrado
   verticalmente, alineado al primer tercio horizontal.
   -------------------------------------------------------------------- */
.services-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--color-background-inverse);
}

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

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

/* Overlay direccional: mismo Token Overlay ya oficial
   (--color-overlay-emphasis, tokens.css 3.1) aplicado como gradiente en
   lugar de tono plano, concentrando el oscurecimiento en el tercio
   izquierdo (donde vive el bloque editorial, 3. Container) y dejando
   visible la fotografía hacia la derecha (Blueprint del sprint,
   "respetando el área oscura izquierda para legibilidad"). No declara
   ningún color independiente: los dos extremos del gradiente son el
   mismo Token (opaco) y "transparent" (sin color propio). */
.services-hero__overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    var(--color-overlay-emphasis) 0%,
    var(--color-overlay-emphasis) 42%,
    transparent 78%
  );
}

/* --------------------------------------------------------------------
   3. Container
   Mismo cálculo de margen izquierdo ya certificado en hero.css
   (H-003/H-004): coincide con el mismo eje horizontal que el logotipo
   del Header (.l-container) en cualquier ancho de viewport, sin usar
   .l-container (que centraría el bloque en vez de alinearlo al margen y
   dejar la fotografía libre hacia el borde derecho). position: relative
   (sin z-index) sitúa el bloque editorial por encima de fondo/overlay,
   mismo criterio que hero.css.
   -------------------------------------------------------------------- */
.services-hero__container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-inline-end: var(--space-6);
  margin-inline-start: max(
    var(--space-6),
    calc((100vw - var(--breakpoint-desktop)) / 2 + var(--space-6))
  );
  margin-block-start: calc(var(--space-7) + var(--space-5));
  max-width: clamp(40rem, 52vw, var(--breakpoint-desktop));
}

/* --------------------------------------------------------------------
   4. Elements — bloque editorial
   -------------------------------------------------------------------- */
.services-hero__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.08;
  color: var(--color-text-inverse);
}

.services-hero__support-text {
  font-family: var(--font-family-primary);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.65;
  color: var(--color-text-inverse);
  max-width: 42rem;
}

/* --------------------------------------------------------------------
   5. Elements — "¿Qué necesitas hoy?"
   -------------------------------------------------------------------- */
.services-hero__needs {
  margin-block-start: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.services-hero__needs-label {
  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-text-inverse);
}

.services-hero__needs-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
}

.services-hero__needs-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--space-3);
  padding-inline: var(--space-2);
  border: var(--border-width-default) var(--border-style-solid) var(--color-overlay-inverse);
  border-radius: var(--border-radius-md);
  color: var(--color-text-inverse);
  text-align: center;
  transition: var(--motion-transition-default);
}

.services-hero__needs-link:hover,
.services-hero__needs-link:focus-visible {
  background-color: var(--color-overlay-soft);
  border-color: var(--color-error);
}

.services-hero__needs-link:focus-visible {
  outline: var(--border-width-thick) var(--border-style-solid) var(--color-error);
  outline-offset: var(--space-1);
}

.services-hero__needs-icon {
  width: var(--space-6);
  height: var(--space-6);
}

.services-hero__needs-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

/* --------------------------------------------------------------------
   6. Variants
   El Pattern no define variantes; sección reservada sin reglas.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   7. States
   Estado base (Default) representado por Root, Elements y Container. Los
   estados de interacción de "¿Qué necesitas hoy?" se resuelven en el
   propio elemento (5, Elements): Hover/Focus comparten tratamiento
   (fondo Overlay suave + borde --color-error), Focus añade el anillo
   oficial ya usado en el resto del sitio.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   8. 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, mismo criterio ya aplicado en el
   resto de páginas institucionales.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   9. Responsive
   Sistema Responsive (Cap. 11), breakpoint oficial de tokens.css
   reproducido en valor literal, mismo criterio que layout.css y hero.css.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px
   El bloque editorial pierde el margen calculado con --breakpoint-desktop
   (ya sin sentido en una sola columna) y adopta el mismo margen fijo que
   .l-container resuelve en este punto de quiebre (--space-4, layout.css).
   La fila de seis accesos se reorganiza en dos filas de tres, misma
   lógica de reflujo ya usada en el resto del sitio (RWD-08), sin producir
   desbordamiento horizontal ni recortar ningún acceso. */
@media (max-width: 768px) {
  .services-hero__container {
    margin-inline-start: var(--space-4);
    padding-inline-end: var(--space-4);
    max-width: none;
  }

  .services-hero__needs-list {
    grid-template-columns: repeat(3, 1fr);
  }
}