/* ============================================================
   BIZ PROD. — Landing Page de Portfólio Cinematográfico
   Design tokens extraídos da identidade visual:
   preto absoluto + laranja de assinatura + serifa slab "BIZ"
   ============================================================ */

:root{
  --black:        #000000;
  --ink:          #0b0b0b;
  --panel:        #121212;
  --line:         #232323;
  --cream:        #F5E9DA;
  --white:        #FDFCFA;
  --mute:         #9C9691;
  --orange:       #FF6A1A;
  --orange-dim:   #C9520F;

  --f-display:    'Roboto Slab', Georgia, serif;
  --f-body:       'Inter', -apple-system, sans-serif;
  --f-data:       'Space Grotesk', var(--f-body);

  /* curva de animação F9 (Easy Ease) do After Effects */
  --f9: cubic-bezier(0.25, 1, 0.5, 1);

  --container: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; cursor:none !important; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--f-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }

::selection{ background:var(--orange); color:var(--black); }

/* respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ============ CURSOR CUSTOMIZADO — bolinha branca desfocada ============ */
.custom-cursor{
  position:fixed;
  top:0; left:0;
  width:18px; height:18px;
  border-radius:50%;
  background:rgba(255,255,255,0.7);
  filter:blur(4px);
  pointer-events:none;
  z-index:999999;
  transform:translate(-50%,-50%);
  transition:width .3s var(--f9), height .3s var(--f9), filter .3s var(--f9), background .3s var(--f9);
  will-change:transform;
}
.custom-cursor.is-hover{
  width:44px; height:44px;
  filter:blur(8px);
  background:rgba(255,255,255,0.7);
}

@media (hover:none), (pointer:coarse){
  .custom-cursor{ display:none; }
  *,*::before,*::after{ cursor:auto !important; }
  button,a{ cursor:pointer !important; }
}

/* ============ ANIMAÇÃO DE ENTRADA (scroll reveal) ============ */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--f9), transform .9s var(--f9);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ============ BOTÕES ============ */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:16px 28px;
  font-family:var(--f-body); font-weight:600; font-size:.95rem;
  letter-spacing:.02em;
  border-radius:2px;
  transition:transform .5s var(--f9), background .5s var(--f9), color .5s var(--f9), border-color .5s var(--f9);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); }
.btn-primary{ background:var(--orange); color:var(--black); }
.btn-primary:hover{ background:var(--cream); }
.btn-outline{ border:1px solid rgba(245,233,218,.35); color:var(--cream); }
.btn-outline:hover{ border-color:var(--cream); background:rgba(245,233,218,.06); }
.btn-ghost{ padding:10px 20px; border:1px solid rgba(245,233,218,.3); font-size:.85rem; }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange); }
.play-ico{ color:var(--black); font-size:.75em; }

/* ============ TIPOGRAFIA COMUM ============ */
.eyebrow{
  font-family:var(--f-data); font-size:.78rem; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:var(--orange);
  margin:0 0 18px;
}
.eyebrow.center{ text-align:center; }
.section-title{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2rem, 4.4vw, 3.4rem);
  line-height:1.08; margin:0 0 24px; color:var(--white);
}
.section-title.center{ text-align:center; }
.section-text{
  color:var(--mute); font-size:1.05rem; max-width:560px; line-height:1.75;
}

/* ============ HEADER ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,5vw,64px);
  mix-blend-mode:normal;
}
.logo{ display:flex; align-items:center; }
.logo-img{ height:40px; width:auto; max-width:100%; object-fit:contain; display:block; }
.footer-logo-img{ height:52px; }
.nav{ display:flex; gap:36px; }
.nav a{ font-size:.9rem; color:var(--cream); opacity:.8; transition:opacity .4s var(--f9), color .4s var(--f9); }
.nav a:hover{ opacity:1; color:var(--orange); }
@media (max-width:800px){ .nav{ display:none; } }

/* ============ 1. HERO ============ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:0 clamp(20px,6vw,80px);
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-video{ width:100%; height:100%; object-fit:cover; }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.85) 100%),
    linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 55%);
}
.hero-grain{
  position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-content{ position:relative; z-index:2; max-width:820px; }
.hero-title{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(2.6rem, 6.4vw, 5.6rem);
  line-height:1.02; letter-spacing:-.01em;
  color:var(--white); margin:0 0 26px;
}
.hero-sub{
  font-size:clamp(1rem,1.6vw,1.2rem); color:var(--cream); opacity:.85;
  max-width:600px; margin:0 0 40px; line-height:1.7;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:18px; }

.scroll-cue{
  position:absolute; bottom:34px; left:clamp(20px,6vw,80px); z-index:2;
  display:flex; align-items:center; gap:12px;
  font-family:var(--f-data); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute);
}
.scroll-cue span{
  width:1px; height:38px; background:linear-gradient(var(--orange), transparent);
  animation:cueMove 2s var(--f9) infinite;
}
@keyframes cueMove{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{ transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* ============ MODAIS DE VÍDEO ============ */
.modal{
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s var(--f9), visibility .5s var(--f9);
}
.modal.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.modal-inner{
  width:min(1100px, 92vw); aspect-ratio:16/9;
  transform:scale(.94); transition:transform .5s var(--f9);
}
.modal.is-open .modal-inner{ transform:scale(1); }
.modal-inner iframe{ width:100%; height:100%; border:0; background:#000; }
.modal-close{
  position:absolute; top:28px; right:32px;
  width:44px; height:44px; border:1px solid rgba(245,233,218,.3); border-radius:50%;
  color:var(--cream); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .4s var(--f9), color .4s var(--f9), transform .4s var(--f9);
}
.modal-close:hover{ border-color:var(--orange); color:var(--orange); transform:rotate(90deg); }

/* ============ 2. BACKSTAGE & NÚMEROS ============ */
.backstage{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:120px clamp(20px,6vw,80px);
  overflow:hidden;
}
.backstage-media{ position:absolute; inset:0; z-index:0; display:flex; }
.backstage-photo{
  flex:1; background-size:cover; background-position:center;
  filter:grayscale(.35) brightness(.55);
}
.backstage-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.7) 45%, rgba(0,0,0,.35) 100%);
}
.backstage-content{ position:relative; z-index:1; max-width:640px; }

.counters{ display:flex; gap:56px; margin-top:56px; flex-wrap:wrap; }
.counter{ display:flex; flex-direction:column; }
.counter-num{
  font-family:var(--f-data); font-weight:700;
  font-size:clamp(2.4rem, 4vw, 3.6rem); color:var(--orange); line-height:1;
}
.counter-label{ margin-top:10px; font-size:.85rem; color:var(--mute); letter-spacing:.02em; }

/* ============ 3. SERVIÇOS ============ */
.services{ padding:140px clamp(20px,6vw,80px); max-width:var(--container); margin:0 auto; }
.service-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line);
  margin-top:64px;
}
.service-card{
  position:relative; background:var(--ink);
  padding:48px 36px; min-height:420px;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; isolation:isolate;
}
.service-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.08);
  transition:opacity .7s var(--f9), transform .9s var(--f9);
  z-index:0;
}
.service-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.25) 100%);
  transition:background .6s var(--f9);
}
.service-card:hover .service-video{ opacity:1; transform:scale(1); }
.service-index{
  position:relative; z-index:2;
  font-family:var(--f-data); color:var(--orange); font-size:.85rem; letter-spacing:.2em;
  margin-bottom:auto;
}
.service-card h3{
  position:relative; z-index:2;
  font-family:var(--f-display); font-size:1.5rem; font-weight:700;
  margin:24px 0 14px; color:var(--white);
}
.service-card p{
  position:relative; z-index:2;
  color:var(--mute); font-size:.95rem; line-height:1.65; margin:0;
  transition:color .5s var(--f9);
}
.service-card:hover p{ color:var(--cream); }

@media (max-width:900px){ .service-grid{ grid-template-columns:1fr; } }

/* ============ 4. PORTFÓLIO ============ */
.portfolio{ padding:0 0 140px; }
.portfolio-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2px; margin-top:64px;
}
.port-item{
  position:relative; aspect-ratio:4/5; background-size:cover; background-position:center; background-color:var(--panel);
  overflow:hidden; cursor:none;
}
.port-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.15) 55%);
  opacity:.75; transition:opacity .6s var(--f9);
}
.port-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px;
  transform:translateY(14px); opacity:.92;
  transition:transform .6s var(--f9), opacity .6s var(--f9);
}
.port-cat{ font-family:var(--f-data); font-size:.75rem; letter-spacing:.1em; color:var(--orange); margin-bottom:10px; }
.port-overlay h3{ font-family:var(--f-display); font-size:1.15rem; margin:0 0 6px; color:var(--white); }
.port-client{ font-size:.85rem; color:var(--mute); margin:0 0 10px; }
.port-result{
  font-size:.85rem; color:var(--cream); margin:0;
  padding-top:10px; border-top:1px solid rgba(245,233,218,.2);
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .5s var(--f9), max-height .5s var(--f9);
}
.port-item:hover::after{ opacity:.92; }
.port-item:hover .port-overlay{ transform:translateY(0); opacity:1; }
.port-item:hover .port-result{ opacity:1; max-height:80px; }

@media (max-width:900px){ .portfolio-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .portfolio-grid{ grid-template-columns:1fr; } }

/* ============ 5. DEPOIMENTOS ============ */
.testimonials{ padding:120px clamp(20px,6vw,80px) 100px; max-width:900px; margin:0 auto; text-align:center; }
.testimonial-carousel{ position:relative; display:flex; align-items:center; gap:24px; margin-top:56px; }
.tm-track{ flex:1; overflow:hidden; position:relative; min-height:180px; }
.tm-slide{
  position:absolute; inset:0;
  margin:0; opacity:0; transform:translateX(24px);
  transition:opacity .6s var(--f9), transform .6s var(--f9);
  pointer-events:none;
}
.tm-slide.is-active{ opacity:1; transform:translateX(0); pointer-events:auto; }
.tm-slide p{
  font-family:var(--f-display); font-weight:400; font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.7rem); line-height:1.5; color:var(--cream); margin:0 0 24px;
}
.tm-slide cite{ display:block; font-style:normal; font-family:var(--f-data); font-size:.9rem; color:var(--orange); }
.tm-slide cite span{ display:block; color:var(--mute); font-size:.8rem; margin-top:4px; }
.tm-arrow{
  width:46px; height:46px; border:1px solid rgba(245,233,218,.25); border-radius:50%;
  font-size:1.4rem; color:var(--cream); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .4s var(--f9), color .4s var(--f9), transform .4s var(--f9);
}
.tm-arrow:hover{ border-color:var(--orange); color:var(--orange); transform:scale(1.08); }
.tm-dots{ display:flex; justify-content:center; gap:10px; margin-top:36px; }
.tm-dots button{
  width:8px; height:8px; border-radius:50%; background:var(--line);
  transition:background .4s var(--f9), transform .4s var(--f9);
}
.tm-dots button.is-active{ background:var(--orange); transform:scale(1.3); }

/* ============ 6. RODAPÉ ============ */
.footer{ background:var(--ink); padding:120px clamp(20px,6vw,80px) 0; border-top:1px solid var(--line); }
.footer-cta{ text-align:center; max-width:720px; margin:0 auto 100px; }
.footer-cta h2{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.1; margin:0 0 40px; color:var(--white);
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
  padding-bottom:56px; border-bottom:1px solid var(--line);
}
.footer-brand p{ margin:14px 0 0; color:var(--mute); font-size:.9rem; max-width:280px; }
.footer-contact, .footer-nav{ display:flex; flex-direction:column; gap:12px; }
.footer-contact a, .footer-nav a{ color:var(--cream); opacity:.85; font-size:.95rem; transition:opacity .4s var(--f9), color .4s var(--f9); }
.footer-contact a:hover, .footer-nav a:hover{ opacity:1; color:var(--orange); }
.footer-bottom{
  padding:28px 0; text-align:center; color:var(--mute); font-size:.8rem; letter-spacing:.02em;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }

/* ============ WHATSAPP FLUTUANTE ============ */
.whatsapp-float{
  position:fixed; right:28px; bottom:28px; z-index:800;
  width:58px; height:58px; border-radius:50%;
  background:var(--orange); color:var(--black);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(255,106,26,.35);
  transition:transform .45s var(--f9), background .45s var(--f9);
}
.whatsapp-float svg{ width:28px; height:28px; }
.whatsapp-float:hover{ transform:translateY(-4px) scale(1.05); background:var(--cream); }