/* ==========================
   AritMind - Sumas
========================== */

:root{

    --bg:#111326;
    --card:#1A1E3B;
    --header:#1095A4;
    --cyan:#00E5FF;
    --text:#FFFFFF;
    --text2:#9DA7C7;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI",sans-serif;
}

body{

    background:linear-gradient(180deg,#111326,#161B33);

    color:white;

    min-height:100vh;

}

/* ==========================
HEADER
========================== */

header{

    height:70px;

    background:var(--header);

    display:flex;

    justify-content:center;

    align-items:center;

    position:sticky;

    top:0;

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

}

header h1{

    font-size:24px;

}

.volver{

    position:absolute;

    left:20px;

    color:white;

    text-decoration:none;

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    transition:.3s;

}

.volver:hover{

    background:rgba(255,255,255,.15);

}

/* ==========================
MAIN
========================== */

main{

    width:min(850px,92%);

    margin:auto;

    padding:40px 0;

}

/* ==========================
PROGRESO
========================== */

.progreso{

    margin-bottom:35px;

}

.barra{

    width:100%;

    height:12px;

    background:#2a315b;

    border-radius:50px;

    overflow:hidden;

}

.relleno{

    width:12.5%;

    height:100%;

    background:linear-gradient(90deg,#00E5FF,#4DFFFF);

    transition:.5s;

}

#contador{

    margin-top:10px;

    text-align:right;

    color:#9DA7C7;

}

/* ==========================
TARJETA
========================== */

.tarjeta{

    background:#1A1E3B;

    border:1px solid rgba(0,229,255,.25);

    border-radius:22px;

    padding:35px;

    min-height:350px;

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

}

.tarjeta h2{

    color:#00E5FF;

    margin-bottom:25px;

    font-size:30px;

}

.tarjeta p{

    line-height:1.9;

    color:#ffffff;

    margin-bottom:15px;

}

.tarjeta ul{

    margin-left:25px;

}

.tarjeta li{

    margin:12px 0;

}

.tarjeta img{

    width:100%;

    max-width:350px;

    display:block;

    margin:auto;

}

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

.botones{

    margin-top:35px;

    display:flex;

    justify-content:space-between;

}

.botones button{

    border:none;

    background:#00E5FF;

    color:#111326;

    padding:15px 28px;

    border-radius:40px;

    cursor:pointer;

    font-size:16px;

    font-weight:bold;

    display:flex;

    align-items:center;

    gap:8px;

    transition:.3s;

}

.botones button:hover{

    transform:translateY(-3px);

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

}

/* ==========================
ANIMACION
========================== */

.tarjeta{

    animation:aparecer .5s ease;

}

@keyframes aparecer{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:700px){

.tarjeta{

padding:25px;

}

.tarjeta h2{

font-size:25px;

}

.botones{

flex-direction:column;

gap:15px;

}

.botones button{

justify-content:center;

}

}