/* ==========================================================================
   REC7 | AUDIOVISUAL — Sistema visual
   Conceito: sala escura de projeção. Preto = espaço entre tomadas.
   Branco = luz projetada. Vermelho = pontuação de marca, nunca preenchimento.
   Direção de arte revisada no Prompt 18 e corrigida no 18.1: grid de 12 colunas
   no Portfólio, escala de espaçamento compartilhada, universo integralmente escuro
   (a alternância clara do Prompt 18 foi revertida — não aprovada). Tipografia:
   Instrument Sans (Google Fonts), identificada tecnicamente na referência aprovada.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --black: #0a0a0a;
  --black-soft: #111111;
  --white: #f4f3f0;
  --white-dim: rgba(244, 243, 240, 0.72);
  --white-faint: rgba(244, 243, 240, 0.42);
  /* VALOR PROVISÓRIO — substituir pelo vermelho oficial da identidade REC7 quando confirmado */
  --red: #c81e1e;
  --gray: #6b6b68;
  --line: rgba(244, 243, 240, 0.14);

  /* Equivalentes para uso dentro de seções claras (texto escuro sobre fundo claro) */
  --black-dim: rgba(10, 10, 9, 0.72);
  --black-faint: rgba(10, 10, 9, 0.45);
  --line-on-light: rgba(10, 10, 9, 0.14);

  /* Tokens semânticos — todo componente compartilhado lê a partir daqui
     (disponível para qualquer seção redefinir localmente se precisar). */
  --fg: var(--white);
  --fg-dim: var(--white-dim);
  --fg-faint: var(--white-faint);
  --line-color: var(--line);

  --font-display: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  /* Container editorial central — cresce com a tela grande em vez de ficar
     preso a 1240px (que virava uma coluna pequena e "engolida" em telas
     1920px+); 90vw garante margem mínima proporcional em qualquer largura,
     1600px evita uma coluna de leitura absurdamente larga no limite. */
  --content-max: min(1600px, 90vw);
  --measure: 62ch;

  /* Escala de espaçamento compartilhada — 8 / 16 / 24 / 32 / 48 / 64 / 96.
     O 18.3 comprimiu tudo para dois tokens (--sp-section/--sp-group), o que
     resolveu o excesso de rolagem mas também apagou a diferença entre
     relações bem diferentes (trabalho→trabalho e seção→seção usavam o
     mesmo valor). O 18.4 recupera PARTE do respiro (não volta ao 18.2
     integralmente) e separa 4 níveis conceituais de espaçamento:
       --sp-group      nível 1/2 — relação de família (ex.: Pedal→Timeline,
                        texto de fechamento de uma lista).
       --space-media   nível 2   — texto/sub-bloco → mídia relacionada
                        dentro do MESMO bloco (ex.: definição → exemplo em
                        Campanhas).
       --space-project nível 3   — fim de um trabalho → início do próximo
                        (o nível que faltava — 18.3 usava --sp-section aqui,
                        confundindo com nível 4).
       --sp-section    nível 4   — fim de seção → nova seção. O maior.
  */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-section: clamp(56px, 8vh, 80px);
  --sp-group: clamp(28px, 4.5vh, 40px);
  --space-media: clamp(24px, 4vh, 32px);
  --space-project: clamp(40px, 6vh, 56px);

  /* Largura textual — duas categorias reutilizáveis (não uma por
     componente). Valores fixos em px: dentro do .wrap já responsivo,
     eles se limitam sozinhos em telas menores (tablet/mobile) sem
     precisar de regra própria por breakpoint. */
  --text-wide: 840px;    /* apresentações, aberturas de seção, descrições de trabalho */
  --text-reading: 680px; /* parágrafos mais densos que se beneficiam de linha menor */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-s: 0.4s;
  --dur-m: 0.8s;
  --dur-l: 1.4s;
}

/* Container editorial — calibrado no Prompt 18.3. O 18.2 resolveu o
   problema de conteúdo pequeno/perdido, mas em telas largas o container
   passou a ocupar largura demais (pouca presença de espaço negativo em
   volta). Redefinido só a partir de 901px (mesmo corte já usado pelo
   grid do Portfólio) para não tocar em mobile/tablet, que já estavam
   corretos com a fórmula original. */
@media (min-width: 901px) {
  :root {
    --content-max: min(1400px, 84vw);
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@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;
  }
}

body, h1, h2, h3, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Acessibilidade ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--white);
  color: var(--black);
  padding: 12px 20px;
  z-index: 999;
  font-size: 13px;
  font-weight: 600;
}
.skip-link:focus {
  left: var(--gutter);
  top: var(--gutter);
}

:focus-visible {
  outline: 1px solid var(--red);
  outline-offset: 4px;
}

.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;
}

/* ---------- Tipografia ----------
   Uma família, dois pesos (400/600). Hierarquia vem de tamanho, peso,
   espaço e contraste — não de uma segunda fonte. Caixa alta + tracking
   aberto ficam reservados a labels curtos, nunca a parágrafos. */
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; }

.h1 {
  /* ~34px em telas pequenas até 68px em desktop grande (reduzido no 18.3) */
  font-size: clamp(2.1rem, 3vw + 1.5rem, 4.25rem);
  font-weight: 600;
  line-height: 1.05;
}

.h2 {
  /* ~26px até 44px (reduzido no 18.3, mais próximo da escala do restante do site) */
  font-size: clamp(1.6rem, 1.7vw + 1.3rem, 2.75rem);
  font-weight: 600;
  line-height: 1.12;
}

.h3-label {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* Subtítulo editorial dos trabalhos (18.6) — categoria própria, distinta de
   .h3-label genérico e de .eyebrow de seção: identifica/descreve o projeto
   em si (ex.: "Produto & Marca", "Presença de marca, no dia a dia"), não um
   sub-item, legenda de mídia complementar ou eyebrow de abertura de seção
   (esses continuam em .h3-label/.eyebrow sem alteração). Levemente maior e
   branco/off-white — mais presença, sem virar heading. */
.project-label {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg);
}

.body-lg {
  font-size: clamp(1.125rem, 0.7vw + 1rem, 1.375rem);
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: var(--measure);
}

.body {
  font-size: clamp(1rem, 0.2vw + 0.95rem, 1.125rem);
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: var(--measure);
}

.eyebrow {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gray);
}

.accent { color: var(--red); }

.mono-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--fg-faint);
}

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section {
  position: relative;
  padding-block: var(--sp-section);
}

.section-empty {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divider {
  height: 1px;
  background: var(--line-color);
  border: 0;
  margin: 0;
}

/* ---------- Navegação ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  background: transparent;
  transition: background var(--dur-m) var(--ease-out), backdrop-filter var(--dur-m) var(--ease-out);
}

.nav.is-solid {
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav__brand {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.nav__brand span { color: var(--red); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav__links a {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  position: relative;
  padding-block: 4px;
}
.nav__links a:hover { color: var(--white); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--red);
  transition: width var(--dur-s) var(--ease-out);
}
.nav__links a:hover::after { width: 100%; }

.nav__cta {
  border: 1px solid var(--line);
  padding: 8px 18px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out), border-color var(--dur-s);
}
.nav.is-solid .nav__cta {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__cta:hover { border-color: var(--red); color: var(--red); }

.nav__toggle {
  display: none;
  width: 32px; height: 22px;
  position: relative;
}
.nav__toggle span {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--white);
  transition: transform var(--dur-s) var(--ease-out), opacity var(--dur-s);
}
.nav__toggle span:nth-child(1) { top: 0; }
.nav__toggle span:nth-child(2) { top: 50%; margin-top: -0.5px; }
.nav__toggle span:nth-child(3) { bottom: 0; }

.nav__mobile {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out), visibility 0s linear var(--dur-m);
}
.nav__mobile.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out);
}
.nav__mobile a {
  font-weight: 600;
  font-size: 2rem;
}
.nav__mobile .nav__cta {
  opacity: 1; transform: none; pointer-events: auto;
  margin-top: 12px;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--white);
  transition: background var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out);
  white-space: nowrap;
}
.btn--primary {
  background: var(--white);
  color: var(--black);
}
.btn--primary:hover { background: var(--red); border-color: var(--red); color: var(--white); }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--white-dim);
}
.btn--ghost:hover { border-color: var(--white); color: var(--white); }

.btn--text {
  border: 0;
  padding: 4px 0;
  color: var(--white-dim);
  border-bottom: 1px solid var(--line);
}
.btn--text:hover { color: var(--white); border-color: var(--red); }

.btn--arrow::after {
  content: "→";
  transition: transform var(--dur-s) var(--ease-out);
}
.btn--arrow:hover::after { transform: translateX(4px); }

/* ---------- Media frame (placeholders elegantes) ---------- */
.media-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--black-soft);
}
.media-frame img,
.media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-frame--16-9 { aspect-ratio: 16 / 9; }
.media-frame--3-4 { aspect-ratio: 3 / 4; }
.media-frame--1-1 { aspect-ratio: 1 / 1; }
.media-frame--9-16 { aspect-ratio: 9 / 16; }

.media-frame__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0);
  transition: background var(--dur-s) var(--ease-out);
}
.media-frame__play::before {
  content: "";
  width: 56px; height: 56px;
  border: 1px solid var(--white);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out);
}
.media-frame__play::after {
  content: "";
  position: absolute;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid var(--white);
  opacity: 0;
  transform: translateX(2px) scale(0.9);
  transition: opacity var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out);
}
.media-frame:hover .media-frame__play::before,
.media-frame:hover .media-frame__play::after,
.media-frame:focus-within .media-frame__play::before,
.media-frame:focus-within .media-frame__play::after {
  opacity: 1;
  transform: scale(1);
}
.media-frame:hover .media-frame__play { background: rgba(10, 10, 10, 0.18); }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-group > * { transition-delay: calc(var(--i, 0) * 120ms); }

/* ==========================================================================
   01 — HERO  (escuro — não redesenhado, só herda a nova tipografia/tokens)
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(var(--sp-4), 6vh, var(--sp-6));
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.15) 40%, rgba(10,10,10,0.85) 100%);
  z-index: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
}
.hero__headline {
  max-width: 16ch;
}
.hero__sub {
  margin-top: var(--sp-3);
  max-width: 40ch;
}
.hero__ctas {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
/* Ancorado à direita do container (mesmo --gutter do resto do site) em vez
   de centralizado no viewport (18.6): centralizado, ele podia invadir a
   caixa de "Ver trabalhos" em telas largas, já que os CTAs do Hero ficam
   à esquerda, não centralizados. */
.hero__scroll {
  position: absolute;
  bottom: 32px;
  right: var(--gutter);
  left: auto;
  transform: none;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white-faint);
  transition: opacity var(--dur-s) var(--ease-out);
}
.hero__scroll-line {
  width: 1px;
  height: 34px;
  background: var(--white-faint);
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  display: block;
  width: 100%; height: 100%;
  background: var(--white);
  transform: translateY(-100%);
  animation: scrollLine 2.4s var(--ease-out) infinite;
}
@keyframes scrollLine {
  0% { transform: translateY(-100%); }
  60% { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line::after { animation: none; transform: translateY(0); }
}

/* ==========================================================================
   02 — MANIFESTO  (escuro — altura ditada pelo conteúdo, não pela tela)
   ========================================================================== */
.manifesto {
  background: var(--black);
  padding-block: var(--sp-6);
  display: flex;
  align-items: center;
}
.manifesto__inner {
  max-width: 880px;
}
.manifesto__lines {
  margin-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.manifesto__lines p {
  font-size: clamp(1.2rem, 1.2vw + 0.85rem, 1.75rem);
  line-height: 1.4;
  color: var(--white-dim);
  max-width: 34ch;
}
.manifesto__lines p:last-child { color: var(--white); font-weight: 600; }

/* ==========================================================================
   03 — PORTFÓLIO  (escuro)
   Toda peça vive dentro do mesmo .wrap (container editorial central, ver
   --content-max). Duas escalas apenas:
     PRINCIPAL  horizontal — preenche 100% da largura do .wrap. Usada por
                Alexsander, Pedal, Timeline e Trekking: os quatro têm
                exatamente a mesma largura porque é a largura do próprio
                container, não um valor isolado escolhido por peça.
     VERTICAL   9:16 — span 4 de um grid de 12 colunas (~1/3 do container).
                Preserva o aspect ratio sem tentar igualar a largura dos
                horizontais (isso deixaria o vertical absurdamente alto).
   Agrupamentos (trio, pares) dividem o container em 2 ou 3 colunas iguais —
   o CONJUNTO relaciona-se com a largura padrão, não cada item isolado.
   Toda peça é ancorada à coluna 1 — a mesma margem esquerda do texto.
   ========================================================================== */
.portfolio__head { max-width: var(--text-wide); margin-bottom: var(--space-project); margin-inline: auto; }
.portfolio__head .body-lg { margin-top: var(--sp-2); }

.feature {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--sp-3);
  row-gap: var(--sp-3);
  margin-bottom: var(--space-project);
}
.feature__media { grid-column: 1 / -1; }

/* Vídeo vertical nativo (9:16) — sozinho no bloco (caso do Vinil), por isso
   centralizado nas 12 colunas em vez de ancorado à coluna 1 (18.5): um
   player mais estreito que o container não pode parecer abandonado à
   esquerda. O bloco de texto abaixo (.feature__meta) já usa o mesmo eixo
   central — os dois compartilham a composição. */
.feature__media--portrait { grid-column: 5 / span 4; }

/* Bloco de texto centralizado como composição (eixo do .wrap), texto
   internamente alinhado à esquerda — não gruda mais na borda do container
   quando a mídia acima é mais estreita que ele (caso do vertical solo). */
.feature__meta {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: var(--sp-2);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-width: var(--text-wide);
}
/* Subtítulo dos trabalhos usa .project-label (18.6) — cor branca/off-white,
   não vermelho (o vermelho recorrente em cada peça do Portfólio não foi
   aprovado no 18.3; volta a ser pontuação, não padrão). */

.group-intro {
  max-width: var(--text-wide);
  margin-bottom: var(--space-media);
  margin-inline: auto;
}
.group-intro .project-label { margin-bottom: var(--sp-1); display: block; }

.group-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--space-project);
}
/* Trio — três colunas iguais preenchendo 100% do container (não mais 9 de 12
   colunas com sobra à direita). O conjunto passa a formar uma faixa cheia. */
.group-grid--trio { grid-template-columns: repeat(3, 1fr); }
.group-item { display: flex; flex-direction: column; gap: var(--sp-1); }
.group-item .h3-label { color: var(--fg-faint); }
.group-item p { font-size: 0.9rem; color: var(--fg-faint); }

/* Trekking — escala PRINCIPAL, igual a Alexsander/Pedal/Timeline: 100% do
   container. Protagonista do bloco por ser o único nessa largura ali dentro —
   a diferenciação vem de posição, não de possuir um número de pixel próprio. */
.autoral .feature__meta { grid-column: auto; margin-top: var(--sp-3); }

/* Dupla secundária forte (não miniaturas): dois horizontais iguais dividindo
   o mesmo espaço que o Trekking ocupa sozinho acima — juntos, a mesma largura
   PRINCIPAL. flex-basis grande o bastante para empilhar em telas estreitas. */
.autoral__secondary {
  margin-top: var(--sp-group);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.autoral__secondary-item { flex: 1 1 320px; }
.autoral__secondary-item .h3-label {
  margin-top: var(--sp-1);
  display: block;
  color: var(--fg-faint);
}

/* Pedal (tem legenda) e Timeline (respiro, sem legenda) — escala PRINCIPAL,
   mesma largura de Alexsander/Trekking. Espaçamento entre os dois é --sp-group
   (mais curto que --sp-section) porque pertencem à mesma família de escala —
   não são dois momentos desconectados. */
.editorial-note {
  margin-bottom: var(--sp-group);
}
.editorial-note .project-label {
  margin-top: var(--sp-1);
  display: block;
}
.respiro {
  margin-bottom: var(--space-project);
}

/* Villa Verde + evento — os dois arquivos são 1080×1920 (9:16), o mesmo
   aspect ratio (medido em 18.3, ver relatório). Por isso agora dividem o
   mesmo espaço em duas células EQUIVALENTES (mesma largura, mesma altura),
   em vez dos spans desiguais do 18.2 (4 vs. 3 de 12), que criavam uma
   diferença de presença entre os dois sem motivo no material de origem.
   O par continua abaixo da largura PRINCIPAL de propósito — é vertical, e
   preencher 100% do container o deixaria absurdamente alto. Centralizado
   nas 12 colunas (18.5) em vez de ancorado à coluna 1 — o conjunto (não
   cada vídeo isolado) é o que precisa ficar no eixo central, senão sobra
   espaço morto à direita numa tela larga. */
.feature__media--pair {
  grid-column: 3 / span 8;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--sp-3);
}
.media-pair__primary,
.media-pair__secondary { grid-column: auto; }
.media-pair__caption { margin-top: var(--sp-1); display: block; color: var(--fg-faint); }

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; row-gap: var(--sp-2); }
  .feature__media--portrait,
  .feature__meta { grid-column: 1 / -1; }
  .feature__media--pair { grid-column: 1 / -1; grid-template-columns: 1fr; row-gap: var(--sp-2); }
  .media-pair__primary,
  .media-pair__secondary { grid-column: 1 / -1; }
  .group-grid,
  .group-grid--trio { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   04 — PROCESSO  (escuro — revertido no Prompt 18.1; a alternância clara
   do Prompt 18 não foi aprovada. O sistema de tokens semânticos --fg/--fg-dim/
   --fg-faint/--line-color permanece — só não é mais sobrescrito aqui, então
   os componentes abaixo herdam os valores escuros definidos em :root.)
   ========================================================================== */
.processo__head { max-width: var(--text-wide); margin-bottom: var(--space-project); margin-inline: auto; }

.steps {
  position: relative;
  border-top: 1px solid var(--line-color);
}
.step {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line-color);
  align-items: baseline;
}
.step__num { font-size: 14px; font-weight: 600; color: var(--red); }
.step__title { font-size: clamp(1.3rem, 1.6vw + 0.7rem, 1.9rem); font-weight: 600; margin-bottom: var(--sp-1); }
.step__text { color: var(--fg-dim); max-width: var(--text-wide); }
.step__text strong { color: var(--fg); font-weight: 600; }

/* Direção é o passo central do método — mesma grade, mesma tipografia,
   só uma borda esquerda discreta (vermelho como pontuação, não preenchimento). */
.step--emphasis { padding-left: var(--sp-2); border-left: 2px solid var(--red); margin-left: calc(var(--sp-2) * -1 - 2px); }

.processo__close {
  margin-top: var(--sp-group);
  max-width: var(--text-wide);
  margin-inline: auto;
  color: var(--fg-dim);
}

/* ==========================================================================
   05 — CAMPANHAS  (escuro — ver nota de reversão acima)
   ========================================================================== */
.campanhas__head { max-width: var(--text-wide); margin-inline: auto; }
.campanhas__head .body-lg { margin-top: var(--sp-2); }
.campanhas__def { margin-top: var(--sp-3); max-width: var(--text-wide); margin-inline: auto; }

/* Exemplo real: peça pequena/ilustrativa ao lado do texto, não um bloco de
   portfólio — a diferença de escala e composição é o que marca "exemplo",
   não "projeto". Reaproveita o mesmo asset já usado em Trabalhos.
   Vídeo + texto formam UMA composição compacta (não precisa ocupar 100%
   do container, como os players principais) — por isso os dois usam
   flex-grow:0 (não esticam para preencher o wrap) e o conjunto inteiro é
   centralizado via justify-content, em vez de ficar ancorado à esquerda
   com espaço morto à direita (18.5). */
.campanhas__sample {
  margin-block: var(--space-media);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  align-items: center;
}
.campanhas__sample-media { flex: 0 0 270px; max-width: 280px; }
.campanhas__sample-caption {
  margin-top: var(--sp-1);
  display: block;
  text-align: center;
  color: var(--fg-faint);
}

.campanhas__example {
  flex: 0 1 560px;
  max-width: var(--text-reading);
}
.campanhas__example p + p { margin-top: var(--sp-2); }
.campanhas__example strong { color: var(--fg); font-weight: 600; }

.campanhas__close {
  margin-top: var(--sp-3);
  max-width: var(--text-wide);
  margin-inline: auto;
  color: var(--fg);
  font-weight: 600;
}

/* ==========================================================================
   06 — PARA QUEM / ONDE  (escuro — ver nota de reversão acima)
   ========================================================================== */
.audiencia__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(var(--sp-5), 6vw, var(--sp-7));
  align-items: start;
}
.audiencia__seg { margin-top: var(--sp-3); max-width: var(--text-reading); }

.audiencia__geo {
  border-top: 1px solid var(--line-color);
  padding-top: var(--sp-3);
}
.audiencia__geo p { font-size: 0.95rem; color: var(--fg-dim); }
.audiencia__geo p + p { margin-top: var(--sp-2); color: var(--fg-faint); }
.audiencia__geo .eyebrow { margin-bottom: var(--sp-2); display: block; }

/* ==========================================================================
   07 — DEPOIMENTOS  (oculta — hidden; escuro por padrão se reativada)
   ========================================================================== */
.depoimentos__head { max-width: 560px; margin-bottom: var(--sp-section); }

.testimonial {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(var(--sp-4), 4vw, var(--sp-6));
  align-items: center;
  padding-block: var(--sp-group);
  border-top: 1px solid var(--line-color);
}
.testimonial:last-child { border-bottom: 1px solid var(--line-color); }
.testimonial__photo { width: 100%; }
.testimonial__quote {
  font-size: clamp(1.15rem, 1.4vw + 0.7rem, 1.6rem);
  line-height: 1.5;
  color: var(--fg);
  max-width: 46ch;
}
.testimonial__by {
  margin-top: var(--sp-2);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.testimonial__by strong { color: var(--fg-dim); font-weight: 600; }

/* ==========================================================================
   08 — CTA  (escuro — centralização permanece como exceção deliberada de fechamento)
   ========================================================================== */
.cta {
  min-height: 90svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cta__inner { max-width: 720px; margin-inline: auto; }
.cta__text { margin-top: var(--sp-3); margin-inline: auto; }
.cta__ctas {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

/* ==========================================================================
   09 — FOOTER  (escuro)
   ========================================================================== */
.footer {
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line);
}
.footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
}
.footer__brand { font-weight: 600; }
.footer__brand span { color: var(--red); }
.footer__col { display: flex; flex-direction: column; gap: var(--sp-1); }
.footer__col a, .footer__col span {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--white-faint);
}
/* Links funcionais do Footer precisam de contraste AA (4.5:1) sobre o fundo
   preto — --white-faint (0.42 alpha) mede ~3.76:1, abaixo do mínimo. Valor
   local, só para estes links (não para .footer__col span, que é texto
   estático, nem para outros usos de --white-faint no site): 0.5 de opacidade
   mede ~4.9:1 — o menor ajuste que passa AA com margem, sem clarear tanto
   quanto --white-dim (9.31:1) clarearia. */
.footer__col a { color: rgba(244, 243, 240, 0.5); }
.footer__col a:hover { color: var(--white); }
.footer__bottom {
  margin-top: var(--sp-4);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  color: var(--gray);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .audiencia__grid { grid-template-columns: 1fr; }
  .testimonial { grid-template-columns: 1fr; }
  .testimonial__photo { max-width: 160px; }
  .campanhas__sample { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .hero__ctas, .cta__ctas { flex-direction: column; align-items: stretch; }
  .step { grid-template-columns: 48px 1fr; }
  .footer__grid { flex-direction: column; }
}

/*
  Hero mobile — em telas altas e estreitas, ancorar o conteúdo só no rodapé (flex-end)
  deixa um vazio crescente acima do H1 (chega a ~50% da tela em aparelhos grandes).
  Centralizar o bloco inteiro (texto + CTAs + indicador de scroll, movendo o indicador
  para o fluxo normal em vez de fixo no rodapé) distribui o espaço de forma simétrica e
  proporcional em qualquer altura — uma composição, não apenas menos espaçamento.
*/
@media (max-width: 640px) {
  .hero {
    justify-content: center;
    padding-bottom: 0;
  }
  .hero__scroll {
    position: static;
    left: auto;
    right: auto;
    transform: none;
    margin-top: clamp(var(--sp-4), 8vh, var(--sp-6));
  }
}