/* NIVA Inmobiliaria — estilo del sitio.
   Paleta: tinta casi negra, piedra clara y café caramelo como único acento.
   Letras: Fraunces para títulos, Inter para texto. */
:root{
  --n-paper:#FFFFFF; --n-stone:#F3F2EF; --n-ink:#101114; --n-soft:#4A4D55; --n-mute:#6B6E76;
  --n-line:rgba(16,17,20,.12); --n-caramel:#96714C; --n-caramel-deep:#7F5F40; --n-sand:#E3C6A3; --n-on:#FFFFFF;
  --f-display:"Fraunces", Georgia, "Times New Roman", serif;
  --f-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter:clamp(18px,5vw,64px);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--n-paper); color:var(--n-ink); font-family:var(--f-body); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased}
img{max-width:100%}
button, input, select, textarea{font:inherit; color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--n-caramel); outline-offset:2px}
h1,h2,h3{font-family:var(--f-display); font-weight:340; margin:0; text-wrap:balance; letter-spacing:-.01em}
.s-wrap{padding-inline:var(--gutter)}
.eyebrow{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--n-mute); font-weight:500}
.rel{position:relative}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@view-transition{navigation:auto}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; font-weight:500; font-size:14px; text-decoration:none; white-space:nowrap; border:0; transition:transform .2s var(--ease), background .2s}
.btn:active{transform:scale(.98)}
.btn svg{width:18px; height:18px; flex:none}
.btn-dark{background:var(--n-ink); color:#fff; padding:10px 16px}
.btn-car{background:var(--n-caramel); color:var(--n-on); padding:13px 20px}
.btn-car:hover{background:var(--n-caramel-deep)}
.btn-line{background:transparent; color:var(--n-ink); border:1px solid var(--n-ink); padding:12px 20px}
.more{color:var(--n-ink); font-weight:500; font-size:14px; text-decoration:none; border-bottom:1px solid var(--n-ink); padding-bottom:2px; white-space:nowrap}

/* ---------- Encabezado ---------- */
.hdr{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--n-line); transition:background .35s ease, border-color .35s ease}
.hdr-in{display:flex; align-items:center; gap:10px; height:64px}
.logo{font-family:var(--f-display); font-weight:500; font-size:22px; letter-spacing:.06em; margin-right:auto; text-decoration:none; color:var(--n-ink)}
.links{display:flex; gap:6px}
.links a{font-size:13.5px; color:var(--n-ink); text-decoration:none; padding:7px 13px; border:1px solid var(--n-line); border-radius:999px; white-space:nowrap; transition:border-color .2s}
.links a:hover, .links a[aria-current="page"]{border-color:var(--n-ink)}
.hdr .btn-dark{gap:0}
.burger{display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--n-line); background:#fff; color:var(--n-ink); place-items:center; padding:0}
.burger svg{width:18px; height:18px}
.menu{display:none; border-top:1px solid var(--n-line); padding-block:8px 18px}
.menu a{display:flex; justify-content:space-between; align-items:center; padding:15px 0; border-bottom:1px solid var(--n-line); color:var(--n-ink); text-decoration:none; font-family:var(--f-display); font-size:21px; font-weight:340}
.menu a svg{width:16px; height:16px}
.menu.open{display:block}
/* Sobre una foto: transparente en blanco; al bajar se vuelve sólido */
.hdr.over{margin-bottom:-65px; animation:sube .8s ease .15s both}
.hdr.over:not(.solid){background:linear-gradient(rgba(10,11,13,.5),rgba(10,11,13,0)); backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent}
.hdr.over:not(.solid) .logo{color:#fff}
.hdr.over:not(.solid) .links a{color:#fff; border-color:rgba(255,255,255,.38)}
.hdr.over:not(.solid) .links a:hover{border-color:#fff}
.hdr.over:not(.solid) .btn-dark{background:#fff; color:var(--n-ink)}
.hdr.over:not(.solid) .burger{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.45)}

/* ---------- Animaciones ---------- */
@keyframes sube{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
@keyframes linea{from{transform:translateY(108%)}to{transform:none}}
@keyframes abre{from{opacity:.4; transform:translateY(8px)}to{opacity:1; transform:none}}
@keyframes entrada{from{transform:scale(1.35) translate3d(-4%,0,0)}to{transform:scale(1.12) translate3d(-4%,0,0)}}
@keyframes paseo{from{transform:scale(1.12) translate3d(-4%,0,0)}to{transform:scale(1.28) translate3d(6%,-2%,0)}}
@keyframes fpaseo{from{transform:none}to{transform:scale(1.1) translate3d(2%,-1%,0)}}

/* ---------- Portada de Inicio ---------- */
.hero{position:relative; color:#fff; background:#1d1e23; overflow:hidden}
.hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 38%; transform-origin:62% 40%; animation:entrada 2.4s var(--ease) both, paseo 14s ease-in-out 2.4s infinite alternate; will-change:transform}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,11,13,.72) 0%, rgba(10,11,13,.35) 55%, rgba(10,11,13,.55) 100%), linear-gradient(0deg, rgba(10,11,13,.55), transparent 45%)}
.hero-in{position:relative; z-index:1; min-height:min(88vh,860px); padding-block:120px 64px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end}
.hero .eyebrow{color:rgba(255,255,255,.82); animation:sube .8s ease .3s both}
.hero h1{font-size:clamp(46px,8vw,92px); line-height:.98; margin:14px 0}
.hero p.sub{font-size:17px; margin:0 0 26px; color:rgba(255,255,255,.9); animation:sube .8s ease .95s both}
.ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.ln > span{display:block; animation:linea 1s var(--ease) .5s both}
.ln + .ln > span{animation-delay:.68s}
.pillars{list-style:none; margin:0; padding:14px 0 14px 18px; border-left:1px solid rgba(255,255,255,.5); display:grid; gap:8px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#fff; font-weight:500; text-shadow:0 1px 8px rgba(0,0,0,.55); animation:sube .9s ease 1.35s both}
/* Buscador compacto: la foto queda libre y los filtros se abren al tocar la barra */
.search{color:var(--n-ink); max-width:520px; animation:sube .8s ease 1.15s both}
.tabs{display:inline-flex; background:rgba(255,255,255,.16); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:999px; padding:3px; margin:0 0 10px}
.tabs button{border:0; background:transparent; padding:6px 16px; border-radius:999px; font-size:13.5px; font-weight:500; color:rgba(255,255,255,.88)}
.tabs button.act{background:#fff; color:var(--n-ink)}
.qs{display:flex; width:100%; align-items:center; gap:12px; background:rgba(255,255,255,.96); color:var(--n-ink); border:0; border-radius:999px; padding:7px 7px 7px 16px; text-align:left; box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.qs-i svg{width:18px; height:18px; display:block; color:var(--n-mute)}
.qs-t{flex:1; min-width:0; display:grid; line-height:1.25}
.qs-t b{font-weight:600; font-size:14.5px}
.qs-t small{font-size:12.5px; color:var(--n-mute)}
.qs-go{width:42px; height:42px; border-radius:50%; background:var(--n-caramel); color:#fff; display:grid; place-items:center; flex:none; border:0}
.qs-go svg{width:18px; height:18px}
.search:not(.open) .fields{display:none}
.search.open{max-width:760px; background:#fff; padding:8px; border-radius:16px; box-shadow:0 20px 50px -20px rgba(0,0,0,.5); animation:abre .25s ease}
.search.open .qs{display:none}
.search.open .tabs{background:var(--n-stone); margin:4px 4px 8px}
.search.open .tabs button{color:var(--n-soft)}
.search.open .tabs button.act{background:var(--n-ink); color:#fff}
.fields{display:grid; grid-template-columns:1fr 1fr auto; gap:6px}
.field{border:1px solid var(--n-line); border-radius:10px; padding:8px 14px; min-width:0; display:grid}
.field label{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--n-mute); font-weight:500}
.field input, .field select{border:0; background:transparent; padding:2px 0; font-size:15px; width:100%; outline:none; appearance:none; -webkit-appearance:none}
.fields .btn-car{border-radius:10px}

/* ---------- Secciones ---------- */
.sec{padding-block:clamp(56px,8vw,96px)}
.sec-head{display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap}
.sec-head h2{font-size:clamp(32px,4.4vw,48px); line-height:1.05; margin-top:10px}
.sec-head p{margin:8px 0 0; color:var(--n-soft); max-width:46ch}

/* Tarjetas de propiedad */
.grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px}
.card{display:flex; flex-direction:column; gap:12px; min-width:0; color:inherit; text-decoration:none}
.ph{position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:var(--n-stone)}
.ph img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease); filter:saturate(1.06) sepia(.07) contrast(1.04) brightness(1.02)}
.card:hover .ph img{transform:scale(1.06)}
.ph::after{content:""; position:absolute; inset:auto 0 0 0; height:58%; background:linear-gradient(rgba(10,11,13,0), rgba(10,11,13,.72)); z-index:1; pointer-events:none}
.ph-b{position:absolute; left:14px; right:14px; bottom:11px; z-index:2}
.price{font-family:var(--f-display); font-size:21px; font-weight:500; font-variant-numeric:tabular-nums}
.price small{font-family:var(--f-body); font-size:13px; color:var(--n-mute); font-weight:400}
.ph-b .price{color:#fff; font-size:23px; text-shadow:0 1px 10px rgba(0,0,0,.35)}
.ph-b .price small{color:rgba(255,255,255,.82)}
.tag{position:absolute; z-index:2; top:10px; left:10px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); color:var(--n-ink); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:999px}
.loc{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--n-mute); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card h3{font-size:19px; line-height:1.22; font-weight:440; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.44em}
.specs{display:flex; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--n-soft)}
.specs span{display:inline-flex; gap:5px; align-items:center}
.specs svg{width:15px; height:15px; color:var(--n-mute)}
.skel{background:linear-gradient(90deg, var(--n-stone), #e9e7e2, var(--n-stone)); background-size:200% 100%; animation:brillo 1.4s linear infinite; border-radius:12px}
@keyframes brillo{to{background-position:-200% 0}}
.card.is-skel .ph{background:none}
.card.is-skel .ph::after{display:none}
.card.is-skel .loc, .card.is-skel h3, .card.is-skel .specs{color:transparent}

/* Buscar por estilo de vida */
.life{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.lf{position:relative; aspect-ratio:4/5; border-radius:14px; overflow:hidden; color:#fff; text-decoration:none; background:#2a2b2f}
.lf img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s var(--ease); filter:saturate(1.04) sepia(.07) contrast(1.04)}
.lf:hover img{transform:scale(1.06)}
.lf::after{content:""; position:absolute; inset:0; background:linear-gradient(rgba(10,11,13,0) 35%, rgba(10,11,13,.78))}
.lf-t{position:absolute; left:18px; right:18px; bottom:16px; z-index:1}
.lf-t b{display:block; font-family:var(--f-display); font-weight:340; font-size:clamp(22px,2.3vw,28px); line-height:1.08}
.lf-t small{display:block; margin-top:6px; font-size:13px; color:rgba(255,255,255,.82)}

/* Propiedad de la semana */
.feature{position:relative; color:#fff; background:#16171A; overflow:hidden; min-height:560px; display:grid; align-items:end}
.feature > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.04) sepia(.06) contrast(1.05)}
.feature::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,11,13,.82) 0%, rgba(10,11,13,.35) 55%, rgba(10,11,13,.1)), linear-gradient(0deg, rgba(10,11,13,.5), transparent 50%)}
.feature-in{position:relative; z-index:1; padding-block:72px 56px; display:grid; gap:18px; max-width:620px}
.feature .eyebrow{color:var(--n-caramel); letter-spacing:.2em}
.feature h2{font-size:clamp(34px,4.6vw,56px); line-height:1.02}
.feature .fp{font-family:var(--f-display); font-size:clamp(28px,3vw,36px); font-weight:440; font-variant-numeric:tabular-nums}
.feature .btn-line{color:#fff; border-color:rgba(255,255,255,.7)}
.fbtns{display:flex; gap:10px; flex-wrap:wrap}
.fdata{display:flex; border-top:1px solid rgba(255,255,255,.25); border-bottom:1px solid rgba(255,255,255,.25)}
.fdata div{flex:1; padding:14px 0; display:grid; gap:2px; min-width:0}
.fdata div + div{border-left:1px solid rgba(255,255,255,.25); padding-left:18px}
.fdata b{font-family:var(--f-display); font-weight:440; font-size:24px; font-variant-numeric:tabular-nums; white-space:nowrap}
.fdata span{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7)}

/* Zonas */
.zarrows{display:flex; gap:8px}
.zarrows button{width:44px; height:44px; border-radius:50%; border:1px solid var(--n-line); background:#fff; color:var(--n-ink); display:grid; place-items:center}
.zarrows svg{width:16px; height:16px}
.zrow{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 44px) / 3.2); gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter)}
.zrow::-webkit-scrollbar, .life::-webkit-scrollbar, .grid::-webkit-scrollbar, .fbar-in::-webkit-scrollbar{display:none}
.zone{position:relative; aspect-ratio:3/4; border-radius:14px; overflow:hidden; scroll-snap-align:start; color:#fff; text-decoration:none; background:#2a2b2f}
.zone img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s var(--ease); filter:saturate(1.04) sepia(.07) contrast(1.04)}
.zone:hover img{transform:scale(1.06)}
.zone::after{content:""; position:absolute; inset:0; background:linear-gradient(rgba(10,11,13,0) 40%, rgba(10,11,13,.78))}
.zone-t{position:absolute; left:20px; right:20px; bottom:18px; z-index:1; display:grid; gap:8px}
.zone-t small{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.75); font-variant-numeric:tabular-nums}
.zone-t b{font-family:var(--f-display); font-weight:340; font-size:clamp(26px,2.8vw,34px); line-height:1.05}
.zone-t span{display:inline-flex; gap:8px; align-items:center; font-size:13.5px; border-top:1px solid rgba(255,255,255,.3); padding-top:10px}
.zone-t svg{width:16px; height:16px}

/* Frase */
.statement{background:var(--n-stone)}
.statement h2{font-size:clamp(30px,4.6vw,54px); line-height:1.12; max-width:20ch}
.statement h2 i{color:var(--n-caramel-deep); font-style:italic; font-weight:400}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:44px}
.facts div{border-top:1px solid var(--n-line); padding-top:14px}
.facts b{display:block; font-family:var(--f-display); font-weight:440; font-size:28px}
.facts span{font-size:13.5px; color:var(--n-soft)}

/* Proceso */
.steps{list-style:none; margin:0; padding:0; border-top:1px solid var(--n-line)}
.steps li{display:grid; grid-template-columns:56px minmax(0,220px) minmax(0,1fr); gap:20px; padding:22px 0; border-bottom:1px solid var(--n-line); align-items:baseline}
.steps .n{font-family:var(--f-display); color:var(--n-caramel-deep); font-size:18px; font-variant-numeric:tabular-nums}
.steps h3{font-size:22px; font-weight:440}
.steps p{margin:0; color:var(--n-soft); font-size:15px; max-width:56ch}

/* Propietarios */
.owners{background:var(--n-ink); color:#fff; border-radius:18px; padding:clamp(28px,4vw,48px); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:30px; align-items:center}
.owners h2{font-size:clamp(28px,3.6vw,40px); line-height:1.1; margin:10px 0 12px}
.owners p{color:rgba(255,255,255,.78); margin:0 0 22px}
.owners .eyebrow{color:rgba(255,255,255,.7)}
.owners dl{margin:0; display:grid}
.owners dl div{display:flex; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.16); font-size:14px}
.owners dt{color:rgba(255,255,255,.7)}
.owners dd{margin:0}

/* Contacto */
.contact{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:start}
.cform{display:grid; gap:12px}
.cfield{border:1px solid var(--n-line); border-radius:12px; padding:10px 14px; display:grid; gap:2px; transition:border-color .2s}
.cfield:focus-within{border-color:var(--n-ink)}
.cfield label{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--n-mute); font-weight:500}
.cfield input, .cfield textarea{border:0; outline:none; background:transparent; font-size:15.5px; padding:2px 0; resize:vertical}
.crow{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.cform .btn-car{justify-self:start; padding:14px 24px}
.cinfo{display:grid; border-top:1px solid var(--n-line)}
.cinfo div{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:16px 0; border-bottom:1px solid var(--n-line)}
.cinfo small{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--n-mute); font-weight:500}
.cinfo b{font-family:var(--f-display); font-weight:400; font-size:19px; display:block; margin-top:2px}
.cinfo a{font-size:13.5px; color:var(--n-caramel-deep); white-space:nowrap}

/* ---------- Pie de página ---------- */
.bfoot{background:var(--n-ink); color:#fff; padding-block:64px 26px; overflow:hidden}
.bfoot-top{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:32px}
.bfoot h4{margin:0 0 12px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:500}
.bfoot p, .bfoot a{margin:0; color:rgba(255,255,255,.9); font-size:14.5px; line-height:1.9; text-decoration:none; display:block}
.bfoot a:hover{color:var(--n-sand)}
.bfoot .lead{font-family:var(--f-display); font-weight:340; font-size:clamp(24px,2.6vw,32px); line-height:1.15; max-width:16ch}
.bfoot .lead i{color:var(--n-caramel); font-style:italic}
.wordmark{font-family:var(--f-display); font-weight:340; font-size:27vw; line-height:.78; letter-spacing:.02em; margin:56px 0 0; color:rgba(255,255,255,.96); white-space:nowrap; text-align:center; user-select:none}
.bfoot-bot{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.14); margin-top:26px; padding-top:18px; font-size:12.5px; color:rgba(255,255,255,.55)}

/* Botón flotante de WhatsApp */
.wa{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:40; width:54px; height:54px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 8px 20px -6px rgba(0,0,0,.4)}
.wa svg{width:27px; height:27px}

/* ---------- Propiedades ---------- */
.xh{position:relative; min-height:640px; display:grid; align-items:end; color:#fff; background:#16171A; overflow:hidden}
.xh > img, .slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.06) sepia(.06) contrast(1.05)}
.xh > img{animation:fpaseo 22s ease-in-out infinite alternate}
.xh::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(10,11,13,.62) 0%, rgba(10,11,13,.18) 65%, rgba(10,11,13,0) 100%), linear-gradient(0deg, rgba(10,11,13,.9) 0%, rgba(10,11,13,.45) 50%, rgba(10,11,13,.2) 72%, rgba(10,11,13,.5) 100%)}
.xh-in{position:relative; z-index:2; padding-block:130px 46px; display:grid; gap:16px}
.xh .eyebrow{color:rgba(255,255,255,.85); letter-spacing:.2em}
.xh h1{font-size:clamp(40px,6.4vw,84px); line-height:.98; font-weight:340; max-width:14ch}
.xh h1 i{font-weight:400}
.xh p.sub{margin:0; color:rgba(255,255,255,.85); max-width:50ch; font-size:16px}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease}
.slide.on{opacity:1}
.slide.on img{animation:fpaseo 9s ease-out both}
.cap{display:flex; justify-content:space-between; align-items:end; gap:18px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.25); padding-top:16px; margin-top:12px}
.cap-t{display:grid; gap:2px; min-width:0; color:#fff; text-decoration:none}
.cap-t small{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7)}
.cap-t b{font-family:var(--f-display); font-weight:400; font-size:20px}
.cap-t span{font-family:var(--f-display); font-size:18px; color:var(--n-sand)}
.dots{display:flex; gap:6px}
.dots button{width:22px; height:3px; border-radius:3px; background:rgba(255,255,255,.35); transition:background .3s, width .3s; border:0; padding:0}
.dots button.on{background:#fff; width:36px}
.glassbar{display:flex; gap:8px; background:rgba(255,255,255,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:6px; max-width:620px}
.gb-f{flex:1; min-width:0; padding:6px 14px; color:#fff; display:grid}
.gb-f label{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7)}
.gb-f select{border:0; background:transparent; color:#fff; font-size:14.5px; padding:2px 0; outline:none; appearance:none; -webkit-appearance:none; width:100%}
.gb-f select option{color:var(--n-ink)}
.gb-f + .gb-f{border-left:1px solid rgba(255,255,255,.22)}
.glassbar .qs-go{width:48px; height:48px; align-self:center}

.fbar{position:sticky; top:65px; z-index:30; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--n-line)}
.fbar-in{display:flex; gap:8px; align-items:center; padding-block:12px; overflow-x:auto; scrollbar-width:none}
.seg2{display:inline-flex; background:var(--n-stone); border-radius:999px; padding:3px; flex:none}
.seg2 button{border:0; background:transparent; padding:7px 15px; border-radius:999px; font-size:13.5px; font-weight:500; color:var(--n-soft)}
.seg2 button.act{background:var(--n-ink); color:#fff}
.pill{flex:none; position:relative; display:inline-flex; align-items:center; border:1px solid var(--n-line); background:#fff; border-radius:999px; transition:border-color .2s}
.pill.on{border-color:var(--n-ink); background:var(--n-stone)}
.pill select{border:0; background:transparent; padding:8px 30px 8px 14px; font-size:13.5px; outline:none; appearance:none; -webkit-appearance:none; cursor:pointer; max-width:220px; field-sizing:content}
.pill select:disabled{cursor:default; color:var(--n-mute)}
.pill svg{position:absolute; right:11px; width:12px; height:12px; color:var(--n-mute); pointer-events:none}
.clear{flex:none; border:0; background:none; font-size:13px; color:var(--n-mute); text-decoration:underline; padding:8px 6px}
.rhead{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-block:28px 18px}
.rhead b{font-family:var(--f-display); font-weight:400; font-size:24px}
.rhead small{display:block; color:var(--n-mute); font-size:13px; font-family:var(--f-body)}
.pgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 22px}
.helpcard{background:var(--n-ink); color:#fff; border-radius:12px; padding:26px; display:grid; align-content:space-between; gap:18px; min-height:100%}
.helpcard .eyebrow{color:var(--n-caramel)}
.helpcard h3{font-size:26px; line-height:1.12; font-weight:340; margin-top:10px}
.helpcard p{margin:0; color:rgba(255,255,255,.75); font-size:14.5px}
.pager{display:flex; gap:6px; justify-content:center; flex-wrap:wrap; padding-block:40px 72px}
.pager button{min-width:42px; height:42px; border-radius:999px; border:1px solid var(--n-line); background:#fff; padding:0 14px; font-size:14px}
.pager button.on{background:var(--n-ink); color:#fff; border-color:var(--n-ink)}
.pager button:disabled{opacity:.35; cursor:default}
.empty{grid-column:1 / -1; text-align:center; padding:56px 20px; border:1px dashed var(--n-line); border-radius:14px; color:var(--n-soft); display:grid; gap:14px; justify-items:center}
.empty h3{font-size:26px; color:var(--n-ink)}

/* ---------- Ficha ---------- */
.fhero{position:relative; min-height:640px; display:grid; align-items:end; color:#fff; background:#16171A; overflow:hidden}
.fhero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.06) sepia(.07) contrast(1.04) brightness(1.02); animation:fpaseo 20s ease-in-out .8s infinite alternate; view-transition-name:foto}
.fhero::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,11,13,.85) 0%, rgba(10,11,13,.35) 45%, rgba(10,11,13,0) 70%), linear-gradient(180deg, rgba(10,11,13,.45), transparent 22%)}
.fhero-in{position:relative; z-index:1; padding-block:120px 44px; display:grid; gap:14px; justify-items:start}
.back{display:inline-flex; gap:6px; align-items:center; font-size:13.5px; color:rgba(255,255,255,.85); text-decoration:none}
.back svg{width:16px; height:16px}
.ftags{display:flex; gap:8px}
.ftags .tag{position:static}
.ftags .tag.dim{background:rgba(255,255,255,.14); color:#fff}
.fhero h1{font-size:clamp(34px,5vw,62px); line-height:1.02; font-weight:340; max-width:18ch}
.fhero .where{color:rgba(255,255,255,.82); font-size:15px}
.fbody{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:56px; padding-block:48px 64px; align-items:start}
.fprice{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.bigprice{font-family:var(--f-display); font-size:clamp(36px,4vw,46px); font-weight:500; font-variant-numeric:tabular-nums}
.bigprice small{font-family:var(--f-body); font-size:16px; color:var(--n-mute); font-weight:400}
.fprice span{color:var(--n-mute); font-size:14px}
.fdata.light{margin-top:22px; border-color:var(--n-line)}
.fdata.light div + div{border-left-color:var(--n-line)}
.fdata.light b{color:var(--n-ink)}
.fdata.light span{color:var(--n-mute)}
.fsec{border-top:1px solid var(--n-line); padding-top:24px; margin-top:32px}
.fsec h3{font-size:24px; font-weight:400; margin-bottom:10px}
.fsec p{margin:0; color:var(--n-soft); font-size:15.5px; max-width:60ch; line-height:1.65}
.fsec p + p{margin-top:10px}
.fcard{position:sticky; top:88px; background:var(--n-ink); color:#fff; border-radius:18px; padding:26px; display:grid; gap:18px}
.fcard .eyebrow{color:var(--n-caramel)}
.fcard h3{font-size:26px; font-weight:340; line-height:1.15}
.fcard .lbl{display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:8px}
.chipset{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid rgba(255,255,255,.28); background:transparent; color:#fff; border-radius:999px; padding:8px 14px; font-size:13.5px}
.chip[aria-pressed="true"]{background:#fff; color:var(--n-ink); border-color:#fff}
.fcard .btn-car{width:100%; padding:15px}
.fcard small{color:rgba(255,255,255,.65); font-size:12.5px; text-align:center}
.sticky-cta{display:none; position:fixed; left:0; right:0; bottom:0; z-index:40; background:#fff; border-top:1px solid var(--n-line); padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); align-items:center; gap:12px; justify-content:space-between}
.sticky-cta .p{font-family:var(--f-display); font-size:20px; font-weight:500; font-variant-numeric:tabular-nums; line-height:1.1; min-width:0}
.sticky-cta .p small{display:block; font-family:var(--f-body); font-size:11.5px; color:var(--n-mute); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sticky-cta .btn{padding:12px 16px}
.nofound{min-height:70vh; display:grid; place-items:center; text-align:center; padding:140px var(--gutter) 80px; background:var(--n-stone)}
.nofound div{display:grid; gap:16px; justify-items:center; max-width:520px}
.nofound h1{font-size:clamp(32px,4vw,44px)}
.nofound p{margin:0; color:var(--n-soft)}

/* ---------- Servicios ---------- */
.st-aud{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:22px; border-top:1px solid rgba(255,255,255,.28)}
.st-aud a{display:grid; gap:8px; align-content:start; padding:24px 22px 30px 0; color:#fff; text-decoration:none; border-right:1px solid rgba(255,255,255,.12); transition:background .25s}
.st-aud a + a{padding-left:22px}
.st-aud a:last-child{border-right:0}
.st-aud a:hover{background:rgba(255,255,255,.05)}
.st-aud small{font-family:var(--f-display); color:var(--n-sand); font-size:15px}
.st-aud b{font-family:var(--f-display); font-weight:340; font-size:clamp(20px,2vw,25px); line-height:1.15}
.st-aud span{color:rgba(255,255,255,.7); font-size:13.5px}
.st-aud em{font-style:normal; font-size:13px; color:var(--n-sand); margin-top:4px}
.svc{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; padding-block:72px; border-top:1px solid var(--n-line); scroll-margin-top:64px}
.svc:first-child{border-top:0}
.svc-side{position:sticky; top:96px; align-self:start; display:grid; gap:14px}
.svc-side .num{font-family:var(--f-display); font-size:64px; line-height:1; color:var(--n-caramel); font-weight:340}
.svc-side h2{font-size:clamp(30px,3.6vw,42px); line-height:1.05}
.svc-side p{margin:0; color:var(--n-soft); max-width:46ch}
.svc-side .btn, .svc-side .more{justify-self:start}
.quote{font-family:var(--f-display); font-style:italic; font-weight:400; font-size:clamp(20px,2vw,24px); line-height:1.3; color:var(--n-caramel-deep); margin:0}
.quote.sm{font-size:18px}
.tabs2{display:flex; gap:22px; border-bottom:1px solid var(--n-line); margin-bottom:22px; overflow-x:auto; scrollbar-width:none}
.tabs2 button{border:0; background:none; padding:0 0 12px; font-size:15px; font-weight:500; color:var(--n-mute); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap}
.tabs2 button[aria-selected="true"]{color:var(--n-ink); border-bottom-color:var(--n-caramel)}
.checks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 28px}
.checks li{display:flex; gap:12px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--n-line); font-size:15px}
.checks li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--n-caramel); flex:none; transform:translateY(-2px)}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.box{border:1px solid var(--n-line); border-radius:14px; padding:24px; display:grid; gap:14px; align-content:start}
.box h3{font-size:24px; font-weight:400}
.box .checks{grid-template-columns:1fr}
.box .btn, .box .more{justify-self:start}
.trio{display:grid; border-top:1px solid var(--n-line)}
.trio div{display:grid; grid-template-columns:40px 1fr; gap:4px 14px; padding:18px 0; border-bottom:1px solid var(--n-line)}
.trio small{font-family:var(--f-display); color:var(--n-caramel-deep); font-size:16px; grid-row:span 2}
.trio b{font-family:var(--f-display); font-weight:400; font-size:21px}
.trio span{color:var(--n-soft); font-size:14.5px}
.manifest{background:var(--n-stone); padding-block:88px; text-align:center}
.manifest h2{font-size:clamp(30px,4.4vw,52px); line-height:1.1; margin:0 auto; max-width:18ch}
.manifest .lines{display:grid; gap:2px; margin:26px 0; font-family:var(--f-display); font-style:italic; font-size:clamp(22px,2.6vw,30px); color:var(--n-caramel-deep)}
.manifest p{margin:0 0 26px; color:var(--n-soft)}

/* ---------- ¿Rentas o vendes? ---------- */
.vq{background:var(--n-ink); color:#fff; padding-block:150px 72px; position:relative; overflow:hidden}
.vq .big-q{position:absolute; right:-2%; bottom:-8%; font-family:var(--f-display); font-weight:300; font-size:clamp(240px,42vw,560px); line-height:.8; color:rgba(150,113,76,.28); pointer-events:none; user-select:none}
.vq-in{position:relative; display:grid; gap:18px; max-width:660px}
.vq .eyebrow{color:var(--n-caramel); letter-spacing:.2em; animation:sube .8s ease .3s both}
.vq h1{font-size:clamp(42px,5.8vw,80px); line-height:.98; font-weight:300; animation:sube .9s ease .45s both}
.vq h1 i{color:var(--n-caramel); font-weight:340}
.vq p{margin:0; color:rgba(255,255,255,.75); max-width:46ch; font-size:16px; animation:sube .9s ease .6s both}
.vq .btn{justify-self:start; animation:sube .9s ease .75s both}
.vq small{color:rgba(255,255,255,.5); font-size:12.5px}
.choose{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.opt{display:grid; gap:6px; text-align:left; border:1px solid var(--n-line); background:#fff; color:var(--n-ink); border-radius:14px; padding:22px; transition:border-color .2s, transform .2s}
.opt:hover{border-color:var(--n-ink); transform:translateY(-2px)}
.opt b{font-family:var(--f-display); font-weight:400; font-size:24px}
.opt span{color:var(--n-soft); font-size:14px}
.opt em{font-style:normal; color:var(--n-caramel-deep); font-size:13.5px; margin-top:6px}
.after{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px}
.after div{border-top:2px solid var(--n-ink); padding-top:14px; display:grid; gap:6px}
.after small{font-family:var(--f-display); color:var(--n-caramel-deep); font-size:15px}
.after span{font-size:14.5px}
/* Formulario por pasos (mismo funcionamiento de antes, diseño nuevo) */
.rv-wrap{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; align-items:start}
.rv-side{position:sticky; top:96px; display:grid; gap:14px}
.rv-side h2{font-size:clamp(30px,3.6vw,44px); line-height:1.05}
.rv-side p{margin:0; color:var(--n-soft); max-width:42ch}
.rv-card{scroll-margin-top:88px; border:1px solid var(--n-line); border-radius:18px; padding:clamp(22px,3.4vw,40px); background:#fff; box-shadow:0 30px 60px -40px rgba(0,0,0,.35)}
.rv-progress-label{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--n-mute); margin:12px 0 22px}
.rv-progress-track{height:3px; background:var(--n-stone); border-radius:3px; overflow:hidden}
.rv-progress-bar{height:100%; width:11%; background:var(--n-caramel); transition:width .4s ease}
.rv-step h3{font-size:clamp(26px,3vw,34px); font-weight:340; margin-bottom:18px}
.rv-step-sub{margin:-8px 0 18px; color:var(--n-soft); font-size:14.5px}
.rv-options, .rv-price-toggle{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.rv-price-toggle{margin-bottom:16px}
.rv-opt{border:1px solid var(--n-line); background:#fff; border-radius:12px; padding:16px; font-size:15px; text-align:left; transition:border-color .2s, background .2s}
.rv-opt:hover{border-color:var(--n-ink)}
.rv-opt.sel{border-color:var(--n-ink); box-shadow:inset 0 0 0 1px var(--n-ink); background:var(--n-stone)}
.rv-unsure-note{margin-top:14px; padding:14px 16px; border-radius:12px; background:var(--n-stone); color:var(--n-soft); font-size:14px}
.rv-field{border:1px solid var(--n-line); border-radius:12px; padding:10px 14px; display:grid; gap:2px; margin-bottom:12px; transition:border-color .2s}
.rv-field:focus-within{border-color:var(--n-ink)}
.rv-field label{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--n-mute); font-weight:500}
.rv-field input, .rv-field textarea{border:0; outline:none; background:transparent; font-size:15.5px; padding:2px 0; width:100%}
.rv-field textarea{min-height:120px; resize:vertical}
.rv-row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.rv-row2 .rv-field{margin-bottom:12px}
.rv-radio-list{display:grid; gap:8px}
.rv-radio{display:flex; align-items:center; gap:12px; border:1px solid var(--n-line); border-radius:12px; padding:14px 16px; cursor:pointer; transition:border-color .2s, background .2s}
.rv-radio input{accent-color:var(--n-caramel); width:18px; height:18px; margin:0}
.rv-radio.sel{border-color:var(--n-ink); background:var(--n-stone)}
.rv-photos-drop{border:1.5px dashed var(--n-line); border-radius:14px; padding:34px; text-align:center; color:var(--n-soft); display:grid; gap:6px; background:var(--n-stone); cursor:pointer}
.rv-photos-drop strong{color:var(--n-ink); font-weight:500}
.rv-photos-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:12px}
.rv-photo-thumb{position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden}
.rv-photo-thumb img{width:100%; height:100%; object-fit:cover}
.rv-photo-remove{position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:0; background:rgba(16,17,20,.75); color:#fff; font-size:12px}
.rv-photos-note{font-size:13px; color:var(--n-mute); margin:12px 0 0}
.rv-nav{display:flex; justify-content:space-between; gap:10px; margin-top:26px}
.rv-back{border:1px solid var(--n-ink); background:transparent; border-radius:999px; padding:12px 20px; font-size:14px; font-weight:500}
.rv-next{border:0; background:var(--n-caramel); color:#fff; border-radius:999px; padding:13px 22px; font-size:14px; font-weight:500}
.rv-next:hover{background:var(--n-caramel-deep)}
.rv-confirm{text-align:center; display:grid; gap:12px; justify-items:center; padding-block:20px}
.rv-confirm .mark{width:56px; height:56px; border-radius:50%; background:var(--n-caramel); color:#fff; display:grid; place-items:center; font-size:24px}
.rv-confirm p{margin:0; color:var(--n-soft); max-width:44ch}
.rv-confirm-ctas{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px}
.rv-confirm-ctas a{border:1px solid var(--n-ink); border-radius:999px; padding:12px 20px; font-size:14px; text-decoration:none; font-weight:500}
.rv-confirm-ctas a.primary{background:var(--n-ink); color:#fff}
.rv-privacy{font-size:12.5px; color:var(--n-mute); margin:16px 0 0}

/* ---------- Celular ---------- */
@media (max-width:760px){
  .links, .hdr .btn-dark .lbl-long{display:none}
  .burger{display:grid}
  .hdr .btn-dark{padding:10px 14px; font-size:13px}
  .hero-in{grid-template-columns:minmax(0,1fr); min-height:max(640px, 92svh); padding-block:120px 28px; align-content:end}
  .pillars{display:none}
  .hero p.sub{font-size:15.5px; margin-bottom:20px}
  .search.open .tabs{display:flex; margin:2px 2px 8px}
  .search.open .tabs button{flex:1}
  .fields{grid-template-columns:minmax(0,1fr)}
  .fields .btn-car{padding:15px}
  .grid, .life, .zrow{grid-template-columns:none; grid-auto-flow:column; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); scrollbar-width:none}
  .grid{grid-auto-columns:78%; padding-bottom:6px}
  .grid .card, .lf, .zone{scroll-snap-align:start}
  .life{grid-auto-columns:62%; gap:12px}
  .zrow{grid-auto-columns:76%; gap:14px}
  .zarrows{display:none}
  .sec-head{margin-bottom:20px}
  .feature{min-height:620px}
  .feature::after{background:linear-gradient(0deg, rgba(10,11,13,.9) 0%, rgba(10,11,13,.55) 45%, rgba(10,11,13,.05) 75%)}
  .feature-in{padding-block:40px 32px}
  .fdata b{font-size:20px}
  .fdata div + div{padding-left:12px}
  .facts{grid-template-columns:minmax(0,1fr); gap:14px; margin-top:30px}
  .steps li{grid-template-columns:36px minmax(0,1fr); gap:4px 12px}
  .steps p{grid-column:2; font-size:14.5px}
  .owners{grid-template-columns:minmax(0,1fr)}
  .contact{grid-template-columns:minmax(0,1fr); gap:32px}
  .crow{grid-template-columns:minmax(0,1fr)}
  .bfoot{padding-block:48px 22px}
  .bfoot-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 20px}
  .bfoot-top > div:first-child{grid-column:1 / -1}
  .wordmark{margin-top:40px}
  .xh{min-height:600px}
  .xh-in{padding-block:110px 28px}
  .glassbar{border-radius:18px; flex-wrap:wrap}
  .gb-f{flex:1 1 40%}
  .glassbar .qs-go{width:100%; border-radius:12px; height:46px}
  .pgrid{grid-template-columns:minmax(0,1fr); gap:30px}
  .fhero{min-height:560px}
  .fhero-in{padding-block:110px 26px}
  .fbody{grid-template-columns:minmax(0,1fr); gap:28px; padding-block:28px 40px}
  .fcard{position:static}
  .fdata.light b{font-size:19px}
  .fdata.light{display:grid; grid-template-columns:1fr 1fr}
  .fdata.light div, .fdata.light div + div{padding:12px 0; border-left:0; border-top:1px solid var(--n-line)}
  .fdata.light div:nth-child(-n+2){border-top:0}
  .fdata.light div:nth-child(even){border-left:1px solid var(--n-line); padding-left:14px}
  .fdata span{letter-spacing:.1em}
  .sticky-cta{display:flex}
  body.con-barra{padding-bottom:76px}
  body.con-barra .wa{display:none}
  .st-aud{grid-template-columns:minmax(0,1fr)}
  .st-aud a, .st-aud a + a{padding:18px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.12); grid-template-columns:34px 1fr; column-gap:10px}
  .st-aud small{grid-row:span 3}
  .st-aud em{display:none}
  .svc{grid-template-columns:minmax(0,1fr); gap:24px; padding-block:52px}
  .svc-side{position:static}
  .svc-side .num{font-size:48px}
  .checks{grid-template-columns:minmax(0,1fr)}
  .duo{grid-template-columns:minmax(0,1fr)}
  .vq{padding-block:120px 48px}
  .choose{grid-template-columns:minmax(0,1fr)}
  .after{grid-template-columns:minmax(0,1fr); gap:0}
  .after div{grid-template-columns:36px 1fr; border-top:1px solid var(--n-line); padding-block:14px}
  .rv-wrap{grid-template-columns:minmax(0,1fr); gap:24px}
  .rv-side{position:static}
  .rv-row2{grid-template-columns:minmax(0,1fr); gap:0}
  .rv-photos-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .hero > img, .xh > img, .slide.on img, .fhero-img{animation:none !important; transform:none !important}
  @view-transition{navigation:none}
}