/* /Layout/MainLayout.razor.rz.scp.css */
[b-67ocrqtzi3] .glass-header {
    background-color: rgba(15, 17, 21, 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
/* /Pages/Home.razor.rz.scp.css */
.vh-80[b-bvg9srqi27] {
    min-height: 80vh;
}

.max-w-700[b-bvg9srqi27] {
    max-width: 700px;
}

/* Typography styles for technical look */
[b-bvg9srqi27] .tech-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    transition: all 0.2s ease-in-out;
    cursor: default;
}

[b-bvg9srqi27] .tech-chip:hover {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-surface) !important;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    border-color: transparent !important;
}

/* Premium Section Layout with Glowing Orbs */
[b-bvg9srqi27] section {
    padding: 6rem 0;
    width: 100%;
    position: relative;
}

/* Soft ambient glows behind sections */
[b-bvg9srqi27] section::before {
    content: '';
    position: absolute;
    width: 60vw;
    height: 60vw;
    max-width: 800px;
    max-height: 800px;
    border-radius: 50%;
    filter: blur(140px);
    z-index: 0;
    opacity: 0.12; /* Aumentado para mais destaque */
    pointer-events: none;
}

/* Zigue-Zague perfeito: Definindo os lados manualmente para não depender de contagem ímpar/par */

[b-bvg9srqi27] #sobre::before {
    top: 10%;
    right: -10%;
    background: var(--mud-palette-primary);
}

[b-bvg9srqi27] #skills::before {
    top: 10%;
    left: -10%;
    background: var(--mud-palette-info, #0ea5e9);
}

[b-bvg9srqi27] #projetos::before {
    top: 10%;
    right: -10%;
    background: var(--mud-palette-primary);
}

/* Adjust the Hero section for a centralized glow */
[b-bvg9srqi27] #hero {
    padding-top: 3rem;
    padding-bottom: 5rem;
}

[b-bvg9srqi27] #hero::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--mud-palette-primary);
    width: 80vw;
    height: 80vw;
    opacity: 0.18;
}

/* ===== LUZES RESPONSIVAS PARA OS PROJETOS ESTRATÉGICOS ===== */

/* NO DESKTOP (min-width: 960px): O jeito clássico (Agora com 3 focos de luz!) */
@media (min-width: 960px) {
    /* 1. Brilho do Topo (Direita) */
    [b-bvg9srqi27] #projetos::before {
        top: 5%;
        right: -10%;
        background: var(--mud-palette-primary);
    }

    /* 2. Brilho do Meio (Esquerda) - Usamos o container como âncora para ganhar um 3º elemento */
    [b-bvg9srqi27] #projetos .mud-container::before {
        content: '';
        position: absolute;
        width: 60vw;
        height: 60vw;
        max-width: 800px;
        max-height: 800px;
        border-radius: 50%;
        filter: blur(140px);
        z-index: -1;
        opacity: 0.12;
        pointer-events: none;
        top: 50%;
        left: -20vw;
        transform: translateY(-50%);
        background: var(--mud-palette-info, #0ea5e9);
    }

    /* 3. Brilho da Base (Direita) */
    [b-bvg9srqi27] #projetos::after {
        content: '';
        position: absolute;
        width: 60vw;
        height: 60vw;
        max-width: 800px;
        max-height: 800px;
        border-radius: 50%;
        filter: blur(140px);
        z-index: 0;
        opacity: 0.12;
        pointer-events: none;
        bottom: 5%;
        right: -10%;
        left: auto;
        background: var(--mud-palette-primary);
    }
    
    [b-bvg9srqi27] #projetos .mud-grid-item::before {
        display: none !important;
    }
}

/* NO MOBILE (max-width: 959px): O jeito novo (cada card emite sua própria luz para não ficar no escuro) */
@media (max-width: 959px) {
    [b-bvg9srqi27] #projetos::before, 
    [b-bvg9srqi27] #projetos::after,
    [b-bvg9srqi27] #projetos .mud-container::before {
        display: none !important; 
    }

    [b-bvg9srqi27] #projetos .mud-grid-item {
        position: relative;
    }

    /* Ímpares: Orbe na Direita (Azul Primário) */
    [b-bvg9srqi27] #projetos .mud-grid-item:nth-child(odd)::before {
        content: '';
        position: absolute;
        width: 120vw;
        height: 120vw;
        max-width: 600px;
        max-height: 600px;
        border-radius: 50%;
        filter: blur(80px);
        z-index: 0;
        opacity: 0.12;
        pointer-events: none;
        top: 50%;
        right: -30%;
        transform: translateY(-50%);
        background: var(--mud-palette-primary);
    }

    /* Pares: Orbe na Esquerda (Azul Claro) */
    [b-bvg9srqi27] #projetos .mud-grid-item:nth-child(even)::before {
        content: '';
        position: absolute;
        width: 120vw;
        height: 120vw;
        max-width: 600px;
        max-height: 600px;
        border-radius: 50%;
        filter: blur(80px);
        z-index: 0;
        opacity: 0.12;
        pointer-events: none;
        top: 50%;
        left: -30%;
        transform: translateY(-50%);
        background: var(--mud-palette-info, #0ea5e9);
    }

    /* Brilho extra no rodapé (Vamos Conversar) exclusivo para Mobile */
    [b-bvg9srqi27] #contato::after {
        content: '';
        position: absolute;
        width: 120vw;
        height: 120vw;
        max-width: 600px;
        max-height: 600px;
        border-radius: 50%;
        filter: blur(80px);
        z-index: 0;
        opacity: 0.12;
        pointer-events: none;
        bottom: -25%; /* Empurrado fortemente para baixo, pro limite da página */
        left: -30%;
        background: var(--mud-palette-info, #0ea5e9);
    }
}

[b-bvg9srqi27] #experiencia::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--mud-palette-primary);
}

[b-bvg9srqi27] #formacao::before {
    top: 10%;
    left: -10%;
    background: var(--mud-palette-info, #0ea5e9);
}

[b-bvg9srqi27] #contato::before {
    top: 10%;
    right: -10%;
    background: var(--mud-palette-primary);
}

/* Ensure content stays above the glows */
[b-bvg9srqi27] section > .mud-container {
    position: relative;
    z-index: 1;
}

[b-bvg9srqi27] .section-title {
    position: relative;
    display: inline-block;
}

[b-bvg9srqi27] .section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 4px;
    background-color: var(--mud-palette-primary);
    border-radius: 2px;
}