/* ============================================================
   MexiCasas — Portada (front-page.php)
   Anatomía de portal (Zillow/QuintoAndar): hero fotográfico con
   buscador protagonista, tiles de ciudad, filas en carrusel y
   tres rutas. Solo variables de tokens.css. Mobile-first.
   ============================================================ */

/* ---------- Hero: panel de búsqueda sobre foto de hogar ---------- */

.mxc-hero {
	position: relative;
	overflow: hidden;
	padding-block: 40px;
}

.mxc-hero__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 66% 38%; /* deja libre la izquierda para el panel */
}

/* En móvil el panel tapa casi todo: la foto solo asoma; el velo la calma. */
.mxc-hero__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(47, 52, 65, 0.55) 0%, rgba(47, 52, 65, 0.18) 45%, rgba(47, 52, 65, 0) 70%);
}

/* Panel blanco de búsqueda (patrón QuintoAndar). */
.mxc-panel {
	position: relative;
	background: var(--mxc-bone);
	border-radius: var(--mxc-radius-lg);
	box-shadow: 0 20px 60px -20px rgba(47, 52, 65, 0.4);
	padding: 28px 24px 26px;
	max-width: 520px;
}

.mxc-panel__titulo {
	font-size: clamp(1.75rem, 4.2vw, 2.35rem);
	font-weight: 800;
	line-height: 1.15;
}

.mxc-panel__sub {
	margin: 10px 0 0;
	font-size: var(--mxc-text-sm);
	color: var(--mxc-ink-2);
}

.mxc-panel__form {
	display: grid;
	gap: 12px;
	margin-top: 22px;
}

.mxc-panel__fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.mxc-panel__btn {
	width: 100%;
	margin-top: 4px;
	font-size: var(--mxc-text-base);
}

/* Tabs Rentar / Comprar: subrayado, no píldora (referencia QuintoAndar). */
.mxc-tabs {
	display: flex;
	gap: 26px;
	border-bottom: 1px solid var(--mxc-line);
	margin-bottom: 6px;
}
.mxc-tabs label { position: relative; cursor: pointer; }
.mxc-tabs input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.mxc-tabs span {
	display: block;
	padding: 0 2px 12px;
	font-size: var(--mxc-text-base);
	font-weight: 600;
	color: var(--mxc-ink-3);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.mxc-tabs label:hover span { color: var(--mxc-ink-2); }
.mxc-tabs input:checked + span {
	color: var(--mxc-indigo);
	border-bottom-color: var(--mxc-indigo);
}
.mxc-tabs input:focus-visible + span {
	outline: 2px solid var(--mxc-indigo);
	outline-offset: 2px;
	border-radius: var(--mxc-radius-sm);
}

/* Campo con icono y label interior (bloque alto, tipo QuintoAndar). */
.mxc-campo-icono {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--mxc-bone);
	border: 1px solid var(--mxc-line-strong);
	border-radius: var(--mxc-radius);
	padding: 9px 14px;
	min-height: 66px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	min-width: 0;
}
.mxc-campo-icono > svg {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--mxc-ink-3);
}
.mxc-campo-icono > div { flex: 1; min-width: 0; }
.mxc-campo-icono:focus-within {
	border-color: var(--mxc-indigo);
	box-shadow: 0 0 0 3px var(--mxc-indigo-soft);
}

.mxc-campo-icono__label {
	display: block;
	font-size: var(--mxc-text-xs);
	font-weight: 600;
	color: var(--mxc-ink-2);
	margin-bottom: 1px;
}

.mxc-campo-icono__control {
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	background: transparent;
	font-family: var(--mxc-font-text);
	font-size: var(--mxc-text-base);
	color: var(--mxc-ink);
	min-width: 0;
	appearance: none;
	-webkit-appearance: none;
}
.mxc-campo-icono__control:focus { outline: none; }
.mxc-campo-icono__control::placeholder { color: var(--mxc-ink-3); }
select.mxc-campo-icono__control { cursor: pointer; }

@media (min-width: 900px) {
	.mxc-hero { padding-block: 64px; min-height: 620px; display: flex; align-items: center; }
	/* Hijo de un flex: sin width:100% hace shrink-to-fit y `margin:auto` centra
	   el panel. El panel vive a la IZQUIERDA (la foto respira a la derecha). */
	.mxc-hero > .mxc-container { width: 100%; }
	.mxc-hero__velo {
		background: linear-gradient(90deg, rgba(47, 52, 65, 0.34) 0%, rgba(47, 52, 65, 0.06) 42%, rgba(47, 52, 65, 0) 62%);
	}
	.mxc-panel { padding: 34px 32px 30px; }
}

/* ---------- Cabecera de sección (título + "Ver todas") ---------- */

.mxc-seccion__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

.mxc-seccion__titulo { font-size: var(--mxc-text-2xl); }

.mxc-seccion__ver {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: var(--mxc-text-sm);
	font-weight: 600;
	color: var(--mxc-indigo);
	text-decoration: none;
	white-space: nowrap;
}
.mxc-seccion__ver svg { width: 16px; height: 16px; }
.mxc-seccion__ver:hover { color: var(--mxc-indigo-deep); }
.mxc-seccion__ver:focus-visible { outline: 2px solid var(--mxc-indigo); outline-offset: 2px; border-radius: var(--mxc-radius-sm); }

/* ---------- Tiles de ciudad ---------- */

.mxc-ciudades { padding-bottom: 8px; }

.mxc-ciudades__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

@media (min-width: 700px) {
	.mxc-ciudades__grid { grid-template-columns: repeat(3, 1fr); gap: var(--mxc-gutter); }
}

.mxc-ciudad {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--mxc-radius-lg);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--mxc-shadow-card);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mxc-ciudad:hover { transform: translateY(-3px); box-shadow: var(--mxc-shadow-pop); }
.mxc-ciudad:focus-visible { outline: 3px solid var(--mxc-indigo); outline-offset: 2px; }

.mxc-ciudad img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.mxc-ciudad:hover img { transform: scale(1.045); }

.mxc-ciudad__velo {
	position: absolute;
	inset: 0;
	/* Tres paradas, no dos: con un gradiente lineal el texto sobre fotos de
	   cielo claro (Monterrey, Cancún) quedaba al filo del contraste mínimo.
	   La parada intermedia concentra la densidad justo bajo la línea de texto. */
	background: linear-gradient(
		180deg,
		rgba(47, 52, 65, 0) 28%,
		rgba(47, 52, 65, 0.5) 58%,
		rgba(47, 52, 65, 0.94) 100%
	);
}

.mxc-ciudad__datos {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mxc-ciudad__nombre {
	color: var(--mxc-bone);
	font-size: var(--mxc-text-lg);
	font-weight: 700;
	letter-spacing: -0.01em;
}
.mxc-ciudad__conteo {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--mxc-text-xs);
	font-weight: 500;
}

/* ---------- Filas en carrusel ---------- */

.mxc-fila-seccion { padding-block: 40px; }

.mxc-fila {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	/* Sin esto el snap arranca pegado al borde y decapita la primera tarjeta:
	   el snap ignora el padding de la pista. */
	scroll-padding-inline: max(var(--mxc-gutter), calc((100vw - var(--mxc-container)) / 2));
}
.mxc-fila::-webkit-scrollbar { display: none; }
.mxc-fila:focus-visible { outline: 2px solid var(--mxc-indigo); outline-offset: -2px; }

/* La pista NO usa .mxc-container: con overflow-x, `margin:0 auto` recorta la
   primera tarjeta contra el borde. El aire lateral se calcula para que la
   primera card quede alineada al contenedor y la última respire al scrollear. */
.mxc-fila__pista {
	display: flex;
	gap: 18px;
	max-width: none;
	margin: 0;
	padding-inline: max(var(--mxc-gutter), calc((100vw - var(--mxc-container)) / 2));
	padding-bottom: 6px;
	width: max-content;
}

.mxc-fila .mxc-card {
	flex: 0 0 min(330px, 80vw);
	max-width: none;
	scroll-snap-align: start;
}

/* ---------- Tres rutas ---------- */

.mxc-rutas { background: var(--mxc-bone); border-top: 1px solid var(--mxc-line); }

.mxc-rutas__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mxc-gutter);
}

@media (min-width: 900px) {
	.mxc-rutas__grid { grid-template-columns: repeat(3, 1fr); }
}

.mxc-ruta {
	display: flex;
	flex-direction: column;
	background: var(--mxc-bone);
	border: 1px solid var(--mxc-line);
	border-radius: var(--mxc-radius-lg);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--mxc-shadow-card);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mxc-ruta:hover { transform: translateY(-3px); box-shadow: var(--mxc-shadow-pop); }
.mxc-ruta:focus-visible { outline: 3px solid var(--mxc-indigo); outline-offset: 2px; }

.mxc-ruta img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.mxc-ruta__cuerpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 22px 24px 24px;
}
.mxc-ruta__titulo {
	font-family: var(--mxc-font-display);
	font-size: var(--mxc-text-xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mxc-ink);
}
.mxc-ruta__texto {
	font-size: var(--mxc-text-sm);
	line-height: 1.5;
	color: var(--mxc-ink-2);
}
.mxc-ruta__cta { margin-top: 8px; }

/* ---------- Banda corredores ---------- */

.mxc-home-corredores {
	background: var(--mxc-indigo);
	padding: 56px 0;
}

.mxc-home-corredores__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.mxc-home-corredores__titulo {
	font-size: var(--mxc-text-2xl);
	color: var(--mxc-bone);
}

.mxc-home-corredores__texto {
	font-size: var(--mxc-text-base);
	color: var(--mxc-indigo-soft);
	margin: 10px 0 0;
	max-width: 520px;
}

@media (min-width: 900px) {
	.mxc-home-corredores { padding: 72px 0; }

	.mxc-home-corredores__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--mxc-gutter);
	}
}