/* ==========================================================================
   Pocket Lab | Home v2
   Fonte da verdade: Figma "[Pocket Lab] Site v2.0", frame "home-ajustes-2"
   (fileKey ZWanATRm4JRgwLBf6jLcfo, nó 7843:677), largura de referência 1366 px.
   Valores lidos pela API do Figma (get_design_context / get_variable_defs).
   Organização por blocos que viram template-parts do tema WordPress:
   tokens, base, componentes, header, hero, cena, sobre, projetos, ai, conteudos, rodape.
   ========================================================================== */

/* ---------- 1. Tokens (variáveis do Figma) ---------- */
:root {
  /* neutros, nomes do Figma */
  --neutral-000: #F9FAFA;
  --neutral-100: #EBECED;
  --neutral-200: #BABDBE;
  --neutral-300: #A3A7A8;
  --neutral-400: #8B9092;
  --neutral-500: #777C7D;
  --neutral-600: #5E6568;
  --neutral-700: #494F51;
  --neutral-800: #363B3C;
  --neutral-900: #222526;
  --neutral-050: #E8E9EA;
  /* marca */
  --yellow: #F4B63F;
  --blue-700: #12597C;
  --blue-900: #011D26;
  /* AJUSTE PEDIDO: todos os botões azuis usam o mesmo azul escuro (blue-900).
     No Figma, "contato" e "software house" estavam em blue-700. */
  --btn-dark: var(--blue-900);
  /* AJUSTE PEDIDO: máscara do vídeo/hero/rodapé puxada para o azul escuro
     (no Figma era #222526 a 85%, cinza). */
  --veil: rgba(1, 29, 38, .85);

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-legal: "Inter", system-ui, sans-serif;

  --w-design: 1366px;
  --gutter: 40px;
  --radius-btn: 12px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--neutral-000); color: var(--neutral-800);
  font-family: var(--font); font-weight: 400; font-stretch: 100%;
  font-variation-settings: "wdth" 100; line-height: normal;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--neutral-000); color: var(--neutral-900); padding: 12px 16px; border-radius: 8px; }
.pular:focus { top: 8px; }
.is-dim { color: var(--neutral-500); }

/* Raiz de página: overflow: clip não cria contêiner de rolagem, então position: sticky continua valendo */
.page { position: relative; overflow: clip; }
main { display: block; }
main:focus { outline: none; }
section, footer { position: relative; }

/* Conteúdo ainda não validado: o interruptor html[data-publicacao="restrita"] os oculta */
html[data-publicacao="restrita"] [data-a-validar] { display: none !important; }

/* ---------- 3. Componentes ---------- */
/* Botão: rótulo + quadrado da seta */
.btn { display: inline-flex; gap: 4px; align-items: stretch; width: max-content; max-width: 100%; }
.btn__label {
  display: flex; align-items: center; justify-content: center; padding: 16px 24px;
  border-radius: var(--radius-btn); font-size: 13px; letter-spacing: .65px; text-transform: uppercase;
  white-space: nowrap; transition: filter .2s ease;
}
.btn__arrow {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 16px;
  border-radius: var(--radius-btn); color: var(--neutral-900); background: var(--yellow);
  transition: filter .2s ease, transform .2s ease;
}
.ico-arrow { width: 15px; height: 14px; display: block; flex: none; }
.btn:hover .btn__label, .btn:hover .btn__arrow { filter: brightness(1.12); }
.btn:hover .btn__arrow { transform: translateX(2px); }
.btn--escuro .btn__label, .btn--azul .btn__label { background: var(--btn-dark); color: var(--neutral-100); }
.btn--amarelo .btn__label { background: var(--yellow); color: var(--neutral-800); }
.btn--seta-amarelo .btn__arrow { background: var(--yellow); color: var(--neutral-900); }
.btn--seta-claro .btn__arrow { background: var(--neutral-100); color: var(--neutral-800); }
.btn--seta-claro-e8 .btn__arrow { background: var(--neutral-050); color: var(--neutral-900); }
.btn--azul.btn--seta-claro .btn__arrow { color: var(--blue-900); }

/* Chip "o que fazemos" */
.chip {
  display: flex; align-items: center; gap: 16px; width: max-content; padding: 8px 16px;
  border-inline: 1px solid var(--neutral-500); border-radius: 4px; color: var(--neutral-400);
}
.chip__dot { width: 8px; height: 8px; border-radius: 200px; background: var(--yellow); flex: none; }
.chip__text { font-size: 14px; letter-spacing: .7px; text-transform: uppercase; white-space: nowrap; }
.chip--claro { border-inline-color: var(--neutral-200); color: var(--neutral-700); }

/* Lista com seta (Software house / Inbound / rodapé) */
.lista li a { display: flex; align-items: center; gap: 24px; padding: 16px 0; font-size: 16px; line-height: 1.5; }
.lista li a span { flex: 1 1 0; min-width: 0; }
.lista .ico-arrow { transition: transform .2s ease; }
.lista li a:hover .ico-arrow { transform: translateX(3px); }

/* ---------- 4. Header ---------- */
.topo {
  position: absolute; z-index: 30; top: 24px; left: 50%; transform: translateX(-50%);
  width: min(1318px, calc(100% - 48px)); display: flex; align-items: center; justify-content: space-between;
}
.logo { position: relative; display: block; width: 131.41px; height: 32px; flex: none; }
.logo img { position: absolute; max-width: none; }
.logo__icone { left: 0; top: 0; width: 20.244px; height: 32px; }
.logo__palavra { left: 28.27px; top: 3.65px; width: 67.496px; height: 22.482px; }
.logo__ponto { left: 102.19px; top: 3.69px; width: 29.215px; height: 18.723px; }
.topo__nav { display: flex; align-items: center; gap: 40px; }
.topo__nav ul { display: flex; align-items: center; gap: 40px; }
.topo__nav ul a { font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-200); white-space: nowrap; transition: color .2s; }
.topo__nav ul a:hover { color: var(--neutral-000); }
.topo__menu { display: none; }

/* ---------- 5. Hero ---------- */
.hero__media, .rod__media {
  position: absolute; inset: 0; background: var(--blue-900) url("../img/hero-poster.jpg") center / cover no-repeat;
}
.rod__media { background-image: url("../img/video-poster.jpg"); background-position: 72% 0; }

.hero__media video, .rod__media video, .sobre__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.rod__media video { object-position: 72% 0; }
.hero__media video.is-pronto, .rod__media video.is-pronto, .sobre__video video.is-pronto { opacity: 1; }
.hero__veu, .rod__veu { position: absolute; inset: 0; background: var(--veil); }

/* ---------- 6. Cenas "o que fazemos" (fundo e elementos fixados ao rolar) ---------- */
.scene { height: 2150px; }
/* O embrulho .pin é mais alto que a seção de propósito: o item "sticky" fica preso até a
   próxima seção (que vem depois no DOM e é opaca) cobri-lo, como no protótipo. */
.pin { position: absolute; left: 0; top: var(--pin-top, 0); width: 100%; height: 3700px; pointer-events: none; }
.pin > * { position: sticky; top: 0; pointer-events: auto; }
.scene__inner { position: relative; max-width: var(--w-design); height: 100%; margin-inline: auto; }
.scene__bg { height: 2150px; background-size: 100% 100%; background-position: top center; overflow: hidden; }
/* luz ambiente: aurora lenta que dá fluidez ao fundo sem competir com o conteúdo */
.scene__bg::before, .scene__bg::after { content: ""; position: absolute; inset: -20%; pointer-events: none; will-change: transform; }
.scene--a .scene__bg::before { background: radial-gradient(40% 30% at 30% 28%, rgba(18, 112, 140, .28), transparent 70%); animation: aurora 26s ease-in-out infinite alternate; }
.scene--a .scene__bg::after { background: radial-gradient(35% 28% at 72% 62%, rgba(237, 192, 109, .07), transparent 70%); animation: aurora 34s ease-in-out infinite alternate-reverse; }
.scene--b .scene__bg::before { background: radial-gradient(42% 30% at 35% 30%, rgba(255, 232, 170, .38), transparent 70%); animation: aurora 24s ease-in-out infinite alternate; }
.scene--b .scene__bg::after { background: radial-gradient(38% 28% at 70% 64%, rgba(214, 150, 40, .18), transparent 70%); animation: aurora 32s ease-in-out infinite alternate-reverse; }
@keyframes aurora { from { transform: translate3d(-4%, -2%, 0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.12); } }
.scene--a .scene__bg { background-image: url("../img/bg-scene-a.webp"); background-color: #011026; }
.scene--b .scene__bg { background-image: url("../img/bg-scene-b.webp"); background-color: var(--yellow); }

.pin--mock-a { --pin-top: 76px; left: 258px; width: 846px; }
.mock { position: relative; overflow: hidden; }
.mock--a { height: 810px; }
.mock--a .shot--comp img { position: absolute; max-width: none; height: 89.38%; left: -20.57%; top: 4.44%; width: 128.37%; }
.pin--mock-b { --pin-top: 23px; left: 215px; width: 843px; }
.mock--b { height: 888px; }
.mock--b .shot--comp img { width: 100%; height: 100%; object-fit: fill; } /* como no Figma: a imagem preenche o quadro 843x888 */
.pin--left { left: 40px; width: 413px; }
.titulo-cena__linhas span { display: block; }
.scene--a .titulo-cena__linhas span:first-child { width: 401px; }
.titulo-cena { display: flex; flex-direction: column; gap: 80px; padding-block: 168px; }
.titulo-cena__linhas { display: flex; flex-direction: column; gap: 24px; font-size: 56px; letter-spacing: 2.8px; text-transform: uppercase; }

.scene__lista { position: absolute; right: 40px; width: 413px; display: flex; flex-direction: column; gap: 64px; }
.scene__grupo { padding-right: 24px; }
.scene__grupo h2 { font-weight: 500; font-size: 30px; line-height: 1.2; margin-bottom: 24px; }
.scene__stats { position: absolute; right: 40px; width: 375.54px; display: flex; flex-direction: column; gap: 80px; }
.stat-card { align-self: flex-start; padding: 24px 40px; border-left: 1px solid; border-radius: 16px; white-space: nowrap; }
.stat-card__n { font-weight: 600; font-size: 48px; line-height: 1.2; }
.stat-card__l { font-size: 18px; line-height: 1.5; }
.clientes { display: flex; flex-direction: column; gap: 24px; }
.clientes__rotulo { font-size: 11px; letter-spacing: .55px; text-transform: uppercase; }
.clientes__logos { display: flex; align-items: center; gap: 44.189px; }
.clientes__logos li { position: relative; flex: none; }
.clientes__logos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clientes__logo--winsales { width: 125.222px; height: 21.684px; opacity: .6; }
.clientes__logo--lattine { width: 105.869px; height: 25px; opacity: .7; }
.clientes__logo--honda { width: 56.067px; height: 45px; opacity: .7; }

/* Cena A (escura) */
.scene--a { color: var(--neutral-100); }
.scene--a .chip { border-inline-color: var(--neutral-500); color: var(--neutral-400); }
.scene--a .titulo-cena__linhas { color: var(--neutral-300); }
.scene--a .titulo-cena__linhas .is-dim { opacity: .2; color: inherit; }
.scene--a .scene__lista { top: 313px; }
.scene--a .scene__grupo h2 { color: var(--neutral-100); }
.scene--a .lista li a { color: var(--neutral-100); }
.scene--a .lista li a span { opacity: .8; }
.scene--a .lista li { border-bottom: 1px solid var(--neutral-800); }
.scene--a .lista .ico-arrow { color: var(--neutral-300); }
.scene--a .scene__stats { top: 1116px; }
.scene--a .stat-card { border-left-color: var(--neutral-800); }
.scene--a .stat-card__n { color: var(--yellow); }
.scene--a .stat-card__l { color: var(--neutral-300); opacity: .8; }
.scene--a .clientes__rotulo { color: var(--neutral-400); }

/* Cena B (âmbar) */
.scene--b { color: var(--neutral-800); }
.scene--b .chip { border-inline-color: rgba(54, 59, 60, .2); color: var(--neutral-700); }
.scene--b .chip__dot { background: var(--neutral-000); }
.scene--b .titulo-cena__linhas { color: var(--neutral-800); }
.scene--b .titulo-cena__linhas .is-dim { opacity: .15; color: inherit; }
.scene--b .scene__lista { top: 378px; }
.scene--b .scene__grupo h2 { color: var(--neutral-900); }
.scene--b .lista li a { color: var(--neutral-700); }
.scene--b .lista li { border-bottom: 1px solid rgba(54, 59, 60, .1); }
.scene--b .lista .ico-arrow { color: var(--neutral-800); }
.scene--b .scene__stats { top: 1177px; }
.scene--b .stat-card { border-left-color: rgba(54, 59, 60, .15); }
.scene--b .stat-card__n { color: var(--neutral-900); }
.scene--b .stat-card__l { color: var(--neutral-600); }
.scene--b .clientes__rotulo { color: var(--neutral-600); }

/* ---------- 7. Sobre ---------- */
/* Sobre: mídia em cinza bem claro (decisão pós-Figma); sem máscara escura */

/* Marquee de logos */
.mq { position: absolute; left: 0; top: 946px; width: 100%; height: 88px; overflow: hidden; }
.mq__trilho { display: flex; align-items: center; gap: 136px; padding-right: 136px; width: max-content; height: 100%; animation: mq 300s linear infinite; }
.mq:hover .mq__trilho, .mq:focus-within .mq__trilho, .mq.is-pausado .mq__trilho { animation-play-state: paused; }
.mq__item { position: relative; flex: none; }
.mq__item::after { content: ""; position: absolute; right: -68px; top: 50%; height: 88px; width: 1px; transform: translateY(-50%); background: rgba(34, 37, 38, .09); }
.mq__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mq--n img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .62; }
.mq--n { transition: opacity .3s; }
.mq--w { width: 182.368px; height: 31.579px; opacity: .6; }
.mq--l { width: 150.789px; height: 35.607px; opacity: .7; }
.mq--m { width: 112.895px; height: 34.78px; }
.mq--j { width: 106.579px; height: 27.581px; opacity: .7; }
.mq--h { width: 71.053px; height: 57.027px; opacity: .7; }
@keyframes mq { to { transform: translateX(-50%); } }
.mq__pausa { position: absolute; z-index: 2; right: 40px; top: 4px; padding: 8px 12px; border: 1px solid var(--neutral-200); border-radius: 8px; background: var(--neutral-000); color: var(--neutral-700); font-size: 12px; cursor: pointer; opacity: 0; pointer-events: none; }
.mq__pausa:focus-visible { opacity: 1; pointer-events: auto; }

/* ---------- 8. Projetos ---------- */
.proj { height: 1080px; }
.proj__bg { height: 1080px; background: var(--neutral-100); }
.proj__inner { position: relative; max-width: var(--w-design); height: 100%; margin-inline: auto; }
.proj .pin--left { width: 522px; }
.proj__esq { display: flex; flex-direction: column; gap: 56px; padding-block: 120px; }
.proj__cab { display: flex; flex-direction: column; gap: 48px; }
.proj h2 { font-size: 56px; line-height: 1; }
.proj__pie { display: flex; flex-direction: column; gap: 56px; width: 413px; }
.proj__pie p { font-size: 16px; line-height: 1.5; opacity: .8; color: var(--neutral-800); }
.proj__cards { position: absolute; left: 586px; top: 199px; display: flex; gap: 24px; align-items: flex-start; }
.proj__col { display: flex; flex-direction: column; gap: 24px; width: 358px; }
.case { position: relative; width: 358px; height: 374px; }
.case--c { height: 350px; }
.case__forma { position: absolute; left: -10px; top: -10px; width: 378px; max-width: none; height: 394px; }
.case--c .case__forma { height: 370px; }
.case__corpo { position: relative; display: flex; flex-direction: column; gap: 40px; padding: 40px; }
.case__logo { height: 48px; width: 102px; object-fit: fill; } /* Figma: logo preenche o quadro */
.case--a .case__logo { opacity: .7; }
.case--c .case__logo { width: 116px; opacity: .6; }
.case--b .case__logo { width: 60px; opacity: .8; object-fit: cover; }
.case__texto { display: flex; flex-direction: column; gap: 16px; }
.case__texto h3 { font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--neutral-800); }
.case__texto p { font-size: 16px; line-height: 1.5; opacity: .8; color: var(--neutral-700); }
.case__ver, .post__link { position: absolute; left: 40px; bottom: 0; height: 46px; display: flex; align-items: center; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-700); }
.case__seta, .post__seta { position: absolute; right: 0; bottom: 0; width: 46px; height: 46px; padding: 16px; }
.case__ver:hover, .post__link:hover { color: var(--neutral-900); }

/* ---------- 9. AI First: capítulos ancorados na rolagem ---------- */
.ai { position: relative; background: var(--blue-900); color: var(--neutral-100); }
.ai__stage { position: relative; display: grid; grid-template-columns: minmax(380px, 500px) 1fr; gap: 56px; padding: 112px max(40px, calc((100% - 1286px) / 2)) 56px; overflow: hidden; }
.ai__stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 78% 18%, rgba(11, 102, 120, .38), transparent 70%), radial-gradient(40% 50% at 8% 100%, rgba(244, 182, 63, .10), transparent 70%), linear-gradient(rgba(249, 250, 250, .035) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, rgba(249, 250, 250, .035) 1px, transparent 1px) 0 0 / 64px 64px; -webkit-mask-image: linear-gradient(#000 60%, rgba(0,0,0,.55)); mask-image: linear-gradient(#000 60%, rgba(0,0,0,.55)); }
.ai__stage > * { position: relative; }
.ai__esq { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.ai__topo { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.ai h2 { display: flex; flex-direction: column; font-weight: 300; font-size: clamp(34px, 3.5vw, 50px); line-height: 1.05; color: var(--neutral-000); }
.ai h2 .is-dim { color: var(--neutral-400); }
.ai__lead { max-width: 360px; font-size: 16px; line-height: 1.5; color: var(--neutral-300); }
.ai__trilho { display: none; }
.ai__dir { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ai__paineis { position: relative; display: grid; gap: 20px; flex: 1; min-height: 0; }
.ai__rodape { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--neutral-400); }
.ai__ponto { width: 8px; height: 8px; border-radius: 8px; background: var(--yellow); flex: none; }

.cap { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 32px 36px 36px; border-radius: 24px; background: linear-gradient(160deg, rgba(249, 250, 250, .075), rgba(249, 250, 250, .025)); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .10), 0 40px 80px -50px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); --q: 1; --e: 1; }
.cap__cab { display: flex; align-items: center; gap: 14px; }
.cap__n { font-size: 13px; letter-spacing: .65px; color: var(--yellow); }
.cap__cab h3 { font-weight: 400; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-300); }
.cap__big { font-weight: 600; font-size: clamp(88px, 16vh, 168px); line-height: .9; letter-spacing: -.02em; color: var(--neutral-000); font-variant-numeric: tabular-nums; }
.cap__big--palavra { color: var(--yellow); }
.cap__txt { margin-top: 14px; max-width: 360px; font-size: 18px; line-height: 1.3; color: var(--neutral-200); }
.cap__barras { display: flex; flex-direction: column; gap: 12px; }
.barra { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 16px; }
.barra em { font-style: normal; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-400); }
.barra i { display: flex; align-items: center; justify-content: flex-end; height: 44px; padding-inline: 16px; border-radius: 10px; font-style: normal; }
.barra b { font-weight: 600; font-size: 14px; white-space: nowrap; }
.barra__antes { background: rgba(249, 250, 250, .13); color: var(--neutral-300); }
.barra__agora { width: max(92px, calc(100% * (1 - .94 * var(--e)))); background: var(--yellow); color: var(--neutral-900); }
.cap__etapas { display: flex; gap: 8px; }
.cap__etapas li { padding: 8px 16px; border: 1px solid rgba(249, 250, 250, .22); border-radius: 80px; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-200); }
.cap__etapas li:nth-child(1) { opacity: clamp(.25, calc(.25 + var(--e) * 2.25), 1); }
.cap__etapas li:nth-child(2) { opacity: clamp(.25, calc(.25 + (var(--e) - .3) * 2.25), 1); }
.cap__etapas li:nth-child(3) { opacity: clamp(.25, calc(.25 + (var(--e) - .6) * 2.25), 1); }
.cap__cal { display: grid; grid-template-columns: repeat(15, 1fr); gap: 6px; }
.cap__cal i { aspect-ratio: 1; max-height: 34px; width: 100%; border-radius: 6px; background: var(--yellow); }
.cap__rot { display: flex; justify-content: space-between; margin-top: -12px; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-400); }
.cap__pulso { display: flex; flex-direction: column; gap: 16px; }
.cap__pulso svg { display: block; width: 100%; height: 150px; overflow: visible; }
.cap__pulso path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pulso__base { stroke: rgba(249, 250, 250, .16); stroke-width: 2; }
.pulso__linha { stroke: var(--yellow); stroke-width: 2.5; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - 100 * var(--e)); filter: drop-shadow(0 0 8px rgba(244, 182, 63, .55)); }
.cap__pulso { position: relative; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; row-gap: 18px; }
.cap__pulso svg { grid-column: 1 / -1; }
.pulso__ev { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-200); }
.pulso__ev i { width: 10px; height: 10px; border-radius: 10px; background: var(--yellow); box-shadow: 0 0 0 4px rgba(244, 182, 63, .2); }
.pulso__ev--1 { opacity: clamp(.25, calc(.25 + (var(--e) - .38) * 8), 1); }
.pulso__ev--2 { opacity: clamp(.25, calc(.25 + (var(--e) - .52) * 8), 1); }
.pulso__ev--3 { opacity: clamp(.25, calc(.25 + (var(--e) - .86) * 8), 1); }

/* modo animado (só desktop, sem movimento reduzido) */
.ai.is-anim { height: calc(100vh + var(--n, 3) * 90vh); }
.ai.is-anim .ai__stage { position: sticky; top: 0; height: 100vh; min-height: 640px; }
.ai.is-anim .ai__paineis { display: block; }
.ai.is-anim .cap { position: absolute; inset: 0; opacity: 0; translate: 0 28px; pointer-events: none; transition: opacity .55s ease, translate .7s cubic-bezier(.2, .7, .2, 1); }
.ai.is-anim .cap.is-ativo { opacity: 1; translate: 0 0; pointer-events: auto; }
.ai.is-anim .cap__cal i { background: rgba(249, 250, 250, .09); transition: background-color .25s ease; }
.ai.is-anim .cap__cal i.on { background: var(--yellow); }
.ai.is-anim .ai__trilho { display: flex; flex-direction: column; }
.ai__trilho li { position: relative; border-top: 1px solid rgba(249, 250, 250, .14); }
.ai__trilho li::before { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: calc(var(--fill, 0) * 100%); background: var(--yellow); }
.ai__trilho button { display: flex; align-items: baseline; gap: 18px; width: 100%; padding: 16px 0; border: 0; background: none; font: inherit; text-align: left; color: var(--neutral-500); cursor: pointer; transition: color .3s ease; }
.ai__trilho button b { font-weight: 400; font-size: 13px; letter-spacing: .65px; }
.ai__trilho button span { font-size: 22px; line-height: 1.1; }
.ai__trilho li.is-ativo button, .ai__trilho button:hover { color: var(--neutral-000); }
.ai__trilho li.is-ativo b { color: var(--yellow); }

@media (max-width: 1100px) {
  .ai__stage { grid-template-columns: 1fr; gap: 40px; padding: 72px 24px; }
  .cap { padding: 28px 24px; }
  .cap__big { font-size: clamp(72px, 20vw, 120px); }
  .cap__cal { grid-template-columns: repeat(9, 1fr); }
  .pulso__ev { font-size: 12px; }
}
@media (max-width: 700px) {
  .cap__pulso { grid-template-columns: 1fr; }
  .barra { grid-template-columns: 1fr; gap: 6px; }
  .cap__etapas { flex-wrap: wrap; }
}

/* ---------- 10. Conteúdos ---------- */
.cont { height: 1214px; background: var(--neutral-100); }
.cont__inner { position: relative; max-width: var(--w-design); height: 100%; margin-inline: auto; }
.cont__inner > .chip { position: absolute; left: 40px; top: 160px; }
.cont__titulo { position: absolute; left: 40px; top: 239px; width: 631px; font-size: 72px; line-height: 1; }
.cont__lateral { position: absolute; left: 913px; top: 409px; width: 413px; display: flex; flex-direction: column; gap: 24px; }
.cont__lateral p { font-size: 16px; line-height: 1.5; opacity: .8; color: var(--neutral-800); }
.filtros { position: absolute; left: 40px; top: 647px; display: flex; gap: 8px; }
.filtro { display: flex; align-items: center; padding: 8px 16px; border: 1px solid var(--neutral-300); border-radius: 80px; background: none; font: inherit; font-size: 13px; letter-spacing: .65px; color: var(--neutral-500); cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.filtro:hover { border-color: var(--neutral-700); color: var(--neutral-700); }
.filtro.is-ativo { border-color: var(--neutral-900); background: var(--neutral-900); color: var(--neutral-000); }
.cont__nav { position: absolute; right: 40px; top: 639px; display: flex; align-items: center; gap: 10px; }
.cont__nav[hidden], .cont__prog[hidden], .cont__vazio[hidden], .post[hidden] { display: none; }
.cont__conta { margin-right: 10px; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-600); font-variant-numeric: tabular-nums; }
.cont__seta { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--neutral-300); border-radius: 50%; background: none; color: var(--neutral-800); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, opacity .25s; }
.cont__seta--ant .ico-arrow { transform: scaleX(-1); }
.cont__seta:hover:not([aria-disabled="true"]) { background: var(--neutral-900); border-color: var(--neutral-900); color: var(--neutral-000); }
.cont__seta[aria-disabled="true"] { opacity: .35; cursor: default; }
.posts { position: absolute; left: 30px; top: 680px; width: calc(100% - 60px); padding: 24px 10px 44px; display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 10px; scrollbar-width: none; }
.posts::-webkit-scrollbar { display: none; }
.posts.is-arrasto { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.posts.is-arrasto a { pointer-events: none; }
.post { flex: 0 0 calc((100% - 72px) / 4); min-width: 280px; scroll-snap-align: start; }
.post.is-novo { animation: postIn .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k, 0) * 70ms); }
@keyframes postIn { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.cont__vazio { position: absolute; left: 40px; top: 730px; max-width: 420px; font-size: 18px; line-height: 1.4; color: var(--neutral-600); }
.cont__prog { position: absolute; left: 40px; top: 1130px; width: calc(100% - 80px); height: 2px; background: rgba(34, 37, 38, .12); border-radius: 2px; overflow: hidden; }
.cont__prog i { display: block; height: 100%; width: var(--larg, 25%); translate: var(--pos, 0) 0; background: var(--neutral-900); border-radius: 2px; transition: translate .25s ease-out; }
.post { position: relative; height: 350px; }
.post__forma { position: absolute; left: -10px; top: -10px; width: calc(100% + 20px); max-width: none; height: 370px; }
.post__img { position: absolute; left: 8px; top: 8px; right: 8px; height: 243px; border-radius: 14px; overflow: hidden; }
.post__img img { width: 100%; height: 100%; object-fit: cover; }
.post__veu { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(1,29,38,.5) 7%, rgba(1,29,38,0) 43.8%, rgba(1,29,38,.7) 81.1%); }
.post__tag { position: absolute; left: 24px; top: 24px; padding: 6px 12px; border-inline: 1px solid var(--neutral-200); border-radius: 4px; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-200); }
.post__titulo { position: absolute; left: 24px; top: 189px; width: 240px; font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--neutral-000); }
.post__meta { position: absolute; left: 24px; top: 267px; display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--neutral-500); }
.post__meta span { opacity: .8; }
.post__linha { position: absolute; left: 24px; top: 295px; width: 200px; margin: 0; border: 0; border-top: 1px solid var(--neutral-200); }
.post__link { left: 24px; height: 55px; bottom: 0; }

/* ---------- 11. Rodapé ---------- */
.rod { height: 1008px; background: var(--blue-900); overflow: hidden; color: var(--neutral-100); }
.rod__inner { position: relative; max-width: var(--w-design); height: 100%; margin-inline: auto; }
.rod__col { position: absolute; top: 80px; display: flex; flex-direction: column; gap: 24px; }
.rod__col--sh { left: 40px; width: 304px; }
.rod__col--ib { left: 477px; width: 304px; }
.rod__col--news { right: 40px; width: 304px; }
.rod__tit { display: flex; align-items: center; gap: 12px; font-size: 14px; letter-spacing: .7px; text-transform: uppercase; color: var(--neutral-300); }
.rod__dot { width: 6px; height: 6px; border-radius: 200px; background: var(--yellow); flex: none; }
.lista--rodape li { border-bottom: 1px solid rgba(235, 236, 237, .1); }
.lista--rodape li a { line-height: 1.2; color: var(--neutral-100); }
.lista--rodape li a span { opacity: .8; }
.rod__nav { position: absolute; left: 40px; top: 619px; display: flex; align-items: center; gap: 56px; }
.rod__nav > a:not(.btn) { font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-200); }
.rod__nav > a:not(.btn):hover { color: var(--neutral-000); }
.rod .btn--escuro .btn__label, .hero .btn--escuro .btn__label, .topo .btn--escuro .btn__label { box-shadow: inset 0 0 0 1px rgba(235, 236, 237, .16); }
.rod__frase { position: absolute; left: 913px; top: 557px; width: 413px; padding: 24px 40px; border-inline: 1px solid var(--neutral-500); border-radius: 16px; font-size: 18px; color: var(--neutral-200); }
.rod__logotipo { position: absolute; left: 40px; top: 689px; width: calc(100% - 80px); height: 281px; pointer-events: none; opacity: .16; filter: saturate(0) brightness(.9); mix-blend-mode: screen; }
.rod__logo-a { position: absolute; left: 0; top: 0; width: 841.617px; height: 280.33px; max-width: none; }
.rod__logo-b { position: absolute; left: 921.617px; top: .5px; width: 364.282px; height: 233.444px; max-width: none; }
.rod__legal { position: absolute; left: 50%; top: 967px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-family: var(--font-legal); font-size: 14px; color: var(--neutral-400); white-space: nowrap; }
.rod__legal i { width: 2px; height: 2px; border-radius: 50%; background: var(--neutral-400); flex: none; }
.rod__legal a { text-decoration: underline; text-underline-position: from-font; }

/* Newsletter */
.news { display: flex; flex-direction: column; align-items: flex-end; gap: 32px; width: 100%; }
.news__campos { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label { font-weight: 500; font-size: 12px; line-height: 16px; text-box: trim-both cap alphabetic; letter-spacing: .36px; color: #B6BDC1; transition: color .2s; }
.campo input { height: 42px; padding: 8px 12px; border: 1px solid transparent; border-radius: 4px; background: var(--neutral-100); font-size: 12px; letter-spacing: .36px; color: var(--neutral-800); }
.campo input::placeholder { color: var(--neutral-500); opacity: 1; }
.campo:focus-within label { color: var(--yellow); }
.campo input:focus { outline: none; border-color: var(--yellow); }
.aceite { display: flex; align-items: flex-start; gap: 12px; }
.aceite input { appearance: none; flex: none; width: 12px; height: 12px; margin: 2px 0 0; border: 0; border-radius: 0; background: var(--neutral-100); cursor: pointer; }
.aceite input:checked { background: var(--yellow) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2l2.4 2.3L9.5 3.6' fill='none' stroke='%23222526' stroke-width='1.6'/></svg>") center / 100% no-repeat; }
.aceite label { text-box: trim-both cap alphabetic; font-size: 12px; line-height: 16px; letter-spacing: .36px; color: var(--neutral-300); }
.aceite label a { text-decoration: underline; text-underline-position: from-font; }
.news__msg { width: 100%; font-size: 12px; line-height: 16px; color: var(--neutral-200); }
.news button { border: 0; padding: 0; background: none; cursor: pointer; }

/* ---------- 12. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mq__trilho { animation: none; }
  .mq { overflow-x: auto; }
  .btn__label, .btn__arrow, .lista .ico-arrow { transition: none; }
}

/* Sem text-box-trim (navegadores antigos): aproxima a altura aparada do Figma */
@supports not (text-box: trim-both cap alphabetic) {
  .campo label { line-height: 8px; }
  .aceite label { margin-top: 1px; }
}

/* ==========================================================================
   13. Responsivo
   A referência do Figma é 1366 px. Até 1100 px o layout absoluto vira fluxo
   normal (sem elementos fixados) e o header ganha menu.
   ========================================================================== */
@media (max-width: 1100px) {
  :root { --gutter: 24px; }

  /* Header */
  .topo { top: 16px; width: calc(100% - 48px); }
  .topo__menu { position: relative; z-index: 41; display: block; width: 44px; height: 44px; border: 1px solid rgba(235,236,237,.3); border-radius: 12px; background: rgba(1,29,38,.6); cursor: pointer; }
  .topo__menu-barras, .topo__menu-barras::before, .topo__menu-barras::after { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--neutral-100); content: ""; transition: transform .2s, opacity .2s; }
  .topo__menu-barras { top: 21px; }
  .topo__menu-barras::before { left: 0; right: 0; top: -6px; }
  .topo__menu-barras::after { left: 0; right: 0; top: 6px; }
  .topo__menu[aria-expanded="true"] .topo__menu-barras { background: transparent; }
  .topo__menu[aria-expanded="true"] .topo__menu-barras::before { transform: translateY(6px) rotate(45deg); }
  .topo__menu[aria-expanded="true"] .topo__menu-barras::after { transform: translateY(-6px) rotate(-45deg); }
  .topo__nav { position: fixed; inset: 0; z-index: 40; flex-direction: column; align-items: flex-start; justify-content: center; gap: 32px; padding: 96px 24px 24px; background: var(--blue-900); visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
  .topo__nav ul { flex-direction: column; align-items: flex-start; gap: 20px; }
  .topo__nav ul a { font-size: 20px; }
  .menu-aberto .topo__nav { visibility: visible; opacity: 1; }
  .menu-aberto { overflow: hidden; }

  /* Hero */
  .hero__l { display: block; }

  /* Cenas */
  .scene, .proj { height: auto; }
  .pin { position: static; height: auto; width: auto; pointer-events: auto; }
  .pin > * { position: static; }
  .scene .pin--bg, .proj .pin--bg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .scene__bg, .proj__bg { height: 100%; }
  .scene__inner, .proj__inner, .sobre__inner, .cont__inner, .rod__inner { height: auto; }
  .scene__inner { display: flex; flex-direction: column; gap: 40px; padding: 72px 24px; }
  .scene .pin--left { order: 1; width: auto; }
  .scene .pin--mock-a, .scene .pin--mock-b { order: 2; width: auto; }
  .scene__lista { order: 3; }
  .scene__stats { order: 4; }
  .titulo-cena { padding-block: 0; gap: 32px; }
  .titulo-cena__linhas { font-size: clamp(32px, 7vw, 56px); gap: 12px; }
  .scene--a .titulo-cena__linhas span:first-child { width: auto; }
  .mock--a, .mock--b { height: auto; }
  .mock--a .shot--comp img { position: static; width: 100%; height: auto; max-width: 100%; }
  .mock--b .shot--comp img { width: 100%; max-width: 640px; height: auto; margin-inline: auto; }
  .scene__lista, .scene__stats { position: static; width: 100%; max-width: 520px; }
  .scene__stats { gap: 40px; }

  /* Sobre */
  .mq { position: relative; top: auto; margin-top: 64px; margin-bottom: 72px; }
  .mq__pausa { right: 24px; }

  /* Projetos */
  .proj__inner { display: flex; flex-direction: column; gap: 48px; padding: 72px 24px; }
  .proj .pin--left { width: auto; }
  .proj__esq { padding-block: 0; gap: 40px; }
  .proj h2 { font-size: clamp(36px, 7vw, 56px); }
  .proj__pie { width: auto; max-width: 413px; }
  .proj__cards { position: static; flex-wrap: wrap; gap: 24px; }

  /* AI First */

  /* Conteúdos */
  .cont { height: auto; }
  .cont__inner { display: flex; flex-direction: column; gap: 32px; padding: 72px 24px; }
  .cont__inner > .chip, .cont__titulo, .cont__lateral, .filtros, .posts { position: static; width: auto; }
  .cont__titulo { font-size: clamp(38px, 8vw, 72px); }
  .filtros { flex-wrap: wrap; }
  .cont__nav { position: static; justify-content: flex-end; }
  .posts { position: static; width: auto; margin: 0 -24px; padding: 24px 24px 44px; scroll-padding-inline: 24px; }
  .post { flex-basis: 304px; min-width: 0; }
  .cont__vazio { position: static; }
  .cont__prog { position: static; width: auto; }

  /* Rodapé */
  .rod { height: auto; }
  .rod__inner { display: flex; flex-direction: column; gap: 48px; padding: 72px 24px 24px; }
  .rod__col, .rod__nav, .rod__frase, .rod__logotipo, .rod__legal { position: static; width: auto; transform: none; }
  .rod__col--news { max-width: 360px; }
  .rod__nav { flex-wrap: wrap; gap: 24px 32px; }
  .rod__frase { max-width: 413px; }
  .rod__logotipo { height: auto; aspect-ratio: 1286 / 281; position: relative; top: auto; left: auto; width: 100%; }
  .rod__logo-a { width: 65.45%; height: auto; }
  .rod__logo-b { left: 71.67%; width: 28.33%; height: auto; }
  .rod__legal { flex-wrap: wrap; justify-content: center; white-space: normal; row-gap: 4px; }
}

@media (max-width: 700px) {
  .post { flex-basis: min(304px, 80vw); }
  .proj__col, .case { width: 100%; max-width: 358px; }
  .case__forma { width: calc(100% + 20px); }
  .stat-card { white-space: normal; }
  .clientes__logos { flex-wrap: wrap; gap: 20px 32px; }
  .btn__label { white-space: normal; text-align: center; }
  .hero__ctas .btn { flex-wrap: nowrap; }
}

/* ---------- 14. Camada de movimento (ativada por fx.js; sem JS tudo aparece normalmente) ---------- */
html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@view-transition { navigation: auto; }

/* barra de progresso de leitura */
.progresso { position: fixed; z-index: 60; left: 0; top: 0; width: 100%; height: 3px; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--yellow), #fff3d0); pointer-events: none; }

/* header: fixo, vidro escuro ao rolar, some ao descer e volta ao subir */
.topo { position: fixed; padding: 0; border-radius: 18px; transition: translate .5s cubic-bezier(.2,.7,.2,1), padding .4s ease, background-color .4s ease, box-shadow .4s ease, backdrop-filter .4s ease; }
.topo.is-solido { padding: 10px 14px 10px 22px; top: 12px; background: rgba(58, 63, 65, .5); -webkit-backdrop-filter: blur(24px) saturate(1.05); backdrop-filter: blur(24px) saturate(1.05); box-shadow: 0 12px 40px -22px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(249, 250, 250, .09); }
.logo__escuro { opacity: 0; transition: opacity .35s ease; }
.logo__icone:not(.logo__escuro), .logo__palavra:not(.logo__escuro) { transition: opacity .35s ease; }
.topo--claro .logo__escuro { opacity: 1; }
.topo--claro .logo__icone:not(.logo__escuro), .topo--claro .logo__palavra:not(.logo__escuro) { opacity: 0; }
.topo--claro.is-solido { background: rgba(247, 248, 248, .6); box-shadow: 0 12px 36px -24px rgba(34, 37, 38, .35), inset 0 0 0 1px rgba(34, 37, 38, .07); }
@media (min-width: 1101px) {
  .topo--claro .topo__nav ul a { color: var(--neutral-600); }
  .topo--claro .topo__nav ul a:hover, .topo--claro .topo__nav ul a[aria-current="true"] { color: var(--neutral-900); }
}
@media (max-width: 1100px) {
  html:not(.menu-aberto) .topo--claro .topo__menu { border-color: rgba(34,37,38,.18); background: rgba(247,248,248,.5); }
  html:not(.menu-aberto) .topo--claro .topo__menu-barras, html:not(.menu-aberto) .topo--claro .topo__menu-barras::before, html:not(.menu-aberto) .topo--claro .topo__menu-barras::after { background: var(--neutral-900); }
  .menu-aberto .topo--claro .logo__escuro { opacity: 0; }
  .menu-aberto .topo--claro .logo__icone:not(.logo__escuro), .menu-aberto .topo--claro .logo__palavra:not(.logo__escuro) { opacity: 1; }
}
.topo.is-oculto { translate: 0 -140%; }
.topo__nav ul a { position: relative; }
.topo__nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: var(--yellow); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.topo__nav ul a:hover::after, .topo__nav ul a[aria-current="true"]::after { transform: scaleX(1); }
.topo__nav ul a[aria-current="true"] { color: var(--neutral-000); }

/* A esquerda fica parada: na cena B, texto e mockup já nascem fixados e só aparecem abaixo da borda do fundo amarelo que sobe */
@media (min-width: 1101px) {
  .scene--b { clip-path: inset(0 -100vmax -4000px -100vmax); }
  .scene--b .pin--left, .scene--b .pin--mock-b { --pin-top: -100vh; height: calc(3700px + 100vh); }
  /* mockups também ficam parados (a regra .mock { position: relative } anulava o sticky do .pin) */
  .pin--mock-a > .mock { position: sticky; top: 76px; }
  .pin--mock-b > .mock { position: sticky; top: 23px; }
}

/* marquee com bordas esfumadas */
.mq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }

/* cards: elevação suave */
.case, .post { transition: translate .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease; }
.case:hover, .post:hover { translate: 0 -8px; box-shadow: 0 30px 60px -34px rgba(1, 29, 38, .35); }
.case__logo, .post img { transition: scale .8s cubic-bezier(.2,.7,.2,1); }
.post:hover img:not(.post__forma) { scale: 1.035; }

/* setas e botões */
.btn__label, .btn__arrow { transition: filter .25s ease, transform .35s cubic-bezier(.2,.7,.2,1), background-color .25s ease; }
.btn { translate: var(--mx, 0) var(--my, 0); transition: translate .35s cubic-bezier(.2,.7,.2,1); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* entrada do hero */
.fx .hero__l, .fx .hero__ctas, .fx .hero__texto, .fx .hero__prova, .fx .hero__col > .chip, .fx .demo { opacity: 0; translate: 0 38px; filter: blur(10px); }
.fx.is-load .hero__l, .fx.is-load .hero__ctas, .fx.is-load .hero__texto, .fx.is-load .hero__prova, .fx.is-load .hero__col > .chip, .fx.is-load .demo { opacity: 1; translate: 0 0; filter: none; transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), translate 1.1s cubic-bezier(.2,.7,.2,1), filter 1.1s ease; transition-delay: calc(var(--i, 0) * 110ms + 150ms); }
.fx .topo { opacity: 0; }
.fx.is-load .topo { opacity: 1; transition: opacity 1s ease .1s, translate .5s cubic-bezier(.2,.7,.2,1), padding .4s ease, background-color .4s ease, box-shadow .4s ease; }

/* revelar ao rolar */
.fx .fx-rev { opacity: 0; translate: 0 30px; transition: opacity .95s cubic-bezier(.2,.7,.2,1), translate .95s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.fx .fx-rev.is-in { opacity: 1; translate: 0 0; }
.fx .fx-rev.fx-clip { opacity: 1; translate: 0 50px; clip-path: inset(9% 7% 9% 7% round 28px); transition: clip-path 1.3s cubic-bezier(.2,.7,.2,1), translate 1.3s cubic-bezier(.2,.7,.2,1); }
.fx .fx-rev.fx-clip.is-in { clip-path: inset(0 round 16px); translate: 0 0; }

/* camadas com parallax (valores vêm do fx.js) */
.hero__media, .hero__titulo { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .progresso, .case:hover, .post:hover { transition: none; }
  .topo { transition: none; }
}
@media (max-width: 1100px) {
  .topo.is-solido { padding: 8px 10px 8px 14px; }
  .mq { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 700px) {
  .mq__trilho { gap: 84px; padding-right: 84px; }
  .mq__item::after { right: -42px; }
}

@media (min-resolution: 2dppx) { .mq__item::after { width: .5px; } }


/* =====================================================================
   v3: hero com demonstração, Como fazemos (AI First) no início, Sobre na estrutura da Déia
   ===================================================================== */
.ancora { position: absolute; top: 0; }

/* ---------- Hero ---------- */
.hero { min-height: 820px; background: var(--blue-900); overflow: hidden; display: flex; }
.hero__inner { position: relative; width: 100%; max-width: var(--w-design); margin-inline: auto; padding: 132px 40px 72px; display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 48px; align-items: center; }
.hero__col { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.hero__col .chip { margin-bottom: 4px; }
.hero__titulo { display: flex; flex-direction: column; align-items: flex-start; font-weight: 100; font-size: clamp(46px, 5.3vw, 76px); line-height: 1.02; color: var(--neutral-000); }
.hero__titulo em { font-style: italic; font-weight: 200; color: var(--yellow); }
.hero__l--1 { font-weight: 300; }
.hero__texto { max-width: 520px; font-size: 18px; line-height: 1.5; color: var(--neutral-200); }
.hero__ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.hero__prova { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; margin-top: 4px; border-top: 1px solid rgba(249, 250, 250, .14); width: min(520px, 100%); }
.hero__prova > p { font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-400); }
.hero__prova ul { display: flex; align-items: center; gap: 36px; }
.hero__prova li { display: flex; align-items: center; height: 40px; }
.hero__prova img { height: 32px; width: auto; max-width: 120px; object-fit: contain; opacity: .8; }
.hero__prova img.inv { height: 22px; filter: brightness(0) invert(1); opacity: .7; }
.hero__outra { font-size: 14px; color: var(--neutral-300); transition: color .2s; }
.hero__outra:hover { color: var(--yellow); }

/* demonstração: antes e hoje */
.demo { position: relative; padding: 22px 24px 24px; border-radius: 22px; background: linear-gradient(160deg, rgba(1, 29, 38, .72), rgba(1, 29, 38, .5)); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .12), 0 50px 90px -40px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: flex; flex-direction: column; gap: 16px; }
.demo__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.demo__rot { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--neutral-300); }
.demo__vivo { width: 8px; height: 8px; border-radius: 8px; background: var(--yellow); box-shadow: 0 0 0 4px rgba(244, 182, 63, .22); animation: pulsa 2.4s ease-in-out infinite; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 8px rgba(244, 182, 63, 0); } }
.demo__abas { display: flex; padding: 3px; border-radius: 80px; background: rgba(249, 250, 250, .08); }
.demo__abas button { padding: 7px 16px; border: 0; border-radius: 80px; background: none; font: inherit; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--neutral-300); cursor: pointer; transition: background-color .3s, color .3s; }
.demo__abas button[aria-selected="true"] { background: var(--yellow); color: var(--neutral-900); }
.demo__tit { font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--neutral-000); }
.demo__corpo { position: relative; display: grid; min-height: 270px; }
.demo__painel { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1); }
.demo[data-estado="hoje"] .demo__painel--antes, .demo[data-estado="antes"] .demo__painel--hoje { opacity: 0; translate: 0 10px; pointer-events: none; visibility: hidden; transition: opacity .7s ease, translate .7s ease, visibility 0s .7s; }
.demo__nota { font-size: 14px; line-height: 1.4; color: var(--neutral-300); }
.folha { border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .12); background: rgba(249, 250, 250, .04); }
.folha__abas { display: flex; gap: 2px; padding: 6px 8px 0; background: rgba(249, 250, 250, .07); font-size: 11px; color: var(--neutral-400); }
.folha__abas span { padding: 4px 10px; border-radius: 6px 6px 0 0; background: rgba(249, 250, 250, .06); }
.folha__abas span:first-child { background: rgba(249, 250, 250, .16); color: var(--neutral-100); }
.folha__grade { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; padding: 10px; }
.folha__grade i { height: 18px; border-radius: 3px; background: rgba(249, 250, 250, .1); }
.folha__grade i.vz { background: rgba(224, 82, 70, .28); box-shadow: inset 0 0 0 1px rgba(224, 82, 70, .55); }
.painel { padding: 14px 16px 12px; border-radius: 12px; background: rgba(249, 250, 250, .06); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .1); display: flex; flex-direction: column; gap: 10px; }
.painel__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.painel__kpis li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 8px; background: rgba(249, 250, 250, .06); }
.painel__kpis b { font-weight: 600; font-size: 20px; color: var(--neutral-000); font-variant-numeric: tabular-nums; }
.painel__kpis span { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--neutral-400); }
.painel svg, .rel svg { display: block; width: 100%; height: 110px; overflow: visible; }
.painel__area { fill: rgba(244, 182, 63, .13); stroke: none; }
.painel__linha, .painel__proj { fill: none; stroke: var(--yellow); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.painel__proj { stroke: var(--neutral-200); stroke-dasharray: 5 6; }
.painel__leg { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.35; color: var(--neutral-300); }
.painel__leg i { flex: none; width: 18px; border-top: 2px dashed var(--neutral-200); }
.demo__chips, .rel__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.demo__chips li { padding: 7px 14px; border: 1px solid rgba(249, 250, 250, .22); border-radius: 80px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--neutral-200); }
.demo__log { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding-top: 14px; border-top: 1px solid rgba(249, 250, 250, .12); counter-reset: l; }
.demo__log li { counter-increment: l; display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.3; color: var(--neutral-300); opacity: .35; transition: opacity .5s ease, color .5s ease; }
.demo__log li::before { content: counter(l); display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 18px; font-size: 11px; color: var(--neutral-900); background: var(--neutral-400); transition: background-color .5s; }
.demo__log li.on { opacity: 1; color: var(--neutral-100); }
.demo__log li.on::before { background: var(--yellow); }
.demo:not(.is-js) .demo__log li { opacity: 1; }

/* ---------- Como fazemos (AI First) ---------- */
.ai.is-anim { height: calc(100vh + var(--n, 4) * 85vh); }
.cap--0 { gap: 16px; }
.cap--0 .cap__big { font-size: clamp(64px, 12vh, 124px); }
.cap--0 .cap__txt { max-width: 520px; font-size: 17px; }
.cap__nota { font-size: 13px; line-height: 1.4; color: var(--neutral-400); max-width: 560px; }
.rel { position: relative; display: grid; }
.rel > * { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 8px; }
.rel__rot { font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--neutral-400); }
.folha__grade--g i { height: 20px; }
.folha__grade--g { padding: 0; grid-template-columns: repeat(12, 1fr); }
.rel__antes { opacity: clamp(0, calc(1 - var(--e) * 2.2), 1); }
.rel__hoje { opacity: clamp(0, calc((var(--e) - .3) * 2.2), 1); }
.rel__chips li { padding: 7px 14px; border: 1px solid rgba(249, 250, 250, .22); border-radius: 80px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--neutral-200); }
.rel__chips li:nth-child(1) { opacity: clamp(.25, calc(.25 + (var(--e) - .35) * 3), 1); }
.rel__chips li:nth-child(2) { opacity: clamp(.25, calc(.25 + (var(--e) - .55) * 3), 1); }
.rel__chips li:nth-child(3) { opacity: clamp(.25, calc(.25 + (var(--e) - .75) * 3), 1); }
.ai__chip { margin-bottom: 0; }

/* subtítulos em linguagem simples nas cenas */
.scene__sub { margin: -8px 0 16px; font-size: 16px; line-height: 1.5; opacity: .85; }
.scene--a .scene__sub { color: var(--neutral-300); }
.scene--b .scene__sub { color: var(--neutral-700); }

/* ---------- Sobre (estrutura sugerida pela Déia) ---------- */
.sobre { height: 1194px; background: var(--neutral-000); box-shadow: 0 -50px 90px -50px rgba(60, 40, 0, .35); }
.sobre__inner { position: relative; max-width: var(--w-design); height: 100%; margin-inline: auto; }
.sobre__chip { position: absolute; left: 40px; top: 96px; }
.sobre__midia { z-index: 1; position: absolute; left: 473px; top: 150px; width: 853px; height: 520px; border-radius: 16px; overflow: hidden; background: var(--blue-900); }
.sobre__video { position: absolute; inset: 0; background: var(--blue-900) url("../img/hero-poster.jpg") center / cover no-repeat; will-change: transform; }
.sobre__veu { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(1, 29, 38, .55), rgba(1, 29, 38, .8)); }
.sobre__h2 { position: absolute; width: 790px; font-weight: 300; font-size: 70px; line-height: 1.12; letter-spacing: -.01em; text-indent: 150px; }
.sobre__h2--base { left: 40px; top: 262px; z-index: 0; color: var(--neutral-800); }
.sobre__h2--base .is-dim { color: var(--neutral-500); }
.sobre__h2--sobre { left: -433px; top: 112px; color: var(--neutral-000); pointer-events: none; }
.sobre__h2--sobre .is-dim { color: var(--neutral-300); }
.sobre__texto { position: absolute; right: 48px; bottom: 48px; width: 340px; display: flex; flex-direction: column; gap: 24px; font-size: 16px; line-height: 1.5; color: var(--neutral-200); }
.lideres { position: absolute; left: 40px; top: 640px; width: 380px; display: flex; flex-direction: column; gap: 18px; padding-top: 24px; border-top: 1px solid var(--neutral-200); }
.lideres__rot { font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-600); }
.lideres ul { display: flex; flex-direction: column; gap: 16px; }
.lideres li { display: flex; align-items: center; gap: 16px; }
.lideres__foto { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 56px; font-size: 16px; letter-spacing: .6px; color: var(--neutral-700); background: var(--neutral-100); box-shadow: inset 0 0 0 1px var(--neutral-200); overflow: hidden; }
.lideres__foto img { width: 100%; height: 100%; object-fit: cover; }
.lideres p { display: flex; flex-direction: column; gap: 2px; }
.lideres b { font-weight: 600; font-size: 17px; color: var(--neutral-900); }
.lideres p span { font-size: 14px; color: var(--neutral-600); }

/* ---------- Responsivo v3 ---------- */
@media (max-width: 1100px) {
  .sobre__h2 { text-indent: 0; }
  .hero__inner { grid-template-columns: 1fr; padding: 112px 24px 56px; gap: 40px; }
  .hero__titulo { font-size: clamp(44px, 11vw, 84px); }
  .demo { max-width: 620px; }
  .sobre { height: auto; padding-top: 72px; }
  .sobre__inner { display: flex; flex-direction: column; gap: 32px; padding-inline: 24px; height: auto; }
  .sobre__chip, .sobre__h2, .sobre__midia, .lideres, .sobre__texto { position: static; width: auto; }
  .sobre__h2 { font-size: clamp(38px, 8vw, 72px); }
  .sobre__h2--sobre { display: none; }
  .sobre__midia { display: flex; align-items: flex-end; height: auto; min-height: 340px; padding: 32px 28px; }
  .sobre__texto { position: relative; max-width: 420px; }
  .lideres { width: auto; max-width: 420px; }
  .mq { position: relative; top: auto; margin-top: 56px; margin-bottom: 72px; }
}
@media (max-width: 700px) {
  .demo__log { grid-template-columns: 1fr; }
  .painel__kpis b { font-size: 17px; }
  .demo__corpo { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .demo__vivo { animation: none; } }
@media (max-width: 1100px) {
  .ai__stage { grid-template-columns: minmax(0, 1fr); }
  .sobre__texto { right: auto; bottom: auto; width: 100%; }
  .cap--0 .cap__big { font-size: clamp(44px, 15vw, 100px); }
  .cap__big--palavra { overflow-wrap: anywhere; }
}

/* =====================================================================
   v3.1: menu com submenus, hero com caso HPD, diagnostico, Como fazemos sem fundo extra
   ===================================================================== */

/* ---------- Menu com submenus ---------- */
.topo__nav ul.menu { gap: 30px; }
.menu__item { position: relative; display: flex; align-items: center; gap: 5px; }
.menu__seta { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; background: none; color: var(--neutral-300); cursor: pointer; transition: color .2s, transform .3s ease; }
.menu__item:hover .menu__seta, .menu__seta[aria-expanded="true"] { color: var(--yellow); }
.menu__item.is-aberto .menu__seta svg, .menu__item:hover .menu__seta svg { transform: rotate(180deg); }
.menu__seta svg { transition: transform .3s ease; }
.topo__nav ul.submenu { position: absolute; z-index: 5; top: calc(100% + 20px); left: -18px; min-width: 232px; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; border-radius: 16px; background: rgba(34, 37, 38, .84); -webkit-backdrop-filter: blur(24px) saturate(1.05); backdrop-filter: blur(24px) saturate(1.05); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(249, 250, 250, .1); opacity: 0; visibility: hidden; translate: 0 10px; transition: opacity .25s ease, translate .35s cubic-bezier(.2, .7, .2, 1), visibility 0s .35s; }
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.menu__item:hover > .submenu, .menu__item.is-aberto > .submenu, .menu__item:has(:focus-visible) > .submenu { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .25s ease, translate .35s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.topo .topo__nav .submenu a { display: block; padding: 11px 14px; border-radius: 10px; font-size: 13px; color: var(--neutral-100); transition: background-color .2s, color .2s; }
.topo .topo__nav .submenu a::after { display: none; }
.topo .topo__nav .submenu a:hover { background: rgba(249, 250, 250, .1); color: var(--neutral-000); }
.topo--claro .menu__seta { color: var(--neutral-500); }
.topo--claro .topo__nav ul.submenu { background: rgba(247, 248, 248, .9); box-shadow: 0 24px 60px -28px rgba(34, 37, 38, .45), inset 0 0 0 1px rgba(34, 37, 38, .08); }
.topo--claro .topo__nav .submenu a { color: var(--neutral-700); }
.topo--claro .topo__nav .submenu a:hover { background: rgba(34, 37, 38, .06); color: var(--neutral-900); }
@media (min-width: 1101px) and (max-width: 1240px) { .topo__nav ul.menu { gap: 20px; } .topo__nav { gap: 24px; } .topo__nav ul a { font-size: 12px; } }
@media (max-width: 1100px) {
  .topo__nav { overflow-y: auto; justify-content: flex-start; padding-top: 104px; }
  .topo__nav ul.menu { width: 100%; gap: 6px; }
  .menu__item { flex-wrap: wrap; width: 100%; padding-bottom: 6px; border-bottom: 1px solid rgba(249, 250, 250, .1); }
  .menu__link { flex: 1 1 auto; padding: 8px 0; }
  .menu__seta { width: 40px; height: 40px; }
  .topo__nav ul.submenu { position: static; flex-basis: 100%; min-width: 0; padding: 0 0 8px 12px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; visibility: visible; translate: 0 0; display: none; }
  .menu__item.is-aberto > .submenu { display: flex; }
  .menu__item:hover > .submenu { display: none; }
  .menu__item.is-aberto:hover > .submenu { display: flex; }
  .submenu::before { display: none; }
  .topo .topo__nav .submenu a { font-size: 16px; padding: 9px 0; color: var(--neutral-200); }
  .menu__item:hover .menu__seta svg { transform: none; }
  .menu__item.is-aberto .menu__seta svg { transform: rotate(180deg); }
  .topo--claro .topo__nav .submenu a, .topo--claro .menu__seta { color: var(--neutral-200); }
}

/* ---------- Hero: texto, logos e caso HPD ---------- */
.hero__prova { width: min(640px, 100%); }
.hero__prova ul { flex-wrap: wrap; gap: 14px 30px; }
.hero__prova li { height: 32px; }
.hero__prova img { height: 28px; max-width: 124px; width: auto; opacity: .85; }
.hero__prova img.p-jsl { height: 24px; }
.hero__prova img.p-mov { height: 26px; }
.hero__prova img.p-espas { height: 28px; }

.demo__tit { font-size: 21px; }
.demo__corpo { min-height: 322px; }
.mail { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 12px; background: rgba(249, 250, 250, .05); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .1); }
.mail__topo { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--neutral-400); }
.mail__topo b { font-weight: 500; letter-spacing: .6px; text-transform: uppercase; color: var(--neutral-200); }
.mail__lista { display: flex; flex-direction: column; gap: 6px; }
.mail__lista li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: rgba(249, 250, 250, .06); font-size: 13px; color: var(--neutral-200); opacity: calc(1 - var(--k) * .28); }
.mail__lista li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__lista em { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 20px; color: var(--neutral-900); background: var(--neutral-300); }
.mail__av { flex: none; width: 8px; height: 8px; border-radius: 8px; background: var(--neutral-400); }
.mail__pontos { display: grid; grid-template-columns: repeat(25, 1fr); gap: 5px; }
.mail__pontos i { aspect-ratio: 1; border-radius: 50%; background: rgba(249, 250, 250, .14); animation: envia 6s linear infinite; animation-delay: calc(var(--k) * 16ms); }
@keyframes envia { 0%, 4% { background: rgba(249, 250, 250, .14); scale: 1; } 8% { background: var(--yellow); scale: 1.5; } 16%, 82% { background: rgba(244, 182, 63, .5); scale: 1; } 100% { background: rgba(249, 250, 250, .14); } }
.hpd__barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--neutral-400); }
.hpd__barra b { font-weight: 500; font-size: 13px; letter-spacing: .5px; color: var(--neutral-100); }
.hpd__barra span { padding: 3px 10px; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .2); }
.demo .painel svg { height: 84px; }
.demo .painel { gap: 8px; padding: 12px 16px 10px; }
.demo .painel__kpis li { padding: 6px 12px; }
.demo .painel__kpis b { font-size: 18px; }
.demo .painel__kpis span { font-size: 11px; }
.hpd__ia { display: grid; min-height: 58px; }
.hpd__ia li { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 3px; padding: 9px 14px; border-radius: 10px; border-left: 2px solid var(--yellow); background: rgba(244, 182, 63, .09); opacity: 0; animation: ia 16s ease-in-out infinite; animation-delay: calc(var(--k) * 4s); }
.hpd__ia b { font-weight: 500; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--yellow); }
.hpd__ia b::before { content: "IA | "; color: var(--neutral-300); }
.hpd__ia span { font-size: 13px; line-height: 1.35; color: var(--neutral-100); }
@keyframes ia { 0% { opacity: 0; translate: 0 8px; } 4%, 22% { opacity: 1; translate: 0 0; } 26%, 100% { opacity: 0; translate: 0 -6px; } }
.demo__chips { gap: 6px; }
.demo__chips li { padding: 6px 12px; font-size: 11px; }
@media (prefers-reduced-motion: reduce) {
  .mail__pontos i { animation: none; background: rgba(244, 182, 63, .5); }
  .hpd__ia li { animation: none; }
  .hpd__ia li:first-child { opacity: 1; }
}

/* ---------- Diagnóstico por URL (chamada) ---------- */
.diag { background: var(--neutral-100); color: var(--neutral-900); }
.diag__inner { max-width: var(--w-design); margin-inline: auto; padding: 88px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: 64px; align-items: center; }
.diag__txt { display: flex; flex-direction: column; gap: 24px; }
.diag h2 { font-weight: 300; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; color: var(--neutral-900); }
.diag h2 .is-dim { display: block; }
.diag__txt p:not(.chip) { max-width: 480px; font-size: 16px; line-height: 1.5; color: var(--neutral-700); }
.diag__form { display: flex; flex-direction: column; gap: 18px; }
.diag__campo { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 22px; border-radius: 18px; background: var(--neutral-000); box-shadow: 0 30px 60px -36px rgba(1, 29, 38, .4), inset 0 0 0 1px rgba(34, 37, 38, .08); transition: box-shadow .3s ease; }
.diag__campo:focus-within { box-shadow: 0 30px 60px -30px rgba(1, 29, 38, .5), inset 0 0 0 2px var(--yellow); }
.diag__pre { font-size: 16px; color: var(--neutral-400); }
.diag__campo input { flex: 1; min-width: 0; padding: 14px 0; border: 0; outline: 0; background: none; font: inherit; font-size: 18px; color: var(--neutral-900); }
.diag__campo input::placeholder { color: var(--neutral-400); }
.diag__itens { display: flex; flex-wrap: wrap; gap: 8px; }
.diag__itens li { padding: 7px 14px; border-radius: 80px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--neutral-600); box-shadow: inset 0 0 0 1px rgba(34, 37, 38, .16); }
.diag__msg { font-size: 14px; color: var(--neutral-700); }
@media (max-width: 1100px) {
  .diag__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 64px 24px; }
}
@media (max-width: 700px) {
  .diag__campo { flex-wrap: wrap; padding: 14px; }
  .diag__pre { display: none; }
  .diag__campo input { flex-basis: 100%; padding: 6px 4px; }
  .diag__campo .btn { width: 100%; }
}

/* ---------- Como fazemos: fundo liso, sem grade nem brilhos (padrão dos outros frames) ---------- */
.ai__stage::before { content: none; }
.ai__stage { background: linear-gradient(180deg, var(--blue-900) 0%, #02222D 100%); }

/* ---------- Liderança com fotos ---------- */
.lideres__foto { width: 64px; height: 64px; border-radius: 64px; }
.lideres__foto img { filter: saturate(.9); }
.lideres__rot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lideres__rot span { letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--neutral-500); }

/* ---------- Cases ---------- */
.case--b .case__logo { width: auto; height: 48px; object-fit: contain; opacity: .85; }

/* ---------- Cenas: linha em foco acompanha a rolagem; títulos entram com um traço ---------- */
.fx .scene__lista .lista li a { opacity: calc(.5 + .5 * var(--f, 1)); transition: opacity .25s linear; }
.fx .scene__lista .lista li a span { translate: calc(var(--f, 0) * 10px) 0; }
.fx .scene__lista .lista li a .ico-arrow { translate: calc(var(--f, 0) * 6px) 0; }
.fx h2.fx-rev, .fx .cont__titulo.fx-rev { -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 100% 0 / 250% 100% no-repeat; mask: linear-gradient(90deg, #000 40%, transparent 60%) 100% 0 / 250% 100% no-repeat; }
.fx h2.fx-rev.is-in, .fx .cont__titulo.fx-rev.is-in { -webkit-mask-position: 0 0; mask-position: 0 0; transition: opacity .95s cubic-bezier(.2,.7,.2,1), translate .95s cubic-bezier(.2,.7,.2,1), -webkit-mask-position 1.3s cubic-bezier(.2,.7,.2,1), mask-position 1.3s cubic-bezier(.2,.7,.2,1); }
button.btn { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.case--b .case__logo { align-self: flex-start; }

/* menu mobile em tela cheia: o header não pode virar bloco de contenção do nav fixo */
@media (max-width: 1100px) {
  .topo { left: 24px; transform: none; }
  .menu-aberto .topo, .menu-aberto .topo.is-solido { -webkit-backdrop-filter: none; backdrop-filter: none; background: none; box-shadow: none; translate: none; }
}

/* =====================================================================
   v3.2: hero revisado, cenas com solucoes e troca de telas, Sobre novo, rodape novo
   ===================================================================== */

/* ---------- Hero ---------- */
.hero__texto { max-width: 560px; }
.hero__prova { gap: 18px; padding-top: 30px; margin-top: 10px; }
.hero__prova ul { flex-wrap: wrap; align-items: center; gap: 18px 34px; }
.hero__prova li { height: 44px; }
.hero__prova img { height: 40px; max-width: 150px; width: auto; opacity: .85; }
.hero__prova img.p-mov { height: 34px; }
.hero__prova img.p-lat { height: 34px; max-width: 150px; }
.hero__prova img.p-ha { height: 44px; }
.hero__prova img.p-jsl { height: 24px; }
.hero__outra { display: inline-flex; align-items: center; gap: 14px; width: max-content; max-width: 100%; margin-top: 12px; padding: 10px 18px; border-inline: 1px solid var(--neutral-500); border-radius: 4px; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-100); transition: color .25s, border-color .25s, background-color .25s; }
.hero__outra:hover { color: var(--yellow); border-color: var(--yellow); background: rgba(244, 182, 63, .06); }
.hero__outra > span:last-child { transition: translate .3s ease; }
.hero__outra:hover > span:last-child { translate: 4px 0; }
.demo__painel { transition: opacity 1.3s ease, translate 1.3s cubic-bezier(.2, .7, .2, 1); }
.demo[data-estado="hoje"] .demo__painel--antes, .demo[data-estado="antes"] .demo__painel--hoje { transition: opacity 1.3s ease, translate 1.3s ease, visibility 0s 1.3s; }

/* ---------- Como fazemos: o mesmo fundo de "O que fazemos", em cinza ---------- */
.ai { background: #1B1E1F; }
.ai__stage { background: #1B1E1F url("../img/bg-scene-gray.webp") center top / cover no-repeat; }

/* ---------- Cenas ---------- */
.scene--a .scene__lista { top: 300px; }
.scene--b .scene__lista { top: 340px; }
.scene__lista { gap: 40px; }
.scene--a .scene__stats { top: 1390px; }
.scene--b .scene__stats { top: 1330px; }
.scene__stats { gap: 44px; }
.scene__todas { display: inline-flex; gap: 10px; margin-top: 20px; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; transition: color .25s; }
.scene--a .scene__todas { color: var(--neutral-300); }
.scene--b .scene__todas { color: var(--neutral-700); }
.scene--a .scene__todas:hover { color: var(--yellow); }
.scene--b .scene__todas:hover { color: var(--neutral-900); }
.scene__btns { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.scene--a .btn--escuro .btn__label { box-shadow: inset 0 0 0 1px rgba(235, 236, 237, .24); }
.solucoes li a { align-items: flex-start; gap: 14px; padding: 15px 0; }
.solucoes li a span.sol__n { flex: none; width: 22px; padding-top: 3px; font-size: 12px; letter-spacing: .6px; opacity: .5; }
.solucoes li a span.sol__c { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; }
.sol__t { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 500; font-size: 16px; line-height: 1.25; }
.sol__d { font-size: 13px; line-height: 1.4; opacity: .62; }
.sol__ia { font-style: normal; font-weight: 500; font-size: 10px; letter-spacing: .8px; padding: 2px 7px; border-radius: 20px; background: var(--yellow); color: var(--neutral-900); }
.scene--b .sol__ia { background: var(--neutral-900); color: var(--yellow); }
.solucoes .ico-arrow { margin-top: 4px; }
.scene--a .solucoes li a { color: var(--neutral-100); }
.scene--b .solucoes li a { color: var(--neutral-800); }
.stat-card__n { white-space: nowrap; }
.stat-card__l { white-space: normal; max-width: 300px; }
.stat-card { white-space: normal; }
.clientes { gap: 20px; }
.clientes__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 18px; }
.cli { display: flex; align-items: center; height: 34px; min-width: 0; }
.cli img { max-width: 100%; max-height: 26px; width: auto; height: auto; object-fit: contain; opacity: .78; }
.cli--txt { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; line-height: 1.1; }
.cli--txt b { font-weight: 700; font-style: italic; font-size: 15px; letter-spacing: .3px; opacity: .8; }
.cli--txt small { font-size: 9px; letter-spacing: .5px; text-transform: uppercase; opacity: .6; }
.scene--a .cli--txt { color: var(--neutral-100); }
.scene--b .cli--txt { color: var(--neutral-900); }

/* palco de telas: a imagem central troca de site conforme a rolagem */
.shots { overflow: visible; }
.mock--a.shots { height: 810px; }
.mock--b.shots { height: 888px; }
.shots__palco { position: absolute; inset: 0; }
.shot { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; translate: 0 40px; scale: .95; filter: blur(8px); transition: opacity .9s ease, translate .9s cubic-bezier(.2, .7, .2, 1), scale .9s cubic-bezier(.2, .7, .2, 1), filter .9s ease, visibility 0s .9s; }
.shot.is-on { opacity: 1; visibility: visible; translate: 0 0; scale: 1; filter: none; transition-delay: .1s, .1s, .1s, .1s, 0s; }
.shot.is-prev { translate: 0 -40px; scale: 1.04; }
.mock--a .shot--comp { overflow: hidden; }
.mock--b .shot--comp { display: block; }
.shot--site { display: grid; place-items: center; }
.shot__janela { width: min(640px, 86%); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 70px 100px -44px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .14); transform: perspective(1800px) rotateY(-13deg) rotateX(5deg) rotateZ(1.2deg); }
.shot__barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #1d2224; }
.shot__barra i { width: 9px; height: 9px; border-radius: 50%; background: #4a5154; }
.shot__barra span { flex: 1; margin-left: 12px; padding: 4px 12px; border-radius: 20px; background: #2c3235; font-size: 11px; letter-spacing: .3px; color: #a3a7a8; }
.shot__janela img { display: block; width: 100%; height: auto; }
.shots__leg { position: absolute; left: 0; right: 0; bottom: 4%; display: flex; justify-content: center; gap: 18px; font-size: 12px; letter-spacing: .7px; text-transform: uppercase; transition: opacity .3s; }
.shots__leg b { font-weight: 400; font-variant-numeric: tabular-nums; opacity: .6; }
.scene--a .shots__leg { color: var(--neutral-300); }
.scene--b .shots__leg { color: var(--neutral-800); }
.shots__leg.is-troca { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .shot, .shot.is-on { transition: none; filter: none; } }

/* ---------- Sobre (novo) ---------- */
.sob { position: relative; z-index: 3; background: var(--neutral-000); color: var(--neutral-900); }
.sob__inner { max-width: var(--w-design); margin-inline: auto; padding: 120px 40px 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: 72px; align-items: start; }
.sob__esq { display: flex; flex-direction: column; gap: 28px; }
.sob h2 { font-weight: 300; font-size: clamp(36px, 4vw, 56px); line-height: 1.06; letter-spacing: -.01em; color: var(--neutral-800); }
.sob h2 .is-dim { color: var(--neutral-400); }
.sob__lead { max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--neutral-700); }
.sob__linha { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 34px; margin-top: 8px; }
.sob__linha::before, .sob__linha::after { content: ""; position: absolute; left: 0; top: 6px; height: 1px; }
.sob__linha::before { right: 0; background: var(--neutral-200); }
.sob__linha::after { width: calc(var(--f, 1) * 100%); height: 2px; top: 5.5px; background: var(--yellow); }
.sob__linha li { position: relative; display: flex; flex-direction: column; gap: 6px; }
.sob__linha li::before { content: ""; position: absolute; left: 0; top: -34px; width: 13px; height: 13px; border-radius: 13px; background: var(--yellow); box-shadow: 0 0 0 5px var(--neutral-000); opacity: .3; }
.sob__linha li:nth-child(1)::before { opacity: calc(.3 + clamp(0, (var(--f, 1) + .2) * 6, .7)); }
.sob__linha li:nth-child(2)::before { opacity: calc(.3 + clamp(0, (var(--f, 1) - .35) * 6, .7)); }
.sob__linha li:nth-child(3)::before { opacity: calc(.3 + clamp(0, (var(--f, 1) - .75) * 6, .7)); }
.sob__linha b { font-weight: 300; font-size: 30px; line-height: 1; color: var(--neutral-900); }
.sob__linha span { font-size: 14px; line-height: 1.4; color: var(--neutral-600); }
.sob .lideres { position: static; width: auto; padding-top: 26px; margin-top: 4px; gap: 20px; }
.sob .lideres ul { gap: 18px; }
.sob .lideres li { gap: 18px; }
.sob .lideres__foto { width: 88px; height: 88px; border-radius: 88px; }
.sob .lideres b { font-size: 20px; }
.sob .lideres p span { font-size: 14px; }
.sob__dir { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.sob__rot { font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-600); }
.sob__areas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sob__areas li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; border-radius: 16px; background: var(--neutral-100); transition: translate .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; }
.sob__areas li:hover { translate: 0 -6px; box-shadow: 0 26px 50px -30px rgba(1, 29, 38, .35); }
.sob__n { font-size: 12px; letter-spacing: .8px; color: var(--neutral-500); }
.sob__areas b { font-weight: 500; font-size: 18px; line-height: 1.2; color: var(--neutral-900); }
.sob__areas small { font-size: 14px; line-height: 1.45; color: var(--neutral-600); }
.sob__areas li.sob__ia { grid-column: 1 / -1; background: var(--blue-900); }
.sob__ia .sob__n { color: var(--yellow); }
.sob__ia b { color: var(--neutral-000); }
.sob__ia small { color: var(--neutral-300); }
.sob .mq { position: relative; top: auto; margin: 40px 0 56px; }
.proj { position: relative; z-index: 1; box-shadow: 0 -50px 90px -50px rgba(60, 40, 0, .35); }
.cont, .diag { position: relative; z-index: 3; }

/* ---------- Diagnóstico: etapa 2 e variante final ---------- */
.diag--2 { background: var(--neutral-000); }
.diag--2 .diag__campo { background: var(--neutral-100); }
.diag__lead { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 16px; background: var(--neutral-000); box-shadow: inset 0 0 0 1px rgba(34, 37, 38, .08); animation: leadIn .6s cubic-bezier(.2, .7, .2, 1) both; }
.diag--2 .diag__lead { background: var(--neutral-100); }
.diag__lead[hidden] { display: none; }
@keyframes leadIn { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.diag__lead-tit { font-weight: 500; font-size: 16px; color: var(--neutral-900); }
.diag__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo--claro label { color: var(--neutral-600); }
.campo--claro input { background: var(--neutral-000); border: 1px solid rgba(34, 37, 38, .12); color: var(--neutral-900); }
.diag--2 .campo--claro input { background: var(--neutral-000); }
.diag__op { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--neutral-700); cursor: pointer; }
.diag__op input { flex: none; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--yellow); }
.diag__op a { text-decoration: underline; }
.diag__lead .btn { align-self: flex-start; }

/* ---------- Rodapé (novo) ---------- */
.rod { height: auto; }
.rod__inner { height: auto; display: flex; flex-direction: column; gap: 72px; padding: 112px 40px 36px; }
.rodc { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; align-items: start; }
.rodc__txt { display: flex; flex-direction: column; gap: 24px; }
.rod h2 { font-weight: 300; font-size: clamp(34px, 4vw, 56px); line-height: 1.05; color: var(--neutral-000); }
.rodc__txt p:not(.chip) { max-width: 480px; font-size: 17px; line-height: 1.5; color: var(--neutral-200); }
.rodc__diag { display: inline-flex; align-items: center; gap: 14px; width: max-content; max-width: 100%; padding: 10px 18px; border-inline: 1px solid var(--neutral-500); border-radius: 4px; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-100); transition: color .25s, border-color .25s; }
.rodc__diag:hover { color: var(--yellow); border-color: var(--yellow); }
.rodc__form { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 20px; background: rgba(1, 29, 38, .62); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .14); }
.rodc__form-tit { font-size: 14px; letter-spacing: .7px; text-transform: uppercase; color: var(--neutral-300); }
.rodc__form .btn { align-self: flex-start; }
.rodl { display: grid; grid-template-columns: 1.25fr 1.25fr .8fr 1fr; gap: 40px; padding-top: 56px; border-top: 1px solid rgba(235, 236, 237, .14); }
.rodl__col { display: flex; flex-direction: column; gap: 18px; }
.rodl__links { display: flex; flex-direction: column; gap: 10px; }
.rodl__links a { font-size: 15px; color: var(--neutral-200); transition: color .2s; }
.rodl__links a:hover { color: var(--yellow); }
.rodl__sub { margin-top: 14px; }
.rodl__nota { font-size: 14px; line-height: 1.45; color: var(--neutral-300); }
.rodl .lista--rodape li a { padding: 11px 0; font-size: 14px; gap: 14px; }
.news--linha { align-items: stretch; gap: 14px; }
.news--linha .btn { align-self: flex-start; }
.rod .rod__logotipo { position: relative; top: auto; left: auto; width: 100%; height: auto; aspect-ratio: 1286 / 281; }
.rod .rod__logo-a { width: 65.45%; height: auto; }
.rod .rod__logo-b { left: 71.67%; width: 28.33%; height: auto; }
.rod .rod__legal { position: static; transform: none; flex-wrap: wrap; justify-content: center; white-space: normal; row-gap: 4px; }
.rod .btn--amarelo .btn__label { background: var(--yellow); color: var(--neutral-900); }

/* ---------- Responsivo v3.2 ---------- */
@media (max-width: 1100px) {
  .scene { height: auto; }
  .scene--a .scene__stats, .scene--b .scene__stats, .scene--a .scene__lista, .scene--b .scene__lista { top: auto; }
  .mock--a.shots, .mock--b.shots { height: auto; aspect-ratio: 16 / 11; max-width: 640px; margin-inline: auto; }
  .shot__janela { transform: none; width: 92%; }
  .sob__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 84px 24px 24px; }
  .sob .mq { margin-bottom: 40px; }
  .rodc { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rodl { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
  .rod__inner { padding: 80px 24px 28px; gap: 56px; }
}
@media (max-width: 700px) {
  .sob__areas { grid-template-columns: 1fr; }
  .sob__linha { grid-template-columns: 1fr; gap: 22px; padding-top: 0; padding-left: 28px; }
  .sob__linha::before, .sob__linha::after { top: 0; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; }
  .sob__linha::after { width: 2px; height: calc(var(--f, 1) * 100%); left: 4.5px; }
  .sob__linha li::before { left: -28px; top: 4px; }
  .diag__linha { grid-template-columns: 1fr; }
  .rodl { grid-template-columns: 1fr; }
  .hero__prova img { height: 32px; }
  .hero__prova img.p-ha { height: 36px; }
  .hero__prova img.p-mov, .hero__prova img.p-lat { height: 28px; }
  .hero__prova img.p-jsl { height: 20px; }
  .hero__outra { text-transform: none; font-size: 14px; letter-spacing: 0; }
}

/* janela de site: mais estreita e deslocada, para não cobrir a lista da direita */
@media (min-width: 1101px) {
  .shot--site { place-items: center start; }
  .shot__janela { width: 520px; margin-left: 120px; }
  .mock--b .shot__janela { margin-left: 70px; }
}
.case__logo--txt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;display:block}

/* =====================================================================
   v3.3
   ===================================================================== */

/* ---------- Como fazemos: tema claro (branco/cinza clarinho), distinto do Diagnóstico ---------- */
.ai { background: #F7F8F8; color: var(--neutral-800); }
.ai__stage { background: #F7F8F8 url("../img/bg-como-fazemos-claro.webp") center top / cover no-repeat; }
.ai__stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 52% at 82% 14%, rgba(244, 182, 63, .13), transparent 70%), radial-gradient(40% 50% at 8% 90%, rgba(18, 89, 124, .07), transparent 70%); }
.ai h2 { color: var(--neutral-900); }
.ai h2 .is-dim { color: var(--neutral-400); }
.ai__lead { color: var(--neutral-600); }
.ai__rodape { color: var(--neutral-600); }
.cap { background: var(--neutral-000); box-shadow: 0 0 0 1px rgba(34, 37, 38, .07), 0 44px 80px -52px rgba(1, 29, 38, .34); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cap__cab h3 { color: var(--neutral-600); }
.cap__n { color: #C98A12; }
.cap__big { color: var(--neutral-900); }
.cap__big--palavra { color: var(--yellow); }
.cap__txt { color: var(--neutral-700); }
.barra em { color: var(--neutral-500); }
.barra__antes { background: rgba(34, 37, 38, .09); color: var(--neutral-600); }
.cap__etapas li, .rel__chips li { border-color: rgba(34, 37, 38, .2); color: var(--neutral-700); }
.cap__rot { color: var(--neutral-500); }
.ai.is-anim .cap__cal i { background: rgba(34, 37, 38, .08); }
.ai.is-anim .cap__cal i.on { background: var(--yellow); }
.pulso__base { stroke: rgba(34, 37, 38, .14); }
.pulso__ev { color: var(--neutral-700); }
.rel__rot { color: var(--neutral-500); }
.ai .folha { box-shadow: inset 0 0 0 1px rgba(34, 37, 38, .1); background: rgba(34, 37, 38, .03); }
.ai .folha__grade i { background: rgba(34, 37, 38, .1); }
.ai .painel__proj { stroke: var(--neutral-400); }
.ai__trilho li { border-top-color: rgba(34, 37, 38, .14); }
.ai__trilho button { color: var(--neutral-400); }
.ai__trilho li.is-ativo button, .ai__trilho button:hover { color: var(--neutral-900); }
.ai__trilho li.is-ativo b { color: #C98A12; }

/* ---------- Transição Como fazemos -> O que fazemos ---------- */
.scene--a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 360px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, #F7F8F8 0%, rgba(247, 248, 248, .92) 10%, rgba(247, 248, 248, .55) 38%, rgba(247, 248, 248, 0) 100%); }
.scene--a { z-index: 1; }

/* ---------- Software House / Inbound: imagem central menor, lista de soluções com ícones ---------- */
@media (min-width: 1101px) {
  .pin--mock-a { left: 150px; width: 700px; }
  .pin--mock-b { left: 120px; width: 700px; }
  .mock--a.shots { height: 700px; }
  .mock--b.shots { height: 760px; }
  .shot--site { place-items: center; }
  .shot__janela { width: 470px; margin-left: 0; }
  .mock--b .shot__janela { margin-left: 0; }
  .mock--a .shot--comp img { left: -14%; width: 118%; height: 92%; top: 2%; }
}
.solucoes li a span.sol__i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; margin-top: -1px; border-radius: 11px; opacity: 1; transition: background-color .3s, color .3s; }
.scene--a .solucoes .sol__i { background: rgba(249, 250, 250, .07); color: var(--yellow); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .1); }
.scene--b .solucoes .sol__i { background: rgba(1, 29, 38, .08); color: var(--blue-900); box-shadow: inset 0 0 0 1px rgba(1, 29, 38, .1); }
.scene--a .solucoes li a:hover .sol__i { background: var(--yellow); color: var(--neutral-900); }
.scene--b .solucoes li a:hover .sol__i { background: var(--blue-900); color: var(--yellow); }
.solucoes li a span.sol__c { opacity: 1; }
.solucoes .ico-arrow { margin-top: 10px; }

/* ---------- CTAs da cena ---------- */
.scene__ctas { display: flex; flex-direction: column; gap: 14px; }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; padding: 0 20px; border-radius: 14px; font-size: 14px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; text-decoration: none; transition: background-color .25s, color .25s, box-shadow .25s, translate .35s cubic-bezier(.2, .7, .2, 1); }
.cta .ico-arrow { flex: none; transition: translate .35s cubic-bezier(.2, .7, .2, 1); }
.cta:hover .ico-arrow { translate: 5px 0; }
.cta__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cta__duo:has(> .cta:only-child) { grid-template-columns: 1fr; }
.cta--lista { min-height: 0; padding: 0 2px 16px; border-radius: 0; font-size: 13px; font-weight: 400; letter-spacing: .6px; border-bottom: 1px solid currentColor; }
.scene--a .cta--lista { color: var(--neutral-200); border-color: rgba(249, 250, 250, .28); }
.scene--b .cta--lista { color: var(--neutral-800); border-color: rgba(1, 29, 38, .3); }
.scene--a .cta--lista:hover { color: var(--yellow); border-color: var(--yellow); }
.scene--b .cta--lista:hover { color: var(--neutral-900); border-color: var(--neutral-900); }
.cta--prim { background: var(--yellow); color: var(--neutral-900); box-shadow: 0 18px 36px -18px rgba(244, 182, 63, .7); }
.cta--prim:hover { background: #FFC85A; }
.cta--prim.cta--azul { background: var(--blue-900); color: var(--neutral-100); box-shadow: 0 18px 36px -18px rgba(1, 29, 38, .6); }
.cta--prim.cta--azul:hover { background: #0A3140; }
.cta--sec { color: var(--neutral-000); box-shadow: inset 0 0 0 1.5px rgba(249, 250, 250, .38); }
.cta--sec:hover { background: rgba(249, 250, 250, .1); box-shadow: inset 0 0 0 1.5px var(--yellow); }
.scene--a .cta--lista { margin-bottom: 4px; }

/* ---------- Clientes (novos logos) ---------- */
.cli--img-l img { max-height: 30px; }
.clientes__grade .cli:has(img[alt="OORT"]) img { max-height: 22px; }
.clientes__grade .cli:has(img[alt="SLMIT"]) img { max-height: 34px; }
.clientes__grade .cli:has(img[alt="PK Advogados"]) img { max-height: 32px; }

/* ---------- Cases / Conteúdos: sem vazamento do fundo fixado ---------- */
.proj .pin { height: 100%; }
.proj { z-index: 2; }
.sob { z-index: 3; }
.cont { background: var(--neutral-100); }

/* ---------- Sobre (v3.3) ---------- */
.sob { background: var(--neutral-000); }
.sob__inner { display: flex; flex-direction: column; gap: 56px; padding: 120px 40px 112px; }
.sob__topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: 72px; align-items: stretch; }
.sob__esq { justify-content: space-between; gap: 30px; }
.eq { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 28px; border-radius: 28px; color: var(--neutral-100); background: radial-gradient(70% 55% at 100% 0%, rgba(18, 112, 140, .35), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(244, 182, 63, .09), transparent 70%), var(--blue-900); box-shadow: 0 50px 90px -56px rgba(1, 29, 38, .75); overflow: hidden; }
.eq__cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.eq__tit { font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-300); }
.eq__leg { display: flex; gap: 18px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--neutral-300); }
.eq__leg span { display: inline-flex; align-items: center; gap: 8px; }
.eq__leg i { width: 9px; height: 9px; border-radius: 9px; }
.eq__p { background: var(--neutral-000); }
.eq__a { background: var(--yellow); box-shadow: 0 0 0 4px rgba(244, 182, 63, .22); }
.eq__corpo { flex: 1; display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 22px; min-height: 0; }
.eq__abas { display: flex; flex-direction: column; gap: 6px; }
.eq__abas button { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 14px; border: 0; border-radius: 13px; background: none; font: inherit; font-size: 14.5px; text-align: left; color: var(--neutral-300); cursor: pointer; overflow: hidden; transition: background-color .3s, color .3s; }
.eq__abas button svg { flex: none; color: var(--neutral-400); transition: color .3s; }
.eq__abas button:hover { background: rgba(249, 250, 250, .05); color: var(--neutral-000); }
.eq__abas button[aria-selected="true"] { background: rgba(249, 250, 250, .09); color: var(--neutral-000); }
.eq__abas button[aria-selected="true"] svg { color: var(--yellow); }
.eq__abas button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(0); }
.eq:not(.is-manual) .eq__abas button[aria-selected="true"]::after { animation: eqProg 4.2s linear forwards; }
.eq.is-manual .eq__abas button[aria-selected="true"]::after { transform: scaleX(1); opacity: .5; }
@keyframes eqProg { to { transform: scaleX(1); } }
.eq__paineis { position: relative; display: flex; flex-direction: column; min-height: 320px; }
.eq__painel { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.eq__painel[hidden] { display: none; }
.eq__painel h3 { font-weight: 300; font-size: 28px; line-height: 1.1; color: var(--neutral-000); }
.eq__duo { flex: 1; display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.eq__bloco { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 20px 22px; border-radius: 18px; }
.eq__bloco p:not(.eq__rot) { font-size: 16px; line-height: 1.45; color: var(--neutral-100); }
.eq__bloco--h { background: rgba(249, 250, 250, .06); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .1); }
.eq__bloco--ia { background: linear-gradient(135deg, rgba(244, 182, 63, .18), rgba(244, 182, 63, .06)); box-shadow: inset 0 0 0 1px rgba(244, 182, 63, .35); }
.eq__rot { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--neutral-300); }
.eq__rot i { width: 8px; height: 8px; border-radius: 8px; background: var(--neutral-000); }
.eq__bloco--ia .eq__rot { color: var(--yellow); }
.eq__bloco--ia .eq__rot i { background: var(--yellow); box-shadow: 0 0 0 4px rgba(244, 182, 63, .22); }
.eq__painel.is-on h3 { animation: eqIn .6s cubic-bezier(.2, .7, .2, 1) both; }
.eq__painel.is-on .eq__bloco--h { animation: eqIn .6s .08s cubic-bezier(.2, .7, .2, 1) both; }
.eq__painel.is-on .eq__bloco--ia { animation: eqIn .6s .18s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes eqIn { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
.eq__pulso { margin-top: 2px; height: 34px; }
.eq__pulso svg { display: block; width: 100%; height: 100%; overflow: visible; }
.eq__pulso path { fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 60 140; filter: drop-shadow(0 0 6px rgba(244, 182, 63, .7)); animation: eqPulso 3.2s linear infinite; }
@keyframes eqPulso { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
.eq__rodape { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--neutral-300); }
.eq__ponto { flex: none; width: 8px; height: 8px; border-radius: 8px; background: var(--yellow); }

.sob .lideres { padding-top: 0; margin-top: 0; border-top: 0; gap: 20px; }
.sob .lideres ul { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sob .lideres li { align-items: center; gap: 22px; padding: 26px 28px; border-radius: 22px; background: var(--neutral-100); transition: translate .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.sob .lideres li:hover { translate: 0 -6px; box-shadow: 0 30px 56px -34px rgba(1, 29, 38, .4); }
.sob .lideres__foto { width: 92px; height: 92px; border-radius: 92px; }
.sob .lideres b { font-size: 21px; }
.lideres__in { display: inline-flex; align-items: center; gap: 7px; width: max-content; margin-top: 10px; padding: 6px 12px 6px 10px; border-radius: 30px; font-size: 13px; color: var(--neutral-800); box-shadow: inset 0 0 0 1px rgba(34, 37, 38, .22); transition: background-color .25s, color .25s, box-shadow .25s; }
.sob .lideres p span.lideres__in-t, .lideres__in span { font-size: 13px; }
.lideres__in:hover { background: var(--blue-900); color: var(--neutral-000); box-shadow: none; }
.lideres__in svg { flex: none; }
.sob .lideres__rot { align-items: baseline; justify-content: flex-start; gap: 14px; }

/* ---------- Diagnóstico: sim ou não ---------- */
.diag__sn { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.diag__sn legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; font-size: 14px; line-height: 1.4; color: var(--neutral-800); }
.diag__sn label { position: relative; cursor: pointer; }
.diag__sn input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.diag__sn label span { display: inline-flex; align-items: center; justify-content: center; min-width: 88px; padding: 10px 22px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--neutral-800); box-shadow: inset 0 0 0 1.5px rgba(34, 37, 38, .22); transition: background-color .2s, color .2s, box-shadow .2s; }
.diag__sn label:hover span { box-shadow: inset 0 0 0 1.5px var(--neutral-900); }
.diag__sn input:checked + span { background: var(--blue-900); color: var(--neutral-000); box-shadow: none; }
.diag__sn input[value="sim"]:checked + span { background: var(--yellow); color: var(--neutral-900); }
.diag__sn input:focus-visible + span { outline: 2px solid var(--blue-700); outline-offset: 2px; }

/* ---------- Rodapé: logotipo na largura da tela ---------- */
.rod__inner { --rp: 40px; }
.rod .rod__logotipo { width: calc(100% + var(--rp) * 2); margin-inline: calc(var(--rp) * -1); align-self: stretch; }
.rod .rod__legal { margin-top: -20px; }

/* ---------- Conteúdos: efeitos ---------- */
.post { transition: translate .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s ease; }
.post:hover { translate: 0 -10px; box-shadow: 0 34px 60px -34px rgba(1, 29, 38, .4); }
.post__img img { transition: scale 1s cubic-bezier(.2, .7, .2, 1); }

@media (max-width: 1100px) {
  .ai h2 { color: var(--neutral-900); }
  .sob__inner { padding: 84px 24px 72px; gap: 44px; }
  .sob__topo { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .sob .lideres ul { grid-template-columns: 1fr; }
  .rod__inner { --rp: 24px; }
  .pin--mock-a, .pin--mock-b { left: auto; }
  .scene--a::before { height: 200px; }
}
@media (max-width: 700px) {
  .eq { padding: 20px; }
  .eq__corpo { grid-template-columns: minmax(0, 1fr); }
  .eq__abas { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .eq__abas::-webkit-scrollbar { display: none; }
  .eq__abas li { flex: none; }
  .eq__abas button { width: auto; white-space: nowrap; padding: 12px 14px; }
  .eq__paineis { min-height: 0; }
  .cta__duo { grid-template-columns: 1fr; }
  .sob .lideres li { padding: 20px; gap: 16px; }
  .sob .lideres__foto { width: 72px; height: 72px; border-radius: 72px; }
}
.scene--b .cta--sec { color: var(--neutral-900); box-shadow: inset 0 0 0 1.5px rgba(1, 29, 38, .4); }
.scene--b .cta--sec:hover { background: rgba(1, 29, 38, .08); box-shadow: inset 0 0 0 1.5px var(--blue-900); }
.cta { font-size: 13px; letter-spacing: .4px; }
@media (min-width: 1101px) {
  .pin--mock-a { left: 215px; width: 700px; }
  .pin--mock-b { left: 160px; width: 700px; }
  .shot__janela { width: 500px; }
}
.sob__inner { align-items: stretch; }
.sob .lideres__rot { flex-wrap: nowrap; }
.eq__pulso { display: none; }
.sob .lideres p.lideres__rot { flex-direction: row; align-items: baseline; }
.clientes__grade .cli:has(img[alt="Cloud Target"]) img { max-height: 34px; }
@media (max-width: 1100px) {
  .pin--mock-a > .mock, .pin--mock-b > .mock { position: relative; top: auto; }
  .scene--a::before { display: none; }
}

/* v3.3.1 */
.scene--a::before { content: none; display: none; }
.scene--a { z-index: auto; }
.scene--a .solucoes .sol__i, .scene--a .solucoes li a .sol__i { color: var(--neutral-100); }
.scene--a .solucoes li a:hover .sol__i { background: rgba(249, 250, 250, .92); color: var(--blue-900); }
.scene--b .solucoes li a:hover .sol__i { background: var(--blue-900); color: var(--neutral-000); }
@media (min-width: 1101px) {
  .pin--mock-a { left: 290px; width: 700px; }
  .pin--mock-b { left: 270px; width: 700px; }
  .shot__janela { width: 420px; }
  .mock--a .shot--comp img { left: -14%; width: 118%; }
}
.sob .mq { position: relative; top: auto; margin: 0 0 56px; }
.eq.is-pausado .eq__abas button[aria-selected="true"]::after { animation-play-state: paused; }
.eq .eq__abas button[aria-selected="true"]::after { animation: eqProg 4s linear forwards; }
.sob__inner { padding-bottom: 48px; } .sob .mq { margin: 24px 0 64px; }

/* =====================================================================
   v5.0 | Hero da v4 (H1, botao, caso real em etapas)
   ===================================================================== */
.demo { gap: 14px; }
.demo__pas { font-size: 12px; letter-spacing: .6px; color: var(--neutral-400); font-variant-numeric: tabular-nums; }
.demo__pas b { font-weight: 500; color: var(--neutral-100); }
.demo__passos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.demo__passos button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px 9px; border: 0; border-top: 2px solid rgba(249, 250, 250, .16); background: none; font: inherit; text-align: left; color: var(--neutral-400); cursor: pointer; transition: color .3s, border-color .3s; }
.demo__passos i { font-style: normal; font-size: 11px; letter-spacing: .6px; }
.demo__passos span { font-size: 12.5px; line-height: 1.2; }
.demo__passos button:hover { color: var(--neutral-100); }
.demo__passos button[aria-selected="true"] { color: var(--neutral-000); border-top-color: var(--yellow); }
.demo__corpo { display: grid; min-height: 0; }
.demo__p { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; animation: demoEntra .9s cubic-bezier(.2, .7, .2, 1) both; }
.demo__p[hidden] { display: none; }
@keyframes demoEntra { from { opacity: 0; translate: 0 14px; } }
.demo__tag { align-self: flex-start; padding: 4px 11px; border-radius: 99px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--neutral-200); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .25); }
.demo__tag--ia { color: var(--yellow); box-shadow: inset 0 0 0 1px rgba(244, 182, 63, .6); }
.demo__tit { font-size: 23px; line-height: 1.18; font-weight: 400; letter-spacing: -.01em; text-wrap: balance; }
.demo__txt { font-size: 14.5px; line-height: 1.55; color: var(--neutral-200); }
.demo__prog { height: 2px; border-radius: 2px; background: rgba(249, 250, 250, .12); overflow: hidden; }
.demo__prog i { display: block; height: 100%; width: 100%; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(0); }
.demo.is-js .demo__prog i { animation: demoProg var(--t, 11s) linear forwards; }
.demo.is-js.is-pausa .demo__prog i { animation-play-state: paused; }
@keyframes demoProg { to { transform: scaleX(1); } }
.demo .mail { padding: 12px 14px; gap: 10px; }
.demo .mail__lista li { padding: 5px 10px; }
.demo .mail__pontos { gap: 4px; }
.demo .painel { margin-top: 2px; }
.chat { display: flex; flex-direction: column; gap: 10px; }
.chat__u { align-self: flex-end; max-width: 80%; padding: 9px 14px; border-radius: 14px 14px 4px 14px; background: rgba(249, 250, 250, .12); font-size: 13.5px; color: var(--neutral-100); }
.chat__ia { padding: 12px 15px; border-radius: 4px 14px 14px 14px; border-left: 2px solid var(--yellow); background: rgba(249, 250, 250, .06); }
.chat__ia b { display: block; margin-bottom: 4px; font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.chat__ia p { font-size: 13.5px; line-height: 1.5; color: var(--neutral-100); }
.demo__p.is-on .chat__u { animation: demoEntra .7s .5s cubic-bezier(.2, .7, .2, 1) both; }
.demo__p.is-on .chat__ia { animation: demoEntra .8s 1.6s cubic-bezier(.2, .7, .2, 1) both; }
.demo__p.is-on .chat .demo__chips { animation: demoEntra .8s 3s cubic-bezier(.2, .7, .2, 1) both; }
.meta { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 12px; background: rgba(249, 250, 250, .06); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .1); }
.meta__topo { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--neutral-300); }
.meta__topo b { font-weight: 500; font-size: 14px; color: var(--neutral-000); }
.meta__nivel { height: 8px; border-radius: 8px; background: rgba(249, 250, 250, .12); overflow: hidden; }
.meta__nivel i { display: block; height: 100%; width: 77%; border-radius: 8px; background: var(--yellow); transform-origin: 0 50%; }
.meta__lista { display: flex; flex-direction: column; gap: 8px; }
.meta__lista li { display: grid; grid-template-columns: 112px 1fr 38px; align-items: center; gap: 12px; font-size: 12.5px; color: var(--neutral-200); }
.meta__lista div { height: 6px; border-radius: 6px; background: rgba(249, 250, 250, .12); overflow: hidden; }
.meta__lista i { display: block; height: 100%; width: var(--v); border-radius: 6px; background: var(--neutral-100); transform-origin: 0 50%; }
.meta__lista em { font-style: normal; text-align: right; color: var(--yellow); }
.meta__sim { padding: 9px 12px; border-radius: 10px; background: rgba(244, 182, 63, .12); font-size: 13px; line-height: 1.4; color: var(--neutral-100); }
.meta__sim b { margin-right: 8px; font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.demo__p.is-on .meta__nivel i, .demo__p.is-on .meta__lista i { animation: crescer 1.6s .4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes crescer { from { transform: scaleX(0); } }
.dif { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dif__c { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 12px; background: rgba(249, 250, 250, .05); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .1); }
.dif__c > p { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--neutral-400); }
.dif__c ul { display: flex; flex-direction: column; gap: 9px; }
.dif__c li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.35; color: var(--neutral-300); }
.dif__c li::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--neutral-500); }
.dif__c--h { background: rgba(244, 182, 63, .1); box-shadow: inset 0 0 0 1px rgba(244, 182, 63, .45); }
.dif__c--h > p { color: var(--yellow); }
.dif__c--h li { color: var(--neutral-000); }
.dif__c--h li::before { background: var(--yellow); box-shadow: none; }
.demo__p.is-on .dif__c--h li { animation: demoEntra .7s cubic-bezier(.2, .7, .2, 1) both; }
.demo__p.is-on .dif__c--h li:nth-child(1) { animation-delay: .5s; } .demo__p.is-on .dif__c--h li:nth-child(2) { animation-delay: 1.4s; } .demo__p.is-on .dif__c--h li:nth-child(3) { animation-delay: 2.3s; }
@media (max-width: 760px) { .demo__passos span { font-size: 11px; } .demo__tit { font-size: 20px; } .meta__lista li { grid-template-columns: 90px 1fr 34px; gap: 8px; } .dif { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .demo__p, .demo__p.is-on * { animation: none !important; } }


.demo__p { opacity: 0; visibility: hidden; pointer-events: none; animation: none; }
.demo__p.is-on { opacity: 1; visibility: visible; pointer-events: auto; animation: demoEntra .9s cubic-bezier(.2, .7, .2, 1) both; }
.demo__ctl { display: flex; align-items: center; gap: 12px; }
.demo__pp { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(249, 250, 250, .1); color: var(--neutral-100); cursor: pointer; transition: background-color .25s, color .25s; }
.demo__pp:hover { background: var(--yellow); color: var(--neutral-900); }
.demo__pp .i-play, .demo.is-parado .demo__pp .i-pause { display: none; }
.demo.is-parado .demo__pp .i-play { display: block; }
.demo.is-js.is-parado .demo__prog i { animation-play-state: paused; }
.hero__titulo { font-size: clamp(40px, 4.5vw, 66px); }
.hero__inner > *, .hero__col, .demo { min-width: 0; }
@media (max-width: 1100px) { .hero__titulo { font-size: clamp(30px, 8.4vw, 72px); } .hero__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .demo__passos { grid-template-columns: repeat(5, minmax(0, 1fr)); } .demo__passos button { padding-inline: 4px; } .demo__passos span { font-size: 10.5px; } }
.demo .mail__pontos { grid-template-columns: repeat(50, 1fr); gap: 3px; }

/* =====================================================================
   v5.0 | Um unico sistema: o palco fixo do COMO FAZEMOS (trilho a esquerda,
   capitulos a direita) vira a estrutura de O QUE FAZEMOS, CASES e SOBRE.
   Dois temas: claro (textura) e escuro (video + veu, cartoes de vidro como o hero).
   ===================================================================== */
/* submenu na paleta */
.topo.is-solido { background: rgba(1, 29, 38, .72); box-shadow: 0 12px 40px -22px rgba(1, 29, 38, .6), inset 0 0 0 1px rgba(249, 250, 250, .09); }
.topo.is-solido.topo--claro { background: rgba(249, 250, 250, .72); box-shadow: 0 12px 36px -24px rgba(34, 37, 38, .35), inset 0 0 0 1px rgba(34, 37, 38, .07); }
.topo__nav ul.submenu { background: #02202B; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 24px 60px -24px rgba(1, 29, 38, .7), inset 0 0 0 1px rgba(249, 250, 250, .1); }
.topo--claro .topo__nav ul.submenu { background: #F9FAFA; box-shadow: 0 24px 60px -28px rgba(34, 37, 38, .45), inset 0 0 0 1px rgba(34, 37, 38, .08); }

/* botoes de vidro (tema escuro) e de contorno (tema claro) */
.btn--vidro .btn__label { background: rgba(249, 250, 250, .08); color: var(--neutral-000); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .22); }
.btn--seta-vidro .btn__arrow { background: rgba(249, 250, 250, .08); color: var(--neutral-000); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .22); }
.btn--vidro:hover .btn__label, .btn--vidro:hover .btn__arrow { background: rgba(249, 250, 250, .16); filter: none; }
.btn--vidro-claro .btn__label { background: transparent; color: var(--neutral-900); box-shadow: inset 0 0 0 1px rgba(1, 29, 38, .26); }
.btn--vidro-claro:hover .btn__label { background: rgba(1, 29, 38, .06); filter: none; }

/* palco: grade e tema escuro */
.ai__stage { grid-template-columns: minmax(340px, 440px) 1fr; }
.ai--escuro { background: var(--blue-900); color: var(--neutral-100); }
.ai--escuro .ai__stage { background: var(--blue-900); }
.ai--escuro .ai__stage::before { content: none; }
.ai__media { position: absolute; inset: 0; z-index: 0; background: var(--blue-900) url("../img/hero-poster.jpg") center / cover no-repeat; }
.ai__media--sobre { background-image: url("../img/sobre-poster.jpg"); }
.ai__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.ai__media video.is-pronto { opacity: 1; }
.ai__veu { position: absolute; inset: 0; z-index: 0; background: var(--veil); }
.ai__stage > .ai__esq, .ai__stage > .ai__dir { z-index: 1; }
.ai--escuro h2 { color: var(--neutral-000); }
.ai--escuro h2 .is-dim { color: var(--neutral-400); }
.ai--escuro .ai__lead { color: var(--neutral-300); }
.ai--escuro .ai__rodape { color: var(--neutral-300); }
.ai--escuro .ai__trilho li { border-top-color: rgba(249, 250, 250, .14); }
.ai--escuro .ai__trilho button { color: var(--neutral-500); }
.ai--escuro .ai__trilho li.is-ativo button, .ai--escuro .ai__trilho button:hover { color: var(--neutral-000); }
.ai--escuro .ai__trilho li.is-ativo b { color: var(--yellow); }
.ai--escuro .cap { background: linear-gradient(160deg, rgba(1, 29, 38, .72), rgba(1, 29, 38, .5)); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .12), 0 50px 90px -40px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.ai--escuro .cap__cab h3 { color: var(--neutral-300); }
.ai--escuro .cap__big { color: var(--neutral-000); }
.ai--escuro .cap__txt { color: var(--neutral-200); }
.ai--escuro .ai__chip .chip__text { color: var(--neutral-200); }
.ai .ai__topo > .btn { margin-top: 4px; }
.ai__trilho button span { font-size: 20px; }
.cap__cab { flex-wrap: wrap; }
.of__stat { margin-left: auto; font-size: 13px; color: var(--neutral-400); white-space: nowrap; }
.of__stat b { font-weight: 300; font-size: 26px; letter-spacing: -.02em; color: var(--neutral-000); margin-right: 6px; font-variant-numeric: tabular-nums; }

/* O que fazemos */
.cap--of { gap: 18px; padding: 28px 32px 26px; justify-content: space-between; }
.of__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.of__txt { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.of__tit { font-weight: 300; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.015em; color: var(--neutral-000); text-wrap: balance; }
.of__tit em { font-style: italic; font-weight: 200; color: var(--yellow); }
.of__sub { max-width: 460px; font-size: 14.5px; line-height: 1.5; color: var(--neutral-300); }
.of__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.of__tiles a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 10px 7px 7px; border-radius: 12px; background: rgba(249, 250, 250, .06); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .1); font-size: 13px; line-height: 1.2; color: var(--neutral-100); transition: background-color .25s, translate .35s cubic-bezier(.2, .7, .2, 1); }
.of__tiles a:hover { background: rgba(249, 250, 250, .12); translate: 0 -2px; }
.of__i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--neutral-100); color: var(--blue-900); }
.of__tiles .sol__ia { margin-left: auto; background: var(--yellow); color: var(--neutral-900); }
.of__vis { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ofv { overflow: hidden; border-radius: 14px; background: #0c2a35; box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .14), 0 40px 70px -40px rgba(0, 0, 0, .8); }
.ofv__barra { display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: rgba(249, 250, 250, .06); }
.ofv__barra i { width: 8px; height: 8px; border-radius: 50%; background: rgba(249, 250, 250, .25); }
.ofv__barra span { flex: 1; margin-left: 10px; padding: 3px 11px; border-radius: 20px; background: rgba(249, 250, 250, .08); font-size: 11px; letter-spacing: .3px; color: var(--neutral-300); }
.ofv__tela { position: relative; aspect-ratio: 3 / 2; background: var(--neutral-100); }
.ofv__tela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .8s ease; }
.ofv__tela img.is-on { opacity: 1; }
.ofv--img .ofv__tela { background: #e9eaeb; }
.ofv--img .ofv__tela img { object-fit: cover; object-position: center; }
.ofv__leg { display: flex; justify-content: space-between; padding: 8px 14px; font-size: 12px; color: var(--neutral-300); }
.ofv__leg em { font-style: normal; font-variant-numeric: tabular-nums; }
.of__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.of__sec { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--neutral-400); }
.of__sec::after { content: ""; flex: 1; height: 1px; background: rgba(249, 250, 250, .14); }
.of__cli { display: flex; flex-direction: column; gap: 12px; }
.of__cli ul { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 18px; align-items: center; }
.of__cli li { display: flex; align-items: center; justify-content: center; height: 26px; }
.of__cli img { max-width: 100%; max-height: 24px; width: auto; object-fit: contain; opacity: .85; }
.of__cli-txt b { font-weight: 600; font-size: 12px; letter-spacing: .2px; color: var(--neutral-200); white-space: nowrap; }
@media (max-height: 880px) and (min-width: 1101px) { .of__sub { display: none; } .of__tiles a { min-height: 42px; } .cap--of { padding: 22px 28px 20px; gap: 14px; } .of__cli { gap: 8px; } }
@media (max-height: 780px) and (min-width: 1101px) { .of__cli { display: none; } .of__tit { font-size: 24px; } }

/* Cases (tema claro) */
.ai--cs .ai__stage { background: #F7F8F8 url("../img/bg-como-fazemos-claro.webp") center bottom / cover no-repeat; }
.cap--cs { justify-content: flex-start; gap: 18px; }
.cap--cs .cap__big { font-size: clamp(72px, 13vh, 150px); }
.cs__big { display: flex; align-items: center; gap: 28px; font-weight: 600; letter-spacing: -.02em; line-height: .9; font-variant-numeric: tabular-nums; }
.cs__de { font-size: clamp(56px, 9vh, 104px); color: var(--neutral-400); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(34, 37, 38, .35); }
.cs__seta { width: 56px; height: 2px; background: var(--neutral-400); position: relative; }
.cs__seta::after { content: ""; position: absolute; right: -1px; top: -6px; width: 12px; height: 12px; border-top: 2px solid var(--neutral-400); border-right: 2px solid var(--neutral-400); transform: rotate(45deg); }
.cs__para { font-size: clamp(88px, 16vh, 168px); color: var(--yellow); }
.cs__leg { display: flex; gap: 28px; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--neutral-500); }
.cs__leg span { flex: 1; max-width: 240px; }
.cap--cs .cap__txt { max-width: 520px; font-size: 17px; }
.cs__pe { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(34, 37, 38, .1); }
.cs__logo { height: 32px; width: auto; max-width: 180px; object-fit: contain; object-position: left; }
.cs__logo--txt { font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-600); }
.ai.is-anim .cap--cs .cap__big, .ai.is-anim .cs__big { opacity: calc(.15 + var(--e) * .85); translate: 0 calc((1 - var(--e)) * 20px); }

/* Sobre (tema escuro) */
.cap--sb { justify-content: flex-start; gap: 18px; }
.cap--sb .cap__big { font-size: clamp(72px, 13vh, 150px); }
.sb__linha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(249, 250, 250, .14); }
.sb__linha li { display: flex; flex-direction: column; gap: 6px; }
.sb__linha b { font-weight: 400; font-size: 13px; letter-spacing: .65px; color: var(--yellow); }
.sb__linha span { font-size: 15px; line-height: 1.35; color: var(--neutral-200); }
.cap--eq { padding: 0; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.cap--eq .eq { height: 100%; background: linear-gradient(160deg, rgba(1, 29, 38, .72), rgba(1, 29, 38, .5)); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .12), 0 50px 90px -40px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: 24px; }
.sb__lid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sb__lid li { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 18px; background: rgba(249, 250, 250, .06); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .1); }
.sb__foto { flex: none; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--neutral-800); }
.sb__foto img { width: 100%; height: 100%; object-fit: cover; }
.sb__lid div { display: flex; flex-direction: column; gap: 3px; }
.sb__lid b { font-weight: 500; font-size: 19px; color: var(--neutral-000); }
.sb__lid div > span { font-size: 14px; color: var(--neutral-300); }
.sb__lid .lideres__in { margin-top: 8px; color: var(--neutral-100); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .25); }
.sb__lid .lideres__in:hover { background: var(--yellow); color: var(--neutral-900); }
.sb__nota { margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(249, 250, 250, .14); font-size: 16px; line-height: 1.45; color: var(--neutral-300); }
.mqs { position: relative; z-index: 1; padding: 28px 0; background: var(--blue-900); }
.mqs .mq { position: relative; top: auto; margin: 0; }

/* Conteudos (grade do palco, sem fixar) */
.ct { position: relative; z-index: 1; background: #F7F8F8 url("../img/bg-como-fazemos-claro.webp") center top / cover no-repeat; color: var(--neutral-800); overflow: hidden; }
.ct__in { display: grid; grid-template-columns: minmax(340px, 440px) 1fr; gap: 56px; padding: 112px max(40px, calc((100% - 1286px) / 2)) 96px; align-items: start; }
.ct__esq { position: sticky; top: 112px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.ct h2 { display: flex; flex-direction: column; font-weight: 300; font-size: clamp(34px, 3.5vw, 50px); line-height: 1.05; color: var(--neutral-900); }
.ct h2 .is-dim { color: var(--neutral-400); }
.ct .ai__lead { color: var(--neutral-600); }
.ct__dir { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.ct__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 46px; }
.ct__barra .filtros { position: static; flex-wrap: wrap; }
.ct__nav { display: flex; align-items: center; gap: 10px; }
.ct__nav[hidden], .ct__prog[hidden], .ct__vazio[hidden], .ctc[hidden] { display: none; }
.ct__conta { margin-right: 10px; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-600); font-variant-numeric: tabular-nums; }
.ct__seta { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--neutral-300); border-radius: 50%; background: none; color: var(--neutral-800); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.ct__seta--ant .ico-arrow { transform: scaleX(-1); }
.ct__seta:hover:not([aria-disabled="true"]) { background: var(--blue-900); border-color: var(--blue-900); color: var(--neutral-000); }
.ct__seta[aria-disabled="true"] { opacity: .35; cursor: default; }
.ct__pista { display: flex; gap: 24px; overflow-x: auto; padding: 4px 4px 26px; margin: -4px -4px 0; scroll-snap-type: x mandatory; scrollbar-width: none; outline-offset: 4px; }
.ct__pista::-webkit-scrollbar { display: none; }
.ctc { flex: none; width: 304px; display: flex; flex-direction: column; gap: 14px; padding: 10px 10px 24px; border-radius: 24px; background: var(--neutral-000); box-shadow: 0 0 0 1px rgba(34, 37, 38, .07), 0 44px 80px -52px rgba(1, 29, 38, .34); scroll-snap-align: start; transition: translate .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.ctc:hover { translate: 0 -5px; box-shadow: 0 0 0 1px rgba(34, 37, 38, .1), 0 50px 80px -46px rgba(1, 29, 38, .5); }
.ctc__img { position: relative; aspect-ratio: 288 / 220; border-radius: 16px; overflow: hidden; background: var(--neutral-100); }
.ctc__img img { width: 100%; height: 100%; object-fit: cover; }
.ctc__tag { position: absolute; left: 12px; top: 12px; padding: 5px 12px; border-radius: 99px; background: var(--neutral-000); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--neutral-900); }
.ctc__titulo { padding: 0 14px; font-weight: 400; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; color: var(--neutral-900); }
.ctc__meta { display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 13px; color: var(--neutral-600); }
.ver { display: inline-flex; align-items: center; gap: 14px; margin: auto 14px 0; padding-top: 10px; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-900); }
.ver .btn__arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--yellow); color: var(--neutral-900); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.ver:hover .btn__arrow { transform: translateX(5px); }
.ct__vazio { font-size: 18px; line-height: 1.4; color: var(--neutral-600); }
.ct__prog { height: 2px; border-radius: 2px; background: rgba(34, 37, 38, .12); overflow: hidden; }
.ct__prog i { display: block; height: 100%; width: var(--larg, 25%); translate: var(--pos, 0) 0; background: var(--blue-900); border-radius: 2px; transition: translate .25s ease-out; }

/* rodape na mesma grade */
.rodc { grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: 56px; }
.rodc__txt h2 { font-weight: 300; font-size: clamp(34px, 3.5vw, 50px); line-height: 1.05; }
.rodc__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; padding: 32px 34px; border-radius: 24px; }
.rodc__form-tit, .rodc__form .campo:nth-of-type(3), .rodc__form .aceite, .rodc__form .btn, .rodc__form .news__msg { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .ai__stage { grid-template-columns: minmax(0, 1fr); }
  .of__grid { grid-template-columns: 1fr; }
  .of__cli ul { grid-template-columns: repeat(3, 1fr); }
  .cap--of { gap: 20px; padding: 24px 20px; }
  .sb__lid, .sb__linha { grid-template-columns: 1fr; }
  .cs__big { gap: 16px; } .cs__de { font-size: 48px; } .cs__para { font-size: 76px; } .cs__seta { width: 32px; }
  .ct__in { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 72px 24px 64px; }
  .ct__esq { position: static; }
  .ctc { width: min(304px, 78vw); }
  .rodc { grid-template-columns: minmax(0, 1fr); gap: 36px; } .rodc__form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .of__tiles { grid-template-columns: 1fr; } .cs__pe { flex-direction: column; align-items: flex-start; } }

.cs__vis { margin-top: 6px; }
.cap--cs .painel { background: rgba(34, 37, 38, .035); box-shadow: inset 0 0 0 1px rgba(34, 37, 38, .08); }
.cap--cs .hpd__barra b { color: var(--neutral-800); }
.cap--cs .hpd__barra span { box-shadow: inset 0 0 0 1px rgba(34, 37, 38, .14); color: var(--neutral-600); }
.cap--cs .painel__kpis li { background: rgba(34, 37, 38, .05); }
.cap--cs .painel__kpis b { color: var(--neutral-900); }
.cap--cs .painel svg { height: 90px; }
.cap--cs .rel__hoje { display: flex; flex-direction: column; gap: 12px; }
.cap--cs .rel__hoje svg { height: 110px; }
.cs__fontes { display: flex; flex-direction: column; gap: 12px; }
.cs__fontes > ul:not(.rel__chips) { display: flex; flex-direction: column; gap: 8px; }
.cs__fontes > ul:not(.rel__chips) li { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; font-size: 13px; color: var(--neutral-700); }
.cs__fontes div { height: 8px; border-radius: 8px; background: rgba(34, 37, 38, .08); overflow: hidden; }
.cs__fontes i { display: block; height: 100%; width: var(--v); border-radius: 8px; background: var(--yellow); transform-origin: 0 50%; }
.ai.is-anim .cap--cs.is-ativo .cs__fontes i { animation: crescer 1.4s .3s cubic-bezier(.2, .7, .2, 1) both; }

.cap--sb .cs__leg { color: var(--neutral-400); }
.cap--sb .cs__leg span { max-width: 420px; }
.sb__fatos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.sb__fatos li { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; background: rgba(249, 250, 250, .06); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .1); }
.sb__fatos b { font-weight: 300; font-size: 30px; line-height: 1; letter-spacing: -.02em; color: var(--yellow); font-variant-numeric: tabular-nums; }
.sb__fatos span { font-size: 13px; color: var(--neutral-300); }
.sb__lid { flex: 1; gap: 20px; }
.sb__lid li { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; padding: 28px; }
.sb__foto { width: 112px; height: 112px; }
.sb__lid small { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--neutral-200); }
.cap--cs .rel__chips li { border-color: rgba(34, 37, 38, .2); color: var(--neutral-700); }
@media (max-width: 760px) { .sb__fatos { grid-template-columns: 1fr; } }
.cap { min-width: 0; }
@media (max-width: 760px) {
  .cap--cs .cap__big, .cap--sb .cap__big { font-size: clamp(44px, 15vw, 90px); }
  .cs__leg { flex-wrap: wrap; gap: 10px 20px; }
  .cs__leg span { max-width: none; }
  .cap--cs .painel__kpis { gap: 6px; } .cap--cs .painel__kpis li { padding: 6px 8px; } .cap--cs .painel__kpis b { font-size: 15px; } .cap--cs .painel__kpis span { font-size: 10px; }
  .cap--cs .hpd__barra span { display: none; }
  .cs__fontes > ul:not(.rel__chips) li { grid-template-columns: 76px 1fr; }
}

/* =====================================================================
   v5.1 | O que fazemos em azul (01) e amarelo (02); Cases em duas colunas;
   Sobre, Conteudos e Diagnostico de volta a v3 (Sobre com a textura do padrao)
   ===================================================================== */
.ai--of .ai__stage { padding-top: 80px; padding-bottom: 40px; }
.ai--of .ai__veu { transition: background-color .9s ease; }
.ai--of[data-spy-ativo="software-house"] .ai__veu { background: rgba(18, 89, 124, .78); }
.ai--of[data-spy-ativo="inbound-marketing"] .ai__veu { background: rgba(244, 182, 63, .9); }
.ai--of .ai__esq, .ai--of .ai__rodape { transition: color .6s ease; }
.ai--of[data-spy-ativo="inbound-marketing"] h2, .ai--of[data-spy-ativo="inbound-marketing"] .ai__trilho li.is-ativo button, .ai--of[data-spy-ativo="inbound-marketing"] .ai__trilho button:hover { color: var(--neutral-900); }
.ai--of[data-spy-ativo="inbound-marketing"] h2 .is-dim { color: rgba(34, 37, 38, .55); }
.ai--of[data-spy-ativo="inbound-marketing"] .ai__lead, .ai--of[data-spy-ativo="inbound-marketing"] .ai__rodape, .ai--of[data-spy-ativo="inbound-marketing"] .ai__chip .chip__text { color: var(--neutral-800); }
.ai--of[data-spy-ativo="inbound-marketing"] .ai__trilho button { color: rgba(34, 37, 38, .5); }
.ai--of[data-spy-ativo="inbound-marketing"] .ai__trilho li { border-top-color: rgba(34, 37, 38, .2); }
.ai--of[data-spy-ativo="inbound-marketing"] .ai__trilho li.is-ativo b { color: var(--blue-900); }
.ai--of[data-spy-ativo="inbound-marketing"] .ai__trilho li::before, .ai--of[data-spy-ativo="inbound-marketing"] .ai__ponto { background: var(--blue-900); }
.ai--of[data-spy-ativo="inbound-marketing"] .ai__chip { box-shadow: inset 0 0 0 1px rgba(34, 37, 38, .3); }
.cap--of { gap: 16px; padding: 24px 28px 22px; justify-content: flex-start; }
.cap--of .of__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: 26px; }
.cap--of .of__txt { gap: 10px; }
.cap--of .of__vis { gap: 12px; }
.cap--of .of__vis .of__cli { margin-top: auto; }
.cap--of .of__cli ul { grid-template-columns: repeat(4, 1fr); gap: 8px 14px; }
.cap--of .solucoes { display: flex; flex-direction: column; margin-top: 4px; }
.cap--of .solucoes li { border-top: 1px solid rgba(249, 250, 250, .12); }
.cap--of .solucoes li:last-child { border-bottom: 1px solid rgba(249, 250, 250, .12); }
.cap--of .solucoes li a { display: flex; align-items: center; gap: 12px; padding: 8px 2px; color: var(--neutral-000); transition: padding .3s cubic-bezier(.2, .7, .2, 1), background-color .25s; }
.cap--of .solucoes li a:hover { padding-inline: 8px; background: rgba(249, 250, 250, .06); }
.cap--of .solucoes .sol__i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--neutral-100); color: var(--blue-900); opacity: 1; }
.cap--of .solucoes .sol__c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cap--of .solucoes .sol__t { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; line-height: 1.25; }
.cap--of .solucoes .sol__d { font-size: 12px; line-height: 1.35; color: var(--neutral-300); }
.cap--of .solucoes .ico-arrow { flex: none; color: var(--neutral-400); transition: transform .2s; }
.cap--of .solucoes li a:hover .ico-arrow { transform: translateX(3px); color: var(--yellow); }
.cap--of .sol__ia { background: var(--yellow); color: var(--neutral-900); }
/* 01 azul */
.ai--escuro .cap--sh { background: linear-gradient(160deg, rgba(1, 29, 38, .8), rgba(18, 89, 124, .45)); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .14), 0 50px 90px -40px rgba(0, 0, 0, .7); }
/* 02 amarelo: cartao claro com texto escuro */
.ai--escuro .cap--ib { background: rgba(249, 250, 250, .94); box-shadow: inset 0 0 0 1px rgba(34, 37, 38, .08), 0 50px 90px -40px rgba(60, 40, 0, .45); color: var(--neutral-900); }
.ai--escuro .cap--ib .cap__cab h3, .cap--ib .of__stat { color: var(--neutral-600); }
.cap--ib .cap__n { color: #C98A12; }
.cap--ib .of__stat b, .cap--ib .of__tit { color: var(--neutral-900); }
.cap--ib .of__tit em { color: #C98A12; }
.cap--ib .of__sub, .cap--ib .solucoes .sol__d { color: var(--neutral-600); }
.cap--ib .solucoes li { border-top-color: rgba(34, 37, 38, .1); }
.cap--ib .solucoes li:last-child { border-bottom-color: rgba(34, 37, 38, .1); }
.cap--ib .solucoes li a { color: var(--neutral-900); }
.cap--ib .solucoes li a:hover { background: rgba(34, 37, 38, .04); }
.cap--ib .solucoes .sol__i { background: var(--blue-900); color: var(--neutral-000); }
.cap--ib .solucoes li a:hover .ico-arrow { color: var(--blue-900); }
.cap--ib .sol__ia { background: var(--blue-900); color: var(--yellow); }
.cap--ib .ofv { background: #e9eaeb; box-shadow: 0 0 0 1px rgba(34, 37, 38, .1), 0 40px 70px -40px rgba(1, 29, 38, .5); }
.cap--ib .of__sec { color: var(--neutral-500); }
.cap--ib .of__sec::after { background: rgba(34, 37, 38, .12); }
.cap--ib .of__cli img { filter: invert(1) brightness(.35); opacity: .75; }
.cap--ib .of__cli-txt b { color: var(--neutral-700); }
.cap--ib .btn--contorno .btn__label, .cap--ib .btn--seta-contorno .btn__arrow { background: transparent; color: var(--neutral-900); box-shadow: inset 0 0 0 1px rgba(1, 29, 38, .3); }
.cap--ib .btn--contorno:hover .btn__label, .cap--ib .btn--contorno:hover .btn__arrow { background: rgba(1, 29, 38, .06); filter: none; }
@media (max-height: 880px) and (min-width: 1101px) { .cap--of .of__sub { display: none; } .cap--of .solucoes .sol__d { display: none; } .cap--of .solucoes li a { padding-block: 7px; } }
@media (min-height: 881px) and (min-width: 1101px) { .cap--of .of__sub { display: block; } }

/* Cases: texto a esquerda, painel escuro a direita */
.cap--cs { gap: 16px; }
.cs__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 28px; flex: 1; min-height: 0; }
.cs__txt { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cs__txt .cap__big { font-size: clamp(56px, 10vh, 112px); }
.cs__big { gap: 18px; }
.cs__de { font-size: clamp(44px, 7vh, 80px); }
.cs__para { font-size: clamp(72px, 12vh, 128px); }
.cs__seta { width: 40px; }
.cs__txt .cap__txt { margin-top: 4px; font-size: 16px; }
.cs__txt .cs__pe { margin-top: auto; }
.cs__vis { display: flex; flex-direction: column; justify-content: center; gap: 12px; margin: 0; padding: 20px 22px; border-radius: 18px; background: linear-gradient(160deg, rgba(1, 29, 38, .96), rgba(18, 89, 124, .75)); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .1), 0 30px 60px -36px rgba(1, 29, 38, .6); color: var(--neutral-100); }
.cs__vrot { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--neutral-300); }
.cs__vis .painel__kpis li { background: rgba(249, 250, 250, .07); }
.cs__vis .painel__kpis b { color: var(--neutral-000); }
.cs__vis svg { display: block; width: 100%; height: 84px; overflow: visible; }
.cs__vis .cs__svg { height: 120px; }
.cs__vis .painel__proj { stroke: var(--neutral-300); }
.cs__eixo { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .5px; color: var(--neutral-400); margin-top: -4px; }
.cs__vis .chat__ia { background: rgba(249, 250, 250, .07); }
.cs__vis .chat__ia p { font-size: 13px; }
.cs__vis .demo__chips li { color: var(--neutral-200); border-color: rgba(249, 250, 250, .22); }
.cs__fontes { display: flex; flex-direction: column; gap: 10px; }
.cs__fontes li { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 12px; font-size: 13px; color: var(--neutral-200); }
.cs__fontes div { height: 8px; border-radius: 8px; background: rgba(249, 250, 250, .12); overflow: hidden; }
.cs__fontes i { display: block; height: 100%; width: var(--v); border-radius: 8px; background: var(--yellow); transform-origin: 0 50%; }
.ai.is-anim .cap--cs.is-ativo .cs__fontes i { animation: crescer 1.4s .3s cubic-bezier(.2, .7, .2, 1) both; }
.ai.is-anim .cap--cs.is-ativo .cs__vis > * { animation: demoEntra .7s cubic-bezier(.2, .7, .2, 1) both; }
.ai.is-anim .cap--cs.is-ativo .cs__vis > :nth-child(2) { animation-delay: .25s; } .ai.is-anim .cap--cs.is-ativo .cs__vis > :nth-child(3) { animation-delay: .5s; } .ai.is-anim .cap--cs.is-ativo .cs__vis > :nth-child(4) { animation-delay: .75s; } .ai.is-anim .cap--cs.is-ativo .cs__vis > :nth-child(5) { animation-delay: 1s; }
.cs__pe { padding-top: 18px; }

/* Sobre (v3) com a textura do padrao */
.sob { background: #F7F8F8 url("../img/bg-como-fazemos-claro.webp") center top / cover no-repeat; }
.sob h2 { font-size: clamp(34px, 3.5vw, 50px); line-height: 1.05; color: var(--neutral-900); }

@media (max-width: 1100px) {
  .cs__grid { grid-template-columns: 1fr; }
  .cap--of .of__grid { grid-template-columns: 1fr; }
  .cap--of .of__cli ul { grid-template-columns: repeat(3, 1fr); }
  .cap--of .of__sub, .cap--of .solucoes .sol__d { display: block; }
}
@media (max-height: 880px) and (min-width: 1101px) { .cap--of .solucoes .sol__d { display: block; font-size: 11.5px; } .cap--of .solucoes li a { padding-block: 5px; gap: 10px; } .cap--of .solucoes .sol__i { width: 30px; height: 30px; } .cap--of .solucoes .sol__t { font-size: 13.5px; } .cap--of .of__tit { font-size: 24px; } .cap--of .ofv__tela { aspect-ratio: 16 / 9; } }
.ai--of[data-spy-ativo="inbound-marketing"] .ai__chip .chip__dot { background: var(--blue-900); }
.cs__txt .cap__big { white-space: nowrap; font-size: clamp(48px, 7.2vw, 96px); }
@media (min-width: 1101px) { .cs__txt .cap__big { font-size: min(96px, 10vh, 6.2vw); } }
.sob h2 .is-dim { display: block; }

/* =====================================================================
   v5.2 | O que fazemos em duas faixas de cor (azul e amarelo) com lista
   grande de solucoes e filme de sites; Cases como lista editorial
   ===================================================================== */
/* abertura */
.ofa { position: relative; z-index: 1; background: #F7F8F8 url("../img/bg-como-fazemos-claro.webp") center bottom / cover no-repeat; color: var(--neutral-800); }
.ofa__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; padding: 112px max(40px, calc((100% - 1286px) / 2)) 88px; align-items: end; }
.ofa__in > .chip { grid-column: 1 / -1; margin-bottom: -8px; }
.ofa h2 { display: flex; flex-direction: column; font-weight: 300; font-size: clamp(34px, 3.5vw, 50px); line-height: 1.05; color: var(--neutral-900); }
.ofa h2 .is-dim { color: var(--neutral-400); }
.ofa__lead { max-width: 520px; font-size: 16px; line-height: 1.5; color: var(--neutral-600); }
.ofa__nav { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.ofa__nav a { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 16px; background: var(--blue-900); color: var(--neutral-000); font-size: 18px; transition: translate .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.ofa__nav li:last-child a { background: var(--yellow); color: var(--neutral-900); }
.ofa__nav a b { font-weight: 400; font-size: 13px; letter-spacing: .65px; color: var(--yellow); }
.ofa__nav li:last-child a b { color: var(--blue-900); }
.ofa__nav a span { flex: 1; }
.ofa__nav a:hover { translate: 0 -3px; box-shadow: 0 26px 50px -30px rgba(1, 29, 38, .5); }
.ofa__nav a:hover .ico-arrow { transform: translateX(4px); }
.ofa__nav .ico-arrow { transition: transform .25s; }

/* faixas */
.band { position: relative; z-index: 1; overflow: hidden; }
.band--sh { background: var(--blue-900); color: var(--neutral-100); }
.band--sh::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 85% 10%, rgba(18, 89, 124, .55), transparent 70%), radial-gradient(40% 50% at 5% 100%, rgba(244, 182, 63, .12), transparent 70%); }
.band--ib { background: var(--yellow); color: var(--neutral-900); }
.band--ib::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 15% 0%, rgba(255, 255, 255, .28), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(1, 29, 38, .14), transparent 70%); }
.band__in { position: relative; display: grid; grid-template-columns: minmax(340px, 460px) minmax(0, 1fr); gap: 72px; padding: 104px max(40px, calc((100% - 1286px) / 2)) 72px; align-items: start; }
.band__in--inv { grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); }
.band__in--inv .band__fixo { order: 2; }
.band__fixo { position: sticky; top: 104px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.band__n { font-size: 13px; letter-spacing: .65px; color: var(--yellow); }
.band--ib .band__n { color: var(--blue-900); }
.band__tit { font-weight: 300; font-size: clamp(44px, 5.2vw, 76px); line-height: .98; letter-spacing: -.02em; color: var(--neutral-000); }
.band__tit em { font-style: italic; font-weight: 200; color: var(--yellow); }
.band--ib .band__tit { color: var(--neutral-900); }
.band--ib .band__tit em { color: var(--blue-900); }
.band__frase { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; color: var(--neutral-000); max-width: 440px; }
.band--ib .band__frase { color: var(--neutral-900); }
.band__txt { font-size: 15.5px; line-height: 1.55; color: var(--neutral-300); max-width: 420px; }
.band--ib .band__txt { color: rgba(34, 37, 38, .78); }
.band__stat { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.band__stat b { font-weight: 300; font-size: clamp(40px, 3.6vw, 56px); line-height: 1; letter-spacing: -.02em; color: var(--yellow); font-variant-numeric: tabular-nums; }
.band--ib .band__stat b { color: var(--blue-900); }
.band__stat span { font-size: 14px; color: var(--neutral-300); }
.band--ib .band__stat span { color: rgba(34, 37, 38, .75); }
.band__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.band--ib .btn--contorno .btn__label, .band--ib .btn--seta-contorno .btn__arrow { background: transparent; color: var(--neutral-900); box-shadow: inset 0 0 0 1px rgba(1, 29, 38, .4); }
.band--ib .btn--contorno:hover .btn__label, .band--ib .btn--contorno:hover .btn__arrow { background: rgba(1, 29, 38, .08); filter: none; }
.blog { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; padding-top: 22px; border-top: 1px solid rgba(249, 250, 250, .16); width: 100%; }
.band--ib .blog { border-top-color: rgba(34, 37, 38, .18); }
.blog__rot { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--neutral-400); }
.band--ib .blog__rot { color: rgba(34, 37, 38, .6); }
.blog ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; align-items: center; }
.blog li { display: flex; align-items: center; justify-content: flex-start; height: 26px; }
.blog img { max-width: 100%; max-height: 24px; width: auto; object-fit: contain; opacity: .85; }
.blog__txt b { font-weight: 600; font-size: 12px; color: var(--neutral-200); white-space: nowrap; }
.band--ib .blog__txt b { color: var(--neutral-800); }
.band__lista { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.band__rot { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-300); }
.band--ib .band__rot { color: rgba(34, 37, 38, .7); }
.band--ib .band__rot .chip__dot { background: var(--blue-900); }
.brow { display: flex; flex-direction: column; }
.brow li { border-top: 1px solid rgba(249, 250, 250, .16); }
.brow li:last-child { border-bottom: 1px solid rgba(249, 250, 250, .16); }
.band--ib .brow li, .band--ib .brow li:last-child { border-color: rgba(34, 37, 38, .18); }
.brow a { display: grid; grid-template-columns: 40px 52px minmax(0, 1fr) 24px; align-items: center; gap: 18px; padding: 22px 8px; color: var(--neutral-000); transition: background-color .3s, padding .4s cubic-bezier(.2, .7, .2, 1); }
.band--ib .brow a { color: var(--neutral-900); }
.brow a:hover { background: rgba(249, 250, 250, .06); padding-inline: 16px; }
.band--ib .brow a:hover { background: rgba(1, 29, 38, .06); }
.brow__n { font-size: 13px; letter-spacing: .65px; color: var(--yellow); }
.band--ib .brow__n { color: var(--blue-900); }
.brow__i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(249, 250, 250, .08); color: var(--yellow); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .14); transition: background-color .3s, color .3s; }
.brow a:hover .brow__i { background: var(--yellow); color: var(--neutral-900); }
.band--ib .brow__i { background: var(--blue-900); color: var(--neutral-000); box-shadow: none; }
.band--ib .brow a:hover .brow__i { background: var(--neutral-000); color: var(--blue-900); }
.brow__c { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.brow__c b { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-weight: 400; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.15; letter-spacing: -.01em; }
.brow__c small { font-size: 14.5px; line-height: 1.45; color: var(--neutral-300); max-width: 560px; }
.band--ib .brow__c small { color: rgba(34, 37, 38, .72); }
.brow .sol__ia { background: var(--yellow); color: var(--neutral-900); }
.band--ib .brow .sol__ia { background: var(--blue-900); color: var(--yellow); }
.brow .ico-arrow { color: var(--neutral-400); transition: transform .25s, color .25s; }
.brow a:hover .ico-arrow { transform: translateX(4px); color: var(--yellow); }
.band--ib .brow .ico-arrow { color: rgba(34, 37, 38, .5); }
.band--ib .brow a:hover .ico-arrow { color: var(--blue-900); }
.band__todas { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; margin-top: 10px; padding: 12px 0; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-200); border-bottom: 1px solid var(--yellow); }
.band__todas:hover { color: var(--yellow); }
.band__mock { margin: 24px 0 0; border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, .55); box-shadow: 0 40px 80px -40px rgba(1, 29, 38, .5), inset 0 0 0 1px rgba(255, 255, 255, .6); }
.band__mock img { display: block; width: 100%; height: auto; }
/* filme de sites */
.film { position: relative; padding: 0 0 72px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.film__trilho { display: flex; gap: 22px; width: max-content; animation: filme 70s linear infinite; }
.film:hover .film__trilho { animation-play-state: paused; }
@keyframes filme { to { transform: translateX(-50%); } }
.film__item { flex: none; width: 400px; }
.film__janela { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 50px 80px -44px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.film__barra { display: flex; align-items: center; gap: 5px; padding: 9px 12px; background: #1d2224; }
.film__barra i { width: 8px; height: 8px; border-radius: 50%; background: #4a5154; }
.film__barra span { flex: 1; margin-left: 10px; padding: 3px 11px; border-radius: 20px; background: #2c3235; font-size: 11px; letter-spacing: .3px; color: #a3a7a8; }
.film__janela img { display: block; width: 100%; height: 250px; object-fit: cover; object-position: top; }
@media (prefers-reduced-motion: reduce) { .film__trilho { animation: none; } }

/* cases: lista editorial */
.cl { position: relative; z-index: 1; background: #F7F8F8 url("../img/bg-como-fazemos-claro.webp") center top / cover no-repeat; color: var(--neutral-800); }
.cl__in { padding: 112px max(40px, calc((100% - 1286px) / 2)) 96px; display: flex; flex-direction: column; gap: 56px; }
.cl__cab { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px 72px; align-items: end; }
.cl__cab > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.cl h2 { display: flex; flex-direction: column; font-weight: 300; font-size: clamp(34px, 3.5vw, 50px); line-height: 1.05; color: var(--neutral-900); }
.cl h2 .is-dim { color: var(--neutral-400); }
.cl__cab-dir { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.cl__cab-dir p { font-size: 16px; line-height: 1.5; color: var(--neutral-600); }
.cl__lista { display: flex; flex-direction: column; border-top: 1px solid rgba(34, 37, 38, .14); }
.clr { border-bottom: 1px solid rgba(34, 37, 38, .14); transition: background-color .35s; }
.clr__a { display: grid; grid-template-columns: 48px 200px minmax(0, 1fr) 220px 52px; align-items: center; gap: 28px; padding: 30px 16px; color: var(--neutral-900); transition: padding .4s cubic-bezier(.2, .7, .2, 1); }
.clr__n { font-size: 13px; letter-spacing: .65px; color: var(--neutral-500); }
.clr__quem { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 500; }
.clr__quem img { height: 26px; width: auto; max-width: 150px; object-fit: contain; object-position: left; }
.clr__quem small { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--neutral-500); }
.clr__tit { font-weight: 300; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.clr__num { display: flex; flex-direction: column; gap: 4px; }
.clr__num b { font-weight: 300; font-size: 30px; line-height: 1; letter-spacing: -.02em; color: var(--blue-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clr__num b i { font-style: normal; color: var(--yellow); }
.clr__num small { font-size: 12.5px; line-height: 1.3; color: var(--neutral-600); }
.clr__seta { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: transparent; color: var(--neutral-900); box-shadow: inset 0 0 0 1px rgba(1, 29, 38, .25); transition: background-color .3s, color .3s, box-shadow .3s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.clr__mais { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2, .7, .2, 1); }
.clr__mais-in { overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; padding: 0 16px 0 calc(48px + 200px + 56px + 16px); }
.clr__mais p { max-width: 620px; font-size: 15.5px; line-height: 1.5; color: var(--neutral-700); }
.clr__mais .demo__chips li { border-color: rgba(1, 29, 38, .3); color: var(--neutral-800); }
.clr.is-aberto { background: var(--blue-900); }
.clr.is-aberto .clr__a { color: var(--neutral-000); padding-inline: 28px; }
.clr.is-aberto .clr__n, .clr.is-aberto .clr__quem small { color: var(--neutral-300); }
.clr.is-aberto .clr__quem img { filter: brightness(0) invert(1); }
.clr.is-aberto .clr__num b { color: var(--yellow); }
.clr.is-aberto .clr__num small { color: var(--neutral-300); }
.clr.is-aberto .clr__seta { background: var(--yellow); color: var(--neutral-900); box-shadow: none; transform: translateX(4px); }
.clr.is-aberto .clr__mais { grid-template-rows: 1fr; }
.clr.is-aberto .clr__mais-in { padding-bottom: 30px; padding-left: calc(48px + 200px + 56px + 28px); }
.clr.is-aberto .clr__mais p { color: var(--neutral-200); }
.clr.is-aberto .clr__mais .demo__chips li { border-color: rgba(249, 250, 250, .3); color: var(--neutral-100); }

@media (max-width: 1100px) {
  .ofa__in { grid-template-columns: 1fr; gap: 24px; padding: 72px 24px 56px; }
  .ofa__nav { grid-template-columns: 1fr; }
  .band__in, .band__in--inv { grid-template-columns: 1fr; gap: 36px; padding: 64px 24px 48px; }
  .band__in--inv .band__fixo { order: 0; }
  .band__fixo { position: static; }
  .brow a { grid-template-columns: 30px 44px minmax(0, 1fr) 20px; gap: 12px; padding: 16px 4px; }
  .brow__i { width: 44px; height: 44px; border-radius: 12px; }
  .film { padding-bottom: 48px; }
  .film__item { width: 300px; } .film__janela img { height: 190px; }
  .cl__in { padding: 72px 24px 64px; gap: 36px; }
  .cl__cab { grid-template-columns: 1fr; gap: 24px; }
  .clr__a { grid-template-columns: 32px minmax(0, 1fr) 44px; grid-template-areas: "n quem seta" "n tit seta" "n num seta"; gap: 10px 16px; padding: 22px 8px; }
  .clr__n { grid-area: n; } .clr__quem { grid-area: quem; } .clr__tit { grid-area: tit; } .clr__num { grid-area: num; flex-direction: row; align-items: baseline; gap: 10px; } .clr__seta { grid-area: seta; width: 44px; height: 44px; }
  .clr__mais-in, .clr.is-aberto .clr__mais-in { padding-left: calc(32px + 16px + 8px); padding-right: 8px; }
  .clr.is-aberto .clr__a { padding-inline: 8px; }
}
@media (max-width: 760px) { .blog ul { grid-template-columns: repeat(3, 1fr); } .brow__c b { font-size: 18px; } }
.clr.is-aberto { border-radius: 20px; border-bottom-color: transparent; }

/* =====================================================================
   v5.3 | Submenus com pre-visualizacao; O que fazemos em trilho horizontal;
   Sobre sem o quadro do time; Conteudos com titulo no padrao; rodape em 3 colunas
   ===================================================================== */
/* ---------- submenus de Software house e Inbound ---------- */
.menu__item.has-mm { position: static; }
.topo__nav .mm { position: absolute; z-index: 5; top: calc(100% + 14px); left: 50%; width: min(980px, calc(100vw - 48px)); border-radius: 26px; overflow: hidden; opacity: 0; visibility: hidden; translate: -50% 12px; transition: opacity .25s ease, translate .4s cubic-bezier(.2, .7, .2, 1), visibility 0s .4s; }
.mm::before { content: ""; position: absolute; left: 0; right: 0; top: -44px; height: 44px; }
.menu__item.has-mm:hover > .mm, .menu__item.has-mm.is-aberto > .mm, .menu__item.has-mm:has(:focus-visible) > .mm { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity .25s ease, translate .4s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.mm--sh { background: radial-gradient(70% 90% at 100% 0%, rgba(18, 89, 124, .55), rgba(18, 89, 124, 0) 70%), #02202B; color: var(--neutral-100); box-shadow: 0 40px 90px -30px rgba(1, 29, 38, .85), inset 0 0 0 1px rgba(249, 250, 250, .1); }
.mm--ib { background: radial-gradient(70% 90% at 100% 0%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 70%), var(--yellow); color: var(--neutral-900); box-shadow: 0 40px 90px -30px rgba(60, 40, 0, .55); }
.mm__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: 1fr auto; }
.mm__col { padding: 28px 18px 18px 28px; }
.mm__rot { display: flex; align-items: center; gap: 8px; margin: 0 0 14px 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.mm--ib .mm__rot .chip__dot { background: var(--blue-900); }
.mm__lista { display: flex; flex-direction: column; gap: 2px; }
.topo .topo__nav .mm a { text-transform: none; letter-spacing: 0; white-space: normal; }
.topo .topo__nav .mm a::after { display: none; }
.topo .topo__nav .mm .mm__item { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 12px; font-size: 15.5px; color: inherit; transition: background-color .25s, padding .35s cubic-bezier(.2, .7, .2, 1); }
.mm__n { font-size: 11px; letter-spacing: .6px; opacity: .55; font-variant-numeric: tabular-nums; }
.mm__t { flex: 1; }
.topo .topo__nav .mm--sh .mm__item.is-on { background: rgba(249, 250, 250, .09); padding-left: 20px; }
.topo .topo__nav .mm--ib .mm__item.is-on { background: rgba(1, 29, 38, .1); padding-left: 20px; }
.mm__item.is-on .mm__n { opacity: 1; color: var(--yellow); }
.mm--ib .mm__item.is-on .mm__n { color: var(--blue-900); }
.mm .sol__ia { flex: none; }
.mm--sh .sol__ia { background: var(--yellow); color: var(--neutral-900); }
.mm--ib .sol__ia { background: var(--blue-900); color: var(--yellow); }
.mm__prev { position: relative; margin: 18px 18px 0 0; border-radius: 20px; overflow: hidden; min-height: 330px; }
.mm--sh .mm__prev { background: radial-gradient(circle at 1px 1px, rgba(249, 250, 250, .12) 1px, transparent 1.4px) 0 0 / 16px 16px, linear-gradient(150deg, rgba(18, 89, 124, .7), rgba(1, 29, 38, .2)); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .1); }
.mm--ib .mm__prev { background: radial-gradient(circle at 1px 1px, rgba(1, 29, 38, .14) 1px, transparent 1.4px) 0 0 / 16px 16px, rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(1, 29, 38, .08); }
.mm__p { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 26px 28px; opacity: 0; transition: opacity .35s ease; }
.mm__p.is-on { opacity: 1; }
.mm__ico { position: absolute; top: 26px; right: 26px; width: 120px; height: 120px; color: var(--yellow); }
.mm--ib .mm__ico { color: var(--blue-900); }
.mm__ico * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mm__p.is-on .mm__ico * { animation: desenha 1.3s .1s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes desenha { to { stroke-dashoffset: 0; } }
.mm__pn { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .65px; color: var(--yellow); }
.mm__pn span { opacity: .6; color: var(--neutral-300); }
.mm--ib .mm__pn { color: var(--blue-900); } .mm--ib .mm__pn span { color: var(--neutral-700); }
.mm__pt { font-weight: 300; font-size: 28px; line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
.mm__pd { font-size: 14px; line-height: 1.5; opacity: .82; max-width: 380px; }
.mm__p.is-on .mm__pt, .mm__p.is-on .mm__pd { animation: demoEntra .6s cubic-bezier(.2, .7, .2, 1) both; }
.mm__p.is-on .mm__pd { animation-delay: .08s; }
.mm__pe { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; padding: 16px 18px 16px 38px; margin-top: 18px; border-top: 1px solid rgba(249, 250, 250, .12); }
.mm--ib .mm__pe { border-top-color: rgba(1, 29, 38, .14); }
.mm__stat { font-size: 13px; opacity: .85; }
.mm__stat b { font-weight: 300; font-size: 24px; letter-spacing: -.02em; margin-right: 4px; }
.mm--sh .mm__stat b { color: var(--yellow); }
.topo .topo__nav .mm .mm__todas { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: inherit; }
.topo .topo__nav .mm .btn { display: inline-flex; }
.topo .topo__nav .mm .btn .btn__label { padding: 0 20px; }
.topo--claro .topo__nav .mm .btn--escuro .btn__label { color: var(--neutral-100); }
@media (prefers-reduced-motion: reduce) { .mm__ico * { stroke-dashoffset: 0; } .mm__p.is-on .mm__ico * { animation: none; } }
@media (max-width: 1100px) {
  .menu__item.has-mm { position: relative; }
  .topo__nav .mm { position: static; flex-basis: 100%; width: 100%; border-radius: 16px; opacity: 1; visibility: visible; translate: 0 0; display: none; margin-bottom: 8px; box-shadow: none; }
  .menu__item.has-mm.is-aberto > .mm { display: block; translate: 0 0; }
  .menu__item.has-mm:hover > .mm { translate: 0 0; }
  .menu__item.has-mm:not(.is-aberto):hover > .mm { display: none; }
  .mm::before, .mm__prev, .mm__stat { display: none; }
  .mm__in { display: block; }
  .mm__col { padding: 14px 8px 4px; }
  .topo .topo__nav .mm .mm__item { font-size: 16px; padding: 11px 10px; }
  .mm__pe { padding: 12px 18px 16px; margin-top: 6px; flex-wrap: wrap; gap: 12px; }
  .topo .topo__nav .mm .mm__todas { margin-left: 0; }
}

/* ---------- O que fazemos: trilho horizontal ---------- */
.hz { position: relative; z-index: 1; background: #F7F8F8; }
.hz__stage { position: relative; }
.hz.is-anim .hz__stage { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; }
.hz__trilho { display: flex; height: 100%; width: max-content; will-change: transform; }
.hz__g { position: relative; display: flex; align-items: center; gap: 28px; height: 100%; padding: 118px 96px 120px; overflow: hidden; }
.hz__g--abre { background: #F7F8F8 url("../img/bg-como-fazemos-claro.webp") left center / cover no-repeat; padding-left: max(40px, calc((100vw - 1286px) / 2)); padding-right: 140px; }
.hz__g--sh { background: radial-gradient(50% 60% at 30% 10%, rgba(18, 89, 124, .55), transparent 70%), radial-gradient(40% 50% at 90% 100%, rgba(18, 89, 124, .35), transparent 70%), var(--blue-900); color: var(--neutral-100); }
.hz__g--ib { background: radial-gradient(50% 60% at 20% 0%, rgba(255, 255, 255, .3), transparent 70%), radial-gradient(40% 50% at 100% 100%, rgba(1, 29, 38, .12), transparent 70%), var(--yellow); color: var(--neutral-900); padding-right: max(40px, calc((100vw - 1286px) / 2)); }
.hz__abre { width: min(560px, 80vw); display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.hz h2 { display: flex; flex-direction: column; font-weight: 300; font-size: clamp(34px, 3.5vw, 50px); line-height: 1.05; color: var(--neutral-900); }
.hz h2 .is-dim { color: var(--neutral-400); }
.hz__lead { max-width: 440px; font-size: 16px; line-height: 1.5; color: var(--neutral-600); }
.hz__dica { display: flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-600); }
.hz__dica i { position: relative; width: 64px; height: 1px; background: rgba(34, 37, 38, .25); overflow: hidden; }
.hz__dica i::after { content: ""; position: absolute; inset: 0; background: var(--yellow); transform: translateX(-100%); animation: dica 2.2s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes dica { 60%, 100% { transform: translateX(100%); } }
.hz:not(.is-anim) .hz__dica { display: none; }
.hz__fantasma { position: absolute; left: 0; bottom: 4vh; z-index: 0; margin: 0; white-space: nowrap; font-weight: 200; font-size: 22vh; line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(249, 250, 250, .1); pointer-events: none; }
.hz__g--ib .hz__fantasma { -webkit-text-stroke-color: rgba(1, 29, 38, .14); }
.hz__g > :not(.hz__fantasma) { position: relative; z-index: 1; }
.hz__capa { flex: none; width: 470px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-right: 36px; }
.hz__n { font-size: 13px; letter-spacing: .65px; color: var(--yellow); }
.hz__g--ib .hz__n { color: var(--blue-900); }
.hz__tit { font-weight: 200; font-size: clamp(56px, 6vw, 92px); line-height: .96; letter-spacing: -.03em; color: var(--neutral-000); }
.hz__tit em { font-style: italic; font-weight: 200; color: var(--yellow); }
.hz__g--ib .hz__tit { color: var(--neutral-900); }
.hz__g--ib .hz__tit em { color: var(--blue-900); }
.hz__frase { font-size: 21px; line-height: 1.3; }
.hz__txt { font-size: 15px; line-height: 1.55; opacity: .78; max-width: 400px; }
.hz__stat { display: flex; align-items: baseline; gap: 10px; }
.hz__stat b { font-weight: 300; font-size: 46px; line-height: 1; letter-spacing: -.02em; color: var(--yellow); font-variant-numeric: tabular-nums; }
.hz__g--ib .hz__stat b { color: var(--blue-900); }
.hz__stat span { font-size: 14px; opacity: .78; }
.hz__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.hz__g--ib .btn--contorno .btn__label, .hz__g--ib .btn--seta-contorno .btn__arrow { background: transparent; color: var(--neutral-900); box-shadow: inset 0 0 0 1px rgba(1, 29, 38, .4); }
.hz__cards { display: flex; align-items: center; gap: 22px; }
.hz__card { flex: none; width: 300px; height: min(440px, calc(100vh - 290px)); min-height: 360px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 26px 24px; border-radius: 24px; transition: background-color .35s, box-shadow .35s; }
.hz__g--sh .hz__card { background: linear-gradient(170deg, rgba(249, 250, 250, .1), rgba(249, 250, 250, .03)); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .14), 0 40px 70px -40px rgba(0, 0, 0, .8); color: var(--neutral-000); }
.hz__g--sh .hz__card:hover { background: linear-gradient(170deg, rgba(249, 250, 250, .16), rgba(249, 250, 250, .06)); box-shadow: inset 0 0 0 1px rgba(244, 182, 63, .6), 0 40px 70px -40px rgba(0, 0, 0, .8); }
.hz__g--ib .hz__card { background: var(--neutral-000); box-shadow: 0 40px 70px -40px rgba(60, 40, 0, .55); color: var(--neutral-900); }
.hz__g--ib .hz__card:hover { box-shadow: inset 0 0 0 2px var(--blue-900), 0 40px 70px -40px rgba(60, 40, 0, .55); }
.hz__cn { font-size: 13px; letter-spacing: .65px; color: var(--yellow); }
.hz__g--ib .hz__cn { color: var(--blue-900); }
.hz__ci { display: grid; place-items: center; width: 76px; height: 76px; margin: 14px 0 18px; border-radius: 20px; }
.hz__g--sh .hz__ci { background: var(--neutral-100); color: var(--blue-900); }
.hz__g--ib .hz__ci { background: var(--blue-900); color: var(--neutral-000); }
.hz__ico { width: 44px; height: 44px; stroke-width: 1.4; }
.hz__ico * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1); }
.hz__card.is-visto .hz__ico *, .hz:not(.is-anim) .hz__ico * { stroke-dashoffset: 0; }
.hz__ct { font-weight: 400; font-size: 23px; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.hz__card .sol__ia { margin-top: -2px; }
.hz__g--sh .hz__card .sol__ia { background: var(--yellow); color: var(--neutral-900); }
.hz__g--ib .hz__card .sol__ia { background: var(--blue-900); color: var(--yellow); }
.hz__cd { font-size: 14px; line-height: 1.5; opacity: .75; }
.hz__cv { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; font-size: 12.5px; letter-spacing: .65px; text-transform: uppercase; opacity: .85; }
.hz__cv .ico-arrow { transition: transform .25s; }
.hz__card:hover .hz__cv .ico-arrow { transform: translateX(4px); }
.hz__vis { flex: none; width: 520px; display: flex; flex-direction: column; gap: 22px; margin-left: 30px; }
.hz__vis .ofv { background: #0c2a35; box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .14), 0 50px 80px -40px rgba(0, 0, 0, .8); }
.hz__mock { margin: 0; border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, .6); box-shadow: 0 40px 80px -40px rgba(60, 40, 0, .6); }
.hz__mock img { display: block; width: 100%; height: auto; }
.hz__rot { margin-bottom: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.hz__logos ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 22px; align-items: center; }
.hz__logos li { display: flex; align-items: center; height: 30px; min-width: 0; }
.hz__logos img { display: block; width: auto; height: auto; max-width: 100%; max-height: 26px; object-fit: contain; opacity: .9; }
.hz__ltxt b { font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.hz__barra { position: absolute; left: 50%; bottom: 34px; z-index: 3; display: flex; gap: 6px; padding: 6px; border-radius: 99px; translate: -50% 0; background: rgba(1, 29, 38, .82); box-shadow: 0 20px 40px -20px rgba(1, 29, 38, .6), inset 0 0 0 1px rgba(249, 250, 250, .12); opacity: 0; transition: opacity .4s; }
.hz[data-fase="sh"] .hz__barra, .hz[data-fase="ib"] .hz__barra { opacity: 1; }
.hz:not(.is-anim) .hz__barra { display: none; }
.hz__seg { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 16px 11px; border-radius: 99px; font-size: 12.5px; color: var(--neutral-300); cursor: pointer; transition: background-color .3s, color .3s; }
.hz__seg b { font-weight: 400; font-size: 11px; color: var(--yellow); }
.hz__seg.is-ativo { background: rgba(249, 250, 250, .1); color: var(--neutral-000); }
.hz__seg i { position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px; background: rgba(249, 250, 250, .15); overflow: hidden; }
.hz__seg u { position: absolute; inset: 0; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
/* sem animacao: blocos empilhados, cartoes deslizam no dedo */
.hz:not(.is-anim) .hz__trilho { display: block; width: auto; }
.hz:not(.is-anim) .hz__g { display: flex; flex-direction: column; align-items: stretch; height: auto; padding: 72px 24px 56px; gap: 32px; }
.hz:not(.is-anim) .hz__capa, .hz:not(.is-anim) .hz__vis, .hz:not(.is-anim) .hz__abre { width: auto; max-width: 640px; padding-right: 0; margin-left: 0; }
.hz:not(.is-anim) .hz__cards { overflow-x: auto; margin: 0 -24px; padding: 6px 24px 18px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hz:not(.is-anim) .hz__cards::-webkit-scrollbar { display: none; }
.hz:not(.is-anim) .hz__card { width: min(300px, 78vw); height: auto; min-height: 340px; scroll-snap-align: start; }
.hz:not(.is-anim) .hz__fantasma { display: none; }
@media (max-width: 760px) { .hz__logos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hz__tit { font-size: 52px; } }

/* ---------- Sobre (v3) sem o quadro do time ---------- */
.sob__topo--v53 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 72px; align-items: end; margin-bottom: 56px; }
.sob__topo--v53 .sob__esq { gap: 28px; }
.sob__topo--v53 h2 { display: flex; flex-direction: column; }
.sob__dir2 { display: flex; flex-direction: column; gap: 32px; }
.sob__dir2 .sob__lead { font-size: 17px; }
.sob { background: #F7F8F8 url("../img/bg-como-fazemos-claro.webp") center top / cover no-repeat; padding-bottom: 0; }
.sob .lideres { margin-bottom: 64px; }
.sob .mq { margin: 0; padding: 30px 0; background: #fff; -webkit-mask-image: none; mask-image: none; box-shadow: none; }
.sob .mq__item::after { background: rgba(34, 37, 38, .08); }
.sob .mq__item img { object-fit: contain; }
@media (max-width: 1100px) { .sob__topo--v53 { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; } }

/* ---------- Conteudos: titulo no padrao ---------- */
.cont__titulo { display: flex; flex-direction: column; font-weight: 300; line-height: 1.05; letter-spacing: -.01em; color: var(--neutral-900); }
.cont__titulo .is-dim { color: var(--neutral-400); }
@media (min-width: 1101px) {
  .cont { height: 1050px; }
  .cont__titulo { font-size: 56px; width: 640px; }
  .cont__lateral { top: 300px; }
  .filtros { top: 487px; }
  .cont__nav { top: 479px; }
  .posts { top: 520px; }
  .cont__vazio { top: 570px; }
  .cont__prog { top: 970px; }
}
@media (max-width: 1100px) { .cont__titulo { font-size: clamp(34px, 8vw, 56px); } }

/* ---------- Rodape: 3 colunas, mais respiro antes da terceira ---------- */
.rodl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .62fr); column-gap: 56px; }
.rodl__col--peq { padding-left: clamp(24px, 6vw, 110px); }
@media (max-width: 1100px) { .rodl { grid-template-columns: 1fr; } .rodl__col--peq { padding-left: 0; } }
.topo__nav .mm ul.mm__lista { flex-direction: column; align-items: stretch; gap: 2px; }
.topo__nav .mm ul.mm__lista li { width: 100%; }
.sob__topo--v53 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; margin-bottom: 72px; }
.sob__topo--v53 .lideres { margin: 12px 0 0; width: 100%; gap: 14px; }
.sob__topo--v53 .lideres ul { grid-template-columns: 1fr; gap: 12px; }
.sob__topo--v53 .lideres li { padding: 18px 22px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 37, 38, .06); }
.sob__topo--v53 .lideres__foto { width: 72px; height: 72px; }
.sob__topo--v53 .lideres b { font-size: 19px; }
.sob__dir2 { padding-top: 64px; gap: 40px; }
.sob__dir2 .sob__lead { font-size: 18px; line-height: 1.6; }
.sob .sob__inner { padding-bottom: 0; }
.sob__dir2 .sob__linha { grid-template-columns: 1fr; gap: 0; padding: 0 0 0 30px; margin: 0; }
.sob__dir2 .sob__linha::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
.sob__dir2 .sob__linha::after { left: 5.5px; top: 8px; width: 2px; height: calc(var(--f, 1) * (100% - 16px)); }
.sob__dir2 .sob__linha li { flex-direction: row; align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: 1px solid rgba(34, 37, 38, .08); }
.sob__dir2 .sob__linha li::before { left: -30px; top: 23px; }
.sob__dir2 .sob__linha b { flex: none; width: 92px; font-size: 32px; }
.sob__dir2 .sob__linha span { font-size: 16px; }
@media (min-width: 1101px) { .cont__titulo { font-size: 50px; width: 600px; } .cont__lateral { top: 290px; } }
@media (max-width: 1100px) { .sob__dir2 { padding-top: 0; } }
.proj h2 { font-weight: 300; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.05; color: var(--neutral-900); } .proj h2 .is-dim { color: var(--neutral-400); }
@media (max-width: 1100px) {
  .sob .sob__topo.sob__topo--v53 { display: flex; flex-direction: column; grid-template-columns: none; gap: 32px; }
  .sob__topo--v53 .sob__esq, .sob__dir2 { width: 100%; }
  .sob__dir2 .sob__linha b { width: 70px; font-size: 26px; }
}

/* =====================================================================
   v5.4 | Cases empilhados; submenu com numero vazado; ajustes finos
   ===================================================================== */
/* botoes sem movimento no hover */
.btn, .btn:hover { translate: none !important; }
.btn:hover .btn__arrow, .btn:hover .btn__label { transform: none !important; }

/* submenu: pre-visualizacao no padrao do O que fazemos (numero vazado gigante, sem icone, sem pontilhado) */
.mm__prev { background: none !important; box-shadow: none !important; border-radius: 20px; }
.mm--sh .mm__prev { background: rgba(249, 250, 250, .04) !important; box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .1) !important; }
.mm--ib .mm__prev { background: var(--blue-900) !important; color: var(--neutral-000); }
.mm__ico { display: none; }
.mm__num { position: absolute; top: -18px; right: 14px; margin: 0; font-weight: 200; font-size: 190px; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(244, 182, 63, .45); pointer-events: none; }
.mm__p.is-on .mm__num { animation: mmNum .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mmNum { from { opacity: 0; translate: 0 24px; } }
.mm__pn { color: var(--neutral-300) !important; }
.mm__pn span { color: inherit !important; opacity: 1 !important; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.mm--ib .mm__pn { color: var(--neutral-300) !important; }
.mm--ib .mm__p .sol__ia { background: var(--yellow); color: var(--neutral-900); }
.mm__pt { position: relative; font-size: 30px; color: var(--neutral-000); }
.mm__pd { position: relative; color: var(--neutral-200); opacity: 1; }
.mm__pv { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12.5px; letter-spacing: .65px; text-transform: uppercase; color: var(--yellow); }
.mm__p.is-on .mm__pv { animation: demoEntra .6s .16s cubic-bezier(.2, .7, .2, 1) both; }
.topo .topo__nav .mm--ib .mm__item.is-on { background: transparent; box-shadow: inset 0 0 0 1px rgba(1, 29, 38, .22); }

/* O que fazemos / inbound: hover fino no tom; mockup fora do quadro e na proporcao certa */
.hz__g--ib .hz__card:hover { box-shadow: inset 0 0 0 1px rgba(201, 138, 18, .55), 0 40px 70px -40px rgba(60, 40, 0, .55); }
.hz__g--sh .hz__card:hover { box-shadow: inset 0 0 0 1px rgba(244, 182, 63, .4), 0 40px 70px -40px rgba(0, 0, 0, .8); }
.hz__mock { background: none; box-shadow: none; border-radius: 0; overflow: visible; margin: -20px -10px 0; }
.hz__mock img { width: 100%; height: auto; filter: drop-shadow(0 40px 40px rgba(90, 55, 0, .25)); }

/* Sobre: coluna da direita alinhada por baixo */
.sob__topo--v53 { align-items: end; }
.sob__dir2 { padding-top: 0; justify-content: flex-end; }

/* ---------- Cases empilhados ---------- */
.stk { position: relative; z-index: 1; background: #F7F8F8 url("../img/bg-como-fazemos-claro.webp") center top / cover no-repeat; color: var(--neutral-800); }
.stk__in { padding: 112px max(40px, calc((100% - 1286px) / 2)) 120px; }
.stk__cab { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px 72px; align-items: end; margin-bottom: 56px; }
.stk__tit { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.stk h2 { display: flex; flex-direction: column; font-weight: 300; font-size: clamp(34px, 3.5vw, 50px); line-height: 1.05; color: var(--neutral-900); }
.stk h2 .is-dim { color: var(--neutral-400); }
.stk__dir { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.stk__dir p { font-size: 16px; line-height: 1.5; color: var(--neutral-600); }
.stk__lista { display: flex; flex-direction: column; gap: 28px; }
.stc { position: sticky; top: calc(96px + var(--i) * 22px); }
.stc__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; gap: 48px; min-height: min(560px, calc(100vh - 170px)); padding: 52px 56px; border-radius: 28px; overflow: hidden; transform-origin: 50% 0; transform: scale(calc(1 - var(--r, 0) * .05)); filter: brightness(calc(1 - var(--r, 0) * .12)); transition: transform .1s linear; }
.stc--sh .stc__in { background: radial-gradient(60% 80% at 100% 0%, rgba(18, 89, 124, .6), transparent 70%), var(--blue-900); color: var(--neutral-000); box-shadow: 0 50px 90px -50px rgba(1, 29, 38, .8); }
.stc--ib .stc__in { background: radial-gradient(60% 80% at 100% 0%, rgba(255, 255, 255, .3), transparent 70%), var(--yellow); color: var(--neutral-900); box-shadow: 0 50px 90px -50px rgba(90, 55, 0, .6); }
.stc--cl .stc__in { background: #fff; color: var(--neutral-900); box-shadow: 0 0 0 1px rgba(34, 37, 38, .06), 0 50px 90px -50px rgba(1, 29, 38, .45); }
.stc__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.stc__meta { display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.stc__n { font-variant-numeric: tabular-nums; opacity: .6; }
.stc__frente { padding: 5px 12px; border-radius: 99px; box-shadow: inset 0 0 0 1px currentColor; }
.stc--sh .stc__frente { color: var(--yellow); }
.stc--ib .stc__frente { color: var(--blue-900); }
.stc--cl .stc__frente { color: #C98A12; }
.stc__quem { display: flex; align-items: center; min-height: 34px; margin-top: 10px; font-size: 15px; font-weight: 500; letter-spacing: .02em; }
.stc__quem img { height: 30px; width: auto; }
.stc--sh .stc__quem { color: var(--neutral-200); }
.stc__h { font-weight: 300; font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.stc__p { max-width: 520px; font-size: 16px; line-height: 1.55; opacity: .8; }
.stc__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.stc__tags li { padding: 6px 13px; border-radius: 99px; font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; box-shadow: inset 0 0 0 1px currentColor; opacity: .75; }
.stc__txt .btn { margin-top: auto; }
.stc__num { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; text-align: right; gap: 6px; padding-left: 32px; border-left: 1px solid rgba(249, 250, 250, .14); }
.stc--ib .stc__num { border-left-color: rgba(1, 29, 38, .16); }
.stc--cl .stc__num { border-left-color: rgba(34, 37, 38, .1); }
.stc__de { margin: 0; font-weight: 200; font-size: clamp(60px, 7vw, 104px); line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(249, 250, 250, .45); text-decoration: line-through; text-decoration-color: rgba(244, 182, 63, .7); text-decoration-thickness: 2px; }
.stc__para { margin: 0; font-weight: 200; font-size: clamp(110px, 13vw, 200px); line-height: .9; letter-spacing: -.05em; }
.stc--sh .stc__para { color: var(--yellow); }
.stc--ib .stc__para { color: var(--blue-900); font-size: clamp(88px, 10vw, 156px); }
.stc--cl .stc__para { color: var(--blue-900); font-size: clamp(76px, 8.4vw, 132px); line-height: .92; }
.stc--cl .stc__para br + * , .stc--cl .stc__para { }
.stc__leg { max-width: 260px; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; opacity: .7; }
@media (max-width: 1100px) {
  .stk__in { padding: 72px 24px 72px; }
  .stk__cab { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; }
  .stc { top: calc(80px + var(--i) * 14px); }
  .stc__in { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; min-height: 0; }
  .stc__num { order: -1; align-items: flex-start; text-align: left; padding: 0 0 20px; border-left: 0; border-bottom: 1px solid rgba(249, 250, 250, .14); }
  .stc--ib .stc__num, .stc--cl .stc__num { border-bottom-color: rgba(1, 29, 38, .14); }
  .stc__para { font-size: 92px !important; } .stc__de { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) { .stc__in { transform: none; filter: none; } }
@media (min-width: 1101px) {
  .stk__lista { gap: 0; }
  .stc:not(:last-child) { margin-bottom: 38vh; }
}
.stc__num { justify-content: center; }
.stc--cl .stc__para sup { font-size: .5em; }
.stc--cl .stc__para { font-size: clamp(64px, 6.6vw, 100px); white-space: nowrap; }

/* =====================================================================
   v5.5 | Ajustes do Wagner: amarelo atenuado nos fundos, títulos com mais
   destaque, duas trilhas de entrada lado a lado, "Abrindo o capô"
   ===================================================================== */
:root { --amarelo-suave: #F6D18A; }
/* títulos dos capítulos do Como fazemos com destaque real */
.cap__cab { align-items: baseline; }
.cap__cab .cap__n { font-size: 14px; }
.ai .cap__cab h3 { font-weight: 400; font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -.01em; text-transform: none; color: var(--neutral-900); }
.cap__big--palavra { font-size: clamp(64px, 11vh, 120px); }
.cap--1 .cap__barras b { white-space: nowrap; }

/* ---------- Comece por aqui: duas trilhas ---------- */
.duo { position: relative; z-index: 1; background: var(--neutral-100); color: var(--neutral-900); }
.duo__in { padding: 104px max(40px, calc((100% - 1286px) / 2)) 104px; }
.duo__cab { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px 72px; align-items: end; margin-bottom: 44px; }
.duo__cab > div { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.duo h2 { display: flex; flex-direction: column; font-weight: 300; font-size: clamp(34px, 3.5vw, 50px); line-height: 1.05; color: var(--neutral-900); }
.duo h2 .is-dim { color: var(--neutral-400); }
.duo__lead { font-size: 16px; line-height: 1.5; color: var(--neutral-600); }
.duo__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.trl { display: flex; flex-direction: column; gap: 16px; padding: 40px 40px 36px; border-radius: 28px; }
.trl--a { background: #fff; box-shadow: 0 0 0 1px rgba(34, 37, 38, .06), 0 50px 90px -56px rgba(1, 29, 38, .45); }
.trl--b { background: radial-gradient(60% 80% at 100% 0%, rgba(18, 89, 124, .6), transparent 70%), var(--blue-900); color: var(--neutral-000); box-shadow: 0 50px 90px -50px rgba(1, 29, 38, .8); }
.trl__tag { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--neutral-600); }
.trl--b .trl__tag { color: var(--neutral-300); }
.trl__l { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 13px; letter-spacing: 0; background: var(--blue-900); color: var(--yellow); }
.trl--b .trl__l { background: var(--yellow); color: var(--neutral-900); }
.trl__tit { font-weight: 300; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
.trl__ent { max-width: 520px; font-size: 15px; line-height: 1.55; color: var(--neutral-600); }
.trl--b .trl__ent { color: var(--neutral-300); }
.trl__form { margin-top: auto; padding-top: 8px; }
.trl--a .diag__campo { background: var(--neutral-100); box-shadow: inset 0 0 0 1px rgba(34, 37, 38, .06); }
.trl--a .diag__lead { background: var(--neutral-100); }
.trl--a .diag__lead .campo--claro input { background: #fff; }
/* questionário */
.qz { display: flex; flex-direction: column; gap: 16px; margin-top: auto; padding: 22px; border-radius: 18px; background: rgba(249, 250, 250, .06); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .12); }
.qz__topo { display: flex; align-items: center; gap: 16px; }
.qz__conta { flex: none; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--neutral-300); font-variant-numeric: tabular-nums; }
.qz__conta b { font-weight: 500; color: var(--yellow); }
.qz__prog { flex: 1; height: 2px; border-radius: 2px; background: rgba(249, 250, 250, .14); overflow: hidden; }
.qz__prog i { display: block; height: 100%; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(.2); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.qz__p { margin: 0; padding: 0; border: 0; min-width: 0; min-height: 168px; }
.qz__p[hidden] { display: none; }
.qz__p.is-on { animation: demoEntra .5s cubic-bezier(.2, .7, .2, 1) both; }
.qz__p legend, .qz__lt { display: block; margin-bottom: 14px; padding: 0; font-size: 17px; line-height: 1.3; color: var(--neutral-000); }
.qz__ops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qz__ops label { position: relative; cursor: pointer; }
.qz__ops input { position: absolute; opacity: 0; pointer-events: none; }
.qz__ops span { display: flex; align-items: center; min-height: 48px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.3; color: var(--neutral-100); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .18); transition: background-color .2s, box-shadow .2s, color .2s; }
.qz__ops label:hover span { box-shadow: inset 0 0 0 1px rgba(244, 182, 63, .6); }
.qz__ops input:checked + span { background: var(--yellow); color: var(--neutral-900); box-shadow: none; }
.qz__ops input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }
.qz textarea { width: 100%; padding: 12px 14px; border: 1px solid rgba(249, 250, 250, .18); border-radius: 12px; background: rgba(249, 250, 250, .06); font: inherit; font-size: 14px; line-height: 1.5; color: var(--neutral-000); resize: vertical; }
.qz textarea::placeholder { color: var(--neutral-400); }
.qz textarea:focus { outline: none; border-color: var(--yellow); }
.qz .campo--claro label { color: var(--neutral-300); }
.qz .campo--claro input { background: rgba(249, 250, 250, .08); border-color: rgba(249, 250, 250, .18); color: var(--neutral-000); }
.qz .diag__op { color: var(--neutral-300); }
.qz__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qz__volta { padding: 10px 0; border: 0; background: none; font: inherit; font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-300); cursor: pointer; }
.qz__volta:hover { color: var(--yellow); }
.qz__volta[hidden] { display: none; }
.qz__prox { margin-left: auto; }
.qz .diag__msg { color: var(--neutral-200); }

/* ---------- Abrindo o capô ---------- */
.capo { position: relative; z-index: 1; overflow: hidden; background: radial-gradient(50% 60% at 85% 0%, rgba(18, 89, 124, .5), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(244, 182, 63, .08), transparent 70%), var(--blue-900); color: var(--neutral-100); }
.capo__in { padding: 112px max(40px, calc((100% - 1286px) / 2)) 104px; display: flex; flex-direction: column; gap: 48px; }
.capo__cab { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px 72px; align-items: end; }
.capo__cab > div { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.capo h2 { display: flex; flex-direction: column; font-weight: 300; font-size: clamp(34px, 3.5vw, 50px); line-height: 1.05; color: var(--neutral-000); text-wrap: balance; }
.capo h2 .is-dim { color: var(--neutral-400); }
.capo__lead { font-size: 16px; line-height: 1.55; color: var(--neutral-300); }
.capo__mapa { display: flex; flex-direction: column; gap: 22px; }
.capo__etapas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.capo__etapas button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 14px 4px 12px; border: 0; border-top: 1px solid rgba(249, 250, 250, .16); background: none; font: inherit; text-align: left; color: var(--neutral-500); cursor: pointer; transition: color .3s; }
.capo__etapas button b { font-weight: 400; font-size: 12px; letter-spacing: .65px; }
.capo__etapas button span { font-size: 18px; }
.capo__etapas button:hover { color: var(--neutral-100); }
.capo__etapas button[aria-selected="true"] { color: var(--neutral-000); }
.capo__etapas button[aria-selected="true"] b { color: var(--yellow); }
.capo__etapas button::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(0); }
.capo__etapas button[aria-selected="true"]::before { animation: eqProg 5s linear forwards; }
.capo__mapa.is-pausado .capo__etapas button[aria-selected="true"]::before { animation-play-state: paused; }
.capo__paineis { min-height: 230px; }
.capo__p { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.15fr) 64px minmax(0, .85fr); align-items: stretch; }
.capo__p[hidden] { display: none; }
.capo__no { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px; border-radius: 20px; }
.capo__no--h { background: rgba(249, 250, 250, .06); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .12); }
.capo__no--ia { background: linear-gradient(135deg, rgba(244, 182, 63, .16), rgba(244, 182, 63, .05)); box-shadow: inset 0 0 0 1px rgba(244, 182, 63, .4); }
.capo__no--e { background: var(--neutral-000); color: var(--neutral-900); justify-content: center; }
.capo__rot { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--neutral-300); }
.capo__rot i { width: 8px; height: 8px; border-radius: 50%; background: var(--neutral-000); }
.capo__no--ia .capo__rot { color: var(--yellow); }
.capo__no--ia .capo__rot i { background: var(--yellow); box-shadow: 0 0 0 4px rgba(244, 182, 63, .25); }
.capo__no--e .capo__rot { color: var(--neutral-600); }
.capo__no--e .capo__rot i { background: var(--blue-900); }
.capo__no b { font-weight: 400; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; }
.capo__no--h b { color: var(--neutral-000); }
.capo__no p:not(.capo__rot) { font-size: 14.5px; line-height: 1.5; color: var(--neutral-300); }
.capo__no ul { display: flex; flex-direction: column; gap: 10px; }
.capo__no li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.4; color: var(--neutral-100); }
.capo__no li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 2px; background: var(--yellow); }
.capo__fio { position: relative; align-self: center; height: 2px; margin: 0 10px; background: rgba(249, 250, 250, .14); overflow: hidden; }
.capo__fio i { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--yellow), transparent); animation: fio 1.8s linear infinite; }
@keyframes fio { to { left: 100%; } }
.capo__p.is-on .capo__no { animation: demoEntra .6s cubic-bezier(.2, .7, .2, 1) both; }
.capo__p.is-on .capo__no--ia { animation-delay: .15s; } .capo__p.is-on .capo__no--e { animation-delay: .3s; }
.capo__base { padding-top: 34px; border-top: 1px solid rgba(249, 250, 250, .12); }
.capo__base-rot { margin-bottom: 20px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--neutral-400); }
.capo__base ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.capo__base li { display: flex; flex-direction: column; gap: 8px; }
.capo__base b { font-weight: 500; font-size: 16px; color: var(--neutral-000); }
.capo__base span { font-size: 14px; line-height: 1.5; color: var(--neutral-300); }
.mqs { position: relative; z-index: 1; background: #fff; }
.mqs .mq { position: relative; top: auto; margin: 0; padding: 30px 0; background: #fff; -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) { .capo__fio i { animation: none; } }
@media (max-width: 1100px) {
  .duo__in, .capo__in { padding: 72px 24px; }
  .duo__cab, .capo__cab { grid-template-columns: 1fr; gap: 20px; }
  .duo__grade { grid-template-columns: 1fr; }
  .trl { padding: 28px 22px; }
  .capo__etapas { grid-template-columns: repeat(3, 1fr); }
  .capo__p { grid-template-columns: 1fr; gap: 0; }
  .capo__fio { justify-self: center; width: 2px; height: 22px; margin: 0; }
  .capo__fio i { display: none; }
  .capo__base ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .qz__ops { grid-template-columns: 1fr; } .diag__linha { grid-template-columns: 1fr; } .capo__base ul { grid-template-columns: 1fr; } .capo__etapas button span { font-size: 15px; } }
.trl__form { margin-top: 6px; padding-top: 0; }
.prv { margin-top: auto; padding: 18px 20px; border-radius: 16px; background: var(--neutral-100); }
.prv__cab { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 12px; color: var(--neutral-500); }
.prv__cab b { font-weight: 500; letter-spacing: .6px; text-transform: uppercase; color: var(--neutral-800); }
.prv__lista { display: flex; flex-direction: column; gap: 8px; }
.prv__lista li { display: grid; grid-template-columns: 96px 1fr 28px; align-items: center; gap: 12px; font-size: 13px; color: var(--neutral-700); }
.prv__lista i { height: 6px; border-radius: 6px; background: rgba(34, 37, 38, .08); overflow: hidden; }
.prv__lista u { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 6px; background: var(--blue-900); transform-origin: 0 50%; }
.prv__lista em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--neutral-900); }
.prv__lista li.is-alerta u { background: #D9534F; }
.prv__lista li.is-alerta em { color: #C0392B; }
.prv__nota { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(34, 37, 38, .1); font-size: 13.5px; line-height: 1.45; color: var(--neutral-700); }
.prv__nota b { font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--neutral-500); }
.prv.is-visto .prv__lista u { animation: crescer 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.barra__agora { width: max(118px, calc(100% * (1 - .94 * var(--e)))); }
@media (max-width: 1100px) { .cap--1 .cap__big--palavra { font-size: clamp(48px, 16vw, 96px); white-space: nowrap; } }

/* =====================================================================
   v5.6 | Comece por aqui revisto (agente de análise, esboço da solução,
   caminhos secundários); Por dentro da Pocket com entrega translúcida
   ===================================================================== */
.duo__grade { align-items: start; }
.trl { min-height: 640px; }
.trl__tit { font-size: clamp(26px, 2.3vw, 32px); }
/* A: o formulário da etapa 2 ocupa o lugar da prévia */
.trl--a .trl__form { margin-top: 4px; }
.trl--a.is-etapa2 .prv { display: none; }
.trl--a .diag__lead { margin-top: 14px; background: var(--neutral-100); box-shadow: none; }
.diag__lead-tit { display: flex; align-items: center; gap: 10px; }
.diag__ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: var(--neutral-900); flex: none; }
.diag__ok svg { width: 15px; height: 15px; }
/* prévia: análises, não números */
.prv { margin-top: 18px; padding: 20px 22px 8px; border-radius: 18px; background: var(--neutral-100); }
.prv__cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; font-size: 12px; color: var(--neutral-500); }
.prv__ag { display: flex; align-items: center; gap: 10px; font-weight: 500; letter-spacing: .4px; color: var(--neutral-800); }
.prv__ag .demo__vivo { width: 7px; height: 7px; }
.prv__lista { display: flex; flex-direction: column; counter-reset: pv; }
.prv__lista li { position: relative; padding: 14px 0 14px 40px; border-top: 1px solid rgba(34, 37, 38, .08); counter-increment: pv; }
.prv__lista li:first-child { border-top: 0; }
.prv__lista li::before { content: "0" counter(pv); position: absolute; left: 0; top: 15px; font-size: 12px; letter-spacing: .6px; color: #C98A12; }
.prv__lista b { display: block; margin-bottom: 4px; font-weight: 500; font-size: 15px; color: var(--neutral-900); }
.prv__lista p { font-size: 14px; line-height: 1.5; color: var(--neutral-700); }
.prv__lista li, .prv__lista li::before { animation: none; }
.prv.is-visto .prv__lista li { animation: demoEntra .7s cubic-bezier(.2, .7, .2, 1) both; }
.prv.is-visto .prv__lista li:nth-child(2) { animation-delay: .25s; } .prv.is-visto .prv__lista li:nth-child(3) { animation-delay: .5s; }
/* B: camadas do esboço + questionário que entra no lugar delas */
.trl__camadas { display: flex; flex-direction: column; margin-top: 4px; }
.trl__camadas li { display: flex; gap: 18px; padding: 16px 0; border-top: 1px solid rgba(249, 250, 250, .12); }
.trl__camadas li:last-child { border-bottom: 1px solid rgba(249, 250, 250, .12); }
.trl__camadas b { flex: none; width: 26px; font-weight: 400; font-size: 13px; letter-spacing: .6px; color: var(--yellow); padding-top: 2px; }
.trl__camadas span { display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; line-height: 1.45; color: var(--neutral-300); }
.trl__camadas strong { font-weight: 400; font-size: 19px; color: var(--neutral-000); }
.trl__abre { margin-top: auto; align-self: flex-start; }
.trl--b.is-qz .trl__camadas, .trl--b.is-qz .trl__abre { display: none; }
.trl--b .qz { margin-top: 6px; }
.qz[hidden] { display: none; }
.qz__p { min-height: 210px; display: flex; flex-direction: column; gap: 14px; }
.qz__p[hidden] { display: none; }
.qz__lt { margin-bottom: 0; }
.qz__dica { margin-top: -6px; font-size: 13.5px; line-height: 1.45; color: var(--neutral-400); }
.qz__mini { margin: 0; padding: 0; border: 0; min-width: 0; }
.qz__mini legend { padding: 0; margin-bottom: 10px; font-size: 14px; color: var(--neutral-200); }
.qz__mini legend.qz__lt { font-size: 17px; color: var(--neutral-000); }
.qz__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qz__chips label { position: relative; cursor: pointer; }
.qz__chips input { position: absolute; opacity: 0; pointer-events: none; }
.qz__chips span { display: inline-flex; align-items: center; padding: 9px 15px; border-radius: 99px; font-size: 13.5px; color: var(--neutral-100); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .22); transition: background-color .2s, box-shadow .2s, color .2s; }
.qz__chips label:hover span { box-shadow: inset 0 0 0 1px rgba(244, 182, 63, .7); }
.qz__chips input:checked + span { background: var(--yellow); color: var(--neutral-900); box-shadow: none; }
.qz__chips input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }
.qz .diag__op { margin-top: 6px; }
.qz .campo--claro input { height: 46px; font-size: 14px; }
/* caminhos secundários */
.duo__outros { display: grid; grid-template-columns: minmax(160px, auto) 1fr; align-items: center; gap: 16px 32px; margin-top: 32px; padding-top: 26px; border-top: 1px solid rgba(34, 37, 38, .12); }
.duo__outros-rot { font-size: 13px; letter-spacing: .65px; text-transform: uppercase; color: var(--neutral-600); }
.duo__outros ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.duo__outros a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(34, 37, 38, .08); color: var(--neutral-900); transition: background-color .25s, box-shadow .25s; }
.duo__outros a:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(1, 29, 38, .25); }
.duo__o-t { font-weight: 500; font-size: 15px; }
.duo__o-d { grid-row: 2; font-size: 13px; color: var(--neutral-600); }
.duo__outros .ico-arrow { grid-row: 1 / 3; grid-column: 2; color: var(--neutral-500); transition: transform .2s, color .2s; }
.duo__outros a:hover .ico-arrow { transform: translateX(3px); color: var(--blue-900); }
.duo__o--ib a { box-shadow: inset 0 0 0 1px rgba(201, 138, 18, .35); }
.duo__o--ib .duo__o-t::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--yellow); vertical-align: 1px; }

/* Por dentro da Pocket: entrega translúcida */
.capo__no--e { background: linear-gradient(150deg, rgba(249, 250, 250, .16), rgba(249, 250, 250, .06)); color: var(--neutral-000); box-shadow: inset 0 0 0 1px rgba(249, 250, 250, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.capo__no--e .capo__rot { color: var(--yellow); }
.capo__no--e .capo__rot svg { width: 14px; height: 14px; color: var(--yellow); }
.capo__no--e b { color: var(--neutral-000); }
.capo__p { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1.1fr) 56px minmax(0, .95fr); }

@media (max-width: 1100px) {
  .trl { min-height: 0; }
  .duo__outros { grid-template-columns: 1fr; }
  .duo__outros ul { grid-template-columns: 1fr; }
}
.prv__lista li { display: block; grid-template-columns: none; }

/* =====================================================================
   v5.7 | Submenu de Inbound em azul; Comece por aqui equilibrado;
   Como fazemos em azul; Por dentro da Pocket Lab refinado
   ===================================================================== */
/* submenu Inbound: mesmo azul do Software house, com detalhe amarelo */
.mm--ib { background: radial-gradient(70% 90% at 100% 0%, rgba(18, 89, 124, .55), rgba(18, 89, 124, 0) 70%), #02202B; color: var(--neutral-100); box-shadow: 0 40px 90px -30px rgba(1, 29, 38, .85), inset 0 0 0 1px rgba(249, 250, 250, .1), inset 0 3px 0 var(--yellow); }
.mm--ib .mm__rot .chip__dot { background: var(--yellow); }
.mm--ib .mm__rot { color: var(--yellow); opacity: 1; }
.topo .topo__nav .mm--ib .mm__item.is-on { background: rgba(249, 250, 250, .09); box-shadow: none; }
.mm--ib .mm__item.is-on .mm__n { color: var(--yellow); }
.mm--ib .sol__ia, .mm--ib .mm__p .sol__ia { background: var(--yellow); color: var(--neutral-900); }
.mm--ib .mm__prev { background: rgba(244, 182, 63, .06) !important; box-shadow: inset 0 0 0 1px rgba(244, 182, 63, .25) !important; }
.mm--ib .mm__pe { border-top-color: rgba(249, 250, 250, .12); }
.mm--ib .mm__stat b { color: var(--yellow); }
.topo--claro .topo__nav .mm .btn--amarelo .btn__label { color: var(--neutral-900); }

/* Comece por aqui */
.duo__grade { align-items: stretch; }
.trl { min-height: 0; }
.trl mark { padding: 0 .06em; background: linear-gradient(transparent 62%, rgba(244, 182, 63, .55) 62%, rgba(244, 182, 63, .55) 92%, transparent 92%); color: inherit; }
.trl--b mark { background: none; color: var(--yellow); }
.trl__ent strong { font-weight: 500; color: var(--neutral-900); }
.trl--b .trl__ent strong { color: var(--neutral-000); }
.trl--b .trl__abre { margin-top: auto; }
.trl--b .trl__camadas li { padding: 20px 0; }
.prv { margin-top: auto; padding: 18px 22px 6px; }
.prv__lista li { padding: 14px 0; }
.prv__lista li::before { content: none; }
.prv__l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.prv__l b { margin: 0; font-weight: 500; font-size: 15px; color: var(--neutral-900); }
.prv__l em { font-style: normal; font-weight: 300; font-size: 26px; line-height: 1; letter-spacing: -.02em; color: var(--blue-900); font-variant-numeric: tabular-nums; }
.prv__l em::after { content: "/100"; margin-left: 3px; font-size: 12px; letter-spacing: 0; color: var(--neutral-500); }
.prv__b { display: block; height: 5px; margin-bottom: 10px; border-radius: 5px; background: rgba(34, 37, 38, .08); overflow: hidden; }
.prv__b u { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 5px; background: var(--blue-900); transform-origin: 0 50%; }
.prv__lista li.is-alerta .prv__b u { background: #D9534F; }
.prv__lista li.is-alerta .prv__l em { color: #C0392B; }
.prv.is-visto .prv__b u { animation: crescer 1.4s .2s cubic-bezier(.2, .7, .2, 1) both; }
.prv__lista li > p:last-child { font-size: 13.5px; line-height: 1.5; color: var(--neutral-700); }
/* caminhos secundários com mais presença */
.duo__outros { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; padding-top: 32px; }
.duo__outros-rot { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; text-transform: none; letter-spacing: 0; }
.duo__outros-rot b { font-weight: 300; font-size: 26px; letter-spacing: -.01em; color: var(--neutral-900); }
.duo__outros-rot span { font-size: 15px; color: var(--neutral-600); }
.duo__outros ul { gap: 16px; }
.duo__outros a { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 16px; padding: 22px 22px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 37, 38, .06), 0 30px 60px -44px rgba(1, 29, 38, .45); }
.duo__outros a:hover { box-shadow: 0 0 0 1px rgba(1, 29, 38, .2), 0 30px 60px -40px rgba(1, 29, 38, .5); }
.duo__o-i { grid-row: 1 / 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--blue-900); color: var(--neutral-000); }
.duo__o--ib .duo__o-i { background: var(--yellow); color: var(--neutral-900); }
.duo__o-t { grid-column: 2; font-size: 17px; }
.duo__o-d { grid-column: 2; font-size: 13.5px; }
.duo__outros .ico-arrow { grid-column: 3; }
.duo__o--ib a { box-shadow: 0 0 0 1px rgba(201, 138, 18, .35), 0 30px 60px -44px rgba(1, 29, 38, .45); }
.duo__o--ib .duo__o-t::before { content: none; }

/* Como fazemos em azul (cartões continuam claros) */
.ai--azul { background: var(--blue-900); }
.ai--azul .ai__stage { background: radial-gradient(55% 60% at 85% 10%, rgba(18, 89, 124, .55), transparent 70%), radial-gradient(40% 50% at 5% 100%, rgba(244, 182, 63, .08), transparent 70%), var(--blue-900); }
.ai--azul .ai__stage::before { content: none; }
.ai--azul h2 { color: var(--neutral-000); }
.ai--azul h2 .is-dim { color: var(--neutral-400); }
.ai--azul .ai__lead, .ai--azul .ai__rodape { color: var(--neutral-300); }
.ai--azul .ai__chip { border-inline-color: rgba(249, 250, 250, .3); }
.ai--azul .ai__chip .chip__text { color: var(--neutral-200); }
.ai--azul .ai__trilho li { border-top-color: rgba(249, 250, 250, .16); }
.ai--azul .ai__trilho button { color: var(--neutral-500); }
.ai--azul .ai__trilho li.is-ativo button, .ai--azul .ai__trilho button:hover { color: var(--neutral-000); }
.ai--azul .ai__trilho li.is-ativo b { color: var(--yellow); }
.ai--azul .cap { box-shadow: 0 0 0 1px rgba(249, 250, 250, .08), 0 50px 90px -40px rgba(0, 0, 0, .7); }

/* Por dentro da Pocket Lab: o que você ganha em branco translúcido, com número vazado */
.capo__no--e { position: relative; overflow: hidden; justify-content: flex-end; gap: 8px; background: rgba(249, 250, 250, .9); color: var(--neutral-900); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.capo__no--e .capo__rot { position: relative; color: #9A6A0C; }
.capo__no--e .capo__rot svg { color: #C98A12; }
.capo__no--e b { position: relative; font-weight: 400; font-size: 24px; line-height: 1.12; color: var(--neutral-900); }
.capo__no--e p:not(.capo__rot) { position: relative; font-size: 14.5px; line-height: 1.5; color: var(--neutral-700); }
.capo__num { position: absolute; top: -26px; right: 8px; font-weight: 200; font-size: 140px; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(1, 29, 38, .14); pointer-events: none; }
.capo__p.is-on .capo__num { animation: mmNum .8s cubic-bezier(.2, .7, .2, 1) both; }
.capo__etapas button[aria-selected="true"]::before { animation-duration: 10s; }
@media (max-width: 1100px) { .duo__outros ul { grid-template-columns: 1fr; } }
.trl--b:not(.is-qz) .trl__camadas { flex: 1; justify-content: space-evenly; }
.trl--b:not(.is-qz) .trl__camadas li { padding: 22px 0; }
.trl--b .trl__camadas strong { font-size: 21px; }
.capo__no--e { background: rgba(249, 250, 250, .95); }
.capo__num { font-size: 120px; top: -20px; -webkit-text-stroke-color: rgba(1, 29, 38, .12); }

/* v5.8 | ajustes finos */
.trl mark, .trl--b mark { padding: 0; background: none; color: inherit; font-weight: 500; }
.trl__tit { color: var(--neutral-600); }
.trl--a .trl__tit mark { color: var(--neutral-900); }
.trl--b .trl__tit { color: var(--neutral-300); }
.trl--b .trl__tit mark { color: var(--neutral-000); }
/* B: camadas centralizadas, espaçamento uniforme */
.trl--b:not(.is-qz) .trl__camadas { flex: 1; justify-content: center; }
.trl--b:not(.is-qz) .trl__camadas li { padding: 20px 0; }
/* Por dentro: "o que você ganha" centralizado na altura */
.capo__no--e { justify-content: center; }
/* caminhos secundários como ações */
.duo__outros ul { align-items: stretch; }
.duo__oc { display: flex !important; flex-direction: column; align-items: flex-start; gap: 12px; height: 100%; padding: 24px !important; }
.duo__o-top { display: flex; align-items: center; gap: 14px; }
.duo__o-i { grid-row: auto; flex: none; }
.duo__o-t { font-size: 18px; }
.duo__o-d { font-size: 14px; line-height: 1.5; }
.duo__o-btn { margin-top: auto; }
.duo__oc:hover .btn__label, .duo__oc:hover .btn__arrow { filter: brightness(1.12); }
.duo__oc .ico-arrow { grid-column: auto; grid-row: auto; color: inherit; }
.duo__oc:hover .ico-arrow { transform: none; color: inherit; }
.duo__outros a.duo__oc { align-items: flex-start; justify-items: start; text-align: left; }
.duo__oc .duo__o-top, .duo__oc .duo__o-d { align-self: stretch; }
.duo__o-btn { margin-top: 10px; }

/* v5.8.1: evita estouro das trilhas no mobile */
.duo__grade { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.trl, .trl > * { min-width: 0; }
@media (max-width: 1100px) { .duo__grade { grid-template-columns: minmax(0,1fr); } }

/* v8.8.2: Ferramentas no menu principal (seis itens) */
@media (min-width: 1101px) {
  .topo__nav { gap: 24px; }
  .topo__nav ul.menu { gap: 22px; }
  .topo__nav ul.menu > li > a { letter-spacing: .4px; }
}
@media (min-width: 1101px) and (max-width: 1340px) {
  .topo__nav { gap: 16px; }
  .topo__nav ul.menu { gap: 14px; }
  .topo__nav ul.menu > li > a { font-size: 12px; letter-spacing: .2px; }
  .topo__nav .btn__label { font-size: 12px; }
}
@media (min-width: 1101px) and (max-width: 1150px) {
  .topo__nav > .btn .btn__label { display: none; }
  .topo__nav > .btn { gap: 0; }
}