/* ============================================================================
   NOVUS HABITAT — BASE CSS
   Variables de marca, reset, utilidades y estilos del nav/footer/FAB
   compartidos por todas las páginas del tema.
============================================================================ */

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --nh-amber: #E19B3B;
  --nh-terracotta: #A85A1C;
  --nh-terracotta-dark: #8C4915;
  --nh-ink: #211B16;
  --nh-sand: #F3ECE1;
  --nh-teal: #2B4B4E;
  --nh-white: #FFFFFF;
  --nh-serif: 'Fraunces', Georgia, serif;
  --nh-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --nh-shell-gutter: 32px;

  /* alias vf- para las páginas mediafirst */
  --vf-amber: #E19B3B;
  --vf-terracotta: #A85A1C;
  --vf-terracotta-dark: #8C4915;
  --vf-ink: #211B16;
  --vf-sand: #F3ECE1;
  --vf-teal: #2B4B4E;
  --vf-white: #FFFFFF;
  --vf-serif: 'Fraunces', Georgia, serif;
  --vf-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --vf-gutter: 12px;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  font-family: var(--nh-sans);
  color: var(--nh-ink);
  background: var(--nh-white);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }

/* ── Contenedor centrado ────────────────────────────────────────────────── */
.nh-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--nh-shell-gutter);
}

/* ── Full-bleed ─────────────────────────────────────────────────────────── */
.nh-full-bleed, .vf-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* 100vw incluye lo que ocupe la barra de scroll (donde el navegador la
   reserve), así que el truco de arriba puede quedar unos px más ancho que
   el viewport real y generar scroll lateral — esto ya se sabía y se había
   arreglado solo para el hero de cada página (ver los comentarios en
   front-page.php, page-about.php, page-contact.php), pero esta regla base
   —que usa por ejemplo el <footer>, sitewide— se quedó sin el mismo
   arreglo. En móvil no hace falta el truco de 100vw para nada: ya es
   edge-to-edge de por sí con width:100%. */
@media(max-width:768px){
  .nh-full-bleed, .vf-bleed {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ── Botones compartidos ─────────────────────────────────────────────────── */
.nh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: 99px; font-size: 14px; font-weight: 600;
  border: none; cursor: pointer; transition: opacity .2s ease, transform .2s ease;
  text-decoration: none;
}
.nh-btn:hover { opacity: .88; transform: translateY(-1px); }
.nh-btn--terracotta { background: var(--nh-terracotta); color: #fff; }
.nh-btn--outline    { background: transparent; border: 1.5px solid currentColor; }

/* ============================================================================
   NAV
============================================================================ */
.nh-nav-sticky {
  position: fixed; top: 16px;
  left: var(--nh-shell-gutter); right: var(--nh-shell-gutter);
  z-index: 1000;
}
.nh-nav {
  background: var(--nh-ink);
  border-radius: 16px;
  transition: box-shadow .3s ease;
}
.nh-nav.has-shadow { box-shadow: 0 4px 24px rgba(33,27,22,.28); }
.nh-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; gap: 16px;
  max-width: none; /* el contenido del nav se extiende a todo el ancho de la barra */
}
.nh-badge-logo { display: flex; align-items: center; gap: 10px; }
.nh-badge-logo img { border-radius: 50%; }
.nh-menu { display: flex; gap: 28px; }
.nh-menu a {
  color: #f3ece1; font-size: 13px; font-weight: 500;
  font-style: italic; font-family: var(--nh-serif);
  text-transform: uppercase; letter-spacing: .06em;
}
.nh-menu a:hover { color: var(--nh-amber); }
.nh-nav__actions { display: flex; align-items: center; gap: 12px; }
.nh-saved-link {
  position: relative; display: flex; align-items: center; justify-content: center;
  color: #f3ece1; transition: color .2s ease;
}
.nh-saved-link:hover { color: var(--nh-amber, #E19B3B); }
.nh-saved-badge {
  position: absolute; top: -6px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--nh-amber, #E19B3B); color: #211B16;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.nh-lang {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  color: #f3ece1; font-size: 13px;
}
.nh-flag { display: inline-flex; flex-shrink: 0; border-radius: 50%; overflow: hidden; }
.nh-flag svg { display: block; width: 20px; height: 20px; border-radius: 50%; }
.nh-lang-wrap { position: relative; }
.nh-lang-dropdown {
  position: absolute; top: calc(100% + 12px); right: 0;
  background: var(--nh-ink); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 6px; min-width: 150px;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
  display: none; flex-direction: column; z-index: 60;
}
.nh-lang-dropdown.is-open { display: flex; }
.nh-lang-dropdown a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 6px;
  color: #f3ece1; font-size: 13.5px; text-decoration: none;
  transition: background .15s ease;
}
.nh-lang-dropdown a:hover { background: rgba(255,255,255,.06); }
.nh-lang-dropdown a.is-active { color: var(--nh-amber, #E19B3B); font-weight: 600; }
.nh-lang-mobile-list { display: flex; flex-direction: column; gap: 2px; margin-top: 20px; }
.nh-lang-mobile-list .nh-lang--mobile {
  display: flex; align-items: center; gap: 10px;
  color: #cfc6b8; font-family: var(--nh-serif); font-style: italic;
  font-size: 14px; font-weight: 500; padding: 8px 0; text-decoration: none;
  transition: color .2s ease;
}
.nh-lang-mobile-list .nh-lang--mobile.is-active,
.nh-lang-mobile-list .nh-lang--mobile:hover { color: var(--nh-amber, #E19B3B); }
.nh-burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nh-burger span { display: block; width: 22px; height: 2px; background: #f3ece1; border-radius: 2px; }

/* ── Menú móvil ─────────────────────────────────────────────────────────── */
.nh-mobile-menu-backdrop {
  position: fixed; inset: 0; background: rgba(33,27,22,.55);
  /* Por encima de .nh-nav-sticky (z-index:1000) — si no, el nav se
     queda visible por delante del fondo oscuro y del propio menú. */
  z-index: 1001; opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.nh-mobile-menu-backdrop.is-open { opacity: 1; pointer-events: auto; }
.nh-mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 90vw);
  background: var(--nh-ink); z-index: 1002;
  display: flex; flex-direction: column; padding: 20px 24px 32px;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s;
  overflow-y: auto;
  /* visibility:hidden, no solo el transform: en Chrome (confirmado en
     producción, escritorio y móvil) y en iOS Safari, un elemento fixed
     empujado fuera de la pantalla con translateX(100%) sigue contando
     para el ancho "scrollable" del documento — eso es justo lo que
     generaba el scroll lateral en móvil, ya que overflow-x:hidden en
     html/body no basta para evitarlo en ese caso concreto. */
  visibility: hidden;
}
.nh-mobile-menu.is-open { transform: translateX(0); visibility: visible; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.nh-mobile-menu__top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 32px;
}
.nh-mobile-menu__close {
  background: none; border: none; cursor: pointer;
  color: #f3ece1; padding: 4px;
}
.nh-mobile-menu__links { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nh-mobile-menu__links a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid #3a322b;
  color: #f3ece1; font-family: var(--nh-serif); font-style: italic;
  font-size: 18px; font-weight: 500;
  transition: color .2s ease, padding-left .2s ease;
}
.nh-mobile-menu__links a:hover { color: var(--nh-amber); padding-left: 10px; }
.nh-mobile-menu__cta { margin: 24px 0; }
.nh-mobile-menu__cta a { width: 100%; }
.nh-mobile-menu__foot { margin-top: auto; }
.nh-lang--mobile {
  width: 100%; justify-content: flex-start; gap: 10px;
  color: #cfc6b8; font-family: var(--nh-serif); font-style: italic;
  font-size: 14px; font-weight: 500; padding: 0; margin-top: 20px;
}
.nh-social { display: flex; gap: 16px; margin-bottom: 20px; }
.nh-social a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #3a322b; color: #cfc6b8;
  transition: color .2s ease, border-color .2s ease;
}
.nh-social a:hover { color: var(--nh-amber); border-color: var(--nh-amber); }

/* ============================================================================
   FOOTER
============================================================================ */
.nh-footer {
  background: var(--nh-ink); color: #cfc6b8; padding: 56px 0 24px;
}
.nh-footer h3 {
  color: #fff; font-size: 13px; text-transform: uppercase;
  letter-spacing: .08em; margin: 0 0 16px;
}
.nh-footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px;
}
.nh-footer ul li { margin-bottom: 10px; font-size: 14px; }
.nh-footer a:hover { color: var(--nh-amber); }
.nh-logo--footer { display: flex; align-items: center; gap: 10px; }
.nh-logo--footer img { border-radius: 50%; }
.nh-logo--footer span {
  font-family: var(--nh-serif); font-weight: 600; color: #fff; font-size: 17px;
}
.nh-footer__desc { font-size: 13.5px; margin-top: 14px; max-width: 280px; }
.nh-footer .nh-social a { border-color: #3a322b; color: #cfc6b8; }
.nh-footer__bottom {
  display: flex; justify-content: space-between; margin-top: 44px;
  padding-top: 20px; border-top: 1px solid #3a322b; font-size: 12.5px;
  flex-wrap: wrap; gap: 10px;
}
.nh-footer__bottom a:hover { color: var(--nh-amber); }
/* Copyright y números de registro apilados como un solo bloque, para que el
   space-between del contenedor siga repartiendo entre dos elementos y no
   entre tres. */
.nh-footer__legal { display: flex; flex-direction: column; gap: 10px; }

/* Distintivos de registro (RAIICV / API). Sellos de HTML+CSS con icono SVG
   en vez de imágenes: el número sigue siendo texto real y se ve nítido en
   cualquier densidad de pantalla. */
.nh-footer__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.nh-footer__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid #3a322b; border-radius: 8px;
  background: rgba(255,255,255,.03);
  color: var(--nh-amber);
  line-height: 1;
}
.nh-footer__badge svg { flex-shrink: 0; }
.nh-footer__badge-txt { display: flex; flex-direction: column; gap: 2px; }
.nh-footer__badge-label {
  font-size: 9px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nh-amber);
}
.nh-footer__badge-num {
  font-size: 12.5px; font-weight: 700; color: #e9e2d4;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   FAB — Botón flotante de contacto
============================================================================ */
.nh-fab-wrap {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.nh-fab {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--nh-terracotta); color: #fff;
  border: none; cursor: pointer; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 4px 16px rgba(168,90,28,.38);
  transition: background .2s ease, transform .2s ease;
}
.nh-fab:hover { background: var(--nh-terracotta-dark); transform: translateY(-2px); }
.nh-fab__icon-close { display: none; }
.nh-fab[aria-expanded="true"] .nh-fab__icon-open { display: none; }
.nh-fab[aria-expanded="true"] .nh-fab__icon-close { display: block; }
.nh-fab-menu {
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateY(8px) scale(.96);
  pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.nh-fab-menu.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.nh-fab-item {
  display: flex; align-items: center; gap: 10px;
  background: #fff; color: var(--nh-ink);
  padding: 10px 16px 10px 10px; border-radius: 99px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 2px 12px rgba(33,27,22,.18);
  transition: transform .15s ease;
}
.nh-fab-item:hover { transform: translateX(-3px); }
.nh-fab-item__icon {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nh-fab-item--call .nh-fab-item__icon { background: var(--nh-terracotta); color: #fff; }
.nh-fab-item--whatsapp .nh-fab-item__icon { background: transparent; }

/* ============================================================================
   RESPONSIVE
============================================================================ */
@media (max-width: 960px) {
  :root { --nh-shell-gutter: 20px; }
  .nh-menu { display: none; }
  .nh-burger { display: flex; }
  .nh-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}
@media (max-width: 640px) {
  :root { --nh-shell-gutter: 14px; }
  .nh-footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  :root { --nh-shell-gutter: 10px; }
}

/* ── Banner de zona y mini banner de promoción ────────────────────────────
   Dos componentes con EL MISMO diseño (foto de fondo con degradado y texto
   encima, todo clicable) y exactamente la misma estructura de marcado:
   __img > img, y __body con una etiqueta, un título y un CTA. Solo cambia
   el nombre de la etiqueta pequeña — __region en el de zona, __label en el
   de promoción — y a dónde enlaza cada uno:
     - .nh-zone-banner        → nh_render_zone_banner()      → single-zone.php
     - .nh-promo-mini-banner  → nh_render_promotion_banner() → taxonomy-property_promotion.php

   Van juntos en selectores agrupados A PROPÓSITO, no duplicados. El de
   promoción se añadió después copiando el marcado del de zona pero SIN
   copiar su CSS, así que salía completamente sin estilo en la barra lateral
   de la ficha de propiedad (foto suelta y texto plano debajo) — el único
   estilo que tenía era un margin-bottom en single-property.php. Compartiendo
   los selectores es imposible que uno vuelva a quedarse atrás del otro.
   Usados en: archive-property.php, single-property.php, page-saved-properties.php. */
.nh-zone-banner,
.nh-promo-mini-banner {
  display: block; position: relative; border-radius: 20px; overflow: hidden;
  text-decoration: none; color: #fff; min-height: 220px;
  background: var(--nh-ink);
}
.nh-zone-banner__img,
.nh-promo-mini-banner__img { position: absolute; inset: 0; }
.nh-zone-banner__img img,
.nh-promo-mini-banner__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.nh-zone-banner:hover .nh-zone-banner__img img,
.nh-promo-mini-banner:hover .nh-promo-mini-banner__img img { transform: scale(1.05); }
.nh-zone-banner::after,
.nh-promo-mini-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(33,27,22,.05) 0%, rgba(33,27,22,.8) 100%);
}
.nh-zone-banner__body,
.nh-promo-mini-banner__body {
  position: relative; z-index: 2; min-height: 220px;
  padding: 24px 26px; display: flex; flex-direction: column; justify-content: flex-end;
}
.nh-zone-banner__region,
.nh-promo-mini-banner__label {
  display: inline-block; align-self: flex-start;
  background: rgba(255,255,255,.15); backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 20px;
  margin-bottom: 12px;
}
.nh-zone-banner__title,
.nh-promo-mini-banner__title {
  font-family: var(--nh-serif); font-weight: 600; font-size: 24px;
  margin: 0 0 8px; line-height: 1.2;
}
.nh-zone-banner__cta,
.nh-promo-mini-banner__cta {
  font-size: 13px; font-weight: 600; color: var(--nh-amber);
}

/* ── Aviso de privacidad + consentimiento en formularios (RGPD) ───────────
   Compartido por todos los formularios que piden datos de contacto —
   ver nh_render_form_consent_fields() en functions.php. Checkbox propio
   (no el nativo del navegador) para que combine con el resto del diseño
   en vez de verse como un elemento de formulario sin estilizar. */
.nh-form-privacy-notice {
  font-size: 12.5px; line-height: 1.5; color: #8a8378;
  margin: 14px 0 10px; padding-top: 12px;
  border-top: 1px solid rgba(33,27,22,.08);
}
/* Honeypot anti-spam: oculto para personas, pero NO con display:none
   (algunos bots simples lo comprueban y lo evitan). Fuera de la pantalla
   y fuera del orden de tabulación/lectores de pantalla. */
.nh-hp-field {
  position: absolute !important; left: -9999px !important; top: -9999px !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
  opacity: 0 !important; pointer-events: none !important;
}
.nh-form-consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.5; color: #4a443c;
  margin: 0; cursor: pointer;
}
.nh-form-consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  flex-shrink: 0; margin: 1px 0 0;
  width: 18px; height: 18px;
  border: 1.5px solid rgba(33,27,22,.3);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.nh-form-consent input[type="checkbox"]:hover {
  border-color: var(--nh-terracotta);
}
.nh-form-consent input[type="checkbox"]:checked {
  background: var(--nh-terracotta);
  border-color: var(--nh-terracotta);
}
.nh-form-consent input[type="checkbox"]:checked::after {
  content: '';
  position: absolute; left: 6px; top: 2px;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.nh-form-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--nh-amber); outline-offset: 2px;
}
.nh-form-consent a { color: var(--nh-terracotta); text-decoration: underline; font-weight: 600; }
.nh-form-consent--optional { color: #8a8378; }
.nh-form-unsubscribe-note {
  font-size: 11.5px; color: #a39c8f; margin: 2px 0 12px 28px;
}
.nh-form-unsubscribe-note a { color: inherit; text-decoration: underline; }

/* Sobre fondo oscuro (formulario "Sell with us", CTA final de Home, About,
   newsletter) — nh-form-consent hereda color oscuro por defecto (pensado
   para fondo claro), así que en cualquier formulario sobre fondo oscuro
   HAY que añadirlo aquí o el texto queda casi invisible. */
.vf-sell__form .nh-form-privacy-notice,
.vf-cta__form .nh-form-privacy-notice,
.nha-cta__form .nh-form-privacy-notice,
.vf-newsletter__form .nh-form-privacy-notice {
  color: rgba(255,255,255,.55);
  border-top-color: rgba(255,255,255,.15);
}
.vf-sell__form .nh-form-consent,
.vf-cta__form .nh-form-consent,
.nha-cta__form .nh-form-consent,
.vf-newsletter__form .nh-form-consent {
  color: rgba(255,255,255,.75);
}
.vf-sell__form .nh-form-consent input[type="checkbox"],
.vf-cta__form .nh-form-consent input[type="checkbox"],
.nha-cta__form .nh-form-consent input[type="checkbox"],
.vf-newsletter__form .nh-form-consent input[type="checkbox"] {
  border-color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.08);
}
.vf-sell__form .nh-form-consent input[type="checkbox"]:hover,
.vf-cta__form .nh-form-consent input[type="checkbox"]:hover,
.nha-cta__form .nh-form-consent input[type="checkbox"]:hover,
.vf-newsletter__form .nh-form-consent input[type="checkbox"]:hover {
  border-color: var(--nh-amber);
}
.vf-sell__form .nh-form-consent input[type="checkbox"]:checked,
.vf-cta__form .nh-form-consent input[type="checkbox"]:checked,
.nha-cta__form .nh-form-consent input[type="checkbox"]:checked,
.vf-newsletter__form .nh-form-consent input[type="checkbox"]:checked {
  background: var(--nh-amber);
  border-color: var(--nh-amber);
}
.vf-sell__form .nh-form-consent input[type="checkbox"]:checked::after,
.vf-cta__form .nh-form-consent input[type="checkbox"]:checked::after,
.nha-cta__form .nh-form-consent input[type="checkbox"]:checked::after,
.vf-newsletter__form .nh-form-consent input[type="checkbox"]:checked::after {
  border-color: var(--nh-ink);
}
.vf-sell__form .nh-form-consent a,
.vf-cta__form .nh-form-consent a,
.nha-cta__form .nh-form-consent a,
.vf-newsletter__form .nh-form-consent a {
  color: var(--nh-amber);
}
.vf-sell__form .nh-form-consent--optional,
.vf-cta__form .nh-form-consent--optional,
.nha-cta__form .nh-form-consent--optional,
.vf-newsletter__form .nh-form-consent--optional {
  color: rgba(255,255,255,.5);
}
.vf-sell__form .nh-form-unsubscribe-note,
.vf-cta__form .nh-form-unsubscribe-note,
.nha-cta__form .nh-form-unsubscribe-note,
.vf-newsletter__form .nh-form-unsubscribe-note {
  color: rgba(255,255,255,.4);
}