/* ============================================================================
   ConnectHub Assessoria — ESTILO DA LANDING (/)

   Folha única da home. Trocada em 23/08/2026 junto com o index: saiu o layout
   antigo (hero em duas colunas + formulário) e entrou o "Método ConnectHub".
   A versão anterior está em _arquivo/estilo_1-arquivado-2026-08-23.css.

   ⚠️ AO EDITAR ESTE ARQUIVO, SUBIR O ?v= DO <link> NO index.html.
   A Cloudflare serve .css com max-age longo: sem trocar a versão, quem já
   visitou continua com a folha velha por horas e NADA acusa o erro — o
   deploy fica verde e a página quebrada só para quem já esteve aqui.

   ORDEM DAS SEÇÕES (a mesma do HTML, para achar rápido):
   tokens → base → ambiente → topo → utilitários → reveal → hero → proofbar
   → mercado → método → prova social → quem somos → diferenciais → painéis
   → FAQ → CTA final → rodapé → WhatsApp flutuante
   ============================================================================ */

/* ---------------------------------- tokens -------------------------------- */
:root{
  --bg-0:#04101c; --bg-1:#071827; --surface:#0a1e30; --surface-2:#0d2438; --surface-3:#102b42;
  --line:rgba(148,196,222,.12); --line-2:rgba(148,196,222,.22);
  --cyan:#22d3ee; --cyan-deep:#0891b2; --cyan-soft:rgba(34,211,238,.09);
  --text:#eef7fb; --text-2:#c2d9e6; --muted:#8fb2c7; --muted-2:#5f849c;
  --good:#34d399; --warn:#fbbf24; --wa:#25d366; --wa-deep:#128c4b;
  --grad:linear-gradient(135deg,#0891b2 0%,#22d3ee 100%);
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --shadow-lg:0 32px 64px -24px rgba(0,0,0,.55);
  --shadow-md:0 16px 40px -16px rgba(0,0,0,.45);
  --font-d:'Sora',ui-sans-serif,system-ui,sans-serif;
  --font-b:'Manrope',ui-sans-serif,system-ui,sans-serif;
}

/* ----------------------------------- base --------------------------------- */
*{margin:0; padding:0; box-sizing:border-box}

/* text-size-adjust:100% é correção de bug, não enfeite. O Chrome do Android
   INFLA fontes por conta própria em blocos de texto longo ("font boosting"),
   e foi isso que jogou o título para fora da tela num print do Gabriel em
   21/08 — nenhum emulador reproduz, porque o recurso só existe no aparelho
   de verdade. Não remover. */
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  background:var(--bg-0); color:var(--text); font-family:var(--font-b);
  font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:rgba(34,211,238,.28)}
img{max-width:100%}

/* Filho de grid/flex tem min-width:auto por padrão e se RECUSA a encolher
   abaixo do próprio conteúdo — um número grande ou uma palavra comprida
   empurra a linha inteira e cria rolagem lateral no celular. */
.grid > *, .mfacts > *, .mfact > *, .licrow > *{min-width:0}

/* -------------------------------- ambiente -------------------------------- */
.orb{position:fixed; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; opacity:.55}
.orb-a{width:520px;height:520px; background:radial-gradient(circle,rgba(8,145,178,.16),transparent 65%); top:-160px; right:-120px; animation:drift 26s ease-in-out infinite alternate}
.orb-b{width:460px;height:460px; background:radial-gradient(circle,rgba(34,211,238,.08),transparent 65%); bottom:-140px; left:-140px; animation:drift 32s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-46px,40px,0)}}
main,header.top,footer{position:relative; z-index:1}

/* ---------------------------------- topo ---------------------------------- */
header.top{position:sticky; top:0; z-index:50; background:rgba(4,16,28,.74); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transition:box-shadow .3s}
header.top.tight{box-shadow:0 10px 30px -18px rgba(0,0,0,.7)}
.topwrap{max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:22px; padding:14px clamp(20px,4.5vw,40px)}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-d); font-weight:800; font-size:16.5px; color:var(--text); text-decoration:none; letter-spacing:.02em}
.brand img{height:30px; width:auto; display:block}
nav.links{display:flex; gap:24px; margin-left:auto; align-items:center}
nav.links a{color:var(--text-2); text-decoration:none; font-size:14.5px; font-weight:600; transition:color .2s}
nav.links a:hover{color:var(--cyan)}
.area{color:var(--text-2); border:1px solid var(--line-2); border-radius:12px; padding:8px 14px; font-weight:700; font-size:13.5px; white-space:nowrap; transition:border-color .2s,color .2s}
.area:hover{border-color:var(--cyan); color:var(--cyan)}
.nav-cta{background:var(--wa); color:#04240f!important; font-weight:800; padding:9px 17px; border-radius:12px; box-shadow:0 8px 22px -8px rgba(37,211,102,.55); transition:transform .2s}
.nav-cta:hover{transform:translateY(-2px)}

/* Abaixo de 900px some tudo que não tem .keep: sobram "Área do cliente" e o
   botão de WhatsApp, que é o que interessa no celular. */
@media(max-width:900px){nav.links a:not(.keep){display:none}}
@media(max-width:560px){
  .topwrap{padding-left:14px; padding-right:14px; gap:10px}
  .brand img{height:24px}
  nav.links{gap:8px}
  .area{padding:7px 9px; font-size:11.5px}
  .nav-cta{padding:7px 10px; font-size:12.5px}
}

/* ------------------------------- utilitários ------------------------------ */
.wrap{max-width:1120px; margin:0 auto; padding:0 clamp(20px,4.5vw,40px)}
section{padding:clamp(30px,5vw,72px) 0}
.kicker{font-family:var(--font-d); font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan); display:inline-flex; align-items:center; gap:12px; margin-bottom:16px}
.kicker::before{content:''; width:26px; height:2px; background:var(--grad); border-radius:2px}
h1,h2,h3,h4{font-family:var(--font-d); text-wrap:balance}
h2{font-size:clamp(27px,3.5vw,41px); font-weight:800; line-height:1.18; letter-spacing:-.01em; margin-bottom:14px}
.lead{color:var(--muted); max-width:64ch; font-size:17px}
.hl{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.center{text-align:center}
.center .feat-grid,.center .faqlist,.center .prova-grid,.center .steps,.center .panels{text-align:left}
.center .lead{margin-left:auto;margin-right:auto}

/* ------------------------------- reveal ao rolar --------------------------
   O estado escondido mora atrás de .js, classe que o home.js adiciona no
   <html> antes da primeira pintura. Se o script for bloqueado (CSP, extensão,
   rede), a classe nunca entra e a página aparece inteira, estática. O
   contrário — esconder por padrão e revelar com JS — deixaria a landing em
   BRANCO para quem não roda o script. Não inverter. */
.js .rv{opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.2,.65,.25,1), transform .8s cubic-bezier(.2,.65,.25,1); transition-delay:var(--d,0s); will-change:opacity,transform}
.js .rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  .orb-a,.orb-b{animation:none}
  html{scroll-behavior:auto}
}

/* ---------------------------------- hero ---------------------------------- */
.hero{padding:clamp(38px,6vw,88px) 0 clamp(26px,4vw,48px)}
.hero-solo{max-width:880px; margin:0 auto; text-align:center}
.hero h1{font-size:clamp(34px,4.8vw,56px); font-weight:800; line-height:1.14; letter-spacing:-.015em; margin-bottom:20px}
.hero .sub{color:var(--muted); font-size:18px; max-width:56ch; margin:0 auto 28px}
.cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center; margin-bottom:24px}
.hero .badges{justify-content:center}
.btn-wa{display:inline-flex; align-items:center; gap:10px; background:var(--wa); color:#04240f; font-family:var(--font-d); font-weight:700; font-size:16px; padding:15px 26px; border-radius:14px; text-decoration:none; box-shadow:0 10px 30px -8px rgba(37,211,102,.55); transition:transform .22s,box-shadow .22s; position:relative}
.btn-wa:hover{transform:translateY(-3px); box-shadow:0 18px 40px -10px rgba(37,211,102,.65)}
.btn-ghost{display:inline-flex; align-items:center; color:var(--text-2); border:1px solid var(--line-2); font-weight:700; font-size:15.5px; padding:14px 24px; border-radius:14px; text-decoration:none; transition:.2s}
.btn-ghost:hover{border-color:var(--cyan); color:var(--cyan); background:var(--cyan-soft)}
/* Os três selos do hero ("Lei 14.133/2021", "Brasília/DF · Brasil todo",
   "Grátis e sem compromisso") saíram em 23/08/2026 a pedido do Gabriel.
   O CSS foi junto: os três já estão ditos no corpo da página e no rodapé,
   e repetidos logo abaixo do botão só afastavam o CTA da dobra. */

/* -------------------- peças do painel (usadas na seção Painéis) ------------ */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:16px}
.kpi{background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px}
.kpi .l{font-size:9.5px; font-weight:800; letter-spacing:.13em; color:var(--muted-2); text-transform:uppercase}
.kpi .v{font-family:var(--font-d); font-size:22px; font-weight:800}
.kpi .v em{font-style:normal; color:var(--good); font-size:13px}
.licrow{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--line)}
.licrow .t b{display:block; font-size:13.5px; font-weight:700}
.licrow .t span{font-size:11.5px; color:var(--muted-2)}
.pill{font-size:10.5px; font-weight:800; letter-spacing:.05em; padding:4px 11px; border-radius:99px; white-space:nowrap}
.pill.sel{color:var(--cyan); background:var(--cyan-soft); border:1px solid rgba(34,211,238,.3)}
.pill.win{color:var(--good); background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.3)}
.pill.cot{color:var(--warn); background:rgba(251,191,36,.09); border:1px solid rgba(251,191,36,.28)}
.janela{display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--line); background:rgba(4,16,28,.4)}
.janela i{width:9px; height:9px; border-radius:50%; background:#f87171}
.janela i:nth-child(2){background:var(--warn)}
.janela i:nth-child(3){background:var(--good)}
.janela .url{flex:1; text-align:center; font-size:11.5px; color:var(--muted-2); font-weight:600}

/* -------------------------------- proofbar -------------------------------- */
.proofbar{padding:0 0 clamp(26px,4vw,48px)}
.proofbar .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media(max-width:860px){.proofbar .grid{grid-template-columns:repeat(2,1fr); gap:10px}}
.cell{background:linear-gradient(180deg,var(--surface) 0%,rgba(10,30,48,.4) 100%); border:1px solid var(--line); border-radius:var(--r-md); padding:26px 24px; position:relative; overflow:hidden}
.cell::after{content:''; position:absolute; inset:auto 0 0 0; height:2px; background:var(--grad); opacity:.6}
.cell .num{font-family:var(--font-d); font-size:clamp(22px,3vw,34px); font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.cell .lbl{color:var(--muted); font-size:13.5px; font-weight:600}
@media(max-width:560px){
  .cell{padding:16px 15px}
  .cell .num{font-size:21px}
  .cell .lbl{font-size:12px; line-height:1.4}
  .mfact{padding:16px 16px; gap:5px}
  .mfact .big{font-size:19px}
  .mfact span{font-size:13.5px}
}

/* --------------------------------- mercado --------------------------------
   Era duas colunas (texto à esquerda, os três dados à direita). Virou cabeçalho
   centrado com os dados numa fileira embaixo em 23/08/2026: assim esta seção
   passa a seguir o mesmo eixo do resto da página — método, diferenciais,
   painéis, FAQ e CTA final já eram centrados. */
.mercado{background:linear-gradient(180deg,transparent,rgba(7,24,39,.8) 14%,rgba(7,24,39,.8) 86%,transparent)}
.mercado h2 b{color:var(--cyan)}
.mfacts{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(28px,4vw,44px)}
@media(max-width:760px){.mfacts{grid-template-columns:1fr; gap:10px}}
.mfact{display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:22px 20px}
.mfact .big{font-family:var(--font-d); font-weight:800; font-size:clamp(19px,2vw,24px); color:var(--cyan); white-space:nowrap}
.mfact span{color:var(--muted); font-size:14.5px}

/* --------------------------------- método --------------------------------- */
.met-head{max-width:660px; margin-left:auto; margin-right:auto; text-align:center; margin-bottom:clamp(26px,3.5vw,40px)}
.met-head .lead{margin-left:auto; margin-right:auto}
.steps{display:grid; gap:0}
.step{display:grid; grid-template-columns:64px 1fr; gap:clamp(18px,3vw,32px); position:relative; padding-bottom:clamp(32px,4vw,44px)}
.step:last-child{padding-bottom:0}
.step .rail{position:relative; display:flex; justify-content:center}
.step .rail::before{content:''; position:absolute; top:56px; bottom:-6px; width:2px; background:linear-gradient(180deg,var(--line-2),var(--line)); transform:scaleY(0); transform-origin:top; transition:transform .9s cubic-bezier(.2,.65,.25,1) .25s}
.step.in .rail::before{transform:scaleY(1)}
.step:last-child .rail::before{display:none}
.stepnum{width:52px;height:52px; border-radius:15px; display:grid; place-items:center; font-family:var(--font-d); font-weight:800; font-size:18px; color:var(--cyan); background:var(--surface-2); border:1px solid rgba(34,211,238,.3); box-shadow:0 0 0 0 rgba(34,211,238,.25); transition:box-shadow .6s .3s}
.step.in .stepnum{box-shadow:0 0 0 6px rgba(34,211,238,.07), 0 10px 26px -10px rgba(34,211,238,.35)}
.step h4{font-size:19px; font-weight:700; margin:12px 0 8px}
.step p{color:var(--muted); max-width:60ch; font-size:15.5px}
.step .mini{display:inline-block; margin-top:10px; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2)}
.step .mini b{color:var(--cyan)}

/* No desktop as 6 etapas viram cartões 3x2 e o trilho vertical some. */
@media(min-width:961px){
  .steps{grid-template-columns:repeat(3,1fr); gap:20px}
  .step{grid-template-columns:1fr; padding-bottom:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:26px; transition:border-color .25s,transform .25s}
  .step:hover{border-color:rgba(34,211,238,.35); transform:translateY(-4px)}
  .step .rail{justify-content:flex-start}
  .step .rail::before{display:none}
  .step p{font-size:14.5px}
}

/* ------------------------------ prova social ------------------------------ */
.prova{background:linear-gradient(180deg,transparent,rgba(7,24,39,.8) 12%,rgba(7,24,39,.8) 88%,transparent)}
.prova h2{font-size:clamp(28px,3.8vw,44px)}
.prova h2 .n{color:var(--cyan)}
.prova-grid{max-width:660px; margin:clamp(28px,4vw,44px) auto 0}
.case{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column}
.case .video{aspect-ratio:16/10; background:radial-gradient(ellipse at 50% 40%,rgba(34,211,238,.12),rgba(4,16,28,.6)), var(--surface-2); display:grid; place-items:center; position:relative; border-bottom:1px solid var(--line)}
.case .play{width:64px;height:64px;border-radius:50%; background:var(--grad); display:grid; place-items:center; color:#03222b; box-shadow:0 14px 34px -10px rgba(34,211,238,.6); transition:transform .25s}
.case:hover .play{transform:scale(1.08)}
.case .slotnote{position:absolute; bottom:12px; left:50%; transform:translateX(-50%); width:max-content; max-width:88%; text-align:center; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); background:rgba(4,16,28,.7); border:1px dashed var(--line-2); padding:5px 12px; border-radius:99px}
.case .body{padding:24px 26px}
.case .body h3{font-size:19px; margin-bottom:8px}
.case .body p{color:var(--muted); font-size:15px}

/* -------------------------------- quem somos ------------------------------ */
.quem{padding-top:0}
.quem .texto{max-width:74ch; margin:0 auto}

/* ------------------------------- diferenciais ----------------------------- */
.feat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:clamp(32px,4vw,48px)}
@media(max-width:820px){.feat-grid{grid-template-columns:1fr}}
.feat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:28px; transition:border-color .25s, transform .25s, box-shadow .25s}
.feat:hover{border-color:rgba(34,211,238,.35); transform:translateY(-4px); box-shadow:var(--shadow-md)}
.feat .ic{width:44px;height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px; background:var(--cyan-soft); border:1px solid rgba(34,211,238,.25); color:var(--cyan)}
.feat h4{font-size:17px; font-weight:700; margin-bottom:7px}
.feat p{color:var(--muted); font-size:15px}

/* --------------------------------- painéis -------------------------------- */
.paineis{padding-top:0}
.panels{max-width:720px; margin:clamp(28px,4vw,44px) auto 0}
.panelcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:border-color .25s, transform .25s}
.panelcard:hover{border-color:rgba(34,211,238,.3); transform:translateY(-4px)}
.panelcard .shot{background:var(--surface-2); border-bottom:1px solid var(--line); padding-bottom:8px}
.panelcard figcaption{padding:20px 24px}
.panelcard figcaption h4{font-size:16.5px; margin-bottom:5px}
.panelcard figcaption p{color:var(--muted); font-size:14px}
.funil{padding:4px 16px 12px; display:grid; gap:7px}
.funil i{display:flex; align-items:center; gap:10px; font-style:normal}
.funil b{height:12px; border-radius:6px; background:var(--grad); opacity:.75; display:block}
.funil span{font-size:11px; color:var(--muted-2); font-weight:700; white-space:nowrap}
.chartlbl{font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); padding:12px 16px 8px; border-top:1px solid var(--line)}

/* ----------------------------------- FAQ ---------------------------------- */
.faq{padding-top:0}
.faqlist{margin:clamp(30px,4vw,44px) auto 0; display:grid; gap:12px; max-width:820px}
details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:border-color .25s}
details[open]{border-color:rgba(34,211,238,.35)}
summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:19px 24px; font-family:var(--font-d); font-weight:700; font-size:15.5px}
summary::-webkit-details-marker{display:none}
summary .q{width:30px;height:30px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; background:var(--cyan-soft); border:1px solid rgba(34,211,238,.25); color:var(--cyan); font-size:15px; font-weight:800; transition:transform .35s cubic-bezier(.2,.65,.25,1)}
details[open] summary .q{transform:rotate(45deg)}
summary:focus-visible{outline:2px solid var(--cyan); outline-offset:-2px; border-radius:var(--r-md)}
.ans{padding:0 24px 20px 70px; color:var(--muted); font-size:15px; max-width:68ch}
.ans b{color:var(--text-2)}

/* -------------------------------- CTA final ------------------------------- */
.contato{padding-top:0}
.cta-final-card{background:linear-gradient(150deg,var(--surface-2) 0%,var(--surface) 60%); border:1px solid var(--line-2); border-radius:calc(var(--r-lg) + 6px); padding:clamp(34px,5vw,60px); text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow-lg)}
.cta-final-card::before{content:''; position:absolute; top:-120px; left:50%; transform:translateX(-50%); width:520px; height:260px; background:radial-gradient(ellipse,rgba(34,211,238,.14),transparent 70%); pointer-events:none}
.cta-final-card .kicker{justify-content:center; display:inline-flex}
.cta-final-card .lead{margin:0 auto 30px}
.btn-wa.big{font-size:17.5px; padding:18px 34px; white-space:nowrap}

/* No celular o texto "Quero uma análise gratuita" quebrava em duas linhas e o
   ícone ficava sozinho na primeira, empurrado para a esquerda — parecia botão
   defeituoso. A largura útil aqui é apertada: 375px de tela, menos o padding
   do .wrap, menos o padding do cartão, sobra pouco. Então no celular o cartão
   afina, o botão ocupa a linha inteira e a fonte desce o suficiente para o
   texto caber numa linha só. O nowrap acima garante que não volte a quebrar. */
@media(max-width:560px){
  .cta-final-card{padding:30px 18px}
  .btn-wa.big{font-size:15.5px; padding:16px 14px; width:100%; justify-content:center; gap:8px}
}
.btn-wa.big::after{content:''; position:absolute; inset:-3px; border-radius:17px; z-index:-1; background:var(--wa); opacity:.35; filter:blur(14px); animation:breathe 2.8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.2; transform:scale(.98)}50%{opacity:.45; transform:scale(1.02)}}
@media(prefers-reduced-motion:reduce){.btn-wa.big::after{animation:none}}
.cta-nota{margin-top:15px; color:var(--muted-2); font-size:13px; font-weight:600}

/* --------------------------------- rodapé ---------------------------------
   Três colunas no desktop, empilhadas no celular, mais a faixa do Google e a
   linha legal. A coluna da marca é mais larga porque leva logo, frase e as
   redes; as outras duas são listas curtas. */
footer{border-top:1px solid var(--line); padding:48px 0 40px; color:var(--muted-2); font-size:13.5px}
footer a{color:var(--muted); text-decoration:none; transition:color .2s}
footer a:hover{color:var(--cyan)}

.fgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(28px,4vw,56px)}
@media(max-width:760px){.fgrid{grid-template-columns:1fr; gap:32px}}
.fcol{display:flex; flex-direction:column; align-items:flex-start; gap:9px}
.flogo{height:28px; width:auto; display:block; margin-bottom:4px}
.fcol h5{font-family:var(--font-d); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--text-2); margin-bottom:4px}
.fp{color:var(--muted-2); font-size:13.5px; max-width:42ch; line-height:1.6}
.fl{font-size:14px; font-weight:600}

.socials{display:flex; gap:9px; margin-top:8px}
.socials a{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--muted); border:1px solid var(--line); background:var(--surface); transition:border-color .2s, color .2s, transform .2s}
.socials a:hover{border-color:rgba(34,211,238,.35); color:var(--cyan); transform:translateY(-2px)}

/* Faixa de avaliações do Google. Enquanto a seção "Resultados" estiver
   desligada, é a única prova social de terceiro que a página mostra —
   por isso ganha caixa própria em vez de virar mais um link da lista. */
.gstrip{margin-top:36px}
.gstrip a{display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:var(--text-2); background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:11px 18px}
.gstrip a:hover{border-color:rgba(34,211,238,.35); color:var(--cyan)}

.legal{margin-top:28px; padding-top:22px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.7; color:var(--muted-2)}

/* --------------------------- WhatsApp flutuante --------------------------- */
.wa-float{position:fixed; right:22px; bottom:22px; z-index:60; width:58px; height:58px; border-radius:50%; background:var(--wa); display:grid; place-items:center; box-shadow:0 14px 34px -8px rgba(37,211,102,.6); transition:transform .25s}
.wa-float:hover{transform:scale(1.08)}