.hero3d-wrapper{
  position:relative;
  height:900vh;                 
  background:#0a0d12;
}

body.sin-3d .hero3d-wrapper{ height:100svh; min-height:420px; }
body.sin-3d .hero3d-progress-track,
body.sin-3d .hero3d-hint,
body.sin-3d .hero3d-skip,
body.sin-3d .hero3d-card,
body.sin-3d #hero3d-canvas{ display:none !important; }
#hero3d-fallback{ display:none; }
#hero3d-fallback.on{
  display:block; position:absolute; inset:0; z-index:1;
}
#hero3d-fallback img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.hero3d-sticky{
  position:sticky; top:0;
  height:100vh; width:100%;
  overflow:hidden;
}
#hero3d-canvas{ display:block; width:100%; height:100%; }

#hero3d-loader{
  position:absolute; inset:0; z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#0a0d12; transition:opacity .8s ease;
}
#hero3d-loader.hidden{ opacity:0; pointer-events:none; }
.hero3d-loader-txt{
  font-size:12px; letter-spacing:3px; color:rgba(255,255,255,.55);
}
.hero3d-loader-bar{
  width:180px; height:2px; margin-top:18px; overflow:hidden;
  background:rgba(255,255,255,.12);
}
.hero3d-loader-fill{
  height:100%; width:0%; background:var(--naranja); transition:width .2s;
}

.hero3d-copy{
  position:absolute; top:11%; left:0; width:100%;
  z-index:10; text-align:center; padding:0 20px; pointer-events:none;
}

.hero3d-copy .hero3d-estrella{
  display:inline-block; margin:0 0 18px; padding:8px 20px;
  border-radius:999px;
  background: var(--naranja);
  color:#12212C;
  font-size:13px; font-weight:800; letter-spacing:2.2px; text-transform:uppercase;
  
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}

.hero3d-copy .hero3d-title{
  font-size:clamp(30px,5.5vw,64px); font-weight:700;
  letter-spacing:1px; line-height:1.25; color:#fff; margin:0;
}

.hero3d-stages{
  position:absolute; bottom:7%; left:50%; transform:translateX(-50%);
  z-index:10; display:flex; gap:34px; flex-wrap:wrap;
  justify-content:center; padding:0 20px;
}
.hero3d-stage{
  font-size:11px; letter-spacing:2px; white-space:nowrap;
  color:rgba(237,239,242,.28); transition:color .4s;
}
.hero3d-stage.active{ color:var(--naranja); }

.hero3d-progress-track{
  position:absolute; bottom:5.4%; left:50%; transform:translateX(-50%);
  z-index:10; width:220px; height:1px; background:rgba(237,239,242,.14);
}
.hero3d-progress-fill{
  height:100%; width:0%; background:var(--naranja); transition:width .05s linear;
}

.hero3d-hint{
  position:absolute; bottom:2.5%; left:50%; transform:translateX(-50%);
  z-index:10; font-size:11px; letter-spacing:2px;
  color:rgba(237,239,242,.4); animation:hero3dBob 1.8s infinite;
}
@keyframes hero3dBob{
  0%,100%{ transform:translate(-50%,0); }
  50%{ transform:translate(-50%,7px); }
}

.hero3d-skip{
  position:absolute; right:26px; top:100px; z-index:20;
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 19px; border-radius:999px;
  background:rgba(12,18,26,.55); border:1px solid rgba(237,239,242,.30);
  color:#EDEFF2; font-family:inherit; font-size:12px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .25s, border-color .25s, color .25s;
}
.hero3d-skip svg{ width:15px; height:15px; flex-shrink:0; }
.hero3d-skip:hover,
.hero3d-skip:focus-visible{
  background:var(--naranja); border-color:var(--naranja); color:#fff;
}

#hero3d-stats{
  position:absolute; top:12px; right:12px; z-index:30; display:none;
  font:12px/1.55 ui-monospace, Consolas, monospace; color:#9be29b;
  background:rgba(0,0,0,.62); padding:9px 12px; border-radius:5px;
  white-space:pre; pointer-events:none;
}
#hero3d-stats.on{ display:block; }

.hero3d-vignette{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,0) 45%, rgba(0,0,0,.42) 100%);
}

.hero3d-card{
  position:absolute; left:6%; top:50%; z-index:11;
  width:min(360px,80vw); padding:22px 26px 22px 30px; pointer-events:none;
  background:rgba(9,18,30,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-left:3px solid var(--naranja);
  border-radius:2px 8px 8px 2px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  opacity:0; transform:translate(-24px,-50%);
  transition:opacity .55s ease, transform .55s ease;
}
.hero3d-card.visible{ opacity:1; transform:translate(0,-50%); }
.hero3d-card .hero3d-ic-eyebrow{
  font-size:10px; letter-spacing:3px; font-weight:700;
  color:var(--naranja); margin-bottom:10px;
}
.hero3d-card h3{
  font-size:21px; font-weight:700; line-height:1.2;
  margin:0 0 10px; letter-spacing:.4px; color:#fff;
}
.hero3d-card p{
  margin:0; font-size:13.5px; line-height:1.65; color:rgba(237,239,242,.72);
}

@media (max-width:760px){
  .hero3d-card{
    left:50%; top:auto; bottom:16%; width:min(420px,88vw);
    transform:translate(-50%,18px); padding:18px 20px 18px 22px;
  }
  .hero3d-card.visible{ transform:translate(-50%,0); }
  .hero3d-card h3{ font-size:18px; }
  .hero3d-card p{ font-size:12.5px; }
  .hero3d-stages{ gap:16px; bottom:9%; }
  .hero3d-stage{ font-size:9px; letter-spacing:1px; }
  
  .hero3d-skip{
    right:auto; left:50%; transform:translateX(-50%);
    top:92px; padding:9px 16px; font-size:11px;
  }
  .hero3d-copy .hero3d-estrella{ font-size:10.5px; letter-spacing:2px; padding:5px 13px; }
}

@media (prefers-reduced-motion: reduce){
  .hero3d-hint{ animation:none; }
}