/* ==========================================================================
   Ficha de propiedad — Inmobiliaria Solís
   Hereda las variables --solis-* de buscador.css
   ========================================================================== */

.solis-ficha { color: var(--solis-texto); }

/* ------------------------------------------------------------- mosaico */

/* La galería rompe el contenedor y ocupa todo el ancho de la pantalla.
   El truco es sacarla media pantalla a la izquierda desde el centro de su
   caja; funciona sea cual sea el ancho del contenedor de Elementor. */
.solis-mosaico {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);

	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 6px;
	/* A sangre la celda grande queda más ancha; este alto la deja casi en 4:3,
	   que es el formato de casi todas las fotos, y así apenas se ven bandas. */
	height: clamp(300px, 38vw, 580px);
	overflow: hidden;
	margin-bottom: 34px;
	background: var(--solis-fondo);

	/* Margen que alinea lo que va encima de la foto con la columna de texto
	   de abajo: sin esto, a sangre, se pegaban al borde de la pantalla. */
	--borde: max(16px, calc((100vw - 1200px) / 2));
}

/* A sangre no lleva esquinas redondeadas: se pegan a los bordes. */

/* 100vw incluye la barra de desplazamiento, así que la galería sobresale unos
   píxeles y aparecería un scroll horizontal. Con "clip" se recorta ese sobrante
   sin crear un contenedor de scroll, que rompería la barra lateral pegajosa. */
body { overflow-x: clip; }

.solis-mosaico__item {
	display: block;
	position: relative;
	overflow: hidden;
	line-height: 0;
	background: var(--solis-fondo);
}

/* Relleno: la propia foto ampliada y desenfocada, para no dejar bandas
   grises cuando la imagen no cubre toda la caja. */
.solis-mosaico__item::before {
	content: '';
	position: absolute;
	inset: -8%;
	background-image: var(--solis-fondo-foto);
	background-size: cover;
	background-position: center;
	filter: blur(18px) brightness(.92);
	transform: scale(1.1);
}

.solis-mosaico .solis-mosaico__item img {
	/* Absoluta a propósito: con height:100% el navegador no resolvía la
	   altura (el enlace no tiene una definida) y la imagen se salía de la
	   caja, que la recortaba. Así el object-fit sí tiene contra qué encajar. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Entera, sin recortar: hay planos verticales donde el recorte
	   se comía el precio y la ficha de datos. */
	object-fit: contain;
	display: block;
	transition: transform .45s ease;
}

.solis-mosaico .solis-mosaico__item:hover img { transform: scale(1.04); }

/* La primera foto ocupa toda la columna izquierda. */
.solis-mosaico__item:first-of-type { grid-row: 1 / span 2; }

/* Con pocas fotos, la grande se lleva el espacio que sobra. */
.solis-mosaico--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.solis-mosaico--2 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; }
.solis-mosaico--2 .solis-mosaico__item:first-of-type { grid-row: 1; }
.solis-mosaico--3 { grid-template-columns: 2fr 1fr; }
.solis-mosaico--4 { grid-template-columns: 2fr 1fr 1fr; }
.solis-mosaico--4 .solis-mosaico__item:nth-of-type(4) { grid-column: 2 / span 2; }

.solis-badges--mosaico { top: 18px; left: var(--borde); }

.solis-mosaico__contador {
	/* El Kit de Elementor pinta cualquier <button> de naranja: lo anulamos. */
	background: #fff !important;
	color: var(--solis-texto) !important;
	position: absolute;
	right: var(--borde);
	bottom: 18px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
	transition: transform .18s;
}

.solis-mosaico__contador:hover { transform: translateY(-1px); }
.solis-mosaico__contador svg { width: 18px; height: 18px; }

/* --------------------------------------------------------- estructura */

.solis-ficha__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 344px;
	gap: 40px;
	align-items: start;
}

.solis-ficha__principal { min-width: 0; }

/* --------------------------------------------------------- cabecera */

.solis-ficha__cabecera {
	padding-bottom: 22px;
	border-bottom: 1px solid var(--solis-borde);
	margin-bottom: 26px;
}

.solis-ficha__estado {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--solis-gris);
}

.solis-punto {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--solis-naranja);
	display: inline-block;
}

.solis-ficha__precio-fila {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}

.solis-ficha__precio {
	font-size: clamp(30px, 4vw, 40px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.solis-ficha__precio--consultar { font-size: 26px; color: var(--solis-gris); }
.solis-ficha__precio-alt { font-size: 20px; font-weight: 600; color: var(--solis-gris); }

.solis-ficha__specs {
	margin: 12px 0 0;
	font-size: 17px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.solis-ficha__specs b { font-weight: 700; }
.solis-sep { color: #C9C9C9; }

.solis-ficha__titulo {
	margin: 16px 0 8px;
	font-size: clamp(20px, 2.4vw, 26px) !important;
	font-weight: 700;
	line-height: 1.32;
}

.solis-ficha__dir {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--solis-gris);
	font-size: 15px;
}

.solis-ficha__dir svg { width: 18px; height: 18px; flex: 0 0 auto; }
.solis-ficha__dir--mapa { margin-bottom: 14px; }

/* --------------------------------------------------------- recursos */

.solis-recursos {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.solis-recurso {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px;
	border: 1px solid var(--solis-borde);
	border-radius: 10px;
	background: #fff;
	color: var(--solis-texto) !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all .18s;
}

.solis-recurso:hover {
	border-color: var(--solis-naranja);
	color: var(--solis-naranja) !important;
	box-shadow: 0 2px 10px rgba(250, 100, 7, .12);
}

.solis-recurso svg { width: 19px; height: 19px; }

/* --------------------------------------------------------- bloques */

.solis-bloque {
	padding: 26px 0;
	border-top: 1px solid var(--solis-borde);
}

.solis-bloque__titulo {
	margin: 0 0 16px !important;
	font-size: 21px !important;
	font-weight: 700;
}

.solis-ficha__resumen {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 12px;
}

.solis-ficha__texto {
	font-size: 15px;
	line-height: 1.75;
	color: #3A3A3A;
}

.solis-ficha__texto p { margin: 0 0 12px; }

/* Descripción recortada hasta que se pulsa "Ver más". */
.solis-ficha__texto.esta-recortado {
	max-height: 190px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(#000 60%, transparent);
	mask-image: linear-gradient(#000 60%, transparent);
}

.solis-vermas {
	margin-top: 6px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--solis-naranja) !important;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: underline;
}

.solis-vermas:hover { color: var(--solis-naranja-oscuro) !important; background: none !important; }

/* --------------------------------------------------------- detalles */

.solis-detalles {
	margin: 0;
	column-count: 2;
	column-gap: 44px;
}

.solis-detalles__fila {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid #F0F0F0;
	font-size: 15px;
}

.solis-detalles__fila dt {
	color: var(--solis-gris);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.solis-detalles__fila dt svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--solis-naranja);
}
.solis-detalles__fila dd { margin: 0; font-weight: 600; text-align: right; }

@media (max-width: 620px) {
	.solis-detalles { column-count: 1; }
}

/* --------------------------------------------------------- mapa */

.solis-mapa {
	border-radius: var(--solis-radio);
	overflow: hidden;
	border: 1px solid var(--solis-borde);
	line-height: 0;
}

.solis-mapa iframe { width: 100%; height: 460px; border: 0; display: block; }

/* --------------------------------------------------------- lateral */

.solis-lateral {
	position: sticky;
	top: 24px;
	border: 1px solid var(--solis-borde);
	border-radius: var(--solis-radio);
	background: #fff;
	padding: 22px;
	box-shadow: 0 3px 16px rgba(0, 0, 0, .07);
}

.solis-agente {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--solis-borde);
	margin-bottom: 16px;
}

.solis-lateral .solis-agente__foto {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.solis-agente__foto--vacia {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--solis-naranja);
	color: #fff;
	font-size: 22px;
	font-weight: 700;
}

.solis-agente p { margin: 0; }
.solis-agente__etiqueta { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--solis-gris); }
.solis-agente__nombre { font-size: 17px; font-weight: 700; line-height: 1.3; }
.solis-agente__cargo { font-size: 13px; color: var(--solis-gris); }

.solis-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 13px 18px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	box-sizing: border-box;
	transition: all .18s;
	margin-bottom: 10px;
}

/* Todos los iconos de estos botones al mismo tamaño. Sin esto un SVG sin
   ancho propio se estira a lo que le dé la caja: así se veía el calendario
   de "Agendar una visita", enorme y empujando el texto a un lado. */
.solis-btn svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.solis-btn--wsp { background: #25D366; color: #fff !important; }
.solis-btn--wsp:hover { background: #1EB855; color: #fff !important; }

/* Verde oscuro de marca (el mismo del pie): queda claro que es la acción
   secundaria, sin pelearse con el naranja del formulario. */
.solis-btn--visita {
	background: #16211B;
	color: #fff !important;
}

.solis-btn--visita:hover { background: #24382D; color: #fff !important; }

.solis-btn--tel {
	background: #fff;
	color: var(--solis-texto) !important;
	border: 1px solid var(--solis-borde);
}

.solis-btn--tel:hover { border-color: var(--solis-naranja); color: var(--solis-naranja) !important; }

.solis-lateral__form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--solis-borde); }
.solis-lateral__titulo { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.solis-lateral__ayuda { margin: 0 0 12px; font-size: 13px; color: var(--solis-gris); }

/* El formulario heredado trae anchos y centrados del sitio antiguo. */
.solis-lateral__form .wpcf7-form-control-wrap input,
.solis-lateral__form .wpcf7-form-control-wrap textarea {
	width: 100% !important;
	padding: 10px 12px !important;
	border: 1px solid var(--solis-borde) !important;
	border-radius: 9px !important;
	font-size: 14px;
	text-align: left !important;
	box-sizing: border-box;
}

.solis-lateral__form .column-half,
.solis-lateral__form .column-full { width: 100% !important; float: none !important; padding: 0 !important; }
.solis-lateral__form .form-row { margin-bottom: 8px; }
.solis-lateral__form textarea { min-height: 90px; }

.solis-lateral__form input[type="submit"],
.solis-lateral__form .wpcf7-submit {
	width: 100%;
	padding: 13px 18px !important;
	border-radius: 10px !important;
	background: var(--solis-naranja) !important;
	color: #fff !important;
	border: 0 !important;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.solis-lateral__form input[type="submit"]:hover { background: var(--solis-naranja-oscuro) !important; }
.solis-lateral__form .wpcf7-list-item { margin: 0; }

.solis-lateral__form .wpcf7-acceptance .wpcf7-list-item-label,
.solis-lateral__form .wpcf7-checkbox .wpcf7-list-item-label {
	display: inline;
	font-size: 12.5px;
	color: var(--solis-gris);
	line-height: 1.45;
}

/* El formulario viene de Contact Form 7 y no trae foco visible propio. */
.solis-lateral__form .wpcf7-form-control-wrap input:focus,
.solis-lateral__form .wpcf7-form-control-wrap textarea:focus {
	outline: none;
	border-color: var(--solis-naranja) !important;
	box-shadow: 0 0 0 3px rgba(250, 100, 7, .13);
}

.solis-lateral__form p { margin: 0 0 10px; }

.solis-lateral__form .wpcf7-acceptance { display: block; margin: 4px 0 12px; }

.solis-lateral__form input[type="checkbox"] {
	margin-right: 6px;
	accent-color: var(--solis-naranja);
}

/* QR de la propiedad, debajo del formulario. */
.solis-lateral__qr {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
	padding: 14px;
	border: 1px dashed var(--solis-borde);
	border-radius: 12px;
	background: var(--solis-fondo);
}

.solis-lateral .solis-lateral__qr img {
	width: 112px;
	height: 112px;
	flex: 0 0 auto;
	border-radius: 8px;
	background: #fff;
	/* El PNG es más grande que la caja: nítido al reducir. */
	image-rendering: auto;
}

.solis-lateral__qr p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--solis-gris); }
.solis-lateral__qr b { display: block; margin-bottom: 3px; font-size: 14px; color: var(--solis-texto); }

.solis-lateral__form .wpcf7-not-valid-tip { font-size: 12px; margin-top: 3px; }
.solis-lateral__form .wpcf7-response-output {
	margin: 10px 0 0 !important;
	padding: 10px 12px !important;
	border-radius: 9px;
	font-size: 13px;
}

.solis-lateral__form .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

.solis-lateral__form .wpcf7-list-item input[type="checkbox"] {
	width: auto !important;
	margin: 3px 0 0 !important;
	flex: 0 0 auto;
}
.solis-lateral__form .wpcf7-list-item-label { font-size: 12.5px; color: var(--solis-gris); }

/* --------------------------------------------------------- similares */

.solis-bloque--similares { margin-top: 12px; }

/* --------------------------------------------------------- visor */

.solis-visor {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, .94);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s;
}

.solis-visor.esta-abierto { opacity: 1; pointer-events: auto; }

.solis-visor__img {
	max-width: 92vw;
	max-height: 84vh;
	object-fit: contain;
	border-radius: 6px;
}

.solis-visor__cerrar,
.solis-visor__nav {
	position: absolute;
	border: 0;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	width: 46px;
	height: 46px;
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .18s;
}

.solis-visor__cerrar:hover,
.solis-visor__nav:hover { background: rgba(255, 255, 255, .26); }

.solis-visor__cerrar { top: 20px; right: 20px; }
.solis-visor__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.solis-visor__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }

.solis-visor__contador {
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 14px;
	background: rgba(0, 0, 0, .5);
	padding: 6px 14px;
	border-radius: 999px;
}

/* --------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.solis-ficha__cuerpo { grid-template-columns: 1fr; gap: 28px; }
	.solis-lateral { position: static; }
}

@media (max-width: 767px) {
	/* El mosaico gana a sangre; el resto del contenido conserva su margen. */
	.solis-mosaico {
		margin-left: -20px;
		margin-right: -20px;
		width: calc(100% + 40px);
		border-radius: 0;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		height: auto;
		gap: 4px;
	}
	.solis-mosaico__item { aspect-ratio: 4 / 3; }
	.solis-mosaico__item:first-of-type { grid-row: 1; grid-column: 1 / span 2; aspect-ratio: 3 / 2; }
	.solis-mosaico__item:nth-of-type(n+4) { display: none; }
	.solis-mosaico--4 .solis-mosaico__item:nth-of-type(4) { grid-column: auto; }

	.solis-detalles { grid-template-columns: 1fr; }
	.solis-mapa iframe { height: 300px; }
	.solis-visor__nav { width: 40px; height: 40px; }
	.solis-visor__nav--prev { left: 8px; }
	.solis-visor__nav--next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.solis-mosaico__item img,
	.solis-visor,
	.solis-recurso { transition: none; }
	.solis-mosaico__item:hover img { transform: none; }
}