/* =========================================================
   P.crew — estilo do site
   Paleta oficial (BRIEF, direção de arte, 14/11/2026):
   cor 1 Grafite, cor 2 Papel, cor 3 Vermelhão (o Ponto).
   Tons abaixo são derivados das três; não existe quarta cor.
   ========================================================= */
:root {
  /* cores */
  --grafite: #0E1014;
  --papel: #F4F2ED;
  --vermelhao: #FF5A1F;
  --grafite-2: #171A20;      /* superfície sobre Grafite */
  --grafite-3: #2A2E36;      /* linhas sobre Grafite */
  --papel-2: #E6E1D6;        /* fita e superfície sobre Papel */
  --papel-suave: #ABA69C;    /* texto suave sobre Grafite (7,7:1) */
  --grafite-suave: #4B4D53;  /* texto suave sobre Papel (7,6:1) */

  /* fontes */
  --f-titulo: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-rotulo: "JetBrains Mono", ui-monospace, "Consolas", monospace;

  /* escala de tipo: 13 / 16 / 18 / 24 / 36 / 56 / 88 / 160 */
  --t13: 13px;
  --t16: 16px;
  --t18: clamp(16px, 1.25vw, 18px);
  --t24: clamp(20px, 1.7vw, 24px);
  --t36: clamp(26px, 2.6vw, 36px);
  --t56: clamp(36px, 4.4vw, 56px);
  --t88: clamp(44px, 6.6vw, 88px);
  --t160: clamp(50px, 9vw, 150px);

  /* escala de espaço: 8 / 16 / 24 / 40 / 64 / 104 / 168 */
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 40px;
  --e5: 64px;
  --e6: 104px;
  --e7: 168px;

  --margem: clamp(20px, 6vw, 104px);
  --curva: cubic-bezier(0.22, 1, 0.36, 1);

  /* textura de grão (SVG leve, sem imagem) */
  --ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ruido-escuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .06 0 0 0 0 .08 0 0 0 1.2 -0.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--papel);
  color: var(--grafite);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t18);
  line-height: 1.45;
  background: var(--papel);
  color: var(--grafite);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p, ol, ul, dl, dd { margin: 0; }
h1, h2 { text-wrap: balance; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.cena { position: relative; }

.rotulo {
  font-family: var(--f-rotulo);
  font-size: var(--t13);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.titulo-secao {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: var(--t88);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.sem-quebra { white-space: nowrap; }

/* o ponto final de texto que o Ponto substitui: fica no HTML, some da vista */
.ponto-real {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- o Ponto ---------- */
.ponto {
  display: inline-block;
  border-radius: 50%;
  background: var(--vermelhao);
  box-shadow: 0 0 0 2px var(--grafite);
}

.ponto-vivo [data-ponto] { visibility: hidden; }

.ponto-viajante {
  position: fixed;
  left: 0; top: 0;
  width: 100px; height: 100px;
  z-index: 60;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
}
.ponto-viajante span {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--vermelhao);
  box-shadow: 0 0 0 var(--anel, 2px) var(--grafite);
  animation: ponto-nasce 0.6s var(--curva) 1.05s both;
}
.ponto-viajante span::after {
  content: "";
  position: absolute;
  left: 40%; top: 31%;
  border-style: solid;
  border-width: 19px 0 19px 30px;
  border-color: transparent transparent transparent var(--grafite);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.ponto-viajante.modo-play span::after { opacity: 1; }
@keyframes ponto-nasce { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- grão de filme ---------- */
.grao {
  position: absolute;
  inset: -40%;
  background-image: var(--ruido);
  opacity: 0.07;
  pointer-events: none;
  animation: grao 0.9s steps(6) infinite;
}
@keyframes grao {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); }
  80% { transform: translate(5%, 4%); }
  100% { transform: translate(-2%, 6%); }
}

/* =========================================================
   1. ABERTURA — a câmera em 3 passos (Grafite, Vermelhão, Papel)
   Sem JS ou com movimento reduzido: tudo empilhado e parado.
   Com .heroi-vivo: cena fixa, objeto central, partículas e cores.
   ========================================================= */
.cena-abertura { background: var(--vermelhao); color: var(--grafite); }
.abertura-palco {
  display: block;
  overflow: hidden;
  color: var(--grafite);
  transition: color 0.45s ease;
}
/* abre em Vermelhão; a íris abre o Papel (passo 2) e depois o Grafite (passo 3) */
.camada { position: absolute; inset: 0; pointer-events: none; }
.camada-base { background: var(--vermelhao); }
.camada-2 { background: var(--papel); display: none; }
.camada-3 { background: var(--grafite); display: none; }
.heroi-vivo .camada-2, .heroi-vivo .camada-3 { display: block; clip-path: circle(0% at 50% 50%); }
.abertura-palco[data-passo="3"] { color: var(--papel); }

.visor {
  position: absolute;
  inset: clamp(14px, 2.4vw, 32px);
  pointer-events: none;
  font-family: var(--f-rotulo);
  font-size: var(--t13);
  letter-spacing: 0.08em;
  z-index: 5;
}
.canto {
  position: absolute;
  width: clamp(22px, 3vw, 40px);
  height: clamp(22px, 3vw, 40px);
  border: 0 solid currentColor;
  opacity: 0.8;
}
.canto-se { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.canto-sd { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.canto-ie { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.canto-id { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.hud {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--e1);
  padding: clamp(10px, 1.4vw, 18px);
}
.hud-topo-esq { left: 0; top: 0; }
.hud-topo-dir { right: 0; top: 0; }
.hud-base-esq { left: 0; bottom: 0; }
.hud-base-dir { right: 0; bottom: 0; }
.timecode { font-variant-numeric: tabular-nums; }
.rec-luz {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--vermelhao);
  box-shadow: 0 0 0 1.5px var(--grafite);
  animation: rec 1.2s steps(1) infinite;
}
@keyframes rec { 50% { opacity: 0.15; } }
.medidores { display: inline-flex; gap: 3px; height: 34px; align-items: stretch; }
.med {
  position: relative;
  width: 7px;
  background: repeating-linear-gradient(0deg, currentColor 0 4px, transparent 4px 6px);
  opacity: 0.25;
}
.med i {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, currentColor 0 4px, transparent 4px 6px);
  transform-origin: bottom;
  animation: nivel 0.62s steps(5) infinite alternate;
}
.medidores .med { opacity: 1; background: none; }
.medidores .med::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, currentColor 0 4px, transparent 4px 6px);
  opacity: 0.22;
}
.med-r i { animation-duration: 0.47s; animation-delay: -0.2s; }
@keyframes nivel { from { transform: scaleY(0.2); } 40% { transform: scaleY(0.75); } to { transform: scaleY(0.95); } }

.particulas { position: absolute; inset: 0; pointer-events: none; z-index: 1; display: none; }
.particula { position: absolute; left: 0; top: 0; will-change: transform; }
.p-capa { border: 3px solid currentColor; background: var(--grafite); overflow: hidden; margin: -60px 0 0 -40px; }
.p-capa img { width: 100%; height: 100%; object-fit: cover; }
.p-losango { border: 2px solid currentColor; }
.p-clipe { background: currentColor; border-radius: 2px; }
.p-ponto { border: 2px solid currentColor; border-radius: 50%; }
.p-ponto.cheio { background: var(--vermelhao); border-color: var(--grafite); }

/* objeto central */
.objeto-ancora {
  position: relative;
  display: flex;
  justify-content: center;
  margin: var(--e5) auto 0;
  perspective: 1400px;
  z-index: 2;
  pointer-events: none;
}
.objeto {
  position: relative;
  width: min(52vw, 760px);
  aspect-ratio: 1192 / 790;
  transform-style: preserve-3d;
  will-change: transform;
}
.vista {
  position: absolute;
  left: 0; top: 50%;
  width: 100%;
  translate: 0 -50%;
  backface-visibility: hidden;
}
.vista > img { width: 100%; height: auto; }
.vista-angulo, .vista-angulo-dir { opacity: 0; }
.sombra-contato {
  position: absolute;
  left: 10%; right: 10%;
  bottom: -4%;
  height: 6%;
  border-radius: 50%;
  background: rgba(14, 16, 20, 0.3);
}
/* tela do notebook: um retângulo de 800x500 levado aos 4 cantos da tela por matrix3d (pagina.js) */
.tela-persp {
  position: absolute;
  left: 0; top: 0;
  width: 800px; height: 500px;
  transform-origin: 0 0;
  overflow: hidden;
  background: #08090B;
}
.tela-persp .rolo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; }
.tela-tc {
  position: absolute; left: 14px; bottom: 12px;
  display: flex; align-items: center; gap: 8px;
  padding: 3px 8px;
  background: rgba(14, 16, 20, 0.7);
  font-family: var(--f-rotulo); font-size: 20px; letter-spacing: 0.06em;
  color: var(--papel);
  font-variant-numeric: tabular-nums;
}
.tela-tc i { width: 11px; height: 11px; border-radius: 50%; background: var(--papel); animation: rec 1.2s steps(1) infinite; }
.tela-capas { display: flex; gap: 6px; padding: 26px 18px 60px; }
.tela-capas img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; }
.tela-capas::after {
  /* trilha de edição embaixo das capas */
  content: "";
  position: absolute; left: 18px; right: 18px; bottom: 22px; height: 18px;
  background: repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.55) 0 120px, transparent 120px 126px);
}
.tela-agulha { position: absolute; left: 62%; top: 12px; bottom: 12px; width: 3px; background: var(--papel); }

/* segundo objeto: a câmera */
.camera-obj {
  position: absolute;
  left: 50%; top: 50%;
  width: min(17vw, 240px);
  margin-left: calc(min(17vw, 240px) / -2);
  margin-top: calc(min(17vw, 240px) * -0.37);
  z-index: 3;
  will-change: transform;
}
.camera-obj img { width: 100%; height: auto; }
.cena-abertura .camera-obj { display: none; }
.heroi-vivo .cena-abertura .camera-obj { display: block; }

/* textos da abertura (empilhados por padrão) */
.abertura-textos { position: relative; z-index: 4; padding: var(--e6) var(--margem) 0; }
.capsula {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--f-rotulo);
  font-size: var(--t13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--e3);
}
.titulo-abertura {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(52px, 8.4vw, 150px);
  line-height: 0.93;
  letter-spacing: -0.035em;
}
.passo { display: block; }
.passo-2 { margin-top: 0.1em; font-size: clamp(46px, 7vw, 118px); }
.ponto-vende, .ponto-titulo { width: 0.17em; height: 0.17em; margin-left: 0.04em; vertical-align: baseline; position: relative; }
.passo-3 { margin-top: var(--e4); padding-bottom: var(--e5); }
.apoio-abertura {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t36);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.servicos { margin-top: var(--e4); }
.servicos li {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: var(--t56);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.trava-foco {
  position: absolute;
  left: 50%; top: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  visibility: visible;
  opacity: calc(1 - var(--b, 0));
  pointer-events: none;
  animation: trava 1.1s steps(6) 1.05s backwards;
}
.trava-foco i { position: absolute; width: 14px; height: 14px; border: 0 solid var(--papel); }
.trava-foco i:nth-child(1) { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.trava-foco i:nth-child(2) { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.trava-foco i:nth-child(3) { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.trava-foco i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
@keyframes trava { 0% { transform: scale(2.8); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* ---- versão viva (com movimento) ---- */
.heroi-vivo .particulas { display: block; }
.heroi-vivo .objeto-ancora {
  position: absolute; inset: 0;
  margin: 0;
  align-items: center;
}
.heroi-vivo .abertura-textos { position: absolute; inset: 0; padding: 0; pointer-events: none; }
.heroi-vivo .abertura-textos > * , .heroi-vivo .titulo-abertura .passo { pointer-events: auto; }
.heroi-vivo .capsula {
  position: absolute;
  left: 50%; top: 15%;
  transform: translateX(-50%);
  margin: 0;
}
.heroi-vivo .passo-1 {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 0;
}
.heroi-vivo .metade {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  white-space: nowrap;
}
.heroi-vivo .metade-e { right: calc(50% + min(52vw, 760px) * 0.37 + 1vw); }
.heroi-vivo .metade-d { left: calc(50% + min(52vw, 760px) * 0.37 + 1vw); }
.heroi-vivo .passo-2 {
  position: absolute;
  left: var(--margem);
  top: 50%;
  width: 48vw;
  margin: 0;
  transform: translateY(-50%);
}
.heroi-vivo .passo-3 {
  position: absolute;
  left: 53vw;
  right: var(--margem);
  top: 50%;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
}
.heroi-vivo .passo-1 .u { animation: letra-entra 0.85s var(--curva) both; animation-delay: calc(var(--k) * 420ms + 150ms); }
@keyframes letra-entra { from { transform: translateY(112%); } }

/* =========================================================
   2. A SEMANA DO DONO — a lista riscada no papel
   ========================================================= */
.cena-lista {
  background: var(--papel);
  color: var(--grafite);
}
.cena-lista .fx-palco { padding: var(--e5) var(--margem); }
.pauta {
  position: absolute;
  inset: 0;
  background-image:
    var(--ruido-escuro),
    repeating-linear-gradient(180deg, transparent 0 47px, rgba(14, 16, 20, 0.08) 47px 48px);
  background-size: 220px 220px, 100% 48px;
  opacity: 0.55;
  pointer-events: none;
}
.pauta::after {
  /* margem do caderno: dois traços em Grafite */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: clamp(28px, 9vw, 140px);
  width: 6px;
  border-left: 1px solid rgba(14, 16, 20, 0.22);
  border-right: 1px solid rgba(14, 16, 20, 0.22);
}
.lista-folha {
  position: relative;
  text-align: center;
  max-width: 900px;
}
.lista-titulo {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t36);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--e4);
}
.lista-itens li {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: var(--t88);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.item-texto { position: relative; display: inline-block; }
.risco {
  position: absolute;
  left: -6%;
  width: 112%;
  top: calc(50% - 0.2em);
  height: 0.36em;
  overflow: visible;
  transform-origin: left center;
  transform: scaleX(clamp(0, (var(--progresso, 1) - var(--ini)) / 0.07, 1));
}
.risco path {
  fill: none;
  stroke: var(--grafite);
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.lista-fecho {
  margin-top: var(--e4);
  font-size: var(--t24);
  font-weight: 500;
}
.ponto-texto {
  width: 0.36em; height: 0.36em;
  margin-left: 0.08em;
  vertical-align: -0.02em;
}

/* =========================================================
   3. COMO FUNCIONA — a linha do tempo de edição
   ========================================================= */
.cena-edicao {
  background: var(--grafite);
  color: var(--papel);
  padding: var(--e6) var(--margem) var(--e6);
  overflow: hidden;
}
.varredura {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.035) 0 1px, transparent 1px 4px);
  pointer-events: none;
}
.edicao-topo { position: relative; max-width: 900px; }
.edicao-topo .rotulo { color: var(--papel-suave); margin-bottom: var(--e3); }

.timeline {
  --nome: 44px;
  position: relative;
  margin-top: var(--e5);
  background: var(--grafite-2);
  border: 1px solid var(--grafite-3);
  overflow-x: clip;
  font-family: var(--f-rotulo);
  font-size: var(--t13);
}
.regua {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px 18px calc(var(--nome) + 6px);
  color: var(--papel-suave);
  font-variant-numeric: tabular-nums;
  background:
    repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.28) 0 1px, transparent 1px 16px)
    calc(var(--nome)) 100% / 100% 7px no-repeat;
  border-bottom: 1px solid var(--grafite-3);
}
.trilha {
  display: grid;
  grid-template-columns: var(--nome) 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--grafite-3);
}
.trilha:last-of-type { border-bottom: 0; }
.trilha-nome {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--papel-suave);
  border-right: 1px solid var(--grafite-3);
}
.trilha-v { height: clamp(64px, 9vh, 92px); }
.trilha-a { height: clamp(44px, 6vh, 60px); }
.clipes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
  padding: 6px 0;
}
.clipe {
  position: relative;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(244, 242, 237, 0.12) 46px 47px),
    rgba(244, 242, 237, 0.07);
  border: 1px solid rgba(244, 242, 237, 0.28);
  color: var(--papel);
  padding: 6px 8px;
  transition: background-color 0.4s ease, color 0.4s ease;
}
.clipe.tocou {
  background: var(--papel);
  color: var(--grafite);
}
.onda { width: 100%; height: 100%; padding: 6px 0; }
.onda rect { fill: var(--papel-suave); opacity: 0.75; }

.agulha-pista {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--nome);
  right: 0;
  pointer-events: none;
}
.agulha {
  position: absolute;
  inset: 0;
  transform: translateX(calc(var(--cabeca, 0) * 100%));
}
.agulha::before {
  content: "";
  position: absolute;
  left: -1px; top: 0; bottom: 0;
  width: 2px;
  background: var(--papel);
}
.agulha-cabeca {
  position: absolute;
  left: -9px; top: -9px;
  width: 18px; height: 18px;
}
.agulha-tc {
  position: absolute;
  top: 6px;
  left: 14px;
  padding: 2px 6px;
  background: var(--grafite);
  color: var(--papel);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(calc(var(--cabeca, 0) * -100% - var(--cabeca, 0) * 28px));
}

.etapas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e4);
  margin-top: var(--e4);
  padding-left: 44px;
  color: var(--papel-suave);
  max-width: none;
}
.etapas li { max-width: 34ch; }
.etapas strong {
  display: block;
  margin-bottom: var(--e1);
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t24);
  letter-spacing: -0.01em;
  color: var(--papel);
}
.edicao-fecho {
  position: relative;
  margin-top: var(--e6);
  text-align: right;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: var(--t56);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* =========================================================
   4. PICO — claquete de Vermelhão e folha de contato
   ========================================================= */
.cena-trabalhos {
  overflow: clip;
  background: var(--grafite);
  color: var(--papel);
}
.cena-trabalhos .fx-palco { display: block; }

.claquete {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--vermelhao);
  color: var(--grafite);
  transform: translateY(calc(var(--sobe, 0) * -101%));
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 5vh, 56px) var(--margem);
}
.claquete::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--ruido-escuro);
  opacity: 0.35;
  pointer-events: none;
}
.claquete-haste, .claquete-base {
  height: clamp(36px, 7vh, 70px);
  background: repeating-linear-gradient(-55deg, var(--grafite) 0 34px, var(--vermelhao) 34px 68px);
  border: 3px solid var(--grafite);
}
.claquete-haste { transform-origin: 0 100%; }
.claquete-base { margin-top: 4px; }
.claquete-corpo {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e4);
  border: 3px solid var(--grafite);
  border-top: 0;
  padding: var(--e4) clamp(18px, 4vw, 64px);
}
.titulo-pico {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(58px, 13vw, 210px);
  line-height: 0.9;
  letter-spacing: -0.045em;
}
.ponto-pico {
  width: 0.16em; height: 0.16em;
  margin-left: 0.03em;
}
.claquete-campos {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 0;
  border-top: 2px solid var(--grafite);
}
.claquete-campos div {
  padding: var(--e2) var(--e4) 0 0;
  margin-right: var(--e4);
}
.claquete-campos dt {
  font-family: var(--f-rotulo);
  font-size: var(--t13);
  letter-spacing: 0.08em;
}
.claquete-campos dd {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t24);
}

.folha {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.trilho-filme {
  --h: min(66vh, 680px);
  width: max-content;
  padding: 0 var(--margem);
  transform: translateX(calc(var(--tt, 0) * (100vw - 100%)));
}
.perfuracao {
  height: 22px;
  background: repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.16) 0 14px, transparent 14px 32px) 0 50% / 100% 10px no-repeat;
}
.cartoes {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 64px);
  padding: var(--e3) 0;
}
.cartao {
  position: relative;
  width: calc(var(--h) * 9 / 16);
  flex: none;
}
.cartao-horizontal { width: min(52vw, calc(var(--h) * 16 / 9), 820px); }
.borda-filme {
  display: block;
  margin-bottom: var(--e1);
  font-family: var(--f-rotulo);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--papel-suave);
}
.quadro {
  position: relative;
  height: var(--h);
  border: 1px solid rgba(244, 242, 237, 0.22);
  overflow: hidden;
  background: var(--grafite-2);
}
.cartao-horizontal .quadro { height: auto; aspect-ratio: 16 / 9; }
.quadro img { width: 100%; height: 100%; object-fit: cover; }
.play {
  position: absolute;
  left: 16px; bottom: 16px;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid var(--papel);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.play::after {
  content: "";
  position: absolute;
  left: 40%; top: 31%;
  border-style: solid;
  border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent var(--papel);
}
.cartao.ativo .play { background: var(--vermelhao); border-color: var(--vermelhao); box-shadow: 0 0 0 2px var(--grafite); }
.cartao.ativo .play::after { border-left-color: var(--grafite); }
.ponto-vivo .cartao.ativo .play { background: transparent; border-color: transparent; box-shadow: none; }
.ponto-vivo .cartao.ativo .play::after { border-left-color: transparent; }

.cartao-rotulo {
  margin-top: var(--e2);
  font-family: var(--f-rotulo);
  font-size: var(--t13);
  letter-spacing: 0.08em;
  color: var(--papel);
}
.cartao-linha {
  margin-top: 4px;
  font-size: var(--t16);
  color: var(--papel-suave);
}
.cartao-reservado .quadro {
  border: 1px dashed rgba(244, 242, 237, 0.3);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marca-corte {
  position: absolute;
  left: 50%; top: 50%;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
}
.marca-corte::before, .marca-corte::after {
  content: ""; position: absolute; background: rgba(244, 242, 237, 0.3);
}
.marca-corte::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.marca-corte::after { top: 50%; left: 0; right: 0; height: 1px; }
.tc-vazio {
  position: absolute;
  bottom: var(--e2);
  font-family: var(--f-rotulo);
  font-size: 12px;
  color: var(--papel-suave);
}
.ancora-cartao { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }

/* =========================================================
   5. QUEM FAZ — o bastidor
   ========================================================= */
.cena-bastidor {
  padding: var(--e6) var(--margem) var(--e6);
  overflow: hidden;
}
.bastidor-grade {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--e3);
  align-items: end;
}
.retrato {
  position: relative;
  grid-column: 1 / span 5;
  grid-row: 1 / span 2;
  align-self: start;
  margin: 0;
  padding: 12px;
  background: var(--grafite);
}
.retrato img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.retrato .canto { width: 22px; height: 22px; opacity: 0.7; }
.retrato .canto-se { left: -14px; top: -14px; }
.retrato .canto-sd { right: -14px; top: -14px; }
.retrato .canto-ie { left: -14px; bottom: -14px; }
.retrato .canto-id { right: -14px; bottom: -14px; }
.fita {
  position: absolute;
  top: -14px;
  width: 92px; height: 28px;
  background: var(--papel-2);
  opacity: 0.92;
  box-shadow: 0 1px 0 rgba(14, 16, 20, 0.08);
}
.fita-e { left: -18px; transform: rotate(-28deg); }
.fita-d { right: -18px; transform: rotate(24deg); }

.nome-gigante {
  position: relative;
  z-index: 2;
  grid-column: 6 / -1;
  grid-row: 2;
  padding-left: var(--e3);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(80px, 15vw, 250px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  margin-bottom: -0.04em;
  user-select: none;
}
.ponto-nome {
  width: 0.15em; height: 0.15em;
  margin-left: 0.03em;
}
.bastidor-texto {
  grid-column: 7 / -1;
  grid-row: 1;
  align-self: start;
  padding-top: var(--e4);
  padding-bottom: var(--e5);
}
.bastidor-texto .titulo-secao { font-size: var(--t56); margin-bottom: var(--e4); }
.bastidor-texto p { max-width: 44ch; color: inherit; }
.bastidor-texto p + p { margin-top: var(--e2); }

.contato-bastidor {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: var(--e5) 0 0 auto;
  max-width: 880px;
  padding: 26px 10px;
  background:
    repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.22) 0 10px, transparent 10px 22px) 0 7px / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.22) 0 10px, transparent 10px 22px) 0 calc(100% - 7px) / 100% 8px no-repeat,
    var(--grafite);
  transform: rotate(-1.2deg);
}
.contato-bastidor li { aspect-ratio: 4 / 5; overflow: hidden; background: var(--grafite-2); }
.contato-bastidor img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   6. FECHAMENTO — render 100%, o Ponto vira o botão
   ========================================================= */
.cena-render {
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--e6) var(--margem) var(--e4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.render {
  width: min(560px, 100%);
  font-family: var(--f-rotulo);
  font-size: var(--t13);
  letter-spacing: 0.08em;
  margin-bottom: var(--e5);
}
.render-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--e1);
  font-variant-numeric: tabular-nums;
}
.render-barra {
  height: 8px;
  border: 1px solid currentColor;
  padding: 1px;
}
.render-fill {
  display: block;
  height: 100%;
  background: var(--vermelhao);
  transform-origin: left center;
  transform: scaleX(var(--render, 1));
}
.titulo-fecho {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: var(--t88);
  line-height: 0.95;
  letter-spacing: -0.035em;
  max-width: 12ch;
}
.apoio-fecho {
  margin-top: var(--e3);
  max-width: 40ch;
}
.botao-whats {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e5);
  padding: 20px 34px 20px 22px;
  border-radius: 999px;
  border: 2px solid var(--vermelhao);
  color: var(--grafite);
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t24);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease 0.1s;
}
.botao-preenche {
  position: absolute;
  left: 33px; top: 50%;
  width: 900px; height: 900px;
  margin: -450px 0 0 -450px;
  border-radius: 50%;
  background: var(--vermelhao);
  z-index: -1;
  transform: scale(1);
  transition: transform 0.7s var(--curva), background-color 0.2s ease;
}
.ponto-botao { width: 22px; height: 22px; flex: none; }
.botao-whats.aguardando { color: inherit; border-color: currentColor; }
.botao-whats.aguardando .botao-preenche { transform: scale(0); }
.botao-whats:hover .botao-preenche { background: #FF6F3A; }
.botao-whats:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.botao-whats.aguardando:focus-visible { outline-color: var(--vermelhao); }

.rodape {
  width: 100%;
  margin-top: auto;
  padding-top: var(--e6);
  display: flex;
  justify-content: space-between;
  gap: var(--e2);
  font-family: var(--f-rotulo);
  font-size: var(--t13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rodape-fim { font-variant-numeric: tabular-nums; }
.credito { text-transform: none; letter-spacing: 0.02em; opacity: 0.8; }

/* =========================================================
   Animações de entrada e saída ligadas à rolagem
   --a (0 a 1: entrando) e --b (0 a 1: saindo) vêm do pagina.js.
   Sem script ou com movimento reduzido: --a = 1, --b = 0 (tudo visível).
   ========================================================= */
[data-anim] .w { display: inline-block; }
[data-anim] .w.l { display: block; }
[data-anim] .u {
  display: inline-block;
  --in: clamp(0, var(--a, 1) * 1.6 - var(--k, 0) * 0.6, 1);
  --out: clamp(0, var(--b, 0) * 1.6 - var(--k, 0) * 0.6, 1);
}
[data-anim] .l > .u { display: block; }
/* máscara subindo */
[data-anim$="mascara"] .w { overflow: clip; padding: 0.12em 0.03em 0.18em; margin: -0.12em -0.03em -0.18em; }
[data-anim$="mascara"] .u { translate: 0 calc((1 - var(--in)) * 112% - var(--out) * 112%); }
/* deslize lateral */
[data-anim$="deslize"] .u {
  translate: calc((1 - var(--in)) * -0.9em + var(--out) * 0.9em) 0;
  opacity: calc(var(--in) - var(--out));
}
/* desfoque de lente */
[data-anim$="foco"] .u {
  filter: blur(calc((1 - var(--in) + var(--out)) * 10px));
  opacity: calc(var(--in) - var(--out));
  scale: calc(1 + (1 - var(--in) + var(--out)) * 0.08);
}
/* corte seco: cada unidade entra e sai de uma vez */
[data-anim$="corte"] .u { opacity: round(nearest, calc(var(--in) - var(--out)), 1); }
[data-anim="bloco-corte"] {
  opacity: round(nearest, calc(var(--a, 1) - var(--b, 0)), 1);
  clip-path: inset(0 max(0%, calc(100% - round(down, var(--a, 1) * 3, 1) * 33.34%)) 0 0);
}
/* embaralhar: o caractere vira timecode e resolve na letra */
[data-anim$="embaralhar"] .u { position: relative; }
[data-anim$="embaralhar"] .u[data-s] { -webkit-text-fill-color: transparent; }
[data-anim$="embaralhar"] .u[data-s]::after {
  content: attr(data-s);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-rotulo);
  font-weight: 500;
  font-size: 0.62em;
  -webkit-text-fill-color: currentColor;
}

/* =========================================================
   Fio condutor: linha do tempo fixa embaixo da tela
   ========================================================= */
:root { --fio-h: 46px; }
body { padding-bottom: var(--fio-h); }
.fx-palco { height: calc(100vh - var(--fio-h)); height: calc(100dvh - var(--fio-h)); }

.fio {
  --fio-fundo: var(--grafite-2);
  --fio-tinta: var(--papel);
  --fio-linha: var(--grafite-3);
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--fio-h);
  z-index: 55;
  display: flex;
  align-items: stretch;
  background: var(--fio-fundo);
  color: var(--fio-tinta);
  border-top: 1px solid var(--fio-linha);
  font-family: var(--f-rotulo);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.fio[data-tema="claro"] { --fio-fundo: var(--papel-2); --fio-tinta: var(--grafite); --fio-linha: rgba(14, 16, 20, 0.22); }
.fio[data-tema="vermelhao"] { --fio-fundo: var(--vermelhao); --fio-tinta: var(--grafite); --fio-linha: var(--grafite); }
.fio-info {
  flex: none;
  width: 236px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  border-right: 1px solid var(--fio-linha);
  white-space: nowrap;
  overflow: hidden;
}
.fio-tc { font-variant-numeric: tabular-nums; }
.fio-pista { position: relative; flex: 1; padding: 7px 8px; }
.fio-clipes { display: flex; gap: 3px; height: 100%; }
.fio-clipes li { flex: 1 1 0; min-width: 0; }
.fio-clipes a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 8px;
  border: 1px solid var(--fio-linha);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.fio-clipes a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fio-clipes a.atual { background: var(--fio-tinta); color: var(--fio-fundo); border-color: var(--fio-tinta); }
.fio-clipes a:focus-visible { outline: 2px solid var(--fio-tinta); outline-offset: 2px; }
.fio-rot { overflow: hidden; text-overflow: ellipsis; }
.fio-agulha {
  position: absolute;
  left: 8px; top: -6px; bottom: 0;
  width: 2px;
  background: var(--fio-tinta);
  pointer-events: none;
  will-change: transform;
}
.fio-cabeca {
  position: absolute;
  left: -6px; top: -7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--vermelhao);
  box-shadow: 0 0 0 2px var(--grafite);
}
.ponto-vivo .fio-cabeca { background: var(--fio-fundo); box-shadow: 0 0 0 2px var(--fio-tinta); }

/* rolagem suave (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* =========================================================
   Celular
   ========================================================= */
@media (max-width: 760px) {
  :root { --fio-h: 42px; }
  .hud-base-dir { display: none; }

  .objeto { width: 90vw; }
  .camera-obj { width: 26vw; margin-left: -13vw; margin-top: -9.6vw; }
  .heroi-vivo .capsula { top: 9%; }
  .heroi-vivo .passo-1 { top: 64%; left: var(--margem); right: var(--margem); height: auto; }
  .heroi-vivo .metade { position: static; transform: none; display: inline-block; }
  .titulo-abertura { font-size: 54px; }
  .passo-2 { font-size: 44px; }
  .heroi-vivo .passo-2 { top: 58%; left: var(--margem); right: var(--margem); width: auto; transform: none; }
  .heroi-vivo .passo-3 { top: 57%; left: var(--margem); right: var(--margem); transform: none; }
  .apoio-abertura { font-size: 22px; }
  .servicos { margin-top: var(--e3); }
  .servicos li { font-size: 32px; }

  .lista-itens li { font-size: 56px; }
  .pauta::after { left: 14px; }

  .timeline { --nome: 32px; }
  .regua span:nth-child(2), .regua span:nth-child(3) { display: none; }
  .clipe { padding: 5px 4px; font-size: 11px; }
  .etapas { grid-template-columns: 1fr; gap: var(--e3); padding-left: 0; }
  .edicao-fecho { text-align: left; }

  .trilho-filme { --h: min(48vh, 440px); }
  .cartao-horizontal { width: 82vw; }
  .play { left: 10px; bottom: 10px; width: 52px; height: 52px; }
  .claquete-campos { grid-template-columns: repeat(2, auto); }
  .claquete-campos div { margin-right: var(--e3); padding-right: var(--e2); }

  .bastidor-grade { grid-template-columns: repeat(6, 1fr); }
  .retrato { grid-column: 1 / span 5; grid-row: 2; padding: 8px; }
  .bastidor-texto { grid-column: 1 / -1; grid-row: 1; padding-top: 0; padding-bottom: var(--e5); }
  .nome-gigante { grid-column: 1 / -1; grid-row: 3; padding-left: 0; margin-top: var(--e3); font-size: 22vw; }
  .contato-bastidor { grid-template-columns: repeat(3, 1fr); }

  .botao-whats { padding: 18px 26px 18px 18px; }
  .rodape { flex-direction: column; align-items: center; }

  .fio-info { width: 108px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 0 10px; font-size: 10px; }
  .fio-nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .fio-rot { display: none; }
  .fio-clipes a { justify-content: center; padding: 0 2px; font-size: 11px; }
}

/* =========================================================
   Movimento reduzido: tudo legível, parado, na ordem
   ========================================================= */
.fx-reduzido .grao { inset: 0; }
.fx-reduzido .grao,
.fx-reduzido .rec-luz,
.fx-reduzido .med i,
.fx-reduzido .tela-tc i { animation: none; }
.fx-reduzido .trava-foco { display: none; }
.fx-reduzido .cena-lista .fx-palco,
.fx-reduzido .cena-trabalhos .fx-palco { padding-top: var(--e6); padding-bottom: var(--e6); }
.fx-reduzido .abertura-palco { position: relative; padding-bottom: var(--e5); }
.fx-reduzido .claquete { position: relative; transform: none; min-height: 80vh; margin: 0 var(--margem); }
.fx-reduzido .folha { position: relative; margin-top: var(--e5); }
.fx-reduzido .trilho-filme { width: auto; transform: none; }
.fx-reduzido .cartoes { flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .grao, .rec-luz, .med i, .tela-tc i, .ponto-viajante span, .trava-foco { animation: none; }
  .botao-preenche, .clipe, .fio, .fio-clipes a { transition: none; }
}

/* =========================================================
   Rodada 3 (sobrepõe o que vem antes)
   ========================================================= */

/* ---- abertura: abre em Vermelhão, título largo atrás do notebook ---- */
.passo-1 .ponto { background: var(--grafite); }
.trava-foco i { border-color: currentColor; }
.ponto-viajante.escuro span { background: var(--grafite); }
.objeto { width: min(62vw, 960px); }
.heroi-vivo .abertura-textos { z-index: auto; }
.heroi-vivo .capsula { top: 6%; z-index: 4; }
.heroi-vivo .passo-1 {
  left: 0; right: 0;
  top: 10.5%;
  height: auto;
  z-index: 1;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(64px, 14.6vw, 250px);
  line-height: 0.9;
  letter-spacing: -0.045em;
}
.heroi-vivo .metade { position: static; transform: none; display: inline-block; }
.heroi-vivo .passo-2, .heroi-vivo .passo-3 { z-index: 4; }
.heroi-vivo .objeto-ancora { z-index: 2; animation: objeto-entra 1.3s var(--curva) 0.15s both; }
@keyframes objeto-entra { from { transform: translateY(26vh) scale(0.86); opacity: 0; } }
.heroi-vivo .camera-obj img { animation: some-entra 0.9s ease 0.5s both; }
@keyframes some-entra { from { opacity: 0; } }

/* tela da frente: três vídeos verticais lado a lado */
.tela-tres { display: flex; gap: 6px; background: #08090B; }
.tela-tres .rolo { flex: 1 1 0; min-width: 0; width: auto; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* ---- cena 2: objetos de cada tarefa ---- */
.objetos-lista {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 0;
}
.obj3d {
  position: absolute;
  left: 0; top: 0;
  max-width: none;
  height: auto;
  opacity: 0;
  will-change: transform, opacity;
}
.lista-folha { z-index: 1; }
.fx-reduzido .objetos-lista { display: none; }

/* ---- botões de WhatsApp repetidos ---- */
.botao-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px 14px 16px;
  border-radius: 999px;
  background: var(--vermelhao);
  color: var(--grafite);
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}
.botao-cta::before {
  content: "";
  flex: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--grafite);
}
.botao-cta:hover { background: #FF6F3A; }
.botao-cta:focus-visible { outline: 3px solid var(--papel); outline-offset: 4px; }
.cta-linha { position: relative; margin-top: var(--e4); }
.cta-direita { text-align: right; }
.cartao-cta { width: max(calc(var(--h) * 9 / 16), 300px); }
.cta-quadro {
  height: var(--h);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(244, 242, 237, 0.3);
}
.botao-cta-grande { font-size: var(--t24); padding: 18px 28px 18px 20px; }

/* ---- pico: o cartão do centro cresce, os outros recuam ---- */
.cartao .quadro { transition: transform 0.45s var(--curva), opacity 0.45s ease; }
.ponto-vivo .cartao:not(.ativo):not(.cartao-cta):not(.cartao-reservado) .quadro { transform: scale(0.93); opacity: 0.6; }
.ponto-vivo .cartao.ativo .quadro { transform: scale(1.03); }

/* ---- quem faz: retrato inteiro, sem paralaxe ---- */
.retrato { grid-column: 1 / span 4; }
.retrato img { aspect-ratio: 4 / 5; object-position: 50% 35%; }
.nome-gigante { grid-column: 5 / -1; }
.cena-bastidor { padding-bottom: var(--e5); }
.contato-bastidor { margin-top: var(--e4); }

/* ---- fechamento: o notebook volta com o render na tela ---- */
.cena-render { padding-top: var(--e5); overflow: clip; }
.mac-fim { position: relative; z-index: 1; width: min(42vw, 560px); margin-bottom: var(--e4); }
.vista-fim { position: relative; }
.vista-fim > img { width: 100%; height: auto; }
.tela-render {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 56px;
  color: var(--papel);
}
.tela-render .render { width: 100%; margin: 0; font-size: 26px; text-align: left; }
.tela-render .render-info { margin-bottom: 16px; }
.tela-render .render-barra { height: 26px; border-width: 2px; padding: 3px; }
.render-quadros { display: flex; gap: 10px; margin-top: 28px; }
.render-quadros i { flex: 1; height: 120px; background: var(--papel); opacity: 0.12; }
.render-quadros i:nth-child(1) { opacity: clamp(0.12, var(--render, 1) * 6 - 0, 0.85); }
.render-quadros i:nth-child(2) { opacity: clamp(0.12, var(--render, 1) * 6 - 1, 0.85); }
.render-quadros i:nth-child(3) { opacity: clamp(0.12, var(--render, 1) * 6 - 2, 0.85); }
.render-quadros i:nth-child(4) { opacity: clamp(0.12, var(--render, 1) * 6 - 3, 0.85); }
.render-quadros i:nth-child(5) { opacity: clamp(0.12, var(--render, 1) * 6 - 4, 0.85); }
.render-quadros i:nth-child(6) { opacity: clamp(0.12, var(--render, 1) * 6 - 5, 0.85); }
.cena-render .titulo-fecho, .cena-render .apoio-fecho, .cena-render .botao-whats { position: relative; z-index: 1; }
.obj-fim { position: absolute; z-index: 0; width: min(15vw, 220px); height: auto; pointer-events: none; }
.obj-fim-e { left: 6vw; top: 38%; }
.obj-fim-d { right: 6vw; top: 18%; filter: blur(2px); }

/* ---- fio: nomes inteiros e botão fixo à direita ---- */
.fio-info { width: 220px; }
.fio-clipes li { flex: 1 1 auto; }
.fio-whats {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 8px 6px 0;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  background: var(--vermelhao);
  color: var(--grafite);
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}
.fio-whats::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--grafite); }
.fio[data-tema="vermelhao"] .fio-whats { background: var(--grafite); color: var(--papel); }
.fio[data-tema="vermelhao"] .fio-whats::before { background: var(--papel); }
.fio-whats:focus-visible { outline: 2px solid var(--fio-tinta); outline-offset: 2px; }
.fio-whats-curto { display: none; }

@media (max-width: 760px) {
  .objeto { width: 96vw; }
  .heroi-vivo .capsula { top: 6%; }
  .heroi-vivo .passo-1 { top: 11%; white-space: normal; font-size: 24vw; line-height: 0.86; }
  .heroi-vivo .metade { display: block; }
  .cta-direita { text-align: left; }
  .retrato { grid-column: 1 / -1; max-width: 80vw; }
  .nome-gigante { grid-column: 1 / -1; }
  .mac-fim { width: 78vw; }
  .obj-fim { width: 24vw; opacity: 0.9; }
  .obj-fim-e { left: -4vw; top: 46%; }
  .obj-fim-d { right: -4vw; top: 8%; }
  .fio-info { width: 92px; }
  .fio-whats { margin: 6px 6px 6px 0; padding: 0 10px; font-size: 12px; gap: 6px; }
  .fio-whats::before { width: 8px; height: 8px; }
  .fio-whats-longo { display: none; }
  .fio-whats-curto { display: inline; }
  .botao-cta-grande { font-size: 20px; }
}

/* cenas 5 e 6 com fundo próprio (antes dependiam do fundo da página e escureciam a foto na saída) */
.cena-bastidor { background: var(--papel); color: var(--grafite); }
.cena-render { background: var(--grafite); color: var(--papel); }
.heroi-vivo .capsula { white-space: nowrap; }
@media (max-width: 760px) {
  .heroi-vivo .passo-1 { top: 13%; }
  .obj-fim-e { display: none; }
  .obj-fim-d { top: 2%; }
}

/* =========================================================
   Rodada 4
   ========================================================= */
/* tela da frente: três quadros parados, nítidos */
.tela-tres img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; object-position: 50% 35%; }

/* embaralhar só na entrada; na saída, máscara subindo */
[data-anim$="embaralhar"] .w { overflow: clip; padding: 0.12em 0.03em 0.18em; margin: -0.12em -0.03em -0.18em; }
[data-anim$="embaralhar"] .u { translate: 0 calc(var(--out) * -112%); }

/* estouro da claquete */
.estouro-claquete { position: absolute; left: 50%; top: 46%; width: 0; height: 0; z-index: 4; pointer-events: none; }
.estouro-claquete > * { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.estouro-claquete > img { width: min(11vw, 160px); height: auto; margin: -5vw 0 0 -5.5vw; }
.voo-quadro { width: 84px; height: 150px; margin: -75px 0 0 -42px; border: 3px solid var(--grafite); background: var(--grafite); }
.voo-quadro img { width: 100%; height: 100%; object-fit: cover; }
.voo-ponto { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--grafite); }
.fx-reduzido .estouro-claquete { display: none; }

/* vídeos dos cartões */
.quadro[role="button"] { cursor: pointer; }
.quadro[role="button"]:focus-visible { outline: 3px solid var(--papel); outline-offset: 4px; }
.quadro video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.cartao.tocando .play { display: none; }
.ponto-vivo.video-tocando .ponto-viajante { opacity: 0; }

/* botões de chamada */
.botao-cta { min-height: 44px; }
.botao-cta-discreto {
  background: transparent;
  color: inherit;
  border: 2px solid currentColor;
  font-size: 16px;
  padding: 10px 20px 10px 14px;
}
.botao-cta-discreto::before { background: var(--vermelhao); box-shadow: 0 0 0 1.5px var(--grafite); }
.botao-cta-discreto:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.cta-discreta { margin-top: var(--e3); }
.cartao-cta { flex: none; align-self: center; display: flex; align-items: center; padding: 0 2vw; }

/* botão fixo do fio: troca de texto com transição curta */
.fio-whats span { transition: opacity 0.15s ease, transform 0.15s ease; }
.fio-whats.trocando span { opacity: 0; transform: translateY(6px); }

@media (max-width: 760px) {
  :root { --fio-h: 52px; }
  .fio-info { display: none; }
  .fio-pista { flex: none; padding: 4px; }
  .fio-clipes li { flex: 0 0 44px; }
  .fio-clipes a { padding: 0; }
  .fio-whats {
    flex: 1 1 auto;
    min-width: 0;
    margin: 4px 6px 4px 2px;
    padding: 0 10px;
    border-radius: 12px;
    white-space: normal;
    line-height: 1.15;
    font-size: 12px;
  }
  .estouro-claquete > img { width: 22vw; margin: -10vw 0 0 -11vw; }
  .voo-quadro { width: 56px; height: 100px; margin: -50px 0 0 -28px; }
  .botao-cta-grande { font-size: 18px; white-space: normal; text-align: left; }
  .cartao-cta { max-width: 78vw; }
}
@media (prefers-reduced-motion: reduce) {
  .fio-whats span { transition: none; }
}

/* texto novo do COPY v3 */
.capsula {
  font-family: var(--f-texto);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 7px 16px;
  border-width: 1.5px;
}
.apresentacao { font-family: var(--f-titulo); font-weight: 700; font-size: var(--t24); line-height: 1.2; margin-bottom: var(--e2); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--e3); }
.etiquetas li {
  padding: 7px 14px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  opacity: calc(var(--in) - var(--out));
  translate: 0 calc((1 - var(--in)) * 14px);
}
.etiquetas li:nth-child(odd) { background: var(--grafite); color: var(--papel); border-color: var(--grafite); }
.apoio-fecho { max-width: 46ch; }
@media (max-width: 760px) {
  .cartao-linha { font-size: 15px; }
  .capsula { font-size: 13px; padding: 6px 12px; }
}

/* =========================================================
   Rodada 5
   ========================================================= */
/* sombra de contato: fora do objeto 3D (sempre atrás), difusa, segue posição e escala */
.objeto-ancora { --obj-w: min(62vw, 960px); }
.objeto { width: var(--obj-w); }
.sombra-contato { display: none; }
.sombra-mac {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--obj-w) * 0.86);
  height: calc(var(--obj-w) * 0.1);
  margin: calc(var(--obj-w) * -0.05) 0 0 calc(var(--obj-w) * -0.43);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14, 16, 20, 0.6), rgba(14, 16, 20, 0.28) 55%, rgba(14, 16, 20, 0));
  filter: blur(12px);
  opacity: 0.8;
  pointer-events: none;
  will-change: transform;
  transition: opacity 0.4s ease;
}
.abertura-palco[data-passo="2"] .sombra-mac { opacity: 0.6; }
.abertura-palco[data-passo="3"] .sombra-mac { opacity: 0.22; }
.fx-reduzido .sombra-mac { top: auto; bottom: -3%; margin-top: 0; }
.camera-obj::after {
  content: "";
  position: absolute;
  left: 14%; right: 14%;
  bottom: -9%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14, 16, 20, 0.55), rgba(14, 16, 20, 0));
  filter: blur(6px);
  z-index: -1;
}
.abertura-palco[data-passo="3"] .camera-obj::after { opacity: 0.35; }
.mac-fim::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  bottom: -5%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  filter: blur(10px);
  opacity: 0.45;
  z-index: -1;
}

/* cena 3: uma etapa por vez */
.cena-edicao { padding: 0; overflow: visible; }
.edicao-palco { display: block; padding: 4vh var(--margem) 0; overflow: hidden; }
.edicao-conteudo { position: relative; max-width: 1240px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; }
.edicao-topo .titulo-secao { font-size: var(--t56); }
.edicao-topo .rotulo { margin-bottom: var(--e2); }
.cena-edicao .timeline { margin-top: var(--e3); }
.cena-edicao .etapas { display: block; flex: 1; margin-top: var(--e4); padding-left: 0; color: var(--papel); }
.etapa { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e5); align-items: center; max-width: none !important; }
.etapa + .etapa { margin-top: var(--e5); }
.etapa strong {
  grid-column: 1;
  display: block;
  margin-bottom: var(--e2);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(42px, 6.2vw, 100px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--papel);
}
.etapa-apoio { grid-column: 1; display: block; font-size: clamp(19px, 2vw, 30px); line-height: 1.3; color: var(--papel-suave); max-width: 30ch; }
.etapa-obj { grid-column: 2; grid-row: 1 / span 2; width: min(22vw, 300px); height: auto; }
.etapa-final { display: block; }
.etapa-final .edicao-fecho { margin: 0; text-align: left; font-size: clamp(42px, 6.2vw, 100px); }
.ponto-vivo .cena-edicao .etapas { display: grid; align-items: center; }
.ponto-vivo .etapa { grid-area: 1 / 1; margin: 0; opacity: 0; translate: 0 40px; pointer-events: none; transition: opacity 0.4s ease, translate 0.6s var(--curva); }
.ponto-vivo .etapa.atual { opacity: 1; translate: 0 0; pointer-events: auto; }
.ponto-vivo .etapa.feita { translate: 0 -40px; }
.fx-reduzido .edicao-palco { padding: var(--e6) var(--margem); }

/* selo flutuante dos trabalhos */
.selo {
  position: fixed;
  right: 20px;
  bottom: calc(var(--fio-h) + 12px);
  width: 112px; height: 112px;
  z-index: 56;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grafite);
  color: var(--papel);
  border: 1.5px solid rgba(244, 242, 237, 0.35);
  text-decoration: none;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.45s var(--curva);
}
.selo.visivel { opacity: 1; transform: none; pointer-events: auto; }
.selo:hover .selo-centro { transform: scale(1.08); }
.selo:focus-visible { outline: 3px solid var(--papel); outline-offset: 4px; }
.selo-anel { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); animation: gira 20s linear infinite; }
.selo-anel text { font-family: var(--f-rotulo); font-size: 13px; font-weight: 500; fill: currentColor; }
.selo-centro {
  width: 50%; height: 50%;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--vermelhao);
  color: var(--papel);
  transition: transform 0.25s ease;
}
.selo-centro svg { width: 58%; height: 58%; }
@keyframes gira { to { transform: rotate(360deg); } }
.fx-reduzido .selo-anel { animation: none; }
.trilho-filme { --h: min(58vh, 600px); }
.folha { align-items: flex-start; padding-top: 3vh; }

/* render: as capas entram uma a uma; a sexta é "O SEU" */
.tela-render .render-quadros { display: flex; gap: 10px; height: 136px; margin-top: 26px; }
.tela-render .render-quadros i { position: relative; flex: none; height: 100%; aspect-ratio: 9 / 16; opacity: 1; background: rgba(244, 242, 237, 0.06); border: 2px solid rgba(244, 242, 237, 0.25); overflow: hidden; }
.tela-render .render-quadros i.rq-largo { aspect-ratio: 16 / 9; }
.tela-render .render-quadros img { width: 100%; height: 100%; object-fit: cover; }
.tela-render .render-quadros i:nth-child(1) img { opacity: clamp(0, var(--render, 1) * 6 - 0, 1); }
.tela-render .render-quadros i:nth-child(2) img { opacity: clamp(0, var(--render, 1) * 6 - 1, 1); }
.tela-render .render-quadros i:nth-child(3) img { opacity: clamp(0, var(--render, 1) * 6 - 2, 1); }
.tela-render .render-quadros i:nth-child(4) img { opacity: clamp(0, var(--render, 1) * 6 - 3, 1); }
.tela-render .render-quadros i:nth-child(5) img { opacity: clamp(0, var(--render, 1) * 6 - 4, 1); }
.rq-seu { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.rq-seu b, .rq-seu span { opacity: clamp(0, var(--render, 1) * 20 - 19, 1); }
.rq-seu b { width: 28px; height: 28px; border-radius: 50%; background: var(--vermelhao); }
.rq-seu span { font-family: var(--f-rotulo); font-size: 18px; font-style: normal; letter-spacing: 0.08em; color: var(--papel); }

/* cena 5: rótulo sob o nome e legenda das etiquetas */
.rotulo-nome { grid-column: 5 / -1; grid-row: 3; padding-left: var(--e3); margin-top: var(--e2); font-family: var(--f-titulo); font-weight: 700; font-size: var(--t24); }
.legenda-etiquetas { margin-top: var(--e3); font-size: 15px; font-weight: 500; color: var(--grafite-suave); }
.legenda-etiquetas + .etiquetas { margin-top: var(--e1); }

@media (max-width: 760px) {
  .objeto-ancora { --obj-w: 96vw; }
  .etapa { grid-template-columns: 1fr; }
  .etapa-obj { grid-column: 1; grid-row: 1; justify-self: end; width: 32vw; margin-bottom: var(--e2); }
  .etapa strong { font-size: 42px; }
  .etapa-apoio { font-size: 20px; }
  .etapa-final .edicao-fecho { font-size: 42px; }
  .edicao-palco { padding-top: 3vh; }
  .trilho-filme { --h: min(48vh, 440px); }
  .selo { width: 96px; height: 96px; right: 12px; }
  .selo-anel text { font-size: 13.5px; }
  .rotulo-nome { grid-column: 1 / -1; grid-row: 4; padding-left: 0; }
  .mac-fim { width: 84vw; }
  /* botão fixo: uma linha, legível */
  .fio-pista { flex: 1 1 auto; min-width: 0; }
  .fio-clipes li { flex: 1 1 0; min-width: 0; }
  .fio-whats { flex: none; white-space: nowrap; font-size: 13px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .selo-anel { animation: none; }
}
.ponto-vivo .cena-edicao .etapas { grid-template-columns: minmax(0, 1fr); }
.etapa { width: 100%; }
.etapa strong { white-space: nowrap; }
.etapa-final .edicao-fecho { max-width: 16ch; }
@media (max-width: 760px) { .etapa strong { white-space: normal; } }
/* retrato: recorte justo no rosto e filete Papel para não ler como bloco preto */
.retrato img { aspect-ratio: 6 / 7; object-position: 50% 40%; outline: 2px solid rgba(244, 242, 237, 0.85); outline-offset: -8px; }
.retrato img { height: auto; }

/* ---- rodada 6: refino do celular ---- */
.retrato img { object-position: 50% 30%; }
@media (max-width: 760px) {
  /* abertura, passo 3: os serviços acendem um a um com a rolagem */
  .abertura-palco .servicos li { opacity: clamp(0.28, calc(var(--serv, 1) * 3 + 1 - var(--i, 0)), 1); }
  .abertura-palco .servicos li:nth-child(2) { --i: 1; }
  .abertura-palco .servicos li:nth-child(3) { --i: 2; }

  /* cena 5: título, foto, nome e só depois o texto e o botão */
  .bastidor-grade { display: flex; flex-direction: column; align-items: stretch; }
  .bastidor-texto { display: contents; }
  .bastidor-texto .titulo-secao { order: 1; margin-bottom: var(--e4); }
  .retrato { order: 2; align-self: center; width: calc(100% - 28px); max-width: none; }
  .nome-gigante { order: 3; margin-top: var(--e3); }
  .rotulo-nome { order: 4; margin-bottom: var(--e4); }
  .bastidor-texto > :not(.titulo-secao) { order: 5; }

  /* tira de bastidores: duas fotos grandes e três menores, sem casa vazia */
  .contato-bastidor { grid-template-columns: repeat(6, 1fr); }
  .contato-bastidor li { grid-column: span 2; }
  .contato-bastidor li:nth-child(-n+2) { grid-column: span 3; }
}