/* Funcionales */

/*** Por el tipo de trabajo con content, los estilos no se apilan ***/
/*** Desenfoques de fondo ***/
.bgblur10::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;  
  background-image: inherit;
  background-size: cover;
  background-position: center;  
  filter: blur(10px); /* Ajusta el desenfoque según necesidad */
  z-index: -1;
}

/*** Oscurecer Fondo ***/
.bgdark50::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;  
  background-image: inherit;
  background-size: cover;
  background-position: center;  
  filter: brightness(50%);
  z-index: -1;
}

/*** Aclarar Fondo ***/
.bglight20::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;  
  background-image: inherit;
  background-size: cover;
  background-position: center;  
  filter: brightness(160%);
  z-index: -1;
}


/** Fondo difuminado y oscurecido fijo **/
.difumdarkfixed::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;  
  background-image: inherit;
  background-size: cover;
  background-position: center;  
  filter: blur(5px) brightness(50%); /* Ajusta valores según necesidad */
  z-index: -1;
}

/** Fondo difuminado y aclarado fijo **/
.difumlightfixed::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;  
  background-image: inherit;
  background-size: cover;
  background-position: center;  
  filter: blur(10px) brightness(150%); /* Ajusta valores según necesidad */
  z-index: -1;
}

/* Trabajo con fondos parametrizable */
/* Al montarse la imagen de fondo con JS no se estan aplicando las variables */
/** Clase base parametrizable **/
.difumlightvar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  /* Variables CSS para personalización */
  --blur-value: 10px;
  --brightness-value: 150%;
  filter: blur(var(--blur-value)) brightness(var(--brightness-value));
  z-index: -1;
  z-index: -1;
}

.difuminarlogro {
  filter: blur(15px) brightness(150%); /* Ajusta valores según necesidad */
}