/* ═══════════════════════════════════════════════════════════════
   FUNDACIÓN · hero, el problema y cómo lo hacemos

   Lo carga SÓLO /fundacion/, así que las reglas de acá no alcanzan a
   ninguna otra página del sitio.

   Los titulares de estas tres secciones van en Poppins 500 y caja
   baja —no en la display de 800 en versales del resto—: el registro
   es el de alguien explicando, no el de un titular deportivo.
   ═══════════════════════════════════════════════════════════════ */
.fu{
  --negro:#0A0A0B;       /* = --carbon */
  --crema:var(--hueso);
  --navy:#00294F;
  --ac:var(--naranja);
  background:var(--crema);
}

/* Los dibujos: la lámina de básquet a mano. Van detrás de todo y
   NUNCA debajo del texto, de ahí que se anclen a los BORDES de la
   pantalla y a los huecos entre bloques, no al centro: `.env` está
   topado en 1240px y a 1280 de ventana casi no quedan márgenes.

   Los tops están calculados contra las cajas reales del hero a
   1280×800 y 1440×900: los de arriba arrancan debajo de la marca, los
   del medio terminan antes del comparador y del párrafo. */
.fu-dib{
  position:absolute;z-index:0;pointer-events:none;
  height:auto;opacity:.9;
}
.fu-d1{top:calc(var(--header-h) + clamp(56px,7vh,90px));left:clamp(4px,1vw,18px);width:clamp(96px,9vw,142px)}
.fu-d2{top:calc(var(--header-h) + clamp(14px,2vh,40px));right:clamp(2px,.6vw,12px);width:clamp(104px,9.8vw,164px)}
.fu-d3{top:46%;left:clamp(10px,2vw,40px);width:clamp(104px,10.5vw,165px)}
/* En pantallas bajas el 31% cae encima de la pelota en llamas: el
   aro arranca siempre debajo de ella (su alto es 0.493 de su ancho). */
.fu-d4{top:max(31%,calc(var(--header-h) + clamp(50px,6vh,80px) + clamp(170px,17vw,270px) * .493 + 18px));right:clamp(10px,2vw,40px);width:clamp(96px,9.6vw,148px)}
.fu-d5{top:78%;left:clamp(14px,5vw,96px);width:clamp(36px,3.4vw,52px)}
.fu-d6{top:74%;right:clamp(14px,5vw,96px);width:clamp(32px,3vw,46px)}
/* Ventanas bajas: el aro de la derecha llega hasta el borde del
   comparador. Más angosto, queda afuera de su caja. */
@media (min-width:1100px) and (max-height:740px){ .fu-d4{width:clamp(88px,7.4vw,110px)} }
/* Abajo de 1100px la columna de contenido ocupa casi todo el ancho:
   quedan dos dibujos chicos a los costados del titular, que es el
   único hueco que no cruza ninguna línea. */
@media (max-width:1099px){
  .fu-d2,.fu-d3,.fu-d5,.fu-d6{display:none}
  .fu-d1,.fu-d4{top:calc(var(--header-h) + clamp(10px,2vh,26px));width:clamp(38px,calc((100vw - 340px) / 5),110px)}
  .fu-d1{left:clamp(6px,1.5vw,20px)}
  .fu-d4{right:clamp(6px,1.5vw,20px)}
}
/* En pantallas angostas el titular usa el ancho entero: no hay margen
   donde vivan sin pisarlo. */
@media (max-width:820px){ .fu-dib{display:none} }

/* El contenido va por delante de los dibujos. La exclusión tiene que
   nombrar la clase EXACTA de los dibujos: si no, esta regla les gana
   en especificidad, les pisa el `position:absolute` y los mete en el
   flujo (el hero pasaba de 923 a 1249 px de alto). */
.fu > *:not(.fu-dib){position:relative;z-index:1}

/* ── 1 · HERO ─────────────────────────────────────────────── */
/* El header es `position:fixed`: si el hero no reserva su alto en el
   padding, la barra se le come la primera franja —los botones de
   público quedaban tapados y el comparador se cortaba abajo—. El alto
   pasa a ser la pantalla ENTERA y el hueco del menú vive en el
   padding, que es como lo resuelve `.cabecera` en el resto del sitio. */
.fu-hero{
  position:relative;overflow:hidden;
  padding:calc(var(--header-h) + clamp(10px,1.6vh,24px)) 0 clamp(18px,2.4vh,38px);
  min-height:100svh;
  display:flex;flex-direction:column;
}
.fu-hero .env{width:100%}
/* El titular, en el medio de la pantalla */
.fu-hero-centro{
  flex:1 1 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,2.4vh,34px);
  padding-block:clamp(18px,3.4vh,58px);
}
.fu-h1{
  margin:0;text-align:center;
  font-family:var(--cuerpo);font-weight:500;
  font-size:clamp(34px,min(7.2vw,10.4vh),104px);line-height:1.0;
  letter-spacing:-.025em;color:var(--negro);
  max-width:17ch;text-wrap:balance;
  /* El tope por ventana respeta el corredor donde viven los dibujos
     del hero, anclados a los bordes. Sin esto el titular agrandado los
     invadía a 1100 y 1280px (a 1280 terminaba en 1156 y fu-d4 empieza
     en 1131). Va en media query: abajo de 820px los dibujos no se
     muestran y restar 480px daría un ancho negativo. */
}
.fu-hero-acc{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(14px,2vw,26px);margin:0;
}
.fu-sumate{
  display:inline-flex;align-items:center;
  background:var(--ac);color:var(--negro);
  border-radius:var(--radio-s);padding:14px 34px;
  font-family:var(--cuerpo);font-weight:650;font-size:16px;
  text-decoration:none;
  transition:filter var(--t-ui) var(--sal);
}
.fu-link{
  color:var(--negro);font-size:15px;font-weight:500;
  text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1px;
}

/* La bajada del hero, debajo del titular y centrada con él. Es texto
   de lectura, no un pie: cuerpo de párrafo y una medida que no pase de
   una línea de 66 caracteres. */
.fu-hero-bajada{
  margin:0;text-align:center;max-width:62ch;
  font-size:clamp(15px,1.35vw,18.5px);line-height:1.62;
  color:var(--gris);
}
/* El segundo botón, con borde: el mismo molde que el naranja pero en
   línea, para que los dos se lean como un par. */
.fu-borde{
  display:inline-flex;align-items:center;
  background:transparent;color:var(--negro);
  border:1.5px solid var(--negro);border-radius:var(--radio-s);
  padding:12.5px 30px;
  font-family:var(--cuerpo);font-weight:650;font-size:16px;
  text-decoration:none;
  transition:background-color var(--t-ui) var(--sal),color var(--t-ui) var(--sal);
}
@media (hover:hover) and (pointer:fine){
  .fu-borde:hover{background:var(--negro);color:var(--crema)}
}

/* El pie del hero: la columna angosta y el comparador */
.fu-hero-pie{
  display:grid;gap:clamp(24px,3vw,54px);
  grid-template-columns:1fr;
  align-items:end;
}
@media (min-width:900px){
  .fu-hero-pie{grid-template-columns:minmax(240px,30%) 1fr}
}
.fu-hero-p{
  font-size:clamp(13px,1vw,14.5px);line-height:1.6;
  color:var(--gris);margin:0 0 clamp(16px,2vw,24px);max-width:38ch;
}

/* ── 2 · EL PROBLEMA ──────────────────────────────────────── */
/* `overflow:hidden` acá convertía a la sección en contenedor de
   scroll y le rompía el `position:sticky` al pin de adentro: la
   columna izquierda se iba con la página en vez de quedarse. Va
   `clip`, que recorta igual sin crear contexto de scroll. */
.fu-prob{
  position:relative;overflow:clip;
  padding:clamp(56px,8vw,120px) 0;
}
.fu-h2{
  margin:0 auto;text-align:center;max-width:19ch;
  font-family:var(--cuerpo);font-weight:500;
  font-size:clamp(26px,3.9vw,56px);line-height:1.08;
  letter-spacing:-.022em;color:var(--negro);
}
.fu-pildora-txt{
  display:inline-block;border:1px solid var(--negro);border-radius:var(--radio-s);
  padding:.04em .42em .1em;line-height:1;
}
.fu-p-centro{
  margin:clamp(18px,2.2vw,30px) auto 0;text-align:center;
  max-width:62ch;color:var(--gris);
  font-size:clamp(14px,1.15vw,17px);line-height:1.62;
}
/* ── 3 · CÓMO LO HACEMOS ──────────────────────────────────── */
.fu-como{padding:clamp(50px,7vw,104px) 0}
.fu-como-duo{display:grid;gap:clamp(28px,3.4vw,56px);grid-template-columns:1fr}
@media (min-width:768px){
  .fu-como-duo{grid-template-columns:minmax(230px,31%) 1fr;align-items:start}
}
.fu-ante{
  display:block;font-size:9.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--negro);margin-bottom:clamp(12px,1.6vw,20px);
}
.fu-h3{
  margin:0;font-family:var(--cuerpo);font-weight:500;
  font-size:clamp(25px,2.9vw,42px);line-height:1.08;letter-spacing:-.022em;
  color:var(--negro);
}
.fu-como-p1{
  margin:clamp(14px,1.8vw,22px) 0 0;color:var(--negro);
  font-size:clamp(14.5px,1.15vw,17px);line-height:1.55;max-width:38ch;
}
.fu-como-p2{
  margin:clamp(12px,1.4vw,18px) 0 0;color:var(--gris);
  font-size:clamp(13px,1vw,14.5px);line-height:1.6;max-width:40ch;
}
.fu-pest{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-top:clamp(24px,3vw,42px)}
.fu-pest button{
  border:0;background:transparent;cursor:pointer;
  border-radius:var(--radio-s);padding:9px 20px;
  font-family:var(--cuerpo);font-weight:650;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris-suave);
  transition:background-color var(--t-ui) var(--sal),color var(--t-ui) var(--sal);
}
.fu-pest button[aria-selected="true"]{color:#fff}
.fu-pest button[data-i="0"][aria-selected="true"],
.fu-pest button[data-i="2"][aria-selected="true"]{background:var(--navy)}
.fu-pest button[data-i="1"][aria-selected="true"],
.fu-pest button[data-i="3"][aria-selected="true"]{background:var(--negro)}

.fu-visor{overflow:hidden}
.fu-pista{
  display:flex;gap:clamp(14px,1.6vw,24px);
  transition:transform 620ms var(--sal);
  will-change:transform;
}
.fu-tarjeta{
  flex:0 0 clamp(260px,64%,520px);
  border-radius:var(--radio-l);overflow:hidden;
  display:flex;flex-direction:column;
  min-height:clamp(380px,46vw,540px);
}
.fu-tA{background:var(--navy);--tac:#FD6500;--tpie:var(--navy-hondo)}
.fu-tB{background:var(--negro);--tac:#FD6500;--tpie:#141414}
.fu-insignia{
  align-self:flex-start;margin:clamp(16px,1.8vw,24px);
  background:var(--blanco);color:var(--tinta);border-radius:var(--radio-xs);
  padding:5px 11px;font-family:var(--cuerpo);font-weight:700;font-size:13px;
  font-variant-numeric:tabular-nums;
}
.fu-ilu{
  flex:1 1 auto;display:grid;place-items:center;
  padding:0 clamp(20px,3vw,44px) clamp(14px,2vw,26px);
  color:var(--tac);
}
.fu-ilu svg{width:min(180px,52%);height:auto;display:block}
.fu-tpie{
  background:var(--tpie);color:#fff;
  padding:clamp(18px,2.2vw,30px);
}
.fu-tpie h4{
  font-family:var(--cuerpo);font-weight:700;
  font-size:clamp(17px,1.55vw,22px);line-height:1.2;margin:0 0 8px;
}
.fu-tpie p{
  font-size:clamp(13px,1.02vw,15px);line-height:1.5;margin:0;
  color:rgba(255,255,255,.82);
}
.fu-puntos{display:none}

@media (max-width:999px){
  /* Carrusel deslizable con el dedo, y las pestañas pasan a puntos. */
  .fu-visor{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .fu-visor::-webkit-scrollbar{display:none}
  .fu-visor{scrollbar-width:none}
  .fu-pista{transform:none!important;transition:none}
  .fu-tarjeta{flex-basis:min(82%,420px);scroll-snap-align:start}
  .fu-pest{display:none}
  .fu-puntos{display:flex;gap:8px;justify-content:center;margin-top:20px}
  .fu-puntos i{width:7px;height:7px;border-radius:50%;background:var(--linea-fuerte)}
  .fu-puntos i.on{background:var(--ac)}
}
@media (prefers-reduced-motion:reduce){
  .fu-pista{transition:none}
}
@media (hover:hover) and (pointer:fine){
  .fu-sumate:hover{filter:brightness(1.06)}
  .fu-tab:hover{background:rgba(0,0,0,.06)}
  .fu-pest button:hover{color:var(--negro)}
}

/* ── Los tres frentes, en fila y separados por líneas ── */
.fu-tres{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  margin-top:clamp(34px,4.6vw,68px);
}
.fu-tres > div{padding:0 clamp(18px,2.4vw,38px)}
.fu-tres > div + div{border-left:1px solid var(--linea)}
@media (max-width:819px){
  .fu-tres > div{padding:clamp(20px,5vw,26px) 0}
  .fu-tres > div + div{border-left:0;border-top:1px solid var(--linea)}
}
.fu-tres .fu-n{
  display:block;font-family:var(--cuerpo);font-weight:700;
  font-size:clamp(20px,1.9vw,27px);line-height:1;color:var(--ac);margin-bottom:10px;
}
.fu-tres h3{
  font-family:var(--cuerpo);font-weight:700;
  font-size:clamp(16.5px,1.5vw,21px);line-height:1.2;color:var(--negro);margin:0 0 8px;
}
.fu-tres p{
  font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.55;color:var(--gris);margin:0;
}

/* ── El conector entre las dos secciones ──
   Nace al pie de la sección del problema y termina en una punta de
   flecha apuntando al titular de la siguiente. Va a ancho completo,
   fuera de la columna de texto: nunca cruza una línea escrita. */
.fu-conector{
  display:block;width:100%;height:clamp(120px,16vw,220px);
  margin-top:clamp(30px,4vw,60px);margin-bottom:calc(-1 * clamp(30px,4vw,60px));
  overflow:visible;color:var(--negro);
}

/* ═══ Sistema de animación ═══
   Un solo mecanismo de entrada (.anim-el), uno de trazo (.anim-tr) y
   el conteo, que lo hace el JS. Todo el movimiento es `opacity` y
   `transform` —o `stroke-dashoffset`, que tampoco toca el layout—. */
.anim-el{
  opacity:0;transform:translateY(24px);
  transition:opacity 700ms var(--sal),transform 700ms var(--sal);
  transition-delay:var(--d,0ms);
}
.anim-el.vis{opacity:1;transform:none}

/* El largo del trazo lo mide el JS y lo escribe en --L: sin eso no
   hay forma de saber cuánto dura una curva. */
.anim-tr [data-l]{
  stroke-dasharray:var(--L);stroke-dashoffset:var(--L);
  transition:stroke-dashoffset 1200ms var(--sal);
}
.anim-tr.vis [data-l]{stroke-dashoffset:0}

/* Hovers claros, no insinuados */
@media (hover:hover) and (pointer:fine){
  .fu-sumate:hover{
    filter:none;background:var(--negro);color:var(--crema);
    transform:translateY(-2px);
  }
  .fu-sumate{
    transition:background-color var(--t-ui) var(--sal),color var(--t-ui) var(--sal),
               transform var(--t-ui) var(--sal),box-shadow var(--t-ui) var(--sal);
  }
  .fu-sumate:hover{box-shadow:0 10px 26px -12px rgba(0,0,0,.55)}
  .fu-link{transition:color var(--t-ui) var(--sal),text-decoration-color var(--t-ui) var(--sal)}
  .fu-link:hover{color:var(--ac);text-decoration-color:var(--ac)}
  .fu-tab{transition:background-color var(--t-ui) var(--sal),color var(--t-ui) var(--sal),transform var(--t-ui) var(--sal)}
  .fu-tab:hover{background:var(--negro);color:var(--crema);transform:translateY(-1px)}
  .fu-tab[aria-selected="true"]:hover{background:var(--ac);color:var(--negro)}
  .fu-pest button{transition:background-color var(--t-ui) var(--sal),color var(--t-ui) var(--sal),transform var(--t-ui) var(--sal)}
  .fu-pest button:hover{color:var(--negro);transform:translateX(4px)}
  .fu-tarjeta{transition:transform 420ms var(--sal),box-shadow 420ms var(--sal)}
  .fu-visor:hover .fu-tarjeta:hover{transform:translateY(-6px);box-shadow:0 24px 50px -30px rgba(0,0,0,.6)}
}

@media (prefers-reduced-motion:reduce){
  .anim-el{opacity:1;transform:none;transition:none}
  .anim-tr [data-l]{stroke-dashoffset:0;transition:none}
  .fu-conector{opacity:1}
}

/* ═══ El problema: pin y scroll horizontal ═══
   La sección mide cuatro pantallas y adentro hay un contenedor
   pegajoso del alto de una. El scroll dentro de ese tramo es el que
   mueve la fila de tarjetas: no hay duración ni easing por tiempo,
   el avance ES el scroll. Sólo se anima `transform`.

   El alto del pegajoso descuenta el header, y su `top` lo iguala: si
   no, la columna izquierda arranca debajo del menú. */
.fu-prob{padding:clamp(30px,4vw,60px) 0 clamp(56px,5vw,78px)}


.fu-prob-fijo .fu-como-duo{width:100%}
/* Durante el pin la columna izquierda tiene que caber entera: se
   dimensiona contra el ALTO de la ventana, no contra el ancho. */
.fu-prob .fu-h3{font-size:clamp(21px,3.2vh,38px)}
.fu-prob .fu-como-p1{font-size:clamp(13px,1.7vh,16px);margin-top:clamp(10px,1.6vh,20px)}
.fu-prob .fu-como-p2{font-size:clamp(12px,1.45vh,14px);margin-top:clamp(8px,1.2vh,16px)}
.fu-prob .fu-pest{margin-top:clamp(14px,2.2vh,32px);gap:clamp(4px,.8vh,8px)}
.fu-prob .fu-pest button{padding:clamp(6px,1vh,9px) 18px;font-size:clamp(10.5px,1.35vh,12.5px)}
.fu-prob .fu-tarjeta{
  min-height:clamp(320px,62vh,540px);
  /* Opacidad plena. Antes era `var(--op,.55)` y el JS del carrusel
     escribía --op en cada tarjeta según su cercanía al borde del
     visor. Sin ese JS la variable no existe nunca y las cuatro
     quedaban al 55%: los colores no se veían como son. */
  opacity:1;
  transition:none;
}
.fu-prob .fu-pista{transition:none}

/* La barra de avance: sin números ni porcentaje. */
.fu-avance{
  height:2px;background:var(--linea);border-radius:2px;
  margin-top:clamp(16px,2.4vh,30px);overflow:hidden;
}
.fu-avance i{display:block;height:100%;width:0;background:var(--ac)}

/* Abajo de 768 no hay pin ni scroll secuestrado: carrusel de dedo y
   las pestañas pasan a puntos. Con reduced-motion, las cuatro
   tarjetas apiladas y nada se mueve. */
@media (max-width:767px){
  .fu-prob-pista{height:auto}
  .fu-prob-fijo{position:static;height:auto;display:block;overflow:visible}
  .fu-prob .fu-tarjeta{opacity:1;min-height:0}
  .fu-avance{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fu-prob-pista{height:auto}
  .fu-prob-fijo{position:static;height:auto;display:block;overflow:visible}
  .fu-prob .fu-visor{overflow:visible}
  .fu-prob .fu-pista{flex-direction:column;transform:none!important}
  .fu-prob .fu-tarjeta{flex-basis:auto;opacity:1;min-height:0}
  .fu-avance{display:none}
  .fu-prob .fu-pest{display:flex}
  .fu-prob .fu-puntos{display:none}
}

/* En pantallas bajas se recorta el AIRE, no el comparador: es el
   único bloque del hero que no puede quedar cortado. Dos escalones
   alcanzan para que a 1280x720 entren los dos botones de público, el
   titular entero, las acciones, el párrafo, el selector y las dos
   barras. */
@media (min-width:900px) and (max-height:860px){
  .fu-hero-centro{padding-block:clamp(10px,2vh,26px);gap:clamp(12px,1.8vh,22px)}
  .fu-hero-p{margin-bottom:10px;font-size:13px}
  .fu-barra{padding:clamp(13px,1.7vh,20px)}
  .fu-regla{margin:10px 0}
  .fu-pie3{padding-top:10px}
}
@media (min-width:900px) and (max-height:780px){
  .fu-h1{font-size:clamp(29px,5.2vh,52px)}
  .fu-hero-centro{padding-block:8px;gap:12px}
  .fu-sumate{padding:11px 26px;font-size:15px}
  .fu-borde{padding:10px 22px;font-size:15px}
  .fu-regla{display:none}
  .fu-pie3 b{font-size:12.5px}
}
/* En un teléfono el hero no tiene por qué entrar en una pantalla:
   scrollear es el gesto natural y comprimirlo dejaría el comparador
   ilegible. */
@media (max-width:899px){ .fu-hero{min-height:0} }

/* ── Piso de lectura y blanco táctil en móvil ── */
/* ── Los seis pilares ──
   El pilar a un lado y los seis títulos al otro, en viñetas. Con
   tarjetas la sección medía más de una pantalla; en lista entra
   entera, que es lo que hace que se lea de un vistazo. */
.pilares{
  display:grid;gap:clamp(24px,4vw,64px);align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:860px){
  .pilares{grid-template-columns:minmax(0,.22fr) minmax(0,1fr)}
}
.pilares-fig{margin:0;display:flex;justify-content:center}
.pilares-fig img{
  width:auto;height:clamp(240px,44vh,460px);max-width:100%;
  object-fit:contain;display:block;
}
.pilares-lista{
  list-style:none;margin:clamp(18px,2.4vw,30px) 0 0;padding:0;
  display:grid;gap:clamp(10px,1.4vh,16px);
}
@media (min-width:1100px){
  .pilares-lista{grid-template-columns:1fr 1fr;column-gap:clamp(20px,2.6vw,40px)}
}
.pilares-lista li{
  display:flex;align-items:center;gap:12px;
  font-family:var(--cuerpo);font-weight:600;
  font-size:clamp(16px,1.5vw,20px);line-height:1.25;color:var(--negro);
}
/* La estrellita entra como máscara: así toma el naranja de la marca
   en vez del negro con el que viene dibujada. */
.pilares-lista li::before{
  content:"";flex:0 0 auto;width:clamp(20px,1.9vw,26px);aspect-ratio:252/193;
  background:var(--naranja);
  -webkit-mask:url(/assets/estrellita.svg) center/contain no-repeat;
  mask:url(/assets/estrellita.svg) center/contain no-repeat;
}
.pilares-txt h2{max-width:14ch}
.pilares-nota{margin-top:clamp(18px,2.4vw,30px);max-width:62ch}
@media (max-width:859px){
  .pilares-fig img{height:clamp(180px,26vh,260px)}
}
@media (max-width:420px),(max-height:760px) and (max-width:859px){
  .pilares{gap:14px}
  .pilares-fig img{height:clamp(140px,19.5vh,190px)}
  .pilares-lista{margin-top:12px;gap:8px}
  .pilares-nota{margin-top:14px}
}

@media (max-width:900px){
  .fu-rot, .fu-ante, .fu-corte, .fu-disp, .fu-pie3 span,
  .fu-tres .fu-n, .fu-pest button{font-size:12.5px !important}
  .fu-como-p2, .fu-prob .fu-como-p2{font-size:13px !important}
  .fu-tab, .fu-pest button{padding-block:12px}
  .fu-link{display:inline-flex;align-items:center;min-height:40px}
}


/* ═══ Movimiento de la página ═══════════════════════════════════
   Registro atlético: corto, con curva de salida y sin rebotes. Todo
   lo de acá se apaga con `prefers-reduced-motion`, incluida la
   flotación de fondo. */

/* Los dibujos respiran. Cada uno con su duración y su retardo, o los
   seis suben y bajan como un bloque y se lee como un error. */
@keyframes fu-flota{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%    {transform:translate3d(0,-9px,0) rotate(var(--giro,1.2deg))}
}
.fu-dib{
  animation-name:fu-flota;
  animation-duration:var(--dur,9s);
  animation-timing-function:ease-in-out;
  animation-delay:var(--esp,0s);
  animation-iteration-count:infinite;
}
.fu-d1{--dur:9.5s;  --esp:0s;   --giro:1.4deg}
.fu-d2{--dur:11s;   --esp:.6s;  --giro:-1.6deg}
.fu-d3{--dur:8.5s;  --esp:1.2s; --giro:1.1deg}
.fu-d4{--dur:10.5s; --esp:.3s;  --giro:-1.2deg}
.fu-d5{--dur:7.5s;  --esp:.9s;  --giro:2.2deg}
.fu-d6{--dur:8s;    --esp:1.5s; --giro:-2deg}

/* Entrada del hero, en orden de lectura: primero los dibujos, apenas,
   y después el titular, la bajada y los botones. */
@keyframes fu-entra{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes fu-asoma{from{opacity:0;transform:scale(.94)}to{opacity:.9;transform:none}}
.fu-hero .fu-dib{
  animation-name:fu-asoma,fu-flota;
  animation-duration:900ms,var(--dur,9s);
  animation-timing-function:var(--sal),ease-in-out;
  animation-delay:0ms,calc(900ms + var(--esp,0s));
  animation-iteration-count:1,infinite;
  animation-fill-mode:both,none;
}
.fu-hero-bajada,.fu-hero-acc{
  animation-name:fu-entra;animation-duration:760ms;
  animation-timing-function:var(--sal);animation-fill-mode:both;
  animation-delay:var(--mot-d,0ms);
}

/* Los botones del hero responden al puntero */
@media (hover:hover) and (pointer:fine){
  .fu-sumate,.fu-borde{transition:transform var(--t-ui) var(--sal),filter var(--t-ui) var(--sal),background-color var(--t-ui) var(--sal),color var(--t-ui) var(--sal)}
  .fu-sumate:hover,.fu-borde:hover{transform:translateY(-2px)}
}

/* Las viñetas de los pilares entran escalonadas y la estrellita gira
   apenas al pasar el puntero por su línea. */
@keyframes fu-vineta{from{opacity:0;transform:translate3d(-10px,0,0)}to{opacity:1;transform:none}}
.pilares-lista li{
  animation-name:fu-vineta;animation-duration:560ms;
  animation-timing-function:var(--sal);animation-fill-mode:both;
  animation-delay:calc(var(--i,0) * 70ms);
}
.pilares-lista li::before{transition:transform var(--t-ui) var(--sal)}
@media (hover:hover) and (pointer:fine){
  .pilares-lista li:hover::before{transform:rotate(-14deg) scale(1.12)}
}

/* La imagen del pilar entra creciendo desde abajo */
@keyframes fu-pilar{from{opacity:0;transform:translate3d(0,20px,0) scale(.97)}to{opacity:1;transform:none}}
.pilares-fig{
  animation-name:fu-pilar;animation-duration:820ms;
  animation-timing-function:var(--sal);animation-fill-mode:both;
}

@media (prefers-reduced-motion:reduce){
  .fu-dib,.fu-hero .fu-dib,.fu-hero-bajada,.fu-hero-acc,
  .pilares-lista li,.pilares-fig{animation-name:none;opacity:1;transform:none}
  .fu-sumate:hover,.fu-borde:hover{transform:none}
  .pilares-lista li:hover::before{transform:none}
}


/* ── Las tarjetas de la página ──
   Mismo gesto en todas: se levantan apenas y el borde se marca. Es el
   registro que ya usa el resto del sitio; acá sólo se suma el
   escalonado de entrada, que lo da `data-escalonar` de motion.js. */
@media (hover:hover) and (pointer:fine){
  .fu-pag .malla > .celda{transition:transform var(--t-ui) var(--sal),border-color var(--t-ui) var(--sal),box-shadow var(--t-ui) var(--sal)}
  .fu-pag .malla > .celda:hover{transform:translateY(-3px);box-shadow:0 14px 34px -24px rgba(10,10,11,.5)}
  .fu-pag a.celda:hover{border-color:var(--naranja)}
  /* las tres columnas del «qué hacemos» y de las etapas */
  .fu-tres > div{transition:transform var(--t-ui) var(--sal)}
  .fu-tres > div:hover{transform:translateY(-3px)}
}
/* El número de cada frente crece apenas cuando entra en pantalla */
.fu-tres .fu-n{transition:transform 620ms var(--sal),color 620ms var(--sal)}
@media (hover:hover) and (pointer:fine){
  .fu-tres > div:hover .fu-n{transform:scale(1.08);color:var(--ac)}
}
@media (prefers-reduced-motion:reduce){
  .fu-pag .malla > .celda:hover,.fu-tres > div:hover,.fu-tres > div:hover .fu-n{transform:none}
}

/* ── Fila de enlaces al pie de los Datos ──────────────────────
   Lo que antes eran cinco tarjetas. Al lado de un panel de cifras
   dos rejillas seguidas se leen como una sola cosa desordenada. */
.dat-mas{
  display:flex;flex-wrap:wrap;gap:4px 28px;
  margin-top:clamp(28px,3.4vw,40px);padding-top:20px;
  border-top:1px solid var(--linea);
}
.dat-mas a{font-weight:600;font-size:15px;color:var(--naranja-texto)}
@media (max-width:900px){ .dat-mas a{font-size:16px} }

/* ── Más dibujos de la lámina, fuera del hero ──────────────────
   Mismo criterio que los seis del hero: van DETRÁS de todo, anclados a
   los BORDES de la pantalla, nunca bajo una línea de texto.

   Sólo de 1240px para arriba. El contenido está topado en 1240, así que
   el aire lateral medido es de 404px a 1920, 164 a 1440 y 144/78 a
   1280; abajo de eso quedan 50px y no entra nada sin tocar el texto.
   «El problema» no lleva ninguno: su pista horizontal se sale del
   contenedor y el aire derecho da negativo. */
.fu-deco{display:none}
.fu-deco-sec{position:relative;overflow:clip}
/* Lo mismo que hace el hero con sus dibujos: el contenido por encima. */
.fu-deco-sec > *:not(.fu-deco){position:relative;z-index:1}

@media (min-width:1240px){
  .fu-deco{
    display:block;position:absolute;z-index:0;
    width:clamp(50px,5vw,110px);height:auto;
    opacity:.12;pointer-events:none;
  }
  /* Las animaciones van propiedad por propiedad: el atajo `animation`
     con un var() en la duración se descarta entero y el dibujo queda
     quieto. Ya pasó con los del hero. */
  .fu-deco{
    animation-name:fu-flota;
    animation-duration:var(--dur,10s);
    animation-timing-function:ease-in-out;
    animation-delay:var(--esp,0s);
    animation-iteration-count:infinite;
  }
  .fu-a1{left:clamp(8px,1.6vw,34px); top:14%; --dur:9s;    --esp:0s;   --giro:1.3deg}
  .fu-a2{right:clamp(8px,1.6vw,34px);top:58%; --dur:11s;   --esp:.7s;  --giro:-1.5deg}
  .fu-a3{right:clamp(8px,1.6vw,34px);top:18%; --dur:8.5s;  --esp:.4s;  --giro:-1.8deg}
  .fu-a4{left:clamp(8px,1.6vw,34px); top:66%; --dur:10.5s; --esp:1.1s; --giro:1.1deg}
  .fu-a5{left:clamp(8px,1.6vw,34px); top:22%; --dur:9.5s;  --esp:.2s;  --giro:1.5deg; width:clamp(44px,4.2vw,92px)}
  .fu-a6{right:clamp(8px,1.6vw,34px);top:88%; --dur:8s;    --esp:.9s;  --giro:-2deg}
  .fu-a7{right:clamp(8px,1.6vw,34px);top:62%; --dur:10s;   --esp:.5s;  --giro:-1.2deg}
  .fu-a8{left:clamp(8px,1.6vw,34px); top:70%; --dur:9s;    --esp:1.3s; --giro:1.6deg}
  .fu-a9{right:clamp(8px,1.6vw,34px);top:60%; --dur:11.5s; --esp:.3s;  --giro:-1.4deg; width:clamp(44px,4.4vw,96px)}
  .fu-a10{left:clamp(8px,1.6vw,34px);top:68%; --dur:8.5s;  --esp:1s;   --giro:2deg}
  .fu-a11{right:clamp(8px,1.6vw,34px);top:70%;--dur:10s;   --esp:.6s;  --giro:-1.1deg}
  .fu-a12{left:clamp(8px,1.6vw,34px);top:62%; --dur:9.5s;  --esp:1.2s; --giro:1.7deg}
  .fu-a13{left:clamp(8px,1.6vw,34px);top:12%; --dur:11s;   --esp:.4s;  --giro:1.2deg}
  .fu-a14{right:clamp(8px,1.6vw,34px);top:72%;--dur:8s;    --esp:.8s;  --giro:-1.9deg}
}

/* Va al final a propósito: la regla que los anima tiene la misma
   especificidad (0,1,0), así que acá manda el orden. Puesta antes, los
   dibujos seguían flotando con «reducir movimiento» activado.
   Conservan su opacidad: apagarlos no es subirlos al 100%, que es lo
   que hace la regla compartida del hero. */
@media (prefers-reduced-motion:reduce){
  .fu-deco{animation-name:none;transform:none}
}

/* Cuatro tarjetas en una grilla de tres columnas dejaban dos celdas
   vacías mostrando el fondo de la sección como bloques grises.

   El primer intento fue rellenarlas con un ::after estirado hasta el
   final de la fila, que es lo que sí funciona en el panel de Datos.
   Acá no: ahí sobra UNA celda y el pseudoelemento la tapa; con DOS
   libres la colocación automática lo manda al último hueco y el del
   medio queda gris igual.

   La grilla pasa a dos columnas: cuatro tarjetas llenan dos filas
   exactas y no hay nada que tapar. */
/* La base es la misma que traía el style en línea, movida acá: en
   línea gana siempre y la media query de abajo no se aplicaba nunca.
   Abajo de 1100px nada cambia respecto de antes. */
.fu-malla-par{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
@media (min-width:1100px){
  .fu-malla-par{grid-template-columns:repeat(2,1fr)}
}

/* ── Las cuatro del problema, todas a la vista ──────────────────
   Antes iban en una pista horizontal pegada de 400vh: había que
   scrollear cuatro pantallas para verlas. Ahora entran juntas, así que
   son más finas y más bajas.
   Estas reglas van al final a propósito: anulan el `flex` y el
   `min-height` de .fu-tarjeta, que tienen la misma especificidad y se
   resuelven por orden. */
.fu-cuatro{
  display:grid;gap:clamp(10px,1vw,15px);
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(16px,2.2vw,28px);
}
.fu-cuatro > .fu-tarjeta{
  flex:initial;width:auto;
  min-height:0;
  padding:clamp(12px,1.1vw,17px);
}
/* El recorte es de AIRE primero: relleno, hueco y la ilustración. El
   cuerpo baja lo mínimo para que las cuatro entren en una pantalla de
   900px, que es lo que se pidió. El español manda: su texto es más
   largo que el inglés. */
.fu-cuatro .fu-ilu{max-height:clamp(56px,5vw,78px);margin-bottom:clamp(6px,.7vw,10px)}
.fu-cuatro .fu-tpie h4{font-size:clamp(14px,1.02vw,16px);line-height:1.14}
.fu-cuatro .fu-tpie p{font-size:clamp(11.5px,.85vw,13px);line-height:1.4;margin-top:5px}
.fu-cuatro .fu-insignia{font-size:clamp(11px,.9vw,13px)}
/* El bloque de arriba también cede aire: el titular y la bajada se
   llevaban casi 200px. */
.fu-prob .fu-h3{font-size:clamp(20px,2.5vh,32px)}
.fu-prob .fu-como-p1{font-size:clamp(13px,1.45vh,16px);max-width:80ch;margin-top:clamp(8px,1vh,14px)}
@media (max-width:1000px){ .fu-cuatro{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .fu-cuatro{grid-template-columns:1fr} }

/* Dos escalones por ALTO de pantalla, que es la convención del sitio
   para esto. A 1440x900 las cuatro entran con 14px de sobra, pero a
   800, 768 y 720 de alto faltaban entre 27 y 107px. Se recorta aire
   primero —relleno, hueco, ilustración— y el cuerpo sólo lo justo.

   **Van con `min-width:901px` y eso no es decorativo.** Sirven para
   que las CUATRO entren de lado en un monitor bajo. Un teléfono mide
   659px de alto útil, así que entraba en los dos escalones aunque ahí
   las tarjetas van APILADAS de a una y no compiten por el alto: el
   relleno caía a 9px y el texto terminaba lamiendo el borde de la
   tarjeta. */
@media (min-width:901px) and (max-height:860px){
  .fu-prob{padding:clamp(14px,2.2vw,28px) 0 clamp(40px,4vw,56px)}
  .fu-cuatro{margin-top:clamp(10px,1.3vw,16px)}
  .fu-cuatro .fu-ilu{max-height:clamp(40px,3.7vw,54px);margin-bottom:6px}
  .fu-cuatro > .fu-tarjeta{padding:clamp(10px,.9vw,13px)}
  .fu-cuatro .fu-tpie p{font-size:clamp(11px,.8vw,12.5px);line-height:1.36}
  .fu-prob .fu-h3{font-size:clamp(19px,2.2vh,28px)}
  .fu-prob .fu-como-p1{font-size:clamp(12.5px,1.3vh,15px)}
}
@media (min-width:901px) and (max-height:780px){
  .fu-prob{padding:clamp(12px,1.8vw,24px) 0 clamp(38px,3.6vw,52px)}
  .fu-cuatro{margin-top:clamp(10px,1.2vw,16px)}
  .fu-cuatro .fu-ilu{max-height:clamp(38px,3.4vw,52px)}
  .fu-cuatro > .fu-tarjeta{padding:clamp(9px,.85vw,13px)}
  .fu-cuatro .fu-tpie h4{font-size:clamp(13px,.95vw,15px)}
  .fu-cuatro .fu-tpie p{font-size:clamp(10.5px,.76vw,12px);line-height:1.34}
  .fu-prob .fu-como-p1{font-size:clamp(12px,1.2vh,14px)}
}

@media (min-width:821px){
  .fu-h1{max-width:min(17ch, calc(100vw - 480px))}
}

/* ── Qué hacemos · ocho tarjetas con foto ───────────────────────
   La foto sale de los PNG de la fundación, recortando la franja del
   texto horneado: el título y la bajada van como texto real encima,
   así la sección sigue traduciéndose y siendo accesible. */
.qh-malla{
  display:grid;gap:clamp(12px,1.4vw,20px);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1100px){ .qh-malla{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ .qh-malla{grid-template-columns:1fr} }

.qh-card{
  position:relative;overflow:hidden;
  border-radius:var(--radio);
  background:#0A0A0B;color:#fff;
  isolation:isolate;
}
.qh-foto{position:relative;overflow:hidden}
.qh-foto img{
  display:block;width:100%;height:clamp(150px,15vw,208px);
  object-fit:cover;object-position:50% 0%;
  transition:transform 620ms var(--sal);
}
/* El velo hace legible el texto sobre cualquier foto. */
.qh-card::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,10,11,0) var(--velo-ini,44%),
    rgba(10,10,11,var(--velo-med,.40)) 66%,
    rgba(10,10,11,var(--velo-fin,.90)) 100%);
}
/* Cada foto pide lo suyo: sobre las claras el blanco no se lee sin un
   velo fuerte, y sobre las oscuras un velo fuerte borra la imagen.
   Los valores salen del brillo medido de cada archivo (de 13 a 103
   sobre 255), no a ojo. */
.qh-card:nth-child(6){--velo-ini:30%;--velo-med:.62;--velo-fin:.96}  /* salud, la más clara */
.qh-card:nth-child(8){--velo-ini:36%;--velo-med:.52;--velo-fin:.94}  /* infraestructura */
.qh-card:nth-child(4){--velo-ini:38%;--velo-med:.50;--velo-fin:.93}  /* acompañamiento */
.qh-card:nth-child(2){--velo-ini:40%;--velo-med:.46;--velo-fin:.92}  /* comunidad */
.qh-card:nth-child(5){--velo-ini:52%;--velo-med:.26;--velo-fin:.86}  /* desarrollo humano, la más oscura */
.qh-card:nth-child(3){--velo-ini:50%;--velo-med:.30;--velo-fin:.88}  /* educación */
.qh-txt{
  position:relative;z-index:2;
  margin-top:calc(-1 * clamp(58px,6vw,84px));
  padding:0 clamp(14px,1.4vw,20px) clamp(16px,1.6vw,22px);
}
/* El filete naranja de las láminas originales. */
.qh-txt h3::before{
  content:"";display:block;width:34px;height:3px;background:var(--naranja);
  margin-bottom:10px;transition:width 420ms var(--sal);
}
.qh-txt h3{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(16px,1.35vw,21px);line-height:1.04;letter-spacing:-.01em;
  margin:0 0 6px;color:#fff;
}
.qh-txt p{font-size:clamp(12px,.92vw,13.5px);line-height:1.45;margin:0;color:rgba(255,255,255,.84)}

/* El destello: una banda clara que cruza en diagonal al pasar el mouse. */
.qh-card::after{
  content:"";position:absolute;inset:-40% -60%;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.30) 50%,transparent 58%);
  transform:translateX(-120%);opacity:0;
}
@media (hover:hover) and (pointer:fine){
  .qh-card{transition:transform 420ms var(--sal),box-shadow 420ms var(--sal)}
  .qh-card:hover{transform:translateY(-12px);box-shadow:0 30px 60px -28px rgba(0,0,0,.75)}
  .qh-card:hover .qh-foto img{transform:scale(1.10)}
  .qh-card:hover .qh-txt h3::before{width:64px}
  .qh-card:hover::after{animation:qh-brillo 900ms var(--sal) forwards}
}
@keyframes qh-brillo{
  from{transform:translateX(-120%);opacity:0}
  35%{opacity:1}
  to{transform:translateX(120%);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .qh-foto img,.qh-card{transition:none}
  .qh-card:hover{transform:none}
  .qh-card:hover .qh-foto img{transform:none}
  .qh-card:hover::after{animation:none}
}

/* El pie de la tarjeta traía fondo propio (--tpie), pensado para la
   tarjeta grande del carrusel. Con las cuatro fijas y chicas se leía
   como un cuadrado pegado debajo del texto: acá va transparente y la
   tarjeta queda de un solo color. */
.fu-cuatro .fu-tpie{background:transparent;padding:0}

/* Texto un poco más grande, que era el pedido, sin perder que la
   sección entre entera en una pantalla. */
.fu-cuatro .fu-tpie h4{font-size:clamp(15px,1.16vw,18px);line-height:1.16}
.fu-cuatro .fu-tpie p{font-size:clamp(12.5px,.95vw,14.5px);line-height:1.45;margin-top:6px}
.fu-prob .fu-h3{font-size:clamp(22px,2.9vh,36px)}
.fu-prob .fu-como-p1{font-size:clamp(14px,1.6vh,17.5px)}
.fu-prob .fu-ante{font-size:clamp(11.5px,1.2vh,13.5px)}

/* ── Las etapas · el recorrido de la lámina ─────────────────────
   Un banner por ámbito y tres flechas encadenadas. La punta se hace
   con clip-path y no con una imagen: escala sola a cualquier ancho y
   lo de adentro sigue siendo texto real. */
/* Con los dos ámbitos lado a lado cada uno dispone de media pantalla,
   así que todo baja de tamaño respecto de cuando iban apilados. */
.et-duo{
  display:grid;gap:clamp(18px,2.4vw,40px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
}
.et-ambito{padding:0}
.et-banner{
  border-radius:var(--radio-s);text-align:center;
  font-family:var(--cuerpo);font-weight:700;font-style:italic;
  text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(11px,.95vw,14px);
  padding:clamp(7px,.75vw,10px) clamp(12px,1.2vw,18px);
  margin:0;
}
.et-banner-claro{border:2px solid var(--tinta);color:var(--tinta);background:transparent}
.et-banner-oscuro{background:var(--tinta);color:#fff;border:2px solid var(--tinta)}

.et-fila{
  list-style:none;margin:clamp(10px,1.2vw,16px) 0 0;padding:0;
  display:grid;gap:clamp(8px,.9vw,14px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
/* En una columna las etapas se apilan y la primera quedaba pegada al
   banner de su ámbito, sin aire: en escritorio esa separación la daba
   el `gap` entre columnas, que acá ya no aplica. */
@media (max-width:760px){
  .et-fila{grid-template-columns:1fr;gap:clamp(22px,6vw,30px)}
  .et-fila.mt-24{margin-top:clamp(18px,4.5vw,26px)}
}
/* La barra es fija: cualquier cosa a la que se llegue por encaje o por
   ancla necesita reservar su alto, o queda debajo. Ponerlo sólo en el
   banner no alcanzaba, porque quien encaja es la fila y la sección. */
.et-banner,.et-fila,[data-capitulo="Las etapas"]{
  scroll-margin-top:calc(var(--header-h) + 20px);
}

.et-flecha{
  margin:0;
  background:var(--naranja);color:#fff;
  font-family:var(--cuerpo);font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(14px,1.25vw,18px);
  padding:clamp(7px,.8vw,11px) clamp(26px,2.6vw,38px) clamp(7px,.8vw,11px) clamp(14px,1.4vw,20px);
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
  text-align:center;
}
.et-fila-oscura .et-flecha{background:var(--tinta)}

.et-paso h3{
  font-family:var(--cuerpo);font-weight:600;font-style:italic;
  font-size:clamp(18px,1.7vw,25px);line-height:1.1;
  margin:clamp(10px,1.1vw,15px) 0 0;color:var(--tinta);
}
.et-edad{
  margin:2px 0 0;font-style:italic;
  font-size:clamp(16px,1.5vw,22px);line-height:1.1;color:var(--tinta);
}
.et-det{
  display:flex;gap:9px;align-items:flex-start;
  margin:clamp(9px,1vw,13px) 0 0;
  font-style:italic;font-size:clamp(12px,.95vw,14px);line-height:1.34;
  color:var(--gris);text-transform:uppercase;letter-spacing:.01em;
}
/* La diana de la lámina, dibujada con dos anillos y un punto. */
.et-diana{
  flex:0 0 auto;width:17px;height:17px;margin-top:1px;border-radius:50%;
  border:2px solid var(--naranja);
  background:
    radial-gradient(circle, var(--naranja) 0 2.5px, transparent 2.6px),
    radial-gradient(circle, transparent 0 4.5px, var(--naranja) 4.6px 6px, transparent 6.1px);
}
@media (prefers-reduced-motion:reduce){ .et-paso{transition:none} }

/* ── Las etapas, con los dos ámbitos en una sola banda ──────────
   Seis flechas a lo ancho: cada columna ronda los 190px en un
   contenedor de 1240, así que la tipografía y la punta se achican. */
.et-flecha{
  font-size:clamp(9.5px,.78vw,12px);
  padding:clamp(5px,.5vw,7px) clamp(16px,1.5vw,22px) clamp(5px,.5vw,7px) clamp(7px,.7vw,10px);
  clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
}
.et-paso h3{font-size:clamp(13px,1.05vw,16px);margin-top:clamp(6px,.7vw,9px)}
.et-edad{font-size:clamp(12px,.95vw,14.5px)}
.et-det{
  font-size:clamp(9.5px,.72vw,11px);line-height:1.3;
  margin-top:clamp(5px,.6vw,8px);gap:6px;
}
.et-diana{width:13px;height:13px;border-width:1.6px}

/* Apilado: en pantalla angosta los dos ámbitos no caben al lado, y ahí
   el texto vuelve a su tamaño cómodo. */
@media (max-width:900px){
  .et-duo{grid-template-columns:1fr;gap:clamp(26px,6vw,38px)}
  .et-banner{font-size:clamp(13px,3vw,16px);padding:9px 16px}
  .et-flecha{font-size:clamp(12px,2.8vw,15px);padding:7px 24px 7px 12px;
             clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%)}
  .et-paso h3{font-size:clamp(16px,4.2vw,20px)}
  .et-edad{font-size:clamp(15px,3.8vw,18px)}
  .et-det{font-size:clamp(11px,2.9vw,13px)}
  .et-diana{width:16px;height:16px;border-width:2px}
}
@media (max-width:640px){
  .et-fila{grid-template-columns:1fr;gap:clamp(18px,5vw,24px)}
}

/* «Las etapas» está topada en 1240px y su titular es largo: entre 1240
   y 1300 el corredor derecho baja a 56-78px y este dibujo necesita 87.
   No entra a ninguna altura —moverlo sólo cambia con qué choca—, así
   que ahí no se muestra. Mismo criterio que con los del hero. */
@media (max-width:1300px){
  [data-capitulo="Las etapas"] .fu-a7{display:none}
}

/* ── Las cuatro del problema, con foto real ─────────────────────
   La foto va a sangre en toda la tarjeta y el texto encima. No como
   banda superior: la tarjeta mide 358px de alto a 1440 y 285 a 1280,
   así que una banda dejaría una tira de foto de 40px que no se ve. */
.fu-cuatro > .fu-tarjeta.fu-con-foto{position:relative;isolation:isolate}
.fp-foto{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
  display:block;
}
/* El velo: sin él el blanco no se lee sobre estas fotos, que son claras
   (la franja donde cae el texto mide entre 45 y 147 de brillo sobre 255). */
.fu-cuatro > .fu-tarjeta.fu-con-foto::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,10,11,var(--velo-alto,.34)) 0%,
    rgba(10,10,11,var(--velo-med,.56)) 46%,
    rgba(10,10,11,var(--velo-fin,.93)) 100%);
}
.fu-cuatro > .fu-tarjeta.fu-con-foto > *:not(.fp-foto){position:relative;z-index:2}
/* La ilustración era la que empujaba el texto al pie; sin ella hay que
   sostener esa posición o el texto se sube. */
.fu-cuatro > .fu-tarjeta.fu-con-foto .fu-tpie{margin-top:auto}

/* Un velo por tarjeta, según el brillo medido de la franja del texto:
   147 la de las gradas, 136 la del jugador, 84 la cancha vacía y 45 la
   cenital. Uno solo dejaría ilegibles las claras o borraría la oscura. */
.fu-cuatro > .fu-tarjeta:nth-child(1){--velo-alto:.44;--velo-med:.68;--velo-fin:.95}
.fu-cuatro > .fu-tarjeta:nth-child(4){--velo-alto:.42;--velo-med:.64;--velo-fin:.94}
.fu-cuatro > .fu-tarjeta:nth-child(2){--velo-alto:.30;--velo-med:.50;--velo-fin:.90}
.fu-cuatro > .fu-tarjeta:nth-child(3){--velo-alto:.20;--velo-med:.36;--velo-fin:.84}

/* ── Quiénes somos ─────────────────────────────────────────────
   Es la lámina tal cual la pasó la fundación: la foto a sangre de
   fondo, un velo que va de opaco a transparente hacia la derecha, y
   el título en la banda azul. Sube desde /fundacion/nosotros/, donde
   vivía como cabecera de página.

   El velo NO es decorativo: la tinta tiene que leerse sobre cualquier
   zona de la foto, no sólo sobre la franja clara de la lámina. Va
   degradando hacia la derecha para que el protagonista no quede
   lavado. */
.fu-qs{
  position:relative;overflow:clip;
  background:#0A0A0B;
  padding-top:clamp(40px,6vw,84px);
  padding-bottom:clamp(44px,6vw,88px);
}
.fu-qs-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:60% 30%;
  display:block;z-index:0;
}
.fu-qs::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 34%,
    rgba(255,255,255,.58) 52%, rgba(255,255,255,.12) 70%, rgba(255,255,255,0) 84%);
}
.fu-qs > .env{position:relative;z-index:1;max-width:min(1240px,100%)}
/* La banda azul del título, como en la lámina. */
.fu-qs-banda{
  display:inline-block;
  background:var(--navy);color:var(--blanco);
  padding:clamp(8px,1.1vw,16px) clamp(16px,2.2vw,32px);
  text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(30px,5vw,64px);line-height:1.04;
}
/* `.mot-lineas:has(.lin){display:flow-root}` de prode.css impide que
   el margen negativo del último renglón se escape, pero cambia el
   TIPO de caja: un titular declarado `inline-block` pasa a bloque y
   toma el ancho entero. Esta banda medía 536px y pasó a 1112: dejó de
   abrazar su texto y quedó cruzando la CARA del chico de la foto.
   `inline-block` ya establece su propio contexto de formato, así que
   nunca necesitó esa regla. Es el único titular del sitio al que le
   pasa —se comprobó apagando la regla en las 21 rutas—, por eso el
   arreglo va acá y no allá. */
.fu-qs-banda.mot-lineas:has(.lin){display:inline-block}

.fu-qs-p{color:var(--tinta);max-width:34ch;margin-top:clamp(16px,2.2vw,26px)}

/* En angosto NO se superpone. Dos intentos fallaron cuando esto vivía
   en /nosotros/: el velo tapaba la foto entera, y al abrirlo el
   párrafo caía sobre el cuerpo del protagonista compitiendo con el
   logo de la camiseta. Acá se apila: la foto es una banda a sangre
   arriba y el texto va debajo sobre fondo sólido, legible sin
   depender de qué haya en la foto. La banda azul se mantiene, que es
   lo que identifica a la lámina. */
@media (max-width:820px){
  .fu-qs{background:var(--hueso);padding-top:0;padding-bottom:clamp(30px,6vw,46px)}
  .fu-qs::after{display:none}
  .fu-qs-img{
    position:relative;inset:auto;
    width:100vw;margin-left:calc(50% - 50vw);
    height:clamp(230px,40svh,340px);
    object-position:72% 16%;
    margin-bottom:clamp(18px,4vw,28px);
  }
  .fu-qs-banda{font-size:clamp(26px,8.4vw,40px)}
  .fu-qs-p{max-width:100%;margin-top:clamp(14px,3.4vw,22px)}
}

/* El conector, cuando cuelga ARRIBA de la sección a la que apunta.
   Vivía al pie de «El problema» porque esa era la sección anterior;
   con «Qué hacemos» en el medio quedaba apuntando a otra cosa. Ahora
   vive dentro de «Tres frentes», así que ningún reordenamiento lo
   vuelve a dejar huérfano. Los márgenes se invierten: el hueco lo
   abre por abajo, no por arriba. */
.fu-conector-arriba{
  margin-top:calc(-1 * clamp(30px,4vw,60px));
  margin-bottom:clamp(14px,2vw,28px);
}

/* ══ El modelo PRODE ═══════════════════════════════════════════════
   La lámina enfrenta dos modelos: la pirámide que deja afuera y la
   escalera que lleva a todos. La pirámide entra como dibujo —no tiene
   texto adentro— y la escalera se arma acá, con texto real: horneada
   habría dejado la sección sin traducir y sin nada que leerle a un
   lector de pantalla. */
.mp-duo{display:grid;gap:clamp(24px,3.4vw,56px);align-items:center;grid-template-columns:1fr}
@media (min-width:860px){
  .mp-duo{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}
.mp-fig{margin:0}
.mp-fig img{display:block;width:100%;max-width:380px;height:auto;margin-inline:auto}
.mp-h3{
  font-family:var(--display);font-weight:800;font-style:italic;
  font-size:clamp(26px,3.2vw,42px);line-height:1.02;letter-spacing:-.02em;
  text-transform:uppercase;
}
.mp-cita{
  font-weight:700;font-size:clamp(16px,1.5vw,20px);line-height:1.3;
  margin-top:clamp(8px,1vw,14px);
}
.mp-txt .parrafo{margin-top:clamp(12px,1.6vw,20px)}

/* El giro: la flecha y la frase que separa los dos modelos. */
.mp-giro{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-block:clamp(32px,5vw,64px);text-align:center;
}
.mp-giro img{display:block;width:auto;height:clamp(56px,7vw,92px)}
.mp-giro span{
  font-family:var(--cuerpo);font-weight:700;
  font-size:clamp(12px,1.1vw,14px);letter-spacing:.14em;text-transform:uppercase;
}

/* La escalera. Los rótulos laterales son texto, no imagen: el de la
   derecha va girado con `writing-mode`, que sigue siendo texto real
   para un lector de pantalla y para el buscador. */
.mp-escalera{
  position:relative;
  padding-left:clamp(0px,11vw,132px);
  padding-right:clamp(22px,2.6vw,34px);
}
.mp-cima{
  font-family:var(--cuerpo);font-weight:700;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gris);
  text-align:right;margin-bottom:8px;
}
.mp-peldanos{list-style:none;margin:0;padding:0;border-radius:var(--radio-chico);overflow:hidden}
.mp-peldano{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);
  /* La tinta la decide el peldaño: sobre el amarillo el blanco da
     1.76:1 y sobre el naranja 2.9:1. Es la misma regla del naranja
     del sitio —superficie clara, tinta encima— aplicada a los cinco
     colores que salieron de la lámina. */
  background:var(--c);color:var(--ct,#fff);
  padding:clamp(14px,1.9vw,24px) clamp(14px,2vw,26px);
  font-family:var(--cuerpo);font-weight:700;
  font-size:clamp(13.5px,1.25vw,17px);line-height:1.2;
  text-transform:uppercase;letter-spacing:.01em;
}
.mp-ico{flex:0 0 auto;width:clamp(26px,2.8vw,38px);height:clamp(26px,2.8vw,38px)}
/* El rótulo vertical de la derecha. */
.mp-lado{
  position:absolute;right:0;top:0;bottom:0;
  display:flex;align-items:center;
  writing-mode:vertical-rl;
  font-family:var(--cuerpo);font-weight:700;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta);
  margin:0;
}
/* Las dos llaves de la izquierda: qué peldaños son del Centro y
   cuáles de las escuelas. Desde 900px van como corchetes al costado;
   abajo de eso no hay ancho para eso y pasan a ser una leyenda con
   una pastilla de color, porque esconderlas deja el diagrama sin la
   mitad de lo que explica. */
.mp-llave{
  display:flex;align-items:center;gap:9px;margin:10px 0 0;
  font-family:var(--cuerpo);font-weight:700;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
}
.mp-llave::before{
  content:"";flex:0 0 auto;width:15px;height:15px;border-radius:var(--radio-xs);
}
.mp-llave-car::before{background:linear-gradient(#ED333E 50%,#3D519F 50%)}
.mp-llave-esc::before{background:linear-gradient(#F2BB32 34%,#EA7837 34% 67%,#AA5938 67%)}
@media (min-width:900px){
  .mp-llave{
    position:absolute;left:0;margin:0;color:var(--tinta);
    width:clamp(96px,10vw,120px);
    font-family:var(--cuerpo);font-weight:700;font-size:clamp(11.5px,1vw,13.5px);
    line-height:1.25;letter-spacing:.04em;
  }
  .mp-llave::before{display:none}
  .mp-llave::after{
    content:"";position:absolute;right:-14px;top:0;bottom:0;width:9px;
    border:1.5px solid var(--linea-fuerte);border-right:0;
  }
  /* Los dos primeros peldaños son el Centro; los tres de abajo, las
     escuelas. El reparto es 2/5 y 3/5 del alto de la lista. */
  .mp-llave-car{top:calc(1.6em + 8px);height:40%}
  .mp-llave-esc{bottom:0;height:60%}
}

/* ══ Los valores de un básquetbolista PRODE ════════════════════════
   Los diez en una sola sección. Cada uno conserva el color de su gajo
   en la rueda de la lámina, como filete: relleno entero, el texto
   dejaría de leerse sobre los tonos claros. */
.vc-lista{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(12px,1.4vw,18px);
  grid-template-columns:1fr;
}
@media (min-width:640px){ .vc-lista{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .vc-lista{grid-template-columns:repeat(3,minmax(0,1fr))} }
.vc-item{
  position:relative;
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio-chico);
  padding:clamp(18px,2vw,26px);
  padding-top:clamp(22px,2.4vw,30px);
  overflow:hidden;
}
.vc-item::before{
  content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--c);
}
.vc-n{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(24px,2.4vw,32px);line-height:1;
  color:var(--naranja-texto);margin-bottom:8px;
}
.vc-item h3{
  font-size:clamp(15.5px,1.35vw,18px);font-weight:700;line-height:1.25;
  letter-spacing:-.01em;margin:0 0 8px;
}
.vc-item p{font-size:clamp(14px,1.1vw,15.5px);line-height:1.55;color:var(--gris);margin:0}

@media (prefers-reduced-motion:reduce){
  .mp-giro img{transform:none}
}

/* ── Las cuatro tarjetas de «El problema», en celular ───────────
   Apiladas de a una tienen todo el ancho, así que el relleno puede
   ser el que pide el texto y no el que sobra. Antes heredaban los
   9px de los escalones por alto —pensados para cuatro columnas en un
   monitor bajo— y la última línea de cada párrafo terminaba pegada al
   borde de abajo y a la derecha.

   La tarjeta también crece: con `min-height:0` medía 175px y el
   bloque de texto ocupaba de borde a borde. */
@media (max-width:900px){
  .fu-cuatro{gap:clamp(14px,3.4vw,20px)}
  .fu-cuatro > .fu-tarjeta{
    padding:clamp(20px,5vw,28px);
    min-height:clamp(230px,58vw,300px);
  }
  .fu-cuatro .fu-tpie h4{font-size:clamp(17px,4.6vw,21px);line-height:1.2}
  .fu-cuatro .fu-tpie p{font-size:clamp(14px,3.7vw,16px);line-height:1.5;margin-top:8px}
  .fu-cuatro .fu-insignia{font-size:13px;margin:0 0 clamp(14px,3vw,20px)}
}

/* Los dos botones del hero, al lado y del mismo tamaño en celular.
   No son `.btn` —tienen su propia forma— así que la regla general de
   `prode.css` no los alcanza y va acá. «Descargar el brochure
   institucional» parte en dos renglones y `align-items:stretch` le
   iguala el alto al otro. */
@media (max-width:900px){
  .fu-hero-acc{
    display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:10px;
  }
  .fu-hero-acc > .fu-sumate,
  .fu-hero-acc > .fu-borde{
    width:100%;height:auto;min-height:56px;
    display:inline-flex;align-items:center;justify-content:center;
    white-space:normal;text-align:center;line-height:1.24;
    padding:12px 10px;font-size:14.5px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LOS VALORES · las once láminas, en diapositivas
   ═══════════════════════════════════════════════════════════════
   Sale de `los valores de un chico prode.pdf`: la portada negra y
   diez valores. La sección NO lleva encabezado suelto —el titular es
   la portada de la lámina, que es la primera diapositiva—, así que el
   carrusel ocupa la sección entera.

   De la lámina se usan sólo las diez fotos y el icono de la portada.
   El texto va como texto: horneado, esto se quedaba sin traducir y
   sin nada que leerle a un lector de pantalla, que es el mismo error
   ya documentado en «Qué hacemos» y en «El modelo PRODE».

   ── LA ESCALA ─────────────────────────────────────────────────
   Todo es múltiplo de `--vcu`, que vale UN PÍXEL DE LA LÁMINA. La
   lámina mide 1366x768, así que la unidad es el menor de lo que da
   el ancho y lo que da el alto disponible: así la composición entra
   entera y, sobre todo, LLENA la diapositiva en vez de dejar una
   franja de naranja vacía.

   Medidas del PDF: fondo #FD6500 —que es el `--naranja` del sitio,
   exacto—, marco de contorno blanco de x=44 a 1321, cinta 32px,
   nombre 106.7px, descripción y número 24px, y en la portada el
   icono 130px y el titular 117.3px.

   DOS DESVIACIONES, las dos por reglas duras del sitio:
   1. El titular de la portada va en Anton en la lámina. El sitio
      tiene DOS familias y no una tercera, así que va en Mukta, que es
      la display del sitio y la del logotipo. Las diez láminas de
      valores ya están en Poppins.
   2. El panel de la descripción en la lámina es gris CLARO con texto
      blanco encima: sobre una foto clara eso es ilegible. Acá va
      oscuro, y el contraste está medido sobre los píxeles pintados.  */

/* La sección es el carrusel y nada más. */
.vc{
  padding-block:0;
  min-height:100svh;padding-top:var(--header-h);
  display:grid;align-content:center;
  background:var(--blanco);
}
.vc-car{
  position:relative;
  width:100vw;margin-left:calc(50% - 50vw);
  /* La diapositiva se queda con la PANTALLA ENTERA menos la barra.

     Tenía dos cosas que la achicaban: un tope por ancho —`56.2vw`, la
     proporción de la lámina— que en una pantalla alta y angosta
     dejaba 218px de blanco al pie, y 96px reservados debajo para los
     mandos. Los mandos ahora van ENCIMA de la lámina, en una pastilla
     translúcida, así que no le sacan alto a nada. */
  --vc-h:calc(100svh - var(--header-h));
  /* Sin el tope por ancho, en una pantalla alta el alto disponible
     supera el de la lámina y `--vcu` la deja crecer: el titular y el
     nombre suben con ella en vez de quedarse chicos en un cuadro
     grande. El tope de 1.25 es para que en un monitor de 1600x1000 no
     se vaya a 133px de nombre. */
  --vcu:min(.0732vw, calc(var(--vc-h) / 768), 1.25px);
}
.vc-slides{
  list-style:none;margin:0;padding:0;
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  height:max(360px, var(--vc-h));
}
.vc-slides::-webkit-scrollbar{display:none}
.vc-slide{flex:0 0 100%;scroll-snap-align:center;min-width:0}

.vc-lam{
  background:var(--naranja);
  /* El relleno de abajo suma el alto de los mandos, que van encima:
     sin eso la pastilla tapa el número y la descripción. Pero no
     puede ser el doble del de arriba o el marco se ve empujado hacia
     la barra: eran 42 arriba contra 123 abajo. */
  padding:calc(34 * var(--vcu) + 22px) calc(44 * var(--vcu)) calc(22 * var(--vcu) + 78px);
  height:100%;display:flex;flex-direction:column;
}
/* 32px, Poppins Bold Itálica, versalitas, centrada */
.vc-cinta{
  margin:0 0 calc(26 * var(--vcu));
  font-family:var(--cuerpo);font-weight:700;font-style:italic;
  font-size:calc(32 * var(--vcu));letter-spacing:-.01em;
  text-transform:uppercase;text-align:center;color:var(--blanco);
}
.vc-marco{
  flex:1;display:flex;flex-direction:column;
  border:max(2px, calc(3 * var(--vcu))) solid var(--blanco);
  border-radius:calc(30 * var(--vcu));
  overflow:hidden;
}
/* 106.7px */
/* El bloque del nombre pesa el 38% del marco en la lámina y acá
   llegaba al 48%: el relleno que le había puesto —48 píxeles de
   diseño entre arriba y abajo— no está en el diseño, donde el nombre
   casi toca el borde del marco. Eso le comía a la FOTO, y la foto
   apretada es lo que se lee como una sección compactada. */
.vc-nombre{
  margin:0;flex:0 0 auto;
  display:grid;place-items:center;
  padding:calc(14 * var(--vcu)) calc(30 * var(--vcu)) calc(12 * var(--vcu));
  font-family:var(--cuerpo);font-weight:800;
  font-size:calc(106.7 * var(--vcu));line-height:1.02;letter-spacing:-.025em;
  text-transform:uppercase;text-align:center;color:var(--blanco);
  text-wrap:balance;
}
.vc-foto{
  position:relative;margin:0;flex:1 1 auto;
  overflow:hidden;isolation:isolate;
}
.vc-foto > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 45%;display:block;z-index:0;
}
/* 24px Poppins Bold en versalitas. El panel de la lámina es gris
   claro y su texto blanco: sobre la foto de la ensalada o la del
   amanecer eso no se lee. Acá va oscuro. */
.vc-desc{
  position:absolute;z-index:1;
  left:calc(26 * var(--vcu));bottom:calc(24 * var(--vcu));
  width:min(46ch,50%);
  background:rgba(10,10,11,.72);
  border-radius:var(--radio-s);
  padding:calc(16 * var(--vcu)) calc(20 * var(--vcu));
  font-family:var(--cuerpo);font-weight:700;
  font-size:calc(24 * var(--vcu));line-height:1.3;
  letter-spacing:-.005em;text-transform:uppercase;color:var(--blanco);
}
.vc-num{
  position:absolute;z-index:1;
  right:calc(30 * var(--vcu));bottom:calc(24 * var(--vcu));
  font-family:var(--cuerpo);font-weight:700;
  font-size:calc(24 * var(--vcu));color:var(--blanco);
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 10px rgba(10,10,11,.85);
}

/* ── La portada, en negro ───────────────────────────────────── */
/* El relleno de abajo suma el alto de los mandos, igual que el de la
   lámina naranja: sin eso la última línea de la bajada quedaba DEBAJO
   de la pastilla y cortada por el borde de la diapositiva. */
.vc-portada{
  background:var(--carbon);
  align-items:center;justify-content:center;text-align:center;
  gap:calc(22 * var(--vcu));
  padding:calc(34 * var(--vcu)) calc(60 * var(--vcu)) calc(22 * var(--vcu) + 78px);
}
.vc-ico{
  width:auto;height:calc(112 * var(--vcu));display:block;
}
/* La lámina usa Anton y el titular le entra en DOS renglones. Mukta
   ocupa un 30% más de ancho, así que acá son tres: a 117.3 el bloque
   pedía 371px y la bajada se salía de la diapositiva. A 100 entran los
   tres con aire. */
.vc-portada-t{
  margin:0;font-family:var(--display);font-weight:800;
  font-size:calc(100 * var(--vcu));line-height:1.0;letter-spacing:-.015em;
  text-transform:uppercase;color:var(--blanco);
  max-width:20ch;text-wrap:balance;
}
.vc-portada-t b{color:var(--naranja);font-weight:inherit}
/* 32px */
.vc-portada-p{
  margin:0;max-width:52ch;
  font-family:var(--cuerpo);font-weight:400;
  font-size:calc(30 * var(--vcu));line-height:1.36;
  color:rgba(255,255,255,.92);
}

/* ── Los mandos ─────────────────────────────────────────────────
   Las flechas y los puntos. Tocar cualquiera de los dos apaga el
   paso automático: es el mismo criterio que el carrusel del CAR
   —«lo manejo yo»— y lo resuelve el motor de `prode.js`. */
/* Los mandos van ENCIMA de la lámina, no debajo: debajo le sacaban
   96px de alto a la diapositiva en una pantalla donde lo que sobra es
   justamente el alto. La pastilla translúcida es lo que los hace
   legibles igual sobre el naranja que sobre el negro de la portada. */
.vc-mandos{
  position:absolute;z-index:2;
  left:50%;transform:translateX(-50%);
  bottom:clamp(14px,2.2vh,26px);
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,1.2vw,18px);
  background:rgba(10,10,11,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:99px;padding:8px 14px;
  max-width:calc(100vw - 2 * var(--pad));
}
.vc-nav{
  flex-shrink:0;width:46px;height:46px;border-radius:50%;
  border:1.5px solid var(--linea-fuerte);background:var(--blanco);
  color:var(--tinta);cursor:pointer;
  display:grid;place-content:center;
  transition:background-color var(--t-ui) var(--sal),border-color var(--t-ui) var(--sal),transform var(--t-ui) var(--sal);
}
.vc-nav svg{width:19px;height:19px;display:block}
@media (hover:hover) and (pointer:fine){
  .vc-nav:hover{background:var(--naranja);border-color:var(--naranja);transform:scale(1.06)}
}
.vc-nav:active{transform:scale(.94)}
/* El hueco es 17 por la misma cuenta que el carrusel del CAR: el
   blanco táctil sobresale 8px por lado, o sea 25 de ancho, y con un
   hueco menor los blancos de dos puntos vecinos se pisan. */
.vc-puntos{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:17px;
}
.vc-punto{
  position:relative;width:9px;height:9px;padding:0;border:0;
  border-radius:50%;background:rgba(255,255,255,.52);cursor:pointer;
  transition:background-color var(--t-ui) var(--sal),width var(--t-ui) var(--sal);
}
.vc-punto::after{content:"";position:absolute;inset:-16px -8px}
/* Crece de ANCHO y no con `transform`: escalado, su caja invadía el
   blanco táctil del vecino. */
.vc-punto[aria-current="true"]{background:var(--blanco);width:26px;border-radius:99px}
/* El contador sólo se ve donde los puntos no entran. */
.vc-cuenta{
  display:none;margin:0;min-width:5.5ch;text-align:center;
  font-family:var(--cuerpo);font-weight:700;font-size:14.5px;
  color:var(--blanco);font-variant-numeric:tabular-nums;
}

@media (max-width:820px){
  /* En angosto NO se usa `--vcu`. La unidad sale de la proporción de
     la lámina, que es apaisada: en un teléfono la pantalla es mucho
     más alta que ancha, el alto disponible manda, y multiplicar por
     esa unidad daba un nombre de valor de 109px que se salía del
     marco por los dos costados. Acá cada cuerpo vuelve a su `clamp`
     en píxeles, que es lo que hace el resto del sitio. */
  /* La diapositiva llena la sección, igual que en escritorio. Tenía
     un tope de 540px y le restaba 104 más, así que en un teléfono
     quedaban 52px de blanco muerto arriba y otros 52 abajo, entre la
     barra y el naranja: la sección medía 664 y la lámina 500. */
  .vc-car{--vc-h:max(420px, calc(100svh - var(--header-h)))}
  /* El relleno de abajo reserva el alto de la pastilla de los mandos
     —62px más su separación—. Sin eso las flechas caían ENCIMA de la
     descripción y el texto no se leía: era lo que se veía como dos
     cosas superpuestas. */
  .vc-lam{padding:clamp(14px,4vw,22px) clamp(12px,3.4vw,20px) calc(clamp(14px,3.6vw,20px) + 74px)}
  .vc-cinta{font-size:clamp(11px,2.9vw,14px);margin-bottom:clamp(10px,2.8vw,16px)}
  .vc-marco{border-radius:18px;border-width:2px}
  .vc-nombre{
    font-size:clamp(21px,6.2vw,32px);line-height:1.06;
    padding:clamp(14px,4vw,22px) clamp(12px,3.4vw,18px) clamp(12px,3.2vw,18px);
  }
  .vc-desc{
    left:12px;right:52px;bottom:12px;width:auto;
    padding:9px 11px;font-size:clamp(11px,3vw,13px);line-height:1.3;
  }
  .vc-num{right:14px;bottom:12px;font-size:clamp(13px,3.4vw,16px)}

  .vc-portada{gap:clamp(14px,4vw,22px);padding:clamp(20px,5.4vw,30px) clamp(16px,4.6vw,26px) calc(clamp(16px,4vw,24px) + 74px)}
  .vc-ico{height:clamp(54px,14vw,84px)}
  .vc-portada-t{font-size:clamp(25px,7.4vw,40px);line-height:1.04;max-width:16ch}
  .vc-portada-p{font-size:clamp(13.5px,3.7vw,16.5px);max-width:40ch}

  /* Once puntos con su blanco táctil miden 269px y con las dos
     flechas la fila pide 385: no entra en los 350 útiles de un
     teléfono. Quedan las flechas —que es el mando que se pidió— y un
     contador que dice dónde estás, que es lo que los puntos decían. */
  .vc-puntos{display:none}
  .vc-cuenta{display:block}
  .vc-mandos{gap:18px}
}

@media (prefers-reduced-motion:reduce){
  .vc-slides{scroll-behavior:auto}
  .vc-nav,.vc-punto{transition-duration:.01ms}
}

/* ── «Quiénes somos» como PORTADA ──────────────────────────────────
   La sección es la misma lámina de siempre; lo único que cambia es
   que ahora abre la página, y eso trae tres cosas que antes no
   necesitaba. */
.fu-qs-portada{
  /* 1 · Reservar el alto de la barra: es la primera sección, así que
     la barra fija le cae encima al titular. */
  padding-top:calc(var(--header-h) + clamp(28px,4.4vh,72px));
  padding-bottom:clamp(36px,5.2vh,80px);
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center;
}
.fu-qs-portada > .env{width:100%}
/* Los dos botones salen del hero viejo, que llevaba la clase `.fu`:
   ahí viven `--ac`, `--negro` y `--crema`, las variables con las que
   están escritos `.fu-sumate` y `.fu-borde`. Sin ellas los botones se
   dibujaban como texto suelto, sin fondo ni borde. Se declaran acá en
   vez de sumar `.fu` a la sección, porque `.fu` además pinta el fondo
   de crema y esta portada va sobre la foto. */
.fu-qs-portada{
  --negro:#0A0A0B;
  --crema:var(--hueso);
  --navy:#00294F;
  --ac:var(--naranja);
}
/* Y los botones se alinean con el texto, a la izquierda: `.fu-hero-acc`
   los centraba porque el hero viejo era una columna centrada. */
.fu-qs-portada .fu-hero-acc{justify-content:flex-start}
/* 2 · El velo blanco cubre la zona del texto, así que lo PINTADO
   arriba es claro: la barra va en tema claro. El `background` de la
   sección decide ese tema por luminancia, y estaba en casi negro
   —el color que se ve por detrás del velo— así que la barra salía
   oscura sobre blanco. */
.fu-qs-portada{background:var(--blanco)}
/* 3 · Los dos botones, con el aire de la lámina. */
.fu-qs-portada .fu-hero-acc{
  display:flex;flex-wrap:wrap;gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(20px,2.8vh,34px);
}
@media (max-width:820px){
  .fu-qs-portada{
    display:block;min-height:0;
    padding-top:var(--header-h);
    padding-bottom:clamp(30px,6vw,46px);
  }
  .fu-qs-portada .fu-hero-acc{margin-top:clamp(16px,4vw,24px)}
}

/* El titular de la portada NO es la banda azul de la lámina. Esa
   banda era el rótulo «Quiénes somos»: una palabra, 536px, que cabía
   a la izquierda de la cara del chico. Con el titular largo medía
   900px y volvía a cruzarla —el problema que ya está documentado dos
   veces en esta misma foto—. Va como titular suelto, en tinta y en
   caja baja, que es como estaba en el hero que esta portada
   reemplazó. */
.fu-qs-tit{
  display:block;
  background:none;padding:0;
  color:var(--tinta);text-transform:none;
  font-size:clamp(30px,4vw,54px);
  line-height:1.03;letter-spacing:-.015em;
}

/* La bajada va A LO ANCHO de la página, no en una columna angosta.
   Con `34ch` eran NUEVE renglones de 577px que bajaban por el pecho
   del protagonista; a lo ancho son tres y la sección respira. */
.fu-qs-portada .fu-qs-p{max-width:none}

/* Y por eso el contenido se apoya ABAJO, no al medio. Un bloque de
   texto que cruza los 1240px no puede ir centrado sobre la foto: la
   taparía entera. Apoyado al pie, el velo blanco sube sólo hasta
   donde empieza el titular y la mitad de arriba —que es donde está
   la cara— se sigue viendo. */
.fu-qs-portada{align-items:flex-end}

/* ── Que se vea la foto ─────────────────────────────────────────
   El límite acá no es el velo: es la GEOMETRÍA. En un cuadro de 13"
   la sección mide 589px y el bloque de texto 425, o sea el 72%. Con
   tinta oscura esa franja tiene que ir casi blanca para sostener el
   texto, así que a la foto le quedaba una tira de 164px y encima
   lavada por la capa horizontal.

   Para que la foto se vea, el texto tiene que ir ENCIMA de ella, y
   entonces el velo va OSCURO y el texto claro. Es el mismo
   tratamiento que ya tienen las portadas de /donar/ y de /becas/, así
   que no entra ningún lenguaje nuevo.

   Dos capas, las dos en píxeles y no en porcentaje, porque el
   contenido se apoya abajo: así la franja oscura cae siempre sobre el
   texto, mida lo que mida la pantalla. Con porcentajes, en un cuadro
   bajo el degradado arranca más arriba que el titular. */
.fu-qs-portada::after{
  background:
    /* arriba, lo justo para que se lea la barra sobre la foto */
    linear-gradient(180deg,
      rgba(10,10,11,.46) 0px,
      rgba(10,10,11,.26) 90px,
      rgba(10,10,11,0) 200px),
    /* abajo, la franja donde vive el texto */
    linear-gradient(0deg,
      rgba(10,10,11,.66) 0px,
      rgba(10,10,11,.64) 420px,
      rgba(10,10,11,.42) 510px,
      rgba(10,10,11,.12) 580px,
      rgba(10,10,11,0) 640px);
}

/* Todo esto es SÓLO de 821px para arriba. Abajo de eso la maqueta se
   apila —la foto pasa a ser una banda y el texto va debajo sobre
   fondo sólido— así que ahí no hay nada que superponer: el texto
   sigue en tinta y el fondo en hueso.

   El fondo de la sección, además, decide el tema de la barra por
   LUMINANCIA. En carbón la barra va oscura, que es lo que corresponde
   sobre la foto; dejarlo en carbón también en celular ponía logotipo
   blanco sobre fondo blanco y texto negro sobre fondo negro. */
@media (min-width:821px){
  .fu-qs-portada{background:var(--carbon)}

  /* La foto entra ENTERA de alto. Con `cover` el cuadro es mucho más
     apaisado que el archivo —2.32 contra 1.78 a 1366x657— así que el
     recorte se comía 179px, y repartidos al 30% eran 125px de ABAJO:
     justo la silla y las piernas. No se arregla moviendo el
     `object-position`: anclado abajo, esos 179px salen de arriba y el
     que se corta es el chico por la cabeza. La única salida es
     achicarla, a costa de dejar aire a los costados.

     Los pies ya vienen cortados en el archivo original: esto muestra
     todo lo que la foto tiene. */
  .fu-qs-portada .fu-qs-img{
    width:auto;height:100%;
    left:50%;right:auto;transform:translateX(-50%);
    object-fit:contain;object-position:50% 100%;
    /* Sin la máscara el rectángulo corta contra el carbón y la foto se
       lee como una estampilla pegada. Es lo mismo que ya se resolvió
       así en la portada de la agenda. */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  }
  .fu-qs-portada .fu-qs-tit{color:var(--blanco)}
  .fu-qs-portada .fu-qs-p{color:rgba(255,255,255,.93)}
  /* `.fu-borde` está escrito con `--negro` y `--crema`: cambiando esas
     dos variables EN EL BOTÓN queda blanco sobre la foto y se rellena
     de blanco al pasar el puntero. `.fu-sumate` no las toca, así que
     el naranja conserva su tinta —la regla que no se negocia—. */
  .fu-qs-portada .fu-borde{--negro:var(--blanco);--crema:var(--carbon)}
}
@media (max-width:820px){ .fu-qs-portada::after{display:none} }

/* En un cuadro de notebook de 13" la portada se pasaba por 17px. Se
   recorta el aire —nunca el cuerpo del texto— y entra. */
@media (min-width:821px) and (max-height:700px){
  .fu-qs-portada{
    padding-top:calc(var(--header-h) + clamp(18px,2.6vh,34px));
    padding-bottom:clamp(22px,3.2vh,40px);
  }
  .fu-qs-portada .fu-hero-acc{margin-top:clamp(14px,2vh,22px)}
  .fu-qs-portada .fu-qs-p{margin-top:clamp(12px,1.8vh,20px)}
}