/* RESET CLAVE */
* {
  box-sizing: border-box;
}

/* GRID */
.grid {
  display: flex;
  flex-wrap: wrap; /* 🔥 evita que se rompa */
  gap: 20px;
  padding: 20px;
  width: 100%;
}

/* CONTENEDOR DE IMAGEN */
.img__container {
  flex: 1 1 calc(25% - 20px); /* 4 columnas */
  min-width: 250px; /* evita que se aplaste */
  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

/* IMAGEN */
.carousel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

/* TEXTO */
.img__container h3 {
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  color: white;
  font-size: clamp(14px, 2vw, 20px);
  z-index: 2;
}

/* EFECTO HOVER */
.img__container:hover .carousel__img {
  transform: scale(1.1);
}

/* OVERLAY PARA LEGIBILIDAD */
.img__container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  z-index: 1;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  .img__container {
    flex: 1 1 calc(50% - 20px); /* 2 columnas */
  }
}

@media (max-width: 500px) {
  .img__container {
    flex: 1 1 100%; /* 1 columna */
  }
}


#drf {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center 20%; /* 👈 baja la imagen */
}


#ab{
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  
}