/* ===============================================================
   Site institucional — José Henrique Sabino
   CSS mobile-first, sem framework.
   Estrutura: tokens → base → layout → cabeçalho → menu →
              componentes → rodapé → telas maiores
   =============================================================== */

/* ---------------------------------------------------------------
   1. Tokens
   Cores extraídas das peças gráficas da campanha.
   --------------------------------------------------------------- */
:root {
  /* Marca */
  --verde-escuro: #14532d;
  --verde:        #1b6b3a;
  --verde-medio:  #2f8b52;
  --verde-claro:  #e9f2ec;
  --vermelho:     #ce2b37;
  --vermelho-claro: #fbeced;
  --marinho:      #1b2a5e;

  /* Neutros */
  --branco:       #ffffff;
  --off-white:    #f8f7f3;
  --cinza-borda:  #e2e0d9;
  --linha-tabela: #c6d7cc;   /* bordas internas da tabela de candidatos */
  --texto:        #23262b;
  --texto-suave:  #5a6068;

  /* Tipografia */
  --fonte-titulo: "Archivo", "Segoe UI", system-ui, sans-serif;
  --fonte-texto:  "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --fonte-script: "Caveat", cursive;

  /* Espaçamento e formas */
  --espaco:        1rem;
  --espaco-secao:  2.5rem;   /* cresce nas telas maiores, ver seção 8 */
  --largura-max:   1120px;
  --raio:          14px;
  --raio-pequeno:  8px;
  --sombra:        0 2px 10px rgba(20, 83, 45, .08);
  --sombra-forte:  0 6px 24px rgba(20, 83, 45, .14);

  --altura-cabecalho: 68px;
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* compensa o cabeçalho fixo ao pular para âncoras */
  scroll-padding-top: calc(var(--altura-cabecalho) + 1rem);
}

body {
  margin: 0;
  background: var(--off-white);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;

  /* E-mails e endereços longos (curitiba.elettorale@esteri.it,
     serviziconsolari.esteri.it) não cabem em uma linha de celular
     estreito; sem isto, empurrariam a página para os lados. */
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: var(--verde); }
a:hover { color: var(--verde-escuro); }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  line-height: 1.15;
  color: var(--verde-escuro);
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 6vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }

p { margin: 0 0 1.1em; }

/* Foco sempre visível — acessibilidade por teclado */
:focus-visible {
  outline: 3px solid var(--vermelho);
  outline-offset: 2px;
  border-radius: 4px;
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--verde-escuro);
  color: var(--branco);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--raio-pequeno) 0;
}
.pular-para-conteudo:focus {
  left: 0;
  color: var(--branco);
}

/* ---------------------------------------------------------------
   3. Layout
   --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--espaco);
}

.secao { padding-block: var(--espaco-secao); }

/* Artigo curto: menos respiro em volta, para o texto não ficar
   perdido no meio de uma área branca grande */
.secao--compacta { padding-block: 1.75rem; }
.secao--clara { background: var(--branco); }
.secao--verde { background: var(--verde-claro); }

.secao__titulo {
  text-align: center;
  margin-bottom: .4em;
}

.secao__subtitulo {
  text-align: center;
  color: var(--texto-suave);
  max-width: 60ch;
  margin: 0 auto 2.5rem;
}

/* Detalhe tricolor usado como divisor */
.tricolor {
  display: block;
  width: 84px;
  height: 5px;
  border-radius: 3px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(
    to right,
    var(--verde) 0 33.33%,
    var(--branco) 33.33% 66.66%,
    var(--vermelho) 66.66% 100%
  );
  border: 1px solid var(--cinza-borda);
}

/* ---------------------------------------------------------------
   4. Cabeçalho
   --------------------------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-borda);
  box-shadow: var(--sombra);
}

.cabecalho__interno {
  min-height: var(--altura-cabecalho);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco);
}

.marca {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: inherit;
  padding-block: .5rem;
}

.marca__logo {
  width: 44px;
  height: auto;
  flex-shrink: 0;
}

.marca__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.marca__slogan {
  font-family: var(--fonte-script);
  font-size: 1rem;
  color: var(--vermelho);
}

/* ---------------------------------------------------------------
   5. Menu
   Celular: gaveta que abre abaixo do cabeçalho.
   --------------------------------------------------------------- */
.menu-botao {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 10px;
  background: var(--verde-claro);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  cursor: pointer;
}

.menu-botao__barra {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--verde-escuro);
  transition: transform .2s ease, opacity .2s ease;
}

/* Vira "X" quando aberto */
.menu-botao[aria-expanded="true"] .menu-botao__barra:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-botao[aria-expanded="true"] .menu-botao__barra:nth-child(2) {
  opacity: 0;
}
.menu-botao[aria-expanded="true"] .menu-botao__barra:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-borda);
  box-shadow: var(--sombra-forte);
  display: none;
}
.menu.esta-aberto { display: block; }

.menu__lista {
  list-style: none;
  margin: 0;
  padding: .5rem var(--espaco) 1rem;
  display: flex;
  flex-direction: column;
}

.menu__link {
  display: block;
  padding: .85rem .25rem;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--verde-escuro);
  text-decoration: none;
  border-bottom: 1px solid var(--cinza-borda);
}
.menu__link:hover { color: var(--vermelho); }

.menu__link[aria-current="page"] {
  color: var(--vermelho);
  font-weight: 700;
}

.menu__link--destaque {
  margin-top: .75rem;
  border-bottom: none;
  background: var(--verde-escuro);
  color: var(--branco);
  text-align: center;
  border-radius: var(--raio-pequeno);
  padding: .85rem 1rem;
}
.menu__link--destaque:hover {
  background: var(--verde);
  color: var(--branco);
}

/* ---------------------------------------------------------------
   6. Componentes
   --------------------------------------------------------------- */

/* Botões de contato */
.botao {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  padding: .8rem 1.35rem;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--fonte-titulo);
  background: var(--branco);
  color: var(--verde-escuro);
  border: 2px solid var(--verde-escuro);
  transition: transform .15s ease, box-shadow .15s ease;
}
.botao:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-forte);
  color: var(--verde-escuro);
}

.botao__rotulo {
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .75;
}
.botao__valor { font-weight: 700; font-size: 1.02rem; }

.botao--whatsapp {
  background: var(--verde-escuro);
  color: var(--branco);
  border-color: var(--verde-escuro);
}
.botao--whatsapp:hover { color: var(--branco); }

.botao--instagram {
  background: var(--branco);
  color: var(--vermelho);
  border-color: var(--vermelho);
}
.botao--instagram:hover { color: var(--vermelho); }

/* Botão simples (links de ação dentro do conteúdo) */
.botao-simples {
  display: inline-block;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  background: var(--verde-escuro);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  text-decoration: none;
}
.botao-simples:hover { background: var(--verde); color: var(--branco); }

/* Cartões das categorias */
/* Grade adaptativa: o número de colunas vem da largura disponível,
   não de um número fixo. Com 4 categorias isso evita deixar um
   cartão órfão sozinho na última linha. */
.cartoes {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .cartoes { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

.cartao {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cartao:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-forte);
}

.cartao__imagem {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  width: 100%;
  background: var(--verde-claro);
}

.cartao__corpo {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cartao__titulo {
  font-size: 1.25rem;
  margin-bottom: .45em;
}

.cartao__resumo {
  color: var(--texto-suave);
  flex: 1;
}

.cartao__acao {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  text-decoration: none;
  color: var(--vermelho);
}
.cartao__acao::after { content: " →"; }

/* Artigo (páginas de categoria) */
.artigo { max-width: 68ch; margin-inline: auto; }

.artigo p { color: var(--texto); }

.artigo__destaque {
  width: 100%;
  border-radius: var(--raio);
  border: 1px solid var(--cinza-borda);
  margin-bottom: 2rem;
  box-shadow: var(--sombra);
}

/* Links dentro do texto corrido: sublinhados para ficarem evidentes.
   A regra mira apenas os parágrafos, para não sublinhar botões que
   também vivem dentro do artigo. */
.artigo p a {
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: .06em;
}

/* Telefone e outros trechos que não podem quebrar no meio */
.sem-quebra { white-space: nowrap; }

.artigo__fontes {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cinza-borda);
  font-size: .9rem;
  color: var(--texto-suave);
}
.artigo__fontes ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.artigo__fontes li { margin-bottom: .3rem; }

/* Aviso de conteúdo ainda não publicado */
.aviso {
  background: var(--vermelho-claro);
  border: 1px solid #f2c9cd;
  border-left: 5px solid var(--vermelho);
  border-radius: var(--raio-pequeno);
  padding: 1.1rem 1.25rem;
  color: var(--texto);
}

/* Faixa de contato */
.faixa-contato {
  background: var(--verde-escuro);
  color: var(--branco);
  padding-block: 2.5rem;
}

.faixa-contato__interno {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.faixa-contato__titulo {
  color: var(--branco);
  font-family: var(--fonte-script);
  font-size: 2.4rem;
  margin-bottom: .1em;
}

.faixa-contato p { margin: 0; opacity: .92; }

.faixa-contato__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}

.faixa-contato .botao--whatsapp {
  background: var(--branco);
  color: var(--verde-escuro);
  border-color: var(--branco);
}
.faixa-contato .botao--instagram {
  background: transparent;
  color: var(--branco);
  border-color: var(--branco);
}
.faixa-contato .botao--instagram:hover { color: var(--branco); }

/* ---------------------------------------------------------------
   7. Rodapé
   --------------------------------------------------------------- */
.rodape {
  background: var(--branco);
  border-top: 4px solid var(--verde-escuro);
  padding-top: 2.5rem;
  font-size: .96rem;
}

.rodape__interno {
  display: grid;
  gap: 2rem;
  padding-bottom: 2rem;
}

.rodape__nome { margin-bottom: .25em; }

.rodape__slogan {
  font-family: var(--fonte-script);
  font-size: 1.35rem;
  color: var(--vermelho);
  margin-bottom: .4em;
}

.rodape__chamada { color: var(--texto-suave); margin: 0; }

.rodape__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--verde-escuro);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82rem;
  margin-bottom: .7em;
}

.rodape__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rodape__lista li { margin-bottom: .1rem; }
/* Área de toque de ~44px, recomendada para uso com o polegar */
.rodape__lista a {
  display: inline-block;
  padding-block: .5rem;
  text-decoration: none;
}
.rodape__lista a:hover { text-decoration: underline; }

.rodape__assinatura {
  background: var(--verde-escuro);
  color: var(--branco);
  padding-block: 1rem;
  font-size: .84rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rodape__assinatura .container {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.rodape__assinatura p { margin: 0; }
.rodape__creditos { opacity: .75; text-transform: none; letter-spacing: 0; }

/* ---------------------------------------------------------------
   8. Telas maiores
   --------------------------------------------------------------- */
@media (min-width: 640px) {
  :root { --espaco-secao: 3rem; }

  .faixa-contato__interno {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .rodape__assinatura .container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 900px) {
  :root {
    --altura-cabecalho: 76px;
    --espaco-secao: 4rem;
  }

  .secao--compacta { padding-block: 2.25rem; }

  .menu-botao { display: none; }

  .menu {
    position: static;
    display: block;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .menu__lista {
    flex-direction: row;
    align-items: center;
    gap: .35rem;
    padding: 0;
  }

  .menu__link {
    border-bottom: none;
    padding: .5rem .75rem;
    font-size: .98rem;
    border-radius: var(--raio-pequeno);
  }
  .menu__link:hover { background: var(--verde-claro); }

  .menu__link[aria-current="page"] {
    background: var(--verde-claro);
  }

  .menu__link--destaque { margin-top: 0; padding: .6rem 1.15rem; }
  .menu__link--destaque:hover { background: var(--verde); }

  .marca__logo { width: 56px; }
  .assinatura--cabecalho { font-size: 1.5rem; }
  .marca__slogan { font-size: 1.1rem; }

  .rodape__interno { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
}

/* ---------------------------------------------------------------
   9. Preferências do usuário e impressão
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .cabecalho, .menu, .faixa-contato, .pular-para-conteudo { display: none; }
  body { background: #fff; font-size: 11pt; }
  .artigo { max-width: none; }
}

/* ---------------------------------------------------------------
   10. Home — hero e chamada da eleição
   --------------------------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(circle at 20% 0%, rgba(47, 139, 82, .35), transparent 55%),
    linear-gradient(160deg, var(--verde-escuro) 0%, #0f3d21 100%);
  color: var(--branco);
  padding-top: 1.75rem;
  overflow: hidden;
}

/* Skyline de Mantova ao fundo — a cidade da família do candidato,
   mesma imagem usada nas peças de campanha.
   A imagem entra por baixo e se dissolve no verde por meio de um
   degradê sobreposto, de modo que o texto continue sobre área
   escura e uniforme. Puro CSS: sem máscara, funciona em qualquer
   navegador; se a imagem não carregar, resta o verde de sempre. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;                 /* cobre o hero inteiro: sem emenda visível */
  z-index: 0;
  pointer-events: none;

  /* Três camadas, de cima para baixo:
     1. brilho verde no canto superior esquerdo, atrás do nome;
     2. véu que escurece o topo e alivia na base, garantindo
        contraste para o texto branco;
     3. a skyline de Mantova, ancorada na base. A imagem já tem o
        esmaecimento embutido no canal alfa, então se dissolve no
        verde sem deixar emenda, em qualquer tamanho de tela. */
  background-image:
    radial-gradient(circle at 18% 6%, rgba(47, 139, 82, .40), transparent 52%),
    linear-gradient(
      to top,
      rgba(13, 55, 30, .22) 0%,
      rgba(16, 66, 36, .60) 40%,
      rgba(19, 79, 43, .88) 72%,
      rgba(20, 83, 45, .98) 92%
    ),
    url("../img/hero-mantova.webp");
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center, center, center bottom;
  background-repeat: no-repeat;
}

/* No celular o hero é alto e o recorte "cover" engoliria a cidade.
   Aqui a skyline vira uma faixa de horizonte na base, atrás da foto:
   a largura é maior que a tela para a silhueta ganhar altura. */
@media (max-width: 899px) {
  .hero::before {
    background-size: 100% 100%, 100% 100%, 210% auto;
  }
}

/* Conteúdo sempre acima do fundo */
.hero__interno,
.hero__tricolor { position: relative; z-index: 1; }

/* No celular a ordem é a da marcação: identidade → foto → apoio.
   O objetivo é que nome, slogan e rosto caibam na primeira tela,
   sem precisar rolar. */
.hero__texto {
  display: flex;
  flex-direction: column;
}

.hero__sobretitulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #b9e3c7;
  margin-bottom: .5rem;
}

.hero__titulo {
  color: var(--branco);
  font-size: clamp(2.5rem, 11.5vw, 5.4rem);
  margin-bottom: .18em;
}

.hero__slogan {
  font-family: var(--fonte-script);
  font-size: clamp(1.45rem, 6.5vw, 2.2rem);
  color: #ffd9dc;
  margin-bottom: 0;
}

.hero__foto {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 1.1rem auto 1.4rem;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .35));
}
.hero__foto img { width: 100%; height: auto; }

.hero__chamada {
  max-width: 46ch;
  opacity: .94;
  margin-bottom: 1.4rem;
}

/* Botões ocupando a largura toda: alvos de toque generosos e
   alinhados entre si. A partir de 560px voltam a ficar lado a lado. */
.hero__acoes {
  display: grid;
  gap: .7rem;
  margin-bottom: 1.25rem;
}
.hero__acoes .botao-simples { text-align: center; }

@media (min-width: 560px) {
  .hero__acoes {
    grid-auto-flow: column;
    justify-content: start;
  }
}

/* Faixa tricolor que fecha o hero */
.hero__tricolor {
  display: block;
  position: relative;   /* fica acima da foto, que avanca sobre a faixa */
  z-index: 3;
  height: 6px;
  background: linear-gradient(
    to right,
    var(--verde-medio) 0 33.33%,
    var(--branco) 33.33% 66.66%,
    var(--vermelho) 66.66% 100%
  );
}

.botao-simples--contorno {
  background: transparent;
  color: var(--branco);
  border: 2px solid rgba(255, 255, 255, .65);
}
.botao-simples--contorno:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--branco);
}

/* Mesma ideia do contorno acima, mas para fundos claros */
.botao-simples--contorno-verde {
  background: transparent;
  color: var(--verde-escuro);
  border: 2px solid var(--verde-escuro);
}
.botao-simples--contorno-verde:hover {
  background: var(--branco);
  color: var(--verde-escuro);
}

/* O cartão inteiro é clicável */
.cartao__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}
.cartao__link:hover { color: inherit; }
.cartao__link:hover .cartao__acao { text-decoration: underline; }

@media (min-width: 900px) {
  .hero { padding-top: 3.5rem; }

  /* A altura mínima fica no container interno, e não no .hero: a
     faixa tricolor vem depois dele, então esticar o .hero abriria
     um vão abaixo dela. Cálculo: a foto tem 620px de largura, o que
     dá ≈601px de altura; ancorada em bottom:-6px, com 560px de
     altura mínima ela nasce ~21px abaixo do topo do verde — folga
     suficiente para a cabeça não encostar na borda. */
  .hero__interno {
    position: relative;
    min-height: 560px;
  }

  /* No desktop a foto sai do fluxo e vai para a direita; o texto
     ocupa a coluna da esquerda. */
  .hero__texto { width: 54%; }

  .hero__identidade { margin-bottom: .8rem; }

  .hero__foto {
    position: absolute;
    right: 2.5rem;          /* afastado da borda: desloca para a esquerda */
    bottom: -6px;           /* avança sobre a faixa tricolor */
    width: 620px;
    max-width: none;
    margin: 0;
  }
  .hero__foto img { display: block; width: 100%; }
}

/* ---------------------------------------------------------------
   11. Página de categoria
   --------------------------------------------------------------- */
.titulo-pagina {
  background:
    radial-gradient(circle at 15% 0%, rgba(47, 139, 82, .32), transparent 60%),
    linear-gradient(160deg, var(--verde-escuro) 0%, #0f3d21 100%);
  color: var(--branco);
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

.titulo-pagina__trilha {
  font-size: .85rem;
  color: #b9e3c7;
  margin-bottom: 1rem;
}
.titulo-pagina__trilha a { color: #b9e3c7; text-decoration: none; }
.titulo-pagina__trilha a:hover { color: var(--branco); text-decoration: underline; }
.titulo-pagina__trilha span { margin-inline: .45rem; opacity: .6; }

.titulo-pagina__titulo {
  color: var(--branco);
  margin-bottom: .35em;
}

.titulo-pagina__resumo {
  max-width: 58ch;
  font-size: 1.1rem;
  opacity: .93;
  margin: 0;
}

/* Primeiro parágrafo do texto, levemente destacado */
.artigo > p:first-of-type {
  font-size: 1.14rem;
  color: var(--texto);
}

.lista-atalhos {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
.lista-atalhos li { margin-bottom: .6rem; }
.lista-atalhos a {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  text-decoration: none;
}
.lista-atalhos a:hover { text-decoration: underline; }

/* Peça de divulgação */
.peca {
  margin: 0;
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}

.peca__imagem {
  width: 100%;
  border-radius: var(--raio);
  border: 1px solid var(--cinza-borda);
  box-shadow: var(--sombra-forte);
  background: var(--branco);
}

.peca__legenda { margin-top: 1.25rem; }

.cartoes--duplo { max-width: 760px; margin-inline: auto; }

@media (min-width: 900px) {
  .titulo-pagina { padding-top: 3rem; padding-bottom: 3.5rem; }
}

/* ---------------------------------------------------------------
   12. Assinatura do nome
   "José Henrique" pequeno sobre "SABINO" grande — hierarquia do
   material de campanha. Um só componente, usado no cabeçalho, no
   hero e no rodapé; muda apenas o font-size do elemento pai, e as
   duas linhas acompanham (tamanhos em em).
   --------------------------------------------------------------- */
.assinatura {
  display: flex;
  flex-direction: column;
  font-family: var(--fonte-titulo);
  line-height: 1;
}

.assinatura__primeiro {
  font-size: .34em;
  font-weight: 700;
  letter-spacing: .005em;
  white-space: nowrap;
}

.assinatura__sobrenome {
  font-size: 1em;
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

/* Cabeçalho — proporção menos extrema, para "José Henrique"
   continuar legível em tamanho pequeno */
.assinatura--cabecalho { font-size: 1.3rem; }
.assinatura--cabecalho .assinatura__primeiro {
  font-size: .46em;
  color: var(--marinho);
}
.assinatura--cabecalho .assinatura__sobrenome { color: var(--verde-escuro); }

/* Hero — as duas linhas em branco: a diferença de tamanho já
   carrega a hierarquia, como no material de referência */
.assinatura--hero .assinatura__primeiro,
.assinatura--hero .assinatura__sobrenome { color: var(--branco); }

/* Rodapé */
.assinatura--rodape { font-size: 1.7rem; }
.assinatura--rodape .assinatura__primeiro {
  font-size: .4em;
  color: var(--marinho);
}
.assinatura--rodape .assinatura__sobrenome { color: var(--verde-escuro); }

/* ---------------------------------------------------------------
   13. Aviso de arquivo para download
   Usado na página "Como votar" para o formulário da cédula.
   Celular primeiro: empilhado, com botão de largura cheia.
   --------------------------------------------------------------- */
.arquivo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.25rem;
  background: var(--verde-claro);
  border: 1px solid #c3ddcc;
  border-left: 5px solid var(--verde-escuro);
  border-radius: var(--raio);
}

.arquivo__rotulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--verde-escuro);
  margin: 0 0 .35em;
}

.arquivo__descricao {
  margin: 0;
  font-size: .95rem;
  color: var(--texto);
}

.arquivo__botao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  background: var(--verde-escuro);
  color: var(--branco);
  text-decoration: none;
  text-align: center;
  flex-shrink: 0;
}
.arquivo__botao:hover { background: var(--verde); color: var(--branco); }

.arquivo__acao {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1rem;
}

.arquivo__meta {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
}

@media (min-width: 640px) {
  .arquivo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
}

/* ---------------------------------------------------------------
   14. Tabela de candidatos da chapa
   Baseada no cartaz oficial, sem cabeçalho e sem ícones: as linhas
   alternadas é que separam um candidato do outro.
   Celular primeiro: abaixo de 560px cada linha vira um cartão.
   --------------------------------------------------------------- */

.tabela-area {
  max-width: 820px;
  margin-inline: auto;
}

.chapa {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;          /* 16px, como pedido */
}

.chapa__sobrenome {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--marinho);
}

.chapa__nome   { color: var(--texto); }
.chapa__cidade { color: var(--texto); }

/* Alternância clara / escura entre as linhas.
   O verde é bem mais presente que o anterior, mas continua claro o
   bastante para o texto escuro manter contraste alto de leitura. */
.chapa tbody tr               { background: var(--branco); }
.chapa tbody tr:nth-child(even) { background: #dde9e1; }

/* O candidato deste site se destaca das duas faixas */
.chapa tbody tr.chapa__destaque { background: #bedcc9; }
.chapa__destaque .chapa__nome,
.chapa__destaque .chapa__cidade { font-weight: 600; }

/* ---- Celular: cada candidato vira um cartão ---- */
@media (max-width: 559px) {
  .chapa,
  .chapa tbody,
  .chapa tr { display: block; }

  .chapa tbody tr {
    padding: .75rem 1rem .8rem;
    margin-bottom: .45rem;
    /* Mesma cor das bordas da tabela no desktop, para os dois
       formatos terem o mesmo acabamento. */
    border: 1px solid var(--linha-tabela);
    border-radius: var(--raio-pequeno);
  }
  .chapa tbody tr:last-child { margin-bottom: 0; }

  .chapa td { display: inline; padding: 0; }

  /* Sobrenome e nome na mesma linha, separados por vírgula */
  .chapa__sobrenome-cel::after {
    content: ",";
    font-family: var(--fonte-titulo);
    font-weight: 800;
    color: var(--marinho);
    margin-right: .3em;
  }

  /* Seletor com a mesma força de ".chapa td", senão o display
     inline das células venceria por especificidade. */
  .chapa td.chapa__cidade {
    display: block;
    margin-top: .15rem;
    color: var(--texto-suave);
  }

  .chapa tbody tr.chapa__destaque {
    border-color: var(--verde-escuro);
    border-left-width: 4px;
  }
}

/* ---- Tablet e desktop: tabela ---- */
@media (min-width: 560px) {
  .tabela-area {
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra);
  }

  /* Grade visível: linha horizontal entre os candidatos e divisória
     leve entre as colunas. O tom vem da paleta do site — um cinza
     esverdeado que conversa com as faixas claras da tabela. */
  .chapa td {
    padding: .62rem .95rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--linha-tabela);
    border-right: 1px solid var(--linha-tabela);
  }

  .chapa td:last-child { border-right: none; }
  .chapa tbody tr:last-child td { border-bottom: none; }

  .chapa__sobrenome-cel { white-space: nowrap; }
}

/* Estado vazio: a lista ainda não foi divulgada */
.chapa__vazia {
  max-width: 54ch;
  margin-inline: auto;
  text-align: center;
  color: var(--texto-suave);
  background: var(--branco);
  border: 1px dashed var(--cinza-borda);
  border-radius: var(--raio);
  padding: 1.5rem 1.25rem;
}

@media (min-width: 640px) {
  .chapa { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------
   15. Os três passos da cédula eleitoral (home)
   Celular primeiro: um passo embaixo do outro; três colunas a
   partir de 820px.
   --------------------------------------------------------------- */
.passos__lista {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  counter-reset: passo;
}

.passo {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-left: 4px solid var(--verde-escuro);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.15rem 1.25rem 1.25rem;
}

.passo__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--verde-escuro);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  vertical-align: middle;
}

.passo__icone {
  display: inline-block;
  width: 26px;
  height: 26px;
  fill: var(--verde);
  margin-left: .6rem;
  vertical-align: middle;
}

.passo__titulo {
  font-size: 1.08rem;
  margin: .9rem 0 .35em;
}

.passo__texto {
  margin: 0;
  color: var(--texto);
}

/* Frase de fechamento, destacada da lista */
.passos__fecho {
  max-width: 60ch;
  margin: 0 auto 1.5rem;
  text-align: center;
  font-size: 1.05rem;
}
.passos__fecho strong { color: var(--verde-escuro); }

.passos__acoes {
  display: grid;
  gap: .7rem;
  justify-content: stretch;
}
.passos__acoes .botao-simples { text-align: center; }

@media (min-width: 560px) {
  .passos__acoes {
    grid-auto-flow: column;
    justify-content: center;
  }
}

@media (min-width: 820px) {
  .passos__lista { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

/* ---------------------------------------------------------------
   16. Formulário da cédula (home)
   Quadro branco com os campos. Celular primeiro: uma coluna;
   duas a partir de 640px, com campos largos e curtos.
   --------------------------------------------------------------- */
.form-cedula {
  max-width: 760px;
  margin: 0 auto;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
}

.form-cedula__bloco {
  border: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
.form-cedula__bloco:last-of-type { margin-bottom: 1.5rem; }

.form-cedula__legenda {
  padding: 0;
  margin-bottom: .9rem;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde-escuro);
  border-bottom: 2px solid var(--verde-claro);
  width: 100%;
  padding-bottom: .4rem;
}

.form-cedula__grade {
  display: grid;
  gap: .9rem;
}

.campo-site { margin: 0; }

/* Campo de poucos caracteres (sigla de estado): largura proporcional
   ao que cabe nele, em qualquer tamanho de tela. */
.campo-site--minimo .campo-site__entrada { max-width: 6.5rem; }

.campo-site__rotulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: .85rem;
  color: var(--verde-escuro);
  margin-bottom: .3rem;
}

.campo-site__entrada {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--texto);
  background: var(--branco);
  border: 2px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  padding: .65rem .8rem;
}

/* O formulário oficial exige preenchimento em letra de forma, por
   isso os campos exibem sempre maiúsculas. O valor em si é convertido
   pelo assets/js/formulario.js e, por garantia, também no servidor. */
.form-cedula .campo-site__entrada { text-transform: uppercase; }

.campo-site__entrada:focus {
  border-color: var(--verde);
  outline: none;
  box-shadow: 0 0 0 3px rgba(27, 107, 58, .18);
}

.form-cedula__acoes { display: grid; }
.form-cedula__acoes .botao-simples { text-align: center; }

.passos__rodape {
  text-align: center;
  margin: 1.25rem 0 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
}
.passos__rodape a { text-decoration: none; }
.passos__rodape a::after { content: " →"; }
.passos__rodape a:hover { text-decoration: underline; }

@media (min-width: 640px) {
  .form-cedula { padding: 1.75rem; }

  .form-cedula__grade {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.1rem;
  }

  /* Campos que ocupam a linha inteira e campos estreitos */
  .campo-site--largo { grid-column: 1 / -1; }
  .campo-site--curto .campo-site__entrada { max-width: 14rem; }

  .form-cedula__acoes { justify-content: center; }
}

/* ---------------------------------------------------------------
   17. Aviso em destaque (logo abaixo do hero)
   Faixa vermelha da paleta da campanha, com contraste conferido:
   branco sobre #ce2b37 dá 5,2:1 — acima do mínimo de 4,5:1.
   --------------------------------------------------------------- */
.alerta {
  background: var(--vermelho);
  color: var(--branco);
  padding-block: 1.15rem;
  border-bottom: 4px solid #9e1b24;
  box-shadow: inset 0 8px 16px rgba(0, 0, 0, .10);
}

.alerta__interno {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
}

.alerta__icone {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--branco);
}
.alerta__icone svg {
  width: 23px;
  height: 23px;
  fill: var(--vermelho);
}

.alerta__texto {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
}

.alerta__rotulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-right: .15em;
}

@media (min-width: 720px) {
  .alerta { padding-block: 1.4rem; }
  .alerta__interno { align-items: center; gap: 1.1rem; }
  .alerta__texto { font-size: 1.06rem; }
}

/* Variação do aviso em bloco: mesma aparência da faixa, mas contida
   na largura do formulário, com cantos arredondados. */
.alerta--bloco {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  max-width: 760px;
  margin: 0 auto 1.1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--raio);
  box-shadow: var(--sombra-forte);
}

.alerta__titulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: .2em;
}

/* Links dentro dos passos herdam o verde do site, com sublinhado */
.passo__texto a {
  color: var(--verde-escuro);
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* ---------------------------------------------------------------
   18. Chamada para o formulário, no meio do texto
   Inserida pelo marcador [[formulario]] no conteúdo da categoria.
   Celular primeiro: ícone acima; lado a lado a partir de 560px.
   --------------------------------------------------------------- */
.chamada-form {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin: 2rem 0;
  padding: 1.25rem;
  background: var(--verde-claro);
  border: 1px solid #c3ddcc;
  border-left: 5px solid var(--verde-escuro);
  border-radius: var(--raio);
}

.chamada-form__icone {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--verde-escuro);
}
.chamada-form__icone svg {
  width: 24px;
  height: 24px;
  fill: var(--branco);
}

.chamada-form__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--verde-escuro);
  margin: 0 0 .35em;
}

.chamada-form__texto {
  margin: 0 0 1rem;
  font-size: .98rem;
}

.chamada-form .botao-simples { display: inline-block; }

@media (min-width: 560px) {
  .chamada-form {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.5rem;
  }
}

/* ---------------------------------------------------------------
   19. Bloco dos três passos dentro do artigo
   Inserido pelo marcador [[passos]]. Diferente da home, aqui a
   lista fica sempre em uma coluna: o artigo tem largura de leitura,
   e três colunas ficariam estreitas demais.
   --------------------------------------------------------------- */
.passos-bloco { margin: 2rem 0; }

.passos-bloco__lista {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: .85rem;
}

.passos-bloco__ajuda {
  margin: 0 0 1rem;
  font-size: .98rem;
}

.passos-bloco .passos__fecho {
  margin-bottom: 0;
  text-align: left;
  max-width: none;
}

.passos-bloco .alerta--bloco {
  margin-inline: 0;
  margin-bottom: 1rem;
  max-width: none;
}

/* Botão dentro do passo 1 (só na página "Como votar") */
.passo__botao {
  display: inline-block;
  margin-top: .9rem;
}

/* Segundo parágrafo dentro de um passo (versão detalhada) */
.passo__texto--extra { margin-top: .7rem; }