/* Estilos gerais para as seções principais do site. */
main > section {
    min-height: 100vh; /* Garante que cada seção ocupe pelo menos a altura total da viewport. */
    display: flex; /* Usa flexbox para centralizar o conteúdo. */
    align-items: center; /* Centraliza verticalmente. */
    justify-content: center; /* Centraliza horizontalmente. */
    position: relative; /* Necessário para posicionar elementos filhos com 'absolute'. */
    overflow: hidden; /* Esconde qualquer conteúdo que transborde. */
    padding-left: 1.5rem; /* Padding horizontal para o conteúdo. */
    padding-right: 1.5rem;
}
/* Estilos específicos para a seção Hero (primeira seção). */
.hero-section {
    color: white; /* Cor do texto. */
    min-height: calc(100vh - var(--header-height)); /* Altura ajustada para a altura do cabeçalho. */
}
/* Estilos para o vídeo/imagem de fundo da seção Hero. */
.hero-video-bg {
    position: absolute; /* Posiciona o elemento absolutamente dentro da seção. */
    top: 50%; left: 50%; /* Centraliza o elemento. */
    width: 100%; height: 100%; /* Ocupa toda a área da seção. */
    object-fit: cover; /* Garante que a imagem/vídeo cubra a área sem distorção. */
    transform: translate(-50%, -50%); /* Ajusta a posição para centralização exata. */
    z-index: -2; /* Envia para trás do conteúdo. */
    background-color: #1d1d1b; /* ATUALIZAÇÃO DA MARCA: Cor preta do manual, como fallback. */
}
/* Estilos para a sobreposição escura na seção Hero. */
.hero-overlay {
    position: absolute; /* Posiciona absolutamente. */
    top: 0; left: 0; /* Começa no canto superior esquerdo. */
    width: 100%; height: 100%; /* Ocupa toda a área. */
    background-color: rgba(29, 29, 27, 0.7); /* Overlay semi-transparente baseado no preto da marca. */
    z-index: -1; /* Fica entre o fundo e o conteúdo. */
}
/* Estilo para o botão de aba ativo na seção de Soluções. */
.tab-button.active {
    border-bottom-color: #ff8200; /* Borda inferior laranja. */
    color: #ff8200; /* Cor do texto laranja. */
}