/* ============================================================
   NiduxHome · Tema público (pastel)
   Fuentes: Fraunces (display) + Plus Jakarta Sans (texto)
   ============================================================ */

:root {
  /* Identidad NiduxHome · Naranja 158C / Cobre 1675C / Gris 877C / Negro Black6C */
  --naranja:    #E66E19;
  --cobre:      #A74615;
  --gris-metal: #A6A8AB;
  --carbon:     #101010;

  --crema:      #f7f6f4;   /* fondo cálido casi blanco */
  --crema-2:    #efeae4;   /* secciones suaves */
  --salvia:     #fbe2cf;   /* tinte naranja claro (botones soft / badges) */
  --salvia-st:  #E66E19;   /* naranja principal (gradientes / foco) */
  --salvia-dk:  #A74615;   /* cobre (texto acento / fin de gradiente) */
  --blush:      #f1ddd0;   /* tinte cálido neutro */
  --blush-st:   #A74615;   /* cobre (badge alquiler) */
  --lavanda:    #ecebe9;   /* gris neutro */
  --cielo:      #e7e8ea;   /* tinte gris metálico */
  --miel:       #f4a259;   /* naranja claro (eyebrow hero / estrellas) */
  --tinta:      #16140f;   /* texto / títulos (carbón) */
  --tinta-2:    #6c6862;   /* texto atenuado */
  --linea:      #e6e1da;
  --sombra:     0 14px 40px rgba(167, 70, 21, .16);
  --sombra-sm:  0 6px 18px rgba(16, 16, 16, .08);
  --radio:      22px;
  --radio-sm:   14px;
}

* { box-sizing: border-box; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--crema);
  color: var(--tinta);
  margin: 0;
}

h1, h2, h3, h4, .display-font {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -.01em;
}

.text-acento { color: var(--naranja) !important; }
.bg-pastel   { background: var(--crema-2); }

/* ---------- Navbar ---------- */
.nh-navbar {
  background: rgba(251, 247, 242, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
.nh-brand {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--tinta);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.nh-brand-logo { height: 54px; width: 54px; display: block; transition:.18s; }
.nh-brand:hover .nh-brand-logo { transform: scale(1.06); }
.nh-brand-name { font-family: 'Fraunces', serif; font-weight: 700; letter-spacing: .5px; color: var(--naranja); }
.nh-brand-name span { color: var(--tinta-2); }
/* En la home (navbar sobre foto oscura) el texto va en claro */
body.pagina-home .nh-brand-name span,
body[class*="pagina-"] .nh-brand-name span { color: #fff; }
.nh-brand span { color: var(--salvia-dk); }
.nh-navbar .nav-link {
  color: var(--tinta-2);
  font-weight: 500;
  margin: 0 .35rem;
}
.nh-navbar .nav-link:hover,
.nh-navbar .nav-link.active { color: var(--salvia-dk); }

/* ---------- Botones ---------- */
.btn-nh {
  background: linear-gradient(135deg, var(--salvia-st), var(--salvia-dk));
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 999px;
  padding: .65rem 1.6rem;
  box-shadow: var(--sombra-sm);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s;
}
.btn-nh:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--sombra); }
.btn-nh-soft {
  background: #fff;
  border: 1.5px solid var(--salvia);
  color: var(--salvia-dk);
  font-weight: 600;
  border-radius: 999px;
  padding: .6rem 1.5rem;
}
.btn-nh-soft:hover { background: var(--salvia); color: var(--tinta); }

/* ---------- Hero ---------- */
.nh-hero {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background-size: cover;
  background-position: center;
  box-shadow: var(--sombra);
}
.nh-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,16,16,.12), rgba(16,16,16,.66)),
              linear-gradient(100deg, rgba(167,70,21,.30), transparent 55%);
}
.nh-hero-inner { position: relative; z-index: 2; padding: 2.5rem; max-width: 640px; }
.nh-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; }

/* --- Hero a pantalla completa (portada, estilo full-bleed) --- */
.nh-hero-full {
  border-radius: 0;                      /* sin esquinas: de borde a borde */
  box-shadow: none;
  min-height: calc(100vh - 76px);        /* casi toda la pantalla (menos la navbar) */
  background-attachment: fixed;          /* leve parallax al hacer scroll */
}
.nh-hero-full::after {
  /* velo más suave: la foto ya trae el logo y luces propias */
  background: linear-gradient(180deg, rgba(16,16,16,.05) 40%, rgba(16,16,16,.62) 100%);
}
.nh-hero-full .nh-hero-inner { padding: 2.5rem 0 7rem; }

/* --- Portada: navbar transparente sobre la foto ---
   (la regla está AL FINAL del archivo para ganar a la del efecto
    cristal "body[class*=pagina-]", que también afecta a la home) */
body.pagina-home .nh-hero-full {
  min-height: 100vh;                     /* pantalla completa */
}
body.pagina-home .nh-hero-full .nh-hero-inner {
  padding: 6rem 0 12rem;                 /* hueco inferior para el buscador que se solapa */
}
/* El buscador sube más para quedar DENTRO de la primera pantalla,
   con Zona, Tipo, Operación y el botón Buscar visibles sin hacer scroll */
body.pagina-home .nh-search-flotante {
  margin-top: -10.5rem;
}

/* Buscador flotando solapado sobre el hero */
.nh-search-flotante {
  position: relative; z-index: 5;
  margin-top: -4.5rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

@media (max-width: 992px) {
  .nh-hero-full { background-attachment: scroll; min-height: 72vh; }
  body.pagina-home .nh-hero-full { min-height: 88vh; }
  body.pagina-home .nh-hero-full .nh-hero-inner { padding: 5rem 0 6rem; }
  body.pagina-home .nh-search-flotante { margin-top: -3rem; }
  .nh-search-flotante { margin-top: -2.5rem; }
}

.nh-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--miel);
  margin-bottom: .8rem;
}

/* ---------- Buscador flotante ---------- */
.nh-search {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.25rem 1.5rem;
  margin-top: -2.6rem;
  position: relative;
  z-index: 5;
}
.nh-search label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tinta-2); margin-bottom: .25rem;
}
.nh-search .form-select, .nh-search .form-control {
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-sm);
  background: var(--crema);
}
.nh-search .form-select:focus, .nh-search .form-control:focus {
  border-color: var(--salvia-st);
  box-shadow: 0 0 0 .2rem rgba(127,174,142,.2);
}

/* ---------- Tarjetas de propiedad ---------- */
.prop-card {
  background: #fff;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-sm);
  transition: transform .2s ease, box-shadow .25s ease;
  height: 100%;
}
.prop-card:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.prop-card .prop-img {
  height: 210px; background-size: cover; background-position: center; position: relative;
}
.prop-badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,.92);
  color: var(--salvia-dk);
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: .3rem .7rem; border-radius: 999px;
}
.prop-badge.alquiler { color: var(--blush-st); }
.prop-body { padding: 1.1rem 1.25rem 1.3rem; }
.prop-title { font-size: 1.15rem; margin-bottom: .15rem; }
.prop-zona { color: var(--tinta-2); font-size: .85rem; }
.prop-precio { font-family: 'Fraunces', serif; font-size: 1.4rem; color: var(--salvia-dk); font-weight: 600; }
.prop-specs { display: flex; gap: 1rem; color: var(--tinta-2); font-size: .82rem; margin-top: .6rem; flex-wrap: wrap; }
.prop-specs span { display: inline-flex; align-items: center; gap: .3rem; }

/* chips de color para variar (decorativo) */
.chip { display:inline-block; padding:.25rem .7rem; border-radius:999px; font-size:.72rem; font-weight:600; }
.chip-salvia { background: var(--salvia); color: var(--salvia-dk); }
.chip-blush  { background: var(--blush);  color: #b56a5c; }
.chip-lavanda{ background: var(--lavanda); color: #6f4fae; }
.chip-cielo  { background: var(--cielo);  color: #3f72a8; }

/* ---------- Secciones ---------- */
.nh-section { padding: 4rem 0; }
.nh-section-soft { background: var(--crema-2); border-radius: var(--radio); }
.section-eyebrow {
  text-transform: uppercase; letter-spacing: .16em; font-size: .72rem;
  font-weight: 700; color: var(--salvia-dk);
}

/* ---------- Bloque de valoración ---------- */
.valora-box {
  background: linear-gradient(135deg, var(--naranja), var(--cobre));
  border-radius: var(--radio);
  padding: 2.5rem;
  color: #fff;
  box-shadow: var(--sombra);
}
.valora-box .fs-3 { font-family: 'Fraunces', serif; }
.card-soft {
  background: #fff; border-radius: var(--radio); border: 1px solid var(--linea);
  box-shadow: var(--sombra-sm); padding: 1.75rem;
}

/* ---------- Testimonios ---------- */
.testi {
  background: #fff; border-radius: var(--radio); padding: 1.5rem;
  border: 1px solid var(--linea); box-shadow: var(--sombra-sm); height: 100%;
}
.testi .stars { color: var(--miel); letter-spacing: .1em; }

/* ---------- Footer ---------- */
.nh-footer { background: var(--tinta); color: #cfcbd6; padding: 3rem 0 2rem; }
.nh-footer a { color: #cfcbd6; text-decoration: none; }
.nh-footer a:hover { color: #fff; }
.nh-footer .brand { font-family: 'Fraunces', serif; color: #fff; font-size: 1.3rem; }

/* ---------- Detalle propiedad ---------- */
.detalle-hero { border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.detalle-precio { font-family: 'Fraunces', serif; font-size: 2.4rem; color: var(--salvia-dk); }

/* ---------- Resultado valoración ---------- */
.val-result {
  background: linear-gradient(135deg, #fff, var(--crema-2));
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 2rem; box-shadow: var(--sombra-sm);
}
.val-precio { font-family: 'Fraunces', serif; font-size: 3rem; color: var(--salvia-dk); line-height: 1; }
.spinner-nh { color: var(--salvia-dk); }

@media (max-width: 768px) {
  .nh-hero { min-height: 360px; }
  .nh-search { margin-top: 1rem; }
}

/* ============================================================
   Valoración · Cuestionario por pasos (captación de leads)
   ============================================================ */
.wiz { background:#fff; border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra-sm); overflow:hidden; }
.wiz-head { background:linear-gradient(135deg, var(--naranja), var(--cobre)); color:#fff; padding:1.4rem 1.75rem; }
.wiz-head h2 { color:#fff; margin:0; font-size:1.4rem; }
.wiz-head p { margin:.2rem 0 0; opacity:.92; font-size:.9rem; }

.wiz-progress { display:flex; gap:.4rem; padding:1rem 1.75rem 0; }
.wiz-progress .seg { flex:1; height:6px; border-radius:99px; background:var(--crema-2); overflow:hidden; }
.wiz-progress .seg.done > i { display:block; height:100%; background:linear-gradient(90deg,var(--naranja),var(--cobre)); }
.wiz-progress .seg > i { display:none; }
.wiz-steplabel { padding:.5rem 1.75rem 0; font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--cobre); }

.wiz-body { padding:1.25rem 1.75rem 1.75rem; }
.wiz-step { display:none; animation:wizfade .35s ease; }
.wiz-step.active { display:block; }
@keyframes wizfade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.wiz-q { font-family:'Fraunces',serif; font-size:1.18rem; margin:1.1rem 0 .7rem; color:var(--tinta); }
.wiz-q:first-child { margin-top:.2rem; }

/* Tarjetas de opción seleccionables */
.opt-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.6rem; }
.opt-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.opt-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.opt {
  position:relative; display:flex; align-items:center; gap:.6rem;
  border:1.5px solid var(--linea); border-radius:var(--radio-sm);
  padding:.85rem 1rem; cursor:pointer; background:#fff; transition:.15s; font-weight:600; font-size:.92rem;
}
.opt:hover { border-color:var(--naranja); background:var(--salvia); }
.opt input { position:absolute; opacity:0; pointer-events:none; }
.opt .ico { font-size:1.3rem; color:var(--cobre); }
.opt.sel { border-color:var(--naranja); background:linear-gradient(135deg,var(--salvia),#fff); box-shadow:0 0 0 3px rgba(230,110,25,.15); }
.opt.sel::after { content:'\2713'; position:absolute; right:.7rem; top:.55rem; color:#fff; background:var(--naranja); width:20px; height:20px; border-radius:50%; font-size:.7rem; display:flex; align-items:center; justify-content:center; font-weight:700; }
.opt small { display:block; font-weight:500; color:var(--tinta-2); font-size:.76rem; }

/* Stepper +/- */
.stepper { display:flex; align-items:center; gap:0; border:1.5px solid var(--linea); border-radius:99px; width:max-content; overflow:hidden; }
.stepper button { border:none; background:var(--crema-2); width:38px; height:38px; font-size:1.1rem; font-weight:700; color:var(--cobre); cursor:pointer; }
.stepper button:hover { background:var(--salvia); }
.stepper input { width:54px; text-align:center; border:none; font-weight:700; font-size:1rem; color:var(--tinta); -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.wiz-foot { display:flex; justify-content:space-between; gap:.6rem; margin-top:1.6rem; }
.wiz-mini { font-size:.78rem; color:var(--tinta-2); }
.lead-trust { display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.8rem; color:var(--tinta-2); margin-top:.6rem; }
.lead-trust span { display:inline-flex; align-items:center; gap:.35rem; }

@media (max-width:560px){ .opt-grid.cols-3{grid-template-columns:1fr 1fr;} }

/* ---------- Hero del catálogo (el fondo lo pone body.pagina-catalogo) ---------- */
.catalogo-hero {
  padding: 4.5rem 0 2.5rem;
}
.catalogo-hero h1 { color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.55); }
.catalogo-hero .section-eyebrow { color: var(--miel); }
.catalogo-hero .text-acento { color: var(--naranja); }
.catalogo-hero-sub {
  color: rgba(255,255,255,.88); max-width: 640px;
  text-shadow: 0 1px 8px rgba(0,0,0,.6); margin-bottom: 0;
}
.catalogo-contenido { position: relative; z-index: 2; padding-top: .5rem; }

/* ---------- Galería detalle ---------- */
.detalle-hero { position:relative; border-radius:16px; overflow:hidden; }

/* Flechas de navegación */
.gal-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:0;
  background:rgba(255,255,255,.85); color:var(--tinta, #2b2b2b);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; cursor:pointer; z-index:5;
  box-shadow:0 2px 10px rgba(0,0,0,.25); transition:.15s;
}
.gal-nav:hover { background:var(--naranja, #E66E19); color:#fff; transform:translateY(-50%) scale(1.06); }
.gal-prev { left:14px; }
.gal-next { right:14px; }

/* Contador de fotos (ej: 3 / 11) */
.gal-contador {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.55); color:#fff; font-size:.8rem;
  padding:.25rem .7rem; border-radius:999px; z-index:5; pointer-events:none;
}

/* Botón ampliar */
.gal-expand {
  position:absolute; top:12px; right:12px;
  width:38px; height:38px; border-radius:10px; border:0;
  background:rgba(0,0,0,.45); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:5; transition:.15s;
}
.gal-expand:hover { background:var(--naranja, #E66E19); }

/* Visor a pantalla completa */
.gal-lightbox {
  position:fixed; inset:0; z-index:2000; display:none;
  align-items:center; justify-content:center;
  background:rgba(10,10,10,.94);
}
.gal-lightbox.abierto { display:flex; }
.gal-lb-img { max-width:92vw; max-height:88vh; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.6); user-select:none; }
.gal-lightbox .gal-nav { background:rgba(255,255,255,.14); color:#fff; }
.gal-lightbox .gal-nav:hover { background:var(--naranja, #E66E19); }
.gal-lb-close {
  position:absolute; top:18px; right:18px;
  width:44px; height:44px; border-radius:50%; border:0;
  background:rgba(255,255,255,.14); color:#fff; font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.gal-lb-close:hover { background:#c0392b; }
.gal-lb-contador { bottom:20px; }

@media (max-width:576px){
  .gal-nav { width:38px; height:38px; font-size:1rem; }
  .gal-prev { left:8px; } .gal-next { right:8px; }
}

.detalle-thumbs .dt-thumb {
  width:84px; height:60px; border-radius:10px; background-size:cover; background-position:center;
  cursor:pointer; border:2px solid transparent; opacity:.7; transition:.15s;
}
.detalle-thumbs .dt-thumb:hover { opacity:1; }
.detalle-thumbs .dt-thumb.active { border-color:var(--naranja); opacity:1; }

/* Valoración · puntos de progreso más visibles + vista previa */
.wiz-progress { display:flex; gap:10px; align-items:center; justify-content:center; margin:.5rem 0 .25rem; }
.wiz-progress .seg { flex:0 0 auto; width:14px; height:14px; border-radius:50%; background:var(--linea, #e6e1da); transition:background .3s, transform .3s; }
.wiz-progress .seg.done { background:var(--naranja, #E66E19); transform:scale(1.05); }
.wiz-progress .seg i { display:none; }
.wiz-preview { text-align:center; font-size:.82rem; color:var(--tinta-2, #6c6862); background:var(--crema, #f6f5f3); border:1px dashed var(--linea, #e6e1da); border-radius:12px; padding:.55rem .8rem; margin:.25rem auto 1rem; max-width:560px; }

/* Registro · medidor de contraseña */
.pass-bar { height:6px; border-radius:99px; background:var(--linea,#e6e1da); overflow:hidden; }
.pass-bar span { display:block; height:100%; width:0; border-radius:99px; transition:width .3s, background .3s; }

/* =====================================================================
   TEMA OSCURO · NiduxHome (negro carbón + naranja/cobre + gris metálico)
   Se aplica al final para sobrescribir el tema claro anterior.
   ===================================================================== */
:root{
  --crema:      #0f0f12;                  /* fondo de página */
  --crema-2:    #17171c;                  /* secciones suaves */
  --tinta:      #ededf1;                  /* texto y títulos */
  --tinta-2:    #a6a8ab;                  /* gris metálico (atenuado) */
  --linea:      rgba(255,255,255,.10);
  --salvia:     rgba(230,110,25,.16);
  --salvia-dk:  #f0894a;                  /* acento cálido legible en negro */
  --blush:      rgba(167,70,21,.20);
  --lavanda:    rgba(255,255,255,.06);
  --cielo:      rgba(255,255,255,.06);
  --sombra:     0 16px 44px rgba(0,0,0,.55);
  --sombra-sm:  0 8px 22px rgba(0,0,0,.45);
  --superficie: #16161b;
  --superficie-2:#1d1d24;
}
body{ background:var(--crema); color:var(--tinta); }

/* Navbar */
.nh-navbar{ background:rgba(15,15,18,.88)!important; border-bottom:1px solid var(--linea); }
.nh-navbar .nav-link{ color:#c9cace; }
.nh-navbar .nav-link:hover, .nh-navbar .nav-link.active{ color:var(--naranja); }

/* Superficies (antes blancas) */
.nh-search, .card-soft, .testi, .wiz, .prop-card, .accordion-item{
  background:var(--superficie)!important; border-color:var(--linea)!important; color:var(--tinta);
}
.nh-search-soft, .nh-section-soft{ background:var(--crema-2)!important; }

/* Botón soft */
.btn-nh-soft{ background:var(--superficie-2)!important; color:var(--salvia-dk)!important; border:1px solid var(--linea); }
.btn-nh-soft:hover{ background:var(--salvia)!important; color:var(--tinta)!important; }

/* Formularios */
.form-control, .form-select,
.nh-search .form-control, .nh-search .form-select{
  background:var(--superficie-2)!important; color:var(--tinta)!important; border-color:var(--linea)!important;
}
.form-control::placeholder{ color:#7d7f84; }
.form-control:focus, .form-select:focus{
  background:var(--superficie-2)!important; color:var(--tinta)!important;
  border-color:var(--naranja)!important; box-shadow:0 0 0 3px rgba(230,110,25,.22)!important;
}
.form-select option, datalist option{ background:#17171c; color:var(--tinta); }
.stepper input{ background:transparent!important; color:var(--tinta)!important; }

/* Wizard · opciones */
.opt{ background:var(--superficie-2)!important; color:var(--tinta); border-color:var(--linea)!important; }
.opt:hover{ border-color:var(--naranja); background:var(--salvia)!important; }
.opt.sel{ border-color:var(--naranja); background:linear-gradient(135deg,var(--salvia),var(--superficie-2))!important; }
.opt small{ color:var(--tinta-2); }

/* Chips (tipo de inmueble / características) */
.chip{ background:rgba(230,110,25,.16)!important; color:var(--salvia-dk)!important; border:1px solid rgba(230,110,25,.22); }
.prop-badge{ background:rgba(20,20,24,.82)!important; }

/* FAQ (acordeón Bootstrap) */
.accordion-button{ background:var(--superficie)!important; color:var(--tinta)!important; }
.accordion-button:not(.collapsed){ background:var(--superficie-2)!important; color:var(--naranja)!important; box-shadow:none; }
.accordion-button::after{ filter:invert(1) grayscale(1) brightness(1.6); }
.accordion-body{ color:var(--tinta-2); }

/* Pestañas (mi-cuenta) */
.nav-pills .nav-link{ color:var(--tinta-2); }
.nav-pills .nav-link.active{ background:linear-gradient(135deg,var(--naranja),var(--cobre)); color:#fff; }

/* Footer (usaba var(--tinta), que ahora es claro): fijar oscuro */
.nh-footer{ background:#0b0b0e!important; color:#a6a8ab; border-top:1px solid var(--linea); }
.nh-footer a{ color:#c9cace; } .nh-footer a:hover{ color:#fff; }
.nh-footer .brand{ color:#fff; }

/* Utilidades */
.text-muted{ color:var(--tinta-2)!important; }
.bg-white, .bg-light{ background:var(--superficie)!important; }
hr{ border-color:var(--linea); opacity:1; }
.border, .border-bottom, .border-top{ border-color:var(--linea)!important; }

/* Sobre mí · foto del asesor + firma con retrato */
.asesor-foto-wrap{ position:relative; }
.asesor-foto{ width:100%; border-radius:20px; object-fit:cover; box-shadow:0 20px 46px rgba(0,0,0,.55); display:block; }
.asesor-firma{
  position:absolute; left:16px; bottom:16px; display:flex; align-items:center; gap:12px;
  background:rgba(15,15,18,.72); border:1px solid rgba(255,255,255,.14);
  border-radius:99px; padding:8px 18px 8px 8px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.asesor-avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--naranja); flex-shrink:0; }
.asesor-firma strong{ display:block; font-size:.9rem; color:#fff; line-height:1.15; }
.asesor-firma span{ font-size:.72rem; color:var(--tinta-2); }
@media (max-width:576px){ .asesor-firma{ left:10px; bottom:10px; padding:6px 14px 6px 6px; } .asesor-avatar{ width:44px; height:44px; } }

/* =========================  SOBRE MÍ (estilo referencia)  ========================= */
.sobre2{ max-width:1140px; margin:0 auto; padding:2.5rem 1.25rem 4.5rem; }
.s2-eyebrow, .s2-cap-eyebrow{ color:#f0b429; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }

.s2-hero{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; margin-bottom:3.2rem; }
.s2-h1{ font-family:'Fraunces',serif; font-weight:600; font-size:3rem; line-height:1.05; color:#fff; margin:.5rem 0 1.1rem; }
.s2-lead{ color:var(--tinta-2); font-size:1.06rem; line-height:1.75; }
.s2-hero-img{ position:relative; }
.s2-hero-img > img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 18%; border-radius:20px; display:block; box-shadow:0 20px 46px rgba(0,0,0,.55); }

.s2-row{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; margin-bottom:2.6rem; }
.s2-media{ position:relative; border-radius:20px; overflow:hidden; box-shadow:0 20px 46px rgba(0,0,0,.5); min-height:340px; }
.s2-media > img{ width:100%; height:100%; min-height:340px; object-fit:cover; display:block; }
.s2-media-cap .s2-cap{ position:absolute; left:0; right:0; bottom:0; padding:1.5rem 1.6rem; background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.15) 70%, transparent); }
.s2-cap-t{ font-family:'Fraunces',serif; font-size:1.7rem; color:#fff; line-height:1.1; margin-top:.15rem; }
.s2-cap-s{ color:rgba(255,255,255,.82); font-size:.9rem; margin-top:.3rem; }

.s2-head{ display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.s2-bar{ width:4px; height:30px; border-radius:4px; background:#f0b429; display:inline-block; }
.s2-body h2{ font-family:'Fraunces',serif; font-weight:600; font-size:2.05rem; color:#fff; margin:0 0 1rem; }
.s2-body p{ color:var(--tinta-2); line-height:1.75; margin-bottom:1rem; }

.s2-stats{ display:flex; gap:3rem; margin-top:1.6rem; flex-wrap:wrap; }
.s2-stat-n{ font-family:'Fraunces',serif; font-size:2.3rem; line-height:1; color:#f0b429; }
.s2-stat-l{ font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--tinta-2); margin-top:.4rem; }

.s2-list{ list-style:none; padding:0; margin:.4rem 0 1.7rem; }
.s2-list li{ display:flex; gap:.9rem; margin-bottom:1.15rem; }
.s2-ico{ color:#f0b429; font-size:1.2rem; flex-shrink:0; margin-top:.1rem; }
.s2-list strong{ display:block; color:var(--tinta); font-size:1rem; margin-bottom:.15rem; }
.s2-list li > div > span{ color:var(--tinta-2); font-size:.9rem; line-height:1.55; }

.btn-oro{ display:inline-block; background:#f0b429; color:#1a1400; font-weight:700; text-decoration:none; padding:.72rem 1.5rem; border-radius:99px; transition:filter .2s, transform .1s; }
.btn-oro:hover{ filter:brightness(1.07); transform:translateY(-1px); color:#1a1400; }

@media (max-width:820px){
  .s2-hero, .s2-row{ grid-template-columns:1fr; gap:1.6rem; }
  .s2-hero-img{ order:-1; max-width:460px; }
  .s2-h1{ font-size:2.2rem; } .s2-body h2{ font-size:1.6rem; }
  .s2-stats{ gap:2rem; }
}

/* ============================================================
   Botón flotante WhatsApp  (+34 614 46 45 81)
   Se pinta desde includes/public_footer.php → visible en
   todas las páginas públicas. Tonos verde pastel acordes
   al tema, con anillo de pulso y etiqueta al pasar el ratón.
   ============================================================ */

.nh-whatsapp {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1040;                 /* sobre navbar (1020), bajo modales y banner cookies (1080) */
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #6fdc95 0%, #2fbd6b 55%, #1fa35a 100%);
  box-shadow: 0 12px 30px rgba(31, 163, 90, .38), var(--sombra-sm);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.nh-whatsapp:hover,
.nh-whatsapp:focus-visible {
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 18px 40px rgba(31, 163, 90, .45), var(--sombra-sm);
  filter: brightness(1.04);
}
.nh-whatsapp:focus-visible {
  outline: 3px solid var(--miel);
  outline-offset: 3px;
}

.nh-whatsapp-ico {
  font-size: 1.85rem;
  line-height: 1;
  position: relative;
  z-index: 2;
}

/* Anillo de pulso suave (pastel) */
.nh-whatsapp-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(111, 220, 149, .55);
  animation: nhWhatsPulse 2.4s ease-out infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes nhWhatsPulse {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}

/* Etiqueta "¿Hablamos?" que aparece al hover / focus */
.nh-whatsapp-tip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #ffffff;
  color: var(--tinta);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  padding: .5rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-sm);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.nh-whatsapp-tip .bi {
  color: #1fa35a;
  vertical-align: -2px;
}
.nh-whatsapp:hover .nh-whatsapp-tip,
.nh-whatsapp:focus-visible .nh-whatsapp-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Móvil: un poco más compacto y sin etiqueta (no hay hover) */
@media (max-width: 576px) {
  .nh-whatsapp {
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
  }
  .nh-whatsapp-ico { font-size: 1.65rem; }
  .nh-whatsapp-tip { display: none; }
}

/* Accesibilidad: respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .nh-whatsapp-pulse { animation: none; opacity: 0; }
  .nh-whatsapp,
  .nh-whatsapp-tip { transition: none; }
}

/* =====================================================================
   FONDO PARALLAX A PÁGINA COMPLETA
   Cada página con clase "pagina-*" define su foto; el efecto cristal
   de tarjetas y navbar es común. (Va al final para ganar al tema oscuro)
   ===================================================================== */
body.pagina-catalogo {
  background:
    linear-gradient(180deg, rgba(10,10,14,.50) 0%, rgba(10,10,14,.62) 60%, rgba(10,10,14,.78) 100%),
    url('../assets/img/catalogo-hero.jpg') center / cover no-repeat fixed;
}
body.pagina-hipoteca {
  background:
    linear-gradient(180deg, rgba(10,10,14,.52) 0%, rgba(10,10,14,.64) 60%, rgba(10,10,14,.80) 100%),
    url('../assets/img/hipoteca-hero.jpg') center 25% / cover no-repeat fixed;
}
body.pagina-valoracion {
  background:
    linear-gradient(180deg, rgba(10,10,14,.52) 0%, rgba(10,10,14,.64) 60%, rgba(10,10,14,.80) 100%),
    url('../assets/img/valoracion-hero.jpg') center / cover no-repeat fixed;
}
body.pagina-contacto {
  /* Foto luminosa: velo algo más suave para conservar su calidez */
  background:
    linear-gradient(180deg, rgba(10,10,14,.48) 0%, rgba(10,10,14,.60) 60%, rgba(10,10,14,.78) 100%),
    url('../assets/img/contacto-hero.jpg') center / cover no-repeat fixed;
}
body.pagina-sobre {
  background:
    linear-gradient(180deg, rgba(10,10,14,.55) 0%, rgba(10,10,14,.68) 60%, rgba(10,10,14,.82) 100%),
    url('../assets/img/sobremi-fondo.jpg') center / cover no-repeat fixed;
}

/* Superficies semitransparentes en cualquier página con fondo parallax:
   se intuye la foto detrás (efecto cristal esmerilado) */
body[class*="pagina-"] .card-soft,
body[class*="pagina-"] .prop-card,
body[class*="pagina-"] .wiz,
body[class*="pagina-"] .nh-search,
body[class*="pagina-"] .testi,
body[class*="pagina-"] .accordion-item {
  background: rgba(20, 20, 26, .82) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(255,255,255,.12) !important;
}
body[class*="pagina-"] .prop-card:hover {
  background: rgba(24, 24, 31, .92) !important;
}

/* Navbar un pelín translúcida sobre la foto */
body[class*="pagina-"] .nh-navbar {
  background: rgba(15,15,18,.78) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Títulos legibles sobre la foto */
body.pagina-hipoteca h1,
body.pagina-valoracion h1,
body.pagina-contacto h1 { color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.55); }
body.pagina-hipoteca .section-eyebrow,
body.pagina-valoracion .section-eyebrow,
body.pagina-contacto .section-eyebrow { color: var(--miel); }

/* Móvil/tablet: los fondos fijos fallan en iOS, se muestra como fondo normal */
@media (max-width: 992px) {
  body.pagina-catalogo {
    background:
      linear-gradient(180deg, rgba(10,10,14,.55) 0%, rgba(10,10,14,.80) 100%),
      url('../assets/img/catalogo-hero.jpg') center top / cover no-repeat scroll;
  }
  body.pagina-hipoteca {
    background:
      linear-gradient(180deg, rgba(10,10,14,.55) 0%, rgba(10,10,14,.82) 100%),
      url('../assets/img/hipoteca-hero.jpg') center top / cover no-repeat scroll;
  }
  body.pagina-valoracion {
    background:
      linear-gradient(180deg, rgba(10,10,14,.55) 0%, rgba(10,10,14,.82) 100%),
      url('../assets/img/valoracion-hero.jpg') center top / cover no-repeat scroll;
  }
  body.pagina-contacto {
    background:
      linear-gradient(180deg, rgba(10,10,14,.52) 0%, rgba(10,10,14,.80) 100%),
      url('../assets/img/contacto-hero.jpg') center top / cover no-repeat scroll;
  }
  body.pagina-sobre {
    background:
      linear-gradient(180deg, rgba(10,10,14,.58) 0%, rgba(10,10,14,.84) 100%),
      url('../assets/img/sobremi-fondo.jpg') center top / cover no-repeat scroll;
  }
}

/* =====================================================================
   PORTADA · Navbar transparente flotando sobre el hero
   IMPORTANTE: este bloque debe ser lo ÚLTIMO del archivo, porque
   "body[class*=pagina-] .nh-navbar" (efecto cristal) también coincide
   con pagina-home y tiene la misma especificidad: gana el último.
   ===================================================================== */
body.pagina-home .nh-navbar {
  position: absolute !important;         /* anula el sticky: la foto llega arriba del todo */
  top: 0; left: 0; right: 0; z-index: 100;
  background: linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,0) 100%) !important;
  border-bottom: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---------- Redes sociales del footer ---------- */
.nh-redes { display:flex; gap:.6rem; margin-top:.6rem; }
.nh-redes a {
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.10); color:#fff; font-size:1.05rem;
  text-decoration:none; transition:.18s;
}
.nh-redes a:hover {
  background:var(--naranja); color:#fff;
  transform:translateY(-2px); box-shadow:0 6px 16px rgba(230,110,25,.35);
}

/* Enlaces de la ficha de contacto (teléfono, email) */
.enlace-contacto { color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:.15s; }
.enlace-contacto:hover { color:var(--naranja); border-bottom-color:var(--naranja); }

/* =====================================================================
   FOOTER SIEMPRE PEGADO ABAJO (sticky footer)
   Evita que se vea la foto de fondo por debajo del footer cuando la
   página es corta, y elimina la franja del margen superior.
   ===================================================================== */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > * { flex-shrink: 0; }   /* nada se comprime (hero, secciones…) */
body > .nh-footer { margin-top: auto !important; }

/* =====================================================================
   AJUSTES PARA MÓVIL (≤768px)
   La foto de portada lleva el logo incrustado y en pantalla vertical
   quedaba enorme y cortado: usamos un recorte vertical de la casa.
   ===================================================================== */
@media (max-width: 768px) {

  /* Portada: imagen vertical (sin el logo incrustado) */
  .nh-hero-full {
    background-image: url('../assets/img/home-hero-movil.jpg') !important;
    background-position: center !important;
    background-size: cover !important;
  }
  body.pagina-home .nh-hero-full { min-height: 82vh; }
  body.pagina-home .nh-hero-full .nh-hero-inner { padding: 4.5rem 0 5rem; }

  /* Velo un poco más marcado para que el texto se lea sobre la casa */
  .nh-hero-full::after {
    background: linear-gradient(180deg, rgba(16,16,16,.35) 0%, rgba(16,16,16,.30) 45%, rgba(16,16,16,.80) 100%);
  }

  /* Titulares más contenidos */
  .nh-hero h1 { font-size: 2rem; line-height: 1.12; }
  .nh-hero .lead { font-size: .98rem; }
  .nh-eyebrow { font-size: .68rem; letter-spacing: .12em; }

  /* Botones del hero: a lo ancho y bien separados */
  .nh-hero-inner .d-flex.gap-2 { flex-direction: column; align-items: stretch; }
  .nh-hero-inner .btn { width: 100%; justify-content: center; }

  /* Buscador: sin solaparse tanto */
  body.pagina-home .nh-search-flotante { margin-top: -1.5rem; }
  .nh-search-flotante { padding: 1.1rem; }

  /* Cabeceras de secciones internas */
  .catalogo-hero { padding: 3rem 0 2rem; }
  .catalogo-hero h1, h1 { font-size: 1.95rem; line-height: 1.15; }
  .catalogo-hero-sub { font-size: .95rem; }

  /* Footer: columnas con aire entre ellas */
  .nh-footer .row > [class*="col-"] { margin-bottom: 1.5rem; }
  .nh-redes { justify-content: flex-start; }
}

/* =====================================================================
   AUTOCOMPLETADO DE UBICACIÓN (filtro de municipios)
   ===================================================================== */
.ac-campo { position: relative; }
.ac-wrap  { position: relative; }

/* Botón para borrar lo escrito */
.ac-limpiar {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: transparent; color: var(--tinta-2);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.ac-campo input:not(:placeholder-shown) ~ .ac-limpiar { display: flex; }
.ac-limpiar:hover { background: rgba(255,255,255,.12); color: var(--naranja); }

/* Desplegable de sugerencias */
.ac-lista {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 1050;
  max-height: 290px; overflow-y: auto;
  background: var(--superficie, #16161b);
  border: 1px solid var(--linea);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  padding: .35rem;
}
.ac-lista.abierta { display: block; }

.ac-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .7rem;
  border-radius: 8px;
  cursor: pointer;
  color: var(--tinta);
  font-size: .93rem;
  transition: background .12s;
}
.ac-item i { color: var(--naranja); font-size: .9rem; flex: 0 0 auto; }
.ac-item:hover, .ac-item.activo { background: rgba(230,110,25,.16); }
.ac-item mark {
  background: transparent; color: var(--naranja);
  font-weight: 700; padding: 0;
}

/* Barra de desplazamiento discreta */
.ac-lista::-webkit-scrollbar { width: 8px; }
.ac-lista::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; }