/* ═══════════════════════════════════════════════════════════════
   FUNDACIÓN PRODE · sistema de diseño
   Blanco dominante · naranja principal · negro y navy de acento.

   Reglas duras que gobiernan este archivo:
   · Contraste mínimo 4.5:1 en texto de cuerpo, 3:1 en texto grande.
     El naranja #FD6500 da 2.98:1 contra blanco → NUNCA texto blanco
     sobre naranja, y nunca naranja para texto chico. Sobre naranja
     va tinta (#0A0A0B = 7.04:1).
   · transform y opacity para todo lo que se mueve. Nada de animar
     width/height/top/left.
   · Ninguna transición usa `all`. Se nombran las propiedades.
   · prefers-reduced-motion viaja con cada animación, no después.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────── TOKENS ─────────────────────────── */
:root{
  /* Superficies — el blanco sigue dominando, pero el negro entra
     como superficie plena en un par de actos para dar contraste.
     Sin eso el sitio era todo claro y se leía plano. */
  --blanco:#FFFFFF;
  /* El crema se fue del sitio (09·2026). `--hueso` era #FBF7F1 y
     hacía de superficie alterna; ahora es blanco, así que una banda
     `.s-hueso` y una `.s-blanco` son la misma cosa. El ritmo de la
     página ya no lo da un blanco un poco más cálido sino las bandas
     de COLOR PLENO —navy, carbón, naranja, lima— repartidas.

     El token se conserva en vez de borrarse porque lo nombran 44
     lugares del HTML y otros tantos del CSS: borrarlo era tocar 22
     páginas para no cambiar nada. */
  --hueso:#FFFFFF;
  --carbon:#0A0A0B;         /* superficie negra plena */

  /* Lo que ANTES resolvía el crema: separar una ficha del fondo sin
     dibujarle un borde. Es un tinte del navy al 4%, no un crema: el
     sitio no tiene amarillos de fondo. */
  --tinte:#F2F5F9;
  --tinte-fuerte:#E7EDF3;

  /* Las líneas también eran cálidas y sobre blanco se veían sucias.
     Salen del navy, como el tinte. */
  --linea:#DFE5EC;
  --linea-fuerte:#C4CEDA;

  /* Tinta */
  --tinta:#0A0A0B;          /* 19.9:1 sobre blanco */
  --gris:#4A4A52;           /* 8.6:1  sobre blanco — cuerpo secundario */
  --gris-suave:#6B6B74;     /* 5.4:1  sobre blanco — metadatos */

  /* Naranja — el principal */
  --naranja:#FD6500;        /* fondos, superficies grandes, cifras */
  --naranja-texto:#B84700;  /* 5.9:1 sobre blanco — para texto chico naranja */
  /* El naranja pleno sobre blanco da 2.98:1 y el umbral para texto
     grande es 3:1: reprueba por dos centésimas, también a 170px. Un
     1,5% más oscuro llega a 3.15:1 y al lado del pleno no se
     distingue. Es SÓLO para titulares y cifras: el texto chico sigue
     yendo en `--naranja-texto`, y los fondos en `--naranja`. */
  --naranja-display:#FA5E00; /* 3.15:1 sobre blanco — titulares y cifras */
  --naranja-hover:#E45A00;
  --naranja-claro:#FF8A3D;  /* 5.1:1 sobre navy — el naranja no llega ahí */

  /* Tinta SOBRE el naranja. El naranja lleva tinta encima, nunca
     blanco, y estos dos son las dos jerarquías de esa tinta. */
  --sobre-naranja:#3A1800;    /* 9.4:1 sobre el naranja — cuerpo */
  --sobre-naranja-2:#4A1F00;  /* rótulos y fechas de corte */

  /* Tinta sobre superficie oscura (carbón). Tres jerarquías, igual
     que en claro: titular, cuerpo y metadatos. */
  --sobre-oscuro:#DCDCE2;
  --sobre-oscuro-2:#B9B9C0;
  --sobre-oscuro-3:#8E8E98;

  /* Terracota del logotipo.
     El original (#BC917D) da 2.81:1 sobre blanco: no alcanza ni para
     un componente de interfaz. Se conserva tal cual donde el fondo es
     oscuro (5.23:1 sobre navy) y para la marca chica sobre blanco se
     usa la variante oscura del mismo tono, que llega a 4.36:1. */
  --terracota:#BC917D;
  --terracota-ui:#9E6E57;

  /* Lima — el acento vivo. Entró por la página de voluntariado y se
     quedó: es el quinto color del sitio. Lleva TINTA encima, igual
     que el naranja —negro sobre #F1FF4D da 16.4:1— y nunca texto
     blanco. No se usa como fondo de página entera fuera de
     voluntariado: es puntuación, no superficie. */
  --lima:#F1FF4D;
  --lima-hover:#E7F63C;

  /* Navy — acento escaso */
  --navy:#00294F;
  --navy-hondo:#001B34;
  --navy-claro:#93B4CF;     /* 6.1:1 sobre navy — texto secundario en navy */

  /* Tinta sobre navy, las mismas tres jerarquías. `--navy-claro` es
     un alias histórico de la segunda: se conserva porque lo usan
     varios componentes. */
  --sobre-navy:#C9DCEC;       /* 9.6:1 sobre navy — cuerpo */
  --sobre-navy-2:#93B4CF;     /* 6.1:1 — secundario */
  --sobre-navy-3:#DCE7F1;     /* la barra sobre fondo oscuro */

  /* Tipografía — las dos de la marca. Mukta es la del logotipo. */
  --display:'Mukta','Poppins',system-ui,sans-serif;
  --cuerpo:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Medidas */
  --header-h:68px;
  --pad:clamp(20px,4.5vw,64px);
  --ancho:1240px;
  /* ── Las formas ──
     Una sola familia: el cuadrado de esquinas redondeadas. Cuatro
     escalones y nada más; el sitio tenía veinticinco valores
     distintos —99px, 999px, 13px, 10px, 6px, 5px, 4px, 2px y siete
     `clamp` sueltos— y eso es lo que hacía que cada página pareciera
     de otro sitio.

     El 999px de las píldoras se fue con ellos: una píldora no es un
     cuadrado con las esquinas redondeadas. Lo único que sigue siendo
     redondo de verdad es lo que ES un círculo —puntos, avatares,
     íconos de red—, con `50%`. */
  --radio-xs:6px;           /* pastillas, etiquetas, controles chicos */
  --radio-s:10px;           /* botones, campos, fichas chicas */
  --radio-m:18px;           /* tarjetas, marcos de imagen */
  --radio-l:28px;           /* paneles grandes, tarjetas de foto */

  /* Los dos nombres viejos, para no reescribir 43 reglas. */
  --radio:var(--radio-m);
  --radio-chico:var(--radio-s);

  /* Curvas — de la tabla de Emil Kowalski, no inventadas */
  --sal:cubic-bezier(0.23,1,0.32,1);         /* ease-out fuerte: entradas y salidas */
  --entra-sale:cubic-bezier(0.77,0,0.175,1); /* movimiento en pantalla */

  /* Duraciones */
  --t-toque:140ms;   /* feedback de botón */
  --t-ui:200ms;      /* dropdowns, cambios de estado */
  --t-rev:760ms;     /* revelado editorial — marketing, puede ser largo */

  --sombra:0 1px 2px rgba(10,10,11,.05), 0 8px 24px -12px rgba(10,10,11,.18);
  --sombra-alta:0 2px 4px rgba(10,10,11,.06), 0 18px 44px -16px rgba(10,10,11,.24);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  /* `clip` y no `hidden`: hidden convierte al elemento en contenedor
     de scroll y eso ROMPE los position:sticky de adentro —el riel, la
     cifra clavada, las fichas apiladas—. clip recorta y no crea
     contenedor. El desborde vivía en html, no en body, así que
     ocultarlo sólo en body no alcanzaba. */
  overflow-x:clip;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--blanco);
  color:var(--tinta);
  font-family:var(--cuerpo);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

/* ── Superficies del navegador: también son parte del diseño ── */
::selection{background:var(--naranja);color:var(--tinta)}
:root{caret-color:var(--naranja); accent-color:var(--naranja)}
html{scrollbar-color:var(--linea-fuerte) var(--blanco); scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--blanco)}
::-webkit-scrollbar-thumb{background:var(--linea-fuerte);border:3px solid var(--blanco);border-radius:var(--radio-s)}
::-webkit-scrollbar-thumb:hover{background:var(--gris-suave)}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2.5px solid var(--naranja);
  outline-offset:3px;
  border-radius:2px;
}
:focus:not(:focus-visible){outline:none}

img,svg,video{display:block;max-width:100%;height:auto}
svg{flex-shrink:0}

/* Salto al contenido — primer tabulable de cada página */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--tinta);color:var(--blanco);
  padding:14px 22px;border-radius:0 0 var(--radio-chico) 0;
  font-size:14px;font-weight:600;text-decoration:none;
}
.saltar:focus{left:0}

/* ───────────────────────── TIPOGRAFÍA ───────────────────────── */
.display{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  line-height:.88;
  letter-spacing:-.035em;
  text-wrap:balance;
}

h1,h2,h3,h4{text-wrap:balance}

.t-hero{font-size:clamp(34px,7.4vw,116px);line-height:.86;letter-spacing:-.03em}
.t-seccion{font-size:clamp(34px,5.6vw,84px);line-height:.9}
.t-bloque{font-size:clamp(26px,3.4vw,52px);line-height:.94}

.cifra{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(64px,11vw,170px);
  line-height:.84;letter-spacing:-.035em;
  color:var(--naranja-display);
  font-variant-numeric:tabular-nums;
}

/* Mono: reservado a medición real — fechas de corte, montos, datos.
   No es un disfraz de "técnico". */
.dato{
  font-family:var(--cuerpo);font-weight:600;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris-suave);font-variant-numeric:tabular-nums;
}
.dato-fecha{
  font-family:var(--cuerpo);font-weight:500;
  font-size:12px;letter-spacing:.06em;color:var(--gris-suave);
  font-variant-numeric:tabular-nums;
}

.parrafo{
  max-width:min(680px,100%);
  font-size:clamp(18px,1.55vw,23px);
  line-height:1.66;color:var(--gris);
}
.parrafo.ancho{max-width:72ch}
.parrafo strong{color:var(--tinta);font-weight:600}
.bajada{
  font-size:clamp(19px,2vw,27px);
  line-height:1.45;color:var(--gris);
  max-width:34ch;font-weight:400;
}

/* ───────────────────────── ESTRUCTURA ───────────────────────── */
.env{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--pad)}

section{position:relative;padding-block:clamp(72px,10vw,148px)}
section.corta{padding-block:clamp(52px,7vw,92px)}

/* ── Que una sección entre en la pantalla de una notebook ──────────
   El relleno de arriba es `10vw`: a 1366px de ancho son 136 arriba y
   136 abajo, o sea **273px de una pantalla de 657**. El 42% del
   cuadro gastado en aire antes de que haya una sola palabra.

   El ancho no sirve para decidirlo: una notebook de 13" y un monitor
   de 1366x1080 tienen el mismo ancho y cuadros muy distintos. Lo que
   manda es el ALTO, y por eso los escalones van por `max-height`.

   Se recorta el AIRE, nunca la tipografía: es la regla del sitio, y
   achicar el texto para que entre una sección es cambiar lo
   importante por lo accesorio.

   Las páginas con escala propia —/donar/ y /fundacion/voluntariado/,
   que llevan su `--u`— ponen `padding-block:0` en sus secciones, así
   que esto no las toca. */
@media (min-width:901px) and (max-height:900px){
  section{padding-block:clamp(84px,9.6vh,124px)}
  section.corta{padding-block:clamp(60px,7vh,88px)}
}
@media (min-width:901px) and (max-height:760px){
  section{padding-block:clamp(74px,8.8vh,104px)}
  section.corta{padding-block:clamp(52px,6.2vh,74px)}
}
@media (min-width:901px) and (max-height:660px){
  section{padding-block:clamp(66px,8vh,92px)}
  section.corta{padding-block:clamp(46px,5.6vh,64px)}
}

/* ── Una sección, una pantalla ──
   Nada de ver el arranque de la siguiente mientras leés la actual.
   El alto es 100svh (no vh) porque en móvil la barra del navegador
   entra y sale, y con vh la sección salta cada vez.

   `justify-content:center` con `padding-block` en vez de altura fija:
   si el contenido crece más que la pantalla —traducciones largas,
   tipografía escalada por el sistema— la sección se estira en lugar
   de recortar. Ese es el "contenedor dinámico". */
body.fondo-vivo main > section[data-sec]{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:calc(var(--header-h) + clamp(28px,6vh,72px)) clamp(28px,6vh,72px);
}
body.fondo-vivo main > section.riel{display:block;padding-block:0}

/* Contenedor dinámico: la media se achica para que la sección entre
   en una pantalla, en vez de empujar el contenido fuera de cuadro.
   Se limita el ALTO y el ancho sigue por la relación de aspecto, así
   nunca queda una imagen cortada a la mitad al scrollear. */
/* `height` y no `max-height`: con max-height y width:auto la caja no
   tiene ancho del que partir y colapsa a nada —el render del Centro
   desaparecía y quedaba una rayita—. Con la altura fijada, el ancho
   sale de la relación de aspecto. */
body.fondo-vivo main > section[data-sec] .marco.ancho,
body.fondo-vivo main > section[data-sec] .comparador{
  height:min(34svh,320px);
  width:auto;max-width:100%;
  aspect-ratio:16/10;
  align-self:start;
}
@media (max-width:900px){
  body.fondo-vivo main > section[data-sec] .marco.ancho,
  body.fondo-vivo main > section[data-sec] .comparador{
    height:auto;width:100%;
  }
}

/* Notebooks y pantallas bajas: el alto es el recurso escaso, no el
   ancho. Se aprieta el aire vertical y baja un escalón la tipografía
   para que la sección siga entrando en una pantalla. */
@media (min-width:901px) and (max-height:1080px){
  body.fondo-vivo main > section[data-sec]{
    padding-block:calc(var(--header-h) + 22px) 22px;
  }
  /* En un cuadro de notebook esos 22+22 siguen siendo 44px que le
     faltan al contenido. */
  .duo{row-gap:14px}
  .duo > .texto{gap:11px}
  .duo > .titulo-duo{margin-bottom:2px}
  .hechos > div{padding-block:10px}
  .parrafo{font-size:clamp(16px,1.25vw,18px);line-height:1.6}
  .respuesta p{font-size:clamp(16.5px,1.3vw,19px);line-height:1.5}
  .respuesta{padding-left:clamp(16px,2vw,24px)}
  .cifra{font-size:clamp(56px,8vw,110px)}
  body.fondo-vivo main > section[data-sec] .marco.ancho,
  body.fondo-vivo main > section[data-sec] .comparador{max-height:min(28svh,250px)}
}


/* Fondos por acto — el navy es escaso a propósito */
.s-hueso{background:var(--hueso)}
.s-navy{background:var(--navy);color:var(--blanco)}
.s-navy-hondo{background:var(--navy-hondo);color:var(--blanco)}
.s-tinta{background:var(--tinta);color:var(--blanco)}
.s-naranja{background:var(--naranja);color:var(--tinta)}

.s-navy .parrafo,.s-navy-hondo .parrafo{color:var(--sobre-navy)}       /* 8.9:1 sobre navy */
.s-navy .dato,.s-navy-hondo .dato,
.s-navy .dato-fecha,.s-navy-hondo .dato-fecha{color:var(--navy-claro)}
.s-navy .cifra,.s-navy-hondo .cifra{color:var(--naranja-claro)}           /* 5.1:1 sobre navy */
.s-tinta .parrafo{color:var(--sobre-oscuro-2)}
.s-tinta .dato,.s-tinta .dato-fecha{color:var(--sobre-oscuro-3)}
.s-naranja .parrafo{color:var(--sobre-naranja)}                            /* 9.4:1 sobre naranja */
.s-naranja .dato,.s-naranja .dato-fecha{color:var(--sobre-naranja-2)}

/* `.bajada` y `.miga` sobre fondo oscuro. El sistema ya cubría
   `.parrafo`, `.dato` y `.cifra`, pero estos dos nunca habían caído en
   una sección oscura: heredaban `--gris` (#4A4A52) y sobre navy quedaban
   en 1.4:1, prácticamente invisibles. Mismos tonos ya calibrados. */
.s-navy .bajada,.s-navy-hondo .bajada{color:var(--sobre-navy)}          /* 8.9:1 sobre navy */
.s-tinta .bajada{color:var(--sobre-oscuro-2)}
.s-naranja .bajada{color:var(--sobre-naranja)}
.s-navy .miga,.s-navy-hondo .miga,.s-navy .miga a,.s-navy-hondo .miga a{color:var(--navy-claro)}
.s-tinta .miga,.s-tinta .miga a{color:var(--sobre-oscuro-3)}

/* ─────────────────── FONDO CONTINUO (portada) ───────────────────
   El lienzo 3D va DETRÁS del texto, así que las secciones no pueden
   llevar fondo propio: taparían la pelota. En su lugar el <body>
   tiene un único fondo que cambia de color al entrar cada acto.

   Efecto buscado, además de dejar ver la pelota: desaparecen los
   cortes duros entre bandas de color. El sitio pasa de ser una pila
   de secciones a un solo espacio que cambia de luz.               */
body.fondo-vivo{
  background-color:var(--fondo,#FFFFFF);
  transition:background-color 900ms var(--sal);
  --texto:var(--tinta);
  --texto-2:var(--gris);
  --texto-3:var(--gris-suave);
  --linea-viva:var(--linea);
}
body.fondo-vivo.tema-oscuro{
  --texto:#FFFFFF;
  --texto-2:var(--sobre-navy);          /* 9.6:1 sobre navy */
  --texto-3:var(--sobre-navy-2);          /* 6.1:1 sobre navy */
  --linea-viva:rgba(255,255,255,.20);
}
body.fondo-vivo main section{background:transparent}

/* Todo esto va SCOPEADO A `main`, y no es un detalle.

   El fondo vivo es del relato: cambia de color sección a sección y
   arrastra la tinta con él. El pie no participa —tiene su propia
   paleta oscura, fija— pero `body.fondo-vivo h3` (0,1,2) le ganaba a
   `.pie-cols h3` (0,1,1) y le imponía la tinta del momento: como la
   última sección es blanca, los títulos de las columnas quedaban
   NEGROS SOBRE NEGRO. Invisibles, ocupando su lugar. Sólo pasaba en
   la home, que es la única página con fondo vivo. */
body.fondo-vivo main h1,body.fondo-vivo main h2,body.fondo-vivo main h3,
body.fondo-vivo main .display,body.fondo-vivo main blockquote{
  color:var(--texto);transition:color 900ms var(--sal);
}
body.fondo-vivo main .parrafo,body.fondo-vivo main .bajada,
body.fondo-vivo main figcaption{color:var(--texto-2);transition:color 900ms var(--sal)}
body.fondo-vivo main .dato,body.fondo-vivo main .dato-fecha{color:var(--texto-3);transition:color 900ms var(--sal)}
body.fondo-vivo .hechos,body.fondo-vivo .hechos > div{border-color:var(--linea-viva);transition:border-color 900ms var(--sal)}
body.fondo-vivo .hechos dt{color:var(--texto-2)}
body.fondo-vivo .hechos dd{color:var(--texto)}
body.fondo-vivo .malla{background:var(--linea-viva);border-color:var(--linea-viva)}
body.fondo-vivo .malla > .celda{background:transparent}
body.fondo-vivo .malla > .celda h3{color:var(--texto)}
body.fondo-vivo .malla > .celda p{color:var(--texto-2)}
body.fondo-vivo .btn-secundario{color:var(--texto);border-color:var(--linea-viva)}
body.fondo-vivo .link{color:var(--texto)}
body.fondo-vivo .hero-hechos,body.fondo-vivo .hero-hechos > div{border-color:var(--linea-viva)}
body.fondo-vivo .marco{background:rgba(128,128,128,.10);border-color:var(--linea-viva)}

/* En modo oscuro el naranja pleno vibra sobre navy: se aclara para
   sostener el contraste sin perder el color de marca. */
body.fondo-vivo.tema-oscuro .cifra{color:var(--naranja-claro)}
body.fondo-vivo.tema-oscuro .respuesta{border-color:var(--naranja-claro)}

@media (prefers-reduced-motion:reduce){
  body.fondo-vivo,body.fondo-vivo *{transition-duration:1ms !important}
}

/* ───────────────── DÚO · texto de un lado, pelota del otro ─────
   La sección declara de qué lado va la pelota con data-lado, y el
   mismo atributo lo lee escena.js. Una sola fuente de verdad.    */
/* El titular ocupa el ancho completo y sólo el cuerpo va en media
   columna. Es como está en la referencia, y además es lo que evita
   que una palabra larga —"polideportivos" mide 708px a 92px de
   cuerpo— se salga de una columna de 556. */
/* 60/40: el texto se queda con la parte ancha y la pelota sangra por
   el borde de la franja angosta, mostrando sólo su mitad. Con el
   titular a ancho completo caía justo encima de la pelota. */
.duo{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  column-gap:clamp(24px,3vw,52px);
  row-gap:clamp(18px,2.6vw,32px);
  align-items:center;
  align-content:center;
}
[data-lado="izq"] .duo{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.duo > .titulo-duo{margin-bottom:clamp(2px,.6vw,10px)}
[data-lado="der"] .duo > .texto{grid-column:1}
/* Sin grid-row fijo: con las columnas ya declaradas, forzar la fila
   mandaba el párrafo a la fila 1 y el titular a la 2, invirtiendo el
   orden de lectura. */
[data-lado="izq"] .duo > .texto{grid-column:2}
[data-lado="der"] .duo > .titulo-duo{grid-column:1}
[data-lado="izq"] .duo > .titulo-duo{grid-column:2}
.duo > .texto{
  max-width:min(760px,100%);
  display:flex;flex-direction:column;justify-content:flex-start;
  gap:clamp(14px,1.8vw,24px);
}
/* La otra mitad queda vacía a propósito: ahí vive la pelota. */
.duo > .hueco{min-height:1px}

@media (max-width:900px){
  .duo,[data-lado="izq"] .duo{grid-template-columns:1fr;min-height:0}
  /* El titular también vuelve a la única columna. Si conserva
     grid-column:2 con una sola columna declarada, el navegador crea
     una columna implícita angosta y el titular se recorta ahí. */
  [data-lado="der"] .duo > .texto,
  [data-lado="izq"] .duo > .texto,
  [data-lado="der"] .duo > .titulo-duo,
  [data-lado="izq"] .duo > .titulo-duo{grid-column:1;grid-row:auto}
  .duo > .hueco{display:none}
}

/* Regla fina de separación */
.regla{height:1px;background:var(--linea);border:0;margin:0}
.s-navy .regla,.s-navy-hondo .regla{background:rgba(255,255,255,.16)}
.s-tinta .regla{background:rgba(255,255,255,.14)}

/* ─────────────────────────── HEADER ─────────────────────────── */
header.barra{
  position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:60;
  display:flex;align-items:center;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-ui) var(--sal),background var(--t-ui) var(--sal);
}
header.barra.pegado{border-bottom-color:var(--linea)}
/* En la portada el tema lo manda el fondo continuo del body, para que
   header y fondo no puedan quedar desfasados. En el resto de las
   páginas sigue mandando la clase .oscuro que calcula el propio header. */
header.barra.oscuro,
body.tema-oscuro header.barra{
  background:rgba(0,27,52,.86);
  border-bottom-color:rgba(255,255,255,.14);
}

.barra-int{
  width:100%;max-width:var(--ancho);margin-inline:auto;
  padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
/* En pantallas anchas la barra se suelta de la grilla de contenido.

   Con el tope de 1240px, en un monitor de 1440 la navegación quedaba
   a 220px del borde: leída como centrada, no como barra. El contenido
   sigue topado —una línea de texto de 1400px no se lee—, pero una
   barra de navegación sí puede ir de punta a punta, y así el logo se
   apoya en un margen y los botones en el otro. */
@media (min-width:1241px){
  .barra-int{max-width:none;padding-inline:clamp(28px,3.2vw,52px)}
}
/* El logotipo es la imagen real de la marca, sin animación.
   Se cargan las dos versiones y se cambia cuál se muestra según el
   fondo: sobre navy o negro, la variante de texto blanco. */
.marca{
  display:inline-flex;align-items:center;
  text-decoration:none;line-height:0;
  position:relative;
}
.marca-logo{
  width:auto;height:clamp(30px,3.4vw,38px);
  transition:opacity var(--t-ui) var(--sal);
}
.marca-logo.claro{position:absolute;left:0;top:0;opacity:0;pointer-events:none}
header.oscuro .marca-logo,
body.tema-oscuro header .marca-logo{opacity:0}
header.oscuro .marca-logo.claro,
body.tema-oscuro header .marca-logo.claro{opacity:1}
@media (hover:hover) and (pointer:fine){
  .marca:hover .marca-glifo{transform:rotate(38deg)}
}

.nav{display:flex;align-items:center;gap:clamp(8px,1.6vw,28px)}
.nav-enlaces{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px)}
/* `.enlace` y no `a.enlace`: los desplegables son <button>, y con el
   selector atado a la etiqueta se quedaban afuera de TODO —tamaño de
   letra, color en tema oscuro y subrayado naranja—. Se veían más
   grandes que el resto del navbar porque heredaban el cuerpo de 17px. */
.nav .enlace{
  font-size:14.5px;font-weight:500;color:var(--tinta);text-decoration:none;
  position:relative;padding-block:6px;
  font-family:var(--cuerpo);line-height:1.6;
  transition:color var(--t-ui) var(--sal);
}
header.oscuro .nav .enlace,
body.tema-oscuro header .nav .enlace{color:var(--sobre-navy-3)}
.nav .enlace::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--naranja);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-ui) var(--sal);
}
@media (hover:hover) and (pointer:fine){
  .nav .enlace:hover::after{transform:scaleX(1)}
}
.nav .enlace[aria-current]::after{transform:scaleX(1)}

/* ── Selector de idioma ── */
.idioma{display:flex;border:1px solid var(--linea);border-radius:var(--radio-xs);overflow:hidden}
.idioma button{
  background:none;border:0;cursor:pointer;
  font-family:var(--cuerpo);
  font-size:10.5px;letter-spacing:.1em;
  padding:7px 9px;color:var(--gris-suave);
  transition:background-color var(--t-ui) var(--sal),color var(--t-ui) var(--sal);
}
.idioma button[aria-pressed="true"]{background:var(--naranja);color:var(--tinta)}
header.oscuro .idioma,
body.tema-oscuro header .idioma{border-color:rgba(255,255,255,.3)}
header.oscuro .idioma button,
body.tema-oscuro header .idioma button{color:var(--sobre-navy-2)}
header.oscuro .idioma button[aria-pressed="true"],
body.tema-oscuro header .idioma button[aria-pressed="true"]{background:var(--naranja);color:var(--tinta)}

/* ── Menú móvil ── */
/* Dos clases, no una: el botón lleva `class="btn ... btn-menu"` y
   `.btn` declara `display:inline-flex` MÁS ABAJO en este archivo. Con
   la misma especificidad gana el que viene después, así que el
   `display:none` no tenía efecto y las tres rayas aparecían también
   en escritorio, al lado de un menú que ya estaba entero a la vista. */
.btn.btn-menu{display:none}
.btn-menu svg{width:22px;height:22px}
.menu-movil{
  position:fixed;inset:var(--header-h) 0 0;z-index:55;
  background:var(--blanco);padding:18px var(--pad) 40px;overflow-y:auto;
  /* Que el gesto no arrastre la página de atrás al llegar al final. */
  overscroll-behavior:contain;
}
.menu-movil nav{display:flex;flex-direction:column}

/* ───────────────────────── BOTONES ──────────────────────────
   El naranja lleva tinta encima, no blanco: 7.04:1 contra 2.98:1.
   Es la decisión que hace que el naranja pueda ser el principal
   sin reprobar accesibilidad.                                   */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:15px;font-weight:650;letter-spacing:-.005em;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  border:1.5px solid transparent;border-radius:var(--radio-chico);
  padding:13px 24px;
  transition:transform var(--t-toque) var(--sal),
             background-color var(--t-toque) var(--sal),
             border-color var(--t-toque) var(--sal),
             color var(--t-toque) var(--sal),
             box-shadow var(--t-toque) var(--sal);
}
.btn svg{width:17px;height:17px}

.btn-primario{background:var(--naranja);color:var(--tinta);box-shadow:var(--sombra)}
.btn-secundario{background:transparent;color:var(--tinta);border-color:var(--linea-fuerte)}
.btn-fantasma{background:transparent;color:var(--tinta);border-color:transparent;padding-inline:6px}
/* Botón lleno para fondo oscuro: blanco con tinta navy, 15.3:1. Es
   el de las seis puertas de /contacto/ y sirve para cualquier
   sección en navy o en carbón. */
.btn-claro{background:var(--blanco);color:var(--navy);box-shadow:var(--sombra)}

header.oscuro .btn-secundario,
body.tema-oscuro header .btn-secundario,
body.tema-oscuro header .btn-fantasma{color:var(--blanco);border-color:rgba(255,255,255,.34)}
.s-navy .btn-secundario,.s-navy-hondo .btn-secundario,.s-tinta .btn-secundario{
  color:var(--blanco);border-color:rgba(255,255,255,.34);
}
.s-naranja .btn-primario{background:var(--tinta);color:var(--blanco)}
.s-naranja .btn-secundario{color:var(--tinta);border-color:rgba(10,10,11,.32)}

@media (hover:hover) and (pointer:fine){
  .btn-claro:hover{background:#EEF2F7}
  .btn-primario:hover{background:var(--naranja-hover);transform:translateY(-2px);box-shadow:var(--sombra-alta)}
  .btn-secundario:hover{border-color:var(--tinta);transform:translateY(-2px)}
  .s-navy .btn-secundario:hover,.s-navy-hondo .btn-secundario:hover,
  .s-tinta .btn-secundario:hover{border-color:var(--blanco)}
  .btn-fantasma:hover{color:var(--naranja-texto)}
}
.btn:active{transform:translateY(0) scale(.985)}

.btn-grande{font-size:17px;padding:18px 36px;border-radius:var(--radio-s)}
.btn-grande svg{width:19px;height:19px}
.btn-bloque{width:100%}

.par-btn{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Enlace de texto con subrayado propio */
.link{
  color:var(--tinta);text-decoration:none;font-weight:550;
  border-bottom:1.5px solid var(--naranja);padding-bottom:1px;
  text-underline-offset:4px;
  transition:color var(--t-ui) var(--sal),border-color var(--t-ui) var(--sal);
}
@media (hover:hover) and (pointer:fine){ .link:hover{color:var(--naranja-texto)} }
.s-navy .link,.s-navy-hondo .link,.s-tinta .link{color:var(--blanco)}

/* ─────────────────────────── MOTION ─────────────────────────
   Un solo gesto de entrada, no un efecto distinto por sección.
   Sube 22px y aparece, con escalonado de 60ms entre hermanos.  */
.rev{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity var(--t-rev) var(--sal),transform var(--t-rev) var(--sal);
  transition-delay:var(--rev-d,0ms);
  will-change:opacity,transform;
}
.rev.visto{opacity:1;transform:none;will-change:auto}

/* Palabras del titular: suben desde su propia caja */
.pal{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.pal > i{
  display:inline-block;font-style:inherit;
  transform:translate3d(0,105%,0);
  transition:transform 820ms var(--sal);
  transition-delay:var(--pal-d,0ms);
}
.rev-pal.visto .pal > i{transform:none}

@media (prefers-reduced-motion:reduce){
  /* Menos y más suave, no cero: se conserva el fundido, se quita el desplazamiento */
  .rev{transform:none;transition:opacity 300ms ease}
  .pal{overflow:visible}
  .pal > i{transform:none;opacity:0;transition:opacity 300ms ease}
  .rev-pal.visto .pal > i{opacity:1}
  .btn,.marca-glifo,.nav a.enlace::after{transition-duration:1ms}
}

/* ───────────────────────── TARJETAS ─────────────────────────
   Elevación declarada una sola vez: borde O sombra, nunca ambos. */
.malla{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.malla-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* `.malla` dibuja UNA caja con divisiones de 1px: es una tabla de
   celdas, no tarjetas. `.malla-sueltas` las separa y le da a cada una
   su propio borde, para cuando son dos bloques independientes. */
body.fondo-vivo .malla.malla-sueltas,
.malla.malla-sueltas{
  gap:clamp(14px,1.6vw,20px);background:transparent;border:0;
  border-radius:0;overflow:visible;
}
body.fondo-vivo .malla.malla-sueltas > .celda,
.malla.malla-sueltas > .celda{border:1px solid var(--linea);border-radius:var(--radio)}
.malla-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.malla-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.malla > .celda{
  background:var(--blanco);padding:clamp(22px,2.4vw,32px);
  transition:background-color var(--t-ui) var(--sal);
}
/* Cuando la celda ES el enlace: sin esto hereda el azul y el subrayado
   del navegador, y el título de la tarjeta sale azul. */
.malla > a.celda{text-decoration:none;color:inherit;display:block}
@media (hover:hover) and (pointer:fine){
  .malla > a.celda:hover .ir svg{transform:translateX(3px)}
}
@media (hover:hover) and (pointer:fine){
  .malla > .celda:hover{background:rgba(253,101,0,.05)}
}
.s-hueso .malla > .celda{background:var(--hueso)}
.malla > .celda h3{font-size:17.5px;font-weight:650;margin-bottom:8px;letter-spacing:-.01em}
.malla > .celda p{font-size:15.5px;line-height:1.58;color:var(--gris)}
.celda-icono{width:26px;height:26px;color:var(--naranja);margin-bottom:16px}

/* ─────────────────────── LISTA DE HECHOS ────────────────────
   Para datos verificables: etiqueta a la izquierda, valor a la derecha. */
/* La sección de la gestión lleva titular, bajada, dos puntos y un
   cuadro de cinco filas: es la más cargada de la home. En pantallas
   bajas y en celular se recorta el AIRE —relleno de las filas y
   separaciones—, nunca el cuerpo del texto. */
@media (max-width:900px),(max-height:780px){
  .sec-gestion .hechos > div{padding-block:8px}
  .sec-gestion .ges-puntos{margin-top:12px;gap:7px}
  .sec-gestion .parrafo{margin-bottom:0}
  .sec-gestion .duo{gap:clamp(12px,2vw,22px)}
}
/* Pantallas de 740 px de alto o menos: un escalón más de recorte de
   aire. El cuerpo del texto no se toca. */
@media (max-height:745px){
  .sec-gestion .hechos > div{padding-block:6px}
  .sec-gestion .ges-puntos{margin-top:10px;gap:6px}
  .sec-gestion h2{margin-bottom:4px}
}
/* Teléfonos chicos: el cuadro de cinco filas es lo que sobra de alto.
   Se recorta el aire al mínimo y los dos puntos se juntan; el cuerpo
   del texto sigue en su piso de lectura. */
@media (max-width:420px){
  .sec-gestion{padding-block:clamp(44px,7vh,72px)}
  .sec-gestion .hechos > div{padding-block:5px}
  .sec-gestion .ges-puntos{margin-top:9px;gap:5px}
  .sec-gestion .ges-puntos li{line-height:1.4}
  .sec-gestion .parrafo{line-height:1.5}
  .sec-gestion .duo{gap:10px}
}

/* Las dos tarjetas del modelo son texto largo: en celular la
   separación de fábrica las empujaba 29px fuera de la pantalla. */
@media (max-width:900px){
  .sec-modelo .malla{margin-top:20px}
  .sec-modelo .parrafo{margin-bottom:0}
  .sec-modelo .celda{padding:16px 18px}
}

/* ── El compromiso del chico PRODE ──
   Diez puntos numerados, en dos columnas cuando hay ancho. El número
   va en la display y en naranja: es lo que ordena la lectura, no una
   viñeta. */
.compromiso{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(14px,2vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  counter-reset:comp;
}
.compromiso > li{display:flex;gap:16px;align-items:flex-start}
.comp-n{
  font-family:var(--display);font-weight:800;font-size:18px;line-height:1.25;
  color:var(--naranja-texto);flex:0 0 auto;min-width:2ch;
  font-variant-numeric:tabular-nums;
}
.compromiso h3{font-size:17.5px;font-weight:650;letter-spacing:-.012em;margin-bottom:4px}
.compromiso p{font-size:15.5px;line-height:1.58;color:var(--gris)}
@media (max-width:900px){ .compromiso p{font-size:16px} }

/* Los dos puntos que van arriba del cuadro de hechos: rótulo en
   tinta y el detalle en gris, en una línea cada uno. */
.ges-puntos{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.ges-puntos li{font-size:15.5px;line-height:1.5;color:var(--gris)}
.ges-puntos b{color:var(--tinta);font-weight:650}
@media (max-width:900px){ .ges-puntos li{font-size:16px} }

.hechos{border-top:1px solid var(--linea)}
.hechos > div{
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;
  justify-content:space-between;
  padding-block:17px;border-bottom:1px solid var(--linea);
  transition:padding-inline var(--t-ui) var(--sal),background-color var(--t-ui) var(--sal);
}
@media (hover:hover) and (pointer:fine){
  .hechos > div:hover{background:rgba(128,128,128,.05);padding-inline:10px}
}
.hechos dt,.hechos .et{font-size:15px;color:var(--gris);flex:1 1 220px}
.hechos dd,.hechos .vl{font-size:16px;font-weight:600;color:var(--tinta);text-align:right;font-variant-numeric:tabular-nums}
.s-navy .hechos,.s-navy-hondo .hechos{border-top-color:rgba(255,255,255,.16)}
.s-navy .hechos > div,.s-navy-hondo .hechos > div{border-bottom-color:rgba(255,255,255,.16)}
.s-navy .hechos dt,.s-navy-hondo .hechos dt,
.s-navy .hechos .et,.s-navy-hondo .hechos .et{color:var(--sobre-navy)}
.s-navy .hechos dd,.s-navy-hondo .hechos dd,
.s-navy .hechos .vl,.s-navy-hondo .hechos .vl{color:var(--blanco)}

/* ────────────────────────── FOOTER ──────────────────────────── */
footer.pie{background:var(--tinta);color:var(--blanco);padding-block:clamp(60px,8vw,96px) 36px}
.pie-marca{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(52px,13vw,180px);line-height:.86;letter-spacing:-.035em;
  margin-bottom:clamp(40px,5vw,64px);
  color:var(--blanco);
}
.pie-cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:36px;padding-top:36px;border-top:1px solid rgba(255,255,255,.16);
}
/* La columna de contacto es más ancha que las demás: el correo tiene
   que entrar en una línea y a 15px pide 223px, mientras que una
   columna repartida en partes iguales daba 194. Sólo arriba de
   1100px, que es donde las cinco columnas van en fila. */
@media (min-width:1100px){
  .pie-cols{grid-template-columns:repeat(4,minmax(150px,1fr)) minmax(240px,.9fr)}
}
.pie-cols h3{
  font-family:var(--cuerpo);
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--sobre-oscuro-3);margin-bottom:15px;font-weight:400;
}
.pie-cols a,.pie-cols p{
  display:block;color:var(--sobre-oscuro);text-decoration:none;
  font-size:15px;line-height:1.95;
  transition:color var(--t-ui) var(--sal);
}
@media (hover:hover) and (pointer:fine){ .pie-cols a:hover{color:var(--naranja)} }
/* ── Las pelotas del pie ──
   Detalle, no ilustración: van detrás de todo, en los huecos que deja
   el contenido —el costado derecho del logotipo gigante y el margen
   izquierdo de la franja legal—, con el trazo apenas visible. Nunca
   reciben el puntero y nunca tapan una línea de texto: si el ancho no
   deja margen libre, desaparecen. */
.pie{position:relative;overflow:hidden}
.pie-pelota{
  position:absolute;z-index:0;pointer-events:none;
  color:var(--blanco);opacity:.07;height:auto;
}
.pie .env{position:relative;z-index:1}
.pie-p1{top:clamp(10px,3vh,40px);right:clamp(-40px,2vw,40px);width:clamp(180px,22vw,340px)}
.pie-p2{bottom:clamp(-150px,-10vw,-96px);left:clamp(-40px,1vw,20px);width:clamp(120px,12vw,190px);opacity:.05}
/* Abajo de 1100px el contenido usa el ancho entero: sólo queda la
   grande, corrida al borde, donde el logotipo deja aire. */
@media (max-width:1099px){
  .pie-p2{display:none}
  .pie-p1{width:clamp(120px,20vw,200px);right:-24px;top:8px}
}
@media (max-width:560px){ .pie-pelota{display:none} }

.pie-legal{
  margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  font-family:var(--cuerpo);
  font-size:11px;letter-spacing:.07em;color:var(--sobre-oscuro-3);
}
/* El crédito de autoría cierra la línea legal. Va en el mismo tono
   apagado —es una firma, no un anuncio— pero con los dos nombres en
   claro para que se distingan del resto de la línea. */
.pie-credito{width:100%;order:3}
.pie-credito b{color:var(--sobre-oscuro);font-weight:500}
@media (min-width:901px){
  .pie-credito{width:auto;order:0;margin-inline-start:auto}
}

/* Sin escena 3D, la segunda O vuelve a ser una letra: si queda en
   opacity 0 el titular aparece con un agujero. */
body.sin-3d .o-pelota{opacity:1}

/* ───────────────────── BARRA DE PROGRESO ────────────────────── */
#progreso{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:70;
  background:var(--naranja);
  transform-origin:left;
}

/* ───────────────────────── UTILIDADES ───────────────────────── */
.centro{text-align:center;margin-inline:auto}
.centro .parrafo{margin-inline:auto}
.pila{display:flex;flex-direction:column}
.g-8{gap:8px}.g-12{gap:12px}.g-16{gap:16px}.g-20{gap:20px}
.g-24{gap:24px}.g-32{gap:32px}.g-40{gap:40px}
/* ── El aire entre bloques ──
   Van con `!important` y no es pereza: son utilidades de UNA sola
   declaración cuyo trabajo entero es poner ese margen. Sin eso las
   pisa cualquier componente que declare `margin:0` para matar el
   margen que el navegador le pone a una lista —`.bc-puertas`,
   `.al-muro`, `.vc-lista`, `.cat-horas`, `.bc-filas`, `.bc-hitos`—,
   porque empatan en especificidad y gana el que se carga después,
   que es la hoja de la página. El resultado era un hueco de CERO
   entre un párrafo y las fichas que le siguen, en seis lugares del
   sitio y sin una sola pista en el CSS de la sección. */
.mt-12{margin-top:12px !important}
.mt-16{margin-top:16px !important}
.mt-20{margin-top:20px !important}
.mt-24{margin-top:24px !important}
.mt-32{margin-top:32px !important}
.mt-40{margin-top:40px !important}
.mt-56{margin-top:clamp(36px,5vw,56px) !important}
.mt-72{margin-top:clamp(44px,7vw,72px) !important}

/* ── El saliente del revelado por líneas ──
   `.lin` agranda la caja de cada renglón con `padding-block:.26em` y
   la compensa con `margin-block:-.26em`. El margen negativo del
   ÚLTIMO renglón se escapa del titular —colapsa hacia afuera— y se
   resta del margen del hermano que sigue: un `mt-24` después de un
   titular con `data-lineas` daba un hueco VISIBLE de 3px. Pasaba en
   doce lugares del sitio y no se ve mirando el CSS de ninguno.

   Y no se arregla SUMANDO un margen positivo al titular, que fue el
   primer intento: los tres márgenes —el del último `.lin`, el del
   titular y el del hermano— colapsan JUNTOS, y el resultado de un
   colapso es «el positivo más grande más el negativo más chico».
   Con `margin-bottom:.26em` el positivo más grande seguía siendo el
   24 del hermano, así que el resultado era 24 − .26em = 3px, igual
   que antes.

   Lo que sirve es IMPEDIR el colapso: `display:flow-root` abre un
   contexto de formato nuevo, el margen negativo del último renglón
   se queda adentro —encoge el titular esos .26em, que es justo el
   relleno que había agregado— y el margen del hermano se aplica
   entero desde la tinta. El `:has(.lin)` es para que sólo aplique
   cuando el revelado efectivamente partió el titular: sin
   JavaScript no hay `.lin` y no hay nada que compensar. */
.mot-lineas:has(.lin){display:flow-root}
.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* En las cabeceras de página el titular ocupa el ancho completo y la
   bajada baja a la segunda columna. Con el titular metido en media
   columna, una palabra como "conversación" pide 612px a 92px de
   cuerpo y la columna tiene 468: se recortaba. */
.cabecera .dos-col.desigual{
  grid-template-columns:repeat(2,minmax(0,1fr));
  row-gap:clamp(18px,3vw,34px);
}
.cabecera .dos-col.desigual > h1{grid-column:1 / -1;max-width:min(940px,100%)}
.cabecera .dos-col.desigual > :not(h1){grid-column:2;padding-top:0 !important}
@media (max-width:900px){
  .cabecera .dos-col.desigual > :not(h1){grid-column:1}
}

/* Dos columnas editoriales */
.dos-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.dos-col.desigual{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
@media (max-width:900px){
  .dos-col,.dos-col.desigual{grid-template-columns:1fr;gap:32px}
}

/* Marco de imagen: los placeholders viven acá hasta que lleguen las fotos */
.marco{
  position:relative;border-radius:var(--radio);overflow:hidden;
  background:var(--tinte);border:1px solid var(--linea);
}
.marco.ancho{aspect-ratio:16/10}
.marco.alto{aspect-ratio:4/5}
.marco.cuadro{aspect-ratio:1}
.marco img{width:100%;height:100%;object-fit:cover}
.marco-vacio{
  position:absolute;inset:0;display:grid;place-content:center;gap:9px;
  text-align:center;padding:24px;
}
.marco-vacio svg{width:30px;height:30px;color:var(--linea-fuerte);margin-inline:auto}
.marco-vacio span{
  font-family:var(--cuerpo);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gris-suave);
  max-width:26ch;line-height:1.7;
}

/* ──────────────────── COMPARADOR ANTES / DESPUÉS ─────────────
   Se aplica SOLO al espacio físico, nunca a una persona.
   Es una condición del protocolo de salvaguarda de menores.     */
.comparador{
  position:relative;width:100%;aspect-ratio:16/10;
  overflow:hidden;border-radius:var(--radio);border:1px solid var(--linea);
  cursor:ew-resize;user-select:none;touch-action:pan-y;
  background:var(--tinte);
}
.comparador .capa{position:absolute;inset:0}
.comparador .capa img{width:100%;height:100%;object-fit:cover}
.comparador .capa.despues{clip-path:inset(0 0 0 50%)}
.comparador .rotulo{
  position:absolute;bottom:14px;
  font-family:var(--cuerpo);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  background:rgba(10,10,11,.82);color:#fff;padding:6px 11px;border-radius:var(--radio-xs);
  backdrop-filter:blur(6px);
}
.comparador .rotulo.izq{left:14px}
.comparador .rotulo.der{right:14px}
.comparador .tirador{
  position:absolute;top:0;bottom:0;left:50%;width:2px;
  background:var(--naranja);pointer-events:none;
  transform:translateX(-1px);
}
.comparador .tirador::after{
  content:'';position:absolute;top:50%;left:50%;
  width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;background:var(--naranja);
  box-shadow:0 2px 12px rgba(10,10,11,.28);
}
.comparador .tirador::before{
  content:'';position:absolute;top:50%;left:50%;
  width:16px;height:9px;margin:-4.5px 0 0 -8px;z-index:1;
  background:var(--tinta);
  clip-path:polygon(0 50%,32% 0,32% 100%,68% 0,68% 100%,100% 50%);
}

/* ─────────────────────────── MÓVIL ──────────────────────────── */
@media (max-width:900px){
  :root{--header-h:60px}
  body{font-size:16.5px}
  .nav-enlaces{display:none}
  .btn.btn-menu{display:inline-flex}
  .pie-legal{flex-direction:column}

  /* ── Lo mínimo legible y lo mínimo tocable ──
     La mayor parte del tráfico entra por celular, y ahí dos cosas
     que en escritorio pasan pueden arruinar la visita.

     1· Los rótulos de 10.5 y 11 px. En un monitor a 60 cm son un
        detalle tipográfico; en un teléfono a 30 cm, con versalitas y
        entreletra abierta, son ilegibles. Suben a 12.5, que es el
        piso donde una versalita todavía se lee.

     2· Los blancos táctiles. Un enlace de 25 px de alto se falla con
        el pulgar. La recomendación es 44; acá se llega con relleno,
        sin agrandar la letra ni mover el diseño. */
  .idioma button,
  .marco-vacio span,
  .pie-cols h3,
  .pie-legal{font-size:12.5px}

  .idioma button{padding:11px 14px}

  /* El pie es una lista de enlaces pegados: sin aire, tocar uno y
     tocar el de al lado es la misma zona del dedo. */
  .pie-cols a{padding-block:10px;line-height:1.5}
  .pie-cols .pie-redes a.red{padding-block:10px}

  /* Los enlaces subrayados dentro del texto (.link) miden lo que mide
     su línea. Se les da alto propio sin sacarlos del párrafo. */
  .link{display:inline-block;padding-block:9px}

  /* El logotipo mide 30 px de alto: el área es ancha pero baja. Un
     poco de relleno vertical lo lleva al blanco táctil sin cambiar
     nada de lo que se ve. */
  .marca{display:inline-flex;align-items:center;padding-block:8px}
}
@media (min-width:901px){
  .menu-movil{display:none}
}
@media (max-width:560px){
  .btn{padding:12px 18px;font-size:14.5px}
  .btn-grande{font-size:16px;padding:16px 26px}
  .par-btn .btn{flex:1 1 100%}
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTES DE LA REESTRUCTURA

   Nada de esto inventa lenguaje visual: todo sale de las variables
   que ya estaban. Se agregan porque el sitio pasó de 6 páginas a 19
   y aparecieron cuatro piezas que antes no existían —desplegable de
   navegación, lista de descargas, galería y mapa— más la ficha de
   evento de la agenda.
   ═══════════════════════════════════════════════════════════════ */

/* ── Desplegable del navbar ──────────────────────────────────────
   Se abre por CLIC, no por hover. En un teléfono no hay hover, y un
   submenú que sólo responde al puntero deja media navegación
   inalcanzable. El hover se suma después como comodidad, y sólo
   donde existe de verdad. */
.nav-grupo{position:relative}
.nav-grupo>.enlace{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:0;cursor:pointer;
}
.nav-grupo>.enlace svg{
  width:11px;height:11px;
  transition:transform var(--t-ui) var(--sal);
}
.nav-grupo>.enlace[aria-expanded="true"] svg{transform:rotate(180deg)}
.submenu{
  position:absolute;top:calc(100% + 12px);left:50%;
  min-width:230px;padding:8px;
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:var(--sombra-alta);
  opacity:0;visibility:hidden;
  transform:translateX(-50%) translateY(-6px);
  transition:opacity var(--t-ui) var(--sal),transform var(--t-ui) var(--sal),visibility var(--t-ui);
}
.nav-grupo>.enlace[aria-expanded="true"]+.submenu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
/* El submenú se abre al pasar el mouse y con el foco del teclado: el
   disparador ahora es un enlace que lleva a la página del área, así
   que el clic ya no puede usarse para abrirlo. En táctil no hay hover
   y el desplegable vive en el menú móvil. */
@media (hover:hover) and (pointer:fine){
  .nav-grupo:hover > .submenu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
}
.nav-grupo:focus-within > .submenu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}

.submenu a{
  display:block;padding:9px 13px;border-radius:var(--radio-chico);
  font-size:14.5px;color:var(--tinta);text-decoration:none;
  transition:background-color var(--t-toque) var(--sal),color var(--t-toque) var(--sal);
}
.submenu a .sub{display:block;font-size:12.5px;color:var(--gris-suave);margin-top:1px}
@media (hover:hover) and (pointer:fine){
  .submenu a:hover{background:var(--tinte);color:var(--naranja-texto)}
}
/* `true` y no sólo `page`: una hoja marca su sección —una ficha de
   escuela marca «Canchas», un formulario de beca marca «Becas»— y
   trece páginas no marcaban nada en la barra. */
.submenu a[aria-current]{color:var(--naranja-texto)}
.submenu a[aria-current]::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--naranja);flex:0 0 auto;margin-right:-4px;
}
/* Sobre fondo oscuro el submenú sigue al header */
[data-tema="oscuro"] .submenu{background:var(--carbon);border-color:rgba(255,255,255,.16)}
[data-tema="oscuro"] .submenu a{color:var(--sobre-oscuro)}
@media (hover:hover) and (pointer:fine){
  [data-tema="oscuro"] .submenu a:hover{background:rgba(255,255,255,.08);color:var(--naranja)}
}

/* Menú móvil: los grupos se muestran enteros. Un acordeón dentro de
   un panel que ya es un acordeón son dos toques para llegar a
   cualquier lado.

   Lo que SÍ estaba mal era la jerarquía, y estaba al revés: los
   quince enlaces iban todos en la display a 22–30 px, en versalitas
   y con una línea debajo de cada uno, y el rótulo que los ordenaba
   —PRODE, Fundación, CAR, Novedades— era lo más chico de la
   pantalla, 11 px en gris claro. Con todo gritando lo mismo no se
   leía ninguna estructura: era una lista de quince cosas sueltas y
   tres «Agenda» idénticas sin decir de qué. Y medía 1375 px para una
   pantalla de 604: dos pantallas y media de scroll para un menú.

   Ahora el rótulo es la voz alta —display, naranja y con su regla— y
   los enlaces bajan a cuerpo de lectura en dos columnas. Se leen los
   cuatro grupos de un vistazo y el menú entero entra en una pantalla.
   El tamaño baja pero el blanco táctil no: cada enlace conserva sus
   46 px de alto. */
.menu-movil .grupo-tit{
  font-family:var(--display);font-weight:800;font-size:13.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--naranja-texto);
  margin:22px 0 2px;padding-bottom:7px;
  border-bottom:1.5px solid var(--naranja);
}
/* Los dos CTA del sitio, arriba y sobre el pliegue. Al de la familia
   —«Quiero jugar»— no se llegaba desde el celular por ningún lado:
   no estaba en la barra ni en el menú, y es la mitad del sitio. */
.mm-acciones{display:flex;gap:10px;margin-bottom:4px}
.mm-acciones .btn{flex:1 1 0;min-width:0;padding-inline:12px}

/* Los enlaces de adentro de un grupo son hijos de `.sangria`, no del
   <nav>: sin esto quedan en línea, sus cajas se superponen entre sí y
   con el rótulo del grupo. Era el «todo encimado» del menú. */
/* UNA columna: el rótulo del grupo arriba y sus enlaces debajo, uno
   por renglón. Estuvo en dos columnas para que el panel entrara en
   menos pantallas, pero leído de arriba abajo el orden se pierde:
   con dos columnas, «Agenda» del grupo PRODE queda al lado de
   «Inicio» y no debajo, y el menú deja de leerse como una lista de
   secciones con sus páginas adentro. */
.menu-movil .sangria{
  display:grid;grid-template-columns:minmax(0,1fr);
}
/* No alcanza con `.menu-movil a`: los dos botones de arriba también
   son <a>, y con 0,1,1 contra el 0,1,0 de `.btn` les ganaría el
   tamaño y el color de los enlaces del menú. */
.menu-movil .sangria a,
.menu-movil .mm-suelto{
  display:flex;align-items:center;gap:8px;min-height:46px;padding-block:5px;
  font-family:var(--cuerpo);font-weight:600;font-size:16.5px;
  letter-spacing:-.005em;line-height:1.25;
  color:var(--tinta);text-decoration:none;
}
/* El enlace suelto del final cierra la lista a lo ancho. */
.menu-movil .mm-suelto{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--linea);
  justify-content:space-between;font-size:17.5px;
}
.menu-movil .mm-suelto svg{width:18px;height:18px;color:var(--naranja-texto)}
/* ── Dónde estás parado ──────────────────────────────────────────
   Era texto naranja y un punto de 7px, y no alcanzaba: entre quince
   enlaces del mismo tamaño un cambio de color se pierde, sobre todo
   con el menú abierto de un vistazo.

   Ahora el enlace de la página actual es una FICHA llena: naranja con
   tinta encima —la regla del sitio, el naranja nunca lleva blanco— y
   el punto adentro. Se ve de lejos y no depende de distinguir dos
   tonos parecidos.

   El selector es `[aria-current]` y no `[aria-current="page"]`:
   una hoja marca su sección con el valor `true` —una ficha de escuela
   marca «Canchas», un formulario de beca marca «Becas»— y esas once
   páginas antes no marcaban nada. */
.menu-movil .sangria [aria-current]{
  background:var(--naranja);color:var(--tinta);
  border-radius:var(--radio-s);
  padding-inline:12px;margin-inline:-12px;
  font-weight:650;
}
.menu-movil .sangria [aria-current]::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--tinta);flex:0 0 auto;margin-right:2px;
}
/* Contacto vive suelto al final, fuera de los grupos. */
.menu-movil .mm-suelto[aria-current]{
  background:var(--naranja);color:var(--tinta);
  border-radius:var(--radio-s);
  padding-inline:12px;margin-inline:-12px;font-weight:650;
}
.menu-movil .mm-suelto[aria-current] svg{color:var(--tinta)}
/* Los dos CTA de arriba ya son botones: una ficha encima de un botón
   no se lee. Llevan un anillo, que dice lo mismo sin pelearse con el
   relleno que ya tienen. */
.menu-movil .mm-acciones [aria-current]{
  box-shadow:0 0 0 3px var(--blanco), 0 0 0 6px var(--tinta);
}

/* ── Lista de descargas ──────────────────────────────────────────
   Ícono, nombre y peso. El ítem sin archivo NO se borra: queda
   armado y desactivado, para que se vea que existe y está en
   camino. */
.descargas{display:flex;flex-direction:column;gap:10px}
.descarga{
  display:flex;align-items:center;gap:16px;
  padding:17px 20px;text-decoration:none;
  border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--blanco);color:var(--tinta);
  transition:border-color var(--t-ui) var(--sal),transform var(--t-ui) var(--sal),box-shadow var(--t-ui) var(--sal);
}
@media (hover:hover) and (pointer:fine){
  a.descarga:hover{border-color:var(--naranja);transform:translateY(-2px);box-shadow:var(--sombra)}
}
.descarga .ico{
  flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;
  border-radius:var(--radio-chico);background:var(--tinte);color:var(--naranja-texto);
}
.descarga .ico svg{width:19px;height:19px}
.descarga .txt{flex:1 1 auto;min-width:0}
.descarga .nom{display:block;font-weight:600;font-size:16px;line-height:1.35}
.descarga .det{display:block;font-size:13.5px;color:var(--gris-suave);margin-top:2px}
.descarga .peso{
  flex:0 0 auto;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris-suave);font-variant-numeric:tabular-nums;
}
.descarga.pendiente{opacity:.62;cursor:default;border-style:dashed}
.descarga.pendiente .ico{color:var(--gris-suave)}

/* ── Galería ─────────────────────────────────────────────────────
   Protocolo de salvaguarda: ningún rostro identificable de un menor.
   Manos, pies, pelota, aro, red, la cancha. */
.galeria{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(10px,1.4vw,16px);
}
.galeria figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radio);background:var(--tinte)}
.galeria img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.galeria figcaption{
  position:absolute;inset:auto 0 0 0;padding:22px 14px 11px;
  font-size:12.5px;color:#fff;
  background:linear-gradient(to top,rgba(10,10,11,.72),transparent);
}
.galeria-vacia{
  grid-column:1/-1;padding:clamp(34px,6vw,60px);text-align:center;
  border:1px dashed var(--linea-fuerte);border-radius:var(--radio);
  color:var(--gris-suave);font-size:14.5px;
}

/* ── Mapa embebido ───────────────────────────────────────────────
   El iframe entra recién cuando lo piden, igual que los videos de
   los socios: incrustarlo de entrada trae peso y cookies de Google
   en la página que más se abre desde el celular. */
.mapa{
  position:relative;border-radius:var(--radio);overflow:hidden;
  border:1px solid var(--linea);background:var(--tinte);
  aspect-ratio:16/9;
}
.mapa iframe{display:block;width:100%;height:100%;border:0}
.mapa .abrir{
  position:absolute;inset:0;display:grid;place-items:center;gap:12px;
  align-content:center;cursor:pointer;border:0;background:transparent;
  font-family:var(--cuerpo);font-size:14.5px;color:var(--gris);
}
.mapa .abrir b{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:var(--radio-s);
  background:var(--tinta);color:var(--blanco);font-size:14px;font-weight:500;
  transition:transform var(--t-ui) var(--sal);
}
@media (hover:hover) and (pointer:fine){ .mapa .abrir:hover b{transform:translateY(-2px)} }
.mapa .abrir svg{width:15px;height:15px}

/* ── Ficha de evento · agenda ────────────────────────────────────
   La misma ficha sirve para lo que viene y para lo que pasó: lo
   único que cambia es el sello y que la finalizada muestra su
   resultado. Es lo que permite que una sola lista haga los dos
   trabajos. */
.ev{
  display:grid;gap:6px 22px;grid-template-columns:auto 1fr;
  padding:20px 0;border-bottom:1px solid var(--linea);
}
.ev:last-child{border-bottom:0}
.ev .fecha{
  grid-row:1/3;align-self:start;text-align:center;min-width:62px;
  padding:9px 10px;border-radius:var(--radio-chico);background:var(--tinte);
}
.ev .dia{display:block;font-family:var(--display);font-weight:800;font-size:25px;line-height:1;color:var(--tinta);font-variant-numeric:tabular-nums}
.ev .mes{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gris-suave);margin-top:3px}
.ev .tit{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2;color:var(--tinta)}
.ev .meta{font-size:14px;color:var(--gris-suave)}
.ev .sello{
  display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 9px;border-radius:var(--radio-xs);
  background:var(--tinte);color:var(--gris);margin-left:9px;vertical-align:2px;
}
.ev .sello.fin{background:rgba(0,41,79,.09);color:var(--navy)}
.ev .sello.susp{background:rgba(184,71,0,.1);color:var(--naranja-texto)}
.ev .resultado{
  margin-top:5px;font-family:var(--display);font-weight:700;font-size:16px;
  color:var(--naranja-texto);font-variant-numeric:tabular-nums;
}
@media (max-width:560px){
  .ev{grid-template-columns:1fr;gap:4px}
  .ev .fecha{grid-row:auto;justify-self:start;display:flex;align-items:baseline;gap:7px;margin-bottom:6px}
  .ev .mes{margin-top:0}
}

/* ── Ficha del riel, ahora clickeable ────────────────────────────
   La tarjeta entera es el enlace. Antes era un div: el visitante
   que tocaba el nombre de la escuela no llegaba a ninguna parte
   porque no había adónde llegar. */
a.riel-ficha{text-decoration:none;color:inherit}
@media (hover:hover) and (pointer:fine){
  a.riel-ficha{transition:transform var(--t-ui) var(--sal),border-color var(--t-ui) var(--sal),background-color 900ms var(--sal)}
  a.riel-ficha:hover{transform:translateY(-4px);border-color:var(--naranja)}
}
.ir{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:13px;font-weight:500;color:var(--naranja-texto);
}
.riel-ficha .ir{color:var(--naranja)}
.ir svg{width:13px;height:13px;flex:0 0 auto;transition:transform var(--t-ui) var(--sal)}
@media (hover:hover) and (pointer:fine){
  a.riel-ficha:hover .ir svg{transform:translateX(3px)}
}

/* ── Canales de contacto ─────────────────────────────────────────
   Cuatro consultas, cuatro destinos. Una sola bandeja de entrada
   para todo obliga a quien atiende a clasificar a mano. */
.canal{
  display:flex;flex-direction:column;gap:9px;
  padding:clamp(22px,3vw,30px);
  border:1px solid var(--linea);border-radius:var(--radio);background:var(--blanco);
}
.canal .rot{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--terracota-ui);font-weight:500}
.canal h3{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.15;color:var(--tinta)}
.canal p{font-size:14.5px;color:var(--gris);margin:0}
.canal .par-btn{margin-top:6px}

@media (prefers-reduced-motion:reduce){
  .submenu{transition:opacity var(--t-ui) linear,visibility var(--t-ui)}
  .nav-grupo>.enlace svg,a.riel-ficha,a.descarga,.mapa .abrir b,.riel-ficha .ir svg{transition:none}
  a.riel-ficha:hover,a.descarga:hover{transform:none}
}

/* ── Cabecera de página y miga ────────────────────────────────────
   Estaban sueltas dentro del <style> de donar.html. Con 19 páginas
   que las necesitan, vivir en una sola página dejó de tener sentido:
   se comparten desde acá y cada página deja de repetirlas. */
.cabecera{padding-top:calc(var(--header-h) + clamp(48px,8vw,96px));padding-bottom:clamp(40px,6vw,72px)}
.miga{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-family:var(--cuerpo);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gris-suave);margin-bottom:26px;
}
.miga a{color:var(--gris-suave);text-decoration:none;transition:color var(--t-ui) var(--sal)}
@media (hover:hover) and (pointer:fine){ .miga a:hover{color:var(--naranja-texto)} }
.miga svg{width:11px;height:11px}
@media (max-width:900px){ .miga{font-size:12.5px} }

/* Texto del pie que todavía no lleva a ninguna parte. Sin <a> y sin
   href="#": un enlace que no navega es peor que un texto. */
.pie-cols p.sin-enlace{color:var(--sobre-oscuro-3)}

.pie-redes{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.pie-cols .pie-redes a.red{
  display:inline-flex;align-items:center;gap:7px;line-height:1;
  font-size:14px;
}
.pie-redes svg{width:18px;height:18px;flex:0 0 auto}

/* ── Carrusel de testimonios ──────────────────────────────────────
   Arrastrable con el dedo y con encaje, más flechas para mouse y
   teclado. NO usa `.riel`: ese es scroll vertical disfrazado y ocupa
   una sección entera pegada; acá hacen falta unas citas que se
   recorran de lado sin comerse la página. */
.carrusel{position:relative}
.carrusel-pista{
  display:flex;gap:clamp(14px,2vw,24px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-block:4px;
}
.carrusel-pista::-webkit-scrollbar{display:none}
.carrusel-cita{
  flex:0 0 auto;scroll-snap-align:start;
  width:min(430px,82vw);
  display:flex;flex-direction:column;gap:18px;
  padding:clamp(24px,3vw,34px);
  border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--blanco);
}
.s-hueso .carrusel-cita{background:var(--hueso)}
.carrusel-cita blockquote{
  margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(19px,2.1vw,24px);line-height:1.24;letter-spacing:-.02em;
  color:var(--tinta);
}
.carrusel-cita figcaption{
  margin-top:auto;font-size:13.5px;color:var(--gris-suave);
  border-top:1px solid var(--linea);padding-top:14px;
}
.carrusel-cita figcaption b{display:block;color:var(--tinta);font-weight:600;font-size:15px}
.carrusel-mandos{display:flex;gap:10px;margin-top:24px}
/* `display:flex` le gana a `hidden`: sin esto los mandos siguen a la
   vista aunque no haya nada que recorrer. */
.carrusel-mandos[hidden]{display:none}
.carrusel-mandos button{
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--linea-fuerte);border-radius:50%;
  background:transparent;color:var(--tinta);
  transition:background-color var(--t-ui) var(--sal),border-color var(--t-ui) var(--sal),transform var(--t-ui) var(--sal);
}
.carrusel-mandos button svg{width:17px;height:17px}
.carrusel-mandos button[disabled]{opacity:.34;cursor:default}
@media (hover:hover) and (pointer:fine){
  .carrusel-mandos button:not([disabled]):hover{background:var(--tinta);color:var(--blanco);border-color:var(--tinta)}
}
.carrusel-mandos button:not([disabled]):active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){
  .carrusel-pista{scroll-snap-type:none}
  .carrusel-mandos button{transition:none}
}

/* ── Cifra de escala ──────────────────────────────────────────────
   Un solo número grande con su unidad y su fecha de corte. Cuando el
   dato no está se muestra la raya y el motivo: un cero sería mentira
   y un hueco sería descuido. */
.escala{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px}
.escala .u{font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,40px);color:var(--naranja-texto);letter-spacing:-.02em}

/* Aire entre el titular y la bajada. Con `line-height:.86` la tinta
   del titular SOBRESALE de su caja —el descendente de la Q caía sobre
   la primera línea del párrafo—, así que el margen tiene que pagar
   también ese excedente: de 30 px reales se ven unos 12. */
.cabecera .bajada{margin-top:clamp(24px,3.4vw,50px)}
.cabecera .dato{display:block;margin-bottom:clamp(10px,1.2vw,16px)}

/* La sección es el marco de referencia de su contenido. */
.cabecera{position:relative}
.cabecera > .env{position:relative;z-index:1}

/* ═══ Aviso de filtro de la agenda ═══
   Aparece cuando se entra desde una ficha del CAR con ?cat=. Sin él,
   una agenda vacía POR EL FILTRO se lee como una agenda vacía. */
.ag-filtro{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:14px 18px;margin-bottom:28px;
  background:var(--tinte);border:1px solid var(--linea);
  border-radius:var(--radio-chico);
}
.ag-filtro .rot{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--naranja-texto);
}
.ag-filtro strong{font-weight:700;font-size:15.5px;color:var(--tinta)}
.ag-filtro a{margin-left:auto;font-size:14px;color:var(--naranja-texto)}
@media (max-width:600px){ .ag-filtro a{margin-left:0} }

/* ═══ El pedido, al cierre de una página ═══
   Es el mismo bloque que cierra la home —titular, el aporte mensual y
   un solo botón—, pero SIN el vidrio esmerilado de allá: ese
   translúcido existe para separar el texto de la red del aro que pasa
   por detrás, y acá no hay escena de la cual separarse. Un panel
   borroso sobre un fondo liso sería un efecto sin motivo. */
.panel-pedido{
  max-width:min(820px,100%);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:clamp(20px,2.6vw,32px);
  text-align:center;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:clamp(30px,4.4vw,64px) clamp(22px,4vw,56px);
}
.panel-pedido .display{
  max-width:20ch;margin:0;
  font-size:clamp(26px,3.6vw,50px);line-height:1.03;
}
.panel-pedido .parrafo{margin:0;max-width:52ch}

/* ═══ Las cinco fichas del hero ═══
   Comunidad, edades, costo, días y ubicaciones, cada dato en su caja.
   La de ubicaciones es un enlace al riel de las escuelas: toda la ficha
   es el blanco, no sólo el texto. */
.hero-fichas{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);
}
.hero-fichas li{
  min-width:0;display:flex;flex-direction:column;gap:5px;
  border:1px solid var(--linea-viva,var(--linea));border-radius:var(--radio-chico);
  padding:clamp(14px,2.2vh,22px) clamp(14px,1.4vw,20px);gap:7px;
  background:rgba(255,255,255,.55);
}
.hero-fichas .rot{
  font-size:clamp(10.5px,.85vw,12px);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--naranja-texto);
}
.hero-fichas b{
  font-family:var(--cuerpo);font-weight:600;
  font-size:clamp(14px,min(1.12vw,2.3vh),17px);line-height:1.35;color:var(--texto,var(--tinta));
}
.hero-fichas .corte{margin-top:auto;font-size:11px;color:var(--gris-suave)}
.hero-fichas li.con-enlace{padding:0;transition:border-color var(--t-ui) var(--sal)}
.hero-fichas .ficha-enlace{
  display:flex;flex-direction:column;gap:5px;height:100%;
  padding:clamp(14px,2.2vh,22px) clamp(14px,1.4vw,20px);gap:7px;
  color:inherit;text-decoration:none;border-radius:inherit;
  transition:background-color var(--t-ui) var(--sal);
}
.hero-fichas .ficha-ir{
  margin-top:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:clamp(12px,.95vw,13.5px);font-weight:600;color:var(--naranja-texto);
}
.hero-fichas .ficha-ir svg{width:14px;height:14px;flex:0 0 auto}
@media (hover:hover) and (pointer:fine){
  .hero-fichas li.con-enlace:hover{border-color:var(--naranja)}
  .hero-fichas .ficha-enlace:hover{background:rgba(253,101,0,.06)}
}

/* ── El escudo de la escuela ──
   El logo grande al lado de su explicación. El marco va blanco
   siempre, también sobre hueso: los cuatro escudos están dibujados
   para fondo claro y su contorno gris se empasta contra el hueso. */
.esc-marca{display:grid;gap:clamp(24px,3.4vw,52px);align-items:center}
@media (min-width:860px){ .esc-marca{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)} }
.esc-marca-fig{
  margin:0;display:grid;place-items:center;
  padding:clamp(22px,3vw,44px);
  border:1px solid var(--linea);border-radius:var(--radio);background:var(--blanco);
}
.esc-marca-fig img{width:100%;max-width:320px;height:auto;display:block}
.esc-paleta-rot{margin-top:26px;margin-bottom:12px}
.esc-paleta{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.esc-paleta li{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--linea);border-radius:var(--radio-s);
  padding:8px 16px;background:var(--blanco);
  font-size:13.5px;line-height:1;
}
/* El borde le da forma a la muestra blanca de Las Águilas, que sobre
   blanco no se vería. */
.esc-paleta i{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  background:var(--c);border:1px solid rgba(10,10,11,.16);
}

@media (max-width:900px){
  /* Sin huecos: Comunidad, Días y horarios y Ubicaciones van a lo ancho
     (son los textos largos) y Edades y Costo, cortos, comparten fila.
     Antes Días ocupaba una columna y la ficha de al lado quedaba vacía. */
  .hero-fichas{grid-template-columns:1fr 1fr;gap:10px}
  .hero-fichas li:nth-child(1),
  .hero-fichas li:nth-child(4),
  .hero-fichas li.con-enlace{grid-column:1 / -1}
  .hero-fichas li,.hero-fichas .ficha-enlace{padding:12px 14px}
  .hero-fichas b{font-size:15px}
}

/* Dos imágenes fijas, una al lado de la otra. Reemplazan al
   comparador arrastrable: el antes y después pedía el alto de una
   pantalla entera para una sola idea. */
.par-img{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.2vw,16px);
  margin-top:clamp(16px,2vw,26px);
}
.par-img .marco{height:clamp(120px,17vh,190px);margin:0}

/* La pila de fichas del acto «Herramientas», más compacta.
   El gesto de apilado necesita alto para poder apilar, pero con el
   aire de fábrica la sección medía 1.5 pantallas y el encaje por
   proximidad se quedaba sin borde cerca: la pelota paraba a mitad de
   camino. Con tres fichas y menos relleno entra en una. */
.compacta-sc{gap:clamp(7px,.9vh,12px)}
.compacta-sc > .ficha{
  padding:clamp(10px,1.35vh,15px) clamp(14px,1.8vw,22px);
  display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;
}
.compacta-sc > .ficha .celda-icono{grid-row:1/3;margin:0;align-self:start}
.compacta-sc > .ficha h3{font-size:clamp(14.5px,1.25vw,17px);margin:0}
.compacta-sc > .ficha p{font-size:clamp(13px,1vw,14.5px);line-height:1.35;margin:0}
/* El párrafo de una sección que tiene que entrar en una pantalla. */
.p-compacto{font-size:clamp(15px,1.25vw,17.5px);line-height:1.5}

/* ═══ PISO DE LECTURA Y BLANCO TÁCTIL EN MÓVIL ═══
   Va al FINAL del archivo a propósito. Los rótulos de 9.5–12 px son
   un detalle tipográfico en un monitor y son ilegibles en un
   teléfono, pero cada uno se define en su propio bloque más abajo:
   puesto en el medio, cualquier regla posterior de la misma
   especificidad le ganaba y el piso no se aplicaba. Acá gana él.

   Sólo abajo de 900 px, y sin mover el diseño: la letra sube al piso
   y el blanco táctil sale del relleno, no del cuerpo. */
@media (max-width:900px){
  /* `!important` es deliberado: esto es un PISO de accesibilidad y
     tiene que ganarle a cualquier regla local, por específica que
     sea. Sin él, `.car-bp-aliados .rot` o `.fu-prob .fu-como-p2`
     —dos clases contra una— dejaban el rótulo en 10.5 px. */
  .rot, .dato, .dato-fecha, .invita-txt, .hero-meta, .et,
  .hero-fichas .rot, .hero-fichas .corte, .hero-fichas .ficha-ir, .marco-vacio span{font-size:12.5px !important}
  /* Ese `!important` es un PISO de accesibilidad del sitio y no tiene
     nada que hacer adentro del formulario, que trae su propia escala. */
  #prode-beca .rot, #prode-beca .dato, #prode-beca .et{font-size:inherit !important}
  /* Los formularios de beca quedan FUERA de esta regla. Su CSS vive
     encapsulado en #prode-beca y ya resuelve su propio blanco táctil;
     con las dos reglas compitiendo gana la que viene después en el
     archivo, y es la que deja enlaces de 2px de alto adentro de una
     tarjeta. Es el mismo error que aplastó las imágenes del blog. */
  main a:not(.btn):not(.celda):not(.riel-ficha):not(.ficha-enlace):not(.red-card):not(.post-thumbnail):not(.doc):not(.descarga):not(#prode-beca a){min-height:38px}
  main a:not(.btn):not(.celda):not(.riel-ficha):not(.ficha-enlace):not(.red-card):not(.post-thumbnail):not(.doc):not(.descarga):not(.marca):not(#prode-beca a){
    display:inline-flex;align-items:center;
  }
}

/* Los títulos de columna del pie son enlaces: llevan a la portada de
   su sección. Heredan el color para no salir en azul del navegador. */
.pie-cols h3 a{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .pie-cols h3 a:hover{color:var(--naranja)}
}
/* El número entero en un renglón: partido a la mitad deja de leerse
   como un número de teléfono. */
/* El número va con el logo de WhatsApp en lugar de la palabra.

   La regla va nombrando la columna: `.pie-cols a` declara `display`
   más abajo en este mismo archivo y, con la misma especificidad, gana
   el que viene después: el ícono se iba a una línea aparte del
   número. */
.pie-cols a.pie-tel{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.pie-cols a.pie-tel svg{width:18px;height:18px;flex:0 0 auto}
/* Las cuatro redes, una por línea: en dos columnas el orden se lee en
   zigzag y la caja queda desprolija contra el borde del pie. */
.pie-cols .pie-redes{flex-direction:column;gap:10px;flex-wrap:nowrap}
/* El correo entra en UNA línea: la columna mide unos 195px y a 15px
   el texto pedía 200. Baja apenas de cuerpo —sigue arriba del piso de
   lectura de 12.5px— y no se parte nunca. El resto de la columna sí
   puede partir, para que ningún enlace largo se corte contra el
   borde. */
.pie-cols a{overflow-wrap:anywhere}
.pie-cols a[href^="mailto:"]{font-size:clamp(12.8px,1.02vw,15px)}
/* En una línea sólo arriba de 1100px, que es donde la columna de
   contacto mide 240. Abajo las columnas se reparten a partes iguales
   y no hay ancho: ahí el correo parte, que es preferible a que se
   corte contra el borde. */
@media (min-width:1100px){
  .pie-cols a[href^="mailto:"]{white-space:nowrap;overflow-wrap:normal}
}

/* ═══ Fotos en lugar de la pelota: secciones 2 a 4 de la home ═══
   Ocupan la columna angosta del dúo, la misma que antes era de la
   pelota, y abarcan las dos filas —titular y texto— para no empujar
   el alto de la sección: tiene que seguir entrando en una pantalla o
   el encaje vuelve a dejar el scroll a mitad de camino.

   La media lleva `height`, no `max-height` —con `max-height` la caja
   no tiene alto del que partir y colapsa—. */
.duo > .foto-duo{grid-row:1 / span 2;height:clamp(260px,56svh,540px);margin:0;align-self:center}
[data-lado="der"] .duo > .foto-duo{grid-column:2}
[data-lado="izq"] .duo > .foto-duo{grid-column:1}
.duo > .par-img.foto-duo{height:auto;grid-template-columns:1fr;gap:clamp(10px,1.4vw,16px)}
.duo > .par-img.foto-duo .marco{height:clamp(130px,26svh,250px)}
@media (max-width:900px){
  .duo > .foto-duo,
  [data-lado] .duo > .foto-duo{grid-column:1;grid-row:auto;height:auto;aspect-ratio:16/10}
  .duo > .par-img.foto-duo,
  [data-lado] .duo > .par-img.foto-duo{aspect-ratio:auto;grid-template-columns:1fr 1fr}
  .duo > .par-img.foto-duo .marco{height:auto;aspect-ratio:4/3}
}

/* ═══ Las dos cifras de la home, en tarjetas gemelas ═══
   Antes eran dos números de 170 px apilados, cada uno con su rótulo
   de un largo distinto: el bloque se leía torcido y le comía media
   pantalla al párrafo. Ahora son dos cajas del mismo ancho y alto,
   una al lado de la otra, con una sola línea de corte debajo que vale
   para las dos. La raya naranja de arriba marca dónde empieza el dato. */
.cifras-par{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px);align-items:stretch}
.cifra-caja{
  display:flex;flex-direction:column;gap:clamp(8px,1vw,12px);
  padding:clamp(18px,2.2vw,30px);
  border:1px solid var(--linea-viva,var(--linea));border-radius:var(--radio);
  background:rgba(255,255,255,.6);
}
.cifra-caja::before{content:'';width:28px;height:3px;border-radius:2px;background:var(--naranja)}
.cifra-caja .cifra{font-size:clamp(40px,5.2vw,84px);line-height:.9;margin:0}
.cifra-eti{
  margin:0;font-family:var(--cuerpo);font-weight:500;
  font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.4;color:var(--texto-2,var(--gris));
}
@media (max-width:420px){
  .cifras-par{grid-template-columns:1fr}
}

/* ═══ Fotos de las canchas en las tarjetas de las escuelas ═══
   RIEL DE LA HOME. La foto ocupa la mitad de arriba de la ficha, a
   sangre, y se funde hacia el color de la ficha: la información sigue
   apoyada abajo como antes y nunca queda escrita sobre la foto. El
   número pasa a una pastilla oscura para leerse sobre la imagen. */
.riel-foto{position:absolute;inset:0 0 auto 0;height:var(--foto-alto,50%);overflow:hidden;background:var(--tinte)}
.riel-foto img{width:100%;height:100%;object-fit:cover;display:block}
.riel-foto::after{
  content:'';position:absolute;inset:auto 0 0 0;height:34%;
  background:linear-gradient(to bottom,transparent,var(--fondo,var(--blanco)));
  transition:background 900ms var(--sal);
}
.riel-ficha.con-foto > :not(.riel-foto){position:relative;z-index:1}
.riel-ficha.con-foto .num{
  position:absolute;z-index:2;
  background:rgba(10,10,11,.62);color:#fff;padding:4px 9px;border-radius:var(--radio-xs);
}

/* ÍNDICE /escuelas/. La foto encabeza la tarjeta en 16:9, a sangre: el
   margen negativo es el mismo relleno de la celda, así llega a los
   bordes sin tocar el padding del texto. */
.malla > .celda .celda-foto{
  display:block;aspect-ratio:16/9;overflow:hidden;background:var(--tinte);
  margin:calc(-1 * clamp(22px,2.4vw,32px)) calc(-1 * clamp(22px,2.4vw,32px)) 18px;
}
.malla > .celda .celda-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* ═══ Escudo, colores y descripción en las tarjetas de las escuelas ═══
   El escudo va DENTRO de la foto, en su esquina inferior derecha, en
   un círculo blanco: así nunca pisa el nombre ni el barrio, que viven
   debajo. Sólo las escuelas con logo lo muestran.

   Esta regla va después de `.riel-ficha.con-foto > :not(.riel-foto)`,
   que les pone position:relative a todos los hijos: con la misma
   especificidad, la que viene más abajo gana. */
.escudo{
  position:absolute;z-index:2;
  width:clamp(52px,4.4vw,68px);aspect-ratio:1;border-radius:50%;
  background:#fff;display:grid;place-items:center;overflow:hidden;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.45);
}
.escudo img{width:86%;height:86%;object-fit:contain;display:block}
.riel-ficha.con-foto .escudo{
  position:absolute;right:14px;
  top:calc(var(--foto-alto,50%) - clamp(52px,4.4vw,68px) - 12px);
}
.celda-foto{position:relative}
.celda-foto .escudo{right:12px;bottom:12px}

.riel-ficha .colores{margin-top:6px;font-size:13px;color:var(--texto-3,var(--gris-suave))}
.malla > .celda .celda-desc{margin-top:10px}
.malla > .celda .celda-colores{margin-top:6px;font-size:14px;color:var(--gris-suave)}

@media (max-width:900px){
  /* En la ficha del celular la foto cede un poco de alto para que la
     línea de colores entre sin pisarla. */
  .riel-ficha.con-foto{--foto-alto:40%}
}

/* El Instagram de cada escuela, en su franja de datos. Las otras celdas
   van en mayúsculas espaciadas; un @usuario así se lee mal, así que el
   enlace vuelve a minúsculas y puede partirse si el nombre es largo. */
.malla > .celda .link-ig{
  text-transform:none;letter-spacing:0;overflow-wrap:anywhere;
  color:var(--naranja-texto);text-decoration:underline;text-underline-offset:3px;
  font-weight:600;
}
@media (hover:hover) and (pointer:fine){
  .malla > .celda .link-ig:hover{color:var(--naranja)}
}

/* ═══ Cabecera de cada escuela: el nombre y la foto de su cancha ═══
   Texto a la izquierda, la cancha a la derecha. El titular deja t-hero
   (hasta 116 px) por un tamaño propio: en media columna «Pacú Cuá
   Básquet» no entraba. Las escuelas con logo lo muestran en la esquina
   de la foto, como en sus tarjetas. En una columna, la foto va debajo. */
.esc-cab{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,64px);align-items:center;
}
.esc-cab-titulo{font-size:clamp(38px,5.4vw,88px);line-height:.9;letter-spacing:-.03em;text-wrap:balance}
.esc-cab-foto{margin:0;aspect-ratio:16/10}
.esc-cab-foto > img{width:100%;height:100%;object-fit:cover;display:block}
.esc-cab-foto .escudo{right:14px;bottom:14px;width:clamp(58px,6vw,84px)}
.esc-cab-foto .escudo img{width:86%;height:86%;object-fit:contain}
@media (max-width:900px){
  .esc-cab{grid-template-columns:1fr}
}

/* Muestras de los colores de cada escuela. El aro gris fino hace que el
   negro se vea sobre la ficha oscura del riel y el blanco sobre la
   tarjeta clara de /escuelas/. */
.muestras{display:inline-flex;gap:3px;vertical-align:-1px;margin:0 6px 0 2px}
.muestras i{
  width:11px;height:11px;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 1px rgba(128,128,128,.55);
}

/* ═══ Collage de fotos del equipo, en cada página de escuela ═══
   Cinco fotos: una grande que ocupa dos columnas y dos filas, y cuatro
   chicas a su lado. En un teléfono la grande va arriba a lo ancho y las
   cuatro chicas debajo, de a dos. Mientras no lleguen las fotos, cada
   hueco es un .marco con su .marco-vacio. */
.collage{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(120px,14vw,210px);gap:clamp(8px,1vw,14px);
}
.collage > .marco{margin:0}
.collage > .marco:first-child{grid-column:span 2;grid-row:span 2}
.collage > .marco img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:640px){
  .collage{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(110px,30vw,170px)}
}

/* La dirección de cada escuela lleva a Google Maps: la sección del mapa
   se quitó, y el enlace conserva la ubicación. Mismo trato que el
   Instagram: sin versales, porque un nombre de lugar así se lee mal. */
.malla > .celda .link-dir{
  text-transform:none;letter-spacing:0;overflow-wrap:anywhere;
  color:var(--naranja-texto);text-decoration:underline;text-underline-offset:3px;font-weight:600;
}
@media (hover:hover) and (pointer:fine){
  .malla > .celda .link-dir:hover{color:var(--naranja)}
}

/* ═══ El profe a cargo, en cada página de escuela ═══
   Foto a la izquierda en 4:5, con ancho topado para que no se coma la
   sección, y el rol, el nombre y el texto a la derecha. En una columna,
   la foto arriba y centrada. */
/* Son DOS profes por escuela, uno al lado del otro. Con la ficha
   ancha de antes —foto de 360px y el texto al costado— dos no entran:
   la foto pasa a ir arriba y el texto debajo, que es lo que permite
   ponerlas en dos columnas sin achicar la cara de nadie. */
.profes{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3.4vw,52px);
}
.profe{display:grid;gap:clamp(14px,1.6vw,22px);align-content:start}
.profe .dato{display:block}
/* La foto se topa: a 4/5 sobre una columna de 531px daba 664 de alto,
   un hueco enorme antes de que haya fotos y una cara gigante cuando
   las haya. */
.profes .profe-foto{max-width:340px;width:100%}
.profe-foto{margin:0;aspect-ratio:4/5}
.profe-foto img{width:100%;height:100%;object-fit:cover;display:block}
.profe-nombre{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,2.4vw,34px);line-height:1;letter-spacing:-.02em;
  margin:2px 0 10px;color:var(--tinta);
}
.profe-texto .parrafo{margin:0}
@media (max-width:760px){
  .profes{grid-template-columns:minmax(0,1fr);gap:clamp(28px,7vw,40px)}
  .profe-foto{max-width:320px;width:100%}
}

/* ═══ Tarjeta «Dónde entrenamos» ═══
   Sigue la referencia «mapa ejemplo nutri»: una sola tarjeta con una
   pastilla arriba, el ícono de ubicación en su esquina, el nombre del
   lugar grande, la dirección, filas de rótulo y chips, y dos botones
   al pie: Ver en Maps delineado y Quiero jugar en naranja. */
.sede{
  position:relative;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--radio-l);
  padding:clamp(24px,4vw,56px);
  box-shadow:0 1px 2px rgba(10,10,11,.04),0 24px 60px -36px rgba(10,10,11,.35);
}
.sede-pin{
  position:absolute;top:clamp(20px,3vw,40px);right:clamp(20px,3vw,40px);
  width:clamp(48px,5.4vw,72px);aspect-ratio:1;border-radius:var(--radio-m);
  background:var(--naranja);color:var(--tinta);display:grid;place-items:center;
}
.sede-pin svg{width:46%;height:46%}
.sede-badge{
  display:inline-flex;align-items:center;padding:6px 13px;border-radius:var(--radio-s);
  background:var(--tinte);border:1px solid var(--linea);
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--naranja-texto);
}
.sede-titulo{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,4.2vw,58px);line-height:.95;letter-spacing:-.02em;color:var(--tinta);
  margin:clamp(12px,1.6vw,20px) 0 clamp(8px,1vw,12px);
  max-width:calc(100% - clamp(60px,7vw,96px));text-wrap:balance;
}
.sede-dir{display:flex;align-items:center;gap:10px;margin:0;color:var(--gris);font-size:clamp(15px,1.3vw,18px)}
.sede-dir svg{width:18px;height:18px;flex:0 0 auto;color:var(--naranja-texto)}
.sede-filas{
  margin:clamp(22px,3vw,36px) 0;display:grid;grid-template-columns:max-content minmax(0,1fr);
  gap:12px clamp(16px,2.4vw,32px);align-items:center;
}
.sede-filas dt{font-weight:600;font-size:15px;color:var(--tinta)}
.sede-filas dd{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.sede-chip{
  display:inline-flex;align-items:center;padding:7px 14px;border-radius:var(--radio-s);
  background:var(--tinte);border:1px solid var(--linea);font-size:14.5px;color:var(--tinta);
}
.sede-chip-gratis{background:var(--naranja);border-color:var(--naranja);font-weight:700}
/* Fila de llamadas: el par de botones de los dos públicos, fuera del
   hero. Se apilan solos cuando no entran. */
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin:0}

.sede-acciones{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.sede-acciones .btn svg{width:17px;height:17px}
@media (max-width:560px){
  .sede-filas{grid-template-columns:1fr;gap:6px}
  .sede-filas dd{margin-bottom:10px}
  .sede-acciones .btn{flex:1 1 100%;justify-content:center}
}

/* ═══ Seguinos en redes ═══
   Sigue la referencia «redes ejemplo nutri»: encabezado centrado y dos
   tarjetas lado a lado, cada una un enlace entero con el ícono de la
   red, su nombre, el usuario grande, una línea y la flecha a la derecha. */
.redes-cab{text-align:center;max-width:720px;margin:0 auto clamp(26px,4vw,48px)}
.redes-cab .dato{display:block;margin-bottom:10px}
.redes-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:clamp(14px,2vw,24px)}
.red-card{
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:clamp(22px,3vw,36px);padding-right:clamp(80px,8vw,112px);
  border-radius:var(--radio-l);background:var(--blanco);border:1px solid var(--linea);
  color:inherit;text-decoration:none;
  box-shadow:0 1px 2px rgba(10,10,11,.04),0 20px 50px -34px rgba(10,10,11,.35);
  transition:transform var(--t-ui) var(--sal),border-color var(--t-ui) var(--sal);
}
.red-icono{width:46px;height:46px;border-radius:var(--radio-m);display:grid;place-items:center;color:#fff;margin-bottom:8px}
.red-icono svg{width:24px;height:24px}
.red-ig .red-icono{background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF)}
.red-yt .red-icono{background:#E62117}
.red-rot{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-suave)}
.red-nombre{font-weight:700;font-size:clamp(20px,2.1vw,28px);line-height:1.15;color:var(--tinta);overflow-wrap:anywhere}
.red-desc{font-size:15px;line-height:1.45;color:var(--gris)}
.red-ir{
  position:absolute;right:clamp(18px,2.4vw,30px);top:50%;transform:translateY(-50%);
  width:clamp(44px,4vw,56px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;background:var(--tinte);color:var(--tinta);
  transition:background-color var(--t-ui) var(--sal);
}
.red-ir svg{width:42%;height:42%}
@media (hover:hover) and (pointer:fine){
  .red-card:hover{transform:translateY(-3px);border-color:var(--naranja)}
  .red-card:hover .red-ir{background:var(--naranja)}
}

/* ── Panel de cifras ──────────────────────────────────────────
   Vivía dentro de <style> en transparencia. Lo usan dos páginas
   (las cifras de Transparencia y los Datos de la Fundación), así
   que sube al sistema: dos copias idénticas se separan sola la
   primera vez que alguien toca una. */
.panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.panel > div{background:var(--blanco);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:8px}
.panel .n{
  font-family:var(--display);font-weight:800;font-size:clamp(32px,3.8vw,48px);
  line-height:.92;letter-spacing:-.03em;color:var(--naranja-display);font-variant-numeric:tabular-nums;
}
.panel .l{font-size:15px;line-height:1.45;color:var(--gris)}
.panel .f{
  font-family:var(--cuerpo);
  font-size:10.5px;letter-spacing:.09em;color:var(--gris-suave);
  border-top:1px solid var(--linea);padding-top:10px;margin-top:auto;
}
@media (max-width:900px){
  .panel .f{font-size:12.5px}
  .panel .l{font-size:16px}
}

/* Catorce cifras no llenan una grilla de cuatro ni de cinco columnas,
   así que la última fila dejaba una celda vacía mostrando el hueso de
   la sección: se leía como un agujero. El relleno se estira desde
   donde cae hasta el final de la fila (grid-column:auto/-1), así tapa
   una celda o cuatro sin saber cuántas columnas hay.
   Sólo arriba de 700px: con una o dos columnas las filas cierran
   justas y el relleno agregaría una banda blanca de más. */
@media (min-width:700px){
  .panel-lleno::after{content:"";background:var(--blanco);grid-column:auto / -1}
}

/* ── Los valores de un chico PRODE ─────────────────────────────
   Naranja a sangre, el listado a la izquierda y el dibujo a la
   derecha. El texto va en TINTA: blanco sobre naranja da 2.98:1 y
   reprueba WCAG. */
.valores{position:relative}
.valores > .env{position:relative;z-index:1}
.val-bajada{
  margin-top:10px;max-width:46ch;
  font-size:clamp(17px,1.9vw,26px);line-height:1.3;
  color:rgba(10,10,11,.82);
}
.val-duo{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:1000px){
  .val-duo{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
}
/* Una sola columna: el dibujo ocupa la otra mitad. */
.val-lista{grid-template-columns:1fr}
/* Sobre naranja, el número en --naranja-texto desaparece. */
.valores .comp-n{color:var(--tinta)}
.valores .compromiso h3{color:var(--tinta)}
.valores .compromiso p{color:rgba(10,10,11,.78)}

.val-fig{margin:0;position:relative}
/* El listado mide 934px y el dibujo 463: centrado dejaba medio bloque de
   naranja vacío al costado. Pegado, acompaña la lectura de los diez
   puntos.
   Esta regla va DESPUÉS de la de arriba y no dentro del bloque de
   .val-duo: `position` tiene ahí la misma especificidad (0,1,0), así que
   decide el orden, y escrita antes la pisaba el `relative` y el sticky
   no se aplicaba nunca.
   El `relative` de la base se queda para los anchos de una sola columna:
   los garabatos se anclan a la figura. */
@media (min-width:1000px){
  .val-fig{position:sticky;top:calc(var(--header-h) + clamp(16px,4vh,48px))}
}
.val-chicos{display:block;width:100%;height:auto}
.val-garabato{position:absolute;pointer-events:none;opacity:.5;height:auto}
.val-g1{left:-4%;top:6%;width:clamp(48px,6vw,96px)}
.val-g2{right:-2%;bottom:10%;width:clamp(60px,8vw,124px)}
/* La pelota de línea, de marca de agua arriba a la derecha. */
.val-pelota{
  position:absolute;z-index:0;pointer-events:none;
  right:clamp(-40px,-2vw,0px);top:clamp(-30px,-2vw,0px);
  width:clamp(150px,18vw,300px);height:auto;opacity:.16;
}
@media (max-width:760px){ .val-garabato,.val-pelota{display:none} }

/* ══ Muro de logotipos de aliados ═══════════════════════════════════
   Una grilla de fichas donde lo que manda es el logotipo. Los seis
   vienen en proporciones muy distintas —el de Continental mide casi
   cinco veces su alto, el del Juan XXIII es casi cuadrado—, así que
   la caja tiene ALTO FIJO y el logo se ajusta con `object-fit:contain`
   dentro de ella. Sin ese alto común, cada ficha arrancaría su nombre
   a una altura distinta y el muro se leería como un montón.

   Los logos son de otras instituciones: van en su color, sin filtros,
   sin gris de reposo y sin hover que los mueva. Un logotipo ajeno no
   es un elemento de interfaz. */
.al-muro{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;
  border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;
  /* La cuenta de aliados ya NO importa, y eso es a propósito: ahora
     los carga el equipo desde el panel y no puedo pedirles que
     comprueben si el número divide en cuatro.

     Antes el contenedor pintaba el fondo y las divisiones eran huecos
     de 1px, así que una celda sobrante se veía como un bloque gris del
     ancho de un cuarto de sección. Ahora cada ficha dibuja SU propia
     raya a la derecha y abajo con `box-shadow` —que no ocupa lugar— y
     el `overflow:hidden` del contenedor recorta las de los bordes. Una
     celda que no existe no dibuja nada: con nueve aliados, o con tres,
     el muro cierra igual. */
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.al-ficha{box-shadow:1px 0 0 var(--linea), 0 1px 0 var(--linea)}

/* Un muro sin aliados no se dibuja. El CAR y las Escuelas tienen su
   sección armada y vacía esperando que el equipo cargue el primero;
   mostrar un marco vacío con un titular sería peor que no tenerla.

   Va con `:has()` y no con el atributo `hidden` a propósito: así el
   panel no tiene que acordarse de ponerlo y sacarlo, la página se
   acomoda sola a lo que haya. */
.al-seccion:not(:has(.al-ficha)){display:none}
@media (min-width:1000px){ .al-muro{grid-template-columns:repeat(4,minmax(0,1fr))} }
.al-ficha{
  background:var(--fondo,var(--blanco));
  display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vw,20px);
  padding:clamp(24px,3.2vw,38px) clamp(18px,2.4vw,28px);
  text-align:center;
}
.al-marca{
  display:flex;align-items:center;justify-content:center;
  height:clamp(54px,6vw,74px);width:100%;
}
.al-marca img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;display:block}
.al-nombre{
  font-family:var(--cuerpo);font-size:13px;line-height:1.45;
  color:var(--gris);max-width:24ch;
}
@media (max-width:900px){
  .al-nombre{font-size:12.5px}
}

/* ══ Carátula de video ══════════════════════════════════════════════
   Una imagen y un botón: el reproductor de YouTube entra recién al
   pedirlo. Incrustarlo de entrada son ~700 KB y las cookies de Google
   en páginas que la mayoría abre desde el celular con datos móviles.
   La lógica vive en prode.js y sirve para las dos clases que la usan
   —`.video-yt` acá y `.socio-video` en Historia y equipo, que tiene su
   propia maqueta porque además viaja al cuadro del organigrama—. */
.video-yt{
  position:relative;margin:0;border:0;padding:0;
  border-radius:var(--radio);overflow:hidden;background:var(--carbon,#0A0A0B);
  aspect-ratio:16/9;
}
.video-yt img,.video-yt iframe{display:block;width:100%;height:100%;border:0;object-fit:cover}
.video-yt button{
  position:absolute;inset:0;width:100%;height:100%;
  display:grid;place-content:center;gap:12px;justify-items:center;
  border:0;background:linear-gradient(180deg,rgba(10,10,11,.05),rgba(10,10,11,.5));
  cursor:pointer;color:#fff;
  font-family:var(--cuerpo);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  transition:background var(--t-ui) var(--sal);
}
.video-yt .play{
  width:clamp(56px,6vw,72px);height:clamp(56px,6vw,72px);border-radius:50%;
  background:var(--naranja);display:grid;place-content:center;
  box-shadow:0 10px 30px rgba(10,10,11,.32);
  transition:transform var(--t-ui) var(--sal);
}
.video-yt .play svg{width:26px;height:26px;color:var(--tinta);margin-left:3px}
@media (hover:hover) and (pointer:fine){
  .video-yt button:hover{background:linear-gradient(180deg,rgba(10,10,11,.05),rgba(10,10,11,.62))}
  .video-yt button:hover .play{transform:scale(1.07)}
}
@media (prefers-reduced-motion:reduce){
  .video-yt button:hover .play{transform:none}
}
@media (max-width:900px){
  .video-yt button{font-size:12.5px}
}

/* ══ Novedades, desactivado ═════════════════════════════════════════
   Sigue en la barra y en el menú móvil —la navegación no cambia de
   forma— pero no lleva a ningún lado hasta que haya algo publicado.

   No alcanza con `disabled` en el botón: el submenú también se abre
   con `:hover` y con `:focus-within` sobre el GRUPO, y un botón
   deshabilitado no impide ninguna de las dos. Por eso el apagado va
   en el grupo.

   Y el `hidden` del submenú necesita su propia regla: `.submenu` se
   esconde con `visibility`, no con `display`, así que el atributo
   solo no haría nada —la misma trampa de `.doc[hidden]` y de
   `.btn.btn-menu`—. */
.submenu[hidden]{display:none}
.nav-off > .enlace{opacity:.42;cursor:default}
.nav-off:hover > .submenu,
.nav-off:focus-within > .submenu{opacity:0;visibility:hidden}
@media (hover:hover) and (pointer:fine){
  .nav-off:hover > .enlace{color:inherit}
  .nav-off:hover > .submenu{opacity:0;visibility:hidden}
}
/* En el menú móvil: el rótulo y sus enlaces quedan a la vista, en
   gris y sin recibir el dedo. Los <a> ya perdieron el `href`, así que
   tampoco los alcanza el teclado; `pointer-events` es para que no se
   sientan tocables. */
.menu-movil .mm-off{opacity:.42}
.menu-movil .sangria.mm-off a{pointer-events:none;cursor:default}

/* ══ Categorías y horarios de cada escuela ══════════════════════════
   Tres renglones: la edad a la izquierda, la hora a la derecha, y una
   línea punteada entre medio que las une aunque el nombre de la
   categoría sea más corto o más largo. */
.cat-horas{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cat-horas li{
  display:flex;align-items:baseline;gap:14px;
  padding:clamp(14px,1.6vw,20px) 0;border-top:1px solid var(--linea);
}
.cat-horas li:last-child{border-bottom:1px solid var(--linea)}
.cat-edad{
  font-family:var(--display);font-weight:800;
  font-size:clamp(19px,2vw,26px);line-height:1.15;letter-spacing:-.01em;color:var(--tinta);
}
/* El relleno entre la edad y la hora. Va en un pseudoelemento para
   que no lo lea un lector de pantalla ni lo copie nadie al copiar. */
.cat-horas li::after{
  content:"";flex:1 1 auto;height:0;
  border-bottom:1px dotted var(--linea-fuerte);transform:translateY(-4px);
  order:1;
}
.cat-hora{
  order:2;flex:none;font-family:var(--cuerpo);font-weight:600;
  font-size:clamp(15px,1.3vw,18px);color:var(--naranja-texto);white-space:nowrap;
}
@media (max-width:520px){
  .cat-horas li{flex-wrap:wrap;gap:4px 12px}
  .cat-horas li::after{display:none}
  .cat-hora{order:0;width:100%}
}

/* ══ El collage de la cancha ════════════════════════════════════════
   Una foto apaisada arriba y los videos verticales abajo, en una sola
   fila cuando entran. No hay caja de fondo, así que una celda que
   sobra no se ve: sumar o sacar un video no rompe nada. */
.cv-foto{margin:0;border-radius:var(--radio);overflow:hidden;background:var(--carbon)}
.cv-foto img{
  display:block;width:100%;height:clamp(220px,34vw,420px);
  object-fit:cover;object-position:50% 45%;
}
.cv-muro{
  display:grid;gap:clamp(8px,1vw,14px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:700px){ .cv-muro{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1000px){ .cv-muro{grid-template-columns:repeat(5,minmax(0,1fr))} }
.cv{
  margin:0;border-radius:var(--radio);overflow:hidden;background:var(--carbon);
  aspect-ratio:9/16;position:relative;
}
.cv video{
  display:block;width:100%;height:100%;object-fit:cover;
  /* Sin menú de guardado al mantener apretado. Es un disuasivo, no
     una protección: el archivo viaja al navegador para poder verse. */
  -webkit-touch-callout:none;pointer-events:none;
}

/* El RUC del pie lleva al panel de contenido. No se nota, y es a
   propósito: no hace falta anunciar en veinticinco páginas dónde se
   administra el sitio.

   Es DISIMULO, no seguridad. El enlace está en el HTML y quien mire
   el código lo ve; lo que protege el panel es la contraseña.

   `cursor:text` para que el puntero tampoco lo delate, y el
   `tabindex="-1"` del marcado lo saca del recorrido del teclado: un
   enlace invisible ahí sería una trampa para quien navega tabulando. */
.pie-legal .ruc{color:inherit;text-decoration:none;cursor:text}

/* Los tres portafolios del crédito. Sin `color:inherit` salen en el
   azul del navegador sobre un pie negro — la misma trampa del correo
   del equipo en Historia y equipo. */
.pie-credito a{color:inherit;text-decoration:none}
.pie-credito a b{font-weight:600}
@media (hover:hover) and (pointer:fine){
  .pie-credito a:hover b{color:var(--naranja);text-decoration:underline;text-underline-offset:3px}
}

/* Un enlace suelto apagado dentro de un desplegable que SÍ funciona.
   `.nav-off` apaga el grupo entero —Novedades—; esto apaga uno solo,
   que es el caso de la agenda del CAR mientras el Centro no tenga
   actividades cargadas. */
.submenu a.nav-off-uno{opacity:.42;cursor:default;pointer-events:none}
.menu-movil .sangria a.mm-off{opacity:.42;pointer-events:none;cursor:default}

/* ══ Portada con video de fondo · compartida ═════════════════════════════════════
   Una pantalla entera: el video detrás, el texto encima. Sin el
   `padding-block` que `section` da a todas —acá el aire lo reparte la
   propia portada— porque si no la sección mediría 100svh MÁS ese
   relleno y no entraría en una vista. */
.hero-video{
  position:relative;overflow:clip;background:var(--carbon);
  min-height:100svh;display:flex;padding-block:0;
}
.hero-video > video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:0;pointer-events:none;
}
/* El velo, medido contra el brillo del video (135 sobre 255, y 139 en
   la franja del texto). Carga a la izquierda, donde vive el texto, y
   se abre a la derecha, que es donde se ve la pelota. */
.hero-video::after{
  content:"";position:absolute;inset:0;z-index:0;
  /* El velo lo declara cada página: depende del brillo de SU video.
     Los valores salen de medir el contraste real del texto contra el
     fondo, no de estimarlo. */
  background:
    linear-gradient(100deg, rgba(10,10,11,var(--velo-1,.93)) 0%, rgba(10,10,11,var(--velo-2,.88)) 42%,
                            rgba(10,10,11,var(--velo-3,.62)) 74%, rgba(10,10,11,var(--velo-4,.42)) 100%),
    linear-gradient(180deg, rgba(10,10,11,var(--velo-alto,.60)) 0%, rgba(10,10,11,0) 46%);
}
.hero-video .env{
  position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--header-h) + clamp(24px,4vw,56px));
  padding-bottom:clamp(36px,5vw,72px);
  width:100%;
}
.hero-video .miga,.hero-video .miga a{color:rgba(255,255,255,.78)}
/* El rótulo va en BLANCO, no en el naranja claro del sistema, y es la
   única desviación de la paleta en estas portadas.

   Medido: sobre un cielo de atardecer el naranja claro llega a 3,7:1 y
   el rótulo es texto chico, que pide 4,5. Para que pasara habría que
   subir el velo hasta apagar el video, que es lo que se vino a poner.
   En blanco da 11:1 sin tocar nada. El naranja sigue en el botón, que
   es donde hace falta que llame. */
.hero-video .dato{color:#fff;opacity:.92}
/* El titular de una portada CON VIDEO va más chico que el de una
   cabecera normal, y no es un capricho: sobre una foto el texto ya
   tiene todo el peso visual que necesita, y acá los titulares son
   largos. «Nuestra red de alianzas estratégicas» ocupaba 330px de
   alto a 1440 —tres renglones de 106px— y se comía la pantalla.

   El tope baja de 116px a 76 y la bajada de 27 a 21, con más ancho de
   línea para que sean menos renglones. */
.hero-video h1{
  color:#fff;margin:0;
  font-size:clamp(30px,5.4vw,76px);
}
.hero-video .bajada{
  color:rgba(255,255,255,.88);
  font-size:clamp(16px,1.5vw,21px);
  max-width:62ch;margin-top:clamp(14px,1.8vw,22px);
}
/* En angosto el velo se cierra: el texto usa el ancho completo y ya no
   hay una mitad libre donde dejar ver la pelota. */
@media (max-width:820px){
  .hero-video::after{
    background:linear-gradient(180deg, rgba(10,10,11,var(--velo-2,.82)) 0%,
                                       rgba(10,10,11,var(--velo-3,.86)) 55%,
                                       rgba(10,10,11,var(--velo-1,.92)) 100%);
  }
  .hero-video .bajada{max-width:100%}
}

/* ══ El proceso formativo ═══════════════════════════════════════════
   Seis etapas colgadas de una sola línea: el recorrido es UNO, de la
   cancha del barrio al Centro, y partirlo en dos bloques lo contaba
   como dos cosas distintas.

   El color del punto dice de qué ámbito es cada etapa. Los rótulos de
   arriba están en `aria-hidden` porque son una leyenda visual: quien
   escucha la página ya lo lee en el texto de la bajada.

   El reparto es TRES etapas de barrio y TRES del Centro, y el corte
   cae donde termina la intermedia: a los 13, que es la edad desde la
   que se entra al Centro. No van todos —sólo a quienes se les ve
   potencial—, y eso lo dice la bajada, que es donde se puede decir
   con palabras; la llave sólo puede decir dónde pasa cada etapa.

   Los rótulos usan la MISMA grilla de seis columnas que la pista, y
   no dos mitades: así la llave termina exactamente en el borde de la
   etapa que nombra a cualquier ancho, en lugar de caer en un 50% que
   con seis columnas y cinco huecos no coincide con ningún borde. */
.sec-proceso{--pf-gap:clamp(14px,1.6vw,24px)}
.sec-proceso .pf-rotulos{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--pf-gap);
}
.pf-rot-esc{grid-column:1 / 4}
.pf-rot-car{grid-column:4 / -1}
.pf-rot{
  font-family:var(--cuerpo);font-weight:600;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;
  padding-bottom:12px;border-bottom:2px solid;
}
.pf-rot-esc{color:var(--naranja-claro);border-color:var(--naranja)}
.pf-rot-car{color:var(--sobre-oscuro);border-color:var(--sobre-oscuro-3)}

.pf-pista{
  list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0;position:relative;
  display:grid;gap:var(--pf-gap);
  grid-template-columns:repeat(6,minmax(0,1fr));
}
/* La línea que une las seis. Va a la altura del punto.

   El cambio de color cae en el medio del hueco entre la 03 y la 04,
   que con seis columnas y cinco huecos NO es el 50%: cada columna
   mide (100% − 5·hueco)/6, así que ese punto sale 50% menos un
   sexto de hueco. La diferencia es de pocos píxeles, pero es la que
   hace que el corte caiga en el hueco y no encima de un punto. */
.pf-pista::before{
  content:"";position:absolute;left:0;right:0;top:7px;height:2px;z-index:0;
  --pf-corte:calc(50% - var(--pf-gap) / 6);
  background:linear-gradient(90deg,var(--naranja) 0%,var(--naranja) var(--pf-corte),
                             var(--sobre-oscuro-3) var(--pf-corte),var(--sobre-oscuro-3) 100%);
  opacity:.5;
}
.pf-etapa{position:relative;z-index:1;padding-top:32px}
.pf-punto{
  position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;
  border:3px solid var(--carbon);
}
.pf-esc .pf-punto{background:var(--naranja)}
.pf-car .pf-punto{background:var(--sobre-oscuro)}
.pf-num{
  display:block;font-family:var(--display);font-weight:800;
  font-size:13px;letter-spacing:.14em;color:var(--sobre-oscuro-3);margin-bottom:6px;
}
.pf-esc .pf-num{color:var(--naranja-claro)}
.pf-nom{
  margin:0 0 4px;font-family:var(--display);font-weight:800;
  font-size:clamp(18px,1.6vw,23px);line-height:1.15;letter-spacing:-.01em;color:#fff;
}
.pf-edad{
  margin:0 0 10px;font-size:13px;font-weight:600;
  color:var(--sobre-oscuro-2);letter-spacing:.01em;
}
/* La descripción se LEE: nada de versalita cursiva de 11px, que es un
   detalle de lámina y en pantalla no se lee. */
.pf-det{margin:0;font-size:14.5px;line-height:1.5;color:var(--sobre-oscuro-2)}

/* ── Que la sección entre entera en un portátil de 13" ──
   La bajada va a medida ANCHA. `.bajada` está topada en 34ch, que
   con un párrafo de cuatro frases son SIETE renglones y 260px de
   alto: un tercio de la pantalla para el texto de entrada. A 64ch
   son tres renglones y la sección entra. El cuerpo no se toca —esa
   es la regla—; lo que se recorta es el aire. */
.sec-proceso .bajada{max-width:64ch}

/* Dos escalones por ALTO de cuadro. Un portátil de 13" deja entre
   610 y 790px útiles según el navegador y la barra de marcadores,
   contra los 900 de la pantalla: el alto del CUADRO es lo que manda,
   no el de la pantalla, y por eso la condición es `max-height` y no
   un ancho. Sólo de 1101px para arriba: abajo de eso la pista se
   parte en filas y mandan los escalones por ancho. */
@media (min-width:1101px) and (max-height:860px){
  .sec-proceso .bajada{margin-top:clamp(12px,2vh,22px)}
  .sec-proceso .pf-rotulos{margin-top:clamp(22px,3.4vh,40px)}
  .sec-proceso .pf-pista{margin-top:clamp(18px,2.8vh,32px)}
  .sec-proceso .dato-fecha{margin-top:clamp(16px,2.6vh,30px)}
}
@media (min-width:1101px) and (max-height:700px){
  .sec-proceso .bajada{margin-top:10px}
  .sec-proceso .pf-rotulos{margin-top:16px}
  .sec-proceso .pf-pista{margin-top:14px}
  .sec-proceso .dato-fecha{margin-top:12px}
  /* 22px es el alto exacto del punto (16 + 3 de borde a cada lado):
     menos que eso y el número se le monta encima. */
  .sec-proceso .pf-etapa{padding-top:22px}
  /* El relleno de la sección también. Hay que nombrar el atributo
     `[data-sec]` para ganarle a la regla del fondo vivo, que lo
     lleva y por lo tanto suma un selector más. */
  body.fondo-vivo main > section.sec-proceso[data-sec]{
    padding-block:calc(var(--header-h) + 6px) 4px;
  }
}

@media (max-width:1100px){
  /* Con la pista en dos filas la llave no puede apuntar a una columna:
     vuelve a ser una leyenda de dos rótulos, y el ámbito lo sigue
     diciendo el color del punto. */
  .sec-proceso .pf-rotulos{grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,28px)}
  .pf-rot-esc,.pf-rot-car{grid-column:auto}
  .pf-pista{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(26px,4vw,40px)}
  /* Con dos filas, una línea que cruza entera uniría etapas que no van
     seguidas: cada punto se une al siguiente con su propio tramo. */
  .pf-pista::before{display:none}
  .pf-etapa:not(:nth-child(3n))::after{
    content:"";position:absolute;left:16px;right:calc(-1 * clamp(14px,1.6vw,24px));
    top:7px;height:2px;background:currentColor;opacity:.35;z-index:0;
  }
  .pf-esc{color:var(--naranja)}
  .pf-car{color:var(--sobre-oscuro-3)}
}
/* En celular la sección pedía 1160px contra 844 de pantalla. Se
   recorta el AIRE —los saltos entre bloques y el alto de la bajada—,
   nunca la tipografía: el cuerpo de 14.5px es justo lo que se vino a
   arreglar de la versión anterior. */
@media (max-width:900px){
  .sec-proceso .bajada{font-size:clamp(15px,3.6vw,17px);margin-top:clamp(12px,2.4vw,18px)}
  .sec-proceso .pf-rotulos{margin-top:clamp(24px,5vw,34px)}
  .sec-proceso .dato-fecha{margin-top:clamp(20px,4vw,28px)}
  .pf-pista{margin-top:clamp(18px,3.4vw,26px)}
  .pf-etapa{padding-top:26px}
  .pf-det{font-size:14px;line-height:1.45}
}
@media (max-width:620px){
  .sec-proceso .pf-rotulos{grid-template-columns:1fr;gap:0}
  .pf-rot-car{display:none}
  .pf-pista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-etapa:not(:nth-child(3n))::after{display:none}
  .pf-etapa:not(:nth-child(2n))::after{
    content:"";position:absolute;left:16px;right:calc(-1 * clamp(14px,1.6vw,24px));
    top:7px;height:2px;background:currentColor;opacity:.35;z-index:0;
  }
}

/* ── Un evento con foto, precio y botón ──
   La ficha base es fecha + texto. Cuando el evento trae foto pasa a
   tres columnas; cuando trae precio o botón, crecen dentro del cuerpo
   sin tocar la fecha, que es la columna que alinea toda la lista. */
/* `.ev` es una grilla de dos columnas: fecha y texto. Cuando el
   evento trae afiche pasa a TRES, y la fecha sigue ocupando las dos
   filas para que la lista quede alineada. Sin esto el afiche se
   metía en la columna del texto y lo empujaba abajo. */
.ev-con-foto{grid-template-columns:auto auto 1fr}
.ev-con-foto .fecha{grid-row:1/3}
.ev-foto{grid-row:1/3;align-self:start}
.ev-cuerpo{min-width:0}
.ev-det{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--gris)}
.ev-precio{
  margin:10px 0 0;font-family:var(--display);font-weight:800;
  font-size:clamp(19px,1.7vw,24px);line-height:1.1;color:var(--tinta);
}
.ev-btn{margin-top:14px}
.ev-btn .btn{font-size:14px;padding:11px 20px;min-height:44px}
.ev-foto{
  width:clamp(96px,13vw,170px);
  border-radius:var(--radio-chico);overflow:hidden;background:var(--tinte);
}
/* Alto AUTOMÁTICO: un evento puede traer un afiche vertical, y
   forzarle 4:3 mostraba una franja del medio. El ancho lo fija la
   columna; el alto lo pone la imagen. */
.ev-foto img{display:block;width:100%;height:auto}
/* En angosto el afiche deja de ser una columna: con tres columnas el
   texto quedaba en un hilo de 180px y el botón se salía. Pasa a ir
   ARRIBA del texto, en la misma columna, y a un ancho contenido. */
@media (max-width:700px){
  .ev-con-foto{grid-template-columns:auto 1fr}
  .ev-foto{grid-column:2;grid-row:auto;width:min(168px,44vw);margin-bottom:10px}
  .ev-cuerpo{grid-column:2}
  .ev-precio{font-size:18px}
  .ev-btn .btn{width:100%;justify-content:center}
}

/* ── Pastillas por escuela, en la agenda del PRODE ──
   Cuatro escuelas que comparten días y horarios: sin esto, quien entra
   por «PRODE → Agenda» ve mezclados los partidos de cuatro barrios. */
.ag-escuelas{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 clamp(24px,3vw,34px);
}
/* `hidden` sólo pide `display:none` y cualquier regla de clase
   posterior lo pisa: sin esto las pastillas se veían también en la
   agenda de la fundación, donde no hay qué filtrar. Es la misma
   trampa de `.doc[hidden]` y de `.btn.btn-menu`. */
.ag-escuelas[hidden]{display:none}
.ag-escuelas a{
  font-family:var(--cuerpo);font-weight:600;font-size:13.5px;
  padding:10px 16px;min-height:44px;display:inline-flex;align-items:center;
  border:1px solid var(--linea);border-radius:var(--radio-s);
  color:var(--gris);text-decoration:none;background:var(--blanco);
}
.ag-escuelas a[aria-current="true"]{
  background:var(--naranja);border-color:var(--naranja);color:var(--tinta);
}
@media (hover:hover) and (pointer:fine){
  .ag-escuelas a:hover{border-color:var(--naranja);color:var(--tinta)}
  .ag-escuelas a[aria-current="true"]:hover{color:var(--tinta)}
}

/* ══ Dibujos de fondo para una sección ══════════════════════════════
   Los mismos garabatos del hero de la Fundación, disponibles para
   cualquier sección. Aquellos viven en `fundacion.css` con un
   posicionamiento calibrado para ESE hero; esto es el componente
   general, y por eso los dos conviven en vez de compartir clase.

   Sólo de 1360px para arriba, y el número está MEDIDO: `.env` topa en
   1240 y suma su relleno, así que a 1280 el texto arranca en 78px y un
   dibujo de 70px pegado al borde llega a 87. Se cruzan. El aire real
   recién alcanza a partir de ~1340; se toma 1360 con margen.

   Al 12% de opacidad, como los de la Fundación. Al 7% no se ven, y el
   pedido era agregar dibujos, no esconderlos. */
.dib-sec{position:relative;overflow:clip}
/* Sube el contenido por encima de los dibujos de fondo. Excluye el
   `<video>` porque un hero con video de fondo lo tiene en
   `position:absolute`, y esta regla —(0,2,0) contra el (0,1,1) de
   `.hero-video > video`— se lo pisaba: el video volvía al flujo, se
   comía los 1440px de la fila flex y empujaba el titular FUERA de la
   pantalla. Con `overflow-x:clip` no aparecía barra ni desborde que
   medir: el hero simplemente se veía sin texto. Pasaba en
   /fundacion/nosotros/ y en /como-empezar/. */
.dib-sec > *:not(.dib):not(video){position:relative;z-index:1}
.dib{display:none}

@media (min-width:1360px){
  .dib{
    display:block;position:absolute;z-index:0;
    height:auto;opacity:.12;pointer-events:none;
  }
  /* Las propiedades de animación van UNA POR UNA. El atajo
     `animation:` con un var() en la posición de la duración no se
     puede validar al parsear y el navegador descarta la declaración
     entera: el dibujo queda quieto y el CSS «está bien». Ya pasó dos
     veces. */
  .dib{
    animation-name:fu-flota;
    animation-duration:var(--dur,10s);
    animation-timing-function:ease-in-out;
    animation-delay:var(--esp,0s);
    animation-iteration-count:infinite;
  }
  @keyframes fu-flota{
    0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
    50%    {transform:translate3d(0,-9px,0) rotate(var(--giro,1.2deg))}
  }
  .dib-1{left:clamp(6px,1.4vw,30px); top:12%;  width:clamp(58px,5.4vw,104px); --dur:9s;    --esp:0s;   --giro:1.4deg}
  .dib-2{right:clamp(6px,1.4vw,30px);top:16%;  width:clamp(64px,6vw,120px);   --dur:11s;   --esp:.6s;  --giro:-1.6deg}
  .dib-3{left:clamp(10px,2vw,44px);  top:62%;  width:clamp(44px,4vw,76px);    --dur:8.5s;  --esp:1.2s; --giro:1.1deg}
  .dib-4{right:clamp(10px,2vw,44px); top:66%;  width:clamp(54px,5vw,96px);    --dur:10.5s; --esp:.3s;  --giro:-1.2deg}
  .dib-5{right:clamp(16px,4vw,80px); top:40%;  width:clamp(30px,2.6vw,44px);  --dur:7.5s;  --esp:.9s;  --giro:2.2deg}
}

/* DESPUÉS del bloque que anima: las dos reglas tienen la misma
   especificidad (0,1,0) y cuando empatan decide el orden del archivo.
   Puesto antes, los dibujos seguían flotando con «reducir movimiento». */
@media (prefers-reduced-motion:reduce){
  .dib{animation-name:none}
}

/* ═══ DOS BOTONES EN CELULAR VAN AL LADO, Y DEL MISMO TAMAÑO ═══
   Apilados y cada uno del ancho de su rótulo, un par de botones se
   lee como dos cosas distintas: uno ancho y uno angosto, uno arriba
   del otro. Al lado y con el mismo ancho se leen como lo que son,
   dos caminos del mismo peso.

   La condición es `> .btn + .btn` sin un tercer hijo, o sea DOS
   botones de verdad. No alcanza con contar hijos: media docena de
   pares del sitio son un botón y un enlace de texto —`.link`—, y
   estirar un enlace de texto al tamaño de un botón es convertirlo en
   otra cosa. Un tercer botón tampoco entra: tres columnas en 350px
   dejan 108px por botón.

   `white-space:normal` es obligatorio: `.btn` trae `nowrap` y sin
   esto el rótulo largo se sale de la caja en vez de partirse. Y
   `align-items:stretch` en la grilla es lo que iguala los ALTOS
   cuando uno parte en dos renglones y el otro no. */
@media (max-width:900px){
  .par-btn:has(> .btn + .btn):not(:has(> :nth-child(3))),
  .hero-acciones:has(> .btn + .btn):not(:has(> :nth-child(3))),
  .acciones:has(> .btn + .btn):not(:has(> :nth-child(3))),
  .sede-acciones:has(> .btn + .btn):not(:has(> :nth-child(3))){
    display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:10px;
  }
  .par-btn:has(> .btn + .btn):not(:has(> :nth-child(3))) > .btn,
  .hero-acciones:has(> .btn + .btn):not(:has(> :nth-child(3))) > .btn,
  .acciones:has(> .btn + .btn):not(:has(> :nth-child(3))) > .btn,
  .sede-acciones:has(> .btn + .btn):not(:has(> :nth-child(3))) > .btn{
    width:100%;max-width:none;height:auto;min-height:52px;
    white-space:normal;text-align:center;line-height:1.24;
    padding:12px 10px;
  }
}

/* ═══ /contacto/ · «Cambiemos nuestro entorno juntos» ═══════════════
   Sale de `contacto.pdf`. El marco de ventana con su barra y sus tres
   puntos, y la burbuja del corazón, se dibujan con CSS y un SVG en
   línea: de la lámina se usa sólo la foto.

   Los botones NO son las píldoras de la lámina. El sitio tiene UN
   modelo de botón —cuadrado de esquinas redondeadas, que es la
   personalidad que pidió la fundación— y la lámina de contacto no lo
   cambia: lo que se toma de ella es la composición, el fondo navy y
   las seis puertas. Es la misma decisión que ya se tomó con el texto
   blanco sobre naranja. */
.co-juntos{background:var(--navy);color:var(--blanco)}
.co-duo{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(30px,4.6vw,80px);align-items:center;
}
.co-logo{display:block;width:clamp(150px,15vw,210px);height:auto;margin-bottom:clamp(20px,2.6vw,34px)}

/* El marco de ventana */
/* Columna flex: la barra de arriba mide lo suyo y la foto se queda
   con TODO lo que sobra. Antes la foto llevaba un alto propio
   —`clamp(300px,34vw,480px)`— que sólo coincidía con el alto de la
   fila por casualidad: en cuanto no coincidía quedaba una franja del
   fondo asomando bajo la foto y el marco se leía como una tarjeta a
   medio llenar. */
.co-marco{
  position:relative;margin:0;isolation:isolate;
  border-radius:var(--radio-m);overflow:visible;
  max-width:440px;
  display:flex;flex-direction:column;
}
.co-barra{
  display:flex;align-items:center;gap:7px;
  background:#F04A25;border-radius:var(--radio-m) var(--radio-m) 0 0;
  padding:9px 14px;
}
.co-barra i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.92)}
.co-barra i:nth-child(2){border-radius:2px}
.co-barra i:nth-child(3){border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
.co-marco > .co-barra{flex:0 0 auto}
.co-marco > img{
  display:block;width:100%;
  flex:1 1 auto;min-height:clamp(300px,34vw,480px);height:auto;
  object-fit:cover;object-position:50% 22%;
  border-radius:0 0 var(--radio-m) var(--radio-m);
}
/* La burbuja del corazón, pegada al filo derecho */
.co-burbuja{
  position:absolute;z-index:2;
  right:clamp(-28px,-2vw,-14px);top:14%;
  width:clamp(84px,8.4vw,128px);aspect-ratio:1.18;
  background:var(--tinte);border-radius:var(--radio-s);
  display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(10,10,11,.28);
}
.co-burbuja::after{
  content:"";position:absolute;left:18%;bottom:-11px;
  width:20px;height:12px;background:var(--tinte);
  clip-path:polygon(0 0,100% 0,26% 100%);
}
.co-burbuja svg{width:52%;height:auto;color:var(--naranja);display:block}

/* 53.3px en la lámina sobre 1024.5 de ancho = 5.2vw */
.co-t{
  margin:0 0 clamp(24px,3vw,44px);
  font-family:var(--cuerpo);font-weight:800;
  font-size:clamp(28px,4vw,58px);line-height:1.08;letter-spacing:-.022em;
  color:var(--blanco);max-width:16ch;
}
.co-puertas{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.1vw,16px);
}
.co-puertas .btn{width:100%;min-height:58px;white-space:normal;text-align:center;line-height:1.24}

.co-redes{
  list-style:none;margin:clamp(26px,3vw,44px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,1.8vw,26px);
}
.co-redes a{
  display:grid;place-items:center;width:44px;height:44px;
  color:var(--blanco);
  transition:color var(--t-ui) var(--sal),transform var(--t-ui) var(--sal);
}
.co-redes svg{width:26px;height:26px;display:block}
@media (hover:hover) and (pointer:fine){
  .co-redes a:hover{color:var(--naranja-claro);transform:translateY(-2px)}
}

@media (max-width:900px){
  .co-duo{grid-template-columns:minmax(0,1fr);gap:clamp(28px,7vw,44px)}
  .co-marco{max-width:340px;margin-inline:auto}
  .co-logo{margin-inline:auto}
  .co-izq{text-align:center}
  .co-t{max-width:none}
  .co-burbuja{right:-12px}
}
@media (max-width:520px){
  .co-puertas{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .co-redes a{transition-duration:.01ms}
}

/* ═══════════════════════════════════════════════════════════════
   PREGUNTAS FRECUENTES · un solo componente para todo el sitio

   Había tres acordeones distintos: el de /donar/ —el que pidió la
   fundación—, el de /becas/ con una flechita gris y el de
   /como-empezar/, que era un <details> pelado con el triangulito del
   navegador. Tres respuestas a la misma pregunta en tres páginas que
   se visitan seguidas.

   Es button + panel y NO <details>: es lo que un lector de pantalla
   anuncia siempre como contraído o expandido, y responde a Enter y a
   Espacio sin escribir una línea. Lo maneja `prode.js`.

   Las medidas van en clamp. /donar/ las vuelve a declarar en
   múltiplos de --u, porque esa página está calibrada contra su
   lámina y ahí el tamaño sale medido, no elegido.
   ═══════════════════════════════════════════════════════════════ */
.faq{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.1vw,16px)}
.faq-fila{background:var(--blanco);border-radius:var(--radio-m);overflow:hidden}
/* Sobre blanco la ficha blanca no se separaría del fondo: la raya no
   ocupa lugar, así que no cambia ninguna medida. Desde que el crema se
   fue, `--hueso` también es blanco: la raya va SIEMPRE salvo sobre el
   tinte, que es el único fondo que ya separa la ficha solo. */
.faq-fila{box-shadow:inset 0 0 0 1px var(--linea)}
.s-tinte .faq-fila,
.dn-tinte .faq-fila{box-shadow:none}

.faq-fila h3{margin:0;font:inherit}
.faq-b{
  width:100%;border:0;background:transparent;cursor:pointer;
  display:flex;gap:clamp(12px,1.2vw,18px);align-items:center;justify-content:space-between;
  text-align:left;font-family:var(--cuerpo);font-weight:700;
  font-size:clamp(15px,1.45vw,21px);line-height:1.3;
  letter-spacing:0;text-transform:uppercase;color:var(--tinta);
  padding:clamp(16px,1.5vw,22px) clamp(18px,1.7vw,24px);
}
.faq-mas{
  flex-shrink:0;width:clamp(38px,3.3vw,48px);height:clamp(38px,3.3vw,48px);
  border-radius:50%;
  background:var(--naranja);color:var(--tinta);
  display:grid;place-content:center;
  transition:transform var(--t-ui) var(--sal),background-color var(--t-ui) var(--sal);
}
/* Con `place-content:center` la pista de la grilla se ajusta al
   contenido, así que un PORCENTAJE se resuelve contra un alto
   indefinido y da cero: el + quedaba invisible. Va en px. */
.faq-mas svg{width:clamp(16px,1.4vw,20px);height:clamp(16px,1.4vw,20px);display:block}
.faq-b[aria-expanded="true"] .faq-mas{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){
  .faq-b:hover .faq-mas{background:var(--naranja-hover)}
}
/* El panel se esconde con `display:none` por CLASE y no con el
   atributo `hidden`: cualquier regla de clase posterior le gana al
   atributo —la trampa de .doc[hidden] y de .btn.btn-menu—. */
.faq-p{display:none;padding:0 clamp(18px,1.7vw,24px) clamp(18px,1.7vw,24px)}
.faq-p.abierto{display:block}
.faq-p p{
  margin:0;font-family:var(--cuerpo);font-weight:400;
  font-size:clamp(14.5px,1.35vw,20px);line-height:1.48;color:var(--gris);max-width:62ch;
}
.faq-p p + p{margin-top:.7em}
/* Una respuesta que enumera requisitos va como LISTA y no como un
   párrafo con comas: se lee de un vistazo y cada punto se puede
   traducir por separado. Hereda el cuerpo del párrafo, así que si
   cambia uno cambian los dos. */
.faq-lista{
  margin:0;padding-left:1.15em;
  font-family:var(--cuerpo);font-weight:400;
  font-size:clamp(14.5px,1.35vw,20px);line-height:1.48;color:var(--gris);
  max-width:62ch;
}
.faq-lista li + li{margin-top:.5em}
.faq-lista li::marker{color:var(--naranja-texto)}
@media (prefers-reduced-motion:reduce){
  .faq-mas{transition-duration:.01ms}
}

/* ══ El botón del menú SIEMPRE se ve ════════════════════════════════
   Era un `.btn-fantasma`: sin fondo y sin borde, o sea tres rayas
   sueltas a merced de lo que hubiera detrás. En un teléfono es la
   ÚNICA puerta a la navegación, y al scrollear se perdía —el fondo
   vivo de la portada le cambia el color debajo sección a sección, y
   sobre una foto o sobre el naranja las rayas desaparecían—.

   Ahora es una ficha llena que se invierte con el tema: tinta sobre
   blanco o blanco sobre tinta, 19:1 en los dos casos, y se lee como
   un control en vez de como un adorno. Va al final del archivo
   porque le tiene que ganar a `.btn-fantasma` en cualquier orden. */
.btn.btn-menu{
  background:var(--tinta);color:var(--blanco);
  border-color:var(--tinta);
  padding-inline:10px;border-radius:var(--radio-s);
}
body.tema-oscuro header .btn.btn-menu,
body.fondo-vivo.tema-oscuro header .btn.btn-menu{
  background:var(--blanco);color:var(--tinta);border-color:var(--blanco);
}
@media (hover:hover) and (pointer:fine){
  .btn.btn-menu:hover{background:var(--naranja);color:var(--tinta);border-color:var(--naranja)}
  body.tema-oscuro header .btn.btn-menu:hover{background:var(--naranja);border-color:var(--naranja)}
}

/* ══ La lista de hechos, apilada en celular ═════════════════════════
   La fila es flex con `flex-wrap`, así que se partía SÓLO cuando el
   rótulo y el valor no entraban juntos: en «Estado institucional»
   tres filas quedaban en dos columnas —con el valor a la derecha— y
   cuatro apiladas con el valor a la izquierda, según lo largo que
   fuera cada texto. Se leía como una lista desordenada, no como una
   tabla.

   Abajo de 620px se apilan TODAS, siempre igual: rótulo arriba y
   chico, valor abajo y alineado a la izquierda.

   La excepción es el cuadro de la gestión de la portada, que tiene
   presupuesto de alto contado: ahí las filas son cortas, entran en un
   renglón y apilarlas estiraría la sección. */
@media (max-width:620px){
  /* Sin tocar `padding-block`: los escalones por alto de pantalla de
     la gestión viven más arriba en el archivo y esta regla se los
     pisaba, estirando esa sección. */
  .hechos > div{display:block}
  .hechos dt,.hechos .et{display:block;font-size:13.5px;margin-bottom:3px}
  .hechos dd,.hechos .vl{display:block;text-align:left;font-size:16.5px}
  /* Y ahí se devuelven sus valores EXACTOS, no unos parecidos: la
     regla del sitio es recortar aire, nunca tipografía. */
  .sec-gestion .hechos > div{display:flex}
  .sec-gestion .hechos dt,.sec-gestion .hechos .et{font-size:15px;margin-bottom:0}
  .sec-gestion .hechos dd,.sec-gestion .hechos .vl{text-align:right;font-size:16px}
}

/* ══ La portada de /contacto/, con foto de fondo ════════════════════
   Entra en UNA pantalla de notebook: el alto sale de la ventana menos
   la barra, no de los rellenos de `.cabecera`, que a 1366×657 pedían
   más de lo que hay. */
.co-hero{
  position:relative;overflow:clip;background:var(--carbon);
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center;
  padding-block:clamp(18px,2.4vh,34px);
  padding-top:calc(var(--header-h) + clamp(18px,2.4vh,34px));
}
.co-hero > .env{position:relative;z-index:1;width:100%}
.co-hero-foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
  z-index:0;pointer-events:none;
}
/* Dos velos: uno parejo que baja el brillo general y otro que carga
   la izquierda, que es donde vive el texto. Medido sobre los píxeles
   pintados, no sobre el color declarado. */
.co-hero::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(90deg, rgba(10,10,11,.88) 0%, rgba(10,10,11,.72) 46%, rgba(10,10,11,.52) 100%),
    linear-gradient(180deg, rgba(10,10,11,.52) 0%, rgba(10,10,11,.34) 100%);
}
.co-hero .miga,.co-hero .miga a{color:rgba(255,255,255,.78)}
.co-hero .miga [aria-current]{color:#fff}
.co-hero .dato{color:#fff;opacity:.92}
.co-hero h1{color:#fff}
.co-hero .bajada{color:rgba(255,255,255,.88);max-width:54ch}
@media (max-width:820px){
  .co-hero-foto{object-position:50% 38%}
  .co-hero::after{background:linear-gradient(180deg, rgba(10,10,11,.62) 0%, rgba(10,10,11,.86) 100%)}
  .co-hero .bajada{max-width:100%}
}

/* ── Segundo escalón: el ritmo INTERNO de la sección ───────────────
   Recortar el relleno de la sección arregla la mitad de los casos; la
   otra mitad son secciones con mucho adentro —una grilla de fichas,
   un acordeón de siete preguntas— donde lo que sobra son los saltos
   entre bloques.

   Son utilidades de una sola declaración y llevan `!important`, así
   que acá hay que repetirlo o no ganan.

   Otra vez: sólo AIRE. Ningún `font-size` en todo este bloque. */
@media (min-width:901px) and (max-height:900px){
  .mt-72{margin-top:clamp(40px,5.4vh,62px) !important}
  .mt-56{margin-top:clamp(32px,4.2vh,46px) !important}
  .mt-40{margin-top:clamp(28px,3.6vh,36px) !important}
  .mt-32{margin-top:28px !important}
  .g-40{gap:32px}.g-32{gap:27px}.g-24{gap:21px}
}
@media (min-width:901px) and (max-height:760px){
  .mt-72{margin-top:clamp(34px,4.6vh,50px) !important}
  .mt-56{margin-top:clamp(27px,3.6vh,38px) !important}
  .mt-40{margin-top:clamp(23px,3vh,30px) !important}
  .mt-32{margin-top:24px !important}
  .mt-24{margin-top:20px !important}
  .g-40{gap:28px}.g-32{gap:24px}.g-24{gap:18px}.g-20{gap:16px}.g-16{gap:14px}
}
@media (min-width:901px) and (max-height:660px){
  .mt-72{margin-top:clamp(30px,4vh,42px) !important}
  .mt-56{margin-top:clamp(24px,3.2vh,32px) !important}
  .mt-40{margin-top:clamp(20px,2.6vh,26px) !important}
  .mt-32{margin-top:21px !important}
  .mt-24{margin-top:17px !important}
  .g-40{gap:25px}.g-32{gap:21px}.g-24{gap:16px}.g-20{gap:14px}.g-16{gap:12px}.g-12{gap:10px}
}

/* ── Tercer escalón: los bloques que más alto ocupan ───────────────
   La bajada debajo de un titular, el relleno de las fichas y el de
   los paneles. Sigue sin tocarse un solo `font-size`. */
@media (min-width:901px) and (max-height:900px){
  .cabecera{padding-top:calc(var(--header-h) + clamp(26px,4vh,56px));padding-bottom:clamp(24px,3.4vh,48px)}
  .cabecera .bajada{margin-top:clamp(14px,2vh,28px)}
  .cabecera .dato{margin-bottom:clamp(8px,1vh,12px)}
  .malla > .celda{padding:clamp(16px,2.2vh,22px)}
  .panel > div{padding:clamp(16px,2.2vh,24px)}
}
@media (min-width:901px) and (max-height:760px){
  .cabecera{padding-top:calc(var(--header-h) + clamp(18px,2.6vh,34px));padding-bottom:clamp(16px,2.4vh,30px)}
  .cabecera .bajada{margin-top:clamp(10px,1.6vh,18px)}
  .malla > .celda{padding:clamp(13px,1.8vh,18px)}
  .panel > div{padding:clamp(13px,1.8vh,18px)}
  .parrafo + .parrafo{margin-top:.7em}
}
@media (min-width:901px) and (max-height:660px){
  .cabecera{padding-top:calc(var(--header-h) + clamp(14px,2vh,24px));padding-bottom:clamp(12px,1.8vh,22px)}
  .malla > .celda{padding:clamp(11px,1.5vh,15px)}
  .panel > div{padding:clamp(11px,1.5vh,15px)}
}

@media (min-width:901px) and (max-height:760px){
  body.fondo-vivo main > section[data-sec]{padding-block:calc(var(--header-h) + 14px) 14px}
}

/* ── Cuarto escalón: los componentes que más se repiten ────────────
   Las secciones que seguían pasándose por poco comparten tres
   componentes: el acordeón de preguntas, las tres puertas con foto de
   «¿Querés sumarte?» y las fichas con media. */
@media (min-width:901px) and (max-height:900px){
  .faq{gap:clamp(8px,1.1vh,12px)}
  .faq-b{padding:clamp(12px,1.7vh,18px) clamp(16px,1.6vw,22px)}
  .faq-p{padding:0 clamp(16px,1.6vw,22px) clamp(12px,1.7vh,18px)}
}
@media (min-width:901px) and (max-height:760px){
  .faq{gap:clamp(6px,.9vh,9px)}
  .faq-b{padding:clamp(9px,1.3vh,13px) clamp(14px,1.4vw,18px)}
  .faq-p{padding:0 clamp(14px,1.4vw,18px) clamp(9px,1.3vh,13px)}
  .faq-mas{width:clamp(32px,4.4vh,38px);height:clamp(32px,4.4vh,38px)}
  /* La media de una ficha deja de imponer su alto. Va con `height` y
     anulando el `aspect-ratio`, NO con `max-height`: con una
     proporción puesta, topar el alto encoge la caja por los DOS lados
     y la foto de la ficha de escuela quedaba de 178px de ancho en una
     columna de 557. El recorte lo hace el `object-fit:cover` que la
     imagen ya tiene.

     Y acá NO va ningún tope sobre `.marco img`. Lo tuvo y fue un
     error: `.marco img` es `width:100%;height:100%;object-fit:cover`
     —está hecha para LLENAR su marco—, así que toparle el alto la deja
     más chica que la caja y asoma el fondo. En la portada la foto de
     «Juntos formamos ciudadanos» quedaba de 263px en un marco de 495.
     Si hay que achicar una media, se achica el MARCO. */
  .malla > .celda .celda-foto{aspect-ratio:auto;height:clamp(120px,22vh,180px)}
}
@media (min-width:901px) and (max-height:660px){
  .faq-b{padding:8px 14px}
  .faq-p{padding:0 14px 8px}
  .malla > .celda .celda-foto{height:clamp(100px,18vh,140px)}
}


/* ══ El aviso de «todavía no está disponible» ═══════════════════════
   Va arriba de los cinco formularios de postulación, que se pueden
   recorrer pero NO envían nada: el endpoint sigue vacío. El marcado lo
   escribe `referencia/formularios/banner.py`, porque esas páginas las
   reescribe un generador y un aviso puesto a mano se pierde en la
   primera reexportación.

   Es naranja a sangre con TINTA encima, no blanco: blanco sobre
   #FD6500 da 2.98:1 y reprueba WCAG. La regla de siempre.

   Y declara su propio relleno porque `section{padding-block:…}` le
   daría hasta 148px por lado: un cartel, no una sección de contenido. */
.aviso-obra{
  background:var(--naranja);color:var(--tinta);
  padding-block:clamp(26px,3.4vw,46px);
  border-bottom:3px solid var(--tinta);
}
.aviso-obra-rot{
  margin:0;font-family:var(--cuerpo);font-weight:700;
  font-size:clamp(11px,1vw,13px);letter-spacing:.14em;text-transform:uppercase;
}
.aviso-obra-t{
  margin:clamp(8px,1vw,14px) 0 0;
  font-family:var(--display);font-weight:800;line-height:1.02;
  font-size:clamp(28px,4.4vw,62px);
  text-transform:uppercase;letter-spacing:-.01em;
  max-width:20ch;
}
.aviso-obra-p{
  margin:clamp(12px,1.4vw,20px) 0 0;
  font-family:var(--cuerpo);font-size:clamp(15px,1.3vw,19px);
  line-height:1.45;max-width:62ch;
}
.aviso-obra-acc{margin:clamp(16px,1.8vw,26px) 0 0}
/* El botón sobre naranja no puede ser naranja: va en tinta, lleno. */
.aviso-obra .btn{background:var(--tinta);color:var(--blanco);border-color:var(--tinta)}
@media (hover:hover) and (pointer:fine){
  .aviso-obra .btn:hover{background:var(--carbon);border-color:var(--carbon)}
}