html{
    box-sizing: border-box;
    font-size: 62.5%;  /* 1rem== 10px*/
}

*, *:before,*:after{
    box-sizing: border-box;
}

body{
    font-family: 'Raleway', sans-serif;
    font-size: 1.6rem;
    line-height: 2;
}

/*Globales*/
a{
    text-decoration: none;
    color: #000;
}

h1,h2,h3{
    font-family: 'Playfair Display', serif;
    margin: 0 0 2rem 0;
}

h1{
    font-size: 3.8rem;
}
@media(min-width: 768px){ 
    h1{
      font-size: 5rem;
    }
}

h2{
    font-size: 3.2rem;
}
@media(min-width: 768px){ 
    h2{
        font-size: 4rem;
    }
}

h3{
    font-size: 2.2rem;
}
@media(min-width: 768px){ 
    h3{
        font-size: 3rem;
    }
}


/*UTILIDADES*/
.btn{
    background-color: #8cbc00;
    display: block;
    text-transform: uppercase;
    color: white;
    font-weight: 900;
    padding: 1rem;
    text-align: center;
    transition: background-color .3s ease-out;
  }
.btn:hover{
    background-color: #769c02;
    cursor: pointer;
}


.img-entradas-blog{
        width: 100%;
        height: 40rem;
        object-fit: cover;
}



/* Header y navegacion   */
.nombre-sitio{
    margin-top:5rem;
    text-align: center;
 }
 
.nombre-sitio span{
    color:#037bc0;
}

.nav-principal{
    padding:2rem 0; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media(min-width: 768px){ 
    .nav-principal{
        padding:2rem 0; 
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
}

.row-nav-principal{
    border-top: #e1e1e1 solid 0.1rem;
}




/*centramos para que no se vaya a las orillas*/
.contenedor{   
    max-width: 120rem;
    margin: 0 auto;
}





.hero{
    background-image: url('/./img/principal.jpg'); 
    background-repeat: no-repeat;
    background-size: cover;
    height: 40rem;
    background-position: center center;
}

@media(min-width: 768px){ 
    .hero{
        height: 55rem;
    } 
}


.nombre-sitio h1{
    color: #000000;
}



h2 span{
    color:#299208;
}



img{
    max-width: 100%;
    display: block;
}

.categoria img{
    width: 100%;
}
.categoria{
    margin-bottom: 2rem;
}
.categoria:last-child{
    margin-bottom: 0;
}
@media(min-width: 768px){   
.listado-categorias{
    display: grid;
    grid-template-columns: repeat(3,1fr); 
}
.categoria{
    margin-bottom: 0;
}

}

.categoria a{
    
    display: block;
    text-align: center;
    padding: 2rem;
    font-size: 2rem;
}

.categoria a:hover{
    color: white;
    background-color: #037bc0;
    border-bottom-right-radius: 1.5rem;
}

.categorias h2{
    text-align: center;
}

.categorias{
    margin-top: 5rem;
    margin-bottom: 5rem;
}

/* sobre-nosotros  */
.sobre-nosotros{
    background-image: linear-gradient(to bottom ,transparent 50%,#037bc0 50% ),
    url('../img/nosotros.jpg');
    padding: 10rem 0;
    background-position:top left;
    background-repeat: no-repeat;
    background-size: 100%,80rem;
    display: grid;
    grid-template-rows: repeat(2,1fr);
}

.texto-nosotros{
    padding:5rem 5rem 0rem 5rem;
    color: #FFF;
    grid-row: 2/3;
}

@media(min-width: 768px){ 
    .sobre-nosotros{
        background-image: linear-gradient(to right ,transparent 50%,#037bc0 50% ),
        url('../img/nosotros.jpg');
        grid-template-columns: repeat(2,1fr);
        grid-template-rows:unset;
        background-position: left center;
        background-size: 100%,160rem;
    }
    .texto-nosotros{
        grid-column:2/3;
        padding-left: 10rem;
        padding-right: 2rem;
    }
}



/*productos*/
.contenido-principal{
    padding-top: 5rem;
}
.contenido-principal h2{
    text-align: center;
}
.producto{
    background-color: #037bc0;
    margin-bottom: 2rem;
}
.producto:last-child{
    margin-bottom: 0;
}
.texto-producto{
    text-align: center;
    color: white;
    padding: 2rem;
}
.texto-producto h3{
    margin-bottom: 1rem;
}
.precio{
    font-weight: 900;
    font-size: 2.3rem;
}
@media(min-width: 768px){ 
    .producto{
        margin-bottom: 0;
    }
    .listado-productos{
        display: grid;
        grid-template-columns: repeat(6,1fr);
        gap: 2rem;
    }
    .producto:nth-child(1){
        grid-column: 1/7;
        display:grid;
        grid-template-columns:3fr 1fr;
    }
    .producto:nth-child(1) img{
      height:53rem;
      width: 100%;
      object-fit: cover;
    }
    .producto:nth-child(2){
       grid-column: 1/4;
    }
    .producto:nth-child(2) img{
     height: 30rem;
     width: 100%;
     object-fit: cover;
    }
    .producto:nth-child(3){
        grid-column: 4/7;
    }
    .producto:nth-child(3) img{
        height: 30rem;
        width: 100%;
        object-fit: cover;
    }
    .producto:nth-child(4){
       grid-column: 1/3;
    }
    .producto:nth-child(4) img{
        width:100%;
        height:30rem;
        object-fit: cover;
    }  
    .producto:nth-child(5){
       grid-column:3/5;
    }
    .producto:nth-child(5) img{
        width:100%;
        height:30rem;
        object-fit: cover;
    }
    .producto:nth-child(6){
      grid-column:5/7;
    }
    .producto:nth-child(6) img{
        height:30rem;
        width:100%;
        object-fit:cover;
    }
}

/*  footer  */
.footer{
    border-top: #e1e1e1;
    border-top-style: solid;
    border-width: 0.1rem;
    margin-top: 5rem; 
}
.footer-interno div{
    text-align: center;
    margin-bottom: 3rem;
}
.footer-interno div:last-child{
    margin-bottom: 0;
}
.footer h4{
    text-align: center;
}
.footer a{
    display: block;
}

@media(min-width: 768px){ 
    .footer-interno{
        max-width: 120rem;  /* máximo ancho que puede alcanzar */
        margin: 0 auto;     /*ocupa el espacio necesario <-  ->*/
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap:2rem;
    }
    .footer-interno div{
        display: flex;
        flex-direction:column; 
        text-align: unset;
        margin-bottom: unset;
    }
    .footer-interno div h3{
        font-weight: 700;
        margin-bottom: .5rem;
    }
    .footer-interno div nav{
        display: flex;
        flex-direction: column;
    }
    .footer h4{
        padding-top: 2rem;
    }
}




/*NOSOTROS*/
.nosotros-contenido div{
    padding: 5rem;
    text-align: justify;
}
@media(min-width: 768px){ 
    .nosotros-contenido div{
        padding: unset;
    }
    .nosotros-contenido{
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(25rem,1fr)); /*similar a media query*/
    }
    .nosotros-contenido img{
        width: 100%;
        height: 30rem;
        object-fit: cover;
    }
    .nosotros-contenido p{
        padding:0 3rem;
        text-align: justify;
        margin-top: 0;
        font-weight: 400;
    }
}

/*BLOG*/
.blog-contenido{
    display: flex;
    flex-direction: column;
}
.fecha-autor{
    padding: 1rem 3rem;
}
.blog-texto{
    padding: 0 3rem;
    text-align: justify;
}
.blog-contenido a{
    max-width: 45%;
    margin-left: 3rem;
}
.entrada{
    border-bottom: 2px solid #e1e1e1;
    padding-bottom: 5rem;
    margin-bottom: 3rem;
}

.entrada:last-of-type{
    border: none;
}
.fecha-autor{
    color: #000000;
    font-weight: 900;
}
.fecha-autor span{
    color: #037bc0;
}
.blog-contenido aside{
    padding: 0 3rem;
}

@media(min-width: 768px){ 
    .fecha-autor{
        display: flex;
        justify-content: space-between;
    }
    .blog-contenido{
        flex-direction: row;
    }
    .blog-contenido div:nth-child(1){
        flex:2.6;
    }
    .fecha-autor{
        padding: 1rem 0;
    }
    .blog-contenido div:nth-child(1) h2{
       text-align: start;
    }
    .blog-contenido aside{
        flex: 1.4;
        padding: 0 0 0 3rem;
    }
    .blog-texto{
        text-align: justify;
        padding:0 4rem 0 0 ;
    }
    .entrada a{
      margin: 0;
    }
}

/*contenedor-entrada de blog*/
.entrada-texto{
    padding: 0 3rem;
    text-align: justify;
}
@media(min-width: 768px){ 
    .contenedor-entrada{
        max-width: 60rem;
        margin: 0 auto;
    }
    .entrada-articulo{
        display: flex;
        flex-direction: column;
    }
    .entrada-texto{
        padding: unset;
    }
}

/*GALERIA*/
.galeria-img ul{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    list-style: none;
    padding-left: 0;
    margin: 0 0;
    gap: 2rem;
}
.galeria-img img{
    width: 100%;
    height: 26rem;
    object-fit: cover;
}

@media(min-width: 768px){ 
    .galeria-img ul{
        grid-template-columns:repeat(3,1fr);
    }
}

/*Formulario*/
.contacto-formulario{
    max-width: 60rem;
    margin: 0 auto;
}

fieldset{
    margin: 0;
    padding-left: .8rem;
    padding-right:.8rem ;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    padding-top: 4rem;
}

.contacto-formulario legend{
    text-align: center;
    background-color: #005485;
    color: white;
    font-weight: 900;
    width: 100%;
     text-transform: uppercase;
  }

.campo,.campo2{
    display: grid;
    grid-template-columns: 1fr 3fr;
    margin-bottom: 2rem;
}

.campo input,
.campo textarea,
.campo select{
     border-color: #e1e1e1;
     border-style: solid ;
     border-radius:.4rem;
}

.campo2 input{
    width: 10rem;
}

.contacto-formulario button{
    border: none;
    width: 20rem;
    width: 100%;
}
@media(min-width: 768px){ 
    .contacto-formulario button{
        width: auto;
    } 
}