/* ==========================================================================
   IBC — Página Red Global
   Ejes de la red (extiende .capabilities de features.css), mosaico de
   presencia local y banda de cierre con cita. La portada de sección y el
   bloque de presentación (.page-hero, .about) son compartidos entre
   subpáginas y viven en css/subpage.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Portada — el titular lleva un <br> manual después de "internacional"
   ("Red internacional / de representación", 2 líneas fijas). La escala
   compartida de .page-hero__title desborda igual: a este tamaño de fuente
   "REPRESENTACIÓN" (la palabra más larga) no cabe en una sola línea en
   pantallas angostas. El clamp de abajo se calibró midiendo en el propio
   navegador el tamaño máximo que mantiene cada mitad en una línea a varios
   anchos (320→25.5px, 375→31px, 414→34.5px, 480→40px; a partir de ~570px
   sobra espacio de sobra), no por estimación de ancho de carácter.
   -------------------------------------------------------------------------- */
.page-hero__title { font-size: clamp(1.75rem, 0.8rem + 3.6vw, 3.75rem); }

@media (max-width: 900px) {
  .page-hero__title { font-size: clamp(1.4rem, -0.2rem + 9vw, 3rem); }
}

/* --------------------------------------------------------------------------
   Ejes de la red — sección flush contra la portada (sin espacio en blanco
   entre el hero y esta banda): padding-top a 0, sólo padding-bottom via
   .section. Extiende .capabilities con una línea de descripción y anula su
   margin-top compartido (pensado para vivir dentro de .cinematic__content),
   que aquí se colaba fuera de la sección y dejaba ver el fondo de la página.
   -------------------------------------------------------------------------- */
.redg-axes { padding-top: 0; }
.redg-capabilities { margin-top: 0; padding-block: var(--space-lg) var(--space-md); }

.capability__desc {
  max-width: 17ch;
  color: var(--color-on-dark-muted);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.55;
  text-transform: none;
  letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   Presencia local — mosaico de ciudades a sangre completa, sin canaleta
   entre fotos (mobile y desktop). El nombre del país va superpuesto sobre
   la fotografía, anclado abajo y centrado, con un velo degradado que sólo
   satura la franja inferior (donde vive el texto) y se desvanece hacia
   arriba para no oscurecer el resto de la imagen.
   -------------------------------------------------------------------------- */
.regions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.region { position: relative; }

.region__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  background-color: var(--color-navy-800);
}

.region__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(0.1);
  transition: filter var(--duration-normal) var(--ease-standard),
              transform var(--duration-slow) var(--ease-out-expo);
}

.region:hover .region__media img {
  filter: grayscale(0);
  transform: scale(1.045);
}

.region__label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: var(--space-xl) var(--space-sm) var(--space-md);
  background: linear-gradient(to top,
              rgba(6, 15, 27, 0.88) 0%,
              rgba(6, 15, 27, 0.5) 55%,
              rgba(6, 15, 27, 0) 100%);
  color: var(--color-bone-50);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 3px rgba(6, 15, 27, 0.85);
}

/* --------------------------------------------------------------------------
   Cierre — cita a pantalla completa
   -------------------------------------------------------------------------- */
.redg-quote {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(480px, 62vw, 720px);
  overflow: hidden;
  background-color: var(--color-navy-950);
  color: var(--color-on-dark);
  text-align: center;
}

.redg-quote__media { position: absolute; inset: 0; z-index: -1; }

.redg-quote__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.redg-quote__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(6, 15, 27, 0.62) 0%,
              rgba(6, 15, 27, 0.5) 40%,
              rgba(6, 15, 27, 0.82) 100%);
}

.redg-quote__inner {
  max-width: 46rem;
  padding-block: var(--space-xl);
}

.redg-quote__statement {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
  font-style: italic;
  line-height: var(--leading-snug);
  letter-spacing: 0.01em;
  color: var(--color-bone-50);
  text-shadow: 0 4px 34px rgba(6, 15, 27, 0.7);
}

.redg-quote__body {
  max-width: 48ch;
  margin: var(--space-md) auto 0;
  color: var(--color-on-dark-soft);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.redg-quote__tagline {
  margin-top: var(--space-lg);
  color: var(--color-brass-300);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Puntos de quiebre
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .redg-quote__statement { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
}

@media (max-width: 640px) {
  .regions { grid-template-columns: minmax(0, 1fr); }
}