.carousel {
  position: relative;
}

.carousel.pointer-event {
  touch-action: pan-y;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
  height: 522px;
  background-size: cover;
}

@media(max-width:480px) {
  .carousel-item {
    height: 280px;
  }
}

.carousel-item:after {
  display: block;
  content: " ";
  background: linear-gradient(90deg, black, transparent);
  top: 0;
  bottom: 0;
  width: 100%;
  position: absolute;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

/* rtl:begin:ignore */
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  transform: translateX(-100%);
}

/* rtl:end:ignore */
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  z-index: 1;
  opacity: 1;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  z-index: 0;
  opacity: 0;
  transition: opacity 0s 0.6s;
}

@media (prefers-reduced-motion: reduce) {

  .carousel-fade .active.carousel-item-start,
  .carousel-fade .active.carousel-item-end {
    transition: none;
  }
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5%;
  padding: 0;
  color: #fff;
  text-align: center;
  background: none;
  border: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {

  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}

.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}

/* rtl:options: {
  "autoRename": true,
  "stringMap":[ {
    "name"    : "prev-next",
    "search"  : "prev",
    "replace" : "next"
  } ]
} */
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-right: 15%;
  margin-bottom: 1rem;
  margin-left: 15%;
  list-style: none;
  color: #C4C4C4;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-indicators [data-bs-target] {
    transition: none;
  }
}

.carousel-indicators .active {
  opacity: 1;
  color: #FFF;
}

/**
 * Tag "Destaque" da hero.
 *
 * Contorno branco com fundo transparente. Fica acima do titulo, dentro da
 * legenda.
 *
 * Era uma pilula amarela chapada com rotulo preto. Trocou de estilo com o botao
 * "Saiba mais" logo abaixo, por pedido: a etiqueta assumiu o contorno que era
 * dele, e ele ficou branco chapado. Assim o unico bloco solido da legenda e a
 * acao, e a etiqueta - que so nomeia o espaco e nao e clicavel - pesa menos.
 *
 * O branco puro na borda e no texto e proposital, e nao um cinza: a etiqueta
 * agora depende do que esta atras dela. O que sustenta a legibilidade e o
 * gradiente de .carousel-item:after (preto -> transparente, 90deg) somado ao
 * recorte da legenda, que ocupa 50% da largura a partir de left: 5% - ou seja,
 * a etiqueta cai sempre na faixa escura da esquerda.
 */
.sf-hero__tag {
  align-self: flex-start;
  margin: 0 0 16px;
  padding: 6px 14px;
  border-radius: var(--sf-radius-pill, 999px);
  background-color: transparent;
  border: 1px solid var(--sf-white, #fff);
  /**
   * Muscle Display, como o resto da legenda da hero (titulo e botao "Saiba
   * mais"). Estava na DM Sans (--sf-font-brand): as duas vezes que a tag foi
   * mexida o pedido tratou so de cor, e a fonte ficou para tras.
   */
  font-family: var(--sf-font-display, sans-serif);
  font-size: var(--sf-fs-overline, 0.75rem);
  font-weight: var(--sf-fw-bold, 700);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--sf-white, #fff);
}

.carousel-caption {
  position: absolute;
  left: 5%;
  top: 0;
  bottom: 0;
  width: 50%;
  padding-bottom: 1.25rem;
  color: #fff;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}
.carousel-caption h1 a,
.carousel-caption h2 a,
.carousel-caption h3 a,
.carousel-caption h4 a,
.carousel-caption h5 a{
  font-weight: 800;
  font-size: 48px;
  line-height: normal;
}

/**
 * Botao da hero ("Saiba mais").
 *
 * A caixa alta saiu: a orientacao de produto e seguir o site institucional, que
 * escreve "Saiba mais" com so a inicial em maiuscula.
 *
 * Pilula branca chapada com texto preto, na fonte de display da marca.
 *
 * Chegou a ser contorno (fundo transparente, borda e texto brancos), mas voltou
 * ao branco chapado por pedido, trocando de estilo com a etiqueta "Destaque"
 * acima - que assumiu o contorno. Como a acao e o unico elemento clicavel da
 * legenda, o bloco solido concentra o peso visual nela.
 *
 * O branco puro e proposital, e nao um cinza: o botao vive sobre foto, e o
 * contraste do rotulo preto nao pode depender da imagem que estiver atras.
 *
 * A borda branca continua declarada de proposito. Ela nao aparece sobre o fundo
 * branco, mas e o que mantem a caixa do mesmo tamanho nos dois estados - sem
 * ela, o hover (que devolve o contorno) mudaria a largura do botao em 2px.
 *
 * O respiro passou de 7px 15px para o padrao dos outros botoes da marca:
 * min-height de 48px com recuo horizontal de 24px, igual ao .sf-cat-banner__botao
 * (archive.css). 48px tambem e o alvo de toque confortavel.
 *
 * O inline-flex e necessario junto do min-height: .btn e inline-block, e nele o
 * min-height cresce a caixa sem centralizar o rotulo - o texto ficaria encostado
 * no topo.
 */
.carousel-caption .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  background: var(--sf-white, #fff);
  border: 1px solid var(--sf-white, #fff);
  color: var(--sf-black, #000);
  font-family: var(--sf-font-display, sans-serif);
  font-weight: var(--sf-fw-bold, 700);
  transition: background-color var(--sf-transition, 0.2s ease),
    color var(--sf-transition, 0.2s ease);
}

/**
 * Esvazia no hover: o bloco branco vira contorno com texto branco.
 *
 * E a inversao do que era antes (o contorno preenchia no hover). O sentido se
 * mantem: o estado de repouso e o de interacao continuam sendo os dois extremos
 * do mesmo par, entao o botao segue respondendo ao ponteiro sem depender de cor
 * nova - so troca qual dos dois lados esta em cada estado.
 */
.carousel-caption .btn:hover,
.carousel-caption .btn:focus-visible {
  background: transparent;
  color: var(--sf-white, #fff);
}
@media (max-width: 1200px) {
  .carousel-caption{
    width: 50%;
  }
}

@media (max-width:480px) {
  .carousel-caption h1 a,
  .carousel-caption h2 a,
  .carousel-caption h3 a,
  .carousel-caption h4 a,
  .carousel-caption h5 a {
    font-size: 24px;
    
  }
  .carousel-caption{
    width: 85%;
  }
}

.carousel-dark .carousel-control-prev-icon,
.carousel-dark .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
}

.carousel-dark .carousel-indicators [data-bs-target] {
  background-color: #000;
}

.carousel-dark .carousel-caption {
  color: #000;
}

@-webkit-keyframes spinner-border {
  to {
    transform: rotate(360deg)
      /* rtl:ignore */
    ;
  }
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg)
      /* rtl:ignore */
    ;
  }
}

/**
 * Titulo de secao ("Mais lidas", "Recentes") e nome da categoria no arquivo.
 *
 * Os dois travessoes amarelos que ficavam um de cada lado do texto sairam por
 * decisao de produto - a orientacao foi remover os travessoes amarelos do blog,
 * tanto os duplos daqui quanto o traco unico que ficava antes do rotulo dos
 * cards e do banner de categoria.
 *
 * Eram pseudo-elementos de 45x6px posicionados a 60px de cada lado do <span>,
 * com o amarelo da marca antiga (#FFB612). Ficou so o texto.
 */
.card-category {
  font-size: 1.25rem;
  color: #000;
}

/**
 * O peso normal continua: sem ele o <h1>/<h3> volta ao negrito do navegador e o
 * titulo de secao muda de aparencia, o que nao foi pedido.
 */
.card-category span {
  font-weight: normal;
}

@media (max-width: 480px) {
  .card-category {
    font-size: 0.8rem;
  }

  .card-excerpt {
    font-size: 0.8rem;
  }
}

.read_more {
  position: absolute;
  bottom: 0;
  font-weight: 100 !important;
  bottom: 15px;
}

.read_more.normal {
  left: 15px;
}

.read_more.inverse {
  right: 15px;
}

.h5 {
  font-size: 1.25rem;
}

/**
 * Rebranding: esta classe pedia "GothamLight", que nunca foi declarada em
 * nenhuma @font-face do tema - ou seja, quem usava .fw-100 caia no sans-serif
 * padrao do navegador, fora da marca. Agora usa a fonte da marca.
 *
 * O peso 100 nao existe na DM Sans que carregamos (o eixo vai de 400 a 700),
 * entao o navegador resolve para 400. O nome da classe ficou impreciso, mas
 * renomear exigiria mexer em quem a usa; o resultado visual e o certo.
 */
.fw-100 {
  font-family: var(--sf-font-text, sans-serif);
  font-weight: 100 !important;
}

.ls-2 {
  letter-spacing: 2px;
}

.position-center {
  left: 50%;
  transform: translateX(-50%);
}

.btn-whats {
  position: relative;
  background: #3cb54a;
  color: #fff;
  padding: 1rem 1.5rem;
  line-height: normal;
  display: inline-block;
  border-radius: 50px;
}

.btn-whats:hover {
  color: #fff;
  background: #18b32a;
}

.btn-whats:after {
  content: "";
  background: url('../img/cursor.png') no-repeat;
  width: 58px;
  height: 52px;
  position: absolute;
  top: 50%;
  right: -40px;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  line-height: normal;
  font-weight: bold;
}

.btn-danger {
  background-color: #ff2322;
  border-color: #dc3545;
  color: #fff;
}

.btn-danger:hover {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
}