/* =========================================================
   SERVICIOS
   LedLab — landing. Editar SOLO lo de esta sección acá.
   ---------------------------------------------------------
   Fondo oscuro (--color-panel), astronauta arriba a la derecha y una
   grilla de 10 servicios en dos columnas separadas por líneas.
   El primero, "Mapeo de Personas y Equipos", es el único navegable: va a
   tener página propia, así que se marca con flecha y con el logo de
   Talentum.
   ========================================================= */
.servicios {
  background: var(--color-panel);
  --color-text: var(--color-text-light);
}

/* Sobre este fondo el rosa de la etiqueta pierde legibilidad. */
.servicios .section-label {
  color: var(--color-text-light);
}

.servicios__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* ---------------------------------------------------------
   CABECERA (título + astronauta)
   El aire que separa la cabecera de la tabla es el padding-bottom de
   este bloque y NO un margin del título: así el borde inferior de la
   cabecera cae exactamente sobre la primera línea de la tabla, y el
   astronauta, anclado con bottom: 0, queda alineado a esa línea.
   Con un margin el borde quedaría antes y la alineación sería a ojo.
   --------------------------------------------------------- */
.servicios__head {
  position: relative;
  padding-bottom: var(--space-5);
}

/* Va en absoluto para no empujar nada del layout: en el flujo esta
   imagen se comería el alto que necesita la tabla y la sección no
   entraría en una pantalla. Sangra hacia arriba y la recorta el
   overflow de .section-full, igual que en el Figma. */
.servicios__astronauta {
  position: absolute;
  right: 0;
  bottom: 0; /* apoyada en la línea donde arranca la tabla */
  /* Detras del titulo y al 50%: en mobile la imagen y el texto se
     superponen, y asi el titulo se lee sin competencia. */
  z-index: 0;
  opacity: 0.5;
  height: clamp(180px, 40vh, 380px);
  width: auto;
  pointer-events: none;
}

/* ---------------------------------------------------------
   TÍTULO
   Dos líneas: "Partner estratégico" / "en Performance Humana."
   --------------------------------------------------------- */
.servicios__title {
  font-size: clamp(1.8rem, 2.9vw, 3.3rem);
  line-height: 1.12;
  /* Ancho tope generoso: el corte lo dan las líneas, no el ancho. */
  position: relative;
  z-index: 2;
  max-width: 22ch;
  margin-bottom: 0;
}
.servicios__title .is-lavender { color: var(--color-6); }
.servicios__title .is-light { color: var(--color-text-light); }

/* En desktop cada línea es un bloque (cortes exactos); en mobile vuelven
   a inline y el texto se acomoda solo. */
.servicios__title-line { display: inline; }
@media (min-width: 1025px) {
  .servicios__title-line { display: block; }
}

/* ---------------------------------------------------------
   GRILLA DE SERVICIOS
   grid-auto-flow: column con 5 filas: los items 1-5 bajan por la columna
   izquierda y los 6-10 por la derecha, igual que en el Figma. Si se usara
   el flujo por filas (el default), el orden del HTML se leería cruzado.
   --------------------------------------------------------- */
.servicios__list {
  position: relative;
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

/* Divisoria vertical del medio. Va como pseudo-elemento de la lista (y no
   como border-left de cada item de la derecha) para poder dibujarla de
   arriba hacia abajo de una sola pasada al entrar en pantalla. */
.servicios__list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--border-width);
  background: var(--color-border-light);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
}
.servicios__list.is-in-view::before {
  transform: scaleY(1);
}

.servicios__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 0;
  padding: clamp(0.9rem, 2.1vh, 1.55rem) 0;
  font-size: clamp(0.95rem, 1.15vw, 1.25rem);
  line-height: 1.3;
  color: var(--color-text-light);
}
/* La columna derecha (items 6 a 10) se corre para despegarse de la
   divisoria del medio. */
.servicios__item:nth-child(n + 6) {
  padding-left: var(--space-4);
}

/* ---------------------------------------------------------
   ANIMACIÓN DE ENTRADA DE LA TABLA
   Las líneas se dibujan de izquierda a derecha, fila por fila, y el texto
   de cada fila entra detrás. Es el mismo gesto que las líneas de
   "Propósito", para que las dos tablas del sitio se lean igual.
   Las líneas son pseudo-elementos y no borders porque un border no se
   puede dibujar progresivamente.
   El item en sí NO usa el fade de .reveal (lo anulamos): si el item
   entero apareciera con opacidad, la línea aparecería en vez de trazarse.
   --------------------------------------------------------- */
.servicios__item.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.servicios__item::before,
.servicios__item:nth-child(5)::after,
.servicios__item:nth-child(10)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--border-width);
  background: var(--color-border-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1)
    var(--reveal-delay, 0s);
}
.servicios__item::before { top: 0; }
/* Cierre de la tabla: la última fila de cada columna lleva línea abajo,
   y entra al final de todas. */
.servicios__item:nth-child(5)::after,
.servicios__item:nth-child(10)::after {
  bottom: 0;
  transition-delay: calc(var(--reveal-delay, 0s) + 0.15s);
}
.servicios__item.is-in-view::before,
.servicios__item.is-in-view:nth-child(5)::after,
.servicios__item.is-in-view:nth-child(10)::after {
  transform: scaleX(1);
}

/* El contenido de la fila entra apenas después que su línea. */
.servicios__item-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity 0.6s ease calc(var(--reveal-delay, 0s) + 0.12s),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1)
      calc(var(--reveal-delay, 0s) + 0.12s);
}
.servicios__item.is-in-view .servicios__item-text {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .servicios__list::before,
  .servicios__item::before,
  .servicios__item::after,
  .servicios__item-text {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* ---------------------------------------------------------
   PRIMER SERVICIO (navegable)
   --------------------------------------------------------- */
.servicios__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: inherit;
  transition: color var(--transition-fast);
}
.servicios__link:hover,
.servicios__link:focus-visible {
  color: var(--color-6);
}

.servicios__arrow {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  stroke: var(--color-6);
  stroke-width: 2.2;
  fill: none;
  transition: transform var(--transition-base);
}
/* En hover la flecha sale hacia donde apunta. */
.servicios__link:hover .servicios__arrow,
.servicios__link:focus-visible .servicios__arrow {
  transform: translate(0.18em, -0.18em);
}

.servicios__brand {
  height: clamp(16px, 2.2vh, 26px);
  width: auto;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------
   RESPONSIVE
   Una sola columna: los 10 servicios en fila, sin divisoria vertical.
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .servicios__head {
    padding-bottom: var(--space-4);
  }
  .servicios__astronauta {
    height: clamp(140px, 24vh, 220px);
  }
  .servicios__title {
    max-width: none;
  }
  .servicios__list {
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
  .servicios__item {
    gap: var(--space-3);
  }
  /* Con una sola columna no hay divisoria vertical, y la única línea de
     cierre es la del último item. */
  .servicios__list::before { display: none; }
  .servicios__item:nth-child(5)::after { display: none; }
  .servicios__item:nth-child(n + 6) {
    padding-left: 0;
  }
}

/* El logo de Talentum es navegable (lleva a la página del servicio): se
   comporta como el resto de los enlaces del sitio, con el mismo shrink
   en hover que los botones. */
.servicios__talentum-link {
  display: inline-flex;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.servicios__talentum-link:hover,
.servicios__talentum-link:focus-visible {
  opacity: 0.75;
  transform: scale(0.96);
}