/* ==========================================================================
   Thinkhub — /nosotros  (frame 273:15295)
   La página arranca clara (#E8E9DD) y a partir de «Nuestro diferencial» pasa
   a oscuro (#212224) hasta el final. El footer vuelve a claro.
   ========================================================================== */

.page-nosotros { background: var(--c-light); color: var(--c-dark); }

/* --- Hero ----------------------------------------------------------------
   Titular en claro sobre la foto del equipo. */
.nos-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: var(--nos-hero-h);
  padding-block: var(--sp-120);
  padding-top: calc(var(--navbar-h) + var(--sp-100));
  overflow: hidden;
}

/* Sin overlay: en el .fig `Hero image` tiene un único fill IMAGE, sin
   gradiente encima. El titular va en #E8E9DD directamente sobre la foto. */
.nos-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/nosotros/hero.jpg') center / cover no-repeat;
}

.nos-hero__title {
  margin: 0;
  font-size: var(--fs-header);
  line-height: var(--lh-header);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  color: var(--c-light);
}

/* --- ADN ------------------------------------------------------------------
   La sección sube 100px sobre la foto del hero (stackSpacing -100 de la
   sección contenedora) y remata con esquinas superiores de 100px de radio. */
.adn {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--adn-overlap) * -1);
  padding-block: var(--sp-120);
  background: var(--c-light);
  border-radius: var(--r-section) var(--r-section) 0 0;
}

.adn__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-72);
  align-items: start;
}

/* `min-width: 0` para que la columna del grid pueda achicarse: sin eso el
   contenido fuerza el ancho mínimo y en mobile se desborda. */
.adn__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-36);
  max-width: 900px;
  min-width: 0;
}

.adn__title {
  margin: 0;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}

.adn__text {
  margin: 0;
  font-size: var(--fs-paragraph-m);
  line-height: var(--lh-paragraph-m);
}

/* --- Métricas -------------------------------------------------------------
   Las 4 cifras van todas en naranja, número y bajada. */
.stats { padding-block: var(--sp-64) var(--sp-36); }

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-20, 20px);
}

.stat { display: flex; flex-direction: column; gap: var(--sp-4); color: var(--c-orange); }

.stat strong {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-bold);
}

.stat span {
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  font-weight: var(--fw-medium);
}

/* --- Leadership ----------------------------------------------------------- */
.leadership { padding-block: var(--sp-120); }

.leadership__title {
  margin: var(--sp-24) 0 var(--sp-72);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}

.leadership__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-36);
}

/* El componente tiene variantes State=Default / State=Hover: en hover aparece
   un halo radial naranja detrás de la foto (elipse de 438px con blur 120). */
.founder {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}

.founder::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 45%;
  width: 438px;
  height: 438px;
  transform: translate(-50%, -50%) scale(0.7);
  border-radius: 50%;
  background: radial-gradient(circle, #FF5800 0%, rgba(255, 88, 0, 0) 70%);
  filter: blur(60px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}

.founder:hover::before,
.founder:focus-within::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.founder img {
  width: 100%;
  aspect-ratio: 380 / 460;
  object-fit: cover;
  border-radius: var(--r-card);
}

.founder__name {
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  font-weight: var(--fw-medium);
}

/* El cargo va al 50% de opacidad, debajo del nombre. */
.founder__rol {
  margin-top: calc(var(--sp-24) * -1 + 8px);
  font-size: var(--fs-paragraph-xs);
  line-height: var(--lh-paragraph-xs);
  opacity: 0.5;
}

/* --- Historia ------------------------------------------------------------- */
.historia { padding-block: var(--sp-120); }

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

.historia__body { display: flex; flex-direction: column; gap: var(--sp-36); }

.historia__text {
  margin: 0;
  font-size: var(--fs-paragraph-m);
  line-height: var(--lh-paragraph-m);
}

.historia__media { position: relative; isolation: isolate; }

.historia__media img {
  width: 100%;
  aspect-ratio: 600 / 420;
  object-fit: cover;
  border-radius: var(--r-media);
}

/* El claim va sobre la imagen. En el .fig el color es #E8E9DD porque ahí la
   foto es oscura; la imagen que quedó acá es clara, así que en claro no se
   lee. Va en oscuro hasta confirmar cuál es la imagen correcta. */
.historia__claim {
  position: absolute;
  left: var(--sp-36);
  bottom: var(--sp-36);
  margin: 0;
  font-size: 21px;
  line-height: 18px;
  font-weight: var(--fw-medium);
  color: var(--c-dark);
}

/* --- Diferencial (acá empieza el fondo oscuro) --------------------------- */
.dif {
  padding-block: var(--sp-120);
  background: var(--c-dark);
  color: var(--c-white);
}

.dif__title {
  margin: 0 0 var(--sp-72);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  color: var(--c-lavender);
}

.dif__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-72);
  list-style: none;
}

.dif__item { display: flex; flex-direction: column; gap: var(--sp-24); }

.dif__num {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--c-violet);
}

.dif__name {
  margin: 0;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  font-weight: var(--fw-medium);
}

.dif__text {
  margin: 0;
  font-size: 18px;
  line-height: 22px;
}

/* --- Entidades ------------------------------------------------------------ */
.entidades {
  padding-block: var(--sp-120);
  background: var(--c-dark);
  color: var(--c-white);
}

/* 4 filas separadas por línea. El componente tiene variante State=hover que
   revela una imagen de fondo al 30% — acá va como ::before sobre la fila. */
.entidades__list { margin-top: var(--sp-72); }

.entidad {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding-block: var(--sp-44);
  border-top: 1px solid rgba(232, 233, 221, 0.16);
}

.entidad:last-child { border-bottom: 1px solid rgba(232, 233, 221, 0.16); }

.entidad::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url('../img/nosotros/entidades.jpg') center / cover no-repeat;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.entidad:hover::before,
.entidad:focus-within::before { opacity: 0.3; }

.entidad__nombre {
  margin: 0;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  font-weight: var(--fw-medium);
}

.entidad__desc {
  margin: 0;
  max-width: 900px;
  font-size: 18px;
  line-height: 22px;
  opacity: 0.7;
}

/* --- Ecosistema: reusa la marquesina de la home -------------------------- */
.page-nosotros__clients {
  padding-block: var(--sp-120);
  background: var(--c-dark);
  color: var(--c-white);
}

/* Los logos son #212224: sobre oscuro hay que invertirlos. */
.page-nosotros__clients .clients__list img { filter: invert(1); }

/* --- Cierre --------------------------------------------------------------- */
/* El cierre va centrado: isotipo, titular y botón, en ese orden. El pie es
   bastante más alto que la cabeza (170 contra 100 en el frame). */
.nos-cta {
  padding-block: var(--sp-100) 170px;
  background: var(--c-dark);
  color: var(--c-white);
}

.nos-cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-72);
}

.nos-cta__mark { width: 41px; height: 42px; }

.nos-cta__text {
  margin: 0;
  width: 100%;
  max-width: 988px;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  color: var(--c-lavender);
  text-align: center;
  text-wrap: balance;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .adn__grid { grid-template-columns: 1fr; gap: var(--sp-36); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-36); }
  .leadership__list { grid-template-columns: repeat(3, 1fr); gap: var(--sp-24); }
  .historia__grid { grid-template-columns: 1fr; gap: var(--sp-56); }
  .dif__list { grid-template-columns: 1fr; gap: var(--sp-56); }
}

@media (max-width: 640px) {
  .stats__grid { grid-template-columns: 1fr; }
  .leadership__list { grid-template-columns: 1fr; gap: var(--sp-36); }
  .historia__claim { left: var(--sp-24); bottom: var(--sp-24); }
  .nos-cta .container { gap: var(--sp-36); }
}