/**
 * PEI Core — estilos de frontend.
 * Paleta y tipografía según la 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-fondo: #ffffff;
  --pei-papel: #f2f5f8;
  --pei-linea: #d5dee6;
  --pei-linea-suave: #e8eef3;

  --pei-fuente: "Fira Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --pei-radio: 0px;
  --pei-azul-oscuro: #00417e;
}

/* ---------------------------------------------------------------- contenedor */
.pei-container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* Dentro de Divi el ancho ya lo pone .container del tema: no competir. */
#main-content .container.pei-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* Divi baja el cuerpo a 14px; el archivo necesita algo más de aire. */
.pei-archivo, .pei-convocatorias, .pei-ficha { font-size: 16px; line-height: 1.6; }

.pei-cabecera {
  background: var(--pei-azul);
  padding: 44px 32px;
  margin: 0 0 40px;
}
.pei-cabecera__titulo {
  font-family: var(--pei-fuente);
  color: #fff;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}

/* ------------------------------------------------------------------- archivo */
.pei-archivo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  font-family: var(--pei-fuente);
  color: var(--pei-tinta);
}
@media (min-width: 900px) {
  .pei-archivo { grid-template-columns: 232px minmax(0, 1fr); gap: 48px; }
}

.pei-archivo__rail { display: flex; flex-direction: column; }
.pei-rail__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0 9px 16px;
  border-left: 2px solid var(--pei-linea-suave);
  color: var(--pei-azul);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.35;
  transition: border-color 0.15s, color 0.15s;
}
.pei-rail__item:hover { border-left-color: var(--pei-naranja); color: var(--pei-tinta); }
.pei-rail__item.is-active {
  border-left-color: var(--pei-azul);
  color: var(--pei-tinta);
  font-weight: 600;
}
.pei-rail__count { color: var(--pei-tinta-suave); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- buscador */
.pei-buscador {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: stretch;
  margin: 0 0 28px;
  border: 1px solid var(--pei-linea);
}
.pei-buscador input[type="search"] {
  flex: 1 1 240px;
  min-width: 0;
  border: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  background: transparent;
  color: inherit;
}
.pei-buscador select {
  flex: 0 0 auto;
  border: 0;
  border-left: 1px solid var(--pei-linea);
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  background: transparent;
  color: inherit;
}
.pei-buscador input:focus-visible,
.pei-buscador select:focus-visible { outline: 2px solid var(--pei-naranja); outline-offset: -2px; }
.pei-buscador .pei-btn { border: 0; border-radius: 0; background: var(--pei-azul); color: #fff; padding: 12px 22px; }
.pei-buscador .pei-btn:hover { background: #00417e; }
.pei-buscador__reset {
  display: flex; align-items: center; padding: 0 16px;
  color: var(--pei-tinta-suave); font-size: 14px; text-decoration: none;
}
.pei-buscador__reset:hover { color: var(--pei-naranja); }

.pei-archivo__conteo {
  font-size: 14px;
  color: var(--pei-tinta-suave);
  margin: 0 0 12px;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------- lista */
.pei-lista { list-style: none; margin: 0; padding: 0; }

.pei-fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 28px 0;
  border-bottom: 1px solid var(--pei-linea-suave);
}
@media (min-width: 620px) {
  .pei-fila { grid-template-columns: 132px minmax(0, 1fr); gap: 28px; }
}
.pei-fila:last-child { border-bottom: 0; }

.pei-fila__portada { display: block; max-width: 132px; line-height: 0; }
.pei-fila__portada img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--pei-linea);
}
.pei-fila__sin-portada {
  display: block; aspect-ratio: 3 / 4; background: var(--pei-papel);
  border: 1px solid var(--pei-linea);
}

/* Entrada que solo lleva a otro sitio: la miniatura es una marca, no una
   portada. Se muestra entera, con aire, y en una caja proporcionada al logo —
   una caja de 3:4 dejaria el logo perdido en medio de un rectangulo vacio. */
.pei-fila--enlace .pei-fila__portada { align-self: center; }
.pei-fila--enlace .pei-fila__portada img {
  aspect-ratio: 5 / 2;
  object-fit: contain;
  background: #fff;
  padding: 10px;
}

.pei-fila__tipo {
  font-size: 11px; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--pei-naranja); margin: 0 0 6px;
}
.pei-fila__titulo { font-size: 19px; line-height: 1.32; font-weight: 600; margin: 0 0 8px; }
.pei-fila__titulo a { color: var(--pei-azul); text-decoration: none; }
.pei-fila__titulo a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pei-fila__meta { font-size: 14px; color: var(--pei-tinta-suave); margin: 0 0 8px; }
.pei-sep-inline { color: var(--pei-linea); margin: 0 4px; }
.pei-fila__resumen { font-size: 15px; color: var(--pei-tinta-suave); margin: 0 0 14px; max-width: 62ch; }
.pei-fila__acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------------ botones */
/*
 * Botones. Esquina viva (radio 0), no cápsula: es el gesto de la referencia y
 * el que combina con las franjas rectas del resto del sitio. La flecha se
 * desplaza al pasar por encima, que es la única animación que llevan.
 */
.pei-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  border: 1px solid var(--pei-azul);
  border-radius: var(--pei-radio);
  background: transparent;
  color: var(--pei-azul);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pei-btn::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;
}
.pei-btn:hover::after { transform: translateX(4px); }
.pei-btn--sinflecha::after { display: none; }
.pei-btn:hover { background: var(--pei-azul); color: #fff; }
.pei-btn:hover .pei-btn__peso { color: rgba(255, 255, 255, 0.75); }
.pei-btn:focus-visible { outline: 2px solid var(--pei-naranja); outline-offset: 2px; }
.pei-btn--solido { background: var(--pei-azul); color: #fff; }
.pei-btn--solido:hover { background: var(--pei-azul-oscuro, #00417e); border-color: var(--pei-azul-oscuro, #00417e); }
.pei-btn__peso { font-size: 12px; color: var(--pei-tinta-suave); font-variant-numeric: tabular-nums; }
.pei-btn--solido .pei-btn__peso { color: rgba(255, 255, 255, 0.75); }

/* ------------------------------------------------------------ convocatorias */
.pei-convocatorias { font-family: var(--pei-fuente); color: var(--pei-tinta); }
.pei-convocatorias__grupo {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--pei-tinta-suave);
  margin: 40px 0 4px; padding-bottom: 10px;
  border-bottom: 2px solid var(--pei-azul);
}
.pei-convocatorias__grupo:first-child { margin-top: 0; }

.pei-convocatoria { padding: 30px 0; border-bottom: 1px solid var(--pei-linea-suave); }
.pei-convocatoria.is-cerrada { opacity: 0.72; }
.pei-convocatoria__eyebrow { font-size: 14px; color: var(--pei-tinta-suave); margin: 0 0 2px; }
.pei-convocatoria__titulo {
  font-size: 20px; line-height: 1.3; font-weight: 700;
  color: var(--pei-azul); margin: 0 0 14px; max-width: 60ch;
}
.pei-convocatoria__fecha, .pei-convocatoria__email { font-size: 15px; margin: 0 0 8px; }
/* La etiqueta de estado va siempre pegada a la fecha. Con una medida máxima en la
   línea, una fecha larga empujaba la etiqueta a la fila siguiente y una corta no:
   cada convocatoria la mostraba en un sitio. Ahora la fila no tiene tope y, si en
   móvil no cabe, la etiqueta baja alineada a la izquierda. */
.pei-convocatoria__fecha { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 6px; max-width: none; }
.pei-convocatoria__fecha .pei-estado-tag { margin-left: 4px; }
.pei-convocatoria__label { font-size: 15px; margin: 20px 0 12px; }
.pei-estado-tag {
  display: inline-block; margin-left: 8px; padding: 2px 8px; line-height: 1.5;
  background: var(--pei-naranja); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; border-radius: var(--pei-radio);
}

.pei-docs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pei-doc {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 16px; background: var(--pei-papel); border: 1px solid var(--pei-linea);
  text-align: center;
}
.pei-doc__titulo { font-size: 14px; line-height: 1.4; color: var(--pei-tinta-suave); margin: 0; }

/* ---------------------------------------------------------------- carrusel */
.pei-carrusel { position: relative; overflow: hidden; background: var(--pei-azul); }
.pei-carrusel__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pei-carrusel__pista::-webkit-scrollbar { display: none; }

.pei-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: var(--pei-carrusel-altura, 68vh);
  display: flex; align-items: flex-end;
}
.pei-slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* El bloque de texto de la diapositiva: un solo color, no tres franjas. Es
   texto real, no una imagen: se traduce, lo lee Google y lo lee un lector de
   pantalla. */
.pei-slide__panel {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: min(560px, calc(100% - 2 * clamp(20px, 4vw, 48px)));
  padding: clamp(20px, 2.4vw, 32px) clamp(22px, 2.6vw, 36px) clamp(22px, 2.6vw, 34px);
  background: rgba(0, 89, 171, .88);
  text-align: left;
}
/* Las clases de las franjas siguen en la plantilla, pero ya no pintan fondo:
   la jerarquia la da el tamano del texto dentro del bloque. */
.pei-slide__bloque {
  margin: 0; padding: 0; background: none;
  text-align: left; color: #fff;
}
.pei-slide__ante {
  margin: 0 0 2px; font-size: clamp(14px, 1.45vw, 18px);
  font-weight: 600; letter-spacing: .03em; line-height: 1.25; color: #ffd2b8;
}
.pei-slide__titulo {
  margin: 0; font-size: clamp(20px, 2.3vw, 30px); line-height: 1.12;
  font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: #fff;
}
.pei-slide__bloque--naranja {
  margin-top: 6px;
  font-size: clamp(24px, 3vw, 38px); font-weight: 700; line-height: 1.1;
  color: #fff;
}
.pei-slide__bloque--claro {
  margin-top: 8px;
  font-size: clamp(15px, 1.5vw, 19px); line-height: 1.45; font-weight: 400;
  color: rgba(255, 255, 255, .92);
}
.pei-slide__acciones { margin: 18px 0 0; text-align: left; }
/* El boton es el mismo del resto del sitio -- esquina viva y flecha --, en
   blanco sobre el bloque azul. */
.pei-slide__panel .pei-btn {
  background: transparent; border-color: #fff; color: #fff;
}
.pei-slide__panel .pei-btn:hover,
.pei-slide__panel .pei-btn--solido:hover {
  background: #fff; border-color: #fff; color: var(--pei-azul, #0059ab);
}
.pei-slide__panel .pei-btn--solido { background: transparent; border-color: #fff; color: #fff; }

@media (max-width: 700px) {
  .pei-slide__panel {
    width: calc(100% - 40px);
    padding: 18px 20px 20px;
  }
  .pei-slide__acciones { margin-top: 14px; }
}

/* Posiciones del bloque, siempre dentro del ancho de contenido. */
.pei-slide__panel--centro,
.pei-slide__panel--arriba-centro,
.pei-slide__panel--abajo-centro { left: 50%; transform: translateX(-50%); }
.pei-slide__panel--centro { top: 50%; transform: translate(-50%, -50%); }
.pei-slide__panel--arriba-izq,
.pei-slide__panel--arriba-centro,
.pei-slide__panel--arriba-der { top: clamp(24px, 6%, 72px); }
.pei-slide__panel--abajo-izq,
.pei-slide__panel--abajo-centro,
.pei-slide__panel--abajo-der { bottom: clamp(24px, 6%, 72px); }
.pei-slide__panel--arriba-izq,
.pei-slide__panel--abajo-izq {
  left: max(clamp(20px, 4vw, 48px), calc(50% - var(--pei-ancho, 1200px) / 2));
}
.pei-slide__panel--arriba-der,
.pei-slide__panel--abajo-der {
  right: max(clamp(20px, 4vw, 48px), calc(50% - var(--pei-ancho, 1200px) / 2));
}

.pei-carrusel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.9); color: var(--pei-azul);
  font-size: 26px; line-height: 1; border-radius: 50%;
  display: grid; place-items: center;
  transition: background 0.15s;
}
.pei-carrusel__nav:hover { background: #fff; }
.pei-carrusel__nav:focus-visible { outline: 2px solid var(--pei-naranja); outline-offset: 2px; }
.pei-carrusel__nav--prev { left: 18px; }
.pei-carrusel__nav--next { right: 18px; }
@media (max-width: 640px) { .pei-carrusel__nav { display: none; } }

.pei-carrusel__puntos {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 9px;
}
.pei-punto {
  width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid #fff; background: transparent; transition: background 0.15s;
}
.pei-punto[aria-selected="true"] { background: #fff; }
.pei-punto:focus-visible { outline: 2px solid var(--pei-naranja); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pei-carrusel__pista { scroll-behavior: auto; }
  .pei-btn, .pei-btn::after, .pei-rail__item, .pei-carrusel__nav { transition: none; }
}

/* --------------------------------------------------------------- auxiliares */
.pei-vacio { padding: 40px 0; color: var(--pei-tinta-suave); font-family: var(--pei-fuente); }
.pei-aviso {
  padding: 16px 20px; background: #fff4e8; border-left: 4px solid var(--pei-naranja);
  font-family: var(--pei-fuente); font-size: 15px;
}
.pei-paginacion { margin: 36px 0 0; font-family: var(--pei-fuente); }
.pei-paginacion ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pei-paginacion a, .pei-paginacion span {
  display: block; padding: 8px 14px; border: 1px solid var(--pei-linea);
  color: var(--pei-azul); text-decoration: none; font-size: 14px;
}
.pei-paginacion .current { background: var(--pei-azul); color: #fff; border-color: var(--pei-azul); }
/* Dentro de un modulo de texto de Divi las listas recuperan su vineta: hay que
   quitarla con la misma fuerza. */
#page-container .pei-paginacion ul,
#page-container .pei-paginacion li { list-style: none !important; margin: 0; padding: 0; }
#page-container .pei-paginacion li::before { content: none !important; }
#page-container .pei-paginacion a { font-size: 14px; }

/* ------------------------------------------------------------------- ficha */
.pei-ficha { font-family: var(--pei-fuente); color: var(--pei-tinta); padding-top: 32px; }
.pei-migas { font-size: 14px; color: var(--pei-tinta-suave); margin: 0 0 24px; }
.pei-migas a { color: var(--pei-azul); text-decoration: none; }
.pei-migas a:hover { text-decoration: underline; }
.pei-migas span { margin: 0 8px; color: var(--pei-linea); }

.pei-ficha__grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 820px) { .pei-ficha__grid { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; } }
.pei-ficha__portada img { width: 100%; height: auto; display: block; border: 1px solid var(--pei-linea); }
.pei-ficha__titulo {
  font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; font-weight: 700;
  letter-spacing: -0.015em; margin: 0 0 12px; max-width: 24ch;
}
.pei-ficha__meta { font-size: 15px; color: var(--pei-tinta-suave); margin: 0 0 24px; }
.pei-ficha__contenido { margin: 0 0 28px; max-width: 68ch; }
.pei-ficha__descargas { display: flex; flex-wrap: wrap; gap: 10px; }

.pei-pestanas { display: flex; gap: 0; margin: 0 0 24px; border-bottom: 1px solid var(--pei-linea); }
.pei-pestana {
  padding: 11px 20px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--pei-tinta-suave);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pei-pestana.is-active { color: var(--pei-azul); border-bottom-color: var(--pei-azul); font-weight: 600; }
.pei-pestana:focus-visible { outline: 2px solid var(--pei-naranja); outline-offset: -2px; }


/* El correo hereda el estilo de enlace de Divi (20 px) y salía más grande
   que el texto que lo rodea. */
.pei-convocatoria__email a,
.pei-convocatoria__fecha a { font-size: inherit; color: var(--pei-azul); }

/* ---------------------------------------------- formato y estado del archivo */
.pei-doc__formato {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0; font-size: 12px;
}
.pei-formato {
  display: inline-block; padding: 2px 7px; border-radius: 2px;
  background: var(--pei-papel); border: 1px solid var(--pei-linea);
  color: var(--pei-tinta-suave);
  font-weight: 600; letter-spacing: .06em; font-size: 11px;
}
.pei-doc__peso { color: var(--pei-tinta-suave); font-variant-numeric: tabular-nums; }

/* Convocatoria cerrada: el botón deja de serlo. No es un enlace deshabilitado
   por CSS — la URL no llega al HTML. */
.pei-btn--bloqueado {
  background: transparent;
  border-color: var(--pei-linea);
  color: var(--pei-tinta-faint, #828d97);
  cursor: not-allowed;
}
.pei-btn--bloqueado:hover { background: transparent; color: var(--pei-tinta-faint, #828d97); }
.pei-convocatoria.is-cerrada { opacity: 1; }
.pei-convocatoria.is-cerrada .pei-doc { background: transparent; border-style: dashed; }
.pei-convocatoria.is-cerrada .pei-convocatoria__titulo { color: var(--pei-tinta-suave); }

/* ------------------------------------------------------------------------
   Diapositivas cuyo texto va dentro de la imagen.
   Solución transitoria: la imagen manda y encima solo se superpone el botón,
   en la zona que el diseño dejó libre.
   ------------------------------------------------------------------------ */
.pei-slide__pic { position: absolute; inset: 0; display: block; }
.pei-slide__pic .pei-slide__img { position: static; width: 100%; height: 100%; object-fit: cover; }

.pei-slide__solo-cta { position: absolute; z-index: 2; display: flex; }
.pei-slide__solo-cta--abajo-izq  { left: 6%;  bottom: 10%; }
.pei-slide__solo-cta--abajo-centro { left: 50%; bottom: 8%; transform: translateX(-50%); }
.pei-slide__solo-cta--abajo-der  { right: 6%; bottom: 10%; }
.pei-slide__solo-cta--centro     { left: 50%; top: 50%; transform: translate(-50%, -50%); }

.pei-slide__solo-cta .pei-btn {
  background: var(--pei-naranja); border-color: var(--pei-naranja); color: #fff;
  padding: 12px 26px; font-size: 16px; font-weight: 600;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
}
.pei-slide__solo-cta .pei-btn:hover { background: #e06832; border-color: #e06832; }

@media (max-width: 700px) {
  .pei-slide__solo-cta--abajo-izq,
  .pei-slide__solo-cta--abajo-der { left: 50%; right: auto; transform: translateX(-50%); bottom: 7%; }
  .pei-slide__solo-cta .pei-btn { padding: 11px 22px; font-size: 15px; }
}

/* Carrusel en modo "imagen": la diapositiva toma la proporción real del archivo,
   para que los diseños que llevan el texto dentro no se recorten. */
.pei-carrusel--imagen .pei-slide { min-height: 0; display: block; }
.pei-carrusel--imagen .pei-slide__pic { position: static; }
.pei-carrusel--imagen .pei-slide__pic .pei-slide__img {
  position: static;
  display: block; /* sin esto la imagen es inline y deja una franja de fondo debajo */
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* A sangre: el carrusel se sale de la caja de 1200 de Divi y ocupa todo el ancho
   de la ventana. Las imágenes se diseñan a 2400px justamente para esto. */
/* --pei-vw lo escribe carrusel.js con el ancho REAL del documento. 100vw incluye
   la barra de scroll, y usarlo tal cual metía 15px de desbordamiento lateral. */
.pei-carrusel--sangre {
  width: var(--pei-vw, 100vw);
  max-width: var(--pei-vw, 100vw);
  margin-left: calc(50% - var(--pei-vw, 100vw) / 2);
  margin-right: calc(50% - var(--pei-vw, 100vw) / 2);
}

/* Velo inferior: sin él, el texto blanco compite con la foto. */
.pei-carrusel--imagen .pei-slide:has(.pei-slide__panel)::after,
.pei-carrusel--imagen .pei-slide:has(.pei-slide__solo-cta)::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(to top, rgba(12, 24, 36, .55), rgba(12, 24, 36, 0));
  pointer-events: none;
}
@media (max-width: 700px) {
  .pei-slide__panel {
    left: clamp(16px, 4vw, 24px) !important;
    right: clamp(16px, 4vw, 24px) !important;
    width: auto;
    transform: none !important;
  }
  .pei-slide__panel--centro { top: 8%; }
  .pei-slide__bloque { padding: 11px 16px; }
}

/* ---------------------------------------------------- suscripción al boletín
   El formulario es el del plugin de Brevo; su HTML solo trae los campos
   (.pei-alta__campos) y aquí se les da el aspecto del sistema. */
.pei-alta { font-family: var(--pei-fuente); }
.pei-alta__titulo { margin: 0 0 10px; }
.pei-alta__texto { margin: 0 0 18px; font-size: 16px; line-height: 1.6; max-width: 52ch; }
.pei-alta__mas { margin: 0; font-size: 15px; }
.pei-alta__mas a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.pei-alta form { margin: 0; padding: 0; }
.pei-alta__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.pei-alta__campos p { margin: 0 !important; padding: 0 !important; }
.pei-alta__campos .sib-email-area,
.pei-alta__campos .sib-ORGANIZACION-area,
.pei-alta__enviar,
.pei-alta__legal { grid-column: 1 / -1; }
.pei-alta__campos label {
  display: block; margin: 0;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pei-tinta-suave);
}
.pei-alta__campos label span { display: block; margin-bottom: 6px; }
.pei-alta__campos input[type="email"],
.pei-alta__campos input[type="text"] {
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  padding: 12px 14px;
  font: 400 16px/1.3 var(--pei-fuente); letter-spacing: 0; text-transform: none;
  color: var(--pei-tinta); background: #fff;
  border: 1px solid var(--pei-linea); border-radius: var(--pei-radio, 0);
}
.pei-alta__campos input:focus { outline: 2px solid var(--pei-azul); outline-offset: 0; border-color: var(--pei-azul); }
.pei-alta__campos .sib-default-btn {
  display: inline-block; margin: 4px 0 0; padding: 13px 26px;
  font: 600 15px/1.2 var(--pei-fuente); letter-spacing: 0; text-transform: none;
  color: #fff; background: var(--pei-azul);
  border: 1px solid var(--pei-azul); border-radius: var(--pei-radio, 0);
  cursor: pointer; transition: background .15s ease;
}
.pei-alta__campos .sib-default-btn:hover { background: var(--pei-azul-oscuro, #00417e); border-color: var(--pei-azul-oscuro, #00417e); }
.pei-alta__campos .sib-default-btn:focus-visible { outline: 2px solid var(--pei-naranja); outline-offset: 2px; }
.pei-alta__legal { font-size: 13px !important; line-height: 1.5; color: var(--pei-tinta-suave); max-width: 60ch; }
.pei-alta__legal a { color: inherit; text-decoration: underline; }
.pei-alta .sib_msg_disp { grid-column: 1 / -1; font-size: 15px; }
.pei-alta .sib_msg_disp p { margin: 12px 0 0 !important; padding: 12px 14px !important; border-left: 3px solid var(--pei-naranja); background: #fff; color: var(--pei-tinta); }

/* Banda: presentación a la izquierda, formulario a la derecha */
.pei-alta--banda { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: start; }

/* Lateral: caja de papel junto a un listado */
.pei-alta--lateral { padding: 28px 26px 30px; background: var(--pei-papel); border-top: 3px solid var(--pei-naranja); }
.pei-alta--lateral .pei-alta__titulo { font-size: 24px; line-height: 1.25; }
.pei-alta--lateral .pei-alta__texto { font-size: 15px; }
.pei-alta--lateral .pei-alta__campos { grid-template-columns: 1fr; }

/* Sobre la banda azul: etiquetas claras y el botón invertido, como los demás
   botones principales sobre azul. */
.pei-bloque--azul .pei-alta__campos label { color: rgba(255, 255, 255, .85); }
.pei-bloque--azul .pei-alta__campos input[type="email"],
.pei-bloque--azul .pei-alta__campos input[type="text"] { border-color: #fff; }
.pei-bloque--azul .pei-alta__campos input:focus { outline-color: var(--pei-naranja); }
.pei-bloque--azul .pei-alta__campos .sib-default-btn { background: #fff; color: var(--pei-azul); border-color: #fff; }
.pei-bloque--azul .pei-alta__campos .sib-default-btn:hover { background: var(--pei-papel); border-color: var(--pei-papel); }
.pei-bloque--azul .pei-alta__legal,
.pei-bloque--azul .pei-alta__mas a { color: rgba(255, 255, 255, .85) !important; }
.pei-bloque--azul .pei-alta__mas a:hover { color: #fff !important; }

/* Listado con columna lateral (boletines) */
.pei-con-lateral { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(32px, 4vw, 56px); align-items: start; }
.pei-con-lateral > aside { position: sticky; top: 140px; }

@media (max-width: 980px) {
  .pei-alta--banda, .pei-con-lateral { grid-template-columns: 1fr; }
  .pei-con-lateral > aside { position: static; }
}
@media (max-width: 600px) {
  .pei-alta__campos { grid-template-columns: 1fr; }
}

/* ============================================================
   Página de resultados: [pei_indicadores]
   Gráficos sobrios: un solo tono (azul) para resultados, rayado claro
   para proyecciones, naranja solo para metas y pendientes.
   ============================================================ */
.pei-ind-proy {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  padding: 2px 7px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: #e3edf8; color: var(--pei-azul-oscuro);
}

/* Selector de fases (sobre fondo azul) */
.pei-ind-selector { display: inline-flex; border: 1px solid rgba(255,255,255,.55); margin: 0 0 clamp(24px, 3vw, 34px); }
.pei-ind-selector button {
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2;
  padding: 10px 16px; border: 0; border-radius: 0; background: transparent; color: #fff; cursor: pointer;
}
.pei-ind-selector button[aria-pressed="true"] { background: #fff; color: var(--pei-azul); }
.pei-ind-selector button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Cifras: reutiliza .pei-cifras del tema; aquí van a tres columnas con filete */
.pei-cifras.pei-ind-cifras {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid rgba(255,255,255,.22);
}
.pei-ind-cifra { padding: 26px 24px 26px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.pei-ind-cifras .pei-cifra__n { display: inline-block; font-size: clamp(32px, 3.6vw, 46px); }
.pei-ind-cifra sup { font-size: 14px; margin-left: 3px; opacity: .8; }
.pei-ind-cifra__u { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; opacity: .92; }
@media (max-width: 860px) { .pei-cifras.pei-ind-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pei-cifras.pei-ind-cifras { grid-template-columns: 1fr; } }

/* Tarjeta de gráfico */
.pei-ind-grafico { margin: 0; background: #fff; border: 1px solid var(--pei-linea); padding: 22px 22px 18px; position: relative; }
.et_pb_section .pei-ind-grafico p { max-width: none; }
.et_pb_section .pei-ind-grafico .pei-ind-grafico__titulo { margin: 0 0 2px; font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--pei-tinta) !important; padding: 0; }
.et_pb_section .pei-ind-grafico .pei-ind-grafico__sub { margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--pei-tinta-suave) !important; padding: 0; }
.et_pb_section .pei-ind-leyenda,
.et_pb_section .pei-ind-nota { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; padding: 0; font-size: 13px; line-height: 1.4; color: var(--pei-tinta-suave) !important; max-width: none; }
.pei-ind-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.pei-ind-nota { margin: 12px 0 0 !important; align-items: center; }
.pei-ind-lp { display: inline-block; width: 18px; border-top: 2px solid var(--pei-azul); }
.pei-ind-lp--proy { border-top-style: dashed; }
.pei-ind-lb { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: var(--pei-azul); }
.pei-ind-lb--pendiente { background: repeating-linear-gradient(135deg, var(--pei-naranja) 0 3px, #fbd3bf 3px 6px); }
.pei-ind-lmeta { display: inline-block; width: 2px; height: 12px; background: var(--pei-naranja); margin-right: 2px; }

/* Línea (SVG) */
.pei-ind-linea { position: relative; }
.pei-ind-linea svg { display: block; width: 100%; height: auto; overflow: visible; }
.pei-ind-linea text { font-family: var(--pei-fuente); }
.pei-ind-eje { font-size: 12px; fill: var(--pei-tinta-suave); }
.pei-ind-dato { font-size: 13px; font-weight: 700; fill: var(--pei-tinta); }
.pei-ind-rejilla { stroke: var(--pei-linea-suave); stroke-width: 1; }
.pei-ind-base { stroke: var(--pei-linea); stroke-width: 1; }
.pei-ind-trazo { fill: none; stroke: var(--pei-azul); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pei-ind-trazo--proy { stroke-dasharray: 5 5; }
.pei-ind-punto { fill: var(--pei-azul); stroke: var(--pei-azul); stroke-width: 2; }
.pei-ind-punto--proy { fill: #fff; }
.pei-ind-zona { fill: transparent; cursor: pointer; }
.pei-ind-tip {
  position: absolute; z-index: 2; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 12px));
  background: var(--pei-tinta); color: #fff; font-size: 13px; line-height: 1.4; padding: 8px 10px; border-radius: 4px;
  opacity: 0; transition: opacity .12s;
}
.pei-ind-tip strong { font-size: 15px; color: #fff; }
.pei-ind-tip.is-visible { opacity: 1; }
@media (max-width: 600px) { .pei-ind-eje { font-size: 16px; } .pei-ind-dato { font-size: 17px; } }

/* Tabla accesible */
.pei-ind-tabla { margin-top: 12px; font-size: 13px; }
.pei-ind-tabla summary { cursor: pointer; color: var(--pei-azul); font-weight: 500; }
.pei-ind-tabla table { width: 100%; border-collapse: collapse; margin-top: 8px; border: 0; }
.pei-ind-tabla th, .pei-ind-tabla td { text-align: left; padding: 6px 8px; border: 0; border-bottom: 1px solid var(--pei-linea-suave); }
.pei-ind-tabla th:last-child, .pei-ind-tabla td:last-child { text-align: right; }

/* Barras horizontales */
.et_pb_section .pei-ind-barras { list-style: none; margin: 0; padding: 0 !important; max-width: none; }
.pei-ind-barra {
  display: grid; grid-template-columns: minmax(150px, 240px) minmax(0, 1fr) 52px; align-items: center; gap: 14px;
  padding: 8px 0; border-top: 1px solid var(--pei-linea-suave); transition: opacity .2s;
}
.pei-ind-barra:first-child { border-top: 0; }
.pei-ind-barras--compactas .pei-ind-barra { grid-template-columns: 90px minmax(0, 1fr) 48px; }
.pei-ind-barra__nombre { font-size: 14px; line-height: 1.3; color: var(--pei-tinta); }
.pei-ind-barra__pista { position: relative; height: 14px; background: var(--pei-linea-suave); }
.pei-ind-barra__relleno { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pei-azul); border-radius: 0 3px 3px 0; }
.pei-ind-barra__meta { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--pei-naranja); }
.pei-ind-barra__valor { font-size: 14px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--pei-tinta); }
.pei-ind-barra.is-atenuada { opacity: .28; }
@media (max-width: 560px) {
  .pei-ind-barra, .pei-ind-barras--compactas .pei-ind-barra { grid-template-columns: minmax(0, 1fr) 48px; row-gap: 6px; }
  .pei-ind-barra__pista { grid-column: 1 / -1; grid-row: 2; }
}

/* Estado de cada parque: punto + texto, nunca solo color */
.pei-ind-estado { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pei-ind-estado::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }
.pei-ind-estado--cert { color: #3f6f12; }
.pei-ind-estado--cert::before { background: var(--pei-verde); }
.pei-ind-estado--aud { color: #a5481c; }
.pei-ind-estado--aud::before { background: var(--pei-naranja); }
.pei-ind-estado--brecha { color: var(--pei-tinta-suave); }
.pei-ind-estado--brecha::before { background: #fff; border: 2px solid var(--pei-tinta-suave); }

/* Filtros */
.pei-ind-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.pei-ind-filtros button {
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; padding: 8px 12px; border-radius: 0;
  border: 1px solid var(--pei-linea); background: #fff; color: var(--pei-tinta); cursor: pointer;
}
.pei-ind-filtros button:hover { border-color: var(--pei-azul); }
.pei-ind-filtros button[aria-pressed="true"] { border-color: var(--pei-azul); background: var(--pei-azul); color: #fff; }

/* Medidor de oportunidades */
.pei-ind-medidor { position: relative; height: 18px; margin: 6px 0 12px; background: var(--pei-linea-suave); }
.pei-ind-medidor__hecho { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pei-azul); border-radius: 0 3px 3px 0; }
.pei-ind-medidor__pendiente { position: absolute; right: 0; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--pei-naranja) 0 3px, #fbd3bf 3px 6px); }

/* Datos sueltos */
.pei-ind-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.pei-ind-datos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .pei-ind-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pei-ind-datos, .pei-ind-datos--2 { grid-template-columns: 1fr; } }
.pei-ind-dato { border-top: 3px solid var(--pei-azul); padding-top: 14px; }
.pei-ind-dato__n { display: block; font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; line-height: 1; color: var(--pei-azul); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pei-ind-dato__t { display: block; margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--pei-tinta); }
.pei-ind-dato__c { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--pei-tinta-suave); }

/* Composición de la página */
.pei-ind-doble { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; }
@media (max-width: 900px) { .pei-ind-doble { grid-template-columns: 1fr; } }
.pei-ind-pie { margin-top: 16px; font-size: 13px; line-height: 1.5; }
.et_pb_section .pei-ind-pie, .et_pb_section .pei-ind-pie p { color: var(--pei-tinta-suave) !important; max-width: 90ch; }
.et_pb_section.pei-bloque--azul .pei-ind-pie, .et_pb_section.pei-bloque--azul .pei-ind-pie p { color: rgba(255,255,255,.8) !important; }
@media (prefers-reduced-motion: reduce) { .pei-ind-tip, .pei-ind-barra { transition: none; } }
.pei-ind-dato__t, .pei-ind-dato__c, .pei-ind-cifra__u { font-weight: 400; }
.pei-ind-cifra__u { font-weight: 500; }
.pei-caja > p + .pei-ind-grafico,
.pei-caja > p + .pei-ind-doble,
.pei-ind-doble p + .pei-ind-oport { margin-top: clamp(20px, 2.5vw, 30px); }
.pei-caja > h2 + .pei-ind-datos { margin-top: clamp(20px, 2.5vw, 30px); }