/**
 * Capa de rediseño «v2».
 *
 * Va encima de interred.css y no la sustituye. Es a propósito: es una
 * propuesta, y si no convence se apaga quitando su línea de functions.php,
 * sin restaurar respaldos ni deshacer nada.
 *
 * Qué cambia respecto de la v1, y por qué:
 *
 *  - **Tipografía.** Newsreader y Libre Franklin eran correctas y coherentes
 *    con el logotipo, pero en pantalla leían a papel académico. Instrument
 *    Sans tiene el trazo cerrado y el tracking corto que hoy se lee como
 *    contemporáneo; Instrument Serif se reserva para los titulares grandes,
 *    donde el carácter académico sí suma.
 *  - **Radios y sombras.** La v1 usaba 5–14px y bordes de un píxel. Aquí las
 *    superficies son piezas que flotan: radios de 18 a 28px y sombras suaves
 *    y muy abiertas. Es el cambio que más «moderniza» de golpe.
 *  - **Cabecera flotante.** Deja de ser una banda pegada al borde y pasa a ser
 *    una píldora que viaja con la página, con fondo translúcido.
 *  - **Pie con volumen.** Era una banda plana; ahora es una pieza oscura con
 *    las esquinas superiores redondeadas, que cierra la página en vez de
 *    limitarse a terminarla.
 */

:root{
  --v2-sans:"Manrope",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --v2-display:"Outfit","Manrope",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  /* Escala de radios. Un solo salto grande entre «control» y «superficie»:
     mezclar cinco radios distintos es lo que hace que una web parezca vieja. */
  --v2-r-control:999px;   /* botones, píldoras, etiquetas */
  --v2-r-card:20px;       /* tarjetas y bloques */
  --v2-r-grande:28px;     /* secciones y piezas mayores */

  /* Sombras muy abiertas y de poca opacidad: dan altura sin ensuciar. */
  --v2-sombra:0 1px 2px rgba(20,27,77,.04), 0 12px 28px -14px rgba(20,27,77,.20);
  --v2-sombra-alta:0 2px 4px rgba(20,27,77,.05), 0 26px 50px -22px rgba(20,27,77,.32);

  --v2-crema:#FAF8F5;     /* fondo cálido, no gris azulado */

  /* Se redefinen las variables de la v1 en vez de perseguir sus usos: la hoja
     base recurre a --serif y --sans en trece sitios —títulos de país del muro
     de instituciones, cabeceras del calendario, el boletín, las iniciales de
     quien no tiene retrato— y parchearlos uno a uno habría dejado siempre
     alguno fuera. Cambiando la variable cambian todos, y al apagar la capa v2
     vuelven solos a las de antes. */
  --serif:"Outfit","Manrope",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"Manrope",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --v2-linea:rgba(20,27,77,.09);
}

/* ---------- tipografía ---------- */
body, .ir-divi, input, button, select, textarea{ font-family:var(--v2-sans); }
body{ font-size:16.5px; line-height:1.62; letter-spacing:-.005em; }

/* Titulares en geométrica y con peso: es lo que separa un titular «de
   producto» de uno de revista. La v1 usaba una serif en peso 400 y por eso
   se leía a papel, no a pantalla. */
h1,h2,h3,h4,.ir-serif,
.ir-persona__nombre,.ir-bolarch__datos h2,.ir-marca__txt{
  font-family:var(--v2-display); letter-spacing:-.025em;
}
h1{ font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.02; font-weight:700; }
h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.08; font-weight:700; }
h3{ font-weight:600; letter-spacing:-.018em; }
h4{ font-weight:600; }
.ir-marca__txt{ font-weight:700; }
.ir-lead{ font-family:var(--v2-sans); }

/* La volanta deja de ser texto suelto y pasa a ser una píldora con punto.
   Es el detalle que más «sección de producto» aporta, y cuesta una regla. */
.ir-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--v2-sans); font-size:.68rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.34rem .8rem .34rem .62rem; border-radius:var(--v2-r-control);
  background:rgba(20,27,77,.05); color:var(--marino); margin-bottom:1rem;
}
.ir-eyebrow::before{
  content:""; width:.42rem; height:.42rem; border-radius:50%;
  background:var(--rojo); flex:0 0 auto;
}

/* ---------- cabecera flotante ---------- */
/* Con # y no con punto: la cabecera se identifica por ID en el marcado, igual
   que el pie, y una clase nunca le gana en especificidad. Ese era el motivo de
   que siguiera viéndose como una banda blanca pegada al borde.
 *
 * Flota de verdad: la banda desaparece —fondo y borde fuera— y lo único que se
 * ve es la píldora, separada del borde superior, con el logotipo dentro. El
 * contenido pasa por debajo. */
#ir-header{
  position:fixed; top:.9rem; left:0; right:0; z-index:900;
  background:transparent !important; border-bottom:0 !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
/* Fija y no pegajosa. Con `sticky` la cabecera sigue ocupando su altura en el
   flujo, y eso dejaba una banda blanca de medio centenar de píxeles sobre el
   titular en todas las páginas. Compensarla con un margen negativo tampoco
   servía: la píldora se ciñe al bajar, cambia de alto, y la página habría dado
   un salto en ese momento. Fuera del flujo el alto puede cambiar sin que nada
   se mueva.

   A cambio, el contenido empieza en el borde superior y la píldora flota
   encima: es justo lo que se busca en el titular, y en las páginas de sección
   la banda del título recibe el aire necesario más abajo. */
/* La barra de administración de WordPress es fija y se superponía 36px a la
   píldora, tapando el logotipo a quien esté identificado. Solo lo veían los
   editores, nunca un visitante, pero el cliente administra desde el teléfono.
   Mide 46px por debajo de 783 y 32 por encima. */
body.admin-bar #ir-header{ top:calc(.9rem + 46px); }
@media screen and (min-width:783px){
  body.admin-bar #ir-header{ top:calc(.9rem + 32px); }
}

#ir-header .ir-header__in{
  min-height:64px; padding-inline:1.5rem; gap:1.6rem;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(18px) saturate(1.7); backdrop-filter:blur(18px) saturate(1.7);
  border:1px solid var(--v2-linea); border-radius:var(--v2-r-control);
  box-shadow:var(--v2-sombra);
  transition:box-shadow .25s ease, background-color .25s ease, min-height .25s ease;
}
/* Al bajar, la píldora se ciñe y gana sombra: informa de que la página se movió. */
#ir-header.ir-header--bajado .ir-header__in{
  min-height:56px; background:rgba(255,255,255,.93); box-shadow:var(--v2-sombra-alta);
}
.ir-marca__txt{ font-size:1.3rem; }

/* El logotipo y el nombre, uno al lado del otro. El nombre se compone en la
   tipografía del sitio y no en la del logotipo: a este cuerpo, un serif de
   contraste alto se cierra y deja de leerse. Se corta en dos líneas a propósito,
   que en una sola empujaría el menú. */
.ir-marca{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.ir-marca__nombre{
  display:block; max-width:15.5rem;
  font-family:var(--v2-sans); font-size:.6rem; font-weight:600;
  line-height:1.32; letter-spacing:.005em; color:var(--marino);
  border-inline-start:1px solid rgba(20,27,77,.18); padding-inline-start:.6rem;
  text-wrap:balance;
}
.ir-marca:hover .ir-marca__nombre{ color:var(--azul); }
/* Al ceñirse la píldora el nombre pierde su sitio antes que el logotipo. */
#ir-header.ir-header--bajado .ir-marca__nombre{ font-size:.565rem; max-width:13.5rem; }

@media (max-width:1180px){
  .ir-marca__nombre{ max-width:11.5rem; font-size:.565rem; }
}
/* Entre el punto en que el menú se pliega y el móvil hay sitio de sobra. */
@media (max-width:900px){
  .ir-marca__nombre{ max-width:13rem; font-size:.585rem; }
}
/* En el teléfono el nombre no cabe al lado: en 375px quedan 207 para la marca,
   y puesto en columna el texto se reparte en dos líneas en vez de tres. El
   botón de menú lleva flex:none porque si no, el nombre lo comprimía a 24px y
   dejaba de cumplir el mínimo táctil de 44. */
/* En el teléfono, el logotipo solo.
 *
 * El nombre al lado no cabe: en 375px quedan 207 para la marca, y puesto ahí se
 * partía en dos o tres líneas bajo el logotipo. Dos filas de texto diminuto
 * debajo de la marca no es una cabecera, es un accidente. Se retira de la vista
 * y permanece en el árbol de accesibilidad, así que un lector de pantalla sigue
 * anunciando el nombre completo de la Red. */
@media (max-width:700px){
  .ir-marca{ flex-direction:row; align-items:center; gap:.5rem; min-width:0; flex:0 1 auto; }
  .ir-marca__logo{ height:26px; }
  .ir-marca__nombre{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
    border:0; padding:0; margin:0;
  }
  #ir-header .ir-burger, #ir-header .ir-idioma{ flex:none; }
}

/* ---------- respiración de la barra ----------
   Siete grupos en fila se leían como una sola tira de palabras. La respuesta no
   es achicar la letra ni quitar entradas: es repartir el espacio de la barra en
   tres gestos que actúan a la vez.

   Uno: el hueco entre grupos. Estuvo en 32 píxeles y no cabía: la píldora de la
   cabecera está topada en 1.320, así que el menú tiene 957 píxeles y ni uno
   más, se abra la ventana lo que se abra. En castellano pedía 968 y la última
   entrada quedaba cortada en cualquier pantalla. A 22,4 píxeles caben los siete
   grupos en los cuatro idiomas con medio centenar de holgura, y el guion
   estrecha el hueco solo si algún día hiciera falta.

   Dos: cada entrada gana relleno propio y una pastilla al pasar por encima. El
   relleno va con margen negativo del mismo tamaño, así que la fila no se
   ensancha ni un píxel: lo que cambia es que cada grupo pasa a ser un objeto
   con bordes en vez de un trozo de texto, y de paso la zona sensible crece de
   los catorce píxeles de alto de la letra a treinta y seis, que es lo que pide
   el criterio 2.5.5 de la WCAG.

   Tres: un filete separa los cinco grupos con desplegable de las dos entradas
   que son enlace directo. No es decoración: dice que ahí cambia el tipo de
   cosa, y le da un compás a la fila que el espacio uniforme no daba. */
.ir-nav > ul{ gap:var(--ir-hueco,1.4rem); }

.ir-nav > ul > li > a{
  padding:.55rem .7rem;
  margin-inline:-.7rem;
  border-radius:var(--v2-r-control);
  transition:background-color .2s ease, color .2s ease;
}
.ir-nav > ul > li > a:hover,
.ir-nav > ul > li > a:focus-visible{ background:rgba(20,27,77,.055); }
.ir-nav > ul > li.current-menu-item > a,
.ir-nav > ul > li.current-menu-parent > a,
.ir-nav > ul > li.current-menu-ancestor > a{ background:rgba(20,27,77,.06); }

/* El subrayado rojo se ajusta al relleno nuevo: si no, arrancaba en el borde de
   la pastilla y quedaba más ancho que la palabra. */
.ir-nav > ul > li > a::after{ left:.7rem; right:.7rem; bottom:.3rem; }

/* La flecha del desplegable, dentro de su enlace.
 *
 * Estaba colgada fuera, con «right:-.85rem» sobre el borde de la pastilla, y
 * además el elemento llevaba un margen a la derecha para hacerle sitio. Medido
 * en pantalla: la flecha quedaba a veinticinco píxeles de su propia palabra y a
 * cero del grupo siguiente. Se leía como si fuera del de al lado. Y la pastilla
 * del resalte, que se estira once píxeles a cada lado del texto, empezaba antes
 * que la flecha del vecino y se la comía, mientras dejaba la suya afuera.
 *
 * La solución no es correr la flecha unos píxeles: es que viva dentro de la caja
 * del enlace. Se le da relleno propio a la derecha para hacerle sitio ahí dentro
 * y se retira el margen del elemento, que ya no hace falta. Ahora la flecha
 * queda a nueve píxeles de su palabra y a veinte del grupo siguiente, y la
 * pastilla la contiene. */
.ir-nav > ul > li.menu-item-has-children > a{ padding-right:1.55rem; }
.ir-nav > ul > li.menu-item-has-children > a::before{ right:.55rem; }
.ir-nav > ul > li.menu-item-has-children{ margin-right:0; }
/* Y el subrayado termina donde termina la palabra, no debajo de la flecha. */
.ir-nav > ul > li.menu-item-has-children > a::after{ right:1.55rem; }

/* El filete, antes de las dos entradas sin desplegable. */
.ir-nav > ul > li.ir-nav__aparte{ margin-left:1rem; }
.ir-nav > ul > li.ir-nav__aparte::before{
  /* Centrado en el espacio que lo precede, que es el hueco más el margen: si
     el hueco cambia, el filete se recoloca solo y no se pega a una palabra. */
  content:""; position:absolute; left:calc(-1rem - var(--ir-hueco,1.4rem) / 2); top:50%;
  width:1px; height:1.35rem; transform:translateY(-50%);
  background:var(--v2-linea,rgba(20,27,77,.14));
}
.ir-nav a{ font-size:.9rem; font-weight:600; }

.ir-idioma__btn{
  border-radius:var(--v2-r-control); border:1px solid var(--v2-linea);
  background:rgba(20,27,77,.04); font-weight:700; font-size:.82rem;
}
.ir-idioma__lista{ border-radius:var(--v2-r-card); box-shadow:var(--v2-sombra-alta); overflow:hidden; }
.ir-burger{ border-radius:var(--v2-r-control); border:1px solid var(--v2-linea); }

/* Con la cabecera flotando por encima del contenido, un salto a un ancla
   dejaría el destino debajo de la píldora. Esto reserva su altura. */
html{ scroll-padding-top:6rem; }

/* La banda de título de las páginas de sección empieza ahora en el borde
   superior: se le añade el alto de la píldora para que el título no le quede
   debajo. El titular de portada no lo necesita, porque su texto ya arranca
   mucho más abajo y ahí el solape es deseable. */
/* La cabecera de las páginas que arma el tema —Noticias y las fichas— se mide
   igual que las aperturas de DIVI: lo justo para despejar la cabecera flotante
   arriba y separar del contenido abajo. Traía 218px sobre el titular. */
.ir-cab{ padding-top:clamp(4.4rem,5vw,5.4rem); }

/* ---------- botones ---------- */
/* Píldora con flecha. La flecha avanza al pasar por encima: un solo gesto,
   repetido en todo el sitio, hace más por la sensación de «vivo» que cinco
   animaciones distintas. */
.ir-btn, .ir-divi .et_pb_button, .ir-idiomas-pdf a{
  border-radius:var(--v2-r-control) !important;
  font-family:var(--v2-sans); font-weight:600; letter-spacing:0;
  padding:.72rem 1.35rem !important; border-width:1px !important;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
.ir-btn:hover, .ir-divi .et_pb_button:hover, .ir-idiomas-pdf a:hover{
  transform:translateY(-2px); box-shadow:var(--v2-sombra);
}
.ir-divi .et_pb_button:after{ display:none !important; }

/* ---------- superficies ---------- */
.ir-card, .ir-persona__foto, .ir-muro__item, .ir-cifras--panel,
.ir-bolarch__tapa img, .ir-coordinacion .et_pb_image img{
  border-radius:var(--v2-r-card) !important;
}
.ir-foto-ancha .et_pb_image img{ border-radius:0; }
.ir-card{ box-shadow:var(--v2-sombra); border-color:var(--v2-linea); }
.ir-card:hover{ box-shadow:var(--v2-sombra-alta); transform:translateY(-3px); }
.ir-cifras--panel{ background:#fff; box-shadow:var(--v2-sombra); border:1px solid var(--v2-linea); padding:1.7rem 1.9rem; }
.ir-cifra b{ font-family:var(--v2-display); }

/* Fondo cálido en vez del gris azulado: la crema hace que el blanco de las
   tarjetas se lea como pieza y no como continuación del fondo. */
.ir-sec--papel, .ir-seccion-papel, .ir-divi .ir-seccion-papel{ background:var(--v2-crema); }

/* Las franjas de color se curvan, igual que el pie. Un corte recto de borde a
   borde entre dos secciones es lo que delata una web de plantilla; con las
   esquinas redondeadas cada franja se lee como una pieza apoyada sobre la
   página, que es el mismo lenguaje del pie, del boletín y de las tarjetas.
   La curva deja ver el blanco del documento, no el color de la sección
   anterior: por eso funciona igual entre el mapa y los integrantes que entre
   la agenda y las noticias. */
.ir-divi .ir-seccion-papel,
.ir-divi .ir-directorio{ border-radius:var(--v2-r-grande); }

@media (max-width:900px){
  .ir-divi .ir-seccion-papel, .ir-divi .ir-directorio{ border-radius:var(--v2-r-card); }
  #ir-header{ top:.6rem; }
  #ir-header .ir-header__in{ padding-inline:1rem; min-height:54px; }
  #ir-footer{ border-radius:var(--v2-r-card) var(--v2-r-card) 0 0; padding:2.6rem 0 1.6rem; }
}

/* Quien pide menos movimiento, no lo recibe. */
@media (prefers-reduced-motion:reduce){
  #ir-header, .ir-header__in, .ir-btn, .ir-card, .ir-divi .et_pb_button{ transition:none !important; }
  .ir-btn:hover, .ir-card:hover, .ir-divi .et_pb_button:hover{ transform:none; }
}

/* ---------- noticias ---------- */
/* Tarjeta con la fotografía de fondo y el texto encima, como en la referencia:
   la imagen ocupa toda la pieza, un degradado oscuro sostiene el texto abajo y
   la flecha de la esquina anuncia que lleva a otro sitio. */
.ir-noticias{ gap:1.6rem; }
.ir-noticia{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--v2-r-grande); min-height:22rem;
  text-decoration:none; color:#fff; isolation:isolate;
  background:var(--marino);
  transition:transform .3s ease, box-shadow .3s ease;
}
.ir-noticia:hover, .ir-noticia:focus-visible{ transform:translateY(-5px); box-shadow:var(--v2-sombra-alta); }
.ir-noticia__foto{ position:absolute; inset:0; }
.ir-noticia__foto img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.ir-noticia:hover .ir-noticia__foto img{ transform:scale(1.06); }

/* El degradado llega alto y es denso abajo: es lo que garantiza que el titular
   se lea sobre cualquier fotografía, clara u oscura. Sin él el contraste
   depende de la suerte de la imagen. */
/* Dos capas: un velo parejo sobre toda la fotografía y encima un degradado que
   se cierra abajo. Con solo el degradado, una imagen clara —un cielo blanco,
   una pared— dejaba el titular ilegible: la legibilidad no puede depender de
   la suerte de la fotografía. */
.ir-noticia__velo{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,12,28,.96) 0%, rgba(10,12,28,.88) 30%, rgba(10,12,28,.55) 58%, rgba(10,12,28,.34) 100%),
    linear-gradient(rgba(10,12,28,.28), rgba(10,12,28,.28));
}
.ir-noticia--sin-foto .ir-noticia__velo{ background:linear-gradient(to top, rgba(0,0,0,.35), transparent 70%); }

.ir-noticia__flecha{
  position:absolute; top:1rem; right:1rem; z-index:2;
  width:2.4rem; height:2.4rem; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:var(--marino);
  transition:transform .25s ease;
}
.ir-noticia:hover .ir-noticia__flecha{ transform:translate(3px,-3px); }

.ir-noticia__texto{ position:relative; z-index:1; display:block; padding:1.6rem; margin-top:auto; }
.ir-noticia{ display:flex; flex-direction:column; justify-content:flex-end; }
.ir-noticia__fecha{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--amarillo); margin-bottom:.5rem;
}
/* Color explícito y no heredado: la tarjeta entera es un <a>, y la regla base
   del sitio pinta los enlaces de azul marino al pasar por encima. El titular
   heredaba ese color y se volvía marino sobre marino: desaparecía justo al
   apuntarlo. */
.ir-noticia__titulo{
  display:block; font-family:var(--v2-display); font-weight:600; color:#fff;
  font-size:1.25rem; line-height:1.22; letter-spacing:-.02em; margin-bottom:.5rem;
}
.ir-noticia, .ir-noticia:hover, .ir-noticia:focus-visible{ color:#fff; }
.ir-noticia:hover .ir-noticia__titulo{ color:#fff; }
.ir-noticia__pie{ display:block; font-size:.86rem; line-height:1.5; color:rgba(255,255,255,.78); }

@media (max-width:900px){
  .ir-noticia{ min-height:17rem; border-radius:var(--v2-r-card); }
  .ir-noticia__titulo{ font-size:1.05rem; }
}

/* ---------- titular de portada ---------- */
/* Sin fotografía ni retícula: tres brumas de color de la paleta, mezcladas
   como un degradado de malla, y una trama de puntos que se desvanece. El
   punteado es el mismo del mapa de la sección siguiente, así que el titular y
   el mapa se leen como una sola idea en vez de dos gráficos distintos. */
.ir-hero-seccion{ background:#FBFAF8; }
.ir-hero-fondo{ overflow:hidden; }
.ir-hero__bruma{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.5;
  will-change:transform;
}
.ir-hero__bruma--a{ width:46vw; height:46vw; left:-8vw;  top:-14vw; background:#005D9A; opacity:.30; }
.ir-hero__bruma--b{ width:38vw; height:38vw; right:-6vw; top:-6vw;  background:#E03C31; opacity:.20; }
.ir-hero__bruma--c{ width:34vw; height:34vw; right:12vw; bottom:-16vw; background:#FED141; opacity:.26; }

/* La trama: puntos de 1px cada 22px, desvanecidos hacia abajo con una máscara
   para que no compitan con el texto ni corten en seco contra la sección. */
.ir-hero__trama{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(20,27,77,.16) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 45%, transparent 88%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 45%, transparent 88%);
}

/* Deriva muy lenta y muy corta: se percibe como que el fondo respira, no como
   una animación. Quien pide menos movimiento no la recibe. */
@media (prefers-reduced-motion:no-preference){
  .ir-hero__bruma--a{ animation:ir-deriva 26s ease-in-out infinite alternate; }
  .ir-hero__bruma--b{ animation:ir-deriva 34s ease-in-out infinite alternate-reverse; }
  .ir-hero__bruma--c{ animation:ir-deriva 30s ease-in-out infinite alternate; }
}
@keyframes ir-deriva{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(3vw,2vw,0) scale(1.08); }
}

/* El titular del portada se mide contra su columna, que es media página, y no
   contra la ventana entera: a setenta y tres píxeles «Pensar la educación» no
   cabía de una y el titular se partía en cuatro líneas. Con el tope algo más
   bajo entra en tres, que es como se leía en el documento de la coordinación,
   y la sección se acorta casi cien píxeles. En el teléfono no cambia nada: el
   mínimo se queda donde estaba. */
.ir-hero-seccion h1{ max-width:19ch; font-size:clamp(2.6rem,4.8vw,4.1rem); }
.ir-hero-seccion .ir-lead{ max-width:46ch; font-size:clamp(1.02rem,1.5vw,1.16rem); color:#4A5470; }

/* Las cifras dejan de ser números sueltos y pasan a ser tarjetas que flotan.
   Es el gesto que más «producto» aporta de la referencia, y aquí además separa
   el dato del titular, que antes se leían como un mismo bloque. */
/* Cuatro en linea y en su propia fila, ya no apiladas bajo el boton. Ahi
   envolvian a tres mas una y estiraban la columna del texto, que es lo que
   hundia el video hasta media pagina. */
.ir-hero-seccion .ir-cifras{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem; margin-top:0;
}
.ir-hero-seccion .ir-cifra{
  flex:1 1 8rem; min-width:8rem;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--v2-linea); border-radius:var(--v2-r-card);
  padding:1.1rem 1.2rem; box-shadow:var(--v2-sombra);
  transition:transform .25s ease, box-shadow .25s ease;
}
.ir-hero-seccion .ir-cifra:hover{ transform:translateY(-4px); box-shadow:var(--v2-sombra-alta); }
.ir-hero-seccion .ir-cifra b{
  font-family:var(--v2-display); font-weight:700; font-size:2.4rem;
  letter-spacing:-.03em; color:var(--marino);
}
.ir-hero-seccion .ir-cifra span{ font-size:.68rem; letter-spacing:.1em; color:#6B7590; }

@media (max-width:900px){
  .ir-hero-seccion .ir-cifras{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
  .ir-hero-seccion .ir-cifra{ padding:.9rem 1rem; }
  .ir-hero-seccion .ir-cifra b{ font-size:1.9rem; }
  .ir-hero__bruma{ filter:blur(60px); }
}

/* ---------- cabecera de las páginas de sección ---------- */
/* Coherente con el titular de portada sin ser el mismo: una sola bruma de
   color en vez de tres, la misma trama de puntos y el mismo tipo de letra.
   Fuera el degradado de tres colores y la retícula de nodos, que eran del
   diseño anterior y chocaban con lo nuevo. */
.ir-cab{
  background:#FBFAF8 !important;
  border-bottom:1px solid var(--v2-linea);
}
/* La retícula de nodos se retira aquí, no en el mapa: allí sí significa algo. */
.ir-cab .ir-red-fondo{ display:none; }
.ir-cab::before{
  content:""; position:absolute; z-index:0;
  width:42vw; height:42vw; right:-10vw; top:-22vw;
  background:#005D9A; opacity:.20; border-radius:50%; filter:blur(90px);
}
.ir-cab::after{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(rgba(20,27,77,.14) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 40%, transparent 92%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 40%, transparent 92%);
}
/* Aire para despejar la píldora flotante, y nada más.
   Traía `calc(7rem + 2vw)`, que en una pantalla de 1440 son 141px sobre el
   titular: la banda medía 412px para tres líneas de texto. Se mide igual que
   las aperturas de DIVI, para que Noticias y las secciones tengan la misma
   entrada. */
.ir-cab__in{ padding-block:clamp(6.4rem,7.4vw,7.8rem) clamp(2.4rem,3.6vw,3.2rem) !important; max-width:52rem; }
.ir-cab h1{ font-size:clamp(2.4rem,5.5vw,4rem); line-height:1.03; }
.ir-cab .ir-lead{ color:#4A5470; max-width:44ch; }
.ir-migas a{ font-weight:600; }

@media (max-width:900px){
  .ir-cab::before{ filter:blur(60px); }
  .ir-cab__in{ padding-block:calc(4.8rem + 2vw) 1.9rem !important; }
}

/* ---------- boletín de portada ---------- */
/* El fondo deja de ocupar toda la franja y pasa a ser un contenedor.
   Una banda de color de borde a borde es de la generación anterior de webs;
   una pieza redondeada con aire alrededor se lee como un objeto sobre la
   página, que es el lenguaje del resto del sitio. La sección queda blanca. */
.ir-divi .ir-seccion-azul{ background:#fff !important; }
.ir-bol{
  background:linear-gradient(155deg,#E8EFF7 0%,#DFE8F1 55%,#E7E2F2 100%);
  border:1px solid rgba(20,27,77,.06);
  border-radius:var(--v2-r-grande);
  padding:clamp(1.8rem,4vw,3.2rem);
  box-shadow:var(--v2-sombra);
}
/* La tapa se levanta sobre el contenedor: sugiere un objeto apoyado ahí y no
   una imagen pegada al fondo. Antes venía además girada grado y pico, y eso no
   se leía como un gesto sino como un error de montaje: es lo único torcido en
   una página que alinea todo lo demás al píxel. Se queda la sombra, que es lo
   que levanta, y se va el giro. */
.ir-bol__portada img{
  border-radius:14px; box-shadow:0 18px 40px -18px rgba(20,27,77,.45);
  transition:transform .35s ease;
}
.ir-bol__portada img:hover{ transform:translateY(-4px); }
.ir-idiomas-pdf a{
  background:#fff; border:1px solid rgba(20,27,77,.1); color:var(--marino);
  font-weight:600; font-size:.84rem;
}
.ir-idiomas-pdf a:hover{ background:var(--marino); color:#fff; border-color:var(--marino); }
.ir-bol__mas a{ font-weight:600; }

/* ---------- dos paneles: video y agenda ---------- */
/* Cada mitad es una superficie propia. Sobre el mismo fondo, dos titulares
   contiguos se leían como uno solo —«El panel que dio origen a la Red Agenda»—
   y no había forma de saber dónde acababa una sección y empezaba la otra.
   Con dos tarjetas distintas la pregunta desaparece sin necesidad de explicar
   nada. */
.ir-divi .ir-dos-paneles{ display:flex; align-items:stretch; gap:1.6rem; flex-wrap:wrap; }
.ir-divi .ir-dos-paneles > .et_pb_column{
  margin:0; display:flex; flex-direction:column;
  border-radius:var(--v2-r-grande); padding:clamp(1.4rem,2.6vw,2.2rem);
  border:1px solid var(--v2-linea);
}
/* El video sobre marino: el reproductor ya es una pieza oscura y sobre blanco
   quedaba como un agujero en la página. */
.ir-divi .ir-dos-paneles > .et_pb_column:first-child{
  background:var(--marino); color:#B6C2D6; border-color:transparent;
}
.ir-dos-paneles > .et_pb_column:first-child h2{ color:#fff; }
.ir-dos-paneles > .et_pb_column:first-child .ir-eyebrow{ background:rgba(255,255,255,.1); color:#fff; }
.ir-dos-paneles > .et_pb_column:first-child .ir-eyebrow::before{ background:var(--amarillo); }
.ir-video{ border-radius:14px; overflow:hidden; }

/* La agenda sobre crema: es una lista y necesita fondo claro para leerse. */
.ir-divi .ir-dos-paneles > .et_pb_column:last-child{
  background:var(--v2-crema); box-shadow:var(--v2-sombra);
}
.ir-dos-paneles .et_pb_button{ align-self:flex-start; margin-top:auto; }

@media (max-width:900px){
  .ir-divi .ir-dos-paneles{ gap:1rem; }
  .ir-divi .ir-dos-paneles > .et_pb_column{ padding:1.2rem; border-radius:var(--v2-r-card); }
  .ir-bol{ border-radius:var(--v2-r-card); }
}

/* ---------- ajustes responsivos ---------- */
@media (max-width:900px){
  /* `1fr` reparte el sobrante, pero cada columna sigue reservando el ancho de
     su contenido más largo: «INSTITUCIONES» se llevaba el espacio y a «PAÍSES»
     le quedaban 49px. Con minmax(0,1fr) las tres miden lo mismo de verdad. */
  .ir-cifras--panel{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:.6rem; }
  .ir-cifras--panel .ir-cifra span{ font-size:.58rem; letter-spacing:.06em; }
  .ir-cifras--panel .ir-cifra b{ font-size:1.7rem; }
}
@media (max-width:560px){
  /* Por debajo de este ancho tres cifras no caben con dignidad: mejor dos. */
  .ir-cifras--panel{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* ---------- apertura de las páginas de sección ---------- */
/* El mismo fondo del titular de portada pero en menor escala: una sola bruma
   y la misma trama de puntos. Así la página interior se siente del mismo sitio
   sin competir con la portada. */
/* La entrada de cada sección se ajusta a lo que dice.
   Medido en Proyectos: 617px de alto para 186px de contenido. El relleno se
   sumaba dos veces —el de la sección y el de la fila de DIVI—, así que sobre el
   volante había 221px y bajo la bajada otros 160. Arriba solo hace falta
   despejar la cabecera, que acaba en 78px; abajo, separar de lo que viene. */
.ir-divi .ir-apertura-seccion{
  position:relative; background:#FBFAF8; overflow:hidden;
  padding-block:clamp(6.8rem,8vw,8.5rem) 0 !important;
}
.ir-divi .ir-apertura-seccion > .et_pb_row{
  padding-block:0 clamp(2.6rem,4vw,3.6rem) !important;
}
.ir-apertura-seccion::before{
  content:""; position:absolute; z-index:0;
  width:44vw; height:44vw; right:-12vw; top:-24vw;
  background:#005D9A; opacity:.18; border-radius:50%; filter:blur(90px);
}
.ir-apertura-seccion::after{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(rgba(20,27,77,.14) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 40%, transparent 92%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 40%, transparent 92%);
}
.ir-divi .ir-apertura-seccion > .et_pb_row{ position:relative; z-index:1; }
.ir-apertura h1{ font-size:clamp(2.4rem,5.5vw,4rem); line-height:1.03; margin:0 0 .8rem; max-width:18ch; }
.ir-apertura .ir-lead{ font-family:var(--v2-sans); color:#4A5470; max-width:52ch; margin:0; }

/* Las cifras dejan de ser una caja aparte flotando a la derecha y pasan a ser
   tarjetas en línea bajo la bajada: se leen como parte de la entrada y no como
   un widget añadido. */
.ir-apertura .ir-cifras--panel{
  display:flex !important; flex-wrap:wrap; gap:1rem; margin-top:2.4rem;
  background:transparent; border:0; box-shadow:none; padding:0;
}
.ir-apertura .ir-cifras--panel .ir-cifra{
  flex:0 1 10rem;
  background:rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--v2-linea); border-radius:var(--v2-r-card);
  padding:1.1rem 1.3rem; box-shadow:var(--v2-sombra);
  transition:transform .25s ease, box-shadow .25s ease;
}
.ir-apertura .ir-cifras--panel .ir-cifra:hover{ transform:translateY(-4px); box-shadow:var(--v2-sombra-alta); }
.ir-apertura .ir-cifra b{ font-family:var(--v2-display); font-weight:700; font-size:2.3rem; letter-spacing:-.03em; }
.ir-apertura .ir-cifra span{ font-size:.66rem; letter-spacing:.1em; color:#6B7590; }

@media (max-width:900px){
  .ir-divi .ir-apertura-seccion{ padding-block:calc(4.6rem + 2vw) 0 !important; }
  .ir-divi .ir-apertura-seccion > .et_pb_row{ padding-block:0 2rem !important; }
  .ir-apertura-seccion::before{ filter:blur(60px); }
  .ir-apertura .ir-cifras--panel{ gap:.7rem; }
  .ir-apertura .ir-cifras--panel .ir-cifra{ flex:1 1 8rem; padding:.85rem 1rem; }
  .ir-apertura .ir-cifra b{ font-size:1.8rem; }
}

/* ---------- menú en móvil ---------- */
/* El panel colgaba de la cabecera entera —left:0; right:0 de la ventana— así
   que salía de borde a borde y despegado de la píldora, como si fuera otra
   cosa. Anclándolo al contenedor de la píldora hereda su ancho exacto y se lee
   como si creciera de ella. */
#ir-header .ir-header__in{ position:relative; }

/* La hamburguesa sube de 1.000 a 1.264.
   Con cinco grupos el menú medía 430px y cabía de sobra; con siete pide 935 y
   por debajo de esa pantalla se saldría de la píldora. Mejor plegarlo que
   dejarlo reventar. */
@media (max-width:1264px){
  /* El botón solo existe aquí, y con grid para centrar los tres trazos. */
  .ir-burger{ display:grid; }

  /* Los dos controles juntos a la derecha, con el idioma primero: se toca más
     el menú que el idioma, así que el menú va en el extremo, que es la zona
     que el pulgar alcanza sin recolocar la mano. */
  #ir-header .ir-header__in{ gap:.5rem; }
  #ir-header .ir-idioma{ order:2; margin-inline-start:auto; }
  #ir-header .ir-burger{ order:3; margin-inline-start:0; }

  .ir-nav.abierto{
    position:absolute; top:calc(100% + .55rem) !important; left:0; right:0;
    border:1px solid var(--v2-linea); border-bottom:1px solid var(--v2-linea);
    border-radius:var(--v2-r-card);
    padding:.3rem 1.2rem .8rem;
    /* Opaco, sin desenfoque. Con fondo translúcido el titular de portada
       —tipografía muy grande y muy oscura— se transparentaba detrás de los
       enlaces. A esta opacidad el desenfoque ya no aporta nada y solo cuesta
       pintado, así que fuera: un menú tiene que leerse, no lucirse. */
    background:#fff;
    box-shadow:var(--v2-sombra-alta);
    /* El origen en la esquina del botón: la animación parece salir de ahí. */
    transform-origin:top right;
    animation:ir-menu-entra .34s cubic-bezier(.2,.9,.25,1.1) both;
    /* Y si aun plegado no cabe —una pantalla baja, el teléfono acostado—, se
       desplaza por dentro. `overscroll-behavior:contain` es lo que impide que
       al llegar al final del panel el gesto siga arrastrando la página. */
    max-height:calc(100svh - 7.5rem);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  /* Los enlaces entran escalonados detrás del panel. Cuesta seis líneas y es
     lo que separa un menú que aparece de un menú que se despliega. */
  .ir-nav.abierto > ul > li{
    animation:ir-menu-item .3s ease both;
    animation-delay:calc(60ms + var(--i,0) * 45ms);
  }
  .ir-nav.abierto > ul > li:nth-child(1){ --i:0 } .ir-nav.abierto > ul > li:nth-child(2){ --i:1 }
  .ir-nav.abierto > ul > li:nth-child(3){ --i:2 } .ir-nav.abierto > ul > li:nth-child(4){ --i:3 }
  .ir-nav.abierto > ul > li:nth-child(5){ --i:4 } .ir-nav.abierto > ul > li:nth-child(6){ --i:5 }

  /* Cada grupo ocupa una fila entera, separada por una línea fina: el nombre a
     la izquierda y la flecha pegada al borde derecho.

     Antes la lista era una columna de cajas del ancho del texto, así que la
     flecha quedaba a media fila, a cinco píxeles del enlace y encima de él. En
     un teléfono el dedo caía en el enlace y en vez de desplegar el grupo se
     entraba en su página. Ahora el enlace vive en su columna y la flecha en la
     suya, alta como toda la fila: son dos objetivos que no se tocan. */
  .ir-nav.abierto > ul{
    flex-direction:column; align-items:stretch; gap:0;
  }
  .ir-nav.abierto > ul > li{ width:100%; }
  .ir-nav.abierto > ul > li + li{ border-top:1px solid rgba(20,27,77,.09); }
  .ir-nav.abierto > ul > li > a{
    display:block; margin-inline:0; border-radius:0;
    padding:.95rem .1rem; font-size:1.05rem; font-weight:600;
    white-space:normal;
  }
  .ir-nav.abierto > ul > li > a::after{ display:none; }
  /* El resalte de escritorio pinta una pastilla detrás del enlace. Aquí la
     fila llega hasta el borde y la pastilla cubría solo la mitad, hasta donde
     empieza la flecha: se veía como medio renglón sombreado. El grupo abierto
     ya se distingue por su círculo marino. */
  .ir-nav.abierto > ul > li > a:hover,
  .ir-nav.abierto > ul > li > a:focus,
  .ir-nav.abierto > ul > li > a:focus-visible{ background:transparent; }
  .ir-nav.abierto > ul > li > a:focus-visible{ outline:2px solid var(--marino); outline-offset:-2px; border-radius:var(--v2-r-control,12px); }

  .ir-nav.abierto .menu-item-has-children{
    display:grid; grid-template-columns:minmax(0,1fr) 3rem; align-items:center;
  }
  .ir-nav.abierto .menu-item-has-children > a::before{ display:none; }
  .ir-nav.abierto .menu-item-has-children > .sub-menu{ grid-column:1 / -1; display:none; }
  .ir-nav.abierto .menu-item-has-children.desplegado > .sub-menu{ display:block; }

  /* La flecha: alta como la fila y pegada a la derecha, que es donde el pulgar
     la busca y donde no hay nada más que tocar. */
  .ir-nav.abierto .ir-nav__abrir{
    position:relative; display:grid; place-items:center; justify-self:end;
    width:3rem; align-self:stretch; min-height:3rem; padding:0;
    cursor:pointer; color:var(--marino); background:transparent;
    border:0; border-radius:var(--v2-r-control,12px);
    -webkit-tap-highlight-color:rgba(20,27,77,.12); touch-action:manipulation;
  }
  /* Lo que se ve es un círculo de treinta y seis píxeles; lo que se toca es
     toda la altura de la fila. El botón entero pintado de marino pesaba
     demasiado al lado de un nombre de grupo. */
  .ir-nav.abierto .ir-nav__abrir::before{
    content:""; position:absolute; width:2.25rem; height:2.25rem; border-radius:50%;
    background:rgba(20,27,77,.06); transition:background-color .2s ease;
  }
  .ir-nav.abierto .ir-nav__abrir::after{
    content:""; position:relative; width:.55rem; height:.55rem;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-1px,-1px);
    transition:transform .25s ease;
  }
  .ir-nav.abierto .ir-nav__abrir[aria-expanded="true"]{ color:#fff; }
  .ir-nav.abierto .ir-nav__abrir[aria-expanded="true"]::before{ background:var(--marino); }
  .ir-nav.abierto .ir-nav__abrir[aria-expanded="true"]::after{ transform:rotate(-135deg) translate(-2px,-2px); }
  .ir-nav.abierto .ir-nav__abrir:focus-visible{ outline:2px solid var(--marino); outline-offset:-4px; }

  /* Los hijos, sangrados bajo su grupo. */
  .ir-nav.abierto .sub-menu{
    border-left:2px solid var(--v2-linea); margin:0 0 .8rem .1rem; padding-left:1rem;
  }
  .ir-nav.abierto .sub-menu a{
    display:block; padding:.6rem 0; font-weight:500; font-size:.96rem; color:#4A5470;
    white-space:normal;
  }
  .ir-nav.abierto > ul > li.ir-nav__aparte{ margin-left:0; }
  .ir-nav.abierto > ul > li.ir-nav__aparte::before{ display:none; }
}

/* En escritorio los submenús se abren al pasar por encima, así que el botón no
   pinta nada: existe solo para el panel plegado. */
.ir-nav__abrir{ display:none; }
/* Con el menú abierto, la página de detrás se queda quieta. */
body.ir-menu-abierto{ overflow:hidden; }

@keyframes ir-menu-entra{
  from{ opacity:0; transform:translateY(-10px) scale(.96); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes ir-menu-item{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ---------- botón del menú ---------- */
/* Cerrado, tres trazos de distinto ancho: se lee como un icono dibujado y no
   como el emoticono de tres rayas de siempre. Abierto, las tres se convierten
   en una equis. La transformación es la que informa del estado; el atributo
   aria-expanded, que ya ponía el guion, es de dónde la saca el CSS, así que no
   hace falta tocar el JavaScript. */
/* Sin `display` aquí: ponerlo con !important anulaba el display:none que lo
   esconde en escritorio, y el botón aparecía también en pantallas grandes.
   La forma se define siempre; quién lo enseña y cuándo lo sigue decidiendo la
   media query de la hoja base. */
.ir-burger{
  width:2.75rem; height:2.75rem; place-content:center;
  gap:5px; padding:0; background:rgba(20,27,77,.04);
  transition:background-color .2s ease, transform .2s ease;
}
.ir-burger:hover{ background:rgba(20,27,77,.09); }
.ir-burger:active{ transform:scale(.94); }
.ir-burger span{
  width:20px; height:2px; margin:0; border-radius:2px; background:var(--marino);
  transition:transform .32s cubic-bezier(.2,.9,.25,1.1), opacity .18s ease, width .32s ease;
}
.ir-burger span:nth-child(2){ width:14px; margin-left:auto; }
.ir-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.ir-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; width:0; }
.ir-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- aire bajo la cabecera flotante en móvil ---------- */
/* La píldora flota sobre el contenido, y en móvil el titular arranca tan arriba
   que la volanta le quedaba pegada por debajo. En escritorio no pasa porque el
   texto empieza mucho más abajo. */
@media (max-width:900px){
  .ir-divi .ir-hero-seccion{ padding-top:5.5rem !important; }
}

@media (prefers-reduced-motion:reduce){
  .ir-nav.abierto, .ir-nav.abierto > ul > li{ animation:none !important; }
  .ir-burger span{ transition:none; }
}

/* ---------- eventos pasados ---------- */
/* La opacidad sola no bastaba: quien no compara dos tarjetas no nota que una
   está más clara. La escala de grises quita el color de la modalidad —que es
   la señal más viva de la ficha— y la pastilla lo dice con una palabra. */
.ir-evento--pasado{ opacity:1; filter:grayscale(1); }
.ir-evento--pasado:hover, .ir-evento--pasado:focus-visible{ filter:grayscale(.35); }
.ir-evento__hecho{
  display:inline-flex; align-items:center; font-style:normal;
  font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:var(--v2-r-control);
  background:rgba(20,27,77,.08); color:#5B6579;
}
.ir-cal__chip.es-pasado{ opacity:1; filter:grayscale(1) brightness(1.06); }

/* Flechas y «Hoy» apagados en la agenda: no hay periodo que recorrer. */
.ir-cal__flecha:disabled, .ir-cal__hoy:disabled{ opacity:.35; cursor:default; }

/* El rótulo del periodo llevaba `capitalize` porque los meses vienen en
   minúscula. Con el rótulo de la agenda eso daba «Todas Las Actividades».
   Con ::first-letter sirve para los dos casos. */
.ir-cal__periodo{ text-transform:none; }
.ir-cal__periodo::first-letter{ text-transform:uppercase; }

/* ============================================================
   Ritmo de entrada
   ============================================================
   Un solo gesto —subir y aparecer— repetido en todo el sitio, con tres
   niveles de retardo. Es la coherencia lo que hace que se lea como
   profesional; un catálogo de efectos distintos hace lo contrario.

   Reparto:
     · lo que está sobre la línea de flotación entra al CARGAR, escalonado;
     · lo que está más abajo entra al DESPLAZAR, una sola vez;
     · dentro de una rejilla, los hijos entran en cascada, con tope.

   Y una regla que no se rompe: nada queda invisible si el JavaScript no
   corre. La clase que esconde la pone el guion, nunca el marcado. */

/* ---- entrada al cargar: titular de portada y aperturas de sección ---- */
.ir-divi .ir-hero-seccion .et_pb_module,
.ir-divi .ir-apertura .et_pb_module{
  opacity:0; animation:ir-v2-entrar .72s cubic-bezier(.22,.61,.36,1) forwards;
}
.ir-divi .ir-hero-seccion .et_pb_module:nth-child(1),
.ir-divi .ir-apertura .et_pb_module:nth-child(1){ animation-delay:.06s; }
.ir-divi .ir-hero-seccion .et_pb_module:nth-child(2),
.ir-divi .ir-apertura .et_pb_module:nth-child(2){ animation-delay:.16s; }
.ir-divi .ir-hero-seccion .et_pb_module:nth-child(3),
.ir-divi .ir-apertura .et_pb_module:nth-child(3){ animation-delay:.26s; }
.ir-divi .ir-hero-seccion .et_pb_module:nth-child(4),
.ir-divi .ir-apertura .et_pb_module:nth-child(4){ animation-delay:.36s; }
/* El fondo del titular no espera a nadie: si entrara escalonado se vería
   primero el texto sobre blanco y luego aparecería el color detrás. */
.ir-divi .ir-hero-seccion .et_pb_code:has(.ir-hero-fondo){ opacity:1; animation:none; }

@keyframes ir-v2-entrar{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

/* Las cifras del titular entran después del botón y en cascada corta: son el
   remate del bloque, no su contenido principal. */
.ir-hero-seccion .ir-cifra, .ir-apertura .ir-cifra{
  opacity:0; animation:ir-v2-entrar .6s cubic-bezier(.22,.61,.36,1) forwards;
}
.ir-hero-seccion .ir-cifra:nth-child(1), .ir-apertura .ir-cifra:nth-child(1){ animation-delay:.42s; }
.ir-hero-seccion .ir-cifra:nth-child(2), .ir-apertura .ir-cifra:nth-child(2){ animation-delay:.50s; }
.ir-hero-seccion .ir-cifra:nth-child(3), .ir-apertura .ir-cifra:nth-child(3){ animation-delay:.58s; }
.ir-hero-seccion .ir-cifra:nth-child(4), .ir-apertura .ir-cifra:nth-child(4){ animation-delay:.66s; }

/* ---- entrada al desplazar ---- */
/* Un poco más de recorrido y algo más lento que la v1: con tarjetas grandes
   y radios amplios, catorce píxeles se notaban poco. */
.ir-anim{
  transform:translateY(18px);
  transition-duration:.62s;
  transition-delay:calc(var(--i,0) * 65ms);
}

/* La fotografía a sangre de «Nosotros» entra sin desplazarse: moverla dejaba
   ver una franja del fondo por debajo mientras subía. */
.ir-foto-ancha .et_pb_image.ir-anim{ transform:none; }

@media (prefers-reduced-motion:reduce){
  .ir-divi .ir-hero-seccion .et_pb_module,
  .ir-divi .ir-apertura .et_pb_module,
  .ir-hero-seccion .ir-cifra, .ir-apertura .ir-cifra{
    opacity:1; animation:none; transform:none;
  }
}

/* ---------- panel de accesibilidad ---------- */
/* El componente trae sus propias variables para poder funcionar con cualquier
   tema. Aquí solo se le pasan las del sitio: así habla el mismo idioma visual
   —tipografía, radios, sombras— sin que deje de ser autosuficiente si algún
   día se usa fuera de este tema. */
.ir-a11y{
  --ir-fuente:var(--v2-sans);
  --ir-azul:var(--marino);
  --ir-azul-claro:var(--azul);
  --ir-borde:var(--v2-linea);
  --ir-suave:var(--v2-crema);
  --ir-r:var(--v2-r-card);
  --ir-r-control:var(--v2-r-control);
  --ir-sombra:var(--v2-sombra-alta);
}
.ir-a11y__cabecera h2{ font-family:var(--v2-display); font-weight:700; }

/* ---------- ficha individual ---------- */
.ir-ficha__presentacion{
  font-size:clamp(1.05rem,1.6vw,1.22rem); line-height:1.55; color:#3E4761;
  max-width:46ch; margin:1.1rem 0 1.6rem;
  padding-left:1.1rem; border-left:3px solid var(--amarillo);
}

/* Safari en iOS pinta la franja que queda bajo la página —la que aparece al
   replegarse la barra de direcciones— con el fondo del elemento raíz, no con el
   del pie. Con un degradado partido ese sobrante continúa en marino y el de
   arriba, al tirar hacia abajo, sigue siendo claro como el resto de la página. */
html{ background:linear-gradient(180deg,#fff 0%,#fff 50%,var(--marino) 50%,var(--marino) 100%); }

/* ---------- pie ---------- */
/* Dos planos: la firma en grande al fondo, recortada por el borde inferior, y
   el contenido encima. Hubo aquí una fachada universitaria de fondo; se retiró
   por decisión de diseño y queda respaldada en 04 · Sitio/Respaldos/. */
#ir-footer{
  position:relative; overflow:hidden;
  background:var(--marino); color:#B6C2D6; border-top:0;
  border-radius:var(--v2-r-grande) var(--v2-r-grande) 0 0;
  margin-top:0; padding:4.5rem 0 0;
}
#ir-footer .ir-footer__interior{ position:relative; z-index:1; }

/* La firma: la palabra del logotipo en grande, recortada por el borde inferior
   del pie. El alto se expresa en % de padding —que se resuelve contra el ancho—
   para que el recorte sea siempre la misma fracción de la letra: la palabra mide
   1/5,885 de su ancho y aquí se deja ver el 74 % de esa altura. */
.ir-footer__firma{
  display:block; width:100%; height:0; padding-bottom:12.6%; margin:2.6rem 0 0;
  pointer-events:none;
}
@supports ((mask-image:url("#i")) or (-webkit-mask-image:url("#i"))){
  .ir-footer__firma{
    background:rgba(255,255,255,.10);
    -webkit-mask:url("img/firma-interred.svg") center top/100% auto no-repeat;
            mask:url("img/firma-interred.svg") center top/100% auto no-repeat;
  }
}

#ir-footer a{ color:#E7ECF4; text-decoration:none; }
#ir-footer a:hover{ color:var(--amarillo); }
#ir-footer .ir-footer__cols h2{
  color:#8492AC; font-family:var(--v2-sans); font-size:.66rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; margin:0 0 1rem;
}

.ir-footer__alto{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);
  gap:3rem; align-items:start;
}
#ir-footer .ir-footer__logo{ filter:brightness(0) invert(1); opacity:.95; height:44px; width:auto; }

.ir-footer__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.5rem; }
#ir-footer .ir-footer__cols ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
#ir-footer .ir-footer__cols a{ font-size:.92rem; }
/* Los dos bloques de contacto necesitan separarse: la dirección postal y la
   línea del Comité Editor iban pegadas y se leían como un solo párrafo de
   cuatro renglones. Y dentro del segundo, el rótulo y el correo también, que
   es lo que hacía parecer que la dirección era parte de la frase. */
/* Van con #ir-footer delante porque el tema base ya trae «#ir-footer p», que
   por especificidad le ganaba a la clase sola y devolvía el margen a cero. */
#ir-footer .ir-footer__contacto{ margin:0; font-size:.9rem; line-height:1.6; color:#B6C2D6; }
#ir-footer .ir-footer__contacto + .ir-footer__contacto{
  margin-top:1.35rem; padding-top:1.35rem;
  border-top:1px solid rgba(255,255,255,.16);
}
#ir-footer .ir-footer__contacto a{
  display:inline-block; margin-top:.45rem;
  color:#fff; font-weight:600; text-decoration:none;
}
#ir-footer .ir-footer__contacto a:hover{ color:#fff; text-decoration:underline; }

.ir-footer__base{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.16); color:#A3B0C6; font-size:.82rem;
  padding-top:1.6rem; margin-top:3rem;
}
/* Logo de ANID asociado al Ministerio de Ciencia, a color y directo sobre el
   marino, sin base blanca: así lo aplica la propia ANID sobre azul oscuro en la
   lámina 26 de su manual. No admite filtros, transparencias ni la versión de una
   tinta, que el manual reserva a impresión (láminas 5 y 11). Los 104 px de alto
   son el mínimo en que el nombre del Ministerio todavía se lee. */
.ir-anid{ display:flex; align-items:center; gap:.75rem; }
.ir-anid span{ font-size:.72rem; color:#8492AC; }
#ir-footer .ir-anid img{ display:block; height:104px; width:auto; }

@media (max-width:900px){
  #ir-footer{ border-radius:var(--v2-r-card) var(--v2-r-card) 0 0; padding:2.8rem 0 0; }
  .ir-footer__alto{ grid-template-columns:1fr; gap:2rem; }
  .ir-footer__cols{ grid-template-columns:1fr 1fr; gap:1.6rem 1.2rem; }
  /* Contacto es el tercer bloque: en dos columnas caía solo en la
     izquierda y partía la dirección a media caja. Que tome el ancho. */
  .ir-footer__cols > div:last-child{ grid-column:1 / -1; }
  /* En vertical la línea legal se apila a la izquierda: en una sola fila el
     sello de ANID quedaba pegado al botón de accesibilidad. */
  .ir-footer__base{ margin-top:2rem; flex-direction:column; align-items:flex-start; gap:1.1rem; }
  .ir-footer__firma{ margin-top:1.8rem; }
}



/* ---------- archivo visual ---------- */
/* Rejilla de celdas fijas, no columnas de CSS.
 *
 * El intento anterior dejaba que cada fotografía conservara su alto natural
 * dentro de columnas de CSS. Con este material no funciona: hay una vertical de
 * 251x388 conviviendo con apaisadas de 2:1, así que las columnas terminaban
 * desiguales y con huecos muertos al pie de cada una.
 *
 * Aquí la celda manda. Todas las piezas son cuadradas, unas pocas ocupan dos
 * celdas de ancho, de alto o las dos, y `grid-auto-flow: dense` rellena
 * cualquier hueco que quede. Las quince suman veinticuatro celdas, que es
 * exactamente 4x6: el muro tesela sin un solo espacio en blanco.
 */
.ir-galeria:not(.ir-galeria--portada){
  padding:0 !important;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  /* Seis filas declaradas y proporción fija en el contenedor: así la celda es
     cuadrada y las veinticuatro casillas cuadran exactas. Dejarlo en
     `grid-auto-rows:1fr` no basta, porque entonces el alto natural de las
     piezas grandes empuja las filas y aparecen huecos. */
  grid-template-rows:repeat(var(--ir-filas,6),1fr);
  aspect-ratio:4 / var(--ir-filas,6);
  grid-auto-flow:row dense; gap:12px;
  max-width:min(calc(var(--ancho) - 3rem), calc(100% - 3rem)); margin-inline:auto;
  /* Aire con la banda del titular. Va en margen y no en relleno: la sección
     lleva `aspect-ratio`, y un relleno se lo comería por dentro achatando las
     filas en vez de separarla de lo de arriba. */
  margin-block-start:clamp(2.6rem,4.5vw,4.2rem);
}
.ir-galeria:not(.ir-galeria--portada) .et_pb_row,
.ir-galeria:not(.ir-galeria--portada) .et_pb_column{ display:contents; }
/* Y sus pseudoelementos, fuera.
   DIVI le cuelga a cada fila un `::after` con `content:""` para limpiar
   flotantes. Con la fila en `display:contents` esa caja invisible deja de ser
   hija de la fila y pasa a ser una pieza más de la rejilla: ocupa una celda,
   no se ve, y parte el muro. En escritorio no se notaba porque cada fotografía
   va colocada a mano y las celdas fantasma caían en los huecos sobrantes; en
   el teléfono, donde las piezas fluyen solas, dejaba una fila a medias por
   cada fila de DIVI. */
.ir-galeria:not(.ir-galeria--portada) .et_pb_row::before,
.ir-galeria:not(.ir-galeria--portada) .et_pb_row::after,
.ir-galeria:not(.ir-galeria--portada) .et_pb_column::before,
.ir-galeria:not(.ir-galeria--portada) .et_pb_column::after{ display:none !important; }

.ir-divi .ir-galeria .et_pb_image{
  position:relative; overflow:hidden; margin:0; padding:0;
  border-radius:20px; background:var(--marino);
  height:100%; cursor:zoom-in; isolation:isolate;
  grid-column:span 1; grid-row:span 1;
}
/* Las piezas grandes, repartidas por el guion según la forma real de cada
   fotografía: la vertical va alta, las muy apaisadas van anchas. */
.ir-divi .ir-galeria .et_pb_image.ir-p2x2{ grid-column:span 2; grid-row:span 2; }
.ir-divi .ir-galeria .et_pb_image.ir-p2x1{ grid-column:span 2; grid-row:span 1; }
.ir-divi .ir-galeria .et_pb_image.ir-p1x2{ grid-column:span 1; grid-row:span 2; }

.ir-divi .ir-galeria .et_pb_image .et_pb_image_wrap{ display:block; width:100%; height:100%; }
.ir-divi .ir-galeria .et_pb_image img{
  display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:auto;
  filter:saturate(.86);
  transition:transform .8s cubic-bezier(.22,.61,.36,1), filter .5s ease, opacity .55s ease;
}

/* El velo marino con el título. Va centrado en la pieza, no al pie: al pie
   competía con el borde redondeado y se leía como una barra pegada. */
.ir-divi .ir-galeria .et_pb_image::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(200deg, rgba(20,27,77,.94), rgba(20,27,77,.84));
  opacity:0; transition:opacity .55s ease; pointer-events:none;
}
.ir-galeria__pie{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  margin:0; padding:1.4rem; text-align:center;
  font-family:var(--v2-display); font-size:clamp(.98rem,1.5vw,1.5rem);
  font-weight:600; line-height:1.2; letter-spacing:-.015em; color:#fff;
  opacity:0; transform:scale(.94);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  pointer-events:none; text-wrap:balance;
}
.ir-divi .ir-galeria .et_pb_image:hover::after,
.ir-divi .ir-galeria .et_pb_image.ir-vuelta::after{ opacity:1; }
.ir-divi .ir-galeria .et_pb_image:hover .ir-galeria__pie,
.ir-divi .ir-galeria .et_pb_image.ir-vuelta .ir-galeria__pie{ opacity:1; transform:none; }
.ir-divi .ir-galeria .et_pb_image:hover img{ transform:scale(1.05); filter:saturate(1.1); }
.ir-divi .ir-galeria .et_pb_image.ir-vuelta img{ transform:scale(1.03); opacity:.3; }
.ir-divi .ir-galeria .et_pb_image:focus-visible{ outline:3px solid var(--amarillo); outline-offset:3px; }
/* El muro empieza recortado en un corte limpio de la retícula, y el resto se
   descubre con el botón. Con quince fotografías ya es una página larga; con
   cuarenta, que es a donde va, sería impracticable. */
.ir-divi .ir-galeria .et_pb_image[hidden]{ display:none !important; }
.ir-galeria__mas{
  display:flex; justify-content:center;
  max-width:min(calc(var(--ancho) - 3rem), calc(100% - 3rem));
  margin:1.6rem auto 0;
}
.ir-galeria__mas button{
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  font-family:var(--v2-sans); font-weight:600; font-size:.95rem; color:var(--marino);
  background:#fff; border:1px solid var(--v2-linea,rgba(20,27,77,.2));
  border-radius:999px; padding:.8rem 1.5rem;
  transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.ir-galeria__mas button::after{
  content:""; width:.6rem; height:.6rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
}
.ir-galeria__mas button:hover{
  border-color:var(--marino); transform:translateY(-2px);
  box-shadow:var(--v2-sombra,0 14px 30px rgba(20,27,77,.1));
}
.ir-galeria__mas button:focus-visible{ outline:2px solid var(--marino); outline-offset:3px; }

/* ---------- los vídeos del archivo visual ---------- */
/* No se incrusta el reproductor hasta que alguien lo pide: hasta entonces, lo
   que hay es una carátula y un botón de play nuestro. */
.ir-videos{
  max-width:min(calc(var(--ancho) - 3rem), calc(100% - 3rem));
  margin:clamp(3rem,6vw,5rem) auto 0;
}
.ir-videos__titulo{ font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 1.4rem; }
.ir-videos__grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));
}
.ir-video-ficha__tapa{
  position:relative; display:block; overflow:hidden; aspect-ratio:16/9;
  border-radius:var(--v2-r-card,14px); background:var(--marino);
  text-decoration:none;
}
.ir-video-ficha__tapa img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.9); transition:transform .6s cubic-bezier(.22,.61,.36,1), filter .4s ease;
}
.ir-video-ficha__play{
  position:absolute; inset:0; margin:auto; width:3.6rem; height:3.6rem;
  border-radius:50%; background:rgba(20,27,77,.82); border:2px solid rgba(255,255,255,.9);
  transition:transform .25s cubic-bezier(.22,.61,.36,1), background-color .25s ease;
}
.ir-video-ficha__play::after{
  content:""; position:absolute; inset:0; margin:auto; width:0; height:0;
  border-left:1.05rem solid #fff; border-top:.62rem solid transparent; border-bottom:.62rem solid transparent;
  transform:translateX(.18rem);
}
.ir-video-ficha__tapa:hover img{ transform:scale(1.04); filter:saturate(1.05); }
.ir-video-ficha__tapa:hover .ir-video-ficha__play{ transform:scale(1.08); background:var(--marino); }
.ir-video-ficha__tapa:focus-visible{ outline:3px solid var(--amarillo); outline-offset:3px; }
.ir-video-ficha iframe{
  width:100%; aspect-ratio:16/9; border:0; display:block;
  border-radius:var(--v2-r-card,14px); background:#000;
}
.ir-video-ficha__datos h3{ font-size:1.05rem; line-height:1.3; margin:.9rem 0 .2rem; }
.ir-video-ficha__resumen{ font-size:.88rem; margin:0; color:var(--suave,#4A5170); }
.ir-video-ficha__pie{ font-size:.76rem; margin:.35rem 0 0; color:var(--tenue,#606783); }
@media (prefers-reduced-motion:reduce){
  .ir-galeria__mas button:hover, .ir-video-ficha__tapa:hover img, .ir-video-ficha__tapa:hover .ir-video-ficha__play{ transform:none; }
}

@media (max-width:900px){
  /* Dos columnas y todas las piezas cuadradas. Aquí no se declaran filas ni
     proporción del contenedor: con quince piezas iguales la rejilla se acomoda
     sola y la última fila queda a medias, que es lo esperable. */
  .ir-galeria:not(.ir-galeria--portada){
    grid-template-columns:repeat(2,1fr); grid-template-rows:none;
    /* `auto` y no `1fr`: al recortar el muro sobran filas, y con `1fr` cada
       sobrante se quedaba con el alto de una fotografía entera. Dejaba un
       agujero de trescientos píxeles entre la última imagen y el botón. */
    aspect-ratio:auto; grid-auto-rows:auto; gap:8px;
  }
  .ir-divi .ir-galeria .et_pb_image{ border-radius:14px; aspect-ratio:1/1; height:auto; }
  .ir-divi .ir-galeria .et_pb_image.ir-ancha-movil{ grid-column:span 2; aspect-ratio:2/1; }
  .ir-divi .ir-galeria .et_pb_image.ir-p2x2,
  .ir-divi .ir-galeria .et_pb_image.ir-p2x1,
  .ir-divi .ir-galeria .et_pb_image.ir-p1x2{ grid-column:span 1; grid-row:span 1; }
}

/* ---------- la franja del archivo visual en la portada ---------- */
/* Seis piezas en bento: dos apaisadas de doble ancho y cuatro sueltas sobre una
   rejilla de cuatro por dos. Las ocho casillas quedan cubiertas, así que no hay
   hueco posible. Las posiciones van aquí y no en el guion porque son seis fijas
   y no cambian con el contenido. */
.ir-galeria--portada{ padding-bottom:0 !important; }
.ir-divi .ir-galeria--portada .et_pb_row.ir-cab-fila{
  display:flex; max-width:var(--ancho); margin-inline:auto; margin-bottom:1.6rem;
}
.ir-divi .ir-galeria__fila--portada{
  display:grid !important;
  grid-template-columns:repeat(4,1fr);
  /* Las dos filas se declaran, no se dejan crecer solas: con `grid-auto-rows`
     el navegador reservaba una tercera pista vacía y el bento arrastraba 274px
     muertos debajo. Y el relleno de fila de DIVI se anula, que añadía otros 88. */
  grid-template-rows:repeat(2,clamp(150px,19vw,290px));
  gap:12px; padding:0 !important;
  width:100%; max-width:min(calc(var(--ancho) - 3rem), calc(100% - 3rem)); margin-inline:auto;
}
.ir-divi .ir-galeria__fila--portada .et_pb_column{
  display:block !important; float:none !important; width:auto !important; margin:0 !important;
  min-width:0; height:100%;
}
.ir-divi .ir-galeria__fila--portada .et_pb_column:nth-child(1){ grid-area:1/1/2/3; }
.ir-divi .ir-galeria__fila--portada .et_pb_column:nth-child(2){ grid-area:1/3/2/4; }
.ir-divi .ir-galeria__fila--portada .et_pb_column:nth-child(3){ grid-area:1/4/2/5; }
.ir-divi .ir-galeria__fila--portada .et_pb_column:nth-child(4){ grid-area:2/1/3/2; }
.ir-divi .ir-galeria__fila--portada .et_pb_column:nth-child(5){ grid-area:2/2/3/3; }
.ir-divi .ir-galeria__fila--portada .et_pb_column:nth-child(6){ grid-area:2/3/3/5; }
.ir-divi .ir-galeria--portada .et_pb_image{ height:100%; }

@media (max-width:700px){
  /* Dos columnas y todas iguales: en el teléfono una pieza de doble ancho
     ocuparía la fila entera y el bento dejaría de leerse como tal. */
  .ir-divi .ir-galeria__fila--portada{
    grid-template-columns:repeat(2,1fr); grid-template-rows:none;
    aspect-ratio:auto; grid-auto-rows:1fr; gap:8px;
  }
  .ir-divi .ir-galeria__fila--portada .et_pb_column{ grid-area:auto !important; aspect-ratio:1/1; }
}

@media (prefers-reduced-motion:reduce){
  .ir-divi .ir-galeria .et_pb_image img{ transition:none; transform:none !important; }
  .ir-galeria__pie{ transition:none; }
}

/* ---------- visor de fotografías ---------- */
/* El fondo lo pone la propia fotografía, ampliada y desenfocada.
 *
 * Un velo plano deja la imagen flotando en negro y todas se ven igual. Con la
 * misma fotografía detrás, muy ampliada y fuera de foco, cada una trae su
 * propia luz: la sala verde del acto de inauguración tiñe la pantalla de verde
 * y la del congreso al aire libre, de azul. El desenfoque es lo bastante fuerte
 * como para que no compita con la imagen nítida ni distraiga del pie.
 */
.ir-visor{
  position:fixed; inset:0; z-index:9000; display:none;
  background:#080B1C; isolation:isolate;
}
.ir-visor.abierto{ display:grid; grid-template-rows:1fr auto; }
body.ir-visor-abierto{ overflow:hidden; }

.ir-visor__ambiente{
  position:absolute; inset:0; z-index:-1; overflow:hidden;
  pointer-events:none;
}
.ir-visor__ambiente img{
  position:absolute; inset:-12%;
  width:124%; height:124%; object-fit:cover;
  filter:blur(52px) saturate(1.5) brightness(.62);
  transform:scale(1.08);
  transition:opacity .6s ease;
}
/* Una capa de marino por encima del desenfoque: sin ella, una fotografía muy
   clara deja el texto del pie ilegible. */
.ir-visor__ambiente::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,11,28,.62), rgba(8,11,28,.86));
}

.ir-visor__lienzo{
  position:relative; display:grid; place-items:center;
  padding:clamp(1rem,4vw,3.5rem); min-height:0;
  touch-action:pan-y pinch-zoom;
}
.ir-visor__img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; border-radius:10px;
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  transition:opacity .3s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.ir-visor__img.ir-cambiando{ opacity:0; transform:scale(.97); }

.ir-visor__pie{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem;
  padding:0 clamp(1rem,4vw,3.5rem) clamp(1.3rem,3vw,2.4rem);
  color:#E6EAF6; font-family:var(--v2-sans); font-size:.92rem; line-height:1.5;
}
.ir-visor__texto{ max-width:62ch; margin:0; text-wrap:pretty; }
.ir-visor__cuenta{
  font-variant-numeric:tabular-nums; color:#96A0C0; white-space:nowrap;
  font-size:.82rem; letter-spacing:.06em;
}

.ir-visor button{
  appearance:none; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:#fff; width:50px; height:50px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; padding:0;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.ir-visor button:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.42); transform:scale(1.06); }
.ir-visor button:focus-visible{ outline:3px solid var(--amarillo); outline-offset:3px; }
.ir-visor button svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.ir-visor__cerrar{ position:absolute; top:clamp(.8rem,2vw,1.5rem); right:clamp(.8rem,2vw,1.5rem); z-index:2; }
.ir-visor__ant, .ir-visor__sig{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; }
.ir-visor__ant{ left:clamp(.5rem,2vw,1.8rem); }
.ir-visor__sig{ right:clamp(.5rem,2vw,1.8rem); }
.ir-visor__ant:hover, .ir-visor__sig:hover{ transform:translateY(-50%) scale(1.06); }

.ir-divi .ir-galeria .et_pb_image{ cursor:zoom-in; }

@media (max-width:640px){
  .ir-visor button{ width:44px; height:44px; }
  .ir-visor__pie{ flex-direction:column; align-items:flex-start; gap:.35rem; font-size:.84rem; }
  .ir-visor__ant, .ir-visor__sig{ opacity:.6; }
  .ir-visor__ambiente img{ filter:blur(34px) saturate(1.5) brightness(.62); }
}

@media (prefers-reduced-motion:reduce){
  .ir-visor__img{ transition:opacity .1s linear; }
  .ir-visor__img.ir-cambiando{ transform:none; }
  .ir-visor button:hover{ transform:none; }
  .ir-visor__ant:hover, .ir-visor__sig:hover{ transform:translateY(-50%); }
}


/* ---------- hero a dos columnas ---------- */
/* El vídeo del panel fundacional vive ahora aquí, a la derecha del titular.
   Antes tenía media sección propia junto a la agenda y los dos títulos se
   leían como uno solo. */
.ir-divi .ir-hero-fila{ align-items:center; }
.ir-divi .ir-hero-fila .et_pb_column{ display:flex; flex-direction:column; justify-content:center; }
.ir-divi .ir-hero-fila .ir-video,
.ir-divi .ir-hero-fila .et_pb_code{ width:100%; }
.ir-divi .ir-hero-fila .ir-video{
  border-radius:var(--v2-r-card);
  box-shadow:0 34px 64px -32px rgba(20,27,77,.55), 0 10px 24px -14px rgba(20,27,77,.30);
}
.ir-divi .ir-hero-fila iframe,
.ir-divi .ir-hero-fila .ir-video iframe{
  width:100%; aspect-ratio:16/9; height:auto; border-radius:var(--v2-r-card);
}
.ir-eyebrow--claro{ margin-bottom:.8rem; }
.ir-divi .ir-hero-fila .ir-pie{
  margin:1rem 0 0; font-family:var(--v2-sans); font-size:.86rem;
  color:var(--muted, #5A6178); font-weight:600; text-align:center;
}
/* En el teléfono la fila se deshace y sus cinco piezas se ordenan en vertical:
   titular, vídeo, leyenda y botón. Dos columnas de ciento cuarenta píxeles no
   se leen, y el vídeo puesto al final quedaba a un palmo del botón sin que
   nadie lo viera. El orden lo decide `order` sobre las piezas, no el marcado:
   en el escritorio siguen siendo dos columnas y el HTML es el mismo.

   Las columnas pasan a `display:contents`, que las borra como cajas y sube sus
   hijos a la fila. Es lo que permite intercalar el vídeo —que vive en la
   segunda columna— entre el texto y el botón, que viven en la primera.

   La regla lleva la sección delante a propósito: sin ella pierde contra la que
   ordena la fila en el escritorio, y el titular se quedaba en dos columnas
   estrechas también en el móvil. */
@media (max-width:980px){
  .ir-divi .ir-hero-seccion > .et_pb_row.ir-hero-fila{
    display:flex; flex-direction:column; align-items:stretch;
  }
  .ir-divi .ir-hero-fila > .et_pb_column{
    display:contents; width:auto !important; margin:0 !important;
  }
  .ir-divi .ir-hero-fila > .et_pb_column:first-child > .et_pb_code{ order:0; }
  .ir-divi .ir-hero-fila > .et_pb_column:first-child > .et_pb_text{ order:1; }
  .ir-divi .ir-hero-fila > .et_pb_column:last-child  > .et_pb_code{ order:2; margin-top:1.8rem; }
  .ir-divi .ir-hero-fila > .et_pb_column:last-child  > .et_pb_text{ order:3; }
  .ir-divi .ir-hero-fila > .et_pb_column:first-child > .et_pb_button_module_wrapper{
    order:4; margin-top:1.8rem;
  }
}

/* ---------- La InterRed: presentación y ejes ---------- */
.ir-seccion-interred{ background:var(--v2-crema, #FAF8F5); }  /* por defecto; la portada lo fija desde DIVI */
.ir-divi .ir-presentacion{ align-items:center; }
.ir-divi .ir-presentacion .et_pb_image{
  margin:0; overflow:hidden; border-radius:var(--v2-r-grande);
  aspect-ratio:4/3; background:var(--marino);
}
.ir-divi .ir-presentacion .et_pb_image img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.9); transition:transform .9s cubic-bezier(.22,.61,.36,1);
}
.ir-divi .ir-presentacion .et_pb_image:hover img{ transform:scale(1.04); }
@media (max-width:980px){
  .ir-divi .ir-presentacion{ display:block; }
  .ir-divi .ir-presentacion .et_pb_column{ width:100% !important; margin:0 0 2rem !important; }
  .ir-divi .ir-presentacion .et_pb_column:last-child{ margin-bottom:0 !important; }
}

/* ---------- la presentación cuando no lleva fotografía ----------
   La coordinación retiró la imagen de esta sección en la portada. Sin ella, la
   fila quedaba con una sola columna a todo el ancho: el párrafo se estiraba a
   ciento cincuenta caracteres por línea, que es el doble de lo que se lee
   cómodo, y debajo se abría el hueco que antes ocupaba la foto.

   El bloque pasa entonces a leerse en dos columnas de texto, que es lo que hace
   un diario con una entradilla: el rótulo y el titular a la izquierda, el
   párrafo a la derecha a la altura del titular, y el botón debajo. Se llena el
   ancho sin inventar nada y el aire vertical vuelve al ritmo de la página.

   La clase la pone interred-v2.js cuando la fila no tiene imagen, de modo que
   el día que se vuelva a poner una fotografía todo regresa solo a la
   disposición de texto e imagen. */
.ir-divi .ir-presentacion--sin-foto{ padding-block:4.6rem 3.4rem; }
.ir-divi .ir-presentacion--sin-foto .et_pb_text_inner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  column-gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.ir-divi .ir-presentacion--sin-foto .et_pb_text_inner > .ir-eyebrow{
  grid-column:1; grid-row:1; justify-self:start;
}
.ir-divi .ir-presentacion--sin-foto .et_pb_text_inner > h2{
  grid-column:1; grid-row:2; margin:0;
  font-size:clamp(2.3rem,4.2vw,3.1rem);
}
.ir-divi .ir-presentacion--sin-foto .et_pb_text_inner > p:not(.ir-eyebrow){
  grid-column:2; grid-row:2; margin:0 0 1rem;
  font-size:1.06rem; line-height:1.64;
}
/* En el teléfono no hay dos columnas que valgan: se lee en una. */
@media (max-width:900px){
  .ir-divi .ir-presentacion--sin-foto{ padding-block:3.4rem 2.6rem; }
  .ir-divi .ir-presentacion--sin-foto .et_pb_text_inner{ display:block; }
  .ir-divi .ir-presentacion--sin-foto .et_pb_text_inner > h2{ margin:0 0 .8rem; }
}

/* Los cuatro ejes. Numerados porque son una secuencia declarada por la Red,
   no cuatro ideas sueltas: el número dice que hay un orden y cuántos son. */
.ir-divi .ir-ejes{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.ir-divi .ir-ejes .et_pb_column{
  width:auto !important; margin:0 !important; float:none !important; min-width:0;
  background:#fff; border:1px solid var(--v2-linea, #E4E7EF);
  border-radius:var(--v2-r-card); padding:1.5rem 1.35rem;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.ir-divi .ir-ejes .et_pb_column:hover{ transform:translateY(-4px); box-shadow:var(--v2-sombra-alta); }
.ir-divi .ir-ejes .et_pb_text{ margin:0; }
.ir-eje__n{
  margin:0 0 .9rem; font-family:var(--v2-display); font-size:1.5rem; font-weight:700;
  line-height:1; color:var(--amarillo); font-variant-numeric:tabular-nums;
}
.ir-divi .ir-ejes h3{
  margin:0 0 .5rem; font-family:var(--v2-display); font-size:1.08rem; font-weight:700;
  line-height:1.25; letter-spacing:-.015em; color:var(--marino);
}
.ir-divi .ir-ejes p:not(.ir-eje__n){ margin:0; font-size:.92rem; line-height:1.55; color:var(--ink-2, #3D4460); }

@media (max-width:900px){ .ir-divi .ir-ejes{ grid-template-columns:repeat(2,1fr); gap:.8rem; } }
@media (max-width:520px){ .ir-divi .ir-ejes{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion:reduce){
  .ir-divi .ir-ejes .et_pb_column:hover{ transform:none; }
  .ir-divi .ir-presentacion .et_pb_image:hover img{ transform:none; }
}


/* ============================================================
   LAS SECCIONES DE LA PORTADA SE APILAN
   ============================================================
   Dos problemas de una vez. El primero, que de la mitad de la pagina hacia
   abajo todas las secciones compartian el mismo blanco: la vista no tenia
   donde agarrarse y las nueve se leian como una lista larga, sin saber donde
   terminaba una y empezaba la siguiente. El segundo, que los cortes entre
   ellas eran rectos de borde a borde, que es el corte de una plantilla.

   La solucion es la del pie, extendida a toda la pagina: cada seccion lleva
   su propio fondo, alterna con la anterior, se curva por arriba y se queda
   quieta mientras la siguiente sube y se apoya encima. La sombra corta del
   canto superior es la que hace creer que hay dos planos y no uno.

   El color de cada una va en el atributo de fondo de DIVI, no aqui: quien
   edite lo ve en el constructor y lo puede cambiar. */
/* La curva la lleva TODA sección: es la articulación, lo que hace ver dónde
   termina una y empieza la siguiente. */
.ir-divi--portada .et_builder_inner_content > .et_pb_section{
  border-radius:var(--v2-r-grande) var(--v2-r-grande) 0 0;
}
/* La sombra, en cambio, solo la que se sube encima de otra. Es el canto de la
   pieza que llega, y una pieza que se queda quieta no proyecta sobre nadie: en
   las fijas se veía como una franja gris colgada de la nada. Son las cuatro
   que siguen a una sección fija, ni una más. */
.ir-divi--portada .et_builder_inner_content > .et_pb_section.ir-apila + .et_pb_section{
  box-shadow:0 -26px 52px -30px rgba(20,27,77,.40);
}
/* Apilarse, en cambio, solo cuatro. Con las nueve el gesto dejaba de ser un
   gesto: pasaba en cada pantalla y se volvía el ruido de fondo de la página.
   Se reserva para los cuatro cambios de capítulo, que es donde significa algo:
   del titular a la Red, de quiénes la forman a qué produce, de lo que produce
   al archivo de fotografías, y del archivo a las noticias. */
.ir-divi--portada .et_builder_inner_content > .et_pb_section.ir-apila{
  position:sticky; top:0;
}
/* El titular no se curva ni proyecta: es el suelo de la pila, no una pieza
   apoyada sobre nada. */
.ir-divi--portada .et_builder_inner_content > .et_pb_section:first-child{
  border-radius:0; box-shadow:none;
}

/* ---------- el canto de cada sección, del color de la de arriba ----------
   Las esquinas superiores van recortadas, y por ese recorte se veía lo que
   hubiera detrás. En la portada, donde las secciones se apilan y las fijas
   quedan pegadas arriba, lo que asomaba era el marino del titular: dos picos
   oscuros en mitad de un cambio de blanco a gris, que es justo lo que no debe
   pasar en una junta.

   Cada sección pinta ahora una franja de su propio color justo por debajo de
   su borde inferior. La sección siguiente la tapa entera salvo en las esquinas
   recortadas, que es donde se necesita: ahí se ve el color de la de arriba y la
   junta se lee limpia. El color lo escribe interred-v2.js en --ir-fondo, porque
   lo define DIVI sección por sección y una hoja de estilos no puede leer el
   color de un hermano. Sin guion no hay franja y todo queda como estaba. */
.ir-divi .et_builder_inner_content > .et_pb_section{ position:relative; }
.ir-divi .et_builder_inner_content > .et_pb_section::after{
  content:""; position:absolute; left:0; right:0;
  bottom:calc(var(--v2-r-grande) * -1); height:var(--v2-r-grande);
  background:var(--ir-fondo, transparent); pointer-events:none;
}
@media (max-width:900px){
  .ir-divi .et_builder_inner_content > .et_pb_section::after{
    bottom:calc(var(--v2-r-card) * -1); height:var(--v2-r-card);
  }
}

@media (max-width:900px){
  .ir-divi--portada .et_builder_inner_content > .et_pb_section{
    border-radius:var(--v2-r-card) var(--v2-r-card) 0 0;
  }
}

/* Quien pide menos movimiento recibe la pagina en orden, sin apilar. Las
   esquinas y los fondos se quedan: eso no es movimiento, es articulacion. */
@media (prefers-reduced-motion:reduce){
  .ir-divi--portada .et_builder_inner_content > .et_pb_section.ir-apila{
    position:static;
  }
}

/* ---------- el muro de fotografias, sobre marino ---------- */
/* Es la unica seccion oscura de la pagina y esta puesta a proposito: rompe la
   sucesion de fondos claros justo antes de las noticias, y una fotografia se
   lee mejor sobre oscuro que sobre blanco. El texto se invierte entero, que
   si no queda marino sobre marino. */
.ir-divi .ir-galeria--portada h2,
.ir-divi .ir-galeria--portada .ir-cab-fila p{ color:#fff; }
.ir-divi .ir-galeria--portada .ir-eyebrow{ color:var(--amarillo,#FED141); }
.ir-divi .ir-galeria--portada .ir-eyebrow::before{ background:var(--amarillo,#FED141); }
.ir-divi .ir-galeria--portada .et_pb_button,
.ir-divi .ir-galeria--portada .et_pb_button:hover{
  background:#fff; border-color:#fff;
}
/* El color va forzado y alcanza también al pseudoelemento: DIVI escribe el
   suyo con `!important` por módulo, y sin esto el rótulo quedaba blanco sobre
   blanco. La pastilla se veía; lo que decía, no. */
.ir-divi .ir-galeria--portada .et_pb_button,
.ir-divi .ir-galeria--portada .et_pb_button::after,
.ir-divi .ir-galeria--portada .et_pb_button:hover,
.ir-divi .ir-galeria--portada .et_pb_button:hover::after{
  color:var(--marino) !important;
}

/* La ficha de la coordinación, con la columna ya ancha, estiraba su párrafo a
   ciento doce caracteres por línea: al saltar de renglón el ojo se perdía.
   Se le pone medida de lectura; el resto de la prosa ya la tenía. */
.ir-divi .ir-coordinacion p{ max-width:62ch; }

/* El dato que falta se ve, pero no compite: gris y en cursiva, para que la
   ficha se lea entera y el hueco quede señalado sin gritar. */
.ir-datos .ir-dato--falta{ color:var(--tenue,#606783); font-style:italic; }
.ir-footer__contacto address, address.ir-footer__contacto{ font-style:normal; }

/* ---------- filtros que actúan en la propia página ---------- */
/* El término elegido se rellena en marino: es el estado de un interruptor, y
   un borde más marcado no basta para verlo de un vistazo entre veinte. */
.ir-filtros a.es-activo{
  background:var(--marino) !important; color:#fff !important;
  border-color:var(--marino) !important;
}
.ir-filtros a.es-activo span{ color:rgba(255,255,255,.72) !important; }
.ir-filtros__estado{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  margin:1rem 0 0; font-size:.86rem; color:var(--tenue,#606783);
}
.ir-filtros__limpiar{
  border:1px solid var(--v2-linea); background:#fff; color:var(--marino);
  border-radius:var(--v2-r-control); padding:.42rem 1rem;
  font-family:var(--v2-sans); font-weight:600; font-size:.82rem; cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.ir-filtros__limpiar:hover{ background:var(--marino); color:#fff; }
.ir-filtros__nada{ margin-top:1.4rem; }
/* La línea de estado solo tiene sentido con algo elegido. El guion la
   esconde con `hidden`, pero la regla de arriba le da `display:flex` y eso le
   gana al atributo: «22 resultados · Quitar filtros» salía siempre, también
   sin ningún filtro que quitar. */
.ir-filtros__estado[hidden]{ display:none !important; }

/* ---------- filtros plegados ---------- */
/* Con veintidós integrantes, los cuatro grupos abiertos ocupaban más de media
   pantalla antes de la primera ficha: las quince instituciones en pastillas
   eran cuatro renglones por sí solas. Plegados, cada grupo es un botón en una
   sola fila y su lista se despliega debajo al pulsarlo, de a uno por vez. Lo
   elegido no se pierde de vista: el botón lleva la cuenta en rojo.

   Todo esto lo enciende el guion con la clase --plegable. Sin guion no aplica
   y los grupos siguen abiertos, con su rótulo, como antes. */
.ir-filtros--plegable{ display:block; }
.ir-filtros__barra{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; }
.ir-filtros__rotulo{
  font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tenue,#606783); margin-right:.4rem;
}
.ir-filtros__boton{
  display:inline-flex; align-items:center; gap:.5rem;
  font:inherit; font-size:.88rem; font-weight:600; line-height:1.1; color:var(--marino);
  background:#fff; border:1px solid var(--v2-linea, rgba(20,27,77,.14));
  border-radius:999px; padding:.62rem .85rem .62rem 1.05rem; cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}
.ir-filtros__boton:hover{ border-color:rgba(20,27,77,.42); }
.ir-filtros__boton:focus-visible{ outline:2px solid var(--marino); outline-offset:2px; }
.ir-filtros__boton[aria-expanded="true"]{ background:var(--marino); border-color:var(--marino); color:#fff; }
.ir-filtros__boton svg{ width:.72rem; height:.72rem; flex:0 0 auto; transition:transform .2s ease; }
.ir-filtros__boton[aria-expanded="true"] svg{ transform:rotate(180deg); }
/* La cuenta de lo elegido va en rojo, y no en marino, para que se lea también
   sobre el botón abierto, que es marino. */
.ir-filtros__marca{
  display:inline-grid; place-items:center; min-width:1.35rem; height:1.35rem; padding:0 .38rem;
  border-radius:999px; background:var(--rojo,#D7292E); color:#fff;
  font-size:.72rem; font-weight:700; line-height:1;
}
.ir-filtros__marca[hidden]{ display:none !important; }

/* El panel abierto: la lista del grupo, en una caja propia bajo la fila. Su
   rótulo sobra, porque ya lo dice el botón que la abrió. */
.ir-filtros--plegable .ir-filtros__etiqueta{ display:none; }
.ir-filtros--plegable .ir-filtros__grupo{
  margin-top:.9rem; padding:1.05rem 1.15rem;
  background:#fff; border:1px solid var(--v2-linea, rgba(20,27,77,.14));
  border-radius:var(--v2-r-card, 14px);
  animation:ir-filtro-abre .2s ease both;
}
.ir-filtros--plegable .ir-filtros__grupo[hidden]{ display:none !important; }
/* Solo desplaza, no funde. Si la animación no avanza —una pestaña en segundo
   plano, una extensión que congela animaciones—, un fundido que arranca en
   cero deja la lista invisible; un desplazamiento de cuatro píxeles no. */
@keyframes ir-filtro-abre{ from{ transform:translateY(-6px); } to{ transform:none; } }
@media (prefers-reduced-motion:reduce){
  .ir-filtros--plegable .ir-filtros__grupo{ animation:none; }
  .ir-filtros__boton svg{ transition:none; }
}
@media (max-width:600px){
  .ir-filtros__rotulo{ flex-basis:100%; margin:0 0 .15rem; }
  .ir-filtros__boton{ font-size:.84rem; padding:.58rem .78rem .58rem .95rem; }
}

/* ---------- ficha de publicación ---------- */
/* El acceso abierto es un distintivo, no una línea más de la ficha: quien
   busca una lectura quiere saber antes que nada si puede leerla. */
.ir-abierto{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#ECEDE1; color:#3C4A2A; border:1px solid rgba(60,74,42,.16);
  border-radius:999px; padding:.34rem .9rem; margin:0 0 1.4rem;
  font-family:var(--v2-sans); font-weight:700; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase;
}
.ir-abierto::before{ content:""; width:.45rem; height:.45rem; border-radius:50%; background:#5E7A38; }

/* La cita, en un bloque aparte y con el filete a la izquierda: se reconoce
   como algo para copiar y no como un párrafo más del resumen. */
.ir-cita{
  margin-top:2.4rem; padding:1.3rem 1.5rem;
  background:var(--v2-crema,#FAF8F5); border-left:3px solid var(--azul,#005D9A);
  border-radius:0 var(--v2-r-card) var(--v2-r-card) 0;
}
.ir-cita h2{
  font-family:var(--v2-sans); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tenue,#606783);
  margin:0 0 .6rem;
}
.ir-cita p{ margin:0; font-size:.94rem; line-height:1.6; color:var(--suave,#4A5170); }

/* ---------- tarjetas de las secciones nuevas ---------- */
/* Convocatorias y redes asociadas comparten forma: dos por fila, con su
   enlace abajo y alineadas por la base aunque sus textos midan distinto. */
.ir-divi .ir-tarjetas-word{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; }
.ir-divi .ir-tarjetas-word .et_pb_column{
  width:auto !important; margin:0 !important; float:none !important; min-width:0;
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--v2-linea,#E4E7EF);
  border-radius:var(--v2-r-card); padding:1.6rem 1.5rem;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.ir-divi .ir-tarjetas-word .et_pb_column:hover{ transform:translateY(-4px); box-shadow:var(--v2-sombra-alta); }
.ir-divi .ir-tarjetas-word h3{ font-size:1.18rem; line-height:1.25; margin:.2rem 0 .6rem; }
.ir-divi .ir-tarjetas-word p{ margin:0; color:var(--suave,#4A5170); font-size:.95rem; }
.ir-divi .ir-tarjetas-word .et_pb_button_module_wrapper{ margin-top:auto; padding-top:1.2rem; }
@media (max-width:760px){
  .ir-divi .ir-tarjetas-word{ grid-template-columns:1fr; }
}

/* ---------- barra lateral de la ficha ---------- */
/* Se salía de la caja. Un ORCID o una dirección de Lattes no tienen espacios,
   así que el navegador no encuentra dónde partirlos y los saca del contenedor;
   la columna mide dieciséis rem y la dirección, más. Se arregla en dos frentes:
   el guion enseña solo el identificador o el dominio, y aquí se autoriza a
   partir por donde sea cualquier cosa que aun así no quepa. */
.ir-ficha__lado{ min-width:0; }
.ir-divi .ir-datos, .ir-ficha__lado .ir-datos{
  background:var(--v2-crema,#FAF8F5);
  border:1px solid var(--v2-linea,#E4E7EF);
  border-radius:var(--v2-r-card); padding:1.3rem 1.35rem;
}
.ir-ficha__lado .ir-datos dt{ margin-bottom:.2rem; }
.ir-ficha__lado .ir-datos dd{
  margin:0 0 1rem; overflow-wrap:anywhere; word-break:break-word; hyphens:none;
}
.ir-ficha__lado .ir-datos dd:last-child{ margin-bottom:0; }
/* El rótulo y la flecha viajan juntos: partido, el enlace dejaba la flecha
   sola en el renglón de abajo, que se leía como una viñeta suelta. */
.ir-ficha__lado .ir-datos a{ text-decoration:none; }
.ir-ficha__lado .ir-datos a:hover .ir-dato__txt{ text-decoration:underline; }
.ir-dato__flecha{ display:inline-block; margin-left:.28rem; font-size:.82em; }
.ir-ficha__lado .ir-btn--cv{ width:100%; justify-content:center; margin:0; }

/* La columna crece un poco: dieciséis rem dejaban «República Dominicana» en dos
   renglones y la caja parecía siempre a punto de reventar. */
@media (min-width:1000px){
  .ir-ficha__grid{ grid-template-columns:19rem minmax(0,1fr) !important; }
}
@media (max-width:600px){
  /* En vertical el retrato manda y los datos van debajo, a ancho completo: la
     foto encogida a la izquierda con la ficha al lado no se lee en un teléfono. */
  .ir-ficha__foto{ max-width:11rem; }
  .ir-ficha__lado .ir-datos{ padding:1.1rem 1.15rem; }
}

/* El retrato es hijo de la rejilla, no del aside: así el teléfono puede poner
   la foto arriba, el nombre y la reseña después, y los datos al final. Antes
   la ficha abría con ocho renglones de metadatos y el nombre aparecía abajo. */
.ir-ficha__grid{
  grid-template-areas:"foto cuerpo" "datos cuerpo";
  grid-template-rows:auto 1fr;
}
.ir-ficha__retrato{ grid-area:foto; min-width:0; }
.ir-ficha__lado{ grid-area:datos; }
.ir-ficha__cuerpo{ grid-area:cuerpo; min-width:0; }
@media (max-width:600px){
  .ir-ficha__grid{
    grid-template-columns:1fr !important;
    grid-template-areas:"foto" "cuerpo" "datos";
    grid-template-rows:auto auto auto;
    gap:1.6rem;
  }
}

/* Esconder de verdad. `[hidden]` no basta: las tarjetas declaran su propio
   `display` y le ganan a la regla del navegador. */
.ir-oculto{ display:none !important; }

/* El aviso de «se abre en otra ventana» es para el lector de pantalla, no para
   la vista: se saca del flujo sin usar display:none, que lo silenciaría. */
.ir-fuera{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.ir-pais--sin-web{ display:block; }

/* ---------- franja de logotipos en desfile ---------- */
/* La pista lleva el grupo dos veces y se desplaza exactamente la mitad: al
   completar la vuelta, la segunda copia ocupa el sitio de la primera y el
   corte no llega a verse. De ahí que no haya hueco al empalmar.

   El ancho es `max-content` a propósito: si la pista se dejara al ancho del
   contenedor, los logotipos se encogerían para caber y el desfile dejaría de
   tener nada que desfilar. */
.ir-franja{
  overflow:hidden; position:relative;
  padding-block:clamp(1.4rem,3vw,2.4rem);
  /* Los bordes se desvanecen para que los logotipos no aparezcan y desaparezcan
     de golpe contra el filo de la pantalla. */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ir-franja__pista{
  display:flex; width:max-content;
  animation:ir-desfile var(--ir-vuelta,48s) linear infinite;
}
.ir-franja__grupo{
  display:flex; align-items:center; margin:0; padding:0; list-style:none;
  gap:clamp(2.2rem,5vw,4.5rem);
  /* El mismo hueco al final que entre piezas: sin esto, el empalme entre la
     última de un grupo y la primera del siguiente iría pegado y el salto sí se
     notaría, aunque la traslación fuera exacta. */
  padding-right:clamp(2.2rem,5vw,4.5rem);
}
.ir-franja__pieza{ flex:0 0 auto; display:flex; align-items:center; }
.ir-franja__pieza img{
  height:clamp(38px,4.6vw,58px); width:auto; display:block;
  /* En gris y algo apagados: son quince marcas distintas y a todo color la
     franja se vuelve un mosaico. Al pasar por encima, cada uno recupera el
     suyo. */
  filter:grayscale(1); opacity:.62;
  transition:filter .3s ease, opacity .3s ease, transform .3s ease;
}
.ir-franja__pieza a:hover img, .ir-franja__pieza a:focus-visible img{
  filter:none; opacity:1; transform:scale(1.06);
}
/* Detener el desfile para leer un nombre es lo primero que intenta cualquiera. */
.ir-franja:hover .ir-franja__pista,
.ir-franja:focus-within .ir-franja__pista{ animation-play-state:paused; }

@media (prefers-reduced-motion:reduce){
  /* Sin movimiento, pero sin perder el contenido: la franja se puede arrastrar. */
  .ir-franja__pista{ animation:none; }
  .ir-franja{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .ir-franja__grupo:last-child{ display:none; }
}

@keyframes ir-desfile{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* ---------- el hueco de la agenda estratégica ---------- */
/* La fila del título ponía 76px de relleno abajo y la de las tarjetas otros 76
   arriba: siete centímetros de nada entre un titular y lo que anuncia. */
.ir-divi .ir-seccion-interred .ir-cab-fila{ padding-bottom:0; }
.ir-divi .ir-seccion-interred .ir-cab-fila + .et_pb_row{ padding-top:2.2rem; }
/* La franja va a sangre: es una cinta, no una columna de texto. */
.ir-divi .ir-fila-franja{ max-width:none !important; padding:0 0 clamp(2rem,4vw,3.4rem) !important; }

/* ---------- la fotografía de grupo de «Nosotros» ---------- */
/* Iba a sangre, recortada a 34rem de alto y con el pie en una banda blanca
   debajo: la forma de un banner de plantilla, con la gente cortada por los pies
   y una franja de texto que parecía de otra página.

   Vuelve a la columna de lectura, con la esquina curva del resto del sitio y
   sin recorte: una fotografía de veinticinco personas necesita su alto. El pie
   pasa a leerse como pie y no como pastilla. */
/* El cero de arriba venía de cuando iba a sangre: pegada al borde no le
   hacía falta aire. Ahora que vuelve a la columna, con esquina curva y
   sombra, arrancaba a ras de la banda marino y parecía que se le hubiera
   caído encima. */
.ir-divi .ir-foto-ancha{ padding-block:clamp(2.8rem,4.5vw,4.2rem) 0 !important; }
.ir-divi .ir-foto-ancha .et_pb_row{
  width:100% !important;
  max-width:var(--ancho) !important;
  padding:0 1.5rem !important;
  margin-inline:auto !important;
}
.ir-foto-ancha .et_pb_image{
  overflow:hidden; border-radius:var(--v2-r-grande);
  box-shadow:var(--v2-sombra);
}
/* El encuadre tira hacia arriba: en una fotografía de grupo lo que importa
   está en el tercio alto —las cabezas y, aquí, el rótulo del panel— mientras
   que abajo solo hay mesas. Con el 40% anterior la banda se comía la primera
   línea de los logotipos. */
.ir-foto-ancha .et_pb_image img,
.ir-divi .ir-foto-ancha .et_pb_image img{
  border-radius:0; max-height:none; object-fit:cover; object-position:center 25%;
  aspect-ratio:16/8.2;
}
.ir-foto-ancha .et_pb_text{
  max-width:none !important; margin:.9rem 0 0 !important; padding-inline:0 !important;
}
.ir-foto-ancha .ir-pie{
  font-size:.86rem; color:var(--v2-tenue,#6B7590); line-height:1.5;
}
@media (max-width:700px){
  .ir-divi .ir-foto-ancha{ padding-block:2rem 0 !important; }
  .ir-foto-ancha .et_pb_image{ border-radius:var(--v2-r-card); }
  .ir-divi .ir-foto-ancha .et_pb_image img{ aspect-ratio:4/3; }
}

/* ---------- la fotografía de «Una red de redes» ---------- */
/* Salía con una franja marino debajo: DIVI envuelve la imagen en un span en
   línea que se queda con el alto natural de la fotografía, así que el `100%`
   del img se resolvía contra ese span y no contra la caja, y los cincuenta y
   tantos píxeles que faltaban enseñaban el fondo. */
.ir-divi .ir-presentacion .et_pb_image .et_pb_image_wrap{ display:block; height:100%; }
/* Y la proporción baja de 4/3 a 16/8: con 4/3 la fotografía medía 396px al
   lado de 280px de texto, y la columna de la derecha se leía a medio llenar.
   El 16/8 es además la forma de la fotografía que pidió la coordinación —ocho
   personas de borde a borde—, así que el recorte lateral es de trece píxeles y
   no le corta el hombro a nadie. */
.ir-divi .ir-presentacion .et_pb_image{ aspect-ratio:16/8; }

/* ---------- integrantes en la portada ---------- */
/* Ocho retratos quietos, en dos filas de cuatro. Hasta el 15 de septiembre de
   2026 eran seis en desfile, corriendo hacia la izquierda con el desplazamiento;
   la coordinación pidió verlos fijos y enteros. Las cuatro columnas se fijan aquí
   porque la rejilla general se reparte sola según el ancho, y a 1.320 píxeles le
   caben cinco: saldrían cinco retratos arriba y tres abajo. */
.ir-integrantes-portada{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,1.8vw,1.6rem); }
@media (max-width:900px){
  .ir-integrantes-portada{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
}

/* ---------- titular y lema de la portada ---------- */
/* El titular es ahora el nombre de la Red, que son ochenta caracteres: pide un
   cuerpo bastante menor que una frase de cuatro palabras, o se come la pantalla.
   Se compone a la medida de su columna y no del ancho de la ventana. */
.ir-hero-seccion h1{
  font-size:clamp(1.75rem,2.9vw,2.55rem) !important;
  /* Interlínea más suelta y más aire debajo: el nombre son cuatro renglones
     largos y a 1,14 se leían como un bloque compacto. */
  line-height:1.22; letter-spacing:-.015em; max-width:19ch;
  margin:0 0 1.5rem;
}
/* El lema, debajo y en menor peso: es subtítulo, no otro titular. El filete
   rojo lo separa del nombre sin necesidad de una línea de más. */
.ir-hero__lema{
  position:relative; padding-top:1.6rem; margin:0 0 .4rem;
  max-width:26ch;
  font-family:var(--v2-sans); font-weight:500;
  font-size:clamp(1.06rem,1.55vw,1.32rem); line-height:1.4;
  color:var(--suave,#4A5170);
}
.ir-hero__lema::before{
  content:""; position:absolute; top:0; left:0;
  width:2.4rem; height:3px; border-radius:2px; background:var(--rojo,#E03C31);
}
@media (max-width:980px){
  .ir-hero-seccion h1{ max-width:none; }
  .ir-hero__lema{ max-width:none; }
}

/* El botón necesita separarse del lema: pegado, la columna se lee como un
   único párrafo largo en vez de tres piezas. */
.ir-divi .ir-hero-fila .et_pb_button_module_wrapper{ margin-top:2.2rem; }

/* ============================================================
   EL TITULAR DE PORTADA, SOBRE MARINO
   ============================================================
   La coordinación pidió el azul de la marca como fondo, con el símbolo gráfico
   usado de materia. Es lo que hace la carta gráfica en su propia portada: el
   trazo blanco, enorme, saliéndose del encuadre.

   Todo lo que va encima se invierte a la vez: el marino de fondo obliga a
   repintar el titular, el lema, las cifras y el botón. Se agrupa aquí y no
   repartido por la hoja para que el día que se quiera volver al fondo claro
   baste con quitar este bloque. */
/* El fondo lo pone la sección desde DIVI, no esta hoja: aquí solo se declara
   el color del texto que va encima. Forzarlo con !important habría dejado el
   selector de color del constructor sin efecto. */
.ir-hero-seccion{ color:#fff; }

.ir-hero-seccion h1{ color:#fff; }
.ir-hero__lema{ color:rgba(255,255,255,.82); }
.ir-hero__lema::before{ background:var(--amarillo,#FED141); }

/* Las cifras dejan de ser tarjetas blancas y pasan a ser cristal: un velo claro
   sobre el marino, que es lo que se lee como pieza sin encender la pantalla. */
.ir-hero-seccion .ir-cifra{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
  box-shadow:none;
}
.ir-hero-seccion .ir-cifra:hover{
  background:rgba(255,255,255,.11);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.6);
}
.ir-hero-seccion .ir-cifra b{ color:#fff; }
.ir-hero-seccion .ir-cifra span{ color:rgba(255,255,255,.62); }

/* El botón se invierte: sobre marino, un botón marino no existe. */
.ir-divi .ir-hero-fila .et_pb_button,
.ir-divi .ir-hero-fila .et_pb_button:hover{
  background:#fff !important; border-color:#fff !important;
}
.ir-divi .ir-hero-fila .et_pb_button,
.ir-divi .ir-hero-fila .et_pb_button::after,
.ir-divi .ir-hero-fila .et_pb_button:hover,
.ir-divi .ir-hero-fila .et_pb_button:hover::after{ color:var(--marino) !important; }

/* La trama de puntos, ahora en blanco y más discreta: sobre oscuro el mismo
   punteado en marino desaparecía. */
.ir-hero-seccion .ir-hero__trama{
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
}
/* Dos brumas y muy bajas: sobre marino, tres manchas competían con el símbolo. */
.ir-hero-seccion .ir-hero__bruma--a{ background:#2B6CB0; opacity:.34; }
.ir-hero-seccion .ir-hero__bruma--b{ background:#E03C31; opacity:.16; }

/* ---------- el símbolo, de materia ---------- */
/* Sale por la izquierda y por abajo, girado, a un tamaño que no se lee como
   logotipo sino como textura. Detrás de todo y sin capturar el ratón. */
.ir-hero__simbolo{
  position:absolute; z-index:0; pointer-events:none;
  left:-9vw; bottom:-16vh;
  width:clamp(320px,38vw,560px);
  color:#fff; opacity:.085;
  transform:rotate(-8deg);
}
.ir-hero__simbolo svg{ width:100%; height:auto; display:block; }

/* Y una segunda aparición, pequeña y recortada por el borde de arriba a la
   derecha: la carta lo usa así, en pareja y a escalas distintas, para que la
   página no se lea como una sola marca de agua centrada. */
.ir-hero-fondo::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-4vw; top:-10vh;
  width:clamp(180px,20vw,300px); aspect-ratio:111.4/176.2;
  background:currentColor;
  -webkit-mask:url("img/simbolo-contorno.svg") no-repeat center / contain;
  mask:url("img/simbolo-contorno.svg") no-repeat center / contain;
  color:#fff; opacity:.06;
  transform:rotate(12deg);
}

@media (max-width:980px){
  /* En el teléfono, solo el grande y más discreto: dos símbolos en 375px de
     ancho son ruido detrás del texto. */
  .ir-hero-fondo::after{ display:none; }
  .ir-hero__simbolo{ left:-22vw; bottom:-6vh; width:66vw; opacity:.07; }
}

/* ---------- la marca del pie ---------- */
/* Palabra y símbolo en una línea, bajada debajo: es el montaje de la carta
   gráfica, y sobre oscuro es el único que se lee. */
#ir-footer .ir-footer__marca-alto{
  display:flex; align-items:center; gap:1.1rem;
}
/* Más grande que en la cabecera: el pie es donde la marca se firma, y a 38px
   quedaba menor que los titulares de sus propias columnas. */
#ir-footer .ir-footer__logo{ height:56px; width:auto; }
/* El símbolo de contorno se pinta con color, no con filtro: así conserva su
   trazo en vez de aplastarse a una silueta. */
#ir-footer .ir-footer__simbolo{ display:block; color:#fff; }
#ir-footer .ir-footer__simbolo svg{ height:64px; width:auto; display:block; }
#ir-footer .ir-footer__bajada{
  margin:1.15rem 0 0; max-width:34ch;
  font-family:var(--v2-sans); font-size:.98rem; line-height:1.45;
  color:rgba(255,255,255,.75);
}
@media (max-width:900px){
  #ir-footer .ir-footer__logo{ height:42px; }
  #ir-footer .ir-footer__simbolo svg{ height:48px; }
  #ir-footer .ir-footer__bajada{ font-size:.86rem; max-width:none; }
}

/* ============================================================
   LAS ENTRADAS DE SECCIÓN, TAMBIÉN EN MARINO
   ============================================================
   Con la portada en azul, las doce secciones seguían abriendo en crema: al
   navegar, cada salto cambiaba de mundo. Van al mismo fondo y con la misma
   materia, el símbolo saliéndose del encuadre, para que el sitio se lea como
   uno solo.

   Alcanza a las dos cabeceras que existen: la que arma DIVI en las páginas de
   sección y la que arma el tema en Noticias y en las fichas. */
.ir-divi .ir-apertura-seccion,
.ir-cab{
  background:var(--marino) !important;
  color:#fff;
  border-bottom:0 !important;
}

.ir-divi .ir-apertura-seccion h1, .ir-cab h1{ color:#fff; }
.ir-apertura .ir-lead, .ir-cab .ir-lead{ color:rgba(255,255,255,.78); }

/* La volanta pasa de píldora clara a texto en amarillo: sobre marino, una
   pastilla gris se lee como un hueco. */
.ir-apertura-seccion .ir-eyebrow, .ir-cab .ir-eyebrow{
  background:transparent !important; padding-left:0 !important;
  color:var(--amarillo,#FED141) !important;
}
.ir-apertura-seccion .ir-eyebrow::before, .ir-cab .ir-eyebrow::before{
  background:var(--amarillo,#FED141) !important;
}

/* Las cifras de la entrada, a cristal, como en la portada. */
.ir-apertura .ir-cifra{
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:none !important;
}
.ir-apertura .ir-cifra b{ color:#fff; }
.ir-apertura .ir-cifra span{ color:rgba(255,255,255,.62); }

/* La bruma de color y la trama, ajustadas al fondo oscuro. */
.ir-apertura-seccion::before{ background:#2B6CB0 !important; opacity:.32 !important; }
.ir-apertura-seccion::after, .ir-cab .ir-red-fondo{
  background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px) !important;
}

/* El símbolo, una sola vez y recortado por la derecha: la banda es más baja
   que el titular de la portada y dos piezas la saturarían. */
.ir-divi .ir-apertura-seccion .et_pb_row::before,
.ir-cab .ir-cab__in::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-6vw; top:50%; transform:translateY(-50%) rotate(10deg);
  width:clamp(200px,22vw,340px); aspect-ratio:111.4/176.2;
  background:currentColor; color:#fff; opacity:.07;
  -webkit-mask:url("img/simbolo-contorno.svg") no-repeat center / contain;
  mask:url("img/simbolo-contorno.svg") no-repeat center / contain;
}
.ir-cab .ir-cab__in{ position:relative; }
/* El contenido, por encima de la materia. */
.ir-divi .ir-apertura-seccion .et_pb_column, .ir-cab__in > *{ position:relative; z-index:1; }

/* Las migas de las fichas, sobre oscuro. */
.ir-cab .ir-migas a{ color:rgba(255,255,255,.8); }
.ir-cab .ir-migas a:hover{ color:#fff; }

@media (max-width:700px){
  .ir-divi .ir-apertura-seccion .et_pb_row::before,
  .ir-cab .ir-cab__in::before{ width:52vw; right:-16vw; opacity:.06; }
}

/* ---------- el titular de la portada en el teléfono ---------- */
/* La mitad de aire arriba: en vertical, cien píxeles antes del nombre de la
   Red empujaban el vídeo fuera de la primera pantalla. */
@media (max-width:700px){
  .ir-hero-seccion > .et_pb_row.ir-hero-fila{ padding-block:3.5rem 0 !important; }
}

/* ---------- Comunidad Alumni de la ESIES ---------- */
/* Fichas pequeñas, porque de cada persona se publican cinco datos y una
   fotografía de carnet: no es el directorio de integrantes, que ocupa media
   pantalla por persona, sino una comunidad de cuarenta que tiene que leerse
   de una pasada. */
.ir-alumni__grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
}
.ir-alumni__ficha{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--v2-linea,rgba(20,27,77,.14));
  border-radius:var(--v2-r-card,20px);
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease;
}
.ir-alumni__ficha:hover{
  transform:translateY(-3px); border-color:rgba(20,27,77,.28);
  box-shadow:var(--v2-sombra,0 14px 30px rgba(20,27,77,.1));
}

/* La cabecera: quién es. Retrato, nombre y promoción, que es lo que identifica
   a la persona dentro de la comunidad. */
.ir-alumni__cabecera{ display:flex; gap:.85rem; align-items:center; padding:1.05rem 1.15rem .9rem; }
.ir-alumni__foto{
  flex:0 0 auto; width:3rem; height:3rem; border-radius:50%;
  overflow:hidden; display:grid; place-items:center;
  background:var(--hueso,#ECEFF3); color:var(--marino);
}
.ir-alumni__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.ir-alumni__ini{ font-family:var(--serif); font-size:1.1rem; }
.ir-alumni__identidad{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; }
.ir-alumni__identidad h3{ font-size:1.02rem; line-height:1.25; margin:0; }
.ir-alumni__promo{
  background:var(--rojo-p,#FDE2E2); color:var(--rojo-p-txt,#B3232A);
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.2rem .55rem; border-radius:var(--v2-r-control,999px);
}

/* Cada dato, en su fila y con su filete: el icono dice de qué habla sin gastar
   una palabra, y el ojo encuentra el programa, la línea o el contacto sin leer
   la tarjeta entera. */
.ir-alumni__dato{
  display:flex; gap:.6rem; align-items:flex-start; margin:0;
  padding:.72rem 1.15rem; border-top:1px solid var(--v2-linea,rgba(20,27,77,.09));
  font-size:.84rem; line-height:1.45; color:var(--suave,#4A5170);
}
/* La última fila cierra la tarjeta, así que lleva abajo el mismo aire que la
   cabecera lleva arriba: sin esto el contacto queda pegado al filo.

   Va anidada bajo .ir-alumni a propósito. DIVI trae «p:not(.has-background)
   :last-of-type{ padding-bottom:0 }», que pesa más que una clase con
   pseudoclase y dejaba esta fila en cero; con el contenedor delante la regla
   pesa lo justo para ganar, y no hace falta un !important. */
.ir-alumni .ir-alumni__dato:last-child{ padding-bottom:1.05rem; }
.ir-alumni__icono{ flex:0 0 auto; margin-top:.12rem; color:var(--tenue,#606783); }
.ir-alumni__dato .ir-alumni__lugar{
  display:block; margin-top:.15rem; font-size:.78rem; color:var(--tenue,#606783);
}
.ir-alumni__dato a{ color:var(--azul,#005D9A); text-decoration:none; overflow-wrap:anywhere; }
.ir-alumni__dato a:hover, .ir-alumni__dato a:focus-visible{ text-decoration:underline; }

/* ---------- la comunidad todavía sin fichas ---------- */
/* Una tarjeta partida en dos, como el formulario que se abre encima. A la
   izquierda, el marino con el símbolo de marca de agua y tres fichas en blanco
   abiertas en abanico, con el retrato redondo, el nombre y la píldora de
   promoción de las fichas reales: las dos de atrás, translúcidas; la de delante,
   blanca, con un más en el retrato y la píldora que dice «Tu ficha». A la
   derecha, la invitación.

   Las fichas se colocan con las propiedades sueltas translate y rotate, y la de
   delante flota con transform: así la animación no pisa la posición. */
.ir-vacio-alumni{
  display:grid; grid-template-columns:minmax(17rem,25rem) 1fr; overflow:hidden;
  background:#fff; border:1px solid var(--v2-linea,rgba(20,27,77,.09));
  border-radius:var(--v2-r-grande,28px); box-shadow:var(--v2-sombra);
}
.ir-vacio-alumni__dibujo{
  position:relative; overflow:hidden; isolation:isolate; min-height:19rem;
  background:radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,.12), transparent 62%), var(--marino);
}
.ir-vacio-alumni__simbolo{
  position:absolute; z-index:0; left:-2.6rem; bottom:-3.8rem; width:13rem;
  color:#fff; opacity:.08; rotate:14deg; pointer-events:none;
}
.ir-vacio-alumni__simbolo svg{ width:100%; height:auto; display:block; }

.ir-vacio-alumni__ficha{
  position:absolute; z-index:1; left:50%; top:50%; box-sizing:border-box; width:13.5rem;
  display:flex; flex-direction:column; gap:.6rem; padding:.95rem 1rem 1.05rem;
  border-radius:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
}
.ir-vacio-alumni__ficha--atras{ translate:-80% -64%; rotate:-9deg; }
.ir-vacio-alumni__ficha--medio{ translate:-22% -38%; rotate:7deg; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); }
.ir-vacio-alumni__ficha--frente{
  z-index:2; translate:-50% -47%; rotate:-2deg;
  background:#fff; border-color:#fff; box-shadow:0 28px 50px -22px rgba(0,0,0,.6);
  animation:ir-vacio-flota 6.5s ease-in-out infinite;
}
@keyframes ir-vacio-flota{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

.ir-vacio-alumni__cabeza{ display:flex; align-items:center; gap:.7rem; }
.ir-vacio-alumni__retrato{
  flex:0 0 auto; box-sizing:border-box; width:2.6rem; height:2.6rem; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.16);
}
.ir-vacio-alumni__quien{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:.42rem; }
.ir-vacio-alumni__barra{ display:block; width:100%; height:.5rem; border-radius:999px; background:rgba(255,255,255,.17); }
.ir-vacio-alumni__quien .ir-vacio-alumni__barra{ width:84%; height:.62rem; }
.ir-vacio-alumni__pildora{ display:block; width:3.8rem; height:.85rem; border-radius:999px; background:rgba(255,255,255,.12); }
.ir-vacio-alumni__fila{
  display:flex; align-items:center; gap:.55rem; padding-top:.6rem;
  border-top:1px solid rgba(255,255,255,.12);
}
.ir-vacio-alumni__fila::before{ content:""; flex:0 0 auto; width:.72rem; height:.72rem; border-radius:3px; background:rgba(255,255,255,.18); }
.ir-vacio-alumni__fila .ir-vacio-alumni__barra{ width:72%; }
.ir-vacio-alumni__fila + .ir-vacio-alumni__fila .ir-vacio-alumni__barra{ width:50%; }

/* La de delante, en claro: la que espera a la primera persona. */
.ir-vacio-alumni__ficha--frente .ir-vacio-alumni__retrato{
  background:var(--rojo-p,#FDE2E2); color:var(--rojo,#E03C31); border:1.5px dashed currentColor;
}
.ir-vacio-alumni__ficha--frente .ir-vacio-alumni__barra,
.ir-vacio-alumni__ficha--frente .ir-vacio-alumni__fila::before{ background:var(--hueso,#ECEFF3); }
.ir-vacio-alumni__ficha--frente .ir-vacio-alumni__fila{ border-top-color:var(--v2-linea,rgba(20,27,77,.09)); }
.ir-vacio-alumni__tu{
  display:inline-block; line-height:1; padding:.3rem .55rem; border-radius:999px;
  background:var(--rojo-p,#FDE2E2); color:var(--rojo-p-txt,#B3232A);
  font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}

/* El texto. Va anidado bajo .ir-alumni para ganarle a los márgenes que DIVI
   pone a párrafos y titulares, sin recurrir a !important. */
.ir-vacio-alumni__texto{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:clamp(1.8rem,4vw,3rem) clamp(1.5rem,4vw,3.2rem);
}
.ir-alumni .ir-vacio-alumni__volanta{
  display:inline-flex; align-items:center; gap:.5rem; margin:0 0 .9rem; padding:0;
  font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--rojo-txt,#D7292E);
}
.ir-vacio-alumni__volanta::before{ content:""; width:.45rem; height:.45rem; border-radius:50%; background:var(--rojo,#E03C31); }
.ir-alumni .ir-vacio-alumni__titulo{
  margin:0 0 .85rem; padding:0; max-width:20ch;
  font-family:var(--v2-display,var(--serif)); font-size:clamp(1.55rem,2.5vw,2.05rem); line-height:1.12;
  letter-spacing:-.015em; color:var(--marino);
}
.ir-alumni .ir-vacio-alumni__bajada{
  margin:0; padding:0; max-width:46ch; font-size:1rem; line-height:1.6; color:var(--suave,#4A5170);
}
.ir-alumni .ir-vacio-alumni__accion{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:1.6rem;
  padding:.72rem 1.35rem; border-radius:999px; border:1.5px solid var(--marino);
  color:var(--marino); font-weight:600; font-size:.95rem; line-height:1.2; text-decoration:none;
  transition:background-color .22s ease, color .22s ease;
}
.ir-vacio-alumni__accion::after{ content:"\2192"; line-height:1; transition:transform .22s ease; }
.ir-alumni .ir-vacio-alumni__accion:hover,
.ir-alumni .ir-vacio-alumni__accion:focus-visible{ background:var(--marino); color:#fff; }
.ir-vacio-alumni__accion:hover::after{ transform:translateX(3px); }
.ir-vacio-alumni__accion:focus-visible{ outline:2px solid var(--marino); outline-offset:3px; }

@media (max-width:900px){
  .ir-vacio-alumni{ grid-template-columns:1fr; }
  .ir-vacio-alumni__dibujo{ min-height:15rem; }
  .ir-vacio-alumni__ficha{ width:12rem; }
}
@media (max-width:480px){
  .ir-vacio-alumni__dibujo{ min-height:13.5rem; }
  .ir-vacio-alumni__ficha{ width:10.6rem; padding:.8rem .85rem .9rem; gap:.5rem; }
  .ir-vacio-alumni__retrato{ width:2.2rem; height:2.2rem; }
  .ir-vacio-alumni__ficha--atras{ translate:-88% -62%; }
  .ir-vacio-alumni__ficha--medio{ translate:-14% -38%; }
}
@media (prefers-reduced-motion:reduce){
  .ir-vacio-alumni__ficha--frente{ animation:none; }
  .ir-vacio-alumni__accion, .ir-vacio-alumni__accion::after{ transition:none; }
}
.ir-alumni__aviso{
  margin:0 0 1.4rem; padding:.95rem 1.2rem; border-radius:var(--v2-r-control,10px);
  font-size:.92rem; border:1px solid;
}
.ir-alumni__aviso--ok{ background:#EFF5EC; border-color:#C3D8B8; color:#2F5220; }
.ir-alumni__aviso--mal{ background:#FBEDED; border-color:#E6BFC0; color:#8E2126; }

/* ---------- el alta ---------- */
/* Va plegada: la página es para leer la comunidad, y quien quiere sumarse abre
   el formulario. Con <details> funciona sin guion alguno.

   Abierta, no es una lista de campos sino una tarjeta partida en dos: a la
   izquierda, en marino y con el símbolo de la carta gráfica de marca de agua,
   se explica de qué va y quién puede; a la derecha se pide lo justo, en tres
   pasos numerados como los ejes de la portada. */
.ir-alta{ margin-top:2.4rem; }
.ir-alta__abrir{
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  font-family:var(--v2-sans); font-weight:600; font-size:1rem;
  background:var(--marino); color:#fff; border-radius:999px;
  padding:.85rem 1.6rem; list-style:none;
  transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, background-color .22s ease;
}
.ir-alta__abrir::-webkit-details-marker{ display:none; }
.ir-alta__abrir::after{
  content:""; width:.62rem; height:.62rem; flex:0 0 auto;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px); transition:transform .22s ease;
}
.ir-alta[open] .ir-alta__abrir::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.ir-alta__abrir:hover{ background:#0E1438; transform:translateY(-2px); box-shadow:var(--v2-sombra-alta,0 16px 34px rgba(20,27,77,.22)); }
.ir-alta__abrir:focus-visible{ outline:2px solid var(--marino); outline-offset:3px; }

.ir-alta__caja{
  margin-top:1.3rem; overflow:hidden;
  background:#fff; border:1px solid var(--v2-linea,rgba(20,27,77,.14));
  border-radius:var(--v2-r-grande,22px); box-shadow:var(--v2-sombra,0 14px 30px rgba(20,27,77,.1));
  display:grid; grid-template-columns:minmax(15rem,21rem) 1fr;
}

/* La columna marino. */
.ir-alta__lado{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--marino); color:#fff; padding:2.2rem 1.9rem;
}
.ir-alta__simbolo{
  position:absolute; z-index:0; right:-3.5rem; bottom:-3rem;
  width:14rem; color:#fff; opacity:.09; pointer-events:none; transform:rotate(-8deg);
}
.ir-alta__simbolo svg{ width:100%; height:auto; display:block; }
.ir-alta__lado > :not(.ir-alta__simbolo){ position:relative; z-index:1; }
.ir-alta__volanta{
  margin:0 0 .5rem; font-size:.66rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
}
.ir-alta__titulo{
  font-family:var(--v2-display,var(--serif)); font-size:1.55rem; line-height:1.15;
  margin:0 0 .8rem; color:#fff; letter-spacing:-.01em;
}
.ir-alta__intro{ margin:0; font-size:.92rem; line-height:1.55; color:rgba(255,255,255,.8); }
.ir-alta__notas{
  list-style:none; margin:1.5rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.7rem;
}
.ir-alta__notas li{
  position:relative; padding-left:1.4rem; font-size:.85rem; line-height:1.5;
  color:rgba(255,255,255,.75);
}
.ir-alta__notas li::before{
  content:""; position:absolute; left:0; top:.42rem;
  width:.5rem; height:.5rem; border-radius:50%; background:var(--amarillo,#F2B705);
}

/* ---------- los campos ---------- */
.ir-form{ padding:2.1rem 2.2rem; display:flex; flex-direction:column; gap:1.9rem; }
.ir-form__paso{ display:flex; flex-direction:column; gap:1rem; }
.ir-form__rotulo{
  display:flex; align-items:center; gap:.65rem; margin:0;
  font-family:var(--v2-sans); font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--marino);
}
.ir-form__rotulo b{
  display:grid; place-items:center; width:1.6rem; height:1.6rem; flex:0 0 auto;
  border-radius:50%; background:var(--marino); color:#fff;
  font-family:var(--v2-display,var(--serif)); font-size:.82rem; letter-spacing:0;
}
.ir-form__campos{ display:grid; gap:1.05rem 1.3rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
.ir-form__campo{ margin:0; display:flex; flex-direction:column; gap:.4rem; }
.ir-form__campo--ancho{ grid-column:1 / -1; }
/* El campo de la promoción escrita a mano se esconde con el atributo, y este
   le gana al display:flex de arriba solo si se dice. */
.ir-form__campo[hidden]{ display:none !important; }
.ir-form label{ font-size:.82rem; font-weight:600; color:var(--marino); }
.ir-form__ob{ color:var(--rojo,#D7292E); }
.ir-form__nota{ font-size:.76rem; line-height:1.45; color:var(--tenue,#606783); }
.ir-form input[type=text],
.ir-form input[type=email],
.ir-form select,
.ir-form textarea{
  font:inherit; font-size:.94rem; color:var(--marino); width:100%;
  background:#FAFBFD; border:1px solid var(--v2-linea,rgba(20,27,77,.18));
  border-radius:var(--v2-r-control,12px); padding:.72rem .9rem;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.ir-form input[type=text]:hover,
.ir-form input[type=email]:hover,
.ir-form select:hover,
.ir-form textarea:hover{ border-color:rgba(20,27,77,.34); }
.ir-form input:focus,
.ir-form select:focus,
.ir-form textarea:focus{
  outline:none; background:#fff; border-color:var(--marino);
  box-shadow:0 0 0 3px rgba(20,27,77,.12);
}
/* El único campo de varias líneas va rectangular, con las esquinas apenas
   redondeadas. Con el radio de pastilla que llevan los campos de una línea,
   el texto empezaba dentro de la curva y se leía pegado al borde; y en un
   campo alto esa curva además deja las cuatro esquinas desiguales. */
.ir-form textarea{
  resize:vertical; min-height:6rem;
  border-radius:14px; padding:.85rem 1rem;
}
.ir-form select{ appearance:none; padding-right:2.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23141B4D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .85rem center; background-size:.8rem;
}

/* La fotografía: el botón nativo se viste igual que el resto. */
.ir-form__foto input[type=file]{
  font:inherit; font-size:.88rem; color:var(--tenue,#606783);
  background:#FAFBFD; border:1px dashed var(--v2-linea,rgba(20,27,77,.28));
  border-radius:var(--v2-r-control,12px); padding:.7rem .8rem; width:100%;
}
.ir-form__foto input[type=file]::file-selector-button{
  font:inherit; font-size:.82rem; font-weight:600; cursor:pointer;
  margin-right:.85rem; padding:.45rem .9rem; border:0; border-radius:999px;
  background:var(--marino); color:#fff;
}
.ir-form__foto input[type=file]:focus-visible{ outline:2px solid var(--marino); outline-offset:2px; }

/* El permiso y la comprobación van en cajas propias: son las dos cosas que
   conviene leer antes de pulsar enviar. */
.ir-form__permiso,
.ir-form__suma{
  background:var(--v2-papel,#F1F4F8); border:1px solid var(--v2-linea,rgba(20,27,77,.12));
  border-radius:var(--v2-r-card,14px); padding:.95rem 1.1rem;
}
.ir-form__permiso label{ display:flex; align-items:flex-start; gap:.65rem; font-weight:400; font-size:.88rem; line-height:1.5; }
.ir-form__permiso input{ margin-top:.22rem; width:1.05rem; height:1.05rem; accent-color:var(--marino); flex:0 0 auto; }
.ir-form__suma input{ max-width:7rem; }
.ir-form__envio{ margin:0; }
.ir-alta__enviar{
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  font-family:var(--v2-sans); font-weight:600; font-size:.98rem;
  background:var(--marino); color:#fff; border:0; border-radius:999px;
  padding:.9rem 1.8rem;
  transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, background-color .22s ease;
}
.ir-alta__enviar::after{ content:"\2192"; font-size:1.05em; line-height:1; }
.ir-alta__enviar:hover{ background:#0E1438; transform:translateY(-2px); box-shadow:var(--v2-sombra-alta,0 16px 34px rgba(20,27,77,.22)); }
.ir-alta__enviar:focus-visible{ outline:2px solid var(--marino); outline-offset:3px; }

/* La trampa no se oculta con display:none: hay programas que solo rellenan lo
   que está en el flujo, y esto tiene que parecerles un campo más. */
.ir-form__trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

@media (max-width:900px){
  .ir-alta__caja{ grid-template-columns:1fr; }
  .ir-alta__lado{ padding:1.8rem 1.5rem; }
  .ir-alta__simbolo{ width:10rem; right:-2.5rem; bottom:-2rem; }
  .ir-form{ padding:1.6rem 1.4rem; gap:1.6rem; }
  .ir-form__campos{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .ir-alumni__ficha, .ir-alta__abrir, .ir-alta__enviar{ transition:none; }
  .ir-alumni__ficha:hover, .ir-alta__abrir:hover, .ir-alta__enviar:hover{ transform:none; }
}

/* ---------- titular con logotipo (ESIES) ---------- */
/* El titular de sección es marino y el logotipo de la escuela trae el texto en
   marino: puesto directo desaparecería. Va en una tarjeta blanca, como el
   sello de ANID en el pie, que es la forma de poner una marca ajena sobre un
   fondo que no es el suyo sin alterarla. */
.ir-divi .ir-apertura--logo{ align-items:center; }
.ir-divi .ir-apertura--logo .et_pb_image{
  background:#fff; border-radius:var(--v2-r-card,18px);
  padding:clamp(1.1rem,2.2vw,1.9rem);
  box-shadow:0 24px 48px -28px rgba(0,0,0,.55);
  width:100%; max-width:25rem; margin-inline-start:auto; margin-block:0 !important;
}
.ir-divi .ir-apertura--logo .et_pb_image img{ width:100%; height:auto; display:block; }
@media (max-width:980px){
  /* En columna, la tarjeta baja bajo el texto, alineada con él y más chica. */
  .ir-divi .ir-apertura--logo .et_pb_image{ max-width:17rem; margin-inline-start:0; margin-block-start:1.4rem !important; }
}

/* ---------- InterRed en las volantas ---------- */
/* La volanta va en mayúsculas por CSS. El nombre de la Red se escribe siempre
   InterRed, con la I y la R en mayúscula, así que se libra de la transformación. */
.ir-nombre{ text-transform:none; }

/* ---------- objetivos ---------- */
/* Las tarjetas de objetivos no llevan titular: el objetivo es el texto entero.
   Va en marino y un punto más grande que el párrafo de apoyo de las tarjetas
   antiguas, con aire bajo el número. */
.ir-divi .ir-ejes p.ir-eje__texto{
  margin:1rem 0 0; font-size:1rem; line-height:1.55; color:var(--marino); font-weight:500;
}

/* ---------- Comunidad Alumni ---------- */
/* La invitación vive en la apertura de la página, así que la franja de papel
   empieza directamente con el botón que abre el formulario. Lleva el aire justo
   para despegarse del borde de la franja, sin el hueco enorme que dejaba la
   invitación repetida ni pegado al filo. */
.ir-alumni > .ir-alta{ margin:0 0 2.4rem; }

/* ---------- el idioma en su burbuja (escritorio) ----------
   El 15 de septiembre de 2026 la coordinación pidió sacar el selector de idioma
   de la píldora del menú: a la derecha, en una burbuja propia, a la misma altura
   y separada por un respiro, para que se lea como una extensión de la barra y no
   como una entrada más. De paso deja el ancho que necesitaba «Convocatorias» en
   el primer nivel.

   El marcado no cambia, porque es el mismo del teléfono, donde el selector sigue
   dentro de la píldora junto a la hamburguesa. En el escritorio el contenedor
   deja de pintar la píldora y la pinta un ::before que termina donde empieza la
   burbuja; la burbuja es el propio selector, con la misma superficie. Todo va
   dentro de esta media query: por debajo de 1.264 píxeles nada de esto existe. */
@media not all and (max-width:1264px){
  #ir-header .ir-header__in{
    --ir-burbuja:5rem; --ir-burbuja-aire:.5rem;
    background:transparent; border:0; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    padding-inline-end:0;
  }
  #ir-header.ir-header--bajado .ir-header__in{ background:transparent; box-shadow:none; }

  #ir-header .ir-header__in::before,
  #ir-header .ir-idioma{
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:blur(18px) saturate(1.7); backdrop-filter:blur(18px) saturate(1.7);
    border:1px solid var(--v2-linea); border-radius:var(--v2-r-control);
    box-shadow:var(--v2-sombra);
    transition:box-shadow .25s ease, background-color .25s ease;
  }
  #ir-header.ir-header--bajado .ir-header__in::before,
  #ir-header.ir-header--bajado .ir-idioma{ background:rgba(255,255,255,.93); box-shadow:var(--v2-sombra-alta); }

  #ir-header .ir-header__in::before{
    content:""; position:absolute; z-index:-1;
    inset:0 calc(var(--ir-burbuja) + var(--ir-burbuja-aire)) 0 0;
  }

  /* La burbuja: alta como la píldora y del ancho del botón. Su margen suma, al
     hueco de la fila, el relleno interior de la píldora y el respiro entre las
     dos piezas. El filete que separaba el idioma del menú ya no hace falta. */
  #ir-header .ir-idioma{
    flex:0 0 var(--ir-burbuja); align-self:stretch; display:flex;
    padding:0; margin-inline-start:calc(1.5rem + var(--ir-burbuja-aire) - 1.6rem);
  }
  #ir-header .ir-idioma::before{ display:none; }
  #ir-header .ir-idioma__btn{
    flex:1; justify-content:center; gap:.4rem;
    border:0; border-radius:inherit; background:transparent;
  }
  #ir-header .ir-idioma__btn:hover{ background:rgba(20,27,77,.055); }
  #ir-header .ir-idioma__btn[aria-expanded="true"]{ background:var(--marino); color:#fff; }
  #ir-header .ir-idioma__btn:focus-visible{ outline:2px solid var(--marino); outline-offset:-4px; }
}


/* ============================================================
   HISTORIA
   ============================================================ */
/* La página cuenta una secuencia, del proyecto conjunto de 2021 a la firma del
   memorándum en 2026, y el diseño la sigue: el rango de años en la apertura, el
   relato con una fotografía fija al lado, el panel marino de las tres
   instituciones fundadoras y la línea de tiempo que cierra en el hito de 2026.
   Todo son módulos nativos de Divi: aquí solo va la forma, así que quien edite
   un texto en el constructor no rompe nada. */

/* 1 · el rango de años, sobre la apertura marino de la capa moderna */
.ir-divi .ir-historia-rango{
  display:flex; align-items:center; gap:clamp(.8rem,2vw,1.4rem);
  margin:clamp(1.1rem,2.2vw,1.8rem) 0 0;
  font-family:var(--v2-display); font-weight:700; line-height:1;
  font-size:clamp(2.2rem,6vw,4.4rem); letter-spacing:-.03em;
  color:#fff; font-variant-numeric:tabular-nums;
}
.ir-divi .ir-historia-rango > span:last-child{ color:var(--rojo); }
/* La flecha queda para quien no ve estilos; con estilos es un trazo. */
.ir-divi .ir-historia-rango__linea{
  flex:0 1 clamp(3rem,12vw,9rem); height:4px; border-radius:4px;
  background:linear-gradient(90deg, rgba(255,255,255,.75), var(--rojo));
  font-size:0; color:transparent; overflow:hidden;
}
/* Solo para lectores de pantalla: «2021 a 2026». */
.ir-historia-rango__a{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* 2 · el relato, con la fotografía fija al lado */
.ir-divi .ir-historia-relato{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.ir-divi .ir-historia-relato > .et_pb_column{
  width:auto !important; margin:0 !important; float:none !important; min-width:0;
}
.ir-divi .ir-historia-relato .et_pb_text{ margin:0; }
/* En una fila con grilla, el despeje de flotantes de Divi (::after) sería una
   celda más y dejaría un hueco abajo. Aquí no hay flotantes que despejar. */
.ir-divi .ir-historia-relato::after, .ir-divi .ir-historia-redes::after{ display:none; }
.ir-divi .ir-historia-relato p{
  margin:0 0 1.25em; max-width:40rem;
  font-size:clamp(1rem,1.2vw,1.08rem); line-height:1.78; color:#2B3150;
}
/* El primer párrafo abre la historia: más grande y en la letra de los títulos. */
.ir-divi .ir-historia-relato > .et_pb_column:first-child p:first-child{
  font-family:var(--v2-display); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(1.16rem,1.75vw,1.4rem); line-height:1.5; color:var(--marino);
}
.ir-divi .ir-historia-relato a{
  color:inherit; text-decoration:underline; text-decoration-thickness:2px;
  text-decoration-color:rgba(224,60,49,.5); text-underline-offset:.2em;
}
.ir-divi .ir-historia-relato a:hover{ text-decoration-color:var(--rojo); }
.ir-divi .ir-historia-relato > .et_pb_column:last-child{ position:sticky; top:7rem; }
.ir-divi .ir-historia-relato .et_pb_image{ margin:0 0 .9rem; }
.ir-divi .ir-historia-relato .et_pb_image img{
  width:100%; height:auto; border-radius:var(--v2-r-card); box-shadow:var(--v2-sombra-alta);
}
.ir-divi .ir-historia-relato .ir-pie{ margin:0; max-width:none; font-size:.84rem; line-height:1.5; color:#4A5170; }

/* 3 · una red de redes: panel marino con las tres fundadoras */
.ir-divi .ir-historia-oscura{ position:relative; overflow:hidden; }
/* El mismo ritmo que el resto del sitio (ver .ir-seccion-interred): la cabecera
   sin relleno abajo y 2,2rem hasta lo que sigue. Con el relleno de Divi en cada
   fila quedaban 166px entre el título y las tarjetas, y otros 166 antes del
   cierre. El panel va a todo el ancho, como las demás secciones. */
.ir-divi .ir-historia-oscura .ir-historia-cab{ padding-bottom:0 !important; }
.ir-divi .ir-historia-oscura .ir-historia-cab + .et_pb_row{ padding-top:2.2rem !important; padding-bottom:0 !important; }
.ir-divi .ir-historia-oscura .ir-historia-suma-fila{ padding-top:2.6rem !important; }
.ir-divi .ir-historia-oscura::before{
  content:""; position:absolute; z-index:0;
  width:46vw; height:46vw; left:-14vw; bottom:-26vw;
  background:#005D9A; opacity:.35; border-radius:50%; filter:blur(110px);
}
.ir-divi .ir-historia-oscura > .et_pb_row{ position:relative; z-index:1; }
.ir-divi .ir-historia-oscura .ir-historia-cab h2{ color:#fff; }
.ir-divi .ir-historia-oscura .ir-historia-cab p:not(.ir-eyebrow){ color:rgba(255,255,255,.8); max-width:40rem; }
.ir-divi .ir-historia-oscura .ir-eyebrow{ background:rgba(255,255,255,.1); color:#fff; }
.ir-divi .ir-historia-oscura .ir-eyebrow::before{ background:var(--amarillo); }

.ir-divi .ir-historia-redes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; }
.ir-divi .ir-historia-redes > .et_pb_column{
  width:auto !important; margin:0 !important; float:none !important; min-width:0;
  background:#fff; border-radius:var(--v2-r-card); padding:1.6rem 1.5rem 1.8rem;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.55);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.ir-divi .ir-historia-redes > .et_pb_column:hover{ transform:translateY(-4px); }
.ir-divi .ir-historia-redes .et_pb_image{ display:flex; align-items:center; height:3.6rem; margin:0 0 1.4rem; }
.ir-divi .ir-historia-redes .et_pb_image img{
  width:auto; max-width:100%; max-height:3.6rem; object-fit:contain; border-radius:0; box-shadow:none;
}
.ir-divi .ir-historia-redes .et_pb_text{ margin:0; }
.ir-divi .ir-historia-redes .ir-red__rol{
  margin:0 0 .8rem; font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#D7292E;
}
.ir-divi .ir-historia-redes h3{
  margin:0 0 .25rem; font-family:var(--v2-display); font-size:1.7rem; font-weight:700;
  line-height:1.1; letter-spacing:-.02em; color:var(--marino);
}
.ir-divi .ir-historia-redes .ir-red__nombre{ margin:0 0 1rem; font-size:.86rem; line-height:1.45; color:#4A5170; }
.ir-divi .ir-historia-redes .ir-red__texto{ margin:0; font-size:.95rem; line-height:1.6; color:#2B3150; }

.ir-divi .ir-historia-suma-fila,
.ir-divi .ir-historia-suma-fila .et_pb_button_module_wrapper{ text-align:center; }
.ir-divi .ir-historia-oscura .ir-historia-suma{
  margin:0 auto 1.4rem; max-width:40rem;
  font-family:var(--v2-display); font-size:clamp(1.1rem,1.7vw,1.35rem); line-height:1.45; color:#fff;
}
.ir-divi .ir-historia-oscura .et_pb_button{
  background:#fff !important; color:var(--marino) !important; border-color:#fff !important;
}
.ir-divi .ir-historia-oscura .et_pb_button:hover{
  background:var(--amarillo) !important; border-color:var(--amarillo) !important;
}
.ir-divi .ir-historia-oscura .et_pb_button:focus-visible{ outline:2px solid var(--amarillo); outline-offset:3px; }

/* 4 · la línea de tiempo */
.ir-divi .ir-historia-hitos > .et_pb_row{ max-width:62rem; }
.ir-divi .ir-historia-hitos .ir-historia-cab{ padding-bottom:2.2rem !important; }
/* Cada hito es una fila de Divi, pero la línea y el punto van en su columna y
   no en la fila. Así la fila conserva sus márgenes laterales, que en el
   teléfono son los que separan el texto del borde, y su ::after queda libre
   para el despeje que usa Divi. Con las filas sin relleno vertical y el aire
   dentro de la columna, la línea sigue continua de un hito al siguiente. */
.ir-divi .ir-historia-hitos .ir-hito{ margin-block:0 !important; padding-top:0 !important; padding-bottom:0 !important; }
.ir-divi .ir-historia-hitos .ir-hito > .et_pb_column{
  position:relative; float:none !important; width:100% !important; margin:0 !important;
  padding:0 0 clamp(2rem,3.4vw,2.8rem) 2.9rem !important;
}
.ir-divi .ir-historia-hitos .ir-hito > .et_pb_column::before{
  content:""; position:absolute; left:.6rem; top:.4rem; bottom:0; width:2px;
  background:rgba(20,27,77,.14);
}
.ir-divi .ir-historia-hitos .ir-hito > .et_pb_column::after{
  content:""; position:absolute; left:0; top:.3rem; width:1.28rem; height:1.28rem;
  box-sizing:border-box; border-radius:50%; background:#fff; border:3px solid var(--rojo);
}
.ir-divi .ir-historia-hitos .ir-hito .et_pb_text{ margin:0; }
.ir-divi .ir-hito .et_pb_text_inner{
  display:grid; grid-template-columns:minmax(0,12.5rem) minmax(0,1fr);
  column-gap:clamp(1.2rem,3vw,2.4rem); align-items:baseline;
}
.ir-divi .ir-hito .ir-hito__anio{
  grid-row:1 / span 2; margin:0; white-space:nowrap;
  font-family:var(--v2-display); font-weight:700; line-height:1; letter-spacing:-.03em;
  font-size:clamp(1.9rem,3.2vw,2.6rem); color:var(--marino); font-variant-numeric:tabular-nums;
}
.ir-divi .ir-hito .ir-hito__evento{
  margin:0 0 .45rem; font-size:.72rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#D7292E;
}
.ir-divi .ir-hito .ir-hito__texto{ margin:0; max-width:42rem; font-size:1rem; line-height:1.68; color:#2B3150; }
.ir-divi .ir-hito .ir-hito__texto sup{ font-size:.62em; }

/* El último hito, la firma del memorándum, cierra la historia en marino. La
   tarjeta es el módulo de texto y no la columna, para que el punto y la línea
   queden fuera de ella. Abajo, el mismo aire que deja cualquier sección. */
.ir-divi .ir-historia-hitos .ir-hito--final{ padding-bottom:5.2rem !important; }
.ir-divi .ir-historia-hitos .ir-hito--final > .et_pb_column{ padding-bottom:0 !important; }
.ir-divi .ir-historia-hitos .ir-hito--final .et_pb_text{
  background:var(--marino); border-radius:var(--v2-r-card); box-shadow:var(--v2-sombra-alta);
  padding:clamp(1.4rem,3vw,2.1rem) clamp(1.3rem,3vw,2.2rem);
}
.ir-divi .ir-historia-hitos .ir-hito--final > .et_pb_column::before{
  top:0; bottom:auto; height:calc(clamp(1.4rem,3vw,2.1rem) + .5rem);
}
.ir-divi .ir-historia-hitos .ir-hito--final > .et_pb_column::after{
  top:calc(clamp(1.4rem,3vw,2.1rem) + .3rem);
  background:var(--amarillo); border-color:var(--marino); box-shadow:0 0 0 6px rgba(254,209,65,.3);
}
.ir-divi .ir-hito--final .ir-hito__anio{ color:var(--amarillo); }
.ir-divi .ir-hito--final .ir-hito__evento{ color:rgba(255,255,255,.75); }
.ir-divi .ir-hito--final .ir-hito__texto{
  color:#fff; font-family:var(--v2-display); font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.5;
}

@media (max-width:900px){
  .ir-divi .ir-historia-relato{ grid-template-columns:1fr; }
  .ir-divi .ir-historia-relato > .et_pb_column:last-child{ position:static; }
  .ir-divi .ir-historia-redes{ grid-template-columns:1fr; gap:.9rem; }
  .ir-divi .ir-hito .et_pb_text_inner{ grid-template-columns:1fr; }
  .ir-divi .ir-hito .ir-hito__anio{ grid-row:auto; margin:0 0 .55rem; }
}

@media (prefers-reduced-motion:reduce){
  .ir-divi .ir-historia-redes > .et_pb_column{ transition:none; }
  .ir-divi .ir-historia-redes > .et_pb_column:hover{ transform:none; }
}

/* Viñetas de la prosa en el rojo de la marca, el mismo del punto de las
   volantas, y un respiro entre ítems largos. */
.ir-divi .ir-prosa li::marker{ color:var(--rojo); }
.ir-divi .ir-prosa li + li{ margin-top:.45rem; }

/* ---------- anuncio de la ESIES (ventana emergente) ----------
   Fondo propio en vez de una fotografía, con el mismo lenguaje que el resto
   del sitio: marino, la trama de la red detrás y una bruma azul. El logotipo
   va sobre blanco porque su tipografía es marina y sobre el fondo oscuro
   desaparecería. */
.ir-esies{
  position:relative; overflow:hidden; isolation:isolate; text-align:center; color:#fff;
  background:linear-gradient(158deg,#182055 0%,#0E1438 52%,#1B2566 100%);
  border-radius:var(--v2-r-grande,28px); box-shadow:0 30px 80px -24px rgba(6,10,30,.7);
}
.ir-esies .ir-red-fondo{ z-index:0; opacity:.6; }
.ir-esies::after{
  content:""; position:absolute; z-index:0; width:62%; aspect-ratio:1; right:-20%; top:-30%;
  background:#005D9A; opacity:.5; border-radius:50%; filter:blur(70px); pointer-events:none;
}
.ir-esies__in{
  position:relative; z-index:1; display:grid; justify-items:center; gap:.9rem;
  padding:2.6rem 1.8rem 2.2rem;
}
.ir-esies__logo{
  width:min(16rem,78%); height:auto; background:#fff;
  border-radius:14px; padding:.9rem 1.1rem;
}
.ir-esies__titular{
  margin:.3rem 0 0; font-family:var(--v2-display,inherit); font-weight:700; color:#fff;
  font-size:clamp(2.3rem,7.5vw,3.2rem); line-height:1; letter-spacing:-.02em;
}
.ir-esies__fecha{ margin:0; display:flex; align-items:baseline; gap:.55rem; }
.ir-esies__fecha b{ font-family:var(--v2-display,inherit); font-size:2.1rem; font-weight:700; line-height:1; color:#fff; }
.ir-esies__fecha span{ font-size:.9rem; font-weight:600; letter-spacing:.16em; color:var(--amarillo,#FED141); }
.ir-esies__lugar{
  margin:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.55rem; font-size:.95rem; color:#C6D0E6;
}
.ir-esies__lugar .ir-tag{ background:rgba(255,255,255,.16); color:#fff; }
.ir-esies__cta.ir-btn{ margin-top:.7rem; background:#fff !important; color:#141B4D !important; border-color:#fff !important; }
.ir-esies__cta.ir-btn:hover{ background:var(--amarillo,#FED141) !important; color:#141B4D !important; }

/* El velo del plugin viene blanco y opaco, y tapa la página entera como si
   se hubiera vaciado. Aquí se cambia por el marino del sitio a media tinta,
   con la página desenfocada detrás: se entiende que sigue ahí. */
.pum-overlay{
  background-color:rgba(10,14,40,.42) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}

/* La caja del plugin de ventanas se aparta: el anuncio trae su propio fondo,
   su propio radio y su propia sombra. */
.pum-container:has(.ir-esies){
  background:transparent !important; box-shadow:none !important;
  padding:0 !important; border:0 !important; border-radius:var(--v2-r-grande,28px) !important;
  max-width:min(27rem,92vw) !important;
}
.pum-container:has(.ir-esies) .pum-content{ padding:0 !important; }
.pum-container:has(.ir-esies) .pum-close{
  top:.7rem !important; right:.7rem !important; width:2.1rem; height:2.1rem; line-height:2.1rem;
  border-radius:999px !important; background:rgba(255,255,255,.16) !important; color:#fff !important;
  border:0 !important; font-size:1.1rem !important; padding:0 !important;
}
.pum-container:has(.ir-esies) .pum-close:hover{ background:rgba(255,255,255,.3) !important; }

/* ---------- dos botones seguidos ----------
   En DIVI cada botón es un módulo con su propia caja de bloque, así que dos
   seguidos se apilan aunque sobre sitio en la línea. Solo se tocan los que
   tienen otro botón pegado: un botón solo se queda como esté. */
.ir-divi .et_pb_button_module_wrapper:has(+ .et_pb_button_module_wrapper),
.ir-divi .et_pb_button_module_wrapper + .et_pb_button_module_wrapper{
  display:inline-block; vertical-align:top;
}
.ir-divi .et_pb_button_module_wrapper + .et_pb_button_module_wrapper{ margin-left:.9rem; }

/* ---------- aviso de cookies ----------
   Tarjeta pequeña abajo a la izquierda; a la derecha vive el botón de
   accesibilidad y no se pisan. Aceptar y Rechazar son iguales a propósito. */
.ir-cookies{
  position:fixed; z-index:99990; inset-inline-start:1rem; inset-block-end:1rem;
  width:min(23rem, calc(100vw - 2rem));
  background:#fff; color:var(--marino); border:1px solid var(--v2-linea);
  border-radius:18px; box-shadow:var(--v2-sombra-alta);
  padding:.95rem 1rem .9rem; font:400 .86rem/1.45 var(--v2-sans);
}
.ir-cookies[hidden], .ir-cookies__panel[hidden]{ display:none; }
/* Los componentes de WordPress, que se cargan con la sesión iniciada, fijan
   `[role="region"]{position:relative}` después de esta hoja y le ganaban: la
   caja dejaba de flotar y abría un hueco bajo el pie. Con el atributo en el
   selector, esta regla pesa más. */
.ir-cookies[role="region"]{ position:fixed; }
.ir-cookies__texto{ margin:0 0 .7rem; color:#2B3355; }
.ir-cookies__texto a{ color:var(--azul); font-weight:600; text-underline-offset:3px; }
.ir-cookies__acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; }
.ir-cookies__btn{
  font:600 .82rem/1 var(--v2-sans); min-height:38px; padding:.6rem 1.05rem;
  border-radius:999px; border:1px solid var(--marino); background:var(--marino); color:#fff; cursor:pointer;
}
.ir-cookies__btn:hover{ background:#0E1438; border-color:#0E1438; }
.ir-cookies__enlace{
  min-height:38px; padding:.4rem .35rem; background:none; border:0; cursor:pointer;
  font:600 .82rem/1 var(--v2-sans); color:var(--marino); text-decoration:underline; text-underline-offset:3px;
}
.ir-cookies__panel{ margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--v2-linea); display:grid; gap:.65rem; justify-items:start; }
.ir-cookies__opcion{ display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:start; font-size:.82rem; color:#2B3355; cursor:pointer; }
.ir-cookies__opcion b{ display:block; color:var(--marino); }
.ir-cookies__opcion input{ width:18px; height:18px; margin:.15rem 0 0; accent-color:var(--marino); }
.ir-cookies :focus-visible{ outline:3px solid var(--azul); outline-offset:2px; }

/* En el teléfono, franja baja a todo el ancho, y el botón de accesibilidad sube
   por encima mientras se ve. */
@media (max-width:640px){
  .ir-cookies{
    inset-inline:.6rem; inset-block-end:.6rem; width:auto;
    padding:.7rem .8rem .7rem; border-radius:14px; font-size:.8rem;
  }
  .ir-cookies__texto{ margin-bottom:.5rem; }
  .ir-cookies__btn{ min-height:36px; padding:.5rem .9rem; font-size:.8rem; }
  .ir-cookies__enlace{ min-height:36px; font-size:.8rem; }
  html.ir-cookies-visible .ir-a11y{ inset-block-end:calc(var(--ir-cookies-alto, 7.5rem) + 1.1rem); }
}
@media (prefers-reduced-motion:no-preference){
  .ir-cookies{ animation:ir-cookies-entra .35s ease-out both; }
  @keyframes ir-cookies-entra{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
}

/* Enlaces legales del pie. */
.ir-footer__legal{ display:inline-flex; flex-wrap:wrap; gap:.3rem 1rem; align-items:center; }
.ir-footer__legal a, .ir-footer__cookies{
  color:inherit; font:inherit; background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; opacity:.85;
}
.ir-footer__legal a:hover, .ir-footer__cookies:hover{ opacity:1; }

/* Carátula de vídeo sin imagen propia: la de los eventos, que no se trae la
   miniatura de YouTube para no llamar a Google antes de que nadie lo pida. */
.ir-video-ficha__tapa--sin-imagen{
  display:grid; place-items:center; aspect-ratio:16/9;
  background:linear-gradient(158deg,#182055 0%,#0E1438 60%,#1B2566 100%);
}