/* Complemento ao template do Porter News (main.css + porter.css).
   Aqui fica so o que a Central de Ajuda tem e o template nao traz pronto:
   o hero de busca e a busca da navbar. Cores da identidade Porter:
   azul #384AA0, verde-lima #D3F482, navy #191248. */

/* ---------- busca na navbar ---------- */
.busca-topo input {
  border: 1px solid #e5e5ef;
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  min-width: 230px;
  font-size: 0.9rem;
  background: #fff;
  color: #191248;
}
.busca-topo input:focus {
  outline: none;
  border-color: #384aa0;
  box-shadow: 0 0 0 3px rgba(56, 74, 160, 0.12);
}

/* ---------- hero ----------
   O fundo vem de .sec-1-home-1 (gradiente claro do template, com variante
   dark propria). Aqui so o espacamento e a caixa de busca, que e a unica
   parte escura. */
.hero-ajuda {
  text-align: center;
}

.caixa-busca {
  max-width: 1040px;
  margin: 2.2rem auto 0;
  background: #191248;
  border-radius: 22px;
  padding: 1.4rem;
}
.caixa-busca .campo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: #fff;
  border-radius: 10px;
  padding: 1.15rem 1.4rem;
}
.caixa-busca .campo svg {
  flex: 0 0 22px;
  color: #6a6a84;
}
.caixa-busca input {
  border: 0;
  flex: 1;
  font-size: 1.1rem;
  color: #191248;
  background: transparent;
}
.caixa-busca input:focus {
  outline: none;
}
.caixa-busca input::placeholder {
  color: #9a9ab0;
}

/* Uma linha so, como no Figma. Em tela estreita rola na horizontal em vez
   de quebrar em duas linhas. */
.chips-ajuda {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  /* centraliza enquanto cabe; quando passa, alinha a esquerda para o primeiro
     chip nao nascer cortado. Precisa dos dois: so o center corta os dois lados. */
  justify-content: safe center;
  margin-top: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
  cursor: grab;
}
.chips-ajuda.arrastando {
  cursor: grabbing;
  scroll-behavior: auto;
}
.chips-ajuda.arrastando .chip-ajuda {
  pointer-events: none;
}
.chips-ajuda::-webkit-scrollbar {
  display: none;
}
.chip-ajuda {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.86rem;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip-ajuda:hover {
  background: #d3f482;
  border-color: #d3f482;
  color: #191248;
}

/* ---------- lista de artigos ---------- */
.artigo-item {
  display: block;
  padding: 1.5rem 1.75rem;
  border: 1px solid #e5e5ef;
  border-radius: 14px;
  margin-bottom: 1rem;
  background: #fff;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.artigo-item:hover {
  border-color: #384aa0;
  box-shadow: 0 6px 18px rgba(25, 18, 72, 0.07);
}
.artigo-item .item-titulo {
  font-weight: 600;
  color: #191248;
}

/* ---------- corpo do artigo ---------- */
/* pagina de leitura em branco: o cinza do site serve para destacar os cards
   da home, mas atras de texto corrido so pesa */
body:has(.pagina-artigo) {
  background: #fff;
}
.artigo-corpo {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #4a4a63;
}
.artigo-corpo h2 {
  font-size: 1.35rem;
  margin: 2rem 0 0.7rem;
  color: #191248;
}
.artigo-corpo h3 {
  font-size: 1.12rem;
  margin: 1.5rem 0 0.5rem;
  color: #191248;
}
.artigo-corpo img {
  /* Print de celular vem em retrato (ex 417x844) e ocupava a tela inteira.
     O teto de altura resolve os dois casos: em retrato limita pela altura,
     em paisagem a largura do texto continua mandando. */
  display: block;
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  margin: 1.5rem auto;
  border-radius: 12px;
  border: 1px solid #ececf4;
}
.artigo-corpo code {
  background: #f7f7fb;
  padding: 0.12rem 0.35rem;
  border-radius: 5px;
  font-size: 0.9em;
  color: #2c3a7d;
}
.artigo-corpo pre {
  background: #191248;
  color: #eee;
  padding: 1rem;
  border-radius: 12px;
  overflow-x: auto;
}
.artigo-corpo pre code {
  background: transparent;
  color: inherit;
}
.artigo-corpo blockquote {
  border-left: 3px solid #d3f482;
  padding-left: 1rem;
  color: #6a6a84;
  margin: 1.2rem 0;
}

@media (max-width: 575px) {
  .hero-ajuda {
    padding: 3rem 0 2.5rem;
  }
  .caixa-busca {
    border-radius: 16px;
    padding: 0.75rem;
  }
}

/* O template gera alguns transbordos laterais de poucos pixels (efeitos de
   hover que duplicam o texto do link). Corta o scroll horizontal sem mexer
   no main.css, que e do template e nao deve ser editado aqui. */
body { overflow-x: hidden; }

/* ---------- formulario da pagina de busca ---------- */
.form-busca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.form-busca input[type="search"],
.form-busca select {
  border: 1px solid #e5e5ef;
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  font-size: 0.95rem;
  color: #191248;
  background: #fff;
}
.form-busca input[type="search"] { flex: 1 1 260px; max-width: 380px; }
.form-busca select { flex: 0 0 auto; }
.form-busca input[type="search"]:focus,
.form-busca select:focus {
  outline: none;
  border-color: #384aa0;
}
.form-busca .btn { flex: 0 0 auto; padding: 0.7rem 1.8rem; }

/* ---------- gradiente do hero ----------
   O .sec-1-home-1 do porter.css usa 160deg, calibrado para o hero alto do
   Porter News (titulo + cards). Aqui a secao e bem mais larga que alta, e
   nessa proporcao o verde cai no meio em vez de ficar a direita. Mesmas
   cores e paradas, so o angulo mais horizontal. O !important e necessario
   porque a regra original tambem usa. */
.sec-1-home-1 {
  background-image: linear-gradient(
    100deg,
    #ece9fb 0%,
    #e9eff8 38%,
    #eef6de 72%,
    rgba(238, 246, 222, 0) 95%
  ) !important;
}
[data-bs-theme="dark"] .sec-1-home-1 {
  background-image: linear-gradient(
    100deg,
    #2a1f5e 0%,
    #201a48 38%,
    #16283a 72%,
    rgba(22, 40, 58, 0) 95%
  ) !important;
}

/* ---------- desfile de produtos ----------
   Animacao CSS no lugar do plugin carouselTicker. A lista vem duplicada do
   servidor, entao andar metade dela (mais meio gap do gap-3) fecha o laco sem
   emenda. A duracao vem do main.js, para a velocidade nao depender da largura. */
.carouselTicker {
  overflow: hidden;
}
.carouselTicker__list {
  width: max-content;
  animation: desfile var(--desfile-duracao, 150s) linear infinite;
}
.carouselTicker:hover .carouselTicker__list {
  animation-play-state: paused;
}
.carouselTicker__item {
  flex: 0 0 auto;
}
@keyframes desfile {
  to {
    transform: translateX(calc(-50% - 0.5rem));
  }
}
@media (prefers-reduced-motion: reduce) {
  .carouselTicker__list {
    animation: none;
  }
}

/* ---------- pagina de atualizacoes ---------- */
.linha-atualizacao {
  padding: 1.1rem 0;
  border-bottom: 1px solid #e5e5ef;
}
.linha-atualizacao:last-child {
  border-bottom: 0;
}
.linha-atualizacao .item-titulo {
  font-weight: 600;
  color: #191248;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.linha-atualizacao .item-titulo:hover {
  color: #384aa0;
}

/* ---------- mega-menu de produtos ----------
   O .sub-mega-menu (main.css) da a caixa em largura total e o hover; aqui
   fica so o miolo: a grade de produtos e a faixa de links no rodape. */
.grade-produtos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem 1.5rem;
}
.item-produto {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  transition: background 0.15s;
}
.item-produto:hover {
  background: #f4f4f9;
}
.item-produto img {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  object-fit: cover;
  flex: 0 0 38px;
  background: #f0f0f6;
}
.item-produto > span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.item-produto .nome {
  font-weight: 600;
  font-size: 0.9rem;
  color: #191248;
}

.faixa-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid #ececf4;
}
.faixa-menu a {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  transition: background 0.15s;
}
.faixa-menu a:hover {
  background: #f4f4f9;
}
.faixa-menu .nome {
  font-weight: 600;
  font-size: 0.9rem;
  color: #191248;
}

@media (max-width: 1200px) {
  .grade-produtos { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- bloco de notas de versao na home ---------- */
.lista-notas {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lista-notas li + li {
  margin-top: 0.55rem;
}
.lista-notas a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lista-notas a:hover {
  color: #d3f482;
}

/* ---------- cards de produto na home ----------
   A .thumbnail do template tem 104px fixos. Dividindo a linha com o bloco de
   notas, sobrava pouco para o nome e "Aplicativo Porter" quebrava em duas
   linhas. Encolhe so a miniatura, o card continua o do template. */
.category-card.style-1 {
  /* o template reserva 55px de padding a direita, espaco morto aqui */
  padding-right: 0;
}
.category-card.style-1 .thumbnail {
  flex: 0 0 80px;
  min-width: 0;
}
.category-card.style-1 .thumbnail img {
  /* sem isto a imagem de 104px estoura o flex-basis de 80px */
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.category-card.style-1 .post-content {
  min-width: 0;
  padding-right: 0.9rem;
}

/* As tres linhas de cards esticam para fechar na mesma altura do bloco de
   notas ao lado, em vez de sobrar espaco embaixo. */
.linhas-produtos {
  /* o .row do Bootstrap sobe com margin-top negativa igual ao gutter, entao
     height:100% terminaria um gutter antes do fim da coluna */
  height: calc(100% + var(--bs-gutter-y));
  /* stretch faz as tres linhas dividirem a altura: os cards crescem,
     em vez de abrir buraco entre as linhas */
  align-content: stretch;
}
.linhas-produtos > [class*='col-'] {
  display: flex;
}
.linhas-produtos .category-card {
  width: 100%;
}

/* ---------- mais acessados ----------
   Cards baixos (so o titulo) em grade de tres colunas. */
.grade-destaques {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 991px) {
  .grade-destaques { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .grade-destaques { grid-template-columns: 1fr; }
}
.card-destaque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: #d3f482;
  border: 1px solid #d3f482;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  transition: background 0.15s, box-shadow 0.15s;
}
.card-destaque:hover {
  background: #c7ec6a;
  border-color: #c7ec6a;
  box-shadow: 0 6px 18px rgba(25, 18, 72, 0.1);
}
.card-destaque .titulo {
  font-weight: 600;
  font-size: 0.93rem;
  line-height: 1.35;
  color: #191248;
}
.card-destaque .seta {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(25, 18, 72, 0.1);
  color: #191248;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-destaque:hover .seta {
  background: #191248;
  color: #d3f482;
}

/* ---------- rodape ----------
   Navy da identidade, com os links em branco. Substitui o .section-footer-4
   do template, que era claro. */
.rodape-ajuda {
  background: #191248;
  color: rgba(255, 255, 255, 0.72);
  padding: 4rem 0 3rem;
  margin-top: 3rem;
}
.rodape-ajuda h6 {
  color: #fff;
  font-size: 0.95rem;
}
.rodape-ajuda p {
  color: rgba(255, 255, 255, 0.72);
}
.rodape-ajuda a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  transition: color 0.15s;
}
.rodape-ajuda a:hover {
  color: #d3f482;
}
.rodape-ajuda .logo-porter {
  max-width: 160px;
}
.rodape-ajuda .opacidade-baixa {
  color: rgba(255, 255, 255, 0.45);
}
.rodape-ajuda .icone-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}
.rodape-ajuda .icone-social:hover {
  background: #d3f482;
  border-color: #d3f482;
  color: #191248;
}

/* ---------- pagina do produto ----------
   Lateral fixa com filtro e temas, conteudo a direita. */
.pagina-produto {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2.5rem;
  align-items: start;
}
.lateral-produto {
  position: sticky;
  top: 100px;
}
.caixa-lateral {
  background: #fff;
  border: 1px solid #ececf4;
  border-radius: 16px;
  padding: 1rem;
}
.filtro-lateral {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid #e5e5ef;
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.9rem;
  color: #6a6a84;
}
.filtro-lateral:focus-within {
  border-color: #384aa0;
}
.filtro-lateral input {
  border: 0;
  flex: 1;
  font-size: 0.9rem;
  color: #191248;
  background: transparent;
  min-width: 0;
}
.filtro-lateral input:focus {
  outline: none;
}

.temas-lateral {
  display: flex;
  flex-direction: column;
}
.tema-lateral {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: 9px;
  font-size: 0.9rem;
  color: #4a4a63;
  transition: background 0.15s, color 0.15s;
}
.tema-lateral:hover {
  background: #f4f4f9;
  color: #191248;
}
.tema-lateral.ativo {
  background: #191248;
  color: #fff;
  font-weight: 600;
}
.tema-lateral .conta {
  font-size: 0.78rem;
  background: #f0f0f6;
  color: #6a6a84;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  flex: 0 0 auto;
}
.tema-lateral.ativo .conta {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* topicos em destaque do produto */
.bloco-destaques {
  margin-bottom: 2.5rem;
}
.grade-topicos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}
.topico-destaque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: linear-gradient(135deg, #eef1fb 0%, #f7f8fd 100%);
  border: 1px solid #e3e6f5;
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.topico-destaque:hover {
  border-color: #384aa0;
  box-shadow: 0 6px 18px rgba(25, 18, 72, 0.08);
}
.topico-destaque .titulo {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #191248;
}
.topico-destaque .seta {
  flex: 0 0 auto;
  color: #384aa0;
}

@media (max-width: 991px) {
  .pagina-produto { grid-template-columns: 1fr; gap: 1.5rem; }
  .lateral-produto { position: static; }
  .grade-topicos { grid-template-columns: 1fr; }
}

/* A pagina do produto fica no branco: a lateral e os cards ja tem borda
   propria, entao o cinza do template so sujava o fundo. */
.fundo-branco {
  background: #fff;
}

/* ---------- cabecalho da pagina do produto ---------- */
.cabecalho-produto {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.thumb-produto {
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  border-radius: 18px;
  object-fit: cover;
  background: #f0f0f6;
  border: 1px solid #ececf4;
}
@media (max-width: 575px) {
  .cabecalho-produto { gap: 1rem; }
  .thumb-produto { width: 64px; height: 64px; flex-basis: 64px; border-radius: 14px; }
}

/* ---------- titulos da pagina do produto ----------
   O ds-5 do template e calibrado para hero; aqui a pagina e de navegacao,
   entao os titulos ficam menores e mais proximos do conteudo. */
.cabecalho-produto h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.35rem;
}
.cabecalho-produto p {
  font-size: 1rem;
}
.cabecalho-produto {
  margin-bottom: 2.2rem !important;
  gap: 1.1rem;
}
.thumb-produto {
  width: 72px;
  height: 72px;
  flex-basis: 72px;
  border-radius: 15px;
}
.conteudo-produto h2 {
  font-size: 1.15rem;
  margin-bottom: 1.25rem !important;
}
.bloco-destaques {
  margin-bottom: 3rem;
}
.conteudo-produto #contagemTopicos {
  margin-bottom: 0.8rem !important;
}
.topico-destaque {
  padding: 1.25rem 1.4rem;
}
.topico-destaque .titulo {
  font-size: 0.9rem;
}

/* ---------- lupa da navbar e modal de busca ---------- */
.btn-lupa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #e5e5ef;
  background: #fff;
  color: #191248;
  transition: background 0.15s, border-color 0.15s;
}
.btn-lupa:hover {
  background: #191248;
  border-color: #191248;
  color: #fff;
}

.modal-busca {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 1.5rem 0;
}
.modal-busca[hidden] {
  display: none;
}
.modal-busca .fundo-modal {
  position: absolute;
  inset: 0;
  background: rgba(12, 8, 40, 0.55);
  backdrop-filter: blur(3px);
}
.modal-busca .painel-busca {
  position: relative;
  width: 100%;
  max-width: 760px;
}
.modal-busca .caixa-busca {
  margin: 0;
  max-width: none;
}
.fechar-modal {
  flex: 0 0 auto;
  border: 1px solid #e0e0ea;
  background: #f4f4f9;
  color: #6a6a84;
  border-radius: 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
}
.fechar-modal:hover {
  background: #191248;
  border-color: #191248;
  color: #fff;
}

body.sem-rolagem {
  overflow: hidden;
}

/* No modal o painel e mais estreito que o hero, entao os chips quebram em
   linha em vez de rolar cortados nas pontas. */
.modal-busca .chips-ajuda {
  flex-wrap: wrap;
  overflow-x: visible;
  justify-content: flex-start;
}

/* ---------- header ----------
   Mantem o padding do template (logo perto da borda, como no Porter News) e
   so centraliza o menu no espaco que sobra entre a marca e as acoes. */
.navbar.style-1 {
  gap: 1.5rem;
  /* 30px do template ficava colado na borda em tela grande, e alinhar com o
     container de 1195px jogava o logo longe demais. Cresce com a tela ate um
     teto de 72px. */
  padding-left: clamp(1.25rem, 4vw, 4.5rem);
  padding-right: clamp(1.25rem, 4vw, 4.5rem);
}
.navbar.style-1 > .navbar-collapse {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
/* 100% em vez de 100vw: vw conta a barra de rolagem e jogava tudo 8px
     para o lado. 1171px e a largura util do container (1195 menos os padding). */
  padding-left: max(12px, calc((100% - 1171px) / 2));
  padding-right: max(12px, calc((100% - 1171px) / 2));
  gap: 1.5rem;
}
.navbar.style-1 > .navbar-collapse {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

/* ---------- video no corpo do artigo ----------
   Proporcao 16:9 sem depender da altura do iframe. */
.video-artigo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1.5rem 0;
  border-radius: 12px;
  overflow: hidden;
  background: #191248;
}
/* gravacao de tela do celular: em 16:9 viraria uma faixa fina com tarja preta */
.video-artigo--vertical {
  aspect-ratio: 9 / 16;
  max-width: 300px;
}
.video-artigo iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- faixa de busca ----------
   Separa a area de pesquisa dos resultados. Mesma navy da caixa do hero. */
.faixa-busca {
  background: #191248;
  padding: 7rem 0 2.5rem;
}
.faixa-busca h1 {
  color: #fff;
}
.faixa-busca .form-busca input[type="search"],
.faixa-busca .form-busca select {
  border-color: transparent;
}
/* o btn-dark do template sumiria no fundo escuro */
.btn-claro {
  flex: 0 0 auto;
  background: #d3f482;
  color: #191248;
  font-weight: 600;
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1.8rem;
  transition: background 0.15s;
}
.btn-claro:hover {
  background: #fff;
}

/* Titulo do resultado de busca menor: a lista e de varredura, o titulo nao
   precisa competir com o h1 da faixa. */
.resultados-busca .item-titulo {
  font-size: 1.05rem;
  line-height: 1.35;
}
.resultados-busca .artigo-item {
  padding: 0.9rem 1.1rem;
}

/* ---------- item de lista com miniatura ---------- */
.artigo-item.com-thumb {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.thumb-item {
  flex: 0 0 84px;
  width: 84px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: #f0f0f6;
  border: 1px solid #ececf4;
}
.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.corpo-item {
  flex: 1 1 auto;
  min-width: 0;
}
.corpo-item .item-titulo {
  display: block;
}

@media (max-width: 575px) {
  .thumb-item { flex-basis: 64px; width: 64px; height: 52px; }
}

/* ---------- topbar ----------
   O template deixa a topbar sem padding lateral, entao o badge NOVIDADES e a
   data encostavam na borda enquanto a navbar embaixo ja tinha respiro. Mesmo
   recuo das duas, para a coluna bater. */
.topbar {
  padding-left: clamp(1.25rem, 4vw, 4.5rem);
  padding-right: clamp(1.25rem, 4vw, 4.5rem);
}

/* O .list-unstyled do template so tira o marcador da lista; o padding-left de
   40px que o navegador aplica continua, e jogava o badge para dentro. */
.topbar .list-unstyled {
  padding-left: 0;
}

/* ---------- pagina do artigo ----------
   Hierarquia em tres degraus claros: titulo do artigo, secao (##) e
   subsecao (###). Antes o h1 do template (48px) competia com os ## do corpo. */
.pagina-artigo .card-info {
  margin-bottom: 1.25rem !important;
}
.pagina-artigo h1 {
  font-size: 2.1rem;
  line-height: 1.25;
  color: #191248;
  margin: 0 0 0.8rem;
}
.pagina-artigo .resumo-artigo {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #6a6a84;
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #ececf4;
}
.artigo-corpo h2 {
  font-size: 1.3rem;
  font-weight: 600;
  /* cada secao abre com uma linha fina e respiro: o artigo le em blocos */
  margin: 2.75rem 0 1.1rem;
  padding-top: 2.25rem;
  border-top: 1px solid #ececf4;
}
.artigo-corpo h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.8rem 0 0.6rem;
}
/* o primeiro titulo do corpo nao precisa do respiro de cima */
.artigo-corpo > h2:first-child,
.artigo-corpo > h3:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.artigo-corpo p {
  margin: 0 0 1rem;
}
.artigo-corpo ol,
.artigo-corpo ul {
  margin: 1.2rem 0 1.8rem;
  padding-left: 1.5rem;
}
.artigo-corpo li {
  margin-bottom: 1.05rem;
  padding-left: 0.25rem;
  line-height: 1.65;
}
.artigo-corpo li:last-child {
  margin-bottom: 0;
}
/* paragrafo que apresenta a lista nao pode encostar nela */
.artigo-corpo p + ol,
.artigo-corpo p + ul {
  margin-top: 0.9rem;
}
.artigo-corpo li::marker {
  color: #384aa0;
  font-weight: 600;
}

/* o template pinta negrito em 700 e quase preto: pesado demais no meio do
   texto cinza. 600 em navy marca o que tocar sem gritar */
.artigo-corpo strong,
.artigo-corpo b {
  font-weight: 600;
  color: #191248;
}

/* ---------- passo a passo ----------
   Numero em circulo vazado, com respiro entre um passo e outro. O print fica
   dentro do proprio passo (site.js junta as listas que o markdown quebra em
   volta da imagem), alinhado com o texto. */
.artigo-corpo ol {
  list-style: none;
  padding-left: 0;
  counter-reset: passo var(--inicio, 0);
}
.artigo-corpo ol > li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 1.9rem 3rem;
  margin: 0;
}
.artigo-corpo ol > li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: -0.05rem;
  width: 1.85rem;
  height: 1.85rem;
  box-sizing: border-box;
  border: 1.5px solid #384aa0;
  border-radius: 50%;
  color: #384aa0;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: calc(1.85rem - 3px);
  text-align: center;
}
.artigo-corpo ol > li:last-child {
  padding-bottom: 0;
}
.artigo-corpo li img {
  margin: 1rem 0 0.25rem;
  max-height: 440px;
  box-shadow: 0 10px 28px rgba(25, 18, 72, 0.08);
}
/* passo com print: no celular a imagem vem embaixo do texto. Da largura de
   tablet para cima o print fica a esquerda, numa coluna estreita, e o texto a
   direita */
@media (min-width: 768px) {
  .artigo-corpo .passo-com-imagem {
    display: grid;
    /* fit-content segura a coluna do print: se ele nao carregar, o texto
       alternativo nao espreme o passo */
    grid-template-columns: fit-content(220px) minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
  }
  .artigo-corpo .passo-com-imagem img {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    max-height: 420px;
  }
  .artigo-corpo .passo-com-imagem .passo-texto {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ---------- perguntas frequentes ---------- */
.faq {
  margin: 3.5rem 0 2rem;
}
/* precisa da mesma especificidade de .artigo-corpo h2, senao a margem
   generica dos titulos do corpo vence */
.artigo-corpo .faq-titulo {
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: none;
  margin: 0 0 1.4rem;
  color: #191248;
}
.faq-item {
  border: 1px solid #ececf4;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 3rem 1.05rem 1.35rem;
  font-weight: 600;
  color: #191248;
  position: relative;
  transition: background 0.15s;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  color: #384aa0;
}
/* seta que gira ao abrir */
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid #384aa0;
  border-bottom: 2px solid #384aa0;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s;
}
.faq-item[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}
.faq-resposta {
  padding: 0.4rem 1.35rem 1.25rem;
  border-top: 1px solid #f0f0f6;
}
.faq-resposta p:last-child {
  margin-bottom: 0;
}


/* durante o arrasto o texto nao pode ser selecionado */
.chips-ajuda.arrastando,
.chips-ajuda.arrastando * {
  user-select: none;
}

/* O template desenha um risco vertical depois do logo (.navbar-brand::after).
   No Porter News o menu vem logo em seguida e o risco separa as duas coisas;
   aqui o menu e centralizado, entao o risco fecha uma caixa vazia enorme e
   fazia o logo parecer desalinhado. */
.navbar .navbar-brand::after {
  display: none;
}
.navbar.style-1 .navbar-brand {
  padding-right: 0;
}

/* Carrossel da home: o card-1 do template tem imagem de 420px, alta demais
   quando cabem quatro por vez. Aqui a capa fica mais baixa que larga, o card
   inteiro encurta e sobra espaco lateral para o proximo aparecer. */
.swiper-card-hero .article.card-1 .card-img-top {
  height: 260px;
}
/* O card-body cobre a capa a partir de 160px, entao o meio do que se ve fica
   em 80 e nao em 130. A capa e desenhada com o icone no centro, e por isso ele
   aparecia baixo, encostado no bloco branco. A imagem sobe 50px e ganha altura
   equivalente para nao deixar falha embaixo. */
.swiper-card-hero .article.card-1 .card-img-top img {
  /* o !important compete com o .h-100 do template, que tambem usa !important e
     travaria a imagem na altura do container, deixando falha na base */
  height: 360px !important;
  margin-top: -100px;
}

/* O card-body sobe por cima da capa, entao um titulo de tres linhas empurra o
   resumo para fora da caixa branca. Duas linhas no titulo e uma no resumo
   mantem todos os cards do mesmo tamanho. */
/* O padding de 40px do card-body e calibrado para o card grande do template.
   Com quatro por vez, o slide tem menos de 300px e sobravam 159px de texto: o
   titulo quebrava em tres linhas e o resumo saia truncado no meio. */
.swiper-card-hero .article.card-1 .card-body {
  padding: 24px 22px;
}
.swiper-card-hero .article.card-1 .card-title {
  /* 31px do template so cabe em titulo curto */
  font-size: 1.25rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* nome de produto e tema nao devem quebrar no meio: "Administrativo
   (sindico)" virava duas linhas dentro da propria pilula */
.swiper-card-hero .article.card-1 .card-info .badge {
  white-space: nowrap;
}
.swiper-card-hero .article.card-1 .card-text {
  /* tres linhas cabem na folga que sobra no card-body e evitam cortar o resumo
     no meio de quase todo artigo */
  -webkit-line-clamp: 3;
  /* a seta fica no canto inferior direito do card-body: sem esta folga a
     segunda linha do resumo passa por baixo dela */
  padding-right: 2.4rem;
}

/* ---------- hero da pagina do artigo ----------
   A capa gerada entra como fundo e um veu da propria cor de base a segura
   atras do texto, entao o contraste continua o mesmo em qualquer cor da
   paleta. O ::before e o veu; o ::after e um degrade para o branco da pagina,
   que costura o hero com o corpo do artigo. */
.hero-artigo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(140deg, var(--capa-de), var(--capa-para));
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.hero-artigo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--capa-imagem);
  background-size: cover;
  /* topo da capa: o icone dela fica no centro e agora ele aparece
     desenhado por cima, entao mostrar os dois seria repeticao */
  background-position: center top;
  opacity: 0.3;
}
.hero-artigo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--capa-de));
  opacity: 0.55;
}
.hero-artigo-conteudo {
  max-width: 780px;
  margin: 0 auto;
}
.hero-artigo-icone {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 1.5rem;
}
.hero-artigo h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 1.25rem 0 0;
}
.hero-artigo .resumo-artigo {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 1rem auto 0;
  max-width: 620px;
}
.hero-artigo.em-escuro h1 {
  color: #fff;
}
.hero-artigo.em-escuro .resumo-artigo {
  color: rgba(255, 255, 255, 0.82);
}
.hero-artigo.em-claro h1 {
  color: #191248;
}
.hero-artigo.em-claro .resumo-artigo {
  color: rgba(25, 18, 72, 0.72);
}

/* O corpo comeca logo abaixo do hero, entao a borda que separava titulo de
   texto nao faz mais sentido: quem separa agora e a propria faixa colorida. */
.pagina-artigo .artigo-corpo > :first-child {
  margin-top: 0;
}

/* ---------- assistente ----------
   Botao no canto e painel de conversa. Cores da identidade: navy no painel,
   verde-lima no botao, que e a cor de acao do template. */
#ajuda-ia {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 3500;
}
#ajuda-ia .ia-botao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 54px;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 999px;
  background: #191248;
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(25, 18, 72, 0.32);
  bottom: 0;
  transition: bottom 0.18s ease;
}
#ajuda-ia .ia-botao svg {
  color: #d3f482;
  flex: none;
}
#ajuda-ia.aberto .ia-botao {
  display: none;
}
/* Nada de transform aqui: ele cria contexto de empilhamento e o anel, que
   depende de z-index negativo para ficar atras, passaria a cobrir o botao.
   O bottom faz o mesmo movimento sem esse efeito colateral. */
#ajuda-ia .ia-botao:hover {
  bottom: 2px;
}
#ajuda-ia.pensando .ia-botao {
  animation: ia-pulso 1.2s ease-in-out infinite;
}
@keyframes ia-pulso {
  50% {
    box-shadow: 0 10px 28px rgba(211, 244, 130, 0.75);
  }
}

/* O display:flex da classe vence o [hidden] da folha do navegador, entao o
   painel nascia aberto. Esta regra devolve o comando ao atributo. */
/* O display:flex da classe vence o [hidden] da folha do navegador, entao o
   painel nascia aberto. Esta regra devolve o comando ao atributo. */
#ajuda-ia .ia-painel[hidden] {
  display: none;
}
#ajuda-ia .ia-painel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(400px, calc(100vw - 40px));
  max-height: min(600px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e7e7f2;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(25, 18, 72, 0.26);
}

/* Topo em navy chapado, a mesma cor do botao. */
#ajuda-ia .ia-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: #191248;
  color: #fff;
}
#ajuda-ia .ia-topo-texto {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
#ajuda-ia .ia-topo strong {
  /* o template pinta strong de navy; aqui o fundo ja e navy */
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}
#ajuda-ia .ia-topo span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.35;
}
#ajuda-ia .ia-fechar {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
#ajuda-ia .ia-fechar:hover {
  background: rgba(255, 255, 255, 0.26);
}

#ajuda-ia .ia-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
#ajuda-ia .ia-msg {
  max-width: 88%;
  padding: 0.75rem 0.95rem;
  font-size: 0.85rem;
  line-height: 1.55;
}
#ajuda-ia .de-ia {
  align-self: flex-start;
  background: #f4f5fc;
  color: #2b2b3d;
  border-radius: 16px 16px 16px 4px;
}
#ajuda-ia .de-usuario {
  align-self: flex-end;
  background: #191248;
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}
#ajuda-ia .ia-msg a {
  color: #1e4fb8;
  font-weight: 600;
  text-decoration: underline;
}
#ajuda-ia .de-usuario a {
  color: #d3f482;
}
#ajuda-ia .ia-msg strong {
  font-weight: 600;
  color: #191248;
}
/* o p do template impoe cor cinza e fonte maior: aqui segue o balao (branco
   no da pessoa, escuro no da IA) */
#ajuda-ia .ia-msg p {
  margin: 0 0 0.55rem;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
#ajuda-ia .ia-msg p:last-child {
  margin-bottom: 0;
}
#ajuda-ia .ia-passo {
  padding-left: 1.15em;
  text-indent: -1.15em;
}
#ajuda-ia .de-usuario strong {
  color: #fff;
}
#ajuda-ia .ia-pensando {
  color: #8a8aa3;
}

/* Atalhos da primeira tela: mostram o tipo de pergunta que funciona aqui. */
#ajuda-ia .ia-atalhos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.15rem;
}
#ajuda-ia .ia-atalho {
  border: 1px solid #dfe2f3;
  border-radius: 999px;
  background: #fff;
  color: #1e4fb8;
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
#ajuda-ia .ia-atalho:hover {
  background: #f2f5ff;
  border-color: #b7c9f7;
}

#ajuda-ia .ia-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 0.85rem 0.5rem;
  border-top: 1px solid #f0f0f7;
}
#ajuda-ia .ia-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid #e0e0ee;
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
}
#ajuda-ia .ia-form input:focus {
  outline: 0;
  border-color: #b7c9f7;
  box-shadow: 0 0 0 3px rgba(183, 201, 247, 0.45);
}
#ajuda-ia .ia-form button {
  flex: none;
  border: 0;
  border-radius: 12px;
  width: 46px;
  background: #191248;
  color: #d3f482;
  cursor: pointer;
  transition: background 0.15s ease;
}
#ajuda-ia .ia-form button:hover:not(:disabled) {
  background: #2a2270;
}
#ajuda-ia .ia-form button:disabled {
  opacity: 0.45;
  cursor: default;
}

#ajuda-ia .ia-rodape {
  margin: 0;
  padding: 0 1rem 0.85rem;
  font-size: 0.72rem;
  color: #9a9ab0;
  text-align: center;
}

@media (max-width: 575px) {
  #ajuda-ia {
    right: 16px;
    bottom: 16px;
  }
}

/* Moldura girando no botao do assistente, do jeito que virou convencao para
   marcar recurso de IA. O anel e um pseudo-elemento 2px maior que o botao, com
   um degrade conico das cores da paleta; o que gira e o angulo do degrade, e
   nao o elemento, entao nada sai do lugar nem exige recorte. */
@property --giro-ia {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
/* sem isolation: com ela o botao vira contexto proprio e o anel, mesmo com
   z-index negativo, passa a ser pintado por cima do fundo navy */
#ajuda-ia .ia-botao {
  position: relative;
}
#ajuda-ia .ia-botao::before,
#ajuda-ia .ia-botao::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(
    from var(--giro-ia),
    #d3f482 0deg,
    #7fdbff 70deg,
    #0091f5 140deg,
    #b7c9f7 210deg,
    #d3f482 300deg,
    #d3f482 360deg
  );
  animation: ia-girar 3s linear infinite;
}
/* o mesmo anel, borrado e por tras: e o brilho que faz o botao saltar do
   fundo claro sem precisar de moldura grossa */
#ajuda-ia .ia-botao::after {
  z-index: -2;
  filter: blur(11px);
  opacity: 0.75;
}
@keyframes ia-girar {
  to {
    --giro-ia: 360deg;
  }
}
/* Navegador sem @property nao anima o angulo e fica com a moldura parada, que
   ja resolve. Aqui a parada e deliberada, para quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  #ajuda-ia .ia-botao::before {
    animation: none;
  }
}

/* ---------- "este artigo ajudou?" ----------
   Fica no fim do artigo, fora do .artigo-corpo, entao define a propria
   tipografia em vez de herdar a do corpo. */
.avaliacao {
  margin: 3rem 0 0;
  padding: 1.4rem 1.6rem;
  border: 1px solid #ececf4;
  border-radius: 16px;
  background: #eef1fe;
}
/* o display:flex abaixo venceria o atributo hidden que o JS usa */
.avaliacao [hidden] {
  display: none !important;
}
/* rotulo so para leitor de tela: o site nao carrega os utilitarios do
   bootstrap, entao a classe e definida aqui */
.avaliacao .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.avaliacao-pergunta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
}
.avaliacao .avaliacao-titulo {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: #191248;
}
.avaliacao-botoes {
  display: flex;
  gap: 0.6rem;
}
.avaliacao-botao,
.avaliacao-enviar {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 1.2rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.avaliacao-botao {
  border: 1px solid #d8dcef;
  background: #fff;
  color: #191248;
}
.avaliacao-botao:hover {
  border-color: #384aa0;
  color: #384aa0;
}
.avaliacao-botao:focus-visible,
.avaliacao-enviar:focus-visible,
.avaliacao-chip input:focus-visible + span {
  outline: 2px solid #384aa0;
  outline-offset: 2px;
}
/* modal do Nao: <dialog> nativo, entao Esc, foco e fundo vem do navegador */
.avaliacao-modal {
  width: min(520px, calc(100% - 2rem));
  padding: 1.6rem;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(25, 18, 72, 0.25);
}
.avaliacao-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.avaliacao-modal-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.avaliacao-fechar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -0.45rem -0.45rem 0 0;
  border: 0;
  border-radius: 50%;
  background: #f4f5fc;
  color: #191248;
  cursor: pointer;
}
.avaliacao-fechar:hover {
  background: #e8eaf7;
}
.avaliacao-fechar:focus-visible {
  outline: 2px solid #384aa0;
  outline-offset: 2px;
}
.avaliacao-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0.9rem;
}
.avaliacao-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.avaliacao-chip span {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  border: 1px solid #d8dcef;
  border-radius: 999px;
  font-size: 0.85rem;
  color: #191248;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.avaliacao-chip span:hover {
  border-color: #384aa0;
}
.avaliacao-chip input:checked + span {
  background: #191248;
  border-color: #191248;
  color: #fff;
}
.avaliacao-motivos textarea {
  display: block;
  width: 100%;
  margin-bottom: 0.9rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #d8dcef;
  border-radius: 12px;
  font: inherit;
  font-size: 0.9rem;
  color: #2b2b3d;
  resize: vertical;
}
.avaliacao-motivos textarea:focus {
  outline: none;
  border-color: #384aa0;
}
.avaliacao-enviar {
  width: 100%;
  justify-content: center;
  border: 0;
  background: #191248;
  color: #fff;
}
.avaliacao-enviar:hover {
  background: #2a2270;
}
.avaliacao .avaliacao-obrigado {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #191248;
}
@media (prefers-reduced-motion: reduce) {
  .avaliacao-botao,
  .avaliacao-enviar,
  .avaliacao-chip span {
    transition: none;
  }
}
/* Carregando entre paginas (carregando.js): fundo preto e o mesmo spinner
   branco do #preloader (porter.css) */
.carregando {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
}
.carregando.ativo {
  opacity: 1;
  visibility: visible;
}
.carregando .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .carregando {
    transition: none;
  }
}