/* =====================================================
   FPUC — Base
   -----------------------------------------------------
   Reset y ajustes de elemento. Neutraliza lo que legacy/main.css impone al body mientras ambos convivan; al retirarlo, esto se queda. Aquí también lo genérico que no es componente ni de una página.

   Sólo var(--fpuc-*): ni un hex ni un tamaño literal.
   ===================================================== */


/* El reset de caja lo traía main.css, que las plantillas ya portadas no cargan:
   sin él, el padding se suma al ancho y se rompe toda la medida del diseño (el
   contenedor de 1234 y la tarjeta de persona de 286 lo incluyen). */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fpuc-surface);
  color: var(--fpuc-text);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body);
  line-height: var(--fpuc-leading-body);
}

.fpuc-main { display: block; }

img { max-width: 100%; height: auto; }

/* Todos los h1 van en semibold, también los que no tienen clase propia
   (page.php, 404). Los de hero y noticia lo fijan en su componente. */
h1 { font-weight: var(--fpuc-weight-semibold); }

.fpuc-impacto__cta,
.fpuc-programas__cta,
.fpuc-transparencia__cta,
.fpuc-aliados__cta,
.fpuc-cifras-foto__cta {
  margin: var(--fpuc-space-7) 0 0;
  text-align: center;
}

.fpuc-aliados .fpuc-ally-row { margin-top: var(--fpuc-space-7); }

.fpuc-empty {
  padding: var(--fpuc-space-7);
  border: 1px dashed var(--fpuc-border);
  border-radius: var(--fpuc-radius-md);
  color: var(--fpuc-text-muted);
  text-align: center;
}

/* Espaciado entre el encabezado de sección y lo que sigue. */
.fpuc-section-header + .fpuc-grid,
.fpuc-section-header + .fpuc-stat-band,
.fpuc-section-header + .fpuc-resultados,
.fpuc-section-header + .fpuc-timeline,
.fpuc-section-header + .fpuc-testimonial,
.fpuc-section-header + .fpuc-voces { margin-top: var(--fpuc-space-7); }


/* --- Cambiar de página sin corte -------------------------------------
   Un chip de filtro, una pestaña del catálogo, un número de la paginación:
   todos son enlaces, o sea una carga de página entera, y sin esto el cambio
   se ve como un parpadeo seco —el listado desaparece y vuelve a aparecer—
   aunque de una vista a la otra sólo cambien las tarjetas.

   Con la View Transitions API el navegador funde la página que se va con la
   que llega. El opt-in tiene que estar en LAS DOS páginas, la de salida y la
   de llegada, así que la regla va aquí y no en la hoja de cada página: esta
   hoja la cargan todas las vistas, y así vale para las que ya lo tenían
   (Noticias, catálogo de proyectos), para Material educativo y para
   cualquiera que venga después, sin acordarse de copiarla.

   Se funde la vista entera a propósito, sin marcar piezas con
   `view-transition-name`. Header, hero, buscador y chips son iguales de una
   vista a la siguiente, así que ahí no se ve nada moverse: lo único que
   cambia a la vista es el chip activo, el título y las tarjetas, que es justo
   lo que se quiere ver cambiar.

   Donde no está soportada (Firefox, de momento) no pasa nada: la navegación
   es la de siempre. No hay JS de por medio. */

@view-transition { navigation: auto; }

/* Sin animación para quien la haya desactivado en el sistema. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}