/* =========================================================
   Recorrido 3D (Three.js) — pantalla completa, estilo Apple
   Si el navegador no soporta 3D o el usuario pide "reducir
   movimiento", se muestra el recorrido ilustrado (#tour).
   ========================================================= */
.t3d { display: none; }
html.use-3d .t3d { display: block; position: relative; height: 640vh; background: #040a18; color: #fff; }
html.use-3d #tour { display: none; }

.t3d__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.t3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s var(--ease); }
.t3d.is-ready .t3d__canvas { opacity: 1; }
.t3d__scrim { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(4,10,24,.92) 0%, rgba(4,10,24,.72) 30%, rgba(4,10,24,0) 58%),
  linear-gradient(180deg, rgba(4,10,24,.55) 0%, rgba(4,10,24,0) 18%, rgba(4,10,24,0) 82%, rgba(4,10,24,.7) 100%); }

.t3d__label { position: absolute; right: 24px; top: 92px; z-index: 3; display: inline-flex; align-items: center; gap: .45em; padding: .42em .85em; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #dbeefa; background: rgba(5,13,29,.6); border: 1px solid rgba(143,211,247,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.t3d__cards { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.t3d__card { position: absolute; left: max(20px, calc((100vw - 1240px) / 2 + 20px)); top: 50%; width: min(520px, 42vw); margin-top: 20px; translate: 0 -50%; opacity: 0; will-change: opacity, transform; }
.t3d__card.is-active { pointer-events: auto; }
.t3d__card .chip { margin-bottom: 18px; }
.t3d__title { color: #fff; font-size: clamp(2rem, 3.6vw, 3.3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; margin: 0 0 .45em; text-shadow: 0 2px 30px rgba(4,10,24,.6); }
.t3d__lead { color: #c7d8ea; font-size: clamp(1rem, 1.3vw, 1.14rem); }
.t3d__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 18px; }
.t3d__hint { display: inline-flex; align-items: center; gap: .7em; color: #9fb6cc; font-size: .88rem; font-weight: 600; margin: 4px 0 0; }

.t3d__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(143,211,247,.12); z-index: 3; }
.t3d__bar span { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 12px rgba(79,179,232,.8); }
.t3d__skip { position: absolute; right: 22px; bottom: 16px; z-index: 3; color: #8ea7bf; font-size: .82rem; font-weight: 600; text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.t3d__skip:hover, .t3d__skip:focus-visible { color: #fff; }

@media (max-width: 860px), (pointer: coarse) and (max-width: 1024px) {
  html.use-3d .t3d { height: 560vh; }
  .t3d__scrim { background: linear-gradient(180deg, rgba(4,10,24,.55) 0%, rgba(4,10,24,0) 16%, rgba(4,10,24,0) 44%, rgba(4,10,24,.9) 62%, #040a18 100%); }
  .t3d__card { left: 16px; right: 16px; width: auto; top: auto; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); translate: none; margin: 0; }
  .t3d__title { font-size: clamp(1.55rem, 6.6vw, 2.2rem); }
  .t3d__lead { font-size: .97rem; margin-bottom: 0; }
  .t3d__lead--d { display: none; }
  .t3d__card .chip { margin-bottom: 10px; font-size: .74rem; }
  .t3d__ctas { margin: 16px 0 10px; gap: 10px; flex-wrap: nowrap; }
  .t3d__ctas .btn--lg { padding: .8em 1em; font-size: .9rem; white-space: nowrap; }
  .t3d__card .tour__list { gap: 8px; }
  .t3d__card .tour__list li { padding: 7px 12px; font-size: .86rem; line-height: 1.4; }
  .t3d__label { right: auto; left: 16px; top: calc(80px + env(safe-area-inset-top, 0px)); }
  .t3d__label-long { display: none; }
  .t3d__skip { display: none; }
  .t3d__hint { font-size: .8rem; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .t3d__card .tour__list span { display: none; }
  .t3d__hint { display: none; }
}