/* =====================================================
   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. */
.fpuc-historia__foto { 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;
}
.fpuc-hero--historia { padding-bottom: calc(var(--fpuc-space-9) * 2); }

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