/* ==========================================================
   NOSTALGIA ARCADE
   STYLE.CSS v3.0
   ========================================================== */

/* ==========================================================
   VARIABLES
   ========================================================== */

:root{

    --bg:#111;
    --panel:#1b1b1b;

    --border:#333;

    --text:#ffffff;
    --text-soft:#cfcfcf;
    --text-muted:#bdbdbd;
    --text-dark:#555;
    --text-empty:#999;

    --yellow:#ffd400;
    --orange:#ffb347;
    --red:#ff5a5a;
    --blue:#5db7ff;
    --green:#6ee16e;
    --purple:#d48bff;

    --radius-card:16px;
    --radius-button:10px;
    --radius-input:12px;

    --transition:.25s;

}

/* ==========================================================
   RESET
   ========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    background:var(--bg);
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;

}

/* ==========================================================
   CABECERA
   ========================================================== */

header{

    background:var(--panel);
    border-bottom:3px solid var(--border);
    padding:28px 20px;

}

.logo{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;

}

.logo img{

    width:90px;

}

.logo-info{

    text-align:left;

}

.game-counter{

    color:var(--yellow);
    font-size:17px;
    font-weight:bold;
    margin-bottom:10px;

}

.last-update{

    color:#8d8d8d;
    font-size:14px;
    margin-bottom:18px;

}

.logo h1{

    color:var(--yellow);
    font-size:42px;
    margin-bottom:6px;

}

.logo p{

    color:var(--text-soft);

}

/* ==========================================================
   BUSCADOR
   ========================================================== */

.busqueda{

    padding:30px;
    text-align:center;

}

#searchInput{

    width:90%;
    max-width:700px;

    padding:18px;

    border:none;
    outline:none;

    border-radius:var(--radius-input);

    font-size:18px;

    background:white;

}

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

.top-menu{

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

    gap:18px;

    margin-bottom:35px;

    font-size:15px;

}

.top-menu span{

    color:var(--text-dark);

}

.top-menu a{

    position:relative;

    color:var(--text-muted);

    text-decoration:none;

    padding-bottom:4px;

    transition:var(--transition);

}

.top-menu a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;
    height:2px;

    background:currentColor;

    transition:var(--transition);

}

.top-menu a:hover::after{

    width:100%;

}

.top-menu a:nth-child(1):hover{

    color:var(--blue);

}

.top-menu a:nth-child(3):hover{

    color:var(--yellow);

}

.top-menu a:nth-child(5):hover{

    color:var(--green);

}

/* ==========================================================
   CATEGORÍAS
   ========================================================== */

.categorias{

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

    gap:28px;

    padding:15px 30px 40px;

}

.category{

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

    gap:8px;

    min-width:80px;

    background:none;
    border:none;

    cursor:pointer;

    transition:var(--transition);

}

.category:hover,
.category.active{

    transform:translateY(-4px);

}

.category img{

    height:58px;

    transition:var(--transition);

}

.category:hover img,
.category.active img{

    transform:scale(1.10);

}

.texto{

    font-size:14px;
    font-weight:bold;
    letter-spacing:.5px;

}

/* ==========================================================
   COLORES
   ========================================================== */

.blanco{color:white;}
.amarillo{color:var(--yellow);}
.naranja{color:var(--orange);}
.rojo{color:var(--red);}
.azul{color:var(--blue);}
.verde{color:var(--green);}
.morado{color:var(--purple);}

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

.contenedor{

    width:92%;
    max-width:1300px;
    margin:auto;

}

.contenedor h2{

    text-align:center;

    color:var(--yellow);

    font-size:34px;

    margin-bottom:35px;

    letter-spacing:1px;

}

/* ==========================================================
   GRID
   ========================================================== */

.grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));

    gap:30px;

}

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

.card{

    display:flex;
    flex-direction:column;

    overflow:hidden;

    background:var(--panel);

    border-radius:var(--radius-card);

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

    transition:.30s;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 0 30px rgba(255,212,0,.20);

}

.card img{

    width:100%;
    display:block;

    transition:.35s;

}

.card:hover img{

    transform:scale(1.03);

}

.card-content{

    display:flex;
    flex-direction:column;

    flex:1;

    padding:20px;

}

.card h3{

    color:white;

    font-size:24px;

    margin-bottom:12px;

}

.game-category{

    font-size:15px;
    font-weight:bold;

    margin-bottom:14px;

}

.game-date{

    color:var(--text-soft);

    margin-bottom:10px;

}

.players{

    color:var(--text-soft);

    margin-bottom:20px;

}

/* ==========================================================
   BOTÓN
   ========================================================== */

.download{

    display:block;

    width:100%;

    margin-top:auto;

    padding:14px;

    text-align:center;

    text-decoration:none;

    background:var(--yellow);

    color:black;

    border-radius:var(--radius-button);

    font-weight:bold;

    transition:var(--transition);

}

.download:hover{

    background:white;

    transform:translateY(-2px);

}

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

footer{

    margin-top:80px;

    padding:40px 20px;

    text-align:center;

    background:var(--panel);

    color:var(--text-muted);

    border-top:2px solid var(--border);

}

.footer-links{

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

    gap:14px;

    margin-bottom:22px;

}

.footer-links span{

    color:var(--text-dark);

}

.footer-links a{

    color:var(--text-muted);

    text-decoration:none;

    transition:var(--transition);

}

.footer-links a:first-child:hover{

    color:#ff3030;

}

.footer-links a:last-child:hover{

    color:var(--blue);

}

footer p{

    margin:8px 0;

}

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

@media (max-width:900px){

    .logo{

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

    }

    .logo-info{

        text-align:center;

    }

    .logo h1{

        font-size:34px;

    }

    .game-counter{

        font-size:16px;

    }

    .last-update{

        font-size:13px;

    }

    .top-menu{

        gap:10px;
        font-size:14px;

    }

    .categorias{

        gap:18px;

    }

    .category img{

        height:48px;

    }

    .texto{

        font-size:13px;

    }

    .grid{

        grid-template-columns:repeat(auto-fill,minmax(180px,1fr));

        gap:22px;

    }

    .card h3{

        font-size:20px;

    }

    .download{

        padding:12px;

    }
   /* =====================================================
   PÁGINA EL PROYECTO
===================================================== */

.project-page{

    max-width:900px;
    margin:0 auto 80px;

}

.project-hero{

    text-align:center;

    padding:20px 0 70px;

}

.project-hero h2{

    margin-bottom:25px;

}

.hero-text{

    font-size:28px;
    font-weight:bold;

    color:var(--yellow);

    margin-bottom:20px;

}

.project-hero p{

    color:var(--text-soft);

    line-height:1.9;

    font-size:18px;

}

.hero-slogan{

    margin-top:45px;

    font-size:34px;

    font-weight:bold;

    line-height:1.5;

    color:var(--yellow);

    letter-spacing:1px;

}

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

.project-section{

    background:var(--panel);

    border-radius:18px;

    padding:40px;

    margin-bottom:45px;

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

}

.project-section h3{

    color:var(--yellow);

    font-size:28px;

    margin-bottom:30px;

}

.project-section p{

    line-height:1.9;

    color:var(--text-soft);

    margin-bottom:22px;

    font-size:17px;

}

/* =====================================================
   LÍNEA DECORATIVA
===================================================== */

.section-line{

    width:70px;

    height:4px;

    background:var(--yellow);

    border-radius:50px;

    margin-bottom:22px;

}

/* =====================================================
   BLOQUE DESTACADO
===================================================== */

.project-highlight{

    background:#252525;

    border-left:5px solid var(--yellow);

    padding:22px 25px;

    margin:35px 0;

    border-radius:12px;

    line-height:2;

    font-size:18px;

    color:white;

}

/* =====================================================
   BOTÓN WINDOWS
===================================================== */

.project-button{

    margin-top:40px;

    text-align:center;

}

.project-button .download{

    display:inline-block;

    width:auto;

    padding:16px 38px;

}

/* =====================================================
   LISTA
===================================================== */

.project-list{

    margin:35px 0;

}

.project-list p{

    margin-bottom:14px;

    font-size:18px;

}

/* =====================================================
   DESPEDIDA
===================================================== */

.project-final{

    text-align:center;

}

.project-final p{

    max-width:700px;

    margin:0 auto 24px;

}

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

@media (max-width:900px){

    .project-section{

        padding:28px;

    }

    .project-section h3{

        font-size:24px;

    }

    .hero-text{

        font-size:24px;

    }

    .hero-slogan{

        font-size:28px;

    }

}

}

.footer-donate{
    margin:18px auto 25px;
    max-width:700px;
    color:#bdbdbd;
    line-height:1.8;
    font-size:15px;
}

.footer-donate a{
    color:#ffd400;
    text-decoration:none;
    font-weight:bold;
    transition:.25s;
}

.footer-donate a:hover{
    color:white;
}