/* =========================================================
   PROPÓSITO
   LedLab — landing. Editar SOLO lo de esta sección acá.
   ---------------------------------------------------------
   Sección de fondo OSCURO (--color-panel), la primera del sitio. El
   cambio de color contra las secciones crema es drástico, sin
   desvanecimiento, como el resto (ver .section-full en layout.css).
   Dos columnas: bloque de texto a la izquierda, lista numerada 01-04 a
   la derecha, separada por líneas con degradado.
   ========================================================= */
.proposito {
  background: var(--color-panel);
  --color-text: var(--color-text-light);
}

.proposito__inner {
  position: relative; /* por encima de la decoración */
  z-index: 1;
  width: 100%;
}

/* ---------------------------------------------------------
   FONDO: EL ISOLOGO ESCALADO
   Los rectángulos del fondo son los del isologo de la marca (una
   retícula de cuatro bloques de 45 unidades). Se usa
   assets/img/iso_deco.svg, que es el mismo logo_iso.svg con el fill
   pasado al crema de marca al 5% de opacidad: así se lee apenas sobre el
   gris oscuro y sirve igual si algún día va sobre otro fondo.
   background-size: cover lo escala hasta llenar toda la sección (se
   recorta a lo alto, que es lo que hace que los bloques se vean grandes).
   Si se prefiere ver el isologo completo, cambiar cover por contain.
   --------------------------------------------------------- */
.proposito__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../../assets/img/iso_deco.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* ---------------------------------------------------------
   COLUMNA DE TEXTO
   --------------------------------------------------------- */
.proposito__title {
  font-size: clamp(2.5rem, 4.4vw, 5.5rem);
  line-height: 1.04;
  color: var(--color-text-light);
  /* Ancho tope para que caiga una palabra por línea (Liderazgo /
     Empático / Disruptivo.) sin forzarlo con <br>. */
  max-width: 12ch;
}

.proposito__text p {
  margin-top: var(--space-4);
  font-size: 20px;
  line-height: 1.5;
  max-width: 52ch;
  color: var(--color-text-light);
}

.proposito__text .btn {
  margin-top: var(--space-5);
}

/* ---------------------------------------------------------
   LISTA NUMERADA 01-04
   Cada item lleva su línea con degradado arriba (naranja -> rosa,
   medido del Figma: --color-3 a --color-5) y el último también abajo,
   así quedan las 5 líneas del diseño.
   La línea es un pseudo-elemento y no un border porque un border no
   admite degradado de forma confiable.
   --------------------------------------------------------- */
.proposito__list {
  display: flex;
  flex-direction: column;
}

.proposito__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
.proposito__item::before,
.proposito__item:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-3) 0%, var(--color-5) 100%);
  /* Las líneas se "cargan" de izquierda a derecha al entrar en pantalla.
     El escalonado sale del --reveal-delay que cada item declara en el
     HTML, y la clase .is-in-view la agrega initReveal() en js/main.js. */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1)
    var(--reveal-delay, 0s);
}
.proposito__item.is-in-view::before,
.proposito__item.is-in-view:last-child::after {
  transform: scaleX(1);
}
/* La de abajo del último item entra al final de todas. */
.proposito__item:last-child::after {
  transition-delay: calc(var(--reveal-delay, 0s) + 0.18s);
}
.proposito__item::before { top: 0; }
.proposito__item:last-child::after { bottom: 0; }

.proposito__num {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: clamp(2rem, 3vw, 3.4rem);
  line-height: 1;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums; /* que 01 y 04 midan igual */
  transition: color var(--transition-fast);
}

/* En hover el número toma el naranja de la paleta. El hover se toma del
   item completo (no solo del número) para que el área sea cómoda. */
.proposito__item:hover .proposito__num {
  color: var(--color-3);
}

.proposito__item p {
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-text-light);
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .proposito__title { max-width: none; }
  .proposito__item {
    gap: var(--space-2);
    padding-block: var(--space-2);
  }
  /* La decoración solo aporta ruido en pantallas chicas. */
  .proposito__deco { display: none; }
}