/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 5.0
*/

.logo:before {
    content: ' ';
    width: 2000px;
    position: absolute;
    top: -12px;
    right: -40px;
    height: 90px;
    background: #ffffff;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
    transform: skewX(-25deg);
}
.logo-footer:before {
    content: ' ';
    width: 2000px;
    position: absolute;
    top: 0px;
    right: -40px;
    height: 100%;
    background: #ffffff;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
    transform: skewX(-25deg);
}
.logo-footer:after {
	position:absolute;
	content:"";
	z-index:1;
    width: 202px;
    height: 204px;
    right: -206px;
	bottom:10px;
	background-position:center;
	background-repeat:no-repeat;
	background-size:contain;
	background-image:url("../../uploads/2026/07/estrella.webp")
}
#logo {
    position: relative;
}
.header-bg-color {
    background-color: hsla(0, 0%, 100%, .9);
    background: linear-gradient(to right, #01051c 0%, #002c7c 100%);
}
.pie{
    background-color: hsla(0, 0%, 100%, .9);
    background: linear-gradient(to right, #01051c 0%, #002c7c 100%);
}
.html.header-button-1 a{
	background-color:#fff;
	color:#000!important;
}

.nav>li.html {
    font-size: .9em;
}
.header-bottom.wide-nav .flex-row.container{
    background-color: #fff;
    padding: 6px 20px;
    border-radius: 30px;
}
.header-main .header-inner.container{
    padding-left: 0px;
    padding-right: 0px;
}
.header-bottom-nav > li > a {
    line-height: 16px;
    background: linear-gradient(to right, #002c7c 0%, #01051c 100%);
    color: #fff;
    padding: 10px 20px;
}
.h6, h6 {
    font-size: .85em;
    opacity: .8;
    color: #fff !important;
    background-color: #0000ff;
    display: inline;
    padding: 6px 20px;
    border-radius: 20px;
    font-weight: 400 !important;
}
h2 strong{
    color: #0000ff;
}
.h3, h3 {
    font-size: 2.25em;
    line-height: 1;
    margin-bottom: 0;
    margin-top: 0.5em;
	font-style: italic!important;
}
.h2, h2 {
    font-size: 3.25em;
	margin-bottom: 0;
	font-style: italic!important;
}
.dark .ux-menu-link__link{
	font-weight:700!important;
	padding-left: 36px;
    position: relative;
}
.dark .ux-menu-link__link:before{
	position:absolute;
	content:"";
	z-index:1;
	width:29px;
	height:15px;
	left:0;
	top:10px;
	background-position:center;
	background-repeat:no-repeat;
	background-size:contain;
	background-image:url("../../uploads/2026/07/arrow.webp")
}
.texto-amarillo strong{
	color:rgb(207, 125, 19)
}
.mision{
    border: 3px solid #2f6b8d;
    border-radius: 20px;
    padding: 10px;
}
.justificado p{
	text-align:justify;
}
.mapa iframe{
	border-radius:20px;
}

.lima .box-image{
    display: none;
}
.logos-snow img{
    height: 80px;
    width: auto;
    margin-bottom: 10px;
}

.boton-tienda{
    line-height: 16px;
    background: linear-gradient(to right, #002c7c 0%, #01051c 100%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 1em !important;
    display: block !important;
    width: 160px;
    text-align: center;
    transition: all 0.5s;
}
.boton-tienda:hover {
    background: linear-gradient(to right, #002c7c 0%, #0000ff 100%);
    transition: all 0.5s;
    color: #fff;
}


.portfolio-box .box-text{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.portfolio-box .box-text-inner,.portfolio-box .box-mapa{
    flex-basis: 50%;
    max-width: 50%;
    padding: 0 15px 0px;
}
.portfolio-box .box-mapa iframe{
    border-radius: 15px;
    height: 300px;
}
.icon-dir, .icon-tel, .icon-hour{
    position: relative;
    padding-left: 24px;
    margin-bottom: 5px;
}
.icon-dir:before{
    position: absolute;
    content: "";
    z-index: 1;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../../uploads/2026/07/pin_icon.svg);
}

.icon-tel:before{
    position: absolute;
    content: "";
    z-index: 1;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../../uploads/2026/07/ico-cel.svg);
}

.icon-hour:before{
    position: absolute;
    content: "";
    z-index: 1;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("img/clock.svg");
}

.searchandfilter ul li{
    margin-left: 0;
}

.portfolio-box-category{
    color: #0000ff;
    font-weight: 700;
    font-size: 16px;
}

.chosen-container-active .chosen-single {
    border: 1px solid #0000ff;
}
.chosen-container-single .chosen-single div b {
    background: url(../../uploads/2026/07/chosen-sprite.png) 0 10px no-repeat;
}
.chosen-container-single .chosen-single {
    padding: 0 0 0 15px;
    border-radius: 12px;
    background-color: #fff;
    background: linear-gradient(#fff 100%, #f6f6f6 50%, #ffffff 52%, #ffffff 100%);
    line-height: 40px;
}
.chosen-container-active.chosen-with-drop .chosen-single div b {
    background-position: -18px 10px;
}
.distritos h2{
    font-size: 80px;
    line-height: 77px;
    margin-top: 20px;
}

.portfolio-box .box-text-inner h3 {
    font-size: 2.0em;
}

.header-bottom.wide-nav .nav-pills>li{
    margin: 0 10px;
}
.header-bottom.wide-nav .nav-pills>li a:hover {
    background: linear-gradient(to right, #002c7c 0%, #0000ff 100%);
    transition: all 0.5s;
    color: #fff;
}
.off-canvas-left.dark .mfp-content, .off-canvas-right.dark .mfp-content {
    background-color: #002c7c;
}
.subtitulo-contacto .section-title-normal,
.subtitulo-contacto .section-title-main {
    border-bottom: 0;
}
.subtitulo-negocio .section-title-normal {
    border-bottom: 0;
}
.contacto-mapa p {
    margin: 0;
}



/* Animación Click */

/* 1. Contenedor y Botón (La animación de clic se aplica directo aquí) */
a.animacion-nube-click,
.animacion-nube-click {
    position: relative;
    overflow: visible;
    animation: simular-click-elemento 4s infinite ease-in-out;
}

/* 2. EL GLOBO DE TEXTO */
.animacion-nube-click::after {   
    content: '';
    position: absolute;
    z-index: 99;
    pointer-events: none;
    background-image: url("img/globo-left.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100px;
    height: 72px;
    top: -60px;
    right: -70px;   
    animation: flotar-globo 2s infinite ease-in-out, contra-escala-globo 4s infinite ease-in-out;
}

/* 3. EL CURSOR WEBP */
.animacion-nube-click::before {
    content: "";
    position: absolute;
    width: 28px;  
    height: 28px;
    z-index: 100;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("img/cursor-animacion.webp");
    bottom: -55px;
    right: -25px;
    opacity: 0;
    animation: mover-cursor-webp 4s infinite ease-in-out;
}

/* Animación de la nube: Sube y baja suavemente */
@keyframes flotar-globo {
    0%, 100% { top: -60px; }
    50% { top: -65px; } /* Desplazamiento limpio usando top */
}

/* NUEVA ANIMACIÓN: Cancela el encogimiento del botón en el globo */
@keyframes contra-escala-globo {
    0%, 46% { transform: scale(1); }
    48%, 60% { 
        transform: scale(1.042); /* Multiplica el tamaño inverso (1 / 0.96) para quedarse estático */
    }
    62%, 100% { transform: scale(1); }
}

/* Animación del cursor: Aparece -> Va al botón -> Hace click -> Desaparece */
@keyframes mover-cursor-webp {
    0% { opacity: 0; bottom: -55px; right: -25px; transform: scale(1); }
    15% { opacity: 1; }
    40%, 45% { bottom: -10px; right: 20px; opacity: 1; transform: scale(1); }
    48% { transform: scale(0.8); } 
    52%, 65% { transform: scale(1); bottom: -10px; right: 20px; opacity: 1; }
    80% { bottom: -55px; right: -25px; opacity: 0; }
    100% { opacity: 0; }
}

/* Animación del botón: Se achica al mismo tiempo que el cursor clickea */
@keyframes simular-click-elemento {
    0%, 46% { transform: scale(1); }
    48%, 60% { 
        transform: scale(0.96); 
    }
    62%, 100% { transform: scale(1); }
}

/* Animación Click */



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

    .header-main .header-inner.container {
        padding-left: 15px;
        padding-right: 15px;
    }

}

@media only screen and (max-width: 1060px) {
    .animacion-nube-click {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 849px) {
    .mobile-nav.nav.nav-left>li>a{
        color:#002c7c;
    }
    
    .animacion-nube-click::after {
        top: -80px;
        right: 0;
    }

}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
    .distritos h2 {
        font-size: 60px;
        line-height: 60px;
        margin-top: 20px;
    }

}


@media only screen and (max-width: 549px) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    .portfolio-box .box-text-inner,.portfolio-box .box-mapa{
        flex-basis: 100%;
        max-width: 100%;
        padding: 0 15px 0px;
    }
    .portfolio-box .box-text-inner{
        margin-bottom: 20px;
    }
    .h2, h2 {
        font-size: 2.25em;
    }
    .h3, h3 {
        font-size: 1.25em;
    }
    .distritos h2 {
        font-size: 50px;
        line-height: 50px;
        margin-top: 20px;
    }
	.recomendaciones .icon-box-left {
		display: block;
	}
	.recomendaciones h2 {
        font-size: 3.9em;
    }
	.recomendaciones .icon-box-img{
		width: 70px!important;
		margin-bottom: 10px;
	}
    .hidden-bg .section-bg img {display: none;}
	.nosotros-fondo-overlay .section-bg.fill::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;        
        background-color: rgba(0, 0, 0, 0.5);         
        z-index: 1; 
    }
    .center-image .img {
        margin-right: auto;
        margin-left: auto;
    }
}

@media only screen and (max-width: 440px) {
    .h2, h2 {
        font-size: 1.9em;
    }
}