/* =====================================================================
   Grupo Zen: POSTOS v2 (soma-se ao base.css; o fim da página é do rede.css)
   A página é uma viagem de estrada, na paleta "Asfalto e Brasa":
   - topo: o sol se pondo atrás da cobertura ROSÁRIO ("Sete dos oito postos abrem 24 horas.");
   - o palco "Escolha o estado" (o estado da vez abre a largura da letra);
   - a VIAGEM: cada posto tem o nome, um ROLO de fotos do mesmo tamanho (arrasta,
     cada foto abre em tela cheia) e a ficha. No Rosário Premium, a chegada: da
     rodovia até a bomba em quatro fotos, cada uma abrindo de dentro da anterior
     enquanto a página rola;
   - as bandeiras (a bomba 3D da Shell e a da Petrobras, cada uma com o totem em
     tipografia) e o TRR.
   REGRA DE QUADRO: fotos irmãs com o mesmo tamanho e a mesma proporção.
   Rolo: 4:5 no celular, 4:3 no computador (todas as fotos da página iguais).
   O HTML de base é o ESTÁTICO; html.mov liga o movimento (ver BASE.md).

   Rodada v4 (skill design-taste-frontend): sem odômetro "01/08", sem sobretítulo, sem fio de
   1 px, sem sombra e sem degradê (fora UM véu neutro sob o texto de cada foto), sem vidro,
   texto só nos cinco tamanhos da base (--t-display, --t-titulo, --t-chamada, --t-corpo,
   --t-legenda) e no espaço da base (--respiro, --vao, --passo). Exceção de tamanho: a palavra
   que enche o palco (nome do estado, nome do passo da chegada, destinos do TRR),
   sempre limitada por --t-display.
   ===================================================================== */

:root {
  /* cor dos estados que não são a vez (Cal a 55% sobre o Asfalto) */
  --apagado: color-mix(in srgb, var(--texto) 55%, var(--fundo));
  /* os mesmos estados apagados SOBRE FOTO (computador): mais claros, para passar de 3:1 */
  --apagado-foto: color-mix(in srgb, var(--texto) 84%, var(--fundo));
  /* véu chapado sobre as fotos do palco e da chegada, onde há texto pequeno (de .35 a .55) */
  --veu-palco: rgb(20 17 16 / .55);
  --curva: cubic-bezier(.2, .7, .2, 1);
  /* nomes dos estados no palco (celular). A largura 150 é muito larga ("Santa Catarina" mede
     12,7em), então o postos.js mede quanto cada nome pode abrir sem passar da coluna (--larga) */
  --palco-fs: min(var(--t-display), 6.4svh);
  /* rolo de fotos no computador: a altura do quadro 4:3 acompanha a tela */
  --rolo-h: clamp(300px, 56vh, 600px);
}
@media (min-width: 1024px) {
  :root { --palco-fs: min(9vh, 6vw, var(--t-display)); }
}

/* (a compensação das máscaras de linha do SplitText, .linha-mask + .linha-mask, está no
   base.css; o cabeçalho, barra chapada desde o topo, também) */

/* =====================================================================
   1. TOPO
   ===================================================================== */
.topo {
  position: relative; overflow: hidden;
  height: 100svh; min-height: 560px;
  background: var(--fundo); color: var(--texto);
}
.topo__foto { position: absolute; inset: 0; }
.topo__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 40% 50%;
  background: var(--fundo-2);
}
/* em pé: o recorte em pé da mesma cena; o sol e as letras ROSÁRIO ficam no terço esquerdo */
@media (orientation: portrait) {
  .topo__img { object-position: 28% 50%; }
}
/* O ÚNICO degradê da página (a exceção da skill, colour.md §7): véu neutro de Asfalto só sob o texto,
   até 45% da altura da foto.
   Um véu chapado apagaria o pôr do sol, que é a foto; o chão já em sombra pede só este pé. */
.topo__veu {
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: linear-gradient(to top, rgb(20 17 16 / .72), rgb(20 17 16 / 0)); /* taste-skill-ignore: véu neutro só sob o texto (colour.md §7) */
}
.topo__luz { display: none; }
.topo__texto {
  position: absolute; z-index: 2;
  left: var(--m); right: var(--m); bottom: calc(32px + var(--seguro));
}
.topo__titulo {
  font-family: var(--f-titulo); font-stretch: 118%; font-weight: 760;
  /* "Sete abrem" mede ~7,8em a 118%: abaixo de 380 px (coluna de 282 a 340 px) o tamanho acompanha a tela para o título
     ficar em 2 linhas; de 380 px em diante é o token */
  font-size: min(var(--t-display), (100vw - 2 * var(--m)) / 8); line-height: .92; letter-spacing: -.02em;
  text-wrap: balance;
}
.topo__apoio {
  margin-top: var(--passo); max-width: 40ch;
  font-size: var(--t-corpo); line-height: 1.55; text-wrap: pretty;
}
/* "Escolher o estado": no celular, a pílula da largura da coluna (alvo do polegar); a partir de
   600 px, do tamanho do rótulo (larga, ela virava uma barra atravessando a foto no tablet) */
@media (min-width: 600px) {
  .topo__acoes .botao { width: auto; padding-inline: 24px; }
}
@media (min-width: 1024px) {
  .topo__texto { bottom: 8vh; }
}

/* =====================================================================
   2. ESCOLHA O ESTADO: base ESTÁTICA (lista sobre o Asfalto)
   ===================================================================== */
.indice {
  position: relative;
  background: var(--grao), var(--fundo); color: var(--texto);
  padding: var(--respiro) var(--m);
}
.indice__planos { display: none; }
.indice__titulo {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--t-chamada); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance;
}
.estados {
  margin-top: var(--vao);
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--vao);
}
.estado__nome {
  display: inline-block;
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  /* "Santa Catarina" mede 9,13em na largura 112: cabe em --t-titulo na coluna */
  font-size: var(--t-titulo); line-height: .92; letter-spacing: -.012em;
  text-decoration: none; white-space: nowrap;
  text-underline-offset: .12em; text-decoration-thickness: 3px;
  padding-block: 7px;   /* alvo de toque: a linha tem 31 px e a área passa de 44 px (com 6 px ficava 43 em reduzir movimento a 390 px) */
}
.estado__nome:hover { text-decoration-line: underline; text-decoration-color: var(--acento); }
.estado__conta { margin-top: 16px; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; }
.estado__lista { margin-top: 4px; }
.estado__link {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; width: fit-content;
  min-height: 44px; padding-block: 8px;
  text-decoration: none;
}
.estado__posto {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 600;
  font-size: var(--t-chamada); line-height: 1.15; text-wrap: pretty;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.estado__link:hover .estado__posto { text-decoration-thickness: 2px; text-decoration-color: var(--acento); }
.estado__cidade { font-size: var(--t-legenda); line-height: 1.4; color: var(--texto-2); }
/* posto único do estado: a linha de fato (bandeira e horário) embaixo da cidade */
.estado__fato { flex-basis: 100%; font-size: var(--t-legenda); line-height: 1.4; color: var(--texto-2); }

@media (min-width: 1024px) {
  .estados { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--vao); }
}

/* =====================================================================
   2. ESCOLHA O ESTADO com movimento: palco preso por sticky (3 telas: 1 de entrada e 2 de troca)
   Celular: a foto numa faixa em cima, os nomes e a lista no Asfalto embaixo.
   Computador: a foto inteira, os nomes à esquerda e a lista à direita.
   Defesa do WARN "pinned-over-picture" (computador): é o momento aprovado da página; a foto
   leva véu e o texto grande tem 3:1 ou mais sobre ele.
   ===================================================================== */
.mov .indice { padding: 0; height: calc(100svh + 200svh); }
.mov .indice__palco {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  /* a faixa da foto encolhe em tela baixa: a lista da Bahia (5 postos) tem de caber */
  --banda: max(20svh, calc(100svh - 640px));
}
.mov .indice__planos {
  display: block; position: absolute; left: 0; top: 0; width: 100%; height: var(--banda);
  overflow: hidden; background: var(--fundo);
}
.mov .indice__plano {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--espera, var(--fundo)); visibility: hidden;
}
.mov .indice__plano[data-plano="0"] { visibility: visible; }
.mov .indice__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos);
  transform-origin: 50% 50%;
}
/* véu chapado de Asfalto em CADA foto (::after do plano, anda com ela). Celular: nenhum texto
   fica sobre a foto, então o véu é leve */
.mov .indice__plano::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: rgb(20 17 16 / .25);
}
.mov .indice__conteudo {
  position: absolute; z-index: 10;
  left: var(--m); right: var(--m); bottom: calc(24px + var(--seguro));
}
.mov .estados {
  position: relative; display: block; margin-top: 20px;
  /* lugar da lista mais longa (Bahia: contagem + 5 postos com nome e cidade) */
  --lista-h: calc(5 * 58px + 44px);
  padding-bottom: var(--lista-h);
}
.mov .estado__nome {
  display: block; width: max-content; min-height: 44px; padding-block: 0;
  font-size: var(--palco-fs);
  font-stretch: 56%; color: var(--apagado);
  transition: font-stretch .9s var(--curva), color .5s ease;
}
.mov .estado.ativo .estado__nome { font-stretch: var(--larga, 150%); color: var(--texto); }
/* as quatro listas ocupam o mesmo lugar; só a do estado da vez aparece e recebe clique.
   Quem sai some por opacity E por clip-path (depois do fade): sem isso o texto invisível ficaria
   por cima do da vez (covered-text). Não uso visibility de propósito: as listas dos outros
   estados continuam no Tab e no leitor de tela, e o foco nelas rola até o estado (postos.js). */
.mov .estado__postos {
  position: absolute; left: 0; right: 0; top: calc(100% - var(--lista-h)); padding-top: 22px;
  opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0);
  transition: opacity .3s ease, clip-path 0s linear .3s;
}
.mov .estado.ativo .estado__postos {
  opacity: 1; pointer-events: auto; clip-path: inset(-16px);
  transition: opacity .45s ease .12s, clip-path 0s;
}
.mov .estado__lista li {
  transform: translateY(16px);
  transition: transform .7s var(--curva);
}
/* o nome de cada posto também some por opacity no próprio texto (a lista toda já some acima) */
.mov .estado__posto { opacity: 0; transition: opacity .3s ease; }
.mov .estado.ativo .estado__posto { opacity: 1; transition: opacity .45s ease .12s; }
.mov .estado.ativo .estado__lista li { transform: none; }
.mov .estado.ativo .estado__lista li:nth-child(2) { transition-delay: .04s; }
.mov .estado.ativo .estado__lista li:nth-child(3) { transition-delay: .08s; }
.mov .estado.ativo .estado__lista li:nth-child(4) { transition-delay: .12s; }
.mov .estado.ativo .estado__lista li:nth-child(5) { transition-delay: .16s; }
.mov .estado__conta { margin-top: 0; }
.mov .estado__fato { flex-basis: auto; }
.mov .estado__link { flex-direction: column; align-items: flex-start; row-gap: 0; padding-block: 5px; }
.mov .estado__posto { font-size: var(--t-chamada); }
/* celular até 900 px de altura: a lista da Bahia aperta, cada posto com 44 px exatos */
@media (max-width: 1023.98px) and (max-height: 900px) {
  .mov .indice__palco { --banda: max(12svh, calc(100svh - 500px)); }
  .mov .estados { --lista-h: calc(5 * 44px + 36px); margin-top: 14px; }
  .mov .estado__postos { padding-top: 14px; }
  .mov .estado__link { min-height: 44px; padding-block: 2px; }
  .mov .estado__posto { line-height: 1.1; }
  .mov .estado__cidade { line-height: 1.3; }
}
/* Celular e tablet: o lugar da lista é o da Bahia (5 postos). Nos estados de um posto só, o nome
   dele sobe para a letra de título (a escala ocupa o lugar que a lista curta deixava vazio).
   Tablet em pé (600 a 1023 px): a lista da Bahia em duas colunas, então o lugar dela é de 3 linhas
   e a faixa da foto cresce. */
@media (max-width: 1023.98px) {
  .mov .estado__lista li:only-child { grid-column: 1 / -1; }
  .mov .estado__lista li:only-child .estado__posto { font-size: var(--t-titulo); line-height: 1; }
  .mov .estado__lista li:only-child .estado__link { row-gap: 6px; }
  .mov .estado__lista li:only-child .estado__cidade,
  .mov .estado__lista li:only-child .estado__fato { font-size: var(--t-corpo); line-height: 1.3; }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  .mov .indice__palco { --banda: max(20svh, calc(100svh - 524px)); }
  .mov .estado__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); }
  .mov .estados { --lista-h: calc(3 * 58px + 44px); }
}
@media (min-width: 600px) and (max-width: 1023.98px) and (max-height: 900px) {
  .mov .indice__palco { --banda: max(12svh, calc(100svh - 456px)); }
  /* a 600 px a coluna tem ~256 px e "Santa Helena Centro" quebra em 2 linhas: uma fileira mais alta */
  .mov .estados { --lista-h: calc(3 * 48px + 64px); }
}

@media (min-width: 1024px) {
  .mov .indice__palco { --banda: 100%; }
  /* texto sobre a foto: véu chapado mais forte (.55), medido com 4,5:1 ou mais no texto pequeno */
  .mov .indice__plano::after { background: var(--veu-palco); }
  .mov .indice__conteudo { bottom: 8vh; }
  .mov .estados { margin-top: 28px; padding-bottom: 0; }
  .mov .estado__conta { margin-bottom: 8px; }
  .mov .estado__link { flex-direction: column; align-items: flex-start; row-gap: 2px; padding-block: 7px; }
  .mov .estado__cidade, .mov .estado__conta, .mov .estado__fato { color: var(--texto); }
  .mov .estado__nome { color: var(--apagado-foto); }
  .mov .estado__postos {
    left: auto; right: 0; top: auto; bottom: 0; padding-top: 0;
    width: calc((100% - 11 * var(--g)) / 12 * 4 + 3 * var(--g));
  }
}

/* =====================================================================
   3. A VIAGEM: capítulos (estados), em Piche e Asfalto alternados
   ===================================================================== */
.viagem { color: var(--texto); }
.capitulo { padding: var(--respiro) var(--m); background: var(--grao), var(--fundo-2); }
.capitulo:nth-of-type(even) { background: var(--grao), var(--fundo); }
/* o nome do estado: palavra larga em display ("Catarina" mede 5,5em) */
.capitulo__titulo {
  font-family: var(--f-titulo); font-stretch: 150%; font-weight: 650;
  font-size: var(--t-display); line-height: .86; letter-spacing: -.025em;
  text-wrap: balance;
}
.capitulo__apoio { margin-top: var(--passo); max-width: 46ch; text-wrap: pretty; }

/* =====================================================================
   4. A PARADA (um posto): nome, rolo de fotos, ficha e rota
   ===================================================================== */
.parada {
  margin-top: var(--respiro);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.capitulo__cabeca + .parada { margin-top: var(--vao); }

.parada__nome {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--t-titulo); line-height: .95; letter-spacing: -.012em;
  text-wrap: balance;
}
.parada__desc { margin-top: var(--passo); max-width: 40ch; text-wrap: pretty; }

/* ---------- o rolo: kit-galeria (base.js) com fotos do MESMO tamanho ---------- */
.parada__rolo {
  margin: var(--vao) calc(-1 * var(--m)) 0;
  --kg-r: 4 / 5;
  --kg-w: min(78vw, 400px);
}
/* espaço em cima e embaixo para o anel de foco das fotos não ser cortado pelo trilho */
.parada__rolo .kit-galeria__trilho { gap: 12px; padding-block: 8px; }
.rolo__item .quadro > img,
.chegada__quadro .quadro > img { object-position: var(--pos-pe, var(--pos, 50% 50%)); }
.rolo__item figcaption { margin-top: 10px; }
.parada__rolo .kit-galeria__pe { margin-top: 16px; }

/* ficha da parada: "Onde", "Horário"... na MESMA linha do valor, sem fio (rótulo Prata de 15 px,
   valor Cal em negrito) */
.ficha { margin-top: var(--vao); display: grid; row-gap: 14px; }
.ficha__linha { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.ficha dt { font: 400 var(--t-legenda)/1.4 var(--f-texto); color: var(--texto-2); }
.ficha dd { margin: 0; font: 700 var(--t-corpo)/1.45 var(--f-texto); text-wrap: pretty; }
.ficha__complexo { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 2px; }
/* celular bem estreito (320 px): sem espaço para duas colunas, o rótulo vai em cima do valor */
@media (max-width: 359.98px) {
  .ficha__linha { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}
/* celular: a ficha mostra Onde, Horário e Bandeira; o resto abre no botão (postos.js) */
.ficha__mais { display: none; }
@media (max-width: 1023.98px) {
  .ficha--recolhe:not(.ficha--aberta) > .ficha__linha:nth-child(n+4) { display: none; }
  .ficha__mais {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 14px; justify-self: start;
    font: 700 var(--t-corpo)/1.3 var(--f-texto); color: var(--texto);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
    transition: transform .12s ease;
  }
  .ficha__mais:active { transform: scale(.97); }
  .ficha__mais svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .3s var(--curva); }
  .ficha__mais[aria-expanded="true"] svg { transform: rotate(180deg); }
}
.parada .acoes { margin-top: var(--vao); }

/* "Ver mais" da ficha (celular) com o mouse em cima: o mesmo sublinhado do .link */
@media (max-width: 1023.98px) and (hover: hover) {
  .ficha__mais:hover { text-decoration-thickness: 2px; text-decoration-color: var(--acento); }
}

/* foto do rolo com o mouse em cima: a foto chega mais perto dentro do quadro (o quadro não muda) */
@media (hover: hover) and (pointer: fine) {
  .rolo__item .quadro > img, .auditorio__item .quadro > img, .comboio__carro .quadro > img { transition: transform .9s var(--curva); }
  .rolo__item .kit-amplia:hover .quadro > img,
  .auditorio__item .kit-amplia:hover .quadro > img,
  .comboio__carro .kit-amplia:hover .quadro > img { transform: scale(1.045); }
}

/* o clipe do Premium (16:9), depois da ficha no celular */
.parada__video { margin-top: var(--vao); }
.parada__video figcaption { margin-top: 10px; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; }

@media (min-width: 1024px) {
  /* Cada posto é UMA composição: o nome na linha inteira; embaixo, à esquerda (colunas 1 a 5) o texto,
     a ficha e a rota, e à direita (6 a 12) o rolo, que sangra na borda. Antes a ficha ficava numa
     faixa própria embaixo do rolo e sobrava um vão vazio sob o texto, ao lado das fotos (olhar de
     13/10). A 5ª linha (1fr) recebe a altura que o rolo tiver a mais que a coluna de texto: assim as
     linhas do texto não se esticam (item que cruza uma faixa flexível não estica as faixas auto). */
  .parada {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g);
    grid-template-rows: auto auto auto auto 1fr;
    row-gap: 0; align-items: start;
  }
  .parada__cabeca { display: contents; }
  .parada__nome { grid-column: 1 / span 5; grid-row: 1; }   /* nas 5 colunas do texto: as fotos começam AO LADO do nome (sem o número grande, a tela ficava com a metade direita vazia) */
  .parada__desc { grid-column: 1 / span 5; grid-row: 2; margin-top: var(--vao); padding-right: 1vw; }
  /* o rolo começa na coluna 6 e sangra na borda direita; a 2ª foto aparece cortada (convite a arrastar) */
  .parada__rolo {
    grid-column: 6 / -1; grid-row: 1 / -1; min-width: 0;
    margin: 0 calc(-1 * var(--m)) 0 -6px;
    --kg-r: 4 / 3;
    /* a foto seguinte sempre aparece pelo menos 17% na borda (convite a arrastar): a largura da foto é
       a da altura da tela, ou a que deixa essa sobra na coluna do rolo (colunas 6 a 12 até a borda) */
    --rolo-w: calc(100vw - var(--m) - (100vw - 2 * var(--m) - 11 * var(--g)) / 12 * 5 - 5 * var(--g));
    --kg-w: min(calc(var(--rolo-h) * 4 / 3), calc((var(--rolo-w) - var(--g)) / 1.17));
  }
  /* "Santa Helena Centro" (3 palavras) não cabe em 2 linhas nas 5 colunas de 1024 a 1440 px: só o nome dele
     volta à linha inteira, e as fotos descem para baixo dele (a composição de antes) */
  #santa-helena-centro .parada__nome { grid-column: 1 / -1; }
  #santa-helena-centro .parada__rolo { grid-row: 2 / -1; margin-top: var(--vao); }
  .parada__rolo .kit-galeria__trilho { gap: var(--g); padding: 8px var(--m) 8px 6px; scroll-padding-inline: 6px var(--m); }
  .parada__rolo .kit-galeria__pe { margin: 20px var(--m) 0 6px; }
  .rolo__item .quadro > img,
  .chegada__quadro .quadro > img { object-position: var(--pos, 50% 50%); }

  /* ficha (rótulo e valor na mesma linha) e rota embaixo do texto, ao lado das fotos */
  .parada .ficha { grid-column: 1 / span 5; grid-row: 3; margin-top: var(--vao); }
  .ficha__linha { grid-template-columns: 7.6rem minmax(0, 1fr); column-gap: var(--g); }
  .parada .acoes { grid-column: 1 / span 5; grid-row: 4; margin-top: var(--vao); flex-direction: column; align-items: flex-start; gap: var(--passo); }

  /* Rosário Premium: cabeça larga, o palco "do alto", o rolo inteiro; embaixo, a ficha e a rota à
     esquerda e o clipe dos lavatórios à direita; por último o auditório */
  .parada--premium { grid-template-rows: none; }
  .parada--premium .parada__cabeca {
    grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: end;
  }
  .parada--premium .parada__nome { grid-column: 1 / span 8; grid-row: 1; font-size: var(--t-display); }
  .parada--premium .parada__desc { grid-column: 9 / -1; grid-row: 1; margin-top: 0; padding-right: 0; }
  .parada--premium .chegada { grid-column: 1 / -1; grid-row: 2; }
  /* o rolo do Premium vai de margem a borda: duas fotos e 30% da terceira */
  .parada--premium .parada__rolo { grid-column: 1 / -1; grid-row: 3; margin-left: -6px; --kg-w: min(calc(var(--rolo-h) * 4 / 3), calc((100vw - var(--m) - 2 * var(--g)) / 2.3)); }
  .parada--premium .ficha { grid-row: 4; }
  .parada--premium .acoes { grid-row: 5; }
  .parada--premium .parada__video { grid-column: 6 / -1; grid-row: 4 / span 2; margin-top: var(--vao); }
  .parada--premium .auditorio { grid-column: 1 / -1; grid-row: 6; }
}

/* =====================================================================
   5. ROSÁRIO PREMIUM: A CHEGADA, da rodovia até a bomba, em quatro fotos
   (rodovia, pátio, pista, bomba). A home já mostra o complexo de dia, ao pôr
   do sol e à noite; aqui são outras fotos e outro movimento.
   ESTÁTICO: uma fileira 4:3 da base (tira no celular), legenda embaixo.
   COM MOVIMENTO: palco preso (3 telas). Cada foto nova abre numa janela que
   nasce do ponto da foto anterior para onde a câmera vai (clip-path, sem moldura),
   e a anterior chega perto desse ponto (transform). Embaixo, os quatro nomes; o da
   vez abre a largura da letra, como os estados. O título da área é só para o leitor
   de tela (h4 .sr-only no HTML).
   ===================================================================== */
.chegada { margin-top: var(--vao); }
.chegada__legenda { display: none; }
.chegada__quadro figcaption { margin-top: 10px; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; }
.chegada__nome { color: var(--texto); font-weight: 700; }

.mov .chegada {
  position: relative; height: calc(100svh + 200svh);
  margin-inline: calc(-1 * var(--m));
  --passo-fs: min(9.6vw, 4.4svh, var(--t-display));
}
/* celular e tablet em pé: a foto numa faixa, os nomes no Asfalto embaixo dela */
.mov .chegada__palco {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: calc(var(--cab-h) + 12px) 0 calc(18px + var(--seguro));
}
.mov .chegada__tela {
  position: relative; display: block; flex: none; width: 100%;
  height: min(100vw, calc(100svh - var(--cab-h) - 330px)); min-height: 220px;
  margin: 0; padding: 0; overflow: hidden; scroll-snap-type: none;
}
/* as quatro fotos empilhadas; a de cima é a mais perto da bomba */
.mov .chegada__quadro {
  position: absolute; inset: 0; width: auto; margin: 0;
  visibility: hidden;
}
.mov .chegada__quadro[data-passo="0"] { visibility: visible; }
.mov .chegada__quadro .kit-amplia,
.mov .chegada__quadro .quadro { position: absolute; inset: 0; aspect-ratio: auto; }
/* a legenda de cada foto continua no leitor de tela; na tela vale a lista de nomes */
.mov .chegada__quadro figcaption {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; /* taste-skill-ignore: texto só para leitor de tela, não é fio */
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mov .chegada__quadro .kit-amplia::after { top: 12px; bottom: auto; z-index: 3; }
/* o link ocupa o palco inteiro (o anel de fora seria cortado e a foto cobriria o de dentro):
   o foco é um quadro por cima da foto, com o mesmo anel duplo da base (Brasa e fio Cal) */
.mov .chegada__quadro .kit-amplia:focus-visible { outline: none; box-shadow:none; }
.mov .chegada__quadro .kit-amplia:focus-visible::before {
  content: ""; position: absolute; z-index: 4; inset: 8px; pointer-events: none;
  border: 3px solid var(--acento); box-shadow: 0 0 0 2px var(--texto), inset 0 0 0 2px var(--texto); /* taste-skill-ignore: anel de foco, só em :focus-visible */
}
.mov .chegada__legenda { display: block; flex: none; margin: 0 var(--m); position: relative; z-index: 6; }
.chegada__passos { display: grid; row-gap: .04em; margin: 0; padding: 0; list-style: none; }
.mov .chegada__passo {
  position: relative; width: max-content;
  font-family: var(--f-titulo); font-weight: 700; font-stretch: 56%;
  font-size: var(--passo-fs); line-height: .98; letter-spacing: -.012em;
  color: var(--apagado);
  transition: font-stretch .9s var(--curva), color .5s ease;
}
.mov .chegada__passo.ativo { font-stretch: 150%; color: var(--texto); }
.mov .chegada__notas { display: grid; margin-top: 10px; }
.mov .chegada__nota {
  grid-area: 1 / 1; max-width: 46ch;
  font-size: var(--t-corpo); line-height: 1.4; color: var(--texto-2);
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .5s var(--curva);
}
.mov .chegada__nota.ativo { opacity: 1; transform: none; transition-delay: .12s; }

/* computador deitado: a foto ocupa a tela inteira e os nomes ficam sobre ela */
@media (min-width: 1024px) and (orientation: landscape) {
  .mov .chegada { --passo-fs: var(--palco-fs); }
  .mov .chegada__palco { display: block; padding: 0; }
  .mov .chegada__tela { position: absolute; inset: 0; width: auto; height: auto; min-height: 0; }
  .mov .chegada__legenda { position: absolute; left: var(--m); right: var(--m); bottom: 8vh; margin: 0; }
  .mov .chegada__nota { color: var(--texto); }
  .mov .chegada__passo { color: var(--apagado-foto); }
  /* véu chapado sobre a foto, sob os nomes e a nota */
  .mov .chegada__palco::after {
    content: ""; position: absolute; z-index: 5; pointer-events: none; inset: 0;
    background: var(--veu-palco);
  }
  .mov .chegada__quadro .kit-amplia::after { top: calc(var(--cab-h) + 20px); right: var(--m); }
}

/* ---------- auditório (dentro do Rosário Premium) ---------- */
.auditorio {
  margin-top: var(--respiro);
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--vao);
}
.auditorio__titulo {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--t-chamada); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance;
}
.auditorio__p { margin-top: var(--passo); max-width: 40ch; }
/* o que o auditório tem: sem marcador nem fio (o espaço separa); no computador, em letra de chamada
   na coluna da direita, como o "o que vai junto" do TRR */
.auditorio__lista { margin-top: var(--passo); display: grid; row-gap: 12px; max-width: 46ch; }
.auditorio__lista li { font-size: var(--t-corpo); line-height: 1.45; }
@media (min-width: 1024px) {
  .auditorio__lista { row-gap: 16px; max-width: 30em; }
  .auditorio__lista li {
    font-family: var(--f-titulo); font-stretch: 100%; font-weight: 600;
    font-size: var(--t-chamada); line-height: 1.2; text-wrap: pretty;
  }
}
.auditorio__texto .link { display: inline-block; margin-top: var(--vao); }
.auditorio__item figcaption { margin-top: 10px; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; }
@media (min-width: 1024px) {
  .auditorio {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start;
  }
  /* a lista (à direita) é mais alta que o título e o texto: a 4ª linha (1fr) recebe a diferença,
     e o link não se afasta do texto */
  .auditorio__texto { grid-column: 1 / span 12; display: grid; grid-template-columns: subgrid; grid-template-rows: auto auto auto 1fr; align-items: start; }
  .auditorio__texto > .auditorio__titulo { grid-column: 1 / span 5; }
  .auditorio__texto > .auditorio__p { grid-column: 1 / span 5; grid-row: 2; }
  /* a lista começa na coluna 6, a mesma borda do rolo e do vídeo logo acima */
  .auditorio__texto > .auditorio__lista { grid-column: 6 / -1; grid-row: 1 / -1; margin-top: 4px; }
  .auditorio__texto > .link { grid-column: 1 / span 5; grid-row: 3; justify-self: start; }
  .auditorio__fotos { grid-column: 1 / -1; }
}

/* =====================================================================
   6. AS BANDEIRAS: as duas bombas 3D (Shell e Petrobras) e, embaixo de cada
   uma, o nome, a lista de combustíveis (o "totem"), o lubrificante e os postos
   da bandeira. Lado a lado a partir de 720 px, com as duas colunas do mesmo tamanho
   (as cinco linhas de cada coluna são uma subgrade: nome com nome, lista com lista).
   O palco da bomba: um campo chapado de Asfalto (degrau de tom sobre o Piche da seção);
   pôster (foto da própria cena) até o 3D ficar pronto; com "reduzir movimento" ou em
   aparelho fraco fica o pôster (tools/cena3d/LEIA-SITE-NOVO.md).
   ===================================================================== */
.bomba {
  background: var(--grao), var(--fundo-2); color: var(--texto);
  padding: var(--respiro) var(--m);
}
/* o título é PROPOSTA de corte (agente dos títulos); a medida é a coluna inteira */
.bomba__apoio { margin-top: var(--passo); max-width: 52ch; text-wrap: pretty; }

.bandeiras {
  /* proporção do palco (largura ÷ altura). Tem de ficar entre 0,87 e 1,44: nessa faixa a
     câmera da cena enquadra pela altura e o pôster (1,44, "cover") só perde as laterais
     vazias, então a troca pôster → 3D não pula. 1 no celular, 1,2 no computador. */
  --b-r: 1;
  /* o palco nunca passa desta altura: em tela baixa ele fica mais estreito que a coluna
     (centrado), sem sair da faixa de proporção */
  --b-hmax: 72svh;
  margin-top: var(--vao);
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--respiro);
}
.bandeira { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }

/* o palco: campo Asfalto sem luz e sem chão desenhado. A bomba sobe do chão na entrada, por
   isso o palco corta (overflow). */
.bandeira__palco { position: relative; overflow: hidden; background: var(--fundo); }
.bomba3d {
  position: relative; overflow: hidden;
  width: 100%; max-width: calc(var(--b-hmax) * var(--b-r)); margin-inline: auto;
  aspect-ratio: var(--b-r);
  /* névoa da cena (só tinge o logo do fundo) na cor do palco */
  --fundo-cena: var(--fundo);
}
.bomba3d > [data-poster] { position: absolute; inset: 0; background: 50% 50% / cover no-repeat; }
.bomba3d > [data-poster="shell"] { background-image: url(/img/cena3d/poster-shell-escuro.webp); }
.bomba3d > [data-poster="petro"] { background-image: url(/img/cena3d/poster-petro-escuro.webp); }
/* o script põe data-3d quando a cena INTEIRA está pronta e troca no mesmo quadro */
.bomba3d[data-3d] > [data-poster] { visibility: hidden; }

.bandeira__nome {
  margin-top: var(--passo);
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--t-titulo); line-height: .9; letter-spacing: -.012em; text-wrap: balance;
}
/* o totem: uma linha por combustível, em letra estreita e alta; sem fio, o espaço separa */
.bandeira__produtos { margin-top: var(--passo); }
.bandeira__produtos li {
  padding: .1em 0 .06em;
  font-family: var(--f-titulo); font-stretch: 62%; font-weight: 600;
  font-size: var(--t-titulo); line-height: 1.04; letter-spacing: .004em;
}
.bandeira__oleo {
  margin-top: var(--passo); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px;
}
.bandeira__rotulo { color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; }
.bandeira__marca {
  font-family: var(--f-titulo); font-stretch: 100%; font-weight: 700;
  font-size: var(--t-chamada); line-height: 1.1;
}
/* os postos da bandeira, por último (nenhum título embaixo): pílulas Grafite (alvo de 44 px),
   cada uma leva ao posto nesta página */
.bandeira__onde { margin-top: var(--vao); }
.bandeira__quantos { color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; }
.bandeira__postos { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.bandeira__posto {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 999px; background: var(--superficie); color: var(--texto);
  font: 500 var(--t-legenda)/1.2 var(--f-texto); text-decoration: none;
  transition: background-color .18s ease, transform .12s ease;
}
.bandeira__posto:hover { background: color-mix(in srgb, var(--texto) 14%, var(--superficie)); }
.bandeira__posto:active { transform: scale(.97); }

@media (min-width: 600px) { .bandeiras { --b-r: 1.2; } }
/* lado a lado: duas colunas iguais; cada coluna é uma subgrade das cinco linhas
   (palco, nome, totem, lubrificante, postos), então as duas têm a mesma altura e as
   linhas se alinham (a lista mais curta, a da Petrobras, deixa o vão embaixo dela) */
@media (min-width: 720px) {
  .bandeiras {
    --b-r: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--g) * 2); row-gap: 0;
  }
  .bandeira { grid-row: 1 / span 5; grid-template-rows: subgrid; row-gap: 0; }
  .bandeira--shell { grid-column: 1; }
  .bandeira--petrobras { grid-column: 2; }
}
@media (min-width: 1024px) {
  .bandeiras { --b-r: 1.2; --b-hmax: 64svh; column-gap: calc(var(--g) * 2.5); }
}

/* =====================================================================
   7. TRR FABIANDRA: quatro tempos: a cabeça; a BASE (a plataforma ROSÁRIO DIESEL
   em largura inteira); o COMBOIO (cinco fotos 3:2 do mesmo tamanho: quatro de
   caminhão e a dos tanques; 1:1 no celular em pé);
   onde entrega (quatro palavras grandes), o que vai junto e a cotação.
   ESTÁTICO: a foto inteira; o comboio é uma fileira (3 + 2) no computador e uma
   tira de rolagem lateral até 1023 px (cada foto abre em tela cheia).
   COM MOVIMENTO: a foto abre de uma janela na boca da plataforma até a largura
   inteira (postos.js, cabine()); o comboio vira um palco preso em que a fila
   atravessa a tela na horizontal enquanto a página rola (comboio()).
   Fotos: só as do grupo "Fabiandra" do /FROTA.md.
   ===================================================================== */
.trr {
  background: var(--grao), var(--fundo); color: var(--texto);
  padding: var(--respiro) var(--m);
}
.trr__cabeca { display: grid; grid-template-columns: minmax(0, 1fr); }
/* O título é o nome (era o sobretítulo "TRR Fabiandra"); a frase do cliente ("Diesel entregue onde
   a sua operação está.") ficou inteira, como frase grande em <p> (statement da skill), porque como título
   passava de 2 linhas em todo celular e tablet. Fica logo embaixo do nome, no tamanho máximo de frase
   (36 px no computador, 24 px no celular). Se o cliente aceitar o corte "Diesel onde você opera.",
   ela volta a ser o título. */
.trr__frase {
  margin-top: var(--passo); max-width: 24em;
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: 24px; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance;
}
.trr__apoio { margin-top: var(--passo); max-width: 44ch; text-wrap: pretty; }
/* computador: cabeça dividida, como a do Rosário Premium: o nome e a frase do cliente à esquerda (colunas 1 a 8)
   e, à direita (9 a 12, a mesma borda do texto do Premium), o apoio, alinhado pela base da frase */
@media (min-width: 1024px) {
  .trr__cabeca { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; }
  .trr__titulo { grid-column: 1 / span 8; grid-row: 1; align-self: end; }
  .trr__frase { grid-column: 1 / span 8; grid-row: 2; margin-top: var(--passo); max-width: none; font-size: 36px; }
  .trr__apoio { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: end; margin-top: 0; }
}

/* ---------- a BASE: a plataforma ROSÁRIO DIESEL em largura inteira ----------
   Cinema (a foto já nasce em 2,39:1); no celular em pé, o recorte 4:5 da mesma foto.
   O quadro para em 1536 px: até aí sangra nas duas bordas; acima, para de crescer e fica centrado
   (a margem negativa vira positiva sozinha, sem degrau). */
.trr__capa {
  position: relative; overflow: hidden;
  margin-top: var(--vao);
  margin-inline: max(calc(-1 * var(--m)), calc((100% - 1536px) / 2));
  aspect-ratio: 2.39 / 1;
  background: var(--espera);
}
@media (orientation: portrait) and (max-width: 599.98px) { .trr__capa { aspect-ratio: 4 / 5; } }
.trr__capa picture, .trr__capa-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.trr__capa-img { max-width: none; object-fit: cover; object-position: 50% 50%; }

/* ---------- o COMBOIO (estático: fileira 3 × 2; tira até 1023 px) ---------- */
.comboio { margin-top: var(--respiro); }
.comboio__topo { margin-bottom: var(--vao); }
.comboio__titulo {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--t-chamada); line-height: 1.1; letter-spacing: -.01em;
  text-wrap: balance;
}
.comboio__fila { --fileira-n: 3; --fileira-n-meio: 2; --fileira-w: min(78vw, 460px); row-gap: var(--vao); }
/* --cb-r: a proporção das cinco fotos (largura ÷ altura). 3:2 (as fotos já nascem assim);
   no celular em pé, 1:1: o caminhão fica 50% mais alto e enche o palco (crítica de 13/10:
   em 3:2 a foto tinha 218 px de altura numa tela de 844, e o resto era Asfalto vazio).
   Os recortes 1:1 com o --pos de cada foto foram conferidos (nenhum caminhão sai do quadro). */
.comboio { --cb-r: 1.5; }
@media (orientation: portrait) and (max-width: 599.98px) { .comboio { --cb-r: 1; } }
.comboio__carro .quadro { aspect-ratio: var(--cb-r); }
.comboio__carro figcaption { margin-top: 10px; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; }
/* barra e contador: só no palco (com movimento). Barra de 4 px, trilho Grafite */
.comboio__pe { display: none; }
.comboio__barra { position: relative; flex: 1; height: 4px; background: var(--superficie); overflow: hidden; }
.comboio__barra > span {
  position: absolute; inset: 0; background: var(--texto);
  transform-origin: 0 50%; transform: scaleX(0);
}
.comboio__conta {
  font: 400 var(--t-legenda)/1.4 var(--f-texto); color: var(--texto-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- onde entrega, o que vai junto e a cotação ---------- */
.trr__pedido { margin-top: var(--respiro); display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--vao); }
.trr__onde-titulo {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--t-chamada); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance;
}
.trr__destinos { margin-top: var(--passo); }
/* "Pátio de frota", a mais comprida, mede ~8,4em na largura 112 (medido a 1440): a fonte
   é a coluna dividida por 8,7, e cada destino fica numa linha só. Sem fio: o tamanho separa */
.trr__destino {
  display: block; padding: .1em 0 .06em;
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: min(var(--t-display), calc((100vw - 2 * var(--m)) / 8.7)); line-height: 1; letter-spacing: -.012em;
  white-space: nowrap;
}
.trr__servicos { display: grid; row-gap: 12px; }
.trr__servicos li {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 600;
  font-size: var(--t-chamada); line-height: 1.25;
}
.trr__junto .acoes { margin-top: var(--vao); }
.trr__nota { margin-top: 16px; max-width: 40ch; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; text-wrap: pretty; }
@media (min-width: 1024px) {
  .trr__pedido { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; }
  .trr__onde { grid-column: 1 / span 8; }
  .trr__junto { grid-column: 9 / -1; }
  /* a coluna das palavras tem 8 de 12 colunas: (8 colunas + 7 calhas) / 8,7 */
  .trr__destino { font-size: min(var(--t-display), calc(((100vw - 2 * var(--m) - 11 * var(--g)) / 12 * 8 + 7 * var(--g)) / 8.7)); }
}

/* =====================================================================
   MOVIMENTO (só com html.mov)
   ===================================================================== */
/* Entrada do topo: a tela começa no Asfalto, a luz acende e o título, o apoio e o botão entram.
   É tudo CSS, para começar no primeiro quadro, sem esperar fonte nem script (o apoio é o LCP).
   Chegando com âncora (ou com um gesto no meio), html.sem-abertura corta tudo. */
.mov .topo__luz {
  display: block; position: absolute; z-index: 1; inset: 0; background: var(--fundo); pointer-events: none;
  animation: luz-acende 1.4s cubic-bezier(.3, .1, .3, 1) .15s both;
}
.mov .topo__img {
  transform-origin: 50% 45%;
  animation: topo-chega 2.8s cubic-bezier(.16, 1, .3, 1) both;
}
/* o cabeçalho entra quando o céu já clareou */
.mov .cab { animation: cab-entra .7s ease .85s both; }
.mov .cab:focus-within { animation: none; }
/* o título sobe da máscara (as duas linhas juntas); o apoio e o botão chegam logo depois.
   Os atrasos partem de --topo-d (.55 s; o <head> encurta se as fontes demoraram). Até as fontes
   chegarem (html.topo-pode, no <head>, teto de 1,5 s) o texto espera escondido: a fonte reserva
   é mais estreita e a troca de letra aparece. O <br> do título garante 2 linhas nas duas fontes. */
.mov .topo__titulo { overflow: clip; padding-block: .1em; margin-block: -.1em; }
.mov .topo__linhas { display: block; animation: topo-sobe 1s cubic-bezier(.16, 1, .3, 1) var(--topo-d, .55s) backwards; }
.mov .topo__apoio { animation: topo-apoio .7s cubic-bezier(.33, 1, .68, 1) calc(var(--topo-d, .55s) + .6s) backwards; }
.mov .topo__acoes { animation: topo-apoio .7s cubic-bezier(.33, 1, .68, 1) calc(var(--topo-d, .55s) + .69s) backwards; }
.mov:not(.topo-pode):not(.sem-abertura) .topo__titulo,
.mov:not(.topo-pode):not(.sem-abertura) .topo__apoio,
.mov:not(.topo-pode):not(.sem-abertura) .topo__acoes { visibility: hidden; }
@keyframes luz-acende { to { opacity: 0; } }
@keyframes topo-chega { from { transform: scale(1.12); } }
@keyframes cab-entra { from { opacity: 0; } }
@keyframes topo-sobe { from { transform: translateY(110%); } }
@keyframes topo-apoio { from { opacity: 0; transform: translateY(14px); } }
.sem-abertura .topo__luz { display: none; }
.sem-abertura .topo__img,
.sem-abertura .cab,
.sem-abertura .topo__linhas,
.sem-abertura .topo__apoio,
.sem-abertura .topo__acoes,
.mov .topo__texto:focus-within .topo__acoes { animation: none; }

/* AS BANDEIRAS: a bomba sobe do chão e a lista acende linha a linha, como o visor.
   O postos.js põe .palco--espera / .totem--espera uma tela antes (fora da vista) e troca por
   --entra quando chega. Só transform e opacity em transição de CSS: correm no compositor e
   não param se a montagem do 3D ocupar a página nesse meio-tempo. */
.mov .palco--espera .bomba3d { opacity: 0; transform: translateY(22%); }
.mov .palco--entra .bomba3d { transition: opacity .8s ease .1s, transform 1.3s cubic-bezier(.16, 1, .3, 1) .1s; }
.mov .totem--espera li { opacity: .18; }
.mov .totem--entra li { transition: opacity .45s ease calc(var(--i, 0) * 75ms); }
/* lado a lado as duas entram juntas; a Petrobras um passo depois */
@media (min-width: 720px) {
  .mov .bandeira--petrobras .palco--entra .bomba3d { transition-delay: .24s, .24s; }
  .mov .bandeira--petrobras .totem--entra li { transition-delay: calc(140ms + var(--i, 0) * 75ms); }
}
/* com o mouse numa coluna, a outra recua: a bomba da vez (que se inclina com o ponteiro) fica
   em destaque. .72 mantém o texto da outra coluna acima de 4,5:1. */
@media (hover: hover) and (pointer: fine) and (min-width: 720px) {
  .mov .bandeira { transition: opacity .5s var(--curva); }
  .mov .bandeiras:has(.bandeira:hover) .bandeira:not(:hover) { opacity: .72; }
}

/* TRR, A BASE: antes de o postos.js montar, a foto já espera na janela da boca da plataforma
   (o script abre a janela conforme a página rola). Janela em % da foto: a placa ROSÁRIO DIESEL
   e o vão entre as escadas, um pouco à direita do meio. */
.mov:not(.pronto) .trr__capa { clip-path: inset(26% 23% 40% 46% round 20px); }
@media (orientation: portrait) and (max-width: 599.98px) {
  .mov:not(.pronto) .trr__capa { clip-path: inset(22% 18% 46% 14% round 16px); }
}

/* TRR, O COMBOIO com movimento: palco preso (sticky); a fila inteira anda na horizontal enquanto
   a página rola (postos.js). --cb-w é a largura de cada foto (3:2; 1:1 no celular em pé), limitada pela altura da tela
   para o palco caber; a altura do bloco é a tela + o curso da fila (x .72: a fila anda um
   pouco mais rápido que a rolagem). */
.mov .comboio {
  --cb-gap: var(--g);
  --cb-w: min(84vw, 420px, (100svh - 330px) * var(--cb-r));
  position: relative;
  margin-inline: calc(-1 * var(--m));
  height: calc(100svh + (var(--n, 6) * var(--cb-w) + (var(--n, 6) - 1) * var(--cb-gap) + 2 * var(--m) - 100vw) * .72);
}
@media (min-width: 600px) { .mov .comboio { --cb-w: min(70vw, 600px, (100svh - 340px) * 1.5); } }
@media (min-width: 1024px) and (orientation: landscape) { .mov .comboio { --cb-w: min(48vw, (100svh - 370px) * 1.5); } }
@media (min-width: 1024px) and (orientation: portrait) { .mov .comboio { --cb-w: min(70vw, 760px, (100svh - 370px) * 1.5); } }
/* overflow: clip (não hidden): o foco do Tab numa foto fora da tela não rola o palco por dentro */
.mov .comboio__palco {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--cab-h) + 12px) 0 calc(16px + var(--seguro));
}
.mov .comboio__topo { flex: none; margin: 0 var(--m) clamp(20px, 4svh, 44px); }
.mov .comboio__fila {
  flex: none; position: relative;
  display: flex; gap: var(--cb-gap); width: max-content;
  margin: 0; padding: 0 var(--m);
  overflow: visible; scroll-snap-type: none;
}
.mov .comboio__carro { flex: none; width: var(--cb-w); }
.mov .comboio__carro figcaption { margin-top: 34px; }
/* a foto anda dentro do quadro (paralaxe pelo script): sem transição de CSS por cima */
.mov .comboio__carro .quadro > img { transition: none; }
/* o tracejado da pista, embaixo das fotos, ao longo da fila inteira (decoração; anda com ela):
   traços de 4 px desenhados em SVG, sem degradê */
.mov .comboio__fila::after {
  content: ""; position: absolute; left: 0; right: 0; height: 4px;
  top: calc(var(--cb-w) / var(--cb-r) + 14px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='4'%3E%3Crect width='40' height='4' fill='%23BCBDC0' fill-opacity='.45'/%3E%3C/svg%3E") repeat-x 0 0 / 76px 4px;
  pointer-events: none;
}
.mov .comboio__pe {
  flex: none; display: flex; align-items: center; gap: 20px;
  margin: clamp(16px, 3svh, 32px) var(--m) 0;
}
/* tela baixa (celular pequeno): o título do palco com menos folga */
@media (max-width: 1023.98px) and (max-height: 700px) {
  .mov .comboio__titulo { margin-top: 0; }
}

/* TRR, ONDE ENTREGA: as palavras chegam da direita (a mesma direção do comboio).
   Preparado pelo postos.js uma tela antes (.destinos--espera). */
.mov .destinos--espera .trr__destino { opacity: 0; transform: translateX(14vw); }
.mov .destinos--entra .trr__destino {
  transition: opacity .7s ease calc(var(--i, 0) * 90ms), transform 1.1s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 90ms);
}

/* o selo "Arraste" que acompanha o mouse sobre os rolos (criado pelo postos.js; só mouse e movimento).
   Pílula redonda de Cal, sem sombra */
.rolo-cursor {
  position: fixed; z-index: 40; left: 0; top: 0;
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--texto); color: var(--fundo);
  font: 700 var(--t-legenda)/1 var(--f-texto);
  pointer-events: none; opacity: 0; visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .rolo__item .quadro > img, .auditorio__item .quadro > img, .comboio__carro .quadro > img { transition: none; transform: none !important; }
  .bandeira__posto, .ficha__mais { transition: none; }
  .ficha__mais svg { transition: none; }
}

/* =====================================================================
   CELULAR DEITADO (sempre estático): medidas pela altura
   ===================================================================== */
@media (orientation: landscape) and (max-height: 539px) {
  .topo { min-height: 0; }
  .topo__titulo { font-size: var(--t-titulo); }
  .topo__apoio { margin-top: 12px; }
  .parada__rolo { --kg-r: 4 / 3; --kg-w: calc(62svh * 4 / 3); }
  .rolo__item .quadro > img { object-position: var(--pos, 50% 50%); }
  .chegada__tela, .auditorio__fotos { --fileira-w: calc(56svh * 4 / 3); }
  .chegada__quadro .quadro > img { object-position: var(--pos, 50% 50%); }
  .comboio__fila { --fileira-w: calc(56svh * 3 / 2); }
  /* o palco da bomba cabe na tela deitada (fica mais estreito que a coluna, centrado) */
  .bandeiras { --b-hmax: 76svh; }
}

/* =====================================================================
   TOQUE (até 1023 px e telas de toque): links da ficha empilhados ganham vão
   ===================================================================== */
@media (max-width: 1023.98px), (pointer: coarse) {
  /* o link da ficha tem ~20 px de caixa: a área de toque cresce 12 px em cima e embaixo (44 px)
     e o vão de 24 px entre eles impede que as áreas se cruzem */
  .ficha__complexo { flex-direction: column; row-gap: 24px; padding-top: 10px; }
  .ficha__complexo .link::before { inset: -12px -8px; }
  /* o link no meio do texto (base do TRR; o .bomba__apoio não tem mais link): ~22 px de caixa + 24 = 46 px.
     O nome vai inteiro numa linha (.inteiro), então a área é uma caixa só. */
  .bomba__apoio .link::before, .trr__apoio .link::before { inset: -12px -6px; }
}