/*
 * Panel de Apariencia — NÚCLEO, compartido por todas las plantillas.
 *
 * La macro _appearance (motor) escribe en el `style` de la <section> el fondo
 * elegido, `--section-text` y `--section-overlay`. Lo que pinta esas dos
 * variables tiene dos mitades:
 *
 *   - El degradado y la imagen de fondo son iguales en cualquier plantilla y
 *     viven aquí, para que una plantilla nueva los tenga sin hacer nada.
 *   - El color de texto (`--section-text`) lo consume la hoja de cada
 *     plantilla en sus propios selectores, porque solo ella sabe qué elementos
 *     son texto. Es parte del contrato: una plantilla que no lo consuma tiene
 *     un panel de Apariencia que no cambia el texto.
 *
 * Se carga SIEMPRE, después de tokens.css y antes de la hoja de la plantilla.
 */

/* Degradado decorativo del panel de apariencia. El selector de atributo
   evita tener que añadir una clase a las 19 maquetas: la regla solo
   entra en juego cuando la sección declara la variable, y una sección
   sin degradado no llega ni a crear el pseudo-elemento.

   `> *` sube el contenido por encima del velo. Sin eso el ::after
   taparía el texto, porque se pinta después en el orden del documento. */
section[style*="--section-overlay"] {
    position: relative;
}

section[style*="--section-overlay"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--section-overlay);
    pointer-events: none;
    z-index: 0;
}

section[style*="--section-overlay"] > * {
    position: relative;
    z-index: 1;
}

/* La imagen de fondo del panel de apariencia se pinta a tamaño
   completo y sin repetir, que es lo que se espera de un fondo de
   sección. Las secciones con imagen propia (hero, process, why) traen
   su propio tratamiento y no pasan por aquí. */
section[style*="background-image"] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}