@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600;700&display=swap');

@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}
@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@keyframes hideName {0% {opacity: 1;} 100% {opacity: 0;}}
@keyframes moveName {0% {bottom: 0;} 100% {bottom: 40%;}}
@keyframes showName {0% {opacity: 0;} 100% {opacity: 1; }}

@keyframes full {
    0% {opacity: 1; bottom:0px;}
    25% {opacity: 0; bottom:0px;}
    50% {opacity: 0; bottom:40%;}
    100% {opacity: 1; bottom:40%;}
}

:root {
    --color1: #000000;
    --color2: #016CB6;
    --color3: #F4F4F4;
    --color4: #FFFFFF;
    --fontsize1: 2.3em;
    --fontsize2: 1.6em;
    --fontsize3: 1.1em;
    --fontfamily: 'IBM Plex Sans', sans-serif, arial;
}

body {color: var(--color1); background-color: var(--color4); font-family: var(--fontfamily); font-size: 15px;}
.container {max-width: 1140px;}
.mobile {display: none;}
#menu {display: none;}
ul {margin: 0px; padding: 0px; list-style-type: none;}
h2 {font-size: var(--fontsize1); line-height: 1.4em; font-weight: 600;}
h3 {font-size: var(--fontsize2); line-height: 1.5em; font-weight: 600; text-transform: uppercase;}
h4 {font-size: var(--fontsize3); font-weight: 600; text-transform: uppercase;}
h2, h3, h4 {width: 90%; margin-bottom: 15px;}
section {padding: 60px 0px;}
section img {width: 100%;}
a {text-decoration: none;}

ul li {position: relative; padding-bottom: 5px;}

.cont-swiper {position: relative; padding-bottom: 25px;}
.cont-swiper .swiper-pagination {bottom: 0px !important;}
.swiper-pagination-bullet {border: 1px solid var(--color2)!important; background-color: transparent !important; opacity: 1 !important;}
.swiper-pagination-bullet-active {border: 1px solid var(--color2) !important; background-color: var(--color2) !important;}
.swiper-container {overflow: hidden; position: relative;}
.swiper-button-prev,.swiper-button-next  {width: 35px !important; height: 40px !important;}
.swiper-button-prev {background-image: url(../img/arrow-prev-black.svg); background-repeat: no-repeat; background-size: 100% auto;background-position: center;}
.swiper-button-next {background-image: url(../img/arrow-next-black.svg); background-repeat: no-repeat; background-size: 100% auto;background-position: center;}
.swiper-button-prev:after {display: none;}
.swiper-button-next:after {display: none;}

.number {color: var(--color2);}
section h3 {line-height: 1.15em; color: var(--color2);}
section ul li {position: relative; padding-bottom: 5px; font-size: var(--fontsize3);}
section ul li::before {content: url('../img/arrow-right-blue.svg'); object-fit: cover; position: absolute; left: -17px; top: 1px; width: 10px; height: 10px;}

#consultoria, #obras {background-color: var(--color3);}

.navbar {background: transparent !important; padding: 12px 0px; transition: background-color 0.4s ease; }
.frasetop {font-size: 14px; line-height: 18px;}
.navbar-nav li {font-weight: 500; font-size: .95em;}
.navbar-nav li::before {content: none;}
.navbar-nav .nav-link {padding-left: 15px !important; padding-right: 15px !important;}

.logo-top {transition: all 0.6s ease; height: 48px; width: auto;}

.info-top .info-contact {display: flex; gap: 20px;}
.info-top, .info-top a {color: #fff;}

.navbar.head-compress {background-color: rgba(255, 255, 255,.95) !important; padding: 6px 0px;}
.navbar.head-compress .logo-top {height: 30px; width: auto;}
.navbar.head-compress .info-top, .navbar.head-compress .info-top a {color: #000;}
.navbar:not(.head-compress) .logo-white path, .navbar:not(.head-compress) .logo-white rect {fill: #fff;}

.infoder {padding-left: 40px;}

footer {padding-top: 40px; padding-bottom: 40px;}
footer .info-contact {width: 95%;}
footer .info-contact li {position: relative; padding-bottom: 5px; font-size: var(--fontsize4);}
footer .info-contact li svg {content: url('../img/arrow-right-blue.svg');  position: absolute; left: -24px;
    top: 4px;
    width: 16px;
    height: auto;}
footer a {color: var(--color1);}

/* video */
.contvideo {padding: 0px; position: relative; height: 90vh;position: relative;display: flex;justify-content: center;align-items: center; background-color: var(--color2);}
.contvideo h2 {text-transform: uppercase; line-height: 1.2em;}
.contvideo p {max-width: 500px; font-size: var(--fontsize3); margin-bottom: 0px;}
.contvideo .arrow {position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);}

.swiper-home-desktop {height: 100%; width: 100%; z-index: 0;}
.swiper-home-desktop img {object-fit: cover; height: 100%; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.video-container {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}
.video {width: 100%;height: 100%;object-fit: cover;}

.info {background-color: rgba(1, 108, 182, 0.5); /* Fondo con opacidad */color: #fff; /* Color de texto */padding: 20px;text-align: center;position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden; display: grid;grid-template-columns: 1fr 1fr; align-items: center;text-align: center;}
.info::after {content: ''; position: absolute; z-index: 0; width: 100%; height: 100%; background: rgb(1,108,182);background: linear-gradient(0deg, rgba(1,108,182,.8) 0%, rgba(1,108,182,0) 100%);}
.info-content {grid-column: 2; text-align: left; z-index: 1;}

#profesionales {position: relative; overflow: hidden; background-color: var(--color2); color: var(--color4); padding: 85px 0px;}
#profesionales h3 {color: var(--color4); max-width: 500px; margin-bottom: 40px;}
#profesionales .boxes {position: absolute; right: 0; top: 0; height: 45px; width: auto; opacity: 0.1;}
#profesionales .outlinelogo {position: absolute; left: 0; bottom: -50px; width: 50%; opacity: 0.1;}

/* footer */
footer {background-color: var(--color4); padding-top: 60px;}

.copyfooter {font-size: 12px; font-weight: 300; padding-top: 20px;}
.footer-legal {padding-top: 0px;color: #B9B9B9;padding-bottom: 0px; margin-top: 25px; text-align: left;}

/* Zurbrand */
.cont-logo-zurbrand {text-align: right;}
.link-zurbrand {color: #B9B9B9; padding-top: 17px; padding-bottom: 20px; display: inline-block; -moz-transition: all 0.3s ease-out;  /*FF3.7+*/ -o-transition: all 0.3s ease-out;  /*Opera 10.5*/ -webkit-transition: all 0.3s ease-out;  /*Saf3.2+, Chrome*/ transition: all 0.3s ease-out;}
.link-zurbrand:hover {opacity: 0.8;}
.logo-zurbrand {height: 13px; width: auto; fill: currentColor;}

@media screen and (max-width: 767px) {

.desktop {display: none;}
.mobile {display: inherit;}

.container, .container-fluid {padding-left: 1.5rem; padding-right: 1.5rem;}

.infoder {padding-left: 15px;}

.navbar .container-fluid {padding: 0px;}
.navbar-brand, .navbar-brand img { width: 110px;}
.navbar-brand img {margin: 0px; margin-left: 10px;}
.navbar-toggler {border: 0px;}

.whatsbtmobile span {display: none;}
.whatsbtmobile svg {height: 35px; width: auto;}

.contvideo {height: 80vh;}
.info {display: flex; }

section ul {padding-left: 20px;}
.cont-swiper {margin-top: 25px;}

.cont-swiper-testimonios .container {padding: 0px;}

footer .info-contact {
    width: 100%;
    padding-left: 25px;
    margin-top: 20px;
}


}