/* ============================================================
   somado · home.css — estilos da LP principal
   ============================================================ */

/* ---- Hero ---- */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 500px at 85% -10%, #FFF1E2 0%, transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--color-bg-alt) 100%);
  padding-block: var(--sp-8) var(--sp-10);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-6);
  align-items: center;
}
.hero h1 {
  font-size: var(--fs-4xl);
  margin-block: 0.4rem var(--sp-2);
}
.hero__sub {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  max-width: 30ch;
  margin-bottom: var(--sp-3);
}
.hero__cta { margin-bottom: var(--sp-2); }
.hero__reassure {
  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.85rem 1.1rem;
  max-width: 46ch;
  margin-bottom: var(--sp-2);
}
.hero__cred { font-size: var(--fs-xs); color: var(--color-text-muted); }
.hero__media .imgph { box-shadow: var(--shadow-lg); }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-4); }
  .hero h1 { font-size: var(--fs-2xl); }
  .hero__sub { max-width: none; }
  .hero__media { order: -1; }
}

/* ---- Diagnóstico (seção 3) ---- */
.diag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  align-items: center;
}
.diag__text h2 { margin-block: 0.4rem var(--sp-2); }
.diag__text p { color: var(--color-text-muted); margin-bottom: var(--sp-2); }
.diag__text strong { color: var(--navy-900); }
.diag__box {
  background: var(--navy-900);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-lg);
}
.diag__box-title { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.diag__box-title strong { color: var(--orange-400); }
.diag__box .checklist li { color: #DDE3F1; font-size: var(--fs-sm); }
.diag__box .checklist li strong { color: #fff; }
.diag__box .checklist svg { color: var(--orange-400); }
.diag__close { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid hsl(220 30% 35% / .5); font-size: var(--fs-sm); color: #C5CEE3; }
@media (max-width: 860px) { .diag { grid-template-columns: 1fr; } }

/* ---- Pilares (seção 4) ---- */
.pillar {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pillar--featured { border: 2px solid var(--orange-500); box-shadow: var(--shadow-orange); }
.pillar h3 { margin-bottom: 0.5rem; }
.pillar p { color: var(--color-text-muted); font-size: var(--fs-sm); }
.pillar__note {
  display: block; margin-top: var(--sp-2); font-size: var(--fs-xs);
  color: var(--orange-700); font-weight: var(--fw-semibold);
  background: var(--color-primary-soft); padding: 0.6rem 0.8rem; border-radius: var(--radius-sm);
}
.solucao__close { text-align: center; max-width: 60ch; margin: var(--sp-5) auto 0; font-weight: var(--fw-semibold); color: var(--navy-900); }

/* ---- Prova social (seção 5) ---- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); text-align: center; margin-bottom: var(--sp-4); }
.stat__num { display: block; font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); background: var(--grad-orange); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.stat__label { display: block; color: #C5CEE3; font-size: var(--fs-sm); margin-top: 0.4rem; }
.prova__text { text-align: center; max-width: 64ch; margin: 0 auto var(--sp-5); color: #C5CEE3; }
.prova__shots .imgph { background: repeating-linear-gradient(45deg,#1A2A4F,#1A2A4F 14px,#22335c 14px,#22335c 28px); border-color: var(--orange-400); color: #fff; }
.prova__shots .imgph__label { color: #fff; }
@media (max-width: 680px) { .stats { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* ---- Portfólio (seção 6) ---- */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
@media (max-width: 860px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .portfolio-grid { grid-template-columns: 1fr; } }

/* ---- Antes / Depois (seção 7) ---- */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ba__col { border-radius: var(--radius-lg); padding: var(--sp-4); }
.ba__col--before { background: #EEF1F7; color: var(--color-text-muted); }
.ba__col--after  { background: var(--navy-900); color: #fff; }
.ba__head { display: inline-block; font-weight: var(--fw-extrabold); font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.ba__col--before .ba__head { color: var(--navy-700); }
.ba__col--after .ba__head { color: var(--orange-400); }
.ba__col--before li { padding: 0.6rem 0; border-bottom: 1px solid #DCE1EC; font-size: var(--fs-sm); }
.ba__col--before li:last-child { border-bottom: none; }
.ba__col--after li { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.6rem 0; border-bottom: 1px solid hsl(220 30% 35% / .5); font-size: var(--fs-sm); }
.ba__col--after li:last-child { border-bottom: none; }
.ba__col--after svg { width: 20px; height: 20px; flex: none; color: var(--orange-400); margin-top: 2px; }
@media (max-width: 760px) { .ba { grid-template-columns: 1fr; } }

/* ---- Pra quem é (seção 8) ---- */
.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: var(--color-bg-alt); }
.fit__col h3 { margin-bottom: var(--sp-3); }
.fit__col--yes h3 { color: var(--orange-700); }
.fit__col a { color: var(--orange-700); font-weight: var(--fw-semibold); text-decoration: underline; }

/* ---- Pacotes (seção 10) ---- */
.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); }

/* ---- CTA final (seção 11) ---- */
.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); }
.cta-final__reinforce { font-size: var(--fs-sm); margin-top: var(--sp-3) !important; }