html{
    box-sizing: border-box; /**Hace que las cajas respeten el tamaño que se les asigne**/
    font-size: 62.5%; /**Establece que 1rem = 10px**/

    scroll-behavior: smooth;
}
*,*::after,*::before{
    box-sizing: inherit; /** Hace que todas las cajas tengan el box-sizing especificado en la linea 2 **/
}

/*--- GENERALES ---*/
h1{
    font-size:6rem;
    font-weight: 300;
}
h2{
    font-size: 4rem;
    font-weight: 400;
}
h3{
    font-size: 3rem;
    font-weight: 400;
}

img{
    box-sizing: border-box;
}

/*--- UTILIDADES ---*/
.container{
    margin: 0 auto;

    width: 95%;
    max-width: 140rem;
}

.button{
    color: #fff !important;
    background-color: #114486 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;

    cursor: pointer;
    
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 1rem;
}.button:hover{
    outline: 0.3rem solid #114486 !important;
    color: #114486 !important;
    background-color: #00000000 !important;
}


/*--- DOCUMENTO ---*/
body{
    font-family: 'Roboto', sans-serif;
    background-color: #f5f5f5;
}

/*--- Boton Flotante Subir ---*/
.up_button{
    bottom: 15px;
    right: 15px;

    position: fixed;
}


/*-- Cabecera --*/
header{
    width: 100%;

    /*position: absolute;*/
    background: #f5f5f5e6;
}

.headerContainer{   
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo{
    color: #114486;

    font-size: 2rem;
    font-weight: bold;

    text-decoration: none;
    text-transform: uppercase;

    display: flex;
    align-items: center;
}

.logo p{
    margin-left: 3rem;
}

.cta{   
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    align-items: center;
}

#check{
    display: none;
}
.nav_button{
    width: 50px;
    display: none;
}

.navElement{
    margin-left: 2rem;

    color: #114486;
    
    text-decoration: none;

    font-size: 2em;
    font-weight: bold;

    display: flex;
}.navElement:hover{
    color: #66bb11;
}

.navElement a{
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 1rem;
}

.navElement:first-child{
    margin-left: 0;
}

@media (max-width: 800px) {
    .nav_button{
        display: block;
    }
    .cta{
        position: absolute;
        top: 105px;
        left: -800px;
        width: 100%;

        padding: 3rem;
        background-color: #c5c5c5c2;
        display: block;

        transition: all 1000ms;
    }
    .navElement{
        margin: 2rem auto;
        padding: 1rem 0;
        text-align: center;
        justify-content: center;
    }.navElement:hover{
        color: #114486;
        outline: 0.2rem solid #114486;
    }

    #check:checked ~ .cta{
        left: 0px;
    }
}

@media(max-width: 500px){
    .logo{
        font-size: 1.7rem;
    }
}

/*-- Hero --*/
.hero{
    height: 80vh;
    min-height: 50rem;

    border-bottom: 0.8rem solid #66bb11;

    background: url('../img/hero.png') fixed;
    background-size: cover;
    background-position: left top;

    display: flex;
    align-items: center;
}

.heroDescription{
    color: #f5f5f5;
    font-size: 1.8rem;
}

.heroDescription *{
    width: 60%;
}

.heroDescription h1::after{
    content: "";
    display: block;

    width: 5rem;
    height: 2px;

    margin-top: 2rem;

    background-color: #66bb11;
}



/* @-Media Queries@ */
@media(max-width: 680px){
    .hero{
        height: 100vh;
    }
    .heroDescription h1{
        width: 90%;
        font-size: 5rem;
        text-align: center;
    }
    .heroDescription h2{
        width: 90%;
        font-size: 3rem;
    }
}

@media(max-width: 400px){
    .heroDescription h1{
        font-size: 4rem;
    }
    .heroDescription h2{
        font-size: 2.8rem;
    }
}



/*-- Sobre Mi --*/
.about_container{
    background-color: #ffffff;
}
.about{
    padding: 10rem 0;
    font-size: 2rem;

    display: flex;
    align-items: flex-start;
}

.about_img{
    margin-right: 5rem;
    width: 40%;
}

.about_content h2{
    margin-top: 0;
    color: #114486
}

.about_content p{
    line-height: 1.6;
}

/* Misión y visión */
.mision_vision{
    margin-top: 10rem;
    display: flex;
}

.mision{
    margin-right: 3rem;
}

.about_icon{
    width: 3rem;
    margin-right: 1rem;
}

.about h3{
    display: inline;
    color: #114486;
}

.about p{
    font-weight: 300;
}


/* @-Media Queries-@ */
@media(max-width: 780px){
    .about{
        flex-wrap: wrap;
        justify-content: center;
    }

    .mision_vision{
        flex-wrap: wrap;
    }

    .about_img{
        width: 70%;
        margin: 0;
    }
}



/*-- Lista de Medicamentos --*/
.lista_medicamentos{
    max-width: 70rem;
    margin-top: 8rem;
    color: #114486;

    text-align: center;
}

.medicamentos{
    padding: 0;
    font-size: 1.5rem;
}

.medicamentos a{
    color: inherit;
    text-decoration: none;
}.medicamentos a:hover{
    color: #66bb11;
}

.medicamentos a::before{
    content: " - ";
    color: #66bb11;
}.medicamentos li:first-child::before{
    content: none;
}

.medicamentos>a>li{
    line-height: 1.5;
    text-transform: capitalize;
    display: inline;
}



/*-- Contenido principal --*/
.producto{
    margin: 5rem 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.producto--var{
    flex-direction: row-reverse;
}

.producto img{
    height: 40rem;
    width: 49%;
    border-radius: 1rem;

    object-fit: cover;
    object-position: center;
}

.producto_informacion{
    color: #114486;

    background-color: #ffffff;
    border-radius: 1rem;
    height: 40rem;
    width: 49%;
    padding: 5rem;

    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.producto_informacion h2{
    margin: 0;
    text-transform: capitalize;
}
.producto_informacion h2::after{
    content: "";
    display: block;

    width: 5rem;
    height: 1.8px;

    margin-top: 2rem;

    background-color: #66bb11;
}

.producto_contenido{
    font-size: 4rem;
    font-weight: 300;
    margin: 0;
}

.producto_descripcion{
    color: black;
    font-size: 2rem;
    margin: 0;
}

.producto_cantidad{
    font-weight: bold;
    font-size: 2.5rem;
    margin: 0;
}



.articleDescription{
    color: #dce5ee;
    text-decoration: none;
    background-color: #24262c;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.articleDescription h2{
    text-transform: capitalize;
    font-size: 3rem;
    margin: 0;
}

.articleDescription p{
    font-size: 2rem;
}

/* @-Media Queries-@ */
@media(max-width: 780px){
    .producto{
        flex-wrap: wrap;
        margin: 0;
    }
    .producto::after{
        content: "";
        width: 90%;
        height: 2px;
        margin: 4rem 5%;
        background-color: #66bb11;
    }
    .producto img{
        width: 100%;
        border-radius: 1rem 1rem 0 0;
    }
    .producto_informacion{
        width: 100%;
        border-radius: 0 0 1rem 1rem;
    }

    .producto_informacion h2{
        font-size: 3rem;
    }
    
}

@media(max-width: 500px){
    .producto_informacion h2{
        font-size: 3rem;
    }
    .producto_contenido{
        font-size: 2.8rem;
    }
}


/*-- Contacto --*/
.contacto_titulo{
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
}

.contacto_titulo h2{
    margin-left: 1rem;
    font-weight: bold;
    color: #114486;
    display: inline;
}

.contacto_contenido{
    
    font-size: 1.7rem;
    line-height: 1.5;
    
    display: flex;
    justify-content: space-between;
}
.contacto_datos{
    width: 49%;
}
.contacto_datos h3{
    color: #114486;
    font-size: 1.8rem;
    margin: 0;
}

.contacto_datos p{
    margin: 0 0 5rem 0;
}


.contacto_formulario{
    width: 49%;
}
.contacto_formulario h3{
    font-size: 2rem;
    color: #114486;
    font-weight: bold;
}
.contacto_campo{
    width: 100%;
    margin: 1rem 0;
    padding: 1rem;

    border: none;

    display: block;
}
.contacto_campo--short{
    width: 49.3%;
    display: inline-block;
}
.contacto_campo--large{
    /* width: 50px; */
    height: 20rem;
    margin-bottom: 5rem;

    resize: none;
}

@media(max-width: 780px) {
    .contacto_titulo img{
        width: 7rem;
    }
    .contacto_contenido{
        flex-wrap: wrap;
    }

    .contacto_datos{
        width: 100%;
    }
    .contacto_formulario{
        width: 100%;
    }
}



/*-- Pie de pagina --*/
footer{
    margin: 10rem 0 0 0;
    font-size: 1.5rem;
    
    background-color: #114486;
    color: #ffffff;

    display: grid;
    grid-template-columns: 3fr 1fr;
}

.footer_text{
    background-color: #114486;
    padding: 2rem 0;
}

.footer_networks{
    background-color: #fff;
    padding: 2rem 3rem;
}
.footer_networks img{
    width: 1.8rem;
    margin-right: 1rem;
}