/* =============================================================================
   layout.css — Retícula, bandas y ritmo vertical.
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.seccion {
  position: relative;
  padding-block: var(--pad-seccion);
}
.seccion--hueso  { background: var(--hueso); }
.seccion--verde  { background: var(--verde-hondo); color: var(--blanco); }

/* Encabezado de sección, centrado: antetítulo pequeño → título grande →
   pie de dato pequeño.                                                      */
.cabeza {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.cabeza > * + * { margin-top: var(--s-4); }
.cabeza .lead { margin-inline: auto; }

/* Rejillas ----------------------------------------------------------------- */
.rejilla {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 760px)  { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }

/* Dos columnas asimétricas (texto + imagen) -------------------------------- */
.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .duo            { grid-template-columns: 1fr 1fr; }
  .duo--texto-der { grid-template-columns: 1.05fr 0.95fr; }
}

/* Banda de fotografía a sangre completa ------------------------------------ */
.banda {
  position: relative;
  isolation: isolate;
  color: var(--blanco);
  padding-block: clamp(4.5rem, 10vw, 9rem);
  overflow: hidden;
}
.banda__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* El velo garantiza el contraste PASE LO QUE PASE en la foto. La imagen ya
   viene virada a verde y con la clave baja (su píxel más claro es #999999),
   así que el velo puede ser suave y la fotografía se sigue viendo.
   Peor caso medido, con el velo al 62 %: fondo #3D5448 → blanco 8,20:1 y
   verde claro 5,55:1. Sobra margen sobre el mínimo de 4,5.                   */
.banda__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(4,42,22,0.74) 0%, rgba(4,42,22,0.66) 48%, rgba(4,42,22,0.62) 100%);
}