/* ARENA ECO EXPO — página institucional, mesmo padrão de page-hero das
   demais páginas internas (ver forum-page.css/visitante.css), mais os
   blocos próprios desta página: intro, coordenador e associações. */

.page-hero-img {
  position: absolute; inset: 0;
  background-image: url('../images/IMG_7000.jpg');
  background-size: cover; background-position: center 55%;
}

/* O título desta página é uma frase longa, não um título curto como
   nas outras páginas internas — no tamanho padrão (.page-title de
   forum-page.css) ele quebrava em 4 linhas e estourava pra cima do
   hero. Reduz a fonte e aumenta a largura máxima só aqui. */
.page-hero { min-height: 500px; }
.page-title { font-size: clamp(26px, 3.6vw, 46px); max-width: 960px; line-height: 1.15; }

.arena-eyebrow {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--gold);
  margin-bottom: 10px;
}

.arena-intro {
  max-width: 900px; margin: 0 auto; padding: 72px 64px 0;
}

.arena-intro p { font-size: 15px; color: var(--gray); line-height: 1.85; margin-top: 16px; }

.arena-coordenador {
  display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center;
  max-width: 900px; margin: 56px auto 0; padding: 0 64px;
}

.arena-coordenador-foto {
  aspect-ratio: 1/1; border-radius: 12px; background: var(--off-white);
  border: 1.5px dashed var(--surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--gray); text-align: center; padding: 16px;
}
.arena-coordenador-foto svg { width: 32px; height: 32px; opacity: .4; }
.arena-coordenador-foto span { font-size: 11px; line-height: 1.5; }

.arena-coordenador-texto p { font-size: 14.5px; color: var(--gray); line-height: 1.85; }
.arena-coordenador-texto strong { color: var(--graphite); }

.arena-associacoes {
  max-width: 900px; margin: 56px auto 0; padding: 0 64px;
}
.arena-associacoes-intro { font-size: 15px; color: var(--gray); line-height: 1.85; margin-bottom: 24px; }
.arena-associacoes-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.arena-associacao-pill {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .5px; color: var(--graphite);
  background: var(--off-white); border: 1.5px solid var(--surface-2);
  border-radius: 999px; padding: 10px 18px;
  display: flex; align-items: center;
}
.arena-associacao-logo {
  width: 150px; height: 75px; padding: 10px 18px;
  background: var(--white); border: 1.5px solid var(--surface-2); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.arena-associacao-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.arena-aviso {
  max-width: 900px; margin: 40px auto 0; padding: 0 64px 64px;
}
.arena-aviso-box {
  background: rgba(2,102,51,.06); border: 1.5px solid rgba(2,102,51,.2);
  border-radius: 10px; padding: 16px 20px; text-align: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: var(--green-dark);
}

@media (max-width: 768px) {
  .arena-intro { padding: 40px 20px 0; }
  .arena-coordenador { grid-template-columns: 1fr; gap: 20px; padding: 0 20px; margin-top: 32px; }
  .arena-coordenador-foto { max-width: 200px; margin: 0 auto; }
  .arena-associacoes { padding: 0 20px; margin-top: 32px; }
  .arena-aviso { padding: 0 20px 40px; margin-top: 24px; }
}