/* ══════════════════════════════════════════════════════════════
   MESA-COFRE — símbolo de marca do Programa Empresário Estratégico
   O disco da fechadura visto de frente É a mesa vista de cima:
   os seis tambores são as seis cadeiras de gerente.

   USO:  <link rel="stylesheet" href="/assets/mesa-cofre.css">
         <figure class="mesacofre" data-lit="1"> … </figure>
         <script src="/assets/mesa-cofre.js" defer></script>

   data-lit = quantos dígitos estão acesos (1 a 6).
   Com 6, o centro abre. Com menos, fica TRANCADO e mostra "N DE 6"
   — é isso que faz o lead ver que falta combinação para abrir o cofre.

   Todas as variáveis têm valor de reserva, então funciona em qualquer
   página do funil mesmo que ela não declare os tokens.
   ══════════════════════════════════════════════════════════════ */

.mesacofre{
  display:flex; flex-direction:column; align-items:center;
  margin:clamp(26px,4vw,40px) auto 0; padding:0;
}
.mesacofre svg{
  display:block; width:min(430px,84vw); height:auto;
  filter:drop-shadow(0 0 40px rgba(247,189,72,.14));
}

@keyframes mc-dial{to{transform:rotate(360deg)}}
.mesacofre .aro{transform-origin:210px 210px; animation:mc-dial 90s linear infinite}

/* ── as cadeiras / tambores ── */
.mc-seat{opacity:.34; transition:opacity .5s ease}
.mc-seat .pod{
  fill:#0d0b08; stroke:var(--line,#2a241a); stroke-width:1.5;
  transition:stroke .5s ease, fill .5s ease;
}
.mc-seat .num{
  font-family:var(--mono,'JetBrains Mono',monospace); font-size:19px; font-weight:700;
  fill:var(--ink3,#7d7563); transition:fill .5s ease;
}
.mc-seat .raio{stroke:var(--line,#2a241a); stroke-width:1; transition:stroke .5s ease}

.mesacofre.on .mc-seat.lit{opacity:1}
.mesacofre.on .mc-seat.lit .pod{stroke:var(--gold,#f7bd48); fill:#1a1610}
.mesacofre.on .mc-seat.lit .num{fill:var(--gold,#f7bd48)}
.mesacofre.on .mc-seat.lit .raio{stroke:rgba(247,189,72,.32)}

/* ── o tampo da mesa = o miolo da fechadura ── */
.mc-mesa{
  fill:rgba(247,189,72,.05); stroke:rgba(247,189,72,.26); stroke-width:1.5;
  transition:fill .6s ease, stroke .6s ease;
}
.mesacofre.aberto .mc-mesa{fill:rgba(0,230,118,.07); stroke:rgba(0,230,118,.4)}

.mc-alvo{
  font-family:var(--mono,'JetBrains Mono',monospace); font-size:11.5px; font-weight:700;
  letter-spacing:.24em; fill:var(--ink2,#b7ae99);
}
.mc-estado{
  font-family:var(--mono,'JetBrains Mono',monospace); font-size:12px; font-weight:700;
  letter-spacing:.2em; fill:var(--ink3,#7d7563); transition:fill .6s ease;
}
.mesacofre.aberto .mc-estado{fill:var(--cta,var(--green,#00E676))}
.mc-conta{
  font-family:var(--mono,'JetBrains Mono',monospace); font-size:10px; font-weight:700;
  letter-spacing:.2em; fill:var(--ink3,#7d7563);
}

/* ── legenda ── */
.mc-legenda{
  margin-top:clamp(16px,2.2vw,22px); text-align:center; max-width:34ch;
  font-family:var(--disp,'Space Grotesk',sans-serif);
  font-size:clamp(15.5px,1.9vw,19px); font-weight:600; line-height:1.4;
  color:var(--ink,#ece7db);
}
.mc-legenda em{font-style:normal; color:var(--gold,#f7bd48)}

/* ── quem tem animação reduzida vê tudo parado, não vê nada ── */
@media (prefers-reduced-motion:reduce){
  .mesacofre .aro{animation:none}
  .mc-seat{opacity:1}
}