/* Utilitários locais */
.sm-container{ width:min(1100px, calc(100% - 2rem)); margin-inline:auto }
.sm-h2{ margin:0 0 8px; font-size:clamp(1.6rem, 1.6vw + 1.2rem, 2.2rem) }
.sm-gap{ height:16px }
.sm-slot{ min-height:64px; display:flex; align-items:center; justify-content:center; color:#8a94a6; }
.sm-slot--header{ background:#f6f8fb }
.sm-slot--footer{ background:#0f172a; color:#c7d2fe }

/* ---------- HERO ---------- */
.sm-hero{
  position:relative;
  background:#ffffff;
  padding: clamp(50px, 7vw, 100px) 0;
}
.sm-hero__grid{
  display:grid; gap:28px; align-items:center;
  grid-template-columns: 1.15fr .85fr;
}
.sm-hero__title{ margin:0 0 6px; line-height:1 }
.sm-hero__title-main{ display:block; font-weight:700; font-size:clamp(2rem, 2.2vw + 1.2rem, 3rem); color:#111827 }
.sm-hero__title-sub{ display:block; font-weight:700; font-size:clamp(2rem, 2.2vw + 1.2rem, 3rem); color:#6c4ef7 }
.sm-hero__lead{ margin:10px 0 14px; color:#4b5563; max-width:60ch }
.sm-hero__cta{ margin-top:8px }



.sm-hero__image{
  max-width: 100%;
  height: auto;
  display: block;
}



/* ---------- SEÇÕES GENÉRICAS ---------- */
.sm-section{ padding:56px 0 }
.sm-section__header{ text-align:center; margin-bottom:18px }
.sm-section__desc{ margin:6px auto 0; max-width:62ch; color:#6b7280 }

/* Cards */
.sm-cards{ display:grid; gap:16px }
.sm-cards--3{ grid-template-columns: repeat(3, minmax(220px, 1fr)) }
.sm-cards--4{ grid-template-columns: repeat(4, minmax(220px, 1fr)) }

.sm-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:18px;
  box-shadow: 0 12px 28px rgba(2,6,23,.06);
}
.sm-card__title{ margin:0 0 4px; font-size:1.05rem; color:#111827 }
.sm-card__text{ margin:0; color:#4b5563 }

/* Why bg */
.sm-why{ background:#f7f9fc }

/* ---------- SPLIT (imagem + texto) ---------- */
.sm-split__grid{
  display:grid; gap:22px; align-items:center;
  grid-template-columns: .9fr 1.1fr;
}
.sm-split--reverse .sm-split__grid{ grid-template-columns: 1.1fr .9fr }

.sm-split__content p{ color:#4b5563; margin:0 0 10px; max-width:62ch }
.sm-list{ padding-left:1.1rem; margin:8px 0 0; color:#4b5563 }
.sm-list li{ margin:6px 0 }

.sm-split__image {
  max-width: 90%;
  height: auto;
  border-radius: 12px; /* opcional para seguir o estilo arredondado */
  display: block;
}



/* ---------- PROCESS STRIP ---------- */
.sm-process{
  background:linear-gradient(180deg, #111827 0%, #0b1220 100%);
  color:#e5e7eb;
  padding:28px 0;
}
.sm-process__steps{
  display:flex; flex-wrap:wrap; gap:14px; list-style:none; margin:0; padding:0; justify-content:center
}
.sm-process__steps li{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border:1px dashed rgba(255,255,255,.18);
  border-radius:999px; background:rgba(255,255,255,.03)
}
.sm-process__steps span{
  display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:999px;
  background:#6c4ef7; color:#fff; font-size:.85rem; font-weight:700
}

/* ---------- CTA ---------- */
.sm-cta{
  padding:56px 0; text-align:center; background:#fafbff; border-top:1px solid #eef1f6
}
.sm-cta__wrap p{ margin:6px auto 16px; max-width:60ch; color:#4b5563 }

/* ---------- Responsivo ---------- */
@media (max-width: 1024px){
  .sm-cards--4{ grid-template-columns: repeat(2, minmax(220px,1fr)) }
}
@media (max-width: 920px){
  .sm-hero__grid{ grid-template-columns: 1fr }
  .sm-split__grid{ grid-template-columns: 1fr }
  .sm-cards--3{ grid-template-columns: 1fr }
}