/*contenido seven*/
.fondoLuz{
		background: radial-gradient(ellipse farthest-corner at var(--x) 0%, #ff0000 0%, #470101 12%, #171719 20%, #171719 55%, #171719 82.5%, #171719 100%);
    	animation: 10s infinite alternate colorChange;
		overflow-x: hidden;
	}
	.fondoColorx::before{
		content: "";
		width: 300px;
		height: 300px;
		z-index: 0;
		position: absolute;
		bottom: 350px;
		left: calc(50% - 980px);
		background-color: #ff0000;
		border-radius: 200px;
		filter: blur(170px);
		mix-blend-mode: normal;
		animation: parpadeo 5s infinite ease-in-out;
	}
	.fondoColor2x::after{
		content: "";
		width: 300px;
		height: 300px;
		z-index: 0;
		position: absolute;
		top: 35%;
		right: calc(50% - 1140px);
		background-color: #ff0000;
		border-radius: 200px;
		filter: blur(120px);
		mix-blend-mode: normal;
		animation: parpadeo 7s infinite ease-in-out;
	}
	@property --x {
                syntax: '';
                inherits: false;
                initial-value: 0%
            }
	@keyframes colorChange {
                0% {
                    --x: 0%
                }

                50% {
                    --x: 50%
                }

                100% {
                    --x: 100%
                }
            }
	@keyframes parpadeo {
		0%, 100% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}
	}
	
	
	
	.difl_blogcarousel_0 .swiper-pagination .swiper-pagination-bullet-active{
		width: 100px !important;
	}
	div#flat-preloader-overlay{
		background: #040404;
	}
	.df-hover-trigger:hover .df-blogcarousel-bg-on-hover>div{
			transform:scale(1.1);
		}
	.df-blogcarousel-bg-on-hover>div{
	  transition: all 300ms ease !important;
	}
	.mod1 .df-post-inner-wrap{
      display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: 350px !important;
    padding: 0 4%;
}
	.difl_imagecarousel_0 .difl_imagecarouselitem, .publi_390{
		height: 390px;
	}
	.difl_imagecarousel_0 .difl_imagecarouselitem img, .publi_390 img{
		object-fit: cover;
		height: 390px !important;
		width: 400px;
	}
	@media only screen and (max-width: 767px){
		.mod1 .df-post-inner-wrap{
		height: 250px !important;
	}
		
	}
	@media (max-width: 980px){
		.et_mobile_nav_menu{
			display: none !important;
		}
		.et_pb_menu .et_pb_menu__menu{
			display: flex !important;
		}
	}
	.et_pb_menu .et-menu{
		margin:auto;
	}

/*REPRODUCTOR + VOL*/

.audio.flex {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre el icono y la barra */
  }
  .audio.flex svg {
    width: 24px;
    height: 24px;
  }
  .volume-bar {
    width: 150px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, red 50%, #444 50%); /* Degradado inicial */
    height: 8px;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
}

.volume-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: red;
    cursor: pointer;
}

.volume-bar::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: red;
    cursor: pointer;
}
  .text-primary {
    color: red;
    background: transparent !important;
    border: 0;
  }
  #autoplayToggle, #autoplayIcon{
    height: 28px;
    width: 28px;
    position:relative;
  }
  #autoplayToggle::before{
    content:"Autoplay";
    font-size:10px;
    display:block;
    position:absolute;
    height:44px;
    width:44px;
    top:-20px;
    left:-10px;
  }
  @media (max-width: 981px){
    .volume-bar{
      display:none;
    }
  }
  /*FIN REPRODUCTOR + VOL*/

  /*BOTON REPRO*/
  .repro{
    display:flex;
    align-items:center;
    gap:20px;
  }
  .dial h3{
    color:#fff;
    padding-bottom:5px;
  }
  .dial p{
    font-size: .75rem;
    line-height: 1rem;
    color:#999;
  }
  /*boton radio*/
button#boton{
 position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: red;
  border-radius: 50px;
  border: 0;
  animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite
}
  button#boton svg {
  width: 24px;
  height: 24px;
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}
  @media only screen and (max-width: 767px){
    .dial h3{
    font-size:18px;
  }
  }
/*fin boton radio*/