/* ACABAMENTO (03/10/2026). FLC: "quero deixar o sistema mais bonito também,
   está muito padrão e também de IA, quero algo mais robusto, mais animações
   fracas, mas que dá um charme".
   Uma camada só, carregada DEPOIS do estilo de cada tela (portal e painel):
   as mesmas cores (preto e ouro), letras de verdade (servidas daqui), ícones no
   lugar dos números do menu, profundidade nas superfícies e movimento curto.
   Quem pede menos movimento no aparelho não vê animação nenhuma. */

:root {
  --sans:"IBM Plex Sans","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",Consolas,"Liberation Mono",monospace;
  --raio:10px;
  --raio-p:7px;
  --mola:cubic-bezier(.2,.8,.2,1);
  --sombra-1:0 1px 2px rgb(24 20 10 / 4%),0 3px 10px -2px rgb(24 20 10 / 5%);
  --sombra-2:0 2px 4px rgb(24 20 10 / 5%),0 14px 34px -10px rgb(24 20 10 / 16%);
  --ouro-brilho:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / 38%) 50%,transparent 70%);
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
body { font-size:14px; letter-spacing:-.004em; text-rendering:optimizeLegibility; font-optical-sizing:auto; }
::selection { background:#e9d9a3; color:#1a160b; }

/* ---------- letras ---------- */
h1,h2,h3 { font-optical-sizing:auto; }
.pagina-topo h1,.entrada-form h1,.cabeca h1,h1 { letter-spacing:-.026em; font-weight:400; }
.menu-toggle,.menu-fechar { border-radius:var(--raio-p) !important; }
.secao h2,.cartao h2,.ficha-bloco > .secao-topo h2,.doc-detalhe > .secao-topo h2 { letter-spacing:-.022em; }
.destaque .grande { font-weight:300; letter-spacing:-.055em; font-variation-settings:"opsz" 144; }
.entrada-frase h2 { font-weight:400; letter-spacing:-.018em; line-height:1.12; font-variation-settings:"opsz" 96; }
.entrada-frase h2 em { font-style:italic; font-weight:300; }
.kicker,.tabela th { letter-spacing:.12em; }
.mono { letter-spacing:0; }

/* ---------- a lateral: grão, luz e o indicador que desliza ---------- */
.lado { background-color:#09090a; background-image:var(--grao),radial-gradient(120% 60% at 0% 0%,#1d1a12 0%,transparent 55%),linear-gradient(180deg,#0c0c0d,#070708);
  background-blend-mode:soft-light,normal,normal; box-shadow:inset -1px 0 0 rgb(212 175 55 / 14%); }
.menu { position:relative; }
.item { border-radius:var(--raio-p); gap:13px; transition:color .25s var(--mola),background .25s var(--mola),border-color .25s; }
.item .nav-num { display:none; }
.item .nav-ico { width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.72;
  transition:opacity .25s,transform .35s var(--mola); }
.item:hover .nav-ico { opacity:1; transform:translateX(1px); }
.item.ativo,.item.ativa { background:linear-gradient(90deg,rgb(212 175 55 / 11%),rgb(255 255 255 / 2%)); border-color:rgb(212 175 55 / 16%); color:#f1e7c6; }
.item.ativo .nav-ico,.item.ativa .nav-ico { opacity:1; color:var(--ouro-claro); }
.item.ativo::after,.item.ativa::after { content:none !important; }
.menu-indicador { position:absolute; left:15px; top:0; width:2px; height:0; border-radius:2px; background:linear-gradient(180deg,var(--ouro-claro),var(--ouro));
  box-shadow:0 0 12px rgb(212 175 55 / 55%); transition:transform .45s var(--mola),height .45s var(--mola),opacity .3s; pointer-events:none; opacity:0; }
.menu-indicador.pronto { opacity:1; }
.lado > img { transition:filter .4s; }
.lado > img:hover { filter:drop-shadow(0 0 14px rgb(212 175 55 / 35%)); }

/* ---------- superfícies com profundidade ---------- */
.cartao,.atividade,.regras { border-radius:var(--raio); box-shadow:var(--sombra-1); }
.cartao { border-color:#e6e3dc; transition:box-shadow .35s var(--mola),border-color .35s; }
.cartao:hover { box-shadow:var(--sombra-2); border-color:#ddd8cc; }
.atividade { background:linear-gradient(180deg,#f3f1ec,#eeece6); border-color:#e3e0d8; }
.regras { border-top:0; position:relative; overflow:hidden; background:linear-gradient(180deg,#efede7,#e9e6df); }
.regras::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,#b99941,var(--ouro-claro),#b99941); }
.resumo { border-top-color:#2a2926; }
.trilho { height:5px; border-radius:5px; background:#e5e2db; }
.trilho span { border-radius:5px; background:linear-gradient(90deg,#a8862c,var(--ouro),var(--ouro-claro)); position:relative; overflow:hidden; }
.trilho span::after { content:""; position:absolute; inset:0; background:var(--ouro-brilho); transform:translateX(-100%); animation:brilho 2.8s 1.1s var(--mola) both; }
.barras .b { border-radius:4px 4px 1px 1px; background:linear-gradient(180deg,#3a3936,#1f1e1c); }
.barras .b.hoje { background:linear-gradient(180deg,var(--ouro-claro),var(--ouro)); box-shadow:0 0 14px rgb(212 175 55 / 35%); }
.barras .col[data-tip]:is(:hover,:focus-visible)::after { border-radius:6px; box-shadow:var(--sombra-2); animation:aparecer .2s var(--mola) both; }

/* ---------- tabelas e listas ---------- */
.tabela tr.clicavel td,.tabela tbody tr td { transition:background .2s; }
.tabela tr.clicavel { position:relative; }
.tabela tr.clicavel td:first-child { box-shadow:inset 0 0 0 transparent; transition:box-shadow .25s var(--mola),background .2s; }
.tabela tr.clicavel:hover td { background:#f1efe9; }
.tabela tr.clicavel:hover td:first-child { box-shadow:inset 2px 0 0 var(--ouro); }
.novidade { border-radius:0 var(--raio-p) var(--raio-p) 0; transition:background .2s,transform .3s var(--mola); }
.novidade:hover { transform:translateX(2px); }
.escolha { border-radius:var(--raio-p); transition:background .2s,box-shadow .25s; }
.escolha:has(input:checked) { background:#f4eedb; box-shadow:inset 2px 0 0 var(--ouro); }
.escolha input,.aceite input { accent-color:#9c7b22; }
.selo,.situacao-acomp,.etiqueta { border-radius:999px; }
.pill { border-radius:999px; }

/* ---------- botões: peso, luz e resposta ao toque ---------- */
.botao { border-radius:var(--raio-p); background-image:linear-gradient(180deg,rgb(255 255 255 / 9%),rgb(255 255 255 / 0%)); box-shadow:0 1px 0 rgb(255 255 255 / 6%) inset,0 2px 6px -1px rgb(10 10 11 / 25%);
  position:relative; overflow:hidden; transition:background-color .25s,transform .25s var(--mola),box-shadow .25s var(--mola); }
.botao:hover { transform:translateY(-1px); box-shadow:0 1px 0 rgb(255 255 255 / 8%) inset,0 10px 22px -8px rgb(10 10 11 / 45%); }
.botao:active { transform:translateY(0) scale(.985); transition-duration:.08s; }
.botao.ouro { background-image:linear-gradient(180deg,#e7c95e,#d4af37); box-shadow:0 1px 0 rgb(255 255 255 / 35%) inset,0 4px 14px -4px rgb(170 133 36 / 55%); }
.botao.ouro::after,.botao.ouro-brilha::after { content:""; position:absolute; inset:0; background:var(--ouro-brilho); transform:translateX(-120%); transition:transform .9s var(--mola); pointer-events:none; }
.botao.ouro:hover::after { transform:translateX(120%); }
.botao-linha,.botao-mini,.mini,button.sec { border-radius:var(--raio-p); transition:border-color .2s,background .2s,transform .2s var(--mola); }
.botao-linha:active,.botao-mini:active { transform:scale(.985); }

/* ---------- campos ---------- */
input:not([type=checkbox]):not([type=radio]),select,textarea { border-radius:var(--raio-p) !important; transition:border-color .2s,box-shadow .25s var(--mola),background .2s; }
input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover { border-color:#a9a7a1; }
input:focus,select:focus,textarea:focus { border-color:#a8862c !important; box-shadow:0 0 0 4px rgb(212 175 55 / 16%) !important; }
:focus-visible { outline-color:#b08d2c; outline-offset:4px; border-radius:4px; }

/* ---------- a entrada: luz dourada lenta atrás da frase ---------- */
.entrada-marca { background-color:#08080a; background-image:var(--grao),linear-gradient(160deg,#0d0d0f,#060607); background-blend-mode:soft-light,normal; isolation:isolate; }
.entrada-marca::before { content:""; position:absolute; z-index:-1; width:620px; height:620px; left:-160px; top:18%; border-radius:50%;
  background:radial-gradient(circle,rgb(212 175 55 / 16%),rgb(212 175 55 / 5%) 40%,transparent 68%); filter:blur(8px); animation:deriva 18s ease-in-out infinite alternate; pointer-events:none; }
.entrada-marca::after { color:rgb(255 255 255 / 2.5%) !important; }
.entrada-form { background:radial-gradient(90% 70% at 100% 0%,#fbf7ec,#fdfcfa 60%); }
.entrada-form .botao { min-height:50px; }

/* ---------- o carregamento: a marca e uma linha dourada correndo ---------- */
.carregando { gap:26px; background:#08080a; background-image:var(--grao); background-blend-mode:soft-light; }
.carregando img { animation:surgir .9s var(--mola) both; }
.carregando::after { content:""; width:150px; height:2px; border-radius:2px; justify-self:center;
  background:linear-gradient(90deg,transparent,var(--ouro),transparent) 0 0 / 60% 100% no-repeat,rgb(255 255 255 / 8%); animation:correr 1.2s ease-in-out infinite; }

/* ---------- movimento: entrada em cascata, curta ---------- */
.painel-aba:not([hidden]) > *,.vista > *,#conteudo > * { animation:aparecer .5s var(--mola) both; }
.painel-aba:not([hidden]) > :nth-child(2),#conteudo > :nth-child(2) { animation-delay:.05s; }
.painel-aba:not([hidden]) > :nth-child(3),#conteudo > :nth-child(3) { animation-delay:.1s; }
.painel-aba:not([hidden]) > :nth-child(4),#conteudo > :nth-child(4) { animation-delay:.15s; }
.painel-aba:not([hidden]) > :nth-child(5),#conteudo > :nth-child(5) { animation-delay:.2s; }
.painel-aba:not([hidden]) > :nth-child(n+6),#conteudo > :nth-child(n+6) { animation-delay:.25s; }
/* Linhas de tabela não animam: a tela da consulta redesenha a tabela enquanto as fontes respondem. */
dialog[open] { animation:abrirDialogo .35s var(--mola) both; }
dialog::backdrop { background:rgb(12 11 8 / 45%); backdrop-filter:blur(3px); animation:esmaecer .3s ease both; }
.aviso-pag:not(.oculto) { animation:descer .5s var(--mola) both; }
.erro:not(.oculto),.ok:not(.oculto) { animation:aparecer .35s var(--mola) both; border-radius:0 var(--raio-p) var(--raio-p) 0; }

@keyframes aparecer { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes surgir { from { opacity:0; transform:scale(.96); filter:blur(4px); } to { opacity:1; transform:none; filter:none; } }
@keyframes correr { from { background-position:-120% 0,0 0; } to { background-position:220% 0,0 0; } }
@keyframes brilho { to { transform:translateX(100%); } }
@keyframes deriva { from { transform:translate(0,0) scale(1); } to { transform:translate(140px,-70px) scale(1.12); } }
@keyframes abrirDialogo { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes esmaecer { from { opacity:0; } to { opacity:1; } }
@keyframes descer { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

@media (max-width:760px) {
  .menu-indicador { left:10px; }
  .entrada-marca::before { width:380px; height:380px; left:-120px; top:-60px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
}

/* ---------- o brilho que segue o mouse ----------
   05/10, FLC: "eu tinha gostado da animação que tinha no início que fica atrás
   do mouse". É o mesmo do site e do simulador da FLC (o "mais legal", nas
   palavras dele): dourado e em "screen", então só acende no escuro (a lateral e
   a metade preta da entrada); no claro quase não aparece. Vai um pouco atrás do
   mouse (acabamento.js). Sem mouse (celular, tablet) ou com "menos movimento":
   não existe. */
.spot { position:fixed; left:0; top:0; width:820px; height:820px; margin:-410px 0 0 -410px; z-index:50; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle,rgb(233 200 115 / 11%),rgb(233 200 115 / 4%) 38%,transparent 68%); mix-blend-mode:screen;
  opacity:0; transition:opacity .6s ease; will-change:transform; }
.spot.ligado { opacity:1; }
@media (max-width:960px),(hover:none) { .spot { display:none; } }