/* Baldow Studio — site stylesheet */
@font-face { font-family:'NeuePower'; src:url('fonts/NeuePower-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'NeuePower'; src:url('fonts/NeuePower-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'NeuePower'; src:url('fonts/NeuePower-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'NeuePower'; src:url('fonts/NeuePower-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'NeuePower'; src:url('fonts/NeuePower-BoldOblique.woff2') format('woff2'); font-weight:700; font-style:oblique; font-display:swap; }
@font-face { font-family:'NeuePower'; src:url('fonts/NeuePower-Heavy.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'NeuePower'; src:url('fonts/NeuePower-HeavyOblique.woff2') format('woff2'); font-weight:800; font-style:oblique; font-display:swap; }
@font-face { font-family:'NeuePower'; src:url('fonts/NeuePower-Ultra.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'NeuePower'; src:url('fonts/NeuePower-UltraOblique.woff2') format('woff2'); font-weight:900; font-style:oblique; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root {
  --green:#C6F000; --black:#141A17; --slate:#2D3C39;
  --olive:#767769; --khaki:#ACA999; --cream:#D7D3BF;
  --white:#FFFFFF;
  --np:'NeuePower','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ui:'Inter',system-ui,sans-serif;
  --ease: cubic-bezier(0.25,0,0,1);
  --gutter: 24px;
  --margin: 64px;
  --maxw: 1536px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;background:var(--black);}
body{
  font-family:var(--ui);
  background:var(--black);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}

/* ============ HEADER ============ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--margin);
  height:64px;
  transition:background 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(20,26,23,0.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:rgba(172,169,153,0.12);
}
.site-header.theme-light{ color:var(--black); }
.site-header.theme-light.scrolled{
  background:rgba(255,255,255,0.92);
  border-bottom-color:rgba(20,26,23,0.08);
}
.site-header .logo{ height:18px; width:auto; }
.site-header.theme-light .logo{ filter:brightness(0); }
.site-header:not(.theme-light) .logo{ filter:brightness(0) invert(1); }
.nav{
  display:flex;align-items:center;gap:36px;
}
.nav a{
  font-family:var(--ui);font-size:12px;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;
  position:relative;padding:6px 0;
  transition:color 200ms var(--ease);
}
.nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;
  height:1px;background:var(--green);
  transition:right 250ms var(--ease);
}
.nav a:hover{color:var(--green);}
.nav a:hover::after{right:0;}

/* ============ HERO ============ */
.hero{
  position:relative;width:100%;
  aspect-ratio: 16/9;
  min-height:560px; max-height:100vh;
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:0 var(--margin);
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.hero-video-fallback{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(45,60,57,0.9) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(118,119,105,0.4) 0%, transparent 55%),
    linear-gradient(180deg, #1a221e 0%, #0c100e 100%);
}
.hero-video-wrap{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  overflow:hidden; pointer-events:none;
}
.hero-video-wrap iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0; pointer-events:none;
  opacity:0; transition: opacity 600ms ease;
}
.hero-video-wrap.loaded iframe{ opacity:1; }
/* Poster do Vimeo mostrado instantaneamente enquanto o iframe carrega.
   Some via JS depois que o iframe entra em fade-in. */
.hero-video-poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; z-index:0;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .hero-video-wrap iframe{ transition:none; opacity:1; }
}
.hero-video-fallback::before{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 80px,
      rgba(255,255,255,0.018) 80px 81px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 80px,
      rgba(255,255,255,0.018) 80px 81px
    );
}
.hero-video-fallback::after{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(198,240,0,0.04) 0, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(198,240,0,0.03) 0, transparent 35%);
}
.hero-video-tag{
  position:absolute;top:88px;left:var(--margin);z-index:3;
  font-family:var(--ui);font-size:10px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--khaki);
  display:flex;align-items:center;gap:8px;
}
.hero-video-tag .dot{
  width:6px;height:6px;background:var(--green);
  animation:pulse 1.6s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.3;}
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(20,26,23,0.55) 0%, rgba(20,26,23,0.35) 50%, rgba(20,26,23,0.85) 100%);
}
.hero-overlay::after{
  /* film grain */
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:0.6;mix-blend-mode:overlay;
  pointer-events:none;
}
.hero-inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--maxw);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  gap:32px;
}
.hero-eyebrow{
  font-family:var(--ui);font-size:11px;font-weight:500;
  letter-spacing:0.24em;text-transform:uppercase;
  color:var(--khaki);
  display:flex;align-items:center;gap:14px;
}
.hero-eyebrow::before,.hero-eyebrow::after{
  content:'';width:36px;height:1px;background:var(--khaki);opacity:0.5;
}
.hero-logo{
  height:clamp(40px, 5.4vw, 84px);
  width:auto;
  filter:brightness(0) invert(1);
  margin-bottom:-8px;
}
.hero-tagline{
  font-family:var(--np);
  font-weight:900;font-style:normal;
  font-size:clamp(48px, 8.6vw, 132px);
  line-height:0.88;
  letter-spacing:-0.02em;
  color:var(--white);
  max-width:14ch;
  text-wrap:balance;
}
.hero-tagline em{
  font-style:normal;
  color:var(--green);
  display:inline-block;
}
.hero-sub{
  font-family:var(--ui);
  font-weight:500;font-size:clamp(13px, 1.25vw, 17px);
  color:var(--khaki);
  white-space:nowrap;
  line-height:1.5;
}
.hero-ctas{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  margin-top:8px;
}
.hero-scroll{
  position:absolute;left:50%;bottom:32px;
  transform:translateX(-50%);
  z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--ui);font-size:10px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--khaki);
}
.hero-scroll .line{
  width:1px;height:40px;
  background:linear-gradient(180deg,transparent,var(--khaki));
  position:relative;overflow:hidden;
}
.hero-scroll .line::after{
  content:'';position:absolute;top:-40px;left:0;width:1px;height:40px;
  background:linear-gradient(180deg,transparent,var(--green));
  animation:scrolldown 2.4s var(--ease) infinite;
}
@keyframes scrolldown{
  0%{top:-40px;}
  100%{top:40px;}
}
.hero-meta{
  position:absolute;bottom:32px;right:var(--margin);z-index:3;
  font-family:var(--ui);font-size:10px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--khaki);
  text-align:right;line-height:1.6;
}
.hero-meta b{ color:var(--white); font-weight:500; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ui);font-size:12px;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;
  padding:16px 24px;
  transition:all 200ms var(--ease);
  border:1px solid transparent;
  white-space:nowrap;
}
.btn-accent{ background:var(--green); color:var(--black); }
.btn-accent:hover{ background:var(--white); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,0.4); }
.btn-ghost:hover{ background:var(--white); color:var(--black); border-color:var(--white); }
.btn-dark{ background:var(--black); color:var(--white); }
.btn-dark:hover{ background:var(--green); color:var(--black); }
.btn .arrow{ display:inline-block; transition:transform 200ms var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

/* ============ QUEM SOMOS ============ */
.about{
  background:var(--cream);
  color:var(--black);
  padding:128px var(--margin);
  position:relative;
}
.about-inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1fr 1.4fr;gap:96px;
  align-items:start;
}
.about-label{
  display:flex;align-items:center;gap:12px;
  font-family:var(--ui);font-size:11px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--olive);
}
.about-label .num{
  width:28px;height:28px;background:var(--black);color:var(--green);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--np);font-weight:800;font-size:13px;
  letter-spacing:0;
}
.about-headline{
  font-family:var(--np);font-weight:800;font-style:normal;
  font-size:clamp(40px,5vw,76px);line-height:0.92;
  letter-spacing:-0.02em;
  color:var(--black);
  margin:0;
  /* compensa cap-height pra alinhar visualmente com o body do lado */
  transform: translateY(-0.12em);
}
.about-headline em{ font-style:normal; color:var(--olive);}
.about-body{
  font-family:var(--ui);font-weight:400;font-size:18px;line-height:1.55;
  color:var(--black);
  max-width:52ch;
}
.about-body p + p{ margin-top:18px; }
.about-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:64px;
  border-top:1px solid rgba(20,26,23,0.18);
}
.about-stat{
  padding:24px 0;
  display:flex;flex-direction:column;gap:8px;
}
.about-stat .v{
  font-family:var(--np);font-weight:900;font-size:48px;
  line-height:1;letter-spacing:-0.02em;
}
.about-stat .l{
  font-family:var(--ui);font-size:11px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--olive);
}
.about-disciplines{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;
}
.about-disciplines span{
  font-family:var(--ui);font-size:12px;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:8px 14px;
  border:1px solid rgba(20,26,23,0.18);
  color:var(--black);
}
.about-disciplines span.acc{ background:var(--black); color:var(--green); border-color:var(--black); }

/* ============ LOGOS STRIP ============ */
.strip{
  background:var(--black);
  border-top:1px solid rgba(172,169,153,0.12);
  border-bottom:1px solid rgba(172,169,153,0.12);
  padding:64px 0;
  overflow:hidden;
  position:relative;
}
.strip::before,.strip::after{
  content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.strip::before{ left:0; background:linear-gradient(90deg, var(--black), transparent); }
.strip::after{ right:0; background:linear-gradient(-90deg, var(--black), transparent); }
.marquee{
  display:flex;width:max-content;
  animation:marquee 70s linear infinite;
  gap:0;
  will-change:transform;
}
.marquee:hover{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(var(--marquee-shift, -50%)); }
}
.marquee .item{
  display:inline-flex;align-items:center;justify-content:center;
  height:96px; padding:0 32px;
  flex-shrink:0;
  /* largura responsiva ao "peso visual" — definida via --w por JS */
  width: var(--w, 180px);
}
.marquee .item img{
  /* altura ótica normalizada por aspect ratio (definida via --h por JS) */
  height: var(--h, 48px);
  max-height: 64px; max-width: 100%; width:auto;
  object-fit:contain;
  filter:brightness(0) invert(1) opacity(0.78);
  transition:filter 200ms var(--ease);
}
.marquee .item:hover img{ filter:brightness(0) invert(1) opacity(1); }
@media (prefers-reduced-motion:reduce){
  .marquee{ animation:none; }
}

/* ============ PORTFOLIO MOSAICO ============ */
.portfolio{
  background:var(--black);
  padding:128px var(--margin) 96px;
}
.portfolio-head{
  max-width:var(--maxw);margin:0 auto 64px;
  display:grid;grid-template-columns:1fr auto;gap:48px;
  align-items:end;
}
.portfolio-title{
  font-family:var(--np);font-weight:900;font-style:normal;
  font-size:clamp(48px,7vw,112px);line-height:0.9;letter-spacing:-0.02em;
}
.portfolio-title em{ font-style:normal; color:var(--green);}
.portfolio-meta{
  display:flex;flex-direction:column;gap:6px;align-items:flex-end;
}
.portfolio-meta .label{
  font-family:var(--ui);font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--khaki);
}
.portfolio-meta .count{
  font-family:var(--np);font-weight:800;font-size:32px;color:var(--green);
}
.mosaic{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows: 88px;
  grid-auto-flow: dense;
  align-items:stretch;
  gap:var(--gutter);
}
.tile{
  position:relative;display:block;
  background:var(--slate);
  overflow:hidden;
  cursor:pointer;
}
.tile-thumb{
  position:absolute;inset:0;width:100%;height:100%;
  transition:transform 600ms var(--ease), filter 400ms var(--ease);
}
.tile:hover .tile-thumb{ transform:scale(1.04); }
.tile-overlay{
  position:absolute;inset:0;z-index:2;
  background:rgba(20,26,23,0.0);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:32px;
  opacity:0;transition:opacity 280ms var(--ease), background 280ms var(--ease);
}
.tile:hover .tile-overlay{
  opacity:1; background:rgba(20,26,23,0.72);
}
.tile-overlay .play{
  width:64px;height:64px;border:1.5px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  transform:translateY(8px);transition:transform 320ms var(--ease) 80ms;
}
.tile:hover .tile-overlay .play{ transform:translateY(0); }
.tile-overlay .play svg{ width:18px;height:18px; }
.tile-overlay .ttl{
  font-family:var(--np);font-weight:800;font-style:normal;
  color:var(--white);font-size:32px;line-height:1;
  letter-spacing:-0.01em;
  transform:translateY(10px);transition:transform 360ms var(--ease) 100ms;
}
.tile:hover .tile-overlay .ttl{ transform:translateY(0); }
.tile-overlay .meta{
  margin-top:14px;
  font-family:var(--ui);font-size:11px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--green);
  transform:translateY(10px);transition:transform 380ms var(--ease) 140ms;
}
.tile:hover .tile-overlay .meta{ transform:translateY(0); }
.tile-corner{
  position:absolute;top:14px;left:14px;z-index:3;
  font-family:var(--ui);font-size:10px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(255,255,255,0.65);
  display:flex;align-items:center;gap:8px;
  background:rgba(20,26,23,0.5);padding:6px 10px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.tile.feat .tile-corner{
  background:var(--green);color:var(--black);font-weight:600;
}

/* mosaic placeholder fill (no real thumbs) */
.thumb-ph{
  width:100%;height:100%;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, var(--slate) 0%, #1f2b28 100%);
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.thumb-ph::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 30%, rgba(198,240,0,0.06) 0, transparent 60%);
}
.thumb-ph .ph-label{
  font-family:var(--ui), monospace;font-size:11px;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--olive);
  position:relative;
  border:1px solid rgba(172,169,153,0.18);
  padding:8px 14px;
}
/* vibrant placeholder tones (when no thumbnail) */
.thumb-ph.t1{ background:linear-gradient(135deg,#C6F000 0%,#5a7a00 60%,#1a2a00 100%);}
.thumb-ph.t2{ background:linear-gradient(135deg,#FF5C00 0%,#8a2e00 60%,#2a0e00 100%);}
.thumb-ph.t3{ background:linear-gradient(135deg,#00d8ff 0%,#005a7a 60%,#001a2a 100%);}
.thumb-ph.t4{ background:linear-gradient(135deg,#ff2d8a 0%,#7a0e44 60%,#2a0418 100%);}
.thumb-ph.t5{ background:linear-gradient(135deg,#9d00ff 0%,#3e0a66 60%,#15022a 100%);}
.thumb-ph.t6{ background:linear-gradient(135deg,#C6F000 0%,#FF5C00 100%);}
.thumb-ph::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 70%, rgba(0,0,0,0.4) 0, transparent 70%);
}
.thumb-ph .ph-label{ position:relative; z-index:2; mix-blend-mode:difference; color:#fff; }

/* mosaic — DECONSTRUÍDO: tiles com col-span × row-span variados.
   grid-auto-flow:dense encaixa peças menores nos buracos automaticamente. */
.mosaic{ grid-auto-flow: dense; align-items:stretch; }
.tile{ /* shape vem da classe .t-* */ }

/* tamanhos de tile — col×row, com row=88px + gap=24px gera ARs naturais */
.t-hero      { grid-column: span 8; grid-row: span 5; }   /* hero ~16:9 grande */
.t-wide      { grid-column: span 6; grid-row: span 3; }   /* 16:9 médio */
.t-wide-sm   { grid-column: span 4; grid-row: span 2; }   /* 16:9 pequeno */
.t-photo     { grid-column: span 6; grid-row: span 4; }   /* 4:3 médio */
.t-photo-sm  { grid-column: span 4; grid-row: span 3; }   /* 4:3 pequeno */
.t-square    { grid-column: span 4; grid-row: span 4; }   /* quadrado */
.t-square-sm { grid-column: span 3; grid-row: span 3; }   /* quadrado pequeno */
.t-port      { grid-column: span 3; grid-row: span 4; }   /* 3:4 retrato */
.t-port-lg   { grid-column: span 4; grid-row: span 5; }   /* 4:5 retrato grande */
.t-reel      { grid-column: span 3; grid-row: span 5; }   /* 9:16 reel */
.t-mini      { grid-column: span 3; grid-row: span 2; }   /* mini wide */

/* destaques crescem 1 nível */
.tile.feat.t-hero  { grid-column: span 12; grid-row: span 6; }
.tile.feat.t-wide  { grid-column: span 8;  grid-row: span 4; }
.tile.feat.t-photo { grid-column: span 8;  grid-row: span 5; }
.tile.feat.t-port  { grid-column: span 4;  grid-row: span 5; }

/* override manual: displayAspect preenchido no admin → AR fixo, altura livre */
.tile[style*="--ar"]{
  aspect-ratio: var(--ar);
  grid-row: auto;
}

/* o thumb interno NUNCA corta — preserva proporção e centraliza */
.tile-thumb{
  background: var(--slate);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  width:100%;height:100%;
}
.tile-thumb img{
  width:100%;height:100%;
  object-fit: cover;     /* default */
  display:block;
}
/* quando o tile já está com a proporção do vídeo, cover == sem corte */
.tile-thumb[data-fit="contain"] img{
  object-fit: contain;
  background: var(--slate);
}

.portfolio-foot{
  max-width:var(--maxw);margin:96px auto 0;
  display:flex;justify-content:center;
}

/* ============ CONTATO ============ */
.contact{
  background:var(--black);
  padding:128px var(--margin);
  position:relative;
  border-top:1px solid rgba(172,169,153,0.1);
}
.contact-inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr;gap:96px;align-items:end;
}
.contact-headline{
  font-family:var(--np);font-weight:900;font-style:normal;
  font-size:clamp(56px,8vw,132px);line-height:0.88;letter-spacing:-0.02em;
  color:var(--white);
}
.contact-headline em{ font-style:normal; color:var(--green);}
.contact-sub{
  font-family:var(--ui);font-size:18px;font-weight:400;
  color:var(--khaki);max-width:42ch;line-height:1.55;
  margin-top:32px;
}
.contact-channels{
  display:flex;flex-direction:column;gap:0;
  border-top:1px solid rgba(172,169,153,0.18);
}
.channel{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0;
  border-bottom:1px solid rgba(172,169,153,0.18);
  transition:padding 220ms var(--ease);
}
.channel:hover{ padding-left:14px; }
.channel:hover .channel-val{ color:var(--green); }
.channel-label{
  font-family:var(--ui);font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--khaki);
  width:120px;
}
.channel-val{
  font-family:var(--np);font-weight:700;font-size:22px;
  color:var(--white);
  transition:color 220ms var(--ease);
  display:flex;align-items:center;gap:14px;
}
.channel-val .arrow{ font-size:14px; opacity:0.4; transition:opacity 220ms var(--ease); }
.channel:hover .channel-val .arrow{ opacity:1; }
.contact-cta{
  margin-top:40px;
}

/* ============ FOOTER ============ */
.footer{
  background:var(--black);
  padding:96px var(--margin) 32px;
  border-top:1px solid rgba(172,169,153,0.18);
}
.footer-tagline{
  max-width:var(--maxw);margin:0 auto;
  font-family:var(--np);font-weight:900;font-style:normal;
  font-size:clamp(48px,9vw,176px);line-height:0.86;letter-spacing:-0.025em;
  color:var(--white);
}
.footer-tagline em{ font-style:normal; color:var(--green);}
.footer-grid{
  max-width:var(--maxw);margin:96px auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:48px;
  padding-top:32px;
  border-top:1px solid rgba(172,169,153,0.18);
}
.footer-col h4{
  font-family:var(--ui);font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--khaki);
  margin-bottom:18px;
}
.footer-col ul{ list-style:none; display:flex;flex-direction:column;gap:8px; }
.footer-col li{
  font-family:var(--ui);font-size:14px;font-weight:400;color:var(--olive);line-height:1.5;
}
.footer-col li a:hover{ color:var(--green); }
.footer-bot{
  max-width:var(--maxw);margin:64px auto 0;
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;
  border-top:1px solid rgba(172,169,153,0.1);
}
.footer-bot .copy{
  font-family:var(--ui);font-size:11px;font-weight:400;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--olive);
}
.footer-bot .legal{
  font-family:var(--ui);font-size:11px;font-weight:400;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--olive);
}

/* ============ PROJECT PAGE ============ */
.proj-wrap{
  background:var(--black);min-height:100vh;
  padding-top:64px;
}
.proj-hero{
  max-width:var(--maxw);margin:0 auto;
  padding:64px var(--margin) 0;
}
.proj-breadcrumb{
  display:flex;gap:8px;align-items:center;
  font-family:var(--ui);font-size:11px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--khaki);
  margin-bottom:48px;
}
.proj-breadcrumb a:hover{ color:var(--green);}
.proj-breadcrumb .sep{ color:var(--olive);opacity:0.5;}
.proj-title{
  font-family:var(--np);font-weight:900;font-style:normal;
  font-size:clamp(48px,7vw,112px);line-height:0.9;letter-spacing:-0.02em;
  color:var(--white);
  max-width:18ch;
}
.proj-title em{ font-style:normal; color:var(--green); }
.proj-player{
  max-width:var(--maxw);margin:64px auto 0;
  padding:0 var(--margin);
}
.proj-player-frame{
  position:relative;width:100%;aspect-ratio:16/9;
  background:var(--slate);overflow:hidden;
  cursor:pointer;
}
.proj-player-frame .poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 600ms var(--ease), filter 400ms var(--ease);
}
.proj-player-frame:hover .poster{ filter:brightness(0.85); transform:scale(1.02); }
.proj-player-frame .play-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:96px;height:96px;
  background:var(--green);color:var(--black);
  display:flex;align-items:center;justify-content:center;
  z-index:2;transition:transform 220ms var(--ease);
}
.proj-player-frame:hover .play-btn{ transform:translate(-50%,-50%) scale(1.06); }
.proj-player-frame .play-btn svg{ width:28px;height:28px;margin-left:4px; }
.proj-meta-tag{
  position:absolute;top:16px;left:16px;z-index:2;
  font-family:var(--ui);font-size:10px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--white);
  background:rgba(20,26,23,0.6);padding:8px 12px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.ficha{
  max-width:var(--maxw);margin:96px auto 0;
  padding:0 var(--margin);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:48px;
}
.ficha-item{
  display:flex;flex-direction:column;gap:14px;
  padding:0;border:0;
}
.ficha-label{
  font-family:var(--ui);font-size:10px;font-weight:500;
  letter-spacing:0.26em;text-transform:uppercase;color:var(--olive);
}
.ficha-val{
  font-family:var(--np);font-size:28px;font-weight:700;
  letter-spacing:-0.01em;color:var(--white);line-height:1;
}
.proj-nav{
  max-width:var(--maxw);margin:80px auto 0;
  padding:0 var(--margin) 96px;
  display:grid;grid-template-columns:1fr auto 1fr;gap:48px;
  align-items:center;
}
.proj-nav-link{
  display:flex;flex-direction:column;gap:6px;
  cursor:pointer;
}
.proj-nav-link.next{ text-align:right; align-items:flex-end; }
.proj-nav-link .l{
  font-family:var(--ui);font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--khaki);
}
.proj-nav-link .t{
  font-family:var(--np);font-weight:700;font-size:16px;
  letter-spacing:-0.005em;
  color:var(--white);transition:color 200ms var(--ease);
}
.proj-nav-link:hover .t{ color:var(--green); }
.proj-nav-back{
  font-family:var(--ui);font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--khaki);
  padding:14px 22px;border:1px solid rgba(172,169,153,0.3);
  transition:all 200ms var(--ease);
}
.proj-nav-back:hover{ background:var(--green);color:var(--black);border-color:var(--green);}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px){
  :root{ --margin: 24px; }
  .about-inner{ grid-template-columns:1fr; gap:48px; }
  .about-stats{ grid-template-columns:repeat(2,1fr); }
  .contact-inner{ grid-template-columns:1fr; gap:48px; }
  .footer-grid{ grid-template-columns:repeat(2,1fr); }
  .portfolio-head{ grid-template-columns:1fr; gap:24px; }
  .portfolio-meta{ align-items:flex-start; }
  .ficha{ grid-template-columns:1fr; }
  .ficha-item{ padding:24px 0 !important; border-right:none !important; border-bottom:1px solid rgba(172,169,153,0.12); }
  .ficha-item:last-child{ border-bottom:none; }
  .proj-nav{ grid-template-columns:1fr; gap:24px; text-align:left; }
  .proj-nav-link.next{ text-align:left; align-items:flex-start; }
}
@media (max-width: 768px){
  .hero-sub{
    white-space:normal;
    text-wrap:balance;
    max-width:32ch;
    margin-left:auto;margin-right:auto;
    text-align:center;
  }
  .nav{ gap:18px; }
  .nav a{ font-size:11px;letter-spacing:0.1em; }
  .hero-meta, .hero-video-tag, .hero-scroll{ display:none; }
  .mosaic{ grid-template-columns:1fr; grid-auto-rows:auto; gap:16px; }
  /* Força 16:9 via padding-bottom (truque clássico) — funciona em qualquer
     versão de Safari/Chrome, sem depender de aspect-ratio. */
  .mosaic > *{
    grid-column: span 1 !important;
    grid-row: auto !important;
    aspect-ratio: auto !important;
    height: 0 !important;
    padding-bottom: 56.25% !important;
    position: relative !important;
  }
  .footer-bot{ flex-direction:column;gap:12px;align-items:flex-start; }
  .channel{ flex-direction:column;align-items:flex-start;gap:6px; }
  .channel-label{ width:auto; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    transition-duration:0.001ms !important;
  }
}

/* tweak panel safe area */
[data-tweak-host]{ z-index:200; }

/* ============ LOADING SKELETONS (thumbs) ============ */
.tile-thumb.thumb-loading{
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.02) 0%,
      rgba(255,255,255,0.08) 50%,
      rgba(255,255,255,0.02) 100%
    ),
    var(--slate);
  background-size: 200% 100%, 100% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ background-position: 100% 0, 0 0; }
  100%{ background-position: -100% 0, 0 0; }
}
.tile-thumb img{
  opacity: 0;
  transition: opacity 350ms ease;
}
.tile-thumb img.loaded{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .tile-thumb.thumb-loading{ animation:none; }
  .tile-thumb img{ transition:none; }
}

/* ============ WHATSAPP FLUTUANTE ============ */
.whats-fab{
  position:fixed; bottom:24px; right:24px; z-index:150;
  width:56px; height:56px; border-radius:50%;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.05);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
  text-decoration:none;
}
.whats-fab svg{ width:30px; height:30px; }
.whats-fab:hover{
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(37,211,102,0.5), 0 0 0 1px rgba(0,0,0,0.05);
}
.whats-fab:active{ transform: scale(0.96); }
/* respiração suave pra chamar atenção sem incomodar */
@keyframes whatsPulse{
  0%, 70%, 100%{ box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 0 rgba(37,211,102,0.5); }
  85%{ box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 14px rgba(37,211,102,0); }
}
.whats-fab{ animation: whatsPulse 3.5s ease-out infinite; }
@media (max-width: 768px){
  .whats-fab{ bottom:16px; right:16px; width:52px; height:52px; }
  .whats-fab svg{ width:28px; height:28px; }
}
@media (prefers-reduced-motion: reduce){
  .whats-fab{ animation:none; }
}