/* Versão D: híbrido B (claro, Geist, grade) + C (vídeo que conta a história). Botões e caixas quadrados. */
:root {
  /* cor: base branca, névoa só como alternância de seção */
  --bg: #ffffff;
  --bg-2: #f4f6f8;          /* faixa alternada (névoa do B) */
  --ink: #101215;
  --muted: #5b6470;         /* 5,9:1 sobre #fff */
  --line: rgba(16, 18, 21, 0.14);
  --line-strong: #101215;
  --accent: #710074;        /* lilás do B: CTA hover, marcas, links ativos (9,6:1 sobre #fff) */
  --glow: #c448cd;          /* só foco e detalhe no vídeo */
  --accent-soft: #f3e6f4;   /* fundo de hover em caixas */
  --veil: rgba(255, 255, 255, 0.72);       /* véu sobre vídeo/imagem */
  --veil-mobile: rgba(255, 255, 255, 0.80);

  /* tipografia (a do B) */
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-h1: clamp(2.75rem, 1.2rem + 7vw, 7rem);
  --fs-h2: clamp(1.875rem, 1.1rem + 3vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --fs-meta: 0.75rem;
  --lh-h1: 0.95;
  --lh-h2: 1.05;
  --lh-body: 1.55;
  --tracking-h1: -0.06em;
  --tracking-h2: -0.04em;
  --tracking-body: -0.01em;
  --tracking-meta: 0.06em;
  --weight-head: 600;

  /* formas: tudo quadrado */
  --radius-btn: 0;
  --radius-box: 2px;        /* máximo permitido em qualquer elemento */
  --border: 1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);

  /* espaço e grade */
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 48px; --space-5: 80px; --space-6: 120px;
  --margin-x: 20px;
  --max-w: 1480px;
  --nav-h: 56px;
  --tap: 44px;
  --cta-bar-h: 56px;        /* barra fixa de CTA no mobile, depois da abertura */

  /* encaixe */
  --section-h: 100svh;
  --snap-pad-top: var(--nav-h);   /* scroll-padding-top: nav sticky não cobre o conteúdo */

  /* movimento */
  --t-reveal: 240ms;
  --t-state: 120ms;
}
@media (min-width: 1024px) { :root { --margin-x: 64px; } }
@media (min-width: 1700px) { :root { --margin-x: 96px; } }
@media (prefers-reduced-motion: reduce) { :root { --t-reveal: 0ms; --t-state: 0ms; } }

/* ---- Encaixe obrigatório ---- */
html { overscroll-behavior-y: none; }   /* sem scroll-snap: rolagem livre, o ímã em JS encaixa nas bordas (DECISOES 39) */
.sec { min-height: var(--section-h);   /* no mínimo 1 tela; cresce se o conteúdo não couber (DECISOES 39) */
       position: relative; overflow: hidden; background: var(--bg); color: var(--ink); }
.sec--mist { background: var(--bg-2); }
.sec__inner { position: relative; z-index: 2; min-height: var(--section-h); max-width: var(--max-w); margin-inline: auto;
              padding: calc(var(--nav-h) + var(--space-2)) var(--margin-x) calc(var(--bar-pad, 0px) + var(--space-2)); display: flex; flex-direction: column; justify-content: center; }

/* ---- Fundos de seção ---- */
.bg-video, .bg-parallax { position: absolute; inset: 0; z-index: 0; }
.bg-video canvas, .bg-parallax img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-parallax img { height: 120%; will-change: transform; }        /* 20% de folga para o deslocamento */
.bg-veil { position: absolute; inset: 0; z-index: 1; background: var(--veil); }
@media (max-width: 767px) { .bg-veil { background: var(--veil-mobile); } }

/* ---- Botões ---- */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 14px 20px;
       font: 500 15px/1 var(--font); letter-spacing: var(--tracking-body); text-decoration: none; cursor: pointer;
       border: 1px solid var(--ink); border-radius: var(--radius-btn); background: var(--ink); color: #fff;
       transition: background var(--t-state), color var(--t-state), border-color var(--t-state); }
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn:active { background: #4d004f; border-color: #4d004f; }
.btn:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* ---- Cards de projeto ---- */
.projetos { display: grid; gap: var(--space-2); grid-template-columns: repeat(3, 1fr); }
.card { display: flex; flex-direction: column; background: var(--bg); border: var(--border); border-radius: var(--radius-box);
        color: inherit; text-decoration: none; transition: border-color var(--t-state), background var(--t-state); }
.card__thumb { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; background: var(--bg-2); border-bottom: var(--border); }
.card__body { padding: var(--space-2); display: grid; gap: 6px; }
.card__name { font: var(--weight-head) var(--fs-h3)/1.15 var(--font); letter-spacing: -0.03em; }
.card__line { color: var(--muted); font-size: 15px; line-height: 1.4; }
.card__link { margin-top: 6px; font: 500 var(--fs-meta)/1 var(--mono); letter-spacing: var(--tracking-meta); text-transform: uppercase; }
.card:hover { border-color: var(--ink); background: var(--accent-soft); }
.card:hover .card__link { color: var(--accent); }
.card:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; border-color: var(--ink); }
/* mobile: faixa horizontal com encaixe lateral, mostra a borda do próximo card; cabe N itens sem estourar 100svh */
@media (max-width: 767px) {
  .projetos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-2);
              margin-inline: calc(var(--margin-x) * -1); padding-inline: var(--margin-x); scroll-padding-inline: var(--margin-x); }
  .card { flex: 0 0 78%; scroll-snap-align: start; }
}
/* desktop: até 6 em grade; passou disso, vira faixa horizontal */
@media (min-width: 768px) and (max-width: 1023px) { .projetos { grid-template-columns: repeat(2, 1fr); } }

/* ---- Meta e eyebrow ---- */
.eyebrow { font: 500 var(--fs-meta)/1 var(--mono); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--accent); }