/* Realtiq Lane (AU street) — world chrome: top bar, HUD, intro, overlay, help, no-3D fallback. Palette/typography from page.css. */
[hidden]{display:none!important}
html,body{height:100%}
body{overflow:hidden}
body.no3d,body.overlay-open{overflow:auto}
body.no3d{overflow:auto}
#gl{position:fixed;inset:0;z-index:0;background:#0a0e1a;cursor:grab;outline:none;touch-action:none}
#gl:focus-visible{outline:2px solid var(--amber);outline-offset:-4px}
#gl canvas{display:block;width:100vw;height:100vh}
/* the loading cover sits under the intro card and the top bar (their text and links are usable at once) and over the canvas until
   the street's first frames are drawn; its note sits under the top bar, clear of the intro card */
#loading{position:fixed;inset:0;z-index:14;display:grid;place-items:start center;padding-top:calc(env(safe-area-inset-top,0px) + 80px);background:var(--ink);color:var(--cream-60);font-size:14px;transition:opacity .5s ease}
#loading.is-gone{opacity:0;pointer-events:none}
.kicker{font-size:13px;color:var(--cream-60);margin:0 0 10px;font-weight:500}

/* top bar */
.topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:18px;padding:12px var(--pad);background:linear-gradient(to bottom,rgba(10,14,26,.9),rgba(10,14,26,0));pointer-events:none}
.topbar>*{pointer-events:auto}
.direct{display:flex;gap:18px;margin-left:auto;align-items:center}
.direct a{color:var(--cream-80);text-decoration:none;font-size:14.5px;padding:8px 2px;border-bottom:1px solid transparent}
.direct a:hover{color:var(--cream);border-bottom-color:var(--cream-40)}
.help-btn{border:1px solid var(--cream-40);background:rgba(10,14,26,.5);color:var(--cream);border-radius:999px;padding:8px 14px;font-size:14px;min-height:40px;cursor:pointer;flex:none;white-space:nowrap}
.help-btn .short{display:none;font-weight:600}
.topbar .lockup{flex:none}
.topbar .lockup svg,.pg-top .lockup svg{max-width:none;flex:none;width:.96em}
@media(max-width:420px){.help-btn{padding:0;width:40px;min-width:40px;justify-content:center;display:inline-flex;align-items:center}.help-btn .long{display:none}.help-btn .short{display:inline}.direct{gap:10px}.topbar{gap:8px}}
.help-btn:hover{border-color:var(--cream)}
.direct .short{display:none}
@media(max-width:640px){.direct a{font-size:13px;padding:8px 0;white-space:nowrap}.direct{gap:12px}.topbar{gap:10px}.help-btn{padding:8px 10px;font-size:13px;white-space:nowrap}.direct .long{display:none}.direct .short{display:inline}}

/* intro */
.intro{position:fixed;inset:0;z-index:15;display:grid;place-items:end start;padding:0 var(--pad) clamp(88px,16vh,150px);pointer-events:none;background:linear-gradient(to top,rgba(10,14,26,.72) 0%,rgba(10,14,26,.2) 55%,rgba(10,14,26,0) 100%);transition:opacity .5s ease}
.intro.is-gone{opacity:0}
.intro-card{pointer-events:auto;max-width:640px}
.intro h1{font-size:clamp(2.1rem,5.2vw,4.4rem);margin:0 0 18px;text-shadow:0 2px 24px rgba(10,14,26,.6)}
.intro h1 em{font-style:italic;font-weight:300}
.intro p{color:var(--cream-80);max-width:46ch;font-size:clamp(1rem,1.25vw,1.15rem)}
.intro-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.intro-direct{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px;max-width:640px}
.chip{--c:#ffd070;display:grid;gap:4px;text-decoration:none;color:var(--cream);background:rgba(10,14,26,.55);border:1px solid var(--cream-16);border-left:4px solid var(--c);border-radius:12px;padding:12px 14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .35s var(--out),border-color .25s,background .25s}
.chip b{font-size:14.5px;font-weight:600;line-height:1.25}
.chip span{font-size:12.5px;color:var(--cream-60);line-height:1.3}
.chip:hover{transform:translateY(-2px);border-color:var(--c);background:rgba(10,14,26,.72)}
.chip.webs{--c:#ff9a1f}.chip.contenido{--c:#3fbf8a}.chip.atencion{--c:#5a80ff}
.intro .kicker{color:var(--amber);letter-spacing:.12em;text-transform:uppercase;font-size:12px;font-weight:600}
.intro h1 em{color:var(--amber)}
/* Contact stays in the top nav from the very first load — the three service chips already live in the intro card, so on
   narrow screens the intro only trims the top nav down to Contact (see the max-width:820px rule below) to avoid duplication */
@media(max-width:640px){.intro-direct{grid-template-columns:1fr;gap:8px;margin-top:16px}.chip{padding:10px 12px}.intro{padding:112px var(--pad) calc(env(safe-area-inset-bottom,0px) + 28px);place-items:end center;overflow:auto;pointer-events:auto}.intro-card{max-width:100%}.intro h1{font-size:clamp(1.8rem,8vw,2.4rem);margin-bottom:12px}.intro p{font-size:14.5px}.intro-actions{gap:10px}.intro-foot{margin-top:12px}}

/* HUD */
.hud{position:fixed;left:0;right:0;bottom:0;z-index:16;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:16px;padding:18px var(--pad) calc(env(safe-area-inset-bottom,0px) + 16px);background:linear-gradient(to top,rgba(10,14,26,.88),rgba(10,14,26,.35) 70%,rgba(10,14,26,0));opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s var(--out);pointer-events:none}
.hud.is-on{opacity:1;transform:none;pointer-events:auto}
.hud.is-hidden{opacity:0;pointer-events:none}
.stop{min-width:0}
.stop-name{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.05;margin:0 0 6px;text-shadow:0 2px 18px rgba(10,14,26,.7)}
.stop-desc{margin:0;font-size:14.5px;color:var(--cream-80);max-width:42ch;line-height:1.45}
.proto-note{margin:6px 0 0;font-size:13.5px;color:var(--amber);border:1px dashed rgba(255,208,112,.5);border-radius:8px;padding:6px 10px;display:inline-block}
.controls{display:flex;align-items:center;gap:10px;justify-content:center}
.ctl{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--cream-40);background:rgba(10,14,26,.55);color:var(--cream);border-radius:999px;padding:10px 16px;min-height:48px;font-size:15px;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .12s var(--out)}
.ctl svg{width:18px;height:18px;flex:0 0 18px;max-width:none}
.ctl:hover{border-color:var(--cream);background:rgba(10,14,26,.75)}
.ctl:active{transform:scale(.97)}
.ctl[disabled]{opacity:.35;cursor:not-allowed}
.rail{display:flex;gap:6px;justify-content:flex-end;align-items:flex-end;flex-wrap:wrap}
.rail-btn{display:inline-flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:0;color:var(--cream-60);font-size:12px;padding:6px 8px;min-width:44px;min-height:44px;cursor:pointer;border-radius:8px}
.rail-btn i{display:block;width:10px;height:10px;border-radius:50%;border:2px solid var(--cream-40);transition:background .2s ease,border-color .2s ease,transform .2s var(--out)}
.rail-btn:hover{color:var(--cream)}
.rail-btn[aria-current="true"]{color:var(--cream)}
.rail-btn[aria-current="true"] i{background:var(--amber);border-color:var(--amber);transform:scale(1.2)}
@media(max-width:900px){
  .hud{grid-template-columns:1fr;gap:10px;padding:12px var(--pad) calc(env(safe-area-inset-bottom,0px) + 12px)}
  .stop-name{font-size:1.35rem}.stop-desc{font-size:13.5px;max-width:100%}
  .controls{justify-content:space-between}
  .ctl span{display:none}.ctl{padding:10px 14px}
  .rail{justify-content:center;flex-wrap:nowrap;overflow-x:auto;gap:2px;padding-bottom:2px;scrollbar-width:none}
  .rail-btn{font-size:11px;min-width:auto;padding:4px 6px}
}
@media(max-width:360px){.rail-btn span{display:none}.rail-btn{min-width:32px}.controls{gap:6px}.ctl{padding:10px 11px;min-height:44px}#enter{padding:10px 16px;font-size:15px;min-height:44px;min-width:0}}

/* help */
.help{position:fixed;right:var(--pad);top:64px;z-index:25;background:rgba(10,14,26,.96);border:1px solid var(--cream-16);border-radius:14px;padding:18px 20px;max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.help h2,.help .help-title{font-size:1.4rem;margin:0 0 10px;font-family:var(--serif);font-weight:300;letter-spacing:-.012em;line-height:1.05;text-wrap:balance}
.help ul{list-style:none;display:grid;gap:8px;font-size:14.5px;color:var(--cream-80);margin-bottom:14px}
.help b{color:var(--cream);font-weight:600}
@media(max-width:640px){.help{left:var(--pad);right:var(--pad);max-width:none}}

/* V6: full-viewport service page. The camera crosses the doorway and shows the room, then this edge-to-edge page fades in
   (same content and theme as the standalone page) and the 3D loop pauses behind it. Scrolls on its own; Escape / Back to the street / browser Back close it. */
.page{position:fixed;inset:0;z-index:30;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;opacity:0;transform:scale(1.03);transition:opacity .5s ease,transform .7s var(--out);pointer-events:none}
.page.is-on{opacity:1;transform:none;pointer-events:auto}
.page:focus{outline:none}
.page-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px var(--pad);background:color-mix(in srgb,var(--pg-bg) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--pg-ink-16)}
.page-bar .back{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--pg-ink-40);background:transparent;color:var(--pg-ink);border-radius:999px;padding:9px 16px;min-height:44px;font-size:15px;cursor:pointer;transition:border-color .2s,background .2s}
.page-bar .back svg{width:16px;height:16px;flex:0 0 16px;max-width:none}
.page-bar .back:hover{border-color:var(--pg-ink);background:var(--pg-ink-08)}
.page .overlay-title{font-family:var(--serif);font-size:1.25rem;color:var(--pg-ink);text-shadow:none}
.page .overlay-note{margin-left:auto;font-size:13px;color:var(--pg-ink-60);background:var(--pg-card-2);padding:5px 10px;border-radius:999px}
.page .sheet.ficha{padding-top:clamp(28px,5vw,64px)}
@media(max-width:640px){.page .overlay-title{display:none}.page .overlay-note{display:none}}
.direct .wide{display:inline}
@media(max-width:820px){.direct .wide{display:none}body.is-intro .direct a:not([href="/contact/"]){display:none}}   /* on the intro the three service cards are the way in, so the top nav trims to just Contact; the service links return once you start */

/* no-3D / reduced access: a readable street */
.textstreet{display:none}
body.no3d .textstreet{display:block}
body.no3d .topbar,body.no3d .hud,body.no3d .intro,body.no3d .help,body.no3d #overlay{display:none}
.textstreet .no3d-wrap{max-width:1000px;margin-inline:auto;padding:clamp(36px,6vw,80px) var(--pad) 80px}
.no3d h1{font-size:clamp(2.1rem,5vw,4rem);margin-bottom:16px}
.no3d h1 em{font-style:italic;font-weight:300}
.no3d-why{color:var(--cream-80);max-width:56ch}
.street-list{list-style:none;display:grid;gap:18px;counter-reset:s}
.shop-card{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;border:1px solid var(--cream-16);border-radius:14px;padding:18px;background:var(--ink-2)}
.shop-card h2{font-size:1.5rem;margin-bottom:6px}
.shop-card p{color:var(--cream-80);font-size:15px;max-width:52ch}
.shop-card .btn{margin-top:6px}
.shop-card.is-proto{border-style:dashed;opacity:.85}
.facade{position:relative;height:130px;border-radius:8px;background:#e6dccb;overflow:hidden;perspective:400px}
.facade i{position:absolute;display:block}
.facade .awning{left:9px;right:9px;top:18px;height:26px;background:repeating-linear-gradient(90deg,var(--amber) 0 18px,var(--cream) 18px 36px);transform:rotateX(35deg);transform-origin:top;border-radius:0 0 8px 8px}
.facade .win{top:52px;width:52px;height:60px;background:linear-gradient(#ffe2a6,#d9a24a);border:4px solid #3e2a1a;left:14px}
.facade .win+.door+.win,.facade .win:last-child{left:auto;right:14px}
.facade .door{top:50px;left:78px;width:44px;height:80px;background:#6b4a2e;border:4px solid #3e2a1a;border-bottom:0}
.facade .shutter{top:52px;left:14px;right:14px;height:78px;background:repeating-linear-gradient(#8d949f 0 6px,#c3c8d0 6px 9px,#6d737d 9px 12px)}
.facade .roof{left:20px;right:20px;top:10px;height:44px;background:var(--amber);clip-path:polygon(50% 0,100% 100%,0 100%)}
.facade .hatch{top:60px;left:60px;width:80px;height:48px;background:linear-gradient(#ffe2a6,#d9a24a);border:4px solid #2e3a5c}
.shop-card.kiosk .facade{background:#2e3a5c}
.facade.green .awning{background:repeating-linear-gradient(90deg,#8fb0a0 0 18px,var(--cream) 18px 36px)}
.facade.blue .awning{background:repeating-linear-gradient(90deg,#6f86b8 0 18px,var(--cream) 18px 36px)}
@media(max-width:640px){.shop-card{grid-template-columns:1fr}.facade{height:110px}}

@media(prefers-reduced-motion:reduce){
  .page,.hud,.intro,#loading,.rail-btn i,.ctl,.help-btn{transition:none}
}