/* ==========================================================================
   VistoFácil — Seções de conteúdo da landing (conteúdo real do site)
   ========================================================================== */

html { scroll-behavior: smooth; }

/* ---------- Shell de seção ---------- */
.lp-sec { padding: 64px 0; scroll-margin-top: 80px; }
.lp-sec--alt { background: #f7f8fb; }
.lp-sec__in { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.lp-sec__cab { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.lp-sec__tag { display: inline-block; background: #fff3ea; color: var(--vf-laranja-escuro); border: 1px solid #ffd9bd;
  border-radius: 999px; padding: 6px 14px; font-size: .76rem; font-weight: 800; letter-spacing: .5px; margin-bottom: 14px; }
.lp-sec__titulo { font-size: 2.1rem; font-weight: 800; letter-spacing: -.7px; color: var(--vf-texto); line-height: 1.15; }
.lp-sec__sub { font-size: 1.02rem; line-height: 1.55; color: var(--vf-texto-fraco); margin-top: 12px; }

/* ---------- Grids genéricos ---------- */
.lp-grid { display: grid; gap: 18px; }
.lp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.lp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lp-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Card genérico ---------- */
.lp-card { background: #fff; border: 1px solid var(--vf-borda); border-radius: 18px; padding: 24px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.lp-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(27, 36, 51, .08); border-color: #f3d2bb; }
.lp-card__ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: #fff3ea; color: var(--vf-laranja); margin-bottom: 16px; }
.lp-card__ico svg { width: 26px; height: 26px; }
.lp-card h3 { font-size: 1.1rem; font-weight: 700; }
.lp-card p { font-size: .92rem; line-height: 1.55; color: var(--vf-texto-fraco); margin-top: 6px; }

/* ---------- Passos numerados (Como funciona) ---------- */
.lp-passo { position: relative; }
.lp-passo .lp-num { position: absolute; top: -12px; right: 18px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--vf-grad-laranja); color: #fff; font-weight: 800; display: grid; place-items: center;
  box-shadow: var(--vf-sombra-laranja); }

/* ---------- Tipos de vistoria ---------- */
.lp-tipo { padding: 18px; }
.lp-tipo__cat { font-size: .72rem; font-weight: 800; letter-spacing: .4px; color: var(--vf-laranja); text-transform: uppercase; }
.lp-tipo h3 { font-size: 1.02rem; font-weight: 700; margin-top: 4px; }
.lp-tipo p { font-size: .86rem; line-height: 1.5; color: var(--vf-texto-fraco); margin-top: 5px; }
.lp-incluso { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; margin-top: 28px; }
.lp-incluso span { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--vf-texto-suave); }
.lp-incluso svg { width: 18px; height: 18px; color: var(--vf-sucesso); }

/* ---------- Ganhos do vistoriador ---------- */
.lp-ganhos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 760px; margin: 0 auto; }
.lp-ganhos__card { background: #fff; border: 1px solid var(--vf-borda); border-radius: 18px; padding: 24px; }
.lp-ganhos__card--vf { background: linear-gradient(135deg, #fff3ea, #ffe6d2); border-color: var(--vf-borda-forte); }
.lp-ganhos__card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 14px; }
.lp-ganhos__linha { display: flex; justify-content: space-between; padding: 8px 0; font-size: .92rem; color: var(--vf-texto-fraco); border-bottom: 1px dashed var(--vf-borda); }
.lp-ganhos__linha:last-child { border-bottom: none; }
.lp-ganhos__linha b { color: var(--vf-texto); }
.lp-ganhos__big { font-size: 1.5rem; font-weight: 800; color: var(--vf-laranja); }
.lp-sim { max-width: 760px; margin: 22px auto 0; text-align: center; }
.lp-sim__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.lp-sim__item { background: #fff; border: 1px solid var(--vf-borda); border-radius: 14px; padding: 16px; }
.lp-sim__item b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--vf-laranja); }
.lp-sim__item span { font-size: .82rem; color: var(--vf-texto-fraco); }
.lp-sec__acao { text-align: center; margin-top: 30px; }
.lp-sec__acao .lp-btn { display: inline-flex; width: auto; padding: 14px 28px; }

/* ---------- Depoimentos ---------- */
.lp-dep { padding: 24px; display: flex; flex-direction: column; }
.lp-dep__estrelas { display: flex; gap: 2px; color: var(--vf-laranja); margin-bottom: 12px; }
.lp-dep__estrelas svg { width: 17px; height: 17px; }
.lp-dep__txt { font-size: .94rem; line-height: 1.6; color: var(--vf-texto-suave); flex: 1; }
.lp-dep__pessoa { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.lp-dep__foto { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.lp-dep__pessoa strong { font-size: .92rem; display: block; }
.lp-dep__pessoa span { font-size: .8rem; color: var(--vf-texto-fraco); }

/* ---------- Preços ---------- */
.lp-precos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 820px; margin: 0 auto; }
.lp-preco { background: #fff; border: 1px solid var(--vf-borda); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; }
.lp-preco--destaque { border: 2px solid var(--vf-laranja); box-shadow: var(--vf-sombra-laranja); }
.lp-preco__quem { font-size: .85rem; font-weight: 700; color: var(--vf-laranja); }
.lp-preco__valor { font-size: 2rem; font-weight: 800; margin: 6px 0 2px; }
.lp-preco__valor small { font-size: .9rem; font-weight: 600; color: var(--vf-texto-fraco); }
.lp-preco__obs { font-size: .82rem; color: var(--vf-texto-fraco); margin-bottom: 16px; }
.lp-preco ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-preco li { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; color: var(--vf-texto-suave); }
.lp-preco li svg { width: 18px; height: 18px; color: var(--vf-sucesso); flex: 0 0 auto; margin-top: 1px; }
.lp-preco .lp-btn { margin-top: auto; width: 100%; }

/* ---------- FAQ ---------- */
.lp-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.lp-faq__item { background: #fff; border: 1px solid var(--vf-borda); border-radius: 14px; overflow: hidden; }
.lp-faq__item summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 700; font-size: .98rem;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--vf-laranja); transition: transform .2s; }
.lp-faq__item[open] summary::after { content: "−"; }
.lp-faq__item div { padding: 0 20px 18px; font-size: .92rem; line-height: 1.6; color: var(--vf-texto-fraco); }

/* ---------- CTA final ---------- */
.lp-cta { background: linear-gradient(135deg, #ff8b1c, #f5621f); color: #fff; border-radius: 26px;
  text-align: center; padding: 48px 28px; max-width: 1000px; margin: 0 auto; }
.lp-cta h2 { font-size: 2rem; font-weight: 800; }
.lp-cta p { font-size: 1.05rem; opacity: .95; margin: 10px 0 24px; }
.lp-cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-cta__btns a { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; }
.lp-cta__btns .branco { background: #fff; color: var(--vf-laranja-escuro); }
.lp-cta__btns .vazado { background: rgba(255, 255, 255, .14); color: #fff; border: 1.5px solid rgba(255, 255, 255, .6); }

/* ====================== RESPONSIVO ====================== */
@media (max-width: 980px) {
  .lp-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .lp-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .lp-sec { padding: 48px 0; }
  .lp-sec__titulo { font-size: 1.6rem; }
  .lp-grid--2, .lp-grid--3, .lp-grid--4, .lp-ganhos, .lp-precos, .lp-sim__grid { grid-template-columns: 1fr; }
  .lp-cta h2 { font-size: 1.5rem; }
}

/* ====================== RODAPÉ COMPLETO ====================== */
.lp-rodape { background: #f5f7fa; border-top: 1px solid var(--vf-borda); padding: 48px 0 24px; }
.lp-rodape__in { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.lp-rodape__top { display: grid; grid-template-columns: 1.7fr 1fr 1.3fr 1.1fr; gap: 30px; padding-bottom: 28px; border-bottom: 1px solid var(--vf-borda); }
.lp-rodape__marca img { height: 30px; width: auto; }
.lp-rodape__marca p { font-size: .88rem; line-height: 1.55; color: var(--vf-texto-fraco); margin-top: 14px; max-width: 290px; }
.lp-rodape__col h4 { font-size: .8rem; font-weight: 800; color: var(--vf-texto); margin-bottom: 14px; letter-spacing: .4px; text-transform: uppercase; }
.lp-rodape__col a, .lp-rodape__col span { display: block; font-size: .88rem; color: var(--vf-texto-fraco); margin-bottom: 9px; }
.lp-rodape__col a:hover { color: var(--vf-laranja); }
.lp-rodape__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 22px; font-size: .82rem; color: var(--vf-texto-mute); }
@media (max-width: 760px) {
  .lp-rodape__top { grid-template-columns: 1fr 1fr; gap: 24px; }
}