:root {
    --primary-red: #D7263D;
    --secondary-dark: #121212;
    --text-light: #f0f0f0;
    --accent-glow: #ff0044;
    --border-grey: #444;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    scroll-behavior: smooth;
    cursor: url('../img/cursor.png'), auto;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--secondary-dark);
    color: var(--text-light);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: 'Bebas Neue', sans-serif;
    color: var(--primary-red);
    letter-spacing: 3px;
}

a {
    color: var(--primary-red);
    text-decoration: none;
    transition: color 0.3s ease;
    cursor: inherit;
}

a:hover {
    color: var(--accent-glow);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-title { font-size: 4rem; text-align: center; margin-bottom: 3rem; text-shadow: 0 0 10px rgba(255, 0, 68, 0.7); }
.section-subtitle { text-align: center; font-size: 1.2rem; margin-bottom: 2rem; color: var(--text-light); max-width: 800px; margin-left: auto; margin-right: auto; }

.intro-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('../img/portada-clandestino-v2.jpg') no-repeat center center/cover; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 1000; opacity: 1; visibility: visible; transition: opacity 0.8s ease-out, visibility 0.8s ease-out; }
.intro-screen.hidden { opacity: 0; visibility: hidden; }
.intro-screen::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1; }
.intro-content { position: relative; z-index: 2; text-align: center; animation: fadeInScale 1.5s ease-out forwards; }
.intro-logo { max-width: 300px; margin-bottom: 20px; filter: drop-shadow(0 0 15px rgba(255, 0, 68, 0.8)); }
.intro-screen h1 { font-size: 5rem; color: var(--text-light); text-shadow: 0 0 20px var(--accent-glow), 0 0 30px var(--primary-red); margin-bottom: 1rem; }
.intro-screen p { font-size: 1.5rem; color: #ccc; margin-bottom: 2rem; }

.neon-button { background-color: transparent; border: 2px solid var(--primary-red); color: var(--text-light); padding: 1rem 2.5rem; font-size: 1.2rem; letter-spacing: 2px; cursor: inherit; position: relative; overflow: hidden; transition: all 0.4s ease; box-shadow: 0 0 10px var(--primary-red); font-family: 'Bebas Neue', sans-serif; }
.neon-button:hover { color: var(--secondary-dark); background-color: var(--primary-red); box-shadow: 0 0 20px var(--accent-glow), 0 0 40px var(--primary-red); transform: translateY(-3px); }

.main-header { background-color: rgba(18, 18, 18, 0.8); backdrop-filter: blur(10px); padding: 1rem 0; position: sticky; top: 0; left: 0; width: 100%; z-index: 500; border-bottom: 2px solid var(--primary-red); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.navbar { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.navbar .logo img { height: 60px; filter: drop-shadow(0 0 8px rgba(255, 0, 68, 0.6)); }
.nav-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; }
.nav-links a { color: var(--text-light); font-size: 1.2rem; letter-spacing: 1px; padding: 0.5rem 0; position: relative; transition: color 0.3s ease; font-family: 'Bebas Neue', sans-serif; }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: var(--primary-red); transition: width 0.3s ease; }
.nav-links a:hover { color: var(--primary-red); }
.nav-links a:hover::after { width: 100%; }

.hero-section { position: relative; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; background: url('../img/portada-clandestino-v2.jpg') no-repeat center center/cover; background-attachment: fixed; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(18, 18, 18, 1), rgba(18, 18, 18, 0.2)); }
.hero-content { position: relative; z-index: 10; animation: slideInUp 1s ease-out forwards; }
.hero-logo-large { max-width: 90%; width: 500px; margin-bottom: 2rem; filter: drop-shadow(0 0 20px rgba(255, 0, 68, 0.9)); }
.hero-section h2 { font-size: 4rem; color: var(--text-light); margin-bottom: 2.5rem; text-shadow: 0 0 15px var(--accent-glow); }

.content-section { padding: 6rem 2rem; border-bottom: 1px dashed var(--border-grey); }
.content-section:last-of-type { border-bottom: none; }

.about-section { background: linear-gradient(180deg, var(--secondary-dark) 0%, #181818 100%); }
.typewriter-container { background-color: rgba(10, 10, 10, 0.5); border-left: 4px solid var(--primary-red); padding: 2.5rem; font-size: 1.2rem; line-height: 1.8; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); min-height: 250px; }
#typewriter-text { display: inline; white-space: pre-wrap; border-right: 3px solid var(--primary-red); animation: blink-caret 0.75s step-end infinite; }

.gallery-section { background-color: #111; }
.gallery-scroll-container { overflow-x: auto; padding-bottom: 20px; border: 3px solid var(--primary-red); box-shadow: 0 0 20px rgba(255, 0, 68, 0.6); border-radius: 10px; background-color: #000; }
.gallery-track { display: flex; gap: 15px; padding: 15px; }
.gallery-item { flex-shrink: 0; width: 70vw; max-width: 600px; height: 450px; border-radius: 5px; overflow: hidden; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-scroll-container::-webkit-scrollbar { height: 12px; }
.gallery-scroll-container::-webkit-scrollbar-track { background: #222; border-radius: 10px; }
.gallery-scroll-container::-webkit-scrollbar-thumb { background-color: var(--primary-red); border-radius: 10px; border: 2px solid #222; }
.gallery-scroll-container::-webkit-scrollbar-thumb:hover { background-color: var(--accent-glow); }

.factions-section { background: linear-gradient(0deg, var(--secondary-dark) 0%, #181818 100%); text-align: center; }

.faction-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    margin-top: 3rem;
}

.faction-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
    width: 100%;
}

.faction-card {
    flex: 1;
    min-width: 300px;
    max-width: 350px;
    background-size: cover;
    background-position: center;
    border: 2px solid var(--border-grey);
    border-radius: 10px;
    padding: 2.5rem 1.5rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 250px;
}
.faction-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1; transition: background 0.4s ease; }
.faction-card:hover { border-color: var(--primary-red); transform: translateY(-10px) scale(1.03); box-shadow: 0 15px 35px rgba(255, 0, 68, 0.4); }
.faction-card:hover::before { background: rgba(0, 0, 0, 0.4); }
.faction-card h3, .faction-card p, .faction-card span { position: relative; z-index: 2; text-shadow: 1px 1px 3px #000; }
.faction-card h3 { font-size: 2.5rem; margin-bottom: 1rem; }
.faction-card p { font-size: 1.1rem; margin-bottom: 1.5rem; }
.faction-card span { display: inline-block; padding: 0.7rem 1.5rem; border: 1px solid var(--primary-red); border-radius: 5px; color: var(--primary-red); transition: all 0.3s ease; font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; }
.faction-card:hover span { background-color: var(--primary-red); color: var(--secondary-dark); }
.faction-card.police { background-image: url('../img/police.jpg'); }
.faction-card.ems { background-image: url('../img/ems.jpg'); }
.faction-card.gangs { background-image: url('../img/gangs.jpg'); }
.faction-card.businesses { background-image: url('../img/businesses.jpg'); }
.faction-card.businesses-2 { background-image: url('../img/businesses-2.jpg'); }

.donations-section { background: linear-gradient(180deg, #181818 0%, var(--secondary-dark) 100%); }
.donation-content { display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; }
.donation-image-container { flex: 1; min-width: 300px; }
.donation-image-container img { width: 100%; border-radius: 10px; box-shadow: 0 0 25px rgba(0,0,0,0.5); }
.donation-text-container { flex: 1.5; min-width: 300px; }
.donation-text-container h3 { font-size: 3rem; margin-bottom: 1rem; }
.donation-text-container p { font-size: 1.2rem; margin-bottom: 2rem; }

.social-section { background-color: #111; text-align: center; }
.social-links { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; margin-top: 3rem; }
.social-button { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; color: var(--text-light); font-size: 1.2rem; padding: 1.5rem 2rem; border: 2px solid var(--border-grey); border-radius: 10px; background-color: #222; transition: all 0.3s ease; width: 180px; font-family: 'Bebas Neue', sans-serif; }
.social-button img { height: 50px; filter: invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)); transition: filter 0.3s ease; }
.social-button:hover { border-color: var(--primary-red); background-color: var(--primary-red); color: var(--secondary-dark); transform: translateY(-5px); }
.social-button:hover img { filter: invert(0); }

.main-footer { background-color: #000; color: #aaa; text-align: center; padding: 2.5rem 0; border-top: 2px solid var(--primary-red); }
.main-footer p { margin-bottom: 0.5rem; }

@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--primary-red); } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes slideInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1024px) { .section-title, .hero-section h2 { font-size: 3.5rem; } }
@media (max-width: 768px) { .navbar { flex-direction: column; gap: 1rem; } .nav-links { gap: 1.5rem; } .section-title, .hero-section h2 { font-size: 3rem; } .intro-screen h1 { font-size: 3.5rem; } .gallery-item { width: 80vw; } }
@media (max-width: 480px) { .content-section { padding: 4rem 1rem; } .section-title { font-size: 2.5rem; } .intro-screen h1 { font-size: 2.8rem; } .hero-logo-large { width: 300px; } .hero-section h2 { font-size: 2.5rem; } .typewriter-container { padding: 1.5rem; font-size: 1rem; } .gallery-item { height: 250px; } .social-links { gap: 1rem; } .social-button { width: 130px; padding: 1rem; } .donation-content { text-align: center; } }