/* Layout propio de /services (Intelligence Program). Los componentes viven en css/v2/components. */

/* Hero */
.xg-services-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--xg-space-4);
  overflow: hidden;
}

/*
 * El bloque de texto ocupa toda la primera pantalla (menos el navbar) y el carrusel de
 * fotos empieza justo debajo del borde, invitando a hacer scroll.
 * svh y no vh: en móvil vh incluye la barra del navegador y el texto quedaría cortado.
 */
.xg-services-hero > .xg-services-hero__content {
  min-height: calc(100svh - var(--xg-nav-height));
  justify-content: center;
}

/* 40px bajo las fotos + 40px de padding de Beneficios = 80px entre carrusel y sección */
.xg-services-hero .xg-hero-banner {
  height: auto;
  padding-bottom: var(--xg-space-6);
}

/* Aurora detrás del título: dos halos que respiran lentamente */
.xg-services-hero__glow {
  position: absolute;
  inset: -20% 0 auto;
  height: 620px;
  pointer-events: none;
  z-index: 0;
}

.xg-services-hero__glow::before,
.xg-services-hero__glow::after {
  content: "";
  position: absolute;
  top: 0;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
  animation: xg-aurora 14s var(--xg-ease-in-out) infinite alternate;
}

.xg-services-hero__glow::before {
  left: calc(50% - 520px);
  background: var(--xg-primary-container);
}

.xg-services-hero__glow::after {
  left: calc(50% - 40px);
  background: #5a2a33;
  animation-delay: -7s;
}

@keyframes xg-aurora {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(60px, 40px, 0) scale(1.15); }
}

.xg-services-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--xg-space-6);
  max-width: var(--xg-page-max);
  margin-inline: auto;
  padding: var(--xg-space-4) clamp(16px, 16.6vw, 240px);
  text-align: center;
}

.xg-services-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--xg-space-6);
  padding-inline: clamp(0px, 5.5vw, 80px);
}

.xg-services-hero__header {
  display: flex;
  flex-direction: column;
  gap: var(--xg-space-4);
}

/* Título: cada línea entra con un leve desenfoque */
.xg-services-hero__title .xg-line {
  display: block;
}

.xg-js .xg-services-hero__title .xg-line {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(24px);
  transition:
    opacity 900ms var(--xg-ease-out),
    filter 900ms var(--xg-ease-out),
    transform 900ms var(--xg-ease-out);
}

.xg-js .xg-services-hero__title .xg-line:nth-child(2) {
  transition-delay: 140ms;
}

.xg-js .xg-services-hero__title.is-visible .xg-line {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.xg-services-hero__lead {
  color: var(--xg-on-surface);
  padding-inline: 4px;
}

.xg-services-hero__lead a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--xg-dur) var(--xg-ease-out), text-decoration-color var(--xg-dur) var(--xg-ease-out);
}

.xg-services-hero__lead a:hover {
  color: var(--xg-primary);
  text-decoration-color: var(--xg-primary);
}

.xg-services-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--xg-space-4);
}

/* Secciones con encabezado + contenido */
.xg-services-block {
  display: flex;
  flex-direction: column;
  gap: var(--xg-space-6);
  max-width: var(--xg-page-max);
  margin-inline: auto;
  padding: var(--xg-space-6) var(--xg-gutter);
}

.xg-services-block--divisions {
  gap: var(--xg-space-7);
}

/* Proceso: columna izquierda sticky + timeline */
.xg-process {
  display: flex;
  gap: var(--xg-space-8);
  max-width: var(--xg-page-max);
  margin-inline: auto;
  padding: var(--xg-space-6) var(--xg-gutter);
}

.xg-process__aside {
  flex: 1 1 0;
  max-width: 400px;
  padding-inline: var(--xg-inner-pad);
}

.xg-process__aside-inner {
  position: sticky;
  top: calc(var(--xg-nav-height) + 40px);
}

.xg-process__steps {
  --xg-progress: 0;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: var(--xg-space-4) var(--xg-inner-pad);
}

.xg-process__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Riel vertical que une los iconos; se llena conforme avanza el scroll */
.xg-process__rail {
  position: absolute;
  /* JS calcula top/height para unir exactamente el centro del primer y último icono */
  top: var(--xg-rail-top, 64px);
  height: var(--xg-rail-height, calc(100% - 128px));
  left: calc(var(--xg-inner-pad) + 33.5px);
  width: 1px;
  background: var(--xg-outline-variant);
  pointer-events: none;
}

.xg-process__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--xg-primary), var(--xg-secondary));
  transform: scaleY(var(--xg-progress));
  transform-origin: top center;
  box-shadow: 0 0 8px rgba(102, 235, 231, 0.6);
}

.xg-process__steps .xg-feature {
  position: relative;
  z-index: 1;
}

.xg-process__steps .xg-feature__title {
  transition: color var(--xg-dur) var(--xg-ease-out);
}

.xg-process__steps .xg-feature.is-active .xg-feature__title {
  color: var(--xg-on-surface);
}

/* Las fases todavía no alcanzadas se ven atenuadas */
.xg-js .xg-process__steps .xg-feature:not(.is-active) .xg-feature__text {
  opacity: 0.55;
}

.xg-process__steps .xg-feature__text {
  transition: opacity 500ms var(--xg-ease-out);
}

/* Clientes */
.xg-services-clients {
  display: flex;
  flex-direction: column;
  gap: var(--xg-space-6);
  max-width: var(--xg-page-max);
  margin-inline: auto;
  padding: var(--xg-space-6) var(--xg-gutter);
}

.xg-services-clients__actions {
  display: flex;
  justify-content: center;
}

@media (max-width: 991px) {
  .xg-services-hero__content {
    padding-inline: var(--xg-gutter);
  }

  .xg-process {
    flex-direction: column;
    gap: var(--xg-space-6);
  }

  .xg-process__aside {
    max-width: none;
  }

  .xg-process__aside-inner {
    position: static;
  }
}

@media (max-width: 599px) {
  /* Evita que "IA" quede huérfana en su propio renglón */
  .xg-services-hero__text {
    padding-inline: 0;
  }

  .xg-services-hero__title {
    font-size: 2.125rem;
  }

  .xg-services-hero__glow::before,
  .xg-services-hero__glow::after {
    width: 320px;
    height: 320px;
  }

  .xg-services-hero__glow::before {
    left: -80px;
  }

  .xg-services-hero__glow::after {
    left: auto;
    right: -80px;
  }

  .xg-process__rail {
    left: calc(var(--xg-inner-pad) + 27.5px);
  }
}