/**
 * Pilar Vicente — Sistema de diseño (rediseño 2026).
 *
 * Fuente de verdad: handoff_pilar_vicente/disenos/*.dc.html + GUIA-PLANTILLA.md.
 * Todos los valores (hex, px, radios, sombras) se extrajeron literalmente de
 * esos prototipos. NO reinterpretar: cualquier cambio debe venir del diseño.
 *
 * Contiene lo GLOBAL y compartido:
 *   1. Tokens
 *   2. Reset / base sobre Twenty Twenty-Four
 *   3. Contenedores y utilidades
 *   4. Botones
 *   5. Topbar + Nav sticky
 *   6. Footer
 *   7. Tarjeta de propiedad
 *   8. Marca de agua
 *   9. Pines de mapa (Leaflet)
 *
 * @package PilarVicente\Core
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1 · TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	/* Paleta */
	--pv-marca:        #8f1a1e;
	--pv-marca-hover:  #7a1619;
	--pv-tinta:        #2a1512;
	--pv-marfil:       #fbf7f2;
	--pv-arena:        #f4ebe4;
	--pv-rosa:         #f0c9b8;
	--pv-wsp:          #25d366;
	--pv-verde:        #2c8a4b;   /* etiqueta "Arriendo" (diferenciación venta/arriendo) */
	--pv-verde-hover:  #24713d;

	/* Texto */
	--pv-txt:          #2a1512;
	--pv-txt-2:        #5a3d38;
	--pv-txt-3:        #9a7d76;
	--pv-sobre-rojo:   #fbeee6;
	--pv-sobre-rojo-p: #f2d8cd;
	--pv-topbar-txt:   #d9c3ba;
	--pv-footer-txt:   #c9b3aa;

	/* Líneas */
	--pv-borde:        rgba(42, 21, 18, .16);
	--pv-sep:          rgba(42, 21, 18, .08);

	/* Radios */
	--pv-r-card:       20px;
	--pv-r-bloque:     24px;
	--pv-r-input:      12px;
	--pv-r-pill:       100px;

	/* Sombras */
	--pv-sh-card:      0 12px 30px rgba(60, 20, 20, .07);
	--pv-sh-float:     0 24px 60px rgba(60, 20, 20, .16);
	--pv-sh-suave:     0 8px 22px rgba(60, 20, 20, .06);

	/* Layout */
	--pv-content:      1360px;
	--pv-pad:          40px;
	--pv-gap-sec:      88px;

	/* Tipografía */
	--pv-display:      'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
	--pv-texto:        'Instrument Sans', system-ui, -apple-system, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 · RESET / BASE
   Twenty Twenty-Four inyecta estilos globales vía theme.json; los neutralizamos
   en el ámbito del sitio público del plugin.
   ═══════════════════════════════════════════════════════════════════════════ */

.pv-ds *,
.pv-ds *::before,
.pv-ds *::after { box-sizing: border-box; }

body.pv-ds-body {
	margin: 0;
	background: var(--pv-marfil);
	color: var(--pv-txt);
	font-family: var(--pv-texto);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* TT24 limita el ancho de todo lo que cuelga de .wp-site-blocks */
body.pv-ds-body .wp-site-blocks > * { max-width: none; margin: 0; }
body.pv-ds-body .wp-site-blocks { padding: 0; }
body.pv-ds-body .is-layout-constrained > *,
body.pv-ds-body .is-layout-flow > * { max-width: none; margin-block: 0; }

/* ENLACES — equilibrio de especificidad, hay dos fuegos cruzados:
     · Twenty Twenty-Four colorea y subraya los enlaces con `:root :where(a…)`,
       que vale (0,1,0): un `:where()` de especificidad cero no lo vence y los
       enlaces salían subrayados y en color del tema.
     · A la vez, `.pv-ds a { color: inherit }` vale (0,1,1) y ganaría a las
       clases de componente (0,1,0) — así se perdía el blanco de los botones y
       el texto del CTA quedaba invisible sobre el pill crema.
   Solución: el subrayado se quita para todo enlace (no compite con ningún
   color), y `color: inherit` se limita a los enlaces SIN clase (nav, topbar,
   footer, listas). Todo enlace con clase define su propio color y ya nada
   se lo pisa. */

.pv-ds a { text-decoration: none; }
.pv-ds a:not([class]) { color: inherit; }
.pv-ds a:not([class]):hover { color: var(--pv-marca); }

:where(.pv-ds img) { max-width: 100%; }

/* Sin `color`: los títulos heredan el del bloque en que viven (marfil sobre
   rojo, marrón sobre marfil). */
:where(.pv-ds h1, .pv-ds h2, .pv-ds h3, .pv-ds h4) {
	font-family: var(--pv-display);
	margin: 0;
	line-height: 1.1;
}
:where(.pv-ds p) { margin: 0; }
:where(.pv-ds ul) { list-style: none; margin: 0; padding: 0; }

:where(.pv-ds button, .pv-ds input, .pv-ds select, .pv-ds textarea) {
	font-family: var(--pv-texto);
	font-size: inherit;
	color: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3 · CONTENEDORES Y UTILIDADES
   ═══════════════════════════════════════════════════════════════════════════ */

.pv-wrap {
	max-width: var(--pv-content);
	margin: 0 auto;
	padding-left: var(--pv-pad);
	padding-right: var(--pv-pad);
	width: 100%;
}

/* Kicker: 13px / 600 · uppercase · ls .16em · rojo marca */
.pv-kicker {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pv-marca);
}
.pv-kicker--sobre-rojo { color: var(--pv-rosa); letter-spacing: .18em; }

.pv-h2 {
	font-family: var(--pv-display);
	font-weight: 800;
	font-size: 44px;
	letter-spacing: -.02em;
	color: var(--pv-txt);
	margin: 8px 0 0;
	text-wrap: balance;
}

.pv-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4 · BOTONES
   ═══════════════════════════════════════════════════════════════════════════ */

.pv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--pv-texto);
	font-weight: 600;
	line-height: 1;
	border: none;
	cursor: pointer;
	text-align: center;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Pill (nav, CTA) — padding 11px 22px */
.pv-btn--pill { padding: 11px 22px; border-radius: var(--pv-r-pill); font-size: 14px; }

/* Rectangular (formularios) — radio 12px */
.pv-btn--rect { padding: 15px 24px; border-radius: var(--pv-r-input); font-size: 15px; font-weight: 700; }

.pv-btn--primario        { background: var(--pv-marca); color: #fff; }
.pv-btn--primario:hover  { background: var(--pv-marca-hover); color: #fff; }

.pv-btn--borde           { border: 1.5px solid var(--pv-tinta); color: var(--pv-tinta); background: transparent; }
.pv-btn--borde:hover     { background: var(--pv-tinta); color: var(--pv-marfil); }

.pv-btn--inverso         { background: var(--pv-sobre-rojo); color: var(--pv-marca); font-weight: 700; }
.pv-btn--inverso:hover   { background: #fff; color: var(--pv-marca); }

.pv-btn--fantasma-rojo       { border: 1.5px solid var(--pv-sobre-rojo-p); color: var(--pv-sobre-rojo); background: transparent; }
.pv-btn--fantasma-rojo:hover { background: rgba(255, 255, 255, .1); color: var(--pv-sobre-rojo); }

.pv-btn--wsp             { background: var(--pv-wsp); color: #fff; font-weight: 700; }
.pv-btn--wsp:hover       { background: #1fb955; color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   5 · TOPBAR + NAV STICKY
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.pv-topbar {
	background: var(--pv-tinta);
	color: var(--pv-topbar-txt);
	font-size: 13px;
}
.pv-topbar__inner {
	max-width: var(--pv-content);
	margin: 0 auto;
	padding: 9px var(--pv-pad);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
.pv-topbar__derecha {
	display: flex;
	gap: 22px;
	align-items: center;
	flex-wrap: wrap;
}
.pv-topbar__destacado { color: var(--pv-rosa); }
.pv-ds .pv-topbar a:not([class]):hover { color: #fff; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.pv-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(251, 247, 242, .92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--pv-sep);
}
.pv-nav__inner {
	max-width: var(--pv-content);
	margin: 0 auto;
	padding: 18px var(--pv-pad);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}
.pv-nav__marca {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
.pv-nav__logo { height: 44px; width: auto; display: block; }
.pv-nav__wordmark {
	font-family: var(--pv-display);
	font-weight: 800;
	font-size: 25px;
	color: var(--pv-tinta);
	letter-spacing: -.02em;
	line-height: 1;
	white-space: nowrap;
}
.pv-nav__marca:hover .pv-nav__wordmark { color: var(--pv-marca); }

.pv-nav__menu {
	display: flex;
	gap: 30px;
	font-size: 15px;
	font-weight: 500;
	color: var(--pv-txt-2);
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pv-nav__menu li { position: relative; }
.pv-nav__menu a { color: var(--pv-txt-2); white-space: nowrap; }
.pv-ds .pv-nav__menu a:not([class]):hover,
.pv-ds .pv-nav__menu .current-menu-item > a,
.pv-ds .pv-nav__menu .current_page_item > a,
.pv-ds .pv-nav__menu .pv-nav--activo > a { color: var(--pv-marca); }

/* Submenús (el menú de WP puede tener hijos) */
.pv-nav__menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: -14px;
	min-width: 220px;
	background: #fff;
	border-radius: 14px;
	box-shadow: var(--pv-sh-card);
	padding: 10px 0;
	margin-top: 12px;
	list-style: none;
	flex-direction: column;
	gap: 0;
}
.pv-nav__menu li:hover > .sub-menu,
.pv-nav__menu li:focus-within > .sub-menu { display: flex; }
.pv-nav__menu .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-size: 14px;
}

.pv-nav__cta { flex-shrink: 0; white-space: nowrap; }

/* Red de seguridad: un hijo flex no encoge por debajo de su contenido salvo que
   se le permita con min-width:0. Sin esto, un menú con más ítems de los
   previstos volvería a desbordar la página en vez de recortarse. */
.pv-nav__inner > nav { min-width: 0; }

/* Hamburguesa */
.pv-nav__toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	background: none;
	border: none;
	padding: 8px 4px;
	cursor: pointer;
}
.pv-nav__toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--pv-tinta);
	transition: transform .2s ease, opacity .2s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.pv-footer {
	background: var(--pv-tinta);
	color: var(--pv-footer-txt);
	margin-top: var(--pv-gap-sec);
}
.pv-footer__inner {
	max-width: var(--pv-content);
	margin: 0 auto;
	padding: 64px var(--pv-pad) 40px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
}
.pv-footer__marca {
	font-family: var(--pv-display);
	font-weight: 800;
	font-size: 24px;
	color: #fff;
	line-height: 1.1;
}
.pv-footer__desc {
	font-size: 14px;
	line-height: 1.6;
	margin: 14px 0 0;
	max-width: 280px;
}
.pv-footer__ig {
	display: inline-block;
	font-size: 14px;
	color: var(--pv-rosa);
	margin-top: 14px;
}
.pv-footer__titulo {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pv-rosa);
	margin: 0 0 16px;
	font-family: var(--pv-texto);
}
.pv-footer__lista {
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: 14px;
}
.pv-ds .pv-footer a:not([class]):hover { color: #fff; }

.pv-footer__base { border-top: 1px solid rgba(255, 255, 255, .1); }
.pv-footer__disclaimer {
	max-width: var(--pv-content);
	margin: 0 auto;
	padding: 22px var(--pv-pad) 0;
	font-size: 12px;
	line-height: 1.6;
	color: #7a655d;
}
.pv-footer__copy {
	max-width: var(--pv-content);
	margin: 0 auto;
	padding: 16px var(--pv-pad) 24px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 13px;
	color: #8a726a;
	flex-wrap: wrap;
}

/* Botón flotante de WhatsApp */
.pv-wsp-flotante {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 80;
	width: 56px;
	height: 56px;
	border-radius: var(--pv-r-pill);
	background: var(--pv-wsp);
	color: #fff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 26px rgba(37, 211, 102, .38);
}
.pv-wsp-flotante svg { width: 30px; height: 30px; fill: currentColor; }

/* ═══════════════════════════════════════════════════════════════════════════
   7 · TARJETA DE PROPIEDAD
   Variante A (.pv-t) — destacadas del home: imagen 230px con padding 14px.
   Variante B (.pv-t--compacta) — listado/similares: imagen 170px a sangre.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Columna flexible para que, cuando un título ocupa dos líneas, la fila de
   precio + specs siga alineada entre las tarjetas de una misma fila. */
.pv-t {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--pv-r-card);
	overflow: hidden;
	box-shadow: var(--pv-sh-card);
	color: var(--pv-txt);
	transition: transform .2s ease, box-shadow .2s ease;
}
.pv-t:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(60, 20, 20, .12);
	color: var(--pv-txt);
}

.pv-t__media {
	position: relative;
	height: 230px;
	flex-shrink: 0;
	padding: 14px;
	background: #fff;
}
.pv-t__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 14px;
}
.pv-t__media--vacia {
	background: var(--pv-arena);
}

.pv-t__tag {
	position: absolute;
	top: 26px;
	left: 26px;
	background: var(--pv-marfil);
	color: var(--pv-marca);
	font-size: 12px;
	font-weight: 700;
	padding: 6px 13px;
	border-radius: var(--pv-r-pill);
	line-height: 1;
	z-index: 2;
}
.pv-t__tags {
	position: absolute;
	top: 26px;
	left: 26px;
	display: flex;
	/* Apiladas: en una propiedad dual "Venta" va arriba y "Arriendo" debajo. En
	   fila se salían de la imagen de 120px de la tarjeta horizontal (móvil) y
	   pisaban el precio. */
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	z-index: 2;
}
.pv-t__tags .pv-t__tag { position: static; top: auto; left: auto; }

/* Venta = rojo marca (por defecto) · Arriendo = verde, para distinguirlos de un
   vistazo, sobre todo en las propiedades dual (venta + arriendo a la vez). */
.pv-t__tag--arriendo { color: var(--pv-verde); }

.pv-t__fav {
	position: absolute;
	top: 26px;
	right: 26px;
	background: rgba(255, 255, 255, .92);
	width: 34px;
	height: 34px;
	border-radius: var(--pv-r-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	border: none;
	cursor: pointer;
	color: var(--pv-tinta);
	padding: 0;
	z-index: 2;
	line-height: 1;
}
.pv-t__fav:hover,
.pv-t__fav[aria-pressed="true"] { color: var(--pv-marca); }

.pv-t__body {
	padding: 8px 22px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.pv-t__titulo {
	font-family: var(--pv-display);
	font-weight: 700;
	font-size: 20px;
	color: var(--pv-txt);
	line-height: 1.25;
	margin: 0 0 18px;
}
.pv-t__dir {
	font-size: 14px;
	color: var(--pv-txt-3);
	margin: -14px 0 18px;   /* 4px bajo el título (18 − 14), 18px hasta el pie */
	line-height: 1.4;
}
.pv-t__pie {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	justify-content: space-between;
	align-items: baseline;
	/* `auto` empuja la fila al fondo de la tarjeta para que precio y specs queden
	   alineados entre las 3 tarjetas de una fila aunque el título ocupe dos
	   líneas. El aire mínimo de 18px del diseño lo aporta el margen inferior del
	   bloque de texto (ver .pv-t__titulo / .pv-t__dir). */
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--pv-sep);
}
.pv-t__precio {
	font-family: var(--pv-display);
	font-size: 23px;
	font-weight: 800;
	color: var(--pv-marca);
	flex-shrink: 0;
	line-height: 1.15;
}
.pv-t__precio-sufijo { font-size: .62em; font-weight: 700; }
.pv-t__precio--dual { display: flex; flex-direction: column; gap: 2px; font-size: 19px; }
.pv-t__specs {
	font-size: 13px;
	color: var(--pv-txt-2);
	font-weight: 600;
	white-space: nowrap;
}

/* ── Variante compacta (listado y similares) ─────────────────────────────────
   Listado.dc.html: foto 170px a sangre, radio 16, sombra más suave, tag ROJO,
   y el orden precio → título → dirección → specs. */

.pv-t--compacta { border-radius: 16px; box-shadow: var(--pv-sh-suave); }

.pv-t--compacta .pv-t__media { height: 170px; padding: 0; }
.pv-t--compacta .pv-t__img   { border-radius: 0; }
.pv-t--compacta .pv-wm       { inset: 0; }
.pv-t--compacta .pv-wm img   { width: 77%; max-width: 216px; }

.pv-t--compacta .pv-t__tag,
.pv-t--compacta .pv-t__tags {
	top: 12px;
	left: 12px;
	font-size: 11px;
	padding: 5px 11px;
}
.pv-t--compacta .pv-t__tag { background: var(--pv-marca); color: #fff; }
.pv-t--compacta .pv-t__tag--arriendo { background: var(--pv-verde); color: #fff; }

.pv-t--compacta .pv-t__fav {
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	font-size: 15px;
}

.pv-t--compacta .pv-t__body { padding: 16px 18px 18px; }

.pv-t--compacta .pv-t__precio {
	display: block;
	font-size: 20px;
	line-height: 1.2;
	margin: 0;
}
.pv-t--compacta .pv-t__precio--dual {
	font-size: 17px;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.pv-t--compacta .pv-t__titulo {
	font-size: 16px;
	font-weight: 700;
	margin: 4px 0 0;
}
.pv-t--compacta .pv-t__dir { font-size: 13px; margin: 3px 0 0; }

.pv-t--compacta .pv-t__pie {
	display: flex;
	gap: 14px;
	justify-content: flex-start;
	margin-top: 12px;
	padding-top: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pv-txt-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   8 · MARCA DE AGUA SOBRE FOTOS
   ═══════════════════════════════════════════════════════════════════════════ */

.pv-wm {
	position: absolute;
	inset: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 1;
}
.pv-wm--sangre { inset: 0; }
.pv-wm img {
	width: 72%;
	max-width: 240px;
	opacity: .18;
	filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .25));
	transform: rotate(45deg);
	-webkit-mask: radial-gradient(ellipse 72% 72% at 50% 50%, #000 55%, transparent 100%);
	mask: radial-gradient(ellipse 72% 72% at 50% 50%, #000 55%, transparent 100%);
	border-radius: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8b · PÍLDORAS DE FILTRO
   Fuente: Listado.dc.html § FILTER BAR. Compartidas por el listado y por
   cualquier vista futura con filtros.
   ═══════════════════════════════════════════════════════════════════════════ */

.pv-pill {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--pv-txt);
	padding: 11px 16px;
	border: 1px solid var(--pv-borde);
	border-radius: var(--pv-r-pill);
	background: #fff;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1.2;
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--pv-texto);
	font-style: normal;
	text-align: left;
}
.pv-pill::placeholder { color: var(--pv-txt-3); font-weight: 500; font-style: normal; }
.pv-pill:hover { border-color: var(--pv-marca); }
.pv-pill:focus-visible { outline: 2px solid var(--pv-marca); outline-offset: 1px; }

/* El ▾ del diseño va en rojo de marca. En los <select> viaja como fondo. */
select.pv-pill {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238f1a1e' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 36px;
}
.pv-pill__flecha { color: var(--pv-marca); }

/* Con filtro aplicado, la píldora se marca */
.pv-pill.is-activa { border-color: var(--pv-marca); color: var(--pv-marca); }

/* Toggle Comprar / Arrendar de la barra de filtros (más compacto que el del home) */
.pv-toggle {
	display: inline-flex;
	background: var(--pv-arena);
	border-radius: var(--pv-r-pill);
	padding: 3px;
	flex-shrink: 0;
}
.pv-toggle a,
.pv-toggle button {
	color: var(--pv-txt-2);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 20px;
	border-radius: var(--pv-r-pill);
	border: none;
	background: none;
	cursor: pointer;
	line-height: 1.2;
}
.pv-toggle .is-active { background: var(--pv-marca); color: #fff; }

/* Contador del comparador */
.pv-comparar-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--pv-arena);
	padding: 9px 16px;
	border-radius: var(--pv-r-pill);
	font-size: 14px;
	font-weight: 600;
	color: var(--pv-marca);
	white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8c · FORMULARIOS
   Fuente: Tasacion.dc.html y Contacto.dc.html. Radio 11px en los campos
   (el diseño usa 11 en formularios y 12 en el buscador — se respeta cada uno).
   ═══════════════════════════════════════════════════════════════════════════ */

.pv-form__campo {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pv-txt-2);
	min-width: 0;
}
.pv-form__control {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	font-family: var(--pv-texto);
	font-size: 15px;
	color: var(--pv-txt);
	padding: 13px 15px;
	border: 1px solid var(--pv-borde);
	border-radius: 11px;
	background: #fff;
	line-height: 1.3;
}
.pv-form__control::placeholder { color: var(--pv-txt-3); }
.pv-form__control:focus { outline: 2px solid var(--pv-marca); outline-offset: -1px; }
select.pv-form__control {
	font-weight: 600;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238f1a1e' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	padding-right: 36px;
}
textarea.pv-form__control { min-height: 72px; resize: vertical; }

.pv-form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pv-form__fila--3 { grid-template-columns: 1fr 1fr 1fr; }
.pv-form__fila + .pv-form__fila,
.pv-form__campo + .pv-form__campo,
.pv-form__fila + .pv-form__campo,
.pv-form__campo + .pv-form__fila { margin-top: 16px; }

/* Dentro de una fila los campos son columnas de un grid, no elementos
   apilados: el margen de arriba los escalonaba y descuadraba la fila. */
.pv-form__fila > .pv-form__campo + .pv-form__campo { margin-top: 0; }

.pv-form__enviar {
	width: 100%;
	margin-top: 24px;
	background: var(--pv-marca);
	color: #fff;
	border: none;
	font-family: var(--pv-texto);
	font-size: 16px;
	font-weight: 700;
	padding: 16px;
	border-radius: var(--pv-r-input);
	cursor: pointer;
}
.pv-form__enviar:hover { background: var(--pv-marca-hover); }
.pv-form__nota {
	font-size: 12px;
	color: var(--pv-txt-3);
	text-align: center;
	margin: 14px 0 0;
	line-height: 1.5;
}

/* Avisos tras enviar */
.pv-aviso {
	border-radius: var(--pv-r-input);
	padding: 14px 16px;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 18px;
	line-height: 1.5;
}
.pv-aviso--ok    { background: #eaf6ee; color: #1c6b36; }
.pv-aviso--error { background: #fbeaea; color: var(--pv-marca); }

/* ═══════════════════════════════════════════════════════════════════════════
   9 · MAPAS (Leaflet)

   ESCALA DE CAPAS DEL SISTEMA — respetarla al añadir cualquier elemento nuevo:

     0    mapas (contenidos, ver abajo)
     20   buscador flotante del home
     30   barra de filtros del listado
     40   popover de precio
     50   nav sticky
     80   botón flotante de WhatsApp
     200  lightbox de la ficha
   ═══════════════════════════════════════════════════════════════════════════ */

/* Leaflet pinta sus controles (+/− y atribución) en .leaflet-top/.leaflet-bottom
   con z-index 1000. Como .leaflet-container es `position: relative` con
   `z-index: auto`, NO crea contexto de apilamiento: esos 1000 competían contra
   el z-index 50 de la nav sticky en el contexto raíz y la tapaban al hacer
   scroll. Los tiles no daban problema porque van dentro de .leaflet-map-pane,
   que lleva un transform y por eso sí se contiene solo.

   Fijar un z-index explícito le da al mapa su propio contexto de apilamiento:
   400 y 1000 quedan encerrados dentro y, hacia fuera, el mapa entero compite
   como un único elemento en 0. Sirve a los cuatro mapas del sitio a la vez.

   NO subir en su lugar el z-index de la nav: habría que pasar de 1000 y
   quedaría por delante de los popups del mapa. */
.leaflet-container { z-index: 0; }

/* Leaflet posiciona el icono con un transform propio y, con `iconSize: null`,
   deja la esquina superior izquierda sobre la coordenada. Este envoltorio
   interior recentra la pastilla para que la PUNTA de la colita caiga sobre el
   punto real, sea cual sea el ancho del precio. */
.pv-pin-wrap {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, calc(-100% - 6px));
}

.pv-pin {
	display: flex;
	align-items: center;
	gap: 5px;
	background: #fff;
	color: var(--pv-tinta);
	font-family: var(--pv-texto);
	font-size: 13px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: var(--pv-r-pill);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
	white-space: nowrap;
	position: relative;
	border: 1.5px solid #fff;
	line-height: 1.2;
	transition: background-color .12s ease, color .12s ease;
}
.pv-pin.active,
.pv-pin--activo { background: var(--pv-marca); color: #fff; }
.pv-pin::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #fff;
}
.pv-pin.active::after,
.pv-pin--activo::after { border-top-color: var(--pv-marca); }

/* Contador de un punto compartido: «UF 6.500 +18» */
.pv-pin__mas {
	background: var(--pv-arena);
	color: var(--pv-marca);
	font-size: 11px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: var(--pv-r-pill);
}
.pv-pin.active .pv-pin__mas { background: rgba(255, 255, 255, .22); color: #fff; }

/* Punto: la forma degradada cuando la pastilla no cabe sin pisar a otra.
   Mantiene la propiedad en el mapa y sigue siendo clicable. */
.pv-pin--punto {
	width: 12px;
	height: 12px;
	padding: 0;
	gap: 0;
	border: 2px solid var(--pv-marca);
	border-radius: var(--pv-r-pill);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.pv-pin--punto .pv-pin__txt,
.pv-pin--punto .pv-pin__mas { display: none; }
.pv-pin--punto::after { display: none; }
.pv-pin--punto:hover { background: var(--pv-marca); }

/* El punto se ancla por su centro, no por la punta de una colita que no tiene.
   La clase la pone el JS en el envoltorio (en vez de `:has()`) para no depender
   del soporte de `:has()` en navegadores antiguos. */
.pv-pin-wrap--punto { transform: translate(-50%, -50%); }

/* ── Popups ──────────────────────────────────────────────────────────────── */

.leaflet-popup-content-wrapper { border-radius: 14px; }
.leaflet-popup-content { margin: 0; }
.pv-popup { display: block; width: 220px; color: var(--pv-tinta); font-family: var(--pv-texto); }
.pv-popup__img { height: 120px; background-size: cover; background-position: center; background-color: var(--pv-arena); }
.pv-popup__body { padding: 12px 14px; }
.pv-popup__precio { font-family: var(--pv-display); font-size: 18px; font-weight: 800; color: var(--pv-marca); }
.pv-popup__titulo { font-weight: 700; font-size: 14px; margin-top: 2px; }
.pv-popup__dir { font-size: 12px; color: var(--pv-txt-3); margin-top: 2px; }
.pv-popup__specs { font-size: 12px; color: var(--pv-txt-2); margin-top: 6px; }

/* Popup de un punto compartido por varias propiedades */
.pv-popup--grupo { width: 250px; }
.pv-popup__head {
	font-family: var(--pv-display);
	font-weight: 700;
	font-size: 15px;
	padding: 12px 14px 10px;
	border-bottom: 1px solid var(--pv-sep);
}
.pv-popup__lista { max-height: 300px; overflow-y: auto; }
.pv-popup__lista::-webkit-scrollbar { width: 6px; }
.pv-popup__lista::-webkit-scrollbar-thumb { background: rgba(42, 21, 18, .18); border-radius: 6px; }

.pv-popup__fila {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 9px 14px;
	border-bottom: 1px solid var(--pv-sep);
	color: var(--pv-tinta);
}
.pv-popup__fila:last-child { border-bottom: none; }
.pv-popup__fila:hover { background: var(--pv-marfil); }
.pv-popup__mini {
	width: 54px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
	background-color: var(--pv-arena);
}
.pv-popup__fila-txt { min-width: 0; }
.pv-popup__fila .pv-popup__precio { font-size: 15px; display: block; }
.pv-popup__fila .pv-popup__titulo {
	font-size: 12px;
	font-weight: 600;
	color: var(--pv-txt-2);
	margin-top: 1px;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ≤1200px: reducir aire lateral ───────────────────────────────────────── */
@media (max-width: 1200px) {
	:root { --pv-pad: 28px; }
	.pv-nav__menu { gap: 22px; font-size: 14px; }
	.pv-nav__wordmark { font-size: 22px; }
	.pv-nav__logo { height: 38px; }
}

/* ── ≤980px: nav hamburguesa ─────────────────────────────────────────────── */
/* ── ≤1100px: la nav colapsa a hamburguesa ───────────────────────────────────
   El punto de corte lo manda el ANCHO INTRÍNSECO de la nav, no una cifra
   redonda: logo (244) + menú (529) + botón (163) + gaps (48) + padding (80)
   = 1065px mínimos. Con la hamburguesa a 980px quedaba una franja muerta entre
   981 y ~1065 en la que los tres hijos son `nowrap`/`flex-shrink:0`, así que no
   podían encogerse: la nav se salía y arrastraba a TODA la página en scroll
   horizontal (el botón «Vender / Arrendar» y el correo del topbar aparecían
   cortados por la derecha).
   1100px deja margen por encima de ese mínimo en ambos escalones de padding. */
@media (max-width: 1100px) {
	.pv-nav__toggle { display: flex; order: 3; }
	.pv-nav__cta { display: none; }

	.pv-nav__menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		background: var(--pv-marfil);
		border-bottom: 1px solid var(--pv-sep);
		box-shadow: var(--pv-sh-card);
		padding: 8px 0 16px;
	}
	.pv-nav--abierto .pv-nav__menu { display: flex; }
	.pv-nav__menu > li > a { display: block; padding: 13px var(--pv-pad); font-size: 16px; }
	.pv-nav__menu .sub-menu {
		display: flex;
		position: static;
		box-shadow: none;
		background: transparent;
		margin: 0;
		padding: 0 0 6px;
		border-radius: 0;
	}
	.pv-nav__menu .sub-menu a { padding: 8px var(--pv-pad) 8px calc(var(--pv-pad) + 16px); color: var(--pv-txt-3); }
	.pv-nav__inner { position: relative; padding: 14px var(--pv-pad); }
}

@media (max-width: 980px) {
	.pv-topbar__inner { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; }
	.pv-topbar__derecha { gap: 14px; }

	.pv-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; padding-top: 48px; }
}

/* ── ≤640px: móvil ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	:root { --pv-pad: 16px; --pv-gap-sec: 56px; }

	.pv-topbar { display: none; }

	.pv-nav__logo { height: 30px; }
	.pv-nav__wordmark { font-size: 20px; }

	/* Movil.dc.html: h2 de sección 22px / 800 */
	.pv-h2 { font-size: 22px; }

	/* Movil.dc.html: foto de tarjeta 170px, a sangre */
	.pv-t__media { height: 170px; padding: 0; }
	.pv-t__img { border-radius: 0; }
	.pv-t__tag, .pv-t__tags { top: 12px; left: 12px; font-size: 11px; padding: 5px 11px; }
	.pv-t__fav { top: 12px; right: 12px; width: 30px; height: 30px; font-size: 15px; }
	.pv-wm { inset: 0; }
	.pv-t__body { padding: 16px 18px 18px; }

	.pv-footer__inner { grid-template-columns: 1fr; gap: 28px; padding: 40px var(--pv-pad) 28px; }
	.pv-footer__desc { max-width: none; }
	.pv-footer__copy { flex-direction: column; gap: 6px; }
}