/* =========================================================================
   CORRENTE — Design System
   03. COMPONENTES
   ========================================================================= */

/* =========================================================================
   PLACA  —  componente-assinatura
   A tarja sólida com o texto de display atrás. É a unidade de identidade
   do sistema: nome, cargo, chamada. Três pesos hierárquicos.
   ========================================================================= */
.placa {
  display: inline-block;
  max-width: 100%;
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: var(--letra-apertada);
  padding: 0.16em 0.34em 0.22em;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-3);
}
.placa--nome {
  background: var(--azul-900);
  color: var(--branco);
  font-size: var(--txt-6xl);
}
.placa--cargo {
  background: var(--cor-voto);
  color: var(--azul-950);
  font-size: var(--txt-2xl);
  letter-spacing: var(--letra-normal);
  border-radius: var(--raio-md);
}
.placa--menor {
  background: var(--azul-900);
  color: var(--branco);
  font-size: var(--txt-lg);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-2);
}

/* Numeral eleitoral — amarelo com sombra dura, o "4088" */
.numeral {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: var(--txt-7xl);
  line-height: 0.8;
  color: var(--cor-voto);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  /* line-height 0.8 encurta a caixa abaixo do glifo: o padding devolve
     o espaço para o numeral não invadir o elemento seguinte. */
  padding-block: 0.04em 0.16em;
  text-shadow:
    5px 5px 0 var(--azul-950),
    9px 9px 0 rgba(5, 15, 46, 0.35);
}
.numeral--compacto {
  font-size: var(--txt-4xl);
  text-shadow: 3px 3px 0 var(--azul-950);
}

/* Tarja de cargo — o rótulo institucional do impresso.
   Tem fundo próprio porque costuma cruzar a pincelada amarela: sem ele,
   texto ouro sobre faixa ouro perde o contraste. */
.tarja-cargo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0.5em 1em;
  background: var(--azul-950);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-3);
}
.tarja-cargo__estrela { color: var(--cor-voto); font-size: 1.1em; line-height: 1; }
.tarja-cargo__texto {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: clamp(0.9rem, 2.4vw, 1.3rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--branco);
}

/* Rótulo institucional — o remate do cartaz impresso: filetes dos dois
   lados do texto e a estrela centralizada abaixo. Pede fundo escuro. */
.rotulo-inst {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  width: min(30rem, 100%);
  color: var(--branco);
}
/* Faz o papel da caixa sem parecer caixa: use quando a faixa amarela
   passar por trás do rótulo. */
.rotulo-inst--veu {
  padding: var(--e-3) var(--e-4);
  background: var(--veu-escuro);
}
.rotulo-inst__linha {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  width: 100%;
}
.rotulo-inst__linha::before,
.rotulo-inst__linha::after {
  content: "";
  flex: 1;
  height: 2px;
  background: currentColor;
  opacity: 0.5;
}
.rotulo-inst__texto {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: clamp(0.85rem, 2.2vw, 1.2rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rotulo-inst__estrela {
  color: var(--cor-voto);
  font-size: 0.9em;
  line-height: 1;
}

/* Divisor com estrela — o remate inferior do cartaz */
.divisor-estrela {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  color: var(--cor-voto);
}
.divisor-estrela::before,
.divisor-estrela::after {
  content: "";
  flex: 1;
  height: 2px;
  background: currentColor;
  opacity: 0.55;
}

/* =========================================================================
   BOTÃO
   ========================================================================= */
.btn {
  --btn-fundo: var(--cor-marca);
  --btn-texto: var(--branco);
  --btn-borda: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  min-height: 2.75rem;

  font-family: var(--fonte-texto);
  font-size: var(--txt-sm);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-larga);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  background: var(--btn-fundo);
  color: var(--btn-texto);
  border: var(--borda-media-l) solid var(--btn-borda);
  border-radius: var(--raio-md);
  cursor: pointer;

  transition:
    transform var(--dur-rapido) var(--curva-comicio),
    box-shadow var(--dur-rapido) var(--curva-padrao),
    background-color var(--dur-rapido) var(--curva-padrao),
    color var(--dur-rapido) var(--curva-padrao);
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--sombra-3); }
.btn:active { transform: translateY(0); box-shadow: var(--sombra-1); }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--voto {
  --btn-fundo: var(--cor-voto);
  --btn-texto: var(--texto-sobre-voto);
  box-shadow: var(--sombra-dura-curta);
}
.btn--voto:hover { --btn-fundo: var(--amarelo-400); box-shadow: var(--sombra-dura); }

.btn--marca:hover { --btn-fundo: var(--azul-600); }

.btn--contorno {
  --btn-fundo: transparent;
  --btn-texto: var(--cor-marca-forte);
  --btn-borda: var(--borda-forte);
}
.btn--contorno:hover { --btn-fundo: var(--cor-marca-suave); }

.btn--fantasma {
  --btn-fundo: transparent;
  --btn-texto: var(--texto-base);
  --btn-borda: transparent;
}
.btn--fantasma:hover { --btn-fundo: var(--fundo-afundado); box-shadow: none; }

.btn--perigo { --btn-fundo: var(--cor-erro); }
.btn--perigo:hover { --btn-fundo: var(--vermelho-600); }

/* Sobre fundo azul saturado */
.btn--inverso {
  --btn-fundo: var(--branco);
  --btn-texto: var(--azul-900);
}
.btn--inverso-contorno {
  --btn-fundo: transparent;
  --btn-texto: var(--branco);
  --btn-borda: rgba(255, 255, 255, 0.6);
}
.btn--inverso-contorno:hover { --btn-fundo: rgba(255, 255, 255, 0.12); }

.btn--sm  { min-height: 2.125rem; padding: var(--e-2) var(--e-3); font-size: var(--txt-xs); }
.btn--lg  { min-height: 3.375rem; padding: var(--e-4) var(--e-7); font-size: var(--txt-md); }
.btn--bloco { display: flex; width: 100%; }
.btn--pilula { border-radius: var(--raio-pilula); }

/* Chamada máxima: usada uma vez por tela */
.btn--comicio {
  --btn-fundo: var(--cor-voto);
  --btn-texto: var(--azul-950);
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: var(--txt-lg);
  letter-spacing: var(--letra-normal);
  padding: var(--e-4) var(--e-8);
  min-height: 3.75rem;
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-dura);
  animation: pulso-voto 3.2s var(--curva-padrao) infinite;
}
.btn--comicio:hover { --btn-fundo: var(--amarelo-400); animation-play-state: paused; }

/* =========================================================================
   SELO / TAG
   ========================================================================= */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 0.2rem var(--e-2);
  font-size: var(--txt-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-placa);
  text-transform: uppercase;
  border-radius: var(--raio-sm);
  background: var(--cor-marca-suave);
  color: var(--cor-marca);
  border: var(--borda-fina) solid transparent;
  white-space: nowrap;
}
.selo--voto     { background: var(--cor-voto); color: var(--azul-950); }
.selo--solido   { background: var(--azul-900); color: var(--branco); }
.selo--sucesso  { background: var(--verde-100); color: var(--verde-600); }
.selo--atencao  { background: var(--amarelo-100); color: var(--amarelo-800); }
.selo--erro     { background: var(--vermelho-100); color: var(--vermelho-600); }
.selo--vazado   { background: transparent; border-color: var(--borda-media); color: var(--texto-suave); }
.selo--numero   { font-family: var(--fonte-display); font-weight: var(--peso-display); letter-spacing: 0; font-size: var(--txt-sm); padding-inline: var(--e-2); }

/* =========================================================================
   CARTÃO
   ========================================================================= */
.cartao {
  position: relative;
  background: var(--fundo-elevado);
  border: var(--borda-fina) solid var(--borda-sutil);
  border-radius: var(--raio-lg);
  padding: var(--e-5);
  box-shadow: var(--sombra-1);
  transition:
    transform var(--dur-medio) var(--curva-comicio),
    box-shadow var(--dur-medio) var(--curva-padrao),
    border-color var(--dur-medio) var(--curva-padrao);
}
.cartao--interativo:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-3);
  border-color: var(--cor-marca);
}

/* Faixa lateral amarela — marca a proposta, o item de pauta */
.cartao--pauta { padding-left: var(--e-6); overflow: hidden; }
.cartao--pauta::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--cor-voto);
}

.cartao--campanha {
  background: var(--azul-800);
  border-color: transparent;
  color: var(--texto-inverso);
}
.cartao--campanha .t3,
.cartao--campanha h3 { color: var(--branco); }
.cartao--campanha p  { color: var(--azul-200); }

.cartao__topo   { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-3); margin-bottom: var(--e-3); }
.cartao__titulo { font-family: var(--fonte-display); font-weight: var(--peso-display); font-size: var(--txt-xl); text-transform: uppercase; color: var(--texto-forte); line-height: var(--entrelinha-curta); }
.cartao__corpo  { color: var(--texto-suave); font-size: var(--txt-sm); line-height: var(--entrelinha-solta); }
.cartao__rodape { margin-top: var(--e-4); padding-top: var(--e-4); border-top: var(--borda-fina) solid var(--borda-sutil); display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }

/* Indicador numérico grande */
.indicador { text-align: left; }
.indicador__valor {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: var(--txt-4xl);
  line-height: 1;
  color: var(--cor-marca-forte);
  font-variant-numeric: tabular-nums;
}
.cartao--campanha .indicador__valor { color: var(--cor-voto); }
.indicador__rotulo { margin-top: var(--e-2); }

/* =========================================================================
   NAVEGAÇÃO
   ========================================================================= */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: var(--z-fixo);
  background: color-mix(in srgb, var(--fundo-base) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: var(--borda-fina) solid var(--borda-sutil);
}
.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: 4.25rem;
}
/* O grupo de ações do cabeçalho nunca quebra em duas linhas: a barra tem
   altura fixa e o transbordo apareceria por fora dela. Em telas muito
   estreitas a chamada secundária sai de cena. */
.cabecalho__interno > .linha { flex-wrap: nowrap; }
@media (max-width: 30rem) {
  .cabecalho__interno .btn { display: none; }
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  text-decoration: none;
  white-space: nowrap;
}
.marca__sigla {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: var(--txt-lg);
  background: var(--azul-900);
  color: var(--branco);
  padding: 0.1em 0.32em 0.16em;
  border-radius: var(--raio-sm);
  letter-spacing: var(--letra-apertada);
}
.marca__numero {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: var(--txt-lg);
  color: var(--cor-voto-forte);
  letter-spacing: var(--letra-apertada);
}

.menu { display: flex; align-items: center; gap: var(--e-1); list-style: none; padding: 0; }
.menu__link {
  position: relative;
  display: block;
  padding: var(--e-2) var(--e-3);
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
  letter-spacing: var(--letra-larga);
  text-transform: uppercase;
  color: var(--texto-suave);
  text-decoration: none;
  border-radius: var(--raio-sm);
}
.menu__link::after {
  content: "";
  position: absolute;
  left: var(--e-3); right: var(--e-3); bottom: 0.35rem;
  height: 3px;
  background: var(--cor-voto);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-medio) var(--curva-comicio);
}
.menu__link:hover { color: var(--texto-forte); }
.menu__link:hover::after,
.menu__link[aria-current="page"]::after { transform: scaleX(1); }
.menu__link[aria-current="page"] { color: var(--texto-forte); }

/* Abas */
.abas { display: flex; gap: var(--e-1); border-bottom: var(--borda-media-l) solid var(--borda-sutil); }
.aba {
  padding: var(--e-3) var(--e-4);
  margin-bottom: -2px;
  background: none;
  border: none;
  border-bottom: var(--borda-grossa) solid transparent;
  font-size: var(--txt-sm);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-larga);
  text-transform: uppercase;
  color: var(--texto-tenue);
  cursor: pointer;
  transition: color var(--dur-rapido) var(--curva-padrao), border-color var(--dur-rapido) var(--curva-padrao);
}
.aba:hover { color: var(--texto-base); }
.aba[aria-selected="true"] { color: var(--texto-forte); border-bottom-color: var(--cor-voto); }

/* =========================================================================
   FORMULÁRIO
   ========================================================================= */
.campo { display: flex; flex-direction: column; gap: var(--e-2); }
.campo__rotulo {
  font-size: var(--txt-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-placa);
  text-transform: uppercase;
  color: var(--texto-base);
}
.campo__ajuda { font-size: var(--txt-xs); color: var(--texto-tenue); }
.campo__erro  { font-size: var(--txt-xs); color: var(--cor-erro); font-weight: var(--peso-semi); }

.entrada {
  width: 100%;
  padding: var(--e-3) var(--e-4);
  min-height: 2.875rem;
  background: var(--fundo-base);
  color: var(--texto-forte);
  border: var(--borda-media-l) solid var(--borda-media);
  border-radius: var(--raio-md);
  font-size: var(--txt-md);
  transition: border-color var(--dur-rapido) var(--curva-padrao), background-color var(--dur-rapido) var(--curva-padrao);
}
.entrada::placeholder { color: var(--texto-tenue); }
.entrada:hover { border-color: var(--texto-tenue); }
.entrada:focus {
  outline: none;
  border-color: var(--cor-marca);
  box-shadow: 0 0 0 4px var(--cor-marca-suave);
}
.entrada[aria-invalid="true"] { border-color: var(--cor-erro); }
.entrada[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--vermelho-100); }
.entrada:disabled { background: var(--fundo-afundado); color: var(--texto-tenue); cursor: not-allowed; }
textarea.entrada { min-height: 7rem; resize: vertical; line-height: var(--entrelinha-media); }
select.entrada { appearance: none; padding-right: var(--e-8); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 1.25rem center, right 1rem center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

.escolha { display: inline-flex; align-items: flex-start; gap: var(--e-2); cursor: pointer; font-size: var(--txt-sm); }
.escolha input[type="checkbox"],
.escolha input[type="radio"] {
  appearance: none;
  flex: 0 0 auto;
  width: 1.25rem; height: 1.25rem;
  margin-top: 0.1rem;
  border: var(--borda-media-l) solid var(--borda-media);
  background: var(--fundo-base);
  cursor: pointer;
  transition: all var(--dur-rapido) var(--curva-padrao);
}
.escolha input[type="checkbox"] { border-radius: var(--raio-sm); }
.escolha input[type="radio"]    { border-radius: var(--raio-pilula); }
.escolha input:checked {
  background: var(--cor-voto);
  border-color: var(--azul-950);
}
.escolha input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23050F2E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E");
  background-size: 80%; background-position: center; background-repeat: no-repeat;
}
.escolha input[type="radio"]:checked { box-shadow: inset 0 0 0 4px var(--fundo-base); }

/* Interruptor */
.interruptor { position: relative; display: inline-flex; align-items: center; gap: var(--e-3); cursor: pointer; font-size: var(--txt-sm); }
.interruptor input { appearance: none; width: 3rem; height: 1.625rem; border-radius: var(--raio-pilula); background: var(--neutro-300); cursor: pointer; transition: background-color var(--dur-medio) var(--curva-padrao); }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--branco); box-shadow: var(--sombra-1); transition: transform var(--dur-medio) var(--curva-comicio); }
.interruptor input:checked { background: var(--cor-marca); }
.interruptor input:checked::after { transform: translateX(1.375rem); }

/* =========================================================================
   AVISO
   ========================================================================= */
.aviso {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-4);
  border-radius: var(--raio-md);
  border-left: var(--borda-placa) solid var(--cor-info);
  background: var(--cor-marca-suave);
  font-size: var(--txt-sm);
  color: var(--texto-base);
}
.aviso__titulo { font-weight: var(--peso-forte); color: var(--texto-forte); margin-bottom: var(--e-1); }
.aviso--sucesso { border-left-color: var(--cor-sucesso); background: color-mix(in srgb, var(--verde-500) 10%, transparent); }
.aviso--atencao { border-left-color: var(--cor-atencao); background: var(--cor-voto-suave); }
.aviso--erro    { border-left-color: var(--cor-erro); background: color-mix(in srgb, var(--vermelho-500) 10%, transparent); }

/* =========================================================================
   PROGRESSO / META
   ========================================================================= */
.barra {
  height: 0.75rem;
  background: var(--fundo-afundado);
  border: var(--borda-fina) solid var(--borda-sutil);
  border-radius: var(--raio-pilula);
  overflow: hidden;
}
.barra__preenchimento {
  height: 100%;
  border-radius: var(--raio-pilula);
  background: linear-gradient(90deg, var(--azul-600), var(--cor-voto));
  transition: width var(--dur-cena) var(--curva-comicio);
}

/* =========================================================================
   TABELA
   ========================================================================= */
.tabela-envolucro { overflow-x: auto; border: var(--borda-fina) solid var(--borda-sutil); border-radius: var(--raio-lg); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--txt-sm); min-width: 34rem; }
.tabela thead th {
  text-align: left;
  padding: var(--e-3) var(--e-4);
  background: var(--azul-900);
  color: var(--branco);
  font-size: var(--txt-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-placa);
  text-transform: uppercase;
  white-space: nowrap;
}
.tabela tbody td { padding: var(--e-3) var(--e-4); border-top: var(--borda-fina) solid var(--borda-sutil); color: var(--texto-base); }
.tabela tbody tr:hover { background: var(--fundo-afundado); }
.tabela td.numerico { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--peso-semi); }

/* =========================================================================
   AGENDA — linha do tempo de compromissos
   ========================================================================= */
.agenda { list-style: none; padding: 0; display: flex; flex-direction: column; }
.agenda__item {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--e-4);
  padding: var(--e-4) 0 var(--e-4) var(--e-5);
  border-left: var(--borda-media-l) solid var(--borda-sutil);
}
.agenda__item::before {
  content: "";
  position: absolute;
  left: -0.5rem; top: var(--e-5);
  width: 0.875rem; height: 0.875rem;
  border-radius: 50%;
  background: var(--cor-voto);
  border: var(--borda-grossa) solid var(--fundo-base);
}
.agenda__data { font-family: var(--fonte-display); font-weight: var(--peso-display); font-size: var(--txt-lg); color: var(--cor-marca-forte); text-transform: uppercase; line-height: var(--entrelinha-curta); }
.agenda__titulo { font-weight: var(--peso-forte); color: var(--texto-forte); }
.agenda__local { font-size: var(--txt-sm); color: var(--texto-tenue); }

/* =========================================================================
   DEPOIMENTO
   ========================================================================= */
.depoimento { position: relative; padding: var(--e-6) var(--e-5) var(--e-5); background: var(--fundo-afundado); border-radius: var(--raio-lg); border: var(--borda-fina) solid var(--borda-sutil); }
.depoimento::before {
  content: "\201C";
  position: absolute;
  top: -0.35em; left: var(--e-4);
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--cor-voto);
}
.depoimento__texto { font-size: var(--txt-lg); line-height: var(--entrelinha-media); color: var(--texto-forte); }
.depoimento__autor { margin-top: var(--e-4); display: flex; align-items: center; gap: var(--e-3); }

.retrato {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--azul-500);
  display: grid; place-items: center;
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  color: var(--branco);
  border: var(--borda-media-l) solid var(--cor-voto);
  flex: 0 0 auto;
}

/* =========================================================================
   REDES — lista de perfis em versalete, separada por pontos.
   Sem logotipos: em peça institucional o nome da plataforma é mais
   legível que um ícone de 16px e não depende de marca de terceiro.
   ========================================================================= */
.redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--e-2) var(--e-3);
}
.redes__link {
  position: relative;
  font-size: var(--txt-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-placa);
  text-transform: uppercase;
  color: var(--azul-200);
  text-decoration: none;
  padding: var(--e-1) 0;
  transition: color var(--dur-rapido) var(--curva-padrao);
}
.redes__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--cor-voto);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-medio) var(--curva-comicio);
}
.redes__link:hover,
.redes__link:focus-visible { color: var(--branco); }
.redes__link:hover::after,
.redes__link:focus-visible::after { transform: scaleX(1); }

/* ponto separador entre as redes */
.redes__link + .redes__link::before {
  content: "·";
  position: absolute;
  left: calc(var(--e-3) / -2);
  transform: translateX(-50%);
  color: var(--azul-300);
  opacity: 0.5;
}

/* =========================================================================
   RODAPÉ
   ========================================================================= */
.rodape {
  background: var(--azul-950);
  color: var(--azul-200);
  padding-block: var(--e-9) var(--e-6);
  font-size: var(--txt-sm);
}
.rodape a { color: var(--azul-100); text-decoration: none; }
.rodape a:hover { color: var(--cor-voto); }
.rodape__legal {
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: var(--borda-fina) solid rgba(255,255,255,0.14);
  font-size: var(--txt-xs);
  color: var(--azul-300);
}

/* =========================================================================
   HERO — composição de cartaz
   ========================================================================= */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(86vh, 46rem);
  padding-block: var(--e-10) var(--e-9);
}
.hero__conteudo { position: relative; z-index: var(--z-conteudo); display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); }
.hero__nome     { animation: placa var(--dur-lento) var(--curva-comicio) 120ms both; }
.hero__cargo    { animation: varre var(--dur-lento) var(--curva-comicio) 260ms both; }
.hero__numeral  { animation: placa var(--dur-cena) var(--curva-comicio) 380ms both; }
.hero__acoes    { animation: sobe var(--dur-lento) var(--curva-comicio) 540ms both; margin-top: var(--e-3); }

@media (max-width: 48rem) {
  .hero { min-height: auto; }
  .menu { display: none; }
  .agenda__item { grid-template-columns: 1fr; gap: var(--e-1); }
}

/* =========================================================================
   ALTERNADOR DE TEMA
   ========================================================================= */
.tema-btn {
  display: inline-grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--raio-md);
  border: var(--borda-media-l) solid var(--borda-media);
  background: transparent;
  color: var(--texto-base);
  cursor: pointer;
  transition: all var(--dur-rapido) var(--curva-padrao);
}
.tema-btn:hover { border-color: var(--cor-voto); color: var(--cor-voto-forte); }