/* Estilos para la sección local */
@media (min-width: 768px) {
  .contenedor-local {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem; /* Ajusta el margen superior según tus necesidades */
    max-width: 1200px; /* Limita el ancho máximo del contenedor */
    margin-left: auto; /* Centra el contenedor en pantallas grandes */
    margin-right: auto; /* Centra el contenedor en pantallas grandes */
  }

  .texto-local {
    flex: 0 0 calc(60% - 2rem); /* Ajusta el espacio del texto-local y el margen derecho */
    margin-right: 2rem;
    text-align: left;
  }

  .imagenes-local {
    flex: 0 0 calc(40% - 2rem); /* Ajusta el espacio de las imágenes-local y el margen izquierdo */
    margin-left: 2rem;
    text-align: right;
    padding: 1rem; /* Añade padding a la sección de imágenes */
  }

  .texto-local h1 {
    font-size: 4.5rem; /* Ajusta el tamaño de la fuente para pantallas más pequeñas */
  }

  .texto-local p {
    font-size: 2rem; /* Ajusta el tamaño de la fuente para pantallas más pequeñas */
  }

  .botones-azul {
    font-size: 1.6rem; /* Ajusta el tamaño de la fuente para pantallas más pequeñas */
    padding: 1rem 2rem;
  }
}

.imagenes-local {
  display: flex;
  justify-content: space-between;
  gap: 1rem; /* Añade un espacio entre las imágenes */
}

.imagenes-local img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  padding: 1rem; /* Añade padding a cada imagen */
  margin-bottom: 1rem;
}

.imagen1,
.imagenes2 {
  flex: 0 0 calc(50% - 1rem);
}

.imagenes2 img {
  margin-bottom: 1rem;
}

/* Consultas de medios para hacer la sección responsive en pantallas pequeñas */
@media (max-width: 767px) {
  .contenedor-local {
    flex-direction: column;
    align-items: center;
  }

  .texto-local {
    text-align: center; /* Centra el texto en pantallas pequeñas */
    margin-right: 0; /* Elimina el margen derecho */
    margin-bottom: 2rem; /* Añade un margen inferior */
  }

  .imagenes-local {
    text-align: center; /* Centra las imágenes en pantallas pequeñas */
    margin-left: 0; /* Elimina el margen izquierdo */
    padding: 1rem; /* Añade padding a la sección de imágenes en pantallas pequeñas */
  }

  .texto-local h1 {
    font-size: 3rem; /* Aumenta el tamaño del título para pantallas más pequeñas */
  }

  .texto-local p {
    font-size: 1.5rem; /* Aumenta el tamaño del párrafo para pantallas más pequeñas */
  }

  .botones-azul {
    font-size: 1.3rem; /* Aumenta el tamaño del botón para pantallas más pequeñas */
    padding: 0.8rem 1.5rem;
  }

  .imagenes-local img {
    padding: 1rem; /* Añade padding a cada imagen en pantallas pequeñas */
  }
}