/*
 * Reset native <button> chrome sitewide (see the longer explanation in
 * ficha.css) — Windows forced-colors/high-contrast mode paints a system
 * border/highlight on any real <button>, ignoring our CSS, unless told
 * not to. Covers the Home/archive property cards' favoritos heart and
 * the Filtro widget's toggle buttons.
 */
.nh-property-listing button,
.nh-property-tile button,
.nh-property-section button,
.nh-comuna-section button,
.nh-filtro button {
	appearance: none;
	-webkit-appearance: none;
	forced-color-adjust: none;
}

/*
 * Header Footer Elementor's Nav Menu widget only exposes "Arrows" / "Plus
 * Sign" / "Classic" as Submenu Icon options in its own Style tab — there's
 * no "none" choice in the UI, even though its CSS has a dead
 * .hfe-submenu-icon-none rule for it. Hiding the chevron here instead of
 * hacking the third-party plugin (would be lost on update). Scoped to
 * #masthead (the site header) only — the footer nav keeps its chevron.
 * Submenu still opens on hover/click either way, just without the arrow.
 */
#masthead .hfe-nav-menu .sub-arrow {
	display: none !important;
}

/*
 * Corazon/ubicacion icons from the client's own asset pack (assets/img/
 * icons/) — both source PNGs are solid white silhouettes on transparent
 * backgrounds, meant to sit on photos. Rendered via mask-image instead of
 * a plain <img> so `background-color: currentColor` lets each usage pick
 * up whatever color already applies there (white over a photo, dark on a
 * white card, red when a favorito is active, etc.) without needing a
 * separate colored PNG per context.
 */
.nh-icon-corazon,
.nh-icon-ubicacion {
	display: inline-block;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	background-color: currentColor;
	vertical-align: middle;
}

.nh-icon-corazon {
	width: 18px;
	height: 16px;
	-webkit-mask-image: url(../img/icons/corazon.png);
	mask-image: url(../img/icons/corazon.png);
}

.nh-icon-ubicacion {
	width: 12px;
	height: 14px;
	-webkit-mask-image: url(../img/icons/ubicacion.png);
	mask-image: url(../img/icons/ubicacion.png);
}

/*
 * Paleta aproximada a partir del mockup de referencia (home desktop).
 * Son valores de partida — hay que reemplazarlos por los hex/fuentes
 * definitivos de marca cuando el cliente los entregue.
 */
:root {
	--nh-color-olive: #6d6f52;
	--nh-color-gold: #c99a5b;
	--nh-color-gold-dark: #b6864a;
	--nh-color-dark: #23262b;
	--nh-color-bg: #faf7f2;
	--nh-color-text: #2b2b2b;
	--nh-color-muted: #6b6b6b;
	--nh-font-heading: 'Geffroy Eleonora', Georgia, serif;
	--nh-font-body: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body,
.nh-search-bar,
.nh-property-section,
.nh-comuna-section,
.nh-ficha {
	font-family: var(--nh-font-body);
	font-weight: 500;
}

/*
 * El template "default" del theme envuelve el contenido en .page-content,
 * y theme.css de Hello Elementor trae ".page-content a { text-decoration: underline }"
 * con más especificidad que .elementor-button. Sin este override los botones
 * nativos de Elementor salen subrayados en cualquier página con ese template.
 */
.page-content .elementor-button {
	text-decoration: none;
}

.nh-section-title,
.nh-property-card__title,
.nh-comuna-card__label,
.nh-ficha__title,
.nh-ficha-banner__title {
	font-family: var(--nh-font-heading);
	font-weight: normal;
}

.nh-property-card__price,
.nh-ficha__price,
strong {
	font-weight: 700;
}

.nh-search-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	background: #fff;
	border-radius: 999px;
	padding: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	max-width: 720px;
	margin: 0 auto;
	align-items: center;
}

.nh-search-field select,
.nh-search-field input[type="text"] {
	border: none;
	background: transparent;
	font-family: var(--nh-font-body);
	font-size: 14px;
	color: var(--nh-color-text);
	padding: 8px 12px;
	min-width: 140px;
}

.nh-search-field select:focus,
.nh-search-field input[type="text"]:focus {
	outline: none;
}

.nh-search-field--text {
	flex: 1;
	border-left: 1px solid #eee;
}

.nh-search-submit {
	background: var(--nh-color-gold) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px;
	padding: 12px 28px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
}

.nh-search-submit:hover {
	background: var(--nh-color-gold-dark) !important;
}

.nh-property-section,
.nh-comuna-section,
.nh-blog-section {
	text-align: left;
	font-family: var(--nh-font-body);
}

.nh-section-title {
	font-family: var(--nh-font-heading);
	font-size: 30px;
	color: var(--nh-color-text);
	margin-bottom: 8px;
}

.nh-section-subtitle {
	color: var(--nh-color-muted);
	max-width: 560px;
	margin: 0 auto 32px;
}

.nh-property-grid {
	display: grid;
	gap: 24px;
	text-align: left;
	grid-template-columns: repeat(3, 1fr);
}

.nh-property-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.nh-property-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.nh-property-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.nh-property-card__media {
	position: relative;
}

.nh-property-card__media img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.nh-property-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--nh-color-gold);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 999px;
	z-index: 1;
}

.nh-property-card__body {
	padding: 18px 20px 20px;
}

.nh-property-card__title {
	font-family: var(--nh-font-heading);
	font-size: 18px;
	margin: 0 0 6px;
}

.nh-property-card__title a {
	color: var(--nh-color-text);
	text-decoration: none;
}

.nh-property-card__address {
	color: var(--nh-color-muted);
	font-size: 13px;
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.nh-property-card__specs {
	list-style: none;
	display: flex;
	gap: 14px;
	padding: 0;
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--nh-color-text);
	border-top: 1px solid #f0ede8;
	border-bottom: 1px solid #f0ede8;
	padding: 10px 0;
}

.nh-property-card__specs li {
	display: flex;
	align-items: center;
	gap: 4px;
}

.nh-property-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nh-property-card__price {
	font-weight: 700;
	font-size: 16px;
	color: var(--nh-color-text);
}

.nh-property-card__cta {
	background: transparent;
	border: 1px solid var(--nh-color-gold);
	color: var(--nh-color-gold-dark);
	padding: 6px 18px;
	border-radius: 999px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease;
}

.nh-property-card__cta:hover {
	background: var(--nh-color-gold);
	color: #fff;
}

.nh-comuna-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.nh-comuna-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 260px;
	border-radius: 12px;
	background-color: var(--nh-color-olive);
	background-size: cover;
	background-position: center;
	color: #fff;
	text-decoration: none !important;
	padding: 20px;
	overflow: hidden;
}

.nh-comuna-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.nh-comuna-card__label,
.nh-comuna-card__link {
	position: relative;
	z-index: 1;
}

.nh-comuna-card__label {
	font-family: var(--nh-font-heading);
	font-size: 18px;
	letter-spacing: 1px;
	margin-bottom: 4px;
}

.nh-comuna-card__link {
	font-size: 12px;
	opacity: 0.85;
}

.nh-no-results,
.nh-no-results-dynamic {
	color: var(--nh-color-muted);
	text-align: center;
	padding: 20px 0;
}

/* ---- Header transparente sobre el hero (Page_Settings::META_KEY) ---- */

body.nh-header-overlay #masthead {
	position: absolute !important;
	top: 0 !important;
	left: 0;
	right: 0;
	z-index: 50;
	background: transparent !important;
}

body.nh-header-overlay #masthead .elementor-section,
body.nh-header-overlay #masthead .elementor-widget-wrap {
	background: transparent !important;
}

body.nh-header-overlay #masthead .hfe-site-logo-img,
body.nh-header-overlay #masthead img.hfe-site-logo-img {
	filter: brightness(0) invert(1);
}

body.nh-header-overlay #masthead .elementor-column,
body.nh-header-overlay #masthead .elementor-widget-wrap,
body.nh-header-overlay #masthead .elementor-container {
	background: transparent !important;
}

body.nh-header-overlay #masthead .hfe-nav-menu a.hfe-menu-item,
body.nh-header-overlay #masthead .hfe-nav-menu-icon {
	color: #fff !important;
}

/* ---- Header olivo/negro (solo ficha de propiedad) ---- */

body.nh-header-light #masthead img {
	filter: brightness(0) !important;
}

body.nh-header-light #masthead .hfe-nav-menu a.hfe-menu-item,
body.nh-header-light #masthead .hfe-nav-menu-icon {
	color: var(--nh-color-olive) !important;
}

/* ---- NH Hero ---- */

.nh-hero {
	position: relative;
	width: 100%;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.nh-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 62%, rgba(0, 0, 0, 0.85) 100%);
}

.nh-hero--left .nh-hero__overlay {
	background: linear-gradient(to left, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 62%, rgba(0, 0, 0, 0.85) 100%);
}

.nh-hero__content {
	position: absolute;
	z-index: 2;
	bottom: 7%;
	max-width: 620px;
	color: #fff;
}

.nh-hero--right .nh-hero__content {
	right: 5%;
	text-align: right;
}

.nh-hero--left .nh-hero__content {
	left: 5%;
	text-align: left;
}

.nh-hero__eyebrow {
	font-family: var(--nh-font-heading);
	font-style: italic;
	font-weight: 400;
	font-size: 28px;
	margin: 0 0 4px;
}

.nh-hero__heading {
	font-family: var(--nh-font-heading);
	text-transform: uppercase;
	font-weight: 400;
	font-size: 52px;
	line-height: 1.08;
	margin: 0 0 16px;
}

.nh-hero__subtitle {
	font-family: var(--nh-font-body);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	margin: 0;
}

/* ---- NH Filtro ---- */

.nh-filtro {
	display: grid;
	gap: 14px;
	max-width: 640px;
	margin: 40px auto;
}

.nh-filtro--cols-1 { grid-template-columns: 1fr; max-width: 280px; }
.nh-filtro--cols-2 { grid-template-columns: repeat(2, 1fr); }
.nh-filtro--cols-3 { grid-template-columns: repeat(3, 1fr); }
.nh-filtro--cols-4 { grid-template-columns: repeat(4, 1fr); }

.nh-filtro__btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: 15px 24px;
	border-radius: 6px;
	border: 1px solid var(--nh-color-gold);
	background: #fff;
	color: var(--nh-color-text);
	font-family: var(--nh-font-body);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.nh-filtro__btn:focus {
	outline: 2px solid var(--nh-color-gold-dark);
	outline-offset: 2px;
}

.nh-filtro__btn--operacion.nh-filtro__btn--active {
	background: var(--nh-color-gold);
	border-color: var(--nh-color-gold);
	color: #fff;
}

.nh-filtro__btn--tipo_propiedad {
	border-color: var(--nh-color-olive);
}

.nh-filtro__btn--tipo_propiedad.nh-filtro__btn--active {
	background: var(--nh-color-olive);
	border-color: var(--nh-color-olive);
	color: #fff;
}

/* ---- NH Promo split ---- */

.nh-promo {
	display: flex;
	min-height: 480px;
}

.nh-promo--reverse {
	flex-direction: row-reverse;
}

.nh-promo__media {
	flex: 1 1 50%;
	background-size: cover;
	background-position: center;
}

.nh-promo__panel {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 60px 70px;
}

.nh-promo__eyebrow {
	font-family: var(--nh-font-heading);
	font-style: italic;
	font-size: 20px;
	margin: 0 0 6px;
	opacity: 0.9;
}

.nh-promo__title {
	font-family: var(--nh-font-heading);
	text-transform: uppercase;
	font-weight: 400;
	font-size: 32px;
	letter-spacing: 1px;
	margin: 0 0 20px;
}

.nh-promo__text {
	font-family: var(--nh-font-body);
	font-size: 14px;
	line-height: 1.8;
	margin: 0 0 28px;
	max-width: 420px;
	opacity: 0.95;
}

.nh-promo__button {
	display: inline-block;
	background: #fff;
	color: var(--nh-color-text);
	padding: 12px 32px;
	border-radius: 4px;
	text-decoration: none !important;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* ---- NH Blog grid ---- */

/* One-by-one sliding carousel: .nh-blog-grid-viewport clips overflow,
   .nh-blog-grid is the flex track that gets translateX()'d by
   assets/js/blog-grid-carousel.js (card widths are set inline by that same
   script, computed from the viewport's measured width — CSS percentages
   can't express "1/N of the viewport" once the track itself is wider than
   it). The arrow buttons live OUTSIDE .nh-blog-grid-viewport, as siblings
   inside .nh-blog-grid-wrap — they used to be direct children of the
   overflow:hidden element itself, which silently clipped them off-screen
   (they sit at a negative left/right offset on purpose, to hang past the
   card edges). */
.nh-blog-grid-wrap {
	position: relative;
	margin-top: 32px;
	text-align: left;
}

.nh-blog-grid-viewport {
	overflow: hidden;
}

.nh-blog-grid {
	display: flex;
	gap: 24px;
	transition: transform 0.35s ease;
}

.nh-blog-card {
	flex: 0 0 auto;
}

.nh-blog-grid__arrow {
	position: absolute;
	top: 84px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #e1e4e8;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	color: var(--nh-color-text);
	cursor: pointer;
	z-index: 2;
	transition: opacity 0.2s ease;
}

.nh-blog-grid__arrow--prev {
	left: -18px;
}

.nh-blog-grid__arrow--next {
	right: -18px;
}

.nh-blog-grid__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (max-width: 600px) {
	/* Narrow viewports often have little to no page margin outside this
	   widget, so a negative offset arrow can land past the screen edge —
	   pull both arrows inward, overlapping the card photo instead, same as
	   most mobile carousels do. */
	.nh-blog-grid__arrow--prev {
		left: 8px;
	}

	.nh-blog-grid__arrow--next {
		right: 8px;
	}
}

.nh-blog-card__media {
	display: block;
	position: relative;
	height: 210px;
	background-size: cover;
	background-position: center;
	border-radius: 14px;
	overflow: hidden;
}

.nh-blog-card__badge {
	position: absolute;
	background: var(--nh-color-olive);
	color: #fff;
	font-size: 13px;
	padding: 8px 18px;
	border-radius: 999px;
	font-weight: 600;
}

.nh-blog-card__badge--top-left { top: 16px; left: 16px; }
.nh-blog-card__badge--top-right { top: 16px; right: 16px; }
.nh-blog-card__badge--top-center { top: 16px; left: 50%; transform: translateX(-50%); }
.nh-blog-card__badge--bottom-left { bottom: 16px; left: 16px; }
.nh-blog-card__badge--bottom-right { bottom: 16px; right: 16px; }
.nh-blog-card__badge--bottom-center { bottom: 16px; left: 50%; transform: translateX(-50%); }

.nh-blog-card__body {
	padding: 16px 4px 0;
}

.nh-blog-card__date {
	font-size: 12px;
	color: var(--nh-color-muted);
	margin: 0 0 8px;
}

.nh-blog-card__title {
	font-family: var(--nh-font-body);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.4;
	margin: 0 0 10px;
}

.nh-blog-card__link {
	color: var(--nh-color-gold-dark);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none !important;
}

/* ---- NH Property listing (Home, full-width row) ---- */

.nh-property-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.nh-property-listing {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	height: 420px;
}

.nh-property-listing__media {
	position: absolute;
	inset: 0;
	display: block;
}

.nh-property-listing__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--nh-obj-x, 50%) var(--nh-obj-y, 50%);
	display: block;
}

/* "Oscurecer imagen" control (Property_Grid) — a flat black layer over the
   whole photo, independent of each style's own text-legibility gradient
   below. --nh-img-darken defaults to 0 (no visual change) until the
   Elementor control sets it. */
.nh-property-listing__media::after,
.nh-property-tile__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, var(--nh-img-darken, 0));
	pointer-events: none;
}

.nh-property-listing__fav,
.nh-property-tile__fav {
	position: absolute;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 0;
	background: transparent !important;
	border: none !important;
	outline: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: #fff !important;
}

/*
 * Both the "lista" (Home) and "grilla" (Propiedades) card styles need an
 * outline (not liked) vs. filled (is-active) heart shape — the shared
 * .nh-icon-corazon elsewhere is a flat PNG mask (single filled silhouette,
 * only recolorable, no outline state), so both use an inline SVG instead.
 */
.nh-property-listing__fav-icon,
.nh-property-tile__fav-icon {
	width: 32px;
	height: 32px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

.nh-property-listing__fav.is-active .nh-property-listing__fav-icon,
.nh-property-tile__fav.is-active .nh-property-tile__fav-icon {
	fill: currentColor;
}

.nh-property-listing__fav:hover,
.nh-property-tile__fav:hover,
.nh-property-listing__fav:focus,
.nh-property-tile__fav:focus {
	background: transparent !important;
	color: #fff !important;
}

.nh-property-listing__fav--top-left,
.nh-property-tile__fav--top-left { top: 20px; left: 20px; }

.nh-property-listing__fav--top-right,
.nh-property-tile__fav--top-right { top: 20px; right: 20px; }

.nh-property-listing__fav--bottom-left,
.nh-property-tile__fav--bottom-left { bottom: 20px; left: 20px; }

.nh-property-listing__fav--bottom-right,
.nh-property-tile__fav--bottom-right { bottom: 20px; right: 20px; }

.nh-property-listing__overlay {
	position: absolute;
	inset: 0;
	width: 48%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 36px;
	color: #fff;
	text-align: left;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

.nh-property-listing__kicker {
	font-size: 14px;
	margin: 0 0 4px;
}

.nh-property-listing__kicker strong {
	font-family: var(--nh-font-heading);
	font-weight: 400;
	font-size: 26px;
	display: block;
}

.nh-property-listing__address {
	font-size: 13px;
	opacity: 0.9;
	margin: 6px 0 18px;
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

.nh-property-listing__price {
	font-family: var(--nh-font-body);
	font-weight: 700;
	font-size: 24px;
	margin: 0 0 6px;
}

.nh-property-listing__specs {
	font-size: 14px;
	margin: 0 0 16px;
}

.nh-property-listing__meta {
	font-size: 12px;
	opacity: 0.75;
	margin: 0;
}

/* ---- NH Property tile (Propiedades archive grid) ---- */

.nh-property-tile {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	height: 340px;
}

.nh-property-tile__media {
	position: absolute;
	inset: 0;
	display: block;
}

.nh-property-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--nh-obj-x, 50%) var(--nh-obj-y, 50%);
	display: block;
}

.nh-property-tile__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 18px;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.2));
	pointer-events: none;
}

.nh-property-tile__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	font-weight: 700;
	gap: 10px;
	margin-bottom: 10px;
}

.nh-property-tile__price {
	font-size: 20px;
}

.nh-property-tile__specs {
	font-size: 13px;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.nh-property-tile__bottom {
	text-align: left;
}

.nh-property-tile__address {
	font-size: 13px;
	margin: 0 0 4px;
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

.nh-property-tile__title {
	font-size: 13px;
	margin: 0;
	opacity: 0.9;
}

.nh-property-tile__meta {
	font-size: 11px;
	opacity: 0.8;
	margin: 2px 0 0;
}

/* ---- NH CTA band ("Necesitas asesoria?") ---- */

.nh-cta-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	background: var(--nh-color-olive);
	color: #fff;
	padding: 32px 60px;
}

.nh-cta-band__title {
	font-family: var(--nh-font-heading);
	font-weight: 400;
	font-size: 26px;
	margin: 0;
}

.nh-cta-band .nh-whatsapp-btn {
	background: #fff;
	color: var(--nh-color-gold-dark);
	border-radius: 999px;
	padding: 14px 30px;
}

@media (max-width: 900px) {
	/* .nh-promo__media/.nh-promo__panel size themselves via flex-basis
	   percentages (flex: 1 1 50%), which only means anything inside a flex
	   container — switching to display:block here (as this used to do)
	   killed the flex context, so the photo (no explicit height of its
	   own) collapsed to 0px and disappeared. Stay flex, just stack
	   vertically, and use "order" to put the panel/text above the photo
	   on mobile regardless of which side the photo is on in desktop. */
	.nh-promo {
		flex-direction: column;
	}

	.nh-promo__panel {
		order: 1;
	}

	.nh-promo__media {
		order: 2;
		flex: 0 0 260px;
	}

	.nh-property-listing__overlay {
		width: 100%;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1));
	}
}

@media (max-width: 900px) {
	.nh-property-grid,
	.nh-property-grid--cols-4,
	.nh-comuna-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.nh-property-grid,
	.nh-property-grid--cols-2,
	.nh-property-grid--cols-4,
	.nh-comuna-grid {
		grid-template-columns: 1fr;
	}

	.nh-search-bar {
		border-radius: 20px;
		flex-direction: column;
		align-items: stretch;
	}

	.nh-search-field--text {
		border-left: none;
		border-top: 1px solid #eee;
	}
}

/* ---- Blog single (single-post.php / Frontend::render_blog_single) ---- */

.nh-blog-single-banner {
	position: relative;
	min-height: 380px;
	background-color: var(--nh-color-olive, #6d6f52);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
}

.nh-blog-single-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 20, 18, 0.8), rgba(20, 20, 18, 0.15));
}

.nh-blog-single-banner__overlay {
	position: relative;
	z-index: 1;
	color: #fff;
	max-width: 900px;
	margin: 0 auto;
	width: 100%;
	padding: 40px 24px;
}

.nh-blog-single-banner__badge {
	display: inline-block;
	background: var(--nh-color-olive);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 18px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.nh-blog-single-banner__title {
	font-family: var(--nh-font-body);
	font-size: 36px;
	font-weight: 700;
	margin: 0 0 10px;
	line-height: 1.2;
}

.nh-blog-single-banner__date {
	font-size: 14px;
	opacity: 0.9;
	margin: 0;
}

.nh-blog-single {
	max-width: 760px;
	margin: 0 auto;
	padding: 48px 24px 64px;
}

.nh-blog-single__content {
	font-family: var(--nh-font-body);
	color: var(--nh-color-text);
	font-size: 16px;
	line-height: 1.7;
}

.nh-blog-single__content p {
	margin: 0 0 20px;
}

.nh-blog-single__content h2,
.nh-blog-single__content h3 {
	font-family: var(--nh-font-body);
	color: var(--nh-color-text);
	margin: 32px 0 14px;
}

.nh-blog-single__back {
	display: inline-block;
	margin-top: 24px;
	color: var(--nh-color-text);
	font-weight: 600;
	text-decoration: none;
}

.nh-blog-single__back:hover {
	color: var(--nh-color-gold-dark);
}

@media (max-width: 600px) {
	.nh-blog-single-banner__title {
		font-size: 26px;
	}
}

/*
 * ---- NH Equipo (Equipo_Grid widget) ----
 * Copies the look of the hand-built "Equipo Nexum" section on /nosotros
 * (photo block + alternating olive/gold info block per person) so the new
 * dynamic version sits underneath it looking like the same design.
 */

.nh-equipo-section {
	text-align: center;
}

.nh-equipo-title {
	font-family: 'GFS Didot', serif;
	font-weight: 300;
	font-style: oblique;
	font-size: 50px;
	letter-spacing: -2.1px;
	color: var(--nh-color-olive, #6A6B59);
	margin: 20px 0 30px;
}

.nh-equipo-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
}

.nh-equipo-member {
	display: flex;
	min-width: 320px;
}

/* flex-grow: 0 on purpose — an incomplete last row (e.g. 5 members at 3
   per row) should keep its cards the same size as the rest, with empty
   space after them, not stretch to fill the row. */
.nh-equipo-grid--cols-1 .nh-equipo-member { flex: 0 1 100%; }
.nh-equipo-grid--cols-2 .nh-equipo-member { flex: 0 1 50%; }
.nh-equipo-grid--cols-3 .nh-equipo-member { flex: 0 1 33.333%; }
.nh-equipo-grid--cols-4 .nh-equipo-member { flex: 0 1 25%; }

.nh-equipo-member__photo {
	width: 50%;
	background-size: cover;
	background-position: center;
	background-color: var(--nh-color-olive, #6A6B59);
}

.nh-equipo-member__info {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 130px 20px;
	color: #fff;
	text-align: center;
}

.nh-equipo-member__info--par {
	background-color: #6A6B59;
}

.nh-equipo-member__info--impar {
	background-color: #C19B6A;
}

.nh-equipo-member__name {
	font-family: var(--nh-font-body);
	font-weight: 300;
	font-size: 23px;
	color: #fff;
	margin: 0;
}

.nh-equipo-member__cargo,
.nh-equipo-member__phone,
.nh-equipo-member__email {
	font-family: var(--nh-font-body);
	font-weight: 300;
	font-size: 20px;
	color: #fff;
	margin: 0;
}

.nh-equipo-member__email {
	font-size: 16px;
}

.nh-equipo-member__phone a,
.nh-equipo-member__email a {
	color: #fff;
	text-decoration: none;
}

@media (max-width: 700px) {
	.nh-equipo-title {
		font-size: 37px;
	}

	/* Always 1 per row on mobile regardless of the "Vendedores por fila"
	   setting — needs the same specificity as .nh-equipo-grid--cols-N
	   above (2 classes) to actually win, since it comes later in the file
	   but a plain single-class rule wouldn't be specific enough. */
	.nh-equipo-grid .nh-equipo-member {
		flex: 1 1 100%;
	}

	.nh-equipo-member__info {
		padding: 80px 20px;
	}

	.nh-equipo-member__name {
		font-size: 18px;
	}

	.nh-equipo-member__cargo,
	.nh-equipo-member__phone {
		font-size: 15px;
	}

	.nh-equipo-member__email {
		font-size: 13px;
	}
}

/*
 * ---- Pagina Contacto ----
 * Banner + tarjeta blanca (formulario / datos) inspirada en el diseno de
 * referencia del cliente, pero con la paleta del sitio (oliva/dorado) en
 * vez del navy del original. El formulario reusa .nh-ficha__contact-form
 * (inputs) y .nh-ficha__contact-submit (boton) — mismas clases que el CF7
 * de la ficha, para no duplicar estilos de campo.
 */

.nh-contacto-banner {
	position: relative;
	min-height: 320px;
	background-color: var(--nh-color-olive, #6d6f52);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nh-contacto-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(20, 20, 18, 0.55), rgba(20, 20, 18, 0.45));
}

.nh-contacto-banner__title {
	position: relative;
	z-index: 1;
	font-family: var(--nh-font-body);
	font-size: 42px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	text-align: center;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.nh-contacto-section {
	background: var(--nh-color-bg);
	padding: 56px 24px;
}

.nh-contacto-card {
	max-width: 1100px;
	margin: 0 auto;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	padding: 40px;
	display: flex;
	gap: 48px;
	flex-wrap: wrap;
}

.nh-contacto-card__form {
	flex: 1 1 60%;
	min-width: 280px;
}

.nh-contacto-card__datos {
	flex: 1 1 28%;
	min-width: 220px;
}

.nh-contacto-card__heading {
	font-family: var(--nh-font-heading);
	font-size: 22px;
	color: var(--nh-color-text);
	margin: 0 0 20px;
}

.nh-contacto-form-row {
	display: flex;
	gap: 12px;
	margin: 0 0 10px;
}

/* CF7 wraps both tags in one shared <p> here — display:contents drops it
   out of the flex layout so the two .wpcf7-form-control-wrap spans become
   the row's actual flex children instead (same fix as .nh-adquisicion-row). */
.nh-contacto-form-row > p {
	display: contents;
}

.nh-contacto-form-row .wpcf7-form-control-wrap {
	flex: 1;
	min-width: 0;
}

.nh-contacto-dato {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--nh-color-text);
	font-size: 15px;
}

.nh-contacto-dato .dashicons {
	color: var(--nh-color-gold-dark);
	font-size: 18px;
}

.nh-contacto-dato a {
	color: var(--nh-color-text);
	text-decoration: none;
}

.nh-contacto-dato a:hover {
	color: var(--nh-color-gold-dark);
}

@media (max-width: 700px) {
	.nh-contacto-banner {
		min-height: 220px;
	}

	.nh-contacto-banner__title {
		font-size: 28px;
	}

	.nh-contacto-card {
		padding: 24px;
		gap: 32px;
	}

	.nh-contacto-form-row {
		flex-direction: column;
		gap: 0;
	}
}

/*
 * ---- "Formulario Adquisicion" (CF7 id 426, /adquisicion) ----
 * Scoped to [data-wpcf7-id="426"] (not a class on the page) so this never
 * bleeds onto any other CF7 form on the site — see the .nh-whatsapp-btn /
 * .nh-ficha__contact-submit lesson about scoping form-specific styles
 * tightly. Card look (translucent white over the page's own background
 * photo) + gold-outlined fields + a radio group styled as a stacked list
 * of buttons (CF7 radios, hidden native circle, gold fill via :has() on
 * the label when checked) to match the client's reference design.
 */

.wpcf7[data-wpcf7-id="426"] {
	max-width: 620px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 6px;
	padding: 48px 56px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.wpcf7[data-wpcf7-id="426"] .wpcf7-form-control-wrap {
	display: block;
}

.wpcf7[data-wpcf7-id="426"] input[type="text"],
.wpcf7[data-wpcf7-id="426"] input[type="email"],
.wpcf7[data-wpcf7-id="426"] input[type="tel"],
.wpcf7[data-wpcf7-id="426"] textarea {
	width: 100%;
	background: transparent;
	border: 1px solid var(--nh-color-gold);
	border-radius: 2px;
	padding: 14px 18px;
	font-family: var(--nh-font-body);
	font-size: 14px;
	color: var(--nh-color-text);
	box-sizing: border-box;
}

.wpcf7[data-wpcf7-id="426"] textarea {
	min-height: 90px;
	resize: vertical;
}

.wpcf7[data-wpcf7-id="426"] p {
	margin: 0 0 14px;
}

.nh-adquisicion-row {
	display: flex;
	gap: 14px;
	margin: 0 0 14px;
}

/* CF7 wraps both tags in ONE shared <p> here (unlike the ficha form's row,
   which got one <p> per tag) — display:contents drops that <p> out of the
   flex layout so its two .wpcf7-form-control-wrap spans become the row's
   actual flex children instead. */
.nh-adquisicion-row > p {
	display: contents;
}

.nh-adquisicion-row .wpcf7-form-control-wrap {
	flex: 1;
	min-width: 0;
}

.nh-adquisicion-radio-label {
	position: relative;
	text-align: center;
	font-family: var(--nh-font-body);
	font-size: 14px;
	color: var(--nh-color-text);
	border: 1px solid var(--nh-color-gold);
	border-radius: 2px;
	padding: 14px 40px;
	margin: 0 0 8px !important;
	cursor: pointer;
	user-select: none;
}

.nh-adquisicion-radio-label::after {
	content: '\25BC';
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--nh-color-gold);
	font-size: 11px;
	transition: transform 0.15s ease;
}

.nh-adquisicion-radio-label.is-open::after {
	transform: translateY(-50%) rotate(180deg);
}

/* Closed by default — Adquisicion_Form.js toggles .is-open on click and
   collapses it again once an option is picked. */
.nh-adquisicion-radio {
	display: none;
}

.nh-adquisicion-radio.is-open {
	display: block;
}

.nh-adquisicion-radio .wpcf7-list-item {
	display: block;
	margin: 0 0 8px;
}

.nh-adquisicion-radio .wpcf7-list-item:last-child {
	margin-bottom: 0;
}

.nh-adquisicion-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.nh-adquisicion-radio label {
	display: block;
	width: 100%;
	text-align: center;
	padding: 12px 18px;
	border: 1px solid var(--nh-color-gold);
	border-radius: 2px;
	color: var(--nh-color-text);
	font-family: var(--nh-font-body);
	font-size: 14px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.nh-adquisicion-radio label:has(input:checked) {
	background: var(--nh-color-gold);
	border-color: var(--nh-color-gold);
	color: #fff;
}

.wpcf7[data-wpcf7-id="426"] .nh-ficha__contact-submit {
	width: 100%;
	padding: 16px;
	font-size: 15px !important;
}

@media (max-width: 600px) {
	.wpcf7[data-wpcf7-id="426"] {
		padding: 32px 24px;
	}

	.nh-adquisicion-row {
		flex-direction: column;
		gap: 0;
	}
}