/*
Theme Name:   PEI (Divi child)
Theme URI:    https://peicolombia.org
Description:  Tema hijo de Divi para los sitios PEI de ONUDI / GEIPP. Aplica la identidad oficial de la guía UNIDO 60 years y aligera lo que Divi carga de más.
Author:       IDEAS IN LAB para PEI / ONUDI
Author URI:   https://ideasinlab.com
Template:     Divi
Version:      0.6.4
Text Domain:  pei-child
*/

/* ============================================================
   Identidad oficial — guía UNIDO 60 years
   ============================================================ */
:root {
  --pei-azul: #0059ab;
  --pei-azul-claro: #009cdc;
  --pei-naranja: #f47b41;
  --pei-verde: #84bf41;
  --pei-gris: #58595b;

  --pei-tinta: #1f262c;
  --pei-tinta-suave: #55606a;
  --pei-papel: #f2f5f8;
  --pei-linea: #d5dee6;
}

/* ============================================================
   Tipografía — Fira Sans, la oficial. Solo 3 pesos.
   ============================================================ */
body,
.et_pb_module,
input, select, textarea, button {
  font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.et_pb_slide_title, .et_pb_module_header {
  font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* La guía titula grande. Hoy los sitios van a 40px; esto sube la escala. */
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.18; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.25; }

body { color: var(--pei-tinta); }

/* ============================================================
   Color — jerarquía de la guía: los azules dominan, el naranja
   se reserva para acentos. Hoy el naranja es el botón principal,
   que es justo lo que la guía desaconseja.
   ============================================================ */
a { color: var(--pei-azul); }
a:hover { color: var(--pei-azul-claro); }

/* Botones de Divi que no traen color propio: el azul institucional, esquina
   recta y sin versalitas. Sin !important a proposito — un modulo que si define
   sus colores (las cronicas de los encuentros, por ejemplo) debe conservarlos;
   forzarlos aqui dejaba texto azul claro sobre fondo azul oscuro. */
.et_pb_button,
.et_pb_button:hover {
  border-radius: var(--pei-radio, 0px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
/* Los que no traen color propio lo toman del Personalizador de Divi, ya
   ajustado al azul institucional. */

/* El naranja solo para el acento y el estado. */
.pei-acento { color: var(--pei-naranja); }
.et_pb_button.pei-cta-acento,
.et_pb_button.pei-cta-acento:hover {
  background-color: var(--pei-naranja) !important;
  border-color: var(--pei-naranja) !important;
}

/* Sin degradados ni sombras: la guía trabaja con bloques sólidos. */
.et_pb_section, .et_pb_row, .et_pb_module { box-shadow: none; }

/* ============================================================
   Patrón de marca: tres cuadrados sobre un arco.
   Se aplica con la clase .pei-patron en cualquier sección Divi.
   ============================================================ */
.pei-patron { position: relative; overflow: hidden; }
.pei-patron::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 24px;
  width: 132px;
  height: 96px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220'%3E%3Cpath d='M20 205C60 150 130 95 205 70' stroke='%230059ab' stroke-width='17' fill='none'/%3E%3Crect x='196' y='52' width='30' height='30' fill='%230059ab' transform='rotate(18 211 67)'/%3E%3Crect x='228' y='28' width='30' height='30' fill='%2384bf41' transform='rotate(18 243 43)'/%3E%3Crect x='258' y='6' width='30' height='30' fill='%23f47b41' transform='rotate(18 273 21)'/%3E%3C/svg%3E");
}

/* ============================================================
   Accesibilidad
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--pei-naranja);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   La retícula de Divi, sin las líneas que dibujan una tabla
   ============================================================ */

/* Divi pinta una línea vertical de separación de sidebar con
   #main-content .container::before, incluso en plantillas sin sidebar.
   Es la línea del lado izquierdo que recorre toda la página. */
#main-content .container::before { display: none !important; }

/* Ancho fluido. Divi aplica width:80% fijo, que en pantallas grandes deja
   los márgenes enormes y en tablets los deja mínimos. */
.container,
#main-content .container,
.et_pb_row {
  width: 100% !important;
  max-width: var(--pei-ancho, 1366px) !important;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
}
.et_pb_row { padding-left: 0; padding-right: 0; }

/* Las secciones a sangre no heredan el padding lateral. */
.et_pb_fullwidth_section > .et_pb_module { max-width: none; }

/* ============================================================
   Medida de lectura
   El contenedor puede ser ancho; el texto no. unido.org usa un
   contenedor de 1440 px y una columna de texto de 786 (56 caracteres).
   Sin esto, a 1200 salían líneas de 154 caracteres.
   ============================================================ */
.et_pb_text p,
.et_pb_text ul,
.et_pb_text ol,
.et_pb_post_content p,
.entry-content > p,
.pei-convocatoria__email { max-width: 68ch; }

/* Los títulos admiten una medida algo más corta: se leen de un vistazo. */
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3,
.entry-content h1, .entry-content h2, .entry-content h3 { max-width: 26ch; text-wrap: balance; }

/* Centrado explícito cuando el módulo lo pide, para que el max-width no
   desalinee lo que estaba centrado. */
.et_pb_text_align_center .et_pb_text_inner > * { margin-left: auto; margin-right: auto; }

/* ============================================================
   Bloques del inicio
   Van dentro de módulos de texto de Divi para que el equipo de
   comunicaciones pueda editar los textos desde el constructor.
   El aspecto lo manda esta hoja, no los ajustes del módulo.
   ============================================================ */

/* Marca de borrador: se quita borrando la clase pei-borrador. */
.pei-borrador { position: relative; }
.pei-borrador::before {
  content: "Propuesta · texto de relleno";
  position: absolute; top: 0; left: 0; z-index: 3;
  background: #fde9d9; color: #a8480f;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px;
}

.pei-bloque { padding: clamp(48px, 6vw, 84px) 0; }
.pei-bloque--papel { background: var(--pei-papel, #f2f5f8); }
.pei-bloque--azul { background: var(--pei-azul, #0059ab); color: #fff; }

.pei-antetitulo {
  margin: 0 0 10px; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--pei-naranja, #f47b41);
}
.pei-bloque--azul .pei-antetitulo { color: #ffd2b8; }
.pei-bloque h2 {
  margin: 0 0 16px; font-size: clamp(26px, 3vw, 38px); line-height: 1.15;
  color: var(--pei-azul, #0059ab); max-width: 20ch; text-wrap: balance;
}
.pei-bloque--azul h2 { color: #fff; }
.pei-bloque > p { max-width: 68ch; }

/* --- dos columnas: texto + imagen --- */
.pei-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .pei-duo { grid-template-columns: 1fr; } }

/* --- hueco de imagen, sin archivo: se sustituye por un <img> --- */
.pei-hueco {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #e3eaf1 0 12px, #dde5ee 12px 24px);
  border: 1px dashed #a9bccd;
  color: #5c7086;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-align: center;
  aspect-ratio: 3 / 2;
}
.pei-hueco--alto { aspect-ratio: 3 / 4; }
.pei-hueco--ancho { aspect-ratio: 21 / 9; }

/* --- cifras --- */
.pei-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px); }
@media (max-width: 860px) { .pei-cifras { grid-template-columns: repeat(2, 1fr); } }
.pei-cifra__n {
  display: block; font-size: clamp(34px, 4.6vw, 56px); font-weight: 700;
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.pei-cifra__t { display: block; margin-top: 10px; font-size: 15px; line-height: 1.35; color: rgba(255,255,255,.88); }
.pei-cifra__n { white-space: nowrap; }
.pei-cifras__nota { margin: clamp(24px, 3vw, 36px) 0 0; font-size: 13px; line-height: 1.5; opacity: .8; }
.et_pb_section.pei-bloque--azul .pei-cifras__nota { color: rgba(255, 255, 255, .8) !important; }

/* --- rejilla de tarjetas --- */
.pei-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 34px); }
@media (max-width: 900px) { .pei-tarjetas { grid-template-columns: 1fr; } }
.pei-tarjeta { display: flex; flex-direction: column; background: #fff; }
.pei-bloque--papel .pei-tarjeta { background: #fff; }
.pei-tarjeta__cuerpo { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.pei-tarjeta h3 {
  margin: 0 0 8px; font-size: 19px; line-height: 1.25;
  color: var(--pei-azul, #0059ab); max-width: none;
}
.pei-tarjeta p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--pei-tinta-suave, #55606a); max-width: none; }
.pei-tarjeta .pei-btn { margin-top: auto; align-self: flex-start; }
.pei-tarjeta__meta {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pei-naranja, #f47b41);
}

/* --- azulejos de recursos --- */
.pei-azulejos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--pei-linea, #d5dee6); }
@media (max-width: 860px) { .pei-azulejos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pei-azulejos { grid-template-columns: 1fr; } }
.pei-azulejo {
  display: block; background: #fff; padding: 26px 24px 30px;
  text-decoration: none; color: inherit;
  transition: background .15s;
}
.pei-azulejo:hover { background: var(--pei-papel, #f2f5f8); }
.pei-azulejo strong { display: block; font-size: 18px; color: var(--pei-azul, #0059ab); margin-bottom: 6px; }
.pei-azulejo span { display: block; font-size: 14px; line-height: 1.5; color: var(--pei-tinta-suave, #55606a); }

/* --- banda de boletín --- */
.pei-suscripcion { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 3vw, 44px); }
.pei-suscripcion > div { flex: 1 1 380px; }
.pei-suscripcion h2 { margin-bottom: 8px; }
.pei-suscripcion .pei-btn {
  border-color: #fff; color: #fff; flex: 0 0 auto;
}
.pei-suscripcion .pei-btn:hover { background: #fff; color: var(--pei-azul, #0059ab); }

/* Caja interior de las bandas a sangre: la banda ocupa toda la ventana,
   el contenido se queda en el ancho de lectura del sitio. */
.pei-caja {
  width: 100%;
  max-width: var(--pei-ancho, 1200px);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
/* Dentro de los bloques del inicio mandan las medidas de la rejilla, no el
   límite general de 68 caracteres de los módulos de texto de Divi. */
.pei-bloque .et_pb_text_inner > .pei-caja,
.pei-caja .pei-duo, .pei-caja .pei-cifras,
.pei-caja .pei-tarjetas, .pei-caja .pei-azulejos { max-width: none; }

/* --- Tarjeta de noticia -------------------------------------------------
   La usa el shortcode [pei_entradas]. Toda la tarjeta es un solo enlace: el
   titular lleva un ::after que cubre la caja, así no hay tres enlaces
   distintos con tres comportamientos distintos al pasar el raton, que era
   justo el problema del modulo de blog de Divi. */
.pei-tarjetas--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .pei-tarjetas--2 { grid-template-columns: 1fr; } }
.pei-tarjeta--nota { position: relative; transition: box-shadow .18s ease, transform .18s ease; }
.pei-tarjeta--nota:hover { box-shadow: 0 10px 28px rgba(31, 38, 44, .12); transform: translateY(-2px); }
.pei-tarjeta__foto { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--pei-papel, #f2f5f8); }
.pei-tarjeta__foto img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.pei-tarjeta--nota:hover .pei-tarjeta__foto img { transform: scale(1.04); }
.pei-tarjeta__sinfoto {
  display: block; width: 100%; height: 100%;
  background: repeating-linear-gradient(135deg, #e3eaf1 0 12px, #dde5ee 12px 24px);
}
#page-container .pei-tarjeta--nota h3 a { color: inherit; text-decoration: none; font-size: inherit; }
.pei-tarjeta--nota h3 a::after { content: ""; position: absolute; inset: 0; }
.pei-tarjeta__mas {
  margin-top: auto; padding-top: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pei-naranja, #f47b41);
}
.pei-tarjeta__mas::after { content: " \2192"; }
.et_pb_section.pei-bloque .pei-tarjeta--nota:hover h3,
.et_pb_section.pei-bloque .pei-tarjeta--nota:hover h3 a { color: var(--pei-naranja, #f47b41) !important; }

/* Rail de categorias del listado de noticias. */
.pei-notas__rail { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
#page-container .pei-notas__rail .pei-rail__item {
  font-size: 13px; font-weight: 600; text-decoration: none;
  padding: 7px 14px; border: 1px solid var(--pei-linea, #d5dee6);
  color: var(--pei-tinta-suave, #55606a);
}
#page-container .pei-notas__rail .pei-rail__item:hover { border-color: var(--pei-azul, #0059ab); color: var(--pei-azul, #0059ab); }
#page-container .pei-notas__rail .pei-rail__item.es-activo {
  background: var(--pei-azul, #0059ab); border-color: var(--pei-azul, #0059ab); color: #fff;
}
.pei-notas__rail .pei-rail__count { margin-left: 6px; opacity: .6; font-variant-numeric: tabular-nums; }
.pei-notas .pei-paginacion { margin-top: 34px; }
.pei-bloque .et_pb_text p { max-width: 68ch; }
.pei-bloque .pei-tarjeta p, .pei-bloque .pei-azulejo span,
.pei-bloque .pei-cifra__t { max-width: none; }
.pei-bloque .et_pb_text h2 { max-width: 20ch; }
.pei-bloque .et_pb_text h3 { max-width: none; }

/* ============================================================
   Blindaje contra el CSS estático de Divi
   et-cache guarda reglas con !important atadas al número de sección y de
   módulo (por ejemplo `.et_pb_text_1.et_pb_text{color:#009CDC!important}`).
   Al añadir o quitar secciones esas reglas caen sobre bloques que no son los
   suyos: por eso el texto de los bloques nuevos salía azul claro y la banda
   del boletín no era del azul institucional. Aquí los bloques del inicio
   fijan su color con la misma arma, y así el resultado no depende de que la
   caché esté fresca.
   ============================================================ */
.et_pb_section.pei-bloque .et_pb_text,
.et_pb_section.pei-bloque .et_pb_text p,
.et_pb_section.pei-bloque .et_pb_text li { color: var(--pei-tinta, #1f262c) !important; }
.et_pb_section.pei-bloque .et_pb_text h2,
.et_pb_section.pei-bloque .et_pb_text h3 { color: var(--pei-azul, #0059ab) !important; }
.et_pb_section.pei-bloque .pei-antetitulo,
.et_pb_section.pei-bloque .pei-tarjeta__meta { color: var(--pei-naranja, #f47b41) !important; }
.et_pb_section.pei-bloque .pei-tarjeta p,
.et_pb_section.pei-bloque .pei-azulejo span { color: var(--pei-tinta-suave, #55606a) !important; }
.et_pb_section.pei-bloque .pei-azulejo strong { color: var(--pei-azul, #0059ab) !important; }
.et_pb_section.pei-bloque:not(.pei-bloque--azul) .pei-btn:not(.pei-btn--solido) { color: var(--pei-azul, #0059ab) !important; }
.et_pb_section.pei-bloque:not(.pei-bloque--azul) .pei-btn:not(.pei-btn--solido):hover { color: #fff !important; }
.et_pb_section.pei-bloque .pei-btn--solido { color: #fff !important; }

/* El aire de los bloques no puede depender de la caja: Divi guarda en et-cache
   un `.et_pb_section_N{padding-top:0}` por cada seccion, con la misma
   especificidad que .pei-bloque y mas abajo en la hoja, asi que la gana. */
#page-container .et_pb_section.pei-bloque { padding: clamp(48px, 6vw, 84px) 0; }

body .et_pb_section.pei-bloque--papel { background: var(--pei-papel, #f2f5f8) !important; }
body .et_pb_section.pei-bloque--azul { background: var(--pei-azul, #0059ab) !important; }
.et_pb_section.pei-bloque--azul .et_pb_text,
.et_pb_section.pei-bloque--azul .et_pb_text p,
.et_pb_section.pei-bloque--azul .et_pb_text li,
.et_pb_section.pei-bloque--azul .et_pb_text h2,
.et_pb_section.pei-bloque--azul .et_pb_text h3 { color: #fff !important; }
.et_pb_section.pei-bloque--azul .pei-antetitulo { color: #ffd2b8 !important; }
.et_pb_section.pei-bloque--azul .pei-cifra__t { color: rgba(255, 255, 255, .88) !important; }
.et_pb_section.pei-bloque--azul .pei-btn { color: #fff !important; border-color: #fff !important; }
.et_pb_section.pei-bloque--azul .pei-btn:hover { background: #fff !important; color: var(--pei-azul, #0059ab) !important; }

/* Sobre fondo azul el boton principal se invierte: relleno blanco y tinta azul,
   para que se distinga del secundario, que queda solo con contorno. */
.et_pb_section.pei-bloque--azul .pei-btn--solido {
  background: #fff !important; color: var(--pei-azul, #0059ab) !important; border-color: #fff !important;
}
.et_pb_section.pei-bloque--azul .pei-btn--solido:hover {
  background: var(--pei-naranja, #f47b41) !important; color: #fff !important; border-color: var(--pei-naranja, #f47b41) !important;
}

/* Fila de botones dentro de un bloque. */
.pei-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.pei-acciones .pei-btn { margin: 0; }

/* Pie de una imagen a lo ancho. */
.pei-pie {
  margin: 12px auto 0; max-width: 70ch; text-align: center;
  font-size: 14px; line-height: 1.5; color: var(--pei-tinta-suave, #55606a);
}

/* ============================================================
   Noticias y eventos
   Sigue siendo el módulo de blog de Divi —se alimenta solo— pero
   con las tarjetas del resto del inicio: esquina viva, antetítulo
   naranja arriba, titular azul y el botón del sistema abajo.
   ============================================================ */
body .et_pb_section:has(.et_pb_blog_grid_wrapper) {
  padding: clamp(48px, 6vw, 84px) 0 !important;
  background: var(--pei-papel, #f2f5f8) !important;
}
.et_pb_section:has(.et_pb_blog_grid_wrapper) .et_pb_text h2 {
  font-size: clamp(26px, 3vw, 38px) !important;
  line-height: 1.15 !important;
  color: var(--pei-azul, #0059ab) !important;
  max-width: 20ch;
}

/* Rejilla: se respeta el maquetado de Divi, solo se igualan los huecos. */
.et_pb_blog_grid_wrapper .et_pb_salvattore_content { display: flex; gap: clamp(20px, 2.5vw, 34px); }
.et_pb_blog_grid_wrapper .column.size-1of3,
.et_pb_blog_grid_wrapper .column.size-1of2 {
  float: none !important; width: auto !important; margin: 0 !important;
  display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 34px); flex: 1 1 0;
}
@media (max-width: 980px) {
  .et_pb_blog_grid_wrapper .et_pb_salvattore_content { flex-direction: column; }
}

.et_pb_blog_grid_wrapper .et_pb_post {
  display: flex; flex-direction: column; height: auto;
  margin: 0 !important; padding: 0 !important;
  background: #fff !important; border: 1px solid var(--pei-linea, #d5dee6) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
.et_pb_blog_grid_wrapper .et_pb_image_container { margin: 0 !important; }
.et_pb_blog_grid_wrapper .et_pb_image_container img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0 !important;
}
.et_pb_blog_grid_wrapper .post-meta {
  order: 1; margin: 20px 22px 6px !important; padding: 0 !important;
  font-size: 12px !important; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pei-naranja, #f47b41) !important;
}
.et_pb_blog_grid_wrapper .post-meta a { color: inherit !important; text-decoration: none; }
.et_pb_blog_grid_wrapper .post-meta a:hover { text-decoration: underline; }
.et_pb_blog_grid_wrapper .entry-title {
  order: 2; margin: 0 22px 10px !important; padding: 0 !important;
  font-size: 19px !important; line-height: 1.25 !important; font-weight: 700 !important;
}
.et_pb_blog_grid_wrapper .entry-title a { color: var(--pei-azul, #0059ab) !important; text-decoration: none; }
.et_pb_blog_grid_wrapper .entry-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.et_pb_blog_grid_wrapper .post-content {
  order: 3; margin: 0 22px 24px; display: flex; flex-direction: column; flex: 1 1 auto;
}
.et_pb_blog_grid_wrapper .post-content p {
  font-size: 15px !important; line-height: 1.55 !important;
  color: var(--pei-tinta-suave, #55606a) !important; margin: 0 0 16px !important;
}
body .et_pb_blog_grid_wrapper .et_pb_post a.more-link {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: auto; align-self: flex-start;
  padding: 11px 20px;
  border: 1px solid var(--pei-azul, #0059ab); border-radius: 0;
  color: var(--pei-azul, #0059ab) !important;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none !important;
  transition: background .15s, color .15s;
}
body .et_pb_blog_grid_wrapper .et_pb_post a.more-link::after {
  content: ""; width: 15px; height: 9px; flex: 0 0 auto;
  background: currentColor;
  clip-path: polygon(0 38%, 62% 38%, 62% 0, 100% 50%, 62% 100%, 62% 62%, 0 62%);
  transition: transform .18s ease;
}
body .et_pb_blog_grid_wrapper .et_pb_post a.more-link:hover { background: var(--pei-azul, #0059ab) !important; color: #fff !important; }
body .et_pb_blog_grid_wrapper .et_pb_post a.more-link:hover::after { transform: translateX(4px); }

/* La fila del blog venía al 60 % del ancho: las tarjetas quedaban en 180 px
   y los titulares se partían en cuatro renglones. */
.et_pb_section:has(.et_pb_blog_grid_wrapper) .et_pb_row {
  width: 100% !important;
  max-width: var(--pei-ancho, 1200px) !important;
  padding-left: clamp(20px, 4vw, 48px) !important;
  padding-right: clamp(20px, 4vw, 48px) !important;
}
.et_pb_blog_grid_wrapper .pagination { margin-top: 28px; font-size: 15px; }
.et_pb_blog_grid_wrapper .pagination a { color: var(--pei-azul, #0059ab); text-decoration: none; }
/* El módulo del blog venía al 80 % de su columna. */
.et_pb_section:has(.et_pb_blog_grid_wrapper) .et_pb_text,
.et_pb_section:has(.et_pb_blog_grid_wrapper) .et_pb_blog_grid_wrapper {
  width: 100% !important; max-width: none !important;
  margin-left: 0 !important; margin-right: 0 !important;
}

/* Las secciones armadas con filas de Divi dentro de un bloque tienen que
   respirar lo mismo que las que van dentro de .pei-caja: sin esto, el
   contenido arranca 48 px más a la izquierda que el del bloque de al lado. */
.pei-bloque .et_pb_row:not(:has(.pei-caja)) {
  padding-left: clamp(20px, 4vw, 48px) !important;
  padding-right: clamp(20px, 4vw, 48px) !important;
}

/* --- franja de la norma NTC 6720 --- */
.pei-bloque--franja { padding: clamp(26px, 3vw, 44px) 0 !important; }
.pei-norma {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(24px, 4vw, 60px);
}
.pei-norma img { display: block; height: auto; max-width: 100%; }
.pei-norma__icontec { width: clamp(170px, 18vw, 240px); }
.pei-norma__ntc { width: clamp(230px, 30vw, 390px); }
.pei-norma .pei-btn { flex: 0 0 auto; }

/* ============================================================
   Noticias: quitar los efectos del módulo de Divi
   El módulo trae sus propias reglas con !important: titular negro
   que se vuelve celeste al pasar por la tarjeta, y todo el texto
   —el botón incluido— en naranja mientras el cursor esté encima.
   Se anulan con el prefijo #page-container, que gana por
   especificidad, para que el único elemento que reaccione sea el
   botón, y solo cuando el cursor está sobre él.
   ============================================================ */
#page-container .et_pb_blog_grid_wrapper .et_pb_post,
#page-container .et_pb_blog_grid_wrapper .et_pb_post:hover { color: var(--pei-tinta, #1f262c) !important; }
#page-container .et_pb_blog_grid_wrapper .et_pb_post .entry-title a,
#page-container .et_pb_blog_grid_wrapper .et_pb_post:hover .entry-title a {
  color: var(--pei-azul, #0059ab) !important;
}
#page-container .et_pb_blog_grid_wrapper .et_pb_post .entry-title a:hover {
  color: var(--pei-azul-oscuro, #00417e) !important;
  text-decoration: underline; text-underline-offset: 3px;
}
#page-container .et_pb_blog_grid_wrapper .et_pb_post .post-content *,
#page-container .et_pb_blog_grid_wrapper .et_pb_post:hover .post-content * {
  color: var(--pei-tinta-suave, #55606a) !important;
}
#page-container .et_pb_blog_grid_wrapper .et_pb_post .post-meta,
#page-container .et_pb_blog_grid_wrapper .et_pb_post .post-meta a,
#page-container .et_pb_blog_grid_wrapper .et_pb_post:hover .post-meta,
#page-container .et_pb_blog_grid_wrapper .et_pb_post:hover .post-meta a {
  color: var(--pei-naranja, #f47b41) !important;
}
#page-container .et_pb_blog_grid_wrapper .et_pb_blog_grid .et_pb_post {
  background-color: #fff !important;
  border-color: var(--pei-linea, #d5dee6) !important;
}
/* El botón: mismo estado en reposo aunque el cursor esté sobre la tarjeta. */
#page-container .et_pb_blog_grid_wrapper .et_pb_post a.more-link,
#page-container .et_pb_blog_grid_wrapper .et_pb_post:hover a.more-link,
#page-container .et_pb_blog_grid_wrapper .et_pb_post .post-content a.more-link {
  color: var(--pei-azul, #0059ab) !important;
  background: transparent !important;
  font-variant: normal !important;
  text-transform: none !important;
}
#page-container .et_pb_blog_grid_wrapper .et_pb_post a.more-link:hover {
  background: var(--pei-azul, #0059ab) !important;
  color: #fff !important;
}

/* Todas las tarjetas de la misma altura: las columnas del módulo se
   estiran por igual y cada tarjeta reparte esa altura. */
.et_pb_blog_grid_wrapper .et_pb_salvattore_content { align-items: stretch; }
.et_pb_blog_grid_wrapper .et_pb_post { flex: 1 1 0; }
/* El titular de la sección venía centrado en su módulo y no coincidía con el
   borde izquierdo de las tarjetas. */
.et_pb_section:has(.et_pb_blog_grid_wrapper) .et_pb_text_inner > * {
  margin-left: 0 !important; margin-right: 0 !important; text-align: left !important;
}
/* La categoría es un enlace y Divi le daba 24 px: la fecha y la categoría
   tienen que ser la misma línea de texto. */
#page-container .et_pb_blog_grid_wrapper .et_pb_post .post-meta,
#page-container .et_pb_blog_grid_wrapper .et_pb_post .post-meta a,
#page-container .et_pb_blog_grid_wrapper .et_pb_post .post-meta span {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* --- cronología de hitos --- */
.pei-hitos { list-style: none; margin: 22px 0 0; padding: 0; }
.pei-hitos li {
  display: grid; grid-template-columns: 76px 1fr; gap: 0 20px;
  padding: 14px 0; border-top: 1px solid var(--pei-linea, #d5dee6);
}
.pei-hitos li:first-child { border-top: 0; padding-top: 0; }
.pei-hitos b {
  font-size: 20px; font-weight: 700; line-height: 1.2;
  color: var(--pei-azul, #0059ab); font-variant-numeric: tabular-nums;
}
.pei-hitos span { font-size: 15.5px; line-height: 1.55; }
@media (max-width: 560px) {
  .pei-hitos li { grid-template-columns: 1fr; gap: 2px; }
}

/* --- lista simple dentro de un bloque --- */
/* Ojo: la clase .pei-lista ya existe en el plugin para el listado de
   documentos. Esta rejilla a dos columnas se llama .pei-columnas. */
#page-container .pei-columnas,
#page-container .pei-columnas li { list-style: none !important; }
.pei-columnas { margin: 18px 0 0; padding: 0; columns: 2; column-gap: clamp(24px, 4vw, 56px); }
.pei-columnas li { break-inside: avoid; padding: 9px 0 9px 18px; position: relative; font-size: 16px; }
.pei-columnas li::before {
  content: ""; position: absolute; left: 0; top: 17px;
  width: 8px; height: 2px; background: var(--pei-naranja, #f47b41);
}
@media (max-width: 640px) { .pei-columnas { columns: 1; } }

/* Cuando una fila del bloque lleva un video al lado del texto, el video se
   centra en vertical en vez de quedar pegado arriba con un hueco debajo. */
.pei-bloque .et_pb_row:has(.et_pb_video) { display: flex; flex-wrap: wrap; align-items: center; }
.pei-bloque .et_pb_row:has(.et_pb_video) > .et_pb_column { float: none; }
@media (max-width: 980px) {
  .pei-bloque .et_pb_row:has(.et_pb_video) > .et_pb_column { width: 100% !important; margin-right: 0 !important; }
}

/* Fila de texto e imagen (.pei-par): el texto en 2/5 y la imagen en 3/5,
   centrados en vertical. Evita la mitad derecha vacia de un bloque solo de
   texto con la imagen debajo. */
.pei-bloque .et_pb_row.pei-par { display: flex; flex-wrap: wrap; align-items: center; }
.pei-bloque .et_pb_row.pei-par > .et_pb_column { float: none; }
.pei-par .pei-columnas { columns: 1; }
.pei-par .pei-pie { margin-top: 10px; }
@media (max-width: 980px) {
  .pei-bloque .et_pb_row.pei-par > .et_pb_column { width: 100% !important; margin-right: 0 !important; }
  .pei-bloque .et_pb_row.pei-par > .et_pb_column:first-child { margin-bottom: 28px !important; }
}

/* Divi respeta el alto que le devuelve oEmbed y solo estira el ancho, asi que
   un video puede acabar casi cuadrado. Fijamos el 16:9 para todos. */
#page-container .et_pb_video .et_pb_video_box { aspect-ratio: 16 / 9; height: auto; }
#page-container .et_pb_video .et_pb_video_box iframe,
#page-container .et_pb_video .et_pb_video_box video,
#page-container .et_pb_video .et_pb_video_box embed,
#page-container .et_pb_video .et_pb_video_box object {
  width: 100%; height: 100%; display: block;
}

/* --- rejilla de iconos con su leyenda --- */
.pei-iconos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(24px, 3vw, 38px);
}
.pei-icono { display: flex; flex-direction: column; gap: 12px; }
.pei-icono img {
  width: 72px; height: 72px; object-fit: contain;
  display: block; margin: 0;
}
.pei-icono span { font-size: 15.5px; line-height: 1.45; max-width: 34ch; }
.pei-bloque--azul .pei-icono span { color: rgba(255, 255, 255, .92); }
@media (max-width: 520px) {
  .pei-icono { flex-direction: row; align-items: flex-start; gap: 16px; }
  .pei-icono img { width: 52px; height: 52px; flex: 0 0 auto; }
}

/* ============================================================
   Equipo
   Cada ficha es foto + texto. En escritorio van en dos columnas
   y en móvil se apilan: primero la foto, después la ficha.
   ============================================================ */
.pei-equipo { display: grid; gap: 0; margin-top: clamp(24px, 3vw, 40px); }
.pei-persona {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
  padding: clamp(28px, 3.5vw, 44px) 0;
  border-top: 1px solid var(--pei-linea, #d5dee6);
}
.pei-persona:first-child { border-top: 0; padding-top: 0; }
.pei-persona__foto img { display: block; width: 100%; height: auto; }
.pei-persona__ficha h3 {
  margin: 0 0 6px; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.2;
  max-width: none;
}
.pei-persona__cargo {
  margin: 0 0 14px !important; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.pei-persona__ficha p { font-size: 16px; line-height: 1.6; }
.pei-persona__cita {
  margin: 18px 0 0; padding: 0 0 0 18px;
  border-left: 3px solid var(--pei-naranja, #f47b41);
  font-style: italic;
}
.pei-persona__cita p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.pei-persona__correo { margin: 14px 0 0 !important; font-size: 15px; }
.pei-persona__correo a { text-decoration: none; border-bottom: 1px solid rgba(0, 89, 171, .3); }
@media (max-width: 860px) {
  .pei-persona { grid-template-columns: 1fr; gap: 18px; }
}

/* Colores propios de la ficha, con la misma arma que el blindaje. */
.et_pb_section.pei-bloque .pei-persona__cargo { color: var(--pei-naranja, #f47b41) !important; }
.et_pb_section.pei-bloque .pei-persona__cita p { color: var(--pei-tinta-suave, #55606a) !important; }
.et_pb_section.pei-bloque .pei-persona__correo a { color: var(--pei-azul, #0059ab) !important; }

/* ============================================================
   Tamaño de los enlaces
   El CSS heredado del montaje original trae dos reglas con una
   coma de más:

     .w-text p, a, li            { font-size: clamp(1.4rem … 2rem) }
     .et_pb_newsletter_fields p, a { font-size: clamp(1.4rem … 2.4rem) }

   El selector suelto `a` no está acotado a nada, así que TODOS los
   enlaces del sitio se escalan solos y llegan a 24px en pantallas
   anchas: por eso el correo del equipo o la categoría de una noticia
   salían más grandes que el párrafo que los rodea. Aquí el enlace
   vuelve a heredar el tamaño del texto en el que vive; los botones
   conservan el suyo.
   ============================================================ */
#page-container .et_pb_text a:not(.pei-btn),
#page-container .pei-bloque a:not(.pei-btn),
#page-container .et_pb_post a:not(.more-link),
#page-container .et_pb_blog_grid_wrapper .pagination a { font-size: inherit; }

/* ============================================================
   Actores clave
   Cada actor es logo + ficha, con sus roles en lista. En móvil
   se apila: primero el logo, después el texto.
   ============================================================ */
.pei-actores { display: grid; gap: 0; margin-top: clamp(24px, 3vw, 40px); }
.pei-actor {
  display: grid; grid-template-columns: minmax(0, 220px) 1fr;
  gap: clamp(24px, 3vw, 48px); align-items: start;
  padding: clamp(28px, 3.5vw, 44px) 0;
  border-top: 1px solid var(--pei-linea, #d5dee6);
}
.pei-actor:first-child { border-top: 0; padding-top: 0; }
.pei-actor__logo { display: flex; align-items: flex-start; justify-content: center; }
.pei-actor__logo img { display: block; max-width: 100%; height: auto; max-height: 110px; object-fit: contain; }
.pei-actor__ficha h3 { margin: 0 0 14px; font-size: clamp(19px, 2vw, 23px); line-height: 1.25; max-width: 32ch; }
.pei-actor__roles { list-style: none; margin: 0; padding: 0; }
.pei-actor__roles li {
  position: relative; padding: 0 0 0 18px; margin: 0 0 12px;
  font-size: 15.5px; line-height: 1.55;
}
.pei-actor__roles li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 8px; height: 2px; background: var(--pei-naranja, #f47b41);
}
#page-container .pei-actor__roles li { list-style: none !important; }
.pei-actor__roles strong { font-weight: 600; }

/* --- rejilla de logos --- */
.pei-logos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2px; background: var(--pei-linea, #d5dee6);
  border: 1px solid var(--pei-linea, #d5dee6);
  margin-top: clamp(24px, 3vw, 36px);
}
.pei-logos__item {
  display: flex; align-items: center; justify-content: center;
  background: #fff; padding: 26px 22px; min-height: 130px;
}
.pei-logos__item img { display: block; max-width: 100%; max-height: 74px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 860px) {
  .pei-actor { grid-template-columns: 1fr; gap: 18px; }
  .pei-actor__logo { justify-content: flex-start; }
}

/* ============================================================
   Contacto
   Datos a la izquierda, formulario a la derecha; en móvil el
   formulario va debajo de los datos.
   ============================================================ */
.pei-contacto {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
@media (max-width: 900px) { .pei-contacto { grid-template-columns: 1fr; gap: 34px; } }

.pei-datos { margin: clamp(24px, 3vw, 34px) 0 0; }
.pei-datos > div { padding: 16px 0; border-top: 1px solid var(--pei-linea, #d5dee6); }
.pei-datos dt {
  margin: 0 0 4px; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.pei-datos dd { margin: 0; font-size: 16px; line-height: 1.55; }
.pei-datos dd span { color: var(--pei-tinta-suave, #55606a); }
.et_pb_section.pei-bloque .pei-datos dt { color: var(--pei-naranja, #f47b41) !important; }
.et_pb_section.pei-bloque .pei-datos dd span { color: var(--pei-tinta-suave, #55606a) !important; }
.et_pb_section.pei-bloque .pei-datos a { color: var(--pei-azul, #0059ab) !important; }

/* --- el formulario, con la misma esquina viva del resto --- */
.pei-contacto__formulario { background: var(--pei-papel, #f2f5f8); padding: clamp(24px, 3vw, 38px); }
.pei-contacto__formulario .wpforms-field { padding: 0 0 18px !important; }
.pei-contacto__formulario .wpforms-field-label {
  font-size: 14px !important; font-weight: 600 !important;
  color: var(--pei-tinta, #1f262c) !important; margin-bottom: 6px !important;
}
.pei-contacto__formulario .wpforms-field-sublabel {
  font-size: 12.5px !important; color: var(--pei-tinta-suave, #55606a) !important;
}
.pei-contacto__formulario input[type="text"],
.pei-contacto__formulario input[type="email"],
.pei-contacto__formulario input[type="tel"],
.pei-contacto__formulario select,
.pei-contacto__formulario textarea {
  width: 100% !important; max-width: none !important;
  padding: 11px 14px !important;
  border: 1px solid var(--pei-linea, #d5dee6) !important;
  border-radius: 0 !important;
  background: #fff !important;
  font-family: var(--pei-fuente, "Fira Sans", sans-serif) !important;
  font-size: 16px !important; color: var(--pei-tinta, #1f262c) !important;
  box-shadow: none !important;
}
.pei-contacto__formulario input:focus,
.pei-contacto__formulario select:focus,
.pei-contacto__formulario textarea:focus {
  outline: 2px solid var(--pei-naranja, #f47b41) !important;
  outline-offset: -2px;
  border-color: var(--pei-azul, #0059ab) !important;
}
.pei-contacto__formulario .wpforms-required-label { color: var(--pei-naranja, #f47b41) !important; }
.pei-contacto__formulario button[type="submit"] {
  padding: 12px 24px !important;
  border: 1px solid var(--pei-azul, #0059ab) !important;
  border-radius: 0 !important;
  background: var(--pei-azul, #0059ab) !important;
  color: #fff !important;
  font-family: var(--pei-fuente, "Fira Sans", sans-serif) !important;
  font-size: 15px !important; font-weight: 600 !important;
  transition: background .15s, border-color .15s;
}
.pei-contacto__formulario button[type="submit"]:hover {
  background: var(--pei-azul-oscuro, #00417e) !important;
  border-color: var(--pei-azul-oscuro, #00417e) !important;
}

/* El listado de documentos manda sobre la medida de lectura de 68
   caracteres que el tema aplica a las listas dentro de un módulo de texto. */
.pei-archivo ul, .pei-archivo li, .pei-archivo p { max-width: none; }
/* El botón del buscador es sólido aunque no lleve la clase --solido. */
.et_pb_section.pei-bloque:not(.pei-bloque--azul) .pei-buscador .pei-btn:not(.pei-btn--solido) { color: #fff !important; }

/* ============================================================
   Entrada individual (single.php)
   La plantilla de Divi ponía el titular pegado a una barra de metadatos y el
   cuerpo del texto a todo el ancho de la columna. Aquí la noticia se lee a la
   misma medida que el resto del sitio.
   ============================================================ */
.pei-nota__cabecera { padding-bottom: clamp(30px, 4vw, 44px); }
.pei-nota__titulo {
  margin: 0 0 10px; max-width: none;
  font-size: clamp(30px, 4.2vw, 50px); line-height: 1.08; letter-spacing: -.015em;
  color: var(--pei-azul, #0059ab); text-wrap: pretty;
}
.pei-nota__fecha {
  margin: 0; font-size: 14px; font-weight: 600;
  color: var(--pei-tinta-suave, #55606a);
}
.pei-nota__foto {
  margin: 0 auto; width: 100%; max-width: var(--pei-ancho, 1200px);
  padding: 0 clamp(20px, 4vw, 48px);
}
.pei-nota__foto img { display: block; width: 100%; height: auto; }
.pei-nota__cuerpo { padding-top: clamp(34px, 4vw, 52px); }
.pei-nota__texto { max-width: 68ch; }
.pei-nota__texto > * { max-width: none; }
.pei-nota__texto h2 { margin: 34px 0 12px; font-size: clamp(22px, 2.4vw, 30px); max-width: none; }
.pei-nota__texto h3 { margin: 28px 0 10px; font-size: 20px; color: var(--pei-azul, #0059ab); }
.pei-nota__texto p, .pei-nota__texto li { line-height: 1.65; }
.pei-nota__texto img { height: auto; max-width: 100%; }
.pei-nota__texto blockquote {
  margin: 26px 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--pei-naranja, #f47b41);
  font-size: 19px; line-height: 1.5; color: var(--pei-tinta, #1f262c);
}
.pei-nota__volver { margin-top: 38px; }
/* El cuerpo de la noticia va junto a una columna lateral (suscripción). Dentro
   del texto, los titulares de los módulos de Divi no deben heredar la medida
   corta de los titulares de bloque (20-26ch), que los partía en cinco líneas. */
.pei-nota__columnas { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.pei-nota__texto { max-width: 72ch; }
.pei-nota .pei-nota__texto h1,
.pei-nota .pei-nota__texto h2,
.pei-nota .pei-nota__texto h3,
.pei-nota .pei-nota__texto .et_pb_text h1,
.pei-nota .pei-nota__texto .et_pb_text h2,
.pei-nota .pei-nota__texto .et_pb_text h3 { max-width: none; }
/* Las filas de Divi traen 48 px de margen interior a cada lado guardados en la
   propia entrada: el texto quedaba sangrado respecto al titular. Se quitan,
   salvo en las filas con fondo de color, que sí necesitan su margen. */
.pei-nota .pei-nota__texto .et_pb_section,
.pei-nota .pei-nota__texto .et_pb_row { width: 100%; max-width: none; }
.pei-nota .pei-nota__texto .et_pb_section:not(.et_pb_with_background),
.pei-nota .pei-nota__texto .et_pb_row:not(.et_pb_with_background) { padding-left: 0 !important; padding-right: 0 !important; }
.pei-nota__relacionadas .pei-tarjetas { margin-top: 26px; }

/* ============================================================
   Videoteca
   ============================================================ */
.pei-tarjeta--video .pei-tarjeta__foto { position: relative; aspect-ratio: 16 / 9; }
.pei-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); border: 2px solid #fff;
  transition: background .18s ease, transform .18s ease;
}
.pei-play::after {
  content: ""; position: absolute; left: 52%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.pei-tarjeta--video:hover .pei-play { background: var(--pei-naranja, #f47b41); transform: translate(-50%, -50%) scale(1.06); }
.pei-play--grande { width: 86px; height: 86px; }
.pei-play--grande::after { border-width: 14px 0 14px 24px; }

.pei-reproductor { position: relative; }
.pei-reproductor__boton {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; cursor: pointer;
  background: #000; position: relative; line-height: 0;
}
.pei-reproductor__boton img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pei-reproductor:hover .pei-play { background: var(--pei-naranja, #f47b41); }
.pei-reproductor iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.pei-video__texto { margin-top: 34px; }
.pei-video .pei-pie { text-align: left; margin-left: 0; }

/* El cuerpo del boletin trae su propia maquetacion: aqui solo se le da aire. */
.pei-numero__cuerpo { padding: clamp(24px, 3vw, 40px) 0; }
/* Numero en la columna principal y suscripcion al lado, como en las noticias. */
.pei-numero__texto { max-width: 100%; overflow-x: auto; }
.pei-numero__texto table { max-width: 100% !important; }
.pei-numero__texto img { max-width: 100%; height: auto; }
.pei-numero__volver { margin-top: 32px; }
.pei-numero__texto .et_pb_section, .pei-numero__texto .et_pb_row { width: 100%; max-width: none; }
.pei-numero__texto .et_pb_section:not(.et_pb_with_background),
.pei-numero__texto .et_pb_row:not(.et_pb_with_background) { padding-left: 0 !important; padding-right: 0 !important; }

/* ============================================================
   Bloque de texto a dos columnas
   Un modulo de texto solo dentro de una columna de ancho completo deja la
   mitad derecha vacia: el parrafo se para a los 68 caracteres y no hay nada
   que ocupe el resto. Aqui el antetitulo y el titular se van a la izquierda y
   el texto a la derecha, que es como se lee una pagina editorial.
   ============================================================ */
.pei-doble {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .pei-doble { grid-template-columns: 1fr; gap: 6px; } }
.pei-doble > div > *:first-child { margin-top: 0; }
.et_pb_section.pei-bloque .pei-doble h2 { max-width: none; text-wrap: balance; }
.et_pb_section.pei-bloque .pei-doble p { max-width: 62ch; }
.pei-doble p:last-child { margin-bottom: 0; }

/* ============================================================
   Cronicas de los encuentros (paginas 2173 y 3322)
   El contenido no se toca. En la pagina del II Encuentro el texto se queda en
   su medida de lectura dentro de una columna de 1200, y el hueco de la derecha
   se ve como un error: aqui la fila baja al ancho del articulo, asi el texto y
   las imagenes comparten borde.
   ============================================================ */
.page-id-2173 #main-content .et_pb_row {
  max-width: 820px !important;
}
.page-id-2173 #page-container h1 {
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.08;
  letter-spacing: -.015em;
}
/* La medida de lectura la pone aqui la columna, no el limite de 68 y 26
   caracteres del sistema: con esa medida los titulares se partian a mitad de
   linea y parecian una rejilla de dos columnas. */
.page-id-2173 #main-content .et_pb_text p,
.page-id-2173 #main-content .et_pb_text ul,
.page-id-2173 #main-content .et_pb_text ol,
.page-id-2173 #main-content .et_pb_text h1,
.page-id-2173 #main-content .et_pb_text h2,
.page-id-2173 #main-content .et_pb_text h3,
.page-id-2173 #main-content .et_pb_text h4 { max-width: none; }

/* Divi pasa el contenido por wpautop, que convierte el salto de linea entre dos
   enlaces en un <br>. Dentro de una rejilla ese <br> cuenta como celda y parte
   la retícula: aqui se ignora. */
.pei-azulejos > br,
.pei-tarjetas > br,
.pei-cifras > br,
.pei-logos > br,
.pei-iconos > br,
.pei-acciones > br { display: none; }

/* Inicio, "GEIPP en el mundo": titular a dos lineas sobre todo el ancho;
   debajo, texto y video a mitades, alineados arriba para que no quede hueco. */
.pei-bloque.pei-mundo .et_pb_text h2 { max-width: 30ch; }
.pei-bloque.pei-mundo .et_pb_row:has(.et_pb_video) { align-items: flex-start; }
.pei-bloque.pei-mundo .et_pb_row:has(.et_pb_video) .et_pb_text p { line-height: 1.7; max-width: none; }
.pei-bloque.pei-mundo .et_pb_row:has(.et_pb_video) .et_pb_video { margin-top: 6px; }

/* ============================================================
   Página 404
   ============================================================ */
.pei-404__texto { max-width: 60ch; margin: 14px 0 0; font-size: 18px; line-height: 1.55; color: var(--pei-tinta-suave, #55606a); }
.pei-404__buscador { margin-top: clamp(22px, 3vw, 32px); max-width: 620px; }
.pei-404 .pei-acciones { margin-top: 6px; }
.pei-404__noticias { margin-top: clamp(40px, 5vw, 64px); }
.pei-404__noticias > .pei-antetitulo { margin-bottom: 18px; }

/* ============================================================
   Páginas legales (política de privacidad)
   Texto largo: medida de lectura, títulos de sección moderados y
   listas con aire.
   ============================================================ */
.pei-legal { max-width: 74ch; }
.et_pb_section .pei-legal p, .et_pb_section .pei-legal li { max-width: none; font-size: 16.5px; line-height: 1.7; }
.et_pb_section.pei-bloque .pei-legal h2 {
  max-width: none; margin: clamp(34px, 4vw, 48px) 0 12px;
  font-size: clamp(21px, 2.1vw, 25px); line-height: 1.25;
}
.et_pb_section.pei-bloque .pei-legal h2:first-child { margin-top: 0; }
.pei-legal ul { margin: 0 0 16px; padding-left: 1.2em; }
.pei-legal li { margin-bottom: 6px; }
.pei-legal li::marker { color: var(--pei-naranja, #f47b41); }
.pei-legal__aviso {
  margin: 0 0 32px; padding: 14px 18px; background: #fff4ec; border-left: 3px solid var(--pei-naranja, #f47b41);
  font-size: 14px; line-height: 1.5;
}
.et_pb_section .pei-legal__aviso p { font-size: 14px; margin: 0; color: #7a3a14 !important; }
.pei-legal__indice { margin: 0 0 8px; padding: 18px 22px; background: var(--pei-papel, #f2f5f8); }
.et_pb_section .pei-legal__indice p { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pei-legal__indice ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: 32px; }
.et_pb_section .pei-legal__indice li { font-size: 15px; line-height: 1.5; margin-bottom: 4px; }
@media (max-width: 640px) { .pei-legal__indice ol { columns: 1; } }