.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--alvo);
  padding: 0 24px;
  border: 2px solid var(--marca);
  border-radius: var(--raio-botao);
  background: var(--marca);
  color: var(--branco);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-rapida) var(--ease-padrao),
    color var(--dur-rapida) var(--ease-padrao),
    border-color var(--dur-rapida) var(--ease-padrao),
    box-shadow var(--dur-media) var(--ease-padrao),
    opacity var(--dur-media) var(--ease-padrao),
    transform var(--dur-media) var(--ease-saida);
}

.botao:hover {
  border-color: var(--marca-hover);
  background: var(--marca-hover);
  color: var(--gelo);
  box-shadow: 0 6px 16px rgba(217, 37, 28, 0.22);
  transform: translateY(-1px);
}

/* Apertar: o botão afunda um pouco, resposta imediata ao toque */
.botao:active {
  box-shadow: none;
  transform: translateY(0) scale(0.98);
  transition-duration: 60ms;
}

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

.botao--contorno {
  background: transparent;
  color: var(--marca);
}

.botao--contorno:hover {
  background: var(--marca-clarinho);
  color: var(--marca-escuro);
  box-shadow: none;
}

.botao--texto {
  border-color: transparent;
  background: transparent;
  color: var(--marca);
  padding: 0 12px;
}

.botao--texto:hover {
  border-color: transparent;
  background: var(--marca-clarinho);
  color: var(--marca-escuro);
  box-shadow: none;
  transform: none;
}

.voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  color: var(--marca);
  font-weight: 700;
  text-decoration: none;
}

.voltar::before {
  content: "‹";
  font-size: 1.4em;
  line-height: 1;
  transition: transform var(--dur-media) var(--ease-saida);
}

.voltar:hover::before {
  transform: translateX(-4px);
}

.topo .voltar {
  color: var(--branco);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  font-size: var(--pequeno);
  font-weight: 600;
}

.chip--escuro {
  border-color: var(--preto);
  background: var(--preto);
  color: var(--branco);
}

.chip--area {
  border-color: var(--marca-claro);
  background: var(--marca-claro);
  color: var(--titulo);
}

.chip--marca {
  border-color: var(--marca);
  background: var(--marca);
  color: var(--branco);
}

.cartao {
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

/* Cartão que é link: levanta no hover para mostrar que clica */
a.cartao {
  transition:
    border-color var(--dur-rapida) var(--ease-padrao),
    box-shadow var(--dur-media) var(--ease-padrao),
    transform var(--dur-media) var(--ease-saida);
}

a.cartao:hover {
  box-shadow: 0 12px 30px rgba(9, 9, 11, 0.1);
  transform: translateY(-3px);
}

.cartao--centro {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
}

.cartao--estreito {
  max-width: 420px;
}

.subtitulo {
  color: var(--texto-2);
}

.nota {
  color: var(--texto-3);
  font-size: var(--pequeno);
  text-align: center;
}

.campo {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
  font-weight: 600;
}

.campo__opcional {
  color: var(--texto-3);
  font-weight: 400;
}

.campo input {
  width: 100%;
  min-height: var(--alvo);
  padding: 0 14px;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-botao);
  background: var(--superficie);
  font-weight: 400;
  transition:
    border-color var(--dur-rapida) var(--ease-padrao),
    box-shadow var(--dur-media) var(--ease-padrao);
}

.campo input:hover {
  border-color: var(--texto-3);
}

.campo input:focus-visible {
  border-color: var(--marca);
  outline: none;
  box-shadow: 0 0 0 4px rgba(217, 37, 28, 0.15);
}

.campo__ajuda {
  margin: 0;
  color: var(--texto-3);
  font-size: var(--pequeno);
  font-weight: 400;
}

.campo__erro {
  margin: 0;
  color: var(--erro);
  font-size: var(--pequeno);
  font-weight: 600;
  animation: tremer 360ms var(--ease-padrao);
}

.campo--com-erro input {
  border-color: var(--erro);
}

/* ---------- Barra de afinidade ----------
   Enche de 0 até --valor ao aparecer. Em lista, --i escalona as barras. */

.barra {
  height: 6px;
  border-radius: var(--raio-pilula);
  background: var(--marca-claro);
  overflow: hidden;
}

.barra__valor {
  display: block;
  width: var(--valor, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--marca);
  animation: barra-encher var(--dur-preencher) var(--ease-saida) backwards;
  animation-delay: calc(300ms + var(--i, 0) * var(--escalonar));
}

.barra--escura .barra__valor {
  background: var(--preto);
}

@keyframes barra-encher {
  from {
    width: 0;
  }
}

/* ---------- Anel de afinidade ----------
   O traço corre de 0 até --valor; o número conta junto (js/movimento.js).
   No fim, um "pulo" curto marca que terminou. */

.anel {
  --tamanho: 120px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tamanho);
  height: var(--tamanho);
  animation: anel-pulo 420ms var(--ease-mola) calc(var(--dur-preencher) + 250ms) both;
}

.anel svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.anel__fundo {
  fill: none;
  stroke: var(--marca-claro);
  stroke-width: 8;
}

.anel__valor {
  fill: none;
  stroke: var(--marca);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: calc(326.7 - 326.7 * var(--valor) / 100);
  animation: anel-encher var(--dur-preencher) var(--ease-saida) 250ms backwards;
}

.anel__numero {
  font-size: 1.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@keyframes anel-encher {
  from {
    stroke-dashoffset: 326.7;
  }
}

@keyframes anel-pulo {
  50% {
    transform: scale(1.06);
  }
}

/* ---------- Avisos ---------- */

.mensagens {
  display: grid;
  gap: 8px;
  max-width: var(--largura);
  margin: 0 auto 24px;
  padding: 0;
  list-style: none;
}

.mensagem {
  padding: 12px 16px;
  border-left: 4px solid var(--tinta);
  border-radius: var(--raio-botao);
  background: var(--superficie);
  box-shadow: var(--sombra);
  animation: mensagem-chega var(--dur-lenta) var(--ease-mola) backwards;
}

.mensagem:nth-child(2) {
  animation-delay: var(--escalonar);
}

.mensagem:nth-child(3) {
  animation-delay: calc(2 * var(--escalonar));
}

@keyframes mensagem-chega {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
  }
}

.mensagem--success {
  border-color: var(--sucesso);
}

.mensagem--warning {
  border-color: var(--alerta);
}

.mensagem--error {
  border-color: var(--erro);
}

.aviso {
  padding: 12px 16px;
  border-left: 4px solid var(--marca);
  border-radius: var(--raio-botao);
  background: var(--marca-clarinho);
}

.vazio {
  padding: 32px;
  border: 1.5px dashed var(--linha);
  border-radius: var(--raio);
  text-align: center;
  color: var(--texto-2);
  animation: aparecer var(--dur-lenta) var(--ease-padrao) both;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pilha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}


/* ---------- Botões sólidos (regra do painel: nenhum botão fantasma) ----------
   .botao é o principal (vermelho). As variantes abaixo trocam só o fundo:
   todas são preenchidas, sem borda aparente e com alvo de 48px. */

.botao--secundario {
  border-color: var(--preto-2);
  background: var(--preto-2);
  color: var(--branco);
}

.botao--secundario:hover {
  border-color: var(--preto);
  background: var(--preto);
  color: var(--branco);
  box-shadow: 0 6px 16px rgba(9, 9, 11, 0.2);
}

.botao--suave {
  border-color: var(--marca-claro);
  background: var(--marca-claro);
  color: var(--marca-escuro);
}

.botao--suave:hover {
  border-color: #f9d6d3;
  background: #f9d6d3;
  color: var(--marca-escuro);
  box-shadow: none;
}

.botao--neutro {
  border-color: var(--gelo);
  background: var(--gelo);
  color: var(--preto-2);
}

.botao--neutro:hover {
  border-color: #e4deda;
  background: #e4deda;
  color: var(--preto);
  box-shadow: none;
}

.botao--perigo {
  border-color: var(--erro);
  background: var(--erro);
  color: var(--branco);
}

.botao--perigo:hover {
  border-color: #b91c1c;
  background: #b91c1c;
  color: var(--branco);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.22);
}

.botao--icone {
  width: var(--alvo);
  padding: 0;
}