/* =====================================================================
   Arcova — 3D hero (arch3d.js). Canvas layer + mono overlays.
   ===================================================================== */
.hero .arch3d{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:1;will-change:opacity}
.hero.has-3d{touch-action:pan-y}
.hero.has-3d.is-dragging{cursor:grabbing}
.arch3d__canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}

/* impact flash */
.arch3d__flash{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 45%,rgba(255,255,255,.95),rgba(103,232,249,.35) 40%,transparent 70%);opacity:0;mix-blend-mode:screen;pointer-events:none}

/* blueprint measurement labels (projected from 3D) */
.arch3d__labels{position:absolute;inset:0;opacity:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9fdcff}
.arch3d__labels span{position:absolute;left:0;top:0;white-space:nowrap;padding:3px 7px;border:1px solid rgba(159,220,255,.35);border-radius:3px;background:rgba(7,7,11,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transform-origin:0 0;margin:-10px 0 0 10px}
.arch3d__labels span::before{content:"";position:absolute;left:-7px;top:50%;width:6px;height:1px;background:rgba(159,220,255,.6)}

/* 01 Visión → 02 Estructura → 03 Realidad */
.arch3d__steps{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.arch3d__steps span{display:inline-flex;gap:8px;opacity:.4;transition:opacity .6s var(--ease),color .6s}
.arch3d__steps span b{font-weight:500;color:#fff;opacity:.6}
.arch3d__steps span i{font-style:normal}
.arch3d__steps span.is-on{opacity:1;color:#fff}
.arch3d__steps span.is-on b{opacity:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.arch3d__steps em{font-style:normal;opacity:.3}
.arch3d__steps u{position:absolute;left:0;right:0;bottom:-12px;height:1px;background:rgba(255,255,255,.12);text-decoration:none}
.arch3d__steps u s{position:absolute;inset:0;background:var(--grad);transform:scaleX(0);transform-origin:left;text-decoration:none}

/* while the 3D hero runs, the canvas is the background: keep copy above it */
.hero.has-3d .hero__title,.hero.has-3d .hero__top,.hero.has-3d .hero__bottom{will-change:transform,opacity}
.hero.has-3d .hero__title{text-shadow:0 2px 40px rgba(7,7,11,.5)}

@media (max-width:820px){
  .arch3d__steps{bottom:10px;font-size:10px;gap:10px}
  .arch3d__steps u{display:none}
  .arch3d__labels{font-size:9px}
  .arch3d__labels span:nth-child(4){display:none}
}
@media (prefers-reduced-motion:reduce){
  .arch3d__steps u{display:none}
}