body{

    background:
    radial-gradient(
        circle at top,
        #0f172a,
        #020617
    );

    color:white;

    font-family:'Segoe UI',sans-serif;

    margin:0;

    padding:0;

}

/* TITULO */

h1{

    text-align:center;

    margin:30px 0 10px;

    font-size:3rem;

    font-weight:800;

    color:#60a5fa;

}

.subtitulo{

    text-align:center;

    color:#94a3b8;

    margin-bottom:30px;

}

/* DASHBOARD */

.dashboard-mundial{

    display:flex;

    justify-content:center;

    gap:25px;

    margin-bottom:40px;

    flex-wrap:wrap;

}

.stat-card{

    background:
    rgba(15,23,42,.85);

    border:
    1px solid rgba(59,130,246,.2);

    backdrop-filter:blur(12px);

    border-radius:18px;

    padding:25px 35px;

    min-width:170px;

    text-align:center;

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

}

.numero{

    font-size:3rem;

    font-weight:800;

    color:#38bdf8;

}

.texto{

    margin-top:10px;

    color:#cbd5e1;

    font-weight:600;

}

/* FILTROS FECHA */

.filtros-fecha{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-bottom:20px;

}

.filtros-fecha a{

    text-decoration:none;

    padding:12px 22px;

    border-radius:12px;

    font-weight:700;

    color:white;

    background:
    linear-gradient(
        90deg,
        #0ea5e9,
        #6366f1
    );

    transition:.3s;

}

.filtros-fecha a:hover{

    transform:translateY(-2px);

    box-shadow:
    0 0 20px rgba(59,130,246,.4);

}

/* FILTROS GRUPOS */

.filtros-grupos{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

    margin-bottom:35px;

}

.filtros-grupos a{

    text-decoration:none;

    background:#111827;

    color:#cbd5e1;

    padding:10px 18px;

    border-radius:12px;

    font-weight:600;

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

    transition:.3s;

}

.filtros-grupos a:hover{

    background:
    linear-gradient(
        90deg,
        #0ea5e9,
        #6366f1
    );

    color:white;

}

/* GRID PARTIDOS */

.grid-partidos{

    width:95%;

    margin:auto;

    display:grid;

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

    gap:25px;

    padding-bottom:50px;

}

/* TARJETAS */

.tarjeta-partido{

    background:
    rgba(15,23,42,.85);

    backdrop-filter:blur(12px);

    border-radius:20px;

    padding:25px;

    border:
    1px solid rgba(59,130,246,.15);

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

    transition:.3s;

}

.tarjeta-partido:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 0 35px rgba(59,130,246,.25);

}

/* GRUPO */

.grupo{

    text-align:center;

    margin-bottom:18px;

    font-weight:700;

    color:#f8fafc;

}

/* EQUIPOS */

.equipos{

    text-align:center;

}

.local,
.visitante{

    font-size:1.5rem;

    font-weight:800;

    color:white;

}

.vs{

    margin:15px 0;

    color:#60a5fa;

    font-weight:700;

}

/* FECHA */

.hora{

    text-align:center;

    margin:20px 0;

    color:#cbd5e1;

}

/* ESTADIO */

.estadio{

    text-align:center;

    margin-top:12px;

    font-size:14px;

    color:#cbd5e1;

}

.ciudad{

    text-align:center;

    margin-bottom:18px;

    font-size:13px;

    color:#94a3b8;

}

/* BOTON ANALIZAR */

.btn-analizar{

    display:block;

    text-align:center;

    text-decoration:none;

    color:white;

    font-weight:700;

    padding:14px;

    border-radius:12px;

    background:
    linear-gradient(
        90deg,
        #0ea5e9,
        #6366f1
    );

    transition:.3s;

}

.btn-analizar:hover{

    transform:translateY(-2px);

    box-shadow:
    0 0 25px rgba(59,130,246,.4);

}

/* BOTON VOLVER */

.barra-superior{

    width:95%;

    margin:25px auto;

}

.btn-volver{

    display:inline-block;

    text-decoration:none;

    color:white;

    font-weight:700;

    padding:12px 22px;

    border-radius:12px;

    background:
    rgba(15,23,42,.85);

    border:
    1px solid rgba(59,130,246,.2);

}

.btn-volver:hover{

    background:
    rgba(30,41,59,.95);

}

/* RESPONSIVE */

@media(max-width:768px){

    h1{

        font-size:2rem;

    }

    .local,
    .visitante{

        font-size:1.5rem;

    }

}

.filtros-grupos a.activo{

    background:
    linear-gradient(
        135deg,
        #38bdf8,
        #6366f1
    );

    color:white;

    border-color:
    rgba(255,255,255,.15);

    box-shadow:
    0 0 25px rgba(56,189,248,.35);

    transform:
    translateY(-2px);

}