/* ============================================================
   O ESTRATEGISTA VISUAL — LP
   Design System: preto chapado + minimalismo
   ------------------------------------------------------------
   Três decisões governam tudo aqui:

   1) PRETO CHAPADO. #000 puro, sem matiz, sem gradiente de fundo.
      O roxo saiu por completo — não há um único token roxo neste
      arquivo. A profundidade que o roxo dava por brilho agora vem
      de LUZ: um halo quase imperceptível atrás de poucos elementos.

   2) LINHA NO LUGAR DE CAIXA. O site antigo empilhava cards de
      `border + bg + radius + shadow`. Aqui só existe a régua de 1px
      a 9% de branco. Onde havia moldura, agora há espaço.

   3) O AMARELO É SÓ DO BOTÃO. A manchete perdeu a cor de marca de
      propósito: a ênfase do título vem do PESO da fonte (200 → 400).
      Com isso o único elemento colorido da página é o CTA, que passa
      a ser o ponto de maior contraste da tela (diretriz 8).

   Ordem: tokens → reset → primitivos → cabeçalho → seções → formulário
          → rodapé → flutuantes → responsivo
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* Fundo. Um único degrau acima do preto, e só para o rodapé. */
  --bg: #000000;
  --bg-lift: #070707;

  /* Texto. Quatro degraus bastam; mais que isso vira ruído. */
  --ink: #FFFFFF;          /* 21:1 */
  --ink-2: #A8A8A8;        /* corpo — 8,9:1 */
  --ink-3: #767676;        /* apoio — 4,6:1 */
  --ink-4: #444444;        /* só decorativo (numeração, réguas de texto) */

  /* A régua. É a ÚNICA borda do projeto: 1px, branco a 9%.
     Qualquer coisa mais forte já lê como caixa. */
  --rule: rgba(255, 255, 255, 0.09);
  --rule-strong: rgba(255, 255, 255, 0.16);

  /* Marca. Reservado ao CTA e aos pontos de 4px dos olhos-de-seção. */
  --accent: #EAB308;
  --accent-hi: #F5C426;
  --accent-ink: #0A0A0A;   /* texto sobre o amarelo */

  /* Raio. Uma escala, não um valor: raio fixo em elementos de tamanhos
     muito diferentes faz o botão parecer quadrado e o card parecer inflado.
     A regra é proporção — quanto maior a superfície, maior o raio.
     O botão é a exceção proposital: pílula cheia. Ele é o único elemento
     colorido da página, e a forma totalmente arredondada reforça que ali
     se clica, sem precisar de mais peso visual (diretriz 8). */
  --r-sm: 10px;      /* campos, ícones-botão, superfícies pequenas */
  --r-md: 14px;      /* painéis */
  --r-lg: 20px;      /* mídia grande: bento, dobras, retrato */
  --r-pill: 999px;   /* botões */

  /* Tipografia. Outfit é a fonte do site atual — mantida para não
     quebrar a identidade; o que muda é o PESO, de 900 para 200/300. */
  --font: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Ritmo vertical. Generoso de propósito (diretriz 13): o respiro é
     o que faz o preto chapado parecer caro em vez de vazio. */
  /* Este valor é aplicado em CIMA e EMBAIXO de cada seção, então o vão que
     se vê entre duas delas é o DOBRO dele. A 1440px eram ~173px de cada lado,
     ou seja, ~346px de preto entre uma seção e a próxima — respiro demais,
     que empurrava a página para quase o dobro da altura necessária. */
  --sec-y: clamp(3.5rem, 7.5vw, 7rem);
  --wrap: 1200px;
  --pad: clamp(1.25rem, 5vw, 3rem);

  /* Curvas: arranque rápido, assentamento longo. */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t: 0.4s var(--e-out);

  /* Recortes de tela com entalhe (iPhone). */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* `clip` em vez de `hidden`: `hidden` cria um contêiner de rolagem e MATA
   todo `position: sticky` descendente. Os dois barram o overflow lateral
   exigido pela diretriz 5, mas só um deles não quebra o cabeçalho. */
html, body { max-width: 100%; overflow-x: clip; overscroll-behavior-x: none; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Toda âncora precisa parar ABAIXO do cabeçalho fixo. */
html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Regra de autor vence a folha do navegador INDEPENDENTE de especificidade:
   sem esta linha, `.menu-mobile { display:grid }` e `.cookie-bar { display:flex }`
   passariam por cima do atributo `hidden` e os dois nasceriam abertos. */
[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* Foco visível e consistente — nunca removido, só redesenhado. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  /* O anel de foco acompanha o raio do elemento sempre que ele tiver um;
     este é só o piso para quem não tem. */
  border-radius: var(--r-sm);
}

/* Diretriz 4: nada de viúvas nem de manchete quebrada em cascata.
   `balance` equilibra as linhas do título; `pretty` impede que a última
   linha do parágrafo termine com uma palavra sozinha. */
h1, h2, h3 { text-wrap: balance; font-weight: 200; letter-spacing: -0.03em; line-height: 1.05; }
p, li { text-wrap: pretty; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: 0.75rem 1.25rem; font-weight: 500;
  /* Encostado no canto superior esquerdo da tela: só o canto que fica
     dentro da página é arredondado. */
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: calc(var(--pad) + var(--safe-l));
  padding-right: calc(var(--pad) + var(--safe-r));
}

/* Item de grid/flex tem `min-width:auto` por padrão — um filho largo estoura
   a trilha e cria rolagem lateral. Zerar isso é o que trava o overflow. */
.stats > *, .folds > *, .fold > *, .icp > *, .steps > *, .diag > *,
.bento > *, .contato > *, .footer-grid > * { min-width: 0; }

/* ---------- COREOGRAFIA DE ENTRADA (diretriz 12) ----------
   Só some se o JS estiver vivo. Sem script, `.no-js` não aplica opacidade
   zero e a página nasce inteira e visível (diretriz 16). */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--e-soft), transform 0.8s var(--e-out);
}
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- BOTÕES ----------
   O único elemento colorido da página. Sem sombra colorida, sem brilho:
   num fundo preto chapado, o amarelo sólido já é o maior contraste
   possível — acrescentar halo só sujaria a borda. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 44px;                 /* alvo de toque (diretriz 6) */
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-pill);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  transition: background var(--t), color var(--t), border-color var(--t), transform 0.2s var(--e-out);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: var(--accent-ink); font-weight: 500; }
.btn-primary:hover { background: var(--accent-hi); }

.btn-ghost { color: var(--ink-2); border: 1px solid var(--rule); }
.btn-ghost:hover { color: var(--ink); border-color: var(--rule-strong); }

.btn-sm { min-height: 40px; padding: 0.5rem 1.1rem; font-size: 0.875rem; }
.btn-lg { padding: 0.95rem 1.9rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* ---------- OLHO DE SEÇÃO ----------
   O ponto de 4px é a única aparição do amarelo fora do botão. Serve de
   pontuação: marca onde uma seção começa sem precisar de tarja nem caixa. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.75rem;
}
.eyebrow .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
/* Reduzido junto com o `--sec-y`: apertar só o vão entre seções e manter
   88px sob cada título deixaria o ritmo interno mais frouxo que o externo. */
.head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.25rem, 4.5vw, 3.5rem); }
.head .eyebrow { justify-content: center; }
.head--left { text-align: left; margin-inline: 0; }
.head--left .eyebrow { justify-content: flex-start; }
/* Sem isto o `margin-inline:auto` do subtítulo o centraliza dentro do bloco
   e ele nasce desalinhado do título que deveria acompanhar. */
.head--left .section-sub { margin-inline: 0; }

.section { padding: var(--sec-y) 0; }

.section-title {
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  margin-bottom: 1.25rem;
}
.section-title--left { text-align: left; }
/* A ênfase é de PESO, não de cor: 200 → 400 no mesmo branco. */
.section-title em { font-style: normal; font-weight: 400; }

.section-sub {
  color: var(--ink-2);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  max-width: 40rem;
  margin-inline: auto;
}
.section-sub--left { margin-inline: 0; }

/* ============================================================
   CABEÇALHO
   ============================================================ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background var(--t), border-color var(--t), backdrop-filter var(--t);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--rule);
}
/* Vão curto é o padrão porque o cabeçalho mais apertado é o do mobile:
   marca, seletor de idioma e hambúrguer na mesma linha a 320px. A partir
   de 900px ele volta a 1,5rem, onde há largura para isso. */
.header-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 72px;
}

/* `flex-shrink: 0` é o que impede o nome da marca de ser espremido pelo
   seletor de idioma numa tela estreita: com `nowrap`, encolher a caixa não
   quebraria a linha — o texto vazaria por cima do vizinho. Preferimos que
   ele empurre e os vãos cedam. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  white-space: nowrap;
  margin-right: auto;
  flex: 0 0 auto;
}
.brand-check { color: var(--accent); flex: 0 0 auto; }

.nav { display: none; gap: 2rem; font-size: 0.9rem; color: var(--ink-3); }
.nav a { position: relative; padding: 0.5rem 0; transition: color var(--t); }
.nav a:hover { color: var(--ink); }
/* Microinteração (diretriz 11) sem peso: uma régua de 1px que cresce da
   esquerda. É a mesma linha que estrutura a página, agora como feedback. */
.nav a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--e-out);
}
.nav a:hover::after { transform: scaleX(1); }

.nav-cta { display: none; }

.menu-toggle {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  margin-right: -0.5rem;
  border-radius: var(--r-sm);
}
.menu-toggle span {
  display: block; width: 20px; height: 1px; background: var(--ink);
  transition: transform 0.35s var(--e-out), opacity 0.2s linear;
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.menu-mobile {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem calc(var(--pad) + var(--safe-l)) 1.5rem;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
  /* Painel que desce do cabeçalho: arredonda só a borda que fica solta. */
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.menu-mobile a:not(.btn) {
  display: flex; align-items: center;
  min-height: 48px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}
.menu-mobile .btn { margin-top: 1rem; }

/* ---------- SELETOR DE IDIOMA (PT / EN) ----------
   Dois botões, não uma bandeira nem um <select>: bandeira representa
   país, não língua, e um menu suspenso para duas opções é uma camada de
   clique a mais sem nenhum ganho.

   Sem JS eles não fariam nada, então nem aparecem — a página continua
   inteira em português, que é o idioma declarado no <html> (diretriz 16).

   Fica no cabeçalho em TODAS as larguras, inclusive no mobile, onde
   divide a linha com a marca e o hambúrguer. O que paga esse terceiro
   elemento é o vão do cabeçalho, que no mobile encolhe para 0,75rem —
   nada some e nada muda de tamanho. */
.lang { display: none; }
.js .lang { display: inline-flex; align-items: center; gap: 0.1rem; flex: 0 0 auto; }

.lang-btn {
  min-width: 36px;
  min-height: 40px;                 /* alvo de toque (diretriz 6) */
  padding: 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  border-radius: var(--r-sm);
  transition: color var(--t);
}
.lang-btn:hover { color: var(--ink-2); }
/* O idioma ativo não ganha caixa nem cor de marca: sobe de tom, na mesma
   lógica de peso que separa o lado positivo do negativo em "Para Quem É". */
.lang-btn[aria-pressed="true"] { color: var(--ink); }
.lang-sep { width: 1px; height: 11px; background: var(--rule); flex: 0 0 auto; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  /* O topo precisa livrar o cabeçalho fixo (72px) e ainda dar respiro — mas
     208px deixavam um vazio grande demais entre o cabeçalho e o olho da seção. */
  padding: clamp(6.5rem, 13vw, 9rem) 0 clamp(3rem, 6vw, 5rem);
}
/* A única "textura" da página: um halo frio e baixíssimo atrás da
   manchete. É o que a diretriz 11 pede como iluminação direcionada, na
   dose que o minimalismo aguenta — some antes de virar gradiente. */
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: min(120vw, 1100px); aspect-ratio: 2 / 1;
  transform: translate(-50%, -35%);
  background: radial-gradient(closest-side, rgba(255,255,255,0.055), transparent 72%);
  pointer-events: none;
}
/* Os dois blocos de texto precisam ficar ACIMA da imagem. Ela é irmã deles
   no DOM e, no desktop, posicionada de forma absoluta — sem o z-index aqui,
   o `.hero-topo`, que vem antes dela na marcação, seria pintado por baixo. */
.hero > .wrap { position: relative; z-index: 1; }

.hero-title {
  font-size: clamp(2.6rem, 8.5vw, 6rem);
  max-width: 16ch;
  margin-bottom: 1.75rem;
}
.hero-title em { display: block; font-style: normal; font-weight: 400; }

.hero-sub {
  color: var(--ink-2);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  max-width: 46ch;
  margin-bottom: 2.75rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* No mobile a imagem entra no fluxo, entre os botões e os números — que é a
   ordem em que ela aparece no DOM. Toda a mudança do desktop é posicionamento,
   nada de reordenar com `order`. */
.hero-visual {
  position: relative;
  margin: clamp(2.5rem, 7vw, 4rem) 0;
  /* A máscara vive na FIGURE, não em cada <img>: agora são duas camadas
     empilhadas, e uma máscara por imagem seria recalculada contra a caixa de
     cada uma — o painel ganharia um desvanecimento próprio, fora de registro
     com o da arte. Aplicada no grupo, ela trata as duas como uma coisa só.

     É ela que dispensa moldura: o render tem fundo preto igual ao da página,
     então basta dissolver as bordas para ele virar parte da dobra. Sem
     suporte a `mask-image` a arte aparece com borda reta sobre preto — quase
     imperceptível, que é a degradação que se quer (diretriz 16).

     Os raios precisam ser da ordem das SEMI-medidas da caixa, não maiores:
     em `radial-gradient` a porcentagem é medida contra a largura/altura
     cheias, então um raio de 115% deixa a borda inferior a 43% do caminho
     do degradê — ou seja, ainda opaca, com corte reto. 72% coloca a borda
     em ~71%, dentro da faixa que desvanece. */
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(72% 72% at 50% 50%, #000 58%, transparent 100%);
}
.hero-camada { width: 100%; height: auto; }

/* ---------- Painel flutuante ----------
   As três porcentagens são as coordenadas do recorte na arte original
   (2005,150 numa grade de 3416×2048), não valores de olho: é isso que faz a
   camada reencaixar em cima do próprio buraco, sem costura.

   `mix-blend-mode: screen` é o que dispensa recorte com alfa: sobre preto,
   `screen` deixa o preto invisível e soma só a luz do painel. Assim a borda
   retangular da camada não existe, e as diferenças de compressão entre o
   preto de uma imagem e o da outra também não aparecem. */
.hero-painel {
  position: absolute;
  left: 58.6944%;
  top: 7.3242%;
  width: 26.0831%;
  height: auto;
  mix-blend-mode: screen;
}

/* O alvo tem a forma do painel — um quadrilátero em perspectiva, não um
   retângulo — para que o hover comece na tela azul e não no vazio ao lado. */
.hero-alvo {
  position: absolute;
  left: 58.6944%;
  top: 7.3242%;
  width: 26.0831%;
  aspect-ratio: 891 / 911;
  clip-path: polygon(9% 14%, 95.5% 2.5%, 90.5% 96.5%, 3.5% 89%);
  pointer-events: auto;
  z-index: 2;
}

/* Só onde há hover de verdade: em toque não existe "sair de cima" e o painel
   ficaria preso no estado levantado depois do primeiro toque.
   Sem `pointer: fine` junto — em notebook com tela sensível ao toque o
   Windows costuma reportar o ponteiro primário como `coarse` mesmo havendo
   mouse, e a regra inteira era descartada. `hover: hover` já basta para
   separar quem tem cursor de quem não tem. */
@media (hover: hover) {
  .hero-painel { transition: transform 0.85s var(--e-out), filter 0.85s var(--e-out); }
  .hero-alvo:hover ~ .hero-painel {
    /* Deslocamento em %, não em px: assim a flutuação encolhe junto com a
       imagem e continua "leve" em qualquer largura de tela. */
    transform: translate3d(-1.5%, -5%, 0) scale(1.025) rotate(-0.7deg);
    filter: brightness(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-painel { transition: none; }
  .hero-alvo:hover ~ .hero-painel { transform: none; filter: none; }
}

/* Números em régua: sem card, sem fundo. A separação é a linha de 1px. */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
}
.stat { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.stat-num {
  display: block;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 200;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 0.4rem;
}
.stat-label { color: var(--ink-3); font-size: 0.9rem; line-height: 1.5; }

/* ============================================================
   BENTO GRID — PROJETOS
   Sete prints em módulos de tamanhos diferentes. A assimetria é o
   ponto (diretriz 13): um grid de 7 quadros iguais viraria catálogo,
   e a variação de área é o que cria hierarquia sem precisar de rótulo
   dizendo qual projeto importa mais.

   Nenhum cartão tem posição fixada à mão. São 6 colunas e três faixas
   que fecham exatamente em 6 (4+2, 2+2+2, 3+3), o que deixa a colocação
   automática do grid resolver tudo — reordenar projetos é mover o <li>.
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.bento-cel { min-width: 0; }
/* Só carrega o <symbol> da seta; não desenha nada e não ocupa célula. */
.bento-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.bento-card {
  position: relative;
  display: block;
  height: 100%;
  /* O `overflow: hidden` é o que faz a imagem e a faixa de legenda serem
     recortadas pelo raio do cartão — sem ele, os cantos vazariam. */
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-lift);
  aspect-ratio: 16 / 10;
}
.bento-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ancorado no topo: é onde mora a manchete de cada landing page. Centrar
     cortaria justamente a parte que prova o trabalho. */
  object-position: 50% 0;
  opacity: 0.86;
  transition: opacity 0.5s var(--e-soft), transform 0.8s var(--e-out);
}

/* Faixa de identificação. Degradê, não caixa: a legenda emerge da própria
   imagem em vez de morar num retângulo colado embaixo. */
.bento-info {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 3.5rem 1.25rem 1.1rem;
  /* Três paradas, não duas: metade dos prints tem fundo claro, e um degradê
     linear simples deixava a legenda ilegível justamente sobre esses. A
     parada do meio garante que a faixa onde o texto assenta já esteja
     escura, sem precisar escurecer a imagem inteira. */
  background: linear-gradient(180deg,
              transparent 0%,
              rgba(0, 0, 0, 0.45) 42%,
              rgba(0, 0, 0, 0.92) 100%);
}
.bento-nome {
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
}
.bento-ver {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--ink-2);
  transition: color var(--t), opacity var(--t);
}
.bento-ver svg { width: 13px; height: 13px; flex: 0 0 auto; transition: transform 0.35s var(--e-out); }

/* SEM href o cartão não é link: não navega, não recebe foco e o rótulo
   "Ver projeto" nasce apagado. É o que impede um placeholder esquecido
   de ir ao ar como link quebrado — e o estado ativo liga sozinho no
   instante em que a URL for colada. */
.bento-card:not([href]) { cursor: default; }
.bento-card:not([href]) .bento-ver { opacity: 0.45; }

.bento-card[href]:hover img,
.bento-card[href]:focus-visible img { opacity: 1; transform: scale(1.035); }
.bento-card[href]:hover .bento-ver,
.bento-card[href]:focus-visible .bento-ver { color: var(--accent); }
.bento-card[href]:hover .bento-ver svg,
.bento-card[href]:focus-visible .bento-ver svg { transform: translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  .bento-card img { transition: opacity 0.3s linear; }
  .bento-card[href]:hover img { transform: none; }
}

/* ============================================================
   BLOCOS EM RÉGUA — O PROBLEMA
   ============================================================ */
/* Elefante à esquerda, tópicos à direita. */
.diag { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); }

.diag-bicho {
  display: grid;
  place-items: center;
  min-width: 0;
  /* No mobile ele vira uma ilustração de topo, não um painel de altura
     cheia — solto, ocuparia meia tela antes do primeiro tópico. */
  max-width: 20rem;
  margin-inline: auto;
}
.diag-elefante {
  width: 100%;
  height: auto;
  /* `--ink-4` sumia: é um tom pensado para numeração pequena, e num desenho
     de 500px de traço fino ele vira fantasma. `--ink-3` deixa o elefante
     presente sem competir com os títulos dos tópicos, que são brancos. */
  color: var(--ink-3);
}

.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 2.5rem;
  padding: clamp(2rem, 4.5vw, 3rem) 0;
  border-bottom: 1px solid var(--rule);
}
.row-num {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.row-title { font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 300; }
.row-text { color: var(--ink-2); max-width: 52ch; }

/* ============================================================
   DOBRAS DE DUAS COLUNAS (diretriz 2)
   ============================================================ */
.folds { display: grid; gap: clamp(3rem, 6.5vw, 5rem); }
.fold { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }

/* Card do ícone. É a caixa mais leve possível — a mesma régua de 1px dando a
   volta e um véu de branco a 2,5% no topo, que só insinua uma luz vinda de
   cima. Sem sombra: sobre preto chapado ela não teria onde cair. */
.fold-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;                 /* o raio recorta o ícone no parallax */
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 62%);
  transition: border-color var(--t), background var(--t);
}
.fold:hover .fold-media { border-color: var(--rule-strong); }

/* O ícone NÃO acende em amarelo no hover, ao contrário dos cards de "Como
   Funciona". Lá são quatro peças de 26px; aqui é uma forma de até 150px, e
   um bloco desse tamanho em amarelo disputaria com o botão o posto de
   elemento de maior contraste da página (diretriz 8). Sobe de cinza para
   branco, que já dá o retorno sem gastar a cor de marca. */
.fold-ico {
  /* ~45% da largura do card. A 150px o ícone existia, mas boiava numa caixa
     de 530px e não lia como "ícone grande" — lia como ícone normal num card
     grande. */
  width: clamp(110px, 20vw, 240px);
  height: auto;
  color: var(--ink-3);
  transition: color var(--t);
}
.fold:hover .fold-ico { color: var(--ink); }

.fold-title { font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 300; margin-bottom: 1rem; }
.fold-text { color: var(--ink-2); margin-bottom: 2rem; max-width: 44ch; }

.ticks { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.ticks li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 0.95rem;
}
/* Um traço de 8px no lugar do ícone de check: menos peso, mesma função. */
.ticks li::before {
  content: '';
  position: absolute; left: 0; top: 1.45em;
  width: 8px; height: 1px; background: var(--ink-4);
}

/* ============================================================
   ETAPAS
   ============================================================ */
/* ============================================================
   ETAPAS — quatro cards na mesma linha
   Esta é a única seção em que a caixa se justifica: são quatro passos
   PARALELOS de um processo, e a caixa é o que os torna comparáveis de
   relance. Nas outras seções o conteúdo é sequencial e a régua bastava.
   Mesmo assim é a caixa mais leve possível: a mesma régua de 1px dando
   a volta, fundo transparente, sem sombra.
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
}
.step {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  transition: border-color var(--t), background var(--t), transform 0.5s var(--e-out);
}
.step:hover {
  border-color: var(--rule-strong);
  background: rgba(255, 255, 255, 0.02);
  transform: translateY(-3px);
}

/* Ícone e número dividem a mesma linha: o número não é título, é índice —
   fica pequeno e à direita, longe de disputar a leitura com o ícone. */
.step-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.step-ico { width: 26px; height: 26px; color: var(--ink-3); transition: color var(--t); }
.step:hover .step-ico { color: var(--accent); }

.step-num {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  transition: color var(--t);
}
.step.in .step-num { color: var(--ink-3); }

.step-title {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 0.6rem;
}
.step-text { color: var(--ink-2); font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
  .step:hover { transform: none; }
}

/* ============================================================
   PARA QUEM É / NÃO É
   A coluna negativa não usa vermelho: recua em opacidade. Guardar a
   cor para o CTA vale mais do que sinalizar o óbvio com semáforo.
   ============================================================ */
.icp {
  display: grid;
  grid-template-columns: 1fr;
  /* Gap curto: agora cada lado tem sua própria margem interna, e um vão
     grande entre cards só afastaria duas caixas que precisam ser lidas em
     comparação, lado a lado. */
  gap: clamp(1rem, 2vw, 1.5rem);
}

.icp-col {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 62%);
  transition: border-color var(--t), background var(--t);
}
.icp-col:hover { border-color: var(--rule-strong); }

.icp-ico {
  width: clamp(56px, 7vw, 82px);
  height: auto;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.icp-title { font-size: 1.15rem; font-weight: 400; letter-spacing: -0.01em; margin-bottom: 1.25rem; }
.icp-list { border-top: 1px solid var(--rule); }
.icp-list li {
  position: relative;
  padding: 1rem 0 1rem 1.75rem;
  border-bottom: 1px solid var(--rule);
}
/* A régua do último item encostaria na margem interna do card e leria como
   uma segunda borda, dobrada. */
.icp-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.icp-list li::before {
  position: absolute; left: 0; top: 0.95rem;
  font-size: 0.95rem; line-height: 1.5;
  color: var(--ink-4);
}

/* O lado negativo recua em TOM, não em opacidade do bloco inteiro como
   antes: com card de verdade, esmaecer o conjunto apagaria também a borda
   e a caixa passaria a parecer desabilitada, não secundária. */
.icp-col--no .icp-ico   { color: var(--ink-4); }
.icp-col--no .icp-title { color: var(--ink-2); }
.icp-col--no .icp-list li { color: var(--ink-3); }
.icp-col--no .icp-list li::before { content: '\2013'; }   /* traço */

.icp-col--yes .icp-ico   { color: var(--ink-2); }
.icp-col--yes .icp-title { color: var(--ink); }
.icp-col--yes .icp-list li { color: var(--ink-2); }
.icp-col--yes .icp-list li::before { content: '\2713'; color: var(--ink-2); }  /* tique */

/* ============================================================
   DIFERENCIAL TÉCNICO — GRÁFICO DE PIZZA 3D

   Monocromático de propósito. Um gráfico deste tamanho em amarelo
   roubaria do botão o posto de elemento de maior contraste da página
   (diretriz 8); em três cinzas ele domina a seção pela ESCALA, não
   pela cor, e o CTA continua sendo a única coisa colorida.

   A distribuição dos três cinzas NÃO segue a ordem da copy: segue a
   profundidade. A fatia da frente não pode ser a mais escura — com as
   paredes claras das fatias de trás aparecendo pelas frestas, o olho
   lê a peça escura da frente como um buraco no meio do disco em vez de
   uma fatia. Então o tom médio fica na frente e os extremos atrás.
   ============================================================ */
.pizza {
  --pz1-topo: #D4D4D4;  --pz1-parede: #6E6E6E;   /* Performance  (fatia 2, fundo-esq) */
  /* A parede desta fatia é a borda direita do disco: escura demais, ela se
     dissolve no fundo preto e o disco perde o contorno daquele lado. */
  --pz2-topo: #6E6E6E;  --pz2-parede: #3E3E3E;   /* Tecnologia   (fatia 0, fundo-dir) */
  --pz3-topo: #8E8E8E;  --pz3-parede: #4A4A4A;   /* SEO          (fatia 1, frente)   */

  position: relative;
  width: 100%;
}
/* No desktop a caixa tem exatamente a proporção da viewBox, então `slice`
   e `meet` dão no mesmo. No mobile a caixa é achatada de propósito e o
   `slice` recorta as margens de cima e de baixo — que só existem para
   acomodar os rótulos flutuantes e, empilhados, viram vão morto. */
.pizza-svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 560; }

/* O traço preto entre as peças não é contorno decorativo: é o que separa
   parede de face e uma fatia da outra sem precisar clarear nenhuma delas. */
.fatia path {
  stroke: #000;
  stroke-width: 1.5;
  stroke-linejoin: round;
  transition: fill 0.45s var(--e-out);
}
.fatia--2 .fatia-topo   { fill: var(--pz1-topo); }
.fatia--2 .fatia-parede { fill: var(--pz1-parede); }
.fatia--0 .fatia-topo   { fill: var(--pz2-topo); }
.fatia--0 .fatia-parede { fill: var(--pz2-parede); }
.fatia--1 .fatia-topo   { fill: var(--pz3-topo); }
.fatia--1 .fatia-parede { fill: var(--pz3-parede); }

.pizza-guias path { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; }
.pizza-guias circle { fill: var(--ink-4); }

/* No mobile os rótulos entram no fluxo, empilhados abaixo do gráfico —
   e as guias somem, porque apontariam para o lugar errado. */
.pizza-item { padding: 1.75rem 0; border-bottom: 1px solid var(--rule); }
.pizza-item:first-of-type { border-top: 1px solid var(--rule); }
.pizza-item h3 { font-size: 1.15rem; font-weight: 400; margin-bottom: 0.5rem; }
.pizza-item p { color: var(--ink-2); font-size: 0.95rem; }
.pizza-guias { display: none; }

/* ============================================================
   SOBRE
   ============================================================ */
/* Coluna única e centralizada. A largura é de LEITURA, não do contêiner:
   um depoimento de dois parágrafos correndo a 1.100px de largura fica com
   linhas longas demais para acompanhar. 44rem mantém ~70 caracteres por
   linha, que é a faixa confortável. */
.about {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.about .eyebrow { justify-content: center; }

.about-lead {
  color: var(--ink-2);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  max-width: 34rem;
  margin: 0 auto 2.5rem;
}

/* Sem a régua vertical à esquerda que a citação tinha: uma borda de um lado
   só desequilibra um bloco centralizado. Quem separa a citação do resto
   agora é o espaço e o corpo maior. */
.about-quote {
  display: grid;
  gap: 1.25rem;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.3vw, 1.08rem);
  line-height: 1.75;
}
.about-sign {
  display: grid;
  gap: 0.15rem;
  margin: 2.5rem auto 0;
  padding-top: 1.75rem;
  /* A régua da assinatura não atravessa a coluna inteira: encurtada e
     centralizada, ela vira um fecho em vez de um divisor de seção. */
  border-top: 1px solid var(--rule);
  max-width: 18rem;
}
.about-sign strong { font-weight: 400; font-size: 1.05rem; color: var(--ink); }
.about-sign span { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

/* ============================================================
   CONTATO + FORMULÁRIO (diretrizes 10, 14, 15)
   ============================================================ */
.section--contato { border-top: 1px solid var(--rule); }
.contato { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }

.contato-links { margin-top: 2.5rem; border-top: 1px solid var(--rule); }
.contato-links li { border-bottom: 1px solid var(--rule); }
.contato-links a {
  display: flex; align-items: center;
  min-height: 52px;
  color: var(--ink-2);
  transition: color var(--t);
}
.contato-links a:hover { color: var(--ink); }

.form { display: grid; gap: 1.25rem; }

/* Honeypot: fora da tela, mas presente no DOM e sem `display:none` —
   bot preenche, humano nunca vê (diretriz 15). */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Campo com rótulo flutuante (diretriz 10). O rótulo vive DENTRO do
   campo e sobe quando há foco ou conteúdo — `placeholder=" "` é o que
   permite detectar "vazio" via `:placeholder-shown` sem uma linha de JS. */
/* O campo deixou de ser só uma régua embaixo e virou caixa arredondada:
   linha de baixo não tem canto para arredondar, e um campo reto no meio de
   uma página inteira de cantos macios é o único elemento que denuncia a
   troca. Continua leve — fundo transparente e a MESMA régua de 1px, agora
   dando a volta completa. */
.field { position: relative; }
.field input {
  width: 100%;
  min-height: 62px;
  padding: 1.65rem 1rem 0.55rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-weight: 300;
  transition: border-color var(--t), background var(--t);
}
.field input:hover { border-color: var(--rule-strong); }
.field input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.02);
}
.field label {
  position: absolute; left: 1rem; top: 1.1rem;
  color: var(--ink-3);
  font-size: 1rem;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.28s var(--e-out), color 0.28s var(--e-out);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  transform: translateY(-0.85rem) scale(0.75);
  color: var(--ink-3);
}
.field input:focus + label { color: var(--accent); }

.field.is-invalid input { border-color: #E4573D; }
.field-error {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: #E4573D;
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0.5rem 0;
  min-height: 44px;
}
/* Caixa de seleção redesenhada: a nativa é quadrada e não aceita raio.
   O tique vem como imagem de fundo, não como `::before` — navegador nenhum
   garante pseudo-elemento dentro de <input>, que é elemento substituído. */
.consent input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 0.1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.consent input:hover { border-color: var(--ink-3); }
.consent input:checked {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
  border-color: var(--accent);
}
.consent a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.consent a:hover { color: var(--ink); }

.form-note { font-size: 0.9rem; min-height: 1.4em; }
.form-note.is-ok { color: #4ADE80; }
.form-note.is-err { color: #E4573D; }
.form-legal { font-size: 0.78rem; color: var(--ink-4); }

/* ============================================================
   RODAPÉ
   ============================================================ */
.footer {
  background: var(--bg-lift);
  border-top: 1px solid var(--rule);
  padding: clamp(3.5rem, 8vw, 5.5rem) 0 calc(clamp(2rem, 4vw, 3rem) + var(--safe-b));
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
  margin-bottom: 3.5rem;
}
.footer-contact { display: grid; gap: 0.5rem; margin-top: 1.25rem; }
.footer-contact a { color: var(--ink-3); font-size: 0.9rem; transition: color var(--t); }
.footer-contact a:hover { color: var(--ink); }

.footer-col h3 {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 1.25rem;
}
.footer-col ul { display: grid; gap: 0.15rem; }
.footer-col li a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 40px;
  color: var(--ink-3);
  font-size: 0.9rem;
  transition: color var(--t);
}
.footer-col li a:hover { color: var(--ink); }

.footer-certs li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.35rem 0; }
.footer-certs strong { font-weight: 400; font-size: 0.9rem; }
.footer-certs span { font-size: 0.78rem; color: var(--ink-4); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
  color: var(--ink-4);
}
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { transition: color var(--t); }
.footer-legal a:hover { color: var(--ink-2); }

/* ============================================================
   FLUTUANTES
   ============================================================ */
/* `--cookie-h` é publicado pelo main.js com a altura real da faixa de
   cookies enquanto ela estiver aberta, e volta a 0 quando some. Sem isso a
   faixa cobre justamente o CTA fixo — a diretriz 14 é explícita em não
   deixar o aviso de cookies atrapalhar o clique de conversão. */
.sticky-cta {
  position: fixed;
  left: calc(var(--pad) + var(--safe-l));
  right: calc(var(--pad) + var(--safe-r));
  bottom: calc(1rem + var(--safe-b) + var(--cookie-h, 0px));
  transition: opacity 0.35s var(--e-out), transform 0.35s var(--e-out), bottom 0.35s var(--e-out);
  z-index: 55;
  display: flex; align-items: center; justify-content: center;
  min-height: 52px;
  padding: 0.85rem 1.5rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
  border-radius: var(--r-pill);
}
.sticky-cta[hidden], .sticky-cta.is-off {
  opacity: 0;
  transform: translateY(120%);
  pointer-events: none;
}

.wa-float {
  position: fixed;
  right: calc(var(--pad) + var(--safe-r));
  /* No mobile ele sobe acima do CTA fixo; ambos sobem acima da faixa de
     cookies. Três elementos fixos no mesmo canto só convivem se um deles
     souber a altura do outro. */
  bottom: calc(5.25rem + var(--safe-b) + var(--cookie-h, 0px));
  z-index: 55;
  transition: color var(--t), border-color var(--t), bottom 0.35s var(--e-out);
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink-2);
}
.wa-float:hover { color: var(--ink); border-color: var(--ink-3); }

.cookie-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 58;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1rem calc(var(--pad) + var(--safe-r)) calc(1rem + var(--safe-b)) calc(var(--pad) + var(--safe-l));
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule);
  /* Mesma lógica do menu, invertida: encostada na base da tela, arredonda
     só o topo. Arredondar um canto que toca a borda do monitor não cria
     forma nenhuma — só uma fresta. */
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  font-size: 0.82rem;
  color: var(--ink-3);
}
.cookie-bar a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.cookie-bar p { flex: 1 1 20rem; }
.cookie-actions { display: flex; gap: 0.5rem; margin-left: auto; }

/* ============================================================
   RESPONSIVO — mobile-first, tudo daqui para cima (diretriz 6)
   ============================================================ */
@media (min-width: 640px) {
  /* Dois módulos por linha; o destaque atravessa os dois. */
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-cel--destaque { grid-column: span 2; }

  .steps { grid-template-columns: repeat(2, 1fr); }

  .stats { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .row { grid-template-columns: auto 1fr; }
  .row-num { padding-top: 0.55em; }
  .row-title { grid-column: 2; }
  .row-text { grid-column: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .nav { display: flex; }
  .nav-cta { display: inline-flex; }
  .menu-toggle { display: none; }
  .menu-mobile { display: none !important; }

  /* Há largura de sobra: o cabeçalho volta ao vão original. */
  .header-inner { gap: 1.5rem; }

  /* O CTA fixo é de mobile: no desktop o botão do cabeçalho está sempre
     visível e o fixo só duplicaria a mesma ação. */
  .sticky-cta { display: none; }
  .wa-float { bottom: calc(var(--pad) + var(--safe-b) + var(--cookie-h, 0px)); }

  /* O bento de verdade. A altura vem da trilha de linhas, não da proporção
     da imagem — por isso `aspect-ratio` é desligado aqui e cada cartão
     passa a preencher a célula que o grid lhe deu. */
  .bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: clamp(6rem, 8vw, 9rem);
  }
  .bento-card { aspect-ratio: auto; }

  /* Cinco faixas, todas fechando em 6 colunas — 4+2 · 2+2+2 · 3+3 ·
     2+2+2 · 4+2. Dentro de cada faixa o span de LINHAS é igual em todos
     os módulos: é isso que deixa a colocação automática resolver os doze
     sem uma única coordenada escrita à mão e sem buraco no meio. */
  .bento-cel { grid-column: span 2; grid-row: span 2; }
  .bento-cel--destaque { grid-column: span 4; grid-row: span 3; }
  .bento-cel--alta { grid-column: span 2; grid-row: span 3; }
  .bento-cel--larga { grid-column: span 3; grid-row: span 2; }

  /* O módulo alto é o único retrato de um acervo inteiro em 16:10 — o
     corte come quase metade da largura. Ancorar no canto superior ESQUERDO
     preserva logo e manchete, que é onde a página se identifica. */
  .bento-cel--alta img { object-position: 0 0; }

  /* Hero em duas colunas, mas só o texto é coluna de verdade: a imagem é
     ancorada na <section> e a esquerda apenas reserva o espaço com padding.
     Foi o que permitiu a base da imagem encostar no fim da dobra — dentro de
     uma grade ela estaria presa à altura da linha, não à da seção.
     A manchete perde o teto de 6rem porque agora vive em meia largura:
     mantido o clamp antigo, quebraria em quatro linhas e empurraria o CTA
     para fora da primeira tela. */
  /* Reserva o espaço da imagem com `max-width` no bloco de texto, NÃO com
     `padding-right: %` no .wrap: porcentagem de padding resolve contra a
     largura do bloco-contêiner (a <section> inteira, 100vw), não contra a
     do próprio .wrap — o que estrangulava a coluna e quebrava o botão
     secundário para a linha de baixo. */
  /* O .wrap do texto ocupa a MESMA célula da grade que a imagem e fica por
     cima dela (z-index 1). Como todo bloco, ele captura o ponteiro na área
     inteira — inclusive na metade direita, onde está vazio e só deixa a
     imagem aparecer. Era isso que impedia o hover do painel de disparar:
     o clique/mouse nunca chegava lá embaixo.

     A solução não é tirar o z-index (o texto PRECISA ficar por cima), e sim
     tornar a moldura vazia transparente ao ponteiro, devolvendo o evento
     apenas ao bloco de texto de verdade — que continua selecionável e com
     os botões clicáveis. */
  .hero-topo { pointer-events: none; }
  .hero-texto { max-width: 32rem; pointer-events: auto; }
  .hero-title { font-size: clamp(2.4rem, 4.4vw, 4rem); max-width: 14ch; }
  .hero-sub { font-size: clamp(1rem, 1.35vw, 1.15rem); max-width: 42ch; }

  /* A seção vira grade de duas linhas: conteúdo em cima, números embaixo.
     Texto e imagem dividem a MESMA célula (1/1) e se sobrepõem; a imagem
     recebe `align-self: end`, então a base dela assenta exatamente na linha
     que abre os números — e a linha inteira cresce para acomodá-la.

     Tentei antes ancorar em `bottom: 0` da <section>, que é o fim literal
     da dobra. Só que ali a imagem passa POR TRÁS dos números, e os painéis
     holográficos são a parte mais clara dela: "+20%" e "+R$ 10 Milhões"
     ficavam ilegíveis. Nem um véu escuro resolveu sem virar caixa. Esta é
     a posição mais baixa que a imagem alcança sem custar legibilidade. */
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-topo  { grid-area: 1 / 1; }
  .hero-base  { grid-area: 2 / 1; }
  .hero-visual {
    grid-area: 1 / 1;
    justify-self: end;
    align-self: end;
    width: min(60%, 1000px);
    margin: 0;
    z-index: 0;
    pointer-events: none;         /* nunca rouba clique de nada */
  }
  /* Elipse ancorada no canto inferior direito: opaca embaixo, onde a imagem
     precisa assentar, desvanecendo para cima e para a esquerda — justamente
     o lado por onde ela encontra a manchete e os números. */
  .hero-visual {
    -webkit-mask-image: radial-gradient(135% 135% at 100% 100%, #000 62%, transparent 100%);
    mask-image: radial-gradient(135% 135% at 100% 100%, #000 62%, transparent 100%);
  }

  .stats { grid-template-columns: repeat(4, 1fr); }

  .fold { grid-template-columns: 1.05fr 0.95fr; gap: clamp(3rem, 6vw, 5.5rem); }
  .fold-media { grid-column: 1; grid-row: 1; }
  .fold-body { grid-column: 2; grid-row: 1; }
  /* Assimetria harmônica (diretriz 13): o card troca de lado a cada dobra.
     A sangria para fora da coluna saiu junto com as imagens — fazia sentido
     numa foto que se dissolvia no preto, não num card com borda visível, que
     desalinharia da grade de todo o resto da página. */
  .fold--flip .fold-media { grid-column: 2; }
  .fold--flip .fold-body { grid-column: 1; }

  /* `align-items: stretch` (padrão) iguala a altura dos dois cards mesmo com
     textos de tamanhos diferentes — sem isso o lado negativo, mais curto,
     ficaria mais baixo e a comparação perderia o eixo. */
  /* `align-items: stretch` (padrão do grid) dá à coluna do elefante a altura
     da coluna dos tópicos; com `height: 100%` no SVG, o desenho passa a ter
     exatamente a mesma altura da lista, como pedido.
     A coluna da esquerda é a MAIS LARGA de propósito: a proporção da viewBox
     (300×260 = 1,15) é mais estreita que a da caixa, e é isso que faz a
     ALTURA ser o lado que limita o encaixe. Numa coluna estreita, a largura
     limitaria antes e sobraria folga vertical. */
  .diag { grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 5vw, 4rem); }
  .diag-bicho { max-width: none; margin-inline: 0; }
  .diag-elefante { height: 100%; }

  .icp { grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); }

  /* As quatro etapas na MESMA linha. `align-items: stretch` (padrão do grid)
     é o que iguala a altura dos cards mesmo com textos de tamanhos
     diferentes — sem isso o card do passo 3 ficaria mais baixo. */
  .steps { grid-template-columns: repeat(4, 1fr); }

  /* Os rótulos saem do fluxo e vão para a ponta de cada linha-guia. As
     âncoras são as MESMAS coordenadas do SVG convertidas em porcentagem
     (200/1000 = 20%, 130/760 = 17.11%…), então rótulo e guia escalam
     juntos: o texto continua colado na ponta da linha em qualquer
     largura de tela, sem media query intermediária. */
  /* Volta à proporção cheia da viewBox: as margens de cima e de baixo
     são justamente onde os rótulos flutuantes vão morar. */
  .pizza-svg { aspect-ratio: 1000 / 780; }
  .pizza-guias { display: block; }
  .pizza-item {
    position: absolute;
    width: 30%;
    padding: 0;
    border: 0;
    text-align: center;
  }
  /* `:first-of-type` (0,2,0) vence o `border: 0` de `.pizza-item` (0,1,0),
     então a régua do empilhamento mobile precisa ser desligada por um
     seletor de peso igual — senão sobra um risco solto ao lado do gráfico. */
  .pizza-item:first-of-type { border-top: 0; }

  .pizza-item--perf { left: 17%; top: 15.64%; transform: translate(-50%, -100%); padding-bottom: 1rem; }
  .pizza-item--tec  { left: 83%; top: 15.64%; transform: translate(-50%, -100%); padding-bottom: 1rem; }
  .pizza-item--seo  { left: 50%; top: 79.91%; transform: translate(-50%, 0);     padding-top: 1rem; width: 40%; }

  .contato { grid-template-columns: 0.95fr 1.05fr; gap: clamp(3rem, 7vw, 6rem); }
  /* A coluna do texto acompanha a rolagem do formulário em vez de deixar
     um vazio embaixo. */
  .contato-body { position: sticky; top: 120px; }

  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; }
}

/* Faixa em que o cabeçalho fica mais cheio: navegação, seletor de idioma
   e CTA disputam a mesma linha e ainda não há largura sobrando. Só os
   vãos encolhem — nada some e nada muda de tamanho. Acima de 1200px o
   espaçamento volta ao original. */
@media (min-width: 900px) and (max-width: 1199px) {
  .header-inner { gap: 1rem; }
  .nav { gap: 1.5rem; }
}

/* ============================================================
   ULTRA-WIDE
   A <section> do hero não tinha teto: ela crescia com a tela, e como a
   arte é ancorada no FIM dessa caixa (`justify-self: end`), ia junto.
   Num monitor de 2560px o resultado era a imagem colada na borda
   direita do vidro, a meia tela de distância do texto — que para no
   `.wrap` de 1200px.

   A caixa do hero passa a ter teto de 1600px, centralizada por padding
   simétrico. O `.wrap` de dentro NÃO se mexe: ele já tem o próprio teto
   de 1200px e continua centralizado dentro de uma caixa centralizada.
   Abaixo de 1600px o padding vale zero, então nenhuma outra
   responsividade muda — nem por um pixel.
   ============================================================ */
@media (min-width: 1600px) {
  .hero { padding-inline: max(0px, (100% - 1600px) / 2); }
}


/* ============================================================
   PÁGINAS LEGAIS (termos.html · privacidade.html)
   Mesmo sistema, medida de leitura estreita: são páginas para LER,
   não para converter. Nenhum token novo.
   ============================================================ */
.legal { padding: clamp(7rem, 16vw, 10rem) 0 clamp(4rem, 9vw, 7rem); }
.legal-inner { max-width: 46rem; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 0.75rem; }
.legal-updated { color: var(--ink-4); font-size: 0.82rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.legal h2 {
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: clamp(2.25rem, 5vw, 3rem) 0 0.85rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.legal p, .legal li { color: var(--ink-2); margin-bottom: 0.85rem; }
.legal ul { margin: 0 0 1.25rem; }
.legal li { position: relative; padding-left: 1.5rem; }
.legal li::before {
  content: '';
  position: absolute; left: 0; top: 0.8em;
  width: 8px; height: 1px; background: var(--ink-4);
}
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-back { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; color: var(--ink-3); }
.legal-back:hover { color: var(--ink); }

/* Telas pequenas: nada pode empurrar a largura. */
@media (max-width: 380px) {
  .hero-actions .btn { width: 100%; }
  .cookie-actions { width: 100%; margin-left: 0; }
  .cookie-actions .btn { flex: 1 1 auto; }

  /* Marca, seletor de idioma e hambúrguer dividem a mesma linha, e a marca
     não encolhe. Quem cede é o seletor: vãos zerados e botões mais
     estreitos. A altura de 40px continua intacta, então o alvo de toque
     não é o que paga a conta (diretriz 6). Sem isto, abaixo de ~300px o
     hambúrguer é empurrado para fora da tela e a navegação some. */
  .header-inner { gap: 0.35rem; }
  .js .lang { gap: 0; }
  .lang-btn { min-width: 30px; padding: 0 0.15rem; font-size: 0.74rem; }
  .lang-sep { margin-inline: 0.15rem; }
}

/* Telas dobráveis fechadas (~280px). Aqui não há largura para quatro
   coisas na mesma linha, e a que cede é a marca: o selo perde o lugar
   (é decorativo, já é `aria-hidden`) e o nome baixa meio ponto. O
   hambúrguer é intocável — sem ele a navegação inteira sai do ar. */
@media (max-width: 305px) {
  .brand { font-size: 0.88rem; }
  .brand-check { display: none; }
}


/* ============================================================
   PÁGINA /CURRICULO (curriculo.html)
   Mesmo sistema, nenhum token novo. O que existe aqui é só o que a
   home não tinha: retrato, pílulas de habilidade, linha do tempo e
   cards de formação. Tudo o mais (cabeçalho, botões, olhos, réguas,
   números, rodapé, CTA fixo) vem das regras de cima.
   ============================================================ */
.cv-hero-grid > *, .skills > *, .edu > *, .xp-item > *, .cv-links > * { min-width: 0; }

/* ---------- hero ---------- */
.cv-hero {
  position: relative;
  padding: clamp(6.5rem, 13vw, 9rem) 0 clamp(3rem, 6vw, 5rem);
}
/* O mesmo halo baixíssimo da home atrás da manchete. */
.cv-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: min(120vw, 1100px); aspect-ratio: 2 / 1;
  transform: translate(-50%, -35%);
  background: radial-gradient(closest-side, rgba(255,255,255,0.055), transparent 72%);
  pointer-events: none;
}
.cv-hero > .wrap { position: relative; z-index: 1; }

.cv-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

/* Manchete mais curta que a da home em corpo: é uma frase inteira, não
   duas palavras de impacto — a 6rem quebraria em cinco linhas. */
.cv-title {
  font-size: clamp(2.2rem, 6vw, 3.9rem);
  max-width: 18ch;
  margin-bottom: 1.5rem;
}
.cv-title em { display: block; font-style: normal; font-weight: 400; }

.cv-quote {
  color: var(--ink-2);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  max-width: 40ch;
  margin-bottom: 2.5rem;
}

/* Retrato redondo, preto e branco. O anel é a mesma régua de 1px, afastada
   da foto por um vão — é o que o separa do fundo sem virar moldura. */
.cv-retrato {
  position: relative;
  width: clamp(200px, 56vw, 300px);
  margin-inline: auto;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  transition: border-color var(--t);
}
.cv-retrato img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.6s var(--e-soft);
}
@media (hover: hover) {
  .cv-retrato:hover { border-color: var(--rule-strong); }
  .cv-retrato:hover img { filter: none; }
}

/* O botão do LinkedIn sem `href` nasce apagado e inerte — mesma lógica dos
   cartões do bento: placeholder esquecido não vai ao ar como link quebrado. */
.btn[data-linkedin]:not([href]) { opacity: 0.4; pointer-events: none; }
.cv-links a[data-linkedin]:not([href]) { opacity: 0.4; pointer-events: none; }

/* ---------- competências ---------- */
.skills {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
}
/* A mesma caixa leve das etapas da home. */
.skill-group {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  transition: border-color var(--t), background var(--t);
}
.skill-group:hover { border-color: var(--rule-strong); background: rgba(255, 255, 255, 0.02); }
.skill-ico { width: 28px; height: 28px; color: var(--ink-3); margin-bottom: 1.25rem; transition: color var(--t); }
.skill-group:hover .skill-ico { color: var(--accent); }
.skill-title { font-size: clamp(1.1rem, 1.5vw, 1.25rem); font-weight: 400; line-height: 1.25; margin-bottom: 1.25rem; }

/* Pílula de régua: a forma do botão fantasma, sem ser botão — menor,
   sem alvo de toque e sem cor no hover, só sobe de tom. */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color var(--t), border-color var(--t);
}
.chips li:hover { color: var(--ink); border-color: var(--rule-strong); }

/* ---------- experiência ---------- */
/* A linha do tempo é literalmente a régua, em pé: 1px à esquerda e um
   ponto por cargo. Só o cargo atual tem o ponto amarelo. */
.xp { position: relative; padding-left: 1.75rem; }
.xp::before {
  content: '';
  position: absolute; left: 3px; top: 0; bottom: 0;
  width: 1px; background: var(--rule);
}
.xp-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 2.5rem;
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  border-bottom: 1px solid var(--rule);
}
.xp-item:last-child { border-bottom: 0; }
.xp-item::before {
  content: '';
  position: absolute;
  left: calc(-1.75rem);
  top: calc(clamp(1.5rem, 3vw, 2rem) + 0.45em);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--ink-4);
}
.xp-item.is-now::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.14);
}

.xp-meta { display: grid; gap: 0.15rem; }
.xp-when {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.xp-where { font-size: 0.82rem; color: var(--ink-4); }
.xp-role { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 300; margin-bottom: 0.15rem; }
.xp-org { color: var(--ink-2); }

/* Histórico antigo: o <summary> vira o botão fantasma. */
.xp-more { margin-top: 1.5rem; }
.xp-more summary { list-style: none; cursor: pointer; }
.xp-more summary::-webkit-details-marker { display: none; }
.xp-more summary svg { transition: transform 0.35s var(--e-out); }
.xp-more[open] summary svg { transform: rotate(180deg); }
.xp-more-fechar { display: none; }
.xp-more[open] .xp-more-abrir { display: none; }
.xp-more[open] .xp-more-fechar { display: inline; }
.xp--antigo { margin-top: 1.5rem; }
.xp--antigo .xp-role { font-size: clamp(1.1rem, 1.8vw, 1.3rem); }

/* ---------- formação ---------- */
.edu {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 56rem;
  margin-inline: auto;
}
/* O mesmo card de "Para Quem É": régua em volta e véu de luz no topo. */
.edu-card {
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 62%);
  transition: border-color var(--t);
}
.edu-card:hover { border-color: var(--rule-strong); }
.edu-ico { width: 34px; height: 34px; color: var(--ink-3); margin-bottom: 1.5rem; transition: color var(--t); }
.edu-card:hover .edu-ico { color: var(--ink); }
.edu-title { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 400; line-height: 1.25; margin-bottom: 0.5rem; }
.edu-org { color: var(--ink-2); }
.edu-when { margin-top: 0.75rem; font-size: 0.8rem; letter-spacing: 0.1em; color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* ---------- contato ---------- */
.cv-contato { max-width: 44rem; margin-inline: auto; text-align: center; }
.cv-contato .eyebrow { justify-content: center; }
.cv-contato-acoes { justify-content: center; margin-top: 2.25rem; }

/* A mesma lista em régua da home, centralizada. */
.cv-links {
  max-width: 26rem;
  margin: 2.5rem auto 0;
  border-top: 1px solid var(--rule);
}
.cv-links li { border-bottom: 1px solid var(--rule); }
.cv-links a {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  min-height: 52px;
  color: var(--ink-2);
  transition: color var(--t);
}
.cv-links a:hover { color: var(--ink); }
.cv-links svg { flex: 0 0 auto; color: var(--ink-3); transition: color var(--t); }
.cv-links a:hover svg { color: var(--ink); }

/* Rodapé só com a linha de fecho: sem a grade de colunas, a régua de cima
   da `.footer-bottom` duplicaria a borda do próprio rodapé. */
.footer--cv { padding-top: clamp(1.5rem, 3vw, 2rem); }
.footer--cv .footer-bottom { border-top: 0; padding-top: 0; }

/* ---------- responsivo ---------- */
@media (min-width: 640px) {
  .stats--3 { grid-template-columns: repeat(3, 1fr); }
  .edu { grid-template-columns: 1fr 1fr; }
  .xp-item { grid-template-columns: 15rem 1fr; }
  .xp-meta { padding-top: 0.35em; }
}

@media (min-width: 900px) {
  .cv-hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: clamp(3rem, 6vw, 6rem); }
  .cv-retrato { width: clamp(260px, 26vw, 360px); margin-inline: auto 0; }
  .skills { grid-template-columns: repeat(3, 1fr); }
  .xp { padding-left: 2.5rem; }
  .xp-item::before { left: calc(-2.5rem); }
  /* "OCTOBER 2022 – DECEMBER 2025" em caixa-alta espaçada precisa de 17rem
     para caber numa linha; a 15rem o período mais longo quebrava em duas. */
  .xp-item { grid-template-columns: 17rem 1fr; }
}