* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'open sans', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* NAVEGADOR */
nav .nav-web {
    gap: 60px;
    top: 20px;
    left: 0px;
    right: 0px;
    width: 764px;
    height: auto;
    margin: auto;
    display: flex;
    position: fixed;
    align-items: center;
    flex-shrink: 0;
    border-color: rgba(255, 255, 255, 0.2);
    border-style: solid;
    border-width: 0.5px;
    border-radius: 3px;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.492);
    backdrop-filter: blur(10px);
    z-index: 9999;
  }

.nav-web a {
    color: rgba(14, 14, 14, 1);;
    font-size: 14px;
    font-weight: lighter;
    text-decoration: none;
}

.nav-web a:hover {
    font-weight: normal;
}

.nav-web img {
    width: auto;
    height: 50px;
    margin: 5px 0;
}

nav .nav-mobile a img {
    width: auto;
    height: 44px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.nav-mobile {
    display: none;
}

.vacio-nav-mobile {
    width: 60px;
    height: 64px;
}



/* INICIO */
.seccion-inicio {
    height: 740px;
    width: 100%;
}

.inicio-contacto {
    gap: 15px;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
    padding: 0px 200px;
    text-align: center;
    z-index: 10;
}

.inicio-contacto h1 {
    font-size: 50px;
    font-weight: 400;
}

.inicio-contacto p {
    font-size: 16px;
    font-weight: 300;
}

.button {
    color: #ffffff;  
    padding: 15px 25px;
    cursor: pointer;
    font-style: normal;
    transition: 0.3s;
    font-family: "Open Sans";
    font-weight: 400;
    border-width: 0px;
    border-radius: 3px;
    text-decoration: none;
    background-color: rgba(0, 69, 136, 1);
}

.button:hover {
    background-color: rgb(1, 47, 93);

}

/* BANNER IMAGENES */
.container {
    overflow: hidden;
}
  
.wrapper {
    width: 100%;
    display: flex;
    animation: slide 16s infinite;
}
  
.wrapper img {
    width: 100%;
}
  
@keyframes slide {
    0%{
    transform: translateX(0);
    }

    33%{
    transform: translateX(0);
    }

    34%{
    transform: translateX(-100%);
    }

    66%{
    transform: translateX(-100%);
    }

    67%{
    transform: translateX(-200%);
    }

    100%{
    transform: translateX(-200%);
    }
    
    /*
    0%{
    transform: translateX(0);
    }

    25%{
    transform: translateX(0);
    }

    30%{
    transform: translateX(-100%);
    }

    50%{
    transform: translateX(-100%);
    }

    55%{
    transform: translateX(-200%);
    }

    75%{
    transform: translateX(-200%);
    }

    80%{
    transform: translateX(-300%);
    }

    100%{
    transform: translateX(-300%);
    }
    */
}



/* DATOS PUNTEO */
.datos-punteo {
    gap: 64px;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 240px 130px;
}

.datos-punteo h1 {
    color: rgba(14, 14, 14, 1);
    font-size: 36px;
    font-weight: normal;
    text-align: center;
}

.punteo-areas {
    gap: 111.49143981933594px;
    display: flex;
    align-self: stretch;
    align-items: flex-start;
    flex-shrink: 0;
    justify-content: center;
}

.punteo-item {
  gap: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.punteo-areas h3 {
    color: rgba(14, 14, 14, 1);
    font-weight: normal;
    font-size: 21px;
}

.punteo-areas p {
    color: rgba(14, 14, 14, 1);
    font-size: 18px;
    font-weight: lighter;
}

.punteo-areas img {
    width: 88px;
    height: 84px;
}

/* QUIENES SOMOS INFO BREVE INCICIO */
.quienes-somos-inicio {
    background-image: url(img/quienes-somos-inicio.jpg);
    background-position: center;
    background-repeat: no-repeat; 
    background-size: cover;
    height: 740px;
}

.quienes-somos-inicio div {
    gap: 32px;
    width: 496px;
    height: 100%;
    margin: 0px 96px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
}

.quienes-somos-inicio img {
    height: 775px;
    width: 100%;

}

.quienes-somos-inicio h2 {
    color: #ffffff;
    font-size: 25px;
    font-weight: normal;
}

.quienes-somos-inicio p {
    color: #ffffff;
    font-size: 16px;
    font-weight: lighter;
}

/* GALERIA DE PROYECTOS */
#ing:checked ~ #imagenes .cons, #ing:checked ~ #imagenes .geren {
display: none;
}

#ing:checked ~ .titulo-ing, #geren:checked ~ .titulo-geren, #cons:checked ~ .titulo-cons {
font-weight: 600;
}

#ing:checked ~ #ing label {
font-weight: bold;
}

#geren:checked ~ #imagenes .ing, #geren:checked ~ #imagenes .cons {
display: none;
}

#cons:checked ~ #imagenes .ing, #cons:checked ~ #imagenes .geren {
display: none;
}

.contenedor {
text-align: center;
font-family: 'open sans';
margin: 80px 0;
}

.contenedor h2 {
margin: 20px;
font-weight: normal;
}

.contenedor input{
margin: 10px;
}

.contenedor input[type=radio] {
display: none;
}

.contenedor label {
font-weight: lighter;
margin: 5px;
}

#imagenes {
display: flex;
gap: 23px;
margin: 23px;
overflow-x: auto;
}

#imagenes img {
height: 465px;
width: auto;
}

.pry {
position: relative;
width: 372px;
}

.img {
display: block;
width: 100%;
}

.texto {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
color: #fff;
font-family: 'open sans';
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s;
}

.texto:hover {
opacity: 1;
}

.texto--blur {
backdrop-filter: blur(10px);
}

.texto h1 {
font-weight: normal;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 36px;
margin-right: 36px;
}

.texto h5 {
font-weight: lighter;
margin: 5px;

}

.texto h2 {
font-weight: lighter;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 36px;
margin-right: 36px;
}

.texto p {
font-weight: lighter;
margin: 5px;
margin-left: 36px;
margin-right: 36px;
}

.titulo-geren:hover {
font-weight: 600;
}

.titulo-ing:hover {
font-weight: 600;
}

.titulo-cons:hover {
font-weight: 600;
}

/* CLIENTES */
.clientes {
    gap: 50px;
    width: 900;
    margin: 140px 160px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.clientes h2 {
    font-weight: normal;
}

.clientes div {
    display: flex;
    flex-wrap: wrap;
    gap: 62px;
    justify-content: center;
    align-items: center;
}

/* SECCION QUIENES SOMSOS */
.seccion-quienes-somos {
    background-color: rgba(14, 14, 14, 1);;
}

/* APERTURA */
.apertura-seccion {
    justify-content: center;
    background-image: url(img/apertura-quienes-somos.png);
    background-position: center;
    background-repeat: no-repeat; 
    background-size: cover;
    height: 740px;
}

.apertura-seccion h1 {
    font-weight: lighter;
    font-size: 50px;
    text-align: center;
    align-content: center;
    height: 100%;
    width: 100%;
}

/* QUIENES SOMOS */
.quienes-somos {
    display: flex;
    flex-direction: column;
    color: #fff;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 763;
    margin: 270px 270px;
    gap: 25px;
}

.quienes-somos h2 {
    font-size: 25px;
    font-weight: normal;
}

.quienes-somos p {
    font-size: 16px;
    font-weight: lighter;
}

.quienes-somos img {
    width: 160px;
    height: auto;
}

/* TRAYECTORIA */
.trayectoria {
    color: #fff;
    background-image: url(img/trayectoria.png);
    background-position: center;
    background-repeat: no-repeat; 
    background-size: cover;
    height: 740px;
}

.trayectoria div {
    gap: 32px;
    width: 496px;
    height: 100%;
    margin: 0px 96px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
}

.trayectoria h2 {
    color: #ffffff;
    font-size: 25px;
    font-weight: normal;
}

.trayectoria p {
    color: #ffffff;
    font-size: 16px;
    font-weight: lighter;
}

/* QUE HACEMOS */
.slider-q-h {
    background-color: #0e0e0eff;
    height: 750px;
}
  
.titulo-quehacemos {
    padding-top: 130px;
    color: rgba(119, 119, 119, 1);
    font-size: 25px;
    font-weight: normal;
    text-align: center;
}
  
#slider {
    margin: -90px auto;
    width: 800px;
    height: 450px;
    max-width: 100%;
    text-align: center;
    align-content: center;
}
  
#slider input[type=radio] {
    display: none;
}
  
#slider label {
    cursor: pointer;
    text-decoration: none;
}
  
#overflow {
    width: 100%;
    overflow: hidden;
}
  
#slide1:checked ~ #slides .inner {
    margin-left: 0;
}
#slide2:checked ~ #slides .inner {
    margin-left: -100%;
}
#slide3:checked ~ #slides .inner {
    margin-left: -200%;
}
  
#slides .inner {
    transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    width: 400%;
    height: 450px;
}
  
#slides .slide {
    width: 25%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
}
  
#slide-content {
    padding: 10px;
}
  
#controls {
    margin: -250px 0 0 0;
    width: 100%;
    height: 50px;
    z-index: 3;
    position: relative;
}
  
#controls label {
    transition: opacity 0.2s ease-out;
    display: none;
    width: 30px;
    height: 50px;
    opacity: .4;
}
  
#controls label:hover {
    opacity: 1;
}
  
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(1)
{
    background: url(img/iconos/flecha-izq.svg) no-repeat;
  
    background-size: contain;
  
    float: right;
    margin: 0 -50px 0 0;
    display: block;
}
  
#slide1:checked ~ #controls label:nth-last-child(1),
#slide2:checked ~ #controls label:nth-last-child(3),
#slide3:checked ~ #controls label:nth-last-child(2)
{
    background: url(img/iconos/flecha-der.svg) no-repeat;
    
    background-size: contain;
  
    float: left;
    margin: 0 0 0 -50px;
    display: block;
}
  
@media  screen and (max-width: 900px) {
    #slide1:checked ~ #controls label:nth-child(2),
    #slide2:checked ~ #controls label:nth-child(3),
    #slide3:checked ~ #controls label:nth-child(1),
    #slide1:checked ~ #controls label:nth-last-child(2),
    #slide2:checked ~ #controls label:nth-last-child(3),
    #slide3:checked ~ #controls label:nth-last-child(1)
    {
      margin: 0;
    }
}
  
  
  
.slide-ing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 100px;
    padding-right: 100px;
}
  
.slide-ing h1 {
    font-weight: 500;
    font-size: 40px;
}
  
.slide-ing p {
    font-weight: lighter;
    padding: 30px;
    text-align: center;
}
  
.slide-ing div {
    display: flex;
    gap: 15px;
    margin: 0 50px;
    flex-wrap: wrap;
    justify-content: center;
}
  
.slide-ing h5 {
    font-weight: lighter;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #fff;
}
  
  
.slide-cons {
    align-items: center;
    justify-content: center;
    padding-left: 100px;
    padding-right: 100px;
}
  
.slide-cons h1 {
    font-weight: 500;
    text-align: center;
    font-size: 40px;
}
  
.slide-cons p {
    font-weight: lighter;
    padding: 30px;
    text-align: center;
}
  
.slide-cons ul {
    font-weight: lighter;
    padding-left: 80px;
    padding-right: 80px;
    display: block;
    width: 100%;
    animation: none;
    text-align: left;
}
  
.slide-cons {
    height: 400px;
    align-content: center;
    justify-content: center;
}
  
  
.slide-geren {
    align-items: center;
    justify-content: center;
    padding-left: 100px;
    padding-right: 100px;
}
  
.slide-geren h1 {
    font-weight: 500;
    text-align: center;
    font-size: 40px;
}
  
.slide-geren p {
    font-weight: lighter;
    padding: 30px;
    padding-bottom: 0px;
    text-align: center;
}
  
.slide-geren {
    height: 400px;
    align-content: center;
    justify-content: center;
}




/* TRABAJA CON NOSOTROS */
.trabaja-con-nosotros {
    background-image: url(img/trabaja-con-nosotros.png);
    background-position: center;
    background-repeat: no-repeat; 
    background-size: cover;
    height: 740px;
}

.trabaja-texto {
    text-align: center;
    justify-content: center;
    align-content: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 0 350px;
}

.trabaja-texto h2 {
    font-size: 25px;
    font-weight: normal;
}

.trabaja-texto h3 {
    font-size: 20px;
    font-weight: lighter;
}

.trabaja-texto p {
    font-size: 16px;
    font-weight: normal;
}

.trabaja-texto button {
    width: 318px;
    align-self: center;
    font-size: 16px;
}


/* CONTACTO CON ECSA */
.formulario {
    width: 570px;
    left: 0px;
    margin-left: 96px;
    padding-top: 150px;
    padding-bottom: 150px;
    gap: 16px;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-self: flex-start;
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-start;
}

form {
    width: 100%;
}

.nombre-empresa, .email-telefono {
    display: flex;
    gap: 16px;}

.nombre-empresa div, .email-telefono div {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
}

.formulario div {
    margin: 5px 0;
}

.formulario h1 {
    font-size: 30px;
    font-weight: normal;
    width: 100%;
}

.nombre-empresa div, .email-telefono div, .telefono-input, .como-conocio, .consulta {
    display: flex;
    flex-direction: column;
    gap: 10px;

}

.nombre, .empresa, .email, .telefono {
    color: #191818;
    cursor: auto;
    padding: 0.5rem 1rem;
    border-color: #777777;
    border-width: 0.5px;
    border-radius: 4px;
    background-color: #fff;
    /* width: 277px;  */
}

.form-control {
    color: #191818;
    cursor: auto;
    padding: 0.5rem 1rem;
    border-color: #777777;
    border-width: 0.5px;
    border-radius: 4px;
    background-color: #fff;
}

.como-conocio {
    width: 100%;
}

.como-nos-conocio {
    color: #191818;
    cursor: auto;
    padding: 0.5rem 1rem;
    border-color: #777777;
    border-width: 0.5px;
    border-radius: 4px;
    background-color: #fff;
}

.consulta {
    width: 100%;
}

.consulta-caja {
    color: #191818;
    cursor: auto;
    padding: 0.5rem 1rem;
    border-color: #777777;
    border-width: 0.5px;
    border-radius: 4px;
    background-color: #fff;
    height: 190px;
}

.formulario label {
    font-size: 14px;
    font-weight: lighter;
}

.formulario button {
    font-size: 16px;
}

.contacto {
    height: 100%;
    background-image: url(img/contacto.png);
    background-position: right;
    background-repeat: no-repeat; 
    background-size:contain;
}

form .button {
    margin: 5px 0;
}

/* FOOTER */
footer {
    background-color: #0e0e0eff;
    color: #dcdcdc;
}

footer iframe {
    width: 100%;
    height: 350px;
    top: 0px;
}

.info-contacto {
    display: flex;
    padding-top: 120px;
    padding-left: 70px;
    padding-right: 70px;
    padding-bottom: 50px;
    gap: 40px;
    justify-content: center;
}

.info-contacto p {
    font-size: 14px;
    font-weight: lighter;
}

.columna-1, .columna-2, .columna-3 {
    display: flex;
    flex-direction: column;
    gap: 45px;
}

.columna-1, .columna-3 {
    width: 260px;
}

.columna-1 a {
    text-decoration: none;
    color: #fff;
}

.columna-1 a:hover {
    text-decoration: underline;
}

.columna-2 {
    width: 310px;
}

.columna-3 h4 {
    font-size: 20px;
    font-weight: normal;
}

.columna-1 div, .columna-2 div, .columna-3 div {
    display: flex;
    gap: 12px;
}

.redes-volver-inicio {
    display: flex;
    gap: 240px;
    justify-content: center;
    padding-top: 25px;
    padding-bottom: 80px;
}

.linkedin:hover {
    opacity: 70%;
}

.facebook:hover {
    opacity: 70%;
}

.flecha-arriba:hover {
    opacity: 70%;
}



/* AJUSTE PARA DISPOSITIVOS */

@media(max-width: 1920px) {
    .inicio-contacto {
        padding: 0px 470px;
    }

    .quienes-somos-inicio div {
        margin: 0px 176px;
    }

    .clientes {
        margin: 140px 300px;
    }

    .quienes-somos {
        margin: 270px 610px;
    }

    .trayectoria div {
        margin: 0px 176px;
    }

    .trabaja-texto {
        margin: 0 620px;
    }

    .formulario {
        margin-left: 176px;
    }
}

@media(max-width: 1500px) {
    .inicio-contacto {
        padding: 0px 400px;
    }
    
    .quienes-somos-inicio div {
        margin: 0px 126px;
    }

    .clientes {
        margin: 180px 230px;
    }

    .quienes-somos {
        margin: 270px 410px;
    }

    .trayectoria div {
        margin: 0px 126px;
    }

    .trabaja-texto {
        margin: 0px 430px;
    }

}

@media(max-width: 1300px) {
    .inicio-contacto {
        padding: 0px 340px;
        height: 100%;
    }

    .quienes-somos-inicio div {
        margin: 0px 96px;
    }

    .clientes {
        margin: 140px 120px;
    }

    .quienes-somos {
        margin: 270px 250px;
    }

    .trayectoria div {
        margin: 0px 96px;
    }

    .trabaja-texto {
        margin: 0 360px;
    }

    .formulario {
        margin-left: 96px;
    }

}


@media(max-width: 1200px) {
    .inicio-contacto {
        padding: 0px 300px;
        height: 100%;
    }

    .quienes-somos-inicio div {
        margin: 0px 96px;
    }

    .clientes {
        margin: 140px 120px;
    }

    .quienes-somos {
        margin: 270px 250px;
    }

    .trayectoria div {
        margin: 0px 96px;
    }

    .trabaja-texto {
        margin: 0 360px;
    }

    .formulario {
        margin-left: 96px;
    }

}

@media(max-width: 991px) {
    .inicio-contacto {
        padding: 130px 230px;
        height: 80%;
    }

    .clientes {
        margin: 140px 100px;
    }

    .quienes-somos {
        margin: 220px 200px;
    }

    .trabaja-texto {
        margin: 0 200px;
    }

    .formulario {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .info-contacto {
        gap: 20px;
    }

    .punteo-areas img {
        width: 80px;
        height: 76px;
    }

    .punteo-areas {
        gap: 100px;
    }
}


@media(max-width: 767px) {
    
    nav .nav-web {
        display: none;
    }
    

    .nav-mobile {
        display: flex;
        width: 100%;

        position: fixed;
        flex-shrink: 0;
        background-color: rgba(255, 255, 255, 0.492);
        backdrop-filter: blur(10px);
        z-index: 9999;

        justify-content: space-between;
    }

    .nav-mobile a {
        color: rgba(14, 14, 14, 1);;
        font-size: 14px;
        font-weight: lighter;
        text-decoration: none;
    }
    
    .nav-mobile a:hover {
        font-weight: normal;
    }

    .enlace img {
        justify-content: center;
    }

    .checkbtn {
        display: block;
        height: 20px;
        width: auto;
        float: left;
        line-height: 32.5px;
        margin-left: 40px;
        cursor: pointer;
    }

    .checkbtn img {
        width: auto;
        height: 20px;
        margin: 100% 0;
    }

    #check {
        display: none;
    }

    .nav-mobile ul {
        position: fixed;
        width: 100%;
        height: 200vh;
        background-color: rgba(255, 255, 255, 0.7);

        backdrop-filter: blur(10px);
        
        top: 64px;
        left: -100%;
        text-align: center;
        transition: all .3s;
    }

    .nav-mobile ul li {
        display: block;
        margin: 50px 0;
        line-height: 30px;
    }

    .nav-mobile ul li a {
        font-size: 20px;
    }

    #check:checked ~ ul {
        left:0;
    }

    /* 
    nav {
        gap: 50px;
        width: 650px;
    }

    nav a {
        font-size: 12px;
    }
    */


    .wrapper {
        width: 160%;
    }

    .inicio-contacto {
        padding: 0 160px;
        height: 95%;
    }

    .inicio-contacto h1 {
        font-size: 30px;
    }

    .inicio-contacto p {
        font-size: 14px;
    }

    .button {
        font-size: 12px;
    }

    .datos-punteo {
        margin: 150px 100px;
    }

    .datos-punteo h1 {
        font-size: 30px;
    }

    .punteo-areas img {
        width: 70px;
        height: 66px;
    }

    .punteo-areas {
        gap: 60px;
    }

    .punteo-areas p {
        font-size: 14px;
    }

    .quienes-somos-inicio {
        height: 600px;
    }

    .quienes-somos-inicio h2 {
        font-size: 22px;
    }

    .clientes {
        margin: 120px 80px;
    }

    .clientes div img {
        height: 60px;
    }

    .clientes div .siemens {
        height: 20px;
    }

    .clientes div .calsa {
        height: 40px;
    }

    .clientes div {
        gap: 40px;
    }

    .apertura-seccion h1 {
        font-size: 30px;
    }

    .apertura-seccion {
        height: 600px;
    }

    .quienes-somos {
        margin: 160px 100px;
    }

    .quienes-somos h2 {
        font-size: 22px;
    }

    .quienes-somos p {
        font-size: 14px;
    }

    .quienes-somos img {
        width: 93px;
        height: 78px;
    }

    .trayectoria {
        height: 600px;
    }

    .trayectoria h2 {
        font-size: 22px;
    }

    #controls {
        width: 95%;
    }

    #slide1:checked ~ #controls label:nth-child(2), 
    #slide2:checked ~ #controls label:nth-child(3), 
    #slide3:checked ~ #controls label:nth-child(1), 
    #slide1:checked ~ #controls label:nth-last-child(1), 
    #slide2:checked ~ #controls label:nth-last-child(3), 
    #slide3:checked ~ #controls label:nth-last-child(2) {
        margin: 0;
        margin-left: 40px;
    }

    .slide-ing h1, .slide-geren h1, .slide-cons h1 {
        font-size: 30px;
    }

    .slide-ing p, .slide-cons p, .slide-geren p {
        font-size: 14px;
    }

    .slide-ing h5 {
        font-size: 12px;
    }

    .titulo-quehacemos {
        padding-top: 100px;
        font-size: 20px;
    }

    #slider {
        height: 400px;
    }

    .slider-q-h {
        height: 650px;
    }

    .slide-cons li {
        font-size: 14px;
    }

    #controls label {
        width: 18px;
        height: 38px;
    }

    .trabaja-texto {
        margin: 0 180px;
    }

    .trabaja-texto h2 {
        font-size: 20px;
    }

    .trabaja-texto h3 {
        font-size: 16px;
    }

    .trabaja-texto p {
        font-size: 14px;
    }

    .trabaja-con-nosotros {
        height: 650px;
    }

    .trabaja-texto button {
        font-size: 14px;
        width: 290px;
    }

    .formulario h1 {
        font-size: 25px;
    }

    .contacto {
        background-image: none;
    }

    .info-contacto p {
        font-size: 12px;
    }

    .columna-3 h4 {
        font-size: 16px;
    }

    .info-contacto {
        gap: 14px;
    }

    .redes-volver-inicio {
        gap: 180px;
    }
}


@media(max-width: 479px) {

    /*
    nav {
        gap: 20px;
        width: 450px;
    }

    nav a {
        font-size: 11px;
    }
    */

    #logo {
        width: 30px;
        height: auto;
    }

    .wrapper {
        width: 300%;
    }

    .inicio-contacto {
        padding: 90px;
        gap: 15px;
        height: 100%;
    }

    .inicio-contacto h1 {
        font-size: 20px;
    }

    .inicio-contacto p {
        font-size: 12px;
    }

    .button {
        font-size: 11px;
    }

    .datos-punteo h1 {
        font-size: 20px;
    }

    .punteo-item {
        width: 100px;
    }

    .punteo-areas img {
        width: 100px;
        height: 60px;
    }

    .punteo-areas {
        gap: 40px;
        flex-wrap: wrap;
    }

    .punteo-areas h3 {
        font-size: 18px;
    }

    .punteo-areas p {
        font-size: 14px;
    }

    .datos-punteo {
        margin: 160px 80px;
        gap: 40px;
    }

    .quienes-somos-inicio {
        height: 800px;
    }

    .quienes-somos-inicio div {
        width: auto;
        margin: 0px 46px;
    }

    .quienes-somos-inicio h2 {
        font-size: 18px;
    }

    .quienes-somos-inicio p {
        font-size: 14px;
    }

    .contenedor {
        margin: 100px 0;
    }

    .contenedor h2 {
        font-size: 20px;
    }

    .contenedor label {
        font-size: 14px;
    }

    .clientes h2 {
        font-size: 20px;
    }

    .clientes div img {
        height: 40px;
    }

    .clientes div .calsa {
        height: 28px;
    }

    .clientes div .siemens {
        height: 15px;
    }

    .clientes div {
        gap: 30px;
    }

    .clientes {
        margin: 120px 60px;
    }

    .apertura-seccion h1 {
        font-size: 25px;
    }

    .apertura-seccion {
        height: 550px;
    }

    .quienes-somos h2 {
        font-size: 18px;
    }

    .quienes-somos p {
        font-size: 13px;
    }

    .quienes-somos {
        margin: 220px 60px;
    }

    .trayectoria {
        height: 800px;
    }

    .trayectoria div {
        width: auto;
        margin: 0px 46px;
    }

    .trayectoria h2 {
        font-size: 18px;
    }

    .trayectoria p {
        font-size: 14px;
    }

    .slide-ing h5 {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
        border: 0.5px solid #fff;
    }

    .slide-ing div {
        margin: 0;
    }

    .slide-ing p, .slide-cons p, .slide-geren p {
        font-size: 12px;
        padding: 25px 0;
    }

    .slide-ing h1, .slide-geren h1, .slide-cons h1 {
        font-size: 25px;
    }

    .slide-cons ul {
        padding-left: 0;
        padding-right: 0;
    }

    .slide-cons li {
        font-size: 12px;
    }

    .titulo-quehacemos {
        font-size: 17px;
    }

    .trabaja-con-nosotros {
        height: 800px;
    }

    .trabaja-texto {
        margin: 0 80px;
    }

    .trabaja-texto h2 {
        font-size: 18px;
    }

    .trabaja-texto h3 {
        font-size: 14px;
    }

    .trabaja-texto p {
        font-size: 12px;
    }

    .trabaja-texto button {
        font-size: 13px;
        width: 270px;
    }

    .formulario {
        width: auto;
        margin: 0 40px;
    }

    .formulario h1 {
        font-size: 20px;
    }

    .formulario label {
        font-size: 13px;
    }

    .formulario div {
        width: 100%;
    }

    .nombre, .empresa, .email, .telefono {
        width: 100%;
    }

    .nombre-empresa, .email-telefono {
        display: block;
    }

    .redes-volver-inicio {
        gap: 100px;
    }

    .info-contacto {
        padding-left: 45px;
        padding-right: 45px;
        flex-direction: column;
        gap: 40px;
    }

    .columna-1, .columna-2 {
        gap: 40px;
    }

    .columna-3 {
        gap: 20px;
    }
    
}