/* ============================================
   LF Creative — LP de Produção Audiovisual
   Só o que é novo em relação à LP geral (../css/style.css):
   o filme em sete cenas, o painel flutuante de cada cena e o fechamento.
   A imagem ocupa a tela inteira e o texto fica num painel de vidro
   que flutua sobre ela, no canto, sem cobrir quem está em cena.
   ============================================ */

:root {
  --cor-rec: #E5484D;       /* ponto de gravação */
  --cor-palco: #16181A;     /* fundo de cena sem imagem */
}

/* ---------- Cenas empilhadas: padrão sem JS e com "reduzir movimento" ---------- */
.cena { border-bottom: 1px solid var(--cor-linha); }
.cena-midia { overflow: hidden; background: var(--cor-linha); }
.cena-midia img,
.cena-midia video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--foco, 50%) 50%; }
.cena-texto { padding: var(--e-3) var(--margem) var(--e-4); }
.cena-painel { display: grid; gap: var(--e-2); }
.cena-titulo .rotulo { margin-bottom: var(--e-1); }
.cena h1, .cena h2 { font-size: clamp(1.75rem, 1rem + 3.4vw, 3.5rem); line-height: 1; }
.cena-abertura .cena-titulo { margin-bottom: var(--e-2); }
.cena-apoio { max-width: 34rem; }
.cena-painel .btn { justify-self: start; }
.cena-numero { display: none; }
.passos { display: none; }

/* ---------- Palco fixo: ligado pelo JS (classe .com-rolagem no <html>) ---------- */
.com-rolagem .filme { height: calc(var(--cenas, 5) * 100vh); }
.com-rolagem .palco {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden; background: var(--cor-preto);
}
.com-rolagem .cena {
  position: absolute; inset: 0; border-bottom: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 700ms var(--curva), transform 900ms var(--curva);
}
.com-rolagem .cena.ativa { opacity: 1; pointer-events: auto; z-index: 2; }
.com-rolagem .cena-midia { position: absolute; inset: 0; filter: blur(12px) brightness(.8); transition: filter 900ms ease 150ms; }
.com-rolagem .cena.ativa .cena-midia { filter: none; }
.com-rolagem .cena-midia img,
.com-rolagem .cena-midia video { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; transform: scale(1.045); transition: transform 7s ease-out; }
.com-rolagem .cena.ativa .cena-midia img,
.com-rolagem .cena.ativa .cena-midia video { transform: none; }
/* vídeo da cena: aparece em fade por cima da imagem, quando começa a tocar */
.com-rolagem .cena-midia video.cena-video { opacity: 0; transition: opacity 900ms ease, transform 7s ease-out; }
.com-rolagem .cena-midia video.cena-video.tocando { opacity: 1; }

/* Cena com vários quadros (produção): a passagem de um quadro para o outro é um giro de câmera,
   igual ao das cenas. O quadro que sai acelera para a esquerda; o que entra chega pela direita,
   passa um pouco do ponto e assenta. O vídeo de um quadro acompanha a imagem dele. */
.com-rolagem .cena .cena-midia :is(img.quadro, video.quadro-video),
.com-rolagem .cena.ativa .cena-midia :is(img.quadro, video.quadro-video) { opacity: 1; transform: translateX(104%); transition: none; }
.com-rolagem .cena .cena-midia :is(img.quadro, video.quadro-video).on { transform: none; }
.com-rolagem .cena.ativa .cena-midia :is(img.quadro, video.quadro-video).on { animation: entra-quadro 980ms cubic-bezier(.3, .75, .2, 1) both; }
.com-rolagem .cena.ativa .cena-midia :is(img.quadro, video.quadro-video).on.primeiro { animation: none; }
.com-rolagem .cena.ativa .cena-midia :is(img.quadro, video.quadro-video).saiu { animation: sai-quadro 560ms cubic-bezier(.7, 0, .84, 0) both; }
@keyframes entra-quadro {
  0%   { transform: translate3d(104%, 0, 0) scale(1.08) rotate(.4deg); }
  46%  { transform: translate3d(-1.1%, .3%, 0) scale(1.045) rotate(-.14deg); }
  74%  { transform: translate3d(.35%, -.12%, 0) scale(1.02) rotate(.05deg); }
  100% { transform: none; }
}
@keyframes sai-quadro {
  0%   { transform: none; }
  100% { transform: translate3d(-106%, 0, 0) scale(1.08) rotate(-.4deg); }
}

/* Palavras que entram junto com os quadros da produção. Sem JS, aparecem todas. */
.cena-palavras { display: flex; flex-wrap: wrap; gap: 8px; }
.cena-palavras li { padding: 6px 12px; border: 1px solid currentColor; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
.com-rolagem .cena-palavras { min-height: 76px; align-content: flex-start; }
.com-rolagem .cena-palavras li { display: none; border-color: var(--vidro-borda); }
.com-rolagem .cena-palavras li.on { display: block; }
.com-rolagem .cena-palavras li.nova { border-color: var(--cor-ciano); animation: palavra-entra 400ms var(--curva) both; }   /* só opacidade e deslocamento */
@keyframes palavra-entra { from { opacity: 0; transform: translateY(8px); } }

/* Cena ainda sem imagem: aviso só de prévia, sai quando a imagem for gerada */
.cena-pendente { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--cor-palco); color: rgba(244, 244, 242, .6); font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; }
.com-rolagem .cena-pendente { position: absolute; inset: 0; aspect-ratio: auto; }

/* Camada do texto: cobre a cena e posiciona o painel no canto */
.com-rolagem .cena-texto {
  position: absolute; inset: 0; z-index: 3; padding: 0;
  pointer-events: none; perspective: 1100px;
}

/* Painel flutuante: vidro fosco, borda fina e leve inclinação em 3D.
   --gx e --gy vêm do JS e acompanham o mouse; no celular ficam em zero. */
.com-rolagem .cena-painel {
  --vidro: rgba(12, 14, 16, .68);
  --vidro-borda: rgba(244, 244, 242, .34);
  --vidro-texto: var(--cor-gelo);
  --vidro-rotulo: rgba(244, 244, 242, .86);
  position: absolute; left: 84px; bottom: 84px;
  width: min(var(--painel-l, 30rem), calc(100% - 168px));
  gap: var(--e-2); padding: var(--e-3) var(--e-4) var(--e-3) var(--e-3);
  pointer-events: auto;
  color: var(--vidro-texto);
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55);
  transform-origin: 0 100%;
  transform: rotateY(calc(7deg + var(--gx, 0deg))) rotateX(calc(2deg + var(--gy, 0deg))) translateY(18px);
  opacity: 0;
  transition: transform 900ms var(--curva) 250ms, opacity 600ms ease 250ms;
}
.com-rolagem .cena.ativa .cena-painel { opacity: 1; transform: rotateY(calc(7deg + var(--gx, 0deg))) rotateX(calc(2deg + var(--gy, 0deg))); }
/* marca de canto: o único ponto de ciano do painel, além do traço do título */
.com-rolagem .cena-painel::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: 28px; height: 28px;
  border-left: 2px solid var(--cor-ciano); border-top: 2px solid var(--cor-ciano);
}
.com-rolagem .cena-painel h2 { color: var(--vidro-texto); font-size: clamp(1.75rem, 1rem + 2.4vw, 3.25rem); }
.com-rolagem .cena-painel .rotulo { color: var(--vidro-rotulo); }
.com-rolagem .cena-painel .cena-apoio { color: var(--vidro-texto); font-size: 1.0625rem; line-height: 1.5; }
.com-rolagem .cena-numero { display: block; position: absolute; right: var(--e-2); top: var(--e-2); }
.com-rolagem .cena-painel .btn { background: var(--cor-gelo); color: var(--cor-preto); }

/* Painel à direita: para cenas em que a equipe ocupa o canto esquerdo. Só em telas largas. */
@media (min-width: 768px) {
  .com-rolagem .cena[data-lado="direita"] .cena-painel {
    left: auto; right: 84px; bottom: 108px; transform-origin: 100% 100%;   /* acima do botão de conversa */
    transform: rotateY(calc(-7deg + var(--gx, 0deg))) rotateX(calc(2deg + var(--gy, 0deg))) translateY(18px);
  }
  .com-rolagem .cena[data-lado="direita"].ativa .cena-painel { transform: rotateY(calc(-7deg + var(--gx, 0deg))) rotateX(calc(2deg + var(--gy, 0deg))); }
}

/* Painel em faixa baixa: para a cena de produção, em que há gente dos dois lados.
   Fica rente à base, largo e baixo, cobrindo só o chão. Só em telas largas. */
@media (min-width: 768px) {
  .com-rolagem .cena[data-lado="baixo"] .cena-painel {
    left: 84px; right: 84px; bottom: 104px; width: auto;
    grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--e-1) var(--e-4);
    padding: var(--e-2) var(--e-5) var(--e-2) var(--e-3);
    transform-origin: 50% 100%;
    transform: rotateX(calc(5deg + var(--gy, 0deg))) rotateY(var(--gx, 0deg)) translateY(18px);
  }
  .com-rolagem .cena[data-lado="baixo"].ativa .cena-painel { transform: rotateX(calc(5deg + var(--gy, 0deg))) rotateY(var(--gx, 0deg)); }
  .com-rolagem .cena[data-lado="baixo"] .cena-titulo { grid-row: 1 / span 2; }
  @media (min-width: 1180px) { .com-rolagem .cena[data-lado="baixo"] .cena-painel { right: 268px; bottom: 56px; } }
  .com-rolagem .cena[data-lado="baixo"] .cena-painel { grid-template-columns: auto minmax(0, 1fr) auto; }
  .com-rolagem .cena[data-lado="baixo"] .cena-link { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-right: var(--e-4); white-space: nowrap; }
  .com-rolagem .cena[data-lado="baixo"] h2 { font-size: clamp(1.5rem, 1rem + 1.3vw, 2.25rem); white-space: nowrap; }
  .com-rolagem .cena[data-lado="baixo"] .cena-palavras { min-height: 34px; flex-wrap: nowrap; }
  @media (min-width: 1180px) { .com-rolagem .cena[data-lado="baixo"] h2 { font-size: 1.75rem; } .com-rolagem .cena[data-lado="baixo"] .cena-link { margin-right: var(--e-2); } }
}

/* Título em uma linha, para o painel ficar mais baixo (reunião: não cobre as mãos) */
@media (min-width: 768px) { .com-rolagem .cena[data-compacto] .cena-painel h2 { font-size: clamp(1.5rem, 1rem + 1.5vw, 2.375rem); white-space: nowrap; } }

/* Vidro claro: opção do seletor de prévia */
[data-painel="claro"].com-rolagem .cena-painel {
  --vidro: rgba(244, 244, 242, .58);
  --vidro-borda: rgba(255, 255, 255, .8);
  --vidro-texto: var(--cor-preto);
  --vidro-rotulo: var(--cor-texto);
}
[data-painel="claro"].com-rolagem .cena-painel .btn { background: var(--cor-preto); color: var(--cor-gelo); }

/* Abertura: a vinheta 3D do logo se forma no vazio do fundo infinito e o título entra embaixo dela.
   O vídeo tem fundo transparente. Se ele não tocar, fica o logo parado. */
.logo-3d { display: none; }
.so-leitor { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.logo-fixo { width: 160px; height: auto; margin-bottom: var(--e-2); }
.com-rolagem.logo-vivo .logo-fixo { display: none; }
.com-rolagem .logo-fixo { width: auto; height: clamp(150px, 30vh, 300px); margin: 0 auto var(--e-1); }
.com-rolagem.logo-vivo .logo-3d { display: block; width: auto; height: clamp(180px, 36vh, 360px); margin: 0 auto; }
.com-rolagem .cena-abertura .cena-titulo {
  position: absolute; left: 0; right: 0; top: 12%;
  margin: 0; padding: 0 var(--margem); text-align: center;
}
.com-rolagem .cena-abertura h1 { font-size: clamp(1.125rem, .8rem + 1.5vw, 2.125rem); letter-spacing: .06em; margin-top: var(--e-1); }
.com-rolagem .cena-abertura .cena-painel { padding-top: var(--e-4); }
.com-rolagem .marca { transition: opacity 400ms ease; }
.na-abertura.com-rolagem .marca { opacity: 0; pointer-events: none; }   /* o logo grande já está na cena */

/* O título entra palavra por palavra, saindo do desfoque, depois que o logo se forma */
.com-rolagem .cena-abertura h1 .p { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(8px); }
.com-rolagem.pronto .cena-abertura.ativa h1 .p { animation: palavra 800ms var(--curva) calc(2300ms + var(--i) * 220ms) forwards; }
@keyframes palavra { to { opacity: 1; transform: none; filter: none; } }
.com-movimento.com-rolagem .cena-abertura h1 em { transition-delay: 3100ms; }

/* Link de conversa dentro do painel de cada etapa */
.cena-link { justify-self: start; font-weight: 500; font-size: .9375rem; }
.cena-link::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform 200ms var(--curva); }
.cena-link:hover::after { transform: translateX(4px); }
.com-rolagem .cena-painel .cena-link { color: var(--vidro-texto); }

/* Transição de câmera (padrão): um giro rápido para o lado, como um chicote de câmera.
   A cena que sai acelera para fora, a que entra chega no embalo, passa um pouco do ponto e assenta,
   como uma câmera na mão. Durante o giro, a imagem ganha desfoque de movimento horizontal (filtro SVG,
   com a intensidade animada pelo JS). O texto não desfoca. */
[data-transicao="lateral"].com-rolagem .cena { opacity: 1; transform: translateX(104%); transition: transform 720ms cubic-bezier(.76, 0, .18, 1); }
[data-transicao="lateral"].com-rolagem .cena.antes { transform: translateX(-104%); }
[data-transicao="lateral"].com-rolagem .cena.ativa { transform: none; }
[data-transicao="lateral"].com-rolagem .cena.ativa .cena-midia { animation: assenta 1250ms cubic-bezier(.2, .7, .2, 1) both; }
[data-transicao="lateral"].com-rolagem .cena.ativa.de-tras .cena-midia { animation-name: assenta-volta; }
@keyframes assenta {
  0%   { transform: translate3d(3.2%, 0, 0) scale(1.07) rotate(.35deg); }
  52%  { transform: translate3d(-.7%, .25%, 0) scale(1.035) rotate(-.12deg); }
  78%  { transform: translate3d(.25%, -.1%, 0) scale(1.02) rotate(.04deg); }
  100% { transform: none; }
}
@keyframes assenta-volta {
  0%   { transform: translate3d(-3.2%, 0, 0) scale(1.07) rotate(-.35deg); }
  52%  { transform: translate3d(.7%, .25%, 0) scale(1.035) rotate(.12deg); }
  78%  { transform: translate3d(-.25%, -.1%, 0) scale(1.02) rotate(-.04deg); }
  100% { transform: none; }
}
.com-rolagem .palco.movendo .cena-midia { filter: url(#borrao-h); transition: none; }

/* Linha do tempo: as etapas como numa ilha de edição, com um cursor que anda com a rolagem */
.com-rolagem .passos {
  position: absolute; z-index: 5; left: 84px; right: 268px; bottom: 26px;   /* a direita fica livre para o botão de conversa */
  display: grid; grid-template-columns: repeat(var(--cenas, 5), 1fr); gap: 3px;
}
.passos button {
  padding: 9px 0 0; border: 0; border-top: 1px solid rgba(244, 244, 242, .38); background: none; cursor: pointer;
  font: 500 .6875rem/1 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; text-align: left;
  color: rgba(244, 244, 242, .88); text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 10px rgba(0, 0, 0, .7);
  transition: color 300ms, border-color 300ms;
}
.passos button:hover { color: var(--cor-gelo); }
.passos button[aria-current="true"] { color: var(--cor-gelo); border-top-color: var(--cor-gelo); }
.passos .cursor {
  position: absolute; top: -5px; left: calc(var(--p, 0) * 100%); width: 2px; height: 11px;
  background: var(--cor-ciano); pointer-events: none;
}
[data-tom="claro"] .passos button { color: rgba(10, 10, 10, .82); border-top-color: rgba(10, 10, 10, .35); text-shadow: none; }
[data-tom="claro"] .passos button[aria-current="true"] { color: var(--cor-preto); border-top-color: var(--cor-preto); }

/* Pausar e continuar a sequência automática, ao lado do REC */
.auto-ctl {
  position: absolute; z-index: 6; top: 22px; left: calc(50% + 118px); min-height: 32px; padding: 0 12px;
  border: 1px solid rgba(244, 244, 242, .34); background: rgba(12, 14, 16, .4); color: var(--cor-gelo); cursor: pointer;
  font: 500 .6875rem/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .12em; text-transform: uppercase;
}
.auto-ctl:hover { border-color: var(--cor-ciano); }
.hud.parado .hud-rec b { animation-play-state: paused; opacity: .35; }

/* Convite para rolar: só na abertura. Ao rolar ou clicar, o filme segue sozinho. */
.rolar { display: none; }
.com-rolagem .rolar {
  position: absolute; z-index: 6; left: 50%; bottom: 76px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 2px; padding: 8px 14px; border: 0; background: none; cursor: pointer;
  font: 500 .75rem/1 var(--fonte-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--cor-preto);
  text-shadow: 0 0 10px rgba(255, 255, 255, .95), 0 0 2px rgba(255, 255, 255, .9);   /* lê sobre cabos e equipamento */
  opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 0s 500ms;
}
.na-abertura.com-rolagem.pronto .rolar { opacity: 1; visibility: visible; transition: opacity 700ms ease 3400ms, visibility 0s; }   /* aparece depois que o logo e o título se formam */
.rolar svg { animation: desce 1.6s var(--curva) infinite; }
@keyframes desce { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(7px); opacity: 1; } }
.rolar:hover svg { animation-duration: .9s; }

/* Tela de carregamento: logo e uma linha, só enquanto a primeira cena carrega */
.claquete {
  position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 28px;
  background: var(--cor-preto); opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 0s 500ms;
}
.carregando .claquete { opacity: 1; visibility: visible; transition: none; animation: some 400ms 4s forwards; }   /* some sozinha em 4 s se o JS falhar */
.claquete img { width: 72px; height: auto; filter: invert(1); }
.claquete span { width: 120px; height: 1px; background: rgba(244, 244, 242, .25); position: relative; overflow: hidden; }
.claquete span::after { content: ""; position: absolute; inset: 0; background: var(--cor-ciano); transform: translateX(-100%); animation: carrega 1.1s ease-in-out infinite; }
@keyframes carrega { to { transform: translateX(100%); } }
@keyframes some { to { opacity: 0; visibility: hidden; } }

/* ---------- Fechamento: continua imersivo. Fundo escuro com o set desfocado ao fundo. ---------- */
.fim {
  position: relative; overflow: hidden; border-top: 0;
  min-height: 100vh; min-height: 100svh; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr);   /* sem isso o conteúdo estoura a largura no celular */
  background: var(--cor-preto); color: rgba(244, 244, 242, .82); text-align: left;
}
.fim::before {
  content: ""; position: absolute; inset: -48px;
  background: url("assets/img/cena-set-1100.webp") 50% 50% / cover;
  filter: blur(44px) brightness(.34) saturate(.6);
}
.fim::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 85% at 22% 28%, rgba(10, 10, 10, .2), rgba(10, 10, 10, .88) 78%); }
.fim .container { position: relative; z-index: 5; }
.fim .hud { z-index: 4; }
.fim h2 { color: var(--cor-gelo); font-size: clamp(2rem, 1rem + 4.4vw, 4.75rem); line-height: 1.02; }
.fim-apoio { max-width: 32rem; margin: var(--e-3) 0 var(--e-4); font-size: 1.125rem; }
.fim .btn { background: var(--cor-gelo); color: var(--cor-preto); }
.atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; max-width: 62rem; }
.atalho {
  display: grid; gap: 10px; height: 100%; padding: var(--e-3); text-decoration: none;
  font-family: var(--fonte-titulo); font-weight: 500; font-size: 1.0625rem; line-height: 1.25; text-transform: uppercase; letter-spacing: .01em;
  color: var(--cor-gelo); background: rgba(244, 244, 242, .06); border: 1px solid rgba(244, 244, 242, .28);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: border-color 250ms, background-color 250ms, transform 250ms var(--curva);
}
.atalho::after { content: "\2192"; font-family: var(--fonte-texto); justify-self: end; transition: transform 200ms var(--curva); }
.atalho:hover { border-color: var(--cor-ciano); background: rgba(244, 244, 242, .1); transform: translateY(-3px); }
.atalho:hover::after { transform: translateX(4px); }
.atalho .rotulo { color: rgba(244, 244, 242, .62); }
.fim-outra { margin-top: var(--e-3); }
.fim-clientes { margin-top: var(--e-5); padding-top: var(--e-3); border-top: 1px solid rgba(244, 244, 242, .22); max-width: 62rem; }
.fim-clientes .rotulo { color: rgba(244, 244, 242, .6); margin-bottom: var(--e-3); }
.fim-clientes ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--e-3) var(--e-4); }
@media (min-width: 768px) { .fim-clientes ul { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 46rem; } }
.fim-clientes img { height: 26px; width: auto; max-width: 100%; object-fit: contain; object-position: 0 50%; filter: invert(1); opacity: .85; }
.fim-clientes img.alto { height: 48px; }
.marca-nome { font-family: var(--fonte-titulo); font-weight: 500; font-size: .9375rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(244, 244, 242, .85); }
.fim a:not(.btn), .rodape a { color: var(--cor-gelo); }
.fim a:not(.btn):hover, .rodape a:hover { text-decoration-color: var(--cor-gelo); }
.fim a:focus-visible, .rodape a:focus-visible, .com-rolagem .cena-painel a:focus-visible, .com-rolagem .cabecalho a:focus-visible { outline-color: var(--cor-gelo); }
.rodape { background: var(--cor-preto); border-top-color: rgba(244, 244, 242, .16); color: rgba(244, 244, 242, .82); }
.rodape .rotulo { color: rgba(244, 244, 242, .6); }
.rodape-logo { filter: invert(1); }
body { background: var(--cor-preto); }

/* ---------- Topo imersivo: sem barra. Logo e botão flutuam sobre a cena.
   Só com o palco ligado; sem JS volta o cabeçalho comum da LP geral. ---------- */
.com-rolagem .cabecalho {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: none; border-bottom: 0; pointer-events: none;
}
.com-rolagem .cabecalho .container { max-width: none; padding: 0 var(--e-3); min-height: 76px; }
.com-rolagem .cabecalho a { pointer-events: auto; }
.com-rolagem .marca img { height: 44px; filter: invert(1) drop-shadow(0 1px 8px rgba(0, 0, 0, .55)); transition: filter 500ms ease; }   /* logo branco sobre a cena */
[data-tom="claro"].com-rolagem .marca img { filter: none; }                                   /* logo preto sobre fundo claro */
.ico-wa { flex: none; }
.cabecalho .btn::after { content: none; }
.com-rolagem .cabecalho .btn {
  position: fixed; right: 44px; bottom: 40px; z-index: 61;
  transition: opacity 350ms ease, visibility 0s;
  background: rgba(12, 14, 16, .46); color: var(--cor-gelo);
  border: 1px solid rgba(244, 244, 242, .34);
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
}

[data-conversa="off"].com-rolagem .cabecalho .btn { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 350ms ease, visibility 0s 350ms; }

/* ---------- Marca de gravação: REC e timecode no topo, entre o logo e o botão ---------- */
.hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; color: var(--cor-gelo); font: 500 .75rem/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .12em; }
.hud-rec { position: absolute; left: 50%; top: 32px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 12px rgba(0, 0, 0, .6); }
.hud.fora .hud-rec b { animation-play-state: paused; }
.hud-rec b { width: 9px; height: 9px; border-radius: 50%; background: var(--cor-rec); animation: pisca 1.2s steps(2, jump-none) infinite; }
@keyframes pisca { 50% { opacity: .15; } }
/* Cantos de enquadramento, como o visor da câmera */
.hud i { position: absolute; width: 44px; height: 44px; border: 0 solid rgba(244, 244, 242, .9); filter: drop-shadow(0 0 3px rgba(0, 0, 0, .55)); }
.hud i:nth-child(1) { left: 28px; top: 96px; border-left-width: 1px; border-top-width: 1px; }
.hud i:nth-child(2) { right: 28px; top: 96px; border-right-width: 1px; border-top-width: 1px; }
.hud i:nth-child(3) { left: 28px; bottom: 28px; border-left-width: 1px; border-bottom-width: 1px; }
.hud i:nth-child(4) { right: 28px; bottom: 28px; border-right-width: 1px; border-bottom-width: 1px; }
[data-tom="claro"] .hud i { border-color: rgba(10, 10, 10, .75); filter: none; }
/* Corte: a cada troca de cena os cantos do visor "buscam o foco" */
.hud.corte i { animation: foco 650ms var(--curva); }
@keyframes foco { 0% { width: 84px; height: 84px; opacity: .25; } 60% { width: 38px; height: 38px; opacity: 1; } 100% { width: 44px; height: 44px; } }
[data-tom="claro"] .hud { color: var(--cor-preto); }
[data-tom="claro"] .hud-rec { text-shadow: none; }
@media (max-width: 767px) {
  .hud-rec { top: 88px; }
  .hud i { width: 26px; height: 26px; }
  .hud i:nth-child(1), .hud i:nth-child(2) { top: 80px; }
  .hud i:nth-child(1) { left: 12px; }
  .hud i:nth-child(2) { right: 12px; }
  .hud i:nth-child(3), .hud i:nth-child(4) { display: none; }   /* embaixo fica o painel */
}

/* ---------- Tablet e computador ---------- */
@media (min-width: 768px) {
  .cena-texto { padding: var(--e-4) var(--e-5) var(--e-5); }
}

/* ---------- Celular: a foto horizontal é cortada em pé (--foco escolhe o que fica);
   o painel ocupa a largura, sem inclinação ---------- */
@media (max-width: 767px) {
  .com-rolagem .cena-painel {
    left: 12px; right: 12px; bottom: 44px; width: auto;   /* o ícone de conversa fica no canto inferior direito do painel */
    padding: var(--e-3) var(--e-3) var(--e-2);
    transform: translateY(18px);
  }
  .com-rolagem .cena.ativa .cena-painel { transform: none; }
  .com-rolagem .cena-abertura .cena-titulo { top: 14%; }
  .com-rolagem.logo-vivo .logo-3d { height: clamp(150px, 26vh, 240px); }
  .com-rolagem .rolar { bottom: auto; top: calc(14% + clamp(150px, 26vh, 240px) + 32px); }   /* entre o título e o painel */
  .com-rolagem .logo-fixo { height: clamp(120px, 20vh, 200px); }
  .com-rolagem .cena-abertura .cena-painel { padding-top: var(--e-4); }
  .com-rolagem .passos { left: 12px; right: 12px; bottom: 8px; }
  .com-rolagem .cabecalho .btn { right: 24px; bottom: 54px; width: 40px; min-height: 40px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
  .com-rolagem .cena-palavras { min-height: 34px; }   /* no celular a linha do tempo fica só com os traços */
  .passos button { height: 28px; padding: 0; font-size: 0; border-top: 0; border-bottom: 2px solid rgba(244, 244, 242, .38); }
  .passos button[aria-current="true"] { border-bottom-color: var(--cor-gelo); }
  [data-tom="claro"] .passos button { border-bottom-color: rgba(10, 10, 10, .35); }
  [data-tom="claro"] .passos button[aria-current="true"] { border-bottom-color: var(--cor-preto); }
  .passos .cursor { top: auto; bottom: -4px; }
  .auto-ctl { top: 118px; left: auto; right: 12px; }
}

/* Sem suporte a desfoque de fundo: o vidro fica mais opaco para o texto continuar legível */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .com-rolagem .cena-painel { --vidro: rgba(12, 14, 16, .82); }
  [data-painel="claro"].com-rolagem .cena-painel { --vidro: rgba(244, 244, 242, .9); }
}