/* ============================================================
   somado · pro.css — página somado Pro (SaaS)
   ============================================================ */

.pro-hero {
  background:
    radial-gradient(900px 460px at 88% -10%, #FFF1E2 0%, transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--color-bg-alt) 100%);
  padding-block: var(--sp-8) var(--sp-8);
}
.pro-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-6); align-items: center; }
.pro-hero h1 { font-size: var(--fs-2xl); margin-block: 0.3rem var(--sp-2); }
.pro-hero__sub { font-size: var(--fs-md); color: var(--color-text-muted); margin-bottom: var(--sp-2); max-width: 46ch; }
.pro-hero__ctx {
  font-size: var(--fs-sm); color: var(--navy-800);
  background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--orange-500);
  border-radius: var(--radius-sm); padding: 0.8rem 1.1rem; max-width: 48ch; margin-bottom: var(--sp-3);
}
.pro-hero__media .imgph { box-shadow: var(--shadow-lg); }
@media (max-width: 900px) {
  .pro-hero__inner { grid-template-columns: 1fr; gap: var(--sp-4); }
  .pro-hero__media { order: -1; }
  .pro-hero__sub, .pro-hero__ctx { max-width: none; }
}

/* O que é */
.pro-what { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-4); align-items: start; }
.pro-what__icon {
  width: 88px; height: 88px; border-radius: var(--radius-lg);
  background: var(--grad-orange); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-orange);
}
.pro-what__icon svg { width: 44px; height: 44px; }
.pro-what h2 { margin-block: 0.3rem var(--sp-2); }
.pro-what p { color: var(--color-text-muted); margin-bottom: var(--sp-2); }
.pro-what strong { color: var(--navy-900); }
@media (max-width: 680px) { .pro-what { grid-template-columns: 1fr; } }

/* Pra quem é — reusa .fit do componentes via home? não, definir aqui */
.fit__col { border-radius: var(--radius-lg); padding: var(--sp-4); border: 1px solid var(--color-border); }
.fit__col--yes { background: var(--color-primary-soft); border-color: #FBD7B0; }
.fit__col--no  { background: #fff; }
.fit__col h3 { margin-bottom: var(--sp-3); }
.fit__col--yes h3 { color: var(--orange-700); }
.fit__redirect { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--color-text-muted); }
.fit__redirect a, .card a { color: var(--orange-700); font-weight: var(--fw-semibold); text-decoration: underline; }

/* Pricing */
.plans { align-items: stretch; }
.plans .plan { height: 100%; }
.plans__note { text-align: center; max-width: 60ch; margin: var(--sp-4) auto 0; font-size: var(--fs-sm); color: var(--color-text-muted); }

/* FAQ */
.faq { margin-top: var(--sp-2); }

/* CTA final */
.cta-final { background: var(--navy-900); }
.cta-final__inner { text-align: center; color: #fff; }
.cta-final__inner h2 { color: #fff; margin-bottom: var(--sp-2); }
.cta-final__inner p { color: #C5CEE3; margin-bottom: var(--sp-2); }
.cta-final__inner .btn { margin-top: var(--sp-2); }