/*--1.---GENERALES-----*/

    /*--1.1----Colores------*/

/*--2.---BANNER-----*/

/*--3.---DESCRIPCION Y SERVICIOS-----*/

/*--4.---PROYECTOS-----*/

/*--5.--FORMULARIO-----*/
    /*--5.1.---Botones-----*/

/*--6.---FOOTER-----*/

/*--7.---MEDIA QUERY-----*/

    /*--7.1.---Banner-----*/
    /*--7.2.---Descripcion-----*/
    /*--7.3.---Servicios-----*/
    /*--7.4.---Proyectos-----*/







    


/*--1.---GENERALES-----*/

:root {
    /*--1.1----Colores------*/

    --Primario: #e3e3e3;
    --Primario2: #242424;
    /* --Secundario: #921414; */
    --Secundario: #ffc400;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-size: 62.5%;
    overflow-x: hidden;
    font-family: sans-serif;
}

html p {
    margin: 2.4rem;
    line-height: 2.6rem; 
}

body {
    font-size: 2.2rem;
    line-height: 4.4rem;
    overflow-x: hidden;
    background-color: var(--Primario);
    color:var(--Primario2);
}    


.none {
    display: none;
}

hr {
    width: 75%;
    max-width: 75rem;
    border: 0.1rem solid var(--Secundario);
}
h1 {
    font-size: 3.25rem;
}
h1 b {
    text-decoration: underline;
    font-size: 2.75rem;
}
h2 {
    font-size: 2.25rem;
}
h1,
h2,
p,
b {
    font-family: "Special Gothic", sans-serif;
    font-weight: 500;
}
b {
    font-family: 'Special Gothic', sans-serif;
    font-weight: bolder;
}
p {
    font-size: 1.75rem;
}

/*--2.---BANNER-----*/

header {
    margin: 0 0 0 0;
    padding: 0.25rem 0 0.75rem 0;
    text-align: center;
    background-color: var(--Secundario);
}
.banner img {
    max-height: 10rem;
}
.banner a {
    text-decoration: none;
    color: var(--Primario2);
}
.banner p {
    /* border: 1px solid red; */
    padding: 0 0;
    margin: 1rem;
    line-height: 1.5rem;
    font-size: 1.75rem;
    color: var(--Primario2);
    /* border: 1px solid red; */
}
.instagram {
    max-width: 2.25rem;
    margin: 0.25rem;
    transform: translateY(1rem);
}
/*--3.---DESCRIPCION Y SERVICIOS-----*/

.descripcion {
    margin: auto;
    max-width: 97%;
}
.txtdescripcion {
    margin: auto;
    max-width: 95%;
}
.descripcion h1,
.descripcion h2 {
    margin: 2.5rem auto 1.25rem auto;
    max-width: 30ch;
    text-align: center;
    line-height: 3rem;
}
.descripcion h2 {
    line-height: 2.75rem;
}
.video {
    margin-top: 2rem;
    text-align: center;
}
.video video {
    width: 100%;
    max-width: 100rem;
    border-radius: 1.75rem;
    border:1px solid var(--Primario2);
}
.descripcion ul {
    padding: 0 1rem 0 2rem;
}
.descripcion li {
    list-style: none;  
    margin: auto;
}
.descripcion p {
    line-height: 2.32rem;
    margin: 0.25rem auto 1.25rem auto;
}
.descripcion p,
.descripcion li {
    max-width: 67ch;
}

.boton {
    margin-top: 2.75rem;
}
.boton a {
    text-decoration: none;
    color: var(--Primario);
}
.boton p {
    margin: auto;
    padding: 1rem 2rem;
    max-width: 15rem;
    background-color: var(--Secundario);
    border-radius: 1.25rem;
    color: var(--Primario2);
    text-align: center;
}


.servicios {
    margin: 5rem auto;
    padding: 0 0 0 4rem;
    max-width: 80%;
}
.serv {
    position: relative;
    max-width: 45ch;
    margin: auto;
}
.serv h2 {
    font-size: 2.75rem;
    font-weight: 100;
}

/*--4.---PROYECTOS-----*/

.proyectos {
    margin-top: 2.25rem;
}
.proyectos h1 {
    margin: auto;
    text-align: center;
    max-width: 80%;
}
.slider {
    text-align: center;
}

.galeria {
    margin: 1rem auto;
    max-width: 100rem;
    columns: 3 20rem;
    column-gap: 1rem;
}
.slider img {
    width: 100%;
}


/*--5.--FORMULARIO-----*/

.formulario {
    background-color: var(--Negro);
    margin: 2rem auto 0 auto;
    width: 90%;
    max-width: 70rem;
    padding: 1rem;
    box-shadow: 1px 1px 10px var(--Negro);
    background-color: var(--Primario);   
  }

.formulario h2 {
    color: var(--Naranja);
    border-bottom: 0.3rem solid var(--Secundario);
}

.campo {
    display: flex;
    margin-bottom: 1rem;
  }  
  
.campo__label {
    flex: 0 0 8rem;
    text-align: right;
    padding-right: 1rem;
    color: var(--Primario2);
    font-size: 1.75rem;
  }
  
.campo__field {
    flex: 1;
    border: 1px solid var(--Secundario);
  }
  
.campo__field--textarea {
    height: 20rem;
  }

#boton_submit {
    color: var(--Primario2);
    font-size: 2.75rem;
    margin-left: auto;
    border-radius: 1rem;
    margin-top: 1.4rem;
    transition: 0.3s;
    background-color: var(--Primario);
    border: 0.25rem solid var(--Secundario);
}

#boton_submit:hover {
    box-shadow: 1px 1px 10px var(--Primario2);
    transition: 0.3s;
}
    /*--5.1.---Botones-----*/

.botoncontacto {
    max-width: 70rem;
    margin: auto;
}
.botontlf,
.botonwhats {
    width: 48%;
    display: inline-flex;
}
.botontlf img,
.botonwhats img {
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    margin: 0.75rem auto 0 auto;
}
.botontlf p,
.botonwhats p {
    display: inline;
    font-size: 2rem;
    margin: 0.5rem;
}
.botontlf a,
.botonwhats a {
    padding: 0rem;
    margin: auto;
    text-decoration: none;
    line-height: 0;
    border-radius: 1rem;
    color: #242424;
}
.botontlf a {
    border: 0.25rem solid var(--Primario2);
    
}
.botonwhats a {
    /* background-color: #25d366; */
    border: 0.25rem solid var(--Primario2);
}
.botontlf a:hover,
.botonwhats a:hover {
   box-shadow: 1px 1px 10px var(--Primario2);
}


/*--6.---FOOTER-----*/

footer {
    margin-top: 4rem;
    padding: 4rem 1rem 7rem 1rem;
    text-align: center;
    color: var(--Primario2);
    background-color: var(--Secundario);
}
footer a {
    text-decoration: none;
    color: var(--Primario2);
}
footer p {
    line-height: 1.5rem;
    margin: 1rem;
}
footer img {
    max-height: 7.5rem;
    margin-top: 0.75rem;
}
/*--7.---MEDIA QUERY-----*/

    /*--7.1.---Banner-----*/

@media (min-width: 700px) {
        .banner {
            display: flex;
            max-width: 89ch;
            margin: auto;
        }
        .imgbanner {
            width: 30%;
            margin-top: 1rem;
        }
        .txtbanner {
            width: 60%;
            max-width: 40rem;
            text-align: left;
            margin-left: auto;
            margin-top: 2rem;
        }
    }
    /*--7.2.---Descripcion-----*/
    /*--7.3.---Servicios-----*/
    /*--7.4.---Proyectos-----*/