@charset "utf-8";
/* ── assets/prop-search.css ── */
/* Va PRIMERO, antes de cualquier comentario: si no es el primer byte del archivo, el
   navegador la ignora. El servidor sirve los .css sin charset, y sin esta linea la
   codificacion de la hoja queda librada a una cadena de reservas. Ver CLAUDE.md. */
/* Buscadores portal (propiedades + alojamientos).
 * Layout: --horizontal | --vertical
 * Tema:   --tema-prop (bg primary, botón secondary)
 *         --tema-aloj (bg secondary, botón primary)
 */

.mdpd-prop-search {
	--mdpd-prop-search-control-h: 3rem;
	--mdpd-search-bg: var(--fs-color-primary, var(--primary-color, #465f70));
	--mdpd-search-btn: var(--fs-color-secondary, #ff002a);
	--mdpd-prop-accent: var(--mdpd-search-btn);
	color: #fff;
	border-radius: 1.25rem;
	padding: 1rem 1rem 1.1rem;
	margin-bottom: 1.25rem;
	width: 100%;
	background: var(--mdpd-search-bg);
}

.mdpd-prop-search--tema-prop {
	--mdpd-search-bg: var(--fs-color-primary, var(--primary-color, #465f70));
	--mdpd-search-btn: var(--fs-color-secondary, #ff002a);
}

/* Fondo primary: el toggle checked global usa primary y se pierde. */
.mdpd-prop-search--tema-prop input[type="checkbox"]:not(.mdpd-no-toggle):checked {
	background: var(--mdpd-search-btn);
	border-color: var(--mdpd-search-btn);
}

.mdpd-prop-search--tema-prop input[type="checkbox"]:not(.mdpd-no-toggle):focus-visible {
	outline-color: var(--mdpd-search-btn);
}

.mdpd-prop-search--tema-aloj {
	--mdpd-search-bg: var(--fs-color-secondary, var(--primary-color, #ff002a));
	--mdpd-search-btn: var(--fs-color-primary, #465f70);
}

/* Shortcode flag `transparent`: mismo color de fondo al 80% de opacidad. */
.mdpd-prop-search--transparent {
	background: color-mix(in srgb, var(--mdpd-search-bg) 80%, transparent);
}

.mdpd-prop-search__form {
	display: contents;
	margin: 0;
}

.mdpd-prop-search__title,
.mdpd-prop-search__subtitle,
.mdpd-prop-search__label,
.mdpd-prop-search__range-sep,
.mdpd-prop-search__check,
.mdpd-prop-search fieldset legend {
	color: #fff;
}

.mdpd-prop-search__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.25;
	font-weight: 700;
}

/* Ícono antepuesto al título (Portal → Buscadores). Sin ícono elegido, el
 * título no lleva esta clase y se ve igual que siempre.
 *
 * Horizontal desktop: fila, ícono inline antes del texto (default de flex).
 * Vertical / mobile (ver reglas más abajo): flex-direction: column apila
 * ícono y texto sin ambigüedad. Se prefirió esto a un <br> + flex-basis:100%
 * — con texto suelto (nodo de texto, no <span>) al lado del <br> ese truco
 * es inconsistente entre navegadores: el salto queda "a medias". Column no
 * depende de cómo el navegador trate el nodo de texto.
 * `align-items: center` sirve para las dos direcciones: en fila centra el
 * ícono y el texto en el eje vertical (baseline); en columna los centra
 * horizontalmente — no hace falta una regla aparte para cada caso. */
.mdpd-prop-search__title--has-icon {
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.mdpd-prop-search__title-icon {
	height: 1.3em;
	width: auto;
	display: inline-block;
	flex: 0 0 auto;
}

.mdpd-prop-search__subtitle {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.3;
	font-weight: 400;
	opacity: 0.92;
}

.mdpd-prop-search__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.mdpd-prop-search__label {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	opacity: 0.92;
}

.mdpd-prop-search__control {
	width: 100%;
	min-height: var(--mdpd-prop-search-control-h);
	margin-bottom: 0;
	border: 1px solid #e7eef0;
	border-radius: 0.625rem;
	padding: 0.55rem 2rem 0.55rem 0.75rem;
	background-color: #fff;
	color: #111;
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.2;
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, #111 50%),
		linear-gradient(135deg, #111 50%, transparent 50%);
	background-position:
		calc(100% - 1.1rem) calc(50% - 0.15rem),
		calc(100% - 0.8rem) calc(50% - 0.15rem);
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
}

.mdpd-prop-search__control:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-color: #fff;
}

.mdpd-prop-search__control:disabled {
	opacity: 0.72;
	cursor: not-allowed;
	color: #111;
	background-color: #f3f5f6;
	-webkit-text-fill-color: #111;
}

.mdpd-prop-search__submit {
	width: 100%;
	min-width: 160px;
	min-height: var(--mdpd-prop-search-control-h);
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0.75rem !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff !important;
	background: var(--mdpd-search-btn) !important;
}

.mdpd-prop-search__submit .fa,
.mdpd-prop-search__submit .mdpd-icon {
	margin-right: 0.35em;
}

.mdpd-prop-search__submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* —— Horizontal props: 2 filas ——
 * Fila 1: operación, tipo, dorm, amb, baños, ciudad, zona
 * Fila 2: precio, pesos, dólares, apto crédito, cochera, buscar
 */
.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal {
	display: grid;
	/* Última columna (zona en fila 1, botón Buscar en fila 2): ancho mínimo
	 * 160px para el botón; el resto se reparte el espacio sobrante. */
	grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(160px, 1fr);
	gap: 0.65rem;
	row-gap: 0.75rem;
	align-items: end;
}

.mdpd-prop-search--horizontal .mdpd-prop-search__title,
.mdpd-prop-search--horizontal .mdpd-prop-search__subtitle {
	grid-column: 1 / -1;
	align-self: auto;
}

.mdpd-prop-search--horizontal .mdpd-prop-search__field {
	margin-bottom: 0;
}

.mdpd-prop-search--horizontal .mdpd-prop-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Fila 2 en desktop, 7 columnas justas: moneda (2) + precio (2) + los dos
 * checks (1 + 1) + buscar (1). Antes eran precio (2) + cuatro checks + buscar,
 * con pesos y dólares como dos de esos checks. */
.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--moneda {
	grid-column: span 2;
	gap: 0;
}

.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--price {
	grid-column: span 2;
	gap: 0;
}

/* La nota de «elegí una moneda» sobra en horizontal: el switch está pegado al
 * slider y se ve apagado. En una fila de 7 columnas, una línea de texto extra
 * descuadra el alto de toda la fila. */
.mdpd-prop-search--horizontal .sf-price-nota {
	display: none;
}

.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--price .sf-price-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0;
}

.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--price .mdpd-prop-search__label {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: nowrap;
}

.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--price .sf-price-values,
.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--price .sf-price-slider {
	margin: 0;
}

.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--check {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: var(--mdpd-prop-search-control-h);
	font-size: 0.8rem;
	cursor: pointer;
}

.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--check input {
	margin: 0;
	flex: 0 0 auto;
}

.mdpd-prop-search--horizontal .mdpd-prop-search__field--submit {
	align-self: end;
}

/* Alojamientos horizontal: subtítulo + tipo + zona + buscar */
.mdpd-prop-search--tema-aloj.mdpd-prop-search--horizontal {
	display: grid;
	/* Botón con mínimo 160px (antes topeaba a 8.5rem = 136px, menos que eso). */
	grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) minmax(160px, 1fr);
	gap: 0.65rem;
	row-gap: 0.75rem;
	align-items: end;
}

/* —— Vertical —— */
.mdpd-prop-search--vertical {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	padding: 1.25rem 1rem 1rem;
}

.mdpd-prop-search--vertical .mdpd-prop-search__title,
.mdpd-prop-search--vertical .mdpd-prop-search__subtitle {
	text-align: center;
}

/* Vertical (sidebar/widget, cualquier ancho de pantalla): ícono arriba,
 * texto abajo, centrado — siempre, no solo en el breakpoint mobile (que es
 * un layout distinto, ver media query más abajo). */
.mdpd-prop-search--vertical .mdpd-prop-search__title--has-icon {
	flex-direction: column;
}

.mdpd-prop-search--vertical .mdpd-prop-search__field {
	margin-bottom: 0;
	gap: 0;
	width: 100%;
}

.mdpd-prop-search--vertical .mdpd-prop-search__field:not(.mdpd-prop-search__field--price):not(.mdpd-prop-search__field--checks):not(.mdpd-prop-search__field--moneda) > .mdpd-prop-search__label {
	display: none;
}

.mdpd-prop-search--vertical .mdpd-prop-search__field--price .mdpd-prop-search__label,
.mdpd-prop-search--vertical .mdpd-prop-search__field--moneda legend.mdpd-prop-search__label,
.mdpd-prop-search--vertical .mdpd-prop-search__field--checks legend.mdpd-prop-search__label {
	display: block;
	margin-bottom: 0.5rem;
}

/* Vertical: label → slider → valores (mismo orden visual que antes). */
.mdpd-prop-search--vertical .mdpd-prop-search__field--price {
	display: flex;
	flex-direction: column;
}

.mdpd-prop-search--vertical .mdpd-prop-search__field--price .sf-price-head {
	display: contents;
}

.mdpd-prop-search--vertical .mdpd-prop-search__field--price .mdpd-prop-search__label {
	order: 1;
}

.mdpd-prop-search--vertical .mdpd-prop-search__field--price .sf-price-slider {
	order: 2;
}

.mdpd-prop-search--vertical .mdpd-prop-search__field--price .sf-price-values {
	order: 3;
}

/* Sin `order` propio el <p> es 0 y se iba arriba del título del campo. Va
 * último: primero el rango, después el porqué de que esté apagado. */
.mdpd-prop-search--vertical .mdpd-prop-search__field--price .sf-price-nota {
	order: 4;
	margin-top: 0.15rem;
}

.mdpd-prop-search--vertical fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.mdpd-prop-search--vertical .mdpd-prop-search__checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.mdpd-prop-search--vertical .mdpd-prop-search__check {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.8rem;
	cursor: pointer;
}

.mdpd-prop-search--vertical .mdpd-prop-search__check input {
	margin: 0;
	flex: 0 0 auto;
}

/* —— Switch de moneda ——
 * Dos posiciones sobre un riel: Pesos · Dólares, pesos de fábrica. **No filtra,
 * traduce**: elige en qué unidad se expresa el rango de precio, y el servidor
 * convierte con la cotización del portal para buscar en todo el catálogo.
 * (Hubo una tercera posición, «Indistinta», mientras la moneda todavía
 * filtraba y elegir una escondía la mitad de la cartera.)
 *
 * Por debajo son dos `input[type=radio]` en un `fieldset`, que es lo que el
 * teclado y un lector de pantalla ya saben recorrer; los radios se esconden
 * visualmente y la perilla es un `<span>` que se mueve con
 * `data-mdpd-moneda-pos` (0, 1).
 *
 * `translateX` sobre el ancho de media pastilla y no `left`: se anima en la
 * capa de composición, sin recalcular layout en cada clic.
 */
.mdpd-prop-search__field--moneda {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.mdpd-prop-moneda {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
	min-height: var(--mdpd-prop-search-control-h);
	padding: 0.2rem;
	border: 1px solid #e7eef0;
	border-radius: 0.625rem;
	background: #fff;
	isolation: isolate;
}

.mdpd-prop-moneda__perilla {
	position: absolute;
	z-index: 0;
	top: 0.2rem;
	bottom: 0.2rem;
	left: 0.2rem;
	width: calc((100% - 0.4rem) / 2);
	border-radius: 0.45rem;
	background: var(--mdpd-prop-accent);
	transform: translateX(0);
	transition: transform 0.18s ease;
}

.mdpd-prop-moneda[data-mdpd-moneda-pos="1"] .mdpd-prop-moneda__perilla {
	transform: translateX(100%);
}

@media (prefers-reduced-motion: reduce) {
	.mdpd-prop-moneda__perilla {
		transition: none;
	}
}

.mdpd-prop-moneda__opcion {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0.35rem 0.25rem;
	text-align: center;
	cursor: pointer;
	min-width: 0;
}

/* Visualmente escondido pero enfocable: la misma receta que los labels del
 * buscador horizontal. */
.mdpd-prop-moneda__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mdpd-prop-moneda__texto {
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.15;
	color: #46545c;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mdpd-prop-moneda__input:checked + .mdpd-prop-moneda__texto {
	color: #fff;
}

.mdpd-prop-moneda__input:focus-visible + .mdpd-prop-moneda__texto {
	outline: 2px solid var(--mdpd-search-bg, #465f70);
	outline-offset: 3px;
	border-radius: 0.2rem;
}

/* Sin moneda elegida no hay filtro de precio: el slider se apaga en vez de
 * desaparecer, para que se vea que existe y por qué no se puede usar.
 *
 * No alcanza con bajar la opacidad: en el buscador horizontal, sobre una foto
 * de fondo, la barra en color de acento al 45 % seguía leyéndose como un
 * control activo —y ahí no está la nota, que solo entra en el vertical—. Con
 * la barra y las perillas en gris, apagado se ve apagado en los dos layouts. */
.mdpd-prop-search__field--price-off .sf-price-slider,
.mdpd-prop-search__field--price-off .sf-price-values {
	opacity: 0.55;
	pointer-events: none;
}

/* El `.mdpd-prop-search` de adelante no es adorno: las reglas de color del
 * slider, más abajo en este archivo, tienen la misma especificidad que estas y
 * ganarían por orden. Con el ancestro de más, apagado gana. */
.mdpd-prop-search .mdpd-prop-search__field--price-off .sf-price-range {
	background: #cfd8dc;
}

.mdpd-prop-search .mdpd-prop-search__field--price-off .sf-price-input::-webkit-slider-thumb {
	background: #cfd8dc;
	cursor: not-allowed;
}

.mdpd-prop-search .mdpd-prop-search__field--price-off .sf-price-input::-moz-range-thumb {
	background: #cfd8dc;
	cursor: not-allowed;
}

.mdpd-prop-search .sf-price-nota {
	margin: 0;
	font-size: 0.7rem;
	line-height: 1.2;
	opacity: 0.85;
	color: #fff;
}

.mdpd-prop-search .sf-price-nota[hidden] {
	display: none;
}

/* Slider de precio */
.mdpd-prop-search .sf-price-slider {
	position: relative;
	height: 2rem;
	margin: 0.5rem 0 0.75rem;
}

.mdpd-prop-search .sf-price-track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 0.25rem;
	background: rgba(255, 255, 255, 0.35);
	border-radius: 0.125rem;
	transform: translateY(-50%);
}

.mdpd-prop-search .sf-price-range {
	position: absolute;
	height: 100%;
	background: var(--mdpd-prop-accent);
	border-radius: 0.125rem;
}

.mdpd-prop-search .sf-price-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.mdpd-prop-search .sf-price-input--min {
	z-index: 3;
}

.mdpd-prop-search .sf-price-input--max {
	z-index: 4;
}

.mdpd-prop-search .sf-price-input::-webkit-slider-thumb {
	pointer-events: all;
	-webkit-appearance: none;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--mdpd-prop-accent);
	cursor: pointer;
	border: 2px solid #fff;
	box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.15);
}

.mdpd-prop-search .sf-price-input::-moz-range-thumb {
	pointer-events: all;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--mdpd-prop-accent);
	cursor: pointer;
	border: 2px solid #fff;
	box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.15);
}

.mdpd-prop-search .sf-price-input:focus-visible::-webkit-slider-thumb {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.mdpd-prop-search .sf-price-input:focus-visible::-moz-range-thumb {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.mdpd-prop-search .sf-price-values,
.mdpd-prop-search .sf-price-from,
.mdpd-prop-search .sf-price-to,
.mdpd-prop-search .sf-price-sep {
	color: #fff;
}

.mdpd-prop-search .sf-price-values {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75em;
	line-height: 1.1rem;
}

.mdpd-prop-search .sf-price-sep {
	opacity: 0.75;
}

/* Mobile: solo el buscador del home (el de hub/listado, mismo layout
 * horizontal, ya está oculto en mobile por `.mdpd-inline-buscador-col`).
 * Tipo, precio y buscar ocupan la fila entera; el resto va de a pares para
 * no alargar tanto el formulario — el orden pedido no es el del DOM, así que
 * hace falta `order` explícito por campo (los 4 checks sí vienen ya en el
 * orden pedido en el DOM —apto crédito, cochera, pesos, dólares— y con un
 * `order` igual entre ellos alcanza, el empate lo resuelve el propio DOM). */
@media (max-width: 849px) {
	/* Controles más bajos: menos alto de fila, sumado a los pares de arriba. */
	.mdpd-prop-search--horizontal {
		--mdpd-prop-search-control-h: 2.5rem;
	}

	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal {
		grid-template-columns: 1fr 1fr;
	}

	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--tipo {
		order: 10;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--operacion {
		order: 20;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--ambientes {
		order: 21;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--dormitorios {
		order: 30;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--banos {
		order: 31;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--ciudad {
		order: 40;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--zona {
		order: 41;
	}
	/* Moneda arriba del precio: primero se elige en qué se mide y recién ahí el
	 * slider se enciende con la escala de esa moneda. */
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--moneda {
		order: 45;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--price {
		order: 50;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--check {
		order: 60;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--submit {
		order: 100;
	}

	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--tipo,
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--moneda,
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--price,
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--submit {
		grid-column: 1 / -1;
	}

	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--check {
		grid-column: span 1;
		justify-content: left;
	}

	.mdpd-prop-search--tema-aloj.mdpd-prop-search--horizontal {
		grid-template-columns: 1fr;
	}

	.mdpd-prop-search--tema-aloj.mdpd-prop-search--horizontal .mdpd-prop-search__field--tipo,
	.mdpd-prop-search--tema-aloj.mdpd-prop-search--horizontal .mdpd-prop-search__field--zona,
	.mdpd-prop-search--tema-aloj.mdpd-prop-search--horizontal .mdpd-prop-search__field--submit {
		grid-column: 1 / -1;
	}

	.mdpd-prop-search--vertical .mdpd-prop-search__checks {
		grid-template-columns: 1fr 1fr;
	}

	.mdpd-prop-search__title-icon {
		height: 1.75em;
	}

	/* Mobile apila y centra el título en cualquier layout (en desktop,
	 * horizontal sigue en fila a la izquierda; vertical ya apila y centra
	 * siempre, arriba — misma regla, se repite acá para el caso horizontal
	 * angosto). */
	.mdpd-prop-search__title {
		text-align: center;
	}

	.mdpd-prop-search__title--has-icon {
		flex-direction: column;
	}
}


/* ── style.css ── */
/* Va PRIMERO, antes de cualquier comentario: si no es el primer byte del archivo, el
   navegador la ignora. El servidor sirve los .css sin charset, y sin esta linea la
   codificacion de la hoja queda librada a una cadena de reservas. Ver CLAUDE.md. */
/*
Theme Name: Flatsome Child — MDP COMAR
Description: Child theme propio de mardelplata.com.ar (bienes raíces). Fork puntual del child de mardelplata.com al 2026-08-20; vida propia desde acá en adelante.
Author: MDP Digital
Template: flatsome
Version: 0.1.0
Text Domain: mdpd-comar
*/

/*
 * Front: sin estilos de diseño hasta definición explícita.
 * Solo reglas que sostienen comportamiento (JS / anti-spam).
 */

.mdpd_container {
	display: contents;
}

/**
 * Botones sin margen heredado.
 *
 * Flatsome le da `margin-right: 1em; margin-bottom: 1em` a `.button, button,
 * input[type=submit]…` pensando en botones sueltos dentro de un texto. En un
 * componente eso es un margen fantasma que aparece siempre en el lugar
 * equivocado —el botón de cerrar de un popup, posicionado contra la esquina,
 * queda corrido un em para adentro— y termina en un `margin: 0` puntual cada vez
 * que se arma algo. Se apaga acá y el que lo necesite lo pide.
 *
 * Solo los elementos de formulario: el `<a class="button">` que se arma desde el
 * editor sigue con el espaciado de Flatsome, que ahí sí es el que corresponde.
 */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	margin: 0;
}

/**
 * Sin el corrimiento de ícono que Flatsome le mete a `.button`.
 *
 * `.button:not(.icon)>i` y su hermano con `span+i` le suman un margen negativo
 * y otro positivo al ícono para «acomodarlo» — pensado para su propio ícono de
 * flecha en botones de texto, y acá corre cualquier ícono (WhatsApp, sitio del
 * portal) fuera de su lugar. Apagado del todo: el espacio entre ícono y texto
 * lo pone el propio markup (`gap`, o un espacio en el HTML), no este margen.
 */
.button:not(.icon) > span + i,
.button:not(.icon) > i {
	margin-left: 0;
	margin-right: 0;
}

/**
 * Escala de z-index del portal: todo lo que se superpone a contenido normal
 * —diálogos, calendarios/globos flotantes, tooltips— usa una de estas tres
 * variables, nunca un número suelto. El orden es fijo en todo el sitio, esté
 * o no presente cada nivel en un momento dado: un tooltip le gana a un
 * popover, que le gana al contenido de un diálogo, siempre en ese orden,
 * tanto si el diálogo está abierto como si no hay ningún diálogo en la
 * página. La magnitud también importa y no solo el orden relativo: al no
 * haber «top layer» de por medio (ver más abajo), el nivel más bajo de la
 * escala tiene que ganarle igual a cualquier z-index suelto que ya exista
 * en el resto del sitio (header, elementos con posición fija, etc.) — un
 * `1` se pierde contra eso; de ahí que el piso de la escala ya arranque
 * alto.
 *
 * - `--mdpd-z-dialog`: el backdrop de un popup del theme (assets/mdpd-modal.js)
 *   y su contenido normal (formulario, botones). Nada de `<dialog>` nativo ni
 *   `showModal()`: eso dibuja en el «top layer» del navegador, que ningún
 *   z-index de afuera puede ganarle, y ahí adentro se rompía el cálculo de
 *   posición de Flatpickr y de Tooltipster (ver Historial, agosto 2026). Un
 *   popup del theme es un `<div>` con este z-index, plano, como cualquier otro.
 * - `--mdpd-z-popover`: cualquier flotante que tiene que verse por encima de
 *   un popup abierto —el calendario de Flatpickr, el globo animado del
 *   menú—. Como todo vive en la misma pila de z-index normal (nunca un «top
 *   layer» separado), alcanza con este número mayor, esté o no abierto un
 *   popup en ese momento.
 * - `--mdpd-z-tooltip`: los tooltips (Tooltipster), siempre lo más arriba de
 *   todo — incluso por encima de un calendario abierto.
 */
:root {
	--mdpd-z-dialog: 4000;
	--mdpd-z-popover: 5000;
	--mdpd-z-tooltip: 10000;
}

/* Con un popup del theme abierto (assets/mdpd-modal.js), el fondo no scrollea. */
body.mdpd-modal-open-body {
	overflow: hidden;
}

/**
 * Tooltips siempre adelante.
 *
 * Tooltipster no declara z-index, así que el tooltip queda a merced del orden
 * del documento y cualquier capa posicionada se le pone encima.
 */
.tooltipster-base {
	z-index: var(--mdpd-z-tooltip);
}

/**
 * Caja del portal: el marco del panel de consulta múltiple, disponible para las
 * secciones que lo acompañan (formulario de la ficha, datos del anunciante).
 * Las variables las comparte el panel, así el borde se define en un solo lugar.
 */
:root {
	--mdpd-caja-borde: #f2f2f2;
	--mdpd-caja-radio: 0.75rem;
	--mdpd-caja-padding: 1em 1.25em;
	/* El celeste de los íconos decorativos: el mismo en el dato, en la chip de
	   comodidad y en la característica del inmueble. */
	--mdpd-icono-color: #329ac1;
}

.mdpd-caja {
	background: #fff;
	border: 2px solid var(--mdpd-caja-borde);
	border-radius: var(--mdpd-caja-radio);
	padding: var(--mdpd-caja-padding);
}

/**
 * Dato sin enlace: el ícono hace de etiqueta (dirección, ciudad, zona, tipo).
 * Los datos que sí enlazan van como chip de contacto (`.mdpd-telephoner`).
 */
.mdpd-dato {
	align-items: center;
	color: #605f5f;
	display: flex;
	font-size: 0.95em;
	gap: 0.4em;
	margin: 0 0 0.2em;
}

/* Celeste de los íconos de propiedades: el dato se lee igual y el ícono decora. */
.mdpd-dato .mdpd-icon {
	color: var(--mdpd-icono-color);
	font-size: 1.1em;
}

/**
 * Listas de atributos (comodidades, servicios): plancha del color del borde de
 * las cajas y adentro chips blancas.
 */
.mdpd-chips {
	background: var(--mdpd-caja-borde);
	border-radius: var(--mdpd-caja-radio);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	padding: 0.75em;
}

.mdpd-chip {
	align-items: center;
	background: #fff;
	border-radius: 99em;
	display: inline-flex;
	font-size: 0.9em;
	gap: 0.4em;
	line-height: 1.2;
	padding: 0.4em 0.8em;
}

/* Antes era el verde de «sí, lo tiene», que es lo único que podía decir un tilde.
   Ahora cada comodidad tiene su ícono y lo que dice lo dice el dibujo, así que
   toma el celeste de los demás íconos decorativos. */
.mdpd-chip .mdpd-icon {
	color: var(--mdpd-icono-color);
	font-size: 1.1em;
}

/* Fichas de turismo — las secciones son las mismas en todos los rubros, así que
   el estilo va en la clase compartida (`mdpd-ficha__*`, que pone
   `mdpd_portal_ficha_clase()`) y la del rubro queda como gancho. */

/* Todas las secciones respiran igual: el aire no depende de qué bloque sea ni
   de en qué rubro esté. */
.mdpd-ficha__header,
.mdpd-ficha__consulta,
.mdpd-ficha__desc,
.mdpd-ficha__comodidades,
.mdpd-ficha__mapa {
	margin-bottom: 1em;
}

.mdpd-ficha__chips {
	margin: 0.6em 0 0;
}

/* El salto desde la dirección ya descuenta el header pegado: Flatsome declara
   `scroll-padding-top` en el <html> con el alto real del header. Esto es solo
   el respiro de más. */
.mdpd-ficha__mapa {
	scroll-margin-top: 1rem;
}

/* El mapa se recorta como las cajas del portal: es un bloque más de la ficha, no
   una ventana pegada. `display: block` saca el hueco de línea del iframe. Va
   también en el mapa de la zona, que es el mismo embed en otra vista. */
.mdpd-ficha__mapa iframe,
.mdpd-zona-info__map iframe {
	border-radius: var(--mdpd-caja-radio);
	display: block;
}

/* Y el slider, por lo mismo. El recorte va en el envoltorio propio y no en cada
   slide: adentro manda Flatsome, y así el redondeo no se mueve con el carrusel ni
   depende de sus clases. Vale también para el de propiedades, que es el mismo.

   El aire de abajo va acá, con el de las demás secciones. Antes lo ponía un
   `mgb40` adentro del slider, y eso con el recorte no podía quedar: `overflow`
   abre contexto de formato, así que el margen del hijo dejó de salirse del padre
   y pasaron a ser 40px de blanco adentro de la caja redondeada. */
.mdpd-gallery-slider {
	border-radius: var(--mdpd-caja-radio);
	margin-bottom: 1em;
	overflow: hidden;
}

/* Bloque "cantidad + precio promedio" de los hubs de zona/ciudad
   (inc/front/prop-stats-block.php) — franja chica arriba del slider de
   destacadas, mismo lenguaje visual que las cajas del portal. */
.mdpd-zona-info__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-bottom: 1.25rem;
	padding: 0.75rem 1rem;
	background: #f6f8f9;
	border: 1px solid #dce4e8;
	border-radius: var(--mdpd-caja-radio);
	font-size: 0.9rem;
	color: #4a5b63;
}

.mdpd-zona-info__stats-item strong {
	color: #10222a;
}

.mdpd-zona-info__stats-item--total {
	font-size: 1rem;
}

/* Listados por término: el título y la bajada arriba, las tarjetas abajo, con el
   mismo respiro en todos los rubros. */

.mdpd-tax-listado__header h1 {
	margin-bottom: 0.4em;
}

.mdpd-tax-listado__desc {
	margin-bottom: 1.5rem;
}

.mdpd-tax-listado__hijo {
	margin-top: 2.5rem;
}

.mdpd-tax-listado__hijo-title {
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 1rem;
}

/* Íconos Lucide: caja de 1em → el tamaño lo define el font-size del contexto. */
.mdpd-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	flex: 0 0 auto;
}

/* Íconos de marca de la fuente Flatsome. Los de FontAwesome no llevan esta
   clase: se alinean con las reglas de su propia fuente. */
.mdpd-brand-icon {
	vertical-align: middle;
	line-height: 1;
}

/* --- Toggle switches: todos los checkboxes del front (bolita sobre slot on/off) --- */
:root {
	--mdpd-toggle-fondo: #d5dce0;
	--mdpd-toggle-borde: #c2ccd2;
}

input[type="checkbox"]:not(.mdpd-no-toggle) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	position: relative;
	flex: 0 0 auto;
	/* Flatsome pone `display: inline` en los checkboxes y un inline no toma
	   ancho ni alto: sin esto el toggle se cae sobre su propia etiqueta. */
	display: inline-block;
	/* Hereda el font-size del contexto para que el toggle (medido en em)
	   escale solo, sin compensaciones por-lugar. */
	font-size: inherit;
	width: 2.5em;
	height: 1.4em;
	margin: 0;
	padding: 0;
	border: 1px solid var(--mdpd-toggle-borde);
	border-radius: 1em;
	background: var(--mdpd-toggle-fondo);
	cursor: pointer;
	vertical-align: middle;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

input[type="checkbox"]:not(.mdpd-no-toggle)::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.15em;
	width: 1em;
	height: 1em;
	transform: translateY(-50%);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	transition: left 0.2s ease;
}

input[type="checkbox"]:not(.mdpd-no-toggle):checked {
	background: var(--primary-color, #465f70);
	border-color: var(--primary-color, #465f70);
}

input[type="checkbox"]:not(.mdpd-no-toggle):checked::before {
	left: calc(100% - 1.15em);
}

input[type="checkbox"]:not(.mdpd-no-toggle):focus-visible {
	outline: 2px solid var(--primary-color, #465f70);
	outline-offset: 2px;
}

input[type="checkbox"]:not(.mdpd-no-toggle):disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Grupo del sidebar: raya lateral + separación entre bloques. */
.mdpd-sidebar__group {
	border-left: 2px solid color-mix(in srgb, currentcolor 20%, white 0%);
	border-radius: var(--mdpd-caja-radio);
	border-top-left-radius: 0;
	margin-bottom: 1.5rem;
}

/* Título de grupo en sidebar (h2 visualmente compacto; sí entra al outline/SEO). */
.mdpd-sidebar__title {
	background: color-mix(in srgb, currentcolor 5%, white 0%);
	border-bottom-right-radius: var(--mdpd-caja-radio);
	border-top-right-radius: var(--mdpd-caja-radio);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 0.5em 0 !important;
	padding: 0.2rem 1rem 0.2rem 0.5rem;
	text-box: none !important;
	width: fit-content;
}

.mdpd-sidebar__list li {
	margin-bottom: 0.5em !important;
}

/* Variante «solo logo a home»: sin menú al lado, ocupa el ancho de la columna. */
nav.mdpd-sidebar.mdpd-sidebar--home-only {
	width: 100%;
}

/* Ítems del sidebar (columna + off-canvas móvil): pastilla con sombra lateral. */
nav.mdpd-sidebar ul {
	list-style-type: none !important;
	margin: 0;
	padding: 0;
}

nav.mdpd-sidebar ul li:not(.mdpd-sidebar__home) {
	list-style-type: none !important;
	margin-left: 0;
	padding: 0.5em 0.75em;
	box-shadow: 0.2em 0 0.2em #0001;
	border-radius: 1em;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	width: fit-content;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	font-weight: 400;
	font-size: 0.85rem;
	border-left-width: 0;
}

nav.mdpd-sidebar ul:not(.mdpd-sidebar__list--zonas) li:not(.mdpd-sidebar__home):not(.is-active):hover a {
	color: var(--fs-color-secondary);
}

/* Ítem actual del sidebar (columna desktop). */
nav.mdpd-sidebar ul li.is-active:not(.mdpd-sidebar__home) {
	background-color: var(--fs-color-secondary);
}
nav.mdpd-sidebar ul li.is-active:not(.mdpd-sidebar__home) a,
nav.mdpd-sidebar ul li.is-active:not(.mdpd-sidebar__home):hover a {
	color: #fff;
}
nav.mdpd-sidebar ul li.is-active:not(.mdpd-sidebar__home)::before {
	content: '\2022';
	font-size: 1em;
	transform: scale(2.2);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	display: inline-block;
	position: relative;
	left: -0.35em;
	color: #fff;
}

/* El panel oscuro del off-canvas toma el color del tema en vez del gris de
 * Flatsome. Va sobre `.mfp-content`, que es la caja que dibuja Magnific Popup
 * —el cajón en sí—, no sobre el nav de adentro. */
.off-canvas-left.dark .mfp-content,
.off-canvas-right.dark .mfp-content {
	background-color: var(--fs-color-secondary);
}

/* Off-canvas (móvil/tablet): mismo look de grupo/título que la columna desktop.
 * Flatsome mete padding/color de .nav sobre el HTML del shortcode. */
.off-canvas nav.mdpd-sidebar {
	padding: 0.75em 1em 0.5em;
}
.off-canvas nav.mdpd-sidebar .mdpd-sidebar__group {
	border-left: 2px solid color-mix(in srgb, currentcolor 20%, white 0%);
	border-radius: var(--mdpd-caja-radio);
	border-top-left-radius: 0;
	margin-bottom: 1.5rem;
	margin-top: 0;
}
.off-canvas nav.mdpd-sidebar .mdpd-sidebar__title {
	background: color-mix(in srgb, currentcolor 5%, white 0%);
	border-bottom-right-radius: var(--mdpd-caja-radio);
	border-top-right-radius: var(--mdpd-caja-radio);
	font-size: 1rem;
	margin: 0 0 0.5em 0 !important;
	padding: 0.2rem 1rem 0.2rem 0.5rem;
	text-box: none !important;
	width: fit-content;
}
.off-canvas nav.mdpd-sidebar .mdpd-sidebar__list li {
	margin-bottom: 0.5em !important;
}
.off-canvas nav.mdpd-sidebar .mdpd-sidebar__zonas-box input {
	margin-bottom: 0.5em !important;
}
.off-canvas nav.mdpd-sidebar ul li:not(.mdpd-sidebar__home) > a {
	padding: 0 !important;
	display: inline;
	line-height: inherit;
}
.off-canvas .nav-sidebar .html.custom {
	padding: 0 !important;
}
.off-canvas li.mdpd-sidebar__home,
.off-canvas nav.mdpd-sidebar li.mdpd-sidebar__home {
	padding: 1em 0 !important;
	text-align: center;
	margin-top: 0.5em;
	border-top: 2px solid #0001;
	box-shadow: none !important;
	width: auto;
}
.off-canvas nav.mdpd-sidebar li.mdpd-sidebar__home a {
	padding: 0 !important;
	text-align: center;
}
.off-canvas nav.mdpd-sidebar .mdpd-sidebar__logo {
	max-width: calc(100% - 2em);
	height: auto;
}

/* Rótulo «portal - vista»: solo off-canvas (móvil/tablet). */
.mdpd-sidebar__vista {
	display: none;
}

.mdpd-sidebar__vista-icon {
	width: 1em;
	height: 1em;
	object-fit: contain;
	flex: 0 0 auto;
	display: block;
}

/* Móvil + tablet (≤959): espaciado del sidebar contextual / off-canvas. */
@media only screen and (max-width: 959px) {
	p.mdpd-sidebar__vista {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.3em;
		margin: 0 auto 1em;
		padding: 0 1rem;
		font-weight: 600;
		color: inherit;
		line-height: 1.3;
		width: fit-content;
		max-width: 100%;
		box-sizing: border-box;
	}
}

/* Título de ítem en listados: misma presencia visual que el <b> anterior. */
.mdpd-listado-item__title {
	display: inline;
	font-size: inherit;
	font-weight: 700;
	margin: 0;
	line-height: inherit;
}

.mdpd-listado-item__title a {
	color: inherit;
	text-decoration: none;
}

.mdpd-listado-item__title a:hover {
	text-decoration: underline;
}

.mdpd-sidebar__home a {
	display: inline-block;
	padding: 0 !important;
	margin: 0.5em 0 0 0;
}

.mdpd-sidebar__home a:hover .mdpd-sidebar__logo,
.mdpd-sidebar__home a .mdpd-sidebar__logo {
	transform: none;
}

/**
 * Filtro de zonas: caja sólida (secundario) + chips blancos.
 * La lista completa sigue en el HTML; el scroll acota lo visible.
 */
.mdpd-sidebar__zonas-box {
	background: var(--fs-color-secondary);
	border-radius: var(--mdpd-caja-radio);
	padding: var(--mdpd-caja-padding);
	height: 15.5em;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
}

.mdpd-sidebar__zonas-box p,
.mdpd-sidebar__zonas-box ul,
.mdpd-sidebar__zonas-box ul li,
.mdpd-sidebar__zonas-box ul li a,
.mdpd-sidebar__zonas-box input,
.mdpd-sidebar__zonas-box input::placeholder {
	color: white !important;
}

.mdpd-sidebar__list--zonas {
	flex: 1 1 auto;
	margin: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mdpd-sidebar__zonas-box ul li:not([hidden]) {
	display: inline-block;
	border-radius: var(--mdpd-caja-radio) !important;
	box-shadow: none !important;
	border: 2px solid #fff8 !important;
	font-size: 0.8rem !important;
}

.mdpd-sidebar__zonas-box ul li:hover {
	background: #0003;
	border-color: white !important;
}

.mdpd-sidebar__zonas-box input {
	border: 2px solid #fff8 !important;
	margin-bottom: 0.5em !important;
}

.mdpd-sidebar__zonas-box input:focus {
	border-color: white !important;
}

.mdpd-sidebar__filtro {
	margin: 0 0 0.45em;
	flex: 0 0 auto;
}

.mdpd-sidebar__filtro-campo {
	margin: 0;
	width: 100%;
	font-size: 0.9em;
	padding: 0.4em 0.6em;
	height: auto;
	background: transparent;
}

.mdpd-sidebar-wrap--propiedades {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mdpd-archive-propiedad__header h1 {
	margin-bottom: 0.35rem;
}

.mdpd-archive-propiedad__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 .5rem;
}

.mdpd-archive-propiedad__filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	opacity: 0.85;
	font-size: 0.75rem;
	background: color-mix(in srgb, var(--fs-color-primary) 10%, white 100%);
	padding: 0 0.35em 0 0.75em;
	text-transform: uppercase;
	border-radius: var(--mdpd-caja-radio);
	color: color-mix(in srgb, var(--fs-color-primary) 90%, white 0%);
}

.mdpd-archive-propiedad__filter-chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	opacity: 0.65;
	transition: opacity 0.15s ease;
}

.mdpd-archive-propiedad__filter-chip-remove:hover,
.mdpd-archive-propiedad__filter-chip-remove:focus-visible {
	opacity: 1;
}

.mdpd-archive-propiedad__filter-chip-remove .mdpd-icon {
	font-size: 0.9rem;
}

.mdpd-archive-propiedad__intro,
.mdpd-archive-propiedad__placeholder {
	margin: 0;
}

/**
 * Caja de logo de inmobiliaria.
 *
 * El color de marca (API: fondoBarraTop) llega como --mdpd-inmo-bg declarada en
 * esta misma caja, así cada logo de un listado resuelve el suyo. El padding
 * escala desde el font-size de la caja.
 */
.mdpd-inmo-logo-box {
	font-size: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: 0.5em;
	background: var(--mdpd-inmo-bg, transparent);
	overflow: hidden;
}

/**
 * Listado de inmobiliarias y datos del anunciante en la ficha de propiedad: más
 * aire a los costados, porque ahí la caja es ancha y el logo se pega a los
 * bordes de la plancha de color. En la ficha de la inmobiliaria y en la firma
 * chica del sidebar la caja es más angosta y este margen se comería el logo.
 */
.imagenListadoInmo .mdpd-inmo-logo-box,
.mdpd-ficha-propiedad__inmo-row .mdpd-inmo-logo-box,
.mdpd-inmo-cabecera .mdpd-inmo-logo-box {
	padding: 0.5em 1.5em;
}

.alojamientoItemList {
	border: 1px solid color-mix(in srgb, currentcolor 10%, white 0%);
	padding: 0.5em 0;
	border-radius: var(--mdpd-caja-radio);
	margin: 0 !important;
}

/* Solo móvil: franja de color detrás de la foto/logo, separándola del resto
   de la tarjeta ahora que quedan apiladas en vez de lado a lado. */
@media (max-width: 549px) {
	.alojamientoItemList {
		background: linear-gradient(0deg, color-mix(in srgb, var(--fs-color-primary) 10%, transparent 100%) 2.5rem, white 2.5rem);
	}
}

.imagenListadoInmo {
	padding-right: 0;
}

/* Listado de inmobiliarias, solo móvil: el padding de arriba es de sobra ahí. */
@media (max-width: 767px) {
	.imagenListadoInmo .mdpd-inmo-logo-box {
		padding: 0.4em 0.4em;
	}
}

/**
 * Firma del anunciante (pie del formulario de la ficha y popup de consulta):
 * izquierda en desktop, tarjeta entera centrada en móvil — mismo criterio que
 * «Datos del anunciante» (assets/prop-single.css).
 */
.mdpd-inmo-firma {
	text-align: left;
}

@media (max-width: 849px) {
	.mdpd-inmo-firma {
		text-align: center;
		align-items: center;
		justify-content: center;
	}
}

/**
 * Buscador de los listados: horizontal en desktop, botón en móvil.
 *
 * El corte lo hacen las clases responsive de Flatsome (`hide-for-medium` /
 * `show-for-medium`, 850 px) desde `mdpd_portal_render_prop_search_listado()`
 * — antes esto era una regla propia a 767 px sobre la columna entera, que
 * escondía el buscador pero no dejaba nada en su lugar: el visitante en el
 * teléfono se quedaba sin forma visible de buscar salvo que supiera abrir el
 * menú lateral.
 *
 * El botón abre ese mismo menú y lo scrollea hasta la copia del buscador que
 * el off-canvas ya lleva siempre (custom.js). Va a lo ancho de la columna y
 * con el mismo aire que tenía el formulario, para que no cambie el ritmo de
 * la página.
 */
.mdpd-buscador-listado__movil {
	margin-bottom: 1.5rem;
}

.mdpd-buscador-listado__movil .mdpd-rubro-chips__buscar {
	margin-bottom: 0;
}

/* En listados todas las cajas de imagen comparten proporción: logos de
   inmobiliaria y fotos de alojamiento entran en la misma grilla. */
.mdpd-inmo-logo-box--ratio,
.mdpd-tarjeta-foto {
	display: flex;
	width: 100%;
	aspect-ratio: 5 / 3;
	align-items: stretch;
	overflow: hidden;
	box-shadow: 0 0.4em 0.8em #0003;
}

/* Sin dato de la API, plancha neutra en lugar de fondo del sitio. */
.mdpd-inmo-logo-box--ratio {
	background: var(--mdpd-inmo-bg, #dfdfdf);
}

/**
 * Foto de alojamiento: sin plancha de color (no esperamos transparencias) y
 * recortada, porque la destacada viene en cualquier proporción.
 */
.mdpd-tarjeta-foto img,
.mdpd-tarjeta-foto .img img {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	object-fit: cover;
	object-position: center center;
}

/* Cliente sin foto: la caja mantiene su lugar con el nombre adentro. */
.mdpd-tarjeta-foto--vacia {
	background: #dfdfdf;
}

/**
 * Wrappers de [ux_image]: .img > (a) > .img-inner. Cuando la imagen enlaza
 * aparece el <a> intermedio, que también tiene que estirarse o la altura de la
 * caja no llega a la imagen.
 */
.mdpd-inmo-logo-box--ratio .img,
.mdpd-inmo-logo-box--ratio .img > a,
.mdpd-inmo-logo-box--ratio .img-inner,
.mdpd-tarjeta-foto .img,
.mdpd-tarjeta-foto .img > a,
.mdpd-tarjeta-foto .img-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
}

/**
 * Sin imagen: el nombre ocupa el lugar de la foto o del logo y la caja mantiene
 * su proporción. Recorta a tres líneas con puntos suspensivos y parte palabras
 * larguísimas antes que desbordar.
 */
.mdpd-inmo-logo-box__text,
.mdpd-tarjeta-foto__text {
	align-self: center;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	overflow-wrap: anywhere;
	width: 100%;
	max-height: 100%;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

/* Color de marca oscuro: el nombre se invierte para seguir legible. */
.mdpd-inmo-logo-box--on-dark .mdpd-inmo-logo-box__text,
.mdpd-inmo-logo-box--on-dark .mdpd-inmo-logo-box__text:hover {
	color: #fff;
}

/* Sin zoom al hover: el logo está encajado en su plancha y no debe moverse. */
.mdpd-inmo-logo-box .img-inner img,
.mdpd-inmo-logo-box .img:hover .img-inner img {
	transform: none;
}

/* Logo enlazado sin pasar por [ux_image] (ficha de propiedad): el <a> tiene que
   ocupar la caja igual que lo hacen los wrappers de Flatsome. */
.mdpd-inmo-logo-box__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/**
 * Cabecera de la agencia arriba de su cartera (/propiedades/{agencia}/).
 *
 * Es lo más parecido a una ficha que la inmobiliaria tiene en el portal, así que
 * se presenta como el encabezado de un alojamiento: datos a la izquierda, logo
 * al costado y nada más.
 */
.mdpd-inmo-cabecera {
	margin-bottom: 1em;
}

.mdpd-inmo-cabecera__nombre {
	font-size: 1.3em;
	margin: 0 0 0.35rem;
}

/* Los chips ya traen su propio margen: la fila solo abre aire arriba. */
.mdpd-inmo-cabecera__chips {
	margin: 0.5rem 0 0;
}

/* El doble selector gana a `.img img { width: 100% }` de Flatsome. */
.mdpd-inmo-logo-box img,
.mdpd-inmo-logo-box .img img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	margin: 0;
	object-fit: contain;
	object-position: center center;
}

/**
 * Chip de dato de contacto: teléfono, WhatsApp, sitio web, redes.
 *
 * Botón de texto que al hover tiñe su sombra según el destino del enlace.
 * Los modificadores solo declaran el color de la marca: la forma es una sola y
 * ese mismo color es el del ícono, en todos los estados del botón.
 */
.mdpd-telephoner {
	--mdpd-telephoner-color: #0003;
	display: inline-block;
	height: 1.6em;
	padding: 0.35em 0.7em;
	margin: 0.4em 0.2em;
	line-height: 1em;
	vertical-align: middle;
	border-radius: 1em;
	box-shadow: 0 0 0.2em #0003;
	transition: box-shadow 0.18s ease;
}

.mdpd-telephoner:hover,
.mdpd-telephoner:focus-visible {
	box-shadow: 0 0 0.2em var(--mdpd-telephoner-color);
}

/* El color va en el ícono y no en el enlace, así el hover del tema le cambia
   el texto y nunca la marca. */
.mdpd-telephoner i,
.mdpd-telephoner svg {
	color: var(--mdpd-telephoner-color);
}

.mdpd-telephoner--tel {
	--mdpd-telephoner-color: #007aff;
}

.mdpd-telephoner--wsp {
	--mdpd-telephoner-color: #25d366;
}

.mdpd-telephoner--web {
	--mdpd-telephoner-color: #ff002a;
}

.mdpd-telephoner--fb {
	--mdpd-telephoner-color: #1877f2;
}

.mdpd-telephoner--ig {
	--mdpd-telephoner-color: #8134af;
}

.mdpd-telephoner--yt {
	--mdpd-telephoner-color: #ff0033;
}

.mdpd-telephoner--tw {
	--mdpd-telephoner-color: #000000;
}

.mdpd-telephoner--mail {
	--mdpd-telephoner-color: #008080;
}

/**
 * Tarjetas del listado del hub (cines): dos por fila, con la descripción de la
 * ficha adentro.
 *
 * Se estiran a la altura de la fila para que el enlace quede siempre abajo,
 * alineado entre las dos tarjetas, sin importar cuántos datos traiga cada una.
 */
.mdpd-hub-cards .col-inner,
.mdpd-tarjeta-hub {
	height: 100%;
}

.mdpd-tarjeta-hub {
	display: flex;
	flex-direction: column;
}

.mdpd-tarjeta-hub__title {
	font-size: 1.2em;
	margin-bottom: 0.5em;
}

.mdpd-tarjeta-hub__desc {
	flex: 1 0 auto;
}

/* La lista de datos que trae el contenido del origen (`ul.datosCine`): es una
   ficha técnica, no una enumeración, así que va sin viñetas ni sangría. */
.mdpd-tarjeta-hub__desc ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mdpd-tarjeta-hub__desc li {
	line-height: 1.4;
	margin-bottom: 0.3em;
}

.mdpd-tarjeta-hub__cta {
	margin-bottom: 0;
	margin-top: 1em;
}

/**
 * Listado en mosaico (paseos): la grilla de fotos cuadradas.
 *
 * Un paseo se elige mirándolo, así que la fila con dirección y teléfono no es
 * la forma: son cuatro por fila en desktop, tres en tablet y dos en el celular,
 * y de cada uno se muestra la foto, el nombre y su categoría. Lo cuadrado y el
 * recuadro apoyado sobre la imagen los pone la caja «push» de Flatsome; acá va
 * el redondeo de las cajas del portal y el texto.
 */
.mdpd-mosaico .box-image,
.mdpd-mosaico .box-text {
	border-radius: var(--mdpd-caja-radio, 0.75rem);
}

.mdpd-mosaico .box-text {
	padding: 0.7em 1em;
}

.mdpd-mosaico__link {
	color: inherit;
	display: block;
}

.mdpd-mosaico__title {
	display: block;
	font-size: inherit;
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
}

/* La categoría acompaña, no compite: es el dato que ordena el mosaico cuando
   el listado mezcla tipos, pero lo que se lee es el nombre. */
.mdpd-mosaico__tipo {
	display: block;
	font-size: 0.8em;
	line-height: 1.2;
	margin-top: 0.2em;
	opacity: 0.65;
}

/**
 * Botón pastilla: contorno suave, ícono celeste y sin margen.
 *
 * Va adentro de una tarjeta, al lado de dos líneas de datos, donde un botón de
 * Flatsome —con su fondo, su alto mínimo y su margen— pesa demasiado. Lo usan el
 * botón de ubicación de los listados sin ficha (teatros) y el que lleva de una
 * inmobiliaria a su cartera.
 */
.mdpd-pill-btn {
	align-items: center;
	background: none !important;
	border: 2px solid var(--mdpd-caja-borde, #f2f2f2) !important;
	border-radius: 2em !important;
	color: inherit !important;
	cursor: pointer;
	display: inline-flex;
	gap: 0.4em;
	font-size: 0.85em;
	line-height: 1 !important;
	margin: 0 !important;
	min-height: 0 !important;
	padding: 0.6em 1em !important;
	white-space: nowrap;
}

.mdpd-pill-btn:hover,
.mdpd-pill-btn:focus-visible {
	border-color: #329ac1 !important;
}

.mdpd-pill-btn__icon {
	color: #329ac1;
	font-size: 1.4em;
}

/**
 * Carrusel de chips de categorías por rubro (solo mobile, `hide-for-large`
 * de Flatsome) — inmobiliarias, alojamientos, y cualquier otro que lo sume
 * (inc/front/rubro-chips.php). Mismo patrón de scroll horizontal sin wrap que
 * las breadcrumbs móviles (ver ese bloque), sin flechita: acá alcanza con
 * centrar la chip activa al cargar (custom.js) para que se note que hay más
 * a los costados.
 */
.mdpd-rubro-chips {
	margin-bottom: 1em;
}

.mdpd-rubro-chips__title {
	font-size: 0.9rem;
	font-weight: bold;
	margin: 0 0 0.5em;
}

.mdpd-rubro-chips__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5em;
	list-style: none;
	margin: 0 0 1em;
	overflow-x: scroll;
	padding: 0 0 0.3em;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mdpd-rubro-chips__list::-webkit-scrollbar {
	display: none;
}

.mdpd-rubro-chips__list li {
	flex: 0 0 auto;
	margin-bottom: 0;
}

.mdpd-rubro-chips__chip {
	white-space: nowrap;
}

.mdpd-rubro-chips__chip.is-active {
	background: color-mix(in srgb, var(--fs-color-primary) 10%, white 100%) !important;
	border-color: var(--fs-color-primary) !important;
	color: color-mix(in srgb, var(--fs-color-primary) 90%, white 0%) !important;
}

.mdpd-rubro-chips__buscar {
	width: 100%;
}

/* En la tarjeta de inmobiliaria el botón va pegado abajo de la dirección: el
   aire lo pone el envoltorio, así el botón sigue sin margen propio. */
.mdpd-inmo-props-wrap {
	padding-top: 0.4em;
}

/**
 * Botón de ubicación de los listados sin ficha (teatros).
 *
 * La fila es de dos columnas —datos 7, botón 5, sin foto— y el botón se apoya a
 * la derecha en las dos: en mobile las columnas van a 12 y queda debajo de los
 * datos, alineado igual.
 */
.mdpd-mapa-col .col-inner {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: flex-end;
}

@media (max-width: 549px) {
	.mdpd-mapa-col .col-inner {
		padding-top: 0.3em;
	}
}

/* Mismo sistema de popups que el de consulta (assets/consulta.css, assets/
   mdpd-modal.js), más ancho porque adentro va un mapa. */
.mdpd-mapa-dialog {
	display: none;
	align-items: center;
	background: #00000073;
	inset: 0;
	justify-content: center;
	overflow: auto;
	overscroll-behavior: contain;
	padding: 1rem;
	position: fixed;
	z-index: var(--mdpd-z-dialog);
}

.mdpd-mapa-dialog.mdpd-modal--open {
	display: flex;
}

.mdpd-mapa-dialog__panel {
	background: #fff;
	border-radius: var(--mdpd-caja-radio, 0.75rem);
	box-shadow: 0 1rem 3rem #00000040;
	max-width: 40rem;
	padding: 1.25em;
	width: 100%;
}

.mdpd-mapa-dialog__head {
	align-items: baseline;
	display: flex;
	gap: 1em;
	justify-content: space-between;
}

.mdpd-mapa-dialog__title {
	font-size: 1.1em;
	margin: 0 0 0.6em;
}

.mdpd-mapa-dialog__close {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1 !important;
	min-height: 0 !important;
	padding: 0.2em !important;
}

.mdpd-mapa-dialog__frame {
	border-radius: var(--mdpd-caja-radio, 0.75rem);
	display: block;
	overflow: hidden;
}

/* ==========================================================================
 * Utilitarias del sitio legacy.
 *
 * Las usa el markup heredado (tarjetas, contenido copiado) y también nuestros
 * partials: tac, tal, mgb0, pdb0, xstal. Los valores van en px a propósito
 * porque el nombre de cada clase codifica el pixelaje (mgb40 = 40px): pasarlas
 * a rem haría mentir al nombre y correría el layout del contenido migrado.
 *
 * Van al final para ganar los empates de especificidad con los componentes.
 * ========================================================================== */

.wpcf7-spinner{display:block;float:none;clear:both;margin:0 auto;}

.tac{text-align:center;}.tal{text-align:left;}.tar{text-align:right;}.taj{text-align:justify;}
/* Entre el tamaño normal y `is-small` de Flatsome: no había nada ahí y hacía falta. */
.is-fit{font-size:.9rem;}
.mgb0{margin-bottom:0!important;}.mg0{margin:0;}
.mgb40{margin-bottom:40px!important;}.mg40{margin:40px;}
.mgb30{margin-bottom:30px!important;}.mg30{margin:30px;}
.mgb20{margin-bottom:20px!important;}.mg20{margin:20px;}
.mgb10{margin-bottom:10px!important;}.mg10{margin:10px;}

.pdb0{padding-bottom:0!important;}.pd0{padding:0;}
.pdb40{padding-bottom:40px!important;}.pd40{padding:40px;}
.pdb30{padding-bottom:30px!important;}.pd30{padding:30px;}
.pdb20{padding-bottom:20px!important;}.pd20{padding:20px;}
.pdb10{padding-bottom:10px!important;}.pd10{padding:10px;}
.pdb5{padding-bottom:5px!important;}.pd5{padding:5px;}

.mgt0{margin-top:0!important;}
.mgt40{margin-top:40px!important;}
.mgt30{margin-top:30px!important;}
.mgt20{margin-top:20px!important;}
.mgt10{margin-top:10px!important;}
.mgt5{margin-top:5px!important;}

.pdt0{padding-top:0!important;}
.pdt40{padding-top:40px!important;}
.pdt30{padding-top:30px!important;}
.pdt20{padding-top:20px!important;}
.pdt10{padding-top:10px!important;}
.pdt5{padding-top:5px!important;}

.blanco{color:white!important;}.negro{color:black!important;}
.blancobg{background-color:white!important;}.negrobg{background-color:black!important;}

/* Chips de enlaces en home / hubs (markup UX: ul.homeUnorderedList). */
ul.homeUnorderedList {
	list-style: none !important;
}

ul.homeUnorderedList li {
	display: inline-block;
	list-style: none;
	margin: 0.1em 0 !important;
}

ul.homeUnorderedList li a {
	background-color: color-mix(in srgb, var(--fs-color-primary) 7.5%, white 0%);
	border-radius: var(--mdpd-caja-radio);
	font-size: 0.8em;
	padding: 0.25em 1em;
}

ul.homeUnorderedList li a:hover {
	background-color: color-mix(in srgb, var(--fs-color-primary) 60%, white 0%);
	color: white;
}

ul.homeUnorderedList li br {
	display: none;
}

ul.homeUnorderedList li span.is-xxsmall {
	color: color-mix(in srgb, currentcolor 55%, white 0%);
	font-size: 0.7em;
	font-weight: 600;
	text-transform: uppercase;
}

/* Espacio entre strong y el resto del h2 (legacy .negro.thin-font). */
h2.negro.thin-font strong:after {
	content: '\0020';
}

/* SALTOS: */

/* LG */
@media only screen and (min-width: 1240px){
.lgtac{text-align:center;}.lgtal{text-align:left;}.lgtar{text-align:right;}.lgtaj{text-align:justify;}
.hidden-lg{display:none;}
.visible-md{display:none;}
.visible-sm{display:none;}
.visible-xs{display:none;}
}

/* MD */
@media only screen and (min-width: 960px) and (max-width:1239px){
.mdtac{text-align:center;}.mdtal{text-align:left;}.mdtar{text-align:right;}.mdtaj{text-align:justify;}
.visible-lg{display:none;}
.hidden-md{display:none;}
.visible-sm{display:none;}
.visible-xs{display:none;}
}

/* SM */
@media only screen and (min-width: 768px) and (max-width: 959px){
.smtac{text-align:center;}.smtal{text-align:left;}.smtar{text-align:right;}.smtaj{text-align:justify;}
.visible-lg{display:none;}
.visible-md{display:none;}
.hidden-sm{display:none;}
.visible-xs{display:none;}
}

/* XS */
@media only screen and (min-width: 0px) and (max-width: 767px){
.xstac{text-align:center;}.xstal{text-align:left;}.xstar{text-align:right;}.xstaj{text-align:justify;}
.visible-lg{display:none;}
.visible-md{display:none;}
.visible-sm{display:none;}
.hidden-xs{display:none;}
/* La caja del logo de inmobiliaria, la misma que en desktop queda bien pero en
   móvil sobra: menos padding en los tres lugares donde vive. */
.imagenListadoInmo .mdpd-inmo-logo-box,
.mdpd-ficha-propiedad__inmo-row .mdpd-inmo-logo-box,
.mdpd-inmo-cabecera .mdpd-inmo-logo-box {
	padding: 0.25em .75em;
}
}
.grecaptcha-badge{visibility:hidden;}

/* Breadcrumbs (SEO ola 2) — col-12 sobre sidebar + contenido */
.mdpd-breadcrumbs.breadCrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em;
	margin: 0 0 0.75rem;
	padding: 0.5em 1em;
	border-radius: 1em;
	border: 1px solid #0001;
	font-size: 0.9rem;
	line-height: 1.4;
}
.mdpd-breadcrumbs .breadCrumb {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	line-height: 1.4;
}
.mdpd-breadcrumbs .breadCrumb + .breadCrumb::before {
	/* `\203A` es el chevron «›», escrito con el escape de CSS y no con el
	   carácter. Un `.css` que se sirve sin `charset` en la respuesta no se
	   decodifica necesariamente como UTF-8: el navegador puede caer al juego
	   de caracteres del documento que lo llama, y ahí los tres bytes del
	   chevron salen como «â€º» en medio de las migas. El escape es ASCII puro
	   y da el mismo glifo se decodifique como se decodifique. Vale para todo
	   `content` del theme. */
	content: "\203A";
	color: #888;
	/* Espacio propio del chevron; el gap del flex completa el aire. */
	margin: 0 0.1em;
}
.mdpd-breadcrumbs a {
	color: #666;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	line-height: inherit;
}
.mdpd-breadcrumbs a:hover {
	text-decoration: underline;
}
.mdpd-breadcrumbs__home {
	gap: 0.3em;
}
.mdpd-breadcrumbs__home-icon {
	width: 1em;
	height: 1em;
	object-fit: contain;
	flex: 0 0 auto;
	/* Evita que la imagen altere el baseline / line-box del renglón. */
	display: block;
}

/*
 * Migas en móvil: scroll horizontal en vez de wrap (una sola línea, sin
 * apilarse) y arrancan scrolleadas del todo a la derecha, mostrando la
 * página actual en vez de «Inicio». El JS (custom.js) hace ese scroll
 * inicial y agrega `.is-scrolled` mientras quede algo oculto a la
 * izquierda; ese degradado + flechita usan `position: sticky` para quedar
 * fijos en el borde del scroll sin necesitar un wrapper aparte, y un
 * margen negativo para no correr las migas de lugar cuando aparecen.
 */
@media (max-width: 767px) {
	.mdpd-breadcrumbs.breadCrumbs {
		flex-wrap: nowrap;
		overflow-x: scroll;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.mdpd-breadcrumbs.breadCrumbs::-webkit-scrollbar {
		display: none;
	}
	.mdpd-breadcrumbs .breadCrumb {
		white-space: nowrap;
	}
	.mdpd-breadcrumbs.breadCrumbs::before {
		content: "\2039";
		display: none;
		position: sticky;
		left: -1em;
		align-self: stretch;
		flex: 0 0 1.4em;
		margin-right: -1.4em;
		justify-content: center;
		align-items: center;
		padding-left: 0.15em;
		background: linear-gradient(to right, #fff 55%, transparent);
		color: #888;
		font-size: 1.5em;
		line-height: .66em;
		pointer-events: none;
		z-index: 1;
	}
	.mdpd-breadcrumbs.breadCrumbs.is-scrolled::before {
		display: flex;
	}
}

/* Intro + FAQ on-page (SEO ola 3) */
.mdpd-seo-intro {
	margin: 0 0 1.25em;
	color: #605f5f;
	font-size: 1em;
	line-height: 1.55;
}
.mdpd-seo-intro a {
	text-decoration: underline;
}
.mdpd-faq {
	margin: 2em 0 1em;
}
.mdpd-faq__title {
	color: #605f5f;
	margin: 0 0 0.75em;
	font-size: 1.25em;
}
.mdpd-faq__item {
	border: 1px solid #0001;
	border-radius: 8px;
	padding: 0.6em 0.9em;
	margin-bottom: 0.5em;
	background: #fafafa;
}
.mdpd-faq__q {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	position: relative;
	padding-right: 1.5em;
}
.mdpd-faq__q::-webkit-details-marker {
	display: none;
}
.mdpd-faq__q::after {
	content: '+';
	position: absolute;
	right: 0.2em;
	top: 0;
	font-weight: 700;
}
.mdpd-faq__item[open] .mdpd-faq__q::after {
	content: '\2212';
}
.mdpd-faq__a {
	padding-top: 0.5em;
}
.mdpd-faq__a p {
	margin: 0;
}

/* Grupos por tipo en /alojamientos/{zona}/ */
.mdpd-zona-cpt-list__grupo {
	margin: 0 0 1.5em;
}
.mdpd-zona-cpt-list__grupo-title {
	color: #605f5f;
	margin: 0 0 0.75em;
	font-size: 1.25em;
}

/* Banners pautados en tax listados (debajo del intro) */
.mdpd-listado-banners {
	margin: 0 0 1.25em;
}
.mdpd-listado-banners__inner {
	padding: 0.35em;
	text-align: center;
}
.mdpd-listado-banners__img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
.mdpd-listado-banners__link {
	display: block;
}

/* Interlink hub → /{rubro}/{zona}/ (SEO ola 3b) */
.mdpd-hub-por-zona {
	margin: 1.5em 0 2em;
}
.mdpd-hub-por-zona__title {
	color: #605f5f;
	margin: 0 0 0.75em;
	font-size: 1.25em;
}
ul.mdpd-hub-por-zona__list {
	list-style-type: none;
	margin: 0 !important;
	padding: var(--mdpd-caja-padding);
	/* Desktop (MD/LG ≥960): 3 cols — breakpoints del theme (§ SM/XS abajo). */
	columns: 3;
	gap: 0.5rem;
	border: 2px solid var(--mdpd-caja-borde);
	border-radius: var(--mdpd-caja-radio);
}
ul.mdpd-hub-por-zona__list li {
	list-style-type: none;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.75rem;
	font-weight: 500;
	break-inside: avoid;
}
ul.mdpd-hub-por-zona__list li a:hover {
	text-decoration: underline;
	text-decoration-color: var(--fs-color-primary);
	color: var(--fs-color-secondary);
}
/* SM tablet 768–959: 2 columnas */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	ul.mdpd-hub-por-zona__list {
		columns: 2;
	}
}
/* XS móvil ≤767: 1 columna */
@media only screen and (max-width: 767px) {
	ul.mdpd-hub-por-zona__list {
		columns: 1;
	}

	.mdpd-sidebar-wrap--propiedades {
		padding: 0 1rem;
	}

	.off-canvas-right .mfp-content,
	.off-canvas-left .mfp-content {
		--drawer-width: 80vw;
	}
}

/* Dropdown simple del header Flatsome (menú principal). */
.nav-dropdown-simple .nav-column li > a,
.nav-dropdown.nav-dropdown-simple > li > a {
	color: white;
}

.nav-dropdown-simple .nav-column li > a:hover,
.nav-dropdown.nav-dropdown-simple > li > a:hover {
	background-color: rgb(0 0 0 / 22%);
}

/* Botones Flatsome: texto largo (p. ej. «Ver todos…») sin romper el layout. */
a.button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	line-height: 1em !important;
	padding: 0.5em 1.5em !important;
	text-align: center;
	width: fit-content;
}

a.button span {
	line-height: 1.1em !important;
}

/**
 * Buscador de propiedades adentro del menú off-canvas (mobile).
 *
 * Sin caja propia: transparente, para que se vea parte del panel oscuro de
 * Flatsome atrás como el resto del menú. El componente (.mdpd-prop-search)
 * ya trae sus labels en blanco por defecto (assets/prop-search.css), pensado
 * justo para fondos oscuros como este — no hace falta pisarles el color acá.
 */
.mdpd-offcanvas-buscador {
	margin: 1em 0.5em;
	padding: 1em;
	background: transparent;
	border-radius: 0.5em;
}



/* ── assets/prop-results.css ── */
/* Va PRIMERO, antes de cualquier comentario: si no es el primer byte del archivo, el
   navegador la ignora. El servidor sirve los .css sin charset, y sin esta linea la
   codificacion de la hoja queda librada a una cadena de reservas. Ver CLAUDE.md. */
/**
 * Listado /propiedades/ — tarjetas `.tarjetaProp` (grilla de igual alto).
 *
 * Convención de unidades:
 * - font-size, width/height, padding, margin, gap, box-shadow, line-height → em/rem.
 * - Grosor de bordes → px (gusto de renderizado). El resto (incluido border-radius) → em/rem.
 * - Nada de sizing inline: los íconos se dimensionan por font-size (em) desde acá.
 */

/* Miga de pan de las landings: mismo lenguaje visual que la ficha. */
.mdpd-archive-propiedad__breadcrumbs {
	margin-bottom: 0.75rem;
	font-size: 0.9rem;
}

.mdpd-archive-propiedad__breadcrumbs .breadCrumb + .breadCrumb::before {
	/* Chevron por escape, no por carácter — ver la nota en `style.css`.
	   El espacio de más no sobra: CSS se come un espacio en blanco después
	   de un escape hexadecimal, así que hacen falta dos para que quede uno. */
	content: " \203A  ";
	color: #888;
}

.mdpd-archive-propiedad__breadcrumbs a {
	color: #666;
	text-decoration: none;
}

/* Migas + orden/vista en una fila: migas a la izquierda, controles a la
   derecha. Sin breakpoint fijo — `flex-wrap` los apila solo cuando no entran
   juntos (las migas no bajan de `min-width`, los controles no encogen). */
.mdpd-archive-propiedad__crumbs-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 0.75rem;
}

.mdpd-archive-propiedad__crumbs-row .mdpd-breadcrumbs {
	flex: 1 1 auto;
	min-width: 12rem;
}

.mdpd-archive-propiedad__crumbs-row .mdpd-prop-results__toolbar-controles {
	flex-shrink: 0;
}

.listadoPropiedades.mdpd-prop-results__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
	gap: 1.25rem;
	align-items: stretch;
}

.tarjetaProp {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	text-align: left;
	background: #fff;
	border: 1px solid #dce4e8;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.tarjetaProp:hover,
.tarjetaProp:focus-within {
	box-shadow: 0 0.5rem 1.375rem rgba(0, 0, 0, 0.12);
	transform: translateY(-0.125rem);
}

.tarjetaProp .mdpd-tarjeta-prop__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: #1a2b33;
	text-decoration: none;
}

/* --- Media (imagen + overlays) --- */
.tarjetaProp .mdpd-tarjeta-prop__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #e9ecef;
	overflow: hidden;
}

.tarjetaProp .mainImagen {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.tarjetaProp:hover .mainImagen {
	transform: scale(1.04);
}

.tarjetaProp .mdpd-tarjeta-prop__media .estado,
.tarjetaProp .mdpd-tarjeta-prop__media .operacion,
.tarjetaProp .tooltip-img {
	position: absolute;
	z-index: 2;
}

.tarjetaProp .estado {
	top: 0.6rem;
	left: 0.6rem;
	padding: 0.18rem 0.5rem;
	border-radius: 0.3rem;
	background: rgba(17, 34, 41, 0.82);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.tarjetaProp .operacion {
	top: 0.6rem;
	right: 0.6rem;
	padding: 0.2rem 0.55rem;
	border-radius: 0.3rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
}

.tarjetaProp .operacion.venta {
	background: #2bb583;
}

.tarjetaProp .operacion.alquiler {
	background: #2f95bd;
}

.tarjetaProp .tooltip-img {
	right: 0.6rem;
	bottom: 0.6rem;
	max-width: 4.25rem;
	max-height: 2.4rem;
	object-fit: contain;
	/* Color de marca (API fondoBarraTop) declarado en el propio <img>. */
	background: var(--mdpd-inmo-bg, #fff);
	border-radius: 0.3rem;
	padding: 0.18rem;
	box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.15);
}

/* --- Body --- */
.tarjetaProp .mdpd-tarjeta-prop__body {
	display: flex;
	flex-direction: column;
	gap: 0.28rem;
	flex: 1 1 auto;
	padding: 0.85rem 0.9rem 0.75rem;
}

.tarjetaProp .mdpd-tarjeta-prop__title {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.2;
	color: #10222a;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tarjetaProp .mdpd-tarjeta-prop__subtitle {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.3;
	color: #6b8592;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tarjetaProp .descripcion {
	margin: 0.1rem 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: #4a5b63;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Reservado siempre a 2 líneas, aunque el texto real entre en una (mismo
	   motivo que `.caracteristicas` arriba): sin esto, una descripción corta
	   achica la tarjeta entera en el slider (Flickity no tiene el
	   `align-items:stretch` del grid de /propiedades/ que lo disimula). */
	min-height: 2.24rem;
}

.tarjetaProp .caracteristicas {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 0.35rem;
	margin-top: auto;
	padding-top: 0.55rem;
	/* Reservado siempre a 2 líneas (1 a 3 características según la propiedad,
	   a veces entra en una línea, a veces se envuelve a dos): sin esto, la
	   altura de la tarjeta varía con el contenido real. En /propiedades/ eso
	   queda tapado por el `align-items:stretch` del grid; en el slider,
	   Flickity posiciona las celdas con `position:absolute` y ese estirado no
	   llega, así que se nota. Fijar el alto acá lo resuelve en cualquier
	   contexto, sin depender de que el layout que lo contiene lo compense. */
	min-height: 2.55rem;
}

.tarjetaProp .caracteristica {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	font-size: 0.7rem;
	font-weight: 600;
	color: #2a3b43;
}

.tarjetaProp .caracteristica .mdpd-icon {
	font-size: 1.3em;
	color: #2f95bd;
}

/* --- Contacto (barra al pie, integrada a la shape de la card) ---
   font-size raíz .75rem: los hijos usan `em`, así el footer escala parejo. */
.tarjetaProp .contacto {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin-top: auto;
	padding: 0;
	border-top: 1px solid #eef2f4;
	font-size: 0.75rem;
}

/* WhatsApp: pegado a la esquina inferior izquierda de la card. */
.tarjetaProp .contactoWhatsApp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 4em;
	border-radius: 0 0 0 0.75rem;
	background: #25d366;
	color: #fff;
	transition: background 0.15s ease;
}

.tarjetaProp .contactoWhatsApp:hover {
	background: #1ebe5b;
}

.tarjetaProp .mdpd-tarjeta-prop__wsp-icon {
	font-size: 1.85em;
}

/* Toggle de "consulta múltiple": centrado en el espacio libre. */
.tarjetaProp .seleccioneCheckAreaInmu {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tarjetaProp .seleccioneCheckAreaInmu label,
.tarjetaProp .seleccioneCheckAreaInmu label span {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
}

.tarjetaProp .seleccioneCheckAreaInmu label {
	cursor: pointer;
}

.tarjetaProp .mdpd-tarjeta-prop__select-icon {
	font-size: 1.6em;
	color: #6b8592;
}

/* Contactar: pegado a la esquina inferior derecha, fondo primario.
   !important puntual para vencer los defaults de Flatsome en <button>
   (margin, border-radius, line-height). La opacidad de deshabilitado la
   maneja Flatsome (button:disabled → .6); no la forzamos acá. */
.tarjetaProp .contactar {
	flex: 0 0 auto;
	border: 0;
	background: var(--primary-color, #465f70);
	color: #fff;
	border-radius: 0 0 0.75rem 0 !important;
	padding: 0.9em 1.6em;
	font-weight: 700;
	line-height: 1em !important;
	margin: 0 !important;
	cursor: not-allowed;
	transition: filter 0.15s ease;
}

.tarjetaProp .contactar:not(:disabled) {
	cursor: pointer;
}

.tarjetaProp .contactar:not(:disabled):hover {
	filter: brightness(1.1);
}

/* Footer legacy oculto (la descripción ya vive en el body). */
.tarjetaProp .mdpd-tarjeta-prop__desc-footer {
	display: none;
}

/* --- Resumen / orden / vacíos / paginación --- */
.mdpd-prop-results__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
}

.mdpd-prop-results__summary {
	font-size: 0.9rem;
	font-weight: 500;
	font-style: italic;
	opacity: .5;
}

.mdpd-prop-results__toolbar-controles {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.mdpd-prop-results__orden {
	flex-shrink: 0;
}

/* Misma altura y el mismo border que las breadcrumbs de al lado (#0001, 1em de
   radio): eran tres alturas y tres bordes distintos en la misma fila —acá pisa
   el `min-height:3rem`/`border-radius:0.625rem` de base, pensado para el
   buscador, que en la barra de resultados queda grande de más. */
.mdpd-prop-results__orden .mdpd-prop-search__control {
	min-width: 11rem;
	min-height: 2.35rem;
	padding: 0.4rem 2rem 0.4rem 0.75rem;
	border: 1px solid #0001;
	border-radius: 1em;
}

/* --- Selector de vista (grilla / lista) --- */
.mdpd-prop-results__vista {
	display: inline-flex;
	flex-shrink: 0;
	border: 1px solid #0001;
	border-radius: 99px;
	overflow: hidden;
}

.mdpd-prop-results__vista-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	min-height: initial !important;
	border: 0;
	background: #fff;
	color: #6b8592;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.mdpd-prop-results__vista-btn + .mdpd-prop-results__vista-btn {
	border-left: 1px solid #dce4e8;
}

.mdpd-prop-results__vista-btn:hover {
	background: #f3f6f7;
}

.mdpd-prop-results__vista-btn.is-active {
	background: var(--primary-color, #465f70);
	color: #fff;
}

.mdpd-prop-results__vista-btn .mdpd-icon {
	font-size: 1.15rem;
}

.mdpd-prop-results__vista,
.mdpd-prop-results__toolbar-controles,
.mdpd-archive-propiedad__crumbs-row {
	align-items: flex-start;
}

/* --- Precio + dirección en la misma línea (grilla: apilados; lista: al lado) --- */
.mdpd-tarjeta-prop__precio-linea {
	display: contents;
}

/* --- Logo dentro del pie de contacto: solo existe visualmente en vista lista;
   en grilla el logo real sigue siendo el que va superpuesto a la foto. El link
   que lo envuelve (misma ficha que el resto de la tarjeta, para que el logo
   también sea clickeable como en grilla) es `display: contents` en vista
   lista: no agrega caja propia, así el `<img>` sigue siendo el flex item que
   ya se dimensiona más abajo. --- */
.mdpd-tarjeta-prop__logo-lista-link {
	display: none;
}

.mdpd-tarjeta-prop__logo-lista {
	display: none;
}

/* --- Vista lista: filas horizontales, misma tarjeta, reacomodada por CSS ---
   `.mdpd-tarjeta-prop__link` pasa a `display: contents`: dentro del <a> solo
   hay dos hijos (media, body), así que esto no toca el posicionamiento interno
   de `.media` (badges de estado/operación/logo siguen absolutos contra ella) y
   deja a `media` y `body` como celdas propias de la grilla de la tarjeta, al
   mismo nivel que `.contacto` (que ya era hijo directo, fuera del <a>). */
.listadoPropiedades.mdpd-prop-results__grid--lista {
	grid-template-columns: 1fr;
}

/*
 * Altura fija (`height`, no `min-height`): una foto vertical alta empujaba el
 * `1fr` de la fila a su propio alto intrínseco —el clásico «grid blowout», un
 * `1fr` solo implica `minmax(auto, 1fr)`, y ese `auto` no tiene piso—. El
 * `minmax(0, 1fr)` de abajo ya lo tapaba, pero con alto fijo en la card ni
 * hace falta: todas las filas miden lo mismo pase lo que pase con la imagen.
 */
.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp {
	display: grid;
	grid-template-columns: 19rem 1fr;
	grid-template-rows: minmax(0, 1fr) auto;
	grid-template-areas:
		"media body"
		"media contacto";
	height: 13rem;
}

.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__link {
	display: contents;
}

.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__media {
	grid-area: media;
	height: 100%;
	min-height: 0;
	aspect-ratio: auto;
	overflow: hidden;
}

.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__body {
	grid-area: body;
}

.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__precio-linea {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 0.6em;
}

/* Dirección: mismo tamaño y color que el precio, sin la negrita. */
.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__subtitle {
	font-size: 1.2rem;
	font-weight: 400;
	color: #10222a;
	white-space: normal;
}

.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .caracteristicas {
	margin-top: 0.5rem;
	padding-top: 0;
}

/* El pie pasa a ser parte del content (columna derecha): la foto llega sola,
   sin interrupciones, del techo al piso de la fila. Sin el borde de arriba,
   que tenía sentido como separador de una barra a lo ancho de toda la card y
   acá ya no: el pie es chico, adentro del content. */
.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .contacto {
	grid-area: contacto;
	margin-top: 0;
	border-top: 0;
}

/* Logo: se apaga el que va superpuesto a la foto y se prende el del pie, a la
   izquierda —el lado que da contra la foto—. Ancho libre (según la relación de
   aspecto real del logo) y limitado por alto, no al revés: un logo apaisado no
   debe achicarse a la fuerza para entrar en un cuadrado. El margen derecho en
   auto es lo que empuja WhatsApp/check/Contactar al otro extremo. */
.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .tooltip-img {
	display: none;
}

.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__logo-lista-link {
	display: contents;
}

.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__logo-lista {
	display: block;
	flex: 0 0 auto;
	width: auto;
	height: 3em;
	object-fit: contain;
	margin: 0 auto 0.7em 0.7em;
	align-self: center;
	background: var(--mdpd-inmo-bg, #fff);
	border-radius: 0.3rem;
	padding: 0.7em;
	box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.12);
}

/* Check de consulta múltiple: en la card entera (grilla) se estira para
   ocupar el medio de una barra a lo ancho de toda la card; acá el pie es
   angosto y ese estirado dejaba un hueco enorme sin motivo. Ancho justo, como
   WhatsApp y Contactar. */
.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .seleccioneCheckAreaInmu {
	flex: 0 0 auto;
	padding: 0 0.9em;
}

/* WhatsApp queda como el primero del grupo de la derecha, no en la esquina de
   la card (eso era la vista grilla): las dos puntas del lado izquierdo
   redondeadas, para que lea como una píldora propia y no a medio cortar. */
.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .contactoWhatsApp {
	border-radius: 0.75rem 0 0 0.75rem;
}

/* Angosto: la fila horizontal no entra legible, vuelve a apilar como en grilla. */
@media (max-width: 40em) {
	/* El switch grilla/lista no va en móvil: ahí la grilla ya es de una columna
	   y no hay nada que elegir. */
	.mdpd-prop-results__vista {
		display: none;
	}

	.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp {
		display: flex;
		flex-direction: column;
		height: auto;
	}

	.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__link {
		display: flex;
		flex-direction: column;
	}

	.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__media {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__precio-linea {
		display: block;
	}

	.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__subtitle {
		font-size: 0.82rem;
		font-weight: 400;
		color: #6b8592;
	}

	.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .tooltip-img {
		display: block;
	}

	.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__logo-lista {
		display: none;
	}

	.tarjetaProp .seleccioneCheckAreaInmu {
		justify-content: flex-end;
		padding-right: 1em;
	}

	.tarjetaProp .tooltip-img {
		max-width: 6rem;
		max-height: 4rem;
		padding: 0.5rem;
	}
}

.mdpd-prop-results__empty {
	margin: 1rem 0;
}

.mdpd-prop-results__pagination {
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
	display: flex;
	justify-content: center;
}

.mdpd-prop-results__pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mdpd-prop-results__pagination ul.page-numbers li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mdpd-prop-results__pagination ul.page-numbers a.page-numbers,
.mdpd-prop-results__pagination ul.page-numbers span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.35em;
	min-height: 2.35em;
	padding: 0.4em 0.75em;
	box-sizing: border-box;
	border: 2px solid var(--mdpd-caja-borde, #f2f2f2);
	border-radius: var(--mdpd-caja-radio, 0.75rem);
	background: #fff;
	color: var(--fs-color-primary, var(--primary-color, #465f70));
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mdpd-prop-results__pagination ul.page-numbers a.page-numbers:hover,
.mdpd-prop-results__pagination ul.page-numbers a.page-numbers:focus-visible {
	border-color: var(--fs-color-secondary, var(--secondary-color, #329ac1));
	color: var(--fs-color-secondary, var(--secondary-color, #329ac1));
	outline: none;
}

.mdpd-prop-results__pagination ul.page-numbers span.page-numbers.current {
	background: var(--fs-color-primary, var(--primary-color, #465f70));
	border-color: var(--fs-color-primary, var(--primary-color, #465f70));
	color: #fff;
	font-weight: 700;
}

.mdpd-prop-results__pagination ul.page-numbers span.page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: 1.5em;
	color: #8a8a8a;
	font-weight: 400;
}

.mdpd-prop-results__pagination ul.page-numbers a.prev,
.mdpd-prop-results__pagination ul.page-numbers a.next {
	padding-left: 0.95em;
	padding-right: 0.95em;
}

@media (max-width: 420px) {
	.listadoPropiedades.mdpd-prop-results__grid {
		grid-template-columns: 1fr;
	}
}


/* ── assets/props-slider.css ── */
/* Va PRIMERO, antes de cualquier comentario: si no es el primer byte del archivo, el
   navegador la ignora. El servidor sirve los .css sin charset, y sin esta linea la
   codificacion de la hoja queda librada a una cadena de reservas. Ver CLAUDE.md. */
/**
 * [mdpd_props_slider] — ver inc/front/props-slider.php.
 *
 * El ancho de columnas (5/3/1 según breakpoint) y el drag/flechas/bullets
 * salen enteros de flatsome.css + chunk.slider.js (`.row.large-columns-N`
 * + `.slider` con `groupCells:"100%"`, ya cargados siempre) — el mismo
 * mecanismo que usa Flatsome para su slider de productos relacionados.
 * Acá solo queda lo que ese sistema no cubre: el centrado del `.row-slider`,
 * el título y el alto parejo de la tarjeta dentro de la celda.
 */

.mdpd-props-slider {
	margin: 0 0 1.5em;
}

/* Flickity/chunk.slider.js le pone su propio margin inline al `.row-slider`
   que rompe el centrado del conjunto dentro del contenedor del shortcode. */
.mdpd-props-slider .row-slider {
	margin: 0 auto !important;
}

.mdpd-props-slider__titulo {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0 0 0.75em;
}

/*
 * «Ver todos» debajo del carrusel. En el toggle va uno por panel, así que se
 * mueve solo con la pestaña activa: el panel inactivo de Flatsome se esconde
 * con `height:0;overflow:hidden`, y el link se esconde con él.
 *
 * Va centrado y con margen arriba porque queda debajo de los bullets del
 * slider, que son lo último que se ve de la fila.
 */
.mdpd-props-slider__vertodos {
	margin: 0.6em 0 0;
	text-align: center;
}

.mdpd-props-slider__vertodos a {
	display: inline-block;
	padding: 0.35em 1.2em;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--fs-color-primary, #168ea6);
	border: 1px solid currentColor;
	border-radius: var(--mdpd-caja-radio, 0.75rem);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mdpd-props-slider__vertodos a:hover,
.mdpd-props-slider__vertodos a:focus-visible {
	color: #fff;
	background: var(--fs-color-primary, #168ea6);
}

/* La tarjeta ya viene pensada para estirarse a la altura de su contenedor
   (grilla de /propiedades/, ver prop-results.css); acá el contenedor es la
   `.col` de Flatsome, no una fila de grid, así que sin esto cada tarjeta
   quedaría a su alto natural pese a `equalize-box` en la fila. */
.mdpd-props-slider .tarjetaProp {
	height: 100%;
}


/* ── assets/zonas.css ── */
/* Va PRIMERO, antes de cualquier comentario: si no es el primer byte del archivo, el
   navegador la ignora. El servidor sirve los .css sin charset, y sin esta linea la
   codificacion de la hoja queda librada a una cadena de reservas. Ver CLAUDE.md. */
/*
 * Zonas: tarjetas destacadas del home ([mdpd_zonas_destacadas]) e índice
 * completo de ciudades y zonas ([mdpd_zonas_indice]).
 *
 * Los colores salen de las variables que publica Flatsome
 * (--fs-color-primary / --fs-color-secondary), así que el índice sigue la
 * paleta configurada en el theme sin tocar este archivo.
 *
 * El ancho de las columnas de las tarjetas lo pone la grilla nativa de
 * Flatsome (.row.large-columns-N, ya en flatsome.css): acá no se define.
 */

/* ==========================================================================
   Tarjetas de zona destacada (home)
   ========================================================================== */

/*
 * `.mdpd-zonas-destacadas` es la clase del propio `.row` que devuelve el
 * shortcode, y queda a propósito SIN propiedades: es solo un gancho. Cualquier
 * `margin` acá le pisaría a Flatsome los márgenes negativos que arman el gutter
 * entre columnas. El espaciado alrededor lo pone la sección de UX Builder que
 * envuelva el bloque, que es de quien arma la página.
 */

.mdpd-zona-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mdpd-zona-card:hover {
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.11);
	transform: translateY(-2px);
}

.mdpd-zona-card__foto {
	display: block;
	overflow: hidden;
	line-height: 0;
	background: #f2f2f2;
}

.mdpd-zona-card__foto img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.mdpd-zona-card:hover .mdpd-zona-card__foto img {
	transform: scale(1.04);
}

.mdpd-zona-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1em 1.1em 1.2em;
}

.mdpd-zona-card__titulo {
	margin: 0 0 0.15em;
	font-size: 1.15em;
	line-height: 1.25;
}

.mdpd-zona-card__titulo a {
	color: inherit;
}

.mdpd-zona-card__titulo a:hover {
	color: var(--fs-color-primary, #168ea6);
}

/*
 * El link al hub es el que cambia de registro: el resto de la tarjeta lleva a
 * listados de propiedades y este lleva a leer sobre el barrio. Va con otro
 * peso y un subrayado punteado para que se lea como una invitación y no como
 * un filtro más.
 */
.mdpd-zona-card__hub {
	align-self: flex-start;
	margin-bottom: 0.9em;
	font-size: 0.92em;
	font-weight: 500;
	color: var(--fs-color-primary, #168ea6);
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
}

.mdpd-zona-card__hub:hover {
	text-decoration-style: solid;
}

.mdpd-zona-card__links {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* Flatsome le pone margen inferior a los <li> del contenido y acá desalinea
   las filas contra sus separadores. El `ul` y el !important son para ganarle
   a esa regla, que es más específica que una clase sola. */
ul.mdpd-zona-card__links li {
	margin: 0 !important;
}

.mdpd-zona-card__links li + li {
	border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.mdpd-zona-card__links a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6em;
	padding: 0.5em 0;
	font-size: 0.94em;
	color: #333;
}

.mdpd-zona-card__links a:hover,
.mdpd-zona-card__links a:focus-visible {
	color: var(--fs-color-primary, #168ea6);
}

.mdpd-zona-card__link-label {
	flex: 1 1 auto;
}

.mdpd-zona-card__link-total {
	flex: 0 0 auto;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	color: #8a8a8a;
}

/* ==========================================================================
   Índice de ciudades y zonas
   ========================================================================== */

.mdpd-zonas-indice__buscador {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 0.6em 0 0.9em;
	background: #fff;
}

.mdpd-zonas-indice__input {
	width: 100%;
	max-width: 520px;
	margin: 0;
}

.mdpd-zonas-indice__vacio {
	margin: 1.2em 0;
	color: #777;
}

.mdpd-zonas-indice__grupo + .mdpd-zonas-indice__grupo {
	margin-top: 2em;
}

.mdpd-zonas-indice__grupo-titulo {
	margin-bottom: 0.7em;
	font-size: 1.1em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #777;
}

.mdpd-zonas-indice__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Ciudades y zonas comparten forma, tamaño y tratamiento: lo único que las
 * separa es el color. Son dos categorías del mismo índice, no una principal
 * y otra secundaria.
 *
 * El color va como tinte de fondo y barra de acento, no como fondo pleno: son
 * ~180 tiras en una pantalla y el pleno a esa densidad cansa la vista y baja
 * el contraste del texto. El pleno aparece en hover y en foco de teclado.
 */
.mdpd-lugar-strip {
	display: flex;
	align-items: center;
	gap: 0.7em;
	min-height: 56px;
	height: 100%;
	padding: 0 0.5em;
	overflow: hidden;
	font-size: 0.95em;
	font-weight: 500;
	line-height: 1.25;
	color: #2b2b2b;
	background: #f4f4f4;
	border-left: 4px solid #ccc;
	border-radius: var(--mdpd-caja-radio, 0.75rem);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mdpd-lugar-strip--ciudad {
	background: color-mix(in srgb, var(--fs-color-primary, #168ea6) 13%, #fff);
	border-left-color: var(--fs-color-primary, #168ea6);
}

.mdpd-lugar-strip--zona {
	background: color-mix(in srgb, var(--fs-color-secondary, #ff5500) 11%, #fff);
	border-left-color: var(--fs-color-secondary, #ff5500);
}

.mdpd-lugar-strip--ciudad:hover,
.mdpd-lugar-strip--ciudad:focus-visible {
	color: #fff;
	background: var(--fs-color-primary, #168ea6);
}

.mdpd-lugar-strip--zona:hover,
.mdpd-lugar-strip--zona:focus-visible {
	color: #fff;
	background: var(--fs-color-secondary, #ff5500);
}

/* La foto es opcional. Sin foto, el nombre ocupa la tira entera — no se pone
   una imagen por defecto (ver el encabezado de inc/front/zonas-indice.php). */
.mdpd-lugar-strip__foto {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	overflow: hidden;
	line-height: 0;
	border-radius: 3px;
}

.mdpd-lugar-strip__foto img {
	width: 40px;
	height: 40px;
	object-fit: cover;
}

.mdpd-lugar-strip__nombre {
	flex: 1 1 auto;
	min-width: 0;
}

.mdpd-lugar-strip-item[hidden] {
	display: none;
}

@media (max-width: 549px) {
	.mdpd-zonas-indice__lista {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	/* El padding no se pisa acá: el de base (0.5em) ya es ajustado y en el
	   celular pisarlo con un valor mayor invertía la relación. */
	.mdpd-lugar-strip {
		min-height: 50px;
		font-size: 0.88em;
	}

	.mdpd-zona-card__foto img {
		height: 160px;
	}
}


/* ── assets/busquedas-links.css ── */
/* Va PRIMERO, antes de cualquier comentario: si no es el primer byte del archivo, el
   navegador la ignora. El servidor sirve los .css sin charset, y sin esta linea la
   codificacion de la hoja queda librada a una cadena de reservas. Ver CLAUDE.md. */
/*
 * Tiles de búsquedas frecuentes: [mdpd_links_tipos] y [mdpd_links_ambientes].
 *
 * Mismo lenguaje visual que las tiras del índice de zonas (assets/zonas.css):
 * caja compacta, radio de la variable del theme, color de acento a la
 * izquierda y relleno pleno recién en hover. La diferencia es que acá la tira
 * lleva el conteo a la derecha.
 *
 * `.mdpd-busquedas` es la clase del propio `.row` que devuelve el shortcode y
 * queda SIN propiedades a propósito: un `margin` ahí le pisaría a Flatsome los
 * márgenes negativos con los que arma el gutter entre columnas. El espaciado
 * lo pone la sección de UX Builder que envuelva el bloque.
 */

.mdpd-busqueda-tile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6em;
	min-height: 56px;
	height: 100%;
	padding: 0.5em 0.8em;
	font-size: 0.95em;
	font-weight: 500;
	line-height: 1.25;
	color: #2b2b2b;
	background: #f4f4f4;
	border-left: 4px solid #ccc;
	border-radius: var(--mdpd-caja-radio, 0.75rem);
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Las dos variantes del atributo `color` del shortcode. Mismo tratamiento que
   en el índice de zonas: tinte de fondo y barra de acento en reposo, pleno en
   hover y en foco de teclado. */
.mdpd-busqueda-tile--primario {
	background: color-mix(in srgb, var(--fs-color-primary, #168ea6) 10%, #fff);
	border-left-color: var(--fs-color-primary, #168ea6);
}

.mdpd-busqueda-tile--secundario {
	background: color-mix(in srgb, var(--fs-color-secondary, #ff5500) 10%, #fff);
	border-left-color: var(--fs-color-secondary, #ff5500);
}

.mdpd-busqueda-tile--primario:hover,
.mdpd-busqueda-tile--primario:focus-visible {
	color: #fff;
	background: var(--fs-color-primary, #168ea6);
}

.mdpd-busqueda-tile--secundario:hover,
.mdpd-busqueda-tile--secundario:focus-visible {
	color: #fff;
	background: var(--fs-color-secondary, #ff5500);
}

.mdpd-busqueda-tile__label {
	flex: 1 1 auto;
	min-width: 0;
}

/* El conteo informa, no compite: se apaga en reposo y acompaña al texto
   cuando la tira se pinta entera en hover. */
.mdpd-busqueda-tile__total {
	flex: 0 0 auto;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	color: #8a8a8a;
}

.mdpd-busqueda-tile:hover .mdpd-busqueda-tile__total,
.mdpd-busqueda-tile:focus-visible .mdpd-busqueda-tile__total {
	color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 549px) {
	.mdpd-busqueda-tile {
		min-height: 50px;
		padding: 0.45em 0.6em;
		font-size: 0.85em;
	}
}