/* Apuração ao vivo do 2º turno. Tokens e regras em /styles.css e DESIGN.md:
   Public Sans, tinta/sinal/céu/papel, raio 10/12/6, só transform e opacity em movimento. */

.ap-corpo { background: var(--papel); }
.ap-fraco { color: var(--cinza); }
.ap-num { font-size: 12px; font-weight: 500; color: var(--cinza); }
.ap-ponto { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cor, var(--linha)); margin-right: 6px; }

/* Campos */
.ap select, .ap input[type="search"] {
  font: inherit; font-size: 16px; color: var(--grafite); background-color: var(--branco);
  border: 1px solid #CFC9BC; border-radius: 10px; min-height: 44px; padding: 0 12px; width: 100%;
}
.ap input[type="search"] { padding-left: 40px; background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%235A6573' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m12.5 12.5 4 4'/%3E%3C/svg%3E") no-repeat 13px center; }
.ap select:focus-visible, .ap input[type="search"]:focus-visible { outline: 3px solid var(--sinal); outline-offset: 1px; border-color: var(--sinal); }

/* Abertura */
.ap-abertura { padding: 40px 0 28px; }
.ap-abertura .olho { margin-bottom: 10px; }
.ap-abertura h1 { font-size: clamp(36px, 6vw, 60px); letter-spacing: -.03em; line-height: 1; margin: 0 0 14px; }
.ap-intro { max-width: 640px; margin: 0 0 18px; }
.ap-abertura__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ap-status {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--branco); font-size: 14px; font-weight: 600; color: var(--tinta);
}
.ap-status__ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cinza); flex: none; }
.ap-status[data-tipo="vivo"] .ap-status__ponto { background: var(--erro); animation: ap-pisca 1.6s ease-in-out infinite; }
.ap-status[data-tipo="espera"] .ap-status__ponto { background: var(--atencao); }
.ap-status[data-tipo="fim"] .ap-status__ponto { background: var(--tinta); }
.ap-status[data-tipo="erro"] { border-color: var(--erro); }
.ap-status[data-tipo="erro"] .ap-status__ponto { background: var(--erro); }
.ap-status.is-lendo::after {
  content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ceu-claro); border-top-color: var(--sinal);
  animation: ap-gira .9s linear infinite;
}
.ap-hora { margin: 0; font-size: 14px; color: var(--cinza); font-variant-numeric: tabular-nums; }
.ap-aviso {
  margin-top: 18px; padding: 14px 18px; border-radius: 12px; background: var(--ceu-claro); border: 1px solid var(--ceu);
  color: var(--tinta); max-width: 760px; animation: ap-entra .45s var(--saida) both;
}
.ap-aviso p { margin: 0; font-size: 16px; }
.ap-aviso p + p { margin-top: 6px; }
.ap-aviso a { color: var(--sinal); font-weight: 600; }
.ap-aviso__conta { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Onde: estado, município, busca */
.ap-onde-faixa { background: var(--branco); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.ap-onde { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 12px 16px; align-items: end; padding-top: 16px; padding-bottom: 16px; }
.ap-onde__campo label { display: block; font-size: 13px; font-weight: 600; color: var(--cinza); margin-bottom: 6px; }
.ap-busca { position: relative; }
.ap-busca__lista {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 4px; list-style: none;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 10px; box-shadow: var(--sombra);
  max-height: min(360px, 60vh); overflow: auto; animation: ap-entra .2s var(--saida) both;
}
.ap-busca__lista [role="option"] {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px;
  border-radius: 6px; cursor: pointer; color: var(--grafite);
}
.ap-busca__lista [role="option"][aria-selected="true"] { background: var(--ceu-claro); color: var(--tinta); }
.ap-busca__lista small { flex: none; font-size: 13px; color: var(--cinza); }
.ap-busca__nota { padding: 10px 12px; font-size: 14px; color: var(--cinza); }
.ap-trilha { grid-column: 1 / -1; font-size: 15px; }
.ap-trilha ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.ap-trilha li { display: inline-flex; align-items: center; }
.ap-trilha li + li::before { content: "›"; margin: 0 6px 0 2px; color: var(--cinza); }
.ap-trilha button {
  font: inherit; color: var(--sinal); background: none; border: 0; padding: 6px 2px; min-height: 36px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.ap-trilha [aria-current] { font-weight: 700; color: var(--tinta); }
.ap-favs { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ap-favs[hidden] { display: none; }
.ap-favs__rotulo { font-size: 13px; font-weight: 600; color: var(--cinza); margin-right: 2px; }
.ap-fav { display: inline-flex; align-items: stretch; border: 1px solid var(--linha); border-radius: 10px; background: var(--papel); overflow: hidden; max-width: 100%; }
.ap-fav.is-atual { border-color: var(--ceu); background: var(--ceu-claro); }
.ap-fav__ir {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--tinta); background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 10px; min-width: 0; text-align: left;
}
.ap-fav__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-fav__num { display: inline-flex; align-items: center; font-weight: 500; color: var(--grafite); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-fav__tirar { font: inherit; font-size: 18px; color: var(--cinza); background: none; border: 0; border-left: 1px solid var(--linha); min-width: 40px; cursor: pointer; }
.ap-fav__tirar:hover { color: var(--tinta); background: var(--branco); }

/* Blocos */
.ap-blocos { display: grid; gap: 24px; padding-top: 24px; padding-bottom: 64px; }
.ap-placar, .ap-bloco { min-width: 0; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 24px; }
.ap-placar:focus { outline: none; }
.ap-placar:focus-visible { outline: 3px solid var(--sinal); outline-offset: 2px; }
.ap-placar__topo, .ap-bloco__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 8px; }
.ap-placar h2, .ap-bloco h2 { font-size: clamp(22px, 3vw, 28px); margin: 0; }
.ap-bloco__explica { font-size: 15px; color: var(--cinza); margin: 0 0 16px; max-width: 760px; }
.ap-bloco[hidden] { display: none; }

/* Botões de estado (modo do mapa, ordem da lista) */
.ap-modo, .ap-segmento { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--papel); border: 1px solid var(--linha); }
.ap-modo button, .ap-segmento button {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--cinza); background: transparent; border: 1.5px solid transparent;
  border-radius: 8px; min-height: 40px; padding: 0 14px; cursor: pointer; transition: background-color .2s, color .2s;
}
.ap-modo button:hover, .ap-segmento button:hover { color: var(--tinta); }
.ap-modo button[aria-pressed="true"], .ap-segmento button[aria-pressed="true"] { background: var(--ceu-claro); border-color: var(--ceu); color: var(--tinta); }

/* .botao do site foi feito para <a>; num <button> tira a borda e a fonte do navegador. */
.ap button.botao { font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.ap button.botao--linha { background: transparent; }
.ap-mais[hidden] { display: none; }

/* Guardar lugar */
.ap-guardar {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--tinta); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--linha); background: var(--branco); cursor: pointer;
}
.ap-guardar span[aria-hidden] { font-size: 19px; line-height: 1; }
.ap-guardar[aria-pressed="true"] { background: var(--ceu-claro); border-color: var(--ceu); }
.ap-guardar:active { transform: scale(.96); }

/* Placar */
.ap-duelo { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ap-cand { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px; border-radius: 12px; background: var(--papel); }
.ap-foto {
  position: relative; flex: none; display: grid; place-items: center; overflow: hidden; width: 72px; height: 72px; border-radius: 50%;
  background: var(--ceu-claro); box-shadow: 0 0 0 3px var(--branco), 0 0 0 6px var(--cor, var(--linha));
}
.ap-foto b { font-size: 22px; font-weight: 700; color: var(--tinta); }
.ap-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ap-foto img[hidden] { display: none; }
.ap-cand__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 12px; min-width: 0; }
.ap-cand__texto { display: grid; gap: 2px; min-width: 0; }
.ap-cand__nome { font-size: 19px; font-weight: 700; color: var(--tinta); line-height: 1.2; overflow-wrap: anywhere; }
.ap-cand__partido { font-size: 14px; color: var(--cinza); }
.ap-cand__num { display: grid; justify-items: end; text-align: right; }
.ap-cand__num strong { font-size: clamp(30px, 4.2vw, 44px); font-weight: 700; color: var(--tinta); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ap-cand__num span { margin-top: 4px; font-size: 14px; color: var(--cinza); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-cand.is-subiu .ap-cand__num strong { animation: ap-sobe .8s var(--saida); }
.ap-selo { display: inline-block; width: fit-content; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--linha); color: var(--grafite); }
.ap-selo--forte { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.ap-selo--alerta { border-color: var(--erro); color: var(--erro); }

/* Barra dividida entre dois: o trilho tem a cor do segundo e a parte do primeiro cresce por
   transform. A marca de metade fica por fora do trilho, para não parecer um terceiro pedaço. */
.ap-barra2 { position: relative; height: 12px; margin: 18px 0 6px; }
.ap-barra2__trilho { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; background: var(--b, var(--linha)); }
.ap-barra2__trilho i { position: absolute; inset: 0; background: var(--a, var(--cinza)); transform-origin: left center; transform: scaleX(var(--p, .5)); transition: transform .6s var(--saida); }
.ap-barra2__meio { position: absolute; top: -5px; bottom: -5px; left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--tinta); opacity: .55; }

.ap-progresso { margin-top: 16px; }
.ap-progresso__topo { margin: 0 0 8px; font-size: 16px; }
.ap-progresso__topo strong { font-size: 24px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ap-progresso__barra { height: 8px; border-radius: 999px; overflow: hidden; background: var(--ceu-claro); }
.ap-progresso__barra i { display: block; height: 100%; background: var(--sinal); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .6s var(--saida); }
.ap-progresso__nota { margin: 8px 0 0; font-size: 14px; color: var(--cinza); font-variant-numeric: tabular-nums; }

.ap-definido { margin-top: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--linha); background: var(--papel); }
.ap-definido p { margin: 0; font-size: 15px; }
.ap-definido--sim { background: var(--ceu-claro); border-color: var(--ceu); color: var(--tinta); }
.ap-dica summary {
  display: inline-flex; align-items: center; min-height: 36px; margin-top: 4px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 600; color: var(--sinal); text-decoration: underline; text-underline-offset: 3px;
}
.ap-dica summary::-webkit-details-marker { display: none; }
.ap-dica p { margin-top: 4px; font-size: 14px; color: var(--grafite); }

.ap-compara { margin-top: 16px; overflow-x: auto; }
.ap-compara__titulo { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--tinta); }
.ap-compara table { width: 100%; max-width: 620px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.ap-compara th, .ap-compara td { padding: 8px 6px; border-top: 1px solid var(--linha); text-align: right; vertical-align: top; }
.ap-compara thead th { border-top: 0; padding-top: 0; font-size: 13px; font-weight: 600; color: var(--cinza); }
.ap-compara th[scope="row"] { text-align: left; font-weight: 600; color: var(--tinta); white-space: nowrap; }
.ap-compara td small { display: block; font-size: 12px; color: var(--cinza); white-space: nowrap; }
.ap-compara__outros td[colspan] small { white-space: normal; }
.ap-compara__frase { margin: 8px 0 0; font-size: 14px; }

.ap-outros { margin-top: 16px; border: 1px solid var(--linha); border-radius: 12px; }
.ap-outros summary, .ap-tabela summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 10px 16px;
  cursor: pointer; list-style: none; font-weight: 600; font-size: 15px; color: var(--tinta);
}
.ap-outros summary::-webkit-details-marker, .ap-tabela summary::-webkit-details-marker, .ap-gov summary::-webkit-details-marker { display: none; }
.ap-outros summary::after, .ap-tabela summary::after, .ap-gov summary::after {
  content: ""; flex: none; width: 12px; height: 12px; transition: transform .3s var(--saida);
  background: linear-gradient(var(--tinta), var(--tinta)) center / 12px 2px no-repeat, linear-gradient(var(--tinta), var(--tinta)) center / 2px 12px no-repeat;
}
.ap-outros[open] summary::after, .ap-tabela[open] summary::after, .ap-gov[open] summary::after { transform: rotate(45deg); }
.ap-outros ol { list-style: none; margin: 0; padding: 0 16px 8px; }
.ap-outros li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linha); font-size: 15px; font-variant-numeric: tabular-nums; }
.ap-outros small { color: var(--cinza); }
.ap-outros__num { white-space: nowrap; text-align: right; }

.ap-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; }
.ap-numeros div { padding: 12px 14px; border-radius: 10px; background: var(--papel); }
.ap-numeros dt { font-size: 13px; color: var(--cinza); }
.ap-numeros dd { margin: 2px 0 0; font-size: 19px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ap-numeros small { font-size: 12px; color: var(--cinza); }

/* Mapa */
.ap-mapa { display: grid; gap: 20px; align-items: start; }
.ap-mapa__desenho { position: relative; min-width: 0; }
.ap-mapa__desenho.is-carregando { aspect-ratio: 1120 / 1026; border-radius: 12px; background: var(--papel); animation: ap-respira 1.4s ease-in-out infinite; }
.ap-mapa__desenho svg { display: block; width: 100%; height: auto; aspect-ratio: 1120 / 1026; user-select: none; -webkit-user-select: none; }
/* A cor de cada lugar vem pelo atributo fill (o JS pinta); o CSS só dá a cor de antes de pintar. */
.mapa-ufs path, .mapa-ext rect { stroke: var(--branco); stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; }
.mapa-ufs path:not([fill]), .mapa-ext rect:not([fill]), .mapa-mun path:not([fill]) { fill: #EEEBE4; }
.mapa-ufs path:focus, .mapa-ext rect:focus { outline: none; }
.mapa-alvo { fill: transparent; stroke: none; cursor: pointer; }
.mapa-ext rect { stroke: var(--cinza); stroke-dasharray: 6 4; }
.mapa-mun path { stroke: rgba(255, 255, 255, .75); stroke-width: .5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; }
.mapa-divisas path { fill: none; stroke: var(--tinta); stroke-opacity: .55; stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }
svg.is-uf-aberta .mapa-ufs path:not(.is-aberta) { opacity: .42; }
.mapa-realce path { fill: none; pointer-events: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mapa-realce__aberto { stroke: var(--tinta); stroke-width: 2.5px; }
.mapa-realce__mun { stroke: var(--tinta); stroke-width: 2.5px; }
.mapa-realce__foco { stroke: var(--sinal); stroke-width: 2.5px; }
.mapa-siglas text, .mapa-ext text {
  font-family: 'Public Sans', system-ui, sans-serif; font-size: 22px; font-weight: 700; fill: var(--grafite); text-anchor: middle;
  paint-order: stroke; stroke: rgba(255, 255, 255, .92); stroke-width: 5px; stroke-linejoin: round; pointer-events: none;
}
.mapa-sigla--fora text { text-anchor: start; stroke: none; }
.mapa-sigla--esq text { text-anchor: end; stroke: rgba(255, 255, 255, .92); }
.mapa-sigla--esq .mapa-fio { stroke: var(--grafite); }
.mapa-fio { fill: none; stroke: var(--cinza); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ap-mapa__desenho.is-entrando .mapa-ufs path, .ap-mapa__desenho.is-entrando .mapa-ext rect { animation: ap-surge .5s var(--saida) backwards; animation-delay: calc(var(--i, 0) * 14ms); }
.ap-mapa__lado { display: grid; gap: 16px; align-content: start; min-width: 0; }
.ap-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ap-legenda li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.ap-legenda small { font-size: 13px; color: var(--cinza); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-amostra { width: 16px; height: 16px; border-radius: 4px; background: var(--fundo); box-shadow: inset 0 0 0 1px rgba(31, 41, 51, .14); }
.ap-cartao-uf { padding: 16px; border-radius: 12px; border: 1px solid var(--linha); background: var(--papel); min-width: 0; }
.ap-cartao-uf__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ap-cartao-uf h3 { margin: 0; font-size: 20px; }
.ap-cartao-uf__ap { margin: 2px 0 10px; font-size: 14px; color: var(--cinza); }
.ap-cartao-uf__cands { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ap-cartao-uf__cands li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 0 4px; }
.ap-cartao-uf__cands span { font-weight: 600; color: var(--tinta); }
.ap-cartao-uf__cands small { font-weight: 400; color: var(--cinza); }
.ap-cartao-uf__cands b { font-size: 20px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ap-cartao-uf__votos { grid-column: 2 / -1; font-size: 13px; }
.ap-cartao-uf .ap-compara { margin-top: 12px; }
.ap-cartao-uf .ap-definido { background: var(--branco); }
.ap-cartao-uf .ap-definido--sim { background: var(--ceu-claro); }

.ap-tabela { margin-top: 20px; border: 1px solid var(--linha); border-radius: 12px; }
.ap-tabela__rolagem { overflow-x: auto; }
.ap-tabela table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ap-tabela th, .ap-tabela td { padding: 8px 12px; border-top: 1px solid var(--linha); text-align: right; white-space: nowrap; }
.ap-tabela thead th { font-size: 12px; font-weight: 600; color: var(--cinza); }
.ap-tabela th[scope="row"], .ap-tabela thead th:first-child { text-align: left; }
.ap-link {
  font: inherit; font-weight: 600; color: var(--sinal); background: none; border: 0; padding: 6px 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-align: left;
}

/* Municípios */
.ap-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; }
.ap-filtros__busca { flex: 1 1 260px; min-width: 0; }
.ap-contagem { margin: 4px 0 10px; font-size: 14px; color: var(--cinza); }
.ap-muns__cab, .ap-mun__abrir {
  display: grid; grid-template-columns: 14px minmax(0, 1.25fr) minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, .9fr); gap: 4px 16px; align-items: center;
}
.ap-muns__cab { padding: 0 52px 8px 8px; font-size: 12px; font-weight: 600; color: var(--cinza); }
.ap-muns__cab span:last-child { text-align: right; }
.ap-muns { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.ap-mun { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--linha); }
.ap-mun.is-atual { background: var(--ceu-claro); }
.ap-mun__abrir { font: inherit; color: inherit; text-align: left; background: none; border: 0; padding: 12px 8px; min-width: 0; cursor: pointer; }
.ap-mun__abrir:hover { background: rgba(220, 230, 245, .45); }
.ap-mun__abrir:focus-visible { outline: 3px solid var(--sinal); outline-offset: -3px; }
.ap-chip { width: 14px; height: 14px; border-radius: 4px; background: var(--fundo, #EEEBE4); box-shadow: inset 0 0 0 1px rgba(31, 41, 51, .14); }
.ap-mun__nome { display: grid; min-width: 0; }
.ap-mun__nome > span { font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.ap-mun__nome small { font-size: 12px; color: var(--cinza); font-variant-numeric: tabular-nums; }
.ap-mun__agora, .ap-mun__antes { min-width: 0; }
.ap-mun__pcts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.ap-mun__antes { display: block; color: var(--cinza); font-size: 13px; }
.ap-mun__desde { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.ap-mun__var { display: inline-flex; align-items: center; white-space: nowrap; }
.ap-mun__var .ap-ponto { width: 8px; height: 8px; margin-right: 4px; }
.ap-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ap-tag--virou { background: var(--tinta); color: var(--papel); }
.ap-mun__carrega { display: block; height: 8px; border-radius: 999px; background: var(--ceu-claro); }
.ap-mun__carrega.is-voando { animation: ap-respira 1s ease-in-out infinite; }
.ap-mun .ap-guardar { margin-right: 4px; border-color: transparent; background: transparent; }
.ap-mun .ap-guardar[aria-pressed="true"] { background: var(--branco); border-color: var(--ceu); }
.ap-mun--esqueleto { padding: 12px 8px; }
.ap-mun--esqueleto span { grid-column: 1 / -1; display: block; height: 28px; border-radius: 6px; background: var(--papel); animation: ap-respira 1.4s ease-in-out infinite; }
.ap-mun.ap-entra { animation-delay: calc(var(--i, 0) * 30ms); }
.ap-vazio { padding: 20px 8px; color: var(--cinza); }
.ap-mais { margin-top: 16px; }

/* Curva */
.ap-curva { min-width: 0; }
.ap-curva svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.ap-curva__grade line { stroke: var(--linha); stroke-width: 1; }
.ap-curva__grade line.is-meio { stroke: var(--cinza); stroke-dasharray: 4 4; }
.ap-curva__grade text { font-size: 12px; fill: var(--cinza); font-variant-numeric: tabular-nums; }
.ap-curva__linha { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ap-curva__fim text { font-size: 13px; font-weight: 700; fill: var(--grafite); font-variant-numeric: tabular-nums; }
.ap-curva__vazio { margin: 0; padding: 18px 20px; border: 1px dashed #CFC9BC; border-radius: 12px; font-size: 15px; color: var(--cinza); }
.ap-curva__eixo { margin: 8px 0 0; font-size: 13px; color: var(--cinza); }

/* Regiões */
.ap-regioes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.ap-regiao { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 12px; border: 1px solid var(--linha); background: var(--branco); }
.ap-regiao.ap-entra, .ap-govuf.ap-entra { animation-delay: calc(var(--i, 0) * 50ms); }
.ap-regiao--ext { border-style: dashed; }
.ap-regiao__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
.ap-regiao h3 { margin: 0; font-size: 18px; }
.ap-regiao__topo span { font-size: 12px; color: var(--cinza); letter-spacing: .02em; }
.ap-regiao__ap { margin: 0; font-size: 14px; color: var(--cinza); }
.ap-regiao__cands { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ap-regiao__cands li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 0 4px; }
.ap-regiao__cands span { font-weight: 600; color: var(--tinta); }
.ap-regiao__cands b { font-size: 18px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ap-regiao__cands small { grid-column: 2 / -1; font-size: 12px; color: var(--cinza); font-variant-numeric: tabular-nums; }
.ap-regiao__falta, .ap-regiao__antes { margin: 0; font-size: 14px; }
.ap-regiao__antes { color: var(--cinza); }

/* Governadores */
.ap-gov summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 44px; cursor: pointer; list-style: none; }
.ap-gov summary::after { margin-left: auto; }
.ap-gov h2 { margin: 0; }
.ap-gov__ufs { font-size: 14px; color: var(--cinza); }
.ap-gov__corpo { margin-top: 16px; }
.ap-govs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ap-govuf { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 12px; border: 1px solid var(--linha); }
.ap-govuf__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ap-govuf h3 { margin: 0; font-size: 18px; }
.ap-govuf__topo span { font-size: 13px; color: var(--cinza); font-variant-numeric: tabular-nums; }
.ap-govuf__cands { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ap-govuf__cands li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ap-govuf .ap-foto { width: 48px; height: 48px; box-shadow: none; }
.ap-govuf .ap-foto b { font-size: 16px; }
.ap-govuf__nome { display: grid; font-size: 15px; font-weight: 600; color: var(--tinta); min-width: 0; overflow-wrap: anywhere; }
.ap-govuf__nome small { font-size: 13px; font-weight: 400; color: var(--cinza); }
.ap-govuf__num { display: grid; justify-items: end; }
.ap-govuf__num b { font-size: 20px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ap-govuf__num small { font-size: 12px; color: var(--cinza); font-variant-numeric: tabular-nums; }
.ap-govuf__def { margin: 0; font-size: 14px; color: var(--tinta); }

/* Espera, esqueleto, entrada */
.ap-esqueleto { display: grid; gap: 12px; margin-top: 16px; }
.ap-esqueleto span { display: block; height: 72px; border-radius: 12px; background: var(--papel); animation: ap-respira 1.4s ease-in-out infinite; }
.ap-esqueleto span:first-child { height: 112px; }
.ap-esqueleto--baixo span, .ap-esqueleto--baixo span:first-child { height: 18px; border-radius: 6px; }
.ap-espera { display: grid; justify-items: center; gap: 10px; padding: 40px 16px; text-align: center; }
.ap-espera h3 { margin: 0; font-size: 22px; }
.ap-espera p { margin: 0; max-width: 520px; color: var(--cinza); }
.ap-giro { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--ceu-claro); border-top-color: var(--sinal); animation: ap-gira 1.1s linear infinite; }
.ap-entra { animation: ap-entra .45s var(--saida) both; }
.ap-sem-js { margin: 0 0 32px; padding: 16px; border-radius: 12px; background: var(--branco); border: 1px solid var(--linha); }

/* Rodapé */
.ap-rodape .wrap > p { max-width: 860px; margin: 0 0 12px; font-size: 14px; color: var(--cinza); }
.ap-rodape .wrap > p a { font-weight: 400; color: var(--sinal); text-decoration: underline; text-underline-offset: 2px; }
.ap-rodape .rodape__in { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linha); }
.ap-rodape .rodape__in p { margin: 0; }

@keyframes ap-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ap-surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes ap-respira { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes ap-pisca { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes ap-gira { to { transform: rotate(360deg); } }
@keyframes ap-sobe { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (min-width: 900px) {
  .ap-mapa { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); }
}
@media (max-width: 899px) {
  .ap-muns__cab { display: none; }
  .ap-mun__abrir {
    grid-template-columns: 14px minmax(0, 1fr) auto;
    grid-template-areas: "chip nome nome" ". agora agora" ". antes desde";
    gap: 6px 12px;
  }
  .ap-mun__abrir > .ap-chip { grid-area: chip; }
  .ap-mun__nome { grid-area: nome; }
  .ap-mun__agora { grid-area: agora; }
  .ap-mun__antes { grid-area: antes; }
  .ap-mun__desde { grid-area: desde; align-self: center; }
  .ap-mun__antes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .ap-mun__antes::before { content: attr(data-rotulo); font-weight: 600; }
  .ap-mun__antes .ap-mun__pcts { justify-content: flex-start; }
  .ap-mun__antes .ap-partes { display: none; }
}
@media (max-width: 720px) {
  .ap-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-duelo { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  .ap-abertura { padding: 28px 0 20px; }
  .ap-onde { grid-template-columns: minmax(0, 1fr); }
  .ap-placar, .ap-bloco { padding: 16px; }
  .ap-blocos { gap: 16px; padding-top: 16px; }
  .ap-cand { padding: 12px; gap: 12px; }
  .ap-foto { width: 56px; height: 56px; }
  .ap-cand__nome { font-size: 17px; }
  .ap-modo { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-modo button { padding: 0 6px; }
  .mapa-siglas text { font-size: 34px; stroke-width: 6px; }
  .mapa-ext text { font-size: 30px; }
  .mapa-sigla--fora, .mapa-sigla[data-uf="df"], .mapa-sigla[data-uf="pe"], .mapa-sigla[data-uf="pb"], .mapa-sigla[data-uf="rn"],
  .mapa-sigla[data-uf="al"], .mapa-sigla[data-uf="se"], .mapa-sigla[data-uf="es"], .mapa-sigla[data-uf="rj"], .mapa-sigla[data-uf="ap"] { display: none; }
  .ap-compara table { font-size: 14px; }
  .ap-compara th, .ap-compara td { padding: 8px 4px; }
  .ap-tabela th, .ap-tabela td { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-status[data-tipo="vivo"] .ap-status__ponto, .ap-status.is-lendo::after, .ap-giro, .ap-esqueleto span,
  .ap-mapa__desenho.is-carregando, .ap-mun__carrega.is-voando, .ap-mun--esqueleto span { animation: none !important; }
  .ap-barra2 i, .ap-progresso__barra i { transition: none !important; }
}

/* Abas de turno e base da comparação */
.ap-turnos { display: inline-grid; grid-auto-flow: column; gap: 6px; margin: 4px 0 14px; padding: 5px; border-radius: 14px; background: var(--branco); border: 1px solid var(--linha); }
.ap-turnos button {
  font: inherit; display: grid; text-align: left; min-height: 52px; padding: 6px 18px; border-radius: 10px; border: 0;
  background: transparent; color: var(--cinza); cursor: pointer; transition: background-color .2s, color .2s;
}
.ap-turnos button span { font-size: 17px; font-weight: 700; line-height: 1.2; }
.ap-turnos button small { font-size: 13px; line-height: 1.3; }
.ap-turnos button[aria-selected="true"] { background: var(--tinta); color: var(--papel); }
.ap-turnos button[aria-selected="true"] small { color: var(--ceu-claro); }
.ap-turnos button:not([aria-selected="true"]):hover { background: var(--papel); color: var(--tinta); }
.ap-turnos button:focus-visible { outline: 3px solid var(--sinal); outline-offset: 2px; }
.ap-base { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 16px; }
.ap-base[hidden] { display: none; }
.ap-base__rotulo { margin-right: 2px; font-size: 14px; font-weight: 600; color: var(--cinza); }
.ap-base button {
  font: inherit; font-size: 14px; font-weight: 600; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--linha); background: var(--branco); color: var(--cinza); cursor: pointer;
}
.ap-base button[aria-pressed="true"] { border-color: var(--ceu); background: var(--ceu-claro); color: var(--tinta); }
.ap-aviso--teste { background: #FFF6E8; border: 1.5px dashed var(--atencao); }

/* Mapa: palco, controles e dica */
.ap-bloco--mapa .ap-modo { margin: 4px 0 10px; }
.ap-escolha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.ap-escolha[hidden] { display: none; }
.ap-escolha__rotulo { margin-right: 4px; font-size: 13px; font-weight: 600; color: var(--cinza); }
.ap-escolha button {
  font: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--linha); background: var(--branco); color: var(--grafite); cursor: pointer;
}
.ap-escolha button small { margin-left: 4px; font-weight: 500; color: var(--cinza); }
.ap-escolha button[aria-pressed="true"] { border-color: var(--tinta); background: var(--ceu-claro); color: var(--tinta); }
.ap-mapa__palco { position: relative; min-width: 0; overflow: hidden; border-radius: 12px; background: var(--papel); touch-action: pan-y; }
.ap-mapa__palco.is-aproximado { touch-action: none; }
.ap-mapa__palco.is-aproximado svg { cursor: grab; }
.ap-mapa__palco.is-aproximado svg:active { cursor: grabbing; }
.ap-mapa__palco.is-aproximado .mapa-siglas, .ap-mapa__palco.is-aproximado .mapa-ext { display: none; }
.ap-mapa__palco.is-carregando-camada .ap-mapa__desenho { animation: ap-respira 1.4s ease-in-out infinite; }
.ap-mapa__ctrl { position: absolute; left: 10px; bottom: 10px; display: grid; gap: 4px; }
.ap-mapa__ctrl button, .ap-mapa__voltar, .ap-mapa__tela {
  font: inherit; font-weight: 700; color: var(--tinta); background: var(--branco); border: 1px solid var(--linha); border-radius: 10px;
  min-width: 44px; min-height: 44px; cursor: pointer; box-shadow: 0 1px 2px rgba(11, 27, 51, .08);
}
.ap-mapa__ctrl button { font-size: 22px; line-height: 1; }
.ap-mapa__voltar { position: absolute; left: 10px; top: 10px; padding: 0 12px; font-size: 14px; }
.ap-mapa__voltar[hidden] { display: none; }
.ap-mapa__tela { position: absolute; right: 10px; top: 10px; padding: 0 12px; font-size: 14px; }
.ap-mapa__ctrl button:focus-visible, .ap-mapa__voltar:focus-visible, .ap-mapa__tela:focus-visible { outline: 3px solid var(--sinal); outline-offset: 2px; }
.ap-mapa__nota {
  position: absolute; left: 64px; right: 10px; bottom: 10px; margin: 0; padding: 8px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .95); border: 1px solid var(--linha); font-size: 13px; color: var(--grafite);
}
.ap-mapa__nota[hidden] { display: none; }
.ap-dica-mapa {
  position: absolute; left: 0; top: 0; z-index: 5; width: max-content; max-width: min(300px, calc(100% - 12px)); padding: 10px 12px;
  border-radius: 10px; background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra);
  font-size: 13px; line-height: 1.4; color: var(--grafite); pointer-events: none;
}
.ap-dica-mapa[hidden] { display: none; }
/* No celular a dica do toque fica embaixo do desenho, sem cobrir o mapa nem os botões. */
.ap-dica-mapa.is-doca { position: static; width: auto; max-width: none; margin: 0 8px 8px; transform: none !important; box-shadow: none; }
.ap-mapa__palco.tem-doca .ap-mapa__nota { position: static; margin: 0 8px 8px; }
.ap-dica-mapa__topo { display: grid; margin: 0 0 6px; }
.ap-dica-mapa__topo strong { font-size: 15px; color: var(--tinta); }
.ap-dica-mapa__topo span { font-size: 12px; color: var(--cinza); }
.ap-dica-mapa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.ap-dica-mapa li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 4px; }
.ap-dica-mapa li small { color: var(--cinza); }
.ap-dica-mapa li b { padding-left: 8px; font-variant-numeric: tabular-nums; }
.ap-dica-mapa__antes { margin: 6px 0 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.ap-dica-mapa__antes span { margin-right: 4px; font-weight: 700; color: var(--cinza); }
.ap-dica-mapa__nota { margin: 0; color: var(--cinza); }
.ap-legenda li.ap-legenda__escala { grid-template-columns: auto minmax(0, 1fr) auto; }
.ap-legenda__tons { display: inline-flex; gap: 2px; }
.ap-legenda__tons .ap-amostra { width: 14px; height: 14px; }
.ap-legenda li.ap-legenda__faixas { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--cinza); }
.ap-cartao-uf__dica { margin: 12px 0 0; font-size: 13px; color: var(--cinza); }
.ap-cartao-uf__placar { margin-top: 10px; font-size: 14px; }

/* Barra em partes: 13, outros, 22 */
.ap-partes { position: relative; height: 12px; margin: 18px 0 6px; }
.ap-partes__trilho { position: absolute; inset: 0; display: flex; gap: 2px; overflow: hidden; border-radius: 999px; background: var(--linha); }
.ap-partes__trilho i { display: block; min-width: 0; flex-basis: 0; background: var(--cor); }
.ap-mun__agora .ap-partes, .ap-mun__antes .ap-partes { height: 8px; margin: 4px 0 6px; }
.ap-mun__agora .ap-partes .ap-barra2__meio, .ap-mun__antes .ap-partes .ap-barra2__meio { top: -3px; bottom: -3px; }
.ap-partes--antes { opacity: .55; }
.ap-mun__antes .ap-partes--antes { height: 5px; }
.ap-regiao .ap-partes { height: 8px; margin: 6px 0; }
.ap-regiao .ap-partes .ap-barra2__meio { top: -4px; bottom: -4px; }
.ap-compara__outros th, .ap-compara__outros td { color: var(--cinza); }
.ap-compara__abst th { font-weight: 600; color: var(--tinta); }

/* Tela cheia: o bloco do mapa ocupa a tela; no iPhone, a janela */
.ap-bloco--mapa:fullscreen { overflow: auto; padding: 16px 20px; border-radius: 0; background: var(--papel); }
.ap-bloco--mapa:fullscreen .ap-mapa__desenho svg, .ap-bloco--mapa.is-tela-cheia .ap-mapa__desenho svg { max-height: calc(100vh - 210px); }
.ap-bloco--mapa.is-tela-cheia { position: fixed; inset: 0; z-index: 100; overflow: auto; margin: 0; border-radius: 0; background: var(--papel); }
html.ap-sem-rolagem, html.ap-sem-rolagem body { overflow: hidden; }
@media (min-width: 900px) {
  .ap-bloco--mapa:fullscreen .ap-mapa, .ap-bloco--mapa.is-tela-cheia .ap-mapa { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
}
@media (max-width: 640px) {
  .ap-turnos { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ap-turnos button { padding: 6px 12px; }
  .ap-base button { flex: 1 1 auto; }
  .ap-mapa__tela { padding: 0 10px; font-size: 13px; }
  .ap-mapa__ctrl { left: auto; right: 10px; bottom: auto; top: 62px; }
  .ap-mapa__nota { left: 10px; right: 64px; }
  .ap-mapa__voltar { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-mapa__palco.is-carregando-camada .ap-mapa__desenho { animation: none !important; }
}
/* Brasil inteiro por município: divisa mais fina, para os municípios pequenos não clarearem a cor. */
svg.is-municipios .mapa-mun path { stroke: rgba(255, 255, 255, .4); stroke-width: .3px; }

/* ---------------------------------------------------------------- espaço publicitário
   Faixa logo abaixo do cabeçalho. Enquanto não há anunciante, mostra o anúncio da casa (Impacta Studio).
   Miolo no tamanho padrão de mídia: 970×90 no computador, 728×90 no tablet, 320×100 no celular.
   Altura fixa no CSS (sem salto de layout); no celular, 116 px no total. O anúncio veste a marca da
   Impacta Studio, não a do Cada Voto: creme, grafite e Outfit 300/700, o âmbar só no pingo do i do logo.
   O selo "Publicidade" e a regra eleitoral são da página: valem para qualquer anunciante. */
.anuncio-faixa {
  --is-creme: #FBF7F2; --is-grafite: #1A1512; --is-grafite-hover: #3A322C; --is-apoio: #5E5650; --is-linha: #E2D9CC;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; height: 114px; padding: 0 20px; overflow: hidden;
  background: var(--papel); border-bottom: 1px solid var(--linha);
}
.anuncio-slot { position: relative; flex: none; box-sizing: border-box; width: 970px; max-width: 100%; height: 90px; }
.anuncio-selo {
  position: absolute; top: 7px; right: 10px; z-index: 1; margin: 0;
  font: 700 10px/1 Outfit, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: var(--is-apoio);
}
.anuncio-criativo {
  box-sizing: border-box; display: grid; grid-template-columns: auto 1px minmax(0, 1fr) auto; align-items: center; gap: 0 22px;
  width: 100%; height: 100%; padding: 0 22px 0 26px; overflow: hidden;
  background: var(--is-creme); color: var(--is-grafite); border: 1px solid var(--is-linha); border-radius: 10px;
  font-family: Outfit, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 300; line-height: 1.3;
}
.anuncio-criativo__logo { display: block; width: 171px; height: 26px; }
.anuncio-criativo__divisa { width: 1px; height: 46px; background: var(--is-linha); }
.anuncio-criativo__texto { min-width: 0; }
.anuncio-criativo__titulo { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.anuncio-criativo__regra { margin: 5px 0 0; font-size: 12px; line-height: 1.35; color: var(--is-apoio); }
.anuncio-criativo__botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px;
  border-radius: 10px; background: var(--is-grafite); color: var(--is-creme);
  font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .2s;
}
.anuncio-criativo__botao:hover { background: var(--is-grafite-hover); }
.anuncio-criativo__botao:focus-visible { outline: 3px solid var(--is-grafite); outline-offset: 2px; border-radius: 10px; }
@media (max-width: 1009px) {
  .anuncio-slot { width: 728px; }
  .anuncio-criativo { gap: 0 16px; padding: 0 16px 0 18px; }
  .anuncio-criativo__logo { width: 145px; height: 22px; }
  .anuncio-criativo__divisa { height: 52px; }
  .anuncio-criativo__titulo { font-size: 20px; }
  .anuncio-criativo__regra { font-size: 11px; margin-top: 4px; }
  .anuncio-criativo__botao { min-height: 36px; padding: 0 14px; font-size: 14px; }
}
@media (max-width: 767px) {
  .anuncio-faixa { height: 116px; padding: 0; }
  .anuncio-slot { width: 320px; height: 100px; }
  .anuncio-selo { top: 12px; right: 10px; font-size: 9px; }
  .anuncio-criativo {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo logo" "titulo botao" "regra regra";
    grid-template-rows: 19px 30px auto; align-content: center; gap: 6px 8px; padding: 0 10px;
  }
  .anuncio-criativo__logo { grid-area: logo; width: 125px; height: 19px; }
  .anuncio-criativo__divisa { display: none; }
  .anuncio-criativo__texto { display: contents; }
  .anuncio-criativo__titulo { grid-area: titulo; align-self: center; font-size: 17px; white-space: nowrap; }
  .anuncio-criativo__regra { grid-area: regra; margin: 0; font-size: 10px; line-height: 1.25; }
  .anuncio-criativo__botao { grid-area: botao; min-height: 30px; margin: 0; padding: 0 12px; border-radius: 8px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .anuncio-criativo__botao { transition: none; }
}
/* No celular a faixa custa 116 px. O topo da apuração encolhe na mesma medida para o placar não descer:
   abertura mais curta, a segunda frase da introdução só a partir do tablet e "Onde" ao lado da escolha. */
@media (max-width: 640px) {
  .ap-abertura { padding-top: 16px; padding-bottom: 14px; }
  .ap-abertura h1 { margin-bottom: 10px; }
  .ap-intro { margin-bottom: 14px; }
  .ap-intro__mais { display: none; }
  .ap-onde { padding-top: 10px; padding-bottom: 10px; }
  .ap-blocos { padding-top: 12px; }
  .ap-onde__campo { display: flex; align-items: center; gap: 12px; }
  .ap-onde__campo label { flex: none; margin-bottom: 0; }
  .ap-onde__campo select { flex: 1 1 auto; min-width: 0; width: auto; }
}