/* ==========================================================================
   DESIGN SYSTEM — Time LIFT
   ==========================================================================

   Este arquivo é a ÚNICA fonte de verdade visual do projeto. Toda página nova
   deve carregá-lo e usar as classes daqui, sem inventar cor, tamanho ou espaço
   solto. Se algo falta, acrescente aqui — não no HTML.

   Base de cores definida pela LIFT:
     --azul-vibrante  #00B1E2   ação, destaque, foco, "está no ar"
     --azul-pastel    #BFD6E7   texto principal, calma, "ainda não está no ar"

   Tema escuro. Os dois azuis trabalham como extremos de uma rampa: quanto mais
   vibrante, mais "vivo" está o projeto. Isso dá as quatro faixas do Kanban sem
   precisar inventar cores fora da paleta.

   Contraste medido (WCAG 2.1), não estimado:
     pastel sobre fundo ............. 12,34:1  AAA
     pastel sobre cartão ............ 11,11:1  AAA
     vibrante sobre fundo ............ 7,40:1  AAA
     vibrante sobre cartão ........... 6,66:1  AA
     texto escuro em botão vibrante .. 7,48:1  AAA
     texto branco em botão vibrante .. 2,50:1  REPROVA  <- por isso não usamos

   A última linha é a regra mais importante daqui: NUNCA texto branco sobre o
   azul vibrante. Em superfície vibrante o texto é --tinta-sobre-destaque.
   ========================================================================== */

/* --- Fonte ----------------------------------------------------------------
   Inter variável, hospedada no próprio servidor: sem chamada ao Google, sem
   dependência externa numa página de login, e a política de segurança (CSP)
   fica fechada em 'self'. Um arquivo cobre todos os pesos de 100 a 900.      */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/estatico/fontes/InterVariable.woff2") format("woff2");
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Cores-base da marca */
  --azul-vibrante: #00b1e2;
  --azul-pastel: #bfd6e7;

  /* Superfícies, do mais fundo ao mais alto */
  --fundo: #0a1420;
  --superficie: #111f2e;
  --superficie-alta: #16293b;
  --superficie-sutil: #0e1a27;

  /* Traços */
  --borda: #203347;
  --borda-forte: #2c4660;

  /* Tinta */
  --tinta-forte: #e8f2fa;   /* títulos                       16,33:1 */
  --tinta: var(--azul-pastel); /* corpo                      12,34:1 */
  --tinta-suave: #93aec4;   /* apoio, metadados               7,22:1 */
  --tinta-fraca: #6b8599;   /* placeholder, estado vazio             */
  --tinta-sobre-destaque: #06131f; /* sobre vibrante/pastel   7,48:1 */

  /* Ação */
  --destaque: var(--azul-vibrante);
  --destaque-hover: #2ac1ea;
  --destaque-fundo: rgba(0, 177, 226, 0.12);
  --destaque-borda: rgba(0, 177, 226, 0.4);

  /* Rampa de situação: vibrante (vivo) -> pastel (ainda ideia) */
  --faixa-operacao: #00b1e2;
  --faixa-manutencao: #5bc5e8;
  --faixa-criacao: #8fd3ef;
  --faixa-estudo: #bfd6e7;

  /* Avisos. Vermelho é o único desvio da paleta: erro precisa ser
     inconfundível, e um azul mais claro não comunica "deu errado". */
  --erro-tinta: #ffc9c9;
  --erro-fundo: rgba(220, 70, 70, 0.14);
  --erro-borda: rgba(220, 70, 70, 0.42);
  --ok-tinta: #bfe7d6;
  --ok-fundo: rgba(40, 190, 140, 0.13);
  --ok-borda: rgba(40, 190, 140, 0.38);

  /* Tipografia. Inter primeiro; o resto só existe para o caso raro de um
     glifo faltar no subconjunto latino. */
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala de texto */
  --txt-micro: 0.6875rem;  /* 11px — etiqueta, contador        */
  --txt-mini: 0.75rem;     /* 12px — metadado                  */
  --txt-apoio: 0.8125rem;  /* 13px — descrição, dica           */
  --txt-corpo: 0.9375rem;  /* 15px — corpo, campo              */
  --txt-medio: 1.0625rem;  /* 17px — título de cartão/seção    */
  --txt-grande: 1.375rem;  /* 22px — título de página          */
  --txt-display: 1.75rem;  /* 28px — título de entrada         */

  /* Pesos. Light (300) só em texto de 15px ou mais: em tamanho pequeno,
     traço fino sobre fundo escuro perde legibilidade. */
  --peso-light: 300;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-bold: 700;

  /* Espaço: escala de 4px */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;

  /* Raio */
  --raio-p: 6px;
  --raio: 10px;
  --raio-g: 14px;
  --raio-total: 999px;

  /* Sombra e movimento */
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sombra-alta: 0 8px 24px rgba(0, 0, 0, 0.4);
  --transicao: 140ms ease;

  /* Medidas de leitura */
  --largura-conteudo: 1180px;
  --largura-cartao: 420px;
  --coluna-kanban: 280px;
}

/* --- Base ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--txt-corpo);
  font-weight: var(--peso-normal);
  line-height: 1.55;
  font-feature-settings: "cv05" 1, "ss03" 1; /* l com cauda, ç mais aberto */
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--tinta-forte);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

h1 {
  font-size: var(--txt-grande);
  font-weight: var(--peso-bold);
}

h2 {
  font-size: var(--txt-medio);
  font-weight: var(--peso-semi);
}

p {
  margin: 0;
}

a {
  color: var(--destaque);
  text-decoration: none;
  transition: color var(--transicao);
}

a:hover {
  color: var(--destaque-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Foco visível em tudo que recebe teclado. Sem isso, quem navega por Tab
   se perde — e é requisito de acessibilidade, não enfeite. */
:focus-visible {
  outline: 2px solid var(--destaque);
  outline-offset: 2px;
  border-radius: var(--raio-p);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --- Cabeçalho ----------------------------------------------------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) var(--e5);
  background: rgba(10, 20, 32, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-width: 0;
}

/* O "logo": quadrado com as duas cores da marca em gradiente. */
.marca__selo {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--azul-vibrante), var(--azul-pastel));
  color: var(--tinta-sobre-destaque);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-bold);
  letter-spacing: -0.03em;
}

.marca__nome {
  font-size: var(--txt-corpo);
  font-weight: var(--peso-semi);
  color: var(--tinta-forte);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.marca__nome em {
  font-style: normal;
  font-weight: var(--peso-light);
  color: var(--tinta-suave);
}

.topo__nav {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
}

.topo__nav a {
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-p);
  color: var(--tinta-suave);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-medio);
  transition: background var(--transicao), color var(--transicao);
}

.topo__nav a:hover {
  background: var(--superficie-alta);
  color: var(--tinta-forte);
  text-decoration: none;
}

/* Quem está logado: inicial em círculo + nome */
.quem {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding-right: var(--e2);
  font-size: var(--txt-apoio);
  color: var(--tinta-suave);
  font-weight: var(--peso-normal);
}

.inicial {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--raio-total);
  background: var(--destaque-fundo);
  border: 1px solid var(--destaque-borda);
  color: var(--destaque);
  font-size: var(--txt-mini);
  font-weight: var(--peso-semi);
}

.topo__forma {
  margin: 0;
  display: flex;
}

/* O logo é o caminho de volta para a home. É a convenção que todo mundo
   conhece, e numa equipe que não é de programadores ela carrega mais peso do
   que qualquer ícone inventado. Só vira link quando há sessão: deslogado ele
   levaria de volta ao próprio login. */
a.marca {
  padding: var(--e1) var(--e2);
  margin: calc(var(--e1) * -1) calc(var(--e2) * -1);
  border-radius: var(--raio-p);
  text-decoration: none;
  transition: background var(--transicao);
}

a.marca:hover {
  background: var(--superficie-alta);
  text-decoration: none;
}

a.marca:hover .marca__nome {
  color: var(--destaque);
}

/* Onde a pessoa está agora. Sem isso, "caminho claro" fica pela metade: ela
   sabe para onde pode ir, mas não de onde está saindo. */
.topo__nav a[aria-current="page"] {
  background: var(--destaque-fundo);
  color: var(--destaque);
}

.topo__nav a[aria-current="page"]:hover {
  background: var(--destaque-fundo);
  color: var(--destaque);
}

/* --- Voltar ---------------------------------------------------------------
   Toda tela secundária abre com este link. Texto junto do ícone de propósito:
   seta sozinha é adivinhação, e o destino escrito ("Voltar ao painel") elimina
   a dúvida de para onde ela leva.                                           */

.voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e3);
  color: var(--tinta-suave);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-medio);
}

.voltar:hover {
  color: var(--destaque);
  text-decoration: none;
}

.voltar svg {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform var(--transicao);
}

.voltar:hover svg {
  transform: translateX(-2px);
}

/* Saída de uma tela sem cabeçalho (login, convite, aviso). */
.cartao__pe {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
  display: flex;
  justify-content: center;
}

/* --- Layout -------------------------------------------------------------- */

.pagina {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: var(--e6) var(--e5) var(--e7);
}

.pagina--estreita {
  max-width: 760px;
}

.centro {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--e5);
}

.cabeca {
  margin-bottom: var(--e5);
}

.cabeca__sub {
  margin-top: var(--e1);
  color: var(--tinta-suave);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-light);
}

.secao {
  margin-top: var(--e6);
}

.secao__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
}

.secao__sub {
  margin: var(--e1) 0 var(--e4);
  color: var(--tinta-suave);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-light);
}

/* --- Kanban -------------------------------------------------------------- */

.kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(var(--coluna-kanban), 1fr));
  gap: var(--e4);
  align-items: start;
}

.coluna {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  min-width: 0;
  padding: var(--e3);
  background: var(--superficie-sutil);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
}

/* A faixa colorida no topo da coluna é o que diferencia as situações. */
.coluna__faixa {
  height: 3px;
  border-radius: var(--raio-total);
  background: var(--cor-faixa, var(--azul-pastel));
}

.coluna--operacao {
  --cor-faixa: var(--faixa-operacao);
}
.coluna--manutencao {
  --cor-faixa: var(--faixa-manutencao);
}
.coluna--criacao {
  --cor-faixa: var(--faixa-criacao);
}
.coluna--estudo {
  --cor-faixa: var(--faixa-estudo);
}

.coluna__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: 0 var(--e1);
}

.coluna__nome {
  font-size: var(--txt-apoio);
  font-weight: var(--peso-semi);
  color: var(--cor-faixa, var(--azul-pastel));
  letter-spacing: 0.01em;
}

.coluna__conta {
  flex: none;
  min-width: 22px;
  padding: 1px var(--e2);
  border-radius: var(--raio-total);
  background: var(--superficie-alta);
  color: var(--tinta-suave);
  font-size: var(--txt-micro);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.coluna__ajuda {
  padding: 0 var(--e1);
  color: var(--tinta-fraca);
  font-size: var(--txt-mini);
  font-weight: var(--peso-light);
  line-height: 1.45;
}

.coluna__pilha {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Cartão de projeto --------------------------------------------------- */

.projeto {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e3) var(--e3) var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  transition: background var(--transicao), border-color var(--transicao),
    transform var(--transicao), box-shadow var(--transicao);
}

/* Barra lateral na cor da situação: liga o cartão à sua coluna mesmo quando
   alguém olha só para o cartão. */
.projeto::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--e3);
  bottom: var(--e3);
  width: 3px;
  border-radius: var(--raio-total);
  background: var(--cor-faixa, var(--azul-pastel));
  opacity: 0.75;
}

.projeto:has(a):hover {
  background: var(--superficie-alta);
  border-color: var(--borda-forte);
  transform: translateY(-1px);
  box-shadow: var(--sombra-alta);
}

.projeto__titulo {
  font-size: var(--txt-corpo);
  font-weight: var(--peso-semi);
  color: var(--tinta-forte);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

a.projeto__titulo:hover {
  color: var(--destaque);
  text-decoration: none;
}

.projeto__desc {
  color: var(--tinta-suave);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-light);
  line-height: 1.5;
}

.projeto__pe {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e1);
  padding-top: var(--e2);
  border-top: 1px solid var(--borda);
}

.projeto__dono {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
  color: var(--tinta-suave);
  font-size: var(--txt-mini);
  font-weight: var(--peso-medio);
}

.projeto__dono .inicial {
  width: 20px;
  height: 20px;
  font-size: var(--txt-micro);
  background: rgba(191, 214, 231, 0.1);
  border-color: rgba(191, 214, 231, 0.26);
  color: var(--azul-pastel);
}

.projeto__link {
  margin-left: auto;
  flex: none;
  color: var(--tinta-fraca);
  font-size: var(--txt-micro);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.projeto:hover .projeto__link {
  color: var(--destaque);
}

/* --- Estado vazio -------------------------------------------------------- */

.vazio {
  padding: var(--e5) var(--e3);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
  color: var(--tinta-fraca);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-light);
  text-align: center;
}

/* --- Cartão de formulário ------------------------------------------------ */

.cartao {
  width: 100%;
  max-width: var(--largura-cartao);
  padding: var(--e6);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-alta);
}

.cartao--largo {
  max-width: 560px;
}

.cartao__marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e5);
}

.cartao h1 {
  font-size: var(--txt-display);
  font-weight: var(--peso-bold);
}

.cartao__sub {
  margin-top: var(--e2);
  color: var(--tinta-suave);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-light);
}

.painel {
  margin-top: var(--e4);
  padding: var(--e5);
  background: var(--superficie-sutil);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
}

/* --- Formulário ---------------------------------------------------------- */

label {
  display: block;
  margin: var(--e4) 0 var(--e2);
  color: var(--tinta);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-medio);
}

input,
select,
textarea {
  width: 100%;
  padding: var(--e3);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  color: var(--tinta-forte);
  font-family: inherit;
  font-size: var(--txt-corpo);
  font-weight: var(--peso-normal);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

input::placeholder {
  color: var(--tinta-fraca);
  font-weight: var(--peso-light);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--destaque);
  box-shadow: 0 0 0 3px var(--destaque-fundo);
}

select {
  cursor: pointer;
}

.dica {
  margin-top: var(--e2);
  color: var(--tinta-fraca);
  font-size: var(--txt-mini);
  font-weight: var(--peso-light);
  line-height: 1.5;
}

.grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--e4);
}

/* --- Botões -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: var(--e3) var(--e5);
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  background: var(--destaque);
  /* Texto ESCURO: branco sobre este azul dá 2,50:1 e reprova. */
  color: var(--tinta-sobre-destaque);
  font-family: inherit;
  font-size: var(--txt-corpo);
  font-weight: var(--peso-semi);
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao),
    color var(--transicao);
}

.btn:hover {
  background: var(--destaque-hover);
}

.btn--bloco {
  width: 100%;
  margin-top: var(--e5);
}

.btn--fantasma {
  background: transparent;
  border-color: var(--borda-forte);
  color: var(--tinta);
}

.btn--fantasma:hover {
  background: var(--superficie-alta);
  border-color: var(--destaque-borda);
  color: var(--tinta-forte);
}

.btn--mini {
  padding: var(--e1) var(--e3);
  font-size: var(--txt-mini);
  font-weight: var(--peso-medio);
}

/* --- Avisos -------------------------------------------------------------- */

.alerta {
  margin-top: var(--e4);
  padding: var(--e3) var(--e4);
  border-radius: var(--raio-p);
  border: 1px solid;
  font-size: var(--txt-apoio);
  font-weight: var(--peso-normal);
}

.alerta--erro {
  background: var(--erro-fundo);
  border-color: var(--erro-borda);
  color: var(--erro-tinta);
}

.alerta--ok {
  background: var(--ok-fundo);
  border-color: var(--ok-borda);
  color: var(--ok-tinta);
}

/* --- Tabela -------------------------------------------------------------- */

.tabela-area {
  margin-top: var(--e3);
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: var(--superficie-sutil);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--txt-apoio);
}

th,
td {
  padding: var(--e3) var(--e4);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--borda);
}

th {
  background: var(--superficie);
  color: var(--tinta-suave);
  font-size: var(--txt-mini);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

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

tbody tr:hover td {
  background: var(--superficie);
}

.pessoa {
  display: flex;
  align-items: center;
  gap: var(--e3);
}

.pessoa__nome {
  color: var(--tinta-forte);
  font-weight: var(--peso-medio);
}

.pessoa__email {
  color: var(--tinta-fraca);
  font-size: var(--txt-mini);
  font-weight: var(--peso-light);
}

.meta {
  color: var(--tinta-fraca);
  font-size: var(--txt-mini);
  font-weight: var(--peso-light);
  white-space: nowrap;
}

.acoes {
  display: flex;
  gap: var(--e2);
  flex-wrap: wrap;
}

.acoes form {
  margin: 0;
}

.campo-linha {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0;
}

.campo-linha select {
  width: auto;
  min-width: 170px;
  padding: var(--e1) var(--e2);
  font-size: var(--txt-mini);
}

/* --- Etiquetas ----------------------------------------------------------- */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 2px var(--e2);
  border-radius: var(--raio-total);
  border: 1px solid var(--borda-forte);
  background: var(--superficie-alta);
  color: var(--tinta-suave);
  font-size: var(--txt-micro);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

.etiqueta--admin {
  background: var(--destaque-fundo);
  border-color: var(--destaque-borda);
  color: var(--destaque);
}

.etiqueta--parado {
  background: var(--erro-fundo);
  border-color: var(--erro-borda);
  color: var(--erro-tinta);
}

.etiqueta--pendente {
  background: rgba(191, 214, 231, 0.1);
  border-color: rgba(191, 214, 231, 0.3);
  color: var(--azul-pastel);
}

/* --- Sanfona (detalhes) -------------------------------------------------- */

details {
  margin-top: var(--e4);
  background: var(--superficie-sutil);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  overflow: hidden;
}

summary {
  padding: var(--e4) var(--e5);
  color: var(--tinta-forte);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: background var(--transicao);
}

summary:hover {
  background: var(--superficie);
}

details[open] summary {
  border-bottom: 1px solid var(--borda);
}

.sanfona__corpo {
  padding: var(--e2) var(--e5) var(--e5);
}

/* --- Responsivo ----------------------------------------------------------
   Kanban com 4 colunas não cabe em tela estreita. Em vez de amassar as
   colunas, viram rolagem horizontal com encaixe; no celular, empilham.     */

@media (max-width: 1100px) {
  .kanban {
    grid-template-columns: repeat(4, var(--coluna-kanban));
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: var(--e3);
  }
  .coluna {
    scroll-snap-align: start;
  }
}

@media (max-width: 720px) {
  .pagina {
    padding: var(--e5) var(--e4) var(--e6);
  }
  .topo {
    padding: var(--e3) var(--e4);
  }
  .kanban {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }
  .grade {
    grid-template-columns: 1fr;
  }
  .cartao {
    padding: var(--e5);
  }
  .marca__nome em {
    display: none;
  }
}