/* ==========================================================================
   PADRÃO HERO SECTION DAS PÁGINAS INTERNAS (FIDELIDADE OFICIAL CEAA)
   Consistência estrita em todas as páginas:
   - Fundo com imagem oficial em alta definição vinda do Cloudflare R2
   - Overlay escuro suave (#000000 com opacidade 0.6)
   - Tipografia limpa sans-serif (Inter / Plus Jakarta Sans)
   - Tag de identificação "CEAA 50 ANOS" em maiúsculas
   - Título oficial da página posicionado na base com alto impacto
   - Sem sombras (box-shadow: none !important)
   ========================================================================== */

.page-hero-section {
  position: relative;
  width: 100%;
  min-height: 540px;
  background-color: #2A2D39;
  background-position: center 20%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: flex-end;
  padding: 180px 2rem 65px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: none !important;
  border: none !important;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.65) 75%, rgba(0, 0, 0, 0.78) 100%);
  z-index: 1;
}

.page-hero-container {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.page-hero-content {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.page-hero-tag {
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 0.75rem;
  opacity: 0.92;
  display: inline-block;
  line-height: 1.2;
}

.page-hero-title {
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 2.375rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0;
  text-shadow: none;
}

/* Hero Específico: Conheça o Projeto */
.page-hero-projeto {
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/hero/projeto-2.webp');
  background-position: center 25%;
}

.page-hero-projeto .page-hero-overlay {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.78) 100%);
}

/* Hero Específico: Em Memória */
.page-hero-em-memoria {
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/hero/bg_em_memoria.webp');
  background-position: center 25%;
}

.page-hero-em-memoria .page-hero-overlay {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.82) 100%);
}

/* Hero Específico: História do CEAA */
.page-hero-historia {
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/2023/08/bg_topo_historia.webp');
  background-position: center 20%;
}


/* Hero Específico: Diplomacia e Convênios Internacionais */
.page-hero-diplomacia {
  background-color: #FFFFFF;
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/hero/bg_convenios_diplomacia.webp');
  background-position: right 0px top 96px;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 480px;
}

.page-hero-diplomacia .page-hero-overlay {
  display: block;
  position: absolute;
  top: 96px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000000;
  background-image: none;
  opacity: 0.6;
}

/* Hero Específico: O Afro e o Movimento Negro */
.page-hero-movimento-negro {
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/2026/01/Figura-15.webp');
  background-position: center 18%;
}

/* Hero Específico: Pesquisadores do Projeto e Produção do CEAA (Vinho #3B020E com Estampa de Totem Ancestral Repetida) */
.page-hero-pesquisadores,
.page-hero-arquivo-fotografico,
.page-hero-producao-ceaa,
.page-hero-pesquisa-formacao,
.page-hero-estudos-asiaticos,
.page-hero-clippings {
  background-color: #3B020E;
  background-image: none;
  min-height: 480px;
}

.page-hero-livros {
  background-color: #000000;
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/2023/08/bg_livros_ceaa.webp');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 480px;
}

.page-hero-pesquisadores .page-hero-overlay,
.page-hero-arquivo-fotografico .page-hero-overlay,
.page-hero-producao-ceaa .page-hero-overlay,
.page-hero-pesquisa-formacao .page-hero-overlay,
.page-hero-estudos-asiaticos .page-hero-overlay,
.page-hero-clippings .page-hero-overlay {
  display: block;
  position: absolute;
  inset: 0;
  background-color: transparent;
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/brand/totem03_top.webp'), url('https://media.visuals.com.br/visuals-medias/ceaa/images/brand/totem03.webp');
  background-repeat: repeat-x, repeat-x;
  background-position: top center, bottom center;
  background-size: auto 260px, auto 260px;
  opacity: 0.055;
  z-index: 1;
  pointer-events: none;
}

.page-hero-subtitle {
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.65;
  color: #F1F5F9;
  margin: 0.85rem 0 0 0;
  max-width: 580px;
  text-shadow: none;
  opacity: 0.95;
}


/* Hero Específico: Eventos Promovidos pelo CEAA */
.page-hero-eventos {
  background-color: #2A2D39;
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/hero/seminario_img.webp');
  background-position: 62% -19%;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 480px;
}

@media (max-width: 1200px) {
  .page-hero-eventos {
    background-position: 62% 20% !important;
  }
}

@media (max-width: 1024px) {
  .page-hero-eventos {
    background-position: 62% -30% !important;
    min-height: 440px;
  }
}

@media (max-width: 640px) {
  .page-hero-eventos {
    background-position: center 75px !important;
  }
}

.page-hero-eventos .page-hero-overlay {
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.78) 100%);
  opacity: 1;
}

/* Responsividade */
@media (max-width: 1023px) {
  .page-hero-section {
    min-height: 460px;
    padding: 150px 1.5rem 50px;
    background-position: center 15%;
  }

  .page-hero-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 640px) {
  .page-hero-section {
    min-height: 380px;
    padding: 130px 1.25rem 40px;
    background-position: center 10%;
  }

  .page-hero-tag {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }

  .page-hero-title {
    font-size: 1.625rem;
    line-height: 1.3;
  }

  .page-hero-subtitle br {
    display: none !important;
  }
}


@media (max-width: 1023px) {
  .page-hero-diplomacia {
    background-position: right 0px top 96px !important;
  }
}

@media (max-width: 640px) {
  .page-hero-diplomacia {
    background-position: right 0px top 96px !important;
  }
}


/* Hero Específico: Revista Estudos Afro-Asiáticos */
.page-hero-revistas {
  background-color: #000000;
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/2025/11/cabecalho-revista.webp');
  background-position: center 46px;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 330px;
  padding-top: 96px;
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  .page-hero-revistas {
    min-height: 305px;
    padding-top: 80px;
    background-size: cover;
    background-position: center center;
  }
}

@media (max-width: 1024px) {
  .page-hero-revistas {
    min-height: 285px;
    padding-top: 80px;
    background-size: cover;
    background-position: center 40px;
  }
}

@media (max-width: 768px) {
  .page-hero-revistas {
    min-height: 215px;
    padding-top: 74px;
    background-size: cover;
    background-position: center center;
  }
}

@media (max-width: 640px) {
  .page-hero-revistas {
    background-position: center 35px !important;
  }
}

.page-hero-revistas .page-hero-overlay {
  display: none !important;
}


/* Hero Específico: Teses e Dissertações (Fidelidade ao Site Original) */
.page-hero-teses {
  position: relative;
  background-color: #000000;
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/2025/11/cabecalho_.webp');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 430px;
  padding: 110px 2rem 40px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.page-hero-teses .page-hero-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  display: block !important;
  z-index: 1;
}

.page-hero-teses .page-hero-container {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.page-hero-teses .page-hero-kicker {
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
  display: inline-block;
  opacity: 0.95;
}

.page-hero-teses .page-hero-title {
  font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif);
  font-size: 2.5rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

@media (max-width: 1023px) {
  .page-hero-teses {
    min-height: 250px;
    padding: 100px 1.5rem 30px;
  }

  .page-hero-teses .page-hero-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .page-hero-teses {
    min-height: 200px;
    padding: 95px 1.25rem 25px;
  }

  .page-hero-teses .page-hero-title {
    font-size: 1.5rem;
  }
}

/* Hero Específico: Concurso de Dotações (Fidelidade ao Padrão Institucional do CEAA) */
.page-hero-concursos {
  background-color: #3B020E;
  background-image: none;
  min-height: 480px;
}

.page-hero-concursos .page-hero-overlay {
  display: block;
  position: absolute;
  inset: 0;
  background-color: transparent;
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/brand/totem03_top.webp'), url('https://media.visuals.com.br/visuals-medias/ceaa/images/brand/totem03.webp');
  background-repeat: repeat-x, repeat-x;
  background-position: top center, bottom center;
  background-size: auto 260px, auto 260px;
  opacity: 0.055;
  z-index: 1;
  pointer-events: none;
}

/* Redução do height pela metade em todas as páginas com o mesmo background na 1ª dobra no 1024px */
@media (max-width: 1024px) {

  .page-hero-pesquisadores,
  .page-hero-arquivo-fotografico,
  .page-hero-producao-ceaa,
  .page-hero-pesquisa-formacao,
  .page-hero-estudos-asiaticos,
  .page-hero-clippings,
  .page-hero-concursos {
    min-height: 240px !important;
    padding: 105px 2rem 25px !important;
  }

  .page-hero-pesquisadores .page-hero-overlay,
  .page-hero-arquivo-fotografico .page-hero-overlay,
  .page-hero-producao-ceaa .page-hero-overlay,
  .page-hero-pesquisa-formacao .page-hero-overlay,
  .page-hero-estudos-asiaticos .page-hero-overlay,
  .page-hero-clippings .page-hero-overlay,
  .page-hero-concursos .page-hero-overlay {
    background-size: auto 140px, auto 140px;
  }

  .page-hero-pesquisadores .page-hero-title,
  .page-hero-arquivo-fotografico .page-hero-title,
  .page-hero-producao-ceaa .page-hero-title,
  .page-hero-pesquisa-formacao .page-hero-title,
  .page-hero-estudos-asiaticos .page-hero-title,
  .page-hero-clippings .page-hero-title,
  .page-hero-concursos .page-hero-title {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
  }
}

/* Hero Específico: Encontros Macumba (1986-1990) - Imagem sem texto */
.page-hero-macumba {
  background-color: #6d0017;
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/2025/11/cabecalho-2.webp');
  background-position: center top 96px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  min-height: 520px;
  padding: 0;
  box-sizing: border-box;
}

.page-hero-macumba .page-hero-overlay {
  display: none !important;
}

@media (max-width: 1200px) {
  .page-hero-macumba {
    min-height: 440px;
    background-position: center top 80px;
  }
}

@media (max-width: 1024px) {
  .page-hero-macumba {
    min-height: 420px;
    background-position: center top 80px;
    background-size: 100% auto;
  }
}

@media (max-width: 768px) {
  .page-hero-macumba {
    min-height: 260px;
    padding-top: 74px;
    background-size: cover;
    background-position: center center;
  }
}

/* Hero Específico: Memória Negra - Imagem em full sem aparecer o fundo */
.page-hero-memoria-negra {
  background-color: #6c0017;
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/2026/01/cabecalho.webp');
  background-position: center top 96px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  min-height: 520px;
  padding: 0;
  box-sizing: border-box;
  box-shadow: none !important;
}

.page-hero-memoria-negra .page-hero-overlay {
  display: none !important;
}

@media (max-width: 1200px) {
  .page-hero-memoria-negra {
    min-height: 440px;
    background-position: center top 80px;
    background-size: 100% auto;
  }
}

@media (max-width: 1024px) {
  .page-hero-memoria-negra {
    min-height: 420px;
    background-position: center top 80px;
    background-size: 100% auto;
  }
}

@media (max-width: 768px) {
  .page-hero-memoria-negra {
    min-height: 260px;
    background-position: center top 74px;
    background-size: cover;
  }
}

/* Hero Específico: Centenário da Abolição (1988) - Imagem completa em full sem fundo */
.page-hero-centenario {
  background-color: #FFFFFF;
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/2025/11/centenario.webp');
  background-position: center top 96px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  min-height: 520px;
  padding: 0;
  box-sizing: border-box;
  box-shadow: none !important;
}

.page-hero-centenario .page-hero-overlay {
  display: none !important;
}

@media (max-width: 1200px) {
  .page-hero-centenario {
    min-height: 440px;
    background-position: center top 80px;
    background-size: 100% auto;
  }
}

@media (max-width: 1024px) {
  .page-hero-centenario {
    min-height: 420px;
    background-position: center top 80px;
    background-size: 100% auto;
  }
}

@media (max-width: 768px) {
  .page-hero-centenario {
    min-height: 260px;
    background-position: center top 74px;
    background-size: cover;
  }
}

.page-hero-livros .page-hero-overlay {
  display: block;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 1;
  pointer-events: none;
}