/* ==========================================================================
   Zenic Rec
   Paleta e geometria saem da própria logo: preto absoluto, branco,
   #FF3131 como pontuação, e chanfros de 45° iguais aos cortes das letras.
   ========================================================================== */

:root {
  /* Cores da marca — os SVG e o favicon continuam no preto e branco puros. */
  --preto:    #000000;
  --branco:   #ffffff;
  --vermelho: #ff3131;

  /* Cores da tela. O fundo não é #000: preto puro deixa o pixel de OLED
     desligado, e ligar/desligar ao rolar deixa rastro no celular. #0a0a0a
     é preto ao olho e resolve. O texto não é #fff porque 21:1 de contraste
     faz o branco vibrar na retina (pior ainda com astigmatismo);
     #ededed sobre #0a0a0a dá ~17:1 — folgado para o AAA, que pede 7:1. */
  --fundo:  #0a0a0a;
  --texto:  #ededed;

  --cinza-1: #151515;  /* superfície dos cartões */
  --cinza-2: #232323;  /* traços e bordas */
  --cinza-3: #969696;  /* texto secundário */

  --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  --esp: 4px;                 /* unidade base */
  --chanfro: 18px;            /* corte de 45° */
  --largura: 1180px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

::selection { background: var(--vermelho); color: var(--branco); }

:focus-visible {
  outline: 2px solid var(--vermelho);
  outline-offset: 3px;
}

.pular {
  position: absolute; left: -9999px;
  background: var(--vermelho); color: #fff;
  padding: calc(var(--esp) * 3);
  z-index: 100;
}
.pular:focus { left: calc(var(--esp) * 3); top: calc(var(--esp) * 3); }

/* ---------- topo ---------- */

.topo {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--esp) * 4);
  padding: calc(var(--esp) * 2) calc(var(--esp) * 6);
  background: rgba(10, 10, 10, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cinza-2);
}

/* Os SVG da marca vêm com margem embutida: a arte ocupa 1917x452 de um
   quadro de 2880x1620, centralizada. Esta caixa recorta essa margem sem
   alterar o arquivo — o <img> é ampliado 2880/1917 e centralizado, então
   sobra exatamente a arte. Assim o alinhamento no CSS fica previsível. */
.marca {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1917 / 452;
}
.marca img {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 150.23%;   /* 2880 / 1917 */
  max-width: none;
  height: auto;

  /* O SVG traz o fundo preto chapado dentro do arquivo, e sobre o #0a0a0a da
     página isso apareceria como uma caixa preta atrás da marca. No blend
     "screen" o preto é o elemento neutro (resultado = 1-(1-a)(1-b), com a=0
     devolve o fundo), então o fundo do arquivo some sozinho e o branco segue
     branco. Resolve sem editar o SVG — só funciona porque a página é escura. */
  mix-blend-mode: screen;
}

.topo-logo { width: 152px; flex: none; }

.topo-nav {
  display: flex; align-items: center;
  gap: calc(var(--esp) * 6);
  font-size: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}

.topo-nav a { text-decoration: none; color: var(--cinza-3); transition: color .18s; }
.topo-nav a:hover { color: var(--texto); }
.topo-nav .btn-mini:hover { color: var(--preto); }

@media (max-width: 700px) {
  .topo { padding: calc(var(--esp) * 2.5) calc(var(--esp) * 4); }
  .topo-logo { width: 98px; }
  .topo-nav { gap: calc(var(--esp) * 4); font-size: 12px; }
  .topo-nav a:not(.btn) { display: none; }
}

/* ---------- botões (chanfrados como as letras) ---------- */

.btn {
  --c: var(--chanfro);
  display: inline-block;
  padding: calc(var(--esp) * 3.5) calc(var(--esp) * 8);
  background: var(--texto);
  color: var(--preto);
  font-size: 14px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c),
                     100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: background .18s, color .18s;
}
.btn:hover { background: var(--vermelho); color: var(--branco); }

.btn-vazado {
  background: transparent;
  color: var(--texto);
  box-shadow: inset 0 0 0 1px var(--cinza-2);
}
.btn-vazado:hover { background: var(--texto); color: var(--preto); box-shadow: none; }

.btn-mini {
  --c: 10px;
  padding: calc(var(--esp) * 2) calc(var(--esp) * 4);
  font-size: 12px;
}

/* ---------- hero ---------- */

/* Largura total para a foto de fundo sangrar de ponta a ponta. O conteúdo não
   precisa de caixa própria: marca, título, texto e botões já têm max-width e
   margem automática, então continuam centralizados e alinhados à grade. */
.hero {
  margin: 0 auto;
  padding: clamp(56px, 10vw, 116px) calc(var(--esp) * 6) clamp(48px, 7vw, 84px);
  text-align: center;
}

.hero-marca {
  width: min(560px, 86%);
  margin: 0 auto clamp(28px, 4vw, 48px);
}

.hero h1 {
  margin: 0 auto calc(var(--esp) * 5);
  max-width: 15ch;
  font-size: clamp(30px, 5.4vw, 60px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
}

.hero-sub {
  margin: 0 auto calc(var(--esp) * 9);
  max-width: 60ch;
  color: var(--cinza-3);
  font-size: clamp(16px, 1.9vw, 20px);
}

.hero-acoes {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: calc(var(--esp) * 3);
}

/* ---------- seções ---------- */

.secao {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 112px) calc(var(--esp) * 6);
  border-top: 1px solid var(--cinza-2);
}

.secao-estreita { max-width: 800px; }

.secao-titulo {
  display: flex; align-items: center;
  gap: calc(var(--esp) * 3);
  margin: 0 0 calc(var(--esp) * 10);
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* o ponto vermelho do "i" da marca, virando marcador de seção */
.pt {
  flex: none;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--vermelho);
}

.texto-grande {
  margin: 0;
  color: var(--cinza-3);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.65;
}

/* ---------- cartões ---------- */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: calc(var(--esp) * 4);
}

.cartao {
  --c: 22px;
  position: relative;
  padding: calc(var(--esp) * 8) calc(var(--esp) * 7);
  background: var(--cinza-1);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c),
                     100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: background .2s;
}
.cartao:hover { background: #1d1d1d; }

/* fio vermelho que cresce na borda de cima ao passar o mouse */
.cartao::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 0; height: 3px;
  background: var(--vermelho);
  transition: width .28s ease;
}
.cartao:hover::before { width: calc(100% - var(--c)); }

.cartao h3 {
  margin: 0 0 calc(var(--esp) * 3);
  font-size: 20px; font-weight: 700;
  letter-spacing: -.01em;
}

.cartao p {
  margin: 0;
  color: var(--cinza-3);
  font-size: 15.5px;
  line-height: 1.62;
}

/* ---------- trabalhos ---------- */

.grade-video { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.video-quadro {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--cinza-1);
  overflow: hidden;
}
.video-quadro iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.video h3 {
  margin: calc(var(--esp) * 3) 0 0;
  font-size: 16px; font-weight: 600;
}
.video h3 a { text-decoration: none; }
.video h3 a:hover { color: var(--vermelho); }

/* ---------- contato ---------- */

.contato-links {
  display: flex; flex-wrap: wrap;
  gap: calc(var(--esp) * 3);
  margin-top: calc(var(--esp) * 8);
}

.contato-redes {
  display: flex; flex-wrap: wrap;
  gap: calc(var(--esp) * 6);
  margin-top: calc(var(--esp) * 6);
  font-size: 15px;
}
.contato-redes a { color: var(--cinza-3); text-decoration: none; transition: color .18s; }
.contato-redes a:hover { color: var(--texto); }

/* ---------- rodapé ---------- */

.rodape {
  display: flex; align-items: center;
  gap: calc(var(--esp) * 4);
  max-width: var(--largura);
  margin: 0 auto;
  padding: calc(var(--esp) * 10) calc(var(--esp) * 6);
  border-top: 1px solid var(--cinza-2);
  color: var(--cinza-3);
  font-size: 14px;
}
.rodape p { margin: 0; }
.rodape strong { color: var(--texto); font-weight: 700; }
.rodape-icone { flex: none; width: 34px; height: 34px; }
.rodape-fino { font-size: 13px; opacity: .65; }

/* ==========================================================================
   ANIMAÇÕES
   Tudo em CSS; o JS só acrescenta a classe .visivel quando o elemento entra
   na tela. Sem JS (ou com "reduzir movimento" ligado no sistema) nada some:
   o estado escondido só existe sob .js-revela, que o JS mesmo liga.
   ========================================================================== */

.js-revela [data-revela] {
  opacity: 0;
  transform: translateY(22px);
}

.js-revela [data-revela].visivel {
  opacity: 1;
  transform: none;
  transition: opacity .62s cubic-bezier(.22, .61, .36, 1),
              transform .62s cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .js-revela [data-revela] { opacity: 1; transform: none; }
}

/* ---------- abertura com foto do estúdio ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero-fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* aproximação lenta: dá vida sem chamar atenção para si */
  animation: aproxima 26s ease-out both;
}

@keyframes aproxima {
  from { transform: scale(1.1); }
  to   { transform: scale(1); }
}

/* Escurece a foto para o texto continuar legível. Sem isto o contraste do
   branco sobre a foto cai abaixo do mínimo em partes claras da imagem. */
.hero-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 92% 72% at 50% 45%, rgba(10,10,10,.30), rgba(10,10,10,.72)),
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.34) 42%, var(--fundo) 98%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-fundo img { animation: none; }
}

/* ---------- topo ganha corpo depois da abertura ---------- */

.topo { transition: background .3s, border-color .3s, padding .3s; }
.topo-preso {
  background: rgba(10, 10, 10, .94);
  border-bottom-color: var(--cinza-2);
}

/* ==========================================================================
   GALERIA DO ESTÚDIO
   ========================================================================== */

.galeria {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: calc(var(--esp) * 3);
}

.foto {
  --c: 20px;
  position: relative;
  grid-column: span 3;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--cinza-1);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c),
                     100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}

/* Grade uniforme: 4 por linha fecham exatamente as 8 fotos em duas linhas.
   Tamanhos diferentes deixavam buraco embaixo das menores, porque a linha
   toda ganha a altura do item mais alto. */

.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .4s;
}

.foto:hover img,
.foto:focus-visible img { transform: scale(1.06); }

/* legenda que sobe ao passar o mouse */
.foto figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: calc(var(--esp) * 8) calc(var(--esp) * 4) calc(var(--esp) * 3);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.85));
  color: var(--texto);
  font-size: 14px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .32s, transform .32s;
}

.foto:hover figcaption,
.foto:focus-visible figcaption { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .foto { grid-column: span 6; }
  /* no celular a legenda fica sempre visível: não existe "passar o mouse" */
  .foto figcaption { opacity: 1; transform: none; font-size: 13px; }
}

@media (max-width: 560px) {
  .foto { grid-column: span 12; }
}

/* ==========================================================================
   EQUIPAMENTO
   ========================================================================== */

.equip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: calc(var(--esp) * 3);
}

.equip-item {
  --c: 16px;
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cinza-1);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c),
                     100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}

.equip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.35) brightness(.82);
  transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .45s;
}

.equip-item:hover img { transform: scale(1.07); filter: none; }

.equip-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: calc(var(--esp) * 9) calc(var(--esp) * 4) calc(var(--esp) * 3.5);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.88));
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* o ponto vermelho da marca aparecendo de novo, como assinatura */
.equip-item figcaption::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--vermelho);
  vertical-align: middle;
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.equip-item:hover figcaption::before { transform: scale(1); }

/* ==========================================================================
   FOTO EM TELA CHEIA
   ========================================================================== */

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(5, 5, 5, .96);
  backdrop-filter: blur(6px);
}

.lb-aberta { display: flex; animation: surge .25s ease both; }

@keyframes surge { from { opacity: 0; } to { opacity: 1; } }

.lb-caixa {
  margin: 0;
  max-width: min(1400px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--esp) * 3);
}

.lb-caixa img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  margin: 0 auto;
}

.lb-caixa.lb-entrou img { animation: cresce .34s cubic-bezier(.22,.61,.36,1) both; }

@keyframes cresce {
  from { opacity: 0; transform: scale(.965); }
  to   { opacity: 1; transform: none; }
}

.lb-caixa figcaption {
  text-align: center;
  color: var(--cinza-3);
  font-size: 14px;
}

.lb-x, .lb-nav {
  position: absolute;
  background: rgba(255,255,255,.07);
  color: var(--texto);
  border: 1px solid var(--cinza-2);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: background .2s, border-color .2s, color .2s;
}

.lb-x:hover, .lb-nav:hover {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: #fff;
}

.lb-x {
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 46px; height: 46px;
  font-size: 26px;
}

.lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 76px;
  font-size: 30px;
}

.lb-ant  { left:  clamp(8px, 2vw, 26px); }
.lb-prox { right: clamp(8px, 2vw, 26px); }

@media (max-width: 620px) {
  .lb-nav { height: 56px; width: 40px; font-size: 25px; }
  .lb-caixa img { max-height: 74vh; }
}

body.sem-rolagem { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lb-aberta, .lb-caixa.lb-entrou img { animation: none; }
  .foto img, .equip-item img { transition: none; }
}

/* ==========================================================================
   FAIXA COM PARALAXE
   A foto fica TRAVADA na tela e a seção desliza por cima dela. É esse efeito
   que se reconhece como paralaxe — um deslocamento pequeno passa despercebido.
   Feito só com CSS, sem biblioteca e sem JavaScript.
   ========================================================================== */

.faixa {
  position: relative;
  /* Tela cheia: é a altura que dá o efeito. Em faixa baixa o percurso é curto
     demais para o olho perceber que a foto ficou para trás. */
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--esp) * 20) calc(var(--esp) * 6);
  text-align: center;

  /* Este clip-path é o truque inteiro: ele faz desta seção o bloco de
     referência do position:fixed abaixo. A foto trava na tela e só pinta
     dentro desta seção, então o conteúdo passa por cima dela.
     Não trocar por background-attachment: fixed — esse trava no iPhone. */
  clip-path: inset(0);
}

/* A foto não se move: quem anda é a página. */
.faixa-fundo {
  position: fixed;
  inset: 0;
  z-index: -2;
}

.faixa-fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* véu escuro, também travado, para acompanhar a foto */
.faixa::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 82% 68% at 50% 50%, rgba(10,10,10,.40), rgba(10,10,10,.72)),
    linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.24) 32%,
                            rgba(10,10,10,.24) 68%, rgba(10,10,10,.72) 100%);
}

.faixa-texto {
  max-width: min(820px, 92%);
  margin: 0 auto;
}

.faixa h2 {
  margin: 0 0 calc(var(--esp) * 5);
  font-size: clamp(30px, 5.6vw, 60px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.faixa p {
  margin: 0 auto;
  max-width: 48ch;
  color: var(--cinza-3);
  font-size: clamp(16px, 1.9vw, 20px);
}

.faixa .pt {
  display: block;
  margin: 0 auto calc(var(--esp) * 7);
}

@media (prefers-reduced-motion: reduce) {
  .faixa { min-height: 64vh; }
}

/* ---------------------------------------------------------------------------
   Prova social: canal que grava aqui.

   Faixa de ponta a ponta, não cartão. A caixa solta no meio da página lia como
   objeto perdido; a faixa passa a SER a divisão entre a abertura e os
   serviços, e por isso dispensa borda extra. Sangra porque nem body nem main
   limitam largura — só as .secao limitam, e esta não é uma.
   --------------------------------------------------------------------------- */
.parceria {
  background: var(--cinza-1);
  border-block: 1px solid var(--cinza-2);
}

.parceria-int {
  max-width: var(--largura);
  margin: 0 auto;
  padding: calc(var(--esp) * 6) calc(var(--esp) * 6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--esp) * 5);
  text-align: left;
}

.parceria-foto {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  /* aro fino: separa a foto do fundo da faixa, que é quase da mesma cor */
  box-shadow: 0 0 0 1px var(--cinza-2);
}

.parceria-chamada {
  display: block;
  margin-bottom: 2px;
  color: var(--cinza-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.parceria-linha {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--esp) * 2);
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.3;
}

.parceria-nome { font-weight: 800; letter-spacing: -.02em; }
.parceria-nome a { color: inherit; text-decoration: none; }
.parceria-nome a:hover { color: var(--vermelho); }

.parceria-sep { color: var(--cinza-2); }

/* o número é o dado que convence: vermelho da marca, sem aumentar o corpo */
.parceria-inscritos { color: var(--vermelho); font-weight: 700; }

.parceria-papel {
  display: block;
  margin-top: 2px;
  color: var(--cinza-3);
  font-size: 14px;
}

@media (max-width: 560px) {
  .parceria-int {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: calc(var(--esp) * 3);
  }
  .parceria-linha { justify-content: center; }
}