/*
 * Inmoblao · Widgets de Elementor (frontend)
 * Requiere el design system (inmoblao.css) + frontend.css de properties,
 * que se cargan como dependencias del handle de este CSS.
 */

.inmo-el-block { width: 100%; }

/* Los widgets son contenido EMBEBIDO en páginas de Elementor: no deben heredar
   el `min-height:100vh` ni el fondo del scope `.inmo-public` (que están pensados
   para las páginas archive/single de pantalla completa). Si no, el widget ocupa
   toda la altura de la pantalla y deja un hueco enorme (sobre todo el buscador). */
.inmo-public.inmo-el-search,
.inmo-public.inmo-el-block,
.inmo-public.inmo-el-carousel,
.inmo-public.inmo-el-empty {
	min-height: 0;
	background: transparent;
}

.inmo-el-empty {
	padding: 28px;
	text-align: center;
	border: 1px dashed var(--border-strong, #d8d4cc);
	border-radius: var(--r-lg, 14px);
}

/* ── Grid ─────────────────────────────────────────────────────────── */

/* Columnas y gap los controla el widget (controles responsive de Elementor que
   generan `grid-template-columns`/`gap` con {{WRAPPER}}). Aquí solo el fallback
   de 3 columnas por si el CSS del control aún no estuviera. NO ponemos media
   queries propias para no competir con el control responsive del usuario. */
.inmo-el-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;   /* todas las tarjetas de la fila, misma altura */
}
/* La tarjeta llena su celda → mismo tamaño; el botón "Ver propiedad" queda
   alineado abajo en todas (lo ancla margin-top:auto del .inmo-pc-contact).
   min-width:0 permite que las tarjetas se encojan y quepan 4+ columnas. */
.inmo-el-grid > .inmo-pc { width: 100%; height: 100%; min-width: 0; }

/* ── Buscador ─────────────────────────────────────────────────────── */

.inmo-el-search-title {
	margin: 0 0 12px;
	font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
}
.inmo-el-search-form {
	display: flex;
	gap: 10px;
	align-items: stretch;
	flex-wrap: wrap;
}
.inmo-el-search-field { flex: 1 1 150px; min-width: 0; }
.inmo-el-search-field .inmo-input { width: 100%; height: 100%; min-height: 44px; }
.inmo-el-search-submit {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	white-space: nowrap;
	min-height: 44px;
	padding: 0 30px;
}

/* Vertical: campos apilados a ancho completo, compacto (sin huecos). */
.inmo-el-search-vertical .inmo-el-search-form { flex-direction: column; gap: 10px; }
.inmo-el-search-vertical .inmo-el-search-field { flex: 0 0 auto; width: 100%; }
.inmo-el-search-vertical .inmo-el-search-submit { width: 100%; }

@media ( max-width: 720px ) {
	.inmo-el-search-form { flex-direction: column; }
	.inmo-el-search-field,
	.inmo-el-search-submit { width: 100%; flex: 1 1 auto; }
}

/* ── Carrusel ─────────────────────────────────────────────────────── */

.inmo-el-carousel {
	position: relative;
	/* Espacio lateral para que las flechas vayan POR FUERA de las tarjetas. */
	padding: 0 52px;
	/* Defaults (el widget los sobreescribe inline). */
	--inmo-car-d: 3;
	--inmo-car-t: 2;
	--inmo-car-m: 1;
	--inmo-car-gap: 20px;
}

/* Viewport SIN scroll (movemos el track con transform) → no hay barra de
   desplazamiento y por tanto no queda espacio vacío debajo del carrusel. */
.inmo-el-car-viewport {
	overflow: hidden;
}

.inmo-el-car-track {
	display: flex;
	align-items: stretch;   /* todas las slides a la misma altura */
	gap: var(--inmo-car-gap);
	transition: transform .45s cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}
/* Cada slide y su tarjeta llenan la altura → tarjetas idénticas, botón abajo. */
.inmo-el-car-slide { display: flex; }
.inmo-el-car-slide > .inmo-pc { width: 100%; height: 100%; }
@media ( prefers-reduced-motion: reduce ) {
	.inmo-el-car-track { transition: none; }
}

.inmo-el-car-slide {
	flex: 0 0 auto;
	width: calc((100% - (var(--inmo-car-gap) * (var(--inmo-car-d) - 1))) / var(--inmo-car-d));
}
@media ( max-width: 1024px ) {
	.inmo-el-car-slide {
		width: calc((100% - (var(--inmo-car-gap) * (var(--inmo-car-t) - 1))) / var(--inmo-car-t));
	}
}
@media ( max-width: 600px ) {
	.inmo-el-car-slide {
		width: calc((100% - (var(--inmo-car-gap) * (var(--inmo-car-m) - 1))) / var(--inmo-car-m));
	}
}

/* Flechas POR FUERA: posicionadas en el padding lateral del carrusel. */
.inmo-el-car-arrow {
	position: absolute; top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff;
	color: var(--fg, #1a1a1a);
	border: 1px solid var(--border-subtle, #e7e3da);
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
	cursor: pointer;
	transition: background .15s, color .15s, opacity .15s;
}
.inmo-el-car-arrow:hover { background: var(--fg, #1a1a1a); color: #fff; }
.inmo-el-car-prev { left: 0; }
.inmo-el-car-next { right: 0; }
.inmo-el-car-prev svg { transform: rotate(180deg); }
.inmo-el-car-arrow[hidden] { display: none; }
.inmo-el-car-arrow:disabled { opacity: .35; cursor: default; }

@media ( max-width: 600px ) {
	/* En móvil reducimos el hueco lateral y metemos las flechas un poco dentro. */
	.inmo-el-carousel { padding: 0 8px; }
	.inmo-el-car-arrow { width: 36px; height: 36px; background: rgba(255,255,255,.9); }
}

/* Puntos */
.inmo-el-car-dots {
	display: flex; justify-content: center; gap: 7px;
	margin-top: 14px;
}
.inmo-el-car-dot {
	width: 8px; height: 8px;
	padding: 0;
	border: 0; border-radius: 50%;
	background: var(--border-strong, #cfc9bd);
	cursor: pointer;
	transition: background .15s, transform .15s;
}
.inmo-el-car-dot.is-active {
	background: var(--accent, #e2562b);
	transform: scale(1.25);
}

@media ( prefers-reduced-motion: reduce ) {
	.inmo-el-car-viewport { scroll-behavior: auto; }
}