/* =========================================================
   AVANC — Gestão de Tráfego
   ========================================================= */

/* ---------- Painel ilustrativo no hero ---------- */
.dash-stage{ position:relative; width:100%; max-width:560px; margin:0 auto; padding:34px 22px; }
.mock-glow{
  position:absolute; inset:6% 4%; border-radius:50%;
  background:radial-gradient(circle, rgba(123,44,191,0.55), transparent 68%); filter:blur(34px);
  animation:orbDrift 10s ease-in-out infinite alternate;
}
.dash{ position:relative; z-index:2; padding:22px 24px 20px; animation:floaty 8s ease-in-out infinite; }
.dash-top{ display:flex; align-items:center; gap:7px; margin-bottom:18px; }
.dash-top .d{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.22); }
.dash-top .d:first-child{ background:#a25bdb; }
.dash-top em{ margin-left:8px; font-size:11.5px; font-style:normal; color:var(--ink-faint); letter-spacing:.02em; }
.dash-kpis{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:14px; }
.dk{ position:relative; padding:12px 12px 10px; border-radius:14px; background:rgba(255,255,255,0.05); border:1px solid var(--hairline); }
.dk span{ display:block; font-size:11px; color:var(--ink-soft); margin-bottom:6px; }
.dk i{ position:absolute; top:10px; right:10px; width:18px; height:18px; display:flex; }
.dk i svg{ width:100%; height:100%; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.dk i.up svg{ stroke:#7ee2a8; }
.dk i.down svg{ stroke:#7ee2a8; transform:rotate(90deg); }
.mini{ display:flex; align-items:flex-end; gap:4px; height:38px; }
.mini u{ flex:1; height:var(--h); border-radius:3px 3px 1px 1px; background:linear-gradient(180deg, var(--purple-light), rgba(123,44,191,0.4)); transform-origin:bottom; animation:barUp 1.2s var(--ease) both; }
.mini u:nth-child(2){ animation-delay:.08s; } .mini u:nth-child(3){ animation-delay:.16s; } .mini u:nth-child(4){ animation-delay:.24s; } .mini u:nth-child(5){ animation-delay:.32s; } .mini u:nth-child(6){ animation-delay:.4s; }
@keyframes barUp{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.dash .line-chart{ padding:6px 2px 0; }
.dash-legend{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-soft); margin-top:12px; }
.lg{ width:18px; height:3px; border-radius:3px; display:inline-block; margin-left:8px; }
.lg:first-child{ margin-left:0; }
.lg.a{ background:var(--purple-light); }
.lg.b{ background:rgba(229,229,229,0.55); }
.plat{
  position:absolute; z-index:3; width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:rgba(20,18,26,0.78); border:1px solid var(--hairline-strong); color:var(--c);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 18px 30px -14px rgba(0,0,0,0.7);
  animation:floaty 6s ease-in-out infinite;
}
.plat svg{ width:26px; height:26px; }
.plat.p1{ left:-4px; top:6%; animation-delay:-1s; }
.plat.p2{ right:-4px; top:2%; animation-delay:-2.5s; }
.plat.p3{ right:-8px; top:46%; animation-delay:-4s; }
.plat.p4{ left:-8px; bottom:22%; animation-delay:-3s; }
.plat.p5{ right:14%; bottom:-2%; animation-delay:-5s; }
@media (max-width:520px){ .dash-stage{ padding:24px 10px; } .plat{ width:44px; height:44px; border-radius:13px; } .plat svg{ width:21px; height:21px; } .dk span{ font-size:10px; } }

/* ---------- Meta vs Google ---------- */
.intent{ padding:30px 34px 26px; margin-bottom:24px; }
.intent-bar{
  position:relative; height:12px; border-radius:99px; margin:34px 0 14px;
  background:linear-gradient(90deg, rgba(4,103,223,0.65), rgba(162,91,219,0.65) 50%, rgba(66,133,244,0.65));
}
.mk{ position:absolute; top:50%; width:26px; height:26px; border-radius:50%; background:var(--paper); border:4px solid var(--purple); transform:translate(-50%,-50%) scale(0); transition:transform 1s var(--ease) .5s, left 1.6s var(--ease) .5s; left:50%; box-shadow:0 0 0 8px rgba(162,91,219,0.2); }
.mk b{ position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%); font-size:12.5px; color:var(--paper); white-space:nowrap; letter-spacing:.02em; }
.intent.in .mk{ transform:translate(-50%,-50%) scale(1); }
.intent.in .mk.m1{ left:24%; }
.intent.in .mk.m2{ left:80%; transition-delay:.7s; }
.intent-lab{ display:flex; justify-content:space-between; gap:20px; font-size:12px; color:var(--ink-faint); }
@media (max-width:620px){ .intent-lab{ flex-direction:column; gap:6px; } .intent-lab span:last-child{ text-align:right; } }

.plat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:900px){ .plat-grid{ grid-template-columns:1fr; } }
.plat-card{ padding:34px 32px; transition:transform .5s var(--ease), border-color .5s var(--ease), opacity .85s var(--ease); }
.plat-card:hover{ transform:translateY(-8px); border-color:var(--c); }
.plat-card > *{ position:relative; z-index:1; }
.pc-head{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.pc-ico{
  width:60px; height:60px; border-radius:18px; display:flex; align-items:center; justify-content:center; color:var(--c);
  background:rgba(255,255,255,0.06); border:1px solid var(--hairline-strong); transition:transform .6s var(--ease);
}
.plat-card:hover .pc-ico{ transform:rotate(-6deg) scale(1.08); }
.pc-ico svg{ width:32px; height:32px; }
.pc-kicker{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c); filter:brightness(1.3); }
.pc-head h3{ font-family:'Fraunces', serif; font-weight:500; font-size:1.6rem; color:var(--paper); }
.plat-card > p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:22px; }
.pc-cols{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:520px){ .pc-cols{ grid-template-columns:1fr; } }
.pc-cols h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
.pc-cols ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; }
.pc-cols li{ font-size:13.5px; color:var(--mist); padding-left:20px; position:relative; line-height:1.45; }
.pc-cols li::before{ content:''; position:absolute; left:0; top:.55em; width:10px; height:1px; background:var(--c); filter:brightness(1.4); }

/* ---------- Funil ---------- */
.funnel-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
@media (max-width:900px){ .funnel-wrap{ grid-template-columns:1fr; gap:40px; } }
.fn-list{ list-style:none; padding:0; display:flex; flex-direction:column; gap:14px; }
.fn-list li{ display:flex; gap:16px; align-items:flex-start; }
.fn-list .icon-tile{ margin:0; flex:none; }
.fn-list h4{ font-size:1rem; color:var(--paper); margin-bottom:3px; }
.fn-list p{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
.funnel-vis{ padding:30px 28px 24px; display:flex; flex-direction:column; gap:10px; align-items:center; }
.fv-stage{ width:100%; display:flex; justify-content:center; }
.fv-bar{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; height:68px; width:0; border-radius:14px; overflow:hidden; white-space:nowrap;
  background:linear-gradient(90deg, var(--purple), var(--purple-light)); transition:width 1.4s var(--ease); transition-delay:calc(.2s + var(--k) * .18s);
  opacity:calc(1 - var(--k) * .0);
}
.funnel-vis.in .fv-bar{ width:var(--w); }
.fv-stage:nth-child(2) .fv-bar{ filter:brightness(.95); } .fv-stage:nth-child(3) .fv-bar{ filter:brightness(1.06); } .fv-stage:nth-child(4) .fv-bar{ background:linear-gradient(90deg, #e9d6ff, #cfa4ff); }
.fv-stage:nth-child(4) .fv-bar b, .fv-stage:nth-child(4) .fv-bar em{ color:#2a0f46; }
.fv-bar b{ font-family:'Fraunces', serif; font-weight:500; font-size:1.05rem; color:#fff; }
.fv-bar em{ font-style:normal; font-size:11.5px; color:rgba(255,255,255,0.78); }
@media (max-width:520px){ .fv-bar b{ font-size:.92rem; } .fv-bar em{ display:none; } .fv-bar{ height:54px; } }

/* ---------- Processo ---------- */
.tsteps{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (max-width:980px){ .tsteps{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .tsteps{ grid-template-columns:1fr; } }
.tstep{ position:relative; padding:28px 24px 26px; transition:transform .45s var(--ease), border-color .45s var(--ease), opacity .85s var(--ease); }
.tstep:hover{ transform:translateY(-6px); border-color:rgba(162,91,219,0.5); }
.tstep:hover .icon-tile{ transform:rotate(-6deg) scale(1.08); background:rgba(162,91,219,0.2); }
.ts-n{ position:absolute; top:22px; right:24px; font-family:'Fraunces', serif; font-size:1.6rem; color:var(--ink-faint); }
.tstep h4{ font-size:1.02rem; color:var(--paper); margin-bottom:8px; }
.tstep p{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.ph{ display:inline-block; margin-top:16px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--purple-light); padding:5px 11px; border-radius:999px; border:1px solid rgba(162,91,219,0.4); }
.loop-note{ display:flex; align-items:center; gap:12px; margin-top:26px; color:var(--ink-soft); font-size:14px; }
.loop-note svg{ width:20px; height:20px; stroke:var(--purple-light); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; animation:spin 6s linear infinite; flex:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Indicadores ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (max-width:900px){ .kpi-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .kpi-grid{ grid-template-columns:1fr; } }
.kp{ padding:26px 26px; transition:transform .45s var(--ease), border-color .45s var(--ease), opacity .85s var(--ease); }
.kp:hover{ transform:translateY(-5px); border-color:rgba(162,91,219,0.5); }
.kp b{ display:block; font-family:'Fraunces', serif; font-weight:500; font-size:2.2rem; line-height:1; color:var(--purple-light); margin-bottom:12px; letter-spacing:.02em; }
.kp h4{ font-size:1rem; color:var(--paper); margin-bottom:6px; }
.kp p{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; }

/* ---------- Entregas ---------- */
.deliver-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; position:relative; z-index:1; }
@media (max-width:900px){ .deliver-grid{ grid-template-columns:1fr; gap:34px; } }
.checks{ list-style:none; padding:0; display:flex; flex-direction:column; gap:12px; }
.checks li{ display:flex; gap:14px; align-items:flex-start; font-size:14.5px; color:var(--mist); padding:14px 18px; border-radius:var(--radius-md); background:rgba(255,255,255,0.04); border:1px solid var(--hairline); }
.checks li svg{ flex:none; width:20px; height:20px; margin-top:2px; stroke:var(--purple-light); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; }
.checks li.in svg{ animation:draw .8s var(--ease) .3s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }