/* Ajustes responsivos das páginas institucionais. */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .container { width: min(100% - 32px, 1180px) !important; padding-left: 0 !important; padding-right: 0 !important; }

  /* Sem cabeçalho alto cobrindo o começo da página. */
  .topo { position: relative !important; padding: 9px 0 !important; min-height: 0 !important; }
  .topo .container { flex-direction: column !important; gap: 6px !important; align-items: center !important; }
  .topo .logo img { height: 40px !important; }
  .menu { width: 100% !important; }
  .menu ul { justify-content: center !important; gap: 3px 10px !important; flex-wrap: wrap !important; }
  .menu a { display: block !important; padding: 4px 2px !important; font-size: .72rem !important; line-height: 1.25 !important; white-space: nowrap; }

  /* Hero mais curto, sem texto oculto ou estourado. */
  .page-hero { min-height: 220px !important; height: auto !important; padding: 40px 0 !important; }
  .page-hero .hero-content { margin-top: 0 !important; }
  .page-hero h1 { max-width: 340px !important; margin: 0 auto !important; font-size: clamp(2rem, 9vw, 2.5rem) !important; line-height: 1.12 !important; letter-spacing: -.035em !important; overflow-wrap: anywhere; }
  .page-hero p { margin-top: 14px !important; font-size: .98rem !important; line-height: 1.5 !important; }

  /* Conteúdos institucionais com leitura confortável. */
  .sobre, .historia, .mvv-section, .programacao, .content-section { padding: 48px 0 !important; }
  .sobre h2, .historia h2, .programacao h2, .content-section h2 { font-size: clamp(1.95rem, 8.5vw, 2.4rem) !important; line-height: 1.12 !important; margin-bottom: 22px !important; }
  .sobre p, .historia p, .programacao p, .content-section p { font-size: 1rem !important; line-height: 1.65 !important; }
  .mvv-section { padding-top: 52px !important; padding-bottom: 56px !important; }
  .mvv-heading { margin-bottom: 28px !important; }
  .mvv-heading h2 { font-size: 2rem !important; }
  .mvv-heading p { font-size: .96rem !important; }
  .mvv-card { min-height: 0 !important; padding: 28px 24px !important; }
  .mvv-card h3 { font-size: 1.38rem !important; }
  .mvv-card p { font-size: .94rem !important; }

  /* Galeria, formulários e faixas de conteúdo. */
  .galeria-slider { margin-top: 36px !important; }
  .slide img { height: 275px !important; }
  .equipe-section { min-height: 460px !important; height: auto !important; }
  .equipe-content h3 { font-size: 2rem !important; }
  .equipe-content p { font-size: 1rem !important; }

  /* ATC: banner e cards sem proporções exageradas. */
  .hero-icon { width: 66px !important; height: 66px !important; margin-bottom: 17px !important; }
  .hero-icon i { font-size: 1.7rem !important; }
  .hero-badge { font-size: .76rem !important; padding: 8px 12px !important; }
  .activities-grid, .values-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .activity-card, .value-card { padding: 24px !important; }

  /* Política de privacidade. */
  .policy-card, .privacy-card { padding: 22px 18px !important; border-radius: 14px !important; }
  .policy-card h3, .privacy-card h3 { font-size: 1.16rem !important; }
  .table-wrapper { overflow-x: auto; }
}

@media (max-width: 390px) {
  .menu ul { gap: 2px 8px !important; }
  .menu a { font-size: .68rem !important; }
  .page-hero h1 { font-size: 1.9rem !important; }
  .sobre p, .historia p, .programacao p, .content-section p { font-size: .96rem !important; }
}