/* =====================================================================
   Grupo Zen: HOME "Filme de estrada" (soma-se ao base.css)
   Três modos, com as mesmas media queries do home.js:
   - PALCO LARGO  (min-width:1024px) and (orientation:landscape) and (min-height:540px), com movimento
   - PALCO EM PÉ  todo o resto, com movimento
   - ESTÁTICO     reduzir movimento, sem JS ou celular deitado
   O HTML de base é o ESTÁTICO; html.mov liga o filme.
   Ordem da página e fundos (alternando Asfalto e Piche):
   filme (Asfalto) → Complexo Premium: palco (Piche) e estrutura (Asfalto) →
   Nordeste e Sul (Piche) → Safe (Asfalto) → bloco da rede (Piche, rede.css) → contato.
   (A ficha de créditos saiu: repetia o bloco da rede uma tela antes.)
   ===================================================================== */

:root {
  /* A frase do filme é um STATEMENT (um <p>), não um título: no máximo 24 px no celular, 32 px no
     tablet e 36 px no computador (regra da skill), e as quebras são as do HTML (white-space: nowrap
     com movimento). Celular em pé: "Posto," / "restaurante," / "Haru Joy e hotel." (a linha mais
     larga mede ~10em, cabe em 320 px com 6,2vw). */
  --frase: min(6.2vw, 3.4svh, 24px);
  --frase-n: 3;          /* linhas da frase com movimento (as do HTML): 3 em pé, 2 no palco largo */
  /* entrelinha da frase: com .92 a descendente de uma linha (g, ç, j, p) encostava na
     ascendente da de baixo e, na mesma cor, as letras se fundiam ("chega" parecia cortado) */
  --frase-lh: 1.05;
  --barra: 0px;
  /* palco em pé (celular e tablet com movimento): altura da foto de cima. Com a frase em tamanho de
     statement, as palavras (legenda de 3 linhas + frase de 3 linhas, ou o h1 + apoio) cabem em ~180 px;
     a zona de texto fica com 250 px e a foto ocupa o resto (era 56svh e sobravam ~150 px de Asfalto).
     56svh no mínimo (tela baixa) e 74svh no máximo (tela alta) */
  --foto-pe: clamp(56svh, 100svh - 250px, 74svh);
  /* logo da abertura: largura com que ele aparece no meio da tela */
  --abre-w: clamp(160px, 56vw, 340px);
  /* inserto do filme (foto de detalhe 4:5): largura no celular */
  --inserto-w: min(30vw, 150px);
  /* palco do Complexo Premium: altura da foto no celular (no computador é a tela inteira) */
  --pf-h: min(150vw, 70svh);
}
@media (min-width: 1024px) and (orientation: landscape) and (min-height: 540px) {
  /* No computador a frase do filme volta ao tamanho de título (--t-titulo, 66 px a 1440): com o corte
     "Posto, restaurante, Haru Joy e hotel." (36 caracteres) a linha mais larga, "Posto, restaurante,",
     cabe nas 9 colunas em 2 linhas de 1024 a 1920. O cliente aprovou a versão grande (56 px). */
  :root { --frase: var(--t-titulo); --frase-n: 2; }
}

/* =====================================================================
   1. CABEÇALHO: tudo no base.css (barra chapada de Asfalto desde o topo, sem vidro)
   ===================================================================== */

/* =====================================================================
   2 e 3. O FILME: base ESTÁTICA (sequência vertical sobre Asfalto)
   ===================================================================== */
.filme {
  position: relative;
  background: var(--grao), var(--fundo); color: var(--texto);
}
.palco { position: relative; padding-bottom: var(--respiro); }
.plano { margin: 0; }
.plano__quadro {
  position: relative; overflow: hidden;
  background: var(--espera-pe, var(--espera));
}
.plano__img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos-pe);
}
.plano__veu, .plano__noite, .plano__escuro,
.barra, .cortina, .abre-logo { display: none; }

/* plano 0 = topo comum */
.plano[data-plano="0"] .plano__quadro { height: 56svh; }
.topo { padding: 24px var(--m) 0; }
/* "8 postos em" / "4 estados." em duas linhas em qualquer largura: em pé a largura da letra é a do
   token (112%) e o tamanho não passa da coluna ÷ 7,6 ("8 postos em" mede 7,4em a 112%): a 390 px fica
   no token (44 px); só abaixo de ~370 px ele acompanha a tela. No palco largo volta a 118%. */
.topo__titulo {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 760;
  font-size: min(var(--t-display), 5.6svh, (100vw - 2 * var(--m)) / 7.6); line-height: .9; letter-spacing: -.02em;
}
.topo__apoio {
  margin-top: 16px; max-width: 46ch;
  font-size: var(--t-corpo); line-height: 1.55; text-wrap: pretty;
}

/* o topo troca de foto pela orientação: deitado é a safe-03, que tem o seu enquadramento */
@media (orientation: landscape) {
  .plano[data-plano="0"] .plano__img { object-position: var(--pos); }
  .plano[data-plano="0"] .plano__quadro { background: var(--espera); }
}

/* planos 1 a 6 como figuras */
.plano:not([data-plano="0"]) { margin: var(--vao) var(--m) 0; scroll-margin-top: 16px; }
.plano:not([data-plano="0"]) .plano__quadro { aspect-ratio: 4 / 5; }
.legenda {
  margin-top: 24px; max-width: 46ch;
  font: 500 var(--t-legenda)/1.45 var(--f-texto); text-wrap: pretty;
}
/* INSERTO no estático: a foto de detalhe (4:5) sobe sobre o canto de baixo da foto do
   plano, com um passe-partout de Asfalto (borda chapada de 6 px, não sombra); todos do mesmo tamanho */
.plano:has(.plano__inserto) {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--inserto-w); column-gap: 16px;
  align-items: start;
}
.plano:has(.plano__inserto) .plano__quadro { grid-column: 1 / -1; grid-row: 1; }
.plano__inserto {
  grid-column: 2; grid-row: 2;
  margin: calc(var(--inserto-w) * -.62) 12px 0 0;
  border: 6px solid var(--fundo);
}
.plano:has(.plano__inserto) .legenda { grid-column: 1; grid-row: 2; }
/* a cópia da legenda para o leitor de tela existe só com movimento (no estático a própria .legenda é lida) */
.plano__leitor { display: none; }
.mov .plano__leitor {
  display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; /* taste-skill-ignore: caixa de leitor de tela, não é fio desenhado */
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.frase {
  margin: var(--vao) var(--m) 0;
  font-family: var(--f-titulo); font-stretch: 118%; font-weight: 700;
  font-size: var(--frase); line-height: var(--frase-lh); letter-spacing: -.015em;
}
.fecho {
  margin: var(--passo) var(--m) 0; max-width: 46ch;
  font: 500 var(--t-corpo)/1.45 var(--f-texto);
}

@media (min-width: 1024px) and (orientation: landscape) and (min-height: 540px) {
  :root { --inserto-w: min(18vw, 260px); }
  .plano__img { object-position: var(--pos); }
  .plano__quadro { background: var(--espera); }
  .plano[data-plano="0"] .plano__quadro { height: 100svh; }
  /* véu chapado e leve sobre a foto inteira (medido: o título e o apoio leem a 4,5:1 ou mais) */
  .plano[data-plano="0"] .plano__quadro::after {
    content: ""; position: absolute; inset: 0;
    background: rgb(20 17 16 / .22);
  }
  .topo {
    position: absolute; z-index: 30; top: 0; left: 0; height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 var(--m) 7vh;
  }
  /* 7,4vw, mas limitado pela altura para o título ficar abaixo das rodas da carreta (62% da safe-03) */
  .topo__titulo { font-stretch: 118%; font-size: clamp(52px, min(var(--t-display), calc(17.8vh - 60px)), 124px); }
  .topo__apoio { margin-top: var(--passo); }
  .plano:not([data-plano="0"]) .plano__quadro { aspect-ratio: auto; height: 80svh; }
  .legenda { font-size: var(--t-corpo); }
}

/* =====================================================================
   O FILME com movimento: palco preso por sticky (sem pin)
   ===================================================================== */
.mov .filme { height: calc(100svh + 360svh); }
.mov .palco {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  padding: 0; background: var(--grao), var(--fundo);
}
.mov .plano,
.mov .plano:not([data-plano="0"]) { display: block; margin: 0; }
.mov .plano__quadro,
.mov .plano:not([data-plano="0"]) .plano__quadro,
.mov .plano[data-plano="0"] .plano__quadro {
  position: absolute; top: 0; left: 0; width: 100%; height: var(--foto-pe);
  aspect-ratio: auto; visibility: hidden;
}
.mov .plano[data-plano="0"] .plano__quadro { visibility: visible; z-index: 1; }
.mov .plano[data-plano="1"] .plano__quadro { z-index: 2; }
.mov .plano[data-plano="2"] .plano__quadro { z-index: 3; }
.mov .plano[data-plano="3"] .plano__quadro { z-index: 4; }
.mov .plano[data-plano="4"] .plano__quadro { z-index: 5; }
.mov .plano[data-plano="5"] .plano__quadro { z-index: 6; }
.mov .plano[data-plano="6"] .plano__quadro { z-index: 7; }
.mov .plano__img { position: absolute; inset: 0; transform-origin: 50% 50%; }
/* Os planos ficam empilhados dentro da tela, então loading="lazy" não adiava nada: a home
   baixava 20 fotos (2 MB) antes de a pessoa rolar. Com movimento, a foto de um plano só
   existe para o navegador quando o home.js marca o plano como .perto (o 0 e o 1 já vêm
   marcados; os outros, um por vez depois do load, ou antes, se a rolagem chegar perto). */
.mov .plano:not(.perto) .plano__img,
.mov .plano:not(.perto) .plano__inserto img { display: none; }
/* véus e camadas da noite: só pintam, não recebem clique nem toque (pointer-events: none). Sem isso,
   quem pergunta "o que está neste ponto da tela" (o navegador, o inspetor da skill) achava o véu da cor do
   fundo, e não a foto embaixo: as telas do filme contavam como vazias */
.plano__veu, .plano__noite, .plano__escuro { pointer-events: none; }
.mov .plano__veu { display: block; position: absolute; inset: 0; background: var(--fundo); opacity: 0; }
.mov [data-noite="sim"] .plano__noite {
  display: block; position: absolute; inset: 0;
  background: var(--superficie); mix-blend-mode: multiply; opacity: .3;
}
.mov [data-noite="sim"] .plano__escuro {
  display: block; position: absolute; inset: 0; background: var(--fundo); opacity: 0;
}
/* INSERTO com movimento: entra por máscara depois do corte do plano e sai no corte
   seguinte (home.js). Celular: no canto de baixo à direita da foto. */
.mov .plano__inserto {
  position: absolute; z-index: 12; margin: 0;
  right: var(--m); top: calc(var(--foto-pe) - 16px - var(--inserto-w) * 1.25);
  width: var(--inserto-w);
  clip-path: inset(100% 0% 0% 0%);
}

/* cortinas da abertura (celular: 47% do quadro em cima e embaixo) */
.mov .cortina {
  display: block; position: absolute; z-index: 20; left: 0; width: 100%;
  background: var(--fundo); will-change: transform;
}
/* a fresta do horizonte abre entre as duas cortinas, sem fio nas bordas (o fio de Brasa saiu) */
.mov .cortina--cima { top: 0; height: calc(var(--foto-pe) * .47); transform-origin: 50% 0; }
/* +1px: sem ele a última linha da foto vazava como um fio claro no pé do quadro */
.mov .cortina--baixo { top: calc(var(--foto-pe) * .53); height: calc(var(--foto-pe) * .47 + 1px); transform-origin: 50% 100%; }

/* LOGO DA ABERTURA: aparece grande sobre a fresta do horizonte (no celular, o meio
   do quadro de cima, --foto-pe; no palco largo, 48% da tela) e o home.js o leva, por transform,
   até o lugar exato do logo do cabeçalho. A caixa é a do logo. Solto desde o
   primeiro quadro, sem pílula, sem halo e sem sombra: a variante para fundo escuro
   está no base.css, e a fresta abre em Asfalto (nunca sobre foto clara). */
.mov .abre-logo {
  display: block; position: absolute; z-index: 40; left: 50%; top: calc(var(--foto-pe) / 2);
  width: var(--abre-w);
  margin: calc(var(--abre-w) * -80 / 438) 0 0 calc(var(--abre-w) / -2);
  pointer-events: none; transform-origin: 50% 50%; will-change: transform;
  animation: abre-logo-entra .7s cubic-bezier(.2, .7, .2, 1) .05s backwards;
}

/* zona das palavras (celular: no Asfalto, abaixo do quadro) */
.mov .topo,
.mov .frase,
.mov .legenda,
.mov .fecho {
  position: absolute; z-index: 30; left: var(--m); margin: 0;
}
.mov .topo { right: var(--m); bottom: calc(24px + var(--seguro)); padding: 0; }
.mov .frase {
  right: var(--m); bottom: calc(24px + var(--seguro));
  white-space: nowrap;
}
.mov .legenda,
.mov .fecho {
  right: var(--m); max-width: 46ch;
  bottom: calc(24px + var(--seguro) + var(--frase-n) * var(--frase-lh) * var(--frase) + 16px);
}
/* a legenda do plano que não é o da vez fica escondida de verdade (visibility): só com opacity 0 ela seguia
   "por cima" do título do topo. O leitor de tela lê a frase do palco (cópia .sr-only), como as fotos dos planos. */
.mov .legenda { opacity: 0; visibility: hidden; }
.mov .fecho { font-size: var(--t-legenda); }

/* antes do home.js dividir os textos, nada pisca (o cabeçalho entra com a abertura) */
.mov:not(.pronto) .topo,
.mov:not(.pronto) .frase,
.mov:not(.pronto) .fecho,
.mov:not(.pronto) .cab { visibility: hidden; }

@media (min-width: 1024px) and (orientation: landscape) and (min-height: 540px) {
  .mov .filme { height: calc(100svh + 470svh); }
  .mov .plano__quadro,
  .mov .plano:not([data-plano="0"]) .plano__quadro,
  .mov .plano[data-plano="0"] .plano__quadro { height: 100%; }
  .mov .plano[data-plano="0"] .plano__quadro::after { content: none; }

  /* o véu de leitura é CHAPADO e vive em cada plano (.plano__veu, data-veu no HTML), medido foto a foto:
     a frase lê a 3:1 ou mais e a legenda a 4,5:1 ou mais; o home.js desce o valor do plano 6 no escopo */
  /* EXCEÇÃO DO VÉU (BASE.md, colour.md §7): nos três planos de foto clara de dia o véu chapado apagava o
     céu e o alto da foto (brilho médio 133 para 83). Aqui o véu é UM degradê neutro de Asfalto, linear,
     duas paradas, só nos 45% de baixo, sob a frase e a legenda. A legenda ainda leva a tarja. */
  .mov .plano__veu--sob {
    top: 55%;
    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) */
  }
  .mov .plano[data-plano="1"] .legenda,
  .mov .plano[data-plano="2"] .legenda,
  .mov .plano[data-plano="3"] .legenda {
    background: var(--veu-tarja); padding: 6px 14px; margin-left: -14px; width: fit-content;
  }
  .mov .barra {
    display: block; position: absolute; z-index: 20; left: 0; width: 100%;
    height: var(--barra); background: var(--fundo); transform: scaleY(0);
  }
  .mov .barra--cima { top: 0; transform-origin: 50% 0; }
  .mov .barra--baixo { bottom: 0; transform-origin: 50% 100%; }

  .mov .cortina--cima { top: 0; height: 45%; }
  .mov .cortina--baixo { top: auto; bottom: 0; height: 49%; }
  /* a fresta vai de 45% a 51% da tela */
  .mov .abre-logo { top: 48%; }

  /* inserto: nas 3 colunas da direita (a frase ocupa as 9 da esquerda), apoiado no pé da frase */
  .mov .plano__inserto {
    top: auto; bottom: 7vh;
    width: min(calc((100% - 2 * var(--m) - 11 * var(--g)) / 12 * 3 + 2 * var(--g)), 46vh);
  }

  .mov .topo {
    top: auto; height: auto; display: block; right: auto;
    bottom: 7vh; padding: 0;
  }
  .mov .frase {
    right: auto; bottom: 7vh;
    width: calc((100% - 2 * var(--m) - 11 * var(--g)) / 12 * 9 + 8 * var(--g));
  }
  .mov .legenda,
  .mov .fecho {
    right: auto; font-size: var(--t-corpo);
    bottom: calc(7vh + var(--frase-n) * var(--frase-lh) * var(--frase) + 20px);
  }
  /* a legenda não passa por baixo do inserto (colunas 1 a 8) */
  .mov .legenda { max-width: min(46ch, calc((100% - 2 * var(--m) - 11 * var(--g)) / 12 * 8 + 7 * var(--g))); }
  /* Fechamento em escopo: a frase assenta na tarja de baixo como legenda e a .fecho
     fica na mesma tarja, à direita, centrada na altura dela (sobre Asfalto, nunca sobre a foto).
     Só quando a tarja comporta a frase (o home.js mede e põe .escopo-legenda). */
  .mov.escopo-legenda .fecho {
    left: auto; right: var(--m);
    bottom: calc(var(--barra) / 2); transform: translateY(50%);
    width: max-content; max-width: calc(50vw - var(--m));
  }
  /* sem lugar ao lado da frase (o home.js mede): a .fecho vai para a tarja de cima */
  .mov.escopo-legenda.escopo-fecho-cima .fecho {
    left: var(--m); right: auto;
    top: calc(var(--barra) / 2); bottom: auto; transform: translateY(-50%);
    max-width: calc(100vw - 2 * var(--m));
  }
}

/* =====================================================================
   4. COMPLEXO PREMIUM: base ESTÁTICA: título, as três fotos numa fileira
   uniforme (4:3), a carreta na fachada e o mosaico dos vídeos
   ===================================================================== */
.premium {
  position: relative;
  background: var(--grao), var(--fundo-2); color: var(--texto);
  padding-top: var(--respiro);
}
.premium__cabeca { display: grid; row-gap: var(--passo); padding-inline: var(--m); }
.premium__titulo { max-width: none; }   /* a medida é a coluna inteira: 2 linhas em qualquer largura */
/* "O maior complexo da rede." é frase do cliente (PO11): as palavras ficam. No celular estreito
   "O maior complexo" passava da coluna por 19 px (362 em 343 a 390 px) e o título ia a 3 linhas.
   O tamanho fica no token; a largura da letra desce de 112% para 104% (333 px a 390, 274 em 282 a
   320). O corte curto vai ao cliente como pergunta (textos-home.md). */
@media (max-width: 479.98px) { .premium__titulo { font-stretch: 104%; } }
.premium__apoio { max-width: 52ch; text-wrap: pretty; }
@media (min-width: 1024px) {
  .premium__cabeca {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end;
  }
  .premium__titulo { grid-column: 1 / span 7; max-width: none; }
  .premium__apoio { grid-column: 9 / -1; }
}

.premium__corredor { margin-top: var(--vao); padding-inline: var(--m); }
.premium__palco { position: relative; }
.premium__horas { list-style: none; margin: 0; padding: 0; }
.premium__foto { margin: 0; }
@media (max-width: 1023.98px) {
  .premium__foto > img { object-position: var(--pos-pe, var(--pos)); }
}
.premium__rotulo { display: grid; gap: 4px; margin-top: 14px; }
.premium__quando {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--t-chamada); line-height: 1; letter-spacing: -.01em;
}
.premium__fato { color: var(--texto); font-size: var(--t-corpo); line-height: 1.4; }
.premium__linha { display: none; }

/* a estrutura (carreta + vídeos) no Asfalto, depois do palco em Piche: as seções da página
   continuam alternando (o trilho, logo abaixo, é Piche). O respiro é padding, não margem,
   para o Asfalto começar logo no pé do palco. */
.premium__chao {
  background: var(--grao), var(--fundo);
  padding-top: var(--vao);
}
/* a carreta diante da fachada: 4:3 no celular (a carreta inteira), escopo 2,39:1 no computador
   (--pos 50% 88%: cabem o letreiro ROSÁRIO PREMIUM com um pouco de céu e as rodas inteiras) */
.premium__carreta {
  --quadro-r: 4 / 3;
  margin: 0;
}
@media (min-width: 1024px) {
  .premium__carreta { --quadro-r: 2.39 / 1; width: min(100% - 2 * var(--m), 1280px); margin-inline: auto; }
}

/* ---------- mosaico dos vídeos (seis, todos 16:9 e do mesmo tamanho) ---------- */
/* embaixo só o --vao: o trilho logo depois já abre com o próprio respiro (eram dois respiros
   seguidos, 316 px entre "Ver o Rosário Premium" e "Nordeste" a 1440) */
.mosaico { padding: var(--vao) var(--m) var(--vao); }
/* "Estrutura" e a lista do que há: só espaço e mudança de escala (sem fio embaixo, sem ponto Brasa).
   O título é da escala de título (era --t-chamada, o mesmo tamanho dos nomes dos vídeos logo abaixo:
   a grade ficava sem cabeça, crítica de 13/10) */
.mosaico__cabeca {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 32px;
  margin-bottom: calc(var(--passo) + 8px);
}
.mosaico__titulo {
  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;
}
.mosaico__lista { display: flex; flex-wrap: wrap; gap: 6px 24px; color: var(--texto); font-size: var(--t-corpo); line-height: 1.45; }
.mosaico__grade { list-style: none; margin: 0; padding: 0; row-gap: var(--vao); }
.mosaico__item { min-width: 0; }
.mosaico__nome {
  margin-top: 14px;
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 650;
  font-size: var(--t-chamada); line-height: 1.1;
  text-wrap: balance;
}
.mosaico__desc { margin-top: 6px; max-width: 40ch; color: var(--texto); font-size: var(--t-corpo); line-height: 1.4; text-wrap: pretty; }
/* "ampliar": pílula de 44 px sobre o vídeo, em tarja chapada (sem desfoque); responde ao mouse, ao foco e ao toque */
.mosaico__ampliar {
  position: absolute; z-index: 3; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1.5px solid var(--texto-2); background: var(--veu-tarja); color: var(--texto);
  cursor: zoom-in;
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.mosaico__ampliar:hover { border-color: var(--texto); background: var(--fundo); }
.mosaico__ampliar:active { transform: scale(.97); }
.mosaico__ampliar svg { width: 20px; height: 20px; }
.mosaico .kit-video { cursor: zoom-in; }
.mosaico__pe { margin-top: var(--vao); }
/* no computador com mouse: o vídeo com o mouse em cima toca e os outros apagam (só o quadro, o texto não) */
@media (hover: hover) and (pointer: fine) {
  .mov .mosaico .kit-video { transition: opacity .45s ease; }
  .mov .mosaico__grade:hover .mosaico__item:not(:hover) .kit-video { opacity: .38; }
}

/* ---------- tela cheia dos vídeos (home.js) ---------- */
.cinema { position: fixed; z-index: 80; inset: 0; overscroll-behavior: contain; }
.cinema[hidden] { display: none; }
.cinema__fundo { position: absolute; inset: 0; background: rgb(20 17 16 / .95); }
.cinema__quadro {
  position: fixed; left: 0; top: 0; overflow: hidden;
  transform-origin: 0 0; background: var(--superficie) center / cover no-repeat;
}
.cinema__quadro video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cinema__legenda {
  position: absolute; left: var(--m); right: calc(var(--m) + 300px); bottom: calc(18px + var(--seguro));
}
.cinema__nome {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--t-chamada); line-height: 1.1;
  text-wrap: balance;
}
.cinema__desc { margin-top: 4px; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; }
.cinema__fechar { position: absolute; z-index: 2; top: max(16px, env(safe-area-inset-top, 0px)); right: var(--m); }
.cinema__navega {
  position: absolute; z-index: 2; right: var(--m); bottom: calc(12px + var(--seguro));
  display: flex; align-items: center; gap: 12px;
}
.cinema__conta { min-width: 4.5em; text-align: center; color: var(--texto-2); font-size: var(--t-legenda); font-variant-numeric: tabular-nums; }
.cinema__seta, .cinema__tocar { width: 48px; padding: 0; }
.cinema__seta svg, .cinema__tocar svg { width: 22px; height: 22px; }
.cinema__seta svg { fill: none; stroke: currentColor; stroke-width: 2; }
.cinema__tocar svg { fill: currentColor; }
.cinema__tocar .cinema__pausa { display: none; }
.cinema.tocando .cinema__tocar .cinema__play { display: none; }
.cinema.tocando .cinema__tocar .cinema__pausa { display: block; }
@media (max-width: 719.98px) {
  .cinema__legenda { right: var(--m); bottom: calc(78px + var(--seguro)); }
}

/* ---------- Complexo Premium com movimento: palco preso, a mesma vista muda de hora ---------- */
.mov .premium__corredor { height: 330svh; padding: 0; }
.mov .premium__palco { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* desfaz a fileira do estático: as três fotos empilhadas no mesmo lugar */
.mov .premium__horas {
  display: block; position: absolute; inset: 0;
  margin: 0; padding: 0; overflow: visible;
}
.mov .premium__hora { position: absolute; inset: 0; width: auto; }
.mov .premium__foto {
  position: absolute; top: 0; left: 0; right: 0; margin-inline: auto;
  width: 100%; height: var(--pf-h); aspect-ratio: auto;
}
.mov .premium__hora[data-hora="1"] .premium__foto { clip-path: circle(0% at 100% 30%); }
.mov .premium__hora[data-hora="2"] .premium__foto { clip-path: inset(0% 0% 100% 0%); }
.mov .premium__foto > img { transform-origin: 50% 60%; }
/* o rótulo da hora, abaixo da foto no celular */
.mov .premium__rotulo {
  position: absolute; left: var(--m); right: var(--m); top: calc(var(--pf-h) + 24px);
  margin: 0; gap: 10px;
}
.mov .premium__hora:not([data-hora="0"]) .premium__rotulo { opacity: 0; }
.mov .premium__quando {
  --wd: 112;
  font-stretch: calc(var(--wd) * 1%);
  font-size: var(--t-display); line-height: .9; white-space: nowrap;
}
.mov .premium__fato { font-size: var(--t-corpo); color: var(--texto); }

/* a linha do tempo das três horas: enche conforme a rolagem (home.js); barra de 4 px.
   No celular fica no Piche, abaixo da foto; no palco largo ela cai sobre a foto e vai numa tarja chapada */
.mov .premium__linha {
  display: grid; gap: 10px; position: absolute; z-index: 5;
  left: var(--m); right: var(--m); bottom: calc(28px + var(--seguro));
}
.premium__trilha { position: relative; height: 4px; background: var(--superficie); overflow: hidden; }
.premium__enche { position: absolute; inset: 0; background: var(--texto); transform-origin: 0 50%; transform: scaleX(0); }
.premium__marcas { display: flex; justify-content: space-between; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.2; }

@media (min-width: 1024px) and (orientation: landscape) and (min-height: 540px) {
  :root { --pf-h: 100svh; }
  .mov .premium__linha {
    left: auto; right: max(var(--m), (100% - 1280px) / 2 + var(--m)); bottom: 7vh;
    width: min(30vw, 420px);
    padding: 12px 16px; background: var(--veu-tarja);   /* texto pequeno sobre foto: tarja chapada */
  }
  /* a foto tem 1280 px (veio pelo WhatsApp): na tela ela não passa disso, para não sair
     ampliada e macia; nas telas mais largas sobra Piche dos lados. Com os originais do drone,
     volta a 1600. */
  .mov .premium__foto { width: min(100%, 1280px); }
  /* véu chapado e leve na PRÓPRIA foto (o degradê saiu): a zona do rótulo é a parte escura da vista
     (medido: o rótulo lê a 4,5:1 ou mais com 20%); a tarja da linha do tempo é o texto pequeno */
  .mov .premium__foto::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: rgb(20 17 16 / .2);
  }
  .mov .premium__rotulo {
    z-index: 5; top: auto; bottom: 7vh;
    left: max(var(--m), (100% - 1280px) / 2 + var(--m)); right: auto;
  }
  .mov .premium__fato { max-width: 36ch; }
}

/* =====================================================================
   5. NORDESTE E SUL: base: trilho com rolagem nativa (celular)
   Todas as fotos do trilho são 4:5 e do mesmo tamanho (duas por cidade).
   ===================================================================== */
.rede {
  position: relative;
  background: var(--grao), var(--fundo-2); color: var(--texto);
  padding-block: var(--respiro);
}
.rede__cabeca { padding-inline: var(--m); }
.rede__titulo {
  font-family: var(--f-titulo); font-stretch: 150%; font-weight: 650;
  /* "Nordeste" mede 7,95em: a 11vw sobravam 2 px em 390 e vazava em 360 e 320 */
  font-size: clamp(30px, 10.6vw, 56px); line-height: .95; letter-spacing: -.01em;
  text-wrap: balance;
}
.rede__apoio {
  margin-top: var(--passo); max-width: 46ch;
  text-wrap: pretty;
}
.rede__abertura, .rede__metade { display: none; }
/* embaixo do trilho: a cidade da vez, "3 de 6", a barra de 4 px e as setas (celular e computador sem trilho preso) */
.rede__pe {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; row-gap: 12px;
  margin: 24px var(--m) 0;
}
.rede__conta { grid-column: 1; display: flex; align-items: baseline; gap: 16px; min-width: 0; font-variant-numeric: tabular-nums; }
.rede__cidade { color: var(--texto); font: 700 var(--t-corpo)/1.3 var(--f-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* o contador "1 de 6": 15 px, Prata, sem zero à esquerda, nunca em Brasa nem grande */
.rede__de { flex: none; color: var(--texto-2); font-size: var(--t-legenda); }
.rede__barra { grid-column: 1 / -1; grid-row: 2; position: relative; height: 4px; background: var(--superficie); overflow: hidden; }
.rede__barra > span { position: absolute; inset: 0; background: var(--texto); transform-origin: 0 50%; transform: scaleX(.17); }
.rede__setas { grid-column: 2; grid-row: 1; display: flex; gap: 12px; }
.rede__seta { width: 48px; padding: 0; }
.rede__seta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.rede__seta[aria-disabled="true"] { opacity: .4; cursor: default; }

.rede__trilho {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 48px;
  padding: 0 var(--m) 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--m);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rede__trilho::-webkit-scrollbar { display: none; }
.rede__trilho > * { flex: none; scroll-snap-align: start; }

.cidade { width: max-content; }
.cidade__fotos { position: relative; display: flex; gap: 12px; }
.cidade__quadro { flex: none; width: min(72vw, 360px); margin: 0; scroll-snap-align: start; }
.cidade__nome {
  margin-top: 24px;
  font-family: var(--f-titulo); font-stretch: 150%; font-weight: 600;
  /* "Correntina" mede 9,2em: abaixo de 350 px a fonte acompanha a tela */
  font-size: var(--t-titulo); line-height: .95;
}
.cidade__estado { margin-top: 8px; color: var(--texto-2); font-size: var(--t-corpo); }
.cidade__postos { display: flex; flex-wrap: wrap; column-gap: 20px; font-size: var(--t-corpo); line-height: 1.55; }
.cidade__postos a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  transition: text-decoration-color .18s ease;
}
.cidade__postos a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--acento); }

.rede__vao {
  width: 60vw; aspect-ratio: 60 / 61.5;
  display: flex; align-items: center;
}
.rede__chao {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 500;
  font-size: var(--t-chamada); line-height: 1.2; color: var(--texto);
  text-wrap: balance;
}
.rede__fim {
  width: 60vw; aspect-ratio: 60 / 61.5;
  display: flex; align-items: flex-end;
}

@media (max-width: 1023.98px) {
  .rede { padding-bottom: var(--vao); }
  .rede__trilho { margin-top: 36px; }
}
/* computador sem trilho preso (reduzir movimento ou tela baixa) e celular deitado:
   mesma composição, rolagem nativa com barra visível e setas */
@media (min-width: 1024px), (orientation: landscape) and (max-height: 539px) {
  .rede__cabeca {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: end; column-gap: var(--g);
  }
  .rede__titulo { grid-column: 1 / -1; font-size: var(--t-display); }
  .rede__apoio { grid-column: 1; }

  .rede__trilho {
    gap: 5vw; margin-top: 56px; padding-bottom: 24px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin; scrollbar-color: var(--texto-2) transparent;
  }
  .rede__trilho::-webkit-scrollbar { display: block; height: 8px; }
  .rede__trilho::-webkit-scrollbar-thumb { background: var(--texto-2); border-radius: 999px; }

  .cidade__fotos { height: 44vh; gap: 16px; }
  .cidade__quadro { width: auto; height: 100%; aspect-ratio: 4 / 5; scroll-snap-align: none; }
  .cidade__nome { white-space: nowrap; }
  .rede__vao { width: 24vw; height: 44vh; aspect-ratio: auto; align-items: flex-end; }
  .rede__fim { width: auto; height: 44vh; aspect-ratio: auto; padding-right: var(--m); }
  .rede__chao { max-width: 22ch; }
}

/* computador com movimento e altura: trilho preso que anda na horizontal */
@media (min-width: 1024px) and (orientation: landscape) and (min-height: 620px) {
  .mov .rede { padding: 0; height: 400vh; }
  .mov .rede__palco {
    position: sticky; top: 0; height: 100svh; overflow: clip;
  }
  /* título e apoio só para o leitor de tela (o trilho preso mostra "Nordeste e Sul." em letra grande) */
  .mov .rede__cabeca {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; /* taste-skill-ignore: caixa de leitor de tela, não é fio desenhado */
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .mov .rede__pe { display: none; }
  .mov .rede__trilho {
    position: absolute; top: 0; left: 0; height: 100%; width: max-content;
    margin: 0; padding: 25vh var(--m) 0;
    overflow: visible; scroll-snap-type: none;
  }
  .mov .rede__trilho > * { scroll-snap-align: none; }
  /* a inclinação pela velocidade parte do pé das fotos */
  .mov .cidade__fotos { transform-origin: 50% 100%; }

  .mov .rede__abertura {
    display: block; position: relative; width: 22vw; height: 44vh;
  }
  .mov .rede__metade {
    display: block; position: absolute; left: 0;
    bottom: calc(100% + 16px - var(--base-titulo));
    font-family: var(--f-titulo); font-stretch: 150%; font-weight: 650;
    font-size: var(--t-display); line-height: .95; letter-spacing: -.01em;
    white-space: nowrap;
  }
  .mov .rede__apoio-trilho {
    position: absolute; left: 0; bottom: calc(-1 * var(--base-texto));
    width: 100%; max-width: 22vw; padding-right: 8px;
    font-size: var(--t-corpo); line-height: 1.55; text-wrap: pretty;
  }
  .mov .rede__vao { position: relative; width: 40vw; height: 44vh; display: block; }
  .mov .rede__vao .rede__chao {
    position: absolute; left: 0; bottom: calc(-1 * .32em);
    max-width: 24ch;
  }
  .mov .rede__fim { display: flex; align-items: flex-end; }
  .mov .rede__fim .link--forte { margin-bottom: calc(-1 * .32em); }
}

/* =====================================================================
   6. SAFE: a chamada para /safe/ (13/10/2026)
   Texto e ações | a prévia do mapa das bases (o SVG da página da Safe, variante do
   celular, entre os marcadores MAPA-SAFE do HTML); embaixo, duas fotos 3:2 do mesmo
   tamanho. Título e ações: .titulo-secao e .acoes, no base.css. O SVG traz o próprio
   desenho com :where() (especificidade zero): as regras daqui mandam sem !important.
   ===================================================================== */
.safe {
  background: var(--grao), var(--fundo); color: var(--texto);
  padding: var(--respiro) var(--m);
  --mapa-chao: var(--fundo);          /* contorno dos rótulos e miolo dos losangos do mapa */
}
/* celular e tablet: a Safe começa pelo olho e pelo título, logo depois do fim do trilho; o respiro
   inteiro deixava quase uma tela vazia (fica aqui, depois do .safe: antes estava no bloco do
   trilho e o "padding" do .safe, que vem depois no arquivo, passava por cima) */
@media (max-width: 1023.98px) { .safe { padding-top: var(--vao); } }
.safe__grade { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--vao); }
.safe__p { margin-top: var(--passo); max-width: 54ch; text-wrap: pretty; }

.safe__mapa { margin: 0; min-width: 0; display: grid; justify-items: start; }
/* a legenda do mapa: embaixo dele, em caixa normal e 15 px (era um rótulo em caixa alta em cima) */
.safe__mapa-legenda { margin-top: 12px; font-size: var(--t-legenda); line-height: 1.4; color: var(--texto-2); }
/* o texto do desenho (o SVG vem do gerador com 14 a 16 unidades): um tamanho só, o da legenda */
.safe__mapa-quadro .mapa-sigla, .safe__mapa-quadro .mapa-rotulo, .safe__mapa-quadro .mapa-rotulo--base,
.safe__mapa-quadro .mapa-rotulo__sub, .safe__mapa-quadro .mapa-legenda, .safe__mapa-quadro .mapa-nota { font-size: var(--t-legenda); }
/* o quadro do mapa. No celular ele passa meia margem para cada lado: os rótulos crescem e a
   legenda de dentro do SVG fica alinhada com o texto da página. */
.safe__mapa-quadro {
  position: relative;
  width: min(100% + var(--m), 520px); margin-left: calc(-.5 * var(--m));
}
/* atalho de mouse e toque por cima do mapa inteiro (o link do teclado é o .safe__mapa-ir) */
.safe__mapa-link { position: absolute; inset: 0; }
.safe__mapa-ir { margin-top: 12px; }
.safe__fotos { list-style: none; margin: var(--vao) 0 0; padding: 0; }

/* mouse sobre o mapa: as linhas e os halos acendem e o link de baixo acende junto */
@media (hover: hover) {
  .safe__mapa-quadro .mapa-rota { transition: stroke-opacity .3s ease; }
  .safe__mapa-quadro .mapa-base__halo { transition: fill-opacity .3s ease; }
  .safe__mapa-quadro:hover .mapa-rota { stroke-opacity: .95; }
  .safe__mapa-quadro:hover .mapa-base__halo { fill-opacity: .32; }
  .safe__mapa-quadro:hover ~ .safe__mapa-ir { text-decoration-thickness: 2px; text-decoration-color: var(--acento); }
  .mov .safe__mapa-quadro svg { transition: transform .7s var(--curva); }
  .mov .safe__mapa-quadro:hover svg { transform: scale(1.03); }
}
/* com movimento o mapa se monta quando chega à tela (home.js): antes do script, nada pisca */
.mov:not(.pronto) .safe__mapa-quadro { visibility: hidden; }

@media (min-width: 1024px) {
  .safe__grade {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g);
    align-items: center;
  }
  .safe__texto { grid-column: 1 / span 6; grid-row: 1; }
  /* os dois botões medem ~505 px: abaixo de ~1150 px de tela o do WhatsApp desce para a linha de
     baixo (sem isso, a 1024 px, ele invadia a coluna do mapa) */
  .safe .acoes { flex-wrap: wrap; row-gap: 16px; }
  /* o mapa começa na coluna 7, a mesma borda da 2ª foto embaixo */
  .safe__mapa { grid-column: 7 / -1; grid-row: 1; justify-self: start; width: min(100%, 560px); }
  .safe__mapa-quadro { width: 100%; margin-left: 0; }
  /* alvo de toque de 45 px também aqui (tablet deitado com 1024 px ou mais); até 1023 px a base já dá */
  .safe__mapa-ir { position: relative; }
  .safe__mapa-ir::before { content: ""; position: absolute; inset: -11px -8px; }
}

/* (7. A ficha de créditos saiu da home em 09/10: repetia o bloco da rede.) */

/* =====================================================================
   8. CELULAR DEITADO (sempre estático): as medidas vêm da altura da tela
   ===================================================================== */
@media (orientation: landscape) and (max-height: 539px) {
  :root { --frase: min(3.6vw, 7svh, 30px); --inserto-w: min(20vw, 180px); }
  /* 62svh: com 72 a terceira linha do título caía abaixo da dobra (390 px de altura) */
  .plano[data-plano="0"] .plano__quadro { height: 62svh; }
  .topo__titulo { font-size: min(var(--t-display), 11svh); }
  .plano:not([data-plano="0"]) .plano__quadro { aspect-ratio: auto; height: 80svh; }
  .plano__img { object-position: var(--pos); }
  .plano__quadro { background: var(--espera); }
  /* o mapa da Safe (400 × 341) cabe na altura da tela */
  .safe__mapa-quadro { width: min(100% + var(--m), 100svh); }
  .premium__carreta { width: min(100% - 2 * var(--m), 640px); margin-inline: auto; }
}

/* =====================================================================
   9. TABLET EM PÉ: a composição do celular na escala da tela
   ===================================================================== */
@media (min-width: 600px) and (orientation: portrait) {
  /* statement no tablet: até 32 px; a foto de cima e a do Premium crescem para o texto não boiar no Asfalto */
  :root { --frase: min(4.2vw, 3.2svh, 32px); --inserto-w: min(24vw, 220px); --foto-pe: clamp(56svh, 100svh - 270px, 76svh); --pf-h: min(100vw, 72svh); }
  .topo__titulo { font-size: min(var(--t-display), 7.2svh, (100vw - 2 * var(--m)) / 7.6); }
  .legenda, .mov .fecho { font-size: var(--t-corpo); }
}

/* =====================================================================
   10. TOQUE (até 1023 px e telas de toque): os links das cidades (o resto está no base.css)
   ===================================================================== */
@media (max-width: 1023.98px), (pointer: coarse) {
  .cidade__postos a { position: relative; }
  .cidade__postos a::before { content: ""; position: absolute; }
  .cidade__postos { row-gap: 16px; }
  .cidade__postos a::before { inset: -10px -6px; }             /* caixa do texto 24 + 20 = 44, o passo da lista */
}
@media (prefers-reduced-motion: reduce) {
  .mosaico .kit-video, .mosaico__ampliar, .cidade__postos a,
  .safe__mapa-quadro .mapa-rota, .safe__mapa-quadro .mapa-base__halo { transition: none; }
}