/* Bloco: banner principal — vídeo da oficina ao fundo e título com frase que troca. */
.banner-principal { position: relative; display: grid; align-items: center; min-height: 610px; overflow: hidden; background: #070707; color: #fff; }
.banner-principal-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .65; }
.banner-principal-sombra { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #0000004d 0%, #000000b3 100%); }
.banner-principal-conteudo { position: relative; padding: 90px 0; }

.titulo-rotativo { margin: 0; font-family: var(--fonte-destaque); font-weight: 700; font-size: clamp(46px, 7vw, 92px); line-height: .95; text-transform: uppercase; }
.titulo-fixo { display: block; }
/* As frases ficam empilhadas na mesma célula: o espaço é o da maior e o título não pula na troca. */
.titulo-troca { display: grid; }
.titulo-troca > span { grid-area: 1 / 1; color: var(--amarelo); opacity: 0; transform: translateY(.5em); filter: blur(6px); transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1), filter .5s ease; }
.titulo-troca > .atual { opacity: 1; transform: none; filter: none; }
.titulo-troca > .saindo { transform: translateY(-.5em); }

@media (min-width: 601px) {
  .titulo-rotativo { text-align: center; }
}
@media (max-width: 600px) {
  .banner-principal { min-height: 540px; }
  .banner-principal-conteudo { padding: 60px 0; }
  .titulo-rotativo { text-align: center; }
}
