/* ============================================================
   Moldura Macro OS para os formulários (Σ Corporate e be Sigma)
   Só estilo: a marcação dos campos não muda, para não mexer no
   JS de validação nem no envio ao banco.
   ============================================================ */

/* Largura igual à do menu, como no macro-os. */
.ips-hero,
.ips-shell{ box-sizing:border-box; width:100%;
  max-width:var(--st-max); margin-inline:auto; padding-inline:0 }

/* --- Hero: o mesmo cartão branco do macro-os --- */
.ips-hero{ margin-block:4px 12px;
  background:var(--st-card);
  border:1px solid var(--st-line);
  border-radius:var(--st-radius);
  padding:28px 24px;
  display:flex; flex-direction:column; gap:14px }
.ips-eyebrow{ font-family:var(--st-mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--st-accent) }
.ips-hero h1{ margin:0; font-family:var(--st-slab); font-weight:500;
  font-size:clamp(30px,3.4vw,46px); line-height:1.02;
  letter-spacing:-.015em; color:var(--st-ink) }
.ips-hero h1 em{ font-style:normal; color:var(--st-accent) }
.ips-hero p{ margin:0; font-family:var(--st-sans); font-size:14.5px;
  line-height:1.7; color:var(--st-body); max-width:82ch }

/* --- Corpo: painel osso do macro-os --- */
.ips-shell{ margin-block:0 16px;
  background:var(--st-panel);
  border:1px solid var(--st-line);
  border-radius:var(--st-radius);
  padding-block:0 10px }

/* Trilha de etapas: vira a régua de números do macro-os. */
.ips-prog{ padding:14px 24px; border-bottom:2px solid var(--st-ink) }

/* --- Etapa: número grande em laranja + título slab --- */
.ips-step{ padding:26px 24px }
.step-head{ display:grid; grid-template-columns:minmax(0,88px) minmax(0,1fr);
  gap:24px; align-items:start;
  margin-bottom:22px; padding-bottom:16px;
  border-bottom:1px solid var(--st-line) }
.step-n{ font-family:var(--st-slab); font-size:44px; line-height:1;
  color:var(--st-accent);
  background:transparent; border:0; border-radius:0; padding:0 }
.step-head h2{ margin:0; font-family:var(--st-slab); font-weight:500;
  font-size:30px; line-height:1.04; color:var(--st-ink) }
.step-head h2 em{ font-style:normal; color:var(--st-accent) }
.step-head p{ margin:8px 0 0; font-family:var(--st-sans); font-size:14px;
  line-height:1.7; color:var(--st-body) }

@media (max-width:640px){
  .ips-hero,.ips-step{ padding-inline:16px }
  .ips-prog{ padding-inline:16px }
  .step-head{ grid-template-columns:minmax(0,1fr); gap:8px }
  .step-n{ font-size:34px }
  .step-head h2{ font-size:24px }
}