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

:root{
    --fondo:#f4f7fb;
    --panel:rgba(255,255,255,0.7);
    --texto:#111827;
    --boton:#52e0d5;
    --sombra:#52e0d5;
}

@media (prefers-color-scheme: dark){

    :root{
        --fondo:#020617;
        --panel:rgba(10,15,30,0.65);
        --texto:#ffffff;
        --boton:#52e0d5;
        --sombra:#52e0d5;
    }
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    min-height:100vh;

    overflow-y:auto;
    overflow-x:hidden;

    background:var(--fondo);

    color:var(--texto);

    position:relative;
}

/* ========================= */
/* SCROLL */
/* ========================= */

body::-webkit-scrollbar{
    width:8px;
}

body::-webkit-scrollbar-thumb{
    background:var(--boton);
    border-radius:20px;
}

body::-webkit-scrollbar-track{
    background:transparent;
}

/* ========================= */
/* FONDO */
/* ========================= */

.bg{
    position:fixed;

    width:100%;
    height:100%;

    top:0;
    left:0;

    background:
    radial-gradient(circle at top left,#52e0d5 0%,transparent 25%),
    radial-gradient(circle at top right,#ffb35c 0%,transparent 20%),
    radial-gradient(circle at bottom left,#ff8aa0 0%,transparent 20%),
    radial-gradient(circle at bottom right,#b58cff 0%,transparent 25%),
    var(--fondo);

    filter:blur(40px);

    z-index:-1;
}

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

.container{
    width:100%;
    min-height:100vh;

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

    padding:30px 20px;
}

/* ========================= */
/* CARD */
/* ========================= */

.menu-card{
    width:100%;
    max-width:650px;

    padding:40px;

    border-radius:35px;

    background:var(--panel);

    backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,0.15);

    box-shadow:
    0 0 40px rgba(82,224,213,0.3);

    text-align:center;

    animation:flotar 4s ease-in-out infinite;
}

@keyframes flotar{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }
}

/* ========================= */
/* TEXTOS */
/* ========================= */

.menu-card h1{
    font-size:2.5rem;

    margin-bottom:10px;

    color:var(--texto);
}

.menu-card p{
    color:var(--boton);

    margin-bottom:35px;

    font-size:1rem;
}

.perfil-activo{
    margin:-18px 0 26px !important;
    padding:10px 14px;
    border:1px solid rgba(82,224,213,0.28);
    border-radius:14px;
    background:rgba(82,224,213,0.1);
    color:var(--texto) !important;
    font-size:0.9rem !important;
}

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

.grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;
}

/* ========================= */
/* BOTONES */
/* ========================= */

.grid button{
    min-height:150px;

    border:none;

    border-radius:28px;

    cursor:pointer;

    background:var(--panel);

    backdrop-filter:blur(15px);

    color:var(--texto);

    font-size:2rem;

    transition:0.3s;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:12px;

    border:2px solid rgba(82,224,213,0.3);

    box-shadow:
    0 0 10px rgba(82,224,213,0.2),
    inset 0 0 10px rgba(255,255,255,0.05);
}

.grid button span{
    font-size:1rem;

    font-weight:500;
}

.grid button .menu-icon{
    min-width:48px;
    color:var(--boton);
    font-size:1.05rem;
    letter-spacing:0.04em;
}

.grid button small{
    max-width:190px;
    color:rgba(255,255,255,0.65);
    font-size:0.76rem;
    line-height:1.35;
}

.grid button:disabled{
    cursor:not-allowed;
    opacity:0.58;
    filter:saturate(0.55);
}

.grid button:disabled:hover{
    transform:none;
    box-shadow:
    0 0 10px rgba(82,224,213,0.2),
    inset 0 0 10px rgba(255,255,255,0.05);
}

.grid button:hover{
    transform:translateY(-5px);

    box-shadow:
    0 0 10px #52e0d5,
    0 0 25px rgba(82,224,213,0.7),
    0 0 40px rgba(82,224,213,0.4);
}

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

@media(max-width:700px){

    .grid{
        grid-template-columns:1fr;
    }

    .menu-card{
        padding:30px 20px;
    }

    .menu-card h1{
        font-size:2rem;
    }

    .grid button{
        min-height:130px;
    }
}