/* ============================================================
   KINO FILMS — sistema visual
   Preto de sala escura + laranja da logo (#FE5514) + papel de
   copião. Display Archivo em largura expandida (anamórfico),
   corpo Instrument Sans, etiquetas técnicas em IBM Plex Mono.
   ============================================================ */

:root{
  /* cor */
  --ink:        #08080A;
  --ink-2:      #0D0D11;
  --ink-3:      #14141A;
  --flare:      #FE5514;
  --flare-hi:   #FF7A3D;
  --flare-dim:  #B93B08;
  --bone:       #F4F1EC;
  --muted:      #8C8C97;
  --paper:      #EDE7DC;
  --paper-ink:  #111114;
  --paper-mut:  #5A574F;
  --line:       rgba(244,241,236,.11);
  --line-2:     rgba(244,241,236,.20);

  /* tipografia */
  --display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* medidas */
  --rail: 0px;
  --pad: clamp(20px, 5vw, 56px);
  --gut: clamp(64px, 11vh, 132px);
  --max: 1240px;
  --notch: 30px;

  /* motion */
  --ease: cubic-bezier(.22,.68,.28,1);
  --e-out: cubic-bezier(.16,1,.3,1);      /* expo out: sai rápido, assenta devagar */
  --e-soft: cubic-bezier(.33,1,.68,1);
  --t-fast: .55s;
  --t-base: .85s;
  --t-slow: 1.15s;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  padding-left:var(--rail);
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--flare); color:#fff; }

:focus-visible{
  outline:2px solid var(--flare-hi);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:fixed; top:-100px; left:12px; z-index:400;
  background:var(--flare); color:#0A0A0C; padding:10px 16px;
  font-family:var(--mono); font-size:12px; text-decoration:none;
}
.skip:focus{ top:12px; }

.wrap{
  width:100%; max-width:var(--max);
  margin-inline:auto; padding-inline:var(--pad);
}

/* ---------- tipografia ---------- */

.display{
  font-family:var(--display);
  font-variation-settings:'wdth' 116,'wght' 800;
  text-transform:uppercase;
  letter-spacing:-.025em;
  line-height:.94;
  margin:0;
  text-wrap:balance;
}

.h2{ font-size:clamp(2rem, 5.4vw, 3.6rem); }

.hero__title{
  font-size:clamp(2.3rem, 7.4vw, 4rem);
  font-variation-settings:'wdth' 106,'wght' 800;
  line-height:.9;
  margin:.2em 0 .55em;
}
.hero__title span{ display:block; }
.hero__title em{ font-style:normal; color:var(--flare); }
.hero__title b{ color:var(--flare); font-weight:inherit; }

.eyebrow{
  font-family:var(--mono);
  font-size:11.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
  margin:0 0 20px;
  display:flex; align-items:flex-start; gap:10px;
}
.eyebrow .rec{ margin-top:.45em; }

.lead{
  font-size:clamp(1.02rem, 1.6vw, 1.19rem);
  color:#C9C6C0;
  max-width:44ch;
  margin:0 0 34px;
}

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

/* ponto vermelho de gravação */
.rec{
  width:8px; height:8px; border-radius:50%;
  background:var(--flare); display:inline-block; flex:none;
  animation:blink 2.2s steps(1,end) infinite;
}
@keyframes blink{ 0%,55%{opacity:1} 56%,100%{opacity:.18} }

/* triângulo de play, o glifo da marca */
.play{
  width:0; height:0; display:inline-block; flex:none;
  border-left:9px solid var(--flare);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}

/* ============================================================
   TRILHA DE FILME — a assinatura da página
   ============================================================ */

.reel-rail{
  position:fixed; inset:0 auto 0 0; width:var(--rail);
  z-index:70; display:none;
  border-right:1px solid var(--line);
  background:var(--ink);
}
.reel-rail__sprockets{
  position:absolute; inset:0; left:50%; width:22px;
  transform:translateX(-50%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='38'%3E%3Crect x='4' y='7' width='14' height='24' rx='4' fill='%23F4F1EC' fill-opacity='0.13'/%3E%3C/svg%3E");
  background-repeat:repeat-y;
  background-position:0 var(--perf, 0px);
}
.reel-rail__tc,
.reel-rail__label{
  position:absolute; left:50%;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  writing-mode:vertical-rl;
  background:var(--ink); padding:10px 0;
}
.reel-rail__tc{
  top:88px; transform:translateX(-50%);
  color:var(--flare);
}
.reel-rail__label{
  bottom:34px; transform:translateX(-50%) rotate(180deg);
  color:var(--muted); text-transform:uppercase;
}
.reel-rail.on-paper{ background:var(--paper); border-right-color:rgba(17,17,20,.16); }
.reel-rail.on-paper .reel-rail__sprockets{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='38'%3E%3Crect x='4' y='7' width='14' height='24' rx='4' fill='%23111114' fill-opacity='0.14'/%3E%3C/svg%3E");
}
.reel-rail.on-paper .reel-rail__tc,
.reel-rail.on-paper .reel-rail__label{ background:var(--paper); }
.reel-rail.on-paper .reel-rail__label{ color:var(--paper-mut); }

/* barra de progresso (mobile / tablet) */
.scrub{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  background:transparent; pointer-events:none;
}
.scrub span{
  display:block; height:100%; width:0%;
  background:var(--flare);
}

/* ============================================================
   NAV
   ============================================================ */

.nav{
  position:fixed; top:0; left:var(--rail); right:0; z-index:100;
  transition:background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,8,10,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav.on-paper.is-stuck{
  background:rgba(237,231,220,.86);
  border-bottom-color:rgba(17,17,20,.14);
}
.nav__inner{
  max-width:var(--max); margin-inline:auto;
  padding:16px var(--pad);
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
}
.nav__logo{ display:block; flex:none; }
.nav__logo img{ width:118px; height:auto; }
.nav.on-paper .nav__logo img{ filter:invert(1) hue-rotate(180deg); }

.nav__links{
  display:none; gap:clamp(16px,2.4vw,30px);
  font-size:14.5px; font-weight:500;
}
.nav__links a{
  text-decoration:none; color:#BDBAB4;
  padding:6px 0; position:relative;
  transition:color .22s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--flare); transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-active{ color:var(--bone); }
.nav__links a.is-active::after{ transform:scaleX(1); }
.nav.on-paper .nav__links a{ color:var(--paper-mut); }
.nav.on-paper .nav__links a:hover,
.nav.on-paper .nav__links a.is-active{ color:var(--paper-ink); }

.nav .nav__cta{ display:none; margin-left:auto; }

.burger{
  margin-left:auto; width:46px; height:46px;
  display:grid; place-content:center; gap:6px;
  background:none; border:1px solid var(--line-2); border-radius:2px;
  cursor:pointer;
}
.burger span{ display:block; width:20px; height:1.5px; background:var(--bone); transition:transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }
.nav.on-paper .burger span{ background:var(--paper-ink); }
.nav.on-paper .burger{ border-color:rgba(17,17,20,.22); }

.menu{
  position:fixed; inset:0; z-index:99;
  background:var(--ink);
  padding:110px var(--pad) 40px;
  display:flex; flex-direction:column; justify-content:center; gap:14px;
}
.menu[hidden]{ display:none; }
.menu nav{ display:flex; flex-direction:column; gap:2px; margin-bottom:26px; }
.menu nav a{
  display:flex; align-items:baseline; gap:16px;
  text-decoration:none;
  font-family:var(--display);
  font-variation-settings:'wdth' 112,'wght' 700;
  text-transform:uppercase; font-size:clamp(2rem,9vw,2.9rem);
  letter-spacing:-.02em;
  padding:8px 0; border-bottom:1px solid var(--line);
}
.menu nav a i{
  font-family:var(--mono); font-style:normal;
  font-size:11px; color:var(--flare); letter-spacing:.1em;
}

/* ============================================================
   BOTÕES
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 22px; min-height:46px;
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  border:1px solid transparent; border-radius:2px;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn .ico{ width:17px; height:17px; fill:currentColor; flex:none; }

/* texto preto sobre o laranja: 6.6:1 de contraste, e é o par que a
   própria logo já usa. Branco sobre esse laranja só dá 3.2:1. */
.btn--wa{ background:var(--flare); color:#0A0A0C; }
.btn--wa:hover{ background:var(--flare-hi); }

.btn--ghost{ border-color:var(--line-2); color:var(--bone); background:transparent; }
.btn--ghost:hover{ border-color:var(--flare); color:var(--flare); }

.btn--lg{ padding:16px 28px; min-height:54px; font-size:13px; }
.btn--xl{ padding:19px 34px; min-height:60px; font-size:13.5px; min-width:min(260px, 100%); }
.btn--block{ width:100%; }

/* ============================================================
   MOLDURAS DE IMAGEM + estado sem arquivo
   ============================================================ */

.frame{
  position:relative; margin:0; overflow:hidden;
  background:var(--ink-2);
}
.frame img{ width:100%; height:100%; object-fit:cover; }

.frame--cut{
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--notch)),
                    calc(100% - var(--notch)) 100%, 0 100%);
}

.frame__ph{
  display:none;
  position:absolute; inset:0;
  place-content:center; text-align:center;
  padding:20px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:rgba(244,241,236,.42);
  background:
    repeating-linear-gradient(135deg, rgba(254,85,20,.05) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, var(--ink-3), var(--ink-2));
}
.frame__ph::before{
  content:'IMAGEM PENDENTE'; display:block;
  color:var(--flare); letter-spacing:.2em; margin-bottom:8px;
}
.frame.no-img img{ display:none; }
.frame.no-img .frame__ph{ display:grid; }

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:min(920px, 100svh);
  padding-top:clamp(108px, 15vh, 158px);
  overflow:hidden;
  isolation:isolate;
}

/* ---- a fotografia ocupa a dobra inteira ---- */
.hero__shot{
  position:absolute; inset:0; margin:0; z-index:0; overflow:hidden;
}
/* A imagem é mais larga que a dobra de propósito: o cinegrafista mora no
   meio da foto, e alargando pra 132% ancorado à esquerda ele cai a dois
   terços da tela, longe da headline. O que sobra à direita é breu.
   A sobra de 6% em cima e embaixo é pro parallax deslizar sem abrir fresta. */
.hero__shot img{
  position:absolute; left:0; top:-6%;
  width:132%; height:112%;
  object-fit:cover; object-position:50% 38%;
  /* a contraluz do set vem azulada. Tiro quase toda a cor pra que a
     única cor da dobra seja a laranja da marca, aplicada logo abaixo */
  filter:grayscale(.9) contrast(1.18) brightness(.84);
}

/* ---- correção de cor: a luz do set vira a luz da marca ---- */
.hero__grade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(50% 46% at 55% 33%, rgba(254,85,20,.85), rgba(254,85,20,.22) 46%, transparent 72%),
    radial-gradient(85% 65% at 80% 70%, rgba(185,59,8,.28), transparent 68%);
  mix-blend-mode:overlay;
}

/* ---- escurecimento à esquerda, pra letra ler sobre a foto ---- */
.hero__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(8,8,10,.95) 0%, rgba(8,8,10,.86) 24%,
                            rgba(8,8,10,.48) 46%, rgba(8,8,10,.12) 64%, transparent 80%),
    linear-gradient(180deg, rgba(8,8,10,.78) 0%, rgba(8,8,10,.10) 20%,
                            transparent 46%, rgba(8,8,10,.86) 86%, var(--ink) 100%);
}

/* ---- o visor da câmera agora enquadra a dobra toda ---- */
.hero__hud{
  position:absolute;
  inset:clamp(86px,11vh,124px) clamp(14px,2.2vw,28px) clamp(56px,7vh,76px);
  z-index:3; pointer-events:none;
}
.hero__mark{
  position:absolute; width:clamp(20px,2.4vw,30px); aspect-ratio:1;
  border:1.5px solid rgba(244,241,236,.40);
}
.hero__mark--tl{ top:0; left:0; border-right:0; border-bottom:0; }
.hero__mark--tr{ top:0; right:0; border-left:0; border-bottom:0; }
.hero__mark--bl{ bottom:0; left:0; border-right:0; border-top:0; }
.hero__mark--br{ bottom:0; right:0; border-left:0; border-top:0; }
.hero__meta{
  position:absolute;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:rgba(244,241,236,.55);
  display:flex; align-items:center; gap:7px; white-space:nowrap;
}
.hero__meta--tl{ top:3px; left:clamp(30px,3.4vw,46px); }
.hero__meta--tr{ top:3px; right:clamp(30px,3.4vw,46px); }
.hero__meta--bl{ bottom:3px; left:clamp(30px,3.4vw,46px); }
.hero__meta--br{ bottom:3px; right:clamp(30px,3.4vw,46px); color:var(--flare); }
.hero__meta .rec{ width:7px; height:7px; }

.hero__inner{
  position:relative; z-index:4;
  padding-bottom:clamp(58px,10vh,112px);
}
.hero__copy{ max-width:min(620px, 94%); }
/* sobre fotografia o cinza da etiqueta não lê: clareia só aqui */
.hero .eyebrow{ color:#C8C5BF; }
.hero .lead{ color:#D6D3CD; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* fita de palavras */
.ticker{
  position:relative; z-index:2;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:9px 0;
  background:var(--ink-2);
}
.ticker__track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.ticker__track span{
  display:flex; align-items:center;
  font-family:var(--display);
  font-variation-settings:'wdth' 104,'wght' 600;
  text-transform:uppercase; font-size:clamp(.72rem,1.15vw,.88rem);
  letter-spacing:.06em; white-space:nowrap;
  color:rgba(244,241,236,.32);
}
.ticker__track i{
  width:5px; height:5px; margin:0 18px; flex:none;
  background:var(--flare); clip-path:polygon(0 0,100% 50%,0 100%);
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   BLOCOS GERAIS
   ============================================================ */

.manifesto,
.servicos,
.trabalhos,
.processo,
.diferencial,
.depoimentos,
.faq{
  padding:var(--gut) 0;
  position:relative;
}

.grid-2{
  display:grid; gap:clamp(32px,5vw,68px);
  align-items:center;
}
.grid-2--narrow{ align-items:start; }

.head{ margin-bottom:clamp(38px,5vw,62px); max-width:720px; }
.head__note{ color:var(--muted); margin-top:18px; max-width:46ch; }
.head--row{
  display:flex; flex-direction:column; gap:24px;
  align-items:flex-start; max-width:none;
}

/* manifesto */
.manifesto__copy .h2{ margin-bottom:clamp(22px,2.6vw,34px); }
.manifesto__copy p{ color:#B9B6B0; max-width:50ch; }

.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:22px; margin:40px 0 0; padding-top:26px;
  border-top:1px solid var(--line);
}
.stats dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.stats dd{
  margin:0;
  font-family:var(--display);
  font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(2rem,4.4vw,2.7rem); line-height:1;
  color:var(--bone);
}
/* 4:3 e não vertical: a foto é horizontal, e nesse formato ela perde só
   um pedaço da folhagem da esquerda em vez de metade da composição.
   A altura também casa melhor com a coluna de texto ao lado. */
.manifesto .frame{ aspect-ratio:4/3; }
.manifesto .frame img{
  object-position:62% center;
  /* a foto é clara e a seção é a mais escura da página: sem escurecer,
     ela vira um bloco branco e rouba a leitura do título */
  filter:grayscale(.62) contrast(1.14) brightness(.58) saturate(.9);
}
.manifesto .frame::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(62% 55% at 70% 46%, rgba(254,85,20,.34), transparent 66%),
    linear-gradient(90deg, rgba(8,8,10,.78) 0%, rgba(8,8,10,.30) 34%, transparent 58%),
    linear-gradient(180deg, rgba(8,8,10,.52) 0%, transparent 30%),
    linear-gradient(0deg, rgba(8,8,10,.66) 0%, transparent 40%);
}
.manifesto .frame.no-img::before{ display:none; }

/* ============================================================
   SERVIÇOS
   ============================================================ */

.servicos{ background:var(--ink-2); border-block:1px solid var(--line); }

.cards{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}

.card{
  position:relative; background:var(--ink);
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--notch)),
                    calc(100% - var(--notch)) 100%, 0 100%);
  transition:border-color .3s var(--ease), transform .35s var(--ease);
}
.card:hover{ transform:translateY(-5px); border-color:rgba(254,85,20,.4); }
.card .frame{ aspect-ratio:9/11; }
.card .frame img{
  transition:transform .7s var(--ease), filter .5s var(--ease);
  filter:grayscale(.52) contrast(1.10) brightness(.80) saturate(.92);
}
.card:hover .frame img{
  transform:scale(1.05);
  filter:grayscale(.04) contrast(1.08) brightness(.98) saturate(1);
}

/* Correção de cor comum aos quatro: um sopro de laranja da marca em
   cima e o pé da foto fundindo no corpo escuro do card. No hover ela
   recua e a fotografia aparece como é. */
.card .frame::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(78% 55% at 50% 30%, rgba(254,85,20,.26), transparent 72%),
    linear-gradient(0deg, rgba(8,8,10,.88) 0%, rgba(8,8,10,.22) 34%, transparent 58%);
  transition:opacity .5s var(--ease);
}
.card:hover .frame::before{ opacity:.5; }
.card .frame.no-img::before{ display:none; }

/* Enquadramento: as fotos são horizontais e o card é vertical, então
   cada uma tem o seu ponto de interesse declarado. */
[data-card="empresas"]   .frame img{ object-position:56% center; }
[data-card="espacos"]    .frame img{ object-position:center center; }
[data-card="eventos"]    .frame img{ object-position:38% center; }
[data-card="casamentos"] .frame img{ object-position:70% center; }

/* O evento vem com luz de palco azul e verde, que é o oposto da marca.
   Ele leva uma dose maior de dessaturação e de laranja por cima. */
[data-card="eventos"] .frame img{
  filter:grayscale(.72) contrast(1.12) brightness(.82) saturate(.85);
}
[data-card="eventos"]:hover .frame img{
  filter:grayscale(.34) contrast(1.12) brightness(.92) saturate(.95);
}
[data-card="eventos"] .frame::before{
  background:
    radial-gradient(80% 58% at 50% 34%, rgba(254,85,20,.40), transparent 72%),
    linear-gradient(0deg, rgba(8,8,10,.88) 0%, rgba(8,8,10,.24) 34%, transparent 58%);
}

/* O espaço já nasce na cor da marca: quase não precisa de correção. */
[data-card="espacos"] .frame img{
  filter:grayscale(.30) contrast(1.06) brightness(.84) saturate(1);
}

.card__play{
  position:absolute; right:6px; bottom:5px; z-index:3;
  width:0; height:0;
  border-left:13px solid var(--flare);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  transition:transform .3s var(--ease);
}
.card:hover .card__play{ transform:translateX(4px); }

.card__body{ padding:24px 22px 40px; flex:1; display:flex; flex-direction:column; }
.card__kicker{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--flare); margin:0 0 10px;
}
.card__body h3{
  font-family:var(--display);
  font-variation-settings:'wdth' 112,'wght' 700;
  text-transform:uppercase; letter-spacing:-.015em;
  font-size:1.28rem; line-height:1.05; margin:0 0 12px;
}
.card__body p{ font-size:15px; color:#A9A6A1; margin:0 0 18px; }
.card__link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:auto; align-self:flex-start;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--bone);
  border-bottom:1px solid var(--line-2); padding-bottom:5px;
  transition:color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);
}
.card__link:hover{ color:var(--flare); border-color:var(--flare); gap:13px; }

/* ============================================================
   TRABALHOS — tira de filme
   ============================================================ */

.strip{ margin-top:8px; }
.strip__perfs{
  height:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='20'%3E%3Crect x='7' y='4' width='24' height='12' rx='3' fill='%23F4F1EC' fill-opacity='0.13'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  border-block:1px solid var(--line);
}
.strip__track{
  display:flex; gap:16px; padding:16px var(--pad);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:thin; scrollbar-color:var(--flare) transparent;
}
.strip__track::-webkit-scrollbar{ height:5px; }
.strip__track::-webkit-scrollbar-thumb{ background:var(--flare-dim); }

.shot{ flex:0 0 min(560px, 84vw); scroll-snap-align:center; }
.shot__btn{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:pointer; position:relative;
}
.shot .frame{ aspect-ratio:16/9; border:1px solid var(--line); }
.shot .frame img{ transition:transform .8s var(--ease), filter .5s var(--ease); filter:contrast(1.05) saturate(.9); }
.shot__btn:hover .frame img{ transform:scale(1.04); }
.shot__play{
  position:absolute; inset:0; margin:auto;
  width:66px; height:66px; border-radius:50%;
  background:rgba(8,8,10,.55); border:1px solid rgba(244,241,236,.4);
  backdrop-filter:blur(4px);
  display:grid; place-content:center;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.shot__play::after{
  content:''; width:0; height:0; margin-left:4px;
  border-left:17px solid var(--bone);
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  transition:border-left-color .3s var(--ease);
}
.shot__btn:hover .shot__play{ background:var(--flare); border-color:var(--flare); transform:scale(1.06); }
.shot__btn:hover .shot__play::after{ border-left-color:#fff; }

.shot__meta{
  display:flex; flex-direction:column; gap:3px; margin:16px 2px 0;
}
.shot__meta b{
  font-family:var(--display);
  font-variation-settings:'wdth' 110,'wght' 700;
  text-transform:uppercase; letter-spacing:-.01em; font-size:1.02rem;
}
.shot__meta span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}

/* ============================================================
   PROCESSO — folha de copião
   ============================================================ */

.processo{
  background:var(--paper);
  color:var(--paper-ink);
}
.processo .eyebrow{ color:var(--paper-mut); }
.processo .display{ color:var(--paper-ink); }

.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0;
  border-top:1px solid rgba(17,17,20,.16);
}
.step{
  display:grid; gap:6px 26px;
  padding:26px 0;
  border-bottom:1px solid rgba(17,17,20,.16);
}
.step__n{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2em;
  color:var(--flare-dim);
}
.step h3{
  font-family:var(--display);
  font-variation-settings:'wdth' 116,'wght' 800;
  text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.6vw,2.15rem); line-height:1; margin:0;
}
.step p{ color:var(--paper-mut); margin:0; max-width:52ch; font-size:16px; }

/* ============================================================
   DIFERENCIAL
   ============================================================ */

/* Essa foto já nasceu preto e laranja, que é a paleta da marca. Aqui a
   correção é quase nula: só um pouco de contraste e o pé fundindo no
   fundo da seção. Forçar mais grade só sujaria o que já está certo. */
.diferencial .frame{ aspect-ratio:5/6; }
.diferencial .frame img{
  object-position:center 48%;
  filter:contrast(1.08) brightness(1.02) saturate(1.06);
}
.diferencial .frame::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(0deg, rgba(8,8,10,.62) 0%, transparent 34%);
}
.diferencial .frame.no-img::before{ display:none; }

.checks{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:2px; }
.checks li{
  position:relative; padding:18px 0 18px 34px;
  border-bottom:1px solid var(--line);
  color:#A9A6A1; font-size:15.5px;
}
.checks li b{ color:var(--bone); font-weight:600; }
.checks li::before{
  content:''; position:absolute; left:2px; top:25px;
  width:0; height:0;
  border-left:9px solid var(--flare);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}

/* ============================================================
   DEPOIMENTOS
   ============================================================ */

.depoimentos{ background:var(--ink-2); border-block:1px solid var(--line); }

.quote{ margin:0; }
.quote p{
  font-family:var(--display);
  font-variation-settings:'wdth' 104,'wght' 500;
  text-transform:none; letter-spacing:-.015em;
  font-size:clamp(1.35rem,3.2vw,2.15rem); line-height:1.16;
  color:var(--bone); margin:0 0 22px; text-wrap:balance;
}
.quote footer{ display:flex; flex-direction:column; gap:2px; }
.quote footer b{ font-size:14.5px; font-weight:600; }
.quote footer span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.quote--sm p{
  font-family:var(--body); font-variation-settings:normal;
  font-size:1.02rem; line-height:1.55; font-weight:400;
  color:#B9B6B0; letter-spacing:0;
}

.quotes{
  display:grid; gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:52px; padding-top:44px;
  border-top:1px solid var(--line);
}

/* ============================================================
   FAQ
   ============================================================ */

.faq__note{ color:var(--muted); max-width:38ch; }

.accordion{ display:grid; border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  cursor:pointer; list-style:none;
  padding:22px 44px 22px 0; position:relative;
  font-size:1.05rem; font-weight:600;
  transition:color .25s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--flare); }
.qa summary::after{
  content:''; position:absolute; right:6px; top:29px;
  width:13px; height:13px;
  background:
    linear-gradient(var(--flare),var(--flare)) center/100% 1.5px no-repeat,
    linear-gradient(var(--flare),var(--flare)) center/1.5px 100% no-repeat;
  transition:transform .3s var(--ease);
}
.qa[open] summary::after{ transform:rotate(135deg); }
.qa__body{ padding:0 30px 24px 0; }
.qa__body p{ color:#A9A6A1; font-size:15.5px; margin:0; }

/* ============================================================
   CTA FINAL
   ============================================================ */

.cta{
  position:relative; overflow:hidden;
  padding:calc(var(--gut) * 1.15) 0;
  text-align:center;
  border-top:1px solid var(--line);
}
.cta__glow{
  position:absolute; left:50%; bottom:-45%;
  width:min(1000px,120vw); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(254,85,20,.24), rgba(254,85,20,.06) 42%, transparent 66%);
  filter:blur(30px); pointer-events:none;
}
.cta__inner{ position:relative; z-index:2; }
.cta__mark{ width:52px; height:auto; margin:0 auto 28px; }
.cta__title{
  font-size:clamp(2.1rem,6.6vw,4.4rem);
  margin:0 auto .6em; max-width:16ch;
}
.cta p{ color:#B9B6B0; max-width:46ch; margin:0 auto 34px; }

/* ============================================================
   RODAPÉ
   ============================================================ */

.foot{ border-top:1px solid var(--line); background:var(--ink-2); padding-top:clamp(48px,7vw,76px); }
.foot__grid{
  display:grid; gap:38px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding-bottom:48px;
}
.foot__brand img{ width:132px; height:auto; margin-bottom:20px; }
.foot__brand p{ color:var(--muted); font-size:14.5px; max-width:34ch; }
.foot__social{ display:flex; gap:10px; margin-top:20px; }
.foot__social a{
  width:42px; height:42px; display:grid; place-content:center;
  border:1px solid var(--line-2); border-radius:2px;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.foot__social svg{ width:18px; height:18px; fill:var(--bone); }
.foot__social a:hover{ background:var(--flare); border-color:var(--flare); }

.foot__col{ display:flex; flex-direction:column; gap:11px; }
.foot__col h4{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--flare); margin:0 0 6px; font-weight:500;
}
.foot__col a{ text-decoration:none; color:#A9A6A1; font-size:14.5px; transition:color .2s var(--ease); }
.foot__col a:hover{ color:var(--bone); }
.foot__addr{ color:var(--muted); font-size:13.5px; margin:6px 0 0; line-height:1.6; }

.foot__bar{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:space-between; align-items:center;
  padding:22px 0 92px; border-top:1px solid var(--line);
}
.foot__bar p{
  margin:0; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}
.foot__tc{ color:var(--flare) !important; }

/* ============================================================
   FLUTUANTE + LIGHTBOX + GRÃO
   ============================================================ */

.fab{
  position:fixed; right:16px; bottom:16px; z-index:110;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 18px; min-height:54px;
  background:var(--flare); color:#0A0A0C; text-decoration:none;
  border-radius:2px;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  transform:translateY(120%); opacity:0;
  transition:transform .45s var(--ease), opacity .45s var(--ease), background .25s;
}
.fab.is-in{ transform:translateY(0); opacity:1; }
.fab:hover{ background:var(--flare-hi); }
.fab svg{ width:20px; height:20px; fill:currentColor; flex:none; }
.fab span{ display:none; }

.lb{
  border:0; padding:0; width:min(1100px,92vw); background:transparent;
  color:var(--bone);
}
.lb::backdrop{ background:rgba(4,4,6,.9); backdrop-filter:blur(6px); }
.lb__stage{
  aspect-ratio:16/9; background:#000; border:1px solid var(--line);
  display:grid; place-content:center; text-align:center; padding:24px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  color:var(--muted);
}
.lb__stage iframe{ width:100%; height:100%; border:0; }
.lb__close{
  position:absolute; top:-46px; right:0;
  width:38px; height:38px; font-size:26px; line-height:1;
  background:none; border:1px solid var(--line-2); cursor:pointer;
}

.grain{
  position:fixed; inset:0; z-index:300; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ============================================================
   MOTION NO SCROLL
   Quatro entradas diferentes, uma pra cada tipo de conteúdo.
   Título entra em linha, imagem entra por corte de máscara,
   etiqueta entra assentando o espaçamento, o resto sobe.
   ============================================================ */

.reveal{ transition-delay:var(--d, 0ms); }

/* -- padrão: sobe e aparece -- */
.reveal{
  opacity:0; transform:translate3d(0,26px,0);
  transition-property:opacity, transform;
  transition-duration:var(--t-base);
  transition-timing-function:var(--e-out);
}
.reveal.is-in{ opacity:1; transform:none; }

/* -- título em linhas: cada linha sobe por trás de uma máscara -- */
.reveal[data-anim="lines"]{
  opacity:1; transform:none; transition:none;
}
[data-anim="lines"] .ln{
  display:block; overflow:hidden;
  padding-bottom:.16em; margin-bottom:-.16em;
}
[data-anim="lines"] .ln > i{
  display:block; font-style:normal;
  transform:translate3d(0,110%,0);
  transition:transform var(--t-slow) var(--e-out);
  transition-delay:calc(var(--d, 0ms) + var(--i, 0) * 95ms);
}
[data-anim="lines"].is-in .ln > i{ transform:none; }
[data-anim="lines"] .ln:nth-child(2){ --i:1; }
[data-anim="lines"] .ln:nth-child(3){ --i:2; }
[data-anim="lines"] .ln:nth-child(4){ --i:3; }

/* -- corte de máscara: o bloco é revelado de baixo pra cima -- */
.reveal[data-anim="wipe"]{
  opacity:1;
  transform:translate3d(0,14px,0);
  clip-path:inset(0 0 102% 0);
  transition-property:transform, clip-path;
  transition-duration:var(--t-slow);
}
.reveal[data-anim="wipe"].is-in{
  transform:none;
  clip-path:inset(0 0 -8% 0);
}

/* -- imagem: uma cortina sobe e descobre a foto, como obturador.
      É cortina e não clip-path porque a moldura já usa clip-path
      pro corte do canto, e os dois não podem brigar pela mesma
      propriedade. -- */
.reveal[data-anim="frame"]{
  opacity:1; transform:none; transition:none;
}
.reveal[data-anim="frame"]::after{
  content:''; position:absolute; inset:-1px; z-index:4;
  background:var(--ink);
  transform-origin:bottom; transform:scaleY(1);
  transition:transform 1.05s var(--e-out);
  transition-delay:var(--d, 0ms);
}
.reveal[data-anim="frame"].is-in::after{ transform:scaleY(0); }

/* -- etiqueta técnica: o espaçamento assenta -- */
.reveal[data-anim="label"]{
  transform:none;
  letter-spacing:.52em;
  transition-property:opacity, letter-spacing;
  transition-duration:var(--t-slow);
}
.reveal[data-anim="label"].is-in{ letter-spacing:.22em; }

/* ------------------------------------------------------------
   ABERTURA — o topo não espera o JS.
   O observador de scroll só roda depois que a folha de estilo do
   Google Fonts chega, o que atrasava o título em quase um segundo
   e deixava a dobra vazia. Acima da dobra é animação de CSS, que
   começa no mesmo instante em que o texto passa a existir.
   ------------------------------------------------------------ */

@keyframes k-rise { from { opacity:0; transform:translate3d(0,26px,0); } to { opacity:1; transform:none; } }
@keyframes k-line { from { transform:translate3d(0,110%,0); }            to { transform:none; } }
@keyframes k-label{ from { opacity:0; letter-spacing:.52em; }            to { opacity:1; letter-spacing:.22em; } }

.hero .reveal{
  animation:k-rise var(--t-base) var(--e-out) both;
  animation-delay:var(--d, 0ms);
  transition:none;
}
.hero .reveal[data-anim="label"]{
  animation-name:k-label;
  animation-duration:var(--t-slow);
  --d:60ms;
}
.hero .reveal[data-anim="lines"]{ animation:none; opacity:1; --d:150ms; }
.hero [data-anim="lines"] .ln > i{
  animation:k-line var(--t-slow) var(--e-out) both;
  animation-delay:calc(var(--d, 0ms) + var(--i, 0) * 95ms);
  transition:none;
}
.hero .lead{ --d:620ms; }
.hero .hero__actions{ --d:740ms; }

/* A foto entra antes de tudo, num zoom que assenta. A animação fica na
   moldura e não na imagem: a imagem é quem recebe o parallax por JS, e
   animação de CSS ganha de estilo inline, então as duas na mesma tag se
   anulariam. */
@keyframes k-shot{
  from{ opacity:0; transform:scale(1.07); }
  to  { opacity:1; transform:scale(1); }
}
.hero__shot{ animation:k-shot 1.9s var(--e-out) both; }
.hero__grade,
.hero__scrim,
.hero__hud{ animation:k-fade 1.4s var(--e-out) both; animation-delay:180ms; }
@keyframes k-fade{ from{ opacity:0 } to{ opacity:1 } }

/* enquanto anima, avisa o compositor; depois some pra não segurar memória */
.reveal:not(.is-done){ will-change:transform, opacity, clip-path; }
.reveal.is-done{ will-change:auto; }

/* elementos com parallax são controlados por JS */
[data-parallax]{ will-change:transform; }

/* ============================================================
   BREAKPOINTS
   ============================================================ */

@media (min-width:600px){
  .fab span{ display:inline; }
  .step{ grid-template-columns:56px 1fr; }
  .step__n{ padding-top:9px; }
  .step h3{ grid-column:2; }
  .step p{ grid-column:2; }
}

@media (max-width:859px){
  /* no celular a foto é vertical: nada de alargar, e o sujeito sobe
     pra caber acima do bloco de texto */
  /* No celular a foto não é fundo, é bloco: fica com a metade de cima
     inteira e o texto ganha breu sólido embaixo. Sobrepor letra em cima
     da névoa clara não lê em tela pequena, e cortar a cabeça do
     cinegrafista na linha do título é pior ainda. */
  .hero{ min-height:min(880px, 100svh); }
  .hero__shot,
  .hero__grade{ inset:0 0 46% 0; }
  .hero__shot img{ width:100%; left:0; top:-4%; height:108%; object-position:57% 36%; }
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(8,8,10,.60) 0%, rgba(8,8,10,.10) 15%,
                              rgba(8,8,10,.18) 32%, rgba(8,8,10,.80) 48%,
                              var(--ink) 57%);
  }
  .hero__hud{ inset:clamp(72px,9vh,96px) 12px clamp(50px,6vh,64px); }
}

@media (min-width:860px){
  .grid-2{ grid-template-columns:1fr 1fr; }
  .grid-2--narrow{ grid-template-columns:.85fr 1.15fr; }
  .grid-2--flip .frame{ order:-1; }
  .head--row{ flex-direction:row; justify-content:space-between; align-items:flex-end; }
  .quotes{ margin-top:60px; }
}

@media (min-width:1000px){
  /* três colunas iguais nas pontas: o menu fica no centro óptico da
     barra, não colado na logo */
  .nav__inner{ display:grid; grid-template-columns:1fr auto 1fr; }
  .nav__links{ display:flex; justify-self:center; }
  .nav .nav__cta{ display:inline-flex; margin-left:0; justify-self:end; }
  .burger{ display:none; }
  .menu{ display:none !important; }
  .cards{ grid-template-columns:repeat(4,1fr); }
  /* no desktop o WhatsApp já mora na barra de navegação */
  .fab{ display:none; }
  .foot__bar{ padding-bottom:22px; }
}

@media (min-width:1240px){
  :root{ --rail:46px; }
  .reel-rail{ display:block; }
  .scrub{ display:none; }
}

/* preferências do usuário */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .reveal{ opacity:1; transform:none; clip-path:none; }
  .reveal[data-anim="label"]{ letter-spacing:.22em; }
  [data-anim="lines"] .ln{ overflow:visible; }
  [data-anim="lines"] .ln > i{ transform:none; }
  .reveal[data-anim="frame"]::after{ display:none; }
  [data-parallax]{ transform:none !important; will-change:auto; }
  .fab{ opacity:1; transform:none; }
}