/*
 * Estilos del sitio RE/MAX PRO.
 *
 * Portado de html-original/remax-sitio/index.css. Cambios respecto al original:
 * - Fuentes locales; desplazamiento suave nativo que respeta prefers-reduced-motion.
 * - Sin los estilos de la ficha de propiedad (los aporta el plugin del ERP; están en el
 *   original, líneas 2690-4189).
 * - Animaciones al desplazarse que no ocultan nada si el JS falla.
 * - Correcciones: fragmento suelto tras .btn-vender:hover, font-weight inválido, --font-sans.
 * - Ajustes del tema al final del archivo (menú móvil, idioma, formularios, etc.).
 */

/* ==========================================================================
   Fuentes: Montserrat variable (300-800), servida desde el tema. Licencia en fonts/OFL.txt.
   El original también cargaba Outfit, pero ninguna regla la usaba.
   ========================================================================== */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/montserrat-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/montserrat-latin-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/montserrat-latin-ext-italic.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Desplazamiento nativo: suave solo para los enlaces a anclas y solo si el usuario
   no pidió reducir el movimiento.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ==========================================================================
	 DESIGN SYSTEM & VARIABLES
	 ========================================================================== */
:root {
	--primary-blue: #0043FF;
	--primary-red: #FF1200;
	--secondary-blue: #0033CC;
	--text-dark: #1A1D24;
	--text-muted: #5A6578;
	--bg-light: #F8FAFC;
	--bg-white: #FFFFFF;
	--border-color: #E2E8F0;

	--font-heading: 'Montserrat', sans-serif;
	--font-body: 'Montserrat', sans-serif;
	--font-sans: 'Montserrat', sans-serif;

	--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
	--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
	--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--shadow-glass: 0 8px 32px 0 rgba(0, 5, 20, 0.12);

	--border-radius: 12px;
	--border-radius-lg: 20px;
}

/* ==========================================================================
	 RESET & GLOBAL ESTILOS
	 ========================================================================== */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	/* Deja sitio al encabezado fijo al saltar a un ancla. */
	scroll-padding-top: 110px;
}

body {
	font-family: var(--font-body);
	color: var(--text-dark);
	background-color: var(--bg-light);
	line-height: 1.45;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	text-decoration: none;
	color: inherit;
	transition: var(--transition-smooth);
}

ul {
	list-style: none;
}

/* Common Container */
.section-container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 80px 24px;
}

.text-center {
	text-align: center;
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--text-dark);
	font-weight: 400;
	line-height: 1.15;
}

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
.section-title strong, .cta-title strong, .hero-title .highlight-bold {
	font-weight: 600;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	font-family: var(--font-heading);
	font-size: 0.9rem;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	transition: var(--transition-smooth);
	border: 2px solid transparent;
}

.btn-primary {
	background-color: var(--primary-blue);
	color: var(--bg-white);
}

.btn-primary:hover {
	background-color: var(--secondary-blue);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 61, 165, 0.25);
}

.btn-red {
	background-color: var(--primary-red);
	color: var(--bg-white);
}

.btn-red:hover {
	background-color: #be1c16;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(224, 44, 38, 0.25);
}

.btn-outline-white {
	background-color: transparent;
	border-color: var(--bg-white);
	color: var(--bg-white);
}

.btn-outline-white:hover {
	background-color: var(--bg-white);
	color: var(--primary-blue);
	transform: translateY(-2px);
}

.btn-outline-red {
	background-color: transparent;
	border-color: var(--primary-red);
	color: var(--primary-red);
}

.btn-outline-red:hover {
	background-color: var(--primary-red);
	color: var(--bg-white);
	transform: translateY(-2px);
}

.btn-outline {
	background-color: transparent;
	border-color: var(--border-color);
	color: var(--text-dark);
}

.btn-outline:hover {
	border-color: var(--primary-blue);
	color: var(--primary-blue);
	background-color: rgba(0, 61, 165, 0.02);
}

.btn-block {
	display: flex;
	width: 100%;
}

/* ==========================================================================
	 HEADER / NAVBAR
	 ========================================================================== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	padding: 16px 24px 0 24px;
	background-color: transparent;
	transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px 28px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 100px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.6);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.scrolled {
	padding: 10px 24px 0 24px;
}

.site-header.scrolled .header-container {
	background-color: var(--bg-white);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.remax-logo {
	height: 38px;
	width: auto;
	display: block;
	object-fit: contain;
}

/* Navigation */
.nav-menu {
	flex: 1;
	display: flex;
	justify-content: center;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
}

.nav-link {
	font-family: var(--font-heading);
	font-size: 0.85rem;
	font-weight: 600;
	color: #4A5568;
	position: relative;
	padding: 6px 0;
	white-space: nowrap;
}

.nav-link:hover, .nav-link.active {
	color: var(--primary-blue);
}

.nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2.5px;
	border-radius: 2px;
	background-color: var(--primary-blue);
	transition: var(--transition-smooth);
}

.nav-link:hover::after, .nav-link.active::after {
	width: 100%;
}

/* Header Right */
.header-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.btn-vender {
	background-color: var(--primary-red);
	color: var(--bg-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.85rem;
	padding: 9px 22px;
	border-radius: 8px;
	border: none;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(224, 44, 38, 0.25);
}

.btn-vender:hover {
	background-color: #c0221c;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(224, 44, 38, 0.35);
}

.lang-selector {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-muted);
	cursor: pointer;
}

.globe-icon {
	width: 16px;
	height: 16px;
}

.lang-selector:hover {
	color: var(--primary-blue);
}

/* Mobile Toggle */
.mobile-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
}

.mobile-toggle .bar {
	width: 22px;
	height: 2px;
	background-color: var(--text-dark);
	transition: var(--transition-smooth);
}

/* ==========================================================================
	 HERO SECTION
	 ========================================================================== */
.hero-section {
	position: relative;
	min-height: 100vh;
	padding-top: 140px;
	padding-bottom: 80px;
	display: flex;
	align-items: center;
	color: var(--bg-white);
	overflow: hidden;
}

/* Slideshow background layers style */
.hero-bg-layers {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero-bg-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
}

.hero-bg-layer.active {
	opacity: 1;
}

.hero-container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 60px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.hero-content {
	max-width: 620px;
}

@keyframes heroFadeUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes heroWidgetFadeIn {
	from {
		opacity: 0;
		transform: scale(0.96) translateY(20px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.hero-tagline {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--primary-red);
	text-transform: uppercase;
	letter-spacing: 2.5px;
	margin-bottom: 12px;
	animation: heroFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title {
	font-size: 3.2rem;
	font-weight: 300;
	line-height: 1.15;
	color: var(--bg-white);
	margin-bottom: 20px;
	animation: heroFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title .highlight-italic {
	font-style: italic;
	font-weight: 600;
	color: var(--bg-white);
}

#rotating-word {
	display: inline-block;
	position: relative;
}

#rotating-word::after {
	content: '|';
	margin-left: 4px;
	color: var(--bg-white);
	font-weight: 300;
	animation: cursorBlink 0.75s step-end infinite;
}

@keyframes cursorBlink {
	from, to { opacity: 0 }
	50% { opacity: 1 }
}

.hero-title .highlight-bold {
	font-weight: 600;
}

.hero-subtitle {
	font-size: 1.15rem;
	line-height: 1.45;
	margin-bottom: 32px;
	opacity: 0.95;
	font-weight: 300;
	animation: heroFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.hero-buttons {
	display: flex;
	gap: 16px;
	animation: heroFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* Hero Widget Container */
.hero-widget-container {
	display: flex;
	justify-content: flex-end;
	animation: heroWidgetFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

/* Widget Búsqueda */
.search-widget {
	background-color: var(--bg-white);
	border-radius: var(--border-radius-lg);
	padding: 32px;
	width: 100%;
	max-width: 400px;
	box-shadow: var(--shadow-lg);
	color: var(--text-dark);
}

.widget-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: var(--bg-light);
	border-radius: 8px;
	padding: 4px;
	margin-bottom: 24px;
}

.tab-btn {
	background: none;
	border: none;
	padding: 10px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--text-muted);
	border-radius: 6px;
	cursor: pointer;
	transition: var(--transition-smooth);
}

.tab-btn.active {
	background-color: var(--primary-blue);
	color: var(--bg-white);
	box-shadow: var(--shadow-sm);
}

.widget-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.form-group label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.form-group input, .form-group select, .form-group textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--text-dark);
	background-color: var(--bg-light);
	outline: none;
	transition: var(--transition-smooth);
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
	border-color: var(--primary-blue);
	background-color: var(--bg-white);
	box-shadow: 0 0 0 3px rgba(0, 61, 165, 0.1);
}

.btn-search {
	background-color: var(--primary-blue);
	color: var(--bg-white);
	border: none;
	border-radius: 6px;
	padding: 14px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: var(--transition-smooth);
	box-shadow: 0 6px 12px rgba(0, 61, 165, 0.2);
}

.btn-search:hover {
	background-color: var(--secondary-blue);
	transform: translateY(-1px);
	box-shadow: 0 8px 16px rgba(0, 61, 165, 0.3);
}

/* Rent Active brand overrides for widget */
.search-widget.rent-active .tab-btn.active {
	background-color: var(--primary-red) !important;
	color: var(--bg-white) !important;
}

.search-widget.rent-active .btn-search {
	background-color: var(--primary-red);
	box-shadow: 0 6px 12px rgba(224, 44, 38, 0.2);
}

.search-widget.rent-active .btn-search:hover {
	background-color: #c0201a;
	box-shadow: 0 8px 16px rgba(224, 44, 38, 0.3);
}

.search-widget.rent-active .form-group input:focus,
.search-widget.rent-active .form-group select:focus,
.search-widget.rent-active .form-group textarea:focus {
	border-color: var(--primary-red);
	box-shadow: 0 0 0 3px rgba(224, 44, 38, 0.1);
}

.search-icon {
	width: 18px;
	height: 18px;
}

.hero-caption {
	position: absolute;
	bottom: 24px;
	right: 48px;
	font-size: 0.75rem;
	font-style: italic;
	opacity: 0.95;
	transition: opacity 0.5s ease;
	z-index: 2;
}

/* ==========================================================================
	 PROPIEDADES DESTACADAS
	 ========================================================================== */
.section-tagline {
	display: inline-block;
	color: var(--primary-red);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 12px;
}

.section-title {
	font-size: 2.2rem;
	font-weight: 400;
	margin-bottom: 16px;
	color: #1A1D24;
}

.section-title strong {
	font-weight: 800;
}

.section-subtitle {
	font-size: 1rem;
	color: var(--text-muted);
	max-width: 600px;
	margin: 0 auto 28px auto;
	font-weight: 300;
}

.section-footer {
	margin-top: 48px;
}

/* Slider Layout for Properties */
.properties-slider-container {
	position: relative;
	width: 100%;
	margin-top: 40px;
	display: flex;
	align-items: center;
	padding: 0 48px; /* Added padding to prevent arrows from clipping! */
}

.properties-slider-wrapper {
	overflow: hidden;
	width: 100%;
	padding: 15px 5px;
}

.properties-grid {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 24px;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	margin-bottom: 0;
	width: 100%;
}

.property-card {
	width: calc((100% - 72px) / 4); /* exactly 4 cards on desktop! */
	flex-shrink: 0;
	background-color: var(--bg-white);
	border-radius: 12px; /* Uniform rounded corners */
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	transition: var(--transition-smooth);
	border: 1px solid var(--border-color);
	cursor: pointer;
}

/* Slider Navigation Arrows */
.slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--bg-white);
	border: 1px solid var(--border-color);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-dark);
	z-index: 10;
	transition: all 0.3s ease;
}

.slider-arrow:hover {
	background-color: var(--primary-red);
	color: var(--bg-white);
	border-color: var(--primary-red);
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 6px 16px rgba(224, 44, 38, 0.25);
}

.slider-arrow.prev {
	left: 0;
}

.slider-arrow.next {
	right: 0;
}

.slider-arrow svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
}

.property-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-lg);
}

.card-img-wrapper {
	position: relative;
	height: 180px;
	overflow: hidden;
}

.property-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition-smooth);
}

.property-card:hover .property-img {
	transform: scale(1.08);
}

/* Card hover overlay dynamic gradient */
.card-hover-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(0, 61, 165, 0.95) 0%, rgba(0, 61, 165, 0.4) 60%, rgba(0, 61, 165, 0) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
	z-index: 3;
}

/* Red brand gradient for properties for rent on hover */
.property-card[data-purpose="alquiler"] .card-hover-overlay {
	background: linear-gradient(to top, rgba(224, 44, 38, 0.95) 0%, rgba(224, 44, 38, 0.4) 60%, rgba(224, 44, 38, 0) 100%);
}

.property-card:hover .card-hover-overlay {
	opacity: 1;
	transform: translateY(0);
}

.hover-text {
	color: var(--bg-white);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	gap: 8px;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hover-text svg {
	transition: transform 0.3s ease;
}

.property-card:hover .hover-text svg {
	transform: translateX(4px);
}

.property-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 12px;
	font-family: var(--font-heading);
	font-size: 0.7rem;
	font-weight: 700;
	border-radius: 4px;
	color: var(--bg-white);
	z-index: 2;
}

.badge-sale {
	background-color: var(--primary-blue);
}

.badge-rent {
	background-color: var(--primary-red);
}

.card-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.property-price {
	font-size: 1.4rem;
	color: var(--primary-blue);
	margin-bottom: 8px;
}

.property-desc {
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: 12px;
	color: var(--text-dark);
	line-height: 1.4;
	height: 40px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.property-location {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.75rem;
	color: var(--text-muted);
	margin-bottom: 16px;
}

.icon-loc {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.property-specs {
	display: flex;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border-color);
	margin-top: auto;
	font-size: 0.75rem;
	color: var(--text-muted);
	font-weight: 500;
	margin-bottom: 16px;
}

.property-specs span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.property-specs svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.btn-property {
	font-size: 0.8rem;
	padding: 8px;
	border-radius: 4px;
}

/* ==========================================================================
	 SOBRE NOSOTROS / COLLAGE
	 ========================================================================== */
.about-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 60px;
	align-items: center;
}

.about-collage {
	position: relative;
	height: 480px;
}

.collage-container {
	position: relative;
	height: 100%;
}

.img-frame {
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	position: absolute;
	background-color: var(--bg-white);
}

.collage-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Clean rounded frame on Main Image */
.frame-main {
	position: absolute;
	width: 54%;
	height: 85%;
	top: 8%;
	left: 0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
	z-index: 1;
}

.frame-main .collage-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.frame-sub {
	position: absolute;
	width: 50%;
	height: 55%;
	top: 0;
	right: 0;
	z-index: 2;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
	background-color: var(--bg-white);
	border: none;
}

/* Floating badges on collage */
.badge-floating {
	position: absolute;
	z-index: 3;
	box-shadow: var(--shadow-lg);
}

.badge-count {
	width: 130px;
	height: 130px;
	background-color: #0043FF; /* Brand Blue */
	color: var(--bg-white);
	border-radius: 50%;
	border: 8px solid var(--bg-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	z-index: 10;
}

.count-num {
	font-size: 2.2rem;
	font-weight: 800;
	font-family: var(--font-heading);
	line-height: 1;
	margin-bottom: 2px;
}

.count-lbl {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.2;
}

.badge-brand {
	position: absolute;
	width: 52%;
	bottom: 10px;
	right: 0;
	background-color: var(--bg-white);
	border-radius: 16px;
	padding: 16px 20px;
	border: 1px solid #E2E8F0;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
	z-index: 11;
}

.brand-remax-mini {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.remax-mini-logo {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 28px;
	height: auto;
	object-fit: contain;
}

.brand-text-mini {
	display: flex;
	flex-direction: column;
	padding-right: 28px; /* reserve space for absolute logo */
}

.we-are {
	font-size: 1.1rem;
	color: #1E293B;
	font-weight: 400;
	line-height: 1.2;
}

.remax-pro {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	color: #0043FF;
	line-height: 1.2;
	margin-top: 2px;
	margin-bottom: 4px;
}

.desc-mini {
	font-size: 0.72rem;
	color: #64748B;
	font-weight: 400;
	line-height: 1.3;
}

/* Right Content */
.about-content {
	padding-left: 20px;
}

.about-content .section-title {
	margin-bottom: 16px;
}

.about-content .section-description {
	color: #475569;
	margin-bottom: 28px;
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1.5;
}

.about-features {
	display: flex;
	gap: 40px;
	margin-bottom: 32px;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 16px;
}

.feature-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background-color: transparent;
}

.feature-icon-img {
	width: 44px;
	height: 44px;
	object-fit: contain;
}

.feature-text h3 {
	font-size: 0.95rem;
	font-weight: 700;
	color: #1E293B;
	line-height: 1.3;
	margin: 0;
}

.about-checklist {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 36px;
	list-style: none;
	padding: 0;
}

.about-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.95rem;
	font-weight: 500;
	color: #334155;
}

.icon-check {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: #0043FF;
	stroke-width: 3;
	margin-top: 2px;
	flex-shrink: 0;
}

/* ==========================================================================
	 ESTADÍSTICAS (BARRA AZUL)
	 ========================================================================== */
.stats-bar {
	background-color: var(--primary-blue);
	color: var(--bg-white);
	padding: 0;
}

.stats-bar .section-container {
	padding: 32px 24px;
}

.stats-grid {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
}

.stat-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.stat-number {
	font-family: var(--font-heading);
	font-size: 2.4rem;
	font-weight: 800;
	letter-spacing: -1px;
}

.stat-label {
	font-size: 0.8rem;
	opacity: 0.85;
	font-weight: 500;
	text-transform: uppercase;
}

/* ==========================================================================
	 ¿POR QUÉ RE/MAX PRO?
	 ========================================================================== */
.why-section {
	background-color: var(--bg-white);
	position: relative;
	padding: 60px 0 80px 0;
}

@media (min-width: 1025px) {
	.why-grid {
		display: grid;
		grid-template-columns: 1fr 1.25fr;
		gap: 64px;
		align-items: start;
	}

	.why-text-col {
		position: sticky;
		top: 110px;
		align-self: start;
	}
}

.why-text-col .section-title {
	margin-bottom: 20px;
}

.why-text-col .section-description {
	color: var(--text-muted);
	margin-bottom: 24px;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.6;
}

.why-caption {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	font-size: 0.8rem;
	color: var(--text-muted);
	font-weight: 600;
}

.icon-star {
	width: 16px;
	height: 16px;
	fill: #D4AF37;
}

/* Card List Layout on Right Column */
.why-features-col {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.why-card {
	position: relative;
	display: flex;
	gap: 32px;
	padding: 36px;
	background-color: #F8FAFC;
	border: 1px solid #F1F5F9;
	border-radius: 24px;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.why-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
	border-color: #E2E8F0;
}

.why-card-content {
	flex: 1;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.why-card-tag {
	font-family: var(--font-heading);
	font-size: 0.78rem;
	font-weight: 700;
	color: #FF1200;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 8px;
}

.why-card-content h3 {
	font-size: 1.6rem;
	font-weight: 700;
	color: #0F172A;
	margin-bottom: 12px;
	font-family: var(--font-heading);
	line-height: 1.25;
}

.why-card-content p {
	font-size: 0.93rem;
	color: #475569;
	line-height: 1.6;
	margin-bottom: 24px;
	font-weight: 400;
}

.why-card-action {
	margin-top: auto;
}

.action-circle-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #FF1200;
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 4px 10px rgba(255, 18, 0, 0.2);
}

.action-circle-btn svg {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.why-card:hover .action-circle-btn {
	transform: scale(1.08);
	background-color: #0043FF;
	box-shadow: 0 6px 15px rgba(0, 67, 255, 0.25);
}

.why-card:hover .action-circle-btn svg {
	transform: rotate(45deg);
}

.why-card-img {
	width: 220px;
	height: 190px;
	flex-shrink: 0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.why-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.why-card:hover .why-card-img img {
	transform: scale(1.05);
}

.agents-section .section-container {
	padding: 180px 24px;
}

.agents-grid {
	display: grid;
	grid-template-columns: 0.75fr 1.25fr;
	gap: 60px;
	align-items: center;
}

.agents-text-col .section-title {
	margin-bottom: 20px;
}

.agents-text-col .section-description {
	color: var(--text-muted);
	margin-bottom: 24px;
	font-size: 1rem;
	font-weight: 300;
}

.agents-buttons {
	display: flex;
	gap: 16px;
}

.agents-carousel-col {
	position: relative;
	overflow: hidden;
}

.agents-carousel-wrapper {
	overflow: hidden;
	width: 100%;
}

.agents-carousel-track {
	display: flex;
	gap: 24px;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.agent-card {
	flex: 0 0 calc(33.333% - 16px);
	min-width: 180px;
	background-color: transparent;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	text-align: center;
	transition: var(--transition-smooth);
}

.agent-card:hover {
	transform: translateY(-8px);
}

.agent-img-frame {
	aspect-ratio: 3.5 / 4.5;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 16px;
	background-color: var(--bg-light);
	box-shadow: var(--shadow-sm);
	transition: var(--transition-smooth);
}

.agent-card:hover .agent-img-frame {
	box-shadow: var(--shadow-lg);
}

.agent-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition-smooth);
}

.agent-card:hover .agent-img {
	transform: scale(1.06);
}

.agent-name {
	font-family: var(--font-heading);
	font-size: 1.15rem;
	font-weight: 800;
	margin: 0;
	color: #1E293B;
	letter-spacing: 0.5px;
}

.agent-title {
	font-family: var(--font-body);
	font-size: 0.75rem;
	color: var(--text-muted);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

/* Dots */
.carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #CBD5E1;
	cursor: pointer;
	transition: var(--transition-smooth);
}

.dot.active {
	background-color: var(--text-muted);
	width: 20px;
	border-radius: 4px;
}

/* ==========================================================================
	 BANNER CTA
	 ========================================================================== */
.cta-banner {
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	color: var(--bg-white);
}

.cta-banner .section-container {
	padding: 100px 24px;
	max-width: 800px;
}

.cta-title {
	font-size: 2.6rem;
	font-weight: 300;
	color: var(--bg-white);
	margin-bottom: 16px;
	line-height: 1.15;
}

.cta-title strong {
	font-weight: 800;
}

.cta-subtitle {
	font-size: 1.05rem;
	opacity: 0.9;
	margin-bottom: 36px;
	font-weight: 300;
}

.cta-buttons {
	display: flex;
	justify-content: center;
	gap: 16px;
}

/* ==========================================================================
	 BLOG Y ARTÍCULOS
	 ========================================================================== */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.blog-card {
	background-color: var(--bg-white);
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: var(--transition-smooth);
	display: flex;
	flex-direction: column;
}

.blog-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
}

.blog-img-wrapper {
	height: 200px;
	overflow: hidden;
}

.blog-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition-smooth);
}

.blog-card:hover .blog-img {
	transform: scale(1.05);
}

.blog-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.blog-category {
	display: inline-block;
	color: var(--primary-red);
	font-family: var(--font-heading);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 10px;
}

.blog-title {
	font-size: 1.1rem;
	margin-bottom: 12px;
	color: var(--text-dark);
	line-height: 1.35;
	height: 48px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.blog-excerpt {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-bottom: 20px;
	font-weight: 300;
	line-height: 1.5;
}

.blog-link {
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--primary-blue);
	margin-top: auto;
}

.blog-link:hover {
	color: var(--secondary-blue);
	padding-left: 4px;
}

/* ==========================================================================
	 FOOTER
	 ========================================================================== */
.site-footer {
	background-color: #000000;
	color: #94A3B8;
	font-size: 0.85rem;
	padding: 56px 0 32px 0;
	border-top: none;
}

.site-footer .section-container,
.site-footer .footer-container {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 24px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
	gap: 36px;
	margin-bottom: 36px;
	align-items: start;
}

.footer-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.footer-logo-img,
.footer-logo {
	height: 56px;
	width: auto;
	display: block;
	margin-bottom: 22px;
	filter: none !important;
	object-fit: contain;
}

.footer-col-title, .footer-heading {
	color: #FFFFFF;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	margin: 0 0 18px 0;
	line-height: 1.2;
}

.contact-hours {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.82rem;
	line-height: 1.6;
	color: #CBD5E1;
	margin-bottom: 14px;
	font-weight: 400;
}

.contact-phone, .contact-email {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.84rem;
	color: #CBD5E1;
	margin-bottom: 8px;
	line-height: 1.6;
}

.contact-phone a, .contact-email a {
	color: #CBD5E1;
	text-decoration: none;
	transition: color 0.2s ease;
}

.contact-phone a:hover, .contact-email a:hover {
	color: #FFFFFF;
}

.contact-list, .footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-links a {
	font-family: 'Montserrat', sans-serif;
	color: #CBD5E1;
	text-decoration: none;
	font-size: 0.84rem;
	transition: color 0.2s ease;
	font-weight: 400;
}

.footer-links a:hover {
	color: #FFFFFF;
}

.icon-footer {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: #CBD5E1;
	stroke-width: 2;
	margin-right: 6px;
	vertical-align: middle;
	display: inline-block;
}

.footer-address {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.84rem;
	color: #CBD5E1;
	line-height: 1.6;
	font-weight: 400;
}

.footer-copyright-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-top: 30px;
	padding-top: 20px;
}

.copyright-text {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.78rem;
	color: #94A3B8;
	line-height: 1.65;
	margin: 0 0 28px 0;
	max-width: 900px;
}

.footer-legal-links-bar {
	width: 100%;
	max-width: 1060px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.footer-legal-links-bar a {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.82rem;
	font-weight: 400;
	color: #94A3B8;
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-legal-links-bar a:hover,
.footer-legal-links-bar a.active {
	color: #FFFFFF;
}

@media (max-width: 992px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
	.footer-legal-links-bar {
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px 24px;
	}
}

@media (max-width: 576px) {
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* ==========================================================================
	 MODAL DE CONTACTO
	 ========================================================================== */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.open {
	opacity: 1;
	visibility: visible;
}

.modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(11, 14, 20, 0.6);
	backdrop-filter: blur(4px);
}

.modal-content {
	position: relative;
	background-color: var(--bg-white);
	border-radius: var(--border-radius-lg);
	padding: 40px;
	width: 100%;
	max-width: 580px;
	box-shadow: var(--shadow-lg);
	z-index: 2;
	transform: scale(0.9);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.open .modal-content {
	transform: scale(1);
}

.modal-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: none;
	border: none;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	color: var(--text-muted);
	transition: var(--transition-smooth);
}

.modal-close:hover {
	color: var(--primary-red);
}

.modal-title {
	font-size: 1.6rem;
	margin-bottom: 8px;
}

.modal-subtitle {
	font-size: 0.95rem;
	color: var(--text-muted);
	margin-bottom: 24px;
	font-weight: 300;
}

.modal-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.modal-form label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-muted);
}

.form-success-message {
	display: none;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 30px 0;
}

.form-success-message.show {
	display: flex;
}

.success-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #DEF7EC;
	color: #03543F;
	font-size: 1.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.form-success-message h3 {
	font-size: 1.3rem;
	margin-bottom: 8px;
	color: #03543F;
}

.form-success-message p {
	color: var(--text-muted);
	font-size: 0.95rem;
}

/* ==========================================================================
	 RESPONSIVE DESIGN (MEDIA QUERIES)
	 ========================================================================== */

/* Max Width 1024px (Tablets / Laptops) */
@media (max-width: 1024px) {
	.hero-container {
		grid-template-columns: 1fr;
		gap: 40px;
		text-align: center;
	}

	.hero-content {
		max-width: 100%;
		margin: 0 auto;
	}

	.hero-buttons {
		justify-content: center;
	}

	.hero-widget-container {
		justify-content: center;
	}

	.search-widget {
		max-width: 500px;
	}

	.properties-slider-container {
		padding: 0 40px;
	}

	.property-card {
		width: calc((100% - 24px) / 2) !important;
	}

	.slider-arrow {
		width: 38px;
		height: 38px;
	}

	.slider-arrow.prev {
		left: 0;
	}

	.slider-arrow.next {
		right: 0;
	}

	.about-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.about-collage {
		max-width: 500px;
		margin: 0 auto;
	}

	.about-content {
		padding-left: 0;
		text-align: center;
	}

	.about-checklist {
		align-items: center;
	}

	.about-features {
		justify-content: center;
	}

	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 36px;
	}

	.why-grid {
		grid-template-columns: 1fr;
		gap: 40px;
		text-align: center;
	}

	.why-caption {
		justify-content: center;
	}

	.why-text-col {
		position: relative;
		top: 0;
	}

	.why-card {
		position: relative;
		top: 0;
		margin-bottom: 24px;
		text-align: left;
	}

	.agents-grid {
		grid-template-columns: 1fr;
		gap: 40px;
		text-align: center;
	}

	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-grid {
		grid-template-columns: 1.5fr 1fr 1fr;
	}

	.footer-logo {
		margin-left: 0;
	}
}

/* Menú en panel desplegable (hamburguesa) cuando el menú completo no cabe en una línea.
   En el original solo aparecía a 768 px y entre 769 y 1240 px el encabezado se desbordaba
   (el menú en español mide unos 1.250 px con el selector de idioma). */
@media (max-width: 1240px) {
	.mobile-toggle {
		display: flex;
	}

	.nav-menu {
		position: fixed;
		top: 76px;
		left: 16px;
		width: calc(100% - 32px);
		height: auto;
		max-height: calc(100dvh - 96px);
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--bg-white);
		border-radius: 20px;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
		border: 1px solid var(--border-color);
		transform: translateY(-20px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
		z-index: 999;
	}

	.nav-menu.open {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.nav-list {
		flex-direction: column;
		padding: 24px;
		align-items: center;
		gap: 16px;
	}
}

/* Max Width 768px (Mobiles) */
@media (max-width: 768px) {
	.site-header {
		padding: 12px 16px 0 16px;
	}

	.header-container {
		padding: 10px 20px;
	}

	.header-right .btn-vender {
		display: none;
	}

	.hero-title {
		font-size: 2.4rem;
	}

	.properties-slider-container {
		padding: 0 32px;
	}

	.property-card {
		width: 100% !important;
	}

	.slider-arrow {
		width: 32px;
		height: 32px;
	}

	.slider-arrow.prev {
		left: 0;
	}

	.slider-arrow.next {
		right: 0;
	}

	.blog-grid {
		grid-template-columns: 1fr;
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.footer-copyright-area {
		flex-direction: column;
		text-align: center;
	}

	.footer-legal-links {
		justify-content: center;
		flex-wrap: wrap;
	}

	.form-row {
		grid-template-columns: 1fr;
	}

	.agent-card {
		flex: 0 0 100%;
	}

	.why-card {
		flex-direction: column-reverse;
		gap: 20px;
		padding: 36px 0;
	}

	.why-card-img {
		width: 100% !important;
		height: 220px;
	}

	.why-card-content {
		align-items: center;
		text-align: center;
	}

	.why-card-content h3 {
		font-size: 1.4rem;
	}

	.why-card-content p {
		margin-bottom: 16px;
	}

	.about-collage {
		height: 360px;
		max-width: 360px;
	}

	.badge-count {
		width: 90px;
		height: 90px;
		border: 5px solid var(--bg-white);
	}

	.count-num {
		font-size: 1.4rem;
	}

	.count-lbl {
		font-size: 0.5rem;
	}

	.badge-brand {
		padding: 10px 14px;
	}

	.we-are {
		font-size: 0.8rem;
	}

	.remax-pro {
		font-size: 1.1rem;
		margin-bottom: 2px;
	}

	.desc-mini {
		font-size: 0.55rem;
	}

	.remax-mini-balloon {
		width: 16px;
		height: 20.8px;
	}
}

/* ==========================================================================
	 SCROLL REVEAL ANIMATIONS
	 El contenido solo se oculta si app.js se ejecutó (clase .reveal-listo en <html>, la pone
	 app.js justo antes de observar) y si el usuario no pidió reducir el movimiento. Si el JS
	 falla o no carga, todo queda visible.
	 ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.reveal-listo .reveal,
	.reveal-listo .reveal-left,
	.reveal-listo .reveal-right {
		transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.reveal-listo .reveal:not(.active) {
		opacity: 0;
		transform: translateY(30px);
	}

	.reveal-listo .reveal-left:not(.active) {
		opacity: 0;
		transform: translateX(-30px);
	}

	.reveal-listo .reveal-right:not(.active) {
		opacity: 0;
		transform: translateX(30px);
	}

	.reveal-listo .reveal .section-title {
		transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.reveal-listo .reveal:not(.active) .section-title {
		clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
		transform: translateY(30px);
		opacity: 0;
	}

	.reveal-listo .reveal .section-subtitle,
	.reveal-listo .reveal .section-description {
		transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
	}

	.reveal-listo .reveal:not(.active) .section-subtitle,
	.reveal-listo .reveal:not(.active) .section-description {
		opacity: 0;
		transform: translateY(15px);
	}
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.25s; }
.delay-3 { transition-delay: 0.4s; }
.delay-4 { transition-delay: 0.55s; }

/* ==========================================================================
	 PROPIEDADES PAGE STYLES (CATÁLOGO)
	 ========================================================================== */
.page-hero {
	position: relative;
	background-image: linear-gradient(rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.82)), url('../img/hero-bg-2.webp');
	background-size: cover;
	background-position: center;
	padding: 145px 0 60px 0;
	margin-top: 0;
	color: var(--bg-white);
}

.page-hero-container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 24px;
}

.page-breadcrumb {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 16px;
	font-family: var(--font-sans);
}

.page-breadcrumb a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	transition: color 0.2s ease;
}

.page-breadcrumb a:hover {
	color: var(--bg-white);
	text-decoration: underline;
}

.page-breadcrumb .sep {
	margin: 0 8px;
	color: rgba(255, 255, 255, 0.5);
}

.page-breadcrumb .current {
	color: var(--bg-white);
	font-weight: 500;
}

.page-hero-title {
	font-family: var(--font-heading);
	font-size: 2.5rem;
	font-weight: 300;
	line-height: 1.25;
	color: var(--bg-white);
	max-width: 900px;
	margin: 0;
}

.page-hero-title strong {
	font-weight: 800;
}

.properties-page-section {
	background-color: #F8FAFC;
	padding: 48px 0 80px 0;
}

.properties-page-layout {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 36px;
	align-items: start;
}

/* LEFT SIDEBAR FILTERS */
.filter-sidebar {
	position: sticky;
	top: 110px;
}

.filter-card {
	background-color: var(--bg-white);
	border: 1px solid var(--border-color);
	border-radius: 16px;
	padding: 28px 22px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

.filter-tagline {
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--primary-red);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 4px;
	display: block;
}

.filter-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.filter-header-row h3 {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 800;
	color: #1E293B;
	margin: 0;
}

.btn-reset-filters {
	background: transparent;
	border: none;
	color: #64748B;
	cursor: pointer;
	padding: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.25s ease;
}

.btn-reset-filters:hover {
	color: var(--primary-red);
	background-color: rgba(224, 44, 38, 0.08);
	transform: rotate(-90deg);
}

.filter-group {
	margin-bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.filter-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #334155;
	font-family: var(--font-heading);
}

.select-wrapper {
	position: relative;
	width: 100%;
}

.select-wrapper::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #64748B;
	pointer-events: none;
}

.filter-select {
	width: 100%;
	padding: 10px 32px 10px 14px;
	font-size: 0.85rem;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	background-color: var(--bg-white);
	color: #334155;
	appearance: none;
	font-family: var(--font-sans);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-select:focus {
	outline: none;
	border-color: var(--primary-blue);
	box-shadow: 0 0 0 3px rgba(0, 61, 165, 0.1);
}

.filter-row-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.price-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.price-lbl {
	font-size: 0.75rem;
	color: #64748B;
	font-weight: 500;
}

.filter-input {
	width: 100%;
	padding: 10px 12px;
	font-size: 0.82rem;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	font-family: var(--font-sans);
	color: #334155;
	background: var(--bg-white);
	transition: border-color 0.2s ease;
}

.filter-input:focus {
	outline: none;
	border-color: var(--primary-blue);
	box-shadow: 0 0 0 3px rgba(0, 61, 165, 0.1);
}

.btn-filter-submit {
	width: 100%;
	margin-top: 14px;
	padding: 13px 20px;
	background-color: #0043FF;
	color: var(--bg-white);
	font-family: var(--font-heading);
	font-size: 0.88rem;
	font-weight: 700;
	border: none;
	border-radius: 100px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 14px rgba(0, 82, 255, 0.3);
	text-align: center;
	display: block;
}

.btn-filter-submit:hover {
	background-color: #0043FF;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 61, 165, 0.4);
}

.filter-more-link {
	text-align: center;
	margin-top: 16px;
}

.filter-more-link a {
	font-size: 0.85rem;
	color: #475569;
	font-weight: 600;
	text-decoration: underline;
	transition: color 0.2s ease;
}

.filter-more-link a:hover {
	color: var(--primary-red);
}

/* CATALOG MAIN */
.catalog-main {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.catalog-topbar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-bottom: 8px;
}

.sort-box {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #475569;
	font-family: var(--font-heading);
}

.select-wrapper-sm .sort-select {
	padding: 8px 32px 8px 14px;
	font-size: 0.85rem;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	background-color: var(--bg-white);
	color: #334155;
	font-family: var(--font-sans);
	appearance: none;
	cursor: pointer;
}

.catalog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.catalog-grid .property-card {
	width: 100% !important;
}

.btn-card-outline {
	display: block;
	width: 100%;
	padding: 8px 14px;
	text-align: center;
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	color: #475569;
	border: 1px solid #CBD5E1;
	border-radius: 8px;
	text-decoration: none;
	margin-top: 14px;
	transition: all 0.3s ease;
	background-color: transparent;
}

.property-card:hover .btn-card-outline {
	background-color: var(--primary-blue);
	color: var(--bg-white);
	border-color: var(--primary-blue);
}

.property-card[data-purpose="alquiler"]:hover .btn-card-outline {
	background-color: var(--primary-red);
	color: var(--bg-white);
	border-color: var(--primary-red);
}

/* PAGINATION */
.catalog-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 36px;
	padding-top: 24px;
}

.page-nav {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid #E2E8F0;
	background-color: var(--bg-white);
	color: #334155;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	font-family: var(--font-heading);
}

.page-nav:hover:not(:disabled) {
	background-color: var(--primary-blue);
	color: var(--bg-white);
	border-color: var(--primary-blue);
}

.page-nav:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.page-info {
	font-size: 0.88rem;
	font-weight: 600;
	color: #475569;
	font-family: var(--font-heading);
}

/* RESPONSIVE PROPIEDADES PAGE */
@media (max-width: 1100px) {
	.properties-page-layout {
		grid-template-columns: 280px 1fr;
		gap: 24px;
	}

	.catalog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.properties-page-layout {
		grid-template-columns: 1fr;
	}

	.filter-sidebar {
		position: static;
	}

	.page-hero-title {
		font-size: 1.9rem;
	}
}

/* ==========================================================================
	 CONTACTO PAGE V2 STYLES (MATCHING USER MOCKUP EXACTLY)
	 ========================================================================== */
.contact-page-v2 {
	background-color: #F8FAFC;
}

/* BLOQUE 1: HERO V2 CON AZUL EN TÍTULO E PILLS DE CONTACTO RÁPIDO */
.contact-hero-v2 {
	position: relative;
	background-image: linear-gradient(180deg, rgba(11, 15, 25, 0.78) 0%, rgba(11, 15, 25, 0.90) 100%), url('../img/hero-bg-2.webp');
	background-size: cover;
	background-position: center 30%;
	padding: 135px 0 44px 0;
	color: #FFFFFF;
}

.contact-hero-v2 .section-container {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 32px;
}

.contact-breadcrumb-v2 {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 24px;
}

.contact-breadcrumb-v2 a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
}

.contact-breadcrumb-v2 a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

.contact-breadcrumb-v2 .sep {
	margin: 0 8px;
	color: rgba(255, 255, 255, 0.4);
}

.contact-hero-title-v2 {
	font-family: var(--font-heading);
	font-size: 3.2rem;
	font-weight: 800;
	line-height: 1.1;
	color: #FFFFFF;
	margin: 0 0 16px 0;
	letter-spacing: -0.5px;
}

.contact-hero-title-v2 .highlight-blue {
	color: #0043FF !important;
}

.contact-hero-subtitle-v2 {
	font-size: 1.05rem;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 32px 0;
	max-width: 650px;
}

/* Horizontal Floating Quick Contact Pills */
.contact-quick-pills-row {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.quick-pill-item {
	background: rgba(11, 19, 43, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 100px;
	padding: 8px 24px 8px 10px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.pill-icon-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #0043FF;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pill-text-content {
	display: flex;
	flex-direction: column;
}

.pill-lbl {
	font-size: 0.68rem;
	font-family: var(--font-heading);
	font-weight: 700;
	color: #94A3B8;
	letter-spacing: 0.8px;
}

.pill-val {
	font-family: var(--font-heading);
	font-size: 0.88rem;
	font-weight: 800;
	color: #FFFFFF;
	text-decoration: none;
}

.pill-val:hover {
	color: #60A5FA;
}

/* BLOQUE 2: DOS TARJETAS PRINCIPALES (FORMULARIO E INFORMACIÓN) */
.contact-body-v2-section {
	padding: 40px 0 24px 0;
	background-color: #F8FAFC;
}

.contact-body-v2-section .section-container,
.contact-visit-v2-section .section-container {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 32px;
}

.contact-v2-grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 32px;
	align-items: start;
}

.contact-v2-card {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 40px 44px;
	border: 1px solid #E2E8F0;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.card-v2-title {
	font-family: var(--font-heading);
	font-size: 1.85rem;
	font-weight: 800;
	color: #0F172A;
	margin: 0 0 6px 0;
	line-height: 1.2;
}

.card-v2-subtitle {
	font-size: 0.9rem;
	color: #64748B;
	margin-bottom: 28px;
}

/* Form Styling */
.form-v2-grid {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.form-v2-row-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.form-v2-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.form-v2-group input,
.form-v2-group textarea {
	width: 100%;
	padding: 13px 18px;
	border-radius: 10px;
	border: 1px solid #CBD5E1;
	background-color: #FFFFFF;
	font-family: var(--font-sans);
	font-size: 0.9rem;
	color: #0F172A;
	transition: all 0.2s ease;
}

.form-v2-group input:focus,
.form-v2-group textarea:focus {
	outline: none;
	border-color: #0043FF;
	box-shadow: 0 0 0 3px rgba(0, 67, 255, 0.12);
}

.select-label-v2 {
	font-size: 0.8rem;
	font-weight: 700;
	color: #334155;
	font-family: var(--font-heading);
}

.select-wrapper-v2 {
	position: relative;
	width: 100%;
}

.select-wrapper-v2 select {
	width: 100%;
	padding: 13px 18px;
	border-radius: 10px;
	border: 1px solid #CBD5E1;
	background-color: #FFFFFF;
	font-family: var(--font-sans);
	font-size: 0.9rem;
	color: #0F172A;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.select-wrapper-v2 select:focus {
	outline: none;
	border-color: #0043FF;
	box-shadow: 0 0 0 3px rgba(0, 67, 255, 0.12);
}

.select-arrow {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	stroke: #64748B;
}

.btn-v2-submit {
	width: 100%;
	background-color: #0043FF;
	color: #FFFFFF;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 14px 24px;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: all 0.2s ease;
	box-shadow: 0 4px 14px rgba(0, 67, 255, 0.28);
	margin-top: 4px;
}

.btn-v2-submit:hover {
	background-color: #0033CC;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 67, 255, 0.38);
}

.form-security-note {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	color: #94A3B8;
	margin-top: 6px;
}

.form-security-note stroke {
	stroke: #94A3B8;
}

/* Right Info Card Styling */
.info-v2-list {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-top: 24px;
	margin-bottom: 28px;
}

.info-v2-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.info-icon-v2 {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background-color: rgba(0, 67, 255, 0.08);
	color: #0043FF;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.info-text-v2 {
	display: flex;
	flex-direction: column;
}

.info-title-v2 {
	font-family: var(--font-heading);
	font-size: 0.95rem;
	font-weight: 800;
	color: #0F172A;
	margin-bottom: 4px;
}

.info-link-v2 {
	font-size: 0.88rem;
	color: #475569;
	text-decoration: none;
	font-weight: 500;
}

.info-link-v2:hover {
	color: #0043FF;
	text-decoration: underline;
}

.info-desc-v2 {
	font-size: 0.85rem;
	color: #64748B;
	line-height: 1.5;
	margin: 0;
}

/* Social Circles Row */
.social-circles-v2-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 20px;
	border-top: 1px solid #E2E8F0;
}

.social-circle-v2-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid #E2E8F0;
	background: #FFFFFF;
	color: #475569;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.social-circle-v2-btn:hover {
	background: #0043FF;
	color: #FFFFFF;
	border-color: #0043FF;
	transform: translateY(-2px);
}

/* BLOQUE 3: SECCIÓN VISÍTANOS CON TARJETA UNIFICADA */
.contact-visit-v2-section {
	padding: 16px 0 50px 0;
	background-color: #F8FAFC;
}

.visit-v2-card {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 40px 44px;
	border: 1px solid #E2E8F0;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 40px;
	align-items: center;
}

.visit-v2-title {
	font-family: var(--font-heading);
	font-size: 1.85rem;
	font-weight: 800;
	color: #0F172A;
	margin: 0 0 8px 0;
}

.visit-v2-subtitle {
	font-size: 0.9rem;
	color: #64748B;
	margin-bottom: 24px;
	line-height: 1.5;
}

.visit-v2-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.visit-v2-checklist li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.88rem;
	font-weight: 600;
	color: #334155;
	font-family: var(--font-heading);
}

.check-icon-blue {
	width: 22px;
	height: 22px;
	stroke: #0043FF;
	fill: none;
	stroke-width: 2.5;
	flex-shrink: 0;
}

.map-v2-wrapper {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	border: 1px solid #E2E8F0;
}

.map-v2-overlay-card {
	position: absolute;
	top: 16px;
	left: 16px;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(10px);
	padding: 16px 20px;
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	border: 1px solid #E2E8F0;
	max-width: 260px;
}

.map-overlay-title {
	font-family: var(--font-heading);
	font-size: 0.95rem;
	font-weight: 800;
	color: #0F172A;
	margin: 0 0 2px 0;
}

.map-overlay-addr {
	font-size: 0.78rem;
	color: #64748B;
	margin: 0 0 10px 0;
	line-height: 1.35;
}

.map-overlay-link {
	font-family: var(--font-heading);
	font-size: 0.78rem;
	font-weight: 700;
	color: #0043FF;
	text-decoration: none;
}

.map-overlay-link:hover {
	text-decoration: underline;
}

/* LÍNEA ROJA DE ACENTO SUPERIOR DEL FOOTER */
.footer-top-red-line {
	height: 4px;
	background-color: #FF1200;
	width: 100%;
}

/* RESPONSIVE V2 CONTACTO */
@media (max-width: 1024px) {
	.contact-v2-grid,
	.visit-v2-card {
		grid-template-columns: 1fr;
	}

	.contact-hero-title-v2 {
		font-size: 2.2rem;
	}

	.form-v2-row-2col {
		grid-template-columns: 1fr;
	}
}

/* FLOATING WHATSAPP BUTTON */
.whatsapp-float-btn {
	position: fixed;
	bottom: 28px;
	right: 28px;
	width: 58px;
	height: 58px;
	background-color: #25D366;
	color: #FFFFFF;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
	z-index: 999;
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
	text-decoration: none;
}

.whatsapp-float-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 10px 28px rgba(37, 211, 102, 0.55);
}

/* ==========================================================================
	 15. LEGAL PAGES STYLES (POLÍTICA DE PRIVACIDAD, TÉRMINOS, COOKIES, AVISO LEGAL)
	 ========================================================================== */
body.legal-page {
	font-family: 'Montserrat', sans-serif;
	background-color: #FAFAFC;
	color: #1E293B;
}

/* Legal Hero Header */
.legal-hero {
	position: relative;
	background: linear-gradient(180deg, rgba(5, 11, 20, 0.82) 0%, rgba(5, 11, 20, 0.94) 100%), url('../img/hero-bg-2.webp') center/cover no-repeat;
	padding: 85px 0 24px;
	color: #FFFFFF;
}

.legal-breadcrumb,
.page-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	margin-bottom: 14px;
}

.legal-breadcrumb a,
.page-breadcrumb a {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	color: #CBD5E1;
	text-decoration: none;
	transition: color 0.2s ease;
}

.legal-breadcrumb a:hover,
.page-breadcrumb a:hover {
	color: #FFFFFF;
}

.legal-breadcrumb .sep,
.page-breadcrumb .sep {
	color: #94A3B8;
}

.legal-breadcrumb .current,
.page-breadcrumb .current,
.crumb-semibold {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	color: #FFFFFF !important;
}

.legal-hero-tag {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	color: #FF1200;
	letter-spacing: 0.2em;
	font-size: 13px;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.legal-hero-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 40px;
	color: #FFFFFF !important;
	line-height: 1.2;
	margin-bottom: 10px;
}

.legal-hero-title .heading-line-1 {
	font-size: 40px;
	font-weight: 400;
	color: #FFFFFF !important;
	line-height: 1.2;
}

.legal-hero-title .heading-line-2 {
	font-size: 40px;
	font-weight: 600;
	color: #FFFFFF !important;
	line-height: 1.2;
}

.legal-hero-subtitle {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 15.5px;
	line-height: 1.55;
	color: #E2E8F0;
	max-width: 760px;
}

/* Legal Body Section con inicio de contenido muy cercano al borde superior */
.legal-body-section {
	padding: 16px 0 28px;
	background-color: #FAFAFC;
}

.legal-grid-layout {
	display: grid;
	grid-template-columns: 310px 1fr;
	gap: 48px;
	align-items: start;
}

/* Sticky Toc Sidebar */
.legal-sidebar {
	position: sticky;
	top: 110px;
	align-self: start;
}

.legal-toc-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	padding: 28px 24px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.toc-card-heading {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: #0F172A;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid #F1F5F9;
}

.toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.toc-link {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	color: #475569;
	text-decoration: none;
	line-height: 1.4;
	transition: color 0.2s ease, transform 0.2s ease;
	display: inline-block;
}

.toc-link:hover,
.toc-link.active {
	color: #0043FF;
	transform: translateX(3px);
}

/* Legal Content Body */
.legal-content {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 20px;
	padding: 48px 52px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);
}

.content-red-tag {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	color: #FF1200;
	letter-spacing: 0.2em;
	font-size: 13px;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.content-main-heading {
	margin-bottom: 24px;
}

.heading-line-1 {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 30px;
	color: #0F172A;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.25;
}

.heading-line-2 {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 30px;
	color: #0F172A;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.25;
}

.last-updated-text {
	font-family: 'Montserrat', sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: 14.5px;
	color: #64748B;
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid #F1F5F9;
}

.legal-paragraph {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.8;
	color: #334155;
	margin-bottom: 22px;
}

.legal-section-block {
	margin-top: 36px;
	padding-top: 12px;
	scroll-margin-top: 120px;
}

.legal-section-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 19px;
	color: #0F172A;
	margin-bottom: 14px;
}

.legal-list-numbered {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.8;
	color: #334155;
	margin-left: 22px;
	margin-bottom: 24px;
}

.legal-list-numbered li {
	margin-bottom: 12px;
}

.legal-list-numbered strong {
	font-weight: 600;
	color: #0F172A;
}

/* ==========================================================================
	 ESTILOS DE PÁGINA DE CONTACTO Y ACCORDEÓN DE FAQS
	 ========================================================================== */

/* Cuadrícula de Contacto Balanceada y Centrada Verticalmente */
.contact-grid-layout {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 56px;
	align-items: center;
}

@media (max-width: 992px) {
	.contact-grid-layout {
		grid-template-columns: 1fr;
		gap: 40px;
		align-items: start;
	}
}

.contact-info-col {
	display: flex;
	flex-direction: column;
}

.contact-info-col .legal-paragraph {
	margin-bottom: 12px !important;
}

.contact-details-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 12px;
	margin-left: 32px;
}

@media (max-width: 992px) {
	.contact-details-list {
		margin-left: 0;
	}
}

.contact-detail-item {
	display: flex;
	align-items: center;
	gap: 16px;
}

.contact-detail-icon {
	width: 22px;
	height: 22px;
	object-fit: contain;
	flex-shrink: 0;
}

.contact-detail-text {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.02rem;
	font-weight: 500;
	color: #1E293B;
	text-decoration: none;
}

.contact-detail-text:hover {
	color: #0043FF;
}

.contact-hero-btn-group {
	display: flex;
	gap: 16px;
	margin-top: 24px;
	flex-wrap: wrap;
}

.btn-whatsapp-hero {
	background-color: #0043FF;
	color: #FFFFFF !important;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	padding: 12px 24px;
	border-radius: 8px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-whatsapp-hero:hover {
	background-color: #0033CC;
	transform: translateY(-2px);
}

.btn-call-hero {
	background-color: transparent;
	color: #FFFFFF !important;
	border: 1.5px solid #FFFFFF;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	padding: 12px 24px;
	border-radius: 8px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-call-hero:hover {
	background-color: rgba(255, 255, 255, 0.15);
	transform: translateY(-2px);
}

/* Tarjeta del Formulario de Contacto (Encabezado Centrado, Campos Alineados a la Izquierda) */
.contact-form-card {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 28px 32px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	border: 1px solid #E2E8F0;
	text-align: center;
}

.contact-form-card .content-red-tag {
	margin-bottom: 6px;
	display: inline-block;
	text-align: center;
}

.contact-form-card .content-main-heading {
	font-size: 1.35rem;
	margin-bottom: 18px;
	text-align: center;
}

.contact-form-card form {
	text-align: left;
}

.form-group-custom {
	margin-bottom: 14px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.form-group-custom label {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.84rem;
	font-weight: 600;
	color: #1E293B;
	text-align: left;
}

.form-group-custom label .req {
	color: #FF1200;
}

.form-input-custom,
.form-textarea-custom {
	width: 100%;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.88rem;
	padding: 10px 14px;
	border: 1.5px solid #CBD5E1;
	border-radius: 8px;
	color: #0F172A;
	background-color: #F8FAFC;
	outline: none;
	text-align: left;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.form-input-custom::placeholder,
.form-textarea-custom::placeholder {
	text-align: left;
	color: #94A3B8;
}

.form-input-custom:focus,
.form-textarea-custom:focus {
	border-color: #0043FF;
	background-color: #FFFFFF;
}

.form-textarea-custom {
	min-height: 80px;
	resize: vertical;
}

.form-checkbox-container {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 14px 0 20px 0;
	text-align: left;
}

.form-checkbox-custom {
	width: 16px;
	height: 16px;
	accent-color: #0043FF;
	margin-top: 2px;
	cursor: pointer;
	flex-shrink: 0;
}

.form-checkbox-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.82rem;
	color: #475569;
	line-height: 1.35;
	text-align: left;
}

.form-checkbox-label a {
	color: #0043FF;
	text-decoration: underline;
}

.btn-submit-contact {
	width: 100%;
	background-color: #0043FF;
	color: #FFFFFF;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	padding: 12px 20px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-submit-contact:hover {
	background-color: #0033CC;
	transform: translateY(-2px);
}

/* Sección de Mapa (Fondo Blanco, Inicio Inmediato de Contenido) */
.map-section {
	padding: 8px 0 24px 0;
	background-color: #FFFFFF;
}

.map-header-center {
	text-align: center;
	margin-bottom: 14px;
}

.map-header-center .content-red-tag {
	margin-bottom: 4px;
}

.map-header-center .content-main-heading {
	font-size: 1.85rem;
	margin-bottom: 4px;
}

.map-subtitle {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.95rem;
	color: #64748B;
}

.google-map-wrapper {
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
	border: 1px solid #E2E8F0;
	height: 420px;
}

.google-map-iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Sección de Preguntas Frecuentes (Minimalista Clean - Sin Cajas Blancas) */
.faq-section {
	padding: 24px 0 54px 0;
	background-color: #FAFAFC;
}

.faq-header-center {
	text-align: center;
	margin-bottom: 24px;
}

.faq-accordion-container {
	max-width: 860px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.faq-item {
	border: none;
	border-bottom: 1px solid #E2E8F0;
	background-color: transparent;
	padding: 8px 0;
	border-radius: 0;
	box-shadow: none;
	transition: border-color 0.2s ease;
}

.faq-item:last-child {
	border-bottom: 1px solid #E2E8F0;
}

.faq-question-btn {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
	background: transparent;
	border: none;
	text-align: left;
	cursor: pointer;
	outline: none;
}

.faq-question-text {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.02rem;
	font-weight: 600;
	color: #0F172A;
	padding-right: 16px;
	line-height: 1.4;
	transition: color 0.2s ease;
}

.faq-item[open] .faq-question-text,
.faq-question-btn:hover .faq-question-text {
	color: #0043FF;
}

.faq-chevron-icon {
	width: 20px;
	height: 20px;
	color: #64748B;
	flex-shrink: 0;
	transition: transform 0.3s ease, color 0.3s ease;
}

.faq-item[open] .faq-chevron-icon {
	transform: rotate(180deg);
	color: #0043FF;
}

/* Las respuestas van en <details>: el navegador las muestra y oculta, también sin JS. */
.faq-answer-panel {
	padding: 4px 0 16px 0;
	background-color: transparent;
}

.faq-answer-text {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.94rem;
	color: #475569;
	line-height: 1.65;
	margin: 0;
	border-top: none;
	padding-top: 0;
}

/* ==========================================================================
	 ESTILOS PÁGINA UNIRSE A RE/MAX PRO (JOIN TEAM)
	 ========================================================================== */

/* Sección ¿A quién buscamos? */
.join-seeking-section {
	padding: 36px 0 44px 0;
	background-color: #FFFFFF;
}

.join-seeking-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

@media (max-width: 992px) {
	.join-seeking-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

.join-seeking-img-wrapper {
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.join-seeking-img {
	width: 100%;
	height: 100%;
	max-height: 420px;
	object-fit: cover;
	display: block;
}

/* Sección El Proceso */
.join-process-section {
	padding: 36px 0 54px 0;
	background-color: #FAFAFC;
}

.join-process-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

@media (max-width: 992px) {
	.join-process-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* Línea del Tiempo Vertical para El Proceso */
.join-timeline {
	list-style: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: relative;
	padding-left: 8px;
}

.join-timeline::before {
	content: '';
	position: absolute;
	left: 27px;
	top: 24px;
	bottom: 24px;
	width: 2px;
	background-color: #E2E8F0;
	z-index: 1;
}

.join-timeline-item {
	display: flex;
	align-items: center;
	gap: 20px;
	position: relative;
	z-index: 2;
}

.join-timeline-number {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	color: #FFFFFF;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.join-timeline-number.blue {
	background-color: #0043FF;
}

.join-timeline-number.red {
	background-color: #FF1200;
}

.join-timeline-content {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.98rem;
	color: #1E293B;
	line-height: 1.45;
	background-color: #FFFFFF;
	padding: 14px 20px;
	border-radius: 12px;
	border: 1px solid #E2E8F0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
	flex: 1;
}

.join-timeline-content strong {
	font-weight: 600;
	color: #0F172A;
}

.legal-inline-link {
	color: #0043FF;
	text-decoration: underline;
	font-weight: 500;
	transition: color 0.2s ease;
}

.legal-inline-link:hover {
	color: #0033CC;
}

/* Responsive adjustments for legal pages */
@media (max-width: 992px) {
	.legal-grid-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.legal-sidebar {
		position: static;
	}

	.legal-content {
		padding: 32px 24px;
	}

	.legal-hero-title {
		font-size: 34px;
	}

	.heading-line-1,
	.heading-line-2 {
		font-size: 24px;
	}
}

@media (max-width: 600px) {
	.legal-hero {
		padding: 120px 0 40px;
	}

	.legal-hero-title {
		font-size: 28px;
	}

	.legal-content {
		padding: 24px 18px;
		border-radius: 14px;
	}

	.heading-line-1,
	.heading-line-2 {
		font-size: 20px;
	}
}

/* ==========================================================================
	 PÁGINA SOBRE NOSOTROS (NOSOTROS.HTML)
	 ========================================================================== */
.about-check-list {
	list-style: none;
	padding: 0;
	margin: 20px 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.about-check-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.93rem;
	color: #475569;
	font-weight: 400;
}

.about-check-list .check-icon {
	width: 18px;
	height: 18px;
	stroke: #0043FF;
	stroke-width: 2.5;
	fill: none;
	flex-shrink: 0;
}

.values-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.values-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 640px) {
	.values-grid {
		grid-template-columns: 1fr;
	}
}

.value-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 20px;
	padding: 32px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.value-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 36px rgba(0, 67, 255, 0.08);
	border-color: #0043FF;
}

.value-card-icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: rgba(0, 67, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0043FF;
	margin-bottom: 20px;
}

.value-icon-img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	display: block;
}

.value-card-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: #0043FF;
	margin-bottom: 12px;
	line-height: 1.3;
}

.value-card-desc {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.88rem;
	color: #64748B;
	line-height: 1.6;
	font-weight: 400;
}

.mission-block-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: #0F172A;
	margin: 20px 0 8px 0;
}

/* Feature Badges for Properties Hero Banner */
.hero-feature-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-top: 24px;
	align-items: center;
}

.hero-feature-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.88rem;
	color: #E2E8F0;
	font-weight: 400;
}

.hero-feature-badge .badge-icon {
	width: 18px;
	height: 18px;
	stroke: #CBD5E1;
	stroke-width: 2;
	fill: none;
	flex-shrink: 0;
}

/* Custom Topbar Search & Sort matching user mock */
.catalog-topbar-custom {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 28px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	border: 1px solid #F1F5F9;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.topbar-search-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.topbar-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: #0F172A;
}

.topbar-input-group {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.topbar-input {
	flex: 1;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	padding: 14px 18px;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.95rem;
	color: #0F172A;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.topbar-input:focus {
	border-color: #0043FF;
	box-shadow: 0 0 0 3px rgba(0, 67, 255, 0.1);
}

.topbar-input::placeholder {
	color: #A0ABBB;
	font-weight: 300;
}

.btn-topbar-search {
	background: #0043FF;
	color: #FFFFFF;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	border: none;
	border-radius: 12px;
	padding: 14px 28px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, transform 0.2s ease;
	box-shadow: 0 4px 12px rgba(0, 67, 255, 0.25);
}

.btn-topbar-search:hover {
	background: #0036CC;
	transform: translateY(-1px);
}

.topbar-sort-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.sort-box-custom {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
}

.topbar-sort-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.92rem;
	font-weight: 500;
	color: #64748B;
	white-space: nowrap;
}

.properties-count-text {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.92rem;
	font-style: italic;
	color: #64748B;
	font-weight: 400;
}

/* Header Navbar Dropdown for Comprar & Alquiler */
.nav-item-dropdown {
	position: relative;
}

.nav-item-dropdown > a {
	display: flex;
	align-items: center;
	gap: 4px;
}

.nav-dropdown-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: #FFFFFF;
	border-radius: 16px;
	padding: 12px 10px;
	width: 320px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
	border: 1px solid #F1F5F9;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
	z-index: 1000;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 6px;
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
	display: block;
	padding: 7px 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.84rem;
	color: #0F172A;
	font-weight: 500;
	text-decoration: none;
	border-radius: 8px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-dropdown-menu a:hover {
	background: rgba(0, 67, 255, 0.08);
	color: #0043FF;
}

/* En el panel móvil los submenús se pliegan y se abren con su botón (acordeón). */
@media (max-width: 1240px) {
	.nav-item-dropdown {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 4px;
	}

	.nav-dropdown-menu,
	.nav-item-dropdown:hover .nav-dropdown-menu,
	.nav-item-dropdown:focus-within .nav-dropdown-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		border: none;
		width: 100%;
		background: var(--bg-light);
		padding: 8px;
		margin-top: 8px;
		display: none;
		grid-template-columns: 1fr 1fr;
		gap: 2px 6px;
		text-align: left;
	}

	.nav-item-dropdown.abierto .nav-dropdown-menu {
		display: grid;
	}
}

/* Redesigned CTA Contact Section before Footer in Nosotros */
.cta-contact-section {
	padding: 80px 0;
	background-color: #F8FAFC;
}

.cta-contact-card {
	background: #FFFFFF;
	border-radius: 28px;
	padding: 56px 48px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.05);
	border: 1px solid #E2E8F0;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 48px;
	align-items: center;
}

.cta-contact-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 2.2rem;
	font-weight: 700;
	color: #0F172A;
	margin: 12px 0 16px 0;
	line-height: 1.25;
}

.cta-contact-desc {
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	color: #64748B;
	line-height: 1.6;
	margin-bottom: 28px;
}

.cta-contact-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.btn-whatsapp-cta {
	background-color: #25D366;
	color: #FFFFFF !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 14px 24px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25);
}

.btn-whatsapp-cta:hover {
	background-color: #1EBE57;
	transform: translateY(-2px);
}

.btn-phone-cta {
	background-color: #0043FF;
	color: #FFFFFF !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 14px 24px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
	box-shadow: 0 4px 14px rgba(0, 67, 255, 0.2);
}

.btn-phone-cta:hover {
	background-color: #0036CC;
	transform: translateY(-2px);
}

.cta-contact-form-wrapper {
	background: #F8FAFC;
	border-radius: 20px;
	padding: 36px 32px;
	border: 1px solid #E2E8F0;
}

.cta-form-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	color: #0F172A;
	margin-bottom: 20px;
}

.btn-cta-submit {
	width: 100%;
	padding: 14px 24px;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 12px;
	margin-top: 8px;
}

@media (max-width: 991px) {
	.cta-contact-card {
		grid-template-columns: 1fr;
		padding: 36px 24px;
		gap: 32px;
	}
}

/* ==========================================================================
   AJUSTES DEL TEMA
   Piezas nuevas o cambiadas respecto al HTML original.
   ========================================================================== */

/* Accesibilidad: texto solo para lectores de pantalla y salto al contenido. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 3000;
	padding: 12px 20px;
	background: var(--primary-blue);
	color: var(--bg-white);
	font-weight: 700;
	border-radius: 8px;
}

.skip-link:focus {
	top: 16px;
}

:focus-visible {
	outline: 3px solid var(--primary-blue);
	outline-offset: 2px;
}

/* Barra de administración de WordPress (solo con sesión iniciada). */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* Encabezado: el botón "Publica tu Propiedad" también puede ser <button>. */
button.btn-vender {
	cursor: pointer;
	font-family: var(--font-heading);
}

/* Submenús: flecha dentro del enlace en escritorio, botón de acordeón en el panel móvil. */
.nav-flecha {
	width: 12px;
	height: 12px;
	margin-left: 2px;
}

.submenu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 8px;
	background: var(--bg-light);
	color: var(--text-dark);
	cursor: pointer;
}

.submenu-toggle svg {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}

.nav-item-dropdown.abierto .submenu-toggle svg {
	transform: rotate(180deg);
}

.nav-dropdown-menu a[aria-current="page"] {
	background: rgba(0, 67, 255, 0.08);
	color: var(--primary-blue);
}

@media (max-width: 1240px) {
	.nav-flecha {
		display: none;
	}

	.submenu-toggle {
		display: inline-flex;
	}
}

/* Selector de idioma: el actual resaltado y los demás como enlace. */
.lang-selector {
	cursor: default;
}

.lang-selector .lang-text + .lang-text::before {
	content: '|';
	margin-right: 6px;
	color: var(--border-color);
}

.lang-selector a.lang-text:hover {
	color: var(--primary-blue);
}

.lang-selector .lang-actual {
	color: var(--text-dark);
}

/* Pie: 4 columnas cuando "Guías y Herramientas" está oculta. */
@media (min-width: 1025px) {
	.footer-grid-sin-guias {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}
}

.icon-footer-relleno {
	fill: #CBD5E1;
	stroke: none;
}

.footer-address {
	font-style: normal;
}

.footer-mapa {
	display: inline-flex;
	align-items: center;
	margin-top: 10px;
	font-size: 0.84rem;
	color: #CBD5E1;
}

.footer-mapa:hover {
	color: #FFFFFF;
}

/* Botón flotante de WhatsApp. */
.whatsapp-float-btn svg {
	width: 30px;
	height: 30px;
}

/* Botón del menú: las tres barras forman una X con el panel abierto. */
.mobile-toggle[aria-expanded="true"] .bar:nth-child(2) {
	transform: translateY(7px) rotate(45deg);
}

.mobile-toggle[aria-expanded="true"] .bar:nth-child(3) {
	opacity: 0;
}

.mobile-toggle[aria-expanded="true"] .bar:nth-child(4) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Página genérica (sin plantilla propia): deja sitio al encabezado fijo. */
.pagina-generica {
	padding: 140px 0 80px;
}

.pagina-generica .section-container {
	max-width: 900px;
}

.pagina-generica h1 {
	font-size: 2.2rem;
	margin-bottom: 24px;
}

/* ==========================================================================
   PÁGINAS (paso 4)
   Estilos que en el HTML original estaban en línea, y piezas nuevas.
   ========================================================================== */

/* Portada: fondos del pase de fotos (la imagen llega como variable CSS). */
.hero-bg-layer {
	background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.55)), var(--fondo, none);
}

@media (max-width: 960px) {
	.hero-bg-layer {
		background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.55)), var(--fondo-movil, var(--fondo, none));
	}
}

.cta-banner {
	background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/hero-bg-1.webp');
}

@media (max-width: 960px) {
	.cta-banner {
		background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/hero-bg-1-960.webp');
	}
}

/* Tarjetas de propiedades: el texto del recuadro es un botón. */
button.hover-text {
	background: none;
	border: none;
	font-family: inherit;
	cursor: pointer;
}

.property-price {
	margin: 0;
}

/* Carruseles: puntos y flechas son botones. */
.carousel-dots .dot {
	border: none;
	padding: 0;
}

.slider-arrow[hidden] {
	display: none;
}

/* Cabecera de página. */
.legal-hero--compacta {
	background: linear-gradient(rgba(5, 11, 20, 0.82), rgba(5, 11, 20, 0.88)), url('../img/hero-bg-2.webp') center/cover no-repeat;
	padding: 60px 0 45px 0;
}

.legal-hero--contacto .legal-hero-subtitle {
	max-width: 680px;
}

.legal-body-section--contacto {
	padding: 16px 0 0 0;
}

/* Nosotros. */
.about-section--nosotros {
	padding: 36px 0 16px 0;
}

.about-section--nosotros .legal-paragraph {
	margin-bottom: 14px;
}

.about-section--nosotros .legal-paragraph:last-of-type {
	margin-bottom: 20px;
}

.about-values-section {
	padding: 16px 0 32px 0;
	background-color: #FAFAFC;
}

.values-header {
	text-align: center;
	margin-bottom: 24px;
}

.values-cta {
	text-align: center;
	margin-top: 12px;
}

.values-cta .btn {
	padding: 8px 20px;
}

.stats-bar--bloque {
	padding: 40px 0;
}

.stats-bar--bloque .section-container {
	padding: 80px 24px;
}

.stats-bar--bloque .stat-number {
	font-size: 2.8rem;
	font-weight: 800;
	color: #FFFFFF;
}

.stats-bar--bloque .stat-label {
	color: #E2E8F0;
	font-size: 0.92rem;
	font-weight: 500;
	opacity: 1;
}

.about-mission-section {
	padding: 48px 0;
	background-color: #FFFFFF;
}

.mision-vision {
	margin-top: 20px;
}

.mision-vision .mission-block-title + .legal-paragraph + .mission-block-title {
	margin-top: 20px;
}

.about-mission-section .join-seeking-img {
	border-radius: 24px;
}

/* Nosotros: equipo de agentes. */
.equipo-section {
	background-color: #FFFFFF;
}

.equipo-section .section-container {
	padding-top: 56px;
	padding-bottom: 56px;
}

.equipo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 32px 24px;
}

.equipo-card {
	min-width: 0;
}

.equipo-contacto {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.equipo-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--bg-light);
	border: 1px solid var(--border-color);
	color: var(--text-dark);
}

.equipo-boton:hover {
	background-color: var(--primary-blue);
	border-color: var(--primary-blue);
	color: #FFFFFF;
}

.equipo-boton--whatsapp {
	color: #25D366;
}

.equipo-boton--whatsapp:hover {
	background-color: #25D366;
	border-color: #25D366;
}

/* Bloque oscuro de contacto con formulario (Nosotros, Unirse). */
.contacto-cta {
	padding: 48px 0;
}

.page-template-plantillas-unirse .contacto-cta {
	padding: 60px 0;
}

.contacto-cta .legal-hero-subtitle {
	margin-bottom: 20px;
}

.contact-details-list--claro .contact-detail-icon {
	filter: brightness(0) invert(1);
}

.contact-details-list--claro .contact-detail-text {
	color: #FFFFFF;
}

/* Unirse. */
.join-process-left .legal-paragraph {
	margin-bottom: 24px;
}

.join-process-left .btn-whatsapp-hero {
	display: inline-flex;
}

.why-text-col .legal-paragraph {
	margin-bottom: 16px;
}

.faq-subtitle {
	max-width: 720px;
	margin: 8px auto 0 auto;
}

/* Preguntas frecuentes con <details>. */
.faq-question-btn {
	list-style: none;
}

.faq-question-btn::-webkit-details-marker {
	display: none;
}

/* Formularios. */
.form-fila-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

@media (max-width: 576px) {
	.form-fila-2 {
		grid-template-columns: 1fr;
	}
}

select.form-input-custom {
	background-color: #FFFFFF;
}

/* Contacto: el mapa de Google solo se carga al pulsar "Ver mapa". */
.mapa-diferido {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #EEF2FF 0%, #F8FAFC 100%);
}

.mapa-aviso {
	max-width: 440px;
	padding: 24px;
	text-align: center;
}

.mapa-icono {
	width: 44px;
	height: 44px;
	color: var(--primary-blue);
	margin-bottom: 12px;
}

.mapa-direccion {
	font-weight: 600;
	color: #0F172A;
	margin-bottom: 16px;
}

.mapa-nota {
	margin-top: 14px;
	font-size: 0.8rem;
	color: #64748B;
}

.mapa-nota a {
	color: var(--primary-blue);
	text-decoration: underline;
}

/* Páginas legales: contenido editado en WordPress. */
.legal-grid-layout--sin-indice {
	grid-template-columns: 1fr;
}

.contenido-legal p,
.contenido-legal ol,
.contenido-legal ul {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.8;
	color: #334155;
	margin-bottom: 22px;
}

.contenido-legal ol,
.contenido-legal ul {
	margin-left: 22px;
	margin-bottom: 24px;
}

.contenido-legal li {
	margin-bottom: 12px;
}

.contenido-legal strong {
	font-weight: 600;
	color: #0F172A;
}

.contenido-legal h2 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 19px;
	color: #0F172A;
	margin: 36px 0 14px;
	padding-top: 12px;
	scroll-margin-top: 120px;
}

.contenido-legal a {
	color: #0043FF;
	text-decoration: underline;
	font-weight: 500;
}

.contenido-legal a:hover {
	color: #0033CC;
}

.contenido-legal p.last-updated-text {
	font-style: italic;
	font-size: 14.5px;
	color: #64748B;
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid #F1F5F9;
}

/* Portada: la leyenda de la foto se funde al cambiar (la transición ya está en .hero-caption). */
.hero-caption.cambiando {
	opacity: 0;
}

.carousel-dots[hidden] {
	display: none;
}

/* ==========================================================================
   LISTADO DE PROPIEDADES (paso 5)
   ========================================================================== */
.legal-hero--propiedades {
	background: linear-gradient(rgba(5, 11, 20, 0.82), rgba(5, 11, 20, 0.88)), url('../img/hero-bg-1.webp') center/cover no-repeat;
}

@media (max-width: 960px) {
	.legal-hero--propiedades {
		background-image: linear-gradient(rgba(5, 11, 20, 0.82), rgba(5, 11, 20, 0.88)), url('../img/hero-bg-1-960.webp');
	}
}

.hero-feature-badges {
	list-style: none;
	padding: 0;
}

/* Barra de filtros (en el original, estilos en línea). */
.filtros-etiqueta {
	margin-bottom: 4px;
	font-size: 13px;
}

.filtros-titulo {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	color: #0F172A;
	margin: 0;
}

.filter-card .filter-group {
	margin-bottom: 16px;
}

.filter-card .filter-row-2col .filter-group,
.filter-card .filter-row-2col {
	margin-bottom: 16px;
}

.filter-card .filter-row-2col .filter-group {
	margin-bottom: 0;
}

.filtros-rango {
	border: none;
	padding: 0;
	min-width: 0;
}

.filtros-rango legend {
	padding: 0;
	margin-bottom: 6px;
}

.price-lbl {
	font-size: 0.8rem;
	color: #94A3B8;
	display: block;
	margin-bottom: 4px;
}

.filtros-aplicar,
.filtros-limpiar {
	display: block;
	width: 100%;
	border: none;
	border-radius: 12px;
	padding: 12px 20px;
	text-align: center;
	cursor: pointer;
	font-family: var(--font-heading);
	font-weight: 600;
}

.filtros-limpiar {
	background-color: #FF1200;
	color: #FFFFFF;
}

.filtros-adicionales {
	margin-top: 16px;
}

.filtros-mas {
	display: block;
	text-align: right;
	list-style: none;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.88rem;
	font-weight: 700;
	font-style: italic;
	text-decoration: underline;
	color: #000000;
}

.filtros-mas::-webkit-details-marker {
	display: none;
}

.filtros-adicionales[open] .filtros-mas {
	margin-bottom: 0;
}

.filtros-adicionales-cuerpo {
	margin-top: 24px;
	border-top: 1px dashed #CBD5E1;
	padding-top: 20px;
}

.filtros-adicionales-titulo {
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #0043FF;
	margin: 0 0 16px;
}

.filtros-acciones {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
}

/* Sin resultados. */
.catalogo-vacio {
	background: #FFFFFF;
	border: 1px dashed #CBD5E1;
	border-radius: 16px;
	padding: 48px 32px;
	text-align: center;
}

.catalogo-vacio-titulo {
	font-size: 1.3rem;
	font-weight: 600;
	color: #0F172A;
	margin-bottom: 10px;
}

.catalogo-vacio p {
	color: #64748B;
	max-width: 520px;
	margin: 0 auto 24px;
}

.catalogo-vacio-botones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* En el listado las tarjetas no llevan la animación escalonada del carrusel. */
.catalog-grid .property-card {
	transition-delay: 0s;
}

/* Los hijos de la rejilla pueden encogerse por debajo del ancho de sus desplegables
   (si no, en el celular la barra de filtros desborda la pantalla). */
.properties-page-layout > *,
.filter-row-2col > * {
	min-width: 0;
}

.topbar-input {
	min-width: 0;
}

@media (max-width: 576px) {
	.topbar-input-group {
		flex-wrap: wrap;
	}

	.btn-topbar-search {
		width: 100%;
	}

	.topbar-sort-row {
		flex-wrap: wrap;
		gap: 12px;
	}

	.sort-box-custom {
		flex-wrap: wrap;
		min-width: 0;
	}
}

/* En el original el catálogo seguía a dos columnas en el celular y las tarjetas no cabían. */
@media (max-width: 600px) {
	.catalog-grid {
		grid-template-columns: 1fr;
	}
}

/* Características de las tarjetas: cada una en una pieza; si no caben, siguen debajo. */
.property-specs {
	flex-wrap: wrap;
	row-gap: 6px;
}

.property-specs span {
	white-space: nowrap;
}

/* ==========================================================================
   FORMULARIOS: envío (paso 6)
   ========================================================================== */

/* Campo trampa: fuera de la vista y del orden de tabulación; solo lo rellenan los robots. */
.campo-trampa {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.modal-form[hidden] {
	display: none;
}

.formulario-estado {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 0.88rem;
	line-height: 1.5;
}

.formulario-estado[hidden] {
	display: none;
}

.formulario-estado--ok {
	background-color: #DEF7EC;
	color: #03543F;
}

.formulario-estado--error {
	background-color: #FDE8E8;
	color: #9B1C1C;
}

.campo-error {
	display: block;
	margin-top: 4px;
	font-size: 0.8rem;
	color: #C81E1E;
}

[aria-invalid="true"] {
	border-color: #E02424 !important;
}

button[type="submit"]:disabled {
	opacity: 0.7;
	cursor: wait;
}

.equipo-idiomas {
	margin-top: 4px;
	font-size: 0.72rem;
	color: var(--text-muted);
	letter-spacing: 0.5px;
}

/* Celular: el botón de WhatsApp se aparta cuando taparía un formulario (lo decide app.js). */
.whatsapp-float-btn {
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, opacity 0.25s ease, visibility 0.25s;
}

.whatsapp-oculto .whatsapp-float-btn {
	opacity: 0;
	visibility: hidden;
	transform: translateY(24px) scale(0.8);
}

@media (max-width: 768px) {
	.whatsapp-float-btn {
		width: 52px;
		height: 52px;
		right: 16px;
		bottom: 16px;
	}

	.whatsapp-float-btn svg {
		width: 26px;
		height: 26px;
	}
}

/* Portátiles (1241-1366 px): espaciados más compactos para que el menú completo quepa en
   una línea con el selector de idioma. */
.btn-vender {
	white-space: nowrap;
}

@media (min-width: 1241px) and (max-width: 1366px) {
	.header-container {
		padding: 10px 20px;
	}

	.nav-list {
		gap: 18px;
	}

	.header-right {
		gap: 12px;
	}

	.btn-vender {
		padding: 9px 16px;
	}
}

/* "Sobre nosotros": las columnas pueden encogerse y los rasgos pasar a otra línea (a 360 px
   la sección desbordaba la pantalla, también en el original). */
.about-grid > * {
	min-width: 0;
}

.about-features {
	flex-wrap: wrap;
}

/* Los bloques con animación lateral (.reveal-left/.reveal-right) empiezan desplazados 30 px y
   ensanchaban la página en el celular: era el "desbordamiento de unos píxeles" del original
   (overflow-x: hidden en body no lo evita en los navegadores móviles). "clip" recorta sin
   crear un contenedor de desplazamiento, así que position: sticky sigue funcionando. */
#contenido {
	overflow-x: clip;
}