/* =============================================================
   Matheus Castro — Diretor & Filmmaker
   style.css

   Organizado na mesma ordem de specs/design.md:
   01 tokens · 02 reset · 03 tipografia · 04 layout · 05 botões
   06 cards · 07 nav · 08 hero · 09 seções · 10 rodapé
   11 responsivo · 12 movimento

   Sem framework. Sem build. Achar o que editar aqui é achar a
   seção equivalente na spec.
   ============================================================= */

/* =============================================================
   01 · TOKENS — design.md §2, §4, §5, §10
   ============================================================= */
:root {
  /* superfícies */
  --bg: #050505;
  --surface: #0a0a0a;
  --surface-2: #0f0f0f;
  --border: #262626;
  --border-strong: #3a3a3a;

  /* texto */
  --text: #ffffff;
  --text-secondary: #aaaaaa;
  --text-muted: #888888;
  --text-faint: #555555; /* SÓ decorativo — reprova em AA */

  /* detalhes */
  --accent: #ffffff;
  --overlay: rgba(5, 5, 5, 0.55);
  --overlay-grad: linear-gradient(180deg, rgba(5, 5, 5, 0.15) 0%, rgba(5, 5, 5, 0.55) 55%, rgba(5, 5, 5, 0.92) 100%);

  /* tipografia */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* escala 8px */
  --s1: 4px;   --s2: 8px;   --s3: 16px;  --s4: 24px;
  --s5: 32px;  --s6: 48px;  --s7: 64px;  --s8: 96px;
  --s9: 128px; --s10: 192px;

  /* layout */
  --container: 1280px;
  --gutter: 24px;
  --section-y: 80px;

  /* movimento — design.md §10 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 300ms;
  --t-mid: 400ms;
  --t-slow: 600ms;
  --t-reveal: 800ms;

  /* radius: zero em tudo, design.md §5 */
  --radius: 0;
}

@media (min-width: 1024px) {
  :root {
    --gutter: 48px;
    --section-y: 160px;
  }
}

/* =============================================================
   02 · RESET
   ============================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* nav fixa não cobre a âncora */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* regra que não se dobra: zero scroll horizontal */
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  border-radius: var(--radius);
}

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

/* foco visível — design.md §6, nunca removido sem substituto */
:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  background: var(--text);
  color: var(--bg);
}

/* Grão de filme: textura fina sobre o site inteiro, gerada em SVG (sem
   arquivo). Unifica as imagens e quebra o banding do preto chapado.
   Fica abaixo da nav/menu fixos e não captura clique. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

/* pula para o conteúdo — primeiro foco da página */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--text);
  color: var(--bg);
  padding: var(--s3) var(--s4);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================
   03 · TIPOGRAFIA — design.md §3
   ============================================================= */
.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
}

.hero__name {
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.section__title {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.card__title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 7.5vw, 3rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* segunda linha em itálico cinza — a assinatura da proposta comercial:
   primeira linha em branco, continuação em itálico --text-secondary */
.display-soft {
  display: block;
  font-style: italic;
  color: var(--text-secondary);
}

.lead {
  font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--text-secondary);
}

.body-text {
  color: var(--text-secondary);
  max-width: 68ch; /* medida de leitura — design.md §3 */
}

.small { font-size: 0.875rem; line-height: 1.6; }

/* micro-label: a assinatura tipográfica do sistema */
.micro-label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* numeração grande — único uso permitido de --text-faint */
.step__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  color: var(--text-faint);
}

.placeholder {
  color: var(--text-muted);
  font-style: italic;
}

/* =============================================================
   04 · LAYOUT
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--alt { background: var(--surface); }

.section__header { margin-bottom: var(--s7); }
.section__header .micro-label { margin-bottom: var(--s3); }
.section__header .section__title + .lead { margin-top: var(--s4); }
.section__header--center { text-align: center; }

@media (min-width: 1024px) {
  .section__header .micro-label { margin-bottom: var(--s4); }
  .section__header .section__title + .lead { margin-top: var(--s5); }
}

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

.grid { display: grid; gap: var(--s3); }
@media (min-width: 1024px) { .grid { gap: var(--s5); } }

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* escrita e não usada: entra quando houver material 9:16
   (memoria.md — grade de Redes Sociais adiada) */
.grid--vertical { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .grid--vertical { grid-template-columns: repeat(3, 1fr); } }
.grid--vertical .card__media { aspect-ratio: 9 / 16; }

/* =============================================================
   05 · BOTÕES — design.md §6
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px; /* alvo de toque */
  padding: 18px 40px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease,
              color var(--t-fast) ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn--primary:hover { background: #e5e5e5; border-color: #e5e5e5; }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.05);
}

/* terciário: link com seta */
.btn--link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  cursor: pointer;
  transition: border-color var(--t-fast) ease;
}
.btn--link:hover { border-bottom-color: var(--accent); }
.btn--link .arrow { transition: transform var(--t-fast) var(--ease); }
.btn--link:hover .arrow { transform: translateX(4px); }

/* No mobile o botão ocupa a largura toda — padrão `w-full sm:w-auto`
   da proposta comercial. Reduz erro de toque e organiza a coluna. */
.btn-row {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.btn-row .btn { width: 100%; }

@media (min-width: 640px) {
  .btn-row { flex-direction: row; flex-wrap: wrap; }
  .btn-row .btn { width: auto; }
}

/* =============================================================
   06 · CARDS — design.md §7
   ============================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
  transition: background-color var(--t-mid) ease, border-color var(--t-mid) ease;
}
@media (min-width: 1024px) { .card { padding: var(--s5); } }

.card:hover,
.card:focus-within {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.card__icon {
  width: 24px;
  height: 24px;
  margin-bottom: var(--s4);
  color: var(--text-muted);
}
.card__title { margin-bottom: var(--s3); }
.card__text { color: var(--text-secondary); font-size: 0.9375rem; }

.card__list { margin-top: var(--s4); }
.card__list li {
  padding: var(--s2) 0;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

/* --- card de projeto ------------------------------------------------ */
.project {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--t-mid) ease, background-color var(--t-mid) ease;
}
.project:hover,
.project:focus-within { border-color: var(--border-strong); background: var(--surface-2); }

.card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden; /* o quadro não se move; a imagem escala dentro */
  background: var(--bg);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.project:hover .card__media img,
.project:focus-within .card__media img { transform: scale(1.04); }

/* prévia em vídeo: entra por cima da thumbnail com fade.
   Fica sob o gradiente, então o texto do card continua legível. */
.card__media video.preview,
.destaque__media video.preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid) ease;
}
.card__media video.preview.is-playing,
.destaque__media video.preview.is-playing { opacity: 1; }

/* a prévia acompanha o zoom do quadro, como a imagem */
.project:hover .card__media video.preview,
.project:focus-within .card__media video.preview { transform: scale(1.04); }
.card__media video.preview { transition: opacity var(--t-mid) ease, transform var(--t-slow) var(--ease); }

.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-grad);
  pointer-events: none;
  z-index: 1;
}

.project__body {
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  flex: 1;
}
@media (min-width: 1024px) { .project__body { padding: var(--s5); } }

.project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  align-items: baseline;
}
.project__meta .sep { color: var(--text-faint); }
.project__actions { margin-top: auto; padding-top: var(--s2); }

/* =============================================================
   07 · NAV — design.md §11
   ============================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.nav.is-scrolled {
  background: var(--bg);
  border-bottom-color: var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 72px;
}

.nav__brand { display: flex; align-items: center; min-height: 44px; }
.nav__brand img { height: 16px; width: auto; }

.nav__links { display: none; }
@media (min-width: 768px) {
  /* tablet: mesma nav, mais compacta — plano.md §8 */
  .nav__links { display: flex; align-items: center; gap: var(--s4); }
  .nav__brand img { height: 18px; }
}
@media (min-width: 1024px) {
  .nav__links { gap: var(--s6); }
}
.nav__link {
  position: relative;
  padding: var(--s2) 0;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--t-fast) ease;
}
.nav__link:hover { color: var(--text); }
.nav__link.is-active { color: var(--text); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
}

.nav__cta { display: none; }
@media (min-width: 1024px) { .nav__cta { display: inline-flex; padding: 14px 28px; } }

/* hambúrguer */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text);
}
@media (min-width: 768px) { .nav__toggle { display: none; } }
.nav__toggle span {
  display: block;
  width: 22px; height: 1px;
  background: currentColor;
  position: relative;
  transition: background-color var(--t-fast) ease;
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px; height: 1px;
  background: currentColor;
  transition: transform var(--t-fast) var(--ease);
}
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after { top: 7px; }

.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* overlay mobile */
.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s8) var(--gutter) var(--s7);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) ease, visibility var(--t-fast) ease;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__list { display: flex; flex-direction: column; gap: var(--s4); }
.menu__link {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.menu__link:hover { color: var(--text-secondary); }
.menu__footer { margin-top: var(--s7); display: flex; flex-direction: column; gap: var(--s2); }
.menu__footer a { display: flex; align-items: center; min-height: 44px; }

body.menu-open { overflow: hidden; }

/* =============================================================
   08 · HERO — design.md §9, §11
   ============================================================= */
.hero {
  position: relative;
  min-height: 100dvh; /* nunca 100vh */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-slow) ease; /* a transição É o carregamento */
}
.hero__media video.is-ready { opacity: 1; }

/* Degradê em duas camadas: um foco escuro no canto inferior esquerdo,
   onde o texto vive, e um véu vertical suave. O vídeo respira no alto e
   à direita; o texto ganha uma base calma sem escurecer a cena toda. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 80% at 6% 96%, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0.5) 40%, rgba(5,5,5,0) 72%),
    linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.1) 34%, rgba(5,5,5,0.66) 100%),
    var(--overlay);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 840px;
  padding-block: var(--s8) var(--s7);
}

/* eyebrow com uma hairline curta antes, detalhe editorial */
.hero__role {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero__role::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* frase de abertura: duas vozes, reta em branco + itálico em cinza.
   Menor e mais contida que antes, para não brigar com o vídeo. */
.hero__statement {
  margin-top: var(--s5);
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.hero__statement-a { display: block; font-weight: 500; color: var(--text); }
.hero__statement-b { display: block; font-style: italic; font-weight: 400; color: var(--text-secondary); }

.hero__actions { margin-top: var(--s7); }

/* entrada encenada, como uma abertura de filme.
   Só anima quem não pediu movimento reduzido; os demais veem tudo pronto. */
@media (prefers-reduced-motion: no-preference) {
  .hero__role,
  .hero__statement,
  .hero__actions {
    opacity: 0;
    animation: heroRise 1000ms var(--ease) forwards;
  }
  .hero__role { animation-delay: 300ms; }
  .hero__statement { animation-delay: 500ms; }
  .hero__actions { animation-delay: 760ms; }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* controle de pausa acessível do vídeo decorativo */
.hero__videoctl {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: rgba(5, 5, 5, 0.5);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.hero__videoctl:hover { border-color: var(--accent); background: rgba(5, 5, 5, 0.75); }

/* indicador de scroll */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--s4);
  z-index: 2;
  width: 1px; height: 48px;
  background: linear-gradient(180deg, transparent, var(--border-strong));
  transform: translateX(-50%);
}
.hero__scroll::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 16px;
  background: var(--accent);
  animation: scrollHint 2.4s var(--ease) infinite;
}
@keyframes scrollHint {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(32px); opacity: 0; }
}

/* =============================================================
   09 · SEÇÕES
   ============================================================= */

/* --- Projeto em Destaque -------------------------------------------- */
.destaque__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.destaque__media img { width: 100%; height: 100%; object-fit: cover; }
.destaque__media::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--overlay-grad);
  pointer-events: none;
  z-index: 1;
}
.destaque__body { margin-top: var(--s6); display: grid; gap: var(--s4); }
@media (min-width: 1024px) {
  .destaque__body {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s7);
    align-items: start;
  }
}

/* --- Clientes: linha de nomes em Playfair ----------------------------
   Mobile: lista empilhada com hairlines, lida como crédito de cinema.
   Desktop (≥768px): linha corrida centralizada com ponto médio.
   specs/site.md §6 — "quebra em 2–3 linhas no desktop, lista no mobile"
   -------------------------------------------------------------------- */
.clientes__lista {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

/* mobile — lista */
.clientes__lista li {
  padding: var(--s3) 0;
  border-top: 1px solid var(--border);
  font-size: 1.0625rem;
  line-height: 1.3;
}
.clientes__lista li:last-child { border-bottom: 1px solid var(--border); }

@media (min-width: 768px) {
  .clientes__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s3) var(--s4);
    font-size: clamp(1.125rem, 2.2vw, 1.5rem);
    line-height: 1.4;
    text-align: center;
  }
  .clientes__lista li {
    display: inline-flex;
    align-items: center;
    gap: var(--s4);
    padding: 0;
    border: 0;
    font-size: inherit;
  }
  .clientes__lista li:last-child { border-bottom: 0; }
  .clientes__lista li:not(:last-child)::after {
    content: "·";
    color: var(--text-faint);
  }
}

/* --- Sobre Mim ------------------------------------------------------- */
.sobre__grid { display: grid; gap: var(--s6); }
@media (min-width: 768px) {
  .sobre__grid {
    grid-template-columns: 0.85fr 1fr;
    gap: var(--s7);
    align-items: start;
  }
}
.sobre__foto {
  border: 1px solid var(--border);
  background: var(--surface);
}
.sobre__foto img { width: 100%; height: auto; }
.sobre__texto { display: grid; gap: var(--s4); }
.sobre__assinatura { margin-top: var(--s4); }
.sobre__assinatura img { height: 44px; width: auto; opacity: 0.8; }

/* --- Processo: timeline ---------------------------------------------- */
.timeline {
  display: grid;
  gap: 0;
  border-left: 1px solid var(--border);
}
.timeline .step {
  position: relative;
  padding: var(--s4) 0 var(--s5) var(--s4);
}
.timeline .step::before {
  content: "";
  position: absolute;
  left: -3px; top: calc(var(--s4) + 10px);
  width: 5px; height: 5px;
  background: var(--border-strong);
  transition: background-color var(--t-mid) ease;
}
.timeline .step:hover::before { background: var(--accent); }
.step__num { display: block; margin-bottom: var(--s2); }
.step__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: var(--s2);
}
.step__text { color: var(--text-secondary); font-size: 0.9375rem; }

@media (min-width: 1024px) {
  .timeline {
    grid-template-columns: repeat(7, 1fr);
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .timeline .step { padding: var(--s5) var(--s3) 0 0; }
  .timeline .step::before {
    left: 0; top: -3px;
  }
}

/* --- Equipamentos ---------------------------------------------------- */
.equip__fotos { display: grid; gap: var(--s3); margin-bottom: var(--s7); }
@media (min-width: 768px) { .equip__fotos { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
.equip__fotos figure { margin: 0; border: 1px solid var(--border); background: var(--surface); }
.equip__fotos img { width: 100%; height: auto; }

/* foto única de equipamento: centralizada, como imagem-foco da seção */
.equip__foto {
  margin: 0 auto var(--s7);
  max-width: 760px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.equip__foto img { width: 100%; height: auto; }

/* --- Filosofia: preto puro, design.md item 22 ------------------------ */
.filosofia {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.filosofia .quote { max-width: 20ch; margin-inline: auto; }

/* o texto de apoio vem bem menor que a citação: a seção sente, não argumenta */
.filosofia__texto {
  max-width: 58ch;
  margin: var(--s6) auto 0;
  display: grid;
  gap: var(--s4);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.75;
}
.filosofia__attr { margin-top: var(--s7); }

/* --- FAQ: accordion --------------------------------------------------- */
.faq { max-width: 720px; }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item:first-child { border-top: 1px solid var(--border); }

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  width: 100%;
  min-height: 44px;
  padding: var(--s4) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.35;
  color: var(--text);
  transition: color var(--t-fast) ease;
}
.faq__trigger:hover { color: var(--text-secondary); }

.faq__sign {
  position: relative;
  flex: 0 0 auto;
  width: 14px; height: 14px;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) ease;
}
.faq__sign::before { left: 0; top: 6px; width: 14px; height: 1px; }
.faq__sign::after { left: 6px; top: 0; width: 1px; height: 14px; }
.faq__trigger[aria-expanded="true"] .faq__sign::after { transform: rotate(90deg); opacity: 0; }

.faq__painel {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 350ms var(--ease), opacity 350ms ease;
}
.faq__painel[data-open="true"] { opacity: 1; }
.faq__painel .inner { padding-bottom: var(--s5); color: var(--text-secondary); max-width: 62ch; }

/* --- Contato ---------------------------------------------------------- */
.contato__grid { display: grid; gap: var(--s7); }
@media (min-width: 1024px) {
  .contato__grid { grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; }
}

.form { display: grid; gap: var(--s4); }
.field { display: grid; gap: var(--s2); }
.field label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--border-strong); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  background: var(--surface-2);
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }

.field__erro {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  min-height: 0;
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--text-secondary); }

.form__status {
  font-size: 0.875rem;
  color: var(--text-secondary);
  min-height: 1.5em;
}

.contato__canais { display: grid; gap: var(--s3); }
.canal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 44px;
  padding: var(--s4);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color var(--t-mid) ease, background-color var(--t-mid) ease;
}
.canal:hover { border-color: var(--border-strong); background: var(--surface-2); }
.canal__label { display: grid; gap: 2px; }
.canal__valor { color: var(--text-secondary); font-size: 0.9375rem; }

/* =============================================================
   10 · RODAPÉ + BARRA FIXA MOBILE
   ============================================================= */
.footer {
  border-top: 1px solid var(--border);
  padding-block: var(--s7);
}
.footer__inner { display: grid; gap: var(--s6); }
@media (min-width: 768px) {
  .footer__inner { grid-template-columns: 1fr auto; align-items: center; }
}
.footer__brand img { height: 40px; width: auto; opacity: 0.9; }
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: color var(--t-fast) ease;
}
.footer__nav a:hover { color: var(--text); }
.footer__legal {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8125rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  justify-content: space-between;
}

/* barra fixa de WhatsApp — só mobile, aparece depois do Hero */
.cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: var(--s2) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom));
  background: rgba(5, 5, 5, 0.94);
  border-top: 1px solid var(--border);
  transform: translateY(100%);
  transition: transform var(--t-fast) var(--ease);
}
.cta-bar.is-visible { transform: translateY(0); }
.cta-bar .btn { width: 100%; }
@media (min-width: 768px) { .cta-bar { display: none; } }

/* O espaço da barra fixa vai no rodapé, não no body — senão o Hero
   deixa de caber exatamente em 100dvh e a página nasce com scroll. */
@media (max-width: 767px) {
  .footer { padding-bottom: calc(var(--s7) + 76px); }
}

/* =============================================================
   11 · RESPONSIVO — organização mobile
   Referência de ritmo e tipografia: a proposta comercial
   (mesmo sistema visual, já validado com clientes reais).
   ============================================================= */
@media (min-width: 768px) {
  .portfolio__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  /* --- Hero: precisa caber em 100dvh com os 2 CTAs empilhados --- */
  .hero__inner { padding-block: var(--s7) var(--s6); }
  .hero__role { font-size: 0.72rem; letter-spacing: 0.18em; }
  .hero__role::before { width: 22px; }
  .hero__statement { margin-top: var(--s4); max-width: 16ch; font-size: clamp(1.9rem, 8vw, 2.8rem); }
  .hero__actions { margin-top: var(--s6); }
  /* o indicador de scroll colidiria com os botões — é decorativo */
  .hero__scroll { display: none; }
  .hero__videoctl { bottom: auto; top: 88px; right: var(--gutter); }

  /* --- respiro de seção mais contido --- */
  .section__header { margin-bottom: var(--s6); }
  .section__title { font-size: clamp(2rem, 8.5vw, 2.5rem); }

  /* --- portfólio full-bleed, sangrando até a borda --- */
  .portfolio__grid { gap: var(--s5); }
  .portfolio__grid .project {
    margin-inline: calc(var(--gutter) * -1);
    border-inline: 0;
    border-top: 0;
  }
  .portfolio__grid .project:last-child { border-bottom: 0; }

  /* --- destaque: media também sangra --- */
  .destaque__media {
    margin-inline: calc(var(--gutter) * -1);
    border-inline: 0;
  }
  .destaque__body { margin-top: var(--s5); gap: var(--s5); }

  /* --- timeline vertical: 7 etapas exigem economia de altura --- */
  .timeline .step { padding: var(--s3) 0 var(--s5) var(--s4); }
  .timeline .step::before { top: calc(var(--s3) + 8px); }
  .step__num { font-size: 1.75rem; margin-bottom: 0; }
  .step__name { font-size: 1.125rem; margin-bottom: var(--s1); }

  /* --- equipamentos: foto única em destaque, a segunda vem depois --- */
  .equip__fotos { gap: var(--s3); margin-bottom: var(--s6); }

  /* --- filosofia: a citação precisa de margem lateral própria --- */
  .filosofia .quote { max-width: none; }

  /* --- contato: canais com mais presença --- */
  .canal { padding: var(--s4) var(--s4); }
  .contato__grid { gap: var(--s6); }

  /* --- rodapé --- */
  .footer__brand img { height: 32px; }
  .footer__legal { flex-direction: column; gap: var(--s2); }
}

/* alvos de toque confortáveis em telas estreitas */
@media (max-width: 400px) {
  :root { --gutter: 20px; }
  .hero__name { font-size: 2.5rem; }
}

/* =============================================================
   12 · MOVIMENTO — design.md §10
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* escalonamento em grade, máx. 5 */
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* crítico: o conteúdo não pode ficar preso em opacity 0 */
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__media video { opacity: 1; }
  .hero__scroll::after { animation: none; }
}

/* =============================================================
   13 · SHOWCASE — leque de projetos (feito à mão, sem GSAP)
   Reescreve em vanilla o efeito de "card fan": cantos retos,
   sem blur nem sombra, movimento suave de câmera (sem quicar).
   As posições são calculadas em main.js (initShowcase).
   ============================================================= */
.showcase .section__header { margin-bottom: var(--s6); }

.fan {
  position: relative;
  height: clamp(240px, 56vw, 400px);
  max-width: 920px;
  margin-inline: auto;
}

.fan__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(94px, 22vw, 200px);
  aspect-ratio: 3 / 4;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 700ms var(--ease), opacity 700ms var(--ease);
}
.fan__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9);
}
.fan__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,0) 42%, rgba(5,5,5,0.85) 100%);
  pointer-events: none;
}
.fan__card-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--s3);
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--text);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-fast) ease, transform var(--t-fast) ease;
}
.fan__card.is-active { border-color: var(--border-strong); }
.fan__card.is-active .fan__card-label { opacity: 1; transform: none; }
.fan__card:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

.showcase__hint {
  margin-top: var(--s6);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* dica de hover só faz sentido em quem tem mouse */
@media (hover: none) {
  .showcase__hint { display: none; }
}