/* Hero Gamer Style - Rede Virtual Net (Version 4.1 - Enhanced Visibility) */
.hero-gamer-section {
    position: relative;
    background-color: #050b14;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(0, 255, 234, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, #050b14 0%, #08101b 100%);
    overflow: hidden;
    padding: 40px 0;
    min-height: 600px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #1a2634;
}

/* ESTILO EXTRA PARA AS BARRAS DINÂMICAS (Moved from inline) */
.gamer-features {
    --bar-color: #ff4d1d;
    /* Cor inicial: Laranja */
}

/* FORÇAR VISIBILIDADE DAS BARRAS */
.feature-item:not(:last-child)::after {
    background-color: var(--bar-color) !important;
    /* Fallback */
    /* Note: JS Logic or dynamic class might be needed to change this var properly if it was intended to change with selection. 
       However, the inline style in HTML only defined it statically. 
       The JS updates .style directly for some elements but not this pseudo-element var. 
       We will keep the static definition here as it was in HTML. */
}

/* --- FORCE DARK MODE TEXT (Override Light Theme) --- */
.hero-gamer-section,
.hero-gamer-section h1,
.hero-gamer-section h2,
.hero-gamer-section h3,
.hero-gamer-section p,
.hero-gamer-section span,
.hero-gamer-section div,
.hero-gamer-section strong {
    color: #ffffff !important;
}

.hero-gamer-content {
    position: relative;
    z-index: 2;
}

/* --- PARCEIRO --- */
.partner-logo-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.exitlag-svg {
    height: 24px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 0 rgba(189, 3, 3, 0));
    animation: logoPulse 3s infinite ease-in-out;
}

@keyframes logoPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 0 rgba(189, 3, 3, 0));
    }

    50% {
        filter: drop-shadow(0 0 5px rgba(189, 3, 3, 0.5));
    }
}

.gamer-eyebrow {
    color: #00ffea !important;
    /* Keep accent color */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
}

/* --- TÍTULO --- */
.gamer-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: #fff !important;
    margin-bottom: 15px;
}

.gamer-title span {
    color: transparent !important;
    -webkit-text-stroke: 1px #fff;
    display: block;
}

/* --- SELETOR: LOADOUT TECH STYLE --- */
.loadout-wrapper {
    margin-bottom: 20px;
    max-width: 420px;
}

.loadout-buttons {
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
    position: relative;
    z-index: 2;
}

.tech-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #8faab9 !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 10px 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.tech-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff !important;
}

.tech-btn.active {
    background: rgba(255, 77, 29, 0.15);
    border-color: #ff4d1d;
    color: #fff !important;
    text-shadow: 0 0 8px rgba(255, 77, 29, 0.8);
}

.loadout-bar-container {
    width: 100%;
    height: 4px;
    background: #1a2634;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.loadout-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff4d1d, #ff8e1d);
    width: 100%;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 10px #ff4d1d;
}

/* MARCADORES DE NÍVEL - CENTRALIZADOS */
.loadout-markers {
    display: flex;
    gap: 5px;
    margin-top: 4px;
    width: 100%;
}

.marker {
    flex: 1;
    text-align: center;
    font-size: 0.65rem;
    color: #4a5b6d !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    opacity: 0.8;
}

/* --- FEATURES (COM BARRINHAS FORTES) --- */
.gamer-features {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 0;
}

.feature-item {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0 30px;
    /* Mais espaço */
}

.feature-item:first-child {
    padding-left: 0;
}

.feature-item:last-child {
    padding-right: 0;
}

/* A BARRINHA VERTICAL REFORÇADA */
.feature-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 5%;
    height: 90%;
    width: 3px;
    /* Mais grossa */
    background-color: #ff4d1d;
    /* Laranja */
    opacity: 1;
    /* Sólida */
    transform: skewX(-15deg);
    box-shadow: 0 0 8px rgba(255, 77, 29, 0.6);
    /* Glow */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.feature-item strong {
    color: #fff !important;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.feature-item span {
    color: #8faab9 !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-top: 4px;
}

/* --- PREÇO + CTA --- */
.price-cta-container {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.gamer-price-display {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.currency-symbol {
    font-size: 1.5rem;
    color: #8faab9 !important;
    font-weight: 600;
    transform: translateY(-10px);
}

.price-value {
    font-size: 4rem;
    font-weight: 900;
    color: #fff !important;
    line-height: 0.8;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
    font-style: italic;
    transition: color 0.3s ease;
}

.price-cents {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    color: #8faab9 !important;
    font-weight: 600;
    line-height: 1;
}

.btn-shine-cta {
    position: relative;
    padding: 15px 35px;
    background: #ff4d1d;
    color: #fff !important;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.1rem;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(255, 77, 29, 0.25);
    overflow: hidden;
}

.btn-shine-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 77, 29, 0.4);
    color: #fff !important;
}

.btn-shine-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shine-pass 4s infinite;
}

@keyframes shine-pass {
    0% {
        left: -100%;
    }

    20% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

/* --- PERSONAGEM --- */
.gamer-hero-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    margin-top: 20px;
}

.gamer-hero-img {
    max-width: 100%;
    height: auto;
    max-height: 550px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
    animation: floatHero 6s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

@keyframes floatHero {

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

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

/* PARTICULAS */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00ffea;
    border-radius: 50%;
    bottom: 50px;
    opacity: 0;
    animation: particleRise 4s infinite ease-in;
    z-index: 2;
    box-shadow: 0 0 10px #00ffea;
}

.particle:nth-child(1) {
    left: 20%;
    animation-delay: 0s;
    animation-duration: 5s;
    background: #ff4d1d;
    box-shadow: 0 0 10px #ff4d1d;
}

.particle:nth-child(2) {
    left: 40%;
    animation-delay: 1s;
    animation-duration: 4s;
}

.particle:nth-child(3) {
    left: 60%;
    animation-delay: 2s;
    animation-duration: 6s;
    background: #ff4d1d;
    box-shadow: 0 0 10px #ff4d1d;
}

.particle:nth-child(4) {
    left: 80%;
    animation-delay: 3s;
    animation-duration: 4.5s;
}

.particle:nth-child(5) {
    left: 30%;
    animation-delay: 1.5s;
    animation-duration: 5.5s;
}

@keyframes particleRise {
    0% {
        bottom: 50px;
        opacity: 0;
        transform: scale(0);
    }

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

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

    100% {
        bottom: 400px;
        opacity: 0;
        transform: scale(0);
    }
}

/* Responsive */
@media (max-width: 991px) {
    .hero-gamer-section {
        flex-direction: column;
        /* Explicitly stack content */
        text-align: center;
        padding-top: 30px;
        height: auto;
        min-height: auto;
    }

    .loadout-wrapper {
        margin: 0 auto 20px auto;
    }

    .partner-logo-container,
    .gamer-features,
    .price-cta-container {
        justify-content: center;
    }

    .gamer-hero-img {
        max-width: 70%;
        margin-top: 30px;
    }

    .price-value {
        font-size: 3.5rem;
    }
}