/* =====================================================
   FPUC — Componentes del diseño real
   -----------------------------------------------------
   Capa limpia sobre tokens.css, derivada de los 8 exports de
   Figma. Namespace `fpuc-*` para no colisionar con el wireframe
   gris de main.css, que se retira sección por sección cuando
   pasemos a las plantillas.

   REGLA: acá no se escribe ni un hex ni un tamaño de fuente
   literal — sólo var(--fpuc-*).

   Índice
     01 Layout y utilidades      13 Tarjeta: tile de proyecto
     02 Botón                    14 Tarjeta: caso de éxito
     03 Enlace                   15 Tarjeta: transparencia
     04 Rótulo (eyebrow)         16 Hero de página
     05 Badge                    17 Panel
     06 Chips                    18 Lista de enlaces
     07 Nav de carrusel          19 Testimonio
     08 Encabezado de sección    20 Timeline
     09 Cifras (stat)            21 Galería
     10 Persona                  22 Formulario
     11 Tarjeta: base            23 Aliados
     12 Tarjetas de contenido    24 Banda CTA / newsletter / flotantes
   ===================================================== */


/* =====================================================
   01 · LAYOUT Y UTILIDADES
   ===================================================== */

/* El ancho del token es el del CONTENIDO (x148 → x1382 en el frame de 1536),
   así que el padding lateral va sumado: con `max-width: var(--fpuc-container)`
   a secas el contenido quedaba 48px más estrecho que el diseño. */
.fpuc-container {
  width: 100%;
  max-width: calc(var(--fpuc-container) + var(--fpuc-space-5) * 2);
  margin-inline: auto;
  padding-inline: var(--fpuc-space-5);
}
.fpuc-container--narrow { max-width: 900px; }

.fpuc-section { padding-block: var(--fpuc-section-y); }
.fpuc-section--tight { padding-block: var(--fpuc-space-8); }
/* Línea separadora entre dos secciones del mismo fondo. Va en la <section> y
   no en el contenedor: en el diseño cruza de borde a borde de la pantalla, no
   sólo el ancho del contenido. */
.fpuc-section--divider { border-bottom: 1px solid var(--fpuc-border); }

.fpuc-grid    { display: grid; gap: var(--fpuc-grid-gap); }
.fpuc-grid-2  { grid-template-columns: repeat(2, 1fr); }
.fpuc-grid-3  { grid-template-columns: repeat(3, 1fr); }
.fpuc-grid-4  { grid-template-columns: repeat(4, 1fr); }

.fpuc-stack   { display: grid; gap: var(--fpuc-space-5); }
.fpuc-cluster { display: flex; flex-wrap: wrap; gap: var(--fpuc-space-3); }
.fpuc-center  { text-align: center; justify-items: center; }

/* Fondos de sección */
.fpuc-bg-white { background: var(--fpuc-surface); }
.fpuc-bg-alt   { background: var(--fpuc-surface-alt); }
.fpuc-bg-muted { background: var(--fpuc-surface-muted); }
.fpuc-bg-mint  { background: var(--fpuc-surface-mint); }
.fpuc-bg-band  { background: var(--fpuc-surface-band); }
.fpuc-bg-navy  { background: var(--fpuc-surface-dark);      color: var(--fpuc-text-on-dark); }
.fpuc-bg-blue  { background: var(--fpuc-surface-accent);    color: var(--fpuc-text-on-dark); }
.fpuc-bg-sky   { background: var(--fpuc-surface-sky);       color: var(--fpuc-text-on-dark); }
.fpuc-bg-teal  { background: var(--fpuc-surface-teal);      color: var(--fpuc-text-on-dark); }
.fpuc-bg-coral { background: var(--fpuc-surface-highlight); color: var(--fpuc-text-on-dark); }

.fpuc-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .fpuc-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .fpuc-grid-2, .fpuc-grid-3 { grid-template-columns: 1fr; }
  .fpuc-section { padding-block: var(--fpuc-space-8); }
}
@media (max-width: 600px) {
  .fpuc-grid-4 { grid-template-columns: 1fr; }
}


/* =====================================================
   02 · BOTÓN — fpuc_button()
   ===================================================== */

/* Una sola medida para todos los botones, la de la banda de rutas (Home
   y1091): 16px semibold sin tracking, 16/24 de padding y radio de 8px. Los
   colores no la cambian; sólo donate, small y download, que son piezas
   aparte (header, tarjeta de noticia, fila de descarga), van más chicos. */
.fpuc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fpuc-space-2);
  padding: var(--fpuc-space-4) var(--fpuc-space-5);
  border: 2px solid transparent;
  border-radius: var(--fpuc-radius-md);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body-sm);
  font-weight: var(--fpuc-weight-semibold);
  line-height: var(--fpuc-leading-none);
  letter-spacing: var(--fpuc-tracking-normal);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--fpuc-transition),
              border-color var(--fpuc-transition),
              color var(--fpuc-transition);
}
.fpuc-btn:focus-visible {
  outline: 3px solid var(--fpuc-focus-ring);
  outline-offset: 2px;
}

/* pink — acción primaria. "Donar ahora" (y6271), en las 8 páginas. */
.fpuc-btn--pink {
  background: var(--fpuc-action);
  border-color: var(--fpuc-action);
  color: var(--fpuc-text-on-dark);
}
.fpuc-btn--pink:hover, .fpuc-btn--pink:focus-visible {
  background: var(--fpuc-navy); border-color: var(--fpuc-navy);
}

/* blue — CTA del hero de Home (y539) */
.fpuc-btn--blue {
  background: var(--fpuc-action-alt);
  border-color: var(--fpuc-action-alt);
  color: var(--fpuc-text-on-dark);
}
.fpuc-btn--blue:hover, .fpuc-btn--blue:focus-visible {
  background: var(--fpuc-navy); border-color: var(--fpuc-navy);
}

/* navy — "Enviar" del formulario, "Leer más" de noticias */
.fpuc-btn--navy {
  background: var(--fpuc-action-dark);
  border-color: var(--fpuc-action-dark);
  color: var(--fpuc-text-on-dark);
}
.fpuc-btn--navy:hover, .fpuc-btn--navy:focus-visible {
  background: var(--fpuc-action); border-color: var(--fpuc-action);
}

/* teal */
.fpuc-btn--teal {
  background: var(--fpuc-action-teal);
  border-color: var(--fpuc-action-teal);
  color: var(--fpuc-text-on-dark);
}
.fpuc-btn--teal:hover, .fpuc-btn--teal:focus-visible {
  background: var(--fpuc-navy); border-color: var(--fpuc-navy);
}

/* ghost — borde claro sobre fondo de color (y939 / y4095 / y6312) */
.fpuc-btn--ghost {
  background: transparent;
  border-color: var(--fpuc-border-on-dark);
  color: var(--fpuc-text-on-dark);
}
.fpuc-btn--ghost:hover, .fpuc-btn--ghost:focus-visible {
  background: var(--fpuc-action-ghost); color: var(--fpuc-navy);
}

/* white — sólida sobre fondo de color. "Ver plataforma" (y4095) */
.fpuc-btn--white {
  background: var(--fpuc-action-ghost);
  border-color: var(--fpuc-action-ghost);
  color: var(--fpuc-text-coral);
}
.fpuc-btn--white:hover, .fpuc-btn--white:focus-visible {
  background: var(--fpuc-navy); border-color: var(--fpuc-navy);
  color: var(--fpuc-text-on-dark);
}

/* outline — sobre claro. "Ver todo lo que hacemos" (y2642). Sin versales. */
.fpuc-btn--outline {
  background: transparent;
  border-color: var(--fpuc-border);
  color: var(--fpuc-text);
  text-transform: none;
}
.fpuc-btn--outline:hover, .fpuc-btn--outline:focus-visible {
  background: var(--fpuc-navy); border-color: var(--fpuc-navy);
  color: var(--fpuc-text-on-dark);
}

/* donate — el botón "Dona" del header (y120), en las 8 páginas */
.fpuc-btn--donate {
  background: var(--fpuc-action-donate);
  border-color: var(--fpuc-action-donate);
  color: var(--fpuc-text-on-dark);
  padding: var(--fpuc-space-3) var(--fpuc-space-5);
  font-size: var(--fpuc-text-nav);
  letter-spacing: var(--fpuc-tracking-normal);
  text-transform: none;
}
.fpuc-btn--donate:hover, .fpuc-btn--donate:focus-visible {
  background: var(--fpuc-coral); border-color: var(--fpuc-coral);
}

/* small — "Leer más" de las tarjetas de noticia (y5856) */
.fpuc-btn--small {
  background: var(--fpuc-action-dark);
  border-color: var(--fpuc-action-dark);
  color: var(--fpuc-text-on-dark);
  padding: var(--fpuc-space-3) var(--fpuc-space-5);
  font-size: var(--fpuc-text-small);
}
.fpuc-btn--small:hover, .fpuc-btn--small:focus-visible {
  background: var(--fpuc-action); border-color: var(--fpuc-action);
}

/* download — "Descargar ⬇" de la sección Estudios */
.fpuc-btn--download {
  background: transparent;
  border-color: var(--fpuc-border);
  color: var(--fpuc-text);
  padding: var(--fpuc-space-2) var(--fpuc-space-4);
  font-size: var(--fpuc-text-meta);
  letter-spacing: var(--fpuc-tracking-normal);
  text-transform: none;
}
.fpuc-btn--download:hover, .fpuc-btn--download:focus-visible {
  background: var(--fpuc-navy); border-color: var(--fpuc-navy);
  color: var(--fpuc-text-on-dark);
}

.fpuc-btn--block { display: flex; width: 100%; }


/* =====================================================
   03 · ENLACE — fpuc_link()
   ===================================================== */

.fpuc-link {
  display: inline-flex;
  align-items: center;
  gap: var(--fpuc-space-2);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-small);
  font-weight: var(--fpuc-weight-semibold);
  letter-spacing: var(--fpuc-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fpuc-text-accent);
  transition: color var(--fpuc-transition);
}
.fpuc-link__arrow { transition: transform var(--fpuc-transition); }
.fpuc-link:hover .fpuc-link__arrow,
.fpuc-link:focus-visible .fpuc-link__arrow { transform: translateX(4px); }
.fpuc-link--on-dark { color: var(--fpuc-text-on-dark); }
.fpuc-link--teal    { color: var(--fpuc-text-teal); }
.fpuc-link--coral   { color: var(--fpuc-text-coral); }

/* titled — título de color + descripción. "Ofertas vigentes →" (equipo),
   "Más sobre la Fundación" (historia). */
.fpuc-link-titled {
  display: grid;
  gap: var(--fpuc-space-2);
  text-decoration: none;
}
.fpuc-link-titled__title {
  display: inline-flex;
  align-items: center;
  gap: var(--fpuc-space-3);
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-h3);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-title);
  color: var(--fpuc-text-teal);
  transition: gap var(--fpuc-transition);
}
.fpuc-link-titled:hover .fpuc-link-titled__title { gap: var(--fpuc-space-5); }
.fpuc-link-titled__text {
  margin: 0;
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body-lg);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text-strong);
}
.fpuc-link-titled--coral .fpuc-link-titled__title { color: var(--fpuc-text-coral); }
.fpuc-link-titled--navy  .fpuc-link-titled__title { color: var(--fpuc-text); }

/* circle — texto + flecha en círculo relleno. "¿Quieres ser aliado?" (y5048) */
.fpuc-link-circle {
  display: inline-flex;
  align-items: center;
  gap: var(--fpuc-space-4);
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-eyebrow-lg);
  font-weight: var(--fpuc-weight-semibold);
  text-decoration: none;
  color: var(--fpuc-text);
}
.fpuc-link-circle__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--fpuc-radius-pill);
  background: var(--fpuc-action);
  color: var(--fpuc-text-on-dark);
  font-size: var(--fpuc-text-body-lg);
  transition: transform var(--fpuc-transition);
}
.fpuc-link-circle:hover .fpuc-link-circle__icon { transform: translateX(4px); }
/* Sobre navy el círculo se invierte: fondo claro y flecha oscura. */
.fpuc-link-circle--on-dark { color: var(--fpuc-text-on-dark); }
.fpuc-link-circle--on-dark .fpuc-link-circle__icon {
  background: var(--fpuc-white);
  color: var(--fpuc-navy);
}


/* =====================================================
   04 · RÓTULO — fpuc_section_tag()
   ===================================================== */

.fpuc-eyebrow {
  display: block;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-eyebrow-lg);
  font-weight: var(--fpuc-weight-medium);
  letter-spacing: var(--fpuc-tracking-wide);
  line-height: var(--fpuc-leading-title);
  text-transform: uppercase;
  color: var(--fpuc-text);
}
.fpuc-eyebrow--sm      { font-size: var(--fpuc-text-eyebrow); }
.fpuc-eyebrow--panel   { font-size: var(--fpuc-text-26); }
.fpuc-eyebrow--on-dark { color: var(--fpuc-text-on-dark); }
.fpuc-eyebrow--teal    { color: var(--fpuc-text-teal); }
.fpuc-eyebrow--accent  { color: var(--fpuc-text-accent); }


/* =====================================================
   05 · BADGE — fpuc_badge()
   ===================================================== */

.fpuc-badge {
  display: inline-block;
  padding: var(--fpuc-space-1) var(--fpuc-space-3);
  border-radius: var(--fpuc-radius-sm);
  background: var(--fpuc-teal);
  color: var(--fpuc-text-on-dark);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-11);
  font-weight: var(--fpuc-weight-semibold);
  letter-spacing: var(--fpuc-tracking-wide);
  line-height: var(--fpuc-leading-title);
  text-transform: uppercase;
}
.fpuc-badge--coral { background: var(--fpuc-coral); }
.fpuc-badge--pink  { background: var(--fpuc-pink); }
.fpuc-badge--blue  { background: var(--fpuc-blue); }
.fpuc-badge--navy  { background: var(--fpuc-navy); }
.fpuc-badge--sky   { background: var(--fpuc-sky); }
/* Etiqueta de categoría sobre los tiles de proyecto: sin fondo. */
.fpuc-badge--bare {
  padding: 0;
  background: none;
  font-size: var(--fpuc-text-10);
}


/* =====================================================
   06 · CHIPS — fpuc_chips()
   Filtros Colegios/Empresas/Universidades y años del timeline.
   ===================================================== */

.fpuc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fpuc-space-3);
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
.fpuc-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--fpuc-space-3) var(--fpuc-space-6);
  border: 0;
  border-radius: var(--fpuc-radius-sm);
  background: var(--fpuc-chip-bg);
  color: var(--fpuc-chip-text);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body-sm);
  font-weight: var(--fpuc-weight-semibold);
  line-height: var(--fpuc-leading-none);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--fpuc-transition), color var(--fpuc-transition);
}
.fpuc-chip:hover { background: var(--fpuc-sky-tint); }
.fpuc-chip[aria-selected="true"],
.fpuc-chip.is-active {
  background: var(--fpuc-chip-bg-active);
  color: var(--fpuc-chip-text-active);
}
.fpuc-chip:focus-visible {
  outline: 3px solid var(--fpuc-focus-ring);
  outline-offset: 2px;
}

/* Variante año, del timeline de historia (y1371, 68×42) */
.fpuc-chip--year {
  padding: var(--fpuc-space-2) var(--fpuc-space-4);
  background: var(--fpuc-chip-bg-year);
  color: var(--fpuc-chip-text-year);
  font-size: var(--fpuc-text-meta);
}
.fpuc-chip--year[aria-selected="true"],
.fpuc-chip--year.is-active {
  background: var(--fpuc-chip-bg-year-active);
  color: var(--fpuc-text-on-dark);
}


/* =====================================================
   07 · NAV DE CARRUSEL — fpuc_carousel_nav()
   Reusado por timeline, aliados y testimonios.
   ===================================================== */

.fpuc-carousel-nav {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: var(--fpuc-radius-pill);
  background: transparent;
  color: var(--fpuc-gray-400);
  font-size: var(--fpuc-text-h2-sm);
  line-height: var(--fpuc-leading-none);
  cursor: pointer;
  transition: color var(--fpuc-transition), background-color var(--fpuc-transition);
}
.fpuc-carousel-nav:hover { color: var(--fpuc-navy); }
.fpuc-carousel-nav:focus-visible {
  outline: 3px solid var(--fpuc-focus-ring);
  outline-offset: 2px;
}
.fpuc-carousel-nav[disabled] { opacity: 0.4; cursor: default; }
/* Círculo relleno cian, como en el timeline de historia (y1569, 42×42) */
.fpuc-carousel-nav--filled {
  background: var(--fpuc-cyan);
  color: var(--fpuc-text-on-dark);
  font-size: var(--fpuc-text-body-lg);
}
.fpuc-carousel-nav--on-dark { color: var(--fpuc-text-on-dark); }

.fpuc-dots {
  display: flex;
  justify-content: center;
  gap: var(--fpuc-space-2);
  padding: 0; margin: 0;
  list-style: none;
}
.fpuc-dots__dot {
  width: 10px; height: 10px;
  padding: 0;
  border: 0;
  border-radius: var(--fpuc-radius-pill);
  background: currentColor;
  opacity: 0.4;
  cursor: pointer;
}
.fpuc-dots__dot.is-active { opacity: 1; }


/* =====================================================
   08 · ENCABEZADO DE SECCIÓN — fpuc_section_header()
   ===================================================== */

.fpuc-section-header { display: grid; gap: var(--fpuc-space-4); }
.fpuc-section-header--center { justify-items: center; text-align: center; }

.fpuc-section-header__title {
  margin: 0;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-h2);
  /* 600, no 700 [CONFIRMADO en el CSS de Figma del h2 de Programas]. */
  font-weight: var(--fpuc-weight-semibold);
  line-height: var(--fpuc-leading-h2);
  color: var(--fpuc-text);
}
.fpuc-section-header__intro {
  margin: 0;
  max-width: 70ch;
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body-lg);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text-strong);
}
.fpuc-section-header--on-dark .fpuc-section-header__title,
.fpuc-section-header--on-dark .fpuc-section-header__intro { color: var(--fpuc-text-on-dark); }
.fpuc-section-header--teal .fpuc-section-header__title { color: var(--fpuc-text-teal); }


/* =====================================================
   09 · CIFRAS — fpuc_stat() / fpuc_stat_band() / fpuc_stat_tile()
   ===================================================== */

.fpuc-stat { text-align: center; }
.fpuc-stat__value {
  display: block;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-stat);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-none);
  color: var(--fpuc-text-accent);
}
.fpuc-stat__label {
  display: block;
  margin-top: var(--fpuc-space-3);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body-lg);
  line-height: var(--fpuc-leading-title);
  color: var(--fpuc-text);
}
/* Sobre banda de color: número blanco 65px (historia y2138, propósito) */
.fpuc-stat--on-dark .fpuc-stat__value { font-size: var(--fpuc-text-stat-dark); color: var(--fpuc-text-on-dark); }
.fpuc-stat--on-dark .fpuc-stat__label { color: var(--fpuc-text-on-dark); }

.fpuc-stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fpuc-grid-gap);
  align-items: start;
}
@media (max-width: 900px) { .fpuc-stat-band { grid-template-columns: repeat(2, 1fr); } }
/* Bajadas de más de dos líneas: la fila entera baja un 30 %. La clase la pone
   components.js al medirlas. */
.fpuc-stat-band.has-long-labels .fpuc-stat__label {
  font-size: calc(var(--fpuc-text-body-lg) * 0.7);
}

/* Tile de "Resultados por cada línea de trabajo" (propósito). Un color
   por línea; el color se pasa como modificador. */
.fpuc-stat-tile {
  display: grid;
  align-content: start;
  gap: var(--fpuc-space-3);
  padding: var(--fpuc-space-6);
  border-radius: var(--fpuc-radius-md);
  background: var(--fpuc-surface-alt);
}
.fpuc-stat-tile__title {
  margin: 0;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-h3);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-title);
  color: var(--fpuc-text);
}
.fpuc-stat-tile__value {
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-h2-sm);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-none);
  color: var(--fpuc-text);
}
.fpuc-stat-tile__text {
  margin: 0;
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text-strong);
}
.fpuc-stat-tile--pink  .fpuc-stat-tile__title, .fpuc-stat-tile--pink  .fpuc-stat-tile__value { color: var(--fpuc-pink); }
.fpuc-stat-tile--teal  .fpuc-stat-tile__title, .fpuc-stat-tile--teal  .fpuc-stat-tile__value { color: var(--fpuc-teal); }
.fpuc-stat-tile--coral .fpuc-stat-tile__title, .fpuc-stat-tile--coral .fpuc-stat-tile__value { color: var(--fpuc-coral); }
.fpuc-stat-tile--blue  .fpuc-stat-tile__title, .fpuc-stat-tile--blue  .fpuc-stat-tile__value { color: var(--fpuc-blue); }
.fpuc-stat-tile--navy  .fpuc-stat-tile__title, .fpuc-stat-tile--navy  .fpuc-stat-tile__value { color: var(--fpuc-navy); }


/* =====================================================
   10 · PERSONA — fpuc_person()
   Equipo y Directorio (equipo.pdf y559 / y1966, tarjeta 286×350)
   ===================================================== */

/* auto 1fr: la foto conserva su proporción y el pie absorbe la diferencia
   de alto entre tarjetas cuando los cargos ocupan más de una línea. */
/* Medidas de la tarjeta (equipo.pdf, tarjeta 286×350 en y559→y908): foto a
   16px de los lados y 21px del borde superior, y el nombre 15px bajo la foto.
   En el diseño las 16 tarjetas miden lo mismo tengan el cargo una línea o dos,
   así que el cargo reserva siempre dos (ver --role más abajo) y el borde
   inferior queda corto: el aire de las de una línea sale de esa reserva. */
.fpuc-person {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--fpuc-space-4);
  margin: 0;
  padding: var(--fpuc-space-5) var(--fpuc-space-4) var(--fpuc-space-2);
  border-radius: var(--fpuc-radius-md);
  background: var(--fpuc-surface-card);
  text-align: center;
}
/* En Directorio la sección es blanca y la tarjeta lleva el lavanda: es el
   mismo par de colores que en Equipo, invertido (equipo.pdf y1966). */
.fpuc-person--alt { background: var(--fpuc-surface-alt); }
.fpuc-person__photo {
  aspect-ratio: 253 / 243;
  border-radius: var(--fpuc-radius-sm);
  background-color: var(--fpuc-surface-photo);
  background-size: cover;
  background-position: center top;
}
.fpuc-person__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--fpuc-radius-sm);
  display: block;
}
.fpuc-person__name {
  margin: 0;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-body-lg);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-title);
  color: var(--fpuc-text);
}
.fpuc-person__role {
  margin: 0;
  min-height: calc(var(--fpuc-text-small) * var(--fpuc-leading-title) * 2);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-small);
  line-height: var(--fpuc-leading-title);
  color: var(--fpuc-text-strong);
}


/* =====================================================
   11 · TARJETA: BASE — fpuc_card()
   ===================================================== */

.fpuc-card__title { font-family: var(--fpuc-font-head); margin: 0; }
.fpuc-card__text  { font-family: var(--fpuc-font-body); margin: 0; }


/* =====================================================
   12 · TARJETAS DE CONTENIDO
   ===================================================== */

/* --- route: banda azul de 3 rutas (Home y787) --------------------- */
/* Flex en columna para que el botón quede pegado al fondo y los tres
   botones de la fila se alineen entre sí, como en el diseño. */
.fpuc-card--route {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fpuc-space-4);
  padding-inline: var(--fpuc-space-6);
  color: var(--fpuc-text-on-dark);
  text-align: center;
}
.fpuc-card--route + .fpuc-card--route { border-left: 1px solid var(--fpuc-border-on-accent); }
.fpuc-card--route .fpuc-card__title {
  font-size: var(--fpuc-text-h3);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-title);
}
.fpuc-card--route .fpuc-card__text {
  margin-bottom: var(--fpuc-space-5);
  font-size: var(--fpuc-text-body);
  line-height: var(--fpuc-leading-body);
}
/* El botón en una línea y los tres del mismo ancho. El margin auto
   lo empuja al fondo para alinear la fila. */
.fpuc-card--route .fpuc-btn {
  margin-top: auto;
  min-width: var(--fpuc-route-cta-width);
  white-space: nowrap;
}
/* En móvil la columna no da para el ancho fijo: el botón ocupa lo que haya. */
@media (max-width: 600px) {
  .fpuc-card--route .fpuc-btn { min-width: 0; max-width: 100%; white-space: normal; }
}

/* --- image: tarjetas de programa (Home y2406, 392×325) ------------ */
.fpuc-card--image {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 325px;
  padding: var(--fpuc-space-5);
  border-radius: var(--fpuc-radius-md);
  overflow: hidden;
  background-color: var(--fpuc-navy);
  background-size: cover;
  background-position: center;
  text-decoration: none;
  color: var(--fpuc-text-on-dark);
}
.fpuc-card--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--fpuc-overlay) 85%, transparent) 0%, transparent 70%);
  transition: opacity var(--fpuc-transition);
}
.fpuc-card--image:hover::before { opacity: 0.75; }
.fpuc-card--image .fpuc-card__body { position: relative; display: grid; gap: var(--fpuc-space-2); }
.fpuc-card--image .fpuc-card__title {
  font-size: var(--fpuc-text-h2-sm);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-h2);
}
.fpuc-card--image .fpuc-card__text {
  font-size: var(--fpuc-text-h4);
  line-height: var(--fpuc-leading-title);
}

/* Medio círculo de color junto al título (Programas, y2406). El color lo pone
   cada ficha desde el admin en --fpuc-card-accent; el rosa es sólo la red. */
/* El bloque (medio círculo + textos) va pegado al margen derecho de la tarjeta,
   con las líneas alineadas a la izquierda entre sí.

   Lo que lo hace posible es `width: fit-content` + el quiebre del título por
   palabra: una caja con texto que se parte sola NO se encoge al ancho de su
   línea más larga —CSS no lo hace— así que sin acotar el quiebre la caja
   ocuparía el ancho completo y `margin-left: auto` no movería nada.
   La tarjeta es flex, así que ese margen automático es el que la empuja. */
.fpuc-card--image .fpuc-card__body.has-accent {
  /* Se declara en el padre: el hijo la hereda, y al revés no funcionaría. */
  --fpuc-card-accent-w: 28px;
  position: relative;
  padding-left: calc(var(--fpuc-card-accent-w) + var(--fpuc-space-3));
  /* Título y bajada arrancan los dos en el canto del medio círculo, pase lo
     que pase con el alineado de la sección que contenga la tarjeta. */
  text-align: left;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
}

/* Quiebre por palabra: "Futuros / talentos", "Voluntarios / Corporativos",
   que es como está en el diseño (y2406). El min-width es la red por si un
   programa trae un nombre de muchas palabras cortas y quedaría en columna. */
.fpuc-card--image .fpuc-card__body.has-accent .fpuc-card__title {
  width: min-content;
  min-width: 6ch;
}

/* Las tarjetas de Programas van sólo con el título; esto es para las tarjetas
   de imagen que sí traen bajada, que sin tope se irían al ancho de la tarjeta. */
.fpuc-card--image .fpuc-card__body.has-accent .fpuc-card__text {
  max-width: 15ch;
}
.fpuc-card__accent {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--fpuc-card-accent-w);
  height: calc(var(--fpuc-card-accent-w) * 2);
  transform: translateY(-50%);
  /* Curva a la izquierda, canto recto contra el texto. */
  border-radius: var(--fpuc-radius-pill) 0 0 var(--fpuc-radius-pill);
  background: var(--fpuc-card-accent, var(--fpuc-pink));
}

/* --- tool: tarjetas sobre el navy (Home y3109, 392×325) ----------- */
.fpuc-card--tool {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* En el diseño los cuatro elementos van a la misma distancia entre sí
     (~32px): icono, título, texto y enlace. */
  gap: var(--fpuc-space-6);
  min-height: 325px;
  padding: var(--fpuc-space-6);
  border-radius: var(--fpuc-radius-md);
  background: var(--fpuc-surface-card-on-dark);
  color: var(--fpuc-text);
  transition: transform var(--fpuc-transition);
}
.fpuc-card--tool .fpuc-card__title a { color: inherit; text-decoration: none; }
.fpuc-card--tool .fpuc-card__title a:hover { color: var(--fpuc-text-accent); }
.fpuc-card--tool:hover { transform: translateY(-4px); }
.fpuc-card--tool .fpuc-card__icon {
  font-size: var(--fpuc-text-h3);
  line-height: var(--fpuc-leading-none);
  color: var(--fpuc-navy);
}

/* Icono subido (SVG o PNG). Se mide en `em` para que siga el tamaño de letra
   del sitio donde esté: grande en la tarjeta, pequeño en la barra superior, sin
   una regla por cada uno. */
.fpuc-icono-img {
  display: inline-block;
  width: auto;
  height: 1em;
  vertical-align: -0.125em;
}
.fpuc-card--tool .fpuc-card__title {
  font-size: var(--fpuc-text-h3);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-title);
  color: var(--fpuc-text);
}
.fpuc-card--tool .fpuc-card__text {
  font-size: var(--fpuc-text-body);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text-strong);
}
/* El enlace va justo debajo del texto, no pegado al fondo de la tarjeta: en el
   diseño el aire sobrante queda abajo. (Antes `margin-top: auto` lo empujaba
   al pie y abría un hueco que el diseño no tiene.) */

/* --- news: tarjetas de noticia (Home y5396, 392×515) -------------- */
.fpuc-card--news {
  display: flex;
  flex-direction: column;
  border-radius: var(--fpuc-radius-md);
  overflow: hidden;
  background: var(--fpuc-surface-card);
  box-shadow: var(--fpuc-shadow-md);
}
.fpuc-card--news .fpuc-card__media {
  aspect-ratio: 16 / 10;
  background-color: var(--fpuc-lavender);
  background-size: cover;
  background-position: center;
}
/* Cuando la tarjeta tiene enlace, la foto es un <a>: sin `display: block` sigue
   siendo inline y pierde el aspect-ratio. */
.fpuc-card--news a.fpuc-card__media {
  display: block;
  transition: opacity var(--fpuc-transition);
}
.fpuc-card--news a.fpuc-card__media:hover { opacity: 0.9; }
.fpuc-card--news .fpuc-card__body {
  display: grid;
  align-content: start;
  gap: var(--fpuc-space-3);
  padding: var(--fpuc-space-5);
}
.fpuc-card--news .fpuc-card__date {
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-meta);
  font-weight: var(--fpuc-weight-medium);
  letter-spacing: var(--fpuc-tracking-wide);
  text-transform: uppercase;
  color: var(--fpuc-text-muted);
}
.fpuc-card--news .fpuc-card__title {
  font-size: var(--fpuc-text-body-lg);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-title);
  color: var(--fpuc-text-strong);
}
.fpuc-card--news .fpuc-card__title a { color: inherit; text-decoration: none; }
.fpuc-card--news .fpuc-card__title a:hover { color: var(--fpuc-text-accent); }
.fpuc-card--news .fpuc-card__text {
  font-size: var(--fpuc-text-small);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text-muted);
}
.fpuc-card--news .fpuc-btn { justify-self: start; margin-top: var(--fpuc-space-2); }

/* --- timeline: tarjetas del timeline (historia y1470, 339×274) ---- */
.fpuc-card--timeline {
  display: grid;
  align-content: start;
  gap: var(--fpuc-space-3);
  padding: var(--fpuc-space-5);
  border-radius: var(--fpuc-radius-md);
  border-left: 4px solid var(--fpuc-teal);
  background: var(--fpuc-surface-card);
  box-shadow: var(--fpuc-shadow-sm);
}
.fpuc-card--timeline .fpuc-card__year {
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-quote);
  font-weight: var(--fpuc-weight-bold);
  color: var(--fpuc-blue);
}
.fpuc-card--timeline .fpuc-card__title {
  font-size: var(--fpuc-text-body-lg);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-title);
  color: var(--fpuc-text);
}
.fpuc-card--timeline .fpuc-card__text {
  font-size: var(--fpuc-text-17);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text-strong);
}


/* =====================================================
   13 · TARJETA: TILE DE PROYECTO — fpuc_card( variant tile )
   Grilla de 4 columnas en proyectos / qué hacemos (253×209)
   ===================================================== */

/* Cuadrada y con el texto al centro (antes 253×209 y pegado abajo). */
.fpuc-card--tile {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--fpuc-space-1);
  aspect-ratio: 1 / 1;
  padding: var(--fpuc-space-4);
  border-radius: var(--fpuc-radius-md);
  overflow: hidden;
  background-color: var(--fpuc-navy);
  background-size: cover;
  background-position: center;
  text-align: center;
  text-decoration: none;
  color: var(--fpuc-text-on-dark);
}
.fpuc-card--tile::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Velo un 20 % más oscuro que antes: 60 → 72 %, y 40 → 48 % al pasar. */
  background: color-mix(in srgb, var(--fpuc-overlay) 72%, transparent);
  transition: background-color var(--fpuc-transition);
}
.fpuc-card--tile:hover::before {
  background: color-mix(in srgb, var(--fpuc-overlay) 48%, transparent);
}
.fpuc-card--tile .fpuc-badge,
.fpuc-card--tile .fpuc-card__title { position: relative; }
.fpuc-card--tile .fpuc-card__title {
  font-size: var(--fpuc-text-body);
  font-weight: var(--fpuc-weight-semibold);
  line-height: var(--fpuc-leading-title);
}


/* =====================================================
   14 · TARJETA: CASO DE ÉXITO — fpuc_card( variant case )
   ===================================================== */

.fpuc-card--case {
  display: flex;
  flex-direction: column;
  border-radius: var(--fpuc-radius-md);
  overflow: hidden;
  background: var(--fpuc-surface-card);
  box-shadow: var(--fpuc-shadow-sm);
}
.fpuc-card--case .fpuc-card__eyebrow {
  padding: var(--fpuc-space-3) var(--fpuc-space-5);
  background: var(--fpuc-navy);
  color: var(--fpuc-text-on-dark);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-meta);
  font-weight: var(--fpuc-weight-semibold);
  letter-spacing: var(--fpuc-tracking-wide);
  text-transform: uppercase;
}
.fpuc-card--case .fpuc-card__media {
  aspect-ratio: 16 / 9;
  background-color: var(--fpuc-lavender);
  background-size: cover;
  background-position: center;
}
.fpuc-card--case .fpuc-card__body {
  display: grid;
  align-content: start;
  gap: var(--fpuc-space-3);
  padding: var(--fpuc-space-5);
}
.fpuc-card--case .fpuc-card__title {
  font-size: var(--fpuc-text-body-lg);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-title);
  color: var(--fpuc-blue);
}
.fpuc-card--case .fpuc-card__text {
  font-size: var(--fpuc-text-body);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text-strong);
}


/* =====================================================
   15 · TARJETA: TRANSPARENCIA — fpuc_card( variant transparency )
   Sección Transparencia de nosotros (y1287, 320×350)
   ===================================================== */

.fpuc-card--transparency {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fpuc-space-4);
  padding: var(--fpuc-space-6);
  border-radius: var(--fpuc-radius-md);
  background: var(--fpuc-blue);
  color: var(--fpuc-text-on-dark);
}
/* El icono va centrado en la tarjeta; el resto —título, texto y botón— queda a
   la izquierda, de ahí el `align-self` en vez de tocar el `align-items` de la
   tarjeta. */
.fpuc-card--transparency .fpuc-card__icon {
  align-self: center;
  font-size: var(--fpuc-text-h3);
  line-height: var(--fpuc-leading-none);
}
.fpuc-card--transparency .fpuc-card__title {
  font-size: var(--fpuc-text-h3);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-title);
}
.fpuc-card--transparency .fpuc-card__text {
  font-size: var(--fpuc-text-body);
  line-height: var(--fpuc-leading-body);
}
/* El botón, centrado como el icono, y pegado abajo (`margin-top: auto`) para
   que las tres tarjetas lo tengan a la misma altura aunque el texto ocupe
   distinto. */
.fpuc-card--transparency .fpuc-btn {
  align-self: center;
  margin-top: auto;
}
/* La tercera tarjeta de la fila va clara. */
.fpuc-card--transparency.is-light {
  background: var(--fpuc-ghost);
  color: var(--fpuc-text);
}


/* =====================================================
   16 · HERO DE PÁGINA — fpuc_page_hero()
   ===================================================== */

.fpuc-hero {
  position: relative;
  display: grid;
  align-content: center;
  padding-block: var(--fpuc-space-9);
  text-align: center;
  color: var(--fpuc-text-on-dark);
}
/* El contenido va dentro de .fpuc-container, así que la rejilla vive ahí. */
.fpuc-hero > .fpuc-container {
  display: grid;
  justify-items: center;
  gap: var(--fpuc-space-4);
}
/* El color va explícito, no heredado del contenedor: main.css trae
   `h1, h2 { color: #222 }` y un selector de elemento aplicado directamente al
   encabezado siempre gana al color heredado del padre, sea cual sea su
   especificidad. Vale para todos los títulos sobre fondo de color. */
.fpuc-hero__title {
  margin: 0;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-h1);
  font-weight: var(--fpuc-weight-semibold);
  line-height: var(--fpuc-leading-h1);
  color: var(--fpuc-text-on-dark);
}
.fpuc-hero__lead {
  margin: 0;
  max-width: 62ch;
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-lead);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text-on-dark);
}
.fpuc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fpuc-space-3);
  justify-content: center;
  margin-top: var(--fpuc-space-3);
}

/* band — color plano. teal en nosotros/equipo/historia, blue en propósito. */
.fpuc-hero--teal { background: var(--fpuc-surface-teal); }
.fpuc-hero--blue { background: var(--fpuc-surface-accent); }
.fpuc-hero--sky  { background: var(--fpuc-surface-sky); }
.fpuc-hero--navy { background: var(--fpuc-surface-dark); }

/* photo — foto con velo. Home y proyectos. */
.fpuc-hero--photo {
  background-color: var(--fpuc-navy);
  background-size: cover;
  background-position: center;
  min-height: var(--fpuc-hero-height);
}
.fpuc-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--fpuc-overlay) 55%, transparent);
}
.fpuc-hero--photo > .fpuc-container { position: relative; }
.fpuc-hero--photo .fpuc-hero__title { font-size: var(--fpuc-text-h2); text-transform: uppercase; }

/* split — texto + galería. Hero de single proyecto (y244, fondo #E6E9EE). */
.fpuc-hero--split {
  padding-block: var(--fpuc-space-8);
  text-align: left;
  background: var(--fpuc-surface-muted);
  color: var(--fpuc-text);
}
/* Texto 30 %, galería 60 % y 10 % de aire entre medio; el texto arriba, a la
   altura de la foto. (El gap en % se mide sobre el ancho del contenedor.) */
.fpuc-hero--split > .fpuc-container {
  grid-template-columns: minmax(0, 3fr) minmax(0, 6fr);
  align-items: start;
  justify-items: stretch;
  column-gap: 10%;
  row-gap: var(--fpuc-space-6);
}
.fpuc-hero--split .fpuc-hero__title { font-size: var(--fpuc-text-h2); color: var(--fpuc-text); }
.fpuc-hero--split .fpuc-hero__lead {
  font-size: var(--fpuc-text-body);
  color: var(--fpuc-text-strong);
}
.fpuc-hero--split .fpuc-hero__body { display: grid; gap: var(--fpuc-space-4); }

/* Banda de color con el nav montado encima, sin franja blanca: el hero le
   reserva arriba el hueco del header (mismo valor que en equipo.css). Abajo, en
   cambio, la banda cierra pegada a la bajada: acá no hay tarjetas montadas sobre
   ella. La usan Noticias y Material educativo. */
.fpuc-hero--band {
  padding-block: var(--fpuc-hero-band-top) var(--fpuc-space-8);
}

/* Bajo 1000px el header deja de ir montado (layout/header.css), así que el
   hero ya no tiene que reservarle hueco arriba. */
@media (max-width: 1000px) {
  .fpuc-hero--band { padding-block: var(--fpuc-space-8); }
}

@media (max-width: 900px) {
  .fpuc-hero__title { font-size: var(--fpuc-text-h2); }
  .fpuc-hero--split > .fpuc-container { grid-template-columns: 1fr; }
  .fpuc-hero--photo { min-height: 420px; }
}


/* =====================================================
   17 · PANEL — fpuc_panel()
   ===================================================== */

.fpuc-panel {
  display: grid;
  align-content: center;
  gap: var(--fpuc-space-5);
  padding: var(--fpuc-space-8);
  border: 2px solid transparent;
  border-radius: var(--fpuc-radius-md);
  background: var(--fpuc-surface-highlight);
  color: var(--fpuc-text-on-dark);
}
.fpuc-panel--teal { background: var(--fpuc-surface-teal); }
.fpuc-panel--navy { background: var(--fpuc-surface-dark); }
.fpuc-panel--blue { background: var(--fpuc-surface-accent); }

/* outlined — caja blanca con borde coral. "Más sobre la Fundación"
   (historia y2627, 938×601). En la extracción aparecía como bloque
   relleno: es un anillo. */
.fpuc-panel--outlined {
  background: var(--fpuc-surface);
  border-color: var(--fpuc-border-accent);
  color: var(--fpuc-text);
}

/* El rótulo de un panel relleno va en blanco. `--fpuc-eyebrow--panel` sólo fija
   el tamaño, así que sin esto heredaba el navy por defecto del eyebrow, que es
   el color del rótulo sobre blanco y no el del diseño sobre color. El outlined
   sí va sobre blanco y conserva el navy. */
.fpuc-panel:not(.fpuc-panel--outlined) .fpuc-eyebrow {
  color: var(--fpuc-text-on-dark);
}

.fpuc-panel__title {
  margin: 0;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-h2);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-h2);
  color: var(--fpuc-text-on-dark);
}
.fpuc-panel--outlined .fpuc-panel__title { color: var(--fpuc-text); }
.fpuc-panel__text {
  margin: 0;
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body-lg);
  line-height: var(--fpuc-leading-body);
}
.fpuc-panel__actions { display: flex; flex-wrap: wrap; gap: var(--fpuc-space-3); }

/* Layout partido: el bloque de color va detrás y arranca más arriba; la foto,
   vertical, lo monta por delante, le tapa el canto izquierdo y le sobra por
   abajo (Home y3703, x=616).

   Medido sobre el diseño de 1440, que es el contenedor de 1234: foto de 561
   y panel de 755, solapados 83. Descontado el solape, las columnas quedan en
   478 y 755 → 0.63fr y 1fr. El desfase vertical es algo mayor que el
   horizontal (103 contra 83), así que van en dos variables. */
.fpuc-panel-split {
  --fpuc-split-monta: var(--fpuc-space-8);
  --fpuc-split-desfase: var(--fpuc-space-9);
  display: grid;
  grid-template-columns: 0.63fr 1fr;
  align-items: start;
}
.fpuc-panel-split__media {
  position: relative;
  z-index: 1;
  margin-top: var(--fpuc-split-desfase);
  margin-right: calc(-1 * var(--fpuc-split-monta));
  aspect-ratio: 7 / 8;
  border-radius: var(--fpuc-radius-md);
  background-color: var(--fpuc-lavender);
  background-size: cover;
  background-position: center;
}
/* El canto izquierdo del panel queda debajo de la foto: se compensa con
   padding para que el texto no arranque pegado a la imagen. */
.fpuc-panel-split__panel .fpuc-panel {
  padding-left: calc(var(--fpuc-space-8) + var(--fpuc-split-monta));
}

@media (max-width: 900px) {
  .fpuc-panel-split { grid-template-columns: 1fr; }
  /* Apilado no hay solape que hacer, y a todo el ancho la foto vertical
     ocuparía media pantalla: vuelve a ser apaisada. */
  .fpuc-panel-split__media {
    margin-top: 0;
    margin-right: 0;
    aspect-ratio: 4 / 3;
  }
  .fpuc-panel { padding: var(--fpuc-space-6); }
  .fpuc-panel-split__panel .fpuc-panel { padding-left: var(--fpuc-space-6); }
  .fpuc-panel__title { font-size: var(--fpuc-text-h3); }
}


/* =====================================================
   18 · LISTA DE ENLACES — fpuc_link_list()
   "Trabaja con nosotros" (equipo), "Más sobre la Fundación"
   (historia), "Estudios" (proyectos).
   ===================================================== */

.fpuc-link-list {
  display: grid;
  gap: var(--fpuc-space-7);
  padding: 0; margin: 0;
  list-style: none;
}
.fpuc-link-list--ruled { gap: 0; }
.fpuc-link-list--ruled > li {
  padding-block: var(--fpuc-space-5);
  border-bottom: 1px solid var(--fpuc-border-subtle);
}
.fpuc-link-list--ruled > li:last-child { border-bottom: 0; }

.fpuc-link-list__item { display: grid; gap: var(--fpuc-space-2); }
.fpuc-link-list__title {
  margin: 0;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-body-lg);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-title);
  color: var(--fpuc-text);
}
.fpuc-link-list__text {
  margin: 0;
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text-strong);
}
.fpuc-link-list__action { margin-top: var(--fpuc-space-2); justify-self: start; }


/* =====================================================
   19 · TESTIMONIO — fpuc_testimonial()
   "Voces de impacto". Único estilo de testimonio del sitio:
   caja con borde sobre banda de color.
   ===================================================== */

.fpuc-testimonial {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--fpuc-space-8);
  padding: var(--fpuc-space-7);
  border: 1px solid color-mix(in srgb, var(--fpuc-white) 40%, transparent);
  border-radius: var(--fpuc-radius-md);
  color: var(--fpuc-text-on-dark);
}
.fpuc-testimonial__photo {
  width: 200px;
  aspect-ratio: 3 / 4;
  border-radius: var(--fpuc-radius-sm);
  background-color: var(--fpuc-surface-photo);
  background-size: cover;
  background-position: center;
}
.fpuc-testimonial__body { display: grid; gap: var(--fpuc-space-4); text-align: center; }
.fpuc-testimonial__mark {
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-h3);
  line-height: var(--fpuc-leading-none);
  opacity: 0.7;
}
.fpuc-testimonial__quote {
  margin: 0;
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-quote);
  line-height: var(--fpuc-leading-body);
}
.fpuc-testimonial__author {
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-small);
  font-weight: var(--fpuc-weight-bold);
  font-style: normal;
}
.fpuc-testimonial__role {
  display: block;
  font-weight: var(--fpuc-weight-regular);
  opacity: 0.85;
}

@media (max-width: 900px) {
  .fpuc-testimonial { grid-template-columns: 1fr; justify-items: center; gap: var(--fpuc-space-5); }
  .fpuc-testimonial__photo { width: 160px; }
}


/* --- Carrusel de "Voces de impacto" ----------------------------------
   Un slide por testimonio publicado. Los slides se apilan en la MISMA
   celda de grid: la caja mide lo que el testimonio más largo y cambiar
   de uno a otro no da saltos de altura.

   Sin `.is-multi` (un solo testimonio) no se oculta nada: la sección es
   un testimonio fijo, sin puntos y sin JS detrás. */

.fpuc-voces { display: grid; gap: var(--fpuc-space-6); }
.fpuc-voces__slides { display: grid; }
.fpuc-voces__slide { grid-area: 1 / 1; }

.fpuc-voces.is-multi .fpuc-voces__slide {
  /* visibility, y no display, para que el slide oculto siga ocupando su
     celda —así el alto no baila— pero salga del tabulador y del lector. */
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--fpuc-transition), visibility var(--fpuc-transition);
}
.fpuc-voces.is-multi .fpuc-voces__slide.is-active { visibility: visible; opacity: 1; }

/* Puntos blancos y un 15 % más grandes que los del componente (10 → 11.5px):
   la banda es celeste y el negro se leía como un agujero. */
.fpuc-voces .fpuc-dots__dot {
  width: 11.5px;
  height: 11.5px;
  color: var(--fpuc-white);
  opacity: 0.5;
}
.fpuc-voces .fpuc-dots__dot.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fpuc-voces.is-multi .fpuc-voces__slide { transition: none; }
}


/* =====================================================
   20 · TIMELINE — fpuc_timeline()
   Historia: fila de años + carrusel de tarjetas + flechas
   ===================================================== */

.fpuc-timeline { display: grid; gap: var(--fpuc-space-6); }
.fpuc-timeline__viewport {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--fpuc-space-4);
}
.fpuc-timeline__track {
  display: grid;
  grid-auto-flow: column;
  /* Ancho fijo de la tarjeta del diseño, no 1fr: con `1fr` las columnas se
     reparten el ancho del carril, así que cada hito que se añade estrecha a
     todos los demás en vez de alargar el carrusel. Con 15 hitos las tarjetas
     quedaban en una tira de texto desbordado. */
  grid-auto-columns: var(--fpuc-timeline-card);
  gap: var(--fpuc-grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.fpuc-timeline__track::-webkit-scrollbar { display: none; }
.fpuc-timeline__track > * { scroll-snap-align: start; }

@media (max-width: 900px) {
  .fpuc-timeline__track { grid-auto-columns: 85%; }
}


/* =====================================================
   21 · GALERÍA — fpuc_gallery()
   Hero de single proyecto: imagen principal + tira de miniaturas
   ===================================================== */

.fpuc-gallery {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--fpuc-space-3);
  align-items: start;
}
/* Sin columna de miniaturas (una sola imagen), la foto ocupa todo el ancho. */
.fpuc-gallery:not(:has(.fpuc-gallery__thumbs)) { grid-template-columns: 1fr; }
.fpuc-gallery__main {
  aspect-ratio: 4 / 3;
  border-radius: var(--fpuc-radius-sm);
  background-color: var(--fpuc-lavender);
  background-size: cover;
  background-position: center;
}
.fpuc-gallery__thumbs {
  display: grid;
  gap: var(--fpuc-space-2);
  padding: 0; margin: 0;
  list-style: none;
}
.fpuc-gallery__thumb {
  width: 56px;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--fpuc-radius-sm);
  background-color: var(--fpuc-lavender);
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.fpuc-gallery__thumb.is-active { border-color: var(--fpuc-blue); }
.fpuc-gallery__thumb:focus-visible {
  outline: 3px solid var(--fpuc-focus-ring);
  outline-offset: 2px;
}


/* =====================================================
   22 · FORMULARIO — fpuc_form()
   "Trabajemos juntos" (proyectos y3124, panel 1236×778)
   ===================================================== */

.fpuc-form-panel {
  padding: var(--fpuc-space-8);
  border-radius: var(--fpuc-radius-md);
  background: var(--fpuc-ghost);
}
.fpuc-form-panel__title {
  margin: 0 0 var(--fpuc-space-2);
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-h2);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-h2);
  color: var(--fpuc-text);
}
.fpuc-form-panel__intro {
  margin: 0 0 var(--fpuc-space-6);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body);
  color: var(--fpuc-text-strong);
}

.fpuc-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fpuc-space-5);
}
.fpuc-field { display: grid; gap: var(--fpuc-space-2); }
.fpuc-field--full { grid-column: 1 / -1; }
.fpuc-field__label {
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-label);
  color: var(--fpuc-text-strong);
}
.fpuc-field__control {
  width: 100%;
  padding: var(--fpuc-space-3) var(--fpuc-space-4);
  border: 1px solid var(--fpuc-border);
  border-radius: var(--fpuc-radius-sm);
  background: var(--fpuc-surface);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body-sm);
  color: var(--fpuc-text);
}
.fpuc-field__control:focus-visible {
  outline: 2px solid var(--fpuc-focus-ring);
  outline-offset: 1px;
  border-color: var(--fpuc-blue);
}
textarea.fpuc-field__control { min-height: 120px; resize: vertical; }
.fpuc-form__actions { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .fpuc-form { grid-template-columns: 1fr; }
  .fpuc-form-panel { padding: var(--fpuc-space-6); }
}


/* =====================================================
   23 · ALIADOS — fpuc_ally()
   Tiles de logo 170×170 con borde (Home y4801)
   ===================================================== */

.fpuc-ally {
  display: grid;
  place-items: center;
  width: 170px; height: 170px;
  padding: var(--fpuc-space-4);
  border: 1px solid var(--fpuc-border);
  border-radius: var(--fpuc-radius-md);
  background: var(--fpuc-surface);
}
.fpuc-ally img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--fpuc-transition), opacity var(--fpuc-transition);
}
.fpuc-ally:hover img { filter: none; opacity: 1; }

/* Flechas fuera, pista desplazable en medio: los 6 tiles del diseño no caben
   junto a las flechas dentro del contenedor de 1234px. */
.fpuc-ally-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--fpuc-space-3);
}
.fpuc-ally-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: space-between;
  gap: var(--fpuc-space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.fpuc-ally-track::-webkit-scrollbar { display: none; }
.fpuc-ally-track > * { scroll-snap-align: start; }


/* =====================================================
   24 · BANDA CTA · NEWSLETTER · FLOTANTES
   Los cuatro aparecen en las 8 páginas.
   ===================================================== */

/* --- Banda CTA: "Súmate a que nadie se quede sin estudiar" -------- */
.fpuc-cta-band {
  padding-block: var(--fpuc-space-9);
  background: var(--fpuc-surface-accent);
  color: var(--fpuc-text-on-dark);
  text-align: center;
}
.fpuc-cta-band > .fpuc-container {
  display: grid;
  justify-items: center;
  gap: var(--fpuc-space-4);
}
.fpuc-cta-band__title {
  margin: 0;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-h2);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-h2);
  color: var(--fpuc-text-on-dark);
}
.fpuc-cta-band__text {
  margin: 0;
  max-width: 70ch;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-body-lg);
  line-height: var(--fpuc-leading-body);
}
.fpuc-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fpuc-space-3);
  justify-content: center;
  margin-top: var(--fpuc-space-3);
}
/* El botón principal de la banda va en el naranja del "Dona" del header, no
   en el rosa del resto de botones. */
.fpuc-cta-band .fpuc-btn--pink {
  background: var(--fpuc-action-donate);
  border-color: var(--fpuc-action-donate);
}
.fpuc-cta-band .fpuc-btn--pink:hover,
.fpuc-cta-band .fpuc-btn--pink:focus-visible {
  background: var(--fpuc-coral);
  border-color: var(--fpuc-coral);
}

/* --- Newsletter (y6432, 1536×103) --------------------------------- */
.fpuc-newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fpuc-space-5);
  padding-block: var(--fpuc-space-5);
  background: var(--fpuc-surface-band);
}
.fpuc-newsletter__label {
  display: inline-flex;
  align-items: center;
  gap: var(--fpuc-space-2);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body-lg);
  font-weight: var(--fpuc-weight-bold);
  color: var(--fpuc-navy);
}

/* El buzón del diseño, de fondo y no como carácter: no hay glifo que se le
   parezca y los de la fuente se pintan distinto en cada sistema. Va a 24×17,
   que es su lienzo, para no deformarlo. El color está escrito a mano dentro del
   SVG porque un data URI no puede leer var(--fpuc-navy). */
.fpuc-newsletter__label::before {
  content: "";
  flex: 0 0 auto;
  width: 24px; height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 17' fill='none'%3E%3Cpath fill='%2304235A' d='M15.6667 7.84615C15.0556 7.79167 14.7222 7.46474 14.6667 6.86539V2.28846V0.98077C14.7222 0.381411 15.0556 0.0544872 15.6667 0H18.3333C18.9444 0.0544872 19.2778 0.381411 19.3333 0.98077V2.28846C19.2778 2.88782 18.9444 3.21474 18.3333 3.26923H16.6667V6.86539C16.6111 7.46474 16.2778 7.79167 15.6667 7.84615ZM6 3.26923C4.86111 3.29647 3.91667 3.67789 3.16667 4.41346C2.41667 5.14904 2.02778 6.07532 2 7.19231V14.3846C2.02778 14.7933 2.25 15.0112 2.66667 15.0385H10V7.19231C9.97222 6.07532 9.58333 5.14904 8.83333 4.41346C8.08333 3.67789 7.13889 3.29647 6 3.26923ZM10.4583 3.26923C11.4583 4.33173 11.9722 5.63942 12 7.19231V15.0385H21.3333C21.75 15.0112 21.9722 14.7933 22 14.3846V7.19231C22 6.48397 21.8194 5.83013 21.4583 5.23077C21.125 4.65865 20.6528 4.19551 20.0417 3.84135C20.4583 3.40545 20.6667 2.88782 20.6667 2.28846V1.92067C21.6667 2.41106 22.4722 3.11939 23.0833 4.04567C23.6667 4.97196 23.9722 6.02083 24 7.19231V14.3846C23.9722 15.1202 23.7083 15.7332 23.2083 16.2236C22.7083 16.7139 22.0833 16.9728 21.3333 17H12H10H2.66667C1.91667 16.9728 1.29167 16.7139 0.791667 16.2236C0.291667 15.7332 0.0277778 15.1202 0 14.3846V7.19231C0.0555556 5.53045 0.638889 4.14103 1.75 3.02404C2.88889 1.93429 4.30556 1.36218 6 1.30769H13.3333V2.28846V3.26923H10.4583ZM4.33333 6.53846H7.66667C8.27778 6.59295 8.61111 6.91987 8.66667 7.51923C8.61111 8.11859 8.27778 8.44551 7.66667 8.5H4.33333C3.72222 8.44551 3.38889 8.11859 3.33333 7.51923C3.38889 6.91987 3.72222 6.59295 4.33333 6.53846Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Si el texto de la etiqueta se escribe en el editor de Contact Form 7 con un
   ✉ delante —como estaba—, sobra: el icono ya lo pone ::before. */
.fpuc-newsletter__label > span[aria-hidden="true"] { display: none; }

/* .fpuc-newsletter__form se define en el bloque 27: lo comparte el formulario
   de CF7, que es el que se pinta normalmente. */

/* El campo y el botón van juntos dentro de una sola píldora de borde navy: el
   recuadro que se ve es éste, no el <input>, que va sin borde ni fondo. Así el
   botón redondo queda dentro del recuadro, como en el diseño. */
.fpuc-newsletter__group {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--fpuc-space-2);
  min-width: 400px;
  padding: 5px 6px 5px 38px;
  border: 1px solid var(--fpuc-navy);
  border-radius: 999px;
  background: var(--fpuc-surface);
}

/* La arroba del diseño. Va en el hueco que reserva el padding izquierdo. */
.fpuc-newsletter__group::before {
  content: "@";
  position: absolute;
  left: 16px;
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-small);
  color: var(--fpuc-text-subtle);
  pointer-events: none;
}

.fpuc-newsletter__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: var(--fpuc-space-2) 0;
  border: 0;
  background: transparent;
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-small);
  color: var(--fpuc-text);
}

/* El foco se marca en la píldora entera, no en el campo: el campo no tiene
   borde propio y un contorno suyo se vería flotando dentro del recuadro. */
.fpuc-newsletter__input:focus { outline: none; }
.fpuc-newsletter__group:focus-within {
  outline: 2px solid var(--fpuc-focus-ring);
  outline-offset: 2px;
}

/* Botón de envío: círculo con flecha. El texto ("Suscribirme") se esconde con
   font-size 0 en vez de borrarse, porque sigue siendo el nombre accesible del
   botón — un lector de pantalla lo lee, y a la vista queda sólo la flecha. */
.fpuc-newsletter__submit,
.fpuc-newsletter__form .wpcf7-submit {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  padding: 0;
  border: 1px solid var(--fpuc-navy);
  border-radius: 50%;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304235A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12.5 6 6 6-6 6'/%3E%3C/svg%3E") center / 15px no-repeat;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  transition: background-color var(--fpuc-transition), border-color var(--fpuc-transition);
}
.fpuc-newsletter__submit:hover,
.fpuc-newsletter__form .wpcf7-submit:hover {
  background-color: var(--fpuc-navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12.5 6 6 6-6 6'/%3E%3C/svg%3E");
}
.fpuc-newsletter__submit:focus-visible,
.fpuc-newsletter__form .wpcf7-submit:focus-visible {
  outline: 2px solid var(--fpuc-focus-ring);
  outline-offset: 2px;
}

/* --- Volver arriba ------------------------------------------------ */
.fpuc-back-to-top {
  position: fixed;
  right: var(--fpuc-space-5);
  bottom: var(--fpuc-space-5);
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: var(--fpuc-radius-sm);
  background: var(--fpuc-mist);
  color: var(--fpuc-navy);
  font-size: var(--fpuc-text-body);
  cursor: pointer;
  z-index: 40;
}
.fpuc-back-to-top:hover { background: var(--fpuc-navy); color: var(--fpuc-text-on-dark); }

/* --- Columna flotante de redes, al borde derecho ------------------ */
.fpuc-social-rail {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 1px;
  padding: 0; margin: 0;
  list-style: none;
  z-index: 40;
}
/* Cuadros con el icono en blanco, redondeados sólo del lado que se ve
   (equipo.pdf y462, 42×42). Van en el azul del footer, no en el #0048AB del
   diseño; el hover pasa a ése. */
.fpuc-social-rail__link {
  display: grid;
  place-items: center;
  width: var(--fpuc-rail-icon); height: var(--fpuc-rail-icon);
  border-radius: var(--fpuc-radius-md) 0 0 var(--fpuc-radius-md);
  background: var(--fpuc-surface-dark);
  color: var(--fpuc-text-on-dark);
  font-size: var(--fpuc-text-small);
  text-decoration: none;
  transition: background-color var(--fpuc-transition), color var(--fpuc-transition);
}
.fpuc-social-rail__link svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.fpuc-social-rail__link:hover { background: var(--fpuc-action-alt); }

@media (max-width: 900px) {
  .fpuc-social-rail { display: none; }
  .fpuc-cta-band { padding-block: var(--fpuc-space-8); }
  .fpuc-cta-band__title { font-size: var(--fpuc-text-h3); }
  .fpuc-newsletter__form { flex-direction: column; width: 100%; max-width: 360px; }
  .fpuc-newsletter__input { min-width: 0; width: 100%; }
}


/* =====================================================
   27 · CONTACT FORM 7
   Los dos formularios que envían de verdad —la barra de
   newsletter y el panel "Trabajemos juntos"— los pinta el
   plugin. Éste bloque sólo desarma los envoltorios que CF7
   añade por su cuenta, para que el layout siga siendo el
   del diseño y no haya que duplicar estilos.
   ===================================================== */

/* CF7 mete un <div class="wpcf7"> entre el contenedor y el <form>. En la barra
   de newsletter eso cortaba el flex —el <form> dejaba de ser hijo directo— y la
   fila se apilaba. `display: contents` lo saca del árbol de layout sin tocar el
   marcado del plugin. En el panel no hace falta: ahí el contenedor es un bloque
   normal y la rejilla vive en el propio <form>. */
.fpuc-newsletter > .wpcf7 { display: contents; }

/* CF7 pasa el contenido del editor por wpautop, así que envuelve en <p> y mete
   un <br> por cada salto de línea. En el panel da igual —la rejilla es del
   <form> y los <p> serían celdas, pero se anulan igual— pero en la barra rompía
   el flex: la etiqueta y la píldora dejaban de ser hermanas y se apilaban.
   Neutralizarlo en CSS y no con el filtro `wpcf7_autop` es a propósito: así
   quien edita el formulario puede seguir escribiéndolo en varias líneas. */
.fpuc-newsletter__form > p,
.fpuc-form > p { display: contents; }
.fpuc-newsletter__form br,
.fpuc-form br { display: none; }

/* Cada campo va envuelto en un <span class="wpcf7-form-control-wrap"> inline,
   que impide que el control ocupe el ancho de su celda. */
.fpuc-field > .wpcf7-form-control-wrap { display: block; }

/* En la píldora del newsletter, además, tiene que estirarse: es el envoltorio
   quien recibe el espacio sobrante del flex, no el <input> de dentro. */
.fpuc-newsletter__group .wpcf7-form-control-wrap {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

/* El <form> de CF7 recibe la clase de layout por `html_class` (ver fpuc_cf7()),
   así que .fpuc-form y .fpuc-newsletter__form ya le aplican. Sólo queda anular
   los márgenes que trae el plugin de serie. */
.wpcf7-form.fpuc-form,
.wpcf7-form.fpuc-newsletter__form { margin: 0; }

/* Barra de newsletter: etiqueta + píldora centradas. El resto del aspecto
   —píldora, arroba y botón redondo— está en el bloque 24, junto al componente. */
.fpuc-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fpuc-space-5);
}

/* Panel: el botón a la derecha, como en el diseño. */
.fpuc-form__actions--end { justify-self: end; }

/* Avisos de envío y de error: a ancho completo, nunca como una celda más de la
   rejilla ni como un elemento suelto de la fila. */
.fpuc-form .wpcf7-response-output,
.fpuc-newsletter__form .wpcf7-response-output {
  grid-column: 1 / -1;
  flex-basis: 100%;
  margin: var(--fpuc-space-4) 0 0;
  padding: var(--fpuc-space-3) var(--fpuc-space-4);
  border-width: 1px;
  border-radius: var(--fpuc-radius-sm);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body-sm);
  text-align: center;
}

/* Validación campo a campo. */
.fpuc-field .wpcf7-not-valid-tip,
.fpuc-newsletter .wpcf7-not-valid-tip {
  margin-top: var(--fpuc-space-2);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-label);
  color: var(--fpuc-action);
}
.fpuc-field__control.wpcf7-not-valid { border-color: var(--fpuc-action); }

/* El campo del newsletter no tiene borde propio —lo pone la píldora—, así que
   el error se marca en ella. */
.fpuc-newsletter__group:has(.wpcf7-not-valid) { border-color: var(--fpuc-action); }

/* El aviso de error del newsletter cuelga bajo la píldora sin empujarla ni
   ensanchar la banda: dentro de la fila no cabe. */
.fpuc-newsletter__group .wpcf7-not-valid-tip {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--fpuc-space-2);
}

/* El spinner nace con margen propio y ensancharía la píldora al enviar. */
.fpuc-newsletter__form .wpcf7-spinner {
  position: absolute;
  right: calc(100% + var(--fpuc-space-2));
  margin: 0;
}

@media (max-width: 700px) {
  /* La píldora manda sobre su ancho mínimo de 400px, o se sale de la pantalla. */
  .fpuc-newsletter__group { min-width: 0; width: 100%; max-width: 400px; }
}


/* =====================================================
   28 · PAGINACIÓN
   La emite the_posts_pagination() en Noticias y la compone
   fpuc_material_paginacion() en Material educativo. Las dos
   entregan el mismo markup, así que el estilo es uno solo.
   ===================================================== */

/* `the_posts_pagination()` emite <nav class="navigation fpuc-pagination"> con
   un <h2> de sólo lectores y los enlaces en .nav-links. */
.fpuc-pagination { margin-top: var(--fpuc-space-9); }

.fpuc-pagination .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.fpuc-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fpuc-space-2);
}

.fpuc-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--fpuc-rail-icon);
  height: var(--fpuc-rail-icon);
  padding-inline: var(--fpuc-space-3);
  border: 1px solid var(--fpuc-border-on-accent);
  border-radius: var(--fpuc-radius-sm);
  color: var(--fpuc-action-alt);
  font-size: var(--fpuc-text-small);
  font-weight: var(--fpuc-weight-semibold);
  line-height: var(--fpuc-leading-none);
  text-decoration: none;
  transition: background-color var(--fpuc-transition),
              border-color var(--fpuc-transition),
              color var(--fpuc-transition);
}
.fpuc-pagination a.page-numbers:hover,
.fpuc-pagination a.page-numbers:focus-visible {
  border-color: var(--fpuc-action-alt);
  background: var(--fpuc-surface-alt);
}
.fpuc-pagination .page-numbers:focus-visible {
  outline: 3px solid var(--fpuc-focus-ring);
  outline-offset: 2px;
}

/* Página actual: recuadro azul relleno. */
.fpuc-pagination .page-numbers.current {
  border-color: var(--fpuc-action-alt);
  background: var(--fpuc-action-alt);
  color: var(--fpuc-text-on-dark);
}

/* "← Anteriores" y "Siguientes →" van sin recuadro y algo separados de los
   números, como los puntos suspensivos. */
.fpuc-pagination .prev,
.fpuc-pagination .next,
.fpuc-pagination .page-numbers.dots { border-color: transparent; }
.fpuc-pagination .page-numbers.dots { color: var(--fpuc-text-subtle); }
.fpuc-pagination .prev:hover,
.fpuc-pagination .next:hover { background: transparent; text-decoration: underline; }
.fpuc-pagination .prev { margin-right: var(--fpuc-space-4); }
.fpuc-pagination .next { margin-left: var(--fpuc-space-4); }

@media (max-width: 600px) {
  /* En pantalla estrecha "← Anteriores" y "Siguientes →" ya ocupan casi toda
     la fila: los recuadros de número se aprietan para que quepan. */
  .fpuc-pagination .nav-links { gap: var(--fpuc-space-1); }
  .fpuc-pagination .page-numbers { padding-inline: var(--fpuc-space-2); }
  .fpuc-pagination .prev { margin-right: 0; }
  .fpuc-pagination .next { margin-left: 0; }
}