/* ══════════════════════════════════════════════════════════════════════════
   guarantee.css — peças exclusivas da página de garantia.
   Carrega DEPOIS de legal.css (cabeçalho, grade, índice e prosa vêm de lá).
   Só tokens — nenhum valor bruto de cor.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Introdução: cartão-manifesto + três pilares ────────────────────────── */
.guarantee-intro { padding-block: var(--sec-y-sm); }

.g-hero {
  display: flex; gap: var(--sp-6); align-items: flex-start;
  padding: var(--sp-8);
  background: var(--forest); color: var(--glow-50);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}
.g-hero-icon {
  flex: 0 0 auto; width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .10); color: var(--lime-300);
}
.g-hero-icon svg { width: 30px; height: 30px; }
.g-hero h2 { color: var(--white); font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.g-hero p { color: rgba(237, 243, 212, .82); line-height: var(--lh-body); max-width: 62ch; }

@media (max-width: 620px) {
  .g-hero { flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); }
}

/* ── Pilares ────────────────────────────────────────────────────────────── */
.g-pillars {
  display: grid; gap: var(--sp-5); margin-top: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.g-pillar {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--sh-sm);
}
.g-pillar-icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-sm); margin-bottom: var(--sp-4);
  background: var(--glow-50); color: var(--green-800);
}
.g-pillar h3 { font-size: var(--fs-h4); color: var(--ink); margin-bottom: var(--sp-2); }
.g-pillar p { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.6; }

/* ── Caixa de destaque dentro da prosa ──────────────────────────────────── */
.g-alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-5);
  background: var(--glow-50); border: 1px solid var(--lime-300);
  border-radius: var(--r-md); margin: var(--sp-6) 0;
}
.g-alert svg { flex: 0 0 auto; color: var(--green-800); margin-top: 2px; }
.g-alert p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }

/* ── Passos numerados (§6 · como reportar) ──────────────────────────────── */
/* É um <ol> dentro de .legal-prose — anulamos o marcador losango herdado. */
.g-steps { display: flex; flex-direction: column; gap: var(--sp-4); margin: var(--sp-2) 0 var(--sp-4); }
.g-steps li { display: flex; gap: var(--sp-4); align-items: flex-start; padding-left: 0; }
.g-steps li::before { content: none; display: none; }
.g-step-num {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--green-800); color: var(--white);
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.g-step-text { line-height: 1.62; }