/* Folha de estilo do site (página única: home).
   Extraída em 31/08/2026 do CSS que estava duplicado por cópia nas páginas antigas.

   Paleta (31/08/2026): trocada do par sage + ocre para o par ameixa + oliva,
   a partir do moodboard aprovado. Os dois tons âncora são Pantone:
   20-0124 TPM "Aubergine Gleam" (#3E2138) e 20-0190 TPM "Perch" (#383E33).
   O vinho (#7B2450) é o acento quente — herdou o papel do antigo `--thread`
   (fio lateral, contadores, foco). O oliva escuro (#5E6A31) é o acento frio,
   usado no itálico dos títulos. Todos os pares texto/fundo foram medidos:
   nenhum fica abaixo de 4.5:1 em texto normal nem de 3:1 em texto grande.

   Acessibilidade tipográfica (31/08/2026): nada de tamanho de fonte em px.
   - `html` usa porcentagem, então o tamanho-base do navegador (ou a preferência
     de fonte grande do celular/notebook) escala o site inteiro.
   - Todo font-size é rem; os clamp() têm um termo em rem, senão o texto ficaria
     preso ao viewport e ignoraria a preferência do usuário.
   - As media queries são em em: quem usa fonte grande recebe o layout empilhado
     mais cedo, antes de a coluna apertar o texto.
   - Colunas de grid em rem/minmax, não em px, para não cortar texto ampliado.
   - **Recuo e espaçamento continuam em px de propósito.** São layout, não
     tipografia: em rem, a margem lateral cresce junto com a fonte e estoura o
     viewport do celular (13px de rolagem horizontal a 200%, medido). */
:root{
  --paper:#F3EFEA;
  --paper-2:#EAE3DC;
  --paper-3:#DCD3CB;
  --ink:#241A21;
  --ink-soft:#5A4B54;
  --aubergine:#3E2138;
  --aubergine-fundo:#33192C;
  --perch:#383E33;
  --oliva:#5E6A31;
  --polpa:#C6CE86;
  --vinho:#7B2450;
  --rule:rgba(36,26,33,.15);
  --rule-forte:rgba(36,26,33,.28);
  --maxw:1180px;
  --rail:88px;
}

*{box-sizing:border-box}
html{
  font-size:106.25%; /* 17px quando o padrão do navegador é 16px — e acompanha se o usuário aumentar */
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  /* Duas lavagens muito fracas dão profundidade ao papel sem virar gradiente
     visível: ameixa entrando pelo alto à direita, oliva subindo do rodapé. */
  background:var(--paper);
  background-image:
    radial-gradient(1100px 640px at 88% -10%, rgba(123,36,80,.11), transparent 62%),
    radial-gradient(900px 560px at -8% 106%, rgba(94,106,49,.13), transparent 60%);
  background-repeat:no-repeat;
  color:var(--ink);
  font-family:"Karla",system-ui,sans-serif;
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* Grão. Tira o aspecto de cor chapada de tela e aproxima do papel do moodboard.
   É um SVG inline (permitido pelo `img-src ... data:` do .htaccess), fica acima
   do conteúdo mas abaixo do fio/topo/botão flutuante, e não captura clique. */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media print{body::before{display:none}}
img{max-width:100%;display:block}
a{color:inherit}
/* Com fonte muito ampliada uma palavra sozinha fica mais larga que o celular e
   empurra a página inteira pro lado. Deixar quebrar é melhor que rolar na horizontal. */
body{overflow-wrap:break-word}
.display,.hero h1,.marca,.eyebrow{overflow-wrap:break-word;hyphens:auto}

.display{font-family:"Newsreader",Georgia,serif;font-weight:300;letter-spacing:-.015em;line-height:1.08}
.display em{font-style:italic;color:var(--oliva)}
h2.display{font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem);margin:0 0 .6em}
h3{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:1.35rem;line-height:1.25;letter-spacing:-.01em;margin:0 0 .45em}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.75rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 1.6rem;display:block}
/* O traço curto antes do rótulo é o mesmo gesto do <i> da faixa do hero: amarra
   os rótulos da página como uma família só. Em em para acompanhar a fonte. */
.eyebrow::before{content:"";display:inline-block;width:1.8em;height:1px;background:var(--vinho);vertical-align:.35em;margin-right:.9em}
.lede{font-size:clamp(1.05rem,1rem + .4vw,1.22rem);color:var(--ink-soft);max-width:58ch}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(min-width:56.25em){.wrap{padding-left:var(--rail)}}
section{padding:clamp(64px,9vw,120px) 0;border-top:1px solid var(--rule);position:relative;z-index:0}
section:first-of-type{border-top:0}
/* Alternância de tom. A página é uma só e muito longa: sem essa respiração as
   seções viram uma coluna contínua e o leitor perde onde uma acaba. */
.tom{background:var(--paper-2);border-top:0}

/* fio */
#fio{position:fixed;left:38px;top:0;bottom:0;width:1px;background:var(--rule);z-index:5;display:none}
@media(min-width:56.25em){#fio{display:block}}
#fio .traco{position:absolute;left:0;top:0;width:1px;height:0;background:var(--vinho)}
#fio .no{position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;background:var(--paper);border:1px solid var(--rule-forte);transition:background .4s ease,border-color .4s ease,transform .4s ease}
#fio .no.aceso{background:var(--vinho);border-color:var(--vinho);transform:scale(1.15)}
@media (prefers-reduced-motion:reduce){#fio .traco{height:100% !important;opacity:.35}#fio .no{transition:none}}

header.topo{position:sticky;top:0;z-index:10;background:rgba(243,239,234,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
/* O nome dela é a assinatura da página: pesa mais que o resto do topo (pedido da Thais em 31/08/2026). */
.marca{display:inline-flex;align-items:center;gap:.54em;font-family:"Newsreader",serif;font-weight:500;font-size:clamp(1.4rem,1.25rem + .7vw,1.75rem);line-height:1.15;letter-spacing:.005em}
/* Tudo em em, não px: o conjunto inteiro cresce junto com o nome e com a fonte
   grande do usuário. O fio vertical é o que amarra símbolo e nome como uma
   marca só — sem ele o símbolo lê como ícone solto ao lado de um texto. */
.marca-simbolo{width:1.48em;height:auto;flex:0 0 auto}
.marca-fio{width:1px;height:1.35em;background:var(--rule-forte);flex:0 0 auto}
.marca-nome{display:block}
.marca-crp{font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:4px}
/* O símbolo ao lado do nome alargou a marca em ~60px e o menu não cabia mais na
   mesma linha. Gap menor e quebra interna: o menu cede, o cabeçalho não vira duas faixas. */
nav.menu{display:none;flex-wrap:wrap;justify-content:flex-end;gap:8px 20px;font-size:.88rem}
@media(min-width:56.25em){nav.menu{display:flex}}
nav.menu a{text-decoration:none;color:var(--ink-soft);padding-bottom:2px;border-bottom:1px solid transparent}
nav.menu a:hover,nav.menu a:focus-visible{color:var(--ink);border-bottom-color:var(--vinho)}
/* Em tela baixa (celular deitado, ou fonte grande empurrando o topo pra duas
   linhas) o topo grudado come metade do que dá pra ler. Solta ele. */
@media(max-height:520px){header.topo{position:static}}

.btn{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;max-width:100%;gap:10px;background:var(--aubergine);color:var(--paper);text-decoration:none;font-size:.92rem;font-weight:500;padding:14px 26px;border-radius:2px;transition:background .25s ease,transform .25s ease}
.btn:hover,.btn:focus-visible{background:var(--vinho);transform:translateY(-1px)}
.btn.claro{background:transparent;color:var(--ink);border:1px solid var(--rule-forte)}
.btn.claro:hover,.btn.claro:focus-visible{background:var(--aubergine);color:var(--paper);border-color:var(--aubergine)}
.btn svg{width:1em;height:1em;flex:0 0 auto}

.hero{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px)}
.hero-grid{display:grid;gap:clamp(36px,5vw,64px);grid-template-columns:minmax(0,1fr)}
/* Duas colunas só quando há largura pra isso. Na regra base o texto ficaria
   espremido em ~60% de uma tela de celular. minmax(0,…) impede que uma palavra
   grande do h1 estoure a coluna com fonte ampliada. */
@media(min-width:60em){.hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);align-items:end}}
.hero h1{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:clamp(2.5rem,1.6rem + 4.4vw,4.4rem);line-height:1.03;letter-spacing:-.025em;margin:0 0 1.1rem}
.hero h1 em{font-style:italic;color:var(--oliva)}
.hero .lede{margin-bottom:2.2rem}
.hero-acoes{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* O bloco ameixa deslocado atrás da foto é o único elemento decorativo da
   página. Só entra em duas colunas: no celular ele sairia pela lateral e criaria
   rolagem horizontal. */
.retrato-quadro{position:relative;width:100%;max-width:450px;justify-self:end}
.retrato{aspect-ratio:3/4;width:100%;height:auto;object-fit:cover;border:1px solid var(--rule);background:var(--paper-2);position:relative;z-index:1}
@media(min-width:60em){
  .retrato-quadro::before{content:"";position:absolute;right:-20px;bottom:-20px;width:74%;height:62%;background:var(--aubergine);opacity:.22;z-index:0}
}

.faixa{border-top:1px solid var(--rule);margin-top:clamp(40px,6vw,72px);padding-top:22px;display:flex;flex-wrap:wrap;gap:10px 34px;font-family:"IBM Plex Mono",monospace;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.faixa i{font-style:normal;color:var(--vinho);margin-right:8px}

.duas{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:minmax(0,1fr)}
@media(min-width:56.25em){.duas{grid-template-columns:.85fr 1.15fr}}

.formacao{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--rule)}
.formacao li{display:grid;grid-template-columns:1fr;gap:2px;padding:16px 0;border-bottom:1px solid var(--rule)}
@media(min-width:40em){.formacao li{grid-template-columns:minmax(6rem,auto) 1fr;gap:20px;align-items:baseline}}
.formacao .ano{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;color:var(--vinho)}
.formacao .desc{color:var(--ink-soft);font-size:.97rem}
.formacao .desc b{display:block;color:var(--ink);font-weight:600;font-size:1.06rem;letter-spacing:-.01em;margin-bottom:3px}
.formacao .curso{display:block;font-size:.9rem;color:var(--ink-soft)}
.formacao-extra{margin:14px 0 0;font-size:.85rem;line-height:1.6;color:var(--ink-soft)}
.formacao-extra b{color:var(--ink);font-weight:600}

.temas{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:43.75em){.temas{grid-template-columns:1fr 1fr}}
.temas li{background:var(--paper);padding:30px 28px;transition:background .3s ease}
.temas li:hover{background:var(--paper-3)}
.temas p{font-size:.97rem;color:var(--ink-soft);margin:0}

.destaque{background:var(--aubergine-fundo);color:var(--paper-2);border-top:0}
.destaque .eyebrow{color:rgba(243,239,234,.6)}
.destaque .eyebrow::before{background:var(--polpa)}
.destaque h2.display em{color:var(--polpa)}
.destaque p{color:rgba(243,239,234,.8)}
.destaque .btn{background:var(--paper);color:var(--aubergine-fundo)}
.destaque .btn:hover,.destaque .btn:focus-visible{background:var(--polpa);color:var(--aubergine-fundo)}
.destaque .cols{display:grid;gap:32px;margin-top:44px}
@media(min-width:50em){.destaque .cols{grid-template-columns:repeat(3,1fr);gap:44px}}
.destaque .cols h3{color:var(--paper);font-size:1.12rem}
.destaque .cols p{font-size:.94rem;margin:0}
.destaque .cols span{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.16em;color:var(--polpa);display:block;margin-bottom:12px}

.servicos{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:50em){.servicos{grid-template-columns:repeat(3,1fr)}}
.servicos li{background:var(--paper);padding:28px 26px;transition:background .3s ease}
.servicos li:hover{background:var(--paper-3)}
.servicos span{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vinho);display:block;margin-bottom:12px}
.servicos p{font-size:.94rem;color:var(--ink-soft);margin:0}

.passos{list-style:none;counter-reset:p;margin:0;padding:0}
.passos li{counter-increment:p;display:grid;grid-template-columns:1fr;gap:6px;padding:26px 0;border-bottom:1px solid var(--rule)}
.passos li:first-child{border-top:1px solid var(--rule)}
@media(min-width:45em){.passos li{grid-template-columns:minmax(4rem,auto) minmax(12rem,15rem) 1fr;gap:28px;align-items:baseline}}
.passos li::before{content:counter(p,decimal-leading-zero);font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:300;font-size:1.7rem;line-height:1;color:var(--vinho)}
.passos strong{font-family:"Newsreader",serif;font-weight:400;font-size:1.2rem}
.passos p{color:var(--ink-soft);font-size:.97rem;margin:0}

.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;font-family:"Newsreader",serif;font-size:1.18rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;border-right:1px solid var(--vinho);border-bottom:1px solid var(--vinho);transform:translateY(-70%) rotate(45deg);transition:transform .25s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .resp{padding:0 0 24px;color:var(--ink-soft);max-width:66ch;font-size:.99rem}

/* O par do moodboard são dois blocos escuros: a ameixa em `.destaque` e o verde
   Perch aqui, no fechamento. É o que dá identidade à página sem depender de foto. */
.fechar{background:var(--perch);color:var(--paper-2);border-top:0}
.fechar h2{max-width:16ch;color:var(--paper)}
.fechar .display em{color:var(--polpa)}
.fechar .eyebrow{color:rgba(243,239,234,.6)}
.fechar .eyebrow::before{background:var(--polpa)}
.fechar .lede{color:rgba(243,239,234,.82)}
.fechar .btn{background:var(--paper);color:var(--perch)}
.fechar .btn:hover,.fechar .btn:focus-visible{background:var(--polpa);color:var(--perch)}

footer{border-top:1px solid var(--rule);padding:44px 0;font-size:.85rem;color:var(--ink-soft)}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between}
footer a{text-decoration:none;border-bottom:1px solid var(--rule-forte)}
footer a:hover{border-bottom-color:var(--vinho)}
footer .aviso{max-width:52ch;font-family:"IBM Plex Mono",monospace;font-size:.72rem;line-height:1.7;letter-spacing:.04em}
footer .privacidade{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule)}
footer .privacidade b{font-weight:600}

.flutua{position:fixed;right:18px;bottom:18px;z-index:20;display:inline-flex;align-items:center;gap:9px;background:var(--aubergine);color:var(--paper);text-decoration:none;padding:13px 20px;border-radius:2px;font-size:.88rem;font-weight:500;box-shadow:0 8px 24px rgba(51,25,44,.24)}
.flutua:hover,.flutua:focus-visible{background:var(--vinho)}
.flutua svg{width:1em;height:1em;flex:0 0 auto}

/* ——— Páginas institucionais da ferramenta interna de relatórios do Google Ads.
   São duas páginas estáticas fora do funil clínico (apresentação e política de
   privacidade do app OAuth), sem script, formulário ou rastreamento. Reaproveitam
   a paleta e a tipografia do site; o que muda é o ritmo: coluna única de leitura,
   não página de captação. */
.doc-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 20px;font-size:.88rem}
.doc-nav a{text-decoration:none;color:var(--ink-soft);padding-bottom:2px;border-bottom:1px solid transparent}
.doc-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--vinho)}
.doc-nav a:hover,.doc-nav a:focus-visible{color:var(--ink);border-bottom-color:var(--vinho)}

.doc h1{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:clamp(2.1rem,1.5rem + 2.8vw,3.4rem);line-height:1.06;letter-spacing:-.022em;margin:0 0 1.1rem}
.doc h1 em{font-style:italic;color:var(--oliva)}
.doc{max-width:74ch}
.doc h3{margin-top:1.8em}
.doc ul,.doc ol{padding-left:1.15em;margin:0 0 1.1em;color:var(--ink-soft)}
.doc li{margin-bottom:.5em}
.doc li:last-child{margin-bottom:0}
/* `:not(.btn)`: sem isso o link de texto vence o `.btn` por especificidade e o
   botão fica com texto vinho sobre fundo ameixa — ilegível. */
.doc a:not(.btn){color:var(--vinho);text-decoration:underline;text-underline-offset:.18em}
.doc a:not(.btn):hover,.doc a:not(.btn):focus-visible{color:var(--aubergine)}
/* Endereço de e-mail e ID de conta quebram em qualquer largura: sem isto uma
   string longa empurra a página inteira no celular. */
.doc code,.doc .literal{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.86em;overflow-wrap:anywhere}

/* Carimbo de data/versão no alto da política. */
.selo{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.74rem;letter-spacing:.08em;line-height:1.7;color:var(--ink-soft);border-left:2px solid var(--vinho);padding-left:14px;margin:0 0 2rem}
.selo b{color:var(--ink);font-weight:500}

/* Caixa de ressalva. Usada onde o texto precisa separar o que a ferramenta faz
   do que ela não faz — o ponto que mais gera mal-entendido nas duas páginas. */
.nota{background:var(--paper-2);border:1px solid var(--rule);border-left:3px solid var(--vinho);padding:20px 22px;margin:0 0 1.4em}
.nota:last-child{margin-bottom:0}
.nota p{font-size:.95rem;color:var(--ink-soft)}
.nota b{color:var(--ink);font-weight:600}

/* Pares rótulo/valor (dado consultado, finalidade). dl em vez de tabela: lê bem
   empilhado no celular e o leitor de tela anuncia o par. */
.definicoes{margin:1.6rem 0 0;border-top:1px solid var(--rule)}
.definicoes>div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0;border-bottom:1px solid var(--rule)}
@media(min-width:43.75em){.definicoes>div{grid-template-columns:minmax(11rem,.8fr) minmax(0,1.6fr);gap:24px;align-items:baseline}}
.definicoes dt{font-weight:600;font-size:.97rem}
.definicoes dd{margin:0;font-size:.95rem;color:var(--ink-soft)}

/* Tabela rola dentro da própria caixa: a página nunca rola na horizontal. */
.rolagem{overflow-x:auto;margin:1.6rem 0 0;-webkit-overflow-scrolling:touch}
.tabela{border-collapse:collapse;width:100%;min-width:34rem;font-size:.93rem}
.tabela th,.tabela td{text-align:left;vertical-align:top;padding:13px 16px 13px 0;border-bottom:1px solid var(--rule)}
.tabela th{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;border-bottom-color:var(--rule-forte)}
.tabela td{color:var(--ink-soft)}
.tabela td:first-child{color:var(--ink);font-weight:500}

.doc-acoes{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:2.2rem}

/* Texto só para leitor de tela (legenda de tabela, rótulo de navegação). */
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.rev{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rev.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--vinho);outline-offset:3px}