/* Casas digitales v2 · Propuesta B «Camina al bajar» — tokens en 3 capas + motion spec MOTION_BONUM */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url(../../shared/fonts/schibsted-normal-400-800.woff2) format("woff2")}
:root{
  --p-grafito:#141511; --p-grafito-2:#F6F4EF; --p-grafito-3:#ECE8E0; --p-hueso:#EEEBE4; --p-piedra:#5E5B54; --p-linea:#D9D5CC; --p-rec:#C8502E; --p-cal:#FFFFFF; --p-tinta-tenue:#55524C; --p-tinta:#141511; --p-tinta-2:#2A2C26; --p-hueso-tenue:#CFCBC2;
  --bg:var(--p-hueso); --surface:var(--p-grafito-2); --surface-2:var(--p-grafito-3); --text:var(--p-tinta); --text-muted:var(--p-piedra); --rule:var(--p-linea); --live:var(--p-rec);
  --font-ui:"Schibsted Grotesk",system-ui,sans-serif;
  --r-sm:4px; --r-md:12px; --r-pill:999px;
  /* motion spec (MOTION_BONUM §1 · C03-L015 ~01:03 «estos son los números») */
  --m-micro:160ms; --m-ui:240ms; --m-reveal:640ms; --m-hero:900ms; --m-stagger:70ms;
  --e-out:cubic-bezier(.22,1,.36,1); --e-inout:cubic-bezier(.65,0,.35,1); --e-spring:linear(0,.3 9%,.63 20%,.92 32%,1.05 44%,.98 58%,1);
  --d-reveal:16px; --parallax:.25;
  --btn-bg:var(--p-tinta); --btn-fg:var(--p-hueso); --btn-radius:var(--r-sm); --panel-radius:var(--r-md); --card-radius:var(--r-md);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.6 var(--font-ui)}
::selection{background:var(--p-tinta);color:var(--p-hueso)}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:var(--rule);border-radius:var(--r-sm)}::-webkit-scrollbar-track{background:var(--bg)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.wrap{max-width:1320px;margin:0 auto;padding:0 32px}
.i{width:20px;height:20px;flex:none}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--text);color:var(--bg);padding:8px 12px;z-index:9}
/* transición entre páginas: View Transitions entre documentos (MOTION_BONUM §3.6) con respaldo de fade en JS */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fadeOut var(--m-ui) var(--e-out)}::view-transition-new(root){animation:fadeIn var(--m-ui) var(--e-out)}
::view-transition-group(casa-foto){animation-duration:var(--m-reveal);animation-timing-function:var(--e-inout)}
@keyframes fadeIn{from{opacity:0}}@keyframes fadeOut{to{opacity:0}}
body.saliendo{animation:fadeOut var(--m-ui) var(--e-out) forwards}

.hdr{position:absolute;inset:0 0 auto;z-index:5}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.mark{text-decoration:none;font-weight:700;letter-spacing:.14em;font-size:.9375rem}
.mark span{font-weight:400;letter-spacing:0;color:var(--text-muted);margin-left:8px}
.nav{display:flex;gap:4px;font-size:.9375rem;padding:6px;border-radius:var(--r-pill);background:rgba(238,235,228,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(20,21,17,.14)}.nav a{text-decoration:none;color:var(--text);padding:8px 14px;border-radius:var(--r-pill);transition:background-color var(--m-micro)}.nav a:hover,.nav a[aria-current]{background:rgba(20,21,17,.1)}
.mark span{color:var(--text);opacity:.8}
/* menú móvil: details sin JS, 4 destinos (Ley de Jakob: menú arriba a la derecha) */
.menu{display:none;position:relative}.menu summary{list-style:none;cursor:pointer;width:48px;height:48px;display:grid;place-items:center;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--rule);background:rgba(238,235,228,.7)}.menu summary::-webkit-details-marker{display:none}
.menu ul{position:absolute;right:0;top:56px;margin:0;padding:8px;list-style:none;background:var(--surface);border-radius:var(--r-md);box-shadow:0 16px 40px -20px rgba(0,0,0,.9);min-width:220px;animation:sube var(--m-ui) var(--e-out) both}.menu li a{display:flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;border-radius:var(--r-sm)}.menu li a:hover{background:var(--surface-2)}
/* CTA: micro-interacción ≤240 ms (Kowalski animate: press feedback visible, no rebote en botones de acción) */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;background:var(--btn-bg);color:var(--btn-fg);border-radius:var(--btn-radius);text-decoration:none;font-weight:600;transition:transform var(--m-micro) var(--e-out),background-color var(--m-micro),box-shadow var(--m-ui) var(--e-out)}
.btn:hover{background:var(--p-tinta-2);transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(20,21,17,.45)}
.btn:active{transform:scale(.98);transition-duration:80ms}
.btn--ghost{background:rgba(238,235,228,.6);color:var(--text);box-shadow:inset 0 0 0 1px rgba(20,21,17,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.btn--ghost:hover{background:rgba(238,235,228,.9);box-shadow:inset 0 0 0 1px var(--text-muted)}
.btn .i{transition:transform var(--m-micro) var(--e-out)}.btn:hover .i{transform:translateX(3px)}
.lnk{display:inline-flex;gap:8px;align-items:center;font-weight:600;min-height:44px}
.ftr li a{display:inline-flex;align-items:center;min-height:44px}

/* HERO «camina al bajar»: tramo de 400vh; el visor se queda pegado; el progreso de scroll elige el cuadro (MOTION_BONUM §3.3; Kowalski: scroll = tiempo, nunca autoplay) */
.walk{position:relative;height:400svh}
.walk .stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--bg)}
.walk .poster,.walk canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.walk canvas.seq{opacity:0;transition:opacity var(--m-reveal) var(--e-out)}
.walk.listo canvas.seq{opacity:1}
/* esferas de vidrio (Three.js, alpha) delante de la secuencia y detrás del texto: referencia NEXA del CEO */
.walk canvas.glass{z-index:1;pointer-events:none;opacity:0;transition:opacity var(--m-hero) var(--e-out)}
.walk .stage.glass-on canvas.glass{opacity:1}
.walk .stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(238,235,228,.7) 0%,rgba(238,235,228,.25) 18%,rgba(238,235,228,0) 34%,rgba(238,235,228,.2) 50%,rgba(238,235,228,.6) 68%,rgba(238,235,228,.96) 100%);pointer-events:none}
.hdr,.walk .txt,.walk .paso{text-shadow:0 1px 2px rgba(238,235,228,.6)}
.walk .txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:56px}
.walk .txt::before{content:"";position:absolute;left:0;right:0;top:-160px;bottom:0;z-index:-1;background:linear-gradient(180deg,rgba(238,235,228,0) 0%,rgba(238,235,228,.6) 40%,rgba(238,235,228,.85) 100%);pointer-events:none}
.walk h1{margin:0 0 20px;font-weight:700;font-size:clamp(3.2rem,9vw,7.5rem);line-height:.92;letter-spacing:-.04em;text-wrap:balance;max-width:11ch;text-transform:none}
.walk h1 .voz{font-weight:300}
.walk .sub{max-width:44ch;margin:0 0 24px;color:var(--text)}
.walk .ctas{display:flex;flex-wrap:wrap;gap:12px}
/* capas de texto ancladas por cuarto: solo opacidad y transform (compositor) */
.walk .paso{position:absolute;left:32px;top:112px;z-index:2;display:flex;gap:12px;align-items:center;font-size:.9375rem;opacity:0;transform:translateY(var(--d-reveal));transition:opacity var(--m-ui) var(--e-out),transform var(--m-ui) var(--e-out);pointer-events:none}
.walk .paso.on{opacity:1;transform:none}
.walk .paso b{font-weight:600}.walk .paso span{color:var(--text-muted)}
.dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--live);flex:none}
.walk .barra{position:absolute;left:32px;right:32px;bottom:28px;z-index:2;height:2px;background:rgba(20,21,17,.18)}
.walk .barra i{display:block;height:100%;width:100%;background:var(--text);transform-origin:left;transform:scaleX(0)}
.walk .hint{position:absolute;right:32px;bottom:40px;z-index:2;font-size:.8125rem;color:var(--text-muted);display:flex;gap:8px;align-items:center;transition:opacity var(--m-ui)}
.walk.andando .hint{opacity:0}
.walk .txt{transition:opacity var(--m-ui) var(--e-out),transform var(--m-ui) var(--e-out)}
.walk.andando .txt{opacity:0;transform:translateY(8px);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .walk .hint .i{animation:bounce 1.6s var(--e-inout) infinite}
  @keyframes bounce{50%{transform:translateY(4px)}}
  .walk .txt>*{animation:sube var(--m-hero) var(--e-out) both}
  .walk .txt>*:nth-child(2){animation-delay:var(--m-stagger)}.walk .txt>*:nth-child(3){animation-delay:calc(var(--m-stagger)*2)}
}
@keyframes sube{from{opacity:0;transform:translateY(var(--d-reveal))}to{opacity:1;transform:none}}

/* REVEAL al entrar en viewport: IntersectionObserver añade .in; stagger por --i (máx 6, MOTION_BONUM §1) */
.rv{opacity:0;transform:translateY(var(--d-reveal))}
.rv.in{animation:sube var(--m-reveal) var(--e-out) both;animation-delay:calc(var(--i,0)*var(--m-stagger))}
.sec{padding:120px 0 0}
.sh{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;margin-bottom:40px}
.sh h2{grid-column:1/8;margin:0;font-weight:600;font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.sh p{grid-column:9/13;margin:0;color:var(--text-muted)}
.voz{font-weight:400;color:var(--text-muted)}

/* tira de cuartos con paralaje suave en la imagen (factor .25) */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,30%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 32px 16px;margin:0;list-style:none;scroll-padding:0 32px}
.strip li{scroll-snap-align:start}
.strip-nav{display:flex;gap:8px;justify-content:flex-end;padding:0 32px 8px}.strip-nav button{width:44px;height:44px;border-radius:var(--r-sm);border:0;background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1px var(--rule);cursor:pointer;display:grid;place-items:center;transition:background-color var(--m-micro)}.strip-nav button:hover{background:var(--surface-2)}
.strip a{text-decoration:none;display:block}
.strip .ph{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-sm)}
.strip img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform var(--m-reveal) var(--e-out)}
.strip a:hover img{transform:scale(1)}
.strip .t{display:flex;justify-content:space-between;margin-top:12px}.strip .t span:last-child{color:var(--text-muted)}

/* TARJETAS: hover spring -4 px, zoom ≤1.04, tilt ≤6° por JS en escritorio, spotlight (ref. 21st.dev Spotlight Card) */
.card{position:relative;background:var(--surface);border-radius:var(--card-radius);transition:transform var(--m-ui) var(--e-spring),background-color var(--m-micro),box-shadow var(--m-ui) var(--e-out);transform-style:preserve-3d;will-change:transform}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(20,21,17,.35)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(20,21,17,.06),transparent 60%);opacity:0;transition:opacity var(--m-ui);pointer-events:none}
.card:hover::before{opacity:1}
.feat{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:stretch}
.feat .ph{grid-column:1/8;position:relative;overflow:hidden;border-radius:var(--panel-radius);display:block}
.feat .ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;transition:transform var(--m-reveal) var(--e-out)}
.feat .ph:hover img{transform:scale(1.04)}
.feat .tx{grid-column:8/13;padding:32px;display:flex;flex-direction:column}
.feat h3{margin:0;font-size:2rem;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.feat .loc{color:var(--text-muted);margin:6px 0 24px;display:flex;gap:8px;align-items:center}
.kv{display:grid;grid-template-columns:1fr 1fr;margin:0 0 28px;border-top:1px solid var(--rule)}
.kv div{padding:14px 0;border-bottom:1px solid var(--rule)}
.kv dt{color:var(--text-muted);font-size:.875rem}.kv dd{margin:2px 0 0;font-size:1.25rem;font-weight:600}
.feat .ctas{margin-top:auto;display:flex;flex-wrap:wrap;gap:12px}
.state{display:inline-flex;gap:8px;align-items:center;font-size:.8125rem;color:var(--text-muted);border:1px solid var(--rule);border-radius:var(--r-sm);padding:4px 10px;align-self:flex-start;margin-bottom:20px}
.more{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:24px}
.mini{grid-column:1/8;display:grid;grid-template-columns:180px 1fr auto;gap:24px;align-items:center;padding:16px;text-decoration:none}
.mini img{border-radius:var(--r-sm);aspect-ratio:1;object-fit:cover;width:180px}
.mini h3{margin:0 0 4px;font-size:1.25rem;font-weight:600}.mini p{margin:0;color:var(--text-muted)}
.empty{grid-column:8/13;border:1px dashed var(--rule);border-radius:var(--panel-radius);padding:24px;display:flex;flex-direction:column;justify-content:center}
.empty h3{margin:0 0 6px;font-size:1.25rem;font-weight:600}.empty p{margin:0 0 16px;color:var(--text-muted)}
.casa-foto{view-transition-name:casa-foto}

.tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.tl li{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:28px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.tl .n{grid-column:1/2;color:var(--text-muted)}
.tl h3{grid-column:2/7;margin:0;font-size:clamp(1.5rem,2.6vw,2.25rem);font-weight:600;letter-spacing:-.02em}
.tl p{grid-column:8/13;margin:0;color:var(--text-muted)}
.ases{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.ases .l{grid-column:1/6}.ases .r{grid-column:7/13}
.ases h2{margin:0 0 20px;font-weight:600;font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.03em}
.ases ul{margin:0 0 32px;padding:0;list-style:none}.ases li{display:flex;gap:12px;padding:10px 0;color:var(--text-muted)}.ases li .i{color:var(--text)}
.conv{background:var(--surface);border-radius:var(--panel-radius);padding:24px;margin:0}
.conv figcaption{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--text-muted);margin-bottom:16px}
.msg{max-width:82%;padding:12px 14px;border-radius:var(--r-md);margin:0 0 10px;font-size:.9375rem;line-height:1.45}
.msg small{display:block;color:var(--text-muted);font-size:.75rem;margin-top:4px}
.msg.in{background:var(--p-cal)}.msg.out{background:var(--p-tinta);color:var(--p-hueso);margin-left:auto}.msg.out small{color:var(--p-hueso-tenue)}
.vend{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.vend li{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:32px 0;border-bottom:1px solid var(--rule)}
.vend h3{grid-column:1/5;margin:0;font-size:1.75rem;font-weight:600;letter-spacing:-.02em}
.vend p{grid-column:5/10;margin:0;color:var(--text-muted)}.vend a{grid-column:10/13;justify-self:end;align-self:start}
.ftr{margin-top:140px;border-top:1px solid var(--rule);padding:48px 0 120px;color:var(--text-muted)}
.ftr .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;gap:24px;flex-wrap:wrap}.ftr p{margin:0}
.dock{display:none}

/* ficha */
.walk--ficha{height:260svh}
.facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin:16px 0 0;padding:0;list-style:none}
.facts li{display:flex;gap:8px;align-items:center}
.fbody{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.fbody .l{grid-column:1/8}.fbody aside{grid-column:9/13}
.panel{background:var(--surface);border-radius:var(--panel-radius);padding:28px;position:sticky;top:24px}
.panel h2{margin:0;font-size:1.375rem;font-weight:600}.panel .btn{width:100%;justify-content:center;margin-top:12px}.panel p{color:var(--text-muted);font-size:.875rem;margin:16px 0 0}
.lead{font-size:1.375rem;line-height:1.5;margin:0 0 40px;max-width:40ch}
.inc{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}.inc li{border:1px solid var(--rule);border-radius:var(--r-sm);padding:6px 12px;font-size:.9375rem}
.near{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.near .map{grid-column:1/8;background:var(--surface);border-radius:var(--panel-radius);padding:16px}
.near ol{grid-column:8/13;list-style:none;margin:0;padding:0}
.near li{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--rule)}.near li small{display:block;color:var(--text-muted)}
.b-map{width:100%;height:auto;display:block}.b-ring{fill:none;stroke:var(--rule)}.b-ringlbl{font:400 11px var(--font-ui);fill:var(--text-muted)}
.b-poi{fill:var(--text);transform-box:fill-box;transform-origin:center}.b-poilbl{font:500 12px var(--font-ui);fill:var(--text)}.b-house{fill:var(--live)}.b-houselbl{font:600 13px var(--font-ui);fill:var(--text)}
.map.in .b-poi{animation:pop var(--m-ui) var(--e-spring) both;animation-delay:calc(var(--i,0)*var(--m-stagger))}
@keyframes pop{from{transform:scale(0)}}

/* reduce-motion (MOTION_BONUM §1): sin paralaje, sin loops, sin recorrido automático; quedan fades de 240 ms. La regla vive aquí, no en la ausencia de animación. */
@media (prefers-reduced-motion:reduce){
  .walk{height:100svh}.walk canvas{display:none}.walk .poster{opacity:1}.walk .hint,.walk .barra,.walk .paso{display:none}
  .rv{transform:none}.rv.in{animation:fadeIn var(--m-ui) ease-out both;animation-delay:0ms}
  .walk .txt>*{animation:fadeIn var(--m-ui) ease-out both}
  .card,.card:hover{transform:none}.strip img{transform:none}
  .map.in .b-poi{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:var(--m-ui)}
}
@media (max-width:900px){
  .wrap{padding:0 16px}.nav{display:none}.hdr .btn{display:none}.menu{display:block}
  .walk .ctas .btn{white-space:nowrap;padding:0 16px}
  .strip-nav{display:none}
  .walk .txt{padding-bottom:48px}.walk .paso{left:16px;top:96px}.walk .barra{left:16px;right:16px}.walk .hint{right:16px}
  .sec{padding-top:80px}.sh h2,.sh p{grid-column:1/-1}
  .strip{grid-auto-columns:72%;padding:0 16px 12px;scroll-padding:0 16px}
  .feat .ph,.feat .tx,.mini,.empty{grid-column:1/-1}.feat .tx{padding:24px}
  .mini{grid-template-columns:88px 1fr;gap:16px}.mini img{width:88px}.mini .i{display:none}
  .tl li{grid-template-columns:40px 1fr;gap:12px}.tl .n{grid-column:1}.tl h3,.tl p{grid-column:2}
  .ases .l,.ases .r{grid-column:1/-1}
  .vend li{grid-template-columns:1fr;gap:12px}.vend h3,.vend p,.vend a{grid-column:1;justify-self:start}
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:6;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(238,235,228,.94);border-top:1px solid var(--rule)}
  .dock .btn{flex:1;justify-content:center}
  .fbody .l,.fbody aside{grid-column:1/-1}.panel{position:static}
  .near .map,.near ol{grid-column:1/-1}
}

/* ===== Añadido por UI_PREMIUM_TRABAJADOR_2 sobre b_tema_claro.css: escena «Selva de día» y áreas táctiles ===== */
/* Hero «Selva de día»: escena 3D con profundidad encima de la secuencia; cede con fundido de 640 ms al bajar */
.walk canvas.selva{z-index:1;pointer-events:none;opacity:0;transition:opacity var(--m-reveal) var(--e-out)}
.walk .stage.selva-on canvas.selva{opacity:1}
.walk .stage.selva-on.selva-off canvas.selva{opacity:0}
.walk .stage::after{z-index:1}
/* scrim claro más denso detrás del texto (contraste medido sobre el cuadro más oscuro) */
.walk .stage.selva-on .txt::before{top:-220px;background:linear-gradient(180deg,rgba(238,235,228,0) 0%,rgba(238,235,228,.78) 28%,rgba(238,235,228,.9) 55%,rgba(238,235,228,.94) 100%)}
.walk .txt .btn{text-shadow:none}
/* áreas táctiles ≥44 px */
.hdr .mark{display:inline-flex;align-items:center;min-height:46px}
.hdr .nav a{display:inline-flex;align-items:center;min-height:46px}
h3 a{display:inline-flex;align-items:center;min-height:46px}
p a[href*="aviso-de-privacidad"]{display:inline-flex;align-items:center;min-height:46px}
.lnk,.ftr li a,.menu li a{min-height:46px}

/* continuidad entre páginas con facturación v4 (3-nov): la marca vuela al cambiar de página; respaldo fade */
@view-transition{navigation:auto}
.mark{view-transition-name:marca-bonum}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--m-ui,240ms)}