/*
Theme Name: PBO Network Child
Theme URI: https://pbo.org.do
Description: Tema hijo de Hello Elementor para la red PBO / HDN / Diagnostica Social. Dos lenguajes visuales sobre un mismo sistema de tokens.
Author: Artec Agency
Template: hello-elementor
Version: 2.0.0
Text Domain: pbo-child
*/

/* ============================================================
   1. NUCLEO DEL SISTEMA — compartido por los tres sitios
   ============================================================ */
:root{
  --fd:"Outfit",system-ui,sans-serif;
  --fb:"Instrument Sans",system-ui,sans-serif;
  /* Radios: el lenguaje "rounded" */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-2xl:44px;
  --r-pill:999px;

  /* Ritmo vertical generoso (clave del look editorial) */
  --space-2xs:8px; --space-xs:16px; --space-sm:24px; --space-md:40px;
  --space-lg:64px; --space-xl:96px;
  /* Se aplica arriba y abajo de cada seccion, asi que entre dos
     seguidas el hueco es el doble: a 180px quedaban 360px de vacio. */
  /* Separacion de bloque: 48 a cada lado del limite = 96 de hueco,
     el mismo en toda la web y en cualquier ancho de pantalla. */
  --space-section:48px;
  /* Para los limites que se resuelven con UN solo margen o hueco de
     rejilla, en vez de con el relleno de los dos bloques. */
  --sep-entera:96px;
  /* Ritmo de los bloques que van dentro de un texto —galeria, cita,
     datos, consejo directivo, documentos—. Antes cada uno traia el
     suyo (96, 64 o 40px) y la pagina subia y bajaba de ritmo entre
     bloque y bloque. Uno solo, y el mismo arriba que abajo (P2). */
  --space-bloque:64px;
  --container:1200px; --container-narrow:680px;
  --gutter:clamp(24px,2.6vw,34px);   /* aire lateral de pagina */

  /* Escala tipografica fluida */
  --fs-display:clamp(40px,5vw,84px);
  --fs-h1:clamp(34px,4.5vw,60px);
  --fs-h2:clamp(26px,3vw,40px);
  --fs-h3:clamp(20px,2vw,26px);
  --fs-body:clamp(15px,1.05vw,17px);
  --fs-small:13px;
  --fs-micro:11px;
  --lh-tight:1.08; --lh-head:1.2; --lh-body:1.75;
  --tracking-wide:.14em;

  /* Sombra sobria — casi imperceptible, nunca difusa */
  --shadow-card:0 1px 2px rgba(14,20,25,.03), 0 10px 30px -14px rgba(14,20,25,.16);
  --shadow-lift:0 2px 4px rgba(14,20,25,.04), 0 24px 56px -20px rgba(14,20,25,.22);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-suave:cubic-bezier(.33,1,.68,1);   /* salida progresiva, sin tiron */
  --btn-fs:13px;                            /* texto de los botones de accion */
  --btn-pad:7px 18px;
}

/* ============================================================
   2. PALETA A — "EDITORIAL"  (PBO + Diagnostica Social)
      Muestreada del mockup 10.8. Canvas neutro, acento contenido.
      Es el default de la red.
   ============================================================ */
:root{
  --canvas:#EEF0F4;
  --surface:#FFFFFF;
  --surface-alt:#E7E9ED;
  --line:#E0E2E6;
  --ink:#0E1419;
  --ink-soft:#3A4149;
  --muted:#9B9D9E;
  --ghost:#E4E6EA;        /* tipografia fantasma decorativa */

  /* Marca PBO — colores tomados del logo, no del CSS del sitio viejo.
     Verde = overol del nino; rojo = vestido de la nina; sand = tono de piel. */
  --accent:#258F52;        /* acento de sistema: enlaces, activos, foco */
  --accent-dark:#1C7040;
  --cta:#D64545;           /* donacion: el rojo de la marca */
  --cta-dark:#B93A3A;
  --sand:#E7B381;
  --bar:#122135;

  /* Color de seleccion: violeta. El naranja quedaba pegado al rojo del
     boton de donar y al arena del sistema, y en vez de leerse como
     "esto es lo que has marcado" parecia otro color de marca. */
  --select:#6D4AC7;
  --select-soft:#8A6BE0;           /* barra de red y mega menu: azul noche */
}


/* ============================================================
   2 bis. NEUTRALIZAR LOS BOTONES DEL TEMA PADRE
   Hello Elementor pinta TODO <button> con su magenta (#cc3366): borde y
   texto en reposo, y relleno completo en :hover y :focus. Eso se colaba
   en cualquier botón nuestro que no declarase fondo en los tres estados
   —eran 24— y salía un cuadrado magenta al pasar el ratón.
   Va aquí arriba, y no al final, a propósito: con la MISMA especificidad
   que el tema padre gana por orden de hoja (la del hijo carga después),
   y al estar antes que los componentes, cualquier regla de componente
   posterior le gana sin necesidad de !important.
   ============================================================ */
button,
[type="button"],
[type="submit"],
[type="reset"],
button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus{
  background-color:transparent;
  border-color:transparent;
  color:inherit;
}

/* ============================================================
   3. PALETA B — "CALIDA"  (HDN / referencia Camaleo)
      Base nocturna, acento ambar protagonista, foto a sangre.
   ============================================================ */
body.pbo-warm{
  --canvas:#0E1116;
  --surface:#171B22;
  --surface-alt:#1F242D;
  --line:rgba(255,255,255,.11);
  --ink:#FFFFFF;
  --ink-soft:#CBD1DA;
  --muted:#8E96A3;
  --ghost:rgba(255,255,255,.06);

  /* El ambar manda en HDN: es lo que separa a la escuela del resto de
     la red sin salirse del sistema. El verde institucional queda de
     apoyo, para lo que pertenece al Patronato. */
  --accent:#E09B45;
  --accent-dark:#C4802F;
  --verde:#258F52;
  --cta:#D64545;
  --cta-dark:#B93A3A;
  --sand:#E7B381;
  --bar:#0A0D12;
  --select:#9B7BF0;
  --select-soft:#B39BF5;
}

/* Sobre fondo oscuro el ambar necesita texto oscuro encima, no blanco:
   con blanco el contraste cae por debajo de lo legible. */
body.pbo-warm .pbo-btn--cta,
body.pbo-warm .pbo-give,
body.pbo-warm .pbo-mapa__n,
body.pbo-warm .pbo-rm__num{ color:#1A1206; }
body.pbo-warm .pbo-btn--cta{ background:var(--accent); }
body.pbo-warm .pbo-btn--cta:hover{ background:var(--accent-dark); }

/* Las tarjetas blancas del sistema claro se vuelven superficie oscura */
body.pbo-warm .pbo-phero,
body.pbo-warm .pbo-datos{ background:var(--surface); border-color:var(--line); }
body.pbo-warm .pbo-rm__muni{ stroke:var(--canvas); }

/* ============================================================
   4. BASE
   ============================================================ */
body{
  background:var(--canvas);
  color:var(--ink);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ color:var(--ink); line-height:var(--lh-head); font-weight:500; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
p{ color:var(--ink-soft); }
img{ max-width:100%; height:auto; }

/* ============================================================
   5. PATRONES REUTILIZABLES
      Cada uno es una clase que se pega en Elementor (Avanzado > Clases CSS).
      El cliente cambia contenido; la estructura se mantiene.
   ============================================================ */

/* 5.1 Tipografia fantasma decorativa (ABOUT / PEOPLE / TO EVERYTHING) */
.pbo-ghost{
  font-size:var(--fs-display);
  line-height:var(--lh-tight);
  font-weight:300;
  color:var(--ghost);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  user-select:none;
  pointer-events:none;
}

/* 5.2 Imagenes del sistema — redondeo coherente en toda la red */
.elementor-widget-image img,
.pbo-media img{ border-radius:var(--r-lg); display:block; }
.pbo-media--sm img{ border-radius:var(--r-md); }
.pbo-media--xl img{ border-radius:var(--r-2xl); }
.pbo-media--circle img{ border-radius:var(--r-pill); aspect-ratio:1; object-fit:cover; }

/* 5.3 Banda de imagen a sangre con esquinas redondeadas */
.pbo-band img{ border-radius:var(--r-xl); width:100%; object-fit:cover; }

/* 5.4 Tarjeta blanda (grid 2x2 de features) */
.pbo-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:var(--space-sm);
  transition:transform .7s var(--ease-suave), box-shadow .7s var(--ease-suave);
}
.pbo-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.pbo-card__label{
  font-size:var(--fs-micro); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--muted);
}

/* 5.5 Bloque de texto centrado y estrecho (respiracion editorial) */
.pbo-narrow{ max-width:var(--container-narrow); margin-inline:auto; text-align:center; }

/* 5.6 Collage asimetrico — el patron firma del mockup */
.pbo-collage{ position:relative; }
.pbo-collage .pbo-offset-down{ transform:translateY(clamp(24px,5vw,80px)); }
.pbo-collage .pbo-offset-up{ transform:translateY(clamp(-80px,-5vw,-24px)); }

/* 5.7 Circulo decorativo de contorno fino */
.pbo-ring{
  position:absolute; border:1px solid var(--line); border-radius:var(--r-pill);
  pointer-events:none; aspect-ratio:1;
}

/* 5.8 Boton pildora */
.elementor-button{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:100px !important;
  font-weight:600; font-size:var(--btn-fs); letter-spacing:0;
  padding:var(--btn-pad); line-height:1.4;
  transition:background-color .6s var(--ease-suave);
}
.elementor-button::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(0,0,0,.16);
  transform:translateY(101%);
  transition:transform .7s var(--ease-suave);
}
.elementor-widget-button:hover .elementor-button::before{ transform:translateY(0); }
.elementor-button:hover{ transform:translateY(-2px); }
.pbo-btn--accent .elementor-button{ background:var(--accent); color:#fff; }
.pbo-btn--cta .elementor-button{ background:var(--cta); color:#fff; }
.pbo-btn--accent .elementor-button:hover{ background:var(--accent-dark); }
.pbo-btn--cta .elementor-button:hover{ background:var(--cta-dark); }
.pbo-btn--ghost .elementor-button{
  background:transparent; color:var(--ink); border:1px solid var(--line);
}

/* 5.9 Etiqueta de seccion (kicker) */
/* Las etiquetas de seccion deben quedarse en gris apagado aunque
   sean widgets de titular: hay que superar la regla del kit. */
.pbo-kicker,
.elementor-widget-heading.pbo-kicker .elementor-heading-title{
  font-size:var(--fs-micro); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
.pbo-card .elementor-widget-heading .elementor-heading-title{ color:var(--ink); }
.pbo-card .pbo-kicker .elementor-heading-title{ color:var(--muted); }

/* ============================================================
   6. ACCESIBILIDAD — requisito, no decoracion
   ============================================================ */
a:focus-visible, button:focus-visible, .elementor-button:focus-visible{
  outline:3px solid var(--accent); outline-offset:3px; border-radius:var(--r-xs);
}
.pbo-skip-link{
  position:absolute; left:-9999px;
}
.pbo-skip-link:focus{
  left:var(--space-xs); top:var(--space-xs); z-index:9999;
  background:var(--surface); color:var(--ink);
  padding:12px 20px; border-radius:var(--r-pill);
}

/* El collage decorativo se apila en movil: sin transforms que rompan el flujo */
@media (max-width:767px){
  .pbo-collage .pbo-offset-down,
  .pbo-collage .pbo-offset-up{ transform:none; }
  .pbo-ring{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .pbo-mega{ transition:none; }
  .pbo-mega__list > li,
  .pbo-mega__top,
  .pbo-mega__foot{ opacity:1; transform:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .pbo-card:hover, .elementor-button:hover{ transform:none; }
}

/* ============================================================
   7. HEADER FLOTANTE DE DOS NIVELES
      Nivel 1 (oscuro): navegacion de RED — cruza los 3 dominios.
      Nivel 2 (blanco): navegacion del sitio + CTA de donacion.
      Se construye con Header Footer Elementor; esto le da el chasis.
   ============================================================ */
.pbo-header{
  position:sticky; top:var(--space-xs); z-index:500;
  width:min(calc(100% - var(--space-md)), 1400px);
  margin-inline:auto;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}

/* En movil el nivel de red se oculta y entra en el menu desplegable */
@media (max-width:1024px){
  .pbo-header{ top:0; width:100%; border-radius:0; }
  .pbo-header__net{ display:none; }
}

/* ============================================================
   8. HERO DE BLOQUE REDONDEADO
      Imagen o video a sangre dentro de una tarjeta insertada del
      borde del viewport. El header flota DENTRO del hero.
   ============================================================ */
.pbo-hero{
  position:relative;
  margin:var(--gutter) auto;
  border-radius:var(--r-2xl);
  overflow:hidden;
  min-height:clamp(540px,52vw,900px);
  display:flex; flex-direction:column;
  isolation:isolate;
}

/* Media de fondo */
.pbo-hero__media,
.pbo-hero__media img,
.pbo-hero__media video{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
}

/* Scrim: sin esto el texto blanco no cumple contraste sobre foto */
.pbo-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(
    180deg,
    rgba(8,14,26,.55) 0%,
    rgba(8,14,26,.28) 38%,
    rgba(8,14,26,.42) 100%
  );
}

/* Contenido centrado */
.pbo-hero__body{
  margin:auto;
  max-width:900px; padding:var(--space-lg) var(--space-sm);
  text-align:center; color:#fff;
}
.pbo-hero__title{
  font-size:var(--fs-display);
  line-height:var(--lh-tight);
  font-weight:500;
  letter-spacing:-.02em;
  color:#fff;
  text-wrap:balance;
}
.pbo-hero__sub{
  margin-top:var(--space-sm);
  max-width:60ch; margin-inline:auto;
  color:rgba(255,255,255,.92);
  font-size:clamp(15px,1.3vw,19px);
  text-wrap:pretty;
}
.pbo-hero__actions{
  margin-top:var(--space-md);
  display:flex; gap:var(--space-xs); justify-content:center; flex-wrap:wrap;
}

/* El header flotante vive dentro del hero */
.pbo-hero .pbo-header{ margin-top:var(--space-xs); }

@media (max-width:767px){
  .pbo-hero{ margin:0; border-radius:0; min-height:78vh; }
}

/* ============================================================
   9. HEADER — proporciones medidas de namb.net a 1280px
   ============================================================ */
:root{
  --panel-top:60px;      /* separacion desde el borde superior */
  --panel-inset:40px;    /* margen lateral */
  --panel-max:1200px;
  --panel-radius:20px;
  --bar-net-h:29px;      /* barra superior */
  --bar-main-h:79px;     /* barra principal */
}

.pbo-header{
  /* En flujo por defecto (paginas sin hero) */
  position:relative; margin-top:var(--panel-top);
  width:min(calc(100% - (var(--panel-inset) * 2)), var(--panel-max));
  margin-inline:auto;
  border-radius:var(--panel-radius);
  overflow:hidden;
  z-index:500;
  box-shadow:var(--shadow-card);
}
/* Este reset va en :where() para no sumar especificidad: tal cual estaba,
   .pbo-header ul (0,1,1) le ganaba a .pbo-nav__list{display:none} (0,1,0) y
   el menu de escritorio se seguia pintando en movil, fuera de pantalla. */
:where(.pbo-header ul){ list-style:none; margin:0; padding:0; display:flex; }
.pbo-header a{ text-decoration:none; }

/* --- Barra de red: 29px --- */
.pbo-header__net{
  background:var(--bar);
  height:var(--bar-net-h);
  /* Mas aire a la derecha que la barra blanca: ese hueco lo ocupaba el
     selector ES/EN, y al quitarlo «Idea by PBO» quedaba pegado a la
     esquina redondeada. */
  padding:0 90px 0 30px;
  display:flex; justify-content:flex-end; align-items:center; gap:22px;
}
.pbo-header__netlist{ gap:20px; align-items:center; }
.pbo-header__netlist a{
  color:rgba(255,255,255,.92); font-size:13px; font-weight:600; line-height:1;
  transition:color .45s var(--ease-suave);
}
.pbo-header__netlist a:hover{ color:var(--sand); }




/* --- Barra principal: 79px --- */
.pbo-header__main{
  /* Por token, no #fff: en la linea calida de HDN la barra tiene que
     oscurecerse o el menu queda blanco sobre blanco. */
  background:var(--surface);
  height:var(--bar-main-h);
  padding:17px 30px;
  display:flex; align-items:center; gap:26px;
}
.pbo-logo{ margin-right:auto; display:flex; align-items:center; }
.pbo-logo img{ height:45px; width:auto; display:block; }

.pbo-nav{ display:flex; align-items:center; gap:26px; }
.pbo-nav__list{ gap:26px; align-items:center; }
.pbo-nav__list a{
  font-size:16px; font-weight:600; color:var(--ink); line-height:1;
  transition:color .45s var(--ease-suave);
}
.pbo-nav__list a:hover,
.pbo-nav__list .current-menu-item a{ color:var(--accent); }

.pbo-mega .pbo-mega__close,
.pbo-header .pbo-burger{
  background:transparent; border:0; box-shadow:none; border-radius:0;
  padding:4px; cursor:pointer; line-height:1; color:var(--ink);
  transition:color .45s var(--ease-suave), opacity .25s var(--ease);
}
/* align-content y justify-content en centro, no por omision: en movil el
   boton crece a 40x40 por zona tactil y, con filas automaticas, la rejilla
   reparte el sobrante entre las barras —los huecos pasaban de 5 a 10px y el
   aspa dejaba de cruzarse en el centro. Centrado, el dibujo no depende del
   tamano de la caja. */
.pbo-header .pbo-burger{ display:grid; gap:5px; align-content:center; justify-content:center; }
.pbo-header .pbo-burger span{
  display:block; width:26px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .35s cubic-bezier(.65,0,.25,1), opacity .2s var(--ease);
}
/* Tres barras y no dos: con dos el icono se lee como un signo igual y no
   como un menu. Al abrir, la del medio se desvanece y las otras cruzan.
   El desplazamiento es el paso entre barras —2px de grosor mas 5 de hueco—
   para que las dos aspas se corten justo en el centro del boton. */
.pbo-header .pbo-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.pbo-header .pbo-burger[aria-expanded="true"] span:first-child{ transform:translateY(7px) rotate(45deg); }
.pbo-header .pbo-burger[aria-expanded="true"] span:last-child{ transform:translateY(-7px) rotate(-45deg); }
.pbo-header .pbo-burger:hover{ opacity:.55; }

.pbo-give{
  /* inline-flex es imprescindible: en un <a> inline el overflow:hidden
     no recorta y el relleno del hover se sale por debajo del boton. */
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cta); border-radius:100px;
  padding:var(--btn-pad); font-size:var(--btn-fs); font-weight:600; white-space:nowrap;
  line-height:1.4;
  transition:background-color .6s var(--ease-suave);
}

/* El texto de estos botones es blanco siempre, tambien en hover:
   los enlaces del header tienen mas especificidad y lo pisaban. */
/* El boton de donar va siempre en blanco sobre su rojo. */
.pbo-give, .pbo-give:hover, .pbo-give:focus,
.pbo-header .pbo-give, .pbo-header .pbo-give:hover,
.pbo-header__main .pbo-give, .pbo-header__main .pbo-give:hover,
.pbo-footer .pbo-give, .pbo-footer .pbo-give:hover,
.pbo-mega .pbo-give,   .pbo-mega .pbo-give:hover{ color:#fff; }

/* El de voluntariado toma el color del fondo donde vive. */
.pbo-vol, .pbo-vol:focus,
.pbo-header .pbo-vol, .pbo-header__main .pbo-vol{ color:var(--ink-soft); }
.pbo-vol:hover,
.pbo-header .pbo-vol:hover, .pbo-header__main .pbo-vol:hover{
  color:var(--ink); background:var(--canvas); border-color:var(--muted);
}

/* Sobre fondo oscuro (pie y mega menu) se invierte */
.pbo-footer .pbo-vol, .pbo-mega .pbo-vol{
  color:var(--f-txt, rgba(255,255,255,.8));
  border-color:rgba(255,255,255,.28);
}
.pbo-footer .pbo-vol:hover, .pbo-mega .pbo-vol:hover{
  color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5);
}

/* Hover: solo se oscurece el fondo. Nada de barridos ni saltos. */
.pbo-give:hover{ background:var(--cta-dark); }



/* Corazon del boton de donar. Va como mascara para que herede el color
   del texto y sirva igual sobre fondo rojo o claro. Se aplica a todos
   los botones de donar de una vez, sin repetir el SVG en cada plantilla. */
.pbo-give::after{
  content:"";
  width:1.05em; height:1.05em; margin-left:.55em; flex:none;
  background-color:currentColor;
  -webkit-mask:var(--pbo-corazon) center/contain no-repeat;
          mask:var(--pbo-corazon) center/contain no-repeat;
}

:root{
  --pbo-corazon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.1 10.55 19.8C5.4 15.14 2 12.06 2 8.28 2 5.2 4.42 2.8 7.5 2.8c1.74 0 3.41.81 4.5 2.09A5.98 5.98 0 0 1 16.5 2.8C19.58 2.8 22 5.2 22 8.28c0 3.78-3.4 6.86-8.55 11.53L12 21.1z'/%3E%3C/svg%3E");
}

/* --- Mega menu --- */
.pbo-mega{
  position:fixed; inset:0; z-index:900; background:var(--bar); color:#fff;
  padding:var(--space-md) var(--space-sm); overflow-y:auto;
  transform:translateX(100%);
  transition:transform .55s cubic-bezier(.65,0,.25,1);
  will-change:transform;
}
.pbo-mega[inert]{ pointer-events:none; }
.pbo-mega[data-open="true"]{ transform:none; }

/* Las columnas entran escalonadas detras del panel */
.pbo-mega__list > li,
.pbo-mega__top,
.pbo-mega__foot{
  opacity:0; transform:translateY(14px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.pbo-mega[data-open="true"] .pbo-mega__top{ opacity:1; transform:none; transition-delay:.18s; }
.pbo-mega[data-open="true"] .pbo-mega__list > li{ opacity:1; transform:none; }
.pbo-mega[data-open="true"] .pbo-mega__list > li:nth-child(1){ transition-delay:.26s; }
.pbo-mega[data-open="true"] .pbo-mega__list > li:nth-child(2){ transition-delay:.32s; }
.pbo-mega[data-open="true"] .pbo-mega__list > li:nth-child(3){ transition-delay:.38s; }
.pbo-mega[data-open="true"] .pbo-mega__list > li:nth-child(4){ transition-delay:.44s; }
.pbo-mega[data-open="true"] .pbo-mega__foot{ opacity:1; transform:none; transition-delay:.5s; }
.pbo-mega__in{ max-width:var(--panel-max); margin-inline:auto; display:flex; flex-direction:column; min-height:100%; }
.pbo-mega__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-xl); }
.pbo-mega__top img{ height:45px; width:auto; }
.pbo-mega .pbo-mega__close{ color:var(--sand); }
.pbo-mega .pbo-mega__close:hover{ color:#fff; }
.pbo-mega ul{ list-style:none; margin:0; padding:0; }
.pbo-mega a{ text-decoration:none; }
.pbo-mega__list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--space-md) var(--space-sm);
}
.pbo-mega__list > li > a{
  display:block; font-size:16px; font-weight:500; color:#7FB894;
  padding-bottom:9px; border-bottom:1px solid rgba(127,184,148,.32); margin-bottom:var(--space-xs);
}
.pbo-mega__list .sub-menu{ display:grid; gap:13px; }
.pbo-mega__list .sub-menu a{ font-size:15px; color:rgba(255,255,255,.94); }
.pbo-mega__list .sub-menu a:hover{ color:var(--sand); }
.pbo-mega__foot{
  margin-top:var(--space-xl); padding-top:var(--space-lg);
  border-top:1px solid rgba(127,184,148,.22);
  display:flex; align-items:center; gap:var(--space-sm); flex-wrap:wrap;
}
.pbo-mega__footlist{ display:flex; gap:var(--space-sm); flex-wrap:wrap; }
.pbo-mega__footlist a{ color:#7FB894; font-weight:600; font-size:15px; }
.pbo-mega__foot .pbo-give{ margin-left:auto; }

@media (max-width:1024px){
  :root{ --panel-top:0px; --panel-inset:0px; --panel-radius:0px; }
  .pbo-header__net{ display:none; }
  .pbo-nav__list{ display:none; }
  .pbo-header__main{ padding:12px 16px; height:auto; }

  /* La cabecera movil es: logo | hamburguesa + donar. Sin esto la fila se
     medía a lo ancho del escritorio y todo salia fuera de la pantalla. */
  .pbo-header__main{ gap:10px; flex-wrap:nowrap; }
  .pbo-nav{ gap:10px; margin-left:auto; flex:none; }
  .pbo-logo{ min-width:0; }
  .pbo-logo img{ height:38px; }
}

@media (max-width:560px){
  /* En pantallas estrechas el rotulo completo no cabe junto al logo. */
  .pbo-logo img{ height:34px; }
  .pbo-header__main{ padding:10px 12px; }
  .pbo-header__main .pbo-give{ padding-inline:14px; font-size:13px; }
}

/* ============================================================
   10. COMPATIBILIDAD CON CONTENEDORES DE ELEMENTOR
      Elementor aporta la estructura; estas reglas aportan el look.
      Asi el cliente reordena en Elementor sin perder el sistema.
   ============================================================ */

/* El hero de Elementor pinta su propio background-image en el contenedor,
   asi que el scrim va por encima del fondo pero debajo del contenido. */
.pbo-hero.e-con,
.e-con.pbo-hero{
  position:relative;
  margin:var(--gutter) auto;
  --width:calc(100% - (var(--gutter) * 2));
  width:calc(100% - (var(--gutter) * 2));
  border-radius:var(--r-2xl);
  overflow:hidden; isolation:isolate;
  min-height:clamp(540px,52vw,900px);
}
.pbo-hero.e-con::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(8,14,26,.62) 0%,rgba(8,14,26,.42) 45%,rgba(8,14,26,.55) 100%);
  pointer-events:none;
}
/* Pila del hero: 0 = fondo rotativo, 1 = scrim, 2 = contenido.
   Las capas de fondo deben quedar fuera de esta regla o se colapsan. */
.pbo-hero.e-con > *{ position:relative; z-index:2; }
/* El fondo (capas o video) debe quedar fuera de la regla de arriba:
   con position:relative se colapsa y deja de cubrir el hero. */
.pbo-hero.e-con > .pbo-hero__layers,
.pbo-hero.e-con > .pbo-hero__video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
}
.pbo-hero .pbo-hero__title .elementor-heading-title,
.pbo-hero__title .elementor-heading-title{
  font-size:var(--fs-display); line-height:var(--lh-tight); font-weight:500;
  letter-spacing:-.02em; color:#fff; white-space:pre-line; text-wrap:balance;
}
.pbo-hero .pbo-hero__sub{ max-width:56ch; margin-inline:auto; width:100%; }
.pbo-hero .pbo-hero__sub p{ color:rgba(255,255,255,.93); font-size:clamp(15px,1.3vw,19px); text-align:center; }

/* Ritmo vertical de seccion */
.pbo-section{ padding-block:var(--space-section); }

/* Estadisticas */
.pbo-stats{ border-top:1px solid var(--line); padding-top:var(--space-md); }
.pbo-stats .pbo-stat__n .elementor-heading-title{
  font-size:clamp(40px,5vw,68px); font-weight:300; line-height:1;
  letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.pbo-stat__t p{ font-size:14px; color:var(--muted); max-width:24ch; margin-top:10px; }

/* Bloque de texto editorial */
.pbo-lede{ max-width:62ch; margin-top:var(--space-xl); }
.pbo-lede .elementor-widget-heading + .elementor-widget-text-editor{ margin-top:var(--space-xs); }

/* Rejilla de tarjetas */
.pbo-cards{ margin-top:var(--space-md); align-items:stretch; }
.pbo-cards > .e-con{ flex-grow:1; }

/* La tipografia fantasma respeta los saltos de linea del editor */
.pbo-section .pbo-ghost .elementor-heading-title{
  font-size:var(--fs-display); line-height:1.06; font-weight:300;
  color:var(--ghost); letter-spacing:.05em; text-transform:uppercase;
  white-space:pre-line; user-select:none;
}

/* Banda a sangre */
.pbo-band img{ border-radius:var(--r-xl); width:100%; height:clamp(320px,38vw,540px); object-fit:cover; }

/* Titulares y texto dentro de widgets de Elementor heredan el sistema */
.elementor-widget-heading .elementor-heading-title{ font-family:var(--fd,"Outfit",sans-serif); }
.elementor-widget-text-editor{ color:var(--ink-soft); }

@media (max-width:767px){
  .pbo-hero.e-con{ margin:0; border-radius:0; }
  .pbo-cards > .e-con,
  .pbo-stats > .e-con{ width:100% !important; }
}

/* ============================================================
   11. HERO — el header fijo flota dentro de la foto
   ============================================================ */
/* Con hero, el header se superpone a la foto y se va con el scroll. */
body.pbo-has-hero .pbo-header{
  position:absolute; top:var(--panel-top); left:0; right:0;
  margin-top:0;
}

/* El hero reserva el alto del panel para que el titular no quede debajo */
.e-con.pbo-hero{
  padding-top:calc(var(--panel-top) + var(--bar-net-h) + var(--bar-main-h) + var(--space-lg));
  padding-bottom:var(--space-lg);
}

/* Fondo rotativo o video */
.pbo-hero__slides{ display:none; }
.pbo-hero__layers{ position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.pbo-hero__layer{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s var(--ease);
  transform:scale(1.06);
  animation:pbo-drift 16s ease-in-out infinite alternate;
}
.pbo-hero__layer.is-active{ opacity:1; }
.pbo-hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none;
}
@keyframes pbo-drift{ from{ transform:scale(1.06) } to{ transform:scale(1.12) } }

.pbo-hero__dots{
  position:absolute; bottom:var(--space-sm); left:50%; transform:translateX(-50%);
  display:flex; gap:10px; z-index:3;
}
.pbo-hero__dot{
  width:8px; height:8px; border-radius:var(--r-pill); border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.42); transition:background .3s var(--ease), width .3s var(--ease);
}
.pbo-hero__dot.is-active{ background:#fff; width:26px; }

/* Kerning del titular */
.pbo-hero .pbo-hero__title .elementor-heading-title{
  letter-spacing:-.035em;
  font-kerning:normal;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  text-rendering:optimizeLegibility;
}
.elementor-widget-heading .elementor-heading-title{ font-kerning:normal; font-feature-settings:"kern" 1,"liga" 1; }

.e-con.pbo-hero > .elementor-widget.pbo-hero__sub{ max-width:58ch; margin-inline:auto; }
.pbo-hero__acciones{ margin-top:var(--space-md); }

@media (max-width:1024px){
  .e-con.pbo-hero{ padding-top:calc(var(--space-xl) + 60px); }
}
@media (max-width:767px){
  .e-con.pbo-hero{ margin:0; border-radius:0; }
  .pbo-hero__dots{ bottom:var(--space-xs); }
}

/* ============================================================
   12. COMPOSICION DE SECCIONES
      Dos cosas de Elementor hay que respetar aqui:
      1. Un contenedor "boxed" envuelve a sus hijos en .e-con-inner,
         asi que la rejilla va en el envoltorio, no en el contenedor.
      2. La clase .e-flex fija --display:flex, de modo que hace falta
         mas especificidad que un solo selector de clase.
   ============================================================ */

/* --- Estadisticas (contenedor boxed) ------------------------ */
.e-con.pbo-stats > .e-con-inner{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--space-md) var(--space-sm);
  align-items:start;
}
.pbo-stats{ border-top:1px solid var(--line); padding-top:var(--space-md); }
.pbo-stats .e-con{ --width:100%; }
.pbo-stats .pbo-stat__t p{ max-width:30ch; }

/* --- Collage asimetrico (contenedor full) ------------------- */
.e-con.pbo-collage{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--space-sm);
  align-items:start;
  margin-top:var(--space-md);
}
.pbo-collage > .e-con{ --width:100%; }
.pbo-collage > .e-con:nth-child(1){ grid-column:1 / span 5; grid-row:1; }
.pbo-collage > .e-con:nth-child(2){ grid-column:7 / span 6; grid-row:1;
  transform:translateY(clamp(32px,5vw,72px)); }
.pbo-collage > .e-con:nth-child(3){ grid-column:2 / span 5; grid-row:2;
  transform:translateY(clamp(-64px,-4vw,-24px)); }

/* --- Tarjetas (contenedor full) ----------------------------- */
.e-con.pbo-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-sm);
  align-items:stretch;
  margin-top:var(--space-md);
}
.pbo-cards > .e-con{ --width:100%; }

/* --- Ritmo -------------------------------------------------- */
.pbo-section > .pbo-ghost{ margin-bottom:calc(var(--space-md) * -1); }
.pbo-lede{ margin-top:var(--space-xl); }
/* Mismo ritmo que el resto de secciones: con --space-lg la banda tenia
   64px arriba y abajo mientras las demas llevaban 72. */
.pbo-section.pbo-band{ padding-block:var(--space-section); }
/* El bloque de texto que ABRE una seccion no lleva el margen superior
   pensado para separarlo de lo que tiene encima: en «Quienes somos» se
   sumaban 96px al relleno de 72 y el titulo arrancaba a 229px del borde. */
.e-con-inner > .pbo-lede:first-child{ margin-top:0; }
/* El mapa trae su propio relleno de seccion; los 10px que Elementor pone
   por su cuenta en el contenedor lo dejaban en 82 en vez de 72. */
.elementor > .e-con.pbo-seccion-mapa{ padding-top:0 !important; padding-bottom:0 !important; }

@media (max-width:1024px){
  .e-con.pbo-cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .e-con.pbo-cards{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .e-con.pbo-collage{ grid-template-columns:1fr; }
  .pbo-collage > .e-con{ grid-column:1 !important; grid-row:auto !important; transform:none !important; }
}

/* ============================================================
   13. PIE DE PAGINA EXTENSO
      Fondo azul noche, igual que la barra de red y el mega menu.
   ============================================================ */
/* El pie va en negro, no en el azul de la barra de red: asi cierra la
   pagina en vez de repetir el tono del encabezado. */
.pbo-footer{
  --f-bg:#050E1B;        /* azul casi negro, no negro puro */
  --f-txt:#9DB0C6;        /* slate legible sobre el azul */
  --f-head:#FFFFFF;
  --f-line:rgba(157,176,198,.18);
  background:var(--f-bg);
  color:var(--f-txt);
  margin-top:var(--space-section);
  padding:var(--space-xl) var(--space-sm);
}
.pbo-footer a{ color:var(--f-txt); text-decoration:none; transition:color .45s var(--ease-suave); }
.pbo-footer a:hover{ color:var(--sand); }
.pbo-footer ul{ list-style:none; margin:0; padding:0; }

.pbo-footer__in{
  max-width:var(--panel-max,1200px); margin-inline:auto;
  display:grid; grid-template-columns:minmax(260px,.9fr) 2.7fr;
  gap:var(--space-xl) var(--space-lg);
}

/* --- Columna de marca --- */
.pbo-footer__logo{ height:52px; width:auto; }
.pbo-footer__tagline{
  margin-top:var(--space-sm); max-width:38ch;
  color:var(--f-txt); font-size:15px; line-height:1.7;
}
.pbo-footer__contacto{ margin-top:var(--space-sm); display:grid; gap:7px; font-size:15px; }
.pbo-footer__contacto a{ color:var(--f-head); font-weight:500; }
.pbo-footer__dir{ max-width:32ch; line-height:1.6; }

/* --- Columnas de enlaces --- */
.pbo-footer__list{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--space-md) 20px; align-items:start;
}
.pbo-footer__list > li > a{
  display:block; margin-bottom:14px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--f-head); font-weight:700;
}
.pbo-footer__list > li > a:hover{ color:var(--f-head); }
.pbo-footer__list .sub-menu{ display:grid; gap:10px; }
.pbo-footer__list .sub-menu a{ font-size:13.5px; line-height:1.5; }

/* --- Boletin --- */
.pbo-footer__boletin{
  max-width:var(--panel-max,1200px); margin:var(--space-xl) auto 0;
  padding:var(--space-sm) 0; border-top:1px solid var(--f-line);
  display:flex; gap:var(--space-md); align-items:center; flex-wrap:wrap;
}
.pbo-footer__boletin-txt strong{ display:block; color:var(--f-head); font-size:16px; }
.pbo-footer__boletin-txt span{ font-size:14px; }
.pbo-footer__boletin-form{ margin-left:auto; min-width:min(360px,100%); }
.pbo-footer__boletin-form input[type="email"],
.pbo-footer__boletin-form input[type="text"]{
  background:rgba(255,255,255,.06); border:1px solid var(--f-line);
  border-radius:var(--r-pill); padding:12px 20px; color:#fff; width:100%;
}
.pbo-footer__boletin-form input::placeholder{ color:rgba(157,176,198,.7); }

/* --- Barra inferior --- */
.pbo-footer__barra{
  max-width:var(--panel-max,1200px); margin:var(--space-lg) auto 0;
  padding-top:var(--space-sm); border-top:1px solid var(--f-line);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-sm); flex-wrap:wrap; font-size:13px;
}
.pbo-footer__barra .pbo-give{ margin-left:auto; }

@media (max-width:1200px){
  .pbo-footer__list{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px){
  .pbo-footer__in{ grid-template-columns:1fr; }
  .pbo-footer__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pbo-footer{ padding-inline:var(--space-xs); }
  .pbo-footer__boletin-form{ margin-left:0; }
  .pbo-footer__barra{ justify-content:flex-start; }
  .pbo-footer__barra .pbo-give{ margin-left:0; }
}

/* ============================================================
   14. SECCIONES DE CONTENIDO DE LA HOME
   ============================================================ */

/* Bloque introductorio de seccion */
.pbo-lede--top{ max-width:64ch; margin-top:0; margin-bottom:var(--space-lg); }
.pbo-lede--top .elementor-widget-heading + .elementor-widget-text-editor{ margin-top:var(--space-xs); }

/* Dos tarjetas a la par (mision / vision) */
.e-con.pbo-duo{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--space-sm); align-items:stretch;
}
.pbo-duo > .e-con{ --width:100%; }
/* Las tarjetas de mision, vision y valores llevan foto arriba */
.pbo-card--mv{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.pbo-card--mv .pbo-card__media{ --width:100%; padding:0; }
.pbo-card--mv .pbo-card__media img{
  width:100%; height:186px; object-fit:cover; object-position:center 28%;
  border-radius:0; display:block;
}
.pbo-card--mv .pbo-card__cuerpo{ --width:100%; padding:var(--space-md); }
.pbo-card--mv h3{ margin-block:8px 12px; font-size:21px; }
.pbo-card--mv p{ font-size:14.5px; line-height:1.65; }

/* Modelo de acompanamiento: cuatro pasos encadenados */
.e-con.pbo-pasos{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--space-sm); align-items:start;
  counter-reset:paso;
}
.pbo-pasos > .e-con{ --width:100%; }
.pbo-paso{
  position:relative; padding-top:var(--space-sm);
  border-top:2px solid var(--line);
}
.pbo-paso::before{
  counter-increment:paso; content:counter(paso);
  position:absolute; top:-13px; left:0;
  width:24px; height:24px; border-radius:var(--r-pill);
  background:var(--accent); color:#fff;
  font-size:12px; font-weight:700;
  display:grid; place-items:center;
}
.pbo-paso h3{ font-size:20px; margin-block:6px 10px; }
.pbo-paso p{ font-size:14.5px; }


/* Como ayudar */
.e-con.pbo-cards--3{ grid-template-columns:repeat(3,1fr); }
.pbo-ayuda{ display:flex; flex-direction:column; }
.pbo-ayuda .elementor-widget-button{ margin-top:auto; padding-top:var(--space-sm); }

/* Enlace de "ver mas" bajo una rejilla */
.pbo-mas{ margin-top:var(--space-md); }

/* Variantes de boton */
.pbo-btn--light .elementor-button{
  background:#fff; color:var(--ink);
}
.pbo-btn--light .elementor-button:hover{ background:var(--canvas); }
.pbo-btn--ghost .elementor-button{
  background:transparent; color:var(--ink); border:1px solid var(--line);
}
.pbo-btn--ghost .elementor-button:hover{ border-color:var(--ink); }

/* Cierre */
.pbo-cierre{ padding-bottom:0; }

@media (max-width:1024px){
  .e-con.pbo-pasos{ grid-template-columns:repeat(2,1fr); }
  .e-con.pbo-cards--3{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .e-con.pbo-duo{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .e-con.pbo-duo,
  .e-con.pbo-pasos{ grid-template-columns:1fr; }
}

/* ============================================================
   15. TARJETAS CON FOTOGRAFIA
   ============================================================ */
.pbo-card--foto{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.pbo-card--foto .pbo-card__media{ --width:100%; padding:0; }
.pbo-card--foto .pbo-card__media img{
  width:100%; height:210px; object-fit:cover; object-position:center 28%; border-radius:0; display:block;
}
.pbo-card--foto .pbo-card__cuerpo{ --width:100%; padding:var(--space-sm); }
.pbo-card--foto .pbo-card__cuerpo h3{ font-size:19px; margin-block:8px 8px; }
.pbo-card--foto .pbo-card__cuerpo p{ font-size:14.5px; line-height:1.6; }

/* --- Instalaciones: rejilla de fichas visuales --- */
.e-con.pbo-instas{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--space-md) var(--space-sm); align-items:start;
  margin-top:var(--space-md);
}
.pbo-instas > .e-con{ --width:100%; }
.pbo-insta__media{ --width:100%; padding:0; }
.pbo-insta__media img{
  width:100%; height:230px; object-fit:cover; object-position:center 30%;
  border-radius:var(--r-lg); display:block;
}
.pbo-insta h3{ font-size:19px; margin-block:14px 6px; }
.pbo-insta p{ font-size:14.5px; line-height:1.6; max-width:36ch; }

@media (max-width:1024px){ .e-con.pbo-instas{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .e-con.pbo-instas{ grid-template-columns:1fr; } }

/* ============================================================
   16. MAPA DE LA ROMANA
   Las seis sedes caben en pocos kilometros, asi que el mapa da
   contexto y la lista numerada al lado resuelve la lectura.
   ============================================================ */
.pbo-mapa{ padding-block:var(--space-section); }
.pbo-mapa__grid{
  max-width:var(--container); margin-inline:auto;
  /* Con La Altagracia entera el mapa es casi cuadrado y necesita mas
     ancho que el panel para que las sedes se lean. */
  display:grid; grid-template-columns:1.35fr 1fr;
  gap:var(--space-lg); align-items:center;
}

/* Sin tarjeta: el contorno del mapa ya recorta bastante contra el fondo
   y la caja blanca le anadia un marco que no aportaba nada. */
.pbo-mapa__lienzo{
  min-width:0;
  padding-block:var(--space-xs);
}
.pbo-rm__svg{ width:100%; height:auto; display:block; overflow:visible; }

/* Tierra: la provincia entera en un gris tibio, y el municipio de
   La Romana --donde esta casi todo-- levantado en verde. */
.pbo-rm__muni{
  fill:#DCDDD9; stroke:var(--canvas); stroke-width:2.6;
  stroke-linejoin:round;
  transition:fill .45s var(--ease-suave);
}
#muni-la-romana{ fill:#B7D4C3; }
#muni-villa-hermosa{ fill:#CCDBD1; }
/* La Altagracia, la provincia vecina: apenas insinuada, es contexto. */
.pbo-rm__muni.es-vecino{ fill:#E4E5E2; }

/* Pines numerados */
.pbo-rm__pin{ cursor:pointer; outline:none; }
.pbo-rm__halo{
  fill:var(--accent); opacity:0;
  transform-box:fill-box; transform-origin:center;
  transform:scale(.5);
  transition:opacity .45s var(--ease-suave), transform .45s var(--ease-suave);
}
.pbo-rm__punto{
  fill:var(--accent); stroke:var(--surface); stroke-width:5;
  transform-box:fill-box; transform-origin:center;
  transition:transform .45s var(--ease-suave), fill .45s var(--ease-suave);
}
.pbo-rm__num{
  fill:#fff; font-size:25px; font-weight:700; text-anchor:middle;
  pointer-events:none; user-select:none;
}
.pbo-mapa.is-lista .pbo-rm__pin:not(.is-activo) .pbo-rm__punto{ fill:var(--muted); }
.pbo-rm__pin:hover .pbo-rm__punto,
.pbo-rm__pin:focus-visible .pbo-rm__punto,
.pbo-rm__pin.is-activo .pbo-rm__punto{ transform:scale(1.28); fill:var(--select); }
.pbo-rm__pin:hover .pbo-rm__halo,
.pbo-rm__pin:focus-visible .pbo-rm__halo,
.pbo-rm__pin.is-activo .pbo-rm__halo{ opacity:.26; transform:scale(1); fill:var(--select-soft); }

/* Panel lateral con la barra vertical de la referencia */
.pbo-mapa__panel{ min-width:0; }
.pbo-mapa__panel h2{ font-size:var(--fs-h2); margin-block:12px var(--space-xs); }
.pbo-mapa__panel p{ max-width:40ch; }

.pbo-mapa__sedes{
  list-style:none; margin:var(--space-md) 0 0; padding:0; display:grid; gap:2px;
  counter-reset:none;
}
.pbo-mapa__sede{
  display:flex; align-items:flex-start; gap:14px;
  padding:11px 14px; border-radius:var(--r-md);
  cursor:pointer;
  transition:background .45s var(--ease-suave);
}
.pbo-mapa__sede:hover,
.pbo-mapa__sede.is-activa{ background:var(--select-soft); background:color-mix(in srgb, var(--select) 9%, transparent); }

.pbo-mapa__n{
  flex:none; width:26px; height:26px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  background:var(--muted); color:#fff;
  font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
  transition:background .45s var(--ease-suave);
}
/* Todos los numeros de la lista van del mismo color: el verde solo en
   algunos distinguia "sede" de "proyecto", una diferencia que no se
   explica en ninguna parte de la interfaz y se leia como un descuadre.
   El color reservado es el de seleccion (hover / activo). */
.pbo-mapa__sede:hover .pbo-mapa__n,
.pbo-mapa__sede.is-activa .pbo-mapa__n{ background:var(--select); }

.pbo-mapa__datos{ display:grid; gap:2px; }
.pbo-mapa__datos strong{
  font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.35;
  transition:color .45s var(--ease-suave);
}
.pbo-mapa__sede:hover .pbo-mapa__datos strong,
.pbo-mapa__sede.is-activa .pbo-mapa__datos strong{ color:var(--select); }
.pbo-mapa__datos span{ font-size:13.5px; color:var(--muted); }

@media (max-width:900px){
  .pbo-mapa__grid{ grid-template-columns:1fr; gap:var(--space-lg); }
  .pbo-mapa__panel{ padding-top:var(--space-sm); }
}
@media (prefers-reduced-motion:reduce){
  .pbo-rm__halo,.pbo-rm__punto,.pbo-mapa__sede,.pbo-mapa__n,.pbo-rm__muni{ transition:none; }
}

/* ============================================================
   17. LISTADOS DINAMICOS (blog y eventos)
   ============================================================ */
.pbo-listado__cabecera{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-sm); flex-wrap:wrap; margin-bottom:var(--space-md);
}
.pbo-listado__cabecera h2{ font-size:var(--fs-h2); margin-top:12px; }
.pbo-listado__todo{
  font-weight:600; color:var(--accent); text-decoration:none; white-space:nowrap;
  transition:gap .25s var(--ease);
}
.pbo-listado__todo:hover{ color:var(--accent-dark); }

.pbo-listado__rejilla{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--space-md) var(--space-sm);
}
.pbo-listado__rejilla--4{ grid-template-columns:repeat(4,1fr); }

.pbo-item__enlace{ text-decoration:none; color:inherit; display:block; }
.pbo-item__media{ overflow:hidden; border-radius:var(--r-lg); }
.pbo-item__media img{
  width:100%; height:220px; object-fit:cover; object-position:center 28%; display:block;
  transition:transform 1s var(--ease-suave);
}
.pbo-item__enlace:hover .pbo-item__media img{ transform:scale(1.03); }
.pbo-item__meta{
  display:block; margin-top:var(--space-xs);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.pbo-item__titulo{
  font-size:18px; margin-top:8px; line-height:1.35;
  transition:color .45s var(--ease-suave);
}
.pbo-item__enlace:hover .pbo-item__titulo{ color:var(--accent); }

@media (max-width:1024px){
  .pbo-listado__rejilla,
  .pbo-listado__rejilla--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .pbo-listado__rejilla,
  .pbo-listado__rejilla--4{ grid-template-columns:1fr; }
}

/* ============================================================
   18. PAGINAS DE DETALLE Y ARCHIVO
   ============================================================ */
.pbo-detalle__cab{
  max-width:var(--container); margin:var(--space-lg) auto var(--space-md);
  padding-inline:var(--gutter);
}
.pbo-detalle__cab:not(.pbo-detalle__cab--foto) .pbo-detalle__cab-in{ padding:0; }
.pbo-detalle__cab--foto{
  max-width:none; margin-top:0; padding:0;
  position:relative; isolation:isolate;
  min-height:clamp(380px,42vw,560px);
  display:flex; align-items:flex-end;
  margin-inline:var(--gutter); border-radius:var(--r-2xl); overflow:hidden;
}
.pbo-detalle__foto{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  object-position:center 32%;
}
.pbo-detalle__cab--foto::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(8,14,26,.15) 0%,rgba(8,14,26,.72) 100%);
}
.pbo-detalle__cab-in{ position:relative; z-index:2; padding:var(--space-md); max-width:38ch; }
.pbo-detalle__cab--foto .pbo-detalle__cab-in{ max-width:min(92%,46ch); }
.pbo-detalle__cab--foto h1,
.pbo-detalle__cab--foto .pbo-kicker{ color:#fff; }
.pbo-detalle__cab--foto .pbo-kicker{ color:rgba(255,255,255,.75); }
/* Sobre foto el titular baja de escala: los titulares de noticia son
   largos y a 57px ocupaban seis lineas encima de la imagen. */
.pbo-detalle__cab h1{ font-size:var(--fs-h1); margin-top:12px; text-wrap:balance; }
.pbo-detalle__cab--foto h1{ font-size:clamp(28px,3.4vw,46px); line-height:1.12; }

.pbo-detalle__meta{
  list-style:none; margin:var(--space-sm) 0 0; padding:0;
  display:flex; gap:var(--space-sm); flex-wrap:wrap;
  font-size:14px; color:rgba(255,255,255,.85);
}
.pbo-detalle__cab:not(.pbo-detalle__cab--foto) .pbo-detalle__meta{ color:var(--muted); }

.pbo-detalle__cuerpo{
  max-width:74ch; margin:var(--space-lg) auto 0; padding-inline:var(--gutter);
}
.pbo-detalle__cuerpo > * + *{ margin-top:var(--space-sm); }
.pbo-detalle__cuerpo h2{ font-size:var(--fs-h3); margin-top:var(--space-md); }
.pbo-detalle__cuerpo img{ border-radius:var(--r-lg); }
.pbo-detalle__cuerpo blockquote{
  border-left:3px solid var(--accent); padding-left:var(--space-sm);
  font-size:19px; color:var(--ink);
}
.pbo-detalle__accion{ margin-top:var(--space-md); }

.pbo-detalle__cta{
  max-width:var(--container); margin:var(--space-xl) auto 0;
  padding:var(--space-lg) var(--gutter); text-align:center;
  border-top:1px solid var(--line);
}
.pbo-detalle__cta h2{ font-size:var(--fs-h3); margin-bottom:var(--space-sm); }

.pbo-detalle__otros{
  max-width:var(--container); margin:var(--sep-entera) auto 0;
  padding-inline:var(--gutter);
}

/* --- Archivos --- */
.pbo-archivo{
  max-width:var(--container); margin-inline:auto;
  padding:var(--space-lg) var(--gutter) var(--space-section);
}
.pbo-archivo__cab{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:var(--space-lg);
  align-items:end;
  padding-bottom:var(--space-md);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--space-xl);
}
.pbo-archivo__cab h1{
  font-size:clamp(34px,4.2vw,54px); margin-top:14px;
  text-wrap:balance; max-width:18ch;
}
.pbo-archivo__intro{ padding-bottom:6px; }
.pbo-archivo__intro p{ max-width:42ch; }
.pbo-archivo__cuenta{
  display:block; margin-top:var(--space-sm);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.pbo-archivo__vacio{ color:var(--muted); }

.pbo-paginacion{ margin-top:var(--space-lg); }
.pbo-paginacion .nav-links{ display:flex; gap:10px; flex-wrap:wrap; }
.pbo-paginacion a, .pbo-paginacion .current{
  display:inline-grid; place-items:center;
  min-width:42px; height:42px; padding-inline:14px;
  border-radius:var(--r-pill); border:1px solid var(--line);
  text-decoration:none; color:var(--ink); font-weight:600;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.pbo-paginacion .current{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pbo-paginacion a:hover{ border-color:var(--ink); }

@media (max-width:767px){
  .pbo-detalle__cab--foto{ margin-inline:0; border-radius:0; }
}

/* Entradilla: el subtitulo que traia cada pagina del sitio anterior */
.pbo-entradilla{
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.6; color:var(--ink);
  padding-bottom:var(--space-xs);
  border-bottom:1px solid var(--line);
}
.pbo-detalle__cuerpo ul{ padding-left:1.15em; display:grid; gap:8px; }
.pbo-detalle__cuerpo li{ color:var(--ink-soft); }

/* ============================================================
   19. TARJETAS DE PROGRAMA CON LOGOTIPO
   ============================================================ */
.pbo-prog__enlace{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .7s var(--ease-suave), box-shadow .7s var(--ease-suave);
}
.pbo-prog__enlace:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }

.pbo-prog__foto{
  display:block; height:208px;
  background-size:cover;
  background-position:center 28%;   /* evita cortar cabezas */
}
/* El logotipo se apoya sobre la foto, montado a caballo */
.pbo-prog__marca{
  display:grid; place-items:center;
  min-height:104px; padding:var(--space-sm) var(--space-md);
  background:var(--surface);
  margin-top:-30px; margin-inline:var(--space-sm);
  border-radius:var(--r-md);
  position:relative; z-index:1;
}
.pbo-prog__logo{
  max-width:100%; max-height:56px; width:auto; height:auto;
  object-fit:contain; display:block;
}
.pbo-prog__nombre{ font-weight:600; text-align:center; }

.pbo-prog__pie{ display:block; padding:var(--space-xs) var(--space-md) var(--space-md); }
.pbo-prog__pie .pbo-kicker{ display:block; margin-bottom:8px; }
.pbo-prog__titulo{
  display:block; font-family:var(--fd); font-size:19px; font-weight:500;
  line-height:1.3; color:var(--ink);
  transition:color .45s var(--ease-suave);
}
.pbo-prog__enlace:hover .pbo-prog__titulo{ color:var(--accent); }

/* Logotipo en la cabecera de detalle */
.pbo-detalle__logo{
  max-height:74px; max-width:min(100%,300px); width:auto; height:auto;
  object-fit:contain; display:block; margin-bottom:var(--space-sm);
}
.pbo-detalle__cab--foto .pbo-detalle__logo{
  background:#fff; padding:12px 16px; border-radius:var(--r-md);
}

/* ============================================================
   20. ELEMENTOS EDITORIALES
      Rompen el texto corrido: cifras, citas y columnas.
   ============================================================ */

/* --- Panel de datos: un bloque, no cifras sueltas --- */
.pbo-detalle__cuerpo > .pbo-datos,
.pbo-detalle__cuerpo > .pbo-cita{
  /* Sobresalen de la medida de lectura: marcan un alto en el texto */
  margin-inline:calc(var(--space-md) * -1);
}
/* Hasta tablet el contenido llega al margen de pagina, y --gutter (24px en
   un movil en horizontal) es menor que --space-md (28px): sobresalir el
   espacio entero sacaba el panel 4px de la pantalla, y limitarlo al margen
   lo dejaba pegado al borde con las esquinas redondeadas cortando el aire.
   Hasta tablet va alineado con el texto, como en movil vertical; el
   sobresaliente queda para escritorio, donde el contenedor tiene aire. */
@media (max-width:1024px){
  .pbo-detalle__cuerpo > .pbo-datos,
  .pbo-detalle__cuerpo > .pbo-cita{ margin-inline:0; }
}
.pbo-datos{
  display:grid; grid-template-columns:minmax(190px,.85fr) 1fr;
  gap:var(--space-lg);
  align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--space-md);
  margin-block:var(--space-lg);
  scroll-margin-top:var(--space-lg);
}

/* Cifra protagonista */
.pbo-datos__principal{
  border-right:1px solid var(--line);
  padding-right:var(--space-md);
}
.pbo-datos .pbo-cifra__n{
  display:flex; align-items:baseline; gap:1px;
  font-family:var(--fd); font-size:clamp(46px,5.4vw,76px);
  font-weight:300; line-height:.95; letter-spacing:-.035em;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.pbo-datos .pbo-cifra__afijo{ font-size:.5em; font-weight:400; color:var(--accent); }
.pbo-datos__etq{
  display:block; margin-top:12px; max-width:22ch;
  font-size:14px; line-height:1.5; color:var(--ink-soft);
}

/* Cifras de apoyo, encadenadas */
.pbo-datos__resto{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0;
}
.pbo-dato{
  display:flex; align-items:center; gap:var(--space-sm);
  padding-block:14px;
  border-bottom:1px solid var(--line);
}
.pbo-dato:last-child{ border-bottom:0; padding-bottom:0; }
.pbo-dato:first-child{ padding-top:0; }
.pbo-dato__n{
  display:flex; align-items:baseline; gap:1px; flex:none;
  min-width:88px;
  font-family:var(--fd); font-size:clamp(26px,2.6vw,34px);
  font-weight:300; line-height:1; letter-spacing:-.03em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.pbo-dato__n .pbo-cifra__afijo{ font-size:.55em; font-style:normal; }
.pbo-dato__etq{ font-size:14px; line-height:1.5; color:var(--ink-soft); }

/* Anillo para los porcentajes: se lee mejor que una barra plana */
.pbo-anillo{
  position:relative; flex:none;
  width:88px; height:66px;
  display:grid; place-items:center;
}
.pbo-anillo svg{
  position:absolute; inset:0; margin:auto;
  width:62px; height:62px; transform:rotate(-90deg);
}
.pbo-anillo circle{ fill:none; stroke-width:4; }
.pbo-anillo__pista{ stroke:var(--line); }
.pbo-anillo__valor{
  stroke:var(--accent); stroke-linecap:round;
  transition:stroke-dashoffset 1.4s cubic-bezier(.22,.61,.36,1);
}
.pbo-anillo b{
  position:relative; z-index:1;
  font-family:var(--fd); font-size:19px; font-weight:500;
  color:var(--ink); letter-spacing:-.02em;
}
.pbo-anillo b i{ font-style:normal; font-size:.62em; color:var(--muted); }

@media (max-width:760px){
  .pbo-datos{ grid-template-columns:1fr; gap:var(--space-md); }
  .pbo-datos__principal{
    border-right:0; padding-right:0;
    border-bottom:1px solid var(--line); padding-bottom:var(--space-sm);
  }
}

/* --- Cita destacada --- */
/* .pbo-cita nacio como envoltorio, pero en el contenido se escribe
   directamente sobre el <blockquote>. Se contemplan los dos casos: sin
   esto el texto quedaba pegado al filete verde, encima de la linea. */
.pbo-cita{
  margin-block:var(--space-lg);
  padding:var(--space-sm) 0 var(--space-sm) var(--space-md);
  border-block:1px solid var(--line);
  border-left:3px solid var(--accent);
}
blockquote.pbo-cita p{
  margin:0; max-width:34ch;
  font-family:var(--fd); font-size:clamp(20px,2.1vw,28px);
  font-weight:300; line-height:1.32; letter-spacing:-.015em;
  color:var(--ink); text-wrap:balance;
}
blockquote.pbo-cita p + p{ margin-top:var(--space-xs); }
/* Cuando .pbo-cita es el envoltorio (una <section> con un <blockquote>
   dentro) el filete lo pone el blockquote interior: si lo llevan los
   dos salen dos rayas verdes a distinta altura. */
.pbo-cita:not(blockquote){ border-left:0; padding-left:0; }
.pbo-cita blockquote{
  margin:0; max-width:20ch;
  font-family:var(--fd); font-size:clamp(24px,2.8vw,38px);
  font-weight:300; line-height:1.2; letter-spacing:-.02em;
  color:var(--ink); text-wrap:balance;
}
.pbo-cita blockquote::before{ content:"\201C"; color:var(--accent); }
.pbo-cita blockquote::after{ content:"\201D"; color:var(--accent); }
.pbo-cita cite{
  display:block; margin-top:var(--space-sm);
  font-style:normal; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}

/* --- Barra lateral de programas --- */
.pbo-conlateral{
  max-width:var(--container); margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid; grid-template-columns:250px 1fr;
  gap:var(--space-xl);
  align-items:start;
  margin-top:var(--space-xl);
}
.pbo-conlateral__main{ min-width:0; }
/* Dentro de la rejilla, las piezas ya no necesitan su propio ancho.
   Fuera del indice lateral estos bloques se salen 40px a cada lado a
   proposito, para romper la medida de lectura; aqui esa sangria negativa
   los sacaba de la linea del texto y se veia el escalon.

   Ojo: aqui ponia '.pbo-cifras', una clase que ya no existe en el
   marcado —el panel se llama '.pbo-datos'—, asi que el panel de datos
   se quedaba fuera de linea en todas las fichas de programa. Y a
   '.pbo-mvv' no se le habia llegado a poner nunca. */
.pbo-conlateral .pbo-datos,
.pbo-conlateral .pbo-cita,
.pbo-conlateral .pbo-mvv,
.pbo-conlateral .pbo-detalle__cuerpo,
.pbo-conlateral .pbo-detalle__cta{
  max-width:none; margin-inline:0; padding-inline:0;
}
/* La regla de arriba quita la sangria del envoltorio, pero cuando la
   cita es el propio <blockquote> esa sangria es lo que separa el texto
   del filete verde: sin ella la linea queda encima de la primera letra. */
.pbo-conlateral blockquote.pbo-cita{ padding-inline:var(--space-md) 0; }
/* Habia aqui un '.pbo-conlateral .pbo-cifras{margin-top:0}' que nunca
   llego a aplicarse: esa clase no existe en el marcado. No se reapunta
   a '.pbo-datos' a proposito, porque dejar el margen superior a cero
   volveria a darle mas aire por abajo que por arriba, que es justo lo
   que se corrigio al unificar el ritmo de los bloques. */
.pbo-conlateral .pbo-detalle__cuerpo{ max-width:74ch; }
/* La linea de tiempo son dos columnas y una calle: encajarla en la
   medida de lectura dejaba las tarjetas en 297px. */
.pbo-detalle__cuerpo > .pbo-linea{ max-width:none; width:100%; }
.pbo-conlateral:has(.pbo-linea) .pbo-detalle__cuerpo{ max-width:none; }

.pbo-lateral{ position:sticky; top:var(--space-md); }
.pbo-lateral__caja{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--space-sm);
}
.pbo-lateral__lista{
  list-style:none; margin:var(--space-xs) 0 0; padding:0;
  display:grid; gap:1px;
}
.pbo-lateral__lista a{
  display:block; padding:9px 12px; border-radius:var(--r-sm);
  text-decoration:none; color:var(--ink-soft);
  font-size:14.5px; line-height:1.35;
  transition:background .45s var(--ease-suave), color .45s var(--ease-suave);
}
.pbo-lateral__lista a:hover{ background:var(--canvas); color:var(--ink); }
.pbo-lateral__lista .es-actual a{
  background:var(--canvas); color:var(--accent); font-weight:600;
}
.pbo-lateral__todo{
  display:inline-block; margin-top:var(--space-xs); padding-inline:12px;
  font-size:13.5px; font-weight:600; color:var(--accent); text-decoration:none;
}
.pbo-lateral__todo:hover{ color:var(--accent-dark); }

@media (max-width:1024px){
  .pbo-conlateral{ grid-template-columns:1fr; gap:var(--space-lg); }
  /* En movil la lista va al final, que es donde estorba menos */
  .pbo-lateral{ position:static; order:2; }
  .pbo-conlateral__main{ order:1; }
  .pbo-lateral__lista{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); display:grid; }
}

/* --- Llamada a donar, con mas cuerpo --- */
.pbo-detalle__cta{
  max-width:var(--container); margin:var(--space-xl) auto 0;
  padding:var(--space-xl) var(--gutter);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-lg);
  align-items:center;
  text-align:left;              /* anula el centrado de la regla anterior */
}
.pbo-detalle__cta h2{ font-size:var(--fs-h2); margin-bottom:var(--space-xs); max-width:16ch; }
.pbo-detalle__cta p{ max-width:42ch; }
.pbo-detalle__cta-acciones{ display:flex; gap:var(--space-xs); align-items:center; flex-wrap:wrap; margin-top:var(--space-sm); }
.pbo-detalle__cta-dato{
  background:var(--canvas); border-radius:var(--r-lg); padding:var(--space-md);
}
.pbo-detalle__cta-dato strong{
  display:block; font-family:var(--fd); font-size:clamp(30px,3.4vw,44px);
  font-weight:300; line-height:1; color:var(--accent); letter-spacing:-.02em;
}
.pbo-detalle__cta-dato span{ display:block; margin-top:10px; font-size:14px; color:var(--ink-soft); }

@media (max-width:900px){
  .pbo-detalle__cta{ grid-template-columns:1fr; gap:var(--space-md); }
}

/* ============================================================
   21. BOTON DE VOLUNTARIADO
      Verde de marca, misma familia que el de donar pero sin
      corazon: son dos acciones distintas y conviene distinguirlas.
   ============================================================ */
.pbo-vol{
  /* Accion secundaria: sin relleno, para que el boton de donar
     sea el unico elemento solido y mande sin competencia. */
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line);
  border-radius:100px;
  padding:var(--btn-pad); font-size:var(--btn-fs); font-weight:600;
  line-height:1.4; white-space:nowrap; text-decoration:none;
  transition:background-color .6s var(--ease-suave),
             border-color .6s var(--ease-suave),
             color .6s var(--ease-suave);
}




.pbo-mega__acciones,
.pbo-footer__acciones{
  display:flex; align-items:center; gap:12px; margin-left:auto; flex-wrap:wrap;
}
.pbo-mega__foot .pbo-give,
.pbo-footer__barra .pbo-give{ margin-left:0; }


/* En el header, con dos botones el espacio se aprieta: en pantallas
   medianas se queda solo el de donar, que es la accion prioritaria. */
@media (max-width:1180px){
  .pbo-header__main .pbo-vol{ display:none; }
}
@media (max-width:900px){
  .pbo-mega__acciones,
  .pbo-footer__acciones{ margin-left:0; }
}

/* ============================================================
   22. BANDA DE IMPACTO DE LA HOME
      Un bloque con separadores, no cifras sueltas sobre el fondo.
   ============================================================ */
/* Azul noche, con cada cuadro un tono distinto del anterior: sobre
   blanco las cuatro cifras se leian como una tabla, y montada sobre el
   hero la banda tiene que sostenerse sola. */
.pbo-impacto{
  --azul-a:#0E2B4D;
  --azul-b:#123A63;
  --azul-hover:#1B5085;
  --cifra:#7FB6DC;

  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--azul-a);
  border:0;
  border-radius:var(--r-lg);
  overflow:hidden;
}
.pbo-impacto__celda{
  padding:var(--space-sm) var(--space-sm) calc(var(--space-sm) + 4px);
  display:flex; flex-direction:column;
  position:relative;
  background:var(--azul-a);
  transition:background-color .5s var(--ease-suave);
}
/* Alternado: par e impar cambian de tono */
.pbo-impacto__celda:nth-child(even){ background:var(--azul-b); }
/* Estado de interaccion: tiene que ganar al alternado par/impar y a las
   reglas de los breakpoints, que se redeclaran mas abajo. */
.pbo-impacto .pbo-impacto__celda:hover,
.pbo-impacto .pbo-impacto__celda:focus-within,
.pbo-impacto .pbo-impacto__celda.es-destacada{ background:var(--azul-hover) !important; }

.pbo-impacto .pbo-kicker{
  display:block; margin-bottom:14px;
  color:rgba(255,255,255,.55);
}

.pbo-impacto__n{
  display:flex; align-items:baseline; gap:4px;
  font-family:var(--fd); font-size:clamp(32px,3.4vw,46px);
  font-weight:300; line-height:1; letter-spacing:-.035em;
  color:var(--cifra); font-variant-numeric:tabular-nums;
}
.pbo-impacto__n i{
  font-style:normal; font-size:.34em; font-weight:400;
  color:var(--cifra); opacity:.8;
  letter-spacing:0;
}
/* El signo '+' va a la altura de la cifra, no de la unidad */
.pbo-impacto__n i.pbo-impacto__pre{ font-size:.62em; opacity:1; margin-right:-.04em; }
.pbo-impacto__n .pbo-cifra__valor{ font-variant-numeric:tabular-nums; }
.pbo-impacto__etq{
  margin-top:10px; padding-top:0;
  font-size:14.5px; line-height:1.35; color:rgba(255,255,255,.82);
}
/* El anillo de porcentaje también tiene que verse sobre azul */
.pbo-impacto .pbo-anillo__pista{ stroke:rgba(255,255,255,.16); }
.pbo-impacto .pbo-anillo__valor{ stroke:var(--cifra); }
.pbo-impacto .pbo-anillo b{ color:var(--cifra); }

/* El anillo de esta banda es mayor que el de los programas */
.pbo-anillo--grande{ width:78px; height:78px; }
.pbo-anillo--grande svg{ width:78px; height:78px; }
.pbo-anillo--grande circle{ stroke-width:3.5; }
.pbo-anillo--grande b{ font-size:23px; }

@media (max-width:900px){
  .pbo-impacto{ grid-template-columns:repeat(2,1fr); }
  /* En dos columnas el alternado por posicion dejaria dos iguales
     pegadas en diagonal; se recoloca por fila. */
  .pbo-impacto__celda:nth-child(1),
  .pbo-impacto__celda:nth-child(4){ background:var(--azul-a); }
  .pbo-impacto__celda:nth-child(2),
  .pbo-impacto__celda:nth-child(3){ background:var(--azul-b); }
  .pbo-impacto .pbo-impacto__celda:hover,
  .pbo-impacto .pbo-impacto__celda:focus-within,
  .pbo-impacto .pbo-impacto__celda.es-destacada{ background:var(--azul-hover) !important; }
}
@media (max-width:560px){
  .pbo-impacto{ grid-template-columns:1fr; }
  .pbo-impacto__celda:nth-child(odd){ background:var(--azul-a); }
  .pbo-impacto__celda:nth-child(even){ background:var(--azul-b); }
  .pbo-impacto .pbo-impacto__celda:hover,
  .pbo-impacto .pbo-impacto__celda:focus-within,
  .pbo-impacto .pbo-impacto__celda.es-destacada{ background:var(--azul-hover) !important; }
}

/* La banda se apoya debajo del hero, no encima: montada le comia el
   borde redondeado a la foto y las dos piezas se estorbaban. */
.pbo-section-impacto{
  padding-block:var(--space-lg) var(--space-section);
  position:relative; z-index:2;
}

/* ============================================================
   23. JUNTA DIRECTIVA Y DOCUMENTOS
   ============================================================ */
.pbo-equipo{ margin-block:var(--space-lg); }
.pbo-equipo__rejilla{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
  gap:var(--space-sm);
}
.pbo-miembro{ margin:0; }
.pbo-miembro__foto{
  width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:var(--r-md); display:block;
  /* Las fotos de la junta van a color: en blanco y negro costaba
     reconocer a las personas. */
  transition:transform .8s var(--ease-suave);
}
.pbo-miembro:hover .pbo-miembro__foto{ transform:scale(1.02); }
.pbo-miembro figcaption{ margin-top:12px; }
.pbo-miembro strong{
  display:block; font-family:var(--fd); font-size:14.5px; font-weight:500;
  line-height:1.3; color:var(--ink);
}
.pbo-miembro span{
  display:block; margin-top:3px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}

/* Documentos descargables */
.pbo-docs{ display:grid; gap:10px; margin-block:var(--space-md); }
.pbo-doc{
  display:flex; align-items:center; gap:var(--space-sm);
  padding:var(--space-sm);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); text-decoration:none;
  transition:border-color .5s var(--ease-suave);
}
.pbo-doc:hover{ border-color:var(--accent); }
.pbo-doc__ico{ color:var(--accent); flex:none; display:grid; place-items:center; }
.pbo-doc__txt{ flex:1; min-width:0; }
.pbo-doc__txt strong{ display:block; font-family:var(--fd); font-size:16px; font-weight:500; color:var(--ink); }
.pbo-doc__txt span{ display:block; margin-top:3px; font-size:14px; color:var(--ink-soft); }
.pbo-doc__flecha{
  color:var(--accent); flex:none; font-size:18px;
  transition:transform .6s var(--ease-suave);
}
.pbo-doc:hover .pbo-doc__flecha{ transform:translateX(4px); }

/* ============================================================
   24. PANTALLA DE CARGA
      Los dos niños del logotipo saltando alternados.
   ============================================================ */
.pbo-carga{
  position:fixed; inset:0; z-index:9999;
  background:#fff;
  display:grid; place-content:center; justify-items:center;
  gap:var(--space-lg);
  transition:opacity .6s var(--ease-suave), visibility .6s;
}
.pbo-carga.se-va{ opacity:0; visibility:hidden; pointer-events:none; }

/* Sin JS la capa no debe quedarse tapando el sitio */
html:not(.pbo-cargando) .pbo-carga{ opacity:0; visibility:hidden; pointer-events:none; }

.pbo-carga__escena{ position:relative; display:grid; justify-items:center; }
.pbo-carga__ninos{ width:clamp(150px,26vw,220px); }
.pbo-carga__ninos svg{ width:100%; height:auto; display:block; overflow:visible; }

/* Cada figura salta con su propio compás: eso da el paso.
   OJO: tiene que ir acotado a .pbo-carga. Sin acotar alcanzaba a todos
   los .pbo-nino del sitio —los del quiz incluidos— y ademas descolocaba
   los brazos, que giran en coordenadas del viewBox y no del fill-box. */
.pbo-carga .pbo-nino{
  transform-box:fill-box; transform-origin:bottom center;
  animation:pbo-salto 1s cubic-bezier(.3,0,.4,1) infinite;
}
.pbo-carga .pbo-nino--der{ animation-delay:.5s; }

@keyframes pbo-salto{
  0%   { transform:translateY(0)     scaleY(1)    scaleX(1); }
  18%  { transform:translateY(0)     scaleY(.93)  scaleX(1.05); }  /* toma impulso */
  45%  { transform:translateY(-13%)  scaleY(1.04) scaleX(.98); }
  70%  { transform:translateY(0)     scaleY(.95)  scaleX(1.04); }  /* aterriza */
  100% { transform:translateY(0)     scaleY(1)    scaleX(1); }
}

/* Sombra que se encoge cuando saltan: ancla las figuras al suelo */
.pbo-carga__suelo{
  margin-top:14px; width:60%; height:9px; border-radius:50%;
  background:rgba(14,20,25,.14); filter:blur(3px);
  animation:pbo-sombra 1s cubic-bezier(.3,0,.4,1) infinite;
}
@keyframes pbo-sombra{
  0%,100%{ transform:scaleX(1);   opacity:.55; }
  45%    { transform:scaleX(.78); opacity:.3; }
}

/* Barra de progreso indeterminada */
.pbo-carga__barra{
  width:clamp(120px,18vw,180px); height:3px;
  background:var(--line); border-radius:var(--r-pill); overflow:hidden;
}
.pbo-carga__barra i{
  display:block; width:40%; height:100%;
  background:var(--accent); border-radius:var(--r-pill);
  animation:pbo-progreso 1.5s var(--ease-suave) infinite;
}
@keyframes pbo-progreso{
  0%  { transform:translateX(-100%); }
  100%{ transform:translateX(350%); }
}

/* Con movimiento reducido, la marca se queda quieta */
@media (prefers-reduced-motion:reduce){
  .pbo-nino,
  .pbo-carga__suelo,
  .pbo-carga__barra i{ animation:none; }
  .pbo-carga__barra i{ width:100%; }
}

/* Indice lateral: va a la derecha, para no competir con el titular */
.pbo-conlateral--indice,
.pbo-conlateral:has(.pbo-lateral--indice){
  grid-template-columns:1fr 230px;
}
.pbo-lateral--indice{ order:2; }
.pbo-conlateral:has(.pbo-lateral--indice) .pbo-conlateral__main{ order:1; }
.pbo-lateral--indice .pbo-lateral__lista a{ font-size:14px; }

/* Sin indice, el contenido no debe quedar encajonado a la izquierda */
.pbo-conlateral--solo{ grid-template-columns:1fr; }
.pbo-conlateral--solo .pbo-detalle__cuerpo{ margin-inline:auto; }

/* Las piezas anchas del contenido rompen la medida a proposito */
.pbo-conlateral .pbo-equipo,
.pbo-conlateral .pbo-docs{ max-width:none; }

@media (max-width:1024px){
  .pbo-conlateral:has(.pbo-lateral--indice){ grid-template-columns:1fr; }
  .pbo-lateral--indice{ order:0; }
  .pbo-conlateral:has(.pbo-lateral--indice) .pbo-conlateral__main{ order:1; }
}

/* ============================================================
   25. VENTANA MODAL Y ORGANIGRAMA
   ============================================================ */
.pbo-modal{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  padding:var(--gutter);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease-suave), visibility .5s;
}
.pbo-modal[data-abierto="true"]{ opacity:1; visibility:visible; }
.pbo-modal[inert]{ pointer-events:none; }

.pbo-modal__fondo{
  position:absolute; inset:0;
  background:rgba(8,14,26,.55);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
.pbo-modal__panel{
  position:relative; z-index:1;
  width:min(100%,980px); max-height:min(88vh,900px);
  background:var(--canvas);
  border-radius:var(--r-xl);
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(14px);
  transition:transform .5s var(--ease-suave);
}
.pbo-modal[data-abierto="true"] .pbo-modal__panel{ transform:none; }

.pbo-modal__cab{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--space-sm);
  padding:var(--space-md) var(--space-md) var(--space-sm);
  background:var(--surface); border-bottom:1px solid var(--line);
}
.pbo-modal__cab h2{ font-size:var(--fs-h3); margin-top:8px; }
.pbo-modal__cerrar{
  background:transparent; border:0; padding:6px; cursor:pointer;
  color:var(--muted); flex:none;
  transition:color .45s var(--ease-suave);
}
.pbo-modal__cerrar:hover{ color:var(--ink); }
.pbo-modal__cuerpo{ overflow-y:auto; padding:var(--space-md); }

/* --- Organigrama: arbol conectado --- */
.pbo-org{ display:grid; gap:0; }

.pbo-org__nivel{ position:relative; padding-top:var(--space-md); }
.pbo-org__nivel:first-child{ padding-top:0; }

/* Hilo vertical que baja del nivel anterior */
.pbo-org__nivel:not(:first-child)::before{
  content:""; position:absolute; top:0; left:50%;
  width:2px; height:var(--space-md);
  background:var(--line);
}

.pbo-org__titulo{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
  margin:0 auto 14px; text-align:center;
  background:var(--canvas); padding:0 12px; width:fit-content;
  position:relative; z-index:1;
}

.pbo-org__nodos{
  position:relative;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
/* Barra horizontal que reparte hacia cada nodo del nivel */
.pbo-org__nivel:not(:first-child) .pbo-org__nodos::before{
  content:""; position:absolute; top:-13px; left:12%; right:12%;
  height:2px; background:var(--line);
}
.pbo-org__nivel:not(:first-child) .pbo-org__nodos:has(> :only-child)::before{ display:none; }

.pbo-org__nodo{
  position:relative;
  border-radius:var(--r-md); padding:14px 18px;
  min-width:186px; max-width:238px; flex:1 1 200px;
  background:var(--surface); border:1px solid var(--line);
}
/* Pata que sube de cada nodo hasta la barra */
.pbo-org__nivel:not(:first-child) .pbo-org__nodo::before{
  content:""; position:absolute; top:-13px; left:50%;
  width:2px; height:13px; background:var(--line);
}

.pbo-org__cargo{
  display:block; font-family:var(--fd); font-size:14.5px; font-weight:500;
  line-height:1.3;
}
.pbo-org__nota{ display:block; margin-top:5px; font-size:12px; line-height:1.4; opacity:.75; }

/* Subordinados: colgados con su propia linea */
.pbo-org__hijos{
  list-style:none; margin:10px 0 0; padding:10px 0 0;
  border-top:1px solid currentColor;
  display:grid; gap:6px;
}
.pbo-org__hijos li{
  font-size:12.5px; line-height:1.35;
  padding-left:14px; position:relative; opacity:.85;
}
.pbo-org__hijos li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:1px; background:currentColor; opacity:.6;
}

/* --- Color solido por nivel --- */
.pbo-org__nivel[data-tipo="gobierno"] .pbo-org__nodo,
.pbo-org__nivel[data-tipo="direccion"] .pbo-org__nodo{
  background:var(--bar); border-color:var(--bar); color:#fff;
}
.pbo-org__nivel[data-tipo="direccion"] .pbo-org__nodo .pbo-org__cargo{ font-size:16px; }

.pbo-org__nivel[data-tipo="soporte"] .pbo-org__nodo{
  background:var(--sand); border-color:var(--sand); color:#3A2A18;
}
.pbo-org__nivel[data-tipo="operativo"] .pbo-org__nodo{
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.pbo-org__nivel[data-tipo="gobierno"] .pbo-org__nodo:not(.es-principal){
  background:transparent; border:1px dashed var(--muted); color:var(--ink-soft);
}

/* Programas: cierran con su marca */
.pbo-org__programas{
  position:relative;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px;
}
.pbo-org__nivel[data-tipo="programas"] .pbo-org__programas::before{
  content:""; position:absolute; top:-13px; left:12%; right:12%;
  height:2px; background:var(--line);
}
.pbo-org__programa{
  position:relative;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:16px 14px;
  display:grid; place-items:center; min-height:76px;
  text-decoration:none; color:var(--ink); text-align:center; font-size:13px;
  transition:border-color .5s var(--ease-suave);
}
.pbo-org__programa::before{
  content:""; position:absolute; top:-13px; left:50%;
  width:2px; height:13px; background:var(--line);
}
.pbo-org__programa:hover{ border-color:var(--accent); }
.pbo-org__programa img{ max-width:100%; max-height:40px; width:auto; object-fit:contain; }

@media (max-width:640px){
  .pbo-modal{ padding:0; }
  .pbo-modal__panel{ max-height:100vh; height:100vh; border-radius:0; }
  /* 100vh en iOS cuenta la barra de Safari y el pie del modal quedaba
     debajo; dvh es la altura visible real. El 100vh de arriba es el
     respaldo para navegadores que no conocen dvh. */
  @supports (height:100dvh){
    .pbo-modal__panel{ max-height:100dvh; height:100dvh; }
  }
  .pbo-org__nodo{ min-width:0; max-width:none; flex-basis:100%; }
  /* En una sola columna las conexiones horizontales no aportan */
  .pbo-org__nodos::before,
  .pbo-org__programas::before{ display:none !important; }
}
@media (prefers-reduced-motion:reduce){
  .pbo-modal, .pbo-modal__panel{ transition-duration:.01ms; }
  .pbo-modal__panel{ transform:none; }
}

/* Visor de PDF */
.pbo-modal--pdf .pbo-modal__panel{ width:min(100%,1050px); height:min(90vh,940px); }
.pbo-modal__acciones{ display:flex; align-items:center; gap:12px; flex:none; }
.pbo-modal__cuerpo--pdf{ padding:0; flex:1; display:flex; }
.pbo-visor{ width:100%; height:100%; border:0; display:block; background:var(--surface-alt); }

/* Credito de autoria en la barra inferior del pie */
.pbo-footer__credito{ color:rgba(157,176,198,.75); }
.pbo-footer__credito a{
  color:var(--f-txt); font-weight:600; text-decoration:none;
  transition:color .45s var(--ease-suave);
}
.pbo-footer__credito a:hover{ color:var(--sand); }

/* ============================================================
   26. SELECTOR DE IDIOMA FLOTANTE
   ============================================================ */
/* Flotante pegado al borde superior derecho. Cabe justo encima del
   header, que arranca a 60px: asi no se solapan en ningun ancho. */
.pbo-idioma{
  position:fixed; z-index:700;
  right:var(--gutter);
  top:11px;
  display:flex; align-items:center; gap:4px;
  padding:5px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  box-shadow:0 2px 6px rgba(14,20,25,.06), 0 14px 34px -16px rgba(14,20,25,.28);
}
.pbo-idioma__op{
  display:flex; align-items:center; gap:6px;
  padding:4px 10px 4px 6px;
  border-radius:var(--r-pill);
  text-decoration:none; color:var(--muted);
  font-size:12px; font-weight:700; letter-spacing:.06em;
  transition:background .45s var(--ease-suave), color .45s var(--ease-suave);
}
.pbo-idioma__op:hover{ background:var(--canvas); color:var(--ink); }
.pbo-idioma__op.es-actual{ background:var(--canvas); color:var(--ink); }
/* El idioma que aun no existe se ve, pero no simula ser un enlace */
.pbo-idioma__op.es-espera{ opacity:.45; cursor:default; }
.pbo-idioma__op.es-espera:hover{ background:transparent; color:var(--muted); }

.pbo-bandera{
  width:19px; height:13px; flex:none;
  border-radius:3px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(14,20,25,.12);
  display:block;
}
.pbo-bandera svg{ width:100%; height:100%; display:block; }

/* Sin margen superior en movil, el selector baja bajo el header */
@media (max-width:1024px){
  .pbo-idioma{ top:calc(var(--bar-main-h) + 10px); }
}
@media (max-width:600px){
  .pbo-idioma{ right:12px; padding:4px; }
  .pbo-idioma__op{ padding:5px 9px 5px 6px; font-size:11px; }
  .pbo-bandera{ width:18px; height:12px; }
}
@media print{ .pbo-idioma{ display:none; } }

@media (max-width:820px){
  .pbo-archivo__cab{ grid-template-columns:1fr; gap:var(--space-sm); align-items:start; }
  .pbo-archivo__cab h1{ max-width:none; }
}

/* ============================================================
   27. CABECERA DE PROGRAMA EN COMPOSICION DIVIDIDA
   ============================================================ */
.pbo-phero{
  /* La cabecera vive dentro de una tarjeta blanca, no sobre el fondo:
     separa el bloque del resto y le da presencia sin recurrir a foto
     a sangre, que competia con el titular. */
  max-width:var(--container); margin:var(--space-md) auto var(--space-xl);
  background:var(--surface);
  border-radius:var(--r-2xl);
  padding:var(--space-xl) var(--space-lg);
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:var(--space-lg); align-items:center;
}
/* El contenedor de la pagina ya aporta el margen lateral */
@media (min-width:1200px){
  .pbo-phero{ margin-inline:auto; }
}
@media (max-width:1199px){
  .pbo-phero{ margin-inline:var(--gutter); }
}
.pbo-phero__texto{ min-width:0; }
.pbo-phero__logo{ margin:var(--space-md) 0 var(--space-lg); }
.pbo-phero__logo img{
  max-height:64px; max-width:min(100%,290px);
  width:auto; height:auto; object-fit:contain; display:block;
}
.pbo-phero h1{
  font-size:clamp(34px,4vw,52px);
  line-height:1.08; letter-spacing:-.03em;
  max-width:14ch; text-wrap:balance;
}
.pbo-phero__entrada{
  margin-top:var(--space-sm); max-width:44ch;
  font-size:clamp(16px,1.4vw,19px); line-height:1.6; color:var(--ink-soft);
}
.pbo-phero__meta{
  margin-top:var(--space-lg);
  display:flex; align-items:center; gap:var(--space-sm); flex-wrap:wrap;
}
.pbo-etiqueta{
  display:inline-flex; align-items:center;
  padding:6px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}

.pbo-phero__foto{
  position:relative;
  border-radius:var(--r-xl); overflow:hidden;
  aspect-ratio:4/3;
}
.pbo-phero__foto img{
  width:100%; height:100%; object-fit:cover;
  object-position:center 30%; display:block;
}

/* La lateral pesa menos: sin caja, solo una linea que la separa */
/* Los menus laterales van en tarjeta, no colgando de un filete: asi se
   distinguen del texto corrido y se leen como navegacion. */
.pbo-lateral__caja{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--space-md) var(--space-sm);
}
.pbo-lateral--indice .pbo-lateral__caja{
  border:1px solid var(--line);
  padding:var(--space-md) var(--space-sm);
}
/* Se queda a la vista mientras se baja por el texto */
.pbo-lateral{ position:sticky; top:var(--space-md); }

/* El contenido arranca sin el hueco que dejaba la cabecera anterior */
.pbo-conlateral{ margin-top:0; }

@media (max-width:900px){
  .pbo-phero{
    grid-template-columns:1fr; gap:var(--space-md);
    padding:var(--space-md);
    border-radius:var(--r-xl);
  }
  .pbo-phero__foto{ order:-1; aspect-ratio:16/10; }
  .pbo-phero h1{ max-width:none; }
  .pbo-lateral__caja{ border-left:0; border-top:1px solid var(--line); padding:var(--space-sm) 0 0; }
}

/* ============================================================
   28. ARCHIVO DE PROGRAMAS: DESTACADO Y EJES
   ============================================================ */
.pbo-destacado{
  display:grid; grid-template-columns:1.1fr 1fr;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); overflow:hidden;
  text-decoration:none; color:inherit;
  margin-bottom:var(--sep-entera);
  transition:border-color .7s var(--ease-suave);
}
.pbo-destacado:hover{ border-color:var(--accent); }
.pbo-destacado__foto{
  display:block; min-height:340px;
  background-size:cover; background-position:center 28%;
}
.pbo-destacado__cuerpo{
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--space-lg) var(--space-md);
}
.pbo-destacado__logo{
  max-height:64px; max-width:min(100%,250px);
  width:auto; height:auto; object-fit:contain;
  display:block; margin:var(--space-sm) 0 var(--space-sm);
}
.pbo-destacado__txt{
  display:block; font-size:clamp(15px,1.3vw,17px); line-height:1.65;
  color:var(--ink-soft); max-width:44ch;
}
.pbo-destacado__mas{
  display:inline-block; margin-top:var(--space-md);
  font-weight:600; color:var(--accent);
  transition:transform .6s var(--ease-suave);
}
.pbo-destacado:hover .pbo-destacado__mas{ transform:translateX(4px); }

/* Cada eje abre con su propio encabezado */
.pbo-eje{ margin-bottom:var(--sep-entera); }
.pbo-eje:last-child{ margin-bottom:0; }
.pbo-eje__cab{
  display:grid; grid-template-columns:auto 1fr;
  gap:var(--space-md); align-items:baseline;
  padding-bottom:var(--space-sm);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--space-md);
}
.pbo-eje__cab h2{
  font-size:clamp(22px,2.2vw,30px); letter-spacing:-.02em; white-space:nowrap;
}
.pbo-eje__cab p{ font-size:14.5px; line-height:1.6; max-width:56ch; }

@media (max-width:900px){
  .pbo-destacado{ grid-template-columns:1fr; }
  .pbo-destacado__foto{ min-height:230px; }
  .pbo-eje__cab{ grid-template-columns:1fr; gap:8px; }
  .pbo-eje__cab h2{ white-space:normal; }
}

/* ============================================================
   29. MISION, VISION Y VALORES EN TRES BLOQUES
   ============================================================ */
.pbo-mvv{
  /* Con la barra de indice al lado, tres columnas dejarian el texto a
     unos 250px: demasiado estrecho. Mision y vision a la par, y los
     valores debajo ocupando el ancho, que son solo cinco palabras. */
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--space-sm);
  margin-block:var(--space-md);
}
.pbo-mvv__bloque--valores{ grid-column:1 / -1; }
.pbo-mvv__bloque{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--space-md);
  display:flex; flex-direction:column;
}
.pbo-mvv__bloque h3{
  font-size:19px; font-weight:500; margin-bottom:var(--space-xs);
  padding-bottom:var(--space-xs);
  border-bottom:1px solid var(--line);
}
.pbo-mvv__bloque p{ font-size:14.5px; line-height:1.65; }

/* Los valores son una lista corta: mejor en fichas que en un parrafo */
.pbo-mvv__lista{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.pbo-mvv__lista li{
  padding:8px 18px; border-radius:var(--r-pill);
  background:var(--canvas);
  font-size:14px; font-weight:500; color:var(--ink);
}
.pbo-mvv__bloque--valores h3{ border-bottom:0; padding-bottom:0; margin-bottom:var(--space-sm); }

/* Rompe la medida de lectura: son tres columnas, no texto corrido */
.pbo-detalle__cuerpo > .pbo-mvv{ margin-inline:calc(var(--space-md) * -1); }

@media (max-width:900px){
  .pbo-mvv{ grid-template-columns:1fr; }
  .pbo-detalle__cuerpo > .pbo-mvv{ margin-inline:0; }
}

/* ============================================================
   30. LOS TRES EJES ESTRATEGICOS
   ============================================================ */
.pbo-ejes__rejilla{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--space-sm);
  margin-top:var(--space-md);
}
.pbo-eje-card{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.pbo-eje-card__media img{
  width:100%; height:180px; object-fit:cover; object-position:center 28%;
  display:block;
}
.pbo-eje-card__cuerpo{ padding:var(--space-md); display:flex; flex-direction:column; flex:1; }
.pbo-eje-card h3{
  font-size:22px; font-weight:500; margin-bottom:10px;
}
.pbo-eje-card p{ font-size:14.5px; line-height:1.65; }

/* Los programas de cada eje, como fichas enlazadas */
.pbo-eje-card__progs{
  list-style:none; margin:var(--space-sm) 0 0; padding:var(--space-sm) 0 0;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:6px;
}
.pbo-eje-card__progs a{
  display:inline-block; padding:5px 11px;
  border-radius:var(--r-pill); background:var(--canvas);
  font-size:12.5px; font-weight:500; color:var(--ink-soft);
  text-decoration:none;
  transition:background .45s var(--ease-suave), color .45s var(--ease-suave);
}
.pbo-eje-card__progs a:hover{ background:var(--accent); color:#fff; }

@media (max-width:900px){
  .pbo-ejes__rejilla{ grid-template-columns:1fr; }
}

/* ============================================================
   31. LINEA DE TIEMPO VERTICAL
   ============================================================ */
.pbo-linea{ position:relative; }

/* --- Navegacion de decadas: aparece al empezar a bajar --- */
.pbo-linea__nav{
  position:sticky; top:12px; z-index:30;
  margin:0 auto var(--space-lg);
  width:fit-content; max-width:100%;
  background:var(--bar);
  border-radius:var(--r-pill);
  padding:8px;
  box-shadow:0 8px 30px -12px rgba(8,14,26,.5);
  opacity:0; transform:translateY(-14px);
  transition:opacity .6s var(--ease-suave), transform .6s var(--ease-suave);
  pointer-events:none;
}
.pbo-linea__nav.es-visible{ opacity:1; transform:none; pointer-events:auto; }

.pbo-linea__nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:2px; flex-wrap:wrap; justify-content:center;
}
.pbo-linea__nav a{
  display:block; padding:9px 20px; border-radius:var(--r-pill);
  font-size:14px; font-weight:600; text-decoration:none;
  color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums;
  border:2px solid transparent;
  transition:color .4s var(--ease-suave), border-color .4s var(--ease-suave),
             background-color .4s var(--ease-suave);
}
.pbo-linea__nav a:hover{ color:#fff; border-color:var(--accent); }
.pbo-linea__nav a.es-activa{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* --- Cada decada --- */
.pbo-decada{ position:relative; padding-bottom:var(--space-lg); }
.pbo-decada__cab{ text-align:center; position:relative; z-index:2; }
.pbo-decada__the{
  display:block; font-family:var(--fd); font-style:italic;
  font-size:17px; color:var(--muted);
}
.pbo-decada__cab h3{
  font-size:clamp(42px,6vw,80px); font-weight:300; line-height:1;
  letter-spacing:-.04em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.pbo-decada__fantasma{
  position:absolute; top:var(--space-lg); right:-6px;
  writing-mode:vertical-rl;
  font-family:var(--fd); font-size:clamp(50px,6vw,92px);
  font-weight:700; line-height:1; letter-spacing:-.03em;
  color:var(--line); user-select:none; pointer-events:none; z-index:0;
}

/* --- Eje y hitos, en dos columnas independientes --- */
.pbo-decada__hitos{
  position:relative; margin-top:var(--space-md);
  /* La calle tiene que dar cabida al chip mas ancho a cada lado con
     holgura: a 150px quedaban 2px de margen y en cuanto la tipografia
     renderiza un pelo mas ancha, los dos chips se montan. */
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:176px; align-items:start;
}
.pbo-decada__hitos::before{
  content:""; position:absolute; top:0; bottom:0; left:50%;
  width:2px; background:var(--line); transform:translateX(-50%);
}
.pbo-decada__col{ min-width:0; display:flex; flex-direction:column; gap:18px; }
/* El desfase vive en la columna, no en cada tarjeta: con alturas muy
   distintas un margen negativo por hito hacia que se solaparan. */
.pbo-decada__col--derecha{ margin-top:96px; }

.pbo-hito{
  position:relative;
  opacity:0;
  transition:opacity .7s var(--ease-suave), transform .7s var(--ease-suave);
}
/* Entran desde su propio lado */
.pbo-hito.es-izquierda{ transform:translateX(-28px); }
.pbo-hito.es-derecha{ transform:translateX(28px); }
.pbo-hito.es-visible{ opacity:1; transform:translateX(0); }

/* Chip del año sobre el eje */
.pbo-hito__anio{
  position:absolute; top:16px;
  padding:6px 15px; border-radius:var(--r-pill);
  background:var(--accent); color:#fff;
  box-shadow:0 0 0 4px var(--canvas);
  font-size:13px; font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  z-index:3;
  opacity:0;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1) .18s, opacity .5s var(--ease-suave) .18s;
}
.pbo-hito.es-izquierda .pbo-hito__anio,
.pbo-hito.es-derecha  .pbo-hito__anio{ transform:scale(.7); }
.pbo-hito.es-izquierda.es-visible .pbo-hito__anio,
.pbo-hito.es-derecha.es-visible  .pbo-hito__anio{
  transform:scale(1); opacity:1;
  /* El rebote va en un keyframe y no en la curva de la transicion: una
     cubic-bezier solo puede rebasar una vez y queda un empujon seco.
     'backwards' sostiene el primer fotograma durante el retardo; al
     terminar manda el scale(1) de esta misma regla, asi que si las
     animaciones estuvieran desactivadas el chip queda igual en su sitio. */
  animation:pbo-chip-rebote .72s cubic-bezier(.28,.9,.4,1) .16s backwards;
}

@keyframes pbo-chip-rebote{
  0%   { transform:scale(.5); }
  42%  { transform:scale(1.18); }
  62%  { transform:scale(.92); }
  80%  { transform:scale(1.06); }
  92%  { transform:scale(.98); }
  100% { transform:scale(1); }
}
/* Cada chip se queda en su mitad de la calle. Centrarlos sobre el eje
   los ponia a los dos en la misma vertical y dos hitos a la misma altura
   se montaban uno encima del otro. */
.pbo-hito.es-izquierda .pbo-hito__anio{ left:calc(100% + 10px); }
.pbo-hito.es-derecha  .pbo-hito__anio{ right:calc(100% + 10px); }
/* Y por si un año largo se cuela: nunca puede pasar del eje. */
.pbo-hito__anio{ max-width:78px; overflow:hidden; }

/* Punto sobre el eje, unido al chip por una linea fina */
.pbo-hito__anio::after{
  content:""; position:absolute; top:50%;
  width:9px; height:9px; border-radius:var(--r-pill);
  background:var(--accent); border:3px solid var(--canvas);
  transform:translateY(-50%);
}
.pbo-hito.es-izquierda .pbo-hito__anio::after{ right:-72px; }
.pbo-hito.es-derecha  .pbo-hito__anio::after{ left:-72px; }

.pbo-hito__caja{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .7s var(--ease-suave), box-shadow .7s var(--ease-suave);
}
.pbo-hito__caja:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.pbo-hito__media{ display:block; overflow:hidden; }
.pbo-hito__media img{
  width:100%; height:190px; object-fit:cover; object-position:center 28%;
  display:block;
  transform:scale(1.06);
  transition:transform 1.2s var(--ease-suave);
}
.pbo-hito.es-visible .pbo-hito__media img{ transform:scale(1); }
.pbo-hito__caja:hover .pbo-hito__media img{ transform:scale(1.05); }

.pbo-hito__txt{ padding:var(--space-sm); text-align:left; }
.pbo-hito__txt h4{
  font-family:var(--fd); font-size:18px; font-weight:500;
  line-height:1.3; margin-bottom:7px;
}
.pbo-hito__txt p{ font-size:13.5px; line-height:1.6; }

@media (prefers-reduced-motion:reduce){
  .pbo-hito,
  .pbo-hito.es-izquierda,
  .pbo-hito.es-derecha{ opacity:1; transform:none; }
  .pbo-hito__anio{ opacity:1; transform:none; }
  .pbo-hito__media img{ transform:none; }
  .pbo-linea__nav{ opacity:1; transform:none; pointer-events:auto; }
}

@media (max-width:820px){
  .pbo-decada__fantasma{ display:none; }
  .pbo-decada__hitos{ grid-template-columns:1fr; column-gap:0; row-gap:16px; }
  .pbo-decada__hitos::before{ left:9px; transform:none; }
  .pbo-decada__col--derecha{ margin-top:0; }
  .pbo-hito,
  .pbo-hito.es-izquierda,
  .pbo-hito.es-derecha{
    width:100%; padding-left:var(--space-md);
    transform:translateY(20px);
  }
  .pbo-hito.es-visible{ transform:none; }
  /* En una sola columna el chip vuelve a su sitio, junto al eje */
  .pbo-hito.es-izquierda .pbo-hito__anio,
  .pbo-hito.es-derecha .pbo-hito__anio{
    left:var(--space-md); right:auto; top:8px;
    transform:scale(.7);
  }
  .pbo-hito.es-izquierda .pbo-hito__anio::after,
  .pbo-hito.es-derecha .pbo-hito__anio::after{ left:-31px; right:auto; }
  .pbo-hito.es-izquierda.es-visible .pbo-hito__anio,
  .pbo-hito.es-derecha.es-visible .pbo-hito__anio{ transform:scale(1); }
  .pbo-linea__nav a{ padding:7px 14px; font-size:13px; }
}

/* ============================================================
   32. SECCION "COMO AYUDAR" CON FONDO FIJO
   ============================================================ */
.pbo-ayudar{
  position:relative; isolation:isolate;
  border-radius:var(--r-2xl);
  overflow:hidden;
  /* Los contenedores de Elementor sacan su ancho de --width, no de
     max-width: poner un margen lateral sin tocar esa variable empujaba
     la seccion 33px fuera de la pagina y provocaba scroll horizontal. */
  --width:calc(100% - var(--gutter) * 2);
  margin-inline:var(--gutter);
  padding-block:var(--space-section) !important;
}
/* Velo oscuro: sin el, ni el titular blanco ni las tarjetas se leen */
.pbo-ayudar::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,rgba(8,14,26,.78) 0%,rgba(8,14,26,.64) 100%);
  pointer-events:none;
}
.pbo-ayudar > *{ position:relative; z-index:1; }

.pbo-ayudar .pbo-lede--top .elementor-heading-title{ color:#fff; }
.pbo-ayudar .pbo-lede--top .pbo-kicker .elementor-heading-title{ color:rgba(255,255,255,.7); }
.pbo-ayudar .pbo-lede--top p{ color:rgba(255,255,255,.85); }

/* En tactil, background-attachment:fixed no funciona bien (iOS lo ignora
   y en Android provoca saltos). Se deja fijo solo donde hay raton. */
@media (hover:none), (max-width:820px){
  .pbo-ayudar{
    background-attachment:scroll !important;
    --width:100%; margin-inline:0; border-radius:0;
  }
}

/* ============================================================
   33. GALERIA DE FOTOGRAFIAS
   Ritmo variable para que no lea como hoja de contactos.
   ============================================================ */
.pbo-galeria{ margin-block:var(--space-xl); }
.pbo-galeria__cab{ margin-bottom:var(--space-md); }
.pbo-galeria__cab h2{ font-size:var(--fs-h2); }
.pbo-galeria__cab p{ margin-top:var(--space-xs); max-width:52ch; color:var(--ink-soft); }

/* El numero de columnas lo pone el shortcode en --pbo-galeria-cols: se
   calcula segun cuantas fotos haya para que no quede ninguna fila coja. */
.pbo-galeria__rejilla{
  display:grid;
  grid-template-columns:repeat(var(--pbo-galeria-cols,3),1fr);
  gap:12px;
}
.pbo-galeria__pieza{ margin:0; min-width:0; }
.pbo-galeria__pieza.es-ancha{ grid-column:span 2; }

/* Baldosa cuadrada, no 4/3.
   Las fotos de estos eventos llegan mezcladas: en el Café de la Leche
   tres de cuatro son verticales. Metidas en un hueco apaisado perdian
   mas de la mitad del alto y la gente salia sin cabeza. El cuadrado es
   lo mas indulgente cuando conviven verticales y apaisadas: recorta un
   tercio a unas u otras, nunca la mitad. */
.pbo-galeria__abrir{
  display:block; width:100%; padding:0; border:0; cursor:pointer;
  background:var(--line); border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:1/1;
}
/* La doble son dos cuadrados y el hueco entre ellos. */
.pbo-galeria__pieza.es-ancha .pbo-galeria__abrir{ aspect-ratio:2/1; }
.pbo-galeria__abrir img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* Las fotos son de reportaje: encuadrar algo alto evita cortar cabezas. */
  object-position:center 32%;
  transition:transform .7s var(--ease-suave), filter .7s var(--ease-suave);
}
.pbo-galeria__abrir:hover img,
.pbo-galeria__abrir:focus-visible img{ transform:scale(1.045); filter:saturate(1.06); }
.pbo-galeria__abrir:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

/* Visor a pantalla completa */
.pbo-lupa[hidden]{ display:none; }
.pbo-lupa{
  position:fixed; inset:0; z-index:9000;
  display:grid; place-items:center; padding:var(--gutter);
  background:rgba(10,16,24,.88);
  animation:pbo-lupa-entra .4s var(--ease-suave);
}
@keyframes pbo-lupa-entra{ from{ opacity:0; } to{ opacity:1; } }
.pbo-lupa img{
  max-width:min(100%,1280px); max-height:88vh;
  width:auto; height:auto; display:block;
  border-radius:var(--r-lg);
}
.pbo-lupa__cerrar{
  position:absolute; top:22px; right:26px;
  width:44px; height:44px; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08);
  color:#fff; font-size:26px; line-height:1; cursor:pointer;
  transition:background .45s var(--ease-suave);
}
.pbo-lupa__cerrar:hover{ background:rgba(255,255,255,.2); }

/* Paso de una foto a otra sin cerrar el visor */
.pbo-lupa__marco{ margin:0; display:grid; justify-items:center; gap:14px; }
.pbo-lupa__pie{
  margin:0; max-width:min(100%,1280px);
  color:rgba(255,255,255,.82); font-size:.95rem; line-height:1.5; text-align:center;
}
.pbo-lupa__pie[hidden]{ display:none; }

.pbo-lupa__flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08);
  color:#fff; cursor:pointer;
  transition:background .45s var(--ease-suave), transform .45s var(--ease-suave);
}
.pbo-lupa__flecha[hidden]{ display:none; }
.pbo-lupa__flecha svg{ width:26px; height:26px; }
.pbo-lupa__flecha.es-previa{ left:max(18px, calc(var(--gutter) / 2)); }
.pbo-lupa__flecha.es-siguiente{ right:max(18px, calc(var(--gutter) / 2)); }
.pbo-lupa__flecha:hover{ background:rgba(255,255,255,.2); }
.pbo-lupa__flecha.es-previa:hover{ transform:translateY(-50%) translateX(-3px); }
.pbo-lupa__flecha.es-siguiente:hover{ transform:translateY(-50%) translateX(3px); }
.pbo-lupa__flecha:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

.pbo-lupa__cuenta{
  position:absolute; left:0; right:0; bottom:20px; margin:0;
  text-align:center; color:rgba(255,255,255,.7);
  font-size:.9rem; letter-spacing:.06em; font-variant-numeric:tabular-nums;
}

@media (max-width:760px){
  /* En movil las flechas se montarian sobre la foto: se bajan a una
     barra bajo ella y se dejan mas pequenas. */
  .pbo-lupa img{ max-height:76vh; }
  .pbo-lupa__flecha{
    top:auto; bottom:16px; transform:none;
    width:46px; height:46px;
  }
  .pbo-lupa__flecha.es-previa{ left:auto; right:calc(50% + 8px); }
  .pbo-lupa__flecha.es-siguiente{ right:auto; left:calc(50% + 8px); }
  .pbo-lupa__flecha.es-previa:hover,
  .pbo-lupa__flecha.es-siguiente:hover{ transform:none; }
  /* Por encima de la barra de flechas, no debajo */
  .pbo-lupa__cuenta{ bottom:74px; }
  /* En movil siempre dos columnas: con tres o cuatro las caras se
     quedarian en miniaturas. La pieza doble pasa a ocupar la fila. */
  .pbo-galeria__rejilla{ grid-template-columns:repeat(2,1fr); }
  .pbo-galeria__pieza.es-ancha{ grid-column:span 2; }
  .pbo-galeria__pieza.es-ancha .pbo-galeria__abrir{ aspect-ratio:2/1; }
}
@media (prefers-reduced-motion:reduce){
  .pbo-galeria__abrir img{ transition:none; }
  .pbo-lupa{ animation:none; }
  .pbo-lupa__flecha{ transition:none; }
}

/* La cabecera de pagina sin foto ocupa el ancho: no deja hueco al lado */
.pbo-phero--solo{ grid-template-columns:1fr; }


/* ============================================================
   34. AJUSTES DE LA LINEA CALIDA (HDN)
   Lo que en el sistema claro se daba por hecho —tarjetas blancas,
   texto oscuro— aqui necesita su contraparte.
   ============================================================ */
body.pbo-warm .pbo-header{ box-shadow:0 18px 46px rgba(0,0,0,.42); }
body.pbo-warm .pbo-header__main{ border-top:1px solid var(--line); }
body.pbo-warm .pbo-vol{
  color:var(--ink-soft); border-color:var(--line); background:transparent;
}
body.pbo-warm .pbo-vol:hover{ color:#1A1206; background:var(--accent); border-color:var(--accent); }
body.pbo-warm .pbo-burger span{ background:var(--ink); }

/* Tarjetas y bandas: la superficie clara del sistema editorial */
body.pbo-warm .pbo-card,
body.pbo-warm .pbo-impacto,
body.pbo-warm .pbo-paso,
body.pbo-warm .pbo-galeria__abrir{ background:var(--surface); border-color:var(--line); }
body.pbo-warm .pbo-impacto__celda{ border-color:var(--line); }
body.pbo-warm .pbo-btn--ghost{ color:var(--ink); border-color:var(--line); }
body.pbo-warm .pbo-btn--ghost:hover{ color:#1A1206; background:var(--accent); border-color:var(--accent); }

/* Voces de las familias: la cita manda, el nombre acompana */
.pbo-voz p:first-child{
  font-size:clamp(16px,1.5vw,18.5px); line-height:1.62; color:var(--ink);
}
.pbo-voz h3{
  margin-top:var(--space-sm); font-size:16px; font-weight:600;
}
.pbo-voz__rol{ font-size:13.5px; color:var(--muted); margin-top:2px; }

/* Hitos sin fotografia: no todos los cincuenta y tres tienen imagen de
   archivo, y estirar una caja vacia los hacia parecer incompletos. Se
   comprimen y se apoyan en una linea de acento. */
.pbo-hito.es-texto .pbo-hito__caja{
  background:transparent; border:0; box-shadow:none; overflow:visible;
  border-left:2px solid var(--accent);
  border-radius:0; padding:2px 0 2px var(--space-sm);
}
.pbo-hito.es-texto.es-derecha .pbo-hito__caja{
  border-left:0; border-right:2px solid var(--accent);
  padding:2px var(--space-sm) 2px 0;
}
.pbo-hito.es-texto .pbo-hito__txt{ padding:0; }
.pbo-hito.es-texto h4{ font-size:19px; }

.pbo-hito.es-texto .pbo-hito__caja:hover{ transform:none; box-shadow:none; }

/* ============================================================
   35. APERTURA DE PAGINA CON RETRATO
   La entradilla a la izquierda y la fotografia a su lado: ese hueco
   estaba vacio y el retrato es justo de quienes nombra el parrafo.
   ============================================================ */
.pbo-apertura{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--space-lg); align-items:center;
  margin-bottom:var(--space-lg);
}
.pbo-apertura .pbo-entradilla{ margin:0; }

.pbo-retrato{ margin:0; }
.pbo-retrato__img{
  width:100%; height:auto; display:block;
  border-radius:var(--r-lg);
}
.pbo-retrato__pie{
  margin-top:10px;
  font-size:13px; line-height:1.5; color:var(--muted);
  max-width:44ch;
}

@media (max-width:820px){
  .pbo-apertura{ grid-template-columns:1fr; gap:var(--space-md); }
}


/* ============================================================
   36. FILTROS DEL ARCHIVO DE PROGRAMAS
   Sustituyen a las cuatro secciones por eje: con grupos de 5, 1, 4 y 2
   la rejilla de tres columnas dejaba filas a medias.
   ============================================================ */
.pbo-filtros[hidden]{ display:none; }
.pbo-filtros{
  max-width:var(--container); margin:0 auto var(--space-md);
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-sm); flex-wrap:wrap;
}
.pbo-filtros__grupo{ display:flex; gap:8px; flex-wrap:wrap; }

.pbo-filtro{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface);
  color:var(--ink-soft); font-size:14px; font-weight:600;
  cursor:pointer; line-height:1;
  transition:background-color .45s var(--ease-suave),
             border-color .45s var(--ease-suave),
             color .45s var(--ease-suave);
}
.pbo-filtro:hover{ border-color:var(--select); color:var(--select); }
button.pbo-filtro,
button.pbo-filtro:focus{ background-color:var(--surface); border-color:var(--line); }
button.pbo-filtro:hover{ background-color:var(--surface); border-color:var(--select); color:var(--select); }
button.pbo-filtro.es-activo,
button.pbo-filtro.es-activo:hover,
button.pbo-filtro.es-activo:focus{
  background-color:var(--select); border-color:var(--select); color:#fff;
}
.pbo-filtro:focus-visible{ outline:3px solid var(--select); outline-offset:2px; }

.pbo-filtro__n{
  font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums;
  padding:2px 7px; border-radius:var(--r-pill);
  background:var(--canvas); color:var(--muted);
  transition:background-color .45s var(--ease-suave), color .45s var(--ease-suave);
}
.pbo-filtro.es-activo .pbo-filtro__n{
  background:rgba(255,255,255,.22); color:#fff;
}

.pbo-filtros__aviso{
  margin:0; font-size:13.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* Las tarjetas que sobreviven al filtro vuelven a entrar */
.pbo-prog[hidden]{ display:none; }
@keyframes pbo-prog-entra{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}
.pbo-prog.es-entra{ animation:pbo-prog-entra .5s var(--ease-suave) both; }

@media (max-width:640px){
  .pbo-filtros{ justify-content:flex-start; }
  .pbo-filtro{ padding:7px 13px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce){
  .pbo-prog.es-entra{ animation:none; }
  .pbo-filtro,.pbo-filtro__n{ transition:none; }
}

.pbo-mapa__lienzo{ position:relative; }
/* Saona es tierra, pero no es La Romana: mismo verde que el municipio
   donde hay sedes, para que se lea que ahi hay algo del Patronato. */
.pbo-rm__muni.es-isla{ fill:#B7D4C3; }

/* ============================================================
   37. DATOS DE CONTACTO
   Una fila por dato, con la etiqueta a la izquierda: antes eran
   telefonos sueltos en un parrafo, sin enlazar.
   ============================================================ */
.pbo-contacto{
  list-style:none; margin:0 0 var(--space-lg); padding:0;
  display:grid; gap:0; max-width:56ch;
}
.pbo-contacto li{
  display:grid; grid-template-columns:minmax(96px,140px) 1fr;
  gap:var(--space-sm); align-items:baseline;
  padding-block:12px;
  border-bottom:1px solid var(--line);
  font-size:15.5px;
}
.pbo-contacto li:last-child{ border-bottom:0; }
.pbo-contacto__etq{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.pbo-contacto a{
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:color .45s var(--ease-suave), border-color .45s var(--ease-suave);
}
.pbo-contacto a:hover{ color:var(--accent); border-color:var(--accent); }

@media (max-width:520px){
  .pbo-contacto li{ grid-template-columns:1fr; gap:3px; }
}

/* ============================================================
   38. FORMULARIO DE VOLUNTARIADO
   Vive dentro del modal del tema; aqui solo van los campos.
   ============================================================ */
.pbo-cta-form{ margin-block:var(--space-lg); display:grid; gap:var(--space-sm); justify-items:start; }

.pbo-aviso{
  margin:0; padding:14px 18px; border-radius:var(--r-md);
  font-size:15px; line-height:1.55; max-width:62ch;
}
.pbo-aviso--ok{
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  color:var(--ink);
}

.pbo-modal--form .pbo-modal__panel{ max-width:680px; }
.pbo-modal__pie{ margin-top:var(--space-xs); color:var(--ink-soft); font-size:15px; max-width:52ch; }

.pbo-form{
  margin-top:var(--space-md);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-sm) var(--space-md);
}
.pbo-form__campo{ margin:0; display:grid; gap:6px; min-width:0; }
.pbo-form__campo.es-ancho,
.pbo-form__envio{ grid-column:1 / -1; }

.pbo-form label{
  font-size:12.5px; font-weight:600; color:var(--ink-soft);
  display:flex; align-items:baseline; gap:8px;
}
.pbo-form__opt{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}

.pbo-form input,
.pbo-form select,
.pbo-form textarea{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  padding:11px 13px;
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color .45s var(--ease-suave), box-shadow .45s var(--ease-suave);
}
.pbo-form textarea{ resize:vertical; min-height:96px; }
.pbo-form input:focus,
.pbo-form select:focus,
.pbo-form textarea:focus{
  outline:0; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.pbo-form__envio{
  display:flex; align-items:center; gap:var(--space-sm); flex-wrap:wrap;
  margin:var(--space-xs) 0 0;
}
.pbo-form__nota{ font-size:12.5px; color:var(--muted); max-width:34ch; line-height:1.45; }

/* .pbo-btn--cta es un envoltorio de Elementor: solo pinta el boton que
   lleva dentro. Aqui se usa directamente sobre un <a> y un <button>, asi
   que necesita su propia regla o sale sin relleno. */
a.pbo-btn--cta,
button.pbo-btn--cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 26px; border:0; border-radius:var(--r-pill);
  background:var(--cta); color:#fff;
  font:inherit; font-size:15px; font-weight:600; line-height:1.3;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .5s var(--ease-suave);
}
a.pbo-btn--cta:hover,
a.pbo-btn--cta:focus,
button.pbo-btn--cta:hover,
button.pbo-btn--cta:focus{ background:var(--cta-dark); color:#fff; }
a.pbo-btn--cta:focus-visible,
button.pbo-btn--cta:focus-visible{ outline:3px solid var(--cta); outline-offset:3px; }

/* La trampa para robots no puede ocultarse con display:none: algunos la
   detectan. Se saca del encuadre y se quita del foco. */
.pbo-form__trampa{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

@media (max-width:600px){
  .pbo-form{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .pbo-form input,.pbo-form select,.pbo-form textarea{ transition:none; }
}

/* Llamada a la accion en la cabecera de pagina */
.pbo-phero__cta{ margin-top:var(--space-md); }


/* ============================================================
   38b. SIN ARRASTRE LATERAL
   El panel del mega menu vive fuera del encuadre a la espera de
   abrirse. Basta con que algo se pase un pixel para que la pagina
   entera se desplace al mover el raton. 'clip' corta ese scroll sin
   crear contenedor, asi que la barra de decadas sigue pegandose.
   ============================================================ */
html{ overflow-x:clip; }
body{ overflow-x:clip; max-width:100%; }
/* Safari anterior a la 16 no conoce 'clip' y descarta la regla: sin este
   respaldo el panel del menu, que espera fuera del encuadre, permitia
   arrastrar la pagina de lado en esos iPhone. 'hidden' en body rompe el
   sticky de la barra de decadas, pero solo en esos navegadores. */
@supports not (overflow:clip){
  html, body{ overflow-x:hidden; }
}

/* ============================================================
   39. NEUTRALIZAR LOS DEFECTOS DE HELLO ELEMENTOR
   El tema padre pinta enlaces y botones sin clase en su magenta
   (#cc3366), que no pertenece a la paleta del Patronato.
   ============================================================ */
a{ color:inherit; }
/* Solo el texto corrido lleva enlaces subrayados: la barra lateral es
   navegacion, y subrayar cada item la convertia en una lista de links. */
.pbo-detalle__cuerpo a:not([class]),
.elementor-widget-text-editor a:not([class]){
  color:var(--accent); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
.pbo-lateral a,
.pbo-lateral a:hover{ text-decoration:none; }
.pbo-detalle__cuerpo a:not([class]):hover,
.elementor-widget-text-editor a:not([class]):hover{ color:var(--accent-dark); }

/* El magenta del tema padre se neutraliza arriba del todo, en la sección
   2 bis, que es donde corresponde a un reset. Aquí ya no hace falta. */

/* Cualquier boton nuestro sin clase propia arranca desnudo, no magenta */
.pbo-modal button:not([class]),
.pbo-form button:not([class]),
button.pbo-modal__cerrar,
button.pbo-lupa__cerrar,
button.pbo-filtro{
  background-color:transparent; border-color:currentColor; color:inherit;
}
button.pbo-modal__cerrar{ border:0; color:var(--muted); }
button.pbo-filtro{ background:var(--surface); border-color:var(--line); color:var(--ink-soft); }
button.pbo-filtro.es-activo{ background:var(--select); border-color:var(--select); color:#fff; }
button.pbo-lupa__cerrar,
button.pbo-lupa__cerrar:focus{ background-color:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); color:#fff; }
button.pbo-lupa__cerrar:hover{ background-color:rgba(255,255,255,.2); }

/* ============================================================
   40. CONTACTO
   Titular grande y tarjeta de sedes a la izquierda; el formulario en
   una sola columna a la derecha, con el boton a todo el ancho.
   ============================================================ */
.pbo-ct{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:var(--space-xl);
  align-items:start;
  margin-block:var(--space-md) var(--space-lg);
}

/* --- Columna izquierda --- */
.pbo-ct__kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  font-weight:600; color:var(--muted);
}
.pbo-ct__kicker svg{ color:var(--accent); }

.pbo-ct__titular{
  margin:var(--space-sm) 0 0;
  font-size:clamp(34px,4.4vw,58px);
  font-weight:600; line-height:1.05; letter-spacing:-.03em;
  color:var(--ink); max-width:16ch; text-wrap:balance;
}
.pbo-ct__intro{
  margin-top:var(--space-sm); max-width:44ch;
  font-size:15.5px; line-height:1.6; color:var(--ink-soft);
}

.pbo-ct__tarjeta{
  margin-top:var(--space-lg);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--space-md) var(--space-md) 6px;
  box-shadow:0 18px 40px -30px rgba(8,14,26,.35);
}
.pbo-ct__tarjeta h3{
  font-size:19px; font-weight:600; margin:0 0 4px;
}

/* --- Cada sede, plegable --- */
.pbo-sede{ border-bottom:1px solid var(--line); }
.pbo-sede:last-of-type{ border-bottom:0; }

.pbo-sede > summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:1fr auto; align-items:center;
  justify-items:start; text-align:left;
  gap:2px var(--space-sm);
  padding:15px 0;
  transition:color .4s var(--ease-suave);
}
.pbo-sede > summary::-webkit-details-marker{ display:none; }
.pbo-sede > summary:hover{ color:var(--accent); }
.pbo-sede > summary:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

.pbo-sede__nombre{ font-size:16px; font-weight:600; color:var(--ink); }
.pbo-sede__rol{ grid-column:1; font-size:12.5px; color:var(--muted); }
/* La columna hay que fijarla: al llevar fila explicita, la flecha se
   colocaba antes que el nombre y se quedaba con la columna 1. */
.pbo-sede__flecha{
  grid-column:2; grid-row:1 / span 2;
  color:var(--muted); flex:none;
  transition:transform .45s var(--ease-suave);
}
.pbo-sede__nombre{ grid-column:1; grid-row:1; }
.pbo-sede[open] > summary .pbo-sede__flecha{ transform:rotate(180deg); }

.pbo-sede__cuerpo{ padding:0 0 var(--space-md); }
.pbo-sede__datos{
  /* minmax(0,1fr) y no 1fr: un 1fr no baja del ancho de su palabra mas
     larga, y los correos (diagnosticasocial@pbo.org.do) empujaban la
     columna 35px fuera de la pantalla en 320px. */
  margin:0; display:grid; grid-template-columns:minmax(84px,110px) minmax(0,1fr);
  gap:9px var(--space-sm); font-size:14.5px;
}
.pbo-sede__datos dt{
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding-top:3px;
}
.pbo-sede__datos dd{ margin:0; color:var(--ink); min-width:0; overflow-wrap:anywhere; }
/* En un telefono estrecho la columna de etiquetas (110px) dejaba 88px para
   el dato: la direccion del Hogar del Niño ocupaba siete lineas y cada
   telefono tres. Por debajo de 480px la etiqueta va encima del dato. */
@media (max-width:480px){
  .pbo-sede__datos{ grid-template-columns:minmax(0,1fr); gap:2px 0; }
  .pbo-sede__datos dt{ padding-top:10px; }
  .pbo-sede__datos dt:first-child{ padding-top:0; }
}
.pbo-sede__datos a{
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:color .4s var(--ease-suave), border-color .4s var(--ease-suave);
}
.pbo-sede__datos a:hover{ color:var(--accent); border-color:var(--accent); }

.pbo-sede__mapa{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:var(--space-sm);
  padding:8px 15px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--canvas);
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  text-decoration:none;
  transition:border-color .45s var(--ease-suave), color .45s var(--ease-suave);
}
.pbo-sede__mapa:hover{ border-color:var(--accent); color:var(--accent); }

/* --- Formulario --- */
.pbo-ctform{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--space-md);
  box-shadow:0 18px 40px -30px rgba(8,14,26,.35);
  display:grid; gap:var(--space-sm);
}
.pbo-ctform__campo{ margin:0; display:grid; gap:7px; }
.pbo-ctform label{
  font-size:15px; font-weight:600; color:var(--ink);
}
.pbo-ctform input,
.pbo-ctform select,
.pbo-ctform textarea{
  width:100%; font:inherit; font-size:17px; color:var(--ink);
  padding:16px 18px;
  background:var(--canvas);
  border:1px solid transparent; border-radius:var(--r-md);
  transition:border-color .4s var(--ease-suave), background-color .4s var(--ease-suave);
}
.pbo-ctform textarea{ resize:vertical; min-height:150px; }
.pbo-ctform ::placeholder{ color:var(--muted); }
.pbo-ctform input:focus,
.pbo-ctform select:focus,
.pbo-ctform textarea:focus{
  outline:0; background:var(--surface); border-color:var(--accent);
}

/* Boton a todo el ancho, en tinta: cierra la tarjeta */
.pbo-ctform__enviar{
  width:100%; margin-top:6px;
  padding:18px 22px; border:0; border-radius:var(--r-md);
  background:var(--bar); color:#fff;
  font:inherit; font-size:17px; font-weight:600;
  cursor:pointer;
  transition:background-color .5s var(--ease-suave);
}
button.pbo-ctform__enviar,
button.pbo-ctform__enviar:focus{ background-color:var(--bar); }
button.pbo-ctform__enviar:hover{ background-color:var(--ink); }
.pbo-ctform__enviar:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.pbo-ctform__nota{
  font-size:13.5px; color:var(--muted); text-align:center; line-height:1.55;
}

@media (max-width:900px){
  .pbo-ct{ grid-template-columns:1fr; gap:var(--space-lg); }
  .pbo-ct__titular{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .pbo-sede__flecha,.pbo-sede__mapa,.pbo-sede__datos a,
  .pbo-ctform input,.pbo-ctform select,.pbo-ctform textarea,
  .pbo-ctform__enviar{ transition:none; }
}

/* Logotipo del evento sobre su fotografía.
   Los originales son apaisados y venian con fondo blanco: la capsula
   se adapta a su proporcion en vez de encajarlos en un cuadrado. */
.pbo-item__media{ position:relative; }
.pbo-item__marca{
  position:absolute; left:12px; bottom:12px;
  display:flex; align-items:center; justify-content:center;
  height:58px; max-width:min(72%,190px); padding:8px 12px;
  background:#fff;
  border-radius:var(--r-md);
  box-shadow:0 6px 20px -8px rgba(8,14,26,.45);
}
/* El logo vive dentro de .pbo-item__media, asi que le caia encima la
   regla de la foto de la tarjeta (height fija y object-fit:cover) y
   salia estirado. Necesita ganarle en alcance. */
.pbo-item__media .pbo-item__marca .pbo-item__logo{
  width:auto; height:100%; max-width:100%; min-height:0;
  object-fit:contain; object-position:center; display:block;
}
@media (max-width:560px){
  .pbo-item__marca{ height:48px; padding:6px 10px; }
}

/* Paginas cuyo contenido principal es un componente ancho: sin barra de
   indice y sin la medida de lectura, que las dejaba en 745px. */
.pbo-conlateral--ancha{ grid-template-columns:1fr; }
.pbo-conlateral--ancha .pbo-detalle__cuerpo{ max-width:none; }

/* ============================================================
   41. CARRUSEL DE LA CABECERA DE PROGRAMA
   Las diapositivas se cruzan con opacidad, no con desplazamiento: el
   bloque tiene esquinas redondeadas y un slide entrando por el lado se
   veia cortado contra el radio.
   ============================================================ */
.pbo-slider{ position:relative; overflow:hidden; }
.pbo-slider__pista{ position:relative; width:100%; height:100%; }

/* Solo opacidad: 'visibility' dentro de la transicion es discreta y se
   quedaba en hidden sobre la diapositiva activa. Del ocultado para
   lectores de pantalla se encarga aria-hidden. */
.pbo-slider__slide{
  position:absolute; inset:0; margin:0; z-index:0;
  opacity:0; pointer-events:none;
  transition:opacity .8s var(--ease-suave);
}
.pbo-slider__slide.es-activa{ opacity:1; z-index:1; pointer-events:auto; }
.pbo-slider__slide img{
  width:100%; height:100%; object-fit:cover;
  object-position:center 30%; display:block;
}

/* Flechas: aparecen al acercarse, no compiten con la fotografia */
.pbo-slider__flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  display:grid; place-items:center;
  width:42px; height:42px; padding:0;
  border:0; border-radius:var(--r-pill);
  background:rgba(10,16,26,.5); color:#fff;
  cursor:pointer; opacity:0;
  transition:opacity .45s var(--ease-suave), background-color .45s var(--ease-suave);
}
.pbo-slider__flecha.es-antes{ left:14px; }
.pbo-slider__flecha.es-despues{ right:14px; }
.pbo-slider:hover .pbo-slider__flecha,
.pbo-slider:focus-within .pbo-slider__flecha{ opacity:1; }
.pbo-slider__flecha:hover{ background:rgba(10,16,26,.78); }
.pbo-slider__flecha:focus-visible{ opacity:1; outline:3px solid #fff; outline-offset:2px; }

/* Puntos */
.pbo-slider__puntos{
  position:absolute; left:0; right:0; bottom:14px;
  display:flex; justify-content:center; gap:7px;
}
.pbo-slider__punto{
  width:8px; height:8px; padding:0;
  border:0; border-radius:var(--r-pill);
  background:rgba(255,255,255,.5);
  cursor:pointer;
  transition:width .45s var(--ease-suave), background-color .45s var(--ease-suave);
}
.pbo-slider__punto.es-activo{ width:24px; background:#fff; }
.pbo-slider__punto:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  .pbo-slider__slide{ transition:none; }
  .pbo-slider__flecha,.pbo-slider__punto{ transition:none; opacity:1; }
}

/* ============================================================
   42. VIDEO CON PORTADA
   El institucional dura diez minutos: no se precarga nada hasta que
   alguien pulsa, asi que su peso no afecta a la carga de la pagina.
   ============================================================ */
.pbo-video{
  position:relative; margin:0;
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--bar);
  aspect-ratio:16/9;
}
.pbo-video__cinta{
  width:100%; height:100%; display:block;
  object-fit:cover; background:var(--bar);
}

/* Capa de portada con el boton */
.pbo-video__play{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  width:100%; padding:0; border:0;
  background:linear-gradient(180deg,rgba(8,14,26,.18) 0%,rgba(8,14,26,.52) 100%);
  color:#fff; cursor:pointer;
  font:inherit;
  transition:background-color .5s var(--ease-suave), opacity .4s var(--ease-suave);
}
.pbo-video.es-reproduciendo .pbo-video__play{ opacity:0; pointer-events:none; }

.pbo-video__icono{
  display:grid; place-items:center;
  width:66px; height:66px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.94); color:var(--bar);
  padding-left:4px;                     /* el triangulo pesa a la izquierda */
  transition:transform .5s var(--ease-suave), background-color .5s var(--ease-suave);
}
.pbo-video__play:hover .pbo-video__icono{ transform:scale(1.07); background:#fff; }
.pbo-video__play:focus-visible{ outline:3px solid #fff; outline-offset:-6px; }

.pbo-video__rotulo{
  font-size:14px; font-weight:600; letter-spacing:.02em;
  text-shadow:0 2px 12px rgba(8,14,26,.5);
}
.pbo-video__pie{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 14px; font-size:12.5px; color:rgba(255,255,255,.85);
  background:linear-gradient(180deg,transparent,rgba(8,14,26,.7));
}

/* En "Quienes somos" el texto va a la izquierda y el video al lado.
   Hay que anular la medida de lectura de .pbo-lede (62ch): con ella las
   dos columnas se apretaban en 620px y sobraba medio ancho a la derecha. */
.pbo-lede--video{
  max-width:none;
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:var(--space-xl); align-items:center;
}
/* El texto conserva su medida dentro de su propia columna */
.pbo-lede--video > .e-con:first-child .e-con-inner,
.pbo-lede--video > .e-con:first-child{ max-width:56ch; }

@media (max-width:900px){
  .pbo-lede--video{ grid-template-columns:1fr; gap:var(--space-lg); }
  .pbo-lede--video > .e-con:first-child{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .pbo-video__play,.pbo-video__icono{ transition:none; }
}

/* ============================================================
   43. CABECERA EN MODO PORTADA
   Mismo tratamiento que la cabecera de una noticia: banda insertada
   del borde, esquinas redondeadas, foto de fondo y el titular abajo
   a la izquierda. Asi las portadas del sitio se leen todas igual.
   ============================================================ */
.pbo-phero--portada{
  max-width:none;
  margin:0 var(--gutter) var(--space-section);
  padding:0;
  background:transparent;
  border-radius:var(--r-2xl);
  overflow:hidden;
  position:relative; isolation:isolate;
  min-height:clamp(380px,42vw,560px);
  display:flex; align-items:flex-end;
}
/* La foto se sale del flujo: con height:100% contra una fila indefinida
   caia a su alto intrinseco y estiraba la banda a 959px. */
.pbo-phero--portada .pbo-phero__foto{
  position:absolute; inset:0; z-index:0;
  border-radius:0; aspect-ratio:auto;
  width:100%; height:100%;
}
/* El encuadre sube: a 32% el recorte cortaba por la frente a quien
   estuviera de pie detras del grupo. */
.pbo-phero--portada .pbo-phero__foto img{
  width:100%; height:100%; object-fit:cover; object-position:center 18%;
}
.pbo-phero--portada::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(8,14,26,.15) 0%,rgba(8,14,26,.72) 100%);
}

.pbo-phero--portada .pbo-phero__texto{
  position:relative; z-index:2;
  padding:var(--space-md);
  max-width:min(92%,46ch);
  color:#fff;
}
.pbo-phero--portada .pbo-kicker{ color:rgba(255,255,255,.75); }
.pbo-phero--portada h1{
  color:#fff;
  font-size:clamp(34px,4.2vw,54px);
  max-width:none;
}
.pbo-phero--portada .pbo-phero__entrada{
  color:rgba(255,255,255,.88);
  font-size:clamp(16px,1.4vw,19px); max-width:44ch;
}

@media (max-width:900px){
  .pbo-phero--portada{ min-height:clamp(320px,58vw,440px); }
}


/* ============================================================
   44. BANDA DE "NUESTRO MODELO"
   Sobre el fondo de la pagina el bloque quedaba plano, sin nada que
   lo separara de lo que viene antes y despues.
   ============================================================ */
.pbo-section.pbo-modelo{
  background:#ffffff;
  border-radius:var(--r-2xl);
  /* Elementor saca el ancho de --width: con solo margin-inline la banda
     se salia 34px por la derecha, como paso con "Como ayudar". */
  --width:calc(100% - var(--gutter) * 2);
  margin-inline:var(--gutter);
  padding-inline:clamp(24px,3.4vw,56px) !important;
}
/* El anillo que separa el numero del filete toma el blanco de la banda */
.pbo-modelo .pbo-paso::before{ box-shadow:0 0 0 4px #ffffff; }

@media (max-width:820px){
  .pbo-section.pbo-modelo{ --width:100%; margin-inline:0; border-radius:0; }
}

/* ============================================================
   45. PAGINA DE DONACION
   ============================================================ */
.pbo-donar{ display:grid; gap:var(--sep-entera); }

/* --- El formulario --- */
.pbo-donar__form h2{ font-size:var(--fs-h2); }
.pbo-donar__nota{
  margin-top:var(--space-xs); max-width:56ch;
  color:var(--ink-soft); font-size:15.5px;
}
.pbo-donar__marco{
  margin-top:var(--space-md);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.pbo-donar__zeffy{
  display:block; width:100%; min-height:760px; border:0;
}
.pbo-donar__alt{
  margin-top:var(--space-xs); font-size:13.5px; color:var(--muted);
}
.pbo-donar__alt a{ color:var(--accent); }

/* --- Otras formas de apoyar --- */
.pbo-donar__vias h2{ font-size:var(--fs-h2); margin-bottom:var(--space-md); }
.pbo-donar__rejilla{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md);
}
.pbo-donar__via{
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--space-md);
}
.pbo-donar__via h3{ font-size:20px; margin:10px 0 8px; }
.pbo-donar__via p{
  font-size:14.5px; line-height:1.6; color:var(--ink-soft);
  margin-bottom:var(--space-sm);
}
.pbo-donar__mas{
  margin-top:auto;
  font-size:14px; font-weight:600; color:var(--accent);
  text-decoration:none;
  transition:color .4s var(--ease-suave);
}
.pbo-donar__mas:hover{ color:var(--accent-dark); }

@media (max-width:900px){
  .pbo-donar__rejilla{ grid-template-columns:1fr; }
  .pbo-donar__zeffy{ min-height:900px; }
}

/* ============================================================
   46. PBO IA — ASISTENTE
   ============================================================ */
/* --- Mascota: los dos niños del logotipo --- */
/* El estado por defecto es el visible. La entrada caminando es una
   animacion opcional encima: si no llegara a ejecutarse —pestaña de
   fondo, transiciones estranguladas— la mascota ya esta en su sitio en
   vez de quedarse invisible para siempre, que es lo que pasaba cuando
   el estado base era opacity:0 y dependia de una transicion. */
.pbo-mascota{
  position:fixed; right:clamp(14px,2vw,24px); bottom:clamp(14px,2vw,24px);
  z-index:8000;
  display:flex; align-items:flex-start; gap:6px;
  transition:transform .8s var(--ease-suave);
}
/* La entrada la conduce el JS con estilos en linea y la retira pasado
   el tiempo. Nada en CSS puede dejar la mascota invisible: ni una
   animacion pausada en su fotograma cero, ni una transicion que no
   arranque. Si el JS fallara, esta visible desde el primer momento. */

/* Alineado arriba: el globo tiene que salir de la cabeza. Con
   align-items:flex-end quedaba a la altura de los pies. */
/* La mascota es un <button>, y Hello Elementor pinta los botones en los
   cuatro estados. El reset general vive dentro de :where() (especificidad
   cero) para no aplastar a los componentes, asi que aqui hay que cubrir
   hover/focus/active explicitamente: cubrir solo el estado base dejaba un
   recuadro magenta detras del globo y los niños al pasar el raton. */
button.pbo-mascota__btn,
button.pbo-mascota__btn:hover,
button.pbo-mascota__btn:focus,
button.pbo-mascota__btn:active{
  display:flex; align-items:flex-start; gap:10px;
  padding:0; border:0; background:transparent; box-shadow:none;
  cursor:pointer; font:inherit;
}
.pbo-mascota__btn:focus-visible{ outline:3px solid var(--accent); outline-offset:6px; border-radius:var(--r-md); }

/* Los niños: balanceo de andar mientras entran, respiración al parar */
.pbo-mascota__ninos{
  display:block; width:clamp(72px,7vw,96px); flex:none;
  filter:drop-shadow(0 10px 18px rgba(8,14,26,.24));
  animation:pbo-andar .62s ease-in-out infinite;
}
.pbo-mascota__ninos svg{ width:100%; height:auto; display:block; overflow:visible; }
.pbo-mascota.es-dentro .pbo-mascota__ninos{
  animation:pbo-respirar 3.4s ease-in-out infinite;
}
@keyframes pbo-andar{
  0%,100%{ transform:translateY(0) rotate(-1.6deg); }
  50%    { transform:translateY(-5px) rotate(1.6deg); }
}
@keyframes pbo-respirar{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-3px); }
}

/* Mientras saltan, la respiracion del conjunto se detiene */
.pbo-mascota.es-dentro.es-saltando .pbo-mascota__ninos{ animation:none; }

/* El globo acompaña el salto con un rebote corto */
.pbo-mascota.es-saltando .pbo-mascota__globo{
  animation:pbo-globo-rebote 1.1s cubic-bezier(.28,.84,.42,1) 2;
}
@keyframes pbo-globo-rebote{
  0%,34%,66%,100%{ transform:none; }
  18%  { transform:translateY(-4px) rotate(-1.4deg); }
  50%  { transform:translateY(-2px) rotate(1deg); }
}

/* Globo de diálogo */
.pbo-mascota__globo{
  position:relative;
  max-width:230px;
  padding:12px 16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px 18px 18px 18px;
  margin-top:6px;                 /* a la altura de la cabeza */
  box-shadow:0 14px 34px -14px rgba(8,14,26,.4);
  transform-origin:100% 20%;
  /* Oculto solo mientras no toque hablar; se muestra con animacion, no
     con una transicion desde opacity:0, por el mismo motivo. */
  display:none;
}
.pbo-mascota.es-hablando .pbo-mascota__globo{
  display:block;
  animation:pbo-globo .45s cubic-bezier(.34,1.56,.64,1);
}
/* El fotograma final es el estado normal del globo: aunque la animacion
   quede pausada, el globo se ve. */
@keyframes pbo-globo{
  from{ opacity:.001; transform:translateY(-6px) scale(.94); }
}
.pbo-mascota__texto{
  display:block;
  font-size:14px; line-height:1.45; font-weight:600; color:var(--ink);
  text-align:left; text-wrap:balance;
}
/* Rabito del globo, apuntando a la cabeza de los niños */
.pbo-mascota__globo::after{
  content:""; position:absolute; right:-7px; top:22px;
  width:14px; height:14px;
  background:var(--surface);
  border-right:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(45deg);
}


@media (max-width:640px){
  .pbo-mascota__globo{ max-width:170px; padding:10px 13px; }
  .pbo-mascota__texto{ font-size:12.5px; }
}
@media (prefers-reduced-motion:reduce){
  .pbo-mascota{ transition:none; }
  .pbo-mascota.es-dentro.es-saltando .pbo-mascota__ninos,
  .pbo-mascota.es-saltando .pbo-mascota__globo{ animation:none; }
  .pbo-mascota.es-dentro,
  .pbo-mascota.es-hablando .pbo-mascota__globo,
  .pbo-mascota__ninos,
  .pbo-mascota.es-dentro .pbo-mascota__ninos{ animation:none; }
}

/* --- Ventana --- */
.pbo-ia{ position:fixed; inset:0; z-index:9500; display:none; }
.pbo-ia[data-abierto="true"]{ display:grid; place-items:center; padding:var(--gutter); }

.pbo-ia__fondo{
  position:absolute; inset:0;
  background:rgba(8,14,26,.55);
  backdrop-filter:blur(14px) saturate(.9);
  -webkit-backdrop-filter:blur(14px) saturate(.9);
  animation:pbo-ia-fondo .4s var(--ease-suave);
}
@keyframes pbo-ia-fondo{ from{ opacity:0; } to{ opacity:1; } }

.pbo-ia__panel{
  position:relative;
  width:min(100%,620px); max-height:min(84vh,720px);
  display:flex; flex-direction:column;
  background:var(--surface);
  border-radius:var(--r-xl);
  box-shadow:0 40px 90px -30px rgba(8,14,26,.5);
  overflow:hidden;
  animation:pbo-ia-panel .45s var(--ease-suave);
}
@keyframes pbo-ia-panel{
  from{ opacity:0; transform:translateY(16px) scale(.985); }
  to{ opacity:1; transform:none; }
}

.pbo-ia__cab{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--space-sm);
  padding:var(--space-md) var(--space-md) var(--space-sm);
  border-bottom:1px solid var(--line);
}
.pbo-ia__cab h2{ font-size:22px; margin-top:4px; }
.pbo-ia__cerrar{
  background:transparent; border:0; padding:6px; cursor:pointer;
  color:var(--muted); flex:none;
  transition:color .4s var(--ease-suave);
}
.pbo-ia__cerrar:hover{ color:var(--ink); }

/* --- Conversación --- */
.pbo-ia__hilo{
  flex:1; overflow-y:auto;
  padding:var(--space-md);
  display:flex; flex-direction:column; gap:12px;
}
.pbo-ia__msg{
  max-width:88%;
  padding:12px 15px; border-radius:var(--r-md);
  font-size:15px; line-height:1.6;
}
.pbo-ia__msg p{ margin:0; }
.pbo-ia__msg.es-bot{
  background:var(--canvas); color:var(--ink); align-self:flex-start;
  border-bottom-left-radius:6px;
}
/* El color hay que ponerlo tambien en el parrafo: el <p> heredaba la
   tinta del cuerpo y el texto salia oscuro sobre el azul. */
.pbo-ia__msg.es-yo,
.pbo-ia__msg.es-yo p{
  color:#fff;
}
.pbo-ia__msg.es-yo{
  background:var(--bar); align-self:flex-end;
  border-bottom-right-radius:6px;
}
.pbo-ia__msg.es-esperando p{ color:var(--muted); letter-spacing:.24em; }

.pbo-ia__fuentes{
  list-style:none; margin:10px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.pbo-ia__fuentes a{
  display:inline-block;
  padding:4px 11px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface);
  font-size:12.5px; color:var(--ink-soft); text-decoration:none;
  transition:border-color .4s var(--ease-suave), color .4s var(--ease-suave);
}
.pbo-ia__fuentes a:hover{ border-color:var(--accent); color:var(--accent); }

/* --- Sugerencias --- */
.pbo-ia__sugerencias[hidden]{ display:none; }
.pbo-ia__sugerencias{
  display:flex; flex-wrap:wrap; gap:7px;
  padding:0 var(--space-md) var(--space-sm);
}
.pbo-ia__sug{
  padding:8px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface);
  font:inherit; font-size:13.5px; color:var(--ink-soft);
  cursor:pointer;
  transition:border-color .4s var(--ease-suave), color .4s var(--ease-suave);
}
button.pbo-ia__sug{ background-color:var(--surface); border-color:var(--line); }
button.pbo-ia__sug:hover,
button.pbo-ia__sug:focus{ background-color:var(--surface); border-color:var(--accent); color:var(--accent); }

/* --- Campo --- */
.pbo-ia__form{
  display:flex; gap:8px;
  padding:var(--space-sm) var(--space-md);
  border-top:1px solid var(--line);
}
.pbo-ia__form input{
  flex:1; font:inherit; font-size:15.5px; color:var(--ink);
  padding:12px 15px;
  background:var(--canvas);
  border:1px solid transparent; border-radius:var(--r-md);
  transition:border-color .4s var(--ease-suave), background-color .4s var(--ease-suave);
}
.pbo-ia__form input:focus{ outline:0; background:var(--surface); border-color:var(--accent); }
.pbo-ia__form button{
  display:grid; place-items:center;
  width:46px; flex:none;
  border:0; border-radius:var(--r-md);
  background:var(--accent); color:#fff; cursor:pointer;
  transition:background-color .4s var(--ease-suave);
}
.pbo-ia__form button[data-ia-enviar],
.pbo-ia__form button[data-ia-enviar]:focus{ background-color:var(--accent); }
.pbo-ia__form button[data-ia-enviar]:hover{ background-color:var(--accent-dark); }

.pbo-ia__pie{
  margin:0; padding:0 var(--space-md) var(--space-sm);
  font-size:12px; line-height:1.5; color:var(--muted);
}

/* Con la ventana abierta la pagina no se mueve por detras */
/* El bloqueo lo hace el JS fijando el cuerpo: con overflow:hidden a
   secas se perdía la posición de lectura al cerrar. */
body.pbo-ia-abierta{ overflow:hidden; }

@media (max-width:520px){
  .pbo-ia__abrir .pbo-ia__rotulo{ display:none; }
  .pbo-ia__abrir{ padding:14px; }
  .pbo-ia__panel{ max-height:92vh; }
}
@media (prefers-reduced-motion:reduce){
  .pbo-ia__abrir,.pbo-ia__panel,.pbo-ia__fondo{ transition:none; animation:none; }
}


/* ============================================================
   47. REMATES
   ============================================================ */
/* El radio del hero se estaba perdiendo y las esquinas salian en
   angulo recto, con el fondo oscuro asomando por fuera de la curva.
   Se fija en el bloque y en todo lo que lleva dentro. */
.e-con.pbo-hero,
.pbo-hero{
  border-radius:var(--r-2xl) !important;
  overflow:hidden !important;
  /* El recorte redondeado de un contenedor no siempre alcanza a las capas
     que el navegador compone aparte (el fondo del video, el degradado del
     ::before): asomaba una punta gris con la esquina cuadrada. La mascara
     obliga al recorte en la misma capa y las puntas salen limpias. */
  -webkit-mask-image:-webkit-radial-gradient(#fff, #000);
          mask-image:radial-gradient(#fff, #000);
}
.pbo-hero > .e-con-inner{ border-radius:inherit; }
.pbo-hero__video,
.pbo-hero__media,
.pbo-hero__media img,
.pbo-hero video{
  border-radius:inherit;
}

/* El SVG venia en una sola pieza, asi que .pbo-nino no encajaba con
   nada y en el intro no saltaba nadie. Ahora las dos figuras van en su
   propio grupo y saltan alternadas, una detras de otra. */
.pbo-mascota.es-dentro.es-saltando .pbo-nino{
  transform-box:fill-box; transform-origin:bottom center;
  animation:pbo-salto 1s cubic-bezier(.3,0,.4,1) 2;
}
.pbo-mascota.es-dentro.es-saltando .pbo-nino--der{ animation-delay:.5s; }

@media (prefers-reduced-motion:reduce){
  .pbo-carga .pbo-nino,
  .pbo-mascota .pbo-nino{ animation:none; }
}

/* ============================================================
   48. AJUSTES DE MOVIL
   Auditoria a 375px: la cabecera se medía a lo ancho del escritorio,
   el heroe quedaba recortado con un margen muerto a la derecha y los
   dos elementos flotantes (idioma y mascota) tapaban el texto.
   ============================================================ */
@media (max-width:900px){

  /* --- Heroe a sangre --- */
  /* La regla general del heroe lleva !important (Elementor pisa el radio
     con estilos en linea), asi que aqui hace falta el mismo peso. */
  .pbo-hero,
  .e-con.pbo-hero{
    --width:100%;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    border-radius:0 !important;
  }

  /* --- Selector de idioma: a la esquina inferior izquierda --- */
  /* Arriba a la derecha se comía la foto del heroe y la barra de decadas
     de la linea del tiempo. Abajo a la izquierda no pisa nada: la mascota
     ocupa la derecha. */
  .pbo-idioma{
    top:auto;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);
    right:auto;
    left:12px;
  }

  /* --- Mascota: solo los niños, sin globo --- */
  /* El globo ocupaba 239px (dos tercios de la pantalla) y tapaba el
     cuerpo del texto en todas las pantallas. En movil la mascota es solo
     el lanzador; el saludo se lee al abrir el chat. */
  .pbo-mascota{
    bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
    right:12px;
  }
  .pbo-mascota .pbo-mascota__globo,
  .pbo-mascota.es-hablando .pbo-mascota__globo{ display:none; }
  .pbo-mascota__ninos{ width:64px; }
}

@media (max-width:560px){
  /* Zonas tactiles: minimo comodo de 44px de alto en los enlaces del menu
     desplegable y en los botones de la cabecera. */
  .pbo-mega__list > li > a{ padding-block:11px; }
  .pbo-header__main .pbo-give{ min-height:40px; }
  .pbo-burger{ min-height:40px; min-width:40px; }
}

@media (max-width:820px){
  /* El chip del año iba en position:absolute sobre la tarjeta. En los hitos
     sin foto el título empieza arriba del todo y el chip se le montaba
     encima. En una sola columna no hace falta superponerlo: entra en el
     flujo, encima del título, y el punto del eje sobra. */
  .pbo-hito.es-izquierda .pbo-hito__anio,
  .pbo-hito.es-derecha .pbo-hito__anio,
  .pbo-hito__anio{
    position:static;
    display:inline-block;
    left:auto; right:auto; top:auto;
    margin-bottom:10px;
    max-width:none;
  }
  .pbo-hito__anio::after{ display:none; }
  .pbo-hito.es-texto .pbo-hito__caja{ padding-top:0; }
}

@media (max-width:820px){
  /* La barra de décadas ocupaba dos filas fijas (unos 100px de pantalla) y
     el título de la década se le montaba encima al hacer scroll. En móvil
     va en una sola fila deslizable, opaca y por encima de todo. */
  .pbo-linea__nav{
    width:100%; max-width:none;
    margin-inline:0;
    border-radius:var(--r-lg);
    padding:6px;
    z-index:40;
  }
  .pbo-linea__nav ul{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .pbo-linea__nav ul::-webkit-scrollbar{ display:none; }
  .pbo-linea__nav li{ flex:none; }
  .pbo-linea__nav a{ white-space:nowrap; }

  /* Al saltar a una década, que no quede debajo de la barra. */
  .pbo-decada{ scroll-margin-top:84px; }

  /* Sin la animación de entrada: en móvil se quedaba a media opacidad y el
     contenido de detrás se transparentaba a través de la barra. */
  .pbo-linea__nav{
    opacity:1;
    transform:none;
    pointer-events:auto;
    transition:none;
  }
}

@media (max-width:1024px){
  /* Zonas táctiles del menú desplegable: en móvil es la única navegación,
     así que cada enlace necesita altura suficiente para el dedo. */
  .pbo-mega__list > li > a,
  .pbo-mega__list .sub-menu a,
  .pbo-mega__footlist a{ padding-block:10px; }
}

/* Con el menú abierto, los flotantes sobran: la mascota se colaba por
   encima del panel (z-index 8000 contra 900) y tapaba los enlaces. */
/* Se ocultan con display, no con opacity: la animacion de entrada de la
   mascota deja un style="opacity" en linea que le ganaria a la regla. */
body:has(.pbo-mega[data-open="true"]) .pbo-mascota,
body:has(.pbo-mega[data-open="true"]) > .pbo-idioma{ display:none; }
/* Lo mismo con una clase que pone header.js, en regla aparte: un navegador
   sin :has() (Firefox < 121, Safari < 15.4) descarta la lista entera de
   selectores, y ahi la mascota volvia a tapar el menu. */
body.pbo-mega-abierta .pbo-mascota,
body.pbo-mega-abierta > .pbo-idioma{ display:none; }

/* ============================================================
   49. MOVIL: TARJETAS, FORMULARIOS Y SELECTOR DE IDIOMA
   Segunda pasada de auditoria a 375px sobre paginas interiores.
   ============================================================ */
@media (max-width:820px){

  /* --space-md son 40px, pensados para escritorio. Como padding de tarjeta
     dejaban 245px utiles de 375: el contenido salia estrecho y la seccion
     de cifras llegaba a desbordar. */
  .pbo-ct__tarjeta,
  .pbo-datos,
  .pbo-ctform,
  .pbo-form{ padding:var(--space-sm); }
  .pbo-datos{ margin-inline:0; max-width:100%; }
  /* La regla de escritorio que las saca de la medida de lectura es mas
     especifica que la de arriba y ganaba: en 320px datos y cita se
     salian 4px por la izquierda y el borde quedaba cortado. */
  .pbo-detalle__cuerpo > .pbo-datos,
  .pbo-detalle__cuerpo > .pbo-cita{ margin-inline:0; }

  /* iOS hace zoom al enfocar un campo con letra por debajo de 16px. */
  .pbo-form input, .pbo-form select, .pbo-form textarea,
  .pbo-ctform input, .pbo-ctform select, .pbo-ctform textarea,
  .pbo-ia__form input{ font-size:16px; }

  /* El selector flotante se sustituye por el que va dentro del panel. */
  body > .pbo-idioma{ display:none; }
  .pbo-mega .pbo-idioma{
    position:static;
    align-self:flex-start;
    margin-bottom:var(--space-sm);
    background:transparent;
    border-color:rgba(255,255,255,.28);
    box-shadow:none;
  }
  .pbo-mega .pbo-idioma__op{ color:rgba(255,255,255,.72); }
  .pbo-mega .pbo-idioma__op.es-actual{ background:rgba(255,255,255,.12); color:#fff; }
}

@media (min-width:821px){
  /* En escritorio manda el flotante; el del panel sobra. */
  .pbo-mega .pbo-idioma{ display:none; }
}

/* Telefonos en horizontal (iPhone a 844 y 852px). Entre 821 y 900px el
   flotante ya bajaba a la esquina inferior izquierda (regla de 900px) pero
   no se ocultaba hasta 820: quedaba encima del texto. En ese tramo se usa
   lo mismo que en movil vertical, el selector dentro del menu. Va despues
   de la regla de arriba para ganarle con la misma especificidad. */
@media (min-width:821px) and (max-width:900px){
  body > .pbo-idioma{ display:none; }
  .pbo-mega .pbo-idioma{
    display:flex;
    position:static;
    align-self:flex-start;
    margin-bottom:var(--space-sm);
    background:transparent;
    border-color:rgba(255,255,255,.28);
    box-shadow:none;
  }
  .pbo-mega .pbo-idioma__op{ color:rgba(255,255,255,.72); }
  .pbo-mega .pbo-idioma__op.es-actual{ background:rgba(255,255,255,.12); color:#fff; }
}

/* ============================================================
   50. MOVIL: ESTRUCTURA DEL MENU, RITMO Y MASCOTA
   El panel apilaba 39 enlaces en 1857px —dos pantallas y media—
   y los espacios verticales seguian siendo los de escritorio.
   ============================================================ */
@media (max-width:1024px){

  /* --- Menu en acordeon --- */
  /* El rotulo de seccion y su flecha comparten fila; el submenu se pliega
     con grid-template-rows, que si anima (a diferencia de height:auto). */
  /* Sin borde propio: el rotulo de seccion ya lleva su linea inferior y
     dos juntas dejaban un renglon vacio bajo las secciones plegadas. */
  .pbo-mega__list > li.es-plegable{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
  }
  .pbo-mega__list > li.es-plegable > a{ grid-column:1; }

  .pbo-mega__toggle{
    grid-column:2;
    width:44px; height:44px;          /* zona tactil comoda */
    display:grid; place-items:center;
    background:transparent; border:0; padding:0;
    color:inherit; cursor:pointer;
  }
  .pbo-mega__flecha{
    width:11px; height:11px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .3s var(--ease-suave);
  }
  .es-abierta > .pbo-mega__toggle .pbo-mega__flecha{
    transform:rotate(-135deg) translate(-2px,-2px);
  }

  /* El truco de grid-template-rows:0fr solo colapsa la PRIMERA fila: con
     varios enlaces el resto seguian visibles y encimados. max-height con
     un tope generoso aguanta cualquier numero de hijos. */
  .pbo-mega__list > li.es-plegable > .sub-menu{
    grid-column:1 / -1;
    overflow:hidden;
    max-height:0;
    transition:max-height .35s var(--ease-suave);
  }
  .pbo-mega__list > li.es-abierta > .sub-menu{ max-height:70vh; }

  /* --- Ritmo vertical --- */
  /* 96px y 64px son medidas de escritorio: en una pantalla de 812px de
     alto dejaban huecos de un tercio de pantalla entre secciones. */
  :root{
    --space-xl:56px;
    --space-lg:40px;
    --space-md:28px;
  }

  /* --- Mascota --- */
  /* Es un lanzador de chat: 52px es la medida habitual y la que menos
     estorba. A 82px con borde parecia una pegatina encima del texto.
     Sin borde y con sombra suave se lee como boton sin llamar la atencion. */
  button.pbo-mascota__btn{
    background:var(--surface);
    border-radius:999px;
    border:0;
    width:52px; height:52px;
    padding:0;
    display:grid; place-items:center;
    box-shadow:0 6px 18px -6px rgba(8,14,26,.32);
  }
  .pbo-mascota__ninos{ width:34px; filter:none; }

  /* Que nada quede definitivamente debajo: el final de cada pagina deja
     sitio para el lanzador. */
  .pbo-detalle__cuerpo,
  .pbo-conlateral__main,
  main{ padding-bottom:72px; }
}

/* ============================================================
   51. MOVIL: CRONOLOGIA DE LA LINEA DEL TIEMPO
   Las dos columnas se reparten los hitos por indice par/impar.
   Apiladas en movil eso intercalaba los años (1976, 1978, 1977).
   Con display:contents las tarjetas pasan a ser hijas directas del
   contenedor flex y 'order' las devuelve a su orden real.
   ============================================================ */
@media (max-width:820px){
  .pbo-decada__hitos{ display:flex; flex-direction:column; }
  .pbo-decada__col{ display:contents; }
  .pbo-hito{ order:var(--orden, 0); }
}

/* ============================================================
   52. MOVIL: CABECERA DE PAGINA CON FOTO
   El velo arrancaba en .15 de opacidad justo donde va el titulo, y en
   movil la cabecera se queda en 320px con 257px de texto encima: el
   parrafo quedaba practicamente ilegible sobre la foto.
   ============================================================ */
@media (max-width:820px){
  .pbo-phero--portada,
  .pbo-detalle__cab--foto{
    min-height:clamp(360px,86vw,480px);   /* sitio para el texto */
  }

  /* Velo mas firme y con la curva desplazada hacia arriba, que es donde
     esta el texto en una cabecera corta. */
  .pbo-phero--portada::before,
  .pbo-detalle__cab--foto::before{
    background:linear-gradient(
      180deg,
      rgba(8,14,26,.30) 0%,
      rgba(8,14,26,.55) 45%,
      rgba(8,14,26,.82) 100%
    );
  }

  .pbo-phero--portada .pbo-phero__texto{ padding:var(--space-sm); }
  .pbo-phero--portada .pbo-phero__entrada{ max-width:none; }
}

/* ============================================================
   53. HERO: TITULAR CENTRADO Y PALABRA ROTATIVA
   ============================================================ */
.pbo-hero__title,
.pbo-hero__title .elementor-heading-title{ text-align:center; }

/* La palabra que cambia. El ancho se anima a la vez que el texto para que
   el resto de la linea no de un salto en cada cambio. */
.pbo-rota{
  display:inline-block;
  white-space:nowrap;
  vertical-align:baseline;
  text-align:center;
}
/* Sin overflow:hidden a proposito: en un inline-block cualquier overflow
   distinto de visible mueve la linea base al borde inferior de la caja, y
   la palabra quedaba 18px descuadrada respecto a "a la vez". El recorte no
   hace falta: el texto va centrado y cambia durante el fundido. */
.pbo-rota.es-listo{
  transition:width .42s var(--ease-suave, cubic-bezier(.33,1,.68,1));
}
/* Antes de que arranque el JS ocupa lo que ocupe: nunca se ve vacia. */
.pbo-rota:not(.es-listo){ width:auto; }

.pbo-rota.es-listo{ opacity:1; transform:translateY(0); }
.pbo-rota.es-saliendo{
  opacity:0; transform:translateY(-.22em);
  transition:width .42s var(--ease-suave), opacity .22s ease, transform .22s ease;
}
.pbo-rota.es-entrando{
  animation:pbo-rota-entra .32s cubic-bezier(.34,1.4,.64,1);
}
@keyframes pbo-rota-entra{
  from{ opacity:0; transform:translateY(.26em); }
  to  { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion:reduce){
  .pbo-rota, .pbo-rota.es-listo{ transition:none; animation:none; width:auto !important; }
}

/* En movil el titular iba a 40px y la variante mas larga ("un colaborador
   a la vez") pedia 411px de los 355 disponibles: "vez" caia sola en una
   linea. A 32px entra entera cualquiera de las siete palabras. */
@media (max-width:560px){
  /* Elementor genera su propia regla de tamaño con especificidad alta
     (.elementor-55 .elementor-element-xxxx .elementor-heading-title), asi
     que aqui hace falta !important: es el unico modo de bajar el titular
     sin editar la maqueta desde el panel. */
  .pbo-hero h1,
  .pbo-hero__title .elementor-heading-title{
    font-size:clamp(26px,8.4vw,34px) !important;
    line-height:1.08;
  }
}

/* ============================================================
   54. LINEA DEL TIEMPO: EL HILO DORADO DE AVANCE
   Sobre la calle gris corre una linea dorada que crece a medida que se
   baja por cada decada. El relleno va en un ::after aparte para no tocar
   la calle base: si el JS no llegara a correr, queda la linea gris de
   siempre y no se rompe nada.
   ============================================================ */
.pbo-decada__hitos::after{
  content:"";
  position:absolute; top:0; left:50%;
  /* Un pixel mas ancha que la calle gris: a 2px el dorado se confundia
     con el gris de fondo y el recorrido no se leia. */
  width:3px;
  transform:translateX(-50%);
  height:var(--avance, 0px);
  border-radius:2px;
  /* Respaldo para Safari < 16.2: sin color-mix el degradado entero se
     descarta y la linea de avance desaparecia. */
  background:var(--sand);
  background:linear-gradient(
    180deg,
    color-mix(in srgb, var(--sand) 78%, #A9702C) 0%,
    var(--sand) 70%,
    color-mix(in srgb, var(--sand) 30%, transparent) 100%
  );
  /* La punta lleva un halo: es lo que da la sensacion de que la linea
     "corre" en vez de simplemente estirarse. */
  box-shadow:0 0 14px 2px color-mix(in srgb, var(--sand) 60%, transparent);
  pointer-events:none;
  z-index:1;
}

/* En movil la calle esta pegada al borde, no centrada. */
@media (max-width:820px){
  .pbo-decada__hitos::after{ left:9px; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  /* Sin recorrido animado: el hilo se muestra entero y quieto. */
  .pbo-decada__hitos::after{ height:100%; box-shadow:none; }
}

/* ============================================================
   55. LINEA DEL TIEMPO: ZOOM DEL ROTULO DE DECADA
   El numero grande entra acercandose a medida que se baja. El estado
   final vive en .es-visible, no en la animacion, para que si el
   observador no llegara a disparar el rotulo siga estando ahi.
   ============================================================ */
/* El estado oculto SOLO existe si el JS ha marcado la linea con
   .es-anima. Sin JS —o si algo lo impidiera— el rotulo esta visible de
   partida: una animacion de entrada nunca debe ser duena del reposo. */
.pbo-linea.es-anima .pbo-decada__cab{
  opacity:0;
  transform:scale(.74);
}
.pbo-decada__cab{
  transform-origin:center 62%;
  transition:opacity .55s var(--ease-suave), transform .75s cubic-bezier(.22,1,.36,1);
}
.pbo-linea.es-anima .pbo-decada__cab.es-visible{ opacity:1; transform:scale(1); }

/* El "los" entra un pelo despues, para que el numero mande. */
.pbo-linea.es-anima .pbo-decada__cab .pbo-decada__the{
  opacity:0; transform:translateY(8px);
}
.pbo-decada__the{
  transition:opacity .5s var(--ease-suave) .18s, transform .5s var(--ease-suave) .18s;
}
.pbo-linea.es-anima .pbo-decada__cab.es-visible .pbo-decada__the{ opacity:1; transform:none; }

/* El numero fantasma del margen acompana, mas lento y sin escala. */
.pbo-linea.es-anima .pbo-decada__fantasma{ opacity:0; }
.pbo-decada__fantasma{ transition:opacity .9s var(--ease-suave) .25s; }
.pbo-linea.es-anima .pbo-decada.es-visible .pbo-decada__fantasma{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .pbo-decada__cab,
  .pbo-decada__cab .pbo-decada__the,
  .pbo-decada__fantasma{
    opacity:1; transform:none; transition:none;
  }
  .pbo-hito.es-izquierda.es-visible .pbo-hito__anio,
  .pbo-hito.es-derecha.es-visible  .pbo-hito__anio{ animation:none; }
}

/* ============================================================
   55. ASISTENTE: MENÚ DE ENTRADA Y JUEGO
   El panel del asistente pasa a tener tres vistas: el menú, el chat de
   siempre y el quiz. El aire es de juego infantil —botones gruesos con
   relieve, que se hunden al pulsar— pero con la paleta del Patronato,
   no con colores de caramelo.
   ============================================================ */

.pbo-ia__vista{ display:none; }
.pbo-ia__vista.es-activa{ display:contents; }

/* El botón de volver solo aparece dentro del chat o del juego. */
.pbo-ia__volver{
  flex:none; width:38px; height:38px; margin-right:2px;
  display:grid; place-items:center;
  border:0; border-radius:var(--r-pill);
  background:var(--canvas); color:var(--ink);
  cursor:pointer;
}
.pbo-ia__volver:hover{ background:var(--line); }

/* Cualquier clase con display:flex o :grid le gana al [hidden] que trae
   el navegador, y los elementos que el JS oculta seguian a la vista. Se
   restablece dentro del panel, que es donde ocurre. */
.pbo-ia [hidden]{ display:none !important; }

/* --- Menú de entrada --- */
/* El panel no lleva padding propio: lo pone cada bloque, igual que el
   hilo del chat. Sin esto el contenido tocaba los bordes en móvil. */
.pbo-menu{
  display:grid; gap:var(--space-xs);
  padding:var(--space-sm) var(--space-md) var(--space-md);
  text-align:center;
}
.pbo-menu__ninos{ display:block; width:104px; margin:0 auto 2px; }
.pbo-menu__ninos svg{ width:100%; height:auto; display:block; overflow:visible; }
.pbo-menu__saludo{
  margin:0 0 6px; font-size:17px; font-weight:700; color:var(--ink);
}

/* Botón con relieve: el borde inferior hace de canto y desaparece al
   pulsarlo, que es lo que da la sensacion de tecla de juego. */
/* El del juego es un enlace, no un botón: se le quita el subrayado y se
   le fuerza la misma caja para que la fila quede pareja. */
a.pbo-menu__boton{ text-decoration:none; }
.pbo-menu__boton{
  display:flex; align-items:center; gap:14px;
  width:100%; padding:16px 18px;
  border:0; border-radius:20px;
  font:inherit; text-align:left; cursor:pointer;
  color:#fff;
  transition:transform .12s ease, box-shadow .12s ease, filter .3s ease;
}
.pbo-menu__boton.es-chat{ background:var(--accent);  box-shadow:0 5px 0 var(--accent-dark); }
.pbo-menu__boton.es-quiz{ background:var(--cta);     box-shadow:0 5px 0 var(--cta-dark); }
.pbo-menu__boton:hover{ filter:brightness(1.06); }
.pbo-menu__boton:active{ transform:translateY(4px); box-shadow:0 1px 0 currentColor; }
.pbo-menu__boton:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

.pbo-menu__icono{ font-size:26px; line-height:1; flex:none; }
.pbo-menu__txt{ display:grid; gap:1px; }
.pbo-menu__txt strong{ font-size:16.5px; font-weight:700; letter-spacing:-.01em; }
.pbo-menu__txt small{ font-size:13px; opacity:.9; }

/* --- Juego --- */
.pbo-quiz{
  display:grid; gap:var(--space-xs);
  padding:var(--space-xs) var(--space-md) var(--space-md);
}

.pbo-quiz__barra{
  height:9px; border-radius:var(--r-pill);
  background:var(--canvas); overflow:hidden;
}
.pbo-quiz__avance{
  display:block; height:100%; width:0;
  border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--accent), var(--sand));
  transition:width .45s var(--ease-suave);
}

.pbo-quiz__marcador{
  display:flex; align-items:center; gap:4px;
  margin:0; font-size:13px; font-weight:700; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.pbo-quiz__de{ opacity:.5; }
.pbo-quiz__aciertos{
  margin-left:auto; padding:3px 11px;
  border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent-dark);
}

.pbo-quiz__pregunta{
  margin:8px 0 0; font-size:17.5px; font-weight:700;
  line-height:1.3; color:var(--ink); text-wrap:balance;
}

.pbo-quiz__opciones{ display:grid; gap:10px; margin-top:16px; }
.pbo-quiz__op{
  width:100%; padding:13px 16px;
  border:2px solid var(--line); border-radius:15px;
  background:var(--surface); color:var(--ink);
  font:inherit; font-size:15px; font-weight:600; text-align:left;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .12s ease;
}
.pbo-quiz__op:hover:not(:disabled){ border-color:var(--accent); transform:translateX(3px); }
.pbo-quiz__op:disabled{ cursor:default; }
.pbo-quiz__op.es-correcta{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent-dark);
}
.pbo-quiz__op.es-fallada{
  border-color:var(--cta);
  background:color-mix(in srgb, var(--cta) 10%, transparent);
  color:var(--cta-dark);
}
.pbo-quiz__op.es-acertada{ animation:pbo-quiz-brinco .42s cubic-bezier(.34,1.5,.64,1); }
@keyframes pbo-quiz-brinco{
  0%{ transform:scale(1); } 45%{ transform:scale(1.04); } 100%{ transform:scale(1); }
}

.pbo-quiz__dato{
  margin:12px 0 0; padding:12px 14px;
  border-radius:14px; background:var(--canvas);
  font-size:14px; line-height:1.5; color:var(--ink-soft);
}
.pbo-quiz__dato strong{ color:var(--ink); }

.pbo-quiz__accion{
  width:100%; margin-top:12px; padding:14px 20px;
  border:0; border-radius:16px;
  background:var(--bar); color:#fff;
  box-shadow:0 5px 0 #060d18;
  font:inherit; font-size:15.5px; font-weight:700; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.pbo-quiz__accion:hover{ filter:brightness(1.12); }
.pbo-quiz__accion:active{ transform:translateY(4px); box-shadow:0 1px 0 #060d18; }

/* --- Pantalla de resultado --- */
.pbo-quiz__final{ text-align:center; padding:var(--space-xs) 0; }
.pbo-quiz__nota{
  margin:0; font-size:15px; font-weight:700; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.pbo-quiz__nota span{
  font-size:46px; color:var(--accent); line-height:1;
  display:block; margin-bottom:2px;
}
.pbo-quiz__final h3{ margin:8px 0 4px; font-size:21px; }
.pbo-quiz__cierre{ margin:0; font-size:14.5px; color:var(--ink-soft); }

/* Un guiño al acertar: el marcador da un saltito. */
.pbo-quiz.es-celebra .pbo-quiz__aciertos{
  animation:pbo-quiz-brinco .5s cubic-bezier(.34,1.6,.64,1);
}

@media (prefers-reduced-motion:reduce){
  .pbo-menu__boton, .pbo-quiz__op, .pbo-quiz__accion,
  .pbo-quiz__avance, .pbo-quiz__aciertos{ transition:none; animation:none; }
}

/* ============================================================
   56. JUEGO: CAPA DE COLOR
   Segunda pasada sobre el quiz con la referencia de los sitios
   infantiles: bloques de color, formas flotantes, insignias de letra y
   botones que se hunden. La paleta sigue siendo la del Patronato.
   ============================================================ */

/* Fondo con vida solo mientras se juega, no en el chat. */
.pbo-ia[data-vista-activa="quiz"] .pbo-ia__panel,
.pbo-ia[data-vista-activa="menu"] .pbo-ia__panel{
  background:
    radial-gradient(560px 260px at 15% -8%,  color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(460px 240px at 108% 8%,  color-mix(in srgb, var(--sand)   30%, transparent), transparent 70%),
    var(--surface);
}

/* Sin confeti de fondo: el panel recorta lo que se sale y los círculos
   aparecían como bandas de color cruzando las opciones. El degradado del
   panel ya da el ambiente. */
.pbo-quiz{ position:relative; }

/* --- Opciones con insignia --- */
.pbo-quiz__op{
  display:flex; align-items:center; gap:12px;
  border-width:2px; border-radius:17px;
  padding:11px 14px;
  box-shadow:0 3px 0 color-mix(in srgb, var(--line) 65%, transparent);
}
.pbo-quiz__op:active:not(:disabled){ transform:translateY(3px); box-shadow:none; }

.pbo-quiz__letra{
  flex:none; width:32px; height:32px;
  display:grid; place-items:center;
  border-radius:11px;
  background:var(--canvas); color:var(--muted);
  font-size:14px; font-weight:800; line-height:1;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.pbo-quiz__optxt{ flex:1; }

.pbo-quiz__op:hover:not(:disabled) .pbo-quiz__letra{
  background:color-mix(in srgb, var(--accent) 18%, transparent);
  color:var(--accent-dark);
}
.pbo-quiz__op.es-correcta .pbo-quiz__letra{
  background:var(--accent); color:#fff; transform:scale(1.06);
}
.pbo-quiz__op.es-fallada .pbo-quiz__letra{ background:var(--cta); color:#fff; }

/* --- Pantalla de resultado, con más celebración --- */
.pbo-quiz__final{ padding:var(--space-sm) 0 var(--space-xs); }
.pbo-quiz__nota span{
  width:118px; height:118px; margin:0 auto 10px;
  display:grid; place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--sand) 55%, transparent), transparent 62%),
    color-mix(in srgb, var(--accent) 13%, transparent);
  font-size:44px; color:var(--accent-dark);
  box-shadow:inset 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
}

/* --- Menú: los botones también se hunden y llevan sombra de color --- */
.pbo-menu__ninos{ width:112px; }
.pbo-menu__boton{ border-radius:22px; padding:17px 18px; }

@media (prefers-reduced-motion:reduce){
  .pbo-quiz__letra{ transition:none; }
}

@media (max-width:560px){
  /* A 375px, 40px de padding a cada lado dejan la pregunta sin sitio. */
  .pbo-menu,
  .pbo-quiz{ padding-inline:var(--space-sm); }
}

/* ============================================================
   57. ASISTENTE Y JUEGO: PALETA INFANTIL
   La paleta institucional del Patronato es sobria a proposito, y para un
   juego de niños se quedaba apagada. Aqui se define una paleta de juego
   —mas saturada, con cuatro colores para las respuestas— acotada al
   panel del asistente: fuera de el, el sitio no cambia.
   ============================================================ */
.pbo-ia{
  --j-verde:#33A85F;      --j-verde-osc:#227744;
  --j-rojo:#F0655F;       --j-rojo-osc:#C9453F;
  --j-amarillo:#F5B23C;   --j-amarillo-osc:#D18F1E;
  --j-azul:#4A9BE0;       --j-azul-osc:#2F76B4;
  --j-crema:#FFF8EE;
  --j-tinta:#1D2A38;
}

/* --- Panel --- */
.pbo-ia .pbo-ia__panel{
  background:var(--j-crema);
  border-radius:30px;
  box-shadow:0 26px 70px -24px rgba(20,30,45,.55);
  overflow:hidden;
}
.pbo-ia[data-vista-activa="quiz"] .pbo-ia__panel,
.pbo-ia[data-vista-activa="menu"] .pbo-ia__panel{ background:var(--j-crema); }

/* Cabecera en banda de color: es lo que mas cambia la primera impresion. */
.pbo-ia .pbo-ia__cab{
  background:linear-gradient(135deg, var(--j-verde) 0%, var(--j-verde-osc) 100%);
  border-bottom:0;
  padding:var(--space-sm) var(--space-md);
  align-items:center;
}
.pbo-ia .pbo-ia__cab h2{ color:#fff; font-size:20px; margin-top:0; }
.pbo-ia .pbo-ia__cab .pbo-kicker{ color:rgba(255,255,255,.7); }
.pbo-ia .pbo-ia__cerrar,
.pbo-ia .pbo-ia__volver{
  background:rgba(255,255,255,.18); color:#fff;
  border-radius:50%; width:36px; height:36px;
}
.pbo-ia .pbo-ia__cerrar:hover,
.pbo-ia .pbo-ia__volver:hover{ background:rgba(255,255,255,.32); }
/* La cabecera es de color: el juego rojo la tiñe para no despistar. */
.pbo-ia[data-vista-activa="quiz"] .pbo-ia__cab{
  background:linear-gradient(135deg, var(--j-azul) 0%, var(--j-azul-osc) 100%);
}

/* --- Menú --- */
.pbo-ia .pbo-menu__saludo{ font-size:19px; color:var(--j-tinta); }
.pbo-ia .pbo-menu__boton{ padding:18px 20px; border-radius:24px; }
.pbo-ia .pbo-menu__boton.es-chat{ background:var(--j-verde);   box-shadow:0 6px 0 var(--j-verde-osc); }
.pbo-ia .pbo-menu__boton.es-quiz{ background:var(--j-amarillo); box-shadow:0 6px 0 var(--j-amarillo-osc); color:var(--j-tinta); }
.pbo-ia .pbo-menu__boton:active{ transform:translateY(5px); box-shadow:0 1px 0 currentColor; }
/* El icono hereda el color del texto del botón: un solo tono, sin
   paleta propia como traían los emoji. */
.pbo-ia .pbo-menu__icono{
  display:grid; place-items:center;
  width:44px; height:44px; flex:none;
  border-radius:14px;
  background:rgba(255,255,255,.18);
  color:currentColor;
}
.pbo-ia .pbo-menu__boton.es-quiz .pbo-menu__icono{ background:rgba(29,42,56,.12); }
.pbo-ia .pbo-menu__txt strong{ font-size:17.5px; }

/* --- Juego: cada respuesta con su color --- */
.pbo-ia .pbo-quiz__barra{ height:14px; background:#EFE4D4; }
.pbo-ia .pbo-quiz__avance{
  background:linear-gradient(90deg, var(--j-amarillo), var(--j-verde));
}
.pbo-ia .pbo-quiz__aciertos{
  background:var(--j-verde); color:#fff; font-size:12.5px; padding:4px 12px;
}
.pbo-ia .pbo-quiz__pregunta{ font-size:19px; color:var(--j-tinta); }

.pbo-ia .pbo-quiz__op{
  background:#fff; border:0;
  border-radius:20px; padding:13px 15px;
  box-shadow:0 4px 0 rgba(29,42,56,.13);
  color:var(--j-tinta); font-weight:700;
}
.pbo-ia .pbo-quiz__op:hover:not(:disabled){ transform:translateY(-2px); }
.pbo-ia .pbo-quiz__op:active:not(:disabled){ transform:translateY(3px); box-shadow:none; }
.pbo-ia .pbo-quiz__letra{
  width:38px; height:38px; border-radius:13px;
  color:#fff; font-size:16px;
}
/* Cuatro colores fijos por posición, como en los juegos de preguntas:
   ayuda a distinguirlas de un vistazo sin leer. */
.pbo-ia .pbo-quiz__op:nth-child(1) .pbo-quiz__letra{ background:var(--j-azul); }
.pbo-ia .pbo-quiz__op:nth-child(2) .pbo-quiz__letra{ background:var(--j-amarillo); }
.pbo-ia .pbo-quiz__op:nth-child(3) .pbo-quiz__letra{ background:var(--j-verde); }
.pbo-ia .pbo-quiz__op:nth-child(4) .pbo-quiz__letra{ background:var(--j-rojo); }

.pbo-ia .pbo-quiz__op.es-correcta{
  background:var(--j-verde); color:#fff;
  box-shadow:0 4px 0 var(--j-verde-osc);
}
.pbo-ia .pbo-quiz__op.es-correcta .pbo-quiz__letra{ background:rgba(255,255,255,.28); }
.pbo-ia .pbo-quiz__op.es-fallada{
  background:var(--j-rojo); color:#fff;
  box-shadow:0 4px 0 var(--j-rojo-osc);
}
.pbo-ia .pbo-quiz__op.es-fallada .pbo-quiz__letra{ background:rgba(255,255,255,.28); }

.pbo-ia .pbo-quiz__dato{
  background:#fff; border-radius:18px;
  color:var(--j-tinta); font-size:14.5px;
}
.pbo-ia .pbo-quiz__accion{
  background:var(--j-verde); box-shadow:0 6px 0 var(--j-verde-osc);
  border-radius:20px; font-size:16.5px; padding:15px 20px;
}
.pbo-ia .pbo-quiz__accion:active{ transform:translateY(5px); box-shadow:0 1px 0 var(--j-verde-osc); }

/* --- Resultado --- */
.pbo-ia .pbo-quiz__nota span{
  width:132px; height:132px;
  background:radial-gradient(circle at 50% 32%, #fff 0%, var(--j-amarillo) 78%);
  color:var(--j-tinta); font-size:50px;
  box-shadow:0 8px 0 var(--j-amarillo-osc);
}
.pbo-ia .pbo-quiz__final h3{ font-size:24px; color:var(--j-tinta); }

/* --- Chat --- */
.pbo-ia .pbo-ia__hilo{ background:var(--j-crema); }
.pbo-ia .pbo-ia__msg{
  border-radius:22px; font-size:15px;
  box-shadow:0 3px 0 rgba(29,42,56,.08);
}
.pbo-ia .pbo-ia__msg.es-bot{
  background:#fff; color:var(--j-tinta);
  border-bottom-left-radius:8px;
}
.pbo-ia .pbo-ia__msg.es-yo{
  background:var(--j-azul);
  border-bottom-right-radius:8px;
  box-shadow:0 3px 0 var(--j-azul-osc);
}
.pbo-ia button.pbo-ia__sug{
  background-color:#fff; border:0; color:var(--j-tinta);
  font-weight:600; padding:9px 15px;
  box-shadow:0 3px 0 rgba(29,42,56,.12);
}
.pbo-ia button.pbo-ia__sug:hover,
.pbo-ia button.pbo-ia__sug:focus{
  background-color:var(--j-amarillo); color:var(--j-tinta); border:0;
}
.pbo-ia .pbo-ia__form{ background:var(--j-crema); border-top:2px solid #EFE4D4; }
.pbo-ia .pbo-ia__form input{
  background:#fff; border:0; border-radius:16px;
  box-shadow:0 3px 0 rgba(29,42,56,.1);
}
.pbo-ia .pbo-ia__form button[data-ia-enviar],
.pbo-ia .pbo-ia__form button[data-ia-enviar]:focus{
  background-color:var(--j-verde); border-radius:16px;
  box-shadow:0 4px 0 var(--j-verde-osc);
}
.pbo-ia .pbo-ia__form button[data-ia-enviar]:hover{ background-color:var(--j-verde-osc); }
.pbo-ia .pbo-ia__pie{ background:var(--j-crema); color:#9C8A76; }

@media (prefers-reduced-motion:reduce){
  .pbo-ia .pbo-quiz__op, .pbo-ia .pbo-menu__boton, .pbo-ia .pbo-quiz__accion{ transition:none; }
}

/* --- Los niños como público del juego --- */
/* Asoman en la esquina y levantan un cartel al responder. Van dentro del
   flujo del panel, no fijos, para que no tapen las opciones. */
.pbo-quiz{ position:relative; }
/* El pie es una fila: los niños a la izquierda, el botón ocupando el
   resto. Así están siempre presentes sin tapar ninguna opción. */
.pbo-quiz__pie{
  display:flex; align-items:flex-end; gap:12px;
  /* Hueco por encima para el cartel: sin él se montaba sobre el dato. */
  margin-top:34px;
}
.pbo-quiz__amigos{
  position:relative;
  width:78px; flex:none; pointer-events:none;
  display:flex; flex-direction:column; align-items:center;
}
.pbo-quiz__pie .pbo-quiz__accion{ flex:1; margin-top:0; }

.pbo-quiz__cartel{
  position:absolute; bottom:100%; left:50%;
  transform:translate(-50%, 10px); opacity:0;
  transition:opacity .25s ease, transform .3s cubic-bezier(.34,1.5,.64,1);
  margin-bottom:6px; padding:7px 13px;
  border-radius:13px;
  font-size:14px; font-weight:800; line-height:1;
  color:#fff; white-space:nowrap;
  box-shadow:0 4px 0 rgba(29,42,56,.22);
}
/* El palito del cartel, para que se lea como algo que sostienen. */
.pbo-quiz__cartel::after{
  content:""; position:absolute; left:50%; top:100%;
  width:4px; height:12px; margin-left:-2px;
  background:#C8A98A; border-radius:0 0 2px 2px;
}
.pbo-quiz__amigos.es-bien .pbo-quiz__cartel{ background:var(--j-verde); }
.pbo-quiz__amigos.es-mal  .pbo-quiz__cartel{ background:var(--j-rojo); }

.pbo-quiz__ninos{ display:block; width:100%; }
.pbo-quiz__ninos svg{ width:100%; height:auto; display:block; overflow:visible; }

/* El cartel solo se ve tras responder. */
.pbo-quiz__amigos.es-visible .pbo-quiz__cartel{ opacity:1; transform:translate(-50%, 0); }

/* --- Cómo se mueven --- */
/* Nada de brincar todo el rato: entran caminando una vez y a partir de
   ahí solo reaccionan a lo que pasa. Los brazos exteriores están
   aislados en el SVG (pbo-brazo--izq / --der) y giran desde el hombro,
   que es lo que hace que se lea como saludar y no como sacudirse. */
.pbo-quiz__ninos .pbo-brazo{
  transform-box:view-box;
  transition:transform .35s cubic-bezier(.34,1.5,.64,1);
}

/* Entrada: llegan caminando desde la izquierda. */
.pbo-quiz__ninos{ animation:pbo-amigos-entra .9s cubic-bezier(.33,1,.68,1) both; }
@keyframes pbo-amigos-entra{
  from{ transform:translateX(-26px); opacity:0; }
  to  { transform:translateX(0);     opacity:1; }
}

/* Acierto: levantan las manos y las agitan. */
.pbo-quiz__amigos.es-visible.es-bien .pbo-brazo--izq{ animation:pbo-saluda-izq 1.5s ease-in-out; }
.pbo-quiz__amigos.es-visible.es-bien .pbo-brazo--der{ animation:pbo-saluda-der 1.5s ease-in-out; }
@keyframes pbo-saluda-izq{
  0%{ transform:rotate(0); }
  18%{ transform:rotate(-118deg); }   /* mano arriba */
  34%{ transform:rotate(-104deg); }   /* saludo */
  50%{ transform:rotate(-124deg); }
  66%{ transform:rotate(-108deg); }
  100%{ transform:rotate(0); }
}
@keyframes pbo-saluda-der{
  0%{ transform:rotate(0); }
  18%{ transform:rotate(112deg); }
  34%{ transform:rotate(98deg); }
  50%{ transform:rotate(118deg); }
  66%{ transform:rotate(102deg); }
  100%{ transform:rotate(0); }
}

/* Fallo: un encogimiento corto, sin aspavientos. */
.pbo-quiz__amigos.es-visible.es-mal .pbo-quiz__ninos{
  animation:pbo-amigos-uy .7s ease-in-out;
}
@keyframes pbo-amigos-uy{
  0%,100%{ transform:translateY(0) rotate(0); }
  40%{ transform:translateY(3px) rotate(-2.5deg); }
  70%{ transform:translateY(1px) rotate(1.5deg); }
}

/* En pantallas estrechas se encogen para no comerse las opciones. */
@media (max-width:560px){
  .pbo-quiz__amigos{ width:62px; }
  .pbo-quiz__cartel{ font-size:12.5px; padding:6px 10px; }
}

@media (prefers-reduced-motion:reduce){
  .pbo-quiz__amigos{ transition:none; }
  .pbo-quiz__amigos .pbo-quiz__ninos{ animation:none; }
}

/* ============================================================
   58. JUEGO Y MENÚ: A TAMAÑO DE JUEGO
   El panel del chat (620px) se quedaba pequeño para el juego: la
   pregunta, las cuatro respuestas, el dato, el botón y los niños no
   caben con holgura. En estas dos vistas el panel crece y todo sube de
   tamaño; el chat se queda como estaba.
   ============================================================ */
@media (min-width:700px){
  .pbo-ia[data-vista-activa="quiz"] .pbo-ia__panel,
  .pbo-ia[data-vista-activa="menu"] .pbo-ia__panel{
    width:min(100%,760px);
    max-height:min(90vh,860px);
  }
}

/* --- Menú --- */
.pbo-ia .pbo-menu{ gap:14px; padding:var(--space-md) var(--space-md) var(--space-lg); }
/* Tres opciones ya no caben con la ilustración a 142px: el contenido
   medía 633px en 570 de hueco y la tercera quedaba cortada. Se recorta
   lo decorativo antes que lo que sirve. */
.pbo-ia .pbo-menu__ninos{ width:96px; }
.pbo-ia .pbo-menu__saludo{ font-size:21px; margin-bottom:6px; }
.pbo-ia .pbo-menu__boton{ padding:16px 22px; gap:16px; border-radius:24px; }
.pbo-ia .pbo-menu__icono{ width:54px; height:54px; border-radius:17px; }
.pbo-ia .pbo-menu__icono svg{ width:30px; height:30px; }
.pbo-ia .pbo-menu__txt strong{ font-size:20px; }
.pbo-ia .pbo-menu__txt small{ font-size:14.5px; }

/* --- Juego --- */
.pbo-ia .pbo-quiz{ gap:14px; padding:var(--space-sm) var(--space-md) var(--space-md); }
.pbo-ia .pbo-quiz__barra{ height:16px; }
.pbo-ia .pbo-quiz__marcador{ font-size:15px; }
.pbo-ia .pbo-quiz__aciertos{ font-size:14px; padding:6px 15px; }
.pbo-ia .pbo-quiz__pregunta{ font-size:23px; line-height:1.28; }

.pbo-ia .pbo-quiz__opciones{ gap:12px; margin-top:20px; }
.pbo-ia .pbo-quiz__op{
  padding:17px 18px; gap:16px;
  border-radius:22px; font-size:17px;
  box-shadow:0 5px 0 rgba(29,42,56,.13);
}
.pbo-ia .pbo-quiz__letra{ width:46px; height:46px; border-radius:15px; font-size:19px; }

/* El dato se lee como algo que dicen ellos: burbuja con rabito apuntando
   abajo a la izquierda, justo donde están los niños. */
.pbo-ia .pbo-quiz__dato{
  position:relative;
  font-size:16px; padding:15px 18px;
  border-radius:20px; border-left:0;
  margin-bottom:12px;
  box-shadow:0 4px 0 rgba(29,42,56,.10);
}
.pbo-ia .pbo-quiz__dato::after{
  content:""; position:absolute;
  left:38px; top:100%;
  width:0; height:0;
  border:11px solid transparent;
  border-top-color:#fff;
  border-bottom:0;
  filter:drop-shadow(0 3px 0 rgba(29,42,56,.10));
}
.pbo-ia .pbo-quiz__accion{ font-size:18px; padding:18px 24px; border-radius:22px; }

.pbo-ia .pbo-quiz__amigos{ width:104px; }
.pbo-ia .pbo-quiz__cartel{ font-size:16px; padding:9px 16px; border-radius:15px; }

/* --- Resultado --- */
.pbo-ia .pbo-quiz__nota span{ width:156px; height:156px; font-size:60px; }
.pbo-ia .pbo-quiz__final h3{ font-size:28px; }
.pbo-ia .pbo-quiz__cierre{ font-size:16.5px; }

/* En móvil el panel manda: se sube el tamaño, pero con más contención. */
@media (max-width:560px){
  .pbo-ia .pbo-quiz__pregunta{ font-size:19px; }
  .pbo-ia .pbo-quiz__op{ font-size:15.5px; padding:14px 15px; gap:12px; }
  .pbo-ia .pbo-quiz__letra{ width:40px; height:40px; font-size:17px; }
  .pbo-ia .pbo-quiz__amigos{ width:78px; }
  .pbo-ia .pbo-menu__ninos{ width:84px; }
  .pbo-ia .pbo-menu__saludo{ font-size:20px; }
  .pbo-ia .pbo-menu__txt strong{ font-size:17.5px; }
  .pbo-ia .pbo-quiz__nota span{ width:126px; height:126px; font-size:48px; }
}

/* El cuerpo del juego y del menú tienen que poder encogerse y hacer
   scroll dentro del panel: si no, con diez opciones largas el contenido
   desbordaba y la cabecera se cortaba por arriba. */
.pbo-ia .pbo-quiz,
.pbo-ia .pbo-menu{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
}


/* ============================================================
   59. JUEGO: LA MEDALLA QUE CRECE
   El resultado final aparecia ya escrito, y en un juego el premio esta
   justamente en verlo subir. La nota cuenta desde cero (quiz.js) y este
   aro se va llenando al mismo ritmo, como una barra de logro: el mismo
   dato dicho dos veces, en numero y en forma.
   ============================================================ */
.pbo-quiz__medalla{ position:relative; }
.pbo-quiz__num{ font:inherit; font-variant-numeric:tabular-nums; }

/* El aro vive fuera del circulo: su borde interior queda justo donde
   termina la sombra inferior de la medalla, para que no se pisen. */
.pbo-quiz__medalla::before{
  content:"";
  position:absolute; inset:-17px;
  border-radius:50%;
  /* Mismo anillo con la pista en rgba: sin color-mix el anillo de la
     puntuacion no se pintaba en Safari < 16.2. */
  background:conic-gradient(
    var(--j-verde, var(--accent)) calc(var(--pct, 0) * 1%),
    rgba(14,20,25,.11) 0);
  background:conic-gradient(
    var(--j-verde, var(--accent)) calc(var(--pct, 0) * 1%),
    color-mix(in srgb, var(--j-tinta, var(--ink)) 11%, transparent) 0);
  -webkit-mask:radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 calc(100% - 9px));
          mask:radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 calc(100% - 9px));
}

/* El aro sobresale 17px del circulo, asi que la medalla necesita mas
   aire arriba y abajo del que le daba la regla original del marcador. */
.pbo-quiz__nota .pbo-quiz__medalla{ margin-top:12px; margin-bottom:26px; }

/* La medalla entra creciendo, y da un golpe seco al llegar al total. */
.pbo-quiz__medalla{ animation:pbo-medalla-entra .45s cubic-bezier(.34,1.5,.64,1) both; }
.pbo-quiz__medalla.es-lograda{ animation:pbo-medalla-listo .5s cubic-bezier(.34,1.7,.64,1); }

@keyframes pbo-medalla-entra{
  from{ transform:scale(.55); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}
@keyframes pbo-medalla-listo{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.12); }
  100%{ transform:scale(1); }
}

@media (max-width:560px){
  .pbo-quiz__nota .pbo-quiz__medalla{ margin-top:8px; margin-bottom:21px; }
  .pbo-quiz__medalla::before{
    inset:-14px;
    -webkit-mask:radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 calc(100% - 8px));
            mask:radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 calc(100% - 8px));
  }
}

@media (prefers-reduced-motion:reduce){
  .pbo-quiz__medalla,
  .pbo-quiz__medalla.es-lograda{ animation:none; }
}

/* ============================================================
   60. JUEGO: CAJA FIJA Y RESPUESTAS MÁS CONTENIDAS
   El modal crecía y encogía con cada pregunta, porque su alto lo decidía
   el texto de las opciones. Aquí se le fija el alto en la vista de juego
   y se reparte por dentro: el cuerpo absorbe la holgura y el pie queda
   anclado abajo, asi los niños y el botón no se mueven de sitio.
   ============================================================ */
.pbo-ia[data-vista-activa="quiz"] .pbo-ia__panel{
  height:min(94vh, 760px);
}

/* Las cuatro opciones tienen que verse sin desplazar: con el pie y los
   márgenes de antes, la C y la D quedaban fuera del área visible del
   cuerpo. Se le recorta gasto a todo lo que no es la pregunta. */
.pbo-ia[data-vista-activa="quiz"] .pbo-quiz{
  gap:10px; padding-bottom:20px;
}
.pbo-ia[data-vista-activa="quiz"] .pbo-quiz__amigos{ width:60px; }
.pbo-ia[data-vista-activa="quiz"] .pbo-quiz__pie{ margin-top:10px; }
/* Columna flexible, no rejilla: en el resultado se ocultan la barra y el
   marcador, y un grid-template-rows por posiciones le daba el 1fr a una
   fila que ya no existia. Con flex la holgura va siempre al cuerpo,
   haya los hijos que haya. */
.pbo-ia[data-vista-activa="quiz"] .pbo-quiz{
  height:100%;
  display:flex; flex-direction:column;
  overflow:hidden;                          /* el scroll vive en el cuerpo */
}
.pbo-ia[data-vista-activa="quiz"] .pbo-quiz__cuerpo{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column;
}
.pbo-ia[data-vista-activa="quiz"] .pbo-quiz__pie{ flex:0 0 auto; }
.pbo-ia[data-vista-activa="quiz"] .pbo-quiz__final{ padding:0; }

/* En caja fija el resultado se recoge un poco para caber entero. */
.pbo-ia[data-vista-activa="quiz"] .pbo-quiz__nota span{ width:122px; height:122px; font-size:48px; }
.pbo-ia[data-vista-activa="quiz"] .pbo-quiz__nota .pbo-quiz__medalla{ margin-top:4px; margin-bottom:17px; }
/* En el resultado los niños ocupan menos: el pie le roba alto al cuerpo. */
.pbo-ia[data-vista-activa="quiz"] .pbo-quiz__cuerpo:has(.pbo-quiz__final) ~ .pbo-quiz__pie .pbo-quiz__amigos{ width:82px; }
/* El resultado se centra en la caja; las preguntas arrancan arriba.
   Con 'safe' el centrado se rinde y vuelve al borde superior cuando el
   contenido no cabe: centrar con margin:auto recortaba la medalla por
   arriba y el scroll no llegaba hasta ella. */
.pbo-ia[data-vista-activa="quiz"] .pbo-quiz__cuerpo:has(.pbo-quiz__final){
  justify-content:safe center;
}
.pbo-ia[data-vista-activa="quiz"] .pbo-quiz__pie{ margin-top:18px; }

/* Las respuestas ocupaban casi todo el alto util. Se recogen para dejar
   respirar a la pregunta, al dato y a los niños. */
.pbo-ia .pbo-quiz__opciones{ gap:8px; margin-top:11px; }
.pbo-ia .pbo-quiz__op{
  padding:9px 15px; gap:13px;
  border-radius:18px; font-size:16px;
  box-shadow:0 4px 0 rgba(29,42,56,.13);
}
.pbo-ia .pbo-quiz__op:active:not(:disabled){ transform:translateY(2px); box-shadow:none; }
.pbo-ia .pbo-quiz__letra{ width:34px; height:34px; border-radius:11px; font-size:15.5px; }
.pbo-ia .pbo-quiz__dato{ font-size:15px; padding:12px 15px; border-radius:17px; }

@media (max-width:560px){
  .pbo-ia[data-vista-activa="quiz"] .pbo-ia__panel{ height:min(94vh, 720px); }
  .pbo-ia[data-vista-activa="quiz"] .pbo-quiz__amigos{ width:52px; }
  .pbo-ia[data-vista-activa="quiz"] .pbo-quiz{ padding-bottom:16px; }
  .pbo-ia .pbo-quiz__opciones{ gap:8px; margin-top:13px; }
  .pbo-ia .pbo-quiz__op{ padding:9px 13px; gap:11px; font-size:15px; border-radius:16px; }
  .pbo-ia .pbo-quiz__letra{ width:31px; height:31px; border-radius:10px; font-size:14px; }
  .pbo-ia .pbo-quiz__dato{ font-size:14px; padding:11px 13px; }
}

/* ============================================================
   61. CIERRE DE LA CRONOLOGÍA Y FIRMA DEL JUEGO
   Tras el último hito de 2025 quedaba medio pliegue en blanco. Este
   bloque lo cierra invitando a jugar: es la misma historia contada de
   otra manera, y da un destino a una página que hasta ahora terminaba
   sin más.
   ============================================================ */
.pbo-reto{
  position:relative;
  padding:var(--space-section) var(--gutter);
  /* Lo que hay entre el final del hilo dorado y el borde superior de este
     bloque: el relleno inferior de la ultima decada mas su propio margen.
     Se nombra aqui para que el conector pueda remontar justo esa altura. */
  --sube:calc(var(--space-lg) + var(--space-sm));
}

/* El hilo dorado del timeline no se corta: sigue bajando por el mismo eje
   —comprobado, mismo centro X que la tarjeta— y desemboca en el juego.
   Crece al entrar en pantalla, igual que el hilo de las decadas. */
.pbo-reto::before{
  content:"";
  position:absolute; left:50%; top:calc(-1 * var(--sube));
  transform:translateX(-50%);
  width:3px; height:0; border-radius:2px;
  background:var(--sand);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--sand) 78%, #A9702C) 0%,
    var(--sand) 62%,
    color-mix(in srgb, var(--sand) 88%, #A9702C) 100%);
  box-shadow:0 0 14px 2px color-mix(in srgb, var(--sand) 55%, transparent);
  transition:height .85s cubic-bezier(.33,1,.68,1);
  pointer-events:none;
}
.pbo-reto.es-visible::before{ height:calc(var(--sube) + var(--space-section)); }

/* El remate: donde el hilo toca la tarjeta queda un nudo, que es lo que
   hace leer «esto desemboca aqui» y no «hay una raya detras». */
.pbo-reto::after{
  content:"";
  position:absolute; left:50%; top:var(--space-section);
  width:15px; height:15px; margin:-7px 0 0 -7px;
  border-radius:50%;
  background:var(--sand);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--sand) 26%, transparent);
  opacity:0; transform:scale(.2);
  transition:opacity .3s ease .6s, transform .5s cubic-bezier(.34,1.6,.64,1) .6s;
  pointer-events:none; z-index:2;
}
.pbo-reto.es-visible::after{ opacity:1; transform:scale(1); }

.pbo-reto__caja{
  position:relative; z-index:1;
  max-width:var(--container-narrow); margin:0 auto;
  display:flex; align-items:center; gap:var(--space-sm);
  padding:var(--space-sm) var(--space-md);
  border-radius:var(--r-2xl);
  color:var(--ink);
  background:#FFF8EE;
  border:1px solid color-mix(in srgb, var(--sand) 42%, transparent);
  box-shadow:0 22px 50px -34px rgba(28,20,8,.55);
  /* Entrada con rebote: llega desde abajo y se pasa un poco de largo. */
  opacity:0; transform:translateY(30px) scale(.94);
  transition:opacity .38s ease, transform .62s cubic-bezier(.34,1.56,.64,1);
}
.pbo-reto.es-visible .pbo-reto__caja{ opacity:1; transform:none; }

/* Los niños sobre un disco de arena: el mismo dorado del hilo, para que
   se lea como el final del recorrido. */
.pbo-reto__ninos{
  flex:0 0 auto; width:118px; height:118px;
  display:grid; place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #fff 0%, color-mix(in srgb, var(--sand) 34%, #fff) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sand) 45%, transparent);
}
.pbo-reto__ninos svg{ width:76px; height:auto; display:block; }

.pbo-reto__txt{ min-width:0; }
.pbo-reto__kicker{
  margin:0 0 6px; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-dark);
}
.pbo-reto__caja h2{
  margin:0 0 8px; font-size:var(--fs-h3); line-height:1.18;
  color:var(--ink); text-wrap:balance;
}
.pbo-reto__pie{
  margin:0 0 var(--space-xs); font-size:15px; line-height:1.5;
  color:var(--ink-soft);
}

/* El botón repite el relieve de los botones del juego: se hunde al pulsar. */
.pbo-reto__boton{
  display:inline-block; border:0; cursor:pointer;
  padding:14px 26px; border-radius:var(--r-pill);
  font-family:var(--fd); font-size:16px; font-weight:700;
  color:#fff; background:#255A8F;
  box-shadow:0 5px 0 #193D61;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.pbo-reto__boton:hover{ background:#2C6BA8; transform:translateY(-2px); box-shadow:0 7px 0 #193D61; }
.pbo-reto__boton:active{ transform:translateY(4px); box-shadow:0 1px 0 #193D61; }
.pbo-reto__boton:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

@media (max-width:640px){
  .pbo-reto__caja{
    flex-direction:column; text-align:center;
    padding:var(--space-sm) var(--space-xs) var(--space-md);
    border-radius:var(--r-xl);
  }
  .pbo-reto__ninos{ width:96px; height:96px; }
  .pbo-reto__ninos svg{ width:62px; }
  .pbo-reto__boton{ width:100%; }
}

/* Sin movimiento: el bloque ya esta puesto, el hilo ya esta trazado. */
@media (prefers-reduced-motion:reduce){
  .pbo-reto__boton{ transition:none; }
  .pbo-reto__caja{ opacity:1; transform:none; transition:none; }
  .pbo-reto::before{ height:calc(var(--sube) + var(--space-section)); transition:none; }
  .pbo-reto::after{ opacity:1; transform:scale(1); transition:none; }
}

/* --- Firma del juego --- */
.pbo-quiz__firma{
  flex:0 0 auto;
  margin:10px 0 0; text-align:center;
  font-size:11px; letter-spacing:.04em;
}
.pbo-quiz__firma a{
  color:var(--muted); text-decoration:none;
  border-bottom:1px solid transparent;
}
.pbo-quiz__firma a:hover,
.pbo-quiz__firma a:focus-visible{ color:var(--ink-soft); border-bottom-color:currentColor; }

/* ============================================================
   62. BANNER DEL JUEGO «CAFÉ DE LA LECHE»
   Una sola ilustracion que ya trae su propio boton dibujado, asi que
   aqui no se pinta nada encima: solo se le da el marco redondeado del
   sitio, un realce al pasar por encima y un foco visible, que sin el
   un enlace-imagen no se ve al navegar con teclado.
   ============================================================ */
.pbo-juego{ margin:0; }
.pbo-juego__enlace{
  display:block; text-decoration:none;
  border-radius:var(--r-xl);
  outline-offset:4px;
}
.pbo-juego__marco{
  display:block; overflow:hidden;
  border-radius:var(--r-xl);
  box-shadow:0 22px 50px -34px rgba(12,22,10,.55);
  transition:transform .28s var(--ease-suave), box-shadow .28s var(--ease-suave);
}
.pbo-juego__img{
  display:block; width:100%; height:auto;
  /* La ilustracion es muy apaisada (1920x846); asi no deja franjas. */
  aspect-ratio:1920 / 846; object-fit:cover;
}
.pbo-juego__enlace:hover .pbo-juego__marco{
  transform:translateY(-4px);
  box-shadow:0 30px 60px -32px rgba(12,22,10,.6);
}
.pbo-juego__enlace:focus-visible{ outline:3px solid var(--accent); }

@media (max-width:640px){
  .pbo-juego__marco{ border-radius:var(--r-lg); }
}

@media (prefers-reduced-motion:reduce){
  .pbo-juego__marco{ transition:none; }
  .pbo-juego__enlace:hover .pbo-juego__marco{ transform:none; }
}

/* ============================================================
   63. MÁRGENES: UN SOLO AIRE LATERAL EN MÓVIL Y TABLET
   En la misma pantalla convivían cinco márgenes distintos: Elementor
   mete 10px por su cuenta en cada contenedor raíz, el pie ponía 16, el
   organigrama 28 y las secciones del tema 24. El ojo lo nota aunque no
   sepa nombrarlo: nada acaba de alinearse.
   ============================================================ */
@media (max-width:1024px){
  /* SOLO los contenedores de primer nivel, que son hijos directos de
     .elementor. Al aplicarlo a `.e-con.e-parent` alcanzaba también a los
     anidados —Elementor marca los dos igual— y el aire se sumaba dos
     veces: 24 del padre más 24 del hijo, 48 en total.
     Hace falta !important: la hoja de Elementor va después de esta y su
     regla tiene la misma especificidad, así que ganaría por orden. */
  .elementor > .e-con{
    padding-left:var(--gutter) !important;
    padding-right:var(--gutter) !important;
  }
  .elementor > .e-con > .e-con-inner{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* El pie sumaba dos rellenos —16 del <footer> más 24 del interior— y
     su contenido arrancaba en 40 mientras el resto lo hacía en 24. El
     aire lo pone el interior, una sola vez. */
  .pbo-footer{ padding-left:0; padding-right:0; }
  .pbo-footer__in{ padding-left:var(--gutter); padding-right:var(--gutter); }
  .pbo-org{ padding-left:0; padding-right:0; }

  /* La tarjeta del juego cierra la cronología y vive dentro del cuerpo
     del artículo, que ya pone su aire: con el suyo encima se metía 57px
     cuando el resto de la página va a 24 y se notaba desalineada. */
  .pbo-reto{ padding-left:0; padding-right:0; }
}

/* ============================================================
   64. JUEGO: EL BOTÓN DE SIGUIENTE, MÁS CONTENIDO
   Ocupaba todo el ancho libre del pie —llevaba flex:1— con 18px de letra
   y 18 de relleno. Pesaba más que la propia pregunta. Ahora se ajusta a
   su texto y se apoya a la derecha, junto a los niños.
   ============================================================ */
.pbo-ia .pbo-quiz__accion{
  font-size:15px;
  padding:11px 24px;
  border-radius:16px;
  box-shadow:0 4px 0 var(--j-verde-osc);
}
.pbo-ia .pbo-quiz__accion:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--j-verde-osc); }

/* Que no se estire: ancho el que pida el texto, pegado a la derecha. */
.pbo-ia .pbo-quiz__pie .pbo-quiz__accion{
  flex:0 0 auto;
  width:auto;
  margin-left:auto;
}

@media (max-width:560px){
  .pbo-ia .pbo-quiz__accion{ font-size:14px; padding:10px 20px; border-radius:14px; }
}

/* ============================================================
   65. JUEGO: QUE LA PREGUNTA NUNCA SE PIERDA DE VISTA
   En un móvil de 667px de alto, con la pregunta más larga del banco, el
   contenido pedía 402px y solo había 250: la pregunta se iba por arriba
   y quedaba la lista de respuestas sin saber a qué respondían.
   Encogerlo todo no daba para 152px, así que van dos cosas: se recortan
   de verdad las opciones, y la pregunta se queda fija arriba.
   ============================================================ */
.pbo-ia[data-vista-activa="quiz"] .pbo-quiz__pregunta{
  position:sticky; top:0; z-index:3;
  /* El fondo es imprescindible: sin él las opciones se leerían por
     debajo del texto al desplazar. Es el mismo crema del panel. */
  background:#FFF8EE;
  /* El relleno sobra por arriba a propósito y se compensa con el margen
     negativo: sin ese colchón se veía asomar una franja de la opción que
     pasaba por detrás, justo sobre el texto. */
  margin:-10px 0 0; padding:10px 0 5px;
}

/* Opciones más contenidas: 49px por fila eran muchos con cuatro. */
.pbo-ia .pbo-quiz__op{ padding:7px 13px; gap:11px; font-size:15px; }
.pbo-ia .pbo-quiz__letra{ width:30px; height:30px; border-radius:10px; font-size:14px; }
.pbo-ia .pbo-quiz__opciones{ gap:7px; margin-top:9px; }
.pbo-ia .pbo-quiz__pregunta{ font-size:19px; line-height:1.25; }
.pbo-ia .pbo-quiz__dato{ font-size:14px; padding:10px 13px; }

@media (max-width:560px){
  .pbo-ia .pbo-quiz__op{ padding:7px 11px; gap:10px; font-size:14.5px; }
  .pbo-ia .pbo-quiz__opciones{ gap:6px; margin-top:8px; }
  .pbo-ia .pbo-quiz__letra{ width:28px; height:28px; font-size:13px; }
  .pbo-ia .pbo-quiz__pregunta{ font-size:17.5px; }
  .pbo-ia .pbo-quiz__dato{ font-size:13.5px; padding:9px 12px; }
}

/* ============================================================
   66. JUEGO: RESPUESTAS LARGAS QUE NO SE SALEN
   Las opciones llevaban white-space:nowrap, así que «Educación, salud y
   asistencia comunitaria» no podía partir y la caja crecía a 342px
   dentro de una celda de 286: se salía por la derecha y aparecía una
   barra de desplazamiento horizontal.
   Además hace falta min-width:0. Por omisión un hijo de flex o de grid
   vale `auto`, que le impide encogerse por debajo de su contenido: sin
   eso, aunque el texto envuelva, la caja seguiría empujando.
   ============================================================ */
.pbo-ia .pbo-quiz__op{
  white-space:normal;
  min-width:0;
  align-items:flex-start;          /* con dos líneas, la letra arriba */
}
.pbo-ia .pbo-quiz__optxt{
  white-space:normal;
  min-width:0;
  overflow-wrap:anywhere;          /* por si alguna palabra fuese larguísima */
  line-height:1.3;
}
.pbo-ia .pbo-quiz__letra{ flex:0 0 auto; }

/* El cuerpo y la lista tampoco deben dejarse empujar. */
.pbo-ia[data-vista-activa="quiz"] .pbo-quiz__cuerpo,
.pbo-ia .pbo-quiz__opciones{ min-width:0; }
.pbo-ia[data-vista-activa="quiz"] .pbo-quiz__cuerpo{ overflow-x:hidden; }

/* ============================================================
   67. JUEGO: CABECERA Y COLOR DEL BOTÓN
   ============================================================ */

/* El blanco del botón ya venía del estilo base, pero algún reinicio de
   navegador puede pintar los <button> por su cuenta —al tema padre ya le
   pasaba, con un magenta propio—, así que aquí se deja fijado. */
.pbo-ia .pbo-quiz__accion{
  color:#fff !important;
  -webkit-text-fill-color:#fff;
}

.pbo-ia .pbo-ia__cab{
  /* Menos hueco entre los botones y el título: con 24px a cada lado el
     rótulo se partía dejando «PBO?» huérfano en su propia línea. */
  gap:12px;
  padding:18px 28px;      /* los 28 laterales igualan el contenido de abajo */
  align-items:center;
}
.pbo-ia .pbo-ia__cab h2{
  text-wrap:balance;       /* reparte las dos líneas en vez de dejar una coja */
  line-height:1.2;
}
.pbo-ia .pbo-ia__cab > div{ min-width:0; }

@media (max-width:560px){
  /* 28 laterales también aquí: es donde arranca el contenido del juego,
     y con 20 los botones quedaban ocho píxeles por fuera de esa línea. */
  .pbo-ia .pbo-ia__cab{ padding:16px 28px; gap:10px; }
  .pbo-ia .pbo-ia__cerrar,
  .pbo-ia .pbo-ia__volver{ width:34px; height:34px; }
}

/* ============================================================
   68. CABECERA DEL PANEL: LOS DOS ICONOS, CENTRADOS
   El de volver arrastraba un relleno asimétrico (8px 16px): con un botón
   de 34 y un icono de 20 quedaban 16 de hueco a la izquierda y −2 a la
   derecha, o sea la flecha descentrada y asomando por el borde. El de
   cerrar sí estaba a 6 por los cuatro lados.
   Con place-items el icono se centra solo, mida lo que mida.
   ============================================================ */
.pbo-ia .pbo-ia__volver,
.pbo-ia .pbo-ia__cerrar{
  display:grid;
  place-items:center;
  padding:0;
  line-height:0;
}
.pbo-ia .pbo-ia__volver svg,
.pbo-ia .pbo-ia__cerrar svg{ display:block; }

/* El conmutador de idioma, ahora al principio del panel del menú: antes
   vivía en el pie y había que recorrerlo entero para cambiar de idioma. */
.pbo-mega__idioma{
  display:flex;                 /* si no, la pastilla se estira a todo el ancho */
  padding:0 0 var(--space-xs);
  margin-bottom:var(--space-xs);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.pbo-mega__idioma > *{ flex:0 0 auto; }

/* ============================================================
   69. VOLVER ARRIBA (SOLO MÓVIL Y TABLET)
   La portada mide 28.000px en un teléfono: treinta y cinco pantallas.
   Va centrado abajo porque la esquina derecha ya la ocupa la mascota del
   asistente, y por debajo de ella en la pila para no taparla nunca.
   ============================================================ */
.pbo-arriba{
  position:fixed;
  left:50%;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  transform:translate(-50%, 14px);
  z-index:7000;                     /* la mascota va en 8000: no la tapa */
  display:none;                     /* en escritorio no existe */
  width:46px; height:46px;
  align-items:center; justify-content:center;
  border:0; border-radius:50%;
  background:var(--accent-dark, #1C7040);
  color:#fff;
  box-shadow:0 6px 18px -6px rgba(8,20,14,.55);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.pbo-arriba.es-visible{
  opacity:1;
  transform:translate(-50%, 0);
  pointer-events:auto;
}
.pbo-arriba:active{ transform:translate(-50%, 2px); }
.pbo-arriba:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

@media (max-width:1024px){
  .pbo-arriba{ display:flex; }
}

/* Sin movimiento no hay deslizamiento: aparece y desaparece sin más. */
@media (prefers-reduced-motion:reduce){
  .pbo-arriba{ transition:none; transform:translate(-50%, 0); }
}

/* Al imprimir no pinta nada. */
@media print{ .pbo-arriba{ display:none !important; } }

/* ============================================================
   70. UNA SOLA LINEA DE CONTENIDO EN ESCRITORIO
   La linea del sitio es «borde del contenedor (1200px) + --gutter»: es
   donde empiezan las plantillas del tema (Nosotros, Programas, Blog…).
   Tres piezas se salian de ella a 1440px:
   - el logo, a 150, porque la barra blanca tenia 30px de relleno fijo;
   - el pie y el mapa, a 120, porque usaban el contenedor sin margen;
   - las secciones de Elementor, a 160-164: el kit tiene 1120px de ancho
     y cada contenedor añade 10px de relleno por su cuenta.
   Ahora todo cae en la misma vertical (154 a 1440, 117 a 1366, 73 a
   1280). Movil y tablet ya tenian su propia regla en la seccion 63.
   ============================================================ */
@media (min-width:1025px){
  .pbo-header__main{ padding-left:var(--gutter); padding-right:var(--gutter); }
  .pbo-footer__in,
  .pbo-mapa__grid{ padding-left:var(--gutter); padding-right:var(--gutter); box-sizing:border-box; }

  /* Ancho del contenido de las secciones de primer nivel de Elementor */
  .elementor > .e-con.e-con-boxed{
    --content-width:min(100%, calc(var(--container) - var(--gutter) * 2));
  }
  /* El relleno lateral por defecto de Elementor, fuera. !important porque
     su hoja se carga despues con la misma especificidad. */
  .elementor > .e-con > .e-con-inner,
  .elementor > .e-con > .e-con-inner > .pbo-lede,
  .elementor > .e-con > .e-con-inner > .pbo-lede > .e-con{
    padding-left:0 !important; padding-right:0 !important;
  }
}

/* ------------------------------------------------------------
   70b. La misma linea en movil y tablet
   - Los bloques de texto de Elementor (.pbo-lede y su contenedor
     interior) sumaban 10+10px al margen de pagina: «Quienes somos»
     arrancaba a 44px y la historia a 34 cuando todo va a 24.
   - La barra de la cabecera tenia 12-16px de relleno: el logo y
     «Dona ahora» quedaban por fuera de la linea del texto. Con el
     margen de pagina la cabecera sigue cabiendo en 320px (quedan 21px
     entre logo y menu).
   ------------------------------------------------------------ */
.elementor > .e-con > .e-con-inner > .pbo-lede,
.elementor > .e-con > .e-con-inner > .pbo-lede > .e-con{
  padding-left:0 !important; padding-right:0 !important;
}
@media (max-width:1024px){
  .pbo-header__main{ padding-left:var(--gutter); padding-right:var(--gutter); }
}

/* ------------------------------------------------------------
   70c. Ritmo vertical: el relleno de la seccion, y nada mas
   Elementor pone 10px arriba y abajo en el interior de cada contenedor
   y otros 10 en cada bloque de texto anidado; el ultimo parrafo añade
   su margen inferior. El contenido arrancaba a 82 en unas secciones y
   a 102 en otras con el mismo relleno de 72, y entre secciones el hueco
   iba de 154 a 208px. Sin esos sobrantes el contenido queda a 72px del
   borde (48 en movil) y el hueco entre secciones es siempre el mismo.
   ------------------------------------------------------------ */
.elementor > .e-con > .e-con-inner,
.elementor > .e-con > .e-con-inner > .pbo-lede,
.elementor > .e-con > .e-con-inner > .pbo-lede > .e-con{
  padding-top:0 !important; padding-bottom:0 !important;
}
.elementor > .e-con .elementor-widget-text-editor p:last-child{ margin-bottom:0; }

/* Tres sobrantes mas que rompian el ritmo de 72/48:
   - los pasos de «Nuestro modelo» traian 10px de Elementor debajo;
   - la tarjeta del juego cierra la historia con un envoltorio que tiene su
     propio relleno de seccion, y bajo la tarjeta quedaban 144px en vez de 72;
   - en movil el lienzo del mapa bajaba 16px el primer contenido. */
/* Los pasos, tambien sin el relleno lateral de Elementor (10+10px): los
   titulos quedaban 20px por dentro de la linea del resto de la seccion. */
.e-con.pbo-pasos{ padding:0 !important; }
.pbo-pasos > .e-con.pbo-paso{ padding-bottom:0 !important; padding-left:0 !important; padding-right:0 !important; }
.pbo-historia .pbo-reto{ padding-bottom:0; }
@media (max-width:900px){ .pbo-mapa__lienzo{ padding-block:0; } }

/* ------------------------------------------------------------
   70d. «Quienes somos» centrado entre las dos tarjetas
   El hero y «Nuestro modelo» son tarjetas separadas del borde por
   --gutter, pero el Modelo no tenia ese margen por arriba: la seccion de
   en medio quedaba con 34px mas de aire encima que debajo (106 contra 72
   a 1440, 122 contra 88 a 1920). Con el mismo margen alrededor de las dos
   tarjetas queda centrada. Por debajo de 901px el hero pierde su margen y
   el Modelo pasa a franja completa, asi que ahi no se aplica.
   ------------------------------------------------------------ */
@media (min-width:901px){
  .elementor > .e-con.pbo-section.pbo-modelo{ margin-top:var(--gutter); margin-bottom:var(--gutter); }
}

/* La foto de la banda es un grupo de niños en varias filas. En escritorio
   la banda es muy apaisada (2:1) y el recorte centrado cortaba las caras
   de la fila de delante: el foco va hacia abajo. En movil la banda es casi
   cuadrada, se recorta por los lados y la posicion vertical no influye. */
.pbo-band img{ object-position:50% 75%; }

/* ------------------------------------------------------------
   70e. «Donde estamos» centrado
   El SVG del mapa deja 46 unidades de aire alrededor del dibujo (sobre un
   viewBox de 1000 de ancho): el mapa empezaba 28px dentro de su columna y
   el grupo mapa + texto quedaba desplazado 14-23px segun el ancho. Se
   agranda el SVG justo lo que mide ese aire (1000/908 = 110.132%) y se
   compensa con margenes negativos (46/908 = 5.066%; abajo 45.6/908). En
   CSS los margenes verticales en % tambien se calculan sobre el ancho, asi
   que el mismo valor sirve arriba. Si se regenera el mapa con otro MARGEN
   en scripts/build-mapa-romana.py, estos porcentajes cambian.
   Ademas el parrafo ocupa toda su columna (antes 40ch): su borde derecho
   era lo que dejaba el hueco sobrante al otro lado.
   ------------------------------------------------------------ */
.pbo-rm__svg{ width:110.132%; max-width:none; margin:-5.066% 0 -5.022% -5.066%; }
@media (min-width:901px){ .pbo-mapa__panel p{ max-width:none; } }

/* ------------------------------------------------------------
   70g. La barra final del pie, en la misma linea que el resto
   Tenia el ancho del contenedor sin --gutter: el copyright arrancaba a
   120 cuando el logo y las columnas lo hacen a 154 (1440), y en tablet
   quedaba pegada al borde de la pantalla porque el pie ya no tiene
   relleno lateral (seccion 63).
   ------------------------------------------------------------ */
.pbo-footer__barra,
.pbo-footer__boletin{
  box-sizing:border-box;
  max-width:none;
  width:min(calc(100% - var(--gutter) * 2), calc(var(--panel-max,1200px) - var(--gutter) * 2));
  margin-left:auto; margin-right:auto;
}

/* ------------------------------------------------------------
   70h. Pasos de «Nuestro modelo» en dos columnas o en una
   Entre un paso y el siguiente quedaban 24px, menos que entre el titulo
   y su texto: los cuatro pasos se leian como un solo bloque.
   ------------------------------------------------------------ */
@media (max-width:1024px){
  .e-con.pbo-pasos{ row-gap:var(--space-lg); }
}

/* ============================================================
   71. UN SOLO RITMO VERTICAL EN TODO EL SITIO
   La regla, de aqui en adelante: cada bloque lleva el mismo aire
   arriba que abajo, y entre dos bloques queda siempre el mismo hueco
   (--space-section, 48px, a cada lado del limite: 96 de hueco).
   Las tarjetas —el hero, «Nuestro modelo», la portada de las paginas
   internas— lo ponen con margen, porque su fondo empieza en el borde;
   las secciones sin fondo, con relleno. Antes convivian cinco medidas:
   106 y 144 en la home, 96 y 136 en las paginas internas, y el pie
   abria con 96 y cerraba con 40.
   ============================================================ */

/* --- Tarjetas: el mismo margen antes y despues -------------- */
@media (min-width:901px){
  /* Arriba de todo, --gutter: la tarjeta repite por arriba el aire que
     ya tiene a los lados; por debajo empieza el ritmo de seccion. */
  .pbo-hero,
  .e-con.pbo-hero{ margin-block:var(--gutter) var(--space-section); }
  .elementor > .e-con.pbo-section.pbo-modelo{ margin-block:var(--space-section); }
}
.pbo-phero,
.pbo-phero--portada{ margin-block:var(--gutter) var(--space-section); }

/* --- Secciones sin fondo: relleno igual arriba y abajo ------ */
.pbo-ct{ margin-block:0; padding-block:var(--space-section); }
.pbo-archivo{ padding-block:var(--space-section); }
.pbo-section-impacto{ padding-block:var(--space-section); }

/* --- El titular de la portada, en la linea del resto -------- */
/* El texto del hero arrancaba a 74px (el margen de la tarjeta mas su
   propio relleno) mientras el contenido de debajo lo hace a 154. */
@media (min-width:1200px){
  .pbo-phero--portada .pbo-phero__texto{
    padding-inline:calc((100vw - var(--container)) / 2);
    max-width:min(100%, calc(var(--container) - var(--gutter) * 2));
    box-sizing:content-box;
  }
}

/* --- Bloques del cuerpo de texto, todos con el mismo aire ---- */
/* La rejilla de la junta directiva se separaba 64px del texto cuando
   los otros bloques del articulo —mision/vision, documentos— usan 40. */
.pbo-equipo{ margin-block:var(--space-md); }

/* ============================================================
   72. EL TITULO DE LA PAGINA Y SU TEXTO
   Entre «Nosotros» y el primer parrafo quedaban 251px, porque se
   sumaban cuatro espacios que nadie habia pensado juntos: 40 del
   titular, 96 de la rejilla con la barra lateral, 64 del cuerpo del
   articulo y 51 mas porque el texto se centraba contra el retrato, que
   es mas alto. Ahora es una sola medida, 64px, y el texto, la foto y la
   caja «En esta pagina» arrancan a la misma altura.
   ============================================================ */
.pbo-detalle__cab{ margin-bottom:0; }
.pbo-conlateral{ margin-top:var(--space-section); }
.pbo-conlateral__main > .pbo-detalle__cuerpo:first-child{ margin-top:0; }
/* El retrato, pegado al texto que acompaña: con 64px de calle parecian
   dos bloques sin relacion. Solo con las dos columnas una al lado de la
   otra: apilados en movil, la separacion sigue siendo la de siempre.
   La foto va centrada contra su texto —sin recortar— asi que sobresale
   por arriba y por abajo: es la proporcion original de la imagen. */
.pbo-apertura{ align-items:center; }
@media (min-width:821px){
  .pbo-apertura{ gap:var(--space-xs); }
}

/* ============================================================
   74. LAS FOTOS DE LA CRONOLOGIA, ENTERAS
   Iban en una ventana fija de 190px con recorte forzado: los recortes de
   prensa perdian el titular, las fotos apaisadas se quedaban en una
   franja y en varias se cortaban las cabezas. Ahora cada foto se ve
   completa; el alto lo pone su proporcion y solo las muy verticales
   topan con el limite, donde encajan sin recortarse.
   ============================================================ */
.pbo-hito__media{ background:var(--surface); }
.pbo-hito__media img{
  height:auto;
  max-height:760px;
  object-fit:contain;
  object-position:center;
  /* Sin zoom. Con la foto entera y el contenedor recortando, cualquier
     escala mayor que 1 volvia a comerse los bordes: era el propio efecto
     de entrada, y el del raton, lo que dejaba las fotos cortadas (P6).
     No hace falta nada en su lugar: la tarjeta entera ya entra con su
     fundido y su desplazamiento. */
  transform:none;
  transition:none;
}
.pbo-hito.es-visible .pbo-hito__media img,
.pbo-hito__caja:hover .pbo-hito__media img{ transform:none; }

/* ==========================================================================
   Buscador del blog (P48)
   Filtra las entradas por tema sin sacar al visitante del listado.
   ========================================================================== */
.pbo-buscador{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin:0 0 clamp(28px, 4vw, 44px);
}
.pbo-buscador__campo{
  position:relative; display:flex; align-items:center;
  flex:1 1 320px; min-width:0;
}
.pbo-buscador__lupa{
  position:absolute; left:18px; width:20px; height:20px;
  color:var(--muted); pointer-events:none;
}
.pbo-buscador__campo input[type="search"]{
  width:100%; padding:16px 18px 16px 50px;
  font:inherit; font-size:1.05rem; color:inherit;
  background:var(--surface-alt);
  border:1px solid var(--line); border-radius:var(--r-pill);
  transition:border-color .35s var(--ease-suave), box-shadow .35s var(--ease-suave);
  -webkit-appearance:none; appearance:none;
}
.pbo-buscador__campo input[type="search"]::placeholder{ color:var(--muted); }
.pbo-buscador__campo input[type="search"]:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.pbo-buscador__enviar{
  padding:16px 30px; font:inherit; font-weight:600; cursor:pointer;
  color:#fff; background:var(--accent);
  border:1px solid transparent; border-radius:var(--r-pill);
  transition:filter .35s var(--ease-suave);
}
.pbo-buscador__enviar:hover{ filter:brightness(1.08); }
.pbo-buscador__enviar:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.pbo-buscador__limpiar{
  font-size:.95rem; text-decoration:underline; text-underline-offset:3px;
  color:var(--muted);
}
@media (max-width:560px){
  .pbo-buscador__enviar{ flex:1 1 100%; }
}


/* ==========================================================================
   Ritmo vertical de los bloques de contenido (P2)
   Cada bloque editorial deja exactamente la misma separacion arriba que
   abajo, y la misma que sus vecinos. Va al final para ganar a las reglas
   sueltas que cada bloque traia de antes.
   ========================================================================== */
.pbo-galeria,
.pbo-equipo,
.pbo-cita,
.pbo-datos,
.pbo-docs{
  margin-block:var(--space-bloque);
}
/* Primer y ultimo bloque: el hueco lo pone ya el relleno de la seccion,
   asi que duplicarlo dejaba el doble de aire arriba y abajo del texto. */
.pbo-detalle__cuerpo > :first-child,
.pbo-archivo > :first-child{ margin-top:0; }
.pbo-detalle__cuerpo > :last-child,
.pbo-archivo > :last-child{ margin-bottom:0; }

/* Nota sobre .pbo-lede: su `margin-top:var(--space-xl)` parece romper el
   ritmo, pero no llega a aplicarse nunca. Solo existe en la portada y
   alli todos son primeros hijos, asi que la regla
   `.e-con-inner > .pbo-lede:first-child{ margin-top:0 }` lo anula: el
   hueco lo pone el relleno de la seccion, igual arriba que abajo. Se
   deja como esta a proposito; tocarlo abriria un hueco que hoy no hay. */

/* Tarjeta sin fotografia: el logotipo ocupa el lugar de la imagen, sobre
   el papel del sistema, para que el listado no alterne huecos y fotos. */
.pbo-item__media--solo-marca{
  display:grid; place-items:center;
  aspect-ratio:4/3; background:var(--surface-alt);
  border-radius:var(--r-md);
}
.pbo-item__media--solo-marca .pbo-item__marca{ position:static; }
.pbo-item__media--solo-marca .pbo-item__logo{
  max-width:58%; max-height:54%; width:auto; height:auto; object-fit:contain;
}

/* ==========================================================================
   Bloques anchos dentro del índice lateral: a la línea del texto
   La regla de la sección 21 ya lo hacía, pero '.pbo-detalle__cuerpo >
   .pbo-mvv' aparece MÁS ABAJO en la hoja y, con la misma especificidad,
   ganaba la última: el bloque de misión y valores seguía saliéndose 40px.
   Aquí se resuelve por especificidad (tres clases), no por orden, para
   que reordenar la hoja no lo vuelva a romper.
   ========================================================================== */
.pbo-conlateral .pbo-detalle__cuerpo > .pbo-mvv,
.pbo-conlateral .pbo-detalle__cuerpo > .pbo-datos,
.pbo-conlateral .pbo-detalle__cuerpo > .pbo-cita{
  margin-inline:0;
}

/* ==========================================================================
   P58b — área pulsable en pantallas táctiles
   Los enlaces del pie medían 16-19px de alto: por debajo incluso del
   mínimo de 24px de la WCAG 2.2, y difíciles de acertar con el dedo.
   En vez de separarlos más —lo que alargaría el pie casi 300px en un
   móvil— se mete el hueco que ya había DENTRO del enlace: el área
   pulsable crece y la densidad visual se queda igual.
   Solo en punteros gruesos: con ratón no cambia nada.
   ========================================================================== */
@media (pointer:coarse){
  .pbo-footer__list .sub-menu{ gap:0; }
  .pbo-footer__list .sub-menu a{
    display:block;
    padding-block:6px;          /* 20px de texto + 12 = 32px pulsables */
  }
  .pbo-footer__list > li > a{
    margin-bottom:4px;
    padding-block:5px;          /* 16px de texto + 10 = 26px pulsables */
  }
  /* Los dos botones de acción, a la medida cómoda del pulgar */
  .pbo-give,
  .pbo-vol{ min-height:44px; display:inline-flex; align-items:center; }

  /* Teléfono, correo y el crédito: se marcan con el dedo igual que el
     resto. El hueco sale de la propia lista, no de más separación. */
  .pbo-footer__contacto{ gap:0; }
  .pbo-footer__contacto a{ display:inline-block; padding-block:5px; }
  .pbo-footer__credito a{ display:inline-block; padding-block:5px; }
}

/* ============================================================
   72. «NUESTRO MODELO»: CUATRO AREAS, NO CUATRO PASOS (2026-09-25)
   Cualquiera puede entrar en cualquiera, asi que no llevan numero.
   Cada filete lleva encima un icono de lo que trata su area (brote,
   libro, matraz, maletin) dentro de un circulo blanco que corta la raya.

   Ritmo, medido en la pagina:
   - 48px de la entradilla al borde del icono: el mismo aire que la
     seccion deja arriba y abajo (antes 84px: 64 de margen + 20 de
     separacion de Elementor);
   - 20px del icono al titular del area;
   - 12px del titular a su texto (antes 30, mas que el propio titular).
   ============================================================ */
.pbo-modelo .pbo-lede{ margin-bottom:50px; }            /* +20 de Elementor = 70 hasta el filete */
.pbo-modelo .pbo-pasos > .e-con.pbo-paso{
  padding-top:42px;                                    /* 22 de medio icono + 20 */
  row-gap:12px; --row-gap:12px; gap:12px;
}
.pbo-modelo .pbo-paso h3{ margin:0; line-height:1.25; }
.pbo-modelo .pbo-paso::before,
.pbo-modelo .pbo-paso::after{
  content:""; position:absolute; top:-23px; left:0;
  width:44px; height:44px; border-radius:var(--r-pill);
}
.pbo-modelo .pbo-paso::before{
  background:var(--surface);
  border:1.5px solid var(--line);
  box-shadow:0 0 0 6px var(--surface);                 /* corta el filete a los lados */
  box-sizing:border-box;
}
.pbo-modelo .pbo-paso::after{
  background:var(--accent);
  -webkit-mask:var(--pbo-icono) center / 22px 22px no-repeat;
          mask:var(--pbo-icono) center / 22px 22px no-repeat;
}
.pbo-modelo .pbo-paso:nth-child(1){ --pbo-icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-9 M12 12c0-4.4 3-7 7.5-7 0 4.4-3 7-7.5 7z M12 14.5c0-3.6-2.6-6-6.5-6 0 3.6 2.6 6 6.5 6z'/%3E%3C/svg%3E"); }  /* brote: crecer desde el principio */
.pbo-modelo .pbo-paso:nth-child(2){ --pbo-icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 5.5C5 4.3 8.2 4.4 12 6.6c3.8-2.2 7-2.3 9.5-1.1v13c-2.5-1.2-5.7-1.1-9.5 1.1-3.8-2.2-7-2.3-9.5-1.1z M12 6.6v13'/%3E%3C/svg%3E"); }  /* libro abierto: la escuela */
.pbo-modelo .pbo-paso:nth-child(3){ --pbo-icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6 M10 3v6.2L5.2 17.6A2.3 2.3 0 0 0 7.2 21h9.6a2.3 2.3 0 0 0 2-3.4L14 9.2V3 M7.4 15h9.2'/%3E%3C/svg%3E"); }  /* matraz: ciencia y experimentacion */
.pbo-modelo .pbo-paso:nth-child(4){ --pbo-icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5h18V19a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19z M8.5 8.5V6.3A1.8 1.8 0 0 1 10.3 4.5h3.4a1.8 1.8 0 0 1 1.8 1.8v2.2 M3 13.5h18 M12 12.5v2'/%3E%3C/svg%3E"); }  /* maletin: el mundo laboral */

@media (max-width:1024px){
  /* En dos columnas o en una, el icono necesita su hueco sobre cada fila */
  .pbo-modelo .e-con.pbo-pasos{ row-gap:calc(var(--space-md) + 22px); }
}

/* ============================================================
   73. TITULAR Y ENTRADILLA, SIN HUECO DOBLE (2026-09-25)
   Entre el h2 y su texto se sumaban el hueco de Elementor (20px) y un
   margin-top de 16px: 36px, casi el alto del titular, y el texto se leia
   suelto. Queda solo el hueco del contenedor, 20px: el mismo que hay
   entre el antetitulo y el titular.
   ============================================================ */
.pbo-lede .elementor-widget-heading + .elementor-widget-text-editor,
.pbo-lede--top .elementor-widget-heading + .elementor-widget-text-editor{ margin-top:0; }

/* ============================================================
   74b. APERTURA COMO CABECERA (Nosotros / About us) (2026-09-25)
   Titular y entradilla en una columna, pegados; el retrato a la
   derecha, centrado en vertical contra los dos. Ver page.php.
   ============================================================ */
.pbo-detalle__cab--apertura{ margin-bottom:0; }
.pbo-apertura--cab{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-lg);
  align-items:center;
  margin-bottom:0;
}
.pbo-apertura--cab h1{ margin-top:12px; }
.pbo-apertura--cab .pbo-entradilla{ margin-top:var(--space-sm); }
@media (max-width:820px){
  .pbo-apertura--cab{ grid-template-columns:1fr; gap:var(--space-md); }
}
/* El retrato se ajusta a la altura del bloque de texto: arriba a ras del
   antetitulo y el pie a ras del final de la entradilla. Mas alto que el
   texto, este quedaba centrado con aire vacio arriba y abajo. */
@media (min-width:821px){
  .pbo-apertura--cab{ align-items:stretch; }
  .pbo-apertura--cab .pbo-apertura__texto{ align-self:center; }
  .pbo-apertura--cab .pbo-retrato{ display:flex; flex-direction:column; min-height:0; }
  .pbo-apertura--cab .pbo-retrato__img{
    flex:1 1 0; height:0; min-height:260px;
    object-fit:cover; object-position:50% 30%;
  }
}

/* ============================================================
   75. LA CAJA LATERAL, FIJA EN SU SITIO (2026-09-25)
   «En esta pagina» (y la lista de programas en las fichas) seguia al
   lector al bajar (sticky). A peticion del cliente se queda quieta
   arriba, junto al comienzo del texto.
   ============================================================ */
.pbo-lateral{ position:static; }

/* ============================================================
   76. JUNTA DIRECTIVA CON VISOR (2026-09-25)
   Cada foto del consejo abre el visor de las galerias, con nombre y
   cargo al pie, y se pasa de un miembro al siguiente sin cerrar.
   ============================================================ */
.pbo-miembro__abrir{
  display:block; width:100%; padding:0; border:0; background:none;
  border-radius:var(--r-md); overflow:hidden; cursor:zoom-in;
}
.pbo-miembro__abrir:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.pbo-miembro:hover .pbo-miembro__foto{ transform:scale(1.045); }


/* ==========================================================================
   Ritmo vertical de las fichas de programa (2026-09-26)
   Medido en las 14 fichas a 1440px, los huecos no seguian ninguna regla:
     - cabecera -> texto: 48px, menos que entre dos bloques del texto (64);
     - galeria -> filete -> «Este programa existe...»: 96 + 1 + 104px;
     - ese bloque -> pie: 96 de relleno + 48 = 144px.
   Ahora todo cuelga de --space-bloque (64) y el cierre de pagina usa
   el mismo 48 + 48 = 96 que separa las secciones del resto de la web.
   ========================================================================== */
.single-pbo_programa .pbo-conlateral{ margin-top:var(--space-bloque); }
.single-pbo_programa .pbo-conlateral .pbo-detalle__cta{
  margin-top:var(--space-bloque);
  padding-block:var(--space-bloque) var(--space-section);
}
/* El titular del cierre traia 8px de margen propio que se sumaban al
   relleno: el filete quedaba mas cerca de la galeria que del texto. */
.single-pbo_programa .pbo-detalle__cta h2{ margin-top:0; }
/* El retrato dentro del texto (Adopte Una Cuna) quedaba a 14px del
   parrafo de arriba y a 24 del de abajo: '.pbo-retrato{margin:0}'
   anulaba el ritmo del cuerpo. Mismo aire que antes de un apartado. */
.single-pbo_programa .pbo-detalle__cuerpo > .pbo-retrato{ margin-block:var(--space-md); }
/* Apilado (hasta 1024px) el indice de programas baja detras del
   cierre, y entre los dos quedaban 112px: el hueco de la rejilla mas
   los 72px que la seccion 50 deja al final de cada <main> para el
   lanzador del chat. Aqui ese <main> no es el final de la pagina —el
   indice va debajo—, asi que sobra: manda el hueco de la rejilla. */
@media (max-width:1024px){
  .single-pbo_programa .pbo-conlateral .pbo-detalle__cta{ padding-bottom:0; }
  .single-pbo_programa .pbo-conlateral__main{ padding-bottom:0; }
  .single-pbo_programa .pbo-conlateral{ row-gap:var(--space-bloque); }
}
/* La seccion 27 quita a la caja del indice el borde y el relleno lateral
   por debajo de 900px, pensando en una lista plana; pero el fondo blanco
   y las esquinas se quedan, asi que el rotulo «Programas» tocaba el
   borde de la caja mientras los enlaces si llevaban sangria. */
@media (max-width:900px){
  .single-pbo_programa .pbo-lateral__caja{
    border:1px solid var(--line);
    padding:var(--space-md) var(--space-sm);
  }
}

/* ==========================================================================
   Cabecera de las fichas de programa (2026-09-26)
   Dentro de la tarjeta, los huecos no agrupaban nada: 45px del rotulo al
   logo, 64 del logo al titulo —el logo parecia otro bloque—, 24 al
   subtitulo, 64 a los botones, y 96 de relleno arriba y abajo frente a
   64 a los lados. Sin logo, el rotulo quedaba a 13px del titular.
   Ahora rotulo, logo, titulo y subtitulo van juntos y solo los botones
   se separan; la tarjeta lleva el mismo relleno por los cuatro lados.
   ========================================================================== */
.single-pbo_programa .pbo-phero{ padding:var(--space-lg); }
.single-pbo_programa .pbo-phero__texto > *{ margin-block:0; }
.single-pbo_programa .pbo-phero__texto > .pbo-phero__logo{ margin-top:var(--space-sm); }
.single-pbo_programa .pbo-phero__texto > h1{ margin-top:var(--space-xs); }
.single-pbo_programa .pbo-phero__texto > .pbo-phero__logo + h1{ margin-top:var(--space-sm); }
.single-pbo_programa .pbo-phero__texto > .pbo-phero__entrada{ margin-top:var(--space-xs); }
.single-pbo_programa .pbo-phero__texto > .pbo-phero__meta{ margin-top:var(--space-md); }
@media (max-width:900px){
  .single-pbo_programa .pbo-phero{ padding:var(--space-md); }
}

/* ==========================================================================
   Panel de datos dentro del indice lateral (Becas, 2026-09-26)
   '.pbo-conlateral .pbo-datos{padding-inline:0}' se escribio para quitar
   la sangria EXTERIOR del panel, pero el panel es una tarjeta con fondo y
   borde: sin relleno lateral, el «+250» tocaba el borde izquierdo y la
   cifra de la derecha el derecho. Se le devuelve el relleno de tarjeta.
   Y '.pbo-detalle__cuerpo ul' (dos selectores) le ganaba a la lista de
   cifras y le metia 1,15em de sangria de viñeta que no tiene.
   ========================================================================== */
.pbo-conlateral .pbo-datos{ padding-inline:var(--space-md); }
.pbo-datos .pbo-datos__resto{ padding-left:0; }
@media (max-width:820px){
  .pbo-conlateral .pbo-datos{ padding-inline:var(--space-sm); }
}
/* El anillo (62px) iba centrado en una caja de 88px —el ancho que
   alinea etiquetas cuando hay varias cifras en columna—: su borde quedaba
   13px por dentro de la linea del texto y la etiqueta a ~50px del anillo.
   Hoy el unico panel con anillo (Becas) tiene una sola cifra de apoyo,
   asi que la caja se ajusta al anillo y la etiqueta queda a 24px. */
.pbo-datos .pbo-anillo{ width:62px; }

/* ==========================================================================
   Pagina de Programas: ritmo vertical (2026-09-26)
   Medido a 1440px: cabecera -> filete 40, filete -> Hogar del Niño 96,
   Hogar del Niño -> filtros 96, filtros -> rejilla 40. Los dos huecos de
   96 separaban mas que ninguna otra cosa de la pagina. Ahora el filete
   queda centrado (40 y 40), la tarjeta destacada se separa del listado
   con el ritmo de bloque (64) y los filtros van pegados a lo que filtran.
   ========================================================================== */
/* La cabecera de archivo es la misma en Programas, Eventos y Blog, y en
   las tres dejaba 96px bajo el filete frente a 40 por encima: el filete
   queda centrado en todas (2026-09-26). */
.pbo-archivo__cab{ margin-bottom:var(--space-md); }
.post-type-archive-pbo_programa .pbo-destacado{ margin-bottom:var(--space-bloque); }
.post-type-archive-pbo_programa .pbo-filtros{ margin-bottom:var(--space-sm); }
/* El logo se estiraba al ancho maximo (250px) por ser hijo de una columna
   flex, y al ir contenido y centrado quedaba ~60px por dentro del texto. */
.pbo-destacado__logo{ align-self:flex-start; }

/* ==========================================================================
   Tarjeta de programa sin fotografia (2026-09-26)
   Antes: sin foto, la pastilla del logo quedaba sola arriba; sin logo,
   ademas, el nombre salia dos veces y la tarjeta era un hueco blanco con
   los titulos desalineados respecto a sus vecinas. Ahora la marca ocupa
   el sitio de la foto, con la misma altura que foto + pastilla del logo
   en el resto (208 + 104 - 30), sobre el papel del sistema, como las
   entradas del blog sin foto (.pbo-item__media--solo-marca).
   ========================================================================== */
.pbo-prog__portada{
  display:grid; place-items:center;
  height:calc(208px + 104px - 30px);
  background:var(--surface-alt);
}
/* El logo va en su pastilla blanca, como en las tarjetas con foto */
.pbo-prog__portada .pbo-prog__logo{
  max-width:62%; max-height:64px;
  box-sizing:content-box;
  padding:var(--space-sm) var(--space-md);
  background:var(--surface); border-radius:var(--r-md);
}
/* Sin logo: monograma con las iniciales dentro de un circulo */
.pbo-prog__monograma{
  display:grid; place-items:center;
  width:120px; height:120px; border-radius:50%;
  background:var(--surface);
  font-family:var(--fd); font-size:44px; font-weight:300;
  letter-spacing:-.02em; line-height:1;
  color:var(--accent);
  transition:transform .7s var(--ease-suave);
}
.pbo-prog__enlace--sin-foto:hover .pbo-prog__monograma{ transform:scale(1.04); }

/* ==========================================================================
   Cabecera de archivo: columnas alineadas (2026-09-26)
   El texto de la derecha iba alineado por abajo y su primera linea caia a
   cualquier altura (43px bajo la del titular en Eventos, 17 en
   Programas); el recuento acababa 10px por debajo del titular, y bajo el
   titular se sumaban su margen (16) y el relleno (40) hasta el filete.
   Ahora el texto arranca a la altura de la primera linea del titular y el
   filete queda a 40px de lo que acabe mas abajo. El rotulo va en linea,
   asi que ocupa la linea entera del cuerpo (--fs-body x 1.75), no sus
   11px; los 5px finales son optica: la mayuscula de 54px arranca mas
   abajo dentro de su linea que el texto de 15px.
   ========================================================================== */
.pbo-archivo__cab{ align-items:start; }
.pbo-archivo__cab h1{ margin-top:var(--space-xs); margin-bottom:0; }
.pbo-archivo__intro{ padding:calc(var(--fs-body) * 1.75 + var(--space-xs) + 5px) 0 0; }
.pbo-archivo__intro p{ margin:0; }
@media (max-width:820px){
  .pbo-archivo__intro{ padding-top:0; }
}

/* Blog: el buscador va con los resultados que filtra, como los filtros de
   Programas (24px), no a medio camino entre el filete y la rejilla (44). */
.pbo-buscador{ margin-bottom:var(--space-sm); }
/* En movil el boton «Buscar» bajaba a otra linea a todo el ancho: con
   'flex:1 1 320px' el campo pedia mas sitio del que hay en 390px. El
   campo se estira desde 0 y el boton ocupa lo justo; «Limpiar», cuando
   aparece, baja a su propia linea para no estrechar el campo. */
@media (max-width:600px){
  .pbo-buscador__campo{ flex:1 1 0; }
  .pbo-buscador__enviar{ flex:none; padding-inline:20px; }
  .pbo-buscador__limpiar{ flex-basis:100%; }
  .pbo-buscador__campo input[type="search"]{ padding-left:44px; text-overflow:ellipsis; }
  .pbo-buscador__lupa{ left:15px; }
}
/* El campo medía 54px y el boton 60 (su interlineado es el del cuerpo):
   el campo se estira a la altura de la fila y los dos quedan iguales. */
.pbo-buscador{ align-items:stretch; }
.pbo-buscador__campo input[type="search"]{ height:100%; }
.pbo-buscador__limpiar{ align-self:center; }
/* Blog: su cabecera es solo rotulo + titular de una linea, sin texto a
   la derecha, y los 40px a cada lado del filete la dejaban suelta. Aqui
   todo va a 24: titular -> filete -> buscador -> rejilla. */
body.blog .pbo-archivo__cab,
body.search .pbo-archivo__cab{ padding-bottom:var(--space-sm); margin-bottom:var(--space-sm); }

/* ==========================================================================
   Cabecera con foto en escritorio: eventos, blog e historias (2026-09-26)
   El velo solo oscurecia de arriba abajo, y el logo, el titular y la fecha
   —abajo a la izquierda— caian sobre las caras de la foto y se leian mal.
   Se añade un velo lateral bajo el texto que se desvanece hacia el centro:
   el texto se lee sin depender de la foto y la derecha queda limpia. En
   movil manda el velo propio de la seccion 50, pensado para cabecera corta.
   ========================================================================== */
@media (min-width:821px){
  .pbo-detalle__cab.pbo-detalle__cab--foto::before{
    background:
      linear-gradient(90deg, rgba(8,14,26,.62) 0%, rgba(8,14,26,.28) 42%, rgba(8,14,26,0) 68%),
      linear-gradient(180deg, rgba(8,14,26,.10) 0%, rgba(8,14,26,.58) 100%);
  }
}

/* ==========================================================================
   Cabecera con foto en movil: foto arriba, texto debajo (2026-09-26)
   Eventos, entradas del blog e historias (misma plantilla
   detalle-cabecera.php).
   En la cabecera corta de movil, logo + titular + fechas ocupaban casi toda
   la altura y caian siempre sobre las caras, fuera cual fuera la foto. Por
   debajo de 821px la cabecera pasa a ser una tarjeta como la de las fichas
   de programa (.pbo-phero): la foto limpia arriba, en 16:10, y el texto
   debajo sobre el papel, sin velo.
   ========================================================================== */
@media (max-width:820px){
  .pbo-detalle__cab.pbo-detalle__cab--foto{
    display:block; min-height:0; overflow:visible; isolation:auto;
    margin:var(--gutter) var(--gutter) 0;
    padding:var(--space-md);
    background:var(--surface); border-radius:var(--r-xl);
  }
  .pbo-detalle__cab.pbo-detalle__cab--foto::before{ display:none; }
  .pbo-detalle__cab.pbo-detalle__cab--foto .pbo-detalle__foto{
    position:static; display:block;
    width:100%; height:auto; aspect-ratio:16/10;
    /* 18%: en las fotos verticales (retratos de las historias) el 32% de
       escritorio dejaba las caras fuera; en las horizontales apenas
       cambia, porque 16:10 recorta muy poco de un 3:2. */
    object-fit:cover; object-position:center 18%;
    border-radius:var(--r-lg);
  }
  .pbo-detalle__cab.pbo-detalle__cab--foto .pbo-detalle__cab-in{
    padding:var(--space-md) 0 0; max-width:none;
  }
  .pbo-detalle__cab.pbo-detalle__cab--foto .pbo-detalle__logo{
    background:none; padding:0; border-radius:0; max-height:64px;
  }
  .pbo-detalle__cab.pbo-detalle__cab--foto h1{ color:var(--ink); }
  .pbo-detalle__cab.pbo-detalle__cab--foto .pbo-kicker{ color:var(--muted); }
  .pbo-detalle__cab.pbo-detalle__cab--foto .pbo-detalle__meta{ color:var(--ink-soft); }
}
/* Portada vertical servida entera (ver detalle-cabecera.php): en la
   cabecera ancha de escritorio solo se ve una franja, asi que se sube hacia
   donde suelen estar las caras. En movil ya manda el 18% de arriba. */
.pbo-detalle__foto--vertical{ object-position:center 22%; }

/* Pie: seis columnas desde que existe «Sitios del Patronato» (2026-09-26).
   Con la rejilla de 5 la sexta caia sola a una segunda fila en escritorio.
   Por debajo de 1200px ya iba en filas completas de 3 y de 2. */
@media (min-width:1201px){
  .pbo-footer__list{ grid-template-columns:repeat(6,minmax(0,1fr)); column-gap:16px; }
  /* La columna del logo cede sitio: con 6 columnas de enlaces a 120px la
     mitad de los enlaces partia en dos lineas. */
  .pbo-footer__in{ grid-template-columns:minmax(230px,.62fr) 3fr; column-gap:var(--space-md); }
}