/* =====================================================
   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); }

.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()
   ===================================================== */

.fpuc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fpuc-space-2);
  padding: var(--fpuc-space-4) var(--fpuc-space-7);
  border: 2px solid transparent;
  border-radius: var(--fpuc-radius-sm);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body);
  font-weight: var(--fpuc-weight-semibold);
  line-height: var(--fpuc-leading-none);
  letter-spacing: var(--fpuc-tracking-wide);
  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);
  font-size: var(--fpuc-text-body-lg);
}
.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);
  font-size: var(--fpuc-text-label);
}
.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);
  font-size: var(--fpuc-text-quote);
  font-weight: var(--fpuc-weight-medium);
  letter-spacing: var(--fpuc-tracking-normal);
  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); } }

/* 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: flex-start;
  gap: var(--fpuc-space-4);
  padding-inline: var(--fpuc-space-6);
  color: var(--fpuc-text-on-dark);
}
.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 {
  font-size: var(--fpuc-text-body);
  line-height: var(--fpuc-leading-body);
}
.fpuc-card--route .fpuc-btn { margin-top: auto; }

/* --- 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;
}

/* La bajada manda el ancho del bloque cuando el título es corto (CEES). 18ch
   es lo que da el quiebre del diseño: "Continuidad de / estudios superiores". */
.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;
}
.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);
}
/* Las tarjetas contiguas del carrusel van atenuadas. */
.fpuc-card--timeline.is-muted { background: var(--fpuc-surface-card-alt); border-left-color: var(--fpuc-sky); }


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

.fpuc-card--tile {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: center;
  gap: var(--fpuc-space-1);
  min-height: 209px;
  padding: var(--fpuc-space-4);
  border-radius: var(--fpuc-radius-sm);
  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;
  background: color-mix(in srgb, var(--fpuc-overlay) 60%, transparent);
  transition: background-color var(--fpuc-transition);
}
.fpuc-card--tile:hover::before {
  background: color-mix(in srgb, var(--fpuc-overlay) 40%, 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-small);
  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);
}
.fpuc-card--transparency .fpuc-card__icon {
  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);
}
.fpuc-card--transparency .fpuc-btn { 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-bold);
  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 {
  text-align: left;
  background: var(--fpuc-surface-muted);
  color: var(--fpuc-text);
}
.fpuc-hero--split > .fpuc-container {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: stretch;
  gap: var(--fpuc-space-8);
}
.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); }

@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);
}

.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: foto + panel montado encima (Home y3703, x=616). */
.fpuc-panel-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.fpuc-panel-split__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--fpuc-radius-md);
  background-color: var(--fpuc-lavender);
  background-size: cover;
  background-position: center;
}
.fpuc-panel-split__panel { margin-left: calc(-1 * var(--fpuc-space-8)); }

@media (max-width: 900px) {
  .fpuc-panel-split { grid-template-columns: 1fr; }
  .fpuc-panel-split__panel { margin-left: 0; }
  .fpuc-panel { padding: 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; }
}


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

.fpuc-timeline { display: grid; gap: var(--fpuc-space-6); }
.fpuc-timeline__years { justify-content: flex-start; }
.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;
  grid-auto-columns: minmax(0, 1fr);
  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;
}
.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-body);
  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);
}

/* --- 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-semibold);
  color: var(--fpuc-text);
}
.fpuc-newsletter__form { display: flex; gap: var(--fpuc-space-2); }
.fpuc-newsletter__input {
  min-width: 280px;
  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-small);
  color: var(--fpuc-text);
}
.fpuc-newsletter__input:focus-visible {
  outline: 2px solid var(--fpuc-focus-ring);
  outline-offset: 1px;
  border-color: var(--fpuc-blue);
}

/* --- 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 azules con el icono en blanco, redondeados sólo del lado que se ve
   (equipo.pdf y462, 42×42 en #0048AB). */
.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-action-alt);
  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-navy); }

@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%; }
}