/* CQV Agência de Marketing Digital — premium. Tokens primeiro. */
:root {
  --preto: #07080A;
  --grafite: #101317;
  --grafite2: #171B21;
  --linha: rgba(255, 255, 255, .09);
  --branco: #FFFFFF;
  --texto2: #B7BFC8;
  --claro: #F2F4F6;
  --tinta: #07080A;
  --cinza: #59626C;
  --teal: #1BC7C8;
  --coral: #FF5A43;
  --coral-h: #FF7360;
  --zap: #25D366;

  --f: "Instrument Sans", system-ui, sans-serif;
  --t-s: 0.9375rem;
  --t-b: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-l: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --t-h: clamp(2.5rem, 1.2rem + 4.6vw, 5.5rem);
  --t-d: clamp(3rem, 1rem + 7vw, 8.25rem);

  --m: clamp(20px, 4vw, 72px);
  --larg: 1440px;
  --sec: clamp(110px, 13vw, 200px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-padding-top: 80px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { background: var(--preto); color: var(--branco); font: 400 var(--t-b)/1.6 var(--f); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; border-radius: 6px; }
::selection { background: var(--teal); color: var(--tinta); }
.pular { position: absolute; left: 16px; top: -80px; z-index: 60; padding: 12px 16px; background: var(--teal); color: var(--tinta); font-weight: 600; }
.pular:focus { top: 12px; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; }
h2 { font-size: var(--t-h); }
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.palavra > span { display: inline-block; will-change: transform; }

/* botões */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--coral); color: var(--tinta); font: 650 var(--t-s)/1 var(--f); text-decoration: none; border: 0; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: background-color .3s, color .3s; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--branco); border-radius: inherit; transform: translateY(101%); transition: transform .5s var(--ease); }
.btn:hover::before { transform: translateY(0); }
.btn:active { scale: .97; }
.btn-grande { min-height: 62px; padding: 0 36px; font-size: 1.0625rem; }
.btn-escuro { background: var(--tinta); color: var(--branco); }
.btn-escuro:hover { color: var(--tinta); }

.progresso { position: fixed; inset: 0 0 auto; height: 2px; z-index: 50; pointer-events: none; }
.progresso i { display: block; height: 100%; background: var(--teal); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- barra ---------- */
.barra { position: fixed; inset: 14px var(--m) auto; z-index: 40; display: flex; align-items: center; gap: 26px; height: 64px; padding: 0 10px 0 22px;
  border-radius: 999px; background: rgba(16, 19, 23, .72); border: 1px solid var(--linha); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  transition: translate .5s var(--ease); }
.barra.some { translate: 0 -110px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--branco); }
.marca b { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.marca .tag { padding-left: 12px; border-left: 1px solid var(--linha); color: var(--texto2); font-size: 0.875rem; }
.bolhas { position: relative; width: 38px; height: 28px; flex: none; }
.bolhas i { position: absolute; top: 2px; width: 23px; height: 18px; border-radius: 55% 55% 55% 20%; }
.bolhas .b1 { left: 0; background: var(--teal); }
.bolhas .b2 { left: 14px; top: 8px; background: var(--coral); transform: scaleX(-1); }
.menu { display: flex; gap: 24px; margin-left: auto; font-size: var(--t-s); }
.menu a { position: relative; text-decoration: none; color: #D2D8DE; padding: 6px 0; transition: color .2s; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.menu a:hover { color: var(--branco); }
.menu a:hover::after { transform: scaleX(1); transform-origin: left; }
.btn-barra { min-height: 46px; padding: 0 20px; }
.menu-cel { display: none; }

/* ---------- topo ---------- */
.topo { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 140px var(--m) 48px; overflow: hidden; }
.topo-3d { position: absolute; right: 0; top: 90px; bottom: 110px; width: 52%; height: calc(100% - 200px);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); }
.topo-texto .apoio { max-width: min(44ch, 46vw); }
.topo-texto { position: relative; z-index: 2; width: 100%; max-width: var(--larg); margin: 0 auto; }
.topo-video { margin-top: clamp(32px, 4vw, 56px); border-radius: 28px; overflow: hidden; background: var(--grafite); border: 1px solid var(--linha); box-shadow: 0 60px 140px -50px rgba(27,199,200,.45); }
.topo-video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.selo { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 99px; background: rgba(27,199,200,.1); border: 1px solid rgba(27,199,200,.25); color: var(--teal); font-weight: 650; font-size: var(--t-s); }
.selo i { width: 8px; height: 8px; border-radius: 8px; background: var(--teal); box-shadow: 0 0 0 0 rgba(27,199,200,.6); animation: pulsa 2.4s infinite; }
@keyframes pulsa { 70% { box-shadow: 0 0 0 10px rgba(27,199,200,0); } 100% { box-shadow: 0 0 0 0 rgba(27,199,200,0); } }
.mestre { margin-top: 26px; font-size: clamp(2.75rem, 1rem + 5vw, 6.5rem); letter-spacing: -0.05em; line-height: 0.92; max-width: 11ch; }
.apoio { max-width: 44ch; margin-top: 28px; color: var(--texto2); font-size: var(--t-l); line-height: 1.45; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 38px; }
.nota { color: var(--texto2); font-size: var(--t-s); }
.topo-servicos { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; width: 100%; max-width: var(--larg); margin: 48px auto 0; padding-top: 28px; border-top: 1px solid var(--linha); }
.topo-servicos li { display: inline-flex; padding: 0 !important; }
.topo-servicos a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; color: inherit; text-decoration: none; border-radius: 99px; }
.topo-servicos li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 99px; background: rgba(255,255,255,.04); border: 1px solid var(--linha);
  font-size: var(--t-s); font-weight: 600; transition: background-color .3s, border-color .3s; }
.topo-servicos li:hover { background: rgba(27,199,200,.08); border-color: rgba(27,199,200,.4); cursor: pointer; }
.topo-servicos img { width: 22px; height: 22px; }

/* ---------- jornada ---------- */
.jornada { padding: var(--sec) var(--m) 0; }
.jornada-texto { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 48px; max-width: var(--larg); margin: 0 auto 56px; }
.jornada-texto h2 { max-width: 12ch; }
.jornada-texto p { max-width: 34ch; color: var(--texto2); font-size: var(--t-l); line-height: 1.35; }
.jornada-quadro { max-width: var(--larg); margin: 0 auto; border-radius: 32px; overflow: hidden; background: var(--grafite); border: 1px solid var(--linha);
  box-shadow: 0 80px 160px -60px rgba(27,199,200,.35); transform-origin: 50% 0; }
.jornada-video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- serviços ---------- */
.servicos { padding: var(--sec) var(--m) 0; max-width: calc(var(--larg) + 2 * var(--m)); margin: 0 auto; }
.servicos-cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 48px; margin-bottom: clamp(16px, 2vw, 32px); }
.servicos-cabeca h2 { max-width: 11ch; }
.servicos-cabeca p { max-width: 30ch; color: var(--texto2); font-size: var(--t-l); line-height: 1.35; }
.servico { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center;
  padding: clamp(48px, 6vw, 96px) 0; border-top: 1px solid var(--linha); }
.servico.inverte .servico-texto { order: 2; }
.servico-selo { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--linha);
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.servico-selo img { width: auto; height: 26px; }
.servico h3 { margin-top: 24px; font-size: clamp(2.25rem, 1.3rem + 3vw, 4.25rem); letter-spacing: -0.04em; }
.servico-texto > p:not(.servico-selo) { margin-top: 20px; color: var(--texto2); max-width: 50ch; }
.pontos { display: grid; gap: 12px; margin-top: 26px; }
.pontos li { display: flex; gap: 14px; align-items: center; font-weight: 550; }
.pontos li::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 24px; background: rgba(27,199,200,.14) center / 12px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%231BC7C8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.prova { margin-top: 28px; max-width: 360px; border-radius: 16px; overflow: hidden; background: var(--branco); border: 1px solid var(--linha); }
.prova figcaption { padding: 10px 14px; background: var(--grafite2); font-size: 0.875rem; font-weight: 600; }
.saiba { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 14px 24px; border-radius: 999px; border: 1px solid var(--linha);
  font-weight: 650; text-decoration: none; transition: border-color .3s, background-color .3s; }
.saiba::after { content: "→"; transition: translate .35s var(--ease); }
.saiba:hover { border-color: var(--teal); background: rgba(27,199,200,.08); }
.saiba:hover::after { translate: 5px 0; }
.servico-midia { position: relative; aspect-ratio: 1100 / 1000; }
.servico-midia::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(27,199,200,.22), rgba(27,199,200,0)); filter: blur(10px); }
.servico-midia video { position: relative; width: 100%; height: 100%; object-fit: contain; }

/* ---------- faixa ---------- */
.faixa { padding: clamp(56px, 7vw, 110px) 0; overflow: hidden; border-block: 1px solid var(--linha); margin-top: var(--sec); }
.faixa-trilho { display: flex; gap: 0.6em; width: max-content; font-size: clamp(3rem, 1.5rem + 6vw, 8rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; }
.faixa-trilho span { display: inline-flex; align-items: center; gap: 0.6em; }
.faixa-trilho span::after { content: ""; width: 0.28em; height: 0.28em; border-radius: 1em; background: var(--teal); }
.faixa-trilho span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); }
.faixa-trilho span:nth-child(even)::after { background: var(--coral); }

/* ---------- quem somos ---------- */
.quem { padding: var(--sec) var(--m); max-width: calc(var(--larg) + 2 * var(--m)); margin: 0 auto; }
.quem-titulo { font-size: var(--t-s); letter-spacing: 0; color: var(--teal); font-weight: 650; }
.manifesto { margin-top: 24px; font-size: clamp(1.75rem, 1rem + 2.8vw, 3.75rem); font-weight: 550; line-height: 1.12; letter-spacing: -0.03em; max-width: 26ch; }
.manifesto .p { opacity: .16; transition: opacity .2s; }
.quem-grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); margin-top: clamp(56px, 7vw, 110px); }
.pilares { display: grid; gap: 10px; align-content: start; }
.pilares li { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-radius: 18px; background: var(--grafite); border: 1px solid var(--linha); font-size: 1.25rem; font-weight: 650;
  transition: translate .4s var(--ease), border-color .3s; }
.pilares li::before { content: ""; width: 10px; height: 10px; border-radius: 10px; background: var(--teal); }
.pilares li:nth-child(2)::before { background: var(--coral); }
.pilares li:nth-child(3)::before { background: var(--zap); }
.pilares li:hover { translate: 8px 0; border-color: rgba(255,255,255,.2); }
.quem-texto p { color: var(--texto2); max-width: 64ch; }
.quem-texto p + p { margin-top: 1.1em; }
.quem-texto strong { color: var(--branco); font-weight: 600; }
.lema { margin-top: 36px !important; padding: 30px 34px; border-radius: 22px; background: var(--teal); color: var(--tinta) !important; font-size: var(--t-l); font-weight: 650; line-height: 1.25; }

/* ---------- método (claro) ---------- */
.metodo { padding: var(--sec) var(--m); background: var(--claro); color: var(--tinta); border-radius: 40px 40px 0 0; }
.metodo-cabeca { max-width: var(--larg); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 48px; }
.metodo-cabeca h2 { max-width: 13ch; }
.metodo-cabeca p { max-width: 34ch; font-size: var(--t-l); line-height: 1.35; color: var(--cinza); }
.trilha { max-width: var(--larg); height: 2px; margin: clamp(48px, 6vw, 88px) auto 0; background: #DDE2E7; }
.trilha i { display: block; height: 100%; background: var(--teal); transform-origin: 0 50%; transform: scaleX(var(--t, 0)); }
.etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: var(--larg); margin: 28px auto 0; }
.etapas li { padding: 34px 32px 40px; border-radius: 26px; background: var(--branco); transition: translate .45s var(--ease); }
.etapas li:hover { translate: 0 -6px; }
.etapas .n { display: block; font-size: clamp(3.5rem, 2rem + 4vw, 6rem); font-weight: 600; line-height: .9; letter-spacing: -0.06em; color: var(--teal); }
.etapas li:nth-child(2) .n { color: var(--coral); }
.etapas li:nth-child(3) .n { color: #16A34A; }
.etapas h3 { margin-top: 26px; font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem); }
.etapas p { margin-top: 10px; color: var(--cinza); }

/* ---------- clientes (claro) ---------- */
.clientes { position: relative; padding: clamp(80px, 9vw, 130px) var(--m) clamp(56px, 6vw, 88px); background: var(--preto); overflow: hidden; }
.clientes::before { content: ""; position: absolute; left: 50%; top: 55%; width: 1200px; height: 800px; translate: -50% -50%; background: radial-gradient(closest-side, rgba(27,199,200,.18), rgba(27,199,200,0)); pointer-events: none; }
.clientes-cabeca { position: relative; max-width: var(--larg); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 48px; }
.clientes-cabeca p { max-width: 40ch; color: var(--texto2); font-size: var(--t-l); line-height: 1.35; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.faixas-clientes { position: relative; display: grid; gap: 14px; margin: clamp(32px, 4vw, 56px) calc(-1 * var(--m)) 0; }
.faixa-cli { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.trilho-cli { display: flex; align-items: center; gap: clamp(28px, 3vw, 48px); width: max-content; animation: corre 45s linear infinite; }
.faixa-cli.reversa .trilho-cli { animation-direction: reverse; animation-duration: 52s; }
.faixa-cli:hover .trilho-cli { animation-play-state: paused; }
@keyframes corre { to { transform: translateX(-33.333%); } }
.cli { display: inline-flex; align-items: center; padding: 26px 40px; border-radius: 999px; background: var(--grafite); border: 1px solid var(--linha);
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3.5rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; color: var(--branco);
  transition: border-color .3s, background-color .3s, color .3s; }
.cli:hover { border-color: var(--teal); background: rgba(27,199,200,.1); color: var(--teal); }
.faixa-cli.reversa .cli:hover { border-color: var(--coral); background: rgba(255,90,67,.1); color: var(--coral); }
.bolha { flex: none; width: 34px; height: 26px; position: relative; }
.bolha::before, .bolha::after { content: ""; position: absolute; top: 2px; width: 20px; height: 16px; border-radius: 55% 55% 55% 20%; }
.bolha::before { left: 0; background: var(--teal); }
.bolha::after { left: 12px; top: 8px; background: var(--coral); transform: scaleX(-1); }

/* ---------- cidades ---------- */
.cidades { padding: var(--sec) var(--m); }
.cidades-cabeca { max-width: var(--larg); margin: 0 auto clamp(40px, 5vw, 72px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 48px; }
.cidades-cabeca h2 { max-width: 14ch; }
.cidades-cabeca p { max-width: 36ch; color: var(--texto2); font-size: var(--t-l); line-height: 1.35; }
.grade-cidades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: var(--larg); margin: 0 auto; }
.grade-cidades figure { position: relative; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; background: var(--grafite); }
.grade-cidades img { width: 100%; height: 100%; object-fit: cover; scale: 1.08; transition: scale 1.2s var(--ease); }
.grade-cidades figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,8,10,.85), rgba(7,8,10,0) 55%); }
.grade-cidades figure:hover img { scale: 1.16; }
.grade-cidades figcaption { position: absolute; z-index: 1; left: 22px; bottom: 20px; }
.grade-cidades figcaption b { display: block; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.grade-cidades figcaption span { display: block; margin-top: 6px; font-size: var(--t-s); color: var(--texto2); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); padding: 0 var(--m) var(--sec); max-width: calc(var(--larg) + 2 * var(--m)); margin: 0 auto; }
.faq h2 { font-size: clamp(2.25rem, 1.3rem + 3vw, 4rem); max-width: 13ch; }
.perguntas details { border-bottom: 1px solid var(--linha); }
.perguntas summary { position: relative; list-style: none; cursor: pointer; padding: 28px 64px 28px 0; font-size: var(--t-l); font-weight: 600; line-height: 1.3; transition: color .3s; }
.perguntas summary:hover { color: var(--teal); }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; position: absolute; right: 8px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 44px;
  border: 1px solid var(--linha); font-size: 1.5rem; font-weight: 400; color: var(--coral); transition: rotate .45s var(--ease), background-color .3s; }
.perguntas details[open] summary::after { rotate: 45deg; background: rgba(255,90,67,.12); }
.perguntas details p { padding: 0 64px 28px 0; max-width: 62ch; color: var(--texto2); }

/* ---------- chamada ---------- */
.chamada { padding: var(--sec) var(--m); background: var(--teal); color: var(--tinta); text-align: center; border-radius: 40px; margin: 0 clamp(8px, 1.5vw, 20px); }
.chamada h2 { max-width: 17ch; margin: 0 auto; font-size: clamp(2.5rem, 1rem + 5vw, 6rem); letter-spacing: -0.05em; }
.chamada > p { max-width: 52ch; margin: 28px auto 0; font-size: var(--t-l); line-height: 1.4; }
.chamada .btn { margin-top: 40px; }
.chamada .contatos { margin-top: 26px; font-size: var(--t-s); }

/* ---------- rodapé ---------- */
.rodape { padding: 80px var(--m) 32px; overflow: hidden; }
.rodape-linha { display: grid; grid-template-columns: minmax(0, 6fr) repeat(2, minmax(0, 3fr)); gap: 40px; max-width: var(--larg); margin: 0 auto; color: var(--texto2); }
.rodape-marca p { margin-top: 16px; max-width: 34ch; }
.rodape h2 { font-size: 1rem; letter-spacing: 0; color: var(--teal); margin-bottom: 14px; }
.rodape li { padding: 4px 0; }
.rodape a { text-decoration: none; transition: color .2s; }
.rodape a:hover { color: var(--branco); }
.rodape-nome { margin-top: 64px; font-size: clamp(4rem, 1rem + 15vw, 17rem); font-weight: 600; letter-spacing: -0.07em; line-height: .8; text-align: center; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.direitos { margin-top: 24px; text-align: center; font-size: 0.875rem; color: #6E7781; }

.zap { position: fixed; right: 20px; bottom: 20px; z-index: 35; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 22px 0 14px;
  border-radius: 999px; background: var(--zap); color: #052E16; font-weight: 650; text-decoration: none; box-shadow: 0 16px 34px -14px rgba(0,0,0,.7); transition: translate .35s var(--ease); }
.zap img { width: 28px; height: 28px; filter: brightness(0) saturate(100%) invert(12%) sepia(30%) saturate(1500%) hue-rotate(110deg); }
.zap:hover { translate: 0 -3px; }

/* sem script, tudo aparece (a classe js só entra quando o script roda) */
.js .sobe { opacity: 0; transform: translateY(32px); }

/* botão principal: laranja, com WhatsApp e pulso */
.btn-cta { background: var(--coral); color: var(--tinta); gap: 12px; box-shadow: 0 0 0 0 rgba(255,90,67,.55); animation: chama 2.2s infinite; }
.btn-cta::before { display: none; }
.btn-cta img { width: 26px; height: 26px; }
.btn-cta:hover { background: var(--coral-h); scale: 1.03; }
@keyframes chama { 0% { box-shadow: 0 0 0 0 rgba(255,90,67,.55); } 70% { box-shadow: 0 0 0 18px rgba(255,90,67,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,67,0); } }
.chamada .btn-cta { color: var(--tinta); }

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
  .menu, .btn-barra, .marca .tag { display: none; }
  .menu-cel { display: block; margin-left: auto; position: relative; }
  .menu-cel summary { list-style: none; cursor: pointer; width: 46px; height: 46px; border-radius: 46px; background: rgba(255,255,255,.08); display: grid; place-content: center; gap: 6px; }
  .menu-cel summary::-webkit-details-marker { display: none; }
  .menu-cel summary span { display: block; width: 18px; height: 2px; background: var(--branco); transition: transform .3s var(--ease); }
  .menu-cel[open] summary span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-cel[open] summary span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .menu-cel nav { position: absolute; right: 0; top: 60px; width: min(320px, calc(100vw - 32px)); display: grid; gap: 2px; padding: 12px; border-radius: 22px;
    background: var(--grafite2); border: 1px solid var(--linha); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
  .menu-cel nav a { padding: 12px 14px; border-radius: 12px; text-decoration: none; }
  .menu-cel nav a:not(.btn):hover { background: rgba(255,255,255,.06); }
  .menu-cel nav .btn { margin-top: 8px; }
  .grade-cidades { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .servico { grid-template-columns: 1fr; gap: 0; }
  .servico .servico-texto { display: contents; }
  .servico-texto > * { order: 4; }
  .servico-texto > .servico-selo { order: 1; justify-self: start; }
  .servico-texto > h3 { order: 2; }
  .servico-midia { order: 3; max-width: 560px; width: 100%; margin: 24px auto 0; }
  .quem-grade, .faq { grid-template-columns: 1fr; }
  .etapas { grid-template-columns: 1fr; }
  .rodape-linha { grid-template-columns: 1fr 1fr; }
  .rodape-marca { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .barra { inset: 10px 12px auto; height: 58px; padding-left: 16px; }
  .topo { padding-top: 120px; min-height: 0; }
  .topo-texto { order: 1; }
  .topo-3d { position: relative; order: 2; inset: auto; width: 100vw; max-width: none; height: 360px; margin: 8px 0 -20px calc(-1 * var(--m)); align-self: flex-start; }
  .topo-texto .apoio { max-width: none; }
  .topo-servicos { order: 3; }
  .mestre { font-size: clamp(2.75rem, 12.5vw, 4rem); }
  .acoes .btn { width: 100%; }
  .topo-servicos { margin-top: 40px; }
  .topo-video { border-radius: 22px; margin-left: calc(-1 * var(--m) + 10px); margin-right: calc(-1 * var(--m) + 10px); }
  .topo-video video { aspect-ratio: 1080 / 1350; }
  .grade-cidades { grid-template-columns: 1fr 1fr; gap: 10px; }
  .grade-cidades figcaption { left: 14px; bottom: 14px; }
  .perguntas summary { font-size: 1.125rem; }
  .rodape-linha { grid-template-columns: 1fr; }
  .rodape { padding-bottom: 100px; }
  .zap { width: 58px; height: 58px; min-height: 0; padding: 0; justify-content: center; right: 16px; bottom: 16px; }
  .zap span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* primeiro serviço logo abaixo do título da seção */
.servicos-cabeca + .servico { padding-top: clamp(24px, 3vw, 40px); border-top: 0; }
@media (max-width: 700px) { .cli { padding: 18px 26px; font-size: 1.625rem; } }

/* serviços: o nome do serviço é o título grande; a frase vem menor embaixo */
.servico .servico-selo { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 0; border: 0; background: none; border-radius: 0;
  font-size: clamp(2.25rem, 1.3rem + 3vw, 4.25rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.servico .servico-selo img { height: 0.8em; width: auto; }
.servico h3 { margin-top: 18px; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--teal); }
@media (max-width: 700px) { .servico .servico-selo { font-size: clamp(2rem, 9vw, 2.6rem); gap: 10px; } }

/* quem somos: título grande, abertura menor */
.quem .quem-titulo { font-size: var(--t-h); color: var(--branco); letter-spacing: -0.04em; line-height: 0.98; font-weight: 600; }
.quem .manifesto { margin-top: 22px; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); line-height: 1.35; letter-spacing: -0.015em; max-width: 52ch; }

/* logo oficial */
.marca .logo { height: 44px; width: auto; display: block; }
.marca .tag { font-weight: 400; letter-spacing: 0; }
.rodape .logo-rodape { height: 64px; }
@media (max-width: 1180px) { .marca .tag { display: inline; } }
@media (max-width: 700px) { .marca .logo { height: 36px; } .marca .tag { font-size: .75rem; padding-left: 10px; max-width: 8.5em; line-height: 1.15; } }

/* cabeçalho: bolhas + CQV + tagline em itálico (como a marca) */
.marca .bolhas-img { height: 30px; width: auto; }
.marca b { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; }
.marca .tag { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: .9375rem; line-height: 1.1; color: #C9D0D7; padding-left: 12px; border-left: 1px solid var(--linha); max-width: none; }
@media (max-width: 700px) { .marca .bolhas-img { height: 24px; } .marca b { font-size: 1.125rem; } .marca .tag { font-size: .8125rem; padding-left: 10px; } }

/* clientes: logos reais surgindo */
.logos-clientes { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; max-width: 1180px; margin: clamp(36px, 4vw, 56px) auto 0; perspective: 1200px; }
.logos-clientes li { width: clamp(150px, 22vw, 260px); aspect-ratio: 26 / 17; display: grid; place-items: center; padding: 18px 22px; border-radius: 22px;
  background: var(--fundo, #fff); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 50px -24px rgba(0,0,0,.8); animation: flutua 6s ease-in-out infinite;
  transition: translate .45s var(--ease), box-shadow .45s; }
.logos-clientes li:nth-child(2n) { animation-delay: -1.5s; } .logos-clientes li:nth-child(3n) { animation-delay: -3s; }
.logos-clientes img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logos-clientes li:hover { translate: 0 -10px; box-shadow: 0 0 0 2px var(--teal), 0 30px 70px -20px rgba(27,199,200,.55); }
@keyframes flutua { 50% { transform: translateY(-6px); } }
@media (max-width: 700px) { .logos-clientes { gap: 12px; } .logos-clientes li { width: calc(50% - 6px); padding: 12px 14px; border-radius: 16px; } }

/* título do serviço: logos na mesma linha do texto (não quebram sozinhos) */
.servico .servico-selo { display: block; }
.servico .servico-selo img { display: inline-block; vertical-align: -0.08em; margin-right: 0.18em; }
@media (max-width: 700px) {
  .servico .servico-selo img { height: 0.75em; margin-right: 0.12em; }
  .topo { padding-bottom: 24px; }
  .servicos { padding-top: 48px; }
}