/* =========================================================================
   Home page sections. Shared design system is in base.css.
   Section measurements (widths, paddings, gaps) taken from the Framer source.
   ========================================================================= */

/* --- Hero (100vh, content block in the right half) ------------------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.42) 100%),
    url('assets/hero-home.webp') center/cover no-repeat;
}
.hero-container { display: flex; justify-content: flex-end; padding: 0 40px; }
.hero-content {
  width: 520px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 19px;
}
.hero-content h1 { color: var(--offwhite); }

/* --- Dor (bege, two columns gap 50px, padding 100px) ----------------- */
.dor { background: var(--offwhite); padding: 100px 40px; }
.dor-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
.dor-q { width: 520px; max-width: 100%; color: var(--offblack); }
.dor-a { width: 471px; max-width: 100%; color: var(--texto); }

/* --- Solução (lines + terracota title + 3 cards) -------------------- */
.solucao { padding: 80px 50px 110px; text-align: center; }
.solucao-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}
.solucao-title h2 { color: var(--vermelho); }
.cards {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.card {
  width: 342px;
  max-width: 100%;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.card h3 { width: 234px; max-width: 100%; }
.card p  { width: 269px; max-width: 100%; }

/* --- CTA final (428px, background photo, light text) ----------------- */
.cta {
  position: relative;
  min-height: 428px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.35) 100%),
    url('assets/cta-home.webp') center/cover no-repeat;
}
.cta-container { display: flex; padding: 0 40px; }
.cta-content {
  width: 560px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
}
.cta-content h2 { width: 529px; max-width: 100%; color: var(--offwhite); }
.cta-content p  { width: 458px; max-width: 100%; color: var(--offwhite); }

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 980px) {
  .hero-container { justify-content: center; padding: 0 24px; }
  .hero-content { align-items: center; text-align: center; }
  .dor { padding: 64px 24px; }
  .dor-inner { flex-direction: column; gap: 24px; text-align: center; }
  .dor-q, .dor-a { width: 100%; }
  .solucao { padding: 56px 24px 72px; }
  .cards { flex-direction: column; align-items: center; gap: 40px; }
  .card { width: 100%; max-width: 360px; }
  .cta { padding: 48px 0; }
  .cta-content { width: 100%; }
  .cta-content h2, .cta-content p { width: 100%; }
}