/* ================================
   LOADER DE PÁGINA (carga inicial + cambio de página)
   Compartido por index.html, contacto.html y agenda.html.
   js/loader.js lo oculta al terminar de cargar y lo vuelve a mostrar
   al hacer clic en un link a otra página del sitio.
   ================================ */

/* Mientras carga, el fondo de <html> ya es del color del loader: evita un
   destello blanco antes de que el overlay se pinte (agenda.html bloquea
   el parseo con los <script> del CDN en el <head>). */
html.is-loading {
    background-color: #12082A;
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #12082A;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

/* Red de seguridad sin JS: si loader.js no carga (o hay JS desactivado) el
   overlay se quita solo a los 8s en vez de tapar la página para siempre.
   Solo aplica mientras <html> tiene .is-loading; loader.js la quita al
   ocultar, así no interfiere cuando el overlay se vuelve a mostrar al
   navegar (un fill-mode forwards ganaría sobre cualquier clase). */
html.is-loading .page-loader {
    animation: page-loader-failsafe 0.01s linear 8s forwards;
}

@keyframes page-loader-failsafe {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

.page-loader__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- Spinner (ondas) — colores de Monterrey: rosa/púrpura de marca --- */
.loader {
    --color-1: #FF6EC7;
    --color-2: rgba(255, 110, 199, 1);
    --color-3: rgba(161, 75, 255, 0.25);
    --color-4: rgba(230, 25, 176, 0.6);
    --color-5: rgba(161, 75, 255, 0.4);
    --color-6: rgba(230, 25, 176, 0);
    --size: 1px;

    width: calc(10 * var(--size));
    height: calc(10 * var(--size));
    position: relative;
    border-radius: 50%;
    background: var(--color-1);
    animation: wave 1s ease-in infinite;
}

@keyframes wave {
    0% {
        box-shadow:
            0 0 0 0 var(--color-2),
            0 0 0 calc(20 * var(--size)) var(--color-3),
            0 0 0 calc(40 * var(--size)) var(--color-4),
            0 0 0 calc(60 * var(--size)) var(--color-5),
            0 0 0 calc(80 * var(--size)) var(--color-3);
    }

    100% {
        box-shadow:
            0 0 0 calc(80 * var(--size)) var(--color-6),
            0 0 0 calc(60 * var(--size)) var(--color-3),
            0 0 0 calc(40 * var(--size)) var(--color-5),
            0 0 0 calc(20 * var(--size)) var(--color-4),
            0 0 0 0 var(--color-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-loader,
    .page-loader.is-hidden {
        transition: none;
    }
}
