/* Estilos comunes a todas las páginas de EiAmazonia */
:root{
  --verde:#50653E;
  --fondo-suave:#F7F5F1;
  --gris-caja:var(--fondo-suave);
  --radio:16px;
  --radio-peq:10px;
  --naranja:#F5A33A;
  --rojo:#C41919;
  --gris-boton:#54595F;
  --texto:#222;
  --ancho:1200px;
  --sans:"Open Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --roboto:"Roboto","Open Sans",system-ui,Arial,sans-serif;
  --mont:"Montserrat","Open Sans",system-ui,Arial,sans-serif;
  --alto-cabecera:98px;
  --verde-negro:#111111;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--alto-cabecera)}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.45;color:var(--texto);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
img.sin-foto{visibility:hidden}
h1,h2,h3{margin:0;font-weight:600;line-height:1.2}
p{margin:0 0 .75em}
a{color:inherit}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px}
.caja{max-width:var(--ancho);margin:0 auto}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:16px;top:16px;z-index:1000;background:#fff;color:#000;padding:8px 14px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---------- Animaciones de entrada ---------- */
.js [data-anima]{opacity:0}
.js [data-anima].visto{animation-duration:1.25s;animation-fill-mode:both;animation-timing-function:ease}
.visto[data-anima="fadeIn"]{animation-name:fadeIn}
.visto[data-anima="fadeInUp"]{animation-name:fadeInUp}
.visto[data-anima="fadeInLeft"]{animation-name:fadeInLeft}
.visto[data-anima="fadeInRight"]{animation-name:fadeInRight}
.visto[data-anima="slideInDown"]{animation-name:slideInDown}
.visto[data-anima="slideInLeft"]{animation-name:slideInLeft}
.visto[data-anima="jello"]{animation-name:jello;animation-duration:1s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,60px,0)}to{opacity:1;transform:none}}
@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-60px,0,0)}to{opacity:1;transform:none}}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(60px,0,0)}to{opacity:1;transform:none}}
@keyframes slideInDown{from{opacity:1;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}
@keyframes slideInLeft{from{opacity:1;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}
@keyframes jello{0%,11.1%,to{opacity:1;transform:none}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{transform:skewX(.390625deg) skewY(.390625deg)}88.8%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}
@media (prefers-reduced-motion:reduce){.js [data-anima]{opacity:1!important;animation:none!important}}

/* ---------- Cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:100;background:var(--verde-negro);box-shadow:0 3px 12px rgba(0,0,0,.22)}
.cabecera .caja{display:flex;align-items:center;height:var(--alto-cabecera);padding:0 20px;gap:24px;max-width:1400px}
.logo{display:block;min-width:130px;min-height:45px;flex-shrink:0}
.logo img{height:76px;width:auto}
@media (max-width:767px){:root{--alto-cabecera:80px}.logo img{height:58px}}
@media (max-width:480px){.cabecera .caja{gap:10px;padding:0 12px}.logo img{height:48px}.logo{min-width:0}.idiomas{margin-left:4px!important}.abrir-menu{padding:8px}}
@media (max-width:350px){.logo img{height:42px}.idiomas>button{gap:4px}}
.idiomas{position:relative;align-self:center;margin-left:40px}
.idiomas>button{display:flex;align-items:center;gap:7px;background:none;border:0;padding:6px 4px;cursor:pointer;color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.5px}
.idiomas>button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px}
.bandera{width:21px;height:14px;display:block;border-radius:1px;flex-shrink:0}
.idiomas ul{list-style:none;margin:0;padding:6px 0;position:absolute;top:100%;left:0;min-width:100%;background:var(--verde-negro);border:1px solid #2c3627;display:none;z-index:5}
.idiomas.abierto ul,.idiomas:hover ul,.idiomas:focus-within ul{display:block}
.idiomas li a{display:flex;align-items:center;gap:7px;padding:7px 10px 7px 4px;color:#fff;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.5px;white-space:nowrap;transition:color .2s}
.idiomas li a:hover,.idiomas li a:focus-visible{color:var(--naranja)}
.navegacion{margin-left:auto;display:flex;align-items:center}
.menu{display:flex;list-style:none;margin:0;padding:0}
.menu>li{position:relative}
.menu a{display:flex;align-items:center;gap:6px;padding:0 15px;white-space:nowrap;line-height:var(--alto-cabecera);color:#fff;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;transition:color .2s}
.menu a:hover,.menu a[aria-current]{color:var(--naranja)}
.menu svg{width:10px;height:10px}
.submenu{list-style:none;margin:0;padding:10px 0;position:absolute;top:100%;left:0;min-width:220px;background:var(--verde-negro);border-top:3px solid var(--naranja);display:none}
.menu>li:hover .submenu,.menu>li:focus-within .submenu{display:block}
.submenu a{line-height:1.4;padding:10px 20px;font-size:13px}
.abrir-menu{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.abrir-menu span{display:block;width:26px;height:2px;background:#fff;margin:6px 0}
@media (max-width:1499px){
  .menu a{padding:0 10px;font-size:13px;letter-spacing:.3px}
  .idiomas{margin-left:24px}
}
@media (max-width:1219px){
  .idiomas{margin-left:16px}
  .abrir-menu{display:block}
  .navegacion{display:none;position:absolute;left:0;right:0;top:100%;background:var(--verde-negro);padding:10px 24px 24px;max-height:calc(100vh - var(--alto-cabecera));overflow:auto}
  .navegacion.abierta{display:block}
  .menu{flex-direction:column}
  .menu a{line-height:1.4;padding:14px 0;border-bottom:1px solid #2c3627;font-size:15px}
  .submenu{position:static;display:block;border:0;padding:0 0 0 18px}
  .menu svg{display:none}
}

/* ---------- Títulos sobre fotos: sombra suave ---------- */
.titulo-foto{position:relative;isolation:isolate;width:fit-content;max-width:100%;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 18px rgba(0,0,0,.55)}
.titulo-foto::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:calc(100% + 160px);height:calc(100% + 130px);transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(0,0,0,.5) 0%,rgba(0,0,0,.28) 50%,rgba(0,0,0,0) 100%);pointer-events:none}
.portada .titulo-foto,.expo .titulo-foto{margin-left:auto;margin-right:auto}

/* ---------- Pie ---------- */
.pie{background:var(--verde-negro);color:#fff;padding:45px 20px 0}
.pie .columnas{display:grid;grid-template-columns:23% 18% 1fr;gap:26px;padding-bottom:40px}
.pie .logo-blanco{width:280px;min-height:90px;margin-bottom:22px}
.pie .col1 p{font-size:13px;line-height:1.7}
.pie h2{font-size:13px;font-weight:600;text-transform:uppercase;margin:34px 0 14px}
.pie ul{list-style:none;margin:0;padding:0}
.pie .politicas a{display:flex;align-items:center;gap:6px;color:#929292;font-size:13px;text-decoration:none;line-height:1.5}
.pie .politicas a:hover{color:#fff}
.pie .politicas svg{width:11px;height:11px;fill:#929292}
.redes{display:flex;gap:6px;margin-left:4px}
.redes a{display:flex;align-items:center;justify-content:center;width:26px;height:26px;color:#929292;transition:color .2s}
.redes a:hover{color:#fff}
.redes svg{width:13px;height:13px;fill:currentColor}
.pie .col3 h2{font-size:20px;text-transform:none;margin:34px 0 18px}
.pie .col3 p{font-family:Arial,Helvetica,sans-serif;font-size:12.5px;line-height:1.75;margin:0}
.pie .col3 .centro{text-align:center;margin-top:24px}
.boton-colabora{display:inline-block;padding:8px 24px;border-radius:50px;background:#D6173A;color:#fff;text-decoration:none;font-size:15px;text-transform:uppercase;transition:background .2s}
.boton-colabora:hover{background:#b0122f}
.pie-final{background:var(--verde-negro);padding:0 20px}
.pie-final .caja{background:var(--verde-negro);text-align:center;font-size:13px;line-height:1.5;color:#ddd;padding:18px 20px;border-top:1px solid rgba(255,255,255,.12)}
@media (max-width:959px){.pie .columnas{grid-template-columns:1fr 1fr}.pie .col3{grid-column:1/-1}}
@media (max-width:600px){.pie .columnas{grid-template-columns:1fr}}

/* ---------- Volver arriba ---------- */
.arriba{position:fixed;right:20px;bottom:20px;z-index:90;width:40px;height:40px;border:0;border-radius:2px;background:rgba(0,0,0,.4);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.arriba.visible{opacity:1;visibility:visible}
.arriba:hover{background:rgba(0,0,0,.7)}
.arriba svg{width:14px;height:14px;fill:#fff}

/* ---------- Botón rojo ---------- */
.boton-rojo{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 24px;border:2px solid #fff;border-radius:50px;background:var(--rojo);color:#fff;text-decoration:none;font-family:var(--mont);font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;box-shadow:0 4px 12px rgba(0,0,0,.22);transition:background .25s,transform .25s}
.boton-rojo:hover{background:#53704E;border-color:transparent}

/* ---------- Alineación óptica del logo con el menú ----------
   Las letras del logo están en la parte baja de la imagen (las plumas ocupan la de arriba).
   Subimos un poco el logo y bajamos el menú y el selector de idioma para que queden a la altura de las letras. */
.logo img{transform:translateY(-7px)}
.idiomas,.abrir-menu{transform:translateY(8px)}
@media (min-width:1220px){
  .navegacion{transform:translateY(10px)}
  .submenu{top:calc(100% - 10px)}
}
@media (max-width:767px){
  .logo img{transform:translateY(-5px)}
  .idiomas,.abrir-menu{transform:translateY(6px)}
}
@media (max-width:480px){
  .logo img{transform:translateY(-4px)}
  .idiomas,.abrir-menu{transform:translateY(5px)}
}

/* ---------- Submenú: separación entre opciones (en cualquier ancho) ---------- */
@media (min-width:1220px){
  .menu .submenu{padding:6px 0}
  .menu .submenu a{line-height:1.3;padding:11px 20px;font-size:13px;letter-spacing:.4px}
  .menu .submenu li+li a{border-top:1px solid rgba(255,255,255,.1)}
}

/* ---------- Franja de logos de financiadores (común) ---------- */
.financiadores{background:var(--verde-negro);border-top:1px solid rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.85);padding:28px 20px}
.financiadores ul{list-style:none;margin:0 auto;padding:0;max-width:1240px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-evenly;gap:26px 30px}
.financiadores li{display:flex;align-items:center;justify-content:center}
.financiadores img{display:block;max-width:100%;height:auto}
@media (max-width:767px){
  /* en móvil, mismos tamaños relativos pero más pequeños, dos por fila */
  .financiadores ul{zoom:.72;gap:32px 36px}
  .financiadores li{flex:0 0 42%}
}

/* ---------- Línea blanca de separación sobre el pie (en todas las páginas) ---------- */
.pie{border-top:1px solid rgba(255,255,255,.85)}
/* si la página termina con la franja de logos, esa franja ya pone la línea */
main:has(> .financiadores:last-child) ~ .pie{border-top:0}

/* ---------- Flecha "bajar" en los banners ---------- */
.bajar{position:absolute;left:50%;bottom:max(56px, calc(20px + 2.6vw));z-index:3;width:46px;height:46px;margin-left:-23px;border:2px solid rgba(255,255,255,.85);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.25);box-shadow:0 2px 10px rgba(0,0,0,.35);animation:bajar-rebote 2.2s ease-in-out infinite;transition:background .2s,border-color .2s}
.bajar svg{width:24px;height:24px;margin-top:3px}
.bajar:hover,.bajar:focus-visible{background:var(--verde);border-color:#fff}
@keyframes bajar-rebote{0%,20%,55%,100%{transform:translateY(0)}35%{transform:translateY(8px)}45%{transform:translateY(3px)}}
@media (max-width:767px){.bajar{bottom:48px;width:40px;height:40px;margin-left:-20px}.bajar svg{width:20px;height:20px}}
@media (prefers-reduced-motion:reduce){.bajar{animation:none}}

/* ---------- Banners a pantalla completa: siempre enteros (con la cenefa) ---------- */
.portada,main > .banner:first-child{min-height:calc(100vh - var(--alto-cabecera))!important;min-height:max(420px, calc(100svh - var(--alto-cabecera)))!important}
/* la foto se ancla por abajo para que la cenefa indígena se vea siempre */
.portada,main > .banner:first-child{background-position:center bottom!important}

/* ---------- Cenefa indígena al pie de los banners cuya foto no la trae ---------- */
.con-cenefa::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;height:clamp(26px,2.2vw,44px);background:url("../wp-content/uploads/2026/09/cenefa-banner.png") repeat-x left bottom/auto 100%;pointer-events:none}


/* ---------- Bloques separados y esquinas redondeadas (17/09) ----------
   Un solo tono de fondo suave (--fondo-suave) para cajas y franjas claras,
   franjas claras convertidas en cajas con separación, y esquinas redondeadas
   (--radio / --radio-peq) en cajas, tarjetas, fotos de contenido, carruseles,
   vídeos y formularios. No se redondean banners, franjas de foto a sangre,
   cabecera, pie, financiadores, fotos circulares, logos ni la cenefa.
   Las reglas llevan "main" delante para ganar a los <style> de cada página. */

/* Franjas claras (o de color) que pasan a ser cajas separadas */
main > .trayectoria,                /* inicio: "Una trayectoria construida desde 2017" */
main > .cifras:has(.numeros),       /* informe 2025: cifras clave */
main > .bloque.crema,               /* informe 2025: secciones crema */
main > .fotos.lento,                /* escuelas españa: carrusel sobre franja amarilla */
main > .mapa-tierras{               /* escuelas amazonia: mapa sobre franja verde oscura */
  width:min(var(--ancho), calc(100% - 40px));
  margin-left:auto;margin-right:auto;
  border-radius:var(--radio);
}
@media (max-width:480px){
  main > .trayectoria,main > .cifras:has(.numeros),main > .bloque.crema,
  main > .fotos.lento,main > .mapa-tierras{width:calc(100% - 32px)}
}

/* Inicio */
main .presentacion > .caja,
main .bloques > .bloque{border-radius:var(--radio)}
main > .trayectoria{background:var(--fondo-suave);margin-top:40px;margin-bottom:0}
main > .trayectoria + .comunidades{padding-top:40px}
@media (max-width:767px){main > .trayectoria{margin-top:32px;padding:44px 18px 30px}main > .trayectoria + .comunidades{padding-top:32px}}
main .comunidad{border-radius:var(--radio)}
main .galeria .carrusel{border-radius:var(--radio)}
main .carrusel .retratos4 img{border-radius:var(--radio-peq)}

/* Quiénes somos */
main .intro .foto{border-radius:var(--radio)}
main .tarjetas .tarjeta{background:var(--fondo-suave);border-radius:var(--radio)}

/* Red de escuelas: portadas de los informes */
main .informes .informe img{border-radius:var(--radio-peq)}

/* Escuelas España y Escuelas Amazonia */
main > .fotos.lento{margin-top:35px;margin-bottom:35px}
main > .mapa-tierras{margin-top:30px}
main .video{border-radius:var(--radio);overflow:hidden}

/* Colabora y participa: "Otras formas de participar" como una sola caja */
main .otras .columna{background:var(--fondo-suave)}
main .otras .izquierda{border-radius:var(--radio) 0 0 var(--radio)}
main .otras .derecha{border-radius:0 var(--radio) var(--radio) 0}
main .otras .acordeon{border-radius:var(--radio-peq);overflow:hidden;background:#fff}
@media (max-width:767px){
  main .otras .izquierda{border-radius:var(--radio) var(--radio) 0 0}
  main .otras .derecha{border-radius:0 0 var(--radio) var(--radio)}
}

/* Contacto, colaboraciones, vincular centro y voluntariado: tarjeta del correo */
main .tarjeta-correo,
main .bloque-correo .tarjeta-correo{border-radius:var(--radio)}

/* Blog y prensa: tarjetas */
main .entradas .entrada{border-radius:var(--radio)}
main .noticias .noticia a{background:var(--fondo-suave);border-radius:var(--radio)}

/* Artículos del blog */
main .articulo-foto img,
main .articulo-cuerpo img{border-radius:var(--radio)}
main .relacionados .foto-relacionado{border-radius:var(--radio-peq)}

/* Informe 2025 */
main > .cifras:has(.numeros){background:var(--fondo-suave);border-bottom:0;margin-top:32px}
main > .bloque.crema{background:var(--fondo-suave)}
main > .bloque.crema:has(+ .financiadores){margin-bottom:40px}
main .bloque:not(.crema) .profesor{background:var(--fondo-suave)}
main .bloque .tarjeta,
main .indice,
main .modulos li,
main .indicadores li,
main .conclusiones li,
main .creditos{border-radius:var(--radio)}
main ul.galeria img,
main .foto-ancha img,
main .foto-media img,
main .foto-vertical img,
main .videos img{border-radius:var(--radio-peq)}
main .tabla-caja{border-radius:var(--radio-peq)}

/* Formularios */
main .formulario input[type="text"],main .formulario input[type="email"],
main .formulario input[type="tel"],main .formulario input[type="url"],
main .formulario select,main .formulario textarea{border-radius:8px}
main .formulario .bloque-destacado,
main .formulario .aviso-bloqueo,
main .formulario .estado-formulario,
main .formulario-exito{border-radius:var(--radio-peq)}


/* ---------- Carril común y ritmo vertical (17/09) ----------
   --carril: ancho y bordes comunes de todas las cajas con fondo y filas de fotos
   --respiro: separación entre secciones / cajas / filas de fotos
   --respiro-titulo: separación entre un título de sección y su contenido */
:root{
  --margen-lateral:20px;
  --carril:min(var(--ancho), 100% - 2*var(--margen-lateral));
  --respiro:clamp(40px, 5vw, 72px);
  --respiro-titulo:clamp(24px, 2vw, 28px);
}
@media (max-width:480px){:root{--margen-lateral:16px}}

/* Cajas de la sección anterior, al carril (siempre con "main >": el 100 % del carril es el ancho de la página,
   así que solo vale para hijos directos de <main> o de contenedores a todo lo ancho) */
main > .trayectoria,main > .cifras:has(.numeros),main > .bloque.crema,
main > .fotos.lento,main > .mapa-tierras{width:var(--carril)}

/* ===== Inicio ===== */
main > .presentacion:has(> .caja){padding:var(--respiro) 0 0}
main > .presentacion > .caja{width:var(--carril);max-width:none}
main:has(> .portada) .conexion{padding-top:var(--respiro)}
main:has(> .portada) .mapa{padding-top:var(--respiro-titulo)}
main > .bloques{padding:var(--respiro) 0 0;margin-bottom:var(--respiro)}
main > .bloques > .bloque{width:var(--carril);max-width:none;margin:0 auto}
main > .bloques > .bloque + .bloque{margin-top:var(--respiro)}
main > .trayectoria{margin-top:var(--respiro)}
main > .trayectoria + .comunidades,
main > .comunidades{width:var(--carril);max-width:none;padding:var(--respiro) 0;gap:24px}
main:has(> .portada) .galeria{padding:var(--respiro) 0 0}
main:has(> .portada) .galeria .carrusel{width:var(--carril);max-width:none}
main:has(> .portada) .cita{width:var(--carril);max-width:none;padding:var(--respiro-titulo) 0 var(--respiro)}

/* ===== Carruseles de fotos redondas (quiénes somos, red, escuelas amazonia) =====
   La pista mide el carril + el hueco de cada foto, así el borde de la primera
   y la última foto cae justo en el carril. */
main > .fotos:has(> .pista-fotos):not(.lento){--hueco-fotos:10px;margin:var(--respiro) 0;padding:0}
main > .fotos:not(.lento) > .pista-fotos{width:calc(var(--carril) + 2*var(--hueco-fotos));margin:0 auto}
main > .fotos:not(.lento) .pista-fotos li{padding:0 var(--hueco-fotos)}
main > .fotos:not(.lento) .pista-fotos img{max-width:100%}
main > .fotos:not(.lento) .pista-fotos .prev{left:calc(var(--hueco-fotos) + 8px)}
main > .fotos:not(.lento) .pista-fotos .next{right:calc(var(--hueco-fotos) + 8px)}
@media (max-width:767px){main > .fotos:has(> .pista-fotos):not(.lento){--hueco-fotos:6px}}

/* ===== Quiénes somos ===== */
main > .intro{max-width:none;width:var(--carril);padding:var(--respiro) 0 0;box-sizing:border-box}
main > .intro .centro{padding-top:var(--respiro-titulo);padding-bottom:0}
main > .lineas:has(> .tarjetas) > h2{margin:var(--respiro) 20px var(--respiro-titulo)}
main > .lineas > .tarjetas{max-width:none;width:var(--carril);padding:0;box-sizing:border-box;row-gap:24px}
main .titulo-seccion{margin:var(--respiro) 20px var(--respiro-titulo)}

/* ===== Red de escuelas ===== */
main > .texto.presentacion{padding-top:var(--respiro)}
main > .informes{padding-top:var(--respiro-titulo)}
@media (max-width:1024px){main > .texto.presentacion > div:first-child{padding-right:0}}

/* ===== Escuelas España ===== */
main > .presentacion .fila > .texto{padding-top:var(--respiro)}
@media (max-width:767px){
  main > .presentacion .fila > .mapa{padding-top:var(--respiro)}
  main > .presentacion .fila > .texto{padding-top:var(--respiro-titulo)}
}
main > .itinerario > h2{padding-top:var(--respiro);margin-bottom:var(--respiro-titulo)}
main > .medios{width:var(--carril);max-width:none;margin:var(--respiro) auto;padding:0}
main > .medios > .col:first-child{padding-left:0}
main > .medios > .col:last-child{padding-right:0}
main > .medios .informe img{margin-left:0;padding-left:0;padding-right:121px}
main > .medios .video.primero{margin-right:0}
main > .medios .video.segundo{margin-right:0}
/* el cartel (312x469) tiene márgenes transparentes (36 px a la izq., 77 arriba, 78 abajo):
   se compensan para que el borde visible del cartel caiga en el carril */
main > .medios .cartel img{--k:1.08;width:calc(312px*var(--k));max-width:none;height:auto;object-fit:fill;pointer-events:none;margin:calc(-77px*var(--k)) 0 calc(-78px*var(--k)) calc(-36px*var(--k))}
main > .fotos.lento{margin-top:var(--respiro);margin-bottom:var(--respiro)}
@media (max-width:1024px){
  main > .medios .informe img{padding-right:0;max-width:340px}
  main > .medios .cartel img{--k:.95}
}
@media (max-width:767px){
  main > .medios,main > .medios.segundo{margin:var(--respiro) auto;padding:0}
  main > .medios > .col{padding-left:0;padding-right:0}
  main > .medios .informe img{margin:0 auto}
  main > .medios .cartel{overflow-x:clip}
  main > .medios .cartel img{--k:1.09;margin:calc(-77px*var(--k)) 0 calc(-78px*var(--k)) calc(50% - 150px*var(--k))}
  main > .medios.segundo .derecha{padding-left:0}
}

/* ===== Escuelas Amazonia ===== */
main > .jurua .texto{padding-top:var(--respiro)}
@media (max-width:767px){
  main > .jurua .mapa-acre{margin-top:var(--respiro)}
  main > .jurua .texto{padding-top:0}
}
main > .mapa-tierras{margin-top:var(--respiro)}
main > .proyectos.seccion-caja{max-width:none;width:var(--carril);padding:0;box-sizing:border-box}
main > .proyectos > h2{margin:var(--respiro) 0 var(--respiro-titulo)}
main > .proyectos .fila > div:first-child{padding-left:0}
main > .proyectos .fila > div:last-child{padding-right:0}
main > .proyectos .informe img{object-position:left center}
@media (max-width:1024px){main > .proyectos .fila > div + div{margin-right:0}}
@media (max-width:767px){
  main > .proyectos .fila > div{padding-left:0;padding-right:0}
  main > .proyectos .fila > div + div{margin-left:0}
  main > .proyectos .informe img{object-position:center}
}

/* ===== Colabora y participa ===== */
main > .contenedor{width:var(--carril);max-width:none}
main > .aportacion{padding-top:var(--respiro)}
main > .conecta{padding-top:var(--respiro)}
@media (min-width:768px){main > .otras{grid-template-columns:40% 60%}}
main > .otras{padding:var(--respiro-titulo) 0 0;margin-top:calc(var(--respiro) - var(--respiro-titulo));margin-bottom:var(--respiro)}

/* ===== Contacto ===== */
main > .escribenos{padding-top:var(--respiro)}
main > .bloque-correo{margin-top:var(--respiro-titulo);padding-bottom:var(--respiro)}

/* ===== Blog ===== */
main > .blog{max-width:none;width:var(--carril);padding:var(--respiro) 0}
main > .blog > h2,main > .blog > .presentacion{max-width:880px;margin-left:auto;margin-right:auto}
main > .blog > .separador{width:min(185px, 21vw)}
main > .blog > .presentacion{margin-bottom:var(--respiro-titulo)}

/* ===== Prensa ===== */
main > .prensa{max-width:none;width:var(--carril);padding:var(--respiro) 0}
main > .prensa .contacto-prensa{margin-top:var(--respiro)}

/* ===== Páginas con formulario ===== */
main > .solicitud{max-width:none;width:var(--carril);padding:var(--respiro) 0;box-sizing:border-box}

/* ===== Artículos: el bloque "También podría gustarte" va en la misma columna que el artículo ===== */
main > .relacionados{max-width:1000px;margin:var(--respiro) auto 0;padding:0 20px var(--respiro)}
main > .relacionados h2{margin-bottom:var(--respiro-titulo)}
main > .relacionados li{padding:0}
main > .relacionados ul{column-gap:24px}

/* ===== Informe 2025 ===== */
main > .cifras:has(.numeros){margin-top:var(--respiro)}
main > .bloque:has(> .indice){padding:var(--respiro) 0}
main > .bloque > .indice{max-width:none;width:var(--carril)}
main > .bloque.crema:has(+ .financiadores){margin-bottom:var(--respiro)}
main .conclusiones li{margin-bottom:24px}

/* ---------- Newsletter en el pie (17/09) ---------- */
.pie .pie-news{margin-top:18px;padding:14px 16px;border:1px solid rgba(255,255,255,.18);border-radius:var(--radio-peq,10px)}
.pie .pie-news p{margin:0 0 8px}
.pie .pie-news .pie-news-tit{font-weight:700;font-size:15px;color:#fff}
.boton-news{display:inline-block;padding:7px 20px;border-radius:50px;background:var(--naranja);color:#1e2a1e;text-decoration:none;font-size:14px;font-weight:700;transition:background .2s}
.boton-news:hover{background:#ffbf5a}

/* ---------- Pie nivelado con recuadros (17/09) ---------- */
.pie .columnas{align-items:stretch}
.pie .col2 h2:first-child,.pie .col3 h2:first-child{margin-top:0}
.pie .col2{padding-top:14px}
.pie .col3{border:1px solid rgba(255,255,255,.55);border-radius:var(--radio-peq,10px);padding:22px 26px 24px}
.pie .col3 p+p{margin-top:8px}
.pie .pie-news{border-color:rgba(255,255,255,.55)}
.pie-final .caja{border-top-color:rgba(255,255,255,.45)}
@media (max-width:600px){.pie .col3{padding:18px}}
.pie .col1{display:flex;flex-direction:column}
.pie .col1 .pie-news{margin-top:auto}
@media (max-width:959px){.pie .col1 .pie-news{margin-top:18px}}

/* ---------- Pie sin recuadros, botones a la misma altura (17/09) ---------- */
.pie .col3{border:0;border-radius:0;padding:0;display:flex;flex-direction:column}
.pie .col3 h2:first-child{margin-top:0}
.pie .col3 .centro{margin-top:auto;padding-top:20px}
.pie .pie-news{border:0;padding:0;margin-top:auto}
.pie .pie-news .boton-news{margin-top:6px}
.pie .col1 .pie-news{padding-top:18px}
@media (max-width:959px){.pie .col3 .centro{margin-top:24px}}
@media (min-width:960px){.pie .col2,.pie .col3{padding-top:130px}}

/* ---------- Botones unificados (17/09) ---------- */
/* Todos los botones de acción comparten forma, letra, tamaño y efectos.
   Solo cambia el color según su función:
   - ROJO (apoyar, donar, colaborar, participar, enviar formularios): boton-rojo, boton-colabora (pie),
     boton-plan (planes mensuales), boton-vinculacion (Colabora), boton-enviar y boton-correo (formularios),
     boton-banner (Voluntariado), boton-verde (Inscribe tu centro).
   - VERDE (ir a otra página, ver, leer, descargar): boton-red (Conoce la red), boton-negro (Escuelas Amazonia/españolas),
     boton-contacto (Quiénes somos), "Leer el informe en la web" (red-escuelas) y "Descargar la memoria" (PDF).
   - NARANJA con texto oscuro (newsletter): boton-news (pie) y boton-suscribir (página Newsletter).
   - CONTORNO BLANCO (secundario sobre foto oscura): boton-borde (Conocer la exposición). */
:root{
  --btn-rojo:var(--rojo);--btn-rojo-hover:#A01414;
  --btn-verde:var(--verde);--btn-verde-hover:#3C4C2E;
  --btn-naranja:var(--naranja);--btn-naranja-hover:#E08E22;--btn-naranja-texto:#1e2a1e;
}
:root:root:root :is(a,button):is(.boton-rojo,.boton-colabora,.boton-plan,.boton-vinculacion,.boton-enviar,.boton-correo,.boton-banner,.boton-verde,.boton-red,.boton-negro,.boton-contacto,.boton-news,.boton-borde){
  --btn-fondo:var(--btn-rojo);--btn-fondo-hover:var(--btn-rojo-hover);--btn-texto:#fff;--btn-borde:transparent;--btn-borde-hover:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-sizing:border-box;width:auto;max-width:100%;min-height:48px;height:auto;margin-top:0;
  padding:14px 28px;border:2px solid var(--btn-borde);border-radius:50px;
  background:var(--btn-fondo);color:var(--btn-texto);box-shadow:0 3px 10px rgba(0,0,0,.16);
  font-family:var(--mont);font-size:13px;font-weight:700;line-height:1.25;letter-spacing:1.2px;text-transform:uppercase;
  text-align:center;text-decoration:none;white-space:normal;cursor:pointer;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease
}
:root:root:root :is(a,button):is(.boton-rojo,.boton-colabora,.boton-plan,.boton-vinculacion,.boton-enviar,.boton-correo,.boton-banner,.boton-verde,.boton-red,.boton-negro,.boton-contacto,.boton-news,.boton-borde):is(:hover,:focus-visible,:active){
  background:var(--btn-fondo-hover);border-color:var(--btn-borde-hover);color:var(--btn-texto);box-shadow:0 4px 12px rgba(0,0,0,.22)
}
:root a.boton-verde:is(:hover,:focus-visible){animation:none}
:root:root:root :is(a,button):is(.boton-rojo,.boton-colabora,.boton-plan,.boton-vinculacion,.boton-enviar,.boton-correo,.boton-banner,.boton-verde,.boton-red,.boton-negro,.boton-contacto,.boton-news,.boton-borde):focus-visible{
  outline:3px solid #111;outline-offset:2px;box-shadow:0 0 0 2px #fff
}
/* Iconos y flechas dentro de los botones */
:root :is(.boton-red,.boton-negro,.boton-borde,.boton-vinculacion) svg{width:10px;height:10px;margin:0;flex:none;fill:currentColor}
:root .boton-vinculacion span{font:inherit;letter-spacing:inherit;line-height:inherit;transform:none}
:root .boton-vinculacion .flecha{letter-spacing:0}
:root a.boton-plan{min-width:170px}
/* Verde: navegación, ver, leer, descargar */
:root :is(a,button):is(.boton-red,.boton-negro,.boton-contacto),
:root .ver-web a.boton-rojo,
:root a.boton-rojo[download]{--btn-fondo:var(--btn-verde);--btn-fondo-hover:var(--btn-verde-hover)}
/* Naranja: newsletter */
:root :is(a,button):is(.boton-news,.boton-suscribir){--btn-fondo:var(--btn-naranja);--btn-fondo-hover:var(--btn-naranja-hover);--btn-texto:var(--btn-naranja-texto)}
/* Contorno blanco sobre foto */
:root a.boton-borde{--btn-fondo:transparent;--btn-fondo-hover:rgba(255,255,255,.16);--btn-borde:#fff;--btn-borde-hover:#fff;box-shadow:none}
/* Formularios: el botón de envío, deshabilitado mientras se envía */
:root .formulario button[type="submit"]:disabled{opacity:.6;cursor:wait}
/* Filtros de prensa: se quedan como "chips", con la misma letra que los botones */
:root .filtros button{font-family:var(--mont);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;line-height:1.2;padding:9px 18px}
:root .filtros button:focus-visible{outline:3px solid #111;outline-offset:2px}
@media (max-width:480px){
  :root:root:root :is(a,button):is(.boton-rojo,.boton-colabora,.boton-plan,.boton-vinculacion,.boton-enviar,.boton-correo,.boton-banner,.boton-verde,.boton-red,.boton-negro,.boton-contacto,.boton-news,.boton-borde){font-size:12px;letter-spacing:1px;padding:13px 22px;min-height:46px}
}

/* ---------- Pie: menos espacio arriba (17/09) ---------- */
.pie{padding-top:20px}

/* Planes mensuales y botones de Colabora: verdes y rojos al pasar el ratón (como la web antigua, 17/09) */
:root :is(a,button):is(.boton-plan,.boton-vinculacion){--btn-fondo:var(--btn-verde);--btn-fondo-hover:var(--btn-rojo)}
/* Todos los botones de acción: verdes y rojos al pasar el ratón (Adolf, 17/09) */
:root:root:root :is(a,button):is(.boton-rojo,.boton-colabora,.boton-plan,.boton-vinculacion,.boton-enviar,.boton-correo,.boton-banner){--btn-fondo:var(--btn-verde);--btn-fondo-hover:var(--btn-rojo)}
:root .ver-web a.boton-rojo,:root a.boton-rojo[download]{--btn-fondo:var(--btn-verde);--btn-fondo-hover:var(--btn-rojo)}
:root :is(a,button):is(.boton-verde,.boton-red,.boton-negro,.boton-contacto){--btn-fondo-hover:var(--btn-rojo)}
:root :is(a,button).boton-suscribir{--btn-fondo:var(--btn-naranja);--btn-fondo-hover:var(--btn-naranja-hover);--btn-texto:var(--btn-naranja-texto)}

/* ---------- Raya ondulada bajo los títulos de sección (17/09) ----------
   Misma raya que el <img class="separador"> de prensa y fines y actividades
   (separadorbig.png, 1200x96), dibujada con ::after para no tocar los HTML.
   Vale para los 4 idiomas (mismas clases). No se aplica a títulos sobre foto,
   h1, tarjetas, pie, diálogos, formularios por bloques ni a los títulos que ya
   llevan <img class="separador"> detrás (blog, prensa, fines/intro). */
:root{--raya-ancho:210px;--raya-alto:17px}
:where(
  /* inicio: «Conexión Norte y Sur global» (tras el subtítulo), bloques, trayectoria */
  main > #red > .conexion,
  main > .bloques > .bloque > div > h2,
  main > .trayectoria > h2,
  /* quien-somos: Líneas de actuación, Socios honoríficos, Junta, Equipo, Consejo */
  main > .lineas > h2,
  main h2.titulo-seccion,
  /* red-escuelas: «Nuestra trayectoria» (tras el subtítulo) */
  main .cronologia > h2 + .sub,
  /* escuelas-amazonia: escuela Ixubãy y «Proyectos liderados…» */
  main > .escuela > div > h2.subtitulo,
  main > .proyectos > h2,
  /* escuelas-espana: «Escuelas españolas» e «Itinerario…» */
  main > .presentacion h2#titulo-escuelas,
  main > .itinerario > h2,
  /* colabora: aportación, conecta, otras formas */
  main > .aportacion > h2,
  main > .conecta > h2,
  main > .otras > .columna > h2,
  /* contacto y newsletter */
  main > .escribenos > h2,
  /* fines y actividades (la intro ya tiene su <img>) */
  main > .fa-fines > h2,
  main > .fa-medios h2,
  main > .fa-compromisos > h2,
  main > .fa-sedes > h2,
  /* informe 2025, memoria Cataluña y otros proyectos: índice y bloques */
  main .bloque > .ancho > h2
):not(:has(+ .separador))::after{
  content:"";display:block;
  width:var(--raya-ancho);max-width:60%;height:var(--raya-alto);
  margin:23px auto 0;
  background:url("../wp-content/uploads/2026/09/cenefa-verde.png") center/100% 100% no-repeat;
}
/* Títulos alineados a la izquierda: la raya también */
main > .bloques > .bloque > div > h2::after,
main .bloque > .ancho > h2::after,
main > .otras > .columna > h2::after{margin-left:0;background-position:left center}
/* Que respire debajo de la raya (≈22 px, como en prensa) */
main > #red > .conexion::after{margin-top:22px}
main .cronologia > h2 + .sub{margin-bottom:max(22px, var(--respiro-titulo, 22px))}
main .cronologia > h2 + .sub::after{margin-top:18px}
main > .escribenos > h2,
main > .escuela > div > h2.subtitulo,
main > .presentacion h2#titulo-escuelas,
main > .otras > .columna > h2,
main > .conecta > h2,
main > .aportacion > h2,
main > .bloques > .bloque > div > h2{margin-bottom:22px}
/* Excepciones de alineación: créditos (centrado) y escuela Ixubãy (izquierda en escritorio) */
main .bloque.descarga > .ancho > h2::after{margin-left:auto;background-position:center}
main > .escuela > div > h2.subtitulo::after{margin-left:0;background-position:left center}
@media (max-width:767px){main > .escuela > div > h2.subtitulo::after{margin-left:auto;background-position:center}}

/* ---------- Textos en caja gris (17/09) ----------
   Bloques de TEXTO de contenido que antes quedaban sueltos sobre blanco y que
   ahora van dentro de una caja gris clara (--fondo-suave + --radio), igual que
   en red-escuelas-nuevo.html (presentación, texto y botones), para que toda la
   web sea coherente. Las traducciones (ca/en/pt-br/fr/de) usan las mismas
   clases, así que estas reglas valen para todos los idiomas.
   NO se meten en caja (a propósito): banners y franjas a sangre, títulos de
   sección sueltos con su raya ondulada, carruseles, tarjetas y cajas que ya
   tienen fondo propio, el pie, los formularios que ya van en su tarjeta, las
   tablas del informe, los diálogos, los pies de foto y los créditos.
   Nunca se pone una caja dentro de otra. */
:root{--relleno-caja:clamp(28px,4vw,56px)}
@media (max-width:480px){:root{--relleno-caja:clamp(20px,5vw,28px)}}

/* Fondo, esquinas y relleno comunes a todas las cajas de texto nuevas */
main > .intro > .fila,
main > .intro > .despues,
main > .intro > .centro,
main > .presentacion > .fila,
main > .itinerario > .pasos,
main > .jurua,
main > .escuela,
main > .lineas:has(> .texto),
main > .rega.texto,
main > .aportacion > .texto,
main > .conecta > .texto,
main > .fa-intro,
main > .blog > .presentacion,
main > .prensa > .presentacion,
main > .prensa > .contacto-prensa,
main > .seccion > .intro,
main > .seccion.trayectoria > .caja-t,
main > .solicitud > .intro{
  box-sizing:border-box;
  padding:var(--relleno-caja);
  background:var(--fondo-suave);
  border-radius:var(--radio);
}

/* ===== Quiénes somos: logo + presentación, y texto + botón bajo la foto ===== */
main > .intro > .fila{margin:0 auto}
main > .intro > .fila .logo-guardians{margin:0 auto}
main > .intro > .foto{margin-top:var(--respiro-titulo)}
/* el párrafo final y el botón forman una sola caja (son hermanos en el HTML) */
main > .intro > .despues{margin:var(--respiro-titulo) auto 0;padding-bottom:0;border-radius:var(--radio) var(--radio) 0 0}
main > .intro > .centro{margin:0 auto;padding-top:24px;border-radius:0 0 var(--radio) var(--radio)}
/* la frase de presentación de «Socios honoríficos» se queda sobre blanco:
   funciona como subtítulo del título de sección, no como bloque de texto */

/* ===== Red de escuelas: las tarjetas de la cronología, dentro de la caja gris,
   pasan a blanco para que no queden gris sobre gris ===== */
main > .texto.intercambios .cronologia .tarjeta-hito{background:#fff}

/* ===== Escuelas españolas: mapa + texto + botón, e itinerario ===== */
main > .presentacion:has(> .fila){padding-left:0;padding-right:0}
main > .presentacion > .fila{width:var(--carril);margin:var(--respiro) auto 0;align-items:center;padding-left:var(--relleno-caja);padding-right:var(--relleno-caja)}
main > .presentacion > .fila > .mapa{padding:0 10px}
main > .presentacion > .fila > .texto{padding:0 10px}
@media (max-width:767px){
  main > .presentacion > .fila > .mapa{padding:0}
  main > .presentacion > .fila > .texto{padding:var(--respiro-titulo) 0 0}
}
main > .itinerario > .pasos{width:var(--carril);max-width:none;margin:0 auto}
main > .itinerario > .pasos .col,
main > .itinerario > .pasos .col:first-child{padding:10px}

/* ===== Escuelas Amazonia: valle del Juruá, escuela Ixubãy, líneas de trabajo y REGA ===== */
main > .jurua{width:var(--carril);margin:var(--respiro) auto 0;align-items:center}
main > .jurua .texto{padding:0 10px 0 30px}
main > .jurua .mapa-acre{margin-top:0}
main > .escuela{width:var(--carril);max-width:none;margin:var(--respiro-titulo) auto 0}
main > .escuela > div{padding:0 10px}
main > .escuela img{margin:0 auto}
main > .lineas:has(> .texto){width:var(--carril);max-width:none;margin:var(--respiro-titulo) auto 0}
main > .rega.texto{width:var(--carril);max-width:none;margin:var(--respiro-titulo) auto 0}
@media (max-width:767px){
  main > .jurua .texto{padding:var(--respiro-titulo) 0 0}
  main > .jurua .mapa-acre{margin-left:auto;margin-right:auto}
}

/* ===== Colabora y participa: textos de «Tu aportación» y «Tu colaboración» ===== */
main > .aportacion > .texto,
main > .conecta > .texto{margin:0 auto}

/* ===== Fines y actividades: «Para qué existimos» ===== */
main > .fa-intro{max-width:calc(860px + 2*var(--relleno-caja));margin:var(--respiro) auto 0;padding-top:var(--relleno-caja)}

/* ===== Entradillas (blog, prensa, recursos, informes y memorias, talleres) =====
   Son párrafos cortos: la caja se ajusta al texto (width:fit-content) para que
   una sola línea no quede en una banda gris casi vacía, y lleva menos relleno
   arriba y abajo que las cajas grandes. */
main > .blog > .presentacion,
main > .prensa > .presentacion,
main > .seccion > .intro{
  width:-webkit-fit-content;width:fit-content;
  padding-top:clamp(20px,2.4vw,34px);padding-bottom:clamp(20px,2.4vw,34px);
  margin-left:auto;margin-right:auto;margin-bottom:var(--respiro-titulo);
}
main > .blog > .presentacion{max-width:calc(880px + 2*var(--relleno-caja))}
main > .prensa > .presentacion{max-width:calc(820px + 2*var(--relleno-caja))}
main > .seccion > .intro{max-width:calc(840px + 2*var(--relleno-caja))}
main > .prensa > .contacto-prensa{max-width:calc(700px + 2*var(--relleno-caja));margin:var(--respiro) auto 0}
main > .seccion.trayectoria > .caja-t{max-width:calc(900px + 2*var(--relleno-caja));margin:0 auto}

/* ===== Páginas con formulario (colaboraciones, vincular centro, voluntariado) ===== */
main > .solicitud > .intro{max-width:calc(760px + 2*var(--relleno-caja));margin:0 0 var(--respiro-titulo)}

/* ===== Botón «volver» al final de las páginas que cuelgan de una sección ===== */
.volver-seccion{box-sizing:border-box;width:var(--carril);margin:0 auto;padding:36px 0 48px;text-align:center}
.volver-seccion a{display:inline-flex;align-items:center;gap:10px}
.volver-seccion + .financiadores{margin-top:0}
@media (max-width:767px){.volver-seccion{padding:26px 0 34px}}

/* Socios honoríficos: el texto de presentación, en caja gris (17/09) */
#socios-honorificos > .presentacion-grupo,#junta-directiva > .presentacion-grupo{
  box-sizing:border-box;width:var(--carril);max-width:var(--carril);margin:0 auto var(--respiro);
  padding:clamp(24px,3.5vw,44px) clamp(20px,5vw,56px);
  background:var(--fondo-suave);border-radius:var(--radio);text-align:center
}
@media (max-width:767px){#socios-honorificos > .presentacion-grupo,#junta-directiva > .presentacion-grupo{padding:22px 18px}}

/* ---------- Campaña de colaboradores (17/09) ----------
   Tres piezas que se usan en varias páginas:
   1) .meta-campana: la frase del objetivo («Buscamos 100 personas…»). Es lo que
      se ve AHORA, porque Adolf decidió (18/09) no enseñar ningún número de
      colaboradores mientras no haya datos.
   2) .progreso-campana: la barra «X de 100 colaboradores». Está DESACTIVADA en
      el HTML, pero los estilos y el código siguen listos: cuando haya cifras se
      vuelve a poner el bloque con data-progreso="N" (instrucciones dentro de
      campana-nuevo.html) y funciona sin tocar nada más.
   3) .franja-campana: la llamada con foto, titular y botón «Súmate», que
      aparece en Inicio, Colabora y Red escuelas.
   Mismas clases para los 6 idiomas cuando se traduzca la campaña. */

/* ===== Frase del objetivo (sin números) ===== */
.meta-campana{max-width:640px;margin:0 auto 26px;font-family:var(--roboto);font-size:19px;font-weight:500;line-height:1.45;color:var(--verde)}
.meta-campana strong{font-weight:700}
.franja-campana .meta-campana{max-width:none;margin:0 0 20px;font-size:16px}
@media (max-width:480px){.meta-campana{font-size:17px}}

/* ===== Barra de progreso (preparada, hoy sin usar) ===== */
.progreso-campana{--pct:0%;box-sizing:border-box;width:100%;max-width:640px;margin:0 auto}
.progreso-campana .progreso-texto{margin:0 0 12px;font-family:var(--roboto);font-size:19px;font-weight:500;line-height:1.35;color:var(--verde)}
.progreso-campana .progreso-num{font-size:34px;font-weight:700;line-height:1}
.progreso-campana .progreso-carril{position:relative;height:16px;border-radius:999px;background:#e4ded3;box-shadow:inset 0 1px 3px rgba(0,0,0,.12);overflow:hidden}
.progreso-campana .progreso-relleno{display:block;height:100%;width:var(--pct);border-radius:999px;background:linear-gradient(90deg,#3f5330,var(--verde) 55%,#7d9a5c);transition:width .9s ease}
.progreso-campana.arranque .progreso-carril{background:repeating-linear-gradient(90deg,#e4ded3 0 12px,#efeae1 12px 24px)}
.progreso-campana .progreso-pie{margin:10px 0 0;font-size:14px;line-height:1.5;color:#555}
@media (prefers-reduced-motion:reduce){.progreso-campana .progreso-relleno{transition:none}}
@media (max-width:480px){.progreso-campana .progreso-texto{font-size:17px}.progreso-campana .progreso-num{font-size:29px}}

/* ===== Franja «Súmate a la campaña» (reutilizable) ===== */
.franja-campana{box-sizing:border-box;width:var(--carril);margin:var(--respiro) auto;display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);align-items:stretch;background:var(--fondo-suave);border-radius:var(--radio);overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.07)}
.franja-campana>.foto{margin:0;min-height:100%}
.franja-campana>.foto img{width:100%;height:100%;min-height:230px;object-fit:cover;border-radius:0}
.franja-campana>.texto{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3.2vw,44px)}
.franja-campana .etiqueta{margin:0 0 8px;color:var(--verde);font:700 12px/1.3 var(--sans);letter-spacing:1.2px;text-transform:uppercase}
.franja-campana h2{margin:0 0 12px;font-family:var(--roboto);font-size:clamp(21px,2.2vw,27px);font-weight:600;line-height:1.25;color:#222}
.franja-campana p{margin:0 0 18px;color:#444;font-size:15.5px;line-height:1.65}
.franja-campana .progreso-campana{max-width:none;margin:0 0 20px}
.franja-campana .progreso-campana .progreso-texto{margin-bottom:9px;font-size:16px}
.franja-campana .progreso-campana .progreso-num{font-size:24px}
.franja-campana .progreso-campana .progreso-carril{height:12px}
.franja-campana .progreso-campana .progreso-pie{display:none}
.franja-campana .acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.franja-campana + .financiadores,.franja-campana + .participa{margin-top:0}
@media (max-width:767px){
  .franja-campana{grid-template-columns:1fr}
  .franja-campana>.foto img{min-height:180px;max-height:240px}
}

/* ==========================================================================
   ALINEACIÓN DE LAS FILAS DE TARJETAS (18/09/2026)
   --------------------------------------------------------------------------
   Adolf pidió «que los textos siempre estén alineados». En varias páginas hay
   filas de tarjetas (foto + título + texto + botón) en las que, al ser los
   textos de largos distintos, los párrafos empezaban a alturas distintas y los
   botones acababan a alturas distintas.

   Se usa siempre el mismo criterio, el mismo que en la campaña:
     · las fotos de las tarjetas llevan una proporción fija (aspect-ratio) con
       object-fit:cover, para que todas midan lo mismo sin deformarse (esto ya
       estaba hecho en todas las rejillas: se comprobó midiendo y no hizo falta
       tocar ninguna foto);
     · la tarjeta es una columna flexible y el botón lleva margin-top:auto, de
       modo que todos los botones quedan pegados abajo y a la misma altura;
     · a los títulos que a veces ocupan una línea y a veces dos se les reserva
       la altura de dos líneas (min-height), solo en los anchos en los que las
       tarjetas van una al lado de otra.

   Todo está aquí (y no en cada página) para que valga igual en los 6 idiomas,
   donde los textos tienen largos distintos.

   OJO: la regla común de los botones (sección «Botones unificados») fija
   `margin-top:0`. Por eso las reglas de abajo que alinean botones llevan
   `:root` delante: sin él ganaría aquella y el botón no bajaría.

   Comprobado con `herramientas/alineacion.py` a 1440, 1024 y 375 px.
   ========================================================================== */

/* ---------- Blog: tarjetas de los artículos ---------- */
main .entrada .texto{display:flex;flex-direction:column}
main .entrada .leer-mas{margin-top:auto}
@media (min-width:768px){main .entrada h3{min-height:2.8em}} /* 2 líneas */

/* ---------- Campaña: hitos y planes ---------- */
@media (min-width:481px){main .hitos h3{min-height:2.6em}}
:root main .planes .boton-plan{margin-top:auto}

/* ---------- Colabora y participa: los 4 planes ----------
   Aquí la lista no era una columna flexible, así que en otros idiomas (con
   nombres o precios más largos) los botones podían descuadrarse. */
main .planes li{display:flex;flex-direction:column;align-items:center}
main .planes li>*{max-width:100%}

/* ---------- Misión y objetivos: tarjetas y lista de actividades ---------- */
@media (min-width:768px){main .fa-tarjeta h3{min-height:2.4em}}
@media (min-width:861px){main .fa-lista h3{min-height:2.5em}}

/* ---------- Quiénes somos: líneas de actuación ----------
   Aquí hay títulos de hasta tres líneas, así que se reservan tres. */
@media (min-width:768px){main .lineas .tarjeta h3{min-height:calc(3 * 1.18em)}}
@media (min-width:768px) and (max-width:1024px){main .lineas .tarjeta h3{min-height:calc(3 * 1.2em)}}

/* ---------- Quiénes somos: socios honoríficos y junta directiva ----------
   El retrato, el nombre y el cargo ocupan 2 o 3 líneas según la persona, así
   que el botón «Leer biografía» quedaba a distinta altura. Al convertir el
   botón en una columna, ese enlace se va abajo del todo en todas las fichas.
   Los <br> sueltos ya no hacen falta (cada trozo va en su propia línea). */
main .persona .abrir-bio{display:flex;flex-direction:column;align-items:center;height:100%}
main .persona .abrir-bio>br{display:none}
main .persona .abrir-bio .ver-bio{margin-top:auto}

/* ---------- Informe 2025 y Memoria de Cataluña: tarjetas de dos columnas ---------- */
@media (min-width:768px){main .ancho .tarjetas>.tarjeta>:is(h3,h4){min-height:2.9em}}

/* ---------- Informe 2025: vídeos de los grupos de trabajo ----------
   Las descripciones tienen largos distintos; así el enlace «Ver en YouTube» y
   el aviso quedan abajo y a la misma altura en los tres vídeos. */
main ul.videos>li{display:flex}
main ul.videos>li>.reproductor{display:flex;flex-direction:column;width:100%}
main ul.videos figcaption{display:flex;flex-direction:column;flex:1}
main ul.videos .enlace-video{margin-top:auto}

/* ---------- Informes y memorias: las dos portadas ---------- */
:root main .memoria .texto .boton-contacto{margin-top:auto}

/* ===== Ventanas para leer otra página sin salir de esta (18/09) ===== */
/* Se abren desde comun.js al pulsar la política de privacidad y los enlaces
   de texto que llevan a otra página de la web. Dentro va la página de verdad
   en un marco (iframe), sin su cabecera ni su pie. */
dialog.ventana-web{width:min(1000px,calc(100% - 28px));max-width:none;height:min(88vh,920px);max-height:none;padding:0;border:0;border-radius:var(--radio,16px);overflow:hidden;background:#fff;color:#333;box-shadow:0 24px 70px rgba(0,0,0,.45)}
dialog.ventana-web[open]{display:flex;flex-direction:column}
dialog.ventana-web::backdrop{background:rgba(0,0,0,.72)}
dialog.ventana-web .barra{display:flex;align-items:center;gap:14px;padding:13px 14px 13px 22px;background:var(--verde-negro,#111);color:#fff;flex:0 0 auto}
dialog.ventana-web .titulo{margin:0;flex:1;min-width:0;font:500 17px/1.3 var(--titulos,var(--sans));color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog.ventana-web .cerrar{flex:0 0 auto;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:background .2s}
dialog.ventana-web .cerrar:hover{background:rgba(255,255,255,.3)}
dialog.ventana-web .marco{flex:1 1 auto;position:relative;background:#fff;min-height:0}
dialog.ventana-web iframe{display:block;width:100%;height:100%;border:0;background:#fff}
dialog.ventana-web .cargando{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;color:#8a8279;font:600 14px/1.4 var(--sans);letter-spacing:.4px}
dialog.ventana-web.lista .cargando{display:none}
dialog.ventana-web .pie-ventana{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 22px;background:var(--fondo-suave,#F7F5F1);border-top:1px solid #e4dfd8;flex:0 0 auto}
dialog.ventana-web .pie-ventana .aviso{margin:0;flex:1;min-width:150px;color:#6d665f;font-size:13.5px;line-height:1.4}
dialog.ventana-web .cerrar-t{background:none;border:0;color:#6d665f;font:600 14.5px/1.4 var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px 4px}
dialog.ventana-web .cerrar-t:hover{color:var(--rojo,#C41919)}
@media (max-width:767px){
  dialog.ventana-web{width:100%;height:100%;max-height:100%;border-radius:0;margin:0;max-width:100%}
  dialog.ventana-web .barra{padding:11px 12px 11px 16px}
  dialog.ventana-web .titulo{font-size:15.5px}
  dialog.ventana-web .pie-ventana{padding:12px 16px;gap:10px}
  dialog.ventana-web .pie-ventana .aviso{display:none}
}
/* La página cuando se ve DENTRO de una de esas ventanas */
.en-ventana .cabecera,.en-ventana .pie,.en-ventana .saltar,.en-ventana .arriba,
.en-ventana .franja-campana,.en-ventana .financiadores,.en-ventana .volver-seccion,
.en-ventana .bajar{display:none!important}
.en-ventana body{padding-top:0!important}
.en-ventana main{padding-top:0!important}
.en-ventana .portada,.en-ventana main > .banner:first-child{min-height:220px!important;height:220px!important}
.en-ventana{scroll-padding-top:12px}

/* ===== Botón «Volver» (18/09) ===== */
.atras{position:fixed;left:20px;bottom:20px;z-index:90;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px 0 11px;border:0;border-radius:2px;background:rgba(0,0,0,.4);color:#fff;font:600 13px/1 var(--sans);letter-spacing:.3px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,background .25s}
.atras.visible{opacity:1;visibility:visible}
.atras:hover{background:rgba(0,0,0,.72)}
.atras svg{width:15px;height:15px;flex:0 0 auto}
@media (max-width:767px){.atras{left:14px;bottom:14px;height:38px;padding:0 13px 0 9px;font-size:12.5px}}
@media print{.atras{display:none}}
/* Flecha «atrás» dentro de la ventana */
dialog.ventana-web .atras-v{flex:0 0 auto;width:34px;height:34px;margin-left:-8px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
dialog.ventana-web .atras-v[hidden]{display:none}
dialog.ventana-web .atras-v:hover{background:rgba(255,255,255,.3)}
dialog.ventana-web .atras-v svg{width:17px;height:17px}

/* ===== Ventana con un formulario dentro (18/09) ===== */
dialog.bio.ventana-formulario{max-width:760px}
dialog.bio.ventana-formulario .formulario{margin-top:18px}
dialog.bio.ventana-formulario .nota-imagenes{margin:14px 0 0;padding:12px 14px;background:var(--fondo-suave,#F7F5F1);border-radius:var(--radio-peq,10px);color:#6d665f;font-size:13.5px;line-height:1.5}
.contacto-prensa-alt{margin:14px 0 0;font-size:14.5px;color:#6d665f}
.contacto-prensa-alt a{color:var(--verde)}

/* Sin hueco de más al final de las cajas claras (18/09) */
:is(main > .conecta > .texto, main > .fa-intro, main > .blog > .presentacion,
    main > .prensa > .presentacion, main > .prensa > .contacto-prensa,
    main > .seccion > .intro, main > .seccion.trayectoria > .caja-t,
    main > .solicitud > .intro) > *:last-child{margin-bottom:0}

/* ===== Ventanita de la dirección de correo (18/09) ===== */
dialog.ventana-correo{position:relative;width:min(440px,calc(100% - 28px));max-width:none;padding:30px 30px 26px;border:0;border-radius:var(--radio,16px);background:#fff;color:#333;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.42)}
dialog.ventana-correo::backdrop{background:rgba(0,0,0,.72)}
dialog.ventana-correo h3{margin:0 0 8px;color:var(--verde);font:500 23px/1.25 var(--titulos,var(--sans))}
dialog.ventana-correo .explica{margin:0 0 18px;color:#6d665f;font-size:14.5px;line-height:1.5}
dialog.ventana-correo .direccion{margin:0 0 20px;padding:13px 14px;background:var(--fondo-suave,#F7F5F1);border-radius:var(--radio-peq,10px);font:600 17px/1.3 var(--sans);color:var(--verde);overflow-wrap:anywhere}
dialog.ventana-correo .acciones-correo{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0}
dialog.ventana-correo .acciones-correo.alterna{margin-top:14px}
dialog.ventana-correo .enlace-form{background:none;box-shadow:none;border:0;display:inline-block;color:#6d665f;font:600 14px/1.4 var(--sans);text-transform:none;letter-spacing:0;text-decoration:underline;text-underline-offset:3px;min-height:0;padding:6px 4px}
dialog.ventana-correo .enlace-form:hover{background:none;color:var(--rojo,#C41919);box-shadow:none}
dialog.ventana-correo .cerrar{position:absolute;top:10px;right:12px;width:38px;height:38px;border:0;border-radius:50%;background:#f1ece5;color:#333;font-size:24px;line-height:1;cursor:pointer}
dialog.ventana-correo .cerrar:hover{background:#e3dcd2}
@media (max-width:480px){dialog.ventana-correo{padding:26px 18px 22px}dialog.ventana-correo .acciones-correo .boton-contacto{width:100%}}

/* ===== La llamada «Súmate» late para que se vea (18/09) =====
   Un pulso suave cada 4,5 s (no un parpadeo brusco). Solo cuando la franja
   está en pantalla —lo marca comun.js con la clase «a-la-vista»— y nunca si
   el sistema pide menos animaciones. */
@keyframes latido-sumate{
  0%,72%,100%{transform:scale(1);box-shadow:0 3px 10px rgba(0,0,0,.16)}
  80%{transform:scale(1.045);box-shadow:0 6px 20px rgba(196,25,25,.45)}
  88%{transform:scale(.995);box-shadow:0 3px 12px rgba(196,25,25,.3)}
  94%{transform:scale(1.015);box-shadow:0 4px 14px rgba(196,25,25,.25)}
}
:root .franja-campana.a-la-vista .acciones :is(a,button):first-child{animation:latido-sumate 4.5s ease-in-out infinite}
:root .franja-campana.a-la-vista .acciones :is(a,button):first-child:hover{animation:none}
@media (prefers-reduced-motion:reduce){
  :root .franja-campana.a-la-vista .acciones :is(a,button):first-child{animation:none}
}

/* ===== TODOS los botones: transparentes con contorno (18/09, tarde) =====
   Regla de Adolf: contorno y letra en verde y, al pasar el ratón, se rellenan
   de verde. Solo los de colaborar (aportar, donar, planes, «Súmate») se
   rellenan de rojo. Sobre fondo oscuro el contorno es blanco. */
:root:root:root :is(a,button):is(.boton-rojo,.boton-colabora,.boton-plan,.boton-vinculacion,.boton-enviar,.boton-correo,.boton-banner,.boton-verde,.boton-red,.boton-negro,.boton-contacto,.boton-news,.boton-borde,.boton-suscribir){
  --btn-fondo:transparent;--btn-fondo-hover:var(--verde);
  --btn-texto:var(--verde);--btn-borde:var(--verde);--btn-borde-hover:var(--verde);
  background:transparent;box-shadow:none
}
:root:root:root :is(a,button):is(.boton-rojo,.boton-colabora,.boton-plan,.boton-vinculacion,.boton-enviar,.boton-correo,.boton-banner,.boton-verde,.boton-red,.boton-negro,.boton-contacto,.boton-news,.boton-borde,.boton-suscribir):is(:hover,:focus-visible,:active){
  background:var(--verde);border-color:var(--verde);color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.18)
}
/* Los de colaborar se rellenan de rojo */
:root:root:root :is(a,button):is(.boton-rojo,.boton-colabora,.boton-plan):is(:hover,:focus-visible,:active){
  background:var(--rojo);border-color:var(--rojo);color:#fff
}
/* Sobre foto o fondo oscuro: contorno blanco */
:root:root:root :is(.cabecera,.pie,.banner,.portada,.oscuro,.franja-oscura,.expo,.franja-cita) :is(a,button):is(.boton-rojo,.boton-colabora,.boton-plan,.boton-vinculacion,.boton-enviar,.boton-correo,.boton-banner,.boton-verde,.boton-red,.boton-negro,.boton-contacto,.boton-news,.boton-borde,.boton-suscribir){
  --btn-texto:#fff;--btn-borde:#fff;color:#fff;border-color:#fff
}
:root:root:root :is(.cabecera,.pie,.banner,.portada,.oscuro,.franja-oscura,.expo,.franja-cita) :is(a,button):is(.boton-rojo,.boton-colabora,.boton-plan,.boton-vinculacion,.boton-enviar,.boton-correo,.boton-banner,.boton-verde,.boton-red,.boton-negro,.boton-contacto,.boton-news,.boton-borde,.boton-suscribir):is(:hover,:focus-visible,:active){
  background:#fff;border-color:#fff;color:var(--verde)
}
:root:root:root :is(.cabecera,.pie,.banner,.portada,.oscuro,.franja-oscura,.expo,.franja-cita) :is(a,button):is(.boton-rojo,.boton-colabora,.boton-plan):is(:hover,:focus-visible,:active){
  background:var(--rojo);border-color:var(--rojo);color:#fff
}
/* El latido de «Súmate», sin sombra de color */
@keyframes latido-sumate{
  0%,72%,100%{transform:scale(1)}
  80%{transform:scale(1.05)}
  88%{transform:scale(.995)}
  94%{transform:scale(1.02)}
}
:root .franja-campana.a-la-vista .acciones :is(a,button):first-child{animation:latido-sumate 4.5s ease-in-out infinite}
:root .franja-campana.a-la-vista .acciones :is(a,button):first-child:hover{animation:none}
@media (prefers-reduced-motion:reduce){
  :root .franja-campana.a-la-vista .acciones :is(a,button):first-child{animation:none}
}

/* ===== Línea de tiempo reutilizable (18/09) =====
   Ya se usaba en «Nuestra trayectoria» (Red escuelas). Ahora también en el
   itinerario de Escuelas españolas, con números en vez de años (.ruta). */
.cronologia{max-width:1000px;margin:10px auto 0;padding:0 4px}
.cronologia ol{position:relative;list-style:none;margin:0;padding:0}
.cronologia ol::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:linear-gradient(var(--naranja),var(--verde));border-radius:3px}
.cronologia .hito{position:relative;width:50%;padding:0 38px 26px}
.cronologia .hito.n{margin-left:0;text-align:right}
.cronologia .hito.s{margin-left:50%}
.cronologia .punto{position:absolute;top:6px;width:18px;height:18px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.12)}
.cronologia .n .punto{background:var(--naranja)}
.cronologia .s .punto{background:var(--verde)}
.cronologia .hito.n .punto{right:-9px}
.cronologia .hito.s .punto{left:-9px}
.cronologia .tarjeta-hito{display:inline-block;text-align:left;background:#fff;border-radius:var(--radio,16px);padding:14px 18px;box-shadow:0 2px 10px rgba(0,0,0,.06);max-width:420px}
.cronologia .hito.n .tarjeta-hito{border-right:4px solid var(--naranja)}
.cronologia .hito.s .tarjeta-hito{border-left:4px solid var(--verde)}
.cronologia .anio{display:block;font-family:var(--mont);font-weight:700;font-size:22px;color:#2d3b26;line-height:1.1}
.cronologia h3{margin:4px 0 6px;font-size:17px;color:#333}
.cronologia p{margin:0;font-size:14.5px;line-height:1.5;color:#444}
@media (min-width:768px){.cronologia .hito.n+.hito.s,.cronologia .hito.s+.hito.n{margin-top:-70px}}
@media (max-width:767px){
  .cronologia ol::before{left:9px}
  .cronologia .hito,.cronologia .hito.s,.cronologia .hito.n{width:auto;margin-left:0;padding:0 0 20px 34px;text-align:left}
  .cronologia .hito.n .punto,.cronologia .hito.s .punto{left:0;right:auto}
  .cronologia .hito.n .tarjeta-hito{border-right:0;border-left:4px solid var(--naranja)}
}
/* Itinerario: el número en un círculo y el logotipo de la Red arriba */
.cronologia.ruta{padding-bottom:12px}
.cronologia.ruta .emblema{margin:0 auto 26px;text-align:center}
.cronologia.ruta .emblema img{width:min(230px,60%);height:auto;margin:0 auto;display:block}
.cronologia.ruta .anio{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:4px;border-radius:50%;background:var(--verde);color:#fff;font-size:17px}
.cronologia.ruta .hito.n .anio{background:var(--naranja);color:#1e2a1e}
@media (max-width:767px){.cronologia.ruta .emblema img{width:min(190px,70%)}}

/* ===== Espacios del final de página (18/09) =====
   Cuando una sección va seguida del botón «volver», los dos respiros se
   sumaban y quedaba un hueco enorme antes del pie. */
:root main > *:has(+ .volver-seccion){padding-bottom:26px}
:root main > .volver-seccion{padding-top:26px;padding-bottom:40px}
:root main > .volver-seccion + .financiadores{margin-top:0}

/* ===== Llamada de atención de la franja de campaña (18/09) =====
   Tres detalles discretos, solo mientras la franja está en pantalla:
   un punto que late junto a «CAMPAÑA ABIERTA», un brillo que la recorre
   cada 7 s y el botón «Súmate» con su pulso. Nada parpadea de forma brusca. */
.franja-campana{position:relative}
.franja-campana .etiqueta .pulso{position:relative;display:inline-block;width:22px;height:22px;margin-right:10px;vertical-align:-6px;color:var(--rojo)}
.franja-campana .etiqueta .pulso svg{display:block;width:22px;height:22px;fill:currentColor;transform-origin:22% 72%}
.franja-campana .etiqueta .pulso .onda{opacity:.9}
.franja-campana.a-la-vista .etiqueta .pulso svg{animation:megafono 1.6s ease-in-out infinite alternate}
.franja-campana.a-la-vista .etiqueta .pulso .onda{animation:megafono-onda 1.6s ease-in-out infinite alternate}
@keyframes megafono{from{transform:rotate(-9deg)}to{transform:rotate(7deg)}}
@keyframes megafono-onda{from{opacity:.3;transform:translateX(0)}to{opacity:1;transform:translateX(1.5px)}}
.franja-campana.a-la-vista::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%);transform:translateX(-110%);animation:brillo-campana 4.5s ease-in-out .6s infinite}
@keyframes brillo-campana{0%{transform:translateX(-110%)}26%,100%{transform:translateX(110%)}}
@media (prefers-reduced-motion:reduce){
  .franja-campana.a-la-vista::after{animation:none;display:none}
  .franja-campana.a-la-vista .etiqueta .pulso svg,
  .franja-campana.a-la-vista .etiqueta .pulso .onda{animation:none}
}

/* Botones sobre foto o fondo oscuro: blanco intenso (la clase la pone comun.js) */
:root:root:root :is(a,button).sobre-oscuro{
  --btn-texto:#fff;--btn-borde:#fff;--btn-fondo:rgba(0,0,0,.22);--btn-fondo-hover:#fff;
  color:#fff;border-color:#fff;background:rgba(0,0,0,.22);
  text-shadow:0 1px 3px rgba(0,0,0,.45);box-shadow:0 2px 12px rgba(0,0,0,.28)
}
:root:root:root :is(a,button).sobre-oscuro:is(:hover,:focus-visible,:active){
  background:#fff;border-color:#fff;color:var(--verde);text-shadow:none
}
:root:root:root :is(a,button).sobre-oscuro:is(.boton-rojo,.boton-colabora,.boton-plan):is(:hover,:focus-visible,:active){
  background:var(--rojo);border-color:var(--rojo);color:#fff
}
.clasificando-botones :is(a,button)[class*="boton-"]{transition:none!important}

/* ===== Los banners de todas las páginas entran con el mismo movimiento
   que la portada: la foto se desplaza de derecha a izquierda (18/09).
   La clase «paneo» y la variable --foto las pone comun.js. */
:root main > .banner.paneo:first-child{position:relative;overflow:hidden;background-image:none!important}
:root main > .banner.paneo:first-child::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--foto);background-size:cover;background-position:inherit;background-repeat:no-repeat;
  transform-origin:50% 100%;will-change:transform;
  animation:paneo-banner 9s cubic-bezier(.22,.61,.36,1) both,
            vaiven-banner 30s ease-in-out 9s infinite alternate
}
:root main > .banner.paneo:first-child > *:not(.bajar):not(.video-banner):not(.sonido-banner){position:relative;z-index:1}
:root main > .banner.paneo:first-child > .bajar{z-index:3}
to{transform:scale(1.16) translateX(0)}}
@media (max-width:767px){to{transform:scale(1.12) translateX(0)}}}
@media (prefers-reduced-motion:reduce){:root main > .banner.paneo:first-child::before{animation:none;transform:none}}
/* Dentro de una ventana no hace falta el movimiento */
.en-ventana main > .banner.paneo:first-child::before{animation:none;transform:none}

to{transform:scale(1.18) translateX(-4.2%)}}
@media (max-width:767px){to{transform:scale(1.14) translateX(-3%)}}}
@media (prefers-reduced-motion:reduce){}

to{transform:scale(1.16) translateX(-4.2%)}}
@media (max-width:767px){to{transform:scale(1.12) translateX(-3%)}}}
@media (prefers-reduced-motion:reduce){:root main > .banner.paneo::before{animation:none!important;transform:none}}

to{transform:scale(1.26)}}
@media (prefers-reduced-motion:reduce){:root main > .banner.paneo::before{animation:none!important;transform:none}}

/* Opción B (elegida el 18/09): la foto entra de derecha a izquierda y luego
   se mueve despacio de lado a lado, sin saltos entre una cosa y la otra. */
@keyframes paneo-banner{from{transform:scale(1.16) translateX(6%)}to{transform:scale(1.16) translateX(0)}}
@keyframes vaiven-banner{from{transform:scale(1.16) translateX(0)}to{transform:scale(1.16) translateX(-5%)}}
@media (max-width:767px){
  @keyframes paneo-banner{from{transform:scale(1.12) translateX(4%)}to{transform:scale(1.12) translateX(0)}}
  @keyframes vaiven-banner{from{transform:scale(1.12) translateX(0)}to{transform:scale(1.12) translateX(-3.5%)}}
}
@media (prefers-reduced-motion:reduce){:root main > .banner.paneo::before{animation:none!important;transform:none}}

/* ===== Banner «que parezca que están bailando» (18/09) =====
   Se activa con data-movimiento="baile" en el <section class="banner">.
   Es el paneo lento de siempre con un balanceo rítmico muy suave encima. */
:root main > .banner.paneo[data-movimiento="baile"]::before{
  animation:paneo-banner 9s cubic-bezier(.22,.61,.36,1) both,
            baile-banner 16s ease-in-out 9s infinite alternate
}
@keyframes baile-banner{0.00%{transform:scale(1.16) translate(0.000%,0.000%) rotate(0.198deg)}3.12%{transform:scale(1.16) translate(0.511%,0.500%) rotate(0.344deg)}6.25%{transform:scale(1.16) translate(0.650%,0.000%) rotate(0.289deg)}9.38%{transform:scale(1.16) translate(0.261%,-0.500%) rotate(0.065deg)}12.50%{transform:scale(1.16) translate(-0.500%,-0.000%) rotate(-0.198deg)}15.62%{transform:scale(1.16) translate(-1.261%,0.500%) rotate(-0.344deg)}18.75%{transform:scale(1.16) translate(-1.650%,0.000%) rotate(-0.289deg)}21.88%{transform:scale(1.16) translate(-1.511%,-0.500%) rotate(-0.065deg)}25.00%{transform:scale(1.16) translate(-1.000%,-0.000%) rotate(0.198deg)}28.12%{transform:scale(1.16) translate(-0.489%,0.500%) rotate(0.344deg)}31.25%{transform:scale(1.16) translate(-0.350%,0.000%) rotate(0.289deg)}34.38%{transform:scale(1.16) translate(-0.739%,-0.500%) rotate(0.065deg)}37.50%{transform:scale(1.16) translate(-1.500%,-0.000%) rotate(-0.198deg)}40.62%{transform:scale(1.16) translate(-2.261%,0.500%) rotate(-0.344deg)}43.75%{transform:scale(1.16) translate(-2.650%,0.000%) rotate(-0.289deg)}46.88%{transform:scale(1.16) translate(-2.511%,-0.500%) rotate(-0.065deg)}50.00%{transform:scale(1.16) translate(-2.000%,-0.000%) rotate(0.198deg)}53.12%{transform:scale(1.16) translate(-1.489%,0.500%) rotate(0.344deg)}56.25%{transform:scale(1.16) translate(-1.350%,0.000%) rotate(0.289deg)}59.38%{transform:scale(1.16) translate(-1.739%,-0.500%) rotate(0.065deg)}62.50%{transform:scale(1.16) translate(-2.500%,-0.000%) rotate(-0.198deg)}65.62%{transform:scale(1.16) translate(-3.261%,0.500%) rotate(-0.344deg)}68.75%{transform:scale(1.16) translate(-3.650%,0.000%) rotate(-0.289deg)}71.88%{transform:scale(1.16) translate(-3.511%,-0.500%) rotate(-0.065deg)}75.00%{transform:scale(1.16) translate(-3.000%,-0.000%) rotate(0.198deg)}78.12%{transform:scale(1.16) translate(-2.489%,0.500%) rotate(0.344deg)}81.25%{transform:scale(1.16) translate(-2.350%,-0.000%) rotate(0.289deg)}84.38%{transform:scale(1.16) translate(-2.739%,-0.500%) rotate(0.065deg)}87.50%{transform:scale(1.16) translate(-3.500%,-0.000%) rotate(-0.198deg)}90.62%{transform:scale(1.16) translate(-4.261%,0.500%) rotate(-0.344deg)}93.75%{transform:scale(1.16) translate(-4.650%,0.000%) rotate(-0.289deg)}96.88%{transform:scale(1.16) translate(-4.511%,-0.500%) rotate(-0.065deg)}100.00%{transform:scale(1.16) translate(-4.000%,-0.000%) rotate(0.198deg)}}
@media (max-width:767px){@keyframes baile-banner{0.00%{transform:scale(1.12) translate(0.000%,0.000%) rotate(0.141deg)}3.12%{transform:scale(1.12) translate(0.331%,0.350%) rotate(0.246deg)}6.25%{transform:scale(1.12) translate(0.412%,0.000%) rotate(0.206deg)}9.38%{transform:scale(1.12) translate(0.143%,-0.350%) rotate(0.046deg)}12.50%{transform:scale(1.12) translate(-0.375%,-0.000%) rotate(-0.141deg)}15.62%{transform:scale(1.12) translate(-0.893%,0.350%) rotate(-0.246deg)}18.75%{transform:scale(1.12) translate(-1.163%,0.000%) rotate(-0.206deg)}21.88%{transform:scale(1.12) translate(-1.081%,-0.350%) rotate(-0.046deg)}25.00%{transform:scale(1.12) translate(-0.750%,-0.000%) rotate(0.141deg)}28.12%{transform:scale(1.12) translate(-0.419%,0.350%) rotate(0.246deg)}31.25%{transform:scale(1.12) translate(-0.338%,0.000%) rotate(0.206deg)}34.38%{transform:scale(1.12) translate(-0.607%,-0.350%) rotate(0.046deg)}37.50%{transform:scale(1.12) translate(-1.125%,-0.000%) rotate(-0.141deg)}40.62%{transform:scale(1.12) translate(-1.643%,0.350%) rotate(-0.246deg)}43.75%{transform:scale(1.12) translate(-1.913%,0.000%) rotate(-0.206deg)}46.88%{transform:scale(1.12) translate(-1.831%,-0.350%) rotate(-0.046deg)}50.00%{transform:scale(1.12) translate(-1.500%,-0.000%) rotate(0.141deg)}53.12%{transform:scale(1.12) translate(-1.169%,0.350%) rotate(0.246deg)}56.25%{transform:scale(1.12) translate(-1.087%,0.000%) rotate(0.206deg)}59.38%{transform:scale(1.12) translate(-1.357%,-0.350%) rotate(0.046deg)}62.50%{transform:scale(1.12) translate(-1.875%,-0.000%) rotate(-0.141deg)}65.62%{transform:scale(1.12) translate(-2.393%,0.350%) rotate(-0.246deg)}68.75%{transform:scale(1.12) translate(-2.663%,0.000%) rotate(-0.206deg)}71.88%{transform:scale(1.12) translate(-2.581%,-0.350%) rotate(-0.046deg)}75.00%{transform:scale(1.12) translate(-2.250%,-0.000%) rotate(0.141deg)}78.12%{transform:scale(1.12) translate(-1.919%,0.350%) rotate(0.246deg)}81.25%{transform:scale(1.12) translate(-1.837%,-0.000%) rotate(0.206deg)}84.38%{transform:scale(1.12) translate(-2.107%,-0.350%) rotate(0.046deg)}87.50%{transform:scale(1.12) translate(-2.625%,-0.000%) rotate(-0.141deg)}90.62%{transform:scale(1.12) translate(-3.143%,0.350%) rotate(-0.246deg)}93.75%{transform:scale(1.12) translate(-3.413%,0.000%) rotate(-0.206deg)}96.88%{transform:scale(1.12) translate(-3.331%,-0.350%) rotate(-0.046deg)}100.00%{transform:scale(1.12) translate(-3.000%,-0.000%) rotate(0.141deg)}}}
@media (prefers-reduced-motion:reduce){:root main > .banner.paneo[data-movimiento="baile"]::before{animation:none!important}}

/* ===== Vídeo de fondo en un banner (18/09) =====
   Se activa con data-video="ruta.mp4" (archivo propio) o data-video-youtube="ID".
   Debajo sigue estando la foto, que es lo que se ve mientras carga, en móvil,
   con «reducir movimiento» o si el vídeo falla. */
:root:root .video-banner{position:absolute!important;inset:0;display:block!important;z-index:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
:root:root .video-banner.listo{opacity:1}
/* velo suave para que el título se lea sobre el vídeo */
:root:root .video-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.46));pointer-events:none}
.video-banner video,.video-banner iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0}
.video-banner video{min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover}
.video-banner iframe{width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh}
:root main > .banner:has(.video-banner)::before{animation:none}

@media (prefers-reduced-motion:reduce){.video-banner{display:none}}

/* ===== Banner «la canoa navegando» =====
   data-movimiento="canoa": la foto se desplaza SIEMPRE hacia la DERECHA de la
   pantalla, para que la canoa avance y no parezca que va marcha atrás (lo pidió
   Adolf el 19/09/2026). Lleva un balanceo suave de agua.
   OJO: este bloque estaba duplicado cuatro veces por un script; se ha reescrito
   a mano. Si hay que cambiarlo, cambiar solo los porcentajes de translate. */
:root main > .banner.paneo[data-movimiento="canoa"]::before{
  animation:canoa-entrada 9s cubic-bezier(.22,.61,.36,1) both,
            canoa-banner 30s ease-in-out 9s infinite alternate
}
@keyframes canoa-entrada{
  from{transform:scale(1.16) translate(-4.5%,0) rotate(-0.15deg)}
  to{transform:scale(1.16) translate(0,0) rotate(0.17deg)}
}
@keyframes canoa-banner{
  0%{transform:scale(1.16) translate(0,0) rotate(0.17deg)}
  25%{transform:scale(1.16) translate(1.25%,0.40%) rotate(-0.10deg)}
  50%{transform:scale(1.16) translate(2.50%,0) rotate(0.14deg)}
  75%{transform:scale(1.16) translate(3.75%,-0.40%) rotate(-0.10deg)}
  100%{transform:scale(1.16) translate(5.00%,0) rotate(0.17deg)}
}
@media (max-width:767px){
  @keyframes canoa-entrada{
    from{transform:scale(1.12) translate(-3%,0)}
    to{transform:scale(1.12) translate(0,0)}
  }
  @keyframes canoa-banner{
    0%{transform:scale(1.12) translate(0,0)}
    50%{transform:scale(1.12) translate(1.75%,0.30%)}
    100%{transform:scale(1.12) translate(3.50%,0)}
  }
}
@media (prefers-reduced-motion:reduce){:root main > .banner.paneo[data-movimiento="canoa"]::before{animation:none!important}}

/* ===== Banner solo de lado a lado, más amplio (18/09) ===== */
:root main > .banner.paneo[data-movimiento="lado"]::before{
  animation:paneo-banner 9s cubic-bezier(.22,.61,.36,1) both,
            lado-banner 24s ease-in-out 9s infinite alternate
}
@keyframes lado-banner{from{transform:scale(1.18) translateX(0)}to{transform:scale(1.18) translateX(-8%)}}
@media (max-width:767px){@keyframes lado-banner{from{transform:scale(1.14) translateX(0)}to{transform:scale(1.14) translateX(-5%)}}}
@media (prefers-reduced-motion:reduce){:root main > .banner.paneo[data-movimiento="lado"]::before{animation:none!important}}

/* Más llamada de atención en la franja de campaña (18/09) */
.franja-campana.a-la-vista{box-shadow:0 2px 12px rgba(0,0,0,.07)}
.franja-campana.a-la-vista>.texto{position:relative}
.franja-campana.a-la-vista>.texto::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:4px;
  background:linear-gradient(var(--naranja),var(--rojo));opacity:.85;animation:barra-campana 2.6s ease-in-out infinite
}
@keyframes barra-campana{0%,100%{opacity:.35;transform:scaleY(.82)}50%{opacity:1;transform:scaleY(1)}}
.franja-campana .etiqueta{color:var(--rojo)}
.franja-campana .flecha-sumate{display:inline-block;margin-left:2px;animation:flecha-sumate 1.3s ease-in-out infinite}
@keyframes flecha-sumate{0%,100%{transform:translateX(0)}55%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){
  .franja-campana.a-la-vista>.texto::before,.franja-campana .flecha-sumate{animation:none}
}

/* Botón para poner el sonido del vídeo del banner (empieza siempre en silencio) */
.sonido-banner{position:absolute!important;right:20px;bottom:24px;z-index:4;width:48px;height:48px;border:2px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(0,0,0,.42);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,transform .25s,border-color .25s}
.sonido-banner:hover{background:rgba(0,0,0,.72);border-color:#fff;transform:scale(1.06)}
.sonido-banner svg{width:24px;height:24px;fill:currentColor}
.sonido-banner .suena{display:none}
.sonido-banner.con-sonido .muda{display:none}
.sonido-banner.con-sonido .suena{display:block}
@media (max-width:767px){.sonido-banner{right:14px;bottom:76px;width:42px;height:42px}.sonido-banner svg{width:21px;height:21px}}

/* Encuadre del banner: por defecto se ancla abajo; con data-encuadre se sube.
   (En Red escuelas, anclado abajo, solo se veían las faldas y los pies.) */
:root main > .banner[data-encuadre="alto"],
:root main > .banner[data-encuadre="alto"].paneo::before{background-position:center 22%!important}
:root main > .banner[data-encuadre="medio"],
:root main > .banner[data-encuadre="medio"].paneo::before{background-position:center 42%!important}

/* Velo sobre la foto del banner para que el texto se lea siempre.
   Con data-velo="fuerte" se oscurece más (fotos muy claras, como la de Campaña). */
:root main > .banner.paneo::before{background-image:linear-gradient(rgba(0,0,0,.20),rgba(0,0,0,.40)),var(--foto)}
:root main > .banner.paneo[data-velo="fuerte"]::before{background-image:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.58)),var(--foto)}
:root main > .banner.paneo[data-velo="suave"]::before{background-image:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.26)),var(--foto)}
.progreso-campana + .cuenta,.arranque-campana .progreso-campana{margin-bottom:26px}

/* Tarjetas «Otras formas de sumarse»: los botones, con su altura normal,
   pegados al fondo de la tarjeta, de modo que el último de cada una queda a la
   misma altura (la referencia es «Empresas y patrocinio»). */
:root:root:root .sumarse li{display:flex;flex-direction:column}
:root:root:root .sumarse li > .boton-vinculacion,
:root:root:root .sumarse li > .acciones{margin-top:auto;min-height:0;height:auto;align-self:stretch}
:root:root:root .sumarse li > .acciones{display:flex;flex-direction:column;gap:12px}
:root:root:root .sumarse li :is(a,button)[class*="boton-"]{width:100%;height:auto;min-height:48px;justify-content:center;flex:0 0 auto}

/* Banner de media altura: para fotos o ilustraciones que se recortan mucho
   en un banner a pantalla completa (se activa con data-alto="medio"). */
:root main > .banner[data-alto="medio"],
:root main > .banner[data-alto="medio"]:first-child{min-height:min(560px,64vh)!important;height:auto!important}

/* ===== Línea de tiempo en horizontal (18/09) =====
   Para pasos numerados que se leen mejor en fila (Escuelas Amazonia).
   En pantallas estrechas pasa a una columna con la línea a la izquierda. */
:root .cronologia.horizontal ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-top:0}
:root .cronologia.horizontal ol::before{display:none}
:root .cronologia.horizontal .hito,
:root .cronologia.horizontal .hito.n,
:root .cronologia.horizontal .hito.s{width:auto;margin:0;padding:0;text-align:left}
:root .cronologia.horizontal .hito + .hito{margin-top:0}
:root .cronologia.horizontal .punto{display:none}
:root .cronologia.horizontal .tarjeta-hito{display:flex;flex-direction:column;max-width:none;height:100%;border:0;border-top:4px solid var(--naranja);padding:22px 22px 24px}
:root .cronologia.horizontal .hito.s .tarjeta-hito{border-top-color:var(--verde)}
:root .cronologia.horizontal .anio{margin-bottom:6px}
:root .cronologia.horizontal h3{font-size:17.5px;margin:6px 0 8px}
:root .cronologia.horizontal p{font-size:15px;line-height:1.6}
@media (max-width:1000px){:root .cronologia.horizontal ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (max-width:640px){:root .cronologia.horizontal ol{grid-template-columns:1fr}}

/* ===== La franja de campaña, más visible (18/09) ===== */
:root .franja-campana{border:0;box-shadow:0 14px 38px rgba(0,0,0,.20),0 3px 10px rgba(0,0,0,.10)}
:root .franja-campana > .texto{background:linear-gradient(180deg,#fff,var(--fondo-suave))}
:root .franja-campana .etiqueta{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:0;background:none;color:var(--rojo)!important;font-weight:700}
:root .franja-campana .etiqueta .pulso{color:var(--rojo);width:27px;height:27px;margin-right:0;vertical-align:-7px}
:root .franja-campana .etiqueta .pulso svg{width:27px;height:27px}
:root .franja-campana.a-la-vista > .texto::before{width:6px}
/* el botón «Súmate» de la franja, relleno de rojo: es la llamada principal */
:root:root:root .franja-campana .acciones :is(a,button)[class*="boton-"]{
  background:var(--rojo);border-color:var(--rojo);color:#fff;box-shadow:0 4px 14px rgba(196,25,25,.32)
}
:root:root:root .franja-campana .acciones :is(a,button)[class*="boton-"]:is(:hover,:focus-visible){
  background:#a01414;border-color:#a01414;color:#fff
}

/* ===== Mapa interactivo del Juruá (18/09) =====
   Mapa con chinchetas numeradas y lista de territorios: al pasar el ratón o
   pulsar en uno, se resalta en el otro. Funciona también con el teclado. */
.mapa-jurua{padding:var(--respiro,56px) 20px}
.mapa-jurua .ancho-mapa{max-width:1180px;margin:0 auto}
.mapa-jurua h2{margin:0 0 8px;text-align:center;color:var(--verde);font-family:var(--roboto,inherit);font-size:clamp(22px,2.4vw,29px);font-weight:600}
.mapa-jurua .sub-mapa{margin:0 auto 26px;max-width:680px;text-align:center;color:#555;font-size:16px;line-height:1.6}
.mapa-inter{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;align-items:start}
.mapa-inter .plano{position:relative;border-radius:var(--radio,16px);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.18);background:#0F3431}
.mapa-inter .plano img{display:block;width:100%;height:auto}
.chincheta{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:30px;height:30px;padding:0;border:2px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(17,17,17,.55);color:#fff;font:700 13px/1 var(--sans);cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}
.chincheta:hover,.chincheta:focus-visible,.chincheta.activa{background:var(--naranja);border-color:#fff;color:#1e2a1e;transform:translate(-50%,-50%) scale(1.35);box-shadow:0 0 0 6px rgba(245,163,58,.35);z-index:2;outline:none}
.territorios{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:560px;overflow:auto}
.territorios button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;border:1px solid #e6e0d6;border-radius:var(--radio-peq,10px);background:#fff;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.territorios button:hover,.territorios button:focus-visible,.territorios button.activa{border-color:var(--naranja);background:#fffaf1;transform:translateX(3px);outline:none}
.territorios .n{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--verde);color:#fff;font:700 13px/1 var(--sans)}
.territorios button.activa .n{background:var(--naranja);color:#1e2a1e}
.territorios .ti{font:600 14.5px/1.3 var(--sans);color:#333}
.territorios .pueblo{margin-left:auto;padding-left:10px;font-size:12.5px;color:#7d7668;text-align:right}
.mapa-jurua .fuente-mapa{margin:18px 0 0;text-align:center;color:#6d665f;font-size:13.5px}
@media (max-width:900px){
  .mapa-inter{grid-template-columns:1fr}
  .territorios{max-height:none}
  .mapa-jurua{padding:34px 14px}
}

/* ===== Pie en el móvil (18/09) ===== */
/* Iconos de redes sociales más grandes (en el móvil se tocan con el dedo) */
@media (max-width:767px){
  .pie .redes{gap:14px;margin-left:0}
  .pie .redes a{width:46px;height:46px;border:1px solid rgba(255,255,255,.35);border-radius:50%}
  .pie .redes svg{width:22px;height:22px}
}
/* Los logos de financiadores, de uno en uno en el móvil */
@media (max-width:767px){
  .financiadores ul{zoom:1;flex-direction:column;gap:26px;max-width:320px}
  .financiadores li{flex:0 0 auto;width:100%}
  .financiadores img{max-height:64px;width:auto;margin:0 auto}
}
/* Créditos de las fotografías, bajo el copyright */
.pie-final .credito-fotos{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;opacity:.75}

/* Logos de financiadores: todos con el mismo espacio y el mismo peso visual
   (las imágenes están normalizadas a un lienzo de 420x170 con la misma tinta). */
:root .financiadores img{height:auto;max-height:70px;width:auto;max-width:none;object-fit:contain}
@media (max-width:1100px){:root .financiadores img{max-height:62px}}
@media (max-width:767px){:root .financiadores img{max-height:58px;max-width:250px}}

/* ---------- Portada nueva (18/09): titular, cifras, puertas, medios ---------- */
:root .portada .bajada{color:#fff;font:500 20px/1.45 var(--roboto,Roboto,sans-serif);max-width:730px;margin:20px auto 0;text-shadow:0 1px 8px rgba(0,0,0,.7)}
:root .portada .acciones-portada{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:28px 0 0}
@media (max-width:767px){:root .portada .bajada{font-size:17px;margin-top:16px}:root .portada .acciones-portada{margin-top:22px}}

.cifras-clave{background:var(--verde,#50653E);padding:30px 20px}
.cifras-clave ul{list-style:none;margin:0 auto;padding:0;max-width:1240px;display:grid;grid-template-columns:repeat(6,1fr);gap:20px;text-align:center}
.cifras-clave .num{display:block;color:#fff;font:700 32px/1.1 var(--roboto,Roboto,sans-serif)}
.cifras-clave .et{display:block;color:rgba(255,255,255,.93);font-size:15px;line-height:1.35;margin-top:8px}
@media (max-width:1240px){.cifras-clave ul{grid-template-columns:repeat(3,1fr);gap:24px}}
@media (max-width:767px){.cifras-clave{padding:26px 16px}.cifras-clave ul{grid-template-columns:repeat(2,1fr);gap:20px}.cifras-clave .num{font-size:26px}.cifras-clave .et{font-size:14px}}

.presentacion .entradilla{font-size:19px;line-height:1.55}
@media (max-width:767px){.presentacion .entradilla{font-size:17px}}
.mas-texto{margin-top:14px}
.mas-texto>summary{cursor:pointer;color:var(--verde,#50653E);font-weight:700;list-style:none}
.mas-texto>summary::-webkit-details-marker{display:none}
.mas-texto>summary::after{content:" ▾"}
.mas-texto[open]>summary::after{content:" ▴"}
.mas-texto[open]>summary{margin-bottom:10px}

/* Bloques con fondo claro y títulos que respiran */
.para-tu-escuela,.otros-portada,.en-medios{background:var(--fondo-suave,#F7F5F1);padding:54px 20px 58px;margin:0}
.para-tu-escuela>h2,.otros-portada>h2,.en-medios>h2{text-align:center;margin:0 auto 34px;max-width:900px}
.otros-portada>p,.en-medios>ul{max-width:820px;margin:0 auto}
.otros-portada .ir,.en-medios .ir{text-align:center;margin:28px 0 0}
.puertas{list-style:none;margin:0 auto;padding:0;max-width:1140px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.puertas li{background:#fff;border-radius:var(--radio,16px);padding:28px;display:flex;flex-direction:column;box-shadow:0 2px 14px rgba(0,0,0,.06)}
.puertas h3{margin:0 0 12px}
.puertas p{margin:0}
.puertas .ir{margin:auto 0 0;padding-top:20px}
@media (max-width:900px){.puertas{grid-template-columns:1fr;max-width:520px}}
@media (max-width:767px){.para-tu-escuela,.otros-portada,.en-medios{padding:40px 16px 44px}.para-tu-escuela>h2,.otros-portada>h2,.en-medios>h2{margin-bottom:26px}}
.en-medios ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;color:var(--gris-boton,#54595F);font:500 16px/1.3 var(--roboto,Roboto,sans-serif)}
.cita cite{display:block;margin-top:16px;font-style:normal;font-size:14px;opacity:.75}

/* ---------- Títulos sobre foto más legibles (18/09) ---------- */
/* La sombra sola no bastaba en fotos claras: se añade un halo oscuro detrás. */
:root .titulo-foto{text-shadow:0 2px 6px rgba(0,0,0,.85),0 6px 28px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.5)}
:root .portada h1.titulo-foto,:root main>.banner h1.titulo-foto{position:relative}
/* El halo cubre TODO el bloque de texto del banner: antetítulo, título y subtítulo. */
:root .portada>div,:root main>.banner>div{position:relative;z-index:1}
:root .portada>div::before,:root main>.banner>div::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1400px,150%);height:calc(100% + 230px);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.42) 0%,rgba(0,0,0,.28) 38%,rgba(0,0,0,.12) 60%,rgba(0,0,0,0) 82%)}
/* El título de los banners interiores, un punto más grande y rotundo */
:root main>.banner h1.titulo-foto{font-size:54px;letter-spacing:.2px}
@media (max-width:767px){:root main>.banner h1.titulo-foto{font-size:36px}}
:root .portada .bajada,:root main>.banner .subtitulo,:root main>.banner .antetitulo{
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 8px rgba(0,0,0,.9),0 6px 26px rgba(0,0,0,.7)}
:root main>.banner .subtitulo,:root .portada .bajada{font-weight:600}

/* ---------- Aire entre la caja de presentación y el bloque siguiente ----------
   Este respiro extra se puso cuando «Para tu escuela» iba justo debajo. Ahora
   ese bloque está más abajo, así que solo se aplica si de verdad va detrás;
   si no, el hueco antes de «Conexión Norte y Sur global» era enorme (19/09). */
:root:root:root main>.presentacion:has(+ .para-tu-escuela){padding-bottom:78px}
:root:root:root main>.presentacion+.para-tu-escuela{padding-top:74px}
@media (max-width:767px){
  :root:root:root main>.presentacion:has(+ .para-tu-escuela){padding-bottom:50px}
  :root:root:root main>.presentacion+.para-tu-escuela{padding-top:48px}}

/* ---------- Cenefa indígena bajo los títulos de los bloques nuevos ----------
   Prueba pedida por Adolf (18/09): en vez de la raya ondulada, un trozo de la
   cenefa del banner, teñida de verde con una máscara. Si no gusta, basta con
   volver a poner el separadorbig.png de la regla general. */
:root .para-tu-escuela>h2::after,:root .otros-portada>h2::after,:root .en-medios>h2::after{
  content:"";display:block;width:210px;max-width:62%;height:17px;margin:20px auto 0;
  background:var(--verde,#50653E);
  -webkit-mask:url("../wp-content/uploads/2026/09/cenefa-banner.png") center/auto 100% repeat-x;
  mask:url("../wp-content/uploads/2026/09/cenefa-banner.png") center/auto 100% repeat-x}
:root .otros-portada,:root .en-medios{text-align:center}
:root .otros-portada>p,:root .en-medios>ul{margin-left:auto;margin-right:auto}
:root .otros-portada .ir,:root .en-medios .ir{text-align:center;display:block}

/* El logo de Begues es más compacto que el resto (escudo pequeño y texto corto):
   se le da un poco más de altura para que se vea del mismo tamaño. */
:root .financiadores img[alt*="Begues"]{max-height:90px}
@media (max-width:1100px){:root .financiadores img[alt*="Begues"]{max-height:80px}}
@media (max-width:767px){:root .financiadores img[alt*="Begues"]{max-height:74px}}

/* ---------- Botones del pie, rellenos de color (18/09) ----------
   Adolf eligió color entero: «Suscríbete» en verde y «Colabora» en naranja.
   Llevan !important porque comun.js les pone la clase «sobre-oscuro». Al
   pulsarlos se oscurecen con la regla general de :active. */
:root:root:root .pie a.boton-news,
:root:root:root .pie a.boton-news.sobre-oscuro{
  background:var(--verde,#50653E)!important;border:2px solid var(--verde,#50653E)!important;
  color:#fff!important;box-shadow:0 3px 10px rgba(0,0,0,.28)}
:root:root:root .pie a.boton-news:hover,
:root:root:root .pie a.boton-news.sobre-oscuro:hover{
  background:#63794e!important;border-color:#63794e!important;color:#fff!important}
:root:root:root .pie a.boton-colabora,
:root:root:root .pie a.boton-colabora.sobre-oscuro{
  background:var(--naranja,#F5A33A)!important;border:2px solid var(--naranja,#F5A33A)!important;
  color:#1e2a1e!important;box-shadow:0 3px 10px rgba(0,0,0,.28)}
:root:root:root .pie a.boton-colabora:hover,
:root:root:root .pie a.boton-colabora.sobre-oscuro:hover{
  background:#ffbf5a!important;border-color:#ffbf5a!important;color:#1e2a1e!important}


/* ---------- Cenefa indígena como separador en toda la web (18/09) ----------
   Sustituye a la raya ondulada (separadorbig.png). Los <img class="separador">
   que hay en algunas páginas se cambian por la cenefa con `content`, así no
   hace falta tocar los HTML. La versión verde está en 2026/09/cenefa-verde.png. */
:root img.separador{
  content:url("../wp-content/uploads/2026/09/cenefa-verde.png");
  display:block;width:210px;max-width:62%;height:17px;object-fit:fill;
  margin-left:auto;margin-right:auto}
:root main > .blog > .separador{width:210px}

/* Banners con la foto muy saturada: data-color="bajo" le baja el color.
   Se aplica a la capa de la foto, así el texto no se ve afectado. */
:root main > .banner[data-color="bajo"].paneo::before{filter:saturate(.55)}
:root main > .banner[data-color="suave"].paneo::before{filter:saturate(.8)}
:root main > .banner[data-color="minimo"].paneo::before{filter:saturate(.2)}

/* Redes del pie más grandes también en el ordenador (18/09) */
:root .pie .redes{gap:14px}
:root .pie .redes a{width:44px;height:44px;border:1px solid rgba(255,255,255,.38);border-radius:50%;color:#d9d9d9}
:root .pie .redes svg{width:21px;height:21px}
:root .pie .redes a:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.10)}

/* Al pulsar cualquier botón, se oscurece y baja un pelo (18/09) */
:root:root:root :is(a,button)[class*="boton-"]:active,
:root:root:root .pie a.boton-news:active,
:root:root:root .pie a.boton-colabora:active{filter:brightness(.82);transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){
  :root:root:root :is(a,button)[class*="boton-"]:active{transform:none}
}

/* Mientras no haya logotipo de la Red, su sitio lo ocupa el nombre (18/09) */
:root .emblema-texto{font-family:var(--roboto,Roboto,sans-serif);font-weight:500;font-size:26px;line-height:1.25;
  color:var(--verde,#50653E);text-align:center;max-width:520px;margin:0 auto 34px}
@media (max-width:767px){:root .emblema-texto{font-size:21px;margin-bottom:26px}}

/* Los botones con relleno de color no llevan sombra en la letra: emborrona.
   La sombra solo tiene sentido en los botones transparentes sobre una foto. */
:root:root:root :is(a,button):is(.boton-rojo,.boton-colabora,.boton-plan,.boton-enviar,.boton-news,.boton-suscribir,.boton-vinculacion),
:root:root:root .pie a.boton-news,:root:root:root .pie a.boton-colabora{text-shadow:none!important}

/* Los dos títulos de «Escuelas catalanas / amazónicas» van centrados también
   cuando ocupan dos líneas (se veían alineados a la izquierda en el móvil). */
:root .dos-escuelas h2{text-align:center;text-wrap:balance}

/* En el móvil, los botones del pie van centrados en su columna */
@media (max-width:767px){
  :root .pie .pie-news a.boton-news,
  :root .pie .col3 a.boton-colabora{display:block;width:fit-content;margin-left:auto;margin-right:auto}
}

/* ---------- Ajustes del 19/09 ----------
   1) La cenefa volvió a faltar en los títulos de los bloques NUEVOS de la
   portada («Para tu escuela», «Más allá de las aulas», «Han hablado de
   nosotros»): no estaban en la lista de selectores de la raya. Los ids son los
   mismos en los 6 idiomas. */
:root main > .para-tu-escuela > h2,
:root main > .otros-portada > h2,
:root main > .en-medios > h2,
:root main h2#t-para-escuela,
:root main h2#t-otros-portada,
:root main h2#t-en-medios{position:relative}
:root main > .para-tu-escuela > h2:not(:has(+ .separador))::after,
:root main > .otros-portada > h2:not(:has(+ .separador))::after,
:root main > .en-medios > h2:not(:has(+ .separador))::after{
  content:"";display:block;
  width:var(--raya-ancho,210px);max-width:60%;height:var(--raya-alto,17px);
  margin:22px auto 0;
  /* OJO (19/09): una regla anterior les ponía una máscara (cenefa-banner) que
     recortaba esta cenefa y la dejaba casi invisible. Hay que anularla. */
  -webkit-mask:none;mask:none;
  background:url("../wp-content/uploads/2026/09/cenefa-verde.png") center/100% 100% no-repeat}

/* 2) El botón «Suscríbete» del pie iba pegado al texto de arriba y al bloque
   de abajo. Se le da aire por los cuatro lados. */
:root:root .pie .pie-news a.boton-news{margin-top:16px;margin-bottom:6px}
@media (max-width:959px){
  :root:root .pie .pie-news a.boton-news{margin-top:18px;margin-bottom:10px}
}

/* 3) Logos de financiadores en el móvil: iban uno debajo de otro y cada uno
   centrado por separado, así que los escudos quedaban desalineados (el de Sant
   Adrià, con el nombre más largo, se iba a la izquierda). Ahora la columna
   entera se centra y los logos se alinean por el escudo. */
@media (max-width:767px){
  :root .financiadores ul{width:max-content;max-width:100%;margin-left:auto;margin-right:auto;
    align-items:flex-start}
  :root .financiadores li{width:auto;justify-content:flex-start}
  :root .financiadores img{margin-left:0;margin-right:0}
}

/* Frase con el número de socios, encima de la junta directiva (19/09) */
:root .intro-junta{
  max-width:760px;margin:-8px auto 30px;padding:0 20px;box-sizing:border-box;
  text-align:center;font-size:16px;line-height:1.7;color:var(--texto,#333)}
/* En el móvil iba pegado a los dos bordes: su sección no tiene relleno propio,
   así que el relleno lo pone el propio párrafo (20/09/2026). */
@media (max-width:767px){
  :root .intro-junta{margin-bottom:24px;text-align:left;padding:0 20px}}

/* ---------- «Para tu escuela» (19/09) ----------
   Adolf: con fotos quedaba feo (caras difuminadas) y el bloque estaba
   demasiado arriba. Ahora va después de las comunidades, con un icono
   dibujado en cada tarjeta y las tarjetas más pequeñas. 6 idiomas. */
:root .para-tu-escuela > .para-intro{
  max-width:720px;margin:-18px auto 30px;text-align:center;
  font-size:clamp(15px,1.15vw,17px);line-height:1.65;color:#3d4a34}
:root:root .puertas{max-width:1040px;gap:22px}
:root:root .puertas li{
  padding:26px 22px 24px;text-align:center;align-items:center;overflow:visible}
:root .puertas .puerta-icono{margin:0 0 14px;line-height:0}
:root .puertas .puerta-icono svg{
  width:44px;height:44px;color:var(--verde,#50653E);vertical-align:middle}
:root .puertas h3{font-size:clamp(17px,1.4vw,20px);margin:0 0 10px}
:root .puertas li > p:not(.ir):not(.puerta-icono){font-size:15px;line-height:1.6}
:root .puertas .ir{margin:auto 0 0;padding-top:18px}
@media (max-width:767px){
  :root .para-tu-escuela > .para-intro{margin:-10px auto 24px}
  :root:root .puertas li{padding:22px 20px 22px}}

/* ---------- Mapa de la portada más pequeño (19/09) ----------
   Adolf: ocupaba casi toda la pantalla. Se reduce el ancho máximo. */
:root main:has(> .portada) .mapa img{max-width:780px}
@media (max-width:900px){:root main:has(> .portada) .mapa img{max-width:100%}}

/* ---------- Cenefas con los extremos difuminados (19/09) ----------
   Adolf: «las cenefas están rotas». El dibujo es una greca continua, así que
   al cortarla por los lados siempre queda medio motivo partido. En vez de
   buscar un corte imposible, los dos extremos se desvanecen suavemente: así el
   remate parece querido y funciona con cualquier ancho de pantalla.
   Se aplica a las rayas dibujadas (::after) y a las <img class="separador">. */
:root :is(main h2, main h3, main .conexion, main .sub)::after,
:root img.separador{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%)}
/* «Para tu escuela» y compañía anulaban la máscara para quitarse una antigua:
   se les vuelve a poner, pero esta vez solo el degradado de los extremos. */
:root main > .para-tu-escuela > h2::after,
:root main > .otros-portada > h2::after,
:root main > .en-medios > h2::after{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%)}

/* ---------- Fotos con crédito dentro de los apartados (19/09) ----------
   Se usan en «Los pueblos guardianes» para ilustrar cada amenaza. El pie
   lleva siempre el autor y la licencia: son fotos de terceros con permiso. */
:root .foto-tema{margin:30px 0 8px;max-width:900px}
:root .foto-tema img{
  display:block;width:100%;height:auto;border-radius:var(--radio,16px);
  box-shadow:0 3px 18px rgba(0,0,0,.10)}
:root .foto-tema figcaption{
  margin-top:12px;font-size:14.5px;line-height:1.6;color:#4a5544}
:root .foto-tema .credito-foto{display:block;margin-top:5px;font-size:12.5px;color:#6b7566}
:root .foto-tema .credito-foto a{color:inherit;text-decoration:underline}
@media (max-width:767px){
  :root .foto-tema{margin:24px 0 6px}
  :root .foto-tema figcaption{font-size:13.5px}}
/* Retrato pequeño dentro de un texto (voces indígenas del marco conceptual) */
:root .foto-tema.retrato-voz{max-width:260px;float:right;margin:0 0 18px 26px}
@media (max-width:700px){
  :root .foto-tema.retrato-voz{float:none;margin:20px auto;max-width:220px}}
/* El retrato de una voz puede ir también a la izquierda */
:root .foto-tema.retrato-voz.izq{float:left;margin:0 26px 18px 0}
@media (max-width:700px){:root .foto-tema.retrato-voz.izq{float:none;margin:20px auto}}

/* ---------- Desplegables de fuentes (19/09) ----------
   «Dónde comprobarlo» y las bibliografías van plegados: están ahí para quien
   quiera comprobarlo, sin cortar la lectura. */
:root details.fuentes{
  margin:22px 0 4px;border-top:1px solid rgba(80,101,62,.22);padding-top:12px}
:root details.fuentes > summary{
  cursor:pointer;list-style:none;font-size:14px;letter-spacing:.02em;
  color:#5b6a52;font-weight:600;display:flex;align-items:center;gap:8px;padding:2px 0}
:root details.fuentes > summary::-webkit-details-marker{display:none}
:root details.fuentes > summary::before{
  content:"";width:0;height:0;border-left:6px solid currentColor;
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
  transition:transform .18s ease}
:root details.fuentes[open] > summary::before{transform:rotate(90deg)}
:root details.fuentes > summary:hover{color:var(--verde,#50653E)}
:root details.fuentes > *:not(summary){margin-top:12px}
:root details.fuentes p{font-size:14.5px;line-height:1.7;color:#5b6a52;margin:0}
@media (prefers-reduced-motion:reduce){
  :root details.fuentes > summary::before{transition:none}}

/* ---------------------------------------------------------------
   Texto solo para lectores de pantalla (20/09/2026)
   Se usaba suelto en varias páginas; ahora vale para toda la web.
   --------------------------------------------------------------- */
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------
   Botón «Leer la biografía» con más aire (20/09/2026)
   Adolf: quedaba pegado al cargo. Vale para las 6 versiones de
   «Quiénes somos» sin tocar ningún HTML.
   --------------------------------------------------------------- */
:root main .persona .abrir-bio{gap:14px}
:root main .persona .ver-bio{padding:7px 18px}
:root main .persona .abrir-bio{padding-bottom:6px}

/* ===== Banner de tinta: casi negro con la ilustración detrás (20/09/2026) =====
   Se activa con data-fondo="tinta" en el <section class="banner">. El fondo es
   el casi negro de la cabecera y del pie, y la ilustración queda detrás en
   blanco y negro, muy apagada, con un velo que se oscurece hacia los bordes
   para que el título se lea siempre. Se usa en Talleres, donde no queremos
   una fotografía. El antetítulo va en naranja y bajo el título hay una raya. */
:root main > .banner[data-fondo="tinta"]{background-color:var(--verde-negro)}
:root main > .banner.paneo[data-fondo="tinta"]::before{
  background-image:radial-gradient(ellipse at center,rgba(12,12,12,.52) 0%,rgba(12,12,12,.9) 72%),var(--foto);
  filter:saturate(0) contrast(1.06) brightness(.8);
}
:root main > .banner[data-fondo="tinta"] .antetitulo{
  color:var(--naranja);font:700 14px/1 var(--mont);letter-spacing:3px;
  text-transform:uppercase;margin:0 0 22px;text-shadow:0 1px 4px rgba(0,0,0,.8);
}
:root main > .banner[data-fondo="tinta"] .raya-titulo{
  display:block;width:76px;height:4px;background:var(--naranja);
  margin:26px auto 0;border-radius:2px;
}
:root main > .banner[data-fondo="tinta"] .subtitulo{margin-top:26px}
@media (max-width:767px){
  :root main > .banner[data-fondo="tinta"] .antetitulo{font-size:12px;letter-spacing:2px;margin-bottom:16px}
  :root main > .banner[data-fondo="tinta"] .raya-titulo{width:58px;height:3px;margin-top:20px}
  :root main > .banner[data-fondo="tinta"] .subtitulo{margin-top:20px}
}

/* Aclaración nuestra debajo de una cita textual (20/09/2026) */
.nota-cita{max-width:760px;margin:-10px auto 26px;font-size:15px;line-height:1.55;color:#5d5d55;font-style:italic}

/* Banner de tinta en VERDE: igual que data-fondo="tinta" pero sobre el verde
   oscuro de la web en vez del casi negro (Terra viva, 20/09/2026). */
:root main > .banner[data-fondo="verde"]{background-color:#2c3a24}
:root main > .banner.paneo[data-fondo="verde"]::before{
  /* la ilustración en blanco y negro, mezclada con el verde del fondo: así el
     verde se ve de verdad y el dibujo solo se intuye */
  background-image:var(--foto);
  filter:saturate(0) contrast(1.06);
  opacity:.34;
  mix-blend-mode:luminosity;
}
/* velo que oscurece hacia los bordes, para que el título se lea siempre */
:root main > .banner[data-fondo="verde"] > div::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:190vw;height:190vh;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(24,33,19,.52) 0%,rgba(24,33,19,0) 62%);
}
:root main > .banner[data-fondo="verde"] .antetitulo{
  color:var(--naranja);font:700 14px/1 var(--mont);letter-spacing:3px;
  text-transform:uppercase;margin:0 0 22px;text-shadow:0 1px 4px rgba(0,0,0,.6);
}
:root main > .banner[data-fondo="verde"] .raya-titulo{
  display:block;width:76px;height:4px;background:var(--naranja);
  margin:26px auto 0;border-radius:2px;
}
:root main > .banner[data-fondo="verde"] .subtitulo{margin-top:26px}
@media (max-width:767px){
  :root main > .banner[data-fondo="verde"] .antetitulo{font-size:12px;letter-spacing:2px;margin-bottom:16px}
  :root main > .banner[data-fondo="verde"] .raya-titulo{width:58px;height:3px;margin-top:20px}
  :root main > .banner[data-fondo="verde"] .subtitulo{margin-top:20px}
}

/* Ilustración a lo ancho con su pie, para imágenes que no son fotografías
   (la maloca imaginada de Escuelas de la Amazonia, 20/09/2026). */
.figura-imaginada{margin:0;padding:0}
.figura-imaginada img{width:100%;height:auto;display:block;max-height:62vh;object-fit:cover}
.figura-imaginada figcaption{max-width:var(--ancho);margin:0 auto;padding:14px 24px 0;
  font-size:15px;line-height:1.55;color:#5d5d55;text-align:center}
.figura-imaginada .aviso-ia{display:block;margin-top:4px;font-size:13.5px;color:#8a877e;letter-spacing:.2px}