/* =========================================================
   CORTEX — folha de estilo única
   Base escura (Mugen / Sanjaya) com blocos claros (Create).
   Tipografia: Montserrat (títulos, rótulos e números),
   Raleway (texto corrido). Mesmo par da proposta comercial.
   O hero é o único bloco preservado do layout anterior.
   ========================================================= */

:root{
  /* paleta escura — padrão da página */
  --bg:        #050505;
  --surface:   #101013;
  --surface-2: #16161a;
  --ink:       #ffffff;
  --muted:     #a8a8a8;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.20);
  --btn-bg:    #ffffff;
  --btn-ink:   #050505;
  /* recado de erro do formulário; sobre o fundo escuro */
  --erro:      #e29a9a;

  /* destaque — só em estado (hover, foco, item aberto) e em um ou outro
     detalhe. Não é cor de texto nem de fundo de seção.
     --accent-ink é a tinta que fica legível POR CIMA do destaque. */
  --accent:     #4b9dd6;
  --accent-ink: #050505;

  /* hero (preservado) */
  --hero-bg:   #fafafa;
  --hero-ink:  #000000;

  /* Montserrat no que é marca, Raleway no texto corrido. Mesmo par da
     proposta comercial (ver Propostas/modelo/css/proposta.css).
     `--serif` e `--mono` são nomes históricos: hoje as duas apontam
     para a Montserrat. Renomear exigiria mexer em 22 pontos da folha. */
  --serif: "Montserrat", "Raleway", -apple-system, sans-serif;
  --sans:  "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  "Montserrat", "Raleway", -apple-system, sans-serif;

  --pad-x: 40px;
  --pad-y: 128px;
  --max:   1200px;
  /* zero: o -.04em era calibrado para a Inter. A Raleway já é estreita de
     desenho e entreletra negativa fecha o texto em corpo pequeno.
     O aperto sobrou para os títulos, que o declaram por conta própria. */
  --ls:    0;
  --round: 40px;

  --ease:  cubic-bezier(.22,.61,.36,1);
  --ease-2:cubic-bezier(.65,0,.35,1);
}

/* blocos claros: só trocam as variáveis */
.s--light{
  --bg:        #ffffff;
  --surface:   #f4f4f4;
  --surface-2: #ededed;
  --ink:       #050505;
  --muted:     #6b6b6b;
  --line:      rgba(0,0,0,.10);
  --line-2:    rgba(0,0,0,.20);
  --btn-bg:    #050505;
  --btn-ink:   #ffffff;
  /* o mesmo vermelho do bloco escuro dá 2,4:1 sobre branco; este lê a 5:1 */
  --erro:      #a33a3a;
  /* mesmo azul, escurecido: #4b9dd6 sobre branco dá 3:1, ilegível como texto.
     Este tom lê a 5,5:1 e mantém o hue da marca */
  --accent:     #2b6e9e;
  --accent-ink: #ffffff;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:500;
  letter-spacing:var(--ls);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--accent);color:var(--accent-ink)}

/* anel de foco de teclado — não existia; o destaque resolve dois problemas de uma vez */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- tipografia ---------- */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600; /* era 500: a Montserrat fica anêmica nesse peso */
  letter-spacing:-.02em; /* próprio: --ls agora é zero e o título precisa do aperto */
  line-height:1.22;
  margin:0;
}

h1{font-size:clamp(2.75rem,5.6vw,4.5rem)}
h2{font-size:clamp(2.25rem,4.6vw,3.75rem)}
h3{font-size:clamp(1.625rem,2.4vw,2.125rem)}
h4{font-size:clamp(1.375rem,1.9vw,1.625rem)}

p{margin:0;line-height:1.45}

.lead{font-size:clamp(1.0625rem,1.35vw,1.25rem);color:var(--muted);line-height:1.5}
.small{font-size:.9375rem;line-height:1.5;color:var(--muted)}

/* a Montserrat some em caixa alta pequena com peso de texto, e caixa alta
   pede mais respiro entre letras do que a monoespaçada pedia */
.mono{
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  line-height:1.2;
}

/* ---------- estrutura ---------- */

.section{
  position:relative;
  padding:var(--pad-y) var(--pad-x);
  background:var(--bg);
  color:var(--ink);
  z-index:1;
}

/* transição fluida entre blocos de cor:
   o bloco sobe por cima do anterior com o topo arredondado */
.section--round{
  border-radius:var(--round) var(--round) 0 0;
  margin-top:calc(var(--round) * -1);
}

.container{
  position:relative;
  z-index:3;
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:80px;
}

/* granulado */
.noise{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.09;
  z-index:2;
  border-radius:inherit;
  background-image:url("../assets/img/ref/ruido.png");
  background-repeat:repeat;
  background-size:256px;
}

/* imagem de fundo de seção */
.section__bg{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit}
.section__bg img{width:100%;height:100%;object-fit:cover;opacity:.30}
.section__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(5,5,5,.55) 40%,var(--bg) 100%);
}

/* rótulo de seção: / 01 — NOME */
.eyebrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
}
.eyebrow strong{color:var(--ink);font-weight:400}

.head{display:flex;gap:60px;align-items:flex-end;justify-content:space-between}
.head h2{max-width:640px;flex:1 1 640px}
/* "Comece hoje, de graça." quebrava deixando o "de" pendurado no fim da
   primeira linha e "graça." sozinho embaixo (reclamacao do Iuri, 22/09/2026).
   O espaco duro no HTML resolve sozinho em pagina sem animacao, mas AQUI NAO
   BASTA: o SplitText do GSAP reparte o titulo em palavras e troca o espaco
   duro por espaco normal no caminho. `text-wrap:balance` age antes disso,
   quando o navegador ainda esta medindo o texto, e o SplitText so' registra as
   linhas que o navegador ja' decidiu. Resultado: "Comece hoje," / "de graça.".
   Fica preso a esta secao: equilibrar todo `.head h2` do site mudaria a quebra
   de uma duzia de titulos que ninguem pediu para mexer. */
#ferramentas .head h2{text-wrap:balance}
.head .lead{max-width:380px;flex:0 1 380px}
/* Só a seção 01 usa este modificador. O título e o lead ficam com a largura
   inteira da coluna: paravam em 900px e 640px, e sobrava um vazio à direita
   deles, porque a fita de depoimentos ao lado começa só na altura da foto.
   `width:100%` e não apenas `max-width`: o pai é flex com align-items
   flex-start, então o h2 encolhe até a linha mais larga depois que o SplitText
   divide o texto, e a cada redimensionamento da janela ele redividia num box
   menor, apertando o título mais um pouco a cada vez. */
.head--stack{flex-direction:column;align-items:flex-start;gap:20px}
.head--stack h2{max-width:none;width:100%;flex:none}
.head--stack .lead{max-width:none;width:100%;flex:none}

.stack{display:flex;flex-direction:column;gap:56px}

/* ---------- botões ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 18px;
  border-radius:999px;
  background:var(--btn-bg);
  color:var(--btn-ink);
  font-size:.875rem;
  font-weight:600;
  line-height:1.4;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn:hover{transform:translateY(-2px);background:var(--accent);color:var(--accent-ink)}
.btn--ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line-2);
}
.btn--ghost:hover{background:transparent;color:var(--accent);border-color:var(--accent)}
/* Botão azul de uso geral (o do hero tem regra própria mais abaixo, porque lá
   a paleta é clara). Vem DEPOIS do `.btn:hover` de propósito: as duas regras
   empatam em especificidade e quem vence é a última. */
.btn--azul{background:var(--accent);color:var(--accent-ink)}
.btn--azul:hover{background:var(--ink);color:var(--bg)}
.btn svg{flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translate(2px,-2px)}

/* ---------- barra de progresso ---------- */

.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:70;
  background:transparent;pointer-events:none;
}
.progress i{
  display:block;height:100%;width:0;
  background:var(--accent);
  transition:width .1s linear;
}

/* ---------- header flutuante em pílula ----------
   Mesmo desenho da proposta comercial: pílula centrada com blur,
   sempre com fundo. As trocas de cor continuam vindo do body
   (.scrolled / .on-light), como antes. */

.header{
  position:fixed;
  top:14px;left:50%;transform:translateX(-50%);
  z-index:60;
  width:min(100% - 28px,1120px);
  padding:12px 22px;
  border-radius:999px;
  background:rgba(8,8,10,.62);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:saturate(140%) blur(16px);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
body.scrolled .header{background:rgba(8,8,10,.78)}
body.on-light .header{background:rgba(255,255,255,.72);border-color:rgba(0,0,0,.08)}
body.scrolled.on-light .header{background:rgba(255,255,255,.85)}
/* a pílula já limita a largura: o inner não precisa de --max
   Três colunas (pedido do Iuri, 08/08/2026): marca na ponta esquerda, menu
   no meio, bandeiras na ponta direita. As laterais são 1fr cada, então a
   coluna do meio fica centrada na pílula mesmo com o logo sendo bem mais
   largo que as bandeiras. Antes era um flex com space-between e o menu
   viajava junto com as bandeiras, colado na direita.
   As colunas são declaradas item a item de propósito: abaixo de 1180px o
   menu vira display:none e sai do grid, e sem grid-column o grupo da direita
   cairia na coluna 2, parando no meio da pílula. */
.header__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
}
.header__logo{display:flex;align-items:center;grid-column:1;justify-self:start}
/* Logotipo trocado em 08/08/2026. O header usa a **assinatura** (wordmark
   sozinho), e não o lockup com "MARKETING": a 82px a tagline vira um borrão
   azul de 4px de altura, e para ela ficar legível o logo teria que ir a 120px,
   engordando a pílula. Assinatura é a redução oficial da marca, é para isso
   que ela existe. Arquivo em assets/img/marca/cortex-assinatura.svg.
   As cores são as da marca: #ddd é o "branco" dela e #414141 o "preto",
   nenhum dos dois é puro. Trocar aqui reverte para #fff/#050505. */
.header__logo-mark{
  display:block;
  width:82px;
  height:auto;
  fill:currentColor;
  color:#ddd;
  transition:color .3s var(--ease);
}

/* A marca se desenha na abertura do site, 09/08/2026. É a variante "lenta" da
   animação oficial (Assets/Logo/Animada/), aqui em CSS e não no SVG pronto por
   dois motivos: o logo do header troca de cor no scroll via currentColor, o que
   um <img> não acompanha, e o SVG oficial é o lockup com "MARKETING", que o
   header não usa. Cada letra é traçada pelo contorno e depois preenchida; --i é
   a posição dela na palavra, e escalona a entrada.

   pathLength="100" está nos paths do HTML: normaliza o comprimento de todos os
   contornos, então um dasharray de 100 vale para as seis letras sem medir nenhuma. */
.header__logo-mark path{
  stroke:currentColor;
  stroke-width:1.2;
  fill-opacity:0;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:
    marca-traco .94s cubic-bezier(.4,0,.2,1) forwards,
    marca-preenche .66s ease-out forwards,
    marca-tira-traco .25s linear forwards;
  animation-delay:
    calc(var(--i) * .24s),
    calc(var(--i) * .24s + .52s),
    calc(var(--i) * .24s + .94s);
}
@keyframes marca-traco{to{stroke-dashoffset:0}}
@keyframes marca-preenche{to{fill-opacity:1}}
@keyframes marca-tira-traco{to{stroke-opacity:0}}

/* o bloco global de reduced-motion mata a animação, mas não o estado inicial;
   sem isto a marca ficaria invisível para quem pede menos movimento */
@media (prefers-reduced-motion:reduce){
  .header__logo-mark path{fill-opacity:1;stroke:none;stroke-dashoffset:0}
}

.header__right{display:flex;align-items:center;gap:28px;grid-column:3;justify-self:end}
.header__nav{display:flex;align-items:center;gap:26px;grid-column:2}
/* mesmos rótulos mono da pílula da proposta: cinza parado, destaque só no hover */
.header__nav a{
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  line-height:1.2;
  color:#bdbdbd;
  transition:color .3s var(--ease),opacity .25s var(--ease);
}
.header__nav a:hover{color:var(--accent)}

.burger{
  width:44px;height:44px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:7px;
}
.burger i{
  display:block;height:1.5px;width:32px;background:#fff;
  transition:transform .35s var(--ease),width .35s var(--ease),background .3s var(--ease);
}
.burger i:last-child{width:22px}
body.nav-open .burger i:first-child{transform:translateY(4.25px) rotate(45deg)}
body.nav-open .burger i:last-child{width:32px;transform:translateY(-4.25px) rotate(-45deg)}

/* ---------- seletor de idioma ----------
   Só bandeiras, a pedido do Iuri (07/08/2026). A do idioma atual fica acesa,
   a outra apagada; hover acende. As bandeiras são SVG inline no HTML de cada
   página: emoji de bandeira vira o texto "BR"/"CA" no Windows, não serve. */
.lang{display:flex;align-items:center;gap:10px}
.lang a{
  display:block;line-height:0;
  border-radius:4px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  opacity:.4;
  transition:opacity .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease);
}
.lang a:hover{opacity:1;transform:translateY(-1px)}
.lang a.is-active{opacity:1}
.lang svg{display:block;width:21px;height:15px}

/* sobre blocos claros o header inverte */
body.on-light .header__logo-mark{color:#414141}
body.on-light .header__nav a{color:#4a4a4a}
/* sobre fundo claro a bandeira apagada some: o vermelho a 40% vira rosa
   pálido e lê como "desativada" em vez de "o outro idioma". Sobe para 55%,
   que continua claramente secundária ao lado da acesa */
body.on-light .lang a{border-color:rgba(0,0,0,.16);opacity:.55}
body.on-light .lang a:hover,
body.on-light .lang a.is-active{opacity:1}
body.on-light .burger i{background:#050505}
/* o header é fixo, fica fora das seções: não herda o destaque de .s--light.
   Sobre fundo claro ele troca de tom pelo mesmo mecanismo */
body.on-light .header{--accent:#2b6e9e;--accent-ink:#ffffff}
/* o hover precisa ser repetido aqui: a regra de cima é mais específica que
   .header__nav a:hover e, sem isto, o link fica preto ao passar o mouse */
body.on-light .header__nav a:hover{color:var(--accent)}

/* ---------- menu em tela cheia ---------- */

.nav{
  position:fixed;
  inset:0;
  z-index:55;
  background:#050505;
  color:#fff;
  padding:140px var(--pad-x) 40px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:40px;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s;
  overflow-y:auto;
}
body.nav-open .nav{opacity:1;visibility:visible}
.nav__grid{
  max-width:var(--max);
  margin:0 auto;
  width:100%;
  display:flex;
  gap:28px;
  justify-content:space-between;
  flex-wrap:wrap;
}
.nav__col{display:flex;flex-direction:column;gap:2px;min-width:150px}
.nav a.xl{
  font-family:var(--serif);
  font-size:2rem;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.25;
  padding:8px 0;
  display:inline-block;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .25s var(--ease);
}
body.nav-open .nav a.xl{opacity:1;transform:none;transition-delay:calc(60ms * var(--i,0) + 120ms)}
.nav a.xl:hover{color:var(--accent)}
.nav__foot{
  max-width:var(--max);
  margin:0 auto;
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#a8a8a8;
}

/* =========================================================
   HERO — bloco preservado
   ========================================================= */

.hero{
  position:sticky;
  top:0;
  z-index:0;
  min-height:100vh;
  padding:260px var(--pad-x) 0;
  display:flex;
  justify-content:center;
  background:var(--hero-bg);
  color:var(--hero-ink);
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center center;
}
.hero__content{
  position:relative;
  z-index:3;
  max-width:770px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  text-align:center;
}
/* teto menor que o h1 geral (4.5rem): a Montserrat é mais larga que a
   Space Grotesk e a 72px o título caía para 4 linhas. A 66px voltava para as
   3 de sempre, mas a última linha encostava nas mãos da foto; a 58px são as
   mesmas 3 linhas com ~24px a menos de altura de bloco, o que devolve a folga.
   Só o hero muda; o h1 das outras páginas continua no tamanho antigo. */
/* com 58px na coluna de 770px o texto quebrava em "Quando estratégia gera /
   conexão, o crescimento / acontece.", deixando a última linha órfã. O balance
   redistribui e devolve a quebra de sempre. Onde não houver suporte a página
   cai na quebra normal, que continua em 3 linhas. */
.hero h1{font-size:clamp(2.5rem,4.9vw,3.625rem);text-wrap:balance}
/* Linha acima do h1 (07/09/2026): a palavra-chave "agência de marketing
   digital em Salvador" nas primeiras palavras da página, coisa que o h1
   preservado não tem. Sem animação de propósito: é o primeiro texto que o
   robô e o leitor encontram, e aparece junto com a foto. */
.hero__kicker{color:var(--hero-ink);opacity:.7;margin:0}
.hero__actions{display:flex;align-items:center;gap:12px}
.hero .btn{background:#050505;color:#fff;border-radius:8px}
.hero .btn--ghost{background:transparent;color:#050505;border:0;padding-left:0}
/* o hero tem paleta própria e empata em especificidade com .btn:hover;
   sem repetir aqui, o botão do hero ficaria sem o destaque.
   Fundo claro pede o azul escurecido */
.hero .btn:hover{background:#2b6e9e;color:#fff}
.hero .btn--ghost:hover{background:transparent;color:#2b6e9e}
/* Segundo botão do hero, azul, ao lado de "Nossos serviços" (pedido do Iuri,
   14/08/2026). Precisa do `.hero` na frente porque `.hero .btn` já pinta fundo
   e cor com especificidade 0,2,0: um `.btn--azul` solto perderia a disputa.
   O par é recíproco: o preto vira azul no hover, o azul vira preto.
   O tom é o #2b6e9e da paleta clara, e não o #4b9dd6: o hero é fundo claro e
   o azul claro só lê a 3:1 ali. Branco sobre #2b6e9e dá 5,5:1. */
.hero .btn--azul{background:#2b6e9e;color:#fff}
.hero .btn--azul:hover{background:#050505;color:#fff}

/* =========================================================
   MANIFESTO — faixas de texto em movimento
   ========================================================= */

.manifesto{
  position:relative;
  padding:96px 0;
  background:var(--bg);
  border-radius:var(--round) var(--round) 0 0;
  margin-top:calc(var(--round) * -1);
  z-index:1;
  overflow:hidden;
}
.manifesto__line{
  display:flex;
  width:max-content;
  gap:48px;
  padding:6px 0;
  white-space:nowrap;
}
.manifesto__line span{
  font-family:var(--serif);
  font-size:clamp(3rem,8vw,7rem);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.02em; /* display grande aguenta o aperto; --ls agora é zero */
}
.manifesto__line--a{animation:slide-l 34s linear infinite}
.manifesto__line--b{animation:slide-r 34s linear infinite;color:transparent;-webkit-text-stroke:1px var(--line-2)}
@keyframes slide-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes slide-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* =========================================================
   A CORTEX
   ========================================================= */

.about__row{display:flex;gap:48px;align-items:stretch}
.about__img{
  flex:1 1 620px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  height:560px;
}
.about__img img{width:100%;height:100%;object-fit:cover;border-radius:6px}

/* marquee vertical de depoimentos */
.reviews{
  flex:0 0 460px;
  height:560px;
  overflow:hidden;
  position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
}
.reviews__track{display:flex;flex-direction:column;gap:16px;animation:scroll-y 40s linear infinite}
.reviews:hover .reviews__track{animation-play-state:paused}
@keyframes scroll-y{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.review{
  display:flex;flex-direction:column;gap:16px;
  padding:24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
}
.review .stars{font-size:.7rem;letter-spacing:.22em;line-height:1;color:var(--muted)}
.review p{font-size:.9375rem;line-height:1.6}
.review__by{display:flex;align-items:center;gap:12px}
.review__by img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.review cite{font-family:var(--serif);font-size:1.125rem;font-weight:600;font-style:normal}

/* números */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.stat{
  background:var(--bg);
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.stat b{
  font-family:var(--serif);
  /* teto de 3rem e não 3.25rem: a célula tem 243px úteis na grade de 4 colunas
     e "R$ 4,2 mi" pedia 245px a 52px, quebrando em duas linhas por 2px de
     diferença. A 48px o mesmo texto ocupa 227px e sobram 16px de folga.
     O `nowrap` é a garantia: se alguém mexer no número, ele estoura a célula
     em vez de quebrar escondido, e o erro aparece na hora. */
  font-size:clamp(2.25rem,3.6vw,3rem);
  white-space:nowrap;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1;
  /* a Montserrat tem algarismo proporcional: sem isto o bloco balança
     enquanto o JS conta de zero até o número final */
  font-variant-numeric:tabular-nums;
}
.stat span{color:var(--muted)}

/* uma das células não é número: são as duas sedes, com pino antes de cada */
.stat__sedes{
  display:flex;
  flex-direction:column;
  gap:10px;
  /* alinha o topo do bloco com a linha de base dos números vizinhos */
  padding-top:6px;
}
.stat__sedes span{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--serif);
  font-size:clamp(1.0625rem,1.5vw,1.25rem);
  font-weight:600;
  line-height:1.2;
  /* as sedes são o valor desta célula, o equivalente ao número das outras
     três, então vão na tinta cheia. Sem esta linha elas herdam o cinza de
     `.stat span`, que é a regra do rótulo, e nasciam apagadas ao lado dos
     números brancos. O rótulo "Nossas sedes" fica fora deste bloco e segue
     cinza, como nas outras células. */
  color:var(--ink);
}
.stat__sedes svg{flex:none;opacity:.55}

/* =========================================================
   SERVIÇOS — lista que abre
   ========================================================= */

.svc{display:flex;gap:80px;align-items:flex-start}
.svc__aside{flex:0 0 340px;position:sticky;top:120px;display:flex;flex-direction:column;gap:24px}
.svc__list{flex:1;display:flex;flex-direction:column}

.svc__item{border-top:1px solid var(--line)}
.svc__item:last-child{border-bottom:1px solid var(--line)}
.svc__q{
  width:100%;
  display:flex;align-items:center;gap:24px;
  padding:26px 0;
  text-align:left;
  transition:padding-left .4s var(--ease),color .3s var(--ease);
}
.svc__q:hover{padding-left:10px}
/* o "+" é o destaque: marca o que está sob o cursor e o que está aberto */
.svc__q:hover .svc__ico,
.svc__item.is-open .svc__ico{color:var(--accent)}
.svc__n{font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.10em;color:var(--muted);flex:none;width:40px}
.svc__t{flex:1;font-family:var(--serif);font-size:clamp(1.375rem,2.2vw,1.875rem);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.svc__ico{position:relative;flex:none;width:14px;height:14px;transition:color .3s var(--ease)}
.svc__ico::before,.svc__ico::after{
  content:"";position:absolute;top:50%;left:0;width:14px;height:1.5px;background:currentColor;
  transition:transform .4s var(--ease);
}
.svc__ico::after{transform:rotate(90deg)}
.svc__item.is-open .svc__ico::after{transform:rotate(0)}
.svc__a{overflow:hidden;height:0;transition:height .5s var(--ease)}
.svc__inner{padding:0 0 30px 64px;display:flex;flex-direction:column;gap:18px;max-width:640px}
.svc__inner p{color:var(--muted)}
.svc__tags{display:flex;flex-wrap:wrap;gap:8px}
.svc__tags li{
  font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
}

/* =========================================================
   PROJETOS + CLIENTES (bloco claro)
   ========================================================= */

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.project{
  position:relative;
  aspect-ratio:16/11;
  overflow:hidden;
  border-radius:12px;
  display:block;
  background:var(--surface);
}
.project__media{position:absolute;inset:0;overflow:hidden}
.project__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.project:hover .project__media img{transform:scale(1.04)}
.project__meta{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding:24px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.78));
  color:#fff;
}
.project--largo{grid-column:1 / -1;aspect-ratio:2.2/1}
.project__meta h3{color:#fff;font-size:1.625rem}
.project__meta .mono{color:rgba(255,255,255,.72)}

/* faixa de logos */
.logos{display:flex;flex-direction:column;gap:32px}
.logos__row{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
/* carrossel de duas linhas — mesmo bloco da proposta comercial
   (ver Propostas/modelo/css/proposta.css, seção "clientes") */
.marquee{display:flex;flex-direction:column;gap:20px}
.marquee__row{
  overflow:hidden;
  /* apaga as pontas, para as marcas entrarem e saírem sem corte seco */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{display:flex;align-items:center;width:max-content}
/* a animação só entra depois que o JS duplica a fita — sem isso ela saltaria */
.marquee.is-ready .marquee__track{animation:slide-l var(--dur,46s) linear infinite}
.marquee.is-ready .marquee__row--rev .marquee__track{animation-direction:reverse}
.marquee:hover .marquee__track{animation-play-state:paused}

/* Caixa base igual para todas, corrigida por marca com --s: caixa igual não
   basta, UTC e CIVIL são letras que ocupam o quadro inteiro, Shell e Raízen
   têm muito ar interno e parecem menores no mesmo quadro. */
.marquee{--logo-w:150px;--logo-h:56px}
.marquee__item{
  flex:0 0 auto;
  width:calc(var(--logo-w) * var(--s,1));
  height:calc(var(--logo-h) * var(--s,1));
  margin-right:64px;
}
/* a medida vai em px na própria imagem, não em %: dentro do flex com trilha
   automática a porcentagem não resolve e a fita corta o que sobra */
.marquee__item img{
  width:calc(var(--logo-w) * var(--s,1));
  height:calc(var(--logo-h) * var(--s,1));
  object-fit:contain;object-position:center;
  filter:grayscale(1);
  mix-blend-mode:multiply;   /* mata o fundo branco dos arquivos originais */
  transition:filter .3s var(--ease);
}
.marquee__item:hover img{filter:grayscale(0)}

/* =========================================================
   PROCESSO
   ========================================================= */

/* auto-fit e não repeat(4,1fr): a metodologia tem 4 cartões e a 404 passou a
   ter 3 quando o blog saiu. Com 4 colunas fixas a 404 mostrava uma célula
   vazia, com borda e fundo, no lugar do cartão que sumiu. O auto-fit colapsa
   a trilha vazia e os cartões que sobram dividem a largura por igual. */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.step{
  background:var(--bg);
  padding:32px 28px 36px;
  display:flex;flex-direction:column;gap:14px;
  transition:background .4s var(--ease);
}
.step:hover{background:var(--surface)}
.step__n{font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.10em;color:var(--muted)}
.step h3{font-size:1.375rem}
.step p{color:var(--muted);font-size:.9375rem;line-height:1.6}

/* =========================================================
   FORMATOS
   ========================================================= */

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{
  display:flex;flex-direction:column;gap:24px;
  padding:32px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  transition:transform .5s var(--ease),border-color .4s var(--ease);
}
.plan:hover{transform:translateY(-6px);border-color:var(--line-2)}
.plan > p{color:var(--muted);font-size:.9375rem}
.plan ul{display:flex;flex-direction:column;gap:10px;font-size:.9375rem;color:var(--muted)}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:"+";opacity:.6}
.plan__price{
  margin-top:auto;
  display:flex;align-items:baseline;gap:6px;
  padding-top:22px;border-top:1px solid var(--line);
}
.plan__price strong{font-family:var(--serif);font-size:2rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan__price span{color:var(--muted);font-size:.8125rem}

/* =========================================================
   FAQ
   ========================================================= */

.faq{display:flex;gap:80px;align-items:flex-start}
.faq__intro{flex:0 0 380px;display:flex;flex-direction:column;gap:20px;position:sticky;top:120px}
.faq__list{flex:1;display:flex;flex-direction:column}
.faq__item{border-top:1px solid var(--line)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 0;
  text-align:left;
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:600;
  line-height:1.3;
  transition:padding-left .4s var(--ease);
}
.faq__q:hover{padding-left:10px}
.faq__q i{position:relative;flex:none;width:14px;height:14px;transition:color .3s var(--ease)}
.faq__q:hover i,
.faq__item.is-open .faq__q i{color:var(--accent)}
.faq__q i::before,.faq__q i::after{
  content:"";position:absolute;top:50%;left:0;width:14px;height:1.5px;background:currentColor;
  transition:transform .4s var(--ease);
}
.faq__q i::after{transform:rotate(90deg)}
.faq__item.is-open .faq__q i::after{transform:rotate(0)}
.faq__a{overflow:hidden;height:0;transition:height .5s var(--ease)}
.faq__a p{padding-bottom:26px;color:var(--muted);font-size:1rem;line-height:1.6;max-width:620px}

/* =========================================================
   EQUIPE + BLOG (bloco claro)
   ========================================================= */

/* 4 por fileira desde 22/09/2026: o time passou a ter 11 cards (10 pessoas e
   uma vaga aberta) e em 5 colunas sobrava uma fileira de 1. Em 4 fica 4+4+3.

   FLEX e nao GRID, por pedido do Iuri no mesmo dia: a fileira incompleta tem
   que ficar CENTRADA, e grid encosta o que sobra a esquerda. Com
   `justify-content:center` ela se centra sozinha e continua certa quando o
   numero de cards mudar (uma contratacao tira o card de vaga e sobram 10).
   As larguras sao calculadas porque flex nao tem o `1fr` do grid: 4 cards e
   3 vaos de 12px.

   `row-gap` de 36px, tres vezes o gap interno do card: com os 12px de antes o
   cargo de uma fileira ficava a mesma distancia da foto de cima e da foto de
   baixo, e lia como legenda da fileira errada. Reclamacao dele. */
.grid-team{display:flex;flex-wrap:wrap;justify-content:center;column-gap:12px;row-gap:36px}
/* text-align:center: nome e cargo centrados sob a foto, pedido dele */
.member{display:flex;flex-direction:column;gap:12px;text-align:center;flex:0 0 calc((100% - 36px) / 4)}
.member__img{aspect-ratio:1/1;overflow:hidden;border-radius:12px;background:var(--surface)}
/* card de quem ainda não tem retrato: iniciais no lugar do buraco */
.member__img--vazio{
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
}
.member__img--vazio span{
  font-family:var(--serif);
  font-size:clamp(2rem,3vw,2.75rem);
  font-weight:600;
  color:var(--muted);
  letter-spacing:.02em;
}
.member__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform 1s var(--ease),filter .5s var(--ease)}
.member:hover .member__img img{transform:scale(1.05);filter:grayscale(0)}
.member h3{font-size:1.125rem;font-family:var(--sans);font-weight:600;letter-spacing:0} /* Raleway: sem o aperto que os títulos herdam */
.member span{font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.post{display:flex;flex-direction:column;gap:16px}
.post__img{aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--surface)}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.post:hover .post__img img{transform:scale(1.04)}
.post h3{font-size:1.375rem;transition:color .3s var(--ease)}
.post:hover h3{color:var(--accent)}

/* =========================================================
   FERRAMENTAS GRATUITAS
   Grade usada em DOIS lugares: o bloco `#ferramentas` da home e a
   página `/ferramentas/`. Mora aqui, e não numa folha de página, justamente
   porque é compartilhada: repetir em duas folhas é o começo de duas versões
   que divergem na primeira manutenção.
   O desenho segue o `.steps` do processo (grade com fio de 1px no lugar de
   gap, tudo dentro de uma borda arredondada), para o bloco novo não parecer
   um componente vindo de outro site.
   ========================================================= */

.ferr{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}
.ferr__item{
  position:relative;               /* âncora do link esticado, ver .ferr__btn */
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:30px 26px 28px;
  background:var(--surface);
  transition:background .3s var(--ease);
}
.ferr__item:hover{background:var(--surface-2)}
.ferr__n{
  font-family:var(--mono);font-size:.75rem;font-weight:600;
  letter-spacing:.10em;color:var(--muted);
}
.ferr__item h3{font-size:1.375rem;transition:color .3s var(--ease)}
.ferr__item:hover h3{color:var(--accent)}
/* o flex:1 empurra as etiquetas para o pé do card: sem ele, cards com texto
   de tamanhos diferentes deixam as etiquetas em alturas diferentes */
.ferr__item p{color:var(--muted);font-size:.9375rem;line-height:1.6;flex:1}
.ferr__tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.ferr__tags li{
  font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:6px 10px;border:1px solid var(--line);border-radius:999px;
}

/* O botão é o ÚNICO link do card, e o `::after` estica a área de clique para o
   card inteiro. Assim o visitante tem o alvo azul, redondo e óbvio para mirar,
   e continua podendo clicar em qualquer lugar do card. Um link só na árvore de
   acessibilidade, em vez de card-link com botão-link dentro, que é HTML
   inválido (âncora dentro de âncora).

   O `transform:none` no hover não é enfeite: `.btn:hover` levanta o botão 2px,
   e transform num elemento faz dele o bloco de contenção dos filhos absolutos.
   Com o transform ligado, o `::after` deixaria de medir o card e passaria a
   medir o próprio botão no hover, encolhendo a área de clique embaixo do
   cursor e entrando em pisca-pisca. O realce do hover fica por conta do fundo
   do card e da cor do h3. */
.ferr__btn{align-self:flex-start;margin-top:4px}
.ferr__btn::after{content:"";position:absolute;inset:0}
.ferr__btn:hover{transform:none}

/* Grade de cinco da /ferramentas/: 3 em cima e 2 embaixo (pedido do Iuri,
   02/10/2026, no lugar de 4 + 1 com o quinto esticado). Seis colunas: os três
   primeiros cards ocupam duas cada, os dois últimos três cada, e as duas
   fileiras fecham sem célula vazia (o fio de 1px da grade apareceria nela).
   No tablet vira 2 + 2 + 1 com o último na fileira inteira, no celular uma
   coluna. O bloco da home tem quatro cards e não usa o modificador. Só a
   /ferramentas/ carrega esta versão do style.css (?v=50). */
.ferr--5{grid-template-columns:repeat(6,minmax(0,1fr))}
.ferr--5 > .ferr__item{grid-column:span 2}
.ferr--5 > .ferr__item:nth-child(n+4){grid-column:span 3}
@media (max-width:1000px){
  .ferr--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ferr--5 > .ferr__item,
  .ferr--5 > .ferr__item:nth-child(n+4){grid-column:auto}
  .ferr--5 > .ferr__item:last-child{grid-column:1 / -1}
}
@media (max-width:600px){
  .ferr--5{grid-template-columns:minmax(0,1fr)}
}

/* Fundo da página /ferramentas/: o mesmo degrade liso das quatro ferramentas,
   diferente do preto chapado do resto do site.
   ATENÇÃO: `.pg-scripts`, `.pg-stories`, `.pg-check` e `.pg-ferramenta`
   (singular, da /whatsapp/) repetem estas mesmas regras, cada uma na folha da
   sua página. Esta é a primeira cópia a morar no style.css, porque a
   /ferramentas/ não tem folha própria. Unificar as cinco num nome só é
   limpeza pendente, anotada no LEIA-ME. */
.pg-ferramentas{
  background:
    radial-gradient(1200px 700px at 50% -8%, rgba(75,157,214,.26), transparent 70%),
    linear-gradient(180deg, #12161f 0%, #0b0d14 42%, #050505 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
.pg-ferramentas .proj-hero,
.pg-ferramentas .section,
.pg-ferramentas .footer{background:transparent}
.pg-ferramentas .noise{opacity:.045}

/* O titulo e a linha de apoio do hero ocupam a largura inteira do container e
   ficam centralizados sobre o que vem abaixo. Os max-width de .proj-hero h1
   (900px) e .proj-lead (640px) existem para as paginas de projeto, onde o texto
   e' um bloco alinhado a esquerda; nas cinco paginas de material eles deixavam o
   hero preso numa coluna estreita, desalinhada da grade de cards e da ferramenta
   que vem logo em seguida.

   Pedido do Iuri: a /ferramentas/ em 25/08/2026, as outras quatro na mesma
   rodada. Vale so' para estas cinco: pagina de projeto e /privacidade/ seguem
   com o hero a esquerda. */
.pg-ferramentas .proj-hero h1,
.pg-ferramentas .proj-hero .proj-lead,
.pg-scripts .proj-hero h1,
.pg-scripts .proj-hero .proj-lead,
.pg-stories .proj-hero h1,
.pg-stories .proj-hero .proj-lead,
.pg-ferramenta .proj-hero h1,
.pg-ferramenta .proj-hero .proj-lead,
.pg-check .proj-hero h1,
.pg-check .proj-hero .proj-lead{
  max-width:none;
  text-align:center;
  margin-inline:auto;
}
.pg-ferramentas .footer{border-top:1px solid var(--line)}

/* =========================================================
   FUNDO DE ONDA
   Fumaça cinza correndo atrás do bloco `#ferramentas` da home.
   O desenho vem do `js/fundo-onda.js` (WebGL); aqui só mora a moldura.

   O canvas pinta fumaça branca sobre preto e entra em `mix-blend-mode:screen`:
   assim o preto dele some e sobra apenas o cinza sobre o fundo da seção.
   Sem isso seria preciso canvas com alfa, que custa mais caro por quadro.
   O `.section` já é um contexto de empilhamento (position + z-index), então a
   mistura fica presa dentro do bloco e não vaza para as seções vizinhas.

   A máscara vertical apaga topo e pé: a seção precisa emendar no bloco claro
   da equipe, em cima, e no contato, embaixo, sem uma borda de fumaça cortada.

   Sem JS, sem WebGL ou com o shader falhando, o `.onda__tela` nunca aparece
   (a opacidade só sobe com `.onda--pronta`) e fica o brilho radial do CSS,
   que sozinho já dá profundidade ao bloco.
   ========================================================= */

.onda{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(1000px 620px at 50% 46%, rgba(255,255,255,.045), transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 84%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 84%,transparent 100%);
}
.onda__tela{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  mix-blend-mode:screen;
  transition:opacity 1.4s var(--ease);
}
.onda--pronta .onda__tela{opacity:.85}

/* Véu por cima da fumaça, e não opacidade menor no canvas inteiro: o título e
   a linha de apoio moram no TERÇO DE CIMA da seção, e cinza claro sobre
   fumaça branca não se lê. O véu é forte lá em cima e afrouxa da metade para
   baixo, onde só há card opaco e espaço vazio. Assim o texto fica legível sem
   apagar o efeito justamente onde ele aparece. */
.onda::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(5,5,5,.88) 0%,
    rgba(5,5,5,.82) 34%,
    rgba(5,5,5,.34) 54%,
    rgba(5,5,5,.30) 100%);
}

/* no telefone a seção é estreita e alta: a fumaça vira mancha atrás dos cards.
   Fica mais discreta. */
@media (max-width:700px){
  .onda--pronta .onda__tela{opacity:.6}
}

/* =========================================================
   CONTATO
   ========================================================= */

.contact{display:flex;gap:80px;align-items:flex-start}
.contact__intro{flex:1;display:flex;flex-direction:column;gap:28px}
.contact__intro h2{max-width:560px}
.contact__meta{display:flex;flex-direction:column;gap:14px;padding-top:24px;border-top:1px solid var(--line)}
.contact__meta a{transition:color .3s var(--ease)}
.contact__meta a:hover{color:var(--accent)}
.form{flex:0 0 480px;display:flex;flex-direction:column;gap:24px}
.form__fields{display:flex;flex-direction:column;gap:10px}
.form label{display:flex;flex-direction:column;gap:6px}
.form label .mono{color:var(--muted)}
.form input,.form textarea{
  width:100%;
  padding:14px 0;
  border:0;border-bottom:1px solid var(--line);
  background:transparent;
  font:500 1rem/1.4 var(--sans);
  letter-spacing:0; /* Raleway em texto corrido: sem aperto */
  color:var(--ink);
  transition:border-color .3s var(--ease);
  caret-color:var(--accent);
}
.form textarea{resize:vertical;min-height:80px}
/* o campo em foco é o destaque; sem outline extra, a própria linha muda de cor */
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent)}
.form .btn{align-self:flex-start}
.form__msg{font-size:.875rem;line-height:1.5;color:var(--muted)}
.form__msg--erro{color:var(--erro)}
/* honeypot: fora da tela, e não display:none. Robô que lê CSS ignora campo
   escondido, e leitor de tela também pula — o aria-hidden no HTML resolve. */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* =========================================================
   RODAPÉ
   ========================================================= */

.footer{
  position:relative;
  padding:96px var(--pad-x) 32px;
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
  z-index:1;
}
.footer__inner{
  position:relative;z-index:3;
  max-width:var(--max);width:100%;margin:0 auto;
  display:flex;flex-direction:column;gap:64px;
}
.footer__nav{display:flex;gap:60px;justify-content:space-between;flex-wrap:wrap}
.footer__brand{display:flex;flex-direction:column;gap:2px;max-width:420px}
.footer__cols{display:flex;gap:60px;flex-wrap:wrap}
.footer__col{display:flex;flex-direction:column;gap:2px;min-width:140px}
.footer a.xl{
  font-family:var(--serif);font-size:1.75rem;font-weight:600;letter-spacing:-.02em;
  line-height:1.3;padding:6px 0;display:inline-block;
  transition:color .25s var(--ease);
}
.footer a.xl:hover{color:var(--accent)}

/* Reorganização de 07/08/2026, em duas rodadas com o Iuri: a antiga faixa
   .footer__addr (Endereço / Outros telefones / Funcionamento) saiu — parava no
   meio da largura, deixava um vazio à direita e separava o contato em duas
   zonas. Estado final: os três contatos no mesmo corpo xl dentro do bloco da
   esquerda (houve um .footer__fone2 em corpo pequeno entre as rodadas; morreu
   no mesmo dia), coluna "Onde estamos" só com as praças, e o horário na barra
   final junto do © e da Privacidade. Um lugar por categoria. */
.footer__label{color:var(--muted);margin-bottom:14px}
.footer__col--endereco{max-width:250px}
.footer__col--endereco .small{margin-top:6px} /* alinha o topo do texto com a 1ª linha dos links xl */

/* Marca em contorno, abrindo o bloco de contato.
   Histórico curto, porque ela já mudou de lugar três vezes: nasceu sangrando à
   esquerda em 15rem, virou faixa própria centrada em 07/08/2026, e em
   08/08/2026 o Iuri pediu que subisse para dentro do bloco de contato, acima
   dos telefones. Com isso a faixa dela sumiu do `.footer__inner` e o rodapé
   encolheu (a faixa custava a altura da marca mais 64px de `gap`).

   O `align-self` continua obrigatório: `.footer__brand` é flex-column e o
   padrão do eixo cruzado é `stretch`, que estica o SVG para a largura toda e
   arrebenta a proporção. Agora é `flex-start`, para a marca encostar na mesma
   margem esquerda do e-mail e dos telefones logo abaixo. */
/* O tamanho é o mesmo de antes da mudança de lugar (`clamp(3rem,9vw,7.5rem)`),
   e isso foi conferido, não chutado: quem manda na altura do rodapé é a coluna
   Navegação, com 331px de conteúdo contra 261px da coluna de contato. Sobram
   70px de folga ali, então a marca cabe no tamanho cheio sem alongar o rodapé
   em 1px. A 120px de altura ela mede 288px de largura, dentro dos ~400px da
   coluna. Se um dia a coluna Navegação encurtar, é essa folga que some primeiro. */
.footer__mark{
  display:block;
  align-self:flex-start;
  height:clamp(3rem,9vw,7.5rem);
  width:auto;
  max-width:100%;
  overflow:visible;
  user-select:none;
  margin-bottom:22px; /* o .footer__brand tem gap:2px, apertado para a marca */
}
.footer__mark path{
  fill:none;
  stroke:var(--line-2);
  stroke-width:1px;
  vector-effect:non-scaling-stroke;
}
/* Duas marcas no HTML, uma visível por vez. Regra do Iuri (08/08/2026):
   quando a tagline "MARKETING" fica pequena, entra a assinatura no lugar do
   lockup.

   O corte é 900px, e **não** os 760px do resto do site. A conta: a marca segue
   `clamp(3rem,9vw,7.5rem)` e a tagline é 11,66 de 90,75 do desenho, então a
   altura dela é 1,285% da viewport enquanto o clamp não bate no teto. Medido
   em contorno de 1px a 20%, que é como ela aparece aqui:

     375px → 6,2px   respingo, não se lê
     640px → 7,4px   ainda massa
     761px → 8,8px   letras aparecem, fracas
     860px → 9,9px   lê
     951px → 11,0px  lê bem

   Ou seja, ela firma perto dos 10px, o que acontece a partir de ~900px. Usar
   o breakpoint de 760px deixaria a faixa 761–900px com a tagline no limite. */
.footer__mark--assinatura{display:none}
@media (max-width:900px){
  .footer__mark--lockup{display:none}
  .footer__mark--assinatura{display:block}
}
.footer__bar{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid var(--line);
  color:var(--muted);
}
.footer__bar a{transition:color .25s var(--ease)}
.footer__bar a:hover{color:var(--accent)}

/* botão flutuante whatsapp */
.wa{
  position:fixed;right:24px;bottom:24px;z-index:50;
  width:52px;height:52px;border-radius:50%;
  background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 24px rgba(0,0,0,.28);
  transition:transform .3s var(--ease);
}
.wa:hover{transform:translateY(-3px) scale(1.04);background:#1eb955}

/* ---------- entrada dos blocos ---------- */

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:calc(80ms * var(--i,0));
}
.reveal.is-in{opacity:1;transform:none}

/* ---------- responsivo ---------- */

/* no desktop o menu está no header; o botão de sanduíche some */
@media (min-width:1180px){
  .burger{display:none}
}

@media (max-width:1179px){
  .header__nav{display:none}
}

@media (max-width:1100px){
  :root{--pad-y:96px;--round:32px}
  .container{gap:64px}
  .about__row{flex-direction:column}
  .about__img{height:420px;flex:none}
  .reviews{flex:none;width:100%;height:400px}
  .svc{flex-direction:column;gap:40px}
  .svc__aside{position:static;flex:none;width:100%}
  .faq,.contact{flex-direction:column;gap:40px}
  .faq__intro{position:static;flex:none;width:100%}
  .form{flex:none;width:100%}
  .plans{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .member{flex-basis:calc((100% - 24px) / 3)}   /* 3 cards, 2 vaos */
}

@media (max-width:760px){
  :root{--pad-x:20px;--pad-y:72px;--round:24px}
  .container{gap:48px}
  .hero{padding-top:190px;min-height:88vh}
  .hero__bg img{object-fit:contain;object-position:center bottom}
  .hero__content{gap:20px}
  .head{flex-direction:column;align-items:flex-start;gap:18px}
  .head h2,.head .lead{max-width:none;flex:none}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .steps,.stats{grid-template-columns:1fr}
  .member{flex-basis:calc((100% - 12px) / 2)}   /* 2 cards, 1 vao */
  .stack{gap:36px}
  .manifesto{padding:64px 0}
  .nav{padding:120px 20px 32px}
  /* o e-mail é a linha mais longa e já estourava a coluna antes da Montserrat,
     que é mais larga ainda. O clamp encolhe só nas telas estreitas: de 760px
     para baixo o topo do clamp continua sendo o tamanho de sempre. */
  .nav a.xl{font-size:clamp(1.25rem,5.9vw,1.625rem)}
  .footer a.xl{font-size:clamp(1.125rem,5.4vw,1.5rem)}
  /* no mobile quem manda na altura é o botão de sanduíche (44px) */
  .header{top:10px;width:calc(100% - 20px);padding:9px 10px 9px 18px}
  .svc__inner{padding-left:0}
  .svc__q{gap:14px}
  .svc__n{width:28px}
  .header__logo-mark{width:70px}
  .about__img{height:300px}
  .marquee{gap:16px;--logo-w:110px;--logo-h:44px}
  .marquee__item{margin-right:40px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  /* o JS nem duplica as fitas nesse caso; aqui as marcas quebram em linhas
     em vez de sumirem no que passa da largura da coluna */
  .marquee__track{flex-wrap:wrap;width:auto;justify-content:center}
  .marquee__row{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .marquee__item{margin:0 32px 20px 0}
}

/* ---------- página de comparação com GSAP ---------- */
/* O GSAP assume as faixas e as entradas; as versões em CSS saem de cena
   para as duas não brigarem pelo mesmo elemento. */
body[data-motion="gsap"] .manifesto__line--a,
body[data-motion="gsap"] .manifesto__line--b{animation:none}
/* precisa das três classes para vencer a regra `.marquee.is-ready
   .marquee__track` — animação em CSS ganha até de estilo inline, e a fita
   de volta acabaria andando para o lado errado */
body[data-motion="gsap"] .marquee.is-ready .marquee__track{animation:none}
body[data-motion="gsap"] .reveal{transition:none}
/* o H1 do hero espera o GSAP dividir as palavras antes de aparecer */
body[data-motion="gsap"] .hero h1{visibility:hidden}
body[data-motion="gsap"] .hero h1.pronto{visibility:visible}
body[data-motion="gsap"] .about__img,
body[data-motion="gsap"] .post__img,
body[data-motion="gsap"] .project__media{overflow:hidden}

/* =========================================================
   PÁGINA DE PROJETO
   ========================================================= */

.proj-hero{
  position:relative;
  padding:200px var(--pad-x) 80px;
  background:var(--bg);
  z-index:1;
}
.proj-hero__inner{position:relative;z-index:3;max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;gap:40px}
.proj-hero h1{font-size:clamp(2.5rem,6vw,5rem);max-width:900px}
.proj-lead{font-size:clamp(1.125rem,1.5vw,1.375rem);color:var(--muted);max-width:640px;line-height:1.5}

/* auto-fit pelo mesmo motivo do `.steps`: as páginas de projeto têm 4 células
   aqui, a de privacidade tem 3, e com 4 colunas fixas sobrava uma célula vazia
   com borda e fundo, que lê como defeito. */
.proj-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.proj-meta div{background:var(--bg);padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.proj-meta dt{color:var(--muted)}
.proj-meta dd{margin:0;font-family:var(--serif);font-size:1.25rem;font-weight:600;line-height:1.2}

.proj-cover{padding:0 var(--pad-x);background:var(--bg);position:relative;z-index:1}
.proj-cover img{max-width:var(--max);margin:0 auto;width:100%;border-radius:12px}

.proj-body{
  position:relative;z-index:1;
  padding:var(--pad-y) var(--pad-x);
  background:var(--bg);
}
.proj-body__inner{max-width:var(--max);margin:0 auto;display:flex;gap:80px;align-items:flex-start}
.proj-body__col{flex:1;display:flex;flex-direction:column;gap:16px}
.proj-body h2{font-size:clamp(1.5rem,2.2vw,2rem)}
.proj-body p{color:var(--muted);line-height:1.65}

.proj-galeria{
  position:relative;z-index:1;
  padding:0 var(--pad-x) var(--pad-y);
  background:var(--bg);
}
.proj-galeria__inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.proj-galeria img{width:100%;border-radius:12px;background:var(--surface)}
.proj-galeria img:first-child,.proj-galeria img:nth-child(4n){grid-column:1 / -1}

.proj-fim{
  position:relative;z-index:1;
  padding:var(--pad-y) var(--pad-x);
  background:var(--bg);
  border-top:1px solid var(--line);
}
.proj-fim__inner{
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.proj-fim__prox{display:flex;flex-direction:column;gap:10px}
.proj-fim__prox a{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);font-weight:600;letter-spacing:-.02em;line-height:1.1;transition:color .3s var(--ease)}
.proj-fim__prox a:hover{color:var(--accent)}
.proj-creditos{display:flex;flex-direction:column;gap:8px;text-align:right}
.proj-creditos b{font-weight:600}

@media (max-width:1100px){
  .proj-meta{grid-template-columns:repeat(2,1fr)}
  .proj-body__inner{flex-direction:column;gap:32px}
}
@media (max-width:760px){
  .proj-hero{padding:150px var(--pad-x) 56px}
  .proj-meta{grid-template-columns:1fr}
  .proj-galeria__inner{grid-template-columns:1fr}
  .proj-galeria img:first-child,.proj-galeria img:nth-child(4n){grid-column:auto}
  .proj-creditos{text-align:left}
}

/* =========================================================
   PÁGINAS DE TEXTO CORRIDO (privacidade e, no futuro, termos)
   Coluna estreita de propósito: são 70 caracteres por linha, contra os
   110 do lead da home. Aqui ninguém está passando o olho, está lendo.
   ========================================================= */
.legal{max-width:760px;display:flex;flex-direction:column;gap:40px}
.legal__bloco{display:flex;flex-direction:column;gap:14px}
.legal h2{font-size:clamp(1.375rem,2.2vw,1.75rem);letter-spacing:-.02em}
.legal h3{font-size:1.0625rem;font-weight:600;margin-top:8px}
.legal p,.legal li{color:var(--muted);font-size:1rem;line-height:1.65}
.legal ul{display:flex;flex-direction:column;gap:10px;padding-left:20px}
.legal li{list-style:disc}
.legal li strong{color:var(--ink);font-weight:600}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--accent)}

/* ---- Secoes explicativas das paginas de material -------------------------
   Modificador de `.legal`, usado pela /scripts/, /stories/ e /whatsapp/. As
   paginas juridicas (/privacidade/, /en/privacy/) seguem no `.legal` puro: la'
   a coluna estreita e' o certo, e' texto corrido para ler de cabo a rabo.

   O que mudou (25/08/2026, pedido do Iuri): os blocos eram uma coluna de 720 a
   760px encostada a esquerda. Sobrava metade da tela vazia, a pagina ficava
   comprida e os topicos, empilhados com o mesmo espaco entre tudo, liam como um
   bloco de texto so'.

   O desenho e' o mesmo do FAQ da home, que ja' existia no site: titulo num
   trilho a esquerda, conteudo a direita, fio horizontal entre um bloco e outro.
   Resolve as duas coisas de uma vez. A largura inteira passa a ser usada, e o
   fio mais o trilho dizem onde um topico acaba e o outro comeca.

   O h2 e' `sticky`: em bloco longo ele acompanha a rolagem, entao a pessoa nunca
   perde de vista em que topico esta'. O `align-items:start` e' o que faz o
   sticky funcionar, item de grade esticado nao gruda.

   Quem cresce com a tela e' o trilho, nao a linha de texto: a coluna da direita
   para em 820px. Linha de 16px atravessando 1200px daria umas 150 letras, que e'
   o dobro do que se le sem perder o comeco da linha seguinte. */
.legal--secoes{max-width:none;gap:0}
.legal--secoes .legal__bloco{
  display:grid;
  grid-template-columns:minmax(220px,300px) minmax(0,820px);
  column-gap:60px;
  row-gap:14px;
  align-items:start;
  padding:52px 0;
  border-top:1px solid var(--line);
}
.legal--secoes .legal__bloco:last-child{border-bottom:1px solid var(--line)}
.legal--secoes .legal__bloco > h2{
  grid-column:1;
  position:sticky;
  top:120px;
  margin:0;
}
/* tudo o que nao e' o titulo cai na segunda coluna, empilhado. A colocacao
   automatica da grade cuida das linhas: o primeiro item vai para a linha 1 da
   coluna 2, o seguinte para a linha 2, e assim por diante. */
.legal--secoes .legal__bloco > :not(h2){grid-column:2}

/* As perguntas rapidas viram cartoes lado a lado. Cada pergunta ganha um alvo
   visual proprio em vez de ser mais um paragrafo na pilha, e o bloco passa a
   ocupar cerca de um terco da altura que ocupava.

   Cartao com borda propria e `gap` de verdade, e NAO a construcao de fio da
   `.steps` e da `.proj-meta` (fundo na cor da linha com `gap:1px`). Aquela so'
   fecha bonito quando os itens preenchem a ultima fila: sao cinco perguntas, a
   fila final sobraria uma celula vazia com fundo e borda, que le como defeito.
   E' a mesma armadilha ja' anotada na `.proj-meta`. Com borda por cartao, fila
   incompleta simplesmente tem menos cartao. */
.legal__qa{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px;
}
.legal__qa > div{
  background:var(--surface);
  border:1px solid var(--line);border-radius:12px;
  padding:24px 26px;display:flex;flex-direction:column;gap:10px;
}
.legal--secoes .legal__qa h3{margin-top:0}

/* O corte e' em 1200px, e nao numa largura de celular, porque o trilho so' se
   paga quando sobra tela para ele. Abaixo disso ele comeria justamente a
   largura que o Iuri pediu para o texto: numa janela de 1024px a coluna da
   direita cairia para 569px, mais estreita do que os 760px de antes, que era o
   problema a resolver. Em 1200px exatos a coluna da direita da' 760px, entao a
   troca de layout nunca acontece para pior.

   Abaixo do corte o titulo volta para cima do texto, que passa a ocupar a
   largura inteira do container, e perde o sticky, que em bloco de uma coluna
   so' rouba altura de tela. Os fios e o respiro entre blocos ficam: e' o que
   separa um topico do outro, e isso vale em qualquer largura. */
@media (max-width:1200px){
  .legal--secoes .legal__bloco{
    grid-template-columns:minmax(0,1fr);
    row-gap:14px;
    padding:40px 0;
  }
  .legal--secoes .legal__bloco > h2{position:static;grid-column:1}
  .legal--secoes .legal__bloco > :not(h2){grid-column:1}
}
@media (max-width:600px){
  .legal--secoes .legal__bloco{padding:32px 0}
}
/* tabela de terceiros: no celular vira lista, senão estoura a tela */
.legal__tab{width:100%;border-collapse:collapse;font-size:.9375rem}
.legal__tab th,.legal__tab td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.legal__tab th{font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.legal__tab td{color:var(--muted);line-height:1.5}
.legal__tab td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
@media (max-width:600px){
  .legal__tab,.legal__tab tbody,.legal__tab tr,.legal__tab td{display:block;width:100%}
  .legal__tab thead{display:none}
  .legal__tab tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .legal__tab td{border:0;padding:2px 0}
}