/* Planos na Mesa — visual do design system da Menegon Family Office.
   Fraunces nos títulos, Inter no texto, paleta profundo/chumbo/claro/creme/off.
   Tema claro e escuro; por padrão segue o aparelho de quem abre. */

@font-face {
  font-family: "Fraunces";
  src: url("fontes/fraunces-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fontes/inter-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fontes/inter-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --profundo: #1d2433;
  --chumbo: #565b69;
  --claro: #9ca2b0;
  --creme: #c6c1bb;
  --off: #e7e3da;

  --fundo: #f4f2ec;
  --superficie: #fffefb;
  --superficie-2: #efece4;
  --tinta: var(--profundo);
  --tinta-fraca: var(--chumbo);
  --borda: #d9d4c9;
  --realce: var(--profundo);
  --realce-tinta: var(--off);
  --citacao: #f7f5ef;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --raio: 14px;
  --largura: 1180px;
}

:root[data-tema="escuro"] {
  --fundo: #161c28;
  --superficie: #1d2433;
  --superficie-2: #232b3c;
  --tinta: #eeece6;
  --tinta-fraca: #a7adba;
  --borda: #2f3849;
  --realce: var(--off);
  --realce-tinta: var(--profundo);
  --citacao: #202839;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: inherit; }

.pular {
  position: absolute; left: -9999px; top: 0; background: var(--realce);
  color: var(--realce-tinta); padding: .6rem 1rem; z-index: 50;
}
.pular:focus { left: 0; }

/* ---------- topo ---------- */

.topo {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--fundo) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}
.topo-linha {
  max-width: var(--largura); margin: 0 auto; padding: .7rem 16px;
  display: flex; align-items: center; gap: 1rem;
}
.topo-selecao { padding-top: 0; padding-bottom: .7rem; }

.marca { display: flex; align-items: center; gap: .55rem; text-decoration: none; flex: none; }
.marca-simbolo { width: 22px; height: 26px; color: var(--tinta); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca-texto strong { font-family: var(--display); font-size: 1.02rem; font-weight: 600; }
.marca-texto small { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-fraca); }

.menu {
  display: flex; gap: .15rem; margin-left: auto; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
  white-space: nowrap; text-decoration: none; padding: .42rem .7rem;
  border-radius: 999px; font-size: .88rem; color: var(--tinta-fraca);
}
.menu a:hover { color: var(--tinta); background: var(--superficie-2); }
.menu a[aria-current="page"] { background: var(--realce); color: var(--realce-tinta); }

.botao-tema {
  flex: none; width: 36px; height: 36px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--tinta);
  font-size: .95rem; line-height: 1;
}
:root[data-tema="claro"] .so-escuro, :root[data-tema="escuro"] .so-claro { display: none; }

.botao-selecao {
  border: 1px dashed var(--borda); background: transparent; color: var(--tinta-fraca);
  border-radius: 999px; padding: .34rem .85rem; font: inherit; font-size: .84rem; cursor: pointer;
}
.botao-selecao strong { color: var(--tinta); font-weight: 600; }
.botao-selecao:hover { border-style: solid; }

/* ---------- telas ---------- */

main { max-width: var(--largura); margin: 0 auto; padding: 2rem 16px 3rem; }
.titulo-tela { margin-bottom: .2rem; }
.subtitulo-tela { color: var(--tinta-fraca); max-width: 62ch; margin-bottom: 1.4rem; }

.abertura { max-width: 74ch; }
.sobrancelha {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-fraca); margin-bottom: .8rem;
}
.lide { font-size: 1.12rem; max-width: 60ch; }

.passos { list-style: none; counter-reset: passo; padding: 0; margin: 2rem 0; }
.passos li {
  counter-increment: passo; position: relative; padding-left: 2.4rem; margin-bottom: .9rem;
  color: var(--tinta-fraca);
}
.passos li::before {
  content: counter(passo); position: absolute; left: 0; top: -.05rem;
  font-family: var(--display); font-size: 1.1rem; color: var(--tinta);
  width: 1.7rem; height: 1.7rem; border: 1px solid var(--borda); border-radius: 999px;
  display: grid; place-items: center;
}
.passos strong { color: var(--tinta); }

.regras {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1.3rem 1.4rem; margin: 2rem 0;
}
.regras h2 { font-size: 1.15rem; }
.regras ul { margin: 0; padding-left: 1.1rem; }
.regras li { margin-bottom: .55rem; color: var(--tinta-fraca); }
.regras strong { color: var(--tinta); }

.aviso {
  border-left: 3px solid var(--creme); padding-left: 1rem; color: var(--tinta-fraca);
  font-size: .95rem;
}

/* ---------- cards de candidatura ---------- */

.grade-candidatos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1.1rem 1.2rem;
}
.cabeca-candidato { display: flex; gap: .85rem; align-items: center; margin-bottom: .9rem; }
.cabeca-candidato img {
  width: 54px; height: 54px; border-radius: 999px; object-fit: cover; flex: none;
  background: var(--superficie-2); border: 1px solid var(--borda);
}
.nome-urna { font-family: var(--display); font-size: 1.1rem; font-weight: 600; line-height: 1.2; }
.partido-numero { font-size: .8rem; color: var(--tinta-fraca); letter-spacing: .04em; }

.ficha { list-style: none; margin: 0; padding: 0; font-size: .87rem; }
.ficha li { display: flex; gap: .5rem; padding: .28rem 0; border-top: 1px solid var(--borda); }
.ficha li:first-child { border-top: 0; }
.ficha .rotulo { color: var(--tinta-fraca); flex: none; min-width: 6.6rem; }

.selo {
  display: inline-block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--borda);
  color: var(--tinta-fraca);
}
.selo-deferido { border-color: color-mix(in srgb, var(--chumbo) 40%, transparent); }
.selo-pendente { border-style: dashed; }
.selo-indeferido { border-color: var(--creme); background: color-mix(in srgb, var(--creme) 25%, transparent); }

/* ---------- pílulas e abas ---------- */

.pilulas { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.pilulas button {
  border: 1px solid var(--borda); background: var(--superficie); color: var(--tinta-fraca);
  border-radius: 999px; padding: .38rem .85rem; font: inherit; font-size: .85rem; cursor: pointer;
}
.pilulas button:hover { color: var(--tinta); }
.pilulas button[aria-selected="true"] { background: var(--realce); color: var(--realce-tinta); border-color: var(--realce); }
.pilulas-sub button { font-size: .8rem; padding: .3rem .7rem; }

.abas { display: flex; gap: .35rem; margin: 1.1rem 0 1.2rem; border-bottom: 1px solid var(--borda); }
.abas button {
  border: 0; background: none; color: var(--tinta-fraca); font: inherit; font-size: .92rem;
  padding: .5rem .2rem; margin-right: 1.1rem; cursor: pointer; border-bottom: 2px solid transparent;
}
.abas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--tinta); }

/* ---------- grade de temas ---------- */

.grade-temas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); align-items: start; }
.grade-dupla { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.cartao-tema { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.1rem 1.2rem; }
.cartao-tema .cabeca-candidato { margin-bottom: .8rem; }
.cartao-tema .cabeca-candidato img { width: 40px; height: 40px; }
.cartao-tema .nome-urna { font-size: .98rem; }

.trecho { margin: 0 0 1rem; }
.trecho:last-child { margin-bottom: 0; }
.trecho blockquote {
  margin: 0; padding: .7rem .9rem; background: var(--citacao); border-left: 2px solid var(--creme);
  border-radius: 0 8px 8px 0; font-size: .93rem; font-style: italic;
}
.trecho .fonte-pagina { display: inline-block; margin-top: .35rem; font-size: .78rem; color: var(--tinta-fraca); text-decoration: none; }
.trecho .fonte-pagina:hover { color: var(--tinta); text-decoration: underline; }

.titulo-proposta { font-size: .93rem; font-weight: 600; margin: 0 0 .4rem; font-family: var(--texto); }
.proposta { margin-bottom: 1.2rem; }
.proposta:last-child { margin-bottom: 0; }

.vazio { color: var(--tinta-fraca); font-size: .9rem; font-style: italic; }
.nao-abordado {
  border: 1px dashed var(--borda); border-radius: 8px; padding: .8rem .9rem;
  color: var(--tinta-fraca); font-size: .9rem;
}

/* ---------- comparar ---------- */

.escolha-dupla { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.escolha-dupla label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--tinta-fraca); }
.escolha-dupla select {
  font: inherit; font-size: .95rem; padding: .5rem .7rem; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--tinta); min-width: 15rem;
}

/* ---------- contagem de palavras ---------- */

.busca { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.6rem; }
.busca label { font-size: .8rem; color: var(--tinta-fraca); display: block; }
.busca input {
  font: inherit; padding: .55rem .8rem; border-radius: 10px; border: 1px solid var(--borda);
  background: var(--superficie); color: var(--tinta); min-width: 16rem;
}
.busca button, .botao-cta, .acoes-dialogo button, .atalhos button {
  font: inherit; cursor: pointer; border-radius: 999px; padding: .55rem 1.2rem;
  border: 1px solid var(--realce); background: var(--realce); color: var(--realce-tinta);
}
.acoes-dialogo .secundario, .atalhos button {
  background: transparent; color: var(--tinta-fraca); border-color: var(--borda);
}

.barra-linha { display: grid; grid-template-columns: 11rem 1fr auto; gap: .8rem; align-items: center; margin-bottom: .5rem; font-size: .88rem; }
.barra-nome { color: var(--tinta-fraca); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-trilho { background: var(--superficie-2); border-radius: 999px; height: 12px; overflow: hidden; }
.barra-preenchida { height: 100%; background: var(--chumbo); border-radius: 999px; }
:root[data-tema="escuro"] .barra-preenchida { background: var(--claro); }
.barra-valor { font-variant-numeric: tabular-nums; color: var(--tinta-fraca); white-space: nowrap; }

/* ---------- fontes ---------- */

.lista-fontes { display: grid; gap: .8rem; }
.linha-fonte {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: .9rem 1.1rem; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: baseline;
}
.linha-fonte .titulo-plano { font-family: var(--display); font-size: 1rem; }
.linha-fonte .meta { color: var(--tinta-fraca); font-size: .84rem; }
.linha-fonte .links { margin-left: auto; display: flex; gap: .9rem; font-size: .84rem; }

/* ---------- CTA e rodapé ---------- */

.faixa-cta {
  max-width: var(--largura); margin: 0 auto 2rem; padding: 1.3rem 16px;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
}
.faixa-cta p { margin: 0; font-family: var(--display); font-size: 1.05rem; }
.faixa-cta .botao-cta { margin-left: auto; text-decoration: none; white-space: nowrap; }

.rodape { max-width: var(--largura); margin: 0 auto; padding: 0 16px 3rem; color: var(--tinta-fraca); font-size: .82rem; }
.rodape p { margin: 0 0 .5rem; }
.rodape-marca { font-family: var(--display); }

/* ---------- diálogo ---------- */

.dialogo {
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie);
  color: var(--tinta); padding: 1.4rem; max-width: 620px; width: calc(100% - 32px);
}
.dialogo::backdrop { background: rgba(10, 14, 22, .55); }
.dialogo h2 { font-size: 1.3rem; }
.dialogo > form > p { color: var(--tinta-fraca); font-size: .9rem; }
.atalhos { display: flex; gap: .5rem; margin-bottom: 1rem; }
.atalhos button { padding: .35rem .9rem; font-size: .85rem; }
.lista-selecao { display: grid; gap: .3rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); max-height: 48vh; overflow-y: auto; margin-bottom: 1.2rem; }
.lista-selecao label { display: flex; gap: .55rem; align-items: center; padding: .4rem .5rem; border-radius: 8px; font-size: .9rem; }
.lista-selecao label:hover { background: var(--superficie-2); }
.lista-selecao small { color: var(--tinta-fraca); }
.acoes-dialogo { display: flex; gap: .6rem; justify-content: flex-end; }

/* ---------- celular ---------- */

@media (max-width: 720px) {
  /* Sem quebrar a linha, o menu fica espremido ao lado da marca e some da
     vista no celular, que é de onde vem a maioria dos acessos. */
  .topo-linha { gap: .6rem; padding: .6rem 16px; flex-wrap: wrap; }
  .marca-texto small { display: none; }
  .menu { order: 3; width: 100%; margin-left: 0; padding-bottom: .1rem; }
  .botao-tema { margin-left: auto; }
  main { padding-top: 1.4rem; }
  .grade-temas, .grade-candidatos { grid-template-columns: 1fr; }
  .barra-linha { grid-template-columns: 8.5rem 1fr auto; font-size: .82rem; }
  .faixa-cta .botao-cta { margin-left: 0; }
  .linha-fonte .links { margin-left: 0; width: 100%; }
}