/* =========================================================================
   ZENYO LAB · css/sobre.css
   Estilos exclusivos de sobre.html ("Quem é o Hexo?").
   Carregar DEPOIS de css/styles.css. Só usa tokens de lá (var()).
   ========================================================================= */

/* ---------- Hero da página ------------------------------------------------ */
.sobre-hero .page-hero__card { position: relative; overflow: hidden; }
.sobre-hero .page-hero__card::after {
  content: ''; position: absolute; right: -10%; top: -20%; width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(46, 230, 214, .16) 0%, rgba(46, 230, 214, 0) 65%);
  pointer-events: none;
}
.sobre-hero__grid { display: grid; gap: 32px; align-items: center; position: relative; z-index: 1; }
@media (min-width: 900px) { .sobre-hero__grid { grid-template-columns: 1.15fr .85fr; gap: 48px; } }
.sobre-hero__content { min-width: 0; }
.sobre-hero__title { margin: 18px 0 18px; color: var(--branco); font-size: clamp(2rem, 5.2vw, 3.4rem); text-wrap: balance; }
.sobre-hero__intro { font-size: 1.15rem; line-height: 1.55; color: var(--branco-leitoso); max-width: 52ch; }
.sobre-hero__mascot { width: 180px; height: 180px; position: relative; z-index: 1; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); }
@media (min-width: 600px) { .sobre-hero__mascot { width: 240px; height: 240px; } }
.sobre-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.sobre-hero__ctas .btn-outline { color: var(--branco); }

/* ---------- Blocos de leitura (coluna de 680px) -------------------------- */
.sobre-bloco { padding-top: 48px; }
@media (min-width: 1024px) { .sobre-bloco { padding-top: 64px; } }
.sobre-bloco--first { padding-top: 40px; }
@media (min-width: 1024px) { .sobre-bloco--first { padding-top: 56px; } }

.sobre-bloco__inner { position: relative; max-width: 680px; margin: 0 auto; }
.sobre-bloco__inner > h2:first-child { margin-top: 0; }
.sobre-bloco .prose h2 { margin-top: 0; }
.sobre-bloco .prose p + p { margin-top: 0; }
.sobre-bloco .prose ul { margin-top: 16px; }

/* Mini-mascote decorativa nas margens (só em desktop, nunca em cima do texto) */
.sobre-bloco__mascot { display: none; }
@media (min-width: 1024px) {
  .sobre-bloco__mascot {
    display: block; position: absolute; top: 4px; width: 96px; height: 96px;
    opacity: .9; pointer-events: none;
    filter: drop-shadow(0 10px 18px rgba(123, 16, 172, .18));
  }
  .sobre-bloco__mascot--left { left: -128px; transform: rotate(-6deg); }
  .sobre-bloco__mascot--right { right: -128px; transform: rotate(6deg); }
}

/* Parágrafo de destaque dentro do bloco */
.sobre-callout {
  margin-top: 20px; padding: 18px 20px; border-radius: var(--raio-md);
  background: var(--lilas-bancada); border-left: 4px solid var(--roxo-zenyo);
  font-weight: 600;
}

/* ---------- Alas (grade de cards) ---------------------------------------- */
.sobre-alas .section-head p:not(.kicker) { margin-left: auto; margin-right: auto; }

/* ---------- FAQ (acordeão) ---------------------------------------------- */
.sobre-faq { border-top: 1px solid var(--lilas-linha); margin-top: 20px; }
.sobre-faq summary:focus-visible { border-radius: 6px; }

/* ---------- Bloco final --------------------------------------------------- */
.sobre-final__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.sobre-final__ctas .btn-outline { color: var(--branco); }
.sobre-final__social { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.sobre-final__social a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.sobre-final__social svg { width: 20px; height: 20px; flex: 0 0 auto; }