/* ---- Cabeçalho das páginas internas ---- */
.page-hero { background: var(--gradient-hero); padding-block: var(--space-7); text-align: center; }
.page-hero p { color: var(--color-text-muted); max-width: 60ch; margin-inline: auto; }

/* ---- Preços ---- */
.price-card {
  position: relative; background: var(--color-surface); border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5); text-align: center; box-shadow: var(--shadow-sm);
  border: 2px solid transparent; transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.price-card--featured { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.price-card__tag {
  position: absolute; top: -0.9rem; left: 50%; transform: translateX(-50%);
  background: var(--color-primary); color: var(--color-text-on-primary);
  padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 800;
}
.price-card__name { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.price-card__value {
  font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700; margin: 0;
  background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.price-card__note { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.price-card__list { text-align: left; list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.price-card__list li { padding-left: 1.5rem; position: relative; margin-bottom: var(--space-2); }
.price-card__list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-whatsapp); font-weight: 800; }
.section__cta { text-align: center; margin-top: var(--space-6); }

/* ---- Galeria ---- */
.gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
.gallery img { border-radius: var(--radius-md); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; box-shadow: var(--shadow-sm); transition: transform var(--transition-base); }
.gallery img:hover { transform: scale(1.03); }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }

/* ---- Quem cuida ---- */
.about { display: grid; gap: var(--space-6); align-items: center; }
.about__photo { border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; width: 260px; margin-inline: auto; box-shadow: var(--shadow-md); }
@media (min-width: 768px) { .about { grid-template-columns: 320px 1fr; } .about__photo { width: 320px; } }

/* ---- Depoimentos ---- */
.testimonial {
  margin: 0; background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-sm); border-left: 6px solid var(--color-accent-lilac);
}
.testimonial p { font-size: var(--text-lg); font-style: italic; }
/* cards com a mesma altura (min-height igualado pelo JS) e a assinatura alinhada no rodapé;
   o grid não estica para que o "Ler mais" expanda só o card clicado */
#depoimentos .grid { align-items: start; }
.testimonial { display: flex; flex-direction: column; }
.testimonial footer { margin-top: auto; }
.testimonial p.is-clamped { display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.testimonial__more {
  align-self: flex-start; background: none; border: 0; padding: 0; margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font: inherit; font-weight: 800; color: var(--color-link); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em;
}
.testimonial__more:hover { color: var(--color-primary); }
.testimonial footer { color: var(--color-text-muted); font-weight: 700; }

/* ---- CTA final ---- */
.cta-final__box {
  background: var(--color-text); color: var(--color-bg); border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-5); text-align: center;
}
.cta-final__box h2 { color: var(--color-accent-yellow); }
.cta-final__box p { max-width: 50ch; margin-inline: auto; }

/* ---- Linha do tempo (como funciona) ---- */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 1.1rem; top: 0; bottom: 0; width: 4px; background: var(--color-secondary-soft); border-radius: 2px; }
.timeline__item { position: relative; padding-left: 3.5rem; margin-bottom: var(--space-5); }
.timeline__item::before { content: ""; position: absolute; left: 0.55rem; top: 0.3rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--color-secondary); border: 4px solid var(--color-bg); }
.timeline__time { font-family: var(--font-display); color: var(--color-link); font-weight: 700; }
.timeline__photo { display: block; width: 100%; max-width: 520px; height: auto; margin-top: var(--space-3); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

/* ---- Checklist ---- */
.checklist { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.checklist li { background: var(--color-surface); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); display: flex; gap: var(--space-3); align-items: center; }
.checklist__mark { width: 1.5rem; height: 1.5rem; flex: none; padding: 0.2rem; border-radius: 50%; }
.checklist__mark--ok { color: var(--color-whatsapp-dark); background: var(--color-accent-green-soft); }
.checklist__mark--no { color: var(--color-primary); background: var(--color-primary-soft); }
@media (min-width: 640px) { .checklist { grid-template-columns: repeat(2, 1fr); } }

/* ---- FAQ ---- */
.faq { max-width: 760px; margin-inline: auto; }
.faq__item { background: var(--color-surface); border-radius: var(--radius-md); margin-bottom: var(--space-3); box-shadow: var(--shadow-sm); }
.faq__q { cursor: pointer; padding: var(--space-4) var(--space-5); font-weight: 800; list-style: none; display: flex; justify-content: space-between; gap: var(--space-3); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); transition: transform var(--transition-base); }
.faq__item[open] .faq__q::after { transform: rotate(135deg); }
.faq__item[open] .faq__a { animation: faq-in var(--transition-base) both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq__a { padding: 0 var(--space-5) var(--space-4); color: var(--color-text-muted); }

/* ---- Formulário ---- */
.form { display: grid; gap: var(--space-4); background: var(--color-surface); padding: var(--space-6); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.form__field { display: grid; gap: var(--space-1); }
.form__field label { font-weight: 800; }
.form input, .form select, .form textarea {
  font: inherit; padding: var(--space-3); border: 2px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-text);
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--color-secondary); outline: none; }
.form__checks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.form__checks label { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--color-secondary-soft); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); font-weight: 700; }
.form__checks input { accent-color: var(--color-primary); }
@media (min-width: 640px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } }

/* ---- Contato ---- */
.contact { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .contact { grid-template-columns: 1fr 1fr; align-items: start; } }
.map { border: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.contact__info p { display: flex; gap: var(--space-2); align-items: flex-start; }
.icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.2em; }