/* ============================

    SERVICIOS   

=============================*/
.servicios {
    width: 92%;
    margin: 3rem auto;
    scroll-margin-top: 5rem;
}
@media (max-width: 500px) {.servicios{scroll-margin-top: 19rem;}}

.servicios h2 {
    text-align: center;
    color: var(--color-6);
}
/* @media(max-width:500px){.servicios h2{font-size: 3.9rem;}} */

/* Cards Servicios */
.cards-servicios {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media(max-width:500px){.cards-servicios{flex-direction: column;}}

.cards-servicios .serv-card {
    width: 32%;
    height: 46rem;
    background: linear-gradient(to right, var(--color-4), var(--color-3));
    overflow: hidden;
    border-radius: 0 0 6rem 0;
}
@media(max-width:500px){.cards-servicios .serv-card{width:95%;height:141rem;margin:3rem 0;}}
@media (max-width: 1024px) and (min-width: 501px) {.cards-servicios .serv-card{height:42rem;}}

.serv-card .imagen,.serv-card .imagen img {width: 100%;}

.serv-card .contenido h3{text-align: center;}

.titulo-servicios{margin: 3rem 0;}

.serv-card .contenido h4,.serv-card .contenido h3 {color: var(--color-6);}
.serv-card .contenido p {color: var(--color-2);}
@media(max-width:500px){.serv-card .contenido p{text-align: justify;}}
@media (max-width: 1024px) and (min-width: 501px) {.serv-card .contenido p{margin: .3rem 0;line-height:1.4rem;}}

.serv-card .contenido p::before {
    content: '';
    display: inline-block;
    width: .5rem;
    height: .5rem;
    background-color: var(--color-2);
    border-radius: 100%;
    margin: 0 .5rem;
}
@media(max-width:500px){.serv-card .contenido p::before{width: 2rem;height: 2rem;margin: 0 2rem;}}

.serv-card .contenido {
    height: 60%;
    padding: 1rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media(max-width:500px){.serv-card .contenido{padding: 3rem 8rem;}}

/* ======================================

    MARCAS

==========================================*/

#Marcas h2 {
    color: var(--color-3);
    width: 100%;
    text-align: center;
    background-color: var(--color-6);
    padding: .6rem 0;
}

/* Slide Marcas */
#Marcas .contenedor-marcas {
    width: 100%;
    background: linear-gradient(35deg, var(--color-3), var(--color-4));
    padding: 2rem 0;
    overflow: hidden;
}

#Marcas .contenedor-marcas .tira {
    width: 250%;
    display: flex;
    position: relative;
    left: 4rem;
    gap: 4rem;

    animation-name: marcas-slide;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-delay: 0;
    animation-timing-function: linear;
}
@media(max-width:500px){#Marcas .contenedor-marcas .tira{width: 490%;animation-duration: 11s;}}

.tira .marca {
    width: 14rem;
    height: 6rem;
    background-color: var(--color-2);
    border-radius: 9rem;
    box-shadow: -.4rem .4rem .3rem rgb(0, 0, 0, .4);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
@media(max-width:500px){.tira .marca{width: 319rem;height: 19rem;}}

.marca img {
    width: 75%;
}

@keyframes marcas-slide {
    0% {
        left: 4rem;
    }

    100% {
        left: -86rem;;
    }
}
@media(max-width:500px){@keyframes marcas-slide{0%{left: 4rem;}100%{left: -249rem;;}}}

.imagen-marcas {width: 100%; height: auto;}

/* ====================================

    CPT MONTACARGAS y PLATAFORMAS ELÉCTRICAS

==================================== */

#Montacargas, #Plataformas {width: 100%; margin: 3rem 0; scroll-margin-top: 5rem;}
@media (max-width: 500px) {#Montacargas, #Plataformas{scroll-margin-top: 19rem;}}
@media (max-width: 500px) {#Montacargas p, #Plataformas p{font-size:3.9rem;}}
@media (max-width: 1024px) and (min-width: 501px) {#Montacargas p, #Plataformas p{font-size:1.4rem;}}

#Montacargas .titulo,
#Plataformas .titulo {
    width: 100%;
    text-align: center;
    color: var(--color-3);
    background-color: var(--color-6);
    padding: .6rem 0;
}

#Montacargas .cpt-montacargas,
#Plataformas .cpt-plataformas {
    width: 100%;
    display: flex;
    margin-top: 1rem;
}
@media(max-width:500px){
    #Montacargas .cpt-montacargas,
#Plataformas .cpt-plataformas {
    flex-direction: column;
}    
}

.cpt-montacargas .imagen-producto-montacargas,
.cpt-plataformas .imagen-producto-plataformas {
    width: 40%;
}
@media(max-width:500px){
    .cpt-montacargas .imagen-producto-montacargas,
    .cpt-plataformas .imagen-producto-plataformas,
    .cpt-plataformas .contenido {
        width: 100%;
    }    
}

.cpt-montacargas .contenido,
.cpt-plataformas .contenido {
    width: 60%;
    padding: 0 6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
} 
@media(max-width:500px){
    .cpt-montacargas .contenido,
    .cpt-plataformas .contenido {
        width: 100%;
        gap: 2.5rem;
    }     
}

.cpt-montacargas .imagen-producto-montacargas img,
.cpt-plataformas .imagen-producto-plataformas img {
    width: 100%;
    height: auto;
}

.cpt-montacargas .contenido .titulo-producto-montacargas,
.cpt-plataformas .contenido .titulo-producto-plataformas {
    color: var(--color-3);
}

.cpt-montacargas .contenido .row_top,
.cpt-plataformas .contenido .row_top {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.row_top .field,
.contenido .field {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: .5rem;
}
@media(max-width:500px){.contenido .field{gap: 1.5rem;}}

.field h2 {
    color: var(--color-6);
}

.field h3,
.field-description p {
    color: var(--color-3);
}

/* ============================

        COTIZA 
    
=============================*/

#Cotiza {
    width: 100%;
    display: flex;
    scroll-margin-top: 5rem;
}
@media(max-width:500px){#Cotiza{flex-direction: column;scroll-margin-top: 24rem;}}

#Cotiza .imagen,
#Cotiza .formulario {
    width: 50%;
}
@media(max-width:500px){#Cotiza .imagen,#Cotiza .formulario{width: 100%;}}
@media(max-width:500px){#Cotiza .imagen{overflow: hidden;height: 55rem;display: flex;align-items: center;}}

#Cotiza .imagen img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0 0 0 9rem;
}
@media(max-width:500px){#Cotiza .imagen img{height: auto;}}

#Cotiza .formulario {
    background: linear-gradient(35deg, var(--color-4), var(--color-3), var(--color-4), var(--color-3), var(--color-4));
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    padding: 0 4rem;
    gap: 2rem;
    overflow: hidden;
    border-radius: 0 9rem 0 0;
}
@media(max-width:500px){#Cotiza .formulario{border-radius:0;}}
@media (max-width: 1024px) and (min-width: 501px) {#Cotiza .formulario{padding:2rem 4rem;}}

.formulario h2 {
    width: 100%;
    text-align: center;
    font-size: 3rem;
    color: var(--color-6);
    letter-spacing: .1rem;
}
@media(max-width:500px){.formulario h2{font-size: 6rem;margin-top: 2rem;}}

.formulario .form-wrap,
.form .form-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.formulario .form-wrap input,
.formulario .form-wrap textarea,
.form .form-wrap textarea,
.form .form-wrap input {
    font-size: 1rem;
    padding: .5rem .9rem;
    border: none;
    border-radius: .2rem;
}
@media(max-width:500px){
.formulario .form-wrap input,
.formulario .form-wrap textarea,
.form .form-wrap textarea,
.form .form-wrap input {
    font-size: 3.9rem;
    padding: 1.5rem 1.9rem;
    border-radius: .2rem;
}    
}

.formulario .form-wrap textarea {
    min-height: 10rem;
}

.formulario button {
    font-size: 1rem;
    color: var(--color-4);
    background-color: var(--color-6);
    border: none;
    border-radius: .2rem;
    padding: .9rem 1.9rem;
    cursor: pointer;
}
@media(max-width:500px){
    .formulario button {
        font-size: 3.9rem;
        margin: 4rem 0;
        padding: 1.9rem 2.9rem;
    }
}

/* ===============================

        CONTACTO

==============================*/

/* Whatsapp */
#Contacto {
    width: 100%;
    margin: 3rem 0;
    scroll-margin-top: 5rem;
}
@media (max-width: 500px) {#Contacto{scroll-margin-top: 19rem;}}

#Contacto .whatsapp {
    width: 75%;
    height: 14rem;
    margin: auto;
    position: relative;
    top: 0;
    display: flex;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    border-radius: 1rem;
}
@media (max-width: 500px) {#Contacto .whatsapp{transform: scale(1.3);margin-top:9rem;margin-bottom: 9rem;}}
@media (max-width: 1024px) and (min-width: 501px) {#Contacto .whatsapp{width:100%;}}

.whatsapp .back,
.whatsapp .texto_2,
.whatsapp .texto_1,
.whatsapp .logo {
    position: absolute;
    width: 100%;
}

.whatsapp .logo {
    top: 2.5rem;
    left: 30rem;
    transition: ease-out 160ms;
}

.whatsapp .texto_2,
.whatsapp .texto_1 {
    top: 5.5rem;
    font-size: 3rem;
    font-weight: 600;
    color: var(--color-3);
}
@media (max-width: 1024px) and (min-width: 501px) {.whatsapp .texto_2,.whatsapp .texto_1{font-size:2.6rem;}}

.whatsapp .texto_2 {
    left: 45rem;
    transition: 100ms;
}

.whatsapp .texto_1 {
    opacity: 0;
    transition: 100ms;
    left: 20rem;
}

.whatsapp .back img {
    width: 100%;
    transition: 100ms;
}

.whatsapp .logo img {
    width: 10rem;
}

.whatsapp:hover .logo {left: 60rem;}
.whatsapp:hover .texto_2 {opacity: 0;}
.whatsapp:hover .texto_1 {opacity: 1;}
.whatsapp:hover .back img {transform: scale(1.09); left: -5rem;}
@media (max-width: 500px) {
    .whatsapp:hover .logo {left: 30rem;;}
    .whatsapp:hover .texto_2 {opacity: unset !important;}
    .whatsapp:hover .texto_1 {opacity: 0;}
    .whatsapp:hover .back img {transform: unset !important;}    
}
@media (max-width: 1024px) and (min-width: 501px) {
    .whatsapp:hover .logo {left: 30rem;;}
    .whatsapp:hover .texto_2 {opacity: unset !important;}
    .whatsapp:hover .texto_1 {opacity: 0;}
    .whatsapp:hover .back img {transform: unset !important;} 
}

/* Formulario Contacto */
#Contacto .contact-form {
    width: 100%;
    display: flex;
    margin-top: 3rem;
}
@media(max-width:500px){
    #Contacto .contact-form{
        flex-direction: column;
    }
    .contact-form .logo,
    .contact-form .form {
        width: 100% !important;
    }
}

.contact-form .logo {
    width: 45%;
}

.contact-form .form {
    width: 55%;
}

.contact-form .logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-form .logo svg {
    width: 65%;
    user-select: none;
}

.contact-form .form {
    display: flex;
    flex-direction: column;
    align-items: end;
    background: linear-gradient(to right, rgb(203, 108, 0, .6), rgb(231, 177, 72, .6), rgb(203, 108, 0, .6));
    overflow: hidden;
    border-radius: 2rem;
    padding: 2rem 4rem;
    gap: 2rem;
}

.form h2 {
    width: 100%;
    text-align: center;
    color: var(--color-3);
}
@media (max-width: 500px) {.form h2{font-size: 4.9rem;}}

.form button {
    width: 25%;
    font-size: 1rem;
    color: var(--color-2);
    background-color: var(--color-3);
    border: none;
    border-radius: .2rem;
    padding: .6rem 0;
    cursor: pointer;
}
@media (max-width: 500px) {.form button{font-size:3.9rem;width:40%;margin:2rem 0;padding:3rem 3rem;}}
@media (max-width: 1024px) and (min-width: 501px) {.form button{width:39%;}}

/* ===============================

        NOSOTROS

================================*/

#Nosotros {width: 100%; scroll-margin-top: 5rem;}
@media (max-width: 500px) {#Nosotros{scroll-margin-top: 19rem;}}

#Nosotros .nosotros {width: 100%;}

.nosotros .intro {
    display: flex;
}
@media (max-width: 500px) {.nosotros .intro{flex-direction:column;}}

.intro .contenido,
.intro .imagen {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
@media (max-width: 500px) {.intro .contenido,.intro .imagen{width: 100%;margin: 2rem 0;}}

.intro .contenido {
    padding: 0 3rem;
}
@media (max-width: 1024px) and (min-width: 501px) {.intro .contenido{padding: 0 1rem;}}

.intro .imagen img {
    width: 100%;
}

.intro .contenido h2 {
    width: 100%;
    color: var(--color-3);
    text-align: end;
}
@media (max-width: 500px) {.intro .contenido h2{font-size: 6.9rem;}}

.intro .contenido p {
    width: 100%;
    text-align: justify;
}

/* Cards Nosotros */
.turn {
    flex-direction: row-reverse;
}

.nosotros .card-nosotros {
    width: 100%;
    height: 22rem;
    display: flex;
    margin: 3rem 0;
    overflow: hidden;
    border-radius: 0 7rem 0 7rem;
}
@media (max-width: 500px) {.nosotros .card-nosotros{flex-direction:column;height:inherit;border-radius:inherit;}}

.card-nosotros .imagen,
.card-nosotros .contenido-nosotros {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media (max-width: 500px) {.card-nosotros .imagen,.card-nosotros .contenido-nosotros{width: 100%;padding:5rem 6rem !important;}}
@media (max-width: 500px) {.card-nosotros .imagen{padding:inherit !important;}}

.card-nosotros .contenido-nosotros {
    background: linear-gradient(to bottom, var(--color-3), var(--color-4));
    padding: 0 9rem;
    gap: 2rem;

}
@media (max-width: 1024px) and (min-width: 501px) {.card-nosotros .contenido-nosotros{padding:0 4rem;}}

.contenido-nosotros p {
    width: 100%;
    text-align: justify;
    color: var(--color-6);
}

.contenido-nosotros h2 {
    width: 100%;
    text-align: center;
    color: var(--color-6);
}

.card-nosotros .imagen img {
    width: 100%;
    height: auto;
}
@media (max-width: 1024px) and (min-width: 501px) {.card-nosotros .imagen img{width:auto;height:100%;}}

/* Cards Valores */
.valores {
    width: 100%;
}

.valores .card-valores {
    width: 100%;
    height: 18rem;
    display: flex;
    margin: 3rem 0;
    overflow: hidden;
    border-radius: 0 7rem 0 7rem;
}
@media (max-width: 500px) {.valores .card-valores{flex-direction:column;height:inherit;border-radius:inherit;}}

.card-valores .imagen,
.card-valores .contenido-valores {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
@media (max-width: 500px) {.card-valores .imagen,.card-valores .contenido-valores{width: 100%;padding:4rem 6rem !important;}}
@media (max-width: 500px) {.card-valores .imagen{padding:inherit !important;}}

.card-valores .contenido-valores {
    background: linear-gradient(to right, rgb(203, 108, 0, .75), rgb(231, 177, 72, .75), rgb(203, 108, 0, .75));
    padding: 0 9rem;
    gap: 1.6rem;
}
@media (max-width: 1024px) and (min-width: 501px) {.card-valores .contenido-valores{padding:0 4rem;}}

.card-valores .imagen img {
    width: 100%;
}
@media (max-width: 1024px) and (min-width: 501px) {.card-valores .imagen img{width:auto;height:100%;}}

.contenido-valores h2 {
    color: var(--color-3);
}

.contenido-valores p {
    color: var(--color-2);
    text-align: justify;
}
@media (max-width: 500px) {.contenido-valores p{letter-spacing: .1rem;}}

/* ===================================

        Pagina de mensaje "Enviado"

====================================== */
.enviado {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
}
@media (max-width: 500px) {.enviado{gap: 9rem;}}

.enviado .logo {
    width: 100%;
    display: flex;
    justify-content: center;
}

.enviado .logo svg {
    width: 35%;
    filter: drop-shadow(-.5rem .5rem .2rem rgb(0, 0, 0, 0.39));
    user-select: none;
}
@media (max-width: 500px) {.enviado .logo svg{width: 85%;}}
@media (max-width: 1024px) and (min-width: 501px) {.enviado .logo svg{width: 50%;}}

.enviado .mensaje {
    color: var(--color-4);
    font-size: 1.5rem;
    user-select: none;
}
@media (max-width: 500px) {.enviado .mensaje{font-size: 3.9rem;}}
@media (max-width: 1024px) and (min-width: 501px) {.enviado .mensaje{font-size: 1.9rem;}}

.enviado a .back {
    background-color: var(--color-6);
    color: var(--color-2);
    font-size: 1.2rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: .5rem;
    cursor: pointer;
    transition: 100ms;
}
@media (max-width: 500px) {.enviado a .back{font-size: 4.9rem;}}
@media (max-width: 1024px) and (min-width: 501px) {.enviado a .back{font-size: 1.9rem;}}

.enviado a .back:hover {
    transform: scale(1.04);
}
@media (max-width: 500px) {.enviado a .back:hover{transform: scale(1.0);}}
@media (max-width: 1024px) and (min-width: 501px) {.enviado a .back:hover{transform: scale(1.0);}}

/* ===================================

        Aviso de Pivacidad

====================================== */

.head-privacidad {
    background: linear-gradient(to bottom, var(--color-6), var(--color-7));
    width: 100%;
    padding: .9rem 0;
    display: flex;
    justify-content: end;
}
@media (max-width: 500px) {.head-privacidad{padding: 2.9rem 0;}}
@media (max-width: 1024px) and (min-width: 501px) {.head-privacidad{padding: 2.9rem 0;}}

.head-privacidad svg {
    width: 9%;
    margin-right: 9rem;
    filter: drop-shadow(-0.2rem 0.2rem 0.1rem rgb(0, 0, 0, 0.3));
}
@media (max-width: 500px) {.head-privacidad svg{width:39rem;}}
@media (max-width: 1024px) and (min-width: 501px) {.head-privacidad svg{width: 19rem;}}

.contenido-privacidad {
    width: 85%;
    margin: 2rem auto;
    font-size: 1rem;
}
@media (max-width: 500px) {.contenido-privacidad{font-size:3.9rem;margin:4rem auto;}}
@media (max-width: 1024px) and (min-width: 501px) {.contenido-privacidad{font-size:1.6rem;}}

.contenido-privacidad h4,
.contenido-privacidad p {
    margin: 1rem 0;
}

.contenido-privacidad h4,
.contenido-privacidad h1 {
    color: var(--color-3);
}