/* ============================================================
   ZÉ APOSTAS · ABOUT PAGE
   CSS filho da página Sobre.

   Objetivo:
   - Usar app.css como design system pai.
   - Aproveitar user-page.css para painéis/base compartilhada.
   - Cuidar apenas da composição específica da página Sobre.
   - Não altera lógica, HTML ou conteúdo do about.php.
   ============================================================ */

/* ------------------------------------------------------------
   1) SHELL
   Mantém respiro para bottom-nav e evita corte no Telegram Mini App.
   ------------------------------------------------------------ */
.za-about-shell{
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------
   2) PAINÉIS
   A base visual vem do user-page.css/app.css.
   Aqui só refinamos a leitura da página Sobre.
   ------------------------------------------------------------ */
.za-about-panel{
  min-width:0;
  max-width:100%;
  border:1px solid var(--za-line);
  border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.030));
  box-shadow:var(--za-shadow-soft);
  padding:16px;
  overflow:hidden;
}

.za-about-panel--context{
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.10), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.030));
}

.za-about-panel--support{
  background:
    radial-gradient(circle at top left, rgba(251,191,36,.09), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.030));
}

/* ------------------------------------------------------------
   3) PILHA E BLOCOS
   Mantém espaçamento uniforme entre os blocos do texto.
   ------------------------------------------------------------ */
.za-about-stack{
  display:flex;
  flex-direction:column;
  gap:24px;
  min-width:0;
  max-width:100%;
}

.za-about-block{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  max-width:100%;
}

.za-about-block .za-tip-kicker{
  margin:0;
  letter-spacing:.11em;
}

/* ------------------------------------------------------------
   4) TEXTOS
   Texto principal limpo, com mantra mais forte e premium.
   ------------------------------------------------------------ */
.za-about-text{
  margin:0;
  color:var(--za-text-soft);
  font-size:15px;
  line-height:1.6;
  font-weight:500;
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
}

.za-about-text--mantra{
  margin-top:2px;
  color:#fff;
  font-size:22px;
  line-height:1.18;
  font-weight:950;
  letter-spacing:-.03em;
  text-transform:uppercase;
  text-shadow:0 10px 24px rgba(0,0,0,.22);
}

.za-about-support-copy{
  text-align:center;
  color:var(--za-text-soft);
  font-size:13px;
  line-height:1.5;
  opacity:.86;
}

/* ------------------------------------------------------------
   5) COMUNIDADE
   Centraliza CTA e mantém botão no padrão global do app.
   ------------------------------------------------------------ */
.za-about-supporter-line{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:6px;
  min-width:0;
  max-width:100%;
}

.za-about-supporter-line .za-btn{
  width:min(100%, 320px);
}

/* ------------------------------------------------------------
   6) APOIO / PIX
   Caixa de PIX destacada, sem parecer formulário cru.
   ------------------------------------------------------------ */
.za-about-block--support{
  align-items:center;
  text-align:center;
}

.za-about-pix-box{
  width:100%;
  margin-top:4px;
  padding:14px 12px;
  border-radius:18px;
  border:1px dashed rgba(56,189,248,.38);
  background:
    radial-gradient(circle at top, rgba(56,189,248,.10), transparent 38%),
    rgba(2,6,23,.36);
  color:#7dd3fc;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
  line-height:1.45;
  font-weight:800;
  text-align:center;
  word-break:break-all;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

/* ------------------------------------------------------------
   7) MOBILE FINO
   Ajusta proporção sem desmontar o layout.
   ------------------------------------------------------------ */
@media (max-width:420px){
  .za-about-panel{
    padding:15px;
    border-radius:24px;
  }

  .za-about-stack{
    gap:22px;
  }

  .za-about-text{
    font-size:14px;
  }

  .za-about-text--mantra{
    font-size:20px;
    line-height:1.2;
  }

  .za-about-pix-box{
    padding:13px 11px;
    font-size:12.5px;
    border-radius:16px;
  }
}