/* Quatro etapas da Home, conforme referência enviada pelo proprietário. */
.hp-how-it-works .hp-section-header { max-width:none; margin:0 auto 32px; text-align:center; align-items:center; }
.hp-how-it-works .hp-section-header h2 { font-size:38px; font-weight:700; line-height:1.2; margin-bottom:14px; }
.hp-how-it-works .hp-section-header .hp-text-primary { color:#ef3d45; }
.hp-how-it-works .hp-section-header p { font-size:18px; line-height:1.6; max-width:760px; }
.hp-how-it-works .hp-steps-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; padding-top:0; }
.hp-how-it-works .hp-step-card {
  --step-badge:#ef3d45; --step-icon-color:#ea580c; --step-icon-bg:#fff4e8;
  --step-icon:url('icons/how-cart.svg');
  position:relative; padding:40px 24px 32px; min-width:0; min-height:320px;
  border:1px solid var(--line); border-radius:20px; background:var(--surface); text-align:center;
}
.hp-how-it-works .hp-step-card:nth-child(2) { --step-badge:#0f9d50; --step-icon-color:#0f9d50; --step-icon-bg:#dcfce7; --step-icon:url('icons/how-chat.svg'); }
.hp-how-it-works .hp-step-card:nth-child(3) { --step-badge:#2868ed; --step-icon-color:#2868ed; --step-icon-bg:#dbeafe; --step-icon:url('icons/how-phone.svg'); }
.hp-how-it-works .hp-step-card:nth-child(4) { --step-badge:#df1f7e; --step-icon-color:#df1f7e; --step-icon-bg:#fce7f3; --step-icon:url('icons/how-play.svg'); }
.hp-how-it-works .hp-step-number {
  position:absolute; top:-18px; right:-10px; display:grid; place-items:center;
  width:40px; height:40px; margin:0; padding:0; border:0; border-radius:50%;
  background:var(--step-badge); color:#fff; font-size:19px; line-height:1; font-weight:700;
}
.hp-how-it-works .hp-step-icon { display:grid; place-items:center; width:76px; height:76px; margin:0 auto; border-radius:18px; background:var(--step-icon-bg); color:var(--step-icon-color); }
.hp-how-it-works .hp-step-icon::before { content:''; display:block; width:32px; height:32px; background:currentColor; -webkit-mask:var(--step-icon) center/contain no-repeat; mask:var(--step-icon) center/contain no-repeat; }
.hp-how-it-works .hp-step-card h3 { margin:22px 0 12px; font-size:20px; font-weight:700; line-height:1.45; letter-spacing:-.025em; color:var(--text); }
.hp-how-it-works .hp-step-card p { margin:0; color:var(--muted); font-size:17px; line-height:1.6; }
:root[data-theme="dark"] .hp-how-it-works .hp-section-header .hp-text-primary { color:#ff7d85; }
:root[data-theme="dark"] .hp-how-it-works .hp-step-card { --step-icon-color:#ffad70; --step-icon-bg:#3b271b; }
:root[data-theme="dark"] .hp-how-it-works .hp-step-card:nth-child(2) { --step-icon-color:#6ee7a2; --step-icon-bg:#153625; }
:root[data-theme="dark"] .hp-how-it-works .hp-step-card:nth-child(3) { --step-icon-color:#8cb6ff; --step-icon-bg:#1a2e50; }
:root[data-theme="dark"] .hp-how-it-works .hp-step-card:nth-child(4) { --step-icon-color:#ff8ac0; --step-icon-bg:#3f1e30; }
@media(max-width:1050px) {
  .hp-how-it-works .hp-steps-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 28px; }
}
@media(max-width:600px) {
  .hp-how-it-works .hp-section-header { margin-bottom:32px; }
  .hp-how-it-works .hp-section-header h2 { font-size:30px; }
  .hp-how-it-works .hp-section-header p { font-size:16px; }
  .hp-how-it-works .hp-steps-grid { grid-template-columns:minmax(0,1fr); gap:30px; }
  .hp-how-it-works .hp-step-card { padding:32px 24px 28px; min-height:0; }
  .hp-how-it-works .hp-step-number { right:-8px; }
  .hp-how-it-works .hp-step-card h3 { font-size:20px; margin-top:20px; }
  .hp-how-it-works .hp-step-card p { font-size:16px; }
}