@media (min-width: 1080px) {
    .btn-wrapper {
        position: relative;
        width: 280px;
        height: 280px;
        overflow: hidden;
    }

    /* DIV que rota - solo maneja la rotación */
    .aro-spin {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        animation: spinAro 6s linear infinite;
        transform-origin: center center;
    }

    /* IMG y SVG dentro del div que rota */
    .aro-spin img,
    .aro-spin svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    @keyframes spinAro {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* BOCINA centrada, NO rota */
    .bocina {
        position: absolute;
        width: 65%;
        height: 65%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        object-fit: contain;
        z-index: 2;

        animation: speakerPulse 0.8s ease-in-out infinite;
        transform-origin: center center;
    }

    @keyframes speakerPulse {
        0% {
            transform: translate(-50%, -50%) scale(1);
            filter: brightness(1);
        }

        10% {
            transform: translate(-50%, -50%) scale(1.06);
            filter: brightness(1.2);
        }

        20% {
            transform: translate(-50%, -50%) scale(0.96);
            filter: brightness(0.9);
        }

        35% {
            transform: translate(-50%, -50%) scale(1.04);
            filter: brightness(1.1);
        }

        50% {
            transform: translate(-50%, -50%) scale(0.98);
            filter: brightness(0.95);
        }

        100% {
            transform: translate(-50%, -50%) scale(1);
            filter: brightness(1);
        }
    }
}

@media (min-width: 600px) and (max-width:1079px) {
    .btn-wrapper {
        position: relative;
        width: 150px;
        height: 150px;
        margin: 80px auto;
        overflow: hidden;
    }


    /* DIV que rota - solo maneja la rotación */
    .aro-spin {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        animation: spinAro 6s linear infinite;
        transform-origin: center center;
    }

    /* IMG y SVG dentro del div que rota */
    .aro-spin img,
    .aro-spin svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    @keyframes spinAro {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* BOCINA centrada, NO rota */
    .bocina {
        position: absolute;
        width: 60%;
        height: 60%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        object-fit: contain;
        z-index: 2;

        animation: speakerPulse 0.8s ease-in-out infinite;
        transform-origin: center center;
    }

    @keyframes speakerPulse {
        0% {
            transform: translate(-50%, -50%) scale(1);
            filter: brightness(1);
        }

        10% {
            transform: translate(-50%, -50%) scale(1.06);
            filter: brightness(1.2);
        }

        20% {
            transform: translate(-50%, -50%) scale(0.96);
            filter: brightness(0.9);
        }

        35% {
            transform: translate(-50%, -50%) scale(1.04);
            filter: brightness(1.1);
        }

        50% {
            transform: translate(-50%, -50%) scale(0.98);
            filter: brightness(0.95);
        }

        100% {
            transform: translate(-50%, -50%) scale(1);
            filter: brightness(1);
        }
    }
}

@media (max-width: 599px) {
    .btn-wrapper {
        position: relative;
        width: 150px;
        height: 150px;
        margin: 40px auto;
        overflow: hidden;
    }


    /* DIV que rota - solo maneja la rotación */
    .aro-spin {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        animation: spinAro 6s linear infinite;
        transform-origin: center center;
    }

    /* IMG y SVG dentro del div que rota */
    .aro-spin img,
    .aro-spin svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    @keyframes spinAro {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* BOCINA centrada, NO rota */
    .bocina {
        position: absolute;
        width: 60%;
        height: 60%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        object-fit: contain;
        z-index: 2;

        animation: speakerPulse 0.8s ease-in-out infinite;
        transform-origin: center center;
    }

    @keyframes speakerPulse {
        0% {
            transform: translate(-50%, -50%) scale(1);
            filter: brightness(1);
        }

        10% {
            transform: translate(-50%, -50%) scale(1.06);
            filter: brightness(1.2);
        }

        20% {
            transform: translate(-50%, -50%) scale(0.96);
            filter: brightness(0.9);
        }

        35% {
            transform: translate(-50%, -50%) scale(1.04);
            filter: brightness(1.1);
        }

        50% {
            transform: translate(-50%, -50%) scale(0.98);
            filter: brightness(0.95);
        }

        100% {
            transform: translate(-50%, -50%) scale(1);
            filter: brightness(1);
        }
    }
}

/* Ajustes para cuando el dispositivo esté en modo horizontal */
@media (min-width: 600px) and (max-width:1079px) and (orientation: landscape) {
    .btn-wrapper {
        position: relative;
        width: 150px;
        height: 150px;
        margin: 20px auto;
        overflow: hidden;
    }


    /* DIV que rota - solo maneja la rotación */
    .aro-spin {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        animation: spinAro 6s linear infinite;
        transform-origin: center center;
    }

    /* IMG y SVG dentro del div que rota */
    .aro-spin img,
    .aro-spin svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    @keyframes spinAro {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* BOCINA centrada, NO rota */
    .bocina {
        position: absolute;
        width: 60%;
        height: 60%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        object-fit: contain;
        z-index: 2;

        animation: speakerPulse 0.8s ease-in-out infinite;
        transform-origin: center center;
    }

    @keyframes speakerPulse {
        0% {
            transform: translate(-50%, -50%) scale(1);
            filter: brightness(1);
        }

        10% {
            transform: translate(-50%, -50%) scale(1.06);
            filter: brightness(1.2);
        }

        20% {
            transform: translate(-50%, -50%) scale(0.96);
            filter: brightness(0.9);
        }

        35% {
            transform: translate(-50%, -50%) scale(1.04);
            filter: brightness(1.1);
        }

        50% {
            transform: translate(-50%, -50%) scale(0.98);
            filter: brightness(0.95);
        }

        100% {
            transform: translate(-50%, -50%) scale(1);
            filter: brightness(1);
        }
    }
}