/* ══════════════════════════════════════════════════════════════════════════
   FOLHA DE ESTILO DO SITE SOLONEXA — fonte única.
   05/09/2026: este CSS morava DENTRO de site/index.html. Saiu para cá quando
   nasceu a segunda página (site/paciente.html): duas páginas com a mesma cara
   e duas cópias do CSS seriam duas fontes de verdade, e a segunda começaria a
   envelhecer no dia seguinte. Trocar a paleta continua sendo trocar o bloco
   :root aqui, e mais nada.
   ⛔ Este arquivo é servido para o navegador. Nada que não seja para publicar.
   ══════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────────
   ⛔ REGRAS QUE NÃO SE MEXEM NESTA PÁGINA (memorando-juridico-solonexa.md):
      · SOLONEXA é UMA palavra. Nunca "SOLO NEXA", nunca SOLO destacado de
        NEXA por cor, peso ou espaço. O logotipo é SVG de traço único, e a
        palavra em texto herda uma cor só — não há classe para partir a
        palavra e não deve passar a haver.
      · Nada de ® e nada de "marca registrada": são pedidos DEPOSITADOS.
      · Nada de número de processo do INPI na página (decisão do Dr. André,
        21/08/2026 — a linha chegou a ir ao ar e foi removida a pedido).
      · Nada de prometer diagnóstico, laudo ou conduta — copy de produto
        médico que promete diagnóstico atrai regulação (ANVISA em aberto).
      · "profissional de saúde", nunca "médico": a classe 44 depositada
        cobre serviços de saúde, e a correção é do próprio Dr. André.
      · "Sofia" NÃO é nome de módulo. Sofia é a IA de dentro do Conecta, e
        está DESLIGADA desde 23/07/2026 — não aparece nesta página em
        contexto nenhum. A rotina que se repete (confirmação, transferência,
        acesso da recepção, envio programado) é função do CONECTA: as tabelas
        `sofia_*` são o namespace do Conecta, não de um módulo à parte.
        Correção do Dr. André em 21/08/2026 — o docs/MAPA-DO-PRODUTO.md ainda
        chama isso de "Sofia Operacional" e está desatualizado nesse ponto.
      · ⛔ O COPILOTO SAIU DESTA PÁGINA em 21/08/2026, a pedido do Dr. André.
        Ele existe e roda — é o "faço por você": o profissional pede como
        pediria a um assistente e ele executa DENTRO do sistema (pedido de
        exame, renovação de receita, relatório para convênio), com cartão de
        aprovação antes de gravar (DEC-084, DEC-029). O que falta é chegar ao
        cliente: hoje o raciocínio dele roda em 127.0.0.1:4600, um agente do
        Claude Code na máquina do Dr. André, e a clínica cliente recebe a
        janela, não o cérebro.
        Para repor o cartão: (1) o cérebro precisa estar servido para a
        clínica, e (2) a busca no INPI contra a família COPILOT da Microsoft
        (classes 9 e 42) precisa ter saído. As duas coisas, não uma.
        Ao repor, a grade volta para repeat(2,1fr) e a contagem volta para
        "Quatro módulos" nos dois lugares (o selo do hero e o h2).
   ───────────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
/* ── PALETA ────────────────────────────────────────────────────────────────
   Tudo o que tem cor nesta pagina sai daqui. Trocar a paleta = trocar este
   bloco inteiro, nada mais. As opcoes desenhadas estao em
   marca/paletas.html — e a que estiver aqui e a que vai ao ar.
   ⚠️ --line existia sendo usado em tres lugares e NUNCA foi declarado: a
      borda do selo e o fio da linha do tempo sumiam calados (declaracao com
      var() indefinida e invalida, e a borda vira "none"). Agora e apelido
      de --linha. Nao apagar. */
/* PALETA EM USO: Pérola funda — cinza frio com mais profundidade — a Pérola com sobretons.
   Trocar com: python3 marca/aplicar-paleta.py <slug>
   As outras estao em marca/gerar-paletas.py. */
:root{
  --line:var(--linha);
  --bg:#E9EDF3;
  --bg2:#F2F5F9;
  --caixa:#FFFFFF;
  --linha:#D3DBE5;
  --ink:#161C24;
  --dim:#48525F;
  --fraco:#5E6977;
  --accent:#4A6684;
  --accent-esc:#38536E;
  --sobre-accent:#FFFFFF;
  --topo:rgba(233,237,243,.88);
  --tint1:#DCE6F1;
  --tint2:#E4EAF2;
  --brilho:rgba(74,102,132,.10);
  --brilho2:rgba(74,102,132,.13);
  --trilho:#C2CCD9;
  --placeholder:#5E6977;
  --erro:#9C332E;
  --borda-hover:#B6C2D1;
  /* linha do painel: mais suave que a --linha das molduras, senão o painel
     vira cartão e a página inteira fica quadriculada. */
  --linha-suave:#DEE5EE;
}
html{scroll-behavior:smooth}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
.env{width:100%;max-width:1120px;margin-inline:auto;padding-inline:24px}

/* ── topo ───────────────────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);
  background:var(--topo);border-bottom:1px solid var(--linha);
}
.topo{display:flex;align-items:center;justify-content:space-between;gap:20px;height:66px}
.marca{color:var(--ink);flex:0 0 auto;display:flex;align-items:center;gap:11px}
.marca .nome{height:16px;width:auto;display:block}
/* O anel e imagem e nao curva: e um render com degrade em tres voltas, que SVG
   so reproduziria como aproximacao — e aproximacao do logo nao e o logo. Vem em
   62x64 e aparece a 27px, entao sobra pixel para tela Retina. */
.marca .anel{height:27px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:28px;font-size:.92rem;color:var(--dim)}
.menu a:hover{color:var(--ink)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--accent);color:var(--sobre-accent);font-weight:700;font-size:.94rem;
  border:0;border-radius:11px;padding:11px 20px;cursor:pointer;
  transition:background .16s ease;white-space:nowrap;
}
.btn:hover{background:var(--accent-esc)}
.btn-fant{background:transparent;color:var(--ink);border:1px solid var(--linha);font-weight:600}
.btn-fant:hover{background:var(--caixa);border-color:var(--borda-hover)}
@media(max-width:820px){.menu .lk{display:none}}

/* ── herói ──────────────────────────────────────────────────────────────── */
.heroi{
  padding:96px 0 0;
  background:
    radial-gradient(900px 520px at 50% -12%, var(--tint1) 0%, transparent 62%),
    radial-gradient(680px 480px at 92% 12%, var(--tint2) 0%, transparent 58%);
}
.heroi h1{
  font-size:clamp(2.1rem,5.2vw,3.5rem);font-weight:600;letter-spacing:-.02em;
  line-height:1.14;max-width:17ch;
}
.heroi h1 em{font-style:normal;color:var(--accent)}
.heroi .sub{
  margin-top:22px;font-size:clamp(1.02rem,2.1vw,1.2rem);color:var(--dim);
  max-width:52ch;line-height:1.65;
}
.acoes{display:flex;gap:13px;margin-top:34px;flex-wrap:wrap}
/* ── as três dores, no topo ──────────────────────────────────────────────────
   Substituiu a tira de rótulos de uma linha só. Cada item tem DUAS partes: o título é o que
   o médico quer, a frase abaixo é como acontece. Comprimir isso numa linha só foi o que
   deixou as frases herméticas — ver o comentário no HTML. */
.dores{list-style:none;margin-top:34px;display:flex;flex-direction:column;gap:22px;max-width:48ch}
.dores li{display:grid;grid-template-columns:auto 1fr;gap:12px}
/* a bolinha alinha com a primeira linha do título, não com o meio do bloco */
.dores .dot{margin-top:.5em}
.dores b{display:block;font-weight:600;font-size:.95rem;color:var(--dim);line-height:1.45}
.dores span{display:block;margin-top:5px;font-size:.88rem;color:var(--fraco);line-height:1.62}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}

/* moldura do print */
.moldura{
  margin-top:64px;border:1px solid var(--linha);border-radius:16px 16px 0 0;
  background:var(--caixa);overflow:hidden;box-shadow:0 -1px 60px var(--brilho);
}
.barra{
  display:flex;align-items:center;gap:8px;padding:11px 15px;
  border-bottom:1px solid var(--linha);background:var(--bg2);
}
.barra i{width:10px;height:10px;border-radius:50%;background:var(--trilho);display:block}
.barra .end{
  margin-left:12px;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--fraco);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.moldura img{width:100%;height:auto;display:block}
/* A .moldura do herói tem canto reto embaixo de propósito: ela sangra para fora da tela.
   Print DENTRO de uma seção precisa fechar nos quatro cantos, senão parece cortado. */
.moldura.solta{margin-top:40px;border-radius:16px}
/* o ponto clicável em cima do botão de tema do print. Nasce pelo JavaScript: sem script
   não existe botão nenhum, e ninguém clica no que não faz nada — a mesma regra dos chips. */
.tela-viva{position:relative}
.tela-viva .ponto{
  position:absolute;border:0;padding:0;background:transparent;cursor:pointer;
  border-radius:9px;-webkit-tap-highlight-color:transparent;
}
.tela-viva .ponto::after{
  content:'';position:absolute;inset:-4px;border-radius:12px;
  box-shadow:0 0 0 2px var(--accent);opacity:0;transition:opacity .15s;
}
.tela-viva .ponto:hover::after,.tela-viva .ponto:focus-visible::after{opacity:1}
.tela-viva .ponto:focus-visible{outline:none}
/* ⚠️ o alvo medido tem ~82×34px na tela cheia e encolhe junto com a imagem: no celular
   viraria um alvo de 22px, menor que a ponta do dedo. O mínimo de 44px é o piso da Apple
   e da WCAG, e como o botão é invisível ele pode transbordar sem sujar nada. */
@media(max-width:860px){.tela-viva .ponto{min-width:44px;min-height:44px}}
.legenda .dica{display:block;margin-top:6px;color:var(--fraco)}
.moldura.solta .legenda{border-top:1px solid var(--linha)}
.legenda{
  padding:14px 16px;font-size:.8rem;color:var(--fraco);text-align:center;
  border-top:1px solid var(--linha);
}
/* Sobraram quatro legendas na página — as que EXPLICAM alguma coisa. No celular elas ainda
   assim se metem entre uma tela e a próxima, então encolhem. */
@media(max-width:860px){.legenda{padding:10px 14px;font-size:.72rem;line-height:1.5}}

/* ── a ENTRADA: texto de um lado, tela do outro ─────────────────────────────
   ⛔ 23/08/2026 — o botão "Ver o que faz" SAIU. "Aquele botão perdido não faz sentido tá
      ali": ele mandava o visitante 400px abaixo, que é exatamente onde ele ia chegar
      rolando. Agora a coluna da direita faz o trabalho que era dele — mostrar.
      ⚠️ Depois desta saída o `.acoes` ficou SEM USO na página. Fica no arquivo porque a
      seção `#entrar` pode voltar a precisar de um par de botões.                        */
.h2col{display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:center;padding-bottom:26px}
@media(max-width:900px){.h2col{grid-template-columns:1fr;gap:0;padding-bottom:0}}
.h2col h1{max-width:14ch}
.h2col .sub{max-width:46ch}

/* A TELA GRANDE — a moldura escura que o profissional vira para o paciente. Sem marca
   de fabricante nenhuma: é borda arredondada, sombra e um pé, como o celular ao lado. */
/* ⚠️ O RESPIRO NÃO É ENFEITE: é onde o celular encosta. Sem ele o celular fica com
   `right`/`bottom` negativos e transborda a própria figura — que é exatamente o defeito
   que o `conferir-site.sh` mede (foi assim que o campo do "Entrar" vazou em 320px).
   ⚠️ E ele mora no `.conj`, não na figura inteira: preso à figura, o celular descia até
      DEPOIS da legenda e cobria a frase "a paciente destas imagens é fictícia" — que é
      justamente a frase que não pode faltar. */
.telao{position:relative}
.telao .conj{position:relative;padding:0 26px 34px 0}
.telao .vidro{
  border-radius:14px;overflow:hidden;background:#0d1420;border:10px solid #10192a;
  box-shadow:0 40px 80px -34px rgba(10,20,40,.55),0 0 0 1px rgba(255,255,255,.05) inset;
}
.telao .vidro img{width:100%;height:auto;display:block}
.telao .pe{width:118px;height:9px;margin:0 auto;border-radius:0 0 9px 9px;background:#10192a;opacity:.85}
.telao .base{width:190px;height:6px;margin:0 auto;border-radius:6px;background:var(--linha)}
.telao figcaption{padding-top:14px;text-align:center;font-size:.78rem;color:var(--fraco)}
/* o celular do PACIENTE encostado na quina: os dois lados da mesma consulta numa imagem só */
.telao .fone{
  position:absolute;right:0;bottom:0;width:126px;
  border-radius:20px;overflow:hidden;border:6px solid var(--ink);background:var(--ink);
  box-shadow:0 22px 46px -16px rgba(0,0,0,.5);
}
.telao .fone img{width:100%;height:auto;display:block;border-radius:15px}

/* ── SÓ NO CELULAR ──────────────────────────────────────────────────────────
   ⛔ AQUI MOROU, POR MEIA TARDE, UM PAINEL DE TELA CHEIA COM A FOTO DO QUESTIONÁRIO — e
      ele saiu por um motivo que vale mais do que o desenho: **era uma cópia morta de uma
      coisa viva**. Três telas abaixo, em `#tela-questionario`, roda o questionário DE
      VERDADE (`.qzd`), com as perguntas do produto, que responde ao toque. Uma FOTO dele
      enchendo a primeira tela do celular convida exatamente ao gesto que não funciona: o
      Dr. André tocou e voltou dizendo *"não clica, não rola"*. É a mesma regra que esta
      página já aplica aos chips da galeria — ninguém deve clicar no que não faz nada —,
      e eu a quebrei no lugar mais visível de todos.
   ⛔ E ainda trazia dois defeitos de desenho que o print do aparelho dele mostrou: a faixa
      preta de 67px (o `padding-top` que reservava o cabeçalho ficava à mostra assim que a
      rolagem saía do lugar exato) e a legenda pousada por cima dos botões.
   ⭐ O que ficou é o que o Dr. André já tinha chamado de bom: no celular o herói é o TEXTO,
      e logo abaixo a moldura larga com a agenda — uma imagem que é imagem, em fluxo normal,
      sem `svh`, sem `object-fit`, sem sobreposição. O momento "o questionário enche o
      celular" acontece UMA vez, lá embaixo, onde ele funciona. */
@media(max-width:900px){
  /* A composição TV + telefone encolhida a 390px vira textura ilegível; a moldura da
     agenda logo abaixo continua legível e faz o papel sozinha. */
  .telao{display:none}
}

/* ── seções ─────────────────────────────────────────────────────────────── */
section{padding:96px 0}
/* O cabecalho e sticky e tem 67px. Sem isto TODA secao alcancada pelo menu pousa
   por baixo dele — nao so a nova. Passava despercebido porque as outras comecam
   com um rotulo pequeno e o que ficava escondido era espaco em branco; com um
   logotipo de 74px no topo da secao "Quem faz" o defeito ficou visivel.
   79 = 67 do cabecalho + 12 de folga. */
section[id]{scroll-margin-top:79px}
.rotulo{
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:16px;
}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:600;letter-spacing:-.015em;line-height:1.2;max-width:20ch}
.lead{margin-top:18px;color:var(--dim);max-width:58ch;font-size:1.03rem}

/* ⚠️ SEM USO NA PÁGINA desde 22/08/2026: os três cartões de módulo viraram um bloco por
   módulo (`.modulo`, mais abaixo). Fica aqui porque é o desenho de cartão da casa e a
   página pode voltar a precisar dele — mas NÃO procure `.cartao` no corpo, não existe.
   TRES cartoes -> tres colunas. Era 2x2 quando o Copiloto estava na pagina;
   se ele voltar, voltar para repeat(2,1fr), senao o quarto fica orfao. */
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
@media(max-width:980px){.grade{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grade{grid-template-columns:1fr}}
.cartao{
  border:1px solid var(--linha);border-radius:15px;padding:30px 26px;background:var(--caixa);
  display:flex;flex-direction:column;
}
.cartao h3{font-size:1.14rem;font-weight:650;letter-spacing:.005em;margin-bottom:5px}
.cartao .papel{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:15px;font-weight:600}
.cartao p{color:var(--dim);font-size:.95rem}
.cartao ul{list-style:none;margin-top:17px;display:flex;flex-wrap:wrap;gap:7px}
.cartao li{
  font-size:.78rem;color:var(--dim);border:1px solid var(--linha);
  border-radius:7px;padding:4px 10px;background:var(--bg2);
}
.num{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--linha);background:var(--bg2);
  display:grid;place-items:center;font:600 .82rem ui-monospace,monospace;color:var(--accent);margin-bottom:20px;
}
/* SEM USO no momento — o cartao que usava isto (Copiloto) saiu da pagina em
   21/08/2026. Fica aqui de proposito: e o selo "Em implantacao" pronto para
   quando um modulo voltar a existir na pagina antes de chegar ao cliente.
   Nao apagar sem ler a regra do COPILOTO no bloco do topo. */
.cabeca{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.selo{
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--accent);border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;background:var(--brilho);white-space:nowrap;margin-top:4px;
}

/* ── um bloco por módulo ────────────────────────────────────────────────────
   Antes daqui os três módulos eram TRÊS CARTÕES DE TEXTO lado a lado, e o Dr. André
   apontou o que estava errado: quem vende software de clínica compra pela TELA. Cartão
   com lista de palavras descreve; print mostra. Agora cada módulo tem bloco próprio —
   texto de um lado, tela do outro — e os cartões saíram.
   A lista de recursos continua existindo, mas embaixo do texto e menor: ela confirma o
   que a tela já mostrou, em vez de substituir a tela.                                 */
/* ── painel: o texto para de flutuar ────────────────────────────────────────
   Pedido do Dr. André em 22/08: "os textos estão meio que soltos na página… dentro de
   caixa com fundo um pouco mais claro, discretamente sofisticado". O tom é o `--bg2`,
   que a página JÁ usa — uma casa acima do fundo, não branco: branco aqui competiria com
   as molduras dos prints, que são o que a página veio mostrar.
   ⚠️ CHIP DENTRO DE PAINEL TROCA DE FUNDO. `.mlista li` nasce com `--bg2`, o MESMO tom do
      painel: dentro dele o chip sumiria por completo. A regra de dentro pinta de branco.
      Sem ela, "consertar o texto solto" apagaria os botões que abrem as telas. */
.painel{
  background:var(--bg2);
  border:1px solid var(--linha-suave);
  border-radius:20px;
  padding:32px 34px;
  box-shadow:0 1px 1px rgba(22,28,36,.02), 0 12px 32px -22px rgba(22,28,36,.30);
}
@media(max-width:860px){.painel{padding:24px 20px;border-radius:16px}}
.painel .mlista li{background:var(--caixa)}
.painel .mlista li.tem button{background:var(--caixa)}
.painel .mlista li.tem button:hover,
.painel .mlista li.tem button[aria-selected="true"]{background:var(--accent)}
/* O painel do topo de uma seção já traz o respiro por dentro: o `.lead` não precisa do
   dele, senão sobra um vão embaixo do texto. */
.painel.intro>:last-child{margin-bottom:0}
.modulo{margin-top:72px}
.modulo + .modulo{margin-top:96px}
.mcab{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:end}
/* o cabeçalho do módulo é painel: título, texto e chips numa superfície só */
/* ⚠️ `start` e não `center`. Centralizar servia quando as duas colunas tinham alturas
   parecidas; com os chips fora, a coluna da direita ficou nitidamente mais alta e o
   `center` abria um vão morto embaixo do texto da esquerda — bem no meio do cabeçalho.
   Alinhadas pelo topo, as duas começam na mesma linha e a sobra vai toda para o fim. */
.mcab.painel{align-items:start}
/* Com o cabeçalho dentro de painel, os 64px que separavam texto e tela viram um
   buraco: são duas superfícies, e não mais texto solto encostando numa moldura.
   `~` e não `+` porque as telas da galeria são irmãs e a visível varia. */
.mcab.painel ~ .moldura{margin-top:14px}
/* ⚠️ MENOS RESPIRO EMBAIXO DO CABEÇALHO, e é medida, não gosto. Na tela do MacBook Air
   (1440×780 de viewport) a distância do topo dos chips até o fim do print dava 739px para
   701px úteis abaixo do cabeçalho fixo: faltavam 38px para o Dr. André ver a fileira e a
   tela inteira de uma vez. Aqui e no `margin-top` acima saem 22 desses 38; o resto é
   altura do próprio print e não se aperta sem cortar a imagem. */
.mcab.painel{padding-bottom:22px}
@media(max-width:860px){.mcab{grid-template-columns:1fr;gap:22px}}
.mcab h3{font-size:clamp(1.35rem,2.6vw,1.8rem);font-weight:600;letter-spacing:-.015em;line-height:1.2}
.mcab .lead{margin-top:14px}
.mlista{list-style:none;display:flex;flex-wrap:wrap;gap:7px;align-content:flex-end}
/* ⭐ 23/08 — OS CHIPS SAÍRAM DE DENTRO DA COLUNA DE TEXTO E VIRARAM UMA FILEIRA SÓ, colada
   na tela que eles abrem. No MacBook Air do Dr. André eles ficavam empilhados no meio do
   texto, longe do print: *"pra clicar nos chips você precisa rolar a tela pra baixo ou pra
   cima e não dá pra ver a tela completa"*. Chip que TROCA UMA IMAGEM tem de estar à vista
   da imagem — clicar fora do campo onde o efeito acontece não parece resposta, parece nada.
   De quebra o cabeçalho encolheu: a coluna da direita era a alta das duas justamente por
   carregar os chips, e a altura de um grid é a da coluna mais alta.
   ⚠️ `grid-column:1/-1` NÃO É ENFEITE. `.mcab` é grid de duas colunas e conta filhos
      DIRETOS: sem isso a fileira cairia na coluna da esquerda, com metade da largura —
      o mesmo tropeço que o comentário do `<p class="tambem">` já registra no HTML. */
.mcab > .mlista{grid-column:1/-1; margin-top:2px; padding-top:15px; border-top:1px solid var(--linha)}
/* A `.faixa` também é grid de duas colunas (texto | linha do tempo) e a fileira é a terceira
   filha: sem `1/-1` ela cairia debaixo do texto, com metade da largura. */
.faixa > .mlista{grid-column:1/-1; margin-top:6px; padding-top:16px; border-top:1px solid var(--linha)}
/* ⚠️ UMA LINHA SÓ, e sem quebrar. Atlas tem 7 chips e Conecta 5; medidos, os dois conjuntos
   cabem folgados na largura cheia. O `overflow-x:auto` é rede de segurança para quando um
   rótulo novo entrar: a fileira rola dentro de si em vez de virar duas linhas caladas — e
   rolar dentro de si não empurra a página, que é o que o conferidor mede. */
/* ⭐ 23/08, SEGUNDA VOLTA — A FILEIRA VIRA UMA LINHA SÓ TAMBÉM NO CELULAR. Ela estava
   com `flex-wrap:wrap` abaixo de 861px e os 7 chips do Atlas empilhavam em QUATRO linhas
   de 126px — o triplo da altura do print que eles trocam. Medido: chip no topo, tela lá
   embaixo, *"o chip estão bem longe, dá nem pra ver o que o chip está mudando"*. Numa
   linha só a fileira ocupa 33px e a tela sobe junto.
   ⚠️ Sem `wrap` a fileira PRECISA rolar dentro de si — `overflow-x:auto` não é enfeite. É
      ele que impede a linha de empurrar a página para o lado, que é o que o conferidor
      mede a 390 e a 320px. */
.mcab > .mlista,
.faixa > .mlista{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity}
.mcab > .mlista::-webkit-scrollbar,
.faixa > .mlista::-webkit-scrollbar{display:none}
.mcab > .mlista > li,
.faixa > .mlista > li{flex:none; scroll-snap-align:start}
/* A borda esfumada na direita é a única pista de que a fileira desliza — no celular não há
   barra de rolagem para contar isso. Some quando a fileira cabe inteira (`--fim:0`, posto
   pelo script) para não sugerir conteúdo que não existe. */
@media(max-width:860px){
  .mcab > .mlista,
  .faixa > .mlista{
    --fim:1;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),rgba(0,0,0,calc(1 - var(--fim))));
            mask-image:linear-gradient(to right,#000 calc(100% - 28px),rgba(0,0,0,calc(1 - var(--fim))));
  }
}
.mlista li{
  font-size:.78rem;color:var(--dim);border:1px solid var(--linha);
  border-radius:7px;padding:4px 10px;background:var(--bg2);
}
/* ── chip que abre a tela ────────────────────────────────────────────────────
   Só ganha esta aparência o chip que tem PRINT DE VERDADE por trás, e quem decide
   isso é o script no fim da página: o HTML nasce com todos os chips iguais, como
   texto. Assim, com o JavaScript desligado — ou quebrado — ninguém vê um botão que
   não faz nada, e nenhum chip promete uma tela que o produto não mostraria.
   ⚠️ Hoje são 8 prints para 24 chips. O que falta não é código: é dado na bancada
      limpa (o Caixa dela diz "Nenhum caixa aberto" e o Estoque, "0 com saldo").
      Print de tela vazia numa página de venda é pior do que chip sem clique. */
.mlista li.tem{
  padding:0;border-color:transparent;background:transparent;
}
.mlista li.tem button{
  font:inherit;font-size:.78rem;color:var(--accent-esc);cursor:pointer;
  border:1px solid var(--accent);border-radius:7px;padding:4px 10px;
  background:var(--bg2);display:inline-flex;align-items:center;gap:6px;
  transition:background .15s,color .15s;
}
.mlista li.tem button::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);
  opacity:.55;
}
.mlista li.tem button:hover{background:var(--accent);color:var(--sobre-accent)}
.mlista li.tem button:hover::before{background:var(--sobre-accent);opacity:.8}
.mlista li.tem button[aria-selected="true"]{background:var(--accent);color:var(--sobre-accent);cursor:default}
.mlista li.tem button[aria-selected="true"]::before{background:var(--sobre-accent);opacity:.85}
.mlista li.tem button:focus-visible{outline:2px solid var(--accent-esc);outline-offset:2px}
/* ── o que o módulo faz e NÃO vira tela ──────────────────────────────────────────
   O Dr. André escreveu em 23/08: "tem botões ainda que não estão funcionando". Ele não
   estava vendo um bug — estava vendo chips de texto ao lado de chips clicáveis, todos com
   a mesma moldura arredondada. A diferença era só a COR da borda, e num varal de treze
   pílulas iguais isso não se lê: o olho conta pílulas, não tons.
   Agora a fileira de chips tem SÓ o que abre tela. O que o módulo faz por dentro — e que
   não é tela, é comportamento (mídia, etiqueta, transferência) — desceu para esta frase.
   A informação não se perdeu: ela deixou de fingir que é botão.
   ⚠️ E ficou a rede embaixo: `li:not(.tem)` perde a moldura. Se um dia um print sumir e o
      script deixar de promover um chip, ele vira TEXTO — não volta a ser botão morto. */
/* Uma figura em pé no meio de oito deitadas. Sem o teto de largura ela renderiza com o dobro
   da altura da seção — e um print gigante não impressiona, atrapalha. */
.moldura.estreita{max-width:620px;margin-left:auto;margin-right:auto}
/* ⛔ 23/08 — A TELA DO MÓDULO NÃO SANGRA DE PONTA A PONTA NO CELULAR, e a tentativa fica
      registrada porque o ganho parecia óbvio. Dentro da margem do texto o print tem 340px;
      ponta a ponta teria 390 — 15% a mais num print de 2880px reduzido 8,5 vezes, ou seja,
      ilegível dos dois jeitos. O preço era alto: `width:100vw` faz a figura passar da
      largura do `<article>` que a contém, e o conferidor mede exatamente isso ("filho
      vazando para fora do pai"). Essa medida existe porque `body{overflow-x:hidden}` come
      a rolagem horizontal e esconde o defeito — foi assim que o campo de "Entrar" saiu do
      cartão branco no celular do Dr. André com o conferidor verde. Deixar a régua acesa de
      propósito para ganhar 50px é trocar um alarme que funciona por meio centímetro. */
.tambem{
  margin:10px 0 0;font-size:.78rem;color:var(--dim);line-height:1.6;max-width:62ch;
}
.mlista li:not(.tem){
  border-color:transparent;background:transparent;padding-left:0;padding-right:10px;
}
/* O chip da Evolução leva a figura que já está na página, em vez de trocar moldura:
   aquela seção é uma narrativa com títulos ("Antes da consulta", "Na consulta") e
   virar aba apagaria a ordem da história. O anel abaixo é o que diz "é esta aqui" —
   sem ele, a página rola e o leitor não sabe o que foi que ele abriu. */
@keyframes apontar{0%{box-shadow:0 0 0 0 var(--accent)}100%{box-shadow:0 0 0 7px transparent}}
.apontada{animation:apontar 1.4s ease-out 1;border-radius:16px}
@media(prefers-reduced-motion:reduce){.apontada{animation:none;outline:2px solid var(--accent);outline-offset:3px}}
/* ── o celular ──────────────────────────────────────────────────────────────
   O print do questionário é a tela do PACIENTE, e paciente responde no celular. Numa
   moldura de navegador ele pareceria um site estreito; dentro de um aparelho o leitor
   entende sozinho onde aquilo acontece. A "bezel" é só borda arredondada e sombra —
   nada de desenho de aparelho de marca nenhuma.
   ⚠️ `max-width` em px, não %: a imagem tem 390px de CSS de largura real. Deixar ela
      esticar num monitor grande borraria o print — que é justamente o que
      publicar-prints.sh evita ao guardar tudo em 2x.                                   */
.aparelho{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:36px 0;
}
.aparelho .tela{
  width:100%;max-width:274px;border-radius:32px;overflow:hidden;
  border:9px solid var(--ink);background:var(--ink);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.42);
}
.aparelho img{width:100%;height:auto;display:block;border-radius:24px}
.aparelho .legenda{border:0;padding:16px 8px 0;max-width:34ch}
/* Texto + celular lado a lado. O celular fica no lado direito no desktop e EMBAIXO no
   telefone — em cima, ele empurraria o texto para fora da primeira tela. */
.compar{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;margin-top:44px}
@media(max-width:860px){.compar{grid-template-columns:1fr;gap:8px}}

/* faixa da evolução */
.faixa{
  border:1px solid var(--linha);border-radius:18px;background:
    radial-gradient(620px 320px at 12% 0%, var(--brilho2) 0%, transparent 62%), var(--caixa);
  padding:52px 44px;display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center;
}
@media(max-width:860px){.faixa{grid-template-columns:1fr;padding:38px 26px;gap:32px}}
.faixa h2{max-width:16ch}
/* Linha do tempo ILUSTRATIVA: mostra o QUE fica registrado, nunca um numero
   de resultado. Grafico de porcentagem aqui viraria promessa de eficacia. */
.linhat{position:relative;padding-left:26px}
.linhat::before{
  content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--line),transparent);
}
.mes{position:relative;padding:11px 0}
.mes::before{
  content:"";position:absolute;left:-25px;top:17px;width:8px;height:8px;border-radius:50%;
  background:var(--accent-esc);box-shadow:0 0 0 3px var(--bg);
}
.mes:last-child::before{background:var(--accent)}
.mes .rot{
  display:block;font:11px ui-monospace,monospace;letter-spacing:.06em;
  color:var(--fraco);text-transform:uppercase;
}
.mes .fato{display:block;margin-top:4px;font-size:.95rem;line-height:1.5;color:var(--ink)}
.mes .quem{display:block;margin-top:3px;font-size:.8rem;color:var(--dim)}
.notinha{margin-top:22px;font-size:.79rem;color:var(--fraco);line-height:1.6}

/* segurança */
.linhas{margin-top:46px;display:flex;flex-direction:column;gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:14px;overflow:hidden}
.linha{background:var(--caixa);padding:24px 26px;display:grid;grid-template-columns:210px 1fr;gap:26px}
@media(max-width:700px){.linha{grid-template-columns:1fr;gap:7px}}
.linha b{font-weight:600;font-size:.97rem}
.linha p{color:var(--dim);font-size:.93rem}

/* entrar */
.entrar{
  border:1px solid var(--linha);border-radius:18px;background:var(--caixa);
  padding:46px 40px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;
}
@media(max-width:820px){.entrar{grid-template-columns:1fr;padding:34px 26px;gap:30px}}
.entrar h2{max-width:14ch;font-size:clamp(1.4rem,3vw,1.9rem)}
/* ⚠️ Filho de grid nasce com min-width:auto: ele se recusa a ficar menor que o
   conteúdo. O miolo do formulário (campo + sufixo ".solonexa.com") tem mínimo de
   324px — num celular de 320px o cartão branco para em 272px e o campo e o botão
   continuam desenhando 79px PARA FORA dele. Não gerava rolagem horizontal porque o
   body tem overflow-x:hidden, e era só isso que o conferidor media: por isso passava
   verde e o defeito só aparecia no aparelho de verdade. */
.entrar>*{min-width:0}
form{display:flex;flex-direction:column;gap:11px}
label{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fraco);font-weight:600}
.campo{display:flex;align-items:center;border:1px solid var(--linha);border-radius:11px;background:var(--bg2);overflow:hidden}
.campo input{
  flex:1;min-width:0;width:0;background:transparent;border:0;outline:0;color:var(--ink);
  font-size:1rem;padding:14px 15px;font-family:inherit;
}
.campo input::placeholder{color:var(--placeholder)}
.campo .suf{padding:0 15px 0 0;color:var(--fraco);font:13px ui-monospace,monospace;white-space:nowrap}
/* Abaixo de 360px (iPhone SE de 1ª geração) o campo cabe no cartão mas o texto de
   exemplo "minhaclinica" era cortado no meio. Aperta o respiro em vez de encurtar o
   exemplo: é ele que ensina o que se digita ali. */
@media(max-width:360px){
  .campo input{padding:14px 11px;font-size:.95rem}
  .campo .suf{padding-right:11px;font-size:12px}
}
.aviso{font-size:.8rem;color:var(--fraco);min-height:1.2em}
.aviso.erro{color:var(--erro)}

/* rodapé */
footer{border-top:1px solid var(--linha);padding:46px 0 54px;margin-top:34px}
.pe{display:flex;justify-content:space-between;align-items:flex-start;gap:34px;flex-wrap:wrap}
.pe .marca{gap:9px}
.pe .marca .nome{height:13px;opacity:.85}
.pe .marca .anel{height:22px}
.pe p{color:var(--fraco);font-size:.82rem;margin-top:14px;max-width:40ch;line-height:1.7}
.pe nav{display:flex;flex-direction:column;gap:10px;font-size:.86rem;color:var(--dim)}
.pe nav a:hover{color:var(--ink)}

/* ── FALE COM A GENTE (24/08) ───────────────────────────────────────────────
   Pedido do Dr. André: "aquele botãozinho de WhatsApp no site, e também um
   e-mail para a pessoa disparar e obter informações". São dois caminhos para
   a MESMA pergunta ("quero saber mais"), e por isso moram juntos: o botão
   flutuante é o atalho, este bloco é o que a pessoa acha quando procura.
   ⚠️ `.entrar` é um grid de 2 COLUNAS que conta filhos DIRETOS: sem o
      `grid-column:1/-1` este bloco viraria a primeira célula da linha de baixo
      (metade da largura). Mesma armadilha das fileiras de chips (.mcab/.faixa).
   ⚠️ Ele é o 3º filho, DEPOIS do formulário, e não um pedaço da coluna de
      texto: no celular o grid vira uma coluna só, e ali dentro da esquerda o
      "fale com a gente" aparecia ANTES do campo de entrar — atravessando a
      pessoa que só queria entrar na clínica dela. */
.fale{grid-column:1/-1;margin-top:-18px;padding-top:26px;border-top:1px solid var(--linha)}
.fale b{display:block;font-size:.9rem;font-weight:600;color:var(--dim);margin-bottom:13px}
.fale-links{display:flex;flex-wrap:wrap;gap:10px}
.fale-links a{display:inline-flex;align-items:center;gap:9px;font-size:.87rem;color:var(--dim);
  border:1px solid var(--linha);border-radius:999px;padding:9px 15px;background:var(--bg2);
  transition:border-color .15s,color .15s}
.fale-links a:hover{border-color:var(--borda-hover);color:var(--ink)}
.fale-links svg{width:16px;height:16px;flex:none}

/* O botãozinho flutuante. `env(safe-area-inset-*)` por causa da barra de gestos
   do iPhone: sem isso ele encosta na barrinha de baixo e fica difícil de tocar. */
.zap{
  position:fixed;z-index:60;
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:#25D366;color:#fff;
  box-shadow:0 6px 20px rgba(22,28,36,.24);
  transition:transform .15s,background .15s;
}
.zap:hover{background:#1DB954;transform:translateY(-2px)}
.zap svg{width:30px;height:30px}
@media(max-width:520px){.zap{width:50px;height:50px}.zap svg{width:28px;height:28px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* ── Quem faz ─────────────────────────────────────────────────────────────── */
.origem{text-align:center}
.trava-emp{display:inline-flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:34px}
.trava-emp img{height:74px;width:auto;display:block}
.trava-emp svg{height:21px;width:auto;display:block;color:var(--ink)}
.origem h2{max-width:none;margin-inline:auto}
.origem .lead{margin-inline:auto}
.conta{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--linha);border:1px solid var(--linha);border-radius:14px;overflow:hidden;text-align:left}
.conta > div{background:var(--caixa);padding:28px 26px}
.conta b{display:block;font-weight:600;font-size:.97rem;margin-bottom:10px}
.conta p{color:var(--dim);font-size:.93rem}
.conta p + p{margin-top:11px}
@media(max-width:820px){.conta{grid-template-columns:1fr}}
/* ── QUESTIONÁRIO VIVO (23/08) ──────────────────────────────────────────────
   Dentro da moldura do celular, em vez de um print, roda o questionário DE
   VERDADE: as perguntas, as cores e o comportamento são os do produto. É a
   mesma regra dos chips levada ao extremo — "ninguém clica no que não faz
   nada", então aqui o que parece questionário É questionário.
   ⚠️ O <img> continua no HTML e o script só o TROCA se conseguir montar a
      demonstração. Script que falha deixa o print no lugar; nunca uma moldura
      vazia, que numa página de venda é pior do que print nenhum.
   ⚠️ As perguntas NÃO foram redigitadas: saíram de `app/js/blocos.js` do
      Evolução por script. Redigitar seria criar uma segunda fonte de verdade —
      o site prometeria uma pergunta que o produto não faz mais.
   As cores aqui são as do tema ESCURO do produto (plataforma.css), coladas de
   propósito: o celular tem a cara do aplicativo, não a do site. */
.qzd{
  --qz-bg:#111826; --qz-s1:#1B2434; --qz-s2:#222E42; --qz-bd:#2B3648;
  --qz-tx:#E8EDF4; --qz-tx2:#94A3B8;
  --qz-ac:#2DD4BF; --qz-am:#FBBF24; --qz-er:#F87171;
  aspect-ratio:780/1688; width:100%; border-radius:24px; overflow:hidden;
  background:var(--qz-bg); color:var(--qz-tx);
  display:flex; flex-direction:column;
  font-family:'Inter',system-ui,sans-serif; font-size:13px; line-height:1.45;
  text-align:left;
}
.qzd *{box-sizing:border-box}
.qzd-topo{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:12px 14px 10px; border-bottom:1px solid var(--qz-bd);
  background:var(--qz-s1);
}
.qzd-cl{font-size:11px; letter-spacing:.12em; color:var(--qz-ac); font-weight:600}
.qzd-pg{font-size:11px; color:var(--qz-tx2); font-variant-numeric:tabular-nums; flex:none}
.qzd-trilho{flex:none; height:2px; background:var(--qz-s2)}
.qzd-trilho i{display:block; height:100%; background:var(--qz-ac); transition:width .3s}
.qzd-corpo{flex:1; overflow-y:auto; padding:14px; -webkit-overflow-scrolling:touch}
.qzd-selo{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:12px;
  padding:5px 10px; border-radius:999px; background:var(--qz-s2);
  font-size:11px; font-weight:600; color:var(--qz-tx);
}
.qzd-fonte{font-size:10px; color:var(--qz-tx2); margin:-6px 0 12px}
.qzd-leg{background:var(--qz-s1); border:1px solid var(--qz-bd); border-radius:10px;
  padding:9px 10px; margin-bottom:12px}
.qzd-leg b{display:block; font-size:10.5px; color:var(--qz-tx2); font-weight:500; margin-bottom:5px}
.qzd-leg div{display:flex; gap:7px; font-size:10.5px; color:var(--qz-tx2); margin-top:2px}
/* ⚠️ A largura fixa é SÓ do número. Escrito como `div span` ela pegava os dois spans e
   espremia o rótulo em 13px — "Em nenhum momento" saía uma palavra por linha e a legenda
   engolia a tela inteira. Aqui a caixa tem 256px de largura; num monitor largo o erro
   quase não aparece, e foi por isso que ele passou. */
.qzd-leg div span.qzd-leg-n{flex:none; width:13px; font-weight:700; color:var(--qz-tx)}
.qzd-item{
  background:var(--qz-s1); border:1.5px solid var(--qz-bd); border-radius:11px;
  padding:11px 11px 9px; margin-bottom:8px; transition:border-color .18s, background .18s;
}
.qzd-item.n1,.qzd-item.n2{border-color:var(--qz-am)}
.qzd-item.n3,.qzd-item.n4{border-color:var(--qz-er); background:rgba(248,113,113,.05)}
.qzd-item.marc{border-color:var(--qz-ac)}
.qzd-nome{font-size:12.5px; font-weight:500; margin-bottom:9px}
.qzd-btns{display:flex; gap:5px}
.qzd-btns.col{flex-wrap:wrap}
.qzd-b{
  flex:1 1 0; min-width:0; min-height:34px; padding:6px 3px; cursor:pointer;
  border:1.5px solid var(--qz-bd); border-radius:8px; background:var(--qz-s2);
  color:var(--qz-tx2); font:700 12.5px 'Inter',sans-serif; text-align:center;
  transition:all .18s;
}
.qzd-btns.col .qzd-b{flex:1 1 44%; font-weight:500; font-size:11.5px}
.qzd-b{min-height:36px}
.qzd-b:hover{border-color:var(--qz-ac); color:var(--qz-tx)}
.qzd-b.sel{border-color:var(--qz-ac); background:rgba(45,212,191,.14); color:var(--qz-ac)}
.qzd-b.sel.n1,.qzd-b.sel.n2{border-color:var(--qz-am); background:rgba(251,191,36,.14); color:var(--qz-am)}
.qzd-b.sel.n3,.qzd-b.sel.n4{border-color:var(--qz-er); background:rgba(248,113,113,.14); color:var(--qz-er)}
.qzd-txt{
  width:100%; min-height:34px; padding:7px 10px; border-radius:8px;
  border:1.5px solid var(--qz-bd); background:var(--qz-s2); color:var(--qz-tx);
  font:400 12.5px 'Inter',sans-serif;
}
.qzd-txt::placeholder{color:var(--qz-tx2)}
.qzd-txt:focus{outline:none; border-color:var(--qz-ac)}
.qzd-pulou{
  border:1px dashed var(--qz-bd); border-radius:11px; padding:14px 12px;
  font-size:11.5px; color:var(--qz-tx2); text-align:center;
}
.qzd-pe{
  flex:none; display:flex; gap:8px; padding:11px 14px;
  border-top:1px solid var(--qz-bd); background:var(--qz-s1);
}
.qzd-pe button{
  min-height:36px; padding:8px 14px; border-radius:9px; cursor:pointer;
  font:600 12.5px 'Inter',sans-serif; border:1.5px solid var(--qz-bd);
  background:transparent; color:var(--qz-tx2); transition:all .18s;
}
.qzd-pe button:disabled{opacity:.35; cursor:default}
.qzd-pe .qzd-ir{flex:1; border-color:var(--qz-ac); background:var(--qz-ac); color:#08211E}
.qzd-fim{padding:6px 2px}
.qzd-fim h4{font-size:15px; font-weight:600; margin-bottom:10px; line-height:1.3}
.qzd-fim p{font-size:12px; color:var(--qz-tx2); margin-bottom:12px}
.qzd-fim ul{list-style:none; display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.qzd-fim li{
  display:flex; gap:8px; align-items:flex-start; font-size:11.5px;
  background:var(--qz-s1); border:1px solid var(--qz-bd); border-radius:9px; padding:8px 10px;
}
.qzd-fim li b{color:var(--qz-ac); flex:none; font-variant-numeric:tabular-nums}
/* No telefone o aparelho de mentira vira o aparelho de verdade: quem visita o site pelo
   celular toca nestes botões com o dedo, e a 274px eles ficam com 30px de largura — abaixo
   do mínimo de toque. Só aqui, e só na tela estreita, a moldura usa a largura que tem.
   ⛔ Escopado em #tela-questionario de propósito: `.aparelho .tela` também segura os PRINTS
   das outras seções, e alargar aquilo esticaria imagem de 390px de largura real. */
@media (max-width:600px){
  #tela-questionario .aparelho .tela{max-width:340px}
}
/* A demonstração é interativa; quem pediu menos movimento não perde nada, só a transição. */
@media (prefers-reduced-motion:reduce){
  .qzd *{transition:none !important}
}