:root {
    --bg-color: #000000;
    --text-color: #ffffff;
    --accent-color: #d63d00;
    /* Orange/Red for the button */
    --secondary-text: #cccccc;
    --icon-bg: #1f1f1f;
    --font-primary: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    /* Inter is a modern sans-serif font */
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-primary);
    line-height: 1.5;
    overflow-x: hidden;
}

/* Header */
/* PANTALLA DE CARGA */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

.loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    text-align: center;
}

.loading-gif {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
}

.main-header {
    display: flex;
    align-items: center;
    padding: 20px 40px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 10;
}

.logo {
    height: 80px;
    width: auto;
}

/* Back Arrow - Desktop */
.back-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-size: 1.5rem;
    margin-right: 20px;
    text-decoration: none;
    transition: transform 0.2s, color 0.2s;
}

.back-arrow:hover {
    transform: translateX(-5px);
    color: var(--accent-color);
}

/* Hamburger Menu Toggle */
.menu-toggle {
    display: none;
    /* Hidden by default on desktop, shown on mobile via media query */
    font-size: 28px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    /* Push to right */
}

/* OVERLAY MENU */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    flex-direction: column;
    padding: 30px;
    z-index: 1000;
    box-sizing: border-box;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.nav-overlay.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.overlay-header {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.close-menu {
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.close-menu:hover {
    color: #ccc;
}

.nav-overlay .nav-links {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.nav-overlay .nav-links li {
    width: 100%;
}

.nav-overlay .nav-links a {
    display: block;
    width: 100%;
    padding: 20px 25px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    color: white;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    background: transparent;
}

.nav-overlay .discord-btn img,
.nav-overlay .play-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.nav-overlay .nav-links a:hover,
.nav-overlay .nav-links a.active {
    background: #3b82f6;
    color: white;
}

.nav-overlay .nav-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: auto;
}

.nav-overlay .discord-btn,
.nav-overlay .play-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px 25px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    box-sizing: border-box;
}

.nav-overlay .discord-btn {
    background: #5865F2;
    color: white;
    gap: 10px;
}

.nav-overlay .play-btn {
    background: #e9a11a;
    color: #7e3013;
    justify-content: space-between;
}

.nav-overlay .play-btn span {
    background: #e9a11a;
    color: #9a4d14;
    padding: 4px 8px;
    border-radius: 4px;
}

.nav-overlay .discord-btn:hover {
    background: #4752c4;
}

.nav-overlay .play-btn:hover {
    background: #e9a11a;
}


/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 5%;
    background-image: url('fondoweb.webp');
    background-size: cover;
    background-position: center;
}

/* Brand Name */
.brand-name {
    font-size: 1.5rem;
    font-weight: 400;
    /* Matching the clean look */
    margin-left: 15px;
    letter-spacing: 1px;
}

/* Gradient Overlay */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #000000 0%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.breadcrumbs {
    color: var(--secondary-text);
    font-size: 0.9rem;
    margin-bottom: 30px;
    display: flex;
    gap: 10px;
}

.game-title {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 10px;
    margin-top: 0;
}

.publisher {
    font-size: 0.9rem;
    margin-bottom: 5px;
    color: var(--secondary-text);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
}

.publisher span {
    color: var(--text-color);
    font-weight: bold;
}

.platform-info {
    font-size: 0.85rem;
    color: #999999;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.price {
    font-size: 5rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.action-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 50px;
}

.btn-primary {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 12px 60px;
    /* Increased horizontal padding */
    border-radius: 4px;
    /* Less rounded */
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.btn-primary:hover {
    transform: scale(1.05);
    background-color: #e64a19;
}

.btn-icon {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Thinner border */
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    /* Matching the primary button style mostly, or keep circle? User said heart icon specific. Let's keep circle or round rect? User implied "menos redondeado" for button. User said "Icono de corazon... borde fino... para que el boton naranja sea protagonista". User didn't explicitly say change shape of icon button, but mostly consistency implies. I will keep it circle as it is standard for fav buttons, but modify border. */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    transition: border-color 0.2s;
}

.btn-icon:hover {
    border-color: white;
}

/* Features Grid */
/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    /* Increased gap */
    margin-top: 60px;
    /* Increased top margin */
}

.feature-item {
    display: flex;
    align-items: flex-start;
    /* Align top for multi-line text */
    gap: 15px;
}

.feature-icon {
    font-size: 1.8rem;
    /* Slightly smaller icons */
    width: 40px;
    text-align: center;
    color: #ffffff;
    /* Ensure consistent stroke - FA solid icons are filled. For linear look would need distinct icon set or 'far'. */
}

.feature-text {
    display: flex;
    flex-direction: column;
}

.feature-title {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2px;
}

.feature-desc {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    /* Medium gray */
}

/* Responsive */
@media (max-width: 768px) {
    .hero {
        background-image: url('fondomovil.webp');
        background-position: center;
        padding: 0 20px;
    }

    .main-header {
        padding: 20px;
        justify-content: space-between;
        /* Ensure logo and menu toggle are spaced */
    }

    .back-arrow {
        display: inline-flex;
    }

    .menu-toggle {
        display: none;
    }

    .logo {
        height: 60px;
    }

    .brand-name {
        font-size: 1.2rem;
    }

    .game-title {
        font-size: 2.5rem;
    }

    .price {
        font-size: 3.5rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .hero {
        align-items: flex-start;
        padding-top: 120px;
    }

    .game-title {
        font-size: 2rem;
    }

    .publisher {
        font-size: 0.8rem;
    }

    .price {
        font-size: 3rem;
        margin-bottom: 20px;
    }

    .action-buttons {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .btn-primary {
        width: 100%;
        text-align: center;
    }

    .btn-icon {
        display: none;
        /* Hide wishlist on very small screens if needed, or keep it */
    }

    .features-grid {
        margin-top: 30px;
    }
}