@charset "utf-8";
/* CSS Document */



@font-face {
 font-family: 'benzin';
  src:  url("../../fonts/benzin-regular.woff2") format('woff2');
}

@font-face {
 font-family: 'Montserrat-100';
  src:  url( "../../fonts/Montserrat-100.woff2") format('woff2');
}

@font-face {
 font-family: 'Montserrat-200';
  src:  url("../../fonts/Montserrat-200.woff2") format('woff2');
}
@font-face {
 font-family: 'Montserrat-300';
 src:  url("../../fonts/Montserrat-300.woff2") format('woff2');
}
@font-face {
 font-family: 'Montserrat-500';
 src:  url( "../../fonts/Montserrat-500.woff2") format('woff2');
}
@font-face {
 font-family: 'Montserrat-600';
 src:  url( "../../fonts/Montserrat-600.woff2") format('woff2');
}
@font-face {
 font-family: 'Montserrat-700';
 src:  url( "../../fonts/Montserrat-700.woff2") format('woff2');
}
@font-face {
 font-family: 'Montserrat-800';
 src:  url( "../../fonts/Montserrat-800.woff2") format('woff2');
}
@font-face {
 font-family: 'Montserrat-Regular';
 src:  url( "../../fonts/Montserrat-Regular.woff2") format('woff2');
}

.compce:hover{
	color: #FFC107;font-weight: bolder;
}
.compce {
	color: #FFFFFF;
}
.compce:hover:before {
    width: 100%;
}
.compce:before {
    background-color: #0CA0C4;
}
.compce:before {
    content: "";
    width: 0;
    height: 2px;
    background-color: #FFC107;
    position: absolute;
    bottom: -3px;
    -webkit-transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
    transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}


:root {
		--col-data:  ;
		--col-light:;
		--col-dark: ;
		--font-family: 'benzin', sans-serif;
		--font-family2: 'Montserrat-100', sans-serif;
		--font-family3: 'Montserrat-200', sans-serif;
		--font-family4: 'Montserrat-300', sans-serif;
		--font-family5: 'Montserrat-500', sans-serif;
		--font-family6: 'Montserrat-600', sans-serif;
		--font-family7: 'Montserrat-700', sans-serif;
		--font-family8: 'Montserrat-800', sans-serif;
		--font-family9: 'Montserrat-Regular', sans-serif;
		--font-xsss: clamp(0.02rem, calc(1rem + 0.1vw), 0.8rem);
		--font-xss: clamp(0.1rem, calc(1rem + 0.1vw), 1.4rem);
		--font-xs: clamp(0.2rem, calc(1.1rem + 0.2vw), 1.7rem);
		--font-sm: clamp(1.42rem, calc(1.24rem + 0.9vw), 1.88rem);
		--font-md: clamp(1.89rem, calc(1.53rem + 1.8vw), 2.81rem);
		--font-lg: clamp(2.52rem, calc(1.85rem + 3.32vw), 4.22rem);
  		--font-xl: clamp(3.35rem, calc(2.19rem + 2.8vw), 6.33rem);  
  		--font-xxl: clamp(6.35rem, calc(4.19rem + 8.8vw), 10.33rem);  
		--padding-xl: clamp(3.35rem, calc(2.19rem + 111.8vw), 6.33rem); 
		--padding-xll: clamp(4.35rem, calc(2.99rem + 141.8vw), 8.33rem); 
		
}

.benzin{font-family: var(--font-family) !important}
.montserrat-100{font-family: var(--font-family2) !important}
.montserrat-200{font-family: var(--font-family3) !important}
.montserrat-300{font-family: var(--font-family4) !important}
.montserrat-500{font-family: var(--font-family5) !important}
.montserrat-600{font-family: var(--font-family6) !important}
.montserrat-700{font-family: var(--font-family7) !important}
.montserrat-800{font-family: var(--font-family8) !important}
.montserrat-regular{font-family: var(--font-family9) !important}

.font-xsss{font-size: var(--font-xsss) !important}
.font-xss{font-size: var(--font-xss)}
.font-xs{font-size: var(--font-xs)}
.font-sm{font-size: var(--font-sm)}
.font-md{font-size: var(--font-md)}
.font-lg{font-size: var(--font-lg)}
.font-xl{font-size: var(--font-xl)}
.font-xxl{font-size: var(--font-xxl)}

.color-blanco{color: #FFFFFF !important}
.color-negro{color: #191919 !important}

.iconos-w-50px{
	width: 50px;
}

.grecaptcha-badge { display: none !important}	

@keyframes floatY {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-12px); } /* ajusta la distancia */
}

/* 2) Clase para flotar continuamente */
.floaty {
  animation: floatY 3s ease-in-out infinite alternate;
  will-change: transform;
}

/* 3) Si usas animate.css (fadeIn) y quieres AMBAS animaciones:
   combina las dos en una sola declaración (el fadeIn se ejecuta 1 vez) */
.wow.animated.fadeIn.floaty {
  animation: fadeIn .8s ease-out both, floatY 1s ease-in-out 0.8s infinite alternate;
  /* el 0.8s retrasa el flotado hasta que termine el fadeIn */
}



a{
		text-decoration: none !important
	}


.espaciodiv {
	padding: 50px;
}

.espacio20px {
	padding: 20px;
}

.cartillas-casas{
border-radius: 20px 20px 0px 0px;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid #c9c9c9;
	height: 100%;
}
.comprar-casa3d{
	width: 250px
}
.vende-casa3d{
	width: 285px
}
.comprar-casa-llaves{
	width: 170px;
	position: absolute;
	left: 0px;
	top: 5px;
}
.comprar-casa-moneda{
	width: 170px;
	position: absolute;
	right: 0px;
	top: 10px;
}
.piquete-after-centrado::after{
	   content: " ";
    width: 95px;
    background-color: #FFC107;
    position: absolute;
    bottom: -8px;
    height: 3px;
}

.titular1::after{
	    content: " ";
    width: 40px;
    background-color: #ffffff;
    position: absolute;
    bottom: -8px;
    height: 3px;
}

.titular2::after{
	    content: " ";
    width: 40px;
    background-color: #1B3A53;
    position: absolute;
    bottom: -8px;
    height: 3px;
}

body{padding: 0 !important}


.slider-container {
  position: relative;
  height: 100%;
}

.slider-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 1s ease;
  opacity: 0;
  z-index: 0;
}

.slider-slide.active {
  opacity: 1;
  z-index: 1;
}

.slider-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*.slider-bg.second-slide {
  background: url('assets/images/urban-bg.jpg') no-repeat center center/cover;
  width: 100%;
  height: 100%;
}*/


/*
.slider-overlay {
  position: absolute;
  top: 30%;
  left: 10%;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.65);
  padding: 30px 40px;
  max-width: 450px;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
}

.slider-controls {
  position: absolute;
  bottom: 40px;
  left: 50px;
  z-index: 5;
}
.slider-controls button {
  background: #000;
  color: #fff;
  border: none;
  font-size: 30px;
  margin-right: 10px;
  padding: 5px 15px;
  cursor: pointer;
}
*/
.slider-overlay h1 {
  /*font-size: var(--font-lg);*/
  margin-bottom: 10px;
}

.slider-overlay p {
  /*font-size: var(--font-sm);*/
  margin-bottom: 20px;
}

.btn-slider {
  display: inline-block;
  border: 2px solid #fff;
  color: #fff;
  padding: 10px 30px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s ease;
}

.btn-slider:hover {
  background: #fff;
  color: #000;
}









.propiedades-destacadas{
	width: 100%;
	background-color: #1B3A53;
}



body {
      background-color: #f5f6fa;
      /*display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;*/
    }

    .login-box {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.08);
      width: 100%;
      max-width: 350px;
      text-align: center;
    }

    h2 {
      margin-bottom: 1.5rem;
      color: #1e2a36;
    }

    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 10px 12px;
      margin-bottom: 1rem;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 16px;
    }

    button {
      background-color: #2563eb;
      color: white;
      border: none;
      padding: 12px;
      width: 100%;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s;
    }

    /*button:hover {
      background-color: #1e4bb8;
    }*/

    .error {
      color: red;
      margin-top: 1rem;
    }

	.box {
  background-color: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  height: 180px;
}

	.text-purple {
  color: #8e44ad;
}





#sidebar {
  width: 275px;
  height: 100vh;
  background: #2f3640;
  color: white;
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
}

#sidebar h2 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #f5f6fa;
}

#sidebar ul {
  list-style: none;
  padding: 0;
}

#sidebar ul li {
  margin: 15px 0;
}

#sidebar ul li a {
  color: white;
  text-decoration: none;
  /*font-weight: bold;*/
  display: block;
  transition: 0.2s;
}

.parallax-section {  position: relative;  height: 100vh;  overflow: hidden;}
.parallax {  position: absolute;  width: 100%;  height: auto;  object-fit: cover;  top: 0;  left: 0;}

/*#sidebar ul li a:hover {
  color: #FFC107 ;
}*/