/* =========================================================
   ADAPT MEDIA — Design System compartilhado (páginas internas)
   Mesmo padrão visual da home: Inter + vermelho/preto.
   ========================================================= */

:root{
  --bg:#050506; --bg-2:#0B0B0D; --surface:#121214; --surface-2:#191920; --surface-3:#212129;
  --light:#FFFFFF; --light-alt:#F4F4F5; --light-border:#E6E6E9;
  --text:#F7F7F8; --text-muted:#A8A8B2; --text-faint:#8B8B96;
  --text-d:#09090B; --text-d-muted:#52525B; --text-d-faint:#7A7A85;
  --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.17);
  --red:#E8262F; --red-2:#FF4A42; --red-soft:rgba(232,38,47,.12); --red-tint:#FDECEA;
  --green:#22B455; --green-2:#1A9646;
  --blue:#4285F4; --yellow:#FBBC05; --meta:#0866FF; --wa:#25D366;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overflow-x no html impede que o menu mobile (position:fixed, deslocado
   para fora da tela) crie rolagem lateral no celular */
html{scroll-behavior:smooth; overflow-x:hidden}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  /* palavra longa demais quebra em vez de estourar o cartão no celular */
  overflow-wrap:break-word;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px; position:relative}
@media (max-width:640px){.wrap{padding:0 20px}}

h1,h2,h3,h4{font-weight:700; letter-spacing:-0.03em; line-height:1.1}
h1{font-size:clamp(2.1rem,4.4vw,3.25rem)}
h2{font-size:clamp(1.55rem,2.7vw,2.1rem)}
h3{font-size:1.05rem; letter-spacing:-0.02em}
.red{color:var(--red)}
.eyebrow{display:block; font-size:.72rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--red)}
.p{font-size:.96rem; color:var(--text-muted); line-height:1.65}
.light .p{color:var(--text-d-muted)}
.center{text-align:center}
.mx{max-width:660px; margin-left:auto; margin-right:auto}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 24px; border-radius:9px; font-weight:600; font-size:.92rem;
  border:1px solid transparent; transition:all 200ms var(--ease); white-space:nowrap;
}
.btn:focus-visible{outline:2px solid var(--green); outline-offset:3px}
.btn-g{background:var(--green); color:#fff}
.btn-g:hover{background:var(--green-2); transform:translateY(-1px); box-shadow:0 10px 26px -8px rgba(34,180,85,.55)}
.btn-r{background:var(--red); color:#fff}
.btn-r:hover{background:#CF1F27; transform:translateY(-1px); box-shadow:0 10px 26px -8px rgba(232,38,47,.55)}
.btn-o{background:transparent; color:var(--text); border-color:var(--border-2)}
.btn-o:hover{border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.04)}
.light .btn-o{color:var(--text-d); border-color:var(--light-border)}
.light .btn-o:hover{background:var(--light-alt); border-color:#D2D2D8}
.btn-sm{padding:10px 18px; font-size:.86rem}

/* ===== HEADER ===== */
header{
  position:sticky; top:0; z-index:100; background:rgba(5,5,6,.72);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent; transition:all 250ms var(--ease);
}
header.on{border-color:var(--border); background:rgba(5,5,6,.95)}
.nav{display:flex; align-items:center; justify-content:space-between; height:84px; gap:20px}
.logo{display:flex; align-items:center; gap:10px; flex-shrink:0}
.logo-mark{width:34px; height:34px; border-radius:9px; background:var(--red); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform 300ms var(--ease)}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.06)}
.logo-mark svg{width:18px; height:18px}
.logo-txt{display:flex; flex-direction:column; line-height:1}
.logo-txt b{font-size:.98rem; font-weight:800; letter-spacing:.04em}
.logo-txt i{font-style:normal; font-size:.58rem; font-weight:600; letter-spacing:.3em; color:var(--red); margin-top:3px}
.nav-l{display:flex; align-items:center; gap:22px; font-size:.85rem; font-weight:500; color:var(--text-muted)}
.nav-l a{position:relative; white-space:nowrap}
.nav-l a::after{content:''; position:absolute; left:0; bottom:-5px; width:0; height:1.5px; background:var(--red); transition:width 250ms var(--ease)}
.nav-l a:hover{color:var(--text)}
.nav-l a:hover::after{width:100%}
.nav-l a.cur{color:#fff; font-weight:600}
.nav-l a.cur::after{width:100%}
/* ===== dropdown "Serviços" no menu ===== */
.navdd{position:relative}
.navdd-btn{
  display:flex; align-items:center; gap:6px; background:none; border:none; font:inherit;
  color:inherit; cursor:pointer; padding:0; font-size:.85rem; font-weight:500; white-space:nowrap;
}
.navdd-btn:hover{color:var(--text)}
.navdd-btn svg{width:12px; height:12px; transition:transform 220ms var(--ease)}
.navdd.open .navdd-btn{color:#fff}
.navdd.open .navdd-btn svg{transform:rotate(180deg)}
.navdd-menu{
  position:absolute; top:calc(100% + 20px); left:50%; transform:translateX(-50%) translateY(6px);
  width:296px; background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--r-md);
  padding:9px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 200ms var(--ease), transform 200ms var(--ease); box-shadow:0 28px 56px -22px rgba(0,0,0,.92); z-index:120;
}
.navdd.open .navdd-menu{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0)}
.navdd-menu a{
  display:flex; align-items:center; gap:12px; padding:10px 11px; border-radius:9px;
  font-size:.86rem; font-weight:500; color:var(--text-muted); transition:background 160ms var(--ease), color 160ms var(--ease);
}
.navdd-menu a:hover{background:rgba(255,255,255,.055); color:#fff}
.navdd-menu a.cur{background:rgba(232,38,47,.12); color:#fff}
.navdd-menu a svg{width:17px; height:17px; color:var(--red); flex-shrink:0}
.navdd-menu a span{display:flex; flex-direction:column; line-height:1.35}
.navdd-menu a small{font-size:.72rem; font-weight:400; color:var(--text-faint)}
/* seção "Serviços" dentro do menu mobile */
.mm-lbl{font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin:22px 0 6px; padding:0 2px}
.mm nav a:first-child ~ .mm-lbl{margin-top:22px}

.nav-r{display:flex; align-items:center; gap:12px; flex-shrink:0}
.burger{display:none; background:none; border:none; padding:8px; color:var(--text)}
@media (max-width:1100px){ .nav-l{display:none} .burger{display:flex} }
@media (max-width:520px){ .nav-r .btn-g{display:none} }

.mm{position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; flex-direction:column; padding:22px; transform:translateX(100%); transition:transform 300ms var(--ease); visibility:hidden; overflow-y:auto}
.mm.open{transform:translateX(0); visibility:visible}
.mm-top{display:flex; justify-content:space-between; align-items:center}
.mm nav{display:flex; flex-direction:column; margin-top:28px}
.mm nav a{font-size:1.15rem; font-weight:600; padding:13px 2px; border-bottom:1px solid var(--border)}
.mm nav a.cur{color:var(--red)}
.mm .btn{margin-top:26px}

section{padding:88px 0; position:relative}
@media (max-width:768px){section{padding:56px 0}}
.light{background:var(--light); color:var(--text-d)}
.light h2,.light h3{color:var(--text-d)}
.soft{background:var(--bg-2)}
.head-2col{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:end; margin-bottom:44px}
@media (max-width:860px){.head-2col{grid-template-columns:1fr; gap:20px; margin-bottom:32px}}
.head-2col h2{margin-top:12px; max-width:18ch}
.head-c{text-align:center; max-width:680px; margin:0 auto 44px}
.head-c h2{margin-top:12px}
.head-c .p{margin-top:14px}

/* Filhos de grid/flex não podem herdar min-width:auto — é a causa clássica
   de coluna que "estica" e joga o conteúdo para fora da tela no celular. */
.phero-grid > *, .split > *, .head-2col > *, .grid2 > *, .grid3 > *, .grid4 > *,
.others > *, .kpis > *, .ba > *, .care > *, .flow-col > *, .donut-wrap > *{min-width:0}

/* ===== REVEAL ===== */
.rv{opacity:0; transform:translateY(18px); transition:opacity 620ms var(--ease), transform 620ms var(--ease)}
.rv.in{opacity:1; transform:none}

/* ===== BREADCRUMB + HERO DE PÁGINA ===== */
.crumb{display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--text-faint); padding-top:26px}
.crumb a:hover{color:var(--text)}
.crumb svg{width:13px; height:13px; opacity:.6}
.crumb b{color:var(--text-muted); font-weight:500}

.phero{padding:34px 0 76px; overflow:hidden; position:relative}
.phero::before{
  content:''; position:absolute; left:50%; top:-180px; transform:translateX(-50%);
  width:900px; height:520px; background:var(--red); filter:blur(150px); opacity:.13; pointer-events:none;
}
@media (max-width:768px){.phero{padding:24px 0 52px}}
.phero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center; position:relative; z-index:1}
@media (max-width:1000px){.phero-grid{grid-template-columns:1fr; gap:44px}}
.phero h1{margin-top:14px; max-width:15ch}
.phero .p{margin-top:18px; max-width:46ch; font-size:1.02rem}
.phero-btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.phero-tags{display:flex; flex-wrap:wrap; gap:9px; margin-top:28px}
.tag{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:99px;
  background:var(--surface); border:1px solid var(--border); font-size:.79rem; color:var(--text-muted); font-weight:500;
}
.tag svg{width:14px; height:14px; color:var(--red); flex-shrink:0}

/* ===== CARDS ===== */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:940px){.grid3,.grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.grid2{grid-template-columns:1fr}}
@media (max-width:600px){.grid3,.grid4{grid-template-columns:1fr}}

.dcard{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:26px 24px; transition:all 260ms var(--ease); position:relative; overflow:hidden;
}
.dcard::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity 300ms var(--ease);
  background:radial-gradient(75% 90% at 50% 0%, rgba(232,38,47,.13), transparent 66%);
}
.dcard:hover{border-color:rgba(232,38,47,.33); transform:translateY(-4px)}
.dcard:hover::before{opacity:1}
.dcard > *{position:relative; z-index:1}
/* ícone neutro em repouso, vermelho só ao passar o mouse — antes ficava com
   fundo vermelho o tempo todo, em todo ícone de todo card, em toda página.
   Isso é que deixava a sensação de "tudo vermelho" que pesa na credibilidade. */
.dico{
  width:46px; height:46px; border-radius:12px; margin-bottom:16px;
  background:var(--surface-2); border:1px solid var(--border-2);
  display:flex; align-items:center; justify-content:center; transition:all 260ms var(--ease);
}
.dcard:hover .dico{background:var(--red); border-color:var(--red)}
.dico svg{width:21px; height:21px; color:var(--red); transition:color 260ms var(--ease)}
.dcard:hover .dico svg{color:#fff}
.dcard h3{margin-bottom:8px}
.dcard p{font-size:.86rem; color:var(--text-muted); line-height:1.6}

.scard{background:#fff; border:1px solid var(--light-border); border-radius:var(--r-md); padding:26px; transition:all 240ms var(--ease); position:relative; overflow:hidden}
.scard::before{content:''; position:absolute; left:0; top:0; height:3px; width:0; background:var(--red); transition:width 320ms var(--ease)}
.scard:hover{transform:translateY(-4px); box-shadow:0 22px 44px -20px rgba(0,0,0,.2); border-color:#D8D8DD}
.scard:hover::before{width:100%}
.sicon{width:44px; height:44px; border-radius:11px; background:var(--red-tint); display:flex; align-items:center; justify-content:center; margin-bottom:16px; transition:all 240ms var(--ease)}
.sicon svg{width:21px; height:21px; color:var(--red); transition:color 240ms var(--ease)}
.scard:hover .sicon{background:var(--red)}
.scard:hover .sicon svg{color:#fff}
.scard h3{margin-bottom:8px}
.scard p{color:var(--text-d-muted); font-size:.88rem; line-height:1.55}

/* ===== LISTA CHECK ===== */
.checks{display:flex; flex-direction:column; gap:14px; margin-top:24px}
.checks li{display:flex; gap:12px; align-items:flex-start; font-size:.92rem; line-height:1.5; list-style:none; color:#EFE4E4}
.checks svg{width:17px; height:17px; flex-shrink:0; margin-top:3px; color:var(--red)}
.checks b{color:#fff}
.light .checks li{color:var(--text-d-muted)}
.light .checks b{color:var(--text-d)}

/* ===== TIMELINE ===== */
.split{display:grid; grid-template-columns:.72fr 1.28fr; gap:56px; align-items:start}
@media (max-width:980px){.split{grid-template-columns:1fr; gap:34px}}
.split-head h2{margin-top:12px}
.split-head .p{margin-top:16px; max-width:34ch}
.timeline{display:flex; flex-direction:column; position:relative}
.tstep{display:grid; grid-template-columns:auto 1fr; gap:22px; padding:20px 0; position:relative}
.tstep:not(:last-child)::before{content:''; position:absolute; left:23px; top:64px; bottom:-4px; width:1.5px; background:linear-gradient(var(--red), rgba(232,38,47,.12))}
.tbadge{
  width:47px; height:47px; border-radius:13px; background:var(--surface); border:1.5px solid var(--border-2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; z-index:1;
  transition:all 260ms var(--ease);
}
.tstep:hover .tbadge{background:var(--red); border-color:var(--red); transform:scale(1.06)}
.tbadge svg{width:22px; height:22px; color:var(--red); stroke-width:1.7; transition:color 260ms var(--ease)}
.tstep:hover .tbadge svg{color:#fff}
.tnum{font-size:.7rem; font-weight:700; color:var(--red); letter-spacing:.08em; margin-bottom:5px}
.tbody h3{font-size:1.02rem; margin-bottom:7px}
.tbody p{font-size:.88rem; color:var(--text-muted); line-height:1.6; max-width:56ch}

/* =========================================================
   DASHBOARD KIT — usado nas páginas de tráfego e dados
   ========================================================= */
.dash{
  background:linear-gradient(170deg, var(--surface-2), var(--surface) 42%);
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 44px 90px -46px rgba(0,0,0,.95);
}
.dash-bar{display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--border); background:rgba(0,0,0,.28)}
.dash-dots{display:flex; gap:6px; flex-shrink:0}
.dash-dots i{width:9px; height:9px; border-radius:50%; background:#2E2E38; display:block}
.dash-dots i:first-child{background:#3A3A44}
.dash-tt{display:flex; align-items:center; gap:9px; font-size:.8rem; font-weight:600; color:#DCDCE2; min-width:0}
.dash-tt svg{width:16px; height:16px; flex-shrink:0}
.dash-live{margin-left:auto; display:flex; align-items:center; gap:7px; font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--green); flex-shrink:0}
.dash-live i{width:7px; height:7px; border-radius:50%; background:var(--green); animation:blink 1.7s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.3; transform:scale(.75)}}
.dash-body{padding:22px}
@media (max-width:560px){.dash-body{padding:16px}}
@media (max-width:520px){
  .dash-bar{flex-wrap:wrap; gap:8px 10px; padding:12px 14px}
  .dash-tt{font-size:.76rem; flex:1 1 auto}
  .dash-live{font-size:.64rem}
}
.dash-sub{font-size:.72rem; color:var(--text-faint); letter-spacing:.06em; text-transform:uppercase; font-weight:700; margin-bottom:14px}

/* abas Google / Meta */
.dtabs{display:flex; gap:8px; padding:14px 18px 0; flex-wrap:wrap}
.dtab{
  display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border-radius:9px 9px 0 0;
  background:transparent; border:1px solid transparent; border-bottom:none;
  font-size:.85rem; font-weight:600; color:var(--text-faint); transition:all 200ms var(--ease);
}
.dtab svg{width:16px; height:16px}
.dtab:hover{color:var(--text-muted)}
.dtab.on{background:var(--surface-2); border-color:var(--border); color:#fff}
.dpanel{display:none}
.dpanel.on{display:block; animation:fadeUp .45s var(--ease)}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* KPIs */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media (max-width:820px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:15px 16px; position:relative; overflow:hidden}
.kpi.hl{border-color:rgba(232,38,47,.32); background:linear-gradient(160deg, rgba(232,38,47,.11), var(--surface-2) 60%)}
.kpi > span{display:block; font-size:.68rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint)}
.kpi b{display:block; font-size:1.5rem; font-weight:800; letter-spacing:-0.035em; color:#fff; margin-top:9px; line-height:1}
@media (max-width:560px){.kpi b{font-size:1.25rem}}
.kpi em{display:inline-flex; align-items:center; gap:4px; font-style:normal; font-size:.72rem; font-weight:600; color:var(--green); margin-top:9px}
.kpi em.dn{color:var(--red-2)}
.kpi em svg{width:11px; height:11px}

/* gráfico de linha */
.chart{margin-top:20px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:18px}
.chart.google-tint{border-color:rgba(66,133,244,.22); background:linear-gradient(170deg, rgba(66,133,244,.06), var(--surface-2) 65%)}
.chart-hd{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap}
.chart-hd b{font-size:.86rem; font-weight:600}
.legend{display:flex; gap:14px; flex-wrap:wrap}
.legend span{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; color:var(--text-faint)}
.legend i{width:9px; height:9px; border-radius:3px; display:block}
.chart svg{width:100%; height:auto; overflow:visible}
.ln{fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset 1.8s var(--ease) .15s}
.in .ln{stroke-dashoffset:0}
.ar{opacity:0; transition:opacity .9s var(--ease) .9s}
.in .ar{opacity:1}
.gl{stroke:rgba(255,255,255,.06); stroke-width:1}
.axl{font-size:9px; fill:#6E6E7A}

/* barras horizontais */
.bars{display:flex; flex-direction:column; gap:13px; margin-top:6px}
.bar-row .bar-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px}
.bar-row .bar-lbl{font-size:.8rem; color:var(--text-muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar-row .bar-val{font-size:.8rem; font-weight:700; color:#fff; white-space:nowrap}
.bar-track{height:9px; border-radius:99px; background:rgba(255,255,255,.05); overflow:hidden}
.bar-fill{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#3A3A46,#55555F); width:0; transition:width 1.2s var(--ease)}
.in .bar-fill{width:var(--w,50%)}
.bar-row.hot .bar-fill{background:linear-gradient(90deg,var(--red),#FF6B62); box-shadow:0 0 18px rgba(232,38,47,.45)}
.bar-row.blue .bar-fill{background:linear-gradient(90deg,#2B5DB0,#4285F4)}
.bar-row:nth-child(2) .bar-fill{transition-delay:.12s}
.bar-row:nth-child(3) .bar-fill{transition-delay:.24s}
.bar-row:nth-child(4) .bar-fill{transition-delay:.36s}
.bar-row:nth-child(5) .bar-fill{transition-delay:.48s}
.bar-row:nth-child(6) .bar-fill{transition-delay:.6s}

/* colunas verticais */
.cols{display:flex; align-items:flex-end; gap:8px; height:150px; margin-top:8px}
.col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px; height:100%}
.col i{display:block; width:100%; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,#3A3A46,#22222A); height:0; transition:height 1.1s var(--ease)}
.in .col i{height:var(--h,40%)}
.col.hot i{background:linear-gradient(180deg,var(--red),#8E1219); box-shadow:0 0 22px -4px rgba(232,38,47,.7)}
.col span{font-size:.66rem; color:#6E6E7A; white-space:nowrap}
.col:nth-child(2) i{transition-delay:.07s} .col:nth-child(3) i{transition-delay:.14s}
.col:nth-child(4) i{transition-delay:.21s} .col:nth-child(5) i{transition-delay:.28s}
.col:nth-child(6) i{transition-delay:.35s} .col:nth-child(7) i{transition-delay:.42s}
.col:nth-child(8) i{transition-delay:.49s} .col:nth-child(9) i{transition-delay:.56s}
.col:nth-child(10) i{transition-delay:.63s} .col:nth-child(11) i{transition-delay:.7s}
.col:nth-child(12) i{transition-delay:.77s}

/* tabela */
.dtable{width:100%; border-collapse:collapse; margin-top:6px; font-size:.82rem}
.dtable th{
  text-align:left; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); padding:0 12px 11px; white-space:nowrap;
}
.dtable td{padding:12px; border-top:1px solid var(--border); color:var(--text-muted); white-space:nowrap}
.dtable td:first-child{color:#fff; font-weight:600; white-space:normal; min-width:150px}
.dtable .num{text-align:right; font-variant-numeric:tabular-nums}
.dtable tr:hover td{background:rgba(255,255,255,.02)}
.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px; font-size:.68rem; font-weight:600}
.pill i{width:6px; height:6px; border-radius:50%; background:currentColor; display:block}
.pill.ok{background:rgba(34,180,85,.14); color:#4ED17E}
.pill.warn{background:rgba(251,188,5,.14); color:#E0AE1D}
.pill.off{background:rgba(255,255,255,.06); color:#8B8B96}
.tscroll{overflow-x:auto; margin:0 -4px; padding:0 4px}

/* donut */
.donut-wrap{display:flex; align-items:center; gap:24px; flex-wrap:wrap}
.donut{position:relative; width:150px; height:150px; flex-shrink:0}
.donut svg{transform:rotate(-90deg); width:100%; height:100%}
.donut circle{fill:none; stroke-width:15; stroke-linecap:round;
  stroke-dasharray:0 999; transition:stroke-dasharray 1.4s var(--ease)}
.in .donut circle{stroke-dasharray:var(--d)}
.donut-c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.donut-c b{font-size:1.4rem; font-weight:800; letter-spacing:-.03em; line-height:1}
.donut-c span{font-size:.66rem; color:var(--text-faint); margin-top:4px}
.dleg{display:flex; flex-direction:column; gap:10px; min-width:170px; flex:1}
.dleg div{display:flex; align-items:center; gap:10px; font-size:.82rem; color:var(--text-muted)}
.dleg i{width:10px; height:10px; border-radius:3px; flex-shrink:0}
.dleg b{margin-left:auto; color:#fff; font-weight:700}

/* medidor / gauge */
.gauge{position:relative; width:100%; max-width:230px; margin:0 auto}
.gauge svg{width:100%; height:auto; filter:drop-shadow(0 0 12px rgba(34,180,85,.28))}
.gauge.mid svg{filter:drop-shadow(0 0 12px rgba(251,188,5,.28))}
/* arco semicircular de raio 80 → comprimento ≈ 252 */
.gauge .gtrack{fill:none; stroke:rgba(255,255,255,.07); stroke-width:16; stroke-linecap:round}
.gauge .gfill{fill:none; stroke:var(--green); stroke-width:16; stroke-linecap:round;
  stroke-dasharray:252 400; stroke-dashoffset:252; transition:stroke-dashoffset 1.6s var(--ease) .2s}
.gauge.mid .gfill{stroke:var(--yellow)}
.in .gauge .gfill{stroke-dashoffset:var(--o,25)}
.gauge-min,.gauge-max{position:absolute; bottom:0; font-size:.62rem; font-weight:700; color:var(--text-faint)}
.gauge-min{left:2px}
.gauge-max{right:2px}
.gauge-c{position:absolute; left:0; right:0; bottom:2px; text-align:center}
.gauge-c b{display:block; font-size:2.2rem; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--green)}
.gauge.mid .gauge-c b{color:var(--yellow)}
.gauge-c span{font-size:.72rem; color:var(--text-faint); display:block; margin-top:4px}

/* relatório de velocidade — card com cabeçalho + medidores */
.psi{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden}
.psi-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 22px; background:var(--surface-2); border-bottom:1px solid var(--border)}
.psi-brand{display:flex; align-items:center; gap:9px; font-size:.86rem; font-weight:700; letter-spacing:-.01em}
.psi-brand svg{width:16px; height:16px; color:var(--yellow); flex-shrink:0}
.psi-tag{font-size:.72rem; color:var(--text-faint); font-weight:600; white-space:nowrap}
.psi .gauges{padding:30px 22px 26px}
.gmetrics{display:flex; justify-content:center; gap:16px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border)}
.gmetrics span{display:flex; flex-direction:column; align-items:center; gap:2px; font-size:.64rem; color:var(--text-faint); font-weight:600}
.gmetrics span b{font-size:.86rem; font-weight:800; color:#fff; letter-spacing:-.02em}
@media (max-width:560px){.psi-top{flex-wrap:wrap} .psi .gauges{padding:26px 16px 22px}}

.dash-note{font-size:.72rem; color:var(--text-faint); text-align:center; margin-top:18px; display:flex; align-items:center; justify-content:center; gap:7px}
.dash-note svg{width:13px; height:13px; flex-shrink:0}

/* aviso de leitura — explica em linguagem simples algo que precisa de contexto extra */
.read-tip{
  display:flex; align-items:flex-start; gap:12px; max-width:760px; margin:0 auto 44px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:16px 20px;
}
.read-tip svg{width:18px; height:18px; color:var(--red); flex-shrink:0; margin-top:2px}
.read-tip p{font-size:.85rem; color:var(--text-muted); line-height:1.6; margin:0}
.read-tip p b{color:#fff; font-weight:700}

/* =========================================================
   MOCKUPS
   ========================================================= */
/* navegador */
.browser{
  border-radius:14px; overflow:hidden; border:1px solid var(--border);
  background:var(--surface); box-shadow:0 40px 80px -40px rgba(0,0,0,.95);
}
.br-bar{display:flex; align-items:center; gap:11px; padding:11px 14px; background:var(--surface-2); border-bottom:1px solid var(--border)}
.br-url{
  flex:1; display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.35); border-radius:99px;
  padding:6px 13px; font-size:.7rem; color:var(--text-faint); min-width:0;
}
.br-url svg{width:11px; height:11px; color:var(--green); flex-shrink:0}
.br-url span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.br-view{background:#F4F4F6; min-height:300px; position:relative; overflow:hidden}

/* celular */
.phone{
  position:relative; width:250px; max-width:78vw; flex-shrink:0; margin:0 auto;
  border-radius:38px; padding:9px; background:linear-gradient(160deg,#3A3A42,#131318 42%,#26262E);
  box-shadow:0 40px 80px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.08);
}
.screen{background:#0B0B0D; border-radius:30px; overflow:hidden; position:relative; min-height:430px; display:flex; flex-direction:column}
.island{position:absolute; top:9px; left:50%; transform:translateX(-50%); z-index:5; width:66px; height:19px; background:#000; border-radius:99px}
.sbar{display:flex; justify-content:space-between; align-items:center; padding:13px 16px 8px; font-size:.55rem; color:#fff; font-weight:600}
.sbar-r{display:flex; gap:3px; align-items:center}
.sbar-r svg{width:10px; height:10px; color:#fff}

/* chat WhatsApp */
.wa-top{display:flex; align-items:center; gap:9px; padding:9px 12px; background:#1F2C33}
.wa-av{width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#25D366,#128C7E); flex-shrink:0; display:flex; align-items:center; justify-content:center}
.wa-av svg{width:15px; height:15px; color:#fff}
.wa-nm{font-size:.68rem; font-weight:600; color:#fff; line-height:1.25}
.wa-st{font-size:.55rem; color:#8FA3AD}
.wa-body{flex:1; padding:14px 11px; display:flex; flex-direction:column; gap:9px; background:#0B141A; position:relative}
.wa-body::before{
  content:''; position:absolute; inset:0; opacity:.045; pointer-events:none;
  background-image:radial-gradient(circle at 20% 30%, #fff 1px, transparent 1px), radial-gradient(circle at 70% 60%, #fff 1px, transparent 1px);
  background-size:26px 26px;
}
.msg{
  max-width:83%; padding:8px 11px; border-radius:9px; font-size:.62rem; line-height:1.45; position:relative; z-index:1;
  opacity:0; transform:translateY(8px); animation:msgIn .45s var(--ease) forwards;
}
.msg.them{align-self:flex-start; background:#1F2C33; color:#E7EBEE; border-top-left-radius:2px}
.msg.me{align-self:flex-end; background:#005C4B; color:#E7FFDB; border-top-right-radius:2px}
.msg time{display:block; font-size:.48rem; opacity:.55; text-align:right; margin-top:3px; font-style:normal}
.msg.bot::after{
  content:'automático'; position:absolute; top:-7px; right:8px; font-size:.42rem; letter-spacing:.08em; text-transform:uppercase;
  background:var(--red); color:#fff; padding:2px 6px; border-radius:99px; font-weight:700;
}
@keyframes msgIn{to{opacity:1; transform:none}}
.msg:nth-child(1){animation-delay:.2s} .msg:nth-child(2){animation-delay:.9s}
.msg:nth-child(3){animation-delay:1.5s} .msg:nth-child(4){animation-delay:2.2s}
.msg:nth-child(5){animation-delay:2.9s} .msg:nth-child(6){animation-delay:3.6s}
.wa-in{display:flex; align-items:center; gap:8px; padding:9px 11px; background:#1F2C33}
.wa-in span{flex:1; background:#2A3942; border-radius:99px; padding:7px 12px; font-size:.58rem; color:#6E8794}
.wa-in i{width:26px; height:26px; border-radius:50%; background:#00A884; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.wa-in svg{width:13px; height:13px; color:#fff}

/* =========================================================
   FLUXO / NÓS (automações e IA)
   ========================================================= */
.flow-track{
  display:grid; grid-template-columns:1fr auto 1fr; gap:26px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px 30px;
}
@media (max-width:940px){.flow-track{grid-template-columns:1fr; gap:22px; padding:26px 20px}}
.flow-col{display:flex; flex-direction:column; gap:10px}
.flow-lbl{font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--text-faint); margin-bottom:4px}
.fnode{
  display:flex; align-items:center; gap:11px; padding:12px 15px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--border); position:relative;
  animation:fnodePulse 3.3s ease-in-out infinite;
}
.fnode svg{width:17px; height:17px; flex-shrink:0}
.fnode span{font-size:.82rem; color:var(--text-muted); font-weight:500}
.fnode.out{border-color:rgba(232,38,47,.3); background:rgba(232,38,47,.07)}
.fnode.out span{color:#F0DADA}
/* pulso sequencial: dado "entra" nos 3 cartões da esquerda e "sai" nos 3 da direita,
   no mesmo ritmo dos fios animados — reforça a sensação de automação acontecendo agora */
.flow-col:first-child .fnode:nth-child(2){animation-delay:.5s}
.flow-col:first-child .fnode:nth-child(3){animation-delay:1s}
.flow-col:last-child .fnode:nth-child(2){animation-delay:2.15s}
.flow-col:last-child .fnode:nth-child(3){animation-delay:2.65s}
.flow-col:last-child .fnode:nth-child(1){animation-delay:1.65s}
@keyframes fnodePulse{
  0%,82%,100%{box-shadow:none; border-color:var(--border)}
  8%{box-shadow:0 0 0 1px rgba(232,38,47,.3), 0 10px 22px -12px rgba(232,38,47,.65); border-color:rgba(232,38,47,.55)}
}
.fnode.out{animation-name:fnodePulseOut}
@keyframes fnodePulseOut{
  0%,82%,100%{box-shadow:none; border-color:rgba(232,38,47,.3)}
  8%{box-shadow:0 0 0 1px rgba(232,38,47,.45), 0 10px 22px -10px rgba(232,38,47,.75); border-color:var(--red)}
}
.flow-core{display:flex; flex-direction:column; align-items:center; gap:12px; padding:0 6px}
.core{
  width:96px; height:96px; border-radius:26px; position:relative;
  background:linear-gradient(150deg,#1E1E26,#0E0E12); border:1px solid rgba(232,38,47,.4);
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 40px -8px rgba(232,38,47,.6);
}
.core::before{content:''; position:absolute; inset:-6px; border-radius:32px; border:1px solid rgba(232,38,47,.28); animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{transform:scale(.94); opacity:.9}100%{transform:scale(1.18); opacity:0}}
.core svg{width:42px; height:42px; color:var(--red); animation:corePulse 2.6s ease-in-out infinite}
@keyframes corePulse{0%,100%{opacity:.85; transform:scale(1)}50%{opacity:1; transform:scale(1.07)}}
.core-lbl{font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--red); text-align:center; line-height:1.35}
.wires{display:flex; flex-direction:column; gap:5px; width:100%; padding:0 2px}
.wire{height:2px; border-radius:2px; background:rgba(255,255,255,.07); overflow:hidden; position:relative}
.wire::after{content:''; position:absolute; inset:0; width:34%; background:linear-gradient(90deg, transparent, var(--red), transparent); animation:dataFlow 2.2s linear infinite}
.wire:nth-child(2)::after{animation-delay:.5s}
.wire:nth-child(3)::after{animation-delay:1s}
@keyframes dataFlow{from{transform:translateX(-100%)}to{transform:translateX(390%)}}
@media (max-width:940px){
  .wires{flex-direction:row; height:38px; align-items:center}
  .wire{width:2px; height:100%; flex:none}
  .wire::after{width:100%; height:34%; background:linear-gradient(180deg, transparent, var(--red), transparent); animation-name:dataFlowV}
  @keyframes dataFlowV{from{transform:translateY(-100%)}to{transform:translateY(390%)}}
}

/* =========================================================
   ANTES x DEPOIS
   ========================================================= */
.ba{display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:stretch; max-width:1000px; margin:0 auto}
@media (max-width:880px){.ba{grid-template-columns:1fr; gap:16px}}
.ba-col{border-radius:var(--r-lg); padding:30px 26px; border:1px solid var(--border)}
.ba-col.bad{background:var(--surface)}
.ba-col.good{background:linear-gradient(165deg, rgba(232,38,47,.12), var(--surface) 62%); border-color:rgba(232,38,47,.36); box-shadow:0 24px 60px -30px rgba(232,38,47,.55)}
.ba-hd{display:flex; align-items:center; gap:10px; margin-bottom:20px; padding-bottom:15px; border-bottom:1px solid var(--border)}
.ba-hd svg{width:20px; height:20px; flex-shrink:0}
.ba-hd b{font-size:1rem; font-weight:700; letter-spacing:-0.02em}
.ba-col.bad .ba-hd b{color:var(--text-faint)}
.ba-col.bad .ba-hd svg{color:#55555F}
.ba-col.good .ba-hd b{color:#fff}
.ba-col.good .ba-hd svg{color:var(--red)}
.ba-list{display:flex; flex-direction:column; gap:14px; list-style:none}
.ba-list li{display:flex; gap:11px; align-items:flex-start; font-size:.9rem; line-height:1.5}
.ba-list svg{width:17px; height:17px; flex-shrink:0; margin-top:2px}
.ba-col.bad .ba-list li{color:var(--text-faint)}
.ba-col.bad .ba-list svg{color:#4A4A55}
.ba-col.good .ba-list li{color:#EFE4E4}
.ba-col.good .ba-list svg{color:var(--red)}
.ba-col.good .ba-list b{color:#fff}
.ba-arrow{display:flex; align-items:center; justify-content:center; color:var(--red)}
.ba-arrow svg{width:32px; height:32px; animation:baPush 2.4s ease-in-out infinite}
@keyframes baPush{0%,100%{transform:translateX(0); opacity:.65}50%{transform:translateX(7px); opacity:1}}
@media (max-width:880px){.ba-arrow svg{transform:rotate(90deg); width:26px; height:26px; animation:none}}

/* =========================================================
   FAQ
   ========================================================= */
.faq{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:11px}
.faq-i{border:1px solid var(--light-border); border-radius:var(--r-md); background:#fff; overflow:hidden; transition:border-color 220ms var(--ease)}
.faq-i[open]{border-color:#D2D2D8; box-shadow:0 12px 30px -18px rgba(0,0,0,.18)}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 22px; background:none; border:none; text-align:left;
  font-weight:600; font-size:.97rem; color:var(--text-d); font-family:inherit; letter-spacing:-0.01em; list-style:none; cursor:pointer;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q svg{width:19px; height:19px; flex-shrink:0; color:var(--red); transition:transform 250ms var(--ease)}
.faq-i[open] .faq-q svg{transform:rotate(45deg)}
.faq-a{padding:0 22px 20px; font-size:.9rem; color:var(--text-d-muted); line-height:1.65}

/* =========================================================
   CTA + OUTROS SERVIÇOS + FOOTER
   ========================================================= */
.ctabox{
  background:#09090B; border-radius:var(--r-lg); padding:52px 46px; position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;
}
@media (max-width:860px){.ctabox{grid-template-columns:1fr; gap:26px; padding:38px 26px}}
.ctabox h2{color:#fff; margin-top:12px; max-width:16ch}
.ctabox .p{color:#A8A8B2; margin-bottom:24px}
.cta-waves{position:absolute; right:-40px; top:0; bottom:0; width:44%; pointer-events:none; opacity:.75}
.cta-in{position:relative; z-index:1; min-width:0}
/* CTAs com texto mais longo não podem estourar a coluna — melhor quebrar
   em duas linhas do que vazar para fora do card */
.ctabox .btn{white-space:normal; max-width:100%; text-align:center}

.others{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:900px){.others{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.others{grid-template-columns:1fr}}
.ocard{
  display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--border); transition:all 240ms var(--ease);
}
.ocard:hover{border-color:rgba(232,38,47,.35); background:var(--surface-2); transform:translateY(-3px)}
.ocard-i{width:38px; height:38px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 240ms var(--ease)}
.ocard:hover .ocard-i{background:var(--red); border-color:var(--red)}
.ocard:hover .ocard-i svg{color:#fff}
.ocard-i svg{width:18px; height:18px; color:var(--red)}
.ocard b{display:block; font-size:.92rem; font-weight:600; letter-spacing:-.01em}
.ocard span{font-size:.76rem; color:var(--text-faint)}
.ocard .go{margin-left:auto; width:16px; height:16px; color:var(--text-faint); flex-shrink:0; transition:transform 240ms var(--ease), color 240ms var(--ease)}
.ocard:hover .go{color:var(--red); transform:translateX(3px)}

footer{background:var(--bg-2); border-top:1px solid var(--border); padding:56px 0 0}
.fgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; padding-bottom:42px}
@media (max-width:768px){.fgrid{grid-template-columns:1fr 1fr; row-gap:32px}}
@media (max-width:480px){.fgrid{grid-template-columns:1fr}}
.fbrand .logo{margin-bottom:15px}
.fbrand p{color:var(--text-muted); font-size:.87rem; line-height:1.65; max-width:31ch}
.fcol h4{font-size:.76rem; font-weight:700; text-transform:uppercase; color:#fff; margin-bottom:16px; letter-spacing:.09em}
.fcol ul{list-style:none; display:flex; flex-direction:column; gap:11px}
.fcol a{font-size:.88rem; color:var(--text-muted); transition:color 180ms var(--ease)}
.fcol a:hover{color:#fff}
.fflags{display:flex; flex-direction:column; gap:11px}
.fflags div{display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--text-muted)}
.fbot{border-top:1px solid var(--border); padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.fbot p{font-size:.82rem; color:var(--text-faint)}
.fsoc{display:flex; gap:10px}
.fsoc a{width:34px; height:34px; border-radius:50%; background:var(--surface); border:1px solid var(--border-2); display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:all 200ms var(--ease)}
.fsoc a:hover{color:#fff; border-color:var(--red); background:var(--red); transform:translateY(-2px)}
.fsoc svg{width:15px; height:15px}

.fl{width:32px; height:23px; border-radius:3px; flex-shrink:0; position:relative; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.5)}
.fl-br{background:#009C3B}
.fl-br::before{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:23px; height:16px; background:#FFDF00; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.fl-br::after{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:#002776}
.fl-pt{background:#DA291C}
.fl-pt::before{content:''; position:absolute; left:0; top:0; width:40%; height:100%; background:#046A38}
.fl-pt::after{content:''; position:absolute; left:40%; top:50%; transform:translate(-50%,-50%); width:10px; height:10px; border-radius:50%; background:#FFE900; border:1.6px solid #DA291C}
.fl-us{background:repeating-linear-gradient(#B22234 0 2.3px, #fff 2.3px 4.6px)}
.fl-us::before{content:''; position:absolute; top:0; left:0; width:13px; height:12px; background:#3C3B6E}
.fl-sm{width:24px; height:17px}

@media (prefers-reduced-motion: reduce){
  .wire::after,.core::before,.core svg,.dash-live i,.ba-arrow svg,.msg,.fnode{animation:none}
  .msg{opacity:1; transform:none}
}