body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8fafc;
        font-family: Arial, sans-serif;
        padding: 1rem;
        box-sizing: border-box;
    }

    .loader-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 900px;
        text-align: center;
    }

    .loader-logo {
        width: 650px;
        max-width: 90%;
        height: auto;
        margin-bottom: 2rem;
        object-fit: contain;
    }

    /* Loader - colores basados en el logo */
    .loader {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 6rem;
        aspect-ratio: 1 / 1;
        margin-top: 1rem;
        margin-bottom: 3rem;
    }

    .loader:before,
    .loader:after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        animation: pulsOut 1.8s ease-in-out infinite;
        filter: drop-shadow(0 0 1rem rgba(37, 99, 235, 0.45));
    }

    .loader:before {
        box-shadow: inset 0 0 0 1rem #2563eb; /* Azul logo */
        animation-name: pulsIn;
    }

    .loader:after {
        inset: 1rem;
        box-shadow: 0 0 0 0 #f97316; /* Naranja logo */
    }

    @keyframes pulsIn {
        0% {
            box-shadow: inset 0 0 0 1rem #2563eb;
            opacity: 1;
        }

        50%, 100% {
            box-shadow: inset 0 0 0 0 #2563eb;
            opacity: 0;
        }
    }

    @keyframes pulsOut {
        0%, 50% {
            box-shadow: 0 0 0 0 #f97316;
            opacity: 0;
        }

        100% {
            box-shadow: 0 0 0 1rem #f97316;
            opacity: 1;
        }
    }

    /* =========================
       RESPONSIVO
    ========================= */

    /* Teléfonos pequeños */
    @media (max-width: 480px) {
        .loader-logo {
            width: 280px;
            margin-bottom: 1.5rem;
        }

        .loader {
            max-width: 4rem;
            margin-bottom: 2rem;
        }
    }

    /* Teléfonos grandes */
    @media (max-width: 576px) {
        .loader-logo {
            width: 350px;
        }

        .loader {
            max-width: 4.5rem;
        }
    }

    /* Tablets */
    @media (max-width: 768px) {
        .loader-logo {
            width: 450px;
        }

        .loader {
            max-width: 5rem;
        }
    }