html, body {
  height: 100%; /* Asegura que body y html ocupen toda la altura de la ventana */
  margin: 0; /* Elimina el margen por defecto */
}

body {
  display: flex; /* Usa flexbox para layout */
  flex-direction: column; /* Organiza los hijos verticalmente */
}

main {
  flex: 1; /* Ocupa el espacio restante entre el contenido y el footer */
}

body {
  font-size: 100%;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  background-color: hsl(0, 0%, 33%, 0.302);
  background: radial-gradient(ellipse at center, hsla(0, 0%, 33%, 0.144), #ffffff);
}



.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.main_header {
  display: flex;
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: center; /* Centra el contenido verticalmente */
  height: 100vh; /* Usa toda la altura de la ventana gráfica */
  text-align: center; /* Asegura que el texto dentro esté centrado */
  padding: 0 20px; /* Añade un poco de relleno a los lados */
}

.properties h1 {
  font-size: 30px; /* Tamaño grande para destacar */
  color: #000; /* Color negro para el contraste */
  text-align: center; /* Centrado horizontal */
  margin: 30px 0; /* Espacio arriba y abajo */
  padding: 10px; /* Espacio interior */
  border-bottom: 2px solid #f9f9f9; /* Línea sutil en la parte inferior */
  text-transform: uppercase; /* Texto en mayúsculas */
  font-family: 'Roboto', sans-serif; /* Fuente consistente con el resto */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Sombra del texto */
  background: rgba(255, 255, 255, 0.8); /* Fondo blanco semitransparente */
  border-radius: 5px; /* Bordes redondeados para un toque moderno */
}


.main_header__title {
  color: #000000;
  text-transform: uppercase;
  font-size: 1.5em;
}

.container__title {
  color: #000000;
  text-transform: uppercase;
  font-size: 0.9em;
  border-bottom: 1px solid #f9f9f9;
  margin-bottom: 20px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centra los cuadros horizontalmente */
  gap: 20px; /* Añade espacio entre los cuadros */
  margin: 0 auto; /* Asegura que el contenedor esté centrado en la página */
}


/* Cuadros individuales */
.col-xl-3, .col-lg-4, .col-sm-6 {
  flex: 0 0 30%; /* Ancho base del cuadro */
  margin: 10px; /* Espaciado alrededor de cada cuadro */
}

/* Aumentar el tamaño de los cuadros */
.col-xl-3, .col-lg-4, .col-sm-6 {
  flex: 0 0 30%; /* Ancho base del cuadro */
  margin-bottom: 20px;
}

/* Ajustar el tamaño del cuadro y de la imagen */
.box {
  position: relative;
  height: 300px; /* Ajusta la altura del cuadro según sea necesario */
  border-radius: 8px;
  box-shadow: 3px 3px 10px rgba(85, 85, 85, 0.5);
  overflow: hidden; /* Asegura que la imagen no sobresalga del cuadro */
  transition: transform 0.4s, box-shadow 0.4s;
}

/* Estilo para el hover del cuadro */
.box:hover {
  box-shadow: 15px 15px 13px hsla(0, 0%, 33%, 0.302);
  transform: translate(-1%, -1%);
}

/* Imagen dentro del cuadro */
.box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen cubra el cuadro sin distorsionarse */
  border-radius: 8px;
}

/* Título del cuadro */
.box__title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%; /* Ajustar la altura del título según el nuevo tamaño del cuadro */
  background: rgba(246, 246, 246, 0.9);
  color: #696969;
  text-transform: uppercase;
  border-radius: 0 0 8px 8px;
  text-align: center;
  padding-top: 10px;
  overflow: hidden;
  transition: transform 0.4s, height 0.4s; /* Añadir la transición para la altura */
}

/* Estilo del hover del título */
.box:hover .box__title {
  transform: translateY(0px); /* Desplazar hacia arriba 50px */
  height: calc(20% + 50px); /* Expandir la altura del fondo */
}

.box__title h6 {
  margin: 0;
  font-weight: bold;
  font-size: 1em; /* Ajustar el tamaño del texto si es necesario */
}

.box__title p {
  margin: 0;
  font-size: 0.9em; /* Ajustar el tamaño del texto si es necesario */
  font-weight: 300;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s, transform 0.4s;
}

/* Mostrar texto al hacer hover */
.box:hover .box__title p {
  opacity: 1;
  transform: translateY(0);
}

/* Ajuste adicional para que los cuadros se alineen correctamente si hay menos de 3 en una fila */
@media (min-width: 1200px) {
  .col-xl-3 {
    flex: 0 0 30%; /* Ancho fijo para pantallas grandes */
  }
}

@media (max-width: 1199px) {
  .col-lg-4 {
    flex: 0 0 45%; /* Ajusta el ancho para pantallas medianas */
  }
}

@media (max-width: 991px) {
  .col-sm-6 {
    flex: 0 0 100%; /* Ancho completo para pantallas pequeñas */
  }
}