/* =====================================================
   FPUC — Página: Proyecto individual (single-fpuc_proyecto.php)
   -----------------------------------------------------
   El hero, la banda de aliados y la CTA salen de components.css.
   Lo de acá es la sección de cobertura —cifras sobre verde y mapa
   de Chile— y los dos retoques que pide el diseño de la ficha
   sobre componentes compartidos.

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


/* =====================================================
   OBJETIVOS — bajo la bajada, en la columna de texto del hero
   Subtítulo en la tipografía de los títulos y el texto en el cuerpo de la bajada.
   ===================================================== */

.fpuc-objetivos {
  display: grid;
  gap: var(--fpuc-space-3);
  margin-top: var(--fpuc-space-3);
}
.fpuc-objetivos__titulo {
  margin: 0;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-h4);
  font-weight: var(--fpuc-weight-semibold);
  line-height: var(--fpuc-leading-title);
  color: var(--fpuc-text);
}
.fpuc-objetivos__texto {
  display: grid;
  gap: var(--fpuc-space-3);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text-strong);
}
.fpuc-objetivos__texto p { margin: 0; }


/* =====================================================
   COBERTURA — cifras + mapa (y421→y770 del diseño)
   Banda verde a sangre por la izquierda hasta el 54% del ancho, y
   el mapa sobre blanco en el resto.
   ===================================================== */

.fpuc-cobertura {
  /* El verde llega al borde de la pantalla, pero las cifras arrancan en el
     mismo margen que el resto del sitio. Ese margen es lo que sobra a un lado
     del contenedor centrado; nunca menos que el padding del contenedor. */
  --fpuc-cobertura-margen: max(var(--fpuc-space-5), (100vw - var(--fpuc-container)) / 2);

  display: grid;
  grid-template-columns: 54% 1fr;
  background: var(--fpuc-surface);
}

/* --- Columna verde: las cuatro cifras -------------------------- */

.fpuc-cobertura__cifras {
  display: grid;
  align-content: center;
  padding: var(--fpuc-space-8) var(--fpuc-space-8) var(--fpuc-space-8) var(--fpuc-cobertura-margen);
  background: var(--fpuc-surface-teal);
  color: var(--fpuc-text-on-dark);
}
.fpuc-cobertura__cifras-rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fpuc-space-9) var(--fpuc-space-8);
}

/* El número es el mismo de 65px que la banda de impacto de propósito e
   historia; lo que cambia en la ficha es que va alineado a la izquierda y con
   la descripción en el cuerpo chico, para que quepan cuatro en media pantalla. */
.fpuc-cobertura__cifras-rejilla .fpuc-stat { text-align: left; }
.fpuc-cobertura__cifras-rejilla .fpuc-stat__label { font-size: var(--fpuc-text-body-sm); }

/* --- Columna blanca: el mapa y su leyenda ---------------------- */

.fpuc-cobertura__mapa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fpuc-space-7);
  padding: var(--fpuc-space-8) var(--fpuc-cobertura-margen) var(--fpuc-space-8) var(--fpuc-space-8);
}

/* La silueta es muy alta y muy estrecha (307 × 58 en el viewBox), así que
   manda el alto: el ancho sale solo del aspect-ratio del viewBox. */
.fpuc-mapa-chile {
  flex: none;
  width: auto;
  height: min(560px, 60vh);
  aspect-ratio: 58 / 312;
}
/* El borde blanco separa una región de la de al lado sin dibujar líneas. */
.fpuc-mapa-chile__region {
  fill: var(--fpuc-mist);
  stroke: var(--fpuc-surface);
  stroke-width: 0.4;
}
.fpuc-mapa-chile__region.is-marcada { fill: var(--fpuc-region); }

.fpuc-cobertura__leyenda {
  display: grid;
  align-content: center;
  gap: var(--fpuc-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fpuc-cobertura__leyenda li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--fpuc-space-3);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body-sm);
  line-height: var(--fpuc-leading-title);
  color: var(--fpuc-text);
}
/* La marca de color es la que ata cada línea con su región del mapa. */
.fpuc-cobertura__leyenda.is-larga { gap: var(--fpuc-space-2); }
.fpuc-cobertura__leyenda li::before {
  content: "";
  width: var(--fpuc-space-3);
  height: var(--fpuc-space-3);
  border-radius: var(--fpuc-radius-sm);
  background: var(--fpuc-region);
}

@media (max-width: 900px) {
  .fpuc-cobertura { grid-template-columns: 1fr; }
  .fpuc-cobertura__cifras,
  .fpuc-cobertura__mapa {
    padding-block: var(--fpuc-space-8);
    padding-inline: var(--fpuc-cobertura-margen);
  }
  .fpuc-mapa-chile { height: min(440px, 55vh); }
}

@media (max-width: 600px) {
  .fpuc-cobertura__cifras-rejilla { grid-template-columns: 1fr; gap: var(--fpuc-space-7); }
  .fpuc-cobertura__mapa { flex-direction: column; gap: var(--fpuc-space-5); }
  .fpuc-cobertura__leyenda { justify-items: start; }
}


/* =====================================================
   ALIADOS — "Con quiénes hemos trabajado"
   Misma sección que la Home, con flechas y sin enlace de cierre, y sólo con
   los aliados elegidos en el proyecto. La variante estática (tiles centrados
   sin flechas) queda por si se vuelve a ella: 'carrusel' => false.
   ===================================================== */

/* Pocos logos: juntos y al centro, no repartidos de punta a punta. La pista
   se ajusta a su contenido y se centra; si no caben, llega al 100 % y el
   carrusel se desplaza como siempre. */
.fpuc-aliados--proyecto .fpuc-ally-track {
  justify-self: center;
  justify-content: start;
  max-width: 100%;
}

.fpuc-ally-row--estatica { grid-template-columns: 1fr; }
.fpuc-ally-row--estatica .fpuc-ally-track {
  justify-content: center;
  gap: var(--fpuc-space-6);
}