/* =========================================================
   CAPA 3 · LAYOUT
   Estructura que comparten todas las secciones: contenedor
   centrado, bandas de color y encabezado de sección.
   ========================================================= */

/* Contenedor centrado con margen lateral (respeta el notch del celular) */
.wrap {
  max-width: var(--wrap); margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Banda = sección a lo ancho con espacio vertical */
.band { padding-block: clamp(64px, 9vw, 120px); }
.band--night { background: var(--night); color: var(--paper); }
.band--paper2 { background: var(--paper-2); }

/* Encabezado de sección: etiqueta + título + subtítulo/párrafo */
.head { display: grid; gap: 16px; max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.head h2 { font-size: var(--step-3); font-weight: 800; font-stretch: 108%; letter-spacing: -.02em; }
.head .sub { font-family: var(--f-display); font-weight: 600; font-stretch: 105%; font-size: var(--step-1); color: var(--orange-deep); }
.head p { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.5; }
.band--night .head .sub { color: var(--orange); }
.band--night .head p { color: var(--on-dark); }