/* voiicr.ai — design system v3
   Base: manual da marca Voiicr (Azure #007BFF sobre branco), Roboto/Segoe UI.
   Banda escura para as telas do produto; gradientes e orbs no hero. */

:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F5F8FF;
  --ink: #0B0D12;
  --muted: #5B6575;
  --line: #E4E9F2;
  --accent: #007BFF;
  --accent-ink: #FFFFFF;
  --accent-soft: #E8F2FF;
  --accent-deep: #002CFF;
  --ok: #0E9F5B;
  --shadow: 0 1px 2px rgba(10, 20, 40, 0.04), 0 16px 36px -18px rgba(0, 60, 140, 0.22);
  --shadow-lift: 0 2px 4px rgba(10, 20, 40, 0.05), 0 24px 48px -20px rgba(0, 60, 140, 0.28);
  /* banda escura (telas do produto) — mesma nos dois temas */
  --dark-bg: #0A1120;
  --dark-ink: #EAF0FB;
  --dark-muted: #93A3BE;
  --dark-line: #22304B;
  --integ-filter: invert(32%) sepia(8%) saturate(600%) hue-rotate(180deg);
}


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Roboto, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; text-decoration: none; }
img, svg, canvas { max-width: 100%; display: block; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; margin: 0; line-height: 1.12; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 12px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.2s ease infinite; flex: 0 0 auto; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.section-head { max-width: 760px; margin: 0 auto 14px; text-align: center; }
.section-head h2 { font-size: clamp(26px, 3.6vw, 40px); margin-top: 12px; }
.section-lead { font-size: 17.5px; color: #3B4452; max-width: 640px; margin: 12px auto 0; }
section { padding: clamp(56px, 8vw, 96px) 0; }
section.tight { padding: clamp(44px, 6vw, 72px) 0; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: -0.01em;
  border-radius: 10px; padding: 13px 22px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- topo ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 18px; height: 68px; }
.wordmark { flex: 0 0 auto; }
.wordmark img { height: 26px; width: auto; min-width: 88px; }
.nav-links { display: flex; gap: 14px; list-style: none; margin: 0 auto; padding: 0; }
.nav-links a { font: 400 13.5px/1 Roboto, "Segoe UI", sans-serif; color: var(--muted); transition: color .15s; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; gap: 10px; margin-left: auto; }
@media (max-width: 1080px) { .nav-links { display: none; } }
@media (max-width: 560px) { .nav-cta .btn-ghost { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(56px, 9vw, 110px) 0 clamp(48px, 7vw, 88px); overflow: clip; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(820px 460px at 82% -12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(640px 420px at -8% 108%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%);
}
.orb { position: absolute; border-radius: 50%; filter: blur(56px); opacity: .5; background: color-mix(in srgb, var(--accent) 26%, transparent); animation: drift 16s ease-in-out infinite alternate; }
.orb-a { width: 300px; height: 300px; top: -80px; right: 6%; }
.orb-b { width: 210px; height: 210px; bottom: -60px; left: 4%; animation-delay: -6s; }
.orb-c { width: 130px; height: 130px; top: 34%; left: 42%; opacity: .3; animation-delay: -11s; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(28px, 22px, 0) scale(1.08); } }
#particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } #particles { display: none; } }

.hero-grid { position: relative; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.04; margin: 18px 0 0; }
.hero h1 .accent-line { display: block; color: var(--accent); font-size: .78em; line-height: 1.1; margin-top: 6px; }
.lede { font-size: clamp(16.5px, 1.9vw, 19px); color: #353D4A; max-width: 560px; margin: 18px 0 0; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-fine { font-size: 13.5px; color: #353D4A; margin: 22px 0 0; }

.signal-panel {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lift); overflow: hidden;
}
.signal-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  font: 700 12.5px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: 0.05em;
}
.signal-panel-head .live { color: var(--ok); font-weight: 600; letter-spacing: 0; display: inline-flex; align-items: center; gap: 7px; }
.signal-panel-head .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse 1.6s ease infinite; }
#wave { width: 100%; height: 92px; background: var(--surface-2); }
.call-script { position: relative; padding: 16px 18px 8px; }
.cs-line {
  display: block; max-width: 86%; width: fit-content;
  margin: 0 0 9px; padding: 8px 13px 9px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.45; color: var(--ink);
  opacity: 0; transform: translateY(4px);
  transition: opacity .45s ease, transform .45s ease;
}
.cs-line.on { opacity: 1; transform: none; }
.cs-line span {
  display: block; font: 700 9.5px/1.5 Roboto, "Segoe UI", sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px;
}
.cs-cliente { margin-right: auto; border-bottom-left-radius: 5px; }
.cs-ia { margin-left: auto; background: var(--accent-soft); border-color: #CFE5FF; border-bottom-right-radius: 5px; }
.cs-ia span { color: var(--accent); }
.cs-tag {
  position: absolute; right: 14px; bottom: 6px;
  font: 600 9.5px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
@media (prefers-reduced-motion: reduce) { .cs-line { opacity: 1; transform: none; transition: none; } }
.signal-readout { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.signal-readout > div { padding: 13px 18px; border-right: 1px solid var(--line); min-width: 0; }
.signal-readout > div:last-child { border-right: 0; }
.signal-readout .k { font: 600 10.5px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.signal-readout .v { font: 800 17px/1.2 Roboto, "Segoe UI", sans-serif; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ---------- strip de stats ---------- */
.stats-strip { border-block: 1px solid var(--line); background: var(--surface-2); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 26px; }
.stat-n { display: block; font: 800 30px/1.1 Roboto, "Segoe UI", sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat-k { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .stats-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- esteira de logos ---------- */
.trust { padding: 34px 0 30px; }
.trust-label {
  display: block; text-align: center; font: 700 11px/1.4 Roboto, "Segoe UI", sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px;
}
.trust-logos { overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trust-track { display: flex; gap: 54px; width: max-content; animation: marquee 34s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .trust-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }
.trust-logo-box { width: 132px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.trust-logo-box img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: grayscale(1); opacity: 0.55; transition: filter .2s, opacity .2s;
}
.trust-logo-box:hover img { filter: none; opacity: 1; }
.trust-track:hover { animation-play-state: paused; }

/* ---------- pilares ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 42px; }
@media (max-width: 1020px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px;
  box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.pillar .num { font: 700 11px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: 0.09em; color: var(--accent); }
.pillar h3 { font-size: 18px; margin: 14px 0 10px; }
.pillar p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* ---------- como funciona ---------- */
.flow { position: relative; margin-top: 48px; }
.flow-track { position: absolute; top: 15px; left: 6%; right: 6%; height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.flow-pulse { width: 90px; height: 100%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: flowmove 3.2s ease-in-out infinite; }
@keyframes flowmove { from { transform: translateX(-120px); } to { transform: translateX(1200px); } }
@media (prefers-reduced-motion: reduce) { .flow-pulse { animation: none; } }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .flow-track { display: none; } }
.flow-node {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  background: var(--accent); color: var(--accent-ink); border-radius: 50%;
  font: 700 14px/1 Roboto, "Segoe UI", sans-serif; position: relative; z-index: 1;
  box-shadow: 0 0 0 6px var(--bg);
}
.step h3 { font-size: 18px; margin: 16px 0 8px; }
.step p { margin: 0; font-size: 14.5px; color: var(--muted); }
.ddd-widget { margin-top: 16px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.ddd-label { display: block; font: 700 10.5px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.ddd-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ddd-row select {
  font: 600 15px/1.2 Roboto, "Segoe UI", sans-serif; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: pointer;
}
.ddd-preview { font: 700 17px/1.2 Roboto, "Segoe UI", sans-serif; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---------- banda do produto (clara — fundo branco e azul) ---------- */
.dark-band { background: var(--surface-2); color: var(--ink); position: relative; }
.shot-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 22px; }
.shot-tab {
  font: 600 14px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: -0.01em;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 18px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.shot-tab:hover { color: var(--ink); border-color: var(--accent); }
.shot-tab.active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.shot-frame {
  width: 100%; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-lift);
}
.shot-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.shot-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.shot-bar em { flex: 1; text-align: center; font: 500 12px/1 Roboto, "Segoe UI", sans-serif; font-style: normal; color: var(--muted); }
.shot { display: none; width: 100%; }
.shot.active { display: block; animation: shot-in .35s ease; }
@keyframes shot-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shot.active { animation: none; } }
.shot--tall { padding: 34px 0; background: var(--surface-2); }
.shot--tall img { display: block; max-height: 560px; width: auto; margin: 0 auto; border-radius: 18px; box-shadow: var(--shadow-lift); }
.shot-note { margin: 16px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- recursos ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 42px; }
@media (max-width: 980px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .feat-grid { grid-template-columns: 1fr; } }
.feat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px;
  box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.feat-ic {
  width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.feat-ic svg { width: 21px; height: 21px; }
.feat h3 { font-size: 17.5px; margin-bottom: 12px; }
.feat ul { list-style: none; margin: 0; padding: 0; }
.feat li { position: relative; padding: 5px 0 5px 22px; color: var(--muted); font-size: 14.5px; }
.feat li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 8px;
  border-radius: 2px; background: var(--accent); transform: rotate(45deg); opacity: .75;
}

/* ---------- casos de uso ---------- */
.cases-old-unused { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 42px; }
@media (max-width: 980px) { .cases-old-unused { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cases-old-unused { grid-template-columns: 1fr; } }
.case {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px;
  box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.case:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.case h3 { font-size: 16.5px; margin-bottom: 8px; }
.case p { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- comparativo 3 colunas ---------- */
.compare-scroll { overflow-x: auto; margin-top: 42px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.compare3 { border-collapse: collapse; width: 100%; min-width: 680px; font-size: 14.5px; }
.compare3 th {
  text-align: center; font: 700 12px/1.3 Roboto, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: 14px 16px; border-bottom: 2px solid var(--line); background: var(--surface-2);
}
.compare3 th:first-child { text-align: left; }
.compare3 th.c-voiicr { color: var(--accent); }
.compare3 td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.compare3 tr:last-child td { border-bottom: 0; }
.compare3 td:first-child { color: var(--ink); font-weight: 500; }
.compare3 td + td { text-align: center; }
.compare3 .yes { color: var(--ok); font-weight: 700; }
.compare3 .no { color: var(--muted); }
.compare3 td.c-voiicr { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }

/* ---------- integrações ---------- */
.integ-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 42px; }
@media (max-width: 980px) { .integ-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px) { .integ-grid { grid-template-columns: repeat(3, 1fr); } }
.integ {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 10px 16px; box-shadow: var(--shadow); min-height: 96px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.integ:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.integ img { height: 28px; width: 28px; }
.integ .mono-ic {
  width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font: 800 13px/1 Roboto, "Segoe UI", sans-serif;
}
.integ span { font: 600 12.5px/1.3 Roboto, "Segoe UI", sans-serif; color: var(--muted); text-align: center; }

/* ---------- planos ---------- */
.fit-widget { max-width: 560px; margin: 34px auto 22px; text-align: center; }
.fit-label { display: block; font: 700 11px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; }
.fit-row { display: flex; align-items: center; gap: 16px; }
.fit-row input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.fit-row output { font: 700 15px/1.2 Roboto, "Segoe UI", sans-serif; min-width: 148px; text-align: right; font-variant-numeric: tabular-nums; }
.fit-row output b { color: var(--accent); }
.plans-center { text-align: center; }
.price-toggle {
  display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px; margin-bottom: 34px;
}
.billing-btn {
  font: 600 14px/1 Roboto, "Segoe UI", sans-serif; color: var(--muted); background: transparent;
  border: 0; border-radius: 999px; padding: 9px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.billing-btn.active { background: var(--accent); color: var(--accent-ink); }
.price-save { font: 700 11px/1 Roboto, "Segoe UI", sans-serif; background: rgba(255,255,255,.22); border-radius: 100px; padding: 3px 7px; }
.billing-btn:not(.active) .price-save { background: var(--accent-soft); color: var(--accent); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; text-align: left; }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.plan.is-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-lift); }
.plans.has-fit .plan:not(.is-fit) { opacity: 1; }
.plan.is-fit { border-color: var(--accent); box-shadow: 0 18px 44px -16px rgba(0, 123, 255, 0.4); }
.plan.is-fit { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-lift); transform: translateY(-4px); }
.plan.is-fit::after {
  content: "Recomendado pro seu volume"; position: absolute; bottom: -12px; right: 20px;
  background: var(--ok); color: #fff; font: 700 10.5px/1 Roboto, "Segoe UI", sans-serif;
  letter-spacing: .05em; text-transform: uppercase; border-radius: 100px; padding: 6px 11px;
}
.plan-tag {
  position: absolute; top: -12px; left: 24px; background: var(--accent); color: var(--accent-ink);
  font: 700 11px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 100px; padding: 6px 12px;
}
.plan-name { font: 800 19px/1.2 Roboto, "Segoe UI", sans-serif; }
.plan-price { margin-top: 16px; }
.plan-price .n { font: 800 36px/1.1 Roboto, "Segoe UI", sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan-price .u { font: 600 14px/1 Roboto, "Segoe UI", sans-serif; color: var(--muted); margin-left: 4px; }
.plan-price-note { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.plan-desc { font-size: 14px; color: var(--muted); margin: 14px 0 4px; }
.plan ul { list-style: none; margin: 10px 0 22px; padding: 0; flex: 1; }
.plan li { position: relative; padding: 6px 0 6px 24px; font-size: 14.5px; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.plan .btn { width: 100%; }

/* tabela completa */
.ftable { margin-top: 46px; border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; background: var(--surface); text-align: left; }
.ftable-caption { font: 700 14px/1.4 Roboto, "Segoe UI", sans-serif; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.ftable-row { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; min-width: 640px; border-bottom: 1px solid var(--line); font-size: 14px; }
.ftable-row:last-child { border-bottom: 0; }
.ftable-row > span { padding: 11px 20px; }
.ftable-row > span + span { text-align: center; border-left: 1px solid var(--line); }
.ftable-row.head { font: 700 12px/1.3 Roboto, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface-2); }
.ftable-row.section { display: block; min-width: 640px; font: 700 12px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); background: var(--surface-2); padding: 10px 20px; }
.ftable .yes { color: var(--ok); font-weight: 700; }
.ftable .no { color: var(--muted); }

/* ---------- suporte humano ---------- */
.support-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 42px; text-align: left; }
@media (max-width: 980px) { .support-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.support {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.support:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.support .tag { align-self: flex-start; font: 700 10.5px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .07em; text-transform: uppercase; border-radius: 100px; padding: 6px 11px; background: var(--accent-soft); color: var(--accent); }
.support h3 { font-size: 18px; margin: 14px 0 4px; }
.support .support-price { font: 800 24px/1.3 Roboto, "Segoe UI", sans-serif; letter-spacing: -0.02em; }
.support .support-price small { font: 600 13px/1 Roboto, "Segoe UI", sans-serif; color: var(--muted); }
.support > p { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.support ul { list-style: none; padding: 0; margin: 12px 0 0; flex: 1; }
.support li { position: relative; padding: 5px 0 5px 22px; font-size: 14px; color: var(--muted); }
.support li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }

/* ---------- BYOC ---------- */
.byoc-band {
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  margin-top: 46px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 16px; padding: 30px 32px; text-align: left;
}
.byoc-tag { display: inline-block; font: 700 11px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .08em; color: var(--accent); margin-bottom: 10px; }
.byoc-band h4 { font: 800 20px/1.25 Roboto, "Segoe UI", sans-serif; margin: 0 0 8px; }
.byoc-band p { margin: 0; font-size: 14.5px; color: var(--muted); max-width: 560px; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 38px auto 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font: 700 16.5px/1.4 Roboto, "Segoe UI", sans-serif; padding: 20px 0; cursor: pointer; list-style: none; text-align: left;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .plus { color: var(--accent); font-weight: 600; transition: transform .2s; flex: 0 0 auto; }
.faq-item[open] .plus { transform: rotate(45deg); }
.faq-item p { margin: 0 0 20px; color: var(--muted); font-size: 15px; max-width: 720px; text-align: left; }

/* ---------- CTA final ---------- */
.cta-band {
  position: relative; overflow: clip; text-align: center;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 20px; padding: clamp(44px, 6vw, 72px) 32px;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(560px 300px at 80% -20%, rgba(255,255,255,.28), transparent 60%),
    repeating-radial-gradient(circle at 108% 50%, rgba(255,255,255,.10) 0 2px, transparent 2px 52px);
}
.cta-band::after {
  content: ""; position: absolute; right: -70px; top: 50%; transform: translateY(-50%);
  width: 300px; height: 300px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.25) 38%, rgba(255,255,255,0) 66%),
    radial-gradient(circle at 60% 65%, rgba(191,224,255,.55), rgba(191,224,255,0) 60%);
  filter: blur(1px); opacity: .85;
  animation: orb-respirar 5s ease-in-out infinite;
  pointer-events: none;
}
@media (max-width: 720px) { .cta-band::after { width: 180px; height: 180px; right: -60px; } }
.cta-band h2 { position: relative; font-size: clamp(24px, 3.4vw, 36px); color: inherit; }
.cta-band .btn { position: relative; margin-top: 26px; background: #FFFFFF; color: #007BFF; }
.cta-band .btn:hover { transform: translateY(-1px); }

/* ---------- rodapé ---------- */
footer { border-top: 1px solid var(--line); background: var(--surface-2); padding: 56px 0 34px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand p { color: var(--muted); font-size: 14px; max-width: 340px; margin: 16px 0 0; }
.foot-col h4 { font: 700 12px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin: 9px 0; }
.foot-col a { font-size: 14.5px; color: var(--ink); }
.foot-col a:hover { color: var(--accent); }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between;
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line);
}
.foot-legal { font-size: 12.5px; color: var(--muted); }
.foot-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  font: 700 10px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .06em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; background: var(--surface);
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }


/* ===== Certificações do ambiente ===== */
.selos-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 42px 36px; margin-top: 48px; max-width: 980px; margin-inline: auto; }
@media (max-width: 980px) { .selos-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px) { .selos-grid { grid-template-columns: repeat(3, 1fr); } }
.selo {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 16px;
  padding: 4px; min-height: 128px;
}
.selo img { height: 54px; width: auto; object-fit: contain; }
.selo span { font: 500 11px/1.45 Roboto, "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.selos-note { margin: 22px 0 0; font-size: 13.5px; color: var(--muted); }



/* ===== Colagem do hero (espaçada, sem sobreposição) ===== */
.collage { position: relative; display: grid; gap: 18px; }
.blob-bg {
  position: absolute; inset: -4% -8% -2% 20%; z-index: 0;
  background: linear-gradient(118deg, var(--accent-soft) 8%, rgba(0, 123, 255, 0.14) 92%);
  border-radius: 30px;
  transform: rotate(-7deg);
}
.blob-bg::before {
  content: ""; position: absolute; right: -7%; top: 9%;
  width: 44%; height: 36%; border-radius: 22px;
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.20), rgba(0, 44, 255, 0.07));
  transform: rotate(13deg);
}
.blob-bg::after {
  content: ""; position: absolute; left: -6%; bottom: -5%;
  width: 34%; height: 30%; border-radius: 18px;
  border: 2px solid rgba(0, 123, 255, 0.22);
  background: repeating-linear-gradient(45deg, rgba(0, 123, 255, 0.10) 0 6px, transparent 6px 15px);
  transform: rotate(-12deg);
}
.c-card {
  position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-lift); overflow: hidden;
}
.c-main img { width: 100%; }
.c-row { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 18px; align-items: stretch; position: relative; z-index: 1; }
@media (max-width: 560px) { .c-row { grid-template-columns: 1fr; } }
.c-chat { padding: 34px 18px 14px; }
.c-note { padding: 16px 18px; }
.c-note .n-title { display: flex; align-items: center; gap: 9px; font: 700 13px/1.35 Roboto, "Segoe UI", sans-serif; }
.c-note .n-title::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.c-note p { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }



/* título de bloco no padrão do institucional + fabricantes First Tier */
.selos-titulo {
  margin: 40px 0 8px; text-align: center;
  font: 600 14px/1.5 Roboto, "Segoe UI", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tier-grid { grid-template-columns: 1fr; } }
.tier {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 26px 22px; text-align: center;
}
.tier h3 { font-size: 17px; }
.tier p { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }


/* ===== Orb do assistente — porte fiel da orb do produto (núcleo + 3 ondas + brilho + varredura) ===== */
.orb-fluid {
  position: absolute; right: -8px; top: -30px; z-index: 6;
  width: 84px; height: 84px; border-radius: 50%;
  filter: drop-shadow(0 20px 28px rgba(31, 91, 255, 0.35));
  animation: orb-respirar 4s ease-in-out infinite;
}
.orb-fluid::before, .orb-fluid::after {
  content: ""; position: absolute; inset: -16%; border-radius: 50%;
  border: 1.5px solid rgba(0, 123, 255, 0.45);
  opacity: 0; animation: orb-eco 3.8s ease-out infinite; pointer-events: none;
}
.orb-fluid::after { animation-delay: -1.9s; }
.orb-nucleo {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 1;
  background: radial-gradient(circle at 32% 30%, #6db9f2 0, #2f7fd6 48%, #123a96 100%);
  box-shadow:
    inset 0 -12px 24px rgba(9, 28, 86, 0.55),
    inset 0 8px 18px rgba(255, 255, 255, 0.35);
  transform: translateZ(0);
}
.orb-onda {
  position: absolute; display: block; inset: -22%;
  border-radius: 46% 54% 58% 42% / 52% 40% 60% 48%;
  filter: blur(4px); opacity: .85; mix-blend-mode: screen; will-change: transform;
}
.orb-onda:nth-child(1) {
  background: radial-gradient(circle at 30% 40%, #6f9bff 0, transparent 62%);
  animation: orb-fluir-1 7s ease-in-out infinite;
}
.orb-onda:nth-child(2) {
  background: radial-gradient(circle at 70% 60%, #6fd0ff 0, transparent 60%);
  border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%;
  animation: orb-fluir-2 9s ease-in-out infinite;
}
.orb-onda:nth-child(3) {
  background: radial-gradient(circle at 50% 75%, #bfe0ff 0, transparent 55%);
  border-radius: 40% 60% 50% 50% / 60% 44% 56% 40%;
  opacity: .6; animation: orb-fluir-3 11s linear infinite;
}
.orb-brilho {
  position: absolute; display: block; inset: 0; border-radius: 50%;
  background:
    radial-gradient(52% 40% at 32% 20%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 72%),
    radial-gradient(80% 46% at 50% 114%, rgba(9, 28, 86, 0.5), rgba(9, 28, 86, 0) 62%),
    radial-gradient(22% 15% at 67% 13%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.orb-nucleo::after {
  content: ""; position: absolute; inset: 5%; border-radius: 50%;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.5) 50%, transparent 66%);
  mix-blend-mode: screen; opacity: .4; animation: orb-varrer 6s linear infinite; pointer-events: none;
}
@keyframes orb-respirar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes orb-varrer { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes orb-eco {
  0% { transform: scale(0.8); opacity: 0; }
  20% { opacity: .5; }
  100% { transform: scale(1.3); opacity: 0; }
}
@keyframes orb-fluir-1 {
  0% { transform: rotate(0deg) scale(1) translate(0, 0); }
  33% { transform: rotate(120deg) scale(1.15) translate(6%, -4%); }
  66% { transform: rotate(240deg) scale(0.92) translate(-5%, 6%); }
  100% { transform: rotate(360deg) scale(1) translate(0, 0); }
}
@keyframes orb-fluir-2 {
  0% { transform: rotate(0deg) scale(1.05) translate(0, 0); }
  50% { transform: rotate(-180deg) scale(0.9) translate(-7%, 5%); }
  100% { transform: rotate(-360deg) scale(1.05) translate(0, 0); }
}
@keyframes orb-fluir-3 {
  0% { transform: rotate(0deg) scale(0.95); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .orb-fluid, .orb-fluid::before, .orb-fluid::after, .orb-nucleo::after, .orb-onda { animation: none !important; }
}


/* ===== chat estilo WhatsApp (demonstração fiel ao app) ===== */
.wa-chat {
  background: #ECE5DD; border-radius: 0 0 16px 16px; padding: 18px 14px 14px; position: relative;
}
.wa-msg {
  max-width: 82%; margin: 0 0 8px; padding: 8px 12px; font-size: 13.5px; line-height: 1.45;
  border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.08); color: #111B21; position: relative;
  opacity: 0; transform: translateY(4px); transition: opacity .45s ease, transform .45s ease;
}
.wa-msg.on { opacity: 1; transform: none; }
.wa-in { background: #FFFFFF; border-top-left-radius: 2px; margin-right: auto; }
.wa-out { background: #DCF8C6; border-top-right-radius: 2px; margin-left: auto; }
.wa-meta { display: block; margin-top: 3px; text-align: right; font-size: 10.5px; color: #667781; }
.wa-out .wa-meta::after { content: " ✓✓"; color: #53BDEB; font-size: 11px; }
.wa-tag { position: absolute; right: 14px; bottom: 6px; font: 600 9.5px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #667781; }

/* ===== canais do omnichannel (coloridos) ===== */
.canais-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 42px; }
@media (max-width: 900px) { .canais-grid { grid-template-columns: repeat(2, 1fr); } }
.canal {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.canal:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.canal img { width: 26px; height: 26px; }
.canal .mono-ic { width: 26px; height: 26px; border-radius: 7px; background: var(--canal-cor, var(--accent)); color: #fff; display: flex; align-items: center; justify-content: center; font: 800 12px/1 Roboto, "Segoe UI", sans-serif; }
.canal b { font-size: 14.5px; }
.canal small { display: block; font-size: 12px; color: var(--muted); }


/* orb inline (hero de Números) */
.orb-stage { display: flex; justify-content: center; padding: 22px 0 6px; }
.orb-fluid--inline { position: relative; right: auto; top: auto; width: 148px; height: 148px; }
.numero-cta { margin: 4px 18px 18px; width: calc(100% - 36px); }

/* ===== compliance: alertas, lei e tooltip ===== */
.alerta-band {
  background: #FDECEC; border: 1px solid #F5B5B5;
  border-radius: 14px; padding: 22px 26px; margin-top: 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.alerta-band h4 { font: 700 18px/1.3 Roboto, "Segoe UI", sans-serif; color: #B42318; margin: 0 0 6px; }
.alerta-band p { margin: 0; font-size: 14.5px; color: #7A271A; max-width: 640px; }
.alerta-band .btn { background: #D92D20; color: #fff; }
.alerta-band .btn:hover { background: #B42318; transform: translateY(-1px); }
.lei-box {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 12px; padding: 22px 26px; margin: 26px 0; font-size: 15px; line-height: 1.7;
}
.lei-box .lei-ref { display: block; font: 700 11px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.lei-box mark { background: #FFF3B0; padding: 1px 3px; border-radius: 3px; }
.lei-box.lei-box--crime { border-left-color: #D92D20; }
.lei-box.lei-box--crime .lei-ref { color: #D92D20; }
.lei-box.lei-box--crime mark { background: #FDDCDC; }
.lei-fonte { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.lei-fonte a { color: var(--accent); font-weight: 600; word-break: break-all; }
.tt { position: relative; border-bottom: 2px dotted var(--accent); cursor: help; font-weight: 600; }
.tt::after {
  content: attr(data-tt); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  width: 300px; background: var(--ink); color: var(--bg); font: 400 13px/1.5 Roboto, "Segoe UI", sans-serif;
  border-radius: 10px; padding: 12px 14px; opacity: 0; pointer-events: none; transition: opacity .15s;
  z-index: 30; box-shadow: var(--shadow-lift); text-align: left;
}
.tt::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--ink); opacity: 0; transition: opacity .15s;
}
.tt:hover::after, .tt:hover::before, .tt:focus::after, .tt:focus::before { opacity: 1; }
.risco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
@media (max-width: 900px) { .risco-grid { grid-template-columns: 1fr; } }
.risco { background: #FFF7F5; border: 1px solid #F5C6BC; border-radius: 14px; padding: 24px; }
.risco h3 { font-size: 16.5px; color: #B42318; margin-bottom: 8px; }
.risco p { margin: 0; font-size: 14px; color: #6B4A42; }

/* ===== blog ===== */
.post { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 30px 32px; margin-top: 26px; }
.post .post-meta { font: 600 12px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.post h3 { font-size: 22px; margin: 10px 0 14px; }
.post p { font-size: 15px; color: var(--muted); margin: 0 0 12px; line-height: 1.65; }
.post blockquote { margin: 14px 0; padding: 12px 18px; border-left: 4px solid var(--accent); background: var(--paper, var(--surface-2)); border-radius: 0 10px 10px 0; font-size: 14.5px; color: var(--ink); }
.post .post-fonte { font-size: 13px; color: var(--muted); }
.post .post-fonte a { color: var(--accent); font-weight: 600; }


/* ===== comparador nomeado (estilo nextcloud) ===== */
.vs-marca {
  display: inline-block; background: var(--vs-cor); color: #fff;
  font: 700 13px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .02em; text-transform: none;
  border-radius: 999px; padding: 8px 16px;
}
.vs-table td { vertical-align: top; }
.vs-table td small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 3px; }
.vs-destaque td { background: #FDECEC; border-top: 2px solid #D92D20; border-bottom: 2px solid #D92D20; font-weight: 700; }
.vs-destaque td.c-voiicr { background: var(--accent); color: #fff; }
.vs-destaque .vs-sim { font-size: 20px; }
.vs-destaque .vs-nao { color: #B42318; font-size: 18px; }
.vs-destaque .vs-nao small { color: #7A271A; }
.vs-fontes { margin: 16px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ===== tema vermelho (página Compliance) ===== */
.tema-vermelho {
  --accent: #D92D20;
  --accent-deep: #B42318;
  --accent-soft: #FDECEC;
  --accent-ink: #FFFFFF;
  --paper: #FBF1F0;
  --surface-2: #FBF1F0;
  --ok: #B42318;
  --shadow: 0 1px 2px rgba(64, 10, 8, 0.05), 0 18px 40px -22px rgba(180, 35, 24, 0.28);
  --shadow-lift: 0 2px 4px rgba(64, 10, 8, 0.06), 0 26px 52px -22px rgba(180, 35, 24, 0.36);
}
.hero-vermelho {
  background: linear-gradient(160deg, #8A1710 0%, #B42318 55%, #D92D20 100%);
  color: #FFF5F4; position: relative; overflow: clip;
}
.hero-vermelho .blob {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  border-radius: 28px; transform: rotate(-7deg);
}
.hero-vermelho .blob::before {
  content: ""; position: absolute; right: -6%; top: 10%; width: 46%; height: 34%;
  border-radius: 20px; background: rgba(255, 255, 255, 0.10); transform: rotate(12deg);
}
.hero-vermelho .blob::after {
  content: ""; position: absolute; left: -4%; bottom: -4%; width: 32%; height: 28%;
  border-radius: 16px; border: 2px solid rgba(255, 255, 255, 0.22);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 6px, transparent 6px 15px);
  transform: rotate(-12deg);
}
.hero-vermelho .eyebrow { background: rgba(255,255,255,.14); color: #FFD9D5; }
.hero-vermelho .eyebrow .dot { background: #FFD9D5; }
.hero-vermelho h1 { color: #FFFFFF; font-weight: 900; }
.hero-vermelho .accent-line {
  color: #D92D20;
  -webkit-text-stroke: 6px #fff;
  paint-order: stroke fill;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}
.hero-vermelho .lede { color: #FFE3E0; }
.hero-vermelho .btn-primary { background: #FFFFFF; color: #B42318; }
.hero-vermelho .btn-ghost { color: #FFFFFF; border-color: rgba(255,255,255,.45); }
.hero-vermelho .btn-ghost:hover { border-color: #FFFFFF; color: #FFFFFF; }
.pessoa-blob { position: relative; min-height: 380px; }
.pessoa-blob .blob { position: absolute; inset: 6% -4% 0 12%; }
.pessoa-blob img {
  position: relative; z-index: 1; max-height: 470px; width: auto; margin: 0 auto; display: block;
  transform: translateY(-4%);
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 94%);
}

.tema-vermelho .section-head h2 { font-weight: 900; font-size: clamp(30px, 4vw, 46px); }
.tema-vermelho .stats-strip { background: #8A1710; border: 0; }
.tema-vermelho .stats-strip .stat-n { color: #FFFFFF; }
.tema-vermelho .stats-strip .stat-k { color: #FFD9D5; }
.risco-ic { width: 42px; height: 42px; border-radius: 10px; background: #FDECEC; color: #B42318; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.risco-ic svg { width: 22px; height: 22px; }


/* ===== colagem com pessoa (hero) ===== */
.collage-pessoa { display: block; min-height: 540px; }
.cp-pessoa {
  position: absolute; right: 5%; bottom: 0; height: 100%; width: auto; z-index: 1;
  filter: drop-shadow(0 26px 42px rgba(0, 60, 140, 0.28));
}
.collage-pessoa .blob-bg { inset: 4% -6% 2% 18%; opacity: .14; }
.collage-pessoa .orb-fluid { right: auto; left: 50%; top: auto; bottom: 46%; z-index: 6; }
.cp-el { position: absolute; width: 240px; border-radius: 12px; z-index: 2; }
.cp-el-a { left: 0; top: 10%; }
.cp-el-b { left: 4%; top: 38%; width: 220px; }
.cp-chat { position: absolute; left: 0; bottom: 4%; width: 54%; z-index: 3; padding: 30px 18px 12px; }
@media (max-width: 980px) {
  .collage-pessoa { min-height: 0; padding-top: 8px; display: grid; gap: 14px; }
  .cp-pessoa { position: relative; right: auto; height: auto; max-height: 380px; margin: 0 auto; order: 1; }
  .collage-pessoa .orb-fluid { display: none; }
  .cp-el { position: relative; left: auto; top: auto; width: 100%; max-width: 320px; margin: 0 auto; order: 2; }
  .cp-el-b { display: none; }
  .cp-chat { position: relative; bottom: auto; width: 100%; order: 3; }
}


/* comparador: concorrentes anonimos */
.vs-marca--anon { --vs-cor: #64748B; }


/* compliance: citacao da fiscalizacao */
.cita-anatel {
  margin-top: 34px; padding: 34px 38px; border-radius: 18px;
  background: linear-gradient(135deg, #8A1710, #D92D20); color: #fff;
  box-shadow: 0 22px 48px rgba(138, 23, 16, 0.35);
}
.cita-anatel-selo {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .12em;
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff;
}
.cita-anatel blockquote {
  margin: 18px 0 10px; font-size: clamp(22px, 3vw, 30px); line-height: 1.25;
  font-weight: 800; letter-spacing: -0.01em; color: #fff;
}
.cita-anatel-quem { font-size: 15px; color: rgba(255,255,255,.92); margin: 0 0 14px; }
.cita-anatel-ctx { font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.88); max-width: 820px; margin: 0 0 14px; }
.cita-anatel-ctx strong, .cita-anatel-quem strong { color: #fff; }
.cita-anatel-fonte { font-size: 13.5px; color: rgba(255,255,255,.75); margin: 0; }
.cita-anatel-fonte a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .cita-anatel { padding: 26px 20px; } }


/* banda pessoa + tela saltando */
.banda-pessoa { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.bp-visual { position: relative; min-height: 400px; }
.bp-visual .blob-bg { inset: 8% 4% 4% 4%; opacity: .14; }
.bp-pessoa {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: 100%; width: auto; max-width: none;
  filter: drop-shadow(0 24px 40px rgba(0, 60, 140, 0.26));
}
.bp-el { position: absolute; left: 0; top: 5%; width: 200px; border-radius: 12px; box-shadow: var(--shadow-lg); }
@media (max-width: 980px) {
  .banda-pessoa { grid-template-columns: 1fr; gap: 20px; }
  .bp-visual { min-height: 0; display: grid; gap: 14px; justify-items: center; }
  .bp-pessoa { position: relative; left: auto; bottom: auto; transform: none; height: auto; max-width: 100%; max-height: 340px; }
  .bp-el { position: relative; right: auto; top: auto; width: 100%; max-width: 300px; }
}


/* compliance: CTA final claro + animacao de regularizacao */
.tema-vermelho .cta-legal { background: #fff; }
.tema-vermelho .cta-legal .section-head h2 { color: #0B0D12; }
.regulariza {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  margin: 34px auto 26px; max-width: 880px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 18px 44px -18px rgba(10, 20, 40, 0.25);
}
.reg-zona { padding: 34px 26px 84px; display: flex; flex-direction: column; gap: 6px; }
.reg-zona--ilegal { background: linear-gradient(135deg, #8A1710, #B4231A); }
.reg-zona--ilegal .reg-zona-titulo { color: #FFFFFF; }
.reg-zona--ilegal .reg-zona-sub { color: rgba(255, 255, 255, 0.85); }
.reg-zona--legal { background: #F0FBF5; border-left: 2px dashed #BFE9D2; }
.reg-zona--legal .reg-zona-titulo { color: #0E9F5B; }
.reg-zona--legal .reg-zona-sub { color: #4C7A62; }
.reg-zona-titulo { font: 800 15px/1.3 Roboto, "Segoe UI", sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.reg-zona-sub { font-size: 13px; }
.reg-chip {
  position: absolute; left: 5%; bottom: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid #B4381F; border-radius: 12px;
  padding: 11px 16px; box-shadow: 0 12px 28px rgba(10, 20, 40, 0.28);
  animation: reg-anda 7s cubic-bezier(.6, 0, .3, 1) infinite, reg-borda 7s ease infinite;
}
.reg-num { font: 700 16px/1 Roboto, "Segoe UI", sans-serif; color: #C2311B; letter-spacing: .01em; white-space: nowrap; animation: reg-num-cor 7s ease infinite; }
@keyframes reg-num-cor { 0%, 34% { color: #C2311B; } 48%, 90% { color: #0E9F5B; } 100% { color: #C2311B; } }
.reg-troca { position: relative; display: inline-block; min-width: 118px; height: 13px; }
.reg-status { position: absolute; inset: 0; font: 600 11px/13px Roboto, "Segoe UI", sans-serif; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.reg-status--antes { color: #C2311B; animation: reg-some 7s ease infinite; }
.reg-status--depois { color: #0E9F5B; opacity: 0; animation: reg-surge 7s ease infinite; }
@keyframes reg-anda {
  0%, 24%  { left: 5%; transform: translateX(0); }
  44%, 92% { left: 95%; transform: translateX(-100%); }
  100%     { left: 5%; transform: translateX(0); }
}
@keyframes reg-borda {
  0%, 32%  { border-color: #B4381F; }
  46%, 90% { border-color: #0E9F5B; }
  100%     { border-color: #B4381F; }
}
@keyframes reg-some  { 0%, 30% { opacity: 1; } 42%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes reg-surge { 0%, 36% { opacity: 0; } 48%, 90% { opacity: 1; } 100% { opacity: 0; } }
.cta-legal-acao { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.tema-vermelho .cta-legal .btn-primary { background: #007BFF; color: #fff; }
.tema-vermelho .cta-legal .btn-primary:hover { background: #0062CC; }
.tema-vermelho .cta-legal .btn-ghost { color: #0B0D12; border-color: var(--line); }
@media (prefers-reduced-motion: reduce) {
  .reg-chip { animation: none; left: 95%; transform: translateX(-100%); border-color: #0E9F5B; }
  .reg-status--antes { animation: none; opacity: 0; }
  .reg-status--depois { animation: none; opacity: 1; }
}
@media (max-width: 720px) {
  .regulariza { grid-template-columns: 1fr; }
  .reg-zona { padding: 22px 18px; }
  .reg-zona--ilegal { padding-bottom: 22px; }
  .reg-zona--legal { border-left: 0; border-top: 2px dashed #BFE9D2; padding-bottom: 88px; }
  .reg-chip { animation: none; border-color: #0E9F5B; left: 18px; transform: none; }
  .reg-status--antes { animation: none; opacity: 0; }
  .reg-status--depois { animation: none; opacity: 1; }
  .reg-num { animation: none; color: #0E9F5B; }
}


/* comparador: logo Voiicr no cabecalho */
.vs-logo { width: 92px; height: auto; max-width: none; display: block; margin: 0 auto; }

/* precos do modulo IA de WhatsApp */
.wa-precos { margin-top: 34px; padding: 30px 30px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.wa-precos-head { text-align: center; max-width: 640px; margin: 0 auto 22px; }
.wa-precos-head h4 { font-size: 24px; margin: 10px 0 8px; }
.wa-precos-head p { color: var(--muted); font-size: 15.5px; margin: 0; }
.wa-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wa-tier {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 14px; text-align: center;
}
.wa-tier--pop { border-color: var(--accent); box-shadow: 0 12px 30px -14px rgba(0, 123, 255, 0.4); }
.wa-tier-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font: 700 11px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  background: var(--accent); color: #fff; padding: 5px 12px; border-radius: 999px;
}
.wa-tier-nome { font: 700 13px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wa-tier-preco { font: 800 30px/1.1 Roboto, "Segoe UI", sans-serif; letter-spacing: -0.02em; }
.wa-tier-preco small { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.wa-tier-meta { font-size: 13.5px; color: var(--muted); }
.wa-precos-nota { text-align: center; font-size: 13.5px; color: var(--muted); margin: 18px 0 0; }
.wa-precos-nota a { color: var(--accent); font-weight: 600; }
@media (max-width: 860px) { .wa-tiers { grid-template-columns: 1fr; } }

/* pagina whatsapp: cards de preco completos */
.wa-planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; align-items: start; }
.wa-plano { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; box-shadow: var(--shadow); }
.wa-plano--pop { border-color: var(--accent); box-shadow: 0 18px 40px -16px rgba(0, 123, 255, 0.45); }
.wa-plano h3 { font-size: 18px; }
.wa-plano .wa-tier-badge { top: -12px; }
.wa-plano-preco { font: 800 34px/1.1 Roboto, "Segoe UI", sans-serif; letter-spacing: -0.02em; margin: 10px 0 2px; }
.wa-plano-preco small { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.wa-plano-cond { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.wa-plano ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.wa-plano li { font-size: 14.5px; padding-left: 24px; position: relative; }
.wa-plano li::before { content: "✓"; position: absolute; left: 2px; color: var(--ok); font-weight: 700; }
.wa-plano .btn { width: 100%; }
@media (max-width: 900px) { .wa-planos { grid-template-columns: 1fr; } }
.integ-strip { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; }
.integ-strip span { font: 600 13px/1.4 Roboto, "Segoe UI", sans-serif; color: var(--muted); }
.integ-strip img { height: 26px; width: auto; opacity: .85; }


/* (8) strip de integracoes empilhada e centrada */
.integ-strip { flex-direction: column; gap: 14px; }
.integ-strip-icons { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }

/* (9) linha de destaque menor */
.accent-line--menor { font-size: .5em !important; line-height: 1.3 !important; letter-spacing: 0; }

/* (10) painel sem caixa */
.signal-panel--limpo { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.signal-panel--limpo .signal-panel-head { border-bottom: 0; }

/* (3) celula "+27 integracoes" */
.integ-mais-txt { text-align: center; font: 700 15px/1.5 Roboto, "Segoe UI", sans-serif; color: var(--accent); margin: 22px 0 0; }

/* (4) planos selecionaveis */
.plan { cursor: pointer; }
.plan.plan-sel { border-color: var(--accent); box-shadow: 0 18px 44px -16px rgba(0, 123, 255, 0.5); }
.plan.plan-sel .plan-name::after { content: " ✓"; color: var(--accent); }
.pedido-bar {
  display: none; margin: 22px auto 0; max-width: 640px;
  align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid #CFE5FF; border-radius: 14px; padding: 14px 20px;
}
.pedido-bar.on { display: flex; }
.pedido-bar b { color: var(--accent); }

/* (14) card de chamada recebida */
.card-chamada { padding: 16px 18px 18px; width: 250px; }
.ch-head { display: flex; justify-content: space-between; align-items: center; font: 700 10.5px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ch-live { color: var(--ok); display: inline-flex; align-items: center; gap: 5px; letter-spacing: .02em; }
.ch-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulse 1.4s ease infinite; }
.ch-id { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.ch-avatar {
  position: relative; width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font: 800 15px/1 Roboto, "Segoe UI", sans-serif;
}
.ch-avatar::before, .ch-avatar::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid rgba(0, 123, 255, 0.35); opacity: 0;
  animation: orb-eco 2.2s ease-out infinite;
}
.ch-avatar::after { inset: -15px; animation-delay: -1.1s; }
.ch-id b { display: block; font-size: 15px; }
.ch-id small { color: var(--muted); font-size: 12.5px; }
.ch-acoes { display: flex; gap: 14px; justify-content: center; margin: 6px 0 14px; }
.ch-btn {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(10, 20, 40, 0.16);
}
.ch-btn svg { width: 18px; height: 18px; }
.ch-btn--ok { background: #0E9F5B; }
.ch-btn--mudo { background: #EEF1F6; }
.ch-btn--fim { background: #D92D20; }
.ch-transf { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; }
.ch-transf small { font: 700 9.5px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .07em; color: var(--muted); }
.ch-transf div { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.st { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.st--on { background: #0E9F5B; }
.st--busy { background: #D92D20; }


/* (16) arte organica: blob atras + linha fina por cima da pessoa */
.pa-blob, .pa-linha { position: absolute; pointer-events: none; }
.pa-blob { z-index: 0; }
.pa-linha { z-index: 2; }
.collage-pessoa .pa-blob { right: -2%; top: 2%; width: 62%; height: auto; }
.collage-pessoa .pa-linha { right: -6%; top: -2%; width: 70%; height: auto; }
.collage-pessoa .cp-pessoa { z-index: 1; }
.bp-visual .pa-blob { left: 50%; top: 46%; transform: translate(-50%, -50%); width: 88%; }
.bp-visual .pa-linha { left: 50%; top: 44%; transform: translate(-50%, -50%); width: 100%; }
.bp-visual .bp-pessoa { z-index: 1; left: 64%; }
.bp-visual .card-chamada { position: absolute; left: 0; top: 4%; z-index: 3; }
.pessoa-blob .pa-blob { left: 50%; top: 48%; transform: translate(-50%, -50%); width: 92%; }
.pessoa-blob .pa-linha { left: 50%; top: 46%; transform: translate(-50%, -50%); width: 104%; }
@media (max-width: 980px) {
  .bp-visual .card-chamada { position: relative; left: auto; top: auto; width: 100%; max-width: 300px; margin: 0 auto; }
}


/* secao outorga */
.outorga-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.outorga-pessoa { position: relative; min-height: 460px; }
.outorga-pessoa .pa-blob { left: 50%; top: 48%; transform: translate(-50%, -50%); width: 96%; }
.outorga-pessoa .pa-linha { left: 50%; top: 46%; transform: translate(-50%, -50%); width: 106%; }
.outorga-foto {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); height: 96%; width: auto; max-width: none; z-index: 1;
  filter: drop-shadow(0 24px 40px rgba(0, 60, 140, 0.26));
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 97%);
}

.ot-logo { position: absolute; z-index: 1; left: 40.5%; top: 44%; width: 40px; height: auto; opacity: .85; mix-blend-mode: multiply; transform: rotate(-3deg); }
.doc-outorga {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px; box-shadow: var(--shadow);
  font-size: 13.5px; line-height: 1.6;
}
.do-head { text-align: center; font: 700 11px/1.6 Roboto, "Segoe UI", sans-serif; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; }
.do-head b { display: block; color: var(--ink); font-size: 12.5px; letter-spacing: .04em; margin-top: 2px; }
.do-texto { margin: 0 0 14px; color: #3A4354; }
.do-art { font-weight: 700; color: var(--ink); }
.do-texto mark { background: #FFF3C4; padding: 0 3px; border-radius: 3px; }
.do-rodape { display: flex; align-items: center; gap: 10px; border-top: 1px dashed var(--line); padding-top: 12px; font-size: 12px; color: var(--muted); }
.do-selo { font: 800 13px/1 Roboto, "Segoe UI", sans-serif; color: #fff; background: #0E9F5B; border-radius: 6px; padding: 6px 8px; flex: 0 0 auto; }
.outorga-acoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.lic-selo { font: 700 12.5px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
@media (max-width: 980px) {
  .outorga-grid { grid-template-columns: 1fr; gap: 24px; }
  .outorga-pessoa { min-height: 0; height: 380px; }
}
/* cpu explodida (infraestrutura) */
.cpu-explode { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 320px; max-width: 1080px; margin: 40px auto 0; }
.cpu-chip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 176px; height: 176px; z-index: 1; filter: drop-shadow(0 18px 36px rgba(0, 60, 140, 0.35)); animation: chip-respirar 5s ease-in-out infinite; }
@keyframes chip-respirar {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.04); }
}
.spec {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; box-shadow: var(--shadow);
}
.spec b { display: block; font: 700 11.5px/1.5 Roboto, "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.spec p { margin: 0; font-size: 14px; color: var(--muted); }
.spec p strong { color: var(--ink); }
.spec::after { content: ""; position: absolute; top: 50%; width: 44px; border-top: 1.5px dashed rgba(0, 123, 255, 0.45); }
.spec:nth-child(odd)::after { right: -46px; }
.spec:nth-child(even)::after { left: -46px; }
@media (max-width: 900px) {
  .cpu-explode { grid-template-columns: 1fr; gap: 14px; }
  .cpu-chip { position: relative; left: auto; top: auto; transform: none; margin: 0 auto 10px; width: 150px; height: 150px; animation: none; }
  .spec::after { display: none; }
}


/* hero da infraestrutura: painel de stats */
.stats-hero-infra { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stats-hero-infra .stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); }
.stats-hero-infra .stat-n { display: block; font: 800 30px/1.1 Roboto, "Segoe UI", sans-serif; letter-spacing: -0.02em; color: var(--accent); }
.stats-hero-infra .stat-k { font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .stats-hero-infra { grid-template-columns: 1fr; } }


/* grade de marcas (infraestrutura) — uma linha, logos reais */
.marcas-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.marca {
  flex: 1 1 150px; max-width: 190px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.marca img { height: 30px; width: auto; max-width: 76%; }
.marca img[alt="Cisco"], .marca img[alt="Juniper Networks"] { height: 54px; }


/* cases: flex com linhas incompletas centralizadas */
.cases { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.cases .case { flex: 0 1 262px; }

/* (11) infraestrutura viva: particulas + flutuacao das caixas */
.cpu-explode::before {
  content: ""; position: absolute; inset: -60px -40px; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(0, 123, 255, 0.30) 2px, transparent 2.6px),
    radial-gradient(circle, rgba(0, 44, 255, 0.18) 1.6px, transparent 2.2px);
  background-size: 120px 120px, 78px 78px;
  background-position: 0 0, 30px 46px;
  animation: particulas 22s linear infinite;
  opacity: .8;
}
@keyframes particulas {
  from { background-position: 0 0, 30px 46px; }
  to { background-position: 120px -120px, -48px -32px; }
}
.cpu-explode .spec { animation: spec-flutuar 6s ease-in-out infinite alternate; }
.cpu-explode .spec:nth-child(odd) { animation-delay: -3s; }
.cpu-explode .spec:nth-child(3) { animation-delay: -1.5s; }
.cpu-explode .spec:nth-child(6) { animation-delay: -4.5s; }
@keyframes spec-flutuar { from { transform: translateY(4px); } to { transform: translateY(-4px); } }
.spec::after { animation: pulse 2.6s ease infinite; }
@media (prefers-reduced-motion: reduce) {
  .cpu-explode::before, .cpu-explode .spec, .spec::after { animation: none; }
}


/* imagem do documento da outorga */
.doc-img {
  width: 100%; max-width: 520px; display: block;
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 24px 48px -18px rgba(10, 20, 40, 0.35);
}


/* comparador: contraponto na celula Voiicr */
.vs-destaque .c-voiicr small { display: block; color: #fff; font: 600 10.5px/1.5 Roboto, "Segoe UI", sans-serif; letter-spacing: .03em; }
.vs-destaque .c-voiicr small:first-of-type { margin-top: 4px; }

/* (6) hover no hardware first tier */
.marca { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.marca:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: var(--shadow-lift); }
.marca img { transition: transform .22s ease; }
.marca:hover img { transform: scale(1.1); }

/* (5) hero da infraestrutura vivo */
.stats-hero-infra .stat { animation: spec-flutuar 6s ease-in-out infinite alternate; }
.stats-hero-infra .stat:nth-child(2) { animation-delay: -1.6s; }
.stats-hero-infra .stat:nth-child(3) { animation-delay: -3.2s; }
.stats-hero-infra .stat:nth-child(4) { animation-delay: -4.8s; }
.stats-hero-infra .stat:hover { border-color: var(--accent); }
.particulas {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(circle, rgba(0, 123, 255, 0.35) 2px, transparent 2.6px),
    radial-gradient(circle, rgba(0, 44, 255, 0.20) 1.6px, transparent 2.2px);
  background-size: 130px 130px, 84px 84px;
  background-position: 0 0, 40px 50px;
  animation: particulas 26s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .particulas, .stats-hero-infra .stat { animation: none; } }

/* (13) formulario de contato */
.form-contato { max-width: 860px; margin: 0 auto 46px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 30px; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-campo { display: flex; flex-direction: column; gap: 6px; }
.form-campo--full { grid-column: 1 / -1; }
.form-campo label { font: 600 12.5px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.form-campo input, .form-campo select, .form-campo textarea {
  font: 400 15px/1.5 Roboto, "Segoe UI", sans-serif; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
}
.form-campo input:focus, .form-campo select:focus, .form-campo textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); background: #fff; }
.form-campo textarea { min-height: 120px; resize: vertical; }
.form-acao { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.form-nota { font-size: 12.5px; color: var(--muted); }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
/* compliance: blob como luz difusa (sem borda perceptivel) */
.pessoa-blob .pa-blob { filter: blur(9px); }


/* demo ao vivo: capa + chips + modal */
.demo-capa { max-width: 1080px; margin: 34px auto 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lift); border: 1px solid var(--line); background: var(--surface); }
.demo-abrir { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.demo-abrir img { display: block; width: 100%; }
.demo-abrir::after { content: ""; position: absolute; inset: 0; background: rgba(10, 17, 32, 0); transition: background .2s; }
.demo-abrir:hover::after { background: rgba(10, 17, 32, 0.18); }
.demo-cta {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 15px/1 Roboto, "Segoe UI", sans-serif; color: #fff;
  background: var(--accent); border-radius: 999px; padding: 14px 22px;
  box-shadow: 0 14px 34px rgba(0, 60, 180, 0.45);
  transition: transform .2s;
}
.demo-abrir:hover .demo-cta { transform: translate(-50%, -50%) scale(1.05); }
.demo-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.demo-chip {
  font: 600 14px/1 Roboto, "Segoe UI", sans-serif; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 18px; cursor: pointer;
  transition: border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.demo-chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.demo-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 17, 32, 0.74); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 22px;
}
.demo-modal[hidden] { display: none; }
.demo-caixa {
  width: min(1400px, 96vw); height: min(900px, 92vh);
  background: #fff; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  animation: demo-entrar .22s ease;
}
@keyframes demo-entrar { from { transform: scale(0.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.demo-top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.demo-top b { font-size: 14.5px; }
.demo-tag { font: 600 10.5px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); }
.demo-fechar { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font-size: 15px; cursor: pointer; color: var(--muted); }
.demo-fechar:hover { color: var(--ink); border-color: var(--accent); }
#demo-frame { flex: 1; width: 100%; border: 0; background: #F5F8FF; }
@media (max-width: 720px) { .demo-modal { padding: 0; } .demo-caixa { width: 100vw; height: 100dvh; border-radius: 0; } }


/* fallback quando o embed for bloqueado */
.demo-aviso {
  position: absolute; inset: 55px 0 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: #F5F8FF; text-align: center; padding: 24px;
}
.demo-aviso p { max-width: 420px; color: var(--muted); font-size: 14.5px; margin: 0; }
.demo-caixa { position: relative; }


/* feedback do formulario */
.form-fb { margin: 14px 0 0; font: 600 14px/1.5 Roboto, "Segoe UI", sans-serif; }
.form-fb--ok { color: var(--ok); }
.form-fb--erro { color: #D92D20; }


/* rodape: lockup regulatorio (padrao da marca) */
.foot-anatel { display: inline-flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.fa-linha { display: inline-flex; align-items: center; gap: 10px; }
.fa-linha em { font: 400 13.5px/1 Roboto, "Segoe UI", sans-serif; font-style: normal; color: var(--ink); }
.fa-linha img { height: 18px; width: auto; }
.fa-serv { font: 600 10px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .14em; color: var(--muted); }
.foot-anatel:hover .fa-linha em { color: var(--accent); }


/* pagina parceiros */
.par-tabs { display: flex; justify-content: center; gap: 10px; margin: 26px 0 22px; }
.par-tab {
  font: 600 15px/1 Roboto, "Segoe UI", sans-serif; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 26px; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .16s var(--ease-out);
}
.par-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.par-painel { max-width: 760px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 30px 34px; box-shadow: var(--shadow); }
.par-modo { display: none; }
.par-modo.active { display: block; }
.par-modo h3 { font-size: 20px; margin-bottom: 10px; }
.par-modo p { color: var(--muted); font-size: 15.5px; line-height: 1.65; margin: 0 0 16px; }
.par-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.par-lista li { font-size: 14.5px; padding-left: 24px; position: relative; }
.par-lista li::before { content: "✓"; position: absolute; left: 2px; color: var(--ok); font-weight: 700; }
.tiers { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 34px; }
.tierc {
  position: relative; flex: 0 1 196px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px 18px 22px; box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tierc:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--accent); }
.tierc--top { border-color: var(--accent); box-shadow: 0 18px 44px -16px rgba(0, 123, 255, 0.45); }
.tc-selo { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font: 700 10.5px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase; background: var(--accent); color: #fff; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.tc-pct { display: block; font: 800 40px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: -0.02em; color: var(--ink); }
.tc-nome { display: block; font: 700 13px/1.6 Roboto, "Segoe UI", sans-serif; letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; }
.tc-bronze { color: #A05A2C; } .tc-silver { color: #6B7686; } .tc-gold { color: #B8860B; }
.tc-platinum { color: #4A6FA5; } .tc-diamond { color: #7C3AED; }
.tc-faixa { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }


/* pontes da home para compare e infraestrutura */
.ponte-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ponte { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px 30px; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
.ponte:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-lift); }
.ponte h3 { font-size: 20px; margin: 10px 0 8px; }
.ponte p { color: var(--muted); font-size: 14.5px; margin: 0 0 14px; }
.ponte-cta { font: 600 14.5px/1 Roboto, "Segoe UI", sans-serif; color: var(--accent); }
@media (max-width: 860px) { .ponte-grid { grid-template-columns: 1fr; } }


/* nota do trial nos planos */
.trial-nota { text-align: center; font-size: 14px; color: var(--muted); margin: 14px 0 24px; }
.trial-nota b { color: var(--ok); }

/* pre-checkout */
.checkout-box { max-width: 640px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 34px; box-shadow: var(--shadow-lift); }
.ck-resumo { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed var(--line); padding-bottom: 16px; margin-bottom: 16px; }
.ck-resumo b { font-size: 22px; }
.ck-preco { font: 800 30px/1 Roboto, "Segoe UI", sans-serif; color: var(--accent); }
.ck-lista { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.ck-lista li { font-size: 14.5px; padding-left: 24px; position: relative; }
.ck-lista li::before { content: "✓"; position: absolute; left: 2px; color: var(--ok); font-weight: 700; }


/* nav sutil */
.nav-cta .btn { font-weight: 500; font-size: 13.5px; padding: 9px 16px; border-radius: 9px; }

/* compare: softphone e diferenciais */
.sp-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; margin-top: 34px; }
.sp-visual { position: relative; min-height: 460px; }
.sp-card { position: absolute; border-radius: 14px; box-shadow: 0 22px 48px -16px rgba(10, 20, 40, 0.35); border: 1px solid var(--line); }
.sp-card--blf { left: 0; top: 4%; width: 52%; z-index: 1; }
.sp-card--disc { right: 0; top: 0; width: 56%; z-index: 2; }
.sp-plataformas { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; }
.sp-chip { font: 600 12.5px/1 Roboto, "Segoe UI", sans-serif; color: var(--accent); background: var(--accent-soft); border: 1px solid #CFE5FF; border-radius: 999px; padding: 8px 13px; }
.sp-funcoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sp-funcoes li { font-size: 14.5px; padding-left: 24px; position: relative; }
.sp-funcoes li::before { content: "✓"; position: absolute; left: 2px; color: var(--ok); font-weight: 700; }
.dif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.dif { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); transition: transform .2s, border-color .2s, box-shadow .2s; display: block; }
.dif:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-lift); }
.dif h3 { font-size: 17px; margin: 0 0 8px; }
.dif p { font-size: 14px; color: var(--muted); margin: 0; }
@media (max-width: 900px) {
  .sp-grid { grid-template-columns: 1fr; }
  .sp-visual { min-height: 0; display: flex; gap: 12px; }
  .sp-card { position: relative; inset: auto; width: 50%; }
  .dif-grid { grid-template-columns: 1fr; }
}


/* seletor de idioma */
.idioma { position: relative; margin-left: auto; }
.idioma-btn { font: 500 13px/1 Roboto, "Segoe UI", sans-serif; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; cursor: pointer; }
.idioma-btn:hover { color: var(--ink); border-color: var(--accent); }
.idioma-menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lift); padding: 4px; min-width: 148px; z-index: 60; }
.idioma-menu a { display: block; font-size: 12.5px; padding: 5px 9px; border-radius: 7px; color: var(--ink); white-space: nowrap; }
.idioma-menu a:hover { background: var(--accent-soft); color: var(--accent); }
.nav .nav-cta { margin-left: 12px; }
@media (max-width: 1080px) { .idioma { margin-left: auto; } }

/* orb azul escuro (agentes) */
.orb-fluid--escura .orb-nucleo { background: radial-gradient(circle at 32% 30%, #4f9be0 0, #1e63c0 48%, #0b2a70 100%); }
.orb-fluid--escura::before, .orb-fluid--escura::after { border-color: rgba(11, 42, 112, 0.5); }

/* softphone imagem original */
.sp-visual--full { min-height: 0; }
.sp-full { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 24px 52px -18px rgba(10, 20, 40, 0.4); display: block; }
.orb-fluid--escura .orb-onda:nth-child(1) { background: radial-gradient(circle at 30% 40%, #2f5cc0 0, transparent 62%); }
.orb-fluid--escura .orb-onda:nth-child(2) { background: radial-gradient(circle at 70% 60%, #3d78d8 0, transparent 60%); }
.orb-fluid--escura .orb-onda:nth-child(3) { background: radial-gradient(circle at 50% 75%, #5c93e6 0, transparent 55%); opacity: .5; }
.orb-fluid--escura .orb-brilho { opacity: .75; }


/* bandeiras no seletor */
.idioma-flag { width: 20px; height: 14px; border-radius: 3px; display: inline-block; vertical-align: -3px; box-shadow: 0 0 0 1px rgba(10,20,40,.08); }
.idioma-btn { display: inline-flex; align-items: center; gap: 7px; }
.idioma-menu a { display: flex; align-items: center; gap: 8px; }
.idioma-menu .idioma-flag { width: 18px; height: 12.6px; }

/* softphone: duo com BLF saindo de trás do dialpad */
.sp-duo { position: relative; display: flex; justify-content: center; align-items: flex-start; }
.sp-duo .sp-dial { width: 48%; max-width: 350px; position: relative; z-index: 2; display: block; border-radius: 10px; box-shadow: 0 26px 54px -20px rgba(10, 20, 40, 0.38); }
.sp-duo .sp-blf { width: 43%; max-width: 310px; position: relative; z-index: 1; display: block; margin: 26px -44px 0 0; border-radius: 14px; box-shadow: 0 22px 46px -20px rgba(10, 20, 40, 0.32); transform: translateX(70%) scale(0.96); opacity: 0; transition: transform 0.9s cubic-bezier(0.22, 0.9, 0.24, 1) 0.35s, opacity 0.5s ease 0.35s; }
.sp-grid.is-in .sp-blf { transform: translateX(0) scale(1); opacity: 1; }
.sp-logo { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.sp-logo img { width: 22px; height: 22px; display: block; }
@media (prefers-reduced-motion: reduce) { .sp-duo .sp-blf { transform: none; opacity: 1; transition: none; } }
@media (max-width: 760px) { .sp-duo .sp-blf { margin-right: -28px; } }


/* =========================================================
   MEGA-MENU — site unificado
   ========================================================= */
.nav .wrap { position: relative; }
.nav-burger { display: none; margin-left: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); flex: 0 0 auto; }
.nav-burger:hover { border-color: var(--accent); color: var(--accent); }
.nav-menu { display: flex; align-items: stretch; gap: 12px; flex: 1; min-width: 0; }
.nav-menu .idioma, .nav-menu .nav-cta { align-self: center; }
.nav-mega { display: flex; gap: 2px; list-style: none; margin: 0 auto; padding: 0; align-items: stretch; }
.nav-mega > .nav-item { position: static; list-style: none; display: flex; }
.nav-trigger { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; font: 400 13.5px/1 Roboto, "Segoe UI", sans-serif; color: var(--muted); padding: 0 13px; cursor: pointer; white-space: nowrap; transition: color .15s; align-self: stretch; }
a.nav-trigger:hover, .nav-trigger:hover, .nav-mega > .nav-item.open > .nav-trigger { color: var(--ink); }
.caret { width: 7px; height: 7px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s; flex: 0 0 auto; }
.nav-mega > .nav-item.open > .nav-trigger .caret { transform: rotate(225deg) translate(-1px, -1px); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 28px 48px -24px rgba(0, 60, 140, 0.28); display: none; }
.nav-mega > .nav-item.open > .mega { display: block; }
@media (min-width: 1081px) { .nav-mega > .nav-item:hover > .mega, .nav-mega > .nav-item:focus-within > .mega { display: block; } }
.mega-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 4px 0 0; padding: 0 14px; }
.mega .ext { color: var(--accent); font-weight: 700; }
.mega-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
@media (max-width: 1080px) { .mega-chips { grid-template-columns: 1fr; } }
.mega-pad { max-width: 1160px; margin: 0 auto; padding: 30px 28px 36px; display: grid; gap: 34px; }
.mega-3 { grid-template-columns: repeat(3, 1fr); }
.mega-2 { grid-template-columns: 1fr 1fr; }
.mega-col h4 { font: 700 11px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mega-col--full { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 6px; }
.mega-link { display: block; padding: 9px 12px 9px 14px; border-radius: 10px; border-left: 2px solid transparent; transition: background .15s, border-color .15s; }
.mega-link:hover { background: var(--surface-2); border-left-color: var(--accent); }
.mega-link b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.mega-link small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 2px; }
@media (max-width: 1080px) {
  .nav-burger { display: inline-flex; }
  .nav-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lift); flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 28px 22px; max-height: calc(100dvh - 68px); overflow: auto; }
  body.nav-open .nav-menu { display: flex; }
  .nav-mega { flex-direction: column; gap: 0; width: 100%; }
  .nav-trigger { width: 100%; justify-content: space-between; padding: 15px 4px; font-size: 15px; border-bottom: 1px solid var(--line); }
  .mega { position: static; border-bottom: 0; box-shadow: none; }
  .mega-pad { grid-template-columns: 1fr; padding: 4px 0 16px; gap: 16px; }
  .mega-col h4 { padding-bottom: 8px; margin-top: 8px; }
  .idioma { margin-left: 0; margin-top: 16px; }
  .idioma-menu { position: static; box-shadow: none; border: 0; padding: 0; min-width: 0; }
  .nav-cta { margin-left: 0; margin-top: 16px; }
  .nav-cta .btn { flex: 1; }
}
@media (max-width: 560px) {
  .nav .wrap { padding: 0 16px; }
  .nav-menu { left: 0; right: 0; padding: 4px 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { .mega, .caret { transition: none; } }

/* rodapé grande */
.foot-mega { grid-template-columns: 1.5fr repeat(7, 1fr); gap: 26px 18px; }
.foot-mega .foot-col a { font-size: 13.5px; }
.foot-sociais { display: flex; gap: 10px; }
.foot-sociais a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); transition: color .15s, border-color .15s; }
.foot-sociais a:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 1160px) { .foot-mega { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
@media (max-width: 760px) { .foot-mega { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-mega { grid-template-columns: 1fr; } }

/* =========================================================
   Páginas internas — padrões do site unificado
   ========================================================= */
/* faixa de selos grande (~96px) */
.selos-faixa { padding: 34px 0 30px; border-bottom: 1px solid var(--line); background: var(--surface); }
.selos-faixa-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 34px 44px; }
.selos-faixa img { height: 96px; width: auto; object-fit: contain; }

/* três frentes */
.frentes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 42px; }
.frente { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.frente:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--accent); }
.frente .feat-ic { width: 44px; height: 44px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.frente .feat-ic svg { width: 22px; height: 22px; }
.frente h3 { font-size: 19px; margin: 0 0 8px; }
.frente p { margin: 0 0 14px; font-size: 14.5px; color: var(--muted); flex: 1; }
.frente ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; }
.frente li { font-size: 14px; color: var(--ink); padding-left: 22px; position: relative; }
.frente li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.frente .frente-cta { font: 600 14.5px/1 Roboto, "Segoe UI", sans-serif; color: var(--accent); }
@media (max-width: 980px) { .frentes { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* grade de verticais (cartões) */
.vgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 42px; }
.vcard { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--accent); }
.vcard b { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.vcard small { font-size: 13px; color: var(--muted); line-height: 1.5; flex: 1; }
.vcard span { font: 600 13px/1 Roboto, "Segoe UI", sans-serif; color: var(--accent); }
@media (max-width: 980px) { .vgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vgrid { grid-template-columns: 1fr; } }

/* modelos de parceria na home */
.parca { display: flex; flex-direction: column; }
.parca .tag { align-self: flex-start; font: 700 10.5px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .07em; text-transform: uppercase; border-radius: 100px; padding: 6px 11px; background: var(--accent-soft); color: var(--accent); margin-bottom: 14px; }

/* depoimentos */
.depo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 42px; }
.depo { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; }
.depo blockquote { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink); flex: 1; }
.depo blockquote::before { content: "“"; color: var(--accent); font-weight: 900; font-size: 26px; line-height: 0; vertical-align: -8px; margin-right: 2px; }
.depo-who { display: flex; align-items: center; gap: 12px; }
.depo-ava { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font: 800 14px/1 Roboto, "Segoe UI", sans-serif; flex: 0 0 auto; }
.depo-who b { display: block; font-size: 14px; }
.depo-who small { display: block; font-size: 12.5px; color: var(--muted); }
@media (max-width: 980px) { .depo-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* moldura de tela real */
.tela-real { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-lift); }
.tela-real img { width: 100%; display: block; }
.tela-real figcaption { font-size: 12.5px; color: var(--muted); padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface-2); text-align: center; }

/* split de recurso: texto + tela */
.res-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: center; margin-top: 46px; }
.res-split + .res-split { margin-top: 60px; }
.res-split h3 { font-size: 22px; margin: 0 0 10px; }
.res-split p { color: var(--muted); font-size: 15px; margin: 0 0 14px; }
.res-split ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.res-split li { font-size: 14.5px; padding-left: 24px; position: relative; }
.res-split li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.res-split--inv .res-txt { order: 2; }
.res-split--inv .tela-real { order: 1; }
@media (max-width: 900px) { .res-split { grid-template-columns: 1fr; gap: 20px; } .res-split--inv .res-txt { order: 1; } .res-split--inv .tela-real { order: 2; } }

/* vitrine de apps (produtividade) */
.apps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 42px; }
.appcard { display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 14px 18px; box-shadow: var(--shadow); text-align: center; transition: transform .18s ease, box-shadow .18s ease; }
.appcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.app-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--app-cor, var(--accent)); }
.app-ic svg { width: 22px; height: 22px; }
.appcard b { font-size: 14.5px; }
.appcard small { font-size: 12px; color: var(--muted); line-height: 1.45; }
@media (max-width: 900px) { .apps-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .apps-grid { grid-template-columns: 1fr 1fr; } }

/* passos (como funciona) */
.passo-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font: 800 16px/1 Roboto, "Segoe UI", sans-serif; margin-bottom: 14px; }

/* diagrama split de pagamento */
.split-diag { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin-top: 42px; }
.split-no { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; text-align: center; box-shadow: var(--shadow); }
.split-no b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.split-no small { font-size: 13px; color: var(--muted); }
.split-seta { font-size: 26px; color: var(--accent); font-weight: 800; }
.split-pos { grid-column: 2; }
@media (max-width: 760px) { .split-diag { grid-template-columns: 1fr; } .split-seta { transform: rotate(90deg); justify-self: center; } }

/* página de preços */
.pricing-prod { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; text-align: left; }
.pricing-prod h3 { font-size: 17px; margin: 0; }
.pricing-prod .pp-price { font: 800 26px/1.2 Roboto, "Segoe UI", sans-serif; letter-spacing: -0.02em; margin-top: 8px; }
.pricing-prod .pp-price small { font: 600 13px/1 Roboto, "Segoe UI", sans-serif; color: var(--muted); }
.pricing-prod p { font-size: 13.5px; color: var(--muted); margin: 0; flex: 1; }
.pricing-prod a { font: 600 14px/1 Roboto, "Segoe UI", sans-serif; color: var(--accent); margin-top: 12px; }


/* =========================================================
   VITRINE DE TELAS REAIS + planos em 4 colunas (site unificado)
   ========================================================= */
.plans--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1120px) { .plans--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .plans--4 { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

.shots-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 42px; }
@media (max-width: 860px) { .shots-grid { grid-template-columns: 1fr; } }
a.shot-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.shot-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--accent); }
.shot-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.shot-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.shot-card-img--app { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #2f7fd6 0%, #1C6CF1 100%); }
.shot-card-img--app img { width: auto; height: 100%; object-fit: contain; }
.shot-card-body { padding: 16px 20px 18px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.shot-card-body b { font-size: 15.5px; }
.shot-card-body small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.shot-card-body span { font: 600 13px/1 Roboto, "Segoe UI", sans-serif; color: var(--accent); white-space: nowrap; }


/* vitrine de telas reais: complemento */
.tela-real--app { background: linear-gradient(135deg, #E9F2FF 0%, #F7FAFF 60%, #EDF5FF 100%); padding: 28px 0; }
.tela-real--app img { width: auto; max-width: 74%; max-height: 500px; margin: 0 auto; filter: drop-shadow(0 22px 34px rgba(10, 20, 40, 0.28)); }
.scb-txt { min-width: 0; }
.shot-card-body b { display: block; }


/* =========================================================
   RESPONSIVO — variantes sem inline (media queries vivas)
   ========================================================= */
html { scrollbar-gutter: stable; }
.stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .stats-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stats-grid--3 { grid-template-columns: 1fr; } }
.vgrid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .vgrid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vgrid--3 { grid-template-columns: 1fr; } }
.risco-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .risco-grid--2 { grid-template-columns: 1fr; } }


/* =========================================================
   CORREÇÕES RESPONSIVAS — auditoria 360px (tela a tela)
   ========================================================= */
/* mega-menu: painel colado no gatilho (hover contínuo, sem gap) */
.nav-menu { align-self: stretch; }
/* /numeros/: left:64% do desktop vazava p/ mobile e empurrava a pessoa p/ fora */
@media (max-width: 980px) { .bp-visual .bp-pessoa { left: auto; } }
/* /sobre/ e /infraestrutura/: selos estouravam a grade de 3 no mobile */
@media (max-width: 620px) {
  .selos-grid { gap: 26px 16px; }
  .selos-grid .selo { min-width: 0; }
  .selo span { overflow-wrap: anywhere; }
}
/* botões longos (CTA de solução) quebravam a linha em 360px */
@media (max-width: 480px) { .btn { white-space: normal; } }

/* /sobre/ e /infraestrutura/: a camada de partículas do cpu-explode sangrava 40px à direita */
@media (max-width: 900px) {
  .cpu-explode { overflow-x: clip; }
  .cpu-explode::before { inset: -30px -10px; }
}

/* jornada all-in-one */
.jornada { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 30px; }
.jor { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px; display: grid; gap: 6px; position: relative; }
.jor-n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 13px/26px Roboto, "Segoe UI", sans-serif; text-align: center; }
.jor b { font-size: 15px; }
.jor small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.jor:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--accent); font-weight: 700; z-index: 1; }
@media (max-width: 1080px) { .jornada { grid-template-columns: 1fr 1fr; } .jor::after { display: none; } }
@media (max-width: 560px) { .jornada { grid-template-columns: 1fr; } }

/* arquitetura de borda única */
.arq { display: grid; grid-template-columns: 1fr 2.3fr; gap: 18px; align-items: stretch; margin: 30px 0 34px; }
.arq-protegido { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; border: 2px dashed var(--accent); border-radius: 20px; padding: 12px; position: relative; }
.arq-protegido::before { content: "PERÍMETRO PROTEGIDO"; position: absolute; top: -9px; left: 22px; background: #fff; padding: 0 8px; font: 700 10px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: 1px; color: var(--accent); }
.arq-titulo { display: block; font: 700 11px/1.3 Roboto, "Segoe UI", sans-serif; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.arq-col { border: 1px dashed var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.arq-col--dentro { border-style: solid; background: var(--accent-soft); border-color: #CFE5FF; }
.arq-item { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font: 500 13.5px/1.35 Roboto, "Segoe UI", sans-serif; }
.arq-item small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.arq-borda { border: 2px solid var(--accent); border-radius: 16px; padding: 20px 18px; background: #fff; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 18px 40px -22px rgba(0, 90, 220, 0.35); position: relative; }
.arq-borda b { font-size: 17px; margin-bottom: 6px; }
.arq-borda p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .arq, .arq-protegido { grid-template-columns: 1fr; } }

/* nota white label */
.wl-nota { margin-top: 22px; text-align: center; color: var(--muted); font-size: 14px; }
.wl-nota a { color: var(--accent); font-weight: 500; }

/* UC em movimento: telas reais em rotação */
.uc-motion { position: relative; margin: 30px 0 26px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 26px 56px -24px rgba(10, 20, 40, 0.35); aspect-ratio: 16 / 8.2; background: #F4F8FF; }
.uc-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; animation: ucfade 24s infinite; }
.uc-slide img { width: 100%; height: 100%; object-fit: cover; object-position: top center; animation: uczoom 24s infinite; }
.uc-slide--app img { object-fit: contain; padding: 20px; }
.uc-slide:nth-child(1) { animation-delay: 0s; }
.uc-slide:nth-child(2) { animation-delay: 6s; }
.uc-slide:nth-child(3) { animation-delay: 12s; }
.uc-slide:nth-child(4) { animation-delay: 18s; }
.uc-slide:nth-child(1) img { animation-delay: 0s; }
.uc-slide:nth-child(2) img { animation-delay: 6s; }
.uc-slide:nth-child(3) img { animation-delay: 12s; }
.uc-slide:nth-child(4) img { animation-delay: 18s; }
@keyframes ucfade { 0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; } 31% { opacity: 0; } 100% { opacity: 0; } }
@keyframes uczoom { 0% { transform: scale(1); } 31% { transform: scale(1.045); } 100% { transform: scale(1.045); } }
.uc-motion figcaption { position: absolute; left: 14px; bottom: 12px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font: 500 12px/1 Roboto, "Segoe UI", sans-serif; color: var(--muted); z-index: 2; }
@media (prefers-reduced-motion: reduce) { .uc-slide, .uc-slide img { animation: none; } .uc-slide:first-child { opacity: 1; } }

/* faixa de stats: centralizada */
.stats-grid--3 { grid-template-columns: repeat(3, 1fr); justify-items: center; text-align: center; }

/* licença por ramal */
.lic-topo { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; margin: 26px 0 10px; }
.lic-qtd { display: flex; align-items: center; gap: 12px; }
.lic-qtd label { font: 700 11.5px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .8px; color: var(--muted); }
.lic-qtd input { width: 88px; font: 700 17px/1 Roboto, "Segoe UI", sans-serif; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; text-align: center; }
.lic-prazos { display: flex; flex-wrap: wrap; gap: 8px; }
.lic-prazo { font: 500 13px/1 Roboto, "Segoe UI", sans-serif; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.lic-prazo small { color: var(--accent); font-weight: 700; }
.lic-prazo.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.lic-prazo.active small { color: #DCEBFF; }
.lic-resumo { border-left: 3px solid var(--accent); background: #fff; border-radius: 0 10px 10px 0; padding: 10px 14px; font-size: 13.5px; color: var(--muted); margin: 0 0 22px; text-align: left; }
.lic-resumo b { color: var(--ink); }
.plans-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .plans-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .plans-4 { grid-template-columns: 1fr; } }
.lic-nota { text-align: center; color: var(--muted); font-size: 13.5px; max-width: 760px; margin: 18px auto 30px; }
.ftable-5 .ftable-row { grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr; }

/* vitrine de apps: janela flutuando sobre gradiente suave (nunca fundo chapado) */
.app-vitrine, .shot-card-img--app { background: linear-gradient(135deg, #E9F2FF 0%, #F7FAFF 60%, #EDF5FF 100%); display: flex; align-items: center; justify-content: center; }
.shot-card-img--app img, .app-vitrine img { width: auto; max-width: 78%; max-height: 84%; object-fit: contain; filter: drop-shadow(0 22px 34px rgba(10, 20, 40, 0.28)); }
.uc-slide--app { background: linear-gradient(135deg, #E9F2FF, #F7FAFF); }
.uc-slide--app img { object-fit: contain; padding: 26px; width: auto; max-width: 60%; margin: 0 auto; filter: drop-shadow(0 20px 32px rgba(10, 20, 40, 0.26)); }

/* cards de apps: alturas uniformes */
.shots-grid .shot-card-img { height: 330px; overflow: hidden; display: flex; }
.shots-grid .shot-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.shots-grid .shot-card-img--app img { width: auto; height: auto; max-width: 72%; max-height: 86%; margin: auto; object-fit: contain; }

/* softphone em destaque: elementos soltos flutuando */
.sp-float { position: relative; min-height: 540px; display: flex; align-items: center; justify-content: center; }
.sp-float .spf-janela { width: clamp(240px, 26vw, 320px); position: relative; z-index: 2; filter: drop-shadow(0 30px 50px rgba(10, 20, 40, 0.32)); animation: spfloat 7s ease-in-out infinite; }
.sp-float .spf-blf { position: absolute; left: 0; top: 8%; width: clamp(200px, 20vw, 250px); border-radius: 14px; box-shadow: 0 22px 44px -18px rgba(10, 20, 40, 0.3); z-index: 1; animation: spfloat 9s ease-in-out 0.8s infinite; }
.sp-float .card-chamada { position: absolute; right: 0; bottom: 6%; z-index: 3; animation: spfloat 8s ease-in-out 1.6s infinite; }
.sp-float .orb-fluid--spf { position: absolute; right: 6%; top: 4%; transform: scale(0.7); z-index: 0; }
@keyframes spfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .sp-float .spf-janela, .sp-float .spf-blf, .sp-float .card-chamada { animation: none; } }
@media (max-width: 900px) { .sp-float { min-height: 440px; } .sp-float .spf-blf { left: -6px; } }

/* janela real solta, sem moldura nem legenda */
.janela-solta { display: flex; justify-content: center; }
.janela-solta img { width: 100%; max-width: 860px; border-radius: 14px; box-shadow: 0 30px 60px -24px rgba(10, 20, 40, 0.38); }

/* vitrine com lista seletora */
.vitrine-tabs { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: stretch; margin-top: 30px; }
.vt-lista { display: flex; flex-direction: column; gap: 10px; }
.vt-item { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; display: grid; gap: 3px; font-family: Roboto, "Segoe UI", sans-serif; }
.vt-item b { font-size: 14.5px; color: var(--ink); }
.vt-item small { font-size: 12.5px; color: var(--muted); }
.vt-item:hover { border-color: var(--accent); }
.vt-item.active { border-color: var(--accent); box-shadow: 0 8px 22px -12px rgba(0, 90, 220, 0.35); }
.vt-item.active b { color: var(--accent); }
.vt-stage { display: flex; align-items: center; justify-content: center; min-height: 520px; }
.vt-stage img { max-width: 100%; max-height: 600px; width: auto; height: auto; filter: drop-shadow(0 26px 42px rgba(10, 20, 40, 0.30)); border-radius: 12px; transition: opacity 0.25s ease; }
@media (max-width: 900px) { .vitrine-tabs { grid-template-columns: 1fr; } .vt-lista { flex-direction: row; flex-wrap: wrap; } .vt-item { flex: 1 1 45%; } .vt-stage { min-height: 320px; } }

/* pricing compacto (estilo painel de faturamento) */
.plans-4 { gap: 14px; }
.plans-4 .plan { padding: 20px 18px; }
.plans-4 .plan-name { font-size: 15px; }
.plans-4 .plan-price { white-space: nowrap; }
.plans-4 .plan-price .n { font-size: 27px; }
.plans-4 .plan-price .u { font-size: 12px; }
.plans-4 .plan-price-note { font-size: 12px; }
.plans-4 .plan-desc { font-size: 13px; }
.plans-4 ul { gap: 7px; }
.plans-4 li { font-size: 12.8px; line-height: 1.45; }
.plans-4 .btn { font-size: 13px; padding: 10px 14px; }
#planos .wrap.plans-center, #pbx .wrap.plans-center { max-width: 1280px; }

/* office: documento vivo + ícones-partícula */
.office-vivo { position: relative; min-height: 520px; display: flex; align-items: center; justify-content: center; }
.ov-doc { position: relative; z-index: 2; width: min(430px, 92%); background: #fff; border-radius: 16px; box-shadow: 0 30px 60px -24px rgba(10, 20, 40, 0.35); overflow: hidden; }
.ov-doc-top { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); font: 500 12.5px/1 Roboto, "Segoe UI", sans-serif; color: var(--muted); }
.ov-ia { margin-left: auto; color: var(--ok); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ov-ia::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulse 1.6s ease infinite; }
.ov-doc-pagina { padding: 20px 22px 26px; min-height: 300px; }
.ov-doc-pagina h5 { font: 700 15px/1.3 Roboto, "Segoe UI", sans-serif; margin: 0 0 12px; color: var(--ink); }
#ov-texto { font: 400 13.5px/1.7 Roboto, "Segoe UI", sans-serif; color: #3A4354; white-space: pre-wrap; margin: 0; display: inline; }
.ov-cursor { display: inline-block; width: 2px; height: 15px; background: var(--accent); vertical-align: -2px; margin-left: 1px; animation: ovpisca 0.9s step-end infinite; }
@keyframes ovpisca { 50% { opacity: 0; } }
.ov-part { position: absolute; z-index: 1; filter: drop-shadow(0 10px 18px rgba(10, 20, 40, 0.18)); opacity: 0.95; }
.ov-p1 { width: 56px; left: 4%; top: 10%; animation: ovfl1 9s ease-in-out infinite; }
.ov-p2 { width: 44px; right: 6%; top: 16%; animation: ovfl2 11s ease-in-out infinite; }
.ov-p3 { width: 50px; left: 8%; bottom: 12%; animation: ovfl3 10s ease-in-out infinite; }
.ov-p4 { width: 40px; right: 3%; bottom: 22%; border-radius: 10px; animation: ovfl2 12s ease-in-out 1s infinite; }
.ov-p5 { width: 30px; right: 22%; top: 2%; opacity: 0.7; animation: ovfl3 13s ease-in-out 2s infinite; }
.ov-p6 { width: 26px; left: 22%; top: -2%; opacity: 0.65; animation: ovfl1 14s ease-in-out 1.4s infinite; }
@keyframes ovfl1 { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(10px, -22px) rotate(5deg); } }
@keyframes ovfl2 { 0%, 100% { transform: translate(0, 0) rotate(5deg); } 50% { transform: translate(-14px, 18px) rotate(-4deg); } }
@keyframes ovfl3 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(12px, 14px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .ov-part, .ov-cursor { animation: none; } }

/* office: janela real + blocos flutuantes */
.office-mostra { position: relative; display: flex; justify-content: center; padding: 26px 0; }
.om-janela { width: 100%; max-width: 1020px; border-radius: 14px; filter: drop-shadow(0 30px 55px rgba(10, 20, 40, 0.32)); }
.om-chip { position: absolute; display: flex; align-items: center; gap: 11px; background: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: 0 18px 38px -14px rgba(10, 20, 40, 0.28); z-index: 2; max-width: 300px; }
.om-chip b { display: block; font: 700 14px/1.2 Roboto, "Segoe UI", sans-serif; color: var(--ink); }
.om-chip small { display: block; font: 400 12px/1.4 Roboto, "Segoe UI", sans-serif; color: var(--muted); margin-top: 2px; }
.om-c1 { left: 2%; top: 6%; animation: ovfl1 10s ease-in-out infinite; }
.om-c2 { right: 1%; top: 34%; animation: ovfl2 12s ease-in-out 0.8s infinite; }
.om-c3 { left: 5%; bottom: 8%; animation: ovfl3 11s ease-in-out 1.5s infinite; }
@media (max-width: 860px) { .om-chip { position: static; margin: 8px auto 0; } .office-mostra { flex-direction: column; align-items: center; } }
@media (prefers-reduced-motion: reduce) { .om-chip { animation: none; } }

/* caminho de cada ligação */
.caminho { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 12px; align-items: stretch; margin-top: 30px; }
.cam-col { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.cam-col--forte { border-color: var(--accent); box-shadow: 0 14px 32px -18px rgba(0, 90, 220, 0.35); }
.cam-titulo { display: block; font: 700 11.5px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .8px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.cam-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cam-col li { font-size: 13px; line-height: 1.45; padding-left: 18px; position: relative; }
.cam-col li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; font-size: 12px; }
.cam-seta { align-self: center; color: var(--accent); font-weight: 700; font-size: 18px; }
@media (max-width: 1000px) { .caminho { grid-template-columns: 1fr 1fr; } .cam-seta { display: none; } }
@media (max-width: 560px) { .caminho { grid-template-columns: 1fr; } }

/* comparação plataforma × operadora (clara) */
.vs { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 26px 18px; margin-top: 34px; box-shadow: 0 18px 40px -24px rgba(10, 20, 40, 0.18); }
.vs-head h3 { font-size: 19px; margin: 0 0 16px; }
.vs-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 11px 0; border-top: 1px solid var(--line); }
.vs-x, .vs-ok { font-size: 13.5px; line-height: 1.5; padding-left: 24px; position: relative; }
.vs-x { color: #A33; }
.vs-x::before { content: "✕"; position: absolute; left: 2px; font-weight: 700; }
.vs-ok { color: #14683A; }
.vs-ok::before { content: "✓"; position: absolute; left: 2px; font-weight: 700; color: var(--ok); }
.vs-cta { text-align: right; margin: 12px 0 0; }
.vs-cta a { color: var(--accent); font-weight: 600; font-size: 14px; }
@media (max-width: 700px) { .vs-linha { grid-template-columns: 1fr; gap: 8px; } }
.vcard--cta { background: var(--accent); border-color: var(--accent); }
.vcard--cta b, .vcard--cta small, .vcard--cta span { color: #fff; }

/* hub: um ramal, um histórico */
.hub { position: relative; max-width: 900px; margin: 34px auto 0; aspect-ratio: 16 / 9.5; }
.hub-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 168px; height: 168px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #4A9BFF, #1B46C9); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; z-index: 2; box-shadow: 0 24px 50px -18px rgba(0, 60, 180, 0.55); }
.hub-centro img { width: 84px; filter: brightness(0) invert(1); }
.hub-centro small { font: 700 10.5px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: 1px; }
.hub-linhas { position: absolute; inset: 0; z-index: 0; }
.hub-no { position: absolute; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 13px; padding: 12px 16px; box-shadow: 0 16px 34px -14px rgba(10, 20, 40, 0.25); z-index: 1; }
.hub-no b { display: block; font-size: 14px; }
.hub-no small { display: block; font-size: 11.5px; color: var(--muted); }
.hub-no .feat-ic { width: 38px; height: 38px; min-width: 38px; }
.hub-dot { position: absolute; right: 9px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse 1.8s ease infinite; }
.hub-n1 { left: 50%; top: 0; transform: translateX(-50%); animation: ovfl1 10s ease-in-out infinite; }
.hub-n2 { left: 4%; top: 16%; animation: ovfl2 11s ease-in-out .5s infinite; }
.hub-n3 { right: 4%; top: 16%; animation: ovfl3 12s ease-in-out 1s infinite; }
.hub-n4 { left: 4%; bottom: 14%; animation: ovfl3 11s ease-in-out 1.6s infinite; }
.hub-n5 { right: 4%; bottom: 14%; animation: ovfl1 12s ease-in-out .8s infinite; }
.hub-n6 { left: 50%; bottom: 0; transform: translateX(-50%); animation: ovfl2 10s ease-in-out 2s infinite; }
@media (max-width: 760px) { .hub { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 190px; } .hub-no { position: static; transform: none !important; } .hub-centro { top: 84px; } .hub-linhas { display: none; } }

/* softphone animado dentro da vitrine */
.vt-panel.sp-duo { width: 100%; max-width: 640px; padding: 10px 0; }
.vt-panel.sp-duo.is-on .sp-blf { transform: translateX(0) scale(1); opacity: 1; }
.vt-stage .sp-duo img { filter: none; border-radius: 12px; }
.vt-stage [hidden] { display: none !important; }

/* hero PABX: softphone e BLF 30% menores, BLF à frente e à esquerda */
.sp-float .spf-janela { width: clamp(168px, 18.2vw, 224px); }
.sp-float .spf-blf { width: clamp(140px, 14vw, 175px); left: calc(50% - 250px); top: 14%; z-index: 3; box-shadow: 0 24px 46px -16px rgba(10, 20, 40, 0.34); }
.sp-float .card-chamada { z-index: 4; }
@media (max-width: 900px) { .sp-float .spf-blf { left: calc(50% - 200px); } }
.sp-float .spf-blf { left: calc(50% - 292px); top: 16%; }
.sp-float .card-chamada { right: -3%; bottom: 2%; }
@media (max-width: 900px) { .sp-float .spf-blf { left: calc(50% - 230px); } .sp-float .card-chamada { right: 0; } }
.sp-float .spf-janela { width: clamp(202px, 21.8vw, 269px); }
.sp-float .spf-blf { left: calc(50% - 315px); }
@media (max-width: 900px) { .sp-float .spf-blf { left: calc(50% - 250px); } }

/* carrossel automático de telas reais */
.carrossel { max-width: 1020px; margin: 30px auto 0; }
.car-trilho { position: relative; aspect-ratio: 1982 / 1115; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(10, 20, 40, 0.38); background: #F4F8FF; }
.car-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.015); transition: opacity 0.7s ease, transform 5.5s ease; }
.car-slide.is-on { opacity: 1; transform: scale(1); }
.car-slide img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.car-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.car-dot { font: 500 12.5px/1 Roboto, "Segoe UI", sans-serif; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; position: relative; overflow: hidden; }
.car-dot.is-on { color: var(--accent); border-color: var(--accent); }
.car-dot.is-on::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; animation: carbarra var(--car-ms, 5000ms) linear forwards; }
@keyframes carbarra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .car-slide { transition: none; transform: none; } .car-dot.is-on::after { animation: none; } }

/* páginas legais */
.legal { max-width: 820px; }
.legal h1 { font-size: clamp(30px, 4vw, 42px); margin: 10px 0 8px; }
.legal-meta { color: var(--muted); font-size: 13.5px; }
.legal-corpo { margin-top: 26px; }
.legal-corpo h2 { font-size: 19px; margin: 30px 0 10px; }
.legal-corpo p { font-size: 15px; line-height: 1.75; color: #3A4354; margin: 0 0 14px; }

/* bloco de código (docs) */
.codigo { background: #F7FAFF; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px -26px rgba(10, 20, 40, 0.3); }
.codigo-top { padding: 10px 16px; border-bottom: 1px solid var(--line); font: 500 12px/1 Roboto, "Segoe UI", sans-serif; color: var(--muted); }
.codigo pre { margin: 0; padding: 18px 18px 20px; overflow-x: auto; font: 13px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace; color: #1F2A3D; }
.codigo .c-k { color: var(--accent); font-weight: 600; }
.codigo .c-s { color: #14683A; }
.codigo .c-m { color: #8A94A6; }

/* =========================================================
   Foco — câmera que percorre a tela real do produto
   ========================================================= */
.foco { position: relative; margin: 0; }
.foco-palco {
  position: relative; aspect-ratio: 16 / 11; overflow: hidden; perspective: 1600px;
  -webkit-mask-image: radial-gradient(ellipse 80% 78% at 50% 50%, #000 55%, rgba(0,0,0,.6) 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 78% at 50% 50%, #000 55%, rgba(0,0,0,.6) 78%, transparent 100%);
}
.foco-tela {
  position: absolute; left: 0; top: 0; width: 100%; transform-origin: 0 0; transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(.22, 1, .36, 1); will-change: transform;
}
.foco-tela img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 30px 60px -30px rgba(11,40,90,.35); }
.foco-alvo {
  position: absolute; border-radius: 10px; pointer-events: none;
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 4000px rgba(246,248,252,.62), 0 0 0 6px rgba(0,123,255,.12), 0 18px 40px -12px rgba(0,123,255,.35);
  transition: left 1.5s cubic-bezier(.22,1,.36,1), top 1.5s cubic-bezier(.22,1,.36,1), width 1.5s cubic-bezier(.22,1,.36,1), height 1.5s cubic-bezier(.22,1,.36,1), opacity .6s;
}
.foco.is-geral .foco-alvo { opacity: 0; }
.foco-legenda {
  position: relative; display: table; margin: 14px auto 0; padding: 6px 16px;
  font: 500 14px/1.4 Roboto, "Segoe UI", sans-serif; color: #353D4A; letter-spacing: .01em;
  transition: opacity .45s, transform .45s;
}
.foco-legenda::before, .foco-legenda::after { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid var(--accent); }
.foco-legenda::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.foco-legenda::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.foco-legenda.is-trocando { opacity: 0; transform: translateY(6px); }
.foco-pontos { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.foco-pontos i { width: 18px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; position: relative; }
.foco-pontos i.is-ativo::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; animation: focoBarra var(--foco-tempo, 3.4s) linear forwards; }
@keyframes focoBarra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .foco-tela, .foco-alvo { transition: none; } .foco-pontos i.is-ativo::after { animation: none; transform: none; } }

/* IA Pessoal — cartão de registro */
.ia-cartao { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: 0 30px 60px -30px rgba(11,40,90,.3), 0 0 0 6px rgba(0,123,255,.05); max-width: 440px; margin-left: auto; }
.ia-cartao-topo { display: flex; justify-content: space-between; align-items: center; font: 700 11.5px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .1em; color: var(--accent); margin-bottom: 14px; }
.ia-linha { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; font-size: 13.5px; opacity: 0; transform: translateY(8px); animation: iaSobe .5s ease forwards; }
.ia-linha span { color: #5B6575; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.ia-linha:nth-of-type(2) { animation-delay: .15s } .ia-linha:nth-of-type(3) { animation-delay: .3s } .ia-linha:nth-of-type(4) { animation-delay: .45s } .ia-linha:nth-of-type(5) { animation-delay: .6s }
.ia-texto { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); min-height: 92px; }
.ia-texto span { font: 700 10.5px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .1em; color: var(--accent); }
.ia-texto p { margin: 8px 0 0; font-size: 14px; color: #1D2433; }
.ia-texto p::after { content: "▍"; color: var(--accent); animation: iaPisca 1s steps(1) infinite; }
.ia-ok { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: rgba(18,161,80,.08); color: #0E7A3D; font-weight: 600; font-size: 13.5px; opacity: 0; transition: opacity .5s; }
.ia-cartao.is-pronto .ia-ok { opacity: 1; }
@keyframes iaSobe { to { opacity: 1; transform: none; } }
@keyframes iaPisca { 50% { opacity: 0; } }
@media (max-width: 860px) { .ia-cartao { margin: 28px auto 0; } }

/* Softphone — blocos flutuantes reconstruídos do app real */
.spb-ciclo { position: absolute; right: -2%; bottom: 0; z-index: 4; width: 300px; height: 300px; }
.spb-bloco { position: absolute; left: 0; right: 0; bottom: 34px; background: #fff; border: 1px solid #E5E9F0; border-radius: 22px; padding: 16px; font-family: Roboto, "Segoe UI", sans-serif; color: #111827;
  box-shadow: 0 26px 50px -20px rgba(10,20,40,.32), 0 2px 6px rgba(10,20,40,.05);
  opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .55s ease, transform .7s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.spb-bloco.is-ativo { opacity: 1; transform: none; animation: spfloat 8s ease-in-out infinite; }
.spb-legenda { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font: 600 12px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); transition: opacity .3s; }
.spb-av { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 Roboto, sans-serif; }
.spb-av--ic { border-radius: 50%; } .spb-av svg { width: 18px; height: 18px; }
.spb-st { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: #6B7280; }
.spb-st--on { background: #22c55e; } .spb-st--busy { background: #ef4444; } .spb-st--warn { background: #f59e0b; } .spb-st--ring { background: #3b82f6; animation: pulse 1.2s infinite; }
.spb-push { display: flex; align-items: center; gap: 10px; }
.spb-push-info { flex: 1; min-width: 0; } .spb-push-info b { display: block; font-size: 14px; } .spb-push-info small { font-size: 12px; color: #4B5563; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.spb-flag { width: 14px; height: 10px; border-radius: 2px; }
.spb-rbtn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.spb-rbtn svg { width: 17px; height: 17px; } .spb-rbtn.reject { background: #ef4444; } .spb-rbtn.accept { background: #22c55e; }
.spb-rot { display: inline-flex; transform: rotate(135deg); }
.spb-pulsa { box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: spbPulsa 1.6s infinite; }
@keyframes spbPulsa { 70% { box-shadow: 0 0 0 12px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.spb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .spb-head b { display: block; font-size: 15px; } .spb-head small { font-size: 12.5px; color: #4B5563; }
.spb-ctls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.spb-ctl { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border-radius: 14px; background: #F3F5F9; color: #374151; font-size: 11px; }
.spb-ctl svg { width: 18px; height: 18px; } .spb-ctl.on { background: #E8F0FE; color: #2563eb; } .spb-ctl.on.warn { background: #FEF3C7; color: #B45309; }
.spb-sheet-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .spb-sheet-top b { font-size: 15px; } .spb-x { width: 18px; height: 18px; color: #6B7280; }
.spb-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.spb-tabs span { text-align: center; padding: 7px 0; border-radius: 11px; border: 1px solid #E5E7EB; font-size: 13px; color: #6B7280; }
.spb-tabs span.is-on { background: #E8F0FE; border-color: #BFD3FB; color: #2563eb; }
.spb-busca { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #E5E7EB; border-radius: 11px; background: #F8FAFC; color: #6B7280; font-size: 12.5px; margin-bottom: 8px; } .spb-busca svg { width: 15px; height: 15px; }
.spb-lista { display: grid; gap: 4px; }
.spb-pessoa { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 10px; border: 1px solid transparent; }
.spb-pessoa .spb-av { width: 30px; height: 30px; font-size: 11.5px; border-radius: 8px; }
.spb-pessoa > div { flex: 1; min-width: 0; } .spb-pessoa b { display: block; font-size: 13px; font-weight: 500; } .spb-pessoa small { font-size: 11.5px; color: #4B5563; white-space: nowrap; }
.spb-pessoa.is-sel { border-color: #BFD3FB; background: #F5F8FF; } .spb-tr { width: 17px; height: 17px; color: #111827; }
@media (prefers-reduced-motion: reduce) { .spb-bloco.is-ativo { animation: none; } .spb-pulsa { animation: none; } }
@media (max-width: 900px) { .spb-ciclo { position: relative; right: auto; margin: 16px auto 0; width: min(300px, 100%); } .sp-float { flex-direction: column; } }

/* =========================================================
   Revisão de movimento (regras Emil Kowalski / taste)
   ========================================================= */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); }
/* Botões: resposta ao toque — escala sutil no :active, transição só de propriedades específicas */
.btn, .par-tab, .vt-tab, .faq-item summary, .vcard, .integ { transition-timing-function: var(--ease-out); }
.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .16s var(--ease-out); }
.btn:active, .par-tab:active, .vcard:active { transform: scale(0.97); }
/* Hover com deslocamento só em quem tem mouse (no toque o hover "gruda" após o tap) */
@media (hover: none) {
  .btn-primary:hover, .integ:hover { transform: none; }
}
/* Entrada em cascata dos grupos que aparecem juntos (30–80 ms entre itens) */
.feat-grid > .reveal:nth-child(2), .steps > .reveal:nth-child(2), .integ-grid .integ:nth-child(2) { transition-delay: 60ms; }
.feat-grid > .reveal:nth-child(3), .steps > .reveal:nth-child(3) { transition-delay: 120ms; }
.feat-grid > .reveal:nth-child(4) { transition-delay: 60ms; }
.feat-grid > .reveal:nth-child(5) { transition-delay: 120ms; }
.feat-grid > .reveal:nth-child(6) { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) { .btn:active, .par-tab:active, .vcard:active { transform: none; } }
a, button, summary { -webkit-tap-highlight-color: transparent; }

/* =========================================================
   Cena: pessoa + forma abstrata + cartões flutuantes
   ========================================================= */
.cena { position: relative; margin: 0 auto; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; }
.cn-forma { position: absolute; left: 12%; right: 8%; top: 14%; bottom: 0; border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%;
  background: radial-gradient(120% 90% at 30% 20%, #DCEBFF 0%, #B9D6FF 45%, #7FB2FF 100%); opacity: .9;
  animation: cnMorfa 14s var(--ease-in-out, ease-in-out) infinite alternate; }
.cn-forma::after { content: ""; position: absolute; inset: -8%; border-radius: inherit; border: 1.5px dashed rgba(0,123,255,.28); animation: cnGira 40s linear infinite; }
.cn-pessoa { position: absolute; left: 50%; bottom: 0; height: 96%; width: auto; transform: translateX(-50%); z-index: 1; filter: drop-shadow(0 24px 30px rgba(11,40,90,.18)); }
.cn-cartao { position: absolute; z-index: 2; background: #fff; border: 1px solid #E4E9F2; border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 18px 40px -16px rgba(11,40,90,.28); font: 400 12.5px/1.35 Roboto, "Segoe UI", sans-serif; color: #353D4A; min-width: 150px;
  opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.cena.is-viva .cn-cartao { opacity: 1; transform: none; }
.cena.is-viva .cn-c2 { transition-delay: 120ms; } .cena.is-viva .cn-c3 { transition-delay: 240ms; }
.cn-cartao > * { display: block; }
.cena.is-viva .cn-c1 { animation: spfloat 7s ease-in-out 1s infinite; } .cena.is-viva .cn-c2 { animation: spfloat 8s ease-in-out 1.6s infinite; } .cena.is-viva .cn-c3 { animation: spfloat 9s ease-in-out 2.2s infinite; }
.cn-c1 { left: -4%; top: 10%; } .cn-c2 { right: -6%; top: 36%; min-width: 180px; } .cn-c3 { left: 0; bottom: 8%; }
.cn-rot { font: 700 10.5px/1.2 Roboto, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.cn-cartao strong { font: 800 24px/1.1 Roboto, sans-serif; color: #0B0D12; } .cn-cartao strong.cn-nome { font-size: 15px; }
.cn-cartao b { font-weight: 700; color: #0B0D12; } .cn-cartao small { color: #4B5563; font-size: 12px; margin-top: 3px; }
.cn-up { color: #0E7A3D !important; font-weight: 600; }
.cn-vivo { display: inline-flex !important; align-items: center; gap: 6px; font: 700 11px/1 Roboto, sans-serif; color: #0E7A3D; background: rgba(18,161,80,.1); padding: 4px 8px; border-radius: 999px; margin-bottom: 6px; width: max-content; }
.cn-vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; animation: pulse 1.6s infinite; }
.cn-barras { display: flex !important; align-items: flex-end; gap: 5px; height: 46px; }
.cn-barras i { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; background: linear-gradient(#5AA2FF, #007BFF); transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--ease-out) calc(300ms + var(--d)); }
.cena.is-viva .cn-barras i { transform: scaleY(1); }
.cn-onda { display: flex !important; align-items: center; gap: 3px; height: 30px; }
.cn-onda i { width: 4px; height: 100%; border-radius: 2px; background: var(--accent); transform: scaleY(.3); animation: cnOnda 1.1s ease-in-out var(--d) infinite; }
.cn-linha { width: 180px; height: 54px; } .cn-linha path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) .4s; }
.cena.is-viva .cn-linha path { stroke-dashoffset: 0; }
@keyframes cnMorfa { to { border-radius: 58% 42% 55% 45% / 42% 58% 42% 58%; transform: rotate(6deg) scale(1.03); } }
@keyframes cnGira { to { transform: rotate(360deg); } }
@keyframes cnOnda { 50% { transform: scaleY(1); } }
@media (max-width: 640px) { .cn-c1 { left: 0; } .cn-c2 { right: 0; } .cn-cartao { min-width: 0; font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) {
  .cn-forma, .cn-forma::after, .cn-onda i, .cena.is-viva .cn-cartao { animation: none; }
  .cn-cartao { opacity: 1; transform: none; } .cn-barras i { transform: none; } .cn-linha path { stroke-dashoffset: 0; }
}
/* Cena: cores de status e identidade */
.cn-rot { display: flex !important; align-items: center; gap: 6px; }
.cn-ic { display: inline-flex; width: 16px; height: 16px; border-radius: 5px; align-items: center; justify-content: center; font: 800 10px/1 Roboto, sans-serif; font-style: normal; color: #fff; }
.cn-ic--verde { background: #16a34a; }
.cn-verde { color: #0E7A3D !important; } .cn-azul { color: var(--accent) !important; }
.cn-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; vertical-align: 0; font-style: normal; }
.cn-dot--pulsa { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 50%, transparent); animation: spbPulsa 1.6s infinite; }
.cn-leg { display: flex !important; align-items: center; gap: 4px; flex-wrap: wrap; }
.cn-leg i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-left: 4px; font-style: normal; }
.cn-leg i:first-child { margin-left: 0; }
.cn-ag { display: flex !important; align-items: center; gap: 10px; }
.cn-av { width: 38px; height: 38px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 15px/1 Roboto, sans-serif; box-shadow: 0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, #7c3aed 30%, transparent); }
.cn-ag > div > * { display: block; }
.cn-pill { display: inline-block !important; width: max-content; padding: 3px 8px; border-radius: 6px; font: 700 10px/1.2 Roboto, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); margin-bottom: 3px; }
.cn-pills { display: flex !important; flex-wrap: wrap; gap: 5px; max-width: 220px; }
.cn-linha path.cn-l2 { stroke: #16a34a; transition-delay: .7s; }
.cn-cartao .cn-rot { color: var(--accent); }

/* bloco da suíte unificada (All-in-One) */
.suite { position: relative; margin: 46px auto 10px; max-width: 1080px; aspect-ratio: 1080 / 620; }
.suite > img { position: absolute; display: block; }
.su-painel { left: 14%; top: 4%; width: 66%; border-radius: 14px; box-shadow: 0 40px 80px -34px rgba(10,20,40,.38), 0 2px 10px rgba(10,20,40,.06); }
.su-reuniao { left: 0; top: 46%; width: 34%; border-radius: 12px; box-shadow: 0 30px 60px -26px rgba(10,20,40,.42); animation: spfloat 9s ease-in-out 1s infinite; }
.su-soft { right: 27%; top: 12%; width: 18%; border-radius: 12px; box-shadow: 0 36px 70px -26px rgba(10,20,40,.45); animation: spfloat 8s ease-in-out infinite; }
.su-pessoa { right: -2%; bottom: 0; height: 88%; width: auto; filter: drop-shadow(0 24px 30px rgba(11,40,90,.2)); -webkit-mask-image: linear-gradient(#000 88%, transparent 100%); mask-image: linear-gradient(#000 88%, transparent 100%); }
.su-card { position: absolute; background: #fff; border: 1px solid #E4E9F2; border-radius: 14px; padding: 12px 14px; box-shadow: 0 20px 44px -18px rgba(11,40,90,.34); font: 400 12.5px/1.4 Roboto, "Segoe UI", sans-serif; color: #353D4A; }
.su-card b { color: #0B0D12; } .su-card small { display: block; font-size: 12px; color: #4B5563; }
.su-card .cn-rot { display: block; font: 700 10.5px/1.2 Roboto, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.su-chamada { left: 30%; bottom: 6%; display: flex; align-items: center; gap: 10px; animation: spfloat 7s ease-in-out .6s infinite; }
.su-chamada .spb-av { color: #fff; font: 700 12px/36px Roboto, sans-serif; text-align: center; }
.su-chamada .spb-rbtn { color: #fff; font-size: 16px; }
.su-crm { left: 2%; top: 6%; animation: spfloat 8s ease-in-out 1.4s infinite; }
.su-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.su-logo { display: flex; align-items: center; gap: 7px; font-weight: 600; color: #0B0D12; } .su-logo img { width: 18px; height: 18px; }
.su-plats { right: 22%; bottom: 2%; animation: spfloat 9s ease-in-out 2s infinite; }
.su-icones { display: flex; gap: 12px; } .su-icones img { width: 22px; height: 22px; }
.su-status { left: 40%; top: 0; animation: spfloat 8s ease-in-out 2.6s infinite; }
@media (max-width: 760px) { .suite { aspect-ratio: 1 / 1; } .su-painel { left: 4%; width: 92%; } .su-reuniao, .su-status, .su-crm { display: none; } .su-soft { right: 30%; top: 40%; width: 30%; } .su-pessoa { height: 60%; } .su-plats { right: 2%; } .su-chamada { left: 2%; } }
@media (prefers-reduced-motion: reduce) { .suite > img, .su-card { animation: none; } }
@media (max-width: 640px) { .cena .cn-c1 { top: -15%; left: auto; right: 0; } .cena .cn-c2 { top: 52%; } .cena { margin-top: 76px; } }


/* ===== blocos: comparativo, selos, interoperabilidade, infra, rede, firewall ===== */
.comp-duo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 44px; align-items: center; margin-top: 42px; }
.comp { width: 100%; border-collapse: collapse; font-size: 15.5px; color: #0B0D12; }
.comp th { font: 700 14px/1.2 Roboto, sans-serif; padding: 0 12px 12px; border-bottom: 2px solid #0B0D12; text-align: left; }
.comp td { padding: 13px 12px; border-bottom: 1px solid #E4E9F2; vertical-align: top; width: 50%; }
.comp td span { display: flex; gap: 10px; align-items: flex-start; }
.comp td span::before { content: "✓"; flex: 0 0 20px; height: 20px; border-radius: 50%; background: #007BFF; color: #fff; font: 700 12px/20px Roboto, sans-serif; text-align: center; margin-top: 1px; }
.comp td.nao { color: #4B5563; } .comp td.nao span::before { content: "×"; background: #F0556A; font-size: 15px; line-height: 19px; }
.comp-mapa img { display: block; width: 100%; max-width: 440px; margin: 0 auto; animation: spfloat 9s ease-in-out infinite; }
.selos-faixa { margin: 40px auto 0; max-width: 980px; text-align: center; }
.selos-faixa img { display: block; width: 100%; height: auto; }
.selos-faixa p { margin: 12px 0 0; font: 700 14px/1.3 Roboto, sans-serif; color: #007BFF; }
.orbita { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; margin: 0 auto; }
.orbita .orb-disco { position: absolute; inset: 14%; border-radius: 50%; background: #007BFF; }
.orbita .orb-anel { position: absolute; inset: 4%; border-radius: 50%; border: 1.5px dashed rgba(0,123,255,.35); animation: cnGira 60s linear infinite; }
.orbita .orb-pessoa { position: absolute; left: 50%; bottom: 14%; height: 80%; transform: translateX(-50%); -webkit-mask-image: linear-gradient(#000 80%, transparent 100%); mask-image: linear-gradient(#000 80%, transparent 100%); }
.orbita .orb-chip { position: absolute; width: 19%; aspect-ratio: 1 / 1; border-radius: 50%; background: #fff; box-shadow: 0 14px 30px -12px rgba(10,20,40,.35); display: flex; align-items: center; justify-content: center; text-align: center; font: 800 13px/1.1 Roboto, sans-serif; color: #0B0D12; translate: -50% -50%; animation: spfloat 7s ease-in-out infinite; }
.infra3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 42px; }
.infra-col { background: #fff; border: 1px solid #E4E9F2; border-radius: 18px; padding: 30px 26px; text-align: center; box-shadow: 0 24px 50px -30px rgba(11,40,90,.3); }
.infra-col .ic { width: 64px; height: 64px; border-radius: 18px; background: #EAF3FF; color: #007BFF; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; animation: spfloat 7s ease-in-out infinite; }
.infra-col h3 { color: #007BFF; font-size: 22px; margin: 0 0 4px; } .infra-col > small { display: block; color: #353D4A; font-size: 15px; margin-bottom: 16px; }
.infra-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 15px; color: #0B0D12; }
.infra-col .nuvens { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; } .infra-col .nuvens span { font: 600 12px/1 Roboto, sans-serif; padding: 6px 9px; border-radius: 999px; background: #F1F5FB; color: #353D4A; }
.rede { position: relative; margin: 46px auto 0; max-width: 1080px; aspect-ratio: 1080 / 520; }
.rede svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rede svg path { fill: none; stroke: #007BFF; stroke-width: 2; stroke-dasharray: 6 7; animation: redeFlui 1.2s linear infinite; }
@keyframes redeFlui { to { stroke-dashoffset: -26; } }
.rede-no { position: absolute; translate: -50% -50%; background: #fff; border: 1px solid #E4E9F2; border-radius: 16px; padding: 14px 16px; min-width: 150px; text-align: center; box-shadow: 0 22px 46px -22px rgba(11,40,90,.34); font: 400 12.5px/1.4 Roboto, sans-serif; color: #4B5563; animation: spfloat 8s ease-in-out infinite; }
.rede-no b { display: block; font: 800 15px/1.2 Roboto, sans-serif; color: #0B0D12; } .rede-no em { display: block; font: 700 10.5px/1.2 Roboto, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #007BFF; font-style: normal; margin-bottom: 5px; }
.rede-no.forte { background: #007BFF; border-color: #007BFF; color: #DCEBFF; } .rede-no.forte b { color: #fff; } .rede-no.forte em { color: #DCEBFF; }
.rede-no:nth-of-type(2n) { animation-duration: 9s; animation-delay: .8s; } .rede-no:nth-of-type(3n) { animation-delay: 1.6s; }
.checks4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; } .checks4 div { font-size: 14.5px; color: #353D4A; } .checks4 b { display: block; color: #007BFF; font-size: 16px; margin-bottom: 4px; }
.fw-duo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; margin-top: 42px; }
.fw-tela { position: relative; } .fw-tela img { display: block; width: 100%; border-radius: 14px; box-shadow: 0 36px 70px -30px rgba(10,20,40,.4); animation: spfloat 8s ease-in-out infinite; }
.fw-tela .cn-cartao { opacity: 1; transform: none; animation: spfloat 7s ease-in-out 1s infinite; }
.fw-lista { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15.5px; } .fw-lista li { display: flex; gap: 10px; } .fw-lista li::before { content: "✓"; color: #007BFF; font-weight: 800; }
@media (max-width: 900px) { .comp-duo, .fw-duo { grid-template-columns: 1fr; } .infra3 { grid-template-columns: 1fr; } .checks4 { grid-template-columns: 1fr 1fr; } .rede { aspect-ratio: auto; display: grid; gap: 12px; } .rede svg { display: none; } .rede-no { position: static; translate: none; animation: none; } .orbita .orb-chip { font-size: 10.5px; } }
@media (prefers-reduced-motion: reduce) { .comp-mapa img, .orbita .orb-anel, .orbita .orb-chip, .infra-col .ic, .rede svg path, .rede-no, .fw-tela img, .fw-tela .cn-cartao { animation: none; } }

/* selos: título em cima, largura contida para não perder definição */
.selos-faixa { max-width: 600px; }
.selos-faixa p { margin: 0 0 14px; }

/* v2: comparativo igual ao site antigo, selos menores com título em cima, logos nos círculos */
.comp-duo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.comp th { text-align: left; white-space: nowrap; } .comp th.c, .comp td.c { text-align: center; width: auto; padding-inline: 14px; white-space: nowrap; }
.comp td { width: auto; padding: 12px 8px; font-size: 16px; }
.comp td span::before, .comp td.nao span::before { content: none; }
.comp i { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; align-items: center; justify-content: center; color: #fff; font: 700 11px/1 Roboto, sans-serif; font-style: normal; }
.comp i.sim { background: #007BFF; } .comp i.nao { background: #F0556A; font-size: 14px; }
.selos-faixa { max-width: 640px; } .selos-faixa p { margin: 0 0 14px; }
.selos-faixa--esq { margin: 34px 0 0; max-width: 620px; text-align: left; }
.comp-mapa img { max-width: 470px; }
.orbita .orb-chip { overflow: hidden; padding: 0; } .orbita .orb-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comp td:first-child { width: 58%; } .comp td.c { white-space: normal; }

/* v3: logos com respiro, comparativo com linhas iguais, mapa animado */
.orbita .orb-chip { background: #fff; } .orbita .orb-chip img { width: 70%; height: 70%; object-fit: contain; margin: auto; }
.comp td { padding: 9px 8px; font-size: 15px; height: 40px; white-space: nowrap; vertical-align: middle; } .comp td:first-child { width: auto; }
.comp th { padding-bottom: 9px; } .comp td.c { white-space: nowrap; }
.mapa-br { position: relative; } .mapa-br svg { display: block; width: 100%; max-width: 460px; margin: 0 auto; overflow: visible; }
.mp-uf { stroke: #fff; stroke-width: .6; stroke-linejoin: round; opacity: 0; animation: mpEntra .5s ease forwards; animation-delay: calc(var(--i) * 18ms); transition: fill .15s ease; }
.mp-ativo { fill: #007BFF; } .mp-ativo:hover { fill: #0A56F0; } .mp-prev { fill: #CFE3FF; } .mp-prev:hover { fill: #B4D3FF; }
@keyframes mpEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mp-dica { position: absolute; pointer-events: none; background: #1D2433; color: #fff; padding: 7px 10px; border-radius: 8px; font: 500 12.5px/1.3 Roboto, sans-serif; white-space: nowrap; box-shadow: 0 8px 22px -8px rgba(20,30,50,.5); z-index: 5; }
.mp-dica[hidden] { display: none; }
.mp-legenda { display: flex; justify-content: center; gap: 22px; margin-top: 14px; font: 500 13.5px/1 Roboto, sans-serif; color: #353D4A; flex-wrap: wrap; }
.mp-legenda span { display: inline-flex; align-items: center; gap: 8px; } .mp-legenda i { width: 14px; height: 14px; border-radius: 4px; }
.mp-l1 { background: #007BFF; } .mp-l2 { background: #CFE3FF; }
@media (max-width: 900px) { .comp td { white-space: normal; height: auto; } }
@media (prefers-reduced-motion: reduce) { .mp-uf { animation: none; opacity: 1; } }

/* faixa de compliance compacta */
.compliance-linha { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 5px 0; margin: 22px auto 0; }
.compliance-linha b { font: 800 13px/1 Roboto, sans-serif; letter-spacing: .12em; color: #0B0D12; }
.compliance-linha img { display: block; width: 100%; max-width: 600px; height: auto; }
@media (max-width: 700px) { .compliance-linha { flex-direction: column; gap: 6px; } }

/* rodapé: selos Anatel e ABR Telecom */
.foot-selos { display: flex; align-items: flex-end; gap: 16px; margin-top: 20px; }
.fs-selo { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; opacity: .85; transition: opacity .2s ease; }
.fs-selo:hover { opacity: 1; }
.fs-selo img { height: 17px; width: auto; display: block; }
.fs-selo img.fs-abr { height: 24px; }
.fs-selo span { font: 600 9.5px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* /numeros/: tipos de numeração */
.num-tipos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 38px; }
.num-tipo { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; text-decoration: none; box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.num-tipo:hover { transform: translateY(-3px); border-color: #A9CCFF; }
.nt-rotulo { font: 700 11px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.nt-placa { font: 700 21px/1.1 Roboto, "Segoe UI", sans-serif; letter-spacing: .01em; color: var(--ink); background: #EEF5FF; border-radius: 10px; padding: 14px 12px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num-tipo b { font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.num-tipo small { font-size: 13.5px; line-height: 1.5; color: #353D4A; flex: 1; }
.nt-acao { font: 600 13px/1 Roboto, "Segoe UI", sans-serif; color: var(--accent); }
.num-inclusos { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 30px 0 0; padding: 0; }
.num-inclusos li { position: relative; padding-left: 22px; font: 500 14px/1.4 Roboto, "Segoe UI", sans-serif; color: #353D4A; }
.num-inclusos li::before { content: "✓"; position: absolute; left: 0; color: #12A150; font-weight: 700; }
@media (max-width: 1000px) { .num-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .num-tipos { grid-template-columns: 1fr; } }

/* /anexos/ */
.anexos-ano { margin-top: 34px; } .anexos-ano h2 { font-size: 22px; margin: 0 0 14px; }
.anexos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.anexo-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--ink); transition: border-color .18s ease, transform .18s ease; }
.anexo-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.anexo-item b { font-size: 15px; font-weight: 600; } .anexo-item small { font: 700 10.5px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .1em; color: var(--accent); }

/* blog: artigos */
.artigos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.artigos-grid--sem-capa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.artigo-card { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; text-decoration: none; box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease; }
.artigo-card:hover { transform: translateY(-3px); border-color: #A9CCFF; }
.artigo-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; }
.artigo-card b { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.artigo-card small { font-size: 14px; line-height: 1.55; color: #353D4A; flex: 1; }
.ac-acao { font: 600 13px/1 Roboto, "Segoe UI", sans-serif; color: var(--accent); }
.artigo-col { max-width: 780px; }
.artigo-topo { padding: clamp(40px, 6vw, 72px) 0 28px; background: var(--surface-2); }
.artigo-trilha { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; } .artigo-trilha a { color: var(--accent); font-weight: 600; text-decoration: none; }
.artigo-topo h1 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.12; margin: 10px 0 14px; }
.artigo-topo .lede { color: #353D4A; margin: 0; }
.artigo-autor { font: 600 13.5px/1 Roboto, "Segoe UI", sans-serif; color: var(--ink); margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.artigo-capa { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; margin-top: 34px; display: block; }
.artigo-corpo { margin-top: 36px; font-size: 17px; line-height: 1.75; color: #353D4A; }
.artigo-corpo h2 { font-size: 26px; line-height: 1.25; color: var(--ink); margin: 40px 0 14px; }
.artigo-corpo h3 { font-size: 19px; line-height: 1.3; color: var(--ink); margin: 28px 0 10px; }
.artigo-corpo p { margin: 0 0 18px; } .artigo-corpo ul { margin: 0 0 18px; padding-left: 22px; } .artigo-corpo li { margin-bottom: 8px; }
.artigo-corpo strong { color: var(--ink); }
.artigo-corpo code { font-size: .9em; background: #EEF5FF; border-radius: 5px; padding: 2px 6px; }
.artigo-volta { margin: 34px 0 56px; } .artigo-volta a { font-weight: 600; color: var(--accent); text-decoration: none; }
@media (max-width: 820px) { .artigos-grid, .artigos-grid--sem-capa { grid-template-columns: 1fr; } }
.artigo .post-meta, .artigo-card .post-meta { font: 600 12px/1.4 Roboto, "Segoe UI", sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }

/* rodapé: lockup da Anatel + selo ABR Telecom */
.foot-selos { flex-wrap: wrap; align-items: flex-start; gap: 16px 26px; margin-top: 18px; }
.foot-selos .foot-anatel { margin-top: 0; }