/* Estilos del overlay */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Modificable desde Elementor */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.popup-content {
    background-color: #ffffff; /* Modificable desde Elementor */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    max-width: 600px; /* Permite ajustes dinámicos */
    max-height: 80%; /* Permite ajustes dinámicos */
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.popup-image {
    max-width: 100%; /* Se ajusta según Elementor */
    height: auto;
}

.popup-text {
    font-size: 16px; /* Modificable desde Elementor */
}

.popup-buttons {
    display: flex;
    flex-wrap: wrap;
}

.popup-buttons .popup-button {
    font-size: 14px; /* Modificable desde Elementor */
    cursor: pointer;
    border: none; /* Ajustable desde Elementor */
    padding: 8px 12px; /* Ajuste de padding para dar más espacio al texto */
    max-width: 100%; /* Permitir que el botón use el ancho completo si es necesario */
    white-space: normal; /* Permite el salto de línea si el texto es demasiado largo */
    text-align: center;
}

/* Botón de música con ecualizador */
.music-button {
    position: fixed;
    bottom: 25px;
    right: 15px;
    width: 50px; /* Tamaño inicial, modificable desde Elementor */
    height: 50px; /* Tamaño inicial, modificable desde Elementor */
    background: #4CAF50; /* Modificable desde Elementor */
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    cursor: pointer;
    z-index: 100;
    overflow: hidden;
}

.equalizer-bar {
    width: 8%; /* Ajustamos el ancho para 4 barras */
    margin: 0 2.5%; /* Reducimos el margen para acercar las barras */
    background-color: #FFF; /* Modificable desde Elementor */
    animation: equalizer-animation 0.5s infinite;
    animation-play-state: paused;
}

@keyframes equalizer-animation {
    0%, 100% {
        height: 20%;
    }
    50% {
        height: 60%;
    }
}

.bar1 { animation-delay: 0s; }
.bar2 { animation-delay: 0.15s; }
.bar3 { animation-delay: 0.3s; }
.bar4 { animation-delay: 0.45s; }
.bar5 { animation-delay: 0.6s; } /* Nueva barra */