/* ============================================================
   V5.1 — LEGIBILIDAD Y CENTRADO
   ------------------------------------------------------------
   Se carga DESPUÉS de base/inicio/paginas/admin para ganar la
   cascada sin tocar el diseño que la Fundación ya aprobó.
   No se cambia ningún color, ni el mapa, ni el dominio, ni la
   animación del logo que abre la portada.

   1. Cuerpo mínimo 18px · H2 32px · H3 26px · interlineado 1.6
   2. Todo centrado de verdad, incluidos los contenedores flex
      (que necesitan justify-content, no solo text-align)
   3. Tarjetas legibles: la oscura es solo la del mapa
   ============================================================ */

/* ————— 1. Escala base ————— */
html{font-size:19px}                 /* sube ~19% todo el texto en rem */
body{font-size:18px;line-height:1.6;text-align:center}

/* ————— 2. Piso de 18px en todo el texto corrido ————— */
body p,body li,body dd,body dt,
.cab-pagina__lede,.bloque__cab p,.ficha p,.nota-honesta p,
.prog p,.noticia p,.noticias-vacia p,.noticias-vacia small,
.contacto__ficha>p,.proposito p,.lectura-noticia__cuerpo p,
.lectura-noticia__cuerpo li,
.taller-banda__txt p,.documentos__nota,.contacto__nota,
.formulario p,.formulario small,.canal__txt span,
.ir__tarjeta p,.consola p,.bloque p{
  font-size:18px!important;line-height:1.6!important}

/* ————— 3. Títulos ————— */
h2,.bloque__cab h2,.ir__cab h2,.territorio .ficha h3,.taller-banda__txt h2{
  font-size:clamp(32px,4.4vw,44px)!important;line-height:1.15!important}
h3,.fichas .ficha h3,.principal h3,.prog h3,.noticia h3,
.contacto__ficha h3,.formulario h3,.ir__tarjeta h3,
.proposito h3,.persona h3,.lectura-noticia__cuerpo h3,
.tarjeta h2,.acceso h3{
  font-size:26px!important;line-height:1.25!important}

.cab-pagina h1,.portada__titulo,.error404__num{text-align:center}

/* ————— 4. Valores y principios ————— */
.valores li{font-size:22px!important;line-height:1.4!important;font-weight:700!important}
.valores ul{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.valores__rotulo{font-size:18px!important}
.valores{text-align:center}

/* ————— 5. Centrado del texto —————
   body * es una base floja (especificidad 0,0,0,1): cualquier
   clase con text-align propio lo pisa. Por eso más abajo se
   neutralizan una por una las reglas que empujan a la izquierda. */
body *{text-align:center}
p,li,h1,h2,h3,h4,h5,h6,figcaption,blockquote,dt,dd,label,legend,
summary,.rotulo,.chip,.btn,.tag,.sello-sticker,.canal__txt b,
.cookie-op b,.placa figcaption,.noticia__leer{
  text-align:center!important}

/* ————— 6. Centrado de los contenedores FLEX —————
   Un flex NO se centra con text-align: necesita justify-content
   (eje principal) o align-items (eje cruzado). Esto es lo que
   dejaba pegadas a la izquierda las pastillas, las migas, la
   barra «Estás en la página» y el pie. */

/* 6.1. Filas de pastillas, botones y etiquetas */
.enchufes,.portada__acciones,.consola .consola__leds,.migas,
.prog__acciones,.nota-honesta,.leyenda,.noticia__meta,
.placa figcaption,.escena__nota,.chips,.brujula__titulo,
.panel__tabs,.editor__pie,.subida,.acceso__fila,.origen-fila,
.menu-enlace,.cookie-op,.leyenda,.micro{
  justify-content:center;flex-wrap:wrap;text-align:center}

/* 6.2. Columnas: los hijos se centran en el eje cruzado */
.proposito,.principal,.persona,.ir__aviso-txt,.ir__tarjeta,
.canal__txt,.social small,.panel__marca span,.acceso__item .correo-txt,
.quien-txt,.noticia__cuerpo,.pie__lema,.menu-movil__pie,
.placa figcaption,.lockup__txt,.campo-f{
  align-items:center}

/* 6.3. Bloques que se centran solos */
.migas,.cab-pagina__lede,.bloque__cab,.portada__lede,.proposito,
.principal,.persona,.ficha,.prog,.noticia,.contacto__ficha,.canal,
.ir__tarjeta,.taller-banda__txt,.brujula .contenedor,.brujula__flechas,
.pie__lema,.form-estado,.documentos__nota,.contacto__nota{
  margin-inline:auto}

/* 6.4. Rejillas: el contenido de cada celda al centro */
.equipo,.noticias-grid,.itinerario,.documentos,.ir__grid,
.contacto,.canales,.valores ul,.pie__grid,.rejilla-campos,.vista{
  justify-items:center}

/* 6.5. Pie de página */
.pie__grid > *{justify-items:center}
.pie ul{justify-items:center}
.pie__social{align-items:center;justify-items:center}
.pie__base{justify-content:center;flex-wrap:wrap}
.pie__lema{margin-inline:auto;max-width:34ch}
.pie__sello{align-self:center}
.pie a[href*="wa.me"],.pie .social{white-space:nowrap}

/* 6.6. Aviso de cookies */
.cookies__txt,.cookies__txt p,.cookies__acciones{text-align:center}
.cookies__acciones{align-items:center}

/* 6.7. Cajón lateral del menú */
.menu-movil{align-items:center}
.menu-enlace .menu-flecha{margin-left:10px}

/* 6.8. Botones con icono: el contenido va al medio del botón */
.btn,.nav a,.nav-admin,.social,.verificando,.btn-huella,
.placa figcaption,.prog__mas,.prog__estado,.cookie-op b{
  justify-content:center}

/* ————— 7. Tarjetas legibles —————
   BUG DE LA V4: la tarjeta oscura del mapa se aplicaba a TODAS las
   .ficha, así que «Misión / Visión / Nuestro origen» quedaban con
   texto gris oscuro (#3C4247) sobre fondo casi negro (#1D2125):
   contraste 1,9:1, ilegible. Aquí la clara se devuelve a las de
   contenido y la oscura se acota al territorio. */
.fichas .ficha{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--blanco);border:var(--borde);border-radius:var(--radio);
  box-shadow:var(--sombra-1);padding:26px 26px 24px;color:var(--tinta)}
.fichas .ficha h3{color:var(--tinta)}
.fichas .ficha p{color:var(--tinta-2)}
.fichas .ficha .ficha__num{background:var(--azul-suave);color:var(--tinta);
  border:1.5px solid rgba(17,20,23,.16);box-shadow:none}

.territorio .ficha{background:var(--noche-2);color:#EDEBE3;
  border:2px solid #000;
  box-shadow:0 18px 36px rgba(17,20,23,.16) rgba(0,0,0,.55)}
.territorio .ficha h3{color:#fff}
.territorio .ficha p{color:#C9C6BD}
.territorio .ficha__sede span{color:#EDEBE3}

/* la rejilla del contenido también es una tarjeta clara */
.prog,.noticia,.persona{background:var(--blanco);color:var(--tinta)}

/* ————— 8. Quitar las reglas que forzaban a la izquierda ————— */
.error404__paginas{text-align:center}
.error404__paginas ul{justify-content:center}
.origen-ayuda,.diag{text-align:center}
/* con padding-left:0 los números de la lista quedaban colgando FUERA de
   la tarjeta, pegados al borde rojo. Con list-style:inside el número pasa
   a formar parte de la línea, y como el texto va centrado, la línea
   entera se centra bien. */
.diag ol{padding-left:0}
.diag ol li{list-style-position:inside}
.diag ol li::marker{font-weight:700}
.cookies-panel__pie{justify-content:center}

/* el botón de cerrar la noticia usaba float (incompatible con centrar) */
.lector-noticia__cerrar{float:none;display:block;margin-inline:auto}

/* los dos botones de la brújula quedaban en sentidos opuestos */
.brujula__btn{justify-content:center;text-align:center}
.brujula__btn--siguiente{justify-content:center;text-align:center}
.brujula__btn span{align-items:center}

/* ————— 9. Controles de formulario ————— */
.campo label,.campo-f label,.form-estado,.campo__hint{text-align:center!important}
.campo input,.campo select,.campo textarea,
.campo-f input,.campo-f select,.campo-f textarea{
  font-size:18px!important;text-align:center}
.formulario,.form-estado{justify-content:center}
.campo-f{text-align:center}

/* ————— 10. Píldoras, chips y etiquetas: legibles ————— */
.chip,.rotulo,.persona__rol,.persona__indice,.principal__cargo,
.valores__rotulo,.tag,.noticia__meta time,.pie h4,.migas,
.tooltip-mapa i,.sello-sticker,.fichas .ficha__num{
  font-size:16px!important;letter-spacing:.06em!important}

/* ————— 11. Cabecera: el logo manda, el menú se acomoda —————
   Al subir la letra el menú creció y le aplastó el bloque del logo:
   a 1440 el isotipo quedaba con el subtítulo partido en 4 líneas.
   Aquí el logo deja de encogerse y el menú baja a 14.5px (chrome de
   navegación, no texto corrido) hasta que quepa entero.
   La animación de apertura de la portada NO se toca. */
.lockup{flex:none!important}
.lockup__txt{flex:none}
.lockup__txt b,.lockup__txt small{white-space:nowrap}
.cabecera__in{gap:16px}
.nav{flex:none!important;gap:0!important}
.nav a{font-size:14.5px!important;padding:.5em .5em!important;letter-spacing:-.01em}
.nav a.activo{padding:.5em .57em!important}
.nav .nav-cta{padding:.5em .7em!important;font-size:14.5px!important;margin-left:6px}
.nav-admin{font-size:14.5px!important;padding:.5em .66em!important;margin-left:6px}
.menu-btn{flex:none}

/* por debajo de 1240 el menú horizontal ya no cabe con el logo entero:
   se usa el cajón lateral. 1240 es el punto exacto en que el
   contenedor alcanza sus 1180px. */
@media (max-width:1239px){
  .nav{display:none!important}
  .menu-btn{display:flex!important}
  .lockup{margin-right:auto}
}
@media (min-width:1240px){
  .menu-btn{display:none!important}
}

/* ————— 12. Celulares angostos: que nada se corte ————— */
@media (max-width:430px){
  html{font-size:18px}
  body{font-size:18px}
  /* el nombre de la fundación + isotipo + botón de menú caben justos */
  .lockup__txt b{font-size:.78rem!important;letter-spacing:-.02em}
  .lockup__txt small{font-size:.54rem!important;letter-spacing:.14em}
  .lockup__iso{width:32px!important}
  .cabecera__in{gap:12px}
  .contenedor{width:min(var(--ancho),100% - 32px)}
  .valores li{font-size:20px!important}
  .brujula__paso{font-size:.72rem!important}
}
@media (max-width:360px){
  .lockup__txt small{display:none}
  .cabecera__in{gap:10px}
  .lockup__txt b{font-size:.76rem!important}
  .menu-btn{width:44px;height:44px}
}

/* ————— 13. Los media del sitio que mandan a la izquierda —————
   Estas reglas tienen especificidad de clase y ganan a «body *»,
   así que hay que neutralizarlas aquí, no antes. */
@media (max-width:980px){
  .cookies__tarjeta{text-align:center}
}
@media (max-width:720px){
  .principal{text-align:center}
  .principal__marco{margin-inline:auto}
  .pie__grid{grid-template-columns:1fr}
  .pie__base{flex-direction:row;justify-content:center}
  .migas{flex-direction:row}
  .portada__acciones{flex-direction:column}
}
@media (max-width:720px){
  .brujula__flechas{flex-direction:column;align-items:center}
}

/* ————— 14. Las fotos del collage nunca aparecían si GSAP falla —————
   `.rv--clip` arranca con opacity:0 y la regla que enciende los
   reveals (.rv.in…) NO lo incluye: solo le abre el clip-path. Quedaba
   a cargo exclusivo de GSAP, así que si ese archivo no carga, las
   fotos de «Nosotros» se quedan invisibles para siempre. Con esto
   aparecen al terminar la animación, haya GSAP o no. */
.rv--clip,.rv--clip.in{opacity:1}
html.g-on .rv--clip{opacity:1}

/* ————— 15. PORTADA CENTRADA TAMBIÉN EN COMPUTADOR —————
   Este era lo último que quedaba pegado a la izquierda. El título,
   el texto, los botones y los cuatro módulos vivían en una columna a
   la izquierda con el robot al lado. En celular ya se apilaban solos,
   pero en computador esa columna quedaba a 297 px del centro con la
   pantalla en 1440 px (medido con Playwright), mientras todo lo demás
   del sitio sí estaba centrado.

   Ahora es una sola columna centrada de arriba abajo en cualquier
   ancho, igual que en celular. Los !important hacen falta porque
   .portada__grid tiene una regla propia en inicio.css y una clase
   normal de esta hoja no le gana. */
.portada__grid{
  grid-template-columns:minmax(0,1fr)!important;
  gap:clamp(34px,5vw,62px)!important;
  justify-items:center!important
}
.portada__txt{width:100%;max-width:780px;margin-inline:auto}
.portada__lede{margin-inline:auto}
.portada__escena{order:2;width:100%;max-width:600px;margin-inline:auto}
/* los cuatro módulos quedan centrados como conjunto */
.enchufes{justify-content:center}
.enchufes li{max-width:100%}

/* ————— 16. El resalte del título pisaba el párrafo de abajo —————
   El degradado de .marca-agua se dibuja hasta el 94% de la altura de
   su caja, y esa caja llega 26 px por debajo de la del título porque el
   line-height del h1 (90 px sobre 80 px de letra) la estira. Con los
   20 px de margen de siempre, el borde visible del resalte terminaba
   justo donde empezaba el párrafo: medido, se solapaban 6 px. */
.portada__titulo{margin-bottom:38px!important}
.portada__lede{margin-bottom:26px!important}

/* ————— 17. La leyenda de Redito quedaba tapada por la consola —————
   La consola negra cuelga 24 px por debajo de la ventana a propósito
   (como una repisa), pero el texto de debajo solo se separaba 6 px:
   medido, la consola le pisaba 17 px de los 29 que tiene. Al centrar
   la portada se nota mucho más, pero el error venía de antes. */
.escena__nota{margin-top:44px!important}

/* Los cuatro módulos en 2 + 2, no 3 + 1: se ven parejos y el bloque
   no queda escalonado. El ancho es solo el de la lista, el título
   sigue usando todo el de la columna. Medido a 1440 px: los cuatro
   glifos miden 172 + 245 + 300 + 375 px con 10 px de separación, así
   que 700 px deja la primera fila con dos y la segunda con los otros
   dos (y no cabe un tercero: 737 px). */
.enchufes{max-width:700px;margin-inline:auto}

/* ————— 18. Impresión ————— */
@media print{
  body{font-size:12pt;text-align:left}
  body *{text-align:left!important}
}

/* ————— 19. El chip de WhatsApp del pie puede envolver —————
   La regla «una sola línea» (.pie .social white-space:nowrap) obliga
   al chip a medir todo su texto sin partirse: en pantallas angostas
   desborda su columna y el borde de la ventana corta el óvalo. En
   móvil se permite partir el texto: mejor dos líneas que un óvalo
   incompleto. (Los svg además ya no se encogen: ver base.css.) */
@media (max-width:720px){
  .pie .social{white-space:normal}
}