/* Marca compartida — Manzus, portal inmobiliario de RD (plan piloto).
   Manzus ("mán-sus"): del latín medieval mansus, la morada donde uno se queda.
   Identidad visual: guía oficial de Manzus (logo, símbolo y favicon en img/marca/).
   Tipografía: Plus Jakarta Sans (titulares, texto e interfaz).
   Paleta: 60% neutros · 30% azules · 10% terracota (solo acción principal). */
:root{
  --color-primary:#1E3A5F;      /* azul marino: logo, encabezados, barra superior */
  --color-interactive:#1F6FB2;  /* azul medio: enlaces, botones secundarios, pines */
  --color-accent:#B4531F;       /* terracota: acción principal */
  --color-success:#2E7D5B;      /* verde: verificado / buenas noticias */
  --color-text:#1F2933;
  --color-text-muted:#5B6573;
  --color-bg:#F7F8FA;
  --color-surface:#FFFFFF;

  /* derivados (tintes de los mismos tonos) */
  --line:#E3E7EC;
  --primary-tint:#E9EEF4;
  --interactive-tint:#E8F1F9;
  --success-tint:#E6F2EC;
  --primary-hover:#16304F;
  --interactive-hover:#185C94;
  --accent-hover:#9A4519;

  --font-display:"Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-ui:"Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --radius:12px;
  --shadow:0 1px 2px rgba(30,58,95,.06), 0 6px 20px rgba(30,58,95,.06);
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-ui); font-size:15px; line-height:1.5;
  font-variant-numeric:tabular-nums lining-nums;
}
h1,h2,h3{font-family:var(--font-display); font-weight:700; color:var(--color-primary); margin:0; text-wrap:balance; letter-spacing:-.015em}
a{color:var(--color-interactive)}
button, select, input, textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--color-interactive); outline-offset:2px}

/* ---------- Barra superior ---------- */
:root{--topbar-h:60px}
.topbar{background:var(--color-primary); color:#fff}
.topbar-inner{
  max-width:1280px; margin:0 auto; padding:0 20px; height:var(--topbar-h);
  display:flex; align-items:center; gap:16px; justify-content:space-between;
}
@media (max-width:520px){ .topbar-inner{padding:0 16px} }
.topbar-right a.topbar-cta{
  opacity:1; font-weight:600; padding:7px 13px; border-radius:8px;
  border:1px solid rgba(255,255,255,.55); white-space:nowrap;
}
.topbar-right a.topbar-cta:hover{background:#fff; color:var(--color-primary); text-decoration:none}
.topbar-right a.topbar-cta[aria-current="page"]{background:#fff; color:var(--color-primary)}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none}
.brand svg{flex:0 0 auto}
/* Logo oficial (versión en negativo sobre la barra azul marino) */
.brand-logo{display:block; height:32px; width:auto}
@media (max-width:560px){ .brand-logo{height:24px} }
.brand-name{font-family:var(--font-display); font-size:1.12rem; font-weight:700; line-height:1; letter-spacing:.01em}
.brand-sub{display:block; font-family:var(--font-ui); font-size:.6rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; opacity:.75; margin-top:3px}
.topbar-right{display:flex; align-items:center; gap:14px; font-size:.8rem}
.topbar-right a{color:#fff; opacity:.85; text-decoration:none}
.topbar-right a:hover{opacity:1; text-decoration:underline}
.brand-sub{white-space:nowrap}
.topbar-right{min-width:0}
@media (max-width:980px){ .topbar-right a:not(.topbar-cta){display:none} }
@media (max-width:760px){ .topbar-right .pilot-pill{display:none} }
@media (max-width:560px){
  .topbar-right a{display:none}
  .topbar-right a.topbar-cta{display:inline-block; padding:6px 10px; font-size:.74rem}
  .topbar-right .pilot-pill{display:none}
}
.pilot-pill{
  font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.35);
  color:rgba(255,255,255,.9); white-space:nowrap; cursor:help;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:.88rem; padding:10px 18px; border-radius:10px;
  border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .15s, border-color .15s;
}
.btn-primary{background:var(--color-accent); color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{background:var(--color-surface); color:var(--color-interactive); border-color:var(--color-interactive)}
.btn-secondary:hover, .btn-secondary[aria-pressed="true"]{background:var(--color-interactive); color:#fff}
.btn-ghost{background:transparent; color:var(--color-text-muted); border-color:var(--line)}
.btn-ghost:hover{color:var(--color-primary); border-color:var(--color-primary)}
.btn-sm{font-size:.78rem; padding:6px 12px; border-radius:8px}
.btn:disabled{opacity:.45; cursor:default}

.chip{
  font-size:.8rem; font-weight:600; padding:6px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--color-surface); color:var(--color-text); cursor:pointer;
}
.chip:hover{border-color:var(--color-interactive)}
.chip[aria-pressed="true"]{background:var(--color-primary); border-color:var(--color-primary); color:#fff}
.select{
  font-size:.8rem; font-weight:600; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--color-surface); color:var(--color-text); cursor:pointer;
}

.badge-verified{
  display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600;
  color:var(--color-success); background:var(--success-tint); padding:3px 9px; border-radius:999px;
}
.eyebrow{font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--color-interactive)}

/* ---------- Selector de idioma (cabecera) ---------- */
.lang-select{
  font-size:.76rem; font-weight:600; color:#fff; cursor:pointer;
  background:rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") right 6px center/14px no-repeat;
  border:1px solid rgba(255,255,255,.35); border-radius:8px; padding:6px 24px 6px 9px;
  -webkit-appearance:none; appearance:none;
}
.lang-select option{color:var(--color-text); background:#fff}
@media (max-width:560px){ .lang-select{padding:5px 22px 5px 7px; font-size:.72rem; max-width:108px} }

/* ---------- Botón WhatsApp (acción principal de la ficha: terracota) ---------- */
.btn-wa{background:var(--color-accent); color:#fff}
.btn-wa:hover{background:var(--accent-hover)}
.btn-wa svg{width:16px; height:16px; fill:currentColor; flex:0 0 auto}
.wa-note{font-size:.76rem; color:var(--color-text-muted); background:var(--color-bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px}

/* ---------- Calculadora de cuota ---------- */
.calc-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.calc-grid .calc-bank{grid-column:1/-1}
@media (max-width:560px){ .calc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.calc-grid label{display:flex; flex-direction:column; gap:4px; font-size:.7rem; font-weight:700; letter-spacing:.04em; color:var(--color-text-muted)}
.calc-grid input, .calc-grid select{
  width:100%; font-size:.88rem; font-weight:600; color:var(--color-text); padding:8px 10px;
  border:1px solid #D4DAE2; border-radius:8px; background:var(--color-surface);
}
.calc-grid input:focus, .calc-grid select:focus{outline:none; border-color:var(--color-interactive); box-shadow:0 0 0 3px var(--interactive-tint)}
.calc-grid .sfx{position:relative; display:block}
.calc-grid .sfx input{padding-right:26px}
.calc-grid .sfx i{position:absolute; right:10px; top:50%; transform:translateY(-50%); font-style:normal; color:var(--color-text-muted); font-size:.82rem}
.calc-out{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-top:12px;
  background:var(--primary-tint); border-radius:10px; padding:12px 14px;
}
.calc-out span{font-size:.78rem; font-weight:600; color:var(--color-primary)}
.calc-out b{font-family:var(--font-display); font-size:1.35rem; color:var(--color-primary)}
.calc-out small{flex-basis:100%; font-size:.74rem; color:var(--color-text-muted)}
.calc-warn{margin-top:8px; font-size:.76rem; color:var(--color-primary); background:var(--interactive-tint); border-radius:8px; padding:7px 10px}
.calc-disc{margin:10px 0 0; font-size:.74rem; line-height:1.5; color:var(--color-text-muted)}
.calc-disc b{color:var(--color-primary)}
.ex-badge{
  display:inline-block; font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-primary); background:var(--interactive-tint); border:1px dashed var(--color-interactive);
  padding:1px 6px; border-radius:5px; vertical-align:middle;
}

/* ---------- Video de TikTok (vertical, carga diferida) ---------- */
.tt-head{font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-muted); margin-bottom:6px}
.tt-poster{
  position:relative; display:block; width:100%; max-width:240px; aspect-ratio:9/16; padding:0; border:none; cursor:pointer;
  border-radius:12px; overflow:hidden; background:var(--color-primary);
}
.tt-poster img{width:100%; height:100%; object-fit:cover; display:block}
.tt-brand{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(31,111,178,.65), transparent 70%),
    linear-gradient(180deg, #1E3A5F, #142a46);
}
.tt-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.tt-play svg{width:28px; height:28px; fill:var(--color-primary); margin-left:3px}
.tt-cap{position:absolute; left:0; right:0; bottom:0; padding:22px 10px 10px; font-size:.72rem; font-weight:600; color:#fff; text-align:left;
  background:linear-gradient(transparent, rgba(10,20,34,.8))}
.tt-frame{width:100%; max-width:325px}
.tt-frame iframe{width:100%; aspect-ratio:325/578; height:auto; border:0; border-radius:12px; display:block}
.tt-frame blockquote{margin:0 !important}

/* ---------- Cuenta en la barra superior (visible también en móvil) ---------- */
.topbar-right a.topbar-acct{display:inline-flex; align-items:center; gap:6px; opacity:.9}
.topbar-acct svg{width:18px; height:18px; fill:currentColor}
@media (max-width:560px){
  .topbar-right a.topbar-acct{display:inline-flex} .topbar-acct span{display:none}
  .topbar-inner{gap:10px}
  .topbar-right{gap:8px}
  .topbar-right .lang-select{max-width:74px}
  .topbar-right a.topbar-cta{padding:6px 8px}
}
@media (max-width:400px){ .brand-logo{height:20px} .topbar-right .lang-select{max-width:62px} }

/* ---------- Identificación sin contraseña (email / WhatsApp + código) ---------- */
.idf{display:flex; flex-direction:column; gap:12px}
.idf-title{font-size:1.15rem}
.idf-intro{margin:0; font-size:.9rem; line-height:1.55; color:var(--color-text)}
.idf-form{display:flex; flex-direction:column; gap:10px}
.idf-l{display:flex; flex-direction:column; gap:5px; font-size:.74rem; font-weight:700; letter-spacing:.03em; color:var(--color-text-muted)}
.idf-in{font-size:1rem; padding:11px 12px; border:1px solid #D4DAE2; border-radius:10px; color:var(--color-text); background:var(--color-surface); width:100%}
.idf-in:focus{outline:none; border-color:var(--color-interactive); box-shadow:0 0 0 3px var(--interactive-tint)}
.idf-otp{font-size:1.5rem; letter-spacing:.5em; text-align:center; font-weight:700; font-family:var(--font-display); padding-left:.5em}
.idf-err{font-size:.82rem; color:#B42318; background:#FDF0EF; border-radius:8px; padding:8px 10px; line-height:1.45}
.idf-btns{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.idf-btns .btn{min-width:150px}
@media (max-width:520px){ .idf-btns .btn{flex:1} }
.idf-links{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.idf-fine{margin:0; font-size:.74rem; color:var(--color-text-muted); line-height:1.5}
.idf-demo{font-size:.8rem; background:var(--interactive-tint); border:1px dashed var(--color-interactive); color:var(--color-primary); border-radius:8px; padding:8px 10px}
.idf-demo b{font-size:1rem; letter-spacing:.15em}
.lnk{background:none; border:none; padding:4px 2px; color:var(--color-interactive); font-weight:600; font-size:.8rem; cursor:pointer; font-family:inherit}
.lnk:hover{text-decoration:underline}
.lnk.muted{color:var(--color-text-muted)}
.lnk:disabled{color:var(--color-text-muted); cursor:default; text-decoration:none}

/* ---------- Páginas de cuenta, panel y administración ---------- */
.pg{max-width:980px; margin:0 auto; padding:24px 20px 10px}
.pg.narrow{max-width:520px}
@media (max-width:520px){ .pg{padding:18px 16px 6px} }
.pg-head{margin-bottom:18px}
.pg-head h1{font-size:clamp(1.5rem,3.2vw,2rem)}
.pg-head p{margin:6px 0 0; color:var(--color-text-muted); font-size:.9rem; line-height:1.55}
.crumbs{font-size:.78rem; color:var(--color-text-muted); margin-bottom:6px}
.crumbs a{text-decoration:none}
.box{background:var(--color-surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
@media (max-width:520px){ .box{padding:14px} }
.box + .box{margin-top:14px}
.box h2{font-size:1.05rem; margin-bottom:10px}
.demo-note{font-size:.78rem; color:var(--color-primary); background:var(--interactive-tint); border:1px dashed var(--color-interactive); border-radius:10px; padding:9px 12px; margin-bottom:14px; line-height:1.5}
.who{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:.84rem; color:var(--color-text-muted); margin-bottom:14px}
.who b{color:var(--color-text)}
.est{display:inline-block; font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:6px; white-space:nowrap}
.est-activa{background:var(--success-tint); color:var(--color-success)}
.est-pausada{background:#EEF0F3; color:var(--color-text-muted)}
.est-vendida, .est-alquilada{background:var(--primary-tint); color:var(--color-primary)}
.est-pendiente{background:var(--interactive-tint); color:var(--color-interactive)}
.empty-box{padding:22px; text-align:center; color:var(--color-text-muted); border:1px dashed var(--line); border-radius:12px; font-size:.88rem; line-height:1.6}
.ok-msg{font-size:.84rem; color:var(--color-success); background:var(--success-tint); border-radius:8px; padding:8px 10px}
.err-msg{font-size:.84rem; color:#B42318; background:#FDF0EF; border-radius:8px; padding:8px 10px}

.site-footer{
  border-top:1px solid var(--line); margin-top:40px;
  font-size:.76rem; color:var(--color-text-muted); line-height:1.6;
}
.footer-brand{display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:.86rem; color:var(--color-primary)}
.footer-brand img{display:block}
.footer-brand b{font-family:var(--font-display); font-weight:800}
.footer-brand span{color:var(--color-text-muted)}
.site-footer .inner{max-width:1280px; margin:0 auto; padding:18px 20px 28px}