/* =====================================================
   FPUC — Página: Historia (page-historia.php)
   -----------------------------------------------------
   Foto montada sobre el hero, cifras sobre foto y bloque "Más sobre la Fundación".

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


/* Foto que monta sobre el borde inferior del hero teal. El hero es
   `position: relative`, así que sin capa propia se pintaría por encima de la
   foto y le taparía el borde superior. */
.fpuc-historia__foto {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--fpuc-space-9));
}
.fpuc-historia__foto-inner {
  aspect-ratio: 16 / 7;
  border-radius: var(--fpuc-radius-sm);
  background-color: var(--fpuc-lavender);
  background-size: cover;
  background-position: center;
}
/* Arriba, el hueco del header montado sobre el teal (fpuc_header_variante()),
   igual que Nosotros y ¿Qué hacemos?. El fondo baja lo que monta la foto
   (space-9) más el aire que queda a la vista bajo la bajada (space-8). */
.fpuc-hero--historia {
  padding-top: var(--fpuc-hero-band-top);
  padding-bottom: calc(var(--fpuc-space-9) + var(--fpuc-space-8));
}
/* Bajo 1000px el header vuelve a ir sólido y el hueco sobra. */
@media (max-width: 1000px) {
  .fpuc-hero--historia { padding-top: var(--fpuc-space-8); }
}

/* Cifras sobre foto con velo azul. */
.fpuc-cifras-foto {
  position: relative;
  padding-block: var(--fpuc-space-9);
  background-color: var(--fpuc-navy);
  background-size: cover;
  background-position: center;
  color: var(--fpuc-text-on-dark);
}
.fpuc-cifras-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--fpuc-blue) 80%, transparent);
}
.fpuc-cifras-foto > .fpuc-container { position: relative; }

/* "Más sobre la Fundación": foto montada sobre el panel con borde coral. */
.fpuc-massobre {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
}
.fpuc-massobre__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--fpuc-radius-md);
  background-color: var(--fpuc-lavender);
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.fpuc-massobre__panel {
  margin-left: calc(-1 * var(--fpuc-space-8));
  padding-left: calc(var(--fpuc-space-8) * 2);
}

@media (max-width: 900px) {
  .fpuc-massobre { grid-template-columns: 1fr; }
  .fpuc-massobre__panel { margin-left: 0; padding-left: var(--fpuc-space-6); }
  .fpuc-historia__foto { margin-top: calc(-1 * var(--fpuc-space-8)); }
  .fpuc-hero--historia { padding-bottom: calc(var(--fpuc-space-8) * 2); }
}