/*!
 * ============================================================================
 * URBIFY · urbify-single-property.css
 * Rediseño Airbnb-like del single de propiedad — child theme divi-child-urbify
 * ============================================================================
 *
 * Convenciones:
 *   - Mobile-first: estilos base sin media query → tablet @ 768px → desktop @ 1024px → wide @ 1280px.
 *   - Namespace BEM .urbify-property__* (los 12 partials del template comparten este prefijo).
 *   - Tokens globales heredados de main.css (--urb-*, --space-*, --text-*, etc.).
 *   - Tokens locales scoped en .urbify-property para evitar fugas globales.
 *   - SIN uso de !important salvo justificación documentada en comentario inline.
 *   - Microtransiciones limitadas a 0.2s ease (UX coherente con el resto del sitio).
 *
 * Índice:
 *   §0  Tokens scoped en .urbify-property
 *   §1  Wrapper + container
 *   §2  Breadcrumb
 *   §3  Header de la propiedad (meta, título, ubicación, stats inline)
 *   §4  Galería + ajustes mínimos de PhotoSwipe v5
 *   §5  Sparkline (historial de precio dentro del header)
 *   §6  Acciones rápidas (favoritos, comparador, compartir)
 *
 *   [Las secciones §7-§19 viven en PARTE 2 y PARTE 3 del rediseño Fase 3.]
 *
 * @package Divi_Child_Urbify
 * @since   1.2.0
 */

/* ============================================================================
   §0. TOKENS SCOPED EN .urbify-property
   ============================================================================
   Custom properties específicas del rediseño que NO queremos exponer al resto
   del sitio. Permiten ajustar gaps, radios y colores semánticos sin tocar el
   token global de main.css.
   ============================================================================ */
.urbify-property {
	/* Espaciado vertical entre secciones del main. */
	--urbify-prop-section-gap: clamp( 2.25rem, 4vw, 3.5rem );

	/* Anclaje sticky del aside: bajo del header pegajoso de Divi/child. */
	--urbify-prop-sticky-top: calc( var(--urb-header-height, 96px) + var(--space-4) );

	/* Radius del card del aside y de los CTAs grandes — un poco más
	   redondeado que el resto del sitio para look premium tipo Airbnb. */
	--urbify-prop-card-radius: 18px;

	/* Altura mínima de la galería en desktop (para que el grid no colapse
	   si las imágenes son muy bajas). */
	--urbify-prop-gallery-min-h: 460px;

	/* Colores oficiales de la escala A-G (RD 390/2021). Se usan en §10. */
	--urbify-prop-energy-a: #00a651;
	--urbify-prop-energy-b: #50b848;
	--urbify-prop-energy-c: #bfd52f;
	--urbify-prop-energy-d: #fff200;
	--urbify-prop-energy-e: #f7b017;
	--urbify-prop-energy-f: #ed7c2d;
	--urbify-prop-energy-g: #ed1c24;
	--urbify-prop-energy-special: #9ca3af;

	/* Color "alerta rebaja": rojo cálido (acento del badge "REBAJADA"). */
	--urbify-prop-discount: #d63638;

	/* Color del trend "subida" del sparkline (precio sube = malo). */
	--urbify-prop-trend-up:   #d63638;
	--urbify-prop-trend-down: var(--urb-mint-500);

	/* Borde sutil reutilizado en muchos bloques. */
	--urbify-prop-border: 1px solid var(--urb-gray-200);
}

/* ============================================================================
   §1. WRAPPER + CONTAINER
   ============================================================================ */

.urbify-property {
	background: var(--urb-white);
	color: var(--urb-navy-900);
	padding-bottom: var(--space-16);
}

/* Container interno: respeta el max-width del sitio + gutter responsive. */
.urbify-property__container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ============================================================================
   §2. BREADCRUMB
   ============================================================================
   Lista horizontal con separadores › y color discreto. El último ítem
   (current) se marca con peso medium y color navy 900.
   ============================================================================ */

.urbify-property__breadcrumb {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-4) var(--gutter) var(--space-3);
	font-size: var(--text-xs);
	color: var(--urb-gray-600);
}

.urbify-property__breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

.urbify-property__breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

/* Separador › entre items (excepto antes del primero). */
.urbify-property__breadcrumb__item + .urbify-property__breadcrumb__item::before {
	content: '›';
	color: var(--urb-gray-400);
	font-size: var(--text-sm);
	line-height: 1;
}

.urbify-property__breadcrumb__link {
	color: var(--urb-gray-600);
	text-decoration: none;
	transition: color 0.2s ease;
}

.urbify-property__breadcrumb__link:hover,
.urbify-property__breadcrumb__link:focus-visible {
	color: var(--urb-mint-500);
	text-decoration: underline;
	text-underline-offset: 3px;
	outline: none;
}

.urbify-property__breadcrumb__current {
	color: var(--urb-navy-900);
	font-weight: var(--fw-medium);
	/* Truncar el título largo para que el breadcrumb no rompa el layout. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 60vw;
}

@media (min-width: 768px) {
	.urbify-property__breadcrumb__current {
		max-width: 480px;
	}
}

/* ============================================================================
   §3. HEADER DE LA PROPIEDAD
   ============================================================================
   Contiene: meta line (ref, tipo, op, status, badges), título H1, ubicación
   con icono pin, stats inline tipo Airbnb, sparkline, acciones rápidas.
   Va INMEDIATAMENTE debajo de la galería.
   ============================================================================ */

.urbify-property__header {
	margin-block: var(--space-6) var(--space-8);
	padding-bottom: var(--space-6);
	border-bottom: var(--urbify-prop-border);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

@media (min-width: 1024px) {
	.urbify-property__header {
		gap: var(--space-5);
	}
}

/* ── Meta line (referencia · tipo · operación · estado · destacada · rebaja) ── */
.urbify-property__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	font-size: var(--text-xs);
	color: var(--urb-gray-600);
	letter-spacing: var(--tracking-wide);
}

.urbify-property__ref {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	color: var(--urb-gray-400);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.urbify-property__type-pill {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: var(--fw-medium);
	color: var(--urb-gray-600);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.urbify-property__type-pill::before {
	content: '·';
	margin-right: var(--space-2);
	color: var(--urb-gray-400);
	font-weight: var(--fw-bold);
}

.urbify-property__operation-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	background: var(--urb-navy-900);
	color: var(--urb-white);
	font-size: 10px;
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-wider);
	border-radius: var(--radius-sm);
}

.urbify-property__operation-pill--alquiler {
	background: var(--urb-mint-500);
}

/* Badges de estado (RESERVADA/VENDIDA/ALQUILADA), destacada y rebaja
   reusan los colores semánticos definidos en main.css. */
.urbify-property__status-badge,
.urbify-property__featured-badge,
.urbify-property__discount-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: 10px;
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	border-radius: var(--radius-sm);
	white-space: nowrap;
}

.urbify-property__status-badge--reservada {
	background: var(--urb-warning, #f59e0b);
	color: var(--urb-white);
}

.urbify-property__status-badge--vendida,
.urbify-property__status-badge--alquilada {
	background: var(--urb-gray-600);
	color: var(--urb-white);
}

.urbify-property__featured-badge {
	background: var(--urb-gold, #c5a572);
	color: var(--urb-navy-900);
}

.urbify-property__discount-badge {
	background: var(--urbify-prop-discount);
	color: var(--urb-white);
}

/* ── Título H1 (Playfair, imponente pero proporcionado) ─────────────────── */
.urbify-property__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp( 1.75rem, 4vw, 2.75rem );
	font-weight: var(--fw-bold);
	line-height: var(--leading-tight, 1.15);
	color: var(--urb-navy-900);
	letter-spacing: -0.01em;
}

/* ── Ubicación con icono pin verde menta ────────────────────────────────── */
.urbify-property__location {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--text-base);
	color: var(--urb-gray-600);
	line-height: var(--leading-snug, 1.4);
}

.urbify-property__location svg {
	flex-shrink: 0;
	color: var(--urb-mint-500);
}

/* ── Precio destacado bajo el título (movido desde el sidebar) ───────────
   Patrón Airbnb: el precio se ve nada más cargar la página, sin que el
   visitante tenga que mirar al sidebar. Tipografía Playfair grande, con
   el precio anterior tachado encima (si aplica) y el badge de rebaja en
   línea con el precio actual. */
.urbify-property__price-block {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: var(--space-2) 0 0;
}

.urbify-property__price-prev {
	font-family: var(--font-display);
	font-size: var(--text-base);
	color: var(--urb-gray-400);
	text-decoration: line-through;
}

.urbify-property__price-current {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.urbify-property__price-amount {
	font-family: var(--font-display);
	font-size: clamp( 1.875rem, 4.5vw, 2.75rem );
	font-weight: var(--fw-bold);
	color: var(--urb-navy-900);
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.urbify-property__price-period {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--fw-medium);
	color: var(--urb-gray-600);
}

.urbify-property__price-discount {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	background: var(--urbify-prop-discount);
	color: var(--urb-white);
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	border-radius: var(--radius-sm);
	align-self: center;
}

/* ── Stats inline tipo Airbnb (4 hab · 2 baños · 1.000 m² · 2018) ──────── */
.urbify-property__inline-stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
	color: var(--urb-gray-700, #475569);
}

.urbify-property__inline-stat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: var(--fw-medium);
}

.urbify-property__inline-stat svg {
	color: var(--urb-navy-500, #475569);
	flex-shrink: 0;
}

/* Separador · entre stats. */
.urbify-property__inline-stat + .urbify-property__inline-stat::before {
	content: '·';
	margin-right: var(--space-2);
	color: var(--urb-gray-400);
	font-weight: var(--fw-bold);
}

/* ============================================================================
   §4. GALERÍA — ajustes mínimos sobre PhotoSwipe v5
   ============================================================================
   PhotoSwipe v5 trae su propio CSS desde CDN para el overlay/lightbox.
   Aquí solo controlamos el grid de THUMBNAILS pre-apertura.
   ============================================================================ */

.urbify-property__gallery {
	position: relative;
	margin-block: var(--space-4) var(--space-2);
}

/* ── Mobile-first: carrusel horizontal con scroll-snap ─────────────────── */
.urbify-property__gallery__grid {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	border-radius: var(--radius-lg);
	/* Margin trick para que el carrusel sangre hasta el borde del viewport
	   en mobile, ignorando el gutter del container. */
	margin-inline: calc( var(--gutter) * -1 );
	padding-inline: var(--gutter);
}

.urbify-property__gallery__grid::-webkit-scrollbar {
	display: none;
}

.urbify-property__gallery__tile {
	position: relative;
	display: block;
	flex: 0 0 88%;
	aspect-ratio: 4 / 3;
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--urb-gray-50);
	cursor: zoom-in;
	transition: transform 0.2s ease;
}

.urbify-property__gallery__tile:focus-visible {
	outline: 3px solid var(--urb-mint-500);
	outline-offset: 2px;
}

.urbify-property__gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier( 0.2, 0.8, 0.2, 1 );
}

.urbify-property__gallery__tile:hover .urbify-property__gallery__img,
.urbify-property__gallery__tile:focus-visible .urbify-property__gallery__img {
	transform: scale( 1.03 );
}

/* Tile overflow (foto 6+): se MUESTRA en el carrusel mobile, se OCULTA en grid desktop.
   El attr "hidden" no aplica porque PhotoSwipe necesita el <a> en el DOM. */
.urbify-property__gallery__tile--overflow {
	/* Visible en mobile por defecto; se ocultará en desktop más abajo. */
}

/* ── Desktop ≥768px: grid asimétrico estilo Airbnb (1 hero + 4 small) ──── */
@media (min-width: 768px) {

	.urbify-property__gallery__grid {
		display: grid;
		gap: 8px;
		grid-template-columns: 2fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		min-height: var(--urbify-prop-gallery-min-h);
		max-height: 540px;
		overflow: hidden;
		padding-inline: 0;
		margin-inline: 0;
	}

	.urbify-property__gallery__tile {
		flex: initial;
		aspect-ratio: auto;
		width: 100%;
		height: 100%;
		border-radius: 0; /* el grid wrapper lleva el border-radius. */
	}

	/* Hero ocupa toda la columna izquierda en 2 filas. */
	.urbify-property__gallery__tile--hero {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	/* Tiles 6+ se ocultan visualmente en desktop, pero PhotoSwipe los lee
	   igual porque siguen en el DOM. Usamos display:none — la animación
	   open de PhotoSwipe simplemente cae al fade-in (sin source bounds). */
	.urbify-property__gallery__tile--overflow {
		display: none;
	}
}

@media (min-width: 1024px) {
	.urbify-property__gallery__grid {
		max-height: 580px;
	}
}

/* ── Botón "Ver todas las fotos (N)" sobre la última tile ─────────────── */
.urbify-property__gallery__view-all {
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-3);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 10px 16px;
	background: rgba( 255, 255, 255, 0.95 );
	color: var(--urb-navy-900);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	border: 0;
	border-radius: var(--radius-md);
	box-shadow: 0 4px 14px rgba( 10, 31, 68, 0.18 );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	cursor: pointer;
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.urbify-property__gallery__view-all:hover,
.urbify-property__gallery__view-all:focus-visible {
	background: var(--urb-white);
	box-shadow: 0 6px 18px rgba( 10, 31, 68, 0.24 );
	transform: translateY( -1px );
	outline: none;
}

.urbify-property__gallery__view-all svg {
	flex-shrink: 0;
}

/* En mobile el texto del botón se acorta para que no rompa la línea. */
@media (max-width: 600px) {
	.urbify-property__gallery__view-all {
		padding: 8px 14px;
		font-size: var(--text-xs);
	}
}

/* ── Overrides mínimos del UI nativo de PhotoSwipe v5 ───────────────────
   PhotoSwipe trae todo su CSS pero queremos alinear el counter y el
   close button con la paleta navy de Urbify. */
.pswp__counter {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
}

.pswp__bg {
	background: rgba( 10, 31, 68, 0.96 );
}

.pswp__icn-cust use {
	stroke: var(--urb-white);
}

/* ============================================================================
   §5. SPARKLINE (historial de precio dentro del header)
   ============================================================================ */

.urbify-property__sparkline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 6px 10px;
	background: var(--urb-cream);
	border-radius: var(--radius-full);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	color: var(--urb-gray-600);
	width: fit-content;
}

.urbify-property__sparkline--up {
	color: var(--urbify-prop-trend-up);
}

.urbify-property__sparkline--down {
	color: var(--urbify-prop-trend-down);
}

.urbify-property__sparkline__icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.urbify-property__sparkline__svg {
	width: 60px;
	height: 18px;
	flex-shrink: 0;
	color: currentColor;
}

.urbify-property__sparkline__summary {
	white-space: nowrap;
	letter-spacing: var(--tracking-wide);
}

/* ============================================================================
   §6. ACCIONES RÁPIDAS (favoritos · comparador · compartir)
   ============================================================================
   Pills outline navy. Al hover/focus, fill navy. Estado is-active (favorito
   guardado o comparador activo) lleva fill mint. La favorites.js existente
   añade .is-active automáticamente cuando el ID está en localStorage.
   ============================================================================ */

.urbify-property__quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

/* Override de la regla legacy de main.css que oculta `.urb-card__compare-btn`
   con `display: none !important` (el cliente lo quiso ocultar EN LAS CARDS,
   no en el single). El botón Comparar del header del rediseño NECESITA esa
   clase para que el JS del plugin (comparator-button.js) lo detecte. Aquí
   restauramos su visibilidad con misma fuerza para ganar la cascada.
   Justificación del !important: necesario para vencer al !important legacy. */
.urbify-property__quick-actions .urbify-property__action.urb-card__compare-btn {
	display: inline-flex !important;
}

.urbify-property__action {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 10px 16px;
	background: var(--urb-white);
	color: var(--urb-navy-900);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	border: 1.5px solid var(--urb-gray-200);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.urbify-property__action:hover,
.urbify-property__action:focus-visible {
	background: var(--urb-navy-900);
	color: var(--urb-white);
	border-color: var(--urb-navy-900);
	transform: translateY( -1px );
	outline: none;
}

.urbify-property__action:hover svg,
.urbify-property__action:focus-visible svg {
	stroke: var(--urb-white);
}

/* Estado activo (item ya en localStorage) — color menta. La regla es exclusiva
   de las acciones del header para no chocar con otros .is-active del sitio. */
.urbify-property__quick-actions .urbify-property__action.is-active {
	background: var(--urb-mint-500);
	color: var(--urb-white);
	border-color: var(--urb-mint-500);
}

.urbify-property__quick-actions .urbify-property__action.is-active svg {
	fill: var(--urb-white);
	stroke: var(--urb-white);
}

.urbify-property__action svg {
	flex-shrink: 0;
	transition: stroke 0.2s ease, fill 0.2s ease;
}

/* Etiqueta del botón: en mobile <420px se oculta la palabra y queda solo el icono. */
.urbify-property__action-label {
	white-space: nowrap;
}

@media (max-width: 419px) {
	.urbify-property__action {
		padding: 10px 12px;
	}

	.urbify-property__action-label {
		/* sr-only sin uso de !important: clip y dimensiones cero. */
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
		border: 0;
	}
}

/* === fin de PARTE 1/3 ====================================================== */

/* ============================================================================
   §7. LAYOUT 2 COLUMNAS + SECCIÓN GENÉRICA
   ============================================================================
   Mobile-first single column. En desktop ≥1024px se convierte en grid de
   2 columnas: contenido fluido a la izquierda + aside fijo de 380px a la
   derecha. El aside es sticky en su propio contenedor (CSS-only, sin JS).
   ============================================================================ */

.urbify-property__layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	margin-block: var(--space-2) var(--urbify-prop-section-gap);
}

@media (min-width: 1024px) {
	.urbify-property__layout {
		display: grid;
		/* La col 1 usa minmax(0, 1fr) en lugar de "1fr" para permitir que
		   contenido ancho (mapas, vídeos, tablas) NO desborde el grid. */
		grid-template-columns: minmax( 0, 1fr ) 380px;
		gap: var(--space-10);
		align-items: start;
	}
}

@media (min-width: 1280px) {
	.urbify-property__layout {
		gap: var(--space-12);
		grid-template-columns: minmax( 0, 1fr ) 400px;
	}
}

/* ── Main column: secciones del contenido ─────────────────────────────── */
.urbify-property__main {
	min-width: 0; /* hace que minmax(0, 1fr) del grid funcione bien con prose largo */
	display: flex;
	flex-direction: column;
	gap: var(--urbify-prop-section-gap);
}

/* ── Sidebar (sticky en desktop) ──────────────────────────────────────── */
.urbify-property__sidebar {
	min-width: 0;
}

@media (min-width: 1024px) {
	.urbify-property__sidebar__sticky {
		position: sticky;
		top: var(--urbify-prop-sticky-top);
		max-height: calc( 100vh - var(--urbify-prop-sticky-top) - var(--space-4) );
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--urb-gray-300, #cbd5e1) transparent;
	}
}

/* ── Section genérica común a todas las secciones del main ───────────── */
.urbify-property__section {
	margin: 0;
	padding: 0;
	scroll-margin-top: calc( var(--urb-header-height, 96px) + var(--space-4) );
}

/* Heading principal de cada sección. Usa Playfair y un peso intermedio
   entre H1 y H3 para jerarquía clara sin competir con el título. */
.urbify-property__section-title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-size: clamp( 1.25rem, 2.5vw, 1.75rem );
	font-weight: var(--fw-semibold);
	line-height: var(--leading-snug, 1.3);
	color: var(--urb-navy-900);
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.urbify-property__section-title svg {
	flex-shrink: 0;
	color: var(--urb-mint-500);
}

/* ============================================================================
   §8. DESCRIPCIÓN / PROSE
   ============================================================================
   Estilos para el contenido editado en el editor de WP (the_content).
   Independientes de Divi para evitar herencias raras del builder.
   ============================================================================ */

.urbify-property__description {
	/* Hereda spacing de .urbify-property__section. */
}

.urbify-property__prose {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed, 1.65);
	color: var(--urb-navy-900);
	max-width: 70ch; /* legibilidad — recomendación tipográfica clásica */
}

.urbify-property__prose > * + * {
	margin-top: var(--space-4);
}

.urbify-property__prose p {
	margin: 0;
}

.urbify-property__prose h2,
.urbify-property__prose h3,
.urbify-property__prose h4 {
	font-family: var(--font-display);
	color: var(--urb-navy-900);
	margin-top: var(--space-6);
	margin-bottom: var(--space-3);
	line-height: var(--leading-tight, 1.2);
	font-weight: var(--fw-semibold);
}

.urbify-property__prose h2 { font-size: 1.5rem; }
.urbify-property__prose h3 { font-size: 1.25rem; }
.urbify-property__prose h4 { font-size: 1.1rem; }

.urbify-property__prose strong {
	color: var(--urb-navy-900);
	font-weight: var(--fw-semibold);
}

.urbify-property__prose em {
	color: var(--urb-gray-700, #475569);
}

.urbify-property__prose a {
	color: var(--urb-mint-600, #1f9d54);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.urbify-property__prose a:hover,
.urbify-property__prose a:focus-visible {
	color: var(--urb-navy-900);
	outline: none;
}

.urbify-property__prose ul,
.urbify-property__prose ol {
	padding-left: 1.5em;
	margin: 0;
}

.urbify-property__prose li + li {
	margin-top: var(--space-2);
}

.urbify-property__prose blockquote {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border-left: 3px solid var(--urb-mint-500);
	background: var(--urb-cream);
	color: var(--urb-gray-700, #475569);
	font-style: italic;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.urbify-property__prose code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--urb-gray-100, #f1f5f9);
	padding: 2px 6px;
	border-radius: 4px;
	color: var(--urb-navy-900);
}

.urbify-property__prose pre {
	overflow-x: auto;
	padding: var(--space-4);
	background: var(--urb-gray-50);
	border-radius: var(--radius-md);
	border: var(--urbify-prop-border);
}

.urbify-property__prose pre code {
	background: transparent;
	padding: 0;
}

.urbify-property__prose img,
.urbify-property__prose figure {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	display: block;
	margin-block: var(--space-4);
}

.urbify-property__prose hr {
	border: 0;
	border-top: var(--urbify-prop-border);
	margin-block: var(--space-6);
}

/* ============================================================================
   §9. FEATURES (equipamiento + datos técnicos)
   ============================================================================ */

.urbify-property__features {
	/* hereda de section */
}

/* ── Grid de equipamiento booleanos (piscina, garaje, terraza, etc.) ──── */
.urbify-property__features__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

@media (min-width: 600px) {
	.urbify-property__features__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (min-width: 1024px) {
	.urbify-property__features__grid {
		grid-template-columns: repeat( 3, 1fr );
		gap: var(--space-4);
	}
}

@media (min-width: 1280px) {
	.urbify-property__features__grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.urbify-property__features__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--urb-cream);
	border-radius: var(--radius-md);
	transition: background 0.2s ease, transform 0.2s ease;
}

.urbify-property__features__item:hover {
	background: var(--urb-gray-100, #f1f5f9);
	transform: translateY( -1px );
}

.urbify-property__features__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: var(--urb-white);
	border-radius: var(--radius-full);
	color: var(--urb-mint-500);
	flex-shrink: 0;
	box-shadow: 0 1px 2px rgba( 10, 31, 68, 0.06 );
}

.urbify-property__features__label {
	flex: 1;
	min-width: 0;
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--urb-navy-900);
	line-height: var(--leading-snug, 1.3);
}

.urbify-property__features__check {
	color: var(--urb-mint-500);
	flex-shrink: 0;
}

/* ── <details> con datos técnicos secundarios ─────────────────────────── */
.urbify-property__features__details {
	margin-top: var(--space-5);
	padding: var(--space-4) var(--space-5);
	background: var(--urb-gray-50);
	border: var(--urbify-prop-border);
	border-radius: var(--radius-md);
}

.urbify-property__features__details-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	cursor: pointer;
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	color: var(--urb-navy-900);
	list-style: none;            /* oculta el triángulo nativo en Firefox */
	padding: 0;
	user-select: none;
}

.urbify-property__features__details-summary::-webkit-details-marker {
	display: none;               /* oculta el triángulo nativo en Chrome/Safari */
}

.urbify-property__features__details-summary:hover {
	color: var(--urb-mint-500);
}

.urbify-property__features__details-icon {
	transition: transform 0.2s ease;
}

.urbify-property__features__details[open] .urbify-property__features__details-icon {
	transform: rotate( 180deg );
}

.urbify-property__features__technical {
	margin: var(--space-4) 0 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (min-width: 600px) {
	.urbify-property__features__technical {
		grid-template-columns: repeat( 2, 1fr );
		column-gap: var(--space-6);
	}
}

.urbify-property__features__technical-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-bottom: var(--urbify-prop-border);
}

.urbify-property__features__technical-row:last-child,
.urbify-property__features__technical:has(> :last-child:nth-child(odd)) > :nth-last-child(2) {
	/* Si hay un nº impar de filas, la penúltima en grid de 2 cols queda
	   en la fila final junto con la última: no le quitamos border. */
}

@media (min-width: 600px) {
	/* En 2 cols, las filas de la última fila no llevan border-bottom. */
	.urbify-property__features__technical-row:nth-last-child(-n+2) {
		border-bottom: 0;
	}
}

.urbify-property__features__technical-label {
	margin: 0;
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	color: var(--urb-gray-600);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.urbify-property__features__technical-value {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: var(--fw-semibold);
	color: var(--urb-navy-900);
	text-align: right;
}

/* ============================================================================
   §10. CERTIFICADO ENERGÉTICO (RD 390/2021)
   ============================================================================
   Escala horizontal A-G con los 7 colores oficiales. La letra activa se
   resalta con scale + box-shadow + opacidad plena. El resto se atenúa al
   60% para reforzar contraste visual.
   ============================================================================ */

.urbify-property__energy {
	/* hereda de section */
}

.urbify-property__energy__header {
	margin-bottom: var(--space-5);
}

.urbify-property__energy__legal {
	margin: var(--space-2) 0 0;
	font-size: var(--text-xs);
	color: var(--urb-gray-600);
	font-style: italic;
}

.urbify-property__energy__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

@media (min-width: 768px) {
	.urbify-property__energy__grid {
		grid-template-columns: repeat( 2, 1fr );
		gap: var(--space-6);
	}
}

.urbify-property__energy__pair {
	padding: var(--space-5);
	background: var(--urb-gray-50);
	border: var(--urbify-prop-border);
	border-radius: var(--radius-md);
}

.urbify-property__energy__subtitle {
	margin: 0 0 var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	color: var(--urb-gray-700, #475569);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

/* Escala A-G horizontal: 7 columnas iguales con hueco mínimo. */
.urbify-property__energy__scale {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 3px;
	margin-bottom: var(--space-4);
	padding: var(--space-2);
	background: var(--urb-white);
	border-radius: var(--radius-sm);
}

.urbify-property__energy__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: var(--fw-bold);
	border-radius: 4px;
	opacity: 0.55;
	transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Colores oficiales del RD 390/2021. La letra interior se escoge en función
   del contraste contra el fondo (negro sobre amarillo/lima, blanco sobre
   rojo/verde oscuro). */
.urbify-property__energy__bar--a { background: var(--urbify-prop-energy-a); color: var(--urb-white); }
.urbify-property__energy__bar--b { background: var(--urbify-prop-energy-b); color: var(--urb-white); }
.urbify-property__energy__bar--c { background: var(--urbify-prop-energy-c); color: var(--urb-navy-900); }
.urbify-property__energy__bar--d { background: var(--urbify-prop-energy-d); color: var(--urb-navy-900); }
.urbify-property__energy__bar--e { background: var(--urbify-prop-energy-e); color: var(--urb-white); }
.urbify-property__energy__bar--f { background: var(--urbify-prop-energy-f); color: var(--urb-white); }
.urbify-property__energy__bar--g { background: var(--urbify-prop-energy-g); color: var(--urb-white); }

/* Letra activa: opacidad plena + scale + sombra coloreada del propio fondo. */
.urbify-property__energy__bar.is-active {
	opacity: 1;
	transform: scale( 1.18 );
	z-index: 1;
	position: relative;
	box-shadow: 0 6px 16px rgba( 10, 31, 68, 0.18 );
}

/* Variante "estado especial" (en trámite / exento): un solo bloque gris
   ocupando todo el ancho, sin gradiente A-G. */
.urbify-property__energy__scale--special {
	grid-template-columns: 1fr;
	background: var(--urbify-prop-energy-special);
	padding: var(--space-4) var(--space-2);
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.urbify-property__energy__special-status {
	color: var(--urb-white);
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
}

/* Valor numérico debajo de la escala (kWh/m²·año o kg CO₂/m²·año). */
.urbify-property__energy__value {
	margin: 0;
	text-align: center;
	font-size: var(--text-sm);
	color: var(--urb-gray-700, #475569);
}

.urbify-property__energy__value strong {
	display: inline-block;
	font-family: var(--font-display);
	font-size: var(--text-2xl, 1.5rem);
	font-weight: var(--fw-bold);
	color: var(--urb-navy-900);
	margin-right: 4px;
}

.urbify-property__energy__unit {
	color: var(--urb-gray-600);
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-wide);
}

/* ============================================================================
   §11. REFINAMIENTOS DEL HEADER (post §3)
   ============================================================================
   Ajustes pequeños que dependen del layout de columnas de §7 — por eso se
   aplican aquí y no en §3.
   ============================================================================ */

/* En desktop, el header NO tiene sentido a 1320px de ancho con un sidebar
   de 380px al lado, porque visualmente quedaría descentrado. Dejamos el
   header al ancho del container completo (precede al layout 2-col). */
@media (min-width: 1024px) {
	.urbify-property__header {
		margin-block: var(--space-8) var(--space-6);
		padding-bottom: var(--space-6);
	}
}

/* Sparkline alineado con el resto de elementos del header en desktop. */
@media (min-width: 768px) {
	.urbify-property__sparkline {
		align-self: flex-start;
	}
}

/* === fin de PARTE 2/3 ====================================================== */

/* ============================================================================
   §12. FLOORPLAN (plano de la vivienda)
   ============================================================================
   Contenedor con aspect-ratio libre — los planos suelen ser horizontales
   pero algunos verticales. La imagen se centra y mantiene proporción.
   El <a> es zoom-in (PhotoSwipe) compartiendo grupo con el plano único.
   ============================================================================ */

.urbify-property__floorplan {
	/* hereda de section */
}

.urbify-property__floorplan__link {
	display: block;
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
	background: var(--urb-cream);
	border: var(--urbify-prop-border);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	cursor: zoom-in;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.urbify-property__floorplan__link:hover,
.urbify-property__floorplan__link:focus-visible {
	border-color: var(--urb-mint-500);
	box-shadow: 0 4px 14px rgba( 10, 31, 68, 0.08 );
	outline: none;
}

.urbify-property__floorplan__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 540px;
	object-fit: contain;
	margin: 0 auto;
}

/* ============================================================================
   §13. VIDEO TOUR (lazy on click)
   ============================================================================
   Poster con aspect-ratio 16:9 + botón play centrado. Al hacer click el JS
   sustituye el contenedor por el iframe del proveedor (YouTube/Vimeo) sin
   cookies hasta entonces. Aviso de privacidad inline.
   ============================================================================ */

.urbify-property__video {
	/* hereda de section */
}

.urbify-property__video__wrap {
	position: relative;
	width: 100%;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--urb-navy-900);
	box-shadow: 0 4px 20px rgba( 10, 31, 68, 0.18 );
}

.urbify-property__video__poster {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0;
	padding: 0;
	background: var(--urb-navy-900);
	border: 0;
	cursor: pointer;
	overflow: hidden;
}

.urbify-property__video__poster:focus-visible {
	outline: 3px solid var(--urb-mint-500);
	outline-offset: -3px;
}

.urbify-property__video__poster-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier( 0.2, 0.8, 0.2, 1 ), filter 0.2s ease;
	filter: brightness( 0.85 );
}

.urbify-property__video__poster:hover .urbify-property__video__poster-img,
.urbify-property__video__poster:focus-visible .urbify-property__video__poster-img {
	transform: scale( 1.03 );
	filter: brightness( 1 );
}

.urbify-property__video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	background: var(--urb-mint-500);
	color: var(--urb-white);
	border-radius: var(--radius-full);
	box-shadow: 0 8px 24px rgba( 46, 204, 113, 0.45 );
	transition: transform 0.2s ease, background 0.2s ease;
}

.urbify-property__video__poster:hover .urbify-property__video__play,
.urbify-property__video__poster:focus-visible .urbify-property__video__play {
	transform: translate( -50%, -50% ) scale( 1.08 );
	background: var(--urb-mint-600, #1f9d54);
}

/* Aviso de privacidad inline (RGPD-friendly: el iframe no carga hasta el click). */
.urbify-property__video__privacy {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--space-3) var(--space-4);
	background: linear-gradient( to top, rgba( 10, 31, 68, 0.78 ), rgba( 10, 31, 68, 0 ) );
	color: var(--urb-white);
	font-size: var(--text-xs);
	line-height: var(--leading-snug, 1.4);
	text-align: center;
	pointer-events: none;
}

/* Cuando el JS inserta el iframe real, le aplica .is-playing al wrap.
   El poster se oculta y el iframe ocupa todo. */
.urbify-property__video__wrap.is-playing .urbify-property__video__poster {
	display: none;
}

.urbify-property__video__wrap iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* ============================================================================
   §14. MAPA (Google Maps embed o fallback OSM)
   ============================================================================ */

.urbify-property__map {
	/* hereda de section */
}

.urbify-property__map__wrap {
	position: relative;
	width: 100%;
	min-height: 320px;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: var(--urbify-prop-border);
	box-shadow: 0 2px 10px rgba( 10, 31, 68, 0.06 );
}

@media (min-width: 768px) {
	.urbify-property__map__wrap {
		min-height: 400px;
	}
}

.urbify-property__map__wrap iframe {
	display: block;
	width: 100%;
	min-height: 320px;
	border: 0;
}

@media (min-width: 768px) {
	.urbify-property__map__wrap iframe {
		min-height: 400px;
	}
}

.urbify-property__map__address {
	margin: var(--space-3) 0 0;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--urb-gray-700, #475569);
}

.urbify-property__map__address::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--urb-mint-500);
	border-radius: var(--radius-full);
	flex-shrink: 0;
}

/* ============================================================================
   §15. CALCULADORA DE HIPOTECA
   ============================================================================
   Layout: header + 4 sliders apilados + bloque de resultado destacado.
   Los sliders son <input type="range"> con styling cross-browser custom.
   ============================================================================ */

.urbify-property__mortgage {
	background: var(--urb-cream);
	border-radius: var(--urbify-prop-card-radius);
	padding: var(--space-6);
}

@media (min-width: 768px) {
	.urbify-property__mortgage {
		padding: var(--space-8);
	}
}

.urbify-property__mortgage__header {
	margin-bottom: var(--space-5);
}

.urbify-property__mortgage__intro {
	margin: var(--space-2) 0 0;
	font-size: var(--text-sm);
	color: var(--urb-gray-700, #475569);
	line-height: var(--leading-snug, 1.4);
}

.urbify-property__mortgage__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin-bottom: var(--space-6);
}

.urbify-property__mortgage__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.urbify-property__mortgage__field-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
}

.urbify-property__mortgage__label {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--urb-gray-700, #475569);
}

.urbify-property__mortgage__value {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: var(--fw-semibold);
	color: var(--urb-navy-900);
	text-align: right;
	letter-spacing: -0.01em;
}

/* ── Slider personalizado (track + thumb cross-browser) ──────────────── */
.urbify-property__mortgage__slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	background: var(--urb-gray-200);
	border-radius: var(--radius-full);
	outline: none;
	cursor: grab;
	transition: background 0.2s ease;
}

.urbify-property__mortgage__slider:hover {
	background: var(--urb-gray-300, #cbd5e1);
}

.urbify-property__mortgage__slider:focus-visible {
	box-shadow: 0 0 0 3px rgba( 46, 204, 113, 0.3 );
}

.urbify-property__mortgage__slider:active {
	cursor: grabbing;
}

/* Thumb: WebKit (Chrome, Safari, Edge). */
.urbify-property__mortgage__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	background: var(--urb-mint-500);
	border: 3px solid var(--urb-white);
	border-radius: var(--radius-full);
	box-shadow: 0 2px 6px rgba( 10, 31, 68, 0.18 );
	cursor: grab;
	transition: transform 0.15s ease, background 0.2s ease;
}

.urbify-property__mortgage__slider::-webkit-slider-thumb:hover {
	transform: scale( 1.1 );
}

.urbify-property__mortgage__slider:active::-webkit-slider-thumb {
	cursor: grabbing;
	background: var(--urb-mint-600, #1f9d54);
}

/* Thumb: Firefox. */
.urbify-property__mortgage__slider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	background: var(--urb-mint-500);
	border: 3px solid var(--urb-white);
	border-radius: var(--radius-full);
	box-shadow: 0 2px 6px rgba( 10, 31, 68, 0.18 );
	cursor: grab;
	transition: transform 0.15s ease, background 0.2s ease;
}

.urbify-property__mortgage__slider::-moz-range-thumb:hover {
	transform: scale( 1.1 );
}

/* ── Bloque de resultado: cuota mensual ──────────────────────────────── */
.urbify-property__mortgage__result {
	padding: var(--space-5);
	background: var(--urb-white);
	border-radius: var(--radius-md);
	border: 2px solid var(--urb-mint-500);
	text-align: center;
	box-shadow: 0 4px 16px rgba( 46, 204, 113, 0.12 );
}

.urbify-property__mortgage__result-label {
	margin: 0 0 var(--space-2);
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	color: var(--urb-gray-600);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.urbify-property__mortgage__result-value {
	margin: 0;
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-size: clamp( 1.75rem, 4vw, 2.5rem );
	font-weight: var(--fw-bold);
	color: var(--urb-navy-900);
	letter-spacing: -0.02em;
}

.urbify-property__mortgage__result-period {
	font-size: var(--text-base);
	font-weight: var(--fw-medium);
	color: var(--urb-gray-600);
	letter-spacing: 0;
}

.urbify-property__mortgage__result-detail {
	margin: var(--space-2) 0 0;
	font-size: var(--text-xs);
	color: var(--urb-gray-600);
}

.urbify-property__mortgage__legal {
	margin: var(--space-5) 0 0;
	font-size: var(--text-xs);
	color: var(--urb-gray-600);
	line-height: var(--leading-snug, 1.4);
	font-style: italic;
}

.urbify-property__mortgage__legal strong {
	font-style: normal;
	color: var(--urb-navy-900);
}

/* ============================================================================
   §16. SIDEBAR STICKY CTA
   ============================================================================
   Card vertical premium tipo Airbnb: precio HUGE + ficha rápida + 4 CTAs +
   form CF7 inline + sello RGPD. Padding y radio generosos para sensación
   de "card flotante" sobre el resto del contenido.
   ============================================================================ */

.urbify-property__sidebar__card {
	background: var(--urb-white);
	border: var(--urbify-prop-border);
	border-radius: var(--urbify-prop-card-radius);
	padding: var(--space-6);
	box-shadow: 0 8px 32px rgba( 10, 31, 68, 0.08 );
}

@media (min-width: 1024px) {
	.urbify-property__sidebar__card {
		padding: var(--space-7);
	}
}

/* El bloque de precio destacado del sidebar se eliminó: ahora vive en el
   header del article (.urbify-property__price-block, ver §3 más arriba).
   El sidebar arranca directamente con la mini-ficha. */

/* ── ❶ Mini ficha rápida ─────────────────────────────────────────────── */
.urbify-property__sidebar__quickfacts {
	margin: 0 0 var(--space-5);
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3) var(--space-4);
}

.urbify-property__sidebar__quickfact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.urbify-property__sidebar__quickfact dt {
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	color: var(--urb-gray-600);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.urbify-property__sidebar__quickfact dd {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	color: var(--urb-navy-900);
	overflow-wrap: anywhere;
}

.urbify-property__sidebar__status-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	background: var(--urb-gray-100, #f1f5f9);
	color: var(--urb-navy-900);
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	border-radius: var(--radius-full);
}

.urbify-property__sidebar__status-pill--disponible {
	background: rgba( 46, 204, 113, 0.15 );
	color: #1f9d54;
}

.urbify-property__sidebar__status-pill--reservada {
	background: rgba( 245, 158, 11, 0.15 );
	color: #b45309;
}

.urbify-property__sidebar__status-pill--vendida,
.urbify-property__sidebar__status-pill--alquilada {
	background: var(--urb-gray-200);
	color: var(--urb-gray-700, #475569);
}

/* ── ❸ Bloque de CTAs ─────────────────────────────────────────────────── */
.urbify-property__sidebar__ctas {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
}

.urbify-property__sidebar__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 14px 18px;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--fw-semibold);
	border: 0;
	border-radius: var(--radius-md);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.urbify-property__sidebar__cta svg {
	flex-shrink: 0;
}

/* CTA primaria: "Solicitar visita" — navy con realce hover. */
.urbify-property__sidebar__cta--primary {
	background: var(--urb-navy-900);
	color: var(--urb-white);
	box-shadow: 0 4px 14px rgba( 10, 31, 68, 0.25 );
}

.urbify-property__sidebar__cta--primary:hover,
.urbify-property__sidebar__cta--primary:focus-visible {
	background: var(--urb-mint-500);
	color: var(--urb-white);
	transform: translateY( -2px );
	box-shadow: 0 6px 20px rgba( 46, 204, 113, 0.35 );
	outline: none;
}

/* CTA WhatsApp: outline con icono mint. */
.urbify-property__sidebar__cta--whatsapp {
	background: var(--urb-white);
	color: #25d366;             /* color de marca de WhatsApp para el icono */
	border: 1.5px solid #25d366;
}

.urbify-property__sidebar__cta--whatsapp span {
	color: var(--urb-navy-900);
}

.urbify-property__sidebar__cta--whatsapp:hover,
.urbify-property__sidebar__cta--whatsapp:focus-visible {
	background: #25d366;
	color: var(--urb-white);
	border-color: #25d366;
	transform: translateY( -1px );
	outline: none;
}

.urbify-property__sidebar__cta--whatsapp:hover span,
.urbify-property__sidebar__cta--whatsapp:focus-visible span {
	color: var(--urb-white);
}

/* CTA teléfono: secundaria outline navy. */
.urbify-property__sidebar__cta--phone {
	background: var(--urb-white);
	color: var(--urb-navy-900);
	border: 1.5px solid var(--urb-gray-200);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
}

.urbify-property__sidebar__cta--phone:hover,
.urbify-property__sidebar__cta--phone:focus-visible {
	background: var(--urb-navy-900);
	color: var(--urb-white);
	border-color: var(--urb-navy-900);
	outline: none;
}

/* CTA PDF: terciaria estilo "ghost". */
.urbify-property__sidebar__cta--pdf {
	background: transparent;
	color: var(--urb-gray-700, #475569);
	border: 1.5px dashed var(--urb-gray-300, #cbd5e1);
	font-size: var(--text-sm);
}

.urbify-property__sidebar__cta--pdf:hover,
.urbify-property__sidebar__cta--pdf:focus-visible {
	background: var(--urb-cream);
	color: var(--urb-navy-900);
	border-color: var(--urb-mint-500);
	border-style: solid;
	outline: none;
}

/* La flecha "arrow-up" del icono PDF se rota 180° para sugerir descarga. */
.urbify-property__sidebar__cta-icon-rotate {
	transform: rotate( 180deg );
}

/* ── Horario bajo el botón teléfono ───────────────────────────────────── */
.urbify-property__sidebar__hours {
	margin: -2px 0 var(--space-1);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-xs);
	color: var(--urb-gray-600);
	padding-left: 4px;
}

.urbify-property__sidebar__hours svg {
	flex-shrink: 0;
	color: var(--urb-gray-400);
}

/* ============================================================================
   ❼ FORMULARIO DE CONTACTO (CF7)  —  Diseño premium responsivo
   ============================================================================
   Estructura visual:
       ┌────────────────────────────────────┐
       │ ▰ borde superior gradient mint→navy
       │ 💬 Contacta con nosotros           │  ← título Playfair
       │ Te respondemos en menos de 24h     │  ← subtítulo opcional
       │ ┌──────────────────────────────┐   │
       │ │ 🟢 Contactar por WhatsApp    │   │  ← shortcut wa.me
       │ └──────────────────────────────┘   │
       │   ─── O por email ───              │  ← divider
       │   Tu nombre y apellidos *          │
       │   [____________________]            │  ← input con focus underline
       │   ! Por favor, rellena…            │  ← validación con icono
       │   ☑ He leído la política…          │  ← checkbox custom
       │   ┌──────────────────────────┐     │
       │   │ → Enviar consulta        │     │  ← submit con shimmer hover
       │   └──────────────────────────┘     │
       └────────────────────────────────────┘

   Responsive en 3 breakpoints: mobile <600 / tablet ≥600 / desktop ≥1024.
   ============================================================================ */

/* ─── Wrapper general del bloque form ──────────────────────────────────── */
.urbify-property__sidebar__form {
	position: relative;
	margin-top: var(--space-6);
	padding: var(--space-5) var(--space-4) var(--space-5);
	background: var(--urb-white);
	border: 1px solid var(--urb-gray-200);
	border-radius: var(--urbify-prop-card-radius);
	box-shadow: 0 8px 24px rgba( 10, 31, 68, 0.06 );
	overflow: hidden;
}

@media (min-width: 600px) {
	.urbify-property__sidebar__form {
		padding: var(--space-6) var(--space-5) var(--space-6);
	}
}

/* Borde superior decorativo: gradient mint→navy. Refuerza la marca y
   ancla visualmente el bloque del form sin recuadro pesado. */
.urbify-property__sidebar__form::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient( 90deg,
		var(--urb-mint-500) 0%,
		var(--urb-mint-400, #4FD888) 35%,
		var(--urb-navy-700, #15315E) 100%
	);
	pointer-events: none;
}

/* ─── Título del form ──────────────────────────────────────────────────── */
.urbify-property__sidebar__form-title {
	margin: 0 0 var(--space-1);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--fw-semibold);
	color: var(--urb-navy-900);
	line-height: var(--leading-snug, 1.3);
	letter-spacing: -0.01em;
}

.urbify-property__sidebar__form-title svg {
	color: var(--urb-mint-500);
	flex-shrink: 0;
}

/* Subtítulo discreto opcional bajo el título (si el cliente lo añade). */
.urbify-property__sidebar__form-subtitle {
	margin: 0 0 var(--space-4);
	font-size: var(--text-sm);
	color: var(--urb-gray-600);
	line-height: var(--leading-snug, 1.4);
}

/* ─── WhatsApp shortcut: alternativa rápida al CF7 ─────────────────────── */
.urbify-property__sidebar__form-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	padding: 14px 18px;
	margin: var(--space-4) 0 0;
	background: linear-gradient( 135deg, #25d366 0%, #1eb358 100% );
	color: var(--urb-white);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.01em;
	border: 0;
	border-radius: var(--radius-md);
	text-decoration: none;
	box-shadow: 0 4px 14px rgba( 37, 211, 102, 0.32 ),
	            inset 0 1px 0 rgba( 255, 255, 255, 0.15 );
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Sutil shimmer al hover para indicar que es interactivo. */
.urbify-property__sidebar__form-wa::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient( 90deg,
		transparent 0%,
		rgba( 255, 255, 255, 0.18 ) 50%,
		transparent 100%
	);
	transition: left 0.6s ease;
	pointer-events: none;
}

.urbify-property__sidebar__form-wa:hover,
.urbify-property__sidebar__form-wa:focus-visible {
	transform: translateY( -1px );
	box-shadow: 0 8px 22px rgba( 37, 211, 102, 0.42 ),
	            inset 0 1px 0 rgba( 255, 255, 255, 0.2 );
	color: var(--urb-white);
	outline: none;
}

.urbify-property__sidebar__form-wa:hover::after,
.urbify-property__sidebar__form-wa:focus-visible::after {
	left: 100%;
}

.urbify-property__sidebar__form-wa svg {
	flex-shrink: 0;
}

/* ─── Divider "O por email" ────────────────────────────────────────────── */
.urbify-property__sidebar__form-divider {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-5) 0 var(--space-4);
	font-size: 11px;
	font-weight: var(--fw-semibold);
	color: var(--urb-gray-400);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.urbify-property__sidebar__form-divider::before,
.urbify-property__sidebar__form-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient( 90deg, transparent, var(--urb-gray-200), transparent );
}

/* ─── Wrapper del CF7 ──────────────────────────────────────────────────── */
.urbify-property__sidebar__form-wrap {
	display: flex;
	flex-direction: column;
}

/* CF7 envuelve cada campo en <p>. Lo convertimos en bloque vertical con gap. */
.urbify-property__sidebar__form-wrap p,
.urbify-property__sidebar__form-wrap > .wpcf7-form > p {
	margin: 0 0 var(--space-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: var(--text-sm);
	color: var(--urb-navy-900);
	font-weight: var(--fw-medium);
	line-height: var(--leading-snug, 1.4);
}

.urbify-property__sidebar__form-wrap p:last-of-type,
.urbify-property__sidebar__form-wrap > .wpcf7-form > p:last-of-type {
	margin-bottom: 0;
}

/* Asterisco de campo requerido en mint, no rojo: amistoso, no agresivo. */
.urbify-property__sidebar__form-wrap p::first-letter {
	/* no-op, placeholder por si en el futuro queremos primera letra capital */
}

.urbify-property__sidebar__form-wrap label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	color: var(--urb-navy-900);
	line-height: var(--leading-snug, 1.35);
	letter-spacing: 0.005em;
}

/* ─── Inputs / select / textarea ──────────────────────────────────────── */
.urbify-property__sidebar__form-wrap input[type="text"],
.urbify-property__sidebar__form-wrap input[type="email"],
.urbify-property__sidebar__form-wrap input[type="tel"],
.urbify-property__sidebar__form-wrap input[type="url"],
.urbify-property__sidebar__form-wrap input[type="number"],
.urbify-property__sidebar__form-wrap select,
.urbify-property__sidebar__form-wrap textarea {
	width: 100%;
	padding: 12px 14px;
	background: var(--urb-cream);
	color: var(--urb-navy-900);
	border: 1.5px solid transparent;
	border-bottom: 1.5px solid var(--urb-gray-200);
	border-radius: var(--radius-md) var(--radius-md) 6px 6px;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-snug, 1.35);
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.urbify-property__sidebar__form-wrap input::placeholder,
.urbify-property__sidebar__form-wrap textarea::placeholder {
	color: var(--urb-gray-400);
	opacity: 1;
	font-weight: var(--fw-regular);
}

.urbify-property__sidebar__form-wrap input:hover:not(:focus):not(.wpcf7-not-valid),
.urbify-property__sidebar__form-wrap select:hover:not(:focus):not(.wpcf7-not-valid),
.urbify-property__sidebar__form-wrap textarea:hover:not(:focus):not(.wpcf7-not-valid) {
	background: var(--urb-white);
	border-bottom-color: var(--urb-gray-400);
}

.urbify-property__sidebar__form-wrap input:focus,
.urbify-property__sidebar__form-wrap select:focus,
.urbify-property__sidebar__form-wrap textarea:focus {
	background: var(--urb-white);
	border-color: var(--urb-mint-500);
	border-bottom-color: var(--urb-mint-500);
	outline: none;
	box-shadow: 0 0 0 4px rgba( 46, 204, 113, 0.12 ),
	            0 2px 8px rgba( 10, 31, 68, 0.04 );
}

/* Select: chevron SVG inline (sustituye al feo nativo). */
.urbify-property__sidebar__form-wrap select {
	background-image:
		url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%232ECC71' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1.5 6 6.5 11 1.5'/></svg>" );
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-color: var(--urb-cream);
	padding-right: 38px;
	cursor: pointer;
}

.urbify-property__sidebar__form-wrap select:focus,
.urbify-property__sidebar__form-wrap select:hover {
	background-color: var(--urb-white);
}

.urbify-property__sidebar__form-wrap textarea {
	min-height: 110px;
	resize: vertical;
	line-height: var(--leading-relaxed, 1.6);
}

/* ─── Mensajes de validación con icono inline ──────────────────────────── */
.urbify-property__sidebar__form-wrap .wpcf7-not-valid-tip {
	margin-top: 6px;
	padding-left: 22px;
	font-size: 12px;
	font-weight: var(--fw-medium);
	color: var(--urbify-prop-discount);
	line-height: 1.4;
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d63638' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>" );
	background-repeat: no-repeat;
	background-position: 0 1px;
	background-size: 14px 14px;
}

.urbify-property__sidebar__form-wrap .wpcf7-not-valid {
	border-color: var(--urbify-prop-discount);
	border-bottom-color: var(--urbify-prop-discount);
	background: rgba( 214, 54, 56, 0.04 );
}

.urbify-property__sidebar__form-wrap .wpcf7-not-valid:focus {
	box-shadow: 0 0 0 4px rgba( 214, 54, 56, 0.12 );
}

/* ─── Notice global del CF7 (success / error) ──────────────────────────── */
.urbify-property__sidebar__form-wrap .wpcf7-response-output {
	margin: var(--space-4) 0 0;
	padding: var(--space-3) var(--space-4) var(--space-3) 42px;
	border-radius: var(--radius-md);
	border: 1.5px solid var(--urb-gray-200);
	background: var(--urb-cream);
	font-size: var(--text-sm);
	color: var(--urb-navy-900);
	line-height: var(--leading-snug, 1.4);
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>" );
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 18px 18px;
}

.urbify-property__sidebar__form-wrap .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--urb-mint-500);
	background-color: rgba( 46, 204, 113, 0.08 );
	color: #1f9d54;
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231f9d54' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>" );
}

.urbify-property__sidebar__form-wrap .wpcf7 form.failed .wpcf7-response-output,
.urbify-property__sidebar__form-wrap .wpcf7 form.invalid .wpcf7-response-output,
.urbify-property__sidebar__form-wrap .wpcf7 form.aborted .wpcf7-response-output,
.urbify-property__sidebar__form-wrap .wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--urbify-prop-discount);
	background-color: rgba( 214, 54, 56, 0.08 );
	color: var(--urbify-prop-discount);
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23d63638' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>" );
}

/* ─── Acceptance / checkbox personalizado ──────────────────────────────── */
.urbify-property__sidebar__form-wrap .wpcf7-acceptance,
.urbify-property__sidebar__form-wrap .wpcf7-checkbox {
	font-size: 12px;
}

.urbify-property__sidebar__form-wrap .wpcf7-list-item {
	margin: 0;
	padding: 0;
}

.urbify-property__sidebar__form-wrap .wpcf7-list-item label {
	display: flex !important; /* override del label vertical default */
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-2);
	cursor: pointer;
	font-size: 12.5px;
	font-weight: var(--fw-regular);
	line-height: 1.5;
	color: var(--urb-gray-600);
	user-select: none;
}

/* Custom checkbox: ocultamos el nativo, dibujamos uno con :checked. */
.urbify-property__sidebar__form-wrap input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	-webkit-appearance: none;
	appearance: none;
	background: var(--urb-white);
	border: 1.5px solid var(--urb-gray-300, #cbd5e1);
	border-radius: 5px;
	cursor: pointer;
	position: relative;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.urbify-property__sidebar__form-wrap input[type="checkbox"]:hover {
	border-color: var(--urb-mint-500);
}

.urbify-property__sidebar__form-wrap input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba( 46, 204, 113, 0.2 );
}

.urbify-property__sidebar__form-wrap input[type="checkbox"]:checked {
	background: var(--urb-mint-500);
	border-color: var(--urb-mint-500);
}

/* Marca SVG cuando está checked. */
.urbify-property__sidebar__form-wrap input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 11px;
	transform: translate( -50%, -55% );
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>" );
	background-repeat: no-repeat;
	background-size: contain;
}

/* Si el checkbox de aceptación es "invalid" (no marcado al enviar), borde
   rojo discreto + el label se tiñe ligeramente. */
.urbify-property__sidebar__form-wrap .wpcf7-not-valid input[type="checkbox"] {
	border-color: var(--urbify-prop-discount);
	box-shadow: 0 0 0 3px rgba( 214, 54, 56, 0.15 );
}

/* Links dentro del form (RGPD, política, etc.). */
.urbify-property__sidebar__form-wrap a {
	color: var(--urb-mint-500);
	font-weight: var(--fw-medium);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.urbify-property__sidebar__form-wrap a:hover,
.urbify-property__sidebar__form-wrap a:focus-visible {
	color: var(--urb-navy-900);
	outline: none;
}

/* ─── Submit ──────────────────────────────────────────────────────────── */
/* Specificity reforzada (0,3,1) vía prefijo .urbify-property para vencer
   reglas externas de Divi / CF7 plugin que pudieran resetear background. */
.urbify-property .urbify-property__sidebar__form-wrap .wpcf7-submit,
.urbify-property .urbify-property__sidebar__form-wrap input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	margin-top: var(--space-2);
	padding: 15px 18px;
	/* Doble declaración: background-color como fallback sólido + background-image
	   con el gradient encima. Si una regla externa anula el `background`
	   shorthand, las propiedades individuales sobreviven. */
	background-color: var(--urb-navy-900);
	background-image: linear-gradient( 135deg, var(--urb-navy-900) 0%, var(--urb-navy-700, #15315E) 100% );
	color: var(--urb-white);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.01em;
	border: 0;
	border-radius: var(--radius-md);
	cursor: pointer;
	box-shadow: 0 6px 18px rgba( 10, 31, 68, 0.22 ),
	            inset 0 1px 0 rgba( 255, 255, 255, 0.08 );
	transition: transform 0.2s ease, box-shadow 0.2s ease,
	            background-color 0.3s ease, background-image 0.3s ease,
	            color 0.2s ease;
}

/* Hover: muta el botón a verde mint con elevación.
   IMPORTANTE: el shimmer ::after se eliminó porque <input type="submit"> NO
   soporta pseudo-elementos en la mayoría de los browsers (solo <button> lo
   hace). En las versiones de Chrome donde sí lo soportaba parcialmente,
   estaba creando un overlay translúcido encima del botón que dejaba el
   texto invisible.

   Reforzamos la specificity prefijando con .urbify-property (especificidad
   0,3,1) para vencer reglas más débiles de Divi parent o de CF7 plugin que
   pudieran resetear el background a transparent al hover. Además declaramos
   `background-color` Y `background-image` por separado: si alguna regla
   externa anula el `background` shorthand, los dos se siguen aplicando. */
.urbify-property .urbify-property__sidebar__form-wrap .wpcf7-submit:hover,
.urbify-property .urbify-property__sidebar__form-wrap input[type="submit"]:hover,
.urbify-property .urbify-property__sidebar__form-wrap .wpcf7-submit:focus-visible,
.urbify-property .urbify-property__sidebar__form-wrap input[type="submit"]:focus-visible {
	background-color: var(--urb-mint-500);
	background-image: linear-gradient( 135deg, var(--urb-mint-500) 0%, #1f9d54 100% );
	color: var(--urb-white);
	transform: translateY( -2px );
	box-shadow: 0 10px 24px rgba( 46, 204, 113, 0.4 ),
	            inset 0 1px 0 rgba( 255, 255, 255, 0.15 );
	outline: none;
}

.urbify-property .urbify-property__sidebar__form-wrap .wpcf7-submit:active,
.urbify-property .urbify-property__sidebar__form-wrap input[type="submit"]:active {
	transform: translateY( 0 );
	box-shadow: 0 4px 12px rgba( 46, 204, 113, 0.35 );
}

.urbify-property .urbify-property__sidebar__form-wrap .wpcf7-submit:disabled,
.urbify-property .urbify-property__sidebar__form-wrap input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ─── Spinner CF7 (loading durante el envío) ──────────────────────────── */
.urbify-property__sidebar__form-wrap .wpcf7-spinner {
	margin: 0 0 0 var(--space-2);
	background-color: var(--urb-mint-500);
	width: 22px;
	height: 22px;
	display: inline-block;
	vertical-align: middle;
}

/* ─── Estado "submitting": atenuar form mientras envía. ─────────────────── */
.urbify-property__sidebar__form-wrap .wpcf7 form.submitting {
	opacity: 0.75;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* ============================================================================
   📱 BREAKPOINTS DEL FORM
   ============================================================================ */

/* Mobile <600 px: padding más compacto, inputs ligeramente más pequeños. */
@media (max-width: 599px) {

	.urbify-property__sidebar__form {
		margin-top: var(--space-5);
		padding: var(--space-4);
		border-radius: var(--radius-lg);
	}

	.urbify-property__sidebar__form-title {
		font-size: var(--text-base);
	}

	.urbify-property__sidebar__form-wrap input[type="text"],
	.urbify-property__sidebar__form-wrap input[type="email"],
	.urbify-property__sidebar__form-wrap input[type="tel"],
	.urbify-property__sidebar__form-wrap input[type="url"],
	.urbify-property__sidebar__form-wrap input[type="number"],
	.urbify-property__sidebar__form-wrap select,
	.urbify-property__sidebar__form-wrap textarea {
		/* font-size 16px en mobile evita el zoom-on-focus de iOS Safari. */
		font-size: 16px;
		padding: 11px 13px;
	}

	.urbify-property__sidebar__form-wa {
		padding: 12px 16px;
		font-size: var(--text-sm);
	}

	.urbify-property__sidebar__form-wrap .wpcf7-submit,
	.urbify-property__sidebar__form-wrap input[type="submit"] {
		padding: 13px 16px;
		font-size: var(--text-sm);
	}
}

/* Tablet 600-1023 px: tamaños intermedios. (default ya cubre.) */

/* Desktop ≥1024 px: el form vive dentro del sidebar 380px — los inputs
   se ven con tamaño cómodo, sin necesidad de overrides. */

/* ── ❽ Sello RGPD al pie del card ─────────────────────────────────────── */
.urbify-property__sidebar__rgpd {
	margin: var(--space-5) 0 0;
	padding-top: var(--space-4);
	border-top: var(--urbify-prop-border);
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
	font-size: 11px;
	color: var(--urb-gray-600);
	line-height: var(--leading-snug, 1.4);
}

.urbify-property__sidebar__rgpd svg {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--urb-mint-500);
}

/* ============================================================================
   §17. PROPIEDADES SIMILARES
   ============================================================================
   Mobile: carrusel scroll-snap. Desktop ≥1024px: grid 4 cols.
   Las cards heredan estilos del .urb-card (no se reescriben aquí).
   ============================================================================ */

.urbify-property__similar {
	margin-block: var(--urbify-prop-section-gap) var(--space-2);
	padding-top: var(--space-8);
	border-top: var(--urbify-prop-border);
}

.urbify-property__similar__header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

.urbify-property__similar__heading {
	flex: 1;
	min-width: 240px;
}

.urbify-property__similar__eyebrow {
	margin: 0 0 var(--space-1);
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--urb-mint-500);
}

.urbify-property__similar__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp( 1.25rem, 2.5vw, 1.75rem );
	font-weight: var(--fw-semibold);
	color: var(--urb-navy-900);
	line-height: var(--leading-snug, 1.3);
	letter-spacing: -0.01em;
}

.urbify-property__similar__see-all {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	color: var(--urb-navy-900);
	text-decoration: none;
	transition: color 0.2s ease, gap 0.2s ease;
}

.urbify-property__similar__see-all:hover,
.urbify-property__similar__see-all:focus-visible {
	color: var(--urb-mint-500);
	gap: var(--space-3);
	outline: none;
}

/* Track: mobile carrusel scroll-snap, desktop grid de 4 cols. */
.urbify-property__similar__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-4);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin-inline: calc( var(--gutter) * -1 );
	padding: var(--space-2) var(--gutter) var(--space-4);
}

.urbify-property__similar__track::-webkit-scrollbar {
	display: none;
}

.urbify-property__similar__slide {
	flex: 0 0 86%;
	scroll-snap-align: start;
	min-width: 0;
}

@media (min-width: 600px) {
	.urbify-property__similar__slide {
		flex-basis: 60%;
	}
}

@media (min-width: 1024px) {
	.urbify-property__similar__track {
		display: grid;
		grid-template-columns: repeat( 4, 1fr );
		gap: var(--space-6);
		overflow: visible;
		margin-inline: 0;
		padding: 0;
	}

	.urbify-property__similar__slide {
		flex: initial;
	}
}

/* ============================================================================
   §18. WHATSAPP FAB MÓVIL
   ============================================================================
   Botón flotante visible solo <768px. Se ancla bottom-right por encima del
   chat banner si lo hay. Animación pulse muy sutil para llamar atención.
   ============================================================================ */

.urbify-property__whatsapp-fab {
	position: fixed;
	right: 16px;
	bottom: 20px;
	z-index: 999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: #25d366;        /* color de marca WhatsApp */
	color: var(--urb-white);
	border-radius: var(--radius-full);
	box-shadow: 0 6px 20px rgba( 37, 211, 102, 0.45 );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.urbify-property__whatsapp-fab:hover,
.urbify-property__whatsapp-fab:focus-visible {
	transform: scale( 1.06 );
	box-shadow: 0 8px 26px rgba( 37, 211, 102, 0.6 );
	outline: none;
}

.urbify-property__whatsapp-fab svg {
	width: 28px;
	height: 28px;
}

/* Visible solo en mobile. En desktop el WhatsApp está en el sidebar sticky. */
@media (min-width: 768px) {
	.urbify-property__whatsapp-fab {
		display: none;
	}
}

/* ============================================================================
   §19. PRESERVACIÓN DEL MÓDULO COMPARTIR (.urb-share__*)
   ============================================================================
   El partial template-parts/property-share.php se mantiene 1:1 según el brief.
   Sus clases legacy .urb-share__* viven históricamente en property-single.css
   (ya archivado en _legacy/fase0/). Aquí redeclaramos los estilos mínimos
   necesarios para que el módulo siga funcionando dentro del nuevo single,
   con coherencia tipográfica al resto del rediseño pero sin alterar look ni
   funcionalidad.
   ============================================================================ */

.urb-share {
	margin: 0;
	padding: 0;
	scroll-margin-top: calc( var(--urb-header-height, 96px) + var(--space-4) );
	border-radius: var(--radius-md);
}

/* Clase añadida por urbify-single-property.js (initShareButton) cuando el
   browser no soporta Web Share API y hace fallback de scroll al partial.
   Pulse sutil 1.5s para llamar la atención al llegar. */
.urb-share.is-highlighted {
	animation: urbify-share-pulse 1.2s ease-out 1;
}

@keyframes urbify-share-pulse {
	0%   { box-shadow: 0 0 0 0 rgba( 46, 204, 113, 0.45 ); }
	60%  { box-shadow: 0 0 0 14px rgba( 46, 204, 113, 0.05 ); }
	100% { box-shadow: 0 0 0 0 rgba( 46, 204, 113, 0 ); }
}

.urb-share__title {
	margin: 0 0 var(--space-3);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: var(--fw-semibold);
	color: var(--urb-navy-900);
	letter-spacing: -0.005em;
}

.urb-share__title svg {
	color: var(--urb-mint-500);
	flex-shrink: 0;
}

.urb-share__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.urb-share__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 8px 14px;
	background: var(--urb-white);
	color: var(--urb-navy-900);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	border: 1.5px solid var(--urb-gray-200);
	border-radius: var(--radius-full);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.urb-share__btn:hover,
.urb-share__btn:focus-visible {
	background: var(--urb-navy-900);
	color: var(--urb-white);
	border-color: var(--urb-navy-900);
	transform: translateY( -1px );
	outline: none;
}

.urb-share__btn svg {
	flex-shrink: 0;
	transition: stroke 0.2s ease, fill 0.2s ease;
}

/* Botón "Copiar enlace" ya tiene .is-copied que añade el JS — dejamos
   el feedback visual coherente con las otras animaciones. */
.urb-share__btn--copy.is-copied {
	background: var(--urb-mint-500);
	color: var(--urb-white);
	border-color: var(--urb-mint-500);
}

/* ============================================================================
   §20. REDUCED MOTION + PRINT
   ============================================================================
   Accesibilidad WCAG: respeto a prefers-reduced-motion + estilos para
   imprimir la ficha de propiedad (por si el cliente quiere llevarse PDF).
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
	.urbify-property *,
	.urbify-property *::before,
	.urbify-property *::after {
		animation-duration: 0.01ms !important; /* WCAG: anula animaciones largas — único !important justificado */
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {

	/* Ocultar cosas que no aportan en papel. */
	.urbify-property__breadcrumb,
	.urbify-property__quick-actions,
	.urbify-property__gallery__view-all,
	.urbify-property__sidebar,
	.urbify-property__mortgage,
	.urbify-property__video,
	.urbify-property__similar,
	.urbify-property__whatsapp-fab,
	.urb-share {
		display: none;
	}

	/* La página principal pasa a una columna, fondo blanco, tipografía oscura. */
	.urbify-property {
		padding: 0;
		background: #fff;
		color: #000;
	}

	.urbify-property__layout {
		display: block;
	}

	.urbify-property__main {
		max-width: 100%;
	}

	/* Galería: solo el hero a tamaño completo. */
	.urbify-property__gallery__grid {
		display: block;
		max-height: none;
		min-height: 0;
		overflow: visible;
		page-break-inside: avoid;
	}

	.urbify-property__gallery__tile--small,
	.urbify-property__gallery__tile--overflow {
		display: none;
	}

	.urbify-property__gallery__tile--hero {
		max-height: 50vh;
		overflow: hidden;
	}

	.urbify-property__title {
		font-size: 24pt;
		page-break-after: avoid;
	}

	.urbify-property__section-title {
		font-size: 16pt;
		page-break-after: avoid;
	}

	.urbify-property__section {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	/* Mostrar URL completa de los enlaces externos. */
	.urbify-property__prose a[href^="http"]::after {
		content: ' (' attr(href) ')';
		font-size: 0.85em;
		color: #555;
	}
}

/* === fin de PARTE 3/3 — FASE 3 COMPLETA ==================================== */