/*! Orce FX 1.1.0 · Negocio Vivo */
@property --ofxr{syntax:'<length>';inherits:false;initial-value:0px}
.ofx-rel{position:relative!important}
.ofx-clip{overflow:hidden!important}

/* ---------- Intro: plano arquitectónico ---------- */
.ofx-plan{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 35% 50%,#13355d 0%,#0e2b4d 55%,#081b33 100%);will-change:clip-path}
.ofx-plan::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(150,200,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(150,200,255,.06) 1px,transparent 1px),linear-gradient(rgba(150,200,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(150,200,255,.11) 1px,transparent 1px);background-size:24px 24px,24px 24px,120px 120px,120px 120px}
.ofx-plan::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 42%,rgba(6,20,38,.6) 72%,rgba(6,20,38,.45) 100%)}
.ofx-plan svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ofx-plan .d{fill:none;stroke:#e6f2ff;stroke-width:1.3;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;animation:ofxDash .8s cubic-bezier(.55,0,.25,1) both}
.ofx-plan .d.t{stroke-width:.75;stroke:rgba(230,242,255,.62)}
.ofx-plan .d.h{stroke-width:2.3}
.ofx-plan .f{opacity:0;animation:ofxFade .7s ease both}
.ofx-plan .cut{fill:#11325a}
.ofx-plan .ax{fill:none;stroke:rgba(230,242,255,.28);stroke-width:.7;stroke-dasharray:16 4 2 4}
.ofx-plan .ln{fill:none;stroke:rgba(230,242,255,.62);stroke-width:.75}
.ofx-plan .dash{fill:none;stroke:rgba(230,242,255,.5);stroke-width:.8;stroke-dasharray:6 4}
.ofx-plan text{fill:#e6f2ff;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.12em}
.ofx-plan .lbl{font-size:10.5px;font-weight:700}
.ofx-plan .ttl{font-size:17px;font-weight:700;letter-spacing:.32em}
.ofx-plan .mid{text-anchor:middle}
.ofx-plan .end{text-anchor:end}
.ofx-plan .elev{opacity:.6}
.ofx-plan.go{animation:ofxSweep 2s cubic-bezier(.75,0,.25,1) both}
.ofx-plan.out{transition:opacity .45s ease;opacity:0!important}
@keyframes ofxDash{to{stroke-dashoffset:0}}
@keyframes ofxFade{to{opacity:1}}
@keyframes ofxSweep{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
.ofx-laser{position:absolute;top:0;bottom:0;left:0;width:2px;z-index:2;pointer-events:none;background:#bdf0ff;box-shadow:0 0 14px 3px rgba(120,210,255,.95),0 0 80px 18px rgba(80,170,255,.45);opacity:0}
.ofx-laser.go{animation:ofxLaser 2s cubic-bezier(.75,0,.25,1) both}
@keyframes ofxLaser{0%{left:0;opacity:0}5%{opacity:1}95%{opacity:1}100%{left:100%;opacity:0}}

/* ---------- Plano técnico (para la lente) ---------- */
.ofx-bp{position:absolute;inset:0;overflow:hidden;pointer-events:none;background-color:#0b2a4f;background-image:linear-gradient(rgba(140,200,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(140,200,255,.10) 1px,transparent 1px),linear-gradient(rgba(140,200,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(140,200,255,.22) 1px,transparent 1px);background-size:20px 20px,20px 20px,100px 100px,100px 100px}
.ofx-bp img{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;transform:none!important}
.ofx-bp img.t{filter:grayscale(1) contrast(1.3);opacity:.22;mix-blend-mode:luminosity}
.ofx-bp img.e{filter:url(#ofx-bp-f)}

/* ---------- Hero cinemático ---------- */
.ofx-spot{position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(650px circle at var(--mx,62%) var(--my,42%),rgba(255,214,160,.55),transparent 60%);mix-blend-mode:soft-light;transition:opacity 1.2s ease}
.ofx-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;transition:opacity 1.2s ease}
.ofx-intro .ofx-spot,.ofx-intro .ofx-dust{opacity:0}

/* ---------- Azulejos ---------- */
.ofx-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(6,1fr);z-index:4;pointer-events:none;perspective:900px}
.ofx-tiles i{background:var(--tc);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.09);transform-origin:50% 0;transition:transform .75s cubic-bezier(.7,0,.2,1),opacity .75s;transition-delay:var(--d)}
.ofx-tiles.in i{transform:rotateX(-95deg);opacity:0}
.ofx-tilehost img{transition:transform 1.8s cubic-bezier(.2,.7,.2,1)!important;transform:scale(1.2)}
.ofx-tilehost.in img{transform:scale(1)}

/* ---------- Lente «Ver plano» ---------- */
.ofx-lens{z-index:5;clip-path:circle(var(--ofxr) at var(--x,50%) var(--y,50%));transition:--ofxr .35s cubic-bezier(.2,.8,.2,1)}
.ofx-lenshost:hover .ofx-lens{--ofxr:120px}
.ofx-ring{position:absolute;left:var(--x);top:var(--y);width:240px;height:240px;margin:-120px 0 0 -120px;border:1.5px solid rgba(170,225,255,.95);border-radius:50%;z-index:6;pointer-events:none;opacity:0;transform:scale(.5);transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 0 6px rgba(255,255,255,.08),0 14px 40px rgba(0,0,0,.4)}
.ofx-ring::before{content:'';position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px;background:linear-gradient(#cdeeff,#cdeeff) center/1px 100% no-repeat,linear-gradient(#cdeeff,#cdeeff) center/100% 1px no-repeat}
.ofx-ring::after{content:'VER PLANO';position:absolute;left:50%;top:14px;transform:translateX(-50%);font:600 9px ui-monospace,monospace;letter-spacing:.22em;color:#cdeeff}
.ofx-lenshost:hover .ofx-ring{opacity:1;transform:scale(1)}

/* ---------- Tarjetas 3D ---------- */
.ofx-tilt{transform-style:preserve-3d;will-change:transform}
.ofx-glare{position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.45),transparent 55%);opacity:0;transition:opacity .35s;mix-blend-mode:overlay}
.ofx-tilt:hover>.ofx-glare{opacity:1}

/* ---------- Casa que se construye ---------- */
.ofx-build{max-width:980px;margin:36px auto 60px;position:relative;padding:0 16px}
.ofx-build svg{width:100%;height:auto;display:block;overflow:visible}
.ofx-build .ln{fill:none;stroke:#1b1b1b;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.ofx-build .ln.dm{stroke:#b08a4e;stroke-width:1.1}
.ofx-build .ln.cr{stroke:#c8a46a;stroke-width:1.2}
.ofx-build .ln.gl{stroke:#2a5d8a}
.ofx-build .grid path{stroke:rgba(0,0,0,.13);stroke-width:1;fill:none}
.ofx-build text{font:600 11px ui-monospace,Menlo,monospace;fill:#b08a4e;letter-spacing:.12em}
.ofx-bar{height:2px;background:rgba(0,0,0,.1);margin-top:22px;position:relative}
.ofx-bar i{position:absolute;left:0;top:0;bottom:0;background:#111;width:0}
.ofx-phases{display:flex;justify-content:space-between;gap:8px;margin-top:12px;font:600 11px/1.3 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#b5b5b5}
.ofx-phases span{transition:color .3s}
.ofx-phases span.on{color:#111}
.ofx-pct{position:absolute;right:16px;top:0;font:600 12px ui-monospace,monospace;letter-spacing:.16em;color:#111}
.ofx-pct b{font-size:30px;letter-spacing:0}
@media (max-width:640px){
  .ofx-phases{font-size:8.5px;letter-spacing:.06em}
  .ofx-pct b{font-size:22px}
}

/* ---------- Pasos como ladrillos ---------- */
.ofx-brick{opacity:0;transform:translateY(-160px) rotate(var(--r))}
.ofx-brick.land{animation:ofxDrop .95s cubic-bezier(.3,1.3,.5,1) forwards;animation-delay:var(--d)}
@keyframes ofxDrop{0%{opacity:0;transform:translateY(-170px) rotate(var(--r))}35%{opacity:1}100%{opacity:1;transform:none}}
.ofx-puff{position:absolute;left:5%;right:5%;bottom:-10px;height:22px;pointer-events:none;background:radial-gradient(ellipse at center,rgba(150,128,96,.45),transparent 70%);opacity:0}
.land .ofx-puff{animation:ofxPuff 1s forwards;animation-delay:calc(var(--d) + .42s)}
@keyframes ofxPuff{0%{opacity:0;transform:scale(.3,.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.9,1.3) translateY(-6px)}}

/* ---------- Barras de precio ---------- */
.ofx-rng{position:relative;height:8px;border-radius:4px;background:rgba(0,0,0,.08);margin:10px 0 18px;min-width:140px}
.ofx-rng i{position:absolute;top:0;bottom:0;border-radius:4px;left:var(--a);width:var(--w);transform-origin:left;transform:scaleX(0);transition:transform 1.3s cubic-bezier(.2,.8,.2,1) var(--dl);background:linear-gradient(90deg,#d9b779,#8a6a35)}
.ofx-rng.wk i{background:linear-gradient(90deg,#6fa0c8,#2a5d8a)}
.ofx-rng.go i{transform:scaleX(1)}
.ofx-rng s{position:absolute;top:12px;font:600 10px ui-monospace,monospace;color:#999;text-decoration:none;transform:translateX(-50%);opacity:0;transition:opacity .6s calc(var(--dl) + .9s)}
.ofx-rng.go s{opacity:1}
.ofx-rng.na{background:repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 6px,transparent 6px 10px);overflow:hidden}
.ofx-rng.na::after{content:'';position:absolute;inset:0;width:30%;background:linear-gradient(90deg,transparent,rgba(200,164,106,.7),transparent);animation:ofxShim 2s linear infinite}
@keyframes ofxShim{from{transform:translateX(-100%)}to{transform:translateX(400%)}}