/* asd {
    color : #1A1A1B
            #333F44
            #37AA9C
            #94F3E4
} */

/* GLOBALES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} 

/*     ETIQUETAS      */
html {
    font-size: 62.5%;
} 

img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
}


body {
    font-family: 'Roboto', sans-serif;
    background-color: #333F44;
    color:#1A1A1B;
}

header {
    background-color: #1A1A1B;
    color: #37AA9C;
    display: flex;
    grid-area: header;
    justify-content: center;
    align-items: center;
    text-align: center;
}

header h1 {
    font-size: 10rem;
}

nav {
    background-color: #ffffff;
    height: 1fr;
    position: sticky;
    top: 0%;    
}

headerPages{
    position: relative;

}

aside {
    background-color: #94F3E4;
    grid-area: aside;
    ;
}

aside p {
    margin: 3rem;
    font-size: 3rem;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}


h2 {
    color: #37AA9C;
}

footer {
    background-color: #1A1A1B;
    height: 34rem;
    color: #94F3E4;
    grid-area: footer;
}


/* ID */
#home{
    display: grid;
    grid-template-areas: 
        "header header header"
        "positionSticky caja1 aside"
        "positionSticky caja2 caja2"
        "footer footer footer";
    grid-template-columns: 0.3fr 3fr 0.6fr;
    grid-template-rows: 0.3fr 3fr 3.5fr 0.4fr;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem; 
}

#positionSticky{
    grid-area: positionSticky;
    background-color: #ffffff;
}

#caja1 {
    background-color: #ffffff;
    grid-area: caja1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#caja1 h2 {
    font-size: 3rem;
}



#caja2 {
    grid-area: caja2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* #caja2 img {
    width: 70rem;
    margin-top: 5rem;
    margin-bottom: 5rem;
} */

#caja2 h2 {
    font-size: 3rem;
    margin: 2rem;
}

/* #caja2 p {
    font-size: 2.5rem;
    margin: 2rem;
} */

#nosotros{
    display: grid;
    grid-template-areas: 
    "logo logo"
    "texto1 texto1"
    "foto1 texto2"
    "texto3 foto2"
    "texto4 texto4";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: .5fr .4fr 1fr 1fr .5fr;
grid-column-gap: 1rem;
grid-row-gap: 1rem; 

}

#logo {
    grid-area: logo;
    display: flex;
    justify-self: center;
    margin: 5rem;
}

#logo img {
    border-radius: 50%;
    max-width: 40vw;
    max-height: 40vh;
}


#texto1 {
    grid-area: texto1;
    text-align: center;
    margin-bottom: 15rem;

}

#foto1 {
    grid-area: foto1;
}

#texto2 {
    grid-area: texto2;
    text-align: center;
    align-self: center;
}

#texto3 {
    grid-area: texto3;
    text-align: center;
    align-self: center;

}

#foto2 {
    grid-area: foto2;
}

#texto4 {
    grid-area: texto4;
    text-align: center;
    justify-self: center;
    align-self: center;
    margin-top: 15rem;


}

/* CLASES */
.logoheader {
    max-height: 10em;
}

.logoheaderPages{
    max-width: 10rem;
}

.menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 88vh;
    justify-content:space-around;
} 

.menu li {
    color: #ffffff;
    font-weight: 900;
    margin: 5rem .5rem 5em .5rem;
}

.menu a {
    color: #37AA9C;
    background-color: #333F44;
    border-radius: 1rem;
    padding: 1rem;
    border:solid .3rem #1A1A1B;

}

.menuPages{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    padding: 1rem;
}

.menuPages a {
    font-size: 1.5rem;
    color: #37AA9C;
    background-color: #333F44;
    border-radius: 1rem;
    padding: 1rem;
    border:solid .3rem #1A1A1B;
}

.since{
    margin: 20rem 10rem;
    font-size: 3rem;
    box-shadow: 10px 15px 6px rgba(0, 0, 0, 0.4);
    border: 4px solid black;
    border-radius: 1.5rem;
    padding: 1rem;
    color: rgb(0, 0, 0);
}

.cajaDiferencia{
    display: flex;
    border:solid 1rem #94F3E4;
    margin: 5rem;
    
}

.cajasDife{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 3rem;
}

.difeTitulos{
    font-size: 4rem;
    margin: 1rem;
    color: #12130b;
    
}

.difeTextos{
    color: #cccccc;
    font-size: 3rem;
    margin: 3rem;

}

.difeTextoPrincipal{
    margin: 7rem;
    font-size: 3rem;
    text-align: center;
    color: #ccc;
}
.resaltada{
    font-size: 3.1rem;
}

/* error por que tiene css el h2 mas arriba. arreglar */
.difeTituloh2{
    font-size: 5rem !important;
    margin-top: 9rem !important;
}

.textoIntermedioCaja2{
    font-size: 4rem;
    margin: 10rem;
    text-align: center;
    font-weight: bold;
    
}

.espacio{
    margin: 9rem 0rem 9rem 0rem;
}

.espacio2{
    margin-top: 9rem;
}

.botonLateral{
    padding: 1rem;
    border-radius: 2rem;
    font-weight: bold;
    border: .2rem solid ;
}

.botonLateral:hover{
    background-color: #333;
    color: #37AA9C;
}

.botonLateral:active{
    transform: translate(.5rem, .5rem);
}

.fotoCaja1{
    max-width: 60%;
}


.fotoCaja2{
    max-width: 60%;

}

.imgCaja{
    margin: 0rem;
}

.textoCaja1{
    font-size: 3rem ;
    margin: 8rem 8rem 8rem 8rem;
    text-align: center;
}




.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    margin: 5rem;
}

.grid-item {
    background-color: #ccc; /* Cambia este color a tu gusto */
    border: 0.5rem solid #333; /* Cambia este color a tu gusto */
    text-align: center;
    display: flex;
    align-items: center;
}

.grid-item img {
    width: 100;
    height: 100;
    object-fit: cover;
}



.iframeNegocio{
    display: flex;
    align-items: center;
    margin: 5rem 10rem 20rem 10rem;
    text-align: center;
    border: solid 1rem #37AA9C;
    padding: 5rem;
}

.textoIframe{
    font-size: 4rem;
    margin: 1rem;
    font-weight: bold;
}



/* .botonNegocios{
    padding: 6rem 12rem 6rem 12rem;
    text-align: center;
    border: solid 1rem #12130b;
    border-radius: 10rem;
    font-size: 3rem;
    color: #37AA9C;
    background-color: #333;
} */


.botonNegocios {
    padding: 2rem 4rem;
    background-color: #5e6264;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s, transform 0.3s;
    margin-top: 10rem;
}

.botonNegocios:active {
box-shadow: none;
transform: translateY(2rem);
}

.botonNegocios:hover {
    transform: translate(.5rem, -.2rem);
    background-color: #37AA9C;
    color: #333F44;
}

.cajaBotonNegocios{
    display: flex;
    justify-content: center;
}


.botonMail{
    color: #12130b;
}

.botonMail:hover{
    color: #37AA9C;
}

.redes img {
    width: 4rem;
}

.redes p {
    text-align: center;
    font-size: 2rem;
    margin: 2rem;
    letter-spacing: 1rem;
}
.redes li {
    margin: 4rem;
}

.redesflex {
    display: flex;
    flex-direction: col;
    flex-wrap: wrap;
    justify-content: space-around;
}

.cajafooter{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    background-color: #1A1A1B;
}

.textofooter {
    width: 33%;
    font-size: 1.7rem;
}

.textofooter p {
    margin: 3rem;
}

.logofooter {
    width: 33%;
    text-align: center;

}

.linksfooter {
    width: 33%;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

.linksfooter a {
    text-decoration: none;
    color: #94F3E4;
    font-size: 2rem;
    text-align: center;
}

.logofooter img {
    width: 15rem;
    margin: 1rem;
    border-radius: .5rem;
    padding: 1rem;
    background-color: #ffffff;
}

.derechos {
    background-color: #94F3E4;
    color: #1A1A1B;
    font-weight: 900;
    padding: 1rem;
    text-align: center;
}
.center {
    text-align: center;
}

/* menuanimado:hover {
    transform: translate(10px, 20px);  
} */

.menuanimado {
    transition: all .3s;}

.menuanimado:hover {
    transform: translate(.5rem, -.2rem);
    background-color: #37AA9C;
    color: #333F44;
}

.menuanimado:focus {
    transform: translate(.5rem, -.2rem);
    background-color: #ffffff;
    color: #37AA9C;
}

@media screen and (max-width: 768px) {
    body {
        font-family: 'Roboto', sans-serif;
        background-color: #333F44;
        color:#1A1A1B;
        display: grid;
        grid-template-areas: 
            "header header header"
            "positionSticky caja1 caja1"
            "positionSticky caja2 caja2"
            "aside aside aside"
            "footer footer footer";
        grid-template-columns: 0.3fr 3fr 0.6fr;
        grid-template-rows: .3fr 1fr .7fr 1fr;
        grid-column-gap: 1rem;
        grid-row-gap: 1rem; 
    }

    header h1 {
    font-size: 8rem;
    margin: 3rem;}
}

@media screen and (max-width: 500px) {
    body {
        grid-template-rows: .2fr 1fr .7fr 1fr;
    }
    
    header h1 {
        font-size: 5rem;
    }
}


/* CONTACTO */

.inputForm{
    text-align: center;
    border-radius: 3rem;
    margin: .6rem;
    width: 33vw;
    font-size: 2.5rem;
}

.formulario{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
    text-align: center;
    padding: 5rem;
    border: solid 3rem #12130b;
    border-radius: 10rem;
    background-color: #ccc;
}

.botonForm{
    border-radius: 2rem;
    padding: 1rem;
    font-size: 2rem;
    width: 16.5vw;
}

.cajaForm{
    display: flex;
    justify-content: center;
}

.legendForm{
    font-size: 4.5rem;
    font-weight: bold;
}

.tituloContacto{
    font-size: 6rem;
    text-align: center;
    margin: 5rem;
}

.textoContacto{
    font-size: 3rem;
    text-align: center;
    margin: 5rem;
    color: #12130b;
}

.imagenWhatsApp{
    max-width: 30%;
    margin: 0rem 5rem 5rem 5rem;
}

.imagenWhatsApp:hover{
    transform: translate(.5rem, -.2rem);
}

.cajaWhatsApp{
    text-align: center;
}

.cajaFotoCamionetas{
    display: block;
    text-align: center;
}

.fotoCamionetas{
    max-width: 40%;
    margin: 5rem;
    border-radius: 2rem;
}

.radioForm{
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 2rem;
    margin: 2rem;

}

.radioInput2{
    margin-left: 3rem;
    font-size: 2rem;
}

.tituloFormulario{
    color: #12130b;
    font-size: 4rem;
    margin-bottom: 4rem;
}

.pAyudante{
    font-size: 2rem;
    margin: 2rem;
}

.fechaForm{
    margin: 0rem 2rem 4rem 2rem;
}

/* NOSOTROS */

.textoNosotros{
    font-size: 4rem ;
    color: #ccc;
    margin: 5rem ;
}

.sectionNosotros{
    margin: 5rem;
}

.fotoFinal{
    max-width: 80vw;
    
}

.cajaFotoFinal{
    text-align: center;
    margin: 5rem;
}

.botonPresupuesto{
    border-radius: 50%;
    max-width: 20vw;
    margin:20rem 10rem 10rem 10rem;
}


/* SERVICIOS */
.textoServicios{
    font-size: 3rem;
    text-align: center;
    margin: 5rem;
    color: #ccc;
}

.tituloServicios{
    font-size: 6rem;
    text-align: center;
    margin: 5rem;
    font-weight: 900;
}

.h2Servicios{
    color: #37AA9C;
    font-size: 3rem;
    text-align: center;
    margin: 5rem 3rem 0rem 3rem;
    font-weight: 800;
}

.portadaImgServicios{
    max-width: 70vw;
    margin: 5rem;
    border-radius: 1rem;
}

.cajaPortadaServicios{
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    margin: 2rem;
}

.folletoImgServicios{
    max-width: 50vw;
    margin: 5rem;
}

.logoTextoServicios{
    max-width: 20vw;
    border-radius: 2rem;
    margin: 3rem;
}