:root{
    --azul: #1E4A71;
    --azulMask: #1E4A7180;
    --amarillo: #EBA70E;
    --amarilloMask: #EBA70E80;
}
@font-face {
    font-family: 'ai-black';
    src: url(../fonts/Aileron-Black.otf);
}
@font-face {
    font-family: 'ai-semi';
    src: url(../fonts/Aileron-SemiBold.otf);
}
@font-face {
    font-family: 'arbotek';
    src: url(../fonts/Arbotek-Thin.otf);
}
@font-face {
    font-family: 'caviar';
    src: url(../fonts/CaviarDreams.ttf);
}
@font-face {
    font-family: 'coco';
    src: url(../fonts/CocogooseProThin.ttf);
}
*{
    margin: 0;
    padding: 0;
    font-family: ai-semi;
}
*,*::before,*::after{
    box-sizing: border-box;
}
body{
    min-height: 100dvh;
}
html{
    scroll-behavior: smooth;
}
body, html{
    scrollbar-color: #EBA70E70 #1E4A7130;   
    overflow-x: hidden;
}
input, button, textarea, select{
    font: inherit;
}
p{
    text-wrap: pretty;
}
h1,h2,h3,h4,h5,h6{
    text-wrap: balance;
}
img, video, svg{
    height: auto;
    max-width: 100%;
}
a{
    text-decoration: none;
    color: inherit;
    display: inline-block;
}
h1, h2{
    font-family: ai-black;
    color: var(--amarillo);
}
h1{
    font-size: 35px;
   
}
p, a, li{
    font-size: 18px;
    line-height: 2rem;
}
/* ---------------------------------------- */
.transition300-btn{
    transition: 300ms ease-in-out;
}
.transition300-btn:hover{
    transform: scale(1.1);
}
.transition-300-left{
    position: relative;
    left: 0;
    transition: 300ms ease-in-out;
}
.transition-300-left:hover{
    left: -5px;
}
.wrapper-1400{
    max-width: 1400px;
    margin: auto;
}
.wrapper-1700{
    max-width: 1700px;
    margin: auto;
}

/* ---------------------------------------- */
.scaleX-1{
    transform: scaleX(-1);
}
.bright-120{
    filter: brightness(120%);
}
.shad{
    -webkit-box-shadow: 0px 2px 25px 0px rgba(204,204,204,1);
    -moz-box-shadow: 0px 2px 25px 0px rgba(204,204,204,1);
    box-shadow: 0px 2px 25px 0px rgba(204,204,204,1);
}
.dropShad{
    filter: drop-shadow(2px 2px 4px rgba(204,204,204,1));
}
.shadClaro{
    -webkit-box-shadow: 0px 2px 25px 0px rgba(221,221,221,1);
    -moz-box-shadow: 0px 2px 25px 0px rgba(221,221,221,1);
    box-shadow: 0px 2px 25px 0px rgb(221, 221, 221);
}
.intro-seccion{
    text-align: center;
    min-height: max(40dvh,450px);
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 40px;
    padding: 6rem 12rem;
}
@media (max-width: 780px) {
    .intro-seccion {
        padding: 6rem 1rem;
    }
}
.tag-dofa{
    color: var(--amarillo);
    font-weight: bold;
}
.ico-fixed{
    clip-path: polygon(15px 0%, 100% 0%, 100% 100%, 0% 100%);
    position: fixed;
    right: 0;
    z-index: 110;
    width: 70px;
    height: 70px;
    padding: 1rem;
    padding-right: 0;
    cursor: pointer;
}
.menu-mov-ico{
    display: none;
    background-color: var(--amarillo);
    top: 25px;
}
.whp{
    top: 110px;
    background-color: #25D366;
}
.menu-mov-ico img, .whp img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.header.header-secciones{
    overflow: hidden!important;
    height: auto!important;
}
.banenr-txt-home.banenr-txt-home-secciones{
    position: relative!important;
    
}
/* ---------------------------------------- */
.flecha-bg{
    position: absolute;
    top: -25%;
    left: 50%;
    width: 100vw;
    z-index: 1;
    max-height: calc(100% + 900px);
}
.info-dofa, .marquee-section, .info-parrafo{
    position: relative;
    z-index: 2;
}
/* --- */
.header{
    background-image: url('../images/barco-banner.webp');
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;
    height: max(100dvh,550px);
    padding: 4rem;
    position: relative;
}
.header-servicios{
    background-image: url('../images/servicios.webp');
    background-attachment: fixed;
    background-position: top;
    background-size: cover;
    height: max(100dvh,550px);
    padding: 4rem;
    position: relative;
}
@media (max-width: 580px) {
    .header-servicios {
        background-position: bottom;
    }
}
.header-proyectos{
    background-image: url('../images/proyectos.webp');
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;
    height: max(100dvh,550px);
    padding: 4rem;
    position: relative;
    background-position-x: 10%;
}
.header-nosotros{
    background-image: url('../images/nosotros.webp');
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;
    height: max(100dvh,550px);
    padding: 4rem;
    position: relative;
}
.header-contacto{
    background-image: url('../images/contacto.webp');
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;
    height: max(100dvh,550px);
    padding: 4rem;
    position: relative;
    background-position-x: 30%;
}
@media (max-width: 1024px){
    .header-nosotros{
        min-height: 768px;
    }
    .header-servicios{
        min-height: 768px;
    }
    .header-contacto{
        min-height: 768px;
    }
    .header-proyectos{
        min-height: 768px;
    }
}

.header::before{
    content: "";
    background-color: var(--azulMask);
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 2;
}
.brand-container{
    width: fit-content;
    margin-bottom: 3rem;
}
.brand-container img{
    width: clamp(100px, 100%,300px);
    height: auto;
}
.nav-menu{
    position: relative;
    z-index: 75;
    margin-top: 2rem;
}
.nav-links{
    color: white;
    display: flex;
    flex-direction: column;
    width: fit-content;
    gap: 2rem;
    font-weight: bold;
}
.banenr-txt-home{
    position: absolute;
    text-align: right;
    font-size: 65px;
    color: white;
    position: absolute;
    right: 5%;
    bottom: 10%;
    z-index: 25;

}
.maxWidth{
    max-width: 900px;
}
@media (max-width: 1025px){

}
.info-dofa{
    padding: 8rem 0;
}
.slider.info-dofa-flex-element, .info-dofa-flex-element{
    width: calc(40% - 1.5rem);
}
.slider.info-dofa-flex-element{
    flex-grow: 1;
}
.info-dofa .img-info-dofa{
    text-align: center;
}
.img-info-dofa img{
    padding: 15%;
    width: 50rem;
}
.info-dofa-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* ---------------------------------------- */
.section-clientes{
    padding: 8rem 0;
}
.clientes-titulo{
    color: var(--azul);
    text-align: center;
    margin-bottom: 2rem;
}
.marquee-container{
    width: 100%;
    overflow: hidden;
    background-size: cover;
    margin-bottom: 5rem;
}
.marquee{
    display: flex;
    gap: 7rem;
    animation: marquee 20s alternate infinite ease-in-out;
    min-height: 90px;
}
.marquee img{
    width: 200px;
    height: 90px;
    box-sizing: content-box;
    object-fit: contain;
}
@keyframes marquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-1850px); }
}
/* ---------------------------------------- */
.info-parrafo{
    position: relative;
}
.info-parrafo-txt-container{
    max-width: 800px;
    width: 40%;
    width: clamp(min(440px, 100%), 40%,800px);
    margin: auto;
    text-align: center;
}
.info-parrafo-txt-container h1{
    margin-bottom: 1rem;
}
.flechas-div{
    display: flex;
    justify-content: space-between;
    position: absolute;
    inset: 10% 0 auto 0;
    z-index: -1;
    pointer-events: none;
}
.flechas-div img{
    width: 25%;
    max-width: calc(50% - 230px);
}
.flechas-div img:nth-child(2){
    transform: rotate(180deg);
}
/* ---------------------------------------- */
.flex-img-dofa{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: 8rem 0;
}
.flex-img-dofa-element{
    width: calc(50% - 1.5rem);
}
.img-dofa-container{
    align-self: stretch;
    aspect-ratio: 16/9;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
    overflow: hidden;
}
.flex-img-dofa-element img{
    width: 100%;
    height: 100%;
    /* clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%); */
    object-fit: cover;
}
.txt-img-dofa{
    padding: 2rem 1rem;
    padding-left: 0;
}
.txt-img-dofa h1{
    margin-bottom: 1rem;
}
.wrapper-flex-img-dofa{
    max-width: 750px;
    margin-left: auto;
    padding-left: 4rem;
}
@media (max-width: 480px) {
    .wrapper-flex-img-dofa {
        padding-left: 2rem;
    }
}
.link-proyectos-a span{
    display: block;
    padding: 0.5rem 1rem;
    font-family: ai-black;
    margin-left: 35%;
}
.link-proyectos-a{
    font-size: 25px;
    margin-top: 1rem;
    background-color: var(--azul);
    color: var(--amarillo);
    width: 100%;
    clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 100%, 0% 100%);
}
/* ---------------------------------------- */
.footer{
    padding: 5rem 1rem;
    text-align: center;
    color: black;
    font-weight: bold;
    background-color: var(--amarillo);
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
}
.footer img{
    width: 6%;
    height: auto;
    margin-left: 47%;
    margin-top: 1%;
}
.link-hov-amarillo{
    transition: 300ms;
    margin-bottom: 1rem;
}
.link-hov-amarillo:hover{
    color: var(--amarillo);
}
.link-hov-blanco{
    transition: 300ms;
    margin-bottom: 1rem;
}
.link-hov-blanco:hover{
    color: white;
}
/* ---------------------------------------- */
.contacto{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.contacto-f-element{
    width: 45%;
    overflow: hidden;
}
.formulario-container{
    width: 45%;
} 
/* ---------------------------------------- */
.txt-formulario-container h1{
    font-size: 48px;
}
.txt-formulario-container p{
    font-weight: bold;
}
.contact-label{
    display: block;
}
.contact-label + .contact-label{
    margin-top: 15px;
}
.contact-label .input-format{
    display: block;
    border: 0;
    border-bottom: solid var(--azul) 2px;
    color: var(--azul);
    padding: 0.5rem 1rem;
    width: 100%;
    background-color: white;
    transition: background-color 300ms;
    min-height: 40px;
}
.contact-label .input-format:focus{
    outline: none;
    background-color: #f8f6f6;
}
textarea.input-format{
    resize: vertical;
    max-height: 150px;
}
.txt-formulario-container, .formulario-contacto{
    max-width: 800px;
    margin: 3rem 0 3rem 25%;
    padding-inline: 1rem;
}
.submit-btn-container .submit-contacto{
    background: url('../images/btn-bg.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    color: white;
    font-weight: bold;
    border: 0;
    padding: 10px;
    font-size: 20px;
    cursor: pointer;
}

/* ---------------------------------------- */
.mapa-container{
    text-align: right;
    padding-right: 7vw;
}
.mapa-container iframe{
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
    width: 90%;
    margin-top: 2rem;
}
.dato-cont{
    text-align: right;
    width: clamp(100px,90%,600px);
    margin-left: auto;
}
.dato-cont h2{
    background-color: var(--azul);
    clip-path: polygon(20px 0%, 100% 0%, 100% 100%, 0% 100%);
    padding: 3px 1.5rem;
    margin-bottom: 1rem;
}
.dato-cont h2, .dato-cont a{
    padding-right: 7vw;
}
.dato-cont + .dato-cont{
    margin-top: 1.5rem;
}

@media (max-width:1025px){
    .info-dofa{
        padding-top: 1rem;
    }
    .info-dofa-flex{
        flex-direction: column;
    }
    .info-dofa-flex-element, .slider.info-dofa-flex-element{
        width: 95%;
    }
    .img-info-dofa-container.info-dofa-flex-element{
        max-width: 450px;
    }
    .info-parrafo-txt-container{
        padding: 0 1rem;
    }
    /* ---------------------------------------- */
    .contacto{
        flex-direction: column;
        gap: 5rem;
    }
    .contacto-f-element{
        width: 100%;
    }
    .mapa-container {
        padding-right: 0;
    }
    .mapa-container iframe{
        width: 100%;
    }
    .footer img{
        width: 25%;
        height: auto;
        margin-left: 35%;
        margin-top: 2%;
        margin-bottom: 5%;
    }
    .header {
        min-height: 718px;
        height: max(80dvh,550px);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top;
    } 

}
@media (max-width:800px){
    .menu-mov-ico{
        display: block;
    }
    /* ---------------------------------------- */
    .flecha-bg{
        display: none;
    }
    .nav-links{
        width: 0%;
        height: 0%;
        border-radius: 50%;
        border-top-left-radius: 0;
        position: fixed;
        left: 0;
        top: 0;
        opacity: 0;
        margin: auto;
        justify-content: center;
        align-items: center;
        background-color: #095699E3;;
        transition: 400ms ease-in-out;
        pointer-events: none;
        overflow: hidden;
    }
    .nav-links-active{
        width: 100%;
        height: 100%;
        border-radius: 0%;
        pointer-events: all;
        opacity: 1;
    }
    .header.header{
        padding: 3rem 1rem;

    }
    .brand-container{
        width: max(70%,200px);
    }
    .brand-container img{
        width: 100%;
    }
    .slides .slide{
        padding-right: 20px;
    }
    .slider .nav-dots{
        display: none;
    }
    .header {
        min-height: 700px;
        height: max(80dvh,550px);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top;
    } 
    .header-contacto {
        height: max(50dvh,550px);
        background-size: 1150px;
        background-repeat: no-repeat;
        background-position: top;
    }

    /* ---------------------------------------- */
    .flex-img-dofa{
        flex-direction: column-reverse;
    }
    .flex-img-dofa-element{
        width: 100%;
    }
    /* ---------------------------------------- */
}
@media (max-width:500px){
    .txt-formulario-container h1{
        font-size: 38px;
    }
    .banenr-txt-home{
        font-size: 40px;
        padding: 1rem;
        width: 100%;
        inset-inline: 0;
        text-align: center;
    }


    /* Contacto -------- */
    .txt-formulario-container, .formulario-contacto {
        max-width: 800px;
        margin: 3rem auto 3rem;
    }
}

/* captcha-- ---------------- */
.g-recaptcha {
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu-container a {
    font-size: 30px;
}

/* privacidad-------------------------------- */
.privacidad {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    margin: 4rem;
}
.btn-regresar button {
    background: url('../images/btn-bg.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    color: white;
    font-weight: bold;
    border: 0;
    padding: 10px;
    font-size: 20px;
    cursor: pointer;
}
.header-privacidad{
    background-image: url('../images/privacidad.webp');
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;
    height: max(100dvh,550px);
    padding: 4rem;
    position: relative;
}
@media (max-width:800px) {
    .header-privacidad {
        height: max(50dvh,550px);
        background-size: 1150px;
        background-repeat: no-repeat;
        background-position: top;
    }

    .header-privacidad h1 {
        font-size: 40px;
        bottom: 5%;
    }
    .goog-te-gadget{
    margin-right: 3rem;
    }
}

.nav-azul a {
/*    color: var(--azul);*/
    text-shadow: 1px 1px 1px #000000;
}

.traductor{
    position: relative; 
    z-index:999; 

    margin-left: auto; 
    margin-top: -4rem;
}
.div-nav-cont{
    flex-flow: row;
}
.banenr-txt-home font {
    font-family: ai-black;
    font-size: 5rem;
}
nav .VIpgJd-ZVi9od-l4eHX-hSRGPd, .goog-te-gadget{
    color: #FFF!important;
}

@media(max-width: 670px){
    .traductor{
        width: 100%;
        margin-right: 0;
    }
    .brand-container{
        margin-top: 150px;
    }
    .div-nav-cont{
        flex-flow: column;
        align-items: center;
        flex-direction: column-reverse;

    }
    h1 font{

        font-size: 40px !important;

    }
    
}