/*=========================================================
    ZONA ARCADE
=========================================================*/

.arcade-main{

    min-height:calc(100vh - 260px);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

.gamificacion-arcade{

    margin-top:24px;

}

.gamificacion-arcade .puntos-gamificacion,
.gamificacion-arcade .recompensas-gamificacion{

    width:100%;

    margin:0;

    box-shadow:none;

}

.gamificacion-arcade .puntos-gamificacion{

    margin-bottom:18px;

    padding:0 0 18px;

    border-bottom:1px solid #e5e7eb;

}

.gamificacion-arcade .recompensas-gamificacion{

    padding:0;

}

.arcade-card{

    width:min(680px,100%);

    background:white;

    border-radius:15px;

    padding:36px;

    box-shadow:var(--sombra);

    text-align:center;

    animation:fade .5s;

}

.arcade-card h2{

    color:var(--colorPrincipal);

    font-size:32px;

    margin-bottom:28px;

}

.arcade-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.arcade-btn{

    min-height:70px;

    padding:16px;

    border-radius:12px;

    background:var(--colorPrincipal);

    color:white;

    font-size:18px;

    font-weight:bold;

    box-shadow:0 8px 18px rgba(0,0,0,.16);

    transition:.25s;

}

.arcade-btn:hover{

    background:var(--colorSecundario);

    transform:translateY(-3px);

}

.arcade-mensaje{

    min-height:24px;

    margin-top:24px;

    color:var(--colorPrincipal);

    font-weight:bold;

}

@media(max-width:768px){

    .arcade-main{

        min-height:auto;

        align-items:flex-start;

        padding:18px 0 28px;

    }

    .arcade-card{

        padding:26px 22px;

        border-radius:12px;

    }

    .arcade-card h2{

        font-size:26px;

    }

    .arcade-grid{

        gap:14px;

    }

    .arcade-btn{

        min-height:62px;

        font-size:16px;

    }

}

@media(max-width:480px){

    .arcade-grid{

        grid-template-columns:1fr;

    }

    .arcade-card{

        padding:22px 16px;

    }

}

@media(hover:none){

    .arcade-btn:hover{

        transform:none;

    }

}