/* =========================================================================
   PROJETO — estilos exclusivos de catedral-documentario.html
   Os componentes compartilhados (cabeçalho, rodapé, container, botões)
   vivem em main.css. A página do Aldo Locatelli não usa este arquivo:
   ela tem design system próprio, em locatelli.css.
   ========================================================================= */

/* =========================================================================
   ABERTURA — cartela institucional centralizada + título do projeto
   ========================================================================= */
.abertura {
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}

.abertura__apresentacao {
  max-width: 46ch;
  margin-inline: auto;
  color: var(--texto-suave);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.8;
}

.abertura__titulo {
  max-width: 22ch;
  margin-inline: auto;
  margin-top: var(--esp-5);
  font-size: var(--texto-3xl);
}

/* =========================================================================
   TOPO DA PÁGINA
   ========================================================================= */
.projeto-topo {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  background-color: var(--fundo);
}

/* Link de retorno -------------------------------------------------------- */
.voltar {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-6);
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  font-weight: 700;
  transition: color var(--transicao-rapida);
}

.voltar:hover {
  color: var(--cor-vermelho);
}

.voltar__seta {
  transition: transform var(--transicao-rapida);
}

.voltar:hover .voltar__seta {
  transform: translateX(-3px);
}

/* Título ----------------------------------------------------------------- */
.projeto-titulo {
  max-width: 20ch;
  margin-bottom: var(--esp-5);
  font-size: var(--texto-3xl);
}

.projeto-lead {
  max-width: 60ch;
  color: var(--texto-suave);
  font-size: var(--texto-md);
  font-weight: 300;
  line-height: 1.7;
}

/* =========================================================================
   VÍDEO
   ========================================================================= */
.projeto-video {
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--cor-preto);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================================
   REALIZAÇÃO, APOIO E FINANCIAMENTO
   ========================================================================= */
.projeto-apoiadores {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--borda);
}

.apoiadores__banner {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}