/*
Theme Name: Flatsome Child — MDP Portal
Description: Child theme multi-portal (mardelplata.com y otros). Prefijo: mdpd_portal_
Author: MDP Digital
Template: flatsome
Version: 0.57.17
Text Domain: mdpd-portal
*/

/*
 * 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;
}

/**
 * Etiquetas sueltas con el color del texto.
 *
 * Flatsome les pone color propio a `td` (#666), `blockquote` (#333) y `label`
 * (#222), y a `th`/`dl` mayúsculas y opacidad. El personalizador solo maneja el
 * color del cuerpo y el de los títulos, así que estas quedaban de otro tono que
 * el párrafo de al lado (la tabla de Información General). Heredan el color del
 * contenedor; bordes, tamaños y la cursiva de las citas siguen siendo de Flatsome.
 */
td,
th,
blockquote,
dl,
label {
	color: inherit;
}

th,
dl {
	letter-spacing: normal;
	text-transform: none;
}

dl {
	opacity: 1;
}

/**
 * Enlaces dentro del texto: trazo de resaltador.
 *
 * El color de enlaces del personalizador está casi en el tono del texto
 * (#465f70 en MdP, #0a0a0a en VCP) y los enlaces se perdían. Van en el color vivo
 * del portal (el secundario: rojo en MdP, verde en VCP). En vez del subrayado,
 * una franja fina y muy translúcida de ese color al pie
 * de la palabra, que sobra un poco a los costados y tiene las puntas redondeadas
 * (el margen negativo compensa casi todo el relleno, así el texto apenas se
 * separa de lo de al lado); al pasar el
 * mouse cubre la palabra entera. Solo los enlaces sin clase —los que se escriben
 * en el editor—: botones y tarjetas llevan clase, y lo que está dentro de un menú
 * o una barra lateral (`nav`, `aside`, `.mdpd-sidebar-wrap`) queda afuera aunque
 * sus enlaces no tengan clase. Las listas con clase son componentes (la lista de
 * rubros del home de VLA, `ul.homeUnorderedList`): solo cuentan las del texto,
 * sin clase o con la `wp-block-list` del editor de bloques.
 */
#content :is(p, td, dd, :is(ul, ol):is(:not([class]), .wp-block-list) > li) a:not([class]):not(nav a, aside a, .mdpd-sidebar-wrap a) {
	--mdpd-resaltador: color-mix(in srgb, var(--fs-color-secondary) 10%, transparent);
	-webkit-box-decoration-break: clone;
	background: linear-gradient(transparent 85%, var(--mdpd-resaltador) 0) no-repeat;
	border-radius: 0.3em;
	box-decoration-break: clone;
	color: var(--fs-color-secondary);
	font-weight: 600;
	margin: 0 -0.15em;
	opacity: 1;
	padding: 0 0.2em;
	text-decoration: none;
	transition: background-color 0.2s;
}

#content :is(p, td, dd, :is(ul, ol):is(:not([class]), .wp-block-list) > li) a:not([class]):not(nav a, aside a, .mdpd-sidebar-wrap a):hover {
	background-color: var(--mdpd-resaltador);
}

/**
 * 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. Adentro de un
 * `<dialog>` modal esto no alcanza —el diálogo se dibuja en el «top layer», por
 * arriba de cualquier z-index—: ahí el tooltip tiene que colgar del diálogo, y
 * de eso se ocupa el JavaScript (`assets/consulta.js`).
 */
.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;
}

/**
 * Tira de miniaturas debajo del slider (turismo y propiedad): scroll
 * horizontal nativo + arrastre con mouse (assets/gallery-thumbs.js) y dos
 * flechas laterales. Cada miniatura lleva el mismo radio de las cajas del
 * portal, como el slider y el mapa.
 */
.mdpd-gallery-thumbs {
	align-items: center;
	display: flex;
	gap: 0.5em;
	margin: -0.5em 0 1em;
}

.mdpd-gallery-thumbs__track {
	display: flex;
	flex: 1 1 auto;
	gap: 0.5em;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mdpd-gallery-thumbs__track::-webkit-scrollbar {
	display: none;
}

.mdpd-gallery-thumbs__track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}

.mdpd-gallery-thumbs__item {
	background: none;
	border: 0.15em solid transparent;
	border-radius: var(--mdpd-caja-radio);
	cursor: pointer;
	flex: 0 0 auto;
	line-height: 0;
	overflow: hidden;
	padding: 0;
	width: 4.5em;
}

/* Flatsome le pone su propio radio a `button` (`.button:not(.icon)`) con más
   especificidad que la clase de arriba: sin este selector puntual, el radio
   de las cajas del portal no se aplica. */
button:not(.icon).mdpd-gallery-thumbs__item {
	border-radius: var(--mdpd-caja-radio) !important;
}

.mdpd-gallery-thumbs__item img {
	aspect-ratio: 1 / 1;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.mdpd-gallery-thumbs__item:hover {
	opacity: 0.85;
}

.mdpd-gallery-thumbs__item.is-active {
	border-color: var(--mdpd-icono-color);
}

.mdpd-gallery-thumbs__nav {
	align-items: center;
	background: none !important;
	border: 2px solid var(--mdpd-caja-borde, #f2f2f2) !important;
	border-radius: 50% !important;
	color: var(--mdpd-icono-color) !important;
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	height: 2.2em;
	justify-content: center;
	margin: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	width: 2.2em;
}

.mdpd-gallery-thumbs__nav:hover,
.mdpd-gallery-thumbs__nav:focus-visible {
	border-color: var(--mdpd-icono-color) !important;
}

/**
 * Fotos ampliadas (lightbox, Magnific Popup): más aire alrededor de la foto y
 * flechas/cierre con fondo propio en vez del ícono pelado por default.
 */
@media (max-width: 767px) {
	.mfp-image-holder {
		padding: 0.5rem;
	}

	img.mfp-img {
		backface-visibility: hidden;
		display: block;
		height: auto;
		max-height: calc(100vh - 80px);
		max-width: 100%;
		padding: 0 !important;
		width: auto;
	}

	.mfp-figure:after {
		bottom: 0;
	}

	.mfp-bottom-bar {
		margin-top: 0;
	}

	.mfp-counter {
		background: #0003;
		padding: 0.2em;
		right: 0;
		top: initial;
	}

	.mfp-ready .mfp-close {
		align-items: center;
		background: #0005;
		display: flex;
		font-size: 2rem !important;
		justify-content: center;
		opacity: 1;
	}

	.mfp-arrow {
		align-items: center;
		background: #0005;
		color: #fff;
		display: flex;
		height: 40px;
		justify-content: center;
		mix-blend-mode: hard-light;
		opacity: 1;
		width: 40px;
	}

	.mfp-arrow i {
		font-size: 2rem;
		line-height: 0;
		pointer-events: none;
	}
}

/* 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;
}

/* Menú de una página con hijas (0.55.0): la madre es el título y enlace. */
.mdpd-sidebar--paginas .mdpd-sidebar__title a {
	color: inherit;
}
.mdpd-sidebar--paginas .mdpd-sidebar__title a:hover,
.mdpd-sidebar--paginas .mdpd-sidebar__title a[aria-current="page"] {
	text-decoration: underline;
}

/* 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: '•';
	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;
}

/* En el home no hay «vista» que anclar (es la home): el rótulo sobra. */
body.home .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;
	}

	/* Letra más grande y caja de zonas más alta en el sidebar/off-canvas: acá
	   es donde entra la vista compacta del celular/tablet, no en desktop. */
	nav.mdpd-sidebar ul li:not(.mdpd-sidebar__home) {
		font-size: 1rem;
	}

	.mdpd-sidebar__zonas-box {
		height: 20.7em;
	}

	/* Ítems con ícono del menú principal de Flatsome, dentro del off-canvas
	   oscuro: letra más grande y el ícono en blanco parejo con el texto. */
	.sidebar-menu li.menu-item.has-icon-left a {
		font-size: 1rem;
	}

	.sidebar-menu li.menu-item.has-icon-left a,
	.sidebar-menu li.menu-item.has-icon-left a i {
		color: #fff !important;
	}
}

/* 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;
}

/* 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;
	}
}

/* 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);
	}
}

/* Solo móvil: el `.mdpd-dato` es flex (icono + texto) y no responde al
   text-align del `xstac` de la columna — se centra aparte, y solo acá (no en
   la ficha de propiedad, que también usa `.mdpd-dato` pero se queda a la
   izquierda). */
@media (max-width: 549px) {
	.mdpd-inmo-cabecera p.mdpd-dato {
		justify-content: center !important;
	}
}

/**
 * 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 propiedades del hub de inmobiliarias y del listado por
 * especialidad: en desktop va inline, arriba del contenido. En móvil se
 * esconde acá —queda solo la copia del menú off-canvas
 * (inc/front/offcanvas-buscador.php), que es donde tiene que estar—.
 */
@media (max-width: 767px) {
	.mdpd-inline-buscador-col {
		display: none;
	}
}

/* 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;
}

/* 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;
}

/* En mobile, el listado de un rubro (no propiedades) reemplaza este chip por
   el botón de ícono solo de la columna de consultar (`.mdpd-consulta-whatsapp`,
   assets/consulta.css): mismo destino, sin repetirlo dos veces en la fila. */
@media (max-width: 549px) {
	.mdpd-tarjeta-datos .mdpd-telephoner--wsp {
		display: none;
	}
}

/**
 * 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 {
	content: "›";
	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: "‹";
		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;
}
/* La introducción propia de la zona (term meta, 0.52.4): sus párrafos. */
.mdpd-seo-intro--propia p {
	margin: 0 0 0.8em;
}
.mdpd-seo-intro--propia p:last-child {
	margin-bottom: 0;
}
.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: '−';
}
.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;
	}

	/* Ensanchar la hoja en mobile: menos margen lateral que el que traía
	   Flatsome acá (era `0 1rem`; header/banner/footer ya quedaban a full-bleed
	   igual, ese respiro era solo del contenido). */
	section.section .section-content {
		padding: 0;
	}

	.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;
}

/**
 * Globo animado que apunta al botón de menú (☰): avisa que ahí vive el
 * buscador de propiedades y las categorías (/inmobiliarias/). Solo
 * mobile/tablet — en desktop no hay botón de menú que señalar.
 */
.mdpd-nudge-menu {
	background: #e02020;
	border-radius: 0.75em;
	box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.3);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
	max-width: 12em;
	opacity: 0;
	padding: 0.6em 0.85em;
	pointer-events: none;
	position: fixed;
	text-align: center;
	transform: translateY(-0.4em);
	transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: var(--mdpd-z-popover);
}

.mdpd-nudge-menu.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* La puntita apunta hacia arriba, al botón de menú, que queda en el header
   justo encima del globo. */
.mdpd-nudge-menu::after {
	border: 0.5em solid transparent;
	border-bottom-color: #e02020;
	bottom: 100%;
	content: "";
	left: 1.2em;
	position: absolute;
}

@media (min-width: 960px) {
	.mdpd-nudge-menu {
		display: none;
	}
}

/**
 * Buscador de propiedades adentro del menú off-canvas (mobile).
 *
 * Sin caja propia: el widget de búsqueda (.mdpd-prop-search) ya trae su
 * propio fondo de color y texto blanco, así que se apoya directo sobre el
 * panel oscuro del off-canvas en vez de ir metido en una caja blanca aparte.
 */
.mdpd-offcanvas-buscador {
	margin: 1em 0.5em;
	padding: 1em;
	border-radius: 0.5em;
}


/* Índice de categorías de la propia página
   Ver inc/front/rubro-chips.php — mdpd_portal_render_listado_indice()

   No confundir con `.mdpd-rubro-chips`, que lleva a otra página y solo se ve en
   el celular. Éste salta a un bloque de esta misma página y se ve siempre,
   porque en el escritorio la página también es larga: /hoteles/ son 232 fichas
   repartidas en cinco bloques. */
.mdpd-listado-indice {
	margin: 0 0 1.2rem;
}

.mdpd-listado-indice__list {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mdpd-listado-indice__list li {
	margin: 0;
}

.mdpd-listado-indice__chip {
	display: inline-flex;
	align-items: center;
	gap: .4em;
}

/* El número de fichas de cada bloque: ayuda a decidir adónde ir sin bajar. */
.mdpd-listado-indice__n {
	font-size: .85em;
	opacity: .7;
}

/* Que el título del bloque no quede debajo del encabezado fijo al saltar.
   Es lo único que hace falta para que las anclas funcionen bien: sin esto haría
   falta JavaScript para compensar la altura del header. */
.mdpd-tax-listado__hijo,
.mdpd-page-listado-rubro__grupo,
#mdpd-tax-listado-top {
	scroll-margin-top: 6rem;
}