*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    list-style: none;
}

:root{
    --bg-color-naranga: #ffc900;
    --bg-color-grey: #5B5B5B;
    --bg-color-plata: #c4c4c428;
    --bg-color-black: #000000;
    --bg-shadow-cuadro: #c4c4c4ca;
}

section{ height: 100vh; }
.cont-85{ width: 85%; margin: 0 auto;}
.cont-80{ width: 80%; margin: 0 auto;}
.cont-75{ width: 75%; margin: 0 auto;}
.cont-70{ width: 70%; margin: 0 auto;}

/* header{
    height: 100vh; 
} */

ol, ul{
    margin-bottom: 0;
}

.loader{
    background: white;
}

.cint-header{
    background-color: var(--bg-color-naranga);
    padding: 10px 0;
    font-size: 18px;
    transition-duration: 500ms;
}

.cint-div{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .cint-social{
        list-style: none;
        display: inline-flex;
    }

    .cint-social li{
        position: relative;
        min-width: auto;
        padding: 0;
        margin: 0 5px;
        font-size: 18px;
    }

        .cint-social li a{
            text-decoration: none;
            color: white;
        }

nav{
    position: fixed;
    background-color:#f6f6f6;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    width: 100%;
    font-size: 1.3em;
    z-index: 999;
    box-shadow: 0px 0px 3px 0px var(--bg-shadow-cuadro);
    transition-duration: 0.2s;
}

    .nav-logo{
        width: max-content;
        height: 100%;
    }

    nav ul{
        list-style: none;
        display: flex;
        gap: 1.5em;
    }

.top-nav.abajo{
    transform: translateY(-50px);
    transition: 200ms;
    padding: 10px 3em;
}

.header{
    height: 100vh;
    width: 100%;
    position: relative;
}

    .header-img{
        height: 100%;
        clip-path: polygon(65% 0%, 35% 100%, 100% 100%, 100% 0%);
    }
    
    .header-bloque{
        position: absolute;
        top: 25%;
        left: 5%;
        transform: translate(-5%, -10%);
        padding:0.6em 1em;
        width: 40%;
    }

    .header-bloque span{
        font-size: 2em;
    }
    
    .header-bloque p{
        margin-top: 1em;
        margin-bottom: 1em;
        font-size: 1.2em;
        line-height: 1.5em;
        display: -webkit-box; -webkit-line-clamp: 4; text-overflow: ellipsis; height: auto; -webkit-box-orient: vertical; overflow: hidden;
    }

        .header-bloque-grid{
            margin: 0.5em 0;
            display: grid;
            grid-template-columns: 35px 1fr;
        }
        
        .header-bloque-grid{padding: 0;}
        .header-bloque-grid li:nth-child(1){display: flex;justify-content: center;align-items: center;}
        .header-bloque-grid li:nth-child(2){white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
        .header-bloque-grid i{
            color: var(--bg-color-grey);
            font-size: 1.4em;
        }

    .header-bloque a{
        padding: 0.5em 1.5em;
        color: var(--bg-color-grey);
        background-color: var(--bg-color-naranga);
        font-size: 1.2em;
        border: none;
        border-radius: 6px;
        margin-top: 1em;
    }

    .owl-header .owl-dots {
        /* background: orange; */
        width: 50%;
        margin: 0 auto;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
    }
    
.sec-1{
    height: 100%;
    background: linear-gradient(to top, var(--bg-color-plata) 0% 36%, #ffffff00 36% 65%, var(--bg-color-plata) 65% 100%);
}

    .sec1-grid{
        display: grid;
        grid-gap: 60px 50px;
        grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
        padding: 5em 0;
        opacity: 0;
        transition-duration: 1s;;
    }

    .sec1-grid.visible{
        opacity: 1;
        animation-duration: 2S;
        animation-timing-function: ease-in;
    }

    .cont1-flex:nth-child(2n+1){
        flex-direction: row-reverse;
    }

    .cont1-flex{
        display: flex;
        justify-content: space-between;
        padding: 1em;
    }

    .cont1-flex:nth-child(3){ flex-direction: row; }
    .cont1-flex:nth-child(4){ flex-direction: row-reverse;}

        .cont1-img{
            width: 220px;
            height: 180px;
            padding: 3em;
            position: relative;
            border-radius: 6px;
        }

        .cont-img-1, .cont-img-4, .cont-img-5, .cont-img-8{ background-color: var(--bg-color-naranga);}
        .cont-img-2, .cont-img-3, .cont-img-6, .cont-img-7{ background-color: var(--bg-color-grey);}
        
        .cont-img-1::before, .cont-img-2::before, .cont-img-3::before, .cont-img-4::before, .cont-img-5::before, .cont-img-6::before{
            position: absolute;
            content: '';
            top: -10px;
            left: -10px;
            width: 100%;
            height: 100%;
            background-color: var(--bg-shadow-cuadro);
            z-index: -1;
            border-radius: 6px;
        }
            .cont1-flex:nth-child(1) .cont1-img::before{
                animation: ease-in-out cuadro-one infinite 4s;
            }

            @keyframes cuadro-one{
                0%{ top: -2%; }
                50%{ top: 6%; }
                100%{ top: -2%; }
            }
        
            .cont1-flex:nth-child(2) .cont1-img::before{
                animation: ease-in-out cuadro-two infinite 3.7s;
            }

            @keyframes cuadro-two{
                0%{ left: -4%; }
                50%{ left: 4%; }
                100%{ left: -4%; }
            }
            
            .cont1-flex:nth-child(3) .cont1-img::before{
                animation: ease-in-out cuadro-three infinite 4.5s;
            }

            @keyframes cuadro-three{
                0%{ top: 2%; }
                50%{ top: -4%; }
                100%{ top: 02%; }
            }
        
            .cont1-flex:nth-child(4) .cont1-img::before{
                animation: ease-in-out cuadro-four infinite 4.3s;
            }

            @keyframes cuadro-four{
                0%{ left: 4%; }
                50%{ left: 2%; }
                100%{ left: 4%; }
            }
            
            .cont1-flex:nth-child(5) .cont1-img::before{
                animation: ease-in-out cuadro-five infinite 4.5s;
            }

            @keyframes cuadro-five{
                0%{ left: 2%; }
                50%{ left: -4%; }
                100%{ left: 02%; }
            }
        
            .cont1-flex:nth-child(6) .cont1-img::before{
                animation: ease-in-out cuadro-six infinite 4.3s;
            }

            @keyframes cuadro-six{
                0%{ top: 4%; }
                50%{ top: 2%; }
                100%{ top: 4%; }
            }

        .cont1-text{
            width: 100%;
            height: 100%;
            padding: 0.5em 1.5em;
            position: relative;
        }

        .cont1-flex:hover{
            box-shadow: 0px 0px 10px -2px #9d9d9d;
            border-radius: 6px;
            cursor: pointer;
            background: white;
        }

            .cont1-text span{
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .cont1-btn{
                position: absolute;
                bottom: 5%;
                padding: 0.3em 1.3em;
                opacity: 0;
                text-decoration:none;
                box-shadow: 2px 2px 3px 1px #9d9d9d, -1px -1px 1px 0px orange;
                padding: 0.5rem 2rem;
                border-radius: 6px;
                color:inherit
            }

        .cont1-flex:hover .cont1-btn{
            opacity: 1;
        }

.sec-2{
    background: linear-gradient(to right, var(--bg-color-grey) 36%, white 36%);
    padding: 3em 0 2em;
    height: min-content;
}

    .sec2-grid{
        display: grid;
        grid-template-columns: 1fr 75%;
        grid-template-rows: repeat(2, auto);
        grid-gap: 10px;
        align-items: center;
        opacity: 0;
        transform: skew(10deg, 5deg);
        transition: 0.7s ease-in all;
    }

    .sec2-grid.visible{
        opacity: 1;
        transform: skew(0);
    }

    .sec2-grid-text {
        color: #fff;
    }

        .sec2-grid-text p{
            margin-top: 1.5em;
            line-height: 1.5em;
        }


    .sec2-grid-imgs{
        padding: 1em;
        width: 100%;
        position: relative;
    }
    
        .sc2-img-items{
            width: 100%;
            height: 250px;
            padding: 0 0.5em;
            
        }

        .sec2-grid-imgs::before{
            position: absolute;
            content: '';
            top: -2%;
            right: -2%;
            background-color: var(--bg-color-naranga);
            width: 85%;
            height: 30%;
        }

            .owl-sc2-img .sc2-img-items img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
    
    .sec2-grid-lists{
        width: 85%;
        margin:0 auto;
        float: right;
    }

        .sec2-grid-list{
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            margin-bottom: 1em;
        }

            .sec2-grid-list-icon{
                font-size: 1.6em;
            }

            .sec2-grid-list-text{
                font-size: 14px;
            }

.sec-3{
    background-color: var(--bg-color-plata);
    height: min-content;
    padding: 7em 0;
}

    .sec3-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18%, 1fr));
        grid-gap: 0px 10px;
        opacity: 0;
        transform: translateY(140px) scale(0.8);
        transition: 1s ease-in-out all;
    }

    .sec3-grid.visible{
        opacity: 1;
        transform: translateY(0) scale(1);
    }

        .sec3-grid-items{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            padding: 1em;
        }

            .sec3-grid-items:nth-child(2n+1){
                flex-direction: column-reverse;
            }

            .sec3-grid-items:nth-child(2n+1) .sec3-grid-img{
                flex-direction: column-reverse;
            }

                .sec3-grid-img{
                    display: flex;
                    flex-direction: column;
                    transition-duration: 1s;
                    opacity: 1;
                }
        
                    .sec3-grid-img div{
                        border:1px solid var(--bg-color-naranga);
                        border-radius:50%;
                        padding:1em;
                        margin:20px auto;
                        display: flex;
                        align-items: center;
                        justify-content:center;
                        font-size: 4em;
                        width:170px;
                        height:170px;
                        color: var(--bg-color-naranga);
                    }
                        
                    .sec3-grid-img h1{
                        color:white;
                        text-align: center;
                        position: relative;
                    }

            .sec3-grid-cont{
                transition-duration: 0.3s;
            }

                .sec3-grid-cont h1{
                 font-size: 25px;   
                }

                .sec3-grid-cont p{
                    margin-bottom: 20px;
                }
    
        .sec3-grid-items:hover{
            cursor: pointer;
            background-color: var(--bg-color-grey);
            color: #f6f6f6;
        }

            .sec3-grid-items:hover .sec3-grid-img div{
                transform: scale(1.15, 1.15);
                transition-duration: 0.6s;
            }

.sec-4{
    background: linear-gradient(60deg, #ffc900 50%, #00000099 45%);
    height: 100%;
    padding: 3.5em 0;
}

    .sec4-grid{
        display: grid;
        grid-template-columns: 32% 1fr 32%;
        grid-gap: 40px;
        opacity: 0;
        transform: scale(0.5);
        transition: 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) all;
    }

    .sec4-grid.visible{
        opacity: 1;
        transform: scale(1);
    }

    .sec4-grid-items{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
    }

        .sec4-grid-items i{
            font-size: 2em;
        }

        .sec4-grid-items li{
            padding: 0.85em;
            gap: 0px 20px;
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
        }

        .sec4-grid-items li p{
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 0rem;
        }

    .sec4-grid-items:last-child{
        color: white;
    }

        .sec4-grid-items:last-child li{
            flex-direction: row;
        }

    .sec4-grid-items li:hover{
        background-color: white;
        cursor: pointer;
        transform: scale(1.1, 1.1);
        transition-duration: 0.3s;
        border-radius: 6px;
    }

    .sec4-grid-items:last-child li:hover{
        color: var(--bg-color-grey);    
    }

.sec-5{
    height: 100%;
    min-height: max-content;
    padding:3em 0;
    opacity: 0;
    transform: translateX(-175px);
    transition: 1s ease-in all;
}

    .sec-5.visible{
        opacity: 1;
        transform: translateX(0);
    }

    .sec5-tit{
        display: block;
        margin: 2.5em auto;
        text-align: center;
    }

    .circle-wrap{
        display:grid;
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
        grid-template-rows: 1fr;
        grid-gap: 40px;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    

    .circle{
        height: 150px;
        margin: 0 auto;
        display:flex;
        justify-content:center;
        width: 100%;
    }

        .circle-wrap-items{
            display: flex;
            flex-direction:column;
            justify-content: space-between;
            height: 100%;
            position:relative;
        }

            .circle .mask, .circle .fill-1, .circle .fill-2,
            .circle .fill-3, .circle .fill-4, .circle .fill-5, .circle .fill-6{
                width: 150px;
                height: 150px;
                position:absolute;
                top:0;
                border-radius:50%;
            }

            .circle-wrap .circle .mask{
                clip: rect(0px, 150px, 150px, 75px)
            }

            .mask .fill-1, .mask .fill-2, .mask .fill-3,
            .mask .fill-4, .mask .fill-5, .mask .fill-6{
                clip: rect(0px, 76px, 150px, 0px);
            }

                .mask .fill-1{ background-color: var(--bg-color-grey); }

                    .mask.full-1, .circle .fill-1{
                        animation: fill1 ease-in-out 3s;
                        transform:rotate(135deg)
                    }

                    @keyframes fill1{
                        0%{transform: rotate(0deg);}
                        100%{transform: rotate(135deg);}
                    }

                .mask .fill-2{ background-color: var(--bg-color-naranga); }

                    .mask.full-2, .circle .fill-2{
                        animation: fill2 ease-in-out 3s;
                        transform:rotate(145deg)
                    }

                    @keyframes fill2{
                        0%{transform: rotate(0deg);}
                        100%{transform: rotate(145deg);}
                    }

                .mask .fill-3{ background-color: var(--bg-color-grey); }

                    .mask.full-3, .circle .fill-3{
                        animation: fill3 ease-in-out 3s;
                        transform:rotate(175deg)
                    }

                    @keyframes fill3{
                        0%{transform: rotate(0deg);}
                        100%{transform: rotate(175deg);}
                    }
                
                .mask .fill-4{ background-color: var(--bg-color-naranga); }

                    .mask.full-4, .circle .fill-4{
                        animation: fill4 ease-in-out 3s;
                        transform:rotate(175deg)
                    }

                    @keyframes fill4{
                        0%{transform: rotate(0deg);}
                        100%{transform: rotate(175deg);}
                    }
                
                .mask .fill-5{ background-color: var(--bg-color-grey); }

                    .mask.full-5, .circle .fill-5{
                        animation: fill5 alternate 3s;
                        transform:rotate(175deg)
                    }

                    @keyframes fill5{
                        0%{transform: rotate(0deg);}
                        100%{transform: rotate(175deg);}
                    }
                
                .mask .fill-6{ background-color: var(--bg-color-naranga); }

                    .mask.full-6, .circle .fill-6{
                        animation: fill6 alternate 3s;
                        transform:rotate(175deg)
                    }

                    @keyframes fill6{
                        0%{transform: rotate(0deg);}
                        100%{transform: rotate(175deg);}
                    }

                .inisde-circle{
                    width: 124px;
                    height: 124px;
                    border-radius: 50%;
                    background: #ffffff;
                    line-height: 120px;
                    position: absolute;
                    margin-top: 13px;
                    z-index: 10;
                    font-size: 2em;
                    font-weight: 700;
                    text-align: center;
                    color: var(--bg-color-black);
                }

            .circle-text{
                display: block;
                width:100%;
                margin-top: 15px;
                padding: 0 1.3em 0.8em;
            }

    .circle-wrap-items:hover .circle-text{
        cursor: pointer;
        background: #c4c4c482;
        border-radius: 6px;
        box-shadow: 0px 0px 2px -1px var(--bg-color-grey);
        color: var(--bg-color-black);
        transition-duration: 0.3s;
    }
    
    .circle-wrap-items:hover .circle{
        transform: scale(1.1,1.1);
        transition-duration: 0.3s;
    }

.sec-6{
    background-image: linear-gradient(to top, white 0 50%, #000000a6 50% 100%), url(../imagenes/header/edf-4.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 100%;
    padding: 2em 0 3em;
}

    .sec6-grid{
        grid-template-rows: repeat(2, 1fr);
        opacity: 0;
        transform: scale(0.6);
        transition: 1.7s ease-in-out all;
    }

    .sec6-grid.visible{
        opacity: 1;
        transform:scale(1);
        animation-timing-function: ease-in-out;
    }
    
        .sec6-tit{
            display: block;
            margin: 2.5em auto;
            width: 100%;
            text-align: center;
            color: white;
        }
        
        .sec6-flex{
            width: 100%;
            padding: 1em;
            gap: 2px;
        }

            .sc6-carousel-items{
                width: 100%;
                height: 100%;
                background-color: white;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: space-around;
                padding: 3em 2.5em;
                border: 1px solid var(--bg-color-plata);

            }
            
            .sc6-carousel-items:hover{
                transform: scale(1.05, 1.07);
                background-color: var(--bg-color-grey);
                transition-duration: 0.3s;
                color: white;
                cursor: pointer;
            }
            
            .sc6-carousel-items p{
                padding: 1em 0em 2em;
                line-height: 2em;                
            }

            .sc6-carousel-items button{
                background-color: var(--bg-color-naranga);
                padding: 0.6em 3em;
                border-radius: 6px;
                border: none;
                font-weight: bold;
            }

.sec-7{
    background: linear-gradient(to left, var(--bg-color-grey) 0% 36%, var(--bg-color-plata) 36% 100%);
    padding: 5em 0;
    min-height: 50vh;
    height: 100%;
}

    .sec7-flex{
        display: flex;
        justify-content: space-between;
        /* position: relative; */
        gap: 0 100px;
    }

    .sec7-form{    
        width: 100%;
        height: 100%;
        background-color: var(--bg-color-plata);
        padding: 1em;
        border-radius: 6px;
    }

        .sec7-form-group{
            width: 100%;
            padding: 0.5em 0.7em;
        }

            .sec7-form-label{
                margin-left: 0.5em;
                margin-bottom: 0.3em;
                display: block;
                font-size: 1.3em;
            }

            .sec7-form-input{
                width: 100%;
                padding: 0.7em 1em;
                border-radius: 6px;
                border: none;
                resize: none;
            }

            .sec7-form-group button{
                display: block;
                margin: 0 auto;
                background-color: var(--bg-color-naranga);
                color: var(--bg-color-grey);
                border: none;
                padding: 0.5em 6em;
                border-radius: 6px;
                font-size: 1.2em;
            }

    .sec7-contact{
        width: 48%;
        position: relative;
    }

        .sec7-contact::before{
            position: absolute;
            content: 'CONTACTO';
            text-align: center;
            top: 20%;
            right: 50%;
            padding: 0.7em 9em;
            font-size: 1.5em;
            font-weight: bold;
            transform: rotate(-90deg) translate(-25%, 0%);
            background-color: var(--bg-color-naranga);
            color: var(--bg-color-grey);
        }

        .sec7-contact-img{
            width: 80%;
            height: 60%;
            display: block;
            margin: 0em auto 2em;
        }

        .sec7-contact-items{
            font-size: 18px;
            padding: 0.5em 1em;
            display: flex;
            gap: 0px 20px;
            color: white;
        }
        .sec7-contact-items i{
            width: 25px;
            font-size: 1.5em;
        }

footer{
    background: linear-gradient(to bottom, white 0% 50%, var(--bg-color-black) 50% 100%);
}

    .footer{
        display: grid;
        grid-template-rows: 100px 1fr;
        height: 100%;
        color: var(--bg-color-black);
    }

    .footer-link{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5em 0.5em 0;
        font-size: inherit;
    }
    
        .footer-link a{
            color: var(--bg-color-grey);
            text-decoration: none;
            padding: 0.5em 3em;
        }

        .footer-link a:hover{
            background-color: var(--bg-color-plata);
            color: var(--bg-color-black);
            border-radius: 6px;
            transition-duration: 0.2s;
            box-shadow: 0px 1px 1px var(--bg-color-naranga);
        }

    .footer-pie{
        background-color: var(--bg-color-grey);
        padding: 1.5em;
        font-size: 16px;
        color: white;
        border-radius: 6px;
    }
    
        .footer-items{
            display: flex;
            justify-content: space-around;
            align-items: center;
            gap: 0px 5%;
            padding-bottom: 1.5em;
        }

            .footer-items-img{
                width: 40%;
                height: 150px;
            }

            .footer-items-abouts{
                width: 100%;
                display: block;
                text-align: center;
                display: -webkit-box;
                -webkit-line-clamp: 5;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;

            }


            .footer-items-social{
                width: 40%;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 0px 8%;                
            }

                .footer-items-social a{
                    color:inherit;
                    list-style: none;
                    text-decoration: none;
                    display: block;
                    text-align: center;
                    width: 100%;
                    height: max-content;
                    font-size: 1.5em;
                    padding: 0.4em 0;
                    border:1px solid white;
                    border-radius: 6px;
                }

                .footer-items-social a:hover{
                    background-color: white;
                    color: var(--bg-color-black);
                    cursor: pointer;
                    transition-duration: 0.3s;
                }
        
        .footer-copyright{
            border-top:1px solid var(--bg-color-plata) ;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 1.5em 0;
        }

            .footer-copyright ul{
                display: flex;
                gap: 10px 15px;
                margin-bottom: 1em;
            }

            .footer-copyright ul li:nth-child(1), .footer-copyright ul li:nth-child(2), .footer-copyright ul li:nth-child(3){
                padding: 0em 1em;
                /* border-left: 1px solid var(--bg-color-plata); */
                border-right: 1px solid var(--bg-color-plata);
            }

            .footer-copyright span a{
                color: var(--bg-color-naranga);
            }

/*********************************************************************************************************************************/
/*************************************************** SECCION NOSOTROS  ***********************************************************/
/*********************************************************************************************************************************/

    .TopSection{
        margin-top: 70px; min-height: 85vh; position: relative; background: url(../imagenes/nosotros/about-6.jpg) no-repeat; background-size: cover; background-attachment: fixed;
    }

    .TopSectionBarra{
        position: absolute; inset: 80% 0% auto auto; background: orange; display: block; height: max-content; transform: translate(0%, -50%); padding: 1.25rem 3.5rem 1.25rem 2.2rem;
        box-shadow: 5px 9px 8px 1px var(--bg-color-grey), -5px -9px 20px 1px #5b5b5b52;
        font-size: 1.85rem;
    }
    
    .bodySection{
        background: linear-gradient(to right, orange 0% 25%, #f5f5f5 25% 10%); min-height: 100vh;position: relative; padding: 2rem 0;
    }

    /* .bodySectionBarra{
        position: absolute; top: 0px; left: 0; background: gray; clip-path: polygon(0% 100%, 14% 80%, 100% 100%); width: 100%; display: block; height: 100%;
    } */

    .bodyFlex{
        width: 80%; margin: 0 auto; align-items: center; height: 100%; display: flex;
    }

    .bodyFlexVert{
        flex-direction: column; height: 100%; justify-content: space-evenly; display: flex; width: 100%;
    }

/*********************************************************************************************************************************/
/*************************************************** SECCION SERVICIOS  **********************************************************/
/*********************************************************************************************************************************/

    .TopServicios{
        margin-top: 70px; height: 85vh; background: url(../imagenes/servicios/servicios-1.jpg) no-repeat; background-size: cover; background-attachment: fixed;
    }

    .TopServiciosBarra{
        position: absolute; inset: 80% 0% auto auto; background: orange; display: block; height: max-content; transform: translate(0%, -50%); padding: 1.25rem 3.5rem 1.25rem 2.2rem;
        box-shadow: 5px 9px 8px 1px var(--bg-color-grey), -5px -9px 20px 1px #5b5b5b52;
        font-size: 1.85rem;
    }
    
    .bodyServicios{
        background: linear-gradient(45deg, orange 0% 25%, #f5f5f5 25% 75%, var(--bg-color-grey) 75% 100%); min-height: 100vh;position: relative; padding: 4rem 0;
    }

    .bodyServiciosContent{
        margin: 0 auto; width: 80%; display: grid; grid-template-columns: repeat(auto-fill, minmax(31%, 1fr)); gap:2%; ;
    }

    .ContentItems{
        box-shadow: 2px 2px 6px 2px #c4c4c4; background: white; padding: 1.5rem; border-radius: 8px; text-align: justify;
    }
    
    .ContentImg{
        place-items: center;
        display: grid;
        border-bottom: 1px solid grey;
    }
    .ContentImg figure{
        width: 75px;height: 75px;
    }
    .ContentBody{
        padding:0.5rem;
        line-height: 1.75rem;
        display: -webkit-box;
        -webkit-line-clamp: 12;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ContentItems:hover{
        box-shadow: 0px 0px 2px 2px var(--bg-color-naranga);
    }
/*********************************************************************************************************************************/
/*********************************************** SECCION SERVICIOS ITEMS  ********************************************************/
/*********************************************************************************************************************************/

.TopServiciosItems{
    margin-top: 70px; min-height: 85vh; position: relative; background-image: linear-gradient(45deg, white 0% 29.5%, grey 29.5% 30%, #00000069 30% 100%), url(../imagenes/nosotros/about-6.jpg); background-size: cover;
}

.TopServiciosImgItems{
    position: absolute; bottom: 7%; left: 7%; width: 170px; height: 170px; transform: translate(-7%, -7%);
}

.TopServiciosBarraItems{
    position: absolute; inset: 80% 3% auto auto; transform: translate(-3%, -50%); color:white; 
}
.TopServiciosBarraItems::before{ content: ''; position: absolute; inset: 106% -16% auto auto; width: 80%; height: 2px; background: orange; }
.TopServiciosBarraItems::after{ content: ''; position: absolute; inset: -22% 35% auto auto; width: 80%; height: 2px; background: orange; }

/*********************************************************************************************************************************/
/*************************************************** SECCION NOSOTROS  ***********************************************************/
/*********************************************************************************************************************************/


/*********************************************************************************************************************************/
/****************************************************** MEDIA QUERY **************************************************************/
/*********************************************************************************************************************************/

@media (max-width: 1367px) {
    .header-img{
        height: 100%;
        clip-path: polygon(65% 0%, 35% 100%, 100% 100%, 100% 0%);
    }
    
    .header-bloque{top: 22%;left: 3%;}

    .header-bloque span{font-size: 1.8em;}
    
    .header-bloque p{
        margin-top: 1em;
        margin-bottom: 1em;
        font-size: 1.2em;
        line-height: 1.5em;
    }

        .header-bloque-grid{
            margin: 0.5em 0;
            display: grid;
            grid-template-columns: 35px 1fr;
        }
        
        .header-bloque-grid{padding: 0;}
        .header-bloque-grid li:nth-child(1){display: flex;justify-content: center;align-items: center;}
        .header-bloque-grid i{
            color: var(--bg-color-grey);
            font-size: 1.4em;
        }

    .header-bloque button{
        padding: 0.5em 1.5em;
        color: var(--bg-color-grey);
        background-color: var(--bg-color-naranga);
        font-size: 1.2em;
        border: none;
        border-radius: 6px;
        margin-top: 1em;
    }
}

@media (max-width: 600px) {
    .cont-85{
        width: 90%;
    }

    nav ul{
        gap: 0.5em;
    }

    .nav-logo{
        height: 75%;
    }

    .header-img{
        clip-path: polygon(100% 0%, -53% 100%, 100% 100%, 100% 0%);
    }
    
    .header-bloque{
        background-color: #ffffffca;
        width: 75%;
        top: 20%;
    }

    .header-bloque span{
        font-size: 1.3em;
    }

    .header-bloque p{
        margin-top: 1.3em;
        margin-bottom: 1.3em;
        font-size: 0.8em;
        line-height: 1.4em;    
    }

    .header-bloque-grid {
        margin: 1em 0;
        display: grid;
        grid-template-columns: 30px 1fr;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .header-bloque button{
        margin-top: 1em;
        margin-bottom: 1em;
        font-size: 1em;
    }

    .owl-carousel .owl-item img{
        object-fit: cover;
    }

    .top-nav.abajo{
        padding: 10px 1em;
    }

    .sec-1{
        background: linear-gradient(to top, var(--bg-color-plata) 0% 33.5%, #ffffff00 33.5% 67%, var(--bg-color-plata) 67% 100%);
    }

    .sec1-grid{
        padding: 3em 0;
    }

    .cont1-flex:nth-child(2n+1), .cont1-flex, .cont1-flex:nth-child(3), .cont1-flex:nth-child(4){
        flex-direction: column;
        align-items: center;
    }

    .cont1-text{
        padding: 1.5em 0em;
    }

    .cont1-text span{
        margin-bottom: 1.5em;
    }

    .sec-2{
        background: linear-gradient(to bottom, var(--bg-color-grey) 36%, white 36%);
    }
    
        .sec2-grid{
            grid-template-columns: 100%;
            grid-gap: 40px 10px;
        }

            .sec2-grid-imgs{
                padding: 0;   
            }

            .sec2-grid-imgs::before{
                top: -1.5%;
                right: -2%;
                height: 18%;
            }

            .sec2-grid-lists{
                width: 100%;
            }
            
            .sec2-grid-list{
                flex-direction: column;
                gap: 0;
            }

    .sec-3{
        padding: 1em 0;
    }
        
        .sec3-grid{
            grid-template-columns: auto;
        }
    
    .sec4-grid{
        grid-template-columns: 100%;
    }

    .circle-wrap{
        grid-template-columns:auto;
    }

    .sec6-flex{
        flex-direction: column;
    }

    .sec6-tit{
        background: #ffffffac;
        padding: 2.5em 0.5em;
        margin: 0;
    }

    .submenu-img{
        margin: auto;
    }


    .sec-7{
        background: linear-gradient(to top, var(--bg-color-grey) 0% 45%, var(--bg-color-plata) 45% 100%);
        padding: 4em 0 7.5em;
    }

        .sec7-flex{
            flex-direction: column;
        }

        .sec7-flex::before{
            top: 0;
            right: 0;
            width: 100%;
            padding: 0.7em 0;
            transform: rotate(0deg) translate(0%, -140%);
        }

        .sec7-contact{
            width: 100%;

        }

    .footer{
        height: min-content;
        grid-template-rows:auto;
    }

        .footer-link {
            flex-direction: column;
            height: 100%;
            align-items: center;
            line-height: 2.2em;
            font-size: 1.8em;
        }

        .footer-link a{
            padding:0.5em 0;
        }

        .footer-pie{
            margin: 1em 0;
        }

            .footer-items{
                flex-direction: column;
            }

            .footer-items-abouts{
                padding: 1em 0;
            }

            .footer-items-img{
                width: 100%;
                height: 200px;
            }

            .footer-items-social{
                width: 100%;
            }
        
        .footer-copyright{
            text-align: center;
        }

            .footer-copyright ul{
                flex-direction: column;
                width: 100%;
                justify-content: center;
            }

            .footer-copyright ul li:nth-child(2){
                padding: 1em 0;
                border-top: 1px solid var(--bg-color-plata);
                border-bottom: 1px solid var(--bg-color-plata);
                border-left: none;
                border-right: none;
            }
    }