/* Componentes das paginas /vps-windows e /o-que-e-vps. Complementa o CSS da LP e o site-align. */
.sp-section { padding: 4rem 0; }
.sp-section.sp-muted { background: #f8fafc; }
.sp-head { max-width: 42rem; margin: 0 auto 2.5rem; text-align: center; }
.sp-head h2, .sp-prose h2 { color: #0f172a; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; letter-spacing: -.025em; }
.sp-head p { margin-top: .75rem; color: #475569; line-height: 1.625; }
.sp-grid { display: grid; gap: 1.25rem; }
.sp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-grid .card h3 { color: #0f172a; font-size: 1rem; font-weight: 700; }
.sp-grid .card p { margin-top: .5rem; color: #475569; font-size: .875rem; line-height: 1.5; }
.sp-step { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-bottom: .75rem; border-radius: 9999px; background: #2e75f3; color: #fff; font-size: .875rem; font-weight: 700; }
.sp-note { max-width: 48rem; margin: 2rem auto 0; color: #475569; font-size: .9375rem; line-height: 1.625; text-align: center; }
.sp-note a, .sp-prose a, .sp-faq a { color: #1f5fd6; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* Ficha tecnica do topo */
.sp-spec { padding: 1.5rem; border-radius: 1rem; background: #fff; color: #0f172a; box-shadow: 0 20px 25px -5px rgb(0 0 0 / .15); }
.sp-spec h2 { margin-bottom: .75rem; font-size: 1.125rem; font-weight: 700; }
.sp-spec dl { display: grid; gap: 0; }
.sp-spec dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .625rem 0; border-top: 1px solid #e2e8f0; font-size: .875rem; }
.sp-spec dt { color: #64748b; }
.sp-spec dd { color: #0f172a; font-weight: 600; text-align: right; }

/* Artigo */
.sp-crumbs { margin-bottom: 1.25rem; color: #fff; font-size: .875rem; }
.sp-crumbs a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.sp-article-hero { padding: 8rem 0 4rem; color: #fff; }
.sp-article-hero h1 { max-width: 48rem; font-size: 2.75rem; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
.sp-article-hero .sp-lead { max-width: 44rem; margin-top: 1.25rem; color: #fff; font-size: 1.125rem; line-height: 1.625; }
.sp-article-hero .sp-date { margin-top: 1rem; color: #fff; font-size: .875rem; }
.sp-prose { max-width: 46rem; margin: 0 auto; padding: 3.5rem 1.25rem; color: #334155; line-height: 1.75; }
.sp-prose h2 { margin: 2.5rem 0 .875rem; font-size: 1.5rem; line-height: 2rem; }
.sp-prose h2:first-child { margin-top: 0; }
.sp-prose h3 { margin: 1.5rem 0 .5rem; color: #0f172a; font-size: 1.125rem; font-weight: 700; }
.sp-prose p { margin-top: .875rem; }
.sp-prose ul { margin-top: .875rem; padding-left: 1.25rem; list-style: disc; }
.sp-prose li { margin-top: .5rem; }
.sp-table { margin-top: 1.25rem; overflow-x: auto; border: 1px solid #e2e8f0; border-radius: .75rem; }
.sp-table table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .875rem; }
.sp-table th, .sp-table td { padding: .75rem 1rem; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
.sp-table thead th { background: #f1f5f9; color: #0f172a; font-weight: 600; }
.sp-table tbody th { color: #0f172a; font-weight: 600; }
.sp-table tr:last-child th, .sp-table tr:last-child td { border-bottom: 0; }
.sp-faq { max-width: 48rem; margin: 0 auto; display: grid; gap: .75rem; }

@media (max-width: 1023.98px) {
  .sp-grid-3, .sp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
  .sp-grid-3, .sp-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .sp-article-hero { padding: 6rem 0 3rem; }
  .sp-article-hero h1 { font-size: 2.125rem; }
  .sp-section { padding: 3rem 0; }
}