/* CR8 Conecta · estilos do site
   Escuro e premium, com as cores da marca (azul #8c9eac e roxo #dad5cf).
   Fontes self-hosted: Archivo (títulos e interface) e Newsreader (texto). */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #0a1c2e;
  --bg-2: #0f2740;
  --bg-3: #14304c;
  --line: #27425e;
  --line-soft: #183249;
  --text: #f4f2ef;
  --muted: #a9b9c7;
  --blue: #8c9eac;
  --blue-bright: #c5d1db;
  --purple: #dad5cf;
  --purple-soft: #ece8e3;
  --ink: #0d2743;
  --ui: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  color-scheme: dark;
  --card-top: #112b45;
  --head: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a { color: var(--blue-bright); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 3px; border-radius: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--blue); color: var(--ink); padding: 0.7rem 1rem;
  font-family: var(--ui); font-weight: 650; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }

/* Tipografia */
h1, h2, h3, h4 { font-family: var(--ui); color: #fff; text-wrap: balance; }
h1 {
  font-weight: 800; font-stretch: 108%; letter-spacing: -0.028em;
  line-height: 1.02; font-size: clamp(2.45rem, 6vw, 4.7rem);
}
h2 {
  font-weight: 700; font-stretch: 104%; letter-spacing: -0.018em;
  line-height: 1.1; font-size: clamp(1.7rem, 3vw, 2.5rem);
}
h3 { font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; font-size: 1.25rem; }
p { text-wrap: pretty; }
.lead {
  font-size: clamp(1.2rem, 1.9vw, 1.42rem); line-height: 1.55;
  color: #e4e0db; max-width: 36em;
}
.muted { color: var(--muted); }
.prose p + p { margin-top: 1.1em; }
.prose { max-width: 38em; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--ui); font-weight: 650; font-size: 1rem; line-height: 1.1;
  padding: 1rem 1.55rem; text-decoration: none; cursor: pointer; border: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-primary {
  background: var(--blue); color: var(--ink);
  /* canto cortado, eco das diagonais da logo */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  padding-right: 1.9rem;
}
.btn-primary:hover { background: var(--blue-bright); color: var(--ink); }
.btn-ghost {
  background: transparent; color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--blue-bright); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem 1.1rem; align-items: center; }

/* Cabeçalho */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 28, 46, 0.9);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; height: 4.5rem; }
.brand {
  display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none;
  font-family: var(--ui); font-weight: 750; font-stretch: 112%; font-size: 1.15rem;
  letter-spacing: -0.015em; color: #fff;
}
.brand img { height: 2.1rem; width: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 0.15rem; }
.nav a:not(.btn), .nav .menu-toggle {
  font-family: var(--ui); font-weight: 550; font-size: 0.98rem; color: var(--text);
  background: none; border: 0; text-decoration: none; cursor: pointer;
  padding: 0.6rem 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem;
}
.nav a:not(.btn):hover, .nav .menu-toggle:hover { color: var(--blue-bright); }
.nav a[aria-current="page"] { color: var(--blue-bright); }
.nav .btn { margin-left: 0.75rem; padding: 0.8rem 1.25rem; font-size: 0.95rem; }
.has-menu { position: relative; }
.menu-toggle svg { width: 0.7rem; height: 0.7rem; transition: transform 0.2s ease; }
.has-menu.is-open .menu-toggle svg { transform: rotate(180deg); }
.menu {
  display: none; position: absolute; top: calc(100% + 0.6rem); left: -1rem;
  width: min(38rem, 90vw); background: var(--bg-2); border: 1px solid var(--line);
  padding: 0.6rem; grid-template-columns: 1fr 1fr; gap: 0.1rem;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}
.has-menu.is-open .menu { display: grid; }
.nav .menu a {
  display: block; padding: 0.75rem 0.85rem; text-decoration: none;
  font-family: var(--ui);
}
.nav .menu a:hover { background: var(--bg-3); }
.nav .menu a strong { display: block; font-weight: 650; color: #fff; font-size: 0.98rem; }
.nav .menu a span { display: block; font-weight: 400; font-size: 0.85rem; color: var(--muted); line-height: 1.35; margin-top: 0.15rem; }
.nav-button {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  color: #fff; padding: 0.55rem 0.9rem; font-family: var(--ui); font-weight: 600; cursor: pointer;
}

/* Seções */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section + .section { border-top: 1px solid var(--line-soft); }
.ledger {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1.5rem, 5vw, 5rem); align-items: start;
}
.ledger > .ledger-head { position: sticky; top: 6.5rem; }
.ledger-head h2 + p { margin-top: 1rem; color: var(--muted); font-size: 1.05rem; line-height: 1.55; }
.ledger-head p + p { margin-top: 0.8rem; }
.stack > * + * { margin-top: 1.25rem; }

/* Hero */
.hero { padding-block: clamp(2.75rem, 7vw, 6rem) clamp(3.5rem, 8vw, 6.5rem); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero h1 { max-width: 12ch; }
.hero .lead { margin-top: 1.6rem; }
.hero .btn-row { margin-top: 2.2rem; }
.hero .fine { margin-top: 1.1rem; font-family: var(--ui); font-size: 0.92rem; color: var(--muted); }

/* Ilustração: a empresa sobe para o primeiro resultado e responde primeiro */
.serp {
  --pitch: 74px;
  width: 100%; max-width: 27.5rem; margin-left: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 1rem;
}
.serp-q {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--ui); font-weight: 500; font-size: 0.92rem; color: var(--muted);
}
.serp-q svg { width: 1rem; height: 1rem; flex: none; }
.serp-list { position: relative; height: calc(var(--pitch) * 4); margin-top: 1rem; }
.serp-row {
  position: absolute; left: 0; right: 0; top: calc(var(--i) * var(--pitch));
  height: calc(var(--pitch) - 10px);
  display: grid; grid-template-columns: 1.9rem 1fr auto; align-items: center; gap: 0.15rem 0.8rem;
  padding: 0 0.9rem; background: var(--bg-3); border: 1px solid var(--line-soft); border-radius: 10px;
  font-family: var(--ui);
  animation: yield 1.1s cubic-bezier(0.22, 0.8, 0.24, 1) 0.9s both;
}
.serp-row .ico { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #1f3d63; grid-row: 1 / span 2; }
.serp-row .t { font-weight: 650; font-size: 0.93rem; color: #e4e0db; align-self: end; }
.serp-row .bar { height: 0.45rem; border-radius: 3px; background: #2f4a6b; align-self: start; width: 78%; margin-top: 0.45rem; }
.serp-row.is-us {
  z-index: 2; background: #0f2e52; border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue), 0 14px 40px -14px rgba(140, 158, 172, 0.6);
  animation-name: rise;
}
.serp-row.is-us .ico { background: var(--bg) url("../logos/cr8-mark.png") center / 70% no-repeat; }
.serp-row.is-us .t { color: #fff; }
.serp-row.is-us .bar { background: #2a4a6f; }
.serp-badge {
  grid-column: 3; grid-row: 1 / span 2; background: var(--purple); color: #0d2743;
  font-weight: 750; font-size: 0.85rem; padding: 0.3rem 0.6rem;
  animation: pop 0.5s ease 1.9s both;
}
.chat { display: grid; gap: 0.5rem; margin-top: 0.4rem; }
.bubble {
  max-width: 84%; padding: 0.65rem 0.9rem; border-radius: 12px;
  font-family: var(--ui); font-weight: 500; font-size: 0.9rem; line-height: 1.35;
}
.bubble.them { justify-self: start; background: #1a2740; color: #e4e0db; border-bottom-left-radius: 3px; animation: pop 0.5s ease 2.3s both; }
.bubble.us { justify-self: end; background: var(--blue); color: var(--ink); border-bottom-right-radius: 3px; animation: pop 0.5s ease 3.1s both; }
.serp-note { margin-top: 0.9rem; font-family: var(--ui); font-size: 0.8rem; color: var(--muted); }
@keyframes rise { from { transform: translateY(calc(var(--pitch) * 3)); } to { transform: none; } }
@keyframes yield { from { transform: translateY(calc(var(--pitch) * -1)); } to { transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Tabela de resultados */
.cases { width: 100%; border-collapse: collapse; font-family: var(--ui); }
.cases caption { text-align: left; font-family: var(--serif); color: var(--muted); font-size: 1.05rem; padding-bottom: 1.2rem; }
.cases th {
  text-align: left; font-weight: 600; font-size: 0.9rem; color: var(--muted);
  padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--line);
}
.cases td { padding: 1.5rem 1rem 1.5rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.cases td:first-child { font-weight: 650; font-size: 1.05rem; color: #fff; }
.cases .n {
  display: block; font-weight: 800; font-stretch: 106%; letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.08; color: #fff;
}
.cases .n small { display: block; margin-top: 0.4rem; font-weight: 500; font-size: 0.92rem; letter-spacing: 0; color: var(--muted); }
.fine-print { margin-top: 1.4rem; font-size: 0.95rem; color: var(--muted); max-width: 44em; }

/* Pilares */
.pillar {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1rem clamp(1.5rem, 4vw, 3rem); padding: 2.2rem 0; border-top: 1px solid var(--line);
}
.pillar:first-child { border-top: 0; padding-top: 0; }
.pillar h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 750; font-stretch: 106%;
  padding-left: 1rem; border-left: 4px solid var(--c, var(--blue));
}
.pillar h3 small { display: block; margin-top: 0.5rem; font-family: var(--serif); font-weight: 400; font-size: 1.05rem; letter-spacing: 0; color: var(--muted); }
.pillar p { color: #e4e0db; }
.pillar .links { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-family: var(--ui); font-weight: 600; font-size: 0.95rem; }
.pillar.p1 { --c: var(--blue); }
.pillar.p2 { --c: var(--purple); }
.pillar.p3 { --c: #f4f2ef; }

/* Índice de soluções */
.index li { border-top: 1px solid var(--line-soft); }
.index li:last-child { border-bottom: 1px solid var(--line-soft); }
.index a {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) auto; gap: 0.5rem 1.5rem;
  align-items: baseline; padding: 1.3rem 0.5rem; text-decoration: none; transition: background-color 0.2s ease;
}
.index a:hover { background: var(--bg-2); }
.index .name { font-family: var(--ui); font-weight: 700; font-stretch: 104%; font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: #fff; letter-spacing: -0.01em; }
.index a:hover .name { color: var(--blue-bright); }
.index .desc { color: var(--muted); font-size: 1.02rem; line-height: 1.5; }
.index .tag { font-family: var(--ui); font-size: 0.85rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.index .tag::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.5rem; background: var(--c, var(--blue)); }
.index .t-p { --c: var(--blue); }
.index .t-a { --c: var(--purple); }
.index .t-r { --c: #f4f2ef; }

/* Listas */
.checks li { position: relative; padding: 0.6rem 0 0.6rem 1.7rem; border-top: 1px solid var(--line-soft); }
.checks li:last-child { border-bottom: 1px solid var(--line-soft); }
.checks li::before { content: ""; position: absolute; left: 0.1rem; top: 1.18rem; width: 0.6rem; height: 0.6rem; background: var(--blue); }
.checks.no li::before { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
.two-col h3 { margin-bottom: 1rem; }

.deliver > div { padding: 1.15rem 0; border-top: 1px solid var(--line-soft); }
.deliver > div:last-child { border-bottom: 1px solid var(--line-soft); }
.deliver dt { font-family: var(--ui); font-weight: 650; font-size: 1.12rem; color: #fff; }
.deliver dd { margin-top: 0.3rem; color: var(--muted); max-width: 40em; }

.steps li { position: relative; display: grid; grid-template-columns: 3.4rem 1fr; padding-bottom: 1.8rem; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  counter-increment: step; content: counter(step);
  font-family: var(--ui); font-weight: 800; font-size: 1.6rem; line-height: 1.1; color: var(--blue-bright);
}
.steps { counter-reset: step; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 0.55rem; top: 2.2rem; bottom: 0.3rem; width: 1px; background: var(--line); }
.steps h3 { font-size: 1.15rem; }
.steps p { color: var(--muted); margin-top: 0.25rem; max-width: 38em; }

.note {
  padding: 1.3rem 1.5rem; background: var(--bg-2); border-left: 3px solid var(--purple);
  color: var(--text); max-width: 40em; font-size: 1.08rem;
}

/* FAQ */
.faq details { border-top: 1px solid var(--line-soft); }
.faq details:last-child { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0;
  font-family: var(--ui); font-weight: 600; font-size: 1.1rem; color: #fff; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.3rem; top: 50%; width: 0.7rem; height: 0.7rem; margin-top: -0.45rem;
  border-right: 2px solid var(--blue-bright); border-bottom: 2px solid var(--blue-bright);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -0.1rem; }
.faq summary:hover { color: var(--blue-bright); }
.faq .answer { padding: 0 2.5rem 1.5rem 0; color: #e4e0db; max-width: 40em; }

/* Depoimentos em vídeo */
.videos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem; }
.videos .video:nth-child(-n+3) { grid-column: span 2; }
.videos .video:nth-child(n+4) { grid-column: span 3; }
.video {
  position: relative; aspect-ratio: 16 / 9; width: 100%; display: flex; align-items: flex-end;
  padding: 1rem; text-align: left; cursor: pointer; overflow: hidden;
  background: var(--bg-2) url("../logos/cr8-mark.png") right 1rem top 1rem / 3.2rem no-repeat;
  border: 1px solid var(--line);
}
.video:hover { border-color: var(--blue-bright); }
.video .who { font-family: var(--ui); font-weight: 650; color: #fff; }
.video .who small { display: block; font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.video .play {
  position: absolute; left: 50%; top: 50%; width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0 -1.7rem; background: var(--blue);
  display: grid; place-items: center; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.video .play svg { width: 1rem; height: 1rem; fill: var(--ink); margin-left: 2px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Faixa de chamada */
.cta-band { padding-block: clamp(3rem, 7vw, 5.5rem); }
.cta-box {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: center;
  background: var(--bg-2); padding: clamp(1.75rem, 5vw, 3.5rem);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}
.cta-box h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }
.cta-box p { margin-top: 1rem; color: var(--muted); max-width: 32em; }
.cta-box .btn-row { flex-direction: column; align-items: stretch; max-width: 20rem; }

/* Breadcrumb e cabeçalho de página interna */
.crumbs { font-family: var(--ui); font-size: 0.9rem; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; }
.crumbs li + li::before { content: "/"; margin-right: 0.6rem; color: var(--line); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: #fff; }
.page-hero { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5.5rem); }
.page-hero h1 { margin-top: 2rem; font-size: clamp(2.2rem, 4.8vw, 3.8rem); max-width: 17ch; }
.page-hero .lead { margin-top: 1.6rem; }
.page-hero .btn-row { margin-top: 2rem; }
.pillar-flag { margin-top: 1.4rem; font-family: var(--ui); font-weight: 600; font-size: 0.95rem; }
.pillar-flag a { color: var(--text); text-decoration: none; }
.pillar-flag a:hover { color: var(--blue-bright); }
.pillar-flag::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.55rem; background: var(--c, var(--blue)); }
.pillar-flag.t-a { --c: var(--purple); }
.pillar-flag.t-r { --c: #f4f2ef; }
.updated { margin-top: 1.2rem; font-family: var(--ui); font-size: 0.85rem; color: var(--muted); }

/* Sobre */
.facts { font-family: var(--ui); }
.facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; align-items: baseline; padding: 0.9rem 0; border-top: 1px solid var(--line-soft); }
.facts > div:last-child { border-bottom: 1px solid var(--line-soft); }
.facts dt { font-weight: 600; color: var(--muted); font-size: 0.95rem; }
.facts dd { color: #fff; }
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.5rem; }
.avatar {
  position: relative; aspect-ratio: 1; background: var(--bg-3); overflow: hidden; margin-bottom: 1rem;
  display: grid; place-items: center; font-family: var(--ui); font-weight: 800; font-size: 3rem; color: var(--blue);
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.team h3 { font-size: 1.15rem; }
.team .role { font-family: var(--ui); font-size: 0.9rem; font-weight: 600; color: var(--blue-bright); margin-top: 0.15rem; }
.team p { margin-top: 0.5rem; color: var(--muted); font-size: 1.02rem; line-height: 1.5; }

/* Formulário */
.form { display: grid; gap: 1.1rem; max-width: 34rem; }
.form label { display: block; font-family: var(--ui); font-weight: 600; font-size: 0.92rem; margin-bottom: 0.4rem; color: var(--text); }
.form input, .form select, .form textarea {
  width: 100%; background: var(--bg-2); color: var(--text); border: 1px solid var(--line);
  padding: 0.85rem 1rem; font: 500 1rem var(--ui); border-radius: 4px;
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--blue-bright); }
.form .hint { font-family: var(--ui); font-size: 0.85rem; color: var(--muted); }
.contact-list > div { padding: 1rem 0; border-top: 1px solid var(--line-soft); font-family: var(--ui); }
.contact-list > div:last-child { border-bottom: 1px solid var(--line-soft); }
.contact-list dt { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.contact-list dd { font-size: 1.1rem; font-weight: 600; margin-top: 0.15rem; }
.contact-list a { color: #fff; }
.contact-list a:hover { color: var(--blue-bright); }

/* Rodapé */
.site-footer { border-top: 1px solid var(--line-soft); background: #070c15; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-family: var(--ui); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.site-footer h2 { font-size: 0.95rem; font-weight: 650; font-stretch: 100%; letter-spacing: 0; color: var(--muted); margin-bottom: 1rem; }
.site-footer li + li { margin-top: 0.55rem; }
.site-footer li { font-size: 0.98rem; color: var(--text); line-height: 1.45; }
.site-footer a { color: var(--text); text-decoration: none; font-size: 0.98rem; }
.site-footer a:hover { color: var(--blue-bright); text-decoration: underline; }
.site-footer .about { margin-top: 1.1rem; color: var(--muted); font-size: 0.95rem; max-width: 22rem; line-height: 1.55; }
.footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 0.88rem; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; }

/* Responsivo */
@media (max-width: 62rem) {
  .nav-button { display: inline-block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch;
    gap: 0; padding: 1rem var(--gutter) 1.5rem; background: var(--bg); border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 4.5rem); overflow-y: auto; margin-left: 0;
  }
  .site-header.nav-open .nav { display: flex; }
  .nav a:not(.btn), .nav .menu-toggle { padding: 0.85rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--line-soft); justify-content: space-between; width: 100%; }
  .has-menu .menu { display: grid; position: static; width: auto; box-shadow: none; border: 0; padding: 0 0 0.5rem 0.75rem; background: transparent; grid-template-columns: 1fr; }
  .menu-toggle svg { display: none; }
  .nav .menu a { display: block; border-bottom: 0; padding: 0.55rem 0; }
  .nav .menu a span { display: none; }
  .nav .btn { margin: 1.2rem 0 0; }
  .hero-grid, .page-hero-grid, .ledger, .cta-box { grid-template-columns: 1fr; }
  .fig { margin-left: 0; max-width: 32rem; }
  .ledger > .ledger-head { position: static; }
  .serp { margin-left: 0; max-width: 32rem; }
  .pillar { grid-template-columns: 1fr; }
  .videos { grid-template-columns: repeat(2, 1fr); }
  .videos .video:nth-child(n) { grid-column: auto; }
  .team { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) {
  body { font-size: 1.0625rem; }
  .two-col, .videos, .team, .footer-grid { grid-template-columns: 1fr; }
  .index a { grid-template-columns: 1fr; gap: 0.3rem; }
  .cases thead { position: absolute; left: -9999px; }
  .cases caption { display: block; width: 100%; }
  .cases, .cases tbody, .cases tr, .cases td { display: block; width: 100%; }
  .cases tr { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.2rem 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line-soft); }
  .cases td { border: 0; padding: 0.3rem 0; min-width: 0; }
  .cases td:first-child { grid-column: 1 / -1; }
  .hero .serp { display: none; }
  .cases td[data-label]::before { content: attr(data-label); display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 0.15rem; }
  .facts > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .btn-row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .serp-row, .serp-badge, .bubble { animation: none !important; }
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Ilustrações das soluções (mockups em HTML e CSS) */
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.page-hero-grid h1 { max-width: 15ch; }
.fig {
  --g: #2f4a6b;
  width: 100%; max-width: 27.5rem; margin: 0 0 0 auto; padding: 1rem; position: relative; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  font-family: var(--ui); color: var(--text); font-size: 0.9rem;
}
.fig b { font-weight: 650; }
.fig small { display: block; color: var(--muted); font-size: 0.78rem; }
.fig u { display: block; text-decoration: none; height: 0.45rem; border-radius: 3px; background: var(--g); }
.fig u.b1 { height: 0.8rem; width: 88%; background: #e4e0db; margin-bottom: 0.5rem; }
.fig u.b1.s { width: 62%; }
.fig u.b2 { width: 92%; margin-top: 0.45rem; }
.fig u.b2.s { width: 70%; }
.fig-cap { margin-top: 0.9rem; font-size: 0.8rem; color: var(--muted); }
.fig .btnx {
  display: inline-block; background: var(--blue); color: var(--ink); font-weight: 700; font-size: 0.8rem;
  padding: 0.5rem 0.9rem; clip-path: polygon(0 0, 100% 0, 100% 68%, 90% 100%, 0 100%);
}
.fig .btnx.sm { font-size: 0.7rem; padding: 0.35rem 0.6rem; }
.fig .av { width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--blue), var(--purple)); }
.fig .win { background: var(--bg-3); border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; }
.fig .win-bar { display: flex; gap: 0.3rem; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line-soft); }
.fig .win-bar i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #3d5a7f; }

/* Perfil da Empresa no Google */
.f-perfil .map {
  position: relative; height: 8.2rem; border-radius: 10px; border: 1px solid var(--line-soft);
  background:
    linear-gradient(90deg, transparent 49%, #1f3d63 49% 51%, transparent 51%) 0 0 / 5.2rem 100%,
    linear-gradient(0deg, transparent 47%, #1f3d63 47% 53%, transparent 53%) 0 0 / 100% 3.4rem,
    #0d2743;
}
.f-perfil .pin { position: absolute; left: 52%; top: 22%; width: 1.7rem; filter: drop-shadow(0 6px 10px rgba(140, 158, 172, 0.55)); }
.f-perfil .map i { position: absolute; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #3d5a7f; }
.f-perfil .p2 { left: 18%; top: 30%; } .f-perfil .p3 { left: 30%; top: 70%; } .f-perfil .p4 { left: 80%; top: 62%; }
.gcard { margin-top: -1.6rem; position: relative; background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem; box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.7); }
.g-top { display: flex; gap: 0.7rem; align-items: flex-start; }
.g-logo { width: 2.6rem; height: 2.6rem; border-radius: 8px; flex: none; background: var(--bg) url("../logos/cr8-mark.png") center / 66% no-repeat; border: 1px solid var(--line); }
.g-top b { display: block; color: #fff; font-size: 1rem; }
.stars { color: #f4b740; letter-spacing: 0.08em; font-size: 0.85rem; }
.open { color: #5fd08b !important; }
.g-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-top: 0.8rem; }
.g-acts span { text-align: center; font-size: 0.74rem; font-weight: 600; padding: 0.45rem 0; border: 1px solid var(--line); border-radius: 999px; color: var(--blue-bright); }
.g-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-top: 0.8rem; }
.g-photos i { aspect-ratio: 4 / 3; border-radius: 6px; background: linear-gradient(135deg, #1a3a63, #1f3a58); }
.g-photos i:nth-child(2) { background: linear-gradient(135deg, #2a4f7a, #1a3a63); }

/* Landing page */
.ad-chip { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.ad-chip span:first-child { background: var(--purple); color: #fff; padding: 0.25rem 0.55rem; }
.ad-chip svg { width: 1.5rem; height: 0.8rem; flex: none; }
.lp { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0.9rem; padding: 1rem; }
.lp ul { list-style: none; padding: 0; margin: 0.9rem 0 0; display: grid; gap: 0.4rem; font-size: 0.75rem; color: #e4e0db; }
.lp li::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.45rem; border-radius: 2px; background: var(--blue); }
.lp-form { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 0.8rem; display: grid; gap: 0.5rem; align-content: start; }
.lp-form .f { height: 1.7rem; border-radius: 5px; background: #0d2743; border: 1px solid var(--line); }
.lp-form .btnx { text-align: center; font-size: 0.7rem; padding-inline: 0.3rem; }

/* Site */
.f-site { padding-bottom: 1rem; }
.st { padding: 0.8rem; }
.st-nav { display: flex; align-items: center; gap: 0.6rem; }
.st-nav .lg { width: 1.2rem; height: 1.2rem; border-radius: 4px; background: linear-gradient(135deg, var(--blue), var(--purple)); }
.st-nav u { width: 1.6rem; } .st-nav .btnx { margin-left: auto; }
.st-hero { margin-top: 1.1rem; display: grid; gap: 0.2rem; justify-items: start; }
.st-hero .btnx { margin-top: 0.7rem; }
.st-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 1.2rem; }
.st-cards span { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 6px; padding: 0.5rem; display: grid; gap: 0.45rem; }
.st-cards i { aspect-ratio: 5 / 3; border-radius: 4px; background: #1f3d63; }
.phone { position: absolute; right: 1.5rem; bottom: 2.6rem; width: 6.2rem; padding: 0.5rem; background: var(--bg); border: 2px solid #3d5a7f; border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8); display: grid; gap: 0.35rem; }
.f-site { min-height: 17.5rem; }
.ph-top { height: 0.35rem; width: 40%; margin: 0 auto 0.3rem; border-radius: 3px; background: #3d5a7f; }
.phone u.b1 { height: 0.55rem; } .phone .btnx { justify-self: start; }
.ph-card { height: 1.8rem; border-radius: 4px; background: #1f3d63; }

/* Redes sociais */
.ig-top { display: flex; align-items: center; gap: 0.7rem; }
.ig-top b { display: block; color: #fff; }
.follow { margin-left: auto; font-size: 0.75rem; font-weight: 700; padding: 0.35rem 0.8rem; border-radius: 6px; background: var(--blue); color: var(--ink); }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; margin-top: 0.9rem; }
.ig-grid span { aspect-ratio: 1; border-radius: 4px; display: flex; align-items: flex-end; padding: 0.4rem; background: #1a3a63; }
.ig-grid b { font-size: 0.68rem; font-weight: 700; color: #fff; line-height: 1.15; }
.ig-grid .t1 { background: linear-gradient(135deg, #5a7389, #1a3a63); }
.ig-grid .t2 { background: linear-gradient(135deg, #24415f, #1a3a63); }
.ig-grid .t3 { background: linear-gradient(135deg, var(--purple), #24415f); }
.ig-grid .t4 { background: linear-gradient(135deg, #1a3a63, #5a7389); }
.ig-grid .t5 { background: #101b30; border: 1px solid var(--line); }
.ig-grid .t6 { background: linear-gradient(135deg, #1a3a63 50%, #5a7389 50%); }
.ig-grid .t7 { background: linear-gradient(135deg, #1f3a58, #3a566f); }
.ig-grid .t8 { background: linear-gradient(135deg, #2a4f7a, #8c9eac); }
.ig-grid .t9 { background: linear-gradient(135deg, #3a566f, var(--purple)); }

/* Tráfego pago */
.ads { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; align-items: start; }
.gad, .mad { background: var(--bg-3); border: 1px solid var(--line-soft); border-radius: 10px; padding: 0.7rem; }
.gad b { display: block; color: var(--blue-bright); margin: 0.4rem 0 0.1rem; font-size: 0.88rem; }
.gad .tag { font-size: 0.68rem; font-weight: 700; color: var(--text); border: 1px solid var(--muted); padding: 0.05rem 0.3rem; border-radius: 3px; }
.sl { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; }
.sl span { font-size: 0.68rem; color: var(--blue-bright); border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.5rem; }
.gad small, .mad small { margin-top: 0.6rem; }
.m-top { display: flex; align-items: center; gap: 0.5rem; }
.m-top .av { width: 1.6rem; height: 1.6rem; } .m-top b { font-size: 0.78rem; display: block; } .m-top small { margin: 0; font-size: 0.66rem; }
.m-img { height: 3.3rem; margin-top: 0.5rem; border-radius: 6px; background: linear-gradient(135deg, #1a3a63, #3a566f); }
.m-cta { display: grid; gap: 0.4rem; margin-top: 0.5rem; font-size: 0.72rem; }
.m-cta .btnx { justify-self: start; }
.arrow-down { display: flex; justify-content: center; color: var(--muted); margin: 0.6rem 0; }
.arrow-down svg { width: 0.8rem; height: 1.5rem; }
.lead-chip { display: flex; align-items: center; gap: 0.7rem; background: #0f2e52; border: 1px solid var(--blue); border-radius: 10px; padding: 0.7rem 0.9rem; box-shadow: 0 12px 30px -14px rgba(140, 158, 172, 0.6); }
.lead-chip b { color: #fff; display: block; font-size: 0.88rem; }
.wa { width: 1.9rem; height: 1.9rem; border-radius: 50%; flex: none; background: #25d366; position: relative; }
.wa::after { content: ""; position: absolute; inset: 0.5rem; border-radius: 50%; border: 2px solid #0d2743; }

/* CRM */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.kcol { background: var(--bg-3); border: 1px solid var(--line-soft); border-radius: 8px; padding: 0.5rem 0.4rem; display: grid; gap: 0.4rem; align-content: start; min-height: 11rem; }
.kcol h4 { margin: 0 0 0.2rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.01em; color: var(--muted); line-height: 1.2; min-height: 1.6em; }
.kc { display: grid; gap: 0.4rem; background: #15213a; border: 1px solid var(--line); border-radius: 6px; padding: 0.45rem; }
.kc b { font-size: 0.7rem; color: #e4e0db; }
.kcol.won { border-color: #2c6b4a; } .kcol.won h4 { color: #5fd08b; } .kcol.won .kc { border-color: #2c6b4a; background: #10261d; }
.follow-chip { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; padding: 0.55rem 0.8rem; font-size: 0.78rem; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; color: #e4e0db; }
.clock { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--blue-bright); position: relative; flex: none; }
.clock::after { content: ""; position: absolute; left: 50%; top: 18%; width: 2px; height: 36%; background: var(--blue-bright); }
.handoff { width: 1rem; height: 1rem; flex: none; background: var(--purple-soft); clip-path: polygon(0 35%, 55% 35%, 55% 10%, 100% 50%, 55% 90%, 55% 65%, 0 65%); }

/* Atendimento por IA */
.wa-top { display: flex; align-items: center; gap: 0.7rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line-soft); }
.wa-top b { display: block; color: #fff; } .wa-top small { color: #5fd08b; }
.wa-chat { display: grid; gap: 0.5rem; padding-top: 0.8rem; }
.f-ia .bubble { max-width: 86%; margin: 0; animation: none; }
.f-ia .bubble em { display: block; font-style: normal; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.02em; margin-bottom: 0.2rem; color: #0a1f44; }

/* Método PAR 360 */
.loop { display: grid; gap: 0.5rem; }
.node { background: var(--bg-3); border: 1px solid var(--line); border-left: 4px solid var(--c, var(--blue)); border-radius: 8px; padding: 0.8rem 1rem; }
.node b { display: block; color: #fff; font-size: 1.02rem; }
.node.n1 { --c: var(--blue); } .node.n2 { --c: var(--purple); } .node.n3 { --c: #f4f2ef; }
.conn { justify-self: start; margin-left: 1.4rem; width: 2px; height: 0.9rem; background: var(--line); position: relative; }
.back { margin-top: 0.4rem; padding: 0.55rem 0.8rem; border: 1px dashed #3d5a7f; border-radius: 8px; font-size: 0.78rem; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 0.5rem; }
.back::before { content: "\21BB"; font-size: 1.1rem; color: var(--blue-bright); }
.conn { margin-block: -0.15rem; }

@media (max-width: 62rem) {
  .page-hero-grid { grid-template-columns: 1fr; }
  .fig { margin-left: 0; max-width: 32rem; }
}
@media (max-width: 40rem) {
  .phone { right: 1rem; }
  .ads { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Acabamento: formas arredondadas, sombras, brilho e movimento suave
   ========================================================================== */
:root {
  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px;
  --glow-blue: rgba(140, 158, 172, 0.45);
  --glow-purple: rgba(218, 213, 207, 0.35);
  --shadow-card: 0 18px 44px -22px rgba(0, 0, 0, 0.75), 0 2px 0 rgba(255, 255, 255, 0.025) inset;
  --shadow-lift: 0 26px 60px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(197, 209, 219, 0.35), 0 18px 50px -26px var(--glow-blue);
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}
:focus-visible { border-radius: 10px; }
.skip-link { border-radius: 0 0 var(--r-sm) var(--r-sm); }

/* Aberturas: fundo liso, sem brilho */
.hero, .page-hero { position: relative; isolation: isolate; overflow-x: clip; }

/* Botões: chapados, sem degradê, sem brilho e sem movimento */
.btn { border-radius: 999px; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.btn-primary { clip-path: none; padding-right: 1.55rem; background: var(--blue); box-shadow: none; }
.btn-ghost { box-shadow: inset 0 0 0 1px var(--line); background: transparent; }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--blue-bright); }
.fig .btnx { clip-path: none; border-radius: 999px; box-shadow: none; }

/* Cabeçalho e menu */
.site-header { box-shadow: 0 1px 0 var(--line-soft); background: rgba(10, 28, 46, 0.78); }
.nav a:not(.btn), .nav .menu-toggle { border-radius: 999px; transition: background-color 0.2s ease, color 0.2s ease; }
.nav a:not(.btn):hover, .nav .menu-toggle:hover, .has-menu.is-open .menu-toggle { background: rgba(140, 158, 172, 0.12); }
.menu { border-radius: var(--r-lg); padding: 0.7rem; box-shadow: 0 34px 80px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(197, 209, 219, 0.08); }
.nav .menu a { border-radius: var(--r-sm); }
.nav-button { border-radius: 999px; }

/* Ilustração da home e figuras */
.serp, .fig { border-radius: var(--r-lg); box-shadow: none; background: var(--bg-2); }
.serp-q { background: rgba(255, 255, 255, 0.03); }
.serp-row { border-radius: var(--r-md); box-shadow: none; }
.serp-badge { border-radius: 999px; }
.bubble { border-radius: 18px; }
.bubble.them { border-bottom-left-radius: 6px; }
.bubble.us { border-bottom-right-radius: 6px; box-shadow: none; }
.fig .win { border-radius: var(--r-md); box-shadow: none; }
.gcard { border-radius: var(--r-md); } .g-photos i { border-radius: 10px; } .g-logo { border-radius: 12px; }
.f-perfil .map { border-radius: var(--r-md); }
.lp-form, .gad, .mad, .lead-chip { border-radius: 14px; }
.kcol { border-radius: 14px; } .kc { border-radius: 10px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.8); }
.ig-grid span { border-radius: 10px; } .follow { border-radius: 999px; }
.node, .back { border-radius: 14px; } .node { box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.8); }
.st-cards span { border-radius: 10px; } .phone { border-radius: 20px; }
.ad-chip span:first-child { border-radius: 999px; }
.gad .tag { border-radius: 6px; }

/* Resultados */
.cases {
  border-collapse: separate; border-spacing: 0; background: linear-gradient(180deg, var(--card-top), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card);
}
.cases caption { padding: 1.6rem 1.75rem 0.4rem; }
.cases th:first-child, .cases td:first-child { padding-left: 1.75rem; }
.cases th:last-child, .cases td:last-child { padding-right: 1.75rem; }
.cases tbody tr { transition: background-color 0.25s ease; }
.cases tbody tr:hover { background: rgba(140, 158, 172, 0.07); }
.cases tbody tr:last-child td { border-bottom: 0; }

/* Pilares */
.pillars { display: grid; gap: 1.25rem; }
.pillars > .fig { max-width: none; margin: 0 0 0.5rem; }
.pillar, .pillar:first-child {
  padding: 1.9rem; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--card-top), var(--bg-2)); box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s ease;
}
.pillar:hover { transform: translateY(-3px); border-color: var(--line); box-shadow: var(--shadow-lift); }
.pillar h3 { border-left-width: 0; padding-left: 0; }
.pillar h3::before { content: ""; display: block; width: 2.6rem; height: 0.35rem; border-radius: 999px; margin-bottom: 0.9rem; background: var(--c, var(--blue)); box-shadow: 0 0 18px -2px var(--c, var(--blue)); }
.pillar .links a { padding: 0.25rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); text-decoration: none; transition: background-color 0.2s ease; }
.pillar .links a:hover { background: rgba(140, 158, 172, 0.18); }

/* Índice de soluções */
.index { display: grid; gap: 0.75rem; }
.index li, .index li:last-child { border: 0; }
.index a {
  padding: 1.3rem 1.5rem; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--card-top), var(--bg-2)); box-shadow: 0 10px 26px -20px rgba(0, 0, 0, 0.8);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s ease;
}
.index a:hover { background: linear-gradient(180deg, #17395f, var(--bg-2)); transform: translateY(-2px); border-color: rgba(197, 209, 219, 0.45); box-shadow: var(--shadow-lift); }
.index .tag::before, .pillar-flag::before { border-radius: 50%; box-shadow: 0 0 10px -1px var(--c, var(--blue)); }

/* Listas, entregas e passos */
.checks li::before { border-radius: 50%; width: 0.65rem; height: 0.65rem; box-shadow: 0 0 12px -1px var(--blue); }
.checks.no li::before { box-shadow: inset 0 0 0 2px var(--muted); }
.deliver > div, .deliver > div:last-child {
  padding: 1.2rem 1.4rem; margin-bottom: 0.75rem; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--card-top), var(--bg-2)); box-shadow: 0 10px 26px -20px rgba(0, 0, 0, 0.8);
  transition: transform 0.3s var(--ease), border-color 0.3s ease;
}
.deliver > div:hover { transform: translateY(-2px); border-color: var(--line); }
.steps li { grid-template-columns: 3.6rem 1fr; }
.steps li::before {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.1rem;
  color: #fff; background: linear-gradient(135deg, var(--blue), #6f8496); box-shadow: 0 10px 22px -8px var(--glow-blue);
}
.steps li:not(:last-child)::after { left: 1.2rem; top: 2.9rem; bottom: 0.2rem; background: linear-gradient(var(--line), transparent); }
.note { border-radius: var(--r-md); box-shadow: var(--shadow-card); }

/* FAQ */
.faq details, .faq details:last-child {
  margin-bottom: 0.7rem; padding-inline: 1.4rem; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--card-top), var(--bg-2)); transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq details:hover { border-color: var(--line); }
.faq details[open] { border-color: rgba(197, 209, 219, 0.4); box-shadow: 0 18px 40px -26px var(--glow-blue); }

/* Vídeos */
.video { border-radius: var(--r-lg); box-shadow: var(--shadow-card); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s ease; background-color: var(--card-top); }
.video:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.video .play { clip-path: none; border-radius: 50%; background: linear-gradient(135deg, #c5d1db, var(--blue)); box-shadow: 0 0 0 0.5rem rgba(140, 158, 172, 0.18), 0 14px 34px -8px var(--glow-blue); transition: transform 0.3s var(--ease); }
.video:hover .play { transform: scale(1.08); }

/* Faixa de chamada */
.cta-box {
  clip-path: none; border-radius: var(--r-xl); border: 1px solid var(--line); position: relative; overflow: hidden;
  background: radial-gradient(60% 120% at 100% 0%, rgba(140, 158, 172, 0.22), transparent 60%), radial-gradient(50% 100% at 0% 100%, rgba(218, 213, 207, 0.16), transparent 60%), var(--bg-2);
  box-shadow: 0 40px 90px -40px var(--glow-blue), var(--shadow-card);
}

/* Sobre, formulário e contato */
.avatar { border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.form input, .form select, .form textarea { border-radius: 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.form input:focus, .form select:focus, .form textarea:focus { box-shadow: 0 0 0 4px rgba(140, 158, 172, 0.2); outline: none; }
.contact-list, .facts {
  padding: 0.4rem 1.5rem; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--card-top), var(--bg-2)); box-shadow: var(--shadow-card);
}
.contact-list > div:first-child, .facts > div:first-child { border-top: 0; }
.contact-list > div:last-child, .facts > div:last-child { border-bottom: 0; }

/* Rodapé */
.site-footer { border-top: 0; position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--blue), var(--purple), transparent); opacity: 0.6; }

@media (max-width: 40rem) {
  .pillar, .pillar:first-child { padding: 1.4rem; }
  .index a { padding: 1.15rem 1.2rem; }
  .cases { border-radius: var(--r-md); }
  .cases tr { padding: 1.2rem 1.25rem; }
  .cases caption { padding-inline: 1.25rem; }
  .cta-box { border-radius: var(--r-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .page-hero::before { animation: none; }
  .btn, .pillar, .index a, .deliver > div, .video, .video .play { transition: none; }
}

/* Página de CRM: fluxo, caixa de entrada, celular e plataforma */
.fig.wide { max-width: none; margin: 0; }
.wf-scroll { overflow-x: auto; border-radius: var(--r-md); }
.wf { display: block; width: 100%; min-width: 34rem; height: auto; }
.wf-n { fill: #163861; stroke: #2f4a6b; stroke-width: 1; }
.wf-n.trig { stroke: var(--blue); fill: #0f2e52; }
.wf-n.dec { stroke: var(--purple); fill: #1a1233; }
.wf-n.ok { stroke: #2c6b4a; fill: #10261d; }
.wf-n.end { fill: transparent; stroke-dasharray: 4 4; }
.wf-t { font: 700 13.5px var(--ui); fill: #fff; }
.wf-s { font: 500 11.5px var(--ui); fill: #a9b9c7; }
.wf-p { font: 700 11px var(--ui); }
.wf-l { fill: none; stroke: #3d5a7f; stroke-width: 1.6; }
.f-inbox { max-width: none; margin: 0; }
.ib-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line-soft); }
.chips { display: flex; gap: 0.35rem; }
.chips i, .ch { width: 0.75rem; height: 0.75rem; border-radius: 50%; display: inline-block; flex: none; }
.c-wa { background: #25d366; } .c-ig { background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); } .c-fb { background: #1877f2; } .c-em { background: #a9b9c7; }
.ib-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8rem; padding: 0.75rem 0.7rem; margin-top: 0.5rem; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--bg-3); }
.ib-row.sel { border-color: var(--blue); background: #0f2e52; box-shadow: 0 12px 28px -16px var(--glow-blue); }
.ib-row b { display: block; font-size: 0.9rem; color: #fff; } .ib-row small { margin: 0; }
.ib-row .st { font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(140, 158, 172, 0.16); color: var(--blue-bright); }
.f-mobile { max-width: none; margin: 0; display: grid; justify-items: center; }
.mob { width: min(100%, 17rem); padding: 0.8rem; border: 2px solid #3d5a7f; border-radius: 28px; background: var(--bg); display: grid; gap: 0.6rem; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.85); }
.mob-top { width: 35%; height: 0.4rem; margin: 0 auto 0.2rem; border-radius: 999px; background: #3d5a7f; }
.note-m { display: flex; gap: 0.7rem; align-items: center; padding: 0.7rem; border-radius: 16px; background: var(--bg-3); border: 1px solid var(--line-soft); }
.note-m b { display: block; font-size: 0.85rem; color: #fff; } .note-m small { margin: 0; font-size: 0.72rem; }
.note-m .ic { width: 1.9rem; height: 1.9rem; border-radius: 10px; flex: none; background: linear-gradient(135deg, var(--blue), #6f8496); }
.note-m .ic.p { background: linear-gradient(135deg, var(--purple), #6f8496); } .note-m .ic.w { background: linear-gradient(135deg, #25d366, #128c7e); }
.caps, .autos { display: grid; gap: 0.75rem; }
.caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.caps li, .autos li {
  display: grid; gap: 0.3rem; padding: 1.1rem 1.3rem; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--card-top), var(--bg-2)); box-shadow: 0 10px 26px -20px rgba(0, 0, 0, 0.8);
  transition: transform 0.3s var(--ease), border-color 0.3s ease;
}
.caps li:hover, .autos li:hover { transform: translateY(-2px); border-color: var(--line); }
.caps b, .autos b { font-family: var(--ui); font-weight: 650; color: #fff; font-size: 1.02rem; }
.caps span, .autos span { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.stack-fig { display: grid; gap: 1.5rem; }
@media (max-width: 40rem) { .caps { grid-template-columns: 1fr; } }

.ledger > * { min-width: 0; }
.stack-fig { min-width: 0; }
.prose + .autos { margin-top: 1.5rem; }
.node.n4 { --c: #5fd08b; }
.f-loop.wide { max-width: none; margin: 0; }


/* ===== TESTE DE PALETA: marinho #0d2743, azul acinzentado #8c9eac, nude #dad5cf, branco ===== */
.btn-primary { background: #ffffff; color: #0d2743; }
.btn-primary:hover { background: #dad5cf; color: #0d2743; }
.btn-ghost:hover { color: #fff; }
.site-header { background: rgba(10, 28, 46, 0.94); }
.brand img { filter: none; }
/* ilustrações e cartões escuros mantêm o tema escuro dentro de seções claras */
.fig, .serp, .win, .video {
  --bg: #0a1c2e; --bg-2: #0f2740; --bg-3: #14304c; --line: #27425e; --line-soft: #183249;
  --text: #f4f2ef; --muted: #a9b9c7; --head: #fff; --card-top: #112b45; --blue: #8c9eac; --blue-bright: #c5d1db;
  color: var(--text);
}
.fig h1, .fig h2, .fig h3, .fig h4, .serp h3, .win h3 { color: #fff; }
.fig .caps b, .fig .autos b, .fig .ib-row b, .fig .note-m b, .fig .wa-top b { color: #fff; }


/* Mapa */
.map { border-radius: var(--r-lg, 24px); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); background: var(--bg-2); aspect-ratio: 4 / 3; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 720px) { .map { aspect-ratio: 1 / 1; } }


/* ==========================================================================
   VIDA: movimento, profundidade e sombras em camadas
   (todo movimento é desligado em prefers-reduced-motion, no fim do bloco)
   ========================================================================== */
:root {
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 2px 6px rgba(2, 10, 22, 0.35), 0 18px 36px -20px rgba(2, 10, 22, 0.8);
  --spot: radial-gradient(20rem circle at var(--mx, 50%) var(--my, 0%), rgba(197, 209, 219, 0.13), transparent 62%);
}
.serp, .fig, .cases, .pillar, .pillar:first-child, .contact-list, .facts, .video, .note {
  box-shadow: var(--shadow-card);
}
.serp, .fig { box-shadow: var(--shadow-card), 0 40px 90px -44px var(--glow-blue); }
.index a, .deliver > div, .deliver > div:last-child { box-shadow: var(--shadow-soft); }
.faq details, .faq details:last-child { box-shadow: var(--shadow-soft); }
.faq details[open] { box-shadow: var(--shadow-soft), 0 24px 44px -28px var(--glow-blue); }
.pillar:hover, .video:hover { box-shadow: var(--shadow-lift); }

/* Etiqueta de pilar nas tendências */
.fine-tag { display: inline-block; margin-left: 0.6rem; padding: 0.15rem 0.65rem; border-radius: 999px; font-family: var(--ui); font-weight: 650; font-size: 0.75rem; letter-spacing: 0.02em; vertical-align: 0.12em; color: var(--blue-bright); background: rgba(140, 158, 172, 0.16); box-shadow: inset 0 0 0 1px var(--line); }
.deliver dd a { text-underline-offset: 0.18em; }


/* ==========================================================================
   Mockups das páginas: site no notebook e celular, números do perfil, resposta de IA
   ========================================================================== */
.f-devices, .f-metricas { container-type: inline-size; }
.f-devices { padding: clamp(1rem, 3cqw, 2rem) clamp(1rem, 3cqw, 2rem) 1rem; }
.dv-stage { position: relative; padding-bottom: 2%; }
.dv-laptop { width: 88%; font-size: max(6.5px, 1.55cqw); }
.dv-screen { background: #05101f; border: 0.55em solid #0a1c33; border-bottom-width: 0.7em; border-radius: 1.1em 1.1em 0.3em 0.3em; box-shadow: 0 0 0 1px #2a4a6f, 0 40px 60px -30px rgba(0, 0, 0, 0.8); overflow: hidden; }
.dv-base { height: 1.1em; margin: 0 -4%; background: linear-gradient(180deg, #3b5576, #1c3250); border-radius: 0 0 1.2em 1.2em; position: relative; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.9); }
.dv-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 0.4em; transform: translateX(-50%); background: #13263f; border-radius: 0 0 0.6em 0.6em; }
/* o site dentro da tela: claro, como um site de verdade */
.sx { background: #f4f2ef; color: #0d2743; font-family: var(--ui); line-height: 1.3; padding-bottom: 1.4em; }
.sx b, .sx strong { color: #0d2743; }
.sx i, .sm i { font-style: normal; }
.sx-nav { display: flex; align-items: center; gap: 1.4em; padding: 1em 1.6em; background: #fff; box-shadow: 0 0.2em 1em -0.6em rgba(13, 39, 67, 0.5); }
.sx-logo { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 800; font-size: 1.15em; letter-spacing: -0.01em; color: #0d2743; }
.sx-logo i { width: 1.5em; height: 1.5em; border-radius: 0.4em; background: linear-gradient(135deg, #0d2743, #3d5a7f); }
.sx-links { display: flex; gap: 1.2em; margin-left: auto; font-size: 0.95em; } .sx-links b { font-weight: 600; color: #4e6277; }
.sx-btn { display: inline-block; padding: 0.6em 1.2em; border-radius: 999px; font-weight: 700; font-size: 0.95em; background: #0d2743; color: #fff; white-space: nowrap; box-shadow: 0 0.6em 1.2em -0.5em rgba(13, 39, 67, 0.7); }
.sx-ghost { display: inline-block; padding: 0.6em 1.2em; border-radius: 999px; font-weight: 700; font-size: 0.95em; box-shadow: inset 0 0 0 0.1em #0d2743; color: #0d2743; white-space: nowrap; }
.sx-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2em; align-items: center; padding: 2.2em 1.6em 1.6em; background: linear-gradient(135deg, #dad5cf, #f4f2ef 70%); }
.sx-copy small { display: block; font-weight: 700; font-size: 0.85em; color: #3d5a7f; letter-spacing: 0.04em; text-transform: uppercase; }
.sx-copy strong { display: block; margin: 0.5em 0; font-size: 2.1em; line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; }
.sx-p { display: block; max-width: 30em; color: #3a4f65; font-size: 1.05em; }
.sx-row { display: flex; gap: 0.8em; margin-top: 1.1em; flex-wrap: wrap; }
.sx-art { position: relative; aspect-ratio: 1 / 0.85; }
.sx-art i { position: absolute; border-radius: 1.2em; box-shadow: 0 1.4em 2em -1em rgba(13, 39, 67, 0.55); }
.sx-art i:nth-child(1) { inset: 0 18% 22% 0; background: linear-gradient(135deg, #0d2743, #3d5a7f); }
.sx-art i:nth-child(2) { inset: 28% 0 0 30%; background: linear-gradient(135deg, #8c9eac, #c5d1db); }
.sx-art i:nth-child(3) { left: 4%; bottom: 6%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.sx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; padding: 0.4em 1.6em 1em; }
.sx-cards span { background: #fff; border-radius: 1em; padding: 1.1em; box-shadow: 0 0.8em 1.6em -1em rgba(13, 39, 67, 0.5); display: grid; gap: 0.5em; }
.sx-cards i { width: 2.2em; height: 2.2em; border-radius: 0.6em; background: linear-gradient(135deg, #dad5cf, #8c9eac); }
.sx-cards b { font-size: 1.05em; } .sx-cards u { display: block; height: 0.55em; border-radius: 0.3em; background: #dad5cf; text-decoration: none; } .sx-cards u + u { width: 70%; }
.sx-proof { display: flex; flex-wrap: wrap; gap: 0.6em 1.6em; padding: 0.4em 1.6em 0; font-weight: 600; font-size: 0.9em; color: #3d5a7f; }
/* celular */
.dv-phone { position: absolute; right: 2%; bottom: -1%; width: 25%; font-size: max(5px, 1.05cqw); background: #0a1c33; border: 0.5em solid #0a1c33; border-radius: 2.6em; box-shadow: 0 0 0 1px #3d5a7f, 0 40px 60px -20px rgba(0, 0, 0, 0.9); overflow: hidden; }
.dv-notch { position: absolute; z-index: 2; left: 50%; top: 0.5em; width: 32%; height: 0.9em; transform: translateX(-50%); border-radius: 999px; background: #0a1c33; }
.sm { background: #f4f2ef; color: #0d2743; font-family: var(--ui); padding-bottom: 1.2em; border-radius: 2.1em; overflow: hidden; position: relative; }
.sm-nav { display: flex; align-items: center; justify-content: space-between; padding: 2.4em 1.2em 0.9em; background: #fff; }
.sm-burger { display: grid; gap: 0.3em; } .sm-burger u { display: block; width: 1.5em; height: 0.2em; background: #0d2743; border-radius: 0.1em; text-decoration: none; }
.sm-hero { padding: 1.4em 1.2em; background: linear-gradient(135deg, #dad5cf, #f4f2ef); display: grid; gap: 0.8em; justify-items: start; }
.sm-hero small { font-weight: 700; font-size: 0.8em; color: #3d5a7f; letter-spacing: 0.04em; text-transform: uppercase; }
.sm-hero strong { font-size: 1.9em; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; color: #0d2743; }
.sm-card { display: grid; grid-template-columns: 2.4em 1fr; gap: 0.2em 0.8em; align-items: center; margin: 0.8em 1.2em 0; padding: 0.9em; background: #fff; border-radius: 1em; box-shadow: 0 0.6em 1.2em -0.8em rgba(13, 39, 67, 0.5); }
.sm-card i { grid-row: 1 / span 2; width: 2.4em; height: 2.4em; border-radius: 0.6em; background: linear-gradient(135deg, #dad5cf, #8c9eac); }
.sm-card b { font-size: 1.1em; color: #0d2743; } .sm-card u { display: block; height: 0.5em; border-radius: 0.3em; background: #dad5cf; text-decoration: none; }
.sm-wa { position: absolute; right: 1em; bottom: 1em; padding: 0.7em 1.1em; border-radius: 999px; font-weight: 800; font-size: 0.9em; color: #06301a; background: linear-gradient(135deg, #5fe08f, #25d366); box-shadow: 0 0.8em 1.4em -0.6em rgba(0, 0, 0, 0.6); }
.f-devices .fig-cap { margin-top: 1.4rem; }

/* Números do perfil */
.f-metricas { padding: clamp(1rem, 3cqw, 1.6rem); }
.mt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line-soft); }
.mt-head b { font-family: var(--ui); font-size: 1.1rem; color: #fff; } .mt-head span { font-family: var(--ui); font-size: 0.85rem; color: var(--muted); }
.mt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-top: 1rem; }
.mt-k { padding: 0.9rem 1rem; border-radius: var(--r-md); background: var(--bg-3); border: 1px solid var(--line-soft); box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.8); }
.mt-k small { display: block; font-family: var(--ui); font-size: 0.78rem; line-height: 1.25; color: var(--muted); min-height: 2em; }
.mt-k b { display: block; margin-top: 0.3rem; font-family: var(--ui); font-weight: 800; font-size: clamp(1.4rem, 5cqw, 2rem); letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.mt-chart { margin-top: 1rem; padding: 1rem; border-radius: var(--r-md); background: var(--bg-3); border: 1px solid var(--line-soft); }
.mt-chart small { font-family: var(--ui); font-size: 0.8rem; color: var(--muted); }
.mt-bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 7rem; margin-top: 0.8rem; border-bottom: 1px solid var(--line-soft); }
.mt-bars i { flex: 1; height: var(--h); border-radius: 0.4rem 0.4rem 0 0; background: linear-gradient(180deg, #c5d1db, #5d7b99); transform-origin: bottom; }
.f-metricas .mt-bars i { animation: bar-up 0.9s var(--ease) backwards; }
.f-metricas.reveal:not(.in) .mt-bars i { animation-play-state: paused; }
.mt-bars i:nth-child(2n) { animation-delay: 0.05s; } .mt-bars i:nth-child(3n) { animation-delay: 0.1s; }
@keyframes bar-up { from { transform: scaleY(0.05); opacity: 0.4; } to { transform: none; opacity: 1; } }

/* Resposta de assistente de IA */
.f-ai { max-width: 36rem; padding: 1.1rem; }
.ai-top { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line-soft); font-family: var(--ui); }
.ai-top b { color: #fff; font-size: 0.95rem; }
.ai-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, #c5d1db 45%, #5d7b99); box-shadow: 0 0 0 0.25rem rgba(140, 158, 172, 0.2); }
.ai-q { margin: 1rem 0 0 auto; max-width: 82%; padding: 0.7rem 1rem; border-radius: 1.1rem 1.1rem 0.3rem 1.1rem; background: #dad5cf; color: #0d2743; font-family: var(--ui); font-weight: 600; font-size: 0.9rem; line-height: 1.35; }
.ai-a { margin-top: 0.9rem; padding: 0.9rem 1rem; border-radius: 1.1rem 1.1rem 1.1rem 0.3rem; background: var(--bg-3); border: 1px solid var(--line-soft); font-family: var(--ui); font-size: 0.92rem; line-height: 1.5; color: #e4e0db; }
.ai-a p { margin: 0; } .ai-a b { color: #fff; }
.ai-src { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.ai-src li { padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.74rem; font-weight: 650; color: var(--blue-bright); background: rgba(140, 158, 172, 0.14); box-shadow: inset 0 0 0 1px var(--line); }

@media (max-width: 40rem) {
  .mt-grid { grid-template-columns: repeat(2, 1fr); }
  .dv-laptop { width: 100%; }
  .dv-phone { width: 34%; right: 0; bottom: -3%; }
  .sx-links { display: none; }
  .sx-hero { grid-template-columns: 1fr; } .sx-art { display: none; }
  .sx-cards span:nth-child(3) { display: none; } .sx-cards { grid-template-columns: repeat(2, 1fr); }
  .f-devices { padding-bottom: 3rem; }
}
@media (prefers-reduced-motion: reduce) { .mt-bars i { animation: none !important; } }

/* Ilustração da home: toca quando aparece na tela e se repete (o JS liga as classes) */
.serp.pre .serp-row, .serp.pre .serp-badge, .serp.pre .bubble { animation-play-state: paused; }
.serp.rs .serp-row, .serp.rs .serp-badge, .serp.rs .bubble { animation: none !important; }
.f-ai { margin-left: 0; }

/* Mockup do site na abertura da página */
.page-hero .f-devices { max-width: none; margin: 0; padding: 1.2rem 1.2rem 1rem; }
.page-hero .f-devices .dv-laptop { width: 90%; }
.page-hero .f-devices .dv-phone { right: 1%; width: 27%; }
@media (max-width: 40rem) { .page-hero .f-devices .dv-laptop { width: 100%; } .page-hero .f-devices .dv-phone { width: 36%; right: 0; } }

/* Mockup realista do Perfil da Empresa no Google */
.f-gbp { padding: 1.2rem 1.2rem 1rem; }
.gb { max-width: 22rem; margin: 0 auto; border-radius: 1.6rem; overflow: hidden; background: #fff; border: .45rem solid #0b1626; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #202124; position: relative; }
.gb-map { position: relative; height: 8.5rem; }
.gb-map svg { width: 100%; height: 100%; display: block; }
.gb-pin { position: absolute; left: 50%; top: 22%; width: 1.7rem; transform: translateX(-50%); filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); animation: gb-drop 1.2s cubic-bezier(.3,1.6,.5,1) both .4s; }
.gb-pin svg { width: 100%; display: block; }
.gb-dot { position: absolute; width: .55rem; height: .55rem; border-radius: 50%; background: #8c9eac; border: 2px solid #fff; }
.gb-dot.d1 { left: 18%; top: 30%; } .gb-dot.d2 { left: 78%; top: 62%; } .gb-dot.d3 { left: 30%; top: 72%; }
@keyframes gb-drop { from { transform: translate(-50%, -2.5rem); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.gb-sheet { position: relative; margin-top: -1rem; background: #fff; border-radius: 1rem 1rem 0 0; padding: .55rem 1rem 1rem; box-shadow: 0 -6px 16px rgba(0,0,0,.08); }
.gb-handle { display: block; width: 2.2rem; height: .25rem; border-radius: 1rem; background: #dadce0; margin: 0 auto .6rem; }
.gb-name { display: block; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.gb-rate { display: flex; align-items: center; gap: .3rem; font-size: .8rem; margin-top: .1rem; }
.gb-rate strong { font-weight: 500; }
.gb-st { color: #fbbc04; letter-spacing: .05em; }
.gb-st.sm { font-size: .7rem; }
.gb-rate small, .gb-cat, .gb-open { color: #5f6368; font-size: .75rem; }
.gb-cat, .gb-open { display: block; }
.gb-open em { color: #188038; font-style: normal; font-weight: 500; }
.gb-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin: .8rem 0 .7rem; padding-bottom: .7rem; border-bottom: 1px solid #ebebeb; }
.gb-acts span { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .68rem; color: #0d2743; font-weight: 500; }
.gb-acts i { width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: #e8eef4; color: #0d2743; }
.gb-acts span:first-child i { background: #0d2743; color: #fff; }
.gb-acts svg { width: 1.05rem; height: 1.05rem; }
.gb-ph { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .3rem; height: 4.6rem; }
.gb-ph i { border-radius: .5rem; display: block; }
.gb-ph .a { background: linear-gradient(135deg, #0d2743, #3d5a78 60%, #8c9eac); }
.gb-ph .b { background: linear-gradient(160deg, #dad5cf, #b9ad9f); }
.gb-ph .c { background: linear-gradient(200deg, #8c9eac, #4d6680); }
.gb-rev { display: flex; gap: .55rem; margin-top: .75rem; align-items: flex-start; }
.gb-av { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #7b5ea7; color: #fff; display: grid; place-items: center; font-size: .75rem; font-weight: 600; }
.gb-rev p { margin: .1rem 0 0; font-size: .74rem; line-height: 1.35; color: #3c4043; }
@media (prefers-reduced-motion: reduce) { .gb-pin { animation: none; } }
.gb .gb-st, .gb .gb-st.sm { background: none; padding: 0; border: 0; box-shadow: none; display: inline; width: auto; height: auto; }
.gb-rev .gb-st { display: block; }
.gb-cat, .gb-open, .gb-rate small { color: #5f6368 !important; }

/* ==========================================================================
   SÓBRIO: menos efeito, mais conteúdo. Listas com fio em vez de cartões de vidro,
   botões sólidos, bordas retas entre seções, sem brilho decorativo.
   ========================================================================== */
:root { --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; }
.hero::before, .page-hero::before, .hero::after { content: none; }
.site-footer::before { content: none; }
.progress { display: none !important; }
.marquee { display: none; }
.reveal { opacity: 1; }

/* botões sólidos */
.btn { border-radius: 4px; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.btn-primary, .btn-primary:hover { background: #fff; color: #0d2743; box-shadow: none; transform: none; }
.btn-primary:hover { background: #dad5cf; }
.btn-ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.btn-ghost:hover { transform: none; box-shadow: inset 0 0 0 1px #fff; }
.nav-button { border-radius: 4px; }

/* figuras: painel liso, sem brilho */
.serp, .fig { background: var(--bg-2); box-shadow: none; border: 1px solid var(--line-soft); }
.serp-row, .kc, .node, .fig .win { box-shadow: none; }

/* resultados e pilares: painel liso */
.cases { background: var(--bg-2); box-shadow: none; }
.cases tbody tr:hover { background: transparent; }
.pillar, .pillar:first-child { background: var(--bg-2); box-shadow: none; transition: none; }
.pillar:hover { transform: none; box-shadow: none; border-color: var(--line-soft); background: var(--bg-2); }
.pillar h3::before { box-shadow: none; height: 3px; width: 2rem; border-radius: 0; }
.pillar .links a { border-radius: 4px; }
.index .tag::before, .pillar-flag::before, .checks li::before { box-shadow: none; }
.checks.no li::before { box-shadow: inset 0 0 0 2px var(--muted); }

/* índice, entregas e FAQ: lista com fio, sem caixa */
.index { gap: 0; }
.index li { border-top: 1px solid var(--line); }
.index li:last-child { border-bottom: 1px solid var(--line); }
.index a, .deliver > div, .deliver > div:last-child, .faq details, .faq details:last-child {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; margin: 0;
}
.index a { padding: 1.3rem 0; }
.index a:hover .name { text-decoration: underline; text-underline-offset: .2em; }
.deliver > div, .deliver > div:last-child { padding: 1.15rem 0; border-top: 1px solid var(--line-soft); }
.deliver > div:last-child { border-bottom: 1px solid var(--line-soft); }
.deliver > div:hover { transform: none; }
.faq details, .faq details:last-child { padding-inline: 0; border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq details[open], .faq details:hover { box-shadow: none; border-color: var(--line); }
.contact-list, .facts { background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 0; }
.contact-list > div:first-child, .facts > div:first-child { border-top: 1px solid var(--line-soft); }
.contact-list > div:last-child, .facts > div:last-child { border-bottom: 1px solid var(--line-soft); }
.steps li::before { background: #8c9eac; box-shadow: none; }
.note { box-shadow: none; }
.fine-tag { border-radius: 3px; box-shadow: none; background: transparent; border: 1px solid var(--line); color: var(--muted); }

/* chamada final: painel liso */
.cta-box { background: var(--bg-2); box-shadow: none; border-radius: 10px; }
.cta-box::before, .cta-box::after { content: none; }

/* depoimentos: rosto real do cliente (miniatura do vídeo) */
.video { background: #0a1e35; box-shadow: none; border-radius: 8px; padding: 0; isolation: isolate; }
.video:hover { transform: none; box-shadow: none; }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .4s ease; }
.video:hover img { transform: scale(1.03); }
.video::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(8, 22, 40, .85)); }
.video .who { padding: 1rem; color: #fff !important; }
.video .play { animation: none; background: #fff; color: #0d2743; box-shadow: none; }
.video .play svg { fill: #0d2743; }
.video:hover .play { transform: none; }

/* Rostos do time na home */
.faces { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.faces li { display: grid; gap: .5rem; justify-items: center; font-family: var(--ui); font-size: .85rem; font-weight: 600; color: var(--muted); }
.faces img { width: 100%; max-width: 6.5rem; aspect-ratio: 1; object-fit: cover; border-radius: 50%; display: block; }
@media (max-width: 40rem) { .faces { grid-template-columns: repeat(3, 1fr); gap: 1.2rem .8rem; } }
.avatar { box-shadow: none; }
.faces img { height: auto; }

/* Resultados no celular: alinhamento do cartão compacto */
@media (max-width: 40rem) {
  .cases tbody td:first-child, .cases tbody td:last-child { padding-inline: 0; }
}

/* Convite no meio das páginas de serviço */
.mid-cta { padding-block: clamp(2rem, 4vw, 3rem); }
.mid-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; }
.mid-cta-row p { font-family: var(--ui); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.2; color: var(--head); max-width: 24em; }

/* Celular: páginas mais curtas (ilustrações só no desktop, listas mais compactas) */
@media (max-width: 40rem) {
  .only-desktop, .page-hero .fig { display: none; }
  .mid-cta .btn { width: 100%; }
  .caps li, .autos li { padding: 0.85rem 1rem; }
}

/* Listas de recursos: planas, sem degradê nem sombra (GUIA-VISUAL.md) */
.caps li, .autos li { background: var(--bg-2); box-shadow: none; }
.caps li:hover, .autos li:hover { transform: none; }
@media (max-width: 40rem) {
  .faq summary { padding-top: 1rem; padding-bottom: 1rem; }
}

/* Títulos mais leves e menos largos (Archivo normal, sem esticar) */
h1 { font-weight: 650; font-stretch: 100%; letter-spacing: -0.025em; }
h2 { font-weight: 600; font-stretch: 100%; letter-spacing: -0.015em; }
h3, .pillar h3, .index .name { font-weight: 600; font-stretch: 100%; }
.cases .n { font-weight: 650; font-stretch: 100%; }

/* Capa clara (nude) em páginas selecionadas: quebra a repetição das capas escuras */
.page-hero.hero-light {
  --bg: #dad5cf; --bg-2: #e6e2dd; --bg-3: #ebe7e2; --line: #bdb6ae; --line-soft: #c9c3bb;
  --text: #0d2743; --muted: #3b4f63; --head: #0d2743; --card-top: #f4f2ef; --blue: #3d5a7f; --blue-bright: #0d2743;
  background: var(--bg); color: var(--text);
}
.page-hero.hero-light h1 { color: var(--head); }
.page-hero.hero-light .lead, .page-hero.hero-light p { color: #25384d; }
.page-hero.hero-light a:not(.btn) { color: #0d2743; }
.page-hero.hero-light .btn-primary { background: #0d2743; color: #fff; }
.page-hero.hero-light .btn-ghost { color: #0d2743; box-shadow: inset 0 0 0 1px #0d2743; }

/* Cabeçalho das seções: todos os parágrafos com o mesmo estilo; link como ação discreta */
.ledger-head p { color: var(--muted); font-size: 1.05rem; line-height: 1.55; }
.ledger-head p + p { margin-top: 0.8rem; }
.ledger-head p a { font-family: var(--ui); font-weight: 600; font-size: 0.98rem; color: var(--head); text-decoration-thickness: 1px; text-underline-offset: 0.3em; }

/* Pilares: cartões planos, sem sombra */
.pillar { box-shadow: none; }

/* Ilustrações e cartões: claros, para combinar com o ambiente claro (vídeos continuam escuros) */
.fig, .serp, .win {
  --bg: #ffffff; --bg-2: #f4f2ef; --bg-3: #ebe7e2; --line: #cfc9c2; --line-soft: #e0dbd5;
  --text: #0d2743; --muted: #4e6277; --head: #0d2743; --card-top: #ffffff; --blue: #3d5a7f; --blue-bright: #0d2743;
  color: var(--text);
}
.fig h1, .fig h2, .fig h3, .fig h4, .serp h3, .win h3 { color: var(--head); }
.fig, .serp { background: #ffffff; border: 1px solid var(--line); }
.fig b, .fig strong, .fig h4, .fig .t, .fig .name, .win b, .serp .t, .serp-row .t { color: var(--head); }
.fig small, .fig em, .fig .st, .fig .follow, .fig .follow-chip, .serp-note { color: var(--muted); }
.fig .bubble.them, .serp .bubble.them { background: var(--bg-3); color: var(--text); }
.fig .bubble.us, .serp .bubble.us { background: #0d2743; color: #fff; }
.fig .bubble em, .fig .ai-a, .fig .ai-a p { color: var(--text); }
.fig .btnx, .fig .btnx.sm { background: #0d2743; color: #fff; }
.serp-row .ico, .serp-row .bar { background: var(--line); }
.serp-row.is-us { background: var(--bg-3); border-color: #0d2743; }
.serp-badge { background: #0d2743; color: #fff; }
.fig b, .fig strong, .fig h4, .fig .t, .fig .name, .win b, .serp .t, .serp-row .t, .serp-row.is-us .t, .kc b, .node b, .ib-row b { color: var(--head) !important; }
.fig small, .fig em, .fig .st, .fig .follow, .serp-note, .ib-row small { color: var(--muted) !important; }
.fig .bubble.us em, .fig .bubble.us b, .serp .bubble.us em, .fig .btnx, .serp-badge, .follow-chip.on, .fig .bubble.us { color: #fff !important; }
.fig .ai-q, .fig .ai-q b { color: #0d2743 !important; }
.fig .kc, .fig .kc.won { background: #ffffff; border: 1px solid var(--line-soft); }
.fig .t5, .fig .lead-chip, .fig .ib-row.sel { background: var(--bg-3); }
.fig .ib-row.sel { border-color: #0d2743; }
.fig .follow { color: #fff !important; }
.fig .st { background: var(--bg-3); }
.fig .kc { background: #ffffff !important; }

/* ===== CAPA CLARA em todas as páginas; resto do site em azul com gradiente e brilho ===== */
.hero, .page-hero {
  --bg: #f4f2ef; --bg-2: #ebe7e2; --bg-3: #e1dcd6; --line: #cfc9c2; --line-soft: #ddd8d1;
  --text: #0d2743; --muted: #4e6277; --head: #0d2743; --card-top: #ffffff; --blue: #3d5a7f; --blue-bright: #0d2743;
  background: var(--bg); color: var(--text);
}
.hero h1, .page-hero h1 { color: var(--head); }
.hero .lead, .page-hero .lead, .hero p, .page-hero p { color: #25384d; }
.hero a:not(.btn), .page-hero a:not(.btn) { color: #0d2743; }
.hero .btn-primary, .page-hero .btn-primary { background: #0d2743; color: #fff; box-shadow: none; }
.hero .btn-ghost, .page-hero .btn-ghost { color: #0d2743; box-shadow: inset 0 0 0 1px #0d2743; }
.page-hero .pillar-flag { color: #0d2743; }

/* Seções: azul profundo com luz azul suave, alternando dois tons */
main > .section { position: relative; background: linear-gradient(180deg, #0a1c2e 0%, #0c2440 100%); }
main > .section:nth-of-type(odd) {
  background:
    radial-gradient(900px 380px at 10% -12%, rgba(74, 144, 255, 0.18), transparent 62%),
    linear-gradient(180deg, #0a1c2e 0%, #0c2440 100%);
}
main > .section:nth-of-type(even) {
  background:
    radial-gradient(1000px 440px at 90% -10%, rgba(74, 144, 255, 0.30), transparent 62%),
    radial-gradient(700px 380px at 4% 112%, rgba(61, 139, 255, 0.16), transparent 60%),
    linear-gradient(180deg, #0f3159 0%, #0b2643 100%);
}
main > .section + .section { border-top: 1px solid rgba(120, 170, 255, 0.14); }

/* Brilho discreto nos cartões e nos botões das seções azuis */
main > .section .pillar, main > .section .cases, main > .section .caps li, main > .section .autos li,
main > .section .deliver > div, main > .section .index a, main > .section .video {
  box-shadow: 0 0 0 1px rgba(120, 170, 255, 0.12), 0 18px 44px -28px rgba(61, 139, 255, 0.55);
}
main > .section .pillar:hover, main > .section .caps li:hover, main > .section .autos li:hover, main > .section .video:hover {
  box-shadow: 0 0 0 1px rgba(150, 195, 255, 0.35), 0 22px 54px -26px rgba(74, 144, 255, 0.75);
}
main > .section .btn-primary { background: #fff; color: #0d2743; box-shadow: 0 10px 34px -10px rgba(110, 170, 255, 0.7); }
main > .section .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(150, 195, 255, 0.45); }

/* Convite final e cabeçalho/rodapé */
.cta-band { background: radial-gradient(1100px 420px at 50% 0%, rgba(74, 144, 255, 0.28), transparent 65%), linear-gradient(180deg, #0c2440 0%, #081726 100%); }
.cta-box { background: linear-gradient(135deg, rgba(25, 70, 130, 0.55), rgba(10, 28, 46, 0.65)); box-shadow: 0 0 0 1px rgba(150, 195, 255, 0.22), 0 30px 80px -40px rgba(61, 139, 255, 0.8); }
.cta-box .btn-primary { background: #fff; color: #0d2743; box-shadow: 0 10px 34px -10px rgba(110, 170, 255, 0.7); }
.cta-box .btn-ghost { color: #fff; }
.site-footer { background: linear-gradient(180deg, #081726 0%, #060f1a 100%); }

/* ===== Quadros suaves: cantos arredondados, espaço entre eles e brilho sem faixas ===== */
:root { --suave-borda: rgba(150, 195, 255, 0.16); --suave-fundo: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); --suave-brilho: 0 14px 34px -26px rgba(61, 139, 255, 0.55); }
main .deliver, main .index { display: grid; gap: 14px; }
main .deliver > div, main .deliver > div:last-child, main .index a {
  margin: 0; padding: 1.15rem 1.45rem; border: 1px solid var(--suave-borda); border-radius: 18px;
  background: var(--suave-fundo); box-shadow: var(--suave-brilho);
}
main .index a { transition: border-color 0.25s ease, box-shadow 0.25s ease; }
main .index a:hover, main .deliver > div:hover { border-color: rgba(170, 210, 255, 0.4); box-shadow: 0 18px 42px -24px rgba(74, 144, 255, 0.7); transform: none; }
main .faq details {
  margin-bottom: 12px; padding: 0 1.45rem; border: 1px solid var(--suave-borda); border-radius: 16px;
  background: var(--suave-fundo); box-shadow: var(--suave-brilho);
}
main .faq details:last-child { border-bottom: 1px solid var(--suave-borda); }
main .faq details[open] { border-color: rgba(170, 210, 255, 0.35); }
main .faq .answer { padding-left: 0; }
main .cases, main .pillar, main .video, main .note, main .contact-list, main .facts, .cta-box { border-radius: 20px; }
.avatar, .map, .fig, .serp, .win { border-radius: 20px; }
.btn, .btn-primary, .btn-ghost, button.btn { border-radius: 999px; }
main > .section .deliver > div, main > .section .index a, main > .section .faq details { box-shadow: var(--suave-brilho); }
main > .section .deliver > div:hover, main > .section .index a:hover { box-shadow: 0 18px 42px -24px rgba(74, 144, 255, 0.7); }
main .faq details, main > .section .faq details { border-radius: 16px !important; border: 1px solid var(--suave-borda) !important; }
main .pillar, main .pillar.p1, main .pillar.p2, main .pillar.p3, main .pillar:first-child { border-radius: 20px !important; }

/* ===== Azul mais vivo e luminoso nas seções (menos escuro) ===== */
main > .section {
  --bg: #0e3a70; --bg-2: #134a86; --bg-3: #185a9e; --line: #3a74b8; --line-soft: #2a5f9f;
  --muted: #c6d6e6; --blue-bright: #d6e4f2;
}
main > .section:nth-of-type(odd) {
  background:
    radial-gradient(1100px 460px at 8% -10%, rgba(120, 190, 255, 0.30), transparent 62%),
    radial-gradient(800px 420px at 100% 110%, rgba(61, 139, 255, 0.22), transparent 60%),
    linear-gradient(180deg, #0f3d75 0%, #0b2f5c 100%);
}
main > .section:nth-of-type(even) {
  background:
    radial-gradient(1100px 480px at 92% -12%, rgba(140, 205, 255, 0.38), transparent 62%),
    radial-gradient(800px 420px at 0% 112%, rgba(80, 160, 255, 0.24), transparent 60%),
    linear-gradient(180deg, #1a5aa0 0%, #123f78 100%);
}
main > .section + .section { border-top: 1px solid rgba(180, 215, 255, 0.22); }
main > .section .pillar, main > .section .cases, main > .section .deliver > div, main > .section .index a,
main > .section .faq details, main > .section .caps li, main > .section .autos li {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05));
  border-color: rgba(190, 220, 255, 0.28);
}
main > .section .form input, main > .section .form select, main > .section .form textarea { background: rgba(255, 255, 255, 0.10); border-color: rgba(190, 220, 255, 0.35); }
.cta-band { background: radial-gradient(1200px 460px at 50% 0%, rgba(140, 205, 255, 0.35), transparent 66%), linear-gradient(180deg, #123f78 0%, #0b2a50 100%); }
.cta-box { background: linear-gradient(135deg, rgba(60, 130, 215, 0.5), rgba(14, 58, 112, 0.7)); }
.site-footer { background: linear-gradient(180deg, #0b2a50 0%, #081d38 100%); }
main .faq details, main .faq details:last-child { padding-left: 1.45rem !important; padding-right: 1.45rem !important; }

/* ===== Um só tom em todas as seções: azul médio com luz suave no alto (o preferido) ===== */
main > .section, main > .section:nth-of-type(odd), main > .section:nth-of-type(even) {
  --bg: #0d3a70; --bg-2: #114581; --bg-3: #16508f; --line: #35699f; --line-soft: #28578f;
  --muted: #c3d3e4; --blue-bright: #d6e4f2;
  background:
    radial-gradient(1200px 480px at 50% -18%, rgba(140, 195, 255, 0.30), transparent 66%),
    linear-gradient(180deg, #164c88 0%, #0e3b72 38%, #0b3366 100%);
}
main > .section + .section { border-top: 1px solid rgba(170, 210, 255, 0.16); }
.cta-band { background: radial-gradient(1200px 460px at 50% 0%, rgba(140, 195, 255, 0.28), transparent 66%), linear-gradient(180deg, #0f3d75 0%, #0a2c56 100%); }
.site-footer { background: linear-gradient(180deg, #0a2c56 0%, #071e3b 100%); }

/* ===== Sem bordas nem contornos luminosos: cartões só com fundo translúcido ===== */
main > .section .pillar, main > .section .cases, main > .section .deliver > div, main > .section .index a,
main > .section .faq details, main > .section .caps li, main > .section .autos li, main > .section .video,
main .faq details, main .contact-list, main .note, .cta-box {
  border: 0 !important; box-shadow: none !important;
}
main > .section .pillar:hover, main > .section .deliver > div:hover, main > .section .index a:hover,
main > .section .caps li:hover, main > .section .autos li:hover, main > .section .video:hover,
main > .section .faq details[open] {
  border: 0 !important; box-shadow: none !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
}
main > .section + .section { border-top: 0; }

/* ===== Emenda invisível entre as seções: topo e base com a mesma cor; a luz fica no meio ===== */
main > .section, main > .section:nth-of-type(odd), main > .section:nth-of-type(even) {
  background:
    radial-gradient(1000px 420px at 72% 38%, rgba(140, 195, 255, 0.20), transparent 70%),
    linear-gradient(180deg, #0e3b72 0%, #145088 50%, #0e3b72 100%);
}
.cta-band { background: radial-gradient(1100px 420px at 50% 40%, rgba(140, 195, 255, 0.22), transparent 68%), linear-gradient(180deg, #0e3b72 0%, #0a2c56 100%); }
.site-footer { background: linear-gradient(180deg, #0a2c56 0%, #071e3b 100%); }

/* ===== Só o azul escolhido (#0f3d73), liso, com uma luz quase imperceptível ===== */
main > .section, main > .section:nth-of-type(odd), main > .section:nth-of-type(even) {
  --bg: #0f3d73; --bg-2: #134880; --bg-3: #185490;
  background:
    radial-gradient(1000px 420px at 72% 40%, rgba(140, 195, 255, 0.07), transparent 70%),
    #0f3d73;
}
.cta-band { background: radial-gradient(1100px 420px at 50% 40%, rgba(140, 195, 255, 0.10), transparent 68%), linear-gradient(180deg, #0f3d73 0%, #0a2c56 100%); }

/* ===== Fundo azul mais escuro e quadros em vidro branco fosco ===== */
main > .section, main > .section:nth-of-type(odd), main > .section:nth-of-type(even) {
  --bg: #0a2b55; --bg-2: #0f3868; --bg-3: #144378; --line: #2c5a90; --line-soft: #21497c;
  background:
    radial-gradient(900px 420px at 82% 28%, rgba(70, 145, 255, 0.16), transparent 70%),
    radial-gradient(720px 400px at 8% 82%, rgba(100, 170, 255, 0.10), transparent 70%),
    #0a2b55;
}
.cta-band { background: radial-gradient(1000px 400px at 50% 40%, rgba(70, 145, 255, 0.16), transparent 68%), linear-gradient(180deg, #0a2b55 0%, #071f3f 100%); }
.site-footer { background: linear-gradient(180deg, #071f3f 0%, #05162d 100%); }

main > .section .pillar, main > .section .cases, main > .section .deliver > div, main > .section .index a,
main > .section .faq details, main > .section .caps li, main > .section .autos li,
main .contact-list, main .note, .cta-box {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
}
main > .section .pillar:hover, main > .section .deliver > div:hover, main > .section .index a:hover,
main > .section .caps li:hover, main > .section .autos li:hover, main > .section .faq details[open] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.11));
}
.cta-box { background: linear-gradient(135deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.07)); }

/* ===== Detalhes premium ===== */
/* 1) Corrige as linhas soltas nas pontas da lista "Continue explorando" */
main .index li, main .index li:last-child { border: 0 !important; }

/* 2) Marca de título: barrinha em degradê azul antes de cada título de seção */
.ledger-head h2::before {
  content: ""; display: block; width: 38px; height: 3px; margin-bottom: 1.1rem; border-radius: 3px;
  background: linear-gradient(90deg, #a6d2ff, #4a90ff);
}

/* 3) Textura sutil (grão) e luz de fundo, para o azul não parecer chapado */
main > .section { overflow: hidden; }
main > .section::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.045; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* 4) Linha fina que some nas pontas entre as seções (bem discreta) */
main > .section + .section::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(190, 220, 255, 0.22), transparent);
}

/* 5) Marcadores das listas: bolinha de luz azul em vez de cinza chapado */
.checks li::before, .checks li::before {
  background: radial-gradient(circle at 35% 30%, #e3f1ff, #6fb3ff 70%) !important;
  box-shadow: 0 0 10px rgba(110, 175, 255, 0.55) !important; border: 0 !important;
}
.checks li, .checks li:last-child { border-color: rgba(190, 220, 255, 0.14); }

/* 6) Movimento suave nos cartões */
main > .section .pillar, main > .section .deliver > div, main > .section .index a, main > .section .caps li, main > .section .autos li, main > .section .faq details {
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.4s ease;
}
main > .section .pillar:hover, main > .section .deliver > div:hover, main > .section .index a:hover, main > .section .caps li:hover, main > .section .autos li:hover { transform: translateY(-2px); }

/* 7) Ilustrações claras flutuando sobre o azul, com respiro do texto */
.stack-fig { gap: 1.9rem; }
.stack-fig > .fig, .stack-fig > .only-desktop { margin-top: 0.4rem; }
main > .section .fig { border: 0; box-shadow: 0 40px 90px -42px rgba(0, 10, 30, 0.7); border-radius: 24px; }

/* 8) Perguntas frequentes: ambiente próprio (azul com luz índigo) e perguntas numeradas */
main > .section:has(.faq) {
  background:
    radial-gradient(900px 440px at 14% 18%, rgba(125, 115, 255, 0.17), transparent 70%),
    radial-gradient(760px 420px at 92% 92%, rgba(70, 145, 255, 0.13), transparent 70%),
    #0a2b55;
}
main .faq { counter-reset: pergunta; }
main .faq details { counter-increment: pergunta; }
main .faq summary { padding-left: 3.1rem; position: relative; }
main .faq summary::before {
  content: counter(pergunta, decimal-leading-zero); position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--ui); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; color: #9cc8ff;
}
main .faq details[open] summary::before { color: #ffffff; }

/* 9) Continue explorando: ambiente próprio (azul com luz ciano) e seta que desliza */
main > .section:has(.index) {
  background:
    radial-gradient(900px 440px at 84% 24%, rgba(70, 205, 235, 0.15), transparent 70%),
    radial-gradient(760px 420px at 6% 90%, rgba(80, 150, 255, 0.12), transparent 70%),
    #0a2b55;
}
main .index a { position: relative; }
main .index a .tag::after { content: "→"; margin-left: 0.7rem; display: inline-block; transition: transform 0.35s ease; opacity: 0.8; }
main .index a:hover .tag::after { transform: translateX(5px); opacity: 1; }

/* 10) Pequenos acabamentos */
::selection { background: rgba(120, 185, 255, 0.4); color: #fff; }
html { scrollbar-color: #2f5f99 #081f3f; scrollbar-width: thin; }
:focus-visible { outline: 2px solid #8cc3ff; outline-offset: 3px; border-radius: 8px; }
main > .section .btn-primary { transition: transform 0.3s ease, box-shadow 0.3s ease; }
main > .section .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(110, 170, 255, 0.8); }

/* ===== Como funciona: passos em vidro fosco com selos numerados e fio de ligação ===== */
main > .section .steps { position: relative; display: grid; gap: 14px; counter-reset: passo; }
main > .section .steps::before {
  content: ""; position: absolute; z-index: 0; left: calc(1.5rem + 1.7rem - 1px); top: 2.6rem; bottom: 2.6rem; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(160, 208, 255, 0.6), rgba(160, 208, 255, 0.08));
}
main > .section .steps li {
  position: relative; z-index: 1; display: grid; grid-template-columns: 3.4rem 1fr; column-gap: 1.3rem; align-items: center;
  margin: 0; padding: 1.3rem 1.5rem; border: 0; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.07));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.4s ease;
}
main > .section .steps li:hover { transform: translateY(-2px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.10)); }
main > .section .steps li::after { content: none !important; display: none; }
main > .section .steps li::before {
  counter-increment: passo; content: counter(passo, decimal-leading-zero); grid-row: 1 / span 2;
  display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  font-family: var(--ui); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; color: #0a2b55;
  background: linear-gradient(135deg, #e6f3ff, #7db9ff);
  box-shadow: 0 10px 26px -10px rgba(110, 175, 255, 0.8), 0 0 0 7px rgba(150, 200, 255, 0.10);
}
main > .section .steps li > * { grid-column: 2; }
main > .section .steps h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
main > .section .steps p { margin-top: 0.2rem; }
@media (max-width: 40rem) {
  main > .section .steps::before { left: calc(1rem + 1.4rem - 1px); top: 2.3rem; bottom: 2.3rem; }
  main > .section .steps li { grid-template-columns: 2.8rem 1fr; column-gap: 1rem; padding: 1.1rem 1rem; }
  main > .section .steps li::before { width: 2.8rem; height: 2.8rem; font-size: 0.95rem; }
}

/* ===== Movimento fluido (só para quem não pediu menos movimento) ===== */
@property --gx1 { syntax: "<percentage>"; inherits: false; initial-value: 82%; }
@property --gy1 { syntax: "<percentage>"; inherits: false; initial-value: 28%; }
@property --gx2 { syntax: "<percentage>"; inherits: false; initial-value: 8%; }
@property --gy2 { syntax: "<percentage>"; inherits: false; initial-value: 82%; }

/* luzes de fundo ligadas às variáveis, para poderem se mover */
main > .section, main > .section:nth-of-type(odd), main > .section:nth-of-type(even) {
  background:
    radial-gradient(900px 420px at var(--gx1) var(--gy1), rgba(70, 145, 255, 0.16), transparent 70%),
    radial-gradient(720px 400px at var(--gx2) var(--gy2), rgba(100, 170, 255, 0.10), transparent 70%),
    #0a2b55;
}
main > .section:has(.faq) {
  background:
    radial-gradient(900px 440px at var(--gx2) var(--gy1), rgba(125, 115, 255, 0.17), transparent 70%),
    radial-gradient(760px 420px at var(--gx1) var(--gy2), rgba(70, 145, 255, 0.13), transparent 70%),
    #0a2b55;
}
main > .section:has(.index) {
  background:
    radial-gradient(900px 440px at var(--gx1) var(--gy1), rgba(70, 205, 235, 0.15), transparent 70%),
    radial-gradient(760px 420px at var(--gx2) var(--gy2), rgba(80, 150, 255, 0.12), transparent 70%),
    #0a2b55;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  @keyframes deriva {
    from { --gx1: 76%; --gy1: 22%; --gx2: 6%; --gy2: 88%; }
    to   { --gx1: 94%; --gy1: 44%; --gx2: 20%; --gy2: 66%; }
  }
  main > .section.is-live { animation: deriva 20s ease-in-out infinite alternate; }
  main > .section:nth-of-type(3n+1).is-live { animation-delay: -5s; }
  main > .section:nth-of-type(3n+2).is-live { animation-delay: -11s; }

  /* aparecer ao rolar: sobe e assenta, com atraso entre irmãos */
  @keyframes surge { from { opacity: 0; transform: translateY(30px) scale(0.985); } }
  .reveal { opacity: 0; }
  .reveal.in { opacity: 1; animation: surge 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: var(--d, 0s); }
  .steps.reveal, .steps.reveal.in { opacity: 1; animation: none; }

  /* barrinha do título cresce; fio dos passos se desenha */
  @keyframes barra { from { width: 0; opacity: 0; } }
  .ledger-head.in h2::before { animation: barra 0.9s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  main > .section .steps::before { transform-origin: top; transform: scaleY(0); }
  main > .section .steps.in::before { transform: scaleY(1); transition: transform 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s; }

  /* selos dos passos respiram devagar */
  @keyframes pulsa {
    0%, 100% { box-shadow: 0 10px 26px -10px rgba(110, 175, 255, 0.8), 0 0 0 7px rgba(150, 200, 255, 0.10); }
    50% { box-shadow: 0 10px 30px -8px rgba(110, 175, 255, 0.95), 0 0 0 12px rgba(150, 200, 255, 0.04); }
  }
  main > .section .steps li::before { animation: pulsa 3.6s ease-in-out infinite; }
  main > .section .steps li:nth-child(2)::before { animation-delay: 0.5s; }
  main > .section .steps li:nth-child(3)::before { animation-delay: 1s; }
  main > .section .steps li:nth-child(4)::before { animation-delay: 1.5s; }
  main > .section .steps li:nth-child(5)::before { animation-delay: 2s; }

  /* resposta das perguntas abre suave */
  @keyframes abre { from { opacity: 0; transform: translateY(-8px); } }
  main .faq details[open] .answer { animation: abre 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }

  /* abertura: texto entra em sequência; ilustração flutua */
  .hero .eyebrow, .hero h1, .hero .lead, .hero .btn-row, .hero .fine,
  .page-hero .crumbs, .page-hero h1, .page-hero .lead, .page-hero .pillar-flag, .page-hero .btn-row, .page-hero .updated {
    animation: surge 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }
  .hero h1, .page-hero h1 { animation-delay: 0.08s; }
  .hero .lead, .page-hero .lead { animation-delay: 0.22s; }
  .hero .btn-row, .page-hero .btn-row, .page-hero .pillar-flag { animation-delay: 0.36s; }
  .hero .fine, .page-hero .updated { animation-delay: 0.48s; }
  @keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  .hero .serp, .page-hero .fig { animation: flutua 9s ease-in-out 1.2s infinite; }
}

/* ===== Versão leve do movimento: só transform e opacidade (rodam na placa de vídeo) ===== */
/* 1) sem desfoque de fundo nos cartões (era o item mais pesado ao rolar) */
main > .section .pillar, main > .section .cases, main > .section .deliver > div, main > .section .index a,
main > .section .faq details, main > .section .caps li, main > .section .autos li, main > .section .steps li,
main .contact-list, main .note, .cta-box {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* 2) luz de fundo: uma camada que só desliza (transform), no lugar de redesenhar o degradê; sem grão */
main > .section::after {
  inset: -12% -8%; opacity: 1; mix-blend-mode: normal; background-repeat: no-repeat;
  background-image:
    radial-gradient(520px 320px at 78% 30%, rgba(90, 160, 255, 0.14), transparent 70%),
    radial-gradient(460px 300px at 14% 78%, rgba(120, 190, 255, 0.09), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes desliza { from { transform: translate3d(-3%, 2%, 0); } to { transform: translate3d(3%, -2%, 0); } }
  main > .section.is-live { animation: none !important; }
  main > .section.is-live::after { animation: desliza 22s ease-in-out infinite alternate; will-change: transform; }
  /* 3) selos sem animar sombra (repintava a cada quadro) */
  main > .section .steps li::before { animation: none; }
  .hero .serp, .page-hero .fig { will-change: transform; }
}
@media (max-width: 40rem) {
  main > .section.is-live::after, .hero .serp, .page-hero .fig { animation: none !important; }
}

/* ===== Cartões de contato e de fatos: respiro interno e sem linhas soltas nas pontas ===== */
main .contact-list, main .facts {
  padding: 0.4rem 1.7rem !important; border: 0 !important; border-radius: 20px; box-shadow: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
}
main .contact-list > div, main .facts > div {
  padding: 1.15rem 0; border-top: 1px solid rgba(190, 220, 255, 0.13) !important; border-bottom: 0 !important;
}
main .contact-list > div:first-child, main .facts > div:first-child { border-top: 0 !important; }
main .contact-list > div:last-child, main .facts > div:last-child { border-bottom: 0 !important; }
@media (max-width: 40rem) { main .contact-list, main .facts { padding: 0.3rem 1.3rem !important; } }

/* Home: H1 mais longo (mesma fonte, peso e cor), com tamanho e largura ajustados */
.hero h1 { font-size: clamp(2rem, 4.3vw, 3.5rem); max-width: 19ch; line-height: 1.06; }
/* H2 dentro da seção "Para quem é" com o mesmo visual do antigo H3 */
h2.h3-look { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; font-stretch: 100%; }


/* ===== Botão flutuante do WhatsApp ===== */
.wa-float {
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: #25d366;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28); text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(0, 0, 0, .34); color: #fff; }
.wa-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 640px) { .wa-float { width: 3.3rem; height: 3.3rem; } }
@media print { .wa-float { display: none; } }

/* ===== PAINÉIS ESTILO DASHBOARD (ilustrações escuras com barra de janela) ===== */
.fig, .serp {
  --bg: #0b1c34; --bg-2: #10284a; --bg-3: #14305a; --line: rgba(255,255,255,.14); --line-soft: rgba(255,255,255,.09);
  --text: #dfe8f3; --muted: #9db2c8; --head: #ffffff; --card-top: #14305a; --blue: #7fb4ff; --blue-bright: #cfe3ff;
  --acc: #38c7f2; --acc2: #3b82e8;
  position: relative; color: var(--text);
  background: linear-gradient(165deg, #12294b 0%, #0a1b33 70%) !important;
  border: 1px solid rgba(255,255,255,.1) !important; border-radius: 20px !important;
  box-shadow: 0 34px 60px -34px rgba(8,24,48,.65), inset 0 1px 0 rgba(255,255,255,.07) !important;
  padding-top: 3.3rem !important; overflow: hidden;
}
.fig::before, .serp::before {
  content: attr(data-title); position: absolute; left: 0; right: 0; top: 0; height: 2.5rem;
  display: flex; align-items: center; padding: 0 1rem 0 4.4rem;
  font: 600 .74rem/1 var(--ui, inherit); letter-spacing: .02em; color: #b9cbe0;
  background: rgba(255,255,255,.035); border-bottom: 1px solid rgba(255,255,255,.08);
}
.fig::after, .serp::after {
  content: ""; position: absolute; left: 1rem; top: 1.05rem; width: .5rem; height: .5rem; border-radius: 50%;
  background: #ff6b6b; box-shadow: .85rem 0 0 #ffc24b, 1.7rem 0 0 #3ddc97; pointer-events: none;
}
.fig-cap { color: var(--muted) !important; }
.fig .btnx, .fig .btnx.sm { background: linear-gradient(135deg, var(--acc), var(--acc2)) !important; color: #06182e !important; font-weight: 700; }
.fig .kc, .fig .kc.won { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; }
.fig .kcol { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.fig .kcol.won { border-color: rgba(61,220,151,.45); } .fig .kcol.won .kc { background: rgba(61,220,151,.1) !important; }
.fig .t5, .fig .lead-chip, .fig .ib-row.sel, .fig .st { background: rgba(255,255,255,.07); }
.fig .bubble.them { background: rgba(255,255,255,.1); color: #e8eef6; }
.fig .bubble.us { background: linear-gradient(135deg, #1d4fa8, #2f7fe0) !important; }
.fig .ai-q { background: #dfe8f3; }
.fig .mt-k, .fig .mt-chart { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); box-shadow: none; }
.fig .mt-bars i { background: linear-gradient(180deg, var(--acc), #3b64d8); }
.fig .mt-k b { color: #fff !important; }
.fig .node { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
/* mockups "de produto" (celular, notebook, ficha do Google, página) continuam claros dentro do painel */
.fig .gb, .fig .gb *, .fig .dv-screen, .fig .dv-screen *, .fig .dv-phone .sm, .fig .dv-phone .sm *, .fig .win, .fig .win *, .fig .ig-grid {
  --bg: #ffffff; --bg-2: #f4f2ef; --bg-3: #ebe7e2; --line: #cfc9c2; --line-soft: #e0dbd5;
  --text: #0d2743; --muted: #4e6277; --head: #0d2743; --blue: #3d5a7f; --blue-bright: #0d2743;
}
.f-trafego::before { content: "Campanhas · Google Ads e Meta Ads"; }
.f-crm::before { content: "CRM CR8 Conecta · Funil de vendas"; }
.f-ia::before { content: "Atendimento por IA · WhatsApp"; }
.f-loop::before { content: "Método PAR 360 · Ciclo"; }
.f-redes::before { content: "Redes sociais · Perfil"; }
.f-gbp::before { content: "Perfil da Empresa no Google"; }
.f-landing::before { content: "Página de captura"; }
.f-site::before, .f-devices::before { content: "Site institucional · Computador e celular"; }
.f-metricas::before { content: "Painel · Desempenho do perfil"; }
.f-ai::before { content: "Assistente de IA · Resposta"; }
.f-inbox::before, .f-mobile::before { content: "CRM CR8 Conecta"; }
.serp::before { content: "Busca no Google · Resultado"; }


/* ===== HOME: capa com destaque no título, luz de fundo, painéis em perspectiva e fatos ===== */
.grad { background: linear-gradient(100deg, #1d4fa8 0%, #2f7fe0 55%, #38b6f2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero { overflow: hidden; }
.hero::before {
  content: "" !important; position: absolute; z-index: -1; pointer-events: none;
  width: 64rem; height: 64rem; right: -22rem; top: -26rem; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(56,199,242,.38), rgba(47,127,224,.26) 38%, rgba(47,127,224,.12) 58%, transparent 70%);
}
.hero::after {
  content: "" !important; position: absolute; z-index: -1; pointer-events: none;
  width: 34rem; height: 34rem; left: -14rem; bottom: -20rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(29,111,209,.18), transparent 68%);
}
.hero-stage { position: relative; }
.hero-stage .ghost { display: none; }
@media (min-width: 62.01rem) {
  .hero-stage { perspective: 1600px; }
  .hero-stage .serp { transform: rotateY(-10deg) rotateX(3deg) rotate(1.2deg); transform-origin: 60% 50%; margin-left: 0; max-width: 28rem; }
  .hero-stage .ghost {
    display: block; position: absolute; border-radius: 20px; z-index: 0;
    background: linear-gradient(165deg, rgba(18,41,75,.92), rgba(10,27,51,.92)); border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 50px -30px rgba(8,24,48,.55);
  }
  .hero-stage .g1 { width: 15rem; height: 11rem; right: -2.4rem; top: -2rem; transform: rotateY(-10deg) rotate(5deg); opacity: .55; }
  .hero-stage .g2 { width: 13rem; height: 9rem; left: -3.2rem; bottom: -1.8rem; transform: rotateY(-10deg) rotate(-4deg); opacity: .7; }
  .hero-stage .serp { z-index: 1; }
}
.hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(2.2rem, 5vw, 3.6rem); padding-top: 1.6rem; border-top: 1px solid rgba(13,39,67,.14); }
.hero-facts div { padding: 0 clamp(.8rem, 2.5vw, 2rem); border-left: 1px solid rgba(13,39,67,.14); }
.hero-facts div:first-child { padding-left: 0; border-left: 0; }
.hero-facts b { display: block; font-family: var(--ui, inherit); font-weight: 800; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1; letter-spacing: -.02em; background: linear-gradient(100deg, #1d4fa8, #2f7fe0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-facts span { display: block; margin-top: .5rem; font-size: .92rem; line-height: 1.35; color: #3f556b; max-width: 17em; }
@media (max-width: 40rem) { .hero-facts { grid-template-columns: 1fr; gap: 1rem; } .hero-facts div { padding: 0; border-left: 0; } .hero-facts b { display: inline; font-size: 1.6rem; margin-right: .5rem; } .hero-facts span { display: inline; } }


/* ===== Títulos com mistura azul (marinho + azul) e botões da capa em gradiente ===== */
.grad { background: linear-gradient(100deg, #1d4fa8 0%, #2f7fe0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
main > .section .grad, .cta-box .grad, .site-footer .grad { background-image: linear-gradient(100deg, #7cc0ff 0%, #b9dcff 100%); }
.hero .btn-primary, .page-hero .btn-primary { background: linear-gradient(100deg, #1b4aa0, #2a74dc); color: #fff; box-shadow: 0 10px 24px -12px rgba(29,79,168,.7); }
.hero .btn-primary:hover, .page-hero .btn-primary:hover { background: linear-gradient(100deg, #17408c, #2468c8); color: #fff; }
.page-hero.hero-light .btn-primary { background: linear-gradient(100deg, #1b4aa0, #2a74dc); color: #fff; }


/* ===== Celular do mockup do site: aparelho inteiro, com proporção real ===== */
.dv-phone { aspect-ratio: 9 / 18.4; display: flex; bottom: 0; width: 26%; }
.dv-phone .sm { flex: 1; padding-bottom: 0; }
.dv-phone .sm::after { content: ""; position: absolute; left: 50%; bottom: .7em; width: 34%; height: .28em; border-radius: 999px; background: #0d2743; opacity: .3; transform: translateX(-50%); }
.dv-phone .sm-wa { bottom: 2em; }

/* ===== Blog: aparência de blog (claro, editorial) ===== */
.blog-zone { background: #f4f2ef; color: #0d2743; padding-block: clamp(2.5rem, 6vw, 4.5rem); position: relative; }
.blog-zone.blog-more { background: #ebe7e2; padding-block: clamp(2rem, 5vw, 3.5rem); }
.blog-zone h2, .blog-zone strong { color: #0d2743; }
.blog-kicker { font-size: .82rem !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #4e6277 !important; margin: 0 0 1.1rem; }
.blog-kicker + .post-card, .post-grid { margin-bottom: 2.4rem; }
.chip { display: inline-block; padding: .28rem .7rem; border-radius: 999px; background: #dbe6f2; color: #1d4fa8; font-size: .76rem; font-weight: 700; letter-spacing: .02em; }
.chip-lg { font-size: .82rem; margin-bottom: 1rem; }
.cover { display: flex; flex-direction: column; justify-content: flex-end; gap: .6rem; position: relative; overflow: hidden; border-radius: 16px; color: rgba(255,255,255,.55); padding: 1.1rem 1.2rem; min-height: 11rem; background: linear-gradient(135deg, #0d2743, #2a4f7d); }
.cover svg { position: absolute; right: 1rem; top: 1rem; width: 5.5rem; height: 5.5rem; opacity: .5; }
.cover b { position: relative; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; font-weight: 700; }
.cv-trafego { background: linear-gradient(135deg, #1d4a7a, #6f93b8); }
.cv-crm { background: linear-gradient(135deg, #27456b, #8c9eac); }
.cover-lg { min-height: 14rem; }
.post-card { display: flex; flex-direction: column; gap: 1rem; text-decoration: none; color: inherit; background: #fff; border: 1px solid #e0dbd5; border-radius: 22px; padding: .8rem; transition: transform .25s ease, box-shadow .25s ease; }
.post-card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -26px rgba(13,39,67,.45); }
.post-txt { display: flex; flex-direction: column; gap: .6rem; padding: .4rem .8rem .8rem; flex: 1; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; font-size: .82rem; color: #4e6277; }
.post-title { font-size: 1.3rem; line-height: 1.25; font-weight: 750; color: #0d2743; letter-spacing: -.01em; }
.post-desc { color: #3f556b; font-size: 1rem; line-height: 1.55; }
.post-more { margin-top: auto; padding-top: .3rem; font-weight: 700; color: #1d4fa8; }
.post-more i { font-style: normal; display: inline-block; transition: transform .25s ease; }
.post-card:hover .post-more i { transform: translateX(4px); }
.post-card.feat { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; gap: 1.4rem; padding: 1rem; }
.post-card.feat .cover { min-height: 18rem; height: 100%; border-radius: 18px; }
.post-card.feat .post-title { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; }
.post-card.feat .post-txt { justify-content: center; padding: 1rem 1rem 1rem .4rem; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.4rem; }
@media (max-width: 52rem) { .post-card.feat { grid-template-columns: 1fr; } .post-card.feat .cover { min-height: 12rem; } .post-card.feat .post-txt { padding: .4rem .8rem .8rem; } }

.byline { display: flex; align-items: center; gap: .8rem; margin-top: 1.4rem; }
.byline img { width: 2.6rem; height: 2.6rem; padding: .5rem; border-radius: 50%; background: #0d2743; object-fit: contain; }
.byline span { display: grid; line-height: 1.3; }
.byline strong { color: #0d2743; }
.byline small { color: #4e6277; font-size: .86rem; }

.post-layout { display: grid; grid-template-columns: 15rem minmax(0, 44rem); gap: clamp(2rem, 5vw, 4rem); justify-content: center; align-items: start; }
.toc { position: sticky; top: 6rem; padding: 1.2rem 1.3rem; border-radius: 18px; background: #fff; border: 1px solid #e0dbd5; }
.toc p { margin: 0 0 .7rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #4e6277; }
.toc ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; font-size: .93rem; line-height: 1.35; }
.toc a { color: #1d4fa8; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
@media (max-width: 62rem) { .post-layout { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } }

.post-body { color: #1d3250; font-size: 1.12rem; line-height: 1.8; }
.post-body .cover { margin-bottom: 2.2rem; }
.post-body h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); line-height: 1.2; margin: 2.6rem 0 .9rem; scroll-margin-top: 6rem; }
.post-body p { margin: 0 0 1.1rem; color: #1d3250; }
.post-body ul, .post-body ol { padding-left: 1.3rem; display: grid; gap: .6rem; margin: 1.1rem 0 1.4rem; }
.post-body li { padding-left: .2rem; color: #1d3250; }
.post-body a { color: #1d4fa8; text-underline-offset: .2em; }
.post-body strong { color: #0d2743; }
.post-cta { margin-top: 3rem; padding: 1.6rem 1.7rem; border-radius: 20px; background: linear-gradient(135deg, #0d2743, #1f4572); color: #fff; }
.post-cta h2 { margin: 0 0 .6rem; color: #fff !important; }
.post-cta p, .post-cta a:not(.btn) { color: #dbe7f5; }
.post-cta .btn-primary { background: #fff; color: #0d2743 !important; }
.share { margin-top: 1.6rem; font-size: .95rem; color: #4e6277 !important; }


/* ===== Capas ilustradas do blog ===== */
.cover, .cover-lg { display: block; padding: 0; min-height: 0; aspect-ratio: 16 / 9; background: #dbe8f5; border-radius: 16px; color: inherit; }
.cover svg { position: static; display: block; width: 100%; height: 100%; opacity: 1; right: auto; top: auto; }
.post-card.feat .cover { min-height: 0; height: auto; aspect-ratio: 16 / 9; align-self: center; }
.post-body .cover { margin-bottom: 2.2rem; border-radius: 20px; }


/* ===== Aviso de cookies ===== */
.cookie-bar { position: fixed; left: 1rem; bottom: 1rem; z-index: 70; max-width: 31rem; padding: 1.1rem 1.2rem; border-radius: 18px;
  background: #0d2743; color: #e6eef7; box-shadow: 0 18px 44px -18px rgba(0, 10, 30, .65); border: 1px solid rgba(255,255,255,.12); font-size: .93rem; line-height: 1.5; }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0 0 .9rem; color: #e6eef7; }
.cookie-bar a { color: #bfe0ff; }
.cookie-actions { display: flex; gap: .6rem; justify-content: flex-end; }
.cookie-btn { font: inherit; font-weight: 700; padding: .55rem 1.1rem; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; }
.cookie-btn:hover { background: rgba(255,255,255,.1); }
.cookie-btn.cookie-yes { background: #fff; color: #0d2743; border-color: #fff; }
.cookie-btn:focus-visible { outline: 3px solid #bfe0ff; outline-offset: 2px; }
.linklike { font: inherit; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 40rem) { .cookie-bar { right: 1rem; max-width: none; bottom: 5.4rem; } }