/* ============================================================
   PULP STUDIOS — FIXES PASS (carregado por último)
   Aplicações cirúrgicas baseadas no feedback:
     1. Vídeos de fundo muito grandes → mais sutis
     2. "PERFORMANCE" gigante → equilibrado com as outras linhas
     3. Sem versão light → tema fixo dark, toggle escondido
     4. VSL com tamanho estranho → container ressanado
   ============================================================ */

/* ============================================
   1. SEM VERSÃO LIGHT — força dark em qualquer estado
   Sobrescreve as variáveis mesmo se [data-theme="light"]
   estiver setado em localStorage.
   ============================================ */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  --bg: #0B0B0B;
  --bg-alt: #151515;
  --bg-alt-2: #1a1a1a;
  --text: #F6F6F6;
  --text-dim: rgba(246, 246, 246, 0.75);
  --border: rgba(246, 246, 246, 0.1);
  --border-strong: rgba(246, 246, 246, 0.2);
  --nav-bg: rgba(11, 11, 11, 0.85);
  --card-bg: #151515;
  --card-bg-hover: #1a1a1a;
  --input-bg: #0B0B0B;
  --grain-opacity: 0.06;
  --grain-blend: overlay;
  --logo-text-fill: #F6F6F6;
  --prazo-gradient: linear-gradient(180deg, #0B0B0B 0%, #151515 100%);
  --resultados-gradient: linear-gradient(180deg, #0B0B0B 0%, #410A0A 100%);
  --faq-gradient: linear-gradient(180deg, #0B0B0B 0%, #151515 100%);
  --featured-gradient: linear-gradient(180deg, #0B0B0B 0%, #410A0A 100%);
  --page-hero-gradient:
    radial-gradient(circle at 80% 30%, rgba(254, 0, 0, 0.12) 0%, transparent 50%),
    #0B0B0B;
  --cta-gradient:
    radial-gradient(circle at 50% 50%, rgba(254, 0, 0, 0.15), transparent 60%),
    #0B0B0B;
  --pulp-full-gradient:
    radial-gradient(circle at 50% 50%, rgba(254, 0, 0, 0.15), transparent 60%),
    #0B0B0B;
  --pulp-full-ghost: rgba(254, 0, 0, 0.04);
  --prazo-ghost: rgba(254, 0, 0, 0.03);
  --filters-bg: rgba(11, 11, 11, 0.9);
  --hero-video-opacity: 0.45;
}

/* Esconde o toggle sol/lua — não tem versão light pra alternar */
.theme-toggle {
  display: none !important;
}

/* ============================================
   2. HERO HEADLINE — PERFORMANCE no tamanho certo
   Antes: clamp(6em, 13.5vw, 14.5em) — gigante demais
   Agora: alinhado às outras palavras, equilibrado
   ============================================ */
.hero-headline {
  font-size: clamp(3.5em, 9vw, 9em) !important;
  line-height: 0.82 !important;
  letter-spacing: var(--tracking-tight) !important;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem) !important;
}

.hero-headline .word {
  font-size: 1em !important;
  letter-spacing: var(--tracking-tight) !important;
}

/* "PERFORMANCE." na mesma proporção das outras —
   o efeito mix-blend-mode difference continua intacto */
.hero-headline .red {
  font-size: 1em !important;
  letter-spacing: var(--tracking-tight) !important;
}

/* ============================================
   3. VÍDEOS DE FUNDO — mais sutis
   ============================================ */

/* Site-bg fixo: vídeo menos saturado + overlay bem mais escuro */
.site-bg video {
  opacity: 0.45 !important;
  filter: saturate(0.95) contrast(1) !important;
}

.site-bg::after {
  background:
    radial-gradient(ellipse at 50% 30%,
      rgba(11, 11, 11, 0.78) 0%,
      rgba(11, 11, 11, 0.96) 75%) !important;
}

/* Hero video do home — menos protagonista, deixa o tipo respirar */
.hero-video {
  opacity: 0.45 !important;
}

/* CTA final vídeo — mesmo tratamento */
.cta-video {
  opacity: 0.4 !important;
}

/* Bento videos — leve dim pra não competir com os números */
.bento-media-card video {
  opacity: 0.85;
}

/* ============================================
   4. VSL — tamanho normalizado
   O problema: full-bleed deixou o headline gigantesco
   acima de um Vimeo player de 1200px centralizado,
   criando uma assimetria visual. Sol: dar à seção
   inteira um max-width sensato pra alinhar título e vídeo.
   ============================================ */
.vsl .container {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.vsl-video-wrap {
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--border-strong) !important;
}

/* Mesma lógica para FAQ, CTA final e Pulp Full —
   seções com conteúdo de texto/CTA respiram melhor
   constrangidas em vez de full-bleed */
.faq .container,
.cta-final .container,
.pulp-full .container,
.metodologia .container {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================
   5. AJUSTE — bento layout no novo container full-bleed
   Em telas largas o grid ficava esticado demais.
   ============================================ */
.bento-section .container,
.positioning .container,
.prazo .container,
.resultados .container,
.sobre-manifesto .container,
.sobre-numeros .container,
.sobre-time .container,
.sobre-valores .container,
.service-detail .container {
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   LOADER — logo original se enchendo de baixo pra cima
   ============================================================ */
.loader {
  background: #0B0B0B !important;
}

.loader-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-logo-anim {
  width: clamp(200px, 30vw, 360px);
  aspect-ratio: 305 / 70;
}

.loader-logo-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Silhueta fraca sempre visível (o "vazio" a ser preenchido) */
.loader-logo-ghost {
  opacity: 0.14;
}

/* O preenchimento é feito via SMIL (<animate> dentro do SVG) p/ máxima
   compatibilidade — nada de animação CSS aqui pra evitar conflito. */

/* Some com qualquer resquício do loader antigo */
.loader-text,
.loader-bar,
.loader-progress {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .loader-logo-ghost { opacity: 0; }
}

/* ============================================================
   MARQUEE DE CLIENTES — versão texto editorial
   ============================================================ */
.marquee-track {
  align-items: center;
  font-family: var(--font-display) !important;
}

.marquee-item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(246, 246, 246, 0.68);
  transition: color 0.3s var(--ease-primary);
  cursor: default;
}

.marquee-item:hover {
  color: var(--red);
}

.marquee-sep {
  color: var(--red);
  font-size: 0.7rem;
  opacity: 0.65;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   FOOTER LOGO — agora usa a logo original
   ============================================================ */
.footer-logo {
  display: flex !important;
  align-items: center;
}

.footer-logo-img {
  width: clamp(150px, 16vw, 215px);
  height: auto;
  display: block;
}

/* ============================================================
   NAV-MENU LOGO — usa a logo original (não o wordmark)
   ============================================================ */
.nav-menu-logo-img {
  width: 132px !important;
  height: 30px !important;
  -webkit-mask: url("pulp-logo-dark.svg") no-repeat center / contain !important;
          mask: url("pulp-logo-dark.svg") no-repeat center / contain !important;
  background: var(--text) !important;
}

/* ============================================================
   MOBILE — corrige scroll horizontal + seção "O que fazemos"
   ============================================================ */

/* 1. Fecha o vazamento de scroll horizontal.
   O body já tinha overflow-x:hidden, mas o <html> não —
   é por onde o scroll escapava. 'clip' não cria container de
   scroll (não quebra o pin do GSAP no desktop); 'hidden' é o
   fallback p/ Safari < 16. */
html {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}
body {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  position: relative;
}

/* 2. Qualquer mídia respeita a largura da tela */
img, video, iframe, svg {
  max-width: 100%;
}

/* 3. Seção "O QUE FAZEMOS" — empilha vertical até 768px.
   O scroll horizontal via GSAP é desligado em <=768px, mas a
   regra antiga de empilhar só agia em <=600px. Resultado: entre
   601–768px os cards ficavam numa fileira cortada ("indo pro
   canto"). Aqui igualamos o CSS ao corte do JS. */
@media (max-width: 768px) {
  .services {
    height: auto !important;
  }
  .services-sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    padding: 4rem 0 3rem !important;
  }
  .services-track {
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 var(--pad-x) !important;
    gap: 1rem !important;
    transform: none !important;   /* limpa translate residual do GSAP ao redimensionar */
  }
  .service-card,
  .service-card.feature,
  .service-card.final {
    width: 100% !important;
    min-height: auto !important;
    padding: 2rem 1.5rem !important;
  }

  /* Hero headline não estoura a largura no celular */
  .hero-headline {
    font-size: clamp(2.6em, 12vw, 5em) !important;
  }
  .hero-headline .word,
  .hero-headline .red {
    font-size: 1em !important;
  }

  /* Grids e containers nunca passam da viewport */
  .container,
  section,
  .bento-grid,
  .numeros-grid,
  .valores-grid,
  .team-grid,
  .services-track {
    max-width: 100% !important;
  }

  /* Marquees: garante que o overflow fica contido */
  .hero-marquee,
  .red-divider {
    max-width: 100vw;
    overflow: hidden;
  }
}

/* 4. Telas bem pequenas: respiro extra */
@media (max-width: 420px) {
  .hero-headline {
    font-size: clamp(2.3em, 13vw, 4em) !important;
  }
  .service-card {
    padding: 1.75rem 1.25rem !important;
  }
}

/* ============================================================
   PAGE-HERO VIDEO — bg de vídeo nos heros das páginas internas
   (serviços / sobre / cases). Fica atrás do conteúdo, com
   overlay escuro p/ manter a leitura do título.
   ============================================================ */
.page-hero {
  isolation: isolate;
}

.page-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-hero-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  filter: saturate(1) contrast(1.02);
}

.page-hero-video-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 75% 35%, rgba(254, 0, 0, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(11, 11, 11, 0.72) 0%, rgba(11, 11, 11, 0.93) 100%);
}

/* Conteúdo e linhas decorativas acima do vídeo */
.page-hero .container,
.page-hero .hero-lines {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .page-hero-video video { display: none; }
}