/**
 * Respiro entre o header e o nome da categoria.
 *
 * E margem, e nao padding, de proposito: o titulo carrega o utilitario py-2 do
 * Bootstrap, que e !important - um padding-top aqui perderia a disputa.
 */
.sf-archive-title {
  margin-top: 32px;
  /**
   * Caixa alta no nome da categoria, por pedido.
   *
   * Escopado em .sf-archive-title e nao em .card-category porque a mesma classe
   * .card-category veste os titulos de secao da home ("Mais lidas", "Recentes"),
   * que nao entram em caixa alta. Aqui o alvo e so o nome da editoria no topo do
   * arquivo e o titulo da pagina de busca, que sao os dois lugares que carregam
   * esta classe.
   */
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .sf-archive-title {
    margin-top: 48px;
  }
}

.page-icon svg{
  min-width: 56px;
  min-height: 56px;
}
.editorials-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc(20% - 20px);
  margin-left:10px;
  margin-right:10px;
  transition: all .5s;
  color: #000;
}
.editorials-icons * {
	transition: all .5s;
}
.editorials-icons svg {
  width: 26px;
  height: 26px;
}
.editorials-icons span {
  font-size: 28px;
  font-weight: 700;
  margin-left: 10px;
}
.editorials-icons:hover {
  color: #ffb612;
  text-decoration: none;
}
/*Fitness*/
.category-fitness .card-horizontal-group a,
.category-fitness .page-title{
  color:#F8B904;
}
.category-fitness .page-icon svg *,
.editorials-icons.fitness:hover svg *{
  fill:#F8B904;
}
.editorials-icons.fitness:hover span{
  color: #F8B904;
}
.archive.category-fitness #destaques-cards article:nth-child(odd) .row{
  background:#F8B904;
}
.archive.category-fitness #destaques-cards article:nth-child(odd) a{
  color:#fff;
}
.archive.category-fitness #destaques-cards article:nth-child(even) .row{
  border: 5px solid #F8B904;
}
.archive.category-fitness #destaques-cards article:nth-child(even) a{
  color: #F8B904;
}
.category-fitness .card-horizontal-group,
.archive.category-fitness .grid-posts-archive .flex-column-reverse.card .card-body{
  background:#fff;
  border: 6px solid #F8B904;
}
.archive.category-fitness .carousel-item .img-rousel{
  border:5px solid #F8B904;
}

/*Saude*/
.category-saude .card-horizontal-group a,
.category-saude .carousel-caption a,
.category-saude .page-title{
  color:#00A5E6;
}
.category-saude .page-icon svg *,
.editorials-icons.saude:hover svg *{
  fill:#00A5E6 ;
}
.editorials-icons.saude:hover span{
  color: #00A5E6;
}
.card__post.reverse.saude{
  background: #00A5E6;
}
.archive.category-saude #destaques-cards article:nth-child(odd) .row{
  background:#00A5E6;
}
.archive.category-saude .carousel-item .img-rousel{
  border:5px solid #00A5E6;
}
.archive.category-saude #destaques-cards article:nth-child(odd) a{
  color:#fff;
}
.archive.category-saude #destaques-cards article:nth-child(even) .row{
  border: 5px solid #00A5E6;
}
.category-saude .card-horizontal-group,
.archive.category-saude .grid-posts-archive .flex-column-reverse.card .card-body{
  background:#fff;
  border: 6px solid #00A5E6;
}

/*Nutricao*/
.category-nutricao .card-horizontal-group a,
.category-nutricao .carousel-caption a,
.category-nutricao .page-title{
  color:#37C90A;
}
.editorials-icons.nutricao:hover svg *,
.category-nutricao .page-icon svg *{
  fill:#37C90A;
}
.editorials-icons.nutricao:hover span{
  color: #37C90A;
}
.archive.category-nutricao .carousel-item .img-rousel{
  border:5px solid #37C90A;
}
.card__post.reverse.nutricao{
  background: #37C90A;
}
.archive.category-nutricao #destaques-cards article:nth-child(odd) .row{
  background:#37C90A;
  color:#fff;
}
.archive.category-nutricao #destaques-cards article:nth-child(odd) a{
  color:#fff;
}
.archive.category-nutricao #destaques-cards article:nth-child(even) .row{
  border: 5px solid #37C90A;
}
.category-nutricao .card-horizontal-group,
.archive.category-nutricao .grid-posts-archive .flex-column-reverse.card .card-body{
  background:#fff;
  border: 6px solid #37C90A;
}

/*Academia*/
.category-academia .card-horizontal-group a,
.category-academia .carousel-caption a,
.category-academia .page-title{
  color:#888;
}

.editorials-icons.academia:hover svg *,
.category-academia .page-icon svg *{
  fill:#888;
}
.editorials-icons.academia:hover span{
  color: #888;
}

.card__post.reverse.academia{
  background: #888;
}
.archive.category-academia .carousel-caption a{
  color:#333;
}
.archive.category-academia .carousel-item .img-rousel{
  border:5px solid #888;
}
.archive.category-academia #destaques-cards article:nth-child(odd) .row{
  background:#888;
}
.archive.category-academia #destaques-cards article:nth-child(even) .row{
  border: 5px solid #888;
}
.archive.category-academia #destaques-cards article:nth-child(odd) a{
  color:#fff;
}
.category-academia .card-horizontal-group,
.archive.category-academia .grid-posts-archive .flex-column-reverse.card .card-body{
  background:#fff;
  border: 6px solid #888;
}

.img-rousel{
  display:block;
  max-height:460px;
  overflow:hidden;
}

.fixed-banner-sidebar{
  position:sticky;
  top:5px;
}
.fixed-banner-sidebar img{
  border-radius:12px;
  display:block;
  width:100%;
  height:auto;
}
@media (max-width:767.98px){
  .fixed-banner-sidebar{
    position:relative;
    top:auto;
    margin-bottom:1.5rem;
  }
}
/**
 * Rebranding: o raio dos cards da grade saiu daqui.
 *
 * Havia um "border-radius: 6px" em .grid-posts-archive .card. Como a
 * especificidade era maior que a do componente (.card-horizontal, em cards.css),
 * ele vencia e os cards do arquivo e da busca ficavam com 6px enquanto os da home
 * usavam o raio da marca. Agora quem define e cards.css, para todos.
 */

.grid-posts-archive .flex-column.card .img-replace,
.grid-posts-archive .flex-column-reverse.card .card-body{
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.grid-posts-archive .flex-column-reverse.card .img-replace,
.grid-posts-archive .flex-column.card .card-body{
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}



/**
 * =============================================================================
 * PAGINACAO (.pagination)
 * =============================================================================
 * Marcacao em library/bootstrap-pagination.php. Usada em categoria, busca e
 * trilhas.
 *
 * O DESENHO
 *   pagina atual .......... circulo preto cheio, numero branco
 *   demais paginas ........ circulo #BFBFBF, numero preto (--sf-pagination-bg)
 *   setas ................. mesmo circulo das demais paginas
 *   reticencias ........... texto solto, sem circulo
 *
 * Antes so a pagina atual tinha fundo: os numeros eram transparentes e as setas
 * ficavam num cinza claro proprio. O cinza chapado nos itens nao-atuais entrou
 * por pedido, para a fileira ficar igual ao exemplo aprovado.
 *
 * O QUE ESTAVA DATADO
 *   cada item era uma caixa preta de 1rem de recuo com o numero em #F8B904 - um
 *   terceiro amarelo, que nao e o novo (#FFC409) nem o legado (#FFB612) - e raio
 *   de 5px. A lista virava uma fileira de blocos escuros com mais peso visual que
 *   os cards que ela pagina, e a cor nao existia em nenhum outro lugar do tema.
 */

.pagination {
  /**
   * Cinza das paginas nao-atuais. Nao ha token equivalente no brand.css - o mais
   * proximo e --sf-gray-400 (#B3B3B3), que e outro valor - por isso o literal
   * fica aqui, em uma variavel local, e nao repetido em cada estado.
   */
  --sf-pagination-bg: #f3f3f3;

  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

/* O espaco entre os itens e o gap da lista; a margem de antes duplicava. */
.pagination li {
  margin: 0;
}

.pagination li a,
.pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /**
   * min-width com height igual: numero de uma casa fica circulo, e de duas ou
   * tres casas ("45") a pilula cresce na horizontal sem cortar o texto.
   */
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border-radius: var(--sf-radius-pill, 999px);
  background: var(--sf-pagination-bg, #BFBFBF);
  font-family: var(--sf-font-display, sans-serif);
  font-size: var(--sf-fs-body-sm, 0.875rem);
  font-weight: 550;
  line-height: 1;
  text-decoration: none;
  color: var(--sf-black, #000);
  transition: background-color var(--sf-transition, 0.2s ease);
}

/* Pagina atual: circulo preto cheio. E o unico item com fundo escuro. */
.pagination li .current {
  background: var(--sf-black, #000);
  color: var(--sf-white, #fff);
}

/**
 * As setas nao tem mais cor propria.
 *
 * Elas ficavam em --sf-gray-050 (#f6f6f6) para se distinguirem dos numeros, que
 * eram transparentes. Agora que todo item nao-atual tem o mesmo cinza, a regra
 * separada virou redundante e saiu - setas e numeros compartilham a base.
 */

/**
 * Hover escurece em direcao ao preto da pagina atual.
 *
 * Era --sf-gray-200 (#e6e6e6), que sobre o novo cinza de repouso (#BFBFBF) seria
 * mais CLARO - o item pareceria recuar ao receber o ponteiro. Escurecer mantem a
 * leitura de que o hover caminha para o estado selecionado.
 */
.pagination li a:hover {
  background: var(--sf-gray-600, #8c8c8c);
}

/**
 * Seta inativa: existe nos extremos (esquerda na pagina 1, direita na ultima).
 *
 * Mantem o circulo cinza dos outros itens e muda so o glifo, de preto para
 * cinza. E o sinal de "nao ha para onde ir deste lado" sem tirar a seta da tela -
 * antes ela desaparecia e a fileira mudava de largura ao paginar.
 *
 * Marcada em library/bootstrap-pagination.php. E um <span>, entao nao pega o
 * :hover de a:hover nem o foco de teclado.
 *
 * O contraste baixo aqui e intencional e permitido: a WCAG isenta controles
 * desabilitados dos minimos de contraste, e o cinza e justamente o que comunica
 * o estado.
 */
.pagination li .is-disabled {
  color: var(--sf-gray-700, #707070);
  cursor: default;
}

.pagination li a:focus-visible {
  outline: 3px solid var(--sf-yellow, #ffc409);
  outline-offset: 2px;
}

/* Reticencias: texto solto, sem moldura e sem afordancia de clique. */
.pagination li .dots {
  min-width: auto;
  padding: 0 4px;
  background: transparent;
  color: var(--sf-gray-700, #707070);
}

/**
 * Respiro entre a listagem e a paginacao.
 *
 * O <nav class="posts-pagination"> nao tinha regra nenhuma fora do escopo do
 * colunista, entao a paginacao encostava no ultimo card.
 *
 * POR QUE O SELETOR E DUPLO
 * Em archive.php a nav e filha de <div class="row grid-posts-archive">, e o
 * Bootstrap tem `.row > * { margin-top: var(--bs-gutter-y) }` - que aqui vale
 * 24px. Ele empata em especificidade com .posts-pagination (uma classe cada), e
 * desempata por ordem de carga.
 *
 * E a ordem de carga favorece o Bootstrap: archive.php enfileira home.css e
 * archive.css ANTES de get_header(), entao os dois entram na fila antes do
 * bootstrap-grid.min.css, que so e enfileirado quando wp_enqueue_scripts dispara.
 * Conferido na pagina: home.css, archive.css, bootstrap-grid.min.css, cards.css.
 * Ou seja, qualquer disputa de igual para igual entre archive.css e o Bootstrap e
 * perdida por este arquivo.
 *
 * O `.row >` no segundo seletor sobe para duas classes e resolve, sem !important.
 * O primeiro seletor cobre search.php, onde a nav fica fora do .row.
 */
.posts-pagination,
.row > .posts-pagination {
  width: 100%;
  margin-top: 32px;
}

/**
 * Respiro entre a paginacao e o footer, no mobile.
 *
 * A paginacao encostava no footer: a <nav class="posts-pagination"> tem
 * margin-bottom 0, a section que a envolve tem padding-bottom 0 e o footer comeca
 * na sequencia - medido 0px de vao nos dois breakpoints.
 *
 * O que disfarcava era a curva do topo do footer, transparente no centro. Nas
 * bordas laterais, onde o preto sobe ate o topo, a paginacao ficava colada.
 *
 * A home nao tem esse problema porque a ultima secao dela leva
 * .sf-antes-do-footer (72px no mobile, em assets/css/footer.css). Categoria e
 * busca nao aplicam essa classe, entao o respiro entra aqui.
 *
 * So no mobile, por pedido. No desktop a curva tem 138px de amplitude e ja abre
 * espaco - por isso o valor nao entrou na regra base acima.
 */
@media (max-width: 767.98px) {

  .posts-pagination,
  .row > .posts-pagination {
    margin-bottom: 48px;
  }
}

@media (min-width: 768px) {

  .posts-pagination,
  .row > .posts-pagination {
    margin-top: 48px;
  }
}
.card-excerpt a{
  color:#000!important;
}

/**
 * =============================================================================
 * BANNER DE DESTAQUE DA CATEGORIA (.sf-cat-banner)
 * =============================================================================
 * Marcacao em archive.php. Depende dos tokens de assets/css/brand.css.
 *
 * Este arquivo e carregado depois do home.css, que e onde vive o CSS base do
 * carrossel (.carousel-item, .carousel-caption, .carousel-indicators). O mesmo
 * componente base atende a hero da home, entao tudo aqui e escopado em
 * .sf-cat-banner para nao mexer na home.
 *
 * Sobre especificidade: home.css tem regras como ".carousel-caption h2 a", que
 * pesa mais que uma classe unica. Por isso os seletores daqui repetem o
 * .sf-cat-banner na frente - e o que garante que estas regras vencam.
 *
 * O QUE ESTAVA DATADO
 *   moldura ....... canto de 4px (classe "rounded" do Bootstrap) -> raio da marca
 *   gradiente ..... preto puro cobrindo a largura toda, chapado, escondia a arte
 *                   -> gradiente em tres paradas, escuro onde tem texto e limpo
 *                      onde esta a arte do banner
 *   resumo ........ o texto de abertura inteiro, 6 linhas de corpo pequeno sobre
 *                   a imagem -> 2 linhas
 *   titulo ........ 48px fixo -> escala com a viewport, limitado a 3 linhas
 *   botao ......... pilula branca pequena, generica -> pilula amarela da marca,
 *                   mesmo desenho do CTA do header
 *   categoria ..... nao existia -> rotulo com o traco amarelo, igual ao dos cards
 *   controles ..... nao existiam: o carrossel girava sozinho e nada dizia que
 *                   havia mais de um destaque -> indicadores clicaveis
 */

/**
 * Contorno preto, sem sombra.
 *
 * A sombra em repouso segue fora, e nada acontece na interacao: o banner e uma
 * imagem grande, nao um bloco de lista que cresce ao passar o mouse. O que entrou
 * por pedido foi o contorno preto, que delimita o bloco na mesma linguagem dos
 * cards - so que aqui em preto cheio, e nao no preto 12% dos cards, porque a
 * borda precisa se sustentar contra a propria foto do banner.
 *
 * A borda vai no .carousel-inner, que e quem tem o raio e o recorte; nos slides
 * ela apareceria e desapareceria a cada troca.
 */
.sf-cat-banner .carousel-inner {
  border: 1px solid var(--sf-black, #000);
  border-radius: var(--sf-radius-lg, 24px);
}

/**
 * A altura precisa ser explicita: a legenda e posicionada em absolute, entao o
 * slide nao tem conteudo no fluxo para dar altura a ele.
 */
.sf-cat-banner .carousel-item {
  height: 340px;
  background-position: center;
  background-color: var(--sf-black, #000);
}

/**
 * Escurecimento. No mobile vem de baixo, porque a legenda fica ancorada no pe do
 * banner; no desktop vem da esquerda, onde fica a legenda, e libera o lado
 * direito, onde as artes de banner costumam trazer a tipografia da campanha.
 */
.sf-cat-banner .carousel-item::after {
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0.55) 45%,
      rgba(0, 0, 0, 0.9) 100%);
}

/* ------------------------------------------------------------------ Legenda */

.sf-cat-banner .carousel-caption {
  left: 0;
  right: auto;
  top: auto;
  bottom: 0;
  width: 100%;
  padding: 24px;
  justify-content: flex-end;
  text-align: left;
}

/**
 * Rotulo da editoria. Saiu o traco amarelo que ficava antes do texto (decisao de
 * produto: sem travessoes amarelos no blog) e saiu a caixa alta - o rotulo usa o
 * nome da categoria como esta cadastrado, "Saude", "Nutricao".
 */
.sf-cat-banner .sf-cat-banner__eyebrow {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
  font-family: var(--sf-font-brand, sans-serif);
  font-size: var(--sf-fs-overline, 0.75rem);
  font-weight: var(--sf-fw-bold, 700);
  color: var(--sf-on-dark-strong, #fff);
}

.sf-cat-banner .sf-cat-banner__titulo {
  margin: 0 0 12px;
}

/**
 * A largura do titulo e a da propria legenda (620px no maximo). Havia um
 * max-width de 20ch aqui que estreitava demais: um titulo de 44 caracteres nao
 * cabia em 3 linhas e terminava cortado com reticencias.
 *
 * A caixa alta saiu por decisao de produto, para o banner da categoria ficar
 * igual ao da home: o titulo aparece como esta escrito no post.
 */
.sf-cat-banner .sf-cat-banner__titulo a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--sf-font-brand, sans-serif);
  /* 24px no mobile, 40px a partir de ~1430 de viewport. */
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  font-weight: var(--sf-fw-bold, 700);
  line-height: 1.1;
  text-decoration: none;
  color: var(--sf-on-dark-strong, #fff);
}

.sf-cat-banner .sf-cat-banner__titulo a:hover,
.sf-cat-banner .sf-cat-banner__titulo a:focus-visible {
  color: var(--sf-on-dark-strong, #fff);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/**
 * O resumo nao aparece no mobile: com 340px de banner, o espaco e do titulo e do
 * botao. Some por aqui, e nao pelo d-none do Bootstrap, porque aquele utilitario
 * usa "display: block !important" no breakpoint md e anularia o
 * "display: -webkit-box" que o corte de 2 linhas precisa.
 */
.sf-cat-banner .sf-cat-banner__resumo {
  display: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 46ch;
  margin: 0 0 20px;
  font-family: var(--sf-font-brand, sans-serif);
  font-size: 0.9375rem;
  line-height: 1.5;
  /* Branco 80%: legivel sobre o gradiente sem competir com o titulo. */
  color: rgba(255, 255, 255, 0.8);
}

/* Mesmo desenho do CTA do header: pilula amarela, rotulo preto em caixa alta. */
.sf-cat-banner .sf-cat-banner__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--sf-radius-pill, 999px);
  background-color: var(--sf-yellow, #FFC409);
  font-family: var(--sf-font-display, sans-serif);
  font-size: var(--sf-fs-body-sm, 0.875rem);
  font-weight: var(--sf-fw-bold, 700);
  line-height: 1;
  text-decoration: none;
  color: var(--sf-black, #000);
  transition: background-color var(--sf-transition, 0.2s ease);
}

.sf-cat-banner .sf-cat-banner__botao:hover,
.sf-cat-banner .sf-cat-banner__botao:focus-visible {
  background-color: var(--sf-yellow-dark, #E0A800);
  color: var(--sf-black, #000);
}

.sf-cat-banner a:focus-visible {
  outline: 3px solid var(--sf-yellow, #FFC409);
  outline-offset: 3px;
}

/* -------------------------------------------------------------- Indicadores */

.sf-cat-banner .sf-cat-banner__dots {
  position: absolute;
  z-index: 3;
  left: auto;
  right: 20px;
  bottom: 20px;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.sf-cat-banner .sf-cat-banner__dots button {
  width: 24px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--sf-radius-pill, 999px);
  background-color: rgba(255, 255, 255, 0.45);
  opacity: 1;
  cursor: pointer;
  transition: background-color var(--sf-transition, 0.2s ease),
    width var(--sf-transition, 0.2s ease);
}

.sf-cat-banner .sf-cat-banner__dots button:hover {
  background-color: rgba(255, 255, 255, 0.75);
}

/* O slide corrente ganha o amarelo e fica mais largo, para ler de longe. */
.sf-cat-banner .sf-cat-banner__dots button.active {
  width: 40px;
  background-color: var(--sf-yellow, #FFC409);
}

.sf-cat-banner .sf-cat-banner__dots button:focus-visible {
  outline: 2px solid var(--sf-white, #fff);
  outline-offset: 3px;
}

/* ================================================================= Desktop */

@media (min-width: 768px) {
  .sf-cat-banner .carousel-item {
    /* 420px em tablet, 500px a partir de ~1470 de viewport. */
    height: clamp(420px, 34vw, 500px);
  }

  /**
   * O escurecimento se estende um pouco alem da legenda de proposito. Boa parte
   * das artes usadas neste campo ja traz a manchete desenhada na imagem, e sem
   * essa folga o titulo do banner cai em cima de letra grande da arte.
   */
  .sf-cat-banner .carousel-item::after {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.72) 45%,
        rgba(0, 0, 0, 0.28) 72%,
        rgba(0, 0, 0, 0) 92%);
  }

  .sf-cat-banner .carousel-caption {
    top: 0;
    bottom: 0;
    width: 58%;
    max-width: 620px;
    padding: 40px 48px;
    justify-content: center;
  }

  .sf-cat-banner .sf-cat-banner__resumo {
    display: -webkit-box;
  }

  /**
   * Uma linha a mais no titulo, que aqui tem 620px de largura e ainda sobra
   * altura no banner (4 linhas de 40px cabem junto com resumo e botao).
   */
  .sf-cat-banner .sf-cat-banner__titulo a {
    -webkit-line-clamp: 4;
  }

  .sf-cat-banner .sf-cat-banner__dots {
    right: 32px;
    bottom: 28px;
  }
}

/**
 * ------------------------------------------------- Cor de link herdada do tema
 *
 * Este arquivo tem, mais acima, regras antigas por categoria do tipo
 * ".category-saude .carousel-caption a { color: #00A5E6 }" - uma cor de link por
 * editoria (azul, verde, amarelo, cinza). Elas pesam mais que uma classe unica,
 * entao pintavam o rotulo do botao do banner de azul em Saude, verde em
 * Nutricao, e assim por diante.
 *
 * O banner do rebranding tem cor propria: titulo branco e botao amarelo com
 * rotulo preto. Os seletores abaixo repetem .carousel-caption para vencer as
 * regras por categoria sem precisar de !important e sem depender da ordem em que
 * as regras aparecem no arquivo.
 */
.sf-cat-banner .carousel-caption .sf-cat-banner__titulo a {
  color: var(--sf-on-dark-strong, #fff);
}

.sf-cat-banner .carousel-caption .sf-cat-banner__botao,
.sf-cat-banner .carousel-caption .sf-cat-banner__botao:hover,
.sf-cat-banner .carousel-caption .sf-cat-banner__botao:focus-visible {
  color: var(--sf-black, #000);
}

/**
 * ------------------------------------------------ Contraste dos indicadores
 *
 * Os indicadores ficam sobre a lateral direita da imagem, que e a parte que o
 * gradiente deixa limpa - e pode ser clara. Sem um fundo proprio, o indicador
 * inativo (branco 45%) desaparecia em foto clara. A pilula escura garante
 * contraste em qualquer arte.
 */
.sf-cat-banner .sf-cat-banner__dots {
  padding: 7px 9px;
  border-radius: var(--sf-radius-pill, 999px);
  background-color: rgba(0, 0, 0, 0.35);
}