/**
 * Propiedades similares bajo la ficha — ml-similares.php v1.1.0
 *
 * ⭐ LA DECISIÓN QUE MANDA EN ESTA HOJA: este bloque NO puede robarle
 * protagonismo a la propiedad que el visitante vino a ver. Por eso es una sola
 * fila que se desplaza y no una retícula de dos, el fondo es el mismo blanco de
 * la ficha con un filete arriba en vez de una franja de color, y el encabezado
 * es visiblemente más pequeño que el H1 de la propiedad. Es un apéndice y tiene
 * que leerse como un apéndice.
 *
 * El molde de la tarjeta (`.flexmls-listing` y sus hijos) lo pinta la hoja del
 * propio plugin IDX, `flexmls-idx/assets/css/style.css`, que en la ficha YA
 * está cargada. Aquí sólo va el marco y los retoques.
 */

.ml-sim {
	--ml-ink:   #0A0A0A;
	--ml-paper: #F5F3EF;
	--ml-gold:  #C8A96E;
	--ml-navy:  #0E0E55;
	--ml-line:  #E5E1D8;
	--ml-muted: #6E6A63;
	--ml-serif: 'Cormorant Garamond', Georgia, serif;
	--ml-sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ml-tarjeta: 300px;

	display: block;
	margin: 3.5rem 0 0;
	padding: 2.25rem 0 0.5rem;
	border-top: 1px solid var(--ml-line);
}

.ml-sim-envoltura { max-width: 100%; }

/* --- Cabecera: título a la izquierda, flechas a la derecha --- */

.ml-sim-cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.4rem;
}

.ml-sim-titulo {
	font-family: var(--ml-serif);
	/* Deliberadamente por debajo del H1 de la propiedad: es un apéndice. */
	font-size: clamp(1.25rem, 1rem + .7vw, 1.6rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--ml-ink);
	margin: 0;
	letter-spacing: .01em;
}

.ml-sim-titulo::after {
	content: "";
	display: block;
	width: 2.25rem;
	height: 2px;
	margin-top: .6rem;
	background: var(--ml-gold);
}

.ml-sim-flechas { display: flex; gap: .5rem; flex: 0 0 auto; }

.ml-sim-flecha {
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--ml-line);
	border-radius: 50%;
	color: var(--ml-ink);
	font-size: .95rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}

.ml-sim-flecha:hover:not(:disabled) { border-color: var(--ml-gold); color: var(--ml-navy); }
.ml-sim-flecha:focus-visible { outline: 2px solid var(--ml-navy); outline-offset: 2px; }
.ml-sim-flecha:disabled { opacity: .3; cursor: default; }

/* En pantallas sin ratón las flechas sobran: se desliza con el dedo. */
@media (hover: none), (pointer: coarse) {
	.ml-sim-flechas { display: none; }
}

/* --- La pista --- */

.ml-sim-pista {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	/* Sitio para que la sombra del hover no se recorte contra el borde. */
	padding: .35rem .35rem 1.25rem;
	margin: 0 -.35rem;
	scrollbar-width: thin;
	scrollbar-color: var(--ml-line) transparent;
}

.ml-sim-pista:focus-visible { outline: 2px solid var(--ml-navy); outline-offset: 4px; }

.ml-sim-pista::-webkit-scrollbar { height: 4px; }
.ml-sim-pista::-webkit-scrollbar-track { background: transparent; }
.ml-sim-pista::-webkit-scrollbar-thumb { background: var(--ml-line); border-radius: 4px; }

/* --- Tarjetas --- */

.ml-sim .ml-sim-tarjeta {
	flex: 0 0 var(--ml-tarjeta);
	width: var(--ml-tarjeta);
	scroll-snap-align: start;
	display: block;
	background: #FFF;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	border: 1px solid var(--ml-line);
	transition: transform .35s cubic-bezier(.2,.75,.2,1), box-shadow .35s cubic-bezier(.2,.75,.2,1);
}

.ml-sim .ml-sim-tarjeta:hover,
.ml-sim .ml-sim-tarjeta:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(10,10,10,.10);
}

.ml-sim .ml-sim-tarjeta:focus-visible { outline: 2px solid var(--ml-navy); outline-offset: 2px; }

/* Proporción fija: sin esto cada foto empuja el contenido al cargar y el CLS
   de la ficha —hoy 0.432— empeoraría justo donde más duele. */
.ml-sim .flexmls-image-wrapper {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--ml-line);
	overflow: hidden;
}

.ml-sim .flexmls-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.2,.75,.2,1);
}

.ml-sim .ml-sim-tarjeta:hover .flexmls-image-wrapper img { transform: scale(1.04); }

.ml-sim .flexmls-content-wrapper { padding: .9rem 1rem 1.05rem; }

.ml-sim .flexmls-address {
	font-family: var(--ml-serif);
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--ml-ink);
	margin: 0 0 .4rem;
	/* Dos líneas: los títulos del MLS van de 8 a 70 caracteres y sin tope la
	   fila queda con las tarjetas de distinta altura. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}

.ml-sim .flexmls-price {
	font-family: var(--ml-sans);
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--ml-ink);
	margin: 0 0 .5rem;
}

.ml-sim .ml-sim-sin-precio { font-weight: 500; font-style: italic; color: var(--ml-muted); }

.ml-sim .flexmls-details {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .5rem;
	font-family: var(--ml-sans);
	font-size: .72rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

.ml-sim .flexmls-detail + .flexmls-detail::before {
	content: "·";
	margin-right: .5rem;
	color: var(--ml-gold);
}

/* --- Pie --- */

.ml-sim-pie {
	margin: .5rem 0 0;
	font-family: var(--ml-sans);
	font-size: .78rem;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.ml-sim-pie a {
	color: var(--ml-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--ml-line);
	padding-bottom: 2px;
	transition: color .25s ease, border-color .25s ease;
}

.ml-sim-pie a:hover { color: var(--ml-ink); border-color: var(--ml-gold); }

@media (max-width: 640px) {
	.ml-sim { --ml-tarjeta: 78vw; margin-top: 2.5rem; padding-top: 1.75rem; }
	.ml-sim-pista { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.ml-sim .ml-sim-tarjeta,
	.ml-sim .flexmls-image-wrapper img,
	.ml-sim-flecha { transition: none; }
	.ml-sim .ml-sim-tarjeta:hover { transform: none; }
	.ml-sim .ml-sim-tarjeta:hover .flexmls-image-wrapper img { transform: none; }
	.ml-sim-pista { scroll-behavior: auto; }
}