/* =====================================================================
   BuildBot, buildbot.com.br. Sistema visual do site (sem framework, sem build).

   COMO MONTAR UMA PÁGINA INTERNA (nichos, legais)
   Copie o <head>, o cabeçalho e o rodapé de privacidade.html. Mude só:
   title, meta description, canonical, og:url, og:title, og:description,
   og:image e o link de WhatsApp do cabeçalho (mensagem própria da página).
   Todos os caminhos começam com "/" (o 404 é servido em qualquer endereço).
   Mantenha no <head> o script de 1 linha que põe a classe "js" no <html> e o site.js com defer.
   O botão fixo do celular (.fixo-whats) aparece quando o bloco .topo ou .pagina-topo sai da tela.
   Links internos sem .html e sem barra no fim (/clinicas, /#planos). WhatsApp: https://wa.me/5514988158201?text=<mensagem codificada>.
   No rodapé, o número "(14) 98815-8201" é link, com a mesma mensagem do botão do cabeçalho da página.

   VERSÃO DOS ARQUIVOS (cache): as páginas chamam /assets/site.css?v=<hash>, /assets/site.js?v=<hash>
   e /img/icones.svg?v=<hash>#i-... Na produção, o nginx guarda CSS e JS por 1 dia e o sprite por 7 dias.
   Mudou um desses 3 arquivos? Troque o ?v= em todas as páginas (8 primeiros caracteres do sha256), na pasta buildbot/:
     for f in assets/site.css assets/site.js img/icones.svg; do h=$(sha256sum $f | cut -c1-8); sed -i -E "s#/$f\?v=[0-9a-f]+#/$f?v=$h#g" *.html; done

   Termos que não podem quebrar no hífen (e-mail, CNPJ, AP-000): <span class="nobr">...</span>.

   <body>
     <a class="pular" href="#conteudo">Pular para o conteúdo</a>
     <header class="cabecalho">...</header>            (igual em todas)
     <main id="conteudo" class="interna">
       <div class="conteiner pagina-topo">
         <nav class="trilha" aria-label="Trilha">
           <a href="/">Início</a> <span aria-hidden="true">›</span>
           <span aria-current="page">Clínicas e consultórios</span>
         </nav>
         <h1 class="t-pagina">Título da página.</h1>
         <div class="texto abertura"><p>2 parágrafos de abertura...</p></div>
         <div class="botoes"><a class="btn btn--ouro" href="https://wa.me/...">Falar no WhatsApp</a></div>
       </div>

       <section class="secao" aria-labelledby="s1">       (um bloco de texto)
         <div class="conteiner">
           <h2 id="s1" class="t-secao">O que o agente faz na sua clínica</h2>
           <div class="texto">
             <p><strong>Marca a consulta.</strong> Texto...</p>
           </div>
         </div>
       </section>

       Variantes de bloco:
       .secao--lado   título à esquerda e texto à direita (desktop)
       .lista-itens   lista com rótulo em negrito por item (<ul class="lista-itens"><li><strong>Rótulo.</strong> texto</li>)
       .nota          texto pequeno em areia, para avisos honestos perto do assunto

       Conversa ilustrativa (mesmo componente do topo da home, SEM animação nos nichos):
       <div class="cena cena--interna">
         <figure class="celular">
           <figcaption class="sr">Conversa ilustrativa no WhatsApp da Clínica Exemplo Saúde</figcaption>
           <div class="chat__topo"><span class="chat__avatar" aria-hidden="true">CE</span>
             <span class="chat__quem"><span class="chat__nome">Clínica Exemplo Saúde</span>
             <span class="chat__status">online</span></span></div>
           <ol class="chat">
             <li class="msg msg--cliente"><span class="sr">Lúcia Fictícia:</span>Texto<span class="msg__hora">20:15</span></li>
             <li class="msg msg--empresa"><span class="sr">Clínica Exemplo Saúde:</span>Texto<span class="msg__hora">20:15</span></li>
           </ol>
         </figure>
         <div class="regua-bloco"><p class="regua__titulo">O que o agente fez</p>
           <ol class="regua"><li>Marcou o assunto: consulta</li>...</ol></div>
       </div>
       <p class="nota">Ilustração. Clínica, pessoas, convênio e horários fictícios.</p>
       (Horário acima da conversa: <p class="relogio relogio--pequeno">Terça, 20:15</p><div class="relogio__linha" aria-hidden="true"></div>.
        Sem o atributo data-sequencia, a conversa já aparece pronta, sem animação.)

       Plano indicado: <div class="painel">...</div> (raio de 14 px, borda --linha);
       .painel--destaque leva a borda dourada.

       FAQ aberto (nichos): <div class="faq-aberto"><h3>Pergunta?</h3><p>Resposta.</p>...</div>
       FAQ fechado (home): <div class="faq"><details open><summary>Pergunta?</summary><div class="faq__resp"><p>...</p></div></details>

       Chamada final: <section class="secao cta-final">... h2.t-secao, p, .botoes ...</section>
       Fecho dos nichos: <div class="conteiner fecho"><p>...</p><p class="assinatura">Por equipe da DevUp Sistemas. Atualizado em 27/10/2026.</p></div>

       PÁGINAS DE NICHO (clinicas.html é o modelo)
       Topo em 2 colunas: <div class="conteiner pagina-topo topo-nicho"><div>trilha, h1.t-pagina.t-pagina--nicho,
       .abertura, .botoes</div><figure class="ilustra">...</figure></div>. No celular a ilustração vem depois do botão.
       Cada setor tem a sua ilustração (interface fictícia, parada, legenda "Ilustração" visível):
         .semana   tabela da agenda da semana (clínicas)        .etapas   etapas do funil (odontologia)
         .sessoes  sessões de um pacote (estética)              .ficha    rótulo e valor (advogados, imobiliárias)
         .chips    o que a pessoa procura (imobiliárias)        .roteia   pedido e setor (contabilidade)
       Moldura comum: <figure class="ilustra"><figcaption class="ilustra__cabeca"><svg class="ico">..</svg>
       <span class="ilustra__titulo">Título</span><span class="ilustra__sub">detalhe</span></figcaption> ...
       <p class="ilustra__legenda">Ilustração. Nomes e horários fictícios.</p></figure>
       Plano indicado: <div class="painel painel--destaque indicado"><dl class="indicado__planos">..</dl><div class="texto">..</div></div>.
     </main>
     <footer class="rodape">...</footer>                 (igual em todas)
     <a class="fixo-whats btn btn--ouro" href="...">Falar no WhatsApp</a>  (opcional; o JS mostra depois da 1ª dobra)
   </body>

   Regras (design-buildbot.md): sem degradê de fundo, sem botão pílula (raio 10 px),
   painéis 14 px, celular 28 px, sem sombra cinza em cartão, sem maiúsculas em rótulo,
   sem animação de entrada por seção. O degradê dourado só no logo e na linha do relógio.
   ===================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fontes/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fontes/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --carvao: #17140F;
  --grafite: #221E17;
  --grafite-2: #2B261D;
  --linha: #3A3328;
  --marfim: #F3ECDD;
  --areia: #A99F8B;
  --ouro: #E3B552;
  --ouro-claro: #F4D47E;
  --ouro-escuro: #9C7424;
  --balao-cliente: #3A3122;
  --degrade-ouro: linear-gradient(90deg, #9C7424 0%, #F4D47E 38%, #D9A93F 62%, #8C6216 100%);

  --f-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  /* escala 1,25: 15 / 17 / 21 / 26 / 33 / 41 / 52 / 64 */
  --t-15: 0.9375rem;
  --t-17: 1.0625rem;
  --t-21: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-26: clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem);
  --t-33: clamp(1.625rem, 1.3rem + 1.2vw, 2.0625rem);
  --t-41: clamp(1.875rem, 1.4rem + 1.7vw, 2.5625rem);
  --t-52: clamp(2.0625rem, 1.45rem + 2.5vw, 3.25rem);
  --t-64: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);

  --raio-btn: 10px;
  --raio-painel: 14px;
  --raio-celular: 28px;
  --max: 1160px;
  --gutter: 20px;
  --espaco-secao: clamp(56px, 2.5rem + 4vw, 104px);
  --medida: 31em; /* de 65 a 72 caracteres por linha no texto corrido (medido) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
.nobr { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--carvao);
  color: var(--marfim);
  font-family: var(--f-texto);
  font-size: var(--t-17);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
strong, b { font-weight: 650; }

h1, h2, h3, .t-titulo {
  font-family: var(--f-titulo);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}
h3 { font-size: var(--t-21); line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; }

a { color: var(--ouro); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--ouro-claro); }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 4px; }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--ouro); color: var(--carvao); padding: 10px 14px; border-radius: var(--raio-btn);
  font-weight: 600; text-decoration: none;
}
.pular:focus { top: 12px; }

.conteiner { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 32px; } }

.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.7rem 1.2rem;
  border: 1px solid transparent; border-radius: var(--raio-btn);
  font: 600 1rem/1.2 var(--f-texto); letter-spacing: 0;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--ouro { background: var(--ouro); color: var(--carvao); }
.btn--ouro:hover { background: var(--ouro-claro); color: var(--carvao); }
.btn--linha { border-color: var(--ouro-escuro); color: var(--marfim); background: transparent; }
.btn--linha:hover { border-color: var(--ouro); color: var(--marfim); }
.btn--pequeno { min-height: 40px; padding: 0.5rem 0.95rem; font-size: var(--t-15); }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 559px) {
  .botoes { flex-direction: column; align-items: stretch; }
  .botoes .btn { width: 100%; }
}

/* ---------- cabeçalho ---------- */
.cabecalho { position: relative; z-index: 20; border-bottom: 1px solid var(--linha); background: var(--carvao); }
.cabecalho__barra { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--marfim); text-decoration: none; margin-right: auto; }
.marca:hover { color: var(--marfim); }
.marca img { width: 34px; height: 34px; }
.marca__nome { font-family: var(--f-titulo); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1; }
.nav { display: none; gap: 26px; }
.nav a { color: var(--marfim); text-decoration: none; font-size: var(--t-15); font-weight: 500; padding-block: 6px; border-bottom: 1px solid transparent; }
.nav a:hover { color: var(--ouro-claro); border-bottom-color: var(--ouro-escuro); }
.cabecalho__whats { display: none; }
.menu { position: static; }
.menu > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--linha); border-radius: var(--raio-btn); cursor: pointer; font-weight: 600; font-size: var(--t-15);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .ico { width: 20px; height: 20px; }
.menu > summary .ico--fechar { display: none; }
.menu[open] > summary .ico--abrir { display: none; }
.menu[open] > summary .ico--fechar { display: block; }
.menu__painel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--carvao); border-bottom: 1px solid var(--linha);
  padding: 8px var(--gutter) 24px;
}
/* camada escura sobre a página enquanto o menu está aberto (fica atrás do painel e do cabeçalho) */
.menu__painel::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(23, 20, 15, 0.88); }
@media (max-width: 979px) { html:has(.menu[open]) { overflow: hidden; } }
.menu__painel a:not(.btn) {
  display: block; padding: 13px 0; border-bottom: 1px solid var(--linha);
  color: var(--marfim); text-decoration: none; font-size: var(--t-17); font-weight: 500;
}
.menu__painel .btn { width: 100%; margin-top: 16px; }
@media (min-width: 980px) {
  .nav { display: flex; }
  .cabecalho__whats { display: inline-flex; }
  .menu { display: none; }
}

/* ---------- topo (home) ---------- */
.topo { padding-block: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.topo__grade { display: grid; gap: 44px; }
@media (min-width: 1040px) {
  .topo__grade { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 56px; align-items: start; }
}
.topo__titulo { font-size: var(--t-52); line-height: 1.04; letter-spacing: -0.025em; max-width: 16ch; }
@media (min-width: 560px) and (max-width: 1039px) { .topo__titulo { max-width: 20ch; } }
.sobretitulo {
  display: block; margin-bottom: 18px;
  font-size: var(--t-21); font-weight: 500; line-height: 1.3; letter-spacing: -0.005em;
}
.topo__sub { margin-top: 22px; max-width: 34em; font-size: var(--t-17); color: var(--marfim); }
.topo .botoes { margin-top: 28px; }
.garantias { list-style: none; margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--areia); font-size: var(--t-15); }
.garantias li { display: flex; align-items: center; gap: 8px; }
.garantias li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ouro); flex: none; }

/* relógio: o elemento memorável */
.relogio { font-family: var(--f-titulo); font-weight: 220; font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: 0.95; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.relogio time { font-weight: 300; }
.relogio__linha { height: 2px; margin-top: 14px; background: var(--degrade-ouro); transform-origin: left center; }
.relogio__legenda { margin-top: 10px; color: var(--areia); font-size: var(--t-15); }

/* conversa ilustrativa (topo da home e nichos) */
.cena { display: grid; gap: 24px; margin-top: 26px; }
@media (min-width: 560px) {
  .cena { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: center; }
}
.celular {
  position: relative;
  width: 100%; max-width: 340px;
  border-radius: var(--raio-celular);
  border: 1px solid var(--linha);
  background: #0F0D09;
  padding: 10px;
}
.celular::before { content: ""; position: absolute; top: 5px; left: 50%; width: 54px; height: 4px; margin-left: -27px; border-radius: 4px; background: var(--linha); }
.chat__topo {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 12px 12px; border-radius: 20px 20px 0 0;
  background: var(--grafite-2); border-bottom: 1px solid var(--linha);
}
.chat__avatar {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--linha); color: var(--marfim); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
}
.chat__quem { display: grid; line-height: 1.2; min-width: 0; }
.chat__nome { font-weight: 600; font-size: 0.875rem; }
.chat__status { color: var(--areia); font-size: 0.75rem; }
.chat {
  position: relative; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 10px 16px; border-radius: 0 0 20px 20px;
  background: #1B1813;
  font-size: 0.875rem; line-height: 1.4;
}
.msg { position: relative; max-width: 86%; padding: 8px 11px 18px; border-radius: 10px; }
.msg--cliente { align-self: flex-end; background: var(--balao-cliente); border-top-right-radius: 3px; }
.msg--empresa { align-self: flex-start; background: var(--grafite-2); border-top-left-radius: 3px; }
.msg__hora { position: absolute; right: 10px; bottom: 4px; color: var(--areia); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.digitando {
  position: absolute; left: 10px; top: 0; display: none; gap: 4px; align-items: center;
  padding: 11px 13px; border-radius: 10px; border-top-left-radius: 3px; background: var(--grafite-2);
}
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--areia); }
.digitando.ativo { display: flex; }

.regua-bloco { min-width: 0; }
.regua__titulo { color: var(--areia); font-size: var(--t-15); margin-bottom: 12px; }
.regua { list-style: none; position: relative; padding-left: 24px; display: grid; gap: 14px; }
.regua::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--linha); }
.regua li { position: relative; font-size: var(--t-15); line-height: 1.35; transition: color .4s ease; }
.regua li::before {
  content: ""; position: absolute; left: -24px; top: 0.3em; width: 11px; height: 11px; border-radius: 50%;
  background: var(--ouro); border: 1.5px solid var(--ouro); box-sizing: border-box; transition: background-color .4s ease, border-color .4s ease;
}
.cena-nota { margin-top: 18px; }
.cena--interna { margin-top: 20px; }
.relogio--pequeno { font-size: var(--t-41); }
.relogio--pequeno + .relogio__linha { margin-top: 10px; }

/* sequência do topo: só com JS e sem redução de movimento; sem JS fica o estado final */
.js [data-sequencia]:not(.anima):not(.fim) .msg { opacity: 0; animation: bb-revela 0s linear 2.5s forwards; }
.anima .msg { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.anima .msg.visto { opacity: 1; transform: none; }
.js [data-sequencia]:not(.fim) .regua li:not(.aceso) { color: var(--areia); }
.js [data-sequencia]:not(.fim) .regua li:not(.aceso)::before { background: var(--carvao); border-color: var(--linha); }
.anima .relogio__linha { transform: scaleX(0.04); transition: transform 4.3s linear; }
.anima .relogio__linha.correndo { transform: scaleX(1); }
@keyframes bb-revela { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js [data-sequencia] .msg { opacity: 1 !important; animation: none !important; transform: none !important; }
  .js [data-sequencia] .regua li { color: var(--marfim) !important; }
  .js [data-sequencia] .regua li::before { background: var(--ouro) !important; border-color: var(--ouro) !important; }
  .anima .regua li, .anima .relogio__linha { transition: none !important; }
}

/* ---------- seções ---------- */
.secao { padding-block: var(--espaco-secao); border-top: 1px solid var(--linha); }
.secao--junta { padding-top: 0; border-top: 0; }
.t-secao { font-size: var(--t-41); max-width: 22ch; }
.t-pagina { font-size: var(--t-52); max-width: 20ch; }
.t-secao--media { font-size: var(--t-33); max-width: 30ch; }
.lead--topo { margin-top: 0; }
.lead { margin-top: 18px; max-width: 38em; font-size: var(--t-21); line-height: 1.45; color: var(--marfim); }
.texto { max-width: var(--medida); }
.texto > * + * { margin-top: 1em; }
.texto h2 { font-size: var(--t-33); margin-top: 1.8em; }
.texto h3 { margin-top: 1.6em; }
.nota { color: var(--areia); font-size: var(--t-15); line-height: 1.5; max-width: var(--medida); }
.nota a { color: var(--areia); }
.nota a:hover { color: var(--marfim); }
* + .nota-bloco { margin-top: 28px; }
.nota-bloco > * + * { margin-top: 10px; }
.cabeca { margin-bottom: clamp(32px, 4vw, 52px); }

.secao--lado .conteiner { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .secao--lado .conteiner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
}

.lista-itens { list-style: none; display: grid; gap: 14px; }
.lista-itens li { padding-left: 18px; position: relative; }
.lista-itens li::before { content: ""; position: absolute; left: 1px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--ouro); }

/* faixa de prova */
.prova { border-top: 1px solid var(--linha); padding-block: clamp(36px, 4vw, 56px); }
.prova__itens { list-style: none; display: grid; gap: 14px; }
@media (min-width: 900px) { .prova__itens { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.prova__itens li { color: var(--areia); font-size: var(--t-15); padding-left: 16px; border-left: 1px solid var(--ouro-escuro); }
.prova__itens strong { color: var(--marfim); font-weight: 600; }
.prova__caso { margin-top: 28px; padding-top: 24px; border-top: 1px dashed var(--linha); display: grid; gap: 10px; }
.prova__caso p:first-child { max-width: var(--medida); }

/* como funciona: sequência real, numeração permitida */
.passos { list-style: none; display: grid; gap: 28px; counter-reset: passo; }
@media (min-width: 860px) { .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } }
.passo { position: relative; padding-top: 22px; border-top: 1px solid var(--linha); counter-increment: passo; }
.passo::before {
  content: counter(passo); display: block; margin-bottom: 14px;
  font-family: var(--f-titulo); font-weight: 250; font-size: var(--t-52); line-height: 0.9; color: var(--ouro);
  font-variant-numeric: tabular-nums;
}
.passo h3 { margin-bottom: 8px; }
.passo p { color: var(--marfim); max-width: var(--medida); }


/* o que o agente faz */
.acoes { list-style: none; display: grid; gap: 0; }
@media (min-width: 820px) { .acoes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
.acao { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; padding-block: 20px; border-top: 1px solid var(--linha); }
.acao .ico { color: var(--ouro); margin-top: 2px; }
.acao h3 { font-size: var(--t-17); font-family: var(--f-texto); font-weight: 650; letter-spacing: 0; line-height: 1.4; text-wrap: pretty; }
.acao p { margin-top: 4px; color: var(--areia); font-size: var(--t-15); }

/* recolhidos */
.recolhe { margin-top: 28px; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.recolhe > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding-block: 12px; font-weight: 600; color: var(--ouro);
}
.recolhe > summary::-webkit-details-marker { display: none; }
.recolhe > summary .ico { width: 20px; height: 20px; transition: transform .2s ease; }
.recolhe[open] > summary .ico { transform: rotate(45deg); }
.recolhe__corpo { padding-bottom: 28px; display: grid; gap: 22px; }
.recolhe__corpo h3 { margin-top: 12px; }
.colunas-2 { list-style: none; display: grid; gap: 12px 48px; }
@media (min-width: 820px) { .colunas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* equipe de IA: crachás */
.crachas { list-style: none; display: grid; gap: 16px; }
@media (min-width: 700px) { .crachas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .crachas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cracha {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 26px 18px 18px; border: 1px solid var(--linha); border-radius: var(--raio-painel); background: var(--grafite);
}
.cracha::before { content: ""; position: absolute; top: 9px; left: 50%; width: 30px; height: 6px; margin-left: -15px; border-radius: 3px; background: var(--carvao); border: 1px solid var(--linha); }
.cracha__rosto { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--ouro-escuro); color: var(--ouro); }
.cracha__rosto .ico { width: 26px; height: 26px; }
.cracha h3 { font-size: var(--t-21); }
.cracha p { margin-top: 4px; color: var(--areia); font-size: var(--t-15); }

/* segmentos */
.segmentos { list-style: none; display: grid; }
@media (min-width: 820px) { .segmentos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
.segmentos li { position: relative; padding-block: 18px; border-top: 1px solid var(--linha); }
.segmentos a { font-family: var(--f-titulo); font-weight: 650; font-size: var(--t-21); letter-spacing: -0.01em; color: var(--marfim); text-decoration-color: var(--ouro-escuro); }
.segmentos a::after { content: ""; position: absolute; inset: 0; }
.segmentos a:hover, .segmentos li:hover a { color: var(--ouro-claro); text-decoration-color: var(--ouro); }
.segmentos p { margin-top: 4px; color: var(--areia); font-size: var(--t-15); }

/* calculadora */
.calc { display: grid; gap: 28px; }
@media (min-width: 960px) { .calc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; } }
.calc__form { display: grid; gap: 18px; }
.campo { display: grid; gap: 6px; align-content: start; }
.campo label, .campo legend, .campo__rotulo { font-weight: 600; font-size: var(--t-15); }
.campo__ajuda { color: var(--areia); font-size: 0.8125rem; }
.campo input[aria-invalid="true"] { border-color: var(--ouro); }
.campo__linha { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.campo__linha output { font-weight: 650; font-variant-numeric: tabular-nums; }
.campo input[type="number"], .campo input[type="text"], .campo select {
  width: 100%; min-height: 48px; padding: 10px 12px;
  background: var(--grafite); color: var(--marfim);
  border: 1px solid var(--linha); border-radius: var(--raio-btn);
  font: 500 var(--t-17) var(--f-texto); font-variant-numeric: tabular-nums;
}
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--areia) 50%), linear-gradient(135deg, var(--areia) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.campo input:hover, .campo select:hover { border-color: var(--ouro-escuro); }
.campo input[type="range"] { width: 100%; accent-color: var(--ouro); min-height: 32px; }
fieldset.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
.opcoes { display: grid; gap: 8px; margin-top: 4px; }
.opcao { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--linha); border-radius: var(--raio-btn); cursor: pointer; }
.opcao input { accent-color: var(--ouro); width: 18px; height: 18px; margin: 0; flex: none; }
.opcao:has(input:checked) { border-color: var(--ouro-escuro); background: var(--grafite); }
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.calc__ajustes { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.calc__ajustes > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 52px; font-weight: 600; color: var(--ouro); }
.calc__ajustes > summary::-webkit-details-marker { display: none; }
.calc__ajustes > summary .ico { width: 20px; height: 20px; transition: transform .2s ease; }
.calc__ajustes[open] > summary .ico { transform: rotate(45deg); }
.calc__ajustes-corpo { display: grid; gap: 18px; padding-bottom: 20px; }
.calc__resultado { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--linha); border-radius: var(--raio-painel); background: var(--grafite); }
.calc__valor { font-family: var(--f-texto); font-size: var(--t-21); line-height: 1.35; }
.calc__valor strong { display: block; margin-block: 2px; font-family: var(--f-titulo); font-weight: 650; font-size: var(--t-52); letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.calc__linhas { margin-top: 18px; display: grid; gap: 12px; }
.calc__linhas strong { font-variant-numeric: tabular-nums; }
.calc__resultado .botoes { margin-top: 22px; }
.calc__conta { margin-top: 18px; border-top: 1px solid var(--linha); }
.calc__conta > summary { list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ouro); font-weight: 600; }
.calc__conta > summary .ico { width: 20px; height: 20px; transition: transform .2s ease; }
.calc__conta[open] > summary .ico { transform: rotate(45deg); }
.calc__conta > summary::-webkit-details-marker { display: none; }
.calc__conta .nota + .nota { margin-top: 10px; }
.calc__aviso { margin-top: 18px; }
.so-celular { display: block; }
.so-desktop { display: none; }
@media (min-width: 720px) { .so-celular { display: none; } .so-desktop { display: block; } }

/* planos */
.planos { display: grid; gap: 16px; }
.plano {
  padding: 26px 22px 24px; border: 1px solid var(--linha); border-radius: var(--raio-painel); background: var(--grafite);
  display: flex; flex-direction: column;
}
.plano--destaque { border-color: var(--ouro); box-shadow: inset 0 0 0 1px var(--ouro); }
.plano h3 { font-size: var(--t-26); }
.plano__para { margin-top: 4px; color: var(--areia); font-size: var(--t-15); }
.plano__preco { margin-top: 18px; font-size: var(--t-17); color: var(--areia); }
.plano__preco strong { font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-41); letter-spacing: -0.02em; color: var(--marfim); font-variant-numeric: tabular-nums; }
.plano__anual { margin-top: 2px; color: var(--areia); font-size: var(--t-15); }
.plano__itens { margin-top: 18px; }
.plano__itens > div { padding-block: 11px; border-top: 1px solid var(--linha); }
.plano__itens dt { color: var(--areia); font-size: 0.8125rem; line-height: 1.35; }
.plano__itens dd { margin-top: 2px; font-size: var(--t-15); line-height: 1.45; }
.plano .btn { margin-top: 18px; align-self: end; width: 100%; }
@media (min-width: 1000px) {
  .planos { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(12, auto); column-gap: 20px; row-gap: 0; }
  .plano { grid-row: span 12; display: grid; grid-template-rows: subgrid; }
  .plano__itens { grid-row: span 7; display: grid; grid-template-rows: subgrid; }
}
.planos-notas { margin-top: 32px; display: grid; gap: 28px; }
@media (min-width: 1000px) { .planos-notas { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; } }
.planos-notas ul { list-style: none; display: grid; gap: 10px; }
.painel { padding: 22px; border: 1px solid var(--linha); border-radius: var(--raio-painel); background: var(--grafite); }
.painel--destaque { border-color: var(--ouro); }
.painel h3 { font-size: var(--t-17); font-family: var(--f-texto); letter-spacing: 0; margin-bottom: 12px; }
.conta-mes { display: grid; gap: 8px; font-size: var(--t-15); }
.conta-mes > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.conta-mes dt { color: var(--areia); }
.conta-mes dd { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.conta-mes .total { padding-top: 10px; border-top: 1px solid var(--linha); font-weight: 650; }
.conta-mes .total dt { color: var(--marfim); }
.conta-mes__depois { margin-top: 12px; }

/* implantação */
.implantes { display: grid; gap: 16px; }
@media (min-width: 960px) { .implantes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.implante { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px; border: 1px solid var(--linha); border-radius: var(--raio-painel); }
.implante--principal { background: var(--grafite); }
.implante h3 { font-size: var(--t-21); }
.implante .implante__preco { font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-33); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.implante .btn { margin-top: auto; }
.implante p { font-size: var(--t-15); }
.linha-tempo { list-style: none; display: grid; gap: 8px; font-size: var(--t-15); padding-left: 16px; border-left: 1px solid var(--ouro-escuro); }
.precisa { margin-top: 32px; display: grid; gap: 16px; }
@media (min-width: 900px) { .precisa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; } }
.precisa h3 { font-size: var(--t-21); }

/* contratar ou agente */
.versus { list-style: none; display: grid; gap: 0; margin-top: 24px; }
.versus li { padding-block: 16px; border-top: 1px solid var(--linha); }
.fecho-frase { margin-top: 24px; font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-26); line-height: 1.25; letter-spacing: -0.015em; max-width: 30ch; }

/* segurança */
.seguranca { list-style: none; display: grid; gap: 0; }
.seguranca li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; padding-block: 16px; border-top: 1px solid var(--linha); }
.seguranca .ico { color: var(--ouro); margin-top: 2px; }

/* FAQ fechado (home) */
.faq { max-width: 820px; border-bottom: 1px solid var(--linha); }
.faq details { border-top: 1px solid var(--linha); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px;
  padding-block: 18px; font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-21); line-height: 1.3; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { width: 20px; height: 20px; margin-top: 4px; color: var(--ouro); transition: transform .2s ease; }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq__resp { padding-bottom: 22px; max-width: var(--medida); }
.faq__resp p + p { margin-top: 0.8em; }

/* FAQ aberto (nichos) */
.faq-aberto { max-width: 820px; }
.faq-aberto h3 { padding-top: 22px; border-top: 1px solid var(--linha); }
.faq-aberto h3 + p { margin-top: 8px; padding-bottom: 22px; max-width: var(--medida); }

/* quem cuida e chamada final */
.quem-cuida { display: grid; gap: 8px; padding-bottom: clamp(32px, 4vw, 48px); margin-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--linha); }
.quem-cuida h2 { font-size: var(--t-21); line-height: 1.3; }
.quem-cuida p { color: var(--areia); max-width: var(--medida); }
.cta-final .t-secao { font-size: var(--t-52); max-width: 18ch; }
.cta-final .t-secao + p { margin-top: 16px; max-width: 46ch; font-size: var(--t-21); }
.cta-final .botoes { margin-top: 28px; }

/* páginas internas */
.pagina-topo { padding-block: clamp(32px, 5vw, 64px) clamp(40px, 5vw, 64px); }
.trilha { display: flex; flex-wrap: wrap; gap: 8px; color: var(--areia); font-size: var(--t-15); margin-bottom: 22px; }
.trilha a { color: var(--areia); padding-block: 11px; margin-block: -11px; } /* alvo de toque de 44 px sem mexer no layout */
.trilha a:hover { color: var(--marfim); }
.data-doc { margin-top: 14px; color: var(--areia); font-size: var(--t-15); }
.abertura { margin-top: 22px; }
.pagina-topo .botoes { margin-top: 26px; }
.fecho { padding-block: 0 var(--espaco-secao); display: grid; gap: 12px; }
.fecho p { max-width: var(--medida); }
.assinatura { color: var(--areia); font-size: var(--t-15); }

/* ---------- páginas de nicho ---------- */
/* topo: texto à esquerda, ilustração do setor à direita (desktop) */
.topo-nicho { display: grid; gap: 40px; }
@media (min-width: 1040px) {
  .topo-nicho { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 64px; align-items: start; }
  .topo-nicho .ilustra { margin-top: 46px; }
}
.t-pagina--nicho { font-size: var(--t-41); max-width: 24ch; line-height: 1.06; }

/* ilustração do setor: interface fictícia em HTML/CSS, parada, sem foto e sem emoji */
.ilustra { max-width: 520px; padding: 20px; border: 1px solid var(--linha); border-radius: var(--raio-painel); background: var(--grafite); font-size: var(--t-15); line-height: 1.4; }
.ilustra__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--linha); }
.ilustra__cabeca .ico { width: 20px; height: 20px; color: var(--ouro); }
.ilustra__titulo { font-weight: 650; }
.ilustra__sub { margin-left: auto; color: var(--areia); font-size: 0.8125rem; text-align: right; }
.ilustra__legenda { margin-top: 16px; color: var(--areia); font-size: 0.8125rem; }
.ilustra__item { margin-bottom: 16px; font-weight: 600; }
.msg__link { color: var(--marfim); text-decoration: underline dotted var(--areia); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* clínicas: semana da agenda */
.semana { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; margin: -4px; font-size: 0.8125rem; }
.semana th { padding: 0 4px 2px; color: var(--areia); font-weight: 500; text-align: left; }
.semana th[scope="row"] { width: 13%; padding: 0; vertical-align: middle; font-variant-numeric: tabular-nums; }
.semana thead td { border: 0; }
.semana td { height: 44px; padding: 6px 4px; border: 1px solid var(--linha); border-radius: 6px; color: var(--areia); text-align: center; vertical-align: middle; }
.semana .ocupado { border-color: var(--linha); background: var(--linha); }
@media (max-width: 559px) { .semana .so-largo { display: none; } }
.semana .reservado { border-color: var(--ouro); color: var(--marfim); font-weight: 600; }

/* odontologia: etapas do funil */
.etapas { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.etapas li { display: grid; align-content: start; gap: 8px; padding-top: 10px; border-top: 2px solid var(--linha); }
.etapas li.atual { border-top-color: var(--ouro); }
.etapas__nome { color: var(--areia); font-size: 0.8125rem; }
.etapas__cartao { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid var(--linha); border-radius: 8px; background: var(--carvao); font-weight: 600; font-size: 0.875rem; }
.etapas__cartao span { color: var(--areia); font-weight: 400; font-size: 0.8125rem; }
.atual .etapas__cartao { border-color: var(--ouro-escuro); }

/* estética: sessões do pacote */
.sessoes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sessoes li { position: relative; display: grid; align-content: start; gap: 2px; padding-top: 22px; font-size: 0.875rem; }
.sessoes li::before { content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--linha); background: var(--carvao); box-sizing: border-box; }
.sessoes li::after { content: ""; position: absolute; left: 17px; right: -4px; top: 6px; height: 1px; background: var(--linha); }
.sessoes li:last-child::after { display: none; }
.sessoes .feita::before { background: var(--ouro); border-color: var(--ouro); }
.sessoes .proxima::before { border-color: var(--ouro); }
.sessoes__n { font-weight: 650; }
.sessoes li span:not(.sessoes__n) { color: var(--areia); font-size: 0.8125rem; }

/* advogados e imobiliárias: ficha com rótulo e valor */
.ficha { display: grid; }
.ficha > div { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); gap: 12px; padding-block: 9px; border-top: 1px solid var(--linha); }
.ficha > div:first-child { border-top: 0; padding-top: 0; }
.ficha dt { color: var(--areia); font-size: 0.8125rem; padding-top: 1px; }
.ficha dd { font-size: 0.875rem; }
.ficha .destaque-ouro { color: var(--ouro-claro); }

/* imobiliárias: o que a pessoa procura */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chips li { padding: 5px 10px; border: 1px solid var(--ouro-escuro); border-radius: 8px; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }

/* contabilidade: cada pedido no setor certo */
.roteia { list-style: none; display: grid; gap: 10px; }
.roteia li { display: grid; grid-template-columns: minmax(0, 1fr) 20px 7.2em; gap: 10px; align-items: center; }
.roteia__msg { padding: 8px 11px; border-radius: 10px; border-top-right-radius: 3px; background: var(--balao-cliente); font-size: 0.875rem; }
.roteia .ico { width: 20px; height: 20px; color: var(--ouro); }
.roteia__setor { padding: 6px 8px; border: 1px solid var(--linha); border-radius: 8px; text-align: center; font-size: 0.8125rem; font-weight: 600; }
.roteia li:first-child .roteia__setor { border-color: var(--ouro); }

/* plano indicado */
.indicado { display: grid; gap: 24px; padding: clamp(22px, 3vw, 32px); }
@media (min-width: 900px) { .indicado { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; } }
.indicado__planos { display: grid; gap: 18px; align-content: start; }
.indicado__planos dt { font-family: var(--f-titulo); font-weight: 650; font-size: var(--t-21); letter-spacing: -0.01em; }
.indicado__planos dd { color: var(--areia); font-size: var(--t-15); }
.indicado__planos .indicado__preco { margin-top: 2px; color: var(--areia); }
.indicado__preco strong { font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-41); letter-spacing: -0.02em; line-height: 1.1; color: var(--marfim); font-variant-numeric: tabular-nums; }
.indicado__planos > div + div { padding-top: 18px; border-top: 1px solid var(--linha); }
.indicado .botoes { margin-top: 24px; }
.indicado .texto .nota { font-size: var(--t-15); }

/* texto legal: palavra por palavra, só com marcação */
.legal { padding-bottom: var(--espaco-secao); }
.legal .texto { max-width: 32em; }
.legal h2 { font-size: var(--t-21); letter-spacing: 0.01em; line-height: 1.3; margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--linha); }
.legal h3 { font-size: var(--t-17); font-family: var(--f-texto); letter-spacing: 0; margin-top: 1.8em; }
.legal ul { list-style: none; display: grid; gap: 8px; }
.legal ul li { position: relative; padding-left: 18px; }
.legal ul li::before { content: ""; position: absolute; left: 1px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--ouro); }
.legal ul.letras li { padding-left: 0; }
.legal ul.letras li::before { display: none; }
.legal .destaque { padding: 14px 16px; border-left: 2px solid var(--ouro); background: var(--grafite); border-radius: 0 var(--raio-btn) var(--raio-btn) 0; }
.legal .assinatura-doc { margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--linha); color: var(--areia); }
.legal .assinatura-doc p + p { margin-top: 4px; }
.legal__ver { max-width: 32em; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linha); color: var(--areia); }

/* 404 */
.erro { padding-block: clamp(56px, 10vw, 140px); }
.erro .erro__hora { margin: 0; line-height: 0.95; color: var(--areia); font-family: var(--f-titulo); font-weight: 250; font-size: var(--t-64); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.erro h1 { margin-top: 10px; font-size: var(--t-64); max-width: 14ch; }
.erro p { margin-top: 16px; font-size: var(--t-21); }
.erro .botoes { margin-top: 30px; }

/* rodapé */
.rodape { border-top: 1px solid var(--linha); padding-block: 56px 32px; color: var(--areia); font-size: var(--t-15); }
.rodape__grade { display: grid; gap: 32px; }
@media (min-width: 720px) { .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .rodape__grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; } }
.rodape h2 { font-family: var(--f-texto); font-size: var(--t-15); font-weight: 650; letter-spacing: 0; color: var(--marfim); margin-bottom: 10px; }
.rodape ul { list-style: none; display: grid; gap: 6px; }
.rodape a { color: var(--areia); }
.rodape a:hover { color: var(--marfim); }
.rodape .marca { margin-bottom: 12px; color: var(--marfim); }
.rodape p a { padding-block: 12px; } /* link dentro da frase: alvo maior sem mexer no layout */
.rodape .marca:hover { color: var(--marfim); }
@media (pointer: coarse), (max-width: 719px) {
  .rodape ul { gap: 0; }
  .rodape li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.3em; min-height: 44px; }
  .rodape li a { display: inline-flex; align-items: center; min-height: 44px; }
}
.rodape__fim { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

/* botão fixo do WhatsApp (celular, a partir da 2ª dobra; só com JS) */
.fixo-whats { display: none; }
@media (max-width: 719px) {
  .js .fixo-whats {
    display: flex; position: fixed; z-index: 30; left: 12px; right: 12px; bottom: 12px;
    visibility: hidden; opacity: 0; transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .js .fixo-whats.visivel { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
  .js body { padding-bottom: 76px; }
  html.js { scroll-padding-bottom: 88px; } /* o foco do teclado não fica embaixo do botão fixo */
}
@media (prefers-reduced-motion: reduce) { .fixo-whats { transition: none !important; } }