/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #968d02; /* Fondo del body en color #968d02 */
}

header {
    background-color: #8c8527; /* Fondo del encabezado en color #8c8527 */
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

section#casas, section#foto {
    max-width: 1000px; /* Ancho máximo de 1000px */
    margin: 0 auto;
    padding: 20px;
    background-color: #a39b26; /* Fondo de las secciones casas y foto en color #a39b26 */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

h2 {
    color: #333;
    text-align: center; /* Centra los títulos de las secciones */
}

/* Estilos para la galería de imágenes */
.galeria {
    display: flex;
    justify-content: center; /* Centra la galería horizontalmente */
    overflow-x: hidden; /* Oculta la barra de desplazamiento horizontal */
    overflow-y: hidden; /* Oculta la barra de desplazamiento vertical */
    height: calc(20px + 100% + 20px); /* Alto de la galería: 20px + altura de la foto + 20px */
}

.galeria a {
    flex: 20%; /* Cada imagen ocupa el 20% del espacio disponible */
    margin-right: 10px;
    text-decoration: none;
    transition: transform 0.3s; /* Agregamos transición para el efecto hover */
}

.galeria a:last-child {
    margin-right: 0;
}

.galeria img {
    width: 90%; /* Ancho del 90% para que quepa bien en cada caja de imagen */
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

/* Efecto hover para las imágenes */
.galeria a:hover {
    transform: scale(1.05); /* Escala un poco la imagen al pasar el mouse sobre ella */
}

/* Estilos para la imagen dentro de la sección "foto" */
#foto {
    text-align: center; /* Centra la imagen horizontalmente */
}

#foto img {
    border: 3px solid white; /* Borde blanco de 3px alrededor de la imagen */
    max-width: 100%; /* Ajusta el ancho máximo de la imagen al 100% de su contenedor */
}

/* Estilos para el pie de página */
footer {
    background-color: #8c8527; /* Fondo del pie de página en color #8c8527 */
    color: #fff;
    text-align: center;
    padding: 10px 0;
}