/* ─── Home loading — sticky intro que abre revelando o disorder ─────────────────── */

.home-loading {
  position: relative;
  min-height: 200svh;
  overflow: visible;
  /* SEM background — a section fica transparente pra o disorder-hero
     (z:1, sobreposto via margin-top negativo) aparecer por trás nos
     100svh finais do scroll, quando a cortina já dissolveu. */
  background: transparent;
  z-index: 3;
  --loading-progress: 0;
  /* Começa invisível — só aparece quando body.is-fully-loaded fica true
     (todos os assets — videos, images, fonts — terminaram de carregar). */
  opacity: 0 !important;
  transform: none !important;
  transition: opacity 600ms var(--ease-framer);
}

body.is-fully-loaded .home-loading {
  opacity: 1 !important;
}

/* Enquanto o site está carregando (antes de is-fully-loaded), body
   inteiro fica AMARELO (mesma cor da cortina do C) pra não ficar tudo
   preto durante o carregamento — remete visualmente ao próximo estado. */
body:not(.is-fully-loaded) {
  background: #ECFE2F;
}

.home-loading__stage {
  position: sticky;
  top: 0;
  z-index: 3;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  background-color: transparent;
  /* SEM isolation: isolate — deixa o disorder-hero (que está sobreposto
     via margin-top -200svh atrás da loading) aparecer através dos
     buracos que os strips criam na cortina amarela. */
}

/*
 * z:5 — vídeo videobase.mp4 mascarado à forma do C via CSS mask-image
 * (case.png raster — funciona uniformemente em Safari/Chrome/Firefox).
 * Fica ACIMA do bgchaos, aparecendo como o "C letter" recortado do
 * vídeo de fundo.
 */
.home-loading__bg-video {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.05);
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: url("../images/loading/case.png");
  mask-image: url("../images/loading/case.png");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: auto min(50svh, 22rem);
  mask-size: auto min(50svh, 22rem);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: clamp(0, calc(1 - (var(--loading-progress, 0) - 0.55) * 3), 1);
  will-change: opacity;
}

/*
 * ERRORTEXTS — bloco de textos "CLAREZA FLUIDEZ NARRATIVA..." posicionado
 * acima e sobre o topo do C. Entra com animação de interferência (clip-path
 * bands em steps duros, feel de TV analógica) na primeira meio-segundo,
 * depois fica estável. Some junto com o C perto do fim do loading.
 */
.home-loading__errortexts {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  /* Bem maior — antes 32vw/20svh, agora 44vw/32svh, ocupando faixa
     ampla acima e sobre o topo do C conforme referência. */
  max-width: min(44vw, 30rem);
  max-height: min(32svh, 18rem);
  /* Ancorado no centro do viewport, deslocado pra CIMA. -30svh cobre
     do y ~18% até y ~50% (sobrepondo o topo do C que começa em 25%). */
  transform: translate(-50%, -30svh);
  pointer-events: none;
  user-select: none;
  opacity: clamp(0, calc(1 - (var(--loading-progress, 0) - 0.55) * 3), 1);
  animation:
    loading-errortexts-in 1100ms steps(1, end) 100ms 1 both,
    loading-errortexts-glitch 2.6s steps(1, end) 1.3s infinite;
  will-change: opacity, transform, clip-path;
}

/*
 * Entrada — interferência TV MAIS PRONUNCIADA. Translates até ±20px
 * (era ±10px), 10 keyframes de bandas alternadas, revelação dura em
 * blocos como sinal de TV falhando antes de estabilizar.
 */
@keyframes loading-errortexts-in {
  0%   { clip-path: inset(0 0 100% 0); transform: translate(-50%, -30svh) translate(-18px, -4px); }
  8%   { clip-path: inset(0 0 65% 0); transform: translate(-50%, -30svh) translate(20px, 6px); }
  16%  { clip-path: inset(0 0 30% 0); transform: translate(-50%, -30svh) translate(-14px, -5px); }
  24%  { clip-path: inset(58% 0 0 0); transform: translate(-50%, -30svh) translate(16px, 3px); }
  32%  { clip-path: inset(24% 0 48% 0); transform: translate(-50%, -30svh) translate(-12px, 5px); }
  42%  { clip-path: inset(0 0 0 0); transform: translate(-50%, -30svh) translate(14px, -3px); }
  55%  { clip-path: inset(46% 0 22% 0); transform: translate(-50%, -30svh) translate(-10px, 2px); }
  68%  { clip-path: inset(0 0 34% 0); transform: translate(-50%, -30svh) translate(8px, -2px); }
  80%  { clip-path: inset(0 0 12% 0); transform: translate(-50%, -30svh) translate(-4px, 1px); }
  92%  { clip-path: inset(0 0 0 0); transform: translate(-50%, -30svh) translate(3px, 0); }
  100% { clip-path: inset(0 0 0 0); transform: translate(-50%, -30svh); }
}

/*
 * Glitch contínuo — agora MAIS VISÍVEL. Antes 3% do ciclo com jitter
 * de ~2px. Agora 15% do ciclo com múltiplas bandas + translates de
 * ±8px em bursts curtos, feel de TV com sinal instável.
 */
@keyframes loading-errortexts-glitch {
  0%, 84%, 100% { transform: translate(-50%, -30svh); clip-path: inset(0 0 0 0); }
  85%           { transform: translate(-50%, -30svh) translate(8px, 0);   clip-path: inset(20% 0 55% 0); }
  87%           { transform: translate(-50%, -30svh) translate(-6px, 3px); clip-path: inset(52% 0 12% 0); }
  89%           { transform: translate(-50%, -30svh) translate(5px, -2px); clip-path: inset(0 0 68% 0); }
  91%           { transform: translate(-50%, -30svh) translate(-3px, 2px); clip-path: inset(38% 0 32% 0); }
  93%           { transform: translate(-50%, -30svh) translate(4px, 0);   clip-path: inset(0 0 0 0); }
}

/*
 * MOBILE — errortexts bem maior (era 44vw/32svh, agora 78vw/28svh)
 * pra ganhar peso visual em tela pequena. Translate ajustado (-26svh
 * em vez de -30svh) pra caber acima do C sem cortar. Ambas animações
 * (entrada + glitch) usam keyframes mobile pra manter a posição
 * consistente durante todo o ciclo.
 */
@media (max-width: 760px) {
  .home-loading__errortexts {
    max-width: min(78vw, 28rem);
    max-height: min(28svh, 16rem);
    transform: translate(-50%, -26svh);
    animation:
      loading-errortexts-in-mobile 1100ms steps(1, end) 100ms 1 both,
      loading-errortexts-glitch-mobile 2.6s steps(1, end) 1.3s infinite;
  }

  @keyframes loading-errortexts-in-mobile {
    0%   { clip-path: inset(0 0 100% 0); transform: translate(-50%, -26svh) translate(-18px, -4px); }
    8%   { clip-path: inset(0 0 65% 0); transform: translate(-50%, -26svh) translate(20px, 6px); }
    16%  { clip-path: inset(0 0 30% 0); transform: translate(-50%, -26svh) translate(-14px, -5px); }
    24%  { clip-path: inset(58% 0 0 0); transform: translate(-50%, -26svh) translate(16px, 3px); }
    32%  { clip-path: inset(24% 0 48% 0); transform: translate(-50%, -26svh) translate(-12px, 5px); }
    42%  { clip-path: inset(0 0 0 0); transform: translate(-50%, -26svh) translate(14px, -3px); }
    55%  { clip-path: inset(46% 0 22% 0); transform: translate(-50%, -26svh) translate(-10px, 2px); }
    68%  { clip-path: inset(0 0 34% 0); transform: translate(-50%, -26svh) translate(8px, -2px); }
    80%  { clip-path: inset(0 0 12% 0); transform: translate(-50%, -26svh) translate(-4px, 1px); }
    92%  { clip-path: inset(0 0 0 0); transform: translate(-50%, -26svh) translate(3px, 0); }
    100% { clip-path: inset(0 0 0 0); transform: translate(-50%, -26svh); }
  }

  @keyframes loading-errortexts-glitch-mobile {
    0%, 84%, 100% { transform: translate(-50%, -26svh); clip-path: inset(0 0 0 0); }
    85%           { transform: translate(-50%, -26svh) translate(8px, 0);   clip-path: inset(20% 0 55% 0); }
    87%           { transform: translate(-50%, -26svh) translate(-6px, 3px); clip-path: inset(52% 0 12% 0); }
    89%           { transform: translate(-50%, -26svh) translate(5px, -2px); clip-path: inset(0 0 68% 0); }
    91%           { transform: translate(-50%, -26svh) translate(-3px, 2px); clip-path: inset(38% 0 32% 0); }
    93%           { transform: translate(-50%, -26svh) translate(4px, 0);   clip-path: inset(0 0 0 0); }
  }
}

/*
 * Video source pro canvas — invisível no layout, só serve como frame source
 * pro requestAnimationFrame do JS que desenha no canvas.
 */
.home-loading__glitch {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/*
 * z:4 — canvas que renderiza bgchaos com strip cutouts REAIS
 * (destination-out). Os strips viram buracos transparentes no vídeo,
 * revelando o hero atrás. Funciona uniforme em Safari/Chrome/Firefox
 * porque usa canvas 2D básico.
 */
.home-loading__canvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  opacity: clamp(0, calc(1 - (var(--loading-progress, 0) - 0.55) * 3), 1);
  will-change: opacity;
}

/*
 * z:6 — container dos strips (divs pretos absolutos).
 * Cada strip é um <div> preto com scaleX + translateX outward,
 * simulando o "corte" ao cobrir o bgchaos.
 */
.home-loading__strips {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

/* Strips agora são cortes REAIS desenhados no canvas via JS (destination-out
   em setupLoadingCanvas). Não usamos mais divs. */


/*
 * z:2 — backdrop da hero (backtop.png). Estendido pra 100% do viewport
 * (não só 45%) pra evitar o "corte horizontal" no meio da tela — assim
 * quando os strips revelam ou a cortina abre, temos o backdrop em toda
 * a área da viewport, uniforme.
 */
.home-loading__hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  user-select: none;
}

/* z:2 — disorder preview (grid 45/55) que sobe com parallax. */
.home-loading__disorder-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: 45% 55%;
  pointer-events: none;
  transform:
    translateY(calc((1 - var(--loading-progress, 0)) * 55%))
    scale(calc(0.94 + var(--loading-progress, 0) * 0.06));
  opacity: clamp(0, calc((var(--loading-progress, 0) - 0.15) * 4), 1);
  will-change: transform, opacity;
}

.home-loading__disorder-top,
.home-loading__disorder-bottom {
  position: relative;
  overflow: hidden;
}

.home-loading__disorder-bottom {
  background-color: #000;
}

.home-loading__disorder-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  user-select: none;
}

.home-loading__disorder-title {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(60vw, 70rem);
  height: auto;
  transform: translate(-50%, -50%);
  user-select: none;
  opacity: calc(0.55 + var(--loading-progress, 0) * 0.5);
  z-index: 2;
  will-change: opacity;
}

.home-loading__disorder-subtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100vw, 120rem);
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  user-select: none;
  opacity: clamp(0, calc((var(--loading-progress, 0) - 0.55) * 3.5), 1);
  z-index: 1;
  will-change: opacity;
}

.home-loading__disorder-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(40vw, 46rem);
  height: auto;
  transform: translate(-50%, -50%);
  user-select: none;
  opacity: clamp(0, calc((var(--loading-progress, 0) - 0.7) * 4), 1);
  z-index: 2;
  will-change: opacity;
}



/* z:6 — corner text FOLLOW US / INSTAGRAM / VIMEO */
.home-loading__corner {
  position: absolute;
  z-index: 6;
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(1rem, 3vw, 3rem);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
  color: rgba(0, 0, 0, 0.78);
  font-size: clamp(0.55rem, 0.72vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.55;
  opacity: calc(1 - var(--loading-progress, 0) * 1.3);
  pointer-events: none;
  user-select: none;
}

.home-loading__corner span {
  display: block;
}

/*
 * Copyright no canto inferior esquerdo — mesma fonte/tratamento do
 * corner (Helvetica Neue uppercase 0.14em). Complementa o corner
 * (bottom-right) na composição do rodapé da loading.
 */
.home-loading__copyright {
  position: absolute;
  z-index: 6;
  bottom: clamp(1rem, 3vw, 3rem);
  left: clamp(1rem, 3vw, 3rem);
  margin: 0;
  color: rgba(0, 0, 0, 0.78);
  font-size: clamp(0.55rem, 0.72vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.55;
  text-align: left;
  opacity: calc(1 - var(--loading-progress, 0) * 1.3);
  pointer-events: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-loading {
    min-height: 100svh;
  }
  .home-loading__strip {
    transform: none;
  }
}

.disorder-hero {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  background: #060c10;
}

.disorder-hero__stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 40svh 60svh;
  isolation: isolate;
}

.page--stack .disorder-hero__stage {
  grid-template-rows: 45svh 110svh;
  min-height: 155svh;
}

.disorder-hero__top,
.disorder-hero__bottom {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* __bottom stays transparent so the stage-wide fundo.gif shows through. */
.disorder-hero__bottom {
  background: transparent;
  isolation: isolate;
}

.disorder-hero__bg-layer,
.disorder-hero__background,
.disorder-hero__barras,
.disorder-hero__layer {
  position: absolute;
  height: auto;
  user-select: none;
}

/* barras.png — sobreposta ao backtop.png e alinhada ao topo do __top.
   Fica acima do background (z:0) e abaixo do título (z:10). */
.disorder-hero__barras {
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Glitch só ativa depois do entrance transition — evita conflito de opacity. */
.reveal-section.is-visible .disorder-hero__barras {
  animation:
    disorder-glitch-jitter-b 5.1s steps(1, end) 900ms infinite,
    disorder-glitch-dropout-b 3.9s steps(1, end) 1400ms infinite;
}

/*
 * Glitch tipo INTERFERÊNCIA DE TV — sem alterar cor, só translate + skew
 * pra "picar/rasgar" a imagem e opacity dips fortes pra "signal loss".
 * Motion mais MARCADO: períodos de calma alternados com surtos rápidos
 * (o clássico "roll-tear-recover" de sinal analógico). ease-in-out mantém
 * o fluxo suave entre eventos, sem cortes bruscos.
 * Cada elemento (a/b/c) tem fases distintas — nunca sincroniza.
 */

/* bg-layer: horizontal tear + vertical roll + signal-loss forte */
@keyframes disorder-glitch-jitter-a {
  0%, 12%  { transform: translate3d(0, 0, 0) skewX(0deg); }
  15%      { transform: translate3d(-14px, 0, 0) skewX(-2.5deg); }
  17%      { transform: translate3d(11px, 0, 0) skewX(2deg); }
  19%, 34% { transform: translate3d(0, 0, 0) skewX(0deg); }
  38%      { transform: translate3d(0, -6px, 0) skewX(0deg); }
  42%      { transform: translate3d(0, 4px, 0) skewX(0deg); }
  46%, 62% { transform: translate3d(0, 0, 0) skewX(0deg); }
  65%      { transform: translate3d(-9px, 3px, 0) skewX(-1.6deg); }
  68%      { transform: translate3d(7px, -3px, 0) skewX(1.4deg); }
  71%, 86% { transform: translate3d(0, 0, 0) skewX(0deg); }
  89%      { transform: translate3d(-5px, 0, 0) skewX(-1deg); }
  91%      { transform: translate3d(4px, 0, 0) skewX(0.8deg); }
  93%, 100%{ transform: translate3d(0, 0, 0) skewX(0deg); }
}
@keyframes disorder-glitch-dropout-a {
  0%, 14%, 100% { opacity: 1; }
  16%           { opacity: 0.25; }
  18%           { opacity: 0.9; }
  40%           { opacity: 0.55; }
  44%           { opacity: 1; }
  67%           { opacity: 0.18; }
  70%           { opacity: 0.95; }
  90%           { opacity: 0.4; }
  93%           { opacity: 1; }
}

/* barras: displacements horizontais mais frequentes (barras "cortando" horizontal) */
@keyframes disorder-glitch-jitter-b {
  0%, 8%   { transform: translate3d(0, 0, 0) skewX(0deg); }
  11%      { transform: translate3d(9px, 0, 0) skewX(1.8deg); }
  13%      { transform: translate3d(-7px, 0, 0) skewX(-1.4deg); }
  15%, 30% { transform: translate3d(0, 0, 0) skewX(0deg); }
  32%      { transform: translate3d(-12px, 2px, 0) skewX(-2.2deg); }
  34%      { transform: translate3d(10px, -1px, 0) skewX(1.8deg); }
  37%, 55% { transform: translate3d(0, 0, 0) skewX(0deg); }
  58%      { transform: translate3d(6px, 3px, 0) skewX(1deg); }
  60%      { transform: translate3d(-8px, -2px, 0) skewX(-1.3deg); }
  63%, 82% { transform: translate3d(0, 0, 0) skewX(0deg); }
  84%      { transform: translate3d(11px, 0, 0) skewX(2deg); }
  86%      { transform: translate3d(-9px, 1px, 0) skewX(-1.5deg); }
  89%, 100%{ transform: translate3d(0, 0, 0) skewX(0deg); }
}
@keyframes disorder-glitch-dropout-b {
  0%, 10%, 100% { opacity: 1; }
  12%           { opacity: 0.3; }
  15%           { opacity: 0.85; }
  35%           { opacity: 0.5; }
  38%           { opacity: 1; }
  60%           { opacity: 0.2; }
  63%           { opacity: 0.9; }
  85%           { opacity: 0.45; }
  88%           { opacity: 1; }
}

/* error: fase mais viva, mais surtos por ciclo — overlay principal do glitch */
@keyframes disorder-glitch-jitter-c {
  0%, 6%   { transform: translate3d(0, 0, 0) skewX(0deg); }
  9%       { transform: translate3d(-13px, 2px, 0) skewX(-2.4deg); }
  11%      { transform: translate3d(10px, -2px, 0) skewX(2deg); }
  14%, 26% { transform: translate3d(0, 0, 0) skewX(0deg); }
  29%      { transform: translate3d(0, -8px, 0) skewX(0deg); }
  32%      { transform: translate3d(0, 5px, 0) skewX(0deg); }
  35%, 48% { transform: translate3d(0, 0, 0) skewX(0deg); }
  51%      { transform: translate3d(-11px, 0, 0) skewX(-2deg); }
  53%      { transform: translate3d(9px, 2px, 0) skewX(1.6deg); }
  56%, 72% { transform: translate3d(0, 0, 0) skewX(0deg); }
  75%      { transform: translate3d(8px, 0, 0) skewX(1.5deg); }
  77%      { transform: translate3d(-6px, 0, 0) skewX(-1.2deg); }
  80%, 92% { transform: translate3d(0, 0, 0) skewX(0deg); }
  94%      { transform: translate3d(-4px, 3px, 0) skewX(-0.8deg); }
  96%      { transform: translate3d(3px, -3px, 0) skewX(0.7deg); }
  98%, 100%{ transform: translate3d(0, 0, 0) skewX(0deg); }
}
@keyframes disorder-glitch-dropout-c {
  0%, 7%, 100% { opacity: 1; }
  10%          { opacity: 0.15; }
  13%          { opacity: 0.85; }
  30%          { opacity: 0.4; }
  33%          { opacity: 1; }
  52%          { opacity: 0.22; }
  55%          { opacity: 0.9; }
  76%          { opacity: 0.5; }
  78%          { opacity: 1; }
  95%          { opacity: 0.35; }
  97%          { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .disorder-hero__bg-layer,
  .disorder-hero__barras,
  .disorder-hero__error {
    animation: none;
    filter: none;
  }
}

/* Animated GIF layer — a stage-wide sibling of __top/__bottom. Sits above
   the black section bg (z:0) and is covered in the upper 45svh by the
   opaque backtop.png. Visible across the lower 55svh because __bottom is
   transparent. */
.disorder-hero__bg-layer {
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  will-change: transform, opacity;
  animation:
    disorder-glitch-jitter-a 6.3s steps(1, end) infinite,
    disorder-glitch-dropout-a 4.7s steps(1, end) 0.8s infinite;
}

/* errorelement.png — overlay full-stage, glitch mais vivo mas ainda contínuo. */
.disorder-hero__error {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
}

.reveal-section.is-visible .disorder-hero__error {
  animation:
    disorder-glitch-jitter-c 4.4s steps(1, end) 1000ms infinite,
    disorder-glitch-dropout-c 3.3s steps(1, end) 1600ms infinite;
}


.disorder-hero__background {
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.disorder-hero__layer {
  transform: translateZ(0);
}

/*
 * COMPOSIÇÃO CENTRAL — flex column que empilha palavras + box
 * verticalmente centrados no viewport. Substitui o positioning
 * absoluto individual (que separava demais o texto do box).
 * Pontuações: z-index alto (10) pra ficar sobre backdrop/barras/error.
 */
.disorder-hero__composition {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3.5svh, 3rem);
  padding: 8svh var(--container-gutter);
  pointer-events: none;
}

/*
 * FULLSCREEN VARIANT — vídeo cobrindo toda a hero como bg, título +
 * box centralizados sobrepostos ao vídeo com overlay escuro pra
 * legibilidade.
 */
.disorder-hero--fullscreen {
  min-height: 100svh;
  height: 100svh;
}

.disorder-hero--fullscreen .disorder-hero__stage {
  display: block;
  min-height: 100svh;
  height: 100svh;
}

.disorder-hero__bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

/*
 * Overlay escuro sobre o vídeo pra legibilidade do título/box.
 * Gradiente sutil radial escurece mais nas bordas.
 */
.disorder-hero--fullscreen .disorder-hero__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(5, 5, 5, 0.35) 0%, rgba(5, 5, 5, 0.65) 100%);
  pointer-events: none;
}

/* No fullscreen variant, composition centraliza sem padding-top pro C */
.disorder-hero--fullscreen .disorder-hero__composition {
  padding-top: 8svh;
}

/*
 * C-video — vídeo videobase.mp4 mascarado à forma do C (mesmo do
 * loading). Aparece no TOPO do hero, acima do título "DISORDER".
 * Continuidade visual entre o loading e o hero — quando a cortina
 * abre, o C fica posicionado aqui.
 */
.disorder-hero__c-frame {
  position: absolute;
  z-index: 11;
  top: clamp(4svh, 6svh, 8svh);
  left: 0;
  width: 100%;
  height: min(38svh, 26rem);
  pointer-events: none;
}

/*
 * Vídeo aparece como retângulo completo (sem máscara do C) pra ficar
 * totalmente visível no topo do hero.
 */
.disorder-hero__c-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.05);
}

/*
 * COMPOSITION LEFT-ALIGNED — segue o layoutguia:
 *   ▶▶ (cursor pequeno)
 *   DISORDER
 *   IS RAW        PÓS-PRODUCTION & VISUAL DEVELOPMENT
 *   MATERIAL                          ▶▶ THE CHAOS STUDIO
 */
.disorder-hero--fullscreen .disorder-hero__composition--left {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: clamp(2rem, 6vw, 8rem);
  right: clamp(2rem, 6vw, 8rem);
  transform: translateY(-50%);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.4rem, 1vw, 1.2rem);
  pointer-events: none;
}

.disorder-hero__word {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  user-select: none;
}

.disorder-hero__word--disorder {
  width: min(46vw, 54rem);
}

.disorder-hero__word--israw {
  width: min(30vw, 34rem);
}

.disorder-hero__word--material {
  width: min(42vw, 48rem);
}

/*
 * Linha com word + label inline (pos-production ao lado do IS RAW,
 * thechaos studio ao lado do MATERIAL).
 */
.disorder-hero__word-line {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  width: 100%;
}

.disorder-hero__inline-label {
  display: block;
  width: clamp(12rem, 20vw, 22rem);
  height: auto;
  user-select: none;
}

/* THE CHAOS STUDIO — margin-left auto empurra pra direita da linha */
.disorder-hero__inline-thechaos {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.disorder-hero__inline-thechaos img {
  display: block;
  width: clamp(10rem, 16vw, 18rem);
  height: auto;
}

/*
 * ▶▶ Cursor symbol — Space Mono amarelo, marcador editorial.
 */
.disorder-hero__cursor {
  display: inline-block;
  color: #edff31;
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.6rem);
  letter-spacing: -0.05em;
  line-height: 1;
  user-select: none;
}

.disorder-hero__cursor--top {
  margin-bottom: 0.4rem;
}

/*
 * Decorações nos cantos — bars + squares amarelos ancorados nos 4
 * cantos, seguindo o layoutguia (top-right stack, right-middle,
 * bottom-left, bottom-right).
 */
/*
 * Posicionamento dos grupos deco — cada grupo é ancorado em um canto
 * diferente pra distribuir as barras pelo layout (evitando o topo pra
 * não conflitar com o menu).
 */
.disorder-hero__deco {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

.disorder-hero__deco--rm { top: 50%; right: 0; transform: translateY(-50%); flex-direction: row; align-items: center; gap: 0; padding-right: clamp(1rem, 2vw, 2rem); }
.disorder-hero__deco--bl { bottom: clamp(2rem, 5vh, 5rem); left: 0; }
.disorder-hero__deco--br { bottom: clamp(3rem, 6vh, 6rem); right: 0; flex-direction: row; align-items: center; padding-right: clamp(2rem, 6vw, 8rem); }
.disorder-hero__deco--bm { bottom: clamp(1rem, 2vh, 2rem); left: 50%; transform: translateX(-50%); }

/*
 * BARRAS deslizam da sua BORDA de origem até a posição final. Barras
 * ancoradas à esquerda entram deslizando da esquerda (translateX -100%
 * → 0); ancoradas à direita entram da direita (translateX +100% → 0).
 */
.disorder-hero__deco-bar {
  display: block;
  height: 8px;
  background: #edff31;
  position: relative;
  transform: translateX(-120%);
  transition: transform 620ms var(--ease-framer);
}

/* Barras dos cantos direitos entram da direita */
.disorder-hero__deco--rm .disorder-hero__deco-bar,
.disorder-hero__deco--br .disorder-hero__deco-bar {
  transform: translateX(120%);
}

.disorder-hero__deco-square {
  display: block;
  width: 12px;
  height: 12px;
  background: #edff31;
  position: relative;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 300ms var(--ease-framer), transform 340ms var(--ease-framer);
}

/*
 * Sequência de entrada — timing sincronizado com a chegada dos textos
 * (disorder 400ms → is raw 850ms → material 1300ms):
 *   rm (right-mid): 700ms
 *   bl (bottom-lf): 1050ms
 *   br (bottom-rt): 1350ms
 *   bm (bottom-md): 1650ms
 */
.disorder-hero--fullscreen.reveal-section.is-visible .disorder-hero__deco--rm .disorder-hero__deco-bar,
.disorder-hero--fullscreen.reveal-section.is-visible .disorder-hero__deco--rm .disorder-hero__deco-square {
  transition-delay: 700ms;
}
.disorder-hero--fullscreen.reveal-section.is-visible .disorder-hero__deco--bl .disorder-hero__deco-bar,
.disorder-hero--fullscreen.reveal-section.is-visible .disorder-hero__deco--bl .disorder-hero__deco-square {
  transition-delay: 1050ms;
}
.disorder-hero--fullscreen.reveal-section.is-visible .disorder-hero__deco--br .disorder-hero__deco-bar,
.disorder-hero--fullscreen.reveal-section.is-visible .disorder-hero__deco--br .disorder-hero__deco-square {
  transition-delay: 1350ms;
}
.disorder-hero--fullscreen.reveal-section.is-visible .disorder-hero__deco--bm .disorder-hero__deco-square {
  transition-delay: 1650ms;
}

.disorder-hero--fullscreen.reveal-section.is-visible .disorder-hero__deco-bar {
  transform: translateX(0);
}
.disorder-hero--fullscreen.reveal-section.is-visible .disorder-hero__deco-square {
  opacity: 1;
  transform: scale(1);
}

/* Box menor +40% pra acompanhar a escala do texto. */
.disorder-hero__layer--center {
  z-index: 11;
  position: static;
  width: min(39vw, 45rem);
  height: auto;
  pointer-events: none;
  user-select: none;
  transform: none;
}

/*
 * Fundo com barrasmenores.png — textura decorativa cobrindo toda a
 * área do hero, ficando ATRÁS de tudo (z:0). Object-fit cover pra
 * escalar mantendo aspecto.
 */
.disorder-hero__barras-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  opacity: 0.55;
}

/*
 * Elementos decorativos nas laterais — ancorados nas bordas esquerda/direita,
 * centrados verticalmente no viewport. z-index baixo (5) pra ficarem
 * atrás da composição central mas acima do fundo.
 */
.disorder-hero__side {
  position: absolute;
  z-index: 5;
  top: 50%;
  height: auto;
  width: min(14vw, 12rem);
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}

.disorder-hero__side--left {
  left: 0;
}

.disorder-hero__side--right {
  right: 0;
}

/*
 * errorelement.png replicado 3× em posições fixas nas laterais.
 * Alternam esquerda/direita em alturas diferentes pra dar densidade
 * ao redor da composição central sem sobrepor as palavras.
 */
.disorder-hero__error-tile {
  position: absolute;
  z-index: 4;
  width: min(9vw, 8rem);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.85;
}

.disorder-hero__error-tile--1 {
  top: 12%;
  left: 4%;
}

.disorder-hero__error-tile--2 {
  top: 46%;
  right: 3%;
  transform: rotate(180deg);
}

.disorder-hero__error-tile--3 {
  bottom: 8%;
  left: 6%;
  transform: rotate(90deg);
}

/* ─── Sobreman hero (Manifesto text section) ────────────────────────────────────── */

.sobreman-hero {
  position: relative;
  min-height: 120svh;
  height: auto;
  overflow: hidden;
  background: #060c10;
}

.sobreman-hero__stage {
  position: relative;
  width: 100%;
  min-height: 120svh;
  padding-bottom: 8svh;
}

/*
 * TOP IMAGE — cadeira em chamas dominante no topo (60svh pra dar mais
 * área pra o texto sobrepor). Gradient overlay embaixo pra escurecer
 * a parte que fica atrás do texto e manter legibilidade.
 */
.sobreman-hero__top-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 60svh;
  object-fit: cover;
  object-position: center 30%;
  user-select: none;
  pointer-events: none;
  /* Escurece a metade inferior da imagem onde o texto vai sobrepor */
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, rgba(0,0,0,0.35) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, rgba(0,0,0,0.35) 100%);
}

/*
 * Elementos laterais (imagens da pasta sobreman). Diferentes do
 * disorder-hero (que usa imagens do disorder), dando identidade
 * própria pra essa seção.
 */
.sobreman-hero__side {
  position: absolute;
  z-index: 3;
  top: 55%;
  height: auto;
  width: min(12vw, 10rem);
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  opacity: 0.85;
}

.sobreman-hero__side--left {
  left: 0;
}

.sobreman-hero__side--right {
  right: 0;
}

/* erroelement decorativo — 2 tiles nos cantos oposto pra assinatura visual */
.sobreman-hero__error {
  position: absolute;
  z-index: 3;
  width: min(7vw, 6rem);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.7;
}

.sobreman-hero__error--tl {
  top: 54svh;
  left: 3%;
}

.sobreman-hero__error--br {
  bottom: 6%;
  right: 3%;
  transform: rotate(180deg);
}

/*
 * Bloco de conteúdo — título _Manifesto (esquerda) + texto do manifesto
 * empilhados abaixo da top image. Bloco centralizado, mas ambos título
 * e texto alinhados à esquerda dentro do bloco.
 */
.sobreman-hero__content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.4rem, 3svh, 2.4rem);
  /* Margem NEGATIVA puxa o content pra cima, fazendo ele se sobrepor
     à metade inferior da top image — texto aparece no meio da imagem. */
  margin: -32svh auto 0;
  padding: 0 var(--container-gutter);
  width: min(64vw, 52rem);
  max-width: 100%;
  text-align: left;
}

/* Título _Manifesto — alinhado à esquerda, mesma margem do texto */
.sobreman-hero__title {
  position: relative;
  align-self: flex-start;
  width: clamp(7rem, 13vw, 11rem);
  height: auto;
  user-select: none;
  pointer-events: none;
}

/*
 * Bloco de texto — Space Mono grande e imponente. Fonte MAIOR
 * (até 3rem no desktop), respiro entre parágrafos, LEFT-align.
 */
.sobreman-hero__text {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 4svh, 2.8rem);
  width: 100%;
  color: #e9ff2f;
  font-family: "Space Mono", "JetBrains Mono", "Menlo", monospace;
  font-size: clamp(1.55rem, 2.7vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.002em;
  line-height: 1.32;
  text-align: left;
}

.sobreman-hero__text p {
  margin: 0;
  /*
   * Animação de chegada — cada parágrafo entra com blur→sharp + slide up
   * quando .reveal-section fica is-visible. Delays escalonados (data-anim
   * "block" via [data-anim] transition-delay = --i * --stagger-step).
   * Sobrescrevo com curva mais cinematográfica e distância maior.
   */
  opacity: 0;
  transform: translateY(1.4rem);
  filter: blur(6px);
  transition:
    opacity 850ms var(--ease-framer),
    transform 950ms var(--ease-framer),
    filter 850ms var(--ease-framer);
}

.reveal-section.is-visible .sobreman-hero__text p {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Delays de entrada em sequência — cada parágrafo aparece ~220ms após o anterior. */
.reveal-section.is-visible .sobreman-hero__text p:nth-child(1) { transition-delay: 400ms; }
.reveal-section.is-visible .sobreman-hero__text p:nth-child(2) { transition-delay: 620ms; }
.reveal-section.is-visible .sobreman-hero__text p:nth-child(3) { transition-delay: 840ms; }
.reveal-section.is-visible .sobreman-hero__text p:nth-child(4) { transition-delay: 1060ms; }
.reveal-section.is-visible .sobreman-hero__text p:nth-child(5) { transition-delay: 1280ms; }

.sobreman-hero__text strong {
  font-weight: 700;
}

.sobreman-hero__closing {
  margin-top: clamp(1rem, 2.6svh, 1.8rem);
  padding-left: clamp(5rem, 12vw, 10rem);
}

.sobreman-hero__closing s {
  color: rgba(233, 255, 47, 0.85);
  text-decoration-color: rgba(233, 255, 47, 0.85);
  text-decoration-thickness: 2px;
}

.sobreman-hero__closing span {
  display: inline-block;
  padding-left: clamp(2rem, 4vw, 3.5rem);
}

/* Responsivo tablet */
@media (max-width: 980px) {
  .sobreman-hero {
    min-height: 110svh;
  }
  .sobreman-hero__stage {
    min-height: 110svh;
    padding-bottom: 4svh;
  }
  .sobreman-hero__top-image {
    height: 50svh;
  }
  .sobreman-hero__content {
    width: 84vw;
    gap: clamp(1.2rem, 3svh, 2rem);
    margin-top: -24svh;
  }
  .sobreman-hero__title {
    width: clamp(7rem, 16vw, 11rem);
  }
  .sobreman-hero__text {
    font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  }
}

/* Responsivo mobile */
@media (max-width: 600px) {
  .sobreman-hero {
    min-height: 105svh;
  }
  .sobreman-hero__stage {
    min-height: 105svh;
    padding-bottom: 3svh;
  }
  .sobreman-hero__top-image {
    height: 36svh;
  }
  .sobreman-hero__content {
    width: 88vw;
    gap: 1.2rem;
    margin-top: -16svh;
  }
  .sobreman-hero__title {
    width: 6.5rem;
  }
  .sobreman-hero__text {
    gap: 1.3rem;
    font-size: 1.05rem;
    line-height: 1.4;
  }
  .sobreman-hero__closing {
    padding-left: 2.5rem;
    margin-top: 0.6rem;
  }
  .sobreman-hero__closing span {
    padding-left: 1.2rem;
  }
  .sobreman-hero__side {
    width: 6vw;
    max-width: 3rem;
  }
}

.works-hero {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  background: var(--color-black);
}

/* Desktop contato — seção 100svh (altura completa do viewport) pra
   dar mais peso visual ao background e destacar melhor o formulário. */
.contato-hero {
  position: relative;
  /* Reduzido pra 82svh — diminui o gap entre o card e o rodapé */
  min-height: 82svh;
  height: 82svh;
  overflow: hidden;
  background: var(--color-black);
}

.about-hero {
  position: relative;
  min-height: 100svh;
  height: auto;
  overflow: hidden;
  background: var(--color-black);
}

.manifesto-hero {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  background: var(--color-black);
}

/*
 * Hand-off mode: when the user scrolls into the boundary with the works
 * section, JS flips this class on and the thumbs are allowed to leave the
 * manifesto bounds so they can travel into the works section.
 */
.manifesto-hero.is-handing-off,
.manifesto-hero.has-handed-off {
  overflow: visible;
  z-index: 5;
}

.manifesto-hero.is-handing-off .manifesto-hero__thumbs,
.manifesto-hero.has-handed-off .manifesto-hero__thumbs {
  z-index: 60;
}

.servicos-hero {
  position: relative;
  min-height: 160svh;
  height: auto;
  overflow: hidden;
  background: var(--color-black);
}

.works-hero__stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  isolation: isolate;
}

.works-hero__background,
.works-hero__title,
.works-hero__thumb,
.works-hero__ditt {
  position: absolute;
  height: auto;
  user-select: none;
}

/*
 * Background — imagem topimag ocupa 100% de largura com altura
 * proporcional (aspect ratio natural 1884×933 = 2.02:1). Não estica
 * pra cobrir o viewport inteiro.
 */
.works-hero__background {
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1884 / 933;
  object-fit: contain;
  object-position: top center;
}

.works-hero__title {
  z-index: 6;
  top: clamp(3rem, 5svh, 4.5rem);
  left: 50%;
  width: clamp(9rem, 17%, 15rem);
  transform: translateX(-50%);
}

/*
 * ELEMENTOS LATERAIS — mesma linguagem visual do disorder/sobreman/manifesto.
 * Ficam z:1 (atrás do vídeo z:4 e título z:6) como camada de textura.
 */
.works-hero__side {
  position: absolute;
  z-index: 1;
  top: 50%;
  height: auto;
  width: min(8vw, 7rem);
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  opacity: 0.55;
}

.works-hero__side--left  { left: 0; }
.works-hero__side--right { right: 0; }

.works-hero__error {
  position: absolute;
  z-index: 2;
  width: min(6vw, 5rem);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.6;
}

.works-hero__error--tl { top: 2svh; left: 3%; }
.works-hero__error--br { bottom: 2svh; right: 3%; transform: rotate(180deg); }

.works-hero__thumb {
  display: none;
}

.works-hero__carousel {
  position: absolute;
  z-index: 5;
  right: 0;
  /* Ancorado no bottom com folga generosa entre carrossel e caption */
  bottom: clamp(1rem, 2vw, 2rem);
  left: 0;
  overflow: hidden;
  pointer-events: auto;
  transition: opacity 350ms var(--ease-brut);
}

.works-hero__carousel-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(0.6rem, 1vw, 1rem);
  animation: works-marquee 140s linear infinite;
}

/*
 * Item do carousel — estado base opacity 0.4 (dim). Selecionado
 * (.is-active) fica opacity 1 e escala levemente pra destacar. Hover
 * aumenta scale + opacity pra dar feedback interativo suave.
 */
.works-hero__carousel-item {
  flex: 0 0 auto;
  width: clamp(9rem, 13vw, 14.5rem);
  aspect-ratio: 339 / 202;
  overflow: hidden;
  isolation: isolate;
  opacity: 0.4;
  transform: scale(1);
  transition:
    opacity 320ms var(--ease-framer),
    transform 380ms var(--ease-framer);
  cursor: pointer;
  pointer-events: auto;
}

.works-hero__carousel-item.is-active {
  opacity: 1;
  transform: scale(1.06);
}

.works-hero__carousel-item:hover {
  opacity: 1;
  transform: scale(1.05);
}

.works-hero__carousel-item.is-active:hover {
  transform: scale(1.08);
}

/*
 * Trigger button dentro do carousel item — cobre 100% do item pra
 * capturar clicks em qualquer parte da miniatura. Sem estilo default
 * de botão (reset).
 */
.works-hero__carousel-trigger {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.works-hero__carousel-trigger:focus-visible {
  outline: 2px solid #e9ff2f;
  outline-offset: 2px;
}

.works-hero__carousel-item img,
.works-hero__carousel-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--color-black);
}

.works-hero__ditt {
  display: none;
}

.works-hero__carousel-item--2 img {
  filter: saturate(1.15) contrast(1.05);
}

.works-hero__carousel-item--3 img {
  filter: grayscale(1) contrast(1.12);
}

.works-hero__carousel-item--4 img {
  filter: sepia(0.42) saturate(0.9) contrast(1.08);
}

.works-hero__carousel-item--5 img {
  filter: brightness(0.82) contrast(1.18);
}

.manifesto-hero__stage {
  position: relative;
  width: 100%;
  min-height: 100svh;
  isolation: isolate;
}

/*
 * Desktop stage — altura mínima suficiente pra caber as 5 linhas de
 * palavras (2svh → 84svh = ~110svh de conteúdo). Sem min-width fixo:
 * o layout já usa % + svh e escala com a viewport.
 */
@media (min-width: 981px) {
  .manifesto-hero__stage {
    min-height: 92svh;
  }
}

/*
 * ELEMENTOS LATERAIS DECORATIVOS — mesma linguagem visual do disorder-hero
 * e sobreman-hero. Ficam z:1 (atrás dos thumbs em z:4 e palavras em z:6)
 * pra funcionar como camada de textura sem competir com a composição
 * principal.
 */
.manifesto-hero__side {
  position: absolute;
  z-index: 1;
  top: 50%;
  height: auto;
  width: min(8vw, 7rem);
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  opacity: 0.55;
}

.manifesto-hero__side--left {
  left: 0;
}

.manifesto-hero__side--right {
  right: 0;
}

/* erroelement em 3 cantos — TL, BL, BR (skip TR pra não brigar com GLOBO thumb) */
.manifesto-hero__error {
  position: absolute;
  z-index: 2;
  width: min(6vw, 5rem);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.6;
}

.manifesto-hero__error--tl {
  top: 2svh;
  left: 3%;
}

.manifesto-hero__error--bl {
  bottom: 3svh;
  left: 3%;
}

.manifesto-hero__error--br {
  bottom: 3svh;
  right: 3%;
  transform: rotate(180deg);
}

/*
 * MANIFESTO-HERO — collage editorial fragmentando DISORDER IS RAW MATERIAL
 * em 3 LINHAS: (DISO RDER) / (IS RAW) / (MAT ERIAL). Cada linha ocupa
 * uma faixa horizontal do viewport, com thumbs e quotes preenchendo os
 * espaços entre elas.
 *
 * ENTRADA: cada palavra entra deslizando do lado correspondente
 * (esquerda vem da esquerda, direita vem da direita, meio de baixo),
 * em sequência escalonada com blur→sharp.
 */
.manifesto-hero__word {
  position: absolute;
  z-index: 6;
  height: auto;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  filter: blur(8px);
  transition:
    opacity 900ms var(--ease-framer),
    transform 1000ms var(--ease-framer),
    filter 800ms var(--ease-framer);
}

/* Delays em sequência — ordem visual: DISO → RDER → IS RAW → MAT → ERIAL */
.reveal-section.is-visible .manifesto-hero__word--diso  { transition-delay: 200ms; }
.reveal-section.is-visible .manifesto-hero__word--rder  { transition-delay: 420ms; }
.reveal-section.is-visible .manifesto-hero__word--israw { transition-delay: 680ms; }
.reveal-section.is-visible .manifesto-hero__word--mat   { transition-delay: 940ms; }
.reveal-section.is-visible .manifesto-hero__word--erial { transition-delay: 1180ms; }

/*
 * COMPOSIÇÃO QUADRADA — 3 linhas de palavras concentradas no bloco central
 * do viewport (y 10-82%), com gaps simétricos de ~16% entre as linhas pra
 * caberem os thumbs sem espalhamento.
 *
 * LINHA 1 (y 10-24%) — DISO + RDER
 */
/*
 * Desktop — 5 linhas verticais, uma palavra por linha (menos IS+RAW
 * que ficam na mesma linha). Cada linha tem um espaço vazio pro thumb
 * de vídeo correspondente. Palavras menores pra dar equilíbrio.
 *
 *   LINHA 1: [DISO]     [thumb globo]
 *   LINHA 2: [thumb puma]     [RDER]
 *   LINHA 3: [thumb adidas]  [IS] [RAW]
 *   LINHA 4: [thumb valda] [MAT] [thumb ivete]
 *   LINHA 5: [ERIAL]     [thumb bad]
 */
/*
 * Desktop — 5 linhas verticais SEM overlap. Espaçamento generoso entre
 * rows pra não colidirem palavras + thumbs. Cada word/thumb tem sua
 * "faixa" horizontal (left ou right) pra evitar colisão em X também.
 *
 *   L1 (y  2svh): [DISO___________]                    [globo]
 *   L2 (y 20svh): [puma]                    [__________RDER]
 *   L3 (y 44svh): [adidas]  [_____IS RAW_____]
 *   L4 (y 66svh): [valda]        [MAT]                  [ivete]
 *   L5 (y 84svh): [___ERIAL___]                          [bad]
 */
/*
 * Composição densa igual ao print de referência — words BEM maiores,
 * thumbs "vazando" nas linhas adjacentes das words. Overlap intencional
 * pra sensação editorial.
 *
 *   L1  2svh: DISO(esq, grande) ......... [globo(right-mid)]
 *   L2 22svh: [puma(esq)]  ......... RDER(dir, grande)
 *   L3 42svh: [adidas(esq)]  IS RAW(centro-dir, grande — mesma linha)
 *   L4 62svh: [valda(esq)]  MAT(centro)  [ivete(dir)]
 *   L5 82svh: ERIAL(esq-centro, grande) ......... [bad(dir)]
 */
.manifesto-hero__word--diso {
  top: 8svh;
  left: 10%;
  width: min(38vw, 34rem);
  transform: translateX(-30px);
}

.manifesto-hero__word--rder {
  top: 22svh;
  right: 10%;
  width: min(42vw, 38rem);
  transform: translateX(30px);
}

.manifesto-hero__word--israw {
  top: 37svh;
  left: 22%;
  width: min(50vw, 44rem);
  transform: translate(0, 24px);
}

.reveal-section.is-visible .manifesto-hero__word--israw {
  transform: translate(0, 0);
}

.manifesto-hero__word--mat {
  top: 57svh;
  left: 40%;
  width: min(22vw, 22rem);
  transform: translateX(-30px);
}

.manifesto-hero__word--erial {
  top: 71svh;
  left: 14%;
  width: min(38vw, 34rem);
  transform: translateX(30px);
}

/* Estado revelado: reseta transforms de slide */
.reveal-section.is-visible .manifesto-hero__word--diso,
.reveal-section.is-visible .manifesto-hero__word--rder,
.reveal-section.is-visible .manifesto-hero__word--mat,
.reveal-section.is-visible .manifesto-hero__word--erial {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.reveal-section.is-visible .manifesto-hero__word--israw {
  opacity: 1;
  filter: blur(0);
}

/* Fragmentos de citação — texto em Space Mono, amarelo, pequeno,
   espalhado pela composição. */
/*
 * QUOTES — fragmentos da manifesto espalhados nas "brechas" entre as
 * palavras grandes. Cada um entra com fade + subida curta em delays
 * escalonados (depois das palavras grandes). Tipografia compacta pra
 * economizar espaço vertical.
 */
.manifesto-hero__quote {
  position: absolute;
  z-index: 5;
  margin: 0;
  color: #e9ff2f;
  font-family: "Space Mono", "JetBrains Mono", "Menlo", monospace;
  font-size: clamp(0.68rem, 0.9vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0.6rem);
  filter: blur(4px);
  transition:
    opacity 620ms var(--ease-framer),
    transform 720ms var(--ease-framer),
    filter 620ms var(--ease-framer);
}

.reveal-section.is-visible .manifesto-hero__quote {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Delays sequenciais depois das palavras (última palavra: 1180ms + 900ms buffer) */
.reveal-section.is-visible .manifesto-hero__quote--top      { transition-delay: 1500ms; }
.reveal-section.is-visible .manifesto-hero__quote--closing  { transition-delay: 1660ms; }
.reveal-section.is-visible .manifesto-hero__quote--chaos    { transition-delay: 1820ms; }
.reveal-section.is-visible .manifesto-hero__quote--process  { transition-delay: 1980ms; }
.reveal-section.is-visible .manifesto-hero__quote--simplify { transition-delay: 2140ms; }

.manifesto-hero__quote strong { font-weight: 700; }
.manifesto-hero__quote s {
  color: rgba(233, 255, 47, 0.85);
  text-decoration-color: rgba(233, 255, 47, 0.85);
  text-decoration-thickness: 1.5px;
}

/*
 * Posições dos quotes — cada quote fica próximo ao elemento visual que
 * ancora ele. Mantém spacing tight pra composição não ficar espalhada.
 */

/* Topo-direito abaixo do RDER — intro */
.manifesto-hero__quote--top {
  top: 26svh;
  right: 4%;
  max-width: 18rem;
  text-align: right;
}

/* Esquerda no gap 1 (perto do PUMA) — comentário lateral */
.manifesto-hero__quote--closing {
  top: 30svh;
  left: 25%;
  max-width: 14rem;
  font-style: italic;
}

/* Meio-esquerdo, ao lado do IS RAW */
.manifesto-hero__quote--chaos {
  top: 44svh;
  left: 8%;
  max-width: 14rem;
  line-height: 1.25;
}

/* Direita no gap 2 (perto do BAD) — expansão conceitual */
.manifesto-hero__quote--process {
  top: 58svh;
  right: 5%;
  max-width: 20rem;
  text-align: right;
}

/* Centro-baixo entre MAT e ERIAL — fecho */
.manifesto-hero__quote--simplify {
  top: 84svh;
  left: 38%;
  bottom: auto;
  max-width: 22rem;
  text-align: center;
}

/*
 * VIDEO THUMBS — encaixam nos espaços entre as bandas de palavras.
 * Cada thumb tem entrada em fade+scale com delays escalonados, começando
 * logo depois da primeira palavra.
 */
.manifesto-hero__thumbs {
  position: absolute;
  inset: 0;
  z-index: 4;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.manifesto-hero__thumb {
  position: absolute;
  width: clamp(10rem, 16vw, 18rem);
  aspect-ratio: 372 / 222;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: scale(0.92);
  filter: blur(4px);
  transition:
    opacity 720ms var(--ease-framer),
    transform 800ms var(--ease-framer),
    filter 620ms var(--ease-framer);
}

.reveal-section.is-visible .manifesto-hero__thumb {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Delays escalonados — cada thumb entra ~180ms depois do anterior */
.reveal-section.is-visible .manifesto-hero__thumb--globo  { transition-delay: 380ms; }
.reveal-section.is-visible .manifesto-hero__thumb--puma   { transition-delay: 560ms; }
.reveal-section.is-visible .manifesto-hero__thumb--valda  { transition-delay: 740ms; }
.reveal-section.is-visible .manifesto-hero__thumb--adidas { transition-delay: 920ms; }
.reveal-section.is-visible .manifesto-hero__thumb--ivete  { transition-delay: 1100ms; }
.reveal-section.is-visible .manifesto-hero__thumb--bad    { transition-delay: 1280ms; }

.manifesto-hero__thumb-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--color-black);
  pointer-events: none;
}

/* Label do thumb — canto inferior, uppercase mono */
.manifesto-hero__thumb-label {
  position: absolute;
  bottom: 0.4rem;
  left: 0.5rem;
  right: 0.5rem;
  color: var(--color-ink);
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: clamp(0.5rem, 0.65vw, 0.65rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

/*
 * Posições dos 6 thumbs — encaixam nas ZONAS DE GAP entre as bandas de
 * palavras. Composição quadrada: gap 1 (y 24-40%) e gap 2 (y 52-68%)
 * recebem 2 thumbs cada, mais 1 thumb no gap central da banda 1 e o
 * IVETE portrait ao lado do IS RAW.
 */

/*
 * Thumbs seguem a sequência das linhas de palavras:
 *  LINHA 1 (y 6svh)  — DISO à esq  →  GLOBO NEWS à dir
 *  LINHA 2 (y 24svh) — PUMA à esq  →  RDER à dir
 *  LINHA 3 (y 42svh) — ADIDAS à esq → IS + RAW à dir
 *  LINHA 4 (y 60svh) — VALDA à esq  →  MAT centro  →  IVETE à dir
 *  LINHA 5 (y 78svh) — ERIAL à esq  →  BAD à dir
 */

/*
 * Thumbs — cada uma no "gap" entre duas linhas de palavras.
 *  L1 gap: globo (top 4svh, right)
 *  L2 gap: puma (top 20svh, left-of-center)
 *  L3 gap: adidas (top 46svh, left)
 *  L4 gap: valda (top 66svh, left), ivete portrait (top 62svh, right)
 *  L5 gap: bad (top 88svh, right)
 */
/*
 * Todas thumbs com MESMA altura (8rem). Width auto por aspect-ratio:
 *  - 16:9-ish (padrão 372/222): width ≈ 13.4rem
 *  - portrait (ivete 3/4):      width ≈ 6rem
 */
.manifesto-hero__thumb {
  height: 8rem;
  width: auto;
}

.manifesto-hero__thumb--globo  { top: 9svh;  right: 26%; }
.manifesto-hero__thumb--puma   { top: 23svh; left: 22%; }
.manifesto-hero__thumb--adidas { top: 39svh; left: 8%; }
.manifesto-hero__thumb--valda  { top: 58svh; left: 12%; }
.manifesto-hero__thumb--ivete  {
  top: 54svh;
  right: 18%;
  aspect-ratio: 3 / 4;
}
.manifesto-hero__thumb--bad    { top: 74svh; right: 10%; }

.about-hero__stage {
  position: relative;
  width: 100%;
  min-height: 100svh;
  padding-bottom: clamp(13rem, 22vw, 22rem);
  isolation: isolate;
}

.about-hero__ditt {
  position: absolute;
  height: auto;
  user-select: none;
}

.about-hero__background {
  display: block;
  width: 100%;
  height: 80svh;
  object-fit: cover;
  object-position: top center;
  user-select: none;
}

/* Layer ACIMA do background — cobre o stage inteiro, fica atrás do
   texto (z:10) e footer (z:9). */
.about-hero__bg-layer {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.about-hero__text {
  display: block;
  position: absolute;
  z-index: 10;
  /* Horizontal centralizado, próximo ao topo (não centro vertical) */
  top: clamp(4rem, 8svh, 8rem);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  /* Match a largura do texto.png original (~46rem) — width maior pra
     texto html não wrappar excessivamente. */
  width: min(52vw, 46rem);
  height: auto;
  max-height: none;
  user-select: none;
}

/*
 * Variante HTML — texto do banco (sh_institucional). Match visual do
 * texto.png original: tudo AMARELO, sans-serif Helvetica grande, em
 * italic serif pra ênfase.
 */
.about-hero__text--html {
  color: #edff31;
  font-family: var(--font-primary);
  font-weight: 400;
  /* Escala tipografia MAIOR pra bater com o texto.png (era 1237px de altura
     numa área de ~46rem) */
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-align: left;
}

.about-hero__text--html .about-hero__text-lead {
  color: #edff31;
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: clamp(0.85rem, 1.05vw, 1.2rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  margin: 0 0 clamp(1.4rem, 2.4vw, 2.6rem);
  line-height: 1;
}

.about-hero__text--html p {
  margin: 0 0 clamp(1.2rem, 2vw, 2rem);
}

.about-hero__text--html p:last-child {
  margin-bottom: 0;
}

/* Ênfase em italic serif — mesmo estilo elegante do texto.png. */
.about-hero__text--html em {
  color: #edff31;
  font-style: italic;
  font-weight: 400;
  font-family: "Times New Roman", "Georgia", serif;
}

.about-hero__text--html strong {
  font-weight: 700;
}

.about-hero__ditt {
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

/*
 * Apoio gráfico — imagem "chaos is where the work begins" (thechaos.png)
 * na lateral esquerda do texto como acento editorial.
 */
.about-hero__quote {
  position: absolute;
  z-index: 8;
  display: block;
  margin: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.about-hero__quote--left {
  top: clamp(8rem, 15svh, 14rem);
  left: clamp(2rem, 4vw, 4rem);
  width: clamp(9rem, 12vw, 14rem);
}

/* "FROM IDEA TO FINAL FRAME" — abaixo do texto, centralizado horizontal */
.about-hero__quote--ideia {
  bottom: clamp(4rem, 8svh, 8rem);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(18rem, 28vw, 32rem);
}

/*
 * About footer — usa o layout compartilhado (.about-hero__footer,
 * .servicos-hero__footer, .contato-hero__footer) definido mais abaixo.
 * Layout antigo (marquee + emblem + bar) foi removido junto com o
 * markup correspondente.
 */

.contato-hero__stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 82svh;
  isolation: isolate;
}

.contato-hero__form-bg,
.contato-hero__background,
.contato-hero__form,
.contato-hero__card,
.contato-hero__ditt {
  position: absolute;
  height: auto;
  user-select: none;
}

/*
 * Background — 100% width E 100% height do stage, com object-fit cover
 * pra preencher toda a seção mantendo aspect ratio da imagem sem
 * distorcer. object-position: top mostra o começo da imagem quando
 * cropada verticalmente.
 */
.contato-hero__background {
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/*
 * fundoform.png — camada centralizada atrás do card do formulário,
 * substitui o fundo.png que cobria stage inteiro. Fica z:2 (na frente
 * do background z:0 e atrás dos detalhes z:2 e card z:3).
 */
.contato-hero__form-bg {
  z-index: 1;
  top: 11%;
  left: 50%;
  width: min(56vw, 62rem);
  transform: translateX(-50%);
  object-fit: contain;
  pointer-events: none;
  opacity: 0.85;
}

.contato-hero__form {
  display: none;
}

/*
 * Card mais compacto — largura reduzida de 56vw pra 42vw, posicionado
 * mais próximo do topo (não centralizado verticalmente). Layout mais
 * fiel à referência.
 */
/*
 * Card do formulário — posicionado no terço superior (y 15%), largura
 * ajustada conforme referência (~46vw), tom amarelo levemente mais
 * saturado/lima (#d9ff2f) pra bater com a paleta do layout de ref.
 */
/*
 * Card do formulário — position: absolute (do stage) + isolate pra que
 * o título absoluto dentro dele ancore corretamente. Padding-top zerado
 * pra deixar espaço pro título flush.
 */
.contato-hero__card {
  z-index: 3;
  /* Push mais pra cima pra reduzir espaço até o rodapé */
  top: 8%;
  left: 50%;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: clamp(0.9rem, 1.6vw, 1.6rem);
  width: min(46vw, 52rem);
  max-width: calc(100% - (var(--container-gutter) * 2));
  min-height: 0;
  max-height: none;
  padding: 0 clamp(1.2rem, 1.8vw, 2rem) clamp(1rem, 1.6vw, 1.8rem);
  /* Amarelo do box (feedback do cliente 09/09) */
  background: #edff31;
  color: var(--color-black);
  transform: translate(-50%, 0);
  user-select: auto;
  isolation: isolate;
}

/* Remove o retângulo/textura de fundo (fundoform.png) atrás do card —
   feedback do cliente: fica mais limpo sem. */
.contato-hero__form-bg {
  display: none;
}

/*
 * Header — como o título é absolute no card, o header só precisa
 * reservar altura pro título ocupar (min-height) e colocar a tag
 * "CONTATO //" no canto superior direito.
 */
.contato-hero__card-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 1.5rem;
  min-height: clamp(5rem, 8vw, 8rem);
  margin: 0;
  padding: clamp(0.8rem, 1.2vw, 1.2rem) 0 0;
}

.contato-hero__card-title {
  display: grid;
  font-size: clamp(2.1rem, 4.5vw, 5.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 0.88;
  text-transform: uppercase;
}

.contato-hero__card-title span:nth-child(2) {
  padding-left: 0.3em;
}

.contato-hero__card-title span:nth-child(3) {
  padding-left: 0.6em;
}

/*
 * Título como imagem titulo.png — colado NO CANTO superior esquerdo
 * absoluto do card (position: absolute, top/left 0). Sem qualquer
 * respiro/padding. A tag "CONTATO //" fica no canto oposto também
 * position: absolute.
 */
.contato-hero__card-title-img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: min(72%, 20rem);
  height: auto;
  margin: 0;
  user-select: none;
  z-index: 2;
}

/* Campo E-mail com label + arrow SVG — estilo dropdown minimal. */
.contato-hero__fields-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-black);
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: clamp(0.68rem, 0.85vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contato-hero__fields-label svg {
  display: block;
}

.contato-hero__card-tag {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: clamp(0.4rem, 0.8vw, 0.85rem);
  font-size: clamp(0.65rem, 0.95vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-align: right;
  text-transform: uppercase;
}

.contato-hero__fields {
  display: grid;
  align-self: end;
  gap: clamp(0.45rem, 0.85vw, 0.85rem);
  margin-top: clamp(1.4rem, 2.4vw, 2.5rem);
}

.contato-hero__fields label {
  display: block;
}

.contato-hero__fields input,
.contato-hero__fields select,
.contato-hero__fields textarea {
  width: 100%;
  padding: clamp(0.32rem, 0.55vw, 0.55rem) 0;
  border: 0;
  border-bottom: 1px solid rgba(5, 5, 5, 0.78);
  border-radius: 0;
  background: transparent;
  color: var(--color-black);
  font-size: clamp(0.8rem, 1vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0;
  outline: 0;
  transition: border-color 320ms var(--ease-premium);
}

.contato-hero__fields select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--color-black) 50%) calc(100% - 14px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--color-black) 50%, transparent 50%) calc(100% - 8px) 50% / 6px 6px no-repeat;
}

.contato-hero__fields textarea {
  resize: vertical;
  min-height: clamp(3rem, 7vh, 5rem);
  font-family: inherit;
}

/*
 * Row final do form: logo The Chaos à esquerda + botão ENVIAR à direita.
 * Botão replica o estilo visual do "CONTATO //" (texto mono simples, sem
 * borda ou fundo).
 */
.contato-hero__fields-action {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(0.8rem, 2vw, 2rem);
  margin-top: clamp(0.6rem, 1.2vw, 1.2rem);
}

.contato-hero__fields-action .contato-hero__card-mark {
  justify-self: start;
  width: clamp(4rem, 7vw, 7.5rem);
  height: auto;
  margin: 0;
  filter: brightness(0);
  flex-shrink: 0;
}

.contato-hero__submit {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-black);
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: clamp(0.65rem, 0.95vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 240ms var(--ease-premium);
  appearance: none;
  align-self: flex-end;
}

.contato-hero__submit:hover,
.contato-hero__submit:focus-visible {
  opacity: 0.65;
  outline: 0;
}

.contato-hero__submit:disabled {
  opacity: 0.45;
  cursor: wait;
}

/* Feedback de sucesso / erro */
.contato-hero__feedback {
  margin: 0;
  padding-top: clamp(0.4rem, 0.6vw, 0.6rem);
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: clamp(0.68rem, 0.82vw, 0.85rem);
  letter-spacing: 0.04em;
  color: var(--color-black);
  min-height: 1.2em;
}

.contato-hero__feedback[data-state="ok"] {
  color: #0a7a3f;
}
.contato-hero__feedback[data-state="err"] {
  color: #c92020;
}

.contato-hero__fields input::placeholder,
.contato-hero__fields textarea::placeholder,
.contato-hero__fields select option[disabled] {
  color: rgba(5, 5, 5, 0.78);
}

.contato-hero__fields input:focus,
.contato-hero__fields select:focus,
.contato-hero__fields textarea:focus {
  border-bottom-color: var(--color-black);
}

.contato-hero__card-mark {
  justify-self: end;
  width: clamp(4.2rem, 7vw, 8rem);
  height: auto;
  margin-top: clamp(0.85rem, 1.6vw, 1.5rem);
  filter: brightness(0);
}

.contato-hero__ditt {
  display: none;
}

/*
 * DETALHES decorativos — REMOVIDOS pra deixar o layout mais limpo.
 * Os fragmentos amarelos (detalhes.png / glitches) não aparecem mais
 * ao redor do card do formulário.
 */
.contato-hero__detail {
  display: none;
}

.servicos-hero__stage {
  position: relative;
  width: 100%;
  min-height: 145svh;
  isolation: isolate;
  padding-bottom: clamp(1rem, 2vw, 2.5rem);
}

.servicos-hero__bg-layer,
.servicos-hero__background,
.servicos-hero__title,
.servicos-hero__ditt {
  position: absolute;
  height: auto;
  user-select: none;
}

.servicos-hero__background {
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 60svh;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(0.65) contrast(1.05) brightness(0.7);
  transition: transform 1800ms var(--ease-premium), filter 1200ms var(--ease-premium);
  transform: scale(1.04);
}

/* Layer ACIMA do background — cobre o stage inteiro (180svh) e fica
   atrás do conteúdo (título z:6, cards z:7, footer z:9). */
.servicos-hero__bg-layer {
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.reveal-section.is-visible .servicos-hero__background {
  transform: scale(1);
}

/*
 * Título composto — 4 palavras em cascata diagonal descendo pra direita,
 * conforme layout de referência:
 *   //DO
 *      CONCEITO
 *              À
 *              ENTREGA:
 * Cada linha avança à direita e desce, criando escadinha visual.
 * Container ocupa metade superior do stage pra dar peso ao título.
 */
.servicos-hero__title {
  position: absolute;
  z-index: 6;
  top: clamp(3rem, 6svh, 5rem);
  left: 50%;
  width: min(72vw, 82rem);
  max-width: calc(100% - (var(--container-gutter) * 2));
  height: clamp(16rem, 32svh, 26rem);
  transform: translateX(-50%);
  pointer-events: none;
}

.servicos-hero__title-word {
  position: absolute;
  height: auto;
  user-select: none;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(1.2rem);
  transition:
    opacity 700ms var(--ease-framer),
    transform 800ms var(--ease-framer),
    filter 600ms var(--ease-framer);
  will-change: opacity, transform, filter;
}

.reveal-section.is-visible .servicos-hero__title-word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/*
 * Cascata diagonal — cada palavra desce ~22% e move ~10% à direita
 * em relação à anterior, conforme referência.
 */

/* //DO — topo-esquerda */
.servicos-hero__title-word--do {
  top: 0;
  left: 12%;
  width: 15%;
}

/* CONCEITO — desce e vai pra direita, tamanho grande */
.servicos-hero__title-word--conceito {
  top: 18%;
  left: 24%;
  width: 42%;
}

/* À — pequeno, colado no bottom-right do CONCEITO (que termina em ~40% top, 66% right) */
.servicos-hero__title-word--a {
  top: 40%;
  left: 60%;
  width: 6%;
}

/* ENTREGA — direita, embaixo, grande */
.servicos-hero__title-word--entrega {
  top: 72%;
  left: 44%;
  width: 34%;
}

/*
 * Delays sequenciais — cada palavra entra ~220ms depois da anterior,
 * criando a leitura ordenada //DO → CONCEITO → À → ENTREGA.
 */
.reveal-section.is-visible .servicos-hero__title-word--do       { transition-delay: 240ms; }
.reveal-section.is-visible .servicos-hero__title-word--conceito { transition-delay: 460ms; }
.reveal-section.is-visible .servicos-hero__title-word--a        { transition-delay: 680ms; }
.reveal-section.is-visible .servicos-hero__title-word--entrega  { transition-delay: 900ms; }

.servicos-hero__head-quote {
  position: absolute;
  z-index: 6;
  top: clamp(4rem, 7svh, 6.5rem);
  right: clamp(1rem, 3vw, 3rem);
  color: rgba(244, 240, 232, 0.78);
  font-size: clamp(0.62rem, 0.78vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-align: right;
  text-decoration: line-through;
  text-decoration-color: rgba(244, 240, 232, 0.5);
  text-transform: uppercase;
  pointer-events: none;
}

.servicos-hero__head-quote em {
  display: inline-block;
  font-style: italic;
  text-decoration: none;
}

.servicos-hero__cards {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
  pointer-events: none;
}

.servicos-hero__card {
  position: absolute;
  list-style: none;
  pointer-events: auto;
}

/*
 * Assembly reveal — cada card se MONTA quando entra no viewport com scroll:
 * translate maior (4rem), scale de baixo, blur → sharp, e uma leve
 * rotation. Cards vêm de direções alternadas (esquerda / direita /
 * esquerda) pra dar sensação de peças se encaixando.
 *
 * O JS aplica `.has-card-reveal` no init e `.is-card-revealed` quando o
 * card cruza 15% do viewport. Sem JS, cards aparecem por padrão.
 */
.servicos-hero__card.has-card-reveal {
  opacity: 0;
  translate: 0 4rem;
  scale: 0.85;
  filter: blur(8px);
  transition:
    opacity 900ms var(--ease-framer),
    translate 1100ms var(--ease-framer),
    scale 1100ms var(--ease-framer),
    filter 800ms var(--ease-framer);
  will-change: opacity, translate, scale, filter;
}

/* Card 1 (VISUAL DEV) — vem da esquerda-baixo */
.servicos-hero__card--visualdev.has-card-reveal {
  translate: -3rem 4rem;
}

/* Card 2 (CREATIVE EDIT) — vem de baixo (movimento vertical puro) */
.servicos-hero__card--creative.has-card-reveal {
  translate: 0 5rem;
}

/* Card 3 (FINAL CRAFT) — vem da direita-baixo */
.servicos-hero__card--final.has-card-reveal {
  translate: 3rem 4rem;
}

.servicos-hero__card.has-card-reveal.is-card-revealed {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .servicos-hero__card.has-card-reveal,
  .servicos-hero__card--visualdev.has-card-reveal,
  .servicos-hero__card--creative.has-card-reveal,
  .servicos-hero__card--final.has-card-reveal {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: none;
    transition: none;
  }
}

.servicos-hero__card img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * Cards em 2 camadas — box (fundo amarelo) + text (sobreposto).
 * Box entra primeiro com a assembly do card, texto entra 620ms depois
 * pra sensação de "primeiro se monta a moldura, depois o conteúdo cai
 * dentro". Aplicado a visualdev, creative e final.
 *
 * NÃO seta `position: relative` no card — cards já são `position:
 * absolute` (linha 1877) e absolute cria contexto de posicionamento pros
 * children, então o text overlay ancora corretamente sem precisar de
 * relative aqui.
 */
.servicos-hero__card-text {
  position: absolute;
  height: auto;
  z-index: 2;
}

/*
 * Estado inicial dos textos — mais marcado: translate 2rem (era 1rem),
 * blur 10px (era 4px), transições longer pra tornar a entrada perceptível.
 */
.servicos-hero__card.has-card-reveal .servicos-hero__card-text {
  opacity: 0;
  translate: 0 2rem;
  filter: blur(10px);
  transition:
    opacity 700ms var(--ease-framer),
    translate 900ms var(--ease-framer),
    filter 700ms var(--ease-framer);
  transition-delay: 620ms;
}

.servicos-hero__card.has-card-reveal.is-card-revealed .servicos-hero__card-text {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
}

/*
 * INTERFERÊNCIA — variant de entrada estilo glitch/TV para textos
 * alternados. Cards VISUAL DEV e FINAL CRAFT usam esse variant, criando
 * ritmo: standard → glitch → standard entre os 3.
 *
 * Efeito: clip-path corta o texto em bandas horizontais durante a
 * entrada, com steps duros (feel de sinal analógico). Combina com
 * translate + opacity pra chegar no estado final revelado.
 */
.servicos-hero__card--visualdev.has-card-reveal.is-card-revealed .servicos-hero__card-text,
.servicos-hero__card--final.has-card-reveal.is-card-revealed .servicos-hero__card-text {
  animation: servicos-text-interference 900ms steps(1, end) 620ms 1 both;
}

@keyframes servicos-text-interference {
  0%   { clip-path: inset(0 0 100% 0); translate: -0.4rem 2rem; }
  15%  { clip-path: inset(0 0 42% 0); translate: 0.6rem 1.5rem; }
  30%  { clip-path: inset(58% 0 0 0); translate: -0.5rem 1rem; }
  45%  { clip-path: inset(0 0 0 0); translate: 0.4rem 0.6rem; }
  55%  { clip-path: inset(32% 0 46% 0); translate: -0.3rem 0.3rem; }
  70%  { clip-path: inset(0 0 12% 0); translate: 0.2rem 0.1rem; }
  85%  { clip-path: inset(0 0 0 0); translate: -0.05rem 0; }
  100% { clip-path: inset(0 0 0 0); translate: 0 0; }
}

/*
 * Posições calibradas por card — cada box tem geometria diferente
 * (visualdev tem hook C-shape à esquerda, creative é mais horizontal,
 * final é o menor). Ajustadas pra que o texto caia na área útil amarela
 * de cada um.
 */
.servicos-hero__card--visualdev .servicos-hero__card-text {
  top: 32%;
  left: 12%;
  width: 82%;
}

/*
 * Creative e Final — text images foram desenhadas no MESMO canvas do
 * box (dimensões idênticas: creative 1113×465 = 1113×465, final
 * 1179×526 = 1179×526). Basta empilhar 100%×100% pra alinhamento
 * perfeito — sem reposicionamento.
 */
.servicos-hero__card--creative .servicos-hero__card-text,
.servicos-hero__card--final .servicos-hero__card-text {
  top: 0;
  left: 0;
  width: 100%;
}

/*
 * Desktop — cards centralizados horizontalmente com stagger sutil pra
 * dar dinâmica visual sem espalhar pra fora do centro da tela.
 * left: 50% + margin-left negativo = metade da largura + pequeno offset.
 */
/*
 * Cards empilhados com gap maior no desktop pra dar respiro entre eles.
 * Stagger horizontal alternado esquerda/direita/esquerda.
 */
.servicos-hero__card--visualdev {
  top: 30svh;
  left: 50%;
  width: min(44vw, 52rem);
  margin-left: max(-25vw, -29rem);
}

.servicos-hero__card--creative {
  top: 74svh;
  left: 50%;
  width: min(42vw, 50rem);
  margin-left: max(-17vw, -20rem);
}

.servicos-hero__card--final {
  top: 108svh;
  left: 50%;
  width: min(44vw, 52rem);
  margin-left: max(-25vw, -29rem);
}

.servicos-hero__ditt {
  display: none;
}

/* Section-level footer (mirrors footer-fixed but anchored to section bottom) */
.servicos-hero__footer,
.contato-hero__footer,
.about-hero__footer {
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  min-height: var(--footer-height);
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 var(--container-gutter) clamp(0.55rem, 1vw, 1.05rem);
  color: var(--color-muted);
  font-size: clamp(0.5rem, 0.62vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.servicos-hero__footer-mark,
.contato-hero__footer-mark,
.about-hero__footer-mark {
  position: absolute;
  bottom: clamp(0.4rem, 0.85vw, 0.95rem);
  left: 50%;
  display: block;
  width: clamp(1.8rem, 2.4vw, 2.65rem);
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

.servicos-hero__footer-social,
.contato-hero__footer-social,
.about-hero__footer-social {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 2rem);
}

.servicos-hero__footer a,
.contato-hero__footer a,
.about-hero__footer a {
  transition: color var(--duration-base) var(--ease-premium);
}

.servicos-hero__footer a:hover,
.contato-hero__footer a:hover,
.about-hero__footer a:hover {
  color: var(--color-ink);
}

@media (max-width: 760px) {
  .servicos-hero__footer,
  .contato-hero__footer,
  .about-hero__footer {
    align-items: center;
    flex-direction: column;
    gap: 0.7rem;
    padding-bottom: 1rem;
    font-size: 0.58rem;
    text-align: center;
  }

  .servicos-hero__footer-copy,
  .contato-hero__footer-copy,
  .about-hero__footer-copy {
    width: 100%;
    text-align: center;
  }

  .servicos-hero__footer-social,
  .contato-hero__footer-social,
  .about-hero__footer-social {
    width: 100%;
    justify-content: center;
    gap: 0.75rem;
  }

  /* Espaço extra pro rodape não colar nas imagens/cards do fim da seção. */
  .contato-hero__footer,
  .about-hero__footer {
    padding-top: 1.4rem;
  }
}

.footer-carousel {
  position: relative;
  z-index: 15;
  overflow: hidden;
  min-height: clamp(12.5rem, 19.2vw, 22.625rem);
  padding: clamp(1.75rem, 3.4vw, 4rem) var(--container-gutter) clamp(1.15rem, 2vw, 2.125rem);
  background: var(--color-black);
  color: var(--color-ink);
}

.footer-carousel__media {
  position: relative;
  min-height: clamp(7.25rem, 12vw, 14rem);
}

.footer-carousel__emblem {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: clamp(7.6rem, 16.61vw, 19.5625rem);
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.footer-carousel__track {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: max-content;
  align-items: center;
  animation: footer-marquee 44s linear infinite;
  transform: translateY(-50%);
}

.footer-carousel__item {
  flex: 0 0 auto;
  width: clamp(58rem, 100vw, 117.75rem);
}

.footer-carousel__item img {
  width: 100%;
  height: auto;
}

.footer-carousel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  color: var(--color-ink);
  font-size: clamp(0.58rem, 0.72vw, 0.84rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.footer-carousel__copy {
  color: var(--color-ink);
}

.footer-carousel__social {
  display: flex;
  align-items: center;
  gap: clamp(1.05rem, 2.2vw, 2.75rem);
}

.footer-carousel a {
  transition: color var(--duration-base) var(--ease-premium);
}

.footer-carousel a:hover {
  color: var(--color-muted);
}

.footer-contact {
  position: relative;
  z-index: 18;
  display: grid;
  min-height: clamp(4.75rem, 8.15vw, 9.6rem);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2vw, 2.5rem);
  padding: clamp(0.85rem, 1.6vw, 1.5rem) var(--container-gutter) clamp(0.95rem, 1.7vw, 1.85rem);
  background: var(--color-black);
  color: var(--color-muted);
  font-size: clamp(0.56rem, 0.72vw, 0.84rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.footer-contact__copy {
  justify-self: start;
}

.footer-contact__emblem {
  width: clamp(3.5rem, 6.42vw, 7.5625rem);
  height: auto;
  justify-self: center;
}

.footer-contact__social {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: clamp(1.05rem, 2.2vw, 2.75rem);
}

.footer-contact a {
  transition: color var(--duration-base) var(--ease-premium);
}

.footer-contact a:hover {
  color: var(--color-ink);
}

@keyframes footer-marquee {
  from {
    transform: translate(-25%, -50%);
  }

  to {
    transform: translate(-75%, -50%);
  }
}

@keyframes works-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes home-signal-drift {
  0% {
    transform: translate3d(-1.2%, -0.6%, 0) skewX(-0.4deg);
  }

  18% {
    transform: translate3d(1.8%, 0.4%, 0) skewX(0.7deg);
  }

  40% {
    transform: translate3d(-0.4%, 1.2%, 0) skewX(-0.2deg);
  }

  62% {
    transform: translate3d(2.4%, -0.2%, 0) skewX(1deg);
  }

  100% {
    transform: translate3d(-1.6%, 0.8%, 0) skewX(-0.6deg);
  }
}

@keyframes home-signal-roll {
  0% {
    transform: translate3d(0, -8%, 0);
    opacity: 0.42;
  }

  32% {
    transform: translate3d(-1.4%, 4%, 0);
    opacity: 0.76;
  }

  64% {
    transform: translate3d(1.2%, 12%, 0);
    opacity: 0.5;
  }

  100% {
    transform: translate3d(0.4%, 22%, 0);
    opacity: 0.72;
  }
}

@keyframes home-static-noise {
  0% {
    transform: translate3d(-2%, -1%, 0);
  }

  25% {
    transform: translate3d(1%, 2%, 0);
  }

  50% {
    transform: translate3d(-1%, 1%, 0);
  }

  75% {
    transform: translate3d(2%, -2%, 0);
  }

  100% {
    transform: translate3d(0, 1%, 0);
  }
}

@keyframes home-text-glitch {
  0%,
  100% {
    transform: translate(-50%, -50%);
    opacity: 0.94;
  }

  18% {
    transform: translate(calc(-50% - 0.35rem), calc(-50% + 0.08rem)) skewX(-1deg);
    opacity: 1;
  }

  20% {
    transform: translate(calc(-50% + 0.48rem), calc(-50% - 0.04rem)) skewX(1.4deg);
  }

  54% {
    transform: translate(-50%, -50%);
    opacity: 0.82;
  }

  56% {
    transform: translate(calc(-50% + 0.2rem), calc(-50% + 0.12rem));
    opacity: 1;
  }

  72% {
    transform: translate(calc(-50% - 0.18rem), calc(-50% - 0.08rem));
  }
}

@keyframes home-text-dropout {
  0%,
  44%,
  100% {
    clip-path: inset(0 0 0 0);
  }

  45% {
    clip-path: inset(0 0 68% 0);
  }

  46% {
    clip-path: inset(31% 0 35% 0);
  }

  47% {
    clip-path: inset(72% 0 0 0);
  }

  48%,
  70% {
    clip-path: inset(0 0 0 0);
  }

  71% {
    clip-path: inset(18% 0 58% 0);
  }

  72% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes disorder-bars-random {
  0%,
  8%,
  14%,
  31%,
  43%,
  58%,
  69%,
  84%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleX(0.82);
    clip-path: inset(0 100% 0 0);
  }

  9% {
    opacity: 1;
    transform: translate3d(0, -24svh, 0) scaleX(0.72);
    clip-path: inset(0 24% 0 0);
  }

  15% {
    opacity: 0.82;
    transform: translate3d(7vw, -3svh, 0) scaleX(0.48);
    clip-path: inset(12% 8% 18% 0);
  }

  32% {
    opacity: 1;
    transform: translate3d(2vw, 22svh, 0) scaleX(0.9);
    clip-path: inset(0 0 28% 0);
  }

  44% {
    opacity: 0.7;
    transform: translate3d(-3vw, 8svh, 0) scaleX(0.58);
    clip-path: inset(36% 18% 0 0);
  }

  59% {
    opacity: 1;
    transform: translate3d(8vw, 32svh, 0) scaleX(0.66);
    clip-path: inset(8% 0 42% 0);
  }

  70% {
    opacity: 0.86;
    transform: translate3d(-2vw, -12svh, 0) scaleX(1);
    clip-path: inset(0 0 0 0);
  }

  85% {
    opacity: 0.94;
    transform: translate3d(5vw, 4svh, 0) scaleX(0.52);
    clip-path: inset(18% 12% 24% 0);
  }
}

@keyframes disorder-elements-show {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    translate: 0 0;
  }

  22% {
    opacity: 0.9;
    clip-path: inset(0 0 62% 0);
    translate: -0.9rem 0;
  }

  48% {
    opacity: 0.35;
    clip-path: inset(44% 0 18% 0);
    translate: 0.65rem 0;
  }

  70% {
    opacity: 1;
    clip-path: inset(0 0 34% 0);
    translate: -0.35rem 0;
  }

  100% {
    opacity: 0.55;
    clip-path: inset(0 0 0 0);
    translate: 0 0;
  }
}

@keyframes disorder-elements-static {
  0%,
  100% {
    opacity: 0.34;
    translate: 0 0;
    clip-path: inset(0 0 0 0);
  }

  18% {
    opacity: 0.92;
    translate: 0.65rem 0;
    clip-path: inset(12% 0 38% 0);
  }

  20% {
    translate: -0.8rem 0;
    clip-path: inset(0 0 72% 0);
  }

  56% {
    opacity: 0.18;
    translate: 0 0;
    clip-path: inset(62% 0 0 0);
  }

  58% {
    opacity: 0.88;
    translate: 0.95rem 0;
    clip-path: inset(0 0 0 0);
  }
}

@media (max-width: 980px) {
  .disorder-hero__composition {
    gap: clamp(0.9rem, 3svh, 2rem);
    padding: 10svh var(--container-gutter);
  }

  .disorder-hero__word--disorder {
    width: min(52vw, 32rem);
  }

  .disorder-hero__word--israw {
    width: min(32vw, 20rem);
  }

  .disorder-hero__word--material {
    width: min(56vw, 34rem);
  }

  .disorder-hero__layer--center {
    width: min(42vw, 22rem);
  }

  /* Tablet — mesma composição quadrada com escala responsiva */
  .manifesto-hero,
  .manifesto-hero__stage {
    min-height: 100svh;
  }

  .manifesto-hero__word--diso   { top: 10svh; left: 3%; width: 38vw; }
  .manifesto-hero__word--rder   { top: 14svh; right: 3%; width: 34vw; }
  .manifesto-hero__word--israw  { top: 40svh; width: 46vw; }
  .manifesto-hero__word--mat    { top: 68svh; left: 3%; bottom: auto; width: 34vw; }
  .manifesto-hero__word--erial  { top: 68svh; right: 3%; bottom: auto; width: 40vw; }

  .manifesto-hero__thumb {
    width: 19vw;
  }
  .manifesto-hero__thumb--ivete {
    width: 16vw;
  }

  .manifesto-hero__thumb--globo  { top: 11svh; left: 42%; }
  .manifesto-hero__thumb--puma   { top: 26svh; left: 4%; }
  .manifesto-hero__thumb--valda  { top: 26svh; right: 26%; }
  .manifesto-hero__thumb--ivete  { top: 36svh; right: 4%; }
  .manifesto-hero__thumb--adidas { top: 53svh; left: 5%; }
  .manifesto-hero__thumb--bad    { top: 55svh; left: 42%; }

  .manifesto-hero__quote {
    font-size: clamp(0.65rem, 1.2vw, 0.85rem);
    max-width: 16rem;
  }

  .manifesto-hero__quote--top      { top: 22svh; right: 3%; max-width: 18rem; }
  .manifesto-hero__quote--closing  { top: 22svh; left: 3%; max-width: 12rem; }
  .manifesto-hero__quote--chaos    { top: 52svh; left: 5%; max-width: 14rem; }
  .manifesto-hero__quote--process  { top: 66svh; right: 3%; max-width: 20rem; }
  .manifesto-hero__quote--simplify { bottom: 5svh; left: 44%; max-width: 20rem; }

  .works-hero__stage {
    min-height: 100svh;
  }

  .works-hero__title {
    top: clamp(4.5rem, 9vw, 7rem);
    width: clamp(7.5rem, 22vw, 11rem);
  }

  .works-hero__thumb {
    top: 30%;
    left: 7%;
    width: 86%;
  }

  .manifesto-hero__thumb {
    width: 27%;
  }

  .about-hero__stage {
    min-height: 100svh;
  }

  .about-hero__text {
    /* Tablet — centralizado horizontal, próximo ao topo */
    width: 72%;
    max-width: 100%;
    top: clamp(3rem, 6svh, 6rem);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }

  /* Tablet — ideia.png responsivo */
  .about-hero__quote--ideia {
    width: clamp(15rem, 40vw, 26rem);
    bottom: clamp(3rem, 6svh, 6rem);
  }

  /* Tablet — seção 82svh (levemente mais alta que desktop 85svh não
     necessária aqui — mantida entre desktop e mobile). */
  .contato-hero,
  .contato-hero__stage {
    min-height: 82svh;
  }

  /* Card mais largo (78%), posicionado mais alto e detalhes reduzidos
     pra caber melhor na tela vertical. */
  .contato-hero__card {
    top: 20%;
    width: 78%;
    min-height: auto;
    max-height: none;
  }

  .contato-hero__form-bg {
    top: 8%;
    width: 90%;
  }

  .contato-hero__card-title-img {
    width: min(70%, 18rem);
  }

  .contato-hero__detail {
    width: min(14vw, 6rem);
  }

  /* Tablet — title centered + cards stacked centered, tighter vertical
     rhythm than desktop, primeiro card empurrado para baixo do título. */
  .servicos-hero {
    min-height: 170svh;
  }

  .servicos-hero__stage {
    min-height: 140svh;
  }

  /* Tablet — título mais compacto, entrelinha reduzido */
  .servicos-hero__title {
    top: clamp(4rem, 8svh, 6rem);
    left: 50%;
    width: 82vw;
    max-width: 46rem;
    height: clamp(9rem, 20svh, 16rem);
    transform: translateX(-50%);
  }

  .servicos-hero__title-word--do       { top: 0; left: 8%; width: 16%; }
  .servicos-hero__title-word--conceito { top: 26%; left: 22%; width: 44%; }
  /* Tablet — À na mesma linha do ENTREGA, entrelinha justo com CONCEITO */
  .servicos-hero__title-word--a        { top: 60%; left: 38%; width: 7%; }
  .servicos-hero__title-word--entrega  { top: 60%; left: 46%; width: 40%; }

  .servicos-hero__head-quote {
    display: none;
  }

  /* Tablet — cards centrados sem offset lateral (evita corte com
     translateX -50% + margin-left do desktop). */
  .servicos-hero__card--visualdev,
  .servicos-hero__card--creative,
  .servicos-hero__card--final {
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
    width: 84vw;
    max-width: 40rem;
  }

  /* Sem stagger horizontal na animação — só vertical, pra não sair do
     viewport em telas menores. */
  .servicos-hero__card--visualdev.has-card-reveal,
  .servicos-hero__card--creative.has-card-reveal,
  .servicos-hero__card--final.has-card-reveal {
    translate: 0 4rem;
  }

  .servicos-hero__card--visualdev {
    top: 30svh;
  }

  /* Tablet — gap reduzido pra layout mais compacto (mobile stack tight). */
  .servicos-hero__card--creative {
    top: 68svh;
  }

  .servicos-hero__card--final {
    top: 100svh;
  }
}

@media (max-width: 600px) {
  .home-loading::after {
    display: none;
  }

  .home-loading__mark {
    width: min(72vw, 20rem);
    filter: none;
  }

  .home-loading__mark-wrap {
    width: min(72vw, 20rem);
  }

  .home-loading__texts {
    width: min(80vw, 22rem);
  }

  .disorder-hero__background {
    width: 160%;
    max-width: none;
    transform: translateX(-19%);
  }

  /* Mobile — respiro entre palavras + box mais compacto pra caber com folga */
  .disorder-hero__composition {
    gap: clamp(1.2rem, 4svh, 2.6rem);
    padding: 10svh var(--container-gutter);
  }

  .disorder-hero__words {
    gap: clamp(0.4rem, 1.6vw, 1rem);
  }

  /* Palavras +15% no mobile pra ganharem presença. */
  .disorder-hero__word--disorder {
    width: 82vw;
    max-width: none;
  }

  .disorder-hero__word--israw {
    width: 52vw;
    max-width: none;
  }

  .disorder-hero__word--material {
    width: 88vw;
    max-width: none;
  }

  /* Box +10vw, ainda com folga lateral. */
  .disorder-hero__layer--center {
    width: 70vw;
    max-width: 22rem;
  }

  /* Elementos laterais e error tiles ~2× maiores no mobile. */
  .disorder-hero__side {
    width: 28vw;
    max-width: none;
  }

  .disorder-hero__error-tile {
    width: 22vw;
    max-width: none;
  }

  .disorder-hero__error-tile--1 {
    top: 8%;
    left: 3%;
  }

  .disorder-hero__error-tile--2 {
    top: 46%;
    right: 2%;
  }

  .disorder-hero__error-tile--3 {
    bottom: 6%;
    left: 4%;
  }

  /*
   * MOBILE — layout empilha em bandas horizontais com respiro. 5 palavras
   * + 3 thumbs mantidos, os outros escondidos pra não poluir. Quotes
   * distribuídas entre as bandas.
   */
  .manifesto-hero,
  .manifesto-hero__stage {
    min-height: 145svh;
    height: auto;
  }

  .manifesto-hero__word--diso   { top: 3svh; left: 3%; width: 62vw; }
  .manifesto-hero__word--rder   { top: 12svh; right: 3%; width: 55vw; }
  .manifesto-hero__word--israw  { top: 44svh; width: 78vw; }
  .manifesto-hero__word--mat    { top: 84svh; left: 3%; bottom: auto; width: 55vw; }
  .manifesto-hero__word--erial  { top: 122svh; right: 3%; bottom: auto; width: 68vw; }

  /* Só 3 thumbs no mobile pra manter a composição limpa */
  .manifesto-hero__thumb--puma,
  .manifesto-hero__thumb--valda,
  .manifesto-hero__thumb--ivete {
    display: none;
  }

  .manifesto-hero__thumb {
    width: 44vw;
  }

  .manifesto-hero__thumb--globo  { top: 26svh; left: 50%; right: auto; transform: translateX(-50%); }
  .manifesto-hero__thumb--adidas { top: 60svh; left: 6%; right: auto; }
  .manifesto-hero__thumb--bad    { top: 100svh; right: 6%; left: auto; bottom: auto; }

  /* Quotes — só as 3 mais importantes no mobile, distribuídas verticalmente */
  .manifesto-hero__quote {
    font-size: 0.7rem;
    max-width: 68vw;
  }
  .manifesto-hero__quote--top      { top: 25svh; right: 4%; max-width: 40vw; }
  .manifesto-hero__quote--chaos    { top: 56svh; left: 4%; max-width: 50vw; }
  .manifesto-hero__quote--process  { top: 96svh; right: 4%; max-width: 50vw; }
  .manifesto-hero__quote--closing,
  .manifesto-hero__quote--simplify { display: none; }

  .works-hero__stage {
    min-height: 100svh;
  }

  .works-hero__background {
    width: 170%;
    max-width: none;
    transform: translateX(-28%);
  }

  /* Mobile — título menor e mais alto pra não sobrepor o vídeo, e
     vídeo empurrado pra baixo com respiro. */
  .works-hero__title {
    top: clamp(3rem, 5.5svh, 4.5rem);
    width: 26vw;
    max-width: 8.5rem;
  }

  .works-hero__feature {
    top: clamp(8.5rem, 17svh, 11.5rem);
    width: 92vw;
    max-height: 32svh;
  }

  .works-hero__feature-img {
    max-height: 32svh;
  }

  .works-hero__panel {
    /* Mobile — panel colada logo acima do carousel de thumbs, sem o
       vazio grande de antes (era bottom 36svh, agora 22svh). */
    top: auto;
    bottom: 22svh;
    left: 50%;
    right: auto;
    width: 92vw;
    max-width: none;
    transform: translateX(-50%);
    padding: 0.7rem 0.95rem;
    backdrop-filter: blur(4px);
  }

  .works-hero__panel-list {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .works-hero__panel-item dt {
    font-size: 0.6rem;
    margin-bottom: 0.1rem;
  }

  .works-hero__panel-item dd {
    font-size: 0.58rem;
    line-height: 1.25;
  }

  .works-hero__panel-item dd br {
    display: none;
  }

  .works-hero__panel-bar {
    display: none;
  }

  /* Mobile — carousel sobe pra ficar logo abaixo do vídeo/setas em
     vez de ficar colado no rodapé (gap era 300px+). */
  .works-hero__carousel {
    bottom: 36svh;
  }

  .works-hero__carousel-track {
    animation-duration: 90s;
  }

  .works-hero__carousel-item {
    width: 8.5rem;
  }

  .works-hero__feature-tag,
  .works-hero__feature-quote {
    display: none;
  }

  .works-hero__ditt {
    width: 160%;
    max-width: none;
    transform: translateX(-20%);
  }

  .about-hero__stage {
    min-height: 100svh;
  }

  .about-hero__background {
    width: 164%;
    max-width: none;
    transform: translateX(-25%);
  }

  .about-hero__text {
    /* Mobile — centralizado horizontal, próximo ao topo. Pode sobrepor
       o "chaos is where the work begins" (feedback cliente 12/09). */
    width: 84%;
    max-width: 100%;
    top: clamp(2.5rem, 5svh, 5rem);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 12;
  }

  /* Mobile — ideia.png centralizado abaixo */
  .about-hero__quote--ideia {
    width: 72vw;
    max-width: 20rem;
    bottom: clamp(2rem, 5svh, 5rem);
  }

  .about-hero__ditt {
    width: 148%;
    max-width: none;
    transform: translateX(-17%);
  }

  .contato-hero__stage {
    min-height: 100svh;
  }

  .contato-hero__background {
    width: 164%;
    max-width: none;
    transform: translateX(-25%);
  }

  /* Mobile — seção 78svh (menor, mais compacta). Imagem de fundo com
     crop no top pra mostrar o começo da imagem. fundoform escondido. */
  .contato-hero,
  .contato-hero__stage {
    min-height: 78svh;
    height: auto;
  }

  .contato-hero__form-bg {
    display: none;
  }

  /* Background — full width, height 38svh (proporcional ao section
     compact 78svh) com crop no top. */
  .contato-hero__background {
    width: 100%;
    height: 38svh;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: top center;
  }

  /* Detalhes maiores no mobile — antes 22vw, agora 30vw pra ganhar
     mais peso visual junto com o background maior. */
  .contato-hero__detail {
    width: 30vw;
  }

  /* Card no mobile — min-height maior (32svh) pra dar mais peso visual
     ao formulário, com padding vertical maior. */
  .contato-hero__card {
    top: 40%;
    width: 88vw;
    min-height: 32svh;
    max-height: none;
    padding: 0 1.15rem 1.4rem;
    max-width: calc(100% - 1.5rem);
    gap: 1.1rem;
  }

  .contato-hero__card-head {
    min-height: clamp(4.5rem, 18vw, 6.5rem);
    padding-top: 0.7rem;
  }

  .contato-hero__form-bg {
    top: 8%;
    width: 96%;
  }

  .contato-hero__card-title-img {
    width: 78%;
  }

  .contato-hero__card-tag {
    font-size: 0.55rem;
  }

  .contato-hero__fields {
    gap: 0.5rem;
    margin-top: 0.6rem;
  }

  .contato-hero__fields-label {
    font-size: 0.68rem;
  }

  .contato-hero__fields input {
    font-size: 0.85rem;
    padding: 0.28rem 0;
  }

  .contato-hero__card-mark {
    width: 3.6rem;
    margin-top: 0.5rem;
  }

  /* No mobile mantém só 2 detalhes (TL e BR), esconde os outros pra
     não sobrepor com o card que ocupa quase toda largura. */
  .contato-hero__detail--tr,
  .contato-hero__detail--bl,
  .contato-hero__detail--ml {
    display: none;
  }

  .contato-hero__detail {
    width: 22vw;
  }

  .contato-hero__ditt {
    width: 150%;
    max-width: none;
    transform: translateX(-17%);
  }

  .servicos-hero__stage {
    min-height: 100svh;
  }

  .servicos-hero__background {
    width: 170%;
    max-width: none;
    transform: translateX(-27%);
  }

  .servicos-hero {
    min-height: 135svh;
  }

  .servicos-hero__stage {
    min-height: 130svh;
  }

  .servicos-hero__background {
    height: 38svh;
  }

  /* Mobile — título ainda mais compacto, entrelinha justo */
  .servicos-hero__title {
    top: clamp(4rem, 9svh, 5rem);
    left: 50%;
    width: 88vw;
    max-width: none;
    height: clamp(7rem, 16svh, 11rem);
    transform: translateX(-50%);
  }

  /* Mobile — palavras 2, 3 e 4 reduzidas pra caber sem ultrapassar
     as bordas laterais do container (que já é 88vw).
     À na mesma linha do ENTREGA, entrelinha justo com CONCEITO. */
  .servicos-hero__title-word--do       { top: 0; left: 4%; width: 20%; }
  .servicos-hero__title-word--conceito { top: 28%; left: 22%; width: 48%; }
  .servicos-hero__title-word--a        { top: 62%; left: 34%; width: 8%; }
  .servicos-hero__title-word--entrega  { top: 62%; left: 44%; width: 44%; }

  /* Cards centrados sem margin-left do desktop nem stagger horizontal. */
  .servicos-hero__card--visualdev,
  .servicos-hero__card--creative,
  .servicos-hero__card--final {
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
    width: 90vw;
  }

  .servicos-hero__card--visualdev.has-card-reveal,
  .servicos-hero__card--creative.has-card-reveal,
  .servicos-hero__card--final.has-card-reveal {
    translate: 0 3rem;
  }

  .servicos-hero__card--visualdev {
    top: 24svh;
  }

  /* Mobile — gap reduzido pra empilhamento compacto. */
  .servicos-hero__card--creative {
    top: 60svh;
  }

  .servicos-hero__card--final {
    top: 92svh;
  }

  .footer-carousel {
    min-height: 12rem;
    padding-top: 1.4rem;
    content-visibility: auto;
    contain-intrinsic-size: 12rem;
  }

  .footer-carousel__track {
    animation-duration: 56s;
  }

  .footer-carousel__bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.7rem;
    font-size: 0.58rem;
  }

  .footer-carousel__social {
    width: 100%;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .footer-contact {
    min-height: 9.25rem;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    font-size: 0.58rem;
    text-align: center;
  }

  .footer-contact__copy,
  .footer-contact__social {
    justify-self: stretch;
  }

  .footer-contact__emblem {
    width: 4.5rem;
  }

  .footer-contact__social {
    justify-content: space-between;
    gap: 0.75rem;
  }
}

/* ─── Works hero — info panel + featured caption + see-all (layout match) ─────────── */

/*
 * Feature — card flippable com vídeo Vimeo destaque. Sem panel de
 * texto abaixo (info agora vive no VERSO do card via flip 3D).
 * Video maior (60svh de altura) porque não precisa reservar espaço
 * pro panel de texto.
 */
.works-hero__feature {
  position: absolute;
  z-index: 4;
  top: clamp(9rem, 14svh, 11rem);
  left: 50%;
  width: min(72vw, 82rem);
  aspect-ratio: 16 / 9;
  max-height: 50svh;
  transform: translateX(-50%);
  display: block;
  overflow: visible;
}

/* Flip card removido — layout direto sem virar. */
.works-hero__feature-flip,
.works-hero__feature-face,
.works-hero__feature-face--back,
.works-hero__feature-info,
.works-hero__feature-info-close {
  display: none;
}

/* Vimeo iframe — preenche 100% do feature. */
.works-hero__feature-vimeo {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--color-black);
  pointer-events: none;
}

/*
 * Caption bottom — 2 linhas ABAIXO do vídeo (fora do frame do vídeo).
 * Posicionado absolutamente logo depois do feature bottom.
 * Substitui o antigo botão INFO + card flippable.
 */
/*
 * Caption ABAIXO do vídeo, entre feature-frame e carrossel. Texto puro,
 * sem backdrop, alinhado à esquerda pra ler naturalmente.
 */
.works-hero__feature-caption-below {
  position: absolute;
  z-index: 5;
  /* Feature top clamp(9rem, 14svh, 11rem) + max-height 50svh + gap */
  top: calc(clamp(9rem, 14svh, 11rem) + 50svh + 1rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(72vw, 82rem);
  padding: 0 clamp(0.4rem, 0.8vw, 1rem);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: var(--color-ink);
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

.works-hero__feature-caption-line {
  display: block;
  font-size: clamp(0.7rem, 0.88vw, 0.98rem);
}

.works-hero__feature-caption-line:first-child {
  color: #e9ff2f;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: clamp(0.72rem, 0.92vw, 1.05rem);
}

/* Botão INFO — canto inferior esquerdo do vídeo */
.works-hero__feature-info {
  position: absolute;
  z-index: 6;
  bottom: clamp(0.8rem, 1.4vw, 1.4rem);
  left: clamp(0.8rem, 1.4vw, 1.4rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  color: #e9ff2f;
  background: rgba(5, 5, 5, 0.72);
  border: 1.5px solid #e9ff2f;
  border-radius: 999px;
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: clamp(0.6rem, 0.8vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 220ms var(--ease-framer),
    background 220ms var(--ease-framer),
    transform 280ms var(--ease-framer);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.works-hero__feature-info:hover {
  color: #050505;
  background: #e9ff2f;
  transform: scale(1.04);
}

.works-hero__feature-info svg { display: block; }

/* Content do verso do card */
.works-hero__feature-info-content {
  max-width: 42rem;
  text-align: left;
}

.works-hero__feature-info-title {
  margin: 0 0 clamp(0.8rem, 1.4vw, 1.4rem);
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: clamp(1.6rem, 3.2vw, 3.4rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.works-hero__feature-info-text {
  margin: 0;
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: clamp(0.85rem, 1.1vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.55;
}

/* Botão VOLTAR no verso — canto inferior esquerdo, mirror do INFO */
.works-hero__feature-info-close {
  position: absolute;
  bottom: clamp(0.8rem, 1.4vw, 1.4rem);
  left: clamp(0.8rem, 1.4vw, 1.4rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  color: #050505;
  background: transparent;
  border: 1.5px solid #050505;
  border-radius: 999px;
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: clamp(0.6rem, 0.8vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 220ms var(--ease-framer),
    background 220ms var(--ease-framer);
}

.works-hero__feature-info-close:hover {
  color: #e9ff2f;
  background: #050505;
}

/* Panel de texto removido — info agora fica no verso do card. */
.works-hero__panel { display: none; }

/* Fade rápido durante a troca do vídeo destacado (data-feature-frame.is-swapping) */
.works-hero__feature.is-swapping .works-hero__feature-video {
  opacity: 0;
}

/*
 * Label do vídeo destacado — nome do trabalho atual (PUMA por padrão)
 * no canto superior esquerdo, atualiza junto com o swap.
 */
.works-hero__feature-label {
  position: absolute;
  z-index: 6;
  top: clamp(0.6rem, 1.2vw, 1.2rem);
  left: clamp(0.8rem, 1.4vw, 1.5rem);
  padding: 0.35rem 0.75rem;
  background: rgba(5, 5, 5, 0.7);
  color: #e9ff2f;
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: clamp(0.7rem, 0.9vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity 220ms var(--ease-framer);
}

.works-hero__feature.is-swapping .works-hero__feature-label {
  opacity: 0;
}

/*
 * Loading overlay — spinner circular + label "LOADING" centralizado
 * no vídeo destacado. Visível apenas quando .is-loading está no
 * frame, some quando o novo vídeo termina de carregar.
 */
.works-hero__feature-loading {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.4rem;
  background: rgba(5, 5, 5, 0.72);
  color: #e9ff2f;
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: clamp(0.7rem, 0.85vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 200ms var(--ease-framer),
    visibility 0s linear 200ms;
}

.works-hero__feature.is-loading .works-hero__feature-loading {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 200ms var(--ease-framer),
    visibility 0s linear 0s;
}

/* Loading GIF — mesma animação do preload inicial do site */
.works-hero__feature-loading-gif {
  display: block;
  width: clamp(3rem, 5vw, 5rem);
  height: auto;
}

.works-hero__feature-loading-label {
  display: block;
  line-height: 1;
}

/* Enquanto carregando, o próprio vídeo fica levemente dimmed pra
   dar contraste com o spinner sobreposto. */
.works-hero__feature.is-loading .works-hero__feature-video {
  filter: contrast(1.04) brightness(0.55);
}

/* Legado — tags de texto substituídas por .works-hero__feature-nav */
.works-hero__feature-tag { display: none; }

/*
 * Botões de navegação laterais — próximo/anterior nos lados do vídeo.
 * Circulares em amarelo, hover suave. Ficam FORA da moldura do vídeo
 * pra não obstruir conteúdo.
 */
.works-hero__feature-nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.4rem, 3vw, 3.2rem);
  height: clamp(2.4rem, 3vw, 3.2rem);
  padding: 0;
  color: #e9ff2f;
  background: rgba(5, 5, 5, 0.6);
  border: 1.5px solid #e9ff2f;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background 240ms var(--ease-framer),
    color 240ms var(--ease-framer),
    transform 320ms var(--ease-framer);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.works-hero__feature-nav:hover {
  background: #e9ff2f;
  color: #050505;
  transform: translateY(-50%) scale(1.06);
}

.works-hero__feature-nav svg {
  display: block;
}

.works-hero__feature-nav--prev {
  left: clamp(-3rem, -2.4vw, -2rem);
}

.works-hero__feature-nav--next {
  right: clamp(-3rem, -2.4vw, -2rem);
}

/*
 * MOBILE — setas descem pra ABAIXO do vídeo (não mais nas laterais).
 * Melhor interação em tela pequena, evita ficar fora do viewport.
 * Também garante SEE ALL sempre visível (o [data-anim] estava travando
 * opacity 0 quando reveal-section não disparava).
 */
@media (max-width: 760px) {
  .works-hero__feature-nav {
    top: auto;
    bottom: clamp(-4rem, -6vw, -3rem);
    transform: none;
  }

  .works-hero__feature-nav--prev {
    left: 30%;
    right: auto;
  }

  .works-hero__feature-nav--next {
    right: 30%;
    left: auto;
  }

  .works-hero__feature-nav:hover {
    transform: scale(1.06);
  }

  /*
   * SEE ALL — sempre visível no mobile (era travado em opacity 0 pelo
   * [data-anim] quando o reveal-section não disparava). Também sobe
   * um pouco pra não colar no rodapé.
   */
  .works-hero__seeall,
  .works-hero__seeall[data-anim] {
    opacity: 1 !important;
    filter: none !important;
    /* Sobe pra ficar logo abaixo do carousel (que está em bottom: 36svh
       com ~10svh de altura). Antes bottom era 1.4rem = colado no
       rodapé, longe do carousel. */
    bottom: 28svh;
    z-index: 20;
  }
}

.works-hero__feature-caption {
  position: absolute;
  z-index: 6;
  top: clamp(0.85rem, 1.6vw, 1.6rem);
  left: clamp(1rem, 1.8vw, 1.85rem);
  display: inline-flex;
  align-items: baseline;
  gap: clamp(0.6rem, 1vw, 1.05rem);
  color: var(--color-ink);
}

.works-hero__feature-name {
  font-size: clamp(1rem, 1.4vw, 1.55rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.works-hero__feature-tagline {
  color: rgba(244, 240, 232, 0.78);
  font-size: clamp(0.6rem, 0.8vw, 0.92rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.works-hero__feature-quote {
  position: absolute;
  z-index: 6;
  top: clamp(0.85rem, 1.6vw, 1.6rem);
  right: clamp(1rem, 1.8vw, 1.85rem);
  color: #e9ff2f;
  font-size: clamp(0.62rem, 0.78vw, 0.92rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-align: right;
  text-decoration: line-through;
  text-decoration-color: rgba(233, 255, 47, 0.5);
  text-transform: uppercase;
}

.works-hero__feature-quote em {
  font-style: italic;
  text-decoration: none;
}

/*
 * Panel horizontal — 3 colunas abaixo do vídeo pra caber sem overflow
 * e dar respiro pra carousel na base.
 */
.works-hero__panel {
  position: absolute;
  z-index: 8;
  top: calc(clamp(12rem, 22svh, 16rem) + 40svh + 1.4rem);
  bottom: auto;
  left: 50%;
  display: block;
  width: min(58vw, 68rem);
  padding: clamp(0.85rem, 1.2vw, 1.4rem) clamp(1.2rem, 1.8vw, 2rem);
  background: rgba(5, 5, 5, 0.66);
  color: var(--color-ink);
  font-family: "JetBrains Mono", "Fira Code", "Menlo", monospace;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translateX(-50%);
}

.works-hero__panel-list {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.4fr;
  gap: clamp(1rem, 2vw, 2.4rem);
  align-items: start;
}

.works-hero__panel-item dt {
  margin-bottom: clamp(0.18rem, 0.45vw, 0.4rem);
  color: #e9ff2f;
  font-size: clamp(0.62rem, 0.8vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.works-hero__panel-item dd {
  color: rgba(244, 240, 232, 0.82);
  font-size: clamp(0.62rem, 0.78vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
}

.works-hero__panel-bar {
  display: none;
}

/*
 * SEE ALL — botão destacado abaixo do carousel, estilo pill amarelo
 * bordado que leva à página works.php com o grid completo. z-index
 * alto (20) pra garantir que fica ACIMA do carousel/panel/etc e o
 * click sempre chegue nele.
 */
.works-hero__seeall {
  position: absolute;
  z-index: 20;
  pointer-events: auto;
  bottom: clamp(0.7rem, 1.2vw, 1.2rem);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.4rem;
  color: #e9ff2f;
  background: rgba(5, 5, 5, 0.72);
  border: 1.5px solid #e9ff2f;
  border-radius: 999px;
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: clamp(0.66rem, 0.82vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition:
    color 240ms var(--ease-framer),
    background 240ms var(--ease-framer),
    transform 360ms var(--ease-framer);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.works-hero__seeall:hover {
  color: #050505;
  background: #e9ff2f;
  transform: translateX(-50%) translateY(-2px);
}

.works-hero__seeall svg {
  display: block;
}

.works-hero__carousel-item {
  position: relative;
}

.works-hero__carousel-label {
  position: absolute;
  bottom: clamp(0.6rem, 0.8vw, 0.95rem);
  left: clamp(0.6rem, 0.85vw, 1rem);
  color: var(--color-ink);
  font-size: clamp(0.6rem, 0.78vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* ─── Works grid (works.php) ─────────────────────────────────────────────────────── */

.works-grid {
  position: relative;
  min-height: 100svh;
  /* Padding-top maior pro botão VOLTAR não conflitar com o logo fixed */
  padding: clamp(9rem, 15svh, 12rem) clamp(1.5rem, 4vw, 4rem) clamp(4rem, 8vh, 6rem);
  background: var(--color-black);
  overflow: hidden;
}

/*
 * Works grid — sempre visível independente do reveal system. A seção
 * é muito alta (3400px+ com 14 videos) e o IntersectionObserver global
 * usa threshold 0.32 que nunca é atingido em viewport pequeno (ratio
 * max ~0.24). Especificidade 0-2-0 pra vencer .reveal-section (0-1-0)
 * do pages.css que carrega depois.
 */
.works-grid.reveal-section {
  opacity: 1;
  transform: none;
}

/* Items do grid — sempre visíveis (não dependem do reveal do parent). */
.works-grid__item[data-anim] {
  opacity: 1;
  filter: none;
  transform: none;
}

.works-grid__stage {
  position: relative;
  max-width: 108rem;
  margin: 0 auto;
}

.works-grid__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vh, 3rem);
  padding-bottom: clamp(1rem, 1.6vh, 1.5rem);
  border-bottom: 1px solid rgba(233, 255, 47, 0.35);
}

/*
 * Back button — pill amarelo com seta pra esquerda, leva de volta pra home.
 * Ocupa o lugar do título antigo no cabeçalho do grid.
 */
.works-grid__back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.2rem;
  color: #e9ff2f;
  background: rgba(5, 5, 5, 0.72);
  border: 1.5px solid #e9ff2f;
  border-radius: 999px;
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: clamp(0.66rem, 0.82vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  transition:
    color 240ms var(--ease-framer),
    background 240ms var(--ease-framer),
    transform 320ms var(--ease-framer);
}

.works-grid__back:hover {
  color: #050505;
  background: #e9ff2f;
  transform: translateX(-3px);
}

.works-grid__back svg {
  display: block;
}

.works-grid__count {
  margin: 0;
  color: #e9ff2f;
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: clamp(0.72rem, 0.9vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.works-grid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.4vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.works-grid__item {
  position: relative;
}

/*
 * Card do grid — agora é <button> pra abrir lightbox com o vídeo full
 * correspondente. Reset dos estilos default de botão + display: block
 * pra caber o video interno em 100%.
 */
.works-grid__card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  cursor: pointer;
  appearance: none;
  isolation: isolate;
  transition: transform 480ms var(--ease-framer);
  -webkit-tap-highlight-color: transparent;
}

.works-grid__card:hover {
  transform: translateY(-3px);
}

.works-grid__card:focus-visible {
  outline: 2px solid #e9ff2f;
  outline-offset: 3px;
}

.works-grid__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--color-black);
  transition: transform 900ms var(--ease-framer);
}

.works-grid__card:hover .works-grid__video {
  transform: scale(1.03);
}

.works-grid__caption {
  position: absolute;
  z-index: 2;
  right: 0.9rem;
  bottom: 0.75rem;
  left: 0.9rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--color-ink);
  font-family: "Space Mono", "JetBrains Mono", monospace;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.works-grid__label {
  font-size: clamp(0.75rem, 1vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.works-grid__tagline {
  color: #e9ff2f;
  font-size: clamp(0.55rem, 0.7vw, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
}

/* Tablet: 2 colunas */
@media (max-width: 980px) {
  .works-grid__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 coluna */
@media (max-width: 600px) {
  .works-grid {
    padding-top: clamp(5rem, 8svh, 6rem);
  }

  .works-grid__list {
    grid-template-columns: 1fr;
  }

  .works-grid__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}

/* ─── About — //About prefix ─────────────────────────────────────────────────────── */

.about-hero__prefix {
  position: absolute;
  z-index: 11;
  top: clamp(11rem, 20vw, 23rem);
  left: clamp(2rem, 4.4vw, 5.2rem);
  color: var(--color-ink);
  font-size: clamp(1rem, 1.45vw, 1.65rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: lowercase;
  pointer-events: none;
}

/* ─── Universal entry animations (awwwards level — stagger + clip + parallax) ────── */

[data-reveal] {
  opacity: 0;
  transition:
    opacity 900ms var(--ease-premium),
    clip-path 1100ms var(--ease-premium);
  will-change: opacity, clip-path;
}

.reveal-section.is-visible [data-reveal] {
  opacity: 1;
}

.reveal-section.is-visible [data-reveal="head"]    { transition-delay: 80ms; }
.reveal-section.is-visible [data-reveal="panel"]   { transition-delay: 220ms; }
.reveal-section.is-visible [data-reveal="feature"] { transition-delay: 120ms; }
.reveal-section.is-visible [data-reveal="seeall"]  { transition-delay: 480ms; }
.reveal-section.is-visible [data-reveal="card"]    { transition-delay: calc(160ms + var(--card-i, 0) * 140ms); }

[data-reveal="card"] {
  clip-path: inset(0 100% 0 0);
  transition:
    opacity 800ms var(--ease-premium),
    clip-path 1100ms var(--ease-premium);
}

.reveal-section.is-visible [data-reveal="card"] {
  clip-path: inset(0 0 0 0);
}

[data-reveal="feature"] {
  clip-path: inset(0 0 100% 0);
  transition:
    opacity 700ms var(--ease-premium),
    clip-path 1200ms var(--ease-premium);
}

.reveal-section.is-visible [data-reveal="feature"] {
  clip-path: inset(0 0 0 0);
}

/* ─── Framer-style staged entry — disorder hero + demais heroes ─────────────────── */

/*
 * BACKGROUNDS (backtop/manifesto/works/etc.): scale + blur suave.
 * Curva Framer com fade blur → sharp que é a "assinatura" do Motion.
 */
.disorder-hero__background,
.manifesto-hero__background,
.works-hero__background,
.about-hero__background,
.contato-hero__background {
  transform: scale(1.05);
  filter: blur(6px);
  opacity: 0;
  transition:
    transform 1100ms var(--ease-framer),
    filter 780ms var(--ease-framer),
    opacity 620ms var(--ease-framer);
  will-change: transform, filter, opacity;
}

.reveal-section.is-visible .disorder-hero__background,
.reveal-section.is-visible .manifesto-hero__background,
.reveal-section.is-visible .works-hero__background,
.reveal-section.is-visible .about-hero__background,
.reveal-section.is-visible .contato-hero__background {
  transform: scale(1);
  filter: blur(0);
  opacity: 1;
}

/*
 * BARRAS (barras.png) — entra depois do backdrop com scale + fade + slide.
 * Stage 2. Preserva o filter do glitch continuous (por isso o "will-change"
 * inclui filter e usamos delay pra glitch começar depois do reveal).
 */
.disorder-hero__barras {
  opacity: 0;
  translate: 0 -0.6rem;
  transition:
    opacity 620ms var(--ease-framer) 160ms,
    translate 720ms var(--ease-framer) 160ms;
}

.reveal-section.is-visible .disorder-hero__barras {
  opacity: 1;
  translate: 0 0;
}

/*
 * ERROR (errorelement.png) — stage 3, entra com fade + subtle scale.
 * Antes do glitch continuous começar pra sensação de "boot" da tela.
 */
.disorder-hero__error {
  opacity: 0;
  scale: 1.04;
  transition:
    opacity 620ms var(--ease-framer) 220ms,
    scale 780ms var(--ease-framer) 220ms;
}

.reveal-section.is-visible .disorder-hero__error {
  opacity: 1;
  scale: 1;
}

/*
 * PALAVRAS DO TÍTULO — Entram em sequência com um FADE limpo.
 * UMA delas (sorteada em PHP por page load) recebe a classe .is-interfere
 * e ganha um efeito curto de interferência de TV. As outras entram
 * suave, mantendo o foco no glitch da palavra escolhida.
 */
.disorder-hero__word {
  opacity: 0;
  transition: none;
  will-change: opacity, transform;
}

/* Entrance padrão — fade + subtle slide up */
.reveal-section.is-visible .disorder-hero__word {
  animation: word-fade 500ms var(--ease-framer) both;
}

.reveal-section.is-visible .disorder-hero__word--disorder {
  animation-delay: 400ms;
}

.reveal-section.is-visible .disorder-hero__word--israw {
  animation-delay: 850ms;
}

.reveal-section.is-visible .disorder-hero__word--material {
  animation-delay: 1300ms;
}

/*
 * Interferência — sobrescreve o fade só na palavra sorteada. Mais rápida
 * agora (600ms), com flickers concentrados no começo. steps(1, end) dá
 * snaps duros pra feel de TV. Usa longhand pra preservar o
 * animation-delay do bloco de posição (disorder/israw/material).
 */
.reveal-section.is-visible .disorder-hero__word.is-interfere {
  animation-name: word-interference;
  animation-duration: 600ms;
  animation-timing-function: steps(1, end);
  animation-fill-mode: both;
}

/*
 * BOX MENOR (boxmenor.png) — ÚLTIMO stage, fade limpo depois das palavras.
 */
.reveal-section.is-visible .disorder-hero__layer--center {
  animation: word-fade 500ms var(--ease-framer) both;
  animation-delay: 1900ms;
}

@keyframes word-fade {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/*
 * IDLE GLITCH — depois da entrada, o JS (setupDisorderWordGlitch) picka
 * uma palavra aleatória a cada 2.5-6s e adiciona `.is-glitching` por
 * ~480ms. Anima UMA sequência rápida de interferência sem re-esconder
 * a palavra (opacidade fica entre 0.4 e 1, nunca em 0).
 */
.disorder-hero__word.is-glitching {
  animation: word-glitch-flash 460ms steps(1, end);
}

@keyframes word-glitch-flash {
  0%   { opacity: 1;    transform: translate3d(0, 0, 0) skewX(0deg); }
  12%  { opacity: 0.55; transform: translate3d(-6px, 1px, 0) skewX(-1.3deg); }
  22%  { opacity: 0.85; transform: translate3d(5px, -1px, 0) skewX(1deg); }
  34%  { opacity: 0.45; transform: translate3d(-4px, 2px, 0) skewX(-0.7deg); }
  46%  { opacity: 0.9;  transform: translate3d(3px, 0, 0) skewX(0.5deg); }
  58%  { opacity: 0.7;  transform: translate3d(-2px, -1px, 0) skewX(-0.3deg); }
  70%  { opacity: 1;    transform: translate3d(1px, 0, 0) skewX(0deg); }
  100% { opacity: 1;    transform: translate3d(0, 0, 0) skewX(0deg); }
}

/*
 * word-interference (entrance) — flickers rápidos + jitter + skew simulando
 * sinal digital instável. Concentrado nos primeiros 65% do ciclo pra
 * estabilizar cedo. steps(1, end) força snaps entre estados.
 */
@keyframes word-interference {
  0%   { opacity: 0; transform: translate3d(-8px, 3px, 0) skewX(-1.6deg); }
  10%  { opacity: 0.5; transform: translate3d(7px, -2px, 0) skewX(1.4deg); }
  16%  { opacity: 0; transform: translate3d(-10px, 2px, 0) skewX(-2deg); }
  24%  { opacity: 0.75; transform: translate3d(4px, 0, 0) skewX(0.7deg); }
  32%  { opacity: 0.25; transform: translate3d(-5px, -2px, 0) skewX(-1deg); }
  42%  { opacity: 0.9; transform: translate3d(3px, 1px, 0) skewX(0.4deg); }
  50%  { opacity: 0.4; transform: translate3d(-2px, 0, 0) skewX(-0.5deg); }
  60%  { opacity: 1; transform: translate3d(1px, 0, 0) skewX(0.2deg); }
  70%  { opacity: 1; transform: translate3d(0, 0, 0) skewX(0deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) skewX(0deg); }
}

/* Manifesto text + disorder — staggered masked reveal ───────────────────────────── */

.manifesto-hero__text,
.manifesto-hero__disorder {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1300ms var(--ease-premium);
  will-change: clip-path;
}

.reveal-section.is-visible .manifesto-hero__text {
  clip-path: inset(0 0 0 0);
  transition-delay: 120ms;
}

.reveal-section.is-visible .manifesto-hero__disorder {
  clip-path: inset(0 0 0 0);
  transition-delay: 320ms;
}

.manifesto-hero__thumb {
  opacity: 0;
  transform: translateY(20px) scale(0.94);
  transition:
    opacity 700ms var(--ease-premium),
    transform 900ms var(--ease-premium);
}

.reveal-section.is-visible .manifesto-hero__thumb--puma   { transition-delay: 480ms; }
.reveal-section.is-visible .manifesto-hero__thumb--globo  { transition-delay: 560ms; }
.reveal-section.is-visible .manifesto-hero__thumb--adidas { transition-delay: 640ms; }
.reveal-section.is-visible .manifesto-hero__thumb--valda  { transition-delay: 720ms; }
.reveal-section.is-visible .manifesto-hero__thumb--banda  { transition-delay: 800ms; }
.reveal-section.is-visible .manifesto-hero__thumb--bad    { transition-delay: 880ms; }

.reveal-section.is-visible .manifesto-hero__thumb {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Works title masked reveal ──────────────────────────────────────────────────────── */

.works-hero__title {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1100ms var(--ease-premium);
  will-change: clip-path;
}

.reveal-section.is-visible .works-hero__title {
  clip-path: inset(0 0 0 0);
  transition-delay: 80ms;
}

/* About text — masked reveal ─────────────────────────────────────────────────────── */

.about-hero__text {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1300ms var(--ease-premium);
  will-change: clip-path;
}

.reveal-section.is-visible .about-hero__text {
  clip-path: inset(0 0 0 0);
  transition-delay: 120ms;
}

.about-hero__prefix {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 700ms var(--ease-premium),
    transform 800ms var(--ease-premium);
}

.reveal-section.is-visible .about-hero__prefix {
  opacity: 1;
  transform: none;
  transition-delay: 320ms;
}

/* Contato — yellow card scale + slide (novo posicionamento top: 15%,
   sem centralização vertical). */

.contato-hero__card {
  opacity: 0;
  transform: translate(-50%, 28px) scale(0.985);
  transition:
    opacity 700ms var(--ease-premium),
    transform 900ms var(--ease-premium);
  will-change: opacity, transform;
}

.reveal-section.is-visible .contato-hero__card {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 120ms;
}

/* Reduced-motion overrides ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .disorder-hero__word,
  .disorder-hero__layer--center,
  .manifesto-hero__text,
  .manifesto-hero__disorder,
  .manifesto-hero__thumb,
  .works-hero__title,
  .about-hero__text,
  .contato-hero__card {
    opacity: 1 !important;
    clip-path: none !important;
    translate: 0 0 !important;
    transition: none !important;
  }

  .disorder-hero__background,
  .manifesto-hero__background,
  .works-hero__background,
  .about-hero__background,
  .contato-hero__background,
  .servicos-hero__background,
  .works-hero__feature-img {
    transform: none !important;
    transition: none !important;
  }
}

/* Mobile fine-tunes for new modules ──────────────────────────────────────────────── */

@media (max-width: 980px) {
  .works-hero__panel {
    bottom: 14svh;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 92vw;
    max-width: none;
  }

  .works-hero__feature-quote,
  .works-hero__feature-tag {
    display: none;
  }

  .works-hero__seeall {
    bottom: clamp(1.4rem, 4vw, 2.4rem);
  }

  .contato-hero__card {
    grid-template-rows: auto auto auto;
  }

  .contato-hero__card-tag {
    font-size: 0.62rem;
  }
}

@media (max-width: 600px) {
  /* Mobile 600px — vídeo empurrado pra baixo com respiro pra não
     sobrepor o título "LAST WORKS" no topo. */
  .works-hero__feature {
    top: clamp(8.5rem, 17svh, 11.5rem);
    width: 92vw;
    max-height: 32svh;
  }

  .works-hero__feature-img,
  .works-hero__feature-play .works-hero__feature-img {
    max-height: 32svh;
  }

  .works-hero__title {
    top: clamp(3rem, 5.5svh, 4.5rem);
    width: 26vw;
    max-width: 8.5rem;
  }

  /* Panel colado logo acima do carousel (era anchored ao bottom do
     feature, deixava um gap grande). Agora bottom 22svh — próximo do
     carousel que está em bottom 5svh. */
  .works-hero__panel {
    top: auto;
    bottom: 22svh;
    left: 50%;
    right: auto;
    width: 92vw;
    max-width: none;
    transform: translateX(-50%);
  }

  .works-hero__seeall {
    bottom: 1.2rem;
    font-size: 0.7rem;
  }
}

@media (max-width: 980px) and (min-width: 601px) {
  .works-hero__feature {
    top: clamp(8rem, 16svh, 11rem);
    width: 88vw;
    max-height: 44svh;
  }

  .works-hero__feature-img,
  .works-hero__feature-play .works-hero__feature-img {
    max-height: 44svh;
  }

  /* Panel colado logo acima do carousel no tablet — bottom 14svh
     próximo do carousel em bottom 5svh (era anchored no feature). */
  .works-hero__panel {
    top: auto;
    bottom: 14svh;
    left: 50%;
    right: auto;
    width: 88vw;
    max-width: none;
    transform: translateX(-50%);
  }
}

/* ─── Scroll-driven micro-parallax on overlay titles (consumes --scroll-progress) ── */

@media (prefers-reduced-motion: no-preference) {
  /* Scroll parallax na composição inteira — sobe sutilmente conforme rola */
  .reveal-section.is-visible .disorder-hero__composition:not(.disorder-hero__composition--left) {
    transform: translate3d(0, calc(var(--scroll-progress, 0) * -12px), 0);
    transition: transform 80ms linear;
  }

  /* Variante left-align preserva translateY(-50%) pra centralização */
  .reveal-section.is-visible .disorder-hero__composition--left {
    transform: translateY(-50%) translate3d(0, calc(var(--scroll-progress, 0) * -12px), 0);
    transition: transform 80ms linear;
  }

  .reveal-section.is-visible .works-hero__title {
    transform: translateX(-50%) translate3d(0, calc(var(--scroll-progress, 0) * -14px), 0);
    transition: clip-path 1100ms var(--ease-premium), transform 80ms linear;
  }

  .reveal-section.is-visible .about-hero__text {
    /* Preserva translateX(-50%) da centralização horizontal */
    transform: translateX(-50%) translate3d(0, calc(var(--scroll-progress, 0) * -10px), 0);
    transition: clip-path 1300ms var(--ease-premium), transform 80ms linear;
  }
}

/* ─── Feature play button + Lightbox ─────────────────────────────────────────────── */

.works-hero__feature-play {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1323 / 793;
  max-height: 40svh;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  appearance: none;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.works-hero__feature-play .works-hero__feature-img,
.works-hero__feature-play .works-hero__feature-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-premium), filter 480ms var(--ease-premium);
}

.works-hero__feature-play:hover .works-hero__feature-img,
.works-hero__feature-play:focus-visible .works-hero__feature-img {
  transform: scale(1.015);
  filter: brightness(1.05);
}

.works-hero__feature-playicon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  width: clamp(3.5rem, 5.5vw, 5.5rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(244, 240, 232, 0.85);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.4);
  color: var(--color-ink);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translate(-50%, -50%);
  transition:
    background 320ms var(--ease-premium),
    border-color 320ms var(--ease-premium),
    transform 360ms var(--ease-premium);
}

.works-hero__feature-playicon svg {
  margin-left: 0.18em;
}

.works-hero__feature-play:hover .works-hero__feature-playicon,
.works-hero__feature-play:focus-visible .works-hero__feature-playicon {
  background: #e9ff2f;
  border-color: #e9ff2f;
  color: var(--color-black);
  transform: translate(-50%, -50%) scale(1.06);
}

.works-hero__feature-play:focus-visible {
  outline: 2px solid #e9ff2f;
  outline-offset: 6px;
}

/* Lightbox ────────────────────────────────────────────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 320ms var(--ease-premium), visibility 0s linear 320ms;
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 320ms var(--ease-premium), visibility 0s linear 0s;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: zoom-out;
}

.lightbox__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100svh;
  max-height: 100svh;
  background: var(--color-black);
  box-shadow: none;
  transform: scale(0.98);
  transition: transform 360ms var(--ease-premium);
}

.lightbox.is-open .lightbox__panel {
  transform: scale(1);
}

.lightbox__video,
.lightbox__vimeo {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--color-black);
  object-fit: contain;
  border: 0;
  display: block;
  order: 1;
}

/* Info fixa no bottom do panel fullscreen */
.lightbox__info {
  order: 2;
  flex: 0 0 auto;
}

/*
 * Info — nome do trabalho + descrição ABAIXO do vídeo (não sobreposto).
 * Fluxo natural do panel flex column.
 */
.lightbox__info {
  padding: clamp(0.9rem, 1.4vw, 1.4rem) clamp(1rem, 1.6vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--color-black);
  color: var(--color-ink);
  font-family: "Space Mono", "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.35;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms var(--ease-premium), transform 300ms var(--ease-premium);
}

.lightbox.is-open .lightbox__info {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 260ms;
}

.lightbox__info:has([data-lightbox-title]:empty):has([data-lightbox-desc]:empty) {
  display: none;
}

.lightbox__info-title {
  color: #e9ff2f;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: clamp(0.8rem, 1vw, 1.1rem);
}

.lightbox__info-desc {
  font-weight: 500;
  font-size: clamp(0.72rem, 0.9vw, 1rem);
}

.lightbox__close {
  position: absolute;
  top: clamp(1rem, 2vw, 1.6rem);
  right: clamp(1rem, 2vw, 1.6rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(244, 240, 232, 0.35);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.6);
  color: var(--color-ink);
  cursor: pointer;
  appearance: none;
  transition:
    background 240ms var(--ease-premium),
    border-color 240ms var(--ease-premium),
    color 240ms var(--ease-premium);
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: #e9ff2f;
  border-color: #e9ff2f;
  color: var(--color-black);
  outline: 0;
}

@media (max-width: 600px) {
  .lightbox__panel {
    width: 94vw;
    max-height: 70svh;
  }

  .lightbox__close {
    top: -2.6rem;
    width: 2rem;
    height: 2rem;
  }
}

body.lightbox-open {
  overflow: hidden;
}

/* ─── Glitch overlay (transmission-error effect) ─────────────────────────────── */

.glitch-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  mix-blend-mode: lighten;
  opacity: 0.92;
}

.glitch-overlay canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

@media (prefers-reduced-motion: reduce) {
  .glitch-overlay {
    opacity: 0.6;
  }
}