/* ===== Fontes self-hosted (sem Google Fonts: -2 conexões externas) ==========
   Subset latin (cobre todo o pt-BR: ã ç õ é ê à). Inter é variável (1 arquivo). */
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/barlow-500.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-700.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/barlow-800.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/barlow-900.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-var.woff2') format('woff2')}

/* Fallbacks com MÉTRICAS AJUSTADAS: enquanto a webfont não chega, a Arial local
   é reescalada para ocupar exatamente o mesmo espaço da fonte real — assim a
   troca (swap) não reflui o texto nem empurra a página (CLS ~0).
   Valores medidos com canvas measureText: Barlow é ~20% mais estreita que a
   Arial; Inter é ~6% mais larga. */
@font-face{font-family:'Barlow Fallback';src:local('Arial Bold'),local('Arial'),local('Helvetica');
  size-adjust:80.54%;ascent-override:124.16%;descent-override:24.83%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica');
  size-adjust:106.38%;ascent-override:91.19%;descent-override:22.56%;line-gap-override:0%}

:root{
  --paper:#FFFFFF; --surface:#F4F6F5; --surface-2:#EBF0EF; --line:#E3E8E7;
  --ink:#15201F; --text:#3A4645; --muted:#697675;
  --teal:#006B6E; --teal-h:#00565A; --teal-deep:#00494B;
  --red:#EB1E2F; --red-h:#CF1626;
  --amber:#FFC94D;
  --hd:#082A2B; --hd-2:#04191A;
  --grad:linear-gradient(135deg,#006B6E 0%,#0a8a80 44%,#EB1E2F 100%);
  /* Etiqueta de editoria. As duas cores são as do logo, medidas no arquivo:
     teal em 32% dos pixels coloridos, vermelho em 29% — quase meio a meio. Uma
     mistura chapada das duas dá #95746E, um marrom-acinzentado (as cores são
     quase opostas no círculo, e a média sempre cai no cinza). Então o badge
     carrega as DUAS, em degradê, em vez de a média de nenhuma. As paradas são
     mais fundas que as do logo porque o texto é branco: assim o pior ponto do
     degradê tem 5:1 de contraste, acima do 4.5:1 que a WCAG pede. */
  --badge:linear-gradient(90deg,#006B6E 0%,#0a7d74 46%,#C01830 100%);
  --grad-90:linear-gradient(90deg,#006B6E 0%,#0a8a80 46%,#EB1E2F 100%);
  --disp:"Barlow","Barlow Fallback",-apple-system,BlinkMacSystemFont,helvetica,arial,sans-serif;
  --font:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,helvetica,arial,sans-serif;
  --maxw:1220px;
  --r:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;font-size:18px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.04;letter-spacing:-.01em}
section{position:relative}
.kick{font-family:var(--disp);font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center;gap:12px}
.kick::before{content:"";width:30px;height:3px;background:var(--grad);border-radius:2px}
.kick.red{color:var(--red)}
.kick.light{color:#66c8c6}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:15px 28px;transition:transform .15s,box-shadow .2s,background .2s,color .2s;cursor:pointer;border:0;line-height:1}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-h);transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(235,30,47,.55)}
.btn-teal{background:var(--teal);color:#fff}
.btn-login{background:var(--teal);color:#fff;padding:12px 26px}
.btn-login:hover{background:var(--teal-h);transform:translateY(-2px)}
.btn-teal:hover{background:var(--teal-h);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-out{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn-out:hover{border-color:var(--teal);color:var(--teal)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.34)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}/* ---------- utility bar ---------- */
.util{background:var(--surface);color:var(--muted);font-size:13px;font-weight:500;border-bottom:1px solid var(--line)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;flex-wrap:wrap;gap:6px}
.util b{color:var(--teal);font-weight:700}
.util .sep{color:var(--line);margin:0 10px}
.util a{color:var(--text)}.util a:hover{color:var(--teal)}

/* ---------- header ---------- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--line)}
header.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad-90);opacity:.9}
.nav .wrap{display:flex;align-items:center;gap:38px;min-height:86px}
/* flex:none: sem isto a marca é um item flex encolhível ao lado do menu — a
   altura fica presa em 58px e a LARGURA cede quando o menu aperta. Medido antes
   do conserto: 137px (−5%) de 1280 a 1920, 117px (−19%) em 1200 e 17px em 1100,
   com o logo virando um risco. Anda junto com o breakpoint do hambúrguer lá
   embaixo (1200): é o menu que tem de sair de cena, não o logo que encolhe. */
.brand{flex:none}
.brand img{height:58px;width:auto}
.menu{display:flex;gap:24px;margin-left:6px}
.menu a{font-family:var(--disp);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);position:relative;padding:6px 0;white-space:nowrap}
.menu a:hover{color:var(--teal)}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--grad);transition:right .25s;border-radius:2px}
.menu a:hover::after{right:0}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:22px}
.login{font-family:var(--disp);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink)}
.login:hover{color:var(--teal)}
.burger{display:none;background:none;border:0;font-size:30px;cursor:pointer;color:var(--ink)}/* botão flutuante Fale com o especialista (aparece ao rolar) */
.float-cta{position:fixed;right:24px;bottom:24px;z-index:90;display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:15px;padding:16px 26px;border-radius:999px;box-shadow:0 16px 38px -10px rgba(235,30,47,.6);opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .3s,transform .3s,visibility .3s;text-decoration:none}
.float-cta svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.float-cta.show{opacity:1;visibility:visible;transform:none}
.float-cta.show:hover{background:var(--red-h);transform:translateY(-3px);box-shadow:0 20px 44px -10px rgba(235,30,47,.7)}
@media(max-width:640px){.float-cta{right:14px;bottom:14px;font-size:13px;padding:13px 18px}}

/* ---------- hero ---------- */
.hero{background:var(--surface);color:var(--ink);padding:80px 0 84px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
/* brincadeira de cores — aurora animada (CSS puro) */
.hero-bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(62% 82% at 10% 20%, #FFC21A 0%, transparent 64%),
    radial-gradient(54% 74% at 90% 28%, #2FC6DE 0%, transparent 64%),
    radial-gradient(72% 92% at 50% 84%, #FF9184 0%, transparent 68%),
    radial-gradient(82% 100% at 72% 60%, #45C6BA 0%, transparent 72%);
  background-size:240% 240%;animation:bgMove 11s ease-in-out infinite;opacity:.9}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,246,245,.04),rgba(244,246,245,.38))}
@keyframes bgMove{0%{background-position:0% 0%}25%{background-position:50% 50%}50%{background-position:100% 100%}75%{background-position:0% 50%}100%{background-position:0% 0%}}
@media(prefers-reduced-motion:reduce){.hero-bg{animation:none}}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-weight:800;font-size:clamp(44px,6.6vw,86px);line-height:.98;letter-spacing:-.02em;max-width:15ch;margin:22px 0 0;color:var(--ink)}
.hero h1 .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-family:var(--font);font-size:clamp(19px,2.2vw,25px);color:var(--text);max-width:44ch;margin:28px 0 0;line-height:1.45;font-weight:400}
.hero .lead b{color:var(--ink);font-weight:700}
.hero .lead .lead-cta{color:var(--teal);font-weight:700;white-space:nowrap;border-bottom:2px solid rgba(0,107,110,.35);transition:.2s}
.hero .lead .lead-cta:hover{color:var(--red);border-color:var(--red)}
.hero .cta-row{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;align-items:center}
.hero .cta-note{font-family:var(--disp);font-size:15px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}

/* proof stats band */
.proofband{background:var(--paper);border-bottom:1px solid var(--line)}
.proof{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.proof .cell{padding:38px 30px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px;transition:background .2s}
.proof .cell:last-child{border-right:0}
.proof .cell:hover{background:var(--surface)}
.proof .num{font-family:var(--disp);font-weight:900;font-size:54px;line-height:.9;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em}
.proof .ttl{font-family:var(--disp);font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;color:var(--ink)}
.proof p{font-size:14.5px;color:var(--muted);line-height:1.45}
.proof .lnk{font-family:var(--disp);font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--teal);margin-top:auto;display:inline-flex;gap:7px;align-items:center}
.proof .lnk:hover{gap:10px;color:var(--red)}
.proof .lnk::after{content:"→"}

/* ---------- client proof ---------- */
.clients{padding:76px 0 78px;background:var(--paper)}
.clients .lead-line{font-family:var(--disp);font-size:clamp(34px,5vw,60px);font-weight:800;line-height:1;letter-spacing:-.02em;max-width:22ch;color:var(--ink);margin-top:16px}
.clients .lead-line em{font-style:normal;color:var(--teal)}
.marquees{margin-top:44px;display:flex;flex-direction:column;gap:30px}
.mq-label{max-width:var(--maxw);margin:0 auto 14px;padding:0 30px;width:100%}
.mq-label span{font-family:var(--disp);font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center;gap:10px}
.mq-label span::before{content:"";width:22px;height:3px;background:var(--grad);border-radius:2px}
.mq-label.red span{color:var(--red)}
.marquee{overflow:hidden;position:relative;
  -webkit-mask:linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%);
  mask:linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%)}
.marquee-track{display:flex;gap:16px;width:max-content;animation:marq 70s linear infinite;will-change:transform}
.marquee.rev .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}
.chip{flex:0 0 auto;height:74px;min-width:140px;padding:0 26px;background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;transition:border-color .2s,box-shadow .2s}
/* 48x190 (antes 42x148). O ganho de verdade veio do corte da margem branca nos
   arquivos — a arte ocupava 64% da altura do canvas e o CSS limita a IMAGEM,
   não a arte, então um terço do tamanho visível era moldura. O teto subiu junto
   porque o chip tem 74px de altura e sobrava respiro demais. */
.chip img{max-height:48px;max-width:190px;width:auto;height:auto;transition:transform .2s}
/* As faixas de logo usam o .chip genérico acima. Houve aqui um estilo de
   LADRILHO para elas (fundo --surface-2, arte preenchendo os 74px, sem
   respiro), mirando .marquee[data-track="agencias"]. Ele morreu sozinho
   quando o data-track passou a sair com prefixo ("home_clientes_agencias",
   ver render_marquee em inc/data.php) e ninguém notou, porque o fallback
   genérico é apresentável. Removido em 25/09/2026, com o visual atual
   aprovado como está. Se um dia o ladrilho voltar, o seletor é o valor COM
   prefixo — não o cru. */
.chip:hover{border-color:var(--teal);box-shadow:0 10px 24px -14px rgba(8,42,43,.4)}
.chip:hover img{transform:scale(1.05)}
.chip span{font-family:var(--disp);font-weight:800;font-size:19px;color:var(--muted);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}
.chip:hover span{color:var(--teal)}
.marquee.rev .chip:hover{border-color:var(--red)}
.marquee.rev .chip:hover span{color:var(--red)}

/* ---------- promessas ---------- */
.promessas{background:var(--surface);padding:96px 0;border-top:1px solid var(--line)}
.promessas .intro{max-width:var(--maxw);margin:0 auto 34px;padding:0 30px}
.promessas h2{font-weight:800;font-size:clamp(34px,5vw,60px);line-height:1;letter-spacing:-.02em;margin-top:18px;max-width:18ch}
.promessas h2 em{font-style:normal;color:var(--teal)}
.plist{max-width:var(--maxw);margin:0 auto;padding:0 30px;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.prom{background:var(--paper);padding:40px 38px;transition:.2s;position:relative}
.prom:hover{background:#fbfdfc}
.prom::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .3s}
.prom:hover::before{transform:scaleY(1)}
.prom .idx{font-family:var(--disp);font-size:20px;font-weight:900;color:var(--red);letter-spacing:.05em}
.prom h3{font-weight:800;font-size:clamp(24px,2.7vw,32px);line-height:1.05;margin:14px 0 16px;max-width:20ch;text-transform:none}
.prom p{font-size:16.5px;color:var(--text);max-width:56ch;margin-bottom:12px;line-height:1.6}
.prom p:last-child{margin-bottom:0}
.prom p b{color:var(--ink);font-weight:700}
.prom .tagword{color:var(--teal);font-weight:700}
.prom .prom-more-inline{display:none}
.prom .prom-more{display:none}
.prom.open .prom-more-inline{display:inline}
.prom.open .prom-more{display:block;margin-top:12px}
.prom.open .prom-dots{display:none}
.prom-dots{display:inline-flex;gap:5px;align-items:center;vertical-align:middle;background:none;border:0;cursor:pointer;padding:3px 8px;margin-left:4px;border-radius:999px;transition:background .2s}
.prom-dots:hover{background:rgba(0,107,110,.1)}
.prom-dots i{width:7px;height:7px;border-radius:50%;background:var(--teal);display:inline-block;animation:promdot 1.4s infinite ease-in-out both}
.prom-dots i:nth-child(2){animation-delay:.2s}
.prom-dots i:nth-child(3){animation-delay:.4s}
.prom-dots:hover i{background:var(--red)}
.prom-dots .pd-label{font-family:var(--disp);font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--teal);margin-left:5px}
.prom-dots:hover .pd-label{color:var(--red)}@keyframes promdot{0%,80%,100%{opacity:.28;transform:scale(.75)}40%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.prom-dots i{animation:none;opacity:.7}}

/* ---------- shared section head ---------- */
.sec-head h2{font-weight:800;font-size:clamp(32px,4.6vw,54px);line-height:1;letter-spacing:-.02em;margin-top:18px;max-width:20ch}
.sec-head h2 em{font-style:normal;color:var(--teal)}
.sec-head .dek{font-size:18px;color:var(--text);margin-top:18px;max-width:52ch}

/* ---------- anatomia do mailing (diagrama vital / dark) ---------- */
.anatomy{background:var(--hd);color:#eaf6f5;padding:100px 0;position:relative;overflow:hidden}
.anatomy::before{content:"";position:absolute;top:-160px;left:-120px;width:520px;height:520px;background:var(--grad);opacity:.10;filter:blur(10px);border-radius:50%}
.anatomy .wrap{position:relative;z-index:1}
.anatomy .kick.light{color:#66c8c6}
.anatomy h2{font-weight:800;font-size:clamp(30px,4.4vw,52px);color:#fff;margin-top:16px;line-height:1.02;letter-spacing:-.02em}
.anatomy h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.anatomy .dek{color:#9fb8b7;font-size:18px;margin-top:16px;max-width:58ch}
.flowcaps{display:flex;justify-content:space-between;gap:12px;margin:52px 0 12px;flex-wrap:wrap}
.flowcaps span{font-family:var(--disp);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#66c8c6;display:inline-flex;align-items:center;gap:9px}
.flowcaps span.end{color:#f2909a}
.flowcaps span::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px 2px currentColor}
.organism{display:flex;align-items:stretch;gap:0}
.vital{flex:1;min-width:0;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:30px 26px;display:flex;flex-direction:column;position:relative;transition:.25s}
.vital:hover{background:rgba(255,255,255,.075);transform:translateY(-4px)}
.vital .v-ico{width:44px;height:44px;color:#66c8c6;margin-bottom:14px}
.vital .v-ico svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:1.7}
.vital .v-num{font-family:var(--disp);font-weight:900;font-size:15px;letter-spacing:.14em;color:#5c7a79;margin-bottom:4px}
.vital h3{color:#fff;font-size:22px;font-weight:800;margin:0 0 12px;text-transform:none;letter-spacing:-.01em}
.vital p{color:#9fb8b7;font-size:15px;line-height:1.52}
.vital p b{color:#fff;font-weight:700}
.vital.accent{background:linear-gradient(162deg,rgba(0,107,110,.42),rgba(235,30,47,.16));border-color:rgba(102,200,198,.55);box-shadow:0 0 0 1px rgba(102,200,198,.22),0 24px 54px -26px rgba(0,0,0,.7)}
.vital.accent .v-ico{color:#7fe0d7}
.vital .v-badge{position:absolute;top:-11px;left:24px;font-family:var(--disp);font-weight:800;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--red);padding:4px 11px;border-radius:6px;box-shadow:0 6px 16px -6px rgba(235,30,47,.7)}
.vital .spamchip{margin-top:14px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-family:var(--disp);font-weight:800;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:#082A2B;background:linear-gradient(90deg,#66c8c6,#a9e6e2);padding:7px 13px;border-radius:999px}
.flow{flex:0 0 44px;position:relative;display:flex;align-items:center;justify-content:center}
.flow::before{content:"";position:absolute;left:2px;right:2px;top:50%;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(102,200,198,.28),rgba(242,144,154,.55))}
.flow::after{content:"";position:absolute;right:4px;top:50%;transform:translateY(-50%);border-left:7px solid rgba(242,144,154,.75);border-top:5px solid transparent;border-bottom:5px solid transparent}
.flow .pulse{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(102,200,198,.85);transform:translateY(-50%);animation:flowpulse 2.6s linear infinite}
@keyframes flowpulse{0%{left:0;opacity:0}12%{opacity:1}80%{opacity:1}100%{left:calc(100% - 7px);opacity:0}}
@media(prefers-reduced-motion:reduce){.flow .pulse{animation:none;opacity:.9}}
.governance{margin-top:22px;display:flex;align-items:center;gap:24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:26px 30px;flex-wrap:wrap;position:relative}
.governance::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);border-radius:16px 0 0 16px}
.gov-badge{flex:0 0 auto;width:54px;height:54px;border-radius:13px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff}
.gov-badge svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2.2}
.gov-txt{flex:1;min-width:260px;color:#cfe0df;font-size:16px;line-height:1.5}
.gov-txt b{color:#fff;font-weight:700}.team-block{margin-top:20px}
.tb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.tb-title{color:#fff;font-size:clamp(22px,2.6vw,30px);font-weight:800;margin-top:12px;text-transform:none;letter-spacing:-.01em}
.tc-nav{display:flex;gap:10px}
.tc-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-size:24px;cursor:pointer;transition:.2s;font-family:var(--disp);line-height:1;display:flex;align-items:center;justify-content:center}
.tc-btn:hover{background:var(--teal);border-color:var(--teal)}
.team-carousel{overflow:hidden}
.tc-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.tc-card{flex:0 0 25%;box-sizing:border-box;padding:0 9px}
.tc-inner{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:28px 18px;text-align:center;transition:.2s;height:100%}
.tc-card:hover .tc-inner{background:rgba(255,255,255,.08);transform:translateY(-4px)}
.tc-photo{width:118px;height:118px;border-radius:50%;object-fit:cover;margin:0 auto 16px;border:3px solid rgba(102,200,198,.45);display:block}
.tc-ph{width:118px;height:118px;border-radius:50%;margin:0 auto 16px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:900;font-size:36px;color:#fff}
.tc-name{font-family:var(--disp);font-weight:800;font-size:18px;color:#fff}
.tc-role{font-size:13px;color:#9fb8b7;margin-top:3px}
.tc-dots{display:flex;justify-content:center;gap:9px;margin-top:26px}
.tc-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);border:0;padding:0;cursor:pointer;transition:.25s}
.tc-dot.active{background:var(--grad);width:26px;border-radius:5px}
@media(max-width:760px){.tc-card{flex:0 0 50%}.tc-nav{display:none}}
@media(max-width:860px){
  .organism{flex-direction:column}
  .flow{flex:0 0 42px;width:100%}
  .flow::before{left:50%;right:auto;top:3px;bottom:3px;width:2px;height:auto;transform:translateX(-50%);background:linear-gradient(180deg,rgba(102,200,198,.28),rgba(242,144,154,.55))}
  .flow::after{right:auto;left:50%;top:auto;bottom:5px;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid rgba(242,144,154,.75);border-bottom:0}
  .flow .pulse{left:50%;transform:translateX(-50%);animation:flowpulseV 2.6s linear infinite}
  .governance{flex-direction:column;align-items:flex-start}}
@keyframes flowpulseV{0%{top:0;opacity:0}12%{opacity:1}80%{opacity:1}100%{top:calc(100% - 7px);opacity:0}}

/* ---------- plataforma (neutral) ---------- */
.plataforma{background:var(--surface);color:var(--ink);padding:100px 0;overflow:hidden;position:relative;border-top:1px solid var(--line)}
.plataforma h2{font-weight:800;font-size:clamp(32px,4.6vw,56px);line-height:1;color:var(--ink);margin-top:18px;max-width:18ch;letter-spacing:-.02em}
.plataforma .dek{color:var(--text);font-size:18px;margin-top:18px;max-width:52ch}
.plat-layout{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;margin-top:44px}
.plat-shot{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.4)}
.plat-shot img{display:block;width:100%;height:auto}
.plat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.plat-item{display:flex;gap:22px;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--line)}
.plat-item:first-child{padding-top:0}
.plat-item:last-child{border-bottom:0;padding-bottom:0}
.plat-item .n{font-family:var(--disp);font-weight:900;color:var(--teal);font-size:30px;line-height:1;flex:0 0 auto;min-width:52px}
.plat-item h3{font-size:22px;font-weight:800;margin:0 0 8px;color:var(--ink);text-transform:none}
.plat-item p{color:var(--muted);font-size:16px;line-height:1.5;margin:0;max-width:46ch}
@media(max-width:900px){.plat-layout{grid-template-columns:1fr;gap:30px}}
@media(max-width:640px){.plat-item{gap:14px;padding:18px 0}.plat-item .n{font-size:24px;min-width:40px}.plat-item h3{font-size:20px}}
.demo-cta{margin-top:16px;border-radius:var(--r);background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:44px 46px}
.demo-cta .dc-txt{flex:1;min-width:260px}
.demo-cta h3{color:#fff;font-size:clamp(23px,2.7vw,32px);font-weight:800;text-transform:none;letter-spacing:-.01em;line-height:1.05}
.demo-cta p{color:rgba(255,255,255,.92);font-size:17px;margin-top:10px;max-width:52ch;line-height:1.45}
.demo-cta .btn-demo{flex:0 0 auto;background:#fff;color:var(--red);font-size:18px;padding:22px 36px;box-shadow:0 16px 34px -12px rgba(0,0,0,.4)}
.demo-cta .btn-demo:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
@media(max-width:640px){.demo-cta{padding:34px 28px}.demo-cta .btn-demo{width:100%;justify-content:center}}

/* ---------- bureau veritas ---------- */
.bv{background:var(--paper);padding:96px 0}
.bv-panel{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px -40px rgba(8,42,43,.45)}
.bv-left{background:var(--hd);color:#eaf6f5;padding:52px 48px;min-width:0}
.bv-left h2{font-weight:800;font-size:clamp(30px,3.6vw,44px);line-height:1.02;color:#fff;margin:18px 0 18px;max-width:16ch;letter-spacing:-.01em}
.bv-left p{color:#bcd4d3;font-size:16.5px;line-height:1.55;max-width:46ch}
.bv-left p b{color:#fff}
.bv-left p+p{margin-top:14px}
.bv-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
.bv-facts .f{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:10px;padding:16px 18px}
.bv-facts .f .k{font-family:var(--disp);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#66c8c6;margin-bottom:5px}
.bv-facts .f .v{font-family:var(--disp);font-size:19px;font-weight:800;color:#fff}
.bv-facts .f .v small{font-weight:600;font-size:14px;color:#bcd4d3;display:block;text-transform:none;letter-spacing:0}
.bv-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.bv-right{background:linear-gradient(160deg,#e0283a 0%,#b5182a 100%);color:#fff;padding:52px 44px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;min-width:0}
.bv-right::before{content:"1828";position:absolute;font-family:var(--disp);font-weight:900;font-size:220px;color:rgba(255,255,255,.08);bottom:-30px;right:-10px;letter-spacing:-.04em}.bv-seal .yr{font-family:var(--disp);font-weight:900;font-size:34px;line-height:1}
.bv-seal .rg{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-top:6px}
.bv-right .bvname{font-family:var(--disp);font-weight:900;font-size:26px;letter-spacing:.02em;position:relative;z-index:1}
.bv-right .bvsub{font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.24em;text-transform:uppercase;opacity:.92;margin-top:4px;position:relative;z-index:1}
.bv-right .bvscope{margin-top:22px;font-size:14.5px;line-height:1.5;opacity:.94;max-width:32ch;position:relative;z-index:1}
.cert-frame{display:block;background:#fff;padding:9px;border-radius:8px;box-shadow:0 34px 60px -22px rgba(0,0,0,.55);max-width:270px;width:100%;transform:rotate(-2.2deg);transition:transform .3s,box-shadow .3s;position:relative;z-index:1}
.cert-frame img{display:block;width:100%;height:auto;border-radius:3px}
.cert-frame:hover{transform:rotate(0) scale(1.03);box-shadow:0 40px 70px -20px rgba(0,0,0,.6)}
.cert-cap{margin-top:20px;font-family:var(--disp);font-weight:800;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.92);position:relative;z-index:1}

/* ---------- depoimentos (fichário — adaptado de branded.md) ---------- */
.depo{background:var(--surface);color:var(--ink);padding:96px 0;border-top:1px solid var(--line)}
/* Botão "Voltar ao topo": oculto por padrão; só aparece (classe .show via JS)
   quando o usuário chegou à seção por clique num CTA da faixa de provas. */
.backlink{display:none}
.backlink.show{
  display:inline-flex;align-items:center;gap:8px;width:fit-content;margin-bottom:22px;
  font-family:var(--disp);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.05em;
  color:#fff;background:var(--red);border:0;border-radius:999px;padding:11px 20px 11px 16px;cursor:pointer;
  box-shadow:0 12px 26px -10px rgba(235,30,47,.6);
  animation:backpop .5s cubic-bezier(.34,1.56,.64,1) both;
  transition:transform .18s,box-shadow .2s,background .2s}
.backlink.show .bl-ico{font-size:16px;line-height:1;transform:translateY(-1px)}
.backlink.show:hover{background:var(--red-h);color:#fff;transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(235,30,47,.7)}
@keyframes backpop{0%{opacity:0;transform:translateY(-12px) scale(.9)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.backlink.show{animation:none}}
/* seções escuras: pílula clara para contrastar com o fundo */
.anatomy .backlink.show,.bv-left .backlink.show{background:#fff;color:var(--hd);box-shadow:0 12px 26px -10px rgba(0,0,0,.55)}
.anatomy .backlink.show:hover,.bv-left .backlink.show:hover{background:#e9faf8;color:var(--hd)}
.proofband,.promessas,.anatomy,.bv{scroll-margin-top:88px}
.depo h2{font-weight:800;font-size:clamp(32px,4.6vw,54px);color:var(--ink);margin-top:18px}
.depo .dek{font-size:18px;color:var(--text);margin-top:16px;max-width:54ch}.fichario{list-style:none;padding:0;margin:36px 0 0;display:flex;overflow:hidden;border-radius:16px;min-height:430px;box-shadow:0 26px 64px -32px rgba(8,42,43,.5);border:1px solid var(--line)}
.fichario li{display:flex;align-items:stretch;cursor:pointer;transition:flex .5s ease;width:66px;min-width:66px;overflow:hidden;position:relative;background:var(--c,var(--teal))}
.fichario li .fi-tab{display:flex;width:66px;min-width:66px;align-items:center;justify-content:center;flex:0 0 auto}
.fichario li .fi-tab span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--disp);font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:#fff;white-space:nowrap}
.fichario li .fi-content{opacity:0;width:0;overflow:hidden;display:none}
.fichario li .fi-inner{display:flex;height:100%;min-width:640px;background:#fff}
.fichario li .fi-media{width:44%;position:relative;background:var(--surface);overflow:hidden}
.fichario li .fi-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fichario li .fi-body{width:56%;padding:46px 52px;display:flex;flex-direction:column;justify-content:center;position:relative}
.fichario li .fi-logo{position:absolute;top:30px;right:36px;height:30px;max-width:150px;object-fit:contain;z-index:2}
.fichario li .fi-cta{margin-top:26px;background:none;cursor:pointer;text-align:left;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--c,var(--teal));border:2px solid var(--c,var(--teal));border-radius:999px;padding:13px 26px;transition:.2s}
.fichario li .fi-cta:hover{background:var(--c,var(--teal));color:#fff;transform:translateX(3px)}
.fichario li .fi-quote{font-family:var(--disp);font-weight:800;font-size:clamp(18px,1.95vw,24px);line-height:1.3;color:var(--ink);letter-spacing:-.01em;padding-top:14px}
.fichario li .fi-quote b{color:var(--c,var(--teal))}
.fichario li .fi-person{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.fichario li .fi-person b{display:block;font-family:var(--disp);font-weight:800;font-size:17px;color:var(--ink)}
.fichario li .fi-person span{font-size:14.5px;color:var(--muted)}
/* Ressalva do depoimento (ex.: fala pessoal, não posição da agência). Vem logo
   abaixo da assinatura e antes do botão, para quem lê a aba curta também ver. */
.fichario li .fi-nota{margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--muted);font-style:italic;max-width:46ch}
.fichario li.active{flex:1;width:auto;min-width:auto;cursor:default}
.fichario li.active .fi-content{opacity:1;width:auto;flex:1;display:block}
.fichario li:not(.active):hover{filter:brightness(1.09)}
.fichario li:not(:last-child)::after{content:'';position:absolute;right:0;top:16%;height:68%;width:1px;background:rgba(255,255,255,.16);z-index:2}
.fichario li.active::after{display:none}/* modal do depoimento completo */
.fi-full{display:none}
.depo-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px}
.depo-modal[hidden]{display:none}
.dm-backdrop{position:absolute;inset:0;background:rgba(8,42,43,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dm-card{position:relative;background:#fff;border-radius:18px;max-width:720px;width:100%;max-height:88vh;overflow:auto;padding:44px 48px 40px;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);animation:dmIn .28s ease}
@keyframes dmIn{0%{opacity:0;transform:translateY(16px) scale(.98)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dm-card{animation:none}}
.dm-close{position:absolute;top:16px;right:18px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.dm-close:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.dm-head{display:flex;align-items:center;gap:18px;margin-bottom:24px;padding-right:44px}
.dm-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid var(--line)}
.dm-name{font-family:var(--disp);font-weight:800;font-size:21px;color:var(--ink);line-height:1.15}
.dm-role{font-size:15px;color:var(--muted);margin-top:3px}
.dm-body p{font-size:16.5px;line-height:1.62;color:var(--text);margin:0 0 16px}
.dm-body blockquote{margin:22px 0;padding:18px 24px;border-left:4px solid var(--teal);background:var(--surface);border-radius:0 12px 12px 0;font-size:17px;line-height:1.55;color:var(--ink)}
/* Depoimento escrito em vários parágrafos (ex.: Lema+): dentro da citação eles
   herdam a tipografia dela, e o último não sobra com margem. */
.dm-body blockquote p{font-size:inherit;line-height:inherit;color:inherit;margin:0 0 12px}
.dm-body blockquote p:last-child{margin-bottom:0}
.dm-date{margin-top:10px;font-size:13.5px;color:var(--muted);font-style:italic}
@media(max-width:560px){.dm-card{padding:34px 20px 28px}.dm-head{gap:14px}.dm-photo{width:60px;height:60px}.dm-body p{font-size:16px}}
/* CTA intermediário reutilizável */
.midcta{padding:60px 0;border-top:1px solid var(--line)}
.midcta .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.midcta h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3.1vw,38px);line-height:1.06;max-width:22ch;letter-spacing:-.015em}
.midcta .btn{flex:0 0 auto}
.midcta.teal{background:var(--teal);color:#fff}
.midcta.teal h2{color:#fff}
.midcta.teal .btn{background:#fff;color:var(--teal)}
.midcta.teal .btn:hover{background:var(--ink);color:#fff}
.midcta.grad{background:var(--grad);color:#fff}
.midcta.grad h2{color:#fff}
.midcta.grad .btn{background:#fff;color:var(--red)}
.midcta.grad .btn:hover{background:var(--ink);color:#fff}
@media(max-width:640px){.midcta .wrap{flex-direction:column;align-items:flex-start}.midcta .btn{width:100%;justify-content:center}}
@media(max-width:820px){
  .fichario{flex-direction:column;min-height:0;border-radius:14px}
  .fichario li{width:100%!important;min-width:100%!important;flex-direction:column}
  .fichario li .fi-tab{width:100%;min-width:100%;height:50px}
  .fichario li .fi-tab span{writing-mode:horizontal-tb;transform:none;letter-spacing:.08em}
  .fichario li .fi-content{width:100%}
  .fichario li .fi-inner{flex-direction:column;min-width:0}
  .fichario li .fi-media{width:100%;height:auto;aspect-ratio:3/2}
  .fichario li .fi-media img{object-position:center center!important}
  .fichario li .fi-body{width:100%;padding:28px 24px}
  .fichario li .fi-logo{position:static;height:26px;margin:0 0 18px;display:block}
  .fichario li.active{flex:none}
  .fichario li:not(:last-child)::after{display:none}
}

/* ---------- liderança ---------- */
.lideranca{padding:96px 0;background:var(--surface);border-top:1px solid var(--line)}
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:44px}
.member .av{width:74px;height:74px;border-radius:16px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--disp);font-weight:900;font-size:27px;margin-bottom:16px}.member .li{font-family:var(--disp);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--teal);margin-top:10px;display:inline-block}
.member .li:hover{color:var(--red)}

/* ---------- movimentos (MPJ + mapa) ---------- */
.movimentos{background:var(--hd);color:#eaf6f5;padding:100px 0;overflow:hidden;position:relative}
.movimentos::before{content:"";position:absolute;top:-140px;right:-120px;width:480px;height:480px;background:radial-gradient(circle,rgba(242,194,48,.14),transparent 70%);border-radius:50%}
.movimentos .wrap{position:relative;z-index:1}
.movimentos .kick.light{color:#66c8c6}
.mov-layout{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.mov-logo{height:66px;width:auto;margin:22px 0 20px}
.movimentos h2{font-weight:800;font-size:clamp(30px,4vw,50px);line-height:1.02;color:#fff;letter-spacing:-.02em;max-width:15ch}
.movimentos h2 em{font-style:normal;color:#F2C230}
.movimentos p{color:#bcd4d3;font-size:17px;line-height:1.6;max-width:54ch;margin-top:18px}
.movimentos p b{color:#fff;font-weight:700}
.mov-goal{margin-top:20px;padding:16px 20px;border-left:3px solid #F2C230;background:rgba(242,194,48,.08);border-radius:0 10px 10px 0;font-size:16px}
.mov-goal b{color:#F2C230}
.mov-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.movimentos .btn-ghost{color:#fff;border-color:rgba(255,255,255,.32)}@media(max-width:860px){.mov-layout{grid-template-columns:1fr;gap:36px}}
/* ---- Vitrine de portais do MPJ (home) — notebook + celular com print real.
   Portado do hero do mpj.site e recolorido para esta paleta. TUDO escopado em
   .mov-devices de propósito: ".screen", ".lap" e ".phone" são nomes genéricos
   demais para andarem soltos num skin único. */
.mov-devices{position:relative}
.mov-devices .devices{position:relative;width:100%;max-width:600px;margin:0 0 0 auto;padding:0 0 40px 66px}
.mov-devices .lap{position:relative;filter:drop-shadow(0 30px 56px rgba(0,0,0,.46))}
.mov-devices .lap-lid{position:relative;background:linear-gradient(160deg,#20494a,#061c1d);border:1px solid rgba(255,255,255,.16);border-radius:16px 16px 6px 6px;padding:13px 13px 16px}
.mov-devices .lap-cam{position:absolute;top:5px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#04191A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mov-devices .screen{position:relative;overflow:hidden;background:#04191A}
.mov-devices .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .85s ease}
.mov-devices .screen img.on{opacity:1}
.mov-devices .lap-screen{aspect-ratio:16/10;border-radius:4px}
.mov-devices .lap-base{position:relative;width:110%;margin-left:-5%;height:14px;background:linear-gradient(180deg,#2b5c5d,#061c1d);border-radius:0 0 13px 13px}
.mov-devices .lap-base:after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:16%;height:6px;background:rgba(0,0,0,.45);border-radius:0 0 7px 7px}
.mov-devices .phone{position:absolute;left:0;bottom:0;width:158px;padding:7px;border-radius:26px;background:linear-gradient(160deg,#20494a,#061c1d);border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 44px rgba(0,0,0,.5)}
.mov-devices .phone-screen{aspect-ratio:9/19.5;border-radius:20px}
.mov-devices .phone-notch{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:48px;height:8px;border-radius:6px;background:#04191A;z-index:3}
.mov-devices .dev-chip{position:absolute;bottom:52px;right:-16px;z-index:4;display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:12px;padding:10px 14px;box-shadow:0 16px 34px rgba(0,0,0,.34);text-decoration:none;max-width:260px;transition:transform .2s}
.mov-devices .dev-chip:hover{transform:translateY(-2px)}
/* A bolinha diz "está no ar agora": verde, e o pulso é o sinal de vida. */
.mov-devices .dev-chip .dot{flex:none;width:9px;height:9px;border-radius:50%;background:#2E9E4F;box-shadow:0 0 0 0 rgba(46,158,79,.6);animation:devlive 2.2s infinite}
@keyframes devlive{70%{box-shadow:0 0 0 9px rgba(46,158,79,0)}100%{box-shadow:0 0 0 0 rgba(46,158,79,0)}}
.mov-devices .dev-chip .nm{display:block;font-family:var(--disp);font-weight:800;font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.mov-devices .dev-chip .lc{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.mov-devices .dev-chip .nm,.mov-devices .dev-chip .lc{transition:opacity .26s ease}
.mov-devices .dev-chip.swap .nm,.mov-devices .dev-chip.swap .lc{opacity:0}
.mov-devices .dev-cap{margin:16px 0 0;text-align:center;font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.03em;color:#9fb8b7}
.mov-devices .dev-cap b{color:#F2C230;font-weight:800}
@media(prefers-reduced-motion:reduce){.mov-devices .screen img{transition:none}.mov-devices .dev-chip .dot{animation:none}}
/* No celular a vitrine sobe (como o mapa fazia) e o chip volta para dentro. */
@media(max-width:860px){
  .mov-devices{order:-1}
  .mov-devices .devices{margin:0 auto;padding:0 0 30px 46px;max-width:460px}
  .mov-devices .phone{width:118px;border-radius:20px}
  .mov-devices .dev-chip{right:0;bottom:36px;padding:8px 12px;max-width:214px}
}

/* ---------- final cta ---------- */
.finalcta{background:var(--hd);color:#fff;padding:86px 0;position:relative;overflow:hidden;border-top:1px solid var(--line)}
.finalcta::before{content:"";position:absolute;right:-120px;bottom:-180px;width:520px;height:520px;background:var(--grad);opacity:.28;border-radius:50%;filter:blur(4px)}
.finalcta .wrap{position:relative;display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap}
/* Texto que só o leitor de tela lê. Estava DUPLICADO em editorias.css e em
   mais-pelo-jornalismo.css e faltava para as demais páginas — um .sr-only na
   página do blog apareceria na tela. É utilitário: lugar dele é aqui. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* h1 entra junto por causa do 404, cujo título da página é esta faixa. */
.finalcta h2,.finalcta h1{font-weight:800;font-size:clamp(32px,4.4vw,52px);line-height:1;max-width:16ch;color:#fff}
.finalcta p{color:#bcd4d3;margin-top:16px;max-width:40ch;font-size:17px}
.finalcta .btn-primary{background:#fff;color:var(--red)}
.finalcta .btn-primary:hover{background:var(--red);color:#fff}

/* ---------- footer ---------- */
footer{background:var(--hd-2);color:#9fb8b7;padding:70px 0 32px;position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-90)}
.foot-top{display:grid;grid-template-columns:1.55fr 1fr 1.05fr 1fr 1fr;gap:26px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand img{height:50px;width:auto;margin-bottom:18px}
.foot-brand p{font-size:14.5px;max-width:44ch;line-height:1.65}
.foot-brand p b{color:#cfe0df}
/* redes sociais: mesmo peso visual dos links, sem virar botao chamativo */
.foot-social{display:flex;gap:10px;margin-top:20px}
.foot-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);transition:.16s}
.foot-social a:hover{background:var(--teal);border-color:var(--teal)}
.foot-social svg{width:17px;height:17px;fill:#cfe0df}
.foot-social a:hover svg{fill:#fff}
.foot-col h3,.foot-col h4{color:#fff;font-family:var(--disp);font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.foot-col a{display:block;font-size:15px;color:#9fb8b7;padding:6px 0;transition:.15s}
.foot-col a:hover{color:#fff;padding-left:3px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:26px;font-size:13.5px}
/* Registro + idiomas, num grupo só à esquerda: o canto direito é do botão
   flutuante (position:fixed), que cobre o que for posto lá. */
/* ATENÇÃO ao batizar classe de rodapé: logo abaixo existe uma .foot-legal que
   NÃO é usada por nenhum markup (é resto de uma versão anterior) e que traz
   text-decoration:underline. Esta aqui nasceu com aquele nome e saiu com o
   registro do INPI sublinhado, parecendo link quebrado. Por isso .foot-reg. */
.foot-reg{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}
/* Espanhol/Inglês. Fica aqui e não em .foot-col porque a regra de coluna é
   display:block (uma por linha) e aqui os dois têm de ficar lado a lado. */
.foot-lang{display:inline-flex;gap:18px}
/* No telefone o botão flutuante fica a 14px do fundo e ocupa a largura quase
   toda: sem esta folga ele pousa em cima da última linha do rodapé — cobria o
   registro no INPI e encostava no "English", que é um link para tocar. É de
   propósito maior que o botão (47px + 14px de margem). */
@media(max-width:640px){.foot-bottom{padding-bottom:74px}}
.foot-lang a{color:#9fb8b7;transition:color .15s}
.foot-lang a:hover{color:#fff}/* item de rodape ainda sem destino: mesmo tratamento visual dos links */
.foot-soon{display:block;font-size:15px;color:#9fb8b7;padding:6px 0;cursor:default}
/* contato do rodape: abre a conversa no WhatsApp */
.foot-col a.foot-wpp{display:flex;align-items:flex-start;gap:9px}
.foot-col a.foot-wpp:hover{padding-left:3px}
.foot-wpp svg{flex:0 0 auto;width:16px;height:16px;margin-top:3px;fill:#7f9998;transition:.15s}
.foot-wpp:hover svg{fill:#25D366}

/* ===== Títulos de bloco padronizados (mesmo tamanho + palavra destacada) ===== */
.clients .lead-line,
.promessas .intro h2,
.anatomy h2,
.plataforma h2,
.bv-left h2,
.depo h2,
.nl-left h2,
.movimentos h2,
.newschannel h2{
  font-size:clamp(36px,5.2vw,64px)!important;
  line-height:1.02!important;
  letter-spacing:-.02em!important;
  font-weight:800!important;
  overflow-wrap:break-word;
}
/* canal de notícia: o domínio nunca quebra; título encolhe p/ caber inteiro */
.newschannel h2{font-size:clamp(24px,6.2vw,64px)!important;overflow-wrap:normal!important}
.newschannel h2 em{white-space:nowrap}
/* palavra destacada = VERDE por padrão (seções claras) */
.clients .lead-line em,
.promessas h2 em,
.plataforma h2 em,
.depo h2 em,
.newschannel h2 em{color:var(--teal)!important;font-style:normal;background:none;-webkit-text-fill-color:currentColor}
/* seções ESCURAS: verde mais claro */
.anatomy h2 em,
.bv-left h2 em{color:#5fd0cf!important;font-style:normal;background:none!important;-webkit-text-fill-color:#5fd0cf!important}
/* exceções: LinkedIn = AZUL, MPJ = AMARELO */
.nl-left h2 em{color:#0A66C2!important;-webkit-text-fill-color:#0A66C2!important}
.movimentos h2 em{color:#F2C230!important;-webkit-text-fill-color:#F2C230!important}

/* utilitários de visibilidade */
.hide-desktop{display:none}

/* newsletter LinkedIn */
.newsletter{padding:88px 0;background:var(--surface);border-top:1px solid var(--line)}
.nl-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.nl-left h2{font-weight:800;font-size:clamp(28px,3.6vw,44px);line-height:1.03;color:var(--ink);margin-top:16px;letter-spacing:-.02em;max-width:16ch}
.nl-left h2 em{font-style:normal;color:#0A66C2}
.nl-left p{font-size:17px;color:var(--text);margin-top:16px;max-width:46ch;line-height:1.55}
.nl-stats{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.nl-stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;min-width:120px;flex:1}
.nl-stat b{display:block;font-family:var(--disp);font-weight:900;font-size:32px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em}
.nl-stat span{font-size:12.5px;color:var(--muted);margin-top:7px;display:block;font-weight:500}
.nl-btn{margin-top:28px;background:#0A66C2;color:#fff}
.nl-btn:hover{background:#004182;transform:translateY(-2px)}
.in-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;background:#fff;color:#0A66C2;font-weight:900;font-size:13px;margin-right:2px}
/* card embed da última edição */
.nl-embed{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 26px 60px -32px rgba(8,42,43,.45)}
.nle-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.nle-in{width:36px;height:36px;border-radius:8px;background:#0A66C2;color:#fff;font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.nle-meta{flex:1;min-width:0}
.nle-meta b{display:block;font-family:var(--disp);font-weight:800;font-size:15px;color:var(--ink)}
.nle-meta span{font-size:12.5px;color:var(--muted)}
.nle-badge{font-family:var(--disp);font-weight:800;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#0A66C2;background:rgba(10,102,194,.1);padding:5px 10px;border-radius:999px;white-space:nowrap}
.nle-cover{aspect-ratio:16/9;background:linear-gradient(135deg,var(--teal),#0a8a80 45%,var(--red)) center/cover no-repeat;display:flex;align-items:flex-end;padding:22px}
.nle-cover-t{color:#fff;font-family:var(--disp);font-weight:800;font-size:clamp(18px,2vw,23px);line-height:1.12}
.nle-body{padding:18px 22px}
.nle-title{display:block;font-family:var(--disp);font-weight:800;font-size:16.5px;color:var(--ink);line-height:1.2;margin-bottom:9px}
.nle-body p{font-size:14.5px;color:var(--muted);line-height:1.5}
.nle-link{display:inline-block;margin-top:12px;font-family:var(--disp);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#0A66C2}
.nle-note{padding:11px 22px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--muted);background:var(--surface);display:flex;align-items:center;gap:7px}
@media(max-width:820px){.nl-grid{grid-template-columns:1fr;gap:32px}}

/* canal de notícia (mailingdeimprensa.com) */
.newschannel{padding:92px 0;background:var(--paper);border-top:1px solid var(--line)}
.nc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.newschannel h2{font-weight:800;font-size:clamp(30px,4.4vw,50px);line-height:1;letter-spacing:-.02em;margin-top:16px;max-width:18ch}
.newschannel h2 em{font-style:normal;color:var(--teal)}
.newschannel .dek{font-size:17px;color:var(--text);margin-top:16px;max-width:50ch}
/* auto-fit: se o portal ainda só tiver 1 ou 2 artigos publicados, os cards
   ocupam a linha inteira em vez de deixar buraco. */
.nc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:44px}
.nc-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;background:#fff;transition:.2s;position:relative;overflow:hidden}
.nc-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .25s}
.nc-card:hover{box-shadow:0 18px 40px -20px rgba(8,42,43,.35);transform:translateY(-4px)}
.nc-card:hover::before{transform:scaleY(1)}
.nc-tag{font-family:var(--disp);font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.nc-card h3{font-family:var(--disp);font-weight:800;font-size:20px;line-height:1.2;color:var(--ink);text-transform:none}
.nc-go{margin-top:auto;padding-top:18px;font-family:var(--disp);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--teal)}
.nc-card:hover .nc-go{color:var(--red)}

/* 5 colunas so cabem em tela larga: abaixo disso a marca vira uma faixa
   propria e as colunas de links se redistribuem. */
@media(max-width:1180px){
  .foot-top{grid-template-columns:repeat(4,1fr);gap:24px 26px}
  .foot-brand{grid-column:1/-1;margin-bottom:10px}
  .foot-brand p{max-width:78ch}
}
@media(max-width:980px){
  .proof{grid-template-columns:1fr 1fr}
  .proof .cell:nth-child(2){border-right:0}
  .proof .cell:nth-child(-n+2){border-bottom:1px solid var(--line)}  .plist{grid-template-columns:1fr}
  .team{grid-template-columns:repeat(3,1fr)}  .bv-panel{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
/* Header colapsa p/ hambúrguer quando o menu completo não cabe; Login fica.
   1200, não 1080: com 5 itens o menu só cabe de verdade a partir de ~1200. De
   1081 a 1200 ele "cabia" às custas do logo, que era espremido até 17px de
   largura. Trocar o número aqui é o que permite `.brand{flex:none}`.
   ⚠️ O bloco do menu aberto (.menu.open) usa o MESMO limite — mudar os dois. */
@media(max-width:1200px){
  .menu{display:none}
  .burger{display:block}
}
@media(max-width:640px){
  body{font-size:16.5px}
  .menu{display:none}
  .burger{display:block}
  .proof,.sol-grid,.sol-feature,.depo-grid,.mov-grid,.team,.bv-facts{grid-template-columns:1fr}
  .proof .cell{border-right:0;border-bottom:1px solid var(--line)}
  .prom{padding:32px 26px}
  .foot-top{grid-template-columns:1fr}
  /* folga para o botao flutuante nao cobrir o ultimo item do rodape */
  footer{padding-bottom:88px}
  .finalcta .wrap{flex-direction:column;align-items:flex-start}
  .bv-left,.bv-right{padding:38px 30px}
  .spambrain .badge{font-size:34px}
  .brand img{height:48px}
}
/* ===== Ajustes mobile adicionais (carrosséis + visibilidade) ===== */
@media(max-width:640px){
  .feat{flex:0 0 86%}
}
@media(max-width:640px){
  .hide-mobile{display:none!important}
  .hide-desktop{display:block!important}
  /* Canal de notícia no celular: carrossel horizontal em vez de uma caixa
     embaixo da outra. O card fica em 84% da tela para o próximo aparecer pela
     borda — é o que ensina que dá para arrastar, sem precisar de dica escrita. */
  .nc-grid{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px 4px}
  .nc-grid::-webkit-scrollbar{display:none}
  .nc-card{flex:0 0 84%;scroll-snap-align:start}
  .nc-head{flex-direction:column;align-items:flex-start}
  .bv-facts{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .bv-facts .f{flex:0 0 78%;scroll-snap-align:center}
}

/* ===== Menu mobile (hambúrguer funcional) ===== */
/* Mesmo limite do bloco que esconde o menu (1200). Se os dois divergirem, existe
   uma faixa de larguras em que o hambúrguer aparece e não abre nada. */
@media(max-width:1200px){
  header.nav{position:relative}
  .menu.open{
    display:flex;flex-direction:column;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -24px rgba(8,42,43,.4);
    padding:8px 0;z-index:60;margin-left:0
  }
  .menu.open a{padding:14px 30px;border-bottom:1px solid var(--surface)}
  .menu.open a::after{display:none}
  .menu.open a:last-child{border-bottom:0}
}

/* ===== Primeira dobra: hero + faixa de provas cabem juntos na altura da tela =====
   O hero é dimensionado pela ALTURA da viewport (vh), não só pela largura:
   em telas altas ele cresce e enche a dobra; em telas baixas ele encolhe
   (título e espaçamentos menores) para os 4 boxes sempre aparecerem embaixo. */
@media(min-width:769px){
  .firstfold{display:flex;flex-direction:column;min-height:calc(100vh - 86px);min-height:calc(100svh - 86px)}
  .firstfold>.hero{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;
    padding-top:clamp(16px,3vh,48px);padding-bottom:clamp(18px,3.4vh,52px)}
  /* o .wrap precisa ocupar a largura toda no flex, senão encolhe p/ a largura do texto
     e o margin:auto o joga pro centro — o texto deve alinhar à esquerda (junto do logo) */
  .firstfold>.hero>.wrap{width:100%}
  .firstfold>.hero h1{font-size:clamp(38px,min(6.5vw,8vh),86px);margin-top:clamp(10px,1.6vh,22px)}
  .firstfold>.hero .lead{margin-top:clamp(14px,2.2vh,28px);font-size:clamp(17px,min(2.1vw,2.55vh),25px)}
  .firstfold>.hero .cta-row{margin-top:clamp(18px,2.8vh,38px)}
  .firstfold>.proofband{flex:0 0 auto}
  .firstfold .proof .cell{padding-top:clamp(18px,2.6vh,38px);padding-bottom:clamp(18px,2.6vh,38px)}
}

/* ===== Escala tipográfica coerente (laptop/desktop) =========================
   Tudo cascateia do hero: os títulos de bloco também escalam pela ALTURA da
   tela (min(vw,vh)), com teto SEMPRE abaixo do H1 do hero — assim a hierarquia
   (hero > título de seção) se mantém em qualquer proporção de tela, e não
   acontece de o título do 2º bloco ficar maior que o hero numa tela baixa.
   Mobile (<769px) mantém a escala por largura, já afinada.               */
@media(min-width:769px){
  .clients .lead-line,
  .promessas .intro h2, .promessas h2,
  .anatomy h2,
  .plataforma h2,
  .bv-left h2,
  .depo h2,
  .nl-left h2,
  .movimentos h2,
  .sec-head h2{
    font-size:clamp(30px,min(5vw,6.1vh),56px)!important;
  }
  /* canal de notícia: teto igual, mas com folga p/ o domínio não quebrar */
  .newschannel h2{font-size:clamp(22px,min(5.6vw,6.1vh),56px)!important}
}

/* ===== Modal de captação de lead (reusável; abre em qualquer [data-lead]) ===== */
.lead-modal{position:fixed;inset:0;z-index:210;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow:auto}
.lead-modal.open{display:flex}
.lead-modal .lm2-back{position:fixed;inset:0;background:rgba(4,25,26,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.lead-modal .lm2-card{position:relative;z-index:1;width:100%;max-width:520px;margin:auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.42);padding:36px 34px;animation:lm2pop .26s ease}
@keyframes lm2pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lead-modal .lm2-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0;background:var(--paper);color:var(--ink);font-size:20px;line-height:38px;text-align:center;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.16);transition:transform .15s}
.lead-modal .lm2-close:hover{transform:scale(1.06)}
.lm2-head{margin-bottom:20px}
.lm2-head h2{font-family:var(--disp);font-weight:800;font-size:26px;color:var(--ink);line-height:1.08;letter-spacing:-.01em;margin-top:8px}
.lm2-dek{font-size:14.5px;color:var(--muted);margin-top:10px;line-height:1.45}
.lf-field{position:relative;margin-bottom:13px}
.lf-field>input,.lf-field>select{width:100%;padding:15px 14px;border:1.5px solid var(--line);border-radius:11px;font:inherit;font-size:15px;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s}
.lf-field>input:focus,.lf-field>select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,107,110,.12)}
.lf-field:not(.lf-sel)>label{position:absolute;left:11px;top:15px;color:var(--muted);font-size:15px;pointer-events:none;transition:.14s;background:#fff;padding:0 5px}
.lf-field>input:focus+label,.lf-field>input:not(:placeholder-shown)+label{top:-8px;font-size:12px;color:var(--teal);font-weight:600}
.lf-sel>label.lf-sel-lb{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:6px;font-family:var(--disp)}
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lf-field.invalid>input,.lf-field.invalid>select{border-color:var(--red);box-shadow:0 0 0 3px rgba(235,30,47,.1)}
/* mensagem colada no campo recusado (o JS cria e tira o span.fe) */
.lf-field .fe{display:block;color:var(--red);font-size:12.5px;font-weight:600;line-height:1.35;margin-top:6px}
.lf-btn{width:100%;margin-top:8px;justify-content:center}
.lf-err{color:var(--red);font-size:13.5px;margin-top:10px;line-height:1.4}
.lf-loader{display:flex;align-items:center;gap:9px;justify-content:center;margin-top:12px;color:var(--muted);font-size:14px}
.lf-loader[hidden]{display:none}
.lf-spin{width:16px;height:16px;border:2.5px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:lfspin .7s linear infinite}
@keyframes lfspin{to{transform:rotate(360deg)}}
.lm2-success{text-align:center;padding:14px 6px}
.lm2-success[hidden]{display:none}
.lm2-ok{width:60px;height:60px;border-radius:50%;background:var(--teal);color:#fff;font-size:30px;line-height:60px;margin:0 auto 16px}
.lm2-success h2{font-family:var(--disp);font-weight:800;font-size:24px;color:var(--ink)}
.lm2-success p{font-size:15px;color:var(--text);margin:10px 0 22px;line-height:1.5}
@media(prefers-reduced-motion:reduce){.lead-modal .lm2-card{animation:none}}
@media(max-width:560px){.lead-modal{padding:16px 12px}.lead-modal .lm2-card{padding:28px 22px}.lf-row{grid-template-columns:1fr}}
/* --- Modal de lead: escolha de caminho + login com o LinkedIn -------------- */
.lm2-pane[hidden]{display:none}/* No celular o nome é o que importa: o selo sai (o ✓ do e-mail já diz) e o
   "Não sou eu" desce para a própria linha, liberando a largura toda. */

/* ---------- modal do portal externo (data-portal) ---------------------------
   Abre um site de fora aqui dentro. O quadro ocupa quase toda a tela porque o
   que entra nele é um site inteiro, não um card; a barra de cima diz de quem é
   a página que está sendo mostrada e carrega o botão de sair para valer. */
.pm{position:fixed;inset:0;z-index:220;display:none}
.pm.open{display:block}
.pm-back{position:absolute;inset:0;background:rgba(4,25,26,.72);backdrop-filter:blur(3px)}
.pm-dialog{position:absolute;inset:24px;display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);max-width:1280px;margin:0 auto}
.pm-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px 12px 18px;background:var(--hd);color:#fff;flex:0 0 auto}
.pm-id{display:flex;align-items:center;gap:10px;min-width:0}
.pm-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--grad)}
.pm-title{font-family:var(--disp);font-weight:800;font-size:15px;white-space:nowrap}
.pm-host{font-size:12.5px;color:#9fb8b7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-acts{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.pm-out{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 14px;transition:.16s}
.pm-out:hover{background:var(--teal);border-color:var(--teal)}
.pm-out svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pm-close{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:.16s}
.pm-close:hover{background:var(--red);border-color:var(--red)}
.pm-body{position:relative;flex:1 1 auto;background:var(--surface)}
.pm-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.pm-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:11px;font-size:15px;color:var(--muted);background:var(--surface)}
/* Documento em imagem dentro do modal. No desktop cabe inteiro (mesmo efeito do
   view=Fit do PDF); no estreito passa a largura cheia e ROLA, que e o unico jeito
   de o texto de um A4 em retrato ficar legivel num telefone. */
.pm-imgwrap{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;background:#fff;display:flex;align-items:center;justify-content:center;padding:14px}
.pm-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;margin:auto;cursor:zoom-in}
@media(max-width:900px){
  /* largura cheia e colado no topo. O margin:auto da regra acima venceria o
     align-items e deixaria faixa branca em cima e embaixo. */
  .pm-imgwrap{align-items:flex-start;padding:0}
  .pm-img{width:100%;max-width:none;max-height:none;margin:0}
}
/* Ampliar: leva a imagem ao tamanho natural e deixa o quadro rolar nos dois
   eixos. É o que torna a letra miúda legível no telefone — pinça não funciona
   dentro de um bloco com rolagem própria, então o toque é o gesto que resta. */
.pm-imgwrap.is-zoom{align-items:flex-start;justify-content:flex-start;padding:0}
.pm-imgwrap.is-zoom .pm-img{width:820px;max-width:none;max-height:none;margin:0;cursor:zoom-out}
/* Documento NOSSO: a barra mostra o nome do documento, não um host. O que está
   na tela é arquivo da nossa origem — escrever "app.i-maxpr.com" ali apontaria
   para o lugar errado. E o título volta no celular, onde a regra geral o
   esconde para dar lugar justamente ao host. */
.pm.is-img .pm-host{display:none}
@media(max-width:700px){ .pm.is-img .pm-title{display:block} }
.pm-spin{width:19px;height:19px;border-radius:50%;border:2.5px solid rgba(0,107,110,.22);border-top-color:var(--teal);animation:pmspin .7s linear infinite}
@keyframes pmspin{to{transform:rotate(360deg)}}
.pm-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:10px 18px;background:#fff;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.pm-foot a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.pm-foot a:hover{color:var(--red)}
body.pm-open{overflow:hidden}
@media(max-width:700px){
  /* no celular vira tela cheia: 24px de borda roubariam área de leitura */
  .pm-dialog{inset:0;border-radius:0}
  .pm-out span,.pm-title{display:none}
  .pm-out{padding:8px 11px}
  .pm-host{font-size:12px}
  .pm-foot{padding:9px 14px;font-size:11.5px;gap:8px;justify-content:center}
}

/* ===== Aviso "login só no computador" (modal do celular) ====================
   Só aparece em telefone, e o JS nem inicia fora dele — mas o CSS não assume
   isso: um aparelho que escape do palpite pelo lado largo ainda encontra um
   cartão legível, centralizado, com largura máxima. Mesma casca visual do
   modal de lead (fundo escurecido, cartão claro, raio de 20px), para não
   inventar uma terceira linguagem de caixa. */
.lcel{position:fixed;inset:0;z-index:230;display:none;align-items:center;justify-content:center;padding:18px;overflow:auto}
.lcel.open{display:flex}
.lcel-back{position:fixed;inset:0;background:rgba(4,25,26,.74);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.lcel-card{position:relative;z-index:1;width:100%;max-width:440px;margin:auto;background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.42);padding:30px 24px 24px;text-align:center;animation:lcelpop .24s ease}
@keyframes lcelpop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.lcel-x{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;border:0;background:var(--surface);color:var(--ink);font-size:20px;line-height:38px;text-align:center;cursor:pointer}
.lcel-ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--surface);margin-bottom:14px}
.lcel-ico svg{width:28px;height:28px;fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round}
.lcel-card h2{font-family:var(--disp);font-weight:800;font-size:25px;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.lcel-card h2 em{font-style:normal;color:var(--teal)}
.lcel-dek{font-size:15px;line-height:1.5;color:var(--text);margin-top:12px}
.lcel-faz{font-size:14.5px;line-height:1.5;color:var(--ink);margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.lcel-btn{width:100%;justify-content:center;margin-top:14px;font-size:15px;padding:14px 20px}
.lcel-wpp{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:13px 20px;border-radius:999px;border:2px solid var(--line);font-family:var(--disp);font-weight:700;font-size:14.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
.lcel-wpp svg{width:19px;height:19px;fill:#25D366}
.lcel-wpp:hover{border-color:var(--teal);color:var(--teal)}
.lcel-nota{font-size:13px;color:var(--muted);margin-top:14px}
.lcel-nota a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* Discreto de propósito: é a saída para o palpite errado, não um convite a
   insistir numa porta que não abre. */
.lcel-seguir{display:inline-block;margin-top:16px;font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
body.lcel-open{overflow:hidden}
.lcel-dom{white-space:nowrap}