.elementor-615 .elementor-element.elementor-element-47b8b61 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-615 .elementor-element.elementor-element-47b8b61:not(.elementor-motion-effects-element-type-background), .elementor-615 .elementor-element.elementor-element-47b8b61 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-615 .elementor-element.elementor-element-47b8b61{overflow:hidden;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-615 .elementor-element.elementor-element-47b8b61 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-615 .elementor-element.elementor-element-237ddd7.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-615 .elementor-element.elementor-element-237ddd7.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-615 .elementor-element.elementor-element-237ddd7 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-615 .elementor-element.elementor-element-bd43b0d{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-bc-flex-widget .elementor-615 .elementor-element.elementor-element-e17b379.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-615 .elementor-element.elementor-element-e17b379.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-615 .elementor-element.elementor-element-e17b379 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 2px 0px 0px;}.elementor-widget-heading .elementor-heading-title{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-615 .elementor-element.elementor-element-72df5eb{text-align:right;}.elementor-615 .elementor-element.elementor-element-72df5eb .elementor-heading-title{color:#FFFFFF;font-family:"Roboto", Sans-serif;font-size:20px;font-weight:600;text-shadow:0px 0px 0px rgba(0,0,0,0.3);}.elementor-615 .elementor-element.elementor-element-808aff8 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-615 .elementor-element.elementor-element-3825441{text-align:left;}.elementor-615 .elementor-element.elementor-element-3825441 img{width:4.5rem;}.elementor-615 .elementor-element.elementor-element-7e4c5d9{margin-top:-95px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-615 .elementor-element.elementor-element-61e9191 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-615 .elementor-element.elementor-element-08d7552 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-615 .elementor-element.elementor-element-5e98e0d{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-615 .elementor-element.elementor-element-cfd5cac > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-615 .elementor-element.elementor-element-1cb088e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-615 .elementor-element.elementor-element-52d0b22{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-615 .elementor-element.elementor-element-3400d58 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-615 .elementor-element.elementor-element-e17b379{width:55%;}.elementor-615 .elementor-element.elementor-element-808aff8{width:45%;}}@media(max-width:1024px){.elementor-615 .elementor-element.elementor-element-47b8b61{padding:20px 0px 0px 0px;}.elementor-615 .elementor-element.elementor-element-e17b379 > .elementor-element-populated{padding:0px 8px 0px 0px;}.elementor-615 .elementor-element.elementor-element-72df5eb .elementor-heading-title{font-size:17px;}.elementor-615 .elementor-element.elementor-element-3825441 img{width:5.5rem;}.elementor-615 .elementor-element.elementor-element-7e4c5d9{margin-top:-95px;margin-bottom:0px;padding:0px 0px 0px 0px;}}@media(max-width:767px){.elementor-615 .elementor-element.elementor-element-47b8b61{margin-top:0px;margin-bottom:0px;padding:40px 0px 0px 0px;}.elementor-615 .elementor-element.elementor-element-237ddd7{width:100%;}.elementor-615 .elementor-element.elementor-element-e17b379{width:60%;}.elementor-615 .elementor-element.elementor-element-72df5eb .elementor-heading-title{font-size:1.1rem;}.elementor-615 .elementor-element.elementor-element-808aff8{width:40%;}.elementor-615 .elementor-element.elementor-element-3825441 img{width:5rem;}.elementor-615 .elementor-element.elementor-element-7e4c5d9{margin-top:-95px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-615 .elementor-element.elementor-element-1cb088e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}}@media(max-width:1024px) and (min-width:768px){.elementor-615 .elementor-element.elementor-element-237ddd7{width:100%;}}/* Start custom CSS for html, class: .elementor-element-08d7552 *//* Estilos específicos para el reproductor */
.custom-player-container {
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;  /* Centrar los elementos verticalmente */
    justify-content: center;  /* Centrar los elementos horizontalmente */
    padding: 5px;
    background-color: transparent;
}

.custom-player {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2); /* Fondo con transparencia */
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    cursor: pointer;
    border: 2.5px solid rgba(255, 255, 255, 0.7); /* Borde sutil */
    font-size: 29px;
    padding-left: 0px;
    padding-top: 11px;
    margin-right: 10px;  /* Espacio entre el botón y el control de volumen */
    transition: all 0.3s ease;
}

.custom-player:hover {
    opacity: 0.9;
}

/* Nuevo estilo para el control de volumen */
.volume-control {
    margin-top: 0;  /* Elimina el margen superior */
    width: 100%;
    max-width: 180px;  /* Aumenta el tamaño máximo */
    background-color: rgba(255, 255, 255, 0.1);  /* Fondo más oscuro para la barra */
    border-radius: 10px;  /* Bordes redondeados más marcados */
    cursor: pointer;
    height: 8px;  /* Altura de la barra */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);  /* Sombra sutil para la barra */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.volume-control:hover {
    background-color: rgba(255, 255, 255, 0.2);  /* Fondo más claro al pasar el ratón */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);  /* Sombra más pronunciada */
}

.volume-control::-webkit-slider-runnable-track {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    height: 8px;
}

/* Nuevo estilo para el thumb (botón) */
.volume-control::-webkit-slider-thumb {
    background-color: #4CAF50;  /* Verde brillante */
    border-radius: 50%;
    border: none;
    height: 25px;  /* Tamaño más grande */
    width: 25px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Efecto al pasar el ratón sobre el thumb */
.volume-control::-webkit-slider-thumb:hover {
    background-color: #45a049;  /* Verde más oscuro */
    transform: scale(1.1);  /* Efecto de aumentar el tamaño */
}

.volume-control::-moz-range-track {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    height: 8px;
}

.volume-control::-moz-range-thumb {
    background-color: #4CAF50 !important;  /* Verde brillante */
    border-radius: 50%;
    border: none;
    height: 25px;  /* Tamaño más grande */
    width: 25px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.volume-control::-moz-range-thumb:hover {
    background-color: #45a049;  /* Verde más oscuro */
    transform: scale(1.1);  /* Efecto de aumentar el tamaño */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1cb088e *//* Estilo específico para el reproductor */
.player5 .music-player-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto; /* Centrar verticalmente en toda la ventana */
  background-color: transparent; /* Fondo opcional */
}

.player5 .player-container {
  text-align: center;
  padding: 20px;
  border: 0px solid #ccc;
  border-radius: 10px;
  background-color: transparent;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.0);
}

.player5 .song-info {
  margin-bottom: 0px;
}

 .player5 .title {
      font-family: roboto;
      text-transform: uppercase;
      font-size: 22px;
      font-weight: 900;
      color: #f1f1f1f1;
      padding-bottom: 0px;
      margin-bottom: -2px;
    }

 .player5 .artist {
      font-family: roboto;
      font-size: 13px;
      font-weight: 600;
      color: #fff9;
    }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-aa8f468 *//* Estilos globales para asegurar que la portada cubra toda la web */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  position: relative;
}

/* Fondo dinámico con desenfoque, fondo negro semi-transparente y zoom */
.dynamic-background {
  position: fixed;  /* Se mantiene fijo detrás del contenido */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;  /* La imagen se ajusta al tamaño de la pantalla */
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(20px);  /* Desenfoque inicial */
  z-index: -1;  /* Coloca el fondo detrás de todo el contenido */
  transition: background-image 1.5s ease-in-out, filter 1s ease-in-out; /* Transición suave */
  animation: zoomInOut 10s infinite ease-in-out; /* Animación de zoom */
}

/* Animación de zoom in y zoom out */
@keyframes zoomInOut {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1); /* Efecto de zoom */
  }
  100% {
    transform: scale(1);
  }
}

/* Fondo oscuro semi-transparente */
.background-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /* Oscurecer el fondo con transparencia */
  z-index: -1;  /* Coloca el overlay detrás del contenido */
}

/* Estilo del contenido de la página */
#content {
  position: relative;
  z-index: 1;
  color: white;
  font-family: Arial, sans-serif;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  padding: 20px;
}

/* Fondo oscuro para mejorar la legibilidad del contenido */
#content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Oscurecer el fondo */
  z-index: -1;
}

/* Asegúrate de que el footer esté visible */
footer {
  position: relative;
  z-index: 2; /* Asegura que el footer esté por encima del fondo */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-304c137 *//* Estilos globales para asegurar que la portada cubra toda la web */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  position: relative;
}

/* Fondo dinámico con desenfoque, fondo negro semi-transparente y zoom */
.dynamic-background {
  position: fixed;  /* Se mantiene fijo detrás del contenido */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;  /* La imagen se ajusta al tamaño de la pantalla */
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(20px);  /* Desenfoque inicial */
  z-index: -1;  /* Coloca el fondo detrás de todo el contenido */
  transition: background-image 1.5s ease-in-out, filter 1s ease-in-out; /* Transición suave */
  animation: zoomInOut 10s infinite ease-in-out; /* Animación de zoom */
}

/* Animación de zoom in y zoom out */
@keyframes zoomInOut {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1); /* Efecto de zoom */
  }
  100% {
    transform: scale(1);
  }
}

/* Fondo oscuro semi-transparente */
.background-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /* Oscurecer el fondo con transparencia */
  z-index: -1;  /* Coloca el overlay detrás del contenido */
}

/* Estilo del contenido de la página */
#content {
  position: relative;
  z-index: 1;
  color: white;
  font-family: Arial, sans-serif;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  padding: 20px;
}

/* Fondo oscuro para mejorar la legibilidad del contenido */
#content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Oscurecer el fondo */
  z-index: -1;
}

/* Asegúrate de que el footer esté visible */
footer {
  position: relative;
  z-index: 2; /* Asegura que el footer esté por encima del fondo */
}/* End custom CSS */