/* Site público da Scope. Tokens e regras: scope/marca/design-guide.md (meia-noite e vidro, base AuthKit). */
@font-face { font-family: 'Space Grotesk'; src: url('fonts/SpaceGrotesk.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  color-scheme: dark;
  --meia-noite: #05060f; --aco: #2f343e;
  --gelo: #d8ecf8; --geada: #d1e4fa; --nevoa: #c7d3ea; --veu: #9da7ba; --branco: #fff;
  --ceu: linear-gradient(0deg, #98c0ef 0%, #d8ecf8 100%);
  --acao: #027dea; --acao-forte: #0268c4;
  --vidro: rgba(186, 214, 247, .03); --vidro-2: rgba(186, 214, 247, .06); --vidro-3: rgba(199, 211, 234, .12);
  --fio: rgba(186, 215, 247, .12); --fio-forte: rgba(186, 215, 247, .24); --vidro-fundo: rgba(5, 6, 15, .97);
  --verde: #5fd39a; --verde-vidro: rgba(95, 211, 154, .14);
  --amarelo: #f5c66b; --amarelo-vidro: rgba(245, 198, 107, .14);
  --vermelho: #ff7a70; --vermelho-vidro: rgba(255, 122, 112, .14);
  --estrela: #fbbc04;
  --f-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --f-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-rotulo: 'JetBrains Mono', ui-monospace, monospace;
  --borda-fio: inset 0 0 0 1px var(--fio);
  --sombra-card: inset 0 1px 1px rgba(199, 211, 234, .12), inset 0 24px 48px rgba(199, 211, 234, .05), 0 24px 32px rgba(6, 6, 14, .7);
  --sombra-modal: inset 0 1px 1px rgba(216, 236, 248, .2), inset 0 24px 48px rgba(168, 216, 245, .06), 0 16px 32px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--meia-noite); overflow-x: clip; }
body { background: transparent; color: var(--nevoa); font-family: var(--f-ui); font-size: 16px; line-height: 1.5; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
/* grade de planta na página inteira, sumindo nas bordas */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(186, 215, 247, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(186, 215, 247, .06) 1px, transparent 1px);
  background-size: 88px 88px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 85%); }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--acao); outline-offset: 3px; }
.link { color: var(--geada); text-decoration: underline; text-decoration-color: var(--fio-forte); text-underline-offset: 3px; }

.largura { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ceu { background: var(--ceu); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* topo */
.topo { position: sticky; top: 0; z-index: 10; background: rgba(5, 6, 15, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.topo-linha { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 12px; }
.marca { display: flex; align-items: center; gap: 10px; }
.marca img { width: 32px; height: 32px; mix-blend-mode: screen; }
.wordmark { display: grid; line-height: 1.15; }
.wordmark b { font-size: 16px; font-weight: 500; color: var(--geada); }
.wordmark small { font: 400 9px/1.4 var(--f-rotulo); letter-spacing: .14em; color: var(--veu); }
.topo-links { display: flex; gap: 28px; font-size: 14px; color: var(--veu); }
.topo-links a:hover { color: var(--geada); }

/* botões: azul é o principal, o resto é vidro */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px; border: 0; cursor: pointer;
  font: 500 15px/1.43 var(--f-ui); white-space: nowrap; color: var(--branco);
  background: var(--vidro-2); box-shadow: var(--borda-fio); transition: background .2s;
}
.botao:hover { background: var(--vidro-3); }
.botao.compacto { padding: 8px 16px; font-size: 14px; }
.botao-principal { background: var(--acao); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.botao-principal:hover { background: var(--acao-forte); }
.botao-contorno { background: transparent; color: var(--geada); }
.botao-form { width: 100%; border-radius: 6px; }

/* tipografia */
h1, h2, h3 { font-weight: 500; color: var(--gelo); text-wrap: balance; }
h2 { font: 500 44px/1.16 var(--f-display); }
h3 { font-size: 18px; line-height: 1.33; color: var(--geada); }
p { color: var(--nevoa); }
.pequeno { font-size: 13px; color: var(--veu); }
.sobrancelha { display: flex; align-items: center; justify-content: center; gap: 16px; white-space: nowrap; font: 400 13px/1.2 var(--f-rotulo); text-transform: uppercase; letter-spacing: .1em; color: var(--nevoa); }
.sobrancelha::before, .sobrancelha::after { content: ""; height: 1px; flex: 0 1 120px; min-width: 0; }
.sobrancelha::before { background: linear-gradient(90deg, transparent, var(--fio)); }
.sobrancelha::after { background: linear-gradient(90deg, var(--fio), transparent); }

/* selos */
.selo { display: inline-flex; align-items: center; border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 500; line-height: 1.33; white-space: nowrap; background: var(--vidro-3); color: var(--geada); }
.selo.bom { background: var(--verde-vidro); color: var(--verde); }
.selo.atencao { background: var(--amarelo-vidro); color: var(--amarelo); }
.selo.ruim { background: var(--vermelho-vidro); color: var(--vermelho); }
.bom { color: var(--verde); } .ruim { color: var(--vermelho); }

/* vidro */
.card { background: var(--vidro); border-radius: 16px; padding: 24px; box-shadow: var(--sombra-card); }
.modal { background: var(--vidro-fundo); border-radius: 16px; padding: 24px; box-shadow: var(--sombra-modal); }

/* herói */
.heroi { position: relative; padding-top: 72px; text-align: center; overflow-x: clip; }
.feixe { position: absolute; left: 50%; top: -64px; width: 1400px; max-width: 200vw; height: 900px; transform: translateX(-50%); pointer-events: none; z-index: -1;
  background: conic-gradient(from 180deg at 50% -5%, transparent 45%, rgba(124, 145, 182, .22) 48.5%, rgba(124, 145, 182, .42) 50%, rgba(124, 145, 182, .22) 51.5%, transparent 55%), radial-gradient(40% 30% at 50% 0%, rgba(124, 145, 182, .22), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 30%, transparent 80%); mask-image: linear-gradient(#000 30%, transparent 80%); }
.palavra { font: 500 clamp(96px, 19vw, 210px)/0.95 var(--f-display); letter-spacing: -0.03em; margin: 20px 0 12px; filter: drop-shadow(0 0 6px rgba(186, 207, 247, .32)) drop-shadow(0 0 22px rgba(186, 207, 247, .18)); }
.heroi-texto { display: grid; justify-items: center; gap: 16px; max-width: 660px; margin: 0 auto; }
.heroi-texto h1 { font: 500 clamp(22px, 2.6vw, 28px)/1.2 var(--f-display); }
.heroi-texto p { font-size: 17px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }

/* cards em leque */
.leque { position: relative; height: 480px; margin-top: 64px; text-align: left; }
.leque > .modal { position: absolute; }
.l-ficha { width: 290px; left: calc(50% - 470px); top: 48px; transform: rotate(-6deg); padding: 0; overflow: hidden; }
.l-nota { width: 330px; left: calc(50% - 165px); top: 0; z-index: 2; }
.l-form { width: 300px; left: calc(50% + 180px); top: 48px; transform: rotate(6deg); display: grid; gap: 14px; }
.ficha-capa { height: 76px; background: linear-gradient(180deg, rgba(182, 217, 252, .14), rgba(182, 217, 252, .02)); }
.ficha-corpo { padding: 0 18px 18px; display: grid; gap: 4px; }
.ficha-logo { width: 52px; height: 52px; border-radius: 50%; background: var(--meia-noite); box-shadow: 0 0 0 3px var(--meia-noite), var(--borda-fio); margin-top: -26px; display: grid; place-items: center; color: var(--geada); font: 500 17px/1 var(--f-display); }
.ficha-nome { color: var(--gelo); font-weight: 500; font-size: 17px; }
.estrelas { color: var(--estrela); letter-spacing: 1px; }
.ficha-botoes { display: flex; gap: 6px; margin-top: 10px; }
.ficha-botoes span { flex: 1; text-align: center; border-radius: 999px; padding: 6px 0; font-size: 12px; font-weight: 500; color: var(--geada); background: var(--vidro-2); box-shadow: var(--borda-fio); }
.nota-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.nota-topo span:first-child { font: 400 11px/1.2 var(--f-rotulo); text-transform: uppercase; letter-spacing: .1em; color: var(--veu); }
.medidor { display: grid; justify-items: center; gap: 4px; }
.medidor svg { width: 100%; max-width: 220px; height: auto; display: block; }
.medidor .numero { font: 500 52px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.itens { list-style: none; padding: 0; margin-top: 14px; }
.itens li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; font-size: 13px; }
.itens li + li { box-shadow: inset 0 1px 0 var(--fio); }
.campo { display: grid; gap: 6px; }
.campo label { font-size: 13px; font-weight: 500; color: var(--geada); }
.campo input { width: 100%; border: 0; border-radius: 6px; padding: 10px; background: rgba(199, 211, 234, .06); box-shadow: var(--borda-fio); color: var(--branco); font: 400 14px/1.43 var(--f-ui); }
.campo input::placeholder { color: rgba(199, 211, 234, .6); }
.campo input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--fio-forte); }
@media (prefers-reduced-motion: no-preference) {
  .leque > .modal { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
  .leque:hover .l-ficha { transform: rotate(-8deg) translateX(-10px); }
  .leque:hover .l-form { transform: rotate(8deg) translateX(10px); }
}

/* seções */
.secao { padding-top: 120px; }
.cab { display: grid; justify-items: center; gap: 18px; text-align: center; max-width: 680px; margin: 0 auto 56px; }
.cab p { font-size: 17px; max-width: 640px; }

/* como funciona: círculos ligados por um fio */
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; list-style: none; padding: 0; }
.passos::before { content: ""; position: absolute; left: 16%; right: 16%; top: 30px; height: 1px; background: linear-gradient(90deg, transparent, var(--fio) 10%, var(--fio) 90%, transparent); }
.passo { display: grid; justify-items: center; gap: 14px; text-align: center; position: relative; }
.icone { width: 60px; height: 60px; border-radius: 9999px; display: grid; place-items: center; background: var(--meia-noite); box-shadow: inset 0 0 0 1px var(--fio), inset 0 1px 1px rgba(216, 236, 248, .2), inset 0 24px 48px rgba(168, 216, 245, .06); }
.icone svg { width: 24px; height: 24px; fill: none; stroke: var(--geada); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.passo .n { font: 400 12px/1 var(--f-rotulo); letter-spacing: .1em; color: var(--veu); }
.passo p { font-size: 15px; max-width: 320px; }

/* para quem é */
.publicos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 820px; margin: 0 auto; }
.publicos li { list-style: none; padding: 10px 18px; border-radius: 999px; background: var(--vidro-2); box-shadow: var(--borda-fio); color: var(--geada); font-size: 15px; }
.publicos { padding: 0; }

/* chamada final */
.chamada { position: relative; overflow: hidden; text-align: center; display: grid; justify-items: center; gap: 16px; padding: 72px 24px; }
.chamada::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: conic-gradient(from 180deg at 50% -5%, transparent 44%, rgba(124, 145, 182, .28) 50%, transparent 56%); -webkit-mask-image: linear-gradient(#000, transparent 80%); mask-image: linear-gradient(#000, transparent 80%); }
.chamada > * { position: relative; }
.chamada .botao { margin-top: 8px; }

/* rodapé */
.rodape { margin-top: 120px; box-shadow: inset 0 1px 0 var(--fio); padding: 36px 0 48px; font-size: 14px; }
.rodape p { color: var(--veu); }
.rodape .rodape-nome { color: var(--geada); font-weight: 500; margin-bottom: 3px; }
.rodape-grade { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 18px; }
.rodape-links a { color: var(--nevoa); }
.rodape-links a:hover { color: var(--geada); }

/* página de texto (política) */
.texto { max-width: 760px; padding-top: 56px; }
.texto h1 { font: 500 44px/1.16 var(--f-display); background: var(--ceu); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 12px; }
.texto h2 { font: 500 22px/1.3 var(--f-display); margin: 40px 0 10px; }
.texto p, .texto li { color: var(--nevoa); margin-bottom: 10px; }
.texto ul { padding-left: 21px; }

@media (max-width: 1000px) {
  .leque { height: auto; display: grid; justify-items: center; gap: 20px; }
  .leque > .modal { position: static; transform: none !important; width: min(340px, 100%); }
  .l-nota { order: -1; }
}
@media (max-width: 760px) {
  .largura { padding: 0 16px; }
  .topo-links { display: none; }
  h2 { font-size: 32px; }
  .texto h1 { font-size: 34px; }
  .heroi { padding-top: 48px; }
  .passos { grid-template-columns: 1fr; gap: 36px; }
  .passos::before { display: none; }
  .secao { padding-top: 88px; }
  .wordmark small { display: none; }
  .chamada { padding: 56px 18px; }
}