/*
Theme Name: : Buzz Nexus Level
Author: Renato
Description: Tema customizado baseado em HTML estático.
Version:1.0
*/

/* Define a fonte Inter para todo o corpo do documento e cores base */
body {
    font-family: 'Inter', sans-serif;
    background-color: #1a202c; /* Fundo escuro para tema futurista */
    color: #e2e8f0; /* Texto claro */
    overflow-x: hidden; /* Evita rolagem horizontal indesejada */
    /* Imagem de fundo do logo 1PNJ.jpg */
    background-image: url('1PNJ.png'); /* Logo da empresa como background */
    background-size: cover; /* Cobre todo o fundo */
    background-attachment: fixed; /* Fixa a imagem ao rolar */
    position: relative; /* Para que o pseudo-elemento overlay funcione */
}

/* Overlay para escurecer a imagem de fundo e garantir legibilidade */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 32, 44, 0.8); /* Cor do fundo do body com transparência */
    backdrop-filter: blur(2px); /* Adiciona um leve desfoque para um efeito sutil */
    -webkit-backdrop-filter: blur(2px);
    z-index: -1; /* Garante que o overlay fique atrás do conteúdo */
}
/* Cores personalizadas baseadas na paleta do logo */
.bg-primary-blue { background-color: #1E3A8A; } /* Azul Escuro */
.text-primary-blue { color: #1E3A8A; }
.bg-primary-purple { background-color: #6B21A8; } /* Roxo Escuro */
.text-primary-purple { color: #6B21A8; }
.bg-primary-red { background-color: #DC2626; } /* Vermelho Escuro */
.text-primary-red { color: #DC2626; }
.bg-neutral-light { background-color: #2d3748; } /* Um cinza escuro para seções */
.text-neutral-dark { color: #cbd5e0; } /* Um cinza mais claro para texto */
.border-primary-blue { border-color: #1E3A8A; }
.border-primary-purple { border-color: #6B21A8; }
.border-primary-red { border-color: #DC2626; }

/* Gradientes futuristas */
.gradient-bg-1 {
    background: linear-gradient(135deg, #1E3A8A 0%, #6B21A8 100%);
}
.gradient-text {
    background: linear-gradient(45deg, #8b5cf6, #ec4899); /* Exemplo: Roxo para Rosa */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Animações e efeitos futuristas */
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-fade-in-scale {
    animation: fadeInScale 0.8s ease-out forwards;
}
.delay-200 { animation-delay: 0.2s; }
.delay-400 { animation-delay: 0.4s; }
.delay-600 { animation-delay: 0.6s; }

@keyframes glowing-border {
    0% { box-shadow: 0 0 5px rgba(107, 33, 168, 0.4); }
    50% { box-shadow: 0 0 20px rgba(107, 33, 168, 0.8); }
    100% { box-shadow: 0 0 5px rgba(107, 33, 168, 0.4); }
}
.glowing-border-purple:hover {
    animation: glowing-border 1.5s infinite alternate;
}
.glowing-border-blue:hover {
    animation: glowing-border-blue 1.5s infinite alternate;
}
@keyframes glowing-border-blue {
    0% { box-shadow: 0 0 5px rgba(30, 58, 138, 0.4); }
    50% { box-shadow: 0 0 20px rgba(30, 58, 138, 0.8); }
    100% { box-shadow: 0 0 5px rgba(30, 58, 138, 0.4); }
}

/* Frosted glass effect for header */
.header-frosted {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Enhanced button styles */
.btn-futuristic {
    position: relative;
    overflow: hidden;
    background-color: #DC2626; /* primary-red */
    transition: all 0.3s ease;
}
.btn-futuristic:hover {
    background-color: #EF4444; /* Brighter red */
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
}
.btn-futuristic::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: all 0.7s ease;
}
.btn-futuristic:hover::before {
    left: 100%;
}

/* Bordered variant for buttons */
.btn-futuristic-outline {
    background-color: transparent;
    border: 2px solid #6B21A8;
    color: #6B21A8;
    transition: all 0.3s ease;
}
.btn-futuristic-outline:hover {
    background-color: #6B21A8;
    color: #FFFFFF;
    box-shadow: 0 0 20px rgba(107, 33, 168, 0.6);
}

/* Card enhancement */
.card-futuristic {
    background-color: #2d3748; /* Fundo mais escuro para o cartão */
    border: 1px solid rgba(107, 33, 168, 0.3); /* Borda roxa sutil */
    transition: all 0.3s ease;
}
.card-futuristic:hover {
    border-color: rgba(107, 33, 168, 0.8);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

/* Estilo responsivo para imagens - Reduzido para 50% */
.responsive-img {
    max-width: 50%; /* Imagens terão no máximo 50% da largura de seus contêineres */
    height: auto;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Valores section alignment */
.valores-item {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center horizontally within the flex item */
    text-align: center; /* Center the description text */
}
.valores-item strong {
    display: flex; /* Allow icon and text to be on the same line */
    align-items: center; /* Vertically align icon with text */
    margin-bottom: 0.25rem; /* Small space between title and description */
    text-align: center; /* Ensure strong tag content is centered */
}
.valores-item p {
    text-align: center; /* Center the description text */
}

/* Mobile Menu Specific Styles */
/* Overlay */
.mobile-menu-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
    z-index: 40; /* Above header, below sidebar */
    transition: opacity 0.3s ease-out;
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Hidden by default */
}
.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Sidebar */
.mobile-menu-sidebar {
    width: 50%; /* Adjust as needed for mobile */
    max-width: 300px; /* Max width for larger mobiles/small tablets */
    background-color: #e2e8f0; /* Light background for sidebar */
    color: #1a202c; /* Dark text for contrast */
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    z-index: 50; /* Above overlay and header */
    transition: transform 0.3s ease-out;
}
.mobile-menu-sidebar.active {
    transform: translateX(0);
}