/* ===================================================================
   BIM EXPERIENCE — recorrido inmersivo (proyectos.html)
   Progressive enhancement: por defecto se muestran las tarjetas planas
   (.bim-fallback). Solo si hay WebGL y el dispositivo lo soporta bien,
   experience.js añade la clase .is-3d y activa el canvas Three.js.
   =================================================================== */

.bim-experience{ position:relative; }

.skip-link{
  position:absolute; left:16px; top:-48px; z-index:50;
  background:var(--mustard); color:var(--on-accent);
  font-family:'IBM Plex Mono',monospace; font-size:12px;
  padding:10px 16px; border-radius:var(--radius);
  transition:top .2s ease;
}
.skip-link:focus{ top:16px; }

/* ---------- Fallback plano (siempre presente en el DOM) ---------- */
.bim-fallback{ padding:88px 0 96px; border-bottom:1px solid var(--line); }
.bim-fallback-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:36px;
}
.bim-fallback-grid article{
  background:var(--graphite-900); padding:32px 24px; min-height:200px;
  display:flex; flex-direction:column; gap:10px;
}
.bim-fallback-grid .bim-stage-index{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--mustard);
  letter-spacing:.08em;
}
.bim-fallback-grid h3{ font-size:19px; font-weight:600; color:var(--white); }
.bim-fallback-grid p{ font-size:13.5px; color:var(--gray-500); line-height:1.55; }
@media (max-width:900px){ .bim-fallback-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .bim-fallback-grid{ grid-template-columns:1fr; } }

/* ---------- Modo 3D (activado solo por JS vía .is-3d) ---------- */
.bim-experience.is-3d .bim-fallback{ display:none; }
.bim-experience.is-3d{ height:400vh; border-bottom:1px solid var(--line); }

.bim-sticky{ display:none; }
.bim-experience.is-3d .bim-sticky{
  display:block; position:sticky; top:0; height:100vh; width:100%;
  overflow:hidden; background:var(--graphite-950);
}

#bim-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.bim-overlay{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:150px 24px 40px; pointer-events:none;
}

.bim-progress{ width:100%; max-width:1180px; margin:0 auto; height:2px; background:var(--line-soft); }
.bim-progress-fill{ height:100%; width:0%; background:var(--mustard); transition:width .05s linear; }

.bim-stage-text{
  max-width:520px; margin:0 auto; text-align:center;
  transition:opacity .35s ease, transform .35s ease;
}
.bim-stage-text.is-changing{ opacity:0; transform:translateY(8px); }
.bim-stage-index{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:var(--mustard); letter-spacing:.1em; margin-bottom:12px;
}
.bim-stage-text h2{
  font-size:clamp(26px,4vw,42px); font-weight:600; color:var(--white); margin-bottom:12px;
}
.bim-stage-text p{ font-size:14.5px; color:var(--gray-300); line-height:1.6; }

.bim-stage-dots{ display:flex; gap:10px; justify-content:center; pointer-events:auto; }
.bim-stage-dots button{
  width:8px; height:8px; border-radius:50%; border:1px solid var(--line);
  background:transparent; cursor:pointer; padding:0; transition:all .2s ease;
}
.bim-stage-dots button.active{ background:var(--mustard); border-color:var(--mustard); width:22px; border-radius:4px; }
.bim-stage-dots button:hover{ border-color:var(--mustard-bright); }

@media (max-width:760px){
  .bim-overlay{ padding:120px 20px 32px; }
  .bim-stage-text p{ display:none; } /* menos texto en móvil, más foco en la escena */
}