@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&display=swap');

/*Go down animation*/

@keyframes move {
  0% {
    transform: translate(0,-5px);
    opacity: 0;
  }
  50% {
    transform: translate(0,10px);
    opacity: 1;
  }
  100% {
    transform: translate(0,25px);
    opacity: 0;
  }
}

.grecaptcha-badge {
    opacity: 0!important;
    pointer-events: unset!important;
    height: 1px!important;
}
.grecaptcha-badge iframe {
    height: 1px;
}


.goDown svg polyline, .goDown svg line{
    animation:move infinite 1.3s ease-in-out;
}


/*Go down animation*/

.forminator-row:has(.displayNone) {
    display: none!important;
}
.displayNone {
    display: none!important;
}


span.recaptcha {
    color: grey;
    font-size: 0.7em;
    display: block;
    transform: translateY(50%);
    font-family: 'Open Sans';
}


.header {
    padding: 0px 3%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
}

.headerContainer {
    position: fixed;
    top: 5%;
    left: 50%;
    width: 75%;
    height: 6vh;
    border-radius: 50px;
    background-color: rgba(162,169,173, 0.68);
    z-index: 99;
    transform: translateX(-50%);
}

.logo {
    width: 17%;
    height: 100%;
}

.logo a {
    display: block;
    width: 100%;
    height: 100%;
}

.logo svg {
    width: 100%;
    height: 100%;
}

.desktopNav {
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
    margin-left: 6%;
}

.desktopInnerDropdown {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 150%;
    min-height: 12vh;
    transform: scaleY(0);
    pointer-events: none;
    justify-content: center;
    align-items: flex-start;
    transform-origin:top;
    transition: transform 0.2s cubic-bezier(.26,1.13,.79,.95);
}

.desktopInnerDropdown {
    background-color: white;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    padding-top: 2vh;
    padding-bottom: 2vh;
}

.desktopDropdown {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.desktopContact {
    margin-left: auto;
    margin-right: 3%;
}

.desktopSocial {
    display: flex;
    flex-direction: row;
}

.desktopSocial>div {
    width: 30px;
    height: 30px;
    margin: 0em 0.5em;
}

.desktopNav a {
    margin: 0 1.6vw;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    color: white;
    transition: all 0.15s ease-in-out;
    text-decoration: unset;
    font-size: 0.9em;
}

.desktopNav a:hover {
    transform: scale(1.05);
    color: #000f9f;
}

.desktopContact a {
    color: white;
    text-decoration: unset;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    padding: 0.3em 1.7em;
    background-color: #000f9f;
    border-radius: 50px;
    transition: all 0.15s ease-in-out;
}

.desktopContact a:hover {
    color: #ffc629;
}

.desktopDropdown:hover .desktopInnerDropdown{
    transform: scaleY(1);
}

.desktopInnerDropdown:hover{
        transform: scaleY(1);
}

.desktopDropdown::after {
    content: '';
    width: 100%;
    height: 5px;
    background-color: #ffc629;
    position: absolute;
    top: 100%;
    transition: transform 0.2s cubic-bezier(.26,1.13,.79,.95);
    left: 0;
    transform-origin:top;
    transform: scaleY(0);
}

.desktopDropdown:hover .desktopInnerDropdown,
.desktopInnerDropdown:hover {
  pointer-events: auto;
}


.desktopDropdown:hover::after{
    transform: scaleY(1);
    opacity:1;

}

body {
    background: rgba(242, 242, 242,0.31);
    border: 6px solid #747678;
    border-bottom: unset; 
}


.desktopInnerDropdown a {
    color: #000f9f;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.15s ease-in-out;
    padding: 0.3em 0;
    padding-left: 26px;
    margin: unset;
    border-left: 0px solid #ffc629;
}


.desktopInnerDropdown a:hover {
    background-color: rgba(162,169,173,0.31);
    transform: unset;
    color: #000f9f;
    margin: unset;
    border-width:4px;
}

.desktopInnerDropdown>a:last-child {
    border-bottom-left-radius: 6px;
}


.activeLink {
    color: #000f9f!important;
    font-weight: 700!important;
}


.socialFacebook:hover svg * {
    fill: #000f9f!important;
}

.socialFacebook svg *{
    transition:all 0.15s ease-in-out
}


html body .header .socialInstagram:hover svg * {
    fill: #ffc629!important;
}

.socialInstagram svg *{
    transition:all 0.15s ease-in-out
}


.header svg .logo  path:nth-of-type(1),
.header svg .logo  path:nth-of-type(2),
.header svg .logo  path:nth-of-type(3) {
  transition: fill 0.25s;
}

.header .logo svg:hover path:nth-of-type(1),
.header .logo  svg:hover path:nth-of-type(2),
.header .logo  svg:hover path:nth-of-type(3) {
  fill: #000f9f!important;
}

.header .logo svg * {
    transition: fill 0.25s;
}

.header .logo  svg:hover polygon:nth-of-type(1),
.header .logo  svg:hover path:nth-of-type(4),
.header .logo  svg:hover polygon:nth-of-type(2),
.header .logo  svg:hover path:nth-of-type(5),
.header .logo  svg:hover polygon:nth-of-type(3) {
  fill: #dfb743!important;
}


.headerMenuPhone {
    display: none;
}

.mobileMenu {
    display: none;
}

.desktopSocial>div>a {
    display: block;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width:1600px){
    .headerContainer {
    width: 90%;
}
}


@media only screen and (max-width:1200px){
/*Burger Menu*/
    .desktopContact{
        display:none;
    }

    .desktopNav {
    display: none;
}

      .displayNone {
        display: none!important;
    }

    .headerContainer {
    top: 2.5%;
}



.headerMenuPhone {
    display: flex;
    justify-content: flex-end;
    position: relative;
    transform: scale(0.85) translateX(30%);
}


.menu svg {
        width: 50px;
        height: 50px;
    }



    button.menu {
    background-color: transparent;
    border: none;
    position: relative;
}
    .line {
        fill: none;
        stroke: #000f9f;
        stroke-width: 6;
        transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke 600ms ease-in-out;
    }
    .line1 {
        stroke-dasharray: 60 207;
        stroke-width: 6;
    }
    .line2 {
        stroke-dasharray: 60 60;
        stroke-width: 6;
    }
    .line3 {
        stroke-dasharray: 60 207;
        stroke-width: 6;
    }
    .opened .line1 {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
        stroke-width: 6;
    }
    .opened .line2 {
        stroke-dasharray: 1 60;
        stroke-dashoffset: -30;
        stroke-width: 6;
    }
    .opened .line3 {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
        stroke-width: 6;
    }

/* /Burger Menu*/

.desktopSocial>div {
    width: 20px;
    height: 20px;
    margin: 0em 0.3em;
}

.menu.opened .line{
    stroke:#ffc629;
}

.logo {
    width: 28%;
    height: 100%;
}

.header {
    justify-content: space-between;
    width: 100%;
    margin-bottom: auto;
    padding: 0px 5%;
    height: 6vh;
    position: relative;
}

.desktopSocial {
    margin-left: auto;
    transform: translateX(20px);
}


.headerContainer {
    display: flex;
    flex-direction: column;
    transition: height 0.5s cubic-bezier(.7,.09,.39,.86), border-radius 0.15s ease-in-out;
    width: 90%;
    overflow: clip;
    background: #a1a8ae;
}

.mobileMenu {
    display: flex;
    flex-direction: column;
    width: 93%;
    height: 70%;
    margin: auto auto;
    padding-bottom: 6vh;
    box-sizing: border-box;
    justify-content: space-between;
 background-image: url("data:image/svg+xml,%3Csvg id='Capa_1' data-name='Capa 1' xmlns='http://www.w3.org/2000/svg' style='opacity:0.05' viewBox='0 0 117.68 70.52'%3E%3Cpath d='M304.38,4159.6q-1.67-.83-7.85-3.23l-6.64-2.68c-3.7-1.66-5.54-3.66-5.54-6a4.75,4.75,0,0,1,2.17-4.1,10.16,10.16,0,0,1,6-1.53h30.68v21.36l15.23-18.24v-17.42H292.29q-10.8,0-17.54,5.81a18.58,18.58,0,0,0-6.74,14.68q0,11.27,11,17.26a78.42,78.42,0,0,0,8.77,3.78l6.09,2.22q5.91,2.58,5.91,6.37a5.19,5.19,0,0,1-2.49,4.47,11.2,11.2,0,0,1-6.46,1.71q-10.89,0-18.55-9L264,4185.91a31,31,0,0,0,11.67,9.18,36,36,0,0,0,15.1,3.18q11.63,0,18.73-6a18.91,18.91,0,0,0,7.2-15.33Q316.65,4165.15,304.38,4159.6Z' transform='translate(-263.95 -4127.76)' style='fill:%23ffc629'/%3E%3Cpolygon points='117.68 0 99.21 0 59.2 47.9 59.2 70.25 79.17 46.26 99.21 70.25 117.68 70.25 88.44 35.13 117.68 0' style='fill:%23000f9f'/%3E%3C/svg%3E");    background-repeat: no-repeat;
    background-size: 0;
    background-position: 50% 50%;
}

.mobileMenu.opened {
    background-size: 90%;
    transition: background-size 0.5s cubic-bezier(.7,.09,.39,.86) ;
}

.headerContainer:has(.menu.opened) {
    height: 40vh;
    border-radius: 30px;
}


.headerPhoneContact {
    color: white;
    text-decoration: unset;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    padding: 0.3em 1.7em;
    background-color: #000f9f;
    border-radius: 50px;
    transition: all 0.15s ease-in-out;
    display: block;
    width: fit-content;
    position: absolute;
    top: 100%;
    left: 100%;
    transform: translate(-125%,-150%);
    opacity: 0;
    pointer-events: none;
}

.mobileMenu.opened .headerPhoneContact {
    opacity: 1;
    transition: all 0.65s ease-in-out;
    pointer-events:all;
}


.header::after {
    content: '';
    width: 90%;
    height: 3px;
    background: #0b109f;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%)scaleX(0);
    transform-origin: left;
}

.mobileMenu a {
    margin: 0 1.6vw;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    color: white;
    transition: all 0.35s ease-in-out;
    text-decoration: unset;
    font-size: 1em;
}




.headerContainer:has(.menu.opened) .header::after {
    transform: translateX(-50%)scaleX(1);
    transition: all 0.55s cubic-bezier(.7,.09,.39,.86);
}



}


@media only screen and (max-width:600px){
    .logo {
    width: 48%;
    height: 100%;
}
body {
    border: 4px solid #747678;
}

}

/* BOTÓN FLOTANTE WHATSAPP */

.botonWhatsapp {
    position: fixed;
    background-color: rgb(37, 211, 102);
    width: 11vh;
    z-index: 99;
    top: calc(100% - 11vh - 25px);
    left: calc(100% - 11vh - 31px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    filter: drop-shadow(-7px 2px 8px rgb(0, 0, 0, 0.3));
}

.botonWhatsapp:hover {
    animation: bounce 0.8s;
    animation-iteration-count: 1;
}

@keyframes bounce {
	0% {transform: translateY(0);}
    30% {transform: translateY(-18px)}
    50% {transform: translateY(0);}
	70% {transform: translateY(-8px);}
    100% {transform: translateY(0);}
}

.botonWhatsapp > svg {
    width: 50%;
}

@media only screen and (max-width: 600px) {
    .botonWhatsapp {
        width: 9vh;
        top: calc(100% - 9vh - 15px);
        left: calc(100% - 9vh - 19px);
    }
}

/* BOTÓN FLOTANTE WHATSAPP */