/* ==========================================================================
   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 editorial sobre fondo claro, con una franja de datos arriba
   (mismo lenguaje que el header de /exitos: kickers + rule + badge) y la
   foto del equipo ya no de fondo pleno, sino como panel propio más abajo
   (ver .nos-photo). */
.nos-hero {
  position: relative;
  /* Mismo tono que el fondo de estudio de la foto (#F1F1F1, medido de sus
     bordes) para que el header se funda con el panel de abajo y no se vea
     el corte cromático contra el --c-light del resto de la página. */
  background: #F1F1F1;
  padding-top: calc(var(--navbar-h) + var(--sp-56));
  padding-bottom: var(--sp-72);
}

.nos-hero__meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--sp-20);
  align-items: end;
  padding-bottom: var(--sp-32);
}

.nos-hero__kicker {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.nos-hero__kicker strong {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-body, inherit);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-dark);
}

.nos-hero__kicker-sub {
  display: block;
  margin-top: 3px;
  font-weight: 600;
  color: var(--c-dark);
}

.nos-hero__badge {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--c-rule);
  border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--c-muted);
}

.nos-hero__badge i {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--c-orange);
}

.nos-hero__rule {
  margin: 0 0 var(--sp-64);
  border: none;
  border-top: 1px solid var(--c-rule);
}

/* Título al 60% del tamaño de --fs-header (un 40% más chico) para que la
   puesta respire más; no se toca el token porque main.css lo usa en otras
   páginas. */
.nos-hero__title {
  margin: 0;
  font-size: 90px;
  line-height: 70px;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-dark);
}

/* --- Foto del equipo ----------------------------------------------------
   Pantalla completa, de punta a punta (sin container). El `top/bottom:
   -70px` en el medio le da margen al leve parallax (data-parallax,
   motion.js) para moverse sin dejar huecos; `overflow: hidden` en la
   sección lo recorta. La punta redondeada abajo la da el solape de .adn
   (margin-top negativo + esquinas superiores redondas), no esta sección. */
.nos-photo {
  position: relative;
  height: var(--nos-hero-h);
  overflow: hidden;
}

.nos-photo__media {
  position: absolute;
  top: -70px;
  right: 0;
  bottom: -70px;
  left: 0;
  background: url('../img/home-nosotros.png') center / cover no-repeat;
}

@media (max-width: 760px) {
  .nos-hero__meta { grid-template-columns: 1fr 1fr; row-gap: var(--sp-16); }
  .nos-hero__badge { display: none; }
}

/* --- ADN ------------------------------------------------------------------
   La sección sube 100px sobre la foto (stackSpacing -100) y remata con
   esquinas superiores redondas: es lo que le da la punta redondeada abajo
   a la foto de pantalla completa de arriba. */
.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);
}

/* Misma tipografía y tamaño chico que los kickers de /exitos (IBM Plex
   Mono, 11.5px), en vez de la bajada grande que traía antes. */
.stat span {
  display: block;
  max-width: 110px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #212224;
}

/* --- 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;
}

/* Gap 24, no 36: las tres cards miden 426.667 y 3×426.667 + 2×24 da los 1328
   del contenedor. */
.leadership__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-24);
}

/* 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).
   El <li> existe sólo para eso: el halo se dibuja por fuera de la card y el
   `overflow: hidden` de la card lo recortaría. */
.founder {
  position: relative;
  isolation: isolate;
}

.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); }

/* La card es 426.667×520 con radio 36 y padding 20. El contenido se apoya
   abajo a la izquierda, encima de la foto. */
.founder__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
  aspect-ratio: 426.667 / 520;
  padding: 20px;
  border-radius: 36px;
  overflow: hidden;
  /* La página es clara: el texto sobre la foto va en blanco sí o sí, no puede
     heredar el color de /nosotros. */
  color: var(--c-white);
}

/* La foto no entra con `cover`: el diseño la agranda al 133.44% del ancho de la
   card y la corre a −15.12% / −8.63%, o sea un poco más de zoom que un cover y
   anclada abajo. Va tal cual, en absoluto, para no perder el <img> (alt y
   lazy). `max-width: none` es necesario porque el reset global pone 100%. */
.founder__photo {
  position: absolute;
  left: -15.12%;
  top: -8.63%;
  width: 133.44%;
  height: 109.49%;
  max-width: none;
  object-fit: cover;
}

/* Degradé negro que despega el texto de la foto: opaco al 80% abajo y
   transparente al 51.44% de la altura. */
.founder__card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0) 51.442%);
}

.founder__photo { z-index: -2; }

.founder__name {
  font-size: var(--fs-paragraph-m);
  line-height: var(--lh-paragraph-m);
  font-weight: var(--fw-regular);
}

/* Botón de flecha, arriba a la derecha de la card.

   Existe SÓLO en las variantes de tablet y mobile del componente
   (`State=Tablet` / `State=Mobile`): las de desktop —`Default` y `Hover`— no
   lo traen. Por eso arranca oculto y se enciende recién en el breakpoint.

   38×38 contra el padding de 20 de la card, con el degradé de marca (#FF5800
   → #B28CFF, el mismo `--grad-primary`) y la flecha calada en blanco. Es
   decorativo: la card no es un enlace, así que va `aria-hidden` y sin foco. */
.founder__go {
  position: absolute;
  top: 20px;
  right: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--grad-primary);
}

.founder__go::after {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--c-white);
  -webkit-mask: url('../img/icons/arrow-outward.svg') center / contain no-repeat;
          mask: url('../img/icons/arrow-outward.svg') center / contain no-repeat;
}

/* El cargo va al 50% de opacidad, debajo del nombre. */
.founder__rol {
  font-size: var(--fs-paragraph-xs);
  line-height: var(--lh-paragraph-xs);
  font-weight: var(--fw-regular);
  opacity: 0.5;
}

/* --- Historia -------------------------------------------------------------
   Texto a la izquierda y un collage de 5 piezas a la derecha. Tres de esas
   piezas caen POR DEBAJO de la caja que las contiene: en el .fig la sección
   mide 929 de alto y el collage llega a 872 arrancando en y=208, o sea que se
   mete ~152px en la sección oscura del diferencial. Es a propósito, así que la
   sección no recorta y sube por z-index para no quedar tapada por la de abajo. */
/* Estos valores viven acá y no en tokens.css a propósito: los radios y el
   cuerpo del cierre en desktop salen del frame, pero los de tablet y mobile
   están DERIVADOS por proporción (no los tengo medidos del .fig), y tokens.css
   dice explícitamente que ahí no hay nada estimado. */
.historia {
  --hist-r-photo: 38px;   /* radio de las fotos y del cuadro lila */
  --hist-r-claim: 36px;   /* radio del cuadro naranja */
  --fs-hist-lead: 36px;
  --lh-hist-lead: 38px;

  position: relative;
  z-index: 1;
  padding-block: var(--sp-120) var(--sp-100);
}

.historia .container { display: flex; flex-direction: column; gap: var(--sp-72); }

.historia__grid {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

.historia__body {
  display: flex;
  flex-direction: column;
  gap: var(--lh-paragraph-m);   /* el párrafo vacío del diseño entre bloques */
  width: 647px;
  flex: none;
}

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

/* El cierre va un escalón más grande que el cuerpo. */
.historia__text--lead {
  font-size: var(--fs-hist-lead);
  line-height: var(--lh-hist-lead);
}

/* --- Collage -------------------------------------------------------------
   Cada pieza va en % de esta caja, no en px: con el `aspect-ratio` fijo los
   porcentajes verticales resuelven contra una altura proporcional al ancho, y
   todo el conjunto escala junto. Los tres breakpoints reordenan las piezas, no
   sólo las achican, así que cada uno redefine sus posiciones más abajo. */
.historia__media {
  position: relative;
  flex: none;
  width: 615.631px;
  aspect-ratio: 615.631 / 621;
}

.hist-piece,
.hist-tile {
  position: absolute;
  margin: 0;
}

.hist-piece {
  overflow: hidden;
  border-radius: var(--hist-r-photo);
}

.hist-piece img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Marco naranja-violeta difuminado que el diseño superpone en `screen` sobre
   las dos fotos: es lo que les tiñe los bordes. */
.hist-glow {
  position: absolute;
  inset: -6%;
  background: url('../img/nosotros/historia/glow.png') center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hist-tile--globo {
  overflow: hidden;
  border-radius: var(--hist-r-photo);
  background: var(--c-lavender);
}

/* El círculo del globo. Las medidas salen del frame de desktop —116.855x118.356
   a 38.03/37.03 sobre el cuadro de 192.675— pasadas a % para que valgan también
   en tablet y mobile: ahí el cuadro cambia de tamaño pero el círculo guarda la
   misma proporción (81.875 sobre 135 = los mismos 60.65% / 19.74%).

   Va en `soft-light`: viene sobre el lila pleno y así se funde con el cuadro en
   vez de recortarse contra él. El recorte circular vive acá y no en el video
   porque el blend necesita una caja propia. */
.hist-globo {
  position: absolute;
  left: 19.74%;
  top: 19.22%;
  width: 60.65%;
  height: 61.43%;
  overflow: hidden;
  border-radius: 50%;
  mix-blend-mode: soft-light;
}

/* El video no entra a medida en el círculo: el diseño lo agranda a ~154% y lo
   corre para arriba y a la izquierda, o sea que el globo asoma recortado por
   los cuatro lados. Son los mismos valores del frame, en % del círculo. */
.hist-globo__video {
  position: absolute;
  left: -25.27%;
  top: -26.22%;
  width: 154.18%;
  height: 152.22%;
}

/* Con movimiento reducido el globo deja de girar y queda el cuadro que ya
   estaba antes del video, igual que el header con su poster. */
@media (prefers-reduced-motion: reduce) {
  .hist-globo {
    background: url('../img/nosotros/historia/globo.png') center / cover no-repeat;
  }
  .hist-globo__video { display: none; }
}

/* El claim: cuadrado naranja con el texto en Aeonik Bold. El cuerpo va en `cqi`
   —porcentaje del ancho del cuadrado— para que escale solo en los tres
   breakpoints en vez de repetir tres tamaños a mano. Va sobre el <p> hijo, no
   sobre el cuadro: `cqi` se resuelve contra el contenedor ANCESTRO, así que en
   el propio cuadro caía al viewport (21px pasaban a 218px). */
.hist-tile--claim {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--hist-r-claim);
  background: var(--c-orange);
  color: var(--c-light);
}

/* La sangría también va acá y en `cqi`: el cuadro está posicionado en absoluto,
   así que un `padding-left` en % se resolvería contra .historia__media (97px en
   vez de 22) en lugar de contra el propio cuadro. */
.hist-tile--claim p {
  margin: 0;
  padding-left: 15.84cqi; /* 22     / 138.897 */
  font-size: 15.18cqi;    /* 21.085 / 138.897 */
  line-height: 13.28cqi;  /* 18.45  / 138.897 */
  font-weight: var(--fw-bold);
}

/* --- Collage / desktop --------------------------------------------------- */
.hist-piece--laptop { left: 42.055%; top: 38.647%; width: 57.943%; height: 71.283%; }
.hist-piece--equipo { left: 0;       top: 81.159%; width: 69.522%; height: 57.488%; }
.hist-tile--globo   { left: 17.706%; top: 64.734%; width: 31.297%; height: 31.027%; }
.hist-tile--claim   { left: 84.140%; top: 118.178%; width: 22.562%; height: 22.367%; }
.hist-tile--iso     { left: 59.776%; top: 110.628%; width: 19.493%; height: 19.324%; }

/* --- Diferencial (acá empieza el fondo oscuro) ---------------------------
   Los tres ítems son CÍRCULOS, no columnas de texto sueltas. En el `.fig` cada
   uno es un frame cuadrado con `cornerRadius` 99999 —400×400 en desktop y
   tablet, 303 en mobile—, relleno invisible y un borde lavanda de 1px, con el
   contenido centrado en los dos ejes.

   Y se solapan 26px, el mismo gesto que las cards de Soluciones en la home,
   sobre el eje en el que estén apilados: horizontal en desktop, vertical en
   tablet y mobile. */
.dif {
  --dif-size:  400px;
  --dif-pad-x: var(--sp-56);

  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: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

/* El solape va entre pares: con margen negativo en todos los ítems, los bordes
   exteriores del conjunto se comerían 26px de más. */
.dif__list > .dif__item + .dif__item { margin-left: -26px; }

.dif__item {
  flex: 0 0 var(--dif-size);
  width: var(--dif-size);
  height: var(--dif-size);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--sp-24);
  padding: var(--sp-56) var(--dif-pad-x);
  text-align: center;
  border: 1px solid var(--c-lavender);
  border-radius: var(--r-pill);
}

.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 a dos columnas: nombre en caja fija de 486, la descripción y su CTA
   a 188 de distancia. El diseño no lleva líneas divisorias: separa sólo con los
   32 de padding de cada fila. */
.entidades__list { margin-top: var(--sp-72); }

/* La fila sangra fuera del container para que el fondo del hover llegue de
   punta a punta —en el diseño el componente mide los 1440 y se guarda los 56
   como padding propio. */
.entidad {
  position: relative;
  display: flex;
  gap: 188px;
  padding-block: var(--sp-32);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow: hidden;
}

/* El velo ya no sólo aparece: "mide" la fila de punta a punta con un barrido
   de izquierda a derecha (scaleX desde el borde izquierdo), como la
   referencia de dhnn.com. Al salir se repliega hacia el mismo origen. */
.entidad::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-white);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease), opacity 0.35s var(--ease);
  pointer-events: none;
}

.entidad:hover::before,
.entidad:focus-within::before {
  opacity: 0.3;
  transform: scaleX(1);
}

/* El contenido queda sobre el velo y se corre levemente al pasar el mouse,
   reforzando la sensación de "medición" horizontal. */
.entidad__nombre,
.entidad__body {
  position: relative;
  transition: transform 0.5s var(--ease);
}

.entidad:hover .entidad__nombre,
.entidad:focus-within .entidad__nombre,
.entidad:hover .entidad__body,
.entidad:focus-within .entidad__body {
  transform: translateX(10px);
}

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

.entidad__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-44);
}

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

/* --- Alianzas Estratégicas -------------------------------------------------
   Reemplaza la marquesina por una grilla estática. Los logos ya vienen
   convertidos a SVG en blanco puro (máscara de alfa), así que no hace
   falta invertir ni filtrar nada acá. */
.page-nosotros__clients {
  padding-block: var(--sp-120);
  background: var(--c-dark);
  color: var(--c-white);
}

.alianzas__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-20, 20px);
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--sp-64);
  max-width: 720px;
}

.alianzas__title {
  margin: 0;
  order: -1;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  color: var(--c-white);
}

.alianzas__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-44) var(--sp-36);
  align-items: center;
  justify-items: center;
  max-width: 1180px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.alianzas__grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
}

.alianzas__grid img {
  max-width: 130px;
  max-height: 48px;
  width: auto;
  height: auto;
  opacity: 0.72;
  transition: opacity var(--dur) var(--ease);
}

.alianzas__grid li:hover img { opacity: 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) {
  /* --- Tipografía ---------------------------------------------------------
     `--fs-title` vale 72px en los tres breakpoints y `--fs-header` baja a 120,
     pero esta página no sigue ninguna de las dos escalas: su hero arranca en
     150 y cae a 80, y sus títulos de sección van 72 → 56 → 48. Los tokens no
     se tocan porque los comparten /hablemos, /caso-camuzzi y /exitos, cuyos
     frames son otros; la escala propia de /nosotros vive acá. */
  .nos-hero__title { font-size: 48px; line-height: 40px; }

  .adn__title,
  .leadership__title,
  .dif__title,
  .alianzas__title,
  .nos-cta__text { font-size: 56px; line-height: 44px; }

  .stat strong { font-size: 50px; line-height: 44px; }

  .adn__grid { grid-template-columns: 1fr; gap: var(--sp-36); }

  /* Las métricas NO pasan a 2×2 en tablet: el frame de 800 las mantiene en una
     fila de cuatro (167px cada una) con la misma separación de 20 que en
     desktop. La sección va a 64 arriba y abajo. */
  .stats { padding-block: var(--sp-64); }

  /* Las tres cards de leadership siguen en fila pero se angostan mucho —235
     contra 427— y conservan su alto: la proporción cambia, no es la misma card
     escalada. La separación baja de 24 a 12. */
  .leadership { padding-block: var(--sp-64); }
  .leadership__list { grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); }
  .founder__card { aspect-ratio: 235 / 520; }

  /* De acá para abajo la card trae el botón de flecha, y el nombre y el cargo
     bajan de 28/20 a 24/14. Es el mismo valor en tablet y en mobile. */
  .founder__go { display: flex; }
  .founder__name { font-size: 24px; line-height: 26px; }
  .founder__rol  { font-size: 14px; line-height: 18px; }

  /* Tablet y mobile no son la card de desktop reencuadrada: usan otra variante
     del componente (`State=Tablet` / `State=Mobile`) cuya imagen va en FILL,
     o sea cover centrado. El encuadre a medida —STRETCH con su propia matriz,
     que es lo que replican los porcentajes de arriba— es sólo de desktop. */
  .founder__photo { left: 0; top: 0; width: 100%; height: 100%; }

  /* Los círculos del diferencial se apilan y el solape pasa al eje vertical. */
  .dif__list { flex-direction: column; align-items: center; }
  .dif__list > .dif__item + .dif__item { margin-left: 0; margin-top: -26px; }

  /* En tablet el collage baja debajo del texto y ocupa todo el ancho (728 en
     el frame de 800). No es el mismo collage más chico: las piezas cambian de
     lugar — la foto del equipo sube, el claim se mete entre las dos fotos y el
     isotipo se va al pie. */
  .historia {
    --hist-r-claim: 33px;
    --fs-hist-lead: 32px;
    --lh-hist-lead: 34px;
    padding-block: var(--sp-100);
  }

  .historia__grid { flex-direction: column; gap: 64px; }
  .historia__body { width: 647px; max-width: 100%; }
  .historia__media { width: 100%; aspect-ratio: 728 / 621; }

  .hist-piece--laptop { left: 46.291%; top: 20.934%; width: 48.998%; height: 71.283%; }
  .hist-piece--equipo { left: 0;       top: 65.539%; width: 54.396%; height: 53.301%; }
  .hist-tile--globo   { left: 14.973%; top: 21.256%; width: 26.466%; height: 31.027%; }
  .hist-tile--claim   { left: 83.654%; top: 62.319%; width: 17.445%; height: 20.612%; }
  .hist-tile--iso     { left: 50%;     top: 97.907%; width: 16.484%; height: 19.324%; }

  .entidades { padding-block: 0; }

  /* En 834 las dos columnas no entran (486 + 188 se pasa del contenido): el
     nombre pasa arriba y la descripción debajo. */
  .entidad {
    flex-direction: column;
    gap: var(--sp-24);
  }
  .entidad__nombre { width: 100%; }
  .entidad__body   { gap: var(--sp-32); }
  .nos-cta { padding-block: var(--sp-80); }

  .page-nosotros__clients { padding-block: var(--sp-80); }
  .alianzas__grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-36) var(--sp-24); }
}

@media (max-width: 640px) {
  /* --- Tipografía ---------------------------------------------------------
     El hero baja a 44: casi un tercio de lo que da `--fs-header` en mobile
     (96px), que es el tamaño del tagline de la home, no el de este titular
     sobre foto. Los títulos de sección van a 48 y el cierre a 44. */
  .nos-hero__title { font-size: 26px; line-height: 28px; }

  /* En mobile "cover" recortaba integrantes de los costados: la foto pasa a
     "contain" (se ve entera, de punta a punta de ancho) con el mismo tono
     de fondo de estudio (#F1F1F1) rellenando arriba/abajo en vez de cortar.
     Sin el margen de -70 que usa el parallax en desktop: con "contain" ese
     margen sólo hacía el recorte todavía más chico. */
  .nos-photo { height: auto; aspect-ratio: 1920 / 1080; }
  .nos-photo__media {
    top: 0;
    bottom: 0;
    background: #F1F1F1 url('../img/home-nosotros.png') center / contain no-repeat;
  }

  .adn__title,
  .leadership__title,
  .dif__title,
  .alianzas__title { font-size: 48px; line-height: 38px; }

  .nos-cta__text { font-size: 44px; line-height: 38px; }
  .adn__text     { font-size: 20px; line-height: 24px; }

  .stat strong { font-size: 44px; line-height: 44px; }

  /* El bloque de ADN respira menos que en desktop: 80 contra 120. */
  .adn { padding-block: var(--sp-80); }

  /* Métricas: una debajo de otra, con 20 de separación —no 36— y la sección
     apretada a 24, que es lo que da el frame de 375. */
  .stats { padding-block: var(--sp-24); }
  .stats__grid { grid-template-columns: 1fr; gap: var(--sp-20); }

  /* Las cards de leadership se apilan y cambian de proporción: en mobile son
     apaisadas (327×256), no el retrato de desktop. */
  .leadership__list { grid-template-columns: 1fr; gap: var(--sp-12); }
  .founder__card { aspect-ratio: 327 / 256; }

  /* Círculos más chicos y con menos aire a los costados: 303 de diámetro con
     35 de padding lateral, que deja los 233 de caja de texto del frame. */
  .dif { --dif-size: 303px; --dif-pad-x: 35px; }
  .dif__title { margin-bottom: var(--sp-44); }
  .dif__name { font-size: 22px; line-height: 22px; }
  .dif__text { font-size: 14px; line-height: 18px; }

  .entidades__list { margin-top: var(--sp-44); }
  .entidad       { padding-block: var(--sp-24); gap: var(--sp-16); }
  .entidad__body { gap: var(--sp-24); }
  .page-nosotros__clients { padding-block: var(--sp-100); }
  .alianzas__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-24); }
  .alianzas__grid li { height: 36px; }
  .alianzas__grid img { max-width: 100px; max-height: 36px; }

  /* En mobile la foto del equipo se sale por la izquierda (x=−48 sobre una
     caja de 327): sangra fuera del gutter a propósito. */
  .historia {
    --hist-r-photo: 27px;
    --hist-r-claim: 23px;
    --fs-hist-lead: 28px;
    --lh-hist-lead: 30px;
    padding-block: var(--sp-64);
  }

  .historia .container { gap: var(--sp-44); }
  .historia__body { width: 303px; }
  .historia__media { aspect-ratio: 327 / 557; }

  .hist-piece--laptop { left:  32.110%; top: 31.239%; width: 76.431%; height: 55.683%; }
  .hist-piece--equipo { left: -14.679%; top: 66.068%; width: 84.939%; height: 41.594%; }
  .hist-tile--globo   { left:   3.364%; top: 31.239%; width: 41.284%; height: 24.237%; }
  .hist-tile--claim   { left:  78.899%; top: 48.294%; width: 27.213%; height: 16.100%; }
  .hist-tile--iso     { left:  64.526%; top: 97.487%; width: 25.712%; height: 15.095%; }
  .nos-cta .container { gap: var(--sp-36); }
}