/* ===== RESET Y CONFIGURACIÓN GLOBAL ===== */
/* Elimina márgenes y padding por defecto, establece box-sizing para todos los elementos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Incluye padding y border en el width/height */
}

/* ===== ESTILOS GENERALES DEL BODY ===== */
/* Define la apariencia base de toda la página */
body {
    font-family: 'Orbitron', sans-serif; /* Fuente gaming futurista */
    background: radial-gradient(ellipse at center, #171513 0%, #270000 40%, #0f0d0a 100%); /* Gradiente oscuro con tonos rojizos */
    color: #ffffff; /* Texto blanco */
    height: 100vh; /* Ocupa toda la altura de la ventana */
    overflow: hidden; /* Oculta scrollbars */
    position: relative; /* Para posicionamiento de elementos hijos */
}

/* ===== CONTENEDOR PRINCIPAL ===== */
/* Contenedor que centra todo el contenido vertical y horizontalmente */
.container {
    position: relative;
    z-index: 1; /* Asegura que esté por encima de posibles elementos de fondo */
    max-width: 1600px; /* Ancho máximo en pantallas grandes */
    margin: 0 auto; /* Centrado horizontal */
    padding: 20px; /* Espaciado interno */
    display: flex;
    flex-direction: column; /* Elementos en columna */
    align-items: center; /* Centrado horizontal */
    height: 100vh; /* Altura completa de la ventana */
    justify-content: center; /* Centrado vertical */
}

/* ===== CONTENEDOR DEL LOGO ===== */
/* Contenedor específico para el logo con animaciones y efectos */
.logo-container {
    width: 1500px; /* Ancho fijo grande para el logo */
    height: 250px; /* Alto fijo */
    margin-bottom: 40px; /* Espacio debajo del logo */
    position: relative;
    filter: drop-shadow(0 0 100px rgba(245, 192, 0, 0.445)); /* Sombra dorada difusa */
    animation: floatLogo 6s ease-in-out infinite; /* Animación de flotación continua */
}

/* Animación de flotación suave para el logo */
@keyframes floatLogo {
    0%, 100% {
        transform: translateY(0); /* Posición original */
    }
    50% {
        transform: translateY(-8px); /* Elevación suave */
    }
}

/* ===== LOGO ===== */
/* Imagen del logo dentro de su contenedor */
.logo {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    height: 100%; /* Ocupa toda la altura del contenedor */
    object-fit: contain; /* Mantiene proporciones sin distorsión */
}

/* ===== SUBTÍTULO ===== */
/* Texto descriptivo debajo del logo */
.subtitle {
    font-size: 1.1rem;
    color: #d4a574; /* Color dorado claro */
    margin-bottom: 8px; /* Espacio debajo */
    font-weight: 500;
    letter-spacing: 1px; /* Espaciado entre letras para estilo gaming */
}

/* ===== VERSIÓN ===== */
/* Texto que muestra la versión de Minecraft */
.version {
    font-size: 0.95rem;
    color: #c49463; /* Color dorado más oscuro */
    margin-bottom: 35px; /* Espacio grande debajo para separar de los botones */
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* ===== CONTENEDOR DE BOTONES ===== */
/* Contenedor flexible para los botones de enlaces */
.buttons-container {
    display: flex;
    gap: 20px; /* Espacio entre botones */
    margin-bottom: 25px; /* Espacio debajo de los botones */
    flex-wrap: wrap; /* Permite que los botones bajen de línea en móviles */
    justify-content: center; /* Centrado horizontal */
}

/* ===== BOTONES GENERALES ===== */
/* Estilo base para todos los botones */
.btn {
    color: #0a0a0a; /* Texto oscuro para contraste con fondo dorado */
    text-decoration: none; /* Sin subrayado */
    padding: 16px 32px; /* Espaciado interno generoso */
    border-radius: 10px; /* Esquinas redondeadas */
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre icono y texto */
    transition: all 0.3s ease; /* Transiciones suaves */
    letter-spacing: 1px;
    position: relative;
    overflow: hidden; /* Oculta el pseudo-elemento que se sale */
}

/* Efecto de brillo deslizante al hacer hover */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Inicia fuera del botón */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

/* Animación del brillo al hacer hover */
.btn:hover::before {
    left: 100%; /* Termina fuera del botón */
}

/* Efectos al hacer hover en el botón */
.btn:hover {
    transform: translateY(-3px); /* Efecto de elevación */
    filter: brightness(1.1); /* Aumenta brillo */
}

/* ===== BOTÓN DISCORD ===== */
.btn-discord {
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%); /* Gradiente dorado */
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4); /* Sombra dorada */
}

.btn-discord:hover {
    box-shadow: 0 6px 25px rgba(255, 193, 7, 0.6); /* Sombra más intensa al hover */
}

/* ===== BOTÓN TIENDA ===== */
.btn-shop {
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%); /* Mismo gradiente dorado */
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}

.btn-shop:hover {
    box-shadow: 0 6px 25px rgba(255, 193, 7, 0.6);
}

/* ===== BOTÓN WIKI ===== */
.btn-wiki {
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%); /* Mismo gradiente dorado */
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}

.btn-wiki:hover {
    box-shadow: 0 6px 25px rgba(255, 193, 7, 0.6);
}

/* ===== FOOTER ===== */
/* Texto de copyright en la parte inferior */
.footer {
    font-size: 0.85rem;
    color: #8b6f47; /* Color dorado apagado */
    text-align: center;
    letter-spacing: 0.5px;
}

/* ===== DISEÑO RESPONSIVE ===== */

/* Estilos para PC (pantallas grandes) - USADO: index.php contenedor principal */
@media (min-width: 769px) {
    .container {
        max-width: 1600px;
    }
    
    .logo-container {
        width: 1500px;
        height: 250px;
        margin-bottom: 40px;
        filter: drop-shadow(0 0 100px rgba(245, 61, 0, 0.388)); /* Sombra más rojiza en desktop */
    }
}

/* Tablets y móviles grandes - USADO: index.php en dispositivos medianos */
@media (max-width: 768px) {
    .logo-container {
        width: 356px; /* Logo más pequeño */
        height: 150px;
        margin-bottom: 0px; /* Menos espacio debajo */
    }

    .subtitle {
        font-size: 1rem; /* Texto más pequeño */
    }

    .version {
        font-size: 0.85rem; /* Texto más pequeño */
    }

    .buttons-container {
        flex-direction: column; /* Botones en columna */
        width: 100%; /* Ancho completo */
        max-width: 300px; /* Ancho máximo */
    }

    .btn {
        width: 100%; /* Botones de ancho completo */
        justify-content: center; /* Contenido centrado */
    }
}

/* Móviles pequeños - USADO: index.php en teléfonos */
@media (max-width: 480px) {
    .container {
        padding: 30px 15px; /* Más padding lateral reducido */
    }
}