:root{
		--azulcila: #203a7f;
		--azulcilac: #aabce9;
		--azulcilacc:#e8f0fe;
		--azulcilaccc:#f3f7fe;
		--azulo : #093170;
		--rojoo: #923029;
		--amarilloo: #b2a837;
		--naranjao: #a25200;
		--verdeo:#5e8162;
		--azulm:#0d47a1;
		/*--azul: #1976d2;*/
		--azul : #3E5C76;
		--rojo: #AC3931;
		--amarillo: #f9ed8a;
		--naranja: #C16200;
		--verde:#709775;
		--azulc : #0f54c0;
		--rojoc: #D5736C;
		--amarilloc: #f9edc4;
		--naranjac: #FF9831;
		--verdec: #A3BCA6;
		--azulcc : #42a5f5;
		--rojocc: #F5DCDB;
		--amarillocc: #FFF8F2;
		--naranjacc: #FFF8EB;
		--verdecc:#E8EFE9;
		--azulf : #bdcedd;	
		--rojof: #eab8b6;
		--amarillof: #feddc0;
		--naranjaf: #feddc0;
		--verdef:#ccdbce;
		--azulfc : #ccd9e5;
		--rojofc: #efcac8;
		--amarillofc: #ffead9;
		--naranjafc: #ffefd2;
		--verdefc:#dae5db;
		--letra-nuevo:#0066cc;
		--fondolila:#e9fbad;
		--fondofucsia:#e5d2fe;
		--fondocrema:#ffffc5;
		--fondonaranja:#DDD;
		--fondoverde:#b9d3bd;
		--fondoazul:#cfdce8;
		--fondorojo:#feded9;
		--gris:#888;
		--moradofc:#e5d9e5 ;
		--fondocolega: #EEE;
		--mostaza: #cac148;
		--mostazao: #888132;
		--claro:#aaa;
		--celeste:#7295B5;
		--celesteo:#3E5C76;
		--celestec:#DCE5ED;
		--complementario:#e2608b;
		--complementarioo:#bd5902;
		--complementariooo:#6c3301;
		--letra-oscura:#fff;
		--dark:#4A4A4A;
	}
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    font-size: 16px;
}
body{
    font-family: 'HOL-M' !important;
}	
	/******* GIF *************/
	    .body-gif {
	        margin: 0;
	        width: 100vw;
	        min-height: 100vh;
	        background: rgba(255,255,255,1);
	        overflow: hidden;
	        font-family: 'HOL-L';
	    }
        .container-gif {
            width: 100%;
            position: relative;
        }
        .svg-gif {
            width: 100vw;
            height: 80vh;
            display: block;
        }
        .loading-text {
        	width: 100%;
            color: #333;
            text-align: center;
            margin-top: 2rem;
            font-size: 1.2rem;
            letter-spacing: 2px;
            position: relative;
        }
        .loading-text::after {
            content: "...";
            animation: dots 1.5s infinite steps(3);
            position: absolute;
        }
        @keyframes dots {
            0%, 20% { content: "."; }
            40% { content: ".."; }
            60%, 100% { content: "..."; }
        }
        .building { fill: none; stroke: #666; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
        .rascacielos { fill: none; stroke: #203a7f; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
        .house { fill: none; stroke: #e74c3c; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
        .factory { fill: none; stroke: #3498db; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
        .window-factory { fill: none; stroke: #3498db; stroke-width: 1.5; }
        .window-house { fill: none; stroke: #e74c3c; stroke-width: 1.5; }
        .window-building { fill: none; stroke: #666; stroke-width: 1.5; }
        .window-rascacielos { fill: none; stroke: #203a7f; stroke-width: 1.5; }
        .smoke { opacity: 1; }

    /************************/

/*STANDARD*/
	.text-12{font-size:.75rem}
	.text-14{font-size:.875rem}
	.text-16{font-size:1rem}
	.text-18{font-size:1.125rem}
	.text-20{font-size:1.25rem}
	.text-22{font-size:1.375rem}
	.text-24{font-size:1.5rem}
	.text-26{font-size:1.625rem}
	.text-28{font-size:1.75rem}
	.text-30{font-size:1.875rem}
	.text-32{font-size:2rem}
	.text-34{font-size:2.125rem}
	.text-36{font-size:2.25rem}
	.text-50{font-size:3.125rem}
	.text-60{font-size:3.75rem}
	.text-70{font-size:4.375rem}
	.text-80{font-size:5rem}

	.line-h-12{line-height:.75rem}
	.line-h-14{line-height:.875rem}
	.line-h-16{line-height:1rem}
	.line-h-18{line-height:1.125rem}
	.line-h-20{line-height:1.25rem}
	.line-h-22{line-height:1.375rem}
	.line-h-24{line-height:1.5rem}
	.line-h-26{line-height:1.625rem}
	.line-h-28{line-height:1.75rem}
	.line-h-30{line-height:1.875rem}
	.line-h-32{line-height:2rem}
	.line-h-34{line-height:2.125rem}
	.line-h-38{line-height:2.25rem}
	.line-h-40{line-height:2.5rem}
	.line-h-42{line-height:2.625rem}
	.line-h-44{line-height:2.75rem}
	.line-h-50{line-height:3.125rem}
	.line-h-52{line-height:3.25rem}
	.line-h-54{line-height:3.375rem}
	.line-h-60{line-height:3.75rem}
	.line-h-70{line-height:4.375rem}
	.line-h-75{line-height:4.6875rem}

	.font-w100{font-weight: 100}
	.font-w200{font-weight: 200}
	.font-w300{font-weight: 300}
	.font-w400{font-weight: 400}
	.font-w500{font-weight: 500}
	.font-w600{font-weight: 600}
	.font-w700{font-weight: 700}

	.lang:focus; .lang:active{
		outline: none;
		border:none;
	}
	.lang{
		border:none;
	}
/****************************** LANDING ************************************/
	.idioma{
		color:inherit !important;
	}
	.idioma:focus,.idioma:active{
		border:none !important;
		outline:none !important;
		color:inherit !important;
	}
	.icon:hover{
		cursor:pointer;
	}
	.cursor-default:hover{
		cursor: default;
	}
	.caja-idiomas-on{
		top:127px;
		transition: all 0.3s ease;
	}
	.caja-idiomas-on-filtro{
		top:83px;
		transition: all 0.3s ease;
	}
	.caja-idiomas-off{
		top:-500px;
		transition: all 0.3s ease;
	}
	.seccion-login{
		height: 100vh;
		width: 100vw;
		background-image: url(../imagenes/web/pc.webp?1);
		background-position: top;
		background-size: cover;
		height: 100vh;
		opacity: 0;
	}
	.seccion-login-on{
		opacity: 1;
		transition: opacity 1s ease;
	}
	.login{
		max-width: 340px;
		border-radius:20px; 
		padding:40px;
		padding-top: 60px;
		position: relative;	
		background-color: #fff;
		margin-left: 3vw;
		color:var(--dark);
	}
	.logo-login{
		position: absolute;
		top:-60px;
		left: calc(50% - 60px);
		width: 100px;
		height: 100px;
	}
	.card{
		border-radius: 20px;
	}
	.contacto{
		max-width: 340px;
		border-radius:20px;
		padding:40px;
		background-color: #fff;
		color:var(--dark);
		margin: 0 auto;
		position: relative;
	}
	.cerrar-contacto{
		position: absolute;
		top: 14px;
		right: 20px;
		font-size: 26px;
		line-height: 1;
		color: var(--dark);
		cursor: pointer;
	}
	.cerrar-contacto:hover{
		color: var(--rojo);
	}
	/* Landing publica /contactanos */
	.seccion-contactanos{
		min-height: 100vh;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 110px 5vw 60px 5vw;
		box-sizing: border-box;
	}
	#fondo-contacto{
		background-image: linear-gradient(to right, var(--azulo), var(--azul));
	}
	#contacto-landing input.form-control,
	#contacto-landing textarea.form-control{
		font-size: .9rem;
	}
	.contactanos-promo{
		color: #fff;
		max-width: 560px;
	}
	.contactanos-promo h1{
		font-size: 34px;
		font-weight: 700;
		line-height: 1.25;
		margin-bottom: 20px;
	}
	.contactanos-promo p{
		font-size: 18px;
		font-weight: 400;
		line-height: 1.6;
		margin-bottom: 22px;
	}
	.contactanos-badge{
		display: inline-block;
		background-color: var(--complementario);
		color: #fff;
		font-weight: 700;
		font-size: 16px;
		border-radius: 12px;
		padding: 14px 20px;
		line-height: 1.4;
	}
	@media (max-width: 991px){
		.seccion-contactanos{
			flex-direction: column;
			padding-top: 90px;
		}
		.contactanos-promo{
			max-width: 100%;
			margin-bottom: 30px;
			text-align: center;
		}
		.contactanos-promo h1{
			font-size: 26px;
		}
	}
	input, textarea, input.form-control{
		box-sizing: border-box;
		border:solid 1px var(--azulcilac);
		background-color: var(--azulcilacc);
		-webkit-text-fill-color: #333;
		font-weight: 500;
	}
	input.form-control:focus, input:focus{
		box-sizing: border-box;
		box-shadow: inset 0 0 2px var(--azulcila);
	}
	input.form-control:placeholder-shown, input:placeholder-shown {
		background-color: #ffff;
		-webkit-text-fill-color: #6c757d;;
		font-weight: 400;
	}	
	input.form-control:-webkit-autofill {
		font-family: 'HOL-M';
	}
	/* Bajar el placeholder cuando no hay texto */
	.form-floating > label {
	  transform: translateY(-6px); /* Ajusta este valor según necesites */
	  color: #6c757d; /* Color gris de Bootstrap */
	  font-weight: 400;
	}	
	.form-floating > .form-control:not(:placeholder-shown) ~ label,
	.form-floating > .form-control:focus ~ label {
	  transform: translateY(0) scale(0.85); /* Ajusta estos valores */
	  color: var(--azulcila); /* Color azul de Bootstrap para focus */
	  background-color: trasnparent; /* Fondo para que no se superponga con el borde */
	  padding: 0 0.25rem; /* Espacio interno */
	}	
	.imagenportada{
		position:absolute; 
		top:15%; 
		left:-15%;
		width:150%;
		height:100%;
		z-index: 2;
	}
	.visible {
	  visibility: visible;
	  opacity: 1;
	  transition: opacity 0.5s linear;
	}
	.invisible {
	  visibility: hidden;
	  opacity: 0;
	  transition: visibility 0s 0.5s, opacity 0.5s linear;
	}
	.icon-celeste{
		animation: rotation 1s linear;
	}
	@keyframes rotation{
		from{transform: rotateY(0deg);}
		to{transform: rotateY(359deg);}
	}
	.navbar-menu{
	 	position: absolute;
		width: 100%;
		top:0;
		left: 0;
		z-index: 10;
		margin-top:0;
		height: auto;
		transition: margin-top 0.3s ease;
	 	background-color:white;
	 	font-weight: 300;
	}
	.navbar-menu .navbar-toggler:focus{
		box-shadow: none;
		border:solid 1px #000;
	}
	.navbar-collapse{
		height: 100%;
	}
	.nav-item{
		display: flex;
		align-items: center;
	}
	.nav-link{
		text-decoration: none !important;
		color:inherit !important;
	}
	.nav-link:hover{
		color:var(--complementario) !important;
	}

	.navbar-menu-up{
		height: 50px;
		transition: height 0.3s ease;	
	}
	.border-input,.border-input-contraste{
		border: none;
		border-top-right-radius: 0;
		border-bottom-right-radius:0;
		background-color: transparent; !important;
		height: 42px;
		cursor:pointer; 
		color:#fff;
	}
	.border-input-contraste{
		border: none;
		font-weight: bold;
		color:#fff;
		background-color: var(--celeste) !important;
	}
	.lupa-style,.lupa-style-contraste{
		height: 42px;display: 
		flex;align-items: center;
		justify-content: center;
		border-top-left-radius: 0;
		border-bottom-left-radius:0 ;	
		border:none;
		background-color: var(--celeste);
	}
	.btn-cila{
		background-color:var(--azulcila);
		border:none;
		border-radius:40px;
		height:40px;
		color:#fff;
		font-weight:500;"		
	}
	.btn-cila:hover{
		color: #fff;
	}
	.btn-cila:focus{
		background-color: var(--azulcilac);
	}
	.btn-web,.btn-web-off{
		height: 42px;
		border-radius: 24px;
	    border:none !important;
	    outline:none !important;
	  background-color: var(--complementario) !important;
	  font-weight: 700; 
	  min-width: 150px;
	}
	.btn-web-off{
		color:var(--dark);
		font-weight: 700;
	}
	.btn-limpio{
		border:none;
		background-color: transparent;
		padding: 0;
		cursor: pointer;
	}
	.btn:active,.btn:focus,.btn-limpio:focus{
		box-shadow: none !important;
		outline: none !important;
	}
	.lupa-style-contraste{
		background-color: var(--celeste);
		border:none;
	}
	.fondo-logo{
		position: absolute;
		top:0;
		left: 0;
		z-index: 10;
		/*background-image: linear-gradient(to top,rgba(33,36,40,1),rgba(30,33,36,1));*/
		width: 100%;height: 100vh;	
		opacity: 1;
		z-index: 11	;
		background-color: var(--azulo);
	}
	.fondo-logo-out{
		margin-top: -100vh;
		transition: all ease 0.5s;	
	}
	.logo{
		position: absolute;
		top:50%;
		left: 50%;
		transform:translate(-50%,-50%);
		animation: fill 0.4s forwards 1.2s;
	}
	.logo path:nth-child(1){
		stroke-dasharray: 337px;
		stroke-dashoffset: 337px;
		animation: line-anim 0.8s forwards 0.3s;
	}
	.logo path:nth-child(2){
		stroke-dasharray: 320px;
		stroke-dashoffset: 320px;
		animation: line-anim 0.8s forwards 0.6s;
	}
	.logo path:nth-child(3){
		stroke-dasharray: 45px;
		stroke-dashoffset: 45px;
		animation: line-anim 0.8s forwards 0.9s;
	}
	.logo path:nth-child(4){
		stroke-dasharray: 168px;
		stroke-dashoffset: 168px;
		animation: line-anim 0.8s forwards 0.12s;
	}
	.logo path:nth-child(5){
		stroke-dasharray: 287px;
		stroke-dashoffset: 287px;
		animation: line-anim 0.8s forwards 0.15s;
	}
	.logo path:nth-child(6){
		stroke-dasharray: 318px;
		stroke-dashoffset: 318px;
		animation: line-anim 0.8s forwards 0.18s;
	}
	@keyframes line-anim{
		to{
			stroke-dashoffset: 0;
		}
	}
	@keyframes fill{
		0%{
			fill:transparent;
		}
		50%{
			fill:#ccc;
		}
		100%{
			fill:#fff;
		}
	}
	/*formatos avisos*/
	.icon-premium{
		cursor:pointer;
		filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
		opacity: 0.85;
	}
	.icon-premium:hover{
		opacity: 1;
		filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 1));
	}
	.icon-caja{
		margin: -4px 14px 0 4px;
		opacity: 0.85;
	}
	.icon-caja:hover{
		opacity: 1;
	}
	/*BLINK***********/
	@keyframes blink {
	  0%, 100% {margin-top: -2px;}
	  20% {margin-top: 2px;}
	}
	.blinking {	
		cursor:pointer;
		animation: blink 1s linear infinite;
	}
	.blinking:hover{
		animation: none;
	}
	/*****************/
	.foto{
		width:40px;
		height:40px;
		border-radius:50%;
		border:1px #fff solid;
		background-color: var(--dark);
		box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
		overflow:hidden;
		display:flex;
		justify-content:center;
		align-items:center;
		margin-left: -6px;
		margin-bottom: 15px;
	}
	.premium{
		position: relative;
		width: 0px;
		height: 0px;
		border-radius: 4px;
		/*background-color: #000;*/
		float: left;
		box-shadow: 0px 0px 8px rgba(10,15,13,0.8);
		transition: all 0.5s ease;
		overflow: hidden;
	}
	.premium-on{
		width:100%;
		height: 88vh;
		border-radius: 8px;
		overflow: hidden;	
		transition: all 0.5s ease;
	}
	.sombra-texto-portada{
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5),0 0 2px rgba(0, 0, 0, 0.5);		
	}
	.sombra-texto-resaltado{
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3),0 0 2px rgba(255,255,255, 1);		
	}
	.fondo-gradient{
		background: linear-gradient(137.83deg, var(--azulc) 0%, var(--azulm) 100%);
	}
	.texto-portada-agentes{
		width: 100%;
	}
	.text-shadow-white{
		text-shadow: 0 0 20px rgba(255,255,255,0.5),0 0 2px rgba(255,255,255,0.5);	
	}
	.casita{
		display: none;
		align-items: center;
		justify-content: center;
		position: absolute;
		top:25vh;
		left: 40vw;
		width: 20%;
		z-index: 3;
		border-radius: 50%;
		background-color: transparent;
		/*box-shadow: -75px 75px 50px 200px rgba(200,200,200, 0.2);*/
	}
	.marco-agentes{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100vw;
		height: 38vh;	
	}
	.seccion-agentes{
		position: relative;
		overflow: hidden;
		background-image: url(../imagenes/web/agentellave.jpeg);
		background-position: right;
		background-size: cover;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	.seccion-agentes::after{
		content:'';
		position: absolute;
		top:0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
	}
	.seccion-agentes-on{
		opacity: 1;
		transition: opacity 2s ease;
	}
	.caja-ul{
	    position: relative;
	    width: 100%;
	    height: 100%;
	    background-color: transparent;
	    border-radius: 8px;
	    border:solid 2px var(--azulc);
		/*box-shadow: 0 0 50px 5px rgba(200,200,200, 0.2);	*/
		font-weight: 400;
		background-color: #fff;
	}
	.subtitulo-agentes{
		height: 40px;
		border-radius: 8px;	
	}
	.caja-sugerencias{
		width: 100%;
		height: auto;
		overflow: hidden;
		opacity: 0;
		padding: 0 0;
	}
	.caja-sugerencias-on{
		opacity: 1;
		transition: opacity 0.2s ease;
	}
	.img-sugerencias{
		background-position: top;
		background-size: cover;
		width: 100%;
		height: 150px;
		position: relative;
		z-index: 1;
		border-radius: 8px 8px 0 0;
	}
	.img-sugerencias::before{
		content:'';
		position: absolute;
		top:0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		opacity: 1;
	}
	/****************************/
	.text-white{
		color:#fff;
		/*text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),-1px -1px 2px rgba(0, 0, 0, 0.4);*/
		margin-bottom: 4px;
	}
	.areas{
		width: 100%;
		height: 24px;
		font-size: 12.8px;
		float: left;
		margin:15px 0 4px 0;
	}
	.cubierta{
		width:30px;
		height:80%;
		top:20%;
		padding-top:30px;
		right:8px;
		position:absolute;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),-1px -1px 2px rgba(0, 0, 0, 0.4);	
		z-index : 6;
		text-align: center;
	}
	.precio{
		font-size:18px;
		color:#fff;
		position:absolute;
		top:35px;
		width: 100%;
		left:0;
		background-color: transparent;
		padding: 8px;
		line-height: 16px;
		text-align: right;	
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),-1px -1px 2px rgba(0, 0, 0, 0.4);
	}
	.vermas{
		width:100%;
		padding:12px;
		padding-top: 4px;
		color:#fff;
		height: 20px;
		font-size: 13px;
		line-height: 13px;
		text-align: right;
		bottom:0px;
		left:0;
		position:absolute;
		z-index : 7;
		overflow: hidden;
		transition: all 0.3s ease;
	}
	.masopciones{
		color:#000;
		font-weight: 600;
		font-size: 20px;
	}
	.m2{
		font-size:16px;
		font-weight: bold;
		color:#fff;
	}
	.num{
		font-size:14px;
		font-weight: bold;
		color:#fff;
	}
	.caja-img{
		width:100%;
		overflow:hidden;
		overflow-x:auto;
		overflow-y:hidden;
		min-height: 200px;
	}
	.carrete{
		width:auto;
		height:auto;
		float:left;
		background-color:rgba(0,0,0,0.1);
		display:flex;
		align-items:center
	}
	.marco{
		height:100%;
		display:flex;
		justify-content:center;
		align-items:center;	
	}
	.texto{
		width:100%;
		padding:12px;
		color:#bbb;
		font-size: 13.5px;
		line-height: 17px;
		margin-bottom: 15px;
		left:0;
		position:absolute;
		z-index : 6;
		transition: all 0.3s ease;
		overflow-y: auto;
	}
	.texto-previo{
		top:0;
		transition: top 0.3s ease;
	}
	.texto-on{
		top:0;
		transition: top 0.3s ease;
	}
	.portada{
		width: 100%;
	    height: 100vh; 	
	    position: absolute;
		top:0;
		left: 0px;
		z-index: 1;
		overflow: hidden;
	}
	.portada::before{
		content:'';
		position: absolute;
		top:0;
		left: 0;
		z-index: 2;
		width: 100vw;
		height: 100vh;
		/*background-image: linear-gradient(to right,rgba(255,255,255,0.3),rgba(0,0,0,0),rgba(30,33,36,0));*/
		background-image: linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1));
		opacity: 0.1;
	}
	.portada-oscura{
		min-height:100vh;
		width:100vw;
		background-color: #fff;
	}
	.foto-portada{
		float: right;
		margin-right: 45px;
		height: calc(100vh - 189px);
		aspect-ratio: 1.68;
		max-width: calc(70% - 100px);
		background-image: url(../imagenes/web/stock-photo-close-up-of-a-small-wooden-house-on-the-floor-in-a-cozy-room-on-the-background-of-a-young-family-1836472639.jpeg);
		background-size: cover;
		background-position: top;	
		border-radius: 80px;		
		position:relative;
		/*box-shadow: 0 0 100px rgba(100,100,100, 0.2);	*/
		box-shadow: inset 20px 20px 60px #bebebe,
            inset -20px -20px 60px #ffffff;
		margin-top: 1%;
	}
	.f-direccion{
		height: 43px;
		background-color: white;
	}
	.caja-buscador{
		width: 90%;
		position: absolute;
		bottom: 32%;
		left: 5%;
		opacity: .9;
		min-height: 60px;
	}
	.caja-buscador-resultados{
		width: 90%;
		position: absolute;
		top:calc(68%);
		left: 5%;
		height: calc(47% - 70px);
	}
	.caja-buscador-resultados-filtros{
		width: 320px;
		position: absolute;
		top:39px;
		left: 10px;
		height: auto;
	}
	.caja-ubicaciones{
		width:auto;
		border-radius: 60px 0 0 60px;
		display: inline;
		border:none;
		float: left;
		padding:0 27px 0 27px;
	}
	.caja-ubicaciones-filtros{
		position: absolute;
		top:42px;
		left: 10px;
		height: auto;
		max-height: 165px;
		width:320px;
		border-radius: 0 0 20px 20px;
		display: inline;
		float: left;
		padding:4px;
		padding-top: 10px;
		z-index:-1;
		transition: top 0.5s ease;
		overflow-y: auto;
	}
	.oculta-ubicaciones{
		top:-200px;
		transition: top 0.5s ease;
	}
	.buscador{
		border-radius: 60px 0 0 60px;
		border:none;
		padding-left: 27px;
		width: calc(100% - 60px);
		height: 60px;
		font-size: 20px;
		color:#000;
		border:none;
		float: left;
		border:none !important;
		font-weight: 600;
	}
	.buscador.form-control:focus{
		box-shadow:none;
	}
	.input-buscador{
		background-color: #fff !important;
		border-radius: 60px;
		padding-left: 27px;
		color:#000;
		float: left;
		width: 320px;
		height: 36px;
		margin:7px 0 0 10px;
		-webkit-text-fill-color: #000;
		border:solid 1px #ccc !important;
	}
	.resultados{
		height: 60px;
		width: 20%;
		float: left;
	}
	.lupa-buscador,.lupa-filtro-buscador{
		width: 60px;
		height: 60px;
		background-color: #fff;
		border-radius: 0 60px 60px 0;
		float: left;
	}
	.lupa-filtro-buscador{
		height: 36px;
		margin:7px 0 0 0;
		background-color: var(--azulcilac);
	}
	.select-buscador{
		position: relative;
		width: 100%;
		height: 60px;
		background-color: #fff;
		border:none;
		float: left;
		color:#666;
		font-weight: 400;
		font-size: 20px;
		border-radius: 60px;
		margin-bottom: 10px;		
	}
	.ubicacion{
		position: relative;
		color:var(--dark);
		width:auto;
		display:flex;
		align-items:center;
		justify-content:center;
		height: 32px;
		border-radius:16px ;
		padding: 4px;
		background-color: white;
	}
	.operacion-buscador{
		width: 100%;
		height: 60px;
		background-color: #eee;
		float: left;
		border-radius: 60px;
		margin-bottom: 10px !important;		
	}
	.opcion-on{
		width: auto;
		height: 40px;
		border-radius: 40px;
		overflow: hidden;
    color:#fff;
    background-color: var(--azulm);
    border:none !important;
    outline:none !important;
		transition: all 0.5s ease;
		font-weight: 700;
		font-size: 20px;
		padding: 20px;
		cursor:default !important;
	}
	.opcion-off{
		width: 90px;
		height: 40px;
		border-radius: 40px;
		overflow: hidden;
    color:#4A4A4A;
    background-color: transparent;
    border:none !important;
    outline:none !important;
    transition: all 0.5s ease;
    font-weight: 500;
		font-size: 20px;
		cursor:pointer;
	}
	.opcion-off:hover{
		filter: drop-shadow(2px 2px 1px rgba(0,0,0, 0.3));
	}
	.caja-tipos{
		position: absolute;
		top:60px;
		left: 0;
		width: 115%;
		height: 0px;
		overflow: hidden;
		z-index: 1;
		padding: 0 20px;
		background-color: #fff;
		border-radius: 0 20px 20px 20px;
	}
	.caja-tipos-on{
		height: auto;
		height: 300px;
		overflow: auto;
		padding: 20px 20px;
		box-shadow: 0px 5px 5px 5px rgba(0,0,0, 0.3);	
		transition: all 0.5s ease;
	}
	.digital,.digital2,.digital3,.digital4,.digital5,.digital6,.digitalA,.digitalB,.digital7{
		width: 100%;
		aspect-ratio: 1.68;
		background-image: url(../imagenes/web/stock-photo-close-up-of-a-small-wooden-house-on-the-floor-in-a-cozy-room-on-the-background-of-a-young-family-1836472639.jpeg);
		background-size: cover;
		background-position: top;	
		border-radius: 0 0 25px 25px;		
	}
	.digital2{
		background-image: url(../imagenes/web/stock-photo-female-real-estate-agent-with-clipboard-showing-young-couple-kitchen-in-new-house-2467054741.jpeg?1);	
		background-position: top;
		width: 50%;
		height: 100%;
		float: left;
		border-radius: 0 25px 25px 0;		
	}
	.digital3{
		background-image: url(../imagenes/web/stock-photo-house-move-concept-happy-indian-young-family-sitting-on-the-floor-in-new-home-2439432141.jpeg);	
		background-position: top;
	}
	.digital4{
		background-image: url(../imagenes/web/stock-photo-house-move-concept-happy-indian-young-family-sitting-on-the-floor-in-new-home-2439432375.jpeg);	
		background-position: top;
	}
	.digital5{
		background-image: url(../imagenes/web/stock-photo-lease-rental-and-selling-home-real-estate-agent-manager-smile-holding-key-for-new-owner-rent-2299940221.jpeg);	
		background-position: top;
	}
	.digital6{
		background-image: url(../imagenes/web/stock-photo-woman-buying-or-rent-new-home-she-holding-key-front-of-new-house-surprise-happy-young-asian-woman-2343643233.jpeg);	
		background-position: top;
	}
	.digital7{
			height: 100vh;
			background-image: url(../imagenes/web/agentes.jpg);	
			background-position: right;
			border-radius: 25px 25px 25px 25px;		
	}
	.btn-abajo{
		position: absolute;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: var(--azulcc);
		z-index: 5;
	}
	.btn-dark{
		background-color: #292b2c;
	}
	.titulos,.titulos-bullets{
		color:#4A4A4A;
		font-size: 36px;
		line-height: 42px;
		font-weight: 700;
	}
	.titulos-bullets{
		font-size:28px;
	}
	.texto-normal{
		color:#4A4A4A;	
		font-size: 25px;
		line-height: 42px;
	}
	.marco-thumb{
		width: 100%;
		aspect-ratio: 1.68;
		border-radius:20px;
		border:solid 6px #ddd;
		padding: 4px;
		margin-bottom: 22px;		
	}
	.thumb{
		width: 100%;
		aspect-ratio: 1.68;
		background-size:cover;
		background-position:center;
		border-radius: 30px;		
		box-shadow: inset 5px 5px 20px #666,
            inset -5px -5px 20px #ffffff;
		margin-top: 2%;

	}
	.seccion1{
		width:100vw;
		float:left;
		background-color: #f2f2f2;
		padding: 100px 60px;
		margin: 40px 0 0 0;
	}
	.seccion2{
		position: relative;
		height: 100vh;
		width:100vw;
		float:left;
		background-color: #fff;
		padding: 100px;
	}
	.seccion3{
		position: relative;
		height: 100vh;
		width:100vw;
		float:left;
		background-color: #fff;
	}
	.seccion4{
		position: relative;
		height: auto;
		width:auto;
		float:left;
		margin-top: 60px;
	}
	.seccion5{
		position: relative;
		height: auto; 
		min-height: 50vh;
		float: left;
		font-weight: 200;
		font-size: 25px;
		text-align: center;
		padding: 60px 0;
	}
	.seccion-sistema{
		width: 0;
		opacity: 0;
		position: relative;
	}
	.texto-portada,.texto-portada-agentes,.texto-portada-nosotros{
		width:100vw;
		height:30vh;
		margin-left:0;
		color:var(--azulcila);
		font-weight: 600;
		font-size: 2.5rem;
		text-align: center;
		float: left;
		padding: 40px;
	}
	.texto-portada-agentes{
		width: 100%;
		height: auto;
		padding: 0 60px;
		margin-top: 129px;
	}
	.texto-portada-nosotros{
		height: calc(100vh - 79px);
	}
	.texto-sistema{
		width:100vw;
		height: 60vh;
		padding: 5vw;
		font-size: 28px;
		text-align: left;
		line-height: 32px;
		font-weight: 700;
		color:var(--dark);
		float: left;
		background-color: #fff;
	}
	.seccion-sistema-on{
		width:100vw;
		height: 40vh;
		padding-left: 10vw;
		padding-right: 10vw;
		opacity: 1;
		transition: all 1s ease;
	}
	.seccion6{
		position: relative;
		min-height: 62vh;
		width:100vw;
		padding: 4vw !important;
		padding-top:1vh !important;
		padding-bottom:8vh !important;
		float:left;
		font-size: 17px;
		font-weight: 500;
		background-image: 
			linear-gradient(to bottom,
							rgba(239,239,239,1.0) 20%,
							rgba(239,239,239,0.3) 40%,
							rgba(239,239,239,0.0) 100%);
	}
	.flex{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.flex-h{
		display: flex;
		justify-content: center;
	}
	.flex-v{
		display: flex;
		align-items: center;
	}
	.numero{
		font-size: 50px;
		height: auto;
		text-align: center;
		float: left;
		font-weight: 700;
		color:var(--azulc);
	}
	.label-numero{
		font-size: 24px;
		line-height: 42px;
		text-align: center;
		float: left;
		color:#4A4A4A;
		font-weight: 400;
	}
	.portada-oscura::before{
		background-image: linear-gradient(to right,rgba(36,40,44,1),rgba(36,40,44,0.5),rgba(36,40,44,0));
		/*background-image: linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1));*/
		opacity: 0.5;
		transition: opacity 0.3s ease;
	}
	.agentes{
		position:absolute;
		bottom:0;
		right: 0;
		width:300px;
		height:300px;
		z-index: 3;
		filter:drop-shadow(-12px 20px 2px rgba(0, 0, 0, 0.5));
		display: none;
	}
	.img-sistema{
		width: 100%;
		height: auto;
		border-radius: 8px;
		background-color:#fff;
		border-radius:8px;	
		border:solid 3px #fff;
		box-shadow: 5px 5px 25px 3px rgba(150,150,150, 0.3);	
	}
	.pantalla{
		box-shadow: 0 0 50px 50px rgba(239,239,239, 0.4);
	}
	.fuente{
		font-size: 1.1em;	color:#1a1d20;
		text-align: center;
		/*text-shadow: 0px 0px 1px #000,2px 2px 4px #000000 ;*/
		opacity: 1;
		text-shadow: 1px 1px 4px #333;
	}
	.fuente-on{
		opacity: 0;
		transition: all 0.3s ease;
	}
	.subfuente{
		font-size: 0.8em;
		text-align: center;
		margin-top:-0.8em;	
		opacity: 1;
		text-shadow: 1px 1px 4px #333;
	}
	.subfuente-on{
		opacity: 0;
		transition: all 0.3s ease;
	}
	.marco-letrero{
		height: auto;
		margin:0 auto;
		margin-top: 286px;
	}
	.marco-letrero-on{
		margin-top: 100px;
		transition: all 0.9s;
	}
	.fondo{
		background-color: rgb(0,0,0,0.5);
		transition-property: background-color;
		transition-duration: 0.5s;
		transition-timing-function: ease;	
		transition-delay:0.5s;
	}
	.fondo-c{
		background-color: rgb(0,0,0,0);	
		transition-delay:0.5s;	
	}
	.fondo-ul{
		position: relative;
		height: 100%;
	}
	.fondo-ul-buscador{
		position: relative;
		height: 100%;
		padding-top: 4px;
	}
	/*
	.fondo-ul::before{
	    content: '';
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 100%; 
	    height: 100%; 
	    background-color: #1a1d20; 
	    z-index: -1;
	    opacity:0.3;
	    max-width: 87vw;
	}
	*/
	.formulario-c{
		opacity: 0;
		transition-property: opacity;
		transition-duration: 0.5s;
		transition-timing-function: ease;	
		transition-delay:0.2s;
	}
	.formulario{
		opacity: 1;
		transition-property: opacity;
		transition-duration: 0.5s;
		transition-timing-function: ease;	
		transition-delay:0.2s;
	}
	.sidebar{
		height:calc(100vh - 74px);
		position: absolute;
		top: 0;
		left: calc((100vw - 340px)/2);
		margin-top: -80vh;
		z-index: 5;
		transition: all 0.5s ease;
	}
	.sidebar-c{
		margin-top: 20px;
		transition: all 0.5s ease;
	}
	.sidebar-cx{
		margin-top: -1px;
		transition: all 0.5s ease;
	}
	.sidemenu{
		width: 340px;
		height: auto;
		max-height:75vh;
		overflow-x: hidden;
		overflow-y: auto;
		scroll-behavior: smooth;
		background-color: #3c434a;
		margin-top: 59px;	
		box-shadow: 10px 10px 10px 0 rgba(10,10, 10, 0.4);
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
	}
	.sidemenu2{
		height: auto;
		overflow-x: hidden;
		overflow-y: hidden;
		background-color: #3c434a;
		border-radius: 10px;
		max-width: 500px;
	}
	.contenido{
		width: 100%;
		position:absolute;
		top:74px;
		left:0;
		z-index: 3;
	}
	.avisos{
		position: absolute;
		top:54px;
		left:0;
		width:100%;
		height:calc(100vh - 54px);
		z-index:3;	
		overflow-y: auto;
		display: none;
	}
	.icon,.icon-dark{
		width: 20px;
		height: 20px;
	}
	.icon:hover{
		filter:brightness(0.6);
	}
	.icon-dark:hover{
		cursor:pointer;
		opacity: 0.5;
	}
	.icon-hover:hover{
		filter:brightness(0);
	}
	.elipsis{
		overflow: hidden;
	 	text-overflow: ellipsis;
		white-space: nowrap;	
	}
	ul {
	    list-style-type: none; /* Elimina los marcadores de lista */
	    padding-left: 0; /* Elimina el espacio de relleno predeterminado */
	}

	ul li {
	    color: #000; /* Cambia el color del texto a tu preferencia */
	    padding-bottom: 10px;
	    /* Otros estilos aquí */
	}
	.custom-bullets {
	    list-style: none; /* Elimina la viñeta predeterminada */
	    padding: 0;
	    margin: 0;
	    line-height: 30px;
	    font-size: 20px;
	    font-weight: 400;
	    height: 110px;
	    overflow: hidden;
	}

	.custom-bullets li {
	    position: relative;
	    padding-left: 30px; /* Espacio para la viñeta personalizada */
	    margin-bottom: -4px; /* Espacio entre los elementos de la lista */
	    color:#4A4A4A !important;
	}

	.custom-bullets li::before {
	    content: '';
	    position: absolute;
	    left: 0;
	    top: 16px;
	    transform: translateY(-50%);
	    width: 10px; /* Tamaño del círculo */
	    height: 10px; /* Tamaño del círculo */
	    border-radius: 50%;
	    background-color: var(--complementario); /* Color del círculo */
	}
	.li-boton{
	    padding: 10px;
	    cursor: pointer;
	    border-radius: 4px;
	}
	.li-boton:hover{
		background-color: #EEE;
		border-radius: 20px;
	}
	/* Estilo para los elementos de la lista desordenada cuando están enfocados */
	li a{
		color:var(--dark);
    	text-decoration: none; /* Elimina el subrayado predeterminado */
	}
	li:hover a{
		color:var(--complementario);
    	text-decoration: none; /* Elimina el subrayado predeterminado */
	}
	.active{
	    color: var(--azulc) !important; /* Cambia el color del texto a tu preferencia */
	    text-decoration: none; /* Elimina el subrayado predeterminado */
	}
	/* Estilo para el contenedor del input */
	.hover1{
		cursor: pointer;
	}
	.hover1:hover{
				filter: drop-shadow(1px 1px 1px rgba(0,0,0, 0.3)) brightness(0.8);
	}
	.hover2:hover{
		background-color: #EEE !important;
		cursor:pointer;
	}
	.input-container {
	    position: relative;
	    cursor: pointer;
	}
	/* Estilo para el input */
	.input-container input[type=text],.input-container select {
	    width: 100%;
	    padding: 10px;
	    padding-top:18px;
	    font-size: 14px;
	    height: 46px;
		border:none;
		color:#000;
		font-weight: bold;
		background-color: transparent;
	}
	.elipsis{
		overflow: hidden;
	 	text-overflow: ellipsis;
		white-space: nowrap;	
	}
	.input-gral{
		padding: 2px !important;
		color:var(--dark) !important;
		height: 40px !important;
		padding: 4px !important;
		padding-top: 20px !important;
		border:none;
	}
	.input-gral:focus{
		box-shadow: none;
		border:solid 1px #777 !important;
	}
	.input-container input[type=text]:disabled{
		background-color: transparent;
	}
	.input-container input[type=text]:focus,.input-container select:focus,.borde {
		box-shadow: none;
		border:none;
	}
	.input-container input::placeholder,.input-container input::-webkit-input-placeholder {
	    color: #ccc; /* Cambia el color a rojo */
	    font-weight: normal;
	    text-shadow: none;
	}
	/* Bouncing ball */
	.mycanvas{
		height: 500px;
		width: 340px;
		position: absolute;
		margin:auto;
		left: calc(50% - 170px);
		top: 0;
		bottom: 0;
	}
	.piso{
		position: relative;
		top:280px;
		left: 0px;
		width: 100%;
		height: 2px;
	}
	.ball{
		background-color: var(--complementario);
		height: 50px;
		width: 50px;
		border-radius: 50%;
		position: relative;
		top: 100px;
		left: 145px;
		z-index: 3;
		box-shadow: 
		                inset -15px -15px 30px rgba(0, 0, 0, 0.3), /* sombreado interno */
		                inset 15px 15px 30px rgba(255, 255, 255, 0.3); /* iluminado interno */
		animation: bounce 0.9s infinite;
	}
	@keyframes bounce{
		10%{
			height: 50px;
			width: 50px;
		}
		30%{
			height: 50px;
			width: 40px;
		}
		50%{
			height: 30px;
			width: 57px;
			transform: translateY(240px);
		}
		75%{
			height: 50px;
			width: 57px;
		}
		100%{
			transform: translateY(0px);
		}

	}
	.ballcontainer{
		width: 57px;
		height: 50px;
	}
	.ballshadow{
		background-color: rgba(0,0,0,1);
		height: 10px;
		width: 50px;
		border-radius: 50%;
		position: relative;
		top:250px;
		left: 145.5px;
		z-index: -1;
		animation: shrink 0.9s infinite;
	}
	@keyframes shrink{
		50%{
			transform: scaleX(1.2);
		}
	}
/********************************** AGENTES ********************************/
	.digitalA{
	height: calc(100vh - 79px);
	background-image: url(../imagenes/web/agentes.jpg);	
	background-position: top right;
	filter: grayscale(20%);
	opacity: 0;
}
	.digitalA-on{
	opacity: 1;
	transition: all 1s ease;
}
/********************************* NOSOTROS *******************************/
	.digitalB{
	height: calc(100vh - 79px);
	background-image: url(../imagenes/web/stock-photo-lease-rental-and-selling-home-real-estate-agent-manager-smile-holding-key-for-new-owner-rent-2299940221.jpeg);	
	background-position: top center;
	filter: grayscale(20%);
	opacity: 0;
}
	.digitalB-on{
	opacity: 1;
	transition: all 1s ease;
}
/***********************************************************************/
/************************  	           *********************************/
/************************  MODAL POPUP *********************************/
/************************  	           *********************************/
/***********************************************************************/
/***********************************************************************/

	.popup {
	  position: fixed; /* Stay in place */
	  z-index: 30; /* Sit on top */
	  left: 0;
	  width: 100%; /* Full width */
	  height: 100vh; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgba(150,150,150,0.90);
	  top:-100vh;	
	  opacity: 0;
	  transition: opacity .5s;
	  transition-timing-function: ease;	
	  padding-bottom: 40px;
	}
	.popup3{
	  z-index: 25; /* Sit on top */
	}
	.popup.show{
		top:0px;
		opacity: 1;
	}
/* Modal Content */
	.modal-content{
	  margin: auto;
	  margin-top: 10px;
	  border: 1px solid #888;
	  width: 100vw;
	  border-radius: 20px !important;
	  background-color: transparent;
	}
	.modal-content2{
		width: 100%;
	}
/* The Close Button */
	.close {
	  float: right;
	  font-size: 50px;
	  color:white;
	  font-weight: 200;
	}
	.close:hover,
	.close:focus {
	  color: black;
	  text-decoration: none;
	  cursor: pointer;
	}
/* Modal Header */
	.modal-header {
		padding: 0 !important;
	}
	.modal-header2 {
		display: flex;
	    -ms-flex-align: start;
	    align-items: flex-start;
	    -ms-flex-pack: justify;
	    justify-content: space-between;
	    padding: 0.5rem 0.5rem;
	}
/* Modal Body */
	.modal-body {
		padding: 0 0 13px 1px !important;
		margin-bottom: unset !important;
	}
	.modal-body2 {
		
	}
	.modal-body3 {
		padding: 0 0 0 0;
	}
	#modal-title,#modal-title3,#titulo-listado{
		width: 100%;
		color:var(--azul);
		font-weight: normal;
		font-size: 20px;
		display: none;
	}
	#logo3{
		display: none;
	}
	#modal-msj3{
		display: none;
	}
/* Modal Footer */
	.modal-footer {
	  	padding: 2px 16px;
		border:none !important;
	}
	.border-xl-right{
	border:none;
}
/* Estilo para el texto del placeholder fuera del input */
	.input-container .placeholder-text {
    position: absolute;
    top: 112px;
    left: 8px; /* Ajusta la posición horizontal según tus necesidades */
    transform: translateY(-50%);
    font-size: 14px;
    color: #fff; /* Color del texto provisional */
    pointer-events: none; /* Evita que el texto afecte la interacción con el input */
    transition: all 0.3s ease;
}
/* Estilos personalizados para el checkbox */
	.mycheck {
	  appearance: none;
	  cursor: pointer;
	  background-color: var(--azulcilaccc);
	  width: 22px;
	  height: 22px;
	  border-radius: 4px;
	  border: 1px solid var(--azulcilac);
	}
/* Pseudo-elemento para mostrar la imagen cuando está seleccionado */
	.mycheck:checked::before {
  content: ""; /* No se muestra ningún contenido antes del checkbox */
  background-color: var(--azulcila);
  background-image:url(../icons/check.svg?1); /* Cambia esto a la ruta de tu imagen */
  border-radius: 4px;
  width: 22px;
  height: 22px;
  margin-top: -1px;
  display: block;
}
/* Estilos personalizados para el checkbox */
	.myradio {
	  appearance: none;
	  cursor: pointer;
	  background-color: var(--azulcilaccc);
	  width: 22px;
	  height: 22px;
	  border-radius: 50%;
	  border: 1px solid var(--azulcilac);
	}
/* Pseudo-elemento para mostrar la imagen cuando está seleccionado */
	.myradio:checked::before {
	  content: ""; /* No se muestra ningún contenido antes del checkbox */
	  background-color: var(--azulcila);
	  background-image:url(../icons/check.svg?1); /* Cambia esto a la ruta de tu imagen */
	  border-radius: 50%;
	  width: 22px;
	  height: 22px;
	  margin-top: -1px;
	  margin-left: -1px;
	  display: block;
	}
	.texto-resaltado{
		color:#fff !important;
		text-shadow: 0px 0px 2px #000;
	}
/*	Scrolls*/
	::-webkit-scrollbar {
		width: 4px;
		height: 4px;
		background-color: none;
		border-radius: 0;
		left:5px;
		cursor:pointer;
	}
	::-webkit-scrollbar-track {
		background-color: #eee;
		border:none;
		border-radius: 0;
	} 
	::-webkit-scrollbar-thumb {
		box-shadow:inset 0 0 8px 3px #888;
	    border-radius:0;
	    border:none;
	    background-clip: content-box;
	    cursor:pointer;
	} 
	::-webkit-scrollbar-thumb:hover {
		box-shadow:inset 0 0 7px 3px var(--azulcila);
	}
	::-webkit-scrollbar-button {
		display: block;
	}
	::-webkit-scrollbar-corner {
		background-color: none;
	}
/*	Controles para filtros*/
	.titulo{
		width:94%;
		float:left;
		height:32px;
		border-radius:20px;
	}
	.filtros{
	 	position: absolute;
		width: 100%;
		top:90px;
		left: 0;
		z-index: 9;
		margin-top:0;
		height: 50px;
		transition: margin-top 0.3s ease;	
	 	font-weight: 300;
	 	background-color: white;
	}
	.filtros-opciones{
		position: relative;
		height: 36px;
		width: auto;
		padding: 6px 14px 0 14px;
		background-color: white;
		border: solid 1px #ccc;
		float:left;
		margin-top: 7px;
		border-radius: 30px;
		font-weight: 400;
		color:#6c757d;
	}
	.filtros-opciones:hover{
		background-color: #eee;
		transition: background-color 0.5s ease;
		cursor:pointer;
	}
	.caja-opciones,.caja-opciones-izquierda{
		position: absolute;
		top:-395px;
		left: 0;
		width: fit-content;
		max-width: 420px;
		border-radius: 0 0 20px 20px;
		z-index: -1;
		transition: top 0.3s ease;
		background-color: white;
		max-height: 395px;
		overflow-y:auto;
		overflow-x: hidden;
	}
	.caja-opciones-izquierda{
		left:unset;
		right:0;
	}
	.caja-opciones-on{
		top:35px;
		transition: top .3s ease;
	}
	.limpiar{
		position: absolute;
		top:8px;
		right: 26px;
		width: 60px;
		color:var(--complementario);
		font-size: 12px;
		text-decoration:underline;
		text-shadow: 0px 0px 2px #000;
	}
	.limpiar:hover{
		color:#ccc;
	}
	.circulo{
		position: absolute;
		top:4px; 
		right:6px;		
		width:25px;
		height:25px;
		font-size: 12px;
		border-radius:50%;
		display:flex;
		justify-content:center;
		align-items:center;
		float:left;cursor:pointer;
	}
	.muestra-filtro{
		height: auto !important;
		transition: all 1s ease;
		overflow: hidden;
	}
	.oculta-filtro{
		height: 0;
		transition: all 0.3s ease;
		overflow: hidden;
	}
/* Small devices (landscape phones, 576px and up) */
/*	XS*/
	@media (min-width: 400px) {  
		.fuente{
			font-size: 1.1em;
		}
		.subfuente{
			font-size: 0.8em;
		}
		.marco-letrero{
			margin-top: 284px;
		}
		.marco-letrero-on{
			margin-top: 80px;
			transition: margin-top 0.9s;
		}
	}
/*	SM*/
	@media (min-width: 576px) {  
		.fuente{
			font-size: 1.1em;
		}
		.subfuente{
			font-size: 0.7em;
		}
		.marco-letrero{
			margin-top: 284px;
		}
		.marco-letrero-on{
			margin-top: 80px;
			transition: margin-top 0.9s;
		}
		.agentes{
			display: block;
		}
		.sidemenu2{
			width: 80%;
		}
		.texto-portada-agentes{
			width: 100%;
		}
		.texto-portada-nosotros{
			line-height:32px;
			width:100vw;
			height:28vh;
			text-align: center;
			margin-top: 0;
			margin-left: 0;
		}
		.texto-sistema{
			width:100vw;
			height: 40vh;
			padding: 5vw;
			font-size: 28px;
			text-align: left;
			line-height: 32px;
			font-weight: 700;
			color:var(--dark);
			float: left;
			background-color: #fff;
		}
		.seccion-sistema-on{
			width:100vw;
			height: 60vh;
			padding-left: 15vw;
			padding-right: 15vw;
		}
	}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
/*	MD*/
	@media (min-width: 768px) {  
		.fuente{
			font-size: 1.2em;
		}
		.subfuente{
			font-size: 0.8em;
		}
		.marco-letrero{
			margin-top: 284px;
		}
		.marco-letrero-on{
			margin-top: 80px;
			transition: margin-top 0.9s;
		}
		.texto-web{
			font-size: 18px;
			font-weight: 300;
			line-height: 28px;	
		}
		.height-lg{
			height: 68vh;
		}
		.marco-agentes{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			width: 100vw;
			height: 100vh;	
		}
		.texto-portada{
			width:35%;
			height:calc(100vh - 129px);
			margin-left:0;
			margin-top:0;
			padding: 20px 20px 80px 45px;
			color:var(--azulc);
			font-weight: 600;
			font-size: 3.2rem;
			text-align: unset;			
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
		}
		.line-height-titulo{
			line-height: 3rem;
		}
		.text-26{font-size:1.2rem}		
		.opcion-on,.opcion-off,.select-buscador,.buscador{
			font-size: 0.90rem;
		}
		.select-buscador,.operacion-buscador{
			width: 50%;
			border-radius: 0 60px 60px 0;
		}
		.operacion-buscador{
			border-radius: 60px 0 0 60px;	
		}
		.texto-sistema{
			width:50vw;
			height: 100vh;
			padding: 5vw;
			font-size: 28px;
			text-align: left;
			line-height: 32px;
			font-weight: 700;
			color:var(--dark);
			float: left;
			background-color: #fff;
		}
		.seccion-sistema-on{
			width:46vw;
			height: 100vh;
			padding-left: 4vw;
			padding-right: unset;
		}
	}

/* Large devices (desktops, 992px and up) */
/*LG*/
	@media (min-width: 992px) { 
		html{
			font-size: 12.5px;
		}
		.casita{
			display: flex;
		}
		.fuente{
			font-size: 1.3em;
		}
		.subfuente{
			font-size: 0.9em;
		}
		.marco-letrero{
			margin-top: 276px;
		}
		.marco-letrero-on{
			margin-top: 70px;
			transition: margin-top 0.9s;
		}
		.seccion-agentes::after{
			background-image: linear-gradient(to right,
								rgba(220,229,237,1) 12%,
								rgba(220,229,237,0.4) 30%,
								rgba(220,229,237,0) 100%);
		}
		.marco-agentes{
			position: unset;
			top: 0;
			left: 0;
			z-index: 0;
			width: 60vw;
			height: 100vh;	
		}
		.texto-web{
			font-size: 18px;
			font-weight: 300;
			line-height: 30px;	
		}
		.height-lg{
			height: 68vh;
		}
		.marco-agentes{
			position: unset;
			width: 60vw;
			height: 100vh;		
		}
		.texto-portada{
			width:30%;
			height:calc(100vh - 129px);
			margin-left:0;
			margin-top:0;
			padding: 20px 20px 100px 45px;
			color:var(--azulcila);
			font-weight: 600;
			font-size: 4.5rem;
			text-align: unset;			
		}
		.line-height-titulo{
			line-height: .5rem;
		}
		.opcion-on,.opcion-off,.select-buscador,.buscador{
			font-size: 20px;
		}
		.select-buscador,.operacion-buscador{
			width: 50%;
		}
		.texto-sistema{
			width:40vw;
			height: 100vh;
			padding: 5vw;
			font-size: 32px;
			text-align: left;
			line-height: 40px;
			font-weight: 700;
			color:var(--dark);
			float: left;
			background-color: #fff;
		}
		.seccion-sistema-on{
			width:56vw;
			height: 100vh;
			padding-left: 4vw;
			padding-right: unset;
		}
		.login{
			margin-left: 9vw;
		}
	}
 
/* Extra large devices (large desktops, 1200px and up) */
/*XL*/
	@media (min-width: 1296px) {  
		html{
			font-size: 16px;
		}
		.navbar-menu-buscador{
		 	height: 90px;
		 	padding: 0 10px;
		}
		.casita{
			display: flex;
		}
		.fuente{
			font-size: 1.45em;
		}
		.subfuente{
			font-size: 1em;
		}
		.marco-letrero{
			margin-top: 314px;
		}
		.marco-letrero-on{
			margin-top: 80px;
			transition: margin-top 0.9s;
		}
		.border-xl-right{
			border-right:solid 1px #ccc;
		}
		.caja-buscador-agente{
			width: 100%;
			aspect-ratio: 2;
			padding:60px;
			float: left;
		}
		.texto-portada{
			width:35%;
			height:calc(100vh - 129px);
			margin-left:0;
			margin-top:0;
			padding: 0 20px 80px 88px;
			font-weight: 600;
			font-size: 4.5rem;
			float: left;	
		}
		.foto-portada{
			margin-right: 100px;
			max-width: calc(60% - 100px);
		}		
		.line-height-titulo{
			line-height: 3rem;
		}
		.texto-portada-agentes{
			width: 100%;
			height: auto;
			padding: 0 60px;
			margin-top: 129px;
		}
		.texto-portada-nosotros{
			height: calc(100vh - 79px);
		}
		.texto-portada-2{
			width: 100vw;
			font-size: 50px;
			padding: 100px 0;
			color: #fff;
			font-weight: 700;
			display: flex;
			flex-direction: column;
			gap:9px;
		}
		.texto-portada-3{
			width: 100vw;
			line-height: 80px;
			padding: 100px 60px;
			color: #fff;
			font-weight: 700;
			text-align: center;
		}
		.seccion-agentes::after{
			background-image: linear-gradient(to right,
								rgba(220,229,237,1) 12%,
								rgba(220,229,237,0.4) 30%,
								rgba(220,229,237,0) 100%);
		}
		.marco-agentes{
			position: unset;
			width: 60vw;
			height: 100vh;		
		}
		.height-xl{
			height: 60vh;
		}
		.texto-sistema{
			width:40vw;
			height: unset;
			padding: 5vw;
			font-size: 32px;
			text-align: left;
			line-height: 40px;
			font-weight: 700;
			color:var(--dark);
			float: left;
			background-color: #fff;
		}
		.seccion-sistema-on{
			width:56vw;
			padding-left: 4vw;
			padding-right: unset;
		}
	}
	.boton-azul{
		height: 38px;
		background-color: var(--azul);
		color:#fff;
		font-size: 0.9rem;
		font-weight: 500;
		cursor:pointer;
		border-radius: 999px;
	    border:none;
		box-shadow: 0 1px 2px rgba(0,0,0, 0.6), inset 0 -8px 10px -6px rgba(0,0,0, 0.2);
	}
	.boton-rojo{
		height: 38px;
		background-color: var(--rojo);	
		color:#FFF;
		font-size: 0.9rem;
		font-weight: 500;
		cursor:pointer;
		border-radius: 999px;
	    border:none;
		box-shadow: 0 1px 2px rgba(0,0,0, 0.6), inset 0 -8px 10px -6px rgba(0,0,0, 0.2);
	}
	.boton-verde{
		height: 38px;
		background-color: var(--verde);
		color:#fff;
		font-size: 0.9rem;
		font-weight: 500;
		cursor:pointer;
		border-radius: 999px;
	    border:none;
		box-shadow: 0 1px 2px rgba(0,0,0, 0.6), inset 0 -8px 10px -6px rgba(0,0,0, 0.2);
		padding: 0 16px 0 16px;
	}
	.boton-celeste{
		height: 38px;
		background-color: var(--azulc);
		color:#fff;
		font-size: 0.9rem;
		font-weight: 500;
		cursor:pointer;
	    border:none;
		border-radius: 999px;
		box-shadow: 0 1px 2px rgba(0,0,0, 0.6), inset 0 -8px 10px -6px rgba(0,0,0, 0.2);
	}
	.boton-naranja{
		height: 38px;
		background-color: var(--naranja);
		color:#fff;
		font-size: 0.9rem;
		font-weight: 500;
		cursor:pointer;
	    border:none;
		border-radius: 999px;
		box-shadow: 0 1px 2px rgba(0,0,0, 0.6), inset 0 -8px 10px -6px rgba(0,0,0, 0.2);
	}
	.boton-mostaza{
		height: 38px;
		background-color: var(--naranjao);
		color:#fff;
		font-size: 0.9rem;
		font-weight: 500;
		cursor:pointer;
	    border:none;
		border-radius: 999px;
		box-shadow: 0 1px 2px rgba(0,0,0, 0.6), inset 0 -8px 10px -6px rgba(0,0,0, 0.2);
	}
	.boton-editar{
		position: absolute;
		top: -1rem;
		right: 0;
		width: 100px;
		height: 38px;
		border-radius: 999px;
	}
	.boton-rojo:hover,.boton-azul:hover,.boton-verde:hover,.boton-celeste:hover,.boton-naranja:hover,.boton-mostaza:hover,.boton-general:hover{
    	filter:brightness(1.15);
    	transform: translateY(-1px);
	}
	.boton-azul, .boton-rojo, .boton-verde, .boton-celeste, .boton-naranja, .boton-mostaza {
		-webkit-appearance: none;
		appearance: none;
	}
	.boton-rojo:active,.boton-azul:active,.boton-verde:active,.boton-celeste:active,.boton-naranja:active,.boton-mostaza:active,
	.boton-rojo:focus,.boton-azul:focus,.boton-verde:focus,.boton-celeste:focus,.boton-naranja:focus,.boton-mostaza:focus{
    	box-shadow: inset 0 8px 10px -6px rgba(0, 0, 0, 0.4);
		outline: none;
		border: none;
		color: #fff !important;
	}
	.boton-azul:active,.boton-azul:focus   { background-color: var(--azul)    !important; }
	.boton-rojo:active,.boton-rojo:focus   { background-color: var(--rojo)    !important; }
	.boton-verde:active,.boton-verde:focus  { background-color: var(--verde)   !important; }
	.boton-celeste:active,.boton-celeste:focus{ background-color: var(--azulc) !important; }
	.boton-naranja:active,.boton-naranja:focus{ background-color: var(--naranja)!important; }
	.boton-mostaza:active,.boton-mostaza:focus{ background-color: var(--naranjao)!important;}

/* Set width to make card deck cards 100% width */
/*
	@font-face{	font-family:HOL-L;
		src: url('../fonts/Manrope/Manrope-VariableFont_wght.ttf');
	}
	@font-face{	font-family:HOL-BB;
		src: url('../fonts/lineto-circular-bold.woff2');
	}
	@font-face{	font-family:HOL-OB;
		src: url('../fonts/lineto-circular-bold.woff2');
	}
	@font-face{	font-family:HOL-RO;
		src: url('../fonts/SourceSansPro-Regular.ttf');
	}
*/
	@font-face{	font-family:HOL-I;
		src: url('../fonts/Inter_Tight/InterTight-VariableFont_wght.ttf');
	}
	@font-face{	font-family:HOL-M;
		src: url('../fonts/Outfit/Outfit-VariableFont_wght.ttf');	
		/*src: url('../fonts/Montserrat/Montserrat-VariableFont_wght.ttf');*/
	}
	@font-face{	font-family:HOL-S;
		src: url('../fonts/Satoshi_Complete/Fonts/TTF/Satoshi-Variable.ttf');
	}
	@font-face{	font-family:HOL-mano2;
		src: url('../fonts/Rouge_Script/RougeScript-Regular.ttf');
	}
	@font-face{	font-family:HOL-mano;
		src: url('../fonts/Meow_Script/MeowScript-Regular.ttf');
	}
	@font-face{	font-family:HOL-L;
		src: url('../fonts/Manrope/Manrope-VariableFont_wght.ttf');
	}
	@font-face{	font-family:HOL-BB;
		src: url('../fonts/lineto-circular-bold.woff2');
	}
	@font-face{	font-family:HOL-OB;
		src: url('../fonts/lineto-circular-bold.woff2');
	}