/* Espaços de anúncio. Publicidade sempre rotulada: em jornal, anúncio sem
   rótulo se confunde com notícia. O espaço reserva o tamanho exato da peça
   (sem salto de layout) e nunca corta a peça. */

.ba-espaco{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin-inline:auto;max-width:100%;
}
.ba-espaco[hidden]{display:none}

/* Mesma largura da peça e centrado com ela: o rótulo marca a borda do anúncio. */
.ba-rotulo{
  align-self:center;width:100%;text-align:center;
  font-family:var(--mono,ui-monospace,"Courier New",monospace);
  font-size:.6875rem;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;
  color:var(--meta,#5C6B7A);           /* 5,6:1 sobre branco */
}

.ba-peca{position:relative;width:100%;line-height:0}
.ba-link{display:block}
.ba-link:focus-visible{outline:2px solid var(--azul,#083E63);outline-offset:2px}
/* Fio por dentro (outline), não borda: a peça fica no tamanho exato. Peça de
   fundo claro se funde ao branco do site; o fio marca onde o anúncio acaba. */
.ba-midia{display:block;width:100%;height:auto;outline:1px solid var(--regra,#D9DEE5);outline-offset:-1px}
/* Dentro da matéria o tema dá margem e moldura às imagens do texto. */
.ba-espaco .ba-midia{margin:0;padding:0;border:0;max-width:100%;box-shadow:none}
.ba-espaco .ba-link{text-decoration:none;border:0}

/* --- tamanhos por espaço e dispositivo ------------------------------------ */
.ba-espaco--topo .ba-peca{max-width:728px;aspect-ratio:728/90}
.ba-espaco--topo .ba-rotulo{max-width:728px}
.ba-espaco--materia-meio .ba-peca,
.ba-espaco--materia-meio .ba-rotulo{max-width:300px}
.ba-espaco--lateral .ba-peca,
.ba-espaco--lateral .ba-rotulo{max-width:300px}
.ba-espaco--faixa .ba-peca,
.ba-espaco--faixa .ba-rotulo{max-width:728px}

@media (max-width:767px){
  .ba-espaco--topo .ba-peca,
  .ba-espaco--topo .ba-rotulo{max-width:320px}
  .ba-espaco--topo .ba-peca{aspect-ratio:320/100}
  .ba-espaco--faixa .ba-peca,
  .ba-espaco--faixa .ba-rotulo{max-width:300px}
}

/* --- espaçamento entre blocos -------------------------------------------- */
.ba-espaco--materia-meio{margin-block:32px}
.ba-espaco--lateral{margin-block:0 32px}
.ba-espaco--faixa{margin-block:32px}

/* --- "Anuncie aqui" (topo sem campanha) ------------------------------------ */
.ba-vazio{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:100%;height:100%;line-height:1.2;text-align:center;
  border:1px dashed #B9C3CE;background:var(--papel-off,#F7F8FA);color:var(--meta,#5C6B7A);
}
.ba-vazio[hidden]{display:none}
.ba-vazio strong{
  font-family:var(--display,Arial,sans-serif);font-weight:700;font-size:1rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--azul,#083E63);
}
.ba-vazio span{font-family:var(--mono,monospace);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}
.ba-vazio:hover{border-color:var(--azul,#083E63);text-decoration:none}
@media (max-width:767px){ .ba-vazio span{display:none} }

/* O aviso vem no HTML (fica se o JS falhar), mas só aparece quando o anuncios.js
   diz que não há peça (.ba-resolvido). Sem isso ele piscava a cada atualização,
   no intervalo até a peça chegar. O espaço já tem o tamanho reservado
   (aspect-ratio), então esconder não move nada. Rede de segurança sem JS: aos
   6 s, um pouco depois do prazo de 5 s do script, o aviso aparece sozinho. */
.ba-espaco--topo:not(.ba-resolvido) .ba-vazio{visibility:hidden;animation:ba-vazio-surge 0s 6s forwards}
@keyframes ba-vazio-surge{to{visibility:visible}}

/* --- vídeo em laço: botão de pausa (WCAG 2.2.2) ---------------------------- */
/* No canto da peça, fora do link. Fundo claro com fio escuro: legível sobre
   qualquer anúncio. 28 px: acima do mínimo de 24 px do critério 2.5.8. */
.ba-pausa{
  position:absolute;inset-block-end:4px;inset-inline-end:4px;
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;line-height:0;cursor:pointer;
  border:1px solid var(--regra-forte,#9AA6B2);background:rgba(255,255,255,.92);color:var(--tinta,#0B1B2B);
}
.ba-pausa:hover{background:#fff;color:var(--azul,#083E63)}
.ba-pausa:focus-visible{outline:2px solid var(--azul,#083E63);outline-offset:2px;box-shadow:0 0 0 4px #fff}
.ba-pausa svg{width:12px;height:12px}
.ba-pausa .ba-icone-tocar,
.ba-pausa[aria-pressed="true"] .ba-icone-pausa{display:none}
.ba-pausa[aria-pressed="true"] .ba-icone-tocar{display:block}
.ba-so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- pop-up de entrada (600 × 400; 300 × 400 no celular) --------------------- */
/* 6 px de respiro em volta: o anel de foco do botão não pode ser cortado pelo
   overflow do diálogo. Largura = peça + 12 px, então a peça sai no tamanho exato. */
.ba-popup{
  box-sizing:border-box;width:612px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);
  padding:6px;border:0;background:transparent;overflow:auto;
}
.ba-popup::backdrop{background:rgba(8,22,36,.78)}
.ba-popup[open]{animation:ba-popup-entra .2s cubic-bezier(.23,1,.32,1)}
@keyframes ba-popup-entra{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
html:has(.ba-popup[open]){overflow:hidden}
.ba-popup-cabeca{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.ba-popup .ba-rotulo{width:auto;color:#E6EAEE}
.ba-popup .ba-peca{aspect-ratio:600/400}
.ba-popup-fechar{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border:1px solid #fff;background:#fff;color:var(--tinta,#0B1B2B);cursor:pointer;
  font-family:var(--display,Arial,sans-serif);font-weight:600;font-size:.875rem;line-height:1;letter-spacing:.02em;
}
.ba-popup-fechar svg{width:16px;height:16px}
.ba-popup-fechar:hover{background:var(--papel-off,#F7F8FA)}
.ba-popup-fechar:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:767px){
  .ba-popup{width:312px}
  .ba-popup .ba-peca{aspect-ratio:300/400}
}
@media (prefers-reduced-motion:reduce){ .ba-popup[open]{animation:none} }

@media print{ .ba-espaco,.ba-popup{display:none !important} }