/* =========================================================
   Inmoguate — hoja de estilos principal
   ========================================================= */

:root {
	--inm-primario-900: #2a1152;
	--inm-primario-700: #5b21b6;
	--inm-primario-600: #7c3aed;
	--inm-primario-100: #efe6fd;
	--inm-primario-50: #f8f5fe;
	--inm-acento: #ff6b57;
	--inm-acento-oscuro: #c2410c;
	--inm-tinta-900: #1c1729;
	--inm-tinta-700: #423a53;
	--inm-tinta-500: #6c637e;
	--inm-tinta-300: #a79fb8;
	--inm-borde: #e7e1f2;
	--inm-fondo: #f8f6fb;
	--inm-blanco: #ffffff;
	--inm-rojo: #d24141;
	--inm-radio-sm: 8px;
	--inm-radio-md: 14px;
	--inm-radio-lg: 22px;
	--inm-sombra: 0 6px 24px rgba(42, 17, 82, .10);
	--inm-sombra-fuerte: 0 16px 48px rgba(42, 17, 82, .20);
	--inm-fuente: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--inm-ancho-maximo: 1180px;
	--inm-ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--inm-fuente);
	color: var(--inm-tinta-900);
	background: var(--inm-blanco);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* El tema resetea el color/subrayado de los enlaces de forma global; dentro
   de zonas editadas con Elementor (.inm-elementor-zona) restauramos el
   comportamiento normal de párrafos/enlaces para que el contenido que se
   diseñe ahí en el editor visual se vea como se espera. */
.inm-elementor-zona a { color: var(--inm-primario-700); text-decoration: underline; }
.inm-elementor-zona p { color: inherit; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; letter-spacing: -.01em; }

p { margin: 0 0 1em; color: var(--inm-tinta-700); }

button { font-family: inherit; cursor: pointer; }

.inm-contenedor {
	max-width: var(--inm-ancho-maximo);
	margin: 0 auto;
	padding: 0 20px;
}

/* ---------- Botones ---------- */

.inm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 600;
	background: transparent;
	transition: transform .3s var(--inm-ease), box-shadow .3s var(--inm-ease), background-color .3s var(--inm-ease), color .3s var(--inm-ease), border-color .3s var(--inm-ease);
}
.inm-btn--primario { background: var(--inm-primario-700); color: #fff; }
.inm-btn--primario:hover { background: var(--inm-primario-600); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(124, 58, 237, .32); }
.inm-btn--outline { border-color: var(--inm-primario-700); color: var(--inm-primario-700); }
.inm-btn--outline:hover { background: var(--inm-primario-100); transform: translateY(-2px); }
.inm-btn--texto { color: var(--inm-tinta-700); padding: 8px 10px; }
.inm-btn--texto:hover { color: var(--inm-primario-700); }
.inm-btn--full { width: 100%; }
.inm-btn--pequeno { padding: 8px 14px; font-size: 13px; }
.inm-btn--peligro { border: 1px solid var(--inm-rojo); color: var(--inm-rojo); background: transparent; }
.inm-btn--peligro:hover { background: #fdeceb; }

/* Mismo look que .inm-btn.inm-btn--primario (píldora morada), pero en una
   sola clase autosuficiente — pensada para botones que se agreguen desde
   fuera de este archivo (por ejemplo, el widget nativo "Botón" de
   Elementor, escribiendo esta clase en su campo "CSS Classes"), donde no
   siempre es cómodo combinar dos clases. */
.inm-boton-morado {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 600;
	background: var(--inm-primario-700);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: transform .3s var(--inm-ease), box-shadow .3s var(--inm-ease), background-color .3s var(--inm-ease), color .3s var(--inm-ease), border-color .3s var(--inm-ease);
}
.inm-boton-morado:hover {
	background: var(--inm-primario-600);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(124, 58, 237, .32);
}

/* En el widget nativo "Botón" de Elementor, el campo "CSS Classes" no
   pone la clase en el enlace — la pone en el contenedor del widget
   completo, por fuera del <a> que Elementor arma con su propio color y
   forma de fábrica adentro. Sin esto, quedaban dos píldoras encimadas: la
   morada de este archivo por fuera, y la de Elementor (con su color por
   defecto, cuadrada) por dentro. Esto anula la píldora del contenedor y
   la traslada al enlace real, para que quede una sola. El "body" al
   inicio le sube la especificidad para ganarle al CSS propio que
   Elementor genera por cada botón (misma cantidad de clases; sin esto,
   gana el de Elementor por cargarse después). */
.inm-boton-morado.elementor-widget-button,
.inm-boton-morado.elementor-widget-button:hover {
	background: none;
	padding: 0;
	border: none;
	box-shadow: none;
	transform: none;
}
body .inm-boton-morado .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 600;
	background: var(--inm-primario-700);
	color: #fff;
	transition: transform .3s var(--inm-ease), box-shadow .3s var(--inm-ease), background-color .3s var(--inm-ease), color .3s var(--inm-ease), border-color .3s var(--inm-ease);
}
body .inm-boton-morado .elementor-button:hover {
	background: var(--inm-primario-600);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(124, 58, 237, .32);
}

/* ---------- Header ---------- */

.inm-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid transparent;
	transition: box-shadow .3s var(--inm-ease), border-color .3s var(--inm-ease);
}
.inm-header.is-scrolled { border-color: var(--inm-borde); box-shadow: 0 8px 30px rgba(42, 17, 82, .08); }
.inm-header__inner {
	max-width: var(--inm-ancho-maximo);
	margin: 0 auto;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 20px;
}
.inm-logo {
	font-weight: 800;
	font-size: 20px;
	color: var(--inm-primario-900);
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	flex: 0 1 auto;
	min-width: 0;
}

/* Botones de iniciar sesión / publicar: siempre visibles en el header,
   separados entre sí, aparte del menú lateral. */
.inm-header__acciones { display: flex; align-items: center; gap: 18px; margin-left: auto; flex: 0 0 auto; }

/* Textos con versión corta para que los botones del header quepan en una
   sola fila en pantallas angostas (ver override en el breakpoint móvil). */
.inm-txt-corto { display: none; }
.inm-txt-completo { display: inline; }

/* Botón para abrir el menú: pill con ícono (líneas de distinto largo, no
   el hamburguesa clásico) + la palabra "Menú", a juego con el resto de
   botones del sitio. Siempre visible, no solo en móvil. */
.inm-nav-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 1.5px solid var(--inm-borde);
	border-radius: 999px;
	padding: 9px 16px 9px 14px;
	flex: 0 0 auto;
	color: var(--inm-primario-700);
	font-weight: 600;
	font-size: 14px;
	transition: border-color .2s var(--inm-ease), background-color .2s var(--inm-ease), color .2s var(--inm-ease);
}
.inm-nav-toggle:hover { background: var(--inm-primario-50); border-color: var(--inm-primario-100); }
.inm-nav-toggle__icono path { transition: transform .3s var(--inm-ease); transform-origin: center; }
.inm-nav-toggle:hover .inm-nav-toggle__icono path:nth-child(2) { transform: translateX(2px); }
.inm-nav-toggle:hover .inm-nav-toggle__icono path:nth-child(3) { transform: translateX(4px); }

/* Menú lateral: siempre se abre como panel deslizante desde la derecha,
   en cualquier tamaño de pantalla, con su propio overlay oscuro. Ambos
   viven fuera de <header> (que tiene backdrop-filter) a propósito: un
   backdrop-filter/filter en un ancestro crea un "containing block" para
   los hijos position:fixed, y eso hacía que inset:0 se calculara contra
   el header (~80px) en vez de contra toda la ventana. */
.inm-nav-overlay {
	position: fixed; inset: 0; z-index: 45; background: rgba(20, 9, 41, .5);
	opacity: 0; transition: opacity .3s var(--inm-ease);
}
.inm-nav-overlay:not([hidden]) { opacity: 1; }

.inm-nav {
	position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 86vw);
	background: #fff; z-index: 46;
	display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
	padding: 90px 28px 28px; box-shadow: var(--inm-sombra-fuerte);
	transform: translateX(100%); transition: transform .35s var(--inm-ease);
}
.inm-nav.is-abierto { transform: translateX(0); }
.inm-nav__cerrar {
	position: absolute; top: 20px; right: 20px; width: 36px; height: 36px;
	border: none; background: var(--inm-primario-50); border-radius: 50%;
	font-size: 20px; line-height: 1; color: var(--inm-tinta-700);
	transition: background-color .2s var(--inm-ease), transform .2s var(--inm-ease);
}
.inm-nav__cerrar:hover { background: var(--inm-primario-100); transform: rotate(90deg); }

.inm-nav__lista { list-style: none; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; width: 100%; }
.inm-nav__lista a { font-weight: 600; font-size: 18px; color: var(--inm-tinta-700); position: relative; padding-bottom: 4px; transition: color .25s var(--inm-ease); }
.inm-nav__lista a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: var(--inm-primario-600); border-radius: 2px;
	transform: scaleX(0); transform-origin: right; transition: transform .35s var(--inm-ease);
}
.inm-nav__lista a:hover { color: var(--inm-primario-700); }
.inm-nav__lista a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Hero ---------- */

.inm-hero {
	background:
		linear-gradient(180deg, rgba(20, 9, 41, .55), rgba(42, 17, 82, .78)),
		url('../img/hero-propiedades.jpg') center 50% / cover no-repeat,
		var(--inm-primario-900);
	color: #fff;
	padding: 64px 20px 96px;
	text-align: center;
}
.inm-hero__inner { max-width: 880px; margin: 0 auto; }
.inm-hero h1 { font-size: clamp(28px, 4vw, 44px); color: #fff; }
.inm-hero p { color: rgba(255,255,255,.85); font-size: 17px; max-width: 600px; margin: 0 auto 32px; }

/* ---------- Buscador ---------- */

.inm-buscador {
	/* Tarjeta con un poco de transparencia sobre la imagen de fondo. */
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: var(--inm-radio-lg);
	box-shadow: var(--inm-sombra-fuerte);
	padding: 20px;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
	align-items: end;
	position: relative;
	z-index: 5;
	/* Siempre centrado, sin estirarse borde a borde en pantallas anchas. */
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}
/* Fila 1: Operación (1/6) · Categoría (2/6) · Ubicación (3/6, más ancha). */
.inm-buscador__campo--operacion { grid-column: span 1; }
.inm-buscador__campo--categoria { grid-column: span 2; }
.inm-buscador__campo--ancha { grid-column: span 3; }
/* Fila 2: Precio mín. · Precio máx. · botón Buscar, cada uno 2/6. */
.inm-buscador__campo--precio { grid-column: span 2; }
.inm-buscador__enviar { grid-column: span 2; }

/* En el hero de inicio, la tarjeta del buscador "flota" sobre la imagen
   (el hero deja suficiente padding-bottom para que no se corte). */
/* Antes -48px: junto con el margin-bottom de 32px del párrafo de arriba,
   el margen se "colapsa" a -16px netos (así es como funcionan los
   márgenes verticales en CSS cuando uno es negativo) — esos 16px eran
   suficientes para que la tarjeta del buscador, con su fondo semi-
   transparente y desenfoque, tapara la última línea del texto. Con -24px
   el neto queda en +8px: la tarjeta se sigue viendo "flotando" sobre la
   imagen de fondo, pero ya sin tocar el texto. */
.inm-hero__buscador .inm-buscador { margin-top: -9px; }

/* Barra de búsqueda de las páginas de listado (sin hero encima): lleva su
   propia franja con la misma imagen de fondo para que la tarjeta "flote"
   sin quedar debajo del header pegajoso (antes se cortaba por un margen
   negativo mal calculado, y el buscador se dibujaba duplicado dentro de
   otra tarjeta). */
.inm-buscador-barra {
	background:
		linear-gradient(180deg, rgba(20, 9, 41, .6), rgba(42, 17, 82, .82)),
		url('../img/hero-propiedades.jpg') center 50% / cover no-repeat,
		var(--inm-primario-900);
	padding: 84px 0 112px;
}
.inm-buscador-barra .inm-buscador { margin-top: -40px; }
.inm-buscador__campo { display: flex; flex-direction: column; gap: 6px; text-align: left; transition: color .2s var(--inm-ease); min-width: 0; }
.inm-buscador__campo label { font-size: 12px; font-weight: 700; color: var(--inm-tinta-500); text-transform: uppercase; letter-spacing: .04em; transition: color .2s var(--inm-ease); }
/* Nota de los 10 km: fuera de la tarjeta, centrada debajo. */
.inm-buscador__ayuda { text-align: center; font-size: 13px; color: rgba(255,255,255,.75); margin: 14px 0 0; }
.inm-buscador__campo:focus-within label { color: var(--inm-primario-600); }

.inm-buscador select, .inm-buscador input,
.inm-campo select, .inm-campo input, .inm-campo textarea {
	border: 1.5px solid var(--inm-borde);
	border-radius: var(--inm-radio-sm);
	padding: 10px 12px;
	font-size: 14px;
	background: #fff;
	color: var(--inm-tinta-900);
	width: 100%;
	transition: border-color .2s var(--inm-ease), box-shadow .2s var(--inm-ease), transform .2s var(--inm-ease);
}
.inm-buscador select:hover, .inm-buscador input:hover,
.inm-campo select:hover, .inm-campo input:hover, .inm-campo textarea:hover {
	border-color: var(--inm-tinta-300);
}
.inm-buscador select:focus, .inm-buscador input:focus,
.inm-campo select:focus, .inm-campo input:focus, .inm-campo textarea:focus {
	outline: none;
	border-color: var(--inm-primario-600);
	box-shadow: 0 0 0 4px var(--inm-primario-100);
	transform: translateY(-1px);
}
.inm-buscador button { flex: 0 0 auto; }

/* ---------- Secciones genéricas ---------- */

.inm-seccion { padding: 64px 0; }
.inm-seccion--alt { background: var(--inm-fondo); }
.inm-seccion__titulo { font-size: 28px; }
.inm-seccion__intro { color: var(--inm-tinta-500); margin-top: -8px; margin-bottom: 32px; }
.inm-seccion__cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }

/* ---------- Revelado al hacer scroll ---------- */

.inm-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--inm-ease), transform .7s var(--inm-ease); }
.inm-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.inm-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Categorías ---------- */

.inm-categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.inm-categoria {
	background: var(--inm-primario-50);
	border: 1px solid var(--inm-borde);
	border-radius: var(--inm-radio-md);
	padding: 28px 16px;
	text-align: center;
	transition: transform .4s var(--inm-ease), box-shadow .4s var(--inm-ease), background-color .4s var(--inm-ease);
}
.inm-categoria:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--inm-sombra); background: #fff; }
.inm-categoria__icono { font-size: 32px; display: block; margin-bottom: 10px; transition: transform .4s var(--inm-ease); }
.inm-categoria:hover .inm-categoria__icono { transform: scale(1.15) rotate(-4deg); }
.inm-categoria__nombre { font-weight: 700; color: var(--inm-primario-900); }

/* ---------- Tarjetas de propiedad ---------- */

.inm-grid-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 24px; }

.inm-tarjeta {
	background: #fff;
	border: 1px solid var(--inm-borde);
	border-radius: var(--inm-radio-md);
	overflow: hidden;
	display: block;
	transition: transform .4s var(--inm-ease), box-shadow .4s var(--inm-ease);
}
.inm-tarjeta:hover { transform: translateY(-6px); box-shadow: var(--inm-sombra-fuerte); }
.inm-tarjeta__img { position: relative; aspect-ratio: 4/3; background: var(--inm-primario-50); overflow: hidden; }
.inm-tarjeta__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--inm-ease); }
.inm-tarjeta:hover .inm-tarjeta__img img { transform: scale(1.08); }
.inm-tarjeta__img-vacia { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 40px; }
.inm-etiqueta {
	position: absolute; top: 12px; left: 12px;
	background: var(--inm-primario-700); color: #fff;
	font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.inm-etiqueta--alquiler { background: var(--inm-acento); color: #4a1206; }
.inm-etiqueta-nueva {
	position: absolute; top: 12px; right: 12px;
	background: rgba(20, 9, 41, .72); backdrop-filter: blur(4px);
	color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.inm-tarjeta__cuerpo { padding: 16px; }
.inm-tarjeta__precio { display: block; font-weight: 800; color: var(--inm-primario-700); font-size: 18px; }
.inm-tarjeta__titulo { font-size: 16px; margin: 4px 0; }
.inm-tarjeta__meta { font-size: 13px; color: var(--inm-tinta-500); margin-bottom: 8px; }
.inm-tarjeta__specs { display: flex; gap: 12px; font-size: 13px; color: var(--inm-tinta-700); margin: 0; }

/* ---------- Barra de filtros del listado (estilo pills) ---------- */

.inm-filtros-barra { background: #fff; border-bottom: 1px solid var(--inm-borde); padding: 18px 0; position: relative; z-index: 20; }
.inm-filtros { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.inm-filtros__ubicacion { flex: 1 1 260px; min-width: 200px; }
.inm-filtros__ubicacion input {
	width: 100%; height: 100%; border: 1.5px solid var(--inm-borde); border-radius: 999px;
	padding: 12px 18px; font-size: 14px; background: var(--inm-fondo); color: var(--inm-tinta-900);
	transition: border-color .2s var(--inm-ease), background .2s var(--inm-ease);
}
.inm-filtros__ubicacion input:focus { outline: none; border-color: var(--inm-primario-600); background: #fff; }

/* ---------- Lista de sugerencias de Google Places ----------
   Google inserta este menú directamente en <body> (no dentro de nuestro
   formulario), pero sigue siendo CSS normal — se puede peinar igual que
   cualquier otro desplegable del sitio. El logo "powered by Google" no
   se toca: sus términos de uso del autocompletado gratuito exigen dejarlo
   visible. */
.pac-container {
	font-family: var(--inm-fuente);
	border: 1px solid var(--inm-borde);
	border-radius: var(--inm-radio-md);
	box-shadow: var(--inm-sombra-fuerte);
	margin-top: 8px;
	padding: 6px;
	overflow: hidden;
}
.pac-container:after { margin: 4px 6px 2px; }
.pac-item {
	border-top: 1px solid var(--inm-borde);
	border-radius: var(--inm-radio-sm);
	padding: 10px 8px;
	font-size: 14px;
	color: var(--inm-tinta-700);
	cursor: pointer;
}
.pac-item:first-child { border-top: none; }
.pac-item:hover, .pac-item-selected { background: var(--inm-primario-50); }
.pac-icon { opacity: .45; margin-top: 2px; }
.pac-item-query { font-size: 14px; font-weight: 700; color: var(--inm-tinta-900); }
.pac-matched { color: var(--inm-primario-700); }

.inm-filtro-pill { position: relative; }
.inm-filtro-pill summary {
	list-style: none; cursor: pointer; user-select: none;
	display: flex; align-items: center; gap: 6px; height: 100%;
	border: 1.5px solid var(--inm-borde); border-radius: 999px;
	padding: 12px 18px; font-size: 14px; font-weight: 600; color: var(--inm-tinta-700);
	white-space: nowrap; transition: border-color .2s var(--inm-ease), color .2s var(--inm-ease);
}
.inm-filtro-pill summary::-webkit-details-marker { display: none; }
.inm-filtro-pill summary::after { content: '▾'; font-size: 11px; margin-left: 2px; color: var(--inm-tinta-300); }
.inm-filtro-pill:hover summary, .inm-filtro-pill[open] summary { border-color: var(--inm-primario-600); color: var(--inm-primario-700); }
.inm-filtro-pill__panel {
	position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 220px;
	background: #fff; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-md);
	box-shadow: var(--inm-sombra-fuerte); padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.inm-filtro-pill__panel--ancho { min-width: 320px; }
.inm-filtro-pill__opcion { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--inm-tinta-700); cursor: pointer; }
.inm-filtro-pill__fila { display: flex; gap: 12px; }
.inm-filtro-pill__fila label { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--inm-tinta-500); text-transform: uppercase; letter-spacing: .03em; }
.inm-filtro-pill__fila input, .inm-filtro-pill__fila select {
	border: 1.5px solid var(--inm-borde); border-radius: var(--inm-radio-sm); padding: 9px 10px; font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--inm-tinta-900);
}
.inm-filtro-pill__subtitulo { font-size: 12px; font-weight: 700; color: var(--inm-tinta-500); text-transform: uppercase; letter-spacing: .03em; margin: 8px 0 0; }

.inm-filtros__buscar {
	flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
	width: 46px; border: none; border-radius: 999px; background: var(--inm-primario-700); color: #fff;
	transition: background .2s var(--inm-ease), transform .2s var(--inm-ease);
}
.inm-filtros__buscar:hover { background: var(--inm-primario-600); transform: translateY(-1px); }

/* ---------- Resultados: tarjetas a la izquierda, mapa fijo a la derecha ---------- */

/* Esta sección va a ancho completo de la ventana (no dentro de
   .inm-contenedor, que limita a --inm-ancho-maximo): las tarjetas quedan
   pegadas al borde izquierdo y el mapa al borde derecho, con espacio solo
   entre ambos — igual que un portal tipo Zillow/KW, no como el resto del
   sitio que sí se centra en una columna. */
.inm-resultados { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; align-items: start; position: relative; }
.inm-resultados__lista { padding: 24px 28px 24px clamp(20px, 4vw, 56px); max-height: calc(100vh - var(--inm-header-alto, 76px)); overflow-y: auto; min-width: 0; }
.inm-resultados__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.inm-resultados__titulo { font-size: 22px; margin: 0; }
.inm-resultados__contador { font-size: 14px; color: var(--inm-tinta-500); white-space: nowrap; }
.inm-resultados__cerca { color: var(--inm-primario-700); font-weight: 600; font-size: 14px; margin: 4px 0 20px; }
.inm-grid-tarjetas--resultados { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.inm-resultados__mapa { position: sticky; top: var(--inm-header-alto, 76px); align-self: start; }
.inm-resultados__mapa .inm-mapa { height: calc(100vh - var(--inm-header-alto, 76px)); border-radius: 0; margin-top: 0; }

/* Burbuja de precio en el mapa (en vez del pin por defecto de Leaflet). */
.leaflet-div-icon.inm-mapa-precio-envoltorio { background: none; border: none; }
.inm-mapa-precio {
	display: inline-block; transform: translate(-50%, -100%);
	background: var(--inm-primario-900); color: #fff; font-size: 12px; font-weight: 700;
	padding: 5px 10px; border-radius: 999px; white-space: nowrap;
	box-shadow: 0 3px 10px rgba(20, 9, 41, .35); border: 2px solid #fff;
}

/* Botón flotante para alternar lista/mapa en móvil — oculto en escritorio,
   donde ambos paneles ya se ven mitad y mitad. */
.inm-toggle-vista {
	display: none; align-items: center; gap: 8px;
	position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
	z-index: 60; background: var(--inm-tinta-900); color: #fff; border: none;
	border-radius: 999px; padding: 12px 22px; font-weight: 700; font-size: 14px;
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ---------- CTA doble ---------- */

.inm-cta-doble { padding: 64px 0; background: var(--inm-primario-900); }
.inm-cta-doble__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.inm-cta-doble__tarjeta {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--inm-radio-lg);
	padding: 32px;
	color: #fff;
	transition: transform .4s var(--inm-ease), background-color .4s var(--inm-ease);
}
.inm-cta-doble__tarjeta:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); }
.inm-cta-doble__tarjeta h3 { color: #fff; }
.inm-cta-doble__tarjeta p { color: rgba(255,255,255,.75); }
.inm-cta-doble__tarjeta--alt { background: rgba(255,255,255,.1); }
/* El botón --outline usa un morado oscuro por defecto (pensado para fondos
   claros); sobre el fondo morado oscuro de esta sección casi no se ve, así
   que aquí se pinta en blanco para que tenga contraste real. */
.inm-cta-doble__tarjeta .inm-btn--outline { border-color: rgba(255,255,255,.6); color: #fff; }
.inm-cta-doble__tarjeta .inm-btn--outline:hover { background: rgba(255,255,255,.16); border-color: #fff; }

/* Dentro de cada tarjeta del CTA doble, el título y el texto pueden
   ocupar distinta cantidad de líneas según el ancho de columna (25% vs
   50%) — eso dejaba los botones a distinta altura entre una tarjeta y
   otra, aunque las tres cajas ya midieran lo mismo. Poniendo la columna
   interna (.elementor-widget-wrap) en modo columna con alto completo, y
   empujando el último elemento (el botón) al fondo con margin-top:auto,
   los tres botones quedan alineados en la misma línea sin importar
   cuánto texto tenga cada tarjeta arriba. En móvil, donde las tarjetas
   van apiladas y cada una mide lo que su propio contenido necesita, esto
   no cambia nada — simplemente no hay espacio extra que empujar. */
.inm-cta-doble .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	height: 100%;
}
.inm-cta-doble .elementor-widget-wrap > *:last-child { margin-top: auto; }

/* "¿Quieres que busquemos por ti?" en páginas que se sembraron con una
   versión anterior de este generador (el shortcode [inmoguate_lead_formulario]
   dentro un widget "Shortcode" en vez de widgets nativos) sigue
   necesitando que ese contenido llegue al alto completo por su cuenta.
   Va con :not(.inm-cta-doble__tarjeta) — esa versión anterior es la única
   columna del CTA doble sin esa clase — para no volver a estirar (y
   romper la alineación de) los widgets de botón de las tarjetas nuevas,
   que sí la tienen. */
.inm-cta-doble .elementor-column:not(.inm-cta-doble__tarjeta) .elementor-widget-shortcode,
.inm-cta-doble .elementor-column:not(.inm-cta-doble__tarjeta) .elementor-shortcode { height: 100%; }

.inm-lead-form {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--inm-radio-lg);
	padding: 32px;
	color: #fff;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
}
.inm-lead-form h3 { color: #fff; margin-bottom: 6px; }
.inm-lead-form > p { color: rgba(255,255,255,.75); margin: 0 0 20px; }

/* Fila de campos lado a lado dentro de un paso del stepper (presupuesto
   mín./máx./moneda) — el modal es de fondo claro, así que .inm-campo no
   necesita ningún color especial aquí. */
.inm-lead-form__fila { display: flex; gap: 12px; }
.inm-lead-form__fila .inm-campo { flex: 1 1 0; min-width: 0; }
/* Si el label de un campo se pasa a dos líneas y el de al lado se queda en
   una, el que tiene dos líneas empuja su input más abajo que los demás —
   la fila se ve despareja aunque los .inm-campo midan lo mismo de alto.
   Con una sola línea siempre, los inputs quedan a la misma altura. */
.inm-lead-form__fila .inm-campo label { white-space: nowrap; }
.inm-lead-form__moneda { flex: 0 0 100px; }

/* ---------- Stepper del formulario de lead (dentro del modal) ---------- */

.inm-modal--stepper { width: min(480px, 92vw); }

.inm-stepper__progreso { margin-bottom: 20px; }
.inm-stepper__barra { height: 6px; border-radius: 999px; background: var(--inm-borde); overflow: hidden; }
.inm-stepper__barra span { display: block; height: 100%; width: 25%; background: var(--inm-primario-600); border-radius: 999px; transition: width .35s var(--inm-ease); }
.inm-stepper__contador { font-size: 12px; font-weight: 700; color: var(--inm-tinta-500); text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 0; }

.inm-stepper__paso { display: none; }
.inm-stepper__paso.is-activo { display: block; animation: inm-stepper-entra .3s var(--inm-ease); }
.inm-stepper__paso h3 { font-size: 19px; margin-bottom: 16px; }
@keyframes inm-stepper-entra {
	from { opacity: 0; transform: translateX(10px); }
	to { opacity: 1; transform: translateX(0); }
}

.inm-stepper__opciones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.inm-stepper__opcion {
	flex: 1 1 calc(50% - 5px);
	padding: 14px 16px;
	border: 1.5px solid var(--inm-borde);
	border-radius: var(--inm-radio-md);
	background: #fff;
	color: var(--inm-tinta-900);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: border-color .2s var(--inm-ease), background-color .2s var(--inm-ease), color .2s var(--inm-ease), transform .15s var(--inm-ease);
}
.inm-stepper__opcion:hover { border-color: var(--inm-primario-600); transform: translateY(-1px); }
.inm-stepper__opcion.is-seleccionada { border-color: var(--inm-primario-600); background: var(--inm-primario-600); color: #fff; }

.inm-stepper__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.inm-stepper__nav .inm-btn { flex: 0 0 auto; }

.inm-stepper__exito { text-align: center; padding: 12px 0; }
.inm-stepper__exito h3 { font-size: 20px; margin-bottom: 8px; }
.inm-stepper__exito p { margin-bottom: 20px; }

/* ---------- Blog ---------- */

.inm-grid-blog { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 24px; }
.inm-tarjeta-blog { background: #fff; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-md); overflow: hidden; transition: transform .4s var(--inm-ease), box-shadow .4s var(--inm-ease); }
.inm-tarjeta-blog:hover { transform: translateY(-6px); box-shadow: var(--inm-sombra); }
.inm-tarjeta-blog__img { aspect-ratio: 16/10; overflow: hidden; }
.inm-tarjeta-blog__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--inm-ease); }
.inm-tarjeta-blog:hover .inm-tarjeta-blog__img img { transform: scale(1.08); }
.inm-tarjeta-blog__cuerpo { padding: 16px; }
.inm-tarjeta-blog__fecha { font-size: 12px; color: var(--inm-tinta-300); text-transform: uppercase; }

.inm-post__contenedor { max-width: 760px; padding: 48px 20px; }
.inm-post__titulo { font-size: 32px; }
.inm-post__imagen { border-radius: var(--inm-radio-lg); overflow: hidden; margin-bottom: 24px; }
.inm-post__imagen img { width: 100%; height: auto; }
.inm-post__contenido { font-size: 17px; line-height: 1.7; }

/* ---------- Ficha de propiedad ---------- */

.inm-ficha { padding: 32px 0 64px; }

/* ---------- Galería de la ficha (visor + miniaturas + lightbox) ---------- */
.inm-ficha__galeria { margin-bottom: 12px; }
.inm-ficha__visor {
	display: block; width: 100%; padding: 0; border: 0; background: none;
	border-radius: var(--inm-radio-lg); overflow: hidden; aspect-ratio: 16/8;
	position: relative; cursor: zoom-in;
}
.inm-ficha__visor img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inm-ficha__visor-lupa {
	position: absolute; right: 12px; bottom: 12px;
	width: 34px; height: 34px; border-radius: 999px;
	background: rgba(26, 11, 51, .55); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 15px;
	opacity: 0; transition: opacity .2s var(--inm-ease);
}
.inm-ficha__visor:hover .inm-ficha__visor-lupa,
.inm-ficha__visor:focus-visible .inm-ficha__visor-lupa { opacity: 1; }

.inm-ficha__visor-wrap { position: relative; }
.inm-ficha__flecha {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 40px; height: 40px; border: 0; border-radius: 999px; cursor: pointer;
	background: rgba(26, 11, 51, .55); color: #fff; font-size: 16px;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: opacity .2s var(--inm-ease), background-color .2s var(--inm-ease);
}
.inm-ficha__visor-wrap:hover .inm-ficha__flecha,
.inm-ficha__flecha:focus-visible { opacity: 1; }
.inm-ficha__flecha:hover { background: rgba(26, 11, 51, .8); }
.inm-ficha__flecha--prev { left: 12px; }
.inm-ficha__flecha--next { right: 12px; }
@media (max-width: 780px) {
	/* En celular no hay "hover" real — las flechas quedan siempre visibles
	   (más tenues) para que se note que se puede navegar así. */
	.inm-ficha__flecha { opacity: .85; width: 36px; height: 36px; }
}

.inm-ficha__miniaturas { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0 8px; }
.inm-ficha__mini {
	flex: 0 0 auto; padding: 0; line-height: 0; cursor: pointer;
	border: 2px solid transparent; border-radius: var(--inm-radio-sm);
	background: none; overflow: hidden;
	transition: border-color .2s var(--inm-ease), transform .2s var(--inm-ease);
}
.inm-ficha__mini img { width: 110px; height: 80px; object-fit: cover; display: block; }
.inm-ficha__mini:hover { transform: translateY(-3px); }
.inm-ficha__mini.is-activa { border-color: var(--inm-primario-600); }

.inm-galeria-lightbox {
	position: fixed; inset: 0; z-index: 120;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, .96);
	opacity: 0; visibility: hidden;
	transition: opacity .25s var(--inm-ease), visibility 0s linear .25s;
}
.inm-galeria-lightbox.is-visible { opacity: 1; visibility: visible; transition: opacity .25s var(--inm-ease); }
.inm-galeria-lightbox__img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 6px; user-select: none; }
.inm-galeria-lightbox__cerrar {
	position: absolute; top: 14px; right: 20px;
	background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; opacity: .85;
}
.inm-galeria-lightbox__cerrar:hover { opacity: 1; }
.inm-galeria-lightbox__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 48px; height: 64px; border: 0; border-radius: 8px; cursor: pointer;
	background: rgba(255, 255, 255, .12); color: #fff; font-size: 22px;
	transition: background-color .2s var(--inm-ease);
}
.inm-galeria-lightbox__nav:hover { background: rgba(255, 255, 255, .24); }
.inm-galeria-lightbox__nav--prev { left: 16px; }
.inm-galeria-lightbox__nav--next { right: 16px; }
.inm-galeria-lightbox__contador {
	position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
	color: rgba(255, 255, 255, .8); font-size: 13px; letter-spacing: .04em;
}
body.inm-galeria-abierta { overflow: hidden; }
@media (max-width: 600px) {
	.inm-galeria-lightbox__nav { width: 40px; height: 52px; font-size: 18px; }
	.inm-galeria-lightbox__cerrar { font-size: 30px; }
}

.inm-ficha__grid { display: grid; grid-template-columns: 1fr 340px; gap: 40px; margin-top: 32px; align-items: start; }
.inm-ficha__migas { font-size: 13px; color: var(--inm-tinta-500); text-transform: uppercase; letter-spacing: .04em; }
.inm-ficha__titulo { font-size: 30px; }
.inm-ficha__precio { font-size: 26px; font-weight: 800; color: var(--inm-primario-700); }

.inm-reacciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.inm-reaccion {
	display: flex; align-items: center; gap: 6px;
	background: #fff; border: 1.5px solid var(--inm-borde); border-radius: 999px;
	padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--inm-tinta-700);
	transition: border-color .2s var(--inm-ease), background-color .2s var(--inm-ease), transform .15s var(--inm-ease);
}
.inm-reaccion:hover { border-color: var(--inm-primario-100); background: var(--inm-primario-50); transform: translateY(-1px); }
.inm-reaccion.is-activa { border-color: var(--inm-primario-600); background: var(--inm-primario-100); color: var(--inm-primario-900); }
.inm-reaccion__icono { font-size: 15px; }
.inm-reaccion__conteo { color: var(--inm-tinta-300); font-weight: 700; }
.inm-ficha__specs { display: flex; gap: 24px; list-style: none; padding: 16px 0; margin: 16px 0; border-top: 1px solid var(--inm-borde); border-bottom: 1px solid var(--inm-borde); }
.inm-ficha__subtitulo { margin-top: 32px; font-size: 20px; }
.inm-ficha__amenidades, .inm-ficha__extra { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 10px; }
.inm-ficha__amenidades li::before { content: "✓ "; color: var(--inm-primario-700); font-weight: 700; }
.inm-ficha__descripcion { font-size: 16px; line-height: 1.7; }

.inm-tarjeta-contacto { position: sticky; top: 96px; background: #fff; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-lg); padding: 24px; box-shadow: var(--inm-sombra); }
.inm-tarjeta-contacto__nota { font-size: 12px; color: var(--inm-tinta-300); margin-top: 10px; }

/* isolation:isolate crea un contexto de apilamiento propio: los paneles
   internos de Leaflet usan z-index altos (hasta 700) que, sin esto, podían
   quedar por encima de elementos fijos como los modales de autenticación. */
.inm-mapa { width: 100%; height: 280px; border-radius: var(--inm-radio-md); background: var(--inm-primario-50); margin-top: 10px; position: relative; isolation: isolate; z-index: 0; }

.inm-paginacion { margin-top: 32px; display: flex; gap: 8px; }
.inm-paginacion .page-numbers { padding: 8px 14px; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-sm); transition: background-color .25s var(--inm-ease), color .25s var(--inm-ease), border-color .25s var(--inm-ease); }
.inm-paginacion a.page-numbers:hover { background: var(--inm-primario-100); border-color: var(--inm-primario-100); }
.inm-paginacion .page-numbers.current { background: var(--inm-primario-700); color: #fff; border-color: var(--inm-primario-700); }

/* ---------- Footer ---------- */

.inm-footer { background: var(--inm-primario-900); color: rgba(255,255,255,.8); padding: 56px 0 24px; margin-top: 40px; }
/* El reset global de <p> pone texto oscuro; en el footer (fondo morado)
   necesita ser claro explícitamente, la herencia del contenedor no basta. */
.inm-footer p { color: rgba(255,255,255,.75); }
.inm-footer__inner { max-width: var(--inm-ancho-maximo); margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.inm-footer h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.inm-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.inm-footer a { transition: color .2s var(--inm-ease); }
.inm-footer a:hover { color: #fff; }
.inm-footer__copy { text-align: center; font-size: 13px; margin-top: 40px; color: rgba(255,255,255,.5); }
.inm-logo__img { height: 32px; width: auto; display: block; }
.inm-logo--footer { color: #fff; margin-bottom: 10px; }

/* ---------- Modales de autenticación ---------- */

.inm-modal-overlay {
	position: fixed; inset: 0; background: rgba(26, 11, 51, .55); z-index: 90;
	opacity: 0; visibility: hidden; transition: opacity .3s var(--inm-ease), visibility 0s linear .3s;
}
.inm-modal-overlay.is-visible { opacity: 1; visibility: visible; transition: opacity .3s var(--inm-ease); }

.inm-modal {
	position: fixed; top: 50%; left: 50%;
	background: #fff; border-radius: var(--inm-radio-lg); padding: 32px;
	width: min(420px, 92vw); max-height: 88vh; overflow-y: auto;
	z-index: 91; box-shadow: var(--inm-sombra-fuerte);
	opacity: 0; visibility: hidden;
	transform: translate(-50%, -50%) translateY(12px) scale(.96);
	transition: opacity .3s var(--inm-ease), transform .3s var(--inm-ease), visibility 0s linear .3s;
}
.inm-modal.is-visible {
	opacity: 1; visibility: visible; transform: translate(-50%, -50%) translateY(0) scale(1);
	transition: opacity .3s var(--inm-ease), transform .3s var(--inm-ease);
}
.inm-modal__cerrar { position: absolute; top: 14px; right: 14px; background: none; border: none; font-size: 22px; color: var(--inm-tinta-500); transition: color .2s var(--inm-ease), transform .2s var(--inm-ease); }
.inm-modal__cerrar:hover { color: var(--inm-primario-700); transform: rotate(90deg); }
.inm-modal__ayuda { font-size: 14px; color: var(--inm-tinta-500); }
.inm-modal__error { color: var(--inm-rojo); font-size: 14px; min-height: 0; }
.inm-modal__ok { color: var(--inm-primario-700); font-size: 14px; }
.inm-password-requisitos { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; color: var(--inm-tinta-500); display: flex; flex-direction: column; gap: 2px; }
.inm-password-requisitos li { position: relative; padding-left: 18px; }
.inm-password-requisitos li::before { content: "○"; position: absolute; left: 0; }
.inm-password-requisitos li.cumple { color: #1a7f37; }
.inm-password-requisitos li.cumple::before { content: "✓"; }
.inm-modal__pie { text-align: center; font-size: 14px; margin-top: 16px; }
.inm-modal__pie a { color: var(--inm-primario-700); font-weight: 600; }

.inm-campo { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.inm-campo label { font-size: 13px; font-weight: 600; color: var(--inm-tinta-700); transition: color .2s var(--inm-ease); }
.inm-campo:focus-within label { color: var(--inm-primario-600); }

/* ---------- Cómo funciona ---------- */

.inm-hero--como-funciona { padding: 64px 20px; }

/* display:grid ya no va aquí: esta clase se aplica sobre la sección de
   Elementor, cuyo único hijo real es .elementor-container (el que arma
   las columnas por su cuenta) — declarar un grid de 2 columnas en la
   sección metía a ese único hijo en la primera celda nada más, dejando
   las tarjetas pegadas a la izquierda y a la mitad del ancho. */
.inm-como-funciona__grid { margin-top: -40px; position: relative; z-index: 5; }
.inm-como-funciona__columna { background: #fff; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-lg); padding: 32px; box-shadow: var(--inm-sombra); }
.inm-como-funciona__cabecera { text-align: center; margin-bottom: 28px; }
.inm-como-funciona__icono { font-size: 40px; display: block; margin-bottom: 8px; }
.inm-como-funciona__cabecera h2 { font-size: 22px; }
.inm-como-funciona__cabecera p { margin: 0; }

/* ---------- Contacto ---------- */

.inm-contacto__grid { margin-top: -40px; position: relative; z-index: 5; }
.inm-contacto__form { background: #fff; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-lg); padding: 32px; box-shadow: var(--inm-sombra); }
.inm-contacto__info { background: var(--inm-primario-50); border-radius: var(--inm-radio-lg); padding: 32px; }
.inm-contacto__info h3 { margin-top: 0; }
.inm-contacto__info a { color: var(--inm-primario-700); font-weight: 600; }

.inm-pasos { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 22px; }
.inm-paso { display: flex; gap: 14px; align-items: flex-start; }
.inm-paso__numero {
	flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
	background: var(--inm-primario-100); color: var(--inm-primario-900);
	font-weight: 800; font-size: 14px;
	display: flex; align-items: center; justify-content: center;
}
.inm-paso h3 { font-size: 16px; margin: 0 0 4px; }
.inm-paso p { font-size: 14px; margin: 0; }

.inm-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.inm-faq__item { background: #fff; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-md); padding: 20px; transition: box-shadow .3s var(--inm-ease), transform .3s var(--inm-ease); }
.inm-faq__item:hover { box-shadow: var(--inm-sombra); transform: translateY(-3px); }
.inm-faq__item h3 { font-size: 15px; }
.inm-faq__item p { font-size: 14px; margin: 0; }

/* ---------- App shell (panel / cuenta) ---------- */

.inm-app { min-height: 100vh; display: flex; flex-direction: column; background: var(--inm-fondo); }
.inm-app__topbar {
	display: flex; align-items: center; gap: 16px;
	padding: 14px 24px; background: #fff; border-bottom: 1px solid var(--inm-borde);
	position: sticky; top: 0; z-index: 30;
}
.inm-app__topbar-usuario { margin-left: auto; display: flex; align-items: center; gap: 12px; font-weight: 600; }
.inm-app__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; }
.inm-app__toggle span { width: 20px; height: 2px; background: var(--inm-tinta-900); }

.inm-app__body { display: flex; flex: 1; }
.inm-app__sidebar {
	width: 240px; flex: 0 0 auto; background: #fff; border-right: 1px solid var(--inm-borde);
	padding: 20px 12px; display: flex; flex-direction: column; gap: 4px;
}
.inm-app__nav-item { padding: 10px 14px; border-radius: var(--inm-radio-sm); font-weight: 600; color: var(--inm-tinta-700); transition: background-color .2s var(--inm-ease), color .2s var(--inm-ease), transform .2s var(--inm-ease); }
.inm-app__nav-item:hover { background: var(--inm-primario-50); transform: translateX(2px); }
.inm-app__nav-item.is-activo { background: var(--inm-primario-100); color: var(--inm-primario-900); }

.inm-app__main { flex: 1; min-width: 0; padding: 32px; background: var(--inm-fondo); min-height: 100vh; }
.inm-app__main--centrado { display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 24px; }
.inm-app__titulo { font-size: 26px; font-weight: 800; margin-bottom: 24px; letter-spacing: -.02em; }
.inm-app__subtitulo { font-size: 16px; font-weight: 700; color: var(--inm-tinta-700); }

.inm-aviso-estado { max-width: 420px; }
.inm-aviso-estado--ancho { max-width: 640px; margin: 0 auto 24px; text-align: left; }
form.inm-aviso-estado--ancho { margin-bottom: 0; }
.inm-campo__archivo-actual { font-size: 13px; color: var(--inm-tinta-500); margin: 0 0 6px; }
.inm-campo__archivo-actual a { color: var(--inm-primario-700); font-weight: 600; }

.inm-tabla-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-lg); box-shadow: var(--inm-sombra); }
.inm-tabla { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--inm-radio-lg); overflow: hidden; }
.inm-tabla th { text-align: left; padding: 14px 18px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--inm-tinta-500); background: var(--inm-fondo); border-bottom: 1px solid var(--inm-borde); }
.inm-tabla td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--inm-borde); font-size: 14px; }
.inm-tabla tbody tr { transition: background-color .2s var(--inm-ease); }
.inm-tabla tbody tr:last-child td { border-bottom: none; }
.inm-tabla tbody tr:hover { background: var(--inm-primario-50); }
.inm-tabla__acciones { display: flex; gap: 8px; }

.inm-form-propiedad { background: #fff; border-radius: var(--inm-radio-lg); padding: 28px; border: 1px solid var(--inm-borde); box-shadow: var(--inm-sombra); }
.inm-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.inm-campo-direccion { display: flex; gap: 8px; }
.inm-campo-precio { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inm-campo-precio select { flex: 0 0 68px; }
.inm-campo-precio input { flex: 1 1 120px; min-width: 0; }
.inm-campo-precio__sep { color: var(--inm-tinta-500); flex: 0 0 auto; }
.inm-campo-direccion input { flex: 1 1 auto; }
.inm-campo-direccion .inm-btn { flex: 0 0 auto; white-space: nowrap; }
.inm-campo--ancho { grid-column: 1 / -1; }
.inm-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 8px; }
.inm-checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; }
.inm-checkbox input { width: auto; }
/* Cuando el texto es largo (p. ej. aceptar términos) y hace salto de
   línea, alinea la casilla arriba en vez de centrada verticalmente. */
.inm-checkbox:has(span) { align-items: flex-start; }
.inm-checkbox input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; }
.inm-checkbox a { color: var(--inm-primario-700); font-weight: 600; text-decoration: underline; }
.inm-ayuda { font-size: 13px; color: var(--inm-tinta-500); margin: 0 0 6px; }

.inm-lista-procesos { display: flex; flex-direction: column; gap: 14px; }
.inm-proceso-card { background: #fff; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-lg); padding: 20px 22px; box-shadow: var(--inm-sombra); transition: box-shadow .3s var(--inm-ease), transform .3s var(--inm-ease); }
.inm-proceso-card:hover { box-shadow: var(--inm-sombra-fuerte); transform: translateY(-2px); }
.inm-proceso-card__cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.inm-proceso-card__cabecera strong, .inm-proceso-card__cabecera a { font-size: 16px; font-weight: 700; }
.inm-proceso-card__mensaje { font-style: italic; color: var(--inm-tinta-500); }
.inm-proceso-card__contacto { font-size: 14px; }
.inm-proceso-card__contacto--oculto { color: var(--inm-tinta-300); }
.inm-proceso-card__acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.inm-proceso-card__acciones select, .inm-proceso-card__acciones input[type=text] { border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-sm); padding: 8px 10px; font-size: 13px; transition: border-color .2s var(--inm-ease); }

/* ---------- Stepper lineal del CRM (etapas de una solicitud) ---------- */

.inm-crm-stepper { display: flex; align-items: flex-start; margin: 18px 0 8px; overflow-x: auto; }
.inm-crm-stepper__paso {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	background: none; border: none; flex: 1 1 0; min-width: 84px; position: relative; padding: 0 4px 4px;
	color: var(--inm-tinta-500); font-size: 11px; font-weight: 700; text-align: center; cursor: pointer;
}
.inm-crm-stepper__paso:disabled { cursor: default; }
.inm-crm-stepper__paso:not(:last-child)::after {
	content: ''; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: var(--inm-borde); z-index: 0;
}
.inm-crm-stepper__paso.is-completado:not(:last-child)::after,
.inm-crm-stepper__paso.is-actual:not(:last-child)::after { background: var(--inm-primario-600); }
.inm-crm-stepper__circulo {
	width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: #fff; border: 2px solid var(--inm-borde); color: var(--inm-tinta-300); font-size: 13px; font-weight: 800;
	position: relative; z-index: 1; transition: background-color .2s var(--inm-ease), border-color .2s var(--inm-ease), box-shadow .2s var(--inm-ease);
}
.inm-crm-stepper__paso.is-completado .inm-crm-stepper__circulo { background: var(--inm-primario-600); border-color: var(--inm-primario-600); color: #fff; }
.inm-crm-stepper__paso.is-actual .inm-crm-stepper__circulo { background: var(--inm-primario-900); border-color: var(--inm-primario-900); color: #fff; box-shadow: 0 0 0 4px var(--inm-primario-100); }
.inm-crm-stepper__paso.is-actual .inm-crm-stepper__texto { color: var(--inm-primario-900); }
.inm-crm-stepper__paso.is-completado .inm-crm-stepper__texto { color: var(--inm-tinta-700); }
.inm-crm-stepper__paso:not(:disabled):hover .inm-crm-stepper__circulo { border-color: var(--inm-primario-600); }
.inm-crm-cancelar { display: inline-block; margin-top: 4px; background: none; border: none; color: var(--inm-rojo); font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0; }

/* Nota al cambiar de etapa: un campo normal dentro de la página, no una
   ventana flotante — la nota es solo una anotación del cambio, aunque
   por dentro sí siga avisándole por correo al visitante. */
.inm-crm-nota-etapa { background: var(--inm-primario-50); border: 1px solid var(--inm-primario-100); border-radius: var(--inm-radio-md); padding: 14px 16px; margin-top: 12px; }
.inm-crm-nota-etapa__titulo { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--inm-primario-900); }
.inm-crm-nota-etapa textarea { width: 100%; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-sm); padding: 10px 12px; font-size: 14px; font-family: inherit; resize: vertical; }
.inm-crm-nota-etapa__acciones { display: flex; gap: 8px; margin-top: 10px; }

.inm-etiqueta-etapa { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--inm-primario-100); color: var(--inm-primario-900); white-space: nowrap; }
.inm-etiqueta-etapa--nuevo { background: #fdf1d6; color: #8a5c00; }
.inm-etiqueta-etapa--aceptado { background: var(--inm-primario-100); color: var(--inm-primario-900); }
.inm-etiqueta-etapa--en_gestion { background: #ffe4d9; color: var(--inm-acento-oscuro); }
.inm-etiqueta-etapa--cerrado { background: #e6e6e6; color: #444; }
.inm-etiqueta-etapa--cancelado { background: #fdeceb; color: var(--inm-rojo); }

.inm-timeline { list-style: none; padding: 0; margin: 14px 0 0; border-top: 1px dashed var(--inm-borde); }
.inm-timeline li { padding: 10px 0; border-bottom: 1px dashed var(--inm-borde); font-size: 14px; }
.inm-timeline__fecha { display: block; font-size: 12px; color: var(--inm-tinta-300); }
.inm-timeline__autor { display: block; font-size: 12px; color: var(--inm-tinta-500); margin-top: 2px; }

/* ---------- Detalle de una solicitud (CRM) ---------- */
.inm-enlace-volver { display: inline-block; margin-bottom: 16px; color: var(--inm-primario-700); font-weight: 600; text-decoration: none; }
.inm-enlace-volver:hover { text-decoration: underline; }
.inm-proceso-detalle__cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.inm-etiqueta-etapa--grande { font-size: 14px; padding: 8px 16px; }
.inm-proceso-detalle__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; }
.inm-proceso-detalle__principal, .inm-proceso-detalle__historial { background: #fff; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-lg); padding: 24px; box-shadow: var(--inm-sombra); }
.inm-proceso-detalle__historial h4, .inm-proceso-detalle__principal h4 { margin-top: 0; }

.inm-perfil { background: #fff; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-lg); padding: 28px; max-width: 480px; box-shadow: var(--inm-sombra); }
.inm-perfil p { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--inm-borde); font-size: 14px; }
.inm-perfil p:last-child { border-bottom: none; }
.inm-perfil p strong { color: var(--inm-tinta-500); font-weight: 600; }

/* ---------- Uso de plan / límite ---------- */
.inm-uso-plan { background: var(--inm-primario-50); border-radius: var(--inm-radio-md); padding: 12px 16px; margin-bottom: 20px; font-size: 14px; }
.inm-uso-plan a { color: var(--inm-primario-700); font-weight: 600; margin-left: 8px; }

/* ---------- Mis propiedades: tarjetas a la izquierda, mapa fijo a la derecha ---------- */

.inm-mis-propiedades { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
/* min-width: 0 en los dos hijos del grid: por defecto un track "1fr" no
   encoge más allá del ancho mínimo de su contenido, así que sin esto una
   tarjeta con texto largo (ej. el botón "Marcar vendida/alquilada") empuja
   toda la columna más ancha que la pantalla — el navegador responde
   haciendo zoom out y dejando la página con scroll horizontal en móvil. */
.inm-mis-propiedades__lista { display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - var(--inm-header-alto, 76px) - 64px); overflow-y: auto; padding-right: 6px; min-width: 0; }
.inm-mis-propiedades__mapa { position: sticky; top: calc(var(--inm-header-alto, 76px) + 32px); min-width: 0; }
.inm-mis-propiedades__mapa .inm-mapa { height: calc(100vh - var(--inm-header-alto, 76px) - 64px); border-radius: var(--inm-radio-lg); overflow: hidden; box-shadow: var(--inm-sombra); }

.inm-propiedad-card { display: flex; gap: 14px; min-width: 0; background: #fff; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-lg); padding: 14px; box-shadow: var(--inm-sombra); transition: box-shadow .3s var(--inm-ease); }
.inm-propiedad-card:hover { box-shadow: var(--inm-sombra-fuerte); }
.inm-propiedad-card__img { width: 120px; height: 96px; flex: 0 0 auto; border-radius: var(--inm-radio-md); overflow: hidden; background: var(--inm-primario-50); }
.inm-propiedad-card__img img { width: 100%; height: 100%; object-fit: cover; }
.inm-propiedad-card__img .inm-tarjeta__img-vacia { font-size: 28px; }
.inm-propiedad-card__cuerpo { flex: 1 1 auto; min-width: 0; }
.inm-propiedad-card__precio { display: block; font-weight: 800; color: var(--inm-primario-700); font-size: 16px; }
.inm-propiedad-card__titulo { font-size: 15px; margin: 2px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inm-propiedad-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--inm-tinta-500); margin: 0 0 10px; }
.inm-propiedad-card__acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.inm-aviso-limite { background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--inm-radio-lg); padding: 24px; max-width: 560px; }
.inm-aviso-limite h3 { margin-top: 0; }
.inm-aviso-info { background: var(--inm-primario-50); border-radius: var(--inm-radio-md); padding: 12px 16px; margin-bottom: 16px; }
.inm-aviso-info--error { background: #fdeceb; color: var(--inm-rojo); }

/* ---------- Analítica ---------- */
.inm-analitica-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 16px; margin-bottom: 24px; }
.inm-analitica-tarjeta { background: #fff; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-lg); padding: 20px; text-align: center; }
.inm-analitica-tarjeta__numero { display: block; font-size: 28px; font-weight: 800; color: var(--inm-primario-700); }
.inm-analitica-tarjeta__etiqueta { font-size: 13px; color: var(--inm-tinta-500); }
#inm-grafica-vistas { background: #fff; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-lg); padding: 20px; max-width: 100%; }

/* ---------- Planes ---------- */
.inm-aviso-marketing { background: var(--inm-primario-100); color: var(--inm-primario-900); border-radius: var(--inm-radio-md); padding: 14px 18px; margin: 16px 0 24px; font-size: 14px; font-weight: 600; }
.inm-planes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 20px; }
.inm-plan-tarjeta { background: #fff; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-lg); padding: 24px; transition: box-shadow .3s var(--inm-ease), transform .3s var(--inm-ease); }
.inm-plan-tarjeta:hover { box-shadow: var(--inm-sombra); transform: translateY(-3px); }
.inm-plan-tarjeta.is-actual { border-color: var(--inm-primario-600); box-shadow: 0 0 0 2px var(--inm-primario-100); }
.inm-plan-tarjeta__precio { font-size: 24px; font-weight: 800; color: var(--inm-primario-700); }
.inm-plan-tarjeta__precio small { font-size: 13px; font-weight: 400; color: var(--inm-tinta-500); }

/* ---------- Hilo de mensajes dentro de un proceso ---------- */
.inm-hilo-mensajes { margin-top: 14px; border-top: 1px dashed var(--inm-borde); padding-top: 12px; }
.inm-hilo-mensajes__lista { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.inm-hilo-mensajes__item { background: var(--inm-fondo); border-radius: var(--inm-radio-sm); padding: 8px 12px; font-size: 13px; }
.inm-hilo-mensajes__item strong { margin-right: 6px; }
.inm-hilo-mensajes__item span { color: var(--inm-tinta-300); font-size: 11px; }
.inm-hilo-mensajes__item p { margin: 4px 0 0; color: var(--inm-tinta-700); }
.inm-hilo-mensajes__item--publicador { background: var(--inm-primario-50); }
.inm-hilo-mensajes__form { display: flex; gap: 8px; }
.inm-hilo-mensajes__form input { flex: 1 1 auto; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-sm); padding: 8px 10px; font-size: 13px; }

/* ---------- Prueba gratuita / cuenta bloqueada ---------- */

.inm-aviso-prueba { background: var(--inm-primario-50); border: 1px solid var(--inm-primario-100); border-radius: var(--inm-radio-md); padding: 12px 16px; margin-bottom: 20px; font-size: 14px; }
.inm-aviso-prueba a { color: var(--inm-primario-700); font-weight: 600; margin-left: 8px; }
.inm-aviso-bloqueo { background: #fff7ed; border: 1px solid #fdba74; border-radius: var(--inm-radio-lg); padding: 20px 24px; margin-bottom: 20px; }
.inm-aviso-bloqueo h3 { margin: 0 0 6px; }
.inm-aviso-bloqueo p { margin: 0; color: var(--inm-tinta-700); }
.inm-cuenta-regresiva { background: var(--inm-primario-50); border-radius: var(--inm-radio-md); padding: 12px 16px; font-weight: 600; }
.inm-cuenta-regresiva--vencida { background: #fff7ed; color: #9a3412; }

/* ---------- CRM: notas y tareas de seguimiento ---------- */

.inm-crm-seguimiento { margin-top: 14px; border-top: 1px dashed var(--inm-borde); padding-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.inm-crm-seguimiento__col { display: flex; flex-direction: column; }
.inm-crm-seguimiento__col h4 { margin: 0 0 10px; font-size: 14px; cursor: help; }
.inm-crm-seguimiento__col .inm-crm-form { margin-top: auto; }
.inm-crm-notas, .inm-crm-tareas { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 180px; overflow-y: auto; }
.inm-crm-notas li { background: var(--inm-fondo); border-radius: var(--inm-radio-sm); padding: 8px 12px; }
.inm-crm-notas__fecha { color: var(--inm-tinta-300); font-size: 11px; }
.inm-crm-notas p { margin: 4px 0 0; font-size: 13px; color: var(--inm-tinta-700); }
.inm-crm-tareas li { background: var(--inm-fondo); border-radius: var(--inm-radio-sm); padding: 8px 12px; font-size: 13px; }
.inm-crm-tareas li.is-hecha { opacity: .55; text-decoration: line-through; }
.inm-crm-tareas label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.inm-crm-tareas__fecha { margin-left: auto; font-size: 11px; color: var(--inm-tinta-300); text-decoration: none; }
/* Cada campo en su propia línea, con el botón siempre debajo — así las
   dos columnas (notas / tareas) guardan la misma forma sin importar que
   una tenga un campo y la otra dos (texto + fecha). */
.inm-crm-form { display: flex; flex-direction: column; gap: 8px; }
.inm-crm-form input[type="text"], .inm-crm-form input[type="date"] { width: 100%; border: 1px solid var(--inm-borde); border-radius: var(--inm-radio-sm); padding: 8px 10px; font-size: 13px; }
.inm-crm-form button { align-self: flex-start; }

/* ---------- Compositor de mensajes (estilo Gmail: ventana anclada abajo a la derecha) ---------- */

.inm-compositor {
	position: fixed; bottom: 0; right: 24px; width: 380px; max-width: calc(100vw - 32px);
	background: #fff; border-radius: 12px 12px 0 0; box-shadow: 0 16px 48px rgba(20, 9, 41, .28);
	z-index: 200; overflow: hidden;
	transform: translateY(24px); opacity: 0; pointer-events: none;
	transition: transform .25s var(--inm-ease), opacity .25s var(--inm-ease);
}
.inm-compositor.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.inm-compositor__cabecera {
	background: var(--inm-primario-900); color: #fff; padding: 12px 16px;
	display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 14px;
}
.inm-compositor__cabecera button {
	background: none; border: none; color: #fff; font-size: 20px; line-height: 1; opacity: .8;
}
.inm-compositor__cabecera button:hover { opacity: 1; }
.inm-compositor form { display: flex; flex-direction: column; }
.inm-compositor textarea {
	border: none; resize: vertical; min-height: 160px; font-family: inherit; font-size: 14px;
	padding: 16px; color: var(--inm-tinta-900);
}
.inm-compositor textarea:focus { outline: none; }
.inm-compositor__pie { display: flex; justify-content: flex-end; padding: 0 16px 14px; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
	.inm-ficha__grid { grid-template-columns: 1fr; }
	.inm-tarjeta-contacto { position: static; }
	.inm-filtros { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
	.inm-filtro-pill summary, .inm-filtros__ubicacion { white-space: nowrap; }
	.inm-filtros__ubicacion { flex: 0 0 220px; }
	.inm-cta-doble__grid { grid-template-columns: 1fr; }
	/* Las 3 columnas del CTA doble (25% / 50% / 25%) son anchos pensados
	   para escritorio — Elementor solo las hace angostas al 100% en móvil
	   si se configura un ancho aparte por dispositivo, cosa que esta
	   siembra no hace, así que sin esto se verían las tres apretadas una
	   junto a otra en vez de apiladas. */
	.inm-cta-doble > .elementor-container > .elementor-column { width: 100%; }
	.inm-lead-form__fila { flex-wrap: wrap; }
	.inm-lead-form__moneda { flex: 1 1 100px; }
	.inm-como-funciona__grid { margin-top: -24px; }
	.inm-contacto__grid { margin-top: -24px; }
	.inm-footer__inner { grid-template-columns: 1fr 1fr; }
	.inm-crm-seguimiento { grid-template-columns: 1fr; }
	.inm-proceso-detalle__grid { grid-template-columns: 1fr; }

	/* Tarjetas y mapa: en escritorio se ven los dos a la vez (mitad y
	   mitad); en móvil no caben lado a lado, así que se muestra solo uno
	   de los dos a pantalla completa y un botón flotante alterna entre
	   ambos (igual que Zillow/KW en su versión móvil), en vez de apilar
	   las tarjetas arriba del mapa como antes. */
	.inm-resultados, .inm-mis-propiedades { grid-template-columns: 1fr; }
	.inm-resultados__lista, .inm-mis-propiedades__lista { max-height: none; overflow-y: visible; padding: 16px; }
	.inm-resultados__mapa, .inm-mis-propiedades__mapa { position: static; display: none; }
	.inm-resultados__mapa .inm-mapa, .inm-mis-propiedades__mapa .inm-mapa { height: calc(100vh - var(--inm-header-alto, 64px)); border-radius: 0; }
	.inm-resultados.is-mapa-vista .inm-resultados__lista,
	.inm-mis-propiedades.is-mapa-vista .inm-mis-propiedades__lista { display: none; }
	.inm-resultados.is-mapa-vista .inm-resultados__mapa,
	.inm-mis-propiedades.is-mapa-vista .inm-mis-propiedades__mapa { display: block; }

	.inm-toggle-vista { display: flex; }
}

/* ---------- Evitar el zoom automático de Safari/iOS en formularios ----------
   Cuando un input/select/textarea tiene letra más chica de 16px, Safari en
   iPhone hace zoom solo al tocarlo (para que se pueda leer) — el sitio se ve
   "deformado" hasta que el usuario vuelve a alejar. Casi todos los campos
   del sitio usan 13-14px por diseño; esto los sube a 16px SOLO en pantallas
   chicas (en escritorio se ven exactamente igual que antes), que es
   suficiente para que ningún navegador móvil dispare ese zoom. */
@media (max-width: 767px) {
	input, select, textarea { font-size: 16px !important; }
}

@media (max-width: 780px) {
	/* Header compacto: todo en una sola fila, sin que los botones se
	   encimen. Textos más cortos, logo más chico y el botón del menú
	   queda solo con el ícono (sin la palabra "Menú"). */
	.inm-header__inner { padding: 12px 16px; gap: 10px; }
	.inm-logo { font-size: 16px; gap: 6px; }
	.inm-logo__img { height: 26px; }
	.inm-header__acciones { gap: 8px; }
	.inm-header__acciones .inm-btn { padding: 9px 13px; font-size: 13px; }
	.inm-txt-corto { display: inline; }
	.inm-txt-completo { display: none; }
	.inm-btn--usuario { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
	.inm-nav-toggle { padding: 9px; width: 38px; justify-content: center; }
	.inm-nav-toggle__texto { display: none; }

	/* El buscador pasa a una cuadrícula de 2 columnas en vez de apilar cada
	   campo en su propia fila: reduce a la mitad el alto en móvil y agrupa
	   Ubicación (ancho completo) y el rango de precio (min/máx en pareja). */
	.inm-buscador { grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
	.inm-buscador__campo--operacion,
	.inm-buscador__campo--categoria,
	.inm-buscador__campo--precio { grid-column: span 1; }
	.inm-buscador__campo--ancha { grid-column: 1 / -1; }
	.inm-buscador__enviar { grid-column: 1 / -1; padding: 14px 22px; font-size: 16px; margin-top: 4px; }
	.inm-form-grid { grid-template-columns: 1fr; }

	/* En móvil el buscador ocupa varias filas (queda más alto que en
	   escritorio) — el mismo -48px que en escritorio lo "flotaba" sobre el
	   hero terminaba tapando la última línea del texto de abajo del
	   título. Aquí ya no hace falta ese jalón hacia arriba. */
	.inm-hero { padding-bottom: 32px; }
	.inm-hero__buscador .inm-buscador { margin-top: 12px; }

	.inm-app__sidebar {
		position: fixed; top: 0; left: 0; height: 100vh; width: 240px;
		transform: translateX(-100%); transition: transform .35s var(--inm-ease); z-index: 35;
	}
	.inm-app__sidebar.is-abierto { transform: translateX(0); }
	.inm-app__toggle { display: flex; }
	.inm-app__main { padding: 20px; }

	.inm-footer__inner { grid-template-columns: 1fr; }
}

/* ---------- Compatibilidad con Elementor ----------
   Las páginas editables con Elementor (Inicio, Cómo funciona, Contacto,
   Quiénes somos) usan el ancho "Boxed" nativo de cada sección para
   centrar el contenido — eso reemplaza a .inm-contenedor, pero a
   diferencia de .inm-contenedor no trae relleno lateral propio, así que
   en pantallas angostas el texto tocaría el borde de la pantalla. Esto
   le agrega ese mismo margen de aire a los lados. */
.elementor-section.elementor-section-boxed > .elementor-container { padding: 0 20px; }

/* Cuando una sección tiene varias columnas (las tarjetas del CTA doble,
   las dos columnas de Cómo funciona/Contacto…), Elementor las coloca una
   pegada a la otra por defecto — el relleno que trae de fábrica queda
   por dentro de cada columna, no como separación entre ellas. Esto le
   agrega un espacio real entre columnas en cualquier sección. */
.elementor-section > .elementor-container { gap: 24px; }
@media (max-width: 767px) {
	.elementor-section > .elementor-container { row-gap: 20px; }
}

/* El widget nativo "Título" de Elementor trae su propio color/tipografía
   de fábrica (el "Kit" de Elementor: Roboto, azul claro) y lo aplica
   directo sobre el propio <h1>/<h2>/<h3> — con más especificidad que las
   reglas normales del tema (h1,h2,h3,h4 más abajo), así que sin esto
   ganaría la cascada y se vería un título azul de Elementor en vez del
   estilo de Inmoguate. Esto lo reemplaza por la tipografía y el color de
   texto normal del sitio… */
body .elementor-widget-heading .elementor-heading-title,
body .elementor-widget-text-editor { font-family: var(--inm-fuente); }
body .elementor-widget-heading .elementor-heading-title { color: var(--inm-tinta-900); }
/* …y vuelve a pintar de blanco los títulos que van sobre el fondo oscuro
   del hero y de las tarjetas del CTA doble, con un selector más
   específico que el de arriba para que sea el que gane ahí. */
body .inm-hero .elementor-widget-heading .elementor-heading-title,
body .inm-cta-doble__tarjeta .elementor-widget-heading .elementor-heading-title { color: #fff; }