/* COLORES DEBUG

 #destacadas .contDivDetalles { background:green; }
 #destacadas .contPropDescr { background:orange; }
 #destacadas .contPropTit { background:blue; }
 #destacadas .contPropImg { background:red; }
 #destacadas .propiedad { background:green;}

*/

.web {
	overflow-x: hidden;
}

#destacadas{
	 background:#181818;
    position: relative;
    width:100vw;
    height:calc(100vh - 70px);	 
	 z-index:1;
	 overflow:hidden;
 }

#destacadas .img_fondo {
	position:absolute;
    background-image: url('../img/3.jpg');
    background-color:   black;
	background-size: cover;
	background-position:center;
    width:100%;
    height:100%;
    filter: opacity(.1);
}

#destacadas .propiedad:not(.activo){
	display:none;
}

#titDestacadas{
	width:100%;
	text-align:center;
	padding-top:50px;
	font-size:30px;
	color: var(--color-secund);
	
}


#destacadas .propiedad {

	height: 80vh;
	padding-top:50px;
}


#destacadas .contPropImg{
	position:relative; /*inn*/
	width: calc(100% - 20px);
    min-height: 300px;
	margin: 30px 0;
	
}
#destacadas .propImg{
	position: absolute;
	background-color:   black;
	background-size: cover;
	background-position: center;
	width:100%;
	height:100%;
	left:0%;
	top:0%;
	border:	white 2px solid;
	box-shadow: black 10px 9px 12px 6px;
	z-index:100;

}


#destacadas .contPropTit {
	min-height:60px;
	position:relative;
	width:100%;
}


#destacadas .propTit {
	
	position:absolute;
	color:white;
	font-size: 30px; /*clamp(2vw, 30px, 50px);*/
	width:100%;
	text-align:center;
}

#destacadas .contPropDescr {
	position:relative;
	width:100%;
	min-height:200px;	
	
}

#destacadas .propDescr {
	position:absolute;
	color:darkgray;
	font-size: 20px; /*clamp(1.5vw, 14px,40px);*/
	width:100%;
	text-align:center;
}

#destacadas .contDivDetalles {
	position:relative;
	min-height:120px;
}






#destacadas .divDetalles {
	position:absolute;
	color:white;
	font-size:20px;
	
	width:100%;
	text-align:center;
	display:inline-flex;
	opacity:0;
}

#destacadas .detalle {
	flex:33%;
	display: inline-grid;
}

#destacadas .detalle .valor {
	color:white;
	font-size:30px;
}

#destacadas .detalle .medida {
	color:#8d8b89;
	font-size:15px;
}

#destacadas button {
	position:absolute;
	background-color:var(--color-secund);
	top:85%;
	left:calc(50% - 80px); 
	color:white;
	box-shadow: black 5px 5px 10px 2px;
	padding:10px 30px;
}

/* letra dentro de icono */

#destacadas .icono{
	position:relative;

}
#destacadas .dentroIcono{
	position:absolute;
	left:calc(50% - 3px);
	top:5px;
	font-size:14px;
	display:none;
}



/* _________ ANIMACIONES __________ */

/* foto */

@keyframes destacadas_img {
  0% {
	left:110%;
	top:20%;
	opacity:0;
	transform: perspective(50em) rotateY(-40deg);
  }
  15%,85% {	
	left:-20px;
	top:0%;
	opacity:1;
	transform: perspective(50em) rotateY(-20deg);
  }
  100% {
	left:110%;
	top:10%;
	opacity:0;
	transform: perspective(50em) rotateY(10deg);
  }	
}

#destacadas .propImg {

  animation-name: destacadas_img;
  animation-duration: 10s;
  animation-iteration-count: infinite;
	animation-timing-function: ease;
}


/* detalles */

@keyframes destacadas_detalles {
  0%,5% {
	left:0%;
	top:200%;
	opacity:0;
	transform: perspective(50em) rotateX(100deg);
  }
  15%,85% {	
	left:0%;
	top:0%;
	opacity:1;
	transform: perspective(50em) rotateX(0deg);
  }
  100% {
	left:0%;
	top:200%;
	opacity:0;
	transform: perspective(50em) rotateX(100deg);
  }	
}

#destacadas .divDetalles {

  animation-name: destacadas_detalles;
  animation-duration: 10s;
  animation-iteration-count: infinite;
	animation-timing-function: ease;
}


/* descripcion */

@keyframes destacadas_descr {
  0% {
	top:30%;
	left:-50%;
	opacity:0;
	transform: perspective(50em) rotateY(-50deg);
  }
  15%,85% {	
	top:0px;
	left:0px;
	opacity:1;
	transform: perspective(50em) rotateY(-10deg);
  }
  100% {
	top:30%;
	left:70%;
	opacity:0;
	transform: perspective(50em) rotateY(30deg);
  }	
}

#destacadas .propDescr {

  animation-name: destacadas_descr;
  animation-duration: 10s;
  animation-iteration-count: infinite;
	animation-timing-function: ease;
}


/* titulo */

@keyframes destacadas_titulo {
  0% {
	top:-200%;
	left:-100%;
	opacity:0;
	transform: perspective(50em) rotateX(100deg);
  }
  15%,85% {	
	top:20%;
	left:0%;
	opacity:1;
	transform: perspective(50em) rotateX(0deg);
  }
  100% {
	top:-200%;
	left:-100%;
	opacity:0;
	transform: perspective(50em) rotateX(-100deg);
  }	
}

#destacadas .propTit {

  animation-name: destacadas_titulo;
  animation-duration: 10s;
  animation-iteration-count: infinite;
	animation-timing-function: ease;
}


/* boton */

@keyframes destacadas_boton {
  0%,15% {

	opacity:0;
  }
  40%,80% {	
	opacity:1;
  }
  95%,100% {
	opacity:0;
  }	
}

#destacadas button {

  animation-name: destacadas_boton;
  animation-duration: 10s;
  animation-iteration-count: infinite;
	animation-timing-function: ease;
}