/* Estilo das paginas publicas (landing e paginas de profundidade).
   Extraido do index.html quando a landing deixou de ser uma pagina so: seis paginas com o
   CSS copiado seria seis lugares para consertar a mesma coisa. */
:root{
  --bg:#ffffff;--soft:#f4f6fb;--ink:#141a26;--muted:#5c6572;--dim:#8a92a0;
  --line:#e6e9ef;--brand:#529885;--brand-ink:#316859;--brand-2:#4a8f93;--green:#40997a;--warn:#c9822f;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --radius:16px;
  --barra:65px;     /* altura da barra do topo, borda inclusa — o herói se encaixa por ela */
  /* ESCALA DE ESPAÇAMENTO — uma só, para o ritmo de seção para seção não variar.
     Nunca sobrescrever padding de <section> no HTML: mexa aqui. */
  --s-sec:104px;    /* respiro vertical de cada seção */
  --s-head:52px;    /* do cabeçalho da seção ao conteúdo dela */
  --s-blk:56px;     /* entre blocos dentro da mesma seção */
  --shadow-card:0 1px 2px rgba(20,26,38,.04), 0 12px 28px -20px rgba(20,26,38,.28);
  --shadow-lift:0 1px 2px rgba(20,26,38,.04), 0 26px 50px -28px rgba(20,26,38,.34);
  /* Véu do herói no celular. Vive aqui porque são seis fotos usando o MESMO véu: repetido
     em seis regras, a próxima calibragem de contraste teria seis lugares para errar. */
  --veu-mob:
    radial-gradient(90% 55% at 50% 22%, rgba(82,152,133,.3) 0%, rgba(82,152,133,0) 72%),
    linear-gradient(170deg, rgba(11,45,36,.87) 0%, rgba(14,58,47,.82) 45%, rgba(12,48,39,.83) 100%);
}
@media(max-width:820px){:root{--s-sec:68px;--s-head:38px;--s-blk:40px;}}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.55;}
a{color:inherit;text-decoration:none;}
/* LARGURA DO CONTEÚDO — 1280, não 1080.
   Medido no concorrente na mesma tela: o contêiner dele tem 1312px, com uma coluna interna
   de 800 para o texto. O nosso tinha 1080, e a diferença aparecia justo onde está o nosso
   argumento: o print do produto saía 230px menor do que poderia.
   A regra que importa não é o número do contêiner, é que ele NÃO governa a medida da linha.
   Texto continua preso onde já estava (`.artigo` 68ch, `.sec-head` 62ch, `.lead` 58ch,
   `.faq` e `.evo` em 780) — alargar a leitura junto com a página faria o olho perder a linha
   de volta. Quem cresce é print, grade, tabela e herói. */
.wrap{max-width:1280px;margin:0 auto;padding:0 24px;}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;padding:12px 20px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:.15s;white-space:nowrap;}
.btn.primary{background:var(--brand-ink);color:#fff;box-shadow:0 12px 24px -12px rgba(20,26,38,.18);}
.btn.primary:hover{filter:brightness(1.06);transform:translateY(-1px);}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line);}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand-ink);}
.btn.lg{padding:15px 26px;font-size:16px;}

/* ---------- TECLADO ----------
   A página é uma sequência longa de links e botões e não tinha nenhum indicador de foco:
   quem navega por teclado (ou por leitor de tela) não sabia onde estava. `:focus-visible`
   e não `:focus` — o anel não deve aparecer para quem clicou com o mouse. */
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px;}
/* Pular a navegação: sem isto, chegar ao conteúdo custa seis tabulações em toda visita. */
.pular{position:absolute;left:14px;top:-70px;z-index:60;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:11px 16px;font-weight:700;font-size:14px;
  box-shadow:var(--shadow-card);transition:top .16s;}
.pular:focus{top:14px;}

/* nav */
/* --barra é a altura REAL da barra, borda inclusa (64 + 1). O herói de tela cheia depende
   dela para se encaixar sob o cabeçalho sem sobrar nem faltar pixel; mexer aqui sem mexer
   no `padding` da barra desalinha os dois. */
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;gap:18px;height:64px;}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em;font-size:18px;}
.logo .mark{width:34px;height:34px;border-radius:10px;background:var(--brand);display:grid;place-items:center;box-shadow:0 8px 18px -8px rgba(20,26,38,.18);}
/* SÓLIDO, e não contornado: é o mesmo traçado do `icon.svg` (o ícone do aplicativo), e eram
   dois desenhos diferentes para a mesma marca — um dente de contorno aqui, um dente de massa
   no ícone. `fill`/`stroke` precisam estar no CSS porque folha de estilo ganha de atributo de
   apresentação: deixar `fill="#fff"` só no SVG e um `fill:none` aqui apagaria o dente. */
.logo .mark svg{width:20px;height:20px;fill:#fff;stroke:none;}
.nav .links{margin-left:auto;display:flex;align-items:center;gap:22px;}
.nav .links a.tx{font-size:14.5px;font-weight:600;color:var(--muted);}
.nav .links a.tx:hover{color:var(--ink);}
/* ═══ NO CELULAR O SITE FICAVA SEM NAVEGAÇÃO NENHUMA ══════════════════════════════════════

   Esta regra escondia TODOS os links de texto abaixo de 760px — inclusive o "Entrar". Num
   celular sobravam o logotipo e o "Pedir acesso": quem já é cliente não tinha por onde entrar,
   e quem estava conhecendo não chegava a Preços, Prontuário, Agenda, Materiais, Documentos nem
   Artigos. O site inteiro virava uma página só.

   Agora "Entrar" FICA — é o caminho de quem já paga, e esconder isso é perder o cliente que
   já veio — e o resto vai para uma gaveta atrás do botão de menu, que é onde o celular espera
   encontrá-los. */
/* O botão da gaveta só existe no celular: no desktop os links cabem na barra.
   ELE VEM ANTES DA MEDIA QUERY de propósito — escrito depois, este `display:none` ganharia do
   `inline-flex` de lá (mesma especificidade, e a última escrita vence) e o botão sumiria
   justamente onde ele é a única navegação que existe. Foi o que aconteceu na primeira
   tentativa, e não dá erro nenhum: só não aparece. */
.menu-btn{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex:none;
  border:1px solid var(--line);border-radius:11px;background:var(--bg);color:var(--ink);cursor:pointer;padding:0;}
.menu-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none;}
header.sobre-escuro .menu-btn{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;}
@media(max-width:760px){
  .nav .links a.tx:not(.entrar){display:none;}
  .nav .links{gap:12px;}
  .nav .links a.tx.entrar{font-size:14px;}
  /* "Pedir acesso" SAI DA BARRA no celular: com ele, o logo + Entrar + botao + menu nao
     cabem em 375px e o ultimo transborda para fora do cabecalho. Ele nao se perde — esta na
     gaveta e DUAS vezes no primeiro rolar da propria pagina. O que nao pode faltar aqui em
     cima e o "Entrar", que nao tem outro lugar. */
  .nav .links .btn.primary{display:none;}
  .menu-btn{display:inline-flex;}
  /* "Rotina Odonto" em DUAS LINHAS ao lado do losango é a primeira coisa que se vê no
     celular, e lê-se como layout quebrado. */
  .nav .logo{font-size:17px;white-space:nowrap;}
  .nav .logo .mark{width:34px;height:34px;}
}
.menu-gaveta{position:fixed;inset:0;z-index:120;display:none;}
.menu-gaveta.on{display:block;}
.menu-gaveta .fundo{position:absolute;inset:0;background:rgba(16,24,40,.45);}
/* A PALETA DAQUI E OUTRA. As paginas publicas usam --bg/--soft; --surface e --surface2 sao
   do app.html. Escrevi os nomes do app por engano e o resultado nao deu erro nenhum: a
   variavel inexistente vira vazio, a gaveta ficou TRANSPARENTE e os links flutuavam por cima
   da pagina. Variavel de CSS que nao existe nao reclama — so nao pinta. */
.menu-gaveta .caixa{position:absolute;top:0;right:0;bottom:0;width:min(300px,86vw);background:var(--bg);
  box-shadow:-18px 0 50px -20px rgba(16,24,40,.5);padding:18px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;}
/* `:not(.btn)` NAO E ZELO: `.menu-gaveta .caixa a` tem especificidade maior que `.btn.primary`,
   entao esta cor ganhava da do botao e o "Pedir acesso" saia com texto escuro sobre o verde. */
.menu-gaveta .caixa a:not(.btn){display:block;padding:13px 12px;border-radius:10px;font-size:15.5px;font-weight:600;color:var(--ink);}
.menu-gaveta .caixa a:not(.btn):hover{background:var(--soft);}
.menu-gaveta .caixa .btn{margin-top:10px;justify-content:center;}
.menu-gaveta .fechar{align-self:flex-end;border:0;background:none;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 8px 10px;}
/* Enquanto o herói está na tela a barra fica ESCURA e emenda nele; branca no resto da
   página, onde o texto é escuro e ela precisa separar. A classe é posta pelo script do fim
   do index.html — CSS não sabe se a página está rolada.
   ESCURA, e não transparente: o cabeçalho é `sticky`, então ele ocupa lugar no fluxo ACIMA
   do herói em vez de flutuar sobre ele. Transparente ele não revela a foto — revela o branco
   do corpo, e o logotipo branco some dentro dele. Foi o que aconteceu na primeira tentativa. */
header.sobre-escuro{background:rgba(12,48,39,.92);border-bottom-color:rgba(255,255,255,.08);}
/* NO ALTO DA PÁGINA A BARRA SOME e a foto do herói ocupa a tela do primeiro pixel ao último.
   Só vale junto de `.sobre-escuro` — de propósito: é a garantia de que a barra só fica
   transparente quando existe herói escuro atrás dela. Sem essa dupla condição, uma página de
   fundo claro ficaria com o logotipo branco boiando no branco, que foi o erro da primeira vez.
   Medido no composto (foto + véu) da faixa do topo: luminância 0,064, ou seja 9,2:1 para o
   texto branco — bem acima dos 4,5:1 do AA. */
header.sobre-escuro.no-topo{background:transparent;backdrop-filter:none;border-bottom-color:transparent;}
header.sobre-escuro .logo{color:#fff;}
header.sobre-escuro .logo .mark{background:rgba(255,255,255,.16);box-shadow:none;}
header.sobre-escuro .nav .links a.tx{color:rgba(255,255,255,.8);}
header.sobre-escuro .nav .links a.tx:hover{color:#fff;}
header.sobre-escuro .btn.primary{background:#fff;color:#0d3529;box-shadow:0 12px 26px -14px rgba(0,0,0,.5);}
header.sobre-escuro .btn.primary:hover{background:#eaf5f1;filter:none;}

/* hero — o fundo tira a página do branco chapado sem virar enfeite */
.hero-bg{position:relative;overflow:hidden;}
.hero-bg::before{content:"";position:absolute;inset:-40% 0 auto;height:760px;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 42%, rgba(82,152,133,.13), rgba(74,143,147,.06) 45%, transparent 72%);}
.hero-bg::after{content:"";position:absolute;left:0;right:0;top:0;height:520px;pointer-events:none;
  background-image:radial-gradient(rgba(20,26,38,.075) 1px, transparent 1px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 70%);mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 70%);}

/* ---------- O HERÓI COMPROMETE-SE COM A COR ----------
   O véu branco de 96% sobre a foto resolvia o contraste e produzia exatamente o defeito que
   ele tentava evitar: fotografada no navegador, a primeira tela era um retângulo branco com
   texto no meio — a foto não existia, e a janela BRANCA do produto sobre fundo BRANCO
   desaparecia junto. É o contraste que faz o produto aparecer, não o tamanho da sombra.

   `.escuro` E NÃO `.full`: na primeira versão eu prendi o campo escuro ao herói de tela
   cheia, que só a home usa, com medo de a mesma foto repetida em seis páginas virar papel
   de parede. O resultado foi pior do que o medo: quem clicava em "O custo real" caía de
   volta na página branca de antes, e o site passava a ter dois desenhos. O papel de parede
   se resolve variando a FOTO por página (`.f-*` logo abaixo), não desistindo da cor.

   HOSPEDADA AQUI, não em CDN: o CSP é `img-src 'self'`, e mandar o IP de quem visita para
   um terceiro contradiz o que a /privacidade promete. */
/* SANGRIA POR BAIXO DO CABEÇALHO, em todo herói escuro — não só no de tela cheia, senão a
   barra transparente do topo revelaria o branco do corpo nas páginas internas.
   Sem isto o herói nascia 65px abaixo do topo e quem ocupava a tira era a barra pintada de
   verde: uma faixa chapada atravessando a tela antes de a foto começar. O `margin-top`
   negativo puxa o herói para trás da barra e o `padding-top` devolve o mesmo tanto, de modo
   que o CONTEÚDO não anda um pixel — muda só até onde a foto vai.
   A barra segue `sticky` com z-index 20 e passa por cima da foto, que é o que mantém o menu
   legível; quem a apaga no alto da página é `header.no-topo`. */
.hero-bg.escuro{ background-color:#0d3529;
  margin-top:calc(var(--barra) * -1); padding-top:var(--barra); }
/* A malha de pontos foi desenhada para aliviar o branco. Sobre o campo escuro vira sujeira. */
.hero-bg.escuro::after{display:none;}
/* A FOTO SAIU DO ELEMENTO E FOI PARA O ::before, e não é organização: é o que permite
   MOVER a camada. Fundo desenhado no próprio elemento só se desloca mudando
   `background-position`, o que repinta a cada quadro; num pseudo-elemento, ele anda com
   `transform`, que a placa de vídeo compõe sem repintar nada. Ver `@keyframes parallaxe`.
   Mais alto que a seção (`inset:-30% 0`) porque uma camada do tamanho exato mostraria a
   borda assim que começasse a se mover. */
.hero-bg.escuro::before{
  content:"";position:absolute;inset:-30% 0;z-index:0;pointer-events:none;display:block;
  background-repeat:no-repeat;
  /* `height:auto` NÃO É SUPÉRFLUO, é a correção da faixa verde chapada que ficou meses no ar.
     A regra genérica `.hero-bg::before` (logo acima) é do herói claro, onde o pseudo-elemento
     é um brilho de 760px preso no topo: `inset:-40% 0 auto` com `height:760px`. Ao trazer a
     foto para cá eu sobrescrevi o `inset`, e só. A altura fixa continuou valendo — e uma
     caixa absoluta com `top`, `bottom` E `height` está sobredeterminada: a regra manda
     DESCARTAR o `bottom`. Resultado: a camada media 760px fixos e terminava no meio do
     herói; daí para baixo aparecia o `background-color` puro, sem foto e sem textura.
     Nada disso dependia da altura do herói — quanto mais alto, maior a faixa —, e é por isso
     que encolher o herói só amenizou. Com `auto`, quem governa é o par top/bottom e a camada
     volta a medir 160% da seção, que é a folga de que a paralaxe precisa.
     A queda de luz da foto era problema REAL, mas secundário: medi as seis e o consultório
     escurece 45% do meio para o rodapé, contra 4% da recepção. Por isso o herói usa a
     recepção — com luz quase constante, `cover` serve em qualquer formato de caixa, cobre
     sempre e não há rodapé escuro para esconder atrás de enquadramento. */
  height:auto;
  background-size:auto, auto, cover;
  background-position:center, center, center 35%;
}

/* ---------- PARALAXE ----------
   As três camadas de foto (herói, faixa em sangria e fecho) andam mais devagar que a
   página. É o mesmo efeito em todas, declarado num lugar só.

   NÃO É `background-attachment: fixed`: no Safari do iOS o fundo fixo é ignorado — a imagem
   é redimensionada e o efeito não acontece, quando não trava a rolagem — e é no iPad que a
   doutora abre o site. Fundo fixo também repinta a área inteira a cada quadro.

   NÃO É `animation-timeline: view()`, embora fosse a solução moderna e sem script. Essa
   versão foi escrita, subiu e NÃO FUNCIONOU: `view()` procura o contêiner de rolagem mais
   próximo, e as três seções têm `overflow:hidden`, o que faz delas mesmas contêineres que
   nunca rolam — a linha do tempo nasce inativa e a animação nunca anda. O deslocamento
   agora vem de `--px`, escrito por landing.js (o porquê de ser em script está lá).

   Sem script, ou com movimento reduzido, `--px` fica em 0 e a camada não sai do lugar:
   paralaxe é dos efeitos que mais provocam desconforto vestibular, e quem pediu menos
   movimento não recebe nenhum.

   O deslocamento é de 8% da altura da camada — o suficiente para o olho perceber
   profundidade e pouco para não virar enjoo. Movimento maior chama atenção para si e tira
   a atenção do que está escrito por cima, que é o oposto do que a faixa existe para fazer. */
.hero-bg.escuro::before,
.faixa::before,
.closing::before{
  /* `--px` vai de +1 (a seção ainda vem) a -1 (já saiu por cima), escrito por landing.js a
     cada quadro de rolagem. Sem script — ou com movimento reduzido — ele fica em 0 e a
     camada não sai do lugar: a página é exatamente a que já estava no ar.
     O sinal é invertido de propósito: a camada anda ao CONTRÁRIO da página, que é o que
     produz a sensação de profundidade. */
  transform:translate3d(0, calc(var(--px, 0) * -17%), 0);
}
/* A CONTA QUE LIGA OS DOIS NÚMEROS, porque errá-la mostra a borda da seção:
   a camada tem altura (1 + 2k)·H, com k = 25% de folga em cima e embaixo, e anda
   t·(1+2k)·H. Para nunca descobrir a borda é preciso t ≤ k/(1+2k) = 0,25/1,5 = 16,7%.
   Com t = 15% sobra margem, e o percurso é de 22,5% da altura da seção — quase o triplo
   dos 8% da primeira versão, que ficaram tão discretos que quase não se viam.
   Mexer num sem mexer no outro é o erro a evitar: mais deslocamento com a mesma folga
   descobre a borda; mais folga sem mais deslocamento só amplia a foto à toa. */

/* Uma foto por página. O véu é o mesmo em todas — é ele que garante o contraste do texto
   branco, medido; o que muda é só o que aparece atrás. A 1ª declaração de cada par é a
   reserva para quem não entende image-set (fica no JPEG). */
.hero-bg.escuro.f-consultorio::before{
  background-image:
    radial-gradient(75% 65% at 18% 26%, rgba(82,152,133,.34) 0%, rgba(82,152,133,0) 70%),
    linear-gradient(165deg, rgba(11,45,36,.84) 0%, rgba(14,58,47,.78) 45%, rgba(12,48,39,.79) 100%),
    url("/media/consultorio-1920.jpg");
  background-image:
    radial-gradient(75% 65% at 18% 26%, rgba(82,152,133,.34) 0%, rgba(82,152,133,0) 70%),
    linear-gradient(165deg, rgba(11,45,36,.84) 0%, rgba(14,58,47,.78) 45%, rgba(12,48,39,.79) 100%),
    image-set(url("/media/consultorio-1920.webp") type("image/webp"), url("/media/consultorio-1920.jpg") type("image/jpeg"));
}
.hero-bg.escuro.f-mesa::before{
  background-image:
    radial-gradient(75% 65% at 18% 26%, rgba(82,152,133,.34) 0%, rgba(82,152,133,0) 70%),
    linear-gradient(165deg, rgba(11,45,36,.84) 0%, rgba(14,58,47,.78) 45%, rgba(12,48,39,.79) 100%),
    url("/media/mesa-1920.jpg");
  background-image:
    radial-gradient(75% 65% at 18% 26%, rgba(82,152,133,.34) 0%, rgba(82,152,133,0) 70%),
    linear-gradient(165deg, rgba(11,45,36,.84) 0%, rgba(14,58,47,.78) 45%, rgba(12,48,39,.79) 100%),
    image-set(url("/media/mesa-1920.webp") type("image/webp"), url("/media/mesa-1920.jpg") type("image/jpeg"));
}
.hero-bg.escuro.f-bandeja::before{
  background-image:
    radial-gradient(75% 65% at 18% 26%, rgba(82,152,133,.34) 0%, rgba(82,152,133,0) 70%),
    linear-gradient(165deg, rgba(11,45,36,.84) 0%, rgba(14,58,47,.78) 45%, rgba(12,48,39,.79) 100%),
    url("/media/bandeja-1920.jpg");
  background-image:
    radial-gradient(75% 65% at 18% 26%, rgba(82,152,133,.34) 0%, rgba(82,152,133,0) 70%),
    linear-gradient(165deg, rgba(11,45,36,.84) 0%, rgba(14,58,47,.78) 45%, rgba(12,48,39,.79) 100%),
    image-set(url("/media/bandeja-1920.webp") type("image/webp"), url("/media/bandeja-1920.jpg") type("image/jpeg"));
}
.hero-bg.escuro.f-recepcao::before{
  background-image:
    radial-gradient(75% 65% at 18% 26%, rgba(82,152,133,.34) 0%, rgba(82,152,133,0) 70%),
    linear-gradient(165deg, rgba(11,45,36,.84) 0%, rgba(14,58,47,.78) 45%, rgba(12,48,39,.79) 100%),
    url("/media/recepcao-1920.jpg");
  background-image:
    radial-gradient(75% 65% at 18% 26%, rgba(82,152,133,.34) 0%, rgba(82,152,133,0) 70%),
    linear-gradient(165deg, rgba(11,45,36,.84) 0%, rgba(14,58,47,.78) 45%, rgba(12,48,39,.79) 100%),
    image-set(url("/media/recepcao-1920.webp") type("image/webp"), url("/media/recepcao-1920.jpg") type("image/jpeg"));
}
.hero-bg.escuro.f-armario::before{
  background-image:
    radial-gradient(75% 65% at 18% 26%, rgba(82,152,133,.34) 0%, rgba(82,152,133,0) 70%),
    linear-gradient(165deg, rgba(11,45,36,.84) 0%, rgba(14,58,47,.78) 45%, rgba(12,48,39,.79) 100%),
    url("/media/armario-1920.jpg");
  background-image:
    radial-gradient(75% 65% at 18% 26%, rgba(82,152,133,.34) 0%, rgba(82,152,133,0) 70%),
    linear-gradient(165deg, rgba(11,45,36,.84) 0%, rgba(14,58,47,.78) 45%, rgba(12,48,39,.79) 100%),
    image-set(url("/media/armario-1920.webp") type("image/webp"), url("/media/armario-1920.jpg") type("image/jpeg"));
}
.hero-bg.escuro.f-maos::before{
  background-image:
    radial-gradient(75% 65% at 18% 26%, rgba(82,152,133,.34) 0%, rgba(82,152,133,0) 70%),
    linear-gradient(165deg, rgba(11,45,36,.84) 0%, rgba(14,58,47,.78) 45%, rgba(12,48,39,.79) 100%),
    url("/media/maos-1920.jpg");
  background-image:
    radial-gradient(75% 65% at 18% 26%, rgba(82,152,133,.34) 0%, rgba(82,152,133,0) 70%),
    linear-gradient(165deg, rgba(11,45,36,.84) 0%, rgba(14,58,47,.78) 45%, rgba(12,48,39,.79) 100%),
    image-set(url("/media/maos-1920.webp") type("image/webp"), url("/media/maos-1920.jpg") type("image/jpeg"));
}

/* O TEXTO DO HERÓI vira branco em TODA página que usa o campo escuro. */
.hero-bg.escuro .hero-txt h1{color:#fff;}
.hero-bg.escuro .hero-txt h1 span{color:#7fd7ba;}   /* --brand não passa em fundo escuro */
.hero-bg.escuro .hero-txt .lead{color:rgba(255,255,255,.88);}
.hero-bg.escuro .hero-txt .note{color:rgba(255,255,255,.72);}
.hero-bg.escuro .hero-txt .note a{color:#fff;}
.hero-bg.escuro .hero-txt .assinatura{color:rgba(255,255,255,.72);}
.hero-bg.escuro .hero-txt .assinatura b{color:#fff;}
.hero-bg.escuro .hero-txt .assinatura span + span::before{background:rgba(255,255,255,.5);}
.hero-bg.escuro .eyebrow{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);color:#fff;box-shadow:none;}
.hero-bg.escuro .eyebrow .dot{background:#7fd7ba;box-shadow:0 0 0 3px rgba(127,215,186,.22);}
/* O botão principal inverte: branco sólido é o que mais contrasta com o campo. */
.hero-bg.escuro .btn.primary{background:#fff;color:#0d3529;box-shadow:0 14px 30px -14px rgba(0,0,0,.5);}
.hero-bg.escuro .btn.primary:hover{background:#eaf5f1;filter:none;}
.hero-bg.escuro .btn.ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.42);}
.hero-bg.escuro .btn.ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff;}
.hero-bg.escuro .scrollcue{color:rgba(255,255,255,.72);}
.hero-bg.escuro .scrollcue:hover{color:#fff;}

/* No celular a coluna é estreita e o texto ocupa tudo: véu mais fechado, e a versão de
   1200px das fotos, que pesa metade. */
@media(max-width:820px){
  /* No ::before, que é onde a foto passou a viver. */
  .hero-bg.escuro::before{background-position:center, center, center 62%;}
  .hero-bg.escuro.f-consultorio::before{background-image:var(--veu-mob), url("/media/consultorio-1200.webp");}
  .hero-bg.escuro.f-mesa::before{background-image:var(--veu-mob), url("/media/mesa-1200.webp");}
  .hero-bg.escuro.f-bandeja::before{background-image:var(--veu-mob), url("/media/bandeja-1200.webp");}
  .hero-bg.escuro.f-recepcao::before{background-image:var(--veu-mob), url("/media/recepcao-1200.webp");}
  .hero-bg.escuro.f-armario::before{background-image:var(--veu-mob), url("/media/armario-1200.webp");}
  .hero-bg.escuro.f-maos::before{background-image:var(--veu-mob), url("/media/maos-1200.webp");}
}
/* Quem pediu mais contraste recebe o campo chapado: a foto é decoração, o texto não é.
   A regra tem que mirar o ::before — é lá que a foto está desde a paralaxe. Apontada para o
   elemento, ela não apagava nada e a promessa de contraste alto ficava valendo só no papel. */
@media(prefers-contrast:more){
  .hero-bg.escuro{ background-color:#0a2b22; }
  .hero-bg.escuro::before{ background-image:none !important; transform:none !important; }
}
/* Padding em LONGHAND: o atalho "padding:88px 0" zeraria o padding lateral do .wrap
   (mesma especificidade, .hero vem depois) e no celular o hero encostava na borda.
   padding-bottom 0 é de propósito: o respiro até a próxima seção é o padding-top DELA —
   somar os dois daria o dobro do vão, que era o que fazia a página parecer solta. */
/* Com o herói em tela cheia o padding-top vira só uma reserva: quem centraliza é o flex do
   .full. Mantido para o caso de tela baixa, onde o .full sai de cena e o fluxo volta. */
/* Com o herói fora da tela cheia, o respiro passa a ser dele: o `.full` centralizava o
   conteúdo e o padding era só reserva. 84px em cima e embaixo dão um herói de ~650px —
   proporção próxima à da foto, e sem faixa sobrando. */
.hero{position:relative;padding-top:84px;padding-bottom:84px;text-align:center;}
@media(max-width:820px){.hero{padding-top:40px;padding-bottom:40px;}}
@media(max-height:680px){.hero{padding-top:72px;padding-bottom:16px;}}

/* ---------- HERÓI EM DUAS COLUNAS ----------
   Texto de um lado, o produto do outro. Centralizado com o texto sozinho, o herói dizia
   "artigo"; com a tela ao lado, diz "software" antes de qualquer linha ser lida. */
@media(min-width:980px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:56px;align-items:center;text-align:left;}
  .hero h1,.hero .lead{margin-left:0;margin-right:0;}
  .hero .cta{justify-content:flex-start;}
  .hero .eyebrow{margin-bottom:20px;}
}
@media(max-width:979px){ .hero-art{margin-top:38px;} }

/* ---------- A COMPOSIÇÃO DO HERÓI ----------
   A tela grande é a base; o cartão do odontograma sai por cima da quina inferior esquerda.
   Sobre o campo escuro as duas ficam brancas e a sombra tem onde cair — era isso que faltava
   quando o fundo era branco: sombra sobre branco não produz profundidade nenhuma. */
.hero-art{position:relative;}
.hero-art .principal{border-color:rgba(255,255,255,.14);box-shadow:0 40px 80px -30px rgba(0,0,0,.65);}
.hero-art .principal img{display:block;width:100%;max-width:none;height:auto;margin:0;}
@media(min-width:980px){
  /* Estoura um pouco a coluna para a direita: o herói fica cheio até a borda, em vez de
     terminar num corredor de branco. */
  .hero-art .principal{margin-right:-6%;margin-bottom:34px;}
  /* Só a QUINA. Com 308px e -40 de recuo o cartão cobria um terço da tela de baixo — a
     sobreposição existe para dar profundidade, não para esconder o produto. */
  .hero-art .solta{position:absolute;left:-58px;bottom:-8px;width:262px;z-index:2;}
}
.hero-art .solta{border-color:rgba(255,255,255,.16);box-shadow:0 28px 56px -20px rgba(0,0,0,.6);}
.hero-art .solta .jcorpo{padding:15px 17px 17px;}
.hero-art .solta .jtopo b{font-size:14px;}
.hero-art .solta .jcorpo img{max-width:100%;}
.hero-art .solta .jcusto{font-size:12.5px;margin-top:13px;padding-top:11px;}
.hero-art .solta .jcusto > b{font-size:13px;}
/* No celular a sobreposição não cabe: viram dois blocos, na ordem em que se explicam. */
@media(max-width:979px){
  .hero-art .solta{margin-top:16px;width:100%;}
}

/* A moldura de janela é o que transforma um desenho solto em "uma tela do sistema". */
.janela{margin:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 2px 4px rgba(20,26,38,.04), 0 46px 90px -50px rgba(20,26,38,.5);}
.jbar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#fbfcfe;border-bottom:1px solid var(--line);}
.jbar i{width:9px;height:9px;border-radius:999px;background:#e2e6ee;flex:none;}
.jbar span{margin-left:10px;font-size:12.5px;font-weight:600;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jcorpo{padding:20px 22px 22px;}
.jtopo{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.jtopo b{font-size:15px;letter-spacing:-.01em;}
.jtag{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--brand-ink);
  background:rgba(82,152,133,.12);padding:4px 11px;border-radius:999px;}
.jcorpo img{display:block;width:100%;max-width:420px;height:auto;margin:6px auto 0;}
/* O cartão do custo é o que amarra o desenho ao argumento da página. */
.jcusto{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 0;
  border-top:1px solid var(--line);padding-top:14px;font-size:13.5px;}

/* A CONTA DO HERÓI — as quatro parcelas entrando uma a uma e o total fechando.
   Substitui o vídeo que o plano previa. Para movimento assim (linha aparecendo, número
   mudando) o vídeo é o formato errado: pesa megabytes, borra o texto no reescalonamento e
   atrasa o LCP justamente no primeiro contato.
   O ESTADO FINAL É O PADRÃO. Nada aqui esconde conteúdo por conta própria — quem esconde é
   a classe `.animando`, posta pelo script SÓ quando ele decide animar. Sem script, com
   movimento reduzido ou com o CSS carregando torto, a conta aparece pronta. */
.jcusto.conta{display:block;}
.jcusto.conta > b{display:block;margin-bottom:9px;}
.parcelas{list-style:none;margin:0 0 11px;padding:0;display:grid;gap:5px;}
.parcelas li{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);}
.parcelas li b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;}
.somatotal{display:block;border-top:1px solid var(--line);padding-top:9px;}
.somatotal b{font-variant-numeric:tabular-nums;}

.conta.animando .parcelas li{opacity:0;transform:translateY(5px);
  animation:conta-linha .42s cubic-bezier(.2,.7,.3,1) forwards;}
.conta.animando .parcelas li:nth-child(1){animation-delay:.35s;}
.conta.animando .parcelas li:nth-child(2){animation-delay:.60s;}
.conta.animando .parcelas li:nth-child(3){animation-delay:.85s;}
.conta.animando .parcelas li:nth-child(4){animation-delay:1.10s;}
.conta.animando .somatotal{opacity:0;animation:conta-linha .5s cubic-bezier(.2,.7,.3,1) 1.45s forwards;}
@keyframes conta-linha{to{opacity:1;transform:none;}}

/* O cartão flutuante é BRANCO (`.janela{background:#fff}`) e estreito — só a letra encolhe.
   Cheguei a escrever aqui um bloco de cor clara, do tipo que serve para cartão escuro; teria
   apagado o texto. A borda branca do `.solta` é da BORDA, não do fundo. */
.hero-art .solta .parcelas li{font-size:11.5px;}
.jcusto > b{font-size:14px;}
.jcusto span{margin-left:auto;color:var(--muted);}
.jcusto span b{color:var(--brand-ink);}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.8);backdrop-filter:blur(6px);border:1px solid var(--line);color:var(--brand-ink);font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;margin-bottom:24px;box-shadow:0 1px 2px rgba(20,26,38,.04);}
.eyebrow .dot{width:7px;height:7px;border-radius:999px;background:var(--green);box-shadow:0 0 0 3px rgba(64,153,122,.18);}
h1{font-size:clamp(31px,5.2vw,52px);line-height:1.06;letter-spacing:-.033em;font-weight:800;max-width:19ch;margin:0 auto;}
h1 span{color:var(--brand);}
.lead{font-size:clamp(16px,2.2vw,19px);color:var(--muted);max-width:58ch;margin:22px auto 0;}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px;}
/* --dim (#8a92a0) em 13px dá contraste 3,0 sobre o branco — abaixo do mínimo de 4,5 da
   WCAG AA, e isso valia ANTES de existir foto no herói: a linha do convite e do teste
   grátis é informação comercial, não legenda decorativa. Com --muted vai a 6,4 no branco e
   segue acima de 5 sobre a parte clara da foto. Medido, não estimado. */
.note{margin-top:18px;font-size:13px;color:var(--muted);}
/* Estas três linhas estavam em `style=` no próprio link do index.html, e é por isso que
   existem aqui: estilo inline ganha de qualquer seletor, então a regra que pinta o link de
   branco sobre o herói escuro (`.hero-bg.escuro .hero-txt .note a`) nunca conseguia valer —
   o "já tenho convite" ficava verde-escuro sobre verde-escuro, 1,36:1. */
.note a{color:var(--brand-ink);font-weight:700;text-decoration:underline;}

/* A corrente do custo. Lista ORDENADA de propósito: a ordem é o argumento — cada elo é uma
   tela que ela já preenche por outro motivo, e o último é consequência dos anteriores.
   A seta é decorativa (aria-hidden pelo ::after), então quem usa leitor de tela ouve só a
   lista numerada, que já carrega a sequência. */
.cadeia{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  max-width:1020px;margin:var(--s-head) auto 0;counter-reset:elo;}
.cadeia li{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:18px 16px;box-shadow:var(--shadow-card);}
.cadeia li::before{counter-increment:elo;content:counter(elo);display:grid;place-items:center;
  width:24px;height:24px;border-radius:8px;background:var(--soft);color:var(--brand-ink);
  font-size:12.5px;font-weight:800;margin-bottom:10px;}
.cadeia li::after{content:"";position:absolute;right:-13px;top:50%;width:14px;height:1.5px;
  background:var(--line);}
.cadeia li:last-child::after{display:none;}
.cadeia b{display:block;font-size:14.5px;letter-spacing:-.01em;}
.cadeia small{display:block;color:var(--muted);font-size:12.5px;margin-top:5px;line-height:1.45;}
/* O último elo é o resultado: muda de cor porque é a resposta, não mais um passo. */
.cadeia li.res{background:var(--brand-ink);border-color:var(--brand-ink);}
.cadeia li.res::before{background:rgba(255,255,255,.18);color:#fff;}
.cadeia li.res b{color:#fff;}
.cadeia li.res small{color:rgba(255,255,255,.82);}

/* O VERDE ANDANDO DE ELO EM ELO, uma vez só, quando a seção aparece.
   Não é enfeite: a corrente é o argumento da página — cada caixa é a origem de uma parcela e
   a última é o resultado. Parada, ela é lida como cinco itens soltos; andando, ela mostra que
   um alimenta o outro, que é justamente o que o texto ao lado afirma.
   UMA VEZ SÓ, e não em laço: repetir puxa o olho para longe do texto a cada volta.
   O estado final é IDÊNTICO ao de hoje — quem chega sem script, com movimento reduzido, ou
   depois de a animação passar, vê exatamente a mesma corrente. */
/* RITMO. A primeira versão andava em 1,6s no total e passava antes de a pessoa entender que
   era uma sequência — parecia um piscar, não um percurso. Agora cada elo demora 1,9s e o
   próximo começa 0,62s depois do anterior, o que dá cerca de 4,4s de ponta a ponta: tempo de
   ler o nome de cada caixa enquanto ela acende, que é o ponto. */
.cadeia.andando li{animation:elo-aceso 1.9s cubic-bezier(.33,0,.2,1) both;}
.cadeia.andando li:nth-child(1){animation-delay:.15s;}
.cadeia.andando li:nth-child(2){animation-delay:.77s;}
.cadeia.andando li:nth-child(3){animation-delay:1.39s;}
.cadeia.andando li:nth-child(4){animation-delay:2.01s;}
.cadeia.andando li:nth-child(5){animation-delay:2.63s;}
/* O traço entre as caixas acende junto — é ele que dá a direção. */
.cadeia.andando li::after{animation:elo-traco 1.2s ease-out both;animation-delay:inherit;}
@keyframes elo-aceso{
  0%  {border-color:var(--line);box-shadow:var(--shadow-card);transform:translateY(0);}
  35% {border-color:var(--brand);box-shadow:0 0 0 3px rgba(82,152,133,.16), var(--shadow-card);transform:translateY(-3px);}
  100%{border-color:var(--line);box-shadow:var(--shadow-card);transform:translateY(0);}
}
/* O último elo já é verde escuro: o realce dele não pode apagar a borda própria. */
.cadeia.andando li.res{animation-name:elo-aceso-res;}
@keyframes elo-aceso-res{
  0%  {box-shadow:var(--shadow-card);transform:translateY(0);}
  35% {box-shadow:0 0 0 4px rgba(82,152,133,.3), var(--shadow-card);transform:translateY(-3px);}
  100%{box-shadow:var(--shadow-card);transform:translateY(0);}
}
@keyframes elo-traco{
  0%  {background:var(--line);}
  40% {background:var(--brand);}
  100%{background:var(--line);}
}
@media(max-width:900px){
  /* Empilhado, a seta vira vertical: a sequência tem que continuar legível. */
  .cadeia{grid-template-columns:1fr;gap:10px;max-width:460px;}
  .cadeia li::after{right:auto;left:28px;top:auto;bottom:-11px;width:1.5px;height:10px;}
}

/* Vídeo do herói (SLOT). Fica pronto para quando a gravação existir. */
.herovid{display:block;width:min(920px,100%);margin:44px auto 0;border-radius:20px;border:1px solid var(--line);
  box-shadow:var(--shadow-lift);background:var(--soft);}
@media(prefers-reduced-motion:reduce){
  /* Sem autoplay para quem pediu menos movimento: o poster já conta a história. */
  .herovid{animation:none;}
}

/* Convite para rolar. Sem ele, uma tela cheia com pouco texto parece a página inteira —
   a pessoa lê a manchete, não vê o que vem depois e sai. */
.scrollcue{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--dim);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.scrollcue svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;animation:cue 2.2s ease-in-out infinite;}
.scrollcue:hover{color:var(--brand-ink);}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}
@media(prefers-reduced-motion:reduce){ .scrollcue svg{animation:none;opacity:.8} }
@media(max-height:680px){ .scrollcue{display:none;} }

/* a conta — peça central */
.calc{position:relative;max-width:1000px;margin:0 auto;text-align:left;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 2px 4px rgba(20,26,38,.04), 0 44px 84px -48px rgba(20,26,38,.45);}
.calc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand);}
.calc .top{padding:18px 24px;border-bottom:1px solid var(--line);background:#fbfcfe;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.calc .top b{font-size:15px;letter-spacing:-.01em;}
.calc .top .pill{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);background:#fff;border:1px solid var(--line);padding:5px 12px;border-radius:999px;}
.calc .cols{display:grid;grid-template-columns:1fr 1fr;}
@media(max-width:720px){.calc .cols{grid-template-columns:1fr;}}
.calc .col{padding:24px;}
.calc .col + .col{border-left:1px solid var(--line);background:linear-gradient(180deg,rgba(201,130,47,.05),rgba(201,130,47,.015));}
@media(max-width:720px){.calc .col + .col{border-left:none;border-top:1px solid var(--line);}}
.calc .ch{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:3px;}
.calc .cs{font-size:13px;color:var(--muted);margin-bottom:16px;}
.calc .ln{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;color:var(--muted);padding:7px 0;}
.calc .ln b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;}
.calc .ln.hl b{color:var(--warn);}
.calc .tot{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);margin-top:12px;padding-top:14px;font-size:16px;font-weight:800;letter-spacing:-.01em;}
.calc .tot .v{font-variant-numeric:tabular-nums;}
.calc .marg{margin-top:12px;font-size:13.5px;color:var(--muted);}
.calc .marg b{color:var(--green);}
.calc .marg.bad b{color:#c65868;}
.calc .foot{padding:16px 24px;border-top:1px solid var(--line);background:var(--soft);font-size:13.5px;color:var(--muted);}

/* sections — o ritmo sai TODO da escala; nada de padding solto no HTML */
section{padding:var(--s-sec) 0;}
.tint{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* ---------- SEÇÕES DE TELA CHEIA ----------
   Aplicado SÓ onde a seção tem UMA ideia (herói, as duas viradas de argumento, o fecho).
   Nas seções densas — recursos, preços, comparativo — tela cheia não cabe: ou sobra vão
   enorme, ou o conteúdo estoura a viewport e o snap passa a brigar com quem rola.

   `min-height`, nunca `height`: conteúdo maior que a tela precisa poder crescer.
   `svh` porque no celular a barra do navegador entra e sai — `100vh` corta o rodapé da
   seção justamente onde fica o botão. O `vh` fica antes como reserva p/ navegador antigo.
   `proximity`, nunca `mandatory`: mandatory prende o scroll e irrita no trackpad. */
.snap{scroll-snap-type:y proximity;}
.full{min-height:100vh;min-height:100svh;display:flex;align-items:center;scroll-snap-align:start;}
.full > .wrap{width:100%;}
/* A tela cheia mede a TELA, sem descontar nem somar a barra. O desconto de 64px que havia
   aqui existia porque o herói nascia embaixo do cabeçalho; com a sangria (ver
   `.hero-bg.escuro`) a margem negativa encosta o herói no pixel zero, e a barra passou a
   flutuar por cima em vez de empurrar. Somar a barra, que foi minha primeira tentativa,
   joga 65px do herói para baixo da dobra e some com a seta de "A CONTA". */
.hero-bg.full{min-height:100vh;min-height:100svh;}
/* Tela baixa (notebook 13", celular deitado): tela cheia vira cárcere. Volta ao fluxo. */
@media(max-height:680px){
  .snap{scroll-snap-type:none;}
  .full{min-height:0;display:block;}
  /* A sangria continua (a foto sob a barra é o que se quer em qualquer tela); o que cai é só
     a exigência de altura, que em tela baixa vira cárcere. */
  .hero-bg.full{min-height:0;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .snap{scroll-snap-type:none;}
}
/* O RODAPÉ NÃO ALCANÇAVA NO CELULAR (achado pelo Pablo, 18/09/2026, rolando a landing no
   telefone): a página "voltava para cima" e o rodapé não recebia o toque.

   A CAUSA: depois do fecho não havia ponto de encaixe nenhum. O rodapé é mais baixo que a tela,
   então o fim da página fica a ~280px do início do fecho — e o Safari do iPhone trata
   `proximity` quase como `mandatory`: considera o início do fecho "perto o bastante" e puxa de
   volta. O Chromium, de onde eu testo, é mais manso e deixava chegar ao fim — por isso passou.

   DUAS CORREÇÕES, porque são dois problemas:
   1. o rodapé É um ponto de encaixe, alinhado pelo FIM: a página passa a ter onde parar
      embaixo, em qualquer aparelho;
   2. no TOQUE o encaixe sai inteiro. Não é só o rodapé: as seções densas (recursos, preços)
      são mais altas que a tela e não têm ponto de encaixe dentro — no dedo, com a inércia da
      rolagem, o mesmo puxão acontece NO MEIO da leitura. Os quadros de tela cheia continuam
      (`min-height` fica); some só o puxão magnético, que no trackpad ajuda e no dedo atrapalha.
   `hover:none` + `pointer:coarse` descreve o aparelho de TOQUE, que é o que importa aqui — e não
   a largura: tablet deitado é largo e tem o mesmo dedo. */
footer{scroll-snap-align:end;}
@media(hover:none) and (pointer:coarse){
  .snap{scroll-snap-type:none;}
}
.sec-head{text-align:center;max-width:62ch;margin:0 auto var(--s-head);}
.sec-head.only{margin-bottom:0;}   /* seção que é só o cabeçalho, sem conteúdo abaixo */
.sec-head .kick{display:inline-flex;align-items:center;gap:9px;color:var(--brand);font-weight:800;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;}
.sec-head .kick::before{content:"";width:22px;height:1.5px;background:var(--brand);opacity:.45;border-radius:2px;}
.sec-head h2{font-size:clamp(26px,3.6vw,36px);letter-spacing:-.024em;margin:12px 0 12px;line-height:1.12;}
.sec-head p{color:var(--muted);font-size:16.5px;}
/* QUEBRA DE LINHA EM TEXTO CENTRALIZADO. O navegador quebra pelo primeiro lugar que couber, e
   em parágrafo curto e centralizado isso produz linhas de comprimentos muito diferentes e
   sobras de uma ou duas palavras. Onde mais incomoda é no travessão: ele ia parar no fim da
   linha com a conjunção seguinte solta atrás, e a frase parecia partida ao meio.
   `balance` iguala o comprimento das linhas (o navegador testa as combinações e escolhe a
   melhor); `pretty` só evita a órfã do fim. Título e chamada usam `balance` porque têm poucas
   linhas — é o caso para o qual ele foi feito. Quem não tiver suporte quebra como antes. */
.sec-head h2, .sec-head p, .faixa h2, .faixa p, .closing h2, .closing p,
.hero-txt h1, .hero-txt .lead, .legenda, .plans-note{text-wrap:balance;}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:880px;margin:0 auto;}
@media(max-width:720px){.duo{grid-template-columns:1fr;}}
.duo .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-card);}
.duo .card h3{font-size:16.5px;margin-bottom:10px;letter-spacing:-.01em;}
.duo .card p{color:var(--muted);font-size:14.5px;}
.duo .card ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:9px;}
.duo .card li{display:flex;gap:10px;font-size:14.5px;color:var(--muted);align-items:flex-start;}
.duo .card li svg{width:18px;height:18px;flex:none;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px;}
.duo .card li.no svg{stroke:var(--dim);}
.duo .card li.yes svg{stroke:var(--green);}
.duo .card li.no{color:var(--dim);}
.duo .card.hi{border-color:rgba(82,152,133,.45);box-shadow:0 2px 4px rgba(20,26,38,.04), 0 30px 60px -34px rgba(82,152,133,.5);}

/* recursos agrupados */
.grp{margin-bottom:var(--s-blk);}
.grp:last-child{margin-bottom:0;}
.grp .gh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.grp .gh h3{font-size:14.5px;text-transform:uppercase;letter-spacing:.06em;}
.grp .gh span{font-size:14px;color:var(--dim);}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:860px){.features{grid-template-columns:repeat(2,1fr);}}
@media(max-width:540px){.features{grid-template-columns:1fr;}}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-card);transition:transform .16s,box-shadow .16s,border-color .16s;}
.feat:hover{border-color:#d3d9e6;box-shadow:var(--shadow-lift);transform:translateY(-3px);}
.feat .ic{width:42px;height:42px;border-radius:12px;background:linear-gradient(160deg,rgba(82,152,133,.13),rgba(74,143,147,.07));color:var(--brand);display:grid;place-items:center;margin-bottom:14px;}
.feat .ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
/* O DENTE VEM DO icon.svg, e o icon.svg tem viewBox de 512 — os outros ícones têm 24. Espessura
   de traço em SVG é medida NO SISTEMA DE COORDENADAS, não em pixels da tela: os mesmos 1,6 que
   desenham o calendário viram 0,07px no dente, e ele simplesmente desaparece do cartão.
   1,6 × (512 ÷ 24) ≈ 34 devolve a mesma espessura APARENTE dos vizinhos. */
.feat .ic svg.dente{stroke-width:34;}
.feat h4{font-size:15.5px;letter-spacing:-.01em;margin-bottom:6px;}
.feat p{color:var(--muted);font-size:14px;}

/* começando agora */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1080px;margin:0 auto;}
@media(max-width:800px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.steps{grid-template-columns:1fr;}}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-card);}
.step .n{width:30px;height:30px;border-radius:10px;background:var(--brand-ink);color:#fff;font-size:13.5px;font-weight:800;display:grid;place-items:center;margin-bottom:14px;box-shadow:0 8px 16px -10px rgba(20,26,38,.18);}
.step h4{font-size:15px;margin-bottom:6px;letter-spacing:-.01em;}
.step p{color:var(--muted);font-size:14px;}

/* evolução */
.evo{max-width:780px;margin:0 auto;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--radius);padding:28px 30px;background:var(--soft);}
.evo h3{font-size:16.5px;margin-bottom:10px;letter-spacing:-.01em;}
.evo p{color:var(--muted);font-size:15px;}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:860px;margin:0 auto;}
@media(max-width:720px){.plans{grid-template-columns:1fr;}}
.plan{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px 30px;position:relative;display:flex;flex-direction:column;box-shadow:var(--shadow-card);}
.plan.hi{border:1.5px solid var(--brand);box-shadow:0 2px 4px rgba(20,26,38,.04), 0 34px 64px -34px rgba(82,152,133,.5);}
.plan .badge{position:absolute;top:-12px;right:24px;background:var(--brand-ink);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.03em;padding:5px 12px;border-radius:999px;}
.plan .pname{font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-ink);}
.plan .desc{color:var(--muted);font-size:13.5px;margin:4px 0 18px;}
.plan .price{font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1;}
.plan .price small{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0;}
.plan .price .pre{font-size:14px;font-weight:700;color:var(--muted);display:block;margin-bottom:2px;letter-spacing:0;}
.plan .addon{font-size:13.5px;color:var(--muted);margin-top:10px;}
.plan .addon b{color:var(--ink);}
.plan ul{list-style:none;margin:20px 0 22px;display:flex;flex-direction:column;gap:11px;}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;}
.plan li svg{width:19px;height:19px;flex:none;stroke:var(--green);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px;}
.plan .btn{width:100%;justify-content:center;margin-top:auto;}
.plans-note{text-align:center;color:var(--dim);font-size:13.5px;margin-top:26px;max-width:60ch;margin-left:auto;margin-right:auto;}
.plans-note a{color:var(--brand-ink);font-weight:700;}   /* era `style=` no HTML, ver .legenda a */
/* PLANO ÚNICO. Desde que o sistema virou grátis existe um cartão só, e um cartão sozinho na
   grade de duas colunas fica encostado à esquerda com um buraco do lado — o mesmo defeito da
   grade de sete itens que já tinha sido corrigido nesta página. */
.plans.uma{grid-template-columns:1fr;max-width:560px;}
.sec-head.solto{margin-top:var(--s-head);}
/* OS ADICIONAIS. Cartão menor que o do plano, de propósito: a primeira coisa a ler é que o
   sistema é grátis; o que custa vem depois, e menor. */
.adicionais{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:860px;margin:0 auto;}
@media(max-width:720px){.adicionais{grid-template-columns:1fr;}}
.add{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow-card);}
.add h4{font-size:15.5px;margin:0;}
.add .val{font-size:25px;font-weight:800;letter-spacing:-.022em;line-height:1.1;margin:12px 0 1px;}
.add .val small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0;}
.add .un{font-size:13px;color:var(--muted);}
.add p{font-size:13.5px;color:var(--muted);margin-top:11px;line-height:1.55;}
/* "Em habilitação" não é enfeite: é o aviso de que aquele adicional ainda não funciona
   sozinho. Fica dentro do cartão, na cor de aviso, porque a alternativa é cobrar por algo
   que não sai — que é exatamente o que esta página acusa o concorrente de fazer. */
.add .tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:rgba(176,113,20,.14);color:#8a5a06;margin-left:8px;vertical-align:2px;}
.toggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px;margin:calc(var(--s-head) * -0.4) auto 30px;box-shadow:var(--shadow-card);}
.toggle .opt{border:none;background:none;font-family:inherit;font-weight:700;font-size:14px;color:var(--muted);padding:9px 18px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.15s;}
.toggle .opt.on{background:var(--brand-ink);color:#fff;}
.toggle .save{font-size:11px;font-weight:800;background:rgba(64,153,122,.16);color:var(--green);padding:2px 7px;border-radius:999px;}
.toggle .opt.on .save{background:rgba(255,255,255,.22);color:#fff;}

/* faq */
.faq{max-width:780px;margin:0 auto;}
.faq details{border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:12px;background:#fff;box-shadow:var(--shadow-card);}
.faq details[open]{border-color:#d3d9e6;}
.faq summary{font-weight:700;font-size:15px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;letter-spacing:-.01em;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--brand);font-weight:800;font-size:19px;line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq p{color:var(--muted);font-size:14.5px;margin-top:12px;}

/* closing
   A mesma foto do herói, agora em SANGRIA e sob um véu escuro. Aqui ela pode aparecer
   inteira: não há texto escuro para proteger — o texto é branco, e quanto mais escuro o
   fundo, melhor ele fica. É o oposto do problema do herói, e por isso o tratamento é
   oposto. Fecha a página com peso, em vez de terminar num retângulo verde chapado. */
.closing{position:relative;overflow:hidden;text-align:center;padding-top:0;}
/* A FOTO DO FECHO É POR PÁGINA, e não uma só no CSS. Estava fixa em `consultorio`, então
   bastava uma página usar o consultório no herói para a mesma fotografia aparecer duas vezes
   na mesma rolagem — aconteceu na home e em /documentos ao mesmo tempo, e passou despercebido
   justamente porque o CSS não tinha como saber qual era o herói de cada página.
   Cada página escolhe pela classe (`class="closing full bandeja"`), como a `.faixa` já fazia.
   O véu mora numa variável porque são seis modificadores usando o MESMO: repetido em seis
   lugares, a próxima calibragem de contraste teria seis lugares para errar. */
.closing::before{content:"";position:absolute;inset:-30% 0;z-index:0;pointer-events:none;
  --veu-fecho:linear-gradient(180deg, rgba(12,40,33,.84) 0%, rgba(16,53,44,.76) 45%, rgba(13,44,36,.79) 100%);
  background-color:#123f34;
  /* Sem classe de foto vale a mesa, que é a de luz mais neutra. Fallback, não escolha: o
     teste cobra que cada página declare a sua e que ela seja diferente da do herói. */
  background-image:var(--veu-fecho),
    image-set(url("/media/mesa-1920.webp") type("image/webp"), url("/media/mesa-1920.jpg") type("image/jpeg"));
  background-size:auto, cover;background-position:center, center 55%;background-repeat:no-repeat;}
.closing.consultorio::before{background-image:var(--veu-fecho),
  image-set(url("/media/consultorio-1920.webp") type("image/webp"), url("/media/consultorio-1920.jpg") type("image/jpeg"));}
.closing.recepcao::before{background-image:var(--veu-fecho),
  image-set(url("/media/recepcao-1920.webp") type("image/webp"), url("/media/recepcao-1920.jpg") type("image/jpeg"));}
.closing.mesa::before{background-image:var(--veu-fecho),
  image-set(url("/media/mesa-1920.webp") type("image/webp"), url("/media/mesa-1920.jpg") type("image/jpeg"));}
.closing.bandeja::before{background-image:var(--veu-fecho),
  image-set(url("/media/bandeja-1920.webp") type("image/webp"), url("/media/bandeja-1920.jpg") type("image/jpeg"));}
.closing.armario::before{background-image:var(--veu-fecho),
  image-set(url("/media/armario-1920.webp") type("image/webp"), url("/media/armario-1920.jpg") type("image/jpeg"));}
.closing.maos::before{background-image:var(--veu-fecho),
  image-set(url("/media/maos-1920.webp") type("image/webp"), url("/media/maos-1920.jpg") type("image/jpeg"));}
.closing > .wrap{position:relative;z-index:1;}
/* A caixa deixa de ser um bloco verde e vira só o conteúdo: o fundo já é a cor da marca. */
.closing .box{background:transparent;color:#fff;border-radius:24px;padding:60px 30px;box-shadow:none;}
.closing h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.025em;}
.closing p{opacity:.92;margin:12px auto 28px;max-width:48ch;}
.closing .btn.primary{background:#fff;color:var(--brand-ink);box-shadow:none;}
.closing .btn.primary:hover{filter:none;background:#f3f6ff;}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0;color:var(--muted);font-size:13.5px;}
/* RENOMEADO de `.foot` para `.rodape`: o mesmo nome servia ao rodapé da página E à nota de
   pé da tabela de custo (`.calc .foot`). O `display:flex` daqui vazava para lá, e dentro de
   um flex cada trecho de texto e cada <b> viram ITENS separados — era isso que jogava
   "três vezes mais" sozinho numa linha, com 16px de gap em volta. `.calc .foot` não declara
   `display`, então herdava o flex sem nada no código sugerindo a ligação. */
.rodape{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.rodape .links{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap;}
.rodape a:hover{color:var(--ink);}

/* ---------- PÁGINAS DE PROFUNDIDADE ----------
   Geradas por scripts/gerar-paginas.js. O herói delas é só texto (o print vem logo abaixo,
   em tamanho grande), então não usa as duas colunas da home. */
.hero.pagina{display:block;text-align:left;max-width:760px;margin-inline:auto;padding-top:64px;padding-bottom:56px;}
.hero.pagina h1{margin-left:0;max-width:16ch;}
.hero.pagina .lead{margin-left:0;}
.hero.pagina .cta{justify-content:flex-start;}
@media(max-width:820px){.hero.pagina{padding-top:44px;padding-bottom:40px;}}

/* O item da página em que se está fica marcado — sem isso a navegação não diz onde você está. */
.nav .links a.tx.aqui{color:var(--brand-ink);font-weight:800;}

/* O print em tamanho grande é a peça principal destas páginas. */
.janela.tela{max-width:1160px;margin:0 auto;}
.janela.tela img{display:block;width:100%;height:auto;}

/* ---------- MOSTRA: a tela ao lado da afirmação ----------
   Medi o site do concorrente: 135 ícones e um print do produto para CADA recurso. A nossa
   página tinha 36 ícones e DUAS imagens na página inteira — enquanto onze prints reais,
   capturados da clínica de demonstração, dormiam em public/prints sem aparecer em lugar
   nenhum. O que passa credibilidade não é foto bonita: é o produto funcionando, repetido.
   Aqui a afirmação fica de um lado e a tela que a prova do outro, alternando o lado a cada
   bloco para a página não virar uma coluna só. */
.mostra{display:grid;gap:26px;align-items:center;margin-top:var(--s-blk);}
@media(min-width:900px){
  .mostra{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:46px;}
  /* `order` só no desktop: no celular o texto TEM que vir antes da imagem, senão a pessoa
     recebe um print sem saber do que ele é. */
  .mostra.inverte > .mostra-txt{order:2;}
}
.mostra-txt h3{font-size:19px;letter-spacing:-.018em;margin-bottom:10px;}
.mostra-txt p{color:var(--muted);font-size:15px;}
/* font-size repetido de propósito: `.mostra-txt p` (0,1,1) vence `.legenda` (0,1,0) na
   especificidade, e sem isto a legenda sai em 15px, do mesmo tamanho do texto — deixando
   de parecer legenda. */
.mostra-txt .legenda{text-align:left;margin:12px 0 0;max-width:none;font-size:12.5px;}
.janela.print img{display:block;width:100%;height:auto;}
/* --muted e não --dim: mesma conta da .note. Em 12,5px o --dim dá 3,0 de contraste sobre o
   branco, e agora a legenda aparece em seis lugares — multiplicar um texto ilegível por seis
   é pior do que tê-lo uma vez. */
.legenda{text-align:center;color:var(--muted);font-size:12.5px;margin:14px auto 0;max-width:60ch;}
/* Também saiu de `style=` no HTML. Aqui a cor funcionava (fundo claro), mas era a mesma
   armadilha do link do herói: inline nenhum seletor alcança, então o dia em que a seção
   virasse escura a cor ficaria presa. */
/* EM LINHA PRÓPRIA. A legenda é centralizada e tem 60ch: o link entrava no meio da frase e
   quebrava onde calhava — "Ver" ficava no fim de uma linha e "como a conta é feita" na
   seguinte, o que faz o olho ler a legenda e o chamado como uma coisa só, e mal. */
.legenda a{display:block;margin-top:5px;color:var(--brand-ink);font-weight:700;}

/* ---------- FAIXA: a fotografia em sangria, com uma frase por cima ----------
   A página tinha 6 imagens em 12.800px, TODAS print de tela, e da metade para baixo
   (preços, perguntas, acesso) nenhuma. O efeito não é "faltou enfeite": é que a pessoa lê
   três telas de argumento seguidas sem nenhum lugar para descansar o olho, e cansaço de
   leitura parece produto pobre.

   A faixa não acrescenta texto — ela ABRE espaço. Foto do consultório de ponta a ponta,
   véu escuro por cima e uma frase curta. O mesmo tratamento do fecho da página, agora
   usado como pontuação entre blocos densos. A cor do véu é a da marca escurecida, para a
   faixa pertencer à página e não parecer banco de imagem colado. */
.faixa{position:relative;overflow:hidden;display:flex;align-items:center;text-align:center;
  color:#fff;padding:var(--s-sec) 0;min-height:clamp(320px,42vw,460px);}
.faixa::before{content:"";position:absolute;inset:-30% 0;z-index:0;pointer-events:none;
  background-color:#123f34;background-size:cover;background-position:center 58%;background-repeat:no-repeat;}
.faixa > .wrap{position:relative;z-index:1;}
.faixa .kick{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.82);font-weight:800;
  font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;}
.faixa .kick::before{content:"";width:22px;height:1.5px;background:rgba(255,255,255,.55);border-radius:2px;}
.faixa h2{font-size:clamp(24px,3.5vw,36px);letter-spacing:-.026em;line-height:1.14;margin:14px auto 0;max-width:20ch;}
.faixa p{color:rgba(255,255,255,.9);font-size:16.5px;margin:14px auto 0;max-width:56ch;}
/* Gradiente forte de propósito: o texto é branco e a foto tem janela estourada no canto.
   Medido com o texto por cima — abaixo de 0,72 de opacidade a frase some no vidro. */
.faixa.maos::before{background-image:
    linear-gradient(180deg, rgba(11,37,31,.80) 0%, rgba(13,45,37,.74) 50%, rgba(11,37,31,.78) 100%),
    image-set(url("/media/maos-1920.webp") type("image/webp"), url("/media/maos-1920.jpg") type("image/jpeg"));}
.faixa.recepcao::before{background-image:
    linear-gradient(180deg, rgba(11,37,31,.79) 0%, rgba(13,45,37,.72) 50%, rgba(11,37,31,.77) 100%),
    image-set(url("/media/recepcao-1920.webp") type("image/webp"), url("/media/recepcao-1920.jpg") type("image/jpeg"));}
.faixa.consultorio::before{background-image:
    linear-gradient(180deg, rgba(11,37,31,.82) 0%, rgba(13,45,37,.74) 50%, rgba(11,37,31,.88) 100%),
    image-set(url("/media/consultorio-1920.webp") type("image/webp"), url("/media/consultorio-1920.jpg") type("image/jpeg"));}
.faixa.mesa::before{background-image:
    linear-gradient(180deg, rgba(11,37,31,.79) 0%, rgba(13,45,37,.72) 50%, rgba(11,37,31,.77) 100%),
    image-set(url("/media/mesa-1920.webp") type("image/webp"), url("/media/mesa-1920.jpg") type("image/jpeg"));}
@media(max-width:820px){
  .faixa.maos::before{background-image:
      linear-gradient(180deg, rgba(11,37,31,.80) 0%, rgba(13,45,37,.74) 50%, rgba(11,37,31,.78) 100%),
      url("/media/maos-1200.webp");}
  .faixa.recepcao::before{background-image:
      linear-gradient(180deg, rgba(11,37,31,.79) 0%, rgba(13,45,37,.72) 50%, rgba(11,37,31,.77) 100%),
      url("/media/recepcao-1200.webp");}
}
/* Sem foto para quem pediu contraste alto: a cor chapada da marca já passa AAA. */
@media(prefers-contrast:more){ .faixa::before{background-image:none !important;background-color:#0d2d25;} }

/* A fotografia dentro do bloco de duas colunas, no lugar da janela de print. Mesma grade
   da `.mostra` — o que muda é só a moldura, porque foto não precisa de barra de janela. */
.foto{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-card);}
.foto img{display:block;width:100%;height:auto;}

/* ---------- NÚMEROS: fatos, não métricas de vaidade ----------
   Nada de "500 clínicas confiam" — temos uma usuária real e inventar número é o começo do
   fim. Os quatro números aqui são verificáveis: vêm da lei e do próprio produto. */
/* Faixa de prova: encosta no herói, então respira menos que uma seção inteira. */
.prova{padding-top:46px;padding-bottom:46px;border-top:none;}
.numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1120px;margin:0 auto;}
@media(max-width:860px){.numeros{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.numeros{grid-template-columns:1fr;}}
.numeros .num{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;box-shadow:var(--shadow-card);}
.numeros .num b{display:block;font-size:clamp(26px,3.6vw,36px);letter-spacing:-.03em;line-height:1;color:var(--brand-ink);font-variant-numeric:tabular-nums;}
.numeros .num span{display:block;font-size:14.5px;font-weight:700;margin-top:10px;letter-spacing:-.01em;}
.numeros .num small{display:block;color:var(--muted);font-size:13px;margin-top:5px;line-height:1.5;}
/* O link entra em linha própria: dentro do parágrafo ele quebra no meio da frase, e este
   texto tem 13px numa coluna de um quarto de tela, onde sobra pouca linha para escolher. */
.numeros .num small a{display:block;margin-top:7px;color:var(--brand-ink);font-weight:700;}

/* ---------- ARTIGO ----------
   Texto longo é o único lugar da página em que a MEDIDA DA LINHA manda mais que qualquer
   outra coisa: acima de ~70 caracteres o olho perde a linha de volta. O resto (peso do
   título, respiro entre blocos) existe para dar ao leitor pontos de parada — texto corrido
   de 1.500 palavras sem eles é abandonado no terceiro parágrafo. */
/* CORPO EM 19px, e não 16,5.
   A coluna parecia fina, e parecia com razão: 68 caracteres em corpo 16,5 dão ~565px, que
   dentro de um contêiner de 1280 viram uma tira no meio de muito branco. O erro não era a
   MEDIDA — 68 caracteres é onde se lê melhor —, era o TAMANHO da letra: 16,5px é corpo de
   interface, não de texto longo. Publicação séria de leitura usa 19–21px.
   Subindo a letra, a mesma medida de 68 caracteres passa a ocupar ~650px: a coluna cresce
   quase 100px, a leitura melhora, e o número de caracteres por linha — que é o que decide
   se o olho acha a linha de volta — não muda. Aumentar a largura sem aumentar a letra teria
   resolvido a aparência e piorado a leitura. */
.artigo{max-width:68ch;margin:0 auto;font-size:19px;line-height:1.72;color:var(--ink);}
.artigo p{margin-bottom:22px;color:#2a3342;}
.artigo h2{font-size:clamp(22px,2.9vw,28px);letter-spacing:-.02em;line-height:1.22;margin:44px 0 16px;}
.artigo h2:first-child{margin-top:0;}
.artigo b{font-weight:700;color:var(--ink);}
.artigo ul{margin:0 0 20px;padding-left:0;list-style:none;}
.artigo li{position:relative;padding-left:24px;margin-bottom:13px;color:#2a3342;}
.artigo li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:2px;background:var(--brand);opacity:.55;}
/* O quadro é para a conta que a pessoa vai querer reler — separa do corrido sem virar box. */
.artigo .destaque{border-left:3px solid var(--brand);background:var(--soft);border-radius:0 12px 12px 0;
  padding:20px 24px;margin:0 0 26px;font-size:17.5px;line-height:1.66;}
/* LINK DENTRO DO TEXTO DO ARTIGO. Não havia regra nenhuma, então o `<a>` herdava a cor do
   parágrafo: mesmo tom, sem sublinhado, peso normal — indistinguível do resto. O primeiro
   link interno de artigo (o que manda para o texto do prontuário) ficou invisível, e link que
   ninguém vê é link que não existe. Cor da marca MAIS sublinhado, porque cor sozinha exclui
   quem não distingue verde de cinza. */
.artigo p a,.artigo li a,.artigo .destaque a{color:var(--brand-ink);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;font-weight:600;}
.artigo p a:hover,.artigo li a:hover,.artigo .destaque a:hover{text-decoration-thickness:2px;}
.artigo .tabela-rol{overflow-x:auto;margin:0 0 24px;-webkit-overflow-scrolling:touch;}
.artigo table{width:100%;border-collapse:collapse;font-size:16px;min-width:460px;}
.artigo th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);
  padding:0 12px 9px 0;border-bottom:1px solid var(--line);font-weight:800;}
.artigo th:not(:first-child),.artigo td.num{text-align:right;}
/* Tabela de TEXTO (`texto: true` no bloco): tudo à esquerda. O alinhamento à direita existe
   para casar as casas decimais de uma coluna de valores; numa coluna de prosa ele faz cada
   linha começar num ponto diferente. E a coluna do meio ganha o espaço, porque é a que tem
   frase — sem isto a última coluna, com "Art. 88", fica larga e o texto espremido. */
.artigo table.txt th,.artigo table.txt td{text-align:left;}
.artigo table.txt td:last-child,.artigo table.txt th:last-child{white-space:nowrap;width:1%;}
.artigo td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);color:var(--muted);}
.artigo td.num{font-variant-numeric:tabular-nums;color:var(--ink);}
.artigo tr:last-child td{border-bottom:none;}
.artigo .janela.tela{max-width:none;margin:6px 0 8px;}
.artigo .legenda{text-align:left;margin-left:0;margin-bottom:24px;}
/* O rodapé do texto diz o que ele NÃO é. Num site de saúde isso não é rodapé jurídico de
   praxe: é a fronteira que mantém o conteúdo fora do alcance do Código de Ética — quem
   assina é a empresa, e o assunto é gestão. */
.artigo .nota-fim{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);
  font-size:14.5px;line-height:1.6;color:var(--dim);}
/* Assinatura do artigo, no herói: quem escreveu, quando, quanto tempo leva. */
.assinatura{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:13.5px;color:var(--muted);}
.assinatura b{color:var(--ink);}
.assinatura span + span{position:relative;padding-left:18px;}
.assinatura span + span::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;border-radius:999px;background:var(--dim);transform:translateY(-50%);}

/* Índice dos artigos. */
.lista-art{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;max-width:1120px;margin:0 auto;}
.cartao-art{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-card);transition:transform .16s,box-shadow .16s,border-color .16s;}
.cartao-art:hover{border-color:#d3d9e6;box-shadow:var(--shadow-lift);transform:translateY(-3px);}
.cartao-art .kick{color:var(--brand);font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;}
.cartao-art h3{font-size:18px;letter-spacing:-.018em;line-height:1.25;}
.cartao-art p{color:var(--muted);font-size:14.5px;}
.cartao-art .meta{margin-top:auto;padding-top:10px;color:var(--dim);font-size:12.5px;}

/* Três colunas de recurso, sem o agrupamento por peso que a home usa. */
.features.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1160px;margin:0 auto;}
.features.tres .feat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow-card);}
.features.tres .feat h4{font-size:15.5px;letter-spacing:-.01em;margin-bottom:7px;}
.features.tres .feat p{color:var(--muted);font-size:14px;line-height:1.55;}
@media(max-width:900px){.features.tres{grid-template-columns:1fr;max-width:460px;}}