/*=========================================
            AGRASKAR
=========================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Arial, Helvetica, sans-serif;

    background:#121212;

    color:white;

    overflow-x:hidden;

}

/*=============================
      CONTENEDOR GENERAL
=============================*/

.contenedor{

    display:flex;

    min-height:100vh;

}

/*=============================
      MENU LATERAL
=============================*/

.sidebar{

    position:fixed;

    left:0;

    top:0;

    width:270px;

    height:100vh;

    background:#1b1b1b;

    border-right:3px solid #2f80ed;
  
overflow-y:auto;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:30px;

    z-index:1000;

}

/*=============================
            LOGO
=============================*/

.logo{

    text-align:center;

}

.logo-icono{

    width:110px;
    height:110px;

    border-radius:50%;

    background:#2f80ed;

    display:flex;
    justify-content:center;
    align-items:center;

    margin:auto;
    margin-bottom:20px;

    box-shadow:0 0 25px #2f80ed;

    overflow:hidden;
}
.logo-icono img{

    width:90%;
    height:90%;

    object-fit:contain;

}
    display:flex;

    justify-content:center;

    align-items:center;

    font-size:45px;

    margin:auto;

    margin-bottom:20px;

    box-shadow:0 0 20px #2f80ed;

}

.logo h1{

    font-size:34px;

    margin-bottom:8px;

    letter-spacing:2px;

}

.logo p{

    color:#bdbdbd;

    font-size:14px;

}

/*=============================
           MENÚ
=============================*/

.sidebar nav{

    margin-top:40px;

}

.sidebar nav a{

    display:flex;

    align-items:center;

    gap:15px;

    text-decoration:none;

    color:white;

    padding:16px;

    margin-bottom:10px;

    border-radius:12px;

    transition:.30s;

    font-size:18px;

}

.sidebar nav a:hover{

    background:#2f80ed;

    transform:translateX(8px);

}

/*=============================
        BOTON OSCURO
=============================*/

.modo-btn{

    width:100%;

    margin-top:20px;

    background:#2f80ed;

    color:white;

    border:none;

    padding:16px;

    border-radius:12px;

    cursor:pointer;

    font-size:17px;

    transition:.3s;

}

.modo-btn:hover{

    background:#4b97ff;

    transform:scale(1.03);

}

/*=============================
      PARTE INFERIOR
=============================*/

.sidebar-bottom{

    text-align:center;

}

.sidebar-bottom h3{

    margin-bottom:20px;

    color:#bbbbbb;

}

.redes{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-bottom:25px;

}

.redes a{

    width:45px;

    height:45px;

    background:#2f80ed;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:20px;

    text-decoration:none;

    transition:.3s;

}

.redes a:hover{

    transform:scale(1.2);

    box-shadow:0 0 15px #2f80ed;

}

.contacto{

    display:inline-block;

    text-decoration:none;

    color:white;

    padding:12px 20px;

    border-radius:10px;

    background:#2f80ed;

    transition:.3s;

}

.contacto:hover{

    background:#4b97ff;

}

/*=============================
        CONTENIDO
=============================*/

.contenido{

    margin-left:270px;

    width:calc(100% - 270px);

    padding:45px;

}

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

.hero{

    background:linear-gradient(135deg,#1e3c72,#2a5298);

    padding:70px;

    border-radius:20px;

    margin-bottom:50px;

    text-align:center;

}

.hero h2{

    font-size:48px;

    margin-bottom:20px;

}

.hero p{

    font-size:20px;

    color:#eeeeee;

}

/*=============================
          SECCIONES
=============================*/

section{

    margin-bottom:70px;

}

section h2{

    font-size:34px;

    margin-bottom:25px;

}
/*=========================================
        TARJETAS DE JUEGOS
=========================================*/

.juegos{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

    margin-top:40px;

}

.tarjeta{

    background:#1f1f1f;

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 10px 25px rgba(0,0,0,.35);

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

}

.tarjeta:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(47,128,237,.45);

}

.tarjeta img{

    width:100%;

    height:220px;

    object-fit:cover;

    transition:.5s;

}

.tarjeta:hover img{

    transform:scale(1.08);

}

.tarjeta h3{

    font-size:26px;

    margin:20px;

}

.tarjeta p{

    margin:0 20px 25px;

    color:#d0d0d0;

    line-height:1.6;

}

.tarjeta a{

    display:block;

    margin:0 20px 25px;

    text-align:center;

    text-decoration:none;

    background:#2f80ed;

    color:white;

    padding:14px;

    border-radius:12px;

    font-weight:bold;

    transition:.3s;

}

.tarjeta a:hover{

    background:#4b97ff;

}

/*=========================================
        IMPRIMIBLES
=========================================*/

.imprimibles{

    background:#1b1b1b;

    padding:45px;

    border-radius:20px;

    border-left:6px solid #2f80ed;

}

.imprimibles p{

    color:#cccccc;

    margin-top:15px;

    line-height:1.7;

}

/*=========================================
        CONTACTO
=========================================*/

.contacto-section{

    background:#1b1b1b;

    padding:45px;

    border-radius:20px;

}

.contacto-section p{

    margin-top:15px;

    color:#dddddd;

}

/*=========================================
            FOOTER
=========================================*/

footer{

    margin-top:60px;

    text-align:center;

    padding:30px;

    color:#9d9d9d;

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

}

/*=========================================
        BARRA DE SCROLL
=========================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#151515;

}

::-webkit-scrollbar-thumb{

    background:#2f80ed;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#4b97ff;

}

/*=========================================
        ANIMACIONES
=========================================*/

@keyframes aparecer{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero,
.catalogo,
.imprimibles,
.contacto-section{

    animation:aparecer .8s ease;

}

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

@media(max-width:900px){

.sidebar{

    width:220px;

}

.contenido{

    margin-left:220px;

    width:calc(100% - 220px);

    padding:30px;

}

.hero{

    padding:45px;

}

.hero h2{

    font-size:36px;

}

}

@media(max-width:768px){

.sidebar{

    position:relative;

    width:100%;

    height:auto;

    border-right:none;

    border-bottom:3px solid #2f80ed;

}

.contenedor{

    flex-direction:column;

}

.contenido{

    margin-left:0;

    width:100%;

}

.sidebar nav{

    margin-top:25px;

}

.sidebar nav a{

    justify-content:center;

}

.redes{

    margin-top:20px;

}

.hero{

    padding:35px 20px;

}

.hero h2{

    font-size:30px;

}

section h2{

    font-size:28px;

}

.tarjeta img{

    height:200px;

}

}
/*=============================
      MODO CLARO
=============================*/

body.light{

    background:#f2f2f2;

    color:#222;

}

body.light .sidebar{

    background:white;

    border-right:3px solid #2f80ed;

}

body.light .tarjeta{

    background:white;

    color:#222;

}

body.light .tarjeta p{

    color:#555;

}

body.light .hero{

    background:linear-gradient(135deg,#6fb1fc,#4364f7);

}

body.light .imprimibles,
body.light .contacto-section{

    background:white;

}

body.light footer{

    color:#666;

}

body.light .sidebar nav a{

    color:#222;

}

body.light .logo p{

    color:#666;

}
/*=================================
            MODO CLARO
=================================*/

body.light{
    background:#f5f7fb;
    color:#222;
}

/* Sidebar */

body.light .sidebar{
    background:#ffffff;
    border-right:3px solid #2f80ed;
}

body.light .logo h1{
    color:#222;
}

body.light .logo p{
    color:#666;
}

body.light .sidebar nav a{
    color:#222;
}

body.light .sidebar nav a:hover{
    color:white;
}

body.light .sidebar-bottom h3{
    color:#444;
}

/* Hero */

body.light .hero{
    background:linear-gradient(135deg,#7ab6ff,#4b97ff);
}

/* Tarjetas */

body.light .tarjeta{
    background:white;
    color:#222;
}

body.light .tarjeta h3{
    color:#222;
}

body.light .tarjeta p{
    color:#555;
}

/* Secciones */

body.light .imprimibles,
body.light .contacto-section{
    background:white;
    color:#222;
}

/* Footer */

body.light footer{
    color:#666;
    border-top:1px solid #ddd;
}
/*=========================================
        CATEGORÍAS DE JUEGOS
=========================================*/


.subtitulo-juegos{

    margin-top:70px;

    margin-bottom:30px;

    font-size:32px;

    padding:18px 25px;

    border-radius:15px;

    display:flex;

    align-items:center;

    gap:15px;

    background:linear-gradient(
        90deg,
        rgba(47,128,237,.25),
        transparent
    );

    border-left:6px solid #2f80ed;

    animation:aparecer .8s ease;

}



/*=========================================
        JUEGOS PUBLICADOS
=========================================*/


.subtitulo-juegos:nth-of-type(1){

    border-left-color:#2f80ed;

    color:#5ca5ff;

}



/*=========================================
    JUEGOS BUSCANDO EDITORIAL
=========================================*/


.subtitulo-juegos:nth-of-type(2){

    border-left-color:#a855f7;

    color:#c084fc;

    background:linear-gradient(
        90deg,
        rgba(168,85,247,.25),
        transparent
    );

}



/*=========================================
            JUEGA ONLINE
=========================================*/


.subtitulo-juegos:nth-of-type(3){

    border-left-color:#22c55e;

    color:#4ade80;

    background:linear-gradient(
        90deg,
        rgba(34,197,94,.25),
        transparent
    );

}



/*=========================================
        TARJETAS PREMIUM
=========================================*/


.tarjeta{

    position:relative;

}



.tarjeta::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        #2f80ed,
        #a855f7
    );

}



.tarjeta:hover{

    transform:
    translateY(-12px)
    scale(1.02);

}



/*=========================================
        EFECTO LUZ
=========================================*/


.tarjeta:hover::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:18px;

    box-shadow:
    0 0 25px rgba(47,128,237,.5);

    pointer-events:none;

}



/*=========================================
        MODO CLARO
=========================================*/


body.light .subtitulo-juegos{

    background:#f1f5ff;

}

body.light .subtitulo-juegos:nth-of-type(2){

    background:#f5edff;

}

body.light .subtitulo-juegos:nth-of-type(3){

    background:#ecfff2;

}
/*=============================
       PAGINA DE JUEGO
=============================*/


.pagina-juego{

    max-width:1000px;

    margin:auto;

    padding:50px;

}



.pagina-juego h1{

    text-align:center;

    font-size:50px;

    margin:30px;

}



.volver{

    color:white;

    text-decoration:none;

    background:#2f80ed;

    padding:12px 20px;

    border-radius:12px;

}



.imagen-juego{

    display:block;

    width:80%;

    max-width:700px;

    margin:40px auto;

    border-radius:25px;

    box-shadow:0 15px 40px rgba(0,0,0,.5);

}



.descripcion-juego,
.ficha-tecnica{

    background:#1b1b1b;

    padding:35px;

    border-radius:20px;

    margin-top:40px;

}



.descripcion-juego p{

    line-height:1.8;

    color:#ddd;

}



.ficha-tecnica li{

    list-style:none;

    padding:12px;

    border-bottom:1px solid #333;

}



.botones-juego{

    display:flex;

    justify-content:center;

    gap:20px;

    margin:40px;

    flex-wrap:wrap;

}



.botones-juego a{

    background:#2f80ed;

    color:white;

    text-decoration:none;

    padding:15px 25px;

    border-radius:12px;

    transition:.3s;

}



.botones-juego a:hover{

    transform:translateY(-5px);

    box-shadow:0 10px 25px #2f80ed;

}
/*==================================================
            PLANTILLA DE JUEGO - AGRASKAR
==================================================*/

/* ---------- Banner ---------- */

.banner-juego{

    position:relative;

    height:350px;

    border-radius:25px;

    overflow:hidden;

    margin-bottom:40px;

    background-image:
        linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.75)),
        url("../imagenes/juegos/omelette-express-banner.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}



.banner-overlay{

    color:white;

    padding:30px;

}



.banner-overlay h1{

    font-size:58px;

    margin:20px 0 10px;

}



.subtitulo{

    font-size:22px;

    opacity:.9;

}



/* ---------- Estado ---------- */

.estado{

    display:inline-block;

    padding:10px 20px;

    border-radius:40px;

    font-weight:bold;

    font-size:14px;

    letter-spacing:1px;

}



.publicado{

    background:#18b65b;

    color:white;

}



/* ---------- Imagen ---------- */

.hero-juego{

    display:flex;

    justify-content:center;

    margin:50px 0;

}



.portada-juego{

    width:100%;

    max-width:900px;

    border-radius:25px;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

    transition:.35s;

}



.portada-juego:hover{

    transform:scale(1.02);

}



/* ---------- Información rápida ---------- */

.info-rapida{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));

    gap:20px;

    margin:50px 0;

}



.dato{

    background:var(--card-color,#ffffff);

    padding:25px;

    border-radius:18px;

    text-align:center;

    font-size:28px;

    box-shadow:0 10px 25px rgba(0,0,0,.10);

    transition:.3s;

}



.dato:hover{

    transform:translateY(-8px);

}



.dato span{

    display:block;

    margin-top:10px;

    font-size:15px;

    font-weight:bold;

}
/* =========================================
      PLANTILLA JUEGO AGRASKAR
========================================= */
/*=========================================
        PESTAÑAS DEL JUEGO
=========================================*/


.tabs{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin:40px 0;

    justify-content:center;

}


.tab-btn{

    background:#2f80ed;

    color:white;

    border:none;

    padding:15px 25px;

    border-radius:15px;

    cursor:pointer;

    font-size:16px;

    font-weight:bold;

    transition:.3s;

}


.tab-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 10px 25px rgba(47,128,237,.5);

}


.tab-btn.active{

    background:#4b97ff;

}



/*=========================================
        CONTENIDO PESTAÑAS
=========================================*/


.tab-content{

    display:none;

    background:#1b1b1b;

    padding:40px;

    border-radius:25px;

    margin-bottom:50px;

    animation:aparecer .5s ease;

}


.tab-content.active{

    display:block;

}



.tab-content h2{

    margin-bottom:30px;

}



/* MODO CLARO */

body.light .tab-content{

    background:white;

    color:#222;

}



/*=========================================
        TABLA FICHA
=========================================*/


.tabla-ficha{

    width:100%;

    border-collapse:collapse;

}


.tabla-ficha th{

    text-align:left;

    padding:15px;

    width:35%;

    color:#5ca5ff;

}


.tabla-ficha td{

    padding:15px;

    border-bottom:1px solid #444;

}



body.light .tabla-ficha td{

    border-bottom:1px solid #ddd;

}



/*=========================================
        GALERÍA
=========================================*/


.galeria{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

    margin-top:30px;

}


.galeria img{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:18px;

    transition:.3s;

}


.galeria img:hover{

    transform:scale(1.05);

}



/*=========================================
        BOTON PDF
=========================================*/


.boton-descarga{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:25px;

    background:#e63946;

    color:white;

    text-decoration:none;

    padding:15px 25px;

    border-radius:15px;

    font-weight:bold;

    transition:.3s;

}


.boton-descarga:hover{

    transform:translateY(-5px);

    box-shadow:0 10px 25px rgba(230,57,70,.5);

}



/*=========================================
        JUEGOS RELACIONADOS
=========================================*/


.relacionados{

    margin-top:60px;

}


.juegos-relacionados{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}


.tarjeta-relacionada{

    background:#1f1f1f;

    border-radius:18px;

    overflow:hidden;

    padding-bottom:20px;

}


.tarjeta-relacionada img{

    width:100%;

    height:180px;

    object-fit:cover;

}


.tarjeta-relacionada h3,
.tarjeta-relacionada p{

    margin:15px;

}


.tarjeta-relacionada a{

    display:block;

    margin:15px;

    text-align:center;

    padding:12px;

    background:#2f80ed;

    color:white;

    text-decoration:none;

    border-radius:10px;

}


body.light .tarjeta-relacionada{

    background:white;

    color:#222;

}
/*=========================================
        GALERÍA PROFESIONAL
=========================================*/


.imagen-galeria{

    cursor:pointer;

}


.visor-imagen{

    display:none;

    position:fixed;

    z-index:2000;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.85);

    justify-content:center;

    align-items:center;

}


.visor-imagen img{

    max-width:85%;

    max-height:85%;

    border-radius:20px;

    box-shadow:0 0 40px black;

}


.visor-imagen.activo{

    display:flex;

}


.cerrar{

    position:absolute;

    top:40px;

    right:60px;

    color:white;

    font-size:40px;

    cursor:pointer;

}
/*=================================
        MENU JUEGOS DESPLEGABLE
=================================*/
/* MENU DESPLEGABLE JUEGOS */

.submenu-juegos{

    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;

}


.menu-juegos.activo .submenu-juegos{

    max-height:200px;

}


.juegos-btn{

    background:none;
    border:none;
    color:white;
    width:100%;
    display:flex;
    align-items:center;
    gap:15px;
    padding:16px;
    font-size:18px;
    cursor:pointer;
    border-radius:12px;

}


.juegos-btn:hover{

    background:#2f80ed;

}


.flecha{

    margin-left:auto;

    transition:.3s;

}


.menu-juegos.activo .flecha{

    transform:rotate(180deg);

}
/*=================================
      MENU JUEGOS DESPLEGABLE FIX
=================================*/


.menu-juegos{
    width:100%;
}


.juegos-btn{

    width:100%;

    display:flex;

    align-items:center;

    gap:15px;

    background:none;

    border:none;

    color:white;

    padding:16px;

    font-size:18px;

    cursor:pointer;

    border-radius:12px;

}


.juegos-btn:hover{

    background:#2f80ed;

}


.flecha{

    margin-left:auto;

    transition:.3s;

}



.submenu-juegos{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

    padding-left:15px;

}



.submenu-juegos a{

    display:block;

    color:#cccccc;

    text-decoration:none;

    padding:12px;

    font-size:15px;

    border-radius:10px;

}



.submenu-juegos a:hover{

    background:#2f80ed;

    color:white;

}



/* CUANDO SE ABRE */

.menu-juegos.activo .submenu-juegos{

    max-height:250px;

}



.menu-juegos.activo .flecha{

    transform:rotate(180deg);

}
/* PRUEBA MENU JUEGOS */

.submenu-juegos{

    display:none;

}


.menu-juegos.activo .submenu-juegos{

    display:block;

}
.menu-juegos.activo .submenu-juegos{

    display:block !important;

}


.submenu-juegos{

    display:none;

    background:#222;

    border-radius:10px;

    margin-top:5px;

}


.submenu-juegos a{

    display:block;

    padding:12px;

}
/*=================================
      DESPLEGABLE JUEGOS FIX
=================================*/


.menu-juegos{

    width:100%;

}


.submenu-juegos{

    display:none;

    margin-top:5px;

    padding-left:15px;

}



.menu-juegos.activo .submenu-juegos{

    display:block;

}



.submenu-juegos a{

    display:block;

    color:white;

    text-decoration:none;

    padding:12px;

    border-radius:10px;

    font-size:15px;

}



.submenu-juegos a:hover{

    background:#2f80ed;

}



/* MODO CLARO */

body.light .submenu-juegos a{

    color:#222;

}
/* FLECHA MENU JUEGOS */

.flecha{

    margin-left:auto;

    transition:.3s ease;

}


.menu-juegos.activo .flecha{

    transform:rotate(180deg);

}
/* ESTILO SUBMENU */

.submenu-juegos{

    background:rgba(47,128,237,.10);

    border-radius:12px;

    margin-top:8px;

    padding:8px;

}


.submenu-juegos a{

    transition:.3s;

}


.submenu-juegos a:hover{

    transform:translateX(8px);

}
/* MODO CLARO MENU LATERAL */


body.light .juegos-btn{

    color:#222;

}


body.light .modo-btn{

    background:#2f80ed;

    color:white;

}


body.light .modo-btn:hover{

    background:#4b97ff;

}

/*=================================
      SUBMENU JUEGOS MEJORADO
=================================*/


.submenu-juegos{

    padding-left:10px;

    margin-bottom:15px;

}


.submenu-juegos a{

    font-size:15px;

    padding:12px;

}