/* Importando fontes com pegada anos 80 */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Press+Start+2P&family=Rajdhani:wght@500;700&display=swap');

/* Reset e configurações básicas */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --neon-blue: #e2158d;
    --neon-orange: #ff5e00;
    --neon-pink: #13d172;
    --bg-dark: #0d0214;
    --bg-card: #140526;
}

body {
    font-family: 'Rajdhani', sans-serif;
    color: #ffffffe5;
    line-height: 1.6;
    overflow-x: hidden;
    margin: 0;
    padding: 0;

    /* FUNDO ESCURO PROFUNDO PARA DAR CONTRASTE */
    background-color: #8f0724;
    
    /* DUAS GRANDES BOLAS RADIAIS (UMA EM CADA LADO) + MALHA QUADRICULADA */
    background-image: 
        /* Esfera 1: Azul Escuro Neon Vibrante (Esquerda) */
        radial-gradient(circle, rgba(0, 70, 255, 0.8) 0%, rgba(0, 15, 70, 0.4) 30%, transparent 70%),
        /* Esfera 2: Laranja Neon Super Forte (Direita) */
        radial-gradient(circle, rgba(255, 60, 0, 0.75) 0%, rgba(120, 25, 0, 0.35) 35%, transparent 70%),
        /* Malha Quadriculada - Branco Neon Opaco e Fixo */
        linear-gradient(rgba(255, 255, 255, 0.041) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(233, 224, 224, 0.027) 1.5px, transparent 1.5px);
    
    /* Configura o tamanho para 200% para permitir o deslocamento suave sem cortar as esferas */
    background-size: 200% 200%, 200% 200%, 50px 50px, 50px 50px;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    background-attachment: fixed;

    /* Animação lenta de 25 segundos para manter a fluidez total */
    animation: neonOrbsOrbit 10s ease-in-out infinite alternate;
}

/* Container padrão */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   HEADER COM DESIGN IMERSIVO E ANIMADO (ESTILO SYNTHWAVE / CYBERPUNK)
   ========================================================================== */
.event-header {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    z-index: 1;
    border-bottom: 4px solid var(--neon-blue);
    box-shadow: 0 0 30px var(--neon-blue);
    
    /* FUNDO IMERSIVO: Um degradê profundo que simula o céu tecnológico dos anos 80 */
    background: linear-gradient(180deg, #05010d 0%, #170326 40%, #3a0647 80%, #ff5e00 100%);
    background-size: 100% 200%;
    animation: auroraBackground 12s ease infinite alternate;
}

/* Criando um Sol Retro em linhas por trás do seu PNG */
.event-header::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    height: 380px;
    background: linear-gradient(to bottom, #ff007f 0%, #ffaa00 100%);
    border-radius: 50%;
    z-index: 1;
    opacity: 0.85;
    box-shadow: 0 0 50px rgba(255, 0, 127, 0.6);
    
    /* Efeito de linhas cortadas do sol clássico do Synthwave */
    mask-image: linear-gradient(to bottom, 
        black 0%, black 60%, 
        transparent 60%, transparent 63%, 
        black 63%, black 72%, 
        transparent 72%, transparent 76%, 
        black 76%, black 84%, 
        transparent 84%, transparent 89%, 
        black 89%, black 95%, 
        transparent 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, 
        black 0%, black 60%, 
        transparent 60%, transparent 63%, 
        black 63%, black 72%, 
        transparent 72%, transparent 76%, 
        black 76%, black 84%, 
        transparent 84%, transparent 89%, 
        black 89%, black 95%, 
        transparent 95%, transparent 100%);
}

/* Brilho de névoa neon para dar profundidade atrás do seu PNG */
.event-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to top, rgba(231, 10, 28, 0.568), transparent);
    z-index: 2;
    pointer-events: none;
}

/* Configuração da imagem PNG que você vai colocar na frente */
.banner-img {
    position: absolute;
    bottom: 10px; /* Deixa levemente acima da borda inferior */
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 90%; /* Ocupa a maior parte da altura do header, sem cortar */
    object-fit: contain; /* Garante que o PNG não seja cortado nem distorcido */
    z-index: 3; /* Fica na frente do Sol e do fundo */
    filter: drop-shadow(0 0 15px rgb(0, 0, 0)); /* Dá um contorno iluminado lindo no seu PNG */
    transition: transform 0.3s ease;
}

/* Efeito interativo: Quando passar o mouse no topo, o PNG se destaca sutilmente */
.event-header:hover .banner-img {
    transform: translateX(-50%) scale(1.03);
}

/* Animação para fazer o fundo pulsar cores suavemente */
@keyframes auroraBackground {
    0% { background-position: 50% 0%; }
    100% { background-position: 50% 100%; }
}

.event-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.event-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 2, 20, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Títulos principais em estilo Synthwave */
.event-logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 5rem;
    font-weight: 900;
    color: #ffffff;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue), 0 0 40px var(--neon-blue);
    font-style: italic;
}

.event-location,
.event-dates {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 5px 0;
    text-align: center;
    text-shadow: 0 0 8px var(--neon-orange), 0 0 15px var(--neon-orange);
}

/* Navegação Retro */
.main-nav {
    background: rgba(13, 2, 20, 0.95);
    border-bottom: 2px solid var(--neon-orange);
    box-shadow: 0 5px 15px rgba(255, 94, 0, 0.3);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.nav-list {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.nav-list li {
    margin: 0 20px;
}

.nav-list a {
    font-family: 'Orbitron', sans-serif;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    padding: 20px 0;
    display: block;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.nav-list a:hover,
.nav-list a.active {
    color: var(--neon-blue);
    text-shadow: 0 0 10px var(--neon-blue);
    border-bottom-color: var(--neon-blue);
}

/* Seções */
section {
    padding: 80px 0;
    position: relative;
}

section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--neon-orange), transparent);
}

.section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 20px;
    color: #ffffff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 10px var(--neon-orange), 0 0 20px var(--neon-orange);
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 50px;
    color: #b2a4cf;
    letter-spacing: 1px;
}

/* Seção de Convidados */
.main-poster-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 40px auto;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.4);
    border: 3px solid var(--neon-blue);
}

.main-poster-img {
    width: 100%;
    height: auto;
    display: block;
}

.cta-phrase-top {
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: #ffffff;
    text-shadow: 0 0 8px var(--neon-pink);
}

.guests-grid-duo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 50px;
}

.card-alongado {
    max-width: 350px;
    margin: 0 auto;
    border: 3px solid var(--neon-blue);
    background: var(--bg-card);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
}

.card-alongado:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--neon-pink);
    box-shadow: 0 0 25px rgba(255, 0, 127, 0.6);
}

.guest-photo-container {
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-bottom: 2px solid var(--neon-blue);
}

.guest-img-alongada {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.guest-info {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}

.guest-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.6rem;
    margin-bottom: 8px;
    color: #ffffff;
    text-shadow: 0 0 5px var(--neon-blue);
}

.guest-description {
    color: #cbbad9;
    margin-bottom: 15px;
    font-size: 15px;
}

/* Botões Estilo Arcade/Neon */
.ticket-btn {
    display: block;
    background: transparent;
    color: #fff;
    text-decoration: none;
    padding: 15px;
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    border-radius: 4px;
    margin-top: 15px;
    transition: all 0.3s ease;
    border: 2px solid var(--neon-orange);
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: inset 0 0 10px rgba(255, 94, 0, 0.2), 0 0 10px rgba(255, 94, 0, 0.2);
}

.ticket-btn:hover {
    background: var(--neon-orange);
    color: #000;
    box-shadow: 0 0 20px var(--neon-orange);
    font-weight: 900;
}

/* Seção Cosplay */
.cosplay-days {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.day-card {
    background: var(--bg-card);
    border-radius: 4px;
    padding: 30px;
    text-align: center;
    border: 3px solid var(--neon-orange);
    box-shadow: 0 0 15px rgba(255, 94, 0, 0.2);
    transition: all 0.3s ease;
}

.day-card:hover {
    border-color: var(--neon-blue);
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.5);
}

.day-number {
    font-family: 'Orbitron', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    color: #ffffff;
    display: block;
    line-height: 1;
    text-shadow: 0 0 10px var(--neon-orange), 0 0 20px var(--neon-orange);
}

.day-name {
    font-family: 'Orbitron', sans-serif;
    color: var(--neon-blue);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 20px;
    display: block;
    letter-spacing: 2px;
}

.day-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.day-description {
    color: #cbbad9;
    margin-bottom: 25px;
    font-size: 15px;
}

.register-btn {
    background: transparent;
    border: 2px solid var(--neon-blue);
    color: #ffffff;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 4px;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    display: inline-block;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: inset 0 0 10px rgba(0, 240, 255, 0.2), 0 0 10px rgba(0, 240, 255, 0.2);
}

.register-btn:hover {
    background: var(--neon-blue);
    color: #000;
    box-shadow: 0 0 25px var(--neon-blue);
}

/* Atividades (Grade de Fotos) */
.atividades-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 40px;
}

.atividade-card {
    background: var(--bg-card);
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    border: 2px solid var(--neon-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
    transition: all 0.3s ease;
}

.atividade-card:hover {
    transform: scale(1.05);
    border-color: var(--neon-orange);
    box-shadow: 0 0 20px var(--neon-orange);
}

.expandable-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/* Seção VIP Radicall dos Anos 80 */
.vip-section {
    padding: 60px 0;
}

.vip-card {
    max-width: 800px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 3px solid var(--neon-pink);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(255, 0, 127, 0.3);
    transition: all 0.3s ease;
}

.vip-card:hover {
    box-shadow: 0 0 35px rgba(255, 0, 127, 0.6);
}

.vip-photo-container {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    border-bottom: 2px solid var(--neon-pink);
}

.vip-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vip-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--neon-pink);
    color: #fff;
    padding: 5px 15px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    border-radius: 2px;
    font-size: 0.8rem;
    box-shadow: 0 0 10px var(--neon-pink);
}

.vip-info {
    padding: 40px;
    text-align: center;
}

.vip-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.8rem;
    color: #ffffff;
    margin-bottom: 15px;
    letter-spacing: 3px;
    text-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink);
}

.vip-description {
    color: #cbbad9;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.cta-phrase-vip {
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    color: var(--neon-blue);
    text-shadow: 0 0 5px var(--neon-blue);
    margin-bottom: 25px;
}

.vip-btn {
    display: inline-block;
    background: transparent;
    border: 2px solid var(--neon-pink);
    color: #fff;
    text-decoration: none;
    padding: 20px 60px;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 15px rgba(255, 0, 127, 0.2), 0 0 15px rgba(255, 0, 127, 0.2);
    letter-spacing: 2px;
}

.vip-btn:hover {
    background: var(--neon-pink);
    color: #fff;
    box-shadow: 0 0 30px var(--neon-pink);
}

/* Seção de Contatos / Redes Sociais */
.contato-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 600px;
    margin: 0 auto;
}

.contato-box h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #ffffff;
    text-shadow: 0 0 5px var(--neon-blue);
}

.email-link {
    display: block;
    color: #cbbad9;
    text-decoration: none;
    font-size: 1.1rem;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.email-link:hover {
    color: var(--neon-orange);
    text-shadow: 0 0 8px var(--neon-orange);
}

.social-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.social-btn {
    padding: 12px 25px;
    border-radius: 4px;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
    background: transparent;
    border: 2px solid #fff;
}

.social-btn:hover {
    transform: translateY(-3px);
}

.btn-insta {
    border-color: var(--neon-pink);
    box-shadow: inset 0 0 8px rgba(255, 0, 127, 0.3), 0 0 8px rgba(255, 0, 127, 0.3);
}
.btn-insta:hover {
    background: var(--neon-pink);
    box-shadow: 0 0 20px var(--neon-pink);
}

.btn-tiktok {
    border-color: var(--neon-blue);
    box-shadow: inset 0 0 8px rgba(0, 240, 255, 0.3), 0 0 8px rgba(0, 240, 255, 0.3);
}
.btn-tiktok:hover {
    background: var(--neon-blue);
    color: #000;
    box-shadow: 0 0 20px var(--neon-blue);
}

.btn-youtube {
    border-color: #ff0000;
    box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.3), 0 0 8px rgba(255, 0, 0, 0.3);
}
.btn-youtube:hover {
    background: #ff0000;
    box-shadow: 0 0 20px #ff0000;
}

/* Modais de imagem */
.modal {
    display: none; 
    position: fixed;
    z-index: 1000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 2, 20, 0.95);
    cursor: zoom-out;
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 85vh;
    border: 3px solid var(--neon-blue);
    box-shadow: 0 0 30px var(--neon-blue);
    animation: zoomIn 0.3s;
}

@keyframes zoomIn {
    from {transform: scale(0.7); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 35px;
    color: var(--neon-pink);
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Footer */
.footer {
    background: #06010a;
    padding: 30px 0;
    text-align: center;
    border-top: 2px solid var(--neon-blue);
    box-shadow: 0 -5px 15px rgba(0, 240, 255, 0.2);
}

.footer p {
    color: #7d6b94;
    font-size: 14px;
    font-family: 'Orbitron', sans-serif;
}

/* Menu Mobile Hamburguer Estilizado */
.menu-mobile-btn {
    display: none;
}

/* Responsividade Mobile */
@media (max-width: 768px) {
    /* Ajuste do container da Capa */
    .event-header {
        height: auto;
        min-height: 200px;
        aspect-ratio: 16 / 9;
    }

    .event-image-container {
        position: relative;
    }

    .banner-img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    .event-overlay {
        position: absolute;
        background: rgba(13, 2, 20, 0.55);
    }

    .event-logo {
        font-size: 2rem !important;
        margin-bottom: 5px;
        text-shadow: 2px 2px 10px rgba(0,0,0,1), 0 0 15px var(--neon-blue);
    }

    .event-location, .event-dates {
        font-size: 0.9rem;
        text-shadow: 1px 1px 8px rgba(0,0,0,1), 0 0 8px var(--neon-orange);
    }

    /* Menu Hamburguer */
    .menu-mobile-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1001;
        cursor: pointer;
    }

    .menu-mobile-btn span {
        width: 100%;
        height: 3px;
        background: var(--neon-blue);
        box-shadow: 0 0 5px var(--neon-blue);
        border-radius: 10px;
        transition: 0.3s;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background: rgba(13, 2, 20, 0.98);
        border-left: 3px solid var(--neon-orange);
        transition: 0.4s;
        z-index: 1000;
        padding-top: 80px;
    }

    .main-nav.active {
        right: 0;
    }

    .nav-list {
        flex-direction: column;
        align-items: center;
    }

    .nav-list li {
        margin: 20px 0;
    }

    .guests-grid-duo {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .card-alongado {
        max-width: 100%;
    }

    .guest-photo-container {
        height: 350px;
    }

    .atividades-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .vip-photo-container { height: 250px; }
    .vip-title { font-size: 1.8rem; }
    .vip-btn { width: 100%; padding: 15px; font-size: 1.1rem; }

    .social-buttons {
        flex-direction: column;
        align-items: center;
    }

    .social-btn {
        width: 100%;
        max-width: 250px;
    }
}

@media (max-width: 480px) {
    .section-title { font-size: 1.8rem; }
}

html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   ANIMAÇÃO RETRO CYBERPUNK - ÓRBITA SUAVE DAS DUAS ESFERAS NEON
   ========================================================================== */
@keyframes neonOrbsOrbit {
    0% {
        /* Posições iniciais: Azul na esquerda-topo / Laranja na direita-base */
        background-position: 
            -20% -10%,  /* Orb Azul */
            120% 110%,  /* Orb Laranja */
            0 0, 0 0;   /* Grade mantém-se fixa */
    }
    50% {
        /* Elas deslizam suavemente em direção ao centro e alteram ligeiramente o eixo */
        background-position: 
            10% 40%,    /* Orb Azul move-se um pouco para o centro/baixo */
            90% 60%,    /* Orb Laranja move-se um pouco para o centro/topo */
            0 0, 0 0;
    }
    100% {
        /* Posição final do ciclo de flutuação antes de retornar */
        background-position: 
            -5% 70%,    /* Orb Azul desce pela lateral esquerda */
            105% 20%,   /* Orb Laranja sobe pela lateral direita */
            0 0, 0 0;
    }
}

/* ==========================================================================
   TÚNEL DE METEOROS NEON (BACKGROUND STARFIELD)
   ========================================================================== */
.meteoros-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Fica estritamente atrás do conteúdo do site[cite: 1, 3] */
    pointer-events: none; /* Não bloqueia cliques nos botões[cite: 1, 3] */
    overflow: hidden;
}

.meteoros-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}
/* Ajuste específico para as imagens da seção GeekTalk e Convidados */
#geektalk .guest-img-alongada,
#convidados .guest-img-alongada {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* Faz a foto preencher o espaço sem distorcer (esticar) */
    object-position: center;  /* Centraliza o foco da foto (pode mudar para 'top' se necessário) */
}
/* Comando para manipular o tamanho vertical da foto no GeekTalk e Convidados */
#geektalk .guest-photo-container,
#convidados .guest-photo-container {
    height: 450px; /* Altere este valor para aumentar ou diminuir a altura vertical */
}

/* Customização dos botões sempre preenchidos com efeito Neon Dinâmico */
.ticket-btn {
    background: var(--neon-orange); /* Sempre preenchido com a cor laranja */
    color: #000000 !important;      /* Texto em preto para dar alto contraste sobre o laranja */
    font-weight: 900;
    border: 2px solid #f80808;       /* Borda branca para dar destaque ao estilo arcade */
    box-shadow: 0 0 15px var(--neon-orange); /* Brilho neon inicial */
    
   
}

/* Efeito ao passar o mouse (Hover) */
.ticket-btn:hover {
    background: #f12a98;            /* Muda para branco ao passar o mouse */
    color: #000000 !important;
    box-shadow: 0 0 25px var(--neon-orange), 0 0 10px #df067d;
    transform: scale(1.03);         /* Aumenta levemente de tamanho */
}
/* ==========================================================================
   CONTROLE E CENTRALIZAÇÃO DA IMAGEM PRINCIPAL (BANNER TOP)
   ========================================================================== */
.event-header {
    height: 270px; /* Altere este valor para mudar a altura do banner (ex: 500px, 600px) */
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;             /* Mantém a proporção da imagem sem distorcer */
    object-position: center center; /* Alinhamento Perfeito: Centraliza na horizontal e vertical */
}

/* ==========================================================================
   AJUSTES EXCLUSIVOS PARA SITES EM COMPUTADORES (DESKTOP)
   ========================================================================== */
@media (min-width: 769px) {
    
    /* 1. Centralização do Cabeçalho e Efeitos de Fundo Neon nas Laterais */
    .event-header {
        height: 280px; /* Altura ideal e fixa para monitores */
        background: 
            /* Efeito de Névoa Neon nas laterais (Rosa na esquerda, Laranja na direita) */
            radial-gradient(circle at left center, rgba(226, 21, 141, 0.4) 0%, transparent 40%),
            radial-gradient(circle at right center, rgba(255, 94, 0, 0.4) 0%, transparent 40%),
            /* Fundo gradiente profundo original do céu retro */
            linear-gradient(180deg, #05010d 0%, #170326 40%, #3a0647 80%, #ff5e00 100%);
        background-size: 100% 100%;
        animation: none; /* Desativa movimentação brusca no PC para preservar o efeito */
    }

    /* Brilho neon extra atrás do sol no PC */
    .event-header::before {
        width: 520px;
        height: 520px;
        bottom: -20px;
        box-shadow: 0 0 80px rgba(226, 21, 141, 0.8), 0 0 30px rgba(255, 94, 0, 0.6);
    }

    /* Centralização perfeita e redimensionamento do Logo (Sem esticar) */
    .banner-img {
        width: auto;
        height: 200%; /* Mantém o logo imponente mas sem estourar as bordas */
        max-width: 200%;
        object-fit: contain; /* Impede distorções na imagem */
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%) !important; /* Garante centralização vertical e horizontal absoluta */
    }

    .event-header:hover .banner-img {
        transform: translate(-50%, -50%) scale(1.02) !important; /* Efeito hover seguro no PC */
    }

    /* 2. Novo Formato da GeekTalk (Idêntico ao Concurso Cosplay) */
    #geektalk .guests-grid-duo {
        display: block !important; /* Desativa o grid padrão */
        max-width: 1000px;
        margin: 0 auto;
    }

    #geektalk .card-alongado {
        display: flex !important;
        flex-direction: row !important; /* Foto na esquerda, texto na direita */
        max-width: 900px;
        height: 500px;
        width: 100%;
    }

    #geektalk .guest-photo-container {
        width: 45%;
        height: 100% !important;
        border-bottom: none !important;
        border-right: 3px solid var(--neon-blue); /* Linha divisória neon */
    }

    #geektalk .guest-img-alongada {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #geektalk .guest-info {
        width: 55%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        padding: 40px !important;
    }

    #geektalk .ticket-btn {
        width: auto;
        padding: 12px 35px;
        margin-top: 20px;
    }

    /* 3. Correção do Tamanho dos Convidados Especiais (Imagem Principal) */
    .main-poster-container {
        max-width: 650px; /* Reduz o tamanho gigante que ficava nos monitores */
        margin: 0 auto 30px auto;
        box-shadow: 0 0 35px rgba(226, 21, 141, 0.5);
    }

    /* 4. Ajuste dos Grids das Outras Seções (Tarde Nostálgica) */
    #tarde-nostalgica .guests-grid-duo {
        grid-template-columns: repeat(3, 1fr) !important; /* Força os 3 cards lado a lado */
        max-width: 1140px;
        margin: 50px auto 0 auto;
        gap: 25px;
    }

    #tarde-nostalgica .card-alongado {
        width: 100%;
        max-width: 350px;
    }

    #tarde-nostalgica .guest-photo-container {
        height: 350px; /* Controla a altura das fotos da tarde nostálgica */
    }

    /* 5. Ajuste da Seção do Concurso de Cosplay (Layout Horizontal) */
    #cosplay .day-card {
        display: flex !important;
        flex-direction: row !important;
        max-width: 850px;
        margin: 0 auto;
        height: 400px;
    }
    #cosplay .cosplay-photo-container {
        width: 45%;
        height: 100% !important;
        border-bottom: none !important;
        border-right: 3px solid var(--neon-orange);
    }
    #cosplay .day-content {
        width: 55%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        padding: 40px !important;
    }

    /* 6. Ajuste do Card VIP */
    .vip-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        max-width: 950px;
        height: 400px;
    }
    .vip-photo-container {
        width: 50%;
        height: 100%;
        border-bottom: none;
        border-right: 2px solid var(--neon-pink);
    }
    .vip-info {
        width: 50%;
        padding: 40px;
        text-align: left;
    }
    .vip-btn {
        display: inline-block;
        width: auto;
        padding: 15px 40px;
    }

    /* 7. Ajuste das Caixas de Contato lado a lado */
    .contato-content {
        flex-direction: row;
        justify-content: space-between;
        max-width: 900px;
    }
    .contato-box {
        width: 45%;
        text-align: left;
    }
    .social-buttons {
        justify-content: flex-start;
    }
}
/* ==========================================================================
   AJUSTES EXCLUSIVOS PARA SITES EM COMPUTADORES (DESKTOP) - PADRONIZADO
   ========================================================================== */
@media (min-width: 769px) {
    
    /* 1. Redimensionamento e Ajuste do Cabeçalho (Foco no Logo sem Esticar) */
    .event-header {
        height: 450px; /* Altura ideal padrão para preencher a tela do PC */
        background: 
            radial-gradient(circle at left center, rgba(226, 21, 141, 0.4) 0%, transparent 40%),
            radial-gradient(circle at right center, rgba(255, 94, 0, 0.4) 0%, transparent 40%),
            linear-gradient(180deg, #05010d 0%, #170326 40%, #3a0647 80%, #ff5e00 100%);
        background-size: 100% 100%;
        animation: none;
    }

    /* Sol Retrô centralizado ao fundo */
    .event-header::before {
        width: 480px;
        height: 480px;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0 0 50px rgba(255, 145, 0, 0.856);
    }

    }

    /* ==========================================================================
   EFEITO GRADIENTE / FADE OUT FLUIDO NAS ATIVIDADES
   ========================================================================== */
.atividade-card {
    position: relative; /* Permite posicionar o gradiente sobreposto */
    overflow: hidden;
}

/* Criando a máscara fluida sobre a imagem */
.atividade-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%; /* Altura do gradiente de fade out */
    background: linear-gradient(to top, rgba(20, 5, 38, 1) 0%, rgba(20, 5, 38, 0.7) 40%, transparent 100%);
    pointer-events: none; /* Permite clicar na imagem por trás sem problemas */
    transition: all 0.3s ease;
    z-index: 1;
}

/* Garante que o título da atividade fique visível por cima do fade out */
.atividade-titulo {
    position: relative;
    z-index: 2;
    margin-top: auto !important; /* Empurra o texto para a base do card */
    padding-bottom: 5px;
}

/* Efeito interativo suave ao passar o mouse */
.atividade-card:hover::after {
    height: 70%;
    background: linear-gradient(to top, rgba(20, 5, 38, 1) 0%, rgba(20, 5, 38, 0.8) 50%, transparent 100%);
}

/* ==========================================================================
   ESTILIZAÇÃO DO NOVO BOTÃO RETROGEEK
   ========================================================================== */
.btn-retrogeek {
    border-color: #ffcc00; /* Amarelo Retro */
    box-shadow: inset 0 0 8px rgba(255, 204, 0, 0.3), 0 0 8px rgba(255, 204, 0, 0.3);
}

.btn-retrogeek:hover {
    background: #ffcc00;
    color: #000000 !important;
    box-shadow: 0 0 20px #ffcc00;
}

/* ==========================================================================
   EFEITO GRADIENTE / FADE OUT INDIVIDUAL POR CARTÃO
   ========================================================================== */
.atividade-card {
    position: relative;
    overflow: hidden;
    /* Define uma cor escura padrão caso esqueça de colocar a variável no HTML */
    --cor-fade: 20, 5, 38; 
}

.atividade-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65%; /* Altura do fade out fluído */
    /* Cria a transição fluida usando a cor configurada no HTML em formato RGB */
    background: linear-gradient(
        to top, 
        rgba(var(--cor-fade), 1) 0%, 
        rgba(var(--cor-fade), 0.7) 45%, 
        transparent 100%
    );
    pointer-events: none;
    transition: all 0.4s ease;
    z-index: 1;
}

.atividade-titulo {
    position: relative;
    z-index: 2;
    margin-top: auto !important;
    padding-bottom: 5px;
}

/* Efeito Hover sutil que intensifica a cor do gradiente individual */
.atividade-card:hover::after {
    height: 75%;
    background: linear-gradient(
        to top, 
        rgba(var(--cor-fade), 1) 0%, 
        rgba(var(--cor-fade), 0.85) 55%, 
        transparent 100%
    );
}

/* ==========================================================================
   ALINHAMENTO EM DUAS FILEIRAS (COLUNAS) DE BOTÕES
   ========================================================================== */
.social-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    width: 100%;
}

.social-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
    max-width: 250px; /* Garante que os botões não fiquem esticados demais no PC */
}

/* Ajuste para que os botões ocupem toda a largura da sua respectiva coluna */
.social-column .social-btn {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* ==========================================================================
   ESTILO DO NOVO BOTÃO DO FACEBOOK (NEON AZUL CLASSIC)
   ========================================================================== */
.btn-facebook {
    border-color: #1877f2; /* Azul Oficial Facebook */
    box-shadow: inset 0 0 8px rgba(24, 119, 242, 0.3), 0 0 8px rgba(24, 119, 242, 0.3);
}

.btn-facebook:hover {
    background: #1877f2;
    color: #ffffff !important;
    box-shadow: 0 0 20px #1877f2;
}

/* Responsividade: Garante que em celulares muito pequenos eles fiquem bem ajustados */
@media (max-width: 480px) {
    .social-container {
        flex-direction: row; /* Mantém lado a lado em duas colunas mesmo no mobile */
        gap: 10px;
    }
    .social-column {
        gap: 10px;
    }
}