/* direcao.css · Lapidador Escuro Premium (direção A, "fiel ao vídeo")
   Ordem de carga: tokens.css (gerado com --tema escuro) → CSS do sistema → direcao.css → CSS das receitas.
   Tudo aqui sai do tokens.css do aluno: luz = --cor-texto, breu = --cor-fundo afundado, marca = --cor-marca.
   Funciona com qualquer cor de marca. Números fixos só nas medidas da direção (uma vez, nas variáveis).
   Variáveis locais da direção começam com --lap-; classes utilitárias, com .lap-. */

/* ==========================================================================
   1. Variáveis da direção (refeitas em cada escopo de tema, para valer com --os-dois)
   ========================================================================== */
:root, [data-tema], .dark, .light {
  /* luz: o texto claro do tema em doses pequenas (borda de luz, reflexo, grade) */
  --lap-luz: var(--cor-texto);
  --lap-luz-2: color-mix(in oklch, var(--lap-luz) 2.5%, transparent);
  --lap-luz-3: color-mix(in oklch, var(--lap-luz) 3.5%, transparent);
  --lap-luz-4: color-mix(in oklch, var(--lap-luz) 4.5%, transparent);
  --lap-luz-6: color-mix(in oklch, var(--lap-luz) 6%, transparent);
  --lap-luz-8: color-mix(in oklch, var(--lap-luz) 7.5%, transparent);
  --lap-luz-10: color-mix(in oklch, var(--lap-luz) 10%, transparent);
  --lap-luz-16: color-mix(in oklch, var(--lap-luz) 16%, transparent);
  --lap-luz-24: color-mix(in oklch, var(--lap-luz) 24%, transparent);
  --lap-luz-42: color-mix(in oklch, var(--lap-luz) 42%, transparent);

  /* breu: a sombra física (o fundo do tema ainda mais escuro) */
  --lap-breu: color-mix(in oklch, var(--cor-fundo), black 60%);
  --lap-breu-35: color-mix(in oklch, var(--lap-breu) 35%, transparent);
  --lap-breu-50: color-mix(in oklch, var(--lap-breu) 50%, transparent);
  --lap-breu-70: color-mix(in oklch, var(--lap-breu) 70%, transparent);

  /* marca: a cor original do aluno e as versões para luz e profundidade */
  --lap-marca: var(--cor-marca);
  --lap-marca-clara: color-mix(in oklch, var(--cor-marca), white 32%);
  --lap-marca-funda: color-mix(in oklch, var(--cor-marca), black 30%);
  --lap-marca-luz: color-mix(in oklch, var(--cor-marca) 13%, transparent);     /* luz ambiente, perto */
  --lap-marca-luz-longe: color-mix(in oklch, var(--cor-marca) 7%, transparent); /* luz ambiente, longe */
  --lap-marca-brilho: color-mix(in oklch, var(--lap-marca-clara) 45%, transparent);

  /* botão principal: a marca original quando o par passa 4,5:1 (o tokens.css tem --cor-marca-hover).
     Sem --cor-marca-hover no tokens.css, troque as 3 linhas por --cor-acento / --cor-acento-texto / --cor-acento-hover. */
  --lap-botao-fundo: var(--cor-marca);
  --lap-botao-texto: var(--cor-marca-texto);
  --lap-botao-hover: var(--cor-marca-hover, var(--cor-marca));

  /* categorias vivas: as do tokens um pouco mais claras, para brilhar no escuro (use na ordem, sem pular) */
  --lap-cat-1: color-mix(in oklch, var(--cor-cat-1), white 16%);
  --lap-cat-2: color-mix(in oklch, var(--cor-cat-2), white 16%);
  --lap-cat-3: color-mix(in oklch, var(--cor-cat-3), white 16%);
  --lap-cat-4: color-mix(in oklch, var(--cor-cat-4), white 16%);
  --lap-cat-5: color-mix(in oklch, var(--cor-cat-5), white 16%);
  --lap-cat-6: color-mix(in oklch, var(--cor-cat-6), white 16%);
  --lap-cat-7: color-mix(in oklch, var(--cor-cat-7), white 16%);
  --lap-dado: var(--lap-marca-clara);   /* série única: a marca, clara */

  /* quem fala numa conversa: a mesma cor no mapa da conversa, na aresta do balão e no rótulo "IA" */
  --lap-autor-cliente: var(--cor-texto-2);
  --lap-autor-ia: var(--cor-info);
  --lap-autor-empresa: var(--lap-marca-clara);

  /* superfícies */
  --lap-cartao-fundo: linear-gradient(180deg, var(--lap-luz-2), transparent 140px), var(--cor-superficie);
  --lap-cartao-borda: var(--lap-luz-6);
  --lap-cartao-sombra: inset 0 1px 0 var(--lap-luz-4), 0 1px 0 var(--lap-breu-35), 0 18px 36px -18px var(--lap-breu-70);
  --lap-borda-luz: linear-gradient(90deg, transparent, var(--lap-luz-16) 30%, var(--lap-luz-16) 70%, transparent);
  --lap-raio-cartao: var(--raio-4);
  --lap-raio-heroi: calc(var(--raio-4) + 4px);
  --lap-elevado: linear-gradient(180deg, var(--lap-luz-8), var(--lap-luz-3));
  --lap-elevado-sombra: inset 0 1px 0 var(--lap-luz-10), inset 0 0 0 1px var(--lap-luz-6), 0 1px 2px var(--lap-breu-50), 0 4px 12px -4px var(--lap-breu-50);
  --lap-afundado: inset 0 1px 2px var(--lap-breu-50), inset 0 0 0 1px var(--lap-breu-35);

  /* metal escuro das peças 3D (placas, fichas, cartões) */
  --lap-metal-1: color-mix(in oklch, color-mix(in oklch, var(--cor-superficie), var(--cor-texto) 24%), var(--cor-marca) 6%);
  --lap-metal-2: color-mix(in oklch, var(--cor-superficie), var(--cor-texto) 11%);
  --lap-metal-3: color-mix(in oklch, var(--cor-fundo), var(--cor-texto) 4%);
  --lap-metal-4: color-mix(in oklch, var(--cor-fundo), black 30%);

  /* grão: ruído fino que tira o "plástico" do degradê (só em herói e peça 3D) */
  --lap-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --lap-grao-forca: .05;

  /* tipografia de destaque */
  --lap-titulo-tam: 56px;  --lap-titulo-linha: 60px;  --lap-titulo-peso: 300;  --lap-titulo-entreletra: -0.04em;
  --lap-numero-tam: 36px;  --lap-numero-linha: 44px;  --lap-numero-peso: var(--peso-medio);  --lap-numero-entreletra: -0.035em;
  --lap-numero-heroi-tam: 44px;  --lap-numero-heroi-linha: 52px;
  --lap-rotulo: var(--peso-normal) var(--texto-xs)/var(--linha-xs) var(--fonte-mono);

  /* dados (os scripts das receitas leem estas cores por classe) */
  --lap-grade: var(--lap-luz-4);
  --lap-base: var(--lap-luz-10);

  /* movimento */
  --lap-curva: cubic-bezier(.2, .8, .2, 1);
  --lap-entrada: .9s;
  --lap-rapido: .15s;
}

/* ==========================================================================
   2. Superfícies
   ========================================================================== */
/* cartão: camada de luz nos 140 px de cima, borda de 6 % de luz, sombra física, borda de luz no meio do topo */
.lap-cartao {
  position: relative; min-width: 0;
  background: var(--lap-cartao-fundo);
  border: 1px solid var(--lap-cartao-borda); border-radius: var(--lap-raio-cartao);
  box-shadow: var(--lap-cartao-sombra);
}
.lap-cartao::before, .lap-luz-topo::before {
  content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; z-index: 2; pointer-events: none;
  background: var(--lap-borda-luz);
}
.lap-luz-topo { position: relative; }

/* herói: o cartão do que a pessoa veio fazer; luz da marca dentro, grão, canto maior */
.lap-heroi {
  --lap-heroi-luz-x: 78%; --lap-heroi-luz-y: 60%;
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  background:
    radial-gradient(240px 170px at var(--lap-heroi-luz-x) var(--lap-heroi-luz-y), color-mix(in oklch, var(--cor-marca) 17%, transparent), transparent 70%),
    var(--lap-cartao-fundo);
  border: 1px solid var(--lap-cartao-borda); border-radius: var(--lap-raio-heroi);
  box-shadow: var(--lap-cartao-sombra);
}
.lap-heroi::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; z-index: 3; pointer-events: none;
  background: var(--lap-borda-luz);
}
.lap-heroi::after, .lap-grao::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: var(--lap-grao); opacity: var(--lap-grao-forca); mix-blend-mode: overlay;
}
.lap-grao { position: relative; isolation: isolate; }

/* luz ambiente da marca atrás do topo da tela: UMA por tela. Página com uma coluna: no contêiner da página.
   Tela de colunas (trilho, lista, conversa, painel): na coluna do herói, nunca numa coluna estreita (abaixo de 480 px a
   elipse corta na borda e vira tinta). Posição e tamanho por variável, na regra do sistema que já existe:
   --lap-luz-x / --lap-luz-y (centro, padrão 30% e 120px) e --lap-luz-l / --lap-luz-a (tamanho, padrão 520 × 300 px).
   Só background-image: a cor de fundo que o elemento já tem continua. */
.lap-luz-ambiente {
  background-image:
    radial-gradient(var(--lap-luz-l, 520px) var(--lap-luz-a, 300px) at var(--lap-luz-x, 30%) var(--lap-luz-y, 120px), var(--lap-marca-luz), transparent 70%),
    radial-gradient(calc(var(--lap-luz-l, 520px) * 1.7) calc(var(--lap-luz-a, 300px) * 1.4) at calc(var(--lap-luz-x, 30%) - 20%) calc(var(--lap-luz-y, 120px) - 180px), var(--lap-marca-luz-longe), transparent 70%);
  background-repeat: no-repeat;
}

/* janela (modal) e menu flutuante */
.lap-modal {
  position: relative;
  background: linear-gradient(180deg, var(--lap-luz-3), transparent 120px), var(--cor-superficie-2);
  border: 1px solid var(--lap-luz-8); border-radius: var(--lap-raio-heroi);
  box-shadow: inset 0 1px 0 var(--lap-luz-6), 0 24px 64px -16px var(--lap-breu-70), var(--sombra-2);
}
.lap-divisoria { height: 1px; border: 0; background: var(--lap-luz-6); }

/* ==========================================================================
   3. Tipografia
   ========================================================================== */
.lap-titulo {
  font-family: var(--fonte); font-size: var(--lap-titulo-tam); line-height: var(--lap-titulo-linha);
  font-weight: var(--lap-titulo-peso); letter-spacing: var(--lap-titulo-entreletra); color: var(--cor-texto);
}
.lap-apagado { color: var(--cor-texto-3); }   /* a parte de contexto do título (ano, "de hoje") e os centavos */
.lap-numero {
  font-size: var(--lap-numero-tam); line-height: var(--lap-numero-linha); font-weight: var(--lap-numero-peso);
  letter-spacing: var(--lap-numero-entreletra); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--cor-texto);
}
.lap-numero-heroi { font-size: var(--lap-numero-heroi-tam); line-height: var(--lap-numero-heroi-linha); }
.lap-rotulo { font: var(--lap-rotulo); color: var(--cor-texto-3); font-variant-numeric: tabular-nums; }
.lap-variacao { font: var(--lap-rotulo); color: var(--cor-texto-3); }
.lap-sobe { color: var(--cor-sucesso); }
.lap-desce { color: var(--cor-perigo); }

@media (max-width: 767px) {
  :root, [data-tema], .dark, .light {
    --lap-titulo-tam: 40px; --lap-titulo-linha: 44px;
    --lap-numero-tam: 30px; --lap-numero-linha: 36px;
    --lap-numero-heroi-tam: 34px; --lap-numero-heroi-linha: 40px;
  }
}

/* ==========================================================================
   4. Componentes no acabamento da direção
   ========================================================================== */
/* logo: degradê interno da marca + aresta de luz (num quadrado com o símbolo dentro) */
.lap-logo {
  display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: var(--raio-1);
  background: linear-gradient(180deg, var(--lap-marca-clara), var(--cor-marca) 55%, var(--lap-marca-funda));
  box-shadow: inset 0 1px 0 var(--lap-luz-42), inset 0 0 0 1px var(--lap-luz-10), 0 2px 8px -2px var(--lap-marca-brilho);
  color: var(--cor-marca-texto);
}
.lap-logo svg { width: 62%; height: 62%; }
/* logo num trilho só de ícones (64 px de largura): 32 px, canto 8 */
.lap-logo--trilho { width: 32px; height: 32px; border-radius: var(--raio-2); }

/* item ativo do menu e aba ativa: levantado (luz em cima, anel, sombra); o ícone na cor da marca */
.lap-ativo, .lap-aba[aria-selected="true"], .lap-aba.lap-ativo {
  background: var(--lap-elevado); box-shadow: var(--lap-elevado-sombra);
  color: var(--cor-texto); font-weight: var(--peso-medio);
}
.lap-ativo .icone, .lap-ativo svg:first-child { color: var(--cor-acento); }

/* abas: trilho afundado, aba ativa levantada */
.lap-abas {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--raio-3);
  background: var(--cor-fundo); box-shadow: var(--lap-afundado);
}
.lap-aba {
  display: inline-flex; align-items: center; gap: var(--espaco-2); height: 30px; padding: 0 var(--espaco-3); white-space: nowrap; flex: none;
  border: 0; border-radius: var(--raio-2); background: none; color: var(--cor-texto-2); cursor: pointer;
  transition: background-color var(--lap-rapido), color var(--lap-rapido);
}
.lap-aba:hover { color: var(--cor-texto); }

/* botões: principal sólido com luz de 1 px e anel escuro da própria marca; sem degradê */
.lap-botao, .lap-botao-2, .lap-botao-fantasma {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2);
  height: 32px; padding: 0 var(--espaco-3); border: 0; border-radius: var(--raio-2);
  font: inherit; font-weight: var(--peso-medio); white-space: nowrap; cursor: pointer;
  transition: background-color var(--lap-rapido), color var(--lap-rapido), box-shadow var(--lap-rapido);
}
.lap-botao {
  background: var(--lap-botao-fundo); color: var(--lap-botao-texto);
  box-shadow: inset 0 1px 0 var(--lap-luz-24), inset 0 0 0 1px var(--lap-luz-6), 0 0 0 1px var(--lap-marca-funda), 0 2px 6px -1px var(--lap-breu-50);
}
.lap-botao:hover { background: var(--lap-botao-hover); box-shadow: inset 0 1px 0 var(--lap-luz-24), 0 0 0 1px var(--lap-marca-funda), 0 4px 16px -4px var(--lap-marca-brilho); }
.lap-botao-2 {
  background: var(--cor-superficie); color: var(--cor-texto);
  box-shadow: inset 0 1px 0 var(--lap-luz-4), inset 0 0 0 1px var(--cor-borda), 0 1px 2px var(--lap-breu-50);
}
.lap-botao-2:hover { background: var(--cor-superficie-3); }
.lap-botao-fantasma { background: none; color: var(--cor-texto-2); }
.lap-botao-fantasma:hover { background: var(--cor-superficie-3); color: var(--cor-texto); }
.lap-botao .icone, .lap-botao-2 .icone { flex: none; }
:is(.lap-botao, .lap-botao-2, .lap-botao-fantasma):has(> .icone:first-child) { padding-left: var(--espaco-2); }

/* campo: afundado (sombra por dentro), borda de controle, foco com anel e um halo leve da marca.
   A largura é a do sistema; .lap-campo--largo ocupa a coluna toda (formulário). Campo com margem lateral: sem o modificador. */
.lap-campo {
  height: 36px; padding: 0 var(--espaco-3); max-width: 100%; min-width: 0;
  background: var(--cor-superficie-2); color: var(--cor-texto);
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-2);
  box-shadow: inset 0 1px 2px var(--lap-breu-35); outline: 2px solid transparent; font: inherit;
  transition: border-color var(--lap-rapido), box-shadow var(--lap-rapido);
}
.lap-campo--largo { width: 100%; }
.lap-campo::placeholder { color: var(--cor-texto-3); }
.lap-campo:focus, .lap-campo:focus-within {
  border-color: var(--cor-foco);
  box-shadow: inset 0 1px 2px var(--lap-breu-35), 0 0 0 3px color-mix(in oklch, var(--cor-foco) 22%, transparent), 0 0 16px -4px color-mix(in oklch, var(--cor-foco) 40%, transparent);
}

/* selo de status: texto + fundo suave + contorno de 1 px da mesma cor; sem bolinha. Neutro = terminou */
.lap-selo {
  --lap-selo-cor: var(--cor-texto-2); --lap-selo-fundo: var(--cor-superficie-3);
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--espaco-2); border-radius: 999px;
  font-size: var(--texto-xs); line-height: var(--linha-xs); font-weight: var(--peso-medio); white-space: nowrap;
  color: var(--lap-selo-cor); background: var(--lap-selo-fundo);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--lap-selo-cor) 22%, transparent);
}
.lap-selo--perigo {   /* o único selo com brilho: o que está atrasado */
  --lap-selo-cor: var(--cor-perigo); --lap-selo-fundo: var(--cor-perigo-suave);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--cor-perigo) 30%, transparent), 0 0 12px -4px color-mix(in oklch, var(--cor-perigo) 50%, transparent);
}
.lap-selo--alerta { --lap-selo-cor: var(--cor-alerta); --lap-selo-fundo: var(--cor-alerta-suave); }
.lap-selo--info   { --lap-selo-cor: var(--cor-info);   --lap-selo-fundo: var(--cor-info-suave); }
.lap-selo--marca  { --lap-selo-cor: var(--cor-acento); --lap-selo-fundo: var(--cor-acento-suave); }

/* etiqueta de categoria (etapa do lead, tipo de pedido, plano): a cor VIVA da categoria no texto, no fundo suave e no
   contorno; sem bolinha dentro. É dado com cor: vai onde a categoria é o assunto (cabeçalho da conversa, ficha, detalhe).
   Na lista e na tabela, a mesma categoria fica quieta: .lap-bolinha + nome em cinza. Uso: style="--lap-cor: var(--lap-cat-1)" */
.lap-etiqueta {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--espaco-2); border-radius: 999px; white-space: nowrap;
  font-size: var(--texto-xs); line-height: var(--linha-xs); font-weight: var(--peso-medio);
  color: color-mix(in oklch, var(--lap-cor, var(--cor-texto-2)), white 18%);
  background: linear-gradient(180deg, color-mix(in oklch, var(--lap-cor, transparent) 30%, transparent), color-mix(in oklch, var(--lap-cor, transparent) 16%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--lap-cor, var(--cor-borda)) 38%, transparent), inset 0 1px 0 color-mix(in oklch, var(--lap-cor, transparent) 34%, transparent);
}
.lap-etiqueta:empty { display: none; }

/* bolinha de categoria: luz interna no alto, anel de 3 px da própria cor e halo (uso: style="--lap-cor: var(--lap-cat-1)") */
.lap-bolinha {
  display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--lap-luz-42), transparent 55%), var(--lap-cor, var(--cor-texto-3));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--lap-cor, transparent) 16%, transparent), 0 0 8px color-mix(in oklch, var(--lap-cor, transparent) 45%, transparent);
}

/* legenda de gráfico: traço com brilho + nome em mono */
.lap-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-4); margin: 0; padding: 0; }
.lap-legenda li { display: flex; align-items: center; gap: var(--espaco-2); font: var(--lap-rotulo); color: var(--cor-texto-3); }
.lap-legenda li::before { content: ""; width: 10px; height: 2px; border-radius: 1px; background: var(--lap-cor); box-shadow: 0 0 6px var(--lap-cor); }

/* celular: com 4 itens ou mais, duas colunas; com até 3, uma linha só */
@media (max-width: 767px) { .lap-legenda:has(> li:nth-child(4)) { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--espaco-2) var(--espaco-6); } }

/* tabela: cabeçalho em mono pequeno, linhas de 44, número à direita, hover em superfície 3 */
.lap-tabela { width: 100%; border-collapse: separate; border-spacing: 0; }
.lap-tabela th {
  height: 40px; padding: 0 var(--espaco-3); text-align: left; white-space: nowrap;
  font: var(--lap-rotulo); color: var(--cor-texto-3); background: transparent; border-bottom: 1px solid var(--cor-borda);
}
.lap-tabela td { height: 44px; padding: 0 var(--espaco-3); color: var(--cor-texto-2); border-bottom: 1px solid var(--cor-borda); transition: background-color .12s; }
.lap-tabela :is(th, td):first-child { padding-left: var(--espaco-5); }
.lap-tabela :is(th, td):last-child { padding-right: var(--espaco-5); }
.lap-tabela tbody tr:last-child td { border-bottom: 0; }
.lap-tabela tbody tr:hover td { background: var(--cor-superficie-3); }
.lap-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

/* contador: número simples em mono, sem pílula */
.lap-contador { font: var(--lap-rotulo); color: var(--cor-texto-3); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   5. Dados com cor (peças quietas de apoio)
   ========================================================================== */
/* composição: uma barra dividida na proporção real (cada parte: style="--lap-cor: ...; --lap-peso: <valor>") */
.lap-composicao { display: flex; gap: 3px; height: 10px; }
.lap-composicao > span {
  flex: var(--lap-peso, 1) 1 0; min-width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--lap-luz-24), transparent 60%), var(--lap-cor);
  box-shadow: inset 0 0 0 1px var(--lap-breu-35), 0 0 12px -2px color-mix(in oklch, var(--lap-cor) 60%, transparent);
}
.lap-composicao--fina { height: 4px; gap: 2px; }
.lap-composicao--fina > span { border-radius: 2px; box-shadow: none; }
/* em bloco: alta, com a parte escrita dentro, na mesma linguagem das faixas do gráfico */
.lap-composicao--bloco { height: 56px; gap: 4px; }
.lap-composicao--bloco > span {
  display: flex; align-items: flex-end; padding: 0 0 var(--espaco-2) var(--espaco-2); border-radius: var(--raio-1); overflow: hidden;
  font: var(--peso-medio) 12px/1 var(--fonte-mono); color: var(--lap-cor); font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, color-mix(in oklch, var(--lap-cor) 30%, transparent), color-mix(in oklch, var(--lap-cor) 5%, transparent));
  box-shadow: inset 0 2px 0 var(--lap-cor), inset 0 0 0 1px color-mix(in oklch, var(--lap-cor) 16%, transparent), 0 -2px 14px -6px var(--lap-cor);
}

/* casas: uma por item contado (até 24); as que pedem ação na cor (--lap-cor), as outras em cinza, as que saíram vazadas (--lap-cor-saiu, padrão sucesso) */
.lap-casas { display: flex; gap: 3px; height: 4px; }
.lap-casas > span { flex: 1; border-radius: 2px; background: var(--cor-texto-3); opacity: .55; }
.lap-casas > .lap-casa-cor { background: var(--lap-cor, var(--cor-acento)); opacity: 1; box-shadow: 0 0 8px -1px var(--lap-cor, var(--cor-acento)); }
.lap-casas > .lap-casa-vazada { background: none; opacity: 1; box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--lap-cor-saiu, var(--cor-sucesso)) 55%, transparent); }

/* ==========================================================================
   6. Movimento (entrada, foco, respeito a quem pede menos movimento)
   ========================================================================== */
/* entrada: sobe 8 px e aparece; em cascata com style="--lap-ordem: 1..6" */
.lap-entra { animation: lap-entra .6s var(--lap-curva) both; animation-delay: calc(var(--lap-ordem, 0) * 60ms); }
@keyframes lap-entra { from { opacity: 0; transform: translateY(8px); } }

/* cartão clicável: a borda de luz acende no hover (o cartão não pula) */
.lap-clicavel { transition: border-color var(--lap-rapido), box-shadow var(--lap-rapido); cursor: pointer; }
.lap-clicavel:hover { border-color: var(--lap-luz-10); box-shadow: var(--lap-cartao-sombra), 0 0 0 1px var(--lap-luz-4); }

@media (prefers-reduced-motion: reduce) {
  .lap-entra, .lap-entra * { animation: none !important; }
  [class*="lap-"] { transition-duration: 0s !important; }
}