/*
 * Lo justo para que el catálogo se vea bien sobre cualquier tema.
 *
 * NO IMPONEMOS COLORES NI TIPOGRAFÍA: se heredan del tema del cliente, que
 * para eso lo hemos elegido. Aquí solo hay rejilla, proporciones y los dos
 * elementos que el tema no puede conocer —el sello de vendido y la ficha
 * técnica—. Todo lo demás es del tema.
 */

.pi-ficha,
.pi-archivo {
	max-width: 1100px;
	margin-inline: auto;
	padding: 2rem 1rem 4rem;
}

/* --- Rejilla y tarjetas --- */

.pi-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 1.5rem;
}

.pi-tarjeta__enlace {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 12px;
	overflow: hidden;
	background: rgba(127, 127, 127, .04);
	transition: transform .15s ease, box-shadow .15s ease;
}

.pi-tarjeta__enlace:hover,
.pi-tarjeta__enlace:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
}

.pi-tarjeta__foto {
	position: relative;
	aspect-ratio: 4 / 3;
	background: rgba(127, 127, 127, .12);
}

.pi-tarjeta__foto img,
.pi-tarjeta__sinfoto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pi-tarjeta__cuerpo {
	padding: 1rem 1.1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.pi-tarjeta__titulo {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.35;
	text-wrap: balance;
}

.pi-tarjeta__precio,
.pi-ficha__precio {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pi-ficha__precio {
	font-size: 1.75rem;
}

/* El vendido se ve de lejos, sin leer. */
.pi-sello {
	position: absolute;
	inset-block-start: .75rem;
	inset-inline-start: .75rem;
	padding: .3rem .7rem;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: #1e293b;
	color: #fff;
}

.pi-estado-vendido .pi-tarjeta__foto img {
	filter: grayscale(1);
	opacity: .75;
}

/* --- Datos rápidos --- */

.pi-datos {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .9rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .9rem;
	opacity: .8;
	font-variant-numeric: tabular-nums;
}

.pi-datos li + li {
	position: relative;
	padding-inline-start: .9rem;
}

.pi-datos li + li::before {
	content: "·";
	position: absolute;
	inset-inline-start: 0;
}

/* --- Ficha --- */

.pi-aviso {
	padding: .9rem 1.1rem;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, .12);
	background: rgba(127, 127, 127, .08);
	font-weight: 600;
	margin-block-end: 1.5rem;
}

.pi-ficha__cabecera {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	margin-block-end: 1.5rem;
}

.pi-ficha__titulo {
	margin: 0;
	text-wrap: balance;
}

/*
 * Dos columnas fijas, no `auto-fit`. Con auto-fit el número de columnas lo
 * decide el ancho y casi siempre sobraba un hueco: la última foto se quedaba
 * sola en su fila con la mitad del espacio vacío al lado. Con dos columnas y
 * la regla de abajo, la rejilla se llena siempre, tenga el inmueble las fotos
 * que tenga.
 */
.pi-galeria {
	display: grid;
	grid-template-columns: 1fr;
	gap: .75rem;
	margin-block-end: 2rem;
}

@media (min-width: 640px) {
	.pi-galeria {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Si la última foto se quedaría huérfana, que ocupe la fila entera. */
	.pi-galeria__item:last-child:nth-child(even) {
		grid-column: 1 / -1;
	}
}

.pi-galeria__item {
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
}

.pi-galeria__item--principal {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 9;
}

.pi-galeria__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pi-ficha__cuerpo {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 900px) {
	.pi-ficha__cuerpo {
		grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
	}

	.pi-ficha__lateral {
		position: sticky;
		inset-block-start: 1.5rem;
	}
}

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

.pi-tecnica {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .5rem 1rem;
	margin: 0 0 1.75rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 12px;
	font-size: .92rem;
}

.pi-tecnica dt {
	opacity: .7;
}

.pi-tecnica dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.pi-contacto__titulo {
	font-size: 1.1rem;
	margin: 0 0 .75rem;
}

.pi-contacto__marco {
	width: 100%;
	/* Punto de partida mientras el formulario carga y dice cuánto mide.
	   A partir de ahí manda él: ver class-phoneia-inmuebles-marcos.php. */
	min-height: 520px;
	border: 0;
	transition: height .18s ease;
}

@media (prefers-reduced-motion: reduce) {
	.pi-contacto__marco { transition: none; }
}

/* --- Listados --- */

.pi-archivo__cabecera {
	margin-block-end: 2rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.pi-archivo__titulo {
	margin: 0;
	text-wrap: balance;
}

.pi-archivo__texto {
	max-width: 65ch;
}

.pi-archivo__cuenta {
	margin: 0;
	font-size: .9rem;
	opacity: .7;
}

.pi-parecidos {
	margin-block-start: 3.5rem;
}

.pi-parecidos__titulo {
	margin: 0 0 1.25rem;
	text-wrap: balance;
}

/* --- Zonas (atajo [phoneia_zonas]) --- */

.pi-zonas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pi-zonas a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .85rem 1.1rem;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, background-color .15s ease;
}

.pi-zonas a:hover,
.pi-zonas a:focus-visible {
	border-color: currentColor;
	background: rgba(127, 127, 127, .06);
}

.pi-zonas__nombre {
	font-weight: 600;
}

.pi-zonas__cuenta {
	font-size: .85rem;
	opacity: .65;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Listado con filtros
   ========================================================================== */

.pi-archivo__columnas {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 900px) {
	.pi-archivo__columnas {
		grid-template-columns: 250px minmax(0, 1fr);
	}

	.pi-archivo__lateral {
		position: sticky;
		inset-block-start: 1.5rem;
	}
}

/* --- Barra de filtros --- */

.pi-filtros {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	padding: 1.35rem;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	background: rgba(127, 127, 127, .04);
}

.pi-filtros__titulo {
	margin: 0;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .6;
}

.pi-filtros__campo {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.pi-filtros__campo label,
.pi-filtros__etiqueta {
	font-size: .85rem;
	font-weight: 600;
}

.pi-filtros select,
.pi-filtros input[type="number"] {
	width: 100%;
	padding: .55rem .7rem;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 8px;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: .92rem;
}

.pi-filtros__par {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
}

.pi-filtros__boton,
.pi-boton {
	display: inline-block;
	padding: .7rem 1.3rem;
	border: 0;
	border-radius: 999px;
	background: var(--global-palette1, #11514F);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: .95rem;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease;
}

.pi-filtros__boton:hover,
.pi-boton:hover,
.pi-filtros__boton:focus-visible,
.pi-boton:focus-visible {
	background: var(--global-palette2, #0B3A39);
	color: #fff;
}

.pi-filtros__limpiar {
	text-align: center;
	font-size: .85rem;
	opacity: .7;
}

/* --- Barra superior de resultados --- */

.pi-archivo__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	padding-block-end: 1rem;
	margin-block-end: 1.5rem;
	border-block-end: 1px solid rgba(0, 0, 0, .1);
}

.pi-archivo__cuenta {
	margin: 0;
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
}

.pi-orden {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2rem .4rem;
	font-size: .88rem;
}

.pi-orden__etiqueta {
	opacity: .6;
	margin-inline-end: .2rem;
}

.pi-orden__opcion {
	padding: .25rem .6rem;
	border-radius: 999px;
	text-decoration: none;
	color: inherit;
	opacity: .75;
}

.pi-orden__opcion:hover,
.pi-orden__opcion:focus-visible {
	opacity: 1;
	background: rgba(127, 127, 127, .12);
}

.pi-orden__opcion.is-activa {
	background: var(--global-palette1, #11514F);
	color: #fff;
	opacity: 1;
	font-weight: 600;
}

/* --- Filas --- */

.pi-lista {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.pi-fila {
	display: grid;
	grid-template-columns: 1fr;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	overflow: hidden;
	background: var(--global-palette9, #fff);
	transition: box-shadow .15s ease, border-color .15s ease;
}

.pi-fila:hover {
	border-color: rgba(0, 0, 0, .2);
	box-shadow: 0 8px 26px rgba(0, 0, 0, .07);
}

@media (min-width: 620px) {
	.pi-fila {
		grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
	}
}

.pi-fila__foto {
	position: relative;
	aspect-ratio: 4 / 3;
	background: rgba(127, 127, 127, .12);

	/*
	 * `min-width: auto` es el valor por defecto de un elemento de rejilla y
	 * significa «no te encojas por debajo de tu contenido». Con una
	 * proporcion fija y una fila alta, eso hacia que la foto calculara 390 px
	 * de ancho en una columna de 290 y se saliera por encima del texto. Se ve
	 * como un contador de fotos flotando sobre el boton.
	 */
	min-inline-size: 0;
}

/*
 * En fila, la foto se estira hasta donde llegue el texto.
 *
 * VA DESPUES DE LA REGLA DE ARRIBA Y NO ANTES, que es donde la puse primero.
 * Dos reglas con la misma especificidad las decide el orden, y una media
 * query no cambia eso: estando antes, la proporcion fija volvia a ganar y
 * el arreglo estaba desplegado sin hacer nada.
 */
@media (min-width: 620px) {
	.pi-fila__foto {
		aspect-ratio: auto;
		block-size: 100%;
		min-block-size: 215px;
	}
}

.pi-fila__foto a,
.pi-fila__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pi-fila__fotos {
	position: absolute;
	inset-block-end: .7rem;
	inset-inline-end: .7rem;
	padding: .2rem .55rem;
	border-radius: 6px;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	font-size: .72rem;
	font-variant-numeric: tabular-nums;
}

.pi-fila__cuerpo {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	padding: 1.3rem 1.4rem;
}

.pi-fila__zona {
	margin: 0;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .55;
}

.pi-fila__titulo {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.3;
	text-wrap: balance;
}

.pi-fila__titulo a {
	text-decoration: none;
	color: inherit;
}

.pi-fila__titulo a:hover,
.pi-fila__titulo a:focus-visible {
	text-decoration: underline;
}

.pi-fila__precio {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2rem .7rem;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.pi-fila__precio strong {
	font-size: 1.6rem;
	letter-spacing: -.01em;
}

.pi-fila__m2 {
	font-size: .88rem;
	opacity: .6;
}

.pi-fila__resumen {
	margin: .15rem 0 0;
	font-size: .93rem;
	line-height: 1.55;
	opacity: .8;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pi-fila__acciones {
	margin: .6rem 0 0;
}

.pi-estado-vendido .pi-fila__foto img {
	filter: grayscale(1);
	opacity: .75;
}

/* --- Sin resultados --- */

.pi-vacio {
	padding: 2.5rem 1.5rem;
	border: 1px dashed rgba(0, 0, 0, .2);
	border-radius: 14px;
	text-align: center;
}

.pi-vacio p {
	max-width: 46ch;
	margin-inline: auto;
}

/* ==========================================================================
   Buscador de la portada
   ========================================================================== */

.pi-buscador {
	display: grid;
	grid-template-columns: 1fr;
	gap: .75rem;
	padding: 1rem;
	border-radius: 16px;
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

@media (min-width: 760px) {
	.pi-buscador {
		grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
		align-items: end;
		gap: 1rem;
		padding: 1.15rem 1.25rem;
	}
}

.pi-buscador__campo {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	min-width: 0;
}

.pi-buscador__campo label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #45534F;
}

.pi-buscador select {
	width: 100%;
	padding: .6rem .7rem;
	border: 1px solid rgba(0, 0, 0, .16);
	border-radius: 9px;
	background: #fff;
	color: #16211F;
	font: inherit;
	font-size: .95rem;
}

.pi-buscador__boton {
	padding: .78rem 2rem;
	border: 0;
	border-radius: 999px;
	background: var(--global-palette1, #11514F);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s ease;
}

.pi-buscador__boton:hover,
.pi-buscador__boton:focus-visible {
	background: var(--global-palette2, #0B3A39);
}

@media (prefers-reduced-motion: reduce) {
	.pi-fila,
	.pi-tarjeta__enlace,
	.pi-boton,
	.pi-buscador__boton { transition: none; }
}

/* ==========================================================================
   Ficha
   ========================================================================== */

.pi-migas {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-block-end: 1.25rem;
	font-size: .85rem;
	opacity: .7;
}

.pi-migas a {
	color: inherit;
}

.pi-galeria__cuenta {
	position: absolute;
	inset-block-end: .8rem;
	inset-inline-end: .8rem;
	padding: .3rem .7rem;
	border-radius: 7px;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
}

.pi-galeria__item {
	position: relative;
}

/* --- Bloques de caracteristicas --- */

.pi-specs {
	margin-block-start: 2.5rem;
	padding-block-start: 2rem;
	border-block-start: 1px solid rgba(0, 0, 0, .1);
}

.pi-specs__titulo {
	margin: 0 0 1.5rem;
}

.pi-specs__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 2rem;
}

.pi-specs__grupo h3 {
	margin: 0 0 .75rem;
	font-size: .95rem;
}

.pi-specs__grupo dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .4rem 1rem;
	margin: 0;
	font-size: .92rem;
}

.pi-specs__grupo dt {
	opacity: .65;
}

.pi-specs__grupo dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: end;
}

.pi-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pi-chips a {
	display: inline-block;
	padding: .3rem .75rem;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 999px;
	font-size: .85rem;
	text-decoration: none;
	color: inherit;
}

.pi-chips a:hover,
.pi-chips a:focus-visible {
	border-color: currentColor;
}

/* --- Etiqueta energetica --- */

.pi-energia {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0;
}

.pi-energia__letra {
	display: grid;
	place-items: center;
	inline-size: 2.2rem;
	block-size: 2.2rem;
	border-radius: 6px;
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.pi-energia__texto {
	font-size: .88rem;
	opacity: .7;
}

/* --- Caja de contacto --- */

.pi-contacto {
	padding: 1.4rem;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 14px;
	background: var(--global-palette9, #fff);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
}

.pi-contacto__titulo {
	margin: 0 0 .7rem;
	font-size: 1.1rem;
}

.pi-contacto__texto {
	margin: 0 0 1.1rem;
	font-size: .93rem;
	line-height: 1.55;
	opacity: .8;
}

.pi-contacto .pi-boton {
	display: block;
	width: 100%;
}

.pi-contacto__ref {
	margin: 1.1rem 0 0;
	padding-block-start: .9rem;
	border-block-start: 1px solid rgba(0, 0, 0, .1);
	font-size: .85rem;
	opacity: .7;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.pi-contacto__ref strong {
	font-variant-numeric: tabular-nums;
}

/* --- Casillas de caracteristicas en los filtros --- */

.pi-filtros__grupo {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.pi-filtros__casilla {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: .9rem;
	font-weight: 400;
	cursor: pointer;
}

.pi-filtros__casilla input {
	flex: none;
	inline-size: 1rem;
	block-size: 1rem;
	accent-color: var(--global-palette1, #11514F);
}

.pi-filtros__casilla span:first-of-type {
	flex: 1 1 auto;
}

.pi-filtros__cuenta {
	font-size: .78rem;
	opacity: .5;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Valoración
   ========================================================================== */

.pi-valoracion {
	padding: 1.5rem;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 16px;
	background: rgba(127, 127, 127, .05);
}

.pi-valoracion__campos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: end;
}

@media (min-width: 680px) {
	.pi-valoracion__campos {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
	}
}

.pi-valoracion input[type="number"] {
	width: 100%;
	padding: .6rem .7rem;
	border: 1px solid rgba(0, 0, 0, .16);
	border-radius: 9px;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: .95rem;
}

.pi-valoracion__letra {
	margin: 1rem 0 0;
	font-size: .85rem;
	opacity: .65;
}

.pi-valoracion__resultado {
	margin-block-end: 2rem;
	padding: 2rem;
	border-radius: 18px;
	background: var(--global-palette1, #11514F);
	color: #fff;
}

.pi-valoracion__resultado--sin {
	background: var(--global-palette7, #EDEBE4);
	color: inherit;
}

.pi-valoracion__resultado h2 {
	margin: 0 0 .75rem;
	color: inherit;
	font-size: 1.4rem;
}

.pi-valoracion__eyebrow {
	margin: 0 0 .5rem;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .75;
}

.pi-valoracion__horquilla {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .6rem;
	margin: 0 0 1.1rem;
	font-size: clamp(1.7rem, 5vw, 2.6rem);
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.pi-valoracion__guion {
	opacity: .5;
}

.pi-valoracion__base,
.pi-valoracion__aviso {
	margin: 0 0 .9rem;
	max-width: 58ch;
	font-size: .93rem;
	line-height: 1.6;
}

.pi-valoracion__aviso {
	opacity: .8;
}

.pi-valoracion__resultado .pi-boton {
	background: #fff;
	color: var(--global-palette1, #11514F);
}

.pi-valoracion__resultado .pi-boton:hover,
.pi-valoracion__resultado .pi-boton:focus-visible {
	background: rgba(255, 255, 255, .88);
	color: var(--global-palette2, #0B3A39);
}

.pi-valoracion__resultado--sin .pi-boton {
	background: var(--global-palette1, #11514F);
	color: #fff;
}

/* --- Captación tras la valoración --- */

.pi-valoracion__captura {
	margin-block: 2rem;
	padding: 1.6rem;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 16px;
}

.pi-valoracion__captura h2 {
	margin: 0 0 .6rem;
	font-size: 1.2rem;
	text-wrap: balance;
}

.pi-valoracion__captura p {
	margin: 0 0 1.2rem;
	max-width: 58ch;
	font-size: .94rem;
	line-height: 1.6;
	opacity: .82;
}

.pi-valoracion__cierre {
	margin-block: 1.5rem;
}

/* ==========================================================================
   Calculadora de hipoteca
   ========================================================================== */

.pi-hipoteca {
	margin-block-start: 2.5rem;
	padding: 1.6rem;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 16px;
	background: rgba(127, 127, 127, .05);
}

.pi-hipoteca__titulo {
	margin: 0 0 1.25rem;
	font-size: 1.2rem;
}

.pi-hipoteca__campos {
	display: grid;
	gap: 1rem;
}

@media (min-width: 620px) {
	.pi-hipoteca__campos {
		grid-template-columns: 1fr 1fr;
	}
}

.pi-hipoteca__campos label {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	font-size: .88rem;
	font-weight: 600;
}

/* El valor en vivo al lado de su etiqueta: mover una barra sin ver el número
   que sale es adivinar. */
.pi-hipoteca__campos em {
	font-style: normal;
	font-weight: 400;
	opacity: .65;
	font-variant-numeric: tabular-nums;
}

.pi-hipoteca input[type="number"] {
	padding: .55rem .7rem;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 8px;
	background: #fff;
	color: inherit;
	font: inherit;
	font-variant-numeric: tabular-nums;
}

.pi-hipoteca input[type="range"] {
	accent-color: var(--global-palette1, #11514F);
	inline-size: 100%;
}

.pi-hipoteca__resultado {
	display: grid;
	gap: 1rem;
	margin-block: 1.5rem 1rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid rgba(0, 0, 0, .1);
}

@media (min-width: 520px) {
	.pi-hipoteca__resultado {
		grid-template-columns: 1fr 1fr;
	}
}

.pi-hipoteca__cifra {
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.pi-hipoteca__cifra strong {
	font-size: clamp(1.7rem, 5vw, 2.2rem);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--global-palette1, #11514F);
}

.pi-hipoteca__cifra span {
	font-size: .85rem;
	opacity: .7;
}

/* La segunda cifra es la incómoda y la que de verdad decide la compra, así
   que no se pinta como un dato más: lleva su propio color de aviso. */
.pi-hipoteca__cifra--aviso strong {
	color: #9a5b00;
}

.pi-hipoteca__desglose {
	margin: 0 0 1rem;
	font-size: .88rem;
	line-height: 1.6;
	opacity: .8;
	font-variant-numeric: tabular-nums;
}

.pi-hipoteca__letra {
	margin: 0;
	font-size: .78rem;
	line-height: 1.55;
	opacity: .6;
	max-width: 70ch;
}

/* --- El vídeo de la vivienda --- */

/*
 * Proporción fija para que el hueco esté desde el primer pintado. Sin ella,
 * el reproductor mide cero hasta que llegan los metadatos y la página pega un
 * salto: eso es CLS y lo mide Google.
 */
.pi-video {
	margin-block: 1.25rem;
	border-radius: 14px;
	overflow: hidden;
	background: #000;
	aspect-ratio: 16 / 9;
}

.pi-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}