/******************************************** MENÚ */
.menu{
    position: fixed;
    z-index: 9;
    background-color: transparent;
    color: var(--blanco);
    transition: background-color 0.2s, color 0.2s;
}
a.enlace-menu{
    color: var(--blanco);
    text-decoration: none;
    background-color: transparent;
    transition: color .2s;
}
a.enlace-menu:hover{
    color: var(--naranja-mrgates);
}
.menu.moved{
    background-color: rgba(255, 255, 255, 0.7);
}
.menu.moved .enlace-menu{
    color: var(--azul-oscuro);
}
.menu .arrow-left{
    color: transparent;
    width: 1.5rem;
    transition: color .2s;
}
.mrgates{
    max-width: 10dvw;
}
/* menu lateral movil */
.menu-icon{
    transition: opacity 0.5s;
}
.menu-icon svg{
    max-width: 75px;
    cursor: pointer;
}
.menu-lateral{
    width: 100dvw;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: -100%;
    z-index: 11 ;
    transition: left .5s;
}
.menu-lateral.in{
    left: 0%;

}
.menu-lateral ul{
    list-style: none;
}
.menu-lateral li{
    font-size: 2rem;
    cursor: pointer;
}
.menu-lateral a{
    text-decoration: 1px white underline;
}


/******************************************** BOTON UP TO */
.up-to{
    width: 50px;
    height: 50px;
    background-color: var(--azul-mrgates);
    color: white;
    position: fixed;
    bottom: 3dvh;
    right: 3dvh;
    z-index: 10;
    cursor: pointer;
    transition: color .2s;
}
.up-to:hover{
    background-color: white;
    color: var(--azul-mrgates);
}

/******************************************** MAIN */
.inicio{
    position: relative;
}
.inicio>.row{
    position: relative;
    z-index: 2;
}
video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.capavideo{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #111516;
    opacity: 0.7;
}
main .titulo{
    font-size: 3rem;
    line-height: 3rem;
}

/******************************************** TRABAJOS */
.trabajos .titulo-grande{
    font-size: 2.8rem;
    line-height: 2.8rem;   
}
.trabajos .titulo{
    font-size: 2rem;
    line-height: 2rem;   
}
.ejemplo-trabajo{
    max-height: 70dvh;
}
.ejemplo-trabajo .imagen-trabajo img{
    object-fit: cover;
}
.of-cover{
    object-fit: cover;
}
.horizontal>div{
    height: 75dvh;
    overflow: hidden;
}

/* ventana de imagen */
.description-text{
    opacity: 0;
    transition: opacity 0.5s;
}
.description-text .title{
    font-size: 4rem;
    line-height: 6rem;
}
.description-text .subtitle{
    font-size: 2.3rem;
}
.icono-filter{
    filter: contrast(0);
}
/* CAROUSEL PARA MOVIL */
#carousel_trabajos .carousel-item{
    height: 40dvh;
}
#carousel_trabajos img{
    object-fit: cover;
}
#carousel_trabajos .carousel-caption{
    bottom: 0;
}
.titulo-valores{
    font-size: 1.4rem;
    line-height: 1.5rem;
}

/******************************************** PLAT0 */
.plat0-content{
    border: 2px solid var(--naranja-mrgates);
    border-radius: 5px;
    /* width: 23% !important; */
}
.plat0-content .objetivo{
    font-size: 1.3rem;
}

/******************************************** LO QUE NOS GUSTA */
.contenedor-img{
    width: 100%;
    min-height: 7rem;
}


/******************************************** NOSOTROS */
.nosotros .titulo-grande{
    font-size: 3rem;
    line-height: 3rem;   
}
.nosotros .titulo{
    font-size: 2rem;
    line-height: 2rem;   
}
.nosotros-foto{
    position: relative;
}
.nosotros-foto img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.nosotros-foto .datos{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
.nosotros-foto .datos .nosotros-nombre{
    font-size: 1rem;
}
.nosotros-foto .datos .nosotros-puesto{
    font-size: 0.8rem;
}

/******************************************** CONTACTO */
.contacto .titulo-grande{
    font-size: 3rem;
    line-height: 3rem;   
}
.contacto .titulo{
    font-size: 2rem;
    line-height: 2rem;   
}
.contacto :is(input[type=text], textarea){
    font-size: 1.2rem;
    background-color: transparent;
    border: 1px solid white;
    padding: 3% 5%;
}
.contacto input[type=text].contact-error{
    border: 1px solid red;
}
.contacto :is(input[type=text], textarea)::placeholder{
    color: var(--gris-dark);
    opacity: 1;
}
.contacto input[type=checkbox]{
    appearance: none;
    border: none;
    padding: 0;
    width: 25px;
    height: 25px;
    border-radius: 10%;
    appearance: none;
    cursor: pointer;
    background-color: white;
}
.contacto input[type=checkbox]:checked{
    background-color:#33c0f5;
}
.contacto input[type=checkbox].contact-error{
    border: 3px solid red;
}
.contacto input[type=submit]{
    width: 100%;
    padding: 0.5% 3%;
    font-size: 1.5rem; 
    border: none;
    background: white;
    text-decoration: 2px black underline;
}
.contacto a{
    color: black;
}
.contacto a:hover{
    color: white;
}


/******************************************** FOOTER */
footer .border-bottom-verde{
    border-bottom: 2px solid var(--naranja-mrgates);
}
footer ul{
    list-style: none;
}
footer a{
    text-decoration: none;
}
footer a{
    text-decoration: none;
}
footer a.menufooter, footer a.legales{
    color: white;
}
footer a.menufooter:hover, footer a.legales:hover{
    color: var(--naranja-mrgates);
}

/******************************************** MODAL */
.modal-contenedor{
    width: 100dvw;
    height: 100dvh;
    background-color: rgba(0,0,0,0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 12;
}
.modal-contenido div{
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.modal-contenido .titulo-modal{
    font-size: 1.5rem;
}
.boton-modal{
    width: 30%;
    border: none;
    background-color: var(--azul-mrgates);
}


@media (orientation:landscape) {
    /* CAROUSEL PARA MOVIL */
    #carousel_trabajos .carousel-item{
        height: 100dvh;
    }
    #carousel_trabajos .carousel-item img{
        object-fit: cover;
    }
}

@media screen and (min-width:768px) {
    /******************************************** MAIN */
    .mrgates{
        max-width: 5dvw;
    }
    main .titulo{
        font-size: 5rem;
        line-height: 5rem;
    }
    /******************************************** TRABAJOS */
    .trabajos .titulo-grande{
        font-size: 5rem;
        line-height: 5rem;   
    }
    .trabajos .titulo{
        font-size: 3rem;
        line-height: 3rem;   
    }

    /*** VALORES */
    .titulo-valores{
        font-size: 2rem;
        line-height: 2rem;
    }
    /*** MARCAS */
    .marcas{
        width: 75%;
    }

    /******************************************** NOSOTROS */
    .nosotros .titulo-grande{
        font-size: 5rem;
        line-height: 5rem;   
    }
    .nosotros .titulo{
        font-size: 3rem;
        line-height: 3rem;   
    }
    .nosotros-foto{
        position: relative;
    }
    .nosotros-foto img{
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    .nosotros-foto .datos{
        cursor: pointer;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: none;
        background-color: var(--azul-mrgates-transparente);
        transition: opacity 0.2s;
    }
    .nosotros-foto .datos:hover{
        opacity: 1;
    }
    .nosotros-foto .datos .nosotros-nombre{
        margin-top: 60%;
        font-size: 1.5rem;
    }
    .nosotros-foto .datos .nosotros-puesto{
        font-size: 1.2rem;
    }
    /******************************************** CONTACTO */
    .contacto .titulo-grande{
        font-size: 4rem;
        line-height: 4rem;   
    }
    .contacto .titulo{
        font-size: 3rem;
        line-height: 3rem;   
    }
    .contacto input[type=submit]{
        width: 50%;
    }
    /******************************************** CONTACTO */
    .contacto :is(input[type=text], textarea){
        font-size: 1.2rem;
    }
    .contacto input[type=submit]{
        font-size: 2rem; 
    }
}

@media screen and (min-width:998px) {
    .plat0-content{
        width: 23% !important;
    }
    .contacto input[type=submit]{
        width: 25%;
    }
}