/* ==========================================================================
   css/mutador/14-addons.css — parte 14/15 de lo que era styles.css
   --------------------------------------------------------------------------
   Addons: imagen responsive + preloader de /work, vídeo mut, imagen aleatoria, mut-bg-image.
   Se carga desde inc/paginas.php (_base) EN ESTE ORDEN: el número del
   archivo es su posición en la cascada. Un bloque nuevo → su propio archivo
   con el número que le toque, y añadirlo a la lista de _base.
   ========================================================================== */

/* ==========================================================================
   08 addon image responsive
   ==========================================================================
   El preloader cubre la página entera mientras el JS calcula el layout.
   Una vez Isotope termina, se añade la clase .preloader-hidden al body
   y la transición CSS lo desvanece y lo saca del flujo con pointer-events:none.
   ========================================================================== */
.mut-bg-image{width: 100%; height: 100%; min-height: 50vh; /* Asegura que la imagen no se repita */
    background-repeat: no-repeat;

    /* Centra la imagen dentro del div */
    background-position: center center;

    /* Clave: ajusta la imagen para cubrir todo el div */
    background-size: cover;

    /* Establece la altura del contenedor */
    /* O '100%' si el padre tiene altura definida */
 }

.mut-bg-image-auto {width: 100%; height: 20%; min-height: 20vh; /
    background-repeat: no-repeat;
 background-position: center center;
background-size: cover;

 }
@media  (max-width: 768px){
  
  .mut-bg-image-auto-2 {width: 50%; height: 20%; min-height: 20vh; /
    background-repeat: no-repeat;
 background-position: center center;
background-size: cover;

 }
  
}

/* ==========================================================================
09 addon video mut
   ========================================================================== */
div.mut-video-player { width: 100%; overflow: hidden;   border-radius: 15px; }
div.mut-video-player video{ width: 100%; overflow: hidden;    border-radius: 15px; }

div.mut-video-player-square {padding: 0px; margin: 0px;width: 100%; overflow: hidden;  }
div.mut-video-player-square video{ width: 100%; overflow: hidden;    }

/* addon image randoom. Esto hace que cualquier etiqueta <img> dentro de tu addon sea responsiva */
.sppb-addon-wrapper.addon-root-mut-imagenrandom{overflow: hidden}
.mut-simple img, 
.mut-galeria-item img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block; /* Evita pequeños márgenes extraños en la parte inferior */
    border-radius: 15px; /* Opcional: si quieres bordes redondeados */
}