/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} */

/* Contenedor del collage */
.container-collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Dos columnas iguales */
  gap: 10px; /* Espaciado entre las imágenes */
  padding: 10px; /* Margen interno */
}

/* Estilo para cada caja */
.box {
  position: relative;
  overflow: hidden;
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

/* Imágenes dentro de las cajas */
.box img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Asegura que las imágenes mantengan su proporción */
  transition: transform 0.3s ease-in-out; /* Efecto hover */
}


.box2 {
  position: relative;
  overflow: hidden;
  border-radius: 10px; /* Bordes redondeados para las imágenes */
}

/* Estilo para las imágenes */
.box2 img {
  width: 300px; /* Tamaño personalizado */
  height: 300px; /* Tamaño personalizado */
  border-radius: 50%; /* Hace que la imagen sea circular */
  object-fit: cover; /* Ajusta la imagen para que no se deforme */
  display: block; /* Asegura que no haya espacio adicional alrededor */
  margin: 0 auto; /* Centra la imagen dentro de su contenedor */
}
/* Efecto hover */
.box:hover img {
  transform: scale(1.1); /* Aumenta ligeramente la imagen */
}

.container-collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Dos columnas iguales */
  gap: 10px; /* Espaciado entre las imágenes */
  padding: 10px; /* Margen interno */
}

/* Estilo para pantallas más pequeñas */
@media (max-width: 768px) {
  .container-collage {
    grid-template-columns: repeat(3, 1fr); /* Tres columnas en móviles */
    gap: 5px; /* Menor espaciado entre las imágenes */
  }

  .box img {
    width: 100%;
    height: auto; /* Ajusta la altura automáticamente */
    object-fit: cover; /* Mantiene la proporción sin deformarse */
  }
}

@media (max-width: 480px) {
  .container-collage {
    grid-template-columns: repeat(3, 1fr); /* Dos columnas en pantallas pequeñas */
  }

  .box img {
    width: 100%;
    height: auto; /* Mantiene la proporción */
    border-radius: 5px; /* Ajusta los bordes redondeados */
  }
}

.sesenta-porciento {
  width: 60%; /* Reduce el tamaño de la imagen al 60% del contenedor en PC */
  margin: 0 auto; /* Centra el contenedor */
  display: flex;
  justify-content: center; /* Centra la imagen horizontalmente */
}

.sesenta-porciento img {
  width: 100%; /* La imagen ocupa todo el ancho del contenedor */
  height: auto; /* Mantiene la proporción */
  border-radius: 20px; /* Bordes redondeados opcionales */
}

/* Responsividad */


@media (min-width: 1024px) {
  .container-collage {
      grid-template-columns: repeat(4, 1fr); /* Tres columnas en pantallas grandes */

  }
}

/*CONECTA CON TU SLIDER*/

.container-swiper{
  max-width: 1040px;
  margin: 0 auto; 
}

.swiper{
  margin-top: 40px;
}

/* Ajuste general para asegurar que los textos estén alineados */
.swiper-txt {
  position: absolute;
  bottom: 15px; /* Alineado al borde inferior del slide */
  left: 15px; /* Alineación uniforme a la izquierda */
  width: calc(100% - 30px); /* Ancho uniforme con márgenes */
  text-align: left; /* Asegura que el texto esté alineado a la izquierda */
  z-index: 10; /* Asegura que el texto esté visible sobre la imagen */
  color: white;
  transition: all 0.3s ease-in-out; /* Transición suave */
}



.swiper-slide {
  margin-bottom: 50px;
  background-color: white;
  box-shadow: 0 30px 30px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  height: 420px;
  width: 295px;
  position: relative;
  overflow: hidden;
}

.swiper-slide img {
  width: 100%; /* Ajusta la imagen al contenedor */
  height: 100%;
  object-fit: cover; /* Mantén proporciones y rellena el espacio */
  border-radius: 15px;
  filter: brightness(60%);
  transition: filter 0.3s ease-in-out;
}

.swiper-slide:hover img {
  filter: brightness(100%);
}

.swiper-slide:hover .swiper-txt h3 {
  color: rgb(252, 252, 252);
  text-shadow: 0 0 45px rgba(8, 8, 8, 0.9),
               0 0 35px rgba(8, 8, 8, 0.8),
               0 0 65px rgba(8, 8, 8, 0.7);
}


.swiper-txt h3{
  font-size: 15px;
  margin-bottom: 5px;
  color: white; /* Texto blanco inicialmente */
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8); /* Sombra para destacar */
}
.swiper-txt h3,
.swiper-txt p {
  margin: 0;
  font-weight: normal; /* Texto normal inicialmente */
  text-shadow: none; /* Sin sombra inicialmente */
}

.swiper-slide:hover .swiper-txt h3,
.swiper-slide:hover .swiper-txt p {
  /* font-weight: bold; */ /* Texto negrita al hacer hover */
  text-shadow: 0 0 45px rgba(8, 8, 8, 0.9), /* Sombra más oscura */
               0 0 35px rgba(8, 8, 8, 0.8), /* Sombra extendida */
               0 0 65px rgba(8, 8, 8, 0.7); /* Efecto de profundidad */
  color: rgb(252, 252, 252); /* Mantén el color blanco */
}


@media(max-width:991px){
  .swiper{
    padding: 0 70px;
  }
  .swiper-slide img {
    width: 100%;
  }
  .swiper-txt h3{
    top: 80%;
    left: %;
  }
}

/* CASTILLO SLIDER*/

.container-castillo{
  width: 100%;
  height: 100vh;
  background-color: #f2e9ff;
  display: flex;
  align-items: center;
  justify-content: ;
}