/* ---------------------------------------------------------------------------
   Pesquisa Sergipe 2026 -- Vozes Inteligencia

   QUEM LE ESTA PAGINA, e por que ela e assim. O proprio questionario descreve o
   eleitorado: 37% tem 45 anos ou mais, 31% estudou ate o fundamental, 59% ganha
   ate 2 salarios minimos. O trafego vem de anuncio no Instagram, no 4G, num
   Android mediano, muitas vezes na rua. Entao aqui legibilidade e tamanho de
   alvo de toque vencem qualquer outra consideracao: corpo de 17px, alvo minimo
   de 56px, contraste alto, uma coluna so.

   TEMA CLARO E UNICO, de proposito. Um tema escuro mudaria como as fotos dos
   candidatos sao percebidas, e numa pesquisa isso e erro de metodo: todo
   respondente tem de ver exatamente a mesma tela.

   COR. A paleta e a do Manual da marca da Vozes (a mesma do logo.svg). A
   primaria #C8375D entra so em selecao e no botao de enviar. Magenta nao e cor
   de partido nenhum no Brasil -- e essa a razao de ela servir aqui: a tela nao
   pode favorecer candidato.
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Plex Sans';
  src: url('fontes/plex-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fontes/plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --tinta: #14223e;
  --tinta-fraca: #5a6070;
  --papel: #ffffff;
  --fundo: #eef0f4;
  --traco: #d7dce5;
  --marca: #c8375d;
  --marca-escura: #a32943;
  --marca-lavada: #fceef3;
  --largura: 42rem;
  --raio: 0.75rem;
  --sombra: 0 1px 2px rgba(20, 34, 62, 0.06), 0 4px 16px rgba(20, 34, 62, 0.05);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: 'Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------- barra de progresso */

.progresso {
  position: fixed;
  inset: 0 0 auto 0;
  height: 0.25rem;
  background: rgba(20, 34, 62, 0.12);
  z-index: 20;
}
.progresso__trilho {
  height: 100%;
  width: 0;
  background: var(--marca);
  transition: width 0.25s ease;
}
.progresso__conta {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 20;
  font-family: 'Plex Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--tinta);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--traco);
  border-radius: 999px;
  padding: 0.25rem 0.625rem;
  backdrop-filter: blur(6px);
}

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

.topo {
  background: var(--tinta);
  color: #fff;
  padding: 2.75rem 1.25rem 2rem;
}
.topo__caixa { max-width: var(--largura); margin: 0 auto; }

/* A logo da Vozes. O arquivo servido e uma variante CLARA: o lockup de origem
   pinta o nome com `fill="var(--tinta)"`, que aqui e o mesmo navy do fundo deste
   cabecalho -- sairia invisivel. E variavel CSS nao atravessa <img>, entao a cor
   tem de estar assada no arquivo. `logo-vozes.svg` e gerado com o branco no
   lugar da variavel e com o `xmlns` que faltava no original. */
.topo__logo {
  display: block;
  height: 2.125rem;
  width: auto;
  margin: 0 0 1.25rem;
}
.topo__titulo {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}
.topo__linha {
  margin: 0;
  color: #c8d3e4;
  font-size: 1rem;
  max-width: 34rem;
}
.topo__linha strong { color: #fff; font-weight: 600; }

/* Os seis rostos no alto: para quem le pouco, isto diz do que e a pagina antes
   de qualquer frase. Todos do mesmo tamanho e na ordem do questionario -- a
   tela nao pode sugerir favorito. Em cinza para nao adiantar cor de partido. */
.rostos {
  display: flex;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.rostos img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 12%;
  display: block;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.85;
  background: #2a3a5c;
}
.rostos li { flex: 1 1 0; min-width: 0; max-width: 3.5rem; }

/* ------------------------------------------------------------------ corpo */

.corpo {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 1.25rem 0.75rem 6rem;
  display: grid;
  gap: 0.875rem;
}
/* OBRIGATORIO. `display: grid` acima e mais especifico que a regra `[hidden]`
   do navegador, entao `form.hidden = true` setava o atributo e o formulario
   CONTINUAVA na tela depois do envio -- com o agradecimento aparecendo embaixo
   dele. Vale para todo elemento com display declarado que se esconda por
   atributo. */
.corpo[hidden] { display: none; }

.pergunta {
  background: var(--papel);
  border: 1px solid var(--traco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.25rem 1rem 1.125rem;
  margin: 0;
  min-width: 0;
}
.pergunta[data-faltando='sim'] {
  box-shadow: 0 0 0 2px var(--marca), var(--sombra);
}

.pergunta__indice {
  font-family: 'Plex Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--marca);
  display: block;
  margin-bottom: 0.375rem;
}
/* Era um <legend> dentro de <fieldset>, e o legend e posicionado POR CIMA da
   borda do fieldset, fora da caixa de padding -- o titulo saia do cartao. Virou
   um <h2> num <div role="radiogroup">: mesma semantica para leitor de tela,
   layout previsivel. */
.pergunta__titulo {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  padding: 0;
  margin: 0 0 0.25rem;
}
.pergunta__apoio {
  margin: 0 0 0.875rem;
  color: var(--tinta-fraca);
  font-size: 0.9375rem;
}
.pergunta__apoio:last-of-type { margin-bottom: 0.875rem; }

.opcoes { display: grid; gap: 0.5rem; }

/* ---------------------------------------------------------------- alternativa

   A linha inteira e o alvo de toque, com 3.5rem de altura minima. O input e
   real (nao div com role) para o teclado e o leitor de tela funcionarem de
   graca. O estado visual usa :has(), mas SO para cor -- nunca para layout,
   senao vence a media query e o desenho de celular nao aplica. */

.opcao {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.5rem 0.875rem;
  border: 1.5px solid var(--traco);
  border-radius: 0.625rem;
  background: var(--papel);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.opcao:hover { border-color: #b6bfd0; }
.opcao:has(input:checked) {
  border-color: var(--marca);
  background: var(--marca-lavada);
}
.opcao:has(input:focus-visible) {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
}

.opcao input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  border: 2px solid #a9b3c4;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.opcao input::after {
  content: '';
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 50%;
  transform: scale(0);
  background: var(--marca);
  transition: transform 0.12s ease;
}
.opcao input:checked { border-color: var(--marca); }
.opcao input:checked::after { transform: scale(1); }

.opcao__texto { flex: 1 1 auto; min-width: 0; }
.opcao__nome { display: block; font-weight: 500; }
.opcao:has(input:checked) .opcao__nome { font-weight: 600; }
.opcao__partido {
  display: block;
  font-size: 0.875rem;
  color: var(--tinta-fraca);
}

.retrato {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 12%;
  background: #e3e7ee;
  display: block;
}

/* O numero de urna. E assim que o eleitor identifica o candidato, e e o que ele
   vai digitar em outubro -- por isso ele e o elemento com mais presenca da
   linha depois do rosto. Tabular para as colunas ficarem alinhadas. */
.numero {
  flex: none;
  font-family: 'Plex Mono', ui-monospace, monospace;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--tinta-fraca);
  margin-left: auto;
  padding-left: 0.5rem;
}
.opcao:has(input:checked) .numero { color: var(--marca-escura); }

/* ------------------------------------------------------------------ matriz

   Um cartao por candidato, com os cinco niveis dentro. Cada nivel carrega o
   proprio rotulo, sempre -- e por isso que nao existe linha de cabecalho para
   desalinhar, e por isso que o mesmo DOM serve celular e desktop. A grade de 5
   colunas da AtlasIntel nao cabe em 360px, e esta e a pergunta que justifica o
   site existir: ela precisa funcionar no celular. */

.matriz { display: grid; gap: 0.75rem; }

.matriz__linha {
  border: 1.5px solid var(--traco);
  border-radius: 0.625rem;
  padding: 0.75rem;
  min-width: 0;
  border-width: 1.5px;
  margin: 0;
}
.matriz__linha[data-faltando='sim'] { border-color: var(--marca); }

.matriz__cabeca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
  padding: 0;
}
.matriz__nome { font-weight: 600; line-height: 1.2; }
.matriz__partido {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--tinta-fraca);
}

.matriz__niveis { display: grid; gap: 0.375rem; }

.nivel {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.375rem 0.625rem;
  border: 1.5px solid var(--traco);
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.2;
  cursor: pointer;
  background: var(--papel);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.nivel:hover { border-color: #b6bfd0; }
.nivel:has(input:checked) {
  border-color: var(--marca);
  background: var(--marca-lavada);
  font-weight: 600;
}
.nivel:has(input:focus-visible) {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
}
.nivel input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 2px solid #a9b3c4;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.nivel input::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  transform: scale(0);
  background: var(--marca);
  transition: transform 0.12s ease;
}
.nivel input:checked { border-color: var(--marca); }
.nivel input:checked::after { transform: scale(1); }

/* ---------------------------------------------------------------- municipio */

.municipio {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 0.875rem;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1.5px solid var(--traco);
  border-radius: 0.625rem;
}
.municipio:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
.municipio:valid:not([data-vazio='sim']) { border-color: var(--marca); background: var(--marca-lavada); }

/* ------------------------------------------------------------- subordinada

   O bairro, que so aparece para quem escolheu Aracaju. Vive dentro do cartao do
   municipio de proposito: assim o contador continua "6 de 12" em vez de virar 13
   no meio do preenchimento conforme a cidade escolhida.

   A regra [hidden] abaixo e OBRIGATORIA -- sem ela o `hidden` do HTML perde para
   qualquer display declarado e o bloco fica na tela. Mesmo defeito que ja
   aconteceu com o formulario em 28/08/2026.

   Sem JavaScript, o <noscript> do HTML devolve este bloco para a tela: quem mora
   na capital tem de conseguir responder o bairro de qualquer jeito. */
.subordinada {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--traco);
}
.subordinada[hidden] { display: none; }
.subordinada__rotulo {
  display: block;
  font-weight: 600;
  font-size: 1.0625rem;
  margin-bottom: 0.25rem;
}

/* -------------------------------------------------------------------- envio */

.envio { display: grid; gap: 0.75rem; justify-items: stretch; }

.botao {
  min-height: 3.5rem;
  padding: 0.875rem 1.5rem;
  font: inherit;
  font-weight: 600;
  font-size: 1.0625rem;
  color: #fff;
  background: var(--marca);
  border: 0;
  border-radius: 0.625rem;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.botao:hover { background: var(--marca-escura); }
.botao:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.botao[disabled] { opacity: 0.55; cursor: progress; }

.aviso {
  margin: 0;
  padding: 0.75rem 0.875rem;
  border-radius: 0.5rem;
  background: var(--marca-lavada);
  border: 1px solid var(--marca);
  color: var(--marca-escura);
  font-size: 0.9375rem;
}
.aviso[hidden] { display: none; }

/* O honeypot: invisivel para gente, preenchido por robo. Fora da tela em vez de
   display:none, porque muito robo ignora campo com display:none. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rodape {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 1rem 2.5rem;
  color: var(--tinta-fraca);
  font-size: 0.8125rem;
  line-height: 1.55;
}
.rodape p { margin: 0 0 0.5rem; }

/* ------------------------------------------------------------ agradecimento */

.fim {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 4rem 1rem;
  text-align: center;
}
.fim h2 {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}
.fim p { color: var(--tinta-fraca); margin: 0 auto; max-width: 26rem; }
.fim[hidden] { display: none; }

/* -------------------------------------------------------------- tela larga */

@media (min-width: 48rem) {
  .topo { padding: 4rem 1.25rem 3rem; }
  .topo__logo { height: 2.625rem; }
  .topo__titulo { font-size: 2.75rem; }
  .rostos { gap: 0.75rem; }
  .rostos li { max-width: 4.5rem; }
  .corpo { padding: 1.75rem 1rem 6rem; gap: 1rem; }
  .pergunta { padding: 1.5rem 1.5rem 1.375rem; }
  .pergunta__titulo { font-size: 1.3125rem; }

  /* Os cinco niveis lado a lado. Cada um continua carregando o proprio rotulo,
     entao nao ha cabecalho para desalinhar. */
  .matriz__niveis { grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
  .nivel {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    min-height: 5.25rem;
    padding: 0.625rem 0.375rem;
    font-size: 0.8125rem;
    gap: 0.375rem;
  }
  .envio { justify-items: start; }
  .botao { padding-inline: 3rem; }
}

/* --------------------------------------------------------- menos movimento */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}