/* Vitrine e páginas públicas */
.vitrine {
  max-width: 1040px; margin: 0 auto; padding: 28px 16px 40px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: center;
}
.sobretitulo { font: 500 .85rem/1.4 var(--sans); color: var(--suave); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1.2em; }
.vitrine h1 { font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: 1.02; margin-bottom: .45em; }
.vitrine h1 em { color: var(--violeta-claro); }
.lead { font-size: 1.2rem; color: #d6d0e3; max-width: 34em; }
.acao-compra { margin: 1.8em 0 1.2em; }
.acao-compra .botao { font-size: 1.05rem; padding: 16px 28px; }
.botao.desativado { opacity: .45; cursor: not-allowed; pointer-events: auto; }
.estado-vendas { font: .92rem/1.5 var(--sans); color: var(--alerta); margin: .9em 0 0; min-height: 1.4em; }
.ironia { font-style: italic; color: var(--suave); }
.vitrine-visual { display: grid; place-items: center; min-height: 260px; }
.vitrine-visual .esfera { --tam: min(300px, 62vw); }

.ja-tenho, .como-funciona, .independente { max-width: 1040px; margin: 0 auto; padding: 24px 16px; }
.ja-tenho h2, .como-funciona h2 { font-size: 1.5rem; }
.linha-codigo { display: flex; gap: 10px; max-width: 460px; }
.linha-codigo .campo { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.passos { list-style: none; counter-reset: passo; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.passos li {
  counter-increment: passo; background: var(--fundo-2); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 18px 18px 58px; position: relative;
}
.passos li::before {
  content: counter(passo); position: absolute; left: 18px; top: 16px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 600 .85rem/1 var(--sans); color: var(--violeta-claro); border: 1px solid rgba(142, 108, 240, .5);
}
.passos strong { font-weight: 700; display: block; margin-bottom: .2em; }
.frase-central { margin: 2em 0 0; font-style: italic; font-size: 1.25rem; color: #cfc6e6; text-align: center; }
.independente p { color: var(--suave); font-size: .98rem; text-align: center; }

.doacao { background: var(--fundo-2); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; margin: 1.2em 0; }
.doacao code { font-family: var(--mono); font-size: .95rem; word-break: break-all; }
.faq dt { font-weight: 700; margin-top: 1.4em; }
.faq dd { margin: .4em 0 0; color: #d6d0e3; }

@media (max-width: 760px) {
  .vitrine { grid-template-columns: 1fr; gap: 8px; padding-top: 8px; }
  .vitrine-visual { order: -1; min-height: 210px; }
  .vitrine-visual .esfera { --tam: 170px; }
  .passos { grid-template-columns: 1fr; }
  .linha-codigo { flex-direction: column; }
  .menu a { padding: 8px 6px; }
}
/* "originalidade" riscada à mão: continua legível */
.riscado { text-decoration: none; position: relative; display: inline-block; }
.riscado::after {
  content: ""; position: absolute; left: -3%; right: -3%; top: 52%; height: 2px; border-radius: 2px;
  background: var(--violeta-claro); transform: rotate(-3deg); opacity: .9;
}
.faq dd p { margin: 0 0 .7em; }
/* Mascote de Cronos à esquerda das perguntas frequentes (decorativo) */
.faq dt { position: relative; padding-left: 46px; min-height: 36px; display: flex; align-items: center; }
.faq dt::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 36px; height: 36px;
  background: url("../img/cronos-mascote.png") center / contain no-repeat;
}
.faq dd { margin-left: 46px; }
@media (max-width: 520px) {
  .faq dt { padding-left: 38px; min-height: 30px; }
  .faq dt::before { width: 30px; height: 30px; }
  .faq dd { margin-left: 0; }
}