/* ================================================
   BARRE — styles.css v1.0
   Gabriel Barretto · São Paulo · 2024
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Neue Montreal — licença: pangram-pangram.com */
@font-face { font-family:'Neue Montreal'; src:url('../assets/fonts/NeueMontreal-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Neue Montreal'; src:url('../assets/fonts/NeueMontreal-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Neue Montreal'; src:url('../assets/fonts/NeueMontreal-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Neue Montreal'; src:url('../assets/fonts/NeueMontreal-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Neue Montreal'; src:url('../assets/fonts/NeueMontreal-LightItalic.woff2') format('woff2'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Neue Montreal'; src:url('../assets/fonts/NeueMontreal-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Neue Montreal'; src:url('../assets/fonts/NeueMontreal-MediumItalic.woff2') format('woff2'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Neue Montreal'; src:url('../assets/fonts/NeueMontreal-BoldItalic.woff2') format('woff2'); font-weight:700; font-style:italic; font-display:swap; }

/* ── TOKENS ─────────────────────────────────── */
:root {
  --void:         #080808;
  --coal:         #111111;
  --graphite:     #1A1A1A;
  --ash:          #252525;
  --smoke:        #3A3A3A;
  --chrome-dark:  #6A6A6A;
  --chrome-mid:   #9E9E9E;
  --chrome-light: #D4D4D4;
  --platinum:     #EBEBEB;
  --white:        #FFFFFF;
  --ignition:     #FF1700;
  --ember:        #CC1300;
  --glow:         rgba(255,23,0,0.12);
  --glow-strong:  rgba(255,23,0,0.28);

  --font-display: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Neue Montreal', 'Plus Jakarta Sans', sans-serif;
  --font-mono:    'Neue Montreal', 'Plus Jakarta Sans', sans-serif;

  --nav-h: 72px;
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── RESET ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: transparent;
  color: var(--chrome-mid);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--smoke); }
::-webkit-scrollbar-thumb:hover { background: var(--ignition); }

/* ── LAYOUT ──────────────────────────────────── */
.container { max-width: 1440px; margin: 0 auto; padding: 0 3rem; }
.section { padding: 6rem 0; }
.divider { height: 1px; background: var(--ash); }
.divider-sig {
  height: 2px;
  background: linear-gradient(90deg, var(--void) 0%, var(--smoke) 20%, var(--ignition) 50%, var(--smoke) 80%, var(--void) 100%);
}

/* ── TYPOGRAPHY ──────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.0;
  color: var(--platinum);
  letter-spacing: -0.025em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.eyebrow-line { width: 2rem; height: 1px; background: var(--ignition); flex-shrink: 0; }
.eyebrow-text {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ignition);
}

.tag-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--chrome-dark);
}

/* ── BUTTONS ─────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 0.75rem 1.5rem;
  transition: background 240ms ease, box-shadow 240ms ease, color 240ms ease, border-color 240ms ease, transform 240ms ease;
}
.btn-primary { background: var(--ignition); color: var(--white); }
.btn-primary:hover { background: var(--ember); box-shadow: 0 0 24px var(--glow-strong); }
.btn-ghost { background: transparent; color: var(--ignition); border: 1px solid var(--ignition); }
.btn-ghost:hover { background: var(--ignition); color: var(--white); box-shadow: 0 0 20px var(--glow-strong); }
.btn-secondary { background: transparent; color: var(--chrome-light); border: 1px solid var(--smoke); }
.btn-secondary:hover { border-color: var(--chrome-mid); color: var(--white); }

/* ── NAVIGATION ──────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background 300ms ease, border-color 300ms ease;
}
.nav.scrolled {
  background: var(--void);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--ash);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-text {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--platinum);
  letter-spacing: -0.01em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}
.nav-links a {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--chrome-dark);
  transition: color 150ms ease;
}
.nav-links a:hover { color: var(--platinum); }
.nav-links a.active { color: var(--ignition); }
.nav-right { display: flex; align-items: center; gap: 1.25rem; }

/* Lang toggle */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.lang-toggle .sep { color: var(--ash); margin: 0 2px; }
.lang-btn { color: var(--smoke); padding: 0.25rem 0.25rem; transition: color 150ms ease; font-size: inherit; letter-spacing: inherit; font-family: inherit; }
.lang-btn.active { color: var(--ignition); }
.lang-btn:hover { color: var(--chrome-mid); }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--platinum); transition: all 250ms ease; }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0; bottom: 0;
  background: rgba(8,8,8,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.mobile-menu.open { display: flex; opacity: 1; pointer-events: all; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--chrome-mid);
  transition: color 150ms ease;
}
.mobile-menu a:hover { color: var(--ignition); }
.mobile-lang {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.mobile-lang .lang-btn { font-size: 0.75rem; letter-spacing: 0.1em; padding: 0.5rem; color: var(--smoke); }
.mobile-lang .lang-btn.active { color: var(--ignition); }

/* ── HERO ────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-video-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  background:var(--void);
}
/* iframe do Vimeo escalado pra COBRIR a hero (cover), sem barras */
.hero-video-iframe{
  position:absolute;
  top:50%;left:50%;
  /* garante cobertura: 16:9 esticado pra preencher qualquer proporção da tela */
  width:100vw;
  height:56.25vw;         /* 100vw em 16:9 */
  min-height:100vh;
  min-width:177.78vh;     /* 100vh em 16:9 */
  transform:translate(-50%,-50%);
  border:none;
  pointer-events:none;
}
.hero-video-wrap .video-shield{
  position:absolute;inset:0;z-index:2;background:transparent;pointer-events:auto;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,8,8,0.30) 0%,
    rgba(8,8,8,0.48) 45%,
    rgba(8,8,8,0.82) 82%,
    var(--void) 100%
  );
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.375rem;
  padding: 0 1.5rem;
}
.hero-wordmark {
  width: min(500px, 80vw);
  height: auto;
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 1s var(--ease) 0.2s forwards;
}
.hero-tagline {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--chrome-dark);
  opacity: 0;
  animation: fadeUp 1s var(--ease) 0.45s forwards;
}
.hero-ctas {
  display: flex;
  gap: 0.75rem;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 0.65s forwards;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation: fadeIn 1s ease 1.1s forwards;
}
.hero-scroll-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--smoke);
}
.hero-scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, var(--ignition), transparent);
  transform-origin: top;
  animation: pulse-line 2.2s ease-in-out infinite;
}

/* ── ABOUT ───────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.about-title {
  font-size: clamp(2.5rem, 4vw, 4rem);
  letter-spacing: -0.035em;
  margin-bottom: 1.75rem;
  line-height: 1.0;
}
.about-bio {
  color: var(--chrome-mid);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 0.875rem;
}
.about-bio strong { color: var(--chrome-light); font-weight: 500; }
.about-clients-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--chrome-dark);
  display: block;
  margin-bottom: 0.875rem;
  margin-top: 1.5rem;
}
.client-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.client-tag {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--chrome-dark);
  border: 1px solid var(--ash);
  padding: 0.25rem 0.625rem;
  transition: border-color 200ms ease, color 200ms ease;
}
.client-tag:hover { border-color: var(--smoke); color: var(--chrome-mid); }

.about-right { padding-top: 0.5rem; }
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ash);
  border: 1px solid var(--ash);
  margin-bottom: 2rem;
}
.stat-cell { background: var(--coal); padding: 2rem 1.5rem; }
.stat-num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ignition);
  display: block;
  margin-bottom: 0.375rem;
}
.stat-lbl {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--chrome-dark);
}
.brand-list { display: flex; flex-direction: column; }
.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--graphite);
  transition: border-color 200ms ease;
}
.brand-row:first-child { border-top: 1px solid var(--graphite); }
.brand-row:hover { border-bottom-color: var(--ash); }
.brand-name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--chrome-light);
  letter-spacing: -0.01em;
}
.brand-role {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--chrome-dark);
}

/* ── SERVICES ────────────────────────────────── */
.services-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.services-title {
  font-size: clamp(2.5rem, 4vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1.0;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ash);
  border: 1px solid var(--ash);
}
.service-card {
  background: var(--void);
  padding: 2.5rem;
  position: relative;
  overflow: visible;
  transition: background 260ms ease;
}
.service-card-inner { overflow: hidden; }
.service-icon { margin-bottom: 1.5rem; opacity: 0.2; transition: opacity 260ms ease; }
.service-card:hover .service-icon { opacity: 0.5; }
.service-num {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: var(--ignition);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 0.75rem;
}
.service-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--platinum);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.875rem;
}
.service-desc { font-size: 0.9375rem; color: var(--chrome-dark); line-height: 1.7; }

/* ── WORK HIGHLIGHTS (index) ─────────────────── */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.section-title {
  font-size: clamp(2.5rem, 4vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1.0;
}
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ash);
  border: 1px solid var(--ash);
  margin-bottom: 2.5rem;
}
.project-card {
  background: var(--void);
  overflow: visible;
  cursor: pointer;
  text-decoration: none;
  display: block;
  position: relative;
}
.project-card .project-thumb { border-radius: inherit; position: relative; z-index: 2; }
.project-card .project-info { position: relative; z-index: 2; }
.project-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,var(--ignition),var(--ember),transparent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 500ms var(--ease), opacity 240ms ease;
  z-index: 3;
}
.project-card:hover::before { opacity: 1; transform: scaleX(1); }
/* glow em volta do card via box-shadow (NUNCA vaza pra dentro) */
.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  box-shadow: 0 0 20px 1px rgba(255,23,0,0.15);
  opacity: 0;
  transition: opacity 500ms var(--ease), box-shadow 500ms var(--ease);
  pointer-events: none;
}
.project-card:hover::after { opacity: 1; box-shadow: 0 0 30px 2px rgba(255,23,0,0.22); }
/* elevação + borda que acende */
.project-card {
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -20px rgba(255,23,0,0.28), inset 0 0 0 1px rgba(255,23,0,0.15);
  z-index: 4;
}
.project-info { position: relative; z-index: 2; }
.project-thumb { aspect-ratio: 4/3; overflow: hidden; }
.project-thumb-fill {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 400ms var(--ease);
}
.project-card:hover .project-thumb-fill { transform: scale(1.04); }
.project-thumb-icon { opacity: 0.07; transition: opacity 260ms ease; }
.project-card:hover .project-thumb-icon { opacity: 0.15; }
.project-info { padding: 1.25rem 1.5rem 1.5rem; }
.project-cat {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ignition);
  display: block;
  margin-bottom: 0.375rem;
}
.project-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--platinum);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}
.project-sub { font-family: var(--font-body); font-size: 0.8125rem; color: var(--chrome-dark); }
.work-cta { text-align: center; }

/* ── CONTACT ─────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.contact-title {
  font-size: clamp(2.5rem, 4vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1.0;
  margin-bottom: 1.25rem;
}
.contact-sub {
  font-size: 1rem;
  color: var(--chrome-mid);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 380px;
}
.contact-links { display: flex; flex-direction: column; }
.contact-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--ash);
  text-decoration: none;
  transition: border-bottom-color 200ms ease;
}
.contact-link-row:first-child { border-top: 1px solid var(--ash); }
.contact-link-row:hover { border-bottom-color: var(--ignition); }
.contact-link-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--chrome-dark);
  min-width: 80px;
}
.contact-link-value {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--chrome-light);
  letter-spacing: -0.01em;
  transition: color 200ms ease;
}
.contact-link-row:hover .contact-link-value { color: var(--ignition); }
.contact-arrow { font-size: 0.875rem; color: var(--smoke); transition: transform 200ms ease, color 200ms ease; }
.contact-link-row:hover .contact-arrow { transform: translateX(4px); color: var(--ignition); }
.contact-right { padding-top: 1rem; }
.contact-avail-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ignition);
  display: block;
  margin-bottom: 1rem;
}
.contact-avail-text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 700;
  color: var(--platinum);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* ── FOOTER ──────────────────────────────────── */
footer { border-top: 1px solid var(--ash); padding: 2rem 0; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.footer-logo-text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--platinum);
  letter-spacing: -0.01em;
}
.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--smoke);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.footer-social { display: flex; gap: 1.25rem; }
.footer-social a {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--chrome-dark);
  transition: color 150ms ease;
}
.footer-social a:hover { color: var(--ignition); }

/* ── WORK PAGE ───────────────────────────────── */
.work-hero {
  padding-top: calc(var(--nav-h) + 0.4rem);
  padding-bottom: 0;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
/* área dos trabalhos sobe pra colar no letreiro; a correntinha do vídeo
   fica por cima (o vídeo tem z-index maior e não bloqueia cliques) */
.work-filters-wrap, .work-grid {
  position: relative;
  z-index: 1;
}
.work-hero-title {
  font-size: clamp(4rem, 10vw, 8.5rem);
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: var(--platinum);
  margin-bottom: 1.25rem;
}
/* título de texto escondido visualmente (mantido pra acessibilidade/SEO) */
.work-hero-title--hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
/* letreiro 3D (vídeo) — usa alpha nativo (WebM no Chrome, HEVC no Safari).
   O wrapper corta o espaço vazio do render, sem precisar reencodar. */
.work-hero-media{
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  aspect-ratio: 2560 / 1033;   /* só a faixa útil do render */
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.work-hero-video {
  position: absolute;
  top: -30.7%;                 /* sobe pra cortar o vazio do topo */
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}
/* puxa os filtros pra cima, sobrepondo a parte de baixo do vídeo (a corrente fica por cima) */
.work-filters-wrap {
  margin-top: -7%;
}
.work-hero-sub {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--chrome-dark);
}
.work-filters-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  border-top: 1px solid var(--ash);
  border-bottom: 1px solid var(--ash);
  margin-bottom: 2.5rem;
}
.filter-btn {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--chrome-dark);
  border: 1px solid var(--ash);
  padding: 0.375rem 0.875rem;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
  background: transparent;
}
.filter-btn:hover { border-color: var(--smoke); color: var(--chrome-mid); }
.filter-btn.active { border-color: var(--ignition); color: var(--ignition); }
.work-grid {
  display: grid;
  margin-bottom: 4rem;
}
.work-item {
  background: #050505;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  display: block;
  position: relative;
  transition: background 260ms ease, box-shadow 400ms var(--ease);
  z-index: 1;
}
.work-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,var(--ignition),var(--ember),transparent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: opacity 200ms ease, transform 500ms var(--ease);
  z-index: 2;
}
.work-item:hover::before { opacity: 1; transform: scaleX(1); }
.work-item:hover { background: #050505; box-shadow: 0 0 25px 2px rgba(255,23,0,0.18); }
.work-thumb { aspect-ratio: 16/10; overflow: hidden; }
.work-thumb-fill {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 400ms var(--ease);
}
.work-item:hover .work-thumb-fill { transform: scale(1.04); }
.work-thumb-icon { opacity: 0.06; transition: opacity 260ms ease; }
.work-item:hover .work-thumb-icon { opacity: 0.14; }
.work-info { padding: 1rem 1.25rem 1.375rem; }
.work-cat {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ignition);
  display: block;
  margin-bottom: 0.25rem;
}
.work-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--platinum);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.work-year {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--smoke);
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
  display: block;
}
.work-item.hidden { display: none; }

/* ── ANIMATIONS ──────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse-line {
  0%,100% { opacity: 0.9; transform: scaleY(1); transform-origin: top; }
  50% { opacity: 0.3; transform: scaleY(0.5); transform-origin: top; }
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 650ms var(--ease), transform 650ms var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 80ms; }
.reveal-d2 { transition-delay: 160ms; }
.reveal-d3 { transition-delay: 240ms; }
.reveal-d4 { transition-delay: 320ms; }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 1024px) {
  .highlights-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { gap: 3rem; }
  .contact-grid { gap: 3rem; }
}

@media (max-width: 768px) {
  :root { --nav-h: 60px; }
  .section { padding: 4rem 0; }
  .container { padding: 0 1.25rem; }
  .nav-links, .nav-right .btn { display: none; }
  .hamburger { display: flex; }
  .nav-right { gap: 0.75rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .highlights-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .hero-wordmark { width: min(320px, 78vw); }
  .hero-ctas { flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  /* animation-iteration-count:1 é ESSENCIAL: sem ele, animações "infinite"
     com duração 0.01ms viram um estroboscópio (piscam milhares de vezes
     por segundo) em vez de simplesmente parar.
     As animações decorativas contínuas (estrela, risco, marquee) NÃO são
     afetadas por este bloco: elas rodam via JavaScript, com valores
     próprios, justamente pra funcionarem igual em qualquer aparelho. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-wordmark, .hero-tagline, .hero-ctas { opacity: 1; transform: none; }
  .hero-scroll { opacity: 1; }
  .reveal { opacity: 1; transform: none; }
}


/* ── MARQUEE ─────────────────────────────────── */
.marquee-section{border-top:1px solid var(--ash);border-bottom:1px solid var(--ash);padding:1rem 0;overflow:hidden;background:var(--void);margin-top:4rem;min-height:120px;display:flex;align-items:center;}
.marquee-track{display:flex;width:max-content;}
/* marquee roda contínuo, sem pausar no hover */
.marquee-item{font-family:var(--font-display);font-size:.8125rem;font-weight:500;color:var(--chrome-dark);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;flex-shrink:0;padding:0 1.5rem;transition:color 200ms ease;}
.marquee-item:hover{color:var(--platinum);}
.marquee-sep{color:var(--ignition);font-size:.5rem;display:inline-flex;align-items:center;flex-shrink:0;align-self:center;}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(var(--marquee-shift,-50%))}}
/* ── ABOUT TWEAKS ────────────────────────────── */
.about-bio+.about-bio{margin-top:1rem;}
.about-brands-header{font-family:var(--font-mono);font-size:.5625rem;text-transform:uppercase;letter-spacing:.15em;color:var(--chrome-dark);display:block;margin-bottom:1rem;}


/* ── PROJECT PAGE ────────────────────────────────── */
.proj-hero{width:100%;position:relative;overflow:hidden;}
.proj-hero-img{height:42vh;display:flex;align-items:center;justify-content:center;background:var(--graphite);}
.proj-hero-img img{width:100%;height:100%;object-fit:cover;display:block;}
.proj-hero-video{height:42vh;position:relative;background:var(--void);}
.proj-hero-video iframe,.proj-hero-video video{position:absolute;inset:0;width:100%;height:100%;border:none;object-fit:cover;}
.proj-hero-placeholder{height:55vh;display:flex;align-items:center;justify-content:center;}
.proj-page-header{border-bottom:1px solid var(--ash);padding:1.25rem 0;position:sticky;top:var(--nav-h);background:rgba(8,8,8,.95);backdrop-filter:blur(12px);z-index:5;}
.proj-page-breadcrumb{display:flex;align-items:center;gap:.75rem;}
.breadcrumb-back{font-family:var(--font-display);font-size:.75rem;font-weight:500;color:var(--chrome-dark);text-decoration:none;transition:color 150ms ease;}
.breadcrumb-back:hover{color:var(--ignition);}
.breadcrumb-sep{color:var(--ash);}
.breadcrumb-cat{font-family:var(--font-mono);font-size:.5625rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ignition);}
.proj-page-body{display:grid;grid-template-columns:1fr 300px;gap:4rem;align-items:start;padding:4rem 0;}
.proj-page-title{font-size:clamp(2.5rem,5vw,5rem);font-weight:700;letter-spacing:-.035em;color:var(--platinum);line-height:.95;margin-bottom:2rem;}
.proj-page-desc{font-size:1rem;color:var(--chrome-mid);line-height:1.8;}
.proj-meta{border:1px solid var(--ash);margin-bottom:1.5rem;}
.meta-row{display:flex;flex-direction:column;padding:.875rem 1rem;border-bottom:1px solid var(--graphite);}
.meta-row:last-child{border-bottom:none;}
.meta-label{font-family:var(--font-mono);font-size:.5rem;text-transform:uppercase;letter-spacing:.12em;color:var(--chrome-dark);margin-bottom:.25rem;}
.meta-val{font-family:var(--font-display);font-size:.875rem;font-weight:500;color:var(--chrome-light);}
.proj-external-link{display:flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-mono);font-size:.5625rem;text-transform:uppercase;letter-spacing:.1em;color:var(--chrome-dark);text-decoration:none;border:1px solid var(--ash);padding:.625rem 1rem;transition:all 200ms ease;margin-top:.625rem;}
.proj-external-link:hover{border-color:var(--smoke);color:var(--chrome-mid);}
.proj-media-grid{padding-bottom:5rem;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ash);}
.proj-media-grid:empty{display:none;}
.media-item{background:var(--coal);overflow:hidden;}
.media-item.media-img img{width:100%;display:block;}
.media-item.media-embed{position:relative;padding-bottom:56.25%;}
.media-item.media-embed iframe,.media-item.media-embed video{position:absolute;inset:0;width:100%;height:100%;border:none;}
.media-item:nth-child(3n+1){grid-column:1/-1;}
.media-caption{font-family:var(--font-mono);font-size:.5rem;text-transform:uppercase;letter-spacing:.1em;color:var(--chrome-dark);padding:.625rem 1rem;}
.proj-nav{border-top:1px solid var(--ash);padding:3rem 0;}
.proj-nav-inner{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;}
.proj-nav-item{display:flex;flex-direction:column;gap:.25rem;text-decoration:none;}
.proj-nav-prev{align-items:flex-start;}
.proj-nav-next{align-items:flex-end;text-align:right;}
.proj-nav-label{font-family:var(--font-mono);font-size:.5rem;text-transform:uppercase;letter-spacing:.12em;color:var(--chrome-dark);transition:color 200ms ease;}
.proj-nav-item:hover .proj-nav-label{color:var(--ignition);}
.proj-nav-name{font-family:var(--font-display);font-size:.9375rem;font-weight:700;color:var(--platinum);letter-spacing:-.01em;}
.proj-nav-center{font-family:var(--font-mono);font-size:.5625rem;text-transform:uppercase;letter-spacing:.12em;color:var(--chrome-dark);text-decoration:none;white-space:nowrap;transition:color 150ms ease;}
.proj-nav-center:hover{color:var(--ignition);}
/* Admin media */
.media-add-bar{display:flex;gap:.375rem;margin-bottom:.625rem;}
.media-add-btn2{flex-shrink:0;background:var(--graphite);border:1px solid var(--ash);color:var(--chrome-mid);font-size:.5625rem;text-transform:uppercase;letter-spacing:.08em;padding:.4375rem .75rem;cursor:pointer;transition:all 150ms ease;white-space:nowrap;font-family:var(--font);}
.media-add-btn2:hover{border-color:var(--ignition);color:var(--ignition);}
.media-url-inp2{flex:1;min-width:0;background:var(--graphite);border:1px solid var(--ash);color:var(--chrome-light);font-size:12px;padding:.4375rem .625rem;outline:none;transition:border-color 180ms ease;font-family:var(--font);}
.media-url-inp2:focus{border-color:var(--ignition);}
.media-url-inp2::placeholder{color:var(--smoke);}
.m-list-item{display:flex;align-items:center;gap:.5rem;background:var(--graphite);border:1px solid var(--ash);margin-bottom:2px;padding:.3125rem .5rem;}
.m-list-thumb{width:40px;height:30px;flex-shrink:0;background:var(--ash);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.m-list-thumb img{width:100%;height:100%;object-fit:cover;}
.m-list-icon{font-size:.625rem;color:var(--smoke);}
.m-list-info{flex:1;min-width:0;}
.m-list-type{font-family:var(--mono);font-size:.4375rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ignition);display:block;}
.m-list-src{font-size:.6875rem;color:var(--chrome-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.m-list-rm{flex-shrink:0;background:none;border:none;color:var(--smoke);cursor:pointer;font-size:.625rem;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:color 150ms ease;}
.m-list-rm:hover{color:var(--ember);}
@media(max-width:768px){
  .proj-page-body{grid-template-columns:1fr;gap:2.5rem;}
  .proj-hero-img,.proj-hero-video{height:50vw;min-height:220px;}
  .proj-media-grid{grid-template-columns:1fr;}
  .media-item:nth-child(3n+1){grid-column:auto;}
  .proj-nav-inner{grid-template-columns:1fr 1fr;}
  .proj-nav-center{display:none;}
}

/* ════════════════════════════════════════════════
   PÁGINA DE PROJETO INDIVIDUAL
   ════════════════════════════════════════════════ */

/* Loading */
.proj-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;}
.proj-loading-spin{width:32px;height:32px;border:2px solid var(--ash);border-top-color:var(--ignition);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.proj-notfound{min-height:100vh;}

/* Hero */
.proj-hero{position:relative;min-height:42vh;max-height:520px;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:2rem;}
.proj-hero-media{position:absolute;inset:0;z-index:0;}
.proj-hero-media.has-video{pointer-events:none;}
.proj-hero-img{width:100%;height:100%;object-fit:cover;}
.proj-hero-gradient{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.proj-hero-media .video-embed{position:absolute;inset:0;width:100%;height:100%;}
.proj-hero-media .video-embed iframe{width:100%;height:100%;}
.proj-hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(8,8,8,0.35) 0%,rgba(8,8,8,0.55) 55%,rgba(8,8,8,0.92) 100%);}
.proj-hero .container{position:relative;z-index:2;width:100%;}
.proj-hero-inner{max-width:800px;}
.proj-back{display:inline-block;font-family:var(--font-mono);font-size:.625rem;text-transform:uppercase;letter-spacing:.12em;color:var(--chrome-mid);margin-bottom:1.5rem;transition:color 200ms ease;}
.proj-back:hover{color:var(--ignition);}
.proj-hero-cat{display:block;font-family:var(--font-mono);font-size:.625rem;text-transform:uppercase;letter-spacing:.15em;color:var(--ignition);margin-bottom:1rem;}
.proj-hero-title{font-family:var(--font-display);font-size:clamp(2rem,5vw,4rem);font-weight:700;color:var(--platinum);letter-spacing:-0.035em;line-height:0.95;margin-bottom:0.5rem;}
.proj-hero-sub{font-family:var(--font-body);font-size:1.125rem;color:var(--chrome-mid);max-width:600px;}

/* Body: descrição + créditos */
.proj-body-section{border-bottom:1px solid var(--ash);}

.proj-desc-text{margin-top:1.5rem;}
.proj-desc-text p{font-family:var(--font-body);font-size:0.9375rem;line-height:1.5;color:var(--chrome-mid);margin-bottom:0.75rem;}
.proj-desc-text p:last-child{margin-bottom:0;}

.proj-credits{background:var(--coal);border:1px solid var(--ash);padding:2rem;position:sticky;top:calc(var(--nav-h) + 2rem);}
.proj-credits-header{font-family:var(--font-mono);font-size:.5625rem;text-transform:uppercase;letter-spacing:.15em;color:var(--ignition);display:block;margin-bottom:1.5rem;}
.proj-credits-list{display:flex;flex-direction:column;}
.proj-credit-row{display:flex;flex-direction:column;gap:.25rem;padding:.875rem 0;border-bottom:1px solid var(--graphite);}
.proj-credit-row:first-child{padding-top:0;}
.proj-credit-row:last-child{border-bottom:none;}
.proj-credit-label{font-family:var(--font-mono);font-size:.5rem;text-transform:uppercase;letter-spacing:.12em;color:var(--chrome-dark);}
.proj-credit-value{font-family:var(--font-display);font-size:.9375rem;font-weight:500;color:var(--chrome-light);letter-spacing:-0.01em;}

/* Galeria */
.proj-gallery-section{padding:5rem 0;border-bottom:1px solid var(--ash);}
/* ── MOSAICO DE IMAGENS — padrão varia pela quantidade ── */
.proj-gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;background:transparent;border:none;grid-auto-flow:dense;margin-top:.5rem;}
.proj-gallery .gallery-item{overflow:hidden;cursor:pointer;background:var(--void);position:relative;grid-column:span 3;aspect-ratio:4/3;}
.proj-gallery .gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 500ms var(--ease);}
.proj-gallery .gallery-item:hover img{transform:scale(1.04);}

/* Override manual via classe (admin escolhe): grande, largo, alto, normal */
.proj-gallery .gallery-item.m-big{grid-column:span 4;aspect-ratio:16/10;}
.proj-gallery .gallery-item.m-wide{grid-column:span 6;aspect-ratio:21/9;}
.proj-gallery .gallery-item.m-tall{grid-column:span 2;aspect-ratio:3/4;}
.proj-gallery .gallery-item.m-normal{grid-column:span 3;aspect-ratio:4/3;}
.proj-gallery .gallery-item.m-half{grid-column:span 3;aspect-ratio:4/3;}

/* ── PADRÕES AUTOMÁTICOS por quantidade (quando não há override) ── */
/* 1 imagem: ocupa tudo, cinematográfica */
.proj-gallery[data-count="1"] .gallery-item:not([class*="m-"]){grid-column:span 6;aspect-ratio:21/9;}
/* 2 imagens: lado a lado */
.proj-gallery[data-count="2"] .gallery-item:not([class*="m-"]){grid-column:span 3;aspect-ratio:4/3;}
/* 3 imagens: uma grande + duas menores */
.proj-gallery[data-count="3"] .gallery-item:not([class*="m-"]):nth-child(1){grid-column:span 6;aspect-ratio:21/9;}
.proj-gallery[data-count="3"] .gallery-item:not([class*="m-"]):nth-child(2),
.proj-gallery[data-count="3"] .gallery-item:not([class*="m-"]):nth-child(3){grid-column:span 3;aspect-ratio:4/3;}
/* 4 imagens: grid 2x2 uniforme, mas 1a e 4a maiores */
.proj-gallery[data-count="4"] .gallery-item:not([class*="m-"]){grid-column:span 3;aspect-ratio:4/3;}
/* 5+ imagens: ritmo alternado — grande, 2 médias, grande, ... */
.proj-gallery[data-count="5"] .gallery-item:not([class*="m-"]):nth-child(3n+1){grid-column:span 4;aspect-ratio:16/10;}
.proj-gallery[data-count="5"] .gallery-item:not([class*="m-"]):nth-child(3n+2),
.proj-gallery[data-count="5"] .gallery-item:not([class*="m-"]):nth-child(3n+3){grid-column:span 2;aspect-ratio:1/1;}
.proj-gallery[data-count="many"] .gallery-item:not([class*="m-"]):nth-child(5n+1){grid-column:span 4;aspect-ratio:16/9;}
.proj-gallery[data-count="many"] .gallery-item:not([class*="m-"]):nth-child(5n+2),
.proj-gallery[data-count="many"] .gallery-item:not([class*="m-"]):nth-child(5n+3){grid-column:span 2;aspect-ratio:1/1;}
.proj-gallery[data-count="many"] .gallery-item:not([class*="m-"]):nth-child(5n+4){grid-column:span 3;aspect-ratio:4/3;}
.proj-gallery[data-count="many"] .gallery-item:not([class*="m-"]):nth-child(5n+5){grid-column:span 3;aspect-ratio:4/3;}

/* MOBILE: empilhado, um embaixo do outro */
@media(max-width:768px){
  .proj-gallery{grid-template-columns:1fr;gap:8px;}
  .proj-gallery .gallery-item,
  .proj-gallery .gallery-item[class*="m-"],
  .proj-gallery[data-count] .gallery-item{grid-column:span 1 !important;aspect-ratio:4/3 !important;}
}
.gallery-item{width:100%;overflow:hidden;cursor:pointer;background:var(--void);position:relative;}
.gallery-item img{width:100%;height:auto;display:block;object-fit:contain;transition:transform 400ms var(--ease);}
.gallery-item:hover img{transform:scale(1.03);}
.gallery-item::after{content:'⤢';position:absolute;top:1rem;right:1rem;color:var(--platinum);font-size:1rem;opacity:0;transition:opacity 200ms ease;text-shadow:0 1px 4px rgba(0,0,0,.6);}
.gallery-item:hover::after{opacity:1;}

/* Vídeos */
.proj-videos-section{padding:5rem 0;border-bottom:1px solid var(--ash);}
.proj-videos{display:flex;flex-direction:column;gap:2rem;}
.video-embed{position:relative;width:100%;aspect-ratio:16/9;background:var(--coal);border:1px solid var(--ash);overflow:hidden;}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}

/* Next / CTA */
.proj-next-section{padding:5rem 0;}
.proj-next-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.proj-next-label{font-family:var(--font-mono);font-size:.5625rem;text-transform:uppercase;letter-spacing:.15em;color:var(--ignition);display:block;margin-bottom:.75rem;}
.proj-next-title{font-family:var(--font-display);font-size:clamp(1.75rem,3.5vw,3rem);font-weight:700;color:var(--platinum);letter-spacing:-0.03em;line-height:1;}
.proj-next-ctas{display:flex;gap:.75rem;flex-wrap:wrap;}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(8,8,8,0.95);z-index:300;display:none;align-items:center;justify-content:center;padding:2rem;cursor:zoom-out;}
.lightbox.open{display:flex;animation:fadeIn .2s ease;}
.lightbox img{max-width:100%;max-height:90vh;object-fit:contain;}
.lightbox-close{position:absolute;top:1.5rem;right:1.5rem;background:none;border:none;color:var(--chrome-mid);font-size:1.5rem;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;transition:color 150ms ease;}
.lightbox-close:hover{color:var(--ignition);}

@media(max-width:768px){
  .proj-body-grid{grid-template-columns:1fr;gap:2.5rem;}
  .proj-credits{position:static;}

  .proj-hero{min-height:38vh;}
  .proj-next-inner{flex-direction:column;align-items:flex-start;}
}

/* ════════════════════════════════════════════════
   V2 UPDATES — nav wordmark, services, highlights, contact, marquee logos
   ════════════════════════════════════════════════ */

/* Nav: wordmark SVG no lugar do texto */
.nav-wordmark{height:30px;width:auto;display:block;}
.nav-logo{display:inline-flex;align-items:center;}
.nav-wordmark path[fill="#EBEBEB"]{transition:fill 200ms ease;}
.footer-wordmark{height:18px;width:auto;display:block;}

/* ── MARQUEE COM LOGOS ──────────────────────────── */
.marquee-section{padding:2.5rem 0;margin-top:4rem;}
.marquee-track{align-items:center;}
.marquee-track.marquee-ready{animation:marquee var(--marquee-duration,40s) linear infinite;}
.marquee-group{display:flex;align-items:center;flex-shrink:0;}
.marquee-slot{display:inline-flex;align-items:center;justify-content:center;width:200px;flex-shrink:0;overflow:visible;}
@media(max-width:768px){.marquee-slot{width:130px;}.marquee-logo{height:36px;max-width:110px;}}
.marquee-logo{height:48px;width:auto;max-width:170px;flex-shrink:0;object-fit:contain;opacity:.85;transition:opacity 250ms ease;transform-origin:center;}
.marquee-logo:hover{opacity:1;}
.marquee-logo-text{font-family:var(--font-display);font-size:1.125rem;font-weight:600;color:var(--chrome-dark);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;flex-shrink:0;transition:color 250ms ease;}
.marquee-logo-text:hover{color:var(--platinum);}

/* ── SERVIÇOS MAIORES COM IMAGEM + LINK ─────────── */
.services-grid{grid-template-columns:repeat(2,1fr);}
.service-card{display:block;text-decoration:none;padding:0;overflow:hidden;min-height:340px;position:relative;}
.service-card-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.service-card-media img{width:100%;height:100%;object-fit:cover;opacity:.28;transition:opacity 400ms var(--ease),transform 500ms var(--ease);}
.service-card-media-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.service-card:hover .service-card-media img{opacity:.42;transform:scale(1.05);}
.service-card-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(17,17,17,0.96) 10%,rgba(17,17,17,0.72) 45%,rgba(17,17,17,0.5) 100%);}
.service-card-inner{position:relative;z-index:2;padding:2.5rem;display:flex;flex-direction:column;height:100%;min-height:340px;}
.service-card-inner .service-icon{opacity:1;margin-bottom:auto;}
.service-num{font-family:var(--font-mono);font-size:.5625rem;color:var(--ignition);text-transform:uppercase;letter-spacing:.12em;display:block;margin-bottom:.75rem;}
.service-title{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--platinum);letter-spacing:-.025em;line-height:1;margin-bottom:1rem;}
.service-desc{font-size:.9375rem;color:var(--chrome-mid);line-height:1.65;max-width:340px;}
.service-arrow{margin-top:1.5rem;font-family:var(--font-mono);font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;color:var(--chrome-dark);display:inline-flex;align-items:center;gap:.5rem;transition:color 200ms ease,gap 200ms ease;}
.service-card:hover .service-arrow{color:var(--ignition);gap:.85rem;}

/* ── HIGHLIGHTS HORIZONTAL FULL-WIDTH ───────────── */
.highlights-grid{grid-template-columns:repeat(3,1fr);}
@media(min-width:1100px){.highlights-grid{grid-template-columns:repeat(3,1fr);}}
.project-card{position:relative;}
.project-thumb{aspect-ratio:16/9;}

/* ── ABOUT: espaço pra foto ─────────────────────── */
.about-photo{width:100%;aspect-ratio:4/5;overflow:visible;position:relative;display:flex;align-items:flex-end;justify-content:center;}
.about-photo img{width:100%;height:auto;max-height:100%;object-fit:contain;display:block;}
.about-photo-placeholder{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;padding:2rem;}
.about-photo-placeholder svg{opacity:.12;}
.about-photo-ph-text{font-family:var(--font-mono);font-size:.5rem;text-transform:uppercase;letter-spacing:.12em;color:var(--smoke);line-height:1.8;}

/* ── CONTATO COM MAIS DESTAQUE + 3D ─────────────── */
.contact-section-v2{border-top:1px solid var(--ash);position:relative;overflow:hidden;}
.contact-grid{grid-template-columns:1.3fr 1fr;gap:4rem;align-items:center;}
.contact-title{font-size:clamp(3rem,6vw,5.5rem);letter-spacing:-.04em;line-height:.92;margin-bottom:1.5rem;}
.contact-sub{font-size:1.125rem;max-width:620px;margin-bottom:3rem;}
.contact-link-value{font-size:1.0625rem;}
.contact-link-row{padding:1.375rem 0;}
.contact-3d-space{position:relative;width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;}
.contact-3d-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;border:1px dashed var(--ash);text-align:center;padding:2rem;}
.contact-3d-placeholder svg{opacity:.1;}
.contact-3d-ph-text{font-family:var(--font-mono);font-size:.5rem;text-transform:uppercase;letter-spacing:.12em;color:var(--smoke);line-height:1.8;}

/* ── HERO 3D LAYER ──────────────────────────────── */
.hero-3d-layer{position:absolute;inset:0;z-index:2;pointer-events:none;}
.hero-3d-layer iframe,.hero-3d-layer canvas,.hero-3d-layer spline-viewer{width:100%;height:100%;display:block;}
.hero-content{z-index:3;}
.hero-scroll{z-index:3;}

@media(max-width:900px){
  .services-grid{grid-template-columns:1fr;}
  .highlights-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;gap:2.5rem;}
  .contact-3d-space{aspect-ratio:16/10;max-width:400px;}
}
@media(max-width:560px){
  .highlights-grid{grid-template-columns:1fr;}
}

/* About v3 — foco pessoal, foto PNG sem borda */
.about-grid{grid-template-columns:1.1fr 1fr;align-items:start;gap:3.5rem;}
.about-text-col{max-width:640px;}
.about-photo-col{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;height:100%;}
.about-photo-placeholder{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;padding:3rem 2rem;border:1px dashed var(--ash);width:100%;aspect-ratio:4/5;justify-content:center;}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;}.about-photo{aspect-ratio:16/10;max-width:340px;margin:0 auto;}}

/* Contato v3 — 3D full-bleed sem borda, sangrando até a beira */
.contact-section-v2{position:relative;overflow:hidden;}
.contact-3d-fullbleed{position:absolute;top:0;right:0;bottom:0;width:46%;z-index:0;pointer-events:none;display:flex;align-items:center;justify-content:flex-end;padding-right:2%;}
.contact-3d-fullbleed spline-viewer,.contact-3d-fullbleed iframe,.contact-3d-fullbleed canvas{width:100%;height:100%;display:block;}
.contact-3d-ph{display:flex;flex-direction:column;align-items:center;gap:1rem;opacity:.5;}
.contact-3d-ph svg{opacity:.12;}
.contact-3d-ph-text{font-family:var(--font-mono);font-size:.5rem;text-transform:uppercase;letter-spacing:.12em;color:var(--smoke);}
.contact-section-v2 .container{position:relative;z-index:1;}
.contact-grid{grid-template-columns:1fr;}
.contact-info-col{max-width:820px;}
@media(max-width:900px){
  .contact-3d-fullbleed{position:relative;width:100%;height:280px;margin-top:2rem;}
  .contact-section-v2 .container{display:flex;flex-direction:column;}
}

/* ════════════════════════════════════════════════
   PÁGINA DE PROJETO — CASE DUPLO (2 fases)
   ════════════════════════════════════════════════ */
#proj-dual{border-top:1px solid var(--ash);}
.phase-section{padding:2.25rem 0;border-bottom:1px solid var(--ash);position:relative;}
.phase-section:nth-child(even){background:var(--coal);}
.phase-marker{display:flex;align-items:baseline;gap:1.25rem;margin-bottom:1.25rem;}
.phase-marker-num{font-family:var(--font-mono);font-size:.625rem;text-transform:uppercase;letter-spacing:.15em;color:var(--ignition);white-space:nowrap;}
.phase-marker-title{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;color:var(--platinum);letter-spacing:-.03em;line-height:1;}
.phase-desc{max-width:none;margin-bottom:1.5rem;}
.phase-desc p{font-family:var(--font-body);font-size:0.9375rem;line-height:1.5;color:var(--chrome-mid);margin-bottom:0.75rem;}
.phase-desc p:last-child{margin-bottom:0;}
.phase-gallery{margin-bottom:2rem;}
.phase-gallery:last-child{margin-bottom:0;}
.phase-videos{display:flex;flex-direction:column;gap:2rem;}

/* Foto do Sobre — modo "quadro" com fundo próprio (Imagem 7 tribal) */
.about-photo-framed{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--ash);align-items:stretch;}
.about-photo-framed img{width:100%;height:100%;object-fit:cover;object-position:center;filter:contrast(1.02) saturate(1.05);}
@media(max-width:900px){.about-photo-framed{aspect-ratio:4/5;max-width:460px;margin:0 auto;}}

/* Ícone 3D do contato (imagem PNG sem fundo) */
.contact-3d-img{width:100%;height:100%;object-fit:contain;object-position:center;max-height:760px;animation:float3d 6s ease-in-out infinite;filter:drop-shadow(0 20px 60px rgba(255,23,0,0.25));will-change:transform;backface-visibility:hidden;}
@keyframes float3d{0%,100%{transform:translate3d(0,0,0) rotate(0deg);}50%{transform:translate3d(0,-16px,0) rotate(3deg);}}
/* no mobile (sobretudo iOS) o drop-shadow animado trava a animação: tira o filtro */
@media(max-width:900px){.contact-3d-img{max-height:300px;filter:none;}}

/* ══ ESCALA EM TELAS GRANDES (monitores 2K/4K/ultrawide) ══
   Os labels pequenos (tagline, eyebrows, mono) ficavam minúsculos
   em telas muito grandes. Aqui eles crescem proporcionalmente. */
@media(min-width:1920px){
  html{font-size:18px;}  /* base 16->18, tudo em rem cresce junto */
}
@media(min-width:2560px){
  html{font-size:21px;}
}
@media(min-width:3440px){
  html{font-size:24px;}
}

/* ════════════════════════════════════════════════
   HERO PARALLAX — reel + wordmark cromado + grade
   ════════════════════════════════════════════════ */
.hero-parallax{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;}

/* wordmark cromado — grande, centralizado */
.hero-barre{width:min(78vw,1100px);transform:translate(-50%,-50%);z-index:2;filter:drop-shadow(0 30px 80px rgba(0,0,0,0.55));}
/* grade — cobre a tela toda, na frente */
.hero-fence{width:130%;min-width:1600px;transform:translate(-50%,-50%);z-index:3;opacity:0.7;}
/* conteúdo (tagline + botões) fica na frente de tudo */
.hero-content{position:relative;z-index:4;}
.hero .hero-overlay{z-index:1;}
.hero-video-wrap{z-index:0;}

@media(max-width:768px){
  .hero-barre{width:92vw;}
  .hero-fence{width:230%;min-width:0;opacity:0.6;}
}

/* Modos de cor dos logos na faixa */
.marquee-logo.logo-fx-color{filter:none;}
.marquee-logo.logo-fx-bw{filter:grayscale(1);}
.marquee-logo.logo-fx-white{filter:brightness(0) invert(1);}

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

/* Wordmark cromado do hero (imagem) — mesmo tamanho/posição do SVG antigo */
.hero-wordmark-img{width:min(500px,80vw);height:auto;display:block;margin:0 auto;will-change:transform;transition:transform 0.2s cubic-bezier(0.16,1,0.3,1);filter:drop-shadow(0 20px 50px rgba(0,0,0,0.5));opacity:0;animation:fadeInOnly 1s var(--ease) 0.2s forwards;}
@media(max-width:768px){.hero-wordmark-img{width:min(340px,82vw);}}
/* logo animado (WebM com alpha) — mesmo tratamento do PNG */
.hero-wordmark-video{width:min(560px,84vw);height:auto;display:block;margin:0 auto;will-change:transform;transition:transform 0.2s cubic-bezier(0.16,1,0.3,1);opacity:0;animation:fadeInOnly 1s var(--ease) 0.2s forwards;background:transparent;}
@media(max-width:768px){.hero-wordmark-video{width:min(380px,86vw);}}
@keyframes fadeInOnly{from{opacity:0;}to{opacity:1;}}

/* ════════════════════════════════════════════════
   TEXTURA DE FUNDO GLOBAL — grão + glow vermelho
   (reage ao scroll via --scroll, setado no JS)
   ════════════════════════════════════════════════ */
body{position:relative;}

/* Glow vermelho de fundo — REMOVIDO (só o grão fica) */

/* Grão de filme — textura mais forte */
/* ════════════════════════════════════════════════
   TEXTURA — no fundo, atrás de TUDO. Bem sutil.
   ════════════════════════════════════════════════ */
/* fundo base fixo com grão + halftone, atrás de todo o conteúdo */
body::after{
  content:'';
  position:fixed;
  top:-50px;left:-50px;right:-50px;bottom:-50px;
  z-index:-2;
  pointer-events:none;
  opacity:0.35;
  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='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.13  0 0 0 0 0.13  0 0 0 0 0.13  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:200px 200px;
  animation:grainShift 0.6s steps(2) infinite;
  will-change:transform;
}
@keyframes grainShift{
  0%{transform:translate(0,0);}
  25%{transform:translate(-3px,2px);}
  50%{transform:translate(2px,-3px);}
  75%{transform:translate(-2px,-2px);}
  100%{transform:translate(0,0);}
}

/* Camada 2 — HALFTONE bem sutil, também no fundo */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:0.25;
  background-image:radial-gradient(circle at center, #1a1a1a 30%, transparent 31%);
  background-size:5px 5px;
}
/* o body precisa de fundo preto pra textura aparecer atrás */
html{background:var(--void);}

/* No mobile (sobretudo iOS) animar essa camada fixa de tela cheia derruba o
   frame rate e faz TODAS as outras animações engasgarem (estrela, risco do
   scroll, etc). A textura continua visível, só para de tremer. */
@media(max-width:900px){
  body::after{animation:none;will-change:auto;}
}

/* Camada 3 — textura xerox global via overlay (aplica em .tex-xerox) */
.tex-noise{position:relative;}
.tex-noise::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:0.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='x'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23x)'/%3E%3C/svg%3E");
}

/* Garante que o conteúdo fique acima da textura de fundo */
main, footer, .hero, section, .contact-section-v2{position:relative;z-index:1;}
/* nav acima das texturas */
.nav{z-index:10000;}

/* ════════════════════════════════════════════════
   CARDS DE SERVIÇO — reforço visual
   ════════════════════════════════════════════════ */
/* linha de destaque no topo que cresce no hover */
.service-card::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:2px;
  background:linear-gradient(90deg,var(--ignition),var(--ember),transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 500ms var(--ease);
  z-index:3;
}
.service-card:hover::before{transform:scaleX(1);}

/* glow em volta do card via box-shadow (NUNCA vaza pra dentro) */
.service-card::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:transparent;
  box-shadow:0 0 20px 1px rgba(255,23,0,0.15);
  opacity:0;
  transition:opacity 500ms var(--ease), box-shadow 500ms var(--ease);
  pointer-events:none;
}
.service-card:hover::after{opacity:1;box-shadow:0 0 30px 2px rgba(255,23,0,0.22);}

/* leve elevação + borda que acende */
.service-card{transition:transform 400ms var(--ease), box-shadow 400ms var(--ease);}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 50px -20px rgba(255,23,0,0.25), inset 0 0 0 1px rgba(255,23,0,0.15);
  z-index:4;
}

/* ícone maior e mais presente, num "chip" */
.service-card-inner .service-icon{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ash);
  background:rgba(255,23,0,0.03);
  margin-bottom:auto;
  transition:border-color 300ms ease, background 300ms ease, transform 400ms var(--ease);
}
.service-card:hover .service-icon{
  border-color:rgba(255,23,0,0.4);
  background:rgba(255,23,0,0.08);
  transform:scale(1.05);
}

/* número maior, watermark no canto */
.service-card-inner .service-num{
  position:absolute;
  top:2.5rem;right:2.5rem;
  font-size:3rem;
  font-weight:700;
  font-family:var(--font-display);
  color:rgba(235,235,235,0.04);
  letter-spacing:-0.05em;
  margin:0;
  line-height:1;
  transition:color 400ms ease;
}
.service-card:hover .service-num{color:rgba(255,23,0,0.12);}

/* título ligeiramente maior no hover */
.service-title{transition:color 260ms ease, transform 400ms var(--ease);transform-origin:left;}
.service-card:hover .service-title{color:#fff;}


/* Glow em volta da foto do Sobre via box-shadow — sempre visível, cresce no hover */
.about-photo-col{position:relative;overflow:visible;}
.about-photo-framed{
  position:relative;
  z-index:1;
  box-shadow:0 0 40px 2px rgba(255,23,0,0);
  transition:box-shadow 600ms var(--ease);
}
.about-photo-col:hover .about-photo-framed{
  box-shadow:0 0 35px 3px rgba(255,23,0,0.2);
}

/* ════════════════════════════════════════════════
   TAGS DE SERVIÇO / FERRAMENTAS / COLABORAÇÕES
   ════════════════════════════════════════════════ */
/* chips de serviço (categorias) na descrição */
.svc-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;}
.svc-tag{font-family:var(--font-mono);font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ignition);border:1px solid rgba(255,23,0,.4);padding:.4rem .85rem;background:rgba(255,23,0,.04);}

/* ferramentas como tags nos créditos */
.proj-tools-block{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--ash);}
.proj-tools-label{font-family:var(--font-mono);font-size:.5625rem;text-transform:uppercase;letter-spacing:.12em;color:var(--chrome-dark);display:block;margin-bottom:.75rem;}
.proj-tools-tags{display:flex;flex-wrap:wrap;gap:.4rem;}
.tool-tag{font-family:var(--font-mono);font-size:.5625rem;text-transform:uppercase;letter-spacing:.06em;color:var(--chrome-mid);border:1px solid var(--ash);padding:.35rem .7rem;background:var(--void);transition:border-color 200ms ease,color 200ms ease;}
.tool-tag:hover{border-color:var(--smoke);color:var(--platinum);}

/* colaborações em destaque (fora dos créditos) */
#proj-collabs{margin-top:1.5rem;padding:1.5rem;background:linear-gradient(135deg,rgba(255,23,0,.06),transparent);border:1px solid rgba(255,23,0,.2);border-left:2px solid var(--ignition);}
.collabs-label{font-family:var(--font-mono);font-size:.5625rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ignition);display:block;margin-bottom:.85rem;}
.collabs-list{display:flex;flex-wrap:wrap;gap:.5rem;}
.collab-chip{font-family:var(--font-body);font-size:.8125rem;color:var(--platinum);border:1px solid var(--ash);padding:.45rem .85rem;background:var(--void);border-radius:2px;transition:border-color 200ms ease;}
.collab-chip:hover{border-color:var(--ignition);}

/* seções extras do case duplo */
.phase-process{background:var(--void);}
.phase-live{background:linear-gradient(180deg,var(--coal),var(--void));}
.phase-live .phase-marker-num{color:var(--ignition);}

/* ════════════════════════════════════════════════
   AJUSTES PÁGINA DE PROJETO (v2)
   ════════════════════════════════════════════════ */
/* body section: padding menor pra descrição curta não deixar vazião */
.proj-body-section.section{padding-top:2rem;padding-bottom:2rem;}

/* colaborações agora ficam junto das tags (na coluna da descrição) */
.svc-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem;align-items:center;}
#proj-collabs-inline{margin:1.25rem 0 1.5rem;padding:1.25rem 1.5rem;background:linear-gradient(135deg,rgba(255,23,0,.06),transparent);border:1px solid rgba(255,23,0,.2);border-left:2px solid var(--ignition);}
#proj-collabs-inline .collabs-label{font-family:var(--font-mono);font-size:.5625rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ignition);display:block;margin-bottom:.75rem;}
#proj-collabs-inline .collabs-list{display:flex;flex-wrap:wrap;gap:.5rem;}
#proj-collabs-inline .collab-chip{font-family:var(--font-body);font-size:.8125rem;color:var(--platinum);border:1px solid var(--ash);padding:.4rem .8rem;background:var(--void);transition:border-color 200ms ease;}
#proj-collabs-inline .collab-chip:hover{border-color:var(--ignition);}

/* ── COMPOSIÇÃO DE VÍDEOS (respeita aspect ratio) ── */
.video-comp{display:flex;flex-wrap:wrap;gap:8px;background:transparent;border:none;}
/* landscape ocupa a linha inteira */
.video-comp .vid-landscape{flex:1 1 100%;}
/* portrait/quadrado: 2 por linha lado a lado */
.video-comp .vid-portrait{flex:1 1 calc(50% - 4px);max-width:calc(50% - 4px);}
/* o embed respeita o aspect-ratio setado inline no JS */
.video-comp .video-embed{width:100%;height:auto;background:var(--void);border:1px solid var(--ash);overflow:hidden;}
.video-comp .video-embed iframe{width:100%;height:100%;display:block;}
/* antes de detectar o ratio, cai no 16/9 padrão */
.video-comp .video-embed:not([style*="aspect-ratio"]){aspect-ratio:16/9;}
@media(max-width:700px){
  .video-comp .vid-portrait{flex:1 1 100%;max-width:100%;}
}

/* ── LAYOUT PROJETO v3: créditos em barra + descrição full-width ── */
.proj-body-section.section{padding-top:2rem;padding-bottom:2rem;}
.proj-body-section .container{display:flex;flex-direction:column;gap:1.5rem;}
/* créditos viram uma BARRA horizontal no topo */
.proj-credits{order:-1;background:var(--void);border:1px solid var(--ash);padding:1.75rem 2rem;position:static;top:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.5rem 2rem;align-items:start;}
.proj-credits-header{grid-column:1/-1;font-family:var(--font-mono);font-size:.5625rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ignition);margin-bottom:.25rem;}
.proj-credits-list{display:contents;}
.proj-credit-row{display:flex;flex-direction:column;gap:.35rem;border:none;padding:0;}
.proj-credit-label{font-family:var(--font-mono);font-size:.5rem;text-transform:uppercase;letter-spacing:.1em;color:var(--chrome-dark);}
.proj-credit-value{font-family:var(--font-body);font-size:.9375rem;color:var(--platinum);}
.proj-tools-block{grid-column:1/-1;margin-top:0;padding-top:1.25rem;border-top:1px solid var(--ash);}
/* descrição full-width */
.proj-intro{width:100%;}
.proj-desc-text{margin-top:1.25rem;max-width:900px;}
.proj-desc-text p{font-family:var(--font-body);font-size:0.9375rem;line-height:1.5;color:var(--chrome-mid);margin-bottom:0.85rem;}
/* linha de tags + colaborações */
.proj-tags-row{margin-top:1.25rem;}

/* ════════════════════════════════════════════════
   CURSOR CUSTOMIZADO — só o pontinho vermelho
   ════════════════════════════════════════════════ */
@media (hover:hover) and (pointer:fine){
  * { cursor: none !important; }
  .cursor-dot{
    position:fixed;top:0;left:0;
    width:9px;height:9px;border-radius:50%;
    background:var(--ignition);
    pointer-events:none;z-index:99999;
    transform:translate(-50%,-50%);
    transition:width .2s var(--ease),height .2s var(--ease),opacity .2s ease;
  }
  /* leve crescimento sobre clicáveis (sutil, sem anel nem texto) */
  .cursor-dot.is-hovering{ width:14px;height:14px; }
  .cursor-dot.is-hidden{ opacity:0; }
}

/* ════════════════════════════════════════════════
   PÁGINA DE PROJETO FULL-BLEED (ponta a ponta)
   ════════════════════════════════════════════════ */
/* o container da página de projeto usa quase toda a largura */
.proj-body-section .container,
.phase-section .container,
#proj-extra .container{max-width:none;padding-left:4vw;padding-right:4vw;}

/* galeria e vídeos vão de ponta a ponta (margem mínima) */
.proj-gallery, .video-comp{width:100%;}

/* hero do projeto full width */
.proj-hero .container{max-width:none;padding-left:4vw;padding-right:4vw;}

/* descrição pode ser um pouco mais larga */
.proj-desc-text{max-width:1100px;}

@media(max-width:768px){
  .proj-body-section .container,
  .phase-section .container,
  #proj-extra .container,
  .proj-hero .container{padding-left:1.25rem;padding-right:1.25rem;}
}

/* ═══════════════════════════════════════════════════════════
   PÁGINA DE PROJETO — REDESIGN (compacta, densa, full-bleed)
   Prefixo .pj- — estrutura nova do zero
   ═══════════════════════════════════════════════════════════ */
#proj-content{padding-top:var(--nav-h);}

/* ── HEADER: título esquerda + créditos direita ── */
.pj-head{max-width:1350px;margin:0 auto;padding:2.5rem 2rem 1.75rem;border-bottom:1px solid var(--ash);}
.pj-head-inner{display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;align-items:start;}
.pj-back{display:block;width:fit-content;font-family:var(--font-mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.12em;color:var(--chrome-dark);text-decoration:none;margin-bottom:1.25rem;transition:color 200ms ease;}
.pj-back:hover{color:var(--ignition);}
.pj-title{display:block;font-family:var(--font-display);font-size:clamp(2.25rem,5vw,4.5rem);font-weight:700;color:var(--platinum);letter-spacing:-.035em;line-height:.92;margin:0;}
.pj-title.split-title{display:block;}
.pj-sub{font-family:var(--font-body);font-size:1rem;color:var(--chrome-mid);margin:.75rem 0 0;}
.pj-tags{display:flex;flex-direction:column;align-items:flex-start;gap:.85rem;margin-top:1rem;}
.pj-tags .svc-tags{display:flex;flex-wrap:wrap;gap:.5rem;}
.pj-tags #proj-collabs-inline{margin:0;padding:.85rem 1.1rem;}

/* créditos à direita — compactos, em linhas */
.pj-head-right{display:flex;flex-direction:column;gap:.85rem;}
.pj-cred-row{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.85rem;border-bottom:1px solid rgba(37,37,37,.6);}
.pj-cred-row:last-child{border-bottom:none;padding-bottom:0;}
.pj-cred-label{font-family:var(--font-mono);font-size:.5625rem;text-transform:uppercase;letter-spacing:.1em;color:var(--chrome-dark);white-space:nowrap;}
.pj-cred-value{font-family:var(--font-body);font-size:.875rem;color:var(--platinum);text-align:right;}
.pj-cred-tools{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:flex-end;}

/* descrição: full-width, logo abaixo do header inner */
.pj-desc{margin-top:1.5rem;max-width:none;}
.pj-desc p{font-family:var(--font-body);font-size:.9375rem;line-height:1.55;color:var(--chrome-mid);margin:0 0 .75rem;}
.pj-desc p:last-child{margin-bottom:0;}

/* ── CAPA principal (topo, compacta) ── */
.pj-cover{max-width:1350px;margin:0 auto;width:100%;background:var(--void);}
.pj-cover img{width:100%;height:auto;max-height:34vh;object-fit:cover;display:block;}
.pj-cover .pj-cover-gradient{width:100%;height:24vh;display:flex;align-items:center;justify-content:center;}
.pj-cover:empty{display:none;}

/* ── SEÇÕES VISUAIS (galeria/vídeos) — full-bleed, densas ── */
.pj-visual{max-width:1350px;margin:0 auto;padding:6px 2rem 0;}
.pj-visual:first-of-type{padding-top:6px;}

/* ── FOOTER: navegação prev/next + CTA ── */
.pj-foot{max-width:1350px;margin:2rem auto 0;padding:3rem 2rem;border-top:1px solid var(--ash);}
.pj-nav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ash);border:1px solid var(--ash);margin-bottom:3rem;}
.pj-nav-item{display:flex;flex-direction:column;gap:.4rem;padding:1.5rem;background:var(--void);text-decoration:none;transition:background 240ms ease;}
.pj-nav-item:hover{background:var(--coal);}
.pj-nav-item.next{text-align:right;align-items:flex-end;}
.pj-nav-dir{font-family:var(--font-mono);font-size:.5625rem;text-transform:uppercase;letter-spacing:.12em;color:var(--chrome-dark);}
.pj-nav-name{font-family:var(--font-display);font-size:1.125rem;font-weight:600;color:var(--platinum);transition:color 200ms ease;}
.pj-nav-item:hover .pj-nav-name{color:var(--ignition);}
.pj-cta{text-align:center;padding:2rem 0 1rem;}
.pj-cta-label{font-family:var(--font-mono);font-size:.625rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ignition);display:block;margin-bottom:.75rem;}
.pj-cta-title{font-family:var(--font-display);font-size:clamp(1.75rem,4vw,3rem);font-weight:700;color:var(--platinum);letter-spacing:-.03em;margin:0 0 1.75rem;}
.pj-cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}

/* mobile */
@media(max-width:768px){
  .pj-head{padding:1.5rem 1.25rem 1.25rem;}
  .pj-head-inner{grid-template-columns:1fr;gap:1.5rem;}
  .pj-head-right{gap:.6rem;}
  .pj-desc{margin-top:1.25rem;}
  .pj-visual{padding:6px 1.25rem 0;}
  .pj-foot{padding:2rem 1.25rem;}
  .pj-nav{grid-template-columns:1fr;}
  .pj-nav-item.next{text-align:left;align-items:flex-start;}
}

/* ═══════════════════════════════════════════════════════════
   COMPOSIÇÕES DE FASE — direção de arte por capítulo
   ═══════════════════════════════════════════════════════════ */

/* Container de fase: cada uma tem respiro e um marcador */
.pj-phase{max-width:1350px;margin:0 auto;padding:3.5rem 2rem;position:relative;}
.pj-phase + .pj-phase{border-top:1px solid var(--ash);}
.pj-phase-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:2rem;}
.pj-phase-num{font-family:var(--font-mono);font-size:.625rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ignition);white-space:nowrap;}
.pj-phase-title{font-family:var(--font-display);font-size:clamp(1.5rem,3.5vw,2.75rem);font-weight:700;color:var(--platinum);letter-spacing:-.03em;line-height:1;margin:0;}
.pj-phase-text{max-width:none;font-family:var(--font-body);font-size:1rem;line-height:1.6;color:var(--chrome-mid);margin-bottom:1.5rem;}
.pj-phase-text p{margin:0 0 .7rem;}

/* imagem base reutilizável */
.pj-img{overflow:hidden;background:var(--void);position:relative;cursor:pointer;}
.pj-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 600ms var(--ease);}
.pj-img:hover img{transform:scale(1.03);}
.pj-vid{overflow:hidden;background:var(--void);border:1px solid var(--ash);position:relative;}
.pj-vid iframe{width:100%;height:100%;display:block;}

/* ── COMPOSIÇÃO: BOARD (identidade / editorial) ──
   peça principal grande + peças menores ao redor, assimétrico */
.comp-board{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(140px,auto);gap:10px;}
.comp-board .pj-img:nth-child(5n+1){grid-column:span 8;grid-row:span 2;}
.comp-board .pj-img:nth-child(5n+2){grid-column:span 4;}
.comp-board .pj-img:nth-child(5n+3){grid-column:span 4;}
.comp-board .pj-img:nth-child(5n+4){grid-column:span 5;grid-row:span 2;}
.comp-board .pj-img:nth-child(5n+5){grid-column:span 7;grid-row:span 2;}
/* board com texto ao lado */
.comp-board-text{display:grid;grid-template-columns:1fr 1.6fr;gap:2.5rem;align-items:start;}
@media(max-width:820px){.comp-board-text{grid-template-columns:1fr;gap:1.5rem;}}

/* ── COMPOSIÇÃO: CINEMA (palco / ao vivo) ──
   full-bleed, vídeos grandes, respiro entre eles */
.comp-cinema{display:flex;flex-direction:column;gap:14px;}
.comp-cinema .pj-vid,.comp-cinema .pj-img{width:100%;border-left:none;border-right:none;}
.comp-cinema .pj-vid{aspect-ratio:16/9;}
/* dois lado a lado quando são verticais/quadrados */
.comp-cinema .cinema-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.comp-cinema .cinema-pair .pj-vid{aspect-ratio:9/16;}
@media(max-width:768px){.comp-cinema .cinema-pair{grid-template-columns:1fr;}.comp-cinema .cinema-pair .pj-vid{aspect-ratio:1/1;}}

/* ── COMPOSIÇÃO: MAKING-OF (processo) ──
   tira sequencial horizontal, estética técnica/crua */
.comp-process{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;}
.comp-process .pj-img{aspect-ratio:4/3;border:1px solid var(--ash);}
.comp-process .pj-img::after{content:attr(data-step);position:absolute;top:8px;left:8px;font-family:var(--font-mono);font-size:.5rem;color:var(--ignition);background:rgba(8,8,8,.8);padding:2px 6px;letter-spacing:.1em;}

/* ── COMPOSIÇÃO: EDITORIAL (projeto simples) ──
   alterna imagem grande + imagem+texto lado a lado */
.comp-editorial{display:flex;flex-direction:column;gap:16px;}
.comp-editorial .ed-full .pj-img{aspect-ratio:21/9;}
.comp-editorial .ed-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center;}
.comp-editorial .ed-split.reverse{direction:rtl;}
.comp-editorial .ed-split.reverse > *{direction:ltr;}
.comp-editorial .ed-split .pj-img{aspect-ratio:4/5;}
.comp-editorial .ed-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.comp-editorial .ed-duo .pj-img{aspect-ratio:4/3;}
@media(max-width:768px){
  .comp-editorial .ed-split,.comp-editorial .ed-duo{grid-template-columns:1fr;}
  .comp-editorial .ed-full .pj-img{aspect-ratio:16/9;}
}

/* ── COMPOSIÇÃO: GRID (simples, fallback denso) ── */
.comp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.comp-grid .pj-img{aspect-ratio:4/3;}
@media(max-width:768px){.comp-grid{grid-template-columns:1fr;}}

/* mobile: todas as composições relaxam pra coluna */
@media(max-width:768px){
  .pj-phase{padding:2rem 1.25rem;}
  .comp-board{grid-template-columns:1fr;}
  .comp-board .pj-img[class]{grid-column:span 1 !important;grid-row:span 1 !important;aspect-ratio:4/3;}
  .comp-cinema{margin:0 -1.25rem;}
}

/* cinema contido: vídeos no mesmo ritmo editorial, sem sangrar a tela */
.comp-cinema-in{display:flex;flex-direction:column;gap:12px;margin-bottom:12px;}
.comp-cinema-in .video-embed{width:100%;background:var(--void);border:1px solid var(--ash);overflow:hidden;}
.comp-cinema-in .video-embed iframe{width:100%;height:100%;display:block;}
.comp-cinema-in .video-embed:not([style*="aspect-ratio"]){aspect-ratio:16/9;}
/* pares de verticais lado a lado */
.comp-cinema-in .vid-portrait{}

/* ── COMPOSIÇÃO EDITORIAL DE VÍDEOS (respeita aspect ratio real) ── */
.comp-vid-editorial{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;}
.comp-vid-editorial .ve-cell{min-width:0;}
.comp-vid-editorial .ve-cell .video-embed{width:100%;height:auto;background:var(--void);border:1px solid var(--ash);overflow:hidden;}
.comp-vid-editorial .ve-cell .video-embed iframe{width:100%;height:100%;display:block;}
/* full: linha inteira, mantendo o aspect ratio real (faixa fica faixa) */
.comp-vid-editorial .ve-full{flex:1 1 100%;}
/* half: dois por linha (verticais/quadrados) */
.comp-vid-editorial .ve-half{flex:1 1 calc(50% - 7px);max-width:calc(50% - 7px);}

/* ── FORMATO FORÇADO (cover): frame fixo + vídeo preenche sem borda ── */
.comp-vid-editorial .ve-cover .video-embed{
  aspect-ratio:var(--frame,16/9);
  position:relative;
  height:auto;
}
/* o iframe cobre o frame: dá zoom pra não sobrar borda, cortando o excesso.
   200% em ambas as dimensões garante cobertura pra qualquer proporção de frame. */
.comp-vid-editorial .ve-cover .video-embed iframe{
  position:absolute;
  top:50%;left:50%;
  width:200%;height:200%;
  transform:translate(-50%,-50%);
}
/* frames verticais/estreitos precisam de mais zoom pra cobrir; ajuste por formato */
.comp-vid-editorial .frame-vstrip .video-embed iframe,
.comp-vid-editorial .frame-square .video-embed iframe{
  width:320%;height:320%;
}
.comp-vid-editorial .frame-hstrip .video-embed iframe{
  width:100%;height:400%;
}
@media(max-width:768px){
  .comp-vid-editorial .ve-half{flex:1 1 100%;max-width:100%;}
}

/* Escudo transparente por cima do vídeo — bloqueia hover/controles do player */
.video-embed{position:relative;}
.video-shield{position:absolute;inset:0;z-index:3;background:transparent;cursor:default;pointer-events:auto;}

/* ══════════════════════════════════════════════════════════════
   MOTION / INTERAÇÕES — site vivo (intensidade média)
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Títulos com letras animadas ── */
.split-title{display:inline-block;}
.split-word{display:inline-block;white-space:nowrap;}
.split-char{
  display:inline-block;
  will-change:transform;
  transition:transform .28s cubic-bezier(.2,.9,.2,1), color .25s ease;
}

/* ── 2. Hover magnético (o transform é aplicado via JS) ── */
.btn,.nav-link,.filt,.pj-nav-item,.lang-toggle a,.social-link{
  transition:transform .35s cubic-bezier(.2,.8,.2,1), color .25s ease, background .25s ease, border-color .25s ease;
  will-change:transform;
}

/* ── 3. Transição de página — removida ── */

/* ── 4. Reveal no scroll (expressivo) ── */
.motion-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay:var(--reveal-delay,0ms);
}
.motion-reveal.in-view{opacity:1;transform:translateY(0);}
/* imagens revelam com um clip sutil */
.pj-img.motion-reveal,.ve-cell.motion-reveal{transform:translateY(36px) scale(.98);}
.pj-img.motion-reveal.in-view,.ve-cell.motion-reveal.in-view{transform:translateY(0) scale(1);}

/* ── 5. Rastro no cursor ── */
@media (hover:hover) and (pointer:fine){
  .cursor-trail{
    position:fixed;top:0;left:0;z-index:99998;
    width:26px;height:26px;border-radius:50%;
    border:1px solid rgba(255,23,0,.35);
    pointer-events:none;
    transition:opacity .3s ease, width .25s ease, height .25s ease;
  }
  .cursor-trail.is-hidden{opacity:0;}
}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce){
  body::after{animation:none;}
  .split-char{animation:none;}
  .motion-reveal{opacity:1;transform:none;}
  .page-noise{display:none;}
  .cursor-trail{display:none;}
}

/* Link discreto pro admin no footer */
.footer-admin{
  font-family:var(--font-mono);font-size:.5625rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--chrome-dark);text-decoration:none;
  border:1px solid var(--ash);padding:.35rem .7rem;border-radius:2px;
  transition:color .2s ease, border-color .2s ease;
  margin-left:.75rem;
}
.footer-admin:hover{color:var(--ignition);border-color:var(--ignition);}

/* ════════════════════════════════════════════════
   METADATA TÉCNICA — códigos, N°, marcas de registro
   (estética de ficha técnica / embalagem / pôster)
   ════════════════════════════════════════════════ */
.meta-tag{
  font-family:var(--font-mono);font-size:.5rem;text-transform:uppercase;
  letter-spacing:.15em;color:var(--chrome-dark);
  display:inline-flex;align-items:center;gap:.4rem;
}
.meta-tag--box{border:1px solid var(--ash);padding:.2rem .5rem;}
.meta-tag--red{color:var(--ignition);}

/* marca de registro (cruzinha de impressão +) */
.reg-mark{
  position:absolute;width:14px;height:14px;pointer-events:none;opacity:.35;z-index:2;
}
.reg-mark::before,.reg-mark::after{
  content:'';position:absolute;background:var(--chrome-dark);
}
.reg-mark::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%);}
.reg-mark::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%);}
.reg-mark--red::before,.reg-mark--red::after{background:var(--ignition);}
.reg-mark.tl{top:12px;left:12px;} .reg-mark.tr{top:12px;right:12px;}
.reg-mark.bl{bottom:12px;left:12px;} .reg-mark.br{bottom:12px;right:12px;}

/* barcode (faixa de código de barras fake, decorativo) */
.barcode{
  display:inline-block;height:22px;width:90px;pointer-events:none;opacity:.55;
  background-image:repeating-linear-gradient(90deg,
    var(--platinum) 0, var(--platinum) 1px, transparent 1px, transparent 2px,
    var(--platinum) 2px, var(--platinum) 4px, transparent 4px, transparent 5px,
    var(--platinum) 5px, var(--platinum) 6px, transparent 6px, transparent 8px,
    var(--platinum) 8px, var(--platinum) 11px, transparent 11px, transparent 12px);
}

/* faixa de metadata no topo/rodapé de uma seção */
.meta-strip{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.5rem 0;border-top:1px solid var(--ash);border-bottom:1px solid var(--ash);
  font-family:var(--font-mono);font-size:.5rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--chrome-dark);flex-wrap:wrap;
}
.meta-strip .ms-item{display:flex;align-items:center;gap:.4rem;white-space:nowrap;}
.meta-strip .ms-red{color:var(--ignition);}
.meta-strip .ms-hatch{
  width:40px;height:10px;
  background-image:repeating-linear-gradient(45deg,var(--ignition) 0,var(--ignition) 2px,transparent 2px,transparent 5px);
  opacity:.7;
}

/* cantos técnicos numa seção (registro nas 4 quinas) */
.tech-corners{position:relative;}
.tech-corners > .reg-mark{opacity:.3;}

/* stencil/stamp — texto tipo carimbo */
.stamp{
  font-family:var(--font-mono);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;border:2px solid var(--ignition);color:var(--ignition);
  padding:.25rem .6rem;display:inline-block;transform:rotate(-4deg);
  opacity:.85;font-size:.7rem;
}

/* ── Metadata flutuante na página de projeto ── */
.pj-meta-float{
  position:absolute;top:1.5rem;right:2rem;
  display:flex;flex-direction:column;gap:.4rem;align-items:flex-end;
  pointer-events:none;z-index:3;
}
.pj-meta-float .meta-tag--red{animation:recBlink 1.4s steps(1) infinite;}
@keyframes recBlink{0%,60%{opacity:1;}61%,100%{opacity:.25;}}
@media(max-width:768px){.pj-meta-float{display:none;}}

/* ── Elementos de collage ── */
.collage-mark{position:absolute;pointer-events:none;z-index:2;opacity:.5;}
.collage-star{width:34px;height:34px;top:-10px;right:14%;transform:rotate(12deg);opacity:.35;}
@media(max-width:768px){.collage-star{display:none;}}

/* ── Tipografia mais suja: sombra de impressão (uma cor só) ── */
/* leve deslocamento escuro, tipo tinta/registro — sem RGB split */
.work-hero-title .split-char,
.pj-title .split-char,
.contact-title .split-char{
  text-shadow:2px 2px 0 rgba(0,0,0,.55);
}
/* no hover da onda, a letra acende em vermelho com sombra mais forte */
.split-char:hover{
  text-shadow:3px 3px 0 rgba(0,0,0,.7) !important;
}

/* remove o dirty-title bugado (não usar) */
.dirty-title::after{display:none !important;}

/* meta-strip responsivo: esconde alguns itens no mobile */
@media(max-width:640px){
  .meta-strip .ms-item:nth-child(3),
  .meta-strip .ms-item:nth-child(4){display:none;}
}

/* ── Elementos de collage espalhados ── */
.collage-item{
  position:absolute;pointer-events:none;z-index:2;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;
}
.collage-item.cg-asterisk{color:var(--ignition);opacity:.5;line-height:1;}
.collage-item.cg-cross{color:var(--chrome-dark);opacity:.55;font-weight:700;}
.collage-item.cg-code{font-size:.5625rem;color:var(--chrome-dark);opacity:.6;letter-spacing:.14em;}
.collage-item.cg-stamp{
  font-size:.6875rem;font-weight:700;color:var(--ignition);
  border:2px solid var(--ignition);padding:.2rem .5rem;opacity:.7;
}
@media(max-width:768px){
  .collage-item{opacity:.4 !important;}
  .collage-item.cg-code,.collage-item.cg-stamp{display:none;}
}

/* ════════════════════════════════════════════════
   BOTÕES 3D (Three.js canvas)
   ════════════════════════════════════════════════ */



@media(max-width:768px){
  
}

/* ── Work: grupos de filtro + ordenação ── */
.work-filters{display:flex;gap:0.5rem;flex-wrap:wrap;}
.work-sort{display:flex;align-items:center;gap:0.5rem;}
.work-sort-label{
  font-family:var(--font-mono);font-size:0.5625rem;text-transform:uppercase;
  letter-spacing:0.14em;color:var(--chrome-dark);margin-right:0.15rem;
}
.sort-btn{
  font-family:var(--font-mono);font-size:0.625rem;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--chrome-dark);background:transparent;
  border:1px solid var(--ash);padding:0.4rem 0.75rem;cursor:pointer;
  transition:all 200ms var(--ease);border-radius:2px;
}
.sort-btn:hover{color:var(--platinum);border-color:var(--chrome-dark);}
.sort-btn.active{color:var(--ignition);border-color:var(--ignition);}
@media(max-width:640px){
  .work-filters-wrap{justify-content:flex-start;}
  .work-sort{width:100%;justify-content:flex-start;margin-top:0.25rem;}
}

/* ════════════════════════════════════════════════
   SERVIÇOS: hover preenche a seção com vídeo e o
   card vira uma faixa embaixo (scale + position)
   ════════════════════════════════════════════════ */
.services-stage{position:relative;}

/* camada de vídeo que toma a seção inteira.
   O gradiente é o que aparece enquanto não houver vídeo do serviço,
   pra seção nunca ficar com cara de quebrada. */
.services-video-layer{
  position:absolute;inset:0;z-index:1;overflow:hidden;
  pointer-events:none;opacity:0;
  background:linear-gradient(135deg,#0f0b0b,#161010,#0c0808);
  transition:opacity 450ms var(--ease);
}
.services-stage.is-active .services-video-layer{opacity:1;}
/* as mídias da montagem: duas imagens que se alternam + um vídeo.
   A troca é quase seca (140ms) porque cada uma fica menos de 1s. */
.services-media-img,.services-media-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;
  transition:opacity 140ms linear;
}
.services-media-img.is-on,.services-media-video.is-on{opacity:1;}
/* escurece embaixo pra faixa ficar legível */
.services-video-layer::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,8,.92) 0%,rgba(8,8,8,.35) 45%,rgba(8,8,8,.18) 100%);
}

/* os cards originais somem enquanto um está ativo
   (continuam ocupando o espaço, então nada reflui) */
/* pointer-events:none é o ponto: sem isso, passar o mouse por cima dos
   cards invisíveis ficava trocando o setor aberto sozinho. A troca passa
   a ser só pela lista lateral. */
.services-stage.is-active .services-grid{
  opacity:0;pointer-events:none;transition:opacity 320ms var(--ease);
}

/* o clone do card: começa no lugar exato dele e vira a faixa */
.service-strip{
  position:absolute;z-index:3;overflow:hidden;min-height:0;
  background:rgba(10,10,10,.5);
  transition:left 600ms var(--ease),top 600ms var(--ease),
             width 600ms var(--ease),height 600ms var(--ease),
             background 400ms ease;
}
.service-strip .service-card-media,
.service-strip .service-card-overlay{opacity:0;transition:opacity 320ms ease;}
.service-strip .service-card-inner{
  min-height:0;height:100%;
  transition:padding 600ms var(--ease),gap 600ms var(--ease);
}
/* estado final: faixa horizontal */
.service-strip.is-faixa{
  background:rgba(10,10,10,.8);
  border-top:1px solid var(--ash);
  backdrop-filter:blur(6px);
}
.service-strip.is-faixa .service-card-inner{
  flex-direction:row;align-items:center;gap:1.5rem;padding:0 2rem;
}
.service-strip.is-faixa .service-icon{margin-bottom:0;flex:none;opacity:.55;}
.service-strip.is-faixa .service-num{margin-bottom:0;flex:none;}
.service-strip.is-faixa .service-title{margin-bottom:0;flex:none;font-size:1.5rem;color:#fff;}
.service-strip.is-faixa .service-desc{
  flex:1;max-width:none;font-size:.8125rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.service-strip.is-faixa .service-arrow{margin-top:0;margin-left:auto;flex:none;color:var(--ignition);}
@media(max-width:900px){
  .service-strip.is-faixa .service-desc{display:none;}
}

/* lista lateral dos serviços (aparece quando um deles está aberto) */
.services-nav{
  position:absolute;top:0;right:0;z-index:4;
  display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;
  padding:1.5rem 1.75rem;
  opacity:0;pointer-events:none;transform:translateX(10px);
  transition:opacity 320ms var(--ease),transform 320ms var(--ease);
}
.services-stage.is-active .services-nav{opacity:1;pointer-events:auto;transform:none;}
.services-nav-item{
  font-family:var(--font-mono);font-size:.6875rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--chrome-dark);
  background:none;border:0;cursor:pointer;padding:.45rem .1rem;
  display:flex;align-items:center;gap:.6rem;
  transition:color 200ms ease;
}
.services-nav-item::before{
  content:'';width:0;height:1px;background:var(--ignition);
  transition:width 260ms var(--ease);
}
.services-nav-item:hover{color:var(--chrome-light);}
.services-nav-item.is-on{color:var(--ignition);}
.services-nav-item.is-on::before{width:22px;}

/* ── SOBRE: meus álbuns favoritos (abaixo da foto) ─────
   Cartões retangulares com borda, capa quadrada à esquerda e
   o nome ao lado. Dois por linha, ocupando a largura da foto. */
.about-albums{margin-top:1.5rem;}
.about-albums-label{
  display:block;font-family:var(--font-mono);font-size:.5625rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--chrome-dark);
  margin-bottom:.75rem;
}
.about-albums-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
}
.album-item{
  display:flex;align-items:center;gap:.55rem;
  border:1px solid var(--ash);background:var(--coal);
  text-decoration:none;overflow:hidden;min-width:0;
  transition:border-color 260ms ease,background 260ms ease,transform 260ms var(--ease);
}
.album-cover{
  display:block;width:46px;height:46px;flex:none;
  overflow:hidden;background:var(--graphite);
}
.album-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.album-nome{
  flex:1;min-width:0;padding-right:.5rem;
  font-family:var(--font-mono);font-size:.5rem;line-height:1.3;
  color:var(--chrome-mid);letter-spacing:.02em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color 200ms ease;
}
.album-item:hover{
  border-color:var(--ignition);background:var(--graphite);transform:translateY(-2px);
}
.album-item:hover .album-nome{color:var(--platinum);}
@media(max-width:900px){
  .about-albums{margin-top:1.25rem;}
  /* 3 por linha ficaria espremido demais numa tela estreita */
  .about-albums-grid{grid-template-columns:repeat(2,1fr);}
  .album-cover{width:44px;height:44px;}
}


/* ════════════════════════════════════════════════
   WORK: fileiras que dividem a largura por igual
   (2, 4, 2, 3...), sem espaço vazio. Cada bloco:
   imagem em cima + faixa (nome/desc/ano à esquerda,
   número por cliente à direita).
   ════════════════════════════════════════════════ */
.work-grid{
  display:flex;flex-direction:column;
  gap:1px;background:var(--ash);
  border-top:1px solid var(--ash);border-bottom:1px solid var(--ash);
  margin-bottom:4rem;
  /* preenche a largura total do navegador, escapando do container */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border-left:0;border-right:0;
}

/* uma fileira: divide a largura igualmente entre --cols blocos */
.work-row-group{
  display:grid;
  grid-template-columns:repeat(var(--cols,2),1fr);
  gap:1px;background:var(--ash);
}

.work-cell{
  display:flex;flex-direction:column;
  background:var(--void);
  text-decoration:none;color:inherit;
  min-width:0;
}

.work-cell-visual{
  position:relative;width:100%;overflow:hidden;background:var(--coal);
}
.work-cell-media{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 700ms var(--ease);
}
.work-cell-media--empty{display:flex;align-items:center;justify-content:center;}
.work-cell:hover .work-cell-media{transform:scale(1.04);}

/* selo com seta no hover */
/* hover: SÓ o zoom na imagem. Sem seta e sem escurecer. */
.work-cell-badge{ display:none; }
.work-cell-badge-mark{ display:none; }

/* faixa: cresce pra preencher a altura do bloco. O texto fica em cima e
   a estrela embaixo, então blocos mais altos não deixam vazio. */
.work-cell-meta{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:12px 16px;
  padding:16px 20px 24px;
}
.work-cell-txt{
  display:flex;flex-direction:column;gap:8px;min-width:0;
  align-self:start;
}
.work-cell-name{
  font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
  color:var(--platinum);line-height:1.05;
}
/* subtítulo em vermelho, colado no ano (espaço menor que o do título) */
.work-cell-desc{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  line-height:1.5;color:var(--ignition);margin-bottom:-4px;
}
.work-cell-year{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--smoke);
}
.work-cell-star{
  align-self:end;width:44px;height:44px;color:var(--smoke);
  transition:color 300ms ease,transform 300ms var(--ease);
}
.work-cell-star svg,
svg.work-cell-star{width:44px;height:44px;}
.work-cell:hover .work-cell-star{color:var(--ignition);transform:rotate(-24.4deg);}

.work-cell.hidden{display:none;}

/* tablet: fileiras grandes viram no máximo 2 por linha */
@media(max-width:1024px){
  .work-row-group{grid-template-columns:repeat(2,1fr);}
}
/* mobile: uma coluna, imagem padronizada */
@media(max-width:768px){
  .work-row-group{grid-template-columns:1fr;}
  .work-cell-visual{aspect-ratio:16/10 !important;}
  .work-cell-name{font-size:19px;}
  .work-cell-meta{padding:16px 18px 20px;}
  .work-cell-star{width:38px;height:38px;}
  .work-cell-star svg,svg.work-cell-star{width:38px;height:38px;}
}