/* Demo · piso que se construye al bajar */
:root{--plano:#1F3F8F}
@media (prefers-color-scheme: dark){:root:not([data-tema="claro"]){--plano:#8FA8E8}}
:root[data-tema="oscuro"]{--plano:#8FA8E8}

.cabecera{position:absolute;left:0;right:0;top:0;background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
#recorrido{position:relative;height:900vh}
.escena{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--fondo);
  background-image:linear-gradient(var(--retic) 1px,transparent 1px),linear-gradient(90deg,var(--retic) 1px,transparent 1px);background-size:36px 36px}
.escena canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cielo,.noche{position:absolute;inset:0;opacity:0;pointer-events:none}
.cielo{background:linear-gradient(180deg,#F6C28B 0%,#F09B6B 38%,#B9789A 75%,#6E5E8F 100%)}
.noche{background:linear-gradient(180deg,#1B1D33 0%,#2C2747 55%,#4A3552 100%)}

.etiquetas{position:absolute;inset:0;pointer-events:none}
.etq{position:absolute;left:0;top:0;transform:translate(-50%,-50%);text-align:center;white-space:nowrap;opacity:0;will-change:transform,opacity;
  background:color-mix(in srgb,var(--tarjeta) 88%,transparent);border:1px solid var(--linea);border-radius:10px;padding:4px 9px 3px;box-shadow:0 6px 14px -10px var(--sombra)}
.etq b{display:block;font-size:13px;font-weight:800;line-height:1.15}
.etq span{display:block;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px;color:var(--naranja-txt);line-height:1.2}
.etq.cota{background:none;border:0;box-shadow:none;padding:0}
.etq.cota span{color:var(--plano);font-size:12.5px}
@media (min-width:900px){.etq b{font-size:14px}.etq span{font-size:14px}}

#intro{position:absolute;left:0;right:0;top:118px;padding:0 16px;text-align:center;pointer-events:none}
#intro h1{font-size:clamp(34px,9.4vw,84px);margin:0 auto}
#intro .antetitulo{margin-bottom:12px;font-size:12.5px}
#intro .baja{margin-top:14px;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
#intro .baja span{display:inline-block;animation:baja 1.6s ease-in-out infinite}
@keyframes baja{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.avance{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:5px;list-style:none;opacity:0;transition:opacity .3s}
.avance.ver{opacity:1}
.avance li{width:28px;height:4px;border-radius:2px;background:var(--linea);overflow:hidden}
.avance li i{display:block;height:100%;width:100%;background:var(--naranja);transform-origin:left;transform:scaleX(0)}

.rotulo{position:absolute;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));background:var(--tarjeta);border:1px solid var(--linea);border-radius:18px;
  padding:14px 18px 15px;box-shadow:0 18px 30px -22px var(--sombra);opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s}
.rotulo.ver{opacity:1;transform:none}
.rotulo .num{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.14em;color:var(--naranja-txt);font-weight:600}
.rotulo h2{font-weight:900;font-stretch:85%;text-transform:uppercase;font-size:clamp(24px,6.4vw,34px);line-height:1;margin:4px 0 6px;letter-spacing:-.01em}
.rotulo p{font-size:16px;line-height:1.4;color:var(--suave)}
.rotulo .cta{margin-top:12px}
.rotulo .boton{font-size:16px;padding:11px 20px}
.rotulo.cambia h2,.rotulo.cambia p{opacity:0;transform:translateY(4px)}
.rotulo h2,.rotulo p{transition:opacity .22s,transform .22s}
@media (min-width:900px){.rotulo{left:32px;right:auto;bottom:32px;width:400px;padding:18px 22px}}
.ficticio{position:absolute;right:12px;top:16px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--suave);opacity:0;transition:opacity .3s}
.ficticio.ver{opacity:.9}
@media (max-width:899px){.ficticio{top:auto;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateY(-100%);margin-bottom:-2px;display:none}}

/* después del recorrido */
#despues{padding:56px 0 64px}
#despues h2{font-weight:900;font-stretch:85%;text-transform:uppercase;font-size:clamp(30px,5vw,48px);line-height:.95;margin:56px 0 10px}
#despues .intro{position:static;padding:0;text-align:left;color:var(--suave);max-width:640px}
.final{padding:30px}
.final h2{margin:0 0 14px!important}
.final h2 em{font-style:normal;color:var(--naranja-txt)}
.final p{color:var(--suave);max-width:620px;margin-bottom:22px}
.final .antetitulo{margin-bottom:12px}
.pasos{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px}
@media (max-width:760px){.pasos{grid-template-columns:1fr}}
.paso{background:var(--tarjeta);border:1px solid var(--linea);border-radius:18px;padding:18px 20px}
.paso b{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.1em;color:var(--naranja-txt);display:block;margin-bottom:6px}
.paso p{color:var(--suave);font-size:16px}
.nota{margin-top:22px;font-size:15px;color:var(--suave)}

/* sin WebGL */
.sin3d{padding:120px 0 20px}
.plano2d svg{width:100%;height:auto;max-width:640px;display:block;margin-top:18px}
html.sin-3d #recorrido{height:auto}
html.sin-3d .escena{display:none}
@media (prefers-reduced-motion: reduce){#recorrido{height:700vh}#intro .baja span{animation:none}}
@media (min-width:900px){
  #intro{left:6vw;right:auto;width:min(40vw,560px);top:50%;transform:translateY(-50%);text-align:left;padding:0}
  #intro h1{margin:0;font-size:clamp(48px,5.6vw,92px)}
}