/* ===========================
   TABLETS
=========================== */

@media (max-width: 992px){

    .hero-content h1{
        font-size:56px;
    }

    .hero-content p{
        font-size:20px;
    }

}

/* ===========================
   CELULARES
=========================== */

@media (max-width:768px){

    /* HEADER */

   /* Ocultar botón Discord en celular */

.discord-btn{
    display: none;
}

    .menu-toggle{
        display:block;
    }

   .header-actions{

    display:flex;

    align-items:center;

    gap:12px;

}

    header .container{
        height:80px;
    }

    .logo{
        display:flex;
        align-items:center;
        gap:12px;
        font-size:24px;
    }

    .logo img{
        width:48px;
        height:48px;
        object-fit:contain;
    }

    #navbar{

        position:absolute;
        top:80px;
        left:0;

        width:100%;

        background:#0f172a;

        display:none;

        border-top:1px solid rgba(255,255,255,.1);

    }

    #navbar.active{
        display:block;
    }

    .nav-links{

        flex-direction:column;
        gap:0;

    }

    .nav-links li{

        border-bottom:1px solid rgba(255,255,255,.08);

    }

    .nav-links a{

        display:block;
        padding:18px 25px;

    }

    /* HERO */

    #home{

        padding:140px 20px 80px;

    }

    .hero-content h1{

        font-size:42px;

    }

    .hero-content p{

        font-size:18px;

    }

    .hero-buttons{

        flex-direction:column;
        align-items:center;
        gap:15px;

    }

    .hero-buttons a,
    .hero-content button{

        width:100%;
        max-width:320px;

    }

    /* GAMES */

    .games-grid{

        grid-template-columns:1fr;

    }

    /* ABOUT */

    .about-grid{

        grid-template-columns:1fr;

    }

    /* STATS */

    .stats-grid{

        grid-template-columns:1fr;

    }

    /* COMMUNITY */

    .community-grid{

        grid-template-columns:1fr;

    }

    /* CONTACT */

    .contact-grid{

        grid-template-columns:1fr;

    }

    /* FOOTER */

    .footer-grid{

        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;

        gap:45px;

    }

    .footer-brand,
    .footer-links,
    .footer-social{

        width:100%;
        max-width:320px;

    }

    .footer-brand img{

        display:block;
        margin:0 auto 20px;

    }

    .footer-brand p{

        margin:15px auto;

    }

    .footer-links a,
    .footer-social a{

        display:block;
        margin:10px 0;

    }

    .footer-bottom{

        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:10px;

    }

}

/* ===========================
   CELULARES PEQUEÑOS
=========================== */

@media (max-width:480px){

    .logo{

        font-size:20px;

    }

    .logo img{

        width:42px;
        height:42px;

    }

    .hero-content h1{

        font-size:34px;

    }

    .hero-content p{

        font-size:16px;

    }

    .section-title h2{

        font-size:36px;

    }

    section h2{

        font-size:34px;

    }

}

/* =========================
   HERO RESPONSIVE
========================= */

@media (max-width:768px){

    .hero-content{

        flex-direction:column-reverse;
        text-align:center;
        gap:40px;

    }

    .hero-image img{

        max-width:220px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-text h1{

        font-size:48px;

    }

    .hero-text p{

        font-size:18px;

    }

}

/* =========================
   FEATURED RESPONSIVE
========================= */

@media (max-width:768px){

    .featured-card{

        flex-direction:column-reverse;

        text-align:center;

        padding:35px;

    }

    .featured-info h2{

        font-size:38px;

    }

    .featured-buttons{

        justify-content:center;

    }

}

/* =========================
   STATUS BAR RESPONSIVE
========================= */

@media (max-width:768px){

    .status-bar .container{

        flex-direction:column;
        gap:12px;

        text-align:center;

    }

    .status-bar span{

        font-size:14px;

    }

}

/* =========================
   NEWS RESPONSIVE
========================= */

@media (max-width:768px){

    .news-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .game-card > img{

        height:200px;
        min-height:200px;

    }

    .game-card .game-info{

        padding:22px;

    }

}

/* ==========================================
   USER PANEL / PROFILE - MOBILE
========================================== */

@media(max-width:600px){

    #user-menu{

        width:
            calc(100vw - 20px);

        left:10px !important;

        right:10px;

    }


    #profile-modal{

        padding:12px;

        align-items:center;

    }


    .profile-card{

        width:100%;

        max-height:
            calc(100vh - 24px);

        padding:24px 18px;

        border-radius:18px;

    }


    .profile-info > div{

        align-items:flex-start;

        flex-direction:column;

        gap:4px;

    }


    .profile-info strong{

        text-align:left;

    }

}