#preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #0E2434; /* Color de fondo */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

#preloader-logo {
    width: 250px; /* Ajusta el tamaño del logo */
    animation: fadeIn 1.5s ease-in-out infinite alternate;
}

@keyframes fadeIn {
    from {
        opacity: 0.5;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* -----  _general.scss     -----*/
.maincolor{
	color: #3c70e8 !important
}
p{
	font-size: 1.3rem
}
.portada-proyecto h1{
	color: #fff;
	font-size: 3.2em;
}
h2{
	color: #3C70E8;
	font-size: 0.8em;
	letter-spacing: 0.1em;
}
h3{
	font-size: 1.4em;
	letter-spacing: -0.05em;
}
.subtitulo {
    font-size: 2.4rem;
    font-weight: 400;
    letter-spacing: -0.05em;
}
.subtitulo.separado {
    letter-spacing: .35em
}
.texto {
    font-size: 1.11rem
}
.btn-cta{
    position: relative;
	font-weight: 700;
    font-size: 1em;
    padding: 1em 1.5em 1em 0;
    transition: all .3s
}
.btn-cta:before,.btn-cta:after {
    content: "";
    position: absolute;
    width: 4em;
    top: 50%;
    transform: translateY(-50%);
    left: calc(100% - 1em);
    transition: width .3s
}
.btn-cta:before {
    height: 1px;
    background: #3c70e8
}
.btn-cta:after {
    content: "";
    position: absolute;
    width: 4em;
    height: 9px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 128'%3e%3cpolygon fill='blue' points='8.81 128 0 118.22 60.35 64 0 9.78 8.81 0 80 64 8.81 128'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right
}
.btn-cta:hover {
	color: #3c70e8 !important;
    text-decoration: none;
}
.btn-cta:hover:before,.btn-cta:hover:after {
    width: 10em
}
.bgBlue .btn-cta{
	width: 150px;
	color: #fff !important
}
.servicios .btn-cta{
	width: 135px
}
@media(min-width: 992px) {
	.bgBlue .btn-cta{
		width: initial
	}
	.servicios .btn-cta{
		width: initial;
	}
}
.bgBlue .btn-cta:hover{
	color: #3c70e8 !important
}
.w-60{
	width: 60% !important
}
/* -----  _menu.scss     -----*/
.menu{
	position: fixed; top: 0; left: 0; width: 100%; transition: all .3s;z-index: 999
}
.menu .navbar {
	border-bottom: 1px solid rgba(255,255,255,0.3);
	padding-top: 0;
	padding-bottom: 0
}
.menu .line1{
	border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: 2em
}
.menu .line2{
	border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding: 1.5em 0 1.5em 2em
}
.redes .icon{
	height: 1em
}
.navbar-toggler {
	border: none
}
/* -----  _portada.scss     -----*/
.portada {
    position: relative;
    background-size: cover
}
.portada .swiper-slide {
    height: 0;
    padding-bottom: 55%!important;
}

@media(min-width: 768px) {
    .portada .swiper-slide {
        padding-bottom:60%
    }
}
@media(min-width: 992px) {
    .portada .swiper-slide {
        padding-bottom:56.25%
    }
}
.swiper-pagination-bullet {
	background: #fb5a49
}
.portada .imagen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: bottom
}
.portada h2{
	font-size: 4.4em;
	letter-spacing: -0.025em;
	line-height: 0.95em;
	color: #fff
}
.portada h2{
	font-size: 3em;
	letter-spacing: -0.025em;
	line-height: 0.95em;
	color: #fff
}
@media(min-width: 992px) {
	.portada h2{
    	font-size: 4em;
    }
}
.portada .contenido {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: #fff;
    display: flex;
    align-items: left
}
@media(min-width: 992px) {
	.portada .info-text{
		transform: translateY(-75px)
	}
}
.portada .titulo {
    line-height: 1;
    border-bottom: none;
    padding: 0;
    margin-bottom: 0;
    font-size: 28px !important
}
.portada .titulo span{
    display: block;
    font-weight: bold
}
@media(min-width: 768px) {
    .portada .titulo {
        font-size:32px !important
    }
}

@media(min-width: 992px) {
    .portada .titulo {
        font-size:45px !important
    }
}

@media(min-width: 1200px) {
    .portada .titulo {
        font-size:55px !important
    }
}

@media(min-width: 1400px) {
    .portada .titulo {
        font-size:62px !important
    }
}
.portada .row {
    aspect-ratio: 2/1.5
}
@media only screen and (max-width: 767px) {
	.portada .row {
	    aspect-ratio: 2 / 2 !important;
	}
	.portada {
	    aspect-ratio: 2 / 2.15 !important;
		background-position-x: center
	}
	.portada .imagen {
	    height: 240%
	}
}
.bajada{
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	width: 80%;
	margin-top: 2em;
	padding-top: 1em;
}
.bajada p{
	font-size: 0.85em !important;
	letter-spacing: 0.1em;
	width: 85%	
}
@media only screen and (max-width: 767px) {
	.bajada{
		margin: 20px auto;
		padding-top: 1.2em;
		padding-bottom: 1em;
		backdrop-filter: blur(10px); 
	}
	.bajada p{
		margin: 0 auto;
	}
	.portada .info-text{
		transform: translateY(-15px)
	}
}
.swiper .arrow {
    color: #fff;
	border: 1px solid #3C70E8;
    width: 1.2em !important;
    height: 1.2em !important;
    font-size: 2.7em !important;
    transition: background-color .5s;
    border-radius: 50%
}
.swiper .arrow:hover {
	background-color: #3C70E8 !important
}
.swiper-button-prev{
	background: url(../images/arrow-left.svg) no-repeat center center;
	background-size: 25px
}
.swiper-button-next{
	background: url(../images/arrow-right.svg) no-repeat center center;
	background-size: 25px
}


/* -----  _whatsapp.scss     -----*/

.fijados .whatsapp {
    position: fixed;
    z-index: 9;
    bottom: 6em;
    right: 1em
}

@media(min-width: 768px) {
    .fijados .whatsapp {
        right:1.5em
    }
}

.fijados .static-wsp {
    display: block;
    line-height: 1;
    padding: 1em;
    background-color: #25D366;
    border-radius: 50%;
    color: #fff;
    animation: wsp 1.5s ease infinite
}

.fijados .static-wsp .icon {
    width: 1.5em;
    height: 1.5em
}

@media(min-width: 992px) {
    .fijados .static-wsp .icon {
        width:2em;
        height: 2em;
        color: #1a2b3a;
    }
}

@keyframes wsp {
    0% {
        box-shadow: 0 0 0 0 rgb(37 211 102 / 50%)
    }

    100% {
        box-shadow: 0 0 0 1em rgba(0,0,0,0)
    }
}
/* -----  _proyectos.scss     -----*/
figcaption{
	writing-mode:vertical-rl;
    transform: rotate(180deg);
    position: absolute;
    left: 0;
    top: 20%;
    color: #BBBBBB;
	font-size: 0.85em;
	font-weight: 300 
}
figcaption span{
	color: #3C70E8
}
.adornos:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: -20%;
    background-image: url("../images/adorno.svg");
    background-repeat: no-repeat;
    background-size: 90%;
    pointer-events: none;
    opacity: 0.7
}
@media(min-width: 992px) {
	.adornos:before {
		top: -50%;
	}
}
.w-85{
	width: 85% !important
}
figure{
	display: block
}
figure img{
	transition: all 1.5s ease;
	filter: grayscale(0.3) sepia(0.9) hue-rotate(175deg) saturate(2.7) brightness(0.9)
}
figure img:hover{
	transform: scale(1.12);
	transition: all 2s ease;
	filter: initial !important
}
/* Animación flotante */
.flotando {
  animation: flotar 3s ease-in-out infinite;
}
@keyframes flotar {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.st-2{
	font-size: 2em	
}
/* -----  _servicios.scss     -----*/
.navegacion {
    display: flex;
    justify-content: center
}
@media(min-width: 768px) {
    .navegacion {
        justify-content: flex-end;
    }
}
.navegacion .arrow {
    margin-top: 0em;
    position: static;
    width: 1em;
    height: 1em;
    font-size: 3em;
    transition: background-color .5s;
    border-radius: 50%
}
.navegacion .arrow:after {
    display: none
}

.navegacion .arrow:hover {
    background-color: #cfc
}
@media(min-width: 1200px) {
    .navegacion .arrow {
        font-size:3.5em
    }
}
@media(min-width: 992px) {
	.swServicios{
		transform: translateY(-15px)!important
	}
}
/* -----  _clientes.scss     -----*/
.clientes h2{
	color: #fff
}
.clientes img{
	width: 120px
}
.clientes img.tall{
	height: 90px !important
}
.swClientes .swiper-wrapper{
	transition-timing-function: linear !important
}
/* -----  _footer.scss     -----*/
.footer .logo-footer{
	height: 5.5em !important
}
.footer .subtitulo {
    color: #3C70E8;
    letter-spacing: .2em;
    font-weight: 300!important;
    font-size: .9rem
}

.footer .redes {
    font-size: 1.44rem
}

.footer p {
    font-size: 1.1em;
    letter-spacing: .08em
}

.footer li {
    font-size: 1em;
    padding-left: 0;
    background: 0 0
}

@media(min-width: 768px) {
    footer .redes {
        float:left!important
    }
}

@media(min-width: 992px) {
    .footer li {
        font-size:.8em
    }

    .footer .subtitulo {
        font-size: .65rem
    }

    .footer p {
        font-size: .85em
    }
}
@media only screen and (max-width: 767px) {
	footer{
		padding-bottom: 10em !important
	}
}
/* -----  _proyecto-interna.scss     -----*/
.portada .swiper-slide {
    height: 0;
    padding-bottom: 55%!important;
}

@media(min-width: 768px) {
    .portada .swiper-slide {
        padding-bottom:60%
    }
}

@media(min-width: 992px) {
    .portada-proyecto .swiper-slide {
        padding-bottom:40% !important
    }
}
.trama:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: -50%;
    left: 0;
    background-image: url("../images/trama.svg") !important;
    background-repeat: no-repeat;
    background-size: 100%;
    pointer-events: none;
    opacity: 1
}
.item__img-wrap {
    --aspect-ratio: 1/1.5;
    overflow: hidden;
    padding-bottom: calc(100%/(var(--aspect-ratio)));
    width: 100%;
    will-change: transform
}
.item__img {
    --overflow: 80px;
    height: calc(100% + 2*var(--overflow));
    top: calc(-1*var(--overflow));
    width: 100%;
    position: absolute;
    background-size: cover;
    background-position: 50% 0%;
    will-change: transform
}
.proyectos {
    background-color: #fff
}
.proyectos h1 {
    color: #000;
    flex: 0 0 100%
}
@media(min-width: 768px) {
    .proyectos h1 {
        flex:auto
    }
}
.proyectos .nav-tabs {
    border: none;
    justify-content: center
}
.proyectos .nav-item {
    padding: .25em 0;
    flex: 0 0 50%
}
@media(min-width: 768px) {
    .proyectos .nav-item {
        flex:auto;
        padding: .5em 0
    }
}
.proyectos .nav-link {
    border: none;
    color: #000;
    padding: 0;
    margin: 0 1.5em
}

.proyectos .nav-link:after {
    content: "";
    position: absolute;
    width: 0;
    height: 3px;
    background: #000;
    top: 100%;
    left: 0;
    transition: width .3s
}

.proyectos .nav-link.active {
    color: #000;
    position: relative
}

.proyectos .nav-link.active:after {
    width: 1em;
    height: 3px
}

.proyectos .item__img-wrap {
    --aspect-ratio: 1/1
}

.proyectos .item__img {
    background-position: center;
    background-size: cover;
    --overflow: 15px;
    transition: all 0.75s ease
}
.proyectos .item__img:hover {
	transition: all 0.5s ease;
	filter: brightness(1.2);
	transform: scale(1.1)
}
/* -----  _informacion.scss     -----*/
.portada-proyecto {
    height: 35vh;
    width: 100%;
    display: flex;
    align-items: flex-end;
    background: url(../images/trama.svg) no-repeat left center;
	background-size: 200% !important;
    background-color: #1B2B3A !important
}
@media(min-width: 992px) {
	.portada-proyecto {
	    height: 50vh;
	    background: url(../images/trama.svg) no-repeat left center;
		background-size: 100% !important
	}
}
.portada-proyecto-interna {
    height: 50vh;
    width: 100%;
    display: flex;
    align-items: flex-end;
    background-color: #fff
}
@media(min-width: 992px) {
	.portada-proyecto-interna {
	    height: 100vh
	} 
}
@media(min-width: 768px) {
    .portada-proyecto-interna {
        aspect-ratio:16/10
    }
}
.portada-proyecto-interna .imagen {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover
}
.informacion p{
	font-size: 1em
}
.informacion .info {
    flex-wrap: wrap;
    line-height: 1
}
.informacion .info-item{
	flex:0 0 calc(100% / 2)
}
/* -----  _servicios-interna.scss     -----*/
.servicios-interna .card {
    background: none;
    border-bottom: 1px solid rgba(60,112,232,0.3)
}
.servicios-interna .card-header {
    padding: 0.5rem 0;
    text-decoration: none;
    transition: all 0.5s ease;
}
.servicios-interna .card-header:hover {
    padding-left: 0rem
}
.servicios-interna .card-header .icn-serv{
	width: 35px !important;
	margin-right: 10px;
	float: left
}
.servicios-interna .btn-link {
    color: #1F1E4C;
    font-weight: 500;
    font-size: 1.3em;
	letter-spacing: -0.035em;
    width: 100%;
    text-align: left;
	padding-right: 20px;
	padding-left: 0
}
.servicios-interna .btn-link span {
	width: 300px;
	display: inline-block
}
.servicios-interna .card-body p{
	color: #1F1E4C;
	margin-left: 30px;
	font-weight: 300;
	font-size: 1.2em;
	line-height: 1.4em;
	text-align: justify
}
.servicios-interna button.collapsed{
    background: url(../images/icn-plus.webp) no-repeat right center;
    background-size: 30px
}
.servicios-interna button{
    background: url(../images/icn-minus.webp) no-repeat right center;
    background-size: 30px;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important
}
@media(min-width: 768px) {
	.servicios-interna .card-header .icn-serv{
		width: 55px !important;
		margin-right: 40px;
		float: none
	}
	.servicios-interna .card-header:hover {
	    padding-left: 1.5rem
	}
	.servicios-interna .btn-link {
	    font-size: 2em
	}
	.servicios-interna .btn-link span {
		width: initial;
		display: initial;
		transform: translateY(0px)
	}
	servicios-interna button.collapsed{
	    background-size: 40px
	}
	.servicios-interna button{
	    background-size: 40px
	}
	.servicios-interna .card-body p{
		margin-left: 100px;
		font-size: 1.1em;
		line-height: 1.6em
	}
}
/* -----  _quienes-somos.scss     -----*/
.portada-quienes-somos .swiper-slide {
    height: 0;
    padding-bottom: 35%!important
}
.portada-quienes-somos .texto {
	background: url(../images/trama.svg) no-repeat center 78% !important;
	background-size: 210% !important;
    position: relative;
	height: 450%;
	width: 100%
}
.portada-quienes-somos h1{
	position: absolute;
	bottom: 12%;
	left: 25px;
	color: #fff;
	font-size: 2.6em;
	text-align: left !important;
	letter-spacing: -0.025em
}
.quienes-somos img{
	border-radius: 1.5em;
}
@media(min-width: 992px) {
	.portada-quienes-somos h1{
		left: initial;
		bottom: 10%;
		font-size: 3.2em
	}
	.portada-quienes-somos .swiper-slide {
	    padding-bottom: 48%!important
	}
	.quienes-somos .hgt-500{
		height: 550px
	}
	.portada-quienes-somos .texto {
		background: url(../images/trama.svg) no-repeat center 70% !important;
		background-size: initial !important;
		height: 100%
	}
}
@media only screen and (max-width: 767px) {
	.portada-quienes-somos {
	    aspect-ratio: 2 / 1.7 !important;
		background-position-x: center
	}
}
.quienes-somos p{
	color: #1F1E4C;
	font-weight: 300;
	font-size: 1.1em;
	line-height: 1.6em
}
.mision-vision h3{
	color: #3C70E8;
	font-size: 2.6em
}
.blue{
	border-bottom: 15px solid #3c70e8;
}
/* -----  _valores.scss     -----*/
.valores{
	background: url(../images/bkg-valores.webp) no-repeat center center ;
	background-size: cover;
	background-color: #272b49;
	color: #fff
}
.valores h2{
	color: #fff
}
.valores h3{
	font-size: 2.6em
}
.valores h4{
	min-height: 100px;
	font-size: 2em;
	border-bottom: 1px solid rgba(255,255,255,0.4)
}
.valores p{
	font-size: 1.1em;
	line-height: 1.3em;
	font-weight: 300
}
.item-valor{
	background: rgba(24,40,70,0.6) !important;
	border-radius: 1.5em;
	padding: 2em;
}
@media(min-width: 768px) {
	.item-valor{
		min-height: 350px !important
	}
}
.valores .swiper .arrow {
    color: #fff;
	border: none;
	background-color: rgba(255,255,255,0.4);
    width: 1.2em !important;
    height: 1.2em !important;
    font-size: 2.7em !important;
    transition: background-color .5s;
    border-radius: 50%
}
.valores .swiper .arrow:hover {
	background-color: rgba(255,255,255,0.8)
}
.newMenu.scroll {
    height: 60px;
    box-shadow: 0 1em 2em rgba(0,0,0,.25)
}

.newMenu.scroll .enlace {
    color: #fff
}

@media(min-width: 992px) {
    .newMenu.scroll {
        height:65px;
        background: rgb(26 43 58 / 80%);
		backdrop-filter: blur(10px);
    }
}

.scroll .line1{
	border: none;
}
.scroll .line2{
	border-left: none;
	padding: 0.8em 0 0.7em 2em !important
}
.scroll .navbar {
	border-bottom: none !important
}
.newMenu.scroll .logo,.newMenu.scroll #bars svg {
   font-size:2em !important
}

@media(min-width: 768px) {
    .newMenu.scroll .logo,.newMenu.scroll #bars svg {
        font-size:2em !important
    }
}

@media(min-width: 1200px) {
    .newMenu.scroll .logo{
        height: 1em;
    }
}
.newMenu.show {
    height: 50vh
}
@media only screen and (max-width: 767px) {
	.menu .line1{
		border-left: none;
	    padding-left: 0
	}
	.menu .line2{
		border-left: none;
	    padding-left: 0
	}
	.menu .navbar {
	    padding-top: .50rem;
	    padding-bottom: .50rem;
	    background-color: rgb(26 43 58 / 90%)
	}
}

.galeria .item .item__img-wrap {
    --aspect-ratio: 1/0.67;
    background-position: center
}
.galeria .item .item__img {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    --overflow: 15px;
    background-color: #fff;
    transition: opacity .3s
}
.galeria .arrow {
	border: none;
	border: 1px solid #3C70E8;
	background-color: #ffffff73 !important
}
.galeria .arrow:hover {
	filter: initial;
	background-color: #3C70E8 !important
}