@layer layout {
  .contenedor {
    width: 100%;
    max-width: var(--ancho-contenido);
    margin-inline: auto;
    padding-inline: var(--canal);
  }
  .contenedor--estrecho { max-width: var(--ancho-estrecho); }

  .seccion { padding-block: var(--seccion-y); }
  .seccion--sutil { background: var(--color-fondo-sutil); }
  .seccion--marca {
    /* Fix crítico UX/UI #6: el punto medio original usaba --riaej-azul-600
       ("el extremo claro"), donde el texto secundario en azul-100/200
       caía a 4.06:1-4.24:1 (bajo AA). Se sube el punto más claro del
       degradado a azul-700: el peor caso del degradado debe cumplir
       4.5:1, no solo el promedio visual. */
    background: linear-gradient(135deg, var(--riaej-azul-800) 0%, var(--riaej-azul-700) 55%, var(--riaej-azul-800) 100%);
    color: var(--color-texto-inverso);
  }
  .seccion--marca h2, .seccion--marca h3 { color: #fff; }

  .rejilla { display: grid; gap: var(--esp-6); }
  .rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  .rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .rejilla--asimetrica { grid-template-columns: 1fr; }
  @media (width >= 62rem) {
    .rejilla--asimetrica { grid-template-columns: 1.6fr 1fr; gap: var(--esp-10); }
  }

  .pila { display: flex; flex-direction: column; gap: var(--esp-4); }
  .fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4); }
  .fila--entre { justify-content: space-between; }

  .prosa { max-width: var(--ancho-texto); }
  .prosa > * + * { margin-block-start: var(--esp-4); }
  .prosa h2 { margin-block-start: var(--esp-10); }
  .prosa h3 { margin-block-start: var(--esp-8); }
}
/** RIAEJ — Componentes de interfaz */