/* Barrinha de anúncios no topo da página (JeZapp Marca Aí). Cada modelo ajusta as cores pelas variáveis --an-*. */
.slides { position: relative; height: 100px; overflow: hidden; background: var(--an-fundo, #1f1b17); border-bottom: 1px solid var(--an-borda, rgb(255 255 255 / .08)); }
.slides-lista { height: 100%; }
.slide { position: absolute; inset: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: min(100% - 32px, 760px); margin-inline: auto; padding-bottom: 30px; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }
.slide.ativo { opacity: 1; visibility: visible; }
.slide .av { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: .95rem; background: var(--an-avatar, rgb(255 255 255 / .1)); color: var(--an-texto, #f2ede4); font-family: inherit; }
.slide .av img { width: 26px; height: 26px; }
.slide .txt { min-width: 0; }
.slide b { display: block; color: var(--an-texto, #f2ede4); font-size: .98rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide small { display: block; color: var(--an-suave, #c9c0b2); font-size: max(.82rem, 13px); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide small::before { content: 'Anúncio · '; color: var(--an-destaque, #c9a45c); font-weight: 700; }
.slide.nosso small::before { content: 'Publicidade · '; }
.slide-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #15803d; color: #ffffff; font-weight: 800; font-size: .88rem; text-decoration: none; white-space: nowrap; font-family: inherit; }
.slide.jezapp .av { background: #062a1c; }
.slide.jezapp .slide-btn { background: #17ca8c; color: #04130c; }
.slide.pagina .av { background: var(--an-destaque, #c9a45c); color: var(--an-destaque-texto, #17120a); }
.slide.pagina .slide-btn { background: var(--an-destaque, #c9a45c); color: var(--an-destaque-texto, #17120a); }
.slides .pontos { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 0; }
.slides .pontos button { height: 40px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; font-family: inherit; }
.slides .pontos .ponto { width: 40px; }
.slides .pontos .ponto::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--an-ponto, rgb(255 255 255 / .35)); transition: width .2s; }
.slides .pontos .ponto[aria-current="true"]::before { width: 20px; border-radius: 4px; background: var(--an-destaque, #c9a45c); }
/* Setas para voltar e avançar: alvo de toque de 44px, desenho de 28px. */
.slides .seta { width: 44px; color: var(--an-texto, #f2ede4); }
.slides .seta span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--an-avatar, rgb(255 255 255 / .12)); font-size: 1.35rem; line-height: 1; padding-bottom: 2px; }
.slides .seta:hover span { background: var(--an-destaque, #c9a45c); color: var(--an-destaque-texto, #17120a); }
.slides .pontos button:focus-visible { outline: 2px solid var(--an-destaque, #c9a45c); outline-offset: -3px; border-radius: 10px; }
.slides .contagem { min-width: 64px; text-align: center; color: var(--an-suave, #c9c0b2); font-size: .82rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .slide, .slides .pontos .ponto::before { transition: none; } }
@media (max-width: 359px) {
  .slide { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; width: calc(100% - 24px); }
  .slide .av { width: 38px; height: 38px; font-size: .85rem; }
  .slide .av img { width: 22px; height: 22px; }
  .slide b { font-size: .9rem; }
  .slide-btn { padding: 0 12px; font-size: .84rem; }
}