/* ============================================================
   Vero Norte — Camada de site
   Carregado só pelas páginas institucionais e de conteúdo, sempre depois do
   base.css (que é a fundação da marca, derivada do styles.css das campanhas).
   As landing pages NÃO carregam este arquivo, e este arquivo não muda nada
   do que elas usam. É essa separação que permite mexer no site sem risco
   nenhum para o que está rodando em tráfego pago.
   ============================================================ */

/* ---------- Header ---------- */
.nav-site {
  position: sticky;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-site .nav-links { gap: 26px; }
.nav-site .nav-links a { color: var(--text-muted); }
.nav-site .nav-links a:hover { color: var(--text); }
.nav-site .nav-links a[aria-current="page"] { color: var(--text); font-weight: 500; }

/* O botão só aparece no celular, onde a barra de links vira gaveta. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; }
.nav-toggle span::before { transform: translateY(-5.5px); }
.nav-toggle span::after { transform: translateY(5.5px); }
body.menu-aberto .nav-toggle span { background: transparent; }
body.menu-aberto .nav-toggle span::before { transform: rotate(45deg); }
body.menu-aberto .nav-toggle span::after { transform: rotate(-45deg); }

/* As regras das landing pages escondem .nav-links abaixo de 1120px, porque lá a barra
   é só atalho para âncoras da mesma página. No site ela é a navegação inteira, então
   aqui ela reaparece como gaveta em vez de sumir. */
@media (max-width: 1120px) {
  .nav-site .nav-toggle { display: flex; position: relative; }
  .nav-site .nav-links {
    display: none;
    position: absolute;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(5, 15, 30, 0.08);
  }
  body.menu-aberto .nav-site .nav-links { display: flex; }
  .nav-site .nav-links a {
    padding: 13px 22px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }
  .nav-site .nav-links a:last-child { border-bottom: 0; }
}
@media (max-width: 760px) {
  .nav-site .nav-cta { display: none; }
}

/* ---------- Blocos de página ---------- */
.site-hero { padding: 150px 0 56px; }
.site-hero h1 { max-width: 20ch; font-size: clamp(34px, 5.6vw, 60px); line-height: 1.08; letter-spacing: -0.02em; }
.site-hero .lead { max-width: 62ch; margin-top: 20px; font-size: clamp(17px, 2vw, 20px); line-height: 1.65; color: var(--text-muted); }
.site-hero .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- Conserto de dobra do hero institucional ----------
   O H1 da home tem duas frases e cai em CINCO linhas a 60px, 324px de altura. Somado
   aos 150px de respiro do topo e ao cabeçalho de 73px, isso jogava o botão de WhatsApp
   para 871px numa janela de 860: fora da primeira dobra em qualquer laptop, justamente
   a ação que a página existe para pedir.
   Só entra em tela larga e baixa, que é o desktop comum. Em telas altas o respiro
   original continua, porque lá ele cabe. Mesma ideia do .hero-dobra-apertada das LPs. */
@media (min-width: 861px) and (max-height: 920px) {
  .site-hero { padding-top: 104px; }
  .site-hero h1 { font-size: clamp(34px, 4.4vw, 48px); }
  .site-hero .lead { margin-top: 16px; }
  .site-hero .acoes { margin-top: 24px; }
}


.secao { padding: 72px 0; }
.secao-clara { background: var(--bg-1); }
.secao > .container > h2,
.secao > .container > .secao-cabecalho h2 { max-width: 24ch; font-size: clamp(25px, 3.4vw, 36px); line-height: 1.2; }
.secao-cabecalho { max-width: 62ch; margin-bottom: 40px; }
.secao-cabecalho p { margin-top: 14px; color: var(--text-muted); font-size: var(--fs-body); line-height: 1.7; }
/* As frentes absorvidas em /servicos abrem com h3, porque a página já tem um h2 por
   seção. Sem esta regra elas herdavam o tamanho padrão do navegador e ficavam menores
   que os h3 dos cartões logo abaixo, invertendo a hierarquia. */
.secao-cabecalho h3 { font-size: clamp(22px, 2.8vw, 29px); line-height: 1.24; letter-spacing: -0.014em; text-wrap: balance; }

/* ---------- Grades e cartões ---------- */
.grade-2, .grade-3, .grade-4 { display: grid; gap: 18px; }
.grade-2 { grid-template-columns: repeat(2, 1fr); }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
.grade-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
}
.card h3 { font-size: 19px; line-height: 1.3; margin-bottom: 10px; }
.card p { color: var(--text-muted); font-size: 15.5px; line-height: 1.65; }
.card p + p { margin-top: 10px; }
.card .num {
  display: block;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--accent-text);
  margin-bottom: 12px;
}
a.card { display: block; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); }
a.card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
a.card .seta { display: inline-block; margin-top: 14px; color: var(--accent-text); font-size: var(--fs-apoio); }

/* ---------- Listas ---------- */
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lista-check li { position: relative; padding-left: 28px; color: var(--text-muted); font-size: 16px; line-height: 1.6; }
.lista-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.lista-check strong { color: var(--text); font-weight: 600; }

/* ---------- Faixa de números ---------- */
.faixa-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.faixa-numeros .num-grande { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; letter-spacing: -0.02em; }
.faixa-numeros .num-legenda { margin-top: 8px; color: var(--text-muted); font-size: var(--fs-etiqueta); line-height: 1.5; }

/* ---------- Duas colunas ---------- */
.duas-colunas { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: start; }
/* Corte de conteúdo às vezes deixa a segunda coluna vazia, e a faixa continua reservada,
   com o texto espremido ao lado de um buraco. Com um filho só, vira coluna única. */
.duas-colunas:has(> :only-child) { grid-template-columns: 1fr; max-width: 68ch; }
.duas-colunas .texto p { color: var(--text-muted); font-size: var(--fs-body); line-height: 1.75; }
.duas-colunas .texto p + p { margin-top: 16px; }
.duas-colunas .texto strong { color: var(--text); }

/* ---------- Marcas ---------- */
.marcas { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 20px; }
.marcas span {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-etiqueta);
  color: var(--text-muted);
  background: var(--bg);
}

/* ---------- Aviso (usado onde falta dado real) ---------- */
.aviso {
  padding: 20px 22px;
  border: 1px dashed var(--flag-line);
  border-radius: 12px;
  background: var(--flag-dim);
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.6;
}
.aviso strong { display: block; margin-bottom: 6px; }

/* ---------- FAQ ---------- */
.faq-site { display: grid; gap: 10px; max-width: 52rem; }
.faq-site details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  padding: 18px 22px;
}
.faq-site summary { cursor: pointer; font-weight: 500; font-size: 16.5px; line-height: 1.45; list-style: none; }
.faq-site summary::-webkit-details-marker { display: none; }
.faq-site summary::after { content: "+"; float: right; color: var(--accent-text); font-size: 20px; line-height: 1; }
.faq-site details[open] summary::after { content: "–"; }
.faq-site details p { margin-top: 12px; color: var(--text-muted); font-size: 15.5px; line-height: 1.7; }

/* ---------- CTA de fim de página ---------- */
.cta-bloco { padding: 64px 0 84px; border-top: 1px solid var(--line); }
.cta-bloco h2 { max-width: 22ch; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.2; }
.cta-bloco p { max-width: 58ch; margin-top: 14px; color: var(--text-muted); font-size: var(--fs-body); line-height: 1.7; }
.cta-bloco .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- Rodapé ---------- */
.footer { border-top: 1px solid var(--line); padding: 60px 0 40px; background: var(--bg-1); }
.footer-top { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; margin-bottom: 40px; }
.footer .brand-lockup { display: inline-block; margin-bottom: 16px; }
.footer .brand-logo { height: 26px; width: auto; color: #050F1E; }
.footer .about { max-width: 44ch; color: var(--text-muted); font-size: var(--fs-apoio); line-height: 1.65; }
.footer-group { margin-top: 12px; color: var(--text-faint); font-size: 14px; }

/* O rodapé é onde aterrissa quem leu a página inteira, e ele só oferecia /contato,
   ou seja, mais um clique antes da ação que o site existe para pedir. */
.footer-wa { margin-top: 14px; }
.footer-wa a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
               font-weight: 560; color: var(--wa-claro); text-decoration: none; }
.footer-wa a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-wa svg { width: 16px; height: 16px; flex: none; }
.footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.footer-nav a { display: block; color: var(--text-muted); font-size: var(--fs-etiqueta); line-height: 2.05; }
.footer-nav a:hover { color: var(--text); }
.footer .label {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 14px;
}

/* Identificação jurídica no rodapé. Estava ausente do site inteiro até 18/08/2026, e
   empresa brasileira sem CNPJ à vista pesa na leitura de "isso é sério". Fica em peso
   menor que o © de propósito: é informação de conferência, não de leitura. */
.footer-legal {
  font-variant-numeric: tabular-nums;
  opacity: .72;
  font-size: var(--fs-micro);
}
@media (max-width: 620px) { .footer-legal { flex-basis: 100%; } }

.footer-priv { color: var(--text-faint); border-bottom: 1px solid var(--line-strong); }
.footer-priv:hover { color: var(--text); }

/* ---------- Conteúdo: índice ---------- */
.conteudo-hero { padding: 150px 0 36px; }
.conteudo-hero p { max-width: 58ch; margin-top: 16px; color: var(--text-muted); font-size: 18px; line-height: 1.7; }
.conteudo-hero + section { padding-bottom: 100px; }
.artigo-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.artigo-card a {
  display: block;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.artigo-card a:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.artigo-card time {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.artigo-card h2 { margin: 8px 0 6px; font-size: 22px; line-height: 1.3; }
.artigo-card p { color: var(--text-muted); font-size: 15.5px; line-height: 1.6; }
.artigo-card.vazio p { color: var(--text-faint); }

/* ---------- Conteúdo: artigo ---------- */
.artigo { padding: 150px 0 90px; }
.artigo-cabecalho { max-width: 40rem; margin: 0 auto 44px; }
.artigo-meta {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.artigo-cabecalho h1 { margin-top: 14px; font-size: clamp(30px, 5vw, 46px); line-height: 1.15; }

/* Medida curta de propósito: linha longa cansa e derruba o tempo de permanência,
   que é o que sustenta o orgânico. */
.artigo-corpo { max-width: 40rem; margin: 0 auto; font-size: 18px; line-height: 1.75; }
.artigo-corpo > * + * { margin-top: 1.25em; }
.artigo-corpo h2 { margin-top: 2em; font-size: 27px; line-height: 1.25; }
.artigo-corpo h3 { margin-top: 1.7em; font-size: 21px; line-height: 1.3; }
.artigo-corpo ul, .artigo-corpo ol { padding-left: 1.3em; }
.artigo-corpo li + li { margin-top: 0.5em; }
.artigo-corpo a { color: var(--accent-text); border-bottom: 1px solid var(--accent-line); }
.artigo-corpo blockquote { margin-left: 0; padding-left: 22px; border-left: 3px solid var(--accent-line); color: var(--text-muted); }
.artigo-corpo code { font-family: var(--mono, ui-monospace, monospace); font-size: 0.88em; background: var(--surface); padding: 2px 6px; border-radius: 5px; }
.artigo-corpo hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.artigo-rodape { max-width: 40rem; margin: 60px auto 0; padding-top: 28px; border-top: 1px solid var(--line); }
.artigo-rodape p { color: var(--text-muted); font-size: 16px; margin-bottom: 18px; }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .grade-4 { grid-template-columns: repeat(2, 1fr); }
  .grade-3 { grid-template-columns: repeat(2, 1fr); }
  .duas-colunas { grid-template-columns: 1fr; gap: 32px; }
  .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .site-hero { padding: 118px 0 44px; }
  .conteudo-hero, .artigo { padding-top: 118px; }
  .secao { padding: 54px 0; }
  .grade-2, .grade-3, .grade-4 { grid-template-columns: 1fr; }
  .faixa-numeros { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  .artigo-corpo { font-size: var(--fs-body); }
  .site-hero .acoes .btn, .cta-bloco .acoes .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   CAMADA VISUAL
   Gráficos vetoriais autorais e movimento. Nada de biblioteca externa e nada de
   imagem de banco: tudo é SVG inline e CSS, então o site continua leve e o desenho
   herda as cores da marca em vez de brigar com elas.
   Todo movimento é anulado em @media (prefers-reduced-motion: reduce), no fim.
   ============================================================ */

/* ---------- Hero com gráfico ---------- */
.site-hero { position: relative; overflow: hidden; }
.hero-grade { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }

.hero-texto { min-width: 0; }
.hero-arte { position: relative; justify-self: center; width: min(100%, 460px); aspect-ratio: 1; }
.g-carta { width: 100%; height: 100%; display: block; }
.g-carta-n {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 26px;
  letter-spacing: 0.1em;
  fill: var(--text);
  fill-opacity: 0.55;
}

/* Os anéis giram devagar e em sentidos opostos, o que dá vida sem virar distração.
   A agulha não gira de propósito: ela é o norte, e norte que balança não serve. */
.g-carta-anel { transform-origin: 300px 300px; animation: carta-gira 90s linear infinite; }
.g-carta-raios { transform-origin: 300px 300px; animation: carta-gira 140s linear infinite reverse; }
.g-carta-graduacao { transform-origin: 300px 300px; animation: carta-gira 90s linear infinite; }
@keyframes carta-gira { to { transform: rotate(360deg); } }

.g-carta-agulha { transform-origin: 300px 300px; animation: agulha-assenta 1.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes agulha-assenta {
  0% { transform: rotate(-38deg); opacity: 0; }
  60% { transform: rotate(6deg); opacity: 1; }
  100% { transform: rotate(0deg); opacity: 1; }
}

/* Luz de fundo que deriva devagar, o mesmo recurso das landing pages. */
.site-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle, var(--accent-dim) 0%, transparent 62%);
  pointer-events: none;
  animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-4%, 3%, 0) scale(1.12); }
}

/* ---------- Rota do Método ---------- */
.g-rota { width: 100%; height: auto; display: block; margin: 8px 0 34px; }
.g-rota-linha { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.reveal.dentro .g-rota-linha { animation: rota-desenha 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes rota-desenha { to { stroke-dashoffset: 0; } }
.g-rota-pontos circle { opacity: 0; }
.reveal.dentro .g-rota-pontos circle { animation: ponto-entra 0.5s ease forwards; }
.reveal.dentro .g-rota-pontos circle:nth-child(1) { animation-delay: 0.35s; }
.reveal.dentro .g-rota-pontos circle:nth-child(2) { animation-delay: 0.9s; }
.reveal.dentro .g-rota-pontos circle:nth-child(3) { animation-delay: 1.45s; }
.reveal.dentro .g-rota-pontos circle:nth-child(4) { animation-delay: 1.9s; }
@keyframes ponto-entra { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

/* ---------- Entrada por rolagem ---------- */
/* O elemento só fica escondido se o JS assumiu o controle (html.js). Sem isso, uma
   falha de script deixaria a página inteira em branco, que é o pior desfecho possível
   em página que recebe tráfego. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.dentro {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .reveal-escada > * { opacity: 0; transform: translateY(16px); }
.js .reveal-escada.dentro > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .reveal-escada.dentro > *:nth-child(2) { transition-delay: 0.08s; }
.js .reveal-escada.dentro > *:nth-child(3) { transition-delay: 0.16s; }
.js .reveal-escada.dentro > *:nth-child(4) { transition-delay: 0.24s; }
.js .reveal-escada.dentro > *:nth-child(5) { transition-delay: 0.32s; }
.js .reveal-escada.dentro > *:nth-child(6) { transition-delay: 0.4s; }

/* ---------- Números que contam ---------- */
.num-grande { font-variant-numeric: tabular-nums; }

/* ---------- Profundidade nos cartões ---------- */
.card { position: relative; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease); }
.card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--accent-line), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  pointer-events: none;
}
a.card:hover { box-shadow: 0 18px 44px rgba(5, 15, 30, 0.09); transform: translateY(-3px); }
a.card:hover::after { opacity: 1; }

/* Filete superior que dá hierarquia visual às grades numeradas. */
.card-filete { position: relative; overflow: hidden; }
.card-filete::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-line));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.dentro .card-filete::before, .reveal-escada.dentro .card-filete::before { transform: scaleX(1); }

/* ---------- Faixa de números com moldura ---------- */
.faixa-numeros { position: relative; }
.faixa-numeros > div { position: relative; padding-left: 20px; }
.faixa-numeros > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
}

/* ---------- Mapa de áreas (o que o diagnóstico pode apontar) ---------- */
.mapa-areas { display: flex; flex-wrap: wrap; gap: 10px; }
.area-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: var(--fs-apoio);
  color: var(--text);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.area-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  flex: none;
}
/* Um estado só. O mapa já teve dois, cheio para o que a Vero Norte executava e vazado
   para o que ela apenas apontava, e essa premissa estava errada: a empresa entrega
   todas as áreas. As classes .executa, .aponta e .mapa-legenda foram removidas de
   propósito, para ninguém reintroduzir a distinção sem querer. */
.area-chip { color: var(--text); }
.area-chip::before { background: var(--accent); }
.area-chip:hover { border-color: var(--accent-line); transform: translateY(-1px); }

/* ---------- Responsivo da camada visual ---------- */
@media (max-width: 980px) {
  .hero-grade { grid-template-columns: 1fr; gap: 28px; }
  .hero-arte { width: min(78%, 340px); order: -1; }
}

/* Movimento é preferência de acessibilidade, não enfeite opcional: quem pediu menos
   movimento tem enxaqueca ou vertigem, e animação boba custa caro para essa pessoa. */
@media (prefers-reduced-motion: reduce) {
  .g-carta-anel, .g-carta-raios, .g-carta-agulha, .site-hero::before { animation: none; }
  .g-rota-linha { stroke-dashoffset: 0; }
  .g-rota-pontos circle { opacity: 1; }
  .js .reveal, .js .reveal-escada > * { opacity: 1; transform: none; transition: none; }
  .card-filete::before { transform: scaleX(1); transition: none; }
  a.card:hover { transform: none; }
}

/* ============================================================
   AUDITORIA VISUAL, ITENS 1 A 3
   ============================================================ */

/* ---------- 2. Ordem no celular ----------
   A arte vinha ANTES do texto abaixo de 980px, então a primeira tela do celular era
   um gráfico decorativo e a proposta ficava abaixo da dobra. No aparelho que traz a
   maior parte do tráfego, isso é entregar a dobra para um enfeite. Texto primeiro. */
@media (max-width: 980px) {
  .hero-arte { order: 0; width: min(62%, 280px); margin-top: 6px; }
  .site-hero { padding-top: 116px; }
}
@media (max-width: 680px) {
  .hero-arte { width: min(56%, 220px); }
  .site-hero { padding-top: 88px; }
}

/* ---------- 3. Fecho escuro ----------
   O site inteiro era claro: branco e #F5F8FB alternando com 1,07:1 de contraste entre
   si, ou seja, invisível. Oito seções liam como uma superfície só. O bloco de fecho
   agora é Azul Abissal, que é onde a marca tem presença de verdade, e dá à página um
   ponto final. .on-dark já reverte todos os tokens, inclusive os do botão. */
.cta-bloco.on-dark {
  position: relative;
  overflow: hidden;
  border-top: 0;
  margin-top: 8px;
  padding: 92px 0 100px;
}
.cta-bloco.on-dark h2 { font-size: clamp(27px, 3.8vw, 40px); max-width: 20ch; }
.cta-bloco.on-dark p { color: var(--text-muted); }

/* Luz fria vindo do canto, o mesmo recurso do hero das landing pages. */
.cta-bloco.on-dark::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -12%;
  width: 60vw;
  height: 60vw;
  max-width: 760px;
  max-height: 760px;
  background: radial-gradient(circle, rgba(86, 150, 251, 0.22) 0%, transparent 62%);
  pointer-events: none;
}

/* Marca d'água da rosa dos ventos no fecho: liga o fim da página ao começo do site
   sem repetir o gráfico inteiro. Fica bem apagada de propósito. */
.cta-bloco.on-dark::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(126, 176, 252, 0.16);
  box-shadow: inset 0 0 0 46px rgba(126, 176, 252, 0.05), inset 0 0 0 47px rgba(126, 176, 252, 0.13);
  pointer-events: none;
}
.cta-bloco.on-dark .container { position: relative; z-index: 1; }

@media (max-width: 680px) {
  .cta-bloco.on-dark { padding: 68px 0 76px; }
  .cta-bloco.on-dark::after { right: -160px; bottom: -200px; }
}

/* ---------- 1. Arte de abertura das páginas internas ----------
   Nove das dez páginas tinham metade do hero vazia. Cada família ganha o seu desenho,
   no mesmo vocabulário de instrumento de navegação, e nenhuma repete a carta da home,
   que continua sendo o gesto exclusivo da primeira página. */
.g-pagina { width: 100%; height: 100%; display: block; }
.g-traco { fill: none; stroke: var(--accent); stroke-linecap: round; }
.g-traco-fino { stroke-opacity: 0.42; stroke-width: 1.1; }
.g-traco-medio { stroke-opacity: 0.7; stroke-width: 1.8; }
.g-traco-forte { stroke-opacity: 0.9; stroke-width: 2.5; }
.g-tinta { fill: var(--accent); }
.g-tinta-fraca { fill: var(--accent); fill-opacity: 0.1; }
.g-vazado { fill: var(--bg); stroke: var(--flag); stroke-width: 2; }
.g-rotulo {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: var(--fs-apoio);
  letter-spacing: 0.08em;
  fill: var(--text-faint);
}

/* O anel de fundo é comum a todos os desenhos: é o que faz as seis páginas parecerem
   a mesma família em vez de seis ilustrações avulsas. */
.g-anel-base { fill: none; stroke: var(--accent); stroke-opacity: 0.3; }
.g-gira-lento { transform-origin: 50% 50%; animation: carta-gira 120s linear infinite; }
.g-pulsa { animation: g-pulsa 3.4s ease-in-out infinite; }
@keyframes g-pulsa { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.g-desenha { stroke-dasharray: 900; stroke-dashoffset: 900; }
/* Dentro do hero o desenho roda no carregamento: o bloco já está visível e esperar
   por rolagem deixaria o traço invisível para sempre. */
.hero-arte .g-desenha { animation: rota-desenha 1.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards; }
.reveal.dentro .g-desenha, .dentro .g-desenha { animation: rota-desenha 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@media (prefers-reduced-motion: reduce) {
  .g-gira-lento, .g-pulsa { animation: none; }
  .g-desenha, .hero-arte .g-desenha { stroke-dashoffset: 0; animation: none; }
}

/* A agulha das quatro páginas de frente aponta para um quadrante diferente em cada
   uma, o que dá identidade sem exigir quatro desenhos. */
.pagina-midia-paga .g-frente-agulha { transform: rotate(0deg); }
.pagina-conteudo .g-frente-agulha { transform: rotate(90deg); }
.pagina-crm .g-frente-agulha { transform: rotate(180deg); }
.pagina-paginas .g-frente-agulha { transform: rotate(270deg); }
.pagina-branding .g-frente-agulha { transform: rotate(45deg); }
.pagina-audiovisual .g-frente-agulha { transform: rotate(135deg); }
.g-frente-agulha {
  transform-origin: 210px 210px;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Faixa de marcas ----------
   Escura por necessidade: os arquivos de logo são brancos e sumiriam no claro. */
.marcas-faixa { padding: 52px 0 56px; }
.marcas-rotulo {
  text-align: center;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 34px;
}
.marcas-esteira {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
}
.marcas-trilha {
  display: flex;
  align-items: center;
  gap: 68px;
  width: max-content;
  animation: marcas-anda 42s linear infinite;
}
/* O :focus-within continua aqui de propósito, mas ele NÃO dispara hoje: depois que o
   botão de pausa saiu, a esteira não tem nenhum elemento focável dentro. A regra fica
   pronta para o dia em que os logos virarem links. Quem para o movimento hoje é o hover
   e o prefers-reduced-motion, e no toque não há como parar: foi a troca aceita ao tirar
   o botão. Não escreva em comentário que isto atende a WCAG 2.2.2, porque não atende. */
.marcas-esteira:hover .marcas-trilha,
.marcas-esteira:focus-within .marcas-trilha { animation-play-state: paused; }
@keyframes marcas-anda { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.marca-item { flex: none; display: flex; align-items: center; opacity: 0.72; transition: opacity 0.2s var(--ease); }
.marca-item:hover { opacity: 1; }
/* Equalização óptica. Os arquivos têm proporções muito diferentes (Smart Coffee é
   7:1, Giraffas é 1:1), então dar a mesma altura para todos faz a marca quadrada
   virar um selinho e a horizontal ocupar meia esteira. O olho compara ÁREA, não
   altura, então marca quadrada vai mais alta e assinatura horizontal vai mais baixa. */
.marca-item img { width: auto; display: block; }
.marca-item img[src$="giraffas.svg"] { height: 46px; }
.marca-item img[src$="vo-carlos-cafe.jpg"] { height: 48px; border-radius: 10px; }
.marca-item img[src$="smart-coffee.png"] { height: 21px; }
.marca-item img[src$="business.png"] { height: 27px; }
.marca-texto {
  font-size: var(--fs-body);
  letter-spacing: 0.01em;
  color: var(--text-muted);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) { .marcas-trilha { animation: none; } }
@media (max-width: 680px) {
  .marcas-faixa { padding: 40px 0 44px; }
  .marcas-trilha { gap: 44px; }
  .marca-item img[src$="giraffas.svg"] { height: 36px; }
  .marca-item img[src$="vo-carlos-cafe.jpg"] { height: 38px; }
  .marca-item img[src$="smart-coffee.png"] { height: 17px; }
  .marca-item img[src$="business.png"] { height: 21px; }
  .marca-texto { font-size: var(--fs-apoio); }
}

/* ============================================================
   AJUSTES FINOS DA AUDITORIA (itens 6, 9, 13)
   ============================================================ */

/* ---------- 9. Quebra de linha dos títulos ----------
   Os títulos quebravam deixando órfãs ("O primeiro passo custa R$ / 127"). O navegador
   sabe equilibrar isso sozinho desde que a gente peça, e onde não houver suporte a
   quebra continua a de antes. Não é enfeite: linha órfã lê como erro de montagem. */
.site-hero h1, .cta-bloco h2, .secao-cabecalho h2, .secao > .container > h2, .card h3 {
  text-wrap: balance;
}
.artigo-corpo h2, .artigo-corpo h3, .artigo-cabecalho h1 { text-wrap: balance; }
/* O lead é texto corrido e balancear parágrafo longo deixa as linhas curtas demais.
   pretty só resolve a última linha, que é o problema real ali. */
.site-hero .lead, .secao-cabecalho p, .cta-bloco p { text-wrap: pretty; }

/* ---------- 6. O número que quebrava em duas linhas ----------
   "+R$ 30 milhões" quebrava e os outros três não, então a faixa parecia defeituosa.
   Coluna um pouco mais larga e o número sem quebra resolvem sem diminuir a tipografia,
   que é o que dá peso ao dado. */
/* O maior número, "+R$ 30 milhões", media exatamente 240px numa coluna útil de 240px:
   ele não transbordava, ele ENCOSTAVA na divisória da coluna seguinte, e o olho lia a
   linha como se cortasse o texto. Duas correções juntas, porque uma só não resolve:
   respiro à direita para o texto nunca alcançar a borda, e teto de fonte menor para
   caber depois de descontar esse respiro. */
.faixa-numeros { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.faixa-numeros > div { padding-right: 20px; }
.faixa-numeros .num-grande { white-space: nowrap; font-size: clamp(24px, 2.7vw, 31px); }
@media (max-width: 400px) {
  /* Em tela muito estreita, nowrap estouraria a caixa. Aí é melhor quebrar. */
  .faixa-numeros .num-grande { white-space: normal; font-size: 25px; }
}

/* ---------- 13. Hierarquia dentro do cartão ----------
   Título e corpo tinham peso parecido demais, então o olho não achava onde começar.
   Mais contraste de peso e de cor, e um respiro maior entre os dois. */
.card h3 {
  font-size: 19.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 12px;
}
.card p { color: var(--text-muted); font-size: 15.5px; line-height: 1.68; }
.card { padding: 28px 28px 30px; }
.card .num { font-size: 12px; letter-spacing: 0.12em; opacity: 0.85; }

/* ---------- Rodapé com fecho ----------
   Depois do bloco escuro, o rodapé claro reabria a página em vez de encerrar. Uma
   linha de acento no topo dá o ponto final. */
.footer { border-top: 0; box-shadow: inset 0 2px 0 var(--accent-line); }

/* ============================================================
   ACESSIBILIDADE (achados da varredura final)
   ============================================================ */

/* ---------- Foco visível ----------
   Não havia nenhuma regra de :focus-visible, então o site dependia do anel padrão de
   cada navegador. Dentro dos blocos escuros o anel escuro do Chrome praticamente some
   contra o Azul Abissal, e quem navega por teclado perde a referência de onde está. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-dark :where(a, button, summary, [tabindex]):focus-visible {
  outline-color: var(--accent-bright);
}

/* ---------- Pular para o conteúdo ----------
   Sem isto, quem usa teclado ou leitor de tela atravessa logo, seis links de navegação,
   CTA e botão de menu a cada troca de página. */
.pular-conteudo {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: var(--fs-apoio);
  transition: top 0.15s var(--ease);
}
.pular-conteudo:focus { top: 12px; }

/* ---------- Contraste dos pontos do mapa ----------
   O ponto do chip é objeto gráfico necessário para entender o componente, então a WCAG
   1.4.11 pede 3:1. O Azul Horizonte dava 2,94:1 sobre branco e 2,76:1 sobre a faixa
   clara. Azul Corrente passa com folga nos dois. */
.area-chip::before { background: var(--accent-text); }
.on-dark .area-chip::before { background: var(--accent); }

/* ---------- Movimento ----------
   A graduação da rosa dos ventos tinha ficado de fora da regra, então continuava
   girando para quem pediu menos movimento. E o scroll suave é justamente o tipo de
   movimento que provoca enjoo em quem tem sensibilidade vestibular. */
@media (prefers-reduced-motion: reduce) {
  .g-carta-graduacao { animation: none; }
  html { scroll-behavior: auto; }
}

/* O botão de pausa da esteira saiu a pedido do Daniel em 19/08/2026. O movimento
   continua parando no :hover e no :focus-within (regra lá em cima), e o
   prefers-reduced-motion desliga a animação inteira. O que se perde é a pausa por
   toque no celular, onde não existe hover: quem precisar disso depende de ter a
   preferência de menos movimento ligada no sistema. */

/* ============================================================
   PLANOS
   Os três planos prontos, para quem já sabe o que precisa e não quer começar
   pelo Diagnóstico. O CSS vive aqui e não no styles.css das campanhas porque
   /planos é página do site institucional.
   ============================================================ */
.planos-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plano-card {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 32px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  position: relative;
}
/* O do meio é o mais contratado, então recebe o peso visual. Sem isso a grade
   de três vira três opções iguais e a pessoa trava na escolha. */
.plano-card.destaque {
  border-color: var(--accent);
  box-shadow: 0 18px 44px rgba(5, 15, 30, 0.08);
}
.plano-selo {
  position: absolute;
  top: -11px;
  left: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #04122e;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plano-nome { font-size: 25px; font-weight: 600; letter-spacing: -0.015em; }
.plano-para { margin-top: 10px; color: var(--text-muted); font-size: var(--fs-apoio); line-height: 1.6; min-height: 4.8em; }
.plano-preco { margin-top: 22px; display: flex; align-items: baseline; gap: 7px; }
.plano-valor { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plano-por { color: var(--text-faint); font-size: var(--fs-apoio); }
.plano-nota { margin-top: 8px; color: var(--text-faint); font-size: var(--fs-nota); line-height: 1.5; }
.plano-lista { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 11px; }
.plano-lista li { position: relative; padding-left: 26px; font-size: var(--fs-apoio); line-height: 1.55; color: var(--text-muted); }
.plano-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.plano-lista strong { color: var(--text); font-weight: 600; }
.plano-card .btn { margin-top: auto; width: 100%; justify-content: center; }

@media (max-width: 980px) {
  .planos-grade { grid-template-columns: 1fr; gap: 26px; }
  .plano-para { min-height: 0; }
}

/* ============================================================
   UMA AÇÃO SÓ
   Este bloco vai NO FIM do css/site.css, e a posição importa: parte dele reescreve
   regras que estão mais acima NESTE mesmo arquivo (o display:none do .nav-cta na
   linha 75) e regras do base.css, que carrega antes.

   O princípio: no site institucional, PREENCHIMENTO deixou de ser um nível de
   hierarquia e virou a assinatura de um destino. Pílula cheia quer dizer WhatsApp,
   e nada mais. Tudo que leva para outra página do site vira pílula de contorno.
   Com isso a regra "uma ação só" para de depender de disciplina de copy e passa a
   ser aplicada pela cascata, nas dez páginas e nas que ninguém escreveu ainda.

   O site passa a ter DUAS formas, e só duas. Hoje ele tem quatro (azul cheia, verde
   cheia, contorno cinza e um contorno verde escondido dentro de ghost) e nenhuma
   delas explica a outra. Reduzir a duas é o que faz uma página parecer desenhada em
   vez de montada.

   Nada aqui alcança as landing pages: medicos.html, diagnostico.html e ecommerce.html
   carregam styles.css e nunca o site.css. O tráfego pago fica intocado, e é essa
   separação que permite radicalizar aqui sem risco nenhum lá.
   ============================================================ */

/* ---------- 0. Reset obrigatório. NÃO APAGUE ESTA LINHA ----------
   O .nav-cta do cabeçalho virou <section id="acao-cabecalho"> para o js/site.js
   conseguir ler uma origem de clique (ele monta origem_do_clique com
   el.closest("section").id, build-site.js:274). O base.css:203 dá
   section { padding: clamp(96px, 12vw, 176px) 0 }. Sem a linha abaixo, o cabeçalho
   das dez páginas vira um bloco de 176px de altura. */
.nav-site .nav-cta { padding: 0; }

/* ---------- 1. A ação no cabeçalho ----------
   Não herda .btn de propósito. O botão de corpo tem 48px de altura, 26px de respiro
   lateral e um brilho de 30px; numa barra de 72px isso vira bloco. Esta é menor, mais
   apertada e com brilho curto, para ler como constante da barra e não como o CTA da
   página colado no topo. É a diferença entre joia e adesivo. */
.nav-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 40px;
  padding: 0 17px 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--wa);
  color: #04220f;
  font-family: var(--font-body);
  font-size: var(--fs-etiqueta);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: 0 6px 18px -8px rgba(37, 211, 102, 0.6);
  transition: background 0.2s var(--ease), box-shadow 0.3s var(--ease);
}
/* Mesma diretriz do .btn-wa no base.css: a marca do WhatsApp só existe em branco
   sobre o verde. Sem esta linha o glifo herdaria o #04220f do rótulo e sairia quase
   preto, que é justamente o uso proibido pela marca. O rótulo continua escuro porque
   é texto e precisa de contraste (8,5:1); marca registrada não entra nessa conta. */
.nav-acao svg { width: 17px; height: 17px; flex: none; color: #fff; }
.nav-acao:hover {
  background: var(--wa-600);
  box-shadow: 0 8px 22px -8px rgba(37, 211, 102, 0.78);
}
/* Sem o translateY(-2px) do .btn: barra fixa que salta no hover parece instável. */

/* Ao rolar, o brilho recolhe. Chegando na página o verde convida; depois que a leitura
   começou ele assenta e vira ferramenta. A ALTURA NÃO MUDA de propósito: .nav-site é
   position: sticky (site.css:12 sobrescreve o fixed do base.css:325) e ocupa espaço no
   fluxo, então encolher a barra empurraria a página inteira para cima na primeira
   rolagem. Custa uma linha e zero JS, reaproveitando o .scrolled que já existe. */
.nav.scrolled .nav-acao { box-shadow: none; }

/* O anel de foco padrão do site é Azul Horizonte e some contra o verde. O raio precisa
   ser redeclarado por causa do defeito consertado no item 4 abaixo. */
.nav-acao:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 999px;
}

/* Cinco itens em vez de sete. O respiro é o que faz a pílula verde ler como o único
   objeto saturado da barra, e não como mais um bloco disputando a linha. */
/* Só em desktop. Sem a media query esta regra alcança a gaveta do celular, onde os
   itens ficam empilhados: seis espaços de 30px inflavam a gaveta em 180px, medidos em
   575,79px onde deveriam ser 395,79px. O gap de desktop e o de gaveta são coisas
   diferentes e não podem compartilhar a mesma declaração. */
@media (min-width: 1121px) { .nav-site .nav-links { gap: 30px; } }

/* ---------- 2. A ação no celular ----------
   Havia, na linha 75 deste arquivo, um @media (max-width:760px) escondendo o .nav-cta
   inteiro. Num site que existe para virar conversa no WhatsApp, isso apagava a única
   ação justamente no aparelho onde está a maior parte do tráfego e onde o link abre no
   aplicativo em vez do navegador. Aqui ela volta como alvo redondo de 40px ao lado do
   menu, com o glifo fazendo sozinho o trabalho do rótulo. O aria-label do HTML garante
   o nome acessível. */
@media (max-width: 1120px) {
  /* Abaixo de 1120px o .nav-links vira gaveta e sai do fluxo, sobrando três itens no
     space-between. Sem a margem automática a pílula flutuaria no meio da barra em vez
     de encostar no botão do menu. */
  .nav-site .nav-inner { gap: 12px; }
  .nav-site .nav-cta { margin-left: auto; }
}
@media (max-width: 760px) {
  .nav-site .nav-cta { display: flex; }
  .nav-acao { width: 40px; padding: 0; gap: 0; }
  .nav-acao .nav-acao-rotulo { display: none; }
  .nav-acao svg { width: 18px; height: 18px; }
}

/* ---------- 3. Conserto de um defeito que já estava no ar ----------
   A regra :where(a, button, summary, [tabindex]):focus-visible { border-radius: 6px }
   da linha 736 deste arquivo tem especificidade (0,1,0), igual à do .btn, e o site.css
   carrega depois do base.css. Resultado: HOJE toda pílula do site vira retângulo de 6px
   quando alguém navega por teclado. .btn:focus-visible tem (0,2,0) e devolve o raio. */
.btn:focus-visible { border-radius: 999px; }

/* ---------- 4. Verde é o WhatsApp, e só ----------
   Todo link com .js-wa é a MESMA ação, com o mesmo destino. O que muda entre um e outro
   é só o volume, e quem dá o volume é o LUGAR.
   O acerto de quem escreveu as páginas: a hierarquia já estava na marcação. Aqui os
   botões só são re-entintados, e por isso nove páginas mudam sem uma linha de HTML. */

/* Volume baixo, e é o padrão: a mesma ação repetida no meio da página. Contorno verde.
   A borda é --wa-600 a 55%, que tem corpo suficiente para ler como verde ao lado dos
   ghosts cinza sem virar preenchimento. O rótulo em --text dá 18,6:1 no claro e é ele
   que identifica o componente. */
.btn.js-wa {
  background: transparent;
  border-color: rgba(30, 184, 88, 0.55);
  color: var(--text);
  box-shadow: none;
}
.btn.js-wa svg { color: var(--wa-600); }
.btn.js-wa:hover { background: rgba(37, 211, 102, 0.10); border-color: var(--wa); }
/* No fecho escuro, --text já vira branco sozinho. Só a borda precisa ser redesenhada:
   --wa-claro (#6FEBA6) a 55% dá 3,4:1 sobre o Azul Abissal. */
.on-dark .btn.js-wa { border-color: rgba(111, 235, 166, 0.55); }
.on-dark .btn.js-wa:hover { background: rgba(111, 235, 166, 0.12); border-color: var(--wa-claro); }

/* Volume alto: a primeira dobra e o fecho, que são os dois lugares onde a página pede
   alguma coisa, mais o cartão de plano em destaque, que é o único dos três que deve
   ganhar massa. Os seletores de lugar têm (0,4,0) e vencem o padrão acima por
   especificidade, não por ordem. O .btn.btn-wa empata em (0,2,0) com o .btn.js-wa e
   vence por vir depois: ele é a válvula de escape para quem quiser uma pílula cheia
   fora desses lugares, como no rodapé do artigo.
   NÃO acrescente .btn.btn-primario.js-wa aqui: isso encheria de verde o botão do meio
   da home (index.html:144) e a página passaria a ter três pílulas cheias. */
.site-hero .acoes .btn.js-wa,
.cta-bloco .acoes .btn.js-wa,
.plano-card.destaque .btn.js-wa,
.btn.btn-wa {
  background: var(--wa);
  border-color: transparent;
  color: #04220f;
  box-shadow: 0 10px 30px -12px rgba(37, 211, 102, 0.5);
}
.site-hero .acoes .btn.js-wa svg,
.cta-bloco .acoes .btn.js-wa svg,
.plano-card.destaque .btn.js-wa svg,
.btn.btn-wa svg { color: #fff; }
.site-hero .acoes .btn.js-wa:hover,
.cta-bloco .acoes .btn.js-wa:hover,
.plano-card.destaque .btn.js-wa:hover,
.btn.btn-wa:hover { background: var(--wa-600); border-color: transparent; }

/* UMA PÍLULA CHEIA POR DOBRA. O fecho de /indicacao (indicacao.html:213 e 214) tem
   DOIS botões de WhatsApp lado a lado: "Registrar uma indicação" e "Tirar uma dúvida
   antes". Sem esta regra os dois sairiam verdes cheios e o par viraria duas ações do
   mesmo peso, que é exatamente o problema que este trabalho existe para resolver.
   O segundo irmão volta ao contorno. Vale para qualquer par futuro, no hero e no fecho.
   Especificidade (0,5,0): vence os seletores de lugar independentemente da ordem. */
.site-hero .acoes .btn.js-wa ~ .btn.js-wa,
.cta-bloco .acoes .btn.js-wa ~ .btn.js-wa {
  background: transparent;
  border-color: rgba(30, 184, 88, 0.55);
  color: var(--text);
  box-shadow: none;
}
.site-hero .acoes .btn.js-wa ~ .btn.js-wa svg,
.cta-bloco .acoes .btn.js-wa ~ .btn.js-wa svg { color: var(--wa-600); }
.site-hero .acoes .btn.js-wa ~ .btn.js-wa:hover,
.cta-bloco .acoes .btn.js-wa ~ .btn.js-wa:hover { background: rgba(37, 211, 102, 0.10); border-color: var(--wa); }
.cta-bloco.on-dark .acoes .btn.js-wa ~ .btn.js-wa { border-color: rgba(111, 235, 166, 0.55); }
.cta-bloco.on-dark .acoes .btn.js-wa ~ .btn.js-wa svg { color: var(--wa-claro); }
.cta-bloco.on-dark .acoes .btn.js-wa ~ .btn.js-wa:hover { background: rgba(111, 235, 166, 0.12); border-color: var(--wa-claro); }

/* ---------- 5. O azul volta a ser tinta ----------
   Enquanto /diagnostico era uma pílula azul cheia, o site tinha duas ações primárias em
   cada dobra. Aqui ele deixa de ser ação e vira caminho: pílula de contorno com a tinta
   da marca no rótulo, para continuar sendo o caminho mais importante entre os que não
   são a ação. A borda é Azul Corrente a 60%, que dá 3,16:1 sobre o branco e não se
   confunde com o cinza a 18% do .btn-ghost: são duas coisas diferentes e precisam
   parecer duas coisas diferentes.
   O :not(.js-wa) é o que segura tudo. Botão que abre o WhatsApp está fora desta regra,
   então o hero de /cases, /servicos, /planos e /indicacao continua verde. Se alguém
   remover o :not(), a hierarquia inteira se desfaz em silêncio, sem erro de build.
   ATENÇÃO, CONTRATO NOVO: .btn-primario deixou de ser azul cheio no site institucional.
   Quem escrever uma página nova esperando o preenchimento vai achar que quebrou.
   O azul não some do site: ele continua na rosa dos ventos do hero, no nx do logo, nos
   números dos cartões, nos links e no selo do plano em destaque. Ele só para de encher
   botão e de brigar com o próprio desenho da marca a 40px de distância. */
.btn-primario:not(.js-wa) {
  background: transparent;
  border-color: rgba(27, 67, 191, 0.6);
  color: var(--accent-text);
  box-shadow: none;
}
.btn-primario:not(.js-wa):hover {
  background: var(--accent-dim);
  border-color: var(--accent-deep);
  color: var(--accent-text);
}
/* No fecho escuro o .on-dark já reverte --accent-text para #7EB0FC, que dá 8:1 sobre o
   Azul Abissal. Só a borda precisa ser redesenhada: #7EB0FC a 55% dá 3,37:1 ali. */
.on-dark .btn-primario:not(.js-wa) {
  background: transparent;
  border-color: rgba(126, 176, 252, 0.55);
  color: var(--accent-text);
}
.on-dark .btn-primario:not(.js-wa):hover {
  background: rgba(126, 176, 252, 0.14);
  border-color: var(--accent-bright);
  color: var(--accent-text);
}

/* O rodapé do artigo não é hero nem fecho, então o .acoes não pega. Mesma métrica
   dos outros pares para o par ser reconhecido como o mesmo objeto. */
.artigo-rodape .acoes-artigo { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 680px) {
  .artigo-rodape .acoes-artigo .btn { width: 100%; justify-content: center; }
}

/* ---------- Faixa de horizonte ----------
   O manual dedica três páginas a direção de fotografia e o site não tinha foto nenhuma.
   Esta é a primeira: horizonte, azul profundo, espaço negativo.
   A imagem entra como <img> e não como background-image de propósito: assim ela tem
   width/height no HTML, o navegador reserva o espaço antes de baixar, e a faixa não
   empurra o conteúdo de baixo quando termina de carregar. */
.faixa-horizonte {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: end start;
  min-height: clamp(300px, 34vw, 460px);
  background: var(--azul-abissal, #050F1E);
  overflow: hidden;
}
.faixa-horizonte picture, .faixa-horizonte img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
}
/* Véu que escurece só a base, onde o texto fica. O céu continua claro e a linha do
   horizonte continua legível, que é o ponto da imagem. */
.faixa-horizonte::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(5,15,30,.86) 0%, rgba(5,15,30,.52) 34%, rgba(5,15,30,0) 62%);
}
.faixa-horizonte .container { padding-top: 56px; padding-bottom: 44px; }
.faixa-horizonte-frase {
  max-width: 26ch;
  color: #fff;
  font-size: clamp(21px, 2.5vw, 31px);
  line-height: 1.28;
  letter-spacing: -0.015em;
  font-weight: 500;
  text-wrap: balance;
}
.faixa-horizonte-fonte {
  margin-top: 14px;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sky, #B0E9FD); font-weight: 600;
}
@media (max-width: 680px) {
  .faixa-horizonte { min-height: 340px; }
  .faixa-horizonte .container { padding-bottom: 34px; }
}

/* ---------- A gaveta do menu precisa caber na tela ----------
   Medido em 375x553, que é a área útil do Safari num iPhone SE: a gaveta abria com
   576px de altura a partir de y=72, terminando em 648. O item "Sobre", o último da
   lista, ficava inteiro abaixo da dobra, e como a gaveta tinha overflow-y: visible e
   max-height: none, não havia como rolar até ele. Um item de menu inalcançável em
   telas pequenas é uma página que deixa de existir para quem está no celular.

   A altura passa a ser limitada pela tela menos o cabeçalho, com rolagem própria.
   dvh e não vh porque a barra do navegador no celular come altura e o vh não sabe.
   overscroll-behavior: contain impede que o fim da rolagem da gaveta continue
   rolando a página atrás dela. */
body.menu-aberto .nav-site .nav-links {
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---------- As duas portas da Costeira ----------
   A Costeira é a única faixa em que a empresa escolhe a frente: conteúdo ou mídia paga,
   pelo mesmo valor. Da Travessia para cima as duas vêm juntas, então lá não há porta.
   As portas são blocos separados por um filete e não duas colunas, porque o cartão de
   plano já é estreito e dividir ao meio deixaria quatro palavras por linha. */
.plano-escolha {
  margin-top: 18px;
  font-size: var(--fs-nota);
  color: var(--text-muted);
  border-left: 2px solid var(--accent-line);
  padding-left: 12px;
}
.plano-porta { margin-top: 18px; }
.plano-porta + .plano-porta { border-top: 1px solid var(--line); padding-top: 16px; }
.plano-porta h4 {
  margin: 0 0 10px;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-text);
}
.plano-porta .plano-lista { margin-top: 0; }
.plano-porta .plano-nota { margin-top: 10px; }

/* "Sob medida" ocupa o lugar de um número, mas não é um número: sem o tamanho de
   display ele sumiria ao lado dos R$ 1.297 e R$ 2.497 dos cartões vizinhos, e com ele
   quebraria em duas linhas. Fica no meio do caminho, com o mesmo peso. */
.plano-valor-medida { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.01em; }

/* ---------- Retrato de quem responde ----------
   Só na /sobre, por decisão do Daniel em 19/08/2026: o rosto não entra em landing page
   nem na home. As fotos vêm de origens diferentes (estúdio escuro e evento em alta-luz)
   e passaram pelo mesmo duotone da paleta com a luminância equalizada, senão uma ficaria
   escura e a outra clara e as duas pareceriam de lugares diferentes.
   Tamanho contido de propósito: aqui o rosto dá cara à assinatura, não é o assunto. */
.pessoa-topo { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.pessoa-foto {
  width: 96px; height: 96px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}
.pessoa .num { display: block; margin-bottom: 4px; }
.pessoa h3 { margin-bottom: 0; }
@media (max-width: 520px) {
  .pessoa-topo { gap: 13px; }
  .pessoa-foto { width: 76px; height: 76px; }
}

/* ============================================================
   CARTA NÁUTICA
   Direção de arte, 19/08/2026. Este bloco vai NO FIM do css/site.css.
   A posição importa: a maior parte destas regras EMPATA em especificidade
   com regras que estão acima neste arquivo e no base.css, e só vence por vir
   depois. Se alguém mover este bloco para cima, metade dele para de valer
   em silêncio, sem erro de build.

   O princípio em uma frase: o azul deixa de ser TINTA e vira PROFUNDIDADE
   (uma escada de valores), e o Terracota Norte, a única cor quente entre oito
   azuis, vira a AGULHA: um fio de 1px que diz "aqui começa o trecho", sempre
   com o mesmo significado e nunca com área maior que um chip.

   Nada aqui alcança medicos.html, diagnostico.html e ecommerce.html: elas
   carregam styles.css e nunca o site.css. O css/base.css continua derivado
   do styles.css pelo build e não é tocado por nada disto.
   ============================================================ */


/* ------------------------------------------------------------
   1. TOKENS
   O site tinha SETE valores fora do Manual da Marca em uso: #F5F8FB, #F1F5F9,
   #E8EEF4, #4A5C6E, #5F7183, #8CA0B0 e #7EB0FC. Nenhum deles sobrevive.
   Depois deste bloco, toda cor pintada na tela é uma das 12 oficiais, um tom
   dela com alfa declarado, ou uma cor funcional (WhatsApp, erro, alta e baixa).
   ------------------------------------------------------------ */
:root {
  /* --- Os DOIS valores claros, e só dois ---
     #F2F5F8 é Cinza Neblina #DEE5ED a 40% sobre Branco Polar. Pigmento diluído
     continua sendo o pigmento: é assim que identidade impressa funciona.
     A distância entre os dois é 1,094:1, que é a régua medida no BTG (1,09:1):
     o olho lê PLANO, não lê listra. E a hierarquia inverte: o cinza passa a
     ser o CHÃO e o branco passa a ser o que SOBE. Site de agência faz o
     contrário, e é por isso que o cartão de hoje parece flutuar em vez de
     estar apoiado. */
  --bg:   #FFFFFF;   /* Branco Polar: superfície ELEVADA (cartão, faixa, barra, chip) */
  --bg-1: #F2F5F8;   /* o CHÃO */

  /* Não existe terceira superfície clara. O --surface aponta para o chão porque
     o único consumidor dele no site é o fundo do <code> do artigo, e artigo
     passa a ser lido sobre Branco Polar (item 10 abaixo). Assim o código ganha
     o mesmo degrau de 1,094:1 do resto do sistema em vez de um tom inventado.
     --surface-2 e --surface-3 ficam como estão no :root: eles não têm consumidor
     nenhum no tema claro e alimentam os --stage-* do base.css. Mexer neles seria
     mudar coisa que não aparece. */
  --surface: #F2F5F8;

  /* --- DOIS alfas de borda, e a diferença entre eles é a WCAG, não gosto ---
     16% é o fio DECORATIVO (o --outline-base do BTG é rgba(0,0,0,0.16), um valor
     só para o sistema inteiro). 45% é o CONTORNO DE COMPONENTE, que a WCAG 1.4.11
     obriga a 3:1: hoje o .btn-ghost e o .nav-toggle rodam com --line-strong a 18%,
     que dá 1,49:1 e reprova em produção neste momento.
     Reaproveito os dois nomes que já existem em vez de inventar um terceiro. */
  --line:        rgba(5, 15, 30, 0.16);   /* resolve #CCD0D5 no chão, 1,42:1 */
  --line-strong: rgba(5, 15, 30, 0.45);   /* resolve #878E96 no chão, 3,03:1 */

  /* --- Tinta no claro: duas ---
     Azul Abissal é a voz, Azul Marinho é o apoio. O --text-faint deixa de ser
     uma COR e vira o mesmo Marinho: não existe cor oficial entre 8,41:1 e
     2,01:1 no claro (o Cinza Costeiro dá 2,01 sobre o chão e reprova), então
     ou se inventa um cinza fora do manual, ou nota e ressalva passam a se
     distinguir por TAMANHO e CAIXA, que é o que o BTG faz. Escolhi o segundo.
     Isso obriga a tirar o opacity do .footer-legal, no item 9. */
  --text:       #050F1E;   /* Azul Abissal, 17,55:1 sobre o chão */
  --text-muted: #264B66;   /* Azul Marinho,  8,41:1 sobre o chão */
  --text-faint: #264B66;

  /* --- Onde cada azul pode encostar ---
     Azul Horizonte sobre o chão dá 2,68:1: reprova até nos 3:1 de objeto
     gráfico. Ele para de tingir texto, de encher botão e de pintar ponto de
     lista, e volta a ser o traço do desenho técnico, que é para onde o manual
     desenha com ele. Quem se LÊ no claro é o Azul Corrente; quem se lê no
     escuro é o Azul Céu. Regra de cabeça, e vale para os dois lados:
     no claro a luz é Corrente, no escuro a luz é Céu. */
  --accent:        #5696FB;              /* só traço de SVG */
  --accent-text:   #1B43BF;              /* Azul Corrente, 7,38:1 sobre o chão */
  --accent-deep:   #1B43BF;
  --accent-bright: #B0E9FD;              /* consumido só dentro de .on-dark; aposenta o #7EB0FC */
  --accent-dim:    rgba(27, 67, 191, 0.08);
  --accent-line:   rgba(27, 67, 191, 0.60);  /* resolve #768ED9 no branco, 3,16:1 */

  /* --- A AGULHA ---
     Terracota Norte tem UM significado e quatro formas: o fio de 48px que abre
     cada seção, o tique do rótulo, a haste do dado e a borda do chip do selo.
     NUNCA é texto: 4,26:1 sobre branco reprova nos 4,5:1 de corpo. Os tokens de
     lavagem quente (--flag-dim, --flag-line) saem de uso: área grande de cor
     quente não existe mais neste sistema. */
  --flag: #CC553D;

  /* --- O rótulo micro não é monoespaçado ---
     Defeito medido, não gosto: --mono NUNCA foi declarado em lugar nenhum do
     projeto (conferido em css/ e em styles.css) e NOVE regras do site.css pedem
     var(--mono, ui-monospace, monospace). Ou seja, kicker, numeral de cartão,
     rótulo do rodapé, data de artigo, rótulo da esteira, selo de plano e os dois
     rótulos de SVG rodam HOJE em SF Mono no Mac e Consolas no Windows. O manual
     manda IBM Plex Sans, e rótulo em monoespaçada de sistema é um dos tiques de
     startup mais fáceis de reconhecer. Uma linha conserta os nove. */
  --mono: "IBM Plex Sans", system-ui, sans-serif;

  /* Canto: 8px é o teto (BTG usa 4px em 5 de 8 ocorrências; J.P. Morgan usa
     2px e 8px). 14px lê como aplicativo, 8px lê como documento. */
  --radius:    8px;
  --radius-sm: 6px;

  /* Teto de sombra do sistema. A mais forte de todo o design system do BTG é
     0 3px 8px a 10%, e não existe nenhuma difusa grande. Nada aqui passa disto. */
  --sombra: 0 3px 8px rgba(5, 15, 30, 0.10);
}

/* Código dentro de artigo continua monoespaçado: ali é função, não estilo. */
.artigo-corpo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--line);
}

/* No escuro os papéis giram. Branco é a voz, Cinza Costeiro é o apoio, Azul Céu
   é a luz (link, seta, ponto, dado, anel de foco) e Areia Clara é a ênfase.
   Esta regra tem (0,1,0), igual à .on-dark do base.css, e vence por ordem. */
.on-dark {
  --line:        rgba(255, 255, 255, 0.16);  /* 1,66:1 no Profundo, 1,55:1 no Abissal */
  --line-strong: rgba(255, 255, 255, 0.45);  /* 4,10:1 no Profundo, 4,51:1 no Abissal */
  --field-line:  rgba(255, 255, 255, 0.45);
  --text-muted:  #9CB2BF;                    /* Cinza Costeiro, 6,57:1 no Profundo */
  --text-faint:  #9CB2BF;
  --accent-text:   #B0E9FD;                  /* Azul Céu, 10,97:1 no Profundo */
  --accent-bright: #B0E9FD;                  /* anel de foco no escuro, 14,56:1 no Abissal */
  --accent-line:   rgba(176, 233, 253, 0.45);/* 3,40:1 no Profundo */
  --accent-dim:    rgba(176, 233, 253, 0.12);
}


/* ------------------------------------------------------------
   2. O RITMO DA PÁGINA
   ANTES: branco de chão, faixa #F5F8FB a 1,07:1 (o olho não registra) e UM
   bloco escuro colado no fim. Oito seções liam como uma superfície só, e um
   escuro solitário no rodapé é a assinatura de landing page.
   DEPOIS: hero em branco colado na barra branca, chão em Cinza Neblina diluído,
   faixa alternada em Branco Polar, UM bloco fundo em Azul Profundo no miolo e
   o fecho em Azul Abissal. Escuro deixa de ser o ponto final e passa a ser
   exceção NO MEIO da leitura, que é onde ele significa alguma coisa.
   ------------------------------------------------------------ */
html, body { background: var(--bg-1); }

/* O hero abre em Branco Polar, colado na barra branca: a primeira dobra é uma
   superfície só, sem costura. */
.site-hero { background: var(--bg); }

/* A alternância INVERTE: o cinza é o chão (padrão), o branco é o que sobe. */
.secao { padding: 64px 0; background: var(--bg-1); }
.secao-clara { background: var(--bg); }

/* O BLOCO FUNDO. Uma seção por página, marcada no HTML com
   class="secao on-dark secao-funda". O on-dark é a máquina que já existe no
   base.css e é ele que reverte tinta, fio e botão; a classe secao-funda só
   troca o degrau da escada, de Abissal para Profundo.
   Azul Profundo #182752 tinha UM uso no CSS inteiro. Luminância 0,0225 contra
   0,0231 do --surface-brand-02 do BTG: é a mesma posição na escada, com menos
   de 3% de diferença. A cor principal do manual que estava morta no arquivo é,
   medida, o azul institucional que foi pedido.
   Especificidade (0,2,0): vence .secao e .secao-clara em qualquer ordem. */
.secao.secao-funda {
  --bg:        #182752;   /* Azul Profundo */
  --bg-1:      #182752;
  --surface:   #264B66;   /* Azul Marinho: o cartão aqui dentro, 1,57:1 acima */
  --surface-2: #26364D;   /* Azul Atlântico: preenchimento quieto, 1,18:1 acima */
  background: var(--bg);
  padding: 72px 0;
}

/* Cartão dentro do bloco fundo. Sem esta regra ele herdaria background:var(--bg),
   ou seja, Profundo sobre Profundo.
   E a tinta de apoio TEM de mudar aqui: Cinza Costeiro sobre Azul Marinho dá
   4,18:1 e REPROVA em corpo. Cinza Neblina dá 7,25:1. Este é o par que ninguém
   testa e que derruba cinco das nove páginas com bloco fundo, porque cinco delas
   têm cartão dentro da seção escolhida. */
.secao.secao-funda .card,
.secao.secao-funda .faq-site details {
  background: var(--surface);
  --text-muted: #DEE5ED;
  --text-faint: #DEE5ED;
}
.cta-bloco.on-dark .card { background: var(--surface); }

/* O fecho continua Abissal, mais apertado. 92/100 era o maior respiro da página
   inteira, e por isso ele lia como outra página grudada no fim. */
.cta-bloco.on-dark { padding: 72px 0 80px; }

/* As duas auroras radiais saem. Um wash azul de 900px atrás de um H1 é
   "ilustração atrás de texto", que é justamente o que não existe em nenhum dos
   dois sites de referência. Profundidade neste sistema vem de degrau de valor e
   de fio de 1px, não de brilho. */
.site-hero::before { display: none; }
.cta-bloco.on-dark::before { display: none; }

/* A marca d'água da rosa dos ventos fica, retinta em Azul Céu (saía do #7EB0FC,
   que não é cor do manual). */
.cta-bloco.on-dark::after {
  border-color: rgba(176, 233, 253, 0.16);
  box-shadow: inset 0 0 0 46px rgba(176, 233, 253, 0.05),
              inset 0 0 0 47px rgba(176, 233, 253, 0.13);
}

/* A esteira de logos continua escura por necessidade técnica (os arquivos de
   logo são claros), mas desce de Abissal para Profundo. Dois pretos idênticos na
   mesma página não constroem hierarquia, constroem repetição: em Profundo ela lê
   como o MESMO material do bloco do miolo, e o Abissal fica sendo o ponto final
   e nada mais. Em /cases ela é o bloco 6 de 9, e é por isso que /cases não
   precisa de edição nenhuma de HTML. */
.marcas-faixa.on-dark {
  --bg:      #182752;
  --bg-1:    #182752;
  --surface: #264B66;
  background: var(--bg);
}


/* ------------------------------------------------------------
   3. A AGULHA
   O fio vai ACIMA do bloco de cabeçalho e na largura do CONTAINER, não embaixo
   do h2. O motivo é do arquivo, não do gosto: o h2 deste site tem
   max-width: 24ch (site.css:101), então um border-bottom nele sublinha uma frase
   de ~330px em vez de abrir um capítulo. O BTG pode pendurar o fio no
   .section-title porque lá o título ocupa a coluna; aqui não ocupa.
   De quebra o fio resolve um problema que a inversão de fundo cria: existem
   seções ADJACENTES do mesmo valor (planos 4 e 5, servicos-midia-paga 6 e 7,
   sobre 6 e 7), e é ele que as separa.
   Conferido: as dez páginas têm exatamente um .secao-cabecalho para cada .secao
   (index 6/6, sobre 7/7, metodo 9/9, servicos 9/9, cases 6/6, planos 5/5,
   indicacao 5/5, contato 4/4, segmentos 4/4, servicos-midia-paga 6/6), e nenhum
   h2 é filho direto do .container. Então o fio nunca falta e nunca sobra.
   ------------------------------------------------------------ */
.secao > .container { position: relative; }
.secao > .container::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--line);
  margin-bottom: 30px;
}
/* A tampa de 48px em Terracota. É este objeto que faz o trabalho que uma agência
   tentaria fazer com peso 700. Sem gradiente: são dois objetos, não duas paradas.
   3,89:1 sobre o chão, 4,26:1 sobre o branco, 3,40:1 sobre o Azul Profundo:
   passa os 3:1 de elemento gráfico nos três fundos do site. */
.secao > .container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;              /* o padding-inline do .container */
  width: 48px;
  height: 1px;
  background: var(--flag);
}
/* O .cta-bloco NÃO recebe fio, de propósito: fio no topo de um bloco anuncia que
   começa um capítulo, e o fecho é a última frase da página. */

/* O tique do rótulo. O .kicker já tinha um traço de 22px antes dele, em cinza a
   18%, ou seja, invisível. Vira a agulha em miniatura. */
.kicker { color: var(--text-muted); }
.kicker::before,
.kicker.center::after { background: var(--flag); }
.on-dark .kicker { color: var(--sand); }

/* A haste do dado. Era um degradê azul que sumia no fim. Vira fio sólido de 2px
   em Terracota, do topo à base do número. */
.faixa-numeros > div::before { background: var(--flag); }
.on-dark .faixa-numeros .num-grande { color: var(--sky); }

/* O rodapé abria com uma linha azul de 2px em inset box-shadow, o único lugar do
   site onde uma linha tinha 2px. Vira o mesmo par fio + tique. O max() segura o
   alinhamento abaixo de 1140px, onde o container passa a ter só os 24px de
   padding. */
.footer {
  position: relative;
  border-top: 1px solid var(--line);
  box-shadow: none;
  background: var(--bg-1);
}
.footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: max(24px, calc(50% - var(--container) / 2 + 24px));
  width: 48px;
  height: 1px;
  background: var(--flag);
}

/* O aviso tinha borda tracejada e uma lavagem quente de fundo, que é área grande
   de cor quente e é o oposto do que a agulha significa. Vira fio institucional
   com a agulha na lateral, no mesmo vocabulário do resto do site. */
.aviso {
  border: 1px solid var(--line);
  border-left: 2px solid var(--flag);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}
.artigo-corpo blockquote { border-left: 2px solid var(--flag); }


/* ------------------------------------------------------------
   4. A AREIA CLARA
   ZERO usos no CSS inteiro até hoje, e não é descuido: sobre Branco Polar ela dá
   1,37:1 e não é texto em lugar nenhum do claro. A inversão do miolo é o que
   torna essa cor possível, e o papel dela é um só e recorrente: a ÊNFASE sobre
   fundo escuro. 10,60:1 sobre Azul Profundo, 14,06:1 sobre Azul Abissal.
   No escuro o branco é a voz e a areia é a acentuação. É o "terra firme" do
   manual virando função: sobre a água escura, o que está firme é areia.
   O :is() carrega a especificidade do argumento mais alto (uma classe), então
   estas regras somam (0,2,1), empatam com .duas-colunas .texto strong e vencem
   por ordem.
   ------------------------------------------------------------ */
.on-dark :is(p, li, .lead, .texto, .about) strong,
.on-dark :is(p, li, .lead, .texto, .about) b { color: var(--sand); }
.on-dark .card .num { color: var(--sand); }
.marcas-rotulo { color: var(--sand); }
.faixa-horizonte-fonte { color: var(--sand); }


/* ------------------------------------------------------------
   5. TIPOGRAFIA
   Teto de 42px (é o maior font-size de todo o bundle de 214 KB do BTG), razão
   título:corpo de 2,47:1 no h1 e 1,88:1 no h2 (lá é 2:1; hoje aqui é 3,5:1),
   peso 500 no máximo, tracking negativo só acima de 30px e tracking aberto só
   em caixa alta de 11 a 13px, que é o que o site já fazia certo.
   ------------------------------------------------------------ */
.site-hero h1 { font-size: clamp(30px, 3.6vw, 42px); letter-spacing: -0.015em; }
/* O conserto de dobra apertada (site.css:88) vem ANTES deste bloco, então tem de
   ser redeclarado aqui, senão a regra acima o apaga em tela larga e baixa. */
@media (min-width: 861px) and (max-height: 920px) {
  .site-hero h1 { font-size: clamp(30px, 3.2vw, 38px); }
}
.secao > .container > h2,
.secao > .container > .secao-cabecalho h2 { font-size: clamp(24px, 2.4vw, 32px); }
.cta-bloco.on-dark h2 { font-size: clamp(25px, 2.6vw, 34px); }
.secao-cabecalho h3 { font-size: clamp(21px, 2vw, 26px); letter-spacing: 0; }
.artigo-cabecalho h1 { font-size: clamp(28px, 4.6vw, 42px); }  /* estava em 46px */

/* Peso: nenhum título passa de 500, que é o que o manual manda e o que o BTG
   pratica (400 em 30 de 30 declarações do CSS crítico).
   O .card h3 estava em 600 por uma correção deliberada de auditoria ("título e
   corpo tinham peso parecido demais"). A hierarquia é devolvida de três outros
   jeitos, e os três já entram aqui: o corpo do cartão em 15,5px contra o título
   em 20px (razão 1,29), a etiqueta .num acima, e o fio de seção acima do grupo.
   O 19,5px vira 20px de propósito: é o antídoto pré-aplicado, e é o conserto
   certo se o cartão ficar chapado. Voltar ao 600 é o que NÃO se faz. */
.card h3 { font-weight: 500; font-size: 20px; letter-spacing: 0; margin-bottom: 12px; }
.plano-nome { font-weight: 500; letter-spacing: 0; }
.plano-valor { font-weight: 500; }
.accent-word,
h1 .accent-word,
h2 .accent-word { color: var(--accent-text); font-weight: 500; }
.on-dark .accent-word,
.on-dark h1 .accent-word,
.on-dark h2 .accent-word { color: var(--sky); }
/* .plano-porta h4 fica em 600 e é a única exceção: ele não é título, é rótulo de
   11,5px em caixa alta com 0,14em de tracking, e abaixo de 500 nesse corpo o
   rótulo perde a haste. Peso em micro rótulo não é o tique que a régua ataca. */
.plano-porta h4 { font-weight: 600; color: var(--accent-text); }


/* ------------------------------------------------------------
   6. PROFUNDIDADE, CANTO E FORMA
   Nenhuma sombra passa de 0 3px 8px a 10%. Nenhum canto passa de 8px. O cartão
   não levanta no hover: página de banco não pula.
   Hoje o site tem 0 18px 44px a 9% no cartão, 0 18px 44px a 8% no plano em
   destaque, 0 18px 40px na gaveta do celular, 0 10px 30px verde no botão e
   0 6px 18px verde na barra. Sombra difusa grande é o tell mais rápido de SaaS.
   ------------------------------------------------------------ */
.card,
.plano-card,
.faq-site details,
.artigo-card a,
.aviso,
.nav-toggle,
.pular-conteudo { border-radius: var(--radius); }
.marca-item img[src$="vo-carlos-cafe.jpg"] { border-radius: var(--radius-sm); }

.card { background: var(--bg); border-color: var(--line); }

/* Sai o aro de degradê do hover (é gradiente de duas paradas atrás de um objeto)
   e sai o salto de 3px. Hover passa a ser borda mais o teto de sombra. */
.card::after { display: none; }
a.card:hover { transform: none; box-shadow: var(--sombra); border-color: var(--accent-text); }
.artigo-card a:hover { transform: none; box-shadow: var(--sombra); border-color: var(--accent-text); }
.area-chip:hover { transform: none; border-color: var(--accent-text); }
.plano-card.destaque { box-shadow: none; }

/* O filete do cartão era um degradê azul de 3px em cerca de 40 cartões, ou seja,
   área preenchida com cor saturada repetida. Vira o fio de componente do sistema,
   e a animação de desenho continua: é o traço sendo puxado, gesto de carta
   náutica e não de dashboard. */
.card-filete::before { height: 1px; background: var(--line-strong); }

/* O FAQ deixa de ser oito caixas empilhadas e vira lista de documento. Oito
   caixas com raio e gap são oito objetos; separadas por fio, são uma lista. É o
   mesmo movimento do fio de seção, um nível abaixo. */
.faq-site { gap: 0; }
.faq-site details {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 18px 2px;
}
.faq-site details:last-child { border-bottom: 1px solid var(--line); }


/* ------------------------------------------------------------
   7. ONDE A SATURAÇÃO PODE APARECER
   No BTG existem 12 rampas de apoio declaradas, algo perto de 120 cores, e a
   home do Empresas usa UMA, duas vezes, como fundo de chip: cor saturada ocupa
   entre 1% e 2% dos pixels e nunca é fundo de seção, título, área grande ou
   borda de cartão comum. Aqui o azul saturado fica em link, ponto de chip, anel
   de foco, contorno de botão e numeração de cartão. Nada além disso.
   ------------------------------------------------------------ */

/* O ponto de 7 a 8px ao lado de cada item de lista é literalmente o "ícone
   decorativo ao lado de cada item" da lista do que eles não fazem. Vira um fio de
   10px, no mesmo vocabulário do resto da página. Isso também aposenta um defeito
   que estava no ar: os pontos eram Azul Horizonte, 2,94:1 sobre branco, abaixo
   dos 3:1 de objeto gráfico. Os chips do mapa já tinham sido corrigidos e as
   duas listas ficaram de fora. */
.lista-check li::before,
.plano-lista li::before {
  top: 0.72em;
  width: 10px;
  height: 1px;
  border-radius: 0;
  background: var(--line-strong);
}

/* Contorno de componente com o alfa que alcança 3:1. O .btn-ghost e o .nav-toggle
   herdam isso só pela troca do token, sem regra nova. */
.plano-escolha { border-left: 1px solid var(--line-strong); }

/* O contorno do botão ficava MAIS FRACO quando a pessoa apontava para ele:
   .btn-ghost:hover manda --accent-line, que resolvia em 1,46:1 no claro e
   1,92:1 no escuro. Reprova a WCAG 1.4.11, que vale para estados, e só aparece
   com o cursor em cima ou com o teclado, ou seja, justamente para quem depende
   dele. Passa a ser --accent-text, que é 7,38:1 no claro e 10,97:1 no escuro
   por token, sem precisar de uma regra por sala. */
.btn-ghost:hover { border-color: var(--accent-text); background: var(--accent-dim); }

/* Anel de foco: era Azul Horizonte, 2,94:1 sobre branco, abaixo do mínimo de 3:1
   para indicador de foco. Azul Corrente dá 7,38:1 no claro; no escuro o
   --accent-bright já foi redefinido para Azul Céu no item 1, 14,56:1 sobre
   Abissal, então lá não precisa de regra.
   O :where() tem especificidade zero, então esta regra pesa (0,1,0), empata com
   a de site.css:754 e vence por ordem. */
:where(a, button, summary, [tabindex]):focus-visible { outline-color: var(--accent-text); }
::selection { background: var(--accent-text); color: #fff; }

.on-dark .area-chip { background: var(--surface-2); }   /* Azul Atlântico, 1,18:1: chip que não vira objeto */

/* O BRILHO DAS PÍLULAS DE WHATSAPP.
   A REGRA NÃO MUDA: pílula verde cheia continua querendo dizer WhatsApp e nada
   mais, nos mesmos lugares de hoje, com os mesmos seletores de lugar (0,4,0) e a
   mesma regra de uma pílula cheia por dobra. O que muda é só o BORRÃO: 0 10px
   30px a 50% e 0 6px 18px a 60% são o tipo de sombra que este sistema não tem em
   lugar nenhum. Para voltar atrás, apague as duas declarações abaixo: nada mais
   é afetado. */
.site-hero .acoes .btn.js-wa,
.cta-bloco .acoes .btn.js-wa,
.plano-card.destaque .btn.js-wa,
.btn.btn-wa { box-shadow: var(--sombra); }
.nav-acao { box-shadow: var(--sombra); }


/* ------------------------------------------------------------
   8. OS PLANOS
   Travessia e Ultramarino sinalizam em EIXOS DIFERENTES, e é por isso que não
   competem. A Travessia fica com tudo que é ARGUMENTO: o único selo textual da
   tela ("O mais contratado", que é prova social e pertence a quem tem volume), o
   único fio Terracota de cartão, e a única pílula verde cheia da dobra.
   A Ultramarino não recebe argumento nenhum. Ela recebe SUPERFÍCIE.
   Selo é argumento, superfície é fato.
   ------------------------------------------------------------ */

/* A Travessia perde a borda em Azul Horizonte (2,94:1, reprovava como contorno de
   componente) e perde o borrão de 44px. Ganha o fio de Terracota no topo, que é a
   mesma agulha do resto do site e amarra o cartão ao selo. */
.plano-card.destaque {
  border-color: var(--line);
  border-top: 1px solid var(--flag);
}

/* O SELO. Preenchido em Terracota com rótulo em Azul Abissal ele dá 4,51:1:
   passa os 4,5:1 por UM CENTÉSIMO, e gasta essa última casa decimal no rótulo
   tipograficamente menos legível da página inteira (11px, caixa alta, tracking).
   Qualquer ajuste futuro de matiz derruba. Vira chip de documento: fundo #F8E7E4,
   que é Terracota a 14% JÁ RESOLVIDO sobre Branco Polar (precisa ser opaco porque
   o chip fica meio dentro e meio fora do cartão), borda de 1px em Terracota e
   rótulo em Azul Abissal, 16,04:1. Passa com folga e mantém a regra do sistema:
   Terracota nunca preenche, Terracota é fio. */
.plano-selo {
  top: -12px;
  background: #F8E7E4;
  border: 1px solid var(--flag);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 3px 11px;
}

/* A ULTRAMARINO.
   O cartão NÃO muda de tamanho, de respiro, de canto nem de tipografia. Muda o
   CHÃO embaixo dele, e só. Cartão de topo que cresce, engorda a borda ou ganha
   selo vira anúncio. Escurecer é o gesto de elevação; clarear e saturar é o gesto
   de promoção, e promoção é o que a Travessia faz.
   O gancho é a classe on-dark no HTML, e não um seletor posicional. Motivo, e é o
   bug que esta versão conserta: .planos-grade > .plano-card:last-of-type acerta
   TAMBÉM o terceiro cartão de /indicacao ("Indicou uma Ultramarino",
   site/indicacao.html:101), que é a mesma .planos-grade com três .plano-card.
   Pintar o chão dele sem a classe deixaria Azul Abissal sobre Azul Profundo,
   1,33:1, cartão ilegível numa página no ar. Com a classe nos DOIS cartões, o
   mesmo objeto conta a mesma história nas duas páginas, e um navegador sem :has()
   não muda nada, porque :has() não entra aqui. */
.plano-card.on-dark {
  --bg:        #182752;   /* Azul Profundo, 13,23:1 contra o chão claro */
  --bg-1:      #182752;
  --surface:   #26364D;   /* Azul Atlântico, o preenchimento quieto */
  --surface-2: #26364D;
  background: var(--bg);
  border-color: var(--line);
  box-shadow: none;
}

/* O LUGAR DO PREÇO deixa de PARECER um preço, e só em /planos.
   "Sob medida" ocupava a linha do R$ 1.297 e do R$ 2.497 com corpo de display,
   então o olho comparava três valores. Vira etiqueta em Areia Clara, no mesmo
   corpo dos outros rótulos em caixa alta do site. E o único número que sobra no
   cartão passa a ser o DO CLIENTE: "acima de R$ 100 mil por mês" sobe para 17px
   em Azul Céu. Limiar de qualificação no lugar de preço, e o limiar fala de quem
   entra, não do que se vende. Com isso o cartão para de ser comparável linha a
   linha e vira degrau de categoria.
   O escopo em #planos é obrigatório: id="planos" existe SÓ em site/planos.html
   (a grade de /indicacao é id="quanto"), e em /indicacao o .plano-valor-medida é
   "50% + 15%", que É um número e não pode virar rótulo de 12px. */
#planos .plano-card.on-dark .plano-valor-medida {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
}
#planos .plano-card.on-dark .plano-nota {
  font-size: var(--fs-apoio);
  color: var(--text-muted);
}
#planos .plano-card.on-dark .plano-nota strong {
  color: var(--sky);
  font-weight: 500;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------------
   9. TRÊS DEFEITOS QUE JÁ ESTÃO NO AR E SAEM JUNTO
   ------------------------------------------------------------ */

/* 9.1 O identificador jurídico do rodapé roda com opacity: .72 sobre a faixa
   clara, o que resolve em #8997A5 e dá 2,80:1 num corpo de 12,5px, nas dez
   páginas. Sem a opacidade, o mesmo token dá 8,41:1. O peso menor continua
   vindo do tamanho, que é onde ele devia estar desde o começo. Isto é o que
   paga o colapso do --text-faint feito no item 1. */
.footer-legal { opacity: 1; }

/* 9.2 O link de WhatsApp do rodapé usa --wa-claro #6FEBA6 sobre a faixa clara e
   dá 1,40:1 hoje (1,36:1 no chão novo), num link de 14px que aparece em dez
   páginas. É o pior defeito vivo do site. O rótulo passa para a tinta principal,
   17,55:1, e o glifo fica no verde de fundo claro, que é exatamente o que a
   diretriz da marca do WhatsApp permite. A regra da pílula não é tocada: isto
   aqui é um link de texto, não é botão. */
.footer-wa a { color: var(--text); }
.footer-wa a svg { color: var(--wa-600); }

/* 9.3 O contorno do .btn-ghost e do .nav-toggle rodava com --line-strong a 18%,
   1,49:1, muito abaixo dos 3:1 de contorno de componente. Consertado no item 1
   pela troca do token, sem uma regra nova.
   O que NÃO dá para consertar e fica registrado: o contorno verde do
   .btn.js-wa (--wa-600 a 55%) dá 1,64:1 sobre o chão. Não existe alfa que
   resolva, porque o próprio #1EB858 sólido dá 2,38:1 sobre o chão. O botão é
   identificado pelo rótulo (17,55:1) e pela marca do WhatsApp, e mexer no verde
   seria mexer na regra. Fica como está, sabendo. */


/* ------------------------------------------------------------
   10. PÁGINAS DE CONTEÚDO
   /conteudo e os artigos carregam este arquivo e não usam .secao. Com o chão no
   body, o texto longo cairia sobre o tom tingido. Leitura de dez minutos vai
   para o Branco Polar, que é onde se lê; o índice fica no chão, que é onde há
   objeto. E é isso que devolve ao --surface um trabalho: o fundo do <code>
   passa a ter o degrau de 1,094:1 contra o papel, mais o fio.
   ------------------------------------------------------------ */
.artigo, .conteudo-hero { background: var(--bg); }


/* ------------------------------------------------------------
   11. ARRASTO E RESPONSIVO
   As regras abaixo REDECLARAM valores que já existem em @media mais acima neste
   arquivo. Sem elas, as declarações sem media query deste bloco apagariam os
   ajustes de celular, porque vêm depois.
   ------------------------------------------------------------ */
.nav-site { border-bottom: 1px solid var(--line); }
.footer-priv { border-bottom-color: var(--line-strong); }
.marcas span { background: var(--bg); border-color: var(--line); }

@media (max-width: 1120px) {
  .nav-site .nav-links { box-shadow: var(--sombra); }   /* era 0 18px 40px */
}
@media (max-width: 680px) {
  .secao { padding: 48px 0; }
  .secao.secao-funda { padding: 56px 0; }
  .cta-bloco.on-dark { padding: 56px 0 64px; }
  .secao > .container::before { margin-bottom: 22px; }
}

/* ---------- ALVO DE CLIQUE DO FAQ ----------
   Medido em produção: o cartão de pergunta tem 61px de altura e só 24px abrem a
   resposta, 39% dele. O padding de 18px estava no <details>, que é a caixa, e não no
   <summary>, que é o gatilho: sobravam 19px mortos em cima e 18 embaixo. Quem clica na
   borda do cartão, que é a maior parte da área visível, não acontece nada e a pessoa
   conclui que o FAQ está quebrado.
   O padding muda de elemento. O respiro visual continua idêntico, porque o summary
   ocupa a largura toda; o que muda é que agora ele é clicável inteiro.
   Este bloco vem depois da regra original no arquivo e vence por ordem. */
.faq-site details { padding: 0; }
.faq-site summary { padding: 18px 22px; }
.faq-site details p { padding: 0 22px 18px; margin-top: 0; }
.faq-site details[open] summary { padding-bottom: 12px; }


/* ============================================================
   PASSE DE PÁGINA DE CAPTAÇÃO  (20/08/2026)
   A home virou landing page de geração de lead. Este bloco traz o que o passe de
   design de hoje produziu, agora no TEMA CLARO, que é o que o dono preferiu.

   O que motivou cada regra, medido na página renderizada:
   1. .secao-cabecalho tinha max-width 62ch. Num container de 1200px isso deixava
      cerca de 640px de vão vazio à direita em TODA seção: o título ocupava um terço
      da esquerda e o resto era buraco. Lia como documento, não como captação.
   2. Os dois CTA do hero pediam 555px e a coluna dava 552. Quebravam linha por 3px.
   3. O .btn-primario vazado foi contrato desta casa e continua valendo no site.
      A EXCEÇÃO é a ação de conversão da home e do formulário: numa página que existe
      para gerar lead, o botão principal precisa de preenchimento. Ele fica azul cheio
      SÓ em .acao-conversao, e o resto do site segue vazado como antes.
   4. A Terracota Norte é cor PRINCIPAL no manual (a "solidez da terra") e a única
      quente das seis. O site rodava em três azuis e um cinza. Ela entra nos pontos
      de atenção: numeração de cartão e kicker de seção.
   ============================================================ */

:root { --terracota: #CC553D; --terracota-escura: #A63F2B; }

/* ---------- 1. Cabeçalho de seção em grade editorial ---------- */
@media (min-width: 900px) {
  .secao-cabecalho {
    max-width: none;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 20px 56px;
    align-items: end;
    margin-bottom: 46px;
  }
  .secao-cabecalho > .kicker { grid-column: 1 / -1; }
  .secao-cabecalho > h2 { margin: 0; }
  .secao-cabecalho > p { margin: 0; padding-bottom: 4px; }
  /* Cabeçalho com um filho só volta a ser coluna única, senão sobra metade vazia. */
  .secao-cabecalho:has(> :only-child) { grid-template-columns: 1fr; max-width: 62ch; }
}
.secao-cabecalho h2 { font-size: clamp(26px, 3.1vw, 40px); line-height: 1.12; letter-spacing: -0.02em; }

/* ---------- 2. Hero: coluna de texto ganha espaço ---------- */
@media (min-width: 1024px) { .hero-grade { grid-template-columns: 1.18fr 1fr; } }
.site-hero h1 { font-size: clamp(32px, 4.8vw, 58px); line-height: 1.07; letter-spacing: -0.022em; max-width: 15ch; }
.site-hero .lead { font-size: clamp(17px, 1.2vw, 19px); max-width: 56ch; }

/* ---------- 3. Prova acima da dobra ---------- */
.hero-prova {
  list-style: none; padding: 22px 0 0; margin: 30px 0 0;
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  border-top: 1px solid var(--line);
}
.hero-prova li { display: flex; flex-direction: column; gap: 2px; }
.hero-prova strong { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; color: var(--accent-deep); line-height: 1.1; }
.hero-prova span { font-size: 13px; color: var(--text-muted); max-width: 20ch; line-height: 1.35; }
@media (max-width: 640px) { .hero-prova { gap: 12px 22px; } .hero-prova strong { font-size: 21px; } }

/* ---------- 4. Terracota nos pontos de atenção ---------- */
.card .num { color: var(--terracota-escura); font-weight: 600; }
.secao-cabecalho > .kicker { color: var(--terracota-escura); }
.secao-cabecalho > .kicker::before { background: var(--terracota); }

/* ---------- 5. Cartões com presença ---------- */
.card { padding: 26px 24px; border-radius: 14px; transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -28px rgba(5, 15, 30, 0.45); }
.card h3 { font-size: 18.5px; margin: 10px 0 8px; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform: none; } }

/* ---------- 6. A ação de conversão é cheia ---------- */
.btn-primario.acao-conversao:not(.js-wa) {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
  box-shadow: 0 10px 26px -14px rgba(27, 67, 191, 0.7);
}
.btn-primario.acao-conversao:not(.js-wa):hover {
  background: #12379e; border-color: #12379e; color: #fff;
}

/* ---------- 7. O formulário é um cartão elevado ---------- */
#diagnostico-gargalos .lead-form {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  max-width: 720px;
  box-shadow: 0 30px 60px -40px rgba(5, 15, 30, 0.35);
}
.lead-submit { width: 100%; margin-top: 6px; font-size: 16.5px; padding: 15px 22px; }
.lead-field input { padding: 13px 14px; border-radius: 10px; }
.lead-field input:focus {
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px rgba(27, 67, 191, 0.18);
  outline: none;
}


/* ============================================================
   COMPONENTES DA LANDING DO MÉTODO L.E.M.E.  (20/08/2026)
   O dono pediu "elementos cinematográficos" e gráficos, com os resultados
   aparecendo aos poucos. O movimento aqui é todo disparado por
   IntersectionObserver no js/site.js e todo desligado em prefers-reduced-motion:
   quem pede menos movimento recebe o número final e o traço já desenhado.
   ============================================================ */

/* ---------- A sigla logo abaixo do lead do hero ---------- */
.hero-sigla { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; }
.hero-sigla span {
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-deep); position: relative; padding-left: 16px;
}
.hero-sigla span::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 8px; height: 2px; border-radius: 2px; background: var(--terracota);
}

/* ---------- Quadro de gráfico ---------- */
.grafico-quadro {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
}
.grafico-quadro svg { width: 100%; height: auto; display: block; color: var(--text); }
.grafico-rota { margin: 0 auto 44px; max-width: 780px; }

.grafico-com-texto { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .grafico-com-texto { grid-template-columns: 1fr; } }

/* O traço se desenha quando entra na tela. O comprimento é generoso de propósito:
   qualquer caminho menor que isso fica coberto e a animação funciona igual. */
[data-desenha] .gi-linha, [data-desenha] .gl-rota {
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  transition: stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1);
}
[data-desenha] .gi-previsivel { transition-delay: .35s; }
[data-desenha].desenhado .gi-linha, [data-desenha].desenhado .gl-rota { stroke-dashoffset: 0; }
[data-desenha] .gi-area, [data-desenha] .gi-ponta, [data-desenha] .gl-pontos { opacity: 0; transition: opacity .7s ease .9s; }
[data-desenha].desenhado .gi-area, [data-desenha].desenhado .gi-ponta, [data-desenha].desenhado .gl-pontos { opacity: 1; }

/* ---------- Lista em ritmo, para a seção da dor ---------- */
.ritmo-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ritmo-lista li {
  padding-left: 18px; position: relative;
  color: var(--text-muted); font-size: 16.5px; line-height: 1.55;
}
.ritmo-lista li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 7px; height: 2px; background: var(--terracota); border-radius: 2px;
}

/* ---------- As quatro etapas do método ---------- */
.etapas-leme { display: grid; gap: 20px; }
.etapa {
  display: grid; grid-template-columns: 76px 1fr; gap: 26px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 16px; padding: 28px 28px 26px;
}
.etapa-letra {
  font-size: 44px; font-weight: 700; line-height: 1;
  color: var(--accent-deep); letter-spacing: -0.03em;
  border-top: 3px solid var(--terracota); padding-top: 12px;
}
.etapa h3 { font-size: 22px; margin: 0 0 4px; }
.etapa-lead { font-weight: 600; color: var(--text); margin: 0 0 10px; font-size: 16.5px; }
.etapa p { color: var(--text-muted); line-height: 1.7; margin: 0 0 12px; }
.etapa .lista-check { margin: 0 0 14px; }
.etapa-resultado {
  border-top: 1px solid var(--line); padding-top: 12px; margin: 0;
  font-size: 15.5px; color: var(--text-muted);
}
.etapa-resultado strong { color: var(--accent-deep); }
@media (max-width: 720px) {
  .etapa { grid-template-columns: 1fr; gap: 14px; padding: 24px 22px; }
  .etapa-letra { font-size: 34px; display: inline-block; }
}

/* ---------- Antes e depois ---------- */
.antes-depois { display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: stretch; }
.ad-coluna { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; }
.ad-rotulo {
  display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 14px;
}
.ad-antes .ad-rotulo, .ad-nao-serve .ad-rotulo { color: var(--terracota-escura); }
.ad-depois .ad-rotulo, .ad-serve .ad-rotulo { color: var(--accent-deep); }
.ad-coluna ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.ad-coluna li { color: var(--text-muted); font-size: 16px; line-height: 1.5; padding-left: 16px; position: relative; }
.ad-coluna li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 2px; border-radius: 2px; }
.ad-antes li::before, .ad-nao-serve li::before { background: var(--terracota); }
.ad-depois li::before, .ad-serve li::before { background: var(--accent); }
.ad-antes li, .ad-nao-serve li { font-style: italic; }
.ad-nao-serve li { font-style: normal; }
.ad-seta { align-self: center; font-size: 28px; color: var(--accent); }
@media (max-width: 860px) {
  .antes-depois { grid-template-columns: 1fr; }
  .ad-seta { transform: rotate(90deg); justify-self: center; }
}

/* ---------- Números que sobem ---------- */
.numeros-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.numero-bloco {
  border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px;
  background: var(--surface);
}
.numero-bloco strong {
  display: block; font-size: clamp(30px, 3.6vw, 44px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.numero-bloco span { display: block; margin-top: 10px; font-size: 14px; color: var(--text-muted); line-height: 1.4; }
.numero-destaque { border-color: var(--terracota); }
.numero-destaque strong { color: var(--terracota); }
@media (max-width: 900px) { .numeros-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .numeros-grade { grid-template-columns: 1fr; } }

/* No bloco escuro a terracota pura reprova; a versão clara do manual passa. */
.on-dark .numero-destaque { border-color: #E8836A; }
.on-dark .numero-destaque strong { color: #E8836A; }

/* Prova do hero também conta, e usa tabular para não dançar durante a animação. */
.hero-prova strong { font-variant-numeric: tabular-nums; }

/* ---------- Frase de fecho de seção ---------- */
.frase-fecho {
  margin: 36px 0 0; max-width: 62ch;
  font-size: 18px; line-height: 1.6; color: var(--text);
  border-left: 2px solid var(--terracota); padding-left: 18px;
}

/* ---------- Bloco do formulário ---------- */
.bloco-form {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: start;
  margin-top: 48px; padding-top: 44px; border-top: 1px solid var(--line);
}
.form-texto h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; margin: 0 0 14px; }
.form-texto p { color: var(--text-muted); line-height: 1.7; margin: 0 0 14px; }
.form-alt a { color: var(--accent-deep); font-weight: 600; }
@media (max-width: 900px) { .bloco-form { grid-template-columns: 1fr; gap: 28px; } }

/* O cartão do formulário: a regra antiga mirava #diagnostico-gargalos, que não existe mais. */
.bloco-form .lead-form {
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px; margin: 0;
  box-shadow: 0 30px 60px -40px rgba(5, 15, 30, 0.35);
}

/* Medido: a terracota escura (#A63F2B), que é a versão correta sobre fundo claro,
   dá 1,9:1 sobre o Azul Profundo e some. Nos blocos escuros o kicker e o filete
   usam a versão clara do manual, que passa com folga. */
.on-dark .secao-cabecalho > .kicker { color: #E8836A; }
.on-dark .secao-cabecalho > .kicker::before { background: #E8836A; }
.on-dark .frase-fecho { border-left-color: #E8836A; }
.on-dark .card .num { color: #E8836A; }
.on-dark .etapa-letra { border-top-color: #E8836A; }

/* ============================================================
   PÁGINA DE POLÍTICA, PORTADA DO styles.css  (21/08/2026)
   A /privacidade era a única página do site que ainda carregava o styles.css das
   landing pages, porque está em INTOCAVEIS e nunca passou pelo build. Para ela
   receber o cabeçalho, o rodapé e o design novos, a folha precisa trocar, e estes
   seletores existiam SÓ no styles.css: sem portá-los antes, a página viraria texto
   cru. Copiados como estavam, para não mudar o layout junto com a troca de folha.
   ============================================================ */

/* ---------- Política de Privacidade ---------- */
.politica { padding-top: 148px; }
.politica .section-head { margin-bottom: 44px; }
.politica h1 { font-size: var(--fs-h2); font-weight: 500; }
.pol-data { margin-top: 18px; font-size: 13.5px; color: var(--text-faint); }
.pol-texto { max-width: 720px; }
.pol-texto h2 {
  font-size: 20px; font-weight: 600; margin: 40px 0 12px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.pol-texto h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pol-texto p { color: var(--text-muted); line-height: 1.7; }
.pol-texto p + p { margin-top: 14px; }
.pol-texto strong { color: var(--text); font-weight: 600; }
.pol-texto ul { margin: 14px 0 0 20px; display: grid; gap: 9px; }
.pol-texto li { color: var(--text-muted); line-height: 1.6; }
.pol-link { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pol-link:hover { color: var(--accent-deep); }
.footer-priv { color: var(--text-faint); text-decoration: underline; text-underline-offset: 3px; }
.footer-priv:hover { color: var(--text-muted); }
.consent-link { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.on-dark .consent-link { color: var(--accent-bright); }
.pol-voltar { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .politica { padding-top: 116px; } .pol-texto h2 { font-size: 18.5px; margin-top: 32px; } }

/* ============================================================
   medicos.html — bloco das regras de publicidade médica (CFM)
   Duas colunas em oposição: o que a Resolução 2.336/2023 liberou
   e o que ela manteve vedado. Terracota Norte é a cor de alerta
   do manual, então a coluna do vedado usa --flag; a do permitido
   fica no Azul Horizonte, sem inventar cor nova.
   ============================================================ */
.cfm-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 46px; }
.cfm-col {
  padding: 32px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cfm-col-vedado { border-color: var(--flag-line); }
.cfm-col-titulo {
  font-family: var(--font-accent);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
}
.cfm-col-permitido .cfm-col-titulo { color: var(--accent-bright); }
.cfm-col-vedado .cfm-col-titulo { color: var(--flag-bright); }
.cfm-lista { list-style: none; display: grid; gap: 15px; }
.cfm-lista li {
  position: relative;
  padding-left: 28px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}
.cfm-lista li::before {
  position: absolute;
  left: 0;
  top: -0.06em;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}
.cfm-col-permitido .cfm-lista li::before { content: "+"; color: var(--accent-bright); }
.cfm-col-vedado .cfm-lista li::before { content: "\00d7"; color: var(--flag-bright); }
.cfm-fecho {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 17px;
  line-height: 1.62;
}
.cfm-fecho strong { color: var(--text); font-weight: 600; }
.cfm-fonte {
  margin-top: 18px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-faint);
  line-height: 1.6;
}
.cfm-fonte a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 860px) {
  .cfm-colunas { grid-template-columns: 1fr; }
  .cfm-col { padding: 28px 24px; }
}

/* ============================================================
   medicos.html — tema claro
   A landing de médicos roda em fundo claro do topo ao rodapé. Ela simplesmente
   NÃO usa .on-dark em lugar nenhum, então já herda a paleta clara da raiz de
   graça. Este bloco existe por dois motivos:

   1. Consertar o punhado de peças desenhadas assumindo fundo escuro (os brilhos,
      a malha da carta náutica, o cartão do WhatsApp, os campos do formulário),
      que ficariam invisíveis ou ilegíveis sobre claro.
   2. Trazer as cores secundárias do manual (Azul Céu, Cinza Neblina, Terracota
      Norte), que no tema escuro não tinham onde aparecer e agora carregam a
      distinção entre os blocos.

   Nada aqui toca .on-dark nem a raiz: a index continua exatamente como estava.
   ============================================================ */
body.tema-claro {
  /* Terracota Norte escurecida para servir como cor de TEXTO sobre claro.
     O #CC553D do manual dá 4,26:1 sobre branco e reprova em texto pequeno;
     este dá 5,6:1 sobre o cinza dos cartões. O #CC553D segue nas bordas e
     nos fundos, onde contraste de texto não se aplica. */
  --flag-text: #A8402A;
  /* Mesmo problema com o verde do WhatsApp: #25d366 sobre branco dá 2,4:1. */
  --wa-texto: #0F7A3D;
}

.prose { max-width: 720px; }


/* ============================================================
   PEDIDOS DE CSS DAS CORREÇÕES DE 21/08/2026
   As agentes que aplicaram os 185 achados foram proibidas de editar esta folha, para
   não se atropelarem no mesmo arquivo. Cada uma relatou o que faltava, e é isto.
   ============================================================ */

/* 1. Rótulo do formulário sem estilo. O base.css estiliza .lead-field > span, mas o
      formulário foi construído com <label>: desde que ele existe, os rótulos saem no
      texto padrão do navegador. Vale para a home e para toda página que ganhar o form. */
.lead-field > label {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}

/* 2. O .acoes só tinha regra dentro de .site-hero e .cta-bloco, então CTA no meio de
      seção saía sem display:flex. Isso elimina o style inline que havia em duas páginas. */
.secao .container > .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* 3. Link de WhatsApp dentro de cartão, sem .btn: saía na cor do texto e sem respiro. */
.card p > a.js-wa, .card > a.js-wa {
  display: inline-block; margin-top: 6px; font-weight: 600;
  color: var(--accent-deep); font-size: 15px;
}
.on-dark .card p > a.js-wa, .on-dark .card > a.js-wa { color: var(--accent-text); }

/* 4. Link inline no corpo do texto era invisível: o base.css dá a { color: inherit }
      e não havia regra depois, então link em parágrafo ficava igual ao texto. */
.texto a:not(.btn), .etapa p a:not(.btn), .pol-texto a:not(.btn), .frase-fecho a:not(.btn) {
  color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: var(--accent-line);
}
.texto a:not(.btn):hover, .etapa p a:not(.btn):hover, .pol-texto a:not(.btn):hover {
  text-decoration-color: currentColor;
}
.on-dark .texto a:not(.btn), .on-dark .etapa p a:not(.btn) { color: var(--accent-text); }

/* 5. O .antes-depois é 1fr auto 1fr, desenhado para três filhos com a seta no meio.
      Com dois filhos a coluna "auto" vira uma calha vazia e desalinha o bloco. */
.antes-depois:not(:has(> .ad-seta)) { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .antes-depois:not(:has(> .ad-seta)) { grid-template-columns: 1fr; } }

/* 6. Terracota escura reprova sobre azul escuro (1,9:1, medido). Dentro de bloco
      escuro o rótulo da coluna negativa usa a versão clara do manual. */
.on-dark .ad-antes .ad-rotulo, .on-dark .ad-nao-serve .ad-rotulo { color: #E8836A; }
.on-dark .ad-antes li::before, .on-dark .ad-nao-serve li::before { background: #E8836A; }
.on-dark .ad-coluna { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }

/* 7. .numeros-grade nasceu com quatro colunas fixas; com cinco itens o quinto ficava órfão. */
.numeros-grade.grade-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .numeros-grade.grade-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .numeros-grade.grade-5 { grid-template-columns: repeat(2, 1fr); } }

/* 8. Bloco de texto logo depois de uma grade de cartões, sem respiro próprio. */
.bloco-apos-grade { margin-top: 44px; }

/* 9. Nota de cálculo da comissão, na /indicacao. */
.nota-comissao { margin-top: 22px; color: var(--text-faint); font-size: 14px; line-height: 1.5; }

/* 10. Índice da política. O .secao-cabecalho roda com align-items:end, que serve quando
       as duas colunas têm alturas parecidas; ali a direita carrega o índice inteiro. */
.politica .secao-cabecalho { align-items: start; }
.pol-indice { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.pol-indice li { padding-left: 18px; position: relative; }
.pol-indice li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 7px; height: 2px; border-radius: 2px; background: var(--terracota);
}
.pol-indice a { color: var(--text-muted); font-size: 15px; text-decoration: none; }
.pol-indice a:hover { color: var(--accent-deep); text-decoration: underline; }

/* Os dois CTA do hero empilhavam quando o rótulo era longo, e a correção anterior foi
   espremer o respiro lateral de 26px para 18px. Aquilo funcionava enquanto o botão era
   pílula, porque a ponta redonda disfarça aperto; com o canto de 8px o aperto aparece.

   A causa nunca foi o layout, era o rótulo: "Quero construir aquisição previsível" tem
   35 caracteres. Medido nesta página a 1100px, o par pedia 579px numa coluna de 548,
   estourando por 31px. Com o rótulo em 26 caracteres o par pede 511px e sobram 37px,
   então o respiro pode voltar ao valor da fundação.

   O nowrap e o flex continuam: eles é que mantêm os dois do mesmo tamanho na linha.
   Abaixo de 1024px voltam a quebrar, que ali é o comportamento certo. */
@media (min-width: 1024px) {
  .site-hero .acoes { flex-wrap: nowrap; }
  .site-hero .acoes > .btn {
    flex: 1 1 0; min-width: 0; justify-content: center; text-align: center;
  }
}


/* ============================================================
   COMPONENTES DE CONVERSÃO DO MÉTODO  (21/08/2026)
   Vieram da leitura do site da Konge, que vende o SCP, e resolvem o que faltava:
   o método entrava como catálogo de etapas em vez de resposta a um problema.
   ============================================================ */

/* O ciclo do improviso: cinco passos que voltam ao começo. A numeração em Terracota
   e a seta de retorno no último item dizem "isso se repete" sem precisar escrever. */
.ciclo {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.ciclo li {
  position: relative; padding: 22px 18px 20px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg);
  font-size: 17px; font-weight: 500; color: var(--text); line-height: 1.35;
}
.ciclo li span {
  display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  color: var(--terracota-escura); margin-bottom: 10px;
}
.ciclo li:last-child { border-color: var(--terracota); }
.ciclo li:last-child::after {
  content: "↺"; position: absolute; right: 14px; top: 16px;
  color: var(--terracota); font-size: 17px;
}
@media (max-width: 1000px) { .ciclo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .ciclo { grid-template-columns: 1fr; } }

/* A sigla decodificada: cada letra com o PORQUÊ dela, não só a palavra. */
.sigla-decodificada {
  list-style: none; padding: 0; margin: 0 0 44px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.sigla-decodificada li { border-top: 2px solid var(--accent); padding-top: 16px; }
.sigla-decodificada strong {
  display: block; font-size: 19px; letter-spacing: -0.01em; margin-bottom: 8px;
  color: var(--text);
}
.sigla-decodificada span { color: var(--text-muted); font-size: 15.5px; line-height: 1.55; }
.sigla-decodificada li:nth-child(4) { border-top-color: var(--terracota); }
@media (max-width: 900px) { .sigla-decodificada { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sigla-decodificada { grid-template-columns: 1fr; } }

/* Tabela comparativa. Prosa dizia a mesma coisa e ninguém lia. */
.rolagem-tabela { overflow-x: auto; margin: 0 0 8px; }
.tabela-comparativa { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 16px; }
.tabela-comparativa th, .tabela-comparativa td {
  text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top;
}
.tabela-comparativa thead th {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600; border-bottom-width: 2px;
}
.tabela-comparativa thead th:last-child { color: var(--accent-deep); }
.tabela-comparativa tbody th {
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600; width: 22%;
}
.tabela-comparativa td { color: var(--text-muted); }
.tabela-comparativa td:last-child { color: var(--text); font-weight: 500; }
.tabela-comparativa tbody tr:last-child th, .tabela-comparativa tbody tr:last-child td { border-bottom: none; }
.on-dark .tabela-comparativa thead th:last-child { color: var(--accent-text); }

/* A oferta de entrada nomeada como a primeira etapa do próprio método. É o que faz o
   método parar de ser catálogo e virar caminho com porta de entrada. */
.selo-primeiro-passo {
  margin-top: 18px; padding: 14px 16px;
  border-left: 2px solid var(--terracota); background: var(--surface);
  border-radius: 0 10px 10px 0;
  font-size: 15.5px; line-height: 1.55; color: var(--text-muted);
}
.selo-primeiro-passo strong { color: var(--text); }


/* ============================================================
   CARTÕES DE QUEM RESPONDE  (21/08/2026)
   Antes eram foto e texto soltos num .duas-colunas, sem moldura e sem hierarquia:
   o cargo saía do mesmo tamanho do corpo e a foto flutuava. Aqui viram cartão de
   verdade, com a foto ancorada numa faixa em Azul Profundo, cargo em caixa alta
   sobre filete Terracota, e uma nota de rodapé que separa quem senta na reunião de
   quem sustenta a operação por trás.
   ============================================================ */

.time-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 860px) { .time-grade { grid-template-columns: 1fr; } }

.time-card {
  position: relative; overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0 0 26px;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.time-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 26px 50px -34px rgba(5, 15, 30, 0.45);
}

/* A faixa de topo dá a âncora da foto e o azul da marca sem pintar o cartão inteiro. */
.time-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 108px;
  background: linear-gradient(160deg, #182752 0%, #26364D 100%);
}

.time-foto {
  position: relative; z-index: 1;
  display: block; margin: 52px 0 0 30px;
  width: 104px; height: 104px; border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--bg);
  box-shadow: 0 10px 26px -14px rgba(5, 15, 30, .5);
}

.time-corpo { padding: 20px 30px 0; }
.time-cargo {
  display: inline-block; margin-bottom: 10px; padding-top: 9px;
  border-top: 2px solid var(--terracota);
  font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--terracota-escura);
}
.time-card h3 { font-size: 21px; margin: 0 0 10px; letter-spacing: -0.014em; }
.time-card p { color: var(--text-muted); line-height: 1.7; margin: 0 0 12px; font-size: 16px; }
.time-nota {
  margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--text-faint);
}

@media (max-width: 720px) {
  .time-foto { width: 84px; height: 84px; margin: 62px 0 0 24px; }
  .time-corpo { padding: 18px 24px 0; }
  .time-card { padding-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .time-card, .time-card:hover { transition: none; transform: none; }
}


/* ============================================================
   COMPONENTES DE ESTUDO DE CASO  (21/08/2026)
   Pedido do dono: estudo de caso não pode ser texto corrido, precisa ser algo que dê
   vontade de ler. Não há foto do cliente disponível e inventar imagem de empresa real
   está fora de questão, então o material visual sai do PRÓPRIO conteúdo: a linha do
   tempo, os números citados e as falas já registradas na imprensa.
   ============================================================ */

/* ---------- Capa do artigo ---------- */
.artigo-capa {
  position: relative; overflow: hidden;
  border-radius: 18px; margin: 0 0 40px;
  padding: 44px 40px;
  background:
    radial-gradient(900px 380px at 10% -20%, rgba(86,150,251,.28), transparent 60%),
    radial-gradient(600px 320px at 95% 10%, rgba(204,85,61,.18), transparent 62%),
    linear-gradient(155deg, #050F1E 0%, #182752 100%);
  color: #fff;
}
.artigo-capa .capa-selo {
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #E8836A; display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.artigo-capa .capa-selo::before { content: ""; width: 26px; height: 2px; background: #E8836A; }
.artigo-capa .capa-frase { font-size: clamp(19px, 2.2vw, 25px); line-height: 1.35; margin: 0; max-width: 30ch; color: #fff; }
.artigo-capa .capa-fonte { margin: 20px 0 0; font-size: 13.5px; color: #9CB2BF; }
@media (max-width: 640px) { .artigo-capa { padding: 32px 24px; } }

/* ---------- Ficha da empresa analisada ---------- */
.caso-ficha {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin: 0 0 36px; padding: 20px 24px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
}
.caso-ficha-logo { height: 26px; width: auto; flex-shrink: 0; }
.caso-ficha-corpo { flex: 1 1 320px; min-width: 0; }
.caso-ficha-rot {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 5px;
}
.caso-ficha-corpo p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.caso-ficha-link {
  flex-shrink: 0; font-size: 13.5px; font-weight: 600; color: var(--accent-deep);
  white-space: nowrap;
}
@media (max-width: 640px) { .caso-ficha { padding: 18px 20px; } }

/* ---------- Números do caso ---------- */
.caso-numeros {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 36px 0; padding: 0; list-style: none;
}
.caso-numeros li {
  border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px; background: var(--bg);
}
.caso-numeros li svg { width: 18px; height: 18px; color: var(--text-faint); display: block; margin-bottom: 10px; }
.caso-numeros strong {
  display: block; font-size: clamp(22px, 2.4vw, 30px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1; color: var(--accent-deep); font-variant-numeric: tabular-nums;
}
.caso-numeros span { display: block; margin-top: 9px; font-size: 13.5px; color: var(--text-muted); line-height: 1.4; }
@media (max-width: 860px) { .caso-numeros { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .caso-numeros { grid-template-columns: 1fr; } }

/* ---------- Foto do caso ---------- */
.caso-foto { margin: 36px 0; }
.caso-foto img { width: 100%; height: auto; display: block; border-radius: 14px; }
.caso-foto figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-faint); }

/* ---------- Linha do tempo ---------- */
.linha-tempo { list-style: none; padding: 0; margin: 36px 0; position: relative; }
.linha-tempo::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, var(--terracota), var(--accent) 45%, var(--accent-deep));
  border-radius: 2px;
}
.linha-tempo li { position: relative; padding: 0 0 26px 34px; }
.linha-tempo li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--accent);
}
.linha-tempo li:first-child::before { border-color: var(--terracota); }
.linha-tempo li:last-child::before { border-color: var(--accent-deep); background: var(--accent-deep); }
.linha-tempo b {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--terracota-escura); margin-bottom: 5px;
}
.linha-tempo span { display: block; color: var(--text-muted); line-height: 1.6; font-size: 16px; }
.linha-tempo em { color: var(--text); font-style: normal; font-weight: 600; }

/* ---------- Citação destacada ---------- */
.caso-citacao {
  margin: 36px 0; padding: 26px 28px;
  background: var(--surface); border-left: 3px solid var(--terracota); border-radius: 0 14px 14px 0;
}
.caso-citacao p { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--text); }
.caso-citacao footer { margin-top: 12px; font-size: 14px; color: var(--text-faint); }

/* ---------- Antes e depois do caso ---------- */
.caso-virada { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 36px 0; }
.caso-virada > div { border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px; background: var(--bg); }
.caso-virada .rot {
  display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 10px;
}
.caso-virada .antes .rot { color: var(--terracota-escura); }
.caso-virada .depois { border-color: var(--accent-line); }
.caso-virada .depois .rot { color: var(--accent-deep); }
.caso-virada p { margin: 0; color: var(--text-muted); line-height: 1.6; font-size: 16px; }
@media (max-width: 720px) { .caso-virada { grid-template-columns: 1fr; } }

/* Nota de aferição: número de rede social muda todo dia, então o artigo diz quando foi
   conferido e linka o perfil. Sem isso o dado envelhece em silêncio. */
.caso-aferido {
  margin: -22px 0 36px; font-size: 13.5px; line-height: 1.55; color: var(--text-faint);
  padding-left: 14px; border-left: 2px solid var(--line);
}
.caso-aferido a { color: var(--accent-deep); }

/* ============================================================
   O CANTO, AGORA VALENDO PARA OS COMPONENTES
   ============================================================
   O bloco de tokens acima já decidiu isto e explicou o porquê: "8px é o teto
   (BTG usa 4px em 5 de 8 ocorrências; J.P. Morgan usa 2px e 8px). 14px lê como
   aplicativo, 8px lê como documento."

   Só que a decisão parou nos tokens. Medido no site no ar em 26/08/2026: o
   css/site.css tem 9 ocorrências de 14px, 6 de 16px, 2 de 18px e 6 de pílula
   (999px), contra 4 usos do token. Ou seja, --radius: 8px estava declarado e
   praticamente ninguém consumia. É por isso que a página continuava lendo como
   aplicativo mesmo depois da limpeza de cor.

   Este bloco liga os componentes ao token. Não inventa valor novo: usa os dois
   que já existem.

   O que NÃO é tocado, de propósito:
   - border-radius: 50% (ponto de lista, avatar, marcador) continua círculo.
   - border-radius: 2px (fio, haste, barra) continua fio.
   - styles.css NÃO é tocado. Ele é a fundação das landing pages de anúncio, que
     carregam styles.css e nunca este arquivo. Botão de LP é elemento de conversão
     testado e não se mexe nele de carona numa mudança do site institucional.
   ============================================================ */

/* O botão. É a mudança mais visível das duas: .btn nasce com 999px lá no
   styles.css:277, e pílula é justamente o que separa "aplicativo" de
   "documento". O :focus-visible precisa acompanhar, senão o anel de foco
   contorna um raio que o botão não tem mais. */
.btn,
.btn:focus-visible { border-radius: var(--radius); }
.nav-acao,
.nav-acao:focus-visible { border-radius: var(--radius); }

/* Contêineres: tudo que hoje é 10, 12, 14, 16 ou 18px passa a ser o teto. */
.nav-toggle,
.card,
.aviso,
.faq-site details,
.artigo-card a,
.plano-card,
.grafico-quadro,
.etapa,
.ad-coluna,
.numero-bloco,
.ciclo li,
.time-card,
.artigo-capa,
.caso-ficha,
.caso-numeros li,
.caso-foto img,
.caso-virada > div,
.bloco-form .lead-form,
#diagnostico-gargalos .lead-form { border-radius: var(--radius); }

/* Controles e etiquetas pequenas: o degrau menor. Chip em pílula é o tique de
   startup que o bloco de tokens já tinha tirado da cor e faltava tirar da forma. */
.lead-field input,
.lead-field select,
.marcas span,
.area-chip,
.plano-selo,
.marca-item img[src$="vo-carlos-cafe.jpg"] { border-radius: var(--radius-sm); }

/* ============================================================
   FAIXA DE CLIENTES: LOGO + NOME
   ============================================================
   Decisão do dono em 26/08/2026: todo cliente aparece com logo E nome.
   O motivo é prático. Marca regional não é reconhecida de relance, e wordmark
   espremido em 24px vira borrão. Com o nome ao lado, o logo para de carregar
   sozinho o trabalho de identificar, e por isso pode ficar MENOR e mais uniforme.
   Isso também dissolve o problema que o bloco de equalização óptica acima resolvia
   à mão, marca por marca.

   Os logos entram como silhueta BRANCA. Não é estética, é legibilidade: a faixa é
   escura, e Certisign (#211858) e Tramontina (#0000b7) sumiriam ali. Dois dos três
   logos que já existiam (Smart Coffee e Business) já eram brancos, então a faixa
   sempre foi um sistema monocromático: agora ele fica explícito e vale para todos.

   Vô Carlos Café é a exceção declarada: é um brasão circular com fundo próprio, e
   não um wordmark. Branquear aquilo apagaria o desenho inteiro.
   ============================================================ */
.marca-item { gap: 11px; opacity: 0.78; }
.marca-item:hover { opacity: 1; }

/* Altura única, agora que o nome identifica. As regras por arquivo do bloco antigo
   continuam existindo acima e são sobrescritas aqui de propósito. */
.marca-item img,
.marca-item img[src$="giraffas.svg"],
.marca-item img[src$="smart-coffee.png"],
.marca-item img[src$="business.png"],
.marca-item img[src$="tramontina.svg"],
.marca-item img[src$="certisign.svg"],
.marca-item img[src$="ffa.svg"] {
  height: 22px;
  width: auto;
  /* Qualquer logo, claro ou escuro, vira branco puro. Resolve num lugar só o que
     seria um arquivo alternativo por marca. */
  filter: brightness(0) invert(1);
}

/* Os DOIS brasões circulares vão bem mais altos, e não é capricho: a 22px eles
   perdem o miolo e viram um anel cinza. A régua continua a do bloco antigo, o olho
   compara ÁREA e não altura, então marca quadrada precisa de mais altura que
   assinatura horizontal para pesar igual. */
.marca-item img[src$="giraffas.svg"] { height: 38px; }

/* O brasão do Vô Carlos mantém as cores e o recorte: tem fundo próprio e não é
   wordmark, então branquear apagaria o desenho inteiro. */
.marca-item img[src$="vo-carlos-cafe.jpg"] {
  height: 38px;
  filter: none;
  border-radius: var(--radius-sm);
}

.marca-nome {
  font-size: var(--fs-etiqueta);
  letter-spacing: 0.01em;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 680px) {
  .marca-nome { font-size: var(--fs-apoio); }
}

/* ============================================================
   CONSERTO DE DOBRA DA HOME (28/08/2026)

   Este bloco está no FIM do arquivo de propósito, e isso é o conserto em si.

   Já existiam duas tentativas de encaixar o hero em tela baixa, nas linhas 92-95 e 1543,
   as duas em @media (min-width: 861px) and (max-height: 920px). Nenhuma das duas funcionava:
   a regra da linha 1889 veio depois no arquivo, tem a MESMA especificidade e NÃO tem media
   query, então vencia as duas por ordem de cascata. Cada camada de redesign acrescentou um
   font-size novo para .site-hero h1 sem repor a regra de altura, e o conserto morreu calado.

   Medido em 1366x768 antes deste bloco: título em 58px, cinco linhas, e os dois botões do
   hero 41px ABAIXO da dobra. Em um site que recebe tráfego pago, é o CTA fora da tela na
   altura de laptop mais comum que existe.

   Regra: qualquer ajuste por altura de .site-hero precisa vir DEPOIS da última regra
   incondicional do mesmo seletor. Ao acrescentar um font-size novo lá em cima, volte aqui.
   ============================================================ */
@media (min-width: 861px) and (max-height: 940px) {
  .site-hero { padding-top: 88px; }
  /* 44px e não 46px por causa do espanhol: o H1 do /es tem 84 caracteres contra os 80 do
     português e, a 46px, quebrava em seis linhas e jogava os botões 18px fora da dobra. */
  .site-hero h1 { font-size: clamp(32px, 3.4vw, 44px); }
  .site-hero .lead { margin-top: 16px; }
  .site-hero .acoes { margin-top: 24px; }
  /* O espanhol precisa de um ponto a menos: o H1 do /es tem 84 caracteres contra os 80 do
     português e, com o mesmo corpo, quebra em uma linha a mais. Ajuste pelo lang em vez de
     encolher a home inteira, e em vez de reescrever a frase da marca em outro idioma. */
  html[lang="es"] .site-hero h1 { font-size: clamp(30px, 3.1vw, 41px); }
}