@import url(styles.css);


.portada {
    background-image: url("../IMAGEN/bannerportada.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 700px;
}

.texto_portada {
    padding: 0px 10px;



    & h1 {
        color: #0D389F;
        font-size: 40px;
        padding: 20px;
    }

}




/* #portada2 {
    background-image: url("../IMAGEN/bannerweb-sckarleth-sanchez.jpg");
    background-position: center;
}

.portada2 {
    height: 600px;
    
}

.boton_portada2 {
    height: 100%;
    margin-top: 250px;
} */

.productos_titulo h3 {
    display: flex;
    justify-content: center;
    font-size: 40px;
    color: #0F3A97;




}

.productos_titulo {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 35px 50px;
    margin: 10px;
}


.foto_portada2 {
    display: flex;
    justify-content: center;
    width: auto;
    height: 110%;
    padding: 10px 0px;


    & img {
        width: auto;
        height: 100%;
    }
}


.especialidades_titulo h4 {
    flex-direction: column;
    text-align: center;
    font-size:70px;
    padding: 35px 50px;
    margin: 10px;
    font-family: var(--fontinter);
}

.especialidades_boton {
    display: flex;
    justify-content: center;
    font-weight: weight;
    gap: 30px;
    
}

.productos{
    justify-content: center;
    text-align: center;
    gap: 30px 0px;
}

.testimonios{
    text-align: center;
    gap: 30px;
}
.servicio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;

    & p {
        text-align: center;

    }
}

.servicio_foto img {
    width: 100%;
    height: auto;
    border-radius: 25px;
}

#banner {
    background-color: var(--colorazul);
}

.banner {
    display: flex;
    justify-content: space-between;

    & h3 {
        color: var(--colorblanco);
    }

    & p {
        color: var(--colorblanco);
    }
}


.ofertas_titulo h3 {
    text-align: center;
    color: var(--colorrojo);
    padding-bottom: 80px;
}

.oferta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;

    & p {
        text-align: center;
    }
}


@media (max-width: 768px) {
    .portada {
        background-image: url("../IMAGEN/bannerportada.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        height: 700px;
    }
    
    .texto_portada {
        padding: 0px 10px;
    
    
    
        & h1 {
            color: #0D389F;
            font-size: 40px;
            padding: 20px;
        }
    
    }
    
    .productos_titulo h3 {
        display: flex;
        justify-content: center;
        font-size: 40px;
        color: #0F3A97;
    
    
    
    
    }
    
    .productos_titulo {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 35px 50px;
        margin: 10px;
    }
    
    
    .foto_portada2 {
        display: flex;
        justify-content: center;
        width: auto;
        height: 110%;
        padding: 10px 0px;
    
    
        & img {
            width: auto;
            height: 100%;
        }
    }
    
    
    .especialidades_titulo h4 {
        flex-direction: column;
        text-align: center;
        font-size:70px;
        padding: 35px 50px;
        margin: 10px;
        font-family: var(--fontinter);
    }
    
    .especialidades_boton {
        display: flex;
        justify-content: center;
        font-weight: weight;
        gap: 30px;
        
    }
    
    .productos{
        justify-content: center;
        text-align: center;
        gap: 30px 0px;
    }
    
    .testimonios{
        text-align: center;
        gap: 30px;
    }
    .servicio {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
    
        & p {
            text-align: center;
    
        }
    }
    
    .servicio_foto img {
        width: 100%;
        height: auto;
        border-radius: 25px;
    }
    
    #banner {
        background-color: var(--colorazul);
    }
    
    .banner {
        display: flex;
        justify-content: space-between;
    
        & h3 {
            color: var(--colorblanco);
        }
    
        & p {
            color: var(--colorblanco);
        }
    }
    
    
    .ofertas_titulo h3 {
        text-align: center;
        color: var(--colorrojo);
        padding-bottom: 80px;
    }
    
    .oferta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
    
        & p {
            text-align: center;
        }
    }
    

}