/* Jornada · abertura, composição editorial, ponte e saída
   Dois estados a partir do MESMO HTML:
   · estático (movimento reduzido, sem JS, falha de carregamento)
   · html.movimento (PADRÃO): palco sticky + três cenas lógicas + saída

   Densidade (fase 5.2 §23): SILÊNCIO → INFORMAÇÃO → MOVIMENTO → SILÊNCIO → IMPACTO.
   Quatro cenas de DUAS ZONAS (fase 9.5): à esquerda a frase, à direita o que acontece ali,
   com símbolo. A ponte muda (é o giro de câmera), e nenhum
   indicador de progresso em nenhum estado. */

/* ==================================================================================
   ESTÁTICO — documento vertical, mesma informação, mesma hierarquia
   ================================================================================== */
.palco__visual,
.palco__status,
.jornada__trilhos { display: none; }

.etapa {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e-6) var(--e-5);
  align-items: start;
  padding: var(--e-8) var(--margem) var(--e-9);
}
.etapa__still { grid-column: 1 / -1; }
.etapa__still img { width: 100%; height: auto; }
.etapa .beat--abre { grid-column: 1 / span 7; }
.etapa .beat--lado { grid-column: 9 / -1; align-self: end; }
.etapa .nuvens-estatica { grid-column: 1 / -1; }

.nuvens-estatica {
  position: relative;
  height: clamp(160px, 26vw, 340px);
  background: linear-gradient(to bottom, transparent, var(--branco));
  overflow: hidden;
}
.nuvens-estatica img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }

@media (max-width: 760px) {
  .etapa > * { grid-column: 1 / -1 !important; }
}

/* ==================================================================================
   TIPOGRAFIA DO BLOCO (vale nos dois estados)
   a faixa · título de até 44 px · UMA frase. Sem rótulo em cima: o título é o assunto.
   Do outro lado da tela, a NOTA DE MARGEM — o nome oficial do passo, em mono, pequena.
   ================================================================================== */
.beat--abre { display: grid; justify-items: start; gap: var(--e-4); }

.beat__titulo {
  font-family: var(--f-titulo);
  font-weight: var(--p-titulo);
  font-size: var(--t-h2);
  line-height: var(--lh-titulo);
  letter-spacing: var(--tr-titulo);
}
.beat__texto {
  max-width: 36ch;
  font-size: var(--t-lide);
  line-height: 1.45;
  color: var(--tema-tinta-2);
}

/* A ZONA DA DIREITA: o que acontece naquele trecho, uma frase curta por linha, cada uma com
   o seu símbolo. Não é card, não é checklist, não marca progresso: é texto de margem, com
   um fio vertical fino ligando os itens — a mesma linha da faixa, em pé. */
.beat--lado { display: grid; justify-items: start; }
.lado { position: relative; display: grid; gap: var(--e-4); padding-left: var(--e-5); }
.lado::before {                                          /* o fio, com a cabeça no acento */
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: linear-gradient(to bottom, var(--acento-local) 0 20px, color-mix(in oklab, var(--tema-tinta) 30%, transparent) 20px);
}
.lado li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--e-3); align-items: start; }
.lado .glifo { width: 24px; height: 24px; color: var(--tema-tinta); }
.lado p { font-size: 1rem; line-height: 1.4; color: var(--tema-tinta); font-weight: 500; }

/* A SOMA da chegada, só em símbolos: veículo + dívida = proposta. Os operadores no acento. */
.soma { display: flex; align-items: center; gap: var(--e-3); }
.soma .glifo { width: 34px; height: 34px; color: var(--tema-tinta); }
.soma__resultado { padding: 5px; width: 44px !important; height: 44px !important; background: var(--preto); color: var(--branco) !important; --acento-local: var(--acento); }
.soma__op { position: relative; width: 18px; height: 18px; }
.soma__op::before, .soma__op::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.5px; background: var(--acento-local); }
.soma__op--mais::before { transform: translate(-50%, -50%); }
.soma__op--mais::after { width: 2.5px; height: 16px; transform: translate(-50%, -50%); }
.soma__op--igual::before { transform: translate(-50%, calc(-50% - 3.5px)); }
.soma__op--igual::after { transform: translate(-50%, calc(-50% + 3.5px)); }
.soma__legenda { margin-top: var(--e-3); font-size: 0.9375rem; font-weight: 500; color: var(--tema-tinta); }

/* o convite, no fim da jornada: o único CTA dentro do palco */
.beat__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-6); margin-top: var(--e-2); }

/* ==================================================================================
   MOVIMENTO
   ================================================================================== */
.movimento .jornada { position: relative; }

/* A COSTURA com o hero: o preto do hero continua por cima do topo do palco e sobe junto com
   a página — um véu que se levanta, não uma linha. Fica no fluxo da seção (não no palco
   fixo), então ele sai de cena sozinho enquanto a abertura termina de clarear a cena. */
.movimento .jornada::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 70vh;
  pointer-events: none;
  background: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0.72) 30%, rgb(0 0 0 / 0.3) 62%, rgb(0 0 0 / 0) 100%);
}

.movimento .jornada__palco {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: clip;
  z-index: 1;
}

/* trilhos: a altura existe desde o primeiro byte (css/trilhos.css) */
.movimento .jornada__trilhos { display: block; position: relative; margin-top: -100dvh; }
.trilho { pointer-events: none; }
.trilho[data-scene="c06-logistica"] { height: var(--trilho-c06-logistica); }
.trilho[data-scene="ponte-c06-c07"] { height: var(--trilho-ponte-c06-c07); }
.trilho[data-scene="c07-estrada-patio"] { height: var(--trilho-c07-estrada-patio); }
.trilho[data-scene="saida-c08"] { height: var(--trilho-saida-c08); }
.trilho--desafixar { height: 100dvh; }        /* o palco branco sai enquanto a C08 branca entra */

/* ---------- palco visual */
.movimento .palco__visual { display: block; position: absolute; inset: 0; }

/* VINHETA: a profundidade das bordas da janela, declarada por tema (--tema-vinheta).
   É o que tira a página do cinza chapado sem tocar em um pixel do render. Fica em zero
   perto do palco, então a emenda com a borda do render não muda. */
.palco__vinheta {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 72% at 50% 50%,
    rgb(28 30 33 / 0) 38%, rgb(28 30 33 / 0.45) 82%, rgb(28 30 33 / 0.78) 100%);
  opacity: var(--tema-vinheta, 0);
  transition: opacity var(--tema-dur-fundo) ease;
}

.palco__quadro {
  position: absolute;
  left: var(--quadro-x, 0px);
  top: var(--quadro-y, 0px);
  width: var(--quadro-w, 100%);
  height: var(--quadro-h, 100%);
  transform: scale(var(--subida, 1));
  transform-origin: 50% 46%;
}
/* palco menor que a janela: as bordas se dissolvem na cor do tema (as bordas do render
   têm essa mesma cor, medida) — nunca uma caixa */
.palco__quadro.pena-x {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.palco__quadro.pena-y {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
}
.palco__quadro.pena-x.pena-y {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
                      linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
                      linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
          mask-composite: intersect;
}

/* na saída o palco recua ("a câmera sobe"): as bordas se dissolvem progressivamente */
.jornada.is-saindo .palco__quadro {
  --pena-x: calc(var(--pena, 0) * 9%);
  --pena-y: calc(var(--pena, 0) * 12%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--pena-x), #000 calc(100% - var(--pena-x)), transparent),
                      linear-gradient(to bottom, transparent, #000 var(--pena-y), #000 calc(100% - var(--pena-y)), transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 var(--pena-x), #000 calc(100% - var(--pena-x)), transparent),
                      linear-gradient(to bottom, transparent, #000 var(--pena-y), #000 calc(100% - var(--pena-y)), transparent);
          mask-composite: intersect;
}

.palco__poster, .palco__poster img, .palco__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.palco__poster img { object-fit: cover; }
.palco__canvas { visibility: hidden; }
.palco__canvas.is-visivel { visibility: visible; }
.jornada.is-pintada .palco__poster { visibility: hidden; }

/* ---------- ABERTURA: o hero não corta na estrada — a cena EMERGE do preto dele.
   DUAS camadas sobre a janela inteira (palco E laterais), as duas escritas pelo progresso
   da primeira cena. A de baixo é o preto do hero, que sai primeiro; a de cima é uma
   atmosfera escura nas bordas, que demora o dobro para sair. A imagem nasce do centro
   enquanto a periferia ainda está no escuro — nunca uma cortina, nunca uma linha, nunca
   um corte, nunca um fade branco, nunca uma máscara retangular. */
.palco__abertura {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.palco__abertura--cheia { background: var(--preto-absoluto); opacity: var(--abertura, 0); }
.palco__abertura--borda {
  background: radial-gradient(ellipse 68% 74% at 50% 47%,
    rgb(0 0 0 / 0) 28%, rgb(0 0 0 / 0.72) 72%, rgb(0 0 0 / 0.96) 100%);
  opacity: var(--abertura-borda, 0);
}

/* ---------- A PONTE em silêncio: nenhum texto e, desde a fase 9.6, nenhum marcador — o
   tracejado que atravessava a janela parecia um elemento solto de interface. A câmera conta. */

/* ---------- SAÍDA para a C08: o contraste fecha, a atmosfera abre, duas camadas de nuvem
   passam e o branco fecha. Só opacidade e transform, todos escritos pelo progresso da cena.
   No começo mais contraste; no meio mais luz; no fim branco quase absoluto. */
.palco__contraste, .palco__atmosfera, .palco__branco, .palco__nuvem {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.palco__contraste {
  background: radial-gradient(ellipse 66% 72% at 50% 47%,
    rgb(10 10 11 / 0) 30%, rgb(10 10 11 / 0.34) 74%, rgb(10 10 11 / 0.62) 100%);
  opacity: var(--contraste, 0);
}
.palco__atmosfera {
  background:
    radial-gradient(ellipse 70% 60% at 50% 48%, rgb(230 231 233 / 0.32), rgb(230 231 233 / 0.9) 70%, var(--branco));
  opacity: var(--atmosfera, 0);
}
/* NUVENS: atmosfera, não efeito. Duas camadas com escalas, velocidades e opacidades de
   pico diferentes, e uma deriva vertical lenta — profundidade simulada, nada dramático. */
.palco__nuvem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.palco__nuvem--b {
  opacity: var(--nuvem-b-op, 0);
  transform: scale(var(--nuvem-b-esc, 1)) translate3d(0, calc(var(--nuvem-b-y, 0) * 1%), 0);
}
.palco__nuvem--a {
  opacity: var(--nuvem-a-op, 0);
  transform: scale(var(--nuvem-a-esc, 1)) translate3d(0, calc(var(--nuvem-a-y, 0) * 1%), 0);
}
.palco__branco { background: var(--branco); opacity: var(--branco-op, 0); }
.jornada.is-saindo .palco__nuvem,
.jornada.is-saindo .palco__quadro { will-change: transform, opacity; }   /* só durante a saída */

/* véus de legibilidade — existem só no palco cheio (celular) e só enquanto há texto
   naquela zona: --veu-topo / --veu-base vêm do coordenador, do próprio valor dos blocos.
   Gradiente direcional, nunca uma caixa (theme-choreography PARTE VI). */
.palco__veu {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  opacity: 0;
}
.palco__veu--topo {
  top: 0;
  height: 34%;
  background: linear-gradient(to bottom,
    var(--tema-veu) 0%, var(--tema-veu) 38%, rgb(0 0 0 / 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 64%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0 64%, transparent 100%);
}
/* a de BAIXO cobria 42% da tela e apagava o caminhão nos prints do celular: agora é uma
   sombra curta na borda, e a leitura vem do escudo do próprio bloco */
.palco__veu--base {
  bottom: 0;
  height: 22%;
  background: linear-gradient(to top,
    var(--tema-veu) 0%, var(--tema-veu) 34%, rgb(0 0 0 / 0) 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0 64%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0 64%, transparent 100%);
}
.jornada[data-palco="cheio"] .palco__veu--topo { opacity: calc(var(--veu-topo, 0) * 0.55); }
.jornada[data-palco="cheio"] .palco__veu--base { opacity: calc(var(--veu-base, 0) * 0.45); }

/* ---------- camada editorial: só nas laterais, limitada pela geometria do palco.
   O limite vem de --quadro-x / --quadro-w (escritos pelo coordenador): o bloco nunca
   passa de 32% do quadro, então nunca chega à pista. Os lados ALTERNAM. */
.movimento .palco__camada { position: absolute; inset: 0; pointer-events: none; }
.movimento .etapa { position: absolute; inset: 0; display: block; padding: 0; }
.movimento .etapa__still { display: none; }

.movimento .beat {
  position: absolute;
  margin: 0;
  pointer-events: auto;
  opacity: var(--b, 0);
  transform: translateY(calc((1 - var(--b, 0)) * 10px));
}
.movimento .beat[inert] { pointer-events: none; }

/* ESCUDO DE LEITURA (fase de acabamento, 23/09/2026): o render é claro e cheio de detalhe
   justamente onde o texto mora. Em vez de uma caixa, uma CLAREIRA elíptica presa ao bloco:
   densa onde começa a linha, dissolvida antes da borda — o ambiente continua legível por
   baixo. Acompanha a entrada do bloco (--b) e não existe no estado estático. */
.movimento .beat { isolation: isolate; }
.movimento .beat::before {
  content: "";
  position: absolute;
  inset: -20px -34px -26px -30px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(125% 115% at 16% 48%, var(--tema-escudo) 0%,
              var(--tema-escudo) 34%, rgb(255 255 255 / 0) 76%);
  opacity: clamp(0, calc(var(--b, 0) * 1.25), 1);
}
/* a zona da direita é uma lista fina: o escudo acompanha a coluna, mais estreito */
.movimento .beat--lado::before { inset: -16px -26px -20px -22px; background: radial-gradient(130% 118% at 12% 48%, var(--tema-escudo) 0%, var(--tema-escudo) 30%, rgb(255 255 255 / 0) 74%); }
/* as bordas laterais nunca terminam numa linha: dissolvem */
.movimento .beat::before {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 88%, transparent 100%);
}
/* CELULAR: o bloco ocupa a largura da tela, então o escudo deixa de ser elipse e vira uma
   claridade que desce (ou sobe) e some antes do protagonista — nunca uma faixa com borda. */
.movimento .jornada[data-palco="cheio"] .beat::before {
  inset: calc(-1 * var(--topo, 0px) - 40px) -16px -40px -16px;
  background: linear-gradient(to bottom, var(--tema-escudo) 0%, var(--tema-escudo) 52%, rgb(255 255 255 / 0) 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.movimento .jornada[data-palco="cheio"] [data-zona-mobile="base"]::before {
  inset: -40px -16px calc(-1 * var(--base, 0px) - 52px) -16px;
  background: linear-gradient(to top, var(--tema-escudo) 0%, var(--tema-escudo) 52%, rgb(255 255 255 / 0) 100%);
}

/* o texto fica alinhado à esquerda nos dois lados: bloco posicionado à direita, leitura
   sempre da mesma borda. Ragged-left em parágrafo é pior de ler do que qualquer ganho
   de simetria. */
.movimento [data-lugar^="esq"] {
  left: var(--margem);
  width: min(34vw, 470px);
  max-width: max(190px, calc(var(--quadro-x, 0px) + var(--quadro-w, 100vw) * 0.32 - var(--margem) - 20px));
}
.movimento [data-lugar^="dir"] {
  right: var(--margem);
  width: min(34vw, 470px);
  max-width: max(190px, calc(100vw - var(--quadro-x, 0px) - var(--quadro-w, 100vw) * 0.68 - var(--margem) - 20px));
}
.movimento [data-lugar="esq-baixo"], .movimento [data-lugar="dir-baixo"] { bottom: clamp(48px, 11vh, 132px); }
.movimento [data-lugar="esq-cima"], .movimento [data-lugar="dir-cima"] { top: clamp(96px, 15vh, 168px); }
.movimento [data-lugar$="centro"] {
  top: 50%;
  transform: translateY(calc(-50% + (1 - var(--b, 0)) * 10px));
}

/* ---------- movimento do texto: CONDUZIDO PELO SCROLL (--b), nunca por tempo próprio.
   A faixa se desenha primeiro, o título entra, a frase depois, a zona da direita por
   último — tudo dentro do mesmo gesto de rolagem (text-motion §6, ease linear). */
/* o TÍTULO sobe de trás da própria borda (máscara) conforme a rolagem: a linha de corte
   desce com --b e o bloco anda poucos pixels — parece a câmera revelando, não um efeito */
.movimento .beat__titulo {
  --t: clamp(0, calc((var(--b, 0) - 0.04) / 0.5), 1);
  opacity: clamp(0, calc(var(--t) * 1.6), 1);
  transform: translateY(calc((1 - var(--t)) * 0.45em));
  clip-path: inset(-0.2em -0.2em calc((1 - var(--t)) * 70%) -0.2em);
}
.movimento .beat__texto { opacity: clamp(0, calc((var(--b, 0) - 0.22) / 0.5), 1); transform: translateY(calc((1 - clamp(0, calc((var(--b, 0) - 0.22) / 0.5), 1)) * 8px)); }
.movimento .beat__acoes { opacity: clamp(0, calc((var(--b, 0) - 0.4) / 0.45), 1); }
/* a zona da direita: o fio se desenha, e os itens entram um depois do outro (--k) */
.movimento .beat--lado[data-lugar] { width: min(25vw, 340px); max-width: none; }
.movimento .lado::before { transform: scaleY(clamp(0, calc(var(--b, 0) / 0.6), 1)); transform-origin: top; }
.movimento .lado li, .movimento .soma > *, .movimento .soma__legenda {
  --t: clamp(0, calc((var(--b, 0) - 0.12 - var(--k, 0) * 0.1) / 0.35), 1);
  opacity: var(--t);
  transform: translateX(calc((1 - var(--t)) * 10px));
}
/* a proposta chega ao pátio: os carros estacionados começam em ~31% da largura — o bloco
   fica aquém disso */
.movimento [data-beat="c07-chegada"][data-lugar] { width: min(24vw, 360px); }
/* a conclusão, no branco da saída: o bloco maior da jornada — o fim do percurso */
.movimento [data-beat="saida-conclusao"][data-lugar] { width: min(44vw, 620px); max-width: none; }
.beat--conclusao .beat__titulo { font-size: var(--t-secao); font-weight: var(--p-display); letter-spacing: var(--tr-display); }
.beat--conclusao .beat__texto { color: var(--tema-tinta-2); }

/* ---------- PALCO CHEIO (celular, retrato ou paisagem): a composição 3D é a tela inteira
   e o texto mora SOBRE ela, apoiado pelo véu da sua zona. Direção de arte do celular
   (fase 5.2 §19): texto maior, menos coisas ao mesmo tempo, mais silêncio. */
.movimento .jornada[data-palco="cheio"] [data-lugar] {
  left: var(--margem);
  right: var(--margem);
  width: auto;
  max-width: none;
  transform: translateY(calc((1 - var(--b, 0)) * 8px));
}
.movimento .jornada[data-palco="cheio"] [data-zona-mobile="topo"] {
  top: calc(var(--topo) + 40px);
  bottom: auto;
}
.movimento .jornada[data-palco="cheio"] [data-zona-mobile="base"] {
  top: auto;
  bottom: calc(var(--base) + 52px);
}
.movimento .jornada[data-palco="cheio"] [data-lugar-mobile="oculto"] { display: none; }

/* o aviso de espera NÃO aparece na tela (fase 9.6): a espera é tratada por dentro (o quadro
   anterior fica na tela, nunca um vazio). O texto continua no DOM, em role="status", só para
   leitor de tela e diagnóstico. */
.palco__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- depuração (?debug&painel) */
.jornada__debug {
  position: absolute; left: 12px; bottom: 12px; z-index: 5; margin: 0; padding: 10px 12px;
  background: rgb(10 10 11 / 0.85); color: #fff; font: 11px/1.5 var(--f-mono); pointer-events: none;
}

/* ==================================================================================
   FAIXAS DE CELULAR — o layout vem de [data-palco="cheio"]; aqui só tipo e respiro
   320–374 · 375–429 · 430–767 (retrato) — e o estático continua em coluna única
   ================================================================================== */
@media (orientation: portrait) and (max-width: 767px) {
  .beat--abre { gap: var(--e-3); }
  /* a zona da direita vira a zona de BAIXO no celular: compacta, largura inteira */
  .lado { gap: var(--e-2); padding-left: var(--e-4); }
  .lado li { grid-template-columns: 18px minmax(0, 1fr); gap: var(--e-2); }
  .lado .glifo { width: 18px; height: 18px; }
  .lado p { font-size: 0.875rem; line-height: 1.35; }
  .beat__acoes .botao { width: 100%; }
  .beat__titulo { font-size: clamp(1.75rem, 8.4vw, 2.75rem); }
  .beat__texto { font-size: var(--t-body); max-width: 34ch; }
}
@media (orientation: portrait) and (max-width: 374px) {
  /* abaixo de 375 px a zona de baixo encostaria no caminhão: os dados saem do palco (o
     título e o texto de cima contam o trecho; no estado estático tudo continua lá) */
  .movimento .jornada[data-palco="cheio"] .beat--lado { display: none; }
  :root { --margem: 16px; --faixa-larg: 60px; }
  .beat__texto { max-width: 30ch; }
  .movimento .jornada[data-palco="cheio"] [data-zona-mobile="topo"] { top: calc(var(--topo) + 32px); }
}
@media (orientation: portrait) and (min-width: 430px) and (max-width: 767px) {
  .beat__texto { font-size: var(--t-lide); }
  .movimento .jornada[data-palco="cheio"] [data-zona-mobile="topo"] { top: calc(var(--topo) + 56px); }
}

/* ==================================================================================
   TABLET EM RETRATO (768–900) — o quadro é 16:9 e não pode ser ampliado, então o palco
   ocupa 675 px de altura e sobra uma faixa acima e outra abaixo (253 px em 820x1180,
   175 px em 768x1024). Espremer o texto num filete de 240 px sobre a borda da imagem
   é a pior das saídas: aqui o texto mora NA faixa de baixo, com a linha de leitura
   inteira, nada por cima do veículo e nenhum escudo necessário.
   ================================================================================== */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 900px) {
  .movimento .jornada[data-palco="central"] [data-lugar] {
    left: var(--margem);
    right: var(--margem);
    width: auto;
    max-width: none;
    top: calc(var(--quadro-y, 0px) + var(--quadro-h, 0px) + clamp(14px, 2.4vh, 30px));
    bottom: auto;
    transform: translateY(calc((1 - var(--b, 0)) * 8px));
  }
  .movimento .jornada[data-palco="central"] [data-lugar$="centro"] { translate: none; }
  /* uma mensagem de cada vez: a coluna lateral não cabe na faixa e competiria com ela */
  .movimento .jornada[data-palco="central"] .beat--lado { display: none; }
  /* o escudo de leitura protege texto SOBRE o render — na faixa ele não tem função */
  .movimento .jornada[data-palco="central"] .beat::before { content: none; }
  .movimento .jornada[data-palco="central"] .beat__titulo { font-size: clamp(1.5rem, 4.4vw, 2rem); }
}

/* ==================================================================================
   PAISAGEM DE CELULAR — palco cheio também aqui; rótulo e título, nada mais
   ================================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  .movimento .jornada[data-palco="cheio"] [data-lugar] { right: 45%; }
  .movimento .jornada[data-palco="cheio"] [data-zona-mobile="topo"] { top: calc(var(--topo) + 24px); }
  .movimento .jornada[data-palco="cheio"] [data-zona-mobile="base"] { bottom: calc(var(--base) + 20px); }
  .movimento [data-lugar^="esq"], .movimento [data-lugar^="dir"] { width: min(30vw, 320px); }
  .movimento [data-lugar="esq-cima"], .movimento [data-lugar="dir-cima"] { top: 60px; }
  .movimento [data-lugar$="baixo"] { bottom: var(--e-5); }
  .beat--abre { gap: var(--e-2); }
  .beat__titulo { font-size: clamp(1.375rem, 3.8vw, 1.875rem); }
  .beat__texto { display: none; }
}

/* ==================================================================================
   MOVIMENTO REDUZIDO com a sequência ligada por escolha explícita: só opacidade
   (SC 2.3.3: opacidade não é animação de movimento)
   ================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .movimento .beat,
  .movimento [data-lugar$="centro"],
  .movimento [data-lugar] { transform: none !important; }
  .movimento [data-lugar$="centro"] { translate: 0 -50%; }
  .movimento .beat__titulo { clip-path: none !important; transform: none !important; }
  .movimento .beat__texto, .movimento .lado li, .movimento .soma > *, .movimento .soma__legenda { transform: none !important; }
  .movimento .lado::before { transform: none !important; }

}

/* ==================================================================================
   CORES FORÇADAS
   ================================================================================== */
@media (forced-colors: active) {
  .palco__vinheta, .palco__abertura, .palco__contraste { display: none; }
}

.movimento .nuvens-estatica { display: none; }