/* =====================================================================
   AHAV · SOBRE (sobre.html)
   Carrega depois de: base.css

   ÍNDICE  (mesma ordem da página)
   1. POR QUE AHAV (painel roxo com a palavra grande e o versículo)
   2. QUEM É A AHAV (título + texto)
   3. VALORES (4 cards)
   4. BASTIDORES (grade de fotos)
   5. CHAMADA FINAL
   6. Responsivo
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. POR QUE AHAV
   --------------------------------------------------------------------- */
.s-porque{padding-top:8px}
.word{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;max-width:1216px;margin-inline:auto}
.word-big{display:flex;flex-direction:column;gap:12px}
.word-big b{font-family:Galline,Georgia,serif;font-weight:700;font-style:italic;font-size:clamp(120px,17vw,250px);line-height:.9;letter-spacing:-.02em;color:#f28643}
.word-big .eyebrow{color:#f4bd51}
.word .stack{display:flex;flex-direction:column;gap:24px}
/* versículo */
.verse{border-radius:32px;background:#f2e9d7;color:#000;padding:28px 32px}
.verse p{font-family:Galline,Georgia,serif;font-weight:700;font-style:italic;font-size:26px;line-height:1.25}
.verse cite{display:block;margin-top:12px;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}


/* ---------------------------------------------------------------------
   2. QUEM É A AHAV
   --------------------------------------------------------------------- */
.page-head{padding-block:96px 16px;display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:end}
.page-head h2 i{color:#6b2ea0}


/* ---------------------------------------------------------------------
   3. VALORES
   --------------------------------------------------------------------- */
.values{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:48px}
.val{border-radius:32px;padding:28px 24px 32px;display:flex;flex-direction:column;gap:12px;min-height:280px}
.val svg{width:28px;height:28px;margin-bottom:auto}
.val h3{font-size:28px;line-height:1.2}
.val p{font-size:15px;line-height:1.6}
/* estrelinha: preta, ou laranja no card branco */
.val .spark{fill:#000}
.val.bg-branco .spark{fill:#f28643}


/* ---------------------------------------------------------------------
   4. BASTIDORES
   --------------------------------------------------------------------- */
.bts-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}
.bts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:240px 240px;gap:20px;margin-top:48px}
.bts .ph{border-radius:32px}
.bts .tall{grid-row:span 2}
.bts .wide{grid-column:span 2}


/* ---------------------------------------------------------------------
   5. CHAMADA FINAL
   --------------------------------------------------------------------- */
.s-cta .panel{padding-block:56px}


/* ---------------------------------------------------------------------
   6. RESPONSIVO
   --------------------------------------------------------------------- */
@media (max-width:1024px){
  .values{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .page-head{padding-block:40px 48px;grid-template-columns:1fr;gap:24px}
  .word,.bts-head{grid-template-columns:1fr;gap:32px}
  .bts{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:180px 180px 180px;gap:12px}
}
@media (max-width:600px){
  .values{grid-template-columns:1fr}
  .val{min-height:0}
  .verse{padding:24px}
  .verse p{font-size:22px}
}