/* ============================================================
   TAO MÉXICO — PIEZAS 3D
   Contenedores de los lienzos de Three.js: enso volumétrico,
   mapa de terrenos y maqueta de obra.

   Solo la cargan las cuatro páginas que tienen 3D
   (index, nosotros, terrenos, avances). Las otras cinco no
   pagan ni este CSS ni Three.js.

   Cada lienzo se monta sobre una imagen o una lista de respaldo:
   si el equipo no tiene WebGL, no queda un hueco.
   ============================================================ */

.enso3d-slot{
  position:absolute;right:-4%;top:50%;translate:0 -50%;
  width:min(660px,52vw);aspect-ratio:1;z-index:1;pointer-events:none;
}
.enso3d-slot.centered{
  left:50%;right:auto;translate:-50% -50%;
  width:min(620px,80vw);
}
.enso3d-fallback{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:.09;transition:opacity .6s
}
.enso3d{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.2s var(--e-out)
}
.enso3d.is-live{opacity:1}
/* de fondo tras la cita: presente, pero sin robarle legibilidad al texto */
.enso3d-slot.centered .enso3d.is-live{opacity:.5}
.enso3d-slot.centered::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(27,25,22,.62),transparent 78%)
}
.enso3d-slot.is-live .enso3d-fallback{opacity:0}
@media(max-width:900px){
  .enso3d-slot{right:-24%;width:min(460px,80vw);opacity:.75}
  .enso3d-slot.centered{width:min(480px,86vw)}
}
@media (prefers-reduced-motion:reduce){
  .enso3d{transition:none}
}


/* ---------- mapa 3D de terrenos ---------- */
.mapa3d-slot{
  position:relative;width:100%;aspect-ratio:16/9;max-height:70svh;
  background:radial-gradient(60% 70% at 50% 40%,rgba(188,171,124,.07),transparent 70%);
  border-top:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink);
  margin-bottom:clamp(10px,1.5vw,20px);
}
.mapa3d{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.2s var(--e-out);touch-action:pan-y}
.mapa3d.is-live{opacity:1}
.mapa3d-hint{
  position:absolute;left:0;bottom:14px;margin:0;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-on-ink-dim);
  opacity:0;transition:opacity .8s var(--e-out) .6s
}
.mapa3d-slot.is-live .mapa3d-hint{opacity:.75}
.mapa3d-tip{
  position:absolute;z-index:3;pointer-events:none;translate:14px -50%;
  background:rgba(27,25,22,.88);border:1px solid var(--line-ink);backdrop-filter:blur(8px);
  padding:9px 14px;display:grid;gap:2px;white-space:nowrap;
  opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s var(--e-out)
}
.mapa3d-tip.on{opacity:1;transform:none}
.mapa3d-tip b{font-family:var(--f-display);font-weight:400;font-size:16px;color:var(--paper)}
.mapa3d-tip span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
@media(max-width:700px){.mapa3d-slot{aspect-ratio:4/3}}

/* ---------- maqueta 3D ---------- */
.massing-slot{
  position:relative;width:100%;aspect-ratio:16/9;max-height:74svh;
  background:
    radial-gradient(58% 62% at 50% 62%,rgba(188,171,124,.09),transparent 72%),
    linear-gradient(180deg,transparent,rgba(188,171,124,.04));
  border-top:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink);
}
.massing{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.2s var(--e-out);touch-action:pan-y}
.massing.is-live{opacity:1}
.massing-hint{
  position:absolute;left:0;bottom:14px;margin:0;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-on-ink-dim);
  opacity:0;transition:opacity .8s var(--e-out) .6s
}
.massing-slot.is-live .massing-hint{opacity:.75}
@media(max-width:700px){.massing-slot{aspect-ratio:1/1}}