/* ==========================================================================
   Section — sistema de bandas full-width con `container` interno.
   .aq-section define el espaciado vertical estándar; sus modificadores
   de tema (--light, --dark, --beige) redefinen los tokens semánticos de
   color (--aq-text, --aq-heading, --bs-headings-color, --aq-gray-border)
   dentro de su propio alcance.

   Por eso Valores y Compromisos pueden ser el MISMO componente en ambas
   páginas: la card / el bloque de texto siempre lee var(--aq-text),
   var(--aq-heading) y var(--aq-gray-border); es la banda que lo envuelve
   la que decide qué valor toma cada token. Si un componente necesita CSS
   nuevo para verse bien dentro de --light, quedó mal escrito: debe leer
   los tokens, no un color fijo.
   ========================================================================== */

.aq-section {
	padding-block: var(--aq-section-padding-y);
	background-color: var(--aq-white);
	color: var(--aq-text);
}

/* Explícita aunque coincida con la base: deja la intención clara en el
   HTML y protege si el default de .aq-section cambia más adelante. */
.aq-section--light {
	background-color: var(--aq-white);
	color: var(--aq-text);
}

.aq-section--light-2 {
	background-color: var(--aq-white);
	color: var(--aq-text);
   border-bottom: 1px solid var(--aq-gold-2);
}

.aq-section--dark {
	background-color: var(--aq-black-deep);
	color: var(--aq-white);

	--aq-text: var(--aq-white);
	--aq-heading: var(--aq-white);
	--bs-heading-color: var(--aq-white);
	--aq-gray-border: var(--aq-card-border-dark);
}

.aq-section--beige {
	background-color: var(--aq-beige);
	color: var(--aq-text);
}