/* Esconde os itens extras por padrão */
.item-oculto {
    display: none;
    /* Usamos 'none' para garantir que não ocupe espaço e não afete a linha vertical */
}

/* Quando visível, aplica a animação de fade-in */
.item-oculto.visivel {
    display: block; 
    /* 'block' é o padrão do 'div' e vai respeitar as classes .timeline-left/right */
    animation: fadeInUp 0.6s ease-out;
}

/* Container para o botão "Ver Tudo" */
.timeline-ver-tudo-container {
    text-align: center;
    margin-top: 40px;
    width: 100%;
    position: relative; 
    /* Garante que o botão fique abaixo da linha da timeline */
    z-index: 3; 
    /* Acima da linha (z-index: 1) e dos itens (z-index: 2) */
}
        :root {

            /* Paleta de Cores Atualizada */

            --cor-preto-principal: #1D1F21;
            /* Cinza-Escuro */

            --cor-preto-secundario: #1D1F21;
            /* Cinza-Escuro */

            --cor-preto-card: #1D1F21;
            /* Cinza-Escuro */

            --cor-laranja-destaque: #DD663F;
            /* Laranja */

            --cor-laranja-hover: #DD663F;
            /* Laranja (Hover mais claro) */

            --cor-laranja-neon: #FC5E01;
            /* Laranja */

            --cor-amarelo-neon: #FC5E01;
            /* Cinza (Substituindo Amarelo) */

            --cor-branco-texto: #F3EDDD;
            /* Branco */

            --cor-cinza-texto: #c9c3c2;
            /* Cinza */

            --cor-borda-sutil: #431c10;
            /* Marrom */

            /* Tipografia */

            --fonte-titulo: 'Titillium Web', sans-serif;

            --fonte-corpo: 'Titillium Web', sans-serif;

            /* Efeitos e Animações */

            --glow-shadow: 0 0 15px rgba(221, 102, 63);
            /* Sombra de brilho padrão. */

            --glow-shadow-intense: 0 0 25px rgba(221, 102, 63), 0 0 100px rgba(208, 102, 61, 0.5);
            /* Sombra de brilho mais intensa. */

            --transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            /* Transição rápida para interações. */

            --transition-medium: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            /* Transição de velocidade média. */

        }

        /* Seletor universal para resetar estilos padrão do navegador. */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Habilita a rolagem suave ao clicar em links de âncora (ex: <a href="#sobre">). */

        html {
            scroll-behavior: smooth;
        }

        /* Estilos base para todo o corpo da página. */

        body {

            background-color: var(--cor-preto-principal);
            /* Cor de fundo principal. */

            color: var(--cor-branco-texto);
            /* Cor padrão do texto. */

            font-family: var(--fonte-corpo);
            /* Fonte padrão para o corpo do texto. */

            line-height: 1.7;
            /* Altura da linha para melhor legibilidade. */

            overflow-x: hidden;
            /* Impede a rolagem horizontal. */

            /* Adiciona um efeito de scanline sutil ao fundo. */

            background-image:

                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(208, 102, 61, 0.03) 2px, rgba(208, 102, 61, 0.03) 4px);

        }

        /* Classe de container para centralizar o conteúdo e limitar sua largura máxima. */

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Estilos comuns para os títulos. */

        h1,
        h2,
        h3,
        h4 {
            font-family: var(--fonte-titulo);
            font-weight: 700;
            margin-bottom: 20px;
        }

        /* Estilos específicos para o título principal (H1). */

        h1 {

            font-size: 6rem;
            /* Tamanho da fonte. */

            font-weight: 900;
            /* Espessura da fonte. */

            letter-spacing: 8px;
            /* Espaçamento entre as letras. */

            text-transform: uppercase;
            /* Converte o texto para maiúsculas. */

            /* Cria um gradiente de cores para o texto. */

            background: linear-gradient(45deg, var(--cor-laranja-destaque), var(--cor-amarelo-neon), var(--cor-branco-texto));

            /* As duas linhas seguintes aplicam o gradiente como a cor do texto, tornando o fundo transparente. */

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

            filter: drop-shadow(0 0 20px rgba(208, 102, 61, 0.5));
            /* Adiciona uma sombra de brilho. */

            animation: glow-pulse 3s ease-in-out infinite;
            /* Aplica uma animação de pulsação. */

        }

        /* Define a animação 'glow-pulse' para o H1. */

        @keyframes glow-pulse {

            0%,
            100% {
                filter: drop-shadow(0 0 20px rgba(208, 102, 61, 0.5));
            }

            /* Estado inicial e final. */

            50% {
                filter: drop-shadow(0 0 40px rgba(208, 102, 61, 0.9)) drop-shadow(0 0 60px rgba(208, 102, 61, 0.6));
            }

            /* Ponto médio da animação, com brilho máximo. */

        }

        /* Estilos para os títulos de seção (H2). */

        h2 {

            font-size: 3.5rem;

            text-align: center;
            /* Centraliza o texto. */

            margin-bottom: 60px;
            /* Margem inferior. */

            position: relative;
            /* Necessário para posicionar o pseudo-elemento '::after'. */

            /* Aplica um gradiente ao texto. */

            background: linear-gradient(135deg, var(--cor-laranja-destaque), var(--cor-amarelo-neon), var(--cor-branco-texto));

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

            text-transform: uppercase;

            letter-spacing: 4px;

            filter: drop-shadow(0 0 10px rgba(208, 102, 61, 0.3));
            /* Sombra de brilho sutil. */

        }

        /* Cria uma linha decorativa animada abaixo dos títulos H2. */

        h2::after {

            content: '';
            /* Conteúdo vazio, pois é um elemento puramente visual. */

            position: absolute;
            /* Posicionamento absoluto em relação ao H2. */

            left: 50%;
            /* Centraliza horizontalmente. */

            transform: translateX(-50%);
            /* Ajuste fino para centralização perfeita. */

            bottom: -15px;
            /* Posição abaixo do texto. */

            width: 0px;
            /* Largura inicial, para a animação. */

            height: 4px;
            /* Altura da linha. */

            background: linear-gradient(90deg, transparent, var(--cor-laranja-destaque), transparent);
            /* Gradiente da linha. */

            box-shadow: 0 0 20px var(--cor-laranja-destaque);
            /* Brilho na linha. */

            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            /* Transição suave para a largura. */

        }

        /* Quando a seção se torna visível (via JS), a linha abaixo do H2 se expande. */

        section.visible h2::after {
            width: 200px;
        }

        /* Estilos para subtítulos (H3). */

        h3 {
            font-size: 2rem;
            color: var(--cor-laranja-destaque);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        /* Estilos para outros títulos (H4). */

        h4 {
            font-size: 1.4rem;
            text-transform: uppercase;
        }

        /* Estilos para parágrafos. */

        p {
            color: var(--cor-cinza-texto);
            margin-bottom: 20px;
            font-size: 1.1rem;
        }

        /* Estilos para links. */

        a {
            color: var(--cor-laranja-destaque);
            text-decoration: none;
            transition: var(--transition-fast);
        }

        /* Efeito hover para links. */

        a:hover {
            color: var(--cor-laranja-hover);
            text-shadow: 0 0 10px var(--cor-laranja-hover);
        }

        /* Estilos padrão para todas as seções principais da página. */

        section {
            padding: 120px 0;
            border-bottom: 1px solid var(--cor-borda-sutil);
            overflow: hidden;
            position: relative;
        }



        /* Container para as partículas de fundo. Posicionado para cobrir toda a seção. */

        .particles-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
            opacity: 0.3;
        }

        /* Estilo individual de cada partícula. */

        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: var(--cor-laranja-destaque);
            border-radius: 50%;
            animation: float-particle 10s linear infinite;
        }

        /* Animação para fazer as partículas flutuarem para cima. */

        @keyframes float-particle {

            0% {
                transform: translateY(100vh) translateX(0);
                opacity: 0;
            }

            /* Começa fora da tela, abaixo. */

            10% {
                opacity: 1;
            }

            /* Aparece. */

            90% {
                opacity: 1;
            }

            /* Permanece visível. */

            100% {
                transform: translateY(-100vh) translateX(100px);
                opacity: 0;
            }

            /* Desaparece fora da tela, acima. */

        }



        /* --- Sistema de Animação de Scroll --- */

        /* Estado inicial dos elementos que serão animados ao rolar a página. */

        [data-animation] {
            opacity: 0;
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        /* Posição inicial para a animação 'fade-in'. */

        [data-animation="fade-in"] {
            transform: translateY(40px);
        }

        /* Posição inicial para a animação 'slide-in-left'. */

        [data-animation="slide-in-left"] {
            transform: translateX(-80px);
        }

        /* Posição inicial para a animação 'slide-in-right'. */

        [data-animation="slide-in-right"] {
            transform: translateX(80px);
        }

        /* Posição inicial para a animação 'zoom-in'. */

        [data-animation="zoom-in"] {
            transform: scale(0.8);
        }

        /* Estado final (visível) dos elementos animados. O JS adiciona a classe '.visible'. */

        .visible[data-animation] {
            opacity: 1;
            transform: translate(0, 0) scale(1);
        }



        /* Estilos para os botões principais de chamada para ação (Call to Action). */

        .cta-button {

            background: linear-gradient(135deg, var(--cor-laranja-destaque), var(--cor-laranja-neon));

            color: var(--cor-branco-texto);

            padding: 18px 50px;
            /* Preenchimento interno. */

            text-decoration: none;

            font-family: var(--fonte-titulo);

            font-weight: 700;

            border-radius: 50px;
            /* Bordas arredondadas. */

            transition: all var(--transition-fast);

            font-size: 1.2rem;

            border: 2px solid transparent;
            /* Borda transparente inicial. */

            display: inline-block;
            /* Para aplicar padding e margem corretamente. */

            position: relative;
            /* Para posicionar o pseudo-elemento '::before'. */

            overflow: hidden;
            /* Esconde o que exceder os limites do botão. */

            z-index: 1;
            /* Garante que o texto fique acima do '::before'. */

            text-transform: uppercase;

            letter-spacing: 2px;

            box-shadow: 0 5px 20px rgba(208, 102, 61, 0.4);
            /* Sombra suave. */

        }

        /* Pseudo-elemento para criar um efeito de 'ripple' (onda) no hover. */

        .cta-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(251, 251, 251, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        /* Expande o círculo do 'ripple' quando o mouse passa por cima. */

        .cta-button:hover::before {
            width: 300px;
            height: 300px;
        }

        /* Efeitos de hover no botão: eleva, aumenta e adiciona brilho. */

        .cta-button:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: var(--glow-shadow-intense);
            border-color: var(--cor-amarelo-neon);
        }



        /* --- Tela de Carregamento (Preloader) --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Um fundo sólido escuro é mais profissional */
    background: #151515; 
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Transição de fade-out quando sumir */
    transition: opacity 0.8s ease, visibility 0.8s ease; 
    opacity: 1;
    visibility: visible;
}

.loading-logo {
    margin-bottom: 30px;
}

.loading-logo img {
    /* Animação suave de pulsação no logo */
    animation: pulse-logo 1.5s ease-in-out infinite;
}

/* Animação de pulsação suave para o logo */
@keyframes pulse-logo {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

/* Container da barra de progresso (o trilho) */
.loading-bar-container {
    width: 80%;
    max-width: 300px;
    height: 8px;
    background: #333; /* Cor do trilho */
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 20px;
}

/* Barra de progresso interna (a que cresce) */
#loading-bar {
    width: 0%; /* Começa em 0% */
    height: 100%;
    /* Usa as cores do seu site para a barra */
    background: linear-gradient(90deg, var(--cor-laranja-destaque), var(--cor-amarelo-neon));
    border-radius: 4px;
    /* Transição suave para o crescimento da barra */
    transition: width 0.2s ease-out; 
}

/* Texto da porcentagem */
#loading-percentage {
    font-family: var(--fonte-titulo);
    font-size: 1.5rem;
    color: var(--cor-laranja-destaque);
    letter-spacing: 2px;
}
/* --- Fim dos estilos do Preloader --- */

        /* Estilo do cabeçalho fixo no topo. */

        .header {
            background: linear-gradient(180deg, rgba(21, 21, 21, 0.95), rgba(21, 21, 21, 0.7));
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
            transition: all var(--transition-medium);
            backdrop-filter: blur(15px) saturate(180%);
            -webkit-backdrop-filter: blur(15px) saturate(180%);
            border-bottom: 2px solid transparent;
            height: 90px;
        }

        /* Estilo do cabeçalho quando a página é rolada. */

        .header.scrolled {
            background: linear-gradient(180deg, rgba(21, 21, 21, 0.98), rgba(21, 21, 21, 0.95));
            height: 75px;
            border-bottom-color: var(--cor-laranja-destaque);
            box-shadow: 0 5px 30px rgba(208, 102, 61, 0.3);
        }

        /* Container da barra de navegação (logo e menu). */

        .navbar {

            display: flex;
            /* Alinha os itens horizontalmente. */

            justify-content: space-between;
            /* Espaça a logo e o menu. */

            align-items: center;
            /* Centraliza verticalmente. */

            height: 100%;
            /* Ocupa toda a altura do header. */

            padding: 0 5%;
            /* Espaçamento lateral. */

            gap: 2rem;
            /* Adiciona um espaço mínimo entre a logo e o menu. */

        }

        /* Estilo da logo. */

        .logo {
            height: 55px;
            transition: all var(--transition-fast);
            filter: drop-shadow(0 0 10px rgba(208, 102, 61, 0.5));
        }

        /* Diminui a logo quando a página é rolada. */

        .header.scrolled .logo {
            height: 50px;
        }

        /* Efeito hover na logo. */

        .logo:hover {
            transform: scale(1.15) rotate(-5deg);
            filter: drop-shadow(0 0 20px rgba(208, 102, 61, 0.9)) drop-shadow(0 0 30px rgba(255, 221, 0, 0.5));
        }

        /* Lista de links do menu de navegação. */

        .nav-menu {
            list-style: none;
            display: flex;
            gap: 30px;
        }

        /* Estilo de cada link do menu. */

        .nav-link {
            color: var(--cor-branco-texto);
            text-decoration: none;
            font-family: var(--fonte-titulo);
            font-weight: 500;
            font-size: 1rem;
            position: relative;
            padding: 8px 0;
            transition: color var(--transition-fast);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Linha decorativa animada abaixo do link do menu. */

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--cor-laranja-destaque), var(--cor-amarelo-neon));
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            box-shadow: 0 0 10px var(--cor-laranja-destaque);
        }

        /* Efeitos no link quando o mouse passa por cima ou quando está ativo. */

        .nav-link:hover,
        .nav-link.active {
            color: var(--cor-laranja-destaque);
            text-shadow: 0 0 10px rgba(208, 102, 61, 0.8);
        }

        /* Expande a linha abaixo do link no hover ou quando ativo. */

        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

        /* Ícone do menu hamburguer para telas menores (inicialmente escondido). */

        .hamburger {
            display: none;
            cursor: pointer;
            z-index: 1002;
        }

        /* Barras que formam o ícone hamburguer. */

        .bar {
            display: block;
            width: 28px;
            height: 3px;
            margin: 6px auto;
            transition: all var(--transition-medium);
            background: linear-gradient(90deg, var(--cor-laranja-destaque), var(--cor-amarelo-neon));
            border-radius: 2px;
            box-shadow: 0 0 5px var(--cor-laranja-destaque);
        }



        /* --- Seção Home (Hero) --- */

        /* Estilo da seção principal (topo). */

        #home {
            height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            overflow: hidden;
        }

        /* Container do slideshow de imagens de fundo. */

        .slideshow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            list-style: none;
            z-index: -2;
        }

        /* Estilo de cada item (imagem) do slideshow. */

        .slideshow li {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            animation: imageAnimation 30s linear infinite;
            filter: brightness(0.7) contrast(1.2);
        }

        /* Adiciona uma sobreposição escura (vinheta) sobre as imagens do slideshow. */

        .slideshow li::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at center, rgba(21, 21, 21, 0.3) 0%, rgba(21, 21, 21, 0.85) 100%);
        }

        /* Animação que faz as imagens aparecerem e desaparecerem (fade in/out). */

        @keyframes imageAnimation {
            0% {
                opacity: 0;
                animation-timing-function: ease-in;
                transform: scale(1.2);
            }

            4% {
                opacity: 1;
                transform: scale(1.1);
            }

            20% {
                opacity: 1;
                transform: scale(1);
            }

            24% {
                opacity: 0;
                transform: scale(1);
            }

            100% {
                opacity: 0;
            }
        }

        /* Define as imagens de fundo para cada slide e o atraso da animação para criar a sequência. */

        .slideshow li:nth-child(1) {
            background-image: url('images/hero-1.jpg');
            animation-delay: 0s;
        }

        .slideshow li:nth-child(2) {
            background-image: url('images/hero-2.jpg');
            animation-delay: 6s;
        }

        .slideshow li:nth-child(3) {
            background-image: url('images/hero-3.jpg');
            animation-delay: 12s;
        }

        .slideshow li:nth-child(4) {
            background-image: url('images/hero-4.jpg');
            animation-delay: 18s;
        }

        .slideshow li:nth-child(5) {
            background-image: url('images/hero-5.jpg');
            animation-delay: 24s;
        }

        /* Container para o conteúdo principal da seção Home (título, parágrafo, botão). */

        .hero-content {
            padding: 0 20px;
            z-index: 1;
        }

        /* Aplica sombra e animações ao título H1 da seção. */

        .hero-content h1 {
            text-shadow: 0 0 40px rgba(208, 102, 61, 0.8);
            animation: fadeInUp 1.2s ease-out, hero-float 4s ease-in-out infinite;
        }

        /* Animação que faz o título flutuar suavemente. */

        @keyframes hero-float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-20px);
            }
        }

        /* Estilo do parágrafo da seção Home. */

        .hero-content p {
            font-size: 1.6rem;
            max-width: 800px;
            margin: 30px auto 50px;
            animation: fadeInUp 1.2s ease-out 0.4s backwards;
            text-shadow: 0 2px 10px rgba(21, 21, 21, 0.8);
            font-weight: 500;
        }

        /* Animação de pulsação para o botão CTA. */

        .hero-content .cta-button {
            animation: pulse 2.5s infinite, fadeInUp 1.2s ease-out 0.8s backwards;
        }

        /* Define a animação 'pulse' para o botão. */

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(208, 102, 61, 0.8);
            }

            70% {
                box-shadow: 0 0 0 30px rgba(208, 102, 61, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(208, 102, 61, 0);
            }
        }



        /* Efeitos Visuais Adicionais para a Seção Home */

        /* Container para a animação de "estrada em perspectiva". */

        .road-animation {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            perspective: 800px;
            z-index: 0;
        }

        /* Estilo das linhas que simulam a estrada. */

        .road-line {
            position: absolute;
            width: 8px;
            height: 150px;
            background: linear-gradient(180deg, transparent, rgba(255, 221, 0, 0.8), rgba(208, 102, 61, 0.8), transparent);
            left: 50%;
            transform-origin: center;
            animation: move-road-line 3s linear infinite;
            box-shadow: 0 0 20px rgba(255, 221, 0, 0.5);
            border-radius: 4px;
        }

        /* Animação que move as linhas da estrada em perspectiva 3D. */

        @keyframes move-road-line {
            0% {
                transform: translateX(-50%) translateZ(-400px) translateY(-60vh) rotateX(60deg);
                opacity: 0;
            }

            20% {
                opacity: 1;
            }

            80% {
                opacity: 1;
            }

            100% {
                transform: translateX(-50%) translateZ(600px) translateY(60vh) rotateX(60deg) scale(2);
                opacity: 0;
            }
        }

        /* Atrasos na animação para criar um fluxo contínuo de linhas. */

        .road-line:nth-child(1) {
            animation-delay: 0s;
            left: 45%;
        }

        .road-line:nth-child(2) {
            animation-delay: -0.5s;
            left: 55%;
        }

        .road-line:nth-child(3) {
            animation-delay: -1s;
            left: 45%;
        }

        .road-line:nth-child(4) {
            animation-delay: -1.5s;
            left: 55%;
        }

        .road-line:nth-child(5) {
            animation-delay: -2s;
            left: 45%;
        }

        .road-line:nth-child(6) {
            animation-delay: -2.5s;
            left: 55%;
        }



        /* Container para as "linhas de velocidade". */

        .speed-lines {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 0;
        }

        /* Estilo de cada linha de velocidade. */

        .speed-line {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(208, 102, 61, 0.8), transparent);
            opacity: 0;
            animation: speed-line-move 2s linear infinite;
        }

        /* Animação que move as linhas horizontalmente. */

        @keyframes speed-line-move {
            0% {
                left: -100%;
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                left: 100%;
                opacity: 0;
            }
        }

        /* Configurações diferentes para cada linha de velocidade, criando variedade. */

        .speed-line:nth-child(1) {
            top: 20%;
            width: 40%;
            animation-delay: 0s;
        }

        .speed-line:nth-child(2) {
            top: 40%;
            width: 60%;
            animation-delay: 0.3s;
        }

        .speed-line:nth-child(3) {
            top: 60%;
            width: 50%;
            animation-delay: 0.6s;
        }

        .speed-line:nth-child(4) {
            top: 80%;
            width: 45%;
            animation-delay: 0.9s;
        }



        /* --- Seção Sobre --- */

        #sobre {
            background: linear-gradient(180deg, var(--cor-preto-principal), var(--cor-preto-secundario));
        }

        /* Layout em grid para o conteúdo da seção Sobre (texto e imagem). */

        .about-content {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 80px;
            align-items: center;
        }

        /* Container da imagem com posicionamento relativo para o efeito de borda. */

        .about-image {
            position: relative;
        }

        /* Cria uma borda decorativa animada ao redor da imagem. */

        .about-image::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -5px;
            border: 2px solid var(--cor-laranja-destaque);
            border-radius: 10px;
            opacity: 0.5;
            transition: all var(--transition-medium);
        }

        /* Expande e ilumina a borda no hover. */

        .about-image:hover::before {
            top: -25px;
            left: -25px;
            right: -25px;
            bottom: -25px;
            opacity: 1;
            box-shadow: 0 0 25px var(--cor-laranja-destaque);
        }

        /* Estilo da imagem. */

        .about-image img {
            width: 100%;
            border-radius: 1px;
            box-shadow: 0 20px 60px rgba(208, 102, 61, 0.3);
            transition: all var(--transition-medium);
            position: relative;
            z-index: 1;
        }

        /* Efeito de elevação na imagem no hover. */

        .about-image:hover img {
            transform: scale(1.05) translateY(-7px);
            box-shadow: 0 30px 80px rgba(208, 102, 61, 0.5);
        }

        /* Grid para os itens de Missão e Visão. */

        .values-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
            margin-top: 40px;
        }

        /* Estilo de cada card de valor (Missão/Visão). */

        .value-item {
            background: linear-gradient(135deg, var(--cor-preto-principal), var(--cor-preto-card));
            padding: 30px;
            border-radius: 10px;
            border-left: 4px solid var(--cor-laranja-destaque);
            border-top: 1px solid rgba(208, 102, 61, 0.2);
            transition: all var(--transition-fast);
            position: relative;
            overflow: hidden;
        }

        /* Elemento para criar um efeito de brilho que passa pelo card no hover. */

        .value-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(208, 102, 61, 0.1), transparent);
            transition: left 0.5s;
        }

        /* Ativa a animação de brilho no hover. */

        .value-item:hover::before {
            left: 100%;
        }

        /* Efeitos visuais no card de valor no hover. */

        .value-item:hover {
            transform: translateY(-8px) translateX(5px);
            background: linear-gradient(135deg, var(--cor-preto-card), #1a1a1a);
            box-shadow: 0 10px 30px rgba(208, 102, 61, 0.4);
            border-left-width: 6px;
        }



        /* --- Seção História (Timeline) --- */

        /* Container da linha do tempo. */

        .timeline {
            position: relative;
            max-width: 1100px;
            margin: 60px auto 0;
        }

        /* Linha vertical central da timeline. */

        .timeline::after {
            content: '';
            position: absolute;
            width: 6px;
            background: linear-gradient(to bottom, var(--cor-laranja-destaque), var(--cor-amarelo-neon), transparent);
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -3px;
            border-radius: 3px;
            box-shadow: 0 0 20px var(--cor-laranja-destaque);
        }

        /* Estilo de cada item/evento na timeline. */

        .timeline-item {
            padding: 15px 50px;
            position: relative;
            width: 50%;
            z-index: 2;
            /* <-- ADICIONE ESTA LINHA */
        }

        /* Círculo decorativo em cada item da timeline. */

        .timeline-item::after {
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            background: radial-gradient(circle, var(--cor-laranja-neon), var(--cor-laranja-destaque));
            border: 5px solid var(--cor-preto-principal);
            top: 25px;
            border-radius: 50%;
            z-index: 2;
            box-shadow: 0 0 0 4px rgba(208, 102, 61, 0.3), 0 0 20px var(--cor-laranja-destaque);
            transition: all var(--transition-medium);
        }

        /* Animação do círculo no hover. */

        .timeline-item:hover::after {
            transform: scale(1.3) rotate(360deg);
            box-shadow: 0 0 0 8px rgba(208, 102, 61, 0.5), 0 0 40px var(--cor-laranja-destaque);
        }

        /* Posiciona os itens do lado esquerdo da linha. */

        .timeline-left {
            left: 0;
            text-align: right;
        }

        /* Posiciona o círculo do item esquerdo na linha central. */

        .timeline-left::after {
            right: -18px;
        }

        /* Posiciona os itens do lado direito da linha. */

        .timeline-right {
            left: 50%;
        }

        /* Posiciona o círculo do item direito na linha central. */

        .timeline-right::after {
            left: -18px;
        }

        /* Caixa de conteúdo de cada item da timeline. */

        .timeline-content {
            padding: 30px 40px;
            background: linear-gradient(135deg, var(--cor-preto-secundario), var(--cor-preto-card));
            border-radius: 12px;
            position: relative;
            box-shadow: 0 6px 20px rgba(21, 21, 21, 0.4);
            transition: all var(--transition-fast);
            border: 1px solid rgba(208, 102, 61, 0.2);
        }

        /* Efeito de destaque no conteúdo do item no hover. */

        .timeline-item:hover .timeline-content {
            transform: scale(1.05);
            box-shadow: 0 12px 35px rgba(208, 102, 61, 0.4);
            border-color: var(--cor-laranja-destaque);
        }

        /* MODIFICAÇÃO: Adiciona z-index: 1 para a barra vertical */
        .timeline::after {
            content: '';
            position: absolute;
            width: 6px;
            background: linear-gradient(to bottom, var(--cor-laranja-destaque), var(--cor-amarelo-neon), transparent);
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -3px;
            border-radius: 3px;
            box-shadow: 0 0 20px var(--cor-laranja-destaque);
            z-index: 1;
            /* <-- ADICIONE ESTA LINHA */
        }

        /* O .timeline-item::after (a bolinha) já possui z-index: 2, então ele ficará na frente */


        /* NOVO: Estilos para o link que envolve o card */
        .timeline-link {
            display: block;
            text-decoration: none;
            color: inherit;
            /* Remove a cor azul padrão do link */
            outline: none;
            border-radius: 12px;
            /* Herda o radius do .timeline-content */
        }

        /* NOVO: Estilo para o "Saiba Mais" (começa escondido) */
        .saiba-mais {
            display: block;
            margin-top: 15px;
            font-family: var(--fonte-titulo);
            font-weight: 700;
            color: var(--cor-amarelo-neon);
            /* Cor de destaque */
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0;
            max-height: 0;
            /* Animação de altura */
            transform: translateY(10px);
            transition: all 0.4s ease;
        }

        /* NOVO: "Saiba Mais" aparece quando o mouse passa sobre o item */
        .timeline-item:hover .saiba-mais,
        .timeline-link:focus-visible .saiba-mais {
            opacity: 1;
            max-height: 50px;
            /* Altura suficiente para o texto */
            transform: translateY(0);
        }

        /* NOVO: Adiciona o efeito de hover também para foco (acessibilidade) */
        .timeline-link:focus-visible .timeline-content {
            transform: scale(1.05);
            box-shadow: 0 12px 35px rgba(208, 102, 61, 0.4);
            border-color: var(--cor-laranja-destaque);
        }

        /* --- Seção Métricas --- */

        #metricas {
            background-color: var(--cor-preto-secundario);
            text-align: center;
        }

        /* Cabeçalho da seção de métricas. */

        .metrics-header {
            max-width: 800px;
            margin: 0 auto 60px auto;
        }

        .metrics-header p {
            font-size: 1.2rem;
        }

        /* Grid para os cards de métricas. */

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
        }

        /* Estilo de cada card de métrica. */

        .metric-card {
            background: linear-gradient(145deg, var(--cor-preto-card), #151515);
            padding: 40px;
            border-radius: 15px;
            border: 2px solid var(--cor-borda-sutil);
            transition: var(--transition-medium);
        }

        /* Efeito de elevação e brilho no card no hover. */

        .metric-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--glow-shadow);
            border-color: var(--cor-laranja-destaque);
        }

        /* Estilo do ícone dentro do card. */

        .metric-icon i {
            font-size: 3.5rem;
            color: var(--cor-laranja-destaque);
            margin-bottom: 20px;
            text-shadow: 0 0 20px var(--cor-laranja-destaque);
        }

        /* Estilo do número/valor da métrica (animado via JS). */

        .metric-value {
            font-family: var(--fonte-titulo);
            font-size: 3.5rem;
            font-weight: 900;
        }

        /* Estilo do rótulo da métrica. */

        .metric-label {
            color: var(--cor-cinza-texto);
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 15px;
        }

        /* trilho da barra de progresso. */

        .metric-track {
            height: 6px;
            background: #151515;
            border-radius: 3px;
            overflow: hidden;
        }

        /* Barra de progresso animada. */

        .metric-bar {
            display: block;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--cor-laranja-destaque), var(--cor-amarelo-neon));
            transition: width 1.6s ease;
        }

        /* Grid para os cards de insights. */

        .metrics-insights {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-top: 80px;
            text-align: left;
        }

        /* Estilo dos cards de insight. */

        .insight-card {
            background: var(--cor-preto-card);
            padding: 30px;
            border-radius: 10px;
            border-left: 4px solid var(--cor-laranja-destaque);
        }

        /* Lista dentro do card de insight. */

        .insight-list {
            list-style: none;
        }

        .insight-list li {
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
        }

        /* "Bolinha" decorativa antes de cada item da lista. */

        .insight-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: var(--cor-laranja-destaque);
            border-radius: 50%;
            margin-right: 15px;
            margin-top: 8px;
            flex-shrink: 0;
        }

        /* Card de Telemetria */

        .telemetry-card {
            background: linear-gradient(145deg, var(--cor-preto-card), #151515);
        }

        /* Grid para os dados de telemetria. */

        .telemetry-stream {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            margin-bottom: 25px;
        }

        /* Cada leitura individual de telemetria. */

        .telemetry-readout {
            text-align: center;
        }

        /* Rótulo do dado de telemetria (ex: 'Torque'). */

        .telemetry-label {
            display: block;
            font-size: 0.9rem;
            color: var(--cor-cinza-texto);
        }

        /* Valor do dado de telemetria. */

        .telemetry-value {
            font-family: var(--fonte-titulo);
            font-size: 1.6rem;
        }

        /* Elemento canvas para desenhar o gráfico de telemetria. */

        #telemetry-sparkline {
            display: block;
            width: 100%;
            height: 120px;
        }

        /* Nota de rodapé no card de telemetria. */

        .telemetry-note {
            font-size: 0.8rem;
            color: #837c7a;
            margin-top: 15px;
            text-align: center;
        }



        /* --- Seção Explore 3D --- */

        #explore-3d {
            background: linear-gradient(180deg, var(--cor-preto-secundario), var(--cor-preto-principal));
            text-align: center;
        }

        /* Estilo do componente <model-viewer> que exibe o modelo 3D. */

        model-viewer {
            width: 100%;
            height: 700px;
            margin: 20px auto;
            border-radius: 20px;
            border: 3px solid var(--cor-laranja-destaque);
            --poster-color: transparent;
            background-image: url('images/3d-bg.png');
            background-size: cover;
            box-shadow: 0 0 50px rgba(208, 102, 61, 0.4), inset 0 0 30px rgba(208, 102, 61, 0.3);
        }

        /* Estilo dos hotspots (pontos clicáveis) no modelo 3D. */

        .hotspot {
            display: block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid var(--cor-amarelo-neon);
            background-color: rgba(208, 102, 61, 0.8);
            box-shadow: var(--glow-shadow);
            --min-hotspot-opacity: 0;
            transition: all 0.3s;
            animation: hotspot-pulse-2 1.5s infinite;
        }

        /* Esconde o hotspot quando não está visível (controlado pelo model-viewer). */

        .hotspot:not([data-visible]) {
            background-color: transparent;
            border-color: transparent;
            animation: none;
        }

        /* Efeito de hover no hotspot. */

        .hotspot:hover {
            transform: scale(1.4);
            animation-play-state: paused;
            box-shadow: var(--glow-shadow-intense);
        }

        /* Estilo da caixa de anotação que aparece ao clicar em um hotspot. */

        .annotation {
            background-color: rgba(21, 21, 21, 0.9);
            backdrop-filter: blur(10px);
            color: var(--cor-branco-texto);
            border-radius: 8px;
            border: 1px solid var(--cor-laranja-destaque);
            box-shadow: 0 5px 20px rgba(208, 102, 61, 0.4);
            padding: 15px 20px;
            font-family: var(--fonte-corpo);
            font-size: 1.1rem;
            max-width: 250px;
            text-align: left;
        }

        /* Estilo para texto em negrito dentro da anotação. */

        .annotation strong {
            font-family: var(--fonte-titulo);
            color: var(--cor-amarelo-neon);
        }

        /* Animação de pulsação para os hotspots. */

        @keyframes hotspot-pulse-2 {
            0% {
                transform: scale(1);
                box-shadow: 0 0 15px rgba(208, 102, 61, 0.7);
            }

            50% {
                transform: scale(1.15);
                box-shadow: 0 0 30px rgba(255, 221, 0, 0.9);
            }

            100% {
                transform: scale(1);
                box-shadow: 0 0 15px rgba(208, 102, 61, 0.7);
            }
        }



        /* --- Estilos de Cards Reutilizáveis --- */

        /* Container grid para os cards. */

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
        }

        /* Base do card, que contém a borda animada. */

        .card-base {
            background: linear-gradient(145deg, var(--cor-preto-card), #151515);
            border-radius: 15px;
            padding: 8px;
            border: 1px solid transparent;
            transition: all var(--transition-medium);
            position: relative;
            overflow: hidden;
        }

        /* Pseudo-elementos que criam a borda de gradiente animada. */

        .card-base::before,
        .card-base::after {
            content: '';
            position: absolute;
            width: 150%;
            height: 150%;
            background: conic-gradient(from var(--angle), transparent 0%, var(--cor-laranja-destaque) 10%, transparent 20%);
            animation: rotate-border 6s linear infinite;
            opacity: 0;
            transition: opacity var(--transition-fast);
        }

        .card-base::before {
            top: -25%;
            left: -25%;
        }

        .card-base::after {
            bottom: -25%;
            right: -25%;
            animation-direction: reverse;
        }

        /* Registra a propriedade '--angle' para que possa ser animada. */

        @property --angle {
            syntax: '<angle>';
            inherits: false;
            initial-value: 0deg;
        }

        /* Animação que rotaciona o ângulo do gradiente cônico, criando o efeito de borda em movimento. */

        @keyframes rotate-border {
            to {
                --angle: 360deg;
            }
        }

        /* Efeito de elevação no card no hover. */

        .card-base:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(208, 102, 61, 0.4);
        }

        /* Mostra a borda animada no hover. */

        .card-base:hover::before,
        .card-base:hover::after {
            opacity: 0.8;
        }

        /* Conteúdo interno do card. */

        .card-content {
            background: var(--cor-preto-secundario);
            border-radius: 12px;
            padding: 30px;
            position: relative;
            z-index: 1;
            height: 100%;
        }

        /* Cabeçalho de uma divisão (ícone + título). */

        .division-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 20px;
        }

        /* Ícones dentro dos cards. */

        .division-header i,
        .tech-card i {
            font-size: 3rem;
            color: var(--cor-laranja-destaque);
            transition: transform var(--transition-fast);
            text-shadow: 0 0 15px var(--cor-laranja-destaque);
        }

        /* Efeito de rotação no ícone no hover do card. */

        .card-base:hover i {
            transform: scale(1.1) rotate(5deg);
        }

        /* --- NOVO: Estilos para lista de Micro-divisões --- */
        .micro-divisoes {
            list-style: none; /* Remove bullets */
            padding-left: 0;
            margin-top: 20px; /* Espaço após a descrição principal */
        }
        .micro-divisoes li {
            color: var(--cor-cinza-texto);
            font-size: 1rem;
            font-weight: 600; /* Dando um leve destaque */
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }
        /* Adiciona um ícone de "seta" laranja antes de cada micro-divisão */
        .micro-divisoes li::before {
            content: '\f105'; /* Ícone de seta (chevron-right) do Font Awesome */
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            color: var(--cor-laranja-destaque);
            margin-right: 10px;
            font-size: 0.9rem;
        }

        /* --- Seção Imersão --- */

        #imersao {
            background-color: var(--cor-preto-secundario);
        }

        /* Cabeçalho da seção de imersão. */

        .immersive-header {
            text-align: center;
            max-width: 800px;
            margin: 0 auto 60px;
        }

        /* Layout em grid para a seção de imersão (preview e controles). */

        .immersive-layout {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 50px;
        }

        /* Container da pré-visualização (vídeo e especificações). */

        .immersive-preview {
            background-color: var(--cor-preto-card);
            border-radius: 15px;
            overflow: hidden;
        }

        /* "Vídeo" de pré-visualização (na verdade uma imagem de fundo com efeitos). */

        .immersive-video {
            height: 350px;
            background: url(images/immersive-bg.jpg) no-repeat center center/cover;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Sobreposição com efeito de "ruído" de TV antiga. */

        .video-noise {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/noise.png);
            opacity: 0.1;
            animation: noise-anim 0.3s steps(4) infinite;
        }

        /* Animação que move a camada de ruído para criar o efeito. */

        @keyframes noise-anim {
            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(-5px, 5px);
            }

            50% {
                transform: translate(5px, -5px);
            }

            75% {
                transform: translate(-5px, -5px);
            }

            100% {
                transform: translate(5px, 5px);
            }
        }

        /* HUD (Heads-Up Display) com informações sobreposto ao vídeo. */

        .video-hud {
            position: absolute;
            bottom: 15px;
            left: 15px;
            right: 15px;
            display: flex;
            justify-content: space-between;
            font-family: var(--fonte-titulo);
            background: rgba(21, 21, 21, 0.5);
            padding: 8px 12px;
            border-radius: 5px;
        }

        .hud-item strong {
            color: var(--cor-amarelo-neon);
        }

        /* Botão de play sobreposto ao vídeo. */

        .play-virtual-lab {
            position: absolute;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: var(--cor-laranja-destaque);
            border: none;
            color: #fbfbfb;
            font-size: 2rem;
            cursor: pointer;
            transition: var(--transition-medium);
            box-shadow: var(--glow-shadow);
        }

        .play-virtual-lab:hover {
            transform: scale(1.1);
            box-shadow: var(--glow-shadow-intense);
        }

        /* Lista de especificações abaixo do vídeo. */

        .immersive-specs {
            list-style: none;
            padding: 30px;
        }

        .immersive-specs li {
            display: grid;
            grid-template-columns: 1fr 1fr;
            padding: 15px 0;
            border-bottom: 1px solid var(--cor-borda-sutil);
        }

        .immersive-specs li:last-child {
            border: none;
        }

        .immersive-specs li span {
            color: var(--cor-cinza-texto);
        }

        /* Container dos controles da experiência imersiva (abas e painéis). */

        .immersive-controls {
            display: flex;
            flex-direction: column;
        }

        /* Grid para os botões de abas. */

        .immersive-tabs {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 25px;
        }

        /* Estilo de cada botão de aba. */

        .immersive-tab {
            width: 100%;
            background: var(--cor-preto-card);
            border: 2px solid var(--cor-borda-sutil);
            color: var(--cor-branco-texto);
            padding: 15px;
            border-radius: 8px;
            font-family: var(--fonte-titulo);
            cursor: pointer;
            transition: var(--transition-fast);
        }

        /* Estilo da aba ativa ou em hover. */

        .immersive-tab.active,
        .immersive-tab:hover {
            background: var(--cor-laranja-destaque);
            border-color: var(--cor-laranja-destaque);
            color: #fbfbfb;
        }

        /* Estilo do painel de conteúdo de cada aba. */

        .immersive-panel {
            background: var(--cor-preto-card);
            border-radius: 10px;
            padding: 30px;
            flex-grow: 1;
            transition: opacity 0.5s;
            opacity: 0;
        }

        /* Painel ativo fica visível. */

        .immersive-panel.active {
            opacity: 1;
        }

        /* Lista de verificação dentro dos painéis. */

        .immersive-checklist {
            list-style-type: '✓ ';
            list-style-position: inside;
            padding-left: 5px;
            margin-top: 20px;
        }

        .immersive-checklist li {
            margin-bottom: 10px;
        }

        /* CTA (chamada para ação) dentro dos controles. */

        .immersive-cta {
            margin-top: auto;
            padding-top: 30px;
            text-align: center;
        }

        .immersive-cta p {
            font-size: 0.9rem;
            margin-top: 15px;
        }

        /* Janela Modal (pop-up) que abre ao clicar no botão de play. */

        .immersive-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1001;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition-medium);
        }

        /* Estilo do modal quando visível. */

        .immersive-modal.show {
            opacity: 1;
            visibility: visible;
        }

        /* Fundo escurecido atrás do modal. */

        .modal-backdrop {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(21, 21, 21, 0.8);
            backdrop-filter: blur(10px);
        }

        /* Conteúdo do modal. */

        .modal-content {
            position: relative;
            z-index: 2;
            background: var(--cor-preto-card);
            padding: 40px;
            border-radius: 15px;
            border: 2px solid var(--cor-laranja-destaque);
            max-width: 900px;
            width: 90%;
        }

        /* Botão de fechar o modal. */

        .modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            color: #fbfbfb;
            font-size: 2rem;
            cursor: pointer;
        }

        /* Grid para o conteúdo dentro do modal. */

        .modal-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }



        /* --- Seção Equipe --- */

        #equipe {
            background-color: var(--cor-preto-principal);
        }

        /* Grid para os cards dos membros da equipe. */

        /* --- CÓDIGO NOVO --- */
        .team-grid {
            display: flex;          /* MUDADO DE 'grid' PARA 'flex' */
            flex-wrap: wrap;        /* ADICIONADO: Para quebrar a linha com vários membros */
             justify-content: center;/* ADICIONADO: Isso centraliza o(s) card(s) */
             gap: 40px;
        }

        /* Estilo de cada card de membro. */

        .team-member {
            width: 280px;
            text-align: center;
            padding: 25px;
            transition: all var(--transition-fast);
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            background: linear-gradient(var(--cor-preto-card), #151515);
            border: 2px solid transparent;
        }

        /* Efeito de elevação e destaque no card no hover. */

        .team-member:hover {
            transform: translateY(-15px);
            box-shadow: 0 20px 50px rgba(208, 102, 61, 0.4);
            border-color: var(--cor-laranja-destaque);
        }

        /* Container da foto do membro. */

        .member-photo-wrapper {
            position: relative;
            display: inline-block;
            margin-bottom: 25px;
        }

        /* Estilo da foto do membro. */

        .member-photo {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid var(--cor-laranja-destaque);
            transition: all var(--transition-fast);
            box-shadow: 0 0 30px rgba(208, 102, 61, 0.6);
        }

        /* Efeito de zoom e brilho na foto no hover do card. */

        .team-member:hover .member-photo {
            transform: scale(1.08);
            box-shadow: var(--glow-shadow-intense);
        }

        /* Nome do membro. */

        .member-name {
            font-size: 1.5rem;
            margin-bottom: 8px;
        }

        /* Cargo do membro. */

        .member-role {
            color: var(--cor-amarelo-neon);
            font-family: var(--fonte-titulo);
            font-weight: 500;
            margin-bottom: 20px;
            font-size: 1.1rem;
        }

        /* Título que separa as divisões da equipe. */

        /* --- SUBSTITUA PELO CÓDIGO ABAIXO --- */
.division-title {
    width: 100%;
    text-align: center;
    padding: 15px 0; /* Ajustei o padding para não achatar as linhas */
    margin: 80px 0 40px 0;
    background: linear-gradient(var(--cor-preto-secundario), transparent);
    position: relative; /* ESSENCIAL para posicionar as linhas */
    /* As bordas foram removidas daqui */
}

/* ADICIONE ESTAS NOVAS REGRAS LOGO ABAIXO */

/* Esta regra cria as DUAS linhas (de cima e de baixo) */
.division-title::before,
.division-title::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Truque para centralizar */
    width: 100%; /* LARGURA LIMITADA - 60% do container */
    max-width: 700px; /* Largura máxima para a linha */
    height: 2px;
    background: var(--cor-laranja-destaque);
    box-shadow: 0 0 10px var(--cor-laranja-destaque); /* Efeito de brilho */
}

/* Posição da linha de CIMA */
.division-title::before {
    top: 0;
}

/* Posição da linha de BAIXO */
.division-title::after {
    bottom: 0;
}

        /* --- Seção Carros --- */

        #carros {
            background: var(--cor-preto-secundario);
        }

        /* Galeria dos carros. */

        .car-gallery {
            display: grid;
            grid-template-columns: 1fr;
            gap: 120px;
        }

        /* Cada entrada de carro (imagem e informações). */

        .car-entry {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        /* Alterna a ordem da imagem para entradas pares (zigue-zague). */

        .car-entry:nth-child(even) .car-image {
            order: 2;
        }

        /* Estilo da imagem do carro. */

        .car-image img {
            width: 100%;
            border-radius: 15px;
            box-shadow: 0 15px 40px rgba(208, 102, 61, 0.3);
        }

        /* Estilo da caixa de informações do carro. */

        .car-info {
            border: 2px solid var(--cor-borda-sutil);
            padding: 40px;
            border-radius: 15px;
            background: linear-gradient(145deg, var(--cor-preto-card), #151515);
        }

        /* Lista de especificações técnicas do carro. */

        .car-specs {
            list-style: none;
            margin-top: 30px;
            font-family: var(--fonte-titulo);
        }

        .car-specs li {
            display: flex;
            justify-content: space-between;
            padding: 15px;
            border-bottom: 1px dashed var(--cor-borda-sutil);
            transition: all var(--transition-fast);
        }

        /* Efeito de destaque no item da lista no hover. */

        .car-specs li:hover {
            background: rgba(208, 102, 61, 0.1);
            border-color: var(--cor-laranja-destaque);
        }

        .car-specs li span:first-child {
            font-weight: bold;
            color: var(--cor-branco-texto);
        }

        .car-specs li span:last-child {
            color: var(--cor-amarelo-neon);
        }



        /* --- Seção Depoimentos --- */

        #depoimentos {
            background-color: var(--cor-preto-principal);
        }

        /* Layout em grid para o slider e a barra lateral. */

        .testimonial-layout {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 50px;
            align-items: flex-start;
        }

        /* Container do slider de depoimentos. */

        .testimonial-slider {
            position: relative;
            background: linear-gradient(145deg, var(--cor-preto-card), #151515);
            border-radius: 15px;
            padding: 40px 60px;
        }

        /* Faixa que contém os cards de depoimento (para esconder os inativos). */

        .testimonial-track {
            position: relative;
            overflow: hidden;
            min-height: 200px;
        }

        /* Estilo de cada card de depoimento. */

        .testimonial-card {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.6s ease, transform 0.6s ease;
            transform: translateY(20px);
        }

        /* Estilo do card de depoimento ativo (visível). */

        .testimonial-card.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* Citação do depoimento. */

        .testimonial-quote {
            font-size: 1.4rem;
            font-style: italic;
            margin-bottom: 25px;
        }

        /* Informações do autor do depoimento. */

        .testimonial-author {
            display: flex;
            flex-direction: column;
        }

        .testimonial-author strong {
            font-size: 1.2rem;
        }

        .testimonial-author span {
            color: var(--cor-cinza-texto);
        }

        /* Botões de navegação (anterior/próximo). */

        .testimonial-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: var(--cor-borda-sutil);
            border: none;
            color: #fbfbfb;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            cursor: pointer;
            transition: var(--transition-fast);
        }

        .testimonial-nav:hover {
            background: var(--cor-laranja-destaque);
        }

        .testimonial-nav.prev {
            left: 15px;
        }

        .testimonial-nav.next {
            right: 15px;
        }

        /* Container dos pontos de navegação (dots). */

        .testimonial-dots {
            text-align: center;
            margin-top: 30px;
        }

        /* Estilo de cada ponto de navegação. */

        .dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--cor-borda-sutil);
            margin: 0 5px;
            cursor: pointer;
            transition: var(--transition-fast);
            border: none;
        }

        /* Estilo do ponto ativo ou em hover. */

        .dot.active,
        .dot:hover {
            background: var(--cor-laranja-destaque);
        }

        /* Barra lateral ao lado do slider. */

        .testimonial-sidebar .kudos-card {
            background: var(--cor-preto-card);
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 25px;
            border-left: 3px solid var(--cor-laranja-destaque);
        }

        .kudos-card ul {
            list-style: none;
        }

        .kudos-card li {
            margin-bottom: 10px;
        }

        .kudos-card i {
            margin-right: 10px;
            color: var(--cor-amarelo-neon);
        }

        .cta-text {
            font-weight: bold;
        }

        /* --- Seção FAQ --- */

        #faq {
            background-color: var(--cor-preto-secundario);
        }

        /* Layout em grid para a lista de perguntas e a barra lateral de insights. */

        .faq-layout {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 50px;
        }

        /* Cada item do FAQ (pergunta + resposta). */

        .faq-item {
            border-bottom: 2px solid var(--cor-borda-sutil);
        }

        /* Botão que contém a pergunta. */

        .faq-question {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: none;
            border: none;
            color: #fbfbfb;
            text-align: left;
            padding: 25px 0;
            font-family: var(--fonte-titulo);
            font-size: 1.2rem;
            cursor: pointer;
        }

        /* Ícone de '+' que gira. */

        .faq-question i {
            transition: transform var(--transition-fast);
        }

        /* Quando a pergunta está expandida, o ícone vira 'x'. */

        .faq-question[aria-expanded="true"] i {
            transform: rotate(45deg);
            color: var(--cor-laranja-destaque);
        }

        /* Container da resposta. */

        .faq-answer {
            padding: 0 0 25px 0;
        }

        /* Barra lateral de insights da seção FAQ. */

        .faq-insights .insight-card {
            background: var(--cor-preto-card);
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 25px;
        }



        /* --- Seção Patrocinadores --- */

        #patrocinadores {
            text-align: center;
        }

        /* Container para cada nível de patrocínio (ex: Diamante, Ouro). */

        .sponsor-tier {
            margin-bottom: 80px;
        }

        /* Grid para os logos dos patrocinadores. */

        .sponsor-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 50px;
        }

        /* Estilo dos logos. Inicialmente em tons de cinza. */

        .sponsor-logo {
            max-height: 60px; /* Tamanho base padrão */
            width: auto;      /* Mantém a proporção */
            max-width: 100%;
            filter: brightness(0) invert(1) grayscale(100%) opacity(0.7); /* Mais sutil */
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efeito elástico */
    }

        /* No hover, o logo fica colorido e aumenta de tamanho. */

        .sponsor-logo:hover {
            filter: none;
            transform: scale(1.15);
        }

        .sponsor-logo:hover {
            filter: none;
            transform: scale(1.1);
            opacity: 1;
        }

/* Tamanhos específicos por Categoria (Hierarquia Visual) */

/* Institucional (Unicamp) */
.sponsor-tier.institucional .sponsor-logo {
    max-height: 130px;
    opacity: 0.9;
}

/* Controle específico da logo da Unicamp */
.sponsor-tier.institucional .sponsor-logo.logo-unicamp {
    max-height: 80px; /* Aumente ou diminua este número conforme necessário */
}

/* Força o controle do logo da FEF direto pelo nome do arquivo de imagem */
img[src*="fef.png"] {
    max-height: 75px !important; /* Ajuste o valor se ainda achar grande ou pequeno */
    width: auto !important;
    display: inline-block !important;
}

/* Equilibra o peso visual do logo da VTech na categoria Bronze */
img[src*="VTECH.png"] {
    max-height: 45px !important; /* Diminui a altura padrão de 115px para metade */
    width: auto !important;
    display: inline-block !important;
}

/* GasAir: Geralmente é uma marca mais cheia/quadrada, reduzimos para não dominar a linha */
img[src*="GasAir.png"] {
    max-height: 35px !important;
    width: auto !important;
}

/* Circuibras: Se o logo deles tiver um formato mais vertical ou quadrado */
img[src*="circuibras.png"] {
    max-height: 85px !important;
    width: auto !important;
}

/* Stireflex: Ajuste caso ela tenha ficado pequena demais (aumente o valor) ou grande demais (diminua) */
img[src*="stireflex.png"] {
    max-height: 65px !important; 
    width: auto !important;
}

/* Mega Global: Se a proporção estiver muito esticada ou muito compacta */
img[src*="megaglobal.png"] {
    max-height: 55px !important;
    width: auto !important;
}

/* PLE: Costuma ser uma sigla mais compacta */
img[src*="ple.png"] {
    max-height: 70px !important;
    width: auto !important;
}

/* Master (O maior) */
.sponsor-tier.master .sponsor-logo {
    max-height: 200px; /* Bem maior */
    margin: 0 25px;
}

/* Platina */
.sponsor-tier.platina .sponsor-logo {
    max-height: 165px;
}

/* Ouro */
.sponsor-tier.ouro .sponsor-logo {
    max-height: 145px;
}

.sponsor-tier.ouro .sponsor-logo.logo-emus {
    max-height: 120px; /* Teste aumentar ou diminuir este valor */
}

/* HUBER+SUHNER: Como ela é muito horizontal (larga), 
   precisamos DIMINUIR a altura para ela não ficar gigante */
.sponsor-tier.ouro .sponsor-logo.logo-huber {
    max-height: 35px; /* Comece com 60px e aumente se necessário */
}

/* Prata */
.sponsor-tier.prata .sponsor-logo {
    max-height: 130px;
    margin: 10px 20px;
}

/* Bronze */
.sponsor-tier.bronze .sponsor-logo {
    max-height: 115px; /* Menor para caber mais e dar volume */
    margin: 5px 15px;
    opacity: 0.5;
}
.sponsor-tier.bronze .sponsor-logo:hover {
    opacity: 1;
}

/* --- DESTAQUE MASTER (Eldorado e Anexo) --- */
/* Classe especial para forçar destaque total na categoria Master */
.sponsor-logo.destaque-master {
    max-height: 200px !important; /* Mantém elas bem maiores que as outras */
    opacity: 1; /* Mantém opacidade total para destaque de presença */
}

.sponsor-logo.destaque-master:hover {
    transform: scale(1.8); /* Cresce um pouco mais que as outras */
    
    /* Aqui está o segredo: ao aplicar o drop-shadow, removemos automaticamente o grayscale */
    filter: drop-shadow(0 0 30px rgba(221, 102, 63, 0.6)); 
    
    /* Isso garante que a logo fique colorida E com brilho ao passar o mouse */
}



        /* --- Seção Recrutamento --- */

        /* Fundo com imagem e sobreposição escura. 'fixed' cria um efeito de paralaxe. */

        #recrutamento {
            text-align: center;
            background: linear-gradient(rgba(21, 21, 21, 0.9), rgba(21, 21, 21, 0.9)), url(images/recrutamento-bg.jpg) no-repeat center center/cover fixed;
        }



        /* --- Seção Contato --- */

        #contato {
            background-color: var(--cor-preto-secundario);
        }

        /* Grid para os cards de contato. */

        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            text-align: center;
        }

        /* Estilo de cada card de contato. */

        .contact-card {
            background: linear-gradient(var(--cor-preto-card), #151515);
            padding: 40px;
            border-radius: 15px;
            transition: all var(--transition-fast);
            border: 2px solid var(--cor-borda-sutil);
        }

        /* Efeito de elevação no card no hover. */

        .contact-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(21, 21, 21, 0.5);
            border-color: var(--cor-laranja-destaque);
        }


        /* =========================================
        RODAPÉ
        ========================================= */
        .footer {
            background-color: #151515;
            text-align: center;
            padding: 50px 20px;
            border-top: 4px solid var(--cor-laranja); /* CORRIGIDO */
            box-shadow: 0 -5px 30px rgba(208, 102, 61, 0.3);
        }

        .social-links a {
            color: var(--cor-branco-texto);
            font-size: 2rem;
            margin: 0 20px;
            display: inline-block;
            transition: all var(--transition-fast);
        }

        .social-links a:hover {
            color: var(--cor-laranja-destaque);
            transform: translateY(-8px) scale(1.2);
            text-shadow: var(--glow-shadow);
        }

        .footer p { margin-top: 30px; }

        /* --- Botão Voltar ao Topo --- */

        /* Estilo do botão fixo no canto inferior direito. */

        #back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: linear-gradient(135deg, var(--cor-laranja-destaque), var(--cor-laranja-neon));
            color: #fbfbfb;
            width: 55px;
            height: 55px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            font-size: 1.8rem;
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-fast);
            z-index: 999;
            border: 2px solid var(--cor-amarelo-neon);
        }

        /* Estilo do botão quando visível (controlado por JS). */

        #back-to-top.show {
            opacity: 1;
            visibility: visible;
        }

        /* Efeito de rotação no botão no hover. */

        #back-to-top:hover {
            transform: scale(1.15) rotate(360deg);
            box-shadow: var(--glow-shadow-intense);
        }



        /* --- Animações Genéricas --- */

        /* Animação para elementos aparecerem de baixo para cima. */

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }



        /* --- Media Queries (Responsividade) --- */

        /* Estilos para telas menores que 992px (tablets e desktops pequenos). */

        @media (max-width: 992px) {

            h1 {
                font-size: 4rem;
                letter-spacing: 4px;
            }

            h2 {
                font-size: 2.8rem;
            }

            /* Altera layouts de grid para uma única coluna. */

            .about-content,
            .car-entry,
            .car-entry:nth-child(even) {
                grid-template-columns: 1fr;
            }

            /* Reseta a ordem da imagem para entradas pares. */

            .car-entry:nth-child(even) .car-image {
                order: 0;
            }

            .values-grid {
                grid-template-columns: 1fr;
            }

            .metrics-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            /* Mantém 2 colunas se couber. */

            .metrics-insights {
                grid-template-columns: 1fr;
            }

            .immersive-layout {
                grid-template-columns: 1fr;
            }

            .testimonial-layout {
                grid-template-columns: 1fr;
            }

            .faq-layout {
                grid-template-columns: 1fr;
            }

        }

        /* Estilos para telas menores que 768px (celulares). */

        @media (max-width: 768px) {

            h1 {
                font-size: 3rem;
                letter-spacing: 2px;
            }

            h2 {
                font-size: 2.2rem;
            }

            section {
                padding: 80px 0;
            }

            /* Estilos para o menu de navegação móvel (hamburguer). */

            .nav-menu {
                position: fixed;
                left: -100%;
                top: 0;
                height: 100vh;
                gap: 0;
                flex-direction: column;
                background-color: rgba(21, 21, 21, 0.95);
                backdrop-filter: blur(15px);
                width: 100%;
                text-align: center;
                transition: 0.5s cubic-bezier(0.7, 0, 0.3, 1);
                z-index: 1001;
                justify-content: center;
            }

            /* Quando o menu está ativo, ele desliza para a tela. */

            .nav-menu.active {
                left: 0;
            }

            .nav-item {
                padding: 20px 0;
                width: 100%;
            }

            /* Mostra o ícone hamburguer. */

            .hamburger {
                display: block;
            }

            /* Animação do ícone hamburguer para se transformar em um 'X'. */

            .hamburger.active .bar:nth-child(2) {
                opacity: 0;
            }

            .hamburger.active .bar:nth-child(1) {
                transform: translateY(9px) rotate(45deg);
            }

            .hamburger.active .bar:nth-child(3) {
                transform: translateY(-9px) rotate(-45deg);
            }

            /* Ajustes na timeline para layout de coluna única. */

            .timeline::after {
                left: 30px;
            }

            .timeline-item {
                width: 100%;
                padding-left: 80px;
                padding-right: 15px;
            }

            .timeline-item::after {
                left: 15px;
            }

            .timeline-left,
            .timeline-right {
                left: 0;
                text-align: left;
            }

            /* Mais ajustes de layout de grid para uma única coluna. */

            .metrics-grid {
                grid-template-columns: 1fr;
            }

            .metrics-header {
                margin-bottom: 40px;
            }

            .immersive-controls {
                padding: 24px;
            }

            .immersive-tabs {
                grid-template-columns: 1fr;
            }

            .immersive-specs li {
                padding: 16px 18px;
            }

            .play-virtual-lab {
                bottom: 16px;
                right: 16px;
            }

            .testimonial-slider {
                padding: 30px 24px;
            }

            .testimonial-nav.prev {
                left: 6px;
            }

            .testimonial-nav.next {
                right: 6px;
            }

            .testimonial-quote {
                font-size: 1.05rem;
            }

            .faq-question {
                font-size: 0.9rem;
                padding: 18px 18px;
            }

            .faq-answer {
                padding: 0 18px 18px 18px;
            }

            .modal-content {
                padding: 30px;
            }

            /* --- CORREÇÃO CRÍTICA PARA MOBILE (Adicione no final do seu CSS) --- */

            @media (max-width: 768px) {

                /* 1. FORÇAR VISIBILIDADE:
                Isso garante que, se o JS da animação falhar ou demorar no celular,
                o conteúdo aparecerá mesmo assim. Ignora o efeito de fade-in no mobile
                para garantir a usabilidade. */
                [data-animation] {
                    opacity: 1 !important;
                    transform: none !important;
                    transition: none !important;
                }

                /* 2. AJUSTE DO GRID DE PATROCINADORES:
                No celular, 50px de gap é muito. Vamos reduzir. */
                .sponsor-grid {
                    gap: 25px;
                    padding: 0 10px; /* Margem de segurança lateral */
                }

                /* 3. REDIMENSIONAMENTO DOS LOGOS PARA CELULAR:
                Os tamanhos de desktop (200px, 160px) são muito grandes para telas verticais.
                Vamos reduzir proporcionalmente. */
                
                .sponsor-logo {
                    max-height: 50px !important; /* Tamanho base mobile seguro */
                }

                /* Ajustes específicos de hierarquia para mobile */
                .sponsor-tier.institucional .sponsor-logo {
                    max-height: 70px !important;
                }

                .sponsor-tier.master .sponsor-logo {
                    max-height: 160px !important; /* Master ainda ganha destaque */
                    margin: 0 !important;
                }

                .sponsor-logo.destaque-master {
                    max-height: 160px !important;
                }

                .sponsor-tier.platina .sponsor-logo {
                    max-height: 80px !important;
                }

                .sponsor-tier.ouro .sponsor-logo {
                    max-height: 70px !important;
                }

                .sponsor-tier.prata .sponsor-logo {
                    max-height: 65px !important;
                }

                .sponsor-tier.bronze .sponsor-logo {
                    max-height: 55px !important;
                }

                /* 4. CORREÇÃO DOS TÍTULOS DAS DIVISÕES (OURO, PRATA, ETC) */
                .sponsor-tier h3 {
                    font-size: 1.8rem; /* Um pouco menor */
                    margin-top: 30px;
                    margin-bottom: 20px;
                    display: block !important; /* Garante que não suma */
                    opacity: 1 !important; /* Garante visibilidade */
                }
                
                /* --- AJUSTES FINOS DE LOGOS (APENAS MOBILE) --- */
                @media (max-width: 768px) {
                
                    /* 1. Ajuste Institucional: Diminuir Unicamp, Aumentar FEM/FEEC */
                    .sponsor-tier.institucional .sponsor-logo {
                        max-height: 75px !important; /* Tamanho padrão para FEM e FEEC */
                    }
                    
                    .sponsor-tier.institucional .logo-unicamp {
                        max-height: 55px !important; /* Unicamp levemente menor para equilibrar */
                    }
                
                
                    /* 3. Corrigir Huber+Suhner (que é muito larga) */
                    /* Como ela é muito horizontal, precisamos reduzir drasticamente a altura */
                    .sponsor-tier.ouro .logo-huber {
                        max-height: 30px !important; 
                        width: auto !important;
                        margin: 0 10px !important;
                    }
                
                    /* 4. Aumentar Amperi (que está pequena) */
                    /* Como você não tem uma classe específica nela no HTML, 
                       vamos usar um seletor inteligente pelo nome do arquivo */
                    img[src*="AMPERI.png"] {
                        max-height: 90px !important; /* Força ela a ficar maior que as outras da categoria Ouro */
                        transform: scale(1.1); /* Um leve zoom adicional */
                    }
                
                    /* Ajuste geral para a categoria Ouro para não ficarem brigando por espaço */
                    .sponsor-tier.ouro .sponsor-grid {
                        gap: 20px !important; /* Menos espaço entre elas */
                        align-items: center !important; /* Centraliza verticalmente */
                    }

                }


            }
            

        }

/* --- ESTILOS DOS CRÉDITOS (RODAPÉ) --- */

.credits {
    margin-top: 15px;
    font-size: 0.85rem; /* Um pouco menor que o texto padrão para ficar sutil */
    color: var(--cor-cinza-texto); /* Usa a cor cinza do seu tema */
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* O Link dos Nomes */
.dev-link {
    color: var(--cor-cinza-texto); /* Começa cinza (oculto) */
    text-decoration: none;
    font-weight: 700; /* Negrito para destacar levemente */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding-bottom: 2px;
}

/* Efeito Hover (Quando passa o mouse) */
.dev-link:hover {
    color: var(--cor-laranja-destaque); /* Vira laranja */
    text-shadow: 0 0 10px rgba(221, 102, 63, 0.6); /* Brilho neon */
    cursor: pointer;
}

/* Sublinhado animado que aparece no hover */
.dev-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--cor-laranja-destaque);
    transition: width 0.3s ease;
}

.dev-link:hover::after {
    width: 100%;
}

/* Estilo do separador "| DevOps" */
.division-tag {
    font-size: 0.8rem;
    color: #666; /* Um cinza mais escuro para dar menos destaque que os nomes */
    margin-left: 5px;
    font-weight: 400;
}