/* ════════════════════════════════════════════════════════════
   /nota — cartão do link compartilhado da nota da vida financeira.
   Só esta página carrega este arquivo. Vem sobre tokens.css e
   site.css: as cores, as fontes e os botões são os do site.
   Nada se mexe sozinho; o anel preenche uma vez e respeita o
   "menos movimento".
   ════════════════════════════════════════════════════════════ */

#conteudo {
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: 32px 16px;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--teal) 18%, transparent), transparent 70%)
      right -12vw top -16vh / min(64vw, 680px) min(64vw, 680px) no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--mint) 24%, transparent), transparent 70%)
      left -10vw bottom -18vh / min(50vw, 560px) min(50vw, 560px) no-repeat;
}

.nota-cartao {
  width: 100%; max-width: 460px;
  padding: 36px 28px 26px; border-radius: var(--r5);
  text-align: center;
}

/* marca */
.nota-cartao .nota-marca { display: inline-flex; gap: 11px; margin: 0 auto 18px; }
.nota-cartao .nota-marca img { width: 40px; height: 40px; }
.nota-marca .brand-name { font-size: 20px; color: var(--tx-1); }
.nota-kicker { display: flex; justify-content: center; margin-bottom: 22px; }

/* anel da nota: verde, como no app */
.nota-placar[hidden] { display: none; }
.nota-anel { position: relative; width: 168px; height: 168px; margin: 0 auto 10px; }
.nota-anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.nota-anel-trilho { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.nota-anel-arco {
  fill: none; stroke: var(--verde); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.nota-anel-arco.vazio { stroke: none; }
.nota-anel-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nota-anel-num b { font: 800 50px/1 var(--f-display); letter-spacing: -1px; color: var(--tx-1); }
.nota-anel-num span { margin-top: 4px; font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }

/* título, faixa e texto */
.nota-cartao h1 {
  margin: 4px auto 0; max-width: 18ch;
  font-size: clamp(26px, 6.4vw, 32px); line-height: 1.15; color: var(--tx-1);
}
.nota-valor { color: var(--verde-dk); }
.nota-faixa {
  display: inline-block; margin-top: 14px; padding: 6px 16px; border-radius: var(--rpill);
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faixa, var(--tx-2));
  background: var(--bg-suave);
  background: color-mix(in srgb, var(--faixa, var(--tx-2)) 12%, var(--surface));
}
.nota-faixa[hidden] { display: none; }
.nota-lead { margin: 16px auto 0; max-width: 38ch; font-size: var(--fs-md); line-height: 1.6; color: var(--tx-2); text-wrap: balance; }
.nota-lead strong { color: var(--verde-dk); }

/* ações: o primário descobre a própria nota; o link leva ao hub /agendar */
.nota-acoes { display: grid; gap: 6px; justify-items: center; margin-top: 26px; }
.nota-acoes .btn { width: 100%; white-space: normal; }
.nota-acoes .btn-link { min-height: 44px; justify-content: center; text-align: center; }

/* rodapé do cartão */
.nota-rodape { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.nota-rodape .foot {
  display: inline-block; padding: 6px 0;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .04em; color: var(--tx-3);
  text-wrap: balance;
  transition: color var(--tf) var(--ease);
}
.nota-rodape .foot:hover { color: var(--verde-dk); }
.nota-rodape .disc { margin-top: 10px; font-size: var(--fs-2xs); line-height: 1.65; color: var(--tx-3); text-wrap: pretty; }
.nota-rodape .sem-quebra { white-space: nowrap; }
.nota-rodape .disc a { color: var(--verde-dk); text-decoration: underline; text-underline-offset: 2px; }
.nota-rodape .disc .link-cookies { font-size: inherit; line-height: inherit; color: var(--verde-dk); }

@media (max-width: 400px) {
  #conteudo { padding: 20px 12px; }
  .nota-cartao { padding: 28px 18px 22px; }
  .nota-anel { width: 148px; height: 148px; }
  .nota-anel-num b { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .nota-anel-arco { transition: none; }
}