/* =========================================================
   MAPEO DE PERSONAS Y EQUIPOS — página propia del servicio
   LedLab — Editar SOLO lo de esta página acá.
   ---------------------------------------------------------
   Banner principal: mesh gradient en rosas y púrpuras
   (.mesh--purple) con el logo de Talentum arriba del título.
   ========================================================= */
.mapeo-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  /* Igual que el hero de la home: una pantalla completa, con el alto del
     header reservado arriba para que el contenido no quede tapado. */
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--header-h);
  color: var(--color-text-light);
}

/* Grilla del banner. En desktop: texto a la izquierda y el logo de
   Talentum en la columna derecha, centrado y mas grande. En mobile
   (mas abajo) pasa a una sola columna con el logo arriba. */
.mapeo-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--gap-columns);
}

.mapeo-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

/* Logo de Talentum: en desktop ocupa la columna derecha (por eso el
   grid-column: 2 y el grid-row: 1, que lo suben a la misma fila que el
   texto aunque en el HTML venga antes). */
.mapeo-hero__marca {
  display: block;
  grid-column: 2;
  grid-row: 1;
  width: clamp(280px, 30vw, 460px);
  height: auto;
  justify-self: center;
}

/* Mismo tamaño que el título del banner de la home ("NO HAY CULTURA
   SIN LIDERAZGO..."): los mismos tres valores en vw por breakpoint que
   .hero__title en css/sections/hero.css. Si alguna vez se cambia allá,
   cambiar acá también. */
.mapeo-hero__title {
  font-size: 8.38vw;
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  color: var(--color-text-light);
}
@media (min-width: 641px) {
  .mapeo-hero__title { font-size: 7vw; }
}
@media (min-width: 1025px) {
  .mapeo-hero__title { font-size: 4.1vw; }
}
/* Dos líneas fijas: "ENCENDÉ" / "TU POTENCIAL". */
.mapeo-hero__line {
  display: block;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   RESPONSIVE
   En pantallas chicas el astronauta pasa a ser fondo (más chico y
   detrás del texto) y el contenido usa todo el ancho.
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  /* En mobile el banner mide lo que mide su contenido: no tiene sentido
     estirarlo a una pantalla entera cuando son tres elementos. Arriba se
     reserva el alto del header (que es fixed) mas el aire de siempre, y
     abajo el mismo aire que separa secciones en el resto del sitio. */
  .mapeo-hero {
    min-height: 0;
    justify-content: flex-start;
    /* --label-block reserva lugar para la etiqueta de seccion, y este
       banner no tiene: alcanza con el aire, que es --label-offset (80px
       en mobile), igual arriba que abajo. */
    padding-top: calc(var(--header-h) + var(--label-offset));
    padding-bottom: var(--label-offset);
  }
  /* Una sola columna: el logo vuelve a su lugar en el flujo (arriba del
     titulo) y achica. */
  .mapeo-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .mapeo-hero__marca {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    width: clamp(180px, 45vw, 290px);
  }
  .mapeo-hero__content {
    gap: var(--space-3);
  }
}

/* =========================================================
   QUÉ ES TALENTUM  (izquierda: texto — derecha: gráfico)
   ---------------------------------------------------------
   El gráfico es un círculo partido en cuatro cuadrantes con dos ejes.
   Los colores son los del material de Talentum (azul, violeta, verde y
   rosa), así que van declarados acá como tokens propios de la sección y
   no salen de la paleta general del sitio.
   ========================================================= */
.sistema {
  overflow-x: clip; /* red de seguridad: los ejes nunca agrandan el documento */
  --quad-azul:    linear-gradient(200deg, #1EA7E3 0%, #4F8FD0 100%);
  --quad-violeta: linear-gradient(140deg, #A32F93 0%, #7C1B70 100%);
  --quad-verde:   linear-gradient(200deg, #6BA33F 0%, #2E7A31 100%);
  --quad-rosa:    linear-gradient(140deg, #EC4A91 0%, #E5326F 100%);

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--label-block);
  background: var(--color-bg);
  color: var(--color-text-dark);
}

.sistema__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--gap-columns);
}

.sistema__title {
  font-size: clamp(1.8rem, 2.9vw, 3.3rem);
  line-height: 1.12;
  margin-bottom: var(--space-4);
}
.sistema__title .is-dark { color: var(--color-text-dark); }
.sistema__title .is-purple { color: var(--color-7); }

.sistema__lead {
  font-size: 20px;
  line-height: 1.5;
  max-width: 46ch;
}

/* ---------------------------------------------------------
   EL GRÁFICO
   Cuadrado perfecto (aspect-ratio) para que el círculo no se deforme.
   --------------------------------------------------------- */
.sistema__chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.grafico {
  position: relative;
  /* Mas chico que el ancho de la columna: asi el circulo y las
     etiquetas de los ejes quedan con aire y no pegados al borde. */
  width: min(80%, 380px);
  aspect-ratio: 1;
}

.grafico__circle {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* Cada cuadrante es un cuarto de círculo: el redondeo va SOLO en su
   esquina exterior. El origen de la transformación es el centro del
   círculo, así crecen y se achican hacia afuera. */
.grafico__quad {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  color: var(--color-text-light);
  font-weight: var(--fw-bold);
  font-size: clamp(15px, 1.25vw, 20px);
  /* Entrada: crecen desde el centro, escalonados (--d). Se hace con
     transition y no con animation a propósito: una animación con
     fill-mode forwards deja pegado su último transform y le gana al
     :hover en la cascada. */
  opacity: 0;
  transform: scale(0.2);
  transition:
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s);
}
.grafico__quad span { pointer-events: none; }

.grafico__quad--analitico  { border-radius: 100% 0 0 0; background: var(--quad-azul);    transform-origin: bottom right; --d: 0.05s; }
.grafico__quad--innovador  { border-radius: 0 100% 0 0; background: var(--quad-violeta); transform-origin: bottom left;  --d: 0.17s; }
.grafico__quad--organizado { border-radius: 0 0 0 100%; background: var(--quad-verde);   transform-origin: top right;    --d: 0.29s; }
.grafico__quad--empatico   { border-radius: 0 0 100% 0; background: var(--quad-rosa);    transform-origin: top left;     --d: 0.41s; }

.grafico.is-in-view .grafico__quad {
  opacity: 1;
  transform: scale(1);
}

/* Interaccion: el cuadrante crece. Nada mas: sin texto y sin apagar a
   los otros. Es CSS puro (hover para mouse, focus para teclado y para el
   tap en celular), no hace falta JavaScript. */
.grafico.is-in-view .grafico__quad:hover,
.grafico.is-in-view .grafico__quad:focus,
.grafico.is-in-view .grafico__quad:focus-visible {
  transform: scale(1.07);
  transition-delay: 0s;
  z-index: 2;
  outline: none;
}

/* ---------------------------------------------------------
   EJES
   Dos líneas finas que cruzan el círculo y sobresalen, con su etiqueta
   en cada punta. Se dibujan al entrar en pantalla.
   --------------------------------------------------------- */
.grafico__axis {
  position: absolute;
  z-index: 3;
  background: var(--color-text-dark);
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.grafico__axis--y {
  top: -9%;
  bottom: -9%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%) scaleY(0);
}
.grafico__axis--x {
  left: -9%;
  right: -9%;
  top: 50%;
  height: 1px;
  transform: translateY(-50%) scaleX(0);
}
.grafico.is-in-view .grafico__axis--y { transform: translateX(-50%) scaleY(1); }
.grafico.is-in-view .grafico__axis--x { transform: translateY(-50%) scaleX(1); }

.grafico__eje {
  position: absolute;
  z-index: 3;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-text-dark);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.6s linear 0.5s;
}
.grafico.is-in-view .grafico__eje { opacity: 1; }

.grafico__eje--top    { bottom: calc(100% + 9%); left: 50%; transform: translateX(-50%); }
.grafico__eje--bottom { top: calc(100% + 9%);    left: 50%; transform: translateX(-50%); }
/* Las de los costados van giradas, como en el diseño: la izquierda se
   lee de abajo hacia arriba y la derecha de arriba hacia abajo. */
.grafico__eje--left   { right: calc(100% + 9%); top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; }
.grafico__eje--right  { left: calc(100% + 9%);  top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .sistema {
    min-height: 0; /* el alto lo manda el contenido */
    padding-block: var(--label-offset);
  }
  .sistema__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  /* Las etiquetas de los ejes sobresalen del circulo (van giradas a los
     costados), asi que el grafico tiene que dejarles lugar: si ocupa el
     100% del ancho, las de los costados se salen de la pantalla y
     aparece scroll horizontal en toda la pagina. */
  .grafico {
    width: min(72%, 280px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .grafico__quad,
  .grafico__axis,
  .grafico__eje {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .grafico__axis--y { transform: translateX(-50%); }
  .grafico__axis--x { transform: translateY(-50%); }
}

/* =========================================================
   PARA QUÉ SIRVE  (lista con líneas + imagen del camino)
   ---------------------------------------------------------
   Misma mecánica de líneas que la lista de Propósito en la home: cada
   línea se "carga" de izquierda a derecha cuando el item entra en
   pantalla, escalonada con el --reveal-delay que declara el HTML.
   Acá cada item lleva línea arriba Y abajo, como en el diseño.
   ========================================================= */
.para-que {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--label-block);
  background: var(--color-panel);
  color: var(--color-text-light);
}

/* El camino ocupa la mitad derecha y sangra fuera de la sección. Va en
   absoluto para no empujar la lista. El PNG está recortado sobre
   transparencia (el original venía con fondo blanco). */
.para-que__calle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 48%;
  height: auto;
  max-height: 108%;
  object-fit: contain;
  object-position: center right;
  pointer-events: none;
}

.para-que__inner {
  position: relative;
  z-index: 1;
}

/* Ancho en px y no en %: cada frase tiene que entrar en UNA sola linea,
   y eso depende del largo del texto, no de la pantalla. Con un % la
   columna se achicaba en notebooks de 1024-1280 y las frases se partian
   en dos. */
.para-que__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: min(100%, 620px);
}

.para-que__item {
  position: relative;
  padding-block: var(--space-4);
}

/* Las dos líneas de cada item (arriba y abajo). */
.para-que__item::before,
.para-que__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-4) 0%, var(--color-7) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0s);
}
.para-que__item::before { top: 0; }
.para-que__item::after  { bottom: 0; }
/* La de abajo entra apenas después que la de arriba. */
.para-que__item::after {
  transition-delay: calc(var(--reveal-delay, 0s) + 0.18s);
}
.para-que__item.is-in-view::before,
.para-que__item.is-in-view::after {
  transform: scaleX(1);
}

/* El .reveal de estos items solo dispara las líneas: el texto no se
   mueve (si no, se lee doble movimiento). */
.para-que__item.reveal {
  opacity: 1;
  transform: none;
}
.para-que__item p {
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--reveal-delay, 0s) + 0.12s),
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--reveal-delay, 0s) + 0.12s);
}
.para-que__item.is-in-view p {
  opacity: 1;
  transform: none;
}

.para-que__item p {
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-text-light);
  /* Una linea por frase (en mobile vuelve a poder cortarse). */
  white-space: nowrap;
}

/* ---------------------------------------------------------
   RESPONSIVE
   El camino pasa a ser un fondo tenue detrás del texto.
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .para-que {
    min-height: 0;
    padding-block: var(--label-offset);
  }
  .para-que__list {
    width: 100%;
    gap: var(--space-5);
  }
  .para-que__item {
    padding-block: var(--space-3);
  }
  /* En pantallas chicas no hay ancho para una sola linea. */
  .para-que__item p {
    white-space: normal;
  }
  .para-que__calle {
    width: 96%;
    max-height: 60%;
    opacity: 0.25;
  }
}

/* =========================================================
   CIERRE  (mosaico violeta + llamada a la acción)
   ---------------------------------------------------------
   El fondo es una grilla de cuadrados en dos violetas de la paleta
   (--color-8 y una versión apenas más clara). No es una imagen: son
   spans, así cada cuadrado puede latir con su propio ritmo.
   ========================================================= */
.cierre {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--label-block);
  background: var(--color-8);
  color: var(--color-text-light);
  text-align: center;
}

.cierre__mosaico {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 1fr;
  pointer-events: none;
}
.cierre__mosaico span {
  background: color-mix(in srgb, var(--color-8) 88%, var(--color-bg));
  opacity: 0;
  animation: mosaicoLatido 9s ease-in-out infinite;
}
/* Un patrón irregular: si se iluminaran de a uno por medio se leería
   como un tablero de ajedrez. */
.cierre__mosaico span:nth-child(3n + 1) { opacity: 0.55; animation-delay: -1.5s; }
.cierre__mosaico span:nth-child(5n + 2) { opacity: 0.85; animation-delay: -4s; }
.cierre__mosaico span:nth-child(7n)     { opacity: 0.35; animation-delay: -6.5s; }
.cierre__mosaico span:nth-child(11n + 4){ opacity: 0.7;  animation-delay: -2.5s; }

@keyframes mosaicoLatido {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.75; }
}

.cierre__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.cierre__title {
  font-size: clamp(1.9rem, 3.2vw, 3.6rem);
  line-height: 1.12;
}
/* Dos pesos, como en el diseño: la pregunta en black y "Hablemos." en
   roman, un escalón más liviano. */
.cierre__title-strong {
  display: block;
  font-weight: var(--fw-black);
}
.cierre__title-soft {
  display: block;
  font-weight: var(--fw-regular);
}

@media (max-width: 1024px) {
  .cierre {
    min-height: 0;
    padding-block: var(--label-offset);
  }
  .cierre__mosaico {
    grid-template-columns: repeat(4, 1fr);
  }
  .cierre__inner {
    gap: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cierre__mosaico span { animation: none; }
}