:root{

    --bg-main:#111326;

    --bg-card:#1a1e3b;

    --header-bg:#1095a4;

    --accent-cyan:#00e5ff;

    --text-main:#ffffff;

    --text-muted:#8c93b6;

    --border-line:#2d3359;

}


*{

    margin:0;
    padding:0;

    box-sizing:border-box;

    font-family:
    'Segoe UI',
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;

}


html{

    scroll-behavior:smooth;

}


body{

    background:var(--bg-main);

    color:var(--text-main);

    min-height:100vh;

}


header{

    height:65px;

    background:var(--header-bg);

    display:flex;

    align-items:center;

    justify-content:center;

    position:sticky;

    top:0;

    z-index:10;

    box-shadow:
    0 4px 12px rgba(0,0,0,.3);

}


header h1{

    font-size:20px;

}


.volver{

    position:absolute;

    left:15px;

    width:40px;
    height:40px;

    border-radius:50%;

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

    color:white;

    text-decoration:none;

    display:flex;

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

}


main{

    width:100%;

    max-width:600px;

    margin:auto;

    padding:
    20px
    0
    40px;

}


.progreso{

    width:92%;

    height:7px;

    margin:auto;

    background:#252f5a;

    border-radius:20px;

    overflow:hidden;

}


.barra{

    height:100%;

    width:0%;

    background:var(--accent-cyan);

    border-radius:20px;

    transition:width .3s ease;

}


.contador{

    width:92%;

    margin:
    10px auto;

    text-align:right;

    color:var(--text-muted);

    font-size:13px;

}


.leccion{

    width:92%;

    margin:20px auto;

    padding:25px 20px;

    min-height:430px;

    background:var(--bg-card);

    border:
    1px solid
    var(--accent-cyan);

    border-radius:17px;

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

}


.leccion h2{

    color:var(--accent-cyan);

    text-align:center;

    font-size:22px;

    margin-bottom:22px;

}


.leccion p{

    color:var(--text-muted);

    font-size:15px;

    line-height:1.7;

}


.leccion strong{

    color:white;

}


.leccion h3{

    color:white;

    margin-bottom:8px;

}


.leccion ul,
.leccion ol{

    padding-left:22px;

}


.leccion li{

    color:var(--text-muted);

    margin:
    9px 0;

    line-height:1.5;

}


.navegacion{

    width:92%;

    margin:auto;

    display:flex;

    gap:10px;

}


.navegacion button{

    flex:1;

    min-height:52px;

    border:none;

    border-radius:14px;

    background:#252f5a;

    color:white;

    font-size:15px;

    font-weight:bold;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    cursor:pointer;

    transition:.2s;

}


.navegacion button:last-child{

    background:var(--header-bg);

}


.navegacion button:hover{

    transform:translateY(-2px);

}


.navegacion button:disabled{

    opacity:.35;

    cursor:not-allowed;

    transform:none;

}


@media(max-width:450px){

    .leccion{

        min-height:400px;

        padding:22px 17px;

    }


    .leccion h2{

        font-size:20px;

    }


    .navegacion button{

        font-size:14px;

    }

}