/* Broto PRO — a folha de estilo do painel.
   Os tokens são os mesmos do aplicativo, para que o profissional e o paciente
   estejam olhando visivelmente o mesmo produto. */

:root {
  --papel: #FBF7EF;
  --papel2: #F3ECDD;
  --branco: #FFFFFF;
  --tinta: #1A1813;
  --tinta-suave: #4A463C;
  --tinta-fraca: #6E6857;
  --escuro: #26241D;
  --escuro2: #322E24;
  --sobre-escuro: #A8A08C;

  --lima: #B7E846;
  --lima-tinta: #4E7A0E;
  --ceu: #7FC9F5;
  --coral: #FF8E6E;
  --lilas: #C4A8F2;
  --sol: #FFD44D;
  --menta: #BEEBC0;
  --sage: #E9F5D6;
  --blush: #FBE0DC;
  --peach: #FCE7CE;
  --peri: #E4E8FF;
  --peri-tinta: #4E3A78;
  --perigo: #C4291F;

  --linha: rgba(26, 24, 19, 0.12);
  --linha-forte: rgba(26, 24, 19, 0.25);
  --linha-clara: rgba(251, 247, 239, 0.18);

  --display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --corpo: Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--corpo);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--lima-tinta); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ——— tipografia ——— */
.titulo { font-family: var(--display); font-weight: 700; letter-spacing: -0.5px; margin: 0; }
.t-40 { font-size: 40px; line-height: 1.1; letter-spacing: -0.8px; }
.t-30 { font-size: 30px; line-height: 1.15; }
.t-26 { font-size: 26px; line-height: 1.2; letter-spacing: -0.4px; }
.olho {
  font-family: var(--display); font-weight: 500; font-size: 11px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--tinta-fraca);
}
.apoio { font-size: 14px; line-height: 21px; color: var(--tinta-fraca); margin: 0; }
.nota { font-size: 12.5px; line-height: 19px; color: var(--tinta-fraca); margin: 0; }

/* ——— estruturas ——— */
.tela { display: flex; min-height: 100vh; }
.lateral {
  width: 240px; flex-shrink: 0; background: var(--escuro);
  padding: 26px 18px; display: flex; flex-direction: column; gap: 26px;
  position: sticky; top: 0; height: 100vh;
}
.miolo { flex-grow: 1; padding: 34px 40px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.marca { display: flex; align-items: center; gap: 9px; }
.marca-icone {
  width: 30px; height: 30px; border-radius: 9px; background: var(--lima);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.marca-nome { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--papel); }
.selo-pro {
  font-weight: 600; font-size: 10px; letter-spacing: 1px; color: var(--tinta);
  background: var(--lima); border-radius: 100px; padding: 3px 7px;
}

.menu { display: flex; flex-direction: column; gap: 3px; }
.menu a {
  border-radius: 10px; padding: 11px 12px; min-height: 44px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--sobre-escuro); text-decoration: none;
}
.menu a:hover { background: rgba(251, 247, 239, 0.06); text-decoration: none; }
.menu a.ativo { background: var(--escuro2); color: var(--papel); font-weight: 600; }
.menu .contagem {
  margin-left: auto; font-weight: 600; font-size: 11px; color: var(--tinta);
  background: var(--lima); border-radius: 100px; padding: 2px 7px;
}

.eu {
  margin-top: auto; border-top: 1px solid var(--linha-clara); padding-top: 16px;
  display: flex; align-items: center; gap: 10px;
}
.eu .iniciais {
  width: 30px; height: 30px; border-radius: 100px; background: var(--escuro2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 12px; color: var(--papel);
}
.eu b { font-weight: 500; font-size: 13px; color: var(--papel); display: block; }
.eu span { font-size: 11.5px; color: var(--sobre-escuro); }

/* ——— cartões ——— */
.cartao {
  background: var(--branco); border: 1.5px solid var(--linha);
  border-radius: 14px; padding: 20px;
}
.cartao-escuro { background: var(--escuro); border-radius: 14px; padding: 20px; color: var(--papel); }
.cartao-escuro .olho { color: var(--sobre-escuro); }
.cartao-escuro p { color: var(--sobre-escuro); }
.aviso { background: var(--papel2); border-radius: 14px; padding: 16px 18px; }

/* ——— botões ——— */
.botao {
  border: 1.5px solid var(--tinta); border-radius: 12px; min-height: 48px;
  padding: 0 18px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 500; font-size: 15px;
  cursor: pointer; background: var(--branco); color: var(--tinta);
}
.botao:hover { text-decoration: none; opacity: 0.88; }
.botao-cheio { background: var(--tinta); color: var(--papel); }
.botao-lima { background: var(--lima); color: var(--tinta); }
.botao-largo { width: 100%; }

/* ——— campos ——— */
.campo-grupo { display: flex; flex-direction: column; gap: 8px; }
.campo {
  background: var(--branco); border: 1.5px solid var(--linha); border-radius: 12px;
  height: 52px; padding: 0 16px; font-family: var(--corpo); font-size: 16px;
  color: var(--tinta); width: 100%;
}
.campo:focus { outline: none; border-color: var(--tinta); border-width: 2px; }

/* ——— abas ——— */
.abas {
  background: var(--escuro2); border-radius: 100px; padding: 4px;
  display: flex; gap: 4px; align-self: flex-start; flex-wrap: wrap;
}
.abas button {
  border: 0; background: transparent; border-radius: 100px; height: 40px;
  padding: 0 15px; font-family: var(--corpo); font-weight: 500; font-size: 14px;
  color: var(--sobre-escuro); cursor: pointer;
}
.abas button.ativa { background: var(--papel); color: var(--tinta); font-weight: 600; }

/* ——— listas ——— */
.linha-item {
  background: var(--branco); border: 1.5px solid var(--linha); border-radius: 14px;
  padding: 18px 20px; display: flex; align-items: center; gap: 18px;
  color: inherit; text-decoration: none;
}
a.linha-item:hover { border-color: var(--tinta); text-decoration: none; }

.avatar {
  width: 42px; height: 42px; border-radius: 100px; flex-shrink: 0;
  border: 1.5px solid var(--tinta); display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--tinta);
}
.etiqueta {
  background: var(--papel2); border-radius: 100px; padding: 5px 11px;
  font-size: 12.5px; color: var(--tinta-suave);
}

.oculto { display: none !important; }

/* ===========================================================================
   TELAS ESTREITAS
   ===========================================================================
   O painel é ferramenta de mesa: ler o diário de um paciente em coluna de 375px
   não é trabalho que alguém faça de verdade. Mas ELE VAI SER ABERTO NO CELULAR
   assim mesmo — pelo link que chega no WhatsApp, na primeira vez, quase sempre. E
   a primeira vez é a que decide se existe uma segunda.

   Então o alvo aqui não é usar o painel no telefone. É que ele abra, se leia, e
   pareça a mesma coisa que na mesa.

   O QUE MUDA, E POR QUÊ:
   - A tela de entrar empilha: o formulário em cima, o painel escuro "como funciona
     o acesso" embaixo. Ao lado, ele viraria duas colunas de 200px, que foi
     exatamente o que apareceu quando testei em 400px de largura.
   - O menu lateral, que é `sticky` de altura cheia, vira uma faixa horizontal no
     topo. Um menu de 240px numa tela de 375 come dois terços do espaço.
   - Tabela larga rola dentro da própria caixa, e nunca a página inteira. Página que
     rola pro lado é a forma mais rápida de alguém achar que o site está quebrado.

   960px é o corte porque é onde a lateral de 240px mais o miolo confortável deixam
   de caber — e não um número redondo escolhido por hábito.
   =========================================================================== */
@media (max-width: 960px) {
  .tela { flex-direction: column; }

  .lateral {
    width: 100%; height: auto; position: static;
    flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: 14px; padding: 14px 16px;
  }
  .menu { flex-direction: row; flex-wrap: wrap; gap: 6px; flex-grow: 1; }
  .menu a { padding: 9px 12px; }
  /* No celular a ficha encolhe: o nome e o registro saem (comeriam a faixa), mas o
     botão de SAIR FICA. Até 04/10/2026 a regra era `.eu { display: none }`, e quem
     abria o painel num celular emprestado não tinha como apagar a chave dali. */
  .eu { margin-top: 0; border-top: 0; padding-top: 0; margin-left: auto; }
  .eu .eu-nome, .eu .iniciais { display: none; }
  .sair { width: auto; padding: 0 12px; gap: 6px; border: 1.5px solid var(--linha-clara); }
  .sair .sair-rotulo { display: inline; font-size: 13.5px; }

  .miolo { padding: 20px 16px; }

  /* A tela de entrar, que não usa `.tela` — ela monta o próprio `main` em flex. */
  main > section { width: 100% !important; }
  main { flex-direction: column !important; }
}

@media (max-width: 620px) {
  .t-40 { font-size: 30px; line-height: 1.15; letter-spacing: -0.5px; }
  .t-30 { font-size: 25px; }
  .t-26 { font-size: 22px; }

  /* Linha de item vira bloco: os pedaços que ficavam lado a lado empilham em vez de
     espremer. É o que mantém o nome do paciente legível. */
  .linha-item { flex-wrap: wrap; gap: 10px; }
  .linha-item > div { width: auto !important; text-align: left !important; }

  .abas { overflow-x: auto; }
}

/* Conteúdo largo rola dentro da própria caixa. Nunca a página. */
.rola-lado { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===========================================================================
   A PÁGINA DE VENDAS
   ===========================================================================
   O EIXO DA PÁGINA É UM SÓ: comece com três pacientes, de graça, sem prazo.

   Tudo aqui serve a isso. Não há "conheça nossos planos" no topo, não há login na
   primeira dobra, não há tabela comparativa antes de a pessoa ver a tela. Quem
   chega tem uma pergunta — "isso vale meu tempo?" — e a resposta mais barata que
   existe é "descubra sem pagar nada, e sem relógio correndo".

   A CONVERSÃO PARA O ANUAL NÃO ACONTECE AQUI. Ela acontece no quarto paciente,
   dentro do painel, quando a pessoa já depende dele. Uma página que tenta vender o
   anual antes de a pessoa ter usado está pedindo R$597 de quem ainda não sabe se
   vai gostar — e o preço vira o motivo de ir embora.

   ---------------------------------------------------------------------------
   A PALETA, e por que ela muda em relação ao site do paciente
   ---------------------------------------------------------------------------
   O app é papel e tinta: calmo, quase sem contraste, porque quem usa está cansado.
   Esta página tem outro leitor — uma profissional avaliando uma ferramenta de
   trabalho, entre dois atendimentos, provavelmente cética.

   Então o topo é ESCURO. Não é troca de marca: são as mesmas tintas do Broto, com
   o peso invertido. O escuro dá autoridade e faz o lima virar acento de verdade em
   vez de um verde claro sobre papel claro. E cria a única hierarquia que importa
   aqui: o que é escuro é argumento, o que é papel é prova.
   =========================================================================== */

.venda { font-family: var(--corpo); background: var(--papel); }

/* ——— tipografia: tracking por tamanho, nunca um valor só ———
   Letter-spacing fixo está errado em algum tamanho, sempre. Texto grande lê com as
   letras afastadas demais e precisa de tracking negativo; texto pequeno precisa do
   contrário. Cada degrau tem o seu. */
.v-mega {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(42px, 7.6vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.042em;
}
.v-h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.v-h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.018em;
}
.v-lede { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; letter-spacing: -0.008em; max-width: 56ch; }
.v-corpo { font-size: 15.5px; line-height: 1.62; color: var(--tinta-suave); }
.v-nota { font-size: 13px; line-height: 1.5; letter-spacing: 0.004em; color: var(--tinta-fraca); }
.v-olho {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinta-fraca);
}

.v-wrap { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 44px); }
.v-secao { padding-block: clamp(60px, 9vw, 120px); }
.v-cabeca { display: flex; flex-direction: column; gap: 15px; margin-bottom: clamp(34px, 4.4vw, 58px); max-width: 62ch; }

/* ——— sobre o escuro ——— */
.no-escuro { background: var(--escuro); color: var(--papel); }
.no-escuro .v-corpo, .no-escuro .v-nota { color: var(--sobre-escuro); }
.no-escuro .v-olho { color: var(--sobre-escuro); }
.no-escuro .v-h2, .no-escuro .v-h3, .no-escuro .v-mega { color: var(--papel); }

/* ——— O TOPO ———
   O brilho é um radial de lima com opacidade baixíssima atrás do título. Ele não é
   decoração: é o que impede um retângulo de 700px de tinta lisa parecer um erro de
   carregamento, e é o que dá profundidade sem inventar uma cor nova. */
.v-topo {
  position: relative; overflow: hidden;
  background: var(--escuro); color: var(--papel);
  padding-block: clamp(64px, 11vw, 132px) clamp(48px, 7vw, 88px);
}
.v-topo::before {
  content: ''; position: absolute; pointer-events: none;
  inset: -30% -10% auto -10%; height: 120%;
  background:
    radial-gradient(58% 52% at 22% 30%, rgba(183, 232, 70, 0.14), transparent 70%),
    radial-gradient(46% 46% at 82% 12%, rgba(196, 168, 242, 0.10), transparent 72%);
}
.v-topo > * { position: relative; }

/* O selo do grátis. Fica ACIMA do título porque é a oferta, e a oferta é o que faz
   a pessoa continuar lendo o título. */
.v-selo {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(183, 232, 70, 0.35);
  background: rgba(183, 232, 70, 0.10);
  border-radius: 100px; padding: 7px 15px 7px 11px;
  font-size: 13.5px; font-weight: 500; color: var(--lima);
}
.v-selo b { color: var(--papel); font-weight: 700; }
.v-selo-ponto {
  width: 7px; height: 7px; border-radius: 100px; background: var(--lima); flex-shrink: 0;
}

/* ——— BOTÕES ———
   Três camadas de resposta, e cada uma existe por um motivo:

   1. `:hover` levanta 1px e engorda a sombra — o convite antes do toque.
   2. `:active` desce e encolhe 1.5%, em 90ms — a resposta NO APERTAR, e não no
      soltar. Esperar o clique terminar pra dar sinal é o que faz interface parecer
      morta, e a diferença é sentida mesmo por quem não sabe nomear.
   3. A seta anda 3px no hover. É o único movimento decorativo da página, e ele
      aponta pra onde o clique leva — movimento que informa, não que enfeita. */
.v-bt {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; padding-inline: 26px; border-radius: 100px;
  font-family: var(--corpo); font-weight: 700; font-size: 16.5px; letter-spacing: -0.012em;
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform 90ms ease-out, box-shadow 200ms cubic-bezier(.2,.6,.2,1),
              background 180ms ease-out, border-color 180ms ease-out;
}
.v-bt .seta { transition: transform 220ms cubic-bezier(.2,.6,.2,1); }
.v-bt:hover .seta { transform: translateX(3px); }
.v-bt:active { transform: translateY(1px) scale(0.985); }

.v-bt-lima {
  background: var(--lima); color: var(--tinta); border-color: var(--tinta);
  box-shadow: 0 3px 0 0 var(--tinta);
}
.v-bt-lima:hover { background: #C4F055; box-shadow: 0 5px 0 0 var(--tinta); transform: translateY(-1px); }
.v-bt-lima:active { box-shadow: 0 1px 0 0 var(--tinta); }

.v-bt-papel { background: var(--papel); color: var(--tinta); }
.v-bt-papel:hover { box-shadow: 0 6px 22px -8px rgba(0,0,0,.5); transform: translateY(-1px); }

.v-bt-vazio { background: transparent; border-color: rgba(251,247,239,.28); color: var(--papel); }
.v-bt-vazio:hover { border-color: var(--papel); background: rgba(251,247,239,.06); }

.v-bt-tinta { background: var(--tinta); color: var(--papel); }
.v-bt-tinta:hover { box-shadow: 0 8px 24px -10px rgba(26,24,19,.7); transform: translateY(-1px); }

/* ——— navegação: material, e não barra opaca ———
   Uma faixa opaca come uma tira fixa da tela. O material ocupa a mesma tira e
   continua deixando ver que há conteúdo passando por baixo. */
.v-nav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--escuro) 76%, transparent);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(251,247,239,.10);
  color: var(--papel);
}
.v-nav-miolo { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.v-nav a { color: var(--papel); }
.v-nav .elo { font-size: 14.5px; font-weight: 500; color: var(--sobre-escuro); }
.v-nav .elo:hover { color: var(--papel); }

/* ——— cartões e grades, SEM obrigação de bento ———
   Bento é bom quando as peças têm pesos diferentes de propósito. Quando são três
   coisas do mesmo tamanho, uma fileira honesta lê melhor — e é isso que `.v-fila`
   faz. Grade de doze colunas onde não há hierarquia é grade pela grade. */
.v-fila { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.v-fila-2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.v-cartao {
  background: var(--branco); border: 1.5px solid var(--linha);
  border-radius: 18px; padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.v-cartao-papel { background: var(--papel2); border-color: transparent; }
.v-cartao-escuro { background: var(--escuro2); border-color: transparent; color: var(--papel); }
.v-cartao-escuro .v-corpo { color: var(--sobre-escuro); }

/* O número grande das dores. Ele conta antes de a pessoa ler. */
.v-cifra {
  font-family: var(--display); font-weight: 700; font-size: 40px;
  letter-spacing: -0.04em; line-height: 1; color: var(--lima-tinta);
}
.no-escuro .v-cifra { color: var(--lima); }

/* ——— o bloco do grátis ——— */
.v-gratis {
  border-radius: 26px; padding: clamp(26px, 4vw, 46px);
  background: var(--lima); border: 2px solid var(--tinta);
  box-shadow: 0 10px 0 0 var(--tinta);
}
.v-preco { font-family: var(--display); font-weight: 700; font-size: clamp(38px,4.6vw,54px); letter-spacing: -0.035em; line-height: 1; }
.v-preco small { font-family: var(--corpo); font-weight: 500; font-size: 15px; letter-spacing: 0; }
.v-lista { display: flex; flex-direction: column; gap: 10px; }
.v-lista > div { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; align-items: flex-start; }
.v-tique { flex-shrink: 0; margin-top: 3px; }

/* ——— aparecer ao rolar ———
   Sem JS tudo já está visível: o estado escondido só existe quando o script marca
   `html.js`. Página que precisa de JS pra mostrar texto é página em branco pra quem
   bloqueia script — e pra qualquer robô que desista de esperar. */
html.js .reveal { opacity: 0; transform: translateY(18px); }
html.js .reveal.dentro {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .v-bt, .v-bt .seta { transition: background 160ms ease-out; }
  .v-bt:hover, .v-bt:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .v-nav { background: var(--escuro); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ===========================================================================
   A VITRINE — o painel se mostrando sozinho, na SEGUNDA dobra
   ===========================================================================
   Ninguém assina painel clínico sem ver a tela. Descrever aba em texto e só depois
   mostrar é pedir que a pessoa acredite antes de olhar — e ela não vai: vai rolar
   até achar a imagem. Melhor pôr a imagem onde ela já está indo.

   ELA SOBE POR CIMA DO TOPO ESCURO, de propósito. O `margin-top` negativo faz a
   janela do painel encostar na borda da seção escura e continuar sobre o papel — o
   objeto atravessa a divisão em vez de ficar preso num dos lados. É o que dá a
   sensação de camada, e é barato: uma margem e uma sombra.
   =========================================================================== */

.vitrine-caixa { margin-top: clamp(-88px, -7vw, -40px); position: relative; z-index: 5; }

.vitrine {
  border-radius: 20px;
  border: 1.5px solid var(--linha);
  background: var(--branco);
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(26,24,19,.55), 0 4px 14px rgba(26,24,19,.07);
}

.vt-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; background: var(--papel2);
  border-bottom: 1px solid var(--linha);
}
.vt-bolinha { width: 10px; height: 10px; border-radius: 100px; background: var(--linha-forte); }
.vt-url {
  margin-left: 8px; font-size: 12px; color: var(--tinta-fraca);
  background: var(--branco); border-radius: 100px; padding: 4px 12px; border: 1px solid var(--linha);
}

.vt-corpo { display: flex; min-height: 440px; }
.vt-lado {
  width: 196px; flex-shrink: 0; background: var(--escuro);
  padding: 16px 12px; display: flex; flex-direction: column; gap: 14px;
}
.vt-lado-rot { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--sobre-escuro); font-weight: 600; }
.vt-pac { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 10px; font-size: 12.5px; color: var(--sobre-escuro); }
.vt-pac.on { background: var(--escuro2); color: var(--papel); font-weight: 600; }
.vt-av {
  width: 26px; height: 26px; border-radius: 100px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 11px; color: var(--tinta);
}

.vt-main { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.vt-cab { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-bottom: 1px solid var(--linha); }

.vt-abas { display: flex; gap: 4px; padding: 10px 14px 0; overflow-x: auto; scrollbar-width: none; }
.vt-abas::-webkit-scrollbar { display: none; }
.vt-aba {
  white-space: nowrap; padding: 8px 13px; border-radius: 100px; border: none; background: none;
  font-family: var(--corpo); font-size: 13px; color: var(--tinta-fraca); cursor: pointer;
  transition: background 140ms ease-out, color 140ms ease-out, transform 90ms ease-out;
}
.vt-aba:hover { background: var(--papel2); }
.vt-aba:active { transform: scale(0.96); }
.vt-aba.on { background: var(--tinta); color: var(--papel); font-weight: 600; }

/* A barra é o relógio visível. Aba que troca sem aviso lê como defeito; com a barra
   correndo, a troca vira coisa esperada, e quem quiser segurar sabe quanto tempo tem. */
.vt-progresso { height: 2px; background: var(--linha); margin: 10px 14px 0; border-radius: 2px; overflow: hidden; }
.vt-progresso i { display: block; height: 2px; background: var(--lima-tinta); width: 0; }

.vt-tela { padding: 16px 18px 20px; flex-grow: 1; }
/* Cross-fade curto com um passo mínimo. Deslize longo aqui competiria com a rolagem
   da página — dois movimentos ao mesmo tempo, e o olho não sabe qual seguir. */
.vt-tela > * { animation: vt-entra 260ms cubic-bezier(.2,.6,.2,1) both; }
@keyframes vt-entra { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

.vt-rodape { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 4px 0; }
.vt-bt {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding-inline: 15px; border-radius: 100px;
  border: 1.5px solid var(--linha-forte); background: none; cursor: pointer;
  font-family: var(--corpo); font-size: 13.5px; font-weight: 600; color: var(--tinta);
  transition: transform 90ms ease-out, border-color 160ms ease-out;
}
.vt-bt:active { transform: scale(0.97); }
.vt-bt:hover { border-color: var(--tinta); }

.vt-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vt-num { background: var(--papel2); border-radius: 12px; padding: 12px 14px; }
.vt-num b { font-family: var(--display); font-size: 24px; letter-spacing: -0.02em; display: block; }
.vt-num span { font-size: 11.5px; color: var(--tinta-fraca); line-height: 1.35; display: block; margin-top: 2px; }
.vt-barras { display: flex; align-items: flex-end; gap: 3px; height: 92px; }
.vt-barras i { flex: 1; border-radius: 3px 3px 0 0; min-height: 3px; }
.vt-pontos { display: flex; gap: 3px; flex-wrap: wrap; }
.vt-pontos i { width: 9px; height: 9px; border-radius: 3px; }
.vt-cartao { border: 1.5px solid var(--linha); border-radius: 12px; padding: 13px 14px; }
.vt-chip { display: inline-flex; border-radius: 100px; padding: 3px 9px; font-size: 11.5px; font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .vt-tela > * { animation: none; }
  .vt-aba:active { transform: none; }
}
@media (max-width: 760px) {
  .vt-lado { display: none; }        /* a lista de pacientes não cabe, e não é o argumento */
  .vt-corpo { min-height: 0; }
  .vitrine-caixa { margin-top: -28px; }
}

/* ===========================================================================
   AJUSTES DE COMPOSIÇÃO — 26/08/2026
   =========================================================================== */

/* ——— VIÚVA NUNCA ———
   `text-wrap: balance` reparte as linhas de um título para que fiquem parecidas em
   largura, e é o que impede "viu." sozinho na terceira linha. Uma palavra solta
   embaixo de um título grande não é detalhe: ela quebra o bloco em duas formas, e o
   olho lê como erro de montagem.

   `balance` só vale até ~6 linhas (limite do próprio navegador, para não custar
   caro). Para os parágrafos usamos `pretty`, que é mais barato e só cuida da última
   linha — que é justamente onde a viúva aparece em texto corrido. */
.v-mega, .v-h2, .v-h3, .v-selo span { text-wrap: balance; }
.v-lede, .v-corpo, .v-nota, p { text-wrap: pretty; }

/* ——— A PRIMEIRA DOBRA ———
   Hierarquia refeita: o título deixa de ocupar três linhas gigantes e passa a caber
   em duas na maioria das telas. O que ele perde de tamanho, a composição ganha de
   ritmo — antes havia um vão morto entre o título e os botões que fazia a dobra
   parecer inacabada. */
.v-mega { font-size: clamp(40px, 6.4vw, 72px); }

/* O FUNDO ANIMADO.
   Duas manchas de luz que derivam devagar, em `transform` (nunca em `background-
   position`, que repinta a camada inteira a cada quadro).

   O MOVIMENTO É PROPOSITALMENTE QUASE IMPERCEPTÍVEL: 34 e 46 segundos por volta,
   deslocamento de poucos por cento. O material da Apple avisa contra fundo de tela
   inteira em movimento e contra oscilação lenta perto de 0,2 Hz — que é a faixa que
   provoca enjoo. Isto fica MUITO abaixo disso (0,03 Hz) e com contraste baixíssimo:
   a pessoa não vê o movimento, vê que a tela está viva.

   E some inteiro em `prefers-reduced-motion`. */
.v-topo::before {
  animation: deriva-a 34s ease-in-out infinite alternate;
  will-change: transform;
}
.v-topo::after {
  content: ''; position: absolute; pointer-events: none;
  inset: -20% -20% auto -20%; height: 130%;
  background: radial-gradient(40% 40% at 70% 60%, rgba(127, 201, 245, 0.09), transparent 70%);
  animation: deriva-b 46s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes deriva-a {
  from { transform: translate3d(-2%, -1%, 0) scale(1) }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08) }
}
@keyframes deriva-b {
  from { transform: translate3d(2%, 1%, 0) scale(1.06) }
  to   { transform: translate3d(-3%, -2%, 0) scale(1) }
}

/* ——— A CHEGADA DO PAINEL ———
   O painel entra inclinado e sobe até ficar reto, conforme a pessoa rola. Não é
   animação com duração: é o valor ligado à posição da rolagem, ou seja, a pessoa
   controla o quadro com o dedo. Rolar de volta desfaz.

   `perspective` no PAI e `rotateX` no filho: é o que dá o efeito de objeto deitando
   em direção ao leitor. Só `transform` e `opacity` mudam — as duas propriedades que
   o navegador anima sem repintar nada. */
.vitrine-palco { perspective: 1400px; perspective-origin: 50% 0%; }
.vitrine {
  transform-origin: 50% 0%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .v-topo::before, .v-topo::after { animation: none; }
  .vitrine { transform: none !important; }
}

/* ——— PASSOS VERTICAIS ———
   Substitui a fileira de três cartões iguais. Três cartões lado a lado dizem "estas
   coisas são simultâneas"; estes três não são — são um encadeamento que termina numa
   conclusão. Vertical, com fio ligando, e cada um acendendo quando chega a vez.

   O que muda quando ativo: a opacidade sobe e o marcador ganha cor. Nada mexe de
   lugar — mover um bloco de texto que a pessoa pode estar lendo é a forma mais fácil
   de fazer alguém perder a linha. */
.v-passos { display: flex; flex-direction: column; gap: 0; position: relative; }
.v-passo {
  display: grid; grid-template-columns: 52px 1fr; gap: clamp(14px, 2vw, 26px);
  padding-block: clamp(20px, 2.6vw, 32px);
  /*
    LEGÍVEL POR PADRÃO, e apagado só onde o acender for garantido.

    A versão anterior nascia em `opacity: .42` e contava com JavaScript para acender.
    Em um dos navegadores testados isso nunca aconteceu — nem evento de rolagem, nem
    `IntersectionObserver`, nem linha do tempo de rolagem — e o resultado eram três
    blocos permanentemente apagados. Pior que sem animação nenhuma.

    A regra: **enfeite pode degradar, texto não pode.** Quem tiver suporte a
    `animation-timeline` recebe o encadeamento acendendo; quem não tiver lê os três
    passos normalmente, e não perde nada além do efeito.
  */
  opacity: 1;
}
.v-passo-fio { position: relative; display: flex; flex-direction: column; align-items: center; }
.v-passo-marca {
  width: 13px; height: 13px; border-radius: 100px; flex-shrink: 0; margin-top: 7px;
  border: 2px solid var(--sobre-escuro); background: var(--escuro);
  transition: background .4s ease-out, border-color .4s ease-out, transform .4s cubic-bezier(.2,.6,.2,1);
}
.v-passo-marca { background: var(--lima); border-color: var(--lima); }
.v-passo-fio::after {
  content: ''; flex-grow: 1; width: 2px; margin-top: 6px;
  background: linear-gradient(to bottom, rgba(251,247,239,.16), rgba(251,247,239,.03));
}
.v-passo:last-child .v-passo-fio::after { display: none; }
.v-passo-cifra {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 2.9vw, 36px); letter-spacing: -.035em; line-height: 1.12;
  color: var(--lima); margin-bottom: 10px; display: block;
  /* Aspas penduradas: a abertura fica um pouco pra fora da coluna, e a margem
     esquerda do bloco continua reta ao olho. Sem isso, um título que começa com aspas
     parece deslocado meio caractere pra dentro. */
  text-indent: -0.42em;
}

/* ——— A JORNADA DO PACIENTE ———
   Quatro cartões numa grade viravam 3 + 1, e o cartão órfão da segunda fileira lia
   como sobra. Estes quatro são momentos de um dia, em ordem — então a forma certa é
   uma faixa de tempo, não uma grade.

   Em tela larga rola na horizontal, com o fio ligando os momentos. Em tela estreita
   empilha, porque rolagem horizontal dentro de página que já rola na vertical é o
   jeito mais rápido de perder alguém. */
.v-jornada { display: grid; gap: 0; grid-template-columns: repeat(4, 1fr); position: relative; }
.v-jornada::before {
  content: ''; position: absolute; left: 0; right: 0; top: 27px; height: 2px;
  background: linear-gradient(to right, transparent, var(--linha) 8%, var(--linha) 92%, transparent);
}
.v-momento { position: relative; padding: 0 clamp(10px, 1.6vw, 20px); }
.v-momento:first-child { padding-left: 0; }
.v-momento:last-child { padding-right: 0; }
.v-momento-hora {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: var(--papel); padding-right: 12px; margin-bottom: 16px;
}
.v-momento-bola {
  width: 13px; height: 13px; border-radius: 100px;
  border: 2px solid var(--tinta); background: var(--lima); flex-shrink: 0;
}
@media (max-width: 900px) {
  .v-jornada { grid-template-columns: 1fr; gap: 26px; }
  .v-jornada::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto;
                       background: linear-gradient(to bottom, transparent, var(--linha) 6%, var(--linha) 94%, transparent); }
  .v-momento { padding: 0 0 0 30px; }
  .v-momento-hora { background: none; margin-bottom: 10px; }
  .v-momento-bola { position: absolute; left: -30px; }
}

/* ===========================================================================
   ANIMAÇÃO LIGADA À ROLAGEM, EM CSS — e por que não em JavaScript
   ===========================================================================
   A primeira versão disto era JS: ouvir `scroll`, calcular a posição, escrever o
   `transform`. Funciona na maioria dos lugares e **não funcionou aqui** — neste
   navegador a página rola e nenhum evento de rolagem é emitido, em alvo nenhum.
   Nem no `window`, nem no `document`, nem em captura.

   Isso pode ser peculiaridade de um navegador só. Mas a lição vale além dele:
   quando existe uma forma de fazer sem depender de evento, ela é melhor. Estas
   animações rodam no compositor, fora da linha principal — não engasgam quando o
   JavaScript está ocupado, e continuam suaves em aparelho fraco.

   `view()` mede o elemento contra a janela; `animation-range` diz em que trecho
   dessa passagem a animação acontece. O `both` segura o último quadro, então o que
   acendeu continua aceso quando a pessoa passa direto.

   O `@supports` não é cortesia: onde não houver suporte, nada é aplicado e a peça
   aparece pronta. Nunca escondida esperando uma animação que não vem.

   O QUE FICOU DE FORA DAQUI, E POR QUÊ: o acender dos passos. Ele não é enfeite —
   é o que faz o encadeamento ser lido —, e por isso não podia depender de um
   recurso que alguns navegadores ainda não têm. Ele voltou para
   `IntersectionObserver`, em `ligarPassos()`, que funciona em todo lugar. A regra
   que separa os dois: **enfeite pode degradar, significado não pode.**
   =========================================================================== */

@supports (animation-timeline: view()) {
  /* `no-preference`, e não `not (reduce)`. As duas dizem a mesma coisa no papel, mas
     `@media not (feature)` é sintaxe de Media Queries nível 4 e nem todo interpretador
     aceita — quando não aceita, ele descarta o BLOCO INTEIRO em silêncio, e some com
     todas as animações sem erro nenhum em lugar nenhum. Foi o que aconteceu aqui. */
  @media (prefers-reduced-motion: no-preference) {

    /* O painel entra deitado e sobe até ficar reto. Quem controla o quadro é o dedo:
       rolar de volta desfaz, parar no meio para no meio. É a diferença entre uma
       animação que acontece PARA a pessoa e uma que acontece COM ela. */
    .vitrine {
      animation: painel-chega linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 34%;
    }
    @keyframes painel-chega {
      from { transform: rotateX(10deg) scale(0.925); }
      to   { transform: rotateX(0deg) scale(1); }
    }

    /* Os passos acendem quando chega a vez. Só aqui dentro: se o navegador não
       suportar, eles já estão acesos e ninguém vê blocos apagados. */
    .v-passo {
      animation: passo-acende linear both;
      animation-timeline: view();
      animation-range: entry 15% entry 90%;
    }
    @keyframes passo-acende { from { opacity: .34 } to { opacity: 1 } }

    .v-passo-marca {
      animation: marca-acende linear both;
      animation-timeline: view();
      animation-range: entry 15% entry 90%;
    }
    @keyframes marca-acende {
      from { background: var(--escuro); border-color: var(--sobre-escuro); transform: scale(1); }
      to   { background: var(--lima);  border-color: var(--lima);          transform: scale(1.25); }
    }

    /* Os momentos da jornada sobem um pouquinho ao entrar, em escada natural — cada
       um tem a própria passagem pela janela, então o atraso sai de graça. */
    .v-momento {
      animation: momento-entra linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 26%;
    }
    @keyframes momento-entra {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: none; }
    }
  }
}


/* ——— AS DOZE ANÁLISES, cada uma mostrando a própria cara ———
   Duas versões vieram antes. A primeira era tabela de doze linhas com três colunas
   de texto; a segunda, três cartões-coluna. As duas eram parede — e o problema não
   era comprimento: é que a pergunta do leitor ("isso cabe nos dez minutos entre dois
   pacientes?") não se responde em palavra nenhuma. Só olhando.

   Agora cada peça carrega a visualização DE VERDADE em miniatura: a rosca do humor,
   a tira dos hábitos, a linha da ASRS. Mesmo desenho do painel, reduzido.

   FUNDO ESCURO POR RAZÃO PRÁTICA, não estética: com 60px de altura, a diferença
   entre uma barra e o fundo precisa de um contraste que o papel não dá. */
.an-grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.an-peca {
  background: var(--escuro2); border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 13px;
}
.an-viz { height: 62px; display: flex; align-items: center; justify-content: center; }
.an-txt { display: flex; flex-direction: column; gap: 4px; }
.an-nome { font-weight: 700; font-size: 14.5px; letter-spacing: -0.012em; color: var(--papel); }
.an-quando {
  font-size: 10px; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--sobre-escuro);
}
.an-serve { font-size: 12.5px; line-height: 18px; color: var(--sobre-escuro); margin: 6px 0 0; }

/* As perguntas de abertura. Existem porque ninguém procura "vocês têm gráfico de
   humor" — procura saber se responde o que ele já se pergunta. */
.an-perguntas {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-bottom: clamp(22px, 3vw, 34px);
}
.an-pergunta {
  border-left: 2px solid var(--lima); padding: 4px 0 4px 16px;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.24; letter-spacing: -0.018em;
  color: var(--papel); text-wrap: balance;
}

/* ===========================================================================
   AS ANÁLISES, VIVAS AO PASSAR O MOUSE
   ===========================================================================
   Cada desenho reage do jeito DELE, e não com um efeito genérico aplicado em cima
   de tudo. Barra cresce de baixo, ponto acende em onda, linha se desenha da
   esquerda, rosca gira. É o que faz a peça parecer o gráfico dela e não um cartão
   com uma figura dentro.

   O ESCALONAMENTO VEM DE `--n`, o índice que o JavaScript escreve em cada elemento.
   Sem ele, catorze barras cresceriam ao mesmo tempo — o que lê como uma coisa só
   mudando de tamanho, e não como um gráfico se montando.

   TUDO ISTO É `transform` E `opacity`. São as duas propriedades que o navegador
   anima sem repintar nada, e por isso doze cartões podem animar ao mesmo tempo sem
   engasgar. Animar `width` ou `y` aqui derrubaria a taxa de quadros no celular.
   =========================================================================== */

.an-peca {
  border: 1.5px solid transparent;
  transition: transform 260ms cubic-bezier(.2,.6,.2,1),
              border-color 260ms ease-out,
              background 260ms ease-out;
}
.an-peca:hover {
  transform: translateY(-4px);
  background: #3a3529;
  border-color: rgba(183, 232, 70, 0.35);
}

/* Os desenhos: cada tipo com o seu gesto. */
.an-viz svg { overflow: visible; }

.an-barra { transform-origin: center bottom; transition: transform 420ms cubic-bezier(.2,.7,.2,1); }
.an-peca:hover .an-barra {
  transform: scaleY(1.16);
  transition-delay: calc(var(--n) * 22ms);
}
.an-peca:hover .an-barra-vazia { transform: none; }

.an-ponto { transition: transform 320ms cubic-bezier(.2,.7,.2,1), opacity 320ms ease-out; transform-origin: center; }
.an-peca:hover .an-ponto {
  transform: scale(1.3);
  transition-delay: calc(var(--n) * 11ms);
}

.an-pilula { transform-origin: left center; transition: transform 380ms cubic-bezier(.2,.7,.2,1); }
.an-peca:hover .an-pilula {
  transform: scaleX(1.06);
  transition-delay: calc(var(--n) * 45ms);
}

.an-tira { transform-origin: left center; transition: transform 400ms cubic-bezier(.2,.7,.2,1); }
.an-peca:hover .an-tira {
  transform: scaleX(1.08);
  transition-delay: calc(var(--n) * 55ms);
}

/* A linha se redesenha: `stroke-dasharray` grande com o deslocamento indo a zero.
   `pathLength="1"` normaliza o comprimento, então o mesmo valor serve pra qualquer
   linha sem eu precisar medir cada uma. */
.an-linha { transition: stroke-width 300ms ease-out; }
.an-peca:hover .an-linha { stroke-width: 3; }
.an-no { transform-origin: center; transition: r 300ms cubic-bezier(.2,.7,.2,1); }
.an-peca:hover .an-no { r: 4.2; transition-delay: calc(var(--n) * 60ms); }

/* A rosca gira um oitavo de volta. Cada fatia gira em torno do MESMO centro, então
   elas continuam encaixadas — girar cada uma no próprio centro as espalharia. */
.an-fatia { transform-origin: 30px 30px; transition: transform 520ms cubic-bezier(.2,.7,.2,1); }
.an-peca:hover .an-fatia { transform: rotate(45deg); }

/* As perguntas: a barra lima cresce da esquerda quando a seção entra. */
.an-pergunta { transition: border-color 300ms ease-out, transform 300ms cubic-bezier(.2,.6,.2,1); }
.an-pergunta:hover { border-color: #C4F055; transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .an-peca, .an-peca:hover,
  .an-barra, .an-ponto, .an-pilula, .an-tira, .an-no, .an-fatia, .an-pergunta {
    transform: none !important; transition: none !important;
  }
  .an-peca:hover { background: #3a3529; }
}

/* ===========================================================================
   CELULAR — a passada completa
   ===========================================================================
   O painel é ferramenta de mesa, mas ESTA página é lida no telefone: é o link que
   chega por indicação, e a primeira vez é a que decide se existe uma segunda.

   O que muda, e por quê:
   - O título de 72px vira 36px. Um `clamp` com mínimo alto ainda estoura em 360px.
   - Os cartões de análise viram DOIS por fileira, não um. Um por fileira daria doze
     rolagens; dois cabem e continuam legíveis porque o desenho é pequeno.
   - Botão vira largura cheia. Botão de 200px centralizado numa tela de 360 é alvo
     pequeno cercado de nada.
   - `hover` não existe em toque: os efeitos acima simplesmente não disparam, e é
     por isso que nenhum deles carrega informação — só reforço.
   =========================================================================== */

@media (max-width: 620px) {
  .v-mega { font-size: clamp(32px, 9.4vw, 40px); line-height: 1.04; letter-spacing: -0.03em; }
  .v-h2 { font-size: clamp(24px, 6.8vw, 30px); }
  .v-h3 { font-size: 17px; }
  .v-lede, .v-corpo { font-size: 15.5px; }
  .v-secao { padding-block: 44px; }
  .v-cabeca { margin-bottom: 24px; gap: 11px; }

  /* Botão de largura cheia, e empilhado. */
  .v-topo .v-bt, #gratis .v-bt, .v-secao .v-bt { width: 100%; }
  .v-nav .v-bt { width: auto; }

  .an-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .an-peca { padding: 12px; gap: 10px; }
  .an-viz { height: 46px; }
  .an-viz svg { max-width: 100%; height: auto; }
  .an-nome { font-size: 13px; }
  .an-serve { font-size: 11.5px; line-height: 16px; }
  .an-perguntas { gap: 9px; }
  .an-pergunta { font-size: 16px; padding-left: 12px; }

  .v-gratis { padding: 22px; border-radius: 20px; box-shadow: 0 6px 0 0 var(--tinta); }
  .v-preco { font-size: 30px; }
  .v-passo { grid-template-columns: 34px 1fr; gap: 12px; padding-block: 18px; }
  .v-passo-cifra { font-size: 24px; }
  .v-cartao { padding: 18px; border-radius: 16px; }
}

/* Telas muito estreitas: a grade de análise cede e vira uma coluna. Dois cartões de
   150px com um gráfico dentro deixam de ser legíveis. */
@media (max-width: 380px) {
  .an-grade { grid-template-columns: 1fr; }
  .an-viz { height: 56px; }
}

/* A navegação em telas estreitas: os elos do meio já saem por JavaScript, e o que
   sobra é a marca e o botão. Sem `flex-wrap`, o botão empurra a marca pra fora. */
@media (max-width: 620px) {
  .v-nav-miolo { gap: 10px; min-height: 56px; }
  .v-nav .v-bt { padding-inline: 14px; font-size: 13.5px; min-height: 38px; }
  .v-nav .elo { font-size: 13.5px; }
}

/* ——— A VITRINE NO CELULAR ———
   Dois problemas achados medindo em 375px, e os dois eram invisíveis porque a
   página NÃO rola pra lado: o `overflow: hidden` da vitrine estava CORTANDO o
   conteúdo em vez de deixar estourar. Conteúdo cortado em silêncio é pior que
   conteúdo estourando — pelo menos o estouro se vê.

   1. A tela de Registros é uma grade de `1fr 210px`: a coluna da pauta ficava
      inteira fora do corte. Vira uma coluna só.
   2. A tela de Humor é `auto 1fr` com uma rosca de 140px: a legenda saía. Empilha.

   E a fileira de abas ganha uma dica de que continua: sem ela, ninguém descobre
   que existe "Rastreios" à direita. */
@media (max-width: 620px) {
  .vt-tela > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column;
    gap: 12px !important;
  }
  .vt-tela { padding: 14px 14px 18px; }
  .vt-cab { padding: 12px 14px; }

  /* A dica de rolagem: um degradê curto na borda direita das abas, que some quando
     a fileira chega ao fim. `mask` porque ele precisa apagar o conteúdo, não
     desenhar por cima — desenhar por cima exigiria saber a cor do fundo. */
  .vt-abas {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    padding-right: 22px;
  }

  /* A rosca do humor encolhe pra caber com a legenda embaixo. */
  .vt-tela svg[viewBox="0 0 140 140"] { width: 108px; height: 108px; }
  .vt-tela div[style*="width:140px"] { width: 108px !important; height: 108px !important; }
}

/* Dois cartões por fileira até 340px, e não até 380. Em 375 — que é o iPhone mais
   estreito ainda em uso — cada cartão fica com 166px, e o desenho de 118px cabe
   com folga. Uma coluna só ali daria doze rolagens pra ler uma seção. */
@media (max-width: 380px) and (min-width: 341px) {
  .an-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 340px) {
  .an-grade { grid-template-columns: 1fr; }
  .an-viz { height: 56px; }
}

/* ——— SAIR ———
   Mora no rodapé da lateral, ao lado do nome. Discreto porque não é ação de rotina,
   mas com alvo de 40px porque quando alguém procura, procura com pressa — costuma
   ser num computador que não é dele. */
.eu { position: relative; }
.sair {
  margin-left: auto; width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; border-radius: 10px;
  color: var(--sobre-escuro);
  transition: background 160ms ease-out, color 160ms ease-out;
}
.sair:hover { background: var(--escuro2); color: var(--papel); }

/* ——— A CHEGADA DA PÁGINA ———
   O painel são páginas separadas, e a troca mostrava o branco entre uma e outra.
   Uma aparição de 220ms cobre a costura: rápida o bastante pra não atrasar quem já
   sabe onde vai clicar, longa o bastante pra o corte não bater no olho.

   Só `opacity`: mover a página inteira na entrada faria cada navegação parecer um
   evento, e navegar dentro de uma ferramenta de trabalho não é evento. */
@media (prefers-reduced-motion: no-preference) {
  .venda, .tela { animation: chega 220ms ease-out both; }
  @keyframes chega { from { opacity: 0 } to { opacity: 1 } }
}

/* ——— A PÁGINA SÓ APARECE MONTADA ———
   A barra lateral, o cabeçalho e a lista são montados por JavaScript: no HTML eles
   são divs vazias. Sem isto, cada troca de página pintava o esqueleto e só depois se
   completava — dois quadros diferentes em sequência, que é exatamente a sensação de
   "carrega uma página e depois muda pra outra".

   `visibility` e não `display`: o navegador ainda calcula o leiaute, então quando a
   página aparece ela já está no lugar certo, sem um segundo rearranjo.

   A REDE DE SEGURANÇA É A PARTE QUE IMPORTA. `montando` é removida pelo script no
   fim — e se o script morrer no meio, a página ficaria invisível para sempre. Já
   aconteceu nesta base: uma crase num comentário derrubou o `ui.js` e levou duas
   seções junto. Por isso a animação `revela-de-qualquer-jeito` mostra a página em
   1,2s independentemente do JavaScript. Página feia é melhor que página em branco. */
body.montando { visibility: hidden; animation: revela-de-qualquer-jeito 0s linear 1.2s forwards; }
@keyframes revela-de-qualquer-jeito { to { visibility: visible } }

body.montado { visibility: visible; animation: entra-montado 180ms ease-out; }
@keyframes entra-montado { from { opacity: 0 } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  body.montado { animation: none; }
}


/* ===========================================================================
   04/10/2026 — PEÇAS DAS ABAS, DIÁLOGOS, CARREGANDO
   ===========================================================================
   As abas do paciente tinham larguras fixas (270px, 250px, 168px) escritas em cada
   elemento. Numa tela de notebook pequena a coluna da direita espremia o conteúdo
   até a leitura quebrar. Agora a coluna lateral é uma grade que desce para baixo do
   conteúdo quando não cabe. */

.sair-rotulo { display: none; }
.faixa-demo {
  background: var(--peri); border-bottom: 1.5px solid var(--peri-tinta);
  padding: 9px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: 13px; color: var(--peri-tinta);
}
.faixa-demo b { font-weight: 600; }

.com-lado { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: start; }
.com-lado > .lado { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1180px) { .com-lado { grid-template-columns: minmax(0, 1fr); } }
.pilha { display: flex; flex-direction: column; gap: 10px; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.grade-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 16px; margin-top: 12px; }
.grade-numeros > div { display: flex; flex-direction: column; gap: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border-radius: 100px; padding: 4px 10px; font-size: 12px; color: var(--tinta); }
.quebra { overflow-wrap: anywhere; white-space: pre-wrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.texto-13 { font-size: 13px; line-height: 19px; }
.texto-14 { font-size: 14px; line-height: 21px; }
.texto-15 { font-size: 15px; line-height: 23px; }
.suave { color: var(--tinta-suave); }
.fraco { color: var(--tinta-fraca); }
.fraco b { font-weight: 600; }
.sobre-escuro { color: var(--sobre-escuro); }
.num-15, .num-22, .num-26, .num-28 { font-family: var(--display); font-weight: 700; }
.num-15 { font-size: 15px; } .num-22 { font-size: 22px; } .num-26 { font-size: 26px; } .num-28 { font-size: 28px; }
.aviso-texto { font-size: 13px; line-height: 20px; color: var(--tinta-suave); }
.ponto-lima { width: 6px; height: 6px; border-radius: 100px; background: var(--lima); margin-top: 7px; flex-shrink: 0; }
.cabeca-cartao { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.separador { display: flex; align-items: center; gap: 10px; }
.separador > span:last-child { flex-grow: 1; height: 1px; background: var(--linha); }

.estado-vazio { text-align: center; padding: 36px 24px; }
.estado-vazio-titulo { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.estado-vazio-texto { font-size: 14px; line-height: 21px; color: var(--tinta-fraca); max-width: 520px; margin: 0 auto; }

.numero-linha { display: flex; align-items: baseline; gap: 8px; }
.numero-linha > span { flex-grow: 1; font-size: 13.5px; color: var(--sobre-escuro); }
.numero-linha > b { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--papel); }
.numero-linha.claro > span { color: var(--tinta-suave); overflow-wrap: anywhere; }
.numero-linha.claro > b { color: var(--tinta); font-size: 15px; }

/* registros */
.registro-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 10px; }
.citacao { color: var(--tinta-suave); border-left: 2px solid #C9CFF5; padding-left: 14px; margin-top: 10px; }

/* dia a dia */
.dia-linha { display: flex; gap: 18px; }
.dia-data {
  width: 74px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  border-right: 1px solid var(--linha); padding-right: 14px;
}
.dia-num { font-family: var(--display); font-weight: 700; font-size: 24px; }
.dia-humor { font-size: 17px; margin-top: 2px; }

/* humor */
.rosca-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 14px; }
.rosca { width: 132px; height: 132px; border-radius: 100px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.rosca-miolo { width: 84px; height: 84px; border-radius: 100px; background: var(--branco); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.rosca-num { font-family: var(--display); font-weight: 700; font-size: 24px; }
.legenda-linha { display: flex; align-items: center; gap: 9px; }
.semanas { display: flex; gap: 14px; margin-top: 12px; }
.semana { flex: 1 1 0; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.semana-barras { display: flex; align-items: flex-end; gap: 4px; height: 96px; }
.semana-barras > div { flex: 1 1 0; border-radius: 3px; }
.periodo { background: var(--papel); border: 1.5px solid var(--linha); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 7px; }

/* hábitos */
.foco-linha { display: grid; grid-template-columns: 26px minmax(140px, 220px) minmax(0, 1fr) 64px; gap: 12px; align-items: center; }
.foco-linha:not(:has(.foco-tira)) { grid-template-columns: 26px minmax(0, 1fr) 64px; }
.foco-emoji { font-size: 18px; }
.foco-tira { display: flex; gap: 3px; }
.foco-tira > div { flex: 1 1 0; height: 22px; border-radius: 3px; }
.foco-pct { text-align: right; font-family: var(--display); font-weight: 700; font-size: 16px; }
.foco-pct small { font-family: var(--corpo); font-weight: 400; font-size: 11px; color: var(--tinta-fraca); }
.legendas { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }
.legendas > span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tinta-suave); }
.legendas i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
@media (max-width: 760px) {
  .foco-linha { grid-template-columns: 26px minmax(0, 1fr) 64px; }
  .foco-tira { grid-column: 1 / -1; order: 1; }
}

/* tabelas */
.tabela-rola { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.tabela th { text-align: left; font-weight: 500; font-size: 12px; color: var(--tinta-fraca); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--linha); vertical-align: middle; white-space: nowrap; }
.tabela tr:last-child td { border-bottom: 0; }

/* retrato */
.retrato-corpo { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-top: 12px; }
.retrato-radar { flex: 1 1 380px; max-width: 440px; min-width: 250px; margin: 0 auto; }
.ponto-area { display: inline-block; width: 10px; height: 10px; border-radius: 100px; margin-right: 8px; vertical-align: middle; }
.campo-pequeno { height: 36px; padding: 0 10px; font-size: 14px; width: auto; }
details.recolhido summary, details.recolhido-simples summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details.recolhido-simples summary { color: var(--tinta-fraca); font-weight: 500; }

/* atividades */
.atividade { background: var(--branco); border: 1.5px solid var(--linha); border-radius: 14px; padding: 16px 18px; display: flex; gap: 16px; align-items: flex-start; }
.atividade.feita { background: var(--sage); border-color: var(--lima-tinta); }
.atividade-marca {
  width: 26px; height: 26px; border-radius: 100px; border: 1.5px solid var(--linha-forte); flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 13px;
}
.atividade.feita .atividade-marca { background: var(--lima); border-color: var(--tinta); }
.atividade-titulo { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.resposta { background: var(--papel); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }

/* topo da tela do paciente */
.topo-paciente { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.acoes-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.botao-pequeno { min-height: 40px; font-size: 14px; padding: 0 14px; }
.botao-texto {
  border: 0; background: none; cursor: pointer; font-family: var(--corpo); font-weight: 600; font-size: 13.5px;
  color: var(--tinta-fraca); padding: 10px 8px; border-radius: 8px; min-height: 40px;
}
.botao-texto:hover { background: var(--papel2); }
/* O vermelho do Broto só marca o que apaga ou encerra e não volta. */
.botao-texto.perigo { color: var(--perigo); }
.botao-perigo { background: var(--perigo); border-color: var(--perigo); color: var(--branco); }

/* lista de pacientes */
.cabeca-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.cabeca-pagina > div { flex-grow: 1; }
.linha-nome { width: 230px; min-width: 0; }
.linha-estado { width: 150px; text-align: right; font-size: 13px; }
.envelope { width: 38px; height: 38px; border-radius: 100px; background: var(--papel2); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.passo-num {
  width: 22px; height: 22px; border-radius: 100px; background: var(--papel2); display: flex; align-items: center;
  justify-content: center; font-family: var(--display); font-weight: 700; font-size: 11px; color: var(--tinta-suave); flex-shrink: 0;
}

/* carregando e erro */
.carregando { display: flex; align-items: center; gap: 12px; padding: 28px 4px; font-size: 14.5px; color: var(--tinta-fraca); }
.roda { width: 18px; height: 18px; border-radius: 100px; border: 2px solid var(--linha); border-top-color: var(--tinta); animation: gira 0.9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roda { animation: none; } }
.caixa-erro { max-width: 560px; }

/* diálogos */
.dialogo-fundo {
  position: fixed; inset: 0; background: rgba(26, 24, 19, 0.55); display: flex; align-items: center;
  justify-content: center; padding: 24px; z-index: 20;
}
.dialogo {
  width: min(620px, 100%); background: var(--papel); border-radius: 20px; padding: 28px;
  display: flex; flex-direction: column; gap: 18px; max-height: calc(100vh - 48px); overflow: auto;
}
.dialogo-largo { width: min(680px, 100%); }
.dialogo-texto { margin: 0; font-size: 15px; line-height: 23px; color: var(--tinta-suave); }
.dialogo-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.dialogo-botoes > .botao { flex: 1 1 160px; }
.duas-datas { display: flex; flex-wrap: wrap; gap: 14px; }
.duas-datas > .campo-grupo { flex: 1 1 220px; }
@media (max-width: 620px) {
  .dialogo { padding: 20px; border-radius: 16px; }
  .dialogo-fundo { padding: 12px; align-items: flex-end; }
}

/* foco visível — teclado precisa ver onde está */
.abas button:focus-visible, .botao:focus-visible, .botao-texto:focus-visible, .sair:focus-visible,
.linha-item:focus-visible, .menu a:focus-visible, summary:focus-visible {
  outline: 2.5px solid var(--lima-tinta); outline-offset: 2px;
}