/* ──────────────────────────────────────────────────────────────────
   Inmoblao · Frontend público
   Portado del handoff (src/frontend.css). Clases con prefijo inmo-.
   ──────────────────────────────────────────────────────────────────
   Requiere `inmoblao.css` cargado antes (tokens + atoms).
   Todo el frontend público debe envolverse en `.inmo-public` para
   aplicar el scope del design system.
   ────────────────────────────────────────────────────────────────── */

/* ── Layout base ─────────────────────────────────────────────────── */

.inmo-public {
	background: var(--bg);
	min-height: 100vh;
}
.inmo-public-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 24px;
}

/* Reset de buttons dentro del scope public (sin el border default del navegador) */
.inmo-public button {
	border: 0;
	background: transparent;
	font: inherit;
	color: inherit;
	padding: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.inmo-public img { border: 0; }

.inmo-pub-h1 {
	font-size: 34px; font-weight: 600; letter-spacing: -0.02em;
	margin: 6px 0 0;
}
.inmo-pub-eyebrow {
	font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
	color: var(--fg-3); text-transform: uppercase;
}
.inmo-pub-hero {
	display: flex; flex-direction: column;
	gap: 4px; padding-bottom: 28px;
	border-bottom: 1px solid var(--border-subtle);
	margin-bottom: 24px;
}
.inmo-pub-hero-desc {
	margin: 8px 0 0;
	max-width: 60ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--fg-2);
}
.inmo-pub-hero-count {
	margin: 12px 0 0;
	font-size: 15.5px;
	color: var(--fg-2);
	font-weight: 500;
}
.inmo-pub-hero-count [data-inmo-total] {
	color: var(--fg);
	font-weight: 700;
	font-feature-settings: 'tnum';
}

/* Toolbar de resultados: contador + sort + view toggle. */
.inmo-pub-toolbar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--border-subtle);
	flex-wrap: wrap;
}
.inmo-pub-toolbar-left { display: flex; align-items: center; }
.inmo-pub-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inmo-pub-toolbar-sort {
	min-width: 200px;
	padding: 6px 10px;
	font-size: 13px;
}
@media ( max-width: 700px ) {
	.inmo-pub-toolbar { padding: 10px 0; }
	.inmo-pub-toolbar-sort { min-width: 160px; }
}

.inmo-pub-grid-shell {
	display: grid;
	grid-template-columns: 256px 1fr;
	gap: 40px;
	align-items: start;
}
@media ( max-width: 980px ) {
	.inmo-pub-grid-shell { grid-template-columns: 1fr; }
	.inmo-pub-filters,
	.inmo-pub-filters.inmo-filters-sticky {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

/* ── Filters sidebar ─────────────────────────────────────────────── */

.inmo-pub-filters {
	display: flex; flex-direction: column;
	gap: 24px;
	padding-right: 8px;
}
/* Filtros fijos al hacer scroll (opcional, activable en "Página de propiedades").
   Se quedan pegados arriba y, si la caja es más alta que la pantalla, hacen su
   propio scroll para poder seguir viéndolos al bajar por los resultados. */
.inmo-pub-filters.inmo-filters-sticky {
	position: sticky;
	top: 24px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 12px;
	scrollbar-width: thin;
}
.inmo-pub-filters.inmo-filters-sticky::-webkit-scrollbar { width: 8px; }
.inmo-pub-filters.inmo-filters-sticky::-webkit-scrollbar-thumb {
	background: var(--border-strong); border-radius: 4px;
}
.inmo-pub-f-section { display: flex; flex-direction: column; gap: 10px; }
.inmo-pub-f-title {
	font-size: 13px; font-weight: 600; color: var(--fg);
	letter-spacing: -0.005em;
}

.inmo-facet-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 6px;
}
.inmo-facet-list li.is-empty { opacity: 0.4; pointer-events: none; }
.inmo-facet {
	display: flex; align-items: center; gap: 10px;
	font-size: 13px; color: var(--fg-2);
	cursor: pointer;
	padding: 2px 0;
}
.inmo-facet:hover { color: var(--fg); }
.inmo-facet-lbl { flex: 1; }
.inmo-facet-n { font-size: 12px; color: var(--fg-4); }

.inmo-link-btn {
	background: transparent; border: 0; padding: 0;
	color: var(--fg-2); font-size: 13px;
	text-decoration: underline; text-decoration-color: var(--border-strong);
	text-underline-offset: 3px;
	cursor: pointer;
	font: inherit;
}
.inmo-link-btn:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ── Applied chips row ───────────────────────────────────────────── */
.inmo-pub-chips-row {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border-subtle);
}
.inmo-applied-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--r-full);
	font-size: 12px; font-weight: 500;
	color: var(--fg-2);
	cursor: pointer;
	font: inherit;
}
.inmo-applied-chip:hover { background: var(--surface-3); }
.inmo-applied-chip svg { color: var(--fg-3); }

/* ── Property card (grid) ────────────────────────────────────────── */

.inmo-pub-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.inmo-pub-cards-grid[hidden] { display: none; }
.inmo-pub-cards-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media ( max-width: 980px ) {
	.inmo-pub-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media ( max-width: 600px ) {
	.inmo-pub-cards-grid { grid-template-columns: 1fr; }
}

.inmo-pc {
	position: relative;
	display: flex; flex-direction: column;
	background: var(--surface);
	border-radius: var(--r-lg);
	transition: transform .2s ease, box-shadow .2s ease;
}
.inmo-pc:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.inmo-pc-photo {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--surface-2);
}
/* Overlay clicable que cubre toda la foto. z-index 1 para que botones (z-index 4)
   queden por encima. */
.inmo-pc-photo-link {
	position: absolute; inset: 0;
	z-index: 1;
	text-decoration: none;
}
.inmo-pc-photo-link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -3px;
}
/* Capa base (primera foto) — siempre visible. Las demás capas son zonas hover. */
.inmo-pc-photo-img {
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity .25s ease;
}
.inmo-pc-photo-img.is-base { opacity: 1; }
/* Cuando el JS activa una zona, esa capa se vuelve visible y la base se oculta. */
.inmo-pc-photo-img.is-active { opacity: 1; }
.inmo-pc-photo.has-hover-zone .inmo-pc-photo-img.is-base { opacity: 0; }

.inmo-pc-photo-grad {
	position: absolute; inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, .18) 100%);
	pointer-events: none;
}

.inmo-pc-badges {
	position: absolute; top: 12px; left: 12px;
	z-index: 3;
	display: flex; gap: 6px; align-items: center;
	pointer-events: none;
}
.inmo-pc-op {
	padding: 4px 9px;
	border-radius: var(--r-full);
	font-size: 11px; font-weight: 600;
	background: #fff;
	color: var(--fg);
	box-shadow: var(--shadow-xs);
	letter-spacing: 0.01em;
}
.inmo-pc-op-venta    { background: var(--fg); color: #fff; }
.inmo-pc-op-alquiler { background: #fff; color: var(--fg); }
.inmo-pc-op-traspaso { background: var(--accent); color: #fff; }
.inmo-pc-state {
	padding: 4px 9px;
	border-radius: var(--r-full);
	font-size: 11px; font-weight: 600;
	background: rgba(255, 255, 255, .92);
	color: var(--warning);
}
.inmo-pc-state-reservada { background: var(--warning); color: #fff; }
.inmo-pc-state-vendida,
.inmo-pc-state-alquilada { background: var(--fg); color: #fff; }
.inmo-pc-disc {
	padding: 4px 9px;
	border-radius: var(--r-full);
	font-size: 11px; font-weight: 700;
	background: var(--accent);
	color: #fff;
}

.inmo-pc-star {
	position: absolute; top: 12px; right: 12px;
	z-index: 3;
	width: 26px; height: 26px;
	background: var(--accent);
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: var(--shadow-sm);
	pointer-events: none;
}
.inmo-pc-star svg { color: #fff; }

/* Botones flotantes: posicionados DENTRO de .inmo-pc-photo, en la esquina
   inferior derecha de la FOTO (no del article entero). z-index 4 para quedar
   sobre el link overlay (z-index 1). Fondo oscuro semi-transparente con blur
   (glassmorphism) para garantizar contraste sobre fotos claras u oscuras. */
.inmo-pc-fav {
	position: absolute; bottom: 12px; right: 12px;
	z-index: 4;
	width: 34px; height: 34px;
	background: rgba(0, 0, 0, .45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 0;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	color: #ffffff;
	transition: background .15s, color .15s, transform .15s;
	cursor: pointer;
}
.inmo-pc-fav:hover {
	background: #ffffff;
	color: var(--accent);
	transform: scale(1.05);
}
.inmo-pc-fav.is-on { background: rgba(0, 0, 0, .55); color: var(--accent); }
.inmo-pc-fav.is-on svg { fill: var(--accent); }
.inmo-pc-fav.is-on:hover { background: #ffffff; }
/* Iconos blancos con stroke grueso + drop-shadow negra para que el icono
   se siga viendo claramente incluso cuando el fondo translúcido del botón
   cae sobre una zona muy clara de la foto. La sombra sigue la forma del
   SVG (no un rectángulo, como box-shadow). */
.inmo-pc-fav svg,
.inmo-pc-share svg {
	color: #ffffff;
	stroke-width: 2.5;
	filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.75 ) );
}

.inmo-pc-share {
	position: absolute; bottom: 12px; right: 54px;
	z-index: 4;
	width: 34px; height: 34px;
	background: rgba(0, 0, 0, .45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 0;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	color: #ffffff;
	cursor: pointer;
	transition: background .15s, color .15s, opacity .15s, transform .15s;
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
}
.inmo-pc:hover .inmo-pc-share,
.inmo-pc:focus-within .inmo-pc-share {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.inmo-pc-share:hover {
	background: #ffffff;
	color: var(--accent);
	transform: scale(1.05);
}

/* Defensa contra reglas residuales del antiguo .inmo-pc-cta (botón "Contactar"
   full-width que se eliminó en el rediseño del archive). */
.inmo-pc-cta,
.inmo-pd-similar-grid .inmo-pc-cta {
	background: var(--fg, #1a1a1a) !important;
	color: #ffffff !important;
}
.inmo-pc-cta:hover { background: var(--accent, #e2562b) !important; color: #fff !important; }

.inmo-pc-sold-overlay {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, .35);
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	font-size: 1.8em; font-weight: 800;
	letter-spacing: .15em;
	pointer-events: none;
	z-index: 5;
}

.inmo-pc-body {
	flex: 1 1 auto;
	padding: 12px 14px 12px;
	display: flex; flex-direction: column;
	gap: 5px;
}
.inmo-pc-price {
	font-size: 19px; font-weight: 700; letter-spacing: -0.015em;
	font-feature-settings: 'tnum';
}
.inmo-pc-mes { font-size: 13px; font-weight: 500; color: var(--fg-3); margin-left: 3px; }
.inmo-pc-price-prev {
	font-size: 13px; font-weight: 400; color: var(--fg-4);
	text-decoration: line-through;
	margin-left: 6px;
}
.inmo-pc-title {
	margin: 0;
	font-size: 14.5px; font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
	overflow: hidden;
}
.inmo-pc-title a {
	color: var(--fg);
	text-decoration: none;
}
.inmo-pc-title a:hover { color: var(--accent); }
.inmo-pc-loc {
	display: flex; align-items: center; gap: 4px;
	font-size: 13px; color: var(--fg-3);
}
.inmo-pc-loc svg { color: var(--fg-4); }
.inmo-pc-stats {
	display: flex; align-items: center; gap: 14px;
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--border-subtle);
	font-size: 12.5px; color: var(--fg-2);
}
.inmo-pc-stats span {
	display: inline-flex; align-items: center; gap: 5px;
}
.inmo-pc-stats svg { color: var(--fg-4); }
.inmo-pc-stats b { font-weight: 600; color: var(--fg); }

/* Descripción corta de la tarjeta grid: oculta por defecto (solo la usan ciertos
   presets, p.ej. las tarjetas grandes del "Dinámico"). */
.inmo-pc-desc { display: none; }

/* CTA "Contacto" al pie de la card grid. Anclado abajo (margin-top:auto) para
   alinear el botón en todas las cards de la fila y rellenar el hueco vacío.
   Funciona como <button> (abre popup) o como <a> (tel/mailto). */
.inmo-pc-contact {
	margin-top: auto;
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--border-strong, #d8d4cc);
	border-radius: var(--r-md, 10px);
	background: var(--surface, #fff);
	color: var(--fg, #1a1a1a);
	font-size: 13px; font-weight: 600; line-height: 1;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.inmo-pc-contact svg { color: var(--accent, #e2562b); transition: color .15s; }
.inmo-pc-contact:hover {
	background: var(--fg, #1a1a1a);
	border-color: var(--fg, #1a1a1a);
	color: #fff;
}
.inmo-pc-contact:hover svg { color: #fff; }
.inmo-pc-contact:focus-visible { outline: 2px solid var(--accent, #e2562b); outline-offset: 2px; }


/* ── Property card (list) ────────────────────────────────────────── */

.inmo-pub-cards-list { display: flex; flex-direction: column; gap: 16px; }
.inmo-pub-cards-list[hidden] { display: none; }
.inmo-pcl {
	display: grid;
	grid-template-columns: 340px 1fr;
	background: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: box-shadow .15s, border-color .15s;
}
.inmo-pcl:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }

/* La foto en list NO tiene aspect-ratio fijo: si lo forzamos (p.ej. 16:10),
   acaba recortando partes importantes cuando la foto tiene ratio distinto.
   En su lugar, dejamos que la altura del row la dicte el body (grid stretch)
   con un `min-height` razonable para que la card no quede tan baja. La foto
   llena el espacio disponible con `cover` y se mantiene centrada. */
.inmo-pcl.inmo-pcl .inmo-pcl-photo.inmo-pc-photo {
	aspect-ratio: auto;
	min-height: 200px;
	border-radius: 0;
}

/* En variante list, los botones favorito y compartir van a la esquina
   SUPERIOR derecha (no inferior como en grid). El share siempre visible
   (no solo hover), porque hay espacio de sobra. Fondo MÁS opaco (rgba .65
   vs .45 del grid) e iconos más gruesos (stroke 2.5) para mejor contraste
   sobre fotos claras. */
.inmo-pcl .inmo-pc-fav,
.inmo-pcl .inmo-pc-share {
	background: rgba(0, 0, 0, .65) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.inmo-pcl .inmo-pc-fav svg,
.inmo-pcl .inmo-pc-share svg {
	stroke-width: 2.5;
}
.inmo-pcl .inmo-pc-fav {
	top: 12px;
	right: 12px;
	bottom: auto;
}
.inmo-pcl .inmo-pc-share {
	top: 12px;
	right: 54px;
	bottom: auto;
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.inmo-pcl-body {
	padding: 16px 20px;
	display: flex; flex-direction: column; gap: 8px;
}
.inmo-pcl-title {
	margin: 0;
	font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
}
.inmo-pcl-title a { color: var(--fg); text-decoration: none; }
.inmo-pcl-title a:hover { color: var(--accent); }
.inmo-pcl-desc {
	margin: 2px 0 0;
	font-size: 13px; color: var(--fg-3); line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.inmo-pcl-foot {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--border-subtle);
}
.inmo-pcl-price {
	font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
	font-feature-settings: 'tnum';
}
/* Botón "Contactar" en variante list: a la derecha del precio. Fondo negro,
   texto blanco. Contraste forzado contra el tema activo. */
.inmo-pcl-cta {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px;
	background: #1a1a1a !important;
	color: #fff !important;
	border: 0;
	border-radius: var(--r-md);
	font-size: 13.5px; font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none !important;
	transition: background .15s;
	white-space: nowrap;
}
.inmo-pcl-cta:hover {
	background: var(--accent, #e2562b) !important;
	color: #fff !important;
}
.inmo-pcl-cta svg { color: #fff !important; }
.inmo-pcl-cta span { color: inherit; font-feature-settings: 'tnum'; }

@media ( max-width: 700px ) {
	.inmo-pcl { grid-template-columns: 1fr; }
	.inmo-pcl.inmo-pcl .inmo-pcl-photo.inmo-pc-photo { aspect-ratio: 16/10; min-height: 0; }
}

/* ── Pagination ──────────────────────────────────────────────────── */
.inmo-pub-pager {
	display: flex; align-items: center; justify-content: center;
	gap: 4px;
	padding: 40px 0;
}
.inmo-pub-pager .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 34px; height: 34px;
	padding: 0 10px;
	border-radius: var(--r-sm);
	font-size: 13px; font-weight: 500;
	color: var(--fg-2);
	text-decoration: none;
	transition: background .12s, color .12s;
}
.inmo-pub-pager .page-numbers:hover { background: var(--surface-2); color: var(--fg); }
.inmo-pub-pager .page-numbers.current {
	background: var(--fg); color: #fff;
}

.inmo-pub-empty {
	text-align: center; padding: 80px 24px;
	color: var(--fg-3);
}
.inmo-pub-empty p { font-size: 15px; margin: 0 0 16px; }

/* ── Property detail ─────────────────────────────────────────────── */

.inmo-pd-crumbs {
	display: flex; align-items: center; gap: 6px;
	font-size: 12.5px; color: var(--fg-3);
	margin-bottom: 16px;
}
.inmo-pd-crumbs a { color: var(--fg-2); }
.inmo-pd-crumbs a:hover { color: var(--accent); }
.inmo-pd-crumbs svg { color: var(--fg-4); }

.inmo-pd-gallery {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 8px;
	border-radius: var(--r-xl);
	overflow: hidden;
	height: 480px;
	margin-bottom: 40px;
}
@media ( max-width: 980px ) {
	.inmo-pd-gallery { grid-template-columns: 1fr; height: auto; }
	.inmo-pd-gallery-grid { display: none; }
	.inmo-pd-gallery-main { aspect-ratio: 16/10; }
}
.inmo-pd-gallery-main {
	width: 100%; height: 100%;
	min-height: 0;
	background-color: var(--surface-2);
	position: relative;
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	border: 0;
}
.inmo-pd-gallery-main-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.inmo-pd-photo-count {
	position: absolute; bottom: 16px; left: 16px;
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(0, 0, 0, .7);
	color: #fff;
	padding: 6px 12px;
	border-radius: var(--r-full);
	font-size: 12.5px;
	backdrop-filter: blur( 6px );
}
.inmo-pd-gallery-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 8px;
}
.inmo-pd-gallery-tile {
	width: 100%; height: 100%;
	min-height: 0;
	background-color: var(--surface-2);
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: opacity .15s;
	padding: 0;
	border: 0;
}
.inmo-pd-gallery-tile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.inmo-pd-gallery-tile:hover { opacity: 0.92; }
.inmo-pd-gallery-more { position: relative; }
.inmo-pd-gallery-more-overlay {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, .5);
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 6px;
	color: #fff;
	font-weight: 600; font-size: 13px;
}
.inmo-pd-sold-banner {
	position: absolute; top: 2rem; left: -3rem;
	transform: rotate(-20deg);
	background: rgba(220, 38, 38, .92);
	color: #fff;
	padding: .5rem 5rem;
	font-weight: 800; letter-spacing: .15em;
	pointer-events: none;
	z-index: 2;
}

/* Layout de la ficha: galería + contenido + sidebar de contacto, con áreas.
   Por defecto la galería ocupa todo el ancho arriba y debajo van main + side. */
.inmo-pd-grid {
	display: grid;
	grid-template-columns: 1fr 360px;
	grid-template-areas:
		"gallery gallery"
		"main    side";
	gap: 48px;
	align-items: start;
}
.inmo-pd-grid > .inmo-pd-gallery { grid-area: gallery; margin-bottom: 0; }
.inmo-pd-grid > .inmo-pd-main    { grid-area: main; }
.inmo-pd-grid > .inmo-pd-side    { grid-area: side; }

/* Una sola foto: el sidebar de contacto sube al hueco derecho, junto a la foto
   (que pasa a ocupar todo el ancho de su columna). El contenido fluye debajo. */
.inmo-pd-grid.is-single-photo {
	grid-template-areas:
		"gallery side"
		"main    side";
}
.inmo-pd-grid.is-single-photo > .inmo-pd-gallery {
	grid-template-columns: 1fr;
	height: 420px;
}

@media ( max-width: 980px ) {
	.inmo-pd-grid,
	.inmo-pd-grid.is-single-photo {
		grid-template-columns: 1fr;
		grid-template-areas:
			"gallery"
			"main"
			"side";
		gap: 24px;
	}
	.inmo-pd-side { position: static; }
}

.inmo-pd-header { padding-bottom: 28px; border-bottom: 1px solid var(--border-subtle); }
.inmo-pd-header-chips {
	display: flex; align-items: center; gap: 8px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.inmo-pd-title {
	font-size: 30px; font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0;
	line-height: 1.2;
}
.inmo-pd-loc {
	display: flex; align-items: center; gap: 6px;
	margin-top: 8px;
	font-size: 14px; color: var(--fg-3);
}
.inmo-pd-price-row {
	display: flex; align-items: center; justify-content: space-between;
	margin-top: 20px;
	gap: 16px;
	flex-wrap: wrap;
}
.inmo-pd-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.inmo-pd-price-current {
	font-size: 36px; font-weight: 700;
	letter-spacing: -0.025em;
	font-feature-settings: 'tnum';
}
.inmo-pd-price-prev {
	font-size: 18px; color: var(--fg-4);
	text-decoration: line-through;
	font-feature-settings: 'tnum';
}
.inmo-pd-price-disc {
	background: var(--accent);
	color: #fff;
	padding: 3px 10px;
	border-radius: var(--r-full);
	font-size: 12px; font-weight: 700;
}
.inmo-pd-actions {
	display: flex; gap: 6px;
}

/* Key stats row */
.inmo-pd-keys {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	margin: 24px 0;
	padding: 18px 0;
	border-bottom: 1px solid var(--border-subtle);
}
@media ( max-width: 700px ) {
	.inmo-pd-keys { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.inmo-key-stat { border-right: 0 !important; padding: 0 !important; }
}
.inmo-key-stat {
	display: flex; gap: 12px; align-items: center;
	padding: 0 16px;
	border-right: 1px solid var(--border-subtle);
}
.inmo-key-stat:last-child { border-right: 0; }
.inmo-key-stat:first-child { padding-left: 0; }
.inmo-key-stat-ico {
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--surface-2);
	border-radius: var(--r-sm);
	color: var(--fg-2);
	flex-shrink: 0;
}
.inmo-key-stat-v {
	font-size: 18px; font-weight: 600;
	font-feature-settings: 'tnum';
	display: inline-flex; align-items: center;
}
.inmo-key-stat-u { font-size: 11.5px; color: var(--fg-3); }

/* Sections */
.inmo-pd-section {
	padding: 32px 0;
	border-bottom: 1px solid var(--border-subtle);
}
.inmo-pd-section:last-child { border-bottom: 0; }
.inmo-pd-section h2 {
	font-size: 19px; font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
}
.inmo-pd-desc { font-size: 14.5px; color: var(--fg-2); line-height: 1.65; max-width: 64ch; }
.inmo-pd-desc p { margin: 0 0 14px; }

.inmo-pd-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px 24px;
}
@media ( max-width: 700px ) {
	.inmo-pd-features { grid-template-columns: repeat(2, 1fr); }
}

/* Detalles opcionales (orientación, planta, parcela, IBI...) */
.inmo-pd-details {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	border-top: 1px solid var(--border-subtle);
}
@media ( max-width: 700px ) {
	.inmo-pd-details { grid-template-columns: 1fr; }
}
.inmo-pd-detail {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 4px;
	border-bottom: 1px solid var(--border-subtle);
	font-size: 14px;
	color: var(--fg-2);
}
.inmo-pd-detail-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	background: var(--surface-2);
	border-radius: var(--r-md);
	color: var(--fg-3);
	flex-shrink: 0;
}
.inmo-pd-detail-label {
	color: var(--fg-3);
	flex: 1;
}
.inmo-pd-detail-value {
	color: var(--fg);
	font-weight: 600;
	text-align: right;
}
.inmo-pd-feat {
	display: flex; align-items: center; gap: 10px;
	font-size: 13.5px; color: var(--fg-2);
	padding: 4px 0;
}
.inmo-pd-feat-check {
	width: 18px; height: 18px;
	background: var(--success-soft);
	color: var(--success);
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}

.inmo-pd-map { height: 340px; border-radius: var(--r-lg); overflow: hidden; }
.inmo-pd-map-note { font-size: 13px; color: var(--fg-3); margin: 0 0 12px; }

/* Certificado de eficiencia energética: imagen clicable que se abre en
   tamaño completo en otra pestaña. Encuadre y sombra ligera. */
.inmo-pd-energy-cert {
	display: inline-block;
	max-width: 320px;
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.08 );
	background: var(--surface);
	transition: transform .15s, box-shadow .15s;
}
.inmo-pd-energy-cert:hover {
	transform: translateY( -2px );
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.12 );
}
.inmo-pd-energy-cert img {
	display: block;
	width: 100%;
	height: auto;
}

.inmo-pd-embed {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.inmo-pd-embed iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0;
}

.inmo-pd-plans {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
@media ( max-width: 700px ) { .inmo-pd-plans { grid-template-columns: 1fr; } }
.inmo-pd-plan {
	display: flex; align-items: center; gap: 12px;
	padding: 14px;
	background: var(--surface-2);
	border-radius: var(--r-md);
	cursor: pointer;
	transition: background .12s;
	text-decoration: none;
	color: var(--fg-2);
}
.inmo-pd-plan:hover { background: var(--surface-3); color: var(--fg); }
.inmo-pd-plan-icon { color: var(--accent); flex-shrink: 0; }
.inmo-pd-plan-name { flex: 1; font-size: 13.5px; font-weight: 500; }
.inmo-pd-plan-size { font-size: 12px; color: var(--fg-3); }

/* Sidebar contact */
.inmo-pd-side {
	position: sticky; top: 96px;
	display: flex; flex-direction: column; gap: 12px;
}
.inmo-pd-contact {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-xl);
	padding: 20px;
	box-shadow: var(--shadow-sm);
	display: flex; flex-direction: column;
	gap: 16px;
}
.inmo-pd-agency { display: flex; align-items: center; gap: 12px; }
.inmo-pd-agency-logo {
	width: 46px; height: 46px;
	border-radius: var(--r-md);
	background: var(--fg);
	color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}
.inmo-pd-agency-logo img { width: 100%; height: 100%; object-fit: cover; }
.inmo-pd-agency-initials {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
	font-feature-settings: 'tnum';
}
.inmo-pd-agency-info { display: flex; flex-direction: column; gap: 2px; }
.inmo-pd-agency-name { font-size: 14.5px; font-weight: 600; color: var(--fg); }
.inmo-pd-agency-sub { font-size: 12px; color: var(--fg-3); }

.inmo-pd-agency-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 12px 0;
	border-top: 1px solid var(--border-subtle);
	border-bottom: 1px solid var(--border-subtle);
}
.inmo-pd-agency-stats > div {
	display: flex; flex-direction: column;
	text-align: center;
	border-right: 1px solid var(--border-subtle);
}
.inmo-pd-agency-stats > div:last-child { border-right: 0; }
.inmo-pd-agency-stats b { font-size: 15px; }
.inmo-pd-agency-stats span {
	font-size: 11px; color: var(--fg-3);
	display: inline-flex; align-items: center; gap: 3px;
	justify-content: center;
}

.inmo-pd-cta-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
/* Botón "Llamar" — fondo negro con número en blanco. Contraste garantizado. */
.inmo-pd-cta-call {
	background: #1a1a1a !important;
	color: #ffffff !important;
	border: 1px solid #1a1a1a !important;
	font-weight: 600 !important;
	font-feature-settings: 'tnum';
}
.inmo-pd-cta-call:hover,
.inmo-pd-cta-call:focus-visible {
	background: #000 !important;
	color: #ffffff !important;
	border-color: #000 !important;
}
.inmo-pd-cta-call svg { color: #ffffff; }
.inmo-pd-cta-call span { color: inherit; }

.inmo-pd-cta-wa {
	background: #25D366 !important;
	color: #fff !important;
	border-color: #25D366 !important;
}
.inmo-pd-cta-wa:hover { background: #1ebd5b !important; border-color: #1ebd5b !important; }
.inmo-pd-cta-wa svg { color: #fff; }

.inmo-pd-form { display: flex; flex-direction: column; gap: 10px; }
.inmo-pd-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Checkbox de política de privacidad: input real (no hidden) + caja
   visual estilizada con CSS-only (sin JS). El estado :checked controla
   la apariencia del cuadrado. */
.inmo-pd-form-check {
	display: flex; align-items: flex-start; gap: 8px;
	font-size: 12px; color: var(--fg-3);
	line-height: 1.4;
	cursor: pointer;
	user-select: none;
}
.inmo-pd-form-check-input {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
	margin: 0;
}
.inmo-pd-form-check-box {
	width: 18px; height: 18px;
	border: 1.5px solid var(--border-strong);
	border-radius: 4px;
	background: var(--surface);
	display: inline-flex; align-items: center; justify-content: center;
	color: transparent;
	flex-shrink: 0;
	margin-top: 1px;
	transition: background .15s, border-color .15s, color .15s;
}
.inmo-pd-form-check-input:checked + .inmo-pd-form-check-box {
	background: var(--fg);
	border-color: var(--fg);
	color: #fff;
}
.inmo-pd-form-check-input:focus-visible + .inmo-pd-form-check-box {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.inmo-pd-form-check-text a { color: var(--fg-2); text-decoration: underline; }
.inmo-pd-form-check-text a:hover { color: var(--accent); }

/* Botón "Enviar consulta": CTA principal del sidebar, llena el ancho. */
.inmo-pd-form-submit {
	width: 100%;
	justify-content: center;
	margin-top: 4px;
}

.inmo-pd-ref {
	background: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--r-md);
	padding: 14px 18px;
	display: flex; flex-direction: column;
	gap: 8px;
	font-size: 13px;
}
.inmo-pd-ref-row { display: flex; justify-content: space-between; }
.inmo-pd-ref-row span:first-child { color: var(--fg-3); }
.inmo-pd-ref-row span:last-child { color: var(--fg); font-weight: 500; }

.inmo-pd-similar { border-bottom: 0; padding-bottom: 0; }
.inmo-pd-similar-grid {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
@media ( max-width: 980px ) { .inmo-pd-similar-grid { grid-template-columns: repeat(2, 1fr); } }
@media ( max-width: 600px ) { .inmo-pd-similar-grid { grid-template-columns: 1fr; } }

/* ── Lightbox (galería) ──────────────────────────────────────────── */
.inmo-lightbox {
	position: fixed; inset: 0; z-index: 9998;
	background: rgba(0, 0, 0, .94);
	display: flex; align-items: center; justify-content: center;
	padding: 1rem;
}
.inmo-lightbox[hidden] { display: none; }
.inmo-lightbox__img {
	width: auto; height: auto;
	max-width: 96vw; max-height: 94vh;
	object-fit: contain;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.inmo-lightbox__close,
.inmo-lightbox__prev,
.inmo-lightbox__next {
	position: absolute;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 0;
	border-radius: 50%;
	width: 48px; height: 48px;
	font-size: 1.5em;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s;
}
.inmo-lightbox__close:hover,
.inmo-lightbox__prev:hover,
.inmo-lightbox__next:hover { background: rgba(255, 255, 255, .25); }
.inmo-lightbox__close { top: 1rem; right: 1rem; }
.inmo-lightbox__prev  { left: 1rem; top: 50%; transform: translateY(-50%); }
.inmo-lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.inmo-lightbox__counter {
	position: absolute; top: 1rem; left: 1rem;
	color: #fff;
	background: rgba(0, 0, 0, .5);
	padding: .25rem .75rem;
	border-radius: 999px;
	font-size: .9rem;
}

/* ── Modal compartir ─────────────────────────────────────────────── */

.inmo-modal-backdrop {
	position: fixed; inset: 0; z-index: 100;
	background: rgba(15, 15, 15, .55);
	backdrop-filter: blur( 4px );
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
	animation: inmo-fadeIn .15s ease-out;
}
.inmo-modal-backdrop[hidden] { display: none; }
.inmo-modal {
	background: var(--surface);
	border-radius: var(--r-xl);
	width: 100%; max-width: 480px;
	max-height: 90vh;
	overflow: auto;
	box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
	animation: inmo-modalIn .2s cubic-bezier(.2, .7, .3, 1);
	position: relative;
}
.inmo-modal-hd {
	display: flex; align-items: flex-start; justify-content: space-between;
	padding: 20px 22px 12px;
}
.inmo-modal-hd h3 { margin: 0; font-size: 16px; font-weight: 600; }
.inmo-modal-hd p { margin: 4px 0 0; font-size: 12.5px; color: var(--fg-3); }
.inmo-modal-close {
	background: transparent; border: 0;
	color: var(--fg-3); cursor: pointer;
	width: 32px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--r-sm);
}
.inmo-modal-close:hover { background: var(--surface-2); color: var(--fg); }
.inmo-modal-body { padding: 8px 22px 22px; }

.inmo-copied-toast {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 14px;
	background: var(--success-soft);
	color: var(--success);
	border-radius: var(--r-sm);
	font-size: 13px; font-weight: 500;
	margin-bottom: 14px;
}

.inmo-share-url-row {
	display: flex; gap: 0;
	margin-bottom: 16px;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--surface);
}
.inmo-share-url {
	flex: 1;
	padding: 8px 10px;
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--fg-2);
	border: 0; outline: none;
	background: transparent;
}
.inmo-share-copy {
	background: var(--fg);
	color: #fff;
	border: 0; padding: 0 14px;
	font-size: 13px; font-weight: 500;
	cursor: pointer;
	display: inline-flex; align-items: center; gap: 6px;
	font: inherit;
	font-weight: 500;
}
.inmo-share-copy:hover { background: #1f1f1f; }

.inmo-share-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.inmo-share-net {
	display: flex; flex-direction: column;
	align-items: center; gap: 6px;
	background: transparent; border: 0; padding: 8px 4px;
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: background .12s;
	color: var(--fg-2);
	text-decoration: none;
	font: inherit;
}
.inmo-share-net:hover { background: var(--surface-2); }
.inmo-share-net-ico {
	width: 44px; height: 44px;
	border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff;
}
.inmo-share-net span:last-child {
	font-size: 11.5px; font-weight: 500;
	color: var(--fg-2);
}
/* Colores por red (del handoff) */
.inmo-share-net-whatsapp  .inmo-share-net-ico { background: #25D366; }
.inmo-share-net-x         .inmo-share-net-ico { background: #000000; }
.inmo-share-net-facebook  .inmo-share-net-ico { background: #1877F2; }
.inmo-share-net-telegram  .inmo-share-net-ico { background: #3DA8E5; }
.inmo-share-net-linkedin  .inmo-share-net-ico { background: #0A66C2; }
.inmo-share-net-email     .inmo-share-net-ico { background: #F6B800; }
.inmo-share-net-instagram .inmo-share-net-ico {
	background: linear-gradient(135deg, #feda75 0%, #fa7e1e 30%, #d62976 60%, #962fbf 80%, #4f5bd5 100%);
}

.inmo-share-note {
	display: flex; align-items: flex-start; gap: 8px;
	margin-top: 16px;
	padding: 10px 12px;
	background: var(--surface-2);
	border-radius: var(--r-sm);
	font-size: 12px; color: var(--fg-3);
	line-height: 1.5;
}
.inmo-share-note svg { color: var(--fg-3); flex-shrink: 0; margin-top: 2px; }
.inmo-share-note b { color: var(--fg-2); }

@keyframes inmo-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes inmo-modalIn {
	from { opacity: 0; transform: scale(.96); }
	to { opacity: 1; transform: scale(1); }
}

/* ── View toggle (grid/list) ─────────────────────────────────────── */

.inmo-view-toggle {
	display: inline-flex;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--surface);
	box-shadow: var(--shadow-xs);
}
.inmo-view-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 32px;
	border: 0;
	background: transparent;
	color: var(--fg-3);
	cursor: pointer;
	font: inherit;
}
.inmo-view-btn:hover { color: var(--fg); background: var(--surface-2); }
.inmo-view-btn.is-on { background: var(--fg); color: #fff; }

/* ── Print ───────────────────────────────────────────────────────── */
@media print {
	.inmo-pd-side,
	.inmo-pub-filters,
	.inmo-pub-hero-actions,
	.inmo-pc-fav,
	.inmo-pc-share,
	.inmo-modal-backdrop,
	.inmo-lightbox { display: none !important; }
	.inmo-pd-grid,
	.inmo-pd-grid.is-single-photo {
		grid-template-columns: 1fr;
		grid-template-areas:
			"gallery"
			"main"
			"side";
	}
}


/* ══════════════════════════════════════════════════════════════════════
   PRESETS DE APARIENCIA — layouts conmutables vía .inmo-theme-<slug>
   La clase va en el wrapper .inmo-public (archive y single).
   "original" = sin overrides. "airbnb" y "booking" = layouts MUY distintos.
   Marca de control: cada preset cambia el FONDO de la página → si no ves el
   color cambiar al guardar, es que el ZIP no se subió / hay caché.
   ══════════════════════════════════════════════════════════════════════ */

/* En los presets que IMPONEN su propia distribución (airbnb, masonry, compacta)
   ocultamos los botones grid/lista del toggle: la apariencia ya define el layout.
   Dejamos visible el botón del mapa (lo inyecta map.js con data-inmo-view="map"). */
.inmo-theme-airbnb .inmo-view-btn[data-inmo-view="grid"],
.inmo-theme-airbnb .inmo-view-btn[data-inmo-view="list"],
.inmo-theme-masonry .inmo-view-btn[data-inmo-view="grid"],
.inmo-theme-masonry .inmo-view-btn[data-inmo-view="list"],
.inmo-theme-dinamico .inmo-view-btn[data-inmo-view="grid"],
.inmo-theme-dinamico .inmo-view-btn[data-inmo-view="list"],
.inmo-theme-compacta .inmo-view-btn[data-inmo-view="grid"],
.inmo-theme-compacta .inmo-view-btn[data-inmo-view="list"] { display: none; }
/* Si tras ocultar solo queda el botón del mapa, el toggle no necesita el marco
   de "grupo segmentado". */
.inmo-theme-airbnb .inmo-view-toggle,
.inmo-theme-masonry .inmo-view-toggle,
.inmo-theme-dinamico .inmo-view-toggle,
.inmo-theme-compacta .inmo-view-toggle { border: 0; background: transparent; padding: 0; }

/* IMPORTANTE: el archive tiene DOS contenedores de resultados (grid + lista),
   y la lista viene con [hidden]. En estos presets imponemos el layout sobre el
   contenedor GRID y ocultamos SIEMPRE el de lista, para que las propiedades no
   se rendericen dos veces (grid + lista a la vez). El botón mapa sigue pudiendo
   ocultar el grid vía su atributo hidden (gestionado por map.js). */
.inmo-theme-airbnb  [data-inmo-results-list],
.inmo-theme-masonry [data-inmo-results-list],
.inmo-theme-dinamico [data-inmo-results-list],
.inmo-theme-compacta [data-inmo-results-list] { display: none !important; }

/* ═══════════════ AIRBNB: limpio, foto grande, texto encima, sin marcos ═══════════════ */
.inmo-public.inmo-theme-airbnb { background: #ffffff; }

/* Grid de 3 columnas verticales (tipo "inmersivo"). */
.inmo-theme-airbnb .inmo-pub-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width:980px){ .inmo-theme-airbnb .inmo-pub-cards-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .inmo-theme-airbnb .inmo-pub-cards-grid { grid-template-columns: 1fr; } }

/* TARJETA = la foto entera. El texto va SUPERPUESTO encima de la foto, abajo,
   sobre un degradado oscuro. Disposición totalmente distinta al Original. */
.inmo-theme-airbnb .inmo-pc { position:relative; background:transparent; border:0; border-radius:0; box-shadow:none; }
.inmo-theme-airbnb .inmo-pc:hover { transform:none; box-shadow:none; }
.inmo-theme-airbnb .inmo-pc-photo { aspect-ratio:3/4; border-radius:20px; }
.inmo-theme-airbnb .inmo-pc:hover .inmo-pc-photo { box-shadow:0 14px 36px rgba(0,0,0,.22); }
/* Degradado fuerte para que el texto blanco se lea sobre cualquier foto. */
.inmo-theme-airbnb .inmo-pc-photo-grad {
	background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 32%, transparent 50%, rgba(0,0,0,.78) 100%);
}
.inmo-theme-airbnb .inmo-pc-fav { top:14px; right:14px; bottom:auto; background:rgba(255,255,255,.92)!important; color:#222!important; }
.inmo-theme-airbnb .inmo-pc-fav svg { color:#222!important; filter:none; stroke-width:2; }
.inmo-theme-airbnb .inmo-pc-share { display:none; }

/* Body: absolute, dentro de la foto, abajo, texto blanco. */
.inmo-theme-airbnb .inmo-pc-body {
	position:absolute; left:0; right:0; bottom:0;
	z-index:3;
	display:flex; flex-direction:column; gap:1px;
	padding:14px 16px;
	background:transparent;
	pointer-events:none;
}
.inmo-theme-airbnb .inmo-pc-body a { pointer-events:auto; }
.inmo-theme-airbnb .inmo-pc-title { order:1; font-size:16px; font-weight:700; line-height:1.2; }
.inmo-theme-airbnb .inmo-pc-title a { color:#fff; }
.inmo-theme-airbnb .inmo-pc-title a:hover { color:#fff; text-decoration:underline; }
.inmo-theme-airbnb .inmo-pc-loc { order:2; font-size:13px; color:rgba(255,255,255,.85); }
.inmo-theme-airbnb .inmo-pc-loc svg { color:rgba(255,255,255,.85); }
.inmo-theme-airbnb .inmo-pc-stats { order:3; border-top:0; padding-top:0; margin-top:5px; gap:12px; color:rgba(255,255,255,.9); font-size:12.5px; }
.inmo-theme-airbnb .inmo-pc-stats svg { color:rgba(255,255,255,.8); }
.inmo-theme-airbnb .inmo-pc-stats b { color:#fff; }
.inmo-theme-airbnb .inmo-pc-price { order:0; font-size:20px; font-weight:800; color:#fff; margin-bottom:0; }
.inmo-theme-airbnb .inmo-pc-price .inmo-pc-mes { font-weight:400; color:rgba(255,255,255,.85); }
.inmo-theme-airbnb .inmo-pc-contact { display:none; }

/* Vista LISTA en Airbnb: mismo formato inmersivo, 3 columnas. */
.inmo-theme-airbnb .inmo-pub-cards-list { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:980px){ .inmo-theme-airbnb .inmo-pub-cards-list { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .inmo-theme-airbnb .inmo-pub-cards-list { grid-template-columns:1fr; } }
.inmo-theme-airbnb .inmo-pcl { position:relative; display:block; background:transparent; border:0; border-radius:0; }
.inmo-theme-airbnb .inmo-pcl:hover { box-shadow:none; border:0; }
.inmo-theme-airbnb .inmo-pcl.inmo-pcl .inmo-pcl-photo.inmo-pc-photo { aspect-ratio:3/4; min-height:0; border-radius:20px; }
.inmo-theme-airbnb .inmo-pcl-body {
	position:absolute; left:0; right:0; bottom:0; z-index:3;
	display:flex; flex-direction:column; gap:3px; padding:18px;
	pointer-events:none;
}
.inmo-theme-airbnb .inmo-pcl-body a { pointer-events:auto; color:#fff; }
.inmo-theme-airbnb .inmo-pcl-title { font-size:18px; }
.inmo-theme-airbnb .inmo-pcl-title a { color:#fff; }
.inmo-theme-airbnb .inmo-pcl-desc { display:none; }
.inmo-theme-airbnb .inmo-pcl-loc { color:rgba(255,255,255,.88); }
.inmo-theme-airbnb .inmo-pcl-loc svg { color:rgba(255,255,255,.88); }
.inmo-theme-airbnb .inmo-pcl-stats { color:rgba(255,255,255,.92); }
.inmo-theme-airbnb .inmo-pcl-stats svg { color:rgba(255,255,255,.8); }
.inmo-theme-airbnb .inmo-pcl-stats b { color:#fff; }
.inmo-theme-airbnb .inmo-pcl-foot { border-top:0; padding-top:4px; }
.inmo-theme-airbnb .inmo-pcl-price { color:#fff; font-size:22px; }
.inmo-theme-airbnb .inmo-pcl-cta { display:none; }

/* ─────────────────────────────────────────────────────────────────────
   FICHA AIRBNB — galería PANORÁMICA a todo el ancho (una sola foto grande,
   sin tira lateral de miniaturas), y debajo contenido + contacto. Estética
   editorial, aireada, esquinas muy redondeadas. Totalmente distinta a Booking
   (galería izq + panel derecha) y al Original (galería 1.6fr/1fr).
   ───────────────────────────────────────────────────────────────────── */
.inmo-theme-airbnb .inmo-pd-gallery {
	grid-template-columns: 1fr;   /* una sola foto, ocupa todo el ancho */
	height: 520px;
	border-radius: 22px;
	margin-bottom: 0;
}
.inmo-theme-airbnb .inmo-pd-gallery-grid { display: none; } /* ocultamos el mosaico lateral */
.inmo-theme-airbnb .inmo-pd-title { font-size:34px; line-height:1.12; }
.inmo-theme-airbnb .inmo-pd-section h2 { font-size:22px; }
.inmo-theme-airbnb .inmo-pd-price-current { font-size:30px; }
/* El contacto deja de ser sticky: baja con el contenido (estilo Airbnb). */
.inmo-theme-airbnb .inmo-pd-side { position:static; }
.inmo-theme-airbnb .inmo-pd-contact { border:1px solid var(--border-subtle); border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.10); }
/* Datos clave sin tarjeta, en fila aireada con separadores arriba/abajo. */
.inmo-theme-airbnb .inmo-pd-keys { border:0; border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); border-radius:0; background:transparent; padding:18px 0; }

/* ═══════════════════════════════════════════════════════════════════════
   MOSAICO (estilo Pinterest) — muro de columnas con tarjetas de ALTURAS
   distintas. Se logra con CSS multi-column: las .inmo-pc se reparten en
   columnas y cada una conserva el alto natural de su foto (aspect-ratio
   variado por posición). Ni cuadrícula uniforme ni filas.
   ═══════════════════════════════════════════════════════════════════════ */
.inmo-public.inmo-theme-masonry { background:#fafafa; }

/* El contenedor de tarjetas pasa a columnas tipo "muro" (Pinterest). Forzamos
   display:block con !important para ganar al display:grid base y al posible
   estilo por [data-mode]. */
.inmo-theme-masonry .inmo-pub-cards-grid,
.inmo-theme-masonry .inmo-pub-cards-grid-4,
.inmo-theme-masonry [data-inmo-results]:not([hidden]) {
	display:block !important;
	column-count:3;
	column-gap:20px;
}
@media (max-width:980px){
	.inmo-theme-masonry .inmo-pub-cards-grid { column-count:2; }
}
@media (max-width:600px){
	.inmo-theme-masonry .inmo-pub-cards-grid { column-count:1; }
}

/* Cada tarjeta es un bloque de la columna; no se parte entre columnas. */
.inmo-theme-masonry .inmo-pc,
.inmo-theme-masonry .inmo-pcl {
	display:block !important;
	width:100%;
	grid-template-columns:none;
	margin:0 0 20px;
	-webkit-column-break-inside:avoid;
	break-inside:avoid;
	background:var(--surface);
	border:0;
	border-radius:14px;
	box-shadow:var(--shadow-sm);
	overflow:hidden;
}
.inmo-theme-masonry .inmo-pc:hover,
.inmo-theme-masonry .inmo-pcl:hover { transform:none; box-shadow:var(--shadow-md); }

/* Alturas de foto MUY variadas según posición → muro irregular evidente. La capa
   de imagen sigue absolute (inset:0 del base) y llena la altura fijada. */
.inmo-theme-masonry .inmo-pc-photo,
.inmo-theme-masonry .inmo-pcl .inmo-pcl-photo.inmo-pc-photo {
	aspect-ratio:auto; border-radius:0; min-height:0;
}
.inmo-theme-masonry .inmo-pc:nth-child(4n+1) .inmo-pc-photo { height:340px; }
.inmo-theme-masonry .inmo-pc:nth-child(4n+2) .inmo-pc-photo { height:210px; }
.inmo-theme-masonry .inmo-pc:nth-child(4n+3) .inmo-pc-photo { height:280px; }
.inmo-theme-masonry .inmo-pc:nth-child(4n+4) .inmo-pc-photo { height:400px; }
.inmo-theme-masonry .inmo-pcl:nth-child(4n+1) .inmo-pcl-photo.inmo-pc-photo { height:340px; }
.inmo-theme-masonry .inmo-pcl:nth-child(4n+2) .inmo-pcl-photo.inmo-pc-photo { height:210px; }
.inmo-theme-masonry .inmo-pcl:nth-child(4n+3) .inmo-pcl-photo.inmo-pc-photo { height:280px; }
.inmo-theme-masonry .inmo-pcl:nth-child(4n+4) .inmo-pcl-photo.inmo-pc-photo { height:400px; }

.inmo-theme-masonry .inmo-pc-body,
.inmo-theme-masonry .inmo-pcl-body { padding:12px 14px 14px; }
.inmo-theme-masonry .inmo-pc-contact,
.inmo-theme-masonry .inmo-pcl-cta,
.inmo-theme-masonry .inmo-pcl-desc { display:none; }

/* ═══════════════════════════════════════════════════════════════════════
   COMPACTA (estilo portal, tipo Idealista) — rejilla DENSA de 4 columnas,
   tarjetas pequeñas con datos mínimos pegados. Mucha info por pantalla.
   ═══════════════════════════════════════════════════════════════════════ */
.inmo-public.inmo-theme-compacta { background:#eef0f2; }

.inmo-theme-compacta .inmo-pub-cards-grid,
.inmo-theme-compacta .inmo-pub-cards-grid-4 { grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:1100px){ .inmo-theme-compacta .inmo-pub-cards-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .inmo-theme-compacta .inmo-pub-cards-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .inmo-theme-compacta .inmo-pub-cards-grid { grid-template-columns:1fr; } }

.inmo-theme-compacta .inmo-pc { background:#fff; border:1px solid #d9dde2; border-radius:6px; box-shadow:none; overflow:hidden; }
.inmo-theme-compacta .inmo-pc:hover { transform:none; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.inmo-theme-compacta .inmo-pc-photo { aspect-ratio:4/3; border-radius:0; }
/* Cuerpo denso: poco padding, tipografía pequeña, todo pegado. */
.inmo-theme-compacta .inmo-pc-body { padding:8px 10px 10px; gap:2px; }
.inmo-theme-compacta .inmo-pc-price { order:0; font-size:17px; font-weight:800; }
.inmo-theme-compacta .inmo-pc-title { order:1; font-size:13px; font-weight:600; line-height:1.25; -webkit-line-clamp:1; }
.inmo-theme-compacta .inmo-pc-loc { order:2; font-size:12px; }
.inmo-theme-compacta .inmo-pc-stats { order:3; margin-top:6px; padding-top:6px; gap:8px; font-size:11.5px; }
.inmo-theme-compacta .inmo-pc-stats svg { width:12px; height:12px; }
.inmo-theme-compacta .inmo-pc-contact { display:none; }
/* Lista en compacta = misma rejilla densa. */
.inmo-theme-compacta .inmo-pub-cards-list { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:1100px){ .inmo-theme-compacta .inmo-pub-cards-list { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .inmo-theme-compacta .inmo-pub-cards-list { grid-template-columns:repeat(2,1fr); } }
.inmo-theme-compacta .inmo-pcl { grid-template-columns:none; display:flex; flex-direction:column; border:1px solid #d9dde2; border-radius:6px; }
.inmo-theme-compacta .inmo-pcl .inmo-pcl-photo.inmo-pc-photo { min-height:0; aspect-ratio:4/3; }
.inmo-theme-compacta .inmo-pcl-desc { display:none; }
.inmo-theme-compacta .inmo-pcl-cta { display:none; }

/* ═══════════════════════════════════════════════════════════════════════
   DINÁMICO (bento irregular) — rejilla de 6 columnas para poder tener tamaños
   "1.5": una tarjeta puede ocupar 2 cols (1/3), 3 cols (1/2 = "1.5x") o 4 cols
   (2/3). Un patrón mezcla grandes, altas y anchas; `grid-auto-flow: dense`
   rellena los huecos. Las DESTACADAS (⭐) salen como el bloque más grande.
   ═══════════════════════════════════════════════════════════════════════ */
.inmo-public.inmo-theme-dinamico { background: var(--bg); }

.inmo-theme-dinamico .inmo-pub-cards-grid,
.inmo-theme-dinamico .inmo-pub-cards-grid-4 {
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 165px;
	grid-auto-flow: row dense;
	gap: 16px;
}
@media (max-width:980px){ .inmo-theme-dinamico .inmo-pub-cards-grid { grid-template-columns: repeat(4,1fr); grid-auto-rows:150px; } }
@media (max-width:600px){ .inmo-theme-dinamico .inmo-pub-cards-grid { grid-template-columns: 1fr; grid-auto-rows:auto; grid-auto-flow:row; } }

/* Cada tarjeta llena su celda: la foto crece (flex) y el texto queda abajo. */
.inmo-theme-dinamico .inmo-pc { height: 100%; overflow: hidden; }
.inmo-theme-dinamico .inmo-pc-photo { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
.inmo-theme-dinamico .inmo-pc-body { flex: 0 0 auto; }

/* Tamaño base de una tarjeta normal: 2 columnas (1/3) × 2 filas. */
.inmo-theme-dinamico .inmo-pc { grid-column: span 2; grid-row: span 2; }

/* Patrón irregular (se repite cada 7) → mezcla de tamaños tipo "bento":
   - n+1: grande ancha  (4 cols × 3 filas)
   - n+3: alta          (2 cols × 3 filas)
   - n+5: media-ancha   (3 cols × 2 filas = "1.5")
   - n+6: media-ancha   (3 cols × 2 filas)
   El resto quedan en el tamaño base (2×2). */
/* Regla clave anti-aplastamiento: a más ancho, más alto (celdas ~cuadradas),
   así la foto (object-fit:cover) nunca queda en una franja apaisada. */
.inmo-theme-dinamico .inmo-pc:nth-child(7n+1) { grid-column: span 4; grid-row: span 4; }
.inmo-theme-dinamico .inmo-pc:nth-child(7n+3) { grid-column: span 2; grid-row: span 3; }
.inmo-theme-dinamico .inmo-pc:nth-child(7n+5) { grid-column: span 3; grid-row: span 3; }
.inmo-theme-dinamico .inmo-pc:nth-child(7n+6) { grid-column: span 3; grid-row: span 3; }

/* DESTACADAS = el bloque más grande (4 cols × 4 filas), por encima del patrón.
   El JS alterna su lado (izquierda / derecha). */
.inmo-theme-dinamico .inmo-pc:has(.inmo-pc-star) {
	grid-column: span 4;
	grid-row: span 4;
}
.inmo-theme-dinamico .inmo-pc:has(.inmo-pc-star) .inmo-pc-price { font-size: 24px; }
.inmo-theme-dinamico .inmo-pc:has(.inmo-pc-star) .inmo-pc-title { font-size: 18px; }

/* En las tarjetas GRANDES (destacadas y la grande del patrón) mostramos una
   descripción corta. Así el cuerpo tiene más contenido y la foto deja de
   dominar/verse recortada: queda como una tarjeta destacada de revista. */
.inmo-theme-dinamico .inmo-pc:has(.inmo-pc-star) .inmo-pc-desc,
.inmo-theme-dinamico .inmo-pc:nth-child(7n+1) .inmo-pc-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 2px 0 0;
	font-size: 13.5px; line-height: 1.5; color: var(--fg-3);
}
/* En esas grandes, el cuerpo crece (deja de ser flex:0) para repartir mejor el
   alto con la foto → menos recorte. */
.inmo-theme-dinamico .inmo-pc:has(.inmo-pc-star) .inmo-pc-body,
.inmo-theme-dinamico .inmo-pc:nth-child(7n+1) .inmo-pc-body {
	flex: 0 0 auto;
	gap: 4px;
}
/* La foto de las grandes llena el espacio restante (la celda es ~cuadrada, así
   que la proporción queda equilibrada, sin franjas apaisadas). */
.inmo-theme-dinamico .inmo-pc:has(.inmo-pc-star) .inmo-pc-photo,
.inmo-theme-dinamico .inmo-pc:nth-child(7n+1) .inmo-pc-photo {
	flex: 1 1 auto;
}

/* En móvil (1 columna) todo vuelve a tamaño normal apilado. */
@media (max-width:600px){
	.inmo-theme-dinamico .inmo-pc,
	.inmo-theme-dinamico .inmo-pc:nth-child(7n+1),
	.inmo-theme-dinamico .inmo-pc:nth-child(7n+3),
	.inmo-theme-dinamico .inmo-pc:nth-child(7n+5),
	.inmo-theme-dinamico .inmo-pc:nth-child(7n+6),
	.inmo-theme-dinamico .inmo-pc:has(.inmo-pc-star) { grid-column: auto; grid-row: auto; height: auto; }
	.inmo-theme-dinamico .inmo-pc-photo { aspect-ratio: 16/10; }
}

/* Ficha Dinámico: galería panorámica + contacto fluido (look generoso). */
.inmo-theme-dinamico .inmo-pd-gallery { grid-template-columns:1fr; height:480px; border-radius:14px; margin-bottom:0; }
.inmo-theme-dinamico .inmo-pd-gallery-grid { display:none; }
.inmo-theme-dinamico .inmo-pd-side { position:static; }

/* ─────────────────────────────────────────────────────────────────────
   FICHAS — Masonry y Compacta cambian también la página individual.
   ───────────────────────────────────────────────────────────────────── */
/* Masonry: galería panorámica + contacto que fluye, look limpio. */
.inmo-theme-masonry .inmo-pd-gallery { grid-template-columns:1fr; height:480px; border-radius:14px; margin-bottom:0; }
.inmo-theme-masonry .inmo-pd-gallery-grid { display:none; }
.inmo-theme-masonry .inmo-pd-side { position:static; }
.inmo-theme-masonry .inmo-pd-contact { border-radius:14px; box-shadow:var(--shadow-md); }

/* Compacta: galería a la izquierda + panel de contacto estrecho a la derecha,
   denso, esquinas rectas (estética portal). */
.inmo-theme-compacta .inmo-pd-grid,
.inmo-theme-compacta .inmo-pd-grid.is-single-photo {
	grid-template-columns:1fr 320px;
	grid-template-areas:"gallery side" "main side";
	gap:24px;
}
.inmo-theme-compacta .inmo-pd-gallery { height:380px; margin-bottom:0; border-radius:6px; grid-template-columns:2fr 1fr; }
.inmo-theme-compacta .inmo-pd-side { position:sticky; top:20px; }
.inmo-theme-compacta .inmo-pd-contact { border:1px solid #cdd3da; border-radius:6px; box-shadow:none; }
.inmo-theme-compacta .inmo-pd-keys { background:#fff; border:1px solid #d9dde2; border-radius:6px; padding:12px; }
.inmo-theme-compacta .inmo-pd-title { font-size:24px; }
@media (max-width:980px){
	.inmo-theme-compacta .inmo-pd-grid,
	.inmo-theme-compacta .inmo-pd-grid.is-single-photo {
		grid-template-columns:1fr; grid-template-areas:"gallery" "main" "side";
	}
	.inmo-theme-compacta .inmo-pd-gallery { grid-template-columns:1fr; height:auto; }
	.inmo-theme-compacta .inmo-pd-side { position:static; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PROPIEDADES SIMILARES — SIEMPRE con el diseño base, al margen del preset.
   Las tarjetas de "Propiedades similares" viven dentro de la ficha (que lleva
   la clase inmo-theme-<preset>), así que heredarían el layout del preset. Aquí
   las devolvemos a la tarjeta estándar (cuadrícula normal) con !important para
   ganar a cualquier preset (incl. masonry, que usa !important).
   ═══════════════════════════════════════════════════════════════════════ */
.inmo-pd-similar-grid .inmo-pc {
	display: flex !important;
	flex-direction: column !important;
	position: relative !important;
	width: auto !important;
	height: auto !important;
	grid-column: auto !important;
	grid-row: auto !important;
	margin: 0 !important;
	background: var(--surface) !important;
	border: 0 !important;
	border-radius: var(--r-lg) !important;
	box-shadow: none !important;
	overflow: visible !important;
}
.inmo-pd-similar-grid .inmo-pc-photo {
	position: relative !important;
	flex: 0 0 auto !important;
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	min-height: 0 !important;
	border-radius: var(--r-lg) !important;
}
/* Gradiente de foto al base (airbnb lo intensifica para el texto encima). */
.inmo-pd-similar-grid .inmo-pc-photo-grad {
	background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.18) 100%) !important;
}
/* Body: en flujo normal debajo de la foto (no superpuesto), colores normales. */
.inmo-pd-similar-grid .inmo-pc-body {
	position: static !important;
	z-index: auto !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 5px !important;
	padding: 12px 14px 12px !important;
	background: transparent !important;
	pointer-events: auto !important;
}
/* Orden de elementos al de origen (price, título, loc, stats, contacto). */
.inmo-pd-similar-grid .inmo-pc-price,
.inmo-pd-similar-grid .inmo-pc-title,
.inmo-pd-similar-grid .inmo-pc-loc,
.inmo-pd-similar-grid .inmo-pc-stats,
.inmo-pd-similar-grid .inmo-pc-contact { order: 0 !important; }
/* Colores base (airbnb los pinta en blanco sobre la foto). */
.inmo-pd-similar-grid .inmo-pc-price { color: var(--fg) !important; font-size: 19px !important; margin: 0 !important; }
.inmo-pd-similar-grid .inmo-pc-title a { color: var(--fg) !important; }
.inmo-pd-similar-grid .inmo-pc-loc { color: var(--fg-3) !important; }
.inmo-pd-similar-grid .inmo-pc-loc svg { color: var(--fg-4) !important; }
.inmo-pd-similar-grid .inmo-pc-stats {
	color: var(--fg-2) !important;
	border-top: 1px solid var(--border-subtle) !important;
	margin-top: 8px !important; padding-top: 10px !important;
}
.inmo-pd-similar-grid .inmo-pc-stats svg { color: var(--fg-4) !important; }
.inmo-pd-similar-grid .inmo-pc-stats b { color: var(--fg) !important; }
/* Botones flotantes a su posición base; contacto al pie visible. */
.inmo-pd-similar-grid .inmo-pc-fav { top: auto !important; bottom: 12px !important; right: 12px !important; }
.inmo-pd-similar-grid .inmo-pc-share { display: inline-flex !important; }
.inmo-pd-similar-grid .inmo-pc-contact { display: inline-flex !important; }