/* ============================================================
   LP — Corrimão de escada inox · ângulo segurança no dia a dia
   Vieses: empatia / vítima identificável (quem usa a escada), cobertura (qualquer escada)
   ============================================================ */

/* ---------- Visual do hero ---------- */
.escada-visual { position: relative; }
.escada-visual .media { aspect-ratio: 4 / 5; border-radius: var(--r-lg); box-shadow: var(--shadow-soft); display: grid; place-items: center; }
.escada-visual .media-emblem { width: 96px; height: 96px; }
.escada-visual .media-emblem svg { width: 44px; height: 44px; }

/* ---------- Para quem faz diferença (empatia) ---------- */
.people-grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.person-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem 1.5rem; text-align: center; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); }
.person-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: transparent; }
.person-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; margin: 0 auto 1.1rem; }
.person-ic svg { width: 32px; height: 32px; }
.person-card h3 { font-size: 1.08rem; }
.person-card p { font-size: 0.9rem; color: var(--text-mute); margin-top: 0.4rem; }

/* ---------- Tipos de escada (cobertura) ---------- */
.stairtypes { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.stairtype { display: flex; gap: 1rem; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem 1.4rem; transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.stairtype:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.stairtype .si { width: 50px; height: 50px; border-radius: 13px; background: var(--paper-warm); color: var(--accent-strong); display: grid; place-items: center; flex: none; }
.stairtype .si svg { width: 26px; height: 26px; }
.stairtype b { font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 1rem; }
.stairtype span { font-size: 0.85rem; color: var(--text-mute); display: block; margin-top: 2px; }

@media (max-width: 980px) {
  .people-grid { grid-template-columns: repeat(2, 1fr); }
  .stairtypes { grid-template-columns: repeat(2, 1fr); }
  .escada-visual { max-width: 420px; margin-inline: auto; width: 100%; }
}
@media (max-width: 560px) {
  .people-grid, .stairtypes { grid-template-columns: 1fr; }
}