/* Kit viral das ferramentas "de mandar no grupo" (vida em números, salário em
coisas, idade nos planetas, dia em que nasci, placar do WhatsApp).
Vai junto com estilo.css (cabeçalho, rodapé, tema claro/escuro) e com
js/compartilhar.mjs (cartão PNG e botão de compartilhar).
Uso:
...
Os gradientes de [data-tema] são os mesmos de TEMAS em js/compartilhar.mjs
(a página e o PNG têm a mesma cara); tests/ferramentas/compartilhar.test.mjs
reprova se divergirem e mede o contraste (WCAG AA) da tinta em cada ponta. */
/* Sora variável (100-800) servida pelo próprio site (/fonts, publicar.py), com
nome próprio para não se misturar com a Sora 400-700 do Google Fonts das
páginas: o número-herói usa 800 e o canvas desenha com a mesma face. */
@font-face{font-family:"Sora GS";src:url(/fonts/sora.woff2) format("woff2");font-weight:100 800;font-display:swap}
[data-tema]{--v-g1:#062A78;--v-g2:#1552D6;--v-tinta:#FFFFFF;--v-suave:rgba(255,255,255,.9);--v-painel:rgba(0,0,0,.22);--v-borda:rgba(255,255,255,.28)}
[data-tema="sol"]{--v-g1:#FFE14D;--v-g2:#FF7A1A;--v-tinta:#000000}
[data-tema="oceano"]{--v-g1:#062A78;--v-g2:#1552D6;--v-tinta:#FFFFFF}
[data-tema="uva"]{--v-g1:#3B0F86;--v-g2:#B5179E;--v-tinta:#FFFFFF}
[data-tema="menta"]{--v-g1:#7CF5B8;--v-g2:#16C47F;--v-tinta:#000000}
[data-tema="fogo"]{--v-g1:#C8143C;--v-g2:#6E0A28;--v-tinta:#FFFFFF}
/* Tinta preta: o painel clareia e a borda escurece (o inverso da branca). */
[data-tema="sol"],[data-tema="menta"]{--v-suave:rgba(0,0,0,.78);--v-painel:rgba(255,255,255,.38);--v-borda:rgba(0,0,0,.22)}
/* Palco: o bloco em gradiente que abre a ferramenta e mostra o resultado. */
.v-palco{position:relative;isolation:isolate;overflow:hidden;color:var(--v-tinta);background:linear-gradient(135deg,var(--v-g1),var(--v-g2));border-radius:32px;padding:clamp(28px,6vw,64px) clamp(20px,5vw,56px);margin:16px 0 28px}
.v-palco:before,.v-palco:after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(8px);pointer-events:none}
.v-palco:before{width:70%;aspect-ratio:1;right:-25%;top:-35%;background:radial-gradient(circle,var(--v-g1),transparent 70%)}
.v-palco:after{width:80%;aspect-ratio:1;left:-30%;bottom:-45%;background:radial-gradient(circle,var(--v-g2),transparent 70%)}
.v-palco a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.v-kick{font-family:"Sora GS",Sora,sans-serif;font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;color:var(--v-suave)}
/* Pergunta grande + um campo só. */
.v-pergunta{font-family:"Sora GS",Sora,sans-serif;font-weight:700;font-size:clamp(30px,8vw,64px);line-height:1.05;letter-spacing:-.025em;margin:0 0 22px;max-width:18ch;text-wrap:balance}
.v-campo{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.v-campo input,.v-campo select{flex:1 1 220px;min-width:0;font:600 clamp(20px,5vw,28px) "Sora GS",Sora,system-ui,sans-serif;color:#05070C;background:#FFFFFF;border:3px solid transparent;border-radius:18px;padding:14px 18px}
.v-campo input:focus,.v-campo select:focus{outline:none;border-color:var(--v-tinta);box-shadow:0 0 0 4px var(--v-painel)}
.v-campo label{flex-basis:100%;font-family:"Sora GS",Sora,sans-serif;font-weight:600;font-size:14px;color:var(--v-suave)}
.v-btn{font:700 18px "Sora GS",Sora,system-ui,sans-serif;border:0;border-radius:999px;padding:16px 28px;cursor:pointer;background:var(--v-tinta);color:var(--v-g2);transition:transform .15s ease}
[data-tema="sol"] .v-btn,[data-tema="menta"] .v-btn{color:#FFFFFF}
.v-btn:hover{transform:translateY(-1px)}
.v-btn:active{transform:translateY(1px)}
.v-btn.sec{background:transparent;color:var(--v-tinta);border:2px solid var(--v-borda)}
/* "Ajustar": o resto dos campos, escondido até a pessoa querer. */
.v-ajustar{margin-top:16px}
.v-ajustar summary{cursor:pointer;font-family:"Sora GS",Sora,sans-serif;font-weight:600;font-size:15px;color:var(--v-suave);list-style:none}
.v-ajustar summary::-webkit-details-marker{display:none}
.v-ajustar summary:before{content:"+ "}
.v-ajustar[open] summary:before{content:"− "}
.v-ajustar .campo label{color:var(--v-suave)}
/* Resultado: um número-herói por vez. */
.v-resultado{margin-top:8px}
.v-numero{display:block;font-family:"Sora GS",Sora,sans-serif;font-weight:800;font-size:clamp(56px,18vw,180px);line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin:0}
.v-legenda{font-family:"Sora GS",Sora,sans-serif;font-weight:600;font-size:clamp(20px,5vw,34px);line-height:1.2;margin:10px 0 0;max-width:24ch;text-wrap:balance}
.v-nota{font-size:14px;color:var(--v-suave);margin:14px 0 0}
/* Cartões do resultado (cada um um número + legenda). Dentro do palco usam a
tinta do tema; fora dele, os tokens do site (claro/escuro de estilo.css). */
.v-cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:14px;margin:24px 0}
.v-cartao{border-radius:24px;padding:20px 22px;background:var(--card2,rgba(127,127,127,.08));border:1px solid var(--line,rgba(127,127,127,.2));color:var(--ink,inherit);min-width:0}
.v-palco .v-cartao{background:var(--v-painel);border-color:var(--v-borda);color:var(--v-tinta)}
.v-cartao strong{display:block;font-family:"Sora GS",Sora,sans-serif;font-weight:800;font-size:clamp(30px,7vw,44px);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.v-cartao span{display:block;margin-top:6px;font-size:15px;line-height:1.35;color:var(--mut,inherit)}
.v-palco .v-cartao span{color:var(--v-suave)}
.v-cartao .v-emoji{font-size:28px;line-height:1;margin-bottom:8px;display:block}
/* Ações: o compartilhar é a ação principal; no celular fica preso embaixo. */
.v-acoes{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}
/* Fora de um tema: branco com texto escuro (aparece no fundo escuro e no claro,
pela sombra). Dentro: tinta do tema, texto na cor do gradiente. */
.v-compartilhar{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 18px "Sora GS",Sora,system-ui,sans-serif;border:0;border-radius:999px;padding:17px 30px;cursor:pointer;color:var(--v-acao-cor,var(--v-btn-cor));background:var(--v-acao-bg,var(--v-btn-bg));box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.08)}
/* Botão fora do palco (e o preso no rodapé do celular, que flutua sobre a
página): segue o tema do SITE, claro ou escuro, para nunca sumir no fundo. */
:root{--v-btn-bg:#FFFFFF;--v-btn-cor:#05070C}
html[data-gs-theme="light"]{--v-btn-bg:#05070C;--v-btn-cor:#FFFFFF}
[data-tema]{--v-acao-bg:var(--v-tinta);--v-acao-cor:var(--v-g2)}
[data-tema="sol"],[data-tema="menta"]{--v-acao-cor:#FFFFFF}
.v-compartilhar svg{width:20px;height:20px}
.v-compartilhar[disabled]{opacity:.6;cursor:progress}
@media(max-width:640px){
.v-compartilhar.v-fixo{background:var(--v-btn-bg);color:var(--v-btn-cor);position:fixed;z-index:30;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));width:auto}
body.v-tem-fixo{padding-bottom:96px}
}
/* Entrada do resultado e contagem: movimento curto, desligável. */
@keyframes v-sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.v-entra{animation:v-sobe .5s cubic-bezier(.2,.7,.2,1) both}
.v-entra:nth-child(2){animation-delay:.08s}.v-entra:nth-child(3){animation-delay:.16s}.v-entra:nth-child(4){animation-delay:.24s}.v-entra:nth-child(n+5){animation-delay:.32s}
@media(prefers-reduced-motion:reduce){.v-entra{animation:none}.v-btn{transition:none}}
/* Menu de saída (sem Web Share de arquivo): prévia + botões. */
.v-menu{border:0;padding:22px;border-radius:28px;max-width:min(92vw,420px);width:100%;background:#0B0D14;color:#F6FDFF;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.v-menu::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.v-menu-t{font:700 20px "Sora GS",Sora,system-ui,sans-serif;margin:4px 40px 14px 0}
.v-menu-prev{display:block;width:100%;max-height:52vh;object-fit:contain;border-radius:16px;background:#000;margin:0 0 16px}
.v-menu-acoes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v-menu-btn{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;font:600 15px "Sora GS",Sora,system-ui,sans-serif;border-radius:14px;padding:12px;border:1px solid rgba(246,253,255,.18);background:rgba(246,253,255,.06);color:#F6FDFF;cursor:pointer;text-decoration:none}
.v-menu-btn:hover{background:rgba(246,253,255,.12);color:#F6FDFF}
.v-menu-principal{grid-column:1/-1;background:#F6FDFF;color:#05070C;border-color:#F6FDFF}
.v-menu-principal:hover{background:#FFFFFF;color:#05070C}
.v-menu-fechar{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:999px;border:1px solid rgba(246,253,255,.18);background:transparent;color:#F6FDFF;font-size:24px;line-height:1;cursor:pointer}