/* Apoie. Topo com a ficha do que é gratuito, os dois jeitos de doar e o
 * que está em estudo, ligado pelo fio como uma linha do tempo curta. */

.apoie-topo-lado { display: grid; gap: var(--e-6); align-content: end; }

@media (min-width: 1024px) {
  .apoie-topo {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--e-5);
    align-items: end;
  }
  .apoie-topo > div:first-child { grid-column: 1 / span 7; }
  .apoie-topo-lado { grid-column: 8 / -1; }
  .apoie-topo h1 { max-width: 12ch; }
}

/* Ficha: pares rótulo/valor em mono, separados por fio. */
.ficha { display: grid; margin: 0; border-top: 1px solid var(--line); }
.ficha > div {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--line);
}
.ficha dt {
  font-family: var(--f-dado);
  font-weight: 500;
  font-size: var(--fs-etiqueta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx3);
}
.ficha dd { margin: 0; font-weight: 700; text-align: right; }

/* ---------- Doar ---------- */

.doacao { display: grid; gap: var(--e-5); }
@media (min-width: 900px) {
  .doacao { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.doacao-painel {
  display: grid;
  align-content: start;
  gap: var(--e-4);
  padding: clamp(24px, 3vw, 40px);
}
.doacao-painel h3 { max-width: 24ch; }
.doacao-painel .acao { margin-top: var(--e-2); }
.doacao-painel--pix { background: var(--void); }

.chave-pix {
  display: block;
  padding: var(--e-4) var(--e-5);
  border: 1px dashed var(--line3);
  border-radius: var(--r-cartao);
  background: var(--s1);
  font-size: clamp(0.9375rem, 1.9vw, 1.375rem);
  line-height: 1.4;
  overflow-wrap: anywhere;
  user-select: all;
}

/* ---------- O que vem por aí ---------- */

.planos {
  list-style: none;
  display: grid;
  gap: var(--e-7);
  margin-bottom: var(--e-7);
}
.plano {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--e-5);
}
.plano .no { margin-top: 2px; }
.plano:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 30px;
  bottom: calc(-1 * var(--e-7) + 6px);
  width: 2px;
  background: var(--wire-line);
}
.plano h3 { margin: var(--e-2) 0 var(--e-4); }
.plano--estudo .lista-ok .icone { color: var(--wire); }

@media (min-width: 900px) {
  .planos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); }
  .plano { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-content: start; }
  .plano:not(:last-child)::after {
    left: 28px;
    right: calc(-1 * var(--e-6) + 4px);
    top: 9px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
}