*{
padding:0;
margin:0;
}

:root{
 --espacio:1.5rem;
}

header{
height:10rem;
display:flex;
flex-direction:row;
justify-content: space-between;
}

body{
font-size:20px;
}

header .logo{
height:10rem;
width:10rem;
padding-left:var(--espacio);
}

header nav{
padding-right:var(--espacio);
align-self: center;
display:grid;
align-content:center;
}

header nav a{
text-decoration:none;
color: #fff;
font-family:sans-serif;
margin:.5rem;
}

.section1{
min-height:100vh;
background:url(img/fondo.jpeg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
display:grid;
grid-template-columns:auto;
grid-template-rows:10rem 1fr;
}

.sub-section1{
display:grid;
align-content: center;
gap:.6rem;
padding-bottom:.3rem;
padding-left:var(--espacio);
}

strong{
font-weight:normal;
}

.sub-section1 h1{
font-size:3rem;
font-family:"Pathway Gothic One", sans-serif;
line-height:1.5rem;
color:#fff;
margin:.3rem;
}

.sub-section1 p{
font-weight:400;
font-family:sans-serif;
width:80vw;
color: #fff;
margin:.3rem;
}

.sub-section1 a{
height:2rem;
width:15rem;
border:none;
font-size:1rem;
font-family:sans-serif;
cursor:pointer;
display:grid;
place-content:center;
color: #fff;
background:rgba(0, 0, 0, 25%);
text-decoration:none;
border:.1rem solid #fff;
margin:.3rem;
}

.section2{
min-height:1rem;
background:url(img/img1.png);
display:grid;
place-content:center;
background-repeat:no-repeat;
background-position:center center;
padding:1rem 0 1rem 0;
}

.section2 p{
width:90vw;
color:#fff;
font-family:sans-serif;
text-align:center;
}

.section3{
min-height:1rem;
display:flex;
justify-content:center;
flex-wrap: wrap;
box-sizing: border-box;
background:#E0D8C5;
}     

.section3 h3{
font-size:1.7rem;
font-family: sans-serif;
flex-basis:100vw;
text-align:center;
margin:1.5rem;
}

.section3 article{
min-height:20rem;
width:17rem;
margin:var(--espacio);
display:grid;
grid-template-rows:auto auto auto;
justify-content: center;
}

.section3 .caja-img{
height:10rem;
width:15rem;
justify-self: start;
margin:0 0 .7rem .5rem;
background:#fff;
}

.section3 article .caja-img img{
height:100%;
width:100%;
}

.section3 article b{
margin:0 0 1.3rem .5rem;
color:#000;
}

.section3 article p{
width:90%;
font-family:sans-serif;
text-align:start;
font-size:1rem;
justify-self: start;
align-self: start;
margin:0 0 .7rem .5rem;
}

.section3 article a{
height:2rem;
width:10rem;
color: #000;
text-decoration:none;
font-family:sans-serif;
cursor:pointer;
display:grid;
align-self:end;
place-content: center;
margin:0 0 .7rem .5rem;
border:.1rem solid #000;
}

.section4{
min-height:10rem;
display:grid;
place-content:center;
padding:3rem;
box-sizing: border-box;
padding:3rem 0 3rem 0;
background:#f7f7f7;
}

.section4 form{
height:30rem;
width:60rem;
display:flex;
flex-direction: column;
align-content: center;
justify-content:center;
padding-bottom:.6rem;
box-sizing: border-box;
padding-left:5%;
border:.1rem solid #000;
}

form b{
font-size:2rem;
font-family:sans-serif;
align-self: center;
}

form img{
height:1.5rem;
width: 1.5rem;
}

form b,.nombre,.mail, #mensaje{
margin-bottom:1rem;
}



input, #mensaje{
height:2.5rem;
width:90%;
border:none;
border-bottom:.1rem solid #000;
outline:none;
background:transparent;
color:#000;
}

input::placeholder, #mensaje::placeholder{
font-family:sans-serif;
font-size:1.1rem;
color:#000;
}

.boton-form{
width:45%;
font-family:sans-serif;
border:.1rem solid #000;
cursor:pointer;
font-size: 1rem;
transition:0.3s;
}

.section5{
padding:var(--espacio) 0 var(--espacio) 0;
display:grid;
place-content:center;
background:#E0D8C5;
}

.sub-section5{
display:flex;
flex-direction:row;
justify-content:center;
flex-wrap: wrap;
gap:1.5rem;
}

.sub-section5 h4{
font-family:sans-serif;
flex-basis:100vw;
margin:0 0 0 var(--espacio);
}

.sub-section5 .lista{
display:flex;
flex-direction:row;
justify-content:center;
margin:2rem 0 2rem 0;
padding-left:var(--espacio);
flex-basis:100vw;
}

.sub-section5 .lista div{
display: flex;
align-content: center;
margin:0 1rem 0 0;

}

.sub-section5 .lista div img{
height:2rem;
width:2rem;
}

.sub-section5 .lista div b{
font-size:1rem;
font-family:sans-serif;
margin-left:.5rem;
align-content:center;
}

.sub-section5 img{
height:18rem;
width:27rem;
}

.contenedor-porque-elegirnos{
width:27rem;
display:flex;
flex-direction:column;
justify-content:center;
}

.contenedor-porque-elegirnos p{
width:100%;
font-family:sans-serif;
margin-bottom:.5rem;
}

.contenedor-porque-elegirnos a{
height:2rem;
width:15rem;
border:none;
font-size:1rem;
font-family:sans-serif;
cursor:pointer;
display:grid;
place-content:center;
color: #000;
text-decoration:none;
border:.1rem solid #000; 
margin-bottom:1.5rem;
}

footer{
min-height:1rem;
background:#202020;
display:flex;
flex-direction:row;
justify-content:center;
gap: 2rem;
padding:2rem 0 2rem 0;
box-sizing: border-box;
}

footer a{
height:4rem;
width:4rem;
display:grid;
place-content:center;
border-radius:2rem;
cursor:pointer;
background:#c49b5a;
}

footer img{
height:2.5rem;
width:2.5rem;
}



@media screen and (max-width:1000px){
        .section4 form{
        height:22rem;
        width:42rem;
        }
}

@media screen and (max-width:950px){
        .section img{
        height:15rem;
        width:15rem;
        }

        .section ul, li{
        font-size:1rem;
        }

        .section5 img{
        height:11rem;
        width:18rem;
        }

        .contenedor-porque-elegirnos{
        width:18rem;
        align-self: center;
        }

        .contenedor-porque-elegirnos p{
        font-size:1rem;
        }

        .contenedor-porque-elegirnos a{
        height:1.5rem;
        width:10rem;
        font-size:.9rem;
        font-family:sans-serif;
        margin-
        }

        .section3 h3{
        font-size:1.5rem;
        }
}


@media screen and (max-width:900px){
        .sub-section1 h1{
        font-size:2.2rem;
        margin:.1rem;
        }
                
        .sub-section1 p{
        font-size:.9rem;
        margin:.1rem;
        }
                
        .sub-section1 a{
        height:1.5rem;
        margin:.1rem;
        font-size:.9rem;
        }
}


@media screen and (max-width:800px){
        
        header nav a{
        font-size:.9rem;
        }

        .section4 form img{
        height:1rem;
        width:1rem;
        }

       .section5 img{
        margin:1rem;
        }

}




@media screen and (max-width:750px){
        .section1{
        min-height:70vh;
        }

        .sub-section1 h1{
        font-size:1.8rem;
        margin:.1rem;
        }
                
        .sub-section1 p{
        font-size:.8rem;
        margin:.1rem;
        }
                
        .sub-section1 a{
        height:1.2rem;
        margin:.1rem;
        font-size:.9rem;
        }

        .section2 p{
        font-size:.8rem;
        }

        .section4 form{
        height:19rem;
        width:35rem;
        }

        .section5 .sub-section5 .lista div{
        margin-top:.5rem;
        }

         
        .section5 .sub-section5 .lista div img{
        height:1.4rem;
        width:1.4rem;
        }

        .sub-section5 .lista div{
        margin:0 .5rem 0 0;
        }
    
        .section5 .sub-section5 .lista div b{
        font-size:.7rem;
        }
    }



    @media screen and (max-width:650px){

        .section3 article{
        margin:1.5rem 0 1.5rem 0;
        }

        .section4 form{
        height:16rem;
        width:28rem;
        }
        
    }


    @media screen and (max-width:550px){
        :root{
        --espacio:.7rem;
        }

        header{
        height:6rem;
        }
                
        header .logo{
        height:6rem;
        width:6rem;
        }

       .sub-section1 h1{
        font-size:1.6rem;
        margin:.1rem;
        }
        
        .sub-section1 p{
        font-size:.8rem;
        margin:.1rem;
        }
        
        .sub-section1 a{
        height:1.5rem;
        margin:.1rem;
        font-size:.8rem;
        }

        .section2 p{
        font-size:.9rem;
        }

        .section3 article{
        min-height:17rem;
        width:15rem;
        }

        .section3 article .caja-img{
        height:8rem;
        width:13rem;
        }

        .section3 article b{
        font-size:1rem;
        }

        .section3 article p{
        font-size:.8rem;
        }

        .section3 article a{
        height:1.7rem;
        width:8rem;
        }

        .section4{
        padding:3rem 0 3rem 0;
        }

        .section4 form{
        height:15.4rem;
        width:25rem;
        }

        .section4 form b{
        font-size:1.1rem;
        }

        .section4 form label{
        font-size:1rem;
        }

        .section4 form input{
        height:1.6rem;
        }

        .section4 form #mensaje{
        height:2rem;
        }

        .sub-section5 .lista div{
        margin:0 .2rem 0 0;
        }

        footer a{
        height:3rem;
        width:3rem;
        }

        footer a img{
        height:1.5rem;
        width:1.5rem;
        }
}

@media screen and (max-width:410px){
        .section4 form{
        height:14.4rem;
        width:20rem;
        }
        
        .sub-section5 .lista div b{
        margin-left:.2rem;
        font-size:.8rem;
        margin-left:0;
        }
}