/* ============================================
   Grid Background Canvas & Mouse Spotlight
   XPEPROJECTS – css/grid-background.css
   ============================================ */

/* === 1. Body = grid canvas (fixed, no scroll) ===
   El grid vive en el fondo del documento.
   Todos los elementos con fondo sólido lo tapan;
   los que sean semitransparentes lo dejan ver. */
body {
    background-color: #ffffff;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.052) 1px, transparent 1px),
        linear-gradient(to right, rgba(0, 0, 0, 0.052) 1px, transparent 1px);
    background-size: 44px 44px;
    background-attachment: fixed;
    /* el patrón queda fijo mientras el usuario scrollea */
}

/* === 2. Sections: semitransparentes para dejar ver el grid del body ===
   Solo se apunta a <section>, NO a <div> (tarjetas siguen opacas).
   !important necesario para superar la especificidad de Tailwind. */
main section.bg-white,
main section:not([class*="bg-"]):not(:first-of-type) {
    background-color: rgba(255, 255, 255, 0.47) !important;
}

/* Permitir que la primera sección (Hero) de index.html y nosotros.html sea transparente en móvil para ver su imagen de fondo */
main section:first-of-type {
    background-color: transparent !important;
}

main section.bg-brand-light:not(:first-of-type) {
    background-color: rgba(197, 199, 202, 0.435) !important;
}

/* Secciones oscuras (hero de páginas internas): totalmente opacas */
main section.bg-brand-dark {
    background-color: #111111 !important;
    background-image: none;
}

/* El primer section del index.html no tiene clase bg explícita en el <section>
   pero sus sub-divs tienen bg-white — queda transparente y el grid se ve
   en el fondo del canvas detrás de los bloques de contenido */

/* === 3. Header: totalmente opaco, siempre encima del todo ===
   Tailwind z-50 (z-index:50) ya lo pone sobre el spotlight (#grid-spotlight z-index:2).
   Forzamos fondo sólido para que no se vea el grid a través de la barra de nav. */
header {
    background-color: rgba(255, 255, 255, 0.97) !important;
    /* backdrop-blur ya viene de Tailwind; no lo pisamos */
}

/* === 4. Footer: completamente opaco, sobre el spotlight ===
   Las divisiones de secciones del footer no deben verse afectadas. */
footer {
    background-color: #ffffff !important;
    position: relative;
    z-index: 5;
    /* encima del spotlight (z-index: 2) */
    isolation: isolate;
}

/* === 5. Canvas div: ya no hace falta (el body ES el canvas ahora) === */
#grid-canvas {
    display: none;
}

/* === 6. Mouse spotlight ===
   z-index: 2 → encima del contenido estático de sections,
   pero DEBAJO del header (z-50 = 50) y del footer (z-index: 5).
   mix-blend-mode: multiply → sobre fondos blancos crea un gris suave;
   sobre imágenes oscuras o botones de color el efecto es imperceptible (≈5%). */
#grid-spotlight {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(800px circle at -800px -800px,
            rgba(80, 80, 80, 0.055),
            transparent 55%);
    mix-blend-mode: multiply;
}