/* ---------------------------------------------------------------------
   Carruseles: el deslizamiento vertical siempre pasa a la página.
   Los carruseles de Slick capturan el gesto táctil. Como en la home hay
   varios encadenados, al bajar con el dedo (o con la rueda en el
   simulador) el carrusel se quedaba con el gesto y el scroll se detenía.
   `touch-action: pan-y` deja el arrastre horizontal al carrusel y el
   vertical a la página.
   --------------------------------------------------------------------- */

.slick-slider,
.slick-list,
.slick-track,
.houzez-listing-carousel,
.houzez-properties-carousel-js,
.property-carousel-module,
.houzez-agents-carousel,
.swiper, .swiper-container {
	touch-action: pan-y !important;
}

/* Los enlaces de dentro tampoco deben bloquear el desplazamiento */
.slick-slide a, .slick-slide img { touch-action: pan-y; }

/* --- que no se vea el carrusel a medio armar ------------------------
   Las fotos llevan width/height en el HTML (584x438), así que hasta que
   el CSS las ajusta se dibujan a tamaño natural: ese es el destello de
   un segundo con las imágenes gigantes. Se reserva el alto y no se
   muestra el carrusel hasta que Slick terminó de montarlo. */

/* Se reserva el alto para que no salte el diseño, pero NO se oculta:
   si Slick fallara, el carrusel quedaría invisible para siempre.
   El destello se evita con la regla de abajo, que limita la foto y
   se aplica antes del primer pintado. */
.houzez-listing-carousel:not(.slick-initialized),
.houzez-properties-carousel-js:not(.slick-initialized) {
	min-height: 326px;
	overflow: hidden;
}
/* Mientras no esté montado, solo se ve la primera tarjeta */
.houzez-listing-carousel:not(.slick-initialized) > *:not(:first-child),
.houzez-properties-carousel-js:not(.slick-initialized) > *:not(:first-child) { display: none; }

/* Solo la FOTO DE LA PROPIEDAD llena su marco.
   Antes esta regla alcanzaba a todas las imágenes del carrusel y dejaba
   gigantes las fotos de los agentes. */
.houzez-listing-carousel .hover-effect > img,
.houzez-listing-carousel .hover-effect > a > img,
.houzez-properties-carousel-js .hover-effect > img,
.houzez-properties-carousel-js .hover-effect > a > img,
.property-carousel-module .hover-effect > img,
.property-carousel-module .hover-effect > a > img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
.property-carousel-module .hover-effect,
.houzez-listing-carousel .hover-effect {
	aspect-ratio: 4 / 3;
	height: auto;
	overflow: hidden;
}

/* Nada asoma por los bordes al desplazarse */
.houzez-listing-carousel .slick-list,
.houzez-properties-carousel-js .slick-list { overflow: hidden !important; }
.houzez-listing-carousel .slick-slide,
.houzez-properties-carousel-js .slick-slide { overflow: hidden; }

/* ---------------------------------------------------------------------
   Flechas a los costados del carrusel de propiedades.
   Se usan las MISMAS flechas del tema (tipografía houzez-iconfont), solo
   reubicadas a los lados y en gris. Todo va acotado a
   .property-carousel-buttons-wrap para no tocar las flechas que tiene
   cada tarjeta dentro de su galería.
   --------------------------------------------------------------------- */

.property-carousel-module {
	position: relative;
	padding-left: 52px;
	padding-right: 52px;
}

.property-carousel-buttons-wrap {
	position: static;
	margin: 0;
	padding: 0;
	min-height: 0;
}

.property-carousel-buttons-wrap .slick-prev,
.property-carousel-buttons-wrap .slick-next {
	position: absolute;
	top: 23%;                      /* valor inicial; carruseles.js lo ajusta
	                                  al centro exacto de la foto */
	transform: translateY(-50%);
	z-index: 6;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	font-size: 0;                  /* oculta las palabras Prev / Next */
	line-height: 1;
	cursor: pointer;
}
.property-carousel-buttons-wrap .slick-prev { left: 4px; }
.property-carousel-buttons-wrap .slick-next { right: 4px; }

.property-carousel-buttons-wrap .slick-prev::before,
.property-carousel-buttons-wrap .slick-next::before {
	font-family: 'houzez-iconfont' !important;
	font-size: 30px;
	line-height: 1;
	color: #9CAEB4 !important;     /* gris — el tema las pinta de blanco */
	opacity: 1;
	transition: color .16s ease;
	display: block;
}
.property-carousel-buttons-wrap .slick-prev::before { content: "\e911"; }
.property-carousel-buttons-wrap .slick-next::before { content: "\e912"; }

.property-carousel-buttons-wrap .slick-prev:hover::before,
.property-carousel-buttons-wrap .slick-next:hover::before { color: #024254 !important; }

.property-carousel-buttons-wrap .slick-prev.slick-disabled::before,
.property-carousel-buttons-wrap .slick-next.slick-disabled::before { opacity: .35; }

.property-carousel-buttons-wrap .slick-prev:focus-visible,
.property-carousel-buttons-wrap .slick-next:focus-visible {
	outline: 2px solid #00AEFF;
	outline-offset: 2px;
}

@media (max-width: 991px) {
	.property-carousel-module { padding-left: 30px; padding-right: 30px; }
	.property-carousel-buttons-wrap .slick-prev { left: 0; }
	.property-carousel-buttons-wrap .slick-next { right: 0; }
	.property-carousel-buttons-wrap .slick-prev::before,
	.property-carousel-buttons-wrap .slick-next::before { font-size: 26px; }
}

/* --- títulos de las tarjetas ----------------------------------------
   El tema les pone un interlineado de 50,4 px sobre una letra de 14:
   con dos o más líneas quedaban muy separadas entre sí. */
.property-carousel-module .item-title,
.property-carousel-module .item-title a,
.houzez-properties-carousel-js .item-title,
.houzez-properties-carousel-js .item-title a {
	line-height: 1.35 !important;
	font-weight: 600 !important;
	color: #1B2A2F;
}
.property-carousel-module .item-title a:hover,
.houzez-properties-carousel-js .item-title a:hover { color: #024254; }
.property-carousel-module .item-title,
.houzez-properties-carousel-js .item-title { margin-bottom: 10px !important; }

/* --- esquinas redondeadas en las fotos ------------------------------
   El tema redondea solo las de arriba (4px 4px 0 0) y esa regla gana
   por especificidad, así que hay que forzar las cuatro. */
.property-carousel-module .hover-effect,
.houzez-properties-carousel-js .hover-effect,
.houzez-listing-carousel .hover-effect,
.property-carousel-module a.hover-effect {
	border-radius: 12px !important;
	overflow: hidden !important;
}
.property-carousel-module .hover-effect > img,
.property-carousel-module .hover-effect > a > img,
.houzez-properties-carousel-js .hover-effect > img {
	border-radius: 12px !important;
}
/* la galería interna vive dentro del marco: se recorta igual */
.property-carousel-module .houzez-listing-carousel,
.property-carousel-module .houzez-listing-carousel .slick-list,
.property-carousel-module .slide-img,
.property-carousel-module .listing-gallery-wrap {
	border-radius: 12px !important;
	overflow: hidden !important;
}

/* --- "Selección de nuestras mejores propiedades" --------------------
   El título ya no cambia de color ni de peso al pasar el mouse: se
   queda quieto. El efecto lo hace la foto, con un zoom muy leve.
   Así nada se mueve de sitio. */
.item-wrap-v3 .item-title a,
.item-wrap-v3 .item-title a:link,
.item-wrap-v3 .item-title a:visited,
.item-wrap-v3:hover .item-title a,
.item-wrap-v3 .item-title a:hover,
.item-wrap-v3 .item-title a:focus { color: #FFFFFF !important; }

/* --- zoom suave de la foto ------------------------------------------ */
.item-wrap-v3 .hover-effect,
.property-carousel-module .hover-effect,
.houzez-properties-carousel-js .hover-effect { overflow: hidden !important; }

.item-wrap-v3 .hover-effect img,
.property-carousel-module .hover-effect > img,
.property-carousel-module .hover-effect > a > img,
.houzez-properties-carousel-js .hover-effect > img {
	transition: transform .55s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}
.item-wrap-v3:hover .hover-effect img,
.item-wrap-v3 .hover-effect:hover img,
.property-carousel-module .item-listing-wrap:hover .hover-effect > img,
.property-carousel-module .item-listing-wrap:hover .hover-effect > a > img {
	transform: scale(1.035);
}

/* A quien prefiera menos movimiento en su sistema, no se le anima */
@media (prefers-reduced-motion: reduce) {
	.item-wrap-v3 .hover-effect img,
	.property-carousel-module .hover-effect > img { transition: none; }
	.item-wrap-v3:hover .hover-effect img,
	.property-carousel-module .item-listing-wrap:hover .hover-effect > img { transform: none; }
}

/* --- el velo de abajo se oscurece al pasar el mouse -----------------
   Houzez apaga su propio velo en el hover (.hover-effect:hover::before
   { opacity: 0 }). Si además se enciende una capa nueva, las dos se
   cruzan y se ve un parpadeo. Así que primero se cancela ese apagado:
   el velo del tema se queda fijo en 1. Encima, ::after repite el mismo
   degradado y solo se le anima la opacidad, que sí se puede animar. */
.item-wrap-v3 .hover-effect,
.property-carousel-module .hover-effect,
.houzez-properties-carousel-js .hover-effect { position: relative; }

/* que el velo del tema NO se apague al pasar el mouse */
.item-wrap-v3 .hover-effect:hover::before,
.item-wrap-v3:hover .hover-effect::before,
.property-carousel-module .hover-effect:hover::before,
.property-carousel-module .item-listing-wrap:hover .hover-effect::before,
.houzez-properties-carousel-js .hover-effect:hover::before,
.hz-item-gallery-js:hover .listing-gallery-wrap .hover-effect::before { opacity: 1 !important; }

.item-wrap-v3 .hover-effect::after,
.property-carousel-module .hover-effect::after,
.houzez-properties-carousel-js .hover-effect::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0) 50%,
		rgba(0, 0, 0, .75) 100%
	);
	opacity: 0;
	transition: opacity .45s ease;
	pointer-events: none;
	z-index: 1;
}

.item-wrap-v3:hover .hover-effect::after,
.item-wrap-v3 .hover-effect:hover::after,
.property-carousel-module .item-listing-wrap:hover .hover-effect::after { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
	.item-wrap-v3 .hover-effect::after,
	.property-carousel-module .hover-effect::after { transition: none; }
}