:root {
  --red: #EE2105;
  --magenta: #A20C73;
  --violet: #3D02B6;
  --gradient: linear-gradient(90deg, var(--red) 0%, var(--magenta) 50%, var(--violet) 100%);

  /* tema claro — o mesmo gradiente da AZO, mas o fundo virou luz, não breu.
     Creme morno em vez de branco: o branco puro deixava tudo com cara de
     documento. */
  --bg: #F7F2EC;
  --bg-alt: #EFE8DF;
  --surface: #FFFFFF;
  --ink: #15121C;
  --ink-secondary: #5B5762;
  --ink-tertiary: #918D99;
  --line: #E6E2DC;
  --link: var(--magenta);

  --font-body: 'Inter', Arial, sans-serif;
  --font-display: 'Sora', Arial, sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;

  --radius: 10px;
  --ease: cubic-bezier(.16,.84,.3,1);
  --pad: var(--space-3);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

body { position: relative; overflow-x: hidden; }

a { color: var(--link); text-decoration: none; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-3); }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  max-width: 1180px; margin: 0 auto;
  background: rgba(250, 249, 247, .82);
  backdrop-filter: blur(10px);
}
.site-header img { height: 26px; width: auto; display: block; }

.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 20px;
  padding: 12px 22px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover { border-color: var(--violet); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(21,18,28,.06); }
.btn-primary { background: var(--gradient); border: none; color: #fff; }
.btn-primary:hover { box-shadow: 0 10px 24px rgba(162,12,115,.24); }

/* =====================================================================
   herói — sem trava de rolagem. Entrada em cascata e o colar de telas
   dos projetos, levemente girado, como referência real do trabalho.
   ===================================================================== */
.hero {
  position: relative;
  padding: clamp(64px, 11vh, 120px) var(--space-3) clamp(80px, 12vh, 140px);
  max-width: 1180px; margin: 0 auto;
  overflow: visible;
}
.hero-eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 18px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-secondary);
  margin: 0 0 var(--space-3); display: flex; align-items: center; gap: 10px;
}
.hero-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--magenta); opacity: .7; }

.hero-title {
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(42px, 6.6vw, 92px); line-height: .98; letter-spacing: -.028em;
  margin: 0 0 var(--space-4); color: var(--ink);
}
.hero-title .grad, .servico-n, .case__tag {
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* lanterna: o gradiente só aparece nas letras por baixo do cursor */
.spot-glow {
  position: absolute; inset: 0; display: block; pointer-events: none;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-mask-image: radial-gradient(130px 130px at var(--sx, -999px) var(--sy, -999px), #000 0%, transparent 78%);
  mask-image: radial-gradient(130px 130px at var(--sx, -999px) var(--sy, -999px), #000 0%, transparent 78%);
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) { .spot-glow { display: none; } }

.hero-sub {
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-secondary);
  max-width: 46ch; margin: 0 0 var(--space-6);
}
.hero-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

/* =====================================================================
   A DOBRA QUE CONVERGE
   As figuras nascem espalhadas pelas bordas e viajam até o centro
   conforme a rolagem; quando chegam, o celular nasce no lugar delas.

   Três números vêm do capa.js e tudo aqui é função deles:
     --k   1 → 0   o quanto as figuras ainda estão afastadas
     --fo  1 → 0   a opacidade delas (somem ao encostar no meio)
     --tk  1 → 0   o texto, que sai antes
     --fk  0 → 1   o celular nascendo
   Sem JS nada disso existe: a seção vira uma tela normal só com o texto.
   ===================================================================== */
/* a dobra é a única seção de ponta a ponta: as figuras precisam das bordas
   da janela, não da coluna de 1180px que o resto do site usa */
.capa { position: relative; max-width: none; margin: 0; padding: 0; }
.capa__palco {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: clamp(560px, 86vh, 900px);
  padding: clamp(80px, 12vh, 140px) var(--space-3);
  overflow: hidden;
}

.capa__texto { position: relative; z-index: 2; text-align: center; max-width: 940px; margin: 0 auto; }
.capa__texto .hero-eyebrow { justify-content: center; }
.capa__texto .hero-sub { margin-left: auto; margin-right: auto; }
.capa__texto .hero-actions { justify-content: center; }

.figuras { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.figura {
  position: absolute; left: 50%; top: 50%;
  width: var(--w, 200px);
  border-radius: 14px; overflow: hidden;
  background: var(--surface); border: 1px solid rgba(21,18,28,.10);
  box-shadow: 0 30px 50px -22px rgba(21,18,28,.30);
  opacity: var(--fo, 1);
  transform:
    translate(-50%, -50%)
    translate(calc(var(--x, 0vw) * var(--k, 1)), calc(var(--y, 0vh) * var(--k, 1)))
    rotate(calc(var(--r, 0deg) * var(--k, 1)))
    scale(calc(.34 + .66 * var(--k, 1)));
}
.figura img { display: block; width: 100%; height: auto; }
.figura--marca { display: flex; align-items: center; justify-content: center; padding: 22px; aspect-ratio: 1 / 1; }
.figura--marca img { width: 74%; }

.f1 { --x: -37vw; --y: -19vh; --r: -8deg; --w: clamp(150px, 19vw, 320px); }
.f2 { --x:  37vw; --y: -24vh; --r:  7deg; --w: clamp(140px, 17vw, 290px); }
.f3 { --x: -32vw; --y:  25vh; --r:  6deg; --w: clamp(130px, 16vw, 270px); }
.f4 { --x:  34vw; --y:  22vh; --r: -6deg; --w: clamp(140px, 18vw, 295px); }
.f5 { --x:  19vw; --y: -34vh; --r:  5deg; --w: clamp(84px, 9vw, 140px); }

/* O celular sobe de baixo enquanto as figuras chegam ao meio.
   --fv acende antes de --fk terminar: ele aparece já subindo, em vez de
   materializar parado no centro. */
.capa__fone {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  opacity: var(--fv, 0); pointer-events: none;
  transform:
    translate(-50%, -50%)
    translateY(calc((1 - var(--fk, 0)) * 52vh))
    scale(calc(.9 + .1 * var(--fk, 0)));
}
.capa__fone .fone { width: clamp(200px, 20vw, 270px); }
/* a tela de prova: o número grande e os clientes entrando um a um */
.fone__prova { flex: 1; padding: 16px 13px; display: flex; flex-direction: column; overflow: hidden; }
.fone__numero {
  font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1;
  letter-spacing: -.03em; margin: 2px 0 2px;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: var(--c1, 0); transform: translateY(calc((1 - var(--c1, 0)) * 14px));
}
.fone__legenda {
  font-size: 11.5px; line-height: 1.3; color: var(--ink-secondary); margin: 0 0 14px;
  opacity: var(--c1, 0); transform: translateY(calc((1 - var(--c1, 0)) * 14px));
}
/* O feed: a lista inteira de clientes rola dentro da tela conforme a
   página rola. A máscara no pé dissolve quem está entrando, para o nome
   não nascer cortado na borda do celular. O capa.js mede o quanto ela
   precisa andar e escreve em --feed. */
.fone__feed {
  flex: 1; overflow: hidden; position: relative;
  opacity: var(--c2, 0);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 80%, transparent 100%);
}
.fone__lista {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px;
  transform: translateY(var(--feed, 0px));
}
.fone__lista li {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 8px 9px;
  flex: none;
}
.fone__lista li::before {
  content: ''; width: 13px; height: 13px; border-radius: 50%; flex: none; background: var(--gradient);
}

.capa__role {
  position: absolute; left: 50%; translate: -50% 0; bottom: clamp(18px, 4vh, 36px); z-index: 4;
  font-family: var(--font-body); font-weight: 600; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-tertiary);
  pointer-events: none; opacity: calc(1 - var(--fim, 0)); transition: opacity .4s var(--ease);
  display: none;
}
.capa__role i {
  display: block; width: 1px; height: 24px; margin: 8px auto 0; background: var(--gradient);
  animation: capaRole 2.6s var(--ease) infinite;
}
@keyframes capaRole {
  0% { transform: scaleY(.2); transform-origin: top; opacity: 0; }
  36% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* sem JS as figuras e o celular não existem: sobra a dobra de texto, inteira */
.capa:not(.capa--ligada) .figuras,
.capa:not(.capa--ligada) .capa__fone { display: none; }
/* mais alta desde que o feed de clientes entrou: são mais de cinquenta
   nomes desfilando, e num percurso curto eles passariam voando */
.capa--ligada { height: 360vh; }
.capa--ligada .capa__palco {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  min-height: 0; padding-block: 0;
}
.capa--ligada .capa__role { display: block; }
.capa--ligada .capa__texto {
  opacity: var(--tk, 1);
  transform: translateY(calc((1 - var(--tk, 1)) * -34px)) scale(calc(.96 + .04 * var(--tk, 1)));
}

@media (max-width: 900px) {
  /* Em tela estreita não existe folga lateral: a coluna de texto ocupa a
     largura toda, então as figuras SEMPRE cruzam com ela na horizontal. A
     separação tem que ser vertical — elas ficam acima do chapéu e abaixo
     dos botões, e menores. Era isso que deixava o texto ilegível em cima
     das fotos escuras. */
  .f1 { --x: -33vw; --y: -34vh; --w: clamp(96px, 25vw, 136px); }
  .f2 { --x:  33vw; --y: -30vh; --w: clamp(92px, 23vw, 128px); }
  .f3 { --x: -32vw; --y:  38vh; --w: clamp(90px, 22vw, 124px); }
  .f4 { --x:  32vw; --y:  35vh; --w: clamp(92px, 23vw, 128px); }
  .f5 { display: none; }
  .capa--ligada { height: 330vh; }
  .capa__fone .fone { width: clamp(168px, 46vw, 210px); }
}

/* =====================================================================
   entradas em cascata
   ===================================================================== */
.temjs .rise { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.temjs .in .rise, .temjs .in.rise { opacity: 1; transform: none; }
.temjs .in .rise:nth-child(1) { transition-delay: 0s; }
.temjs .in .rise:nth-child(2) { transition-delay: .08s; }
.temjs .in .rise:nth-child(3) { transition-delay: .16s; }
.temjs .in .rise:nth-child(4) { transition-delay: .24s; }
.temjs .in .rise:nth-child(5) { transition-delay: .32s; }
.temjs .in .rise:nth-child(6) { transition-delay: .40s; }
.temjs .in .rise:nth-child(7) { transition-delay: .46s; }
.temjs .in .rise:nth-child(8) { transition-delay: .52s; }
.temjs .in .rise:nth-child(9) { transition-delay: .58s; }
.temjs .in .rise:nth-child(10) { transition-delay: .63s; }
.temjs .in .rise:nth-child(11) { transition-delay: .68s; }
.temjs .in .rise:nth-child(12) { transition-delay: .73s; }

.keyline { display: block; width: 100%; height: 1px; overflow: visible; margin: 0; }
.keyline path {
  fill: none; stroke: url(#azo-grad); stroke-width: 1.4; opacity: .55;
  stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 1.7s var(--ease);
}
.keyline.in path { stroke-dashoffset: 0; }

main { position: relative; z-index: 2; }
section { padding: clamp(74px, 11vh, 130px) var(--space-3); position: relative; max-width: 1180px; margin: 0 auto; }
.eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-secondary);
  margin: 0 0 var(--space-2); display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--magenta); opacity: .7; flex: none; }
h2 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.04;
  font-size: clamp(32px, 4.6vw, 58px); margin: 0 0 var(--space-3); max-width: 17ch; color: var(--ink);
}
h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.25; margin: 0 0 10px; color: var(--ink); }
p { margin: 0 0 1em; max-width: 62ch; }
.lede { font-size: clamp(16px, 1.2vw, 19px); color: var(--ink-secondary); max-width: 56ch; }

/* ---- serviços ---- */
.servicos__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: var(--space-6); border-radius: var(--radius); overflow: hidden;
}
.servico { position: relative; overflow: hidden; background: var(--surface); padding: var(--space-4) var(--space-3); }
.servico::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(240px 240px at var(--sx, 50%) var(--sy, 50%),
    rgba(238, 33, 5, .07), rgba(61, 2, 182, .06) 55%, transparent 75%);
  transition: opacity .35s ease;
}
.servico:hover::before { opacity: 1; }
.servico > * { position: relative; z-index: 1; }
.servico-n {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, 3.6vw, 54px); line-height: .9; letter-spacing: -.04em;
  margin: 0 0 var(--space-3);
  /* Um "01" é estreito demais para caber o gradiente inteiro: sozinho ele sai
     todo vermelho. Esticando o fundo e deslocando um pouco em cada card, os
     quatro números juntos percorrem a paleta da marca. */
  background-size: 420% 100%;
}
.servico:nth-child(1) .servico-n { background-position:   0% 0; }
.servico:nth-child(2) .servico-n { background-position:  33% 0; }
.servico:nth-child(3) .servico-n { background-position:  66% 0; }
.servico:nth-child(4) .servico-n { background-position: 100% 0; }
.servico p { color: var(--ink-secondary); font-size: 15px; line-height: 23px; margin: 0; }

/* ---- sistema (mostruário fixo) ---- */
.sistema__wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-8); margin-top: var(--space-8); align-items: start; }
/* o vão entre as etapas é o que dá a cada uma o seu momento na rolagem */
.sistema__lista { display: flex; flex-direction: column; gap: clamp(90px, 26vh, 220px); padding-block: clamp(40px, 14vh, 120px); }
.sistema__item {
  padding-left: var(--space-3); border-left: 2px solid var(--line);
  opacity: .4; transition: opacity .35s var(--ease), border-color .35s var(--ease);
}
.sistema__item.on { opacity: 1; border-color: var(--magenta); }
.sistema__item dt {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 6px;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sistema__item h3 { margin: 0 0 8px; }
.sistema__item p { color: var(--ink-secondary); font-size: 14.5px; line-height: 22px; max-width: 40ch; }

/* o celular preso na tela: a cena troca e os cartões entram de baixo,
   um atrás do outro, como se o app estivesse recebendo na hora */
/* align-items: flex-start é obrigatório: no stretch padrão o celular estica
   até a altura do container e a proporção 9/18.5 é ignorada — ele vira uma
   pílula achatada. */
.sistema__painel { position: sticky; top: 88px; display: flex; justify-content: center; align-items: flex-start; }
.fone {
  position: relative; flex: none; width: min(280px, 100%); aspect-ratio: 9 / 18.5;
  background: #15121C; border-radius: 40px; padding: 10px;
  box-shadow: 0 44px 70px -34px rgba(21,18,28,.55), 0 0 0 1px rgba(21,18,28,.10);
}
.fone__ilha {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 72px; height: 19px; background: #15121C; border-radius: 12px; z-index: 4;
}
.fone__tela {
  position: relative; height: 100%; background: var(--bg-alt);
  border-radius: 31px; overflow: hidden; display: flex; flex-direction: column;
}
.fone__topo {
  padding: 30px 14px 10px; display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.fone__topo img { height: 13px; width: auto; display: block; }
.fone__etapa {
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fone__palco { position: relative; flex: 1; }
/* sem JS só a primeira cena existe, e ela nasce montada — o celular nunca
   aparece vazio esperando script. Com JS, o sistema.js acende uma por vez. */
.fone__cena {
  position: absolute; inset: 0; padding: 14px; display: flex; flex-direction: column; gap: 9px;
  pointer-events: none; transition: opacity .35s var(--ease);
}
.fone__cena:not([data-cena="0"]) { display: none; }
.temjs .fone__cena:not([data-cena="0"]) { display: flex; }
.temjs .fone__cena { opacity: 0; }
.temjs .fone__cena.on { opacity: 1; }
.fone__nota {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-tertiary); margin: 0 0 2px;
}
.cartao {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px;
  box-shadow: 0 8px 16px -10px rgba(21,18,28,.20);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.temjs .cartao { opacity: 0; transform: translateY(18px) scale(.96); }
.temjs .fone__cena.on .cartao { opacity: 1; transform: none; }
.temjs .fone__cena.on .cartao:nth-of-type(1) { transition-delay: .06s; }
.temjs .fone__cena.on .cartao:nth-of-type(2) { transition-delay: .17s; }
.temjs .fone__cena.on .cartao:nth-of-type(3) { transition-delay: .28s; }
.cartao b { display: block; font-family: var(--font-display); font-size: 13px; line-height: 1.2; margin-bottom: 3px; color: var(--ink); }
.cartao span { display: block; color: var(--ink-secondary); font-size: 11.5px; line-height: 1.4; }
.cartao--ok { border-color: var(--magenta); }
.temjs .fone__cena.on .cartao--apagado { opacity: .62; }
/* a barra de etapas no pé do celular: preenche a tela e mostra onde o lead
   está sem precisar de número inventado */
.fone__rodape {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  padding: 9px 7px 13px; background: var(--surface); border-top: 1px solid var(--line);
}
.fone__rodape span {
  font-size: 9px; font-weight: 600; letter-spacing: .02em; text-align: center;
  color: var(--ink-tertiary); padding: 5px 2px; border-radius: 6px;
  transition: color .35s var(--ease), background .35s var(--ease);
}
.fone[data-etapa="0"] .fone__rodape span:nth-child(1),
.fone[data-etapa="1"] .fone__rodape span:nth-child(2),
.fone[data-etapa="2"] .fone__rodape span:nth-child(3),
.fone[data-etapa="3"] .fone__rodape span:nth-child(4) { color: #fff; background: var(--gradient); }

.cartao--meta { background: var(--bg); text-align: center; padding: 14px 11px; }
.cartao--meta b {
  font-size: 26px; letter-spacing: -.02em; margin-bottom: 2px;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .cartao { transition: none; opacity: 1; transform: none; }
}
/* Em tela estreita o celular sobe para o topo da seção e continua preso
   enquanto as etapas passam por baixo. column-reverse porque a lista vem
   antes no HTML (ela é o conteúdo; o celular é a ilustração) — e porque
   num item de grade o sticky só vale dentro da própria linha, enquanto
   num item de flex ele vale dentro do container inteiro. */
@media (max-width: 900px) {
  /* align-items: stretch anula o "start" que a grade declara — sem isso o
     painel encolhe até a largura do celular, cola na esquerda, e o fundo
     sólido deixa de cobrir o texto que passa por baixo. */
  .sistema__wrap { display: flex; flex-direction: column-reverse; align-items: stretch; }
  /* o fundo sólido é o que deixa o texto passar POR BAIXO do celular preso,
     em vez de atravessar ele */
  .sistema__painel {
    position: sticky; top: 62px; z-index: 3;
    background: var(--bg); padding: var(--space-3) 0 var(--space-4);
    box-shadow: 0 18px 14px -12px var(--bg);
  }
  .fone { width: 168px; }
  .sistema__lista { padding-block: var(--space-4) 0; gap: clamp(72px, 34vh, 180px); }
}

/* ---- cases ---- */
.cases__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-6); }
.case {
  position: relative; display: block;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.case::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(260px 260px at var(--sx, 50%) var(--sy, 50%), rgba(162, 12, 115, .08), transparent 70%);
  transition: opacity .35s ease;
}
.case:hover { border-color: var(--violet); box-shadow: 0 20px 40px -20px rgba(21,18,28,.2); }
.case:hover::after { opacity: 1; }
.case__shot { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); }
.case__body { padding: var(--space-3); }
.case__tag { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: 8px; }
.case__body h3 { margin-bottom: 8px; }
.case__body p { color: var(--ink-secondary); font-size: 14.5px; line-height: 21px; margin-bottom: var(--space-2); }
.case__link { font-size: 13px; font-weight: 600; color: var(--link); }

/* ---- resultados ---- */
.resultados__grade {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
  margin-top: var(--space-6);
}
.resultado {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-4) var(--space-4) var(--space-3);
}
.resultado__quem {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-tertiary); margin: 0 0 var(--space-3);
}
.resultado__numero {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(64px, 8vw, 104px); line-height: .85; letter-spacing: -.04em; margin: 0;
  background: var(--gradient); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.resultado:nth-child(2) .resultado__numero { background-position: 100% 0; }
.resultado__oque {
  font-size: 16px; line-height: 1.4; color: var(--ink); margin: var(--space-2) 0 var(--space-4);
  max-width: 22ch;
}
.resultado__conta {
  margin: 0; border-top: 1px solid var(--line); padding-top: var(--space-3);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
}
.resultado__conta dt { font-size: 12px; color: var(--ink-tertiary); margin-bottom: 4px; }
.resultado__conta dd {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink);
}
.resultados__aviso {
  margin: var(--space-4) 0 0; font-size: 13.5px; line-height: 1.5;
  color: var(--ink-tertiary); max-width: 68ch;
}
@media (max-width: 760px) {
  .resultados__grade { grid-template-columns: 1fr; }
}

/* ---- clientes: um mural de nomes, que é o que existe sem os arquivos
   de logo. Pastilha em vez de cartão porque são muitos nomes e de
   larguras bem diferentes. ---- */
.clientes { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }
.clientes__grupo h3 {
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-tertiary);
  margin: 0 0 var(--space-3);
}
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.chips li {
  display: inline-flex; align-items: baseline; gap: 7px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 17px; font-size: 15px; font-weight: 600; color: var(--ink);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.chips li:hover { border-color: var(--magenta); transform: translateY(-2px); }
.chips li span {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-tertiary);
}
.chips__mais {
  background: var(--gradient) !important; border-color: transparent !important; color: #fff !important;
}

/* ---- sobre ---- */
.sobre .lede { margin-top: var(--space-3); }
/* a seção era só texto numa coluna, com a outra metade vazia — a única do
   site sem nada do lado. O cartão da equipe preenche com o que sustenta a
   frase "sem terceirizar" que está logo ao lado. */
.sobre__wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-8); align-items: start; }
.sobre__wrap .intro { max-width: 34rem; }

.equipe {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-4);
}
.equipe h3 { margin: 0 0 var(--space-3); font-size: 17px; }
.equipe__lista { margin: 0; }
.equipe__lista > div {
  padding: var(--space-2) 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 22px 1fr; column-gap: 12px;
}
.equipe__lista > div:first-child { border-top: 0; padding-top: 0; }
.equipe__lista > div::before {
  content: ''; grid-row: 1 / span 2; width: 11px; height: 11px; margin-top: 6px;
  border-radius: 50%; background: var(--gradient); background-size: 500% 100%;
}
.equipe__lista > div:nth-child(2)::before { background-position: 25% 0; }
.equipe__lista > div:nth-child(3)::before { background-position: 50% 0; }
.equipe__lista > div:nth-child(4)::before { background-position: 75% 0; }
.equipe__lista > div:nth-child(5)::before { background-position: 100% 0; }
.equipe__lista dt { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.equipe__lista dd { margin: 3px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-secondary); }
.equipe__pe {
  margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}

@media (max-width: 900px) {
  .sobre__wrap { grid-template-columns: 1fr; gap: var(--space-6); }
  .sobre__wrap .intro { max-width: none; }
}

/* ---- contato: o único bloco cheio de cor da página ---- */
.contato { text-align: center; }
.contato .intro {
  background: var(--gradient); border-radius: 22px; color: #fff;
  padding: clamp(44px, 6vw, 84px) var(--space-4);
}
.contato .eyebrow { color: rgba(255,255,255,.82); justify-content: center; }
.contato .eyebrow::before { background: rgba(255,255,255,.7); opacity: 1; }
.contato h2 { margin-inline: auto; color: #fff; }
.contato .lede { margin-inline: auto; margin-top: var(--space-2); margin-bottom: var(--space-6); color: rgba(255,255,255,.88); }
.contato .hero-actions { justify-content: center; }
/* na cor cheia o botão inverte: branco sólido e contorno branco */
.contato .btn-primary { background: #fff; color: var(--ink); }
.contato .btn-primary:hover { box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.contato .btn:not(.btn-primary) { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.contato .btn:not(.btn-primary):hover { border-color: #fff; }

/* ---- formulário ---- */
.form { max-width: 620px; margin: 0 auto; text-align: left; }
.form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.campo { display: block; margin-bottom: var(--space-2); }
.campo > span {
  display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.9); margin-bottom: 7px;
}
.campo > span i { font-style: normal; font-weight: 400; color: rgba(255,255,255,.6); }
.campo input, .campo textarea {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid transparent; border-radius: var(--radius);
  padding: 13px 14px; min-height: 48px; resize: vertical;
  transition: box-shadow .2s ease;
}
.campo input:focus, .campo textarea:focus {
  outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.55);
}
/* a isca some da tela sem sair do formulário — display:none alguns robôs leem */
.campo--isca {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.form__fim { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.form__aviso { margin: 0; font-size: 14px; font-weight: 600; color: #fff; min-height: 20px; }
.form__aviso[data-estado="erro"] { color: #FFD9D2; }
.form__ou {
  margin: var(--space-4) auto 0; font-size: 14px; color: rgba(255,255,255,.85);
}
.form__ou a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .form__linha { grid-template-columns: 1fr; gap: 0; }
}

/* ---- rodapé ---- */
footer {
  border-top: 1px solid var(--line); padding: var(--space-4) var(--space-3);
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2);
}
footer img { height: 18px; opacity: .7; }
footer small { color: var(--ink-tertiary); font-size: 12px; }

@media (max-width: 900px) {
  .servicos__grid { grid-template-columns: repeat(2, 1fr); }
  .cases__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .servicos__grid { grid-template-columns: 1fr; }
  /* três telas giradas não cabem sem virar pilha confusa: a da marca sai
     e as duas dos projetos ganham espaço */
  .snap--c { display: none; }
  .snap--a { left: 0; width: 74%; }
  .snap--b { right: -2%; top: 32%; width: 60%; }
  .hero__collage { height: 280px; }
}