.oscurecer {
  /* Valor menor a 100% oscurece, 0% es negro total */
  filter: brightness(100%); 
  /* Opcional: transición suave al pasar el ratón */
  /* transition: filter 0.3s ease; */
}

.oscurecer:hover {
  filter: brightness(95%); /* Brillo original al pasar el ratón */
  transform: scale(1.05); /* Opcional: hace un pequeño zoom */
}


.imagen-bw {
  filter: grayscale(0%); /* Inicialmente en blanco y negro */
  transition: filter 0.5s ease;
}

.imagen-bw:hover {
  filter: grayscale(100%); /* Al pasar el mouse, recupera el color */
}


.imagen-tinte {
  transition: filter 0.5s ease;
}

.imagen-tinte:hover {
  /* Aproximación a un tinte azul */
   /*  filter: sepia(1) hue-rotate(190deg) saturate(3);*/
   /* filter: hue-rotate(190deg) saturate(3);*/
   /* filter: sepia(10%) hue-rotate(50deg);*/
    filter: sepia(80%) brightness(90%);
   
}

.img-sepia-shadow {
    /* Transición suave para el efecto */
    transition: filter 0.3s ease, transform 0.3s ease;
  }

  .img-sepia-shadow:hover {
  	
  	filter: brightness(95%); /* Brillo original al pasar el ratón */
    /* Aplica filtro sepia y una sombra sepia/marrón al mismo tiempo */
    filter: sepia(15%) drop-shadow(2px 2px 4px #704214);*/
    
    transform: scale(1.00); /* Opcional: hace un pequeño zoom */
  }
  
  
  .contenedor {
  width: 300px;
  height: 200px;
  overflow: hidden; /* Recorta el exceso */
}

.contenedor img {
  width: 100%;
  transition: transform 0.5s; /* Transición suave */
  transform-origin: 100% 100%; /* Aquí eliges qué "parte" ampliar */
}

.contenedor:hover img {

  transform: scale(2); /* Zoom al doble */
}

.zoom-especifico {
  width: 300px;
  aspect-ratio: 1;
  object-fit: cover;
  /* Muestra solo una región específica (ej. el centro) */
  object-view-box: inset(25% 25% 25% 25%); 
}

.contenedor-lupa {
  width: 300px; /* Tamaño del visor */
  height: 300px;
  overflow: hidden; /* Oculta lo que sale de la caja */
  border: 2px solid #ccc;
}

.imagen-zoom {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease; /* Suaviza el zoom */
  cursor: zoom-in;
}

.imagen-zoom:hover {
  transform: scale(1.5); /* Amplía la imagen al 150% */
}