/* =====================================================================
   BASE  · o que vale em toda página
   ===================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--texto);
  background: var(--fundo);
  /* Dois halos moles no fundo. Não são decoração: vidro só parece vidro
     quando existe alguma coisa variando atrás dele. Ficam presos à janela
     (`fixed`) para não custarem repintura ao rolar. */
  background-image:
    radial-gradient(72vw 72vw at 8%  -10%, var(--acento-fundo), transparent 60%),
    radial-gradient(64vw 64vw at 98%  8%,  var(--marca-suave),  transparent 58%),
    radial-gradient(80vw 80vw at 50% 108%, var(--acento-fundo), transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  /* O cabeçalho é translúcido e fixo; sem isto o conteúdo passa por baixo
     dele na primeira dobra, que é justamente a dobra que precisa responder
     "o que está acontecendo agora". */
  padding-top: 56px;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.2; }
h1 { font-size: var(--t-tit); letter-spacing: -.025em; }
h2 { font-size: var(--t-gr); letter-spacing: -.01em; }
h3 { font-size: var(--t-med); }
p  { margin: 0 0 var(--e-3); }
a  { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Todo número derivado usa isto. Coluna de placar que dança conforme o
   dígito é a diferença entre uma tabela e uma lista de números soltos. */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -.01em; }

/* ─── o esqueleto da página ────────────────────────────────────────── */
.envelope { max-width: 720px; margin: 0 auto; padding: 0 var(--e-3); }
.envelope-largo { max-width: 1040px; }

.topo {
  position: fixed; inset: 0 0 auto 0; height: 56px; z-index: 40;
  display: flex; align-items: center; gap: var(--e-3);
  padding: 0 var(--e-3);
  background: var(--cromo-fundo);
  backdrop-filter: var(--cromo-desfoque);
  -webkit-backdrop-filter: var(--cromo-desfoque);
  border-bottom: 1px solid var(--cromo-borda);
  box-shadow: var(--vidro-topo);
}
.topo .marca {
  font-weight: 800; font-size: var(--t-med); letter-spacing: -.03em;
  color: var(--texto); text-decoration: none; display: flex; align-items: center; gap: 8px;
}
.topo .marca b { color: var(--acento); text-shadow: var(--brilho-texto); }
.topo .cresce { flex: 1; }

/* Navegação inferior: o polegar chega, o topo não. */
.rodape-nav {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--cromo-fundo);
  backdrop-filter: var(--cromo-desfoque);
  -webkit-backdrop-filter: var(--cromo-desfoque);
  border-top: 1px solid var(--cromo-borda);
  box-shadow: var(--vidro-topo);
}
.rodape-nav a {
  position: relative;
  min-height: 60px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; font-size: var(--t-micro); font-weight: 600;
  color: var(--texto-3); text-decoration: none;
}
.rodape-nav a[aria-current="page"] { color: var(--texto); }
.rodape-nav a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
  background: var(--acento); border-radius: 0 0 3px 3px;
  box-shadow: var(--brilho);
}
.rodape-nav svg { width: 21px; height: 21px; }
/* Com o atalho do painel são seis colunas, e em telefone estreito seis
   rótulos de 13px não cabem. Encolhe o rótulo, não o alvo de toque: os
   60px de altura continuam intactos, que é o que o polegar precisa. */
.rodape-nav[data-quantos="6"] a { font-size: 10px; letter-spacing: -.01em; }
.rodape-nav[data-quantos="6"] svg { width: 19px; height: 19px; }
/* O atalho do painel sai do site e entra na ferramenta: o acento marca
   que ali a navegação é outra. */
.rodape-nav a[data-fora] svg { color: var(--acento); }

/* ─── botões ───────────────────────────────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--toque); padding: 0 var(--e-4);
  border: 1px solid transparent; border-radius: var(--r-2);
  font: inherit; font-weight: 650; font-size: var(--t-base);
  background: var(--marca); color: var(--sobre-marca);
  cursor: pointer; text-decoration: none;
}
.botao:hover { text-decoration: none; filter: brightness(1.08); }
.botao:focus-visible { box-shadow: var(--brilho-forte); }
.botao:active { transform: translateY(1px); }
.botao[disabled], .botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.botao-2   { background: var(--superficie); color: var(--texto); border-color: var(--linha-forte);
             backdrop-filter: var(--vidro-desfoque);
             -webkit-backdrop-filter: var(--vidro-desfoque); }
.botao-fantasma { background: transparent; color: var(--texto); }
.botao-acento   { background: var(--acento); color: var(--sobre-acento);
                  box-shadow: var(--brilho); }
.botao-acento:hover { box-shadow: var(--brilho-forte); }
.botao-perigo   { background: var(--derrota); color: #fff; }
.botao-largo    { width: 100%; }
.botao-peq      { min-height: 36px; padding: 0 var(--e-3); font-size: var(--t-peq); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--acento-vivo); outline-offset: 2px; border-radius: var(--r-1);
}

/* ─── campos ───────────────────────────────────────────────────────── */
.campo { display: block; margin-bottom: var(--e-4); }
.campo > span { display: block; font-size: var(--t-peq); font-weight: 650; margin-bottom: 6px; }
.campo .ajuda { display: block; font-weight: 400; color: var(--texto-2); font-size: var(--t-min); margin-top: 6px; }
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=time], input[type=datetime-local], select, textarea {
  width: 100%; min-height: var(--toque); padding: 10px var(--e-3);
  font: inherit; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--linha-forte);
  border-radius: var(--r-2);
  backdrop-filter: var(--vidro-desfoque);
  -webkit-backdrop-filter: var(--vidro-desfoque);
}
input:focus, select:focus, textarea:focus { border-color: var(--acento-contorno); }
textarea { min-height: 120px; resize: vertical; line-height: 1.4; }
input:disabled, select:disabled, textarea:disabled { opacity: .6; }

/* ─── avisos ───────────────────────────────────────────────────────── */
.aviso {
  padding: var(--e-3); border-radius: var(--r-2); font-size: var(--t-peq);
  border: 1px solid var(--linha); background: var(--superficie-2);
  margin-bottom: var(--e-4);
  backdrop-filter: var(--vidro-desfoque);
  -webkit-backdrop-filter: var(--vidro-desfoque);
}
.aviso-erro   { background: var(--derrota-fundo); border-color: var(--derrota); color: var(--derrota); }
.aviso-ok     { background: var(--vitoria-fundo); border-color: var(--vitoria); color: var(--vitoria); }
.aviso-alerta { background: var(--alerta-fundo);  border-color: var(--alerta);  color: var(--alerta); }

/* ─── utilidades curtas ────────────────────────────────────────────── */
.secao { margin: var(--e-6) 0; }
.secao > header { display: flex; align-items: baseline; gap: var(--e-3); margin-bottom: var(--e-3); }
.secao > header h2 { flex: 1; }
.rotulo { font-size: var(--t-min); font-weight: 800; letter-spacing: .08em;
          text-transform: uppercase; color: var(--texto-3); }
.discreto { color: var(--texto-2); font-size: var(--t-peq); }
.centro { text-align: center; }
.pilha { display: grid; gap: var(--e-3); }
.linha-flex { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Quem pede menos movimento recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ─── a marca ──────────────────────────────────────────────────────────
   O ipê do logo é SVG embutido no cabeçalho, e não uma imagem, porque
   precisa de duas cores que trocam com o tema: as folhas seguem o acento
   (vermelho no claro, azul no escuro) e o tronco segue `--tronco`. Como
   imagem, ele precisaria de dois arquivos e de um `<picture>`. */
.topo .marca .arvore { flex: none; color: var(--acento); }
.topo .marca .arvore path { transition: fill .2s; }
/* O nome é uma palavra só: "Ipê" e "Score" não podem receber o `gap` do
   cabeçalho no meio, senão a marca lê como duas palavras. */
.topo .marca .nome { display: inline; }
.topo .marca .nome b { color: var(--acento); text-shadow: var(--brilho-texto); }