/* ============================================================
   crm.gratis — Design System
   KVOIP Telecomunicações · CRM completo grátis
   Paleta: índigo profundo + violeta + esmeralda
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* base */
  --tinta:#12103a;
  --tinta-2:#1c1950;
  --indigo:#4338ca;
  --indigo-2:#6366f1;
  --violeta:#7c3aed;
  --esmeralda:#059669;
  --esmeralda-2:#10b981;
  --menta:#34d399;
  --wpp:#25d366;
  --ambar:#f59e0b;

  /* neutros */
  --papel:#ffffff;
  --areia:#f6f6fb;
  --areia-2:#eeeef8;
  --borda:#e4e4f2;
  --texto:#1b1a33;
  --muted:#5f5d80;
  --muted-2:#8a88a8;

  /* forma */
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-pill:999px;
  --sombra-1:0 1px 2px rgba(18,16,58,.05),0 4px 18px rgba(18,16,58,.06);
  --sombra-2:0 12px 44px rgba(18,16,58,.14);
  --sombra-3:0 24px 70px rgba(18,16,58,.2);
  --maxw:1180px;
  --fonte:"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fonte-t:"Poppins","Inter","Segoe UI",Roboto,Arial,sans-serif;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--fonte);
  background:var(--papel);
  color:var(--texto);
  line-height:1.65;
  font-size:16px;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:var(--fonte-t);line-height:1.18;font-weight:700;letter-spacing:-.015em}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
strong{font-weight:700}
em{font-style:normal}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── FAIXA DE CONTATO ─────────────────────────────────────── */
.faixa-contato{
  background:var(--tinta);
  color:rgba(255,255,255,.72);
  font-size:13.5px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.faixa-contato .wrap{
  display:flex;align-items:center;justify-content:center;
  gap:10px 22px;flex-wrap:wrap;text-align:center;
}
.faixa-contato a{
  color:#c7d2fe;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;
  transition:color .18s;
}
.faixa-contato a:hover{color:#fff}
.faixa-contato svg{flex-shrink:0}
.divisor-v{width:1px;height:14px;background:rgba(255,255,255,.18)}

/* ── FAIXA DE OFERTA ──────────────────────────────────────── */
.faixa-oferta{
  background:linear-gradient(100deg,var(--esmeralda) 0%,var(--esmeralda-2) 55%,#14b8a6 100%);
  color:#fff;text-align:center;
  font-size:14px;font-weight:600;
  padding:11px 0;
}
.faixa-oferta .wrap{display:flex;align-items:center;justify-content:center;gap:8px 16px;flex-wrap:wrap}
.faixa-oferta .selo{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-pill);
  padding:3px 13px;font-size:12.5px;font-weight:600;
}

/* ── CABEÇALHO ────────────────────────────────────────────── */
.topo{
  background:rgba(18,16,58,.96);
  backdrop-filter:saturate(160%) blur(10px);
  position:sticky;top:0;z-index:120;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topo .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;min-height:70px;
}
.marca{display:flex;align-items:center;gap:11px;flex-shrink:0}
.marca img.logo-kvoip{height:30px;width:auto}
.marca img.logo-woulz{height:21px;width:auto}
.logo-div{width:1px;height:24px;background:rgba(255,255,255,.2);flex-shrink:0}
.marca-nome{
  display:flex;flex-direction:column;line-height:1.1;
}
.marca-nome b{font-family:var(--fonte-t);font-size:17px;color:#fff;font-weight:700;letter-spacing:-.02em}
.marca-nome span{font-size:10.5px;color:#a5b4fc;letter-spacing:.08em;text-transform:uppercase;font-weight:600}

.menu{display:flex;align-items:center;gap:22px;font-size:14.5px;font-weight:600}
/* só os links de primeiro nível — o submenu tem fundo branco e regras próprias */
.menu>a{color:rgba(255,255,255,.82);transition:color .18s;position:relative;padding:6px 0;white-space:nowrap}
.menu>a:hover,.menu>a[aria-current="page"]{color:#fff}
.menu>a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--indigo-2),var(--menta));border-radius:2px;
}
.menu-drop{position:relative}
.menu-drop>button{
  background:none;border:0;color:rgba(255,255,255,.82);
  font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:6px;padding:6px 0;
}
.menu-drop>button:hover{color:#fff}
.menu-drop svg{transition:transform .2s}
.menu-drop:hover svg,.menu-drop.aberto svg{transform:rotate(180deg)}
.menu-lista{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:258px;background:#fff;border-radius:var(--r);
  box-shadow:var(--sombra-3);padding:8px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transition:all .18s;z-index:150;
}
.menu-drop:hover .menu-lista,.menu-drop:focus-within .menu-lista,.menu-drop.aberto .menu-lista{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.menu .menu-lista a{
  color:var(--tinta);font-size:13.5px;font-weight:600;
  padding:10px 12px;border-radius:var(--r-sm);
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  transition:background .18s,color .18s;
}
.menu .menu-lista a:hover,
.menu .menu-lista a:focus-visible{background:var(--areia);color:var(--indigo)}
.menu .menu-lista a[aria-current="page"]{background:rgba(99,102,241,.1);color:var(--indigo)}
.menu-lista .ico{font-size:15px;width:20px;text-align:center}

.topo-acoes{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* ── MENU MOBILE (rolagem horizontal) ─────────────────────── */
.menu-mob{display:none}
.menu-mob a{
  flex:0 0 auto;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);
  padding:7px 14px;font-size:13px;font-weight:600;color:rgba(255,255,255,.85);
  white-space:nowrap;
}
.menu-mob a[aria-current="page"]{background:rgba(99,102,241,.35);border-color:rgba(165,180,252,.5);color:#fff}

/* ── BOTÕES ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--fonte);font-size:14.5px;font-weight:700;
  padding:13px 24px;border-radius:var(--r-pill);
  border:0;cursor:pointer;white-space:nowrap;
  transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;
}
.btn:hover{transform:translateY(-2px)}
/* verde um pouco mais fechado: texto branco precisa de contraste legível */
.btn-p{background:linear-gradient(135deg,#0da271,#047857);color:#fff;box-shadow:0 6px 22px rgba(5,150,105,.34)}
.btn-p:hover{box-shadow:0 10px 30px rgba(5,150,105,.45)}
.btn-i{background:linear-gradient(135deg,var(--indigo-2),var(--indigo));color:#fff;box-shadow:0 6px 22px rgba(67,56,202,.32)}
.btn-i:hover{box-shadow:0 10px 30px rgba(67,56,202,.42)}
.btn-w{background:var(--wpp);color:#fff;box-shadow:0 6px 22px rgba(37,211,102,.32)}
.btn-w:hover{box-shadow:0 10px 30px rgba(37,211,102,.44)}
.btn-fantasma{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.26);color:#fff}
.btn-fantasma:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
.btn-linha{background:#fff;border:1.6px solid var(--borda);color:var(--tinta)}
.btn-linha:hover{border-color:var(--indigo-2);color:var(--indigo)}
.btn-sm{padding:9px 18px;font-size:13px}
.btn-lg{padding:16px 32px;font-size:16px}
.btn-bloco{width:100%}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(1100px 600px at 85% -10%,rgba(124,58,237,.55),transparent 62%),
    radial-gradient(900px 520px at 5% 110%,rgba(16,185,129,.32),transparent 60%),
    linear-gradient(165deg,#12103a 0%,#1c1950 55%,#241f63 100%);
  padding:78px 0 84px;
}
.hero::before{
  content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 25%,transparent 78%);
}
.hero .wrap{position:relative;z-index:2}
.hero-grade{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-solo{max-width:820px}

.pilula{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-pill);padding:6px 15px;
  font-size:12.5px;font-weight:600;color:#c7d2fe;margin-bottom:20px;
}
.pisca{width:7px;height:7px;border-radius:50%;background:var(--menta);animation:pisca 2.1s ease-in-out infinite}
@keyframes pisca{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.4)}}

.hero h1{font-size:clamp(31px,4.1vw,53px);margin-bottom:20px;color:#fff}
.hero h1 .destaque{
  background:linear-gradient(100deg,var(--menta),#5eead4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{font-size:17px;color:rgba(255,255,255,.76);line-height:1.72;margin-bottom:26px;max-width:620px}
.hero-acoes{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.hero-notas{display:flex;gap:9px;flex-wrap:wrap;font-size:12.5px}
.nota{
  display:inline-flex;align-items:center;gap:7px;
  border-radius:var(--r-pill);padding:7px 15px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  color:rgba(255,255,255,.78);
}
.nota-ok{background:rgba(52,211,153,.13);border-color:rgba(52,211,153,.3);color:#6ee7b7;font-weight:600}

/* preço em destaque dentro do hero */
.hero-preco{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-left:3px solid var(--menta);
  border-radius:var(--r);padding:16px 20px;margin-bottom:26px;max-width:560px;
}
.hero-preco .valor{display:flex;align-items:baseline;gap:4px;font-family:var(--fonte-t)}
.hero-preco .valor .cifra{font-size:16px;font-weight:700;color:#fff}
.hero-preco .valor .num{font-size:40px;font-weight:700;color:#fff;line-height:1}
.hero-preco .valor .per{font-size:13.5px;color:rgba(255,255,255,.6)}
.hero-preco .texto{font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.55;flex:1;min-width:190px}
.hero-preco .texto b{color:var(--menta)}

/* ── MOCKUP KANBAN (hero) ─────────────────────────────────── */
.mock{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);padding:18px;
  box-shadow:var(--sombra-3);backdrop-filter:blur(8px);
}
.mock-barra{display:flex;align-items:center;gap:7px;margin-bottom:16px}
.mock-ponto{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.mock-titulo{margin-left:8px;font-size:12px;color:rgba(255,255,255,.6);font-weight:600}
.mock-tag{
  margin-left:auto;font-size:10.5px;font-weight:700;color:#052e16;
  background:var(--menta);border-radius:var(--r-pill);padding:3px 10px;
}
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kanban-col{background:rgba(255,255,255,.05);border-radius:var(--r-sm);padding:10px 9px}
.kanban-col h4{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:rgba(255,255,255,.55);margin-bottom:9px;display:flex;justify-content:space-between;
  font-family:var(--fonte);font-weight:700;
}
.kanban-card{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);
  border-radius:9px;padding:9px 10px;margin-bottom:7px;
}
.kanban-card:last-child{margin-bottom:0}
.kanban-card .nome{font-size:11.5px;font-weight:600;color:#fff;margin-bottom:3px}
.kanban-card .val{font-size:11px;color:var(--menta);font-weight:700}
.kanban-card .canal{font-size:10px;color:rgba(255,255,255,.5);margin-top:3px;display:flex;align-items:center;gap:4px}
.faixa-menta{border-left:2px solid var(--menta)}
.faixa-indigo{border-left:2px solid var(--indigo-2)}
.faixa-ambar{border-left:2px solid var(--ambar)}
.mock-rodape{
  margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;color:rgba(255,255,255,.55);
}
.mock-rodape b{color:var(--menta)}

/* ── BARRA DE PROVAS ──────────────────────────────────────── */
.provas{background:var(--areia);border-bottom:1px solid var(--borda);padding:18px 0}
.provas .wrap{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.prova{
  background:#fff;border:1px solid var(--borda);border-radius:var(--r-pill);
  padding:8px 17px;font-size:13.5px;font-weight:600;color:var(--texto);
  display:inline-flex;align-items:center;gap:8px;box-shadow:var(--sombra-1);
}

/* ── DESTAQUE: LIGAÇÕES POR WHATSAPP NO PABX ──────────────── */
.destaque-wpp{
  position:relative;overflow:hidden;color:#fff;padding:66px 0 70px;
  background:
    radial-gradient(760px 420px at 12% 0%,rgba(37,211,102,.26),transparent 62%),
    radial-gradient(820px 460px at 92% 100%,rgba(20,184,166,.24),transparent 60%),
    linear-gradient(150deg,#07231d 0%,#0b3a2d 45%,#12103a 100%);
}
.destaque-wpp::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg,#000,transparent 85%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);
}
.destaque-wpp .wrap{position:relative;z-index:2}
.destaque-wpp .pilula{background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.34);color:#86efac}
.dw-titulo{
  font-size:clamp(25px,3.3vw,42px);color:#fff;max-width:960px;
  margin-bottom:16px;text-wrap:balance;
}
.dw-titulo em{
  font-style:normal;color:#4ade80;
  border-bottom:3px solid rgba(74,222,128,.35);padding-bottom:1px;
}
.dw-pabx{white-space:nowrap;color:#5eead4}
.dw-lead{font-size:16.5px;color:rgba(255,255,255,.78);line-height:1.72;max-width:700px;margin-bottom:36px}
.dw-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dw-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-top:2px solid rgba(74,222,128,.5);
  border-radius:var(--r);padding:22px 20px;
}
.dw-ico{font-size:24px;display:block;margin-bottom:10px}
.dw-card h3{font-size:17px;color:#fff;margin-bottom:7px}
.dw-card p{font-size:14px;color:rgba(255,255,255,.72);line-height:1.62}
.dw-acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ── BLOG ─────────────────────────────────────────────────── */
.post-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{
  background:#fff;border:1px solid var(--borda);border-radius:var(--r);
  padding:26px 24px;display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--sombra-2);border-color:rgba(99,102,241,.35)}
.post-meta{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--indigo);margin-bottom:12px;
}
.post-meta .tempo{color:var(--muted-2);font-weight:600;letter-spacing:.02em;text-transform:none;font-size:12px}
.post-card h3{font-size:18px;color:var(--tinta);margin-bottom:9px;line-height:1.3}
.post-card p{font-size:14.5px;color:var(--muted);line-height:1.66;flex:1}
.post-card .link-mais{margin-top:16px;font-size:13.5px;font-weight:700;color:var(--indigo);display:inline-flex;gap:6px}

/* filtros do índice do blog */
.blog-filtros{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:28px;justify-content:center;
}
.blog-busca{
  flex:1 1 260px;max-width:340px;position:relative;
}
.blog-busca input{
  width:100%;font:inherit;font-size:14.5px;color:var(--texto);
  background:#fff;border:1.6px solid var(--borda);border-radius:var(--r-pill);
  padding:11px 18px 11px 40px;transition:border-color .18s,box-shadow .18s;
}
.blog-busca input:focus{outline:none;border-color:var(--indigo-2);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.blog-busca svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted-2)}
.blog-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.blog-chip{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  background:#fff;border:1.5px solid var(--borda);border-radius:var(--r-pill);
  padding:9px 16px;color:var(--muted);transition:all .18s;
}
.blog-chip:hover{border-color:var(--indigo-2);color:var(--indigo)}
.blog-chip.ativo{background:var(--indigo);border-color:var(--indigo);color:#fff}
.blog-vazio{text-align:center;color:var(--muted);font-size:15.5px;padding:38px 0;display:none}
.blog-vazio.aparece{display:block}

.post-card-media{
  display:block;position:relative;margin:-26px -24px 16px;
  border-radius:var(--r) var(--r) 0 0;overflow:hidden;aspect-ratio:16/9;background:var(--areia-2);
}
.post-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.post-card-tipo{
  position:absolute;left:12px;bottom:12px;
  background:rgba(18,16,58,.86);color:#fff;font-size:11.5px;font-weight:700;
  border-radius:var(--r-pill);padding:4px 11px;backdrop-filter:blur(4px);
}

/* mídia dentro do artigo (posts criados em /publicar) */
.art-figure{margin:0 0 26px}
.art-figure img.art-cover{width:100%;border-radius:var(--r);border:1px solid var(--borda)}
.art-video{position:relative;padding-top:56.25%;border-radius:var(--r);overflow:hidden;background:#000}
.art-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.art-audio-block{background:var(--areia);border:1px solid var(--borda);border-radius:var(--r);padding:20px}
.art-audio-block audio{width:100%}
.art-caption{font-size:14.5px;color:var(--muted);line-height:1.65;margin-top:12px;border-left:3px solid var(--borda);padding-left:14px}
.art-caption p{font-size:14.5px;margin-bottom:8px}
.art-caption p:last-child{margin-bottom:0}
.art-transcript-toggle{
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;margin-top:16px;
  background:#fff;border:1.5px solid var(--borda);border-radius:var(--r-pill);
  padding:9px 17px;color:var(--indigo);
}
.art-transcript-toggle:hover{border-color:var(--indigo-2)}
.art-transcript{display:none;margin-top:16px;font-size:15.5px;color:var(--muted);line-height:1.72}
.art-transcript.aberta{display:block}
.art-transcript p{font-size:15.5px;margin-bottom:12px}
.art-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px;padding-top:22px;border-top:1px solid var(--borda)}
.art-tag{
  font-size:12.5px;font-weight:600;color:var(--indigo);
  background:rgba(99,102,241,.09);border:1px solid rgba(99,102,241,.2);
  border-radius:var(--r-pill);padding:5px 13px;
}
.art-tag:hover{background:rgba(99,102,241,.16)}
.art-ouvir{
  display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:14px;font-weight:700;
  cursor:pointer;background:#fff;border:1.6px solid var(--borda);border-radius:var(--r-pill);
  padding:10px 20px;color:var(--tinta);margin-bottom:26px;transition:all .18s;
}
.art-ouvir:hover{border-color:var(--indigo-2);color:var(--indigo)}
.art-ouvir.tocando{background:var(--indigo);border-color:var(--indigo);color:#fff}

.artigo{padding:56px 0 72px}
.artigo-corpo{max-width:720px;margin:0 auto}
.artigo-corpo h2{font-size:clamp(21px,2.4vw,29px);color:var(--tinta);margin:44px 0 14px}
.artigo-corpo h3{font-size:19px;color:var(--tinta);margin:30px 0 10px}
.artigo-corpo p{font-size:17px;color:#33314f;line-height:1.78;margin-bottom:18px}
.artigo-corpo ul,.artigo-corpo ol{margin:0 0 22px;padding-left:4px;display:flex;flex-direction:column;gap:10px}
.artigo-corpo ul li{position:relative;padding-left:26px;font-size:16.5px;color:#33314f;line-height:1.68}
.artigo-corpo ul li::before{
  content:"";position:absolute;left:4px;top:11px;width:8px;height:8px;border-radius:2px;
  background:linear-gradient(135deg,var(--indigo-2),var(--esmeralda-2));
}
.artigo-corpo ol{counter-reset:oi;list-style:none}
.artigo-corpo ol li{counter-increment:oi;position:relative;padding-left:38px;font-size:16.5px;color:#33314f;line-height:1.68}
.artigo-corpo ol li::before{
  content:counter(oi);position:absolute;left:0;top:2px;
  width:26px;height:26px;border-radius:8px;background:rgba(99,102,241,.12);color:var(--indigo);
  font-family:var(--fonte-t);font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.artigo-corpo a{color:var(--indigo);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* botões dentro do texto não podem herdar a cor de link do artigo */
.artigo-corpo a.btn,.caixa-cta a.btn,.artigo-corpo a.art-tag{text-decoration:none;font-weight:700}
.artigo-corpo a.btn-p,.artigo-corpo a.btn-i,.artigo-corpo a.btn-w,.artigo-corpo a.btn-fantasma,
.caixa-cta a.btn-p,.caixa-cta a.btn-i,.caixa-cta a.btn-w,.caixa-cta a.btn-fantasma{color:#fff}
.artigo-corpo a.btn-linha,.caixa-cta a.btn-linha{color:var(--tinta)}
.artigo-corpo a.art-tag{color:var(--indigo);font-weight:600}
.artigo-corpo strong{color:var(--tinta)}
.artigo-corpo blockquote{
  border-left:3px solid var(--esmeralda-2);background:var(--areia);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:18px 22px;margin:0 0 24px;
  font-size:16.5px;color:var(--texto);line-height:1.7;
}
.artigo-corpo table{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:24px}
.artigo-corpo th,.artigo-corpo td{padding:12px 14px;border-bottom:1px solid var(--borda);text-align:left}
.artigo-corpo th{background:var(--areia);font-family:var(--fonte-t);font-size:14px;color:var(--tinta)}
.artigo-capa{max-width:880px;margin:26px auto 34px}
.artigo-capa img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-lg);border:1px solid var(--borda);box-shadow:var(--sombra-2);
}
.artigo-cabeca{max-width:720px;margin:0 auto 8px}
.artigo-cabeca h1{font-size:clamp(28px,3.6vw,42px);color:var(--tinta);margin-bottom:16px;text-wrap:balance}
.artigo-resumo{font-size:18.5px;color:var(--muted);line-height:1.7;margin-bottom:22px}
.artigo-info{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted-2);
  padding-bottom:26px;border-bottom:1px solid var(--borda);margin-bottom:12px;
}
.caixa-cta{
  background:linear-gradient(150deg,#12103a,#1c1950);color:#fff;
  border-radius:var(--r-lg);padding:30px 32px;margin:38px 0 8px;
}
.caixa-cta h3{font-size:20px;color:#fff;margin-bottom:9px}
.caixa-cta p{font-size:15px;color:rgba(255,255,255,.75);line-height:1.68;margin-bottom:18px}
.caixa-cta-acoes{display:flex;gap:11px;flex-wrap:wrap}
.caixa-cta .btn-fantasma{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.36)}
.caixa-cta .btn-fantasma:hover{background:rgba(255,255,255,.22);border-color:#fff}
.leia-tambem{max-width:720px;margin:44px auto 0;border-top:1px solid var(--borda);padding-top:26px}
.leia-tambem h2{font-size:17px;color:var(--tinta);margin-bottom:14px}
.leia-tambem ul{display:flex;flex-direction:column;gap:10px}
.leia-tambem a{color:var(--indigo);font-weight:600;font-size:15px}
.leia-tambem a:hover{text-decoration:underline}

/* ── SEÇÕES ───────────────────────────────────────────────── */
.sec{padding:82px 0}
.sec-areia{background:var(--areia)}
.sec-tinta{background:linear-gradient(160deg,#12103a,#1c1950);color:#fff}
.sec-compacta{padding:56px 0}
.centro{text-align:center}
.centro .sec-desc{margin-left:auto;margin-right:auto}

.rotulo{
  display:inline-block;font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--indigo);background:rgba(99,102,241,.09);
  border:1px solid rgba(99,102,241,.2);border-radius:var(--r-pill);
  padding:5px 14px;margin-bottom:14px;
}
.sec-tinta .rotulo{color:#c7d2fe;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15)}
.sec-titulo{font-size:clamp(25px,3.1vw,40px);color:var(--tinta);margin-bottom:14px}
.sec-tinta .sec-titulo{color:#fff}
.sec-desc{font-size:16.5px;color:var(--muted);line-height:1.72;max-width:660px;margin-bottom:46px}
.sec-tinta .sec-desc{color:rgba(255,255,255,.72)}

/* ── GRADE DE RECURSOS ────────────────────────────────────── */
.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grade-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grade-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}

.cartao{
  background:#fff;border:1px solid var(--borda);border-radius:var(--r);
  padding:26px 24px;transition:transform .2s,box-shadow .2s,border-color .2s;
  position:relative;display:flex;flex-direction:column;height:100%;
}
.cartao:hover{transform:translateY(-4px);box-shadow:var(--sombra-2);border-color:rgba(99,102,241,.35)}
.cartao-ico{
  width:46px;height:46px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:21px;margin-bottom:15px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(124,58,237,.1));
}
.cartao-ico.verde{background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(52,211,153,.1))}
.cartao-ico.ambar{background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(251,191,36,.1))}
.cartao h3{font-size:16.5px;color:var(--tinta);margin-bottom:8px}
.cartao p{font-size:14.5px;color:var(--muted);line-height:1.68;flex:1}
.cartao .link-mais{
  margin-top:14px;font-size:13.5px;font-weight:700;color:var(--indigo);
  display:inline-flex;align-items:center;gap:6px;
}
.cartao a.link-mais:hover{gap:10px;transition:gap .18s}
.etiqueta-gratis{
  display:inline-flex;align-items:center;gap:5px;
  background:#d1fae5;color:#065f46;font-size:10.5px;font-weight:700;
  padding:3px 10px;border-radius:var(--r-pill);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;align-self:flex-start;
}

/* ── SPLIT (texto + imagem) ───────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split+.split{margin-top:78px}
.split-inv .split-midia{order:-1}
.split-midia img{
  width:100%;border-radius:var(--r-lg);
  box-shadow:var(--sombra-2);border:1px solid var(--borda);
}
.split h2{font-size:clamp(22px,2.6vw,32px);color:var(--tinta);margin-bottom:14px}
.split p{font-size:15.5px;color:var(--muted);line-height:1.75}

.lista-check{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.lista-check li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--muted);line-height:1.6}
.check{
  width:21px;height:21px;min-width:21px;border-radius:50%;
  background:linear-gradient(135deg,var(--esmeralda-2),var(--esmeralda));
  display:flex;align-items:center;justify-content:center;color:#fff;margin-top:2px;
}
.sec-tinta .lista-check li{color:rgba(255,255,255,.82)}

/* ── PASSOS NUMERADOS ─────────────────────────────────────── */
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:p}
.passo{
  background:#fff;border:1px solid var(--borda);border-radius:var(--r);
  padding:26px 22px;position:relative;
}
.passo::before{
  counter-increment:p;content:counter(p);
  position:absolute;top:-15px;left:22px;
  width:34px;height:34px;border-radius:11px;
  background:linear-gradient(135deg,var(--indigo-2),var(--violeta));
  color:#fff;font-family:var(--fonte-t);font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(99,102,241,.34);
}
.passo h3{font-size:16px;color:var(--tinta);margin:12px 0 7px}
.passo p{font-size:14px;color:var(--muted);line-height:1.65}

/* ── TABELA COMPARATIVA ───────────────────────────────────── */
.tabela-rolagem{overflow-x:auto;border-radius:var(--r);border:1px solid var(--borda);background:#fff;box-shadow:var(--sombra-1)}
table.comparativo{width:100%;border-collapse:collapse;min-width:620px;font-size:14.5px}
table.comparativo th,table.comparativo td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--borda)}
table.comparativo thead th{
  background:var(--areia);font-family:var(--fonte-t);font-size:14px;
  color:var(--tinta);font-weight:700;white-space:nowrap;
}
table.comparativo thead th.destaque{background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(52,211,153,.08));color:#065f46}
table.comparativo td{color:var(--muted)}
table.comparativo td:first-child{color:var(--texto);font-weight:600}
table.comparativo tbody tr:last-child td{border-bottom:0}
table.comparativo tbody tr:hover{background:var(--areia)}
.sim{color:var(--esmeralda);font-weight:700}
.nao{color:var(--muted-2)}

/* ── BLOCO DE OFERTA ──────────────────────────────────────── */
.oferta{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(900px 460px at 88% 0%,rgba(124,58,237,.5),transparent 60%),
    linear-gradient(150deg,#12103a,#1c1950 60%,#241f63);
  border-radius:var(--r-lg);padding:44px 44px;
  box-shadow:var(--sombra-3);
  display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;
}
.oferta h2{font-size:clamp(22px,2.5vw,31px);color:#fff;margin-bottom:12px}
.oferta p{font-size:15.5px;color:rgba(255,255,255,.75);line-height:1.7}
.oferta-caixa{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r);padding:26px;text-align:center;
}
.oferta-caixa .de{font-size:12.5px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.oferta-caixa .valor{display:flex;align-items:baseline;justify-content:center;gap:5px;margin:7px 0 3px;font-family:var(--fonte-t)}
.oferta-caixa .valor .cifra{font-size:19px;font-weight:700}
.oferta-caixa .valor .num{font-size:52px;font-weight:700;line-height:1}
.oferta-caixa .valor .per{font-size:14px;color:rgba(255,255,255,.6)}
.oferta-caixa .obs{font-size:12.5px;color:rgba(255,255,255,.6);margin-bottom:18px}
.oferta-caixa .btn{width:100%}

/* ── CARDS DE PLANO ───────────────────────────────────────── */
.planos{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch}
.plano{
  background:#fff;border:1.6px solid var(--borda);border-radius:var(--r-lg);
  padding:32px 30px;display:flex;flex-direction:column;position:relative;
  box-shadow:var(--sombra-1);
}
.plano.recomendado{border-color:var(--esmeralda-2);box-shadow:0 16px 50px rgba(5,150,105,.16)}
.plano-selo{
  position:absolute;top:-13px;left:30px;
  background:linear-gradient(135deg,var(--esmeralda-2),var(--esmeralda));color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 14px;border-radius:var(--r-pill);box-shadow:0 6px 16px rgba(5,150,105,.32);
}
.plano h3{font-size:20px;color:var(--tinta);margin-bottom:5px}
.plano .plano-sub{font-size:14px;color:var(--muted);margin-bottom:18px}
.plano-preco{display:flex;align-items:baseline;gap:5px;font-family:var(--fonte-t);margin-bottom:5px}
.plano-preco .cifra{font-size:18px;font-weight:700;color:var(--tinta)}
.plano-preco .num{font-size:46px;font-weight:700;color:var(--tinta);line-height:1}
.plano-preco .per{font-size:14px;color:var(--muted)}
.plano-obs{font-size:12.5px;color:var(--muted-2);margin-bottom:22px}
.plano ul{display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1}
.plano ul li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--muted);line-height:1.55}

/* ── ESTATÍSTICAS ─────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--borda);border-radius:var(--r);overflow:hidden;border:1px solid var(--borda)}
.stat{background:#fff;padding:26px 18px;text-align:center}
.stat .n{font-family:var(--fonte-t);font-size:30px;font-weight:700;color:var(--indigo);line-height:1.1}
.stat .n.verde{color:var(--esmeralda)}
.stat .l{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.45}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{
  background:#fff;border:1px solid var(--borda);border-radius:var(--r);
  padding:18px 22px;box-shadow:var(--sombra-1);transition:border-color .18s;
}
.faq details[open]{border-color:rgba(99,102,241,.4)}
.faq summary{
  cursor:pointer;font-family:var(--fonte-t);font-weight:600;font-size:16px;
  color:var(--tinta);list-style:none;display:flex;align-items:flex-start;
  justify-content:space-between;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-size:22px;font-weight:400;color:var(--indigo-2);
  line-height:1;flex-shrink:0;transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;color:var(--muted);font-size:14.8px;line-height:1.72}
.faq details p a{color:var(--indigo);font-weight:600;text-decoration:underline}

/* ── TEXTO SEO ────────────────────────────────────────────── */
.texto-seo{max-width:900px;margin:44px auto 0;font-size:14px;color:var(--muted);line-height:1.85;text-align:center}
.texto-seo a{color:var(--indigo);font-weight:600}

/* ── CTA FINAL ────────────────────────────────────────────── */
.cta{
  position:relative;overflow:hidden;text-align:center;color:#fff;padding:88px 0;
  background:
    radial-gradient(760px 420px at 20% 0%,rgba(16,185,129,.28),transparent 62%),
    radial-gradient(900px 480px at 82% 100%,rgba(124,58,237,.4),transparent 60%),
    linear-gradient(160deg,#12103a,#1c1950);
}
.cta h2{font-size:clamp(26px,3.4vw,42px);color:#fff;margin-bottom:14px}
.cta p{font-size:17px;color:rgba(255,255,255,.75);margin-bottom:26px}
.cta p b{color:var(--menta)}
.cta-acoes{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.cta-0800{font-size:13.5px;color:rgba(255,255,255,.55)}
.cta-0800 a{color:#a5b4fc;font-weight:700}

/* ── MIGALHAS ─────────────────────────────────────────────── */
.migalhas{background:var(--areia);border-bottom:1px solid var(--borda);padding:12px 0;font-size:13px;color:var(--muted-2)}
.migalhas ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center;list-style:none}
.migalhas a{color:var(--indigo);font-weight:600}
.migalhas li+li::before{content:"›";margin-right:8px;color:var(--muted-2)}

/* ── RODAPÉ ───────────────────────────────────────────────── */
footer.rodape{background:var(--tinta);color:rgba(255,255,255,.6);padding:56px 0 26px;font-size:14px}
.rodape-topo{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:22px;
}
.rodape-logos{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.rodape-marca img{height:26px;width:auto;opacity:.92}
.rodape-marca img.logo-woulz{height:19px}
.rodape-marca p{font-size:13.5px;line-height:1.75;max-width:330px}
.rodape-col h3{
  font-family:var(--fonte);font-size:11.5px;font-weight:700;color:#fff;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:14px;
}
.rodape-col ul{display:flex;flex-direction:column;gap:10px}
.rodape-col a{font-size:13.5px;color:rgba(255,255,255,.58);transition:color .18s}
.rodape-col a:hover{color:#fff}
.rodape-base{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.45)}
.rodape-base a{color:rgba(255,255,255,.5)}
.rodape-base a:hover{color:#fff}

/* ── WHATSAPP FLUTUANTE ───────────────────────────────────── */
.wpp-flut{
  position:fixed;right:22px;bottom:22px;z-index:200;
  width:56px;height:56px;border-radius:50%;background:var(--wpp);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(37,211,102,.48);
  transition:transform .2s;animation:flutua 3.4s ease-in-out infinite;
}
.wpp-flut:hover{transform:scale(1.09);animation:none}
.wpp-flut svg{width:28px;height:28px;fill:#fff}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ── RESPONSIVO ───────────────────────────────────────────── */
@media(max-width:1330px){
  .menu{gap:17px;font-size:13.8px}
  .marca{gap:9px}
}
@media(max-width:1200px){
  .marca-nome,.marca .logo-div:last-of-type{display:none}
}
@media(max-width:1024px){
  .grade-4{grid-template-columns:repeat(2,1fr)}
  .dw-grade{grid-template-columns:repeat(2,1fr)}
  .post-grade{grid-template-columns:repeat(2,1fr)}
  .passos{grid-template-columns:repeat(2,1fr);gap:28px 20px}
  .rodape-topo{grid-template-columns:1fr 1fr;gap:32px}
  .menu{gap:18px;font-size:13.5px}
}
@media(max-width:900px){
  .sec{padding:60px 0}
  .hero{padding:56px 0 62px}
  .hero-grade{grid-template-columns:1fr;gap:38px}
  .split,.split+.split{grid-template-columns:1fr;gap:30px}
  .split+.split{margin-top:54px}
  .split-inv .split-midia{order:0}
  .grade-3{grid-template-columns:repeat(2,1fr)}
  .planos{grid-template-columns:1fr}
  .oferta{grid-template-columns:1fr;padding:34px 26px;gap:26px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .menu{display:none}
  .topo .wrap{min-height:64px}
  .destaque-wpp{padding:52px 0 56px}
  .marca img.logo-woulz{height:19px}
  .marca-nome{display:none}
  .menu-mob{
    display:flex;gap:8px;overflow-x:auto;
    background:#181545;border-bottom:1px solid rgba(255,255,255,.08);
    padding:10px 18px;position:sticky;top:64px;z-index:110;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .menu-mob::-webkit-scrollbar{display:none}
}
@media(max-width:640px){
  .wrap{padding:0 18px}
  .faixa-contato{font-size:12.5px}
  .divisor-v{display:none}
  .marca img.logo-kvoip{height:24px}
  .marca img.logo-woulz{height:17px}
  .marca-nome b{font-size:15px}
  .marca{gap:9px}
  .marca-nome span{font-size:9.5px}
  .topo-acoes{gap:6px}
  .topo-acoes .btn{padding:8px 14px;font-size:12.5px}
  .menu-mob{top:60px}
  .topo .wrap{min-height:60px;gap:10px}
  .grade-3,.grade-4,.grade-2{grid-template-columns:1fr}
  .dw-grade{grid-template-columns:1fr}
  .post-grade{grid-template-columns:1fr}
  .artigo-corpo p,.artigo-corpo ul li,.artigo-corpo ol li{font-size:16px}
  .caixa-cta{padding:24px 22px}
  .caixa-cta .btn{margin-right:0}
  .passos{grid-template-columns:1fr;gap:26px}
  .hero h1{font-size:30px}
  .hero-lead{font-size:15.5px}
  .btn{width:100%}
  .hero-acoes,.cta-acoes{flex-direction:column}
  .topo-acoes .btn-linha{display:none}
  .topo-acoes .btn{width:auto}
  .kanban{grid-template-columns:1fr}
  .kanban-col:nth-child(3){display:none}
  .sec-titulo{font-size:25px}
}

@media(max-width:470px){
  .marca img.logo-woulz,.marca .logo-div{display:none}
  .marca img.logo-kvoip{height:26px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}