/* =============================================================================
   Landing "muda" de Paisagens Invisiveis.
   Estrutura hibrida: layout do mock do Heitor, conteudo corrigido pelas fontes.
   Ordem dos blocos atende ao GDD v3, 3.1: contexto, Mini-TCLE, caixa de
   consentimento, botao de entrada.
   Sem valores literais. Tudo vem de tokens.css.
   ========================================================================== */

/* --- Cabecalho ------------------------------------------------------------ */

.topo {
  padding-block: var(--space-4);
}

.topo__linha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.marca {
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-caps);
  line-height: var(--lh-titulo);
  text-transform: uppercase;
  text-decoration: none;
}

/* O logotipo do topo e link, e link nao inline precisa cumprir o alvo de
   toque. Medido em 320px: 38px de altura, abaixo do minimo de 44 que o
   Apendice G exige. Os links inline dentro de paragrafo (licenca, e-mail,
   "ler o termo completo") sao isentos pela propria WCAG 2.2, criterio 2.5.8. */
a.marca {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--toque-min);
}

.marca span {
  display: block;
}

/* --- Menu de celular ------------------------------------------------------
   Mobile-first: a nav nasce escondida e virou painel embutido, aberto pelo
   botao sanduiche. A partir de 768px o botao desaparece e a nav volta a ser a
   linha horizontal de sempre.

   POR QUE ENTROU
   --------------
   Com os tres itens soltos no cabecalho, abaixo de 768px o .topo__linha
   quebrava em duas faixas (marca em uma, nav em outra) e gastava 120px de
   altura antes de a pagina comecar. Em 320px a propria nav quebrava em duas
   linhas, com "Creditos" sozinho embaixo. Medido em 29/07.

   POR QUE PAINEL, E NAO UMA SEGUNDA JANELA
   ----------------------------------------
   Os tres itens abrem <dialog>. Menu em <dialog> significa janela abrindo
   janela, e este motor ja mostrou tratar mal o ciclo de vida de <dialog> (o
   evento 'close' nao dispara, ver o comentario em janelas.js). Painel embutido
   nao empilha camada nenhuma.                                               */

.menu {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--toque-min);
  /* Alvo de toque de 44px tambem na horizontal, contado a partir do icone. */
  min-width: var(--toque-min);
  color: var(--ink-soft);
  transition: color var(--dur-ui) var(--ease);
}

.menu:hover {
  color: var(--ink);
}

/* O icone troca de desenho com o estado; o rotulo nao troca de palavra, porque
   quem anuncia estado para leitor de tela e o aria-expanded.                 */
.menu__fechar,
.topo[data-menu='aberto'] .menu__abrir {
  display: none;
}

.topo[data-menu='aberto'] .menu__fechar {
  display: block;
}

.nav {
  display: none;
  /* Pilha de largura inteira: alvo de toque generoso e leitura em coluna, que
     e o que se espera de menu de celular. A linha horizontal volta em 768px. */
  flex-direction: column;
  width: 100%;
  margin-top: var(--space-2);
  padding-top: var(--space-1);
  border-top: 1px solid var(--line);
}

/* Abertura: animacao de um disparo, e nao transicao de display.
   A transicao com allow-discrete que as janelas usam existe porque elas tem
   backdrop e saida animada. Aqui a saida e imediata (fechar menu instantaneo e
   o comportamento esperado) e uma animacao dispensa toda a maquinaria de
   @starting-style. Movimento reduzido ja e coberto: --dur-ui cai para 0,01ms
   em tokens.css, e animacao de um disparo nessa duracao e instantanea, que e
   exatamente o que se quer, ao contrario de um laco infinito.               */
.topo[data-menu='aberto'] .nav {
  display: flex;
  animation: menu-abre var(--dur-ui) var(--ease-suave);
}

@keyframes menu-abre {
  from {
    opacity: 0;
    transform: translateY(calc(var(--space-1) * -1));
  }
}

.nav__item {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  /* No celular o item ocupa a linha toda: alvo de toque do tamanho da faixa,
     e nao do tamanho da palavra. O recuo lateral sai, para o texto alinhar com
     a marca em vez de flutuar 16px a direita dela.                          */
  justify-content: flex-start;
  width: 100%;
  /* Explicito porque o utilitario .caps saiu da nav: ele parecia governar esta
     tipografia e governava so o corpo, por herança do font:inherit. */
  font-size: var(--fs-100);
  color: var(--ink-soft);
  transition: color var(--dur-ui) var(--ease);
}

.nav__item:hover {
  color: var(--ink);
}

/* Botao que se comporta como link dentro de um paragrafo. Usado para abrir a
   janela do termo completo sem fingir ser navegacao (nao e uma URL).       */
.link-inline {
  min-height: auto;
  padding: 0;
  color: var(--ink-soft);
  font-size: var(--fs-100);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--dur-ui) var(--ease);
}

.link-inline:hover {
  color: var(--ink);
}

/* --- Hero -----------------------------------------------------------------
   Tres colunas em telas largas (imagem | centro | imagem). Mobile-first: em
   telas estreitas as laterais somem e sobra a coluna central, que e a que
   carrega o conteudo. As imagens sao decorativas, entao sumir e legitimo, e
   protege o orcamento de menos de 2 MB e menos de 3 s em 4G.               */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-6) var(--space-7);
}

/* Fundo do hero: rua urbana desfocada ate ficar irreconhecivel.
   -------------------------------------------------------------------------
   A legibilidade do texto por cima nao e chute. Os tres tokens que a
   governam (--hero-img-opacidade, --hero-blur, --hero-veu) foram ajustados
   medindo o CONTRASTE NO PIXEL COMPOSTO: a pagina foi renderizada, a faixa
   atras do titulo foi amostrada pixel a pixel, e o pior caso (pixel mais
   escuro) foi comparado com --ink. O resultado precisa ficar acima de 4,5:1,
   que e o que o Apendice G exige.

   Se a imagem trocar, REMEDIR. Uma foto mais escura derruba o contraste sem
   dar nenhum sinal visual obvio, e o texto continua parecendo legivel para
   quem tem visao boa e monitor bom.

   O veu tambem desbota a imagem por decisao de conteudo, e nao so tecnica:
   ela e placeholder gerado, nao registro documental, entao nao deve competir
   com o texto nem se apresentar como fotografia do projeto. */
.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero__fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--hero-img-opacidade);
  filter: blur(var(--hero-blur));
  /* A escala compensa a borda transparente que o blur cria. */
  transform: scale(1.04);
}

/* Tres camadas, de cima para baixo:
     1. halo elipsoidal centrado no texto, que e o que sustenta o contraste
     2. degrade vertical, que costura o hero ao resto da pagina
     3. veu geral fraco, so para tirar a saturacao da foto
   O halo existe porque a alternativa (clarear a imagem inteira) obrigava a
   deixa-la quase invisivel para o texto passar em 4,5:1. Assim a foto aparece
   nas bordas e a luz se concentra onde ha palavra.                         */
.hero__fundo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Centro em 52% e raio vertical de 68% nao sao estetica: e a caixa que o
       titulo mais a descricao ocupam, medida (de 33% a 73% da altura do hero).
       Mudar a copia muda essa caixa e obriga a remedir.

       O raio HORIZONTAL virou token em 29/07, porque ele precisa de valores
       diferentes por largura: 64% cobre a coluna central de uma tela larga, e
       em 360px a coluna de texto e a tela toda. Ver --hero-halo-rx em
       tokens.css, que tambem registra a medicao que expos o problema.        */
    radial-gradient(
      ellipse var(--hero-halo-rx) var(--hero-halo-ry) at 50% 52%,
      var(--hero-halo-centro) 0%,
      var(--hero-halo-meio) 52%,
      var(--hero-halo-borda) 84%
    ),
    linear-gradient(
      to bottom,
      var(--paper) 0%,
      transparent 26%,
      transparent 68%,
      var(--paper) 100%
    ),
    var(--hero-veu);
}

/* Alinhamento: bandeira a esquerda no celular, centralizado a partir de 768px.
   -------------------------------------------------------------------------
   Pedido do Heitor em 29/07 ("os textos acabam ficando muito estranhos
   centralizados"), e ele esta certo pelo motivo tipografico: em 360px a
   descricao ocupa sete linhas de cerca de 44 caracteres, e sete linhas
   centralizadas tem as duas margens irregulares. O olho perde a entrada de
   cada linha, que e justamente o que texto centralizado cobra em troca da
   simetria. Simetria compra pouco num paragrafo longo e estreito.

   Em 768px o centro volta, porque la a descricao cabe em tres ou quatro linhas
   largas e o hero e composicao, nao leitura corrida.                        */
.hero__centro {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  text-align: left;
}

/* A onda da landing NAO e o componente do player. Ali ela e reativa ao audio
   e canal de informacao; aqui a pagina e muda, entao ela e estatica, quieta e
   marcada como decorativa. Ver especificacao-da-landing.md, secao 6.        */
.onda {
  width: 100%;
  max-width: calc(var(--container) / 2);
  color: var(--ink-soft);
}

/* Animacao da onda: som continuo, nao reproducao em curso.
   O atraso negativo escalonado por barra (--i vem do proprio SVG) faz a onda
   VIAJAR da esquerda para a direita. Sem ele, as 92 barras pulsariam juntas,
   que le como equalizador ligado e nao como cidade soando ao longe.
   Amplitude baixa de proposito: a pagina e muda, e movimento forte aqui
   prometeria audio que nao existe nesta tela. */
.onda rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: onda-respira var(--dur-onda) ease-in-out infinite;
  animation-delay: calc(var(--i) * var(--onda-passo));
}

@keyframes onda-respira {
  0%,
  100% {
    transform: scaleY(0.62);
    opacity: 0.45;
  }
  50% {
    transform: scaleY(1.18);
    opacity: 0.75;
  }
}

.hero__titulo {
  font-size: var(--fs-600);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-hero);
  text-wrap: balance;
  max-width: 18ch;
}

/* PASSOU DE pretty PARA balance EM 29/07. A historia importa porque o motivo
   de entrar nao e o mesmo motivo de ficar.

   ENTROU como conserto de viuva. Naquela hora a descricao estava na versao
   singular ("nao se ve, apenas se ouve") e terminava em "da escuta." sozinho
   numa quarta linha de 89px. pretty nao resolvia, e isto foi medido antes de
   trocar: dava 498/489/503/89px, exatamente o mesmo desenho de text-wrap:
   auto. O pretty do Chrome resgata ultima linha de UMA palavra, e "da escuta."
   tem duas, entao para ele nao havia nada a consertar.

   FICA por rag, nao mais por viuva. A copia voltou para o plural do Apendice E
   ("nao se veem, apenas se ouvem"), tres caracteres mais longa, e nesse texto
   nem pretty produziria viuva (mediria 474/413/503/232px). Com balance sai
   382/438/416/387px, que e rag parelho em vez de tres linhas cheias e uma
   curta. Mesmo numero de linhas e mesma caixa (513x108) nos dois casos.

   Vale tambem que balance nao depende do comprimento do texto para nao deixar
   viuva, e pretty depende: se a copia mudar de novo, este bloco nao volta a
   ter o problema. E e o mesmo valor que .hero__titulo usa duas regras acima,
   o que deixa o hero com um criterio so.

   Bloco curto e o territorio declarado do balance (a doc do MDN cita titulo,
   legenda e citacao) e os motores limitam quantas linhas ele afeta, entao em
   largura muito estreita, onde o paragrafo estica, ele simplesmente para de
   valer e a quebra volta ao normal. Degradar assim e aceitavel: o pior caso e
   o comportamento que a pagina tinha antes.

   A caixa nao mudou de tamanho nem de lugar em nenhuma das mexidas, entao o
   halo do hero segue valendo. Contraste remedido nas tres, por causa de
   DEC-16, sempre 7,09 / 4,92 / 4,92. Ver DEC-33.                           */
.hero__descricao {
  max-width: 46ch;
  text-wrap: balance;
}

/* --- Entrada --------------------------------------------------------------
   O botao de entrada vivia no fim da pagina, depois da faixa de pilares, e
   subiu para o hero em 29/07, no lugar exato onde ficava o chevron.

   O chevron foi REMOVIDO junto, e nao so movido de lugar: com os pilares
   migrados para a janela "Como funciona", nao ha mais secao abaixo do hero
   em estado de entrada. Uma seta que aponta para o rodape convida a rolar
   ate nada, que e pior do que nao ter seta.

   O bloco nao ganhou --largo: botao de 100% funcionava dentro da caixa de
   64ch do antigo bloco de consentimento e ficaria absurdo na largura do
   hero. Aqui a largura e a do proprio rotulo.                              */

.entrada {
  /* Respiro maior acima do que o gap do hero, porque aqui muda o tipo de
     coisa: acaba o texto e comeca a acao.                                  */
  margin-top: var(--space-2);
}

/* Na volta do mapa o consentimento ja foi dado e a jornada ja aconteceu:
   oferecer "iniciar" de novo, acima de "explorar novamente", seria duas
   portas para a mesma sala.                                                */
body[data-estado='retorno'] .entrada {
  display: none;
}

/* --- Eixos curatoriais, dentro da janela "Sobre" --------------------------
   Os cinco eixos eram uma lista dentro do paragrafo de abertura de "Como
   funciona" ("cinco eixos de escuta: Cidade Natural, Cidade Historica, ...").
   Viraram cards em 29/07, a pedido do Heitor, que apontou o Apendice E v5 como
   fonte, e no mesmo dia migraram para a janela "Sobre", entre o primeiro e o
   segundo paragrafo, tambem a pedido dele. Ver DEC-31.

   O lugar novo e melhor: "Sobre" e o texto curatorial, e o paragrafo seguinte
   aos cards e justamente onde o autor nomeia as cinco formas de escutar, entao
   o card entra como a figura que a frase legenda.

   O QUE VEM DE ONDE
   -----------------
   Nome e subtitulo de cada eixo sao LITERAIS do Apendice E v5, secao 2 ("A
   Cidade Natural | Vida, ecologia e paisagem" e assim por diante), sem o
   artigo inicial, para casar com o resto da pagina, que ja escrevia "Cidade
   Natural". A ordem e a da Figura 2 do mesmo apendice. As cores vem do
   Apendice G v9 (o proprio E v5 avisa que os valores dele sao antigos).

   POR QUE A COR E UM CIRCULO, E NAO O FUNDO DO CARD
   -------------------------------------------------
   Duas razoes, e a segunda decidiu.

   1. Contraste. Fundo em gradiente com o texto por cima nao passa: branco
      sobre o amarelo da Cidade Historica reprova de longe, e --ink sobre o
      verde escuro da Cidade Natural tambem, porque os dois tons sao medios.
      Tint fraco do gradiente no fundo do card seria possivel, mas medido dava
      4,61:1 para --ink-soft no pior caso (o rosa da Cidade que Celebra), com
      folga de 0,11 sobre o minimo. Folga fina neste projeto ja custou uma
      remedicao (ver a nota de --ink-soft em tokens.css).

   2. O circulo E o pin: uma previa do pin que o visitante vai encontrar no
      mapa, e nao enfeite colorido. O card ensina a legenda antes da entrada.
      O --eixo-angulo era 160deg, escolhido por ler bem "num pin circular
      pequeno", e virou 90deg em 2026-09-07: as faixas do manual da PMPA correm
      na horizontal, o mapa ja tinha ido para 90deg, e o Jacques pediu as duas
      telas iguais. Ver a nota do token em tokens.css.

   A partir de 768px o diametro repete --space-5, o mesmo das bolas dos passos
   de "Como funciona" (no celular ele cai um degrau, pela conta que esta em
   .eixo__cor). Ate 29/07 os dois blocos viviam na MESMA janela e a rima era
   para eles nao disputarem; agora que os cards estao em "Sobre" e os passos em
   "Como funciona", os dois nunca aparecem juntos na tela, e o mesmo diametro
   deixa de ser rima e passa a ser vocabulario: bola de 48px com traco de 2px e
   como esta pagina desenha "um item de uma lista curta". Quando os cinco icones
   de eixo chegarem (pendencia do Heitor, "designs a definir" na propria fonte),
   o lugar deles e dentro deste circulo.

   SEM NUMERACAO. A Figura 2 do Apendice E numera os eixos de 1 a 5, mas ali a
   numeracao e de tabela. Em card, numero le como ordem obrigatoria, e a
   propria janela diz o contrario tres blocos abaixo: "ouvir na ordem que
   quiser e parte do exercicio".                                             */

.eixos {
  display: grid;
  column-gap: var(--space-2);
  row-gap: var(--space-2);
}

/* Sobrescreve o ritmo apertado de .janela__texto li + li, que vale para as
   listas de texto corrido. Aqui o intervalo e o gap da grade.               */
.eixo + .eixo {
  margin-top: 0;
}

/* O BLOCO EMAGRECEU EM 29/07. Ver DEC-32.
   -------------------------------------------------------------------------
   Ate aqui cada eixo era um card de verdade: fundo --paper, filete, recheio de
   16px, pin de 48px e o subtitulo numa segunda linha. Cinco desses somavam
   467px, e o Heitor apontou que era grande demais para o que o bloco e. Ele
   tem razao, e o diagnostico e de peso, nao de tamanho: o que pesava era o
   CHROME (fundo mais filete mais recheio) somado a um nome em 16px, maior que
   o corpo da propria janela, que e 14px. Cinco caixas com titulo maior que o
   texto ao redor competem com o texto; uma legenda nao deveria competir.

   O que saiu: fundo, filete, recheio e a segunda linha do subtitulo.
   O que ficou: a cor, o nome e o subtitulo, ou seja a informacao inteira.

   No lugar do card, tres colunas na mesma linha (ponto, nome, subtitulo). A
   coluna de pontos coloridos alinhada na vertical e o que faz o bloco continuar
   lendo como uma unidade sem precisar de moldura.

   Resultado medido: de 467px para cerca de 150px, sem perder uma palavra.

   O texto agora fica sobre o --surface da janela, e nao sobre --paper: o
   contraste de --ink-soft melhorou de 5,10:1 para 5,32:1.                    */
.eixo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-2);
  row-gap: 0;
  /* start, e nao center: no celular o subtitulo cai para uma segunda linha, e
     center empurraria o ponto para o meio do bloco de duas linhas em vez de
     deixa-lo na altura do nome. Com o ponto em 24px contra uma linha de 21px,
     start ja le como centrado na primeira linha.                            */
  align-items: start;
}

/* Cada eixo so declara o par de paradas do gradiente. A forma e uma regra so.
   Provavelmente migra para um arquivo compartilhado quando o mapa entrar: o
   pin precisa do mesmo par.                                                 */
.eixo--natural {
  --eixo-de: var(--eixo-natural-de);
  --eixo-ate: var(--eixo-natural-ate);
}

.eixo--historica {
  --eixo-de: var(--eixo-historica-de);
  --eixo-ate: var(--eixo-historica-ate);
}

.eixo--movimento {
  --eixo-de: var(--eixo-movimento-de);
  --eixo-ate: var(--eixo-movimento-ate);
}

.eixo--celebra {
  --eixo-de: var(--eixo-celebra-de);
  --eixo-ate: var(--eixo-celebra-ate);
}

.eixo--intima {
  --eixo-de: var(--eixo-intima-de);
  --eixo-ate: var(--eixo-intima-ate);
}

/* Diametro unico, 24px, em qualquer largura.
   -------------------------------------------------------------------------
   Era 32px no celular e 48px no desktop, quando o eixo era um card e o pin era
   o elemento dominante dele. Com o bloco emagrecido (DEC-32) o pin vira sinal,
   nao ilustracao, e 24px e a medida que casa com a linha de 21px do texto sem
   empurrar a altura da fila: e o que mantem cada eixo em uma linha de 24px.

   Some com o breakpoint que existia so para ele, e com o problema que aquele
   breakpoint resolvia: em 320px o par de 48px com 24px de intervalo deixava
   100px para o nome, e tres dos cinco quebravam em duas linhas. Agora o nome
   tem a largura toda menos 40px.

   O gradiente continua sendo o do pin do mapa, no mesmo --eixo-angulo. Em 24px
   a rampa se ve menos do que em 48px, e essa e a troca aceita: a cor, que e o
   que identifica o eixo, se le igual.                                        */
.eixo__cor {
  grid-column: 1;
  grid-row: 1;
  width: var(--space-3);
  height: var(--space-3);
  border-radius: 50%;
  background: linear-gradient(var(--eixo-angulo), var(--eixo-de), var(--eixo-ate));
}

/* Celular: nome e subtitulo empilhados na coluna 2, porque nao ha largura para
   os dois na mesma linha (o nome mais longo pede 171px e o subtitulo mais longo
   239px, contra 197px de coluna em 320px).                                   */
.eixo__titulo,
.eixo__nota {
  grid-column: 2;
}

/* .janela__texto h3 pinta todo titulo de janela como rotulo de metadado, em
   caixa alta e --ink-soft, que e o certo para os Creditos. Aqui o h3 e o nome
   do eixo, e nome de eixo em versalete com tracking de 0,14em quebra feio numa
   linha como "Cidade em Movimento".

   O CORPO CAIU DE 16px PARA 14px EM 29/07 (DEC-32). Em 16px o nome do eixo era
   maior que o corpo da propria janela, que e 14px, e uma legenda com titulo
   maior que o texto ao redor compete com o texto em vez de servi-lo. A distincao
   entre nome e subtitulo passou a ser peso mais cor (medium e --ink contra
   regular e --ink-soft), que e o suficiente e nao custa altura.              */
.eixos .eixo__titulo {
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-normal);
  line-height: var(--lh-corpo);
  text-transform: none;
  color: var(--ink);
}

/* Desktop: o subtitulo sobe para a mesma linha do nome, em terceira coluna.
   -------------------------------------------------------------------------
   Cabe com folga: ponto 24 + intervalo 16 + nome mais longo 171 + intervalo 16
   + subtitulo mais longo 239 = 466px, contra 552px de janela.

   SUBGRID, e nao tres colunas em cada <li>. A primeira tentativa deu tres
   colunas a cada item, e o resultado ficou torto: cada <li> e uma grade
   independente, entao a coluna "auto" do nome tinha largura diferente em cada
   linha e os cinco subtitulos comecavam em cinco posicoes horizontais
   diferentes. Grade so alinha dentro do proprio container.

   Com as trilhas declaradas em .eixos e cada item herdando-as por subgrid, os
   cinco pontos, os cinco nomes e os cinco subtitulos caem em tres colunas de
   verdade. E isso, e nao moldura nenhuma, que faz cinco linhas de texto lerem
   como uma legenda.

   A declaracao de tres colunas fica ANTES do subgrid de proposito: motor sem
   suporte a subgrid descarta a linha seguinte e continua com as tres colunas,
   tortas mas funcionais, em vez de cair para o empilhado do celular.        */
@media (min-width: 768px) {
  .eixos {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .eixo {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }

  .eixo__nota {
    grid-column: 3;
    grid-row: 1;
  }
}

/* --- Passos, dentro da janela "Como funciona" -----------------------------
   Sao os tres pilares (ESCUTE, EXPLORE, SINTA) que ficavam numa faixa de
   tres colunas abaixo do hero. Migraram para a janela em 29/07.

   Mudaram de forma junto com o lugar, e por um motivo: em faixa larga eles
   eram tres cartoes centrados, lidos de relance e em paralelo. Dentro de uma
   janela de 68ch, empilhar tres colunas estreitas so produziria linhas
   curtas. Aqui viram lista vertical de icone mais texto, que e a forma de
   quem le uma explicacao, e nao de quem passa o olho numa vitrine.

   A quarta coluna do mock (COMPARTILHE, "contribua com suas gravacoes")
   continua fora: prometia funcionalidade que nao existe e nao pode existir
   numa pilha estatica sem backend. Ver DEC-13.                             */

.passos {
  display: grid;
  gap: var(--space-4);
}

.passo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

/* Sobrescreve o ritmo apertado que .janela__texto li + li aplica as listas
   de texto corrido dos Creditos. Aqui cada item e um bloco, nao uma linha. */
.passo + .passo {
  margin-top: 0;
}

.passo__icone {
  display: grid;
  place-items: center;
  width: var(--space-5);
  height: var(--space-5);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
}

/* Pulso da bola.
   -------------------------------------------------------------------------
   Pedido do Heitor em 29/07: movimento nas bolas, "como o espectograma do
   audio da LP". E o mesmo gesto da onda do hero, no mesmo ciclo (--dur-onda),
   defasado por item (--i, declarado no HTML) para o pulso VIAJAR lista abaixo
   em vez de as tres bolas piscarem juntas.

   AMPLITUDE, SEGUNDA TENTATIVA
   ----------------------------
   A primeira versao movia so o glifo, 9% de escala e opacidade de 0,7 a 1, com
   o argumento de que anel pulsando le como botao pedindo clique. O Heitor
   respondeu que estava "muito sutil, nao da pra perceber", e ele estava certo:
   9% num glifo de 24px sao 2px de variacao, invisiveis a 60cm de distancia.

   Agora sao duas camadas em fase, e o efeito e de profundidade, nao de piscada:

     anel (.passo__icone) ..... 0,94 a 1,08     a bola inteira respira
     glifo (svg)  ............. 0,90 a 1,12     e respira um pouco mais

   No pico, a escala composta do glifo chega a 1,21. Para referencia, a onda do
   hero varia de 0,62 a 1,18 em cada barra, ou seja, isto continua sendo mais
   contido do que o gesto que serviu de modelo.

   O medo do "botao pedindo clique" segue valido e continua endereçado: o que
   caracteriza aquele padrao e halo que se expande para fora e cor que muda,
   nao respiro em laco lento. Aqui nao ha nem halo nem troca de cor, e o ciclo
   e de 2,6s.

   Nao precisa de gate de visibilidade: o icone vive dentro de um <dialog>
   fechado, que nao e renderizado, e animacao em elemento nao renderizado nao
   roda. O pulso comeca de fato quando a janela abre.

   O icone e aria-hidden e decorativo, entao a variacao de opacidade nao entra
   em criterio de contraste.                                                 */
.passo__icone {
  animation: passo-anel var(--dur-onda) ease-in-out infinite;
  animation-delay: calc(var(--i) * var(--pulso-passo));
}

.passo__icone svg {
  animation: passo-respira var(--dur-onda) ease-in-out infinite;
  animation-delay: calc(var(--i) * var(--pulso-passo));
}

@keyframes passo-anel {
  0%,
  100% {
    transform: scale(0.94);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes passo-respira {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

.passo__corpo {
  display: grid;
  gap: var(--space-1);
}

/* .janela__texto h3 pinta todo titulo de janela em --ink-soft, que e o certo
   para os rotulos de metadado dos Creditos. Aqui nao: estes titulos abrem
   blocos de leitura, e precisam se destacar do proprio paragrafo.          */
.passos .passo__titulo {
  color: var(--ink);
}

/* --- Retorno (estado de volta do mapa) ------------------------------------
   GDD v3, 3.1, item (8): "Retorno a landing muda: agradecimento e opcao de
   explorar novamente; silencio como respiro final".

   Esta secao e tudo o que sobrou do antigo bloco de consentimento depois que
   a entrada subiu para o hero. Como so existe em um dos dois estados da
   pagina, ela fica fora do fluxo ate o body ganhar data-estado.            */

.retorno {
  display: none;
  padding-block: var(--space-6) var(--space-7);
}

body[data-estado='retorno'] .retorno {
  display: block;
}

.retorno__caixa {
  max-width: 64ch;
  margin-inline: auto;
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
}

.retorno__rotulo {
  color: var(--ink-soft);
}

/* --- Consentimento --------------------------------------------------------
   Bloco mais critico do fluxo. O mock trazia aceite implicito ("ao acessar
   voce concorda") e escondia o texto atras de um modal cujo unico controle
   era FECHAR. As fontes exigem caixa de selecao explicita, e o texto que
   fundamenta o aceite e mostrado antes do aceite, dentro da janela
   obrigatoria por onde todo mundo passa. Ver DEC-07 e DEC-08.              */

.consent__aceite {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: var(--toque-min);
  padding: var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-radius: var(--radius);
  cursor: pointer;
}

.consent__aceite:hover {
  background: var(--surface);
}

.consent__aceite input {
  flex: none;
  width: var(--space-3);
  height: var(--space-3);
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.consent__aceite span {
  font-size: var(--fs-100);
}

/* Pilha de acao. Generica de proposito: serve ao botao de entrada no hero, ao
   "explorar novamente" do retorno e ao "entrar no mapa" da janela de aceite.

   No celular os itens esticam, e e o que faz o botao ocupar a largura da
   coluna. Botao de acao primaria em largura inteira no celular nao e enfeite:
   e o alvo de toque maior possivel na unica acao da tela.

   O par width/max-width existe para a largura ser ESCOLHIDA e nao herdada.
   Sem ele, o bloco era fit-content e o botao terminava com a largura do
   paragrafo de apoio: 272px em 320px, por coincidencia certo, e 415px em 767px,
   por coincidencia nenhuma. Botao cujo tamanho depende do comprimento da frase
   abaixo dele muda de forma quando a copy mudar.

   O teto de 46ch repete a medida de leitura da descricao do hero, em vez de
   inventar um numero novo: a partir de uns 500px o botao para de crescer e as
   duas linhas de apoio ganham medida de leitura junto.                       */
.acao {
  display: grid;
  gap: var(--space-2);
  justify-items: stretch;
  width: 100%;
  max-width: 46ch;
}

/* Linha de apoio de um botao. No hero avisa que ha um aceite pela frente; na
   janela diz por que o botao esta inativo.

   balance, e nao pretty: sao duas linhas curtas, e medido em 360px o balance
   deu 213px e 199px contra 232px e 180px do pretty. Em texto de duas linhas,
   equilibrar as duas ganha de proteger a ultima.                            */
.dica {
  font-size: var(--fs-100);
  color: var(--ink-soft);
  text-wrap: balance;
}

.dica[hidden] {
  display: none;
}

/* Linha da recomendacao de fones, a unica .dica com icone.
   -------------------------------------------------------------------------
   O icone entrou em 29/07 a pedido do Heitor, para a linha se identificar
   antes de ser lida. Ele e aria-hidden: a frase ao lado ja diz "use fones",
   entao para leitor de tela ele seria repeticao.

   Flex, e nao um icone inline no texto: com inline, a frase que quebra em duas
   linhas no celular deixaria a segunda linha alinhada sob o icone, e nao sob a
   primeira palavra. Aqui o icone e uma coluna e o texto e outra.

   Servido em --space-2 (16px) e nao nos 24px da grade de desenho: contra um
   corpo de 14px, 24px faria o icone gritar mais alto que a frase.           */
.dica--fone {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1);
}

.dica--fone svg {
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
}

/* --- Rodape --------------------------------------------------------------- */

/* O corpo do rodape e o UNICO lugar da pagina abaixo do piso de 14px do
   Apendice G, por pedido explicito do Heitor, repetido depois de ele saber que
   14px era o minimo da propria fonte. A conta, o escopo e o porque de 13 e nao
   12 estao no proprio token. Vale em qualquer largura, inclusive celular, que
   foi parte do pedido. Ver --fs-050 em tokens.css e DEC-26 no memorial.     */
.rodape {
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-050);
  color: var(--ink-soft);
}

.rodape__grade {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.rodape__bloco {
  display: grid;
  gap: var(--space-1);
  /* Medida de leitura. Sem teto nenhum a coluna herdava os 710px da grade e a
     linha da identificacao academica saia com 95 caracteres, a mais larga da
     pagina inteira: o hero para em 46ch, as janelas em 68ch, e so o rodape nao
     tinha limite. O teto entrou em 68ch, repetindo o valor das janelas.

     SUBIU PARA 76ch EM 29/07, a pedido do Heitor: ele quer a linha da
     identificacao academica em UMA linha no desktop, e em 68ch ela nao cabia
     por 21px. Medido, com a fonte do projeto e com os fallbacks:

       "Trabalho de Conclusao de Curso, ... PUCRS." em uma linha
         Golos Text ....... 569px   (a mais larga das tres)
         Arial ............ 546px
         Segoe UI ......... 518px
       teto de 68ch em 13px .......... 548px   faltavam 21px
       teto de 76ch em 13px .......... 613px   folga de 28px
       espaco livre no rodape em 1440. 742px   sobram 129px

     Nao e um numero novo arbitrario: e o menor multiplo de 4ch que cabe a
     linha com folga para o fallback. E como o rodape caiu para 13px em DEC-26,
     76ch aqui da 613px, praticamente a mesma medida absoluta que 68ch dava
     quando o rodape era 14px (590px). A linha nao ficou mais longa em pixel
     do que ja era, o teto e que parou de cortar antes da hora.

     Abaixo de 768px nada disso aparece: a grade empilha e a coluna e limitada
     pelo container, nao por este teto. Ver DEC-31.

     A LINHA MEDIDA ACIMA MUDOU DE TEXTO no fim de 29/07: o copyright absorveu
     a identificacao academica e virou "(c) 2026 Paisagens Invisiveis. TCC da
     Pos-Graduacao em UX Design, Escola Politecnica, PUCRS.". Ficou 20px mais
     larga, e o teto NAO subiu de novo:

       linha nova, em uma linha
         Golos Text ....... 589px   (a mais larga das tres)
         Arial ............ 567px
         Segoe UI ......... 533px
       caixa de texto em 76ch ........ 597px   folga de 8px

     Cabe, e 80ch nao compraria nada: abaixo de ~1092px quem limita e o espaco
     livre da grade, nao este teto, e acima disso a linha ja cabe em uma linha.
     Subir o teto so alongaria a medida, que e o oposto do motivo de ele
     existir. O ponto de quebra andou de ~1070px para ~1092px, e continua
     valendo o que DEC-31 aceitou: quebrar ali e melhor que comprimir o
     intervalo das marcas institucionais ou o gutter da pagina.             */
  max-width: 76ch;
  /* A linha do copyright quebra em duas abaixo de ~1092px, e sem isto deixava
     "PUCRS." orfao na segunda linha. pretty reequilibra a ultima linha sem
     mexer na medida. Verificado com o texto novo em 1024px: quebra depois de
     "Escola", sem orfao.                                                   */
  text-wrap: pretty;
}

/* A linha de contato e a unica do rodape que o visitante pode PRECISAR: e por
   ela que se exerce direito sobre dado pessoal, exigencia do Apendice B v11,
   7.6. Ficava indistinguivel das outras duas, mesmo corpo e mesma cor, e em
   ultimo lugar. Ganha um degrau de respiro em vez de um enfeite: separa o
   grupo "sobre a obra" do grupo "o que fazer", sem acrescentar cromo.      */
.rodape__contato {
  margin-top: var(--space-1);
}

/* .rodape .marca saiu em 29/07 junto com o logotipo do rodape, que deu lugar
   as marcas institucionais. A .marca do topo continua, e ela nao precisava
   desta regra: e link, e herda --ink do body.                              */

.rodape a {
  text-underline-offset: 0.2em;
}

/* --- Marcas institucionais no rodape --------------------------------------
   Ocupam a coluna onde ficava o logotipo "Paisagens Invisiveis". A troca nao
   perde nada: a marca ja abre a pagina no topo, e o nome do projeto continua
   escrito na coluna ao lado, na linha de copyright.

   Tres marcas de fora do projeto, cada uma com manual proprio. As regras que
   valem aqui vem desses manuais, nao do gosto desta pagina:

   1. NAO RECOLORIR. A tentacao obvia num rodape claro e passar tudo para
      cinza ou aplicar opacidade, para o conjunto ficar discreto. O manual da
      PMPA (2025) proibe: a versao monocromatica so pode ser usada "se nao
      for possivel utilizar a versao com cores", e aqui e possivel. Opacidade
      seria pior ainda, porque desbota sem virar nenhuma das versoes
      autorizadas.

   2. TAMANHO POR MARCA, nao por linha. Igualar altura acha que as tres sao a
      mesma coisa. A da Prefeitura e um lockup de tres linhas, a da PUCRS e
      uma palavra, a da Film Commission tem uma linha de apoio miuda. O que
      se equilibra e a largura otica, e por isso cada uma tem seu token.

   3. AREA DE RESERVA. O manual da PMPA pede, em volta da marca, um respiro
      de pelo menos a altura da palavra PREFEITURA (cerca de 17% da altura do
      lockup), livre de texto e de outras marcas. Contra uma marca de 40px,
      isso da cerca de 7px. O intervalo aqui e de 16px no celular e 32px a
      partir de 768px, com folga nos dois casos. Este e o piso: abaixo de 8px
      o layout fura o manual.                                               */

/* O intervalo entre rotulo e marcas e --space-2, nao --space-3, para casar com
   o ritmo da coluna vizinha. Com 24px de um lado e 8px do outro, as duas
   colunas comecavam na mesma linha e se soltavam uma da outra logo abaixo:
   duas ilhas, e nao um rodape. O align-content saiu por ser redundante, a
   grade ja alinha os dois blocos pelo topo.                                */
.apoio {
  display: grid;
  gap: var(--space-2);
}

.apoio__rotulo {
  color: var(--ink-soft);
}

/* O intervalo comeca em --space-2 por uma conta de celular: as tres marcas
   somam 265px de desenho, e a coluna tem 312px num Android de 360px de
   largura. Com 32px de intervalo estoura, com 24px empata no fio (313 contra
   312) e a terceira marca cai sozinha para a segunda linha. Com 16px sobra
   folga de verdade e as tres ficam na mesma linha.

   16px continua sendo mais que o dobro da area de reserva que o manual da
   PMPA exige (cerca de 7px contra uma marca de 40px de altura), entao aperta
   o layout sem apertar a regra.                                            */
.apoio__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* base.css deixa toda imagem com height auto. Aqui e o contrario: a altura e
   que e escolhida, marca a marca, e a largura acompanha.                    */
.apoio__marca {
  width: auto;
  height: auto;
}

.apoio__marca--pucrs {
  height: var(--logo-pucrs-h);
}

.apoio__marca--prefeitura {
  height: var(--logo-prefeitura-h);
}

.apoio__marca--poafilm {
  height: var(--logo-poafilm-h);
}

/* --- Janelas (Sobre, Como Funciona, Creditos, TCLE) -----------------------
   <dialog> nativo: foco preso, Esc e camada de topo sem gambiarra de z-index.
   Nao compartilham componente com o Mini-TCLE, que fica visivel na pagina.
   Ver DEC-06.                                                              */

.janela {
  width: min(68ch, 100%);
  /* Recupera a margem que o navegador impõe por conta propria: a folha de
     estilo do proprio motor dá ao <dialog> um max-width de
     calc(100% - 6px - 2em), ou seja 38px que ninguem pediu. Em desktop isso
     nao aparece, porque 68ch e menor que a tela. Em 320px sao 12% da largura
     do aparelho gastos em margem, e foi o que apareceu quando os cards de
     eixo entraram: sobravam 156px de conteudo e o nome do eixo quebrava em
     duas linhas. Medido em 29/07.                                          */
  max-width: 100%;
  max-height: 85vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

/* Entrada e saida da janela.
   -------------------------------------------------------------------------
   Anima display e overlay com allow-discrete, mais @starting-style para o
   estado inicial. Sem isso o <dialog> aparece e some no talho, porque display
   e uma propriedade discreta e o elemento sai da top layer instantaneamente.

   Degrada bem: navegador que nao entende allow-discrete ou @starting-style
   simplesmente mostra a janela sem transicao. Nada quebra. */
.janela {
  opacity: 0;
  transform: translateY(var(--space-2)) scale(0.98);
  transition:
    opacity var(--dur-overlay) var(--ease-suave),
    transform var(--dur-overlay) var(--ease-suave),
    overlay var(--dur-overlay) allow-discrete,
    display var(--dur-overlay) allow-discrete;
}

.janela[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@starting-style {
  .janela[open] {
    opacity: 0;
    transform: translateY(var(--space-2)) scale(0.98);
  }
}

.janela::backdrop {
  background: var(--veil);
  opacity: 0;
  transition:
    opacity var(--dur-overlay) var(--ease),
    overlay var(--dur-overlay) allow-discrete,
    display var(--dur-overlay) allow-discrete;
}

.janela[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .janela[open]::backdrop {
    opacity: 0;
  }
}

/* Mobile-first, como o resto do projeto. O respiro de --space-5 e de tela
   larga: em 320px ele consumia 96px dos 305 disponiveis, mais do que o dobro
   do gutter de 24px que o .container usa na mesma largura. A janela passa a
   seguir o mesmo gutter da pagina no celular e volta a respirar em 768px.  */
.janela__corpo {
  padding: var(--space-3);
  overflow-y: auto;
  max-height: 85vh;
}

.janela__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.janela__titulo {
  font-size: var(--fs-400);
  font-weight: var(--fw-medium);
  line-height: var(--lh-titulo);
}

.janela__fechar {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0;
  border-radius: var(--radius);
  color: var(--ink-soft);
  transition: color var(--dur-ui) var(--ease);
}

.janela__fechar:hover {
  color: var(--ink);
}

.janela__texto > * + * {
  margin-top: var(--space-3);
}

.janela__texto h3 {
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.janela__texto p,
.janela__texto li {
  font-size: var(--fs-100);
  color: var(--ink-soft);
  text-wrap: pretty;
}

.janela__texto li + li {
  margin-top: var(--space-1);
}

/* Rotulo colado no proprio valor.
   -------------------------------------------------------------------------
   Nos Creditos e no termo completo, cada bloco e um par: h3 com o rotulo (que
   o CSS acima poe em caixa alta, como metadado) e um paragrafo com o valor. O
   ritmo unico de --space-3 dava a mesma distancia DENTRO do par e ENTRE pares,
   e o Heitor apontou o efeito em 29/07: "nao da pra entender se o nome e o
   cargo de baixo ou de cima". Era proximidade ambigua, nao falta de espaco.

   Com 8px dentro do par contra 24px entre pares, a razao e de 1 para 3 e a
   leitura deixa de ter duvida.

   O seletor e de filho direto de proposito. Ha outros pares h3 + p na pagina:
   os passos de "Como funciona", dentro de um .passo__corpo com gap proprio, e
   os eixos de "Sobre", dentro de um <li> que e grade. Nos dois casos o par nao
   e filho direto de .janela__texto, entao a regra nao os alcanca, e e o que se
   quer: onde ha gap de grade, margem somaria e soltaria o par em vez de
   junta-lo.                                                                 */
.janela__texto > h3 + p,
.termo__corpo > h3 + p {
  margin-top: var(--space-1);
}

/* .janela__abertura saiu em 29/07, junto com a linha que a justificava. O
   "Sobre" abria com a epigrafe do Apendice E ("Toda cidade soa. Poucas sao
   escutadas.") e ela recebia um degrau de destaque; a revisao do Heitor tirou a
   linha, e regra de estilo sem elemento que a use e peso morto. Se a epigrafe
   voltar, volta com ela.                                                    */

/* --- Termo completo, dentro da janela de consentimento --------------------
   <details> e nao uma segunda janela: janela dentro de janela empilha camadas
   e este motor ja mostrou tratar mal o ciclo de vida de <dialog>. O
   disclosure nativo tambem ja vem com semantica de expandido/recolhido para
   leitor de tela.                                                          */

.termo {
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.termo__abrir {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--toque-min);
  padding-inline: var(--space-2);
  font-size: var(--fs-100);
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-ui) var(--ease);
}

.termo__abrir::-webkit-details-marker {
  display: none;
}

/* Seta propria, para poder girar na abertura. */
.termo__abrir::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-ui) var(--ease-suave);
}

.termo[open] .termo__abrir::before {
  transform: rotate(45deg);
}

.termo__abrir:hover {
  color: var(--ink);
}

.termo__corpo {
  padding: 0 var(--space-2) var(--space-2);
}

.termo__corpo > * + * {
  margin-top: var(--space-2);
}

/* Aviso de conteudo provisorio. Existe para que Lorem Ipsum nao sobreviva
   ate a estreia por esquecimento.                                          */
.provisorio {
  padding: var(--space-2);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-100);
  color: var(--ink-soft);
}

/* --- Breakpoints ----------------------------------------------------------
   Apendice G, tabela 4.5: mobile-first, 320 / 768 / 1024 px.               */

@media (min-width: 768px) {
  /* --- Cabecalho: o menu sanduiche sai, a nav volta a ser linha ----------- */
  .menu {
    display: none;
  }

  .nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    gap: var(--space-1);
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .nav__item {
    justify-content: center;
    width: auto;
    padding-inline: var(--space-2);
  }

  /* --- Hero: volta ao centro --------------------------------------------- */
  .hero__centro {
    justify-items: center;
    text-align: center;
  }

  .acao {
    justify-items: center;
    width: auto;
    max-width: none;
  }

  .dica--fone {
    justify-content: center;
  }

  /* As marcas ficam na largura que elas pedem, o texto na medida de leitura
     dele, e a sobra vai para o meio. O inverso (dar o resto as marcas) fazia
     a lista quebrar em duas linhas antes de o texto quebrar, e marca partida
     no meio le pior do que paragrafo com uma linha a mais.

     A sobra no meio e o que faz o rodape respirar como o resto da pagina:
     antes as duas colunas ficavam encostadas na esquerda com um vazio grande
     e mudo na direita, que lia como coisa faltando, e nao como ar.         */
  /* O 76ch aqui acompanha o teto de .rodape__bloco: se a trilha ficasse em
     68ch, o teto do bloco nao teria como ser alcancado. Ver a conta la.     */
  .rodape__grade {
    grid-template-columns: auto minmax(0, 76ch);
    justify-content: space-between;
  }

  /* Bandeira a direita, alinhada com a nav do topo.
     -----------------------------------------------------------------------
     Pedido do Heitor em 29/07. Vale a partir de 768px so: abaixo disso a
     grade empilha, a coluna passa a ocupar a largura toda e texto miudo
     alinhado a direita numa coluna larga fica ruim de ler. No celular
     continua a esquerda.

     O recuo de --space-2 nao e respiro estetico: e o mesmo padding-inline de
     .nav__item. Sem ele o texto do rodape terminaria na borda do container e
     "CREDITOS", o ultimo item da nav, termina 16px antes dela. Com ele as
     duas pontas caem na mesma vertical, que e o alinhamento pedido.

     O corpo NAO diminui: o rodape ja esta em --fs-100, que sao os 14px de
     piso do Apendice G v9. Abaixo disso a pagina fura a propria fonte.     */
  .rodape__bloco {
    text-align: right;
    padding-inline-end: var(--space-2);
  }

  .apoio__lista {
    gap: var(--space-4);
  }

  /* A janela volta a respirar quando ha largura para isso. */
  .janela__corpo {
    padding: var(--space-5);
  }

  /* As regras de .eixo e .eixo__cor que moravam aqui sairam em 29/07: com o
     bloco emagrecido (DEC-32) o ponto tem 24px em qualquer largura e o
     intervalo e o mesmo nas duas. O que muda por largura agora e so o numero
     de colunas, e essa regra vive junto do componente.                      */
}

@media (min-width: 1024px) {
  .hero {
    padding-block: var(--space-8) var(--space-7);
  }
}

/* --- Entrada da pagina ----------------------------------------------------
   Pedido do Jacques em 30/07: os elementos entram um por vez, em fade com uma
   subida curta, em vez de a pagina inteira aparecer de uma vez.

   A ORDEM E A DE LEITURA, de cima para baixo, e nao uma ordem de importancia:
   quem chega le nessa direcao, e a pagina se montando na mesma direcao le como
   assentar. Comecar pelo hero e so depois trazer o cabecalho leria como
   correcao, como se algo tivesse ficado para tras.

   POR QUE A REGRA VIVE DENTRO DE prefers-reduced-motion: no-preference, e nao
   com um contra-bloco em reduce: assim o padrao da folha e o conteudo VISIVEL,
   e a animacao e o acrescimo. Se o motor nao entender a media query, nao
   entender @keyframes ou parar no meio, o pior caso e a pagina como ela era
   ontem, sem entrada nenhuma. O caminho inverso (opacity: 0 no padrao, mais
   uma classe ou uma animacao que revela) tem como pior caso uma pagina em
   branco, e isso e inaceitavel numa plataforma de pesquisa que precisa
   funcionar no aparelho que aparecer.

   O "screen and" nao e enfeite: sem ele, uma impressao disparada no meio da
   sequencia sairia com elementos em opacidade zero.

   Os elementos ficam FOCAVEIS desde o primeiro quadro, mesmo antes de estarem
   visiveis. E o comportamento correto: quem navega por teclado e chega antes
   do fim da sequencia (1,33s) alcanca o botao, e o foco visivel do proprio
   botao aparece junto com ele.

   O escalonamento por --ordem repete a gramatica que a onda ja usa com --i,
   duas regras acima. Um sistema so para duas coisas diferentes.             */
@media screen and (prefers-reduced-motion: no-preference) {
  .topo__linha,
  .onda,
  .hero__titulo,
  .hero__descricao,
  .entrada .botao,
  .entrada .dica,
  .rodape__grade {
    animation: surge var(--dur-entrada) var(--ease-suave) both;
    animation-delay: calc(var(--ordem) * var(--entrada-passo));
  }

  .topo__linha     { --ordem: 0; }
  .onda            { --ordem: 1; }
  .hero__titulo    { --ordem: 2; }
  .hero__descricao { --ordem: 3; }
  .entrada .botao  { --ordem: 4; }
  .dica            { --ordem: 5; }
  /* Depois de .dica de proposito: as duas tem a mesma especificidade e a
     linha dos fones e a ultima do bloco, entao quem vier depois vence.      */
  .dica--fone      { --ordem: 6; }
  .rodape__grade   { --ordem: 7; }
}

/* Sem bloco "to": a ausencia dele faz o navegador usar o valor computado do
   proprio elemento como destino. Assim a animacao nunca redeclara opacidade
   nem transform finais, e nao ha um segundo lugar para desatualizar se o
   layout mudar.                                                             */
@keyframes surge {
  from {
    opacity: 0;
    transform: translateY(var(--entrada-sobe));
  }
}

/* --- Movimento reduzido ---------------------------------------------------
   Os tokens de duracao ja caem para quase zero em tokens.css, o que cobre as
   transicoes. Animacoes em laco infinito precisam ser desligadas de forma
   explicita: duracao curta nao para um loop, so o acelera, o que e pior do
   que o efeito original para quem pediu menos movimento.

   A ENTRADA DA PAGINA NAO APARECE AQUI, e nao foi esquecida: ela so existe
   dentro de um @media no-preference, logo acima, entao para quem pede menos
   movimento ela simplesmente nao chega a ser declarada. Ver DEC-34.         */
@media (prefers-reduced-motion: reduce) {
  /* Duas agora: a onda do hero e o pulso das bolas da janela "Como funciona".
     Precisam ser desligadas de forma explicita porque duracao curta nao para
     um laco infinito, so o acelera, que e pior do que o efeito original para
     quem pediu menos movimento.                                            */
  .onda rect {
    animation: none;
    opacity: 0.6;
  }

  .passo__icone,
  .passo__icone svg {
    animation: none;
  }
}