/******************************************** GENERALES */
.logo-cabecera{
    position: absolute;
    top: 0;
    right: 0;
    opacity: 1;
    transition: opacity 0.5s linear;
    z-index: -1;
}
a.anostyle{
    text-decoration: none;
}

/******************************************** MENÚ */

.menu{
    position: fixed;
    z-index: 9;
    background-color: transparent;
    color: var(--gris-medium);
    transition: background-color 0.2s, color 0.2s;
    font-size :large;
}
a.enlace-menu{
    color: var(--gris-medium);
    text-decoration: none;
    background-color: transparent;
    transition: color .2s;
}

a.enlace-menu:hover{
    color: var(--verde-ideo);
}
a.enlace-menu:hover .arrow-left {
    opacity: 1;
}
.icons-rrss{
    color: var(--gris-medium);
    width: 2rem;
    height: 2rem;
}
a.icons-rrss:hover{
    background-color: var(--verde-ideo);
    color: var(--blanco);
    border-radius: 100%;
}
.menu.moved{
    background-color: rgba(255, 255, 255, 0.7);
}
.menu .arrow-left{
    opacity: 0;
    width: 1.5rem;
    transition: color .2s, opacity 0.2s;
}
/* menu lateral movil */
.menu-emergente{
    position: fixed;
    top: 100%;
    left: 0;
    opacity: 0;
    width: 100dvw;
    height: 100dvh;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(1rem);
    transition: all 0.5s ease-in-out;
    z-index: 10;
}
.menu-emergente-up{
    top: 0%;
    opacity: 1;
}
.close{
    width: 3rem;
    cursor: pointer;
}
.enlaces-menu a{
    text-decoration: none;
    color: white;
}
.enlacemenu{
    font-family: "NewGroteskSquareSIX";
    font-size: 3rem;
    line-height: 3rem;
    text-align: center;
}
.enlacemenu:hover{
    font-family: "PlayfairDisplay-ExtraBoldItalic";
    color: var(--verde-ideo);
}
.tel{
    font-size: 2rem;
}
.dir, .cp{
    font-size: 1rem;
}
.rrss{
    text-decoration: none;
}
.rrss img {
    width: 10%;
}


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

/******************************************** MAIN */
.inicio{
    position: relative;
}
.inicio>.row{
    position: relative;
    z-index: 2;
}
main .main-index{
    margin-top: 7rem; 
}
main .titulo{
    font-size: 2rem;
    line-height: 2rem;
}

/******************************************** TRABAJOS */
.nav-tabs {
    border-bottom: none;
}

.nav-tabs .nav-link {
    color: #555;
    font-weight: normal;
    text-decoration: none;
}

.nav-tabs .nav-link.active {
    font-weight: normal;
    text-decoration: none;
    background-color: transparent;
    border: none;
}
.nav-tabs .nav-link:hover{
    color: var(--verde-ideo);
    border: none;
}
/******************************************** CLIENTES */
.clientes .titulo{
    font-size: 4rem;
    line-height: 4rem;
}
/*ventana imagen */
.imagen-trabajo{
    position: relative;
}
.imagen-trabajo img, .imagen-trabajo video{
    border-radius: 25px;
    transition: all 0.2s linear;
    max-width: 100%;
}
.description-text{
    position: absolute;
    width: 100%; 
    opacity: 1;
    background-color: rgba(0,0,0,.5);
    transition: all 0.2s 0.1s linear;
    cursor: pointer;
    z-index: 2;
}
.imagen-trabajo .img-hover{
    border-radius:0;
    max-width: 90%;
}
.text-hover{
    opacity: 1;
    background-color: rgba(0,0,0,.5);
    max-width: 90%;
    height: 90%;
}

.description-text .title {
    font-size: 2.5rem;
    color: white;
}

.description-text .subtitle {
    font-size: 1.8rem;
    color: white;
    letter-spacing: 0.6rem;
}

/******************************************** NOSOTROS */
.nosotros h2{
    font-size: 4.8rem;
    line-height: 4rem;
}
#lista-nosotros li {
    border-bottom: 0.1rem solid var(--verde-ideo);
    cursor: pointer;
    font-family: "Outfit-Bold";
    font-size: 1.4rem;
}
#lista-nosotros li:hover {
    color: var(--verde-ideo); 
    transform: scale(1.05);
}
#lista-nosotros li.activo {
    color: var(--verde-ideo); 
    transform: scale(1.05);
}
.texto-nosotros{
    font-size: 1.2rem;
    font-family: "Outfit-Regular";
}

/******************************************** MARCAS */
.clientes .titulo{
    font-size: 3rem;
    line-height: 3rem;
}
.container-marcas{
    overflow: hidden;
    position: relative;
    width: 85dvw;
    margin: auto;
}
.clientes .texto{
    font-size: 1.2rem;
}
/******************************************** CONTACTO */
.contacto .titulo-grande{
    font-size: 2.6rem;
    line-height: 2.6rem;   
}
.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(--verde-ideo);
}
footer ul{
    list-style: none;
}
footer a{
    text-decoration: none;
}
footer a.menufooter, footer a.legales{
    color: white;
}
footer a.menufooter:hover, footer a.legales:hover{
    color: var(--verde-ideo);
}
footer .iconorrss img {
    max-width: 3rem;
}

/******************************************** 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(--verde-ideo);
}
.min-w{
    max-width: 80%;
}
/******************************************** MODAL PAGINAS */
/* .modal-contenedor-pagina{
    width: 100dvw;
    min-height: 100dvh;
    background-color: rgba(0,0,0,0.8);
    position: fixed;
    top: 0;
    z-index: 12;
}
.modal-contenido-pagina div{
    border-radius: 15px;
}
.boton-modal{
    width: 30%;
    border: none;
    background-color: var(--verde-ideo);
} */


/* @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 */
    main .titulo{
        font-size: 7rem;
        line-height: 5rem;
    }
    main .texto{
        max-width: 40dvw;
    }
    main .main-index{
        margin-top: 10rem;
    }
    
    /******************************************** CONTACTO */
    .contacto .titulo-grande{
        font-size: 5rem;
        line-height: 5rem;   
    }
    .contacto .titulo{
        font-size: 3rem;
        line-height: 3rem;   
    }
    .contacto input[type=submit]{
        width: 15%;
    }
    .contacto :is(input[type=text], textarea){
        font-size: 1.8rem;
    }
    .contacto input[type=submit]{
        font-size: 2rem; 
    }
}

/* desktop */
@media screen and (min-width:1400px) {
    /******************************************** MAIN */
    main .titulo{
        font-size: 7rem;
        line-height: 5rem;
    }
    main .texto{
        max-width: 40dvw;
    }
    main .main-index{
        margin-top: 10rem;
    }
    /******************************************** CLIENTES */
    .clientes .titulo{
        /* font-size: 4rem;
        line-height: 4rem; */
        font-size: 4.4rem;
        line-height: 3.5rem;
    }
    /*ventana imagen */
    .imagen-trabajo{
        position: relative;
    }
    .imagen-trabajo img, .imagen-trabajo video{
        border-radius: 25px;
        transition: all 0.2s linear;
        width: 100%;
    }
    .description-text{
        position: absolute;
        width: 90%;
        height: 90%;
        opacity: 0;
        background-color: unset;
        transition: all 0.2s ease-in;
        cursor: pointer;
        z-index: 2;
    }
    .imagen-trabajo .img-hover{
        border-radius:0;
    }
    .text-hover{
        opacity: 1;
        background-color: rgba(0,0,0,.5);
        max-width: 90%;
        height: 90%;
    }
    
    .description-text .title {
        font-size: 2.5rem;
        color: white;
    }
    
    .description-text .subtitle {
        font-size: 1.8rem;
        color: white;
        letter-spacing: 0.6rem;
    }

    /******************************************** CONTACTO */
    .contacto .titulo-grande{
        font-size: 5rem;
        line-height: 5rem;   
    }
    .contacto .titulo{
        font-size: 3rem;
        line-height: 3rem;   
    }
    .contacto input[type=submit]{
        width: 15%;
    }
    .contacto :is(input[type=text], textarea){
        font-size: 1.2rem;
    }
    .contacto input[type=submit]{
        font-size: 2rem; 
    }
}