/* ============================================================
   google-ads.css — só o que é DESTA página.
   Componentes compartilhados: tribo-componentes.css.
   Escala tipográfica (h1, h2, lead, h3): tokens na tribo-base.css.
   Ordem de carga: base → componentes → esta. O que estiver aqui vence.
   ============================================================ */
.ga-hero{position:relative;overflow:hidden;background:#141414;color:#fff;padding:88px 0 96px;isolation:isolate}
.ga-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(900px 520px at 78% 40%,rgba(164,151,112,.22),transparent 60%),
  radial-gradient(600px 400px at 10% 90%,rgba(164,151,112,.10),transparent 60%),
  linear-gradient(180deg,#171717 0%,#0f0f0f 100%)}
.ga-hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Havia aqui um segundo @keyframes ga-glow, com scale(1.12), declarado ANTES
   do que vale. Em CSS o @keyframes de mesmo nome declarado depois substitui
   o anterior inteiro, entao aquele era codigo morto desde sempre: a animacao
   do brilho do hero nunca escalou. Removido em 14/09/2026 sem mudanca visual.
   Se o scale era o desejado, e so acrescenta-lo ao que ficou abaixo. */
.ga-hero::before{inset:-10%;animation:ga-glow 16s ease-in-out infinite alternate;will-change:transform}
@keyframes ga-glow{
  from{transform:translate3d(-2%,-1%,0)}
  to{transform:translate3d(2%,2%,0)}
}
@keyframes ga-rise{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}
@keyframes ga-pop{
  from{opacity:0;transform:translateY(30px) scale(.97)}
  to{opacity:1;transform:none}
}
.ga-hero-text > *,.ga-hero-base > *{animation:ga-rise .8s cubic-bezier(.22,.61,.36,1) both}
.ga-hero-text > :nth-child(1){animation-delay:.05s}
.ga-hero-text > :nth-child(2){animation-delay:.15s}
.ga-hero-text > :nth-child(3){animation-delay:.28s}
.ga-hero-text > :nth-child(4){animation-delay:.4s}
.ga-hero-text > :nth-child(5){animation-delay:.5s}
.ga-hero-text > :nth-child(6){animation-delay:.6s}
.ga-serp{animation:ga-pop 1s .35s cubic-bezier(.22,.61,.36,1) both}
@media (prefers-reduced-motion:reduce){
  .ga-hero::before{animation:none}
  .ga-hero-text > *,.ga-hero-base > *,.ga-serp{animation:none}
}
.ga-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0 64px;align-items:center}
.ga-hero-text{grid-column:1;grid-row:1}
.ga-hero-art{grid-column:2;grid-row:1/3;align-self:center}
.ga-hero-base{grid-column:1;grid-row:2}
.ga-hero .eyebrow{color:var(--sl-amber-light)}
.ga-hero .eyebrow::before{background:var(--sl-amber-light)}
.ga-hero h1{color:#fff;font-size:var(--fs-h1);font-weight:800;letter-spacing:var(--ls-h1);line-height:var(--lh-h1);margin:22px 0 22px}
/* o h1 e branco por inteiro: o destaque fica no peso, nao na cor */
.ga-hero h1 em{font-style:normal;color:inherit}
.ga-hero-lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:rgba(245,242,236,.78);max-width:560px}
.ga-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
/* dourado de contorno: mesma cor do botao cheio, sem competir com ele */
.btn.ga-btn-linha{background:transparent;color:var(--sl-amber-light);border:1.5px solid rgba(164,151,112,.55);box-shadow:none}
.btn.ga-btn-linha:hover{background:rgba(164,151,112,.14);border-color:var(--sl-amber);color:#fff}
.ga-hero-proofs{display:flex;gap:28px;margin-top:40px;padding-top:28px;border-top:1px solid rgba(245,242,236,.12);flex-wrap:wrap}
.ga-hero-proofs div{display:flex;flex-direction:column;gap:2px}
.ga-hero-proofs b{font-size:22px;font-weight:800;letter-spacing:-0.02em;color:#fff}
.ga-hero-proofs span{font-size:12.5px;color:rgba(245,242,236,.6)}
.ga-serp{position:relative;background:#fff;color:#202124;border-radius:var(--r-xl);padding:22px 22px 26px;box-shadow:0 30px 80px -24px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);font-family:var(--font-body)}
.ga-serp-bar{display:flex;align-items:center;gap:13px;border:1px solid #dfe1e5;border-radius:var(--r-pill);padding:12px 18px;box-shadow:0 1px 6px rgba(32,33,36,.15)}
.ga-serp-bar svg{width:18px;height:18px;color:#9aa0a6;flex-shrink:0}
.ga-serp-bar .q{font-size:15.5px;color:#202124;min-height:22px;white-space:nowrap;overflow:hidden}
.ga-serp-bar .q::after{content:"";display:inline-block;width:2px;height:18px;background:#202124;margin-left:2px;vertical-align:-3px;animation:ga-caret 1s steps(1) infinite}
.ga-serp-tabs{display:flex;gap:20px;font-size:12.5px;color:#5f6368;margin:18px 2px 14px;border-bottom:1px solid #ebebeb;padding-bottom:11px}
.ga-serp-tabs span:first-child{color:#1a73e8;border-bottom:3px solid #1a73e8;padding-bottom:11px;margin-bottom:-12px}
.ga-serp-ad{padding:16px 16px 18px;border-radius:var(--r-lg);background:#fff;border:1px solid #ecedee}
.ga-serp-ad .tag{font-size:13px;font-weight:700;color:#202124;line-height:1.2;margin-bottom:12px}
.ga-serp-corpo{transition:opacity .3s var(--ease)}
.ga-serp-corpo.trocando{opacity:.12}
.ga-serp-ad .who{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ga-serp-ad .ava{position:relative;width:38px;height:38px;flex-shrink:0}
.ga-serp-ad .ava img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;border:1px solid #e8eaed;opacity:0;transition:opacity .3s var(--ease)}
.ga-serp-ad .ava img.on{opacity:1}
.ga-serp-ad .id{min-width:0}
.ga-serp-ad .id b{display:block;font-size:14px;font-weight:400;color:#202124;line-height:1.3}
.ga-serp-ad .id > span{display:block;font-size:12.5px;color:#4d5156;line-height:1.3;margin-top:1px}
.ga-serp-ad .title{font-size:19px;color:#1a0dab;font-weight:400;line-height:1.3;letter-spacing:0}
.ga-serp-ad .desc{font-size:14px;color:#4d5156;line-height:1.58;margin-top:7px}
.ga-serp-ad .links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;font-size:13px;color:#1a0dab;line-height:1.3}
.ga-serp-org{padding:16px 16px 4px;opacity:.5}
.ga-serp-org .title{font-size:16px;color:#1a0dab;line-height:1.3}
.ga-serp-org .url{font-size:12.5px;color:#4d5156;margin:4px 0 2px}
.ga-serp-org .line{height:8px;border-radius:var(--r-sm);background:#e8eaed;margin-top:9px;width:92%}
.ga-serp-org .line.s{width:70%}
.ga-serp-pin{position:absolute;right:-22px;top:-28px;background:var(--sl-forest);color:#fff;border:1px solid rgba(164,151,112,.5);border-radius:var(--r-lg);padding:10px 14px;font-size:12.5px;line-height:1.35;box-shadow:var(--sl-shadow-lg)}
.ga-serp-pin b{display:block;color:var(--sl-amber-light);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px}
.ga-serp-live{position:absolute;left:-22px;bottom:-20px;display:flex;align-items:center;gap:10px;background:#fff;color:var(--sl-forest);border:1px solid var(--border);border-radius:var(--r-pill);padding:9px 16px 9px 12px;font-size:12.5px;font-weight:600;box-shadow:var(--sl-shadow-lg)}
.ga-serp-live i{width:9px;height:9px;border-radius:50%;background:#2f7d4f;position:relative;flex-shrink:0}
.ga-serp-live i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(47,125,79,.5);animation:ga-pulse 1.8s ease-out infinite}
@keyframes ga-pulse{
  0%{transform:scale(.6);opacity:1}
  100%{transform:scale(1.6);opacity:0}
}
.ga-serp-live small{font-weight:500;color:var(--sl-gray-500)}
@media (max-width:960px){
  .ga-hero{padding:56px 0 64px}
  .ga-hero-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .ga-serp{padding:16px 16px 18px;animation-name:ga-rise}
  .ga-serp-pin{position:static;display:block;margin:0 0 14px}
  .ga-serp-live{position:static;margin-top:14px;display:inline-flex}
  .ga-hero-proofs{gap:20px}
}
/* A regra base do .ga-grid-3 vem ANTES desta media, e a ordem aqui e
   obrigacao, nao arrumacao: media query nao soma especificidade, entao
   .ga-grid-3 na raiz empata com .ga-grid-3 dentro da media e o empate
   resolve por posicao. Com a base embaixo, ela vencia em TODA largura e
   o gap de 16px nunca acontecia — medido a 700px: saia 24px. */
.ga-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:720px){
  .ga-grid-3,.ga-grid-2,.ga-incluso-grid{gap:16px}
}
.ga-dots{position:relative}
.ga-dots::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(20,20,20,.07) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 20%,transparent 70%);pointer-events:none}
.ga-dots > .container{position:relative}
@media (max-width:960px){
  .ga-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .ga-grid-3,.ga-grid-2{grid-template-columns:minmax(0,1fr)}
}
.ga-dores{background:#fff}
.ga-dores .tb-card{background:var(--sl-off-white)}
/* SEM overflow:hidden, e isso e requisito do sticky da foto, nao arrumacao.
   Qualquer ancestral com overflow hidden/auto/scroll vira o container de
   rolagem do position:sticky — e como esta secao nao rola, a foto deixava de
   grudar e descia junto com a pagina (medido: top ia de 232 para -188 num
   scroll de 420). A foto do #investimento sempre funcionou porque .ga-invest
   nao recorta nada.

   O hidden estava aqui pelas tres telas de celular: a do meio subia 22px com
   translateY e escapava pelo topo. Saindo elas, sai o motivo. O ::before dos
   pontinhos nao precisa dele — e absolute com inset:0 sobre um pai relative,
   entao ja nasce do tamanho exato do pai e nao tem como vazar. */
.ga-google{background:var(--sl-sage);position:relative}
/* Duas colunas: o texto manda (1,22fr) e o retrato acompanha (0,78fr). O
   align-items vai para START, e nao CENTER, porque a coluna da direita e
   sticky: item centralizado tem a altura do proprio conteudo e quase nao
   sobra trilho para grudar. */
.ga-google-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(40px,4.4vw,72px);align-items:start}
.ga-google h2{font-size:clamp(28px,3.4vw,40px);margin:16px 0 22px}
/* 56ch e a medida de leitura: sem teto, a linha passava de 90 caracteres na
   tela larga e o olho perdia o comeco da linha seguinte. */
.ga-google .lead{font-size:17px;line-height:1.7;color:var(--sl-gray-600);max-width:56ch}
.ga-google .lead + .lead{margin-top:14px}

/* A citacao. O fio de 3px na esquerda ja existia; o que mudou foi a separacao
   do rodape. Antes a assinatura colava no fim da frase com 14px e as duas
   coisas liam como um paragrafo so — agora ha um fio entre a fala e quem
   falou, que e a divisao que a peca realmente tem. */
.ga-quote{margin:30px 0 0;padding:26px 30px;background:#fff;border-radius:var(--r-xl);border-left:3px solid var(--sl-olive);box-shadow:var(--sl-shadow-sm)}
.ga-quote p{font-size:16px;line-height:1.7;color:var(--sl-forest);font-weight:500}
.ga-quote footer{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);font-size:13.5px;color:var(--sl-gray-500)}
.ga-quote footer b{display:block;color:var(--sl-forest);font-size:14px}

/* A lista vira ficha, com fio entre os itens. Eram quatro blocos soltos com
   14px de vao, e no item de tres linhas ("Segmentacao por regiao e
   especialidade") o olho nao achava onde um terminava e o outro comecava. O
   fio resolve sem caixa e sem fundo, que e o que esta secao pede: ja existe
   um cartao branco logo acima, e um segundo competiria com ele.

   O fio e --border-strong, e nao --border: medido sobre o fundo --sl-sage
   (#f5f2ec), o --border (#e8e3d6) da razao 1,11 e simplesmente nao aparece.
   O mesmo fio funciona no #incluso porque la ele corre dentro de cartao
   branco — cor de linha depende do fundo em que ela cai. */
.ga-list{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-direction:column;gap:0}
.ga-list li{display:flex;gap:15px;align-items:flex-start;padding:16px 0;font-size:15.5px;line-height:1.55;color:var(--sl-gray-600)}
.ga-list li + li{border-top:1px solid var(--border-strong)}
.ga-list li:first-child{padding-top:0}
.ga-list li:last-child{padding-bottom:0}
.ga-list li b{color:var(--sl-forest)}
.ga-list svg{width:22px;height:22px;flex-shrink:0;color:var(--sl-olive);margin-top:1px}

/* COLUNA DA FOTO — de proposito nas MESMAS classes da foto do #investimento
   (.ga-foto-slot e .ga-invest-selo), e nao numa copia delas. Duas fotos na
   mesma pagina com receitas separadas viram dois tratamentos que envelhecem
   em direcoes diferentes; foi exatamente assim que o anel do #como-funciona
   ficou de uma cor e o fundo de outra. Aqui so a proporcao muda, e por um
   motivo medido, explicado no markup. */
.ga-google-foto{position:sticky;top:100px}
/* em tela baixa nao ha trilho: a foto rolaria junto e o sticky so atrapalha */
@media (max-height:780px){.ga-google-foto{position:static}}
.ga-google-foto .ga-foto-slot{aspect-ratio:4/5}

@media (max-width:960px){
  .ga-google-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .ga-google .lead{max-width:none}
  /* fixa nao faz sentido em coluna unica: nao ha nada rolando ao lado dela.

     O width:100% nao e redundante, e o que segura a foto dentro da goteira.
     Medido a 375px, sem ele: a coluna tem 335px e a foto saia com 349,5 — 20px
     de margem na esquerda contra 5,5 na direita.

     A causa: "margin:0 auto" tira o item do modo esticar e o poe em
     fit-content, que e min(max-content, max(min-content, disponivel)). O
     min-content do item nao cabe em 335 porque vem do selo, que e
     width:max-content com max-width em PORCENTAGEM — e porcentagem nao limita
     nada durante o calculo de tamanho intrinseco. Como fit-content nunca desce
     abaixo do min-content, a caixa parava em 349,5.

     min-width:0 NAO resolve isto, e vale registrar porque foi a primeira coisa
     que tentei: ele remove o piso automatico do item de grid, e nao muda o
     min-content da caixa, que e de onde o 349,5 vem. Uma largura explicita
     resolve porque nao passa pela formula do fit-content: 100% do trilho,
     limitado pelo max-width. */
  .ga-google-foto{position:static;width:100%;min-width:0;max-width:420px;margin:0 auto}
}
.ga-cases{color:#fff}
.ga-cases .container{position:relative}
.ga-case{background:#1b1b1b;border:1px solid rgba(245,242,236,.08);border-radius:var(--r-xl);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.ga-case:hover{transform:translateY(-4px);border-color:rgba(164,151,112,.45)}
.ga-case-media{position:relative;overflow:hidden}
.ga-case-media::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(20,20,20,.55));pointer-events:none}
.ga-case img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top;display:block;transition:transform .7s var(--ease)}
.ga-case-m.pend b,.ga-case-roi-main.pend b,.ga-case-roi li.pend b{color:rgba(245,242,236,.34)}
.ga-case-m.lead.pend b{color:rgba(255,255,255,.45)}
.ga-case-m.pend span,.ga-case-roi li.pend span{color:rgba(245,242,236,.32)}
.ga-case:hover img{transform:scale(1.04)}
.ga-case-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:14px;flex:1}
.ga-case-who h3{font-size:17px;color:#fff;margin-bottom:3px}
.ga-case-who span{font-size:13px;color:rgba(245,242,236,.6)}
.ga-case-who{padding-bottom:12px;border-bottom:1px solid rgba(245,242,236,.1)}
.ga-case-site{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:12.5px;font-weight:600;color:var(--sl-amber-light);border:1px solid rgba(164,151,112,.35);border-radius:var(--r-pill);padding:5px 10px 5px 8px;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.ga-case-site svg{width:13px;height:13px;opacity:.8}
.ga-case-site i{font-style:normal;font-size:11px;opacity:.7}
.ga-case-site:hover{background:rgba(164,151,112,.14);border-color:rgba(164,151,112,.7);color:#fff}
.ga-case-periodo{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(245,242,236,.7)}
.ga-case-periodo i{width:6px;height:6px;border-radius:50%;background:var(--sl-olive)}
.ga-case-periodo em{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;color:rgba(245,242,236,.58)}
.ga-case-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:-4px}
.ga-case-m:not(.lead) b{font-size:20px}
.ga-case-m{border:1px solid rgba(245,242,236,.08);border-radius:var(--r-lg);padding:11px 12px;background:rgba(245,242,236,.03);display:flex;flex-direction:column;gap:2px;min-width:0}
.ga-case-m small{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,242,236,.55);line-height:1.25;min-height:2.5em}
.ga-case-m b{font-size:22px;font-weight:800;letter-spacing:-0.03em;color:#fff;line-height:1.1;white-space:nowrap}
.ga-case-m span{font-size:11px;color:rgba(245,242,236,.5);line-height:1.35}
.ga-case-m.lead{background:linear-gradient(160deg,#2f7d4f,#256a42);border-color:rgba(255,255,255,.12);box-shadow:0 10px 24px -12px rgba(47,125,79,.7)}
.ga-case-m.lead small{color:rgba(255,255,255,.85);display:flex;align-items:center;gap:6px}
.ga-case-m.lead small::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sl-amber-light)}
.ga-case-m.lead b{color:#fff;font-size:26px}
.ga-case-m.lead span{color:rgba(255,255,255,.8)}
@media (max-width:480px){
  .ga-case-m small{font-size:10px;letter-spacing:.04em}
  .ga-case-m{padding:10px 11px}
}
@media (min-width:961px) and (max-width:1100px),(min-width:641px) and (max-width:740px),(max-width:359px){
  .ga-case-m:not(.lead) b{font-size:16px}
}
@media (max-width:359px){
  .ga-case-m.lead b{font-size:22px}
}
.ga-case p{font-size:14px;line-height:1.55;color:rgba(245,242,236,.72);flex:1;padding-top:12px;border-top:1px solid rgba(245,242,236,.1)}
.ga-case-roi{padding:12px 14px 13px;border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(164,151,112,.22),rgba(164,151,112,.08));border:1px solid rgba(164,151,112,.45)}
.ga-case-roi-main{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(164,151,112,.35)}
.ga-case-roi-main small{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sl-amber-light)}
.ga-case-roi-main b{font-size:22px;font-weight:800;letter-spacing:-0.03em;color:#fff;line-height:1.1;white-space:nowrap}
.ga-case-roi ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ga-case-roi li+li{padding-left:12px;border-left:1px solid rgba(164,151,112,.3)}
.ga-case-roi li small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,242,236,.55);margin-bottom:2px}
.ga-case-roi li b{display:block;font-size:17px;font-weight:800;color:#fff;letter-spacing:-0.02em;line-height:1.1}
.ga-case-roi li span{display:block;font-size:12.5px;line-height:1.35;color:rgba(245,242,236,.7);margin-top:4px}
.ga-case-roi-nota{margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(164,151,112,.28);font-size:12.5px;line-height:1.45;color:rgba(245,242,236,.72)}
.ga-case-roi-nota b{color:var(--sl-amber-light);font-weight:700}
.ga-case-m.fech b{color:var(--sl-amber-light)}
@media (max-width:480px){
  .ga-case-roi-main b{font-size:19px}
  .ga-case-roi ul{gap:8px}
}
.ga-case-hist{flex:1;padding-top:16px;border-top:1px solid rgba(245,242,236,.1)}
.ga-case-hist-k{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sl-amber-light);margin-bottom:16px}
.ga-case-hist-k svg{width:14px;height:14px;flex-shrink:0}
.ga-case-hist-k i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:var(--r-md);background:rgba(164,151,112,.14);border:1px solid rgba(164,151,112,.35);color:var(--sl-amber-light);font-style:normal;flex-shrink:0}
.ga-case-hist-k::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(164,151,112,.45),transparent)}
.ga-case-hist ol{list-style:none;margin:0;padding:0 0 0 22px;position:relative;display:flex;flex-direction:column;gap:14px}
.ga-case-hist ol::before{content:"";position:absolute;left:4.5px;top:10px;bottom:12px;width:1px;background:linear-gradient(180deg,rgba(164,151,112,.2),rgba(164,151,112,.75))}
.ga-case-hist li{position:relative}
.ga-case-hist li::before{content:"";position:absolute;left:-22px;top:4px;width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(164,151,112,.8);background:#1b1b1b;box-sizing:border-box}
.ga-case-hist li.hoje::before{background:var(--sl-olive);border-color:var(--sl-olive);box-shadow:0 0 0 4px rgba(164,151,112,.18)}
.ga-case-hist li > small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,242,236,.48);line-height:1.6;margin-bottom:3px}
.ga-case-hist li.hoje > small{color:var(--sl-amber-light)}
.ga-case-hist li > span{display:block;font-size:13.5px;line-height:1.55;color:rgba(245,242,236,.7)}
.ga-case-hist li.hoje > span{color:rgba(245,242,236,.94)}
.ga-case .more{display:inline-flex;align-items:center;gap:8px;color:var(--sl-amber-light);font-weight:600;font-size:14px;padding:12px 0 0;margin-top:-2px;border-top:1px solid rgba(245,242,236,.1);width:100%;cursor:default}
.ga-case .more svg{width:16px;height:16px;transition:transform var(--dur-fast)}
.ga-case .more:hover svg{transform:translateX(3px)}
.ga-cases-note{font-size:13px;color:rgba(245,242,236,.55);text-align:center;max-width:760px;margin:32px auto 0;line-height:1.6}
.ga-depos{margin-top:64px;padding-top:56px;border-top:1px solid rgba(245,242,236,.1)}
.ga-depos h3{font-size:clamp(22px,2.6vw,28px);color:#fff;text-align:center;margin-bottom:32px}
.ga-depo-slider{overflow:hidden;margin:0 -32px;padding:12px 0 8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ga-depo-track{display:flex;gap:20px;width:max-content;padding:0 32px;animation:ga-depo-scroll var(--depo-dur,90s) linear infinite;will-change:transform}
.ga-depo-slider:hover .ga-depo-track,.ga-depo-slider:focus-within .ga-depo-track{animation-play-state:paused}
@keyframes ga-depo-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.ga-depo{position:relative;overflow:hidden;flex:0 0 360px;width:360px;background:linear-gradient(180deg,rgba(245,242,236,.055),rgba(245,242,236,.025));border:1px solid rgba(245,242,236,.1);border-radius:var(--r-2xl);padding:26px 26px 22px;display:flex;flex-direction:column;gap:16px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}
.ga-depo::before{content:"\201C";position:absolute;right:18px;top:-6px;font-size:96px;line-height:1;font-weight:800;color:rgba(164,151,112,.16);font-family:Georgia,'Times New Roman',serif;pointer-events:none}
.ga-depo:hover{border-color:rgba(164,151,112,.45);background:rgba(245,242,236,.07);box-shadow:0 18px 40px -20px rgba(0,0,0,.7)}
.ga-depo .stars{color:var(--sl-olive);display:flex;gap:2px}
.ga-depo .stars svg{width:16px;height:16px}
.ga-depo blockquote{margin:0;font-size:15px;line-height:1.65;color:rgba(245,242,236,.88);font-weight:500;flex:1}
.ga-depo footer{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid rgba(245,242,236,.1)}
.ga-depo footer img{flex:0 0 auto;width:50px;height:50px;min-width:50px;border-radius:50%;object-fit:cover;object-position:top;aspect-ratio:1/1;box-sizing:border-box;padding:2px;background:conic-gradient(from 200deg,var(--sl-olive),var(--sl-amber-light),var(--sl-champagne),var(--sl-olive));border:2px solid #1b1b1b;box-shadow:0 0 0 1px rgba(164,151,112,.35)}
.ga-depo footer > div{min-width:0}
.ga-depo footer b{display:block;font-size:14.5px;color:#fff}
.ga-depo footer span{font-size:12.5px;color:rgba(245,242,236,.6)}
.ga-depo .metric{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--sl-amber-light);font-weight:700;letter-spacing:.02em;line-height:1.4}
.ga-depo .metric i{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--sl-olive);box-shadow:0 0 0 3px rgba(164,151,112,.18)}
.ga-depos-note{text-align:center;font-size:12.5px;color:rgba(245,242,236,.6);max-width:640px;margin:20px auto 0;line-height:1.5}
@media (max-width:720px){
  .ga-depo-slider{margin:0 -20px}
  .ga-depo-track{padding:0 20px;gap:14px}
  .ga-depo{flex-basis:300px;width:300px;padding:22px 20px 18px;gap:14px}
  .ga-depo blockquote{font-size:14.5px;line-height:1.6}
  .ga-depo::before{font-size:80px;right:14px;top:-4px}
  .ga-depo footer{gap:12px;padding-top:12px}
  .ga-depo footer b{font-size:14px}
  .ga-depo footer span{font-size:12px;line-height:1.35;display:block}
  .ga-depo-slider{padding:8px 0 4px}
}
@media (prefers-reduced-motion:reduce){
  .ga-depo-track{animation:none;width:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .ga-depo{scroll-snap-align:start}
  .ga-depo-slider{mask-image:none;-webkit-mask-image:none}
}
/* Era #fff, o MESMO do #investimento logo acima — e o único par adjacente da
   página com a mesma cor: as duas seções liam como uma coisa só. O conteúdo
   daqui não tem cartão (.ig-plan é transparente nesta página), então o fundo
   da seção É o fundo do conteúdo, e trocá-lo separa de verdade. */
.ga-incluso{background:var(--sl-sage)}
.ig-plan-wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
.ig-plan-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 50%;border-radius:var(--r-xl);background:var(--sl-champagne);display:block}
.ig-plan-photo figcaption{margin-top:14px;padding:0 4px}
.ig-plan-photo figcaption b{display:block;font-size:14px;color:var(--sl-forest);margin-bottom:4px}
.ig-plan-photo figcaption span{font-size:13px;color:var(--fg-muted);line-height:1.55}
.ig-plan{position:relative;background:transparent;color:var(--sl-gray-700)}
.ig-plan-badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-olive-text);margin-bottom:18px}
.ig-plan-subtitle{display:none}
.ig-plan-name{color:var(--sl-forest);font-size:clamp(24px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.ig-plan-for{color:var(--fg-muted);font-size:15.5px;line-height:1.6;max-width:48ch;margin:0}
.ig-plan-features{list-style:none;margin:28px 0 0;padding:0}
.ig-plan-group{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--sl-gray-500);padding:26px 0 6px;display:flex;align-items:center;gap:12px}
.ig-plan-group:first-child{padding-top:0}
.ig-plan-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--sl-gray-100);font-size:15px;color:var(--sl-gray-700)}
.ig-plan-label{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px}
/* O ajuste de celular destas duas linhas estava MORTO, e a estrutura e que
   estava invertida: o tribo-componentes.css tem so os ajustes de 480px
   (.ig-plan-row{align-items:flex-start} e .ig-plan-label{gap:10px;
   align-items:flex-start}), enquanto as regras BASE moram aqui, nesta folha
   de pagina. Como a folha de pagina carrega depois e media query nao soma
   especificidade, a raiz daqui vencia a media de la em toda largura.

   MEDIDO a 400px: 4 das 17 linhas tem rotulo em duas linhas, e nelas o icone
   ficava centralizado na vertical contra um rotulo de duas linhas, em vez de
   alinhado a primeira. Repetir o ajuste aqui resolve a pagina hoje; o conserto
   de verdade e mover estas duas regras base para o componente, junto dos
   ajustes que ja moram la — o que tambem mexe no instagram.css. */
@media (max-width:480px){
  .ig-plan-row{align-items:flex-start}
  .ig-plan-label{align-items:flex-start;gap:10px}
}
.ig-plan-ico{width:18px;height:18px;flex-shrink:0;color:var(--sl-olive);stroke-width:1.6}

/* ============= A LINHA ENTRE OS ITENS DO ESCOPO =============
   Ela sempre existiu: border-bottom:1px solid var(--sl-gray-100), na regra do
   .ig-plan-row logo acima. E era discreta de propósito — sobre o branco dava
   1,14:1, o bastante para guiar o olho da etiqueta até o valor sem virar
   grade de planilha.

   Em 17/09/2026 esta seção deixou de ser branca: passou a --sl-sage (#f5f2ec)
   para não repetir a cor do #investimento logo acima. Sobre esse fundo o mesmo
   #f3f0ea cai para 1,02:1 e simplesmente desaparece. Não foi a linha que saiu
   do desenho — foi o fundo que andou por baixo dela.

   --border (#e8e3d6) sobre o sage dá 1,15:1: a MESMA discrição que ela tinha
   no branco. A cor muda justamente para o contraste ficar igual.

   E o traço passa de border-bottom em toda linha para border-top na linha
   SEGUINTE. Assim ele existe só ENTRE dois itens: não sobra pendurado debaixo
   do último da lista, e não encosta no cabeçalho do próximo grupo — onde
   antes ficavam dois traços a 26px um do outro, disputando o mesmo papel. */
.ga-incluso .ig-plan-row{border-bottom:0}
.ga-incluso .ig-plan-row + .ig-plan-row{border-top:1px solid var(--border)}

/* O traço do cabeçalho de grupo sobe um degrau: --sl-gray-300, 1,65:1 contra
   os 1,15:1 da linha de item. O agrupamento tem de ser mais forte que a
   separação dentro dele, senão as quatro frentes viram uma lista só de
   dezessete linhas iguais — que é justamente o que a seção não quer dizer.
   Escopado em .ga-incluso porque o ::after mora no tribo-componentes.css e
   vale também para a landing de Instagram, que continua sobre branco. */
.ga-incluso .ig-plan-group::after{background:var(--sl-gray-300)}
.ig-plan-check{color:var(--sl-olive);display:grid;place-items:center}
.ig-plan-check svg{width:16px;height:16px;stroke-width:2.2}
.ig-plan-txt{font-size:13.5px;font-weight:500;color:var(--sl-gray-500);text-align:right}
.ig-plan-nope{color:var(--sl-gray-500);font-weight:400}
.ig-plan-note{margin:20px 0 0;font-size:13px;color:var(--fg-muted);line-height:1.55;max-width:60ch}
.ig-plan-cta{margin-top:26px}
@media (max-width:960px){
  .ig-plan-wrap{grid-template-columns:minmax(0,1fr);gap:32px}
  .ig-plan-photo img{aspect-ratio:16/10;object-position:50% 22%}
  .ig-plan-row{font-size:14.5px;padding:12px 0}
}
.ga-micro{text-align:center;font-size:13.5px;color:var(--fg-muted);margin-top:28px}
/* Desce um tom para não repetir o #incluso, que passou a ser --sl-sage.
   A sequência da página fica: branco, sage, sage-dark, escuro. */
/* A cor mora numa variavel porque DUAS coisas dependem dela: o fundo e o
   anel que apaga o trilho atras de cada circulo numerado (ver .ga-step .n,
   no bloco de celular). Digitada duas vezes, uma esquece a outra — foi o que
   aconteceu quando esta secao trocou de --sl-sage para --sl-sage-dark. */
.ga-como{--ga-como-bg:var(--sl-sage-dark);background:var(--ga-como-bg)}
.ga-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;position:relative;counter-reset:etapa}
.ga-steps::before{content:"";position:absolute;left:8%;right:8%;top:22px;height:2px;background:linear-gradient(90deg,var(--sl-amber-light),var(--sl-olive),var(--sl-amber-light))}
.ga-step{padding:0 14px;position:relative}
.ga-step .n{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--sl-olive);color:var(--sl-forest);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:18px;position:relative;box-shadow:0 0 0 6px var(--ga-como-bg)}
.ga-step .n{transition:background var(--dur),color var(--dur),transform var(--dur)}
.ga-step:hover .n{background:var(--sl-olive);color:#fff;transform:scale(1.06)}
.ga-step h3{font-size:16px;margin-bottom:8px}
.ga-step p{font-size:14px;line-height:1.55;color:var(--sl-gray-600)}
.ga-step .prazo{display:inline-block;margin-top:10px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sl-olive-text);background:#fff;border:1px solid var(--sl-amber-light);border-radius:var(--r-pill);padding:4px 10px}
.ga-matur{margin-top:48px;background:#fff;border-radius:var(--r-xl);padding:26px 30px;display:flex;gap:18px;align-items:flex-start;border:1px solid var(--border)}
.ga-matur svg{width:26px;height:26px;color:var(--sl-olive);flex-shrink:0;margin-top:2px}
.ga-matur b{display:block;font-size:15.5px;color:var(--sl-forest);margin-bottom:6px}
.ga-matur p{font-size:14.5px;line-height:1.6;color:var(--sl-gray-600)}
@media (max-width:1024px){
  .ga-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 0}
  .ga-steps::before{display:none}
  .ga-step .n{box-shadow:none}
}
@media (max-width:600px){
  .ga-steps{grid-template-columns:minmax(0,1fr);gap:26px;margin-left:22px;padding-left:22px;border-left:2px solid var(--sl-amber-light)}
  .ga-step{padding:0}
  .ga-step .n{position:absolute;left:-41px;top:-4px;width:36px;height:36px;font-size:14px;box-shadow:0 0 0 5px var(--ga-como-bg)}
  .ga-step h3{padding-top:4px}
  /* O cartao da maturacao nao tinha regra de celular nenhuma: ficava com o
     icone segurando uma coluna propria (26px + 18 de gap) mais 30px de recuo
     de cada lado. Num aparelho de 375 sobravam 229px de texto, com 75px de
     recuo a ESQUERDA contra 31px a direita — a mesma assimetria que o Marco
     apontou no formulario. No celular o icone sobe para cima do titulo: o
     texto passa a ocupar a largura inteira do cartao (295px) e os dois
     recuos ficam iguais. */
  .ga-matur{display:block;margin-top:38px;padding:22px 20px}
  /* display:block porque um <svg> e inline por padrao: ele se apoia numa
     linha de texto e a entrelinha somava 7,6px invisiveis embaixo do
     icone. O vao pedido era 10 e estava saindo 17,6. */
  .ga-matur svg{display:block;margin:0 0 10px}
}
.ga-invest{background:#fff}
.ga-invest-main .section-header p{max-width:54ch}
.ga-invest-wrap{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:56px;align-items:start}

/* coluna da foto */
.ga-invest-foto{position:sticky;top:100px}
@media (max-height:780px){.ga-invest-foto{position:static}}
.ga-foto-slot{position:relative;aspect-ratio:3/4;border-radius:var(--r-xl);overflow:hidden;background:var(--sl-sage);display:grid;place-items:center}
.ga-foto-slot img{width:100%;height:100%;object-fit:cover;display:block}
.ga-invest-selo{position:relative;z-index:1;width:max-content;max-width:calc(100% - 32px);margin:-30px 0 0 16px;display:flex;align-items:center;gap:13px;background:var(--sl-forest);border-radius:var(--r-lg);padding:14px 18px;box-shadow:0 14px 34px rgba(0,0,0,.16)}
.ga-invest-selo b{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--sl-amber-light)}
.ga-invest-selo small{font-size:12.5px;line-height:1.35;color:rgba(245,242,236,.75)}

/* a calculadora */
/* os três cartões, um por linha: dentro da coluna da direita, três colunas
   deixavam cada cartão com pouco mais de 200 px e o texto quebrava palavra a
   palavra. Empilhados, o ícone vai para a esquerda e o texto ocupa a largura. */
.ga-invest .ga-invest-cards{margin-top:28px;grid-template-columns:minmax(0,1fr);gap:12px}
.ga-invest .tb-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-content:start;padding:24px 28px}
.ga-invest .tb-card .ico{grid-column:1;grid-row:1/span 4;margin-bottom:0;align-self:start}
.ga-invest .tb-card .kicker{grid-column:2;grid-row:1}
.ga-invest .tb-card .val{grid-column:2;grid-row:2}
.ga-invest .tb-card h3{grid-column:2;grid-row:3}
/* linha fina entre título, subtítulo e corpo — só na coluna do texto */
.ga-invest .tb-card .val,.ga-invest .tb-card h3{border-bottom:1px solid var(--border);padding-bottom:10px}
.ga-invest .tb-card .val{margin:2px 0 10px}
.ga-invest .tb-card h3{margin-bottom:10px}
.ga-invest .tb-card.hl .val,.ga-invest .tb-card.hl h3{border-bottom-color:rgba(245,242,236,.16)}
.ga-invest .tb-card p{grid-column:2;grid-row:4}
.ga-invest .tb-card .val{font-size:clamp(22px,2.2vw,26px);font-weight:800;letter-spacing:-0.03em;color:var(--sl-forest);line-height:1.15}
.ga-invest .tb-card .val small{font-size:14px;font-weight:600;color:var(--sl-gray-500);letter-spacing:0}
.ga-invest .tb-card.hl{background:var(--sl-forest);border-color:var(--sl-forest)}
.ga-invest .tb-card.hl h3,.ga-invest .tb-card.hl .val{color:#fff}
.ga-invest .tb-card.hl p{color:rgba(245,242,236,.72)}
.ga-invest .tb-card.hl .ico{background:rgba(245,242,236,.08);color:var(--sl-amber-light)}
.ga-invest .tb-card.hl .val small{color:rgba(245,242,236,.6)}
.ga-invest .tb-card .kicker{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sl-olive-text)}
.ga-invest .tb-card.hl .kicker{color:var(--sl-amber-light)}
.ga-invest .ga-micro{margin-top:20px;text-align:left}
/* a dica de arraste só existe quando os cartões viram slider */
.ga-cards-topo{display:none}   /* a dica e as setas só existem no slider do celular */

@media (max-width:1100px){.ga-invest-wrap{gap:36px}}
@media (max-width:960px){
  .ga-invest-wrap{grid-template-columns:minmax(0,1fr);gap:0}
  /* A foto NÃO some mais. Ela é o primeiro filho do .ga-invest-wrap, então em
     uma coluna ela abre a seção — antes do formulário, que é onde o Marco a
     quis. Volta a ser QUADRADA: o arquivo é 1:1, e em 3/4 ela perderia 25% de
     largura justo onde a tela é mais estreita. E deixa de ser grudada, que em
     coluna única não faz sentido nenhum. */
  .ga-invest-foto{position:static;margin-bottom:36px}
  .ga-foto-slot{aspect-ratio:1/1}
}







.ga-num,.qs-content,.mp-form-aside{counter-increment:sec}
.ga-num .eyebrow,.qs-content .eyebrow,.mp-form-aside .eyebrow{gap:12px}
.ga-num .eyebrow::before,.qs-content .eyebrow::before,.mp-form-aside .eyebrow::before{content:counter(sec,decimal-leading-zero);width:auto;height:auto;background:none;border-radius:var(--r-sm);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.08em;
  font-weight:700;color:var(--sl-olive-text);padding:4px 7px;border:1px solid rgba(164,151,112,.5);line-height:1}
.qs-content .eyebrow::before,.mp-form-aside .eyebrow::before{color:var(--sl-amber-light);border-color:rgba(201,194,171,.4)}
.ga-serp-nota{display:flex;align-items:center;gap:12px;margin:42px 4px 0;font-size:12.5px;line-height:1.5;color:rgba(245,242,236,.62)}
.ga-serp-nota > span{min-width:0}
.ga-serp-nota a{color:var(--sl-amber-light);text-decoration:underline;text-underline-offset:2px}
.ga-serp-nota a:hover{color:#fff}
.ga-serp-dots{display:inline-flex;gap:6px;flex-shrink:0}
.ga-serp-dots i{width:6px;height:6px;border-radius:50%;background:rgba(245,242,236,.22);transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.ga-serp-dots i.on{background:var(--sl-amber-light);transform:scale(1.35)}
@media (max-width:960px){
  .ga-serp-nota{margin-top:20px}
}
@media (max-width:960px){
  .ga-hero-text,.ga-hero-art,.ga-hero-base{grid-column:1;grid-row:auto}
  .ga-hero-base{margin-top:36px}
  .ga-hero{padding:36px 0 64px}
  .ga-hero h1{margin:14px 0 16px}
  .ga-hero-lead{font-size:16.5px}
  .ga-hero-cta{margin-top:24px}
  .ga-hero-cta{gap:8px;align-items:flex-start}
  .ga-hero-cta .ga-btn-linha{background:none;border:0;padding:6px 0;min-height:0;height:auto;font-size:14.5px;color:var(--sl-amber-light);text-decoration:underline;text-underline-offset:4px;box-shadow:none}
  .ga-hero-cta .ga-btn-linha svg{width:15px;height:15px}
  .ga-serp{display:flex;flex-direction:column}
  .ga-serp-pin{order:2;margin:16px 0 0}
  .ga-serp-live{order:3}
}
/* O .mp-form-wrap saiu daqui em 17/09/2026. Era copia byte a byte da regra
   do tribo-componentes.css, e como esta folha carrega DEPOIS ela vencia por
   posicao a regra de CELULAR do componente — o cartao ficava com 26px de
   recuo no telefone em vez de 14. Estilo de componente derrotado por folha
   de pagina, o mesmo caso da .sl-f-muted. O desktop nao muda: a regra que
   vale agora e identica a que estava aqui. */
@media (max-width:960px){
  .mp-form-aside{padding:32px 26px}
  .mp-form-aside{order:2}
  .mp-form-wrap{order:1}
}


/* ============= INVESTIMENTO · calculadora de previsibilidade ============= */
/* a calculadora */
/* Este bloco estava DUPLICADO byte a byte mais acima na folha, 36 linhas
   e 3,7 KB que iam no fio para todo visitante e nunca pintavam nada: em
   empate de especificidade vence a posicao, entao era esta copia que
   valia e a de cima era enfeite. Pior que o peso era a armadilha —
   editar a copia de cima nao mudava a tela e nao dava erro nenhum.
   Removida a PRIMEIRA em 18/09/2026, de proposito: as duas eram iguais,
   mas tirando a de cima a vencedora fica exatamente onde ja estava em
   relacao ao resto da folha, e o resultado e provavelmente identico. */
.ga-calc{margin-top:4px;background:var(--sl-off-white);border:1px solid var(--border);border-radius:var(--r-xl);padding:26px 28px}
.ga-calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ga-calc-f{display:flex;flex-direction:column;gap:7px;min-width:0}
.ga-calc-f > span{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--sl-forest)}
.ga-calc-f em{font-style:normal;font-weight:600;color:var(--sl-gray-500)}
.ga-calc select,.ga-calc input[type="text"]{width:100%;min-width:0;font-family:inherit;font-size:16px;font-weight:500;color:var(--sl-forest);background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;min-height:48px;appearance:none;-webkit-appearance:none;transition:border-color var(--dur) var(--ease)}
.ga-calc select{padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%237a6e4c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.ga-calc select:hover,.ga-calc input[type="text"]:hover{border-color:var(--border-strong)}
.ga-calc select:focus-visible,.ga-calc input[type="text"]:focus-visible{outline:3px solid var(--sl-olive-text);outline-offset:2px;border-color:var(--sl-olive-text)}
.ga-calc option:disabled{color:var(--sl-gray-300)}
.ga-calc-dias{border:0;margin:18px 0 0;padding:0;min-width:0}
.ga-calc-dias legend{padding:0;font-size:12.5px;font-weight:700;color:var(--sl-forest);margin-bottom:9px}
.ga-calc-radios{display:flex;gap:10px;flex-wrap:wrap}
.ga-calc-radios label{flex:1 1 150px;min-width:0;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;min-height:48px;cursor:pointer;font-size:14.5px;font-weight:600;color:var(--sl-forest);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.ga-calc-radios label:has(input:checked){border-color:var(--sl-olive);background:var(--sl-sage)}
.ga-calc-radios input{accent-color:var(--sl-olive);width:18px;height:18px;flex:0 0 18px;margin:0}
.ga-calc-nota{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--sl-gray-500)}
.ga-calc-nota.alerta{color:var(--sl-olive-text);font-weight:600}

/* o resultado */
.ga-calc-out{margin-top:16px;background:var(--sl-forest);color:#fff;border:1px solid transparent;border-radius:var(--r-xl);padding:26px 28px}
.ga-calc-out-k{display:inline-block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sl-amber-light);margin-bottom:16px}
.ga-calc-linha{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-top:1px solid rgba(245,242,236,.12)}
.ga-calc-linha:first-of-type{border-top:0;padding-top:0}
/* o display:flex acima vence o display:none do atributo hidden, entao a linha
   do retorno precisa desta regra para sumir enquanto nao houver valor de consulta */
.ga-calc-linha[hidden]{display:none}
.ga-calc-linha .rot{min-width:0}
.ga-calc-linha .rot b{display:block;font-size:15px;font-weight:700;color:#fff}
.ga-calc-linha .rot small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:rgba(245,242,236,.62)}
.ga-calc-linha .num{flex:0 0 auto;font-size:clamp(24px,3.2vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--sl-amber-light);white-space:nowrap}
.ga-calc-linha.tot{border-top-color:rgba(245,242,236,.28)}
.ga-calc-linha.tot .num{color:#fff}
.ga-calc-ressalva{margin:18px 0 0;font-size:12.5px;line-height:1.6;color:rgba(245,242,236,.55)}
.ga-calc-out .btn{margin-top:20px}

@media (max-width:620px){
  /* um recuo so para os tres blocos: o texto nasce na mesma linha nos tres */
  .ga-calc,.ga-calc-out{padding:20px}
  .ga-calc-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .ga-calc-radios label{flex:1 1 100%}
  .ga-calc-dias{margin-top:16px}
  .ga-calc-linha{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 0}
  .ga-calc-linha .num{font-size:27px;white-space:normal}
  .ga-calc-out .btn{width:100%;padding-left:14px;padding-right:14px}
  .ga-invest .tb-card{padding:20px;column-gap:16px}
  .ga-invest .tb-card .ico{width:40px;height:40px;border-radius:11px}
  .ga-invest .tb-card .ico svg{width:19px;height:19px}
  /* Os três cartões viram slider, no mesmo padrão dos cases da Assessoria:
     sangra até a borda da tela pela margem negativa e volta pelo padding,
     para o cartão seguinte aparecer espiando na lateral. */
  /* A barra de cima: dica à esquerda, setas à direita. */
  .ga-cards-topo{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:26px 0 10px}
  .ga-swipe-hint{display:block;margin:0;font-size:12.5px;color:var(--sl-gray-500)}
  .ga-cards-nav{display:flex;gap:8px;flex:0 0 auto}
  .ga-seta{width:38px;height:38px;flex:0 0 38px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);color:var(--sl-forest);cursor:pointer;padding:0;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),opacity var(--dur) var(--ease)}
  .ga-seta svg{width:17px;height:17px}
  .ga-seta:hover:not(:disabled){background:var(--sl-sage);border-color:var(--sl-olive)}
  /* desabilitada, e não escondida: sumir com o botão move o que está ao lado */
  .ga-seta:disabled{opacity:.34;cursor:default}
  .ga-invest .ga-invest-cards{display:flex;gap:12px;margin:0 -20px;padding:2px 12vw 8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ga-invest .ga-invest-cards::-webkit-scrollbar{display:none}
  /* no cartão estreito o ícone volta para cima: ao lado, sobravam 205px de
     texto e o "/mês" caía sozinho numa linha */
  /* CENTRALIZADO, e não encostado na esquerda: com scroll-snap-align:center o
     cartão para no meio da tela e os vizinhos espiam dos dois lados, que é o
     que diz "tem mais coisa aqui". Para o PRIMEIRO e o ÚLTIMO conseguirem
     chegar ao centro, a faixa precisa de recuo igual à metade do que sobra.

     E a medida é em vw, não em %, porque em % a conta é CIRCULAR: a largura
     do cartão é uma fração da faixa MENOS o recuo, e o recuo é uma fração da
     faixa — um depende do outro e o centro nunca fecha. Medido: com 78% e
     11% o primeiro cartão parava 33px fora do centro. Ancorado na largura da
     tela, que não depende de nenhum dos dois, 76 + 12 + 12 = 100 e fecha. */
  .ga-invest .ga-invest-cards > .tb-card{flex:0 0 76vw;scroll-snap-align:center;display:flex;flex-direction:column}
  .ga-invest .ga-invest-cards > .tb-card .ico{margin-bottom:14px}
  /* sem isto o 2º e o 3º cartão nunca entram no campo de visão vertical e
     ficam invisíveis para sempre, porque o .sl-reveal nunca dispara neles */
  .ga-invest .ga-invest-cards > .sl-reveal{opacity:1;transform:none}
}
/* A 320px o rótulo não cabe numa linha: precisa de 237px e só há 218. Encolher a
   fonte do botão principal custa mais que a quebra, então ele quebra em duas
   linhas equilibradas, em vez de deixar uma palavra sozinha embaixo. */
@media (max-width:360px){.ga-calc-out .btn{padding-left:12px;padding-right:12px;line-height:1.25;text-wrap:balance}}

/* No celular as tres provas em flex quebravam 2+1, com a terceira orfa numa
   linha. Viram ficha de tres linhas: valor a esquerda, descricao a direita,
   fio entre elas. Vem depois da media de 960px que ja existe acima, para
   vencer por ordem — as duas tem a mesma especificidade. */
@media (max-width:960px){
  .ga-hero-base{margin-top:32px}
  .ga-hero-proofs{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:24px;padding-top:0;border-top:0}
  .ga-hero-proofs div{flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid rgba(245,242,236,.14)}
  .ga-hero-proofs b{font-size:17px;letter-spacing:-.01em;flex:0 0 auto}
  .ga-hero-proofs span{text-align:right;font-size:12.5px;line-height:1.4;color:rgba(245,242,236,.62)}}