/* Variáveis de Cores */
:root {
    /* EDIÇÃO FINAL: Novo Azul Elétrico mais elegante e fundo preto absoluto para contraste */
    --primary-color: #00eaff; /* Azul Água/Ciano brilhante */
    --secondary-color: #0099cc; /* Azul escuro complementar */
    --dark-bg: #000000; /* Preto absoluto para contraste máximo */
    --light-text: #f0f0f0; 
    --futuristic-font: 'Orbitron', sans-serif; 
}

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

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--dark-bg);
    color: var(--light-text);
    line-height: 1.6;
    scroll-behavior: smooth;
    font-size: 16px; 
    padding-top: 0;

}

/* CORREÇÃO CHAVE: Define largura e esconde overflow-x no nível mais alto */
html, body {
    margin: 0;
    padding: 0;
    width: 100vw; /* Garante largura exata da viewport */
    overflow-x: hidden; /* APLICADO AQUI para máxima garantia contra quebra */
}
/* ------------------------------------------------ */
/* --- SEÇÕES BASE E TÍTULOS --- */
/* ------------------------------------------------ */

section {
    /* CORREÇÃO CRÍTICA: REMOÇÃO do min-height: 100vh do seletor genérico. */
    padding: 60px 5%;
    min-height: auto; /* Alterado de 100vh para auto */
    
    display: block;
    background-color: var(--dark-bg); 
}

.section-title {
    font-size: 2.8em; 
    margin-bottom: 40px;
    color: var(--primary-color);
    text-transform: uppercase;
    border-bottom: 3px solid var(--primary-color);
    padding-bottom: 10px;
    font-family: var(--futuristic-font);
    letter-spacing: 2px;
}

/* ------------------------------------------------ */
/* --- CABEÇALHO (FIXO CORRETO) --- */
/* ------------------------------------------------ */

header {
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); 
    
    /* CORREÇÃO 2: Position SEMPRE FIXED */
    position: fixed; 
    top: 0;
    left: 0;

    width: 100%;
    height: 70px; 
    color: var(--light-text);
    padding: 0; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
    z-index: 1000;
}

/* O SVG (Circuito Fixo) */
#circuit-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
    opacity: 0.4; 
    display: block;
}

/* Keyframe para animar o brilho (fluxo) */
@keyframes circuitFlow {
    to { stroke-dashoffset: 0; }
}

/* Aplica a animação no fluxo do circuito (quando JS adiciona classe) */
.circuit-flow-path {
    animation: circuitFlow 6s linear infinite; 
    stroke-linecap: round;
}

/* O wrapper do conteúdo fica por cima */
.header-content-wrapper {
    position: relative;
    z-index: 2; 
    width: 100%;
    padding: 0; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

/* Estilos para a IMAGEM do Logo (Aplicando o padding aqui) */
.logo-container {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 5%; 
}

.header-logo-img {
    height: 40px; 
    width: auto;
    filter: drop-shadow(0 0 8px var(--primary-color)) 
             drop-shadow(0 0 15px rgba(0, 187, 212, 0.8));
    transition: transform 0.3s;
}

.header-logo-img:hover {
    transform: scale(1.05);
}

/* ------------------------------------------------ */
/* --- NAVEGAÇÃO (MENU) --- */
/* ------------------------------------------------ */

/* EDIÇÃO: BOTÃO HAMBÚRGUER (Oculto no Desktop) */
.hamburger-menu {
    display: none; 
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1.8em;
    cursor: pointer;
    padding-right: 5%;
    z-index: 1001;
    filter: drop-shadow(0 0 5px var(--primary-color));
}

nav {
    padding-right: 5%; 
    position: static;
    margin-left: auto; 
    transition: transform 0.4s ease-in-out; 
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    position: relative; 
    overflow: hidden; 
    margin-left: 30px; 
}

/* Links: Base e Efeito Pixelizado/Futurista (Desktop) */
nav ul li a {
    text-decoration: none;
    color: var(--light-text);
    padding: 10px 0; 
    transition: color 0.3s, text-shadow 0.3s, letter-spacing 0.3s;
    font-weight: 400;
    text-transform: uppercase;
    display: block; 
    position: relative;
    z-index: 2; 
    
    font-family: var(--futuristic-font); 
    letter-spacing: 1px;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.4), 1px 1px 0 rgba(0, 0, 0, 0.5); 
}

nav ul li a:hover,
nav ul li a.active {
    color: var(--primary-color);
    letter-spacing: 3px; 
    /* EDIÇÃO: Sombra mais nítida e focada no hover */
    text-shadow: 
        0 0 5px var(--light-text), 
        0 0 15px var(--primary-color), 
        1px 1px 0 var(--secondary-color); 
}

nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -5px; 
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 3px;
    background: var(--primary-color);
    box-shadow: 0 0 8px var(--primary-color); 
    transition: width 0.3s ease-out;
}

nav ul li a:hover::after,
nav ul li a.active::after {
    width: 100%; 
}

/* ------------------------------------------------ */
/* --- SEÇÃO HERO (INÍCIO) --- */
/* ------------------------------------------------ */

.hero-content {
    position: relative;
    z-index: 2; 
    
    max-width: 95%; 
    padding: 20px; 
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza itens horizontalmente */
    justify-content: center; /* Tenta centralizar itens verticalmente */
}

.circuit-bg {
    background-image: url('./img/f7fabbc8-daf6-498c-b4aa-18b035df8b63.jfif'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.circuit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


.hero-content .small-h1 {
    font-size: 1.2em; 
    
    /* NOVO: Adiciona margem superior para descer 10px e centralizar verticalmente */
    margin-top: 5px; 
    
    /* NOVO: Reduz ainda mais a margem inferior para aproximar do logo */
    margin-bottom: -20px; 
    
    max-width: 700px; 
    width: 570px; 
    
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 187, 212, 0.8);
    font-family: var(--futuristic-font); 
    letter-spacing: 4px;
    text-align: center;
}

.hero-content p {
    font-size: 1.0em;
    
    /* NOVO: Adiciona margem inferior para dar mais respiro ao rodapé da seção */
    margin-bottom: 10px; /* Aumenta de 0px para 30px */
    margin-top: 0;
    
    max-width: 500px;
    text-align: center;
}

.clickable-image-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* NOVO: Reduz a margem superior para subir o logo e o texto abaixo dele */
    margin-top: 10px; /* Ajuste de 40px para 20px */
    
    height: auto;
    max-width: 250px;
    transition: transform 0.3s ease;
    position: relative; 
    z-index: 10; 
}

.clickable-image-link:hover {
    transform: scale(1.05); 
}

.logo-image {
    width: 150px; 
    height: auto;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 15px var(--primary-color)); 
}

.saiba-mais-text {
    color: var(--light-text);
    font-size: 1.1em;
    border-bottom: 2px solid var(--primary-color);
    
    /* CORREÇÃO: Remove o padding-top negativo e usa margem positiva para afastar sutilmente do logo */
    padding-top: 5px; 
    
    font-weight: bold;
    font-family: var(--futuristic-font); 
}

/* ===========================
    SEÇÃO SERVIÇOS — CORREÇÃO DE ALTURA E FUNDO
    =========================== */

#servicos {
    position: relative; /* Essencial para o position: absolute dos filhos */
    
    /* ALTURA MÁXIMA: Garante 100% da altura da tela */
    height: 100vh;
    min-height: 100vh; 
    
    padding: 0; /* Zera todo o padding */
    
    background-image: url('./img/Background_beneficios.jpeg'); 
    background-size: cover; /* Garante que preencha */
    background-position: center; 
    background-repeat: no-repeat; 
    
    margin-top: -25px; /* Mantém a correção manual de alinhamento */
}

.servico-posicionado {
    position: absolute;
    width: 250px; /* Largura padrão das caixas */
    background: rgba(15, 15, 15, 0.85); 
    border: 1px solid var(--primary-color);
    box-shadow: 0 0 15px var(--primary-color), inset 0 0 5px var(--secondary-color);
    padding: 15px; 
    border-radius: 8px;
    text-align: left; 
    transition: transform .3s ease, box-shadow .3s ease;
    z-index: 10;
}

.servico-posicionado:hover {
    transform: scale(1.05); 
    box-shadow: 0 0 35px var(--primary-color), inset 0 0 10px var(--secondary-color);
    background: rgba(25, 25, 25, 0.9);
}

.servico-posicionado h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--primary-color);
    text-shadow: 0 0 8px var(--primary-color);
    font-family: var(--futuristic-font);
    text-transform: uppercase;
}

.servico-posicionado p {
    font-size: 0.9rem;
    color: var(--light-text);
    line-height: 1.4;
    margin-top: 5px; 
}

.icon-service {
    float: right; 
    font-size: 2em; 
    color: var(--primary-color);
    margin-left: 10px;
    filter: drop-shadow(0 0 8px var(--primary-color));
}

/* -----------------------------------------------
   POSICIONAMENTO MANUAL DOS BOTÕES (IDÊNTICO À IMAGEM)
   ----------------------------------------------- */

/* REDES SOCIAIS (Canto Superior Esquerdo) */
.pos-1 {
    top: 10%; /* Ajuste para descer um pouco */
    left: 35%; /* Move mais para a esquerda */
    transform: translate(0, -10%); /* Ajusta alinhamento vertical */
}

/* E-MAIL PROFISSIONAL (Meio Esquerdo - Próximo ao primeiro pico da seta) */
.pos-2 {
    top: 70%; /* Ajuste para descer um pouco */
    right: 29%; /* Move mais para a esquerda */
    transform: translate(0, -10%); /* Ajusta alinhamento vertical */
}

/* RECEBIMENTOS PELO SITE (Canto Superior Direito) */
.pos-3 {
    top: 10%;
    left: 15%;
    transform: translate(0, -10%); /* Centraliza verticalmente */
}

/* DOMÍNIO PERSONALIZADO (Abaixo do E-mail, no vale da seta) */
.pos-5 {
    top: 35%; 
    left: 15%; 
    transform: translate(0, -10%);
}

/* SITE RESPONSIVO (Meio Direito - Próximo ao segundo pico da seta) */
.pos-4 {
    top: 40%; 
    right: 10%;
    transform: translate(0, -10%);
}

/* LOGO DCW na Seta (Canto Inferior Direito) */
.pos-6.logo-seta {
    position: absolute;
    width: 150px;
    height: auto;
    background: none; 
    border: none;
    box-shadow: none;
    padding: 0;
    bottom: 10%; /* Mantém perto do rodapé */
    right: 17%; /* Move para o canto */
    transform: none;
    text-align: center;
}
.logo-seta-img {
    width: 100px;
    filter: drop-shadow(0 0 10px var(--primary-color));
}

/* EDIÇÃO: BOTÃO HAMBÚRGUER (Aparece no mobile) */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1.8em;
    cursor: pointer;
    padding-right: 5%;
    z-index: 1001;
    filter: drop-shadow(0 0 5px var(--primary-color));
}

/* ------------------------------------------------ */
/* --- SEÇÃO DE ABORDAGEM (SOLUÇÕES) --- */
/* ------------------------------------------------ */

.approach-section {
    background-color: var(--dark-bg);
    min-height: auto;
}

.approach-grid {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.approach-card {
    flex: 1;
    background: var(--primary-color);
    color: var(--dark-bg);
    padding: 30px;
    border-radius: 8px;
    text-align: center;
}

.approach-card i {
    font-size: 3em;
    margin-bottom: 15px;
    color: var(--dark-bg);
}

.approach-card h3 {
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 1.5em;
    font-family: var(--futuristic-font); 
}

/* ------------------------------------------------ */
/* --- SEÇÃO DE CONTATO --- */
/* ------------------------------------------------ */

.contact-form {
    background-color: #111;
}

.contact-options-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza verticalmente o botão e o formulário */
    max-width: 500px;
    margin: 0 auto;
}

/* Separador "OU" */
.or-separator {
    font-family: var(--futuristic-font);
    font-size: 1.2em;
    color: var(--primary-color);
    margin: 30px 0;
    text-shadow: 0 0 5px var(--primary-color);
}

/* Base do Formulário de Email (ajuste de seletor) */
.contact-form form {
    /* Mantenha as regras existentes, mas use a nova classe: */
    /* .email-form */
    width: 100%;
    /* Remova as regras de largura máxima e margem, pois o wrapper já cuida: */
    /* max-width: 500px; */ 
    /* margin-top: 20px; */
}

/* Estilo para Botões de Opção (Base Neon) */
.btn-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    width: 100%;
    max-width: 480px; 
    text-decoration: none;
    font-weight: 700;
    font-family: var(--futuristic-font);
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 234, 255, 0.5); /* Sombra neon */
}

/* Estilo Específico para WhatsApp */
.whatsapp-btn {
    background-color: #25d366; /* Cor verde do WhatsApp */
    color: #000000;
    border: 2px solid #128c7e;
    font-size: 1.1em;
}

.whatsapp-btn i {
    font-size: 1.4em;
    margin-right: 15px;
}

.whatsapp-btn:hover {
    background-color: #128c7e;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 0 20px #25d366;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--secondary-color);
    border-radius: 8px;
}

.contact-form input,
.contact-form textarea {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid var(--secondary-color);
    background-color: #222;
    color: var(--light-text);
    border-radius: 5px;
    font-size: 1em;
}

.btn-primary {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--primary-color);
    color: var(--dark-bg);
    text-decoration: none;
    font-weight: 700;
    font-family: var(--futuristic-font); 
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: var(--secondary-color);
    color: var(--light-text);
    transform: translateY(-2px);
}

/* ------------------------------------------------ */
/* --- RODAPÉ --- */
/* ------------------------------------------------ */

footer {
    background-color: #000;
    padding: 20px 5%;
    border-top: 1px solid var(--secondary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--futuristic-font); 
}

.social-links a {
    color: var(--primary-color);
    font-size: 1.5em;
    margin-left: 15px;
    transition: color 0.3s;
}

.social-links a:hover {
    color: var(--light-text);
}

/* ------------------------------------------------ */
/* --- NOVA SEÇÃO: BOTÕES NEON (CTA - HOLOGRAM CIRCULAR) --- */
/* ------------------------------------------------ */

.neon-cta-section {
    padding: 80px 5%; 
    min-height: auto;
    background-color: var(--dark-bg);
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-direction: column; 
    text-align: center;
    position: relative; 
    overflow: hidden; 
    animation: none;
    
}

/* Fundo 3D ANIMADO - Efeito de Grade de Perspectiva */
.cta-depth-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 120%;
    z-index: 0; /* Fica no fundo */
    opacity: 0.7; /* Mantém o fundo escuro */
    
    /* CONFIGURAÇÃO 3D */
    transform-style: preserve-3d;
    transform: perspective(600px) rotateX(70deg) translateY(20px); 
    
    /* CRIAÇÃO DO GRID DE LINHAS NEON */
    background-image: 
        repeating-linear-gradient(0deg, var(--primary-color) 0 1px, transparent 1px 50px),
        repeating-linear-gradient(90deg, var(--primary-color) 0 1px, transparent 1px 50px);
    
    background-size: 50px 50px;
    background-position: center; /* Garante que o grid comece no centro da perspectiva */
    
    /* Brilho e Animação */
    filter: drop-shadow(0 0 5px var(--primary-color));
    animation: perspectiveGridMovement 60s linear infinite;
}

/* CONTAINER DESKTOP: Exibe 6 botões lado a lado */
.cta-container-desktop {
    display: flex;
    justify-content: center; /* Centraliza o cta-button-slot horizontalmente */
    align-items: flex-start;
    width: 100%;
    /* Mantenha a largura grande para não interferir no Grid */
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0; /* REMOVA TODO O PADDING AQUI PARA NÃO DESLOCAR */
}



/* Esconde o container visual central no desktop */
.cta-art-wrapper {
    display: none; 
}

/* NOVO WRAPPER DE NAVEGAÇÃO (ESCONDIDO NO DESKTOP) */
.cta-navigation-controls {
    display: none; 
    justify-content: center;
    gap: 50px; 
    width: 100%;
    margin-top: 30px; 
    z-index: 10;
}


/* O container dos botões no desktop: Se torna um elemento de layout */
 .cta-button-slot {
    position: static; 
    display: grid; 
    grid-template-columns: repeat(3, 280px); 
    gap: 30px; 
    margin: 0 auto; 
    width: 900px; 
    max-width: 900px; 
    padding: 0; 
    z-index: 10; 
}

@media (min-width: 901px) {

    /* 1. ANULAÇÃO DO VAZAMENTO MOBILE: Garante que os botões voltem ao fluxo Grid */
    .neon-button, 
    .hidden-cta-btn, 
    .active-cta-btn {
        /* CRÍTICO: Anula absolute/fixed e z-index do carrossel mobile */
        position: static !important; 
        opacity: 1 !important; 
        pointer-events: auto !important;
        transform: none !important;
        z-index: auto !important;
        
        /* Garante que o Grid desktop use a largura e altura fixas */
        width: 250px !important;
        height: 100px !important;
        border-radius: 8px !important;
        
        /* Remove o padding excessivo se o mobile for circular */
        padding: 1.5rem 1.0rem !important; 
    }

    /* 3. ESCONDER ELEMENTOS ESPECÍFICOS DO MOBILE */
    .cta-art-wrapper {
        display: none !important;
    }
    .cta-navigation-controls {
        display: none !important;
    }

    /* 4. AJUSTES GERAIS DE RESPONSIVIDADE */
    /* Exemplo: Seções do Hero/Nav que mudam de comportamento */
    .hero-content .small-h1 {
        font-size: 1.8em; /* Ajuste para o desktop */
        letter-spacing: 5px; 
    }
    /* Oculta o hambúrguer, se ainda estiver visível por alguma regra */
    .hamburger-menu {
        display: none !important;
    }

}

/* Base do Botão Neon (NOVO ESTILO HOLOGRAM - AJUSTADO PARA GRID) */
.neon-button {
    position: relative;
    border-radius: 30% !important;
    font-family: var(--futuristic-font);
    text-transform: uppercase;
    font-size: 1.0rem; 
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s ease;
    color: var(--primary-color);
    
    /* Tamanho fixo */
    width: 280px !important; 
    padding: 1.5rem 1.0rem; /* Aumenta o padding vertical para mais respiro interno */
    height: 280px; /* Define uma altura mínima para uniformizar */
    margin: 0 !important;
    
    clip-path: none; 
    border-radius: 8px; /* Cantos levemente arredondados */
    display: flex; /* Adicionado flexbox para centralizar o texto internamente */
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Estilo HOLOGRAM */
.hologram {
    /* NOVO: Borda dupla para efeito de profundidade */
    border: 2px solid var(--primary-color); 
    
    
    background: rgba(0, 234, 255, 0.05); /* Fundo mais sutil */
    
    /* NOVO: Sombra interna e externa mais focada */
    box-shadow: 
        0 0 10px rgba(0, 234, 255, 0.5), /* Sombra externa suave */
        inset 0 0 5px rgba(0, 234, 255, 0.3); /* Sombra interna para profundidade */
    
    backdrop-filter: blur(3px); /* Blur reduzido */
}

.hologram span {
    position: relative;
    display: inline-block;
    z-index: 2; 
}

/* Efeitos de Glitch (Before/After) */
.hologram span::before,
.hologram span::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    opacity: 0;
    filter: blur(1px);
    transition: all 0.3s ease;
}



.hologram span::after {
    bottom: -2px;
    color: var(--primary-color);
    transform: translateX(0);
    animation: glitch 2s infinite reverse;
}

/* Linha de Scan (Linha Brilhante que Desce) */
.scan-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(0, 234, 255, 0.8), 
        transparent
    );
    top: 0;
    animation: scan 2s linear infinite;
    filter: blur(1px);
    z-index: 1; 
}

.neon-button:hover {
    box-shadow: 0 0 30px var(--primary-color); 
    transform: translateY(-5px); 
}

/* CONTROLES DE NAVEGAÇÃO (Setas) */
.nav-arrow {
    display: none; /* Setas escondidas no desktop */
    background: none;
    border: none;
    font-size: 2.5em;
    color: var(--primary-color);
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
    filter: drop-shadow(0 0 8px var(--primary-color));
}

/* ------------------------------------------------ */
/* --- MEDIA QUERIES (RESPONSIVIDADE) --- */
/* ------------------------------------------------ */

/* -- TABLETS E CELULARES GRANDES (Max-width: 900px) -- */
 @media (max-width: 900px) {
    /* CORREÇÃO HAMBÚRGUER */
    header { overflow: visible; }
    .hamburger-menu { display: block; }
    
    /* REAJUSTE DE ALTURA DA SEÇÃO HERO NO MOBILE */
    .hero { height: auto; min-height: 100vh; padding: 0; }
    
    /* REAJUSTE DO CONTEÚDO HERO NO MOBILE */
    .hero-content {
        max-width: 95%; 
        padding: 50px 20px; /* Padding menor no mobile */
    }
    
    nav { /* Esconde menu para mobile */
        position: fixed; top: 0; left: 0; right: 0; width: 100vw; height: 100vh;
        background-color: var(--dark-bg); background-image: none !important; 
        z-index: 999; display: flex; justify-content: center; align-items: center;
        transform: translateX(100%); transition: transform 0.4s ease-in-out, visibility 0.4s;
        visibility: hidden; margin-left: 0; 
    }
    .nav-open nav { 
        visibility: visible; 
        transform: translateX(0); 
        top: 70px; 
        height: calc(100vh - 70px); 
    }
    .nav-open { overflow-y: hidden; }
    
    /* ESTILO MENU LINKS (Mobile) */
    nav ul { flex-direction: column; text-align: center; padding: 0; list-style: none; }
    nav ul li { margin: 35px 0; position: relative; }
    nav ul li a {
        font-size: 1.8em; letter-spacing: 5px; color: var(--primary-color); 
        text-shadow: 0 0 10px var(--light-text), 0 0 25px var(--primary-color), 0 0 40px var(--secondary-color); 
        padding-bottom: 0; 
    }

    /* SEÇÃO CTA (CARROSSEL MOBILE) - CENTRALIZAÇÃO E ESTILO */
    .neon-cta-section {
        min-height: calc(100vh - 70px); 
        padding-top: 0;
    }
    
    .cta-container-desktop {
        display: flex; 
        flex-direction: column; 
        width: 100%;
        max-width: 480px;
        margin: 0 auto; 
    }
    
    /* Exibe a Arte Central e Oculta o Grid Estático */
    .cta-art-wrapper {
        display: block !important; 
        width: 100%;
        position: relative;
        max-width: 400px; 
        margin: 0 auto; 
    }
    
    /* Container do Círculo (Fundo da Arte) */
    .cta-circle-container {
        width: 400px; 
        height: 400px;
        justify-content: center; 
        padding: 0 10px;
        margin: 0 auto; 
        display: flex; 
        align-items: center;
    }

   .cta-button-slot {
    position: static; 
    display: grid; 
    flex-wrap: wrap; 
    
    
    /* Centraliza os itens *dentro* do slot. */
    justify-content: center;
    grid-template-columns: repeat(3, 250px);
    gap: 30px; 
    
    /* Largura exata para 3 botões (810px) */
    width: 100%;
    max-width: 810px; 
    
    margin: 0 auto;
    height: auto;
    padding: 0;
    z-index: 10;
}
    
    .neon-button {
        /* CRUCIAL: Mantém a posição ABSOLUTA para sobreposição (modo carrossel) */
        position: relative; 
        left: 50%; 
        top: 50%; 
        transform: translate(-50%, -50%) !important; 
        
        /* NOVO TAMANHO DO BOTÃO CIRCULAR */
        width: 250px; 
        height: 100px;
        border-radius: 50%; 
        margin: 0;
        
        /* ESTILO HOLOGRAM RESTAURADO */
        font-size: 0.85em; 
        display: flex; 
        align-items: center; 
        justify-content: center;
        text-align: center;
        line-height: 1.2;
        white-space: normal;
        
        /* Aplica o estilo de vidro/glitch */
        background-color: rgba(0, 234, 255, 0.1) !important; 
    }
    
    /* Setas MOVIDAS ABAIXO DO CÍRCULO */
    .nav-arrow {
        display: block !important; 
        font-size: 2.5em;
        z-index: 15;
    }
    
    .cta-navigation-controls {
        display: flex !important; /* Exibe o wrapper de navegação abaixo */
    }
    
    /* Restante da responsividade (Serviços e Footer) */
    .servicos-grid { height: auto; background-image: none !important; padding: 20px 0; display: block; }
    .servico-box { position: static; width: 100%; min-width: auto; margin-bottom: 20px; text-align: left; }
    .logo-dcw-pos {
    position: static; 
    grid-column: 1 / -1; /* Ocupa todas as 3 colunas */
    text-align: center;
    margin-top: 50px;
    font-size: 1.5em; /* Reduz o tamanho para o fluxo */
}
    .logo-dcw-float { width: 150px; }
    .pos-1, .pos-2, .pos-3, .pos-4, .pos-5 { top: auto; left: auto; right: auto; bottom: auto; }
    .servico-box .icon-service-fa { float: right; margin-left: 15px; margin-right: 0; }
    .pos-2, .pos-4 { text-align: left; }
    .pos-2 .icon-service-fa, .pos-4 .icon-service-fa { float: right; margin-right: 0; margin-left: 15px; }
    .approach-grid { flex-direction: column; }
    footer { flex-direction: column; text-align: center; }
    footer p { margin-bottom: 10px; }
}


/* -- MOBILE PEQUENO (Max-width: 600px) -- */
@media (max-width: 600px) {
    .servico-box h3 { font-size: 1.2rem; }
    .servico-box p { font-size: 0.9rem; }
    .hero-content .small-h1 { font-size: 1.2em; letter-spacing: 3px; }
    .logo-image { width: 200px; }
    
    .cta-circle-container { width: 300px; height: 300px; }
    .neon-button { width: 120px; height: 120px; font-size: 0.9em; }
}


/* Pequena melhoria para paths animados (quando JS adiciona stroke-dasharray) */
.circuit-flow-path {
    stroke-width: 2;
    stroke-linecap: round;
}

/* ------------------------------------------------ */
/* --- ANIMAÇÕES HOLOGRAMA E PROFUNDIDADE --- */
/* ------------------------------------------------ */

@keyframes glitch {
    0%, 100% { transform: translateX(0); opacity: 0.3; }
    20% { transform: translateX(-5px); opacity: 0.5; }
    40% { transform: translateX(5px); opacity: 0.7; }
    60% { transform: translateX(-3px); opacity: 0.5; }
    80% { transform: translateX(3px); opacity: 0.3; }
}

@keyframes scan {
    0% { top: -10%; }
    100% { top: 110%; }
}

@keyframes pulseBorder {
    0% {
        box-shadow: 0 0 15px var(--primary-color);
        transform: scale(1);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 40px var(--primary-color), 0 0 50px var(--secondary-color);
        transform: scale(1.01);
        opacity: 0.95;
    }
    100% {
        box-shadow: 0 0 15px var(--primary-color);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomTunnel {
    0% {
        transform: scale(1.0);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.15); /* Zoom sutil para dar a sensação de entrada */
        opacity: 0.8;
    }
    100% {
        transform: scale(1.0);
        opacity: 0.7;
    }
}

/* Nova Animação para o Fundo de Perspectiva */
@keyframes perspectiveGridMovement {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; } /* Simula movimento lento lateral/diagonal */
}

.cta-art-center {
    position: absolute;
    width: 50px; 
    height: 50px;
    background: radial-gradient(circle, #fff 0%, var(--primary-color) 30%, transparent 60%);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--primary-color), 0 0 40px rgba(0, 234, 255, 0.7);
    animation: pulseGlow 3s ease-in-out infinite alternate;
    z-index: 10;
}

@keyframes pulseGlow {
    0% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 20px var(--primary-color); }
    100% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 50px var(--primary-color), 0 0 80px rgba(0, 234, 255, 0.9); }
}

/* ------------------------------------------------ */
/* --- HEADER QUANDO ULTRAPASSAR 75% DO SCROLL --- */
/* ------------------------------------------------ */

.header-scrolled {
    opacity: 0.55;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity 0.4s ease, backdrop-filter 0.3s ease;
    z-index: 1000;
}