/* ==========================================================================
   VIAGEM: entrada na cabeça do Platão, os mundos das ideias e São Paulo
   Sem a classe .js no html: fluxo normal, tudo visível.
   Com .js: um palco fixo de uma tela; o scroll é a câmera (js/viagem.js).
   Camadas, de baixo pra cima: fundos dos mundos, tela de quadros (vídeos),
   textos do hero, câmera 3D (trabalhos e rabiscos), textos das estações, mapa.
   ========================================================================== */

/* === VIAGEM: MODO SEM JS (padrão) === */
.viagem { position: relative; background: var(--bg); }
.palco { position: relative; }
.fundos, .hero-tela, .hero-recorte, .mente-mundo, .mente-mapa, .grao { display: none; }
.hero-imagem { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.hero { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; min-height: 560px; pointer-events: none; }

.estacao {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 6vw;
  padding: 14vh var(--pad-x); max-width: 1400px; margin: 0 auto;
}
.estacao-centro, .estacao-contato { grid-template-columns: 1fr; text-align: center; }
.estacao-centro .estacao-texto, .estacao-contato .estacao-texto { margin: 0 auto; }
.estacao-ideia { position: relative; margin: 0; }
.estacao-ideia .nota { display: none; }

/* === HERO: TEXTO === */
.hero-texto { position: absolute; z-index: 2; left: var(--pad-x); top: 50%; transform: translateY(-50%); }
.hero-titulo {
  font-weight: 900; font-size: min(7vw, 12.4vh); line-height: .9; letter-spacing: -.05em;
  color: var(--branco); text-shadow: 0 2px 40px rgba(0, 0, 0, .35);
}
.hero-titulo .l { display: block; overflow: hidden; padding: 0 .06em .08em 0; margin-bottom: -.08em; }
.hero-titulo .l > span { display: block; animation: sobe 1.2s var(--ease) both; }
.hero-titulo .l:nth-child(3) > span { animation-delay: .12s; }
.hero-titulo .l:nth-child(4) > span { animation-delay: .24s; }
.hero-titulo .l:nth-child(5) > span { animation-delay: .36s; }
@keyframes sobe { from { transform: translateY(105%); } to { transform: none; } }

/* ==========================================================================
   MODO CINEMA (.js)
   ========================================================================== */
.js .viagem { height: var(--viagem-h, 3000vh); }
.js .palco {
  position: sticky; top: 0;
  height: 100vh;
  height: 100lvh; /* altura estável: a barra do navegador do celular não faz o palco pular */
  overflow: hidden; background: var(--bg);
}
/* no toque, quem rola a página é o site.js (uma cena por gesto): a rolagem nativa não acontece, então a barra do
   navegador nunca recolhe e a tela visível é a menor. O palco mede exatamente ela */
.js.passo-dedo .palco { height: 100svh; }

/* === FUNDOS DOS MUNDOS === */
.js .fundos { display: block; position: absolute; inset: 0; z-index: 1; }
.js .fundo { position: absolute; inset: 0; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.js .fundo.visivel { visibility: visible; }
.js .fundo > img, .js .fundo > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50%) 50%;
}
.js .fundo video { opacity: 0; transition: opacity 1.2s; }
.js .fundo video.rodando { opacity: 1; }
.js .fundo-caixa { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.js .fundo-caixa > img, .js .fundo-caixa > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.js .fundo::after {
  /* véu: escurece atrás do texto sem matar a cor das bordas */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(8, 9, 11, .18), rgba(8, 9, 11, .5));
}
.js .fundo[data-cap="papel"]::after { background: radial-gradient(ellipse 75% 65% at 50% 50%, rgba(244, 240, 232, 0), rgba(244, 240, 232, .25)); }
.js .fundo[data-cap="lab"]::after { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(3, 26, 34, .1), rgba(3, 26, 34, .45)); }

/* a nota da janela acesa em São Paulo */
.js .sp-janela { position: absolute; inset: 0; pointer-events: none; }
.js .sp-janela .rabisco { position: absolute; inset: 0; width: 100%; height: 100%; }
.js .sp-janela .nota {
  display: block; position: absolute; right: 52%; top: 64%; white-space: nowrap;
  font-family: var(--mao); font-weight: 700; font-size: var(--nota-fs, 30px); line-height: 1; color: var(--giz);
  transform: rotate(-4deg) translateY(10px); opacity: 0; transition: opacity .4s, transform .6s var(--ease);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.js .palco.no-contato .sp-janela .nota { opacity: 1; transform: rotate(-4deg); transition: opacity .8s .9s, transform 1s .9s var(--ease); }
.js .palco.no-contato .sp-janela .rabisco path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease); transition-delay: var(--d, .4s); }

/* === TELA DE QUADROS (mergulho e transições) === */
.js .hero-imagem {
  position: absolute; inset: 0; z-index: 2; height: auto; min-height: 0;
  opacity: var(--tela-op, 1);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--hs, 1));
  will-change: transform, opacity;
}
.js .hero-tela { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s; }
.js .palco.tela-pronta .hero-tela { opacity: 1; }
.js .palco:not(.em-hero) .hero-poster { visibility: hidden; }

/* === HERO === */
.js .hero { position: absolute; inset: 0; z-index: 3; height: auto; min-height: 0; }
.js .hero.fora { visibility: hidden; }
.js .hero-recorte {
  display: block; position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%;
  opacity: var(--recorte-op, 1);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--hs, 1));
  will-change: transform;
}
.js .hero-texto {
  transform: translate3d(calc(var(--tx, 0px) + var(--mx2, 0px)), calc(-50% + var(--my2, 0px)), 0);
  opacity: var(--titulo-op, 1); will-change: transform, opacity;
}
/* as frases do meio do mergulho ("Nem ovo, nem galinha.", "A ideia.") saíram na rodada 14: o título vai direto
   pro mergulho, e depois da explosão quem fala é o "Bem-vindo" do plano das ideias */
/* o recado de rolar mora no botão de próxima cena (o cantinho, css/base.css) */

/* === VÉU DO ZOOM (anúncio no celular em pé) ===
   Um toque no celular dos anúncios traz ele pro centro; o véu escurece o resto e um toque nele devolve.
   A opacidade vem do viagem.js, junto com o zoom */
.zoom-veu { display: none; }
.js .zoom-veu {
  display: block; position: absolute; inset: 0; z-index: 4;
  background: rgba(8, 9, 11, .84); opacity: 0; visibility: hidden; pointer-events: none;
}
.js .zoom-veu.on { visibility: visible; pointer-events: auto; cursor: zoom-out; }
/* === CÂMERA 3D === */
.js .mente-mundo {
  display: block; position: absolute; inset: 0; z-index: 4;
  perspective: var(--persp, 1000px); perspective-origin: 50% 50%; pointer-events: none;
}
.js .mente-cam { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.ideia, .solto { position: absolute; left: 0; top: 0; will-change: transform, opacity; backface-visibility: hidden; }
/* nascem escondidos: sem isso, os que ainda não entraram em cena empilham no centro da tela */
.ideia, .solto { visibility: hidden; }
.ideia.visivel, .solto.visivel { visibility: visible; }
.ideia-boia { position: relative; animation: boia 7s ease-in-out infinite alternate; animation-delay: var(--atraso, 0s); }
@keyframes boia {
  from { transform: translate3d(0, -1.4%, 0) rotate(-1.2deg); }
  to { transform: translate3d(0, 1.4%, 0) rotate(1.3deg); }
}
.ideia-giro { transform: rotateY(var(--gy, 0deg)) rotateX(var(--gx, 0deg)); transition: transform .6s var(--ease); }

/* rabiscos à mão em volta da ideia ativa */
.rabisco { position: absolute; overflow: visible; pointer-events: none; max-width: none; /* a camada é maior que a ideia de propósito */ }
.rabisco path {
  fill: none; stroke: var(--traco, var(--giz)); stroke-width: var(--rw, .5);
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .5s var(--ease);
}
.ideia.ativa .rabisco path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease); transition-delay: var(--d, 0s); }
.ideia .nota {
  display: block; position: absolute; white-space: nowrap;
  font-family: var(--mao); font-weight: 700; font-size: var(--nota-fs, 30px); line-height: 1;
  color: var(--traco, var(--giz));
  transform: rotate(var(--rot, -5deg)) translateY(10px);
  opacity: 0; transition: opacity .4s, transform .6s var(--ease);
}
.ideia.ativa .nota { opacity: 1; transform: rotate(var(--rot, -5deg)); transition: opacity .8s .7s, transform 1s .7s var(--ease); }
.ideia[data-cap="papel"], .solto[data-cap="papel"] { --traco: var(--grafite); }

/* rabiscos soltos que passam pela câmera */
.solto svg { width: 100%; height: auto; overflow: visible; }
.solto path { fill: none; stroke: var(--traco, var(--giz)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* === TEXTO DAS ESTAÇÕES === */
.js .mente-estacoes { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.js .estacao {
  position: absolute; inset: 0; max-width: none; margin: 0;
  display: flex; align-items: center; justify-content: flex-start;
  padding: calc(var(--topo-h) + 4vh) calc(var(--pad-x) + 7vw) 10vh;
  visibility: hidden;
}
.js .estacao.lado-d { justify-content: flex-end; padding-right: calc(var(--pad-x) + 150px); /* folga pro mapa */ }
.js .estacao-centro { justify-content: center; }
.js .estacao.ativa { visibility: visible; }
.js .estacao.ativa .estacao-texto { pointer-events: auto; }
.estacao-texto { position: relative; width: min(100%, 520px); }
.js .estacao-texto { width: min(34vw, 520px); }
.js .estacao-centro .estacao-texto { width: min(80vw, 760px); }
.js .estacao-texto::before {
  content: ''; position: absolute; inset: -22% -26%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 9, 11, .72), rgba(8, 9, 11, 0));
}
/* laboratório: o texto passa por cima dos painéis ciano claros atrás do braço. Véu mais escuro e mais largo,
   sombra na letra e etiquetas com fundo escuro sólido (neutro, no tom da cena; rodada 8) */
.js .estacao[data-cap="lab"] .estacao-texto::before {
  inset: -28% -24%;
  background: radial-gradient(closest-side, rgba(3, 24, 32, .9), rgba(3, 24, 32, .76) 55%, rgba(3, 24, 32, 0));
}
.estacao[data-cap="lab"] h2, .estacao[data-cap="lab"] p { text-shadow: 0 1px 14px rgba(2, 16, 22, .75); }
.estacao[data-cap="lab"] p { color: var(--ink); }
.estacao[data-cap="lab"] .estacao-lista li {
  color: var(--branco); font-weight: 700; border-color: rgba(255, 255, 255, .42); background: rgba(3, 22, 30, .9);
}
/* no laboratório o braço fica no meio da tela: o texto da I.A. é mais estreito pra não cobrir (só desktop) */
@media (min-aspect-ratio: 4/5) {
  .js #ia .estacao-texto { width: min(30vw, 460px); }
}
.estacao h2 {
  font-weight: 800; font-size: clamp(30px, 3.3vw, 58px); line-height: 1.02; letter-spacing: -.035em;
  color: var(--branco); text-wrap: balance;
}
.estacao-centro h2 { font-size: clamp(34px, 4.4vw, 76px); }
.estacao p {
  margin-top: 22px; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.6; font-weight: 500;
  color: var(--ink-soft); text-wrap: pretty;
}
.estacao p strong { font-weight: 800; color: var(--branco); }
.estacao-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.estacao-lista li {
  padding: 7px 14px; border: 1px solid var(--line-forte); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.estacao .estacao-credito { margin-top: 18px; font-size: 13px; color: var(--ink-muted); text-wrap: balance; }

/* === BOAS-VINDAS (plano das ideias, rodadas 14 e 15) ===
   Depois da explosão, o "Bem-vindo" se escreve à mão, como pincel (o canvas do viagem.js revela a letra seguindo o
   caminho da mão, que vem do _ferramentas/escrita.py e começa a 0,3 s), o "ao plano das ideias." sobe palavra por
   palavra e um risco carmim sublinha. Na rodada 15 a letra virou a Billion Dreams (depois da Awesome, que tinha
   riscos vazados; uso pessoal até comprar a licença) e a composição inteira acaba em 2,2 s (era 3 s). Sem JS, tudo já aparece escrito. */
.boas-vindas { display: block; }
/* a letra é uma imagem (a Billion Dreams exata, na cor de giz); com o caminho da mão montado (html.escrita-ok,
   viagem.js), quem mostra ela é o canvas, que revela a tinta seguindo o traço. Sem isso, a imagem aparece inteira.
   Da largura da linha de baixo (uns 9,8 vezes o tamanho dela): mais estreita, o pincel ficava mais leve que a
   Montserrat 900 */
.boas-vindas-mao { position: relative; display: block; width: min(50vw, 860px); margin: 0 auto .2vw; }
.boas-vindas-mao img { display: block; width: 100%; height: auto; }
.boas-vindas-mao canvas { display: none; }
.escrita-ok .boas-vindas-mao img { visibility: hidden; }
.escrita-ok .boas-vindas-mao canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.boas-vindas-linha {
  display: block; font-weight: 900; font-size: clamp(34px, 5vw, 86px); line-height: 1; letter-spacing: -.045em;
  color: var(--branco); text-wrap: balance;
}
.boas-vindas-linha > span { display: inline-block; }
/* o risco escala inteiro com a largura: com vector-effect: non-scaling-stroke o tracejado do pathLength contava em
   pixels de tela e ele saía em três pedaços */
.boas-vindas-risco { display: block; width: min(34vw, 460px); height: auto; margin: 6px auto 0; overflow: visible; }
.boas-vindas-risco path { fill: none; stroke: var(--ideiaria); stroke-width: 4.5; stroke-linecap: round; }
.js .estacao-boas-vindas .estacao-texto { width: min(92vw, 1000px); }
.js .estacao-boas-vindas p { max-width: 640px; margin-left: auto; margin-right: auto; text-wrap: balance; }
.js .boas-vindas-risco path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .boas-vindas-linha > span { opacity: 0; transform: translate3d(0, .45em, 0); }
.js .estacao.ativa .boas-vindas-linha > span { animation: sobe-palavra .8s var(--ease) 1.5s forwards; }
.js .estacao.ativa .boas-vindas-linha > span:nth-child(2) { animation-delay: 1.57s; }
.js .estacao.ativa .boas-vindas-linha > span:nth-child(3) { animation-delay: 1.64s; }
.js .estacao.ativa .boas-vindas-linha > span:nth-child(4) { animation-delay: 1.71s; }
.js .estacao.ativa .boas-vindas-risco path { animation: escreve .6s var(--ease) 2.05s forwards; }
/* o texto embaixo espera a composição terminar */
.js .estacao-boas-vindas.ativa .estacao-texto > p { transition-delay: 2.15s; }
@keyframes escreve { to { stroke-dashoffset: 0; } }
@keyframes sobe-palavra { to { opacity: 1; transform: none; } }

/* o único mundo claro: o de papel. A cidadezinha do fundo é cheia de detalhe e de cinza claro:
   texto quase preto, véu de papel mais forte atrás do bloco e etiquetas com fundo de papel (rodada 4) */
.estacao[data-cap="papel"] h2 { color: var(--tinta); }
.estacao[data-cap="papel"] p { color: rgba(21, 23, 27, .92); font-weight: 600; }
.estacao[data-cap="papel"] .estacao-lista li {
  color: var(--tinta); font-weight: 700; border-color: rgba(21, 23, 27, .45); background: rgba(250, 247, 241, .9);
}
.js .estacao[data-cap="papel"] .estacao-texto::before {
  inset: -30% -26%;
  background: radial-gradient(closest-side, rgba(246, 242, 234, .97), rgba(246, 242, 234, .88) 55%, rgba(246, 242, 234, 0));
}
/* halo de papel atrás da letra */
.estacao[data-cap="papel"] h2, .estacao[data-cap="papel"] p { text-shadow: 0 0 18px rgba(246, 242, 234, .95), 0 0 4px rgba(246, 242, 234, .9); }


/* o contato em São Paulo */
.estacao-contato h2 { font-weight: 900; font-size: clamp(54px, 7.4vw, 128px); line-height: .9; letter-spacing: -.05em; }
.estacao-contato p { font-size: clamp(18px, 1.5vw, 24px); font-weight: 600; }
.estacao-contato .cafe-piada { margin-top: 6px; font-family: var(--mao); font-weight: 700; font-size: clamp(24px, 2vw, 32px); color: var(--giz); }
.estacao-contato .botao { margin-top: 30px; }
.cafe-numero {
  display: block; width: fit-content; margin-top: 18px;
  font-size: 15px; font-weight: 600; color: var(--ink-muted); text-decoration: none;
  border-bottom: 1px solid var(--line-forte); padding-bottom: 2px;
}
.estacao-contato .cafe-numero { margin-left: auto; margin-right: auto; }
.cafe-numero:hover { color: var(--branco); border-color: var(--branco); }
.js .estacao-contato { justify-content: flex-start; text-align: left; }
.js .estacao-contato .estacao-texto { width: min(40vw, 560px); margin: 0; }
.js .estacao-contato .cafe-numero { margin-left: 0; }

/* entrada e saída do texto: cada pedaço sobe com um atraso */
.js .estacao-texto > * { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .35s, transform .5s var(--ease); }
.js .estacao.ativa .estacao-texto > * { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform 1s var(--ease); }
.js .estacao.ativa .estacao-texto > :nth-child(2) { transition-delay: .1s; }
.js .estacao.ativa .estacao-texto > :nth-child(3) { transition-delay: .2s; }
.js .estacao.ativa .estacao-texto > :nth-child(4) { transition-delay: .3s; }
.js .estacao.ativa .estacao-texto > :nth-child(5) { transition-delay: .4s; }

/* === MAPA (navegação híbrida) === */
.js .mente-mapa {
  display: flex; flex-direction: column; gap: 2px;
  position: absolute; z-index: 6; right: var(--pad-x); top: 50%;
  transform: translate3d(16px, -50%, 0); opacity: 0; visibility: hidden;
  transition: opacity .6s, transform .8s var(--ease), visibility 0s .6s;
}
.js .palco.na-viagem .mente-mapa { opacity: 1; visibility: visible; transform: translate3d(0, -50%, 0); transition: opacity .8s, transform 1s var(--ease), visibility 0s; }
.mapa-item {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 5px 0; font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-dim); transition: color .3s;
}
.mapa-item i { display: block; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: width .5s var(--ease), background-color .3s; }
.mapa-item:hover, .mapa-item.ativo { color: var(--branco); }
.mapa-item.ativo i { width: 34px; background: var(--ideiaria); }
/* no papel o mapa ganha um véu de papel atrás e letra escura de verdade */
.tema-claro .mapa-item { color: rgba(21, 23, 27, .74); text-shadow: 0 0 10px rgba(246, 242, 234, .95), 0 0 3px rgba(246, 242, 234, .9); }
.tema-claro .mapa-item:hover, .tema-claro .mapa-item.ativo { color: var(--tinta); }
.js .mente-mapa::before {
  content: ''; position: absolute; inset: -18% -22% -18% -48%; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(246, 242, 234, .9), rgba(246, 242, 234, .7) 60%, rgba(246, 242, 234, 0));
  transition: opacity .6s;
}
.js.tema-claro .mente-mapa::before { opacity: 1; }

/* ==========================================================================
   CELULAR EM PÉ (mesma regra dos quadros: proporção até 4:5)
   ========================================================================== */
@media (max-aspect-ratio: 4/5) {
  /* título mais alto, em cima da barba (com 15vh ficava colado no pé da tela; rodada 8) */
  .hero-texto { top: auto; bottom: 24vh; transform: none; }
  /* "Se a ideia" tem 10 letras: esse tamanho cabe numa linha num celular de 360 */
  .hero-titulo { font-size: min(14vw, 9.4vh); }
  .hero::after {
    content: ''; position: absolute; inset: 32% 0 0 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(8, 9, 11, .85), rgba(8, 9, 11, .55) 45%, rgba(8, 9, 11, 0));
  }
  /* o véu do pé fica enquanto o título está em cima do Platão */
  .js .hero::after { opacity: var(--veu-op, 1); }
  .js .hero-recorte { display: none; }
  .js .hero-texto { transform: translate3d(var(--tx, 0px), 0, 0); }
  .boas-vindas-mao { width: 88vw; margin-bottom: .8vw; }
  .boas-vindas-linha { font-size: clamp(30px, 9.6vw, 44px); }
  .boas-vindas-risco { width: 52vw; }
  .boas-vindas-risco path { stroke-width: 7.5; }
  /* o celular dos anúncios aceita toque (zoom); quando está grande, o toque devolve */
  .ideia.ativa[data-zoom] { pointer-events: auto; cursor: zoom-in; }
  .ideia.ativa[data-zoom].grande { cursor: zoom-out; }

  .estacao { grid-template-columns: 1fr; gap: 32px; padding: 10vh var(--pad-x); }
  /* --txt-top: o viagem.js centraliza texto e trabalho juntos no espaço livre (encaixarCelular) */
  .js .estacao, .js .estacao.lado-d {
    justify-content: center; align-items: flex-start;
    padding: var(--txt-top, calc(var(--topo-h) + 2.5vh)) var(--pad-x) 0;
  }
  .js .estacao-centro { align-items: center; padding-top: 0; }
  .js .estacao-texto, .js .estacao-centro .estacao-texto, .js .estacao-contato .estacao-texto { width: 100%; }
  .js .estacao-texto::before { inset: -14% -12%; }
  .js .estacao[data-cap="lab"] .estacao-texto::before { inset: -20% -14%; }
  .js .estacao-contato { align-items: flex-end; padding-bottom: 16vh; }
  .estacao h2 { font-size: clamp(26px, 7.6vw, 36px); }
  .estacao-centro h2 { font-size: clamp(32px, 10vw, 46px); }
  .estacao-contato h2 { font-size: clamp(48px, 15vw, 72px); }
  .estacao p { margin-top: 14px; font-size: 15.5px; line-height: 1.55; }
  .estacao-lista { margin-top: 16px; gap: 6px; }
  .estacao-lista li { padding: 6px 11px; font-size: 12px; }
  .estacao .estacao-credito { margin-top: 12px; font-size: 12px; }
  /* no celular o crédito do carrossel mora na legenda da galeria: a altura dele vai pro carrossel (rodada 15) */
  #conteudo .estacao-credito { display: none; }
  /* no celular o mapa vira uma régua deitada no canto de baixo, longe do texto e do botão */
  .js .mente-mapa {
    flex-direction: row; align-items: flex-end; gap: 0;
    top: auto; right: auto; left: calc(var(--pad-x) - 5px);
    bottom: max(40px, calc(env(safe-area-inset-bottom) + 28px));
    transform: translate3d(0, 10px, 0);
  }
  .js .palco.na-viagem .mente-mapa { transform: none; }
  .mapa-item { padding: 6px 4px; font-size: 0; gap: 0; }
  .mapa-item i { width: 2px; height: 10px; transition: height .5s var(--ease), background-color .3s; }
  .mapa-item.ativo i { width: 2px; height: 24px; }
  .js .sp-janela .nota { font-size: 19px; }
}
/* celular estreito: a régua aperta pra não encostar no botão de próxima cena */
@media (max-aspect-ratio: 4/5) and (max-width: 374px) {
  .mapa-item { padding: 6px 2.5px; }
}

/* Telas médias: o mapa fica só com os traços, pra não apertar o texto */
@media (min-aspect-ratio: 4/5) and (max-width: 1200px) {
  .mapa-item { font-size: 0; gap: 0; }
  .js .estacao.lado-d { padding-right: calc(var(--pad-x) + 56px); }
}
/* Telas largas e baixas (notebook com barra de favoritos) */
@media (min-aspect-ratio: 4/5) and (max-height: 700px) {
  .estacao p { font-size: 15.5px; margin-top: 14px; }
  .estacao-lista { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ideia-boia { animation: none; }
}