html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/*display NA CLASSE VENCE O [hidden] DO NAVEGADOR (mesma especificidade,
  quem vem depois no arquivo ganha): ISSO DEVOLVE A PRIORIDADE. Sem isto,
  esconder algo que já nasce visível (ex.: [data-menu-base] via JS) não
  funciona — só o padrão "nasce hidden, JS revela" (data-equipe-ti) escapava
  do bug por acidente.*/
[hidden] {
  display: none !important;
}

/*ENTRADA DA PAGINA: BLOCOS SOBEM COM FADE, EM SEQUENCIA*/
.entrada {
  opacity: 0;
  transform: translateY(0.9rem);
}

.entrada--visivel {
  animation: entra 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--entrada-atraso, 0s);
}

@keyframes entra {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*SORA NOS TITULOS E DESTAQUES*/
.topo__produto,
.topo__usuario-nome,
.topo__avatar,
.saudacao,
.porta__titulo,
.botao {
  font-family: "Sora", system-ui, sans-serif;
}

/* ==========================================================================
   BARRA DO TOPO
   ========================================================================== */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /*84px E A ALTURA DO CABECALHO DA BASE E DA NOVA SOLUCAO: TODAS AS TELAS
    PRECISAM BATER. O box-sizing faz a borda de baixo caber dentro.*/
  height: 84px;
  box-sizing: border-box;
  padding: 0 1.5rem;
  border-bottom: 1px solid #e5e5e5;
  background-color: #fff;
}

.topo__marca {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/*A LOGO LEVA PARA O INICIO. COMO FLEX, O <a> NAO SOBRA ESPACO EMBAIXO DA IMAGEM*/
.topo__logo-link {
  display: flex;
  align-items: center;
}

.topo__logo {
  width: 8.25rem;
  height: auto;
}

.topo__produto {
  font-size: 0.9375rem;
  font-weight: 400;
  color: #1a1a1a;
}

/*RISCO VERTICAL ENTRE OS BLOCOS*/
.topo__divisor {
  width: 1px;
  height: 1.5rem;
  background-color: #e5e5e5;
}

.topo__acoes {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/*PERFIL: O MENU SE ANCORA NO BOTAO*/
.topo__perfil {
  position: relative;
}

/*USUARIO*/
.topo__usuario {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem;
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.topo__usuario:hover {
  background-color: #f5f5f5;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(26, 26, 26, 0.08);
}

.topo__usuario:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

.topo__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 4px;
  background-color: #e8590c;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #fff;
  overflow: hidden;
}

/*FOTO DE PERFIL: PREENCHE O QUADRADO SEM DISTORCER*/
.topo__avatar-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topo__usuario-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}

.topo__usuario-nome {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #1a1a1a;
}

.topo__usuario-setor {
  font-size: 0.6875rem;
  color: #e8590c;
}

.topo__usuario-seta {
  color: #8a8a8a;
}

/*SAIR*/
.topo__sair {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: 4px;
  background: none;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #1a1a1a;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.topo__sair:hover {
  background-color: #f5f5f5;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(26, 26, 26, 0.08);
}

.topo__sair:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

/* ==========================================================================
   HOME
   ========================================================================== */

.conteudo {
  flex: 1;
}

/*SAUDACAO*/
.saudacao {
  max-width: 76rem;
  margin: 0 auto 1.75rem;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 400;
  color: #fff;
}

/*FAIXA CLARA QUE ABRIGA AS DUAS PORTAS*/
.destaque {
  padding: 90px 1.5rem;
  border-bottom: 1px solid #f7ddd0;
  background: radial-gradient(
    circle at top left,
    #5e141d 0%,
    #dd5b12 100%
  );
  background-size: 250% 500%;
  animation: destaque-fundo-respira 20s ease-in-out infinite;

  color: #fff;
}

/*FUNDO DA FAIXA: A FAIXA E MUITO MAIS LARGA QUE ALTA, ENTAO O
  BACKGROUND-SIZE E MAIOR NO EIXO VERTICAL PARA O MOVIMENTO SER VISIVEL.*/
@keyframes destaque-fundo-respira {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

.portas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: 76rem;
  margin: 0 auto;
}

.porta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.75rem 2.25rem;
  border: 1px solid #e5e5e5;
  border-radius: 15px;
  background-color: #fff;
}

/*A PORTA DA BASE VEM PRIMEIRO E LEVA A BORDA DA MARCA*/
.porta--base {
  border-color: #f0b394;
  border-radius: 15px;

}

.porta__icone {
  display: flex;
  padding: 0.875rem;
  border-radius: 4px;
  color: #fff;
}

.porta__icone--laranja {
  background-color: #e8590c;
}

.porta__icone--escuro {
  background-color: #e8590c;
}

.porta__rotulo {
  margin: 1rem 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8a8a;
}

.porta__rotulo--laranja {
  color: #e8590c;
}

.porta__titulo {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 400;
  color: #1a1a1a;
}

.porta__descricao {
  margin: 0;
  max-width: 26rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #000;
}

/*CONTAGEM DE ARTIGOS POR SETOR*/
.setores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.5rem;
}

.setor {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6875rem;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1a1a;
}

.setor svg {
  color: #8a8a8a;
}

.setor b {
  font-weight: 400;
  color: #8a8a8a;
}

/*LINHAS DE APOIO DA PORTA DE CHAMADOS*/
.porta__metas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1rem 0 1.5rem;
}

.porta__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  color: #000;
}

/*BOTAO IDENTICO AO DO LOGIN: MESMAS CORES, MESMA TRANSICAO, MESMO BRILHO.
  SO O margin-top: auto E DAQUI, PARA COLAR NA BASE DO CARTAO.*/
.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: auto;
  padding: 0.875rem 1.375rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background-color: #dd5b12;
  font-size: 0.875rem;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/*BRILHO QUE DESLIZA NO HOVER*/
.botao::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
}

.botao:hover::before {
  animation: botao-brilho 0.7s ease;
}

@keyframes botao-brilho {
  from { left: -60%; }
  to { left: 130%; }
}

.botao:hover {
  background-color: #c24f00;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(221, 91, 18, 0.32);
}

.botao:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 6px rgba(221, 91, 18, 0.28);
}

.botao:focus-visible {
  outline: 2px solid #14181f;
  outline-offset: 2px;
}

/*CADASTRO PENDENTE: cinza apagado, sem brilho nem hover — o link perde o
  href (main.js), entao mesmo clicando nao navega. A cor avisa antes do
  clique, sem precisar de tentativa e erro.*/
.botao--desativado {
  background-color: #d4d4d8;
  color: #71717a;
  cursor: not-allowed;
}

.botao--desativado:hover {
  background-color: #d4d4d8;
  transform: none;
  box-shadow: none;
}

.botao--desativado::before,
.botao--desativado:hover::before {
  content: none;
}

/*DUAS COLUNAS DE BAIXO*/
.colunas {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2.5rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 2.75rem 1.5rem 3.5rem;
}

/*AS DUAS COLUNAS DE BAIXO SAO PAINEIS, NAO PRECISAM DE RISCO ENTRE ELAS*/
.coluna {
  padding: 1.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(26, 26, 26, 0.06);
}

.secao__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.secao__titulo {
  margin: 0;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #1a1a1a;
}

.secao__resumo {
  display: block;
  margin-top: 0.1875rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #8a8a8a;
}

.secao__link {
  position: relative;
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #c24f00;
  text-decoration: none;
  transition: color 0.2s ease;
}

/*UNDERLINE QUE CRESCE DA ESQUERDA PARA A DIREITA*/
.secao__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.secao__link:hover {
  color: #c94a06;
}

.secao__link:hover::after {
  transform: scaleX(1);
}

/*CADASTRO PENDENTE: mesmo cinza apagado do botão sólido, adaptado pro
  link de texto — sem sublinhado animado, sem cor de hover.*/
.secao__link.botao--desativado {
  background-color: transparent;
  color: #a1a1aa;
}

.secao__link.botao--desativado::after {
  content: none;
}

/*DESTAQUES DA BASE*/
.artigos {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.artigo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0.25rem;
  border-bottom: 1px solid #ececec;
  text-decoration: none;
  transition: padding-left 0.2s ease;
}

.artigos li:last-child .artigo {
  border-bottom: 0;
}

.artigo:hover {
  padding-left: 0.625rem;
}

.artigo:active {
  opacity: 0.7;
}

.artigo__titulo {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  color: #1a1a1a;
  /*Uma linha só, com reticências: o corte no JS (truncarTitulo) já limita
    o texto, mas isto segura qualquer sobra e evita a linha esticar em
    telas estreitas ou fontes maiores.*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*O SETOR E O DESTAQUE DA LINHA: VEM DO PERFIL DE QUEM ESTA LOGADO*/
.artigo__setor {
  flex-shrink: 0;
  padding-top: 0.0625rem;
  font-size: 0.75rem;
  color: #a8794f;
}

.artigos__carregando,
.artigos__vazio {
  padding: 0.875rem 0.25rem;
  font-size: 0.875rem;
  color: #a1a1aa;
}
/*TABELA DE CHAMADOS*/
.tabela {
  width: 100%;
  border-collapse: collapse;
}

.tabela th {
  padding: 0 1rem 0.75rem 1rem;
  border-bottom: 1px solid #e0e0e0;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  color: #8a8a8a;
  white-space: nowrap;
}

.tabela th:nth-child(2) {
  width: 100%;
}

.tabela td {
  padding: 1rem 1rem 1rem 0;
  border-bottom: 1px solid #ebebeb;
  font-size: 0.9375rem;
  color: #1a1a1a;
}

.tabela tbody tr:last-child td {
  border-bottom: 0;
}

/*CADA LINHA E MARCADA PELO STATUS COM UM TRACO A ESQUERDA, NAO UM CHIP*/
/*A LINHA INTEIRA ABRE O CHAMADO (ver montarLinha em index.js): o cursor
  precisa dizer isso em qualquer celula, nao so no assunto.*/
.tabela tbody tr {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tabela tbody tr:hover {
  background-color: #faf7f5;
}

.tabela tbody tr td:first-child {
  position: relative;
  padding-left: 1rem;
}

.tabela tbody tr td:first-child::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background-color: transparent;
  transition: width 0.2s ease;
}

.tabela tbody tr:hover td:first-child::before {
  width: 4px;
}

.tabela tbody tr[data-status="aberto"] td:first-child::before {
  background-color: #2c5c96;
}

.tabela tbody tr[data-status="andamento"] td:first-child::before {
  background-color: #d4a017;
}

.tabela tbody tr[data-status="aguardando"] td:first-child::before {
  background-color: #d64545;
}

.tabela tbody tr[data-status="fechado"] td:first-child::before {
  background-color: #8a8a8a;
}

.tabela__numero {
  font-weight: 400;
  color: #8a8a8a;
  white-space: nowrap;
}

.tabela__link {
  color: #1a1a1a;
  text-decoration: none;
  transition: color 0.2s ease;
}

.tabela__link:hover {
  color: #e8590c;
}

.tabela__data {
  white-space: nowrap;
  color: #8a8a8a;
}

.tabela__carregando,
.tabela__vazio {
  padding: 1.25rem 0;
  text-align: center;
  color: #a1a1aa;
}

/*STATUS: TEXTO SIMPLES COM UM PONTO DA COR CORRESPONDENTE*/
.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  white-space: nowrap;
}

.selo::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: currentColor;
}

.selo--aberto {
  color: #2c5c96;
}

.selo--andamento {
  color: #a37a0a;
}

.selo--aguardando {
  color: #d64545;
}

.selo--fechado {
  color: #8a8a8a;
}

/* ==========================================================================
   EQUIPE DE TI
   ========================================================================== */

.equipe {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1rem 1.5rem 4rem;
}

.equipe__cabecalho {
  margin-bottom: 2rem;
  text-align: center;
}

.equipe__titulo {
  margin: 0 0 0.375rem;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1.375rem;
  font-weight: 600;
  color: #1a1a1a;
}

.equipe__subtitulo {
  margin: 0;
  font-size: 0.9375rem;
  color: #8a8a8a;
}

.equipe__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 14rem));
  justify-content: center;
  align-items: stretch;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*SEGUNDA LINHA (3 PESSOAS): LISTA PROPRIA COM SO 3 COLUNAS, CENTRALIZADA
  DE FORMA INDEPENDENTE — SO ASSIM O CENTRO DELA BATE COM O CENTRO DA
  LINHA DE 4, O QUE grid-column NUMA GRADE UNICA NAO CONSEGUE FAZER.*/
.equipe__lista--linha2 {
  grid-template-columns: repeat(3, minmax(0, 14rem));
  margin-top: 1.25rem;
}

/*CARD DE PESSOA: SUPERFICIE PROPRIA, BORDA FINA E SOMBRA DISCRETA QUE
  GANHA PROFUNDIDADE NO HOVER. E UMA DIV, NAO UM LINK — TEM DUAS AREAS
  CLICAVEIS DENTRO (ABRIR E-MAIL E COPIAR E-MAIL).*/
.equipe__pessoa {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  padding: 1.75rem 1.25rem 1.25rem;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.equipe__pessoa:hover {
  border-color: #f0c3a3;
  box-shadow: 0 8px 20px rgba(26, 26, 26, 0.09);
  transform: translateY(-2px);
}

.equipe__pessoa:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(26, 26, 26, 0.07);
}

/*AREA CLICAVEL 1: FOTO, NOME E CARGO — ABRE O E-MAIL*/
.equipe__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  width: 100%;
  text-align: center;
  text-decoration: none;
}

.equipe__foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 0.875rem;
  border-radius: 50%;
  background-color: #f0dcce;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: #a8794f;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.06);
}

/*INICIAIS SO APARECEM SE A FOTO NAO CARREGAR (SEM SRC VALIDO AINDA, OU ERRO)*/
.equipe__foto::before {
  content: attr(data-iniciais);
}

.equipe__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*SEM FOTO AINDA: O PROPRIO HTML ESCONDE A IMAGEM QUEBRADA (onerror) E AS
  INICIAIS DO ::before FICAM VISIVEIS POR BAIXO.*/
.equipe__foto img[hidden] {
  display: none;
}

.equipe__nome {
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1a1a1a;
  transition: color 0.2s ease;
}

.equipe__pessoa:hover .equipe__nome {
  color: #c24f00;
}

/*ALTURA RESERVADA PARA DUAS LINHAS: TODOS OS CARDS FICAM DO MESMO
  TAMANHO, TENHA O CARGO UMA LINHA OU DUAS*/
.equipe__cargo {
  min-height: 2.375rem;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #8a8a8a;
}

.equipe__link:focus-visible {
  outline: 2px solid #14181f;
  outline-offset: 2px;
  border-radius: 8px;
}

/*AREA CLICAVEL 2: COPIAR O E-MAIL, SEPARADA DO LINK QUE ABRE O E-MAIL*/
.equipe__copiar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.625rem;
  padding: 0.25rem 0.5rem;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  color: #8a8a8a;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.equipe__copiar:hover {
  background-color: #f4f0ed;
  color: #c24f00;
}

.equipe__copiar:focus-visible {
  outline: 2px solid #14181f;
  outline-offset: 2px;
}

.equipe__email {
  font-size: 0.6875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9.5rem;
}

.equipe__copiar svg {
  flex-shrink: 0;
}

/*FEEDBACK DE "COPIADO": TROCA O ICONE POR UM CHECK POR 1.5S*/
.equipe__copiar--copiado {
  color: #2f9e44;
}

.equipe__copiar-check {
  display: none;
}

.equipe__copiar--copiado .equipe__copiar-icone {
  display: none;
}

.equipe__copiar--copiado .equipe__copiar-check {
  display: block;
  animation: equipe-copiar-check 0.3s ease;
}

@keyframes equipe-copiar-check {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

/*TELA ESTREITA: TUDO EM UMA COLUNA E A TABELA ROLA NA HORIZONTAL*/
@media (max-width: 860px) {
  .portas,
  .colunas {
    grid-template-columns: 1fr;
  }

  .coluna--chamados {
    overflow-x: auto;
  }

  .tabela {
    min-width: 32rem;
  }

  /*DUAS COLUNAS: OS CARDS TEM ESPACO PRA RESPIRAR SEM QUEBRAR TANTO O TEXTO.
    AS DUAS LISTAS (4 E 3 PESSOAS) FICAM COM A MESMA LARGURA DE COLUNA,
    ENTAO CONTINUAM ALINHADAS UMA SOB A OUTRA.*/
  .equipe__lista,
  .equipe__lista--linha2 {
    grid-template-columns: repeat(2, minmax(0, 14rem));
  }
}

/*CELULAR: O NOME E O SETOR SAEM DO TOPO, SOBRA O AVATAR*/
@media (max-width: 720px) {
  .topo {
    /*A ALTURA CONTINUA 84px NO CELULAR: SO O RECUO LATERAL DIMINUI*/
    padding: 0 1rem;
    gap: 0.75rem;
  }

  .topo__produto,
  .topo__usuario-texto,
  .topo__sair span {
    display: none;
  }

  .topo__marca .topo__divisor {
    display: none;
  }

  .topo__logo {
    width: 7rem;
  }

  .saudacao,
  .destaque,
  .colunas {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/*QUEM PEDE MENOS MOVIMENTO NAO VE NENHUMA DAS ANIMACOES*/
@media (prefers-reduced-motion: reduce) {
  .botao::before {
    animation: none;
  }

  .botao,
  .artigo,
  .tabela__link,
  .secao__link,
  .topo__usuario,
  .topo__sair,
  .equipe__pessoa {
    transition: none;
  }

  .botao:hover,
  .botao:active,
  .artigo:hover,
  .artigo:active,
  .topo__usuario:hover,
  .topo__usuario:active,
  .topo__sair:hover,
  .topo__sair:active,
  .equipe__pessoa:hover,
  .equipe__pessoa:active {
    transform: none;
  }

  .destaque {
    animation: none;
  }

  /*SEM ANIMACAO A ENTRADA NUNCA RODARIA E O CONTEUDO FICARIA INVISIVEL:
    AQUI ELE JA NASCE NO ESTADO FINAL.*/
  .entrada,
  .entrada--visivel {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/*OS ICONES SVG TRAZEM TAMANHO NO ATRIBUTO: O CSS MANDA MAIS QUE ELE*/
.porta__icone svg {
  width: 1.625rem;
  height: 1.625rem;
}

.setor svg,
.porta__meta svg {
  width: 0.9375rem;
  height: 0.9375rem;
  color: #000;
}

/*MENU DO PERFIL*/
.topo__menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 20;
  min-width: 12.5rem;
  padding: 0.375rem;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 10px 30px rgba(26, 26, 26, 0.12);
}

.topo__menu--aberto {
  display: block;
  animation: menu-abre 0.18s ease-out;
}

@keyframes menu-abre {
  from {
    opacity: 0;
    transform: translateY(-0.375rem);
  }
}

.topo__menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #1a1a1a;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.topo__menu-item svg {
  color: #8a8a8a;
  transition: color 0.2s ease;
}

.topo__menu-item:hover {
  background-color: #f5f5f5;
}

.topo__menu-item:hover svg {
  color: #dd5b12;
}

.topo__menu-divisor {
  display: block;
  height: 1px;
  margin: 0.3125rem 0.25rem;
  background-color: #ececec;
}

/*ITEM COM INTERRUPTOR (Notificações): mesma mecanica visual do menu de
  3 pontinhos do Portal (portal.css), so com as cores fixas deste
  arquivo — index.css nao usa variaveis de tema.*/
.topo__menu-item--interruptor {
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.topo__menu-item--interruptor span:not(.topo__menu-interruptor) {
  flex: 1;
}

.topo__menu-interruptor {
  position: relative;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1rem;
  border-radius: 999px;
  background-color: #e5e5e5;
  transition: background-color 0.15s ease;
}

.topo__menu-interruptor::before {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.25);
  transition: transform 0.15s ease;
}

.topo__menu-item--interruptor[aria-checked="true"] .topo__menu-interruptor {
  background-color: #dd5b12;
}

.topo__menu-item--interruptor[aria-checked="true"] .topo__menu-interruptor::before {
  transform: translateX(0.75rem);
}

/*A SETA GIRA QUANDO O MENU ESTA ABERTO*/
.topo__usuario-seta {
  transition: transform 0.2s ease;
}

.topo__usuario[aria-expanded="true"] .topo__usuario-seta {
  transform: rotate(180deg);
}

/*QUEM PEDE MENOS MOVIMENTO NAO VE A ABERTURA NEM O GIRO*/
@media (prefers-reduced-motion: reduce) {
  .topo__menu--aberto {
    animation: none;
  }

  .topo__usuario-seta,
  .topo__menu-item,
  .topo__menu-item svg {
    transition: none;
  }

  .topo__usuario[aria-expanded="true"] .topo__usuario-seta {
    transform: none;
  }
}