/* ============================================================
   Área de Membros · Empresário Ciborgue: portal.css
   Serve produção, lendo dado real do Supabase. Reaproveita os tokens de marca
   de site/assets/styles.css. Não é o mesmo arquivo de propósito:
   este cobre componentes de app (sidebar, tabela, trilha) que
   o site de vendas não tem.
   ============================================================ */

:root{
  --cor-tinta:#141413;
  --cor-papel:#FAF9F5;
  --cor-humano:#E8602C;
  --cor-maquina:#3173B8;
  --cor-texto-suave:#6B675E;
  --cor-linha:#E6E1D5;
  --cor-papel-2:#F2EFE7;
  --cor-texto-claro:rgba(250,249,245,.92);
  --cor-texto-claro-suave:rgba(250,249,245,.62);
  --cor-linha-escura:rgba(250,249,245,.14);
  --fonte-titulo:'Poppins',system-ui,-apple-system,sans-serif;
  --fonte-corpo:'Poppins',system-ui,-apple-system,sans-serif;
  --fonte-mono:'Space Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --raio:14px; --raio-sm:8px; --raio-pill:999px;
  --sidebar-w:264px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--fonte-corpo);
  font-weight:300;
  color:var(--cor-tinta);
  background:var(--cor-papel-2);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--fonte-titulo);font-weight:700;line-height:1.15;margin:0 0 .4em}
h1{font-size:clamp(1.7rem,4vw,2.2rem);letter-spacing:-.3px}
h2{font-size:1.35rem}
h3{font-size:1.05rem}
p{margin:0 0 .9rem}
.lead{font-size:1.02rem;color:var(--cor-texto-suave)}

.eyebrow{
  font-family:var(--fonte-mono);text-transform:uppercase;
  letter-spacing:.18em;font-size:.72rem;color:var(--cor-texto-suave);
  display:inline-block;margin-bottom:.7rem;font-weight:400;
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-family:var(--fonte-mono);text-transform:uppercase;letter-spacing:.08em;
  font-size:.8rem;background:var(--cor-humano);color:#fff;
  padding:13px 22px;border-radius:var(--raio-sm);border:0;cursor:pointer;
  transition:opacity .15s ease;
}
.btn:hover{opacity:.88}
.btn--ghost{background:transparent;color:var(--cor-tinta);border:1.5px solid var(--cor-linha)}
.btn--ghost:hover{background:#fff}
.btn--sm{padding:9px 16px;font-size:.72rem}
.btn--full{width:100%}

/* ---------- Símbolo / wordmark ---------- */
.ec-lockup{display:flex;align-items:center;gap:12px}
.ec-wm{display:flex;flex-direction:column;line-height:1;font-family:var(--fonte-titulo)}
.ec-wm b{font-weight:300;letter-spacing:.16em;font-size:.68rem}
.ec-wm strong{font-weight:700;letter-spacing:.03em;font-size:.92rem}

/* A pupila muda com o fundo, e as duas variantes sao do manual: sobre Papel a
   pupila e Tinta; sobre fundo Tinta, a variante de fundo escuro pede o miolo
   em Papel. Sem a segunda regra o miolo ficava Tinta sobre Tinta na barra
   lateral escura, ou seja, invisivel.

   A segunda regra vale para os DOIS simbolos, e e de proposito: dentro da
   barra escura ela pega tanto o olho da marca pessoal (Sprint) quanto o
   circulo central do simbolo Empresario Ciborgue (Mentoria), que tambem nasce
   Tinta e tambem sumiria ali.

   O anel continua azul nas duas. A letra do manual, na variante de fundo
   escuro, pede anel e pupila em Papel; o paragrafo 5 libera o azul em
   qualquer fundo por ter contraste nos dois. Ficou azul de escolha, nao por
   descuido: azul e a cor da maquina e o sentido se perde se virar Papel.
   Pendencia registrada pro Rafael decidir. */
.ec-lockup svg circle:last-of-type,
.topbar__simbolo svg circle:last-of-type{fill:var(--cor-tinta)}
.sidebar .ec-lockup svg circle:last-of-type{fill:var(--cor-papel)}

/* ============================================================
   LOGIN
   ============================================================ */
.login-shell{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:32px 18px;background:var(--cor-tinta);
}
.login-card{
  width:100%;max-width:400px;background:var(--cor-papel);
  border-radius:var(--raio);padding:38px 30px;
}
.login-card .ec-lockup{justify-content:center;margin-bottom:26px}
.login-card .ec-wm{color:var(--cor-tinta)}
.login-card h1{text-align:center;font-size:1.4rem;margin-bottom:.3em}
.login-card .lead{text-align:center;font-size:.92rem;margin-bottom:1.6rem}
.campo{margin-bottom:16px}
.campo label{
  display:block;font-family:var(--fonte-mono);text-transform:uppercase;
  font-size:.68rem;letter-spacing:.12em;color:var(--cor-texto-suave);margin-bottom:6px;
}
.campo input{
  width:100%;padding:12px 14px;border:1.5px solid var(--cor-linha);
  border-radius:var(--raio-sm);font-family:var(--fonte-corpo);font-size:.95rem;
  background:#fff;color:var(--cor-tinta);
}
.campo input:focus{outline:2px solid var(--cor-maquina);outline-offset:1px}
.login-aviso{
  font-size:.78rem;color:var(--cor-texto-suave);text-align:center;margin-top:14px;
}
.login-aviso a{color:var(--cor-maquina);border-bottom:1px solid currentColor}
.login-erro{
  font-size:.82rem;color:var(--cor-humano);background:#FCEBE2;
  border-radius:var(--raio-sm);padding:10px 12px;margin:0 0 14px;
}
.login-ok{
  font-size:.82rem;color:var(--cor-maquina);background:#EAF1FA;
  border-radius:var(--raio-sm);padding:10px 12px;margin:0 0 14px;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);flex:0 0 auto;background:var(--cor-tinta);
  color:var(--cor-texto-claro);padding:26px 20px;position:fixed;top:0;bottom:0;left:0;
  display:flex;flex-direction:column;transform:translateX(-100%);
  transition:transform .2s ease;z-index:40;
}
.sidebar.aberta{transform:translateX(0)}
.sidebar .ec-wm{color:var(--cor-texto-claro)}
.sidebar__topo{margin-bottom:30px}
.sidebar__conta{
  font-family:var(--fonte-mono);font-size:.7rem;letter-spacing:.08em;
  color:var(--cor-texto-claro-suave);margin-top:14px;padding-top:14px;
  border-top:1px solid var(--cor-linha-escura);text-transform:uppercase;
}

.nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;flex:1}
.nav a{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--raio-sm);
  font-size:.9rem;color:var(--cor-texto-claro-suave);transition:background .15s ease,color .15s ease;
}
.nav a:hover{background:rgba(250,249,245,.06);color:var(--cor-texto-claro)}
.nav a.ativo{background:var(--cor-humano);color:#fff}
.nav__icone{width:18px;height:18px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.nav__icone svg{width:100%;height:100%}

.sidebar__rodape{border-top:1px solid var(--cor-linha-escura);padding-top:16px;margin-top:16px}
.sidebar__rodape a{
  display:flex;align-items:center;gap:10px;font-size:.84rem;
  color:var(--cor-texto-claro-suave);padding:8px 12px;
}
.sidebar__rodape a:hover{color:var(--cor-texto-claro)}

.overlay{
  position:fixed;inset:0;background:rgba(20,20,19,.5);z-index:30;
  opacity:0;pointer-events:none;transition:opacity .15s ease;
}
.overlay.ativo{opacity:1;pointer-events:auto}

.main{flex:1;min-width:0;padding:20px 18px 60px}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:22px;
}
.topbar__hamb{
  width:40px;height:40px;border-radius:var(--raio-sm);border:1.5px solid var(--cor-linha);
  background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  flex:0 0 auto;
}
.topbar__hamb span,.topbar__hamb::before,.topbar__hamb::after{
  content:"";display:block;width:16px;height:2px;background:var(--cor-tinta);
}
.topbar__hamb{flex-direction:column;gap:3px}
.topbar__simbolo{width:30px;height:30px;flex:0 0 auto}
.topbar__simbolo svg{width:100%;height:100%}

.view{display:none}
.view.ativa{display:block;animation:aparece .18s ease}
@keyframes aparece{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* 1180px: a trilha (fileira de encontros) e a grade de
   portas precisam de largura pra respirar em vez de empilhar estreito no
   canto esquerdo da tela, que era a reclamação original. */
.wrap-app{max-width:1180px}

/* Rede de segurança: #saudacao e #lead-inicio são o h1/p da home no
   contrato de IDs. Se o HTML não repetir as classes h1/.lead no elemento,
   o visual não muda de qualquer forma. */
#saudacao{margin-bottom:.3em}
#lead-inicio{font-size:1.02rem;color:var(--cor-texto-suave)}

/* ---------- Cards ---------- */
.grid{display:grid;gap:16px}
.card{
  background:#fff;border:1px solid var(--cor-linha);border-radius:var(--raio);
  padding:22px;
}
.card--tinta{background:var(--cor-tinta);color:var(--cor-texto-claro);border:0}
.card--tinta .eyebrow{color:var(--cor-texto-claro-suave)}
.card--destaque{border-color:var(--cor-humano);border-width:1.5px}
.card__topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--fonte-mono);
  text-transform:uppercase;letter-spacing:.06em;font-size:.66rem;
  padding:5px 10px;border-radius:var(--raio-pill);white-space:nowrap;
}
.badge--realizada{background:#EAF1FA;color:var(--cor-maquina)}
.badge--confirmada{background:#FCEBE2;color:var(--cor-humano)}
.badge--cancelada{background:var(--cor-papel-2);color:var(--cor-texto-suave)}
/* Escopo: faz parte do que a pessoa comprou, e ainda nao existe na conta dela.
   Neutro de proposito. Com a cor de "ativa", quem acabou de entrar lia que o
   agente ja estava de pe, e os agentes do Sprint sao montados durante o sprint. */
.badge--escopo{background:var(--cor-papel-2);color:var(--cor-texto-suave)}

/* ---------- Progresso ---------- */
.progresso__barra{
  height:8px;border-radius:var(--raio-pill);background:var(--cor-papel-2);
  overflow:hidden;margin:12px 0 8px;
}
.progresso__preenchido{height:100%;background:var(--cor-humano);border-radius:var(--raio-pill)}
.progresso__legenda{font-family:var(--fonte-mono);font-size:.72rem;color:var(--cor-texto-suave);text-transform:uppercase;letter-spacing:.05em}

/* ---------- Tabela ---------- */
.tabela-wrap{overflow-x:auto;border:1px solid var(--cor-linha);border-radius:var(--raio)}
table{width:100%;border-collapse:collapse;background:#fff;min-width:560px}
th,td{text-align:left;padding:13px 16px;font-size:.88rem;border-bottom:1px solid var(--cor-linha)}
th{
  font-family:var(--fonte-mono);text-transform:uppercase;font-size:.68rem;
  letter-spacing:.08em;color:var(--cor-texto-suave);font-weight:400;background:var(--cor-papel-2);
}
tr:last-child td{border-bottom:0}
td.acoes{white-space:nowrap}
td.acoes a{color:var(--cor-maquina);border-bottom:1px solid currentColor;font-size:.82rem}

/* Abaixo de 680px a tabela vira uma lista de cartões (um por reunião), em
   vez de forçar rolagem lateral pra ler a linha inteira. O <thead> some
   visualmente mas continua acessível a leitor de tela; os rótulos visuais
   vêm de data-label em cada <td>. */
@media(max-width:679px){
  .tabela-wrap{overflow-x:visible;border:0;border-radius:0}
  table{min-width:0;border-collapse:separate;border-spacing:0 12px;background:transparent}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  tr{display:block;background:#fff;border:1px solid var(--cor-linha);border-radius:var(--raio)}
  td{display:block;padding:9px 16px;border-bottom:0;font-size:.92rem}
  td:first-child{padding-top:16px;font-size:.98rem}
  td:not(:first-child):not(.acoes)::before{
    content:attr(data-label);display:block;font-family:var(--fonte-mono);
    text-transform:uppercase;font-size:.65rem;letter-spacing:.08em;
    color:var(--cor-texto-suave);margin-bottom:4px;
  }
  td.acoes{border-top:1px solid var(--cor-linha);margin-top:6px;padding:12px 16px 16px}
  td.acoes a{font-size:.85rem}
}



/* ---------- Agenda embutida (Cal.com) ---------- */
.agenda-real{
  border:1px solid var(--cor-linha);border-radius:var(--raio);
  overflow:hidden;background:#fff;
}
.agenda-real iframe{display:block;width:100%;height:640px;border:0}
.agenda-nota{
  font-size:.78rem;color:var(--cor-texto-suave);margin-top:14px;padding:12px 14px;
  background:var(--cor-papel-2);border-radius:var(--raio-sm);
}
.agenda-nota code{font-family:var(--fonte-mono);font-size:.92em}

/* ---------- Grid de skills ---------- */
.skill-card{background:#fff;border:1px solid var(--cor-linha);border-radius:var(--raio);padding:18px;display:flex;flex-direction:column;gap:8px}
.skill-card__topo{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.skill-card h3{margin-bottom:0}
.skill-card p{font-size:.85rem;color:var(--cor-texto-suave);margin:0}

/* ============================================================
   TRILHA (fileira de encontros): a peça principal da home.
   Uma faixa por tipo de encontro (Fazer-junto / Tira-dúvida), cada uma com
   título, apoio pequeno e botão de agendar (R3), e dentro dela os nós na
   horizontal. Os três estados (realizado, confirmado, vago) se distinguem por
   preenchimento, traço e selo de canto, não só por cor: a legenda de contagem
   saiu na R4, então a diferença tem que caber no próprio quadrado.
   ============================================================ */
.trilha{margin-top:40px}

/* O rótulo em Space Mono que ficava aqui virou o título da faixa. A linha
   entre as faixas separa fazer-junto de tira-dúvida sem criar caixa dentro de
   caixa, e o respiro maior empurra as portas pra baixo, que é a queixa F7.1
   ("profundamente não distribuído") atacada de novo. */
.trilha__faixa{margin:0}
.trilha__faixa + .trilha__faixa{
  margin-top:34px;padding-top:34px;border-top:1px solid var(--cor-linha);
}
.trilha__cabeca{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:18px;
}
.trilha__titulo{font-size:1.12rem;margin:0 0 3px}
.trilha__apoio{font-size:.88rem;color:var(--cor-texto-suave);margin:0;max-width:54ch}
/* flex:0 0 auto porque o botão é o item curto da linha: sem isso ele estica
   junto com o bloco de texto quando a faixa quebra em duas linhas. */
.trilha__acao{flex:0 0 auto}

/* A fileira rola na horizontal dentro do próprio bloco. Em tela estreita
   isso evita duas coisas ruins: quebrar os quadradinhos em várias linhas
   feias, ou forçar a página inteira a rolar de lado. */
.trilha__encontros{
  display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
  /* A folga de cima e da direita não é estética: o selo de canto sai 6px pra
     fora do nó, e overflow-y:hidden corta o que passar da caixa. */
  padding:9px 8px 12px;margin:0 -8px;scroll-snap-type:x proximity;
}
.trilha__encontros::-webkit-scrollbar{height:6px}
.trilha__encontros::-webkit-scrollbar-thumb{background:var(--cor-linha);border-radius:var(--raio-pill)}

.trilha__no{
  flex:0 0 auto;scroll-snap-align:start;
  width:52px;height:52px;border-radius:var(--raio-sm);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fonte-mono);font-size:.8rem;font-weight:700;
  background:#fff;border:1.5px solid var(--cor-linha);color:var(--cor-texto-suave);
  transition:transform .12s ease,border-color .12s ease,background .12s ease;
  /* âncora do selo de canto (::after dos estados marcados) */
  position:relative;
}

/* Realizado: preenchido e sólido. O encontro já aconteceu, o quadrado
   fecha. Marca em Tinta porque é fato consumado, não decisão de ninguém
   (por isso não usa nem clay nem azul, que são as cores de humano/máquina). */
.trilha__no--realizado{
  background:var(--cor-tinta);border-color:var(--cor-tinta);color:var(--cor-papel);
}
/* O selo marcado. Sem a legenda de contagem (R4), a diferença entre os três
   estados tem que caber no próprio quadrado, de relance: check pro que já
   aconteceu, ponto cheio pro que está marcado, nada pro que está vago. */
.trilha__no--realizado::after{
  content:"";position:absolute;top:-6px;right:-6px;
  width:18px;height:18px;border-radius:50%;
  background:var(--cor-papel) center/10px 10px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.6 6.3 4.6 9.3 10.4 2.9' fill='none' stroke='%23141413' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow:0 0 0 2px var(--cor-papel-2);
}

/* Confirmado: contorno grosso em azul (a máquina já guarda esse
   agendamento), fundo claro, sem preenchimento sólido. */
.trilha__no--confirmado{
  background:#EAF1FA;border:2px solid var(--cor-maquina);color:var(--cor-tinta);
}
.trilha__no--confirmado::after{
  content:"";position:absolute;top:-5px;right:-5px;
  width:14px;height:14px;border-radius:50%;
  background:var(--cor-maquina);
  box-shadow:0 0 0 2px var(--cor-papel-2);
}

/* Vago: traço tracejado, quase sem preenchimento. É o único estado
   clicável de verdade: cursor de mão, elevação no hover e contorno de foco
   visível pelo teclado. O hover vira clay porque marcar é decisão humana. */
.trilha__no--vago{
  background:transparent;border:1.5px dashed var(--cor-linha);
  color:var(--cor-texto-suave);cursor:pointer;
}
.trilha__no--vago:hover{border-color:var(--cor-humano);color:var(--cor-humano);transform:translateY(-2px)}
.trilha__no--vago:focus-visible{
  outline:2px solid var(--cor-maquina);outline-offset:2px;border-color:var(--cor-humano);
}
.trilha__no:disabled{cursor:default}

/* O bloco #trilha-legenda ("0 de 8 fazer-junto, 0 de 4 tira-dúvida") saiu na
   R4, junto com o <p> dele no HTML e com o código que o preenchia. */

/* ============================================================
   PORTAS: a grade da home. Quatro ou cinco cartões, alguns reais e
   clicáveis hoje, outros "em breve". Grade fluida: cresce até caber mais
   colunas em tela larga, sem depender de contar quantas portas existem.
   ============================================================ */
/* As portas da home. Cinco numa linha davam cartoes de 223px, com o titulo
   quebrando em duas linhas e sobrando um terco da tela vazio embaixo: era a
   queixa do Rafael de painel "profundamente nao distribuido" continuando viva,
   so que em cartao menor. Com minimo de 300px a grade cai pra tres colunas na
   largura do painel, os cartoes ganham altura, e o conteudo desce pela tela
   em vez de se espremer no topo. */
.portas{
  display:grid;gap:18px;margin-top:56px;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}
.porta{
  position:relative;background:#fff;border:1px solid var(--cor-linha);
  border-radius:var(--raio);padding:26px 24px;
  display:flex;flex-direction:column;min-height:170px;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
/* A etiqueta reserva o lugar dela mesmo quando nao existe: sem isto, o cartao
   sem "em breve" comeca o titulo mais alto que o do lado e a fileira fica
   desalinhada. */
.porta::before{
  content:"";display:block;height:22px;margin-bottom:10px;
}
.porta:has(.etiqueta-breve)::before{display:none}
.porta h3{margin-bottom:6px;font-size:1.02rem}
.porta p{font-size:.88rem;color:var(--cor-texto-suave);margin:0;line-height:1.55}

/* Etiqueta discreta "EM BREVE": Space Mono pequeno, sem grito. É só uma marca
   de estado, não uma frase narrando o futuro. Fica no fluxo em vez de ancorada
   no canto porque ela é usada dentro da porta E solta no topo das views novas;
   ancorada, a versão solta escapava do cartão e subia pra cima da topbar. */
.etiqueta-breve{
  /* align-self porque a porta e flex column: sem isto a etiqueta estica pela
     largura inteira do cartao e vira uma barra cinza atravessada. */
  display:inline-block;align-self:flex-start;margin-bottom:10px;
  font-family:var(--fonte-mono);text-transform:uppercase;letter-spacing:.1em;
  font-size:.6rem;color:var(--cor-texto-suave);
  background:var(--cor-papel-2);padding:4px 8px;border-radius:var(--raio-pill);
}

/* Porta com etiqueta = indisponível hoje. Precisa parecer indisponível,
   não quebrada: sem hover de elevação, sem cursor de mão, um pouco mais
   discreta. :has() cobre isso sozinho a partir da etiqueta; a classe
   .porta--em-breve fica como alternativa caso quem escrever o HTML prefira
   marcar a classe direto em vez de depender do seletor. */
.porta:has(.etiqueta-breve),
.porta.porta--em-breve{
  opacity:.82;cursor:default;
}
.porta:has(.etiqueta-breve) h3,
.porta.porta--em-breve h3{color:var(--cor-texto-suave)}

/* Porta sem etiqueta = ativa de verdade (hoje só o WhatsApp). Ganha o
   hover que a "em breve" não tem, pra diferença ficar óbvia ao passar o
   mouse, não só ao ler o texto pequeno. */
.porta:not(:has(.etiqueta-breve)):not(.porta--em-breve){cursor:pointer}
.porta:not(:has(.etiqueta-breve)):not(.porta--em-breve):hover{
  border-color:var(--cor-humano);transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(20,20,19,.06);
}

/* ============================================================
   VIEWS NOVAS: Protocolo, Arsenal, Fábrica de conteúdo.
   As três herdam .card, .grid, .badge, .skill-card e .onb-item de outras
   seções deste arquivo. Aqui entra só o que não existia: a promessa do
   Arsenal e o contador de conectores sob medida.
   ============================================================ */
/* A promessa do Arsenal e o h1 da tela, entao se comporta como titulo. Ja teve
   barra a esquerda e fundo proprio aqui, o que fazia o titulo parecer uma
   citacao pregada na pagina. Titulo e titulo. */
#arsenal-promessa{margin-bottom:.4em}
#arsenal-conectores{
  font-family:var(--fonte-mono);font-size:.76rem;color:var(--cor-texto-suave);
  text-transform:uppercase;letter-spacing:.05em;margin-top:16px;
}

/* ---------- Perfil / form ---------- */
.form-grid{display:grid;gap:16px}
@media(min-width:560px){.form-grid--2{grid-template-columns:1fr 1fr}}

/* ---------- Responsivo desktop ---------- */
@media(min-width:900px){
  .sidebar{transform:translateX(0);position:sticky;height:100vh}
  .main{padding:34px 40px 60px;margin-left:0}
  .topbar__hamb{display:none}
  .topbar__simbolo{display:none}
  .overlay{display:none}
  .grid--2{grid-template-columns:1fr 1fr}
  }

/* Tela larga: o monitor de mesa sobra espaço à direita. Não centralizo o
   conteúdo (ficaria descolado da barra lateral fixa à esquerda); em vez disso
   dou mais fôlego de margem e subo o teto de largura, pra trilha e portas
   usarem a sobra. Este bloco já repetiu o mesmo 1180 da regra base, o que o
   tornava uma regra que não fazia nada. */
@media(min-width:1300px){
  .main{padding:48px 64px 90px}
  .wrap-app{max-width:1280px}
}

/* ============================================================
   BEM-VINDO (onboarding de primeiro acesso)
   Mesma base do login: cartão Papel centrado sobre Tinta.
   Regra de cor da marca, e aqui ela tem função: AZUL é a memória
   da máquina (o que já sabemos), CLAY é a decisão da pessoa.
   ============================================================ */
.onb-shell{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:32px 18px;background:var(--cor-tinta);
}
.onb-card{
  width:100%;max-width:520px;background:var(--cor-papel);
  border-radius:var(--raio);padding:34px 30px 30px;
  transition:opacity .22s ease,transform .22s ease;
}
.onb-card .ec-lockup{justify-content:center;margin-bottom:22px}
.onb-card .ec-wm{color:var(--cor-tinta)}
.onb-card h1{font-size:1.35rem;margin-bottom:.5em}
.onb-fala{font-size:.98rem;margin-bottom:.6rem}
.onb-dica{font-size:.78rem;color:var(--cor-texto-suave);margin:-8px 0 16px}

/* ---------- Ritmo do onboarding ----------
   O ritmo da conversa (digitação, respiro entre falas, transição de tela e o
   botão que só acende no fim) mora no <style> do próprio bem-vindo.html, com
   as classes .onb-corpo--sai, .onb-entra e .onb-botao--visivel.

   Este arquivo já teve um contrato paralelo aqui, com .onb-card--troca e
   .onb-fala--entra, que o JS nunca chegou a usar. Foi removido em 26/08/2026:
   CSS que ninguém aciona faz a próxima sessão consertar a animação no arquivo
   errado. Se for mexer no ritmo, é no bem-vindo.html. */


/* Progresso das três perguntas */

/* Os primeiros passos */
.onb-lista{list-style:none;padding:0;margin:0 0 24px}
.onb-item{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--cor-linha)}
.onb-item:last-child{border-bottom:1px solid var(--cor-linha)}
.onb-item__n{
  font-family:var(--fonte-mono);font-size:.78rem;color:var(--cor-humano);
  flex:0 0 24px;padding-top:3px;
}
.onb-item__corpo h3{font-size:.98rem;margin-bottom:.25em}
.onb-item__corpo p{font-size:.86rem;color:var(--cor-texto-suave);margin:0}

.onb-erro{
  font-size:.82rem;color:var(--cor-humano);background:#FCEBE2;
  border-radius:var(--raio-sm);padding:10px 12px;margin:0 0 14px;
}

/* ============================================================
   MOVIMENTO REDUZIDO
   Quem pede menos movimento recebe o conteúdo inteiro, na hora, sem
   animação nenhuma: nem a troca de tela e as falas do onboarding, nem o
   fade da troca de view do app, nem o hover das portas ou da trilha. Regra
   única, vale pro arquivo inteiro, sempre por último na cascata.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   MINHAS REUNIÕES: o que a pessoa leva de cada encontro.
   Decisão D12. Cada encontro é um cartão com cabeça (título e estado) e as
   saídas (transcrição e plano de ação). Enquanto a saída não existe, a linha
   fica em texto suave: ela informa sem prometer.
   ============================================================ */
.encontro{
  background:#fff;border:1px solid var(--cor-linha);border-radius:var(--raio);
  padding:20px 22px;margin-bottom:12px;
}
.encontro__cabeca{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:10px;
}
.encontro__cabeca h3{font-size:1rem;margin:0}
.encontro__quando{
  font-family:var(--fonte-mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--cor-texto-suave);
}
.encontro__saidas{display:flex;flex-direction:column;gap:6px}
.encontro__saidas a{color:var(--cor-maquina);font-size:.92rem}
.encontro__saidas p{margin:0;font-size:.88rem;color:var(--cor-texto-suave)}

/* ============================================================
   ARTIGO LONGO (a view #protocolo, desde 28/08/2026)
   O Protocolo deixou de ser cinco cartões e virou o artigo inteiro. Texto
   longo pede três coisas que o resto do painel não precisava: largura de
   leitura curta, ritmo de título que deixa achar a seção de relance, e um
   jeito de voltar ao topo sem rolar 20 telas na mão.
   Zero token novo: tudo aqui sai das variáveis do topo do arquivo.
   ============================================================ */

/* ~74 caracteres por linha. .wrap-app continua valendo pro resto da view
   (1180px), e é de propósito: o artigo é estreito, o botão flutuante e as
   futuras peças largas não precisam ser. */
.artigo{max-width:74ch}
.artigo h1{margin-bottom:.5em}
.artigo p{line-height:1.72}
.artigo ul,.artigo ol{margin:0 0 1.1rem;padding-left:1.3rem}
.artigo li{margin-bottom:.5rem;line-height:1.7}
.artigo code{
  font-family:var(--fonte-mono);font-size:.88em;background:var(--cor-papel-2);
  padding:2px 6px;border-radius:var(--raio-sm);
}
.artigo .tabela-wrap{margin:0 0 1.4rem}

/* A abertura é o gancho: pesa um pouco mais que o corpo e usa Tinta cheia
   em vez do cinza de .lead, senão o começo do artigo entra apagado. */
.artigo__abertura p{font-size:1.04rem}
.artigo__abertura p:first-child{font-size:1.12rem}

/* Linha divisória entre seções: em artigo de treze seções, margem sozinha
   não separa o suficiente pra pessoa saber que virou de assunto.
   scroll-margin-top é o que impede o índice de encostar o título no
   limite de cima da janela ao rolar até ele. */
.artigo-secao{
  margin-top:52px;padding-top:34px;border-top:1px solid var(--cor-linha);
  scroll-margin-top:22px;
}
.artigo-secao h2{font-size:clamp(1.28rem,2.6vw,1.6rem);margin-bottom:.5em}
.artigo-secao h3{font-size:1.05rem;margin:2rem 0 .5em}

/* Pull-quote das duas frases que a própria fonte isola (a premissa e o
   princípio do eixo 3). Clay porque é exatamente o que se quer que a
   pessoa pare pra ler: a regra de cor da marca aplicada ao pé da letra. */
.artigo__destaque{
  font-family:var(--fonte-titulo);font-weight:700;font-size:1.1rem;
  line-height:1.4;color:var(--cor-tinta);
  border-left:3px solid var(--cor-humano);padding-left:16px;margin:1.7rem 0;
}

/* ---------- Índice ----------
   Os números são azul: navegação é máquina, atenção baixa. */
.artigo-indice{
  background:#fff;border:1px solid var(--cor-linha);border-radius:var(--raio);
  padding:22px 24px;margin-top:34px;
}
.artigo-indice__lista{
  list-style:none;counter-reset:secao;margin:0;padding:0;display:grid;gap:0;
}
@media(min-width:760px){
  .artigo-indice__lista{grid-template-columns:1fr 1fr;column-gap:28px}
}
.artigo-indice__lista li{counter-increment:secao}
.artigo-indice__lista a{
  display:flex;gap:11px;padding:7px 0;font-size:.92rem;line-height:1.45;
  color:var(--cor-tinta);transition:color .12s ease;
}
.artigo-indice__lista a::before{
  content:counter(secao,decimal-leading-zero);
  font-family:var(--fonte-mono);font-size:.7rem;color:var(--cor-maquina);
  flex:0 0 auto;padding-top:3px;
}
.artigo-indice__lista a:hover{color:var(--cor-humano)}
.artigo-indice__lista a:focus-visible{outline:2px solid var(--cor-maquina);outline-offset:3px}

/* ---------- Voltar ao topo ----------
   Vive dentro da <section class="view">, então some sozinho fora do artigo.
   O atributo hidden é quem manda: sem a regra [hidden] abaixo, o display
   do próprio botão ganharia dele e o botão apareceria sempre. */
.btn-topo{
  position:fixed;right:18px;bottom:18px;z-index:20;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--fonte-mono);text-transform:uppercase;letter-spacing:.08em;
  font-size:.68rem;background:var(--cor-tinta);color:var(--cor-papel);
  border:0;border-radius:var(--raio-pill);padding:11px 17px;cursor:pointer;
  box-shadow:0 6px 20px rgba(20,20,19,.18);
}
.btn-topo[hidden]{display:none}
.btn-topo:hover{opacity:.9}
.btn-topo svg{width:14px;height:14px;flex:0 0 auto}
@media(min-width:900px){.btn-topo{right:34px;bottom:28px}}

/* ---------- As duas entregas do fim do artigo ----------
   Download é Blob local (portal.js), sem rede e sem serviço de terceiro.
   O peso de cada arquivo é escrito pelo JS a partir do próprio Blob: número
   na tela que ninguém precisa lembrar de atualizar. */
.artigo-entregas{margin-top:28px}
.artigo-entregas .card{display:flex;flex-direction:column}
.artigo-entregas .card h3{margin-bottom:8px}
.artigo-entregas .card p{font-size:.9rem;color:var(--cor-texto-suave)}
.artigo-entregas .btn{align-self:flex-start;margin-top:4px}
.artigo-entregas__peso{
  font-family:var(--fonte-mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--cor-texto-suave);margin:12px 0 0;
}

/* ============================================================
   ARSENAL (R6, 28/08/2026): a promessa escrita, com as oito famílias.
   Herda .card, .grid, .btn e .etiqueta-breve.

   ⛔ Em 28/08 os TRÊS caminhos de entrega viraram UM. O botão de baixar
   todas e o caminho do GitHub saíram por ordem dele, e a tela passou a ter
   um trabalho novo: ajudar a escolher UMA. Daí .familia__gatilho, que é o
   problema que abre cada família, e o botão real dentro de .arsenal-entrega.
   Contexto e palavra dele no comentário da seção em portal.html.
   ============================================================ */
.arsenal-titulo{font-size:1.25rem;margin:46px 0 .45em}
.arsenal-familias,.arsenal-entrega{margin-top:20px}
.arsenal-familias .card h3,.arsenal-entrega .card h3{margin-bottom:8px}
.arsenal-familias .card p,.arsenal-entrega .card p{
  font-size:.9rem;color:var(--cor-texto-suave);margin:0;
}

/* O gatilho é a linha pela qual a pessoa se reconhece e para de rolar, então
   ele precisa ganhar do parágrafo que vem depois. Tinta cheia e peso, sem
   virar título: título é o nome da família. */
.arsenal-familias .card .familia__gatilho{
  color:var(--cor-tinta);font-weight:600;font-size:.94rem;
  line-height:1.45;margin:0 0 10px;
}

/* O cartão que baixa de verdade. Só ele tem botão, e a coluna flex mantém o
   botão preso à esquerda em vez de esticar pela largura do cartão. */
.arsenal-entrega .card{display:flex;flex-direction:column}
.arsenal-entrega .card .btn{align-self:flex-start;margin-top:14px}
.arsenal-entrega .card .artigo-entregas__peso{margin-top:12px}