/* ======================= HERO ======================= */

#heroTitle{
  font-weight: 700;
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.2px;
  text-wrap: balance;
}

/* CTA do hero */
.hero-lean .btn-cta{
  --bs-btn-bg: var(--color_brand_primary);
  --bs-btn-border-color: var(--color_brand_primary);
  --bs-btn-color: var(--color_text_inverse);
  --bs-btn-hover-bg: color-mix(in srgb, var(--color_brand_primary) 92%, #000 8%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--color_brand_primary) 92%, #000 8%);
  --bs-btn-active-bg: color-mix(in srgb, var(--color_brand_primary) 85%, #000 15%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--color_brand_primary) 85%, #000 15%);
  box-shadow: 0 .35rem .9rem -.5rem rgba(0,0,0,.15);
}
.hero-lean .btn-cta:hover{ box-shadow:0 .45rem 1rem -.45rem rgba(0,0,0,.18); }

/* Estrelas alinhadas no hero */
.hero-lean .text-warning i{ font-size:.95rem; }
.hero-lean .stars-wrap{ gap:.25rem; }

/* Marca suave dentro do hero */
.hero-lean .hero-mark{
  background: color-mix(in srgb, var(--color_highlight_keyword) 45%, transparent);
  padding:.06rem .25rem; border-radius:.2rem;
}

/* Layout e tipografia do hero */
.hero-lean{ background:transparent; padding-bottom:.6rem; }
@media (min-width:768px){ .hero-lean{ padding-bottom:1rem; } }

.lead-hero{ color:var(--color_text_body); font-size:1.05rem; max-width:820px; }
.form-hero{ margin-top:.25rem; }

/* Marca genérica (fora do hero) */
.hero-mark{
  background: color-mix(in srgb, var(--color_highlight_keyword) 65%, transparent);
  padding:.06rem .25rem; border-radius:.2rem;
}

/* Mobile: título do hero responsivo */
@media (max-width:575.98px){ .hero-lean h1{ font-size:1.6rem; } }

/* =================== PÓS-CARDS ====================== */

.after-list .unlock-wrap{
  border:1px solid var(--color_border_default);
  border-radius:.65rem;
  background:var(--color_surface_meta_bg);
  padding:1rem 1.25rem;
  box-shadow:var(--card-shadow);
}

/* CTA corporativo */
.after-list .cta-postcards{
  --bs-btn-bg: var(--color_brand_primary);
  --bs-btn-border-color: var(--color_brand_primary);
  --bs-btn-color: var(--color_text_inverse);
  --bs-btn-hover-bg: color-mix(in srgb, var(--color_brand_primary) 92%, #000 8%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--color_brand_primary) 92%, #000 8%);
  --bs-btn-active-bg: color-mix(in srgb, var(--color_brand_primary) 85%, #000 15%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--color_brand_primary) 85%, #000 15%);
}

/* Espaço entre grupos de chips */
.after-list .chip-block:not(:last-child){ margin-bottom:.25rem; }

/* ===================== BENEFÍCIOS =================== */

.benefit-card{
  border:1px solid var(--color_border_default);
  border-radius:.65rem;
  background:var(--color_surface_card_bg);
  box-shadow:var(--card-shadow);
}
.benefit-illu{
  display:block; width:180px; height:180px; object-fit:contain;
  filter: saturate(.95) contrast(1.05);
}

/* CTA deste bloco em laranja */
.benefits .benefits-cta{
  --bs-btn-bg: var(--color_cta_base);
  --bs-btn-border-color: var(--color_cta_base);
  --bs-btn-color: var(--color_surface_card_bg);
  --bs-btn-hover-bg: var(--color_cta_hover);
  --bs-btn-hover-border-color: var(--color_cta_hover);
  --bs-btn-active-bg: var(--color_cta_active);
  --bs-btn-active-border-color: var(--color_cta_active);
}

/* Mobile: centraliza */
@media (max-width: 575.98px){
  .benefit-card{ text-align:center; }
  .benefit-illu{ margin-left:auto; margin-right:auto; }
}

/* Imagens dos 3 benefícios */
.benefit-img{
  width:100%;
  height:auto;
  max-height:160px;
  object-fit:cover;
  border-radius:.5rem;
  background:#f3f4f6; /* fallback enquanto carrega */
}
@media (max-width:575.98px){
  .benefit-img{ max-height:160px; }
}
.benefit-img-contain{ width:100%; max-height:160px; object-fit:contain; background:#fff; }

/* ============ DEV / INTEGRAÇÕES (faixa) ============ */

.dev-strip a{
  color: var(--color_brand_primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s ease;
}
.dev-strip a:hover,
.dev-strip a:focus-visible{
  color: color-mix(in srgb, var(--color_brand_primary) 92%, #000 8%);
  text-decoration-thickness: 2px;
}
/* Mantém outline laranja conforme o tema */
.dev-strip .btn-cta-outline{
  --bs-btn-color:              var(--color_cta_base);
  --bs-btn-border-color:       var(--color_cta_base);
  --bs-btn-hover-bg:           var(--color_cta_hover);
  --bs-btn-hover-border-color: var(--color_cta_hover);
  --bs-btn-hover-color:        var(--color_surface_card_bg);
  --bs-btn-active-bg:          var(--color_cta_active);
  --bs-btn-active-border-color:var(--color_cta_active);
}

/* ================== CONFIGURE E ESQUECA ============== */

.setup-block .step-card{
  border:1px solid var(--color_border_default);
  border-radius:.65rem;
  background:var(--color_surface_card_bg);
  box-shadow:var(--card-shadow);
}
.setup-block .step-num{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.95rem;
  color:var(--color_text_inverse);
  background:var(--color_brand_primary);
}
/* CTA principal em laranja */
.setup-block .setup-cta{
  --bs-btn-bg: var(--color_cta_base);
  --bs-btn-border-color: var(--color_cta_base);
  --bs-btn-color: var(--color_surface_card_bg);
  --bs-btn-hover-bg: var(--color_cta_hover);
  --bs-btn-hover-border-color: var(--color_cta_hover);
  --bs-btn-active-bg: var(--color_cta_active);
  --bs-btn-active-border-color: var(--color_cta_active);
}

/* ==================== PROVA SOCIAL =================== */

.q-card{
  border:1px solid var(--color_border_default);
  border-radius:.65rem;
  background:var(--color_surface_card_bg);
  box-shadow:var(--card-shadow);
  padding:1rem 1.1rem;
  position:relative;
}
.q-card .quote-open{
  color:var(--color_brand_primary);
  font-size:1.25rem;
  position:absolute; top:.75rem; left:.8rem; opacity:.9;
}
.q-card blockquote{
  margin-left:1.5rem; margin-bottom:.35rem;
  color:var(--color_text_body); line-height:1.4;
}
.q-author{ color:var(--color_text_muted); font-size:.85rem; font-weight:600; }

/* Itens no offcanvas */
.q-list .q-item{
  border:1px solid var(--color_border_default);
  border-radius:.5rem;
  background:var(--color_surface_meta_bg);
  padding:.9rem 1rem .8rem 1rem;
  margin-bottom:.65rem;
  position:relative;
}
.q-list .quote-open{
  color:var(--color_brand_primary);
  font-size:1rem;
  position:absolute; top:.7rem; left:.8rem; opacity:.9;
}
.q-list blockquote{ margin:0 0 .25rem 1.4rem; color:var(--color_text_body); }
.q-list .q-author{ color:var(--color_text_muted); font-size:.83rem; font-weight:600; }

/* ======================== FAQ ======================== */

#faq .accordion-item{
  border:1px solid var(--color_border_default);
  border-radius:.65rem;
  overflow:hidden;
  background:var(--color_surface_card_bg);
  box-shadow:var(--card-shadow);
  margin-bottom:.6rem;
}
#faq .accordion-button{
  font-weight:600;
  color:var(--color_text_heading);
  background:var(--color_surface_card_bg);
}
#faq .accordion-button:not(.collapsed){
  color:var(--color_brand_primary);
  background:var(--color_surface_meta_bg);
  box-shadow: inset 0 -1px 0 var(--color_border_default);
}
#faq .accordion-body{ color:var(--color_text_body); }
#faq a{ color:var(--color_brand_primary); text-decoration: underline; text-underline-offset: 2px; }

/* ========== Decoração dos títulos (h2 das seções) ========== */
.after-list > h2,
#beneficios > h2,
#configure > h2,
#prova-social > h2,
#faq > h2,
#video-demo > h2,
#stats-term > h2{
  position: relative;
  font-weight: 600;
}
.after-list > h2::after,
#beneficios > h2::after,
#configure > h2::after,
#prova-social > h2::after,
#faq > h2::after,
#video-demo > h2::after,
#stats-term > h2::after{
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: var(--color_brand_primary);
  border-radius: 2px;
  margin-top: .35rem;
  opacity: .9;
}