/* home-v10.css: a home v10 aprovada pelo Bruno (16/10/2026). Parte A (faixa azul-clara) = a ferramenta de sempre; parte B (faixa amarela-clara) =
   tela de radar das categorias, destaques e lista em sanfona (paginas/home-ajuda.mjs). Só tokens do tema (tests/tema.test.mjs). */

/* a home deixa de ser a tela única de 100svh: agora rola até a parte B */
html[data-page-type="app"][data-page-slug="home"]:not(#dr):not([data-etapa="2"]):not([data-etapa="3"]) body{height:auto;min-height:100svh;overflow:visible;display:block}
html[data-page-type="app"][data-page-slug="home"]:not(#dr):not([data-etapa="2"]):not([data-etapa="3"]) .pagina{display:block;max-width:72rem;margin-inline:auto;padding:var(--e2) var(--e4) var(--e6)}
html[data-page-type="app"][data-page-slug="home"]:not(#dr) .coluna-corpo{display:block}
html,body{overflow-x:clip}

/* ---------- parte A ---------- */
.palco.hv-a[data-etapa="1"]{display:block;border-radius:22px;padding:var(--e6) var(--e4) var(--e6);background:color-mix(in srgb,var(--accent) 11%,var(--bg));text-align:center}
.palco.hv-a[data-etapa="1"] .hero-home{max-width:46rem;margin:0 auto var(--e4)}
.palco.hv-a[data-etapa="1"] .hero-home h1{text-align:center;font-size:clamp(2rem,5.4vw,3.3rem);line-height:1;margin:0 0 var(--e3)}
.palco.hv-a[data-etapa="1"] .hero-home .answer{margin:0 auto;max-width:56ch;font-size:clamp(.9375rem,1.6vw,1.0625rem)}
.palco.hv-a[data-etapa="1"] .radar{max-width:42.5rem;margin:0 auto;text-align:left}
.palco.hv-a[data-etapa="1"] .lista-atalho{text-align:center}
.hv-pq{display:flex;align-items:center;justify-content:center;gap:.5em;margin:0 0 var(--e3);font-weight:800;font-size:clamp(1.4rem,3.2vw,2rem);line-height:1.1;font-stretch:82%;letter-spacing:-.02em;color:var(--text)}
.hv-pq-l{display:grid;place-items:center;flex:none;width:1.4em;height:1.4em;border-radius:50%;background:var(--text);color:var(--bg);font-size:.62em;font-stretch:100%}

/* ---------- parte B ---------- */
.palco:not([data-etapa="1"])~.hv-b{display:none}
.hv-b{margin:var(--e4) 0 var(--e6);border-radius:22px;padding:var(--e6) var(--e4);background:color-mix(in srgb,var(--tag) 20%,var(--bg))}
.hv-sprite{position:absolute;width:0;height:0;overflow:hidden}
.hv-cab{text-align:center;margin:0 0 var(--e5)}
.hv-cab .hv-pq{margin-bottom:var(--e1)}
.hv-cab p{margin:var(--e1) auto 0;color:var(--muted);max-width:60ch}
.hv-tela{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:center}
.hv-lado{display:flex;flex-direction:column;gap:12px}
.hv-legenda{font-size:.8rem;color:var(--muted);margin:4px 0 0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hv-lg{display:inline-block;width:10px;height:10px;border-radius:50%}.hv-lg.r{background:var(--accent)}.hv-lg.h{border:2px dashed var(--muted)}.hv-lg.s{width:16px;height:9px;border-radius:5px;background:var(--text)}

/* destaques */
.hv-dest{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;text-decoration:none;border-radius:16px;padding:18px;min-height:96px;isolation:isolate;transition:transform .2s}
.hv-dest:hover{transform:translateY(-2px)}
.hv-dt{display:flex;flex-direction:column;min-width:0;flex:1}.hv-dest strong{font-size:1.15rem;letter-spacing:-.02em;font-stretch:85%;font-weight:780}.hv-dt span{font-size:.9rem}
.hv-dm{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:14px;background:var(--surface)}
.hv-seta{font-size:1.8rem;line-height:1;opacity:.7;transition:transform .2s}.hv-dest:hover .hv-seta{transform:translateX(4px)}
.hv-dest.pech{background:var(--tag);color:var(--tag-ink)}
.hv-dest.pres{background:var(--fita);color:var(--fita-ink)}
.hv-varre{position:absolute;right:-40px;top:50%;width:200px;height:200px;margin-top:-100px;z-index:-1;border-radius:50%;border:1px solid color-mix(in srgb,var(--tag-ink) 14%,transparent)}
.hv-varre::before{content:"";position:absolute;inset:30px;border-radius:50%;border:1px solid color-mix(in srgb,var(--tag-ink) 12%,transparent)}
.hv-varre i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg 280deg,color-mix(in srgb,var(--tag-ink) 22%,transparent) 360deg);animation:hv-gira 4s linear infinite}
.hv-varre b{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--tag-ink);opacity:0;animation:hv-pisca 4s linear infinite}
.hv-varre b:nth-of-type(1){left:40px;top:60px;animation-delay:2.7s}.hv-varre b:nth-of-type(2){left:120px;top:40px;animation-delay:.4s}.hv-varre b:nth-of-type(3){left:70px;top:140px;animation-delay:1.9s}
.hv-caixa{position:absolute;right:18px;bottom:-10px;width:110px;height:99px;z-index:-1;opacity:.3}
.hv-tampa{animation:hv-tampa 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:15% 100%}
@keyframes hv-gira{to{transform:rotate(360deg)}}
@keyframes hv-pisca{0%,70%,100%{opacity:0;transform:scale(.6)}75%{opacity:.8;transform:scale(1.3)}90%{opacity:.25}}
@keyframes hv-tampa{0%,60%,100%{transform:none}70%{transform:translateY(-10px) rotate(-10deg)}82%{transform:translateY(-2px) rotate(2deg)}}

/* tela de radar */
.hv-escopo{position:relative;aspect-ratio:1;max-width:580px;width:100%;margin:14px auto;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 10%,var(--surface)) 0,var(--surface) 70%);border:1px solid var(--line);contain:layout}
.hv-anel{position:absolute;inset:22%;border-radius:50%;border:1px solid var(--line)}.hv-anel.a2{inset:11%}.hv-anel.a3{inset:33%}
.hv-feixe{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 300deg,color-mix(in srgb,var(--accent) 35%,transparent) 360deg);animation:hv-gira 6s linear infinite}
.hv-raio{position:absolute;left:50%;top:0;width:1px;height:50%;background:var(--line);transform-origin:50% 100%}
.hv-setor{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:3;font-size:.7rem;font-weight:700;white-space:nowrap;padding:1px 7px;border-radius:999px;background:var(--text);color:var(--bg);border:1px solid var(--text);text-decoration:none;cursor:pointer}
.hv-setor:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.hv-blip{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;font-size:.72rem;font-weight:650;color:var(--text2);z-index:2}
.hv-blip .hv-ic,.hv-blip .hv-hubfig{animation:hv-acende 6s linear infinite;animation-delay:var(--d);border-radius:8px}
.hv-blip span:not(.hv-hubfig){white-space:nowrap;font-size:.68rem;background:var(--surface);padding:0 4px;border-radius:4px}
.hv-blip:hover span:not(.hv-hubfig){color:var(--accent)}
.hv-blip b,.hv-setor b{font-weight:inherit}.hv-blip .c,.hv-setor .c{display:none}
@keyframes hv-acende{0%,100%{filter:none;transform:scale(1)}2%{filter:drop-shadow(0 0 8px var(--accent));transform:scale(1.18)}18%{filter:none;transform:scale(1)}}
.hv-hubfig{--s:26px;display:grid;place-items:center;width:var(--s);height:var(--s)}.hv-hubfig svg{width:72%;height:72%}.hv-s22{--s:22px}.hv-s26{--s:26px}.hv-s30{--s:30px}.hv-s44{--s:44px}.hv-ic{display:block;flex:none;width:var(--s);height:var(--s)}.hv-hubfig{border-radius:9px;background:var(--surface2);color:var(--accent);border:1.5px dashed var(--line2)}

/* lista em sanfona */
.hv-lista{margin-top:26px}
.hv-lista-t{margin:0 0 12px;font-size:1.05rem;font-weight:760;letter-spacing:-.01em}
.hv-ac{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:0 0 8px;scroll-margin-top:80px}
.hv-ac summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:48px}
.hv-ac summary::-webkit-details-marker{display:none}
.hv-ac summary::after{content:"";width:.45rem;height:.45rem;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);flex:none;margin-left:4px}
.hv-ac[open] summary::after{transform:rotate(-135deg)}
.hv-ac-n{font-weight:720;min-width:0;flex:1}.hv-ac-pilha{display:flex}.hv-ac-pilha>*{margin-left:-6px;box-shadow:0 0 0 2px var(--surface);border-radius:7px;background:var(--surface)}
.hv-ac-q{color:var(--muted);font-size:.85rem;min-width:1.5em;text-align:right}
.hv-ac[open] summary{border-bottom:1px solid var(--line);margin-bottom:10px}
.hv-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;padding:0 12px 12px}
.hv-ti{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0;min-height:48px;transition:transform .18s,border-color .18s}
.hv-ti:hover{transform:translateY(-2px);border-color:var(--accent)}
.hv-ti.hub{background:transparent;border-style:dashed}
.hv-tn{font-weight:680;line-height:1.15;font-size:.95rem;color:var(--text)}.hv-ts{font-size:.74rem;color:var(--muted)}
.alvo-lista{outline:3px solid var(--tag-borda);outline-offset:4px;border-radius:12px;transition:outline-color 1.2s}

/* celular: a tela de radar ocupa a largura toda e usa os nomes curtos (pedido do Bruno 16/10) */
@media (max-width:820px){
  .hv-tela{grid-template-columns:1fr}
  .hv-escopo{max-width:none;width:calc(100vw - 10px);margin:8px calc(50% - 50vw + 5px);order:-1}
  .hv-blip{font-size:8.6px;gap:1px;letter-spacing:-.01em}
  .hv-blip .hv-ic,.hv-blip .hv-hubfig{--s:19px}
  .hv-blip span:not(.hv-hubfig){padding:0 2px;line-height:1.15;font-size:8.6px}
  .hv-setor{font-size:8.6px;padding:1px 6px;left:var(--xm);top:var(--ym);transform:translate(var(--tx),-50%)}
  .hv-blip .l,.hv-setor .l{display:none}.hv-blip .c,.hv-setor .c{display:inline}
  .hv-ac-pilha{display:none}
  .palco.hv-a[data-etapa="1"],.hv-b{padding:22px 12px;border-radius:16px}
  html[data-page-type="app"][data-page-slug="home"]:not(#dr):not([data-etapa="2"]):not([data-etapa="3"]) .pagina{padding-inline:var(--e2)}
}
@media (prefers-reduced-motion:reduce){.hv-b *,.hv-b *::before,.hv-b *::after{animation:none!important;transition:none!important}}
/* padrões das variáveis que o HTML define ponto a ponto (posição na tela, atraso do brilho, tamanho da figura) */
.hv-setor{--x:50%;--y:50%;--xm:50%;--ym:50%;--tx:-50%}.hv-blip{--d:0s}