/*ESTILO MENU PRODUCTOS*/
.menu-barra-contenedor {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;  
    align-items: center;  
    width: 100%;  
    padding: 10px 20px;
    box-sizing: border-box;
}
.menu-barra-contenedor ul {
    display: flex; 
    margin: 0;  
    padding: 0; 
    list-style: none; 
}
.menu-barra-contenedor ul li a {
    font-size: 18px; 
    text-decoration: none; 
    display: block;
    padding: 10px 5px;  
    transition: all 0.3s ease; 
}
.menu-barra-contenedor ul li a:hover {
    cursor: pointer;  
}

/*ESTILO CONTENEDOR PRODUCTOS*/
.contenedor {
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70%;
    margin: 20px auto;
    padding: 20px;
    max-width: auto;
    box-sizing: border-box;
}
/*SECCION MEDICAMENTOS*/
.medicamento {
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/*EFECTO SECCIONES*/
.promociones, .equipos, .belleza, .salud, .domestico, .hidratacion ,.snaks {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    height: auto; 
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/*EFECTO FLOTANTE DE SECCIONES*/
.img-medi img:hover, 
.img-promo img:hover, 
.img-equipos img:hover,
.img-belleza img:hover, 
.img-salud img:hover, 
.img-domestico img:hover, 
.img-medi img:hover,
.img-snaks img:hover{
    transform: translateY(-10px); 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    cursor: pointer;  
}

/*ESTILO TITULOS*/
.medicamento h2, 
.promociones h2, 
.equipos h2,
.belleza h2,
.salud h2, 
.domestico h2, 
.hidratacion h2, 
.snaks h2 {
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center; 
    color: transparent;
    background-image: linear-gradient(to right, #068d77b9, #00b3a6, #006a4d);
    background-clip: text;
    margin-bottom: 15px;
}

/*ESTILO TEXTOS*/
.medicamento .txt, 
.promociones .txt, 
.equipos .txt,
.belleza .txt,
.salud .txt, 
.domestico .txt, 
.hidratacion .txt,
.snaks .txt {
    text-align: center;
    width: 100%;
    max-width: 80%;  
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: transparent;
    background-image: linear-gradient(to right, #005f73, #000000);
    background-clip: text;
    padding-right: 20px;
}

/*ESTILO IMAGEN*/
.medicamento .img-medi {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    gap: 15px; 
    width: 100%;
}
.medicamento .img-medi img {
    width: 150px; 
    height: 150px;
    object-fit: cover; 
    border-radius: 8px;
    margin: 0;
}
.equipos .img-equipos img {
    width: 50%; 
    height: auto;
    object-fit: cover; 
    border-radius: 8px;
    margin: 0 auto; 
    display: block; 
}

/*ESTILO DEMIMAGENES DENTRO DE LAS SECCIONES*/
.promociones .img-promo img,
.belleza .img-belleza img, 
.salud .img-salud img, 
.domestico .img-domestico img,
.hidratacion .img-hidratacion img, 
.snaks .img-snaks img {
    width: 25%;  
    height: auto;
    object-fit: cover; 
    border-radius: 8px;
    margin: 0 auto; 
    display: block;
}

@media (max-width: 768px) {
    /*CONTENEDOR*/
    .contenedor {
        width: 100%; 
        padding: 10px; 
        box-sizing: border-box;
    }
    /*SECCIONES*/
    .medicamento, .promociones, .equipos, .belleza, .salud, .domestico, .hidratacion, .snaks {
        width: 100%; 
        padding: 15px 10px; 
        box-sizing: border-box;
    }
    /*TEXTO*/
    .medicamento .txt, .promociones .txt, .equipos .txt, 
    .belleza .txt, .salud .txt, .domestico .txt, .hidratacion .txt, .snaks .txt {
        font-size: 1rem; 
        max-width: 100%; 
        text-align: center; 
    }
    /*IMAGEN*/
    .medicamento .img-medi img{
        width: 60%;  
        max-width: 200px; 
        height: auto;
        object-fit: cover;
    }
    .equipos .img-equipos img{
        width: 60%; 
        max-width: 800px; 
        height: auto;
        object-fit: cover;
    }
    .promociones .img-promo img, 
    .belleza .img-belleza img, 
    .salud .img-salud img, 
    .domestico .img-domestico img, 
    .hidratacion .img-hidratacion img, 
    .snaks .img-snaks img {
        width: 60%;  
        max-width: 500px; 
        height: auto;
        object-fit: cover;
    }
    /*TITULO*/
    .medicamento h2, .promociones h2, .equipos h2, 
    .belleza h2, .salud h2, .domestico h2, .hidratacion h2, .snaks h2 {
        font-size: 1.2rem;  
        text-align: center;
        margin-bottom: 10px; 
    }
    /*MENU*/
    .menu-barra-contenedor {
        flex-wrap: wrap; 
        justify-content: center;  
        padding: 10px; 
    }
    .menu-barra-contenedor ul li {
        margin: 5px; 
    }
    .menu-barra-contenedor ul li a {
        font-size: 14px; 
        padding: 8px 12px;  
    }
}