/* =============================================================================
   Base: reset enxuto, tipografia, acessibilidade e primitivos.
   Sem valores literais. Tudo vem de tokens.css.
   ========================================================================== */

@font-face {
  font-family: 'Golos Text';
  src: url('../assets/fonts/golos-text-latin-var.9a69d0aa.woff2') format('woff2');
  /* O eixo da Golos Text comeca em 400: nao existe peso light nesta familia. */
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  /* Latin basico + suplemento: cobre os acentos do portugues. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Rolagem suave nos links de ancora. O chevron do hero, que era o unico
   consumidor disto, saiu em 29/07; sobra o "pular para o conteudo", e ele
   sozinho ja justifica a regra.
   Dentro de no-preference porque rolagem animada e um dos gatilhos classicos
   de desconforto vestibular, e a WCAG 2.2 pede respeitar a preferencia.
   O scroll-padding evita que o alvo encoste no topo da janela.             */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html {
  scroll-padding-top: var(--space-4);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-200);
  font-weight: var(--fw-regular);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

a {
  color: inherit;
}

/* --- Foco -----------------------------------------------------------------
   :focus-visible, nunca :focus, para nao desenhar anel em clique de mouse.
   Requisito WCAG 2.2 AA que a lista de estados do Apendice G esqueceu.     */
:focus-visible {
  outline: var(--focus-w) solid var(--focus-cor);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius);
}

/* --- Utilitarios ---------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Visualmente oculto, mas lido por leitor de tela. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Pular para o conteudo: primeiro alvo de teclado da pagina. */
.pular {
  position: absolute;
  left: var(--space-2);
  top: calc(var(--space-2) * -6);
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--radius);
  font-size: var(--fs-100);
  text-decoration: none;
  transition: top var(--dur-ui) var(--ease);
}

.pular:focus-visible {
  top: var(--space-2);
}

/* --- Tipografia ----------------------------------------------------------- */

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

.lead {
  font-size: var(--fs-300);
  color: var(--ink-soft);
  line-height: var(--lh-corpo);
}

/* --- Botao ----------------------------------------------------------------
   Apendice G, secao 3.3: raio 8px, estados default/hover/active/disabled.
   O hover do wireframe era "opacidade 0.8": trocado por escurecimento do
   preenchimento, porque opacidade sobre botao escuro derruba o contraste do
   rotulo justamente no estado hover, e o G exige 4,5:1 em todos os estados. */

/* CAIXA DO ROTULO: baixa no celular, alta a partir de 768px.
   -------------------------------------------------------------------------
   Entrou em 29/07 porque o Heitor pediu o rotulo em uma linha no celular, e a
   resposta honesta e que EM CAIXA ALTA NAO CABE. Medido, com a fonte do
   projeto, para "Iniciar jornada pelo mapa":

     caixa alta, tracking 0,14em, padding 32, com icone .... 360px
     caixa alta, tracking 0,06em, padding 16, com icone .... 300px
     caixa alta, sem tracking, sem icone, padding 16 ....... 239px
     caixa baixa, sem tracking, padding 16, com icone ...... 217px

   Um celular de 320px oferece 272px de coluna. So as duas ultimas cabem, e a
   penultima custa o tracking E o icone, dois elementos de identidade, para
   salvar a caixa alta. A ultima custa so a caixa. Trocar a caixa e o desvio
   menor, e de quebra 14px em caixa alta com 0,14em de tracking e o pior
   tamanho possivel para ler num aparelho na mao.

   A caixa alta continua sendo a assinatura do botao no desktop, onde ela cabe
   e onde a pagina e composicao. Ela e [PROPOSTA] nossa, nao vem de fonte
   nenhuma do TCC, o que e o que torna a troca barata.

   A alternativa que NAO esta na nossa mao: rotulo mais curto. "Entrar no mapa"
   cabe em caixa alta em 320px com folga. E copy, e copy e do Heitor.

   FOLGA MEDIDA, com a fonte carregada e com o fallback (o font-display e swap,
   entao o primeiro quadro sai em Segoe UI ou Arial e nao pode quebrar):

     disponivel em 320px .................... 208px
     precisa, Golos Text .................... 170px   folga 38px
     precisa, pior fallback ................. 162px   folga 46px

   Ver DEC-29 no memorial.                                                   */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Intervalo e recuo apertados no celular por conta de largura, medida e nao
     estimada: com --space-3 de recuo e --space-2 de intervalo, o rotulo pedia
     170px e sobravam 168,7px em 320px. Errar por 1,3px e nao ter folga.

     Custo estetico zero: no celular o botao ocupa a largura da coluna (.acao
     estica), entao o recuo lateral nao aparece, so define o minimo. O que
     ganha espaco de verdade e este par.                                     */
  gap: var(--space-1);
  min-height: var(--toque-min);
  padding: var(--space-2);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-normal);
  text-transform: none;
  text-decoration: none;
  transition:
    background-color var(--dur-ui) var(--ease),
    box-shadow var(--dur-ui) var(--ease);
}

@media (min-width: 768px) {
  .botao {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    letter-spacing: var(--tr-caps);
    text-transform: uppercase;
  }
}

.botao:hover:not(:disabled) {
  /* Escurece o preenchimento. Branco sobre este tom segue acima de 7:1. */
  background: color-mix(in srgb, var(--ink) 84%, black);
}

.botao:active:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 72%, black);
}

/* Estado inativo.
   -------------------------------------------------------------------------
   Preenchimento solido dessaturado foi a primeira tentativa e estava errado:
   visto isolado, o botao continuava parecendo clicavel, e so o texto de apoio
   abaixo dizia que nao era. Botao que parece pressionavel e nao responde e
   uma promessa quebrada, ainda mais quando e o unico caminho da tela.

   Aqui o inativo abandona o preenchimento e vira contorno. A diferenca com o
   ativo deixa de ser de tom e passa a ser de forma, que se le de relance.

   Sobre contraste: controle inativo esta fora do criterio 1.4.3 da WCAG, mas
   o rotulo fica legivel de proposito (--ink-soft sobre --paper, 5,09:1), para
   que quem usa leitor de tela ou tem baixa visao consiga ler o que ainda nao
   pode acionar.                                                            */
.botao:disabled {
  cursor: not-allowed;
  background: transparent;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Rotulo do botao.
   -------------------------------------------------------------------------
   HISTORICO, porque a decisao mudou de mao duas vezes no mesmo dia. A primeira
   resposta ao rotulo que nao cabia num celular estreito foi ASSUMIR a quebra:
   o texto ganhou este elemento proprio para o balance atuar e quebrar em duas
   linhas de peso igual ("Iniciar jornada / pelo mapa") em vez de largar "mapa"
   orfao. O Heitor pediu uma linha, e a caixa baixa resolveu de verdade (ver o
   bloco de medicao em .botao).

   O elemento e o balance FICAM, por dois motivos: num no de texto solto dentro
   de um flex o balance nao e confiavel entre motores, e se a copy do rotulo
   crescer, a quebra volta a acontecer e volta equilibrada em vez de orfa. Hoje
   ele nao faz nada, que e o estado correto: o rotulo cabe em uma linha de
   320px ao desktop.                                                        */
.botao__rotulo {
  text-wrap: balance;
}

.botao--largo {
  width: 100%;
}