/* Variables de color */
:root {
    --primary-yellow: #f1c40f;
    --dark-green: #1e392a;
    --army-green: #4b5320;
    --accent-red: #e74c3c;
    --text-white: #ffffff;
    --bg-dark: #121212;
}

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

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-white);
    overflow-x: hidden;
}

/* Navegación */
header {
    background: rgba(30, 57, 42, 0.95);
    padding: 1rem 5%;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid var(--primary-yellow);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.2rem;
    color: var(--primary-yellow);
}

.logo span { color: var(--text-white); }

.nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-white);
    font-weight: bold;
    font-size: 0.9rem;
    transition: 0.3s;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--primary-yellow);
}

/* Botones de Autenticación */
.auth-buttons {
    display: flex;
    gap: 10px;
}

.btn-login, .btn-signup {
    padding: 8px 18px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.8rem;
    transition: 0.3s;
}

.btn-login {
    color: var(--text-white);
    border: 1px solid var(--text-white);
}

.btn-signup {
    background-color: var(--primary-yellow);
    color: black;
}

.btn-signup:hover {
    background-color: #d4ac0d;
}

/* Sección Hero (Inicio) */

.hero {
    height: 100vh; /* Ocupa todo el alto de la pantalla */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10%;
    
    /* 1. Degradado oscuro (para legibilidad) + 2. La imagen de fondo */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), /* Degradado (70% opacidad) */
        url('./Imagenes/BackGroundForest.png'); /* <--- ¡CAMBIA ESTO por el nombre de tu archivo de imagen! */

    /* Propiedades clave para el fondo */
    background-size: cover;          /* Cubre todo el espacio disponible sin deformarse */
    background-position: center;     /* Centra la imagen */
    background-repeat: no-repeat;    /* Evita que la imagen se repita */
    background-attachment: fixed;    /* (Opcional) Efecto parallax: el fondo se queda quieto al hacer scroll */

    /* Mantenemos image-rendering: pixelated si queremos que la imagen se vea nítida y "retro" si se escala */
    image-rendering: pixelated; 
}


.hero-content {
    max-width: 600px;
}

.badge {
    background: var(--accent-red);
    display: inline-block;
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: bold;
    margin-bottom: 15px;
    border-radius: 3px;
}

h1 {
    font-family: 'Press Start 2P', cursive;
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--primary-yellow);
}

p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Botones de Acción */
.cta-actions button {
    padding: 15px 30px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8rem;
    cursor: pointer;
    border: none;
    margin-right: 15px;
    transition: transform 0.2s;
}

.btn-primary {
    background-color: var(--accent-red);
    color: white;
    box-shadow: 0 5px 0 #922b21;
}

.btn-secondary {
    background-color: var(--army-green);
    color: white;
    box-shadow: 0 5px 0 #2d3314;
}

.cta-actions button:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* Personaje */
.character-pixel {
    width: 250px; /* Escalamos el sprite para que se vea imponente */
    image-rendering: pixelated; /* Mantiene los bordes definidos del pixel art */
    filter: drop-shadow(0 0 20px var(--primary-yellow));
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.audio-control {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1001;
}

.btn-audio {
    background-color: var(--army-green);
    color: white;
    border: 2px solid var(--primary-yellow);
    padding: 10px 15px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7rem;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 4px 4px 0px black;
    transition: 0.2s;
}

.btn-audio:active {
    box-shadow: 0px 0px 0px black;
    transform: translate(2px, 2px);
}

.btn-audio.playing {
    background-color: var(--accent-red);
}

/* Espaciado para páginas secundarias que no son el Hero */
.assets-page {
    padding-top: 100px; /* Evita que el contenido quede detrás de la navbar */
    min-height: 100vh;
    background: linear-gradient(180deg, #121212 0%, #1a3a2a 100%);
}

.bg-secondary {
    background-color: #121212;
}

/* Estilo para que el enlace activo resalte */
.nav-links a.active {
    color: var(--primary-yellow);
    border-bottom: 2px solid var(--primary-yellow);
}

/* 1. Contenedor Global para dar márgenes laterales */
/* También asegúrate de que el contenedor tenga sus márgenes laterales */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}


/* 2. Ajuste de la página de Assets */

/* --- Ajuste para la página de Assets --- */

.assets-page {
    /* Este valor debe ser mayor a la altura de tu barra de navegación */
    /* Si tu navbar mide 80px, un padding de 120px o 140px es ideal */
    padding-top: 140px; 
    
    padding-bottom: 80px;
    min-height: 100vh;
    background-color: #0a150f; /* Color de fondo oscuro */
}

/* 3. Títulos con margen inferior */
.section-header {
    border-left: 5px solid var(--primary-yellow); /* Un detalle visual chulo */
    padding-left: 20px;
    
    margin-bottom: 50px;
    padding-top: 20px;
}

.section-header h2 {
    font-family: 'Press Start 2P', cursive;
    color: var(--primary-yellow);
    font-size: 2rem;
    margin-bottom: 15px;
}

/* 4. La cuadrícula (Grid) mejorada */
.assets-grid {
    display: grid;
    /* Crea columnas automáticamente de mínimo 300px */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 40px; /* Espacio entre tarjetas */
}

/* 5. La tarjeta (Card) para que no se vea "suelta" */
.asset-card {
    background: #141e19;
    border: 2px solid #2a3a30;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: 0.3s;
}

.asset-card:hover {
    border-color: var(--primary-yellow);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* 1. El contenedor debe ocultar lo que sobresalga (por seguridad) */
.asset-preview {
    background: #050a07;
    border-radius: 8px;
    height: 220px; /* Puedes ajustar la altura según prefieras */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* <--- Evita que el sprite se salga del borde */
    padding: 15px;    /* <--- Da un poco de aire interno */
}

/* 2. La imagen debe adaptarse al ancho del contenedor */
.asset-preview img {
    max-width: 100%;  /* <--- No permite que la imagen sea más ancha que el cuadro */
    max-height: 100%; /* <--- No permite que sea más alta */
    object-fit: contain; /* <--- Mantiene la proporción de la imagen sin deformarla */
    image-rendering: pixelated; /* <--- Mantiene tus píxeles nítidos */
}
.asset-preview img.pixel-img {
    height: 80%; /* El mono se verá grande y centrado */
    image-rendering: pixelated;
}

.assets-nav a {
    color: #f1c40f; /* Amarillo Banana */
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    margin-right: 15px;
    padding: 5px 10px;
    border: 1px solid transparent;
    transition: 0.3s;
}

.assets-nav a:hover {
    border: 1px solid #f1c40f;
    background: rgba(241, 196, 15, 0.1);
    border-radius: 4px;
}

/* --- Botón de Descarga Personalizado --- */
.btn-download {
    display: block; /* Ocupa el ancho disponible */
    width: 100%;
    margin-top: 15px;
    padding: 12px 0;
    
    /* Colores y Fuente */
    background-color: #f1c40f; /* Amarillo Banana */
    color: #000 !important;    /* Texto negro siempre legible */
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7rem;
    text-decoration: none;
    text-align: center;
    
    /* Efecto de borde tipo GameBoy/Arcade */
    border: none;
    border-radius: 4px;
    box-shadow: 0 4px 0 #9e850a; /* Sombra sólida inferior para dar volumen */
    
    transition: all 0.1s ease;
    cursor: pointer;
}

/* Efecto al pasar el mouse (Hover) */
.btn-download:hover {
    background-color: #ffdb4d;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #9e850a;
}

/* Efecto al hacer clic (Active) */
.btn-download:active {
    transform: translateY(4px); /* Se hunde al presionar */
    box-shadow: none; /* Desaparece la sombra para simular presión */
}

/* Ajuste para que la info de la tarjeta no se vea apretada */
.asset-info {
    padding: 20px;
}

.asset-info h3 {
    margin-bottom: 5px;
    color: #fff;
}

.asset-info p {
    color: #888;
    margin-bottom: 15px;
}

/* --- Espaciado de Secciones de Assets --- */

.asset-category {
    /* Crea un margen generoso entre cada bloque (Jugador, Items, etc.) */
    margin-bottom: 100px; 
    
    /* Espacio interno inferior para la línea divisoria si decides usarla */
    padding-bottom: 40px; 
    
    /* Importante: Evita que la navbar tape el título al hacer clic en los links */
    scroll-margin-top: 140px; 
}

/* Título de la categoría (# El Jugador, etc.) */
.category-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 40px; /* Margen para que las tarjetas no estén pegadas al título */
    display: flex;
    align-items: center;
}

/* El símbolo '#' en color banana para que resalte */
.category-title span {
    color: var(--primary-yellow);
    margin-right: 15px;
}

/* Opcional: Una línea sutil para separar visualmente */
.asset-category:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.assets-grid {
    display: grid;
    /* Esto crea columnas de 280px. Si no caben, saltan a la siguiente fila abajo */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 25px; /* Espacio entre cartas */
    width: 100%;
}

/* --- ESTILO KIT DE PRENSA --- */
.press-kit-banner {
    background: linear-gradient(90deg, #1a3a2a 0%, #0a150f 100%);
    border: 2px solid var(--primary-yellow);
    padding: 30px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.1);
}

.press-kit-text h3 {
    font-family: 'Press Start 2P', cursive;
    color: var(--primary-yellow);
    font-size: 1rem;
    margin-bottom: 10px;
}

.btn-press-kit {
    background-color: var(--primary-yellow);
    color: #000;
    padding: 15px 25px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7rem;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 5px 0 #9e850a;
    transition: 0.2s;
}

.btn-press-kit:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 0 #9e850a;
    background-color: #fff;
}

/* --- PERFIL DE USUARIO EN NAVBAR --- */
.user-profile {
    position: relative;
    display: inline-block;
    cursor: pointer;
    min-width: 150px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px 15px;
    border-radius: 50px;
    border: 1px solid transparent;
    transition: 0.3s;
}

.user-info:hover {
    background: rgba(241, 196, 15, 0.1);
    border-color: var(--primary-yellow);
}

/*Al poner el cursor se activa*/
.user-profile:hover .dropdown-menu {
    display: flex;
}


.user-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid var(--primary-yellow);
    image-rendering: pixelated; /* Si es un sprite */
}

.user-name {
    font-size: 0.85rem;
    font-weight: bold;
    color: #fff;
}

/* --- MENÚ DESPLEGABLE (DROPDOWN) --- */
.dropdown-menu {
    transition: 0.3s;
    position: absolute;
    top: 32px;
    right: 0;
    width: 100%;
    min-width:100%;
    background: #141e19;
    border: 2px solid var(--primary-yellow);
    border-radius: 8px;
    display: none; /* Oculto por defecto */
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 1000;
}

/* Cuando el menú dropdown está activo, modificamos el botón que tiene justo arriba */
.user-info:hover, .user-profile:hover .user-info{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none; /* Para que parezca una sola pieza */
}


/* Y al menú de abajo le quitamos la redondez superior derecha para que sigan la línea */
.dropdown-menu:hover,.user-profile:hover .dropdown-menu{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
} 

.dropdown-menu.active {
    display: flex; /* Se muestra al activarlo */
}


.dropdown-menu:hover .user-info{
    display: none; /* Se muestra al activarlo */
}

.dropdown-menu a {
    padding: 12px 20px;
    text-decoration: none;
    color: #fff;
    font-size: 0.8rem;
    transition: 0.2s;
}

.dropdown-menu a:hover {
    background: var(--primary-yellow);
    color: #000;
}

.dropdown-menu hr {
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 0;
}

.logout-link {
    color: #e74c3c !important; /* Rojo para cerrar sesión */
}

.logout-link:hover {
    background: #e74c3c !important;
    color: #fff !important;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05); /* Fondo muy sutil */
    padding: 6px 16px;
    border-radius: 4px; /* Menos circular, más rectangular/técnico */
    border: 1px solid rgba(241, 196, 15, 0.3); /* Borde amarillo banana sutil */
    cursor: pointer;
    transition: all 0.3s ease;
}

.user-info:hover {
    background: rgba(241, 196, 15, 0.1);
    border-color: var(--primary-yellow);
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.2);
}

.user-name {
    font-family: 'Poppins', sans-serif; /* O una fuente más limpia */
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    letter-spacing: 0.5px;
}

.user-status-dot {
    width: 8px;
    height: 8px;
    background-color: #2ecc71;
    border-radius: 50%;
    box-shadow: 0 0 5px #2ecc71;
}

.dropdown-arrow {
    color: var(--primary-yellow);
    font-size: 0.8rem;
    margin-left: 5px;
}

/* Responsivo: En celulares, el kit de prensa se pone uno sobre otro */
@media (max-width: 768px) {
    .press-kit-banner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
}