/* Meditrina — landing v3. Tokens em brand/tokens.md; identidade em brand/kit/BRAND.md.
   Tipografia: General Sans (display) + Instrument Sans (corpo/UI) — self-hosted, mesma
   dupla do saude.dev (ITF/Fontshare + SIL OFL, ambas livres para self-host). IBM Plex Mono
   fica só para dado numérico (stat row, eixos de gráfico, citação de fonte, código curto
   tipo V1/M1) — nunca mais como texto corrido de kicker/label. */

@font-face{
  font-family:"General Sans"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/GeneralSans-500.woff2") format("woff2");
}
@font-face{
  font-family:"General Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/GeneralSans-600.woff2") format("woff2");
}
@font-face{
  font-family:"General Sans"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/GeneralSans-700.woff2") format("woff2");
}
@font-face{
  font-family:"Instrument Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/InstrumentSans-400.woff2") format("woff2");
}
@font-face{
  font-family:"Instrument Sans"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/InstrumentSans-500.woff2") format("woff2");
}
@font-face{
  font-family:"Instrument Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/InstrumentSans-600.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
}

:root{
  --ink:#0B1F2E; --teal:#0F8B80; --steel:#2E5E7E; --amber:#C98624;
  --mist:#D5DEE4; --paper:#F5F8F8;
  /* variantes de contraste — teal/amber puros não passam AA como texto pequeno ou fundo sólido;
     estas variantes existem só para isso (ver brand/kit/BRAND.md §3). */
  --amber-ink:#8A5A12;
  --teal-ink:#0B6259;
  --teal-deep:#0B6E64;
  --teal-light:#2FC2B3;
  --text-dim:#9DB4C0;
  --text-dim-2:#5C6E7A;
  --text-faint:#7E97A5;          /* texto terciário/legal sobre ink (5.5:1) */
  --rule:rgba(157,180,192,.18);
  --rule-dark:rgba(11,31,46,.12);
  --space:clamp(56px,9vw,104px);
  --measure:66ch;
  --font-display:"General Sans",-apple-system,"Segoe UI",Arial,sans-serif;
  --font-sans:"Instrument Sans",-apple-system,"Segoe UI",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  /* radius — escala nomeada (informada por M3), aplicada aos 6 tokens de marca fixos */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:20px; --r-full:999px;

  /* sombra — só em hover (repouso fica só com borda); dupla contato+ambiente como M3 */
  --shadow-ink: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  --shadow-paper: 0 1px 2px rgba(11,31,46,.15), 0 8px 20px rgba(11,31,46,.1);

  /* motion — escala curto (estado) / médio (espacial) / longo (draw-in, fade de fundo), M3 */
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-emphasized: cubic-bezier(.05,.7,.1,1);
  --dur-short: 180ms;
  --dur-medium: 420ms;
  --dur-long: 900ms;
}

*{box-sizing:border-box; margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:auto}
body{
  font-family:var(--font-sans); color:var(--paper); background:var(--ink);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
h1,h2,h3{font-family:var(--font-display); font-weight:600; line-height:1.15; letter-spacing:-.01em}
a{color:inherit}
ul,ol{padding:0; list-style:none}
table{border-collapse:collapse; width:100%}
p{line-height:1.6}

.skip-link{
  position:absolute; left:12px; top:-48px; z-index:200; padding:10px 16px;
  background:var(--paper); color:var(--ink); text-decoration:none; font-weight:600;
  border-radius:var(--r-xs); transition:top var(--dur-short) var(--ease-standard);
}
.skip-link:focus{top:12px}

:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
section :focus-visible{outline-color:var(--teal)}

.container{max-width:1120px; margin-inline:auto; padding-inline:24px}
/* Largura variável — quebra o "todo mundo tem 1120px" mecânico. O espelho e o Ciclo têm
   diagrama/gráfico como herói visual e ganham respiro; FAQ é leitura de pergunta-resposta,
   fica mais estreito para não esticar linhas. */
.container--wide{max-width:1320px}
.container--narrow{max-width:720px}

/* isolation:isolate é essencial aqui: sem ele, section (position:relative, z-index:auto) não cria
   stacking context próprio, e todo ::before/::after com z-index:-1 (ruído, vinheta, fade de
   transição) é pintado ATRÁS do background opaco da própria seção — invisível. Com isolation,
   o background da seção vira a base do seu stacking context e o z-index:-1 fica acima dele. */
section{padding-block:calc(var(--space) * var(--space-mult,1)); scroll-margin-top:76px; position:relative; isolation:isolate}
/* Ritmo vertical variável — seções "pico" respiram mais, seções de apoio/consulta ficam mais
   compactas, em vez de um --space idêntico em toda seção. */
.zn-peak{--space-mult:1.3}
.zn-support{--space-mult:.8}
.on-paper{background:var(--paper); color:var(--ink)}

/* === Sistema de fundo — 5 zonas, todas derivadas dos 6 tokens fixos, nenhuma cor nova.
   Zona 1 · ink puro (Hero) — sem grid, sem ruído, mais limpo, assinatura própria.
   Zona 2 · ink + vinheta radial (seções de prova/densidade) — grid padrão + um brilho radial
            de baixa opacidade cuja cor/posição varia por seção via --vin-cor/--vin-x/--vin-y.
   Zona 3 · paper + grid mist (maioria das seções claras) — mesma técnica de grid das escuras,
            agora também nas claras, resolvendo "seções claras são só branco chapado".
   Zona 4 · paper puro (Módulos, FAQ) — deliberadamente limpo, contraste de ritmo.
   Zona 5 · ink profundo (CTA final) — grid mais denso + vinheta mais forte, fecha com peso. === */

/* Grid + ruído — base das seções escuras (zonas 1/2/5 partem daqui; a zona 1/Hero remove o
   grid explicitamente, ver .hero mais abaixo). */
section:not(.on-paper){
  background-color:var(--ink);
  background-image:
    linear-gradient(color-mix(in srgb, var(--teal) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--teal) 6%, transparent) 1px, transparent 1px);
  background-size:40px 40px;
}
section:not(.on-paper)::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Fade sutil do fundo ao entrar em viewport — puro enriquecimento decorativo (::after nunca
   carrega conteúdo/texto), acompanha o mesmo IntersectionObserver que já revela o conteúdo,
   mas observando a section inteira. Só ativa com JS confirmado (classe "js") e sem preferência
   de movimento reduzido — mesmo padrão do resto do motion do site. */
/* Só opacidade — agora que o isolation acima faz esse ::after realmente aparecer, um
   translateY aqui leria como uma faixa deslizando por cima do fundo (artefato), não como
   entrada suave. */
@media (prefers-reduced-motion:no-preference){
  html.js section::after{opacity:0; transition:opacity var(--dur-long) var(--ease-emphasized)}
  html.js section.bg-in::after{opacity:1}
}

/* Zona 3 — paper + grid mist. Mesma técnica das seções escuras, com --mist no lugar de --teal. */
.on-paper.zn-mist{
  background-image:
    linear-gradient(color-mix(in srgb, var(--mist) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--mist) 55%, transparent) 1px, transparent 1px);
  background-size:40px 40px;
}
/* Zona 4 — paper puro: .on-paper sozinho, sem .zn-mist, já é o suficiente (nenhuma regra extra). */

/* Zona 2 — ink + vinheta radial. Brilho pintado num ::after dedicado (o ::before já é o ruído).
   Cor/posição por seção via custom properties, definidas inline ou por seletor específico. */
.zn-vinheta::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to bottom, var(--top-fade,transparent), transparent 64px),
    radial-gradient(640px circle at var(--vin-x,20%) var(--vin-y,0%), color-mix(in srgb, var(--vin-cor,var(--teal)) 9%, transparent), transparent 70%);
}
/* Pilares tem tratamento próprio (três pontos, ecoando os três pilares) em vez de um vinheta
   único — ver seletor .pilares-zona mais abaixo, junto ao bloco de Pilares. */

/* === Zonas de transição — cada section desvanece a cor da seção ANTERIOR nos primeiros ~90px,
   suavizando o corte reto que hoje faz toda troca de seção parecer o mesmo evento. Duas
   variantes (chegando de zona escura / chegando de zona clara), aplicadas via classe conforme
   o que vem antes de cada seção. Sections com ::after próprio (.zn-vinheta, .pilares-zona,
   .cta-final) incluem esta camada junto às suas — só um ::after por elemento. */
/* 30%/20%, não 60%/45% — a versão anterior lia como uma névoa pesada tomando boa parte da
   seção, não como transição sutil (achado direto do usuário olhando no notebook). */
.zn-top-ink{--top-fade:color-mix(in srgb, var(--ink) 30%, transparent)}
.zn-top-paper{--top-fade:color-mix(in srgb, var(--paper) 20%, transparent)}
section:not(.zn-vinheta):not(.pilares-zona):not(.cta-final)::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(to bottom, var(--top-fade,transparent), transparent 64px);
}

/* Selo de transição — quando duas seções seguidas caem na MESMA zona de fundo, o fade acima
   não tem o que desvanecer (a cor de chegada é igual à de saída) e a troca de tópico some.
   Este selo marca o fim de um tópico dentro do próprio fundo: hairline partida ao meio pela
   trina em miniatura. Colocado como último elemento do .container da seção que fecha o par. */
.divisor{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:24px}
/* Encolhe só o padding do lado que toca o .divisor (não o --space-mult inteiro, que também
   define o padding do lado oposto da seção) — o vazio de até ~280px (padding cheio dos dois
   lados + margem do selo) lia como buraco, não como pausa editorial. */
.zn-fecho{padding-bottom:calc(var(--space) * .4)}
.zn-abre{padding-top:calc(var(--space) * .4)}
.divisor::before, .divisor::after{content:""; flex:1; height:1px; background:var(--rule)}
.on-paper .divisor::before, .on-paper .divisor::after{background:var(--rule-dark)}
.divisor-marca{display:flex; gap:6px; flex-shrink:0}
.divisor-marca span{width:5px; height:5px; border-radius:50%}
.divisor-marca span:nth-child(1){background:var(--teal)}
.divisor-marca span:nth-child(2){background:var(--steel)}
.divisor-marca span:nth-child(3){background:var(--amber)}

/* Label — kicker/eyebrow/rótulo pequeno: Instrument Sans, uppercase, tracking positivo
   (padrão M3 "label" + saude.dev eyebrow). Nunca mono — mono fica só para dado numérico. */
.kicker{
  font-family:var(--font-sans); font-weight:600; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-dim);
}
.on-paper .kicker{color:var(--text-dim-2)}

h2{font-size:clamp(24px,3.2vw,34px); margin-bottom:12px; font-weight:600}
.section-head{max-width:var(--measure); margin-bottom:44px}
.section-lede{font-size:clamp(16px,1.8vw,18px); color:var(--text-dim); margin-top:10px}
.on-paper .section-lede{color:var(--text-dim-2)}

/* Split-header: kicker+h2 numa coluna, lede na outra — quebra o padrão empilhado-centralizado.
   Grid de áreas nomeadas (não depende de ordem/contagem de filhos): kicker e h2 empilham na
   coluna esquerda, section-lede ocupa a coluna direita, alinhada à base do h2. */
@media (min-width:860px){
  .section-head.split{
    display:grid; grid-template-columns:1.1fr 1fr; grid-template-areas:"kicker lede" "h2 lede";
    column-gap:48px; row-gap:0; align-items:end; max-width:none;
  }
  .section-head.split .kicker{grid-area:kicker}
  .section-head.split h2{grid-area:h2; margin-bottom:0}
  .section-head.split .section-lede{grid-area:lede; margin-top:0; align-self:end}
}

/* Aberturas de seção alternativas — quebram deliberadamente o padrão kicker+h2+lede repetido
   em toda seção (achado da avaliação de "cara de IA" desta sessão). */

/* Número grande no lugar do kicker (O espelho) */
.section-head-numero{display:flex; flex-direction:column; gap:16px; margin-bottom:44px; max-width:none}
@media (min-width:640px){ .section-head-numero{flex-direction:row; align-items:flex-end; gap:32px} }
.numero-grande{
  font-family:var(--font-display); font-weight:700; font-size:clamp(56px,9vw,104px); line-height:.9;
  color:var(--amber-ink); letter-spacing:-.02em; flex-shrink:0;
}
.section-head-numero h2{margin-bottom:6px}
.section-head-numero .section-lede{margin-top:0; max-width:44ch}

/* Título como frase corrida, sem kicker nem lede — entra direto no conteúdo (Vazamentos) */
.titulo-sentenca{
  font-size:clamp(22px,3vw,30px); font-weight:500; max-width:34ch; margin-bottom:36px;
  letter-spacing:-.005em;
}

/* Título solto, sem kicker acima (Pilares) — um pouco maior para preencher a hierarquia */
.titulo-solto{font-size:clamp(28px,3.8vw,40px)}

/* === Reveal on scroll ===
   Progressive enhancement real: o conteúdo só fica oculto (opacity:0) quando <html> tem a
   classe "js" — aplicada por um <script> síncrono no <head>, antes do primeiro paint. Sem
   JS (bloqueado, desabilitado, erro), <html> nunca ganha "js" e todo .reveal permanece
   visível por padrão — nenhuma seção do site depende de JS para ser lida. */
.reveal{opacity:1; transform:none}
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0; transform:translateY(16px); transition:opacity var(--dur-medium) var(--ease-emphasized), transform var(--dur-medium) var(--ease-emphasized)}
  html.js .reveal.is-visible{opacity:1; transform:none}
  /* Reveal escalonado — cada item de grid herda um --delay (definido inline por item via nth-child
     no HTML/JS) aplicado como transition-delay, para os cards entrarem em sequência, não juntos. */
  .stagger > *{transition-delay:var(--delay,0s)}
}

/* === Nav sticky === */
.nav{
  position:sticky; top:0; z-index:100; background:rgba(11,31,46,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.nav::after{
  content:""; position:absolute; left:50%; bottom:-1px; width:min(60%,720px); height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--teal-light) 55%, transparent), transparent);
}
.nav .container{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px}
.nav-brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.nav-brand svg{height:26px; width:auto}
.nav-brand .word{font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-.02em; color:var(--paper)}
.nav-links{display:none; gap:24px; font-size:14px}
.nav-links a{text-decoration:none; color:var(--text-dim); padding-block:8px; display:inline-flex; align-items:center; transition:color var(--dur-short) var(--ease-standard)}
.nav-links a:hover{color:var(--paper)}
@media (min-width:860px){ .nav-links{display:flex} }
.nav .btn{padding:9px 16px; font-size:13.5px}
.nav-right{display:flex; align-items:center; gap:10px}

/* CTA some da barra em telas muito estreitas — reaparece como primeiro item, destacado,
   dentro do painel do menu — nunca some da página, só muda de posição. */
@media (max-width:519px){ .nav-right .nav-cta{display:none} }

/* Menu mobile — <details>/<summary> nativo, sem depender de JS para abrir/fechar. */
.nav-mobile{position:static}
@media (min-width:860px){ .nav-mobile{display:none} }
.nav-mobile-toggle{
  list-style:none; display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:40px; height:40px; border-radius:var(--r-xs); cursor:pointer;
  transition:background var(--dur-short) var(--ease-standard);
}
.nav-mobile-toggle::-webkit-details-marker{display:none}
.nav-mobile-toggle:hover{background:rgba(245,248,248,.08)}
.nav-mobile-toggle .bar{
  width:19px; height:2px; background:var(--paper); border-radius:1px;
  transition:transform var(--dur-short) var(--ease-standard), opacity var(--dur-short) var(--ease-standard);
}
.nav-mobile[open] .nav-mobile-toggle .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-mobile[open] .nav-mobile-toggle .bar:nth-child(2){opacity:0}
.nav-mobile[open] .nav-mobile-toggle .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile-panel{
  position:absolute; top:100%; left:0; width:100%; display:none; flex-direction:column; gap:2px;
  padding:12px 24px 20px; background:rgba(11,31,46,.98); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule); box-shadow:0 12px 24px rgba(0,0,0,.25); box-sizing:border-box;
}
/* Sem isto, o painel ficaria sempre presente no DOM (display:flex incondicional) — visível e
   focável mesmo com o <details> fechado, quebrando tanto o "some quando fechado" nativo quanto
   o cálculo de alvos de toque. Só mostra quando o <details> está de fato aberto. */
.nav-mobile[open] .nav-mobile-panel{display:flex}
.nav-mobile-panel a{
  text-decoration:none; color:var(--text-dim); padding:12px 4px; font-size:15px;
  border-top:1px solid var(--rule-dark);
}
.nav-mobile-panel a:first-child{border-top:none}
.nav-mobile-panel a:hover{color:var(--paper)}
.nav-mobile-cta{
  color:var(--paper) !important; font-weight:600; background:var(--teal-deep); border-radius:var(--r-xs);
  text-align:center; padding-block:12px !important; margin-bottom:8px;
}

/* === Pill — componente único de status/etiqueta, reutilizado em: badge do hero,
   badges do mockup (ok/warn/alert) e tag de módulo futuro. Um pill, quatro tons. === */
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border:1px solid var(--rule);
  border-radius:var(--r-full); font-family:var(--font-sans); font-weight:500; font-size:13px;
  letter-spacing:0; color:var(--text-dim);
}
.pill .dot{width:7px; height:7px; border-radius:50%; background:var(--teal-light); flex-shrink:0}
@media (prefers-reduced-motion:no-preference){
  .pill .dot{animation:dot-pulse 2.6s ease-in-out infinite}
  @keyframes dot-pulse{0%,100%{opacity:1} 50%{opacity:.35}}
}

/* === Hero — assimétrico: texto à esquerda, gráfico real à direita === */
/* Zona 1 — Hero: ink puro, sem grid/ruído. É a primeira coisa que se vê; fica mais limpa e
   assinada, e cria contraste imediato com o grid que aparece a partir da seção seguinte. */
.hero{
  padding-block:calc(var(--space) * .8) var(--space); background:var(--ink);
  background-image:none;
}
.hero::before{display:none}
.hero .container{
  display:grid; grid-template-columns:1fr; gap:40px; align-items:center;
}
@media (min-width:960px){
  .hero .container{grid-template-columns:1fr .85fr; gap:56px}
}
.hero-copy{text-align:left}
.hero .pill{margin-bottom:22px}
.hero h1{
  font-family:var(--font-display); font-weight:600; font-size:clamp(32px,4.4vw,52px);
  max-width:16ch; letter-spacing:-.02em; line-height:1.12;
}
.categoria{
  font-family:var(--font-sans); font-weight:500; font-size:clamp(16px,1.9vw,19px); color:var(--paper);
  margin-top:18px; max-width:44ch; line-height:1.45;
}
.hero-cta{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-start}

.hero-chart{border:1px solid var(--rule); border-radius:var(--r-md); padding:20px; background:rgba(245,248,248,.03)}
.hero-chart .chart-legend{margin-bottom:10px}
.hero-chart-caption{font-size:12.5px; color:var(--text-dim); margin-top:12px}
/* Link inline em texto corrido sobre fundo escuro — mesmo tratamento usado em
   .equipe-ecossistema a, extraído aqui para reuso sem repetir a regra ou usar style="" */
.link-teal{color:var(--teal-light); text-decoration:underline; text-underline-offset:2px}
.on-paper .link-teal{color:var(--teal-ink)}
.hero .stat-row{grid-column:1 / -1}

.btn{
  display:inline-block; padding:12px 24px; font-family:var(--font-sans); font-weight:600;
  font-size:15px; text-decoration:none; border-radius:var(--r-xs); border:2px solid var(--teal);
  color:var(--paper); background:transparent; cursor:pointer;
  transition:background var(--dur-short) var(--ease-standard), transform var(--dur-short) var(--ease-standard), box-shadow var(--dur-short) var(--ease-standard);
}
.btn:hover{background:rgba(15,139,128,.18)}
.btn-primary{background:var(--teal-deep); border-color:var(--teal-deep); color:var(--paper)}
.btn-primary:hover{background:#09564f}
.on-paper .btn{border-color:var(--steel); color:var(--ink)}
.on-paper .btn:hover{background:rgba(46,94,126,.1)}
/* .btn-primary sempre mantém texto claro sobre o preenchimento sólido teal-deep, mesmo dentro de
   .on-paper — sem isto, ".on-paper .btn" (specificidade maior) sobrescreve para --ink, texto
   escuro sobre fundo escuro, 2.74:1, falha WCAG AA. Achado real durante a Rodada 6. */
.on-paper .btn.btn-primary{color:var(--paper)}

/* === Stat row (KPIs) === */
.stat-row{
  display:grid; grid-template-columns:1fr; gap:28px; margin-top:48px; width:100%;
  text-align:left;
}
@media (min-width:600px){ .stat-row{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){ .stat-row{grid-template-columns:repeat(4,1fr)} }
.stat{
  border:1px solid var(--rule); border-top:2px solid var(--teal-light); border-radius:var(--r-sm);
  padding:16px 18px 18px;
}
.stat .valor{font-family:var(--font-mono); font-weight:500; font-size:clamp(24px,3vw,30px); color:var(--paper); font-variant-numeric:tabular-nums}
.stat .rotulo{font-size:13px; color:var(--text-dim); margin-top:6px; line-height:1.4}
.stat .fonte{
  display:flex; align-items:flex-start; gap:6px; font-family:var(--font-sans); font-weight:500;
  font-size:11.5px; color:var(--text-faint); margin-top:12px; padding-top:10px;
  border-top:1px solid var(--rule); line-height:1.4;
}
.stat .fonte::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--teal-light); flex-shrink:0; margin-top:6px}

/* === Charts (dataviz) — specs: linhas 2px, marcadores ≥8px, texto sempre em token de texto,
   nunca na cor da série; legenda sempre presente com 2+ séries. Mono só em dado numérico
   (eixos/valores) — legendas e notas descritivas usam Instrument Sans. === */
.chart-card{border:1px solid var(--rule); border-radius:var(--r-md); padding:24px; background:rgba(245,248,248,.02)}
.on-paper .chart-card{border-color:var(--rule-dark); background:var(--paper)}
.chart-legend{display:flex; gap:20px; flex-wrap:wrap; font-family:var(--font-sans); font-weight:500; font-size:13px; margin-bottom:16px}
.chart-legend .item{display:flex; align-items:center; gap:8px; color:var(--text-dim)}
.on-paper .chart-legend .item{color:var(--text-dim-2)}
.chart-legend .swatch{width:16px; height:2px; border-radius:1px; flex-shrink:0}
.chart-legend .swatch.dashed{background-image:linear-gradient(90deg, currentColor 60%, transparent 0); background-size:6px 2px; background-color:transparent; height:2px}
.chart-note{font-size:12.5px; color:var(--text-dim); margin-top:14px; max-width:52ch}
.on-paper .chart-note{color:var(--text-dim-2)}
.chart-axis-label{font-family:var(--font-mono); font-size:11px; fill:var(--text-dim); font-variant-numeric:tabular-nums}
.on-paper .chart-axis-label{fill:var(--text-dim-2)}
/* Modificadores para o rótulo de valor destacado no fim de uma série — a regra de classe acima
   vence o atributo fill="" de apresentação no SVG, então a cor de destaque precisa ser classe. */
.chart-axis-label--amber{fill:var(--amber)}
.chart-axis-label--mist{fill:var(--mist)}

/* "O espelho" — uma única barra empilhada com a régua de R$ 100 atendidos, em vez de duas
   séries temporais + dois painéis "não comparáveis". Uma leitura, um número por segmento,
   sem exigir que o leitor entenda o que não pode ser comparado. */
.espelho-pergunta{font-family:var(--font-display); font-weight:600; font-size:17px; margin-bottom:20px; max-width:var(--measure)}
.espelho-bar{
  display:flex; width:100%; max-width:880px; height:40px; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--rule-dark);
}
.espelho-seg{width:var(--w); flex-shrink:0; transform:scaleX(1); transform-origin:left}
/* mist sobre paper dava 1,3:1 — praticamente invisível (84% da barra some). Cinza derivado do
   próprio --ink a 50% garante 3,3:1 (WCAG 1.4.11, objeto gráfico) sem introduzir cor nova. */
.espelho-seg--ok{background:color-mix(in srgb, var(--ink) 50%, var(--paper))}
.espelho-seg--recuperado{background:var(--steel)}
.espelho-seg--perdido{background:var(--amber)}
/* Draw-in é puro enriquecimento: a barra já nasce visível (regra acima); o JS só troca
   para o estado "oculto → anima" antes do primeiro paint quando IntersectionObserver
   existe, então quem não roda JS (ou tem prefers-reduced-motion) sempre vê a barra cheia. */
@media (prefers-reduced-motion:no-preference){
  .chart-card.js-draw .espelho-seg{transform:scaleX(0); transition:transform var(--dur-long) var(--ease-emphasized)}
  .chart-card.js-draw.is-drawn .espelho-seg{transform:scaleX(1)}
  .chart-card.js-draw .espelho-seg--recuperado{transition-delay:.15s}
  .chart-card.js-draw .espelho-seg--perdido{transition-delay:.3s}
}
.espelho-legenda{display:grid; grid-template-columns:1fr; gap:18px; margin-top:24px}
@media (min-width:640px){ .espelho-legenda{grid-template-columns:repeat(3,1fr)} }
.espelho-item{display:flex; gap:10px; align-items:flex-start}
.espelho-dot{width:12px; height:12px; border-radius:3px; flex-shrink:0; margin-top:4px}
.espelho-dot--ok{background:color-mix(in srgb, var(--ink) 50%, var(--paper))}
.espelho-dot--recuperado{background:var(--steel)}
.espelho-dot--perdido{background:var(--amber)}
.espelho-valor{font-family:var(--font-mono); font-weight:500; font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums}
.espelho-rotulo{font-size:13.5px; color:var(--text-dim-2); margin-top:2px; line-height:1.45}
/* === Fecho editorial — única classe de "frase de efeito" de fechamento de seção.
   Usada com moderação (2 seções) para não perder força pela repetição. === */
.fecho-editorial{
  font-family:var(--font-display); font-weight:600; font-size:clamp(19px,2.6vw,24px); color:var(--ink);
  margin-top:28px; max-width:32ch; letter-spacing:-.01em;
}
.fecho-editorial--onink{color:var(--paper)}
/* Variante menor — mesmo arquétipo do fecho principal (weight 600, display), tom mais discreto,
   para fechos secundários que hoje reusam .section-lede com style="" inline (Para quem, Como
   começamos, Oftalmologia). Herda a cor de texto do contexto (ink em paper, paper em ink). */
.fecho-editorial--sm{
  font-family:var(--font-display); font-weight:600; font-size:clamp(16px,1.7vw,18.5px);
  margin-top:24px; max-width:48ch; letter-spacing:-.005em;
}

/* === Vazamentos V1-V4 === */
/* Arquétipo "lista-régua" — hairline no lugar de caixa. Sem borda fechada, sem fundo próprio;
   o que separa cada item é só a linha superior, mais próximo de uma lista editorial do que de
   um grid de cards. */
.vazamentos-grid{display:grid; grid-template-columns:1fr; gap:24px}
@media (min-width:640px){ .vazamentos-grid{grid-template-columns:repeat(2,1fr); gap:28px 24px} }
@media (min-width:960px){ .vazamentos-grid{grid-template-columns:repeat(4,1fr)} }
.vazamento{
  border-top:2px solid var(--rule); padding-top:18px;
  transition:border-color var(--dur-short) var(--ease-standard);
}
.vazamento:hover{border-color:var(--amber)}
.vazamento .id{font-family:var(--font-mono); font-size:13px; color:var(--amber); letter-spacing:.02em}
.vazamento h3{font-family:var(--font-sans); font-weight:600; font-size:16px; margin:8px 0 10px}
.vazamento p{font-size:13.5px; color:var(--text-dim); line-height:1.5}

/* === Diagrama do ciclo TISS ===
   Animação de assinatura (inspirada no padrão "múltiplos destinos" do sinais.online):
   um pacote percorre a linha do início ao fim; halos nas 3 etapas de intervenção da
   Meditrina "acendem" no instante exato em que o pacote passa por elas — o delay de
   cada halo é a fração do percurso total (4s) até a posição x daquela etapa. 100% CSS,
   sem JS/lib. Beat inteiro, sem sincronia forçada com outras animações da página. */
.ciclo-wrap{overflow-x:auto; padding-bottom:8px}
.ciclo-svg{min-width:600px; max-width:900px; width:100%; margin-inline:auto}
.ciclo-etapa-label{font-family:var(--font-sans); font-size:11.5px; fill:var(--text-dim)}
.ciclo-etapa-num{font-family:var(--font-mono); font-size:12px; fill:var(--text-dim); font-variant-numeric:tabular-nums}
/* Seção é .on-paper mas as regras acima (fill:var(--text-dim)) são pensadas para fundo ink —
   sem este override, venciam os fill="" de apresentação no SVG (regra de classe > atributo) e
   todo texto do diagrama, incluindo os números dentro dos círculos coloridos, saía ~2:1 sobre
   paper. .on-paper .ciclo-etapa-num cobre os círculos sem preenchimento (contorno); os círculos
   preenchidos (etapas 2/6/7) usam os modificadores abaixo, que precisam da MESMA especificidade
   (duas classes) para vencer no empate por ordem de declaração. */
.on-paper .ciclo-etapa-label{fill:var(--text-dim-2)}
.on-paper .ciclo-etapa-num{fill:var(--text-dim-2)}
.ciclo-etapa-num.ciclo-etapa-num--onfill{fill:var(--paper)}
.ciclo-etapa-num.ciclo-etapa-num--onfill-ink{fill:var(--ink)}

.ciclo-pacote{transform:translateX(0); transform-box:fill-box; transform-origin:center}
.ciclo-halo{opacity:0; transform:scale(.6); transform-box:fill-box; transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .ciclo-pacote{animation:ciclo-pacote-flow 4s linear infinite}
  .ciclo-halo{animation:ciclo-halo-pop 4s ease-out infinite; animation-delay:var(--halo-delay,0s)}
  @keyframes ciclo-pacote-flow{
    0%{transform:translateX(0); opacity:0}
    3%{opacity:1}
    97%{opacity:1}
    100%{transform:translateX(798px); opacity:0}
  }
  @keyframes ciclo-halo-pop{
    0%,92%,100%{opacity:0; transform:scale(.6)}
    4%{opacity:.55; transform:scale(1.55)}
    14%{opacity:0; transform:scale(1.8)}
  }
}
@media (prefers-reduced-motion:reduce){
  /* congela no estado "entregue" — mesmo fallback do sinais.online */
  .ciclo-pacote{opacity:0}
  .ciclo-halo{opacity:.22; transform:scale(1.3)}
}

/* Pilares tem tratamento de fundo próprio (variante da zona 2): três brilhos radiais fracos,
   um por pilar (teal/steel/amber), em vez de um vinheta único — eco discreto da "trina". */
.pilares-zona::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to bottom, var(--top-fade,transparent), transparent 64px),
    radial-gradient(460px circle at 15% 0%, color-mix(in srgb, var(--teal) 7%, transparent), transparent 65%),
    radial-gradient(460px circle at 50% 100%, color-mix(in srgb, var(--steel) 7%, transparent), transparent 65%),
    radial-gradient(460px circle at 85% 0%, color-mix(in srgb, var(--amber) 7%, transparent), transparent 65%);
}

/* === Pilares — arquétipo "destaque editorial": sem borda fechada, só a linha de cor no topo
   identifica o pilar. Mais respiro (padding maior) no lugar de moldura. === */
.pilares-grid{display:grid; grid-template-columns:1fr; gap:28px}
@media (min-width:640px){ .pilares-grid{grid-template-columns:repeat(2,1fr); gap:24px} }
/* 3 colunas só a partir de 960px — igual .modulos-grid. Em 720-960 o .pilar (padding 36/28 +
   ícone + h3 + p + aha + mockup) é o card mais pesado da página; 3 colunas cedo espremia os
   .mockup-row a ponto de quebrar linha. */
@media (min-width:960px){ .pilares-grid{grid-template-columns:repeat(3,1fr)} }
.pilar{
  background:var(--paper); border-top:3px solid var(--pilar-cor,var(--teal));
  border-radius:var(--r-md); padding:36px 28px;
  transition:box-shadow var(--dur-short) var(--ease-standard), transform var(--dur-short) var(--ease-standard);
}
.pilar:hover{box-shadow:6px 6px 0 0 var(--pilar-cor-texto,var(--teal-ink)); transform:translateY(-2px)}
.pilar-previne{--pilar-cor:var(--teal); --pilar-cor-texto:var(--teal-ink)}
.pilar-concilia{--pilar-cor:var(--steel); --pilar-cor-texto:var(--steel)}
.pilar-recupera{--pilar-cor:var(--amber); --pilar-cor-texto:var(--amber-ink)}
.pilar-icon{width:28px; height:28px; color:var(--pilar-cor-texto); margin-bottom:14px; transition:transform var(--dur-short) var(--ease-standard)}
.pilar:hover .pilar-icon{transform:scale(1.1)}
.pilar-label{
  font-family:var(--font-sans); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pilar-cor-texto); margin-bottom:10px;
}
.pilar h3{font-family:var(--font-display); font-weight:600; font-size:23px; margin-bottom:10px; letter-spacing:-.01em}
.pilar p{color:var(--text-dim-2); font-size:15px; margin-bottom:14px}
.pilar-aha{
  font-size:13px; color:var(--text-dim-2); border-top:1px solid var(--rule-dark); padding-top:12px;
  font-style:italic;
}
.pilar-aha b{font-style:normal; font-family:var(--font-sans); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--pilar-cor-texto); display:block; margin-bottom:4px}

/* Mockups ilustrativos — reforçam em UI o que a citação da persona já descreve em texto. */
.mockup{margin-top:14px; border:1px solid var(--rule-dark); border-radius:var(--r-sm); padding:10px 12px; display:flex; flex-direction:column; gap:8px; background:var(--paper)}
.mockup-row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.mockup-nome{font-family:var(--font-mono); font-size:11px; color:var(--ink); font-weight:500}
/* Modificadores de .pill (definido junto ao badge do hero): tamanho pequeno + tons de status,
   reutilizados aqui e na tag "em breve" dos módulos — em vez de recriar o componente. */
.pill--sm{padding:3px 7px; font-size:9.5px; font-weight:600; letter-spacing:.01em; border:none; white-space:nowrap}
.pill--ok{background:rgba(15,139,128,.16); color:var(--teal-ink)}
.pill--warn{background:rgba(201,134,36,.18); color:var(--amber-ink)}
.pill--alert{background:rgba(46,94,126,.16); color:var(--steel)}
.pill--tag{
  padding:2px 8px; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim-2); border:1px solid var(--rule-dark); background:none;
}
.mockup-kpi{display:flex; align-items:center; gap:10px}
.mockup-kpi-label{font-family:var(--font-sans); font-size:10.5px; color:var(--text-dim-2); width:70px; flex-shrink:0}
.mockup-kpi-track{flex:1; height:7px; border-radius:4px; background:var(--rule-dark); overflow:hidden}
.mockup-kpi-fill{height:100%; background:var(--pilar-cor-texto,var(--teal-ink)); width:var(--w)}
.mockup-caption{margin-top:6px; font-size:10.5px; color:var(--text-dim-2); font-style:italic}

/* === Módulos M1-M6 === */
/* Lista-régua, igual Vazamentos — sem caixa, só hairline. */
.modulos-grid{display:grid; grid-template-columns:1fr; gap:28px}
@media (min-width:640px){ .modulos-grid{grid-template-columns:repeat(2,1fr); gap:32px 24px} }
@media (min-width:960px){ .modulos-grid{grid-template-columns:repeat(3,1fr)} }
.modulo{
  border-top:2px solid var(--rule-dark); padding-top:20px; display:flex; gap:16px;
  transition:border-color var(--dur-short) var(--ease-standard);
}
.modulo:hover{border-color:var(--teal-ink)}
.modulo-icon{width:26px; height:26px; color:var(--teal-ink); flex-shrink:0; transition:color var(--dur-short) var(--ease-standard)}
.modulo:hover .modulo-icon{color:var(--amber-ink)}
.modulo h3{font-family:var(--font-sans); font-weight:600; font-size:15px; margin-bottom:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.modulo p{font-size:13.5px; color:var(--text-dim-2); line-height:1.5; margin-top:4px}
/* border-top-style, não border-style — o shorthand ativa as outras 3 bordas (style:none→dashed)
   com largura/cor default do browser, criando uma caixa tracejada inteira não pretendida no
   arquétipo lista-régua (só border-top existe de propósito). */
.modulo.futuro{opacity:.72; border-top-style:dashed}
.modulo.futuro:hover{transform:none; box-shadow:none; border-color:var(--rule-dark)}

/* === Estimador === */
/* Mesmo padrão de layout de 2 colunas do .equipe-layout — head à esquerda, objeto único à
   direita, em vez do card sozinho encostado à esquerda com ~450px vazios ao lado num
   container de 1120px. */
@media (min-width:860px){
  .estimador-layout{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start}
}
.estimador-card{border:1px solid var(--rule); border-radius:var(--r-md); padding:32px 28px; max-width:640px}
.estimador-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px}
.estimador-row label{font-size:14px; font-weight:600}
.estimador-row .val{font-family:var(--font-mono); font-size:15px; color:var(--teal-light); font-variant-numeric:tabular-nums}
input[type="range"]{
  width:100%; appearance:none; height:24px; background:transparent; margin:0; font-size:16px;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:4px; background:var(--rule); border-radius:2px;
}
input[type="range"]::-webkit-slider-thumb{
  appearance:none; width:24px; height:24px; border-radius:50%; background:var(--teal-deep);
  border:2px solid var(--paper); cursor:pointer; margin-top:-10px;
}
input[type="range"]::-moz-range-track{
  height:4px; background:var(--rule); border-radius:2px;
}
input[type="range"]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:var(--teal-deep); border:2px solid var(--paper); cursor:pointer;
}
.estimador-resultado{margin-top:28px; padding-top:24px; border-top:1px solid var(--rule)}
.estimador-resultado .rotulo{font-family:var(--font-sans); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim)}
.estimador-resultado .faixa{font-family:var(--font-mono); font-weight:500; font-size:clamp(26px,3.6vw,34px); color:var(--paper); margin-top:8px; font-variant-numeric:tabular-nums}
.estimador-meter{height:8px; background:var(--rule); border-radius:4px; margin-top:14px; overflow:hidden}
.estimador-meter .fill{height:100%; background:var(--amber); border-radius:4px; transition:width var(--dur-short) var(--ease-standard)}
.estimador-disclaimer{font-size:12.5px; color:var(--text-dim); margin-top:16px; line-height:1.5}
.estimador-cta{margin-top:22px}

/* === Por que oftalmo / DF === */
.motivos-table{width:100%; min-width:640px; font-size:13.5px; margin-top:24px}
.motivos-table th{
  text-align:left; font-family:var(--font-sans); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim-2); padding:10px 12px; border-bottom:1px solid var(--rule-dark);
}
.motivos-table td{padding:12px; border-bottom:1px solid var(--rule-dark); color:var(--text-dim-2); vertical-align:top}
.motivos-table td:first-child{font-weight:600; color:var(--ink)}
.motivos-wrap{overflow-x:auto}
.aside-df{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--rule-dark);
}
.aside-df > .kicker{margin-bottom:4px}
.paradox-grid{display:grid; grid-template-columns:1fr; gap:24px; margin-top:32px}
@media (min-width:720px){ .paradox-grid{grid-template-columns:1fr 1fr} }
.paradox-card{border:1px solid var(--rule-dark); border-radius:var(--r-md); padding:20px}
.paradox-card h3{font-family:var(--font-sans); font-weight:600; font-size:14px; margin-bottom:14px; color:var(--ink)}
.bar-compare{display:flex; flex-direction:column; gap:14px}
.bar-row{display:grid; grid-template-columns:56px 1fr 56px; align-items:center; gap:10px}
.bar-label{font-family:var(--font-sans); font-weight:500; font-size:12px; color:var(--text-dim-2)}
.bar-track{height:14px; background:var(--rule-dark); border-radius:2px; overflow:hidden}
.bar-fill{height:100%; border-radius:2px}
.bar-value{font-family:var(--font-mono); font-weight:500; font-size:13px; text-align:right; color:var(--ink); font-variant-numeric:tabular-nums}


/* === Degraus === */
.degraus{counter-reset:degrau; display:grid; grid-template-columns:1fr; gap:24px}
@media (min-width:720px){ .degraus{grid-template-columns:repeat(3,1fr)} }
/* Régua conectando os 3 passos — border-top em cada .degrau, ecoando o mesmo motivo de "linha
   do processo" já usado no diagrama do Ciclo TISS, em vez de 3 parágrafos soltos sem sequência. */
.degrau{position:relative; padding-top:16px; border-top:2px solid var(--rule-dark)}
.degrau::before{
  counter-increment:degrau; content:counter(degrau,decimal-leading-zero);
  font-family:var(--font-mono); font-size:13px; color:var(--steel); letter-spacing:.02em;
  display:block; margin-bottom:10px; font-variant-numeric:tabular-nums;
}
.degrau h3{font-family:var(--font-sans); font-weight:600; font-size:17px; margin-bottom:6px}
.degrau p{color:var(--text-dim-2); font-size:15px}
.diagnostico-detalhe{
  margin-top:32px; padding:28px 30px; border:1px solid var(--rule-dark); border-radius:var(--r-md);
  background:var(--paper); max-width:760px;
}
.diagnostico-kicker{
  font-family:var(--font-sans); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal-ink); margin-bottom:14px;
}
.diagnostico-entregaveis{display:flex; flex-direction:column; gap:10px}
.diagnostico-entregaveis li{
  position:relative; padding-left:20px; font-size:14.5px; color:var(--text-dim-2); line-height:1.5;
}
.diagnostico-entregaveis li::before{content:"—"; position:absolute; left:0; color:var(--steel)}
.diagnostico-requer{margin-top:16px; padding-top:16px; border-top:1px solid var(--rule-dark); font-size:14px; color:var(--text-dim-2); line-height:1.55}
.diagnostico-requer strong{color:var(--ink)}
.diagnostico-prazo{margin-top:10px; font-size:13px; color:var(--text-dim-2); font-style:italic; max-width:var(--measure)}
/* Nota lateral, não segundo card do mesmo peso — mais estreita, sem fundo tingido, só a régua
   de cor marcando "isto é um aparte", em vez de competir com .diagnostico-detalhe (primário). */
.box-seguro{
  margin-top:24px; padding:4px 0 4px 20px; border-left:3px solid var(--steel); max-width:46ch;
}
.box-seguro p{font-size:14px; color:var(--text-dim-2); line-height:1.6}
.box-seguro p + p{margin-top:10px}
.comecamos-cta{margin-top:32px}

/* === Quem está por trás === */
/* Layout de 2 colunas próprio (não reaproveita .section-head.split) — head à esquerda,
   cards+ecossistema à direita, com colunas definidas uma única vez para os dois níveis
   (evita o desalinhamento visto em Segurança/BPO, onde split e corpo usam grades diferentes). */
@media (min-width:860px){
  .equipe-layout{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start}
}
.equipe-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px}
.equipe-card{
  border:1px solid var(--rule); border-radius:var(--r-md); padding:20px 22px;
  transition:border-color var(--dur-short) var(--ease-standard);
}
.equipe-card:hover{border-color:var(--teal-light)}
.equipe-nome{font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--paper)}
.equipe-cargo{font-size:13.5px; color:var(--text-dim); margin-top:2px}
.equipe-link{
  display:inline-flex; align-items:center; gap:5px; margin-top:12px; padding-block:4px;
  font-family:var(--font-sans); font-weight:500; font-size:13px; color:var(--teal-light); text-decoration:none;
}
.equipe-link:hover{text-decoration:underline}
.equipe-link svg{width:12px; height:12px}
.equipe-ecossistema{margin-top:24px; font-size:14px; color:var(--text-dim); max-width:var(--measure)}
.equipe-ecossistema a{color:var(--teal-light); text-decoration:underline; text-underline-offset:2px}
.equipe-ecossistema a:hover{color:var(--paper)}

/* === Segurança === */
.seguranca-grid{display:grid; grid-template-columns:1fr; gap:40px; align-items:start}
.seguranca-grid > div{min-width:0}
/* 1.1fr/1fr + 48px, igual .section-head.split — colunas diferentes (1fr/1fr + 40px) faziam a
   borda esquerda do corpo não bater com a borda esquerda da lede acima, ~30px de folga visível
   em telas largas. 1040px, não 920: com min-width:460px na tabela, colunas de ~416px em
   920-1000px forçavam scroll horizontal numa tabela de texto simples. */
@media (min-width:1040px){ .seguranca-grid{grid-template-columns:1.1fr 1fr; gap:48px} }
.controles-wrap{overflow-x:auto}
.controles-table{width:100%; min-width:460px; font-size:13.5px}
.controles-table th{
  text-align:left; font-family:var(--font-sans); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint); padding:0 0 10px;
}
.controles-table td{padding:12px 0; border-bottom:1px solid var(--rule); vertical-align:top}
.controles-table td:first-child{font-weight:600; width:38%; padding-right:16px; color:var(--paper)}
.controles-table td:last-child{color:var(--text-dim)}
.seguranca-frases{margin-top:24px; display:flex; flex-direction:column; gap:10px}
.seguranca-frases p{font-family:var(--font-display); font-weight:500; font-size:16px; color:var(--text-dim); font-style:italic}
.planos-svg{width:100%; max-width:520px; height:auto; margin-inline:auto; display:block}

/* === Por que não um BPO manual === (seção on-paper — tokens de texto escuro sobre paper) */
.versus-grid{display:grid; grid-template-columns:1fr; gap:20px; margin-top:8px}
@media (min-width:640px){ .versus-grid{grid-template-columns:1fr 1fr; gap:20px} }
/* 860px — mesmo ponto em que .section-head.split vira 2 colunas (1.1fr/1fr + 48px). Casar a
   proporção só a partir daqui evita a banda 720-860 onde a head ainda é 1 coluna e um gap
   diferente do body não causaria desalinhamento nenhum. */
@media (min-width:860px){ .versus-grid{grid-template-columns:1.1fr 1fr; gap:48px} }
.versus-card{border:1px solid var(--rule-dark); border-radius:var(--r-md); padding:26px 24px}
.versus-nome{
  font-family:var(--font-sans); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim-2); margin-bottom:18px;
}
.versus-meditrina{border-color:var(--teal-ink); background:rgba(15,139,128,.05)}
.versus-meditrina .versus-nome{color:var(--teal-ink)}
.versus-rows{display:flex; flex-direction:column; gap:16px}
.versus-rows li{border-top:1px solid var(--rule-dark); padding-top:14px}
.versus-rows li:first-child{border-top:none; padding-top:0}
.versus-dim{
  display:block; font-family:var(--font-sans); font-weight:600; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-dim-2); margin-bottom:4px;
}
.versus-val{display:block; font-size:14.5px; color:var(--text-dim-2); line-height:1.5}
.box-regulatorio{margin-top:32px; max-width:none}
.box-regulatorio p{max-width:68ch}
.box-regulatorio p + p{margin-top:12px}

/* === Para quem === */
.paraquem-lede{font-size:clamp(16px,1.8vw,18px); color:var(--text-dim-2); max-width:var(--measure); margin-bottom:24px}
.qualifica-lista{display:flex; flex-direction:column; margin-bottom:32px; max-width:var(--measure)}
.qualifica-lista li{
  padding:12px 0; border-top:1px solid var(--rule-dark); font-family:var(--font-sans); font-weight:500;
  font-size:15px; color:var(--ink); line-height:1.5;
}
.qualifica-lista li:last-child{border-bottom:1px solid var(--rule-dark)}
.paraquem-tiers-intro{font-size:13.5px; color:var(--text-dim-2); margin-bottom:16px; max-width:var(--measure)}
.tiers{display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:32px}
@media (min-width:720px){ .tiers{grid-template-columns:repeat(3,1fr)} }
.tier{
  border:1px solid var(--rule-dark); border-radius:var(--r-md); padding:18px 20px;
  transition:border-color var(--dur-short) var(--ease-standard);
}
.tier:hover{border-color:var(--steel)}
.tier .tier-nome{font-family:var(--font-sans); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel)}
.tier .tier-tipo{font-size:11px; color:var(--text-dim-2); margin-top:2px; display:block}
.tier p.tier-desc{font-size:14.5px; color:var(--text-dim-2); margin-top:10px}
.tier .tier-prazo{font-family:var(--font-sans); font-weight:600; font-size:12px; color:var(--amber-ink); margin-top:10px; display:block}
/* === FAQ === */
/* .container--narrow (720px) já estreita a seção inteira — max-width aqui (66ch ≈ 660px)
   dava uma segunda restrição, cortando ~10px extras à direita sem motivo. */
.faq details{border-bottom:1px solid var(--rule-dark); padding-block:16px}
.faq summary{
  font-family:var(--font-sans); font-weight:600; font-size:16px; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--font-sans); font-weight:500; font-size:20px; color:var(--steel); flex-shrink:0; transition:transform var(--dur-short) var(--ease-standard)}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:12px; color:var(--text-dim-2); font-size:15px}

/* Zona 5 — CTA final: ink profundo. Grid mais denso + vinheta mais forte centrada embaixo,
   para fechar a página com mais peso do que as demais seções escuras. */
.cta-final{
  background-image:
    linear-gradient(color-mix(in srgb, var(--teal) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--teal) 9%, transparent) 1px, transparent 1px);
  background-size:32px 32px;
}
.cta-final::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  /* 700px/11%, não 900px/15% — o dobro do raio padrão do .zn-vinheta (640px/9%) numa seção já
     mais alta (zn-peak) inundava a seção inteira de neblina teal em vez de um brilho no rodapé
     do card. Nunca foi visto renderizado antes do fix de isolation:isolate. */
  background-image:
    linear-gradient(to bottom, var(--top-fade,transparent), transparent 64px),
    radial-gradient(700px circle at 50% 100%, color-mix(in srgb, var(--teal) 11%, transparent), transparent 70%);
}

/* === CTA final === */
.cta-card{
  max-width:640px; margin-inline:auto; text-align:center; border:1px solid var(--rule);
  border-radius:var(--r-md); padding:48px 32px;
}
.cta-card p{color:var(--text-dim); margin-top:14px; max-width:48ch; margin-inline:auto}
.cta-card .btn{margin-top:28px; margin-inline:5px}
.cta-alt{margin-top:18px; font-size:13.5px; color:var(--text-dim)}
.cta-alt--hero{margin-top:14px}
.cta-email{
  display:inline-block; padding:5px 2px; font-family:var(--font-sans); font-weight:500; font-size:14px; color:var(--teal-light);
  text-decoration:none;
}
.cta-email:hover{text-decoration:underline}
/* Fallback de conversão — mailto: sozinho falha silenciosamente se o browser não tem handler
   registrado (achado D11-1, auditoria-ux); botão de copiar dá um segundo caminho sem depender
   de nenhum app externo. */
.copy-email-btn{
  display:inline-block; margin-left:6px; padding:3px 10px; font-family:var(--font-sans);
  font-weight:500; font-size:12px; color:var(--text-dim); background:none;
  border:1px solid var(--rule); border-radius:var(--r-full); cursor:pointer;
  transition:border-color var(--dur-short) var(--ease-standard), color var(--dur-short) var(--ease-standard);
}
.copy-email-btn:hover{border-color:var(--teal-light); color:var(--paper)}
.copy-email-btn[data-copiado="true"]{border-color:var(--teal-light); color:var(--teal-light)}

/* === Footer — grid de ecossistema, inspirado no padrão saude.dev (colunas + ponto colorido
   por link + ícone de saída no hover), mantendo os 6 tokens fixos como paleta de pontos. === */
footer{
  /* sem margin-top: .cta-final (zn-peak) já fecha com padding-bottom generoso; somar
     margin-top:var(--space) aqui empilhava com ele e criava ~330px de ink vazio antes do
     rodapé — a régua do ::before abaixo já marca a fronteira sozinha. */
  position:relative; border-top:1px solid var(--rule); padding-block:calc(var(--space) * .85) 32px;
  font-size:13.5px; color:var(--text-dim);
}
footer::before{
  content:""; position:absolute; left:50%; top:-1px; width:min(70%,860px); height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--teal-light) 45%, transparent), transparent);
}
.footer-grid{display:grid; grid-template-columns:1fr; gap:36px}
@media (min-width:720px){ .footer-grid{grid-template-columns:1.3fr 1fr 1fr} }
.footer-brand .nav-brand{margin-bottom:14px}
.footer-brand .nav-brand svg{height:24px}
.footer-brand .nav-brand .word{font-size:15px}
.footer-brand p{font-size:13px; color:var(--text-dim); line-height:1.6; max-width:36ch}
.footer-heading{
  font-family:var(--font-sans); font-weight:600; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:14px;
}
.footer-links{display:flex; flex-direction:column; gap:6px}
.footer-links a{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--text-dim);
  font-size:13.5px; padding-block:5px; transition:color var(--dur-short) var(--ease-standard);
}
.footer-links a:hover{color:var(--paper)}
.footer-links .dot{width:6px; height:6px; border-radius:50%; flex-shrink:0}
.footer-links .ext{
  width:11px; height:11px; opacity:0; transform:translate(-2px,2px);
  transition:opacity var(--dur-short) var(--ease-standard), transform var(--dur-short) var(--ease-standard);
}
.footer-links a:hover .ext{opacity:.8; transform:translate(0,0)}
.footer-legal{
  grid-column:1 / -1; margin-top:8px; padding-top:24px; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:baseline;
}
.footer-legal p{font-size:12.5px; color:var(--text-dim)}
.footer-legal-links{display:flex; gap:20px}
.footer-legal a{display:inline-block; padding-block:5px; color:var(--text-dim); text-decoration:underline; text-underline-offset:2px}
.footer-legal a:hover{color:var(--paper)}

@media (max-width:719px){
  /* .78 combinado com --space-mult (não substituindo) — ritmo variável sobrevive no mobile */
  section{padding-block:calc(var(--space) * var(--space-mult,1) * .78)}
}