/* ======== Navegación y enlaces ======== */
ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    gap: 80px;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: black;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 10px 15px;
    transition: all 0.3s ease;
    border-radius: 5px;
    font-style: oblique;
}

nav ul li a:hover {
    background-color: #555;
    color: white;
}

/* ======== Sección bienvenida ======== */
section.bienvenida {
    background-color: #d1d2c8a0;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

section.bienvenida div {
    color: rgba(7, 33, 80, 0.9);
    font-size: 1.6em;
    max-width: 600px;
    font-style: oblique;
    text-align: center;
}

/* ======== Sección productos ======== */
section.productos {
    background-color: #9a8820;
    width: 100%;
    height: 550px;
    padding: 0;
}

section.productos .contenido {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 200px;
    max-width: 1200px;
    margin: 0 auto;
}

section.productos .contenido div {
    color: rgba(0, 0, 0, 0.534);
    font-size: 20px;
    max-width: 600px;
    font-style: oblique;
}

section.productos .contenido img {
    height: 75%;
    object-fit: cover;
}

/* ======== Galería de imágenes ======== */
section.galeria {
    padding: 100px 80px;
    text-align: center;
}

section.galeria .contenedor-imagenes {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

section.galeria .contenedor-imagenes img {
    width: 18em;
    height: 18em;
    object-fit: cover;
    border-radius: 10px;
}

/* ======== Sección ubicación ======== */
section.ubicacion {
    background-color: #dddbcf;
    width: 100%;
    height: 550px;
    padding: 0;
}

section.ubicacion .contenido {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 300px;
    max-width: 1200px;
    margin: 0 auto;
}

section.ubicacion .contenido div {
    color: rgba(0, 0, 0, 0.534);
    font-size: 20px;
    max-width: 600px;
    font-style: oblique;
}

section.ubicacion .contenido img {
    height: 90%;
    object-fit: cover;
}

/* ======== Footer ======== */
footer {
    background-color: #161616;
    color: white;
    padding: 20px 50px;
    text-align: center;
    font-size: 14px;
}

footer a {
    color: #9a8820;
    text-decoration: none;
}

/* ======== Responsive general ======== */
@media (max-width: 768px) {
    section.bienvenida,
    section.productos,
    section.ubicacion {
        flex-direction: column !important;
        text-align: center;
        height: auto !important;
        padding: 40px 20px !important;
    }

    section.productos .contenido,
    section.ubicacion .contenido {
        flex-direction: column;
        gap: 40px;
    }

    section img {
        width: 80%;
        height: auto !important;
        margin: 20px auto;
    }

    footer {
        font-size: 12px;
        padding: 15px 20px;
    }

    footer div {
        flex-direction: column;
        gap: 10px;
    }

    footer a {
        display: block;
    }
}