/* Cabeçalho e rodapé do site (includes/site/cabecalho.php e rodape.php),
   os mesmos na home e no blog. Nomes com sc- porque o blog carrega o
   Bootstrap, que também tem .btn e .nav; as variáveis ficam presas aos
   próprios blocos para não depender do :root de cada página. */
.sc-hdr,.sc-foot{
  --sc-green:#2ECC71;
  --sc-green-hi:#3ADB80;
  --sc-ink:#0A1A2B;
  --sc-ink-2:#10263D;
  --sc-shadow:0 26px 50px -20px rgba(0,0,0,.7); /* a sombra dos cartões sobre fundo escuro do home.css */
  --sc-line:rgba(234,241,245,.12);
  --sc-text:#EAF1F5;
  --sc-muted:#9DB2C1;
  --sc-f-display:"Outfit","Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sc-f-body:"Instrument Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-family:var(--sc-f-body);
}
.sc-hdr *,.sc-foot *{box-sizing:border-box}
.sc-wrap{max-width:1200px;margin-inline:auto;padding-inline:20px}
.sc-hdr ul,.sc-foot ul{list-style:none;padding:0;margin:0}

/* ---------- cabeçalho ---------- */
.sc-hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(10,26,43,.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--sc-line);color:var(--sc-text)}
.sc-hdr .sc-wrap{position:relative;display:flex;align-items:center;gap:24px;height:68px}
.sc-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* Ícones de traço: os <symbol> do cabeçalho herdam cor e traço do <svg> que os usa */
.sc-hdr svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sc-hdr p{margin:0}
.sc-logo{display:flex;flex:none;align-items:center;gap:.6rem;text-decoration:none;color:var(--sc-text);font:700 1.25rem/1 var(--sc-f-display);letter-spacing:-.02em;white-space:nowrap}
.sc-logo:hover{color:var(--sc-text)}
.sc-logo-mark{width:36px;height:36px;border-radius:10px;background:#fff;display:grid;place-items:center;flex:none}
.sc-logo-mark img{display:block;width:26px;height:26px}
.sc-logo span span{color:var(--sc-green);font-weight:600}
.sc-nav{margin-left:auto}
.sc-nav-l{display:flex;align-items:center;gap:2px}
.sc-nav-a,.sc-dd-btn{position:relative;display:inline-flex;align-items:center;gap:.3rem;min-height:40px;color:var(--sc-muted);text-decoration:none;font:500 .95rem/1 var(--sc-f-body);padding:.6rem .75rem;border:0;border-radius:9px;background:none;cursor:pointer;white-space:nowrap;transition:color .15s ease,background-color .15s ease}
.sc-nav-a:hover,.sc-nav-a.sc-ativo,.sc-dd-btn:hover,.sc-aberto>.sc-dd-btn{color:var(--sc-text);background:rgba(255,255,255,.06)}
/* Traço verde sob o menu aberto, para ligar o botão ao painel */
.sc-dd-btn::after{content:"";position:absolute;left:50%;bottom:3px;width:18px;height:2px;border-radius:2px;background:var(--sc-green);transform:translateX(-50%) scaleX(0);transition:transform .2s ease}
.sc-aberto>.sc-dd-btn::after{transform:translateX(-50%) scaleX(1)}
.sc-hdr .sc-chev{width:14px;height:14px;stroke-width:2.2;transition:transform .2s ease}
.sc-aberto .sc-chev,.sc-macc[open] .sc-chev{transform:rotate(180deg)}
.sc-hdr a:focus-visible,.sc-hdr button:focus-visible,.sc-macc summary:focus-visible{outline:2px solid var(--sc-green);outline-offset:2px}

/* Mega-menu: painel centrado sob o cabeçalho, lista à esquerda e destaque à
   direita. Fundo sólido: backdrop-filter dentro de outro (o do cabeçalho) não
   desfoca a página. */
.sc-dd{position:absolute;top:calc(100% + 6px);left:50%;z-index:60;width:min(920px,calc(100% - 40px));opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .12s ease,transform .12s ease,visibility 0s linear .12s}
.sc-dd::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} /* ponte: o mouse atravessa o vão sem fechar */
.sc-aberto>.sc-dd{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s ease-out,transform .18s ease-out,visibility 0s}
.sc-dd-in{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:12px;padding:12px;background:var(--sc-ink);border:1px solid var(--sc-line);border-radius:24px;box-shadow:var(--sc-shadow)}
.sc-dd-main{padding:14px 4px 4px}
.sc-hdr .sc-dd-eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 10px 12px;color:var(--sc-muted);font:600 .72rem/1 var(--sc-f-body);letter-spacing:.14em;text-transform:uppercase}
.sc-dd-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sc-green)}
.sc-dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.sc-dd-grid.sc-dd-1col{grid-template-columns:1fr} /* até 4 itens: uma coluna, para não sobrar vão ao lado do destaque */
.sc-dd-link{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;transition:background-color .15s ease}
.sc-dd-link:hover{background:rgba(255,255,255,.05)}
.sc-dd-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--sc-line);background:rgba(255,255,255,.03);color:var(--sc-green);transition:border-color .15s ease}
.sc-dd-link:hover .sc-dd-ic{border-color:rgba(46,204,113,.45)}
.sc-dd-ic svg{width:18px;height:18px}
.sc-dd-link strong{display:block;color:var(--sc-text);font:600 .93rem/1.3 var(--sc-f-body)}
.sc-dd-link small{display:block;margin-top:3px;color:var(--sc-muted);font-size:.83rem;line-height:1.4;text-wrap:pretty}
.sc-dd-mais{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin:8px 0 0 12px;color:var(--sc-green);font-weight:600;font-size:.9rem;text-decoration:none}
.sc-dd-mais:hover{color:var(--sc-green-hi)}
.sc-hdr .sc-dd-mais svg,.sc-hdr .sc-dd-cta svg{width:16px;height:16px;stroke-width:2.2;transition:transform .15s ease}
.sc-dd-mais:hover svg,.sc-dd-cta:hover svg{transform:translateX(2px)}
.sc-dd-dest{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:22px;border:1px solid var(--sc-line);border-radius:12px;background:radial-gradient(120% 80% at 100% 0%,rgba(46,204,113,.16),transparent 60%),var(--sc-ink-2)}
.sc-dd-tag{padding:.38rem .62rem;border:1px solid rgba(46,204,113,.35);border-radius:999px;color:var(--sc-green);font:600 .68rem/1 var(--sc-f-body);letter-spacing:.14em;text-transform:uppercase}
.sc-hdr .sc-dd-h{margin-top:4px;color:var(--sc-text);font:700 1.2rem/1.25 var(--sc-f-display);letter-spacing:-.01em;text-wrap:balance}
.sc-dd-p{color:var(--sc-muted);font-size:.88rem;line-height:1.5;text-wrap:pretty}
.sc-dd-cta{margin-top:6px;padding:.7rem 1rem;font-size:.9rem}
.sc-dd-nums,.sc-dd-lidos{width:100%;margin-top:auto;padding-top:14px;border-top:1px dashed var(--sc-line)}
.sc-dd-nums{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sc-dd-nums strong{display:block;color:var(--sc-text);font:700 1.15rem/1 var(--sc-f-display);font-variant-numeric:tabular-nums}
.sc-dd-nums span{display:block;margin-top:5px;color:var(--sc-muted);font-size:.76rem;line-height:1.35}
.sc-dd-lidos{display:grid}
.sc-dd-lidos span{margin-bottom:4px;color:var(--sc-muted);font:600 .68rem/1 var(--sc-f-body);letter-spacing:.14em;text-transform:uppercase}
.sc-dd-lidos a{padding:7px 0;color:var(--sc-text);font-size:.88rem;text-decoration:none}
.sc-dd-lidos a:hover{color:var(--sc-green-hi)}

.sc-cta{display:flex;flex:none;gap:10px;align-items:center;white-space:nowrap}
.sc-login{color:var(--sc-text);text-decoration:none;font-weight:500;padding:.6rem .8rem}
.sc-login:hover{color:var(--sc-text)}
.sc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font:600 .95rem/1.1 var(--sc-f-body);padding:.75rem 1.1rem;border-radius:14px;text-decoration:none;border:1px solid transparent;cursor:pointer;background:var(--sc-green);color:#052616;box-shadow:0 12px 30px -12px rgba(46,204,113,.75),inset 0 -2px 0 rgba(0,0,0,.14);transition:transform .15s ease,background-color .2s ease}
.sc-btn:hover{background:var(--sc-green-hi);color:#052616;transform:translateY(-1px)}
.sc-btn:active{transform:scale(.97)}
.sc-menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--sc-line);color:var(--sc-text);width:44px;height:44px;padding:0;border-radius:12px;cursor:pointer}
.sc-menu-btn svg{display:block;width:22px;height:22px;margin:auto;stroke-width:1.9}

/* Menu do celular: os mesmos menus em sanfona. Rola por dentro, porque o
   cabeçalho é fixo e o que passasse da tela ficaria fora de alcance. */
.sc-mnav{background:var(--sc-ink);border-bottom:1px solid var(--sc-line);padding:4px 20px 20px;display:grid;max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);overflow-y:auto;overscroll-behavior:contain}
.sc-mnav[hidden]{display:none}
.sc-mlink{display:flex;align-items:center;min-height:52px;padding:0 .4rem;color:var(--sc-text);text-decoration:none;border-bottom:1px solid var(--sc-line);font-weight:500}
.sc-mlink:hover{color:var(--sc-text)}
.sc-macc{border-bottom:1px solid var(--sc-line)}
.sc-macc summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 .4rem;color:var(--sc-text);font-weight:500;cursor:pointer;list-style:none}
.sc-macc summary::-webkit-details-marker{display:none}
.sc-macc summary .sc-chev{color:var(--sc-muted)}
.sc-macc ul{display:grid;padding:0 0 10px}
.sc-macc a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 .6rem;border-radius:10px;color:var(--sc-muted);text-decoration:none;font-size:.95rem}
.sc-macc a:hover{color:var(--sc-text);background:rgba(255,255,255,.04)}
.sc-macc a svg{flex:none;width:18px;height:18px;color:var(--sc-green)}
.sc-hdr .sc-macc-dest{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;min-height:0;margin:0 0 14px;padding:14px 16px;border:1px solid var(--sc-line);border-radius:12px;background:radial-gradient(120% 120% at 100% 0%,rgba(46,204,113,.16),transparent 60%),var(--sc-ink-2);color:var(--sc-text)}
.sc-macc-dest span{color:var(--sc-green);font:600 .68rem/1 var(--sc-f-body);letter-spacing:.14em;text-transform:uppercase}
.sc-macc-dest strong{grid-column:1;font:600 .95rem/1.3 var(--sc-f-body)}
.sc-hdr .sc-macc-dest svg{grid-column:2;grid-row:1 / span 2;width:18px;height:18px;stroke-width:2.2}
.sc-mnav .sc-btn{margin-top:16px;padding:1rem 1.35rem;font-size:1rem}
.sc-cta-m{display:none}
/* Banner de download do app (includes/landing/app-download-banner.php) no topo */
body.has-app-banner .sc-hdr{top:calc(58px + env(safe-area-inset-top,0px))}
/* O cabeçalho completo (logo, 5 itens, Entrar e Testar grátis) precisa de uns
   960px; abaixo disso vira menu. Com os 7 links antigos a troca era em 1160px
   (em 980px o logo e os links quebravam em duas linhas). */
@media (max-width:1000px){.sc-nav,.sc-login{display:none}.sc-menu-btn{display:grid}.sc-cta{order:2}}
@media (max-width:560px){
  .sc-cta{display:none}
  .sc-hdr .sc-wrap{gap:10px}
  .sc-menu-btn{margin-left:0}
  .sc-cta-m{display:inline-flex;margin-left:auto;padding:.6rem .9rem;font-size:.9rem;border-radius:12px;flex:none;white-space:nowrap}
  /* No celular estreito (320-360px) o nome pode ir para duas linhas; o botão e o menu não encolhem */
  .sc-logo{flex:0 1 auto;min-width:0;white-space:normal}
  .sc-menu-btn{flex:none}
  /* Na home o "Testar grátis" do topo só aparece depois que o do hero sai da
     tela (o script da home liga body.rolou). No blog fica sempre visível. */
  .sc-hdr[data-cta-rolagem] .sc-cta-m{visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
  body.rolou .sc-hdr[data-cta-rolagem] .sc-cta-m{visibility:visible;opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .sc-dd,.sc-aberto>.sc-dd,.sc-chev,.sc-dd-btn::after,.sc-btn{transition:none}
}

/* ---------- rodapé ---------- */
.sc-foot{background:#06111C;color:var(--sc-muted);padding-block:64px 36px;font-size:.93rem;line-height:1.6;color-scheme:dark}
.sc-foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.sc-foot h4{font:600 .78rem/1 var(--sc-f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--sc-text);margin:0 0 16px}
.sc-foot ul{display:grid;gap:10px}
.sc-foot a{text-decoration:none;color:var(--sc-muted)}
.sc-foot a:hover{color:var(--sc-text)}
.sc-about{max-width:30em;line-height:1.6;margin:16px 0 0}
.sc-sel{user-select:all;-webkit-user-select:all;color:var(--sc-text)}
/* Redes sociais: 44 px de toque (uso no celular), no padrão do .sc-dd-ic */
.sc-foot .sc-redes{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.sc-foot .sc-redes a{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--sc-line);background:rgba(255,255,255,.03);color:var(--sc-muted);transition:color .15s ease,border-color .15s ease}
.sc-foot .sc-redes a:hover{color:var(--sc-text);border-color:rgba(46,204,113,.45)}
.sc-foot .sc-redes a:focus-visible{outline:2px solid var(--sc-green);outline-offset:2px}
/* O telefone não quebra no hífen; o e-mail pode quebrar depois do @ (<wbr>), para caber em 320px */
.sc-tel{white-space:nowrap}
.sc-foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid var(--sc-line);font-size:.85rem}
.sc-foot-bottom nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.sc-linkbtn{color:var(--sc-muted);background:none;border:0;padding:0;font:inherit;cursor:pointer}
.sc-linkbtn:hover{color:var(--sc-text)}
@media (max-width:1060px){
  .sc-foot-grid{grid-template-columns:1fr 1fr}
  .sc-foot-grid > div:first-child{grid-column:1 / -1}
}