/* Parcelai — site institucional. DRAFT: consome tokens.css, nunca hex cru.
 * Um hex escrito aqui e um token que escapou do sistema. */

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

body {
  margin: 0;
  background: var(--pa-bg);
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.env { width: min(100% - 2.5rem, 1080px); margin-inline: auto; }
.col { max-width: 62ch; }

h1, h2, h3 { margin: 0; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; font-weight: 700; }
h1 { font-size: clamp(2.6rem, 1.9rem + 3.4vw, 4.9rem); }
h2 { font-size: clamp(1.8rem, 1.5rem + 1.5vw, 2.7rem); }
h3 { font-size: 1.16rem; letter-spacing: -.02em; }
p  { margin: 0; text-wrap: pretty; }

a { color: var(--pa-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--pa-accent); outline-offset: 3px; border-radius: 3px; }

.rotulo {
  font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--pa-text-3); margin: 0;
}

/* ── topo ── */
.topo { border-bottom: 1px solid var(--pa-line); position: sticky; top: 0; background: var(--pa-bg); z-index: 10; }
.topo .env { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; }
.assinatura { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.assinatura svg { width: 27px; height: 27px; color: var(--pa-text); --marca-acento: var(--pa-accent); flex: none; }
.assinatura .nome { font-weight: 700; font-size: 1.26rem; letter-spacing: -.045em; }
.endosso {
  font-family: var(--pa-font-endosso); font-size: .63rem; color: var(--pa-text-3);
  border-left: 1px solid var(--pa-line); padding-left: .6rem; margin-left: .15rem; line-height: 1;
}
.endosso b { font-weight: 700; color: var(--pa-text-2); }
.nav { display: flex; gap: 1.5rem; font-size: .92rem; }
.nav a { color: var(--pa-text-2); text-decoration: none; }
.nav a:hover { color: var(--pa-text); }

/* ── faixas ── */
.faixa { padding: clamp(3.5rem, 8vw, 7rem) 0; border-bottom: 1px solid var(--pa-line); }
.faixa > .env { display: flex; flex-direction: column; gap: 2.4rem; }
.cabeca { display: flex; flex-direction: column; gap: .9rem; max-width: 62ch; }

.heroi > .env { gap: 2.9rem; }
.heroi .lead { font-size: clamp(1.15rem, 1rem + .6vw, 1.42rem); color: var(--pa-text-2); max-width: 48ch; line-height: 1.45; }
.acoes { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.botao {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--pa-accent); color: var(--pa-on-accent);
  font-weight: 600; font-size: 1rem; padding: .78rem 1.35rem;
  border-radius: var(--pa-radius); text-decoration: none; border: 0;
}
.botao:hover { filter: brightness(1.08); }
.botao.vazado { background: transparent; color: var(--pa-text); border: 1px solid var(--pa-line); }
.botao.vazado:hover { border-color: var(--pa-text-3); filter: none; }

/* ── cartoes ── */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.cartao {
  background: var(--pa-surface); border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-lg); padding: 1.5rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.cartao h3 { color: var(--pa-text); }
.cartao p { color: var(--pa-text-2); font-size: .95rem; }

/* ── passos: a ordem carrega informacao, por isso e numerada ── */
.passos { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--pa-line); }
.passo {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.4rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--pa-line);
}
.passo .n { font-weight: 700; color: var(--pa-accent); font-variant-numeric: tabular-nums; }
.passo .corpo { display: flex; flex-direction: column; gap: .35rem; max-width: 60ch; }
.passo p { color: var(--pa-text-2); font-size: .96rem; }

/* ── estado: honestidade sobre o que existe ── */
.estados { display: flex; flex-direction: column; gap: .55rem; }
.estado {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  padding: .75rem 0; border-bottom: 1px solid var(--pa-line); font-size: .95rem;
}
.selo {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: 999px; border: 1px solid currentColor; flex: none;
}
.selo.pronto { color: var(--pa-success); }
.selo.andamento { color: var(--pa-info); }
.selo.espera { color: var(--pa-warning); }
.estado .oque { font-weight: 600; }
.estado .nota { color: var(--pa-text-2); font-size: .88rem; }

/* ── rodape ── */
.rodape { padding: 3rem 0 4rem; }
.rodape .env { display: flex; flex-direction: column; gap: 1.5rem; }
.rodape .linha { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.rodape p, .rodape a { font-size: .87rem; color: var(--pa-text-3); }
.rodape .marca-rodape { display: flex; align-items: center; gap: .55rem; }
.rodape .marca-rodape svg { width: 21px; height: 21px; color: var(--pa-text-2); --marca-acento: var(--pa-accent); }

.aviso {
  background: var(--pa-surface); border: 1px solid var(--pa-line);
  border-left: 3px solid var(--pa-warning);
  border-radius: var(--pa-radius); padding: 1rem 1.2rem;
  font-size: .9rem; color: var(--pa-text-2); max-width: 72ch;
}
.aviso b { color: var(--pa-text); }

@media (prefers-reduced-motion: no-preference) {
  .heroi > .env > * { animation: sobe .55s cubic-bezier(.2,.7,.3,1) both; }
  .heroi > .env > *:nth-child(2) { animation-delay: .07s; }
  .heroi > .env > *:nth-child(3) { animation-delay: .14s; }
  @keyframes sobe { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } }
}