/* THE MASK CUP — COMO FUNCIONA (usa page.css como base) */

.hw-hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Passo a passo: linha vertical ligando os passos */
.hw-steps { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.hw-step {
  position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 18px 18px 18px 16px; clip-path: var(--cut);
  background: linear-gradient(160deg, #131519, #0B0C0F); background: linear-gradient(160deg, light-dark(#ffffff, #131519), light-dark(#f5f6f8, #0B0C0F)); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .15s;
}
.hw-step:hover { box-shadow: inset 0 0 0 1px rgba(79,163,157,.45); }
.hw-step-num { position: absolute; top: 10px; right: 16px; font-family: 'Bebas Neue', sans-serif; font-size: 34px; line-height: 1; color: rgba(194,200,208,.08); color: light-dark(#e4e7ec, rgba(194,200,208,.08)); }
.hw-step .pg-muted { margin: 0; font-size: 13.5px; }

/* Formatos */
.hw-format { overflow: hidden; padding: 22px; }
.hw-format-bg {
  position: absolute; right: -6px; bottom: -22px; font-family: 'Bebas Neue', sans-serif; font-size: 130px; line-height: 1;
  color: rgba(194,200,208,.035); color: light-dark(#eef0f3, rgba(194,200,208,.035)); pointer-events: none;
}
.hw-format-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.hw-format-head h3 { margin: 0; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 32px; color: var(--silver-hi); }
.hw-format .pg-muted { margin: 0 0 14px; }
.hw-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hw-list li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); }
.hw-list .ico { color: var(--teal-hi); flex: 0 0 auto; }
.pg-card.is-gold .hw-list .ico { color: var(--gold-hi); }

/* Status */
.hw-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hw-status > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; background: var(--bg1); box-shadow: inset 0 0 0 1px var(--border); }
.hw-status p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }

/* Regras numeradas */
.hw-rules { margin: 0; padding: 0; list-style: none; counter-reset: r; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.hw-rules li { counter-increment: r; display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.55; color: var(--text); }
.hw-rules li::before { content: counter(r, decimal-leading-zero); flex: 0 0 auto; font-family: 'Bebas Neue', sans-serif; font-size: 20px; line-height: 1.1; color: var(--teal-hi); }

/* Chamada final */
.hw-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 4vw, 40px); clip-path: var(--cut);
  background: radial-gradient(60% 140% at 0% 0%, rgba(217,169,76,.16), transparent 60%), radial-gradient(50% 120% at 100% 100%, rgba(79,163,157,.14), transparent 60%), linear-gradient(160deg, #15161A, #0B0C0F); background: radial-gradient(60% 140% at 0% 0%, rgba(217,169,76,.16), transparent 60%), radial-gradient(50% 120% at 100% 100%, rgba(79,163,157,.14), transparent 60%), linear-gradient(160deg, light-dark(#ffffff, #15161A), light-dark(#f5f6f8, #0B0C0F));
  box-shadow: inset 0 0 0 1px rgba(217,169,76,.25);
}
.hw-cta h2 { margin: 0 0 6px; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(34px, 4.5vw, 52px); line-height: 1; color: var(--silver-hi); }
.hw-cta h2 span { color: var(--gold); }
.hw-cta .pg-muted { margin: 0; }
.hw-cta .g-btn { flex: 0 0 auto; }

@media (max-width: 900px) {
  .hw-status { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hw-steps, .hw-rules, .hw-status { grid-template-columns: 1fr; }
  .hw-cta { flex-direction: column; align-items: stretch; }
}