/* =========================================================================
   CALAJ AGENCY — Landing Page Institucional
   Direção visual: "revista, não dashboard" (ver docs/brand.md)
   Redesign (fundação visual): navy quase-preto + marfim + dourado-champanhe,
   7 seções (Hero, Selected Work, Services, Process, About, FAQ, Contact) +
   Nav + Footer — ver docs/calaj-design-spec.md e docs/calaj-redesign-plan.md.
   ========================================================================= */

/* ================= RESET BÁSICO ================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* compensa a nav fixa ao navegar por âncora */
  scroll-padding-top: 84px;
}

body,
h1, h2, h3, h4, p,
figure, blockquote, ol, ul {
  margin: 0;
}

ol, ul {
  padding: 0;
  list-style: none;
}

img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

/* ================= DESIGN TOKENS (docs/brand.md 3.2 / 3.3 / 3.4 / 3.5) =================
   PALETA — PRETO NEUTRO METÁLICO (rodada de correção 2026-08-28).
   Decisão explícita do cliente que SUBSTITUI o navy-quase-preto (#0A0E16)
   adotado na fundação visual: o site inteiro estava azulado demais e a
   identidade final é preta, neutra, metálica. Nenhum token de fundo/superfície
   escura carrega mais subtom frio — todos são cinzas puros (R=G=B). A
   profundidade não vem de "preto chapado": vem da escada de pretos neutros
   (#050505 → #0A0A0A → #101010 → #151515), da iluminação localizada em CSS/
   WebGL e dos reflexos metálicos champagne/bronze.
   Ver docs/calaj-redesign-progress.md, log "Correção visual e técnica". */
:root {
  /* --- Cores de marca --- */
  --color-ink: #050505;             /* fundo principal, preto profundo neutro */
  --color-ink-surface: #0A0A0A;     /* superfície secundária */
  --color-ink-raised: #101010;      /* superfície secundária elevada */
  --color-ink-elevated: #151515;    /* teto de elevação — nada mais claro que isto no escuro */
  --color-ink-deep: #000000;        /* vinhetas/sombras neutras */
  --color-paper: #EFEAE1;
  --color-paper-raised: #E3DDCF;
  --color-text-on-ink: #F1EDE4;     /* marfim claro */
  --color-text-on-ink-muted: #A9A49A; /* cinza quente */
  --color-text-on-paper: #17161A;
  --color-text-on-paper-muted: #6B655C;
  --color-accent: #B8935A;          /* champagne (token de marca, mantido) */
  /* Bronze escuro — é a variante da paleta usada como TEXTO e como foco
     sobre fundos claros. Escurecido de #8C6C3E para #785D35 na auditoria de
     pré-lançamento: o valor anterior media 4,05:1 sobre --color-paper e
     3,58:1 sobre --color-paper-raised, abaixo do mínimo AA de 4,5:1 para
     texto normal (afetava kickers, labels do formulário e CTAs de 12–14px).
     O novo valor mede 5,13:1 e 4,54:1. */
  --color-accent-ink: #785D35;
  /* Fundo do hover do .btn--accent. Era --color-accent-ink; virou token
     próprio para que escurecer o bronze de TEXTO acima não escurecesse
     junto o fundo do botão (onde o texto é escuro, e escurecer o fundo
     PIORA o contraste). Mantém exatamente o valor que o hover já tinha. */
  --color-accent-hover: #8C6C3E;
  --color-accent-soft: #D8BE93;     /* champagne claro — realce metálico, não texto de corpo */
  --color-bronze-deep: #6B5230;     /* bronze profundo, para gradientes de metal */
  --color-line: rgba(241, 237, 228, 0.14);
  --color-line-on-paper: rgba(23, 22, 26, 0.14);
  --color-line-accent: rgba(184, 147, 90, 0.28);

  /*
    Variantes de hairline de MAIOR contraste, reservadas a bordas de
    elementos interativos (botões outline, foco, acordeão). A hairline
    padrão a 14% de opacidade não atende WCAG 1.4.11 (mínimo 3:1) quando
    usada como única indicação de limite de um elemento interativo —
    ver docs/ux.md, seção 5.1.
  */
  --color-line-interactive-on-ink: rgba(241, 237, 228, 0.45);
  --color-line-interactive-on-paper: rgba(23, 22, 26, 0.4);

  /* --- Tipografia --- */
  --font-sans: 'Cabinet Grotesk', 'General Sans', 'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Bodoni Moda', 'Playfair Display', 'Georgia', serif;
  --font-serif-light: 'Instrument Serif', 'Bodoni Moda', Georgia, serif;

  /* --- Espaçamento (escala base 4px, docs/brand.md 3.4) --- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --space-160: 160px;
  --space-200: 200px;

  /* --- Radius: quase zero em todo o sistema (docs/brand.md 3.5) ---
     CONFLITO DE FIDELIDADE RESOLVIDO (2026-08-25): docs/brand.md 3.5 definia
     "radius total (999px)" como exceção deliberada para botões e pills. As
     seis referências visuais deste redesign mostram, de forma consistente,
     botões RETANGULARES de canto quase reto — nav ("Start a Project"), Hero
     ("View Selected Work" / "Get a Proposal"), Contato ("Chat on WhatsApp" /
     "Send Project Inquiry") e a tag "Concept Project". Como esta rodada pede
     alta fidelidade às referências, --radius-btn passa a ser quase reto e o
     pill deixa de ser usado em botões. --radius-pill é mantido como token
     (ainda usado por .btn-circle, que É circular nas referências). */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-btn: 2px;
  --radius-pill: 999px;

  /* --- Padding vertical de seção: generoso, cresce com a viewport ---
     RECALIBRADO na revisão visual final (2026-08-28): o valor anterior
     (clamp(64px, 12vw, 160px) = 160px em 1440) abria faixas vazias de
     150–160px entre o fim do conteúdo de uma seção e a borda da próxima —
     ex.: abaixo do botão do formulário de Contato e abaixo do Process.
     Nas referências a distância entre a borda da seção e a régua dourada de
     abertura fica entre ~30px (ref 03, onde o monograma da costura ocupa a
     transição) e ~97px (ref 01). 108px em 1440 fica dentro dessa faixa e
     preserva o respiro editorial sem os vazios. */
  --section-py: clamp(56px, 7.5vw, 108px);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 600ms;
}

/* ================= BASE TIPOGRÁFICA ================= */
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  background: var(--color-paper);
  color: var(--color-text-on-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.25;
}

/* Utilitário de título grande (Hero).
   Escala calibrada contra as referências: em 1440 a manchete do Hero mede
   ~60px (não ~82px, que era o resultado da escala anterior e estourava a
   coluna de texto); em 390 fica em ~44px, mantendo as 4 linhas da
   referência 06 sem quebrar palavra. */
.display,
.hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  /* A taxa de crescimento é contida de propósito: a linha mais larga da
     manchete ("DIGITAL GROWTH") mede ~9x o font-size em Bodoni, e precisa
     caber inteira na coluna de texto para o Hero fechar em 3 linhas como na
     referência 01. Crescer mais rápido que isso quebra a 3ª linha em duas. */
  font-size: clamp(2.75rem, 1.2rem + 3.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: 0.005em;
}

/* Utilitário de título de seção (H2) — reaproveitado por todas as seções via
   classe .h2, inclusive pelas páginas de case. */
.h2 {
  font-size: clamp(2rem, 2vw + 1.5rem, 3.5rem);
  margin-bottom: var(--space-32);
  max-width: 18ch;
}

/* CAIXA ALTA nos títulos de seção da LANDING (revisão visual final,
   2026-08-28): as cinco referências abrem todas as seções com a didone em
   maiúsculas — "SELECTED WORK", "SERVICES", "OUR PROCESS", "ABOUT CALAJ",
   "FREQUENTLY ASKED QUESTIONS". Só Selected Work aplicava isso; as demais
   renderizavam em caixa mista e quebravam a leitura de sistema entre seções.
   A regra é escopada por seção, e NÃO aplicada ao utilitário .h2 inteiro, de
   propósito: as páginas de case usam o mesmo utilitário para títulos longos
   em frase ("Want a system this disciplined for your brand?"), que em
   maiúsculas viram um bloco ilegível. */
#selected-work .h2,
#services .h2,
#process .h2,
#about .h2,
#faq .h2 {
  text-transform: uppercase;
}

h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem); }

.kicker {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-16);
  /* --focus já resolve para --color-accent em seções ink e
     --color-accent-ink (dourado mais escuro) em seções paper — mesmo
     padrão já usado no resto do sistema para melhorar contraste do dourado
     sobre fundo claro (5,13:1 sobre paper e 4,54:1 sobre paper-raised
     depois do ajuste do token na auditoria de pré-lançamento — passa AA
     para texto normal). */
  color: var(--focus);
}

.lead {
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  max-width: 52ch;
  color: var(--text-muted, inherit);
}

/* Utilitário de acessibilidade: esconde visualmente mas mantém para leitor de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-16);
  z-index: 1000;
  background: var(--color-accent);
  color: var(--color-text-on-paper);
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: top 200ms var(--ease-out);
}
.skip-link:focus {
  top: var(--space-16);
}

/* Foco visível consistente em todo o site */
:focus-visible {
  outline: 2px solid var(--focus, var(--color-accent-ink));
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ================= TOKENS DE TEMA POR SEÇÃO (ink / paper) =================
   Cada seção declara se é "ink" (fundo navy) ou "paper" (fundo creme). Em vez
   de repetir cor de texto/hairline em cada componente, remapeamos variáveis
   locais (--text, --text-muted, --line, --line-interactive, --focus) dentro
   do escopo da seção — os componentes (botões, cards, listas) leem essas
   variáveis e se adaptam automaticamente ao fundo em que aparecem.
   ============================================================================ */
.section--ink,
.mobile-menu,
.footer {
  --text: var(--color-text-on-ink);
  --text-muted: var(--color-text-on-ink-muted);
  --line: var(--color-line);
  --line-interactive: var(--color-line-interactive-on-ink);
  --surface-raised: var(--color-ink-raised);
  --focus: var(--color-accent);
  background: var(--color-ink);
  color: var(--text);
  position: relative;
}

.section--paper {
  --text: var(--color-text-on-paper);
  --text-muted: var(--color-text-on-paper-muted);
  --line: var(--color-line-on-paper);
  --line-interactive: var(--color-line-interactive-on-paper);
  --surface-raised: var(--color-paper-raised);
  --focus: var(--color-accent-ink);
  background: var(--color-paper);
  color: var(--text);
  position: relative;
}

.section {
  padding-block: var(--section-py);
  overflow: hidden;
}

/* Fundo escuro premium: textura sutil (gradiente radial + grão discreto via
   SVG data-URI + leve vinheta) — sem glassmorphism, sem glow, sem blur
   decorativo (proibido por docs/brand.md). Aplicado só nas seções ink via
   pseudo-elemento para não interferir com o conteúdo/hairlines reais.
   z-index negativo garante que fica sempre atrás do conteúdo da seção. */
.section--ink::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 0%, rgba(184, 147, 90, 0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(184, 147, 90, 0.06), transparent 60%),
    /* Escada de pretos NEUTROS: a profundidade do fundo escuro vem daqui
       (#101010 no topo → #050505 no miolo), não de um tom azulado. */
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 42%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>");
}
.section--ink > * {
  position: relative;
  z-index: 1;
}

/* Ondas douradas nas bordas laterais das seções ink internas (Services e
   About nas referências 03 e 04: um retículo de pontos dourados entrando
   pelas duas margens e morrendo antes do conteúdo).
   É CSS puro de propósito — um terceiro e um quarto contexto WebGL só para
   decoração de borda custariam mais do que entregam, e o Hero já carrega a
   versão animada e interativa do mesmo motivo. A máscara de pontos
   (radial-gradient repetido em mask-size) é o que transforma os dois
   gradientes elípticos num retículo em vez de uma mancha. */
.has-wave-edges::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 28% 42% at -5% 40%, rgba(184, 147, 90, 0.85), transparent 74%),
    radial-gradient(ellipse 28% 42% at 105% 60%, rgba(184, 147, 90, 0.85), transparent 74%);
  -webkit-mask-image: radial-gradient(circle at center, #000 0.9px, transparent 1.2px);
  mask-image: radial-gradient(circle at center, #000 0.9px, transparent 1.2px);
  -webkit-mask-size: 7px 7px;
  mask-size: 7px 7px;
}

/* ================= LAYOUT / GRID ================= */
/* Gutter lateral recalibrado na revisão visual final (2026-08-28): 6vw dava
   86px em 1440, e as referências 03/04/05 põem a primeira coluna de conteúdo
   ("SERVICES", "ABOUT CALAJ", "START A PROJECT") em ~7,8% da largura da
   janela — 112px em 1440. 7.8vw acerta os dois extremos: 112px em desktop e
   30px em 390, que é a margem do mockup mobile (ref 06). */
.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(24px, 7.8vw, 120px);
}

/* ================= BOTÕES =================
   3 variantes (docs/calaj-design-spec.md, seção 5): primário sólido pill,
   secundário outline pill, e link+botão circular de seta (.link-arrow +
   .btn-circle, definidos mais abaixo). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  transition: transform 200ms var(--ease-out), background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
  white-space: nowrap;
}

/* Estado "enviando" do formulário de Contato usa isto (submitBtn.disabled =
   true) — sem um estado visual próprio, o botão parecia só travado/quebrado
   em vez de "trabalhando nisso". */
.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btn--accent {
  background: var(--color-accent);
  /* Texto escuro sobre dourado: nunca texto claro sobre accent (docs/ux.md 5.1) */
  color: var(--color-text-on-paper);
}
.btn--accent:hover,
.btn--accent:focus-visible {
  background: var(--color-accent-hover);
}

.btn--outline {
  background: transparent;
  /* --focus resolve para --color-accent (ink) / --color-accent-ink (paper) —
     mesma ressalva de contraste do .kicker acima. */
  color: var(--focus);
  border-color: var(--line-interactive);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.btn--lg {
  padding: 20px 44px;
  font-size: 1rem;
}

.btn--block {
  width: 100%;
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

/* Link + botão circular de seta — variante "leve" de CTA secundário, usada
   em Selected Work, Services e Footer ("View Case Study", "Explore Service",
   "Back to top"). */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  /* Área de toque mínima de 44px (WCAG 2.5.5), sem alterar o desenho visual
     do círculo de 40px — só estende a caixa clicável do link ao redor dele. */
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* --focus: mesma lógica de contraste do .kicker/.btn--outline acima */
  color: var(--focus);
  transition: gap 200ms var(--ease-out);
}
.link-arrow:hover,
.link-arrow:focus-visible {
  gap: var(--space-16);
}

.btn-circle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-interactive);
  color: var(--focus);
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.link-arrow:hover .btn-circle,
.link-arrow:focus-visible .btn-circle {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

/* Tag pill outline pequena — único uso "macio" fora de botões (docs/calaj-design-spec.md, seção 4) */
.tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-btn);
  margin-block: var(--space-16);
}
.tag--outline {
  border: 1px solid var(--line-interactive);
  color: var(--text-muted);
}

/* ================= NAV =================
   Estado ao rolar (requisito desta etapa): no topo a nav é transparente e sem
   hairline, deixando o Hero respirar até a borda superior; a partir de ~12px
   de scroll o js/main.js adiciona .nav--solid, que traz fundo sólido, a
   hairline inferior e um padding vertical levemente menor (a barra "encolhe",
   reforçando a sensação de leitura em curso). A cor de fundo/texto continua
   trocando entre ink e paper conforme a seção ativa (data-theme). */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--color-text-on-ink);
  transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out);
}

.nav--solid {
  background: var(--color-ink);
  border-bottom-color: var(--color-line);
}

.nav[data-theme="paper"] {
  color: var(--color-text-on-paper);
}
.nav--solid[data-theme="paper"] {
  background: var(--color-paper);
  border-bottom-color: var(--color-line-on-paper);
}
/* --color-accent (#B8935A) sobre --color-paper (#EFEAE1) mede ~2.4:1 —
   falha WCAG AA de texto (4.5:1) mesmo em texto grande. Sobre --color-ink
   o mesmo dourado tem contraste alto (uso normal, não alterado aqui). Só
   nos estados hover/focus do nav enquanto ele está no tema paper, troca
   para --color-accent-ink (5,13:1 sobre paper), a variante da paleta pensada
   para leitura sobre claro — não é uma cor nova. Resolve a pendência de
   contraste registrada em docs/calaj-redesign-progress.md para os casos
   onde dourado vira cor de TEXTO sobre fundo claro; o token de marca em si
   (botões, bordas, ícones sobre ink) não foi alterado. */
.nav[data-theme="paper"] .nav__logo:hover,
.nav[data-theme="paper"] .nav__logo:focus-visible {
  color: var(--color-accent-ink);
}
.nav[data-theme="paper"] .nav__links a:hover,
.nav[data-theme="paper"] .nav__links a:focus-visible {
  color: var(--color-accent-ink);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  padding-block: 24px;
  transition: padding-block 300ms var(--ease-out);
}
.nav--solid .nav__inner { padding-block: 16px; }

.nav__logo {
  /* inline-flex + min-height dão ao logotipo os 44px de área de toque
     exigidos no mobile (media 91x24px na auditoria de pré-lançamento). O
     texto continua com a mesma métrica — só a caixa clicável cresce. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 0.9rem + 0.9vw, 1.75rem);
  letter-spacing: 0.1em;
  line-height: 1;
  font-weight: 500;
  transition: color 200ms var(--ease-out);
}
.nav__logo:hover,
.nav__logo:focus-visible {
  color: var(--color-accent);
}

/* Links centrados de verdade na barra (grid de 3 colunas no desktop, mais
   abaixo) — não empurrados para a direita junto do CTA. */
.nav__links {
  display: none;
  justify-content: center;
  gap: clamp(var(--space-24), 2.5vw, var(--space-48));
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__links a {
  display: inline-block;
  opacity: 0.85;
  transition: opacity 150ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out);
  /* Área de toque ampliada (WCAG 2.5.5) sem alterar o alinhamento vertical
     do texto na barra — padding compensado por margin negativo. */
  padding-block: 12px;
  margin-block: -12px;
}
.nav__links a:hover,
.nav__links a:focus-visible {
  opacity: 1;
  color: var(--color-accent);
}

.nav__cta {
  display: none;
  justify-self: end;
  padding: 13px 26px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

.nav__menu-toggle {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  /* Área de toque ampliada (WCAG 2.5.5, ≥44px) via padding, sem alterar o desenho visual */
  padding: 12px 6px;
}
.nav__menu-toggle-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav__menu-toggle-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 14px;
}
.nav__menu-toggle-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
}
.nav__menu-toggle[aria-expanded="true"] .nav__menu-toggle-icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav__menu-toggle[aria-expanded="true"] .nav__menu-toggle-icon span:nth-child(2) {
  opacity: 0;
}
.nav__menu-toggle[aria-expanded="true"] .nav__menu-toggle-icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ================= MENU MOBILE ================= */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  padding-top: 96px;
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: 0 clamp(24px, 8vw, 64px) var(--space-48);
}

.mobile-menu__cta {
  align-self: flex-start;
  margin-bottom: var(--space-16);
}

.mobile-menu__link {
  /* flex + min-height garantem os 44px de área de toque (mediam 149x41px). */
  display: flex;
  align-items: center;
  min-height: 44px;
  width: 100%;
  text-align: left;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--line);
}

/* ================= MONOGRAMA "C" — FOOTER =================
   Até 2026-09-02 este componente era compartilhado por 3 instâncias (Hero,
   costura Services/Process e Footer, ver docs/calaj-design-spec.md). As duas
   primeiras eram cenas 3D reais e saíram do site a pedido do cliente — o
   Hero agora usa só o campo de ondas (js/hero-wave-scene.js) como elemento
   visual. Só sobra a instância do Footer, que sempre foi puramente SVG (sem
   WebGL): um arco decorativo cortado pela borda, nunca a cena 3D completa. */
.monogram-slot {
  position: relative;
}

.monogram {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  transition: opacity 700ms var(--ease-out);
  /* Sombra de contato suave sob o objeto — única sombra permitida pelo
     sistema (docs/brand.md 3.5: sombra só para "descolar" um objeto do
     fundo, com blur alto e opacidade baixa). */
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.55));
}

/* Arco dourado sangrando pela borda direita (ref 05). A 0.7 de opacidade e
   288px em 1440 o objeto praticamente sumia no fundo ink; a referência mostra
   um arco grande, nítido e claramente legível, cortado pela borda da tela. */
/* Fortemente cortado pela borda e bem translúcido: na referência 05 sobra
   uma fatia estreita do arco no canto, escura o bastante para os links
   sociais e o "back to top" continuarem legíveis por cima dela. Uma versão
   opaca e inteira do "C" aqui derrubava o contraste desses dois blocos. */
.monogram-slot--footer {
  position: absolute;
  right: clamp(-200px, -14vw, -60px);
  bottom: -14%;
  width: clamp(200px, 24vw, 360px);
  aspect-ratio: 1 / 1;
  opacity: 0.3;
  z-index: 0;
}
/* Aqui o "C" é decoração de fundo cortada pela borda, não o objeto de marca
   em foco: sem a sombra de contato, que num arco meio fora da tela só suja o
   canto do rodapé. */
.monogram-slot--footer .monogram { filter: none; }

/* ================= HERO =================
   Ritmo vertical calibrado contra a referência 01: em 1440x900 o Hero termina
   e a seção Selected Work começa por volta dos 530px — ou seja, o Hero NÃO é
   uma tela cheia no desktop. No mobile (referência 06) acontece o inverso: o
   Hero ocupa a tela inteira, com a onda como único elemento visual atrás do
   texto e dos CTAs (o monograma que ficava empilhado abaixo deles saiu em
   2026-09-02). */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* padding-top absorve a altura da nav fixa (~76px) + respiro */
  padding-block: 108px var(--space-48);
  min-height: 100svh;
}

/* Camadas de iluminação do fundo do Hero: um "key light" quente vindo do alto
   à direita (onde o objeto fica) e uma vinheta inferior que assenta a
   composição. Puramente CSS — nenhuma imagem da referência é usada como
   background, conforme requisito desta etapa. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* key light quente localizada onde o objeto fica + vinheta PRETA NEUTRA
       (era rgba(5,7,12,…), com subtom azul) */
    radial-gradient(ellipse 55% 65% at 72% 38%, rgba(184, 147, 90, 0.16), transparent 68%),
    radial-gradient(ellipse 45% 55% at 70% 42%, rgba(241, 237, 228, 0.05), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 118%, rgba(0, 0, 0, 0.85), transparent 70%);
}

/* Campo de ondas douradas (GoldenWaveField). O elemento cobre o Hero inteiro
   e hospeda o <canvas>; o ::before é o FALLBACK em CSS puro (varredura
   diagonal discreta), que fica visível quando não há WebGL e some quando a
   cena real assume. aria-hidden no HTML: é decoração, não conteúdo.
   Ambos são absolutos dentro do Hero, então não deslocam nada. */
.hero__waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__waves::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -6%;
  width: 86%;
  height: 52%;
  transform: translateY(-50%) rotate(-11deg);
  transform-origin: center;
  opacity: 0.6;
  transition: opacity 900ms var(--ease-out);
  background:
    linear-gradient(to right, transparent 0%, rgba(184, 147, 90, 0.14) 38%, rgba(184, 147, 90, 0.05) 72%, transparent 100%);
  mask-image: repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px 7px);
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px 7px);
}

.hero__waves canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}

.hero.has-3d .hero__waves::before { opacity: 0; }
.hero.has-3d .hero__waves canvas { opacity: 1; }

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-48);
  width: 100%;
}

/* Sem max-width em "ch" aqui: a largura do caractere da Bodoni não tem
   relação confiável com a largura real da manchete em caixa alta (34ch dava
   368px, e "DIGITAL GROWTH" precisa de ~541px a 60px). Sem a segunda coluna
   do grid (removida com o monograma do Hero em 2026-09-02), quem limita a
   largura da coluna de texto no desktop é o max-width em px, no breakpoint
   correspondente — a onda ocupa o Hero inteiro por trás dela. */
.hero__copy {
  max-width: none;
}

/* Caixa alta como nas referências — o peso editorial do Hero vem da didone em
   maiúsculas, não de um peso tipográfico mais pesado. */
/* Sem text-wrap: balance aqui — as quebras da manchete são explícitas (<br>),
   e deixar o browser rebalancear brigaria com elas. */
.hero__title {
  text-transform: uppercase;
  margin-bottom: var(--space-24);
}

.hero__subheadline {
  margin-inline: 0;
  max-width: 46ch;
}

/* Rótulos de CTA diferentes por breakpoint (docs/calaj-redesign-plan.md,
   seção 10) — mobile usa rótulos mais curtos que o desktop. */
.cta-label--mobile { display: inline; }
.cta-label--desktop { display: none; }

/* Régua curta em dourado — abre as seções nas referências (um traço fino
   acima do título, no lugar de um kicker de texto repetindo a headline). */
.rule-accent {
  display: block;
  width: 48px;
  height: 1px;
  border: 0;
  margin: 0 0 var(--space-32);
  background: var(--color-accent);
}

/* ================= SELECTED WORK ================= */
/* Gutter próprio, mais estreito que o do resto do site.
   Não é inconsistência: a referência 02 abre "SELECTED WORK" em ~3,7% da
   largura da janela, contra ~7,8% de "SERVICES"/"ABOUT CALAJ"/"START A
   PROJECT" (refs 03/04/05) — a seção de trabalhos é deliberadamente mais
   larga que as outras, porque é ela que precisa acomodar duas composições
   grandes lado a lado. Intro, grid e o bloco do case 03 usam o MESMO valor,
   então tudo dentro da seção continua alinhado entre si. */
.work .container {
  padding-inline: clamp(24px, 4.5vw, 88px);
}

.work__intro {
  text-align: left;
  margin-bottom: var(--space-64);
}
.work__intro .h2 {
  max-width: none;
  margin-inline: 0;
  margin-bottom: var(--space-16);
}
.work__lead {
  margin: 0;
}

.work__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-64);
  margin-bottom: var(--space-64);
}

/* Cada case (01/02 no grid, 03 no bloco featured) é um <article>/<div>
   posicionado, para que o link "de capa" (.work-case__cover) possa cobrir o
   cartão inteiro num único elemento focável — ver esse seletor abaixo. */
.work-case {
  position: relative;
}

.work-case__head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}
.work-case__number {
  font-family: var(--font-serif-light);
  font-size: 1.125rem;
  color: var(--focus);
}
.work-case__hairline {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.5;
  max-width: 80px;
}

/* Moldura da composição real (portfolio/<slug>/card.svg) — a proporção 4:3
   bate exatamente com o formato em que cada card.svg foi desenhado, então a
   imagem nunca é recortada. A borda muda de cor no hover/foco do cartão
   inteiro (não é interativa por si: ver .work-case__cover). */
.work-case__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-24);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: border-color 300ms var(--ease-out);
}
.work-case__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

.work-case__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  text-transform: uppercase;
  margin-bottom: var(--space-8);
}

.work-case__kicker {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--focus);
}

/* Linha de metadados: selo "Concept Project" + ano — as duas peças de
   identificação exigidas ao lado da categoria (kicker) e do nome (título). */
.work-case__meta {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.work-case__meta .tag { margin-block: var(--space-16) 0; }
.work-case__year {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.work-case__body {
  color: var(--text-muted);
  margin: var(--space-12) 0 var(--space-24);
}

/* Link "de capa": único elemento focável do cartão, cobrindo cabeçalho,
   mídia, título e texto num só alvo — assim o cartão inteiro é clicável e
   fica em UM tab stop, com nome acessível composto (título + categoria +
   chamada), em vez de duplicar um aria-label escrito à mão que pode
   dessincronizar do texto visível. O texto "View Case Study" abaixo permanece
   como <span> decorativo (não um link próprio) por essa razão. */
.work-case__cover {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Hover/foco do cartão inteiro (aciona via :hover/:focus-within na ancestral
   — passar o mouse ou focar o link de capa, que é descendente, já ativa os
   dois pseudo-estados no .work-case pai): zoom suave na imagem, borda dourada
   na moldura, seta do CTA desloca e o círculo acende — a "indicação de
   abertura" pedida, sem precisar de JS. */
.work-case:hover .work-case__media,
.work-case:focus-within .work-case__media {
  border-color: var(--color-accent);
}
.work-case:hover .work-case__media img,
.work-case:focus-within .work-case__media img {
  transform: scale(1.045);
}
.work-case:hover .work-case__link,
.work-case:focus-within .work-case__link {
  gap: var(--space-16);
}
.work-case:hover .work-case__link .btn-circle,
.work-case:focus-within .work-case__link .btn-circle {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.work-case:hover .work-case__link .btn-circle svg,
.work-case:focus-within .work-case__link .btn-circle svg {
  transform: translateX(2px);
}
.btn-circle svg { transition: transform 200ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .work-case__media img { transition: none; }
}

/* Case 03 — painel escuro INSET, "flutuando" sobre o fundo paper por
   contraste de tom (não por sombra — regra do sistema, docs/brand.md 3.5).
   Deixou de ser full-bleed na revisão visual final: a referência 02 mostra
   papel visível dos dois lados do bloco, alinhado ao gutter da seção. O
   gutter agora vem do .work__featured-wrap (um .container), e o padding
   INTERNO do painel é próprio. */
.work__featured-wrap { position: relative; }

.work-case--featured {
  padding-inline: clamp(var(--space-24), 3vw, var(--space-48));
  border-radius: var(--radius-sm);
  /* Reescopa as variáveis de tema para ink dentro deste bloco escuro — sem
     isto, elementos filhos (número, hairlines, borda da mídia) herdariam as
     variáveis de --color-*-on-paper da seção ao redor (Selected Work é
     section--paper), com contraste/legibilidade ruins sobre este fundo ink. */
  --text: var(--color-text-on-ink);
  --text-muted: var(--color-text-on-ink-muted);
  --line: var(--color-line);
  --line-interactive: var(--color-line-interactive-on-ink);
  --surface-raised: var(--color-ink-raised);
  --focus: var(--color-accent);
  /* Superfície secundária (#0A0A0A), não o fundo principal: este painel
     "flutua" sobre o paper por contraste de tom, dentro da escada neutra. */
  background: var(--color-ink-surface);
  color: var(--text);
  padding-block: var(--space-48);
  overflow: hidden;
}
.work-case--featured::before {
  /* Reaproveita a mesma textura sutil das seções ink */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(ellipse 70% 60% at 90% 10%, rgba(184, 147, 90, 0.12), transparent 60%);
}
.work-case--featured .work-case__hairline { background: var(--color-accent); }
.work-case--featured .work-case__kicker { color: var(--color-accent); }
.work-case--featured .work-case__body { color: var(--color-text-on-ink-muted); }
.work-case--featured__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
}
.work-case--featured .work-case__head { grid-column: 1 / -1; }

/* Composição única (campaign-system/card.svg, 16:9) no lugar dos 3 cartões de
   dispositivo hardcoded: o arquivo já foi desenhado especificamente para
   preencher este bloco full-bleed com os 3 dispositivos lado a lado — ver
   comentário no próprio SVG. Mesmo tratamento de borda/zoom de .work-case__media. */
/* 2:1 em vez de 16:9. O card.svg é 1600x900, mas o conteúdo desenhado
   termina em y=682 — a faixa 682–900 é fundo vazio. Recortar os últimos
   ~11% pelo rodapé (object-position: center top) tira só esse vazio, deixa
   o bloco mais próximo da proporção baixa e larga da referência 02 e não
   toca em nenhum dos três dispositivos. */
.work-case--featured__media {
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--color-line);
  transition: border-color 300ms var(--ease-out);
}
.work-case--featured__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 700ms var(--ease-out);
}
.work-case--featured:hover .work-case--featured__media,
.work-case--featured:focus-within .work-case--featured__media {
  border-color: var(--color-accent);
}
.work-case--featured:hover .work-case--featured__media img,
.work-case--featured:focus-within .work-case--featured__media img {
  transform: scale(1.03);
}

/* ================= PÁGINAS DE CASE (work/aurea, work/verdeo, work/campaign-system) =================
   As três páginas usam o CHROME do site principal (nav, footer, .section /
   .container / .h2 / .kicker / .lead / .btn / .tag já existentes) — só os
   componentes realmente novos (capa, selo de problema fictício, lista de
   entregáveis, galeria, CTA final, paginação entre cases) ganham classes
   próprias aqui. A "identidade" mostrada dentro de cada case usa as classes
   .au-*/.vd-*/.cs-* já construídas em portfolio/<slug>/<slug>.css — carregadas
   à parte em cada página, NUNCA portfolio-kit.css (que reseta body/fontes e
   colidiria com o chrome do site). */

.case-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-32);
}
.case-breadcrumb a { color: var(--text-muted); transition: color 150ms var(--ease-out); }
.case-breadcrumb a:hover,
.case-breadcrumb a:focus-visible { color: var(--focus); }
.case-breadcrumb span[aria-current] { color: var(--text); }
.case-breadcrumb__sep { opacity: 0.5; }

/* ---- Capa ---- */
.case-hero {
  padding-block: clamp(120px, 12vw + 40px, 176px) var(--space-32);
}
.case-hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.75rem, 1.6rem + 5.5vw, 5.5rem);
  text-transform: uppercase;
  line-height: 0.98;
  margin-bottom: var(--space-24);
}
.case-hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}
.case-hero__row .tag { margin-block: 0; }
.case-hero__year {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.case-hero__lead {
  max-width: 62ch;
  margin-bottom: var(--space-32);
}
.case-hero__stage {
  margin-top: var(--space-48);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* ---- Cabeçalho reutilizável de seção (kicker + h2 + nota opcional) ---- */
.case-section__head { margin-bottom: var(--space-48); }
.case-section__head .h2 { margin-bottom: var(--space-16); }
.case-section__head .lead { margin: 0; }

.case-columns {
  display: grid;
  gap: var(--space-32);
  grid-template-columns: 1fr;
}
.case-columns > p { color: var(--text-muted); }
.case-columns__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--focus);
  margin-bottom: var(--space-12);
}

/* ---- Paleta e tipografia do sistema mostrado (seção Identity) — versões
   enxutas dos componentes que já existem em portfolio-kit.css, redesenhadas
   aqui para não precisar carregar aquele arquivo (que reseta body/fontes) só
   por causa de duas classes. ---- */
.case-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-16);
  margin-top: var(--space-32);
}
.case-swatch { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.case-swatch__chip { height: 84px; }
.case-swatch__meta { padding: var(--space-12) var(--space-16); background: var(--surface-raised); }
.case-swatch__name { font-size: 0.8125rem; font-weight: 600; }
.case-swatch__hex { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.case-swatch__role { font-size: 0.75rem; color: var(--text-muted); margin-top: var(--space-8); line-height: 1.5; }

.case-type { border-top: 1px solid var(--line); padding-block: var(--space-24); }
.case-type:last-of-type { border-bottom: 1px solid var(--line); }
.case-type__label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-12);
}
.case-type__sample { overflow-wrap: anywhere; }

/* ---- Selo do problema fictício: precisa deixar claro, sem ambiguidade, que
   nada ali é um cliente real (requisito explícito da tarefa). ---- */
.case-problem {
  border: 1px solid var(--line-interactive);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-32);
  margin-top: var(--space-32);
  background: var(--surface-raised);
}
.case-problem__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--focus);
  margin-bottom: var(--space-16);
}
.case-problem__tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.case-problem p { margin-bottom: var(--space-12); }
.case-problem p:last-child { margin-bottom: 0; }

/* ---- Entregáveis: lista numerada em 2 colunas no desktop ---- */
.case-deliverables {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.case-deliverables li {
  display: flex;
  gap: var(--space-16);
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.case-deliverables li::before {
  content: attr(data-n);
  font-family: var(--font-serif-light);
  font-size: 0.9375rem;
  color: var(--focus);
  flex-shrink: 0;
}

/* ---- Galeria: grade responsiva com a mesma linguagem de hover do card da
   Selected Work (zoom suave + borda que acende) ---- */
.case-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}
.case-gallery__item { display: flex; flex-direction: column; gap: var(--space-12); }
.case-gallery__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  transition: border-color 300ms var(--ease-out);
  background: var(--surface-raised);
}
.case-gallery__frame img { display: block; width: 100%; height: auto; transition: transform 700ms var(--ease-out); }
.case-gallery__item:hover .case-gallery__frame,
.case-gallery__item:focus-within .case-gallery__frame { border-color: var(--color-accent); }
.case-gallery__item:hover .case-gallery__frame img,
.case-gallery__item:focus-within .case-gallery__frame img { transform: scale(1.04); }
.case-gallery__caption { font-size: 0.8125rem; color: var(--text-muted); }
.case-gallery__caption b { color: var(--text); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .case-gallery__frame img { transition: none; }
}

/* ---- CTA final: reaproveita .btn/.cta-group, sem formulário duplicado — o
   pedido é "CTA para contratar a Calaj", não um segundo formulário. ---- */
.case-cta {
  text-align: center;
  max-width: 56ch;
  margin-inline: auto;
}
.case-cta .cta-group { justify-content: center; }

/* ---- Paginação entre cases (anterior / todos / próximo) ---- */
.case-pagenav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block: var(--space-48);
  border-top: 1px solid var(--line);
}
.case-pagenav__all {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.case-pagenav__all:hover,
.case-pagenav__all:focus-visible { color: var(--focus); }
.case-pagenav__next { text-align: right; }
.case-pagenav__dir {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}
.case-pagenav__title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
}

@media (min-width: 700px) {
  .case-columns { grid-template-columns: repeat(3, 1fr); }
  .case-deliverables { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-48); }
  .case-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .case-hero__lead { font-size: 1.25rem; }
}

/* ================= SERVICES ================= */
/* `.section` zera overflow para hidden por padrão (textura de fundo das
   seções ink). #services precisa só do `overflow-x: clip`: em exatamente
   768px a grade de três colunas de Serviços fica mais larga que o container
   e o terceiro card estoura ~93px para a direita — sem o clip isso vira barra
   de rolagem horizontal na página inteira. Corrigir a grade é trabalho da
   seção Serviços, fora do escopo desta rodada — registrado em
   docs/calaj-redesign-progress.md. (Até 2026-09-02 a regra também tinha
   `overflow-y: visible`, necessário para o monograma da costura
   Services/Process protruir para fora da seção; removido junto com ele.) */
#services { overflow-x: clip; }

/* Cards SEPARADOS, cada um com a sua própria moldura hairline — não uma
   tabela contínua de bordas compartilhadas. A referência 03 mostra três
   painéis com ~12px de respiro entre eles, e é esse respiro que os faz ler
   como três ofertas e não como uma grade única. */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

.service-panel {
  padding: var(--space-32);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.service-panel__mobile-icon {
  width: 30px;
  height: 30px;
  color: var(--color-accent);
  margin-bottom: var(--space-16);
}

.service-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}
.service-panel__number {
  font-family: var(--font-serif-light);
  font-size: 1.125rem;
  color: var(--color-accent);
}
.service-panel__hairline {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.5;
  max-width: 60px;
}

.service-panel__title {
  font-family: var(--font-serif);
  text-transform: uppercase;
  font-size: clamp(1.375rem, 1.4vw + 1rem, 1.75rem);
  margin-bottom: var(--space-12);
}

/* Dourado, não cinza: na referência 03 a frase de posicionamento de cada
   card é a única linha de corpo em accent — é ela que separa a promessa
   (dourada) da lista de entregáveis (marfim) logo abaixo. */
.service-panel__desc {
  color: var(--color-accent);
  margin-bottom: var(--space-24);
}

.service-panel__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
}
.service-panel__bullets li {
  position: relative;
  padding-left: var(--space-16);
}
.service-panel__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}

.service-panel__price-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--line);
  padding-top: var(--space-16);
  margin-top: auto;
}
.service-panel__price {
  font-size: 1.25rem;
  margin-bottom: var(--space-16);
  color: var(--color-accent);
}

/* ================= PROCESS ================= */
.process-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  border-left: 1px solid var(--line);
  padding-left: var(--space-24);
}

.process-list__step { position: relative; }

/* Mesmo padrão número+hairline de .work-case__head/.service-panel__head,
   reaproveitado aqui para que os três blocos de "listagem numerada" do site
   leiam como um sistema só. No desktop a hairline termina num círculo-seta
   (.process-list__connector) que "aponta" para a próxima etapa — omitido no
   último passo, que não tem próxima etapa. */
.process-list__head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-8);
}

.process-list__number {
  font-family: var(--font-serif-light);
  font-size: 1.5rem;
  color: var(--color-accent-ink);
  flex-shrink: 0;
}

/* "Desenho" da linha: parte fechada (scaleX 0) e abre da esquerda para a
   direita junto com o data-reveal do passo (.is-visible, main.js). Com
   prefers-reduced-motion a regra global (transition-duration: 0.01ms)
   já neutraliza a transição — a linha aparece pronta, sem desenhar. */
.process-list__hairline {
  /* Diferente de .work-case__hairline/.service-panel__hairline (acento curto
     e decorativo, sempre 80px): aqui a linha é o DIVISOR funcional entre
     etapas — precisa esticar até o círculo-seta da próxima coluna no
     desktop (reference 03), então não tem teto de largura. */
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.5;
  transform: scaleX(1);
  transform-origin: left;
}
/* Estado "fechado" só existe com JS disponível (mesma regra do resto do
   sistema de reveal: sem .js no <html>, nada começa oculto/reduzido). */
.js [data-reveal] .process-list__hairline {
  transform: scaleX(0);
  transition: transform 700ms var(--ease-out) 120ms;
}
.js [data-reveal].is-visible .process-list__hairline { transform: scaleX(1); }

.process-list__connector {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-interactive);
  color: var(--focus);
}
.js [data-reveal] .process-list__connector {
  opacity: 0;
  transition: opacity 500ms var(--ease-out) 400ms;
}
.js [data-reveal].is-visible .process-list__connector { opacity: 1; }

/* Didone, como todos os títulos de bloco do sistema (referência 03 mostra
   DISCOVER/DEFINE/BUILD/LAUNCH na mesma serif dos títulos de seção, não na
   sans) — era o único bloco numerado do site que fugia disso. */
.process-list__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 0.8vw + 1rem, 1.5rem);
  text-transform: uppercase;
  margin-bottom: var(--space-8);
}

.process-list__desc {
  color: var(--text-muted);
  max-width: 42ch;
  margin-bottom: var(--space-8);
}

.process-list__duration {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

/* ================= ABOUT ================= */
.about__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
  align-items: start;
  margin-bottom: var(--space-64);
}

.about__subheadline {
  color: var(--color-accent);
  font-size: 1.0625rem;
  margin-bottom: var(--space-24);
}

.about__hairline {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--line-interactive);
  margin-bottom: var(--space-24);
}

.about__text p {
  color: var(--text-muted);
  margin-bottom: var(--space-16);
  max-width: 46ch;
}
.about__text p:last-of-type { margin-bottom: 0; }

/* .about__visual: preenche a segunda coluna do grid que ficaria vazia sem
   os founder-cards (ver comentário em index.html) com o monograma da marca.
   Só a sombra grande/baixa-opacidade para "descolar" a imagem do fundo é
   usada como efeito — sem glow nem blur decorativo, proibidos por
   docs/brand.md. drop-shadow (não box-shadow) porque o PNG tem fundo
   transparente: a sombra acompanha o contorno real do monograma. */
.about__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about__logo-wrap {
  display: inline-block;
  width: 100%;
  max-width: 280px;
}

.about__logo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 32px 60px rgba(0, 0, 0, 0.45));
}

/* CTA de About — "conhecer os serviços ou iniciar um projeto" (pedido
   explícito desta etapa): aponta para #contact, que é o próximo passo de
   conversão da página a partir daqui (Services já ficou pra trás no
   scroll). Reaproveita o mesmo par .link-arrow + .btn-circle usado em
   Selected Work/Services — nenhum componente novo. */
.about__cta { margin-top: var(--space-24); }

/* .about__founders / .founder-card: sem uso desde a auditoria de
   pré-lançamento (2026-08-30) — os cards com placeholder "FOUNDER 01/02"
   foram removidos do HTML público até o cliente confirmar nomes, cargos e
   retratos reais (ver comentário em index.html e docs/final-prelaunch-audit.md).
   Regras mantidas de propósito: reintroduzir a marcação com os dados reais é
   o suficiente para reativá-las, sem reescrever o CSS. */
.about__founders {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-16);
}

/* Nome e função vivem DENTRO da moldura, como na referência 04 — a moldura
   passou do retrato para o card inteiro, com uma hairline separando o
   retrato da legenda. Antes o par nome/função flutuava solto abaixo do
   quadro e o card perdia a leitura de "ficha". */
.founder-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-12) var(--space-16);
  background: linear-gradient(160deg, var(--color-ink-elevated) 0%, var(--color-ink-surface) 80%);
}

.founder-card__portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.founder-card__portrait-icon {
  width: 25%;
  height: 25%;
  color: var(--color-text-on-ink-muted);
  opacity: 0.5;
}

/* Molduras de canto (bracket corners) — 4 marcas em L, docs/calaj-design-spec.md seção 4 */
.founder-card__corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--color-accent);
  border-style: solid;
  border-width: 0;
}
.founder-card__corner--tl { top: 10px; left: 10px; border-top-width: 1.5px; border-left-width: 1.5px; }
.founder-card__corner--tr { top: 10px; right: 10px; border-top-width: 1.5px; border-right-width: 1.5px; }
.founder-card__corner--bl { bottom: 10px; left: 10px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.founder-card__corner--br { bottom: 10px; right: 10px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.founder-card__name {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-4);
}
.founder-card__role {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* A faixa de princípios encosta na borda inferior da seção, como na
   referência 04 — o padding de seção abaixo dela abria uma faixa vazia de
   ~145px entre a régua e o início do FAQ. */
.guides {
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 1;
  margin-top: var(--space-48);
  margin-bottom: calc(var(--section-py) * -1);
}
.guides__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-block: var(--space-24);
}
.guides__label {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
/* Caixa alta letterspaced e itens distribuídos por toda a largura, como na
   referência 04 — a versão em caixa mista, encolhida à esquerda, deixava
   metade da faixa vazia e não lia como uma régua de princípios. */
.guides__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.guides__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line-interactive);
  color: var(--color-accent);
}

/* ================= FAQ ================= */
/* FAQ e Contato são duas seções paper adjacentes: somados, os dois paddings
   de seção abriam ~215px de creme vazio entre a última pergunta e a régua de
   abertura do Contato. O padding inferior do FAQ é reduzido só nessa costura. */
.faq { padding-bottom: var(--space-64); }

.faq__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}
.faq__intro .h2 { max-width: none; margin-bottom: 0; }

.accordion {
  border-top: 1px solid var(--line);
}

.accordion__item {
  border-bottom: 1px solid var(--line);
}

/* Linhas mais compactas: com 24px em cima e embaixo cada pergunta ocupava
   83px e a lista inteira ficava quase o dobro da altura da referência 04
   (~47px por linha). 16px mantém a área de toque acima de 44px (16 + 16 +
   ~28px de linha) e devolve a densidade editorial da referência. */
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  text-align: left;
  padding-block: var(--space-16);
}

/* Divisor vertical entre o número e a pergunta, como na referência 04. */
.accordion__number {
  font-family: var(--font-serif-light);
  color: var(--color-accent-ink);
  flex-shrink: 0;
  padding-right: var(--space-16);
  border-right: 1px solid var(--line);
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* Serif em corpo pequeno, não sans em 28px: na referência 04 as perguntas
   são a mesma didone dos títulos, num tamanho de leitura — a versão em sans
   semibold grande fazia a lista competir com o próprio H2 da seção. */
.accordion__question {
  flex: 1 1 auto;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.35;
}

/* "+"/"−" desenhado em CSS puro (duas barras; a vertical some quando
   aberto) em vez de caractere no HTML: o estado vem só de aria-expanded no
   trigger, então o ícone nunca pode ficar dessincronizado do texto pra
   leitor de tela — não existe um segundo lugar no JS pra esquecer de
   atualizar. */
.accordion__icon {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-interactive);
  color: var(--color-accent-ink);
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out);
}
.accordion__icon::before { width: 12px; height: 1.5px; } /* barra horizontal — sempre presente */
.accordion__icon::after { width: 1.5px; height: 12px; }  /* barra vertical — some no estado aberto */
.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}
.accordion__trigger:hover .accordion__icon,
.accordion__trigger:focus-visible .accordion__icon {
  border-color: var(--color-accent);
}

/* Animação de altura sem o atributo `hidden` (que vai direto pra display:none
   e não anima): o painel fica sempre no DOM, com overflow:hidden e height
   controlada por JS (main.js) entre 0 e scrollHeight, depois travada em
   `auto` já com o painel aberto (pra reagir a reflow/resize sem recalcular).
   `aria-hidden` faz o trabalho que o `hidden` fazia pra leitor de tela — put
   e tirado em sincronia com aria-expanded do trigger, não com o fim da
   transição. O padding/fundo/radius moram no -inner: se estivessem aqui, a
   caixa apareceria com padding "sobrando" mesmo em height:0. Neutralizado
   por prefers-reduced-motion pela regra global (*,*::before,*::after
   {transition-duration:0.01ms !important}) — sem código extra aqui. */
.accordion__panel {
  height: 0;
  overflow: hidden;
  /* Alinha a resposta à coluna da pergunta: largura do número + padding e
     borda do divisor + gap do trigger. */
  margin-left: calc(1.75rem + var(--space-32) + 1px);
  max-width: 62ch;
  color: var(--text-muted);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  transition: height 380ms var(--ease-out);
}
.accordion__panel-inner {
  padding: var(--space-16) var(--space-16) var(--space-24);
  /* --text-muted (#6B655C) mede 4,26:1 contra --surface-raised
     (--color-paper-raised, #E3DDCF) — abaixo do mínimo AA de 4,5:1 pra texto
     normal. Correção escopada só aqui (não no token global --text-muted,
     usado em outros fundos onde já passa): mesmo matiz, um pouco mais
     escuro, 5,34:1 medido. */
  color: #5C5650;
}

/* ================= CONTACT ================= */
.contact {
  position: relative;
}
/* Watermark tipográfico gigante "CALAJ" de fundo — puramente decorativo */
.contact__watermark {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-size: clamp(6rem, 18vw, 14rem);
  line-height: 1;
  color: var(--color-text-on-paper);
  opacity: 0.04;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

.contact__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
}

/* Romano, não itálico, e ocupando a coluna inteira: na referência 05 a
   headline de Contato é a mesma didone vertical do resto do site, em duas
   linhas largas. O itálico + max-width de 14ch quebrava a frase em quatro
   linhas estreitas e introduzia um estilo tipográfico que não existe em
   nenhuma outra parte da página. */
.contact__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.75rem, 2.6vw + 1rem, 2.75rem);
  line-height: 1.2;
  margin-bottom: var(--space-16);
  max-width: 20ch;
}

.contact__intro .lead { margin-bottom: var(--space-32); }

.contact__whatsapp { margin-bottom: var(--space-12); }

.contact__note {
  font-style: italic;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

/* ================= FORMULÁRIO EM DUAS ETAPAS ================= */
.contact-form__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.contact-form__step[hidden] {
  display: none;
}

/* CTA principal do formulário em largura total, como o "SEND PROJECT
   INQUIRY" da referência 05 — encostado à esquerda ele lia como um botão
   secundário no fim de uma coluna larga de campos. */
.contact-form__work-cta {
  align-self: stretch;
  width: 100%;
}

.contact-form__step--brief {
  background: #FFFFFF;
  padding: var(--space-32);
  border-radius: var(--radius-md);
}

.contact-form__back {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 200ms var(--ease-out);
}
.contact-form__back:hover,
.contact-form__back:focus-visible {
  color: var(--color-accent-ink);
}

.contact-form__brief-heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  color: var(--color-ink);
}

.contact-form__brief-empty {
  color: var(--text-muted);
}

.contact-form__brief-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-top: var(--space-24);
  border-top: 1px solid var(--line);
}
.contact-form__brief-section[hidden] {
  display: none;
}

.contact-form__brief-category {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

.contact-form__step--brief .contact-form__field label {
  color: var(--color-ink);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.contact-form__field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

.contact-form__field input:not([type="checkbox"]),
.contact-form__field select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-interactive);
  border-radius: 0;
  padding-block: var(--space-12);
  transition: border-color 200ms var(--ease-out);
  appearance: none;
}
/* Seta customizada mínima para os <select>, mantendo o tratamento hairline
   (sem borda de caixa nativa) consistente com os demais campos do formulário */
.contact-form__field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'><path d='M6 9l6 6 6-6' fill='none' stroke='%238C6C3E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: var(--space-24);
}
.contact-form__field input:not([type="checkbox"]):focus-visible,
.contact-form__field select:focus-visible {
  border-color: var(--color-accent);
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.contact-form__optional {
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--text-muted);
}

/* Estado de erro de campo — substitui o balão de validação nativo do
   navegador (o <form> tem novalidate): borda vermelha + mensagem inline no
   padrão visual do site, ligada ao campo por aria-describedby (já no HTML)
   e aria-invalid (js/main.js). */
.contact-form__field-error {
  display: none;
  font-size: 0.8125rem;
  color: #A6483F;
}
.contact-form__field--error input:not([type="checkbox"]),
.contact-form__field--error select,
.contact-form__field--error textarea {
  border-color: #A6483F;
}
.contact-form__field--error .contact-form__field-error {
  display: block;
}

.contact-form__checkbox {
  cursor: pointer;
}

.contact-form__checkbox span {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-interactive);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}

.contact-form__checkbox input:checked + span {
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.contact-form__checkbox input:focus-visible + span {
  outline: 2px solid var(--focus, var(--color-accent-ink));
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .contact-form__checkbox:hover span {
    border-color: var(--color-accent);
  }
}

/* ================= SELETOR DE SERVIÇOS (tópicos → painel de serviços) ================= */
.service-picker__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.services-topic {
  /* padding vertical de 12px garante altura de toque ≥44px (WCAG 2.5.5) */
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-interactive);
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.services-topic:hover,
.services-topic.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.service-picker__panel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-16);
}
.service-picker__panel[hidden] {
  display: none;
}

.service-picker__confirm {
  margin-top: var(--space-24);
}

.service-picker__summary {
  margin-top: var(--space-12);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.contact-form__field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-interactive);
  border-radius: var(--radius-md);
  padding: var(--space-16);
  min-height: 110px;
  resize: vertical;
  transition: border-color 200ms var(--ease-out);
}
.contact-form__field textarea:focus-visible {
  border-color: var(--color-accent);
}

.contact-form__consent {
  font-size: 0.8125rem;
  color: var(--text-muted);
  max-width: 52ch;
  margin-top: var(--space-16);
}

.contact-form__submit-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-top: var(--space-16);
}

/* [hidden] em <svg> não é confiável entre navegadores — testado nesta sessão:
   um <svg hidden> puro computa display:inline (não "none") no Chrome, porque
   a regra `[hidden]{display:none}` do stylesheet UA nem sempre alcança
   elementos SVG embutidos em HTML. Sem esta regra explícita, o ícone de
   seta e o spinner do botão de envio apareceriam SOBREPOSTOS o tempo todo,
   um por cima do outro. */
[data-submit-icon][hidden],
[data-submit-spinner][hidden] {
  display: none;
}

/* Spinner do estado "enviando" — mesmo peso visual do ícone de seta que
   substitui (18px, currentColor), só trocando de conteúdo, não de layout. */
.contact-form__spinner {
  animation: contact-spinner-spin 900ms linear infinite;
}
@keyframes contact-spinner-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  /* Girar infinitamente é exatamente o tipo de movimento que
     prefers-reduced-motion pede pra evitar — a regra global de
     transition-duration não alcança @keyframes, então este spinner precisa
     do próprio override: fica parado, só como indicador visual estático de
     "ocupado" (o texto do botão já diz "Sending…" pro mesmo propósito). */
  .contact-form__spinner { animation: none; }
}

.contact-form__wait-msg,
.contact-form__wait-msg:hover,
.contact-form__wait-msg:focus-visible {
  cursor: default;
  /* --color-accent sobre --color-paper mede ~2.4:1 (falha WCAG AA de
     texto); --color-accent-ink, mesma paleta, mede 5,13:1 — texto de
     confirmação de envio precisa ser lido, não só decorativo. */
  color: var(--color-accent-ink);
  border-color: transparent;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}
.contact-form__wait-msg svg { flex-shrink: 0; }
.contact-form__wait-msg[hidden] {
  display: none;
}

.contact-form__submit-error {
  margin-top: var(--space-8);
  font-size: 0.875rem;
  color: #A6483F;
}
.contact-form__submit-error[hidden] {
  display: none;
}

/* ================= FOOTER ================= */
.footer {
  padding-block: var(--space-64) var(--space-32);
  position: relative;
  overflow: hidden;
}

.footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  padding-bottom: var(--space-48);
  border-bottom: 1px solid var(--line);
}

.footer__col--brand { max-width: 34ch; }

.footer__logo {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: var(--space-12);
}
.footer__hairline {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-accent);
  margin-bottom: var(--space-16);
}
.footer__tagline {
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* Caixa alta letterspaced: na referência 05 os links do rodapé leem como
   uma lista de seções (WORK / SERVICES / PROCESS), não como texto corrido. */
.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer__links a {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  text-align: left;
  transition: color 200ms var(--ease-out);
  /* Área de toque ampliada para ≥44px (WCAG 2.5.5) sem alargar o
     espaçamento visual entre os links — padding compensado por margin
     negativo equivalente. */
  padding-block: 10px;
  margin-block: -10px;
}
.footer__links a:hover,
.footer__links a:focus-visible { color: var(--text); }

.footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  font-size: 0.9375rem;
}

.footer__contact-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  /* Área de toque ampliada para ≥44px (WCAG 2.5.5), compensada para não
     alargar o espaçamento visual entre os dois itens de contato. */
  padding-block: 6px;
  margin-block: -6px;
}
.footer__contact-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line-interactive);
  padding: 7px;
  color: var(--color-accent);
}

.footer__social {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  font-size: 0.9375rem;
}
.footer__social-item {
  display: inline-flex;
  align-items: center;
  /* 44px de área de toque quando este item vira link de verdade (o Instagram
     é injetado por js/main.js a partir de js/site-config.js). Media 108x32px. */
  min-height: 44px;
  gap: var(--space-12);
  color: var(--text-muted);
}
.footer__social-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line-interactive);
  padding: 7px;
  color: var(--color-accent);
}

.footer__bottom {
  position: relative;
  z-index: 1;
  padding-top: var(--space-32);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  font-size: 0.8125rem;
  color: var(--text-muted);
}
/* Barra inferior em três zonas — legal à esquerda, copyright CENTRADO,
   "back to top" à direita (ref 05). Antes tudo ficava encostado à esquerda
   e o copyright colava nos links de Privacy/Terms. */
.footer__bottom-legal {
  display: flex;
  gap: var(--space-24);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Privacy/Terms viraram <a> reais e "Cookie Settings" é um <button> (ver
   comentário no HTML) — o divisor usa um seletor universal para os três. */
.footer__bottom-legal > * + * {
  padding-left: var(--space-24);
  border-left: 1px solid var(--line);
}
.footer__bottom-legal a:hover,
.footer__bottom-legal a:focus-visible { color: var(--text); }
/* "Cookie Settings" reabre o banner de consentimento do Analytics
   (js/analytics.js) — reseta a aparência nativa de <button> para igualar
   os links vizinhos, sem virar um componente novo. */
.footer__cookie-settings {
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.footer__cookie-settings:hover,
.footer__cookie-settings:focus-visible { color: var(--text); }
.footer__copyright {
  flex: 1 1 auto;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.footer__back-to-top {
  margin-left: auto;
}

/* ================= BARRA CTA FIXA (MOBILE) ================= */
.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  padding: var(--space-12) var(--space-16);
  padding-bottom: max(var(--space-12), env(safe-area-inset-bottom));
  background: var(--color-ink);
  border-top: 1px solid var(--color-line);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out);
}
.mobile-cta-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* ================= FOLIO (indicador de página) ================= */
.folio {
  position: fixed;
  left: var(--space-24);
  bottom: var(--space-24);
  z-index: 70;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-text-on-ink-muted);
  display: none;
  pointer-events: none;
  mix-blend-mode: difference;
}

/* ================= REVEAL / SCROLL ANIMATIONS =================
   Estado inicial oculto só é aplicado quando JS está disponível (classe "js"
   no <html>). Sem JS, o conteúdo permanece 100% visível. Reveal simplificado
   para opacidade + translateY (sem clip-path) nesta rodada — o clip-path em
   headings foi removido do sistema por causa de um bug de renderização
   conhecido em Safari/iOS antigos (ver histórico em docs/ux.md). */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ================= RESPONSIVO — TABLET (≥768px) ================= */
@media (min-width: 768px) {
  .hero {
    padding-block: 116px var(--space-64);
    min-height: 0;
  }
  /* Sem a coluna do monograma (removida em 2026-09-02): a coluna de texto
     ganha um max-width em px — "DIGITAL GROWTH" precisa de ~541px a 60px —
     em vez de dividir a linha com um grid de 2 colunas. A onda cobre o Hero
     inteiro por trás, então o espaço à direita do texto continua ocupado
     visualmente, só que pela onda em vez de um objeto separado. */
  .hero__inner {
    display: block;
  }
  .hero__copy {
    max-width: 620px;
  }

  .cta-label--mobile { display: none; }
  .cta-label--desktop { display: inline; }

  /* Escopado a ".work__grid .work-case" (não ".work-case" sozinho) para não
     atingir também ".work-case--featured", que é um irmão fora do grid de
     prévia e tem sua própria estrutura de layout full-bleed logo abaixo. */
  /* Uma coluna de case por linha entre 768 e 1023px: com dois cases lado a
     lado nessa faixa, cada coluna de texto ficava com ~138px e o kicker
     ("BRAND STRATEGY · VISUAL IDENTITY") quebrava em três linhas. */
  .work__grid .work-case__media { margin-bottom: 0; }
  /* Proporção texto:mídia calibrada contra a referência 02, onde a coluna de
     texto ocupa ~34% do case e a composição ~61% (era 1:1,15 aqui, ou seja, a
     imagem lia como elemento secundário em vez de dominante). Duas colunas e
     UMA linha: o texto vive todo dentro de .work-case__copy, então a altura
     da composição não é mais distribuída entre as linhas da coluna de texto. */
  .work__grid .work-case {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    gap: var(--space-32);
    align-items: start;
  }

  .work-case--featured__inner { grid-template-columns: 1fr 1.4fr; align-items: center; }

  /* .services-grid continua em UMA coluna até <1024px — mesmo motivo já
     documentado para .process-list logo abaixo. Com 3 colunas a partir de
     768px o terceiro card estourava o container e era cortado pelo
     `overflow-x: clip` de #services: 78px invisíveis em 768px (iPad
     retrato), tapering até ~875px. O conteúdo ficava inacessível, não só
     desalinhado (bug real medido na auditoria de pré-lançamento). */

  /* .process-list continua vertical (coluna, border-left) até ≥1024px — ver
     bloco RESPONSIVO — DESKTOP abaixo. Em 768–1023px (tablet retrato/
     paisagem) as 5 etapas em linha não cabem: título+descrição de cada
     passo força largura mínima maior que 1/5 da coluna de conteúdo,
     estourando a seção e cortando texto (bug real encontrado em auditoria
     de responsivo, 2026-08-28 — ver docs/calaj-redesign-progress.md). */

  .about__inner {
    grid-template-columns: 1fr 1fr;
    /* Sobrescreve align-items: start da regra base — em duas colunas o
       texto (mais alto) definia a altura da linha e o monograma ficava
       "colado" no topo em vez de centralizado em relação ao texto. */
    align-items: center;
  }
  /* max-width em % (não px fixo): a coluna do monograma cresce de ~300px
     (768px) a ~580px (desktop largo) e o logo precisa acompanhar essa
     largura para de fato ocupar a maior parte do espaço vago, em vez de
     ficar preso a um teto que era pequeno demais nas larguras maiores
     (bug corrigido: a regra antiga mirava .about__logo, mas quem limitava
     o tamanho de fato era o max-width fixo em .about__logo-wrap). */
  .about__logo-wrap { max-width: 85%; }
  .guides__inner {
    flex-direction: row;
    align-items: center;
  }
  .guides__label { flex: 0 0 auto; padding-inline-end: var(--space-24); }
  /* flex: 1 1 0 distribui os três princípios igualmente por toda a largura
     da faixa (ref 04), em vez de deixá-los amontoados à esquerda. */
  .guides__item {
    flex: 1 1 0;
    padding-inline: var(--space-24);
    border-left: 1px solid var(--line);
  }

  .faq__inner { grid-template-columns: 0.85fr 2fr; }

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

  /* Formulário de Contato dentro de um card "papel" flutuando sobre fundo
     escuro só no mobile (ver bloco mobile mais abaixo) — no desktop a seção
     inteira já é paper, então nenhum "card" extra é necessário aqui. */
}

/* ================= RESPONSIVO — DESKTOP (≥1024px) ================= */
@media (min-width: 1024px) {
  /* Grid de 3 colunas: logo à esquerda, links centrados de verdade (a coluna
     do meio é auto e as laterais são 1fr iguais), CTA à direita. */
  .nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-24);
  }
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__menu-toggle { display: none; }
  .mobile-cta-bar { display: none; }

  /* Em telas largas o Hero ganha um pouco mais de altura útil, mas continua
     longe de ocupar a viewport inteira (ver comentário no bloco .hero):
     em 1440x900 fecha em torno de 560px, deixando a seção Selected Work
     começar a aparecer na dobra, como na referência 01. */
  .hero { padding-block: 116px var(--space-96); }

  /* 3 colunas de serviços só aqui: abaixo de 1024px os três cards não cabem
     na coluna de conteúdo (ver nota no bloco ≥768px). */
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .service-panel__mobile-icon { display: none; }

  /* Dois cases lado a lado só aqui — ver nota no bloco ≥768px. */
  .work__grid { grid-template-columns: repeat(2, 1fr); }

  .folio { display: block; }

  /* Process em linha só a partir do desktop — ver nota no bloco ≥768px
     acima sobre por que 5 colunas não cabem em largura de tablet. */
  .process-list {
    flex-direction: row;
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: var(--space-32);
  }
  .process-list__step {
    flex: 1 1 0;
    padding-right: var(--space-16);
  }
  /* No desktop a hairline de cada passo (dentro de .process-list__head) já
     ocupa o espaço até a próxima coluna — o círculo-seta no fim dela é o
     divisor visual entre etapas (reference 03), em vez da linha solta em
     ::after usada antes de existir o .process-list__head. */
  .process-list__connector { display: inline-flex; }

  .contact__inner { grid-template-columns: 1fr 1.2fr; gap: var(--space-64); }
  /* Hairline vertical separando a coluna editorial do formulário (ref 05). */
  .contact__inner .contact-form {
    border-left: 1px solid var(--line);
    padding-left: var(--space-64);
  }

  .footer__inner { grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr 1fr; }
  /* Hairlines verticais entre as colunas do rodapé (ref 05). */
  .footer__col + .footer__col {
    border-left: 1px solid var(--line);
    padding-left: var(--space-32);
  }
}

/* ================= RESPONSIVO — MOBILE (<768px), casos específicos =================
   Formulário de Contato dentro de um card "papel" flutuando sobre um fundo
   ink por fora — diferente do desktop, onde a seção inteira já é paper
   (docs/calaj-redesign-plan.md, seção 10). */
@media (max-width: 767.98px) {
  /* Hero mobile (referência 06): ocupa a tela inteira, só com texto + CTAs
     sobre a onda (sem monograma, removido em 2026-09-02). */
  .hero__inner { gap: var(--space-32); }

  /* CTAs empilhados em largura total, como na referência mobile. */
  .hero__cta { width: 100%; }
  .hero__cta .btn { width: 100%; }

  /* Com o texto agrupado em .work-case__copy, a ordem natural do DOM no
     empilhamento seria texto → composição. A referência 06 mostra o
     contrário: a composição abre o cartão e o nome vem embaixo. */
  .work__grid .work-case { display: flex; flex-direction: column; }
  .work__grid .work-case__media { order: -1; }

  /* Rodapé em duas colunas: empilhado, ele passava de 900px de altura só de
     links — quase uma tela inteira de rolagem para o bloco menos importante
     da página. A referência 06 mostra um rodapé compacto.
     minmax(0, 1fr) e não 1fr: o e-mail de contato é uma palavra só e não
     quebra, então com `1fr` (que é minmax(auto, 1fr)) ele empurrava a
     primeira coluna e o rótulo dos links sociais saía pela borda direita. */
  .footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__col--brand,
  .footer__contact { grid-column: 1 / -1; }
  /* Ícones sociais em linha, como na referência 06. */
  .footer__social {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-24);
  }
  /* O arco do monograma sai no mobile: com a caixa do rodapé estreita ele cai
     exatamente sobre "back to top" e derruba o contraste do link — e a
     referência 06 também não o mostra na tela do telefone. */
  .monogram-slot--footer { display: none; }

  /* A resposta do acordeão volta à margem da seção: o recuo que a alinha à
     coluna da pergunta custa ~60px dos 330px úteis do telefone e estica cada
     resposta em duas linhas a mais. */
  .accordion__panel { margin-left: 0; }

  /* As ondas de borda encolhem no telefone: com 28% de largura cada, as duas
     elipses se encontravam no meio da tela e o retículo virava textura de
     fundo da seção inteira, em vez de uma entrada discreta pelas margens. */
  .has-wave-edges::after {
    background:
      radial-gradient(ellipse 17% 28% at -8% 40%, rgba(184, 147, 90, 0.65), transparent 72%),
      radial-gradient(ellipse 17% 28% at 108% 60%, rgba(184, 147, 90, 0.65), transparent 72%);
  }

  /* O fallback em CSS fica mais discreto e mais baixo no mobile, atrás do
     texto e dos CTAs. */
  .hero__waves::before {
    top: auto;
    bottom: 12%;
    right: -20%;
    width: 130%;
    height: 26%;
    transform: rotate(-11deg);
    opacity: 0.35;
  }

  #contact {
    /* Rescopa TODAS as variáveis de tema para ink (não só a cor de fundo) —
       sem isto, componentes que leem --focus/--line/--text-muted (kicker,
       link-arrow, botão outline) continuariam resolvendo para os valores de
       --color-*-on-paper herdados de .section--paper, com contraste ruim
       sobre o fundo escuro forçado aqui. */
    --text: var(--color-text-on-ink);
    --text-muted: var(--color-text-on-ink-muted);
    --line: var(--color-line);
    --line-interactive: var(--color-line-interactive-on-ink);
    --surface-raised: var(--color-ink-raised);
    --focus: var(--color-accent);
    background: var(--color-ink);
    color: var(--text);
  }
  #contact::before {
    /* reaproveita a mesma textura sutil das seções ink */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(ellipse 80% 60% at 15% 0%, rgba(184, 147, 90, 0.10), transparent 60%);
  }
  #contact .contact__watermark { color: var(--color-text-on-ink); opacity: 0.05; }
  #contact .contact__title,
  #contact .contact__intro .lead { color: var(--text); }

  /* O card do formulário continua "papel" mesmo com a seção ao redor em
     ink — precisa da sua própria ilha de variáveis paper-scoped, senão os
     campos herdariam --focus/--line ink (claros) sobre um fundo claro. */
  #contact .contact-form {
    --text: var(--color-text-on-paper);
    --text-muted: var(--color-text-on-paper-muted);
    --line: var(--color-line-on-paper);
    --line-interactive: var(--color-line-interactive-on-paper);
    --surface-raised: var(--color-paper-raised);
    --focus: var(--color-accent-ink);
    background: var(--color-paper);
    color: var(--text);
    padding: var(--space-24);
    border-radius: var(--radius-md);
  }
}

/* ================= prefers-reduced-motion ================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ================= CONSENT BANNER (Analytics) =================
   Markup gerado por js/analytics.js — não duplicado em cada página HTML,
   único ponto de manutenção. Barra inferior discreta (não é um modal
   central): não impede a leitura do site nem cobre os CTAs principais do
   Hero, que ficam bem acima na página. z-index 90 fica ACIMA do
   .mobile-cta-bar (80) e ABAIXO da nav fixa (100) de propósito — no mobile,
   com os dois visíveis ao mesmo tempo (só acontece na primeira visita, até
   o visitante decidir), o banner de consentimento tem prioridade sobre a
   barra de WhatsApp; a decisão typically leva poucos segundos. */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
  padding-bottom: max(var(--space-16), env(safe-area-inset-bottom));
  background: var(--color-ink);
  color: var(--color-text-on-ink, #F1EDE4);
  border-top: 1px solid var(--color-line);
}
.consent-banner[hidden] { display: none; }

.consent-banner__text {
  flex: 1 1 320px;
  max-width: 60ch;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}
.consent-banner__text a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent-banner__text a:hover,
.consent-banner__text a:focus-visible { color: var(--color-accent-soft, var(--color-accent)); }

.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  flex: 0 0 auto;
}
.consent-banner__accept,
.consent-banner__decline {
  padding: 11px 22px;
}

@media (max-width: 480px) {
  .consent-banner { justify-content: stretch; }
  .consent-banner__actions { width: 100%; }
  .consent-banner__accept,
  .consent-banner__decline { flex: 1 1 auto; }
}

/* ================= LEGAL (Privacy / Terms) =================
   Páginas novas da auditoria de pré-lançamento (achado P-03) — texto puro,
   reaproveita a tipografia e as cores do sistema (h2, .lead, .kicker,
   .rule-accent) sem introduzir componentes novos. Coluna mais larga que
   .about__text (68ch, não 46ch): é texto de referência para ser lido de
   ponta a ponta, não uma manchete de marketing. */
.legal {
  padding-block: clamp(140px, 12vw + 40px, 200px) var(--space-96);
}
.legal__updated {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: var(--space-8);
}
.legal__body {
  max-width: 68ch;
  margin-top: var(--space-48);
}
.legal__body h2 {
  font-size: clamp(1.4rem, 0.5vw + 1.2rem, 1.75rem);
  margin-top: var(--space-48);
  margin-bottom: var(--space-16);
  max-width: none;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p {
  color: var(--text-muted);
  margin-bottom: var(--space-16);
}
.legal__body ul {
  color: var(--text-muted);
  margin: 0 0 var(--space-16);
  padding-left: 1.25em;
}
.legal__body li { margin-bottom: var(--space-8); }
.legal__body a {
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal__body a:hover,
.legal__body a:focus-visible { color: var(--color-accent-hover); }
.legal__body strong { color: var(--text); }