/* ============================================================
   tribo-base.css — Base ÚNICA do site da Tribo Marketing Médico
   Tokens, reset, fontes, botões, header (.sl-nav) e rodapé (.sl-footer).

   Reconciliada em 11/09/2026 a partir das TRÊS cópias que existiam
   (Assessoria, Google Ads, Instagram). Antes havia uma por landing e
   elas divergiam em silêncio. Agora há esta: mudança aqui vale para o
   site inteiro. O registro do que veio de onde está no LEIA-ME.
   ============================================================ */

@font-face{font-family:'Manrope';src:url('../../fontes/Manrope-Regular.woff2') format('woff2'),url('../../fontes/Manrope-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Manrope';src:url('../../fontes/Manrope-Medium.woff2') format('woff2'),url('../../fontes/Manrope-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Manrope';src:url('../../fontes/Manrope-SemiBold.woff2') format('woff2'),url('../../fontes/Manrope-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Manrope';src:url('../../fontes/Manrope-Bold.woff2') format('woff2'),url('../../fontes/Manrope-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Manrope';src:url('../../fontes/Manrope-ExtraBold.woff2') format('woff2'),url('../../fontes/Manrope-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}

:root{
  --sl-forest:#141414;--sl-forest-light:#1e1e1e;--sl-forest-dark:#0e0e0e;
  --sl-sage:#f5f2ec;--sl-sage-dark:#ece8df;--sl-champagne:#ece8df;
  --sl-olive:#a49770;--sl-olive-dark:#8a7d5a;--sl-olive-text:#7a6e4c;--sl-olive-deep:#6b6042;
  --sl-amber:#a49770;--sl-amber-light:#c9c2ab;
  --sl-white:#ffffff;--sl-off-white:#faf9f5;
  --sl-gray-100:#f3f0ea;--sl-gray-200:#e8e3d6;--sl-gray-300:#c5beb0;
  --sl-gray-400:#6a6a6a;--sl-gray-500:#6a6a6a;--sl-gray-600:#4a4a4a;--sl-gray-700:#242424;
  --font-heading:'Manrope',system-ui,sans-serif;--font-body:'Manrope',system-ui,sans-serif;
  --bg:var(--sl-white);--bg-alt:var(--sl-sage);
  --fg:var(--sl-gray-700);--fg-heading:var(--sl-forest);--fg-muted:var(--sl-gray-500);
  /* O botão principal era branco sobre --sl-olive (#a49770): 2,90:1, abaixo
     dos 4,5:1 do WCAG AA para texto normal e até dos 3:1 de texto grande.
     Valia para os CTAs das cinco páginas, inclusive os de tráfego pago.
     Decisão do Marco em 14/09/2026: escurecer o FUNDO, que é a menor
     mudança de aparência que resolve — o botão segue dourado, no mesmo tom
     que o site já usava para texto dourado.
         branco sobre --sl-olive-text #7a6e4c  ->  5,05:1
         hover em --sl-olive-deep     #6b6042  ->  6,22:1
     O hover precisou de um tom NOVO: o --sl-olive-dark de antes (#8a7d5a)
     é mais CLARO que o novo normal, então passar o mouse deixaria o botão
     mais claro e de volta a reprovar (4,07:1). */
  --cta:var(--sl-olive-text);--cta-hover:var(--sl-olive-deep);
  --border:var(--sl-gray-200);--border-strong:var(--sl-gray-300);
  --r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-2xl:24px;--r-pill:9999px;
  --dur:250ms;--dur-fast:150ms;--ease:cubic-bezier(.25,.46,.45,.94);
  --sl-shadow-sm:0 1px 2px rgba(20,20,20,.05),0 2px 6px rgba(20,20,20,.04);
  --sl-shadow-md:0 2px 4px rgba(20,20,20,.06),0 8px 24px -8px rgba(20,20,20,.10);
  --sl-shadow-lg:0 4px 8px rgba(20,20,20,.08),0 16px 40px -12px rgba(20,20,20,.16);
  --sl-shadow-cta:0 2px 4px rgba(122,110,76,.18),0 12px 32px -10px rgba(122,110,76,.45);
  /* Escala tipográfica do site (11/09/2026). Antes cada página tinha a sua:
     o h1 do hero ia de 38px a 56px conforme a landing, e só duas das quatro
     sobrescreviam o h2. Valores da Assessoria, a home. Mudou a escala? Muda
     aqui, e só aqui. */
  --fs-h1:clamp(34px,4.4vw,56px);--lh-h1:1.04;--ls-h1:-0.032em;
  --fs-h2:clamp(30px,3.8vw,44px);--lh-h2:1.08;--ls-h2:-0.025em;
  --fs-lead:17.5px;--lh-lead:1.68;
  --fs-h3:18px;
}

*,*::before,*::after{box-sizing:border-box}
/* scroll-behavior:auto de propósito: 18.000px de rolagem animada levam 1,6s e
   parecem travamento. Decisão de 11/09/2026, registrada no LEIA-ME. */
html{scroll-behavior:auto;scroll-padding-top:88px;font-feature-settings:"kern","liga";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.6}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit}
/* O atributo hidden precisa vencer qualquer display declarado. Sem esta
   linha, um <div hidden class="grid"> continua na tela: [hidden] e (0,1,0),
   a classe tambem, e quem vier depois ganha. Apareceu em 14/09/2026 na
   etapa 2 do formulario da landing de sites, que ficou visivel junto com a
   etapa 1. */
[hidden]{display:none !important}
h1,h2,h3,h4,h5{font-family:var(--font-heading);color:var(--fg-heading);margin:0;font-weight:700;line-height:1.15;letter-spacing:-0.02em;text-wrap:balance}
p{margin:0}
p,li{text-wrap:pretty}
a{color:var(--fg-heading);text-decoration:none;transition:color var(--dur-fast) var(--ease)}
a:hover{color:var(--cta)}
*:focus{outline:none}
/* Anel de foco: --sl-olive-text (#7a6e4c) é o único tom da paleta que passa no
   WCAG 1.4.11 nos DOIS fundos — 5,05:1 sobre claro e 3,59:1 sobre o header
   escuro. As duas versões anteriores reprovavam: o dourado a 60% dava 1,80:1
   sobre claro, e --sl-forest dava 1,02:1 sobre escuro (invisível no header,
   que tem 5 links e o CTA focáveis). Medido em 11/09/2026. */
*:focus-visible{outline:3px solid var(--sl-olive-text);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.container{max-width:1180px;margin:0 auto;padding:0 32px}
/* Ritmo vertical do site. Três valores viraram um em 14/09/2026; as contas
   estão no LEIA-ME. Mexeu no respiro das seções? É aqui, e só aqui. */
:root{--sec-y:112px;--sec-head:64px;--sec-cta:48px}
@media (max-width:960px){:root{--sec-y:96px;--sec-head:44px}}
@media (max-width:720px){:root{--sec-y:64px;--sec-cta:36px}}
.section{padding:var(--sec-y) 0}
@media (max-width:720px){.container{padding:0 20px}}

/* Botões */
.btn{font-family:var(--font-body);font-weight:600;font-size:15px;padding:14px 24px;border-radius:var(--r-pill);border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:all var(--dur-fast) var(--ease);text-decoration:none;line-height:1;white-space:nowrap}
.btn-primary{background:var(--cta);color:#fff;box-shadow:var(--sl-shadow-cta);position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .55s var(--ease);z-index:-1}
.btn-primary:hover::after{left:120%}
.btn-primary:hover{background:var(--cta-hover);color:#fff;transform:translateY(-1px);box-shadow:0 4px 8px rgba(164,151,112,.2),0 16px 36px -10px rgba(164,151,112,.55)}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{background:transparent;color:var(--fg-heading);border:1.5px solid var(--border-strong)}
.btn-ghost:hover{background:var(--sl-sage);color:var(--fg-heading)}
.btn-ghost-light{background:transparent;color:#f5f2ec;border:1.5px solid rgba(245,242,236,.35)}
.btn-ghost-light:hover{background:rgba(245,242,236,.1);color:#fff}
/* O ghost dentro de uma secao escura se vira sozinho. Ele e --fg-heading sobre
   transparente, isto e, #141414: numa .on-dark isso e texto preto sobre fundo
   preto. O site ja tinha o .btn-ghost-light, mas era preciso lembrar de usa-lo,
   e ninguem avisava. A landing de Diagnostico tinha resolvido a mao no hero.
   (14/09/2026) */
.on-dark .btn-ghost{color:#f5f2ec;border-color:rgba(245,242,236,.35)}
.on-dark .btn-ghost:hover{background:rgba(245,242,236,.1);color:#fff}
.btn-dark{background:var(--sl-forest);color:#fff}
.btn-dark:hover{background:#000;color:#fff;transform:translateY(-1px)}
.btn-lg{padding:17px 30px;font-size:16px}
.btn svg{width:18px;height:18px;flex-shrink:0}
/* white-space:normal abaixo de 480px é de propósito: rótulo longo não estoura a
   largura. O efeito colateral é quebrar em duas linhas — medir antes de escolher
   o texto do botão. */
@media (max-width:480px){.btn{white-space:normal;text-align:center}}

/* Eyebrow e cabeçalho de seção */
/* A EYEBROW ERA --sl-amber (#a49770) E REPROVAVA EM TODA SECAO CLARA.
   Medido nas 15 eyebrows da home, no ar: 9 reprovavam, de 2,37:1 a 2,90:1.
   Sao 12px em caixa alta com .14em entre letras — a pior combinacao para
   ler —, e e o rotulo que nomeia cada secao.

   Nao serve o --sl-olive-text (#7a6e4c) que resolveu o botao: ele passa em
   branco (5,05), off-white (4,79) e sage (4,52), mas cai para 4,13 no
   --sl-sage-dark #ece8df, que a secao #autoridade usa. O --sl-olive-deep
   passa nos quatro: 6,22 / 5,90 / 5,57 / 5,09. E token que ja existia.

   As secoes escuras nao mudam: .on-dark .eyebrow continua --sl-amber-light
   a 10,34:1. O ::before do crachao NAO herda daqui — ele declara a
   propria cor, e por isso foi corrigido junto, logo abaixo.
   (21/09/2026) */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-olive-deep);font-weight:700}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--sl-amber);border-radius:2px}
.section-header{text-align:center;max-width:780px;margin:0 auto var(--sec-head)}
.section-header .eyebrow{justify-content:center}
/* As páginas de utilidade (contato, privacidade, vagas, 404 e 410) usam h1
   no lugar do h2 no cabeçalho de seção: são indexáveis e h1 é o reforço de
   tema mais barato que existe. A regra vale para os dois. */
.section-header h1,
.section-header h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);margin:16px 0}
.section-header p{font-size:16.5px;color:var(--fg-muted);line-height:1.7;max-width:680px;margin:0 auto}
.section-header.left{text-align:left;margin-left:0}
.section-header.left .eyebrow{justify-content:flex-start}
.section-header.left p{margin-left:0}
/* Seção com parágrafo de abertura: o cabeçalho encosta nele, e o respiro até
   o conteúdo fica por conta do .section-intro. Estava escrito duas vezes em
   style inline na landing de Diagnóstico, com medidas diferentes entre si
   (840/15,5px e 780/16px). (14/09/2026) */
.section-header.tem-intro{margin-bottom:20px}
.section-intro{max-width:820px;margin:0 auto 48px;text-align:center;font-size:16px;line-height:1.72;color:var(--fg-muted)}
@media (max-width:720px){
  .section-intro{margin-bottom:32px;font-size:15.5px}
}
.on-dark .section-header h2,.on-dark h2,.on-dark h3{color:#fff}
.on-dark .section-header p{color:rgba(245,242,236,.72)}

/* ==================== LINGUAGEM DE SEÇÃO ====================
   A numeração, o numeral fantasma e a atmosfera das seções escuras subiram
   para cá em 14/09/2026. Estavam escritos dentro de cada folha de página, e
   por isso a landing de Diagnóstico por imagem nasceu sem nenhum dos três:
   sem número na eyebrow, sem o numeral atrás do título e com as seções
   escuras chapadas, enquanto as outras tinham malha, ruído e filete.

   Quem escrever a próxima página ganha os três sem fazer nada: basta
   <section class="section"> com um <header class="section-header">, e
   acrescentar on-dark quando a seção for escura.
   ============================================================ */

/* 1. a contagem. O reset está no main (tribo-componentes.css). */
.section-header{position:relative;counter-increment:sec}
.section-header > *{position:relative;z-index:1}

/* 2. o número na eyebrow */
.section-header .eyebrow{gap:12px}
/* O crachao numerado declara a propria cor: era --sl-olive-text, 4,13:1
   sobre o #ece8df da secao #autoridade. Acompanha a eyebrow. */
.section-header .eyebrow::before{content:counter(sec,decimal-leading-zero);display:inline-block;width:auto;height:auto;background:none;border-radius:var(--r-sm);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1;padding:4px 7px;color:var(--sl-olive-deep);border:1px solid rgba(164,151,112,.5)}
.on-dark .section-header .eyebrow::before{color:var(--sl-amber-light);border-color:rgba(201,194,171,.4);background:none}

/* 3. o numeral fantasma atrás do cabeçalho */
.section-header::before{content:counter(sec,decimal-leading-zero);position:absolute;left:50%;top:-38px;transform:translateX(-50%);font-size:clamp(120px,16vw,200px);font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--sl-forest);opacity:.035;pointer-events:none;user-select:none;z-index:0}
.on-dark .section-header::before{color:#fff;opacity:.05}
@media (max-width:720px){
  .section-header::before{top:-26px;font-size:96px}
}

/* 4. a superfície das seções escuras.
   Três camadas: a malha de dois brilhos oliva sobre o verde-escuro, o ruído
   em 7% no modo soft-light (tira o aspecto de chapado do fundo escuro) e o
   filete dourado que marca o início da seção. O conteúdo sobe para z-index 1
   porque as duas camadas decorativas ficam por baixo. */
.on-dark{background:radial-gradient(900px 400px at 15% 0%,rgba(164,151,112,.14),transparent 60%),radial-gradient(700px 400px at 90% 100%,rgba(164,151,112,.08),transparent 60%),var(--sl-forest);color:rgba(245,242,236,.86);position:relative;overflow:hidden;isolation:isolate}
.on-dark::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.07;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E");background-size:160px 160px}
.on-dark::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent 0,rgba(164,151,112,.55) 50%,transparent 100%);z-index:1;pointer-events:none}
.on-dark > .container{position:relative;z-index:1}
.on-dark p{color:rgba(245,242,236,.78)}
.on-dark strong{color:#fff}
.on-dark ::selection{background:rgba(201,194,171,.45);color:#141414}

/* 5. utilitários de fundo, para a seção não precisar de style inline */
.bg-alt{background:var(--bg-alt)}
.bg-champagne{background:var(--sl-champagne)}

.on-dark .eyebrow{color:var(--sl-amber-light)}
.on-dark .eyebrow::before{background:var(--sl-amber-light)}

/* CTA de fim de seção */
.section-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:var(--sec-cta);text-align:center}
.section-cta .micro{font-size:13px;color:var(--fg-muted)}
.on-dark .section-cta .micro{color:rgba(245,242,236,.6)}

/* ============= Header (.sl-nav) ============= */
.sl-nav{position:sticky;top:0;z-index:50;background:rgba(20,20,20,.92);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid rgba(245,242,236,.08);transition:box-shadow var(--dur) var(--ease)}
.sl-nav.is-scrolled{box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
.sl-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--sl-olive),var(--sl-amber-light));pointer-events:none}
.sl-nav-container{max-width:1280px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;transition:height var(--dur) var(--ease)}
.sl-nav.is-scrolled .sl-nav-container{height:64px}
/* logo encolhe junto — veio do .is-compact da Assessoria */
.sl-nav.is-scrolled .sl-brand img{height:36px}
.sl-brand img{transition:height var(--dur) var(--ease)}
.sl-brand{display:flex;align-items:center;flex-shrink:0}
.sl-brand img{height:44px;width:auto}
.sl-nav-links{display:flex;gap:26px;align-items:center}
.sl-nav-links a{position:relative;color:#f5f2ec;font-weight:600;font-size:13.5px;padding-bottom:3px}
/* nowrap obrigatório: sem ele o rótulo quebra e vaza do header de 72px. */
.sl-nav-links > a{white-space:nowrap}
.sl-nav-links > a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--sl-olive);border-radius:1px;transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.sl-nav-links > a:hover,.sl-nav-links > a.is-active{color:#fff}
.sl-nav-links > a:hover::after,.sl-nav-links > a.is-active::after{transform:scaleX(1)}
.sl-nav-end{display:flex;align-items:center;gap:8px}
.sl-nav-toggle{display:none;flex-shrink:0;width:44px;height:44px;min-width:44px;min-height:44px;background:none;border:1px solid rgba(245,242,236,.25);border-radius:var(--r-pill);cursor:pointer;color:#f5f2ec;padding:10px;align-items:center;justify-content:center}
.sl-nav-toggle svg{width:100%;height:100%;pointer-events:none}
/* O CTA do topo ficou de fora da decisao de 14/09 (acima, no --cta) e seguia branco sobre
   --sl-olive: 2,90:1, e 4,07:1 no hover. Agora usa os mesmos tokens do .btn-primary (29/09/2026). */
.sl-nav-cta{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;background:var(--cta);color:#fff;font-weight:600;font-size:14px;padding:13px 22px;border-radius:var(--r-pill);line-height:1;box-shadow:var(--sl-shadow-cta);transition:all var(--dur-fast) var(--ease)}
.sl-nav-cta:hover{background:var(--cta-hover);color:#fff;transform:translateY(-1px)}
.sl-nav-cta svg{width:17px;height:17px}
.sl-cta-short{display:none}
.sl-nav-backdrop{position:fixed;left:0;right:0;top:72px;bottom:0;background:rgba(14,14,14,.5);z-index:48;opacity:0;pointer-events:none;transition:opacity .2s ease}
.sl-nav-backdrop.sl-show{opacity:1;pointer-events:auto}
/* Sem touch-action:none, de propósito. Ele impedia a rolagem do fundo, mas
   travava junto o pinch-zoom da página inteira enquanto o menu estivesse
   aberto — barreira de acessibilidade (WCAG 1.4.4). O overflow:hidden no
   body mais o overscroll-behavior:contain na gaveta resolvem a rolagem sem
   tirar o zoom de ninguém. Apurado na auditoria de 11/09/2026. */
body.sl-menu-locked{overflow:hidden}
body.sl-menu-locked .sl-nav-links{overscroll-behavior:contain}
/* 1220px, não 1100: a barra deixou de mostrar "Serviços" mais as âncoras da
   página e passou a trazer os CINCO serviços, cada um com submenu próprio.

   O PIOR CASO NÃO É UMA PÁGINA DO SITE, É UMA DO BLOG: lá o "Blog" vira
   submenu e ganha seta, e entra um item "Cases" que só existe no blog (ver
   blog-includes/header.php, onde o $TB_MENU_EXTRA é montado). São OITO itens
   contra sete. Medido na página do blog PUBLICADA, em 17/09/2026:

     largura da janela   1181   1220   1280   1366
     folga até o CTA       22     42     72     79   (px)

   Nada ali varia com conteúdo: os cinco rótulos são fixos e o $TB_MENU_EXTRA
   só recebe um item, e só quando há case publicado. Oito é o teto.

   Por que 1220 e não 1180: a 1181 cabia, com o botão inteiro na tela e sem
   transbordo — mas por 22px, que é MENOS do que os 25px pelos quais 1101 foi
   recusado. Manter 1180 seria aplicar dois critérios diferentes à mesma
   pergunta. A 1220 são 42px. A faixa 1181–1220 passa a ver a gaveta; 1280 e
   1366, as larguras comuns de notebook, continuam com a barra.

   Uma correção de método, que vale mais que o número: a primeira medida saiu
   de um protótipo injetado no DOM e deu 45px de folga — errou 23px, quase o
   dobro do que havia. Prototipar serve para saber se cabe; o número que vai
   para o comentário sai da página publicada.

   O tribo-nav.js repete este 1220 no resize — se um mudar sem o outro, a
   gaveta fica aberta por cima da barra na faixa entre os dois. */
@media (max-width:1220px){
  html{scroll-padding-top:78px}
  .sl-nav-container{height:64px;padding:0 20px}
  .sl-brand img{height:36px}
  .sl-nav-toggle{display:inline-flex}
  .sl-nav-cta{padding:12px 16px;font-size:13px;min-height:42px}
  .sl-cta-full{display:none}.sl-cta-short{display:inline}
  .sl-nav-backdrop{top:64px}
  /* visibility:hidden junto com opacity:0 — sem ela os 5 links da gaveta fechada
     continuam no caminho do teclado e são anunciados por leitor de tela.
     Corrigido na Assessoria em 09/09/2026; faltava no Google Ads E no Instagram. */
  .sl-nav-links{position:fixed;top:64px;left:0;right:0;z-index:49;background:rgba(20,20,20,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(245,242,236,.12);flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 16px;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
  .sl-nav.sl-open .sl-nav-links{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .sl-nav-links a{padding:14px 0;font-size:15px;border-bottom:1px solid rgba(245,242,236,.08)}
  .sl-nav-links > a::after{display:none}
}


/* ============= Submenu "Serviços" do header (11/09/2026) =============
   Entrou com a unificação: antes as três landings tinham menu só de
   âncoras da própria página e nenhum caminho entre elas no desktop.
   Uma barra só, com as outras páginas atrás deste submenu — a opção de
   duas barras fixas foi recusada por somar ~120px de topo grudado.
   Comportamento em assets/js/tribo-nav.js.

   NÃO use :focus-within para abrir o painel. Ele abre no visual sem
   mexer no aria-expanded do botão, e aí o leitor de tela anuncia
   "recolhido" com o menu aberto. Quem abre é o JS, que mantém o
   atributo e o visual no mesmo estado. O hover é conveniência de
   mouse e por isso está atrás de @media (hover:hover). */
.sl-has-sub{position:relative;display:flex;align-items:center}
.sl-sub-toggle{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;position:relative;background:none;border:0;margin:0;padding:0 0 3px;color:#f5f2ec;font-family:var(--font-body);font-weight:600;font-size:13.5px;line-height:inherit;cursor:pointer;transition:color var(--dur-fast) var(--ease)}
.sl-sub-toggle::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--sl-olive);border-radius:1px;transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.sl-sub-toggle[aria-expanded="true"]{color:#fff}
.sl-sub-toggle[aria-expanded="true"]::after{transform:scaleX(1)}
.sl-caret{width:13px;height:13px;flex-shrink:0;transition:transform var(--dur-fast) var(--ease)}
.sl-sub-toggle[aria-expanded="true"] .sl-caret{transform:rotate(180deg)}
.sl-sub{position:absolute;top:calc(100% + 15px);left:-14px;z-index:51;min-width:308px;margin:0;padding:8px;list-style:none;background:rgba(20,20,20,.98);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border:1px solid rgba(245,242,236,.12);border-radius:var(--r-lg);box-shadow:0 4px 8px rgba(20,20,20,.08),0 24px 48px -16px rgba(0,0,0,.7);opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
/* PONTE SOBRE O VÃO. O painel abre 15px abaixo do botão, e esses 15px não
   pertencem nem a um nem a outro — pertencem ao .sl-nav-container. Sem esta
   regra, descer o mouse do botão para os itens atravessa a faixa morta, o
   :hover da .sl-has-sub cai e o painel some antes de você chegar lá.
   left:0/right:0 herdam a largura do painel, que passa 14px à esquerda e
   219px à direita do botão — movimento na diagonal também precisa de chão.
   Só vale com o painel aberto: fechado, o .sl-sub é pointer-events:none e o
   ::before herda isso, então a ponte não abre nada sozinha.
   Medido em 11/09/2026. Se mudar o 'top' do painel, mude a altura aqui. */
.sl-sub::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.sl-sub-toggle[aria-expanded="true"] + .sl-sub{opacity:1;visibility:visible;transform:none;pointer-events:auto}
/* Linha entre os itens. rgba(245,242,236,.08) é o mesmo tom que a base já usa
   para separar no header e na gaveta — linha nova não inventa cor nova.
   li + li, e não border-bottom: assim não sobra risco solto embaixo do
   último item nem em cima do primeiro. Os 8px de padding do <ul> já recuam
   a linha das bordas do painel. */
.sl-sub li{margin:0}
.sl-sub li + li{border-top:1px solid rgba(245,242,236,.08)}
/* vence '.sl-nav-links a' da base por especificidade (0,2,1 contra 0,1,1) */
.sl-nav-links .sl-sub a{display:block;padding:10px 12px;border-radius:var(--r-md);color:rgba(245,242,236,.9);font-size:13.5px;font-weight:600;line-height:1.3}
.sl-nav-links .sl-sub a:hover{background:rgba(245,242,236,.08);color:#fff}
.sl-nav-links .sl-sub a[aria-current="page"]{background:rgba(164,151,112,.16);color:#fff}
/* O SCROLLSPY das landings marca com .is-active a âncora da seção visível. Ele
   procura por 'a[href^="#"]' dentro do menu (google-ads.js:47,
   assessoria.js:128) e continua achando as âncoras depois que elas entraram no
   submenu — o seletor dele é descendente. O que se perdeu ao mover foi a
   REGRA: a única que pintava era .sl-nav-links > a.is-active, FILHO DIRETO, e
   agora o link mora em li > a. A classe passava a ser aplicada sem pintar
   nada. Defeito do tipo que ninguém vê acontecer: nada quebra, só some. */
.sl-nav-links .sl-sub a.is-active{background:rgba(164,151,112,.16);color:#fff}
/* A CAPA do submenu é a página inteira; as âncoras abaixo são partes dela.
   Sem marcar a diferença o visitante lê seis itens irmãos e não percebe que
   o primeiro leva ao serviço e os outros a trechos dele. */
.sl-nav-links .sl-sub-capa a{color:#fff;font-size:14px}
.sl-sub-capa + li{border-top-color:rgba(245,242,236,.18)}
/* O serviço da página exibida fica marcado na barra. Sem o ::after de
   propósito: aquela linha âmbar quer dizer "submenu aberto", e as duas
   coisas no mesmo lugar deixariam de significar qualquer uma. */
.sl-sub-toggle.atual{color:#fff}
.sl-sub-desc{display:block;margin-top:3px;font-size:11.5px;font-weight:500;letter-spacing:0;color:rgba(245,242,236,.55)}
.sl-sub a:hover .sl-sub-desc{color:rgba(245,242,236,.72)}
/* hover só onde hover existe de verdade: em tela de toque ele gruda aberto */
@media (hover:hover) and (min-width:1221px){
  .sl-has-sub:hover .sl-sub{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .sl-has-sub:hover .sl-sub-toggle{color:#fff}
  .sl-has-sub:hover .sl-sub-toggle::after{transform:scaleX(1)}
}
@media (max-width:1220px){
  /* dentro da gaveta vira sanfona, na mesma régua dos outros itens */
  .sl-has-sub{display:block}
  .sl-sub-toggle{width:100%;justify-content:space-between;padding:14px 0;font-size:15px;border-bottom:1px solid rgba(245,242,236,.08)}
  .sl-sub-toggle::after{display:none}
  .sl-caret{width:16px;height:16px}
  .sl-sub{position:static;min-width:0;margin:0;padding:4px 0 10px;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;transition:none;display:none;opacity:1;visibility:visible;pointer-events:auto}
  .sl-sub-toggle[aria-expanded="true"] + .sl-sub{display:block}
  .sl-nav-links .sl-sub a{padding:11px 0 11px 14px;border-radius:0;border-left:2px solid rgba(245,242,236,.14);font-size:14px}
  .sl-nav-links .sl-sub a[aria-current="page"]{background:none;border-left-color:var(--sl-olive)}
  .sl-nav-links .sl-sub a.is-active{background:none;border-left-color:var(--sl-olive)}
}

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 200;
  background: #141414; color: #fff; padding: 10px 14px;
  border-radius: var(--r-md); text-decoration: none;
}
.skip-link:focus { left: 8px; }
/* VEIO DO assessoria.css EM 21/09/2026. Estava na folha da home descrevendo
   um componente do cabecalho compartilhado, entao dez das onze paginas nao
   tinham como pular a navegacao: quem anda so de teclado atravessava as
   mesmas dez paradas antes do h1, em toda pagina. Numa landing de trafego
   pago isso e o caminho obrigatorio entre o clique do anuncio e o
   formulario. */

/* ============= Rodapé (.sl-footer) ============= */
/* REDESENHO DE 30/09/2026, pedido do Marco: a organização e o alinhamento
   do rodapé do site da Dra. Rafaela Marques, com a identidade da Tribo. O
   bloco antigo (grade de quatro colunas, ficha rótulo+valor e oito camadas
   de ajuste de 11 a 17/09) saiu inteiro: a marcação mudou e nenhuma daquelas
   regras casava com ela.

   Escala única, toda em Manrope:
     rótulo de coluna  11,5px 700, caixa alta, .16em, --sl-amber-light
     texto principal   14,5px 500, --rd-tx1 (off-white a .86)
     texto de apoio    13px 400,   --rd-tx2 (off-white a .62: 6,7:1 no #141414)
     base legal        12,5px,     --rd-tx2
   Linhas: --rd-linha (.09) entre itens; --rd-bloco (.13) entre blocos.
   Dourado #a49770 CHAPADO nos selos, com o ícone em #141414 por cima
   (6,3:1); o mesmo dourado nas setas (6,3:1 sobre o fundo). Foco em dourado.

   Desktop em TRÊS colunas de altura parecida: marca e contato; serviços e
   navegação empilhados; onde estamos. Em quatro colunas as listas curtas
   deixavam vãos embaixo. */
.sl-footer{--rd-ouro:var(--sl-olive);--rd-claro:var(--sl-amber-light);--rd-creme:#faf9f5;
  --rd-tx1:rgba(245,242,236,.86);--rd-tx2:rgba(245,242,236,.62);
  --rd-linha:rgba(245,242,236,.09);--rd-bloco:rgba(245,242,236,.13);
  position:relative;isolation:isolate;background:#141414;color:var(--rd-tx2);font-size:14.5px;line-height:1.65}
/* O filete dourado no topo continua: com a #orcamento escura encostando no
   rodapé, que é o mesmo #141414, ele é a única fronteira (a .70, 3,74:1). */
.sl-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent 0,rgba(164,151,112,.70) 18%,rgba(164,151,112,.70) 82%,transparent 100%);pointer-events:none}
/* halo dourado bem diluído no canto da coluna "Onde estamos" (decorativo) */
.sl-footer::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 70% at 90% 0%,rgba(164,151,112,.11) 0%,rgba(164,151,112,0) 62%)}
.sl-footer a{color:inherit;text-decoration:none}

.rd-in{max-width:1180px;margin:0 auto;padding:clamp(52px,6vw,72px) clamp(20px,3vw,32px) 48px;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4.5vw,64px)}
.rd-in > *{min-width:0}
.rd-bloco + .rd-bloco{margin-top:36px}
.rd-marca .rd-bloco{margin-top:34px}

/* marca */
.rd-logo{display:inline-block;max-width:100%;line-height:0;margin-bottom:20px}
.rd-logo img{height:52px;width:auto;max-width:100%;display:block;object-fit:contain;object-position:left center;transition:opacity .22s ease}
.rd-logo:hover img{opacity:.82}
.rd-sobre{margin:0 0 12px;max-width:40ch;color:var(--rd-tx2)}
.rd-registro{margin:0;font-size:12.5px;line-height:1.6;color:var(--rd-tx2)}

/* rótulo de coluna: é rótulo, não título — o h2 herda a Manrope e perde a
   escala de título da base */
.rd-rot{display:flex;align-items:center;gap:11px;margin:0 0 10px;font-family:inherit;font-size:11.5px;font-weight:700;
  line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--rd-claro);text-wrap:wrap}
.rd-selo,.rd-ci,.rd-pin{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--rd-ouro);color:#141414}
.rd-selo{width:24px;height:24px;border-radius:7px}
.rd-selo svg{width:13px;height:13px;display:block}

/* LINHAS DE LISTA — serviços, navegação e canais usam a mesma linha: 10px
   de respiro, fio discreto entre os itens, texto à esquerda e seta dourada
   à direita que surge no hover. A linha inteira é o alvo (>= 42px). */
.rd-lista,.rd-canais{display:flex;flex-direction:column}
.rd-lista a,.rd-canal{display:flex;align-items:center;gap:12px;padding:10px 0;color:var(--rd-tx1);font-weight:500;line-height:1.45;transition:color .22s ease}
.rd-lista a + a,.rd-canal + .rd-canal{border-top:1px solid var(--rd-linha)}
.rd-lt{flex:1;min-width:0;overflow-wrap:anywhere}
.rd-sg{flex-shrink:0;width:14px;height:14px;margin-left:auto;color:var(--rd-ouro);opacity:0;transform:translateX(-5px);transition:opacity .25s ease,transform .3s var(--ease)}
.rd-lista a:hover,.rd-canal:hover{color:#fff}
.rd-lista a:hover .rd-sg,.rd-canal:hover .rd-sg,.rd-lista a:focus-visible .rd-sg,.rd-canal:focus-visible .rd-sg{opacity:1;transform:none}

/* canal: selo com o ícone + nome e detalhe */
.rd-ci{width:32px;height:32px;border-radius:9px}
.rd-ci svg{width:15px;height:15px;display:block}
.rd-ctx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.rd-ctx b{font-weight:600;color:inherit}
.rd-ctx small{font-size:13px;color:var(--rd-tx2);overflow-wrap:anywhere;transition:color .22s ease}
.rd-canal:hover small{color:var(--rd-claro)}

/* ONDE ESTAMOS */
.rd-un{padding-top:10px}
.rd-un strong{display:block;font-weight:600;color:var(--rd-creme);margin-bottom:4px}
.rd-un span{display:block;font-size:13px;line-height:1.65;color:var(--rd-tx2)}

/* MAPA — um link para o Google Maps desenhado como miniatura: malha de ruas
   em CSS, duas avenidas, o alfinete dourado com o raio tracejado e, embaixo,
   a faixa "Ver no mapa". Nenhum <iframe>: nada de terceiro carrega aqui. */
.rd-mapa{position:relative;display:flex;flex-direction:column;margin-top:16px;border-radius:14px;overflow:hidden;
  border:1px solid var(--rd-bloco);background:#1b1b1a;color:var(--rd-tx1);transition:border-color .25s ease}
.rd-mapa::before{content:"";position:absolute;inset:-30%;pointer-events:none;opacity:.55;transform:rotate(-22deg);
  background-image:repeating-linear-gradient(90deg,rgba(245,242,236,.06) 0 1px,transparent 1px 34px),
                   repeating-linear-gradient(0deg,rgba(245,242,236,.06) 0 1px,transparent 1px 46px)}
.rd-mapa:hover{border-color:rgba(164,151,112,.5)}
.rd-mv{position:relative;display:flex;align-items:center;justify-content:center;height:100px;overflow:hidden}
.rd-mv::before,.rd-mv::after{content:"";position:absolute;background:rgba(245,242,236,.06)}
.rd-mv::before{left:-10%;right:-10%;top:60%;height:6px;transform:rotate(-7deg)}
.rd-mv::after{top:-20%;bottom:-20%;left:64%;width:5px;transform:rotate(16deg)}
.rd-raio{position:absolute;width:78px;height:78px;border-radius:50%;border:1px dashed rgba(164,151,112,.5);transition:transform .6s var(--ease),border-color .3s ease}
.rd-pin{position:relative;width:34px;height:34px;border-radius:50%;transition:transform .3s var(--ease)}
.rd-pin svg{width:16px;height:16px;display:block}
.rd-mapa:hover .rd-pin{transform:translateY(-2px)}
.rd-mapa:hover .rd-raio{transform:rotate(45deg) scale(1.06);border-color:rgba(164,151,112,.8)}
.rd-mr{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--rd-linha);background:rgba(0,0,0,.28)}
.rd-tx{flex:1;min-width:0}
.rd-tx b{display:block;font-weight:600;color:var(--rd-creme);line-height:1.35}
.rd-tx small{display:block;font-size:13px;color:var(--rd-tx2);line-height:1.4}
.rd-mr > svg{flex-shrink:0;width:15px;height:15px;color:var(--rd-ouro);transition:transform .3s var(--ease)}
.rd-mapa:hover .rd-mr > svg{transform:translateX(3px)}
.rd-nota{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--rd-tx2)}
.rd-hora{display:flex;align-items:flex-start;gap:8px;margin-bottom:4px;color:var(--rd-tx1)}
.rd-hora svg{width:14px;height:14px;flex-shrink:0;margin-top:3px;color:var(--rd-ouro)}

/* botão de agendar: o .btn-primary do site. O color:#fff aqui é porque o
   ".sl-footer a{color:inherit}" (0,1,1) vence o .btn-primary (0,1,0). */
.sl-footer .rd-agendar{margin-top:24px;color:#fff}
.rd-agendar svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.rd-agendar:hover svg{transform:translateX(3px)}

/* LINHA EXTRA — as categorias do blog, só nas páginas do blog */
.rd-extra{border-top:1px solid var(--rd-bloco)}
.rd-bin{max-width:1180px;margin:0 auto;padding:22px clamp(20px,3vw,32px)}
.rd-extra .rd-bin{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px}
.rd-extra .rd-rot{margin:0}
.rd-extra ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 22px}
.rd-extra a{display:inline-flex;align-items:center;min-height:34px;font-size:13.5px;font-weight:500;color:var(--rd-tx1);
  text-underline-offset:4px;transition:color .22s ease}
.rd-extra a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--rd-ouro)}

/* BASE LEGAL */
.rd-base{border-top:1px solid var(--rd-bloco)}
.rd-base .rd-bin{padding-top:26px;padding-bottom:30px}
.rd-legal{margin:0;max-width:880px;font-size:12.5px;line-height:1.7;color:var(--rd-tx2)}
.rd-assina{margin:18px 0 0;padding-top:18px;border-top:1px solid var(--rd-linha);display:flex;flex-wrap:wrap;gap:8px 20px;
  justify-content:space-between;align-items:center;font-size:12.5px;color:var(--rd-tx2)}
.rd-assina a{font-weight:600;color:var(--rd-tx1);text-decoration:underline;text-decoration-color:rgba(164,151,112,.6);text-underline-offset:3px;transition:color .22s ease}
.rd-assina a:hover{color:#fff}

/* foco por teclado: o anel dourado (6,3:1) no lugar do --sl-olive-text global
   (3,65:1 sobre o #141414) */
.sl-footer a:focus-visible{outline:2px solid var(--rd-ouro);outline-offset:3px;border-radius:6px}
.rd-lista a:focus-visible,.sl-footer .rd-canal:focus-visible{outline-offset:-2px}
.sl-footer .rd-mapa:focus-visible{outline-offset:2px;border-radius:14px}
.sl-footer .rd-agendar:focus-visible{border-radius:var(--r-pill)}

/* toque: sem hover, a seta fica visível e discreta; as linhas já têm >= 42px */
@media (hover:none){
  .rd-sg{opacity:.5;transform:none}
  .rd-assina a{min-height:40px;display:inline-flex;align-items:center}
}

/* TABLET: marca e onde estamos lado a lado (os dois blocos altos); embaixo,
   serviços e navegação em duas colunas, abertas por um fio */
@media (max-width:1040px){
  .rd-in{grid-template-columns:1fr 1fr;gap:44px 48px;grid-template-areas:"marca local" "links links"}
  .rd-marca{grid-area:marca}.rd-local{grid-area:local}
  .rd-links{grid-area:links;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;padding-top:36px;border-top:1px solid var(--rd-bloco)}
  .rd-links .rd-bloco + .rd-bloco{margin-top:0}
}
/* CELULAR: marca e contato, depois onde estamos com o mapa e o botão, e só
   então os links. Um fio separa cada bloco. */
@media (max-width:620px){
  .rd-in{grid-template-columns:1fr;gap:0;padding-top:44px;padding-bottom:36px;grid-template-areas:none}
  .rd-in > *{grid-area:auto}
  .rd-in > * + *{border-top:1px solid var(--rd-bloco);margin-top:32px;padding-top:32px}
  .rd-marca{order:1}.rd-local{order:2}.rd-links{order:3}
  /* Serviços e A Tribo lado a lado também no celular (pedido do Marco,
     30/09/2026): as duas listas curtas empilhadas davam ~500px de rodapé.
     Servicos leva 1.15fr porque tem os nomes longos: a 375px e 414px tudo
     cabe numa linha (182px e 135px de coluna, 13,5px, sem a seta); a 320px
     alguns quebram em duas, e a linha continua com >= 40px. */
  .rd-links{display:grid;grid-template-columns:1.15fr .85fr;gap:0 18px}
  .rd-links .rd-bloco + .rd-bloco{margin-top:0}
  .rd-links .rd-lista a{font-size:13.5px;gap:6px}
  .rd-links .rd-sg{display:none}
  .sl-footer .rd-agendar{width:100%}
  .rd-sobre{max-width:none}
  .rd-logo img{height:46px}
  .rd-assina{flex-direction:column;align-items:flex-start;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  .sl-footer *{transition:none!important}
  .rd-mapa:hover .rd-pin,.rd-mapa:hover .rd-raio,.rd-mapa:hover .rd-mr > svg,.rd-agendar:hover svg{transform:none}
}

/* ============= Reveal ao rolar ============= */
/* Rede de segurança: o conteúdo só começa escondido quando a página
   confirmou que tem quem o revele. O <html> ganha .js-reveal por um script
   em linha no <head>, e o próprio script tira a classe no evento load se o
   tribo-componentes.js não tiver chegado.

   Sem isso, um 404 nesse arquivo — ou o JS desligado — deixaria o conteúdo
   em opacity:0 nas QUATRO páginas, porque o gatilho passou a ser um só.
   Antes de 14/09/2026 cada página dependia do próprio JS; concentrar o
   gatilho é melhor, mas só com a rede. (14/09/2026) */
.js-reveal .sl-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--i,0) * 70ms)}
.js-reveal .sl-reveal.sl-in{opacity:1;transform:none}
/* Escalonamento: o contêiner revela como bloco e os filhos entram em
   cascata de 70ms. Era .mp-stagger, só na Assessoria; virou .tb-stagger
   na base em 14/09/2026 para o Diagnóstico poder usar. */
.tb-stagger{opacity:1;transform:none}
.js-reveal .tb-stagger > *{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.tb-stagger.sl-in > *{opacity:1;transform:none}
.tb-stagger.sl-in > :nth-child(2){transition-delay:70ms}
.tb-stagger.sl-in > :nth-child(3){transition-delay:140ms}
.tb-stagger.sl-in > :nth-child(4){transition-delay:210ms}
.tb-stagger.sl-in > :nth-child(5){transition-delay:280ms}
.tb-stagger.sl-in > :nth-child(6){transition-delay:350ms}
/* Até 10: a lista de vagas tem 8 itens e a da 404 tem 7 — parando no 6,
   os últimos apareciam junto com o primeiro e a cascata sumia. */
.tb-stagger.sl-in > :nth-child(7){transition-delay:420ms}
.tb-stagger.sl-in > :nth-child(8){transition-delay:490ms}
.tb-stagger.sl-in > :nth-child(9){transition-delay:560ms}
.tb-stagger.sl-in > :nth-child(n+10){transition-delay:630ms}


/* Movimento reduzido: cobre também o brilho do botão e o header que encolhe,
   que entraram na base em 11/09/2026 e antes só existiam no Google Ads. */
@media (prefers-reduced-motion:reduce){
  .sl-reveal{opacity:1;transform:none;transition:none}
  /* A regra de cima tem especificidade (0,1,0) e perdia para
     .js-reveal .sl-reveal (0,2,0): o fade de 24px continuava para quem pediu
     movimento reduzido, e o .tb-stagger nem estava coberto (29/09/2026). */
  .js-reveal .sl-reveal,.js-reveal .tb-stagger > *{opacity:1;transform:none;transition:none}
  .btn-primary::after{display:none}
  .sl-nav,.sl-nav-container{transition:none}
}