/* ============================================================================
   ESPECTÁCULO — capa de 3D y motion graphics de la portada
   Va encima de site.css y no cambia nada de lo que ya funciona: si el
   navegador no tiene WebGL o el usuario pide menos movimiento, la página se
   queda como estaba (y la sección de la bola de nieve se lee en estático).
   ========================================================================= */

/* ── 1 · Polvo de oro en el hero ─────────────────────────────────────────── */
#polvo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;opacity:0;transition:opacity 1.6s var(--ease)}
#polvo.is-on{opacity:1}
.stage__panel picture{will-change:transform;transform:scale(1.04)}
.stage h1 em{
  background:linear-gradient(100deg,var(--oro-alto) 0%,var(--oro-alto) 38%,#fff6dc 48%,var(--oro) 56%,var(--oro-alto) 70%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:brillo 6.5s var(--ease-io) 2.2s infinite;
}
@keyframes brillo{0%{background-position:120% 0}55%,100%{background-position:-40% 0}}

/* ── 2 · La bola de nieve, al revés ─────────────────────────────────────── */
.bola{position:relative;background:radial-gradient(70% 60% at 50% 45%,rgba(31,62,41,.55),transparent 70%),var(--v-990);overflow:hidden}
.bola__pin{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:center;padding-block:calc(var(--nav-h) + 24px) 40px}
.bola__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center}
.bola__txt .eyebrow{margin-bottom:22px}
.bola__txt h2{margin-bottom:clamp(18px,2.4vw,28px)}
.bola__label{font-family:var(--caps);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mf-46);display:block;margin-bottom:6px;transition:color .6s var(--ease)}
.bola__cifra{font-family:var(--serif);font-weight:600;font-size:clamp(3rem,7.4vw,6.4rem);line-height:.95;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--mf);display:block;transition:color .8s var(--ease),text-shadow .8s var(--ease)}
.bola__cifra small{font-size:.5em;margin-left:.08em;color:var(--mf-64)}
.bola.is-cero .bola__cifra{color:var(--oro-alto);text-shadow:0 0 60px rgba(232,214,168,.45)}
.bola.is-cero .bola__label{color:var(--oro)}
.bola__barra{position:relative;height:2px;background:var(--mf-08);border-radius:2px;margin:22px 0 18px;max-width:420px;overflow:hidden}
.bola__barra i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--oro-bajo),var(--oro-alto))}
.bola__fin{color:var(--mf-64);max-width:44ch;min-height:3em;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.bola__nota{margin-top:18px;font-size:.74rem;color:var(--mf-28);max-width:52ch}

.bola__escena{position:relative;aspect-ratio:1/1;width:100%;max-width:680px;justify-self:center}
.bola__escena canvas{position:absolute;inset:-12%;width:124%;height:124%;display:block}
.deudas{position:absolute;inset:0;pointer-events:none}
.deuda{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  padding:11px 15px 10px;border-radius:12px;min-width:150px;
  background:linear-gradient(160deg,#0E1D14,#08110C);
  border:1px solid rgba(232,131,111,.32);box-shadow:0 18px 40px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(245,241,233,.06);
  will-change:transform,opacity,filter;
}
.deuda b{display:block;font-family:var(--serif);font-weight:600;font-size:1.15rem;color:#F0A494;font-variant-numeric:tabular-nums}
.deuda span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mf-46)}
.deuda::after{content:'';position:absolute;left:12px;right:12px;top:50%;height:2px;background:var(--oro-alto);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);box-shadow:0 0 12px var(--oro-glow)}
.deuda.is-tachada::after{transform:scaleX(1)}

.sello{
  position:absolute;left:50%;top:50%;z-index:3;pointer-events:none;
  transform:translate(-50%,-50%) rotate(-11deg) scale(2.4);opacity:0;
  padding:16px 28px 14px;border:3px solid var(--oro);border-radius:10px;text-align:center;
  color:var(--oro-alto);background:rgba(7,14,10,.78);
  box-shadow:0 0 0 6px rgba(201,169,97,.12),0 0 80px rgba(201,169,97,.35);
}
.sello b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,4.4vw,3.2rem);letter-spacing:.14em;line-height:1}
.sello span{display:block;margin-top:8px;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.bola.is-cero .sello{animation:sello .7s cubic-bezier(.2,1.6,.4,1) forwards}
.bola.is-cero .bola__escena{animation:golpe .5s .18s var(--ease)}
@keyframes sello{0%{opacity:0;transform:translate(-50%,-50%) rotate(-11deg) scale(2.4)}60%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) rotate(-11deg) scale(1)}}
@keyframes golpe{0%,100%{transform:none}20%{transform:translate(3px,-2px)}40%{transform:translate(-3px,2px)}60%{transform:translate(2px,1px)}}

/* Sin animación (o sin JS): se lee como una lista tachada y el sello puesto */
.bola--estatica .deuda::after{transform:scaleX(1)}
.bola--estatica .sello{opacity:1;transform:translate(-50%,-50%) rotate(-11deg) scale(1)}

@media (max-width:900px){
  .bola__grid{grid-template-columns:minmax(0,1fr)}
  .bola__pin{padding-block:calc(var(--nav-h) + 8px) 24px;align-items:start}
  .bola__txt h2{font-size:clamp(1.9rem,8vw,2.6rem)}
  .bola__escena{width:min(88vw,44svh);order:-1;margin:0 auto}
  .bola__txt .eyebrow{margin-bottom:10px}
  .bola__txt h2{margin-bottom:10px}
  .bola__cifra{font-size:clamp(2.4rem,12vw,3.2rem)}
  .bola__nota{margin-top:8px;font-size:.66rem}
  .deuda{min-width:0;padding:6px 9px 5px;border-radius:9px;white-space:nowrap}
  .deuda b{font-size:.82rem}
  .deuda span{font-size:.5rem;letter-spacing:.08em}
  .sello{padding:10px 16px 9px}
  .sello span{font-size:.5rem;letter-spacing:.16em}
  .bola__barra{margin:14px 0 12px}
  .bola__fin{min-height:0;font-size:.92rem}
}

/* ── 3 · Medallas como monedas 3D ───────────────────────────────────────── */
.award{perspective:900px}
.award img{transform-style:preserve-3d;transition:transform .7s var(--ease);will-change:transform;
  transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));filter:drop-shadow(0 22px 30px rgba(0,0,0,.55))}
.award::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,30%),rgba(232,214,168,.16),transparent 60%)}
.award:hover::after{opacity:1}
.award.is-girando img{animation:moneda 1.6s var(--ease) backwards}
@keyframes moneda{0%{transform:rotateY(-540deg) scale(.7);opacity:0}60%{opacity:1}100%{transform:rotateY(0) scale(1);opacity:1}}

/* ── 4 · Cursor y botones magnéticos (solo ratón) ───────────────────────── */
.cursor,.cursor__punto{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;border-radius:50%;opacity:0;transition:opacity .3s}
.cursor{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(232,214,168,.55);
  transition:opacity .3s,width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background-color .35s,border-color .35s}
.cursor__punto{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--oro-alto)}
.con-cursor .cursor,.con-cursor .cursor__punto{opacity:1}
.cursor.is-sobre{width:70px;height:70px;margin:-35px 0 0 -35px;background:rgba(201,169,97,.12);border-color:rgba(232,214,168,.8)}
.btn{will-change:transform}

/* ── 5 · Parallax en la banda de premios ────────────────────────────────── */
.reel img{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .stage h1 em{animation:none;color:var(--oro-alto);background:none}
  .cursor,.cursor__punto{display:none}
}