/* ============================================================================
   Boni Content — site.css
   Um arquivo só (site estático sem build, 1 request só). Passa do teto de 800 linhas de
   propósito: em troca, está organizado em blocos numerados — procure pelo cabeçalho do bloco.
     1. Fontes            5. Voo (tema do engine + .sw-done)    9. Estúdio
     2. Tokens            6. Interface de estúdio (HUD/timeline) 10. ADS
     3. Base / utilidades 7. Película + Serviços                11. Por que + Contato
     4. Header + menu     8. Produção (timeline de edição)      12. Rodapé · 13. Responsivo
   ========================================================================== */

/* ---------- 1. Fontes (self-hosted, latin + latin-ext) ---------- */
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin.woff2?v=20260917k") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-ext.woff2?v=20260917k") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-italic-latin.woff2?v=20260917k") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-italic-latin-ext.woff2?v=20260917k") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("/assets/fonts/jost-latin.woff2?v=20260917k") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("/assets/fonts/jost-latin-ext.woff2?v=20260917k") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/pinyon-script-latin.woff2?v=20260917k") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/pinyon-script-latin-ext.woff2?v=20260917k") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens ---------- */
:root {
  --cream: #F3EAE0;
  --paper: #FAF5EF;
  --sand: #E6D6C6;
  --blush: #E8D2C8;
  --rose: #C9A596;
  --bronze: #9A7157;
  --bronze-deep: #6E4E3C;
  --espresso: #2F211B;
  --ink: #3A2C25;
  --ink-soft: #5E4B40;
  --rec: #C8553D;

  --line: color-mix(in srgb, var(--bronze) 42%, transparent);
  --line-soft: color-mix(in srgb, var(--bronze) 24%, transparent);
  --on-dark: var(--cream);
  --on-dark-soft: color-mix(in srgb, var(--cream) 72%, var(--espresso));
  --line-dark: color-mix(in srgb, var(--cream) 16%, transparent);

  --font-serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-sans: "Jost", "Futura", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --font-script: "Pinyon Script", "Snell Roundhand", "Segoe Script", cursive;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(20px, 5vw, 64px);
  --wrap: 1240px;
  --header-h: 76px;
  --radius-s: 6px;
  --radius-m: 10px;
  --ease-out: cubic-bezier(.22, .8, .24, 1);

  /* escala de camadas (engine usa 0–60) */
  --z-section: 2;
  --z-hud: 35;
  --z-reel: 45;
  --z-menu: 65;
  --z-header: 70;
  --z-intro: 100;
  --z-skip: 110;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* O engine põe overflow-x:hidden em html/body (camada sw). "clip" não cria container de
   rolagem — sem isso position:sticky morre dentro do body. */
html, body { overflow-x: clip; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 8px);
  background: var(--cream);
}
/* Sem `scroll-behavior: smooth` global de propósito: um salto suave que ATRAVESSA o voo faz o
   engine carregar todos os clipes do caminho (56 MB). Quem rola suave é o main.js, e só
   quando faz sentido (ver initAnchors). */
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 4px; }
/* Sobre fundo espresso o anel de bronze fica em 3,5:1 — no limite. A película é escura como a
   seção escura e o rodapé, então entra na mesma regra (anel blush, ~11:1). */
.section--dark :focus-visible, .site-footer :focus-visible, .filmstrip :focus-visible { outline-color: var(--blush); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: var(--z-skip);
  padding: 12px 18px; border-radius: 999px; background: var(--espresso); color: var(--cream);
  font-size: .9rem; text-decoration: none; transform: translateY(-160%); transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: none; }

.wrap {
  width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto;
  /* safe-area: a página roda sob o notch em celular deitado (viewport-fit=cover) */
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 14px 28px; border-radius: 999px;
  font-family: var(--font-sans); font-weight: 500; font-size: .98rem; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--espresso); color: var(--cream); }
.btn--primary:hover { background: var(--bronze-deep); }
.btn--ghost { color: var(--espresso); border-color: var(--line); background: transparent; }
.btn--ghost:hover { border-color: var(--bronze-deep); background: color-mix(in srgb, var(--paper) 70%, transparent); }
.btn--lg { min-height: 58px; padding: 16px 32px; font-size: 1.02rem; }
.btn__icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* pontinho REC (único uso de --rec) */
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .rec-dot { animation: rec-pulse 1.8s ease-in-out infinite; }
}
@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* rótulo de seção em claquete */
.slate {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bronze-deep); line-height: 1.2;
}
/* listra de claquete: fina e discreta (bronze), não fita-zebra. A versão de contraste
   cheio fica só na claquete de abertura. */
.slate__clap {
  width: 30px; height: 10px; border-radius: 2px; flex: none; opacity: .72;
  background: repeating-linear-gradient(-55deg, var(--bronze-deep) 0 3px, transparent 3px 7px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bronze-deep) 45%, transparent);
}
.slate--dark { color: var(--rose); }
.slate--dark .slate__clap {
  background: repeating-linear-gradient(-55deg, var(--rose) 0 3px, transparent 3px 7px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rose) 45%, transparent);
}

.section { position: relative; z-index: var(--z-section); padding-block: clamp(88px, 11vw, 168px); }
.section--cream { background: var(--cream); }
.section--paper { background: var(--paper); }
.section--sand { background: var(--sand); }
.section--dark { background: var(--espresso); color: var(--on-dark); }

.section-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 64px;
  align-items: end; margin-bottom: clamp(48px, 6vw, 84px);
}
.section-head--solo { grid-template-columns: minmax(0, 1fr); }
.section-head__main { display: grid; gap: 22px; justify-items: start; }
.section-title {
  font-family: var(--font-serif); font-weight: 500; color: var(--espresso);
  font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: 1; letter-spacing: -.015em;
}
.section--dark .section-title { color: var(--cream); }
.section-lead { font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6; color: var(--ink-soft); max-width: 44ch; }
.section--dark .section-lead { color: var(--on-dark-soft); }
.script-line { font-family: var(--font-script); font-size: clamp(2rem, 3.2vw, 2.7rem); line-height: 1.2; color: var(--bronze-deep); }

/* cantoneiras de visor (reuso: fotos, contato) */
.frame-corners { position: absolute; inset: 14px; pointer-events: none; }
.frame-corners i { position: absolute; width: 22px; height: 22px; border: 0 solid var(--cream); opacity: .9; }
.frame-corners i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.frame-corners i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.frame-corners i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.frame-corners i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.frame-corners--lg { inset: 0; }
.frame-corners--lg i { width: 44px; height: 44px; border-color: var(--bronze-deep); opacity: .7; }

/* revelação ao rolar — só quando o main.js ligou (sem JS o conteúdo aparece normal) */
.reveal-on [data-reveal] { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-on [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }

/* ---------- 4. Header + menu ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  padding-top: env(safe-area-inset-top);
  background: var(--cream);   /* opaco: a 96% os títulos grandes apareciam através dele */
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .35s ease, border-color .35s ease;
}
.site-header__inner {
  display: flex; align-items: center; gap: 28px;
  height: var(--header-h); max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  transition: max-width .35s var(--ease-out);
}
/* Durante o voo o header acompanha o VISOR (sangra até as bordas, como as cantoneiras e as
   legendas do HUD); depois do voo volta para a mesma coluna central das seções. */
.js .site-header.is-flight { background: transparent; border-bottom-color: transparent; }
@media (min-width: 861px) {
  /* 100% (não 100vw: vw inclui a barra de rolagem e jogaria o pill para fora) */
  .js .site-header.is-flight .site-header__inner { max-width: 100%; padding-inline: 64px; }
}
/* Véu creme suave sob o header enquanto o voo roda: sem ele o wordmark/MENU somem nas cenas
   escuras (chegava a 1,5:1). Mesma ideia das plaquinhas do HUD. */
.js .site-header.is-flight::before {
  content: ""; position: absolute; inset: 0 0 -30px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cream) 84%, transparent) 0%,
    color-mix(in srgb, var(--cream) 52%, transparent) 62%, transparent 100%);
}

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--espresso); margin-right: auto; min-height: 44px; }
.brand__mark { width: 40px; height: auto; }
.brand__word { display: grid; line-height: 1; justify-items: center; }
.brand__boni { font-family: var(--font-serif); font-weight: 500; font-size: 1.28rem; letter-spacing: .34em; margin-right: -.34em; text-transform: uppercase; color: var(--bronze-deep); }
.brand__content { font-family: var(--font-sans); font-weight: 400; font-size: .62rem; letter-spacing: .42em; margin-right: -.42em; margin-top: 4px; text-transform: uppercase; color: var(--bronze-deep); }

.site-nav ul { display: flex; gap: 6px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); position: relative;
}
.site-nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 10px; height: 1px;
  background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out);
}
.site-nav a:hover::after { transform: scaleX(1); }
/* Durante o voo o menu principal some da vista, mas CONTINUA no teclado e no leitor de tela
   (com visibility:hidden ele sumia por ~17 telas de rolagem); ao receber foco, reaparece. */
.js .site-header.is-flight .site-nav { opacity: 0; pointer-events: none; }
.js .site-header.is-flight .site-nav:focus-within { opacity: 1; pointer-events: auto; }
.site-nav { transition: opacity .3s ease; }

.pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px;
  border-radius: 999px; background: var(--espresso); color: var(--cream);
  font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s ease;
}
.pill:hover { background: var(--bronze-deep); }

.menu-toggle {
  display: none; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 4px 0 10px;
  background: transparent; border: 0; cursor: pointer; color: var(--espresso);
  font-size: .76rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
}
.menu-toggle__bars { display: grid; gap: 6px; width: 22px; }
.menu-toggle__bars i { display: block; height: 1.5px; background: currentColor; transition: transform .25s var(--ease-out); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  padding: calc(var(--header-h) + env(safe-area-inset-top) + 20px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
  background: var(--cream); display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  overflow-y: auto; opacity: 0; transition: opacity .25s ease;
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__nav li + li { border-top: 1px solid var(--line-soft); }
.menu__nav a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0;
  font-family: var(--font-serif); font-weight: 500; font-size: 2.2rem; line-height: 1.1; color: var(--espresso); text-decoration: none;
}
.menu__cena { order: 2; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-deep); }
.menu__contact { display: grid; gap: 14px; }
.menu__mail { text-align: center; color: var(--bronze-deep); padding: 10px; }
.menu-open .site-header { background: var(--cream); border-bottom-color: var(--line-soft); }
.menu-open, .menu-open body { overflow: hidden; }

/* ---------- 5. Voo — tema do engine (CSS sem camada vence o @layer sw) ---------- */
.world-flight {
  --sw-bg: var(--cream);
  --sw-ink: var(--espresso);
  --sw-ink-soft: var(--ink-soft);
  --sw-accent: var(--bronze);
  --sw-font-display: var(--font-serif);
  --sw-font-body: var(--font-sans);
}
.sw-topbar { display: none; }   /* o site tem header próprio (engine roda com nav:false, sem brand) */
/* O reset global `img { height:auto }` é CSS sem camada e venceria o `height:100%` do engine
   (que está em @layer sw) — o still da cena ficava com altura 16:9 e sobrava faixa creme. */
.sw-scene__still { height: 100%; max-width: none; }
.sw-particles { display: none; }   /* partículas escuras do engine não fazem parte da direção de arte */
.sw-copy__num { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; color: var(--bronze-deep); }
.sw-copy__num::before { content: "CENA "; }
@media (min-width: 861px) {
  .sw-copylayer::before { width: min(64vw, 920px); }
  /* Cena 1: a câmera passa o logo em relevo (700 px de largura) por trás do título. Véu mais
     denso só nessa cena — o data-scene vem do studio-ui.js. */
  .world-flight[data-scene="1"] .sw-copylayer::before {
    background: linear-gradient(90deg, var(--sw-bg) 0 46%,
      color-mix(in srgb, var(--sw-bg) 88%, transparent) 62%,
      color-mix(in srgb, var(--sw-bg) 45%, transparent) 80%, transparent 100%);
  }
  /* copy ancorada acima da timeline, como uma legenda de "lower third"; o engine só mexe
     no translateY inline, então top/bottom daqui valem */
  .sw-copy { width: min(44vw, 540px); left: max(var(--gutter), 64px); top: auto; bottom: 136px; }
  .sw-copy__num { display: none; }             /* o visor já mostra CENA x/08 */
  .sw-copy__eyebrow { margin-top: 0; }
  .sw-scrollbar { display: none; }             /* a agulha da timeline já mostra o progresso */
}
.sw-copy__eyebrow {
  margin-top: 22px; font-family: var(--font-sans); font-weight: 500; font-size: .74rem;
  letter-spacing: .3em; color: var(--bronze-deep);
}
.sw-copy__title {
  font-family: var(--font-serif); font-weight: 500; color: var(--espresso);
  font-size: clamp(2.5rem, 4.4vw, 4.2rem); line-height: 1; letter-spacing: -.015em; margin-top: 14px; text-wrap: balance;
}
.sw-copy__body { color: var(--ink); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.65; max-width: 42ch; margin-top: 20px; text-wrap: pretty; }
.sw-copy__tags { gap: 8px; margin-top: 26px; }
.sw-copy__tags li {
  font-family: var(--font-sans); font-weight: 500; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bronze-deep); padding: 7px 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 78%, transparent); border: 1px solid var(--line);
}
/* ⚠️ O engine dá `pointer-events:auto` na linha de botões (regra em @layer sw) e isso vencia
   o `none` INLINE que ele põe nos artigos de copy inativos: os botões invisíveis da cena 8
   ficavam por cima do texto das cenas 1-7 e um clique no texto do hero abria o WhatsApp.
   `inherit` faz a linha (e os links dentro dela) seguir o estado do próprio artigo. */
.sw-copy__cta { gap: 12px; margin-top: 30px; pointer-events: inherit; }
.sw-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 14px 26px;
  font-family: var(--font-sans); font-weight: 500; font-size: .95rem; border-radius: 999px;
}
.sw-btn--primary { background: var(--espresso); color: var(--cream); }
.sw-btn--primary::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); }
.sw-btn--ghost { color: var(--espresso); border: 1px solid var(--bronze); background: color-mix(in srgb, var(--paper) 60%, transparent); }
.sw-hint { bottom: 104px; white-space: nowrap; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .24em; color: var(--bronze-deep); }
.sw-hint i { border-color: color-mix(in srgb, var(--bronze-deep) 45%, transparent); }
.sw-scrollbar { height: 2px; background: transparent; }
.sw-scrollbar span { background: var(--bronze); }

/* Fim do voo: libera as camadas fixas para as seções DOM abaixo. O engine só alterna a
   classe .sw-done — quem esconde é este CSS (padrão BioHelix/Aurum). */
.sw-stage, .sw-copylayer, .sw-route, .sw-hint, .sw-scrollbar, .sw-sky { transition: opacity .45s ease; }
.sw-done .sw-stage, .sw-done .sw-copylayer, .sw-done .sw-route, .sw-done .sw-hint, .sw-done .sw-scrollbar,
.sw-done .sw-sky {
  opacity: 0; pointer-events: none;
}
/* O .sw-sky é fixed com z-index 0 e pintaria por cima de conteúdo estático que vem depois
   no DOM — as seções pós-voo têm camada própria. */
.filmstrip, .section, .site-footer { position: relative; z-index: var(--z-section); }
/* Cinto e suspensório: nenhum descendente da copy (pointer-events inline do engine) pode
   comer cliques das seções de baixo depois do voo. */
.sw-done .sw-copylayer, .sw-done .sw-copylayer * { pointer-events: none !important; }

/* ---------- 6. Interface de estúdio: claquete, visor, timeline do voo ---------- */
/* 6a. claquete de abertura */
.intro { display: none; }
.has-intro .intro {
  position: fixed; inset: 0; z-index: var(--z-intro); display: grid; place-items: center;
  background: var(--cream); cursor: pointer;
  border-bottom: 1px solid var(--line);
  animation: intro-lift .52s cubic-bezier(.76, 0, .24, 1) 1.06s forwards;
}
.has-intro .intro.is-skipping { animation: intro-lift-fast .32s cubic-bezier(.6, 0, .3, 1) forwards; }
.intro__stage { display: grid; justify-items: center; gap: 26px; }
.intro__slate { animation: slate-in .22s var(--ease-out) both; }
.clap { width: min(240px, 58vw); height: auto; overflow: visible; animation: slate-shake .16s linear .55s; }
.clap__arm { transform-box: view-box; transform-origin: 10px 40px; transform: rotate(-24deg); animation: arm-clap .55s both; }
.clap__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; fill: var(--rose); }
.clap__value { font-family: var(--font-serif); font-weight: 500; font-size: 20px; letter-spacing: .12em; fill: var(--cream); }
.clap__num { font-family: var(--font-serif); font-weight: 500; font-size: 32px; fill: var(--cream); font-variant-numeric: lining-nums; }
.intro__logo { width: auto; height: clamp(84px, 11vw, 116px); opacity: 0; animation: logo-in .38s var(--ease-out) .62s forwards; }
@keyframes slate-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes arm-clap {
  0% { transform: rotate(-24deg); }
  60% { transform: rotate(-24deg); animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  100% { transform: rotate(0deg); }
}
@keyframes slate-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1.5px, 1px); }
  50% { transform: translate(1.5px, -1px); }
  75% { transform: translate(-.75px, .5px); }
}
@keyframes logo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes intro-lift { to { transform: translateY(-100%); } }
@keyframes intro-lift-fast { from { opacity: 1; } to { transform: translateY(-100%); } }

/* 6b. visor da câmera (decoração, aria-hidden) */
.hud {
  position: fixed; z-index: var(--z-hud); pointer-events: none;
  inset: calc(var(--header-h) + env(safe-area-inset-top) + 6px) 28px 86px 28px;
  color: var(--bronze-deep);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: opacity .4s ease, visibility 0s linear;
}
.hud__corner { position: absolute; width: 30px; height: 30px; border: 0 solid color-mix(in srgb, var(--bronze-deep) 55%, transparent); }
.hud__corner--tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hud__corner--tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hud__corner--bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hud__corner--br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.hud__tl, .hud__tr, .hud__bl {
  position: absolute; display: flex; align-items: center; gap: 16px; padding: 6px 9px; border-radius: 3px;
  /* plaquinha sólida o bastante para o texto de 11,5px ficar legível sobre QUALQUER cena
     (a 55% caía para ~3:1 sobre a cortina clara e sobre a grade de fotos) */
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hud__tl { top: 8px; left: 38px; }
.hud__tr { top: 8px; right: 38px; }
.hud__bl { bottom: 14px; left: 44px; display: none; }   /* desktop: o timecode mora na timeline */
.hud__rec { display: inline-flex; align-items: center; gap: 8px; color: var(--bronze-deep); }
.hud__rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); }
@media (prefers-reduced-motion: no-preference) {
  .hud__rec i { animation: rec-pulse 1.2s steps(2, jump-none) infinite; }
}
.hud__battery { width: 24px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1; }
.hud__battery .fill { fill: currentColor; stroke: none; }
.hud__focus { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; transform: translate(-50%, -50%); opacity: .45; }
.hud__focus::before, .hud__focus::after { content: ""; position: absolute; background: var(--bronze-deep); }
.hud__focus::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%);
  -webkit-mask: linear-gradient(#000 0 38%, transparent 38% 62%, #000 62%); mask: linear-gradient(#000 0 38%, transparent 38% 62%, #000 62%); }
.hud__focus::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%);
  -webkit-mask: linear-gradient(90deg, #000 0 38%, transparent 38% 62%, #000 62%); mask: linear-gradient(90deg, #000 0 38%, transparent 38% 62%, #000 62%); }

/* 6c. timeline de edição = navegação do voo (desktop) */
.reel {
  position: fixed; z-index: var(--z-reel); left: 28px; right: 28px; bottom: 18px;
  display: flex; align-items: stretch; gap: 8px;
  padding: 7px 8px 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  border: 1px solid var(--line-soft);
  transition: opacity .4s ease, visibility 0s linear;
}
.reel__ruler {
  height: 7px; margin: 0 2px 5px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--bronze-deep) 40%, transparent) 0 1px, transparent 1px 10px);
  -webkit-mask: linear-gradient(#000 0 45%, transparent 45%); mask: linear-gradient(#000 0 45%, transparent 45%);
  opacity: .9;
}
.reel__tc {
  display: flex; align-items: center; flex: none; padding: 0 14px; border-radius: 5px;
  background: var(--espresso); color: var(--cream);
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em; font-variant-numeric: tabular-nums;
}
.reel__main { flex: 1 1 auto; min-width: 0; }
/* a agulha fica ABAIXO dos clipes (como num editor de verdade): aparece na régua e nas
   frestas de 3 px, e nunca corta o nome da cena ao meio */
.reel__lane { position: relative; isolation: isolate; }
.reel__clips { display: flex; gap: 3px; }
.reel__clip { position: relative; z-index: 1; flex: var(--w) 1 0; min-width: 0; }
.reel__btn {
  width: 100%; min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border: 0; border-radius: 4px; cursor: pointer; text-align: left; overflow: hidden; white-space: nowrap;
  background: color-mix(in srgb, var(--sand) 80%, var(--paper));
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--bronze-deep) 30%, transparent);
  color: var(--ink); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.reel__clip:nth-child(3n+2) .reel__btn { background: color-mix(in srgb, var(--blush) 85%, var(--paper)); }
.reel__clip:nth-child(3n) .reel__btn { background: color-mix(in srgb, var(--rose) 45%, var(--paper)); }
/* precisa de especificidade MAIOR que as regras de cor por posição acima, senão 5 dos 8
   clipes não davam retorno nenhum no hover */
.reel .reel__clip .reel__btn:hover:not([aria-current="true"]),
.reel .reel__clip .reel__btn:focus-visible {
  background: var(--paper); color: var(--espresso);
  box-shadow: inset 0 -2px 0 var(--bronze-deep), inset 2px 0 0 color-mix(in srgb, var(--bronze-deep) 30%, transparent);
}
.reel__n { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; color: var(--bronze-deep); }
.reel__label { overflow: hidden; text-overflow: ellipsis; }
.reel .reel__btn[aria-current="true"] { background: var(--espresso); color: var(--cream); }
.reel .reel__btn[aria-current="true"] .reel__n { color: var(--rose); }
.reel__playhead {
  position: absolute; left: 0; top: -14px; bottom: -3px; width: 0; z-index: 0;
  pointer-events: none; will-change: transform;
}
.reel__playhead::before { content: ""; position: absolute; left: -.5px; top: 6px; bottom: 0; width: 1.5px; background: var(--rec); }
.reel__playhead::after {
  content: ""; position: absolute; left: -6px; top: 0; width: 12px; height: 9px; background: var(--rec);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 50% 100%, 0 45%);
}

/* voo terminou (ou ainda não montou): visor e timeline saem de cena */
.world-flight.sw-done ~ .hud, .world-flight.sw-done ~ .reel { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.world-flight.sw-done ~ .hud .hud__rec i { animation: none; }
@media (min-width: 861px) { .sw-route { display: none; } }

/* ---------- 7. Película + Serviços ---------- */
.filmstrip {
  background: var(--espresso); color: var(--cream); overflow: hidden;
  padding-block: 26px; border-block: 1px solid #000;
}
.filmstrip::before, .filmstrip::after {
  /* z-index 1: os furos ficam acima do halo do botão de pausa (que é largo de propósito) — sem
     isto o halo abria um buraco na fita perfurada perto do controle. */
  content: ""; position: absolute; left: 0; right: 0; height: 8px; opacity: .5; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='8'%3E%3Crect x='4' y='0' width='12' height='8' rx='1.6' fill='%23F3EAE0'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
}
.filmstrip::before { top: 8px; }
.filmstrip::after { bottom: 8px; }
.filmstrip__track { display: flex; width: max-content; }
.filmstrip__list { display: flex; align-items: center; flex: none; padding-block: 6px; }
.filmstrip__list li {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.3;
}
.filmstrip__list li::after { content: "•"; font-style: normal; color: var(--rose); margin-inline: clamp(22px, 2.6vw, 38px); font-size: .7em; }
.filmstrip.is-running .filmstrip__track { animation: film-roll var(--dur, 60s) linear infinite; will-change: transform; }
.filmstrip.is-running:hover .filmstrip__track,
.filmstrip.is-offscreen .filmstrip__track,
.filmstrip.is-paused .filmstrip__track { animation-play-state: paused; }
@keyframes film-roll { to { transform: translate3d(calc(-1 * var(--loop, 50%)), 0, 0); } }
/* sem animação (reduced-motion ou sem JS): a lista quebra e fica toda visível.
   ⚠️ `flex:none` no .filmstrip__list deixava a largura em max-content — o wrap nunca
   acontecia e 8 das 9 palavras ficavam cortadas no celular. */
.filmstrip:not(.is-running) .filmstrip__track { width: auto; justify-content: center; padding-inline: var(--gutter); }
.filmstrip:not(.is-running) .filmstrip__list { flex: 0 1 auto; min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: center; row-gap: 2px; }
/* estado só do instante da medição no main.js (a lista precisa estar numa linha só) */
.filmstrip.is-measuring .filmstrip__list { flex: none; max-width: none; flex-wrap: nowrap; }
/* pausar a película sem mouse (WCAG 2.2.2: conteúdo em movimento precisa de controle) */
.filmstrip__pause {
  position: absolute; right: max(var(--gutter), env(safe-area-inset-right)); top: 50%; transform: translateY(-50%);
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cream) 30%, transparent); background: var(--espresso);
  color: var(--cream); cursor: pointer;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
}
/* O halo antigo (20/20) era curto demais: a palavra vizinha era cortada no meio e o botão virava
   um adesivo no meio da faixa. Um halo largo e macio faz as palavras SE DISSOLVEREM no espresso
   dos dois lados do controle, e ainda cobre a calha até a borda da tela. O vazamento vertical não
   importa: a .filmstrip tem overflow hidden, e os furos ficam por cima (z-index abaixo). */
.filmstrip.is-running .filmstrip__pause { display: inline-flex; box-shadow: 0 0 46px 40px var(--espresso); }
.filmstrip__pause:hover { background: color-mix(in srgb, var(--cream) 14%, var(--espresso)); }
.filmstrip__pause i { width: 10px; height: 11px; border-inline: 3px solid currentColor; }
.filmstrip.is-paused .filmstrip__pause i { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }

.sheet {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.svc {
  position: relative; padding: 44px clamp(22px, 2.2vw, 32px) 40px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  transition: background-color .3s ease;
}
.svc:hover { background: var(--paper); }
.svc__clap {
  position: absolute; left: clamp(22px, 2.2vw, 32px); top: -5px; width: 42px; height: 8px; border-radius: 2px;
  background: repeating-linear-gradient(-55deg, var(--bronze-deep) 0 3px, transparent 3px 7px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bronze-deep) 45%, transparent);
  opacity: .7; transform-origin: 0 100%;
  transition: opacity .3s ease;
}
.svc:hover .svc__clap, .svc:focus-within .svc__clap { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .svc:hover .svc__clap { animation: card-clap .42s var(--ease-out); }
}
@keyframes card-clap { 0% { transform: rotate(0); } 40% { transform: rotate(-16deg); } 72% { transform: rotate(1deg); } 100% { transform: rotate(0); } }
.svc__top { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.svc__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--blush); color: var(--bronze-deep); }
.svc__icon svg, .reason__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.svc__n { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; color: var(--bronze-deep); align-self: flex-start; }
.svc__title { margin-top: 30px; font-family: var(--font-serif); font-weight: 500; font-size: 1.76rem; letter-spacing: -.005em; line-height: 1.1; color: var(--espresso); }
.svc p { margin-top: 14px; font-size: .98rem; line-height: 1.62; color: var(--ink-soft); }

/* rack focus: ícone entra desfocado e "puxa foco" quando aparece */
.focus-on .svc__icon svg { transition: filter .9s var(--ease-out), opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.focus-on .svc:not(.is-focused) .svc__icon svg { filter: blur(5px); opacity: .45; transform: scale(1.12); }

/* ---------- 8. Produção — timeline de edição ---------- */
.edit { --lanes-w: 58px; --v-h: 74px; --a-h: 40px; --panel: color-mix(in srgb, var(--cream) 6%, var(--espresso)); }
.edit__chrome, .edit__ruler, .edit__body::before { background: var(--panel); }
.edit__chrome {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 18px; border: 1px solid var(--line-dark); border-bottom: 0; border-radius: 12px 12px 0 0;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-soft);
}
.edit__tc { color: var(--cream); font-variant-numeric: tabular-nums; }
.edit__ruler {
  position: relative; display: flex; justify-content: space-between;
  padding: 8px 6px 10px calc(var(--lanes-w) + 4px); border-inline: 1px solid var(--line-dark);
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; color: color-mix(in srgb, var(--cream) 50%, transparent);
  font-variant-numeric: tabular-nums;
}
.edit__ruler::after {
  content: ""; position: absolute; left: var(--lanes-w); right: 0; bottom: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--line-dark) 0 1px, transparent 1px 12px);
}
.edit__ruler span { width: 0; display: flex; white-space: nowrap; }
.edit__ruler span:last-child { justify-content: flex-end; }
.edit__body { position: relative; isolation: isolate; display: grid; grid-template-columns: var(--lanes-w) minmax(0, 1fr); }
.edit__body::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: calc(12px + var(--v-h) + 6px + var(--a-h) + 16px);
  border: 1px solid var(--line-dark); border-top: 0; border-radius: 0 0 12px 12px;
}
.edit__lanes {
  position: relative; display: grid; grid-template-rows: var(--v-h) var(--a-h); row-gap: 6px; padding-top: 12px;
  align-self: start; border-right: 1px solid var(--line-dark);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; color: var(--on-dark-soft);
}
.edit__lanes span { display: grid; place-items: center; }
.edit__clips { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 4px; padding: 12px 6px 0 4px; }
.clip { display: grid; grid-template-rows: var(--v-h) var(--a-h) auto; row-gap: 6px; }
/* z-index 1: a agulha corre POR BAIXO dos clipes (como num editor), senão o fio vermelho/creme
   cortava ao meio o nome da etapa, o título e as descrições */
.clip__v {
  position: relative; z-index: 1; display: flex; align-items: flex-end; padding: 10px 12px; border-radius: 5px; overflow: hidden;
  color: var(--espresso); font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--espresso) 30%, transparent), inset -3px 0 0 color-mix(in srgb, var(--espresso) 30%, transparent);
  transition: box-shadow .3s ease;
}
.clip__v::before { /* "miniaturas" do clipe */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 38px; opacity: .22;
  background: repeating-linear-gradient(90deg, transparent 0 34px, var(--espresso) 34px 35px);
}
.clip__v span { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip--blush .clip__v { background: var(--blush); }
.clip--rose .clip__v { background: var(--rose); }
.clip--sand .clip__v { background: var(--sand); }
.clip__a {
  border-radius: 5px; overflow: hidden; color: color-mix(in srgb, var(--rose) 70%, transparent);
  background: color-mix(in srgb, var(--cream) 5%, transparent); border: 1px solid var(--line-dark);
}
.clip__a svg { width: 100%; height: 100%; fill: currentColor; }
.clip__body { padding: 44px 18px 0 2px; }
.clip__body p { transition: opacity .35s ease; }
.clip__n { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; color: var(--rose); }
.clip__title { margin-top: 10px; font-family: var(--font-serif); font-weight: 500; font-size: 1.7rem; line-height: 1.1; color: var(--cream); }
.clip__body p { margin-top: 12px; font-size: .96rem; line-height: 1.6; color: var(--on-dark-soft); }
/* o esmaecido vale só para o parágrafo: sobre o número (rose) ele derrubava o contraste */
.edit-live .clip:not(.is-live) .clip__body p { opacity: .72; }
.clip.is-live .clip__v { box-shadow: inset 0 0 0 2px var(--cream); }

.edit__playhead {
  position: absolute; top: -26px; bottom: 0; left: calc(var(--lanes-w) + 4px); width: 0; z-index: 0;
  pointer-events: none; will-change: transform;
}
.edit__playhead::before {
  content: ""; position: absolute; left: -.75px; top: 8px; height: calc(18px + 12px + var(--v-h) + 6px + var(--a-h) + 16px); width: 1.5px; background: var(--cream);
}
.edit__playhead i {
  position: absolute; left: -7px; top: 0; width: 14px; height: 12px; background: var(--cream);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%);
}

/* ---------- 9. Estúdio ---------- */
.section--paper { border-top: 1px solid var(--line-soft); }
.locations { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); align-items: start; }
.loc--studio { grid-column: 1 / span 5; }
.loc--onsite { grid-column: 7 / span 6; margin-top: clamp(80px, 12vw, 180px); }
.loc__slug {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze-deep);
  padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line);
}
.loc__media { position: relative; overflow: hidden; border-radius: 4px; background: var(--sand); }
.loc__media img { width: 100%; height: 100%; object-fit: cover; }
.loc--studio .loc__media { aspect-ratio: 4 / 5; }
.loc--studio .loc__media img { object-position: 50% 62%; }
.loc--onsite .loc__media { aspect-ratio: 5 / 4; }
.loc--onsite .loc__media img { object-position: 64% 50%; }
.loc__title { margin-top: 26px; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 1.05; color: var(--espresso); }
.loc p:not(.loc__slug) { margin-top: 12px; color: var(--ink-soft); max-width: 46ch; }

/* ---------- 10. ADS ---------- */
.ads { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.ads__head { position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 22px; justify-items: start; }
.ads__head .script-line { margin-top: 18px; }
.ads__list { border-top: 1px solid var(--line); }
.ad { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 34px 0 36px; border-bottom: 1px solid var(--line); }
.ad__n { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .14em; color: var(--bronze-deep); padding-top: 10px; }
.ad__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.62rem, 2.35vw, 2.1rem); letter-spacing: -.005em; line-height: 1.1; color: var(--espresso); }
.ad p { margin-top: 10px; color: var(--ink); max-width: 52ch; }

/* ---------- 11. Por que + Contato ---------- */
/* "Ficha técnica": 2x2 numerado, com fio fino em cima de cada item e título grande em
   Cormorant — em vez da fileira de 4 ícones, que era a seção menos editorial da página.
   O subgrid alinha os parágrafos mesmo quando um título ocupa duas linhas. */
.reasons {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto auto auto);
  /* row-gap vale para TODAS as linhas do subgrid (inclusive entre fio, título e texto) —
     por isso o respiro entre as duas faixas vem de uma margem nos itens 3 e 4. */
  column-gap: clamp(40px, 6vw, 96px); row-gap: 0;
}
.reason { grid-row: span 3; display: grid; grid-template-rows: subgrid; align-content: start; }
.reason:nth-child(n+3) { margin-top: clamp(44px, 5vw, 76px); }
.reason__top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.reason__n { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .2em; color: var(--bronze-deep); }
.reason__icon { display: block; color: var(--bronze); }
.reason__icon svg { width: 26px; height: 26px; }
.reason__title {
  margin-top: 24px; align-self: start; font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1.08; letter-spacing: -.005em; color: var(--espresso);
}
.reason p { margin-top: 12px; color: var(--ink-soft); font-size: 1rem; max-width: 44ch; }

.final-frame {
  position: relative; display: grid; justify-items: center; text-align: center;
  max-width: 1040px; margin-inline: auto;
  /* as 4 cantoneiras precisam caber JUNTAS numa tela de 900 px de altura */
  padding: clamp(40px, 4.6vw, 72px) clamp(20px, 6vw, 96px);
}
.section--contact { padding-block: clamp(72px, 9vw, 128px); }
.slate--center { justify-self: center; }
.contact-title { margin-top: 22px; display: grid; justify-items: center; line-height: .95; }
.contact-title__serif { font-family: var(--font-serif); font-weight: 500; font-size: clamp(3.6rem, 9vw, 7.4rem); letter-spacing: -.02em; color: var(--espresso); }
.contact-title__script { font-family: var(--font-script); font-weight: 400; font-size: clamp(3rem, 7.6vw, 6.2rem); color: var(--bronze-deep); margin-top: -.12em; line-height: 1.2; }
.contact-lead { margin-top: 22px; max-width: 54ch; color: var(--ink-soft); font-size: clamp(1.05rem, 1.3vw, 1.18rem); }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
.contact-social { margin-top: 26px; text-align: center; }
.contact-social a {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 14px;
  font-family: var(--font-sans); font-size: .92rem; letter-spacing: .04em; color: var(--bronze-deep);
  text-decoration: none; border-radius: 999px; transition: color .25s ease, background .25s ease;
}
.contact-social a:hover { color: var(--espresso); background: color-mix(in srgb, var(--blush) 40%, transparent); }
.contact-social .btn__icon { width: 19px; height: 19px; }
.script-line--center { margin-top: 30px; }

/* ---------- 12. Rodapé ---------- */
.site-footer { background: var(--espresso); color: var(--on-dark-soft); padding-block: 72px calc(28px + env(safe-area-inset-bottom)); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 4fr); gap: 40px; align-items: start; }
.footer-brand img { width: 108px; }
.footer-tagline { margin-top: 20px; font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--rose); }
.footer-nav ul { display: grid; gap: 2px; }
.footer-nav a, .footer-contact a { color: var(--cream); text-decoration: none; display: inline-flex; min-height: 40px; align-items: center; }
.footer-nav a { font-family: var(--font-serif); font-size: 1.3rem; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--blush); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.footer-contact { display: grid; gap: 14px; }
.footer-contact a { flex-direction: column; align-items: flex-start; gap: 4px; }
.footer-contact__k { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rose); }
.footer-base { margin-top: 56px; }
.footer-base p { padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: .875rem; }

/* ---------- 13. Responsivo ---------- */
@media (max-width: 1180px) {
  .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reel__n { display: none; }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .site-nav, .site-header .pill { display: none; }
  .menu-toggle { display: inline-flex; }
  .brand__mark { width: 34px; }
  .brand__boni { font-size: 1.12rem; }

  .section-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .section-title { font-size: clamp(2.35rem, 10vw, 3.2rem); }

  /* voo no celular: véu creme mais alto/denso atrás da copy (cenas com muitos objetos) */
  .sw-copylayer::before {
    height: 74%;
    background: linear-gradient(0deg, var(--sw-bg) 0%, color-mix(in srgb, var(--sw-bg) 94%, transparent) 30%, color-mix(in srgb, var(--sw-bg) 80%, transparent) 58%, transparent 100%);
  }
  /* voo no celular: copy longe dos pontinhos de rota do engine */
  .sw-copy {
    left: max(var(--gutter), env(safe-area-inset-left)); right: calc(48px + env(safe-area-inset-right)); width: auto;
  }
  .sw-copy__title { font-size: clamp(2rem, 8.6vw, 2.7rem); }
  .sw-copy__body { font-size: 1rem; }
  .sw-copy__eyebrow, .sw-copy__num { color: var(--espresso); }   /* 11,8px pede contraste cheio */
  .sw-copy__tags { margin-top: 18px; }
  .sw-copy__tags li { font-size: .7rem; padding: 6px 11px; }
  .sw-hint { bottom: calc(14px + env(safe-area-inset-bottom)); gap: 6px; font-size: .66rem; }
  .sw-hint i { width: 18px; height: 28px; }
  .sw-route { right: max(6px, env(safe-area-inset-right)); }
  /* pontinhos do engine: eram 1,4:1 sobre a cena e a cor do ativo tinha sido sobrescrita */
  .sw-route__dot i {
    background: var(--bronze-deep); box-shadow: 0 0 0 2px color-mix(in srgb, var(--paper) 75%, transparent);
  }
  .sw-route__dot.is-active i {
    background: var(--espresso);
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px color-mix(in srgb, var(--bronze-deep) 40%, transparent);
  }

  .hud {
    inset: calc(var(--header-h) + env(safe-area-inset-top) + 4px) max(14px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    font-size: 10px; letter-spacing: .12em;
  }
  .hud__corner { width: 20px; height: 20px; }
  .hud__tl { top: 6px; left: 22px; padding: 5px 7px; }
  .hud__bl { display: flex; top: 6px; bottom: auto; left: auto; right: 22px; padding: 5px 7px; }
  .hud__tr, .hud__focus, .hud__scene-wrap { display: none; }
  .reel { display: none; }
  /* MENU é a única navegação no celular: plaquinha clara sobre as cenas escuras (era 2,8:1) */
  .js .site-header.is-flight .menu-toggle {
    background: color-mix(in srgb, var(--paper) 80%, transparent); border-radius: 999px; padding-inline: 12px;
  }
  /* alvos de toque de 44 px e pontinhos de rota com área de dedo maior */
  .footer-nav a { min-height: 44px; }
  .footer-contact__k { font-size: .7rem; }

  .sheet { grid-template-columns: minmax(0, 1fr); }
  .svc { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; padding: 38px 20px 30px; }
  .svc__top { grid-row: 1 / span 2; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; margin-top: 2px; }
  .svc__icon { width: 52px; height: 52px; }
  .svc__icon svg { width: 22px; height: 22px; }
  .svc__n { align-self: auto; padding-left: 4px; }
  .svc__title { margin-top: 0; font-size: 1.55rem; }
  .svc p { margin-top: 8px; }

  .edit { --lanes-w: 0px; }
  .edit__chrome { border-radius: 10px; border-bottom: 1px solid var(--line-dark); margin-bottom: 28px; }
  .edit__ruler, .edit__lanes, .clip__a, .edit__body::before { display: none; }
  .edit__body { grid-template-columns: minmax(0, 1fr); }
  .edit__clips { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 0 0 0 0; }
  .clip { grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto; column-gap: 20px; }
  .clip__v { grid-row: 1; padding: 0; min-height: 100%; }
  .clip__v::before, .clip__v span { display: none; }
  .clip__body { padding: 6px 0 22px; }
  .clip__title { margin-top: 4px; font-size: 1.55rem; }
  .edit__playhead { top: 0; left: -8px; right: auto; bottom: auto; width: 38px; height: 0; }
  .edit__playhead::before { left: 0; top: -.75px; width: 38px; height: 1.5px; }
  .edit__playhead i { left: -2px; top: -6px; width: 10px; height: 12px; clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%); }

  .locations { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .loc--studio, .loc--onsite { grid-column: auto; margin-top: 0; }
  .loc--studio .loc__media { aspect-ratio: 4 / 4.6; }

  .ads { grid-template-columns: minmax(0, 1fr); }
  .ads__head { position: static; }
  .ad { grid-template-columns: 44px minmax(0, 1fr); padding: 26px 0 28px; }

  .reasons { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 34px; }
  .reason, .reason:nth-child(n+3) { display: block; grid-row: auto; margin-top: 0; }
  .reason__title { margin-top: 18px; font-size: 1.72rem; }

  .final-frame { padding: 64px 18px; }
  .frame-corners--lg i { width: 28px; height: 28px; }
  .contact-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; }
  .btn--lg { padding: 16px 20px; font-size: .98rem; }

  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* toque: área de dedo maior nos pontinhos de cena, mantendo o passo entre eles */
@media (hover: none) and (pointer: coarse) {
  .sw-route { gap: 8px; }
  .sw-route__dot { width: 36px; height: 36px; }
}

/* Celular DEITADO (e qualquer tela baixa): a copy do voo é ancorada embaixo e colidia com o
   header e com as plaquinhas do HUD; aqui ela vira uma coluna à esquerda, sem enfeites. */
@media (max-width: 960px) and (max-height: 520px) {
  .sw-copylayer::before {
    inset: 0 auto 0 0; width: min(74vw, 660px); height: auto;
    background: linear-gradient(90deg, var(--sw-bg) 0%, color-mix(in srgb, var(--sw-bg) 86%, transparent) 52%, transparent 100%);
  }
  .sw-copy {
    top: calc(var(--header-h) + env(safe-area-inset-top) + 8px); bottom: auto;
    left: max(var(--gutter), env(safe-area-inset-left)); right: auto;
    width: min(60vw, 520px); max-height: calc(100dvh - var(--header-h) - 28px); overflow-y: auto;
  }
  .world-flight[data-scene="1"] .sw-copylayer::before {
    width: min(82vw, 720px);
    background: linear-gradient(90deg, var(--sw-bg) 0 56%, color-mix(in srgb, var(--sw-bg) 82%, transparent) 76%, transparent 100%);
  }
  .sw-copy__num, .sw-copy__tags, .sw-hint, .sw-route, .hud__tl, .hud__bl { display: none; }
  .sw-copy__eyebrow { margin-top: 0; }
  .sw-copy__title { font-size: clamp(1.5rem, 4.4vw, 2rem); margin-top: 8px; }
  .sw-copy__body { margin-top: 8px; font-size: .94rem; line-height: 1.5; }
  .sw-copy__cta { margin-top: 14px; }
  .sw-btn { min-height: 44px; padding: 11px 20px; font-size: .88rem; }
  .hud { inset: calc(var(--header-h) + env(safe-area-inset-top) + 4px) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); }
}

@media (max-width: 380px) {
  .btn--lg { font-size: .92rem; gap: 10px; }
  .contact-title__serif { font-size: 3.3rem; }
  .contact-title__script { font-size: 2.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .reveal-on [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
  .has-intro .intro { display: none; }
  .clip__body, .svc, .btn, .site-header, .hud, .reel { transition: none; }
}

/* ---------- 14. Página 404 ---------- */
.notfound { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px var(--gutter); background: var(--paper); }
.notfound__frame { width: min(100%, 860px); }
.notfound__brand { display: inline-block; margin-bottom: 28px; }
.notfound__brand img { width: 64px; }
.notfound__title { margin-top: 26px; font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.6rem, 6.4vw, 4.8rem); line-height: 1; letter-spacing: -.015em; color: var(--espresso); text-wrap: balance; }

/* ===========================================================================
   13. GRÃO DE FILME
   Camada fixa de ruído suave (160px, ~21KB) por cima de tudo, em multiply a 3,5%:
   as seções claras deixam de parecer "página web chapada" e passam a ter a mesma
   textura dos stills do voo. Desktop com ponteiro fino apenas — no celular custa
   composição a cada frame do canvas e quase não se vê.
   =========================================================================== */
.grain { display: none; }
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .grain {
    display: block; position: fixed; inset: 0; z-index: 120; pointer-events: none;
    background-image: url("../img/grain.png?v=20260917e");
    background-size: 160px 160px;
    opacity: .035; mix-blend-mode: multiply;
  }
}
@media (prefers-reduced-motion: reduce) { .grain { display: none; } }