/* =========================================================================
   Sobre page sections. Shared design system is in ../base.css.
   ========================================================================= */

.hero-sobre {
  min-height: 46vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 24px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.45) 100%),
    url('../assets/hero-sobre.webp') center/cover no-repeat;
}
.hero-sobre h1 { color: var(--offwhite); }

.intro { text-align: center; padding: 64px 24px 0; }
.intro h2 { color: var(--vermelho); }

.bio {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  gap: 50px;
  align-items: center;
  padding: 48px 40px 80px;
}
.bio-text { flex: 1.15; display: flex; flex-direction: column; gap: 16px; }
.bio-image { flex: 1; }
.bio-image img { width: 100%; border-radius: 12px; object-fit: cover; }

.sobre-cta {
  background: var(--offwhite);
  padding: 72px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.sobre-cta h3 { color: var(--offblack); }

@media (max-width: 980px) {
  .hero-sobre { min-height: 38vh; padding: 80px 24px; }
  .intro { padding: 48px 24px 0; }
  .bio { flex-direction: column; gap: 28px; padding: 40px 24px 64px; }
}