/* VARIABLES DE MARCA */
:root {
  --azul-electrico: #00D4FF;
  --morado-neon: #8A2BE2;
  --fucsia-energetico: #FF2D95;
  --negro-fondo: #0000;
  --gris-oscuro: #1A1A2E;
  --cian-glow: #66F2FF;
  --blanco: #FFFFFF;
  --gris-texto: #B0B3C0;
  --azul: #00D4FF;
    --morado: #8A2BE2;
    --fucsia: #FF2D95;
    --dark-bg: rgba(10, 10, 15, 0.95);
}

/* GENERAL */
body {
  background-color: var(--negro-fondo) !important;
  color: var(--blanco);
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
}
.main-nav {
    background: var(--dark-bg) !important;
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--morado);
    padding: 0.8rem 1rem;
}
.logo-img {
    height: 50px;
    width: auto;
    filter: drop-shadow(0 0 5px var(--azul));
    border-radius: 5px;
}

.logo-letters {
    height: 60px;
    margin-left: 10px;
}

/* NAVBAR PRINCIPAL */
.navbar {
  background-color: #000;
  /*background: rgba(26, 26, 46, 0.95) !important;*/
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--morado-neon);
  padding: 0.5rem 1rem;
}

.logo {
  width: 80px; /* Ajustado para que no rompa el diseño */
  height: auto;
  transition: transform 0.3s;
}
.leters {
  max-width: 400px; /* Ajustado para que no rompa el diseño */
  height: auto;
  transition: transform 0.3s;
}

.logo:hover {
  transform: scale(1.1) rotate(-5deg);
}

.nav-link {
  color: var(--blanco) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.3s;
}

.nav-link:hover {
  color: var(--azul-electrico) !important;
  text-shadow: 0 0 8px var(--azul-electrico);
}

/* SUB-NAV (Juegos) */
#disapeer {
  background: var(--negro-fondo);
  padding: 15px 0;
}

.cuadritos {
  transform: skew(-15deg); /* Cambiado a negativo para un look más dinámico */
  border: 1px solid var(--azul-electrico);
  background: rgba(0, 212, 255, 0.05);
  margin: 0 5px;
  transition: all 0.3s ease;
}

.cuadritos:hover {
  background: var(--azul-electrico);
  box-shadow: 0 0 15px var(--azul-electrico);
}

.cuadritos .nav-link {
  transform: skew(15deg); /* Revierte el skew para el texto */
  color: var(--blanco) !important;
}

/* TÍTULOS Y TEXTO */
.title {
  font-weight: 900;
  background: linear-gradient(90deg, var(--azul-electrico), var(--fucsia-energetico));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 10px rgba(138, 43, 226, 0.3);
  margin-bottom: 2rem;
}

.left-text p {
  color: var(--gris-texto);
  line-height: 1.8;
  font-size: 1.1rem;
}

/* CAROUSEL */
#demo {
  border: 3px solid var(--morado-neon);
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.4);
  border-radius: 15px;
  overflow: hidden;
}

/* FOOTER */
footer#contact-us {
  background-color: var(--gris-oscuro) !important;
  border-top: 4px solid var(--fucsia-energetico);
}

footer h2 {
  color: var(--fucsia-energetico) !important;
  font-weight: 800;
}

.social a i {
  transition: 0.3s;
}

.social a:hover i {
  color: var(--azul-electrico) !important;
  transform: translateY(-5px);
}

/* BOTONES DE ACCIÓN (LOGIN/VOTAR) */
.btn-primary, .votar-btn {
  background: linear-gradient(45deg, var(--morado-neon), var(--fucsia-energetico));
  border: none;
  border-radius: 5px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(255, 45, 149, 0.3);
}

.btn-primary:hover {
  filter: brightness(1.2);
  box-shadow: 0 4px 20px var(--fucsia-energetico);
}

/* SECCIÓN ENCUESTAS */
.encuestas .card {
  background-color: var(--gris-oscuro) !important;
  border: 1px solid var(--azul-electrico) !important;
}

.progress {
  background-color: #000;
  height: 10px;
}

.progress-bar {
  background-color: var(--azul-electrico);
}
/* Botón Hamburguesa Personalizado */
.custom-toggler {
    border: 1px solid var(--azul) !important;
    padding: 4px 8px;
}
.custom-toggler:focus { box-shadow: 0 0 10px var(--azul); }

/* Links */
.nav-link {
    color: #fff !important;
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 600;
    transition: 0.3s;
    text-align: center;
}

.nav-link:hover {
    color: var(--azul) !important;
    text-shadow: 0 0 8px var(--azul);
}

/* Botón Descargas (Neon Effect) */
.nav-download {
    border: 1px dashed var(--azul);
    border-radius: 5px;
    margin: 0 10px;
    background: rgba(0, 212, 255, 0.1);
}

/* --- BARRA DE JUEGOS (SOLUCIÓN MOBILE) --- */
.game-bar {
    background: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 0;
}

.game-scroll-wrapper {
    display: flex;
    overflow-x: auto; /* Permite scroll horizontal */
    white-space: nowrap;
    gap: 15px;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
}


/* Ocultar barra de scroll pero mantener funcionalidad */
.game-scroll-wrapper::-webkit-scrollbar { display: none; }

.game-item {
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 15px;
    border: 1px solid var(--azul);
    border-radius: 4px;
    transform: skew(-15deg);
    transition: 0.3s;
    background: rgba(0, 212, 255, 0.05);
}

.game-item:hover {
    background: var(--azul);
    color: #000;
    box-shadow: 0 0 15px var(--azul);
}



/* Ajustes para Móviles (Media Queries) */
@media (max-width: 991px) {
    .navbar-collapse {
        backdrop-filter: blur(10px);
        background: rgba(138, 43, 226, 0.3);
        margin-top: 15px;
        padding: 20px;
        border-radius: 10px;
        border: 1px solid var(--morado);
    }
    
    .nav-item {
        width: 100%;
        margin-bottom: 10px;
    }

    .nav-download {
        margin: 10px 0;
        padding: 12px;
    }
}