/* Inmovilla Connector — frontend (Fase 7, estética alineada con Palace)
 *
 * Estilos propios y autocontenidos: NO cargan ni dependen del CSS del
 * theme activo (así el buscador/ficha siguen funcionando igual si el
 * theme cambia), pero replican a propósito la paleta de color, la
 * tipografía y las medidas del theme Palace (activo en este sitio),
 * copiadas de wp-content/themes/palace/assets/css/global.css y style.css
 * — no reutilizamos sus clases ni su hoja de estilos, solo sus valores.
 *
 * Paleta real de Palace (ver :root en global.css):
 *   --main-color:  #eb2027 (rojo)      --color-two:  #171b2a (texto)
 *   --color-three: #F5F5F5 (gris claro) --color-four: #F9F9F9
 *   --color-seven: #D5E5F7 (azul claro, badge secundario)
 * Tipografía: "Plus Jakarta Sans" (headings 700, cuerpo 400).
 */

.inmovilla-wrap {
	--inmovilla-primary: #eb2027;
	--inmovilla-text: #171b2a;
	--inmovilla-muted: rgba(23, 27, 42, 0.7);
	--inmovilla-divider: #f5f5f5;
	--inmovilla-border-subtle: rgba(0, 0, 0, 0.05);
	--inmovilla-bg-soft: #f9f9f9;
	--inmovilla-badge-secondary-bg: #d5e5f7;
	--inmovilla-radius: 16px;
	--inmovilla-radius-pill: 50px;
	--inmovilla-font: "Plus Jakarta Sans", sans-serif;

	font-family: var(--inmovilla-font);
	color: var(--inmovilla-text);
	font-size: 14px;
	line-height: 1.6;

	/* Muchos themes (incl. Palace) colocan la cabecera con
	 * position:absolute/fixed pensada para ir sobre una imagen de portada.
	 * Como esta plantilla no lleva ese hero, se reserva espacio para que
	 * la cabecera no tape el título ni el formulario. Si el theme cambia,
	 * este margen de sobra no rompe nada, solo deja algo de aire extra. */
	padding-top: 110px;
}

.inmovilla-wrap *,
.inmovilla-wrap *::before,
.inmovilla-wrap *::after {
	box-sizing: border-box;
}

.inmovilla-wrap h1,
.inmovilla-wrap h2,
.inmovilla-wrap h3 {
	font-family: var(--inmovilla-font);
	font-weight: 700;
	color: var(--inmovilla-text);
	margin: 0;
}

.inmovilla-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.inmovilla-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Arreglo de raíz (antes parcheado contenedor por contenedor: tarjeta de
 * propiedad, "Datos generales", bloque-resumen…): algunos iconos van
 * rellenos a propósito (fill="currentColor", p. ej. phone/whatsapp) y
 * otros son solo de contorno (fill="none" + trazo, p. ej. home/plot/
 * price/heart) — la regla de arriba fuerza "fill:currentColor" para
 * TODOS, así que los de contorno se veían como una silueta sólida en vez
 * de un trazo. El selector de atributo solo coge los que de verdad se
 * definieron con fill="none", sin tocar los que sí van rellenos a
 * propósito (evita repetir este arreglo cada vez que aparece un icono de
 * contorno nuevo en un sitio distinto). */
.inmovilla-icon svg[fill="none"] {
	fill: none !important;
}

.inmovilla-container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

/* Aviso "mostrando propiedades de {agente}" — ver ?agente= en
 * Inmovilla_Connector_Frontend_Query, llega desde el botón "Ver todas las
 * propiedades" de la ficha de un miembro del equipo. */
.inmovilla-agent-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: center;
	margin: 0 0 1.25rem;
	padding: 0.7rem 1rem;
	border-radius: var(--inmovilla-radius);
	background-color: var(--inmovilla-badge-secondary-bg);
	color: var(--inmovilla-text);
	font-size: 0.85rem;
	font-weight: 500;
}

.inmovilla-agent-filter a {
	color: var(--inmovilla-primary);
	font-weight: 600;
	text-decoration: underline;
}

/* --- Formulario de filtros --- */

.inmovilla-filters {
	background: var(--inmovilla-divider);
	border-radius: var(--inmovilla-radius);
	padding: 1.5rem;
	margin-bottom: 2rem;
}

.inmovilla-filters__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}

.inmovilla-filters__row:last-of-type {
	margin-bottom: 0;
}

/* Categorías principales simplificadas (Casa/Apartamento/Garaje/Comercial)
 * — botones grandes en vez de un desplegable más, para que sean lo primero
 * que se vea en el buscador. Ver templates/parts/search-form.php. */
.inmovilla-type-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 1rem;
}

.inmovilla-type-button {
	flex: 1 1 140px;
	padding: 0.75rem 1rem;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	font-family: var(--inmovilla-font);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--inmovilla-text);
	cursor: pointer;
	text-align: center;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.inmovilla-type-button:hover {
	border-color: var(--inmovilla-primary);
}

.inmovilla-type-button.is-active {
	background: var(--inmovilla-primary);
	border-color: var(--inmovilla-primary);
	color: #fff;
}

/* Enlace "Filtros adicionales" / "Ocultar filtros" — muestra u oculta
 * ".inmovilla-advanced-filters" (assets/js/frontend.js). Solo se intercambia
 * qué texto de los dos se ve; el estado real lo lleva el atributo
 * "aria-expanded" que pone el propio JS al hacer clic. */
.inmovilla-advanced-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 1rem;
	padding: 0;
	background: none;
	border: none;
	color: var(--inmovilla-primary);
	font-family: var(--inmovilla-font);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.inmovilla-advanced-toggle__label-hide {
	display: none;
}

.inmovilla-advanced-toggle[aria-expanded="true"] .inmovilla-advanced-toggle__label-show {
	display: none;
}

.inmovilla-advanced-toggle[aria-expanded="true"] .inmovilla-advanced-toggle__label-hide {
	display: inline;
}

.inmovilla-advanced-filters {
	padding-top: 0.25rem;
}

/* En móvil, "minmax(160px, 1fr)" de arriba no deja sitio para 2 columnas
 * (160px x 2 + el hueco no caben en el ancho real disponible), así que
 * "auto-fit" los apilaba de 1 en 1 — mucho más alto de lo necesario. Se
 * fuerzan 2 columnas fijas para que quede como el resto de buscadores del
 * sitio (2 campos por fila) en vez de una lista larga de un solo campo.
 *
 * También se quita la "tarjeta" gris (fondo + esquinas redondeadas) y el
 * margen lateral que dejaba el padding de ".inmovilla-container" — el
 * margen negativo de abajo lo cancela para que los campos lleguen hasta
 * el borde de la pantalla, más parecido al buscador de referencia. */
/* Oculto visualmente (accesible para lectores de pantalla) en TODOS los
 * anchos, no solo en móvil — a petición del usuario: el propio <select>/
 * <input> ya muestra su placeholder (o la opción "Cualquiera"-que-repite-el-
 * nombre-del-campo, ver templates/parts/search-form.php) como único texto
 * visible del campo, así que la etiqueta de arriba era redundante y solo
 * añadía altura al buscador. */
.inmovilla-field label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.inmovilla-field select,
.inmovilla-field input[type="number"] {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	background: #fff;
	font-family: var(--inmovilla-font);
	font-size: 0.9rem;
	color: var(--inmovilla-text);
}

/* Campo "Zona": autorrelleno de texto libre en vez del viejo <select> en
 * cascada con Ciudad — mismo aspecto que el resto de campos, pero exige
 * elegir una sugerencia real (ver assets/js/frontend.js:validateZona()).
 * position:relative ancla la lista de sugerencias justo debajo. */
.inmovilla-field--zona {
	position: relative;
}

.inmovilla-zona-input {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	background: #fff;
	font-family: var(--inmovilla-font);
	font-size: 0.9rem;
	color: var(--inmovilla-text);
}

.inmovilla-field--zona.has-error .inmovilla-zona-input {
	border-color: var(--inmovilla-primary);
}

.inmovilla-zona-error {
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	color: var(--inmovilla-primary);
}

/* El ancho real (más generoso que la propia columna de la rejilla, hasta el
 * borde derecho de su fila) lo fija assets/js/frontend.js con "style.width"
 * en px al abrir la lista — algunas zonas reales tienen nombres largos
 * ("Cala Vedella - Cala Tarida - Cala Conta") que no caben bien en una sola
 * columna estrecha. */
.inmovilla-zona-suggestions {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	margin: 6px 0 0;
	padding: 6px;
	list-style: none;
	max-height: 280px;
	overflow-y: auto;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.inmovilla-zona-option {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 5px;
	font-size: 0.9rem;
	color: var(--inmovilla-text);
	cursor: pointer;
}

.inmovilla-zona-option.is-active,
.inmovilla-zona-option:hover {
	background: var(--inmovilla-divider);
}

.inmovilla-zona-option-label {
	font-weight: 500;
}

.inmovilla-zona-option-sublabel {
	flex-shrink: 0;
	font-size: 0.75rem;
	color: var(--inmovilla-muted);
}

.inmovilla-filters__amenities {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
}

.inmovilla-checkbox {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.88rem;
	cursor: pointer;
}


.inmovilla-filters__actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

/* Botón "pill" con el mismo efecto hover que ".inmovilla-property-grid__btn"
 * (widget "Cuadrícula de propiedades"): un círculo oculto encima que se
 * desliza hacia abajo para revelarse (::before) + el texto real, duplicado
 * en dos <span>, donde el primero sube y desaparece mientras el segundo
 * sube desde abajo para ocupar su sitio — mismo "theme-btn.btn-style-one"
 * de Palace, reutilizado aquí a propósito para que todos los botones del
 * sitio compartan una única animación reconocible. */
.inmovilla-button {
	position: relative;
	overflow: hidden;
	display: inline-block;
	padding: 15px 35px;
	background: var(--inmovilla-primary);
	color: #fff;
	border: none;
	border-radius: var(--inmovilla-radius-pill);
	font-family: var(--inmovilla-font);
	font-size: 0.95rem;
	font-weight: 600;
	text-transform: capitalize;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}

.inmovilla-button::before {
	content: '';
	position: absolute;
	z-index: 1;
	top: -200%;
	left: 50%;
	width: 200%;
	height: 200%;
	border-radius: 50%;
	background-color: var(--inmovilla-text);
	transform: translateX(-50%);
	transition: top 0.8s ease;
}

.inmovilla-button:hover::before {
	top: -40%;
}

/* Sin esto el texto se queda azul en hover: el tema trae una regla
 * genérica "a:hover { color: var(--bs-link-hover-color); }" que sin
 * querer también afecta a este botón (mismo caso ya visto en
 * ".news-block_two-more:hover" del tema). */
.inmovilla-button:hover {
	color: #fff;
}

.inmovilla-button__wrap {
	position: relative;
	z-index: 2;
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.inmovilla-button__wrap span {
	display: block;
	transition: all 0.3s ease;
}

.inmovilla-button__wrap span:first-child {
	position: relative;
}

.inmovilla-button:hover .inmovilla-button__wrap span:first-child {
	transform: translateY(-150%);
}

.inmovilla-button__wrap span:last-child {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
}

.inmovilla-button:hover .inmovilla-button__wrap span:last-child {
	top: 50%;
	transform: translateY(-50%);
}

.inmovilla-button--secondary {
	background: transparent;
	color: var(--inmovilla-text);
	border: 1px solid rgba(0, 0, 0, 0.12);
	padding: 14px 34px;
}

/* La secundaria ("Quitar filtros") revela un círculo rojo en vez del navy
 * de la primaria, y el texto pasa a blanco para leerse bien encima. */
.inmovilla-button--secondary::before {
	background-color: var(--inmovilla-primary);
}

.inmovilla-button--secondary:hover {
	color: #fff;
	border-color: var(--inmovilla-primary);
}

/* Réplica del buscador de referencia en móvil: una sola rejilla compacta
 * con líneas finas entre celdas (en vez de una tarjeta por campo) y sin
 * la etiqueta pequeña encima de cada campo — el propio <select>/<input>
 * ya muestra su valor (o su placeholder) como único texto de la fila,
 * igual que en la referencia ("En venta", "Tipo de propiedad"…). La
 * etiqueta sigue en el HTML (accesibilidad/lectores de pantalla), solo
 * se oculta visualmente. Este bloque va DESPUÉS de todas las reglas base
 * que pisa (label, select/input, amenities, acciones, botón) para
 * ganarles el empate de especificidad por orden de aparición. */
@media (max-width: 767px) {
	.inmovilla-filters {
		background: transparent;
		border-radius: 0;
		padding: 0;
		margin: 0 -1.25rem 1.5rem;
	}

	/* ".inmovilla-filters" pierde su padding entero arriba (ver regla
	 * anterior) para que todo el buscador llegue borde a borde de la
	 * pantalla, igual que el buscador rápido de referencia
	 * (assets/css/quick-search.css) — el aire lateral lo pone el padding de
	 * cada campo/botón/fila individual, nunca un contenedor envolvente, así
	 * que no debe quedar ningún margen lateral a este nivel. La fila de
	 * "Operación" ya no es un caso aparte: se pliega en la misma rejilla con
	 * bordes que el resto de campos (ver la regla ":nth-child(odd):last-child"
	 * más abajo, que la expande a ancho completo por ser el único campo de
	 * su fila).
	 */
	.inmovilla-filters__row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
		margin-bottom: 0;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
	}

	.inmovilla-filters__row:not(.inmovilla-filters__amenities) + .inmovilla-filters__row:not(.inmovilla-filters__amenities) {
		border-top: none;
	}

	.inmovilla-filters__row:not(.inmovilla-filters__amenities):last-of-type {
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.inmovilla-filters__row:not(.inmovilla-filters__amenities) .inmovilla-field {
		padding: 0.9rem 1.25rem;
		border-right: 1px solid rgba(0, 0, 0, 0.1);
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.inmovilla-filters__row:not(.inmovilla-filters__amenities) .inmovilla-field:nth-child(2n) {
		border-right: none;
	}

	.inmovilla-filters__row:not(.inmovilla-filters__amenities):last-of-type .inmovilla-field:nth-last-child(-n+2) {
		border-bottom: none;
	}

	/* Un campo que se queda solo en su fila (Operación arriba, Zona en
	 * "Filtros adicionales") pasa a ocupar las 2 columnas en vez de dejar un
	 * hueco en blanco al lado — antes de esta regla, cualquier fila con un
	 * número impar de campos dejaba una celda vacía con borde propio. */
	.inmovilla-filters__row:not(.inmovilla-filters__amenities) .inmovilla-field:nth-child(odd):last-child {
		grid-column: 1 / -1;
		border-right: none;
	}

	/* Categorías principales simplificadas (Casa/Apartamento/Garaje/
	 * Comercial): en escritorio son botones "pill" independientes (ver
	 * reglas base más arriba), pero en móvil pasan a ser 4 celdas de una
	 * rejilla con bordes, igual que el resto del buscador — mismo criterio
	 * que el resto de este bloque, ninguna zona debe quedar con un margen
	 * lateral que no tenga ya el resto de campos. */
	.inmovilla-type-buttons {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
		margin-bottom: 0;
	}

	.inmovilla-type-button {
		flex: none;
		border: none;
		border-radius: 0;
		padding: 0.9rem 1.25rem;
		text-align: left;
		border-right: 1px solid rgba(0, 0, 0, 0.1);
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.inmovilla-type-button:nth-child(2n) {
		border-right: none;
	}

	/* Enlace "Filtros adicionales" — misma fila de ancho completo que el
	 * resto del buscador, en vez de un elemento flotante con su propio
	 * margen. Sin borde propio arriba NI abajo: el de arriba ya lo pone el
	 * borde inferior de "Garaje"/"Comercial" (la última fila de categorías,
	 * justo encima) y el de abajo, si el panel está desplegado, ya lo pone
	 * el borde superior de la primera fila de "Filtros adicionales" — un
	 * borde propio aquí duplicaba esa línea (se veía como una franja doble)
	 * en vez de una sola. */
	.inmovilla-advanced-toggle {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0.9rem 1.25rem;
	}

	/* Pega el buscador al banner de arriba: cancela el padding-top de
	 * ".inmovilla-container" (2rem), pero solo cuando el buscador es el
	 * primer elemento del contenedor — si hay un aviso "mostrando
	 * propiedades de {agente}" antes (ver archive-propiedad.php), ese
	 * aviso necesita seguir teniendo su aire normal respecto al banner. */
	.inmovilla-container > .inmovilla-filters:first-child {
		margin-top: -2rem;
	}

	.inmovilla-field select,
	.inmovilla-field input[type="number"],
	.inmovilla-zona-input {
		border: none;
		border-radius: 0;
		padding: 0;
		font-weight: 600;
	}

	.inmovilla-field input[type="number"]::placeholder,
	.inmovilla-zona-input::placeholder {
		color: var(--inmovilla-text);
		font-weight: 600;
		opacity: 1;
	}

	.inmovilla-filters__amenities {
		padding: 1rem 1.25rem 0;
	}

	.inmovilla-filters__actions {
		flex-direction: column;
		align-items: center;
		gap: 0;
		margin-top: 1.25rem;
	}

	/* Botón principal a ancho completo y sin esquinas, igual que el
	 * "BUSCAR!" de la referencia — solo dentro de este buscador, sin
	 * tocar ".inmovilla-button" en el resto del sitio (ficha de
	 * propiedad, etc.), gracias al selector con ".inmovilla-filters__actions"
	 * delante. */
	.inmovilla-filters__actions .inmovilla-button {
		width: 100%;
		border-radius: 0;
		padding: 16px 20px;
		text-transform: uppercase;
		background: var(--inmovilla-text);
	}

	.inmovilla-filters__actions .inmovilla-button::before {
		background-color: var(--inmovilla-primary);
	}

	.inmovilla-filters__actions .inmovilla-button--secondary {
		width: auto;
		margin-top: 12px;
		background: transparent;
		border: none;
		padding: 4px;
		font-size: 0.85rem;
		font-weight: 500;
		text-decoration: underline;
		text-transform: none;
	}

	.inmovilla-filters__actions .inmovilla-button--secondary::before {
		content: none;
	}

	/* Sugerencias de "Zona": en vez de quedar encajonada en la mitad de
	 * columna donde vive el campo (ver ".inmovilla-field--zona" arriba),
	 * la lista llega borde a borde de la pantalla igual que el resto del
	 * buscador — el "left"/"width" reales los calcula
	 * assets/js/frontend.js:positionZonaList() en cada apertura. La
	 * ciudad de cada sugerencia pasa a ir debajo del nombre de la zona
	 * (en pequeño) en vez de al lado, para que quepa cómodamente a este
	 * ancho de columna. */
	.inmovilla-zona-suggestions {
		border-radius: 0;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
	}

	.inmovilla-zona-option {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		padding: 12px 1.25rem;
	}

	.inmovilla-zona-option-sublabel {
		font-size: 0.72rem;
	}
}

/* --- Resultados --- */

.inmovilla-results-count {
	color: var(--inmovilla-muted);
	margin-bottom: 1rem;
}

/* Barra "N propiedades encontradas" + "Ordenar por" (orden por precio). */
.inmovilla-results-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: 1rem;
}

.inmovilla-results-bar .inmovilla-results-count {
	margin-bottom: 0;
}

.inmovilla-sort {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-size: 0.9rem;
	color: var(--inmovilla-muted);
}

.inmovilla-sort__select {
	appearance: none;
	-webkit-appearance: none;
	min-width: 230px;
	padding: 0.55rem 2.4rem 0.55rem 1rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--inmovilla-radius-pill);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23171b2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 14px;
	font-family: var(--inmovilla-font);
	font-size: 0.9rem;
	color: var(--inmovilla-text);
	cursor: pointer;
}

.inmovilla-sort__select:focus {
	outline: 2px solid var(--inmovilla-primary);
	outline-offset: 2px;
}

@media (max-width: 575px) {
	.inmovilla-sort {
		width: 100%;
	}

	.inmovilla-sort__select {
		flex: 1;
		min-width: 0;
	}
}

.inmovilla-no-results {
	padding: 2rem;
	text-align: center;
	background: var(--inmovilla-divider);
	border-radius: var(--inmovilla-radius);
}

/* Página /lista-de-deseos/ (ver templates/page-wishlist.php). */
.inmovilla-wishlist-loading {
	padding: 3rem 2rem;
	text-align: center;
	color: var(--inmovilla-muted);
}

.inmovilla-wishlist-empty {
	padding: 3rem 2rem;
	text-align: center;
	background: var(--inmovilla-divider);
	border-radius: var(--inmovilla-radius);
}

.inmovilla-wishlist-empty p {
	margin: 0 0 1.25rem;
	color: var(--inmovilla-muted);
}

/* Nº de columnas de escritorio elegible desde Ajustes → Inmovilla Connector
 * → "Buscador de propiedades" (ver Inmovilla_Connector_Settings::get_grid_columns()
 * y su "style" inline en archive-propiedad.php) — "3" es solo el valor de
 * reserva si esa variable no llegara a estar puesta por lo que sea. En
 * tablet, "min(...,2)" respeta lo elegido cuando ya es 1 ó 2, pero nunca
 * deja pasar de 2 aunque en escritorio se hayan elegido 3 ó 4 columnas —
 * y en móvil siempre es 1, elijas lo que elijas, para que nunca se rompa
 * la adaptación a cada tamaño de pantalla. */
.inmovilla-grid {
	display: grid;
	grid-template-columns: repeat(var(--inmovilla-grid-cols, 3), 1fr);
	gap: 1.5rem;
}

@media (max-width: 991px) {
	.inmovilla-grid {
		grid-template-columns: repeat(min(var(--inmovilla-grid-cols, 3), 2), 1fr);
	}
}

@media (max-width: 767px) {
	.inmovilla-grid {
		grid-template-columns: repeat(1, 1fr);
		gap: 1rem;
	}
}

/* Insignias tipo "pill", igual que .property-block_one-title/-off — usadas
 * en la ficha individual (single-propiedad.php); los cards del buscador
 * reutilizan el widget "Cuadrícula de propiedades" y su propio
 * .inmovilla-property-card__badge (ver elementor-widgets.css). */
.inmovilla-badge {
	position: absolute;
	left: 15px;
	top: 15px;
	z-index: 1;
	padding: 1px 15px 2px;
	font-size: 0.78rem;
	font-weight: 600;
	border-radius: var(--inmovilla-radius-pill);
	color: #fff;
	background: var(--inmovilla-primary);
}

/* Reservada en Inmovilla (azul REMAX); si también es destacada, "Destacada" baja debajo. */
.inmovilla-badge.inmovilla-badge--reservado {
	background: var(--remax-blue, #0c2749);
	color: #fff;
}

.inmovilla-badge--below {
	top: 48px;
}

/* --- Paginación --- */

.inmovilla-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 2rem;
	justify-content: center;
}

.inmovilla-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.6rem;
	border-radius: var(--inmovilla-radius-pill);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--inmovilla-text);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
}

.inmovilla-pagination .page-numbers.current {
	background: var(--inmovilla-primary);
	border-color: var(--inmovilla-primary);
	color: #fff;
}

/* --- Ficha de propiedad (rediseño Fase 9 — pixel-parity con la página
 * real "Property" de Palace: wp-content/themes/palace/single-property.php
 * + wp-content/plugins/palace-core/elementor/property_material.php, ver
 * templates/single-propiedad.php para el mapeo exacto de cada sección a
 * su Style de origen (1-6; Floor Plans/Video se omiten por no existir
 * ese dato en la API de Inmovilla). --- */

/* Mismos valores reales que ".page-title" de Palace (style.css:4733-4826)
 * para la imagen de fondo: no se repite, ancla abajo-centro y a su tamaño
 * natural (no la estira ni la recorta a pantalla completa) — el color
 * sólido de siempre se queda debajo/alrededor como base.
 *
 * ".inmovilla-banner"/"__breadcrumb" son el mismo estilo pero genérico
 * (templates/parts/page-banner.php), reutilizado en plantillas que no
 * tienen su propio banner "de ficha" (agente, buscador de propiedades) —
 * mismas reglas que "__page-title"/"__breadcrumb" de abajo, sin duplicar
 * declaraciones. */
/* ".inmovilla-wrap" reserva 110px arriba (ver su regla base más arriba) para
 * que la cabecera "position:absolute" del theme no tape el contenido — pero
 * en las plantillas que ya llevan el banner azul de abajo delante (ficha de
 * propiedad, ficha de agente, buscador de propiedades) ese banner es quien
 * se encarga de dejar sitio para la cabecera (con su propio padding, ver
 * más abajo), así que la reserva de ".inmovilla-wrap" sobra aquí y solo
 * añadiría un hueco doble. */
body.single-propiedad .inmovilla-wrap,
body.single-equipo .inmovilla-wrap,
body.post-type-archive-propiedad .inmovilla-wrap {
	padding-top: 0;
}

.inmovilla-property-detail__page-title,
.inmovilla-banner {
	position: relative;
	text-align: center;
	/* La cabecera real es "position:absolute" por encima de los 1023px (ver
	 * responsive.css:461-464, donde pasa a "relative" por debajo de ese
	 * ancho) y se superpone a este banner en vez de empujarlo. Su contenido
	 * visible (logo/menú) mide 112px de alto -- comprobado en el propio
	 * DOM, no los 167px de ".header-lower" (que trae de más debajo del logo,
	 * sin nada dibujado ahí) — 130px arriba deja un margen pequeño de sobra
	 * sin necesidad de calcar el hueco tan grande (220px/160px) que usa
	 * Palace en su propio ".page-title" (style.css:4736), que es más alto
	 * de lo estrictamente necesario solo por estética de ese theme. */
	padding: 130px 0 60px;
	background-color: var(--inmovilla-badge-secondary-bg);
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: auto;
}

/* ".inmovilla-property-detail__page-title" por separado (no en la regla de
 * arriba, que sigue igual para ".inmovilla-banner"): su fondo ahora es una
 * foto real de la propiedad, no el gráfico decorativo genérico de Palace
 * (pensado para "auto"/anclado abajo) — una foto necesita cubrir todo el
 * banner de borde a borde. Misma capa oscura de abajo ya se encarga de que
 * el texto blanco se siga leyendo bien encima de cualquier foto. */
.inmovilla-property-detail__page-title {
	background-position: center center;
	background-size: cover;
}

/* Oscurece la imagen de fondo (nunca el archivo original: solo una capa
 * semitransparente por encima) para que el título/breadcrumb en blanco de
 * abajo se lean bien sin perder la imagen — a petición del cliente. */
.inmovilla-property-detail__page-title::before,
.inmovilla-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(10, 14, 26, 0.45);
	pointer-events: none;
}

.inmovilla-property-detail__page-title .inmovilla-container,
.inmovilla-banner .inmovilla-container {
	position: relative;
	z-index: 1;
}

/* Mismo punto de quiebre real que la cabecera (antes 1023px — ver
 * responsive.css:443/461-464 — ampliado a 1700px vía Additional CSS del
 * Customizer para adelantar el menú "hamburguesa" y evitar que el menú
 * completo se partiera en 2 filas en portátiles/tablets grandes, donde el
 * menú de 8 elementos + los iconos ya no cabían en una sola fila). Por
 * debajo de ese ancho la cabecera ya no se superpone a este banner (vuelve
 * a "position:relative"), así que no hace falta ningún hueco de sobra para
 * el logo/menú (vuelve al tamaño compacto original). */
@media (max-width: 1700px) {
	.inmovilla-property-detail__page-title,
	.inmovilla-banner {
		padding: 60px 0 50px;
	}
}

.inmovilla-property-detail__page-title h1,
.inmovilla-banner h1 {
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
	text-transform: uppercase;
}

.inmovilla-property-detail__breadcrumb,
.inmovilla-banner__breadcrumb {
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.inmovilla-property-detail__breadcrumb li,
.inmovilla-banner__breadcrumb li {
	position: relative;
	font-size: 16px;
	font-weight: 400;
	/* Blanco (no el navy de siempre): el breadcrumb va sobre la foto de
	 * fondo oscurecida del banner, no sobre el fondo claro habitual. */
	color: rgba(255, 255, 255, 0.85);
	text-transform: capitalize;
	margin-right: 15px;
	padding-right: 15px;
}

.inmovilla-property-detail__breadcrumb li::before,
.inmovilla-banner__breadcrumb li::before {
	content: "-";
	position: absolute;
	right: -6px;
	top: 0;
}

.inmovilla-property-detail__breadcrumb li:last-child,
.inmovilla-banner__breadcrumb li:last-child {
	margin-right: 0;
	padding-right: 0;
	color: rgba(255, 255, 255, 0.6);
}

.inmovilla-property-detail__breadcrumb li:last-child::before,
.inmovilla-banner__breadcrumb li:last-child::before {
	display: none;
}

.inmovilla-property-detail__breadcrumb a,
.inmovilla-banner__breadcrumb a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color 0.3s ease;
}

.inmovilla-property-detail__breadcrumb a:hover,
.inmovilla-banner__breadcrumb a:hover {
	color: var(--inmovilla-primary);
}

/* Menú rápido "Fotos/Vídeo/Tour virtual" — SOBRE la foto principal
 * (esquina inferior izquierda), calcado del de remax-islablanca.es (su
 * sitio en producción actual) — a petición del usuario, sin barra aparte
 * ni hueco en blanco entre el banner y la foto (la primera versión, una
 * franja azul marino debajo del banner, no gustó). ".hero-wrap" (no
 * ".hero") por el mismo motivo que ".hero-actions" un poco más arriba:
 * ese contenedor es el que tiene "position:relative" real, y así el menú
 * no se recorta con el "overflow:hidden" de ".hero". */
.inmovilla-property-detail__hero-quicknav {
	position: absolute;
	left: 15px;
	bottom: 15px;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.inmovilla-property-detail__hero-quicknav-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	/* Fondo oscuro semitransparente (no sólido): sobre CUALQUIER foto de
	 * fondo (clara u oscura) el texto blanco sigue leyéndose bien, igual
	 * que en la plantilla de referencia. */
	background-color: rgba(23, 27, 42, 0.55);
	backdrop-filter: blur(2px);
	cursor: pointer;
	font-family: inherit;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.inmovilla-property-detail__hero-quicknav-item,
.inmovilla-property-detail__hero-quicknav-item:link,
.inmovilla-property-detail__hero-quicknav-item:visited {
	color: #fff;
	font-weight: 600;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.inmovilla-property-detail__hero-quicknav-item svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.inmovilla-property-detail__hero-quicknav-item:hover,
.inmovilla-property-detail__hero-quicknav-item:focus {
	background-color: #fff;
	color: #171b2a;
	border-color: #fff;
}

@media (max-width: 767px) {
	.inmovilla-property-detail__hero-quicknav {
		left: 10px;
		bottom: 10px;
		gap: 6px;
	}

	.inmovilla-property-detail__hero-quicknav-item {
		padding: 7px 12px;
		font-size: 0.7rem;
	}

	.inmovilla-property-detail__hero-quicknav-item svg {
		width: 13px;
		height: 13px;
	}
}

/* Lightbox de vídeo/tour (Magnific Popup, type:'iframe') más ancho que de
 * fábrica (900px) — a petición del usuario. Acotado a
 * ".mfp-inmovilla-media" (mainClass propio, ver setupMediaLightbox() en
 * property-single.js) para no afectar al lightbox de fotos, que sí debe
 * quedarse en su ancho normal. */
.mfp-inmovilla-media .mfp-iframe-holder .mfp-content {
	max-width: min(1300px, 92vw);
}

.inmovilla-property-detail__page {
	padding: 60px 0 70px;
}

/* Contenedor más ancho que el genérico del resto del plugin (1200px) para
 * aprovechar más el lateral en pantallas grandes. Solo afecta a esta
 * página, no al buscador ni a la ficha de equipo (que siguen en 1200px). */
.inmovilla-property-detail__page-title .inmovilla-container,
.inmovilla-property-detail__page .inmovilla-container {
	max-width: 1440px;
}

.inmovilla-property-detail__row {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 40px;
	align-items: start;
}

/* min-width:0 explícito a propósito en ambas columnas: el valor por
 * defecto de un hijo de grid es min-width:auto (= el min-content de su
 * contenido), y el carrusel Swiper de la galería más abajo puede acabar
 * fijando un ancho enorme en su propio cálculo interno si el navegador no
 * tiene ya un límite claro contra el que resolver — sin este min-width:0
 * la columna de contenido (y el carrusel dentro) se infla a millones de
 * píxeles en vez de respetar la pista "2fr" del grid. */
.inmovilla-property-detail__content,
.inmovilla-property-detail__sidebar {
	min-width: 0;
}

/* Tarjeta principal: foto + meta + título + ubicación + precio + descripción. */

.inmovilla-property-detail__card {
	background-color: var(--inmovilla-bg-soft);
	border-radius: 12px;
	/* Sin padding arriba/lados a propósito: la foto principal ocupa todo
	 * el ancho de la tarjeta, hasta el borde — el padding se queda solo
	 * abajo, para el contenido de texto que viene después (que además ya
	 * tiene el suyo propio en ".inmovilla-property-detail__body"). */
	padding: 0 0 15px;
}

.inmovilla-property-detail__hero-wrap {
	position: relative;
}

.inmovilla-property-detail__hero {
	position: relative;
	overflow: hidden;
	border-radius: 12px 12px 0 0;
}

.inmovilla-property-detail__hero img {
	position: relative;
	width: 100%;
	aspect-ratio: 1170 / 490;
	object-fit: cover;
	display: block;
}

/* Lista de deseos + compartir, flotando sobre la esquina superior derecha
 * de la foto ("hero-wrap" en vez de dentro de ".hero" para que el menú de
 * compartir no se recorte con el overflow:hidden de arriba). */
.inmovilla-property-detail__hero-actions {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 5;
	display: flex;
	gap: 8px;
}

.inmovilla-property-detail__hero-actions .inmovilla-property-card__heart {
	background-color: #fff;
}

@media (max-width: 767px) {
	.inmovilla-property-detail__hero-actions {
		top: 10px;
		right: 10px;
		gap: 6px;
	}
}

.inmovilla-property-detail__body {
	position: relative;
	padding: 25px 10px;
}

.inmovilla-property-detail__meta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.inmovilla-property-detail__meta li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	margin-right: 20px;
	font-weight: 500;
	font-size: 15px;
	color: var(--inmovilla-muted);
}

.inmovilla-property-detail__meta li:last-child {
	margin-right: 0;
}

.inmovilla-property-detail__meta .inmovilla-icon {
	color: var(--inmovilla-primary);
}

/* 2 clases a propósito (no "!important"): ".inmovilla-property-detail__meta
 * li" ya es 1 clase + 1 etiqueta, más específico que esta sola clase. */
.inmovilla-property-detail__meta .inmovilla-property-detail__meta-ref {
	font-size: 14px;
	font-weight: 500;
	padding: 4px 15px;
	border-radius: 4px;
	color: #fff;
	background-color: var(--inmovilla-primary);
}

.inmovilla-property-detail__heading {
	position: relative;
	margin: 20px 0 15px;
	font-size: 32px;
	line-height: 42px;
	text-transform: uppercase;
}

.inmovilla-property-detail__location {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	color: var(--inmovilla-primary);
}

.inmovilla-property-detail__price {
	margin: 20px 0 0;
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--inmovilla-text);
}

.inmovilla-property-detail__price span {
	font-size: 1rem;
	font-weight: 400;
	opacity: 0.5;
}

.inmovilla-property-detail__price-old {
	display: block;
	font-size: 1.1rem;
	font-weight: 500;
	text-decoration: line-through;
	color: var(--inmovilla-muted);
}

.inmovilla-property-detail__description {
	margin-top: 18px;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: var(--inmovilla-muted);
}

/* Algunas descripciones reales de Inmovilla meten un bloque de viñetas
 * ("Características principales:~* Villa de lujo~* 4 dormitorios~*…") que
 * Inmovilla_Connector_Frontend::format_description() convierte en un <ul>
 * real — mismo estilo de check que el resto de listas de la ficha. */
.inmovilla-property-detail__description ul {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 4px 20px;
}

.inmovilla-property-detail__description ul li {
	position: relative;
	padding-left: 22px;
}

.inmovilla-property-detail__description ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--inmovilla-primary);
}

/* Secciones: Datos generales / Detalles / Galería / Características / Ubicación. */

.inmovilla-property-detail__section {
	margin-top: 30px;
}

.inmovilla-property-detail__subheading {
	position: relative;
	margin: 0 0 20px;
	font-size: 24px;
	line-height: 34px;
	text-transform: uppercase;
}

/* Datos generales — 3 cajas de icono (Property Material, Style 2). */

.inmovilla-property-detail__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
}

.inmovilla-property-detail__fact {
	padding: 30px 25px;
	border-radius: 8px;
	background-color: var(--inmovilla-bg-soft);
}

.inmovilla-property-detail__fact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	font-size: 24px;
	border-radius: 50px;
	color: var(--inmovilla-primary);
	background-color: rgba(235, 32, 39, 0.10);
}

.inmovilla-property-detail__fact-label {
	margin: 18px 0 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--inmovilla-text);
}

.inmovilla-property-detail__fact-value {
	margin-top: 15px;
	font-weight: 500;
	font-size: 16px;
	color: var(--inmovilla-primary);
}

/* Comodidades sin número propio (piscina, jardín, aire acondicionado…):
 * lista compacta de una sola línea por item con un único icono de check,
 * en vez de una caja grande con icono propio por comodidad — mucho menos
 * alto total y sin tener que dibujar un icono distinto por cada dato. */
.inmovilla-property-detail__amenities {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px 20px;
}

.inmovilla-property-detail__amenities li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--inmovilla-text);
}

.inmovilla-property-detail__amenities .inmovilla-icon {
	flex-shrink: 0;
	color: var(--inmovilla-primary);
}

/* Detalles de la propiedad — tabla clave:valor a 2 columnas (Style 1).
 * Palace posiciona el ":" y el valor con `position:absolute` a un `%`/px
 * fijo, lo que rompe con etiquetas de longitud real distinta ("Baños" vs
 * "Año de construcción") — en vez de copiar ese truco frágil, cada fila es
 * un flex row con las dos puntas separadas, que es robusto sin importar
 * cuánto mida la etiqueta (mismo criterio que otros widgets del plugin). */

.inmovilla-property-detail__info {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 60px;
	border-radius: 10px;
	padding: 35px 40px;
	background-color: #fff;
}

.inmovilla-property-detail__info-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.inmovilla-property-detail__info-list li {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 20px;
	font-weight: 500;
	font-size: 16px;
	color: rgba(23, 27, 42, 0.5);
}

.inmovilla-property-detail__info-list li:last-child {
	margin-bottom: 0;
}

.inmovilla-property-detail__info-label::after {
	content: ":";
}

.inmovilla-property-detail__info-value {
	color: var(--inmovilla-text);
	text-align: right;
}

/* Galería — swiper de una imagen con flechas (Style 3). */

.inmovilla-property-detail__gallery {
	position: relative;
	padding: 25px 15px;
	border-radius: 8px;
}

.inmovilla-property-detail__gallery-slider {
	position: relative;
}

.inmovilla-property-detail__gallery-image {
	border-radius: 8px;
	overflow: hidden;
}

/* 2 clases a propósito: ".elementor img{height:auto;max-width:100%}" tiene
 * la misma especificidad (1 clase + 1 etiqueta) y, si esta página se
 * cargara alguna vez junto al CSS de Elementor, ganaría por orden de carga
 * y anularía nuestro height. */
.inmovilla-property-detail__gallery .inmovilla-property-detail__gallery-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.inmovilla-property-detail__gallery-lightbox,
.inmovilla-property-detail__hero-lightbox {
	position: relative;
	display: block;
	cursor: zoom-in;
}

.inmovilla-property-detail__gallery-zoom {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: #fff;
	background-color: rgba(23, 27, 42, 0);
	opacity: 0;
	transition: background-color 0.3s ease, opacity 0.3s ease;
}

.inmovilla-property-detail__gallery-lightbox:hover .inmovilla-property-detail__gallery-zoom,
.inmovilla-property-detail__hero-lightbox:hover .inmovilla-property-detail__gallery-zoom {
	background-color: rgba(23, 27, 42, 0.35);
	opacity: 1;
}

/* Sin círculo (ni fondo ni borde): solo el icono, en la esquina superior de
 * la foto — "drop-shadow" en vez de un fondo para que se siga viendo bien
 * encima de fotos claras (cielo, fachadas blancas, etc.). */
.inmovilla-property-detail__gallery-prev,
.inmovilla-property-detail__gallery-next {
	position: absolute;
	top: 14px;
	width: 32px;
	height: 32px;
	font-size: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	color: #fff;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65));
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.3s ease;
}

.inmovilla-property-detail__gallery-prev {
	left: 14px;
}

.inmovilla-property-detail__gallery-next {
	right: 14px;
}

.inmovilla-property-detail__gallery-prev:link,
.inmovilla-property-detail__gallery-prev:visited,
.inmovilla-property-detail__gallery-next:link,
.inmovilla-property-detail__gallery-next:visited {
	color: #fff;
}

.inmovilla-property-detail__gallery-prev:hover,
.inmovilla-property-detail__gallery-prev:focus,
.inmovilla-property-detail__gallery-next:hover,
.inmovilla-property-detail__gallery-next:focus {
	color: var(--inmovilla-primary);
}

/* Planos — mismo carrusel que la galería de fotos (Property Material,
 * Style 5). A diferencia de una foto real, un plano es un dibujo técnico:
 * "object-fit: contain" con fondo blanco para no recortar ninguna cota ni
 * distorsionar el dibujo (una foto sí puede recortarse con "cover" sin
 * perder información, un plano no). 3 clases a propósito: gana con
 * seguridad a ".inmovilla-property-detail__gallery
 * .inmovilla-property-detail__gallery-image img" (object-fit:cover) sin
 * depender del orden en la hoja de estilos. */
.inmovilla-property-detail__gallery .inmovilla-property-detail__gallery-image.inmovilla-property-detail__gallery-image--plan img {
	object-fit: contain;
	background-color: #fff;
	/* Más alto que el 16/9 de una foto (aspect-ratio normal de
	 * ".…gallery-image img" arriba): un plano suele leerse mejor en un
	 * hueco más cuadrado, y a petición del usuario el texto/las cotas se
	 * veían demasiado pequeños en el recuadro estrecho de antes. */
	aspect-ratio: 4 / 3;
}

/* Ubicación — mapa real (coordenadas reales de Inmovilla), sin API key
 * (Style 6, iframe simple). El filtro grayscale que llevaba antes (para
 * calcar el original de Palace) se quita a petición: se ve con los colores
 * reales del mapa. */

.inmovilla-property-detail__map {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}

.inmovilla-property-detail__map iframe {
	position: relative;
	display: block;
	width: 100%;
	height: 400px;
	border: 0;
	/* Interactivo a propósito: se permite arrastrar/hacer zoom con el
	 * mapa. La chincheta la dibuja el propio Google dentro del iframe
	 * ("q=lat,lng" en vez de "ll=", ver single-propiedad.php) precisamente
	 * para que se quede siempre sobre la ubicación real al arrastrar —
	 * un icono propio superpuesto encima del iframe no podría, porque
	 * quedaría fijo en el centro de la PANTALLA, no de las coordenadas. */
}

/* Enlace propio "Ver en Google Maps": el botón "Abrir en Maps" que el
 * propio Google añade a los mapas sin clave de API abre una vista centrada
 * en el punto de partida, no necesariamente con una chincheta marcada — por
 * eso este enlace propio sigue siendo el que hay que usar para abrir la
 * ubicación exacta en Maps de verdad. Usa el formato universal de Google
 * Maps para marcar una ubicación exacta por coordenadas
 * (maps/search/?api=1&query=lat,lng, ver single-propiedad.php),
 * pensado precisamente para enlazar desde fuera con un pin real. Vive FUERA
 * de ".inmovilla-property-detail__map" (no superpuesto encima del iframe)
 * a propósito: al ser el mapa interactivo, cualquier posición superpuesta
 * puede acabar coincidiendo con un icono de "Point of Interest" real del
 * propio mapa (restaurantes, hoteles…) al arrastrar — así nunca se solapa
 * con nada, se mueva el mapa a donde se mueva. */
.inmovilla-property-detail__map-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding: 8px 14px;
	border-radius: 50px;
	background-color: #fff;
	color: var(--inmovilla-text);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: color 0.3s ease;
}

.inmovilla-property-detail__map-link:hover {
	color: var(--inmovilla-primary);
}

.inmovilla-property-detail__map-link .inmovilla-icon svg {
	width: 14px;
	height: 14px;
}

/* Vídeo / tour virtual — enlace real editable a mano (Style 7). */

.inmovilla-property-detail__media {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.inmovilla-property-detail__media-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 50px;
	background-color: var(--inmovilla-bg-soft);
	transition: all 0.3s ease;
}

.inmovilla-property-detail__media-link,
.inmovilla-property-detail__media-link:link,
.inmovilla-property-detail__media-link:visited {
	color: var(--inmovilla-text);
}

.inmovilla-property-detail__media-link:hover,
.inmovilla-property-detail__media-link:focus {
	color: #fff;
	background-color: var(--inmovilla-primary);
}

.inmovilla-property-detail__media-link .inmovilla-icon {
	font-size: 20px;
}

/* Sidebar — la tarjeta de agente (o la caja de contacto de respaldo) y la
 * cajita de "Referencia" se quedan fijas juntas como un solo bloque al
 * hacer scroll — ver el "sticky" manual en property-single.js (real
 * position:sticky no funciona en NINGUNA página de este theme: su propio
 * .page-wrapper lleva overflow:hidden, lo que rompe sticky por spec). El
 * "position:sticky" de aquí es solo un fallback inofensivo por si algún
 * día cambia el markup del theme. */
.inmovilla-property-detail__sticky-group {
	position: sticky;
	top: 110px;
	z-index: 10;
}

/* Bloque-resumen (precio + dormitorios/baños/m² útiles/parcela + botón del
 * dossier), encima de la tarjeta de agente dentro del mismo grupo sticky —
 * misma tarjeta blanca con borde que ".inmovilla-property-detail__agent"
 * de abajo, para que ambas lean como un único bloque coherente. */
.inmovilla-property-detail__summary {
	padding: 25px;
	border-radius: 12px;
	border: 1px solid rgba(23, 27, 42, 0.10);
	margin-bottom: 25px;
	background-color: #fff;
}

.inmovilla-property-detail__summary-price {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(23, 27, 42, 0.10);
}

.inmovilla-property-detail__summary-label {
	display: block;
	font-size: 0.78rem;
	color: var(--inmovilla-muted);
	margin-bottom: 3px;
}

.inmovilla-property-detail__summary-price strong {
	display: block;
	font-size: 1.4rem;
	line-height: 1.2;
	color: var(--inmovilla-text);
	font-weight: 700;
}

.inmovilla-property-detail__summary-price strong span {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--inmovilla-muted);
}

/* Siempre en una única línea horizontal (nunca 2 filas), sean 4 o 5 las
 * características presentes — cada una se reparte el ancho a partes
 * iguales (flex:1) en vez de envolver en una cuadrícula de 2 columnas. */
.inmovilla-property-detail__summary-grid {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 22px;
}

.inmovilla-property-detail__summary-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	min-width: 0;
	flex: 1 1 0;
}

.inmovilla-property-detail__summary-item > div {
	min-width: 0;
	width: 100%;
}

.inmovilla-property-detail__summary-item .inmovilla-icon {
	flex-shrink: 0;
	color: var(--inmovilla-primary);
	font-size: 18px;
}

/* "Baños" usa el glifo real de la fuente icomoon de Palace (igual que la
 * tarjeta de propiedad) en vez de un SVG propio — mismo tamaño/color que
 * el resto de iconos de este bloque para que no desentone. */
.inmovilla-property-detail__summary-item .inmovilla-pf-icon {
	flex-shrink: 0;
	color: var(--inmovilla-primary);
	font-size: 18px;
	font-weight: 700;
}

.inmovilla-property-detail__summary-item .inmovilla-property-detail__summary-label {
	font-size: 0.7rem;
	line-height: 1.15;
}

.inmovilla-property-detail__summary-value {
	display: block;
	font-weight: 700;
	color: var(--inmovilla-text);
	font-size: 0.85rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.inmovilla-property-detail__summary-dossier {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 20px;
	border-radius: 4px;
	background-color: var(--inmovilla-text);
	transition: background-color 0.3s ease;
}

.inmovilla-property-detail__summary-dossier,
.inmovilla-property-detail__summary-dossier:link,
.inmovilla-property-detail__summary-dossier:visited {
	color: #fff;
	font-weight: 600;
	font-size: 0.9rem;
}

.inmovilla-property-detail__summary-dossier:hover,
.inmovilla-property-detail__summary-dossier:focus {
	background-color: var(--inmovilla-primary);
	color: #fff;
}

/* Segundo botón de descarga ("Descargar escaparate PDF"), debajo del
 * dossier — mismo tamaño/forma que el dossier pero en contorno (no
 * relleno) para marcar cuál es la acción principal sin quitarle
 * protagonismo a esta segunda opción. */
.inmovilla-property-detail__escaparate-wrap {
	position: relative;
	margin-top: 10px;
}

.inmovilla-property-detail__summary-escaparate {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 13px 20px;
	border-radius: 4px;
	border: 1.5px solid var(--inmovilla-text);
	background-color: transparent;
	cursor: pointer;
	font-family: inherit;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.inmovilla-property-detail__summary-escaparate {
	color: var(--inmovilla-text);
	font-weight: 600;
	font-size: 0.9rem;
}

.inmovilla-property-detail__summary-escaparate:hover,
.inmovilla-property-detail__summary-escaparate:focus,
.inmovilla-property-detail__summary-escaparate[aria-expanded="true"] {
	background-color: var(--inmovilla-text);
	color: #fff;
}

/* Menú desplegable con las 2 opciones de formato — oculto por defecto
 * (ver property-single.js: se abre/cierra al pulsar el botón de arriba,
 * no con :hover, para que funcione igual de bien con el móvil). */
.inmovilla-property-detail__escaparate-menu {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	z-index: 20;
	background-color: #fff;
	border: 1px solid rgba(23, 27, 42, 0.1);
	border-radius: 4px;
	box-shadow: 0 10px 25px rgba(23, 27, 42, 0.12);
	overflow: hidden;
}

.inmovilla-property-detail__escaparate-menu.is-open {
	display: block;
}

.inmovilla-property-detail__escaparate-menu a {
	display: block;
	padding: 12px 16px;
	color: var(--inmovilla-text);
	font-weight: 500;
	font-size: 0.88rem;
}

.inmovilla-property-detail__escaparate-menu a + a {
	border-top: 1px solid rgba(23, 27, 42, 0.08);
}

.inmovilla-property-detail__escaparate-menu a:hover,
.inmovilla-property-detail__escaparate-menu a:focus {
	background-color: rgba(23, 27, 42, 0.05);
	color: var(--inmovilla-primary);
}

/* Tarjeta de agente real (equivalente al widget "Palace: About Me", pero
 * enlazando a la ficha real del miembro de equipo). */

.inmovilla-property-detail__agent {
	text-align: center;
	padding: 22px 20px;
	border-radius: 12px;
	border: 1px solid rgba(23, 27, 42, 0.10);
	margin-bottom: 20px;
	background-color: #fff;
}

.inmovilla-property-detail__agent-photo {
	position: relative;
	width: 84px;
	height: 84px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 50%;
	background-color: var(--inmovilla-badge-secondary-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	color: var(--inmovilla-muted);
}

/* 2 clases a propósito, mismo motivo que el resto de fotos circulares del
 * plugin (ver .inmovilla-team-card__image img). */
.inmovilla-property-detail__agent .inmovilla-property-detail__agent-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.inmovilla-property-detail__agent-name {
	margin: 12px 0 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--inmovilla-text);
}

.inmovilla-property-detail__agent-role {
	margin-top: 2px;
	font-size: 0.85rem;
	font-weight: 500;
	opacity: 0.7;
}

.inmovilla-property-detail__agent-bio {
	margin-top: 8px;
	font-size: 0.8rem;
	line-height: 1.5;
	opacity: 0.7;
}

/* Botón "Quiero más información" — mismos valores reales que el botón
 * "submit now" del formulario de Palace (.message-form .form-group
 * button, style.css:6437-6493): padding 16px 35px, pill, color sólido con
 * inversión de color al hover. Es un <button> (antes era un <a href="mailto:">),
 * de ahí el reset de estilos nativos de <button> (border/cursor/font/width). */
.inmovilla-property-detail__agent-contact {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
	padding: 12px 28px;
	border: 0;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 50px;
	background-color: var(--inmovilla-primary);
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.inmovilla-property-detail__agent-contact,
.inmovilla-property-detail__agent-contact:link,
.inmovilla-property-detail__agent-contact:visited {
	color: #fff;
}

.inmovilla-property-detail__agent-contact:hover,
.inmovilla-property-detail__agent-contact:focus {
	color: #fff;
	background-color: var(--inmovilla-text);
}

.inmovilla-property-detail__agent-link {
	display: block;
	margin-top: 10px;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.inmovilla-property-detail__agent-link:link,
.inmovilla-property-detail__agent-link:visited,
.inmovilla-property-detail__agent-link:hover,
.inmovilla-property-detail__agent-link:focus {
	color: var(--inmovilla-primary);
}

/* Botones de contacto rápido (WhatsApp / llamar) de la barra lateral —
 * mismo pill/padding que .inmovilla-property-detail__agent-contact, pero
 * dos botones lado a lado (se apilan solos si no caben, ver flex-wrap). El
 * verde de WhatsApp es intencional y distinto del rojo de marca: es el
 * color universalmente reconocible de ese botón en cualquier web, igual
 * que el logo del icono. */
.inmovilla-property-detail__contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

/* Mismo efecto "círculo que se desliza + texto que sube y se sustituye"
 * que .inmovilla-button (ver más arriba) — el icono se queda quieto fuera
 * del <span class="inmovilla-button__wrap">, solo el texto hace el flip. */
.inmovilla-property-detail__contact-btn {
	position: relative;
	overflow: hidden;
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 20px;
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: var(--inmovilla-radius-pill);
	white-space: nowrap;
}

.inmovilla-property-detail__contact-btn .inmovilla-icon {
	position: relative;
	z-index: 2;
}

.inmovilla-property-detail__contact-btn .inmovilla-icon svg {
	width: 18px;
	height: 18px;
}

.inmovilla-property-detail__contact-btn::before {
	content: '';
	position: absolute;
	z-index: 1;
	top: -200%;
	left: 50%;
	width: 200%;
	height: 200%;
	border-radius: 50%;
	background-color: var(--inmovilla-text);
	transform: translateX(-50%);
	transition: top 0.8s ease;
}

.inmovilla-property-detail__contact-btn:hover::before {
	top: -40%;
}

.inmovilla-property-detail__contact-btn:hover .inmovilla-button__wrap span:first-child {
	transform: translateY(-150%);
}

.inmovilla-property-detail__contact-btn:hover .inmovilla-button__wrap span:last-child {
	top: 50%;
	transform: translateY(-50%);
}

.inmovilla-property-detail__contact-btn--whatsapp,
.inmovilla-property-detail__contact-btn--whatsapp:link,
.inmovilla-property-detail__contact-btn--whatsapp:visited {
	background-color: #25d366;
	color: #fff;
}

.inmovilla-property-detail__contact-btn--whatsapp:hover,
.inmovilla-property-detail__contact-btn--whatsapp:focus {
	color: #fff;
}

.inmovilla-property-detail__contact-btn--phone,
.inmovilla-property-detail__contact-btn--phone:link,
.inmovilla-property-detail__contact-btn--phone:visited {
	background-color: var(--inmovilla-primary);
	color: #fff;
}

.inmovilla-property-detail__contact-btn--phone:hover,
.inmovilla-property-detail__contact-btn--phone:focus {
	color: #fff;
}

.inmovilla-property-detail__ref-box {
	background: var(--inmovilla-divider);
	border-radius: var(--inmovilla-radius);
	padding: 1.25rem 1.5rem;
}

.inmovilla-property-detail__ref {
	margin: 0;
	color: var(--inmovilla-muted);
}

.inmovilla-contact-box {
	background: var(--inmovilla-divider);
	border-radius: var(--inmovilla-radius);
	padding: 1.5rem;
	margin-bottom: 25px;
}

.inmovilla-contact-box h2 {
	margin-top: 0;
	font-size: 1.15rem;
}

.inmovilla-contact-box__ref {
	color: var(--inmovilla-muted);
}

.inmovilla-contact-box__agent-label {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--inmovilla-muted);
}

.inmovilla-contact-box__agent {
	margin: 0.15rem 0 1.1rem;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--inmovilla-primary);
	padding-bottom: 1.1rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* --- Responsive --- */

/* Portátiles con poca altura de pantalla (1366×768 y similares, restando
 * la barra de tareas/UI del navegador quedan con bastante menos alto útil
 * que 768px reales): el grupo sticky del lateral (resumen + tarjeta de
 * agente + referencia) es más alto que ese hueco disponible con los
 * tamaños normales de escritorio. En vez de darle scroll propio al bloque
 * (se probó y se quitó — capturaba la rueda del ratón y generaba un
 * "tembleque" al recalcularse en cada scroll, ver property-single.js), se
 * recorta el propio contenido: paddings, márgenes y la foto del agente más
 * pequeños para que quepa entero sin necesitar ningún truco de JS más allá
 * de bajar el "top" del sticky (que ya hace setupStickyAgent()). Solo
 * aplica en escritorio (min-width acorde al breakpoint de más abajo): en
 * tablet/móvil el sticky ya está desactivado y el tamaño normal no
 * molesta. */
@media (min-width: 992px) and (max-height: 820px) {
	.inmovilla-property-detail__summary {
		padding: 16px;
		margin-bottom: 14px;
	}

	.inmovilla-property-detail__summary-price {
		padding-bottom: 12px;
		margin-bottom: 12px;
	}

	.inmovilla-property-detail__summary-grid {
		gap: 10px;
		margin-bottom: 12px;
	}

	/* El precio y la fila de características (icono+número+etiqueta) son lo
	 * que más alto hace el bloque-resumen — se encogen aquí (además de los
	 * paddings/márgenes de arriba) para que quepa entero en portátiles de
	 * poca altura sin que setupStickyAgent() (property-single.js) tenga que
	 * bajar tanto el "top" que el precio acabe quedando tapado detrás de la
	 * cabecera fija del sitio. */
	.inmovilla-property-detail__summary-price strong {
		font-size: 1.15rem;
	}

	.inmovilla-property-detail__summary-item .inmovilla-icon,
	.inmovilla-property-detail__summary-item .inmovilla-pf-icon {
		font-size: 15px;
	}

	.inmovilla-property-detail__summary-value {
		font-size: 0.78rem;
	}

	.inmovilla-property-detail__summary-item .inmovilla-property-detail__summary-label {
		font-size: 0.64rem;
	}

	.inmovilla-property-detail__summary-dossier {
		padding: 10px 20px;
	}

	.inmovilla-property-detail__summary-escaparate {
		padding: 9px 20px;
	}

	.inmovilla-property-detail__agent {
		padding: 14px 16px;
		margin-bottom: 12px;
	}

	.inmovilla-property-detail__agent-photo {
		width: 60px;
		height: 60px;
		font-size: 24px;
	}

	.inmovilla-property-detail__agent-name {
		margin-top: 8px;
	}

	.inmovilla-property-detail__agent-bio {
		margin-top: 4px;
	}

	.inmovilla-property-detail__agent-contact {
		margin-top: 8px;
		padding: 10px 24px;
	}

	.inmovilla-property-detail__agent-link {
		margin-top: 6px;
	}

	.inmovilla-property-detail__ref-box {
		padding: 0.85rem 1.25rem;
	}
}

/* Mismo punto de quiebre que Bootstrap "lg" (el grid real de Palace: la
 * columna de contenido es col-lg-8/col-md-12 y cada mitad de la tabla de
 * detalles es col-lg-6/col-md-12 — ambas se apilan exactamente aquí). */
@media (max-width: 991px) {
	.inmovilla-property-detail__row {
		grid-template-columns: 1fr;
	}

	.inmovilla-property-detail__info {
		grid-template-columns: 1fr;
		row-gap: 20px;
	}

	.inmovilla-property-detail__sticky-group {
		position: static;
	}
}

@media (max-width: 767px) {
	.inmovilla-property-detail__page {
		padding: 40px 0 50px;
	}

	/* Galería: a pantalla completa (sin los márgenes laterales de la página
	 * ni el padding propio del bloque) y algo más alta, para que la foto se
	 * vea grande de un vistazo — los -20px cancelan el padding lateral de
	 * ".inmovilla-container" (2rem 1.25rem 4rem, frontend.css:68-72). */
	.inmovilla-property-detail__gallery {
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 0;
		padding-right: 0;
		border-radius: 0;
	}

	.inmovilla-property-detail__gallery .inmovilla-property-detail__gallery-image {
		border-radius: 0;
	}

	.inmovilla-property-detail__gallery .inmovilla-property-detail__gallery-image img {
		aspect-ratio: 4 / 3;
	}

	/* Foto principal: mismo criterio que la galería de arriba — a pantalla
	 * completa (".inmovilla-property-detail__card" ya no tiene padding
	 * lateral en móvil, así que solo hace falta cancelar el de
	 * ".inmovilla-container") y algo más alta. La sangría va también en
	 * "hero-wrap" (no solo en "hero"): los botones de deseos/compartir se
	 * posicionan en absoluto respecto a "hero-wrap", así que si solo se
	 * sangra "hero" quedan anclados al ancho antiguo (sin sangrar) y se ven
	 * separados de la esquina real de la foto en vez de pegados a ella. */
	.inmovilla-property-detail__hero-wrap {
		margin-left: -20px;
		margin-right: -20px;
	}

	.inmovilla-property-detail__hero {
		border-radius: 0;
	}

	.inmovilla-property-detail__hero img {
		aspect-ratio: 4 / 3;
	}

	/* Datos generales: en escritorio el icono/etiqueta/valor quedan a la
	 * izquierda de la caja sin problema (cajas anchas, varias por fila);
	 * en móvil, con una sola caja por fila y bastante ancho libre, ese
	 * mismo alineado a la izquierda se ve descompensado — se centra solo
	 * aquí. */
	.inmovilla-property-detail__fact {
		text-align: center;
	}

	.inmovilla-property-detail__card {
		padding: 0 0 15px;
		background: none;
	}

	.inmovilla-property-detail__heading {
		font-size: 22px;
		line-height: 32px;
	}

	.inmovilla-property-detail__meta li {
		font-size: 14px;
		margin-bottom: 6px;
	}
}

@media (max-width: 479px) {
	.inmovilla-property-detail__info {
		padding: 25px 20px;
	}
}

/* Panel de galería propio para móvil (ver openMobileGallery() en
 * property-single.js) — pantalla completa, imagen grande (Swiper, igual que
 * el resto del sitio), flechas pequeñas con nuestro propio icono y una tira
 * de miniaturas abajo para saltar directamente a cualquier foto. Sustituye
 * a Magnific Popup solo en móvil; en escritorio no se crea nunca este
 * marcado (el JS solo lo monta si isMobileViewport() da true). */
.inmovilla-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	background: #000;
}

.inmovilla-lightbox__main {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.inmovilla-lightbox__main .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.inmovilla-lightbox__main img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.inmovilla-lightbox__close,
.inmovilla-lightbox__prev,
.inmovilla-lightbox__next {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50px;
	background-color: rgba(0, 0, 0, 0.45);
	color: #fff;
	cursor: pointer;
}

.inmovilla-lightbox__close {
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
}

.inmovilla-lightbox__close svg {
	width: 16px;
	height: 16px;
}

/* Flechas deliberadamente pequeñas (32px, antes las de Magnific Popup en su
 * variante mfp-img-mobile eran mucho más grandes) — con la tira de
 * miniaturas abajo para navegar, no necesitan ser un botón grande. */
.inmovilla-lightbox__prev,
.inmovilla-lightbox__next {
	top: 42%;
	width: 32px;
	height: 32px;
}

.inmovilla-lightbox__prev svg,
.inmovilla-lightbox__next svg {
	width: 16px;
	height: 16px;
}

.inmovilla-lightbox__prev {
	left: 10px;
}

.inmovilla-lightbox__next {
	right: 10px;
}

.inmovilla-lightbox__counter {
	position: absolute;
	top: 18px;
	left: 14px;
	z-index: 2;
	padding: 5px 12px;
	border-radius: 20px;
	background-color: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
}

.inmovilla-lightbox__thumbs {
	flex: 0 0 auto;
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	overflow-x: auto;
	background-color: #000;
	-webkit-overflow-scrolling: touch;
}

.inmovilla-lightbox__thumb {
	flex: 0 0 60px;
	width: 60px;
	height: 46px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	background: none;
	opacity: 0.5;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.inmovilla-lightbox__thumb.is-active {
	opacity: 1;
	border-color: var(--inmovilla-primary);
}

.inmovilla-lightbox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.inmovilla-agent-form {
	--inmovilla-primary: #eb2027;
	--inmovilla-text: #171b2a;
	--inmovilla-muted: rgba(23, 27, 42, 0.7);
	--inmovilla-bg-soft: #f9f9f9;
	--inmovilla-radius-pill: 50px;
	--inmovilla-font: "Plus Jakarta Sans", sans-serif;
}

.inmovilla-agent-form__row {
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
}

.inmovilla-agent-form__field {
	flex: 1 1 0;
	margin-bottom: 1rem;
}

.inmovilla-agent-form__row .inmovilla-agent-form__field {
	margin-bottom: 0;
}

.inmovilla-agent-form__field--full {
	flex-basis: 100%;
}

.inmovilla-agent-form__field input[type="text"],
.inmovilla-agent-form__field input[type="email"],
.inmovilla-agent-form__field input[type="tel"],
.inmovilla-agent-form__field textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	background: #fff;
	font-family: var(--inmovilla-font);
	font-size: 0.95rem;
	color: var(--inmovilla-text);
}

.inmovilla-agent-form__field textarea {
	min-height: 120px;
	resize: vertical;
}

.inmovilla-agent-form__file-label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: var(--inmovilla-text);
}

.inmovilla-agent-form__dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2.5rem 1.5rem;
	border: 2px dashed rgba(0, 0, 0, 0.18);
	border-radius: 12px;
	background: var(--inmovilla-bg-soft);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.inmovilla-agent-form__dropzone:hover,
.inmovilla-agent-form__dropzone.is-dragover {
	border-color: var(--inmovilla-primary);
	background: #fff;
}

.inmovilla-agent-form__dropzone.has-file {
	border-style: solid;
	border-color: var(--inmovilla-primary);
	background: #fff;
}

.inmovilla-agent-form__dropzone-icon {
	margin-bottom: 0.75rem;
	font-size: 2rem;
	color: var(--inmovilla-primary);
}

.inmovilla-agent-form__dropzone-text {
	font-family: var(--inmovilla-font);
	font-size: 0.95rem;
	color: var(--inmovilla-text);
}

.inmovilla-agent-form__dropzone-hint {
	margin-top: 0.35rem;
	font-size: 0.8rem;
	color: var(--inmovilla-muted);
}

.inmovilla-agent-form__dropzone-filename {
	margin-top: 0.75rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--inmovilla-primary);
	word-break: break-all;
}

.inmovilla-agent-form__dropzone p {
	margin: 0;
}

.inmovilla-agent-form__dropzone > p {
	position: static;
	width: 100%;
	height: 100%;
}

.inmovilla-agent-form__dropzone .wpcf7-form-control-wrap {
	position: static;
	display: block;
	width: 100%;
	height: 100%;
}

.inmovilla-agent-form__dropzone input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

.inmovilla-agent-form__consent {
	margin-bottom: 1.25rem;
	font-size: 0.85rem;
	color: var(--inmovilla-muted);
}

.inmovilla-agent-form__consent a {
	color: var(--inmovilla-primary);
}

.inmovilla-agent-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	color: var(--inmovilla-primary);
}

@media (max-width: 767px) {
	.inmovilla-agent-form__row {
		flex-direction: column;
		gap: 0;
	}
}

/* Popup "Quiero más información" del sticky de agente de la ficha de
 * propiedad (templates/single-propiedad.php) — mismas variables/paleta que
 * .inmovilla-agent-form de arriba (--inmovilla-primary/--inmovilla-text/etc.),
 * reutilizadas aquí en vez de depender de que este bloque esté siempre
 * dentro de .inmovilla-property-detail (que las define a nivel de página):
 * el popup se pinta directamente sobre <body>, fuera de ese contenedor. */
.inmovilla-property-contact-modal {
	--inmovilla-primary: #eb2027;
	--inmovilla-text: #171b2a;
	--inmovilla-muted: rgba(23, 27, 42, 0.7);
	--inmovilla-font: "Plus Jakarta Sans", sans-serif;
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

/* Móvil: la barra de direcciones de Safari/Chrome se muestra/oculta sola al
 * hacer scroll, así que "100vh" (fijo, calculado sobre el viewport MÁXIMO,
 * como si la barra ya estuviera oculta) deja el popup más alto que el
 * hueco realmente visible cuando la barra está a la vista — recortando de
 * más el fondo del popup justo en el móvil, que es donde menos margen de
 * sobra hay. "100dvh" (viewport DINÁMICO, se ajusta solo) evita justo eso;
 * se declara aparte y detrás para que los navegadores que no conocen la
 * unidad "dvh" simplemente ignoren esta regla entera y se queden con el
 * "100vh" de arriba (no se puede combinar ambos en un único calc()). */
@media (max-width: 767px) {
	.inmovilla-property-contact-modal {
		padding: 12px;
	}
}

.inmovilla-property-contact-modal[hidden] {
	display: none;
}

.inmovilla-property-contact-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(23, 27, 42, 0.6);
}

.inmovilla-property-contact-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 460px;
	/* A petición del usuario: en ESCRITORIO el popup no debe scrollear
	 * ("overflow: hidden" aquí abajo, calculado para caber entero sin
	 * scroll) — pero en MÓVIL sí debe poder scrollear (demasiada variedad
	 * de alturas de pantalla real como para garantizar que quepa siempre),
	 * ver el "@media (max-width: 767px)" justo debajo de esta regla que lo
	 * sobreescribe. IMPORTANTE: ese media query tiene que venir DESPUÉS de
	 * esta regla en el propio archivo — puesto antes, el "overflow: hidden"
	 * sin condición de aquí abajo gana igualmente en móvil por venir más
	 * tarde en la cascada (misma especificidad, CSS no desempata por
	 * "@media"). */
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px); /* ver comentario en .inmovilla-property-contact-modal de arriba */
	overflow: hidden;
	background: #fff;
	border-radius: 12px;
	padding: 1.75rem 1.75rem;
	font-family: var(--inmovilla-font);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
	.inmovilla-property-contact-modal__dialog {
		overflow-y: auto;
	}

	/* Sin esto, el "::-webkit-scrollbar" GLOBAL del tema Palace (rojo y de
	 * 10px) se aplica también aquí en cuanto el contenido no cabe entero
	 * en dispositivos que sí pintan un scrollbar visible (Android con
	 * ratón/trackpad, herramientas de desarrollo…). */
	.inmovilla-property-contact-modal__dialog::-webkit-scrollbar {
		width: 6px;
	}

	.inmovilla-property-contact-modal__dialog::-webkit-scrollbar-track {
		background: transparent;
	}

	.inmovilla-property-contact-modal__dialog::-webkit-scrollbar-thumb {
		background-color: rgba(23, 27, 42, 0.15);
		border-radius: 3px;
	}
}

/* Franja roja decorativa del borde derecho — el mismo detalle que, sin
 * querer, dejaba ver el "::-webkit-scrollbar" de abajo cuando el popup
 * scrolleaba (a petición del usuario, se mantiene el detalle visual pero
 * ya no depende del scroll: ahora es un elemento fijo propio). */
.inmovilla-property-contact-modal__dialog::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 6px;
	background: var(--inmovilla-primary);
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
}

.inmovilla-property-contact-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--inmovilla-text);
	cursor: pointer;
}

.inmovilla-property-contact-modal__close svg {
	width: 18px;
	height: 18px;
}

.inmovilla-property-contact-modal__title {
	margin: 0 1.75rem 1rem 0;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--inmovilla-text);
}

/* Campos del formulario CF7 3377 (ver includes/class-cf7-ghl-bridge.php) —
 * mismo lenguaje visual que .inmovilla-agent-form de arriba (input con
 * borde suave + radio 8px), pero en columna única (no ".…__row" en fila:
 * el popup es más estrecho que el formulario grande de /contacto/). */
.inmovilla-popup-form__field {
	margin-bottom: 0.65rem;
}

.inmovilla-popup-form__field input[type="text"],
.inmovilla-popup-form__field input[type="email"],
.inmovilla-popup-form__field input[type="tel"],
.inmovilla-popup-form__field textarea {
	width: 100%;
	padding: 0.55rem 1rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	background: #fff;
	font-family: var(--inmovilla-font);
	font-size: 0.95rem;
	color: var(--inmovilla-text);
}

.inmovilla-popup-form__field textarea {
	min-height: 64px;
	resize: none;
}

.inmovilla-popup-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 0.85rem;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--inmovilla-muted);
}

.inmovilla-popup-form__consent input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 3px;
}

.inmovilla-popup-form__consent a {
	color: var(--inmovilla-primary);
}

.inmovilla-popup-form__submit-row {
	margin-top: 0.25rem;
}

.inmovilla-popup-form__submit-btn {
	display: block;
	width: 100%;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 50px;
	background-color: var(--inmovilla-primary);
	color: #fff;
	font-family: var(--inmovilla-font);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.inmovilla-popup-form__submit-btn:hover,
.inmovilla-popup-form__submit-btn:focus {
	background-color: var(--inmovilla-text);
}

.inmovilla-property-contact-modal .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	color: var(--inmovilla-primary);
}

.inmovilla-property-contact-modal .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	font-size: 0.85rem;
}

@media (max-width: 480px) {
	.inmovilla-property-contact-modal__dialog {
		padding: 1.5rem 1.1rem;
	}

	.inmovilla-property-contact-modal__title {
		margin-right: 2.1rem; /* sitio de sobra para no tocar el botón de cerrar en 2 líneas largas */
		font-size: 1.05rem;
	}

	.inmovilla-popup-form__field input[type="text"],
	.inmovilla-popup-form__field input[type="email"],
	.inmovilla-popup-form__field input[type="tel"],
	.inmovilla-popup-form__field textarea {
		padding: 0.6rem 0.85rem;
		font-size: 16px; /* <16px hace que iOS Safari haga zoom automático al enfocar el campo */
	}

	.inmovilla-popup-form__field textarea {
		min-height: 56px;
	}

	/* El propio checkbox del navegador se queda pequeño para el dedo en
	 * móvil (siguen siendo ~13px por defecto) — se agranda solo aquí. */
	.inmovilla-popup-form__consent input[type="checkbox"] {
		width: 18px;
		height: 18px;
	}
}

/* Popups "Descargar dossier PDF" (datos del interesado) y "Descargar
 * escaparate" (clave de acceso) — ver includes/class-leads.php. Reutilizan
 * el popup .inmovilla-property-contact-modal de arriba; aquí solo lo propio. */
.inmovilla-lead-modal__intro {
	margin: -0.25rem 0 1.1rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--inmovilla-muted);
}

.inmovilla-lead-modal__form .inmovilla-turnstile {
	margin: 0 0 0.85rem;
}

.inmovilla-lead-modal__error {
	margin: 0 0 0.85rem;
	padding: 0.6rem 0.85rem;
	border-radius: 8px;
	background: #fdecec;
	color: #a1161b;
	font-size: 0.85rem;
}

.inmovilla-lead-modal__error[hidden] {
	display: none;
}

.inmovilla-lead-modal__done {
	text-align: center;
}

.inmovilla-lead-modal__done .inmovilla-property-contact-modal__title {
	margin-right: 0;
}

.inmovilla-lead-modal__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0.5rem auto 1rem;
	border-radius: 50%;
	background: #eaf6ee;
	color: #1e8a4a;
}

.inmovilla-lead-modal__check svg {
	width: 28px;
	height: 28px;
}

a.inmovilla-popup-form__submit-btn,
a.inmovilla-popup-form__submit-btn:visited,
a.inmovilla-popup-form__submit-btn:hover {
	color: #fff;
	text-align: center;
	text-decoration: none;
}

.inmovilla-lead-modal__downloads {
	display: grid;
	gap: 0.6rem;
	margin-top: 0.5rem;
}

a.inmovilla-lead-modal__btn-ghost,
a.inmovilla-lead-modal__btn-ghost:visited {
	border: 1px solid var(--inmovilla-primary);
	background: #fff;
	color: var(--inmovilla-primary);
}

a.inmovilla-lead-modal__btn-ghost:hover {
	border-color: var(--inmovilla-text);
	color: #fff;
}

/* Botón del escaparate: oculto hasta que leads.js confirma que la cuenta puede verlo. */
.inmovilla-property-detail__escaparate-wrap[hidden] {
	display: none !important;
}