:root {
    --bg:            #0d1117;
    --card:          #161b22;
    --azul-escuro:   #0d1b3e;
    --azul-medio:    #1e40af;
    --azul-ciano:    #00d4ff;
    --azul-neon:     #00eeff;
    --texto:         #c9d1d9;
    --branco:        #ffffff;
    --glow:          0 0 30px rgba(0, 212, 255, 0.5);
    --glow-forte:    0 0 50px rgba(0, 212, 255, 0.8);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Rajdhani', sans-serif; background:var(--bg); color:var(--texto); line-height:1.7; }

/* HEADER */
.header { position:fixed; top:0; left:0; right:0; z-index:1000; padding:20px 0; background:rgba(13,17,23,0.95); backdrop-filter:blur(12px); border-bottom:1px solid rgba(0,212,255,0.3); transition:0.4s; }
.header.scrolled { padding:12px 0; box-shadow:0 10px 40px rgba(0,212,255,0.15); }
.header-container { max-width:1500px; margin:0 auto; padding:0 5%; display:flex; align-items:center; justify-content:space-between; }

.logo-img { width:68px; height:68px; filter:drop-shadow(0 0 20px var(--azul-ciano)); transition:0.4s; }
.logo:hover .logo-img { transform:scale(1.1) rotate(5deg); filter:drop-shadow(0 0 30px var(--azul-neon)); }
.logo-text { font-family:'Orbitron',sans-serif; font-size:2.4rem; font-weight:700; background:linear-gradient(90deg,#1e40af,#00d4ff,#00eeff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-left:12px; }

/* MENU */
.nav-list { display:flex; gap:44px; list-style:none; }
.nav-link { color:var(--texto); text-decoration:none; text-transform:uppercase; font-weight:600; font-size:1.05rem; position:relative; transition:0.4s; }
.nav-link::after { content:''; position:absolute; bottom:-10px; left:0; width:0; height:3px; background:var(--azul-neon); box-shadow:var(--glow); transition:0.4s; }
.nav-link:hover { color:var(--azul-neon); }
.nav-link:hover::after { width:100%; }
.btn-contact { background:linear-gradient(135deg,var(--azul-medio),var(--azul-ciano)); color:white !important; padding:12px 32px !important; border-radius:50px; box-shadow:var(--glow); }
.btn-contact:hover { background:var(--azul-neon); transform:translateY(-4px); box-shadow:var(--glow-forte); }

.hamburger { display:none; flex-direction:column; gap:6px; cursor:pointer; }
.hamburger span { width:30px; height:3px; background:var(--azul-neon); box-shadow:var(--glow); transition:0.4s; }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(8px,8px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(8px,-8px); }

/* HERO */
.hero { height:100vh; background:linear-gradient(rgba(13,17,23,0.92),rgba(13,17,23,0.98)), url('https://images.unsplash.com/photo-1589820289827-7fd5c04d4ab5?ixlib=rb-4.0.3&auto=format&fit=crop&w=2850&q=80') center/cover no-repeat; display:flex; align-items:center; text-align:center; }
.hero h1 { font-family:'Orbitron',sans-serif; font-size:9rem; background:linear-gradient(90deg,#1e40af,#00d4ff,#00eeff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:var(--glow); }
.hero-subtitle { font-size:2.4rem; color:var(--azul-ciano); letter-spacing:10px; margin:20px 0; text-shadow:0 0 20px rgba(0,212,255,0.4); }
.hero-tagline { font-size:1.7rem; max-width:900px; margin:0 auto 50px; }
.btn-primary { background:linear-gradient(135deg,var(--azul-medio),var(--azul-ciano)); color:white; padding:20px 60px; border-radius:50px; font-weight:700; text-transform:uppercase; text-decoration:none; font-size:1.3rem; box-shadow:var(--glow); transition:0.4s; }
.btn-primary:hover { background:var(--azul-neon); transform:translateY(-6px); box-shadow:var(--glow-forte); }

/* SECÇÕES GERAIS */
.section { padding:160px 5%; min-height:80vh; }
.section.alt { background:var(--card); }
.container { max-width:1400px; margin:0 auto; }

h2 { font-family:'Orbitron',sans-serif; font-size:4.2rem; text-align:center; margin-bottom:70px;
     background:linear-gradient(90deg,#1e40af,#00eeff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:var(--glow); }

.texto { font-size:1.5rem; text-align:center; max-width:1000px; margin:0 auto 80px; color:var(--texto); line-height:1.8; }
.destaque { color:var(--azul-neon); font-weight:700; }




/* SERVIÇOS */
.servicos { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px,1fr)); gap:40px; margin-top:50px; }
.card { background:var(--card); border:2px solid var(--azul-medio); border-radius:14px; overflow:hidden; transition:0.5s; text-align:center; }
.card img { width:100%; height:220px; object-fit:cover; }
.card h3 { color:var(--azul-neon); padding:25px 20px 10px; font-size:1.7rem; }
.card p { padding:0 25px 30px; color:var(--texto); }
.card:hover { border-color:var(--azul-neon); transform:translateY(-20px); box-shadow:var(--glow-forte); }

/* PARCEIROS */
.parceiros { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px,1fr)); gap:40px; margin-top:50px; }
.card { background:var(--card); border:2px solid var(--azul-medio); border-radius:14px; overflow:hidden; transition:0.5s; text-align:center; }
.card img { width:100%; height:220px; object-fit:cover; }
.card h3 { color:var(--azul-neon); padding:25px 20px 10px; font-size:1.7rem; }
.card p { padding:0 25px 30px; color:var(--texto); }
.card:hover { border-color:var(--azul-neon); transform:translateY(-20px); box-shadow:var(--glow-forte); }

/* GALERIA */
.gallery { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:30px; }
.gallery a { display:block; border-radius:12px; overflow:hidden; box-shadow:var(--glow); }
.gallery img { width:100%; height:260px; object-fit:cover; transition:0.5s; }
.gallery img:hover { transform:scale(1.05); }

/* CONTACTO */
#contacto form { max-width:700px; margin:0 auto; display:grid; gap:22px; }
#contacto input, #contacto textarea { padding:18px; background:rgba(255,255,255,0.03); border:2px solid var(--azul-medio); border-radius:10px; color:var(--branco); font-size:1.1rem; transition:0.4s; }
#contacto input:focus, #contacto textarea:focus { border-color:var(--azul-neon); box-shadow:var(--glow); outline:none; }
#contacto button { background:linear-gradient(135deg,var(--azul-medio),var(--azul-ciano)); color:white; padding:20px; border:none; border-radius:10px; font-weight:800; text-transform:uppercase; cursor:pointer; transition:0.4s; }
#contacto button:hover { background:var(--azul-neon); box-shadow:var(--glow-forte); }

/* SOCIAL SECTION */
.social-section { padding: 120px 5%; background: var(--card); text-align:center; }
.social-title { 
    font-family: 'Orbitron', sans-serif; 
    font-size: 3.8rem; 
    background: linear-gradient(90deg, #1e40af, #00eeff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 60px;
    text-shadow: var(--glow);
}
.social-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
}
.social-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    background: var(--preto-card);
    border: 2px solid var(--azul-medio);
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.4s;
    position: relative;
    overflow: hidden;
}
.social-btn svg {
    width: 56px;
    height: 56px;
    fill: #00d4ff;
    transition: 0.4s;
}
.social-btn span {
    margin-top: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--texto);
}
.social-btn:hover {
    border-color: var(--azul-neon);
    transform: translateY(-12px);
    box-shadow: 0 0 50px rgba(0, 212, 255, 0.7);
}
.social-btn:hover svg { fill: var(--azul-neon); transform: scale(1.15); }



/* EVENTOS */
.eventos-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

.evento-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.4s ease;
    display: block;
}

.evento-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.evento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.evento-item:hover img {
    transform: scale(1.08);
}

.evento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.evento-item:hover .evento-overlay {
    opacity: 1;
}

.evento-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 1.5rem 1.5rem;
    color: white;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.evento-item:hover .evento-caption {
    transform: translateY(0);
}

.evento-caption h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.evento-ano {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Responsivo extra para telemóvel */
@media (max-width: 640px) {
    .evento-caption h3 {
        font-size: 1.3rem;
    }
    .eventos-gallery {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}



/* Cores específicas (opcional) */
.facebook:hover { box-shadow: 0 0 50px rgba(24, 119, 242, 0.6); }
.instagram:hover { box-shadow: 0 0 50px rgba(225, 48, 108, 0.6); }
.tiktok:hover { box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); }
.youtube:hover { box-shadow: 0 0 50px rgba(255, 0, 0, 0.6); }
.discord:hover { box-shadow: 0 0 50px rgba(114, 137, 218, 0.7); }

/* FOOTER */
footer { background:var(--card); padding:100px 5%; text-align:center; border-top:4px solid var(--azul-ciano); color:var(--texto); }

/* RESPONSIVO */
@media (max-width:992px) {
    .nav-list { position:fixed; top:0; right:-100%; width:100%; height:100vh; background:rgba(13,17,23,0.98); flex-direction:column; justify-content:center; align-items:center; transition:0.5s; backdrop-filter:blur(20px); }
    .nav-list.active { right:0; }
    .hamburger { display:flex; }
    .hero h1 { font-size:5.5rem; }
    .hero-subtitle { font-size:1.8rem; letter-spacing:6px; }
}
@media (max-width:576px) {
    .hero h1 { font-size:4.2rem; }
    h2 { font-size:3rem; }
}