/* =========================================================================
   Service pages (online + semipresencial): hero, alternating "etapa" bands,
   final CTA. Shared by both pages; linked as ../servicos.css. base.css holds
   the design system. Matches the Framer original: left-aligned hero, and
   full-width etapa bands alternating terracota / bege with inverted text and
   Cuprum-bold step titles.
   ========================================================================= */

/* Hero: left-aligned content over the photo, content constrained to 1200. */
.hero-servicos {
  min-height: 560px;
  display: flex;
  align-items: center;
  padding: 60px max(24px, calc((100% - 1200px) / 2));
  background:
    linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0.12) 100%),
    url('../assets/hero-servicos.webp') center/cover no-repeat;
}
.hero-servicos .hero-content {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.hero-servicos h1 { color: var(--offwhite); }
.hero-servicos p { color: var(--offwhite); font-size: 19px; line-height: 1.6; }
.hero-servicos .localizacao { font-style: italic; opacity: .9; font-size: 17px; }

/* Alternating full-width bands. The horizontal padding centers the content
   inside 1200px while the background color spans the full viewport width. */
.etapa {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  padding: 90px max(24px, calc((100% - 1200px) / 2));
}
.etapa-col { flex: 1; }
.etapa-title-col h2 {
  font-family: 'Cuprum', sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.1;
}
.etapa-text-col p { font-size: 19px; line-height: 1.6; margin-bottom: 14px; }
.etapa-text-col p:last-child { margin-bottom: 0; }

/* Odd steps = terracota band with light text; even = bege with terracota text. */
.etapa-impar { background: var(--vermelho); }
.etapa-impar h2, .etapa-impar p { color: var(--offwhite); }
.etapa-par { background: var(--offwhite); }
.etapa-par h2, .etapa-par p { color: var(--vermelho); }

/* Final CTA band */
.cta-final {
  background: var(--offblack);
  padding: 80px 24px;
  text-align: center;
}

@media (max-width: 980px) {
  .hero-servicos { min-height: 460px; padding: 48px 24px; }
  .hero-servicos .hero-content { max-width: 100%; }
  .etapa { flex-direction: column; gap: 16px; padding: 56px 24px; }
  .etapa.etapa-par { flex-direction: column-reverse; }
  .etapa-title-col h2 { font-size: 34px; }
}