/* VIGIL — seção #prova: círculos "Números que guiam a gestão" (opção A aprovada 09/08).
   Estrutura da referência + tokens do DS. Sem JS a seção fica 100% visível (classe pv-js só entra via script). */

.prova-band .pv-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,28px);justify-items:center;}

/* wrappers separados: entrada × flutuação não disputam o mesmo transform */
.prova-band.pv-js .pv-enter{opacity:0;transform:translateY(8px) scale(.98);}
.prova-band.pv-js .pv-enter{transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i)*220ms);}
.prova-band.pv-on .pv-enter{opacity:1;transform:none;}
.pv-float{will-change:transform;}
.prova-band.pv-on .pv-float{animation:pv-float var(--fdur,7s) ease-in-out var(--fdel,0s) infinite;}
@keyframes pv-float{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}

.pv-circle{position:relative;width:clamp(150px,17vw,225px);aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;
  border:1px solid rgba(109,162,248,.30);
  background:radial-gradient(60% 60% at 50% 38%,rgba(59,130,246,.06),transparent 70%);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);}

/* border beam: pseudo-elemento em anel, 1 volta em 1.4s e apaga; sobra a borda base */
.pv-circle::before{content:"";position:absolute;inset:-2px;border-radius:50%;padding:2px;opacity:0;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 295deg,rgba(59,130,246,.15) 318deg,rgba(147,197,253,.95) 345deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;}
.pv-circle.pv-beam::before{animation:pv-beam 1.4s var(--ease) forwards;}
@keyframes pv-beam{0%{opacity:0;transform:rotate(0deg)}12%{opacity:1}82%{opacity:1}100%{opacity:0;transform:rotate(360deg)}}

/* nós no anel */
.pv-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--brand);opacity:0;transition:opacity .5s var(--ease) .9s;}
.prova-band:not(.pv-js) .pv-dot,.prova-band.pv-on .pv-dot{opacity:.8;}
.pv-dot.d1{top:-3.5px;left:calc(50% - 3.5px);}
.pv-dot.d2{bottom:-3.5px;left:calc(50% - 3.5px);}
.pv-dot.d3{left:-3.5px;top:calc(50% - 3.5px);}
.pv-dot.d4{right:-3.5px;top:calc(50% - 3.5px);}

.pv-ic{display:flex;color:var(--brand-2);margin-bottom:6px;}
.pv-ic svg{width:clamp(26px,2.6vw,36px);height:clamp(26px,2.6vw,36px);stroke-width:1.5;}

.pv-circle b{font-family:'Rajdhani','Segoe UI',sans-serif;font-weight:700;line-height:1;font-size:clamp(44px,5vw,64px);
  background:linear-gradient(180deg,#E6FFFF,#6DA2F8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;}
.pv-circle h3{margin:0;font-family:'Rajdhani','Segoe UI',sans-serif;font-weight:600;font-size:clamp(11.5px,1.2vw,14.5px);
  letter-spacing:.09em;text-transform:uppercase;color:var(--text);max-width:82%;line-height:1.3;}
.pv-rule{width:26px;height:2px;background:var(--brand);opacity:.55;margin-top:8px;}

/* lift + glow: hover no desktop; no touch a classe .pv-lit entra por scroll (padrão card-lit) */
@media(hover:hover){
  .pv-circle:hover{transform:translateY(-4px);border-color:rgba(109,162,248,.55);
    box-shadow:0 14px 44px rgba(59,130,246,.18),0 0 24px rgba(59,130,246,.10);}
  .pv-circle:hover .pv-dot{opacity:1;}
}
.pv-circle.pv-lit{transform:translateY(-4px);border-color:rgba(109,162,248,.55);
  box-shadow:0 14px 44px rgba(59,130,246,.18),0 0 24px rgba(59,130,246,.10);}
.pv-circle.pv-lit .pv-dot{opacity:1;}

/* mobile: pilha vertical (não é o desktop encolhido).
   Ajuste 09/08 (pedido do Gui): círculo menor, conteúdo maior. */
@media(max-width:720px){
  .prova-band .pv-row{grid-template-columns:1fr;gap:18px;}
  .pv-circle{width:min(195px,58vw);}
  .pv-circle b{font-size:54px;}
  .pv-circle h3{font-size:13.5px;max-width:78%;}
  .pv-ic{margin-bottom:4px;}
  .pv-ic svg{width:30px;height:30px;}
  .pv-rule{margin-top:6px;}
}

@media(prefers-reduced-motion:reduce){
  .prova-band.pv-js .pv-enter{opacity:1;transform:none;transition:none;}
  .prova-band.pv-on .pv-float,.pv-circle.pv-beam::before{animation:none;}
  .pv-dot{transition:none;opacity:.8;}
  .pv-circle{transition:none;}
  .pv-circle.pv-lit{transform:none;}
}