/* ══ O PAINEL RESPONDE À TELA DELE, NÃO À JANELA ═════════════════════════
   Pedido dele: *"eu falei do computador ou celular para a tela do white
   label, para mostrar que a pessoa pode acessar o dashboard de onde
   quiser"*. Para o simulador virar um celular sem sair do lugar, o layout
   de dentro tem de olhar para a largura DA MOLDURA e não para a da janela:
   media query de viewport não enxerga um container estreito dentro de uma
   tela larga, e o painel continuaria em modo desktop espremido.

   `container-type:inline-size` na `.tela` e as regras de dentro viraram
   `@container`. As poucas que valem para os controles de fora seguem como
   media query, porque elas respondem à janela mesmo. */
.tela{container-type:inline-size}

/* ══ O ÂMBAR É NOSSO, O ACENTO É DO CLIENTE ══════════════════════════════
   Dentro do simulador nada pode ser âmbar chumbado. Com a marca da Norte
   selecionada a tela ficava azul e as linhas de alerta continuavam laranja
   Zigurate — a nossa marca vazando para dentro do painel do cliente, que é
   o oposto do que o white-label promete.

   Os quatro tokens abaixo derivam do acento escolhido. Quando ninguém
   trocou a marca, o acento É o âmbar e a tela fica idêntica ao que era. */
.sim{--a-veu:color-mix(in srgb,var(--acento) 12%,transparent);
     --a-borda:color-mix(in srgb,var(--acento) 50%,transparent);
     --a-tx:color-mix(in srgb,var(--acento) 62%,var(--grafite))}

/* ══ A IDENTIDADE DO CLIENTE MANDA DENTRO DO PAINEL ══════════════════════
   Tudo que o painel desenha lê `--m-tit`, `--m-txt`, `--m-raio` e `--m-esp`,
   e não os tokens da Zigurate direto. Quando ninguém trocou a marca, esses
   quatro caem nos nossos — é a mesma tela. Quando o cliente troca, a tela
   inteira muda de tipografia e de forma, que é o que ele quis dizer com
   *"a gente faz na id da marca tudo"*.

   Fora do simulador nada muda: a página, o hero e a torre continuam sendo
   Zigurate, porque a marca do cliente vive DENTRO da tela dele, não no
   nosso site. Por isso os quatro nascem escopados em `.sim`. */
.sim{--m-tit:var(--tit);--m-txt:var(--txt);--m-raio:var(--raio);--m-esp:1}

/* O simulador: o painel, com a marca do cliente por cima.
   A cara é a do Zigurate (tokens de marca.css). O que o seletor troca é só o
   que um white-label troca de verdade: o acento, o domínio e a logo.
   Nenhuma cor nasce aqui — se faltar, a correção é em marca.css.

   --acento e --acento-tx vêm do JS, porque são do CLIENTE, não nossos.
   O par existe porque contraste é físico: texto claro sobre azul-marinho,
   texto escuro sobre âmbar. Uma cor só não serve para as duas. */
.sim{background:var(--dia);color:var(--grafite);min-height:100svh;padding:14vh 5vw 12vh}
.sim .dentro2{max-width:1500px;margin:0 auto}
.sim h2{color:var(--grafite)}
.sim .linha-fina{color:var(--grafite2)}

.controles{display:flex;gap:34px;flex-wrap:wrap;align-items:flex-end;margin-top:46px}
.grupo{min-width:210px}
.grupo .rot{font-family:var(--rot);font-size:.55rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grafite3);margin-bottom:12px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--rot);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--cerca);border-radius:var(--capsula);padding:9px 15px;background:transparent;
  color:var(--grafite2);cursor:pointer;transition:all .2s var(--curva)}
.chip:hover{border-color:var(--grafite3)}
.chip.sel{background:var(--grafite);color:var(--dia);border-color:var(--grafite)}
.chip.marca.sel{background:var(--acento);border-color:var(--acento);color:var(--acento-tx)}

/* a tela */
.tela{margin-top:44px;border:1px solid var(--cerca);border-radius:16px;overflow:hidden;background:var(--dia3);
  box-shadow:0 1px 2px rgba(23,24,27,.04),0 30px 70px -30px rgba(23,24,27,.28)}
.tela .topo{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--cerca);
  background:var(--dia2)}
.tela .pontos{display:flex;gap:6px}
.tela .pontos i{width:9px;height:9px;border-radius:50%;background:var(--cerca);display:block}
.tela .url{font-family:var(--rot);font-size:.58rem;color:var(--grafite3);letter-spacing:.06em}
/* o domínio NÃO vai na cor da marca: acento claro como texto fino fica ilegível.
   O acento aparece onde é bloco, nunca onde é letra de 9px. */
.tela .url b{color:var(--grafite);font-weight:500}

/* ══ A BARRA É A DA LAGUNA, colada ══
   `apps/web/app/(dashboard)/layout.tsx`. Ele já tinha dito: *"as abas
   laterais nao mudam e a gente ja tem ela pronta, copia o da laguna que ja ta
   bonito"*. Eu tinha feito uma barra CLARA; a de lá é ESCURA, e é isso que
   faz a tela clara do conteúdo brilhar do lado.
   O que veio de lá, item por item:
     · 240px de largura, fundo tinta, texto papel a 70%;
     · topo com rótulo miúdo em maiúsculas + o nome do painel em corpo grande;
     · item de 16px de ícone, stroke 1.5, padding 6/2;
     · ATIVO = `bg branco a 10%` + borda esquerda de 2px em branco;
     · seções com rótulo de 10px, tracking .14em, papel a 35%;
     · rodapé com avatar, nome e papel de quem está logado.
   Só a cor de acento mudou: o dourado da Laguna virou o âmbar da marca. */
.corpo{display:grid;grid-template-columns:240px 1fr;min-height:560px;
  transition:grid-template-columns .2s ease-in-out}
.sim.recolhido .corpo{grid-template-columns:66px 1fr}
.lado{position:relative;background:var(--noite);color:var(--pedra);display:flex;flex-direction:column;
  border-right:0}
.lado .logo{display:block;padding:22px 24px 18px;border-bottom:1px solid rgba(250,250,248,.1);margin:0}
.lado .logo i{display:block;font-family:var(--rot);font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(250,250,248,.42);background:none;width:auto;height:auto;
  border-radius:0;font-style:normal}
/* 1,5rem estourava em duas linhas altas com "Norte Incorporadora" — e o
   nome do cliente é justamente o que pode ser longo. */
.lado .logo b{display:block;font-family:var(--m-tit);font-weight:500;font-size:1.32rem;color:var(--papel);
  margin-top:5px;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.sim.recolhido .lado .logo{padding:22px 0 18px;text-align:center}
.sim.recolhido .lado .logo i{display:none}
.sim.recolhido .lado .logo b{font-size:1rem}

.recolher{position:absolute;right:-12px;top:26px;z-index:6;width:24px;height:24px;border-radius:50%;
  background:var(--noite);border:1px solid rgba(250,250,248,.22);display:grid;place-items:center;
  cursor:pointer;color:rgba(250,250,248,.6);transition:.16s}
.recolher:hover{color:var(--papel);border-color:var(--pedra)}
.recolher svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

#lado{flex:1;padding:12px 0;display:flex;flex-direction:column}
.lado a{position:relative;display:flex;align-items:center;gap:12px;padding:9px 24px;
  color:rgba(250,250,248,.7);text-decoration:none;font-size:.88rem;font-weight:300;
  border-left:2px solid transparent;transition:color .16s,background .16s}
.lado a em{font-style:normal;white-space:nowrap;overflow:hidden}
.lado a .ic{flex:none;display:grid;place-items:center;width:16px;height:16px}
.lado a .ic svg{width:16px;height:16px;stroke-width:1.5}
.lado a:hover{color:var(--papel);background:rgba(255,255,255,.05)}
.lado a.on{color:var(--papel);background:rgba(255,255,255,.1);border-left-color:var(--acento)}
/* rótulo de seção, como o "section" da Laguna */
.lado .secao{padding:16px 24px 5px;font-family:var(--rot);font-size:.5rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(250,250,248,.35);font-weight:500}
.lado a .pt-ok{position:absolute;left:31px;top:9px;width:6px;height:6px;border-radius:50%;
  background:var(--ok);border:1.5px solid var(--noite)}
.sim.recolhido .lado a{justify-content:center;padding:10px 0;border-left:0;border-right:2px solid transparent}
.sim.recolhido .lado a.on{border-right-color:var(--acento)}
.sim.recolhido .lado a em,.sim.recolhido .lado .secao{display:none}
.sim.recolhido .lado a .pt-ok{left:auto;right:14px;top:7px}

/* o rodapé com quem está logado */
.lado-pe{padding:16px 24px;border-top:1px solid rgba(250,250,248,.1);display:flex;align-items:center;gap:10px}
.lado-pe .av{width:32px;height:32px;border-radius:50%;background:var(--acento);flex:none;
  display:grid;place-items:center;font-family:var(--m-tit);font-weight:600;font-size:.78rem;
  color:var(--acento-tx)}
.lado-pe .qu{min-width:0}
.lado-pe .qu b{display:block;font-size:.82rem;color:var(--papel);font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lado-pe .qu s{display:block;text-decoration:none;font-family:var(--rot);font-size:.48rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,248,.42)}
.sim.recolhido .lado-pe{padding:16px 0;justify-content:center}
.sim.recolhido .lado-pe .qu{display:none}

/* o respiro também é identidade: uma construtora quer denso, uma casa
   quer folgado. `--m-esp` multiplica o ar da tela. */
.conteudo{padding:calc(34px * var(--m-esp)) 38px;line-height:calc(1.5 * var(--m-esp))}
/* o campo de pergunta: a IA aparece NA tela, digitando, em vez de ser
   prometida num parágrafo. O cursor é o `i`, que pisca sozinho. */
.perg{display:flex;align-items:center;gap:11px;border:1px solid var(--cerca);border-radius:var(--capsula);
  padding:11px 18px;margin-bottom:26px;background:var(--dia2);font-size:.9rem;color:var(--grafite)}
.perg i{width:6px;height:15px;background:var(--acento);flex:none;animation:pisca 1.1s steps(2) infinite}
.perg span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.perg em{font-style:normal;font-family:var(--rot);font-size:.5rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grafite3);white-space:nowrap}
@keyframes pisca{0%,49%{opacity:1}50%,100%{opacity:.15}}
@container (max-width:899px){.perg em{display:none}}



/* ══ COPIADO DO painel.html DA CASA, e copiado de propósito ══
   A régua de [[ihc-a-forma-da-ficha-do-painel]] manda copiar, não reinventar,
   e eu reinventei duas vezes até ele cortar: *"não está minimalista, não tem
   ícone e não tem nada a ver com o painel que a gente tá fazendo... colar o
   painel que já está feito e bonito e aprovado e fazer uma versão dele na
   identidade"*.

   O que muda em relação ao que eu vinha fazendo, e é tudo escala:
     · o número é 26px, NÃO 46. O painel dele é discreto — quem grita é o
       dado que pede ação, não a fonte;
     · o rótulo é 9px em maiúsculas com 0.16em de espaço;
     · a legenda tem `min-height:2.6em`, senão os quatro cartões desalinham
       quando um rótulo dobra de linha;
     · o cartão é VIDRO: gradiente claro em diagonal, brilho branco interno de
       1px e sombra curta. Não é retângulo chapado.
   Só os tokens mudaram: a serifa do IHC virou var(--m-tit), --ink virou --grafite,
   --ouro virou --fio. A forma é a mesma, linha por linha. */
.viv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0 0}
.vv{position:relative;padding:16px 18px 15px;border-radius:14px;cursor:pointer;
  background:linear-gradient(155deg,rgba(255,255,255,.72),rgba(255,255,255,.42));
  border:1px solid var(--cerca);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(23,24,27,.04),0 10px 26px -14px rgba(23,24,27,.22);
  transition:transform .18s var(--curva),box-shadow .18s,border-color .18s}
.vv:hover{transform:translateY(-2px);border-color:var(--grafite3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 26px -12px rgba(23,24,27,.32)}
.vv-r{display:block;font-family:var(--m-txt);font-weight:500;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grafite3)}
.vv-n{display:block;font-family:var(--m-tit);font-weight:500;font-size:26px;line-height:1.05;
  margin-top:7px;letter-spacing:-.02em;color:var(--grafite);font-variant-numeric:tabular-nums}
.vv-x{display:block;font-style:normal;font-size:10.5px;color:var(--grafite3);margin-top:6px;
  text-wrap:pretty;min-height:2.6em;line-height:1.45}
.vv-et{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:999px;font-size:8px;
  letter-spacing:.1em;background:var(--a-veu);color:var(--acento);border:1px solid var(--a-borda)}

/* h3 herda `color:var(--papel)` do casca.css, que é branco — e a tela do
   painel é clara. É literalmente o aviso do sidebar.tsx: tinta branca sobre
   fundo claro não existe. Todo texto dentro do painel declara a sua tinta. */
.ptit{margin-top:4px}
.ptit h3{font-family:var(--m-tit);font-weight:600;font-size:clamp(1.4rem,2.4vw,1.95rem);
  color:var(--grafite);letter-spacing:-.03em;margin:0}

/* a âncora de hoje: data por extenso em minúscula, e à direita o que muda hoje */
.hoje{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:26px 0 0;padding-top:15px;border-top:1px solid var(--cerca)}
.hoje-d b{font-family:var(--m-tit);font-weight:500;font-size:15px;color:var(--grafite);
  text-transform:lowercase;letter-spacing:-.01em}
.hoje-d span{font-size:12px;color:var(--grafite2);margin-left:9px}
.hoje-x{font-size:11.5px;color:var(--grafite3);margin-left:auto;text-align:right;text-wrap:pretty}
.hoje-x b{color:var(--acento);font-weight:400}

/* ══ A PRATELEIRA, colada da que já existe ══
   Comparando lado a lado com a real, o que eu tinha errado:
     · TODAS FICAM APAGADAS. Ele apontou: *"olha as imagens ja acesas no erro
       antes do hover"*. A cascata que eu inventei deixava três acesas de
       saída — o acender é resposta ao dedo, não enfeite de entrada;
     · a luz é uma POÇA no chão, sutil e colorida. Não um halo forte atrás;
     · o nome é centralizado e sozinho, sem linha de status embaixo, que era
       o que sujava a fileira e desalinhava tudo;
     · e a fileira inteira vive dentro de um CARTÃO claro arredondado. */
.inv{margin-top:26px}
.inv-cab{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.inv-cab b{font-family:var(--m-tit);font-weight:600;font-size:.9rem;color:var(--grafite);letter-spacing:-.01em}
.inv-cab span{font-size:.72rem;color:var(--grafite3)}
.pmaq{display:flex;align-items:flex-end;gap:4px;overflow-x:auto;
  background:var(--dia2);border:1px solid var(--cerca);border-radius:18px;padding:22px 18px 18px}
.pmaq .lot{flex:1 1 0;min-width:88px;align-items:center}
.pmaq .stage{max-width:84px}
.pmaq .name{font-family:var(--m-tit);font-weight:500;font-size:.8rem;color:var(--grafite2);
  margin-top:8px;line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%}
.pmaq .lot:hover .name{color:var(--grafite)}
/* o halo forte sai de cena: quem marca é a poça, e ela é discreta */
.pmaq .halo{display:none}
.pmaq .pool{bottom:2px;height:9px;filter:blur(7px)}

.plista{margin-top:26px}
.plista .pcab{padding:0 0 12px}
.plista .lin:first-of-type{border-top:1px solid var(--cerca)}
/* zero na lateral: os 2px que estavam aqui punham a lista inteira em 40
   enquanto todo o resto da tela nasce em 38. */
.lin{display:grid;grid-template-columns:1fr auto 128px;gap:20px;align-items:center;padding:14px 0;
  border-bottom:1px solid var(--cerca);font-size:.95rem;font-weight:300}
.lin .pl-q{font-size:.78rem;color:var(--grafite2)}
.lin .v{text-align:right;font-family:var(--m-tit);font-weight:500;font-size:1rem;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pil{border-radius:var(--capsula);border:1px solid var(--cerca);padding:4px 11px;font-size:.68rem;
  color:var(--grafite2);white-space:nowrap;font-family:var(--m-txt)}
/* "aguarda você" é a única coisa da tela que pede ação: por isso é o acento
   CHEIO, não uma borda tímida. É a promessa do âmbar cumprida no produto. */
.pil.ac{background:var(--acento);border-color:var(--acento);color:var(--acento-tx)}
.entra{animation:sobe .5s var(--curva) both}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── A PRATELEIRA: O PALCO DA MAQUETE ────────────────────────────────
   Copiado do `lotHTML` da cidade real (docs/financas/dados/cidade.html), e
   copiado de propósito: a régua da casa diz que sem o palco a peça "vira
   ícone e não acende" — halo colorido atrás, poça de luz no chão, e a acesa
   por cima com drop-shadow na cor do status. Foi o que faltou na primeira
   versão, em que eu escolhia entre apagada e acesa em vez de acender.

   As duas imagens ocupam o MESMO retângulo, com object-fit:contain. É o que
   evita a peça mudar de tamanho ao acender — a régua chama isso de "pulo em
   vez de acender", e é a armadilha nº 1 do par. */
.prat-cab{margin-top:96px;max-width:64ch}
.prateleira{display:flex;align-items:flex-start;gap:26px;flex-wrap:wrap;margin-top:34px;
  border-top:1px solid var(--cerca);padding-top:40px}
.lot{position:relative;display:flex;flex-direction:column;align-items:center;flex:1 1 130px;
  cursor:default;user-select:none;transition:transform .35s var(--curva)}
.stage{position:relative;width:100%;aspect-ratio:1;max-width:160px}
.stage .halo{position:absolute;left:50%;bottom:0;width:118%;aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;opacity:0;transition:opacity .5s ease;z-index:0}
.stage .pool{position:absolute;left:50%;bottom:6px;width:52%;height:11px;transform:translateX(-50%);
  border-radius:50%;filter:blur(6px);opacity:.22;transition:all .45s var(--curva);z-index:0}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.stage .day{filter:drop-shadow(0 8px 12px rgba(0,0,0,.20));transition:filter .4s,opacity .5s ease}
.stage .lit{opacity:0;transition:opacity .5s ease}
/* acende por hover no desktop, e por cascata em qualquer lugar */
.lot:hover, .lot.acesa{transform:translateY(-8px)}
.lot:hover .stage .lit, .lot.acesa .stage .lit{opacity:1}
.lot:hover .stage .day, .lot.acesa .stage .day{opacity:0}
.lot:hover .stage .halo,.lot.acesa .stage .halo{opacity:1}
.lot:hover .stage .pool,.lot.acesa .stage .pool{width:70%;opacity:.85}
.lot .name{margin-top:10px;font-family:var(--m-tit);font-weight:600;font-size:.86rem;color:var(--grafite);
  text-align:center;line-height:1.25}
.lot .tag{font-size:.46rem !important;margin-top:6px;color:var(--grafite3) !important}
.lot .dado{font-size:.7rem;color:var(--grafite3);margin-top:5px;text-align:center;line-height:1.35;
  transition:color .4s ease}
.lot .dado.pede{color:var(--acento)}
@container (max-width:899px){
  .prateleira{gap:16px;padding-top:28px}
  .lot{flex:1 1 40%}
  .prat-cab{margin-top:64px}
}

/* integrações */
.integra{margin-top:110px}
.familia{margin-top:34px}
.familia .rot{font-family:var(--rot);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grafite3);padding-bottom:12px;border-bottom:1px solid var(--cerca)}
.marcas{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mk{display:flex;align-items:center;gap:9px;border:1px solid var(--cerca);border-radius:10px;
  padding:11px 16px;background:var(--dia2);font-size:.88rem;color:var(--grafite)}
.mk i{width:7px;height:7px;border-radius:2px;background:var(--grafite3);display:block;flex:none}
.mk.viva i{background:var(--ok-dia)}
.mk small{font-family:var(--rot);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grafite3)}

@container (max-width:899px){
  .pnums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn.destaque{grid-column:1/-1}
  .corpo{grid-template-columns:minmax(0,1fr)}
  /* A BARRA VIRA FAIXA, E A FAIXA PRECISA ALCANÇAR OS LINKS.
     O `display:flex` estava na `.lado`, mas os dez links moram dentro de um
     div filho (`#lado`) — o flex parava nele, e no celular o menu descia
     empilhado: 800px de barra antes de qualquer conteúdo. O flex tem que
     estar nos dois níveis. */
  .lado{border-right:0;border-bottom:1px solid var(--cerca);padding:0;overflow:hidden}
  .lado .logo,.lado .recolher,.lado .lado-pe{display:none}
  /* tem que ser #lado: a regra do desktop usa ID, e uma classe nunca ganha
     dele — o menu continuava em coluna com o flex-direction certo escrito
     logo acima, sem efeito nenhum. */
  #lado{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:10px 12px}
  #lado::-webkit-scrollbar{display:none}
  .lado a{border-left:0;border-bottom:2px solid transparent;white-space:nowrap;padding:8px 14px;
    flex:none;gap:8px}
  .lado a.on{border-bottom-color:var(--acento);background:transparent}
  .conteudo{padding:24px 20px}
  .cds{grid-template-columns:minmax(0,1fr)}
  .lin{grid-template-columns:1fr 96px;gap:10px}
  .lin .pl-q{display:none}
  .controles{gap:22px}
}

/* ══ CADA SALA COM A SUA CARA ══════════════════════════════════════════
   Sete salas com o mesmo layout é a mesma tela repintada sete vezes — e a
   demo existe justamente para mostrar que o produto tem telas diferentes. */

/* O FUNIL, na cara do CRM: coluna por etapa, card por negócio. */
.funil{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:26px}
.fcol{background:var(--dia2);border:1px solid var(--cerca);border-radius:12px;padding:12px 10px;
  display:flex;flex-direction:column;gap:8px}
.fcab{display:flex;align-items:center;gap:7px;font-family:var(--rot);font-size:.52rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grafite2);padding:0 2px 8px;
  border-bottom:1px solid var(--cerca)}
.fcab i{width:6px;height:6px;border-radius:50%;flex:none}
.fcab b{margin-left:auto;font-weight:400;color:var(--grafite3)}
.fcard{background:var(--dia3);border:1px solid var(--cerca);border-radius:9px;padding:11px 12px;
  transition:transform .16s var(--curva),box-shadow .16s}
.fcard:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(23,24,27,.28)}
.fcard.pede{border-color:var(--a-borda);background:var(--a-veu)}
.fq{font-size:.82rem;color:var(--grafite);font-weight:400;line-height:1.25}
.fv{font-family:var(--m-tit);font-weight:500;font-size:.95rem;color:var(--grafite);margin-top:6px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fd{display:flex;align-items:center;gap:6px;font-size:.66rem;color:var(--grafite3);margin-top:8px}
.fav{width:18px;height:18px;border-radius:50%;background:var(--cerca);color:var(--grafite2);
  display:grid;place-items:center;font-size:.5rem;font-weight:600;flex:none;font-family:var(--m-tit)}
.fcard.pede .fd{color:var(--acento)}

/* A VIDA FINANCEIRA: para onde o dinheiro foi, em barra. Não é planilha. */
.fin{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;margin-top:26px}
.fin-rot{font-size:.5rem !important;color:var(--grafite3) !important;margin-bottom:14px}
.fin-linha{display:grid;grid-template-columns:130px 1fr 110px;gap:14px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--cerca)}
.fin-q{font-size:.86rem;color:var(--grafite2)}
.fin-b{height:8px;border-radius:2px;background:rgba(23,24,27,.06);overflow:hidden}
.fin-b i{display:block;height:100%;background:var(--grafite2);border-radius:2px}
.fin-linha.alerta .fin-b i{background:var(--acento)}
.fin-linha.alerta .fin-q,.fin-linha.alerta .fin-v{color:var(--acento)}
.fin-v{text-align:right;font-family:var(--m-tit);font-weight:500;font-size:.86rem;color:var(--grafite);
  font-variant-numeric:tabular-nums}
.fin-obs{font-size:.74rem;color:var(--grafite3);margin-top:14px;max-width:52ch}
.fin-fecha{border:1px solid var(--cerca);border-radius:12px;background:var(--dia2);padding:18px 20px}
.ff{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0}
.ff span{font-size:.8rem;color:var(--grafite2)}
.ff b{font-family:var(--m-tit);font-weight:500;font-size:1.05rem;color:var(--grafite);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ff.sai b{color:var(--grafite2)}
.ff.sobra{border-top:1px solid var(--cerca);margin-top:6px;padding-top:14px}
.ff.sobra b{font-size:1.4rem;color:var(--ok-dia)}
.fin-nota{font-size:.72rem;color:var(--grafite3);margin-top:14px;line-height:1.5}

/* OS AGENTES: quem trabalha por você, o que faz e o que fez hoje. */
.agentes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:26px}
.ag{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;
  border:1px solid var(--cerca);border-radius:12px;padding:16px 18px;background:var(--dia2)}
.ag-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:rgba(23,24,27,.05);color:var(--grafite3)}
.ag-ic svg{width:17px;height:17px}
.ag.vivo .ag-ic{background:var(--a-veu);color:var(--acento)}
.ag-t b{display:block;font-family:var(--m-tit);font-weight:600;font-size:.9rem;color:var(--grafite);
  letter-spacing:-.01em}
.ag-t span{display:block;font-size:.78rem;color:var(--grafite2);margin-top:4px;line-height:1.45}
.ag-f{grid-column:2;font-family:var(--rot);font-size:.56rem;letter-spacing:.1em;color:var(--grafite3);
  margin-top:10px;padding-top:9px;border-top:1px solid var(--cerca)}
.ag.vivo .ag-f{color:var(--acento)}
@container (max-width:899px){
  .funil{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fin{grid-template-columns:1fr;gap:24px}
  .fin-linha{grid-template-columns:100px 1fr 92px;gap:10px}
  .agentes{grid-template-columns:minmax(0,1fr)}
}

/* O SINO E A FILA. O painel precisa de um lugar para onde a atenção vai
   quando alguma coisa acontece — na Laguna é o sino com badge no topo. */
.sino{position:relative;margin-left:auto}
.sn{position:relative;background:none;border:0;cursor:pointer;color:var(--grafite3);padding:4px;
  display:grid;place-items:center;transition:color .16s}
.sn:hover{color:var(--grafite)}
.sn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.sn b{position:absolute;top:-2px;right:-4px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;
  background:var(--acento);color:var(--noite);font-family:var(--m-tit);font-size:9px;font-weight:600;
  display:grid;place-items:center;line-height:1}
.sn-fila{position:absolute;right:0;top:30px;width:310px;z-index:20;background:var(--dia3);
  border:1px solid var(--cerca);border-radius:12px;padding:6px;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:.18s var(--curva);
  box-shadow:0 20px 44px -20px rgba(23,24,27,.34)}
.sino:hover .sn-fila{opacity:1;visibility:visible;transform:none}
.snf{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;font-size:.78rem;
  color:var(--grafite2)}
.snf:hover{background:var(--dia2)}
.snf i{width:6px;height:6px;border-radius:50%;background:var(--cerca);flex:none}
.snf i.fio{background:var(--acento)}
.snf span{flex:1;min-width:0}
.snf em{font-style:normal;font-size:.64rem;color:var(--grafite3);white-space:nowrap}

/* ══ O INBOX, copiado do `whatsapp-inbox.tsx` da Laguna ══════════════════
   Card de altura fixa dividido em duas colunas: fila de conversas à esquerda,
   conversa aberta à direita, com busca no topo da fila e campo de resposta no
   pé. É a lista lateral que faz parecer caixa de entrada — sem ela é só um
   print de conversa solto, que foi o que eu tinha feito.

   zg:externo — o verde do WhatsApp fica confinado às bolhas e ao cabeçalho.
   Pintar de âmbar destruiria o reconhecimento, que é a razão da tela. */
.ibx{display:grid;grid-template-columns:264px 1fr;height:520px;margin-top:26px;
  border:1px solid var(--cerca);border-radius:14px;overflow:hidden;background:var(--dia3)}
.ibx-fila{border-right:1px solid var(--cerca);background:var(--dia2);overflow-y:auto}
.ibx-busca{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--cerca);
  color:var(--grafite3);font-size:.78rem}
.ibx-busca svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.ibx-i{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--cerca);
  cursor:pointer;transition:background .15s}
.ibx-i:hover{background:var(--dia3)}
.ibx-i.on{background:var(--dia3);box-shadow:inset 2px 0 0 var(--acento)}
.ibx-av{width:38px;height:38px;border-radius:50%;background:var(--dia);color:var(--grafite2);
  display:grid;place-items:center;font-family:var(--m-tit);font-weight:600;font-size:.82rem;flex:none}
.ibx-av.gr{background:rgba(255,255,255,.24);color:#fff}
.ibx-t{flex:1;min-width:0}
.ibx-t b{display:block;font-size:.8rem;color:var(--grafite);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ibx-t span{display:block;font-size:.72rem;color:var(--grafite3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ibx-m{text-align:right;flex:none}
.ibx-m em{display:block;font-style:normal;font-size:.62rem;color:var(--grafite3)}
.tg{display:inline-block;text-decoration:none;margin-top:4px;font-family:var(--rot);font-size:.44rem;
  letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:4px;
  background:rgba(23,24,27,.06);color:var(--grafite3)}
.tg.lead{background:var(--a-veu);color:var(--acento)}

.ibx-conv{display:flex;flex-direction:column;min-width:0}
/* zg:externo · o verde do cabeçalho do WhatsApp */
.ibx-cab{display:flex;align-items:center;gap:11px;padding:11px 16px;background:#075E54;color:#fff;flex:none}
.ibx-cab b{display:block;font-size:.86rem;font-weight:500}
.ibx-cab span{display:block;font-size:.66rem;opacity:.72}
.ibx-bot{margin-left:auto;font-family:var(--rot);font-size:.46rem;letter-spacing:.12em;
  text-transform:uppercase;background:rgba(255,255,255,.18);padding:4px 9px;border-radius:999px}
/* zg:externo · o papel de parede do WhatsApp */
.ibx-msgs{flex:1;overflow-y:auto;padding:16px 18px;background:#ECE5DD;
  display:flex;flex-direction:column;gap:8px}
.ibx-linha{display:flex}
.ibx-linha.ela{justify-content:flex-start}
.ibx-linha.mq,.ibx-linha.ele{justify-content:flex-end}
.ibx-bolha{max-width:74%;padding:7px 10px 5px;border-radius:8px;background:#fff;
  box-shadow:0 1px .5px rgba(0,0,0,.13)}
/* zg:externo · o verde da bolha enviada */
.ibx-linha.mq .ibx-bolha,.ibx-linha.ele .ibx-bolha{background:#DCF8C6}
.ibx-bolha p{margin:0;font-size:.82rem;line-height:1.4;color:#111B21}
.ibx-bolha em{display:block;font-style:normal;font-size:.58rem;color:rgba(0,0,0,.45);
  text-align:right;margin-top:2px}
/* zg:externo · verde e âmbar do rótulo de quem falou */
.ibx-quem{display:block;font-family:var(--rot);font-size:.44rem;letter-spacing:.1em;
  text-transform:uppercase;color:#0A6B57;margin-bottom:3px}
.ibx-quem.hum{color:#8A5A1E}
.ibx-corte{display:flex;align-items:center;gap:9px;margin:4px 0;font-family:var(--rot);
  font-size:.46rem;letter-spacing:.1em;text-transform:uppercase;color:#8A5A1E}
.ibx-corte i{flex:1;height:1px;background:rgba(138,90,30,.28)}
.ibx-campo{flex:none;padding:11px 16px;border-top:1px solid var(--cerca);background:var(--dia2);
  font-size:.74rem;color:var(--grafite3)}
@container (max-width:899px){.ibx{grid-template-columns:1fr;height:auto}.ibx-fila{display:none}}

/* ══ O CALENDÁRIO, copiado do `ig-calendar.tsx` ══════════════════════════
   Chips de contagem, navegação de mês e grade de sete colunas com as peças
   dentro dos dias. É a grade que faz entender "programa sozinho" sem ler
   nenhuma frase: dá para ver a semana inteira já cheia. */
.mkt-chips{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:26px}
.mc{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--cerca);border-radius:9px;
  padding:7px 12px;background:var(--dia2);font-size:.72rem;color:var(--grafite2)}
.mc i{width:7px;height:7px;border-radius:50%;background:var(--grafite3)}
.mc i.ok{background:var(--ok-dia)} .mc i.ag{background:var(--acento)}
.mc i.ras{background:var(--grafite3);opacity:.5}
.mc b{font-family:var(--m-tit);font-weight:600;color:var(--grafite);font-variant-numeric:tabular-nums}
.mc.so i{display:none}
.mkt-perfil{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:.74rem;
  color:var(--grafite3)}
/* zg:externo · o degradê do Instagram */
.mkt-perfil s{width:22px;height:22px;border-radius:50%;text-decoration:none;
  background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}

.cal{margin-top:16px;border:1px solid var(--cerca);border-radius:14px;overflow:hidden;background:var(--dia3)}
.cal-cab{display:flex;align-items:center;justify-content:center;gap:22px;padding:13px;
  border-bottom:1px solid var(--cerca);background:var(--dia2)}
.cal-cab b{font-family:var(--m-tit);font-weight:600;font-size:.92rem;color:var(--grafite)}
.cal-cab span{color:var(--grafite3);cursor:pointer;font-size:1.1rem;line-height:1}
.cal-sem{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--cerca)}
.cal-sem span{text-align:center;padding:7px 0;font-family:var(--rot);font-size:.46rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grafite3)}
.cal-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-c{min-height:78px;border-right:1px solid var(--cerca);border-bottom:1px solid var(--cerca);
  padding:6px 5px;display:flex;flex-direction:column;gap:3px}
.cal-c:nth-child(7n){border-right:0}
.cal-c.vazia{background:var(--dia2)}
.cal-c.hoje{background:var(--a-veu)}
.cal-d{font-size:.68rem;color:var(--grafite3);font-variant-numeric:tabular-nums}
.cal-c.hoje .cal-d{color:var(--acento);font-weight:600}
.cal-p{display:block;font-size:.58rem;line-height:1.25;padding:3px 5px;border-radius:4px;
  background:rgba(23,24,27,.06);color:var(--grafite2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.cal-p b{font-weight:600;margin-right:3px}
.cal-p.pub{background:rgba(74,143,92,.14);color:var(--ok-dia)}
.cal-p.ag{background:var(--a-veu);color:var(--acento)}
.cal-p.ras{background:rgba(23,24,27,.05);color:var(--grafite3);font-style:italic}
.mkt-pe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.soc-b{border:1px solid var(--cerca);border-radius:12px;padding:14px 16px;background:var(--dia2)}
.soc-b b{display:block;font-family:var(--m-tit);font-weight:600;font-size:.84rem;color:var(--grafite)}
.soc-b span{display:block;font-size:.74rem;color:var(--grafite2);margin-top:5px;line-height:1.45}
.soc-b.pede{border-color:var(--a-borda);background:var(--a-veu)}
.soc-b.pede b{color:var(--acento)}
@container (max-width:899px){
  .cal-c{min-height:56px} .cal-p{font-size:.5rem}
  .mkt-pe{grid-template-columns:minmax(0,1fr)}
  .zap{grid-template-columns:1fr;gap:18px}
  .grade-ig{grid-template-columns:repeat(2,minmax(0,1fr))}
  .soc-pe{grid-template-columns:minmax(0,1fr)}
}

/* ══ A GRADE DO INSTAGRAM, com as fotos ══════════════════════════════════
   Eu tinha feito e apaguei ao pôr o calendário. É ela que faz a pessoa VER a
   rede social dentro do painel — sem foto, "programa post sozinho" é uma
   frase; com a grade, é a conta dela na tela. */
.soc-cab{display:flex;align-items:center;gap:12px;margin-top:22px;padding-bottom:13px;
  border-bottom:1px solid var(--cerca);flex-wrap:wrap}
.soc-perfil{display:flex;align-items:center;gap:9px}
/* zg:externo · o degradê do Instagram */
.soc-perfil i{width:32px;height:32px;border-radius:50%;flex:none;
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.soc-perfil b{font-size:.88rem;color:var(--grafite);font-weight:500}
.soc-perfil s{text-decoration:none;font-size:.72rem;color:var(--grafite3);margin-left:7px}
.soc-chip{margin-left:auto;font-family:var(--rot);font-size:.48rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acento);border:1px solid var(--a-borda);
  background:var(--a-veu);padding:5px 11px;border-radius:999px}
/* O PERFIL É UMA MALHA DE QUADRADOS COLADOS. Sem cartão, sem legenda
   embaixo, sem borda — é assim que o Instagram é, e é por isso que se
   reconhece de longe. Eu tinha feito cards com legenda, que viram catálogo
   de e-commerce e não parecem rede social nenhuma. */
.grade-ig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin-top:14px;
  max-width:420px;background:var(--cerca);border:1px solid var(--cerca);border-radius:4px;
  overflow:hidden}
.ig{position:relative;margin:0;aspect-ratio:1;overflow:hidden;background:var(--noite2);cursor:pointer}
.ig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s var(--curva)}
.ig:hover img{transform:scale(1.06)}
.ig-st{position:absolute;top:6px;left:6px;font-style:normal;font-family:var(--rot);font-size:.4rem;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;border-radius:3px;
  background:var(--acento);color:var(--noite)}
.ig.rascunho .ig-st{background:rgba(250,250,248,.94);color:var(--grafite2)}
@container (max-width:899px){.grade-ig{max-width:none}}

/* o cabeçalho do perfil: foto redonda, arroba, e os três números lado a lado.
   É a assinatura visual do Instagram, e sem ela a malha podia ser qualquer
   galeria de fotos. */
.perfil-ig{display:flex;align-items:flex-start;gap:20px;margin-top:22px;padding-bottom:16px;
  border-bottom:1px solid var(--cerca)}
/* zg:externo · o degradê do anel de perfil do Instagram */
.pf-foto{width:62px;height:62px;border-radius:50%;flex:none;
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  box-shadow:inset 0 0 0 3px var(--dia3)}
.pf-d b{font-size:1rem;color:var(--grafite);font-weight:500}
.pf-n{display:flex;gap:22px;margin-top:9px}
.pf-n span{font-size:.76rem;color:var(--grafite2)}
.pf-n span b{font-family:var(--m-tit);font-weight:600;color:var(--grafite);margin-right:5px;
  font-variant-numeric:tabular-nums}
.pf-d p{font-size:.76rem;color:var(--grafite2);margin:9px 0 0;line-height:1.5}
.perfil-ig .soc-chip{margin-left:auto;align-self:center}
@container (max-width:899px){.perfil-ig{gap:14px}.pf-foto{width:48px;height:48px}
  .perfil-ig .soc-chip{display:none}}

/* ══ A TELA SOCIAL, copiada do Studio ════════════════════════════════════
   Abas de plataforma, linha de redes, seletor de contas com anel no ativo,
   quatro métricas com ícone — e o PREVIEW DO CELULAR à direita, que é o
   elemento que faltava e o que torna a tela visual. Sem o telefone, "programa
   post sozinho" é texto; com ele, a pessoa vê o próprio perfil. */
.soc-abas{display:flex;gap:4px;flex-wrap:wrap;margin-top:24px;background:var(--dia2);
  border:1px solid var(--cerca);border-radius:999px;padding:5px;width:max-content}
.ab{padding:7px 16px;border-radius:999px;font-size:.78rem;color:var(--grafite2);cursor:pointer;
  transition:.16s}
.ab:hover{color:var(--grafite)}
.ab.on{background:var(--dia3);color:var(--grafite);box-shadow:0 1px 3px rgba(23,24,27,.1)}
.ab.mais{color:var(--grafite3);padding:7px 13px}

.soc-redes{display:flex;align-items:center;gap:6px;margin-top:16px}
.rd{width:34px;height:34px;border-radius:50%;border:1px solid var(--cerca);display:grid;
  place-items:center;color:var(--grafite3);cursor:pointer;transition:.16s}
.rd svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.rd:hover{color:var(--grafite);border-color:var(--grafite3)}
.rd.on{background:var(--grafite);color:var(--dia);border-color:var(--grafite)}
.soc-como{display:flex;align-items:center;gap:8px;margin-left:14px;font-size:.78rem;color:var(--grafite2)}
.soc-como i{width:26px;height:26px;border-radius:50%;background:var(--acento);color:var(--acento-tx);
  display:grid;place-items:center;font-family:var(--m-tit);font-weight:600;font-size:.62rem;font-style:normal}

.soc-atual{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:14px}
.soc-atual i{width:7px;height:7px;border-radius:50%;background:var(--acento);flex:none;
  align-self:center}
.soc-atual b{font-weight:500;font-size:.88rem;color:var(--grafite)}
.soc-atual span{font-size:.8rem;color:var(--grafite2)}
.soc-atual em{font-style:normal;font-size:.74rem;color:var(--grafite3)}

.soc-linha{display:grid;grid-template-columns:1fr 300px;gap:30px;margin-top:20px;align-items:start}
.soc-contas{display:flex;gap:18px}
.cnt{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.66rem;
  color:var(--grafite3);cursor:pointer;max-width:74px;text-align:center}
.cnt s{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;overflow:hidden;
  text-decoration:none;background:var(--cerca);border:2px solid transparent;
  font-family:var(--rot);font-size:.72rem;color:var(--grafite2);letter-spacing:.02em}
.cnt s img{width:100%;height:100%;object-fit:contain;padding:9%;display:block}
.cnt.on{color:var(--acento)}
.cnt.on s{border-color:var(--acento)}
.soc-mt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
.mt{border:1px solid var(--cerca);border-radius:12px;padding:14px 16px;background:var(--dia2)}
.mt-k{display:flex;align-items:center;justify-content:space-between;font-size:.72rem;color:var(--grafite2)}
.mt-k i{color:var(--grafite3)}
.mt-k svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.mt-v{font-family:var(--m-tit);font-weight:500;font-size:1.5rem;color:var(--grafite);margin-top:8px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mt-d{font-size:.66rem;color:var(--grafite3);margin-top:3px}
.soc-linha .cal{margin-top:18px}

/* ══ O CELULAR, com as medidas do `phone-mockup.tsx` ═════════════════════
   Copiadas literalmente: corpo em 2.5rem de raio com padding 3, notch de
   90×22, tela de 580px com raio 2rem, foto de 72px com anel de 2.5px,
   números em 15px bold com rótulo em 11px, bio em 11px, botões em 11px
   semibold com padding 6px. Só a paleta virou a do Zigurate. */
.prv-tabs{display:flex;gap:2px;padding:4px;border:1px solid var(--cerca);border-radius:999px;
  width:max-content;margin:0 auto 12px}
.prv-tabs span{height:28px;padding:0 12px;border-radius:999px;font-size:11.5px;color:var(--grafite2);
  cursor:pointer;display:grid;place-items:center}
.prv-tabs span.on{background:var(--dia2);color:var(--grafite)}
.fone{background:var(--noite);border-radius:2.5rem;padding:12px;
  border:1px solid rgba(250,250,248,.14);box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}
.fone-notch{width:90px;height:22px;background:#000;border-radius:999px;margin:0 auto 6px}
.fone-tela{background:var(--noite);border-radius:2rem;height:520px;overflow-y:auto;scrollbar-width:none}
.fone-tela::-webkit-scrollbar{display:none}
.fone-topo{display:flex;align-items:center;justify-content:space-between;padding:8px 16px}
.fone-topo b{color:var(--papel);font-size:13px;font-weight:700;letter-spacing:-.01em}
.fone-topo span{color:var(--papel);letter-spacing:5px;font-size:15px}
.fone-perfil{display:flex;align-items:center;gap:20px;padding:4px 16px 8px}
/* zg:externo · o anel de perfil do Instagram, com as cores do original */
.fp-foto{width:72px;height:72px;border-radius:50%;flex:none;padding:2.5px;
  background:linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5)}
.fp-foto i{display:block;width:100%;height:100%;border-radius:50%;background:var(--noite);padding:2px}
.fp-foto i s{display:block;width:100%;height:100%;border-radius:50%;background:var(--noite2);
  overflow:hidden}
.fp-foto i s img{width:100%;height:100%;object-fit:contain;padding:6%;display:block}
.fp-n{display:flex;flex:1;justify-content:space-around}
.fp-n span{text-align:center}
.fp-n span b{display:block;color:var(--papel);font-size:15px;font-weight:700;line-height:1.15;
  font-variant-numeric:tabular-nums}
.fp-n span i{display:block;font-style:normal;color:rgba(250,250,248,.55);font-size:11px}
.fone-bio{padding:0 16px}
.fone-bio b{display:block;color:var(--papel);font-size:12px;font-weight:600;line-height:1.2}
.fone-bio p{color:rgba(250,250,248,.66);font-size:11px;line-height:1.35;margin:2px 0 0;white-space:pre-line}
/* zg:externo · o azul de link do Instagram, como no original */
.fone-bio s{display:block;text-decoration:none;color:#E0F1FF;font-size:11px;font-weight:500;margin-top:2px}
.fone-bt{display:flex;gap:6px;padding:12px 16px 0}
.fone-bt span{flex:1;min-width:0;text-align:center;background:var(--noite2);color:var(--papel);font-size:11px;
  font-weight:600;padding:6px 0;border-radius:8px}
.fone-bt span.fb-mais{flex:none;width:32px}
.fone-dst{display:flex;gap:12px;padding:10px 16px 12px;overflow-x:auto;scrollbar-width:none}
.fone-dst::-webkit-scrollbar{display:none}
.fone-dst figure{margin:0;flex:none;width:54px;text-align:center}
/* zg:externo · os destaques do Instagram: 54px com anel fino, e o rótulo em
   10px logo abaixo — as medidas do original. */
.fone-dst i{display:block;width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(250,250,248,.20);background:var(--noite2);overflow:hidden}
.fone-dst i img{width:100%;height:100%;object-fit:contain;padding:14%;display:block}
.fone-dst figcaption{font-size:10px;color:rgba(250,250,248,.62);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fone-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:6px}
/* AS MAQUETES TÊM FUNDO TRANSPARENTE, e num feed escuro elas flutuavam no
   preto: nove buracos, nada que lembre post. Cada célula ganha o próprio
   fundo — é assim que uma incorporadora posta render, sobre cor chapada —
   e a peça entra `contain`, inteira, com respiro. O ciclo de quatro fundos
   dá ao feed a variação que um feed de verdade tem. */
.fg{position:relative;margin:0;aspect-ratio:1;overflow:hidden;background:var(--dia)}
.fg:nth-child(4n+2){background:var(--noite2)}
.fg:nth-child(4n+3){background:var(--dia3)}
.fg:nth-child(4n){background:var(--a-veu)}
.fg img{width:100%;height:100%;object-fit:contain;display:block;padding:7%}
.fg em{position:absolute;top:4px;left:4px;font-style:normal;font-family:var(--rot);font-size:.36rem;
  letter-spacing:.08em;text-transform:uppercase;padding:2px 5px;border-radius:3px;
  background:var(--acento);color:var(--noite)}
.fg.rascunho em{background:rgba(250,250,248,.9);color:var(--grafite2)}
.prv-obs{font-size:.7rem;color:var(--grafite3);text-align:center;margin-top:12px}
@container (max-width:899px){
  .soc-linha{grid-template-columns:minmax(0,1fr)}
  .soc-mt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .soc-dir{max-width:300px;margin:0 auto}
}

/* ══ O CRM ═══════════════════════════════════════════════════════════════
   As medidas vêm do `LeadsView.tsx` da Laguna: chip de 10px com padding
   1.5/0.5 e raio total, avatar de 38px, nome em 14px, sublinha em 11px,
   ícone de 14px, linha com 10px de padding vertical e divisória fina.
   A paleta é a nossa — inclusive a temperatura, que lá tinha três cores
   próprias e aqui sai de âmbar, pedra e grafite. */
.crm{margin-top:22px;border-top:1px solid var(--cerca);padding-top:20px}
.crm-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cpil{display:flex;align-items:center;gap:2px;padding:3px;border-radius:var(--capsula);
  background:rgba(23,24,27,.05)}
.cpil span{font-size:12px;padding:5px 14px;border-radius:var(--capsula);color:var(--grafite2);
  white-space:nowrap;cursor:default}
.cpil span.on{background:var(--grafite);color:var(--papel)}
.cpil span.ic{display:grid;place-items:center;width:30px;height:30px;padding:0}
.cpil span.ic svg{width:15px;height:15px}
.crm-fil{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.crm-busca{display:flex;align-items:center;gap:8px;flex:1;min-width:220px;background:var(--dia3);
  border:1px solid var(--cerca);border-radius:12px;padding:9px 16px;font-size:13px;color:var(--grafite3)}
.crm-busca svg{width:15px;height:15px;flex:none}
.crm-lista{border:1px solid var(--cerca);border-radius:var(--m-raio);background:var(--dia3);overflow:hidden}
.crl{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--cerca)}
.crl:first-child{border-top:0}
.lav{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--dia);color:var(--grafite2);font-family:var(--rot);font-size:.72rem;letter-spacing:.02em}
.lav.pj{color:var(--grafite3)}
.lav svg{width:16px;height:16px}
.lt{min-width:0;flex:1}
.ln{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.ln b{font-size:14px;font-weight:500;color:var(--grafite)}
.ch{display:inline-flex;align-items:center;gap:4px;text-decoration:none;font-size:10px;font-weight:500;
  padding:2px 6px;border-radius:var(--capsula);white-space:nowrap}
.ch.lead{color:var(--ok-dia);background:rgba(74,143,92,.13)}
.ch.cliente{color:var(--grafite);background:rgba(23,24,27,.07)}
.ch.perdido{color:var(--grafite3);background:rgba(23,24,27,.05)}
.ch.t-quente{color:var(--a-tx);background:var(--a-veu)}
.ch.t-morno{color:var(--pedra-esc);background:rgba(140,133,120,.14)}
.ch.t-frio{color:var(--grafite3);background:rgba(23,24,27,.05)}
.ch.esp{color:var(--a-tx);background:var(--a-veu)}
/* o sinal AO VIVO do original: um ponto que pulsa, e é ele que faz a lista
   parecer viva em vez de tabela. */
.ch.viva{color:var(--ok-dia);background:rgba(74,143,92,.14)}
.ch.viva i{width:6px;height:6px;border-radius:50%;background:var(--ok-dia);animation:pulsa 1.6s infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.25}}
.ls{font-size:11px;color:var(--grafite3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lic{color:var(--grafite3);flex:none;display:grid;place-items:center}
.lic svg{width:14px;height:14px}
.lic.seta svg{width:15px;height:15px}
.crm-pe{font-size:11px;color:var(--grafite3);margin-top:10px}
@container (max-width:899px){
  .crm-cab{flex-direction:column;align-items:stretch}
  .cpil{overflow-x:auto;scrollbar-width:none}
  .cpil::-webkit-scrollbar{display:none}
  .ls{white-space:normal}
}

/* ══ PESSOAS ═════════════════════════════════════════════════════════════
   As medidas do `.pf` do painel da casa: grade que se preenche a partir de
   124px com 11px de vão, cartão de raio 12 e padding 14/10, retrato de 56px,
   nome em 13.5px, linha de baixo em 10.5px. O rótulo do grupo em 10.5px com
   .14em de entreletra, que é como aquele painel nomeia seção. */
.pgr{margin-bottom:22px}
.pgr:last-child{margin-bottom:0}
.pgr h4{display:flex;align-items:baseline;gap:8px;font-family:var(--m-txt);font-weight:500;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grafite3);margin:0 0 11px}
.pgr h4 em{font-style:normal;letter-spacing:.02em;text-transform:none;font-size:11px}
.pgd{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:11px}
.pf{display:flex;flex-direction:column;background:var(--dia3);border:1px solid var(--cerca);
  border-radius:12px;padding:14px 10px;text-align:center;
  transition:transform .18s var(--curva),border-color .18s}
/* o A LEVANTAR desce para o pé do cartão, e por isso todos fecham na mesma
   linha de base — a régua do original, onde os cartões nunca ficam tortos. */
.pf .pl-fa{margin-top:auto}
.pf:hover{transform:translateY(-2px);border-color:var(--pedra-esc)}
.pf .foto{width:56px;height:56px;border-radius:50%;margin:0 auto 9px;display:grid;place-items:center;
  background:radial-gradient(70% 70% at 50% 35%,var(--dia2),var(--dia))}
.pf .foto span{font-family:var(--rot);font-size:13px;letter-spacing:.02em;color:var(--grafite2)}
.pf b{display:block;font-weight:500;font-size:13.5px;color:var(--grafite)}
.pf>em{display:block;font-style:normal;font-size:10.5px;color:var(--grafite3);margin-top:1px}
.pf-c{display:block;font-size:10.5px;color:var(--grafite2);margin-top:7px;line-height:1.3}
.pf i{display:block;font-style:normal;font-family:var(--m-tit);font-size:15px;color:var(--grafite);
  margin-top:5px;font-variant-numeric:tabular-nums}
.pf-s{display:block;margin-top:7px;font-size:11px;color:var(--grafite2)}
.pf-s em{display:block;font-style:normal;font-size:9.5px;color:var(--grafite3);margin-top:1px}
/* A LEVANTAR: o campo que não se sabe aparece dizendo que não se sabe. */
.pl-fa{display:block;margin-top:8px;padding-top:7px;border-top:1px solid var(--cerca);
  text-decoration:none;font-family:var(--rot);font-size:9px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--a-tx);line-height:1.4}

/* ══ O COFRE ═════════════════════════════════════════════════════════════
   As medidas do `.fdocs` do painel da casa: caixa de raio 13 com borda fina,
   linha de 14/15 com 12 de vão, nome em 13.5px, e o chevron ‹›› no fim, que
   é o que promete que abre. O rótulo do grupo em 9.5px com .16em, e a
   contagem do que pede você numa pílula ao lado — o alerta mora no objeto. */
.fgru{display:flex;align-items:center;gap:9px;font-family:var(--m-txt);font-weight:500;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grafite3);margin:22px 0 7px}
.fgru:first-child{margin-top:0}
.fgru i{font-style:normal;font-size:8.5px;letter-spacing:.12em;padding:3px 8px;
  border-radius:var(--capsula);background:var(--a-veu);color:var(--a-tx)}
.fgru em{font-style:normal;font-size:11px;letter-spacing:.02em;text-transform:none}
.fdocs{border:1px solid var(--cerca);border-radius:13px;overflow:hidden;background:var(--dia3)}
.fdoc{display:flex;align-items:center;gap:12px;padding:14px 16px;line-height:1.3;
  border-bottom:1px solid var(--cerca);transition:background .14s}
.fdoc:last-child{border-bottom:0}
.fdoc:hover{background:var(--dia2)}
.fdoc>svg{width:18px;height:18px;flex:none;color:var(--grafite3)}
.fdoc>div{flex:1;min-width:0}
.fdoc b{display:block;font-size:13.5px;font-weight:400;color:var(--grafite)}
.fdoc small{display:block;font-size:11px;color:var(--grafite3);margin-top:2px}
.fdoc::after{content:'›';color:var(--grafite3);font-size:19px;line-height:1;flex:none}
.fdoc.al>svg{color:var(--acento)}
.fdoc.al small{color:var(--a-tx)}

/* ══ O DIA (tela Tudo) ═══════════════════════════════════════════════════
   Uma linha vertical de horas. O fio corre pela esquerda ligando as marcas,
   e só o que espera você ganha o âmbar — o resto é o registro do que já
   aconteceu sem você, que é o argumento. */
.dia{margin-top:4px}
.dia-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.dia-cab b{font-family:var(--m-tit);font-weight:500;font-size:1rem;color:var(--grafite)}
.dia-cab span{font-size:.72rem;color:var(--grafite3)}
.dia-l{position:relative;padding-left:6px}
/* o fio nasce na 1ª marca e morre na última: cortado nas pontas, senão
   ele fura o bloco para cima e para baixo e vira moldura. */
/* 6px de recuo + 56 da hora + 14 do vão + metade dos 28px do avatar = 90.
   O FIO PASSAVA POR CIMA DA FOTO: ele é `position:absolute` e o avatar é
   estático, e no mesmo contexto de empilhamento o posicionado ganha — o
   halo branco de 4px mascarava a volta, mas a linha cortava o rosto ao
   meio. O avatar sobe para `relative`, e aí o fio corre por trás. */
.dia-l::before{content:'';position:absolute;left:90px;top:20px;bottom:20px;width:1px;
  background:var(--cerca);z-index:0}
.dl{display:flex;align-items:flex-start;gap:14px;padding:9px 0}
.dl em{flex:0 0 56px;font-style:normal;font-family:var(--rot);font-size:.68rem;
  color:var(--grafite3);padding-top:7px;font-variant-numeric:tabular-nums}
/* o avatar é a marca da linha do tempo: sobrepõe o fio, e por isso ganha o
   anel na cor do fundo — é ele que faz a coluna ler como uma coisa só. */
.dav{position:relative;z-index:1;flex:none;display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;
  margin-top:1px;box-shadow:0 0 0 4px var(--dia3);background:var(--dia);overflow:hidden}
.dav.zg{color:var(--pedra-esc);background:var(--dia)}
.dav.zg svg{width:15px;height:15px}
.dl.pede .dav.zg{color:var(--acento)}
.dl b{display:block;font-weight:400;font-size:.9rem;color:var(--grafite2);padding-top:3px}
.dl small{display:block;font-size:.72rem;color:var(--grafite3);margin-top:1px}
.dl.pede .dav{box-shadow:0 0 0 3px var(--a-veu)}
.dl.pede b{color:var(--grafite);font-weight:500}
.dl.pede small{color:var(--a-tx)}
@container (max-width:899px){
  .dia-l::before{left:78px}
  .dl em{flex-basis:44px}
}

/* ══ A ÂNCORA ════════════════════════════════════════════════════════════
   Substitui os quatro cartões de vidro. Um número grande — o que o dono
   olha — e os outros três descem para uma linha corrida que se lê de
   relance, sem virar quatro caixas concorrendo entre si. */
.anc{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px 32px;
  padding:0 0 20px;border-bottom:1px solid var(--cerca);margin-bottom:24px}
/* O RÓTULO DESCE PARA BAIXO DO NÚMERO.
   Ao lado dele o rótulo começava onde o número terminasse — 122px em Tudo,
   73px em Comercial, 122 em Dinheiro. Cada tela com um eixo diferente para
   a mesma informação, e é isso que faz o painel parecer montado de pedaços
   em vez de desenhado. Embaixo, ele começa em 38 sempre, como o título. */
.anc-n{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.anc-n b{font-family:var(--m-tit);font-weight:500;font-size:2.1rem;line-height:1;color:var(--grafite);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.anc-n span{font-family:var(--rot);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--grafite3);line-height:1.5}
.anc-n em{margin-top:1px}
.anc-n em{display:block;font-style:normal;letter-spacing:.05em;text-transform:none;font-size:.68rem}
.anc-x{display:flex;flex-wrap:wrap;gap:6px 26px}
.anc-x span{font-size:.72rem;color:var(--grafite3);display:flex;align-items:baseline;gap:6px}
.anc-x b{font-family:var(--m-tit);font-weight:500;font-size:1rem;color:var(--grafite);
  font-variant-numeric:tabular-nums}
/* o título carrega a data na própria linha: eram dois blocos dizendo a
   mesma coisa, e um definia o outro. */
.ptit{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;
  margin-bottom:22px}
.ptit-d{font-family:var(--rot);font-size:.66rem;letter-spacing:.06em;color:var(--grafite3)}
@container (max-width:899px){
  /* lado a lado o número quebrava em duas linhas e o rótulo espremia contra
     ele. No estreito o número fica em cima, sozinho, e o rótulo embaixo.
     E o `.anc` inteiro empilha: com `space-between` os três números de apoio
     ficavam na mesma linha do número grande e saíam pela direita. */
  .anc{flex-direction:column;align-items:stretch;gap:14px}
  .anc-n b{font-size:1.75rem}
  .anc-n span{line-height:1.4}
  /* em linha os três não cabem em 362px e o terceiro era cortado pela borda
     — e o scrollWidth não acusa corte por overflow, por isso só apareceu no
     simulador. Viram coluna, um por linha. */
  .anc-x{flex-direction:column;gap:7px}
  .ptit{margin-bottom:18px}
}

/* ══ A FAIXA DO FUNIL ════════════════════════════════════════════════════
   O kanban de quatro colunas virou uma régua: etapa, contagem e valor.
   Dá a forma do funil em duas linhas de altura, e deixa a vista de verdade
   ser a lista do CRM logo abaixo. */
.fx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--cerca);
  border:1px solid var(--cerca);border-radius:var(--raio);overflow:hidden;margin-bottom:22px}
.fx-e{background:var(--dia3);padding:13px 16px}
.fx-b{display:flex;align-items:center;gap:8px}
.fx-b i{width:6px;height:6px;border-radius:50%;flex:none}
.fx-b span{flex:1;min-width:0;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grafite3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-b b{font-family:var(--rot);font-size:.7rem;color:var(--grafite2)}
.fx-e em{display:block;font-style:normal;font-family:var(--tit);font-weight:500;font-size:1.15rem;
  color:var(--grafite);margin-top:6px;font-variant-numeric:tabular-nums}
@container (max-width:899px){
  .fx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-e em{font-size:1rem}
}

/* ══ O RETRATO ═══════════════════════════════════════════════════════════
   Regra do painel real: `object-position:50% 22%` porque rosto mora no terço
   de cima e centralizar corta a testa. Vale para as quatro molduras — o card
   de pessoa, o avatar do CRM, a fila do WhatsApp e o "publica como".

   Sem isto o painel era sigla cinza em todo lugar, e ele cortou: *"nao da
   impacto visual... tem que ter exemplo visual, imagem nos avatares"*. Ele
   está certo — o painel da casa sempre teve foto, e é ela que faz a tela
   parecer gente trabalhando em vez de tabela. */
.ret{overflow:hidden;background:var(--dia)}
.ret>img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.pf .foto.ret{padding:0}
.lav.ret{padding:0}
.ibx-av.ret{padding:0;color:transparent}
.soc-como i.ret{padding:0;overflow:hidden}
.lado-pe .av.ret{background:var(--noite2)}
.cnt s.ret>img{padding:0;object-fit:cover;object-position:50% 22%}
/* empresa não tem rosto: ganha o mesmo prédio do CRM, e por isso a fileira
   lê como "estes quatro são empresas" em vez de "estes quatro faltou foto". */
.pf .foto.pj svg{width:24px;height:24px;color:var(--grafite3)}

/* ══ SOB MEDIDA ══════════════════════════════════════════════════════════
   A sala vende CONSTRUIR uma sala, não repintar a que existe. Os chips
   ganham um rótulo dizendo o que eles são — exemplos já construídos — e o
   convite fecha a tela, que é onde a conversa começa. */
.ramos-r{font-family:var(--rot);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grafite3);margin-right:4px;align-self:center}
.enc{border:1px dashed var(--cerca);border-radius:var(--raio);padding:18px 20px;margin-top:24px;
  background:var(--dia2)}
.enc b{display:block;font-family:var(--tit);font-weight:500;font-size:1rem;color:var(--grafite)}
.enc span{display:block;font-size:.82rem;color:var(--grafite2);margin-top:5px;max-width:60ch;
  line-height:1.5}

/* ══ O ESTÚDIO ═══════════════════════════════════════════════════════════
   As medidas vêm do `criar/page.tsx`: chip de 32px de altura com raio
   total e 12.5px de texto, separador de 1px por 16px de altura entre os
   grupos, campo de três linhas com o botão de melhorar dentro dele à
   direita, e a barra de modos por cima de tudo. Só a paleta mudou.       */
.est-modos{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--cerca)}
.est-modos::-webkit-scrollbar{display:none}
.mdo{display:flex;align-items:center;gap:7px;flex:none;height:32px;padding:0 13px;
  border-radius:var(--capsula);font-size:12.5px;color:var(--grafite2);white-space:nowrap}
.mdo svg{width:14px;height:14px}
.mdo.on{background:var(--grafite);color:var(--papel)}

.est-cp{border:1px solid var(--cerca);border-radius:var(--m-raio);background:var(--dia3);
  padding:14px 16px 12px}
.est-txt{position:relative;padding-right:38px}
.est-txt b{font-weight:400;font-size:15px;line-height:1.6;color:var(--grafite);display:block}
.est-vara{position:absolute;right:0;top:-2px;display:grid;place-items:center;width:32px;height:32px;
  border-radius:8px;color:var(--grafite3)}
.est-vara svg{width:16px;height:16px}
.est-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:14px}
.est-chps{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.chp{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border-radius:var(--capsula);font-size:12.5px;color:var(--grafite2);white-space:nowrap}
.chp svg{width:14px;height:14px;flex:none}
.chp svg:last-child{width:13px;height:13px;color:var(--grafite3)}
.chp.on{background:rgba(23,24,27,.07);color:var(--grafite)}
.est-sep{width:1px;height:16px;background:var(--cerca);flex:none;margin:0 4px}
.est-vai{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--acento);color:var(--acento-tx)}
.est-vai svg{width:16px;height:16px}
.est-nota{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--grafite3);
  margin-top:12px;padding-top:11px;border-top:1px solid var(--cerca)}
.est-nota i{width:6px;height:6px;border-radius:50%;background:var(--acento);flex:none}

.est-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.ep{margin:0}
.ep-i{position:relative;aspect-ratio:4/3;border-radius:var(--m-raio);overflow:hidden;
  background:var(--dia);border:1px solid var(--cerca)}
.ep-i img{width:100%;height:100%;object-fit:cover;display:block}
.ep.escolhida .ep-i,.ep.agendada .ep-i{border-color:var(--a-borda)}
.ep-play{position:absolute;inset:0;margin:auto;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(10,11,13,.62);color:var(--papel)}
.ep-play svg{width:17px;height:17px;fill:currentColor;stroke:none}
.ep figcaption{padding:10px 2px 0}
.ep b{display:block;font-size:.84rem;font-weight:500;color:var(--grafite)}
.ep small{display:block;font-size:.72rem;color:var(--grafite3);margin-top:2px}
.ep em{display:inline-block;font-style:normal;font-family:var(--rot);font-size:.52rem;
  letter-spacing:.12em;text-transform:uppercase;margin-top:7px;padding:3px 8px;
  border-radius:var(--capsula);background:rgba(23,24,27,.06);color:var(--grafite2)}
.ep.escolhida em,.ep.agendada em{background:var(--a-veu);color:var(--a-tx)}

.est-fim{margin-top:24px;padding-top:18px;border-top:1px solid var(--cerca)}
.est-fim b{display:block;font-family:var(--m-tit);font-weight:500;font-size:1rem;color:var(--grafite)}
.est-fim span{display:block;font-size:.82rem;color:var(--grafite2);margin-top:5px;max-width:62ch;
  line-height:1.5}
@container (max-width:899px){
  .est-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .est-bar{flex-direction:column;align-items:stretch;gap:12px}
  .est-vai{align-self:flex-end}
  .est-txt b{font-size:14px}
}

/* ══ A VISÃO GERAL ═══════════════════════════════════════════════════════
   Seis blocos numa grade de duas colunas, os dois de ponta atravessando
   inteiro. Não é dashboard de KPI: cada bloco mostra a COISA (a maquete da
   empresa, o rosto de quem trabalha, a peça no ar), e o número vem junto
   como legenda, nunca sozinho num cartão. */
.vg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vg-b{border:1px solid var(--cerca);border-radius:var(--m-raio);background:var(--dia3);
  padding:18px 20px}
.vg-b.larga{grid-column:1/-1}
/* o cabeçalho de bloco QUEBRA quando não cabe. Sem o wrap, o título e a
   legenda ficavam lado a lado à força, o bloco esticava e levava a grade
   junto para fora da tela do app. */
.vg-b h4{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;
  flex-wrap:wrap;min-width:0;
  font-family:var(--m-tit);font-weight:500;font-size:.94rem;color:var(--grafite);margin:0 0 14px}
.vg-b h4 span{font-family:var(--rot);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grafite3);white-space:nowrap}

/* as empresas, com a maquete de cada uma */
.emp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.emp-i{position:relative;display:flex;align-items:center;gap:12px;border:1px solid var(--cerca);
  border-radius:var(--m-raio);padding:12px 14px;background:var(--dia2);transition:border-color .18s}
.emp-i:hover{border-color:var(--a-borda)}
.emp-i.al{border-color:var(--a-borda);padding-bottom:30px}
.emp-m{flex:none;width:44px;height:44px;border-radius:10px;overflow:hidden;background:var(--dia)}
.emp-m img{width:100%;height:100%;object-fit:contain;padding:8%;display:block}
.emp-t{flex:1;min-width:0}
.emp-t b{display:block;font-size:.86rem;font-weight:500;color:var(--grafite);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emp-t small{display:block;font-size:.7rem;color:var(--grafite3);margin-top:1px}
.emp-v{text-align:right;flex:none}
.emp-v b{display:block;font-family:var(--m-tit);font-weight:500;font-size:.94rem;color:var(--grafite);
  font-variant-numeric:tabular-nums}
.emp-v small{display:block;font-size:.68rem;color:var(--grafite3);margin-top:1px}
.emp-al{position:absolute;left:14px;right:14px;bottom:10px;font-family:var(--rot);font-size:.54rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--a-tx);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* o dinheiro: a posição do dia, não um gráfico */
.din b{display:block;font-family:var(--m-tit);font-weight:500;font-size:1.75rem;line-height:1;
  color:var(--grafite);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.din em{display:block;font-style:normal;font-size:.72rem;color:var(--grafite3);margin-top:6px}
.din-l{margin-top:16px;border-top:1px solid var(--cerca)}
.din-l>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--cerca)}
.din-l>div:last-child{border-bottom:0}
.din-l span{font-size:.78rem;color:var(--grafite2)}
.din-l b{font-family:var(--m-tit);font-weight:500;font-size:.94rem;color:var(--grafite);
  font-variant-numeric:tabular-nums}
.din-l .ok b{color:var(--ok-dia)}

/* quem trabalha: os rostos, e a máquina contada ao lado deles */
.qt{display:flex;align-items:center}
.qt-p{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;
  box-shadow:0 0 0 2px var(--dia3);margin-right:-9px;background:var(--dia)}
.qt-p img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.qt-m{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--dia);color:var(--grafite2);font-family:var(--rot);font-size:.68rem;
  box-shadow:0 0 0 2px var(--dia3);margin-left:0}
.qt-ia{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--cerca)}
.qt-zg{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--a-veu);color:var(--acento)}
.qt-zg svg{width:17px;height:17px}
.qt-ia b{display:block;font-size:.84rem;font-weight:500;color:var(--grafite)}
.qt-ia small{display:block;font-size:.72rem;color:var(--grafite3);margin-top:1px}

/* o que está no ar */
.ar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ar-i{border-left:2px solid var(--cerca);padding-left:12px}
.ar-i b{display:block;font-family:var(--m-tit);font-weight:500;font-size:1.1rem;color:var(--grafite);
  font-variant-numeric:tabular-nums;line-height:1}
.ar-i span{display:block;font-size:.76rem;color:var(--grafite2);margin-top:4px}
.ar-i small{display:block;font-size:.68rem;color:var(--grafite3);margin-top:1px}

/* só você resolve: o bloco que fecha a tela, com o rosto de quem espera */
.so-seu{border-color:var(--a-borda);background:var(--dia2)}
.ss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px}
.ss-i{display:flex;align-items:center;gap:12px}
.ss-a{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;background:var(--dia)}
.ss-a img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.ss-i b{display:block;font-size:.86rem;font-weight:500;color:var(--grafite)}
.ss-i small{display:block;font-size:.72rem;color:var(--grafite3);margin-top:1px}

@container (max-width:899px){
  /* as abas dos canais não cabem no estreito e rolam de lado, como em
     qualquer app. Sem isto elas empurravam a tela inteira. */
  .soc-abas{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;max-width:100%}
  .soc-abas::-webkit-scrollbar{display:none}
  .soc-abas .ab{flex:none}
  .vg{grid-template-columns:minmax(0,1fr)}
  .emp{grid-template-columns:minmax(0,1fr)}
  .ar,.ss{grid-template-columns:minmax(0,1fr)}
  /* NO APARELHO O VALOR SAÍA PELA DIREITA. Em linha única, maquete + nome +
     valor não cabem em 362px e o valor era cortado por overflow — e o
     `scrollWidth` não acusa isso, por isso só apareceu no simulador.
     Aqui a ficha vira grade de duas linhas: a maquete ocupa a coluna da
     esquerda nas duas, e valor e equipe descem para baixo do nome. */
  .emp-i{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;
    column-gap:12px;row-gap:8px;align-items:center}
  .emp-m{grid-row:1/3}
  .emp-v{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:10px}
  .emp-v small{margin-top:0}
  .emp-i.al{padding-bottom:28px}
  .emp-al{left:16px;right:16px}
}

/* ══ A FICHA DO BEM ══════════════════════════════════════════════════════
   A maquete à esquerda em quadrado, e à direita o que se quer saber: vale,
   rende, custa. O rodapé A LEVANTAR é a mesma régua do card de pessoa —
   campo que não se sabe aparece dizendo que não se sabe. */
.bns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bn{display:flex;gap:14px;border:1px solid var(--cerca);border-radius:var(--m-raio);
  background:var(--dia3);padding:14px 16px;margin:0;transition:border-color .18s}
.bn:hover{border-color:var(--pedra-esc)}
.bn.al{border-color:var(--a-borda)}
.bn-m{flex:none;width:78px;height:78px;border-radius:10px;overflow:hidden;background:var(--dia)}
.bn-m img{width:100%;height:100%;object-fit:contain;padding:7%;display:block}
.bn-c{flex:1;min-width:0}
.bn-h{display:flex;align-items:baseline;gap:9px}
.bn-h b{font-size:.92rem;font-weight:500;color:var(--grafite)}
.bn-h em{font-style:normal;font-family:var(--rot);font-size:.5rem;letter-spacing:.14em;
  color:var(--grafite3)}
.bn-c>small{display:block;font-size:.72rem;color:var(--grafite3);margin-top:2px}
.bn-n{display:flex;gap:20px;margin-top:10px}
.bn-n span{min-width:0}
.bn-n i{display:block;font-style:normal;font-family:var(--rot);font-size:.5rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grafite3)}
.bn-n b{display:block;font-family:var(--m-tit);font-weight:500;font-size:.86rem;color:var(--grafite);
  margin-top:2px;font-variant-numeric:tabular-nums}
.bn-fa{display:block;margin-top:10px;padding-top:8px;border-top:1px solid var(--cerca);
  text-decoration:none;font-family:var(--rot);font-size:.54rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--a-tx)}
@container (max-width:899px){ .bns{grid-template-columns:minmax(0,1fr)} .bn-n{gap:14px} }

/* ══ O CRM: A LISTA E A FICHA ════════════════════════════════════════════
   Duas colunas, como o `LeadsView` + `LeadDrawer` da Laguna: a base à
   esquerda, a pessoa aberta à direita. Lista é cadastro; o que faz ser CRM
   é poder abrir e ver a relação inteira — por isso a ficha ocupa mais
   espaço que a lista, e não o contrário. */
.crm2{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.crm2-l{border:1px solid var(--cerca);border-radius:var(--m-raio);background:var(--dia3);
  overflow:hidden}
.crm2-l .crm-busca{border:0;border-bottom:1px solid var(--cerca);border-radius:0}
.crm2-l .crl{padding:10px 14px}
.crm2-l .crl.on{background:var(--dia2);box-shadow:inset 2px 0 0 var(--acento)}
.crm2-l .lav{width:32px;height:32px}
.crm2-l .ln b{font-size:.84rem}

.fi{border:1px solid var(--cerca);border-radius:var(--m-raio);background:var(--dia3);padding:18px 20px}
.fi-h{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--cerca)}
.fi-av{width:52px;height:52px;border-radius:50%;overflow:hidden;flex:none;background:var(--dia)}
.fi-av img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.fi-q{flex:1;min-width:0}
.fi-q>b{display:block;font-family:var(--m-tit);font-weight:500;font-size:1.1rem;color:var(--grafite)}
.fi-ch{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.fi-ic{display:flex;gap:10px;color:var(--grafite3);flex:none}
.fi-ic svg{width:16px;height:16px}
.fi-abas{margin:16px 0 18px;width:max-content}

/* os campos: rótulo em 11px maiúsculo por cima do valor, do original */
.fi-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px}
.fi-c i{display:block;font-style:normal;font-family:var(--rot);font-size:.56rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grafite3)}
.fi-c b{display:block;font-weight:400;font-size:.88rem;color:var(--grafite);margin-top:3px}

.fi-hr{font-family:var(--rot);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grafite3);margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--cerca)}
.fi-hs{position:relative;padding-left:4px}
.fi-hs::before{content:'';position:absolute;left:7px;top:12px;bottom:12px;width:1px;
  background:var(--cerca);z-index:0}
.fi-i{display:flex;align-items:flex-start;gap:14px;padding:8px 0}
/* a marca do que a máquina fez sozinha é a cor da marca; o resto é pedra */
.fi-p{position:relative;z-index:1;flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--pedra-esc);margin-top:6px;box-shadow:0 0 0 4px var(--dia3)}
.fi-p.mq{background:var(--acento)}
.fi-i>div{flex:1;min-width:0}
.fi-i b{display:block;font-size:.86rem;font-weight:400;color:var(--grafite)}
.fi-i small{display:block;font-size:.72rem;color:var(--grafite3);margin-top:1px}
.fi-i em{font-style:normal;font-family:var(--rot);font-size:.6rem;color:var(--grafite3);flex:none;
  padding-top:4px}
@container (max-width:899px){
  .crm2{grid-template-columns:minmax(0,1fr)}
  .fi-g{grid-template-columns:minmax(0,1fr)}
  .fi-i{flex-wrap:wrap}
  .fi-i em{width:100%;padding-left:21px}
}

/* ══ O SÍMBOLO NA BARRA RECOLHIDA ════════════════════════════════════════
   Aberta, a barra mostra o nome por extenso. Recolhida, ele não cabe e
   ficava cortado atrás do botão: entra o símbolo, que é o que uma barra
   estreita mostra em qualquer sistema. */
.lg-s{display:none}
.sim.recolhido .lado .logo{padding:20px 0 16px;text-align:center}
/* esconde o NOME, e não todo `b` de dentro do logo: a inicial do cliente
   também é um `b` e sumia junto, porque `.lado .logo b` tem mais
   especificidade que a regra que a mostrava logo abaixo. */
.sim.recolhido .lado .logo i,
.sim.recolhido .lado .logo #lgnome{display:none}
.sim.recolhido .lg-s{display:grid;place-items:center;width:34px;height:34px;margin:0 auto}
.sim.recolhido .lg-s svg{width:26px;height:26px;color:var(--acento)}
/* cliente sem símbolo em vetor: a inicial no acento dele, dentro do disco */
.sim.recolhido .lg-s b{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--acento);color:var(--acento-tx);font-family:var(--m-tit);font-weight:600;
  font-size:.9rem;letter-spacing:.01em}

/* ══ OS DOIS CONTROLES ═══════════════════════════════════════════════════
   Substituem nove cartões de texto. Cada linha é um rótulo curto e uma
   fileira de pastilhas: a marca com o disco da cor, a sala com o ícone.
   Nada explica por escrito o que acontece, porque o painel embaixo muda
   na hora e é ele quem explica. */
.ctr{display:flex;flex-direction:column;gap:12px;margin:26px 0 24px}
.ctr-l{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ctr-r{flex:0 0 118px;font-family:var(--rot);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grafite3)}
.ctr-g{display:flex;gap:7px;flex-wrap:wrap;flex:1;min-width:0}
.pst{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;
  border:1px solid var(--cerca);border-radius:var(--capsula);background:var(--dia3);
  font-family:var(--m-tit,var(--tit));font-size:.86rem;color:var(--grafite2);cursor:pointer;
  transition:border-color .16s,color .16s,transform .16s var(--curva)}
.pst:hover{transform:translateY(-1px);color:var(--grafite)}
.pst svg{width:15px;height:15px;flex:none;color:var(--grafite3)}
/* o disco traz a cor da marca: é a amostra, e é o que o olho lê primeiro */
.pst-c{width:13px;height:13px;border-radius:50%;background:var(--acento);flex:none}
.pst.sel{border-color:var(--acento);color:var(--grafite);background:var(--dia2)}
.pst.sel svg{color:var(--acento)}
@media(max-width:899px){
  .ctr-l{flex-direction:column;align-items:flex-start;gap:8px}
  .ctr-r{flex:none}
  .ctr-g{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;width:100%}
  .ctr-g::-webkit-scrollbar{display:none}
  .pst{flex:none}
}

/* ══ O LUGAR DO CLIENTE ══════════════════════════════════════════════════
   A última pastilha de cada fileira é tracejada e traz um "+". É a
   convenção que todo mundo já leu mil vezes como "aqui entra o seu", e ela
   diz sob medida sem gastar uma linha de texto. Clicar conta o que a gente
   faz, ali mesmo, embaixo da fileira em que a pessoa clicou. */
.pst.nova{border-style:dashed;border-color:var(--pedra-esc);color:var(--grafite2);
  background:transparent}
.pst.nova i{display:grid;place-items:center;width:16px;height:16px;font-style:normal;
  font-size:.95rem;line-height:1;color:var(--fio)}
.pst.nova:hover{border-color:var(--fio);color:var(--grafite)}
.pst.nova.on{border-style:solid;border-color:var(--fio);background:var(--fio-veu);color:var(--grafite)}
/* DOIS ELEMENTOS, E CADA UM COM UMA FUNÇÃO.
   Tentei fazer um só: `flex:1 0 100%` para empurrar à linha de baixo e
   `max-width:62ch` para a linha de leitura não ficar quilométrica. Só que
   o max-width ganha do basis, o texto passa a caber na sobra da linha e
   volta a nascer AO LADO do botão, que era o defeito. A caixa de fora
   quebra a linha; a de dentro segura a medida. */
.pst-diz{flex:1 0 100%;margin-top:9px}
.pst-diz p{max-width:62ch;margin:0;font-size:.82rem;line-height:1.55;color:var(--grafite2);
  padding-left:2px}

/* ══ A MARCA DE QUEM ESTÁ OLHANDO ════════════════════════════════════════
   Nome, cor e letra. Três controles pequenos que valem mais que três
   clientes inventados, porque a prova acontece com a marca da própria
   pessoa e não com a de um terceiro que ela nunca viu. */
.sua{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%;margin-top:10px;
  padding-left:134px}
.sua-n{height:36px;padding:0 14px;border:1px solid var(--fio-borda);border-radius:var(--capsula);
  background:var(--dia3);font-family:var(--tit);font-size:.86rem;color:var(--grafite);
  min-width:210px;outline:0}
.sua-n:focus{border-color:var(--fio)}
.sua-n::placeholder{color:var(--grafite3)}
.sua-c{display:flex;gap:6px}
.sua-p{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  padding:0;transition:transform .14s var(--curva)}
.sua-p:hover{transform:scale(1.12)}
/* a escolhida ganha um anel do fundo, não uma borda da própria cor: sobre
   a cor cheia a borda sumiria. */
.sua-p.sel{box-shadow:0 0 0 2px var(--dia),0 0 0 3px var(--grafite)}
.sua-l span{cursor:pointer}
@container (max-width:899px){
  .sua{padding-left:0;gap:10px}
  .sua-n{min-width:0;flex:1}
}

/* ══ A VERSÃO APP ═══════════════════════════════════════════════════════
   Ele cortou a primeira tentativa: *"temos que montar a versao APP ne?
   para que de certo, pq ta uma grande merda"*. E era: eu tinha só
   estreitado a moldura, e um app não é um site espremido.

   O que muda de verdade quando a coisa vira aplicativo:
     · a navegação DESCE. Barra lateral é gesto de mouse; no telefone o
       dedo mora embaixo, e é lá que ficam as salas, em ícone e rótulo;
     · onze salas não cabem numa barra de aparelho. Cinco, e as outras
       atrás de "Mais", que é como todo app resolve isso;
     · o cabeçalho encolhe para uma faixa com o nome e o sino;
     · a moldura do navegador some. Aplicativo não tem barra de endereço,
       e deixá-la ali seria dizer que é um site aberto no celular. */
/* ══ A MOLDURA DO APARELHO ═══════════════════════════════════════════════
   A primeira versão estava errada em três pontos, e ele pegou de imediato:

   1. O NOTCH EMPURRAVA O CONTEÚDO. Ele era um bloco no fluxo, então a tela
      começava abaixo dele e o aparelho ficava com uma tarja preta no alto.
      Num iPhone a ilha FLUTUA sobre a tela: é `absolute`, e a tela vai até
      o topo por baixo dela.
   2. A PROPORÇÃO NÃO ERA DE APARELHO. 392 de largura com a altura solta
      dava um retângulo curto. O iPhone é ~19.5:9, e a moldura passa a ter
      essa razão, com a tela ocupando o que sobra da borda.
   3. O RAIO ESTAVA PEQUENO para o tamanho. Um aparelho de 392px tem canto
      de ~54px na carcaça e ~44 na tela, não 40 e 32.

   A borda dupla é o que dá o titânio: uma clara por fora, uma escura por
   dentro, com a carcaça preta entre elas.

   zg:externo — os cinzas abaixo são a carcaça de um aparelho de verdade,
   não elemento da nossa identidade. Titânio não é uma cor da marca, e
   pintá-lo com a nossa paleta faria o mockup parecer desenho. */
/* a moldura cede à altura da tela: com 392 fixos ela mede 849 de altura, e
   num celular real a barra de baixo do app, que é o que prova que é app,
   caía fora do enquadramento. Com `aspect-ratio` mandando, basta limitar a
   altura que a largura acompanha. */
/* TAMANHO REAL: 392 de largura, que é a medida de um iPhone em CSS, e a
   altura sai daí pelo `aspect-ratio`. Amarrei a altura à janela antes, para
   caber no celular, e o aparelho encolheu para 316 no desktop, menor que o
   real, com os rótulos da barra espremidos. No estreito a carcaça nem
   existe mais, então ela pode ter o tamanho que tem. */
.sim.bolso .tela{position:relative;width:392px;max-width:100%;
  margin:0 auto;aspect-ratio:9/19.5;padding:11px;border-radius:56px;
  /* zg:externo · o titânio da carcaça, que não é cor de marca */
  background:linear-gradient(150deg,#3a3b3f,#141519 32%,#0e0f12 68%,#35363a);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.55),
             inset 0 0 0 1px rgba(250,250,248,.14)}
.sim.bolso .topo{display:none}

/* OS BOTÕES: volume à esquerda, o de ligar à direita. Sem eles a moldura
   lê como cartão arredondado, não como aparelho.
   zg:externo — mesmo motivo dos cinzas acima: é carcaça. */
.sim.bolso .tela::before,.sim.bolso .tela::after{content:'';position:absolute;
  width:3px;border-radius:3px;background:linear-gradient(180deg,#4a4b50,#26272b)}
.sim.bolso .tela::before{left:-3px;top:112px;height:32px;
  box-shadow:0 46px 0 #33343a, 0 106px 0 #33343a;    /* volume + e volume − */
  height:26px}
.sim.bolso .tela::after{right:-3px;top:150px;height:74px}


/* o corpo do app: cabeçalho, conteúdo rolável e a barra de baixo */
/* a altura cede à tela: em 660 fixos a barra de baixo do app caía fora
   do aparelho em telas curtas, e é justamente ela que prova que é app. */
/* A TELA ocupa toda a moldura por dentro, e a altura sai do `aspect-ratio`
   do aparelho em vez de um número chutado: assim ela é sempre a tela
   inteira, e não um retângulo dentro dela. */
.sim.bolso .corpo{position:relative;display:block;border-radius:45px;overflow:hidden;
  height:100%;background:var(--dia)}

/* A ILHA FLUTUA. Antes era um bloco no fluxo, empurrava o conteúdo para
   baixo e deixava uma tarja preta no alto do aparelho. Num iPhone a tela
   vai até o topo e a ilha fica POR CIMA dela.
   zg:externo — preto absoluto, que é a cor da ilha no aparelho. */
.sim.bolso .corpo::after{content:'';position:absolute;top:11px;left:50%;
  transform:translateX(-50%);width:104px;height:31px;border-radius:99px;
  background:#000;z-index:8;pointer-events:none}
.sim.bolso .conteudo{height:100%;overflow-y:auto;scrollbar-width:none;
  padding:106px 16px 96px}
.sim.bolso .conteudo::-webkit-scrollbar{display:none}

/* O NAV SOME DA CAIXA, e os dois filhos dele se ancoram na moldura.
   Sem isto a barra de baixo se posicionava em relação ao nav e nascia
   colada no cabeçalho, no alto da tela: `absolute` se mede pelo ancestral
   posicionado mais próximo, e o nav era ele. `display:contents` tira o nav
   do fluxo sem tirar os filhos. */
.sim.bolso .lado{display:contents}
.sim.bolso .lado .logo{display:none}     /* o cabeçalho do app substitui */

/* O CABEÇALHO DO APP, com as quatro peças do original: rótulo, título,
   sino com contador e o avatar de quem está logado. */
/* o cabeçalho começa abaixo da ilha, como num app de verdade: os 44px de
   cima são a área de status do aparelho. */
.apbar{position:absolute;inset:0 0 auto 0;z-index:3;display:flex;align-items:flex-end;
  justify-content:space-between;height:96px;padding:0 18px 12px;background:var(--noite)}
.apbar i{display:block;font-style:normal;font-family:var(--rot);font-size:.5rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,248,.42)}
.apbar b{display:block;font-family:var(--m-tit);font-weight:500;font-size:1.18rem;
  color:var(--papel);line-height:1.1;margin-top:2px}
.apbar-d{display:flex;align-items:center;gap:14px}
.apbar-s{position:relative;display:grid;place-items:center;color:rgba(250,250,248,.85)}
.apbar-s svg{width:21px;height:21px}
.apbar-s u{position:absolute;top:-5px;right:-6px;min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:var(--acento);color:var(--acento-tx);text-decoration:none;
  font-family:var(--rot);font-size:.52rem;display:grid;place-items:center}
.apbar-a{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;
  box-shadow:0 0 0 1.5px rgba(250,250,248,.25)}
.apbar-a img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.sim.bolso .lado .logo i{display:none}
.sim.bolso .lado .logo #lgnome{display:block;font-size:1rem;margin:0}
.sim.bolso .recolher,.sim.bolso .lado-pe{display:none}

/* BARRA DE BAIXO: as cinco primeiras salas e o "Mais" */
.sim.bolso #lado{position:absolute;inset:auto 0 0 0;height:74px;z-index:3;
  display:flex;padding:8px 4px 12px;background:var(--noite);
  border-top:1px solid rgba(250,250,248,.1);overflow:visible}
.sim.bolso #lado a{flex:1;min-width:0;flex-direction:column;gap:5px;padding:0;
  border:0;justify-content:center;font-size:.56rem;letter-spacing:.02em;
  color:rgba(250,250,248,.5)}
.sim.bolso #lado a .ic{width:20px;height:20px}
.sim.bolso #lado a em{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sim.bolso #lado a.on{background:transparent;color:var(--acento);box-shadow:none}
/* TRÊS SALAS, A IA NO MEIO E O MAIS. As que não entram ganham `.fora` no
   JS em vez de serem escondidas por `nth-child`: posição não é critério
   depois que a sala aberta muda de lugar na fila. */
.sim.bolso #lado a.fora{display:none}
/* O BOTÃO DA IA: disco elevado acima da barra, como no original. É o
   lugar onde o polegar chega primeiro, e por isso recebe a coisa mais
   importante do produto. */
.sim.bolso #lado a.zia{margin-top:-18px;justify-content:flex-start;gap:3px}
.sim.bolso #lado a.zia .disco{display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;background:var(--acento);color:var(--acento-tx);
  box-shadow:0 6px 16px -4px rgba(0,0,0,.5)}
.sim.bolso #lado a.zia .disco svg{width:22px;height:22px}
.sim.bolso #lado a.zia em{color:rgba(250,250,248,.6)}



/* ══ O MENU DE TELA CHEIA ════════════════════════════════════════════════
   Do `layout.tsx` da Laguna: escuro, ocupando tudo, com o nome grande em
   cima e o X no canto, a lista no meio e quem está logado no rodapé. As
   medidas são de dedo e vieram de lá: linha de 56px, ícone num disco de
   40px, rótulo em 17px. */
.menuap{position:absolute;inset:0;z-index:6;display:none;flex-direction:column;
  background:var(--noite);color:var(--papel);border-radius:2rem}
.menuap.abre{display:flex}
.menuap-c{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 22px 16px}
.menuap-c i{display:block;font-style:normal;font-family:var(--rot);font-size:.56rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,248,.45)}
.menuap-c b{display:block;font-family:var(--m-tit);font-weight:500;font-size:1.6rem;
  color:var(--papel);margin-top:3px;line-height:1.1}
.menuap-x{width:40px;height:40px;border-radius:50%;border:0;flex:none;display:grid;
  place-items:center;background:rgba(250,250,248,.08);color:var(--papel);cursor:pointer}
.menuap-x svg{width:20px;height:20px}
.menuap-l{flex:1;overflow-y:auto;padding:0 14px 12px;scrollbar-width:none}
.menuap-l::-webkit-scrollbar{display:none}
.menuap-s{padding:18px 12px 6px;font-family:var(--rot);font-size:.54rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,248,.4)}
.menuap-i{display:flex;align-items:center;gap:16px;width:100%;min-height:56px;padding:0 12px;
  border:0;border-radius:12px;background:none;color:rgba(250,250,248,.8);
  font:inherit;font-size:17px;text-align:left;cursor:pointer}
.menuap-i .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  flex:none;background:rgba(250,250,248,.06)}
.menuap-i .ic svg{width:19px;height:19px}
.menuap-i.on{background:rgba(250,250,248,.12);color:var(--papel)}
.menuap-i.on .ic{background:rgba(250,250,248,.14);color:var(--acento)}
.menuap-pe{display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px 20px;border-top:1px solid rgba(250,250,248,.1)}
.menuap-pe b{display:block;font-weight:400;font-size:.95rem;color:var(--papel)}
.menuap-pe i{display:block;font-style:normal;font-family:var(--rot);font-size:.54rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,248,.45);margin-top:2px}
.menuap-pe span{font-size:.82rem;color:rgba(250,250,248,.6)}

/* ══ NO CELULAR NÃO SE DESENHA UM CELULAR ════════════════════════════════
   A carcaça existe para quem está no computador: é ali que ela prova que o
   painel vira aplicativo. Num telefone de verdade ela é redundante, e pior:
   a moldura tinha de encolher para caber e o app aparecia em miniatura,
   com os rótulos da barra sumindo. No estreito some a carcaça e fica o
   app, em tamanho real, que é o que a pessoa quer ver. */
@media(max-width:899px){
  .sim.bolso .tela{height:auto;width:auto;max-width:none;aspect-ratio:auto;
    padding:0;border-radius:var(--m-raio);background:var(--dia3);
    box-shadow:0 1px 2px rgba(23,24,27,.04),0 30px 70px -30px rgba(23,24,27,.28)}
  .sim.bolso .tela::before,.sim.bolso .tela::after{display:none}   /* botões */
  .sim.bolso .corpo{height:min(660px,72svh);border-radius:var(--m-raio)}
  .sim.bolso .corpo::after{display:none}                            /* a ilha */
  .sim.bolso .apbar{height:62px;align-items:center;padding-bottom:0}
  .sim.bolso .conteudo{padding-top:74px}
}