/* ==========================================================================
   FONTE — Carlito (clone métrico da Calibri, do manual da marca)
   Hospedada aqui mesmo: sem DNS/TLS extra para o Google, uma volta a menos
   no carregamento. Quem tem Calibri instalado (Windows/Office) nem baixa.
   ========================================================================== */
@font-face{font-family:'Carlito';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/carlito-400-latin-ext.woff2) 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:'Carlito';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/carlito-400-latin.woff2) 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:'Carlito';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/carlito-700-latin-ext.woff2) 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:'Carlito';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/carlito-700-latin.woff2) 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}

/* ==========================================================================
   SWALLOW FILMES — Landing Page
   --------------------------------------------------------------------------
   Sumário
   01. Tokens (cores, tipografia, espaçamento)
   02. Reset e base
   03. Utilitários (container, eyebrow, botões, reveal)
   04. Grão de filme
   05. Navegação
   06. Hero
   07. Marcas
   08. Cabeçalho de seção
   09. Portfólio (filtros + cards)
   10. Serviços
   11. Faixa de CTA
   12. Quem somos + carrossel da equipe
   13. Contato e formulário (modal)
   14. Rodapé
   15. WhatsApp flutuante
   16. Lightbox de vídeo
   17. Página de obrigado
   18. Responsivo
   19. Acessibilidade / movimento reduzido
   ========================================================================== */


/* 01. TOKENS ==============================================================
   Cores e tipografia tiradas do MANUAL DA MARCA:
     laranja  RGB 193 59 0   → #C13B00
     cinza    RGB  39 39 39  → #272727
     preto    RGB  23 24 24  → #171818
     tipografia: família Calibri
   ========================================================================== */
:root{
  /* Base escura — preto e cinza do manual */
  --bg:        #171818;
  --bg-2:      #1e1f1f;
  --bg-3:      #272727;
  --line:      rgba(255,255,255,.12);
  --line-soft: rgba(255,255,255,.07);

  --fg:        #f4f3f1;
  --fg-muted:  rgba(244,243,241,.66);
  --fg-dim:    rgba(244,243,241,.42);

  /* Laranja da marca — chapado, sem degradê */
  --accent:        #C13B00;   /* preenchimentos, blocos, bordas */
  --accent-bright: #E04A0A;   /* hover e textos pequenos sobre o escuro */
  --accent-wash:   rgba(193,59,0,.16);
  --accent-line:   rgba(193,59,0,.55);
  --on-accent:     #ffffff;   /* texto sobre o laranja */

  /* Tipografia — Calibri (manual). Carlito é o clone métrico que carrega
     na web quando a máquina não tem Calibri instalado. */
  --font: "Calibri", "Carlito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Ritmo */
  --section-y: clamp(5rem, 11vw, 10rem);
  --gutter:    clamp(1.25rem, 5vw, 3rem);
  --maxw:      1280px;

  /* Movimento */
  --ease: cubic-bezier(.22,.61,.36,1);
}


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

html{
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;      /* trava qualquer rolagem lateral acidental */
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:clamp(.95rem, .35vw + .88rem, 1.0625rem);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

/* Títulos: Calibri Bold, bem fechado */
h1,h2,h3{
  font-family:var(--font);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.025em;
  margin:0;
}

/* Trechos destacados dentro dos títulos: laranja chapado, mesmo peso */
h1 em, h2 em, h3 em, .footer__claim em{
  font-style:normal;
  color:var(--accent);
}

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

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

button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--accent); color:var(--on-accent); }

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


/* 03. UTILITÁRIOS ========================================================= */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
}

/* Rótulo pequeno, caixa alta, com bloco laranja à esquerda */
.eyebrow{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin:0 0 1.5rem;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent-bright);
}
.eyebrow::before{
  content:"";
  width:2.25rem; height:3px;
  background:var(--accent);
  flex:none;
}
.eyebrow--center{ justify-content:center; text-align:center; }
.eyebrow--center::after{
  content:"";
  width:2.25rem; height:3px;
  background:var(--accent);
  flex:none;
}

/* Índice numérico das seções */
.index{
  position:absolute;
  top:calc(var(--section-y) * -.2);
  right:var(--gutter);
  font-weight:700;
  font-size:clamp(3.5rem, 9vw, 7rem);
  line-height:1;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:2px var(--accent-line);
  pointer-events:none;
  user-select:none;
}

/* Botões — laranja chapado, sem brilho nem degradê */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:1rem 2rem;
  border:2px solid var(--accent);
  border-radius:4px;
  background:var(--accent);
  color:var(--on-accent);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover,
.btn:focus-visible{ background:var(--accent-bright); border-color:var(--accent-bright); }

/* Variante vazada */
.btn--ghost{
  background:transparent;
  color:var(--fg);
  border-color:rgba(255,255,255,.3);
}
.btn--ghost:hover,
.btn--ghost:focus-visible{
  background:var(--fg);
  border-color:var(--fg);
  color:var(--bg);
}

.btn--sm{ padding:.7rem 1.4rem; font-size:.75rem; }
.btn--lg{ padding:1.15rem 2.5rem; font-size:.875rem; }
.btn--block{ display:flex; width:100%; }

/* Animação de entrada ao rolar (ativada via JS) */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--d, 0) * 85ms);
}
.reveal.is-visible{ opacity:1; transform:none; }


/* 04. GRÃO DE FILME ======================================================= */
/* Camada de grão fixa sobre a página. É puramente decorativa e cara de
   desenhar: fica numa camada própria da GPU (will-change) para não forçar
   repintura do resto a cada quadro. No mobile a animação sai de cena — ali
   ela custava vários quadros por segundo de rolagem e ninguém percebe. */
.grain{
  position:fixed;
  inset:-50%;
  z-index:9999;
  pointer-events:none;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change:transform;
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-4%,3%) }
  40%{ transform:translate(3%,-4%) }
  60%{ transform:translate(-3%,-3%) }
  80%{ transform:translate(4%,2%) }
}


/* 05. NAVEGAÇÃO =========================================================== */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(23,24,24,.93);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}

.nav__inner{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:1.1rem var(--gutter);
  display:flex;
  align-items:center;
  gap:2rem;
  transition:padding .4s var(--ease);
}
.nav.is-stuck .nav__inner{ padding-block:.7rem; }

.nav__logo img{ width:clamp(120px,12vw,148px); height:auto; }

.nav__links{
  display:flex;
  gap:2.25rem;
  margin-left:auto;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.04em;
}
.nav__links a{
  position:relative;
  color:var(--fg-muted);
  padding-block:.25rem;
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:3px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav__links a:hover,
.nav__links a:focus-visible{ color:var(--fg); }
.nav__links a:hover::after,
.nav__links a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }

.nav__toggle{
  display:none;
  width:2.75rem; height:2.75rem;
  margin-left:auto;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:6px;
}
.nav__toggle span{
  display:block;
  width:24px; height:3px;
  background:var(--fg);
  transition:transform .3s var(--ease), width .3s var(--ease);
}
.nav__toggle span:last-child{ width:16px; background:var(--accent); }
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(4.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ width:24px; transform:translateY(-4.5px) rotate(-45deg); }

.nav__mobile{
  display:none;
  flex-direction:column;
  gap:.35rem;
  padding:1rem var(--gutter) 2rem;
  background:var(--bg);
  border-top:1px solid var(--line);
}
.nav__mobile a:not(.btn),
.nav__mobile button:not(.btn){
  padding:.9rem 0;
  font-size:1.05rem;
  font-weight:700;
  text-align:left;
  color:var(--fg-muted);
  border-bottom:1px solid var(--line-soft);
}
.nav__mobile .btn{ margin-top:1.25rem; }
.nav__mobile.is-open{ display:flex; }

.nav.is-menu-open{
  height:100svh;
  background:var(--bg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  overflow-y:auto;
}


/* 06. HERO ================================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-block:7rem 4.5rem;
  overflow:hidden;
}

/* O poster vive aqui, como fundo, e não só no atributo do <video>.
   Assim ele aparece antes de qualquer JS rodar e continua no lugar quando
   não há vídeo nenhum (celular, hero.mp4 ausente, economia de dados). */
.hero__media{
  position:absolute;
  inset:0;
  z-index:-2;
  background:#000 url("../assets/img/hero-poster.webp") center/cover no-repeat;
}

.hero__video{
  width:100%; height:100%;
  object-fit:cover;
  animation:heroZoom 30s var(--ease) infinite alternate;
}
@keyframes heroZoom{
  from{ transform:scale(1) }
  to  { transform:scale(1.1) }
}

/* Iframe do Vimeo usado como fundo quando não há hero.mp4 local */
.hero__vimeo{ position:absolute; inset:0; overflow:hidden; }
.hero__vimeo iframe{
  position:absolute;
  top:50%; left:50%;
  width:100vw;
  height:56.25vw;
  min-height:100svh;
  min-width:177.78svh;
  transform:translate(-50%,-50%) scale(1.02);
  border:0;
  pointer-events:none;
}

/* Escurecimento limpo, sem tinta colorida */
.hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    var(--bg) 1%,
    rgba(23,24,24,.92) 24%,
    rgba(23,24,24,.48) 62%,
    rgba(23,24,24,.62) 100%);
}

.hero__content{ position:relative; z-index:1; }

.hero__title{
  max-width:17ch;
  font-size:clamp(2.5rem, 5.6vw, 5rem);
  margin-bottom:1.5rem;
}

.hero__sub{
  max-width:46ch;
  font-size:clamp(1rem, .5vw + .9rem, 1.25rem);
  color:var(--fg-muted);
  margin-bottom:2.25rem;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; }

.hero__scroll{
  position:absolute;
  right:var(--gutter);
  bottom:4.5rem;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.85rem;
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--fg-dim);
  writing-mode:vertical-rl;
}
.hero__scroll-line{
  width:3px; height:3.5rem;
  background:var(--accent);
}


/* 07. MARCAS ============================================================== */
.brands{
  padding-block:clamp(3.5rem, 7vw, 6rem);
  border-bottom:1px solid var(--line-soft);
  background:var(--bg);
}

/* Flex em vez de grid: a última fileira fica centralizada. */
.brands__grid{
  --cols:7;
  --gap:clamp(.5rem, 1.6vw, 1rem);
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--gap);
}

.brands__item{
  flex:0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - 0.02px);
  min-width:0;
  display:grid;
  place-items:center;
  min-height:5.75rem;
  padding:1rem 1.15rem;
  border:1px solid var(--line-soft);
  border-radius:4px;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.brands__item:hover{
  border-color:var(--accent);
  background:var(--accent-wash);
}

.brands__item img{
  max-height:2.6rem;
  width:auto;
  object-fit:contain;
  opacity:.45;
  transition:opacity .3s var(--ease);
}
.brands__item:hover img{ opacity:1; }

/* Wordmark provisória (marcas ainda sem arquivo de logo) */
.brands__name{
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.35;
  text-transform:uppercase;
  text-align:center;
  text-wrap:balance;
  color:var(--fg-dim);
  transition:color .3s var(--ease);
}
.brands__item:hover .brands__name{ color:var(--accent); }


/* 08. CABEÇALHO DE SEÇÃO ================================================== */
.section__head{ max-width:54ch; margin-bottom:clamp(2.75rem, 5vw, 4.5rem); }

.section__title{ font-size:clamp(2rem, 4.2vw, 3.5rem); }

.section__lead{
  margin-top:1.5rem;
  max-width:52ch;
  color:var(--fg-muted);
}


/* 09. PORTFÓLIO =========================================================== */
.work{ background:var(--bg); }

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:clamp(2rem, 3.5vw, 3rem);
}
.filters__btn{
  padding:.6rem 1.25rem;
  border:1px solid var(--line);
  border-radius:4px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg-dim);
  transition:color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.filters__btn:hover{ color:var(--accent); border-color:var(--accent); }
.filters__btn.is-active{
  color:var(--on-accent);
  background:var(--accent);
  border-color:var(--accent);
}

/* Grade de 6 colunas: cards normais ocupam 2, destaques ocupam 3. */
.work__grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:clamp(1rem, 2vw, 1.75rem);
}
.case      { grid-column:span 2; }
.case--wide{ grid-column:span 3; }

.case{ display:flex; flex-direction:column; gap:1rem; }
.case[hidden]{ display:none; }

.case__btn{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:4px;
  background:var(--bg-3);
}
.case__btn::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.5), transparent 55%);
  transition:opacity .4s var(--ease);
}
.case__btn:hover::after{ opacity:.5; }

.case__img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.case__btn:hover .case__img,
.case__btn:focus-visible .case__img{ transform:scale(1.05); }

.case__play{
  position:absolute;
  left:1.25rem; bottom:1.25rem;
  z-index:2;
  width:3rem; height:3rem;
  display:grid; place-items:center;
  border:2px solid var(--fg);
  border-radius:50%;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.case__play::before{
  content:"";
  width:0; height:0;
  margin-left:3px;
  border-left:10px solid var(--fg);
  border-top:6.5px solid transparent;
  border-bottom:6.5px solid transparent;
  transition:border-left-color .3s var(--ease);
}
.case__btn:hover .case__play,
.case__btn:focus-visible .case__play{ background:var(--accent); border-color:var(--accent); }
.case__btn:hover .case__play::before{ border-left-color:var(--on-accent); }

.case__meta{ display:flex; flex-direction:column; gap:.3rem; }

.case__title{
  font-size:clamp(1.05rem, 1.35vw, 1.3rem);
  line-height:1.2;
  transition:color .25s var(--ease);
}
.case:hover .case__title{ color:var(--accent); }
.case--wide .case__title{ font-size:clamp(1.3rem, 2vw, 1.85rem); }

.case__tag{
  margin:0;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-bright);
}


/* 10. SERVIÇOS ============================================================ */
.services{
  background:var(--bg-2);
  border-block:1px solid var(--line-soft);
}

/* 7 itens: 3 + 3 + 1, com a última fileira centralizada. */
.services__grid{
  --cols:3;
  --gap:clamp(1.5rem, 3vw, 2.5rem);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--gap);
}

.service{
  flex:0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - 0.02px);
  min-width:0;
}

.service__media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:4px;
  margin-bottom:1.35rem;
  background:var(--bg-3);
}
.service__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.service:hover .service__media img{ transform:scale(1.05); }

/* Número do serviço: bloco laranja chapado no canto */
.service__num{
  position:absolute;
  left:0; top:0;
  z-index:1;
  padding:.35rem .7rem;
  background:var(--accent);
  color:var(--on-accent);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.06em;
}

.service__title{
  font-size:clamp(1.2rem, 1.6vw, 1.5rem);
  margin-bottom:.55rem;
}

.service__text{
  font-size:.9375rem;
  color:var(--fg-muted);
  max-width:36ch;
}


/* 11. FAIXA DE CTA ======================================================== */
/* Blocos de chamada espalhados pela página, entre as seções. */
.cta-band{
  border-block:1px solid var(--line-soft);
  background:var(--bg);
  padding-block:clamp(2.5rem, 5vw, 4rem);
}

.cta-band__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:clamp(1.25rem, 3vw, 2.5rem);
}

.cta-band__text{
  font-size:clamp(1.4rem, 2.8vw, 2.25rem);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.15;
  max-width:24ch;
  margin:0;
}
.cta-band__text em{ font-style:normal; color:var(--accent); }

/* Variante em laranja chapado, para o bloco de maior peso */
.cta-band--solid{ background:var(--accent); border-color:var(--accent); }
.cta-band--solid .cta-band__text{ color:var(--on-accent); }
.cta-band--solid .cta-band__text em{ color:#fff; }
.cta-band--solid .btn{
  background:var(--on-accent);
  border-color:var(--on-accent);
  color:var(--accent);
}
.cta-band--solid .btn:hover{ background:#fff; border-color:#fff; color:var(--accent); }


/* 12. QUEM SOMOS ========================================================== */
.about__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(2rem, 6vw, 5rem);
}

.about__media{
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:4px;
  background:var(--bg-3);
}
.about__media img{ width:100%; height:100%; object-fit:cover; }

.about__text{ border-left:3px solid var(--accent); padding-left:clamp(1.25rem,2.5vw,2rem); }
.about__text p{ color:var(--fg-muted); max-width:52ch; }
.about__text strong{ color:var(--accent-bright); font-weight:700; }
.about__text .section__title{ margin-bottom:1.75rem; }
.about__text .btn{ margin-top:1rem; }

/* --- Carrossel da equipe ------------------------------------------------ */
.crew{ margin-top:clamp(3.5rem, 7vw, 6rem); }

.crew__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  margin-bottom:1.75rem;
}
.crew__title{ font-size:clamp(1.4rem, 2.4vw, 2rem); }

.crew__nav{ display:flex; gap:.5rem; flex:none; }
.crew__btn{
  width:2.75rem; height:2.75rem;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--fg-muted);
  transition:color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.crew__btn:hover:not(:disabled){ color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.crew__btn:disabled{ opacity:.3; cursor:default; }

/* Trilho com rolagem horizontal e encaixe.
   O encaixe é "proximity", não "mandatory": com mandatory as setas brigavam
   com o snap e o carrossel travava no fim. E o scroll-behavior fica por
   conta do JS (ele já passa 'smooth'), senão as duas animações se atropelam. */
.crew__track{
  display:flex;
  gap:clamp(.75rem, 1.5vw, 1.25rem);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  padding-bottom:.25rem;
}
.crew__track::-webkit-scrollbar{ display:none; }

.crew__item{
  flex:0 0 clamp(16rem, 32vw, 26rem);
  scroll-snap-align:start;
  border-radius:4px;
  overflow:hidden;
  background:var(--bg-3);
}
.crew__item img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.crew__item:hover img{ transform:scale(1.04); }

.crew__caption{
  padding:.9rem 1.1rem 1.1rem;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--fg-muted);
}

/* Card de making of: a foto vira botão de play */
.crew__play{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  cursor:pointer;
}
.crew__play::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(23,24,24,.35);
  transition:background-color .3s var(--ease);
}
.crew__play:hover::after{ background:rgba(23,24,24,.15); }

.crew__playicon{
  position:absolute;
  left:50%; top:50%;
  z-index:1;
  transform:translate(-50%,-50%);
  width:3.25rem; height:3.25rem;
  display:grid; place-items:center;
  border:2px solid var(--fg);
  border-radius:50%;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.crew__playicon::before{
  content:"";
  width:0; height:0;
  margin-left:4px;
  border-left:11px solid var(--fg);
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  transition:border-left-color .3s var(--ease);
}
.crew__play:hover .crew__playicon{ background:var(--accent); border-color:var(--accent); }
.crew__play:hover .crew__playicon::before{ border-left-color:var(--on-accent); }


/* 13. CONTATO E FORMULÁRIO (MODAL) ======================================== */
.contact{
  background:var(--bg-2);
  border-top:1px solid var(--line-soft);
}

.contact__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem, 6vw, 5rem);
  align-items:center;
}

.contact__lead{ color:var(--fg-muted); max-width:44ch; margin-top:1.5rem; }

.contact__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.25rem; }

.contact__wa{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.9375rem;
  font-weight:700;
  color:var(--fg);
  padding-bottom:.35rem;
  border-bottom:2px solid var(--accent);
  transition:color .25s var(--ease);
}
.contact__wa:hover{ color:var(--accent); }

/* Lista de argumentos ao lado do CTA */
.contact__list{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; }
.contact__list li{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  font-size:.9375rem;
  color:var(--fg-muted);
}
.contact__list li::before{
  content:"";
  flex:none;
  width:.75rem; height:.75rem;
  margin-top:.45rem;
  background:var(--accent);
}
.contact__list strong{ color:var(--fg); font-weight:700; }

/* --- Modal -------------------------------------------------------------- */
.modal{
  position:fixed; inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  padding:clamp(1rem, 4vw, 2.5rem);
  background:rgba(10,11,11,.9);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .3s var(--ease);
  overflow-y:auto;
}
.modal[hidden]{ display:none; }
.modal.is-open{ opacity:1; }

.modal__panel{
  position:relative;
  width:min(100%, 38rem);
  max-height:100%;
  overflow-y:auto;
  padding:clamp(1.75rem, 4vw, 2.75rem);
  background:var(--bg-2);
  border:1px solid var(--line);
  border-top:4px solid var(--accent);
  border-radius:4px;
}

.modal__close{
  position:absolute;
  top:.75rem; right:.75rem;
  width:2.5rem; height:2.5rem;
  display:grid; place-items:center;
  border-radius:4px;
  font-size:1.6rem;
  line-height:1;
  color:var(--fg-dim);
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.modal__close:hover{ color:var(--fg); background:var(--line-soft); }

.modal__title{ font-size:clamp(1.5rem, 3vw, 2rem); margin-bottom:.6rem; padding-right:2.5rem; }
.modal__text{ color:var(--fg-muted); font-size:.9375rem; margin-bottom:1.75rem; }

.form{ display:flex; flex-direction:column; gap:1.25rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }

.field{ display:flex; flex-direction:column; gap:.45rem; }

.field__label{
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.field__label span{ color:var(--accent); margin-left:.2em; }

.field input,
.field textarea{
  width:100%;
  padding:.8rem .9rem;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--bg);
  color:var(--fg);
  font:inherit;
  transition:border-color .25s var(--ease);
}
.field textarea{ resize:vertical; min-height:4rem; }

.field input::placeholder,
.field textarea::placeholder{ color:rgba(244,243,241,.24); }

.field input:focus,
.field textarea:focus{ outline:none; border-color:var(--accent); }

.field.has-error input,
.field.has-error textarea{ border-color:#ff5a4d; }

.form .btn{ margin-top:.5rem; }

.form__status{
  min-height:1.4em;
  margin:0;
  font-size:.875rem;
  color:var(--fg-muted);
}
.form__status.is-ok{ color:var(--accent-bright); }
.form__status.is-error{ color:#ff8a80; }


/* 14. RODAPÉ ============================================================== */
.footer{
  padding-block:clamp(4rem, 8vw, 6.5rem) 2.5rem;
  border-top:1px solid var(--line);
  background:var(--bg);
}

.footer__claim{
  font-size:clamp(1.8rem, 4vw, 3.25rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.025em;
  max-width:18ch;
  margin-bottom:clamp(3rem, 6vw, 4.5rem);
}

.footer__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:clamp(2rem, 4vw, 3.5rem);
  padding-top:clamp(2.5rem, 4vw, 3.5rem);
  border-top:1px solid var(--line-soft);
}

.footer__logo{ width:132px; margin-bottom:1rem; }

.footer__h{
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-bright);
  margin-bottom:1rem;
}

.footer__col p,
.footer__note{
  font-size:.875rem;
  color:var(--fg-muted);
  line-height:1.8;
}

.footer__col a{ transition:color .25s var(--ease); }
.footer__col a:hover{ color:var(--accent); }

.footer__social{ display:flex; flex-wrap:wrap; gap:1.15rem; margin-top:1rem; font-size:.8125rem; font-weight:700; }

.footer__col--license img{
  width:118px;
  opacity:.55;
  transition:opacity .3s var(--ease);
}
.footer__col--license:hover img{ opacity:1; }

.footer__legal{
  margin-top:clamp(3rem, 5vw, 4rem);
  font-size:.75rem;
  color:var(--fg-dim);
}


/* 15. WHATSAPP FLUTUANTE ================================================== */
.wa-float{
  position:fixed;
  right:clamp(1rem, 2.5vw, 1.75rem);
  bottom:clamp(1rem, 2.5vw, 1.75rem);
  z-index:90;
  width:3.35rem; height:3.35rem;
  display:grid; place-items:center;
  border-radius:50%;
  background:#25d366;
  color:#08231a;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .25s var(--ease);
}
.wa-float:hover,
.wa-float:focus-visible{ transform:scale(1.08); }

/* Quando o RD Station entrega o botão flutuante dele, o nosso sai de cena
   (ver módulo 11 do main.js) — nunca ficam dois na tela. */
.has-rd-button .wa-float{ display:none; }


/* 16. LIGHTBOX DE VÍDEO =================================================== */
.lightbox{
  position:fixed; inset:0;
  z-index:200;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  padding:clamp(1rem, 4vw, 3rem);
  background:rgba(10,11,11,.95);
  opacity:0;
  transition:opacity .3s var(--ease);
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; }

.lightbox__frame{
  width:min(100%, 1180px);
  aspect-ratio:16/9;
  background:#000;
  border-radius:4px;
  overflow:hidden;
}
.lightbox__frame iframe{ width:100%; height:100%; border:0; display:block; }

.lightbox__caption{
  margin:0;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-bright);
  text-align:center;
}

.lightbox__close{
  position:absolute;
  top:clamp(.75rem, 2.5vw, 1.75rem);
  right:clamp(.75rem, 2.5vw, 1.75rem);
  width:2.75rem; height:2.75rem;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:4px;
  font-size:1.6rem;
  line-height:1;
  color:var(--fg-muted);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.lightbox__close:hover{ color:var(--accent); border-color:var(--accent); }

body.is-locked{ overflow:hidden; }


/* 17. PÁGINA DE OBRIGADO ================================================== */
.thanks{
  min-height:100svh;
  display:grid;
  /* minmax(0,1fr) impede que a coluna cresça além do container e
     empurre o conteúdo para fora da tela em telas estreitas */
  grid-template-columns:minmax(0, 1fr);
  place-items:center;
  padding:7rem var(--gutter) 4rem;
  text-align:center;
}

/* width:100% impede que o bloco estoure a coluna em telas estreitas */
.thanks__inner{ width:100%; max-width:44rem; }

.thanks__check{
  width:4.5rem; height:4.5rem;
  margin:0 auto 2rem;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--accent);
  color:var(--on-accent);
  animation:pop .6s var(--ease) both;
}
@keyframes pop{
  from{ transform:scale(.6); opacity:0 }
  to  { transform:scale(1);  opacity:1 }
}

.thanks__title{ font-size:clamp(2.2rem, 5.2vw, 3.8rem); margin-bottom:1.5rem; }

.thanks__text{
  color:var(--fg-muted);
  font-size:clamp(1rem, .5vw + .9rem, 1.15rem);
  max-width:46ch;
  margin-inline:auto;
}

.thanks__cta{
  margin-top:2.75rem;
  padding:clamp(1.75rem, 3.5vw, 2.5rem);
  border:1px solid var(--accent);
  border-radius:4px;
  background:var(--accent-wash);
}
.thanks__cta h2{ font-size:clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom:.75rem; }
.thanks__cta p{ color:var(--fg-muted); font-size:.9375rem; max-width:42ch; margin-inline:auto; }
.thanks__cta .btn{ margin-top:1.5rem; }

.thanks__back{
  display:inline-block;
  margin-top:2.5rem;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fg-dim);
  border-bottom:2px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.thanks__back:hover{ color:var(--accent); border-bottom-color:var(--accent); }


/* 18. RESPONSIVO ========================================================== */
@media (max-width:1080px){
  .work__grid{ grid-template-columns:repeat(2, 1fr); }
  .case      { grid-column:span 1; }
  .case--wide{ grid-column:span 2; }

  .brands__grid  { --cols:5; }
  .services__grid{ --cols:2; }
}

@media (max-width:900px){
  .nav__links,
  .nav__cta{ display:none; }
  .nav__toggle{ display:flex; }

  .about__inner,
  .contact__inner{ grid-template-columns:1fr; }

  .about__media{ aspect-ratio:16/10; order:-1; }
  .about__text{ border-left:0; border-top:3px solid var(--accent); padding-left:0; padding-top:1.75rem; }

  .index{ display:none; }
  .cta-band__inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:760px){
  /* --- Peso de renderização no celular -------------------------------
     No desktop tudo isso é de graça; num aparelho mediano, não. */

  /* O grão animado repintava uma camada do tamanho da tela a cada quadro. */
  .grain{ animation:none; opacity:.025; will-change:auto; }

  /* O zoom lento do topo mantinha o compositor trabalhando sem parar. */
  .hero__video{ animation:none; }

  /* backdrop-filter é recalculado a cada quadro de rolagem. Um fundo
     sólido resolve igual e sai muito mais barato. */
  .nav.is-stuck{
    background:rgba(23,24,24,.97);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .modal,
  .case__play{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  .modal{ background:rgba(10,11,11,.97); }

  .work__grid{ grid-template-columns:1fr; }
  .case,
  .case--wide{ grid-column:span 1; }
  .case--wide .case__title{ font-size:clamp(1.2rem, 4.5vw, 1.5rem); }

  .form__row{ grid-template-columns:1fr; }

  .hero{ padding-block:7rem 4.5rem; min-height:92svh; }
  .hero__title{ max-width:14ch; }
  .hero__actions .btn{ flex:1 1 auto; }
  .hero__scroll{ display:none; }

  .brands__grid  { --cols:3; }
  .services__grid{ --cols:1; }
  .brands__item{ min-height:4.75rem; padding:.75rem; }
  .brands__item img{ max-height:2rem; }

  .eyebrow{ font-size:.625rem; letter-spacing:.14em; gap:.65rem; }
  .eyebrow::before,
  .eyebrow--center::after{ width:1.75rem; }

  .crew__item{ flex-basis:min(82vw, 20rem); }
  .cta-band .btn{ width:100%; }
}


/* 19. ACESSIBILIDADE ====================================================== */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:999;
  padding:.85rem 1.5rem;
  background:var(--accent);
  color:var(--on-accent);
  font-size:.8125rem;
  font-weight:700;
}
.skip-link:focus{ left:1rem; top:1rem; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .grain{ display:none; }
}