/* Espaço publicitário compartilhado (faixa abaixo do cabeçalho). Cópia fiel da faixa da apuração (apuracao.css),
   que fica lá enquanto a apuração não for mexida antes do 2º turno. Regras em DESIGN.md seção 9.
   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; }
}
/* Patrocinador (anuncio-criativo--patrocinio): as cores vêm no style do próprio criativo (as mesmas variáveis
   --is-*), o logo e o botão "Conheça" levam ao site dele com UTM. Feito para logo alto, com o símbolo em cima do
   nome: o logo ganha altura e, no celular, fica sozinho na primeira linha. */
.anuncio-criativo__marca { display: block; line-height: 0; }
.anuncio-criativo--patrocinio .anuncio-criativo__logo { width: auto; height: 58px; }
.anuncio-criativo--patrocinio .anuncio-criativo__divisa { height: 50px; }
@media (max-width: 1009px) {
  .anuncio-criativo--patrocinio .anuncio-criativo__logo { width: auto; height: 50px; }
  .anuncio-criativo__mais { display: none; }
}
@media (max-width: 767px) {
  .anuncio-criativo--patrocinio { grid-template-rows: 28px 30px auto; gap: 4px 8px; }
  .anuncio-criativo--patrocinio .anuncio-criativo__marca { grid-area: logo; justify-self: start; }
  .anuncio-criativo--patrocinio .anuncio-criativo__logo { width: auto; height: 28px; }
  .anuncio-criativo--patrocinio .anuncio-criativo__titulo { font-size: 13px; line-height: 1.12; white-space: normal; text-wrap: balance; }
  .anuncio-criativo--patrocinio .anuncio-criativo__regra { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .anuncio-criativo__botao { transition: none; }
}