/* ==================================================
   CONFIGURACIÓN GENERAL
================================================== */

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


body {

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        #f7f1ff;

    color:
        #333;

}


/* ==================================================
   ENCABEZADO
================================================== */

.encabezado {

    height: 80px;

    background:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 6%;

    box-shadow:
        0 4px 20px
        rgba(
            70,
            30,
            100,
            .10
        );

    position:
        sticky;

    top:
        0;

    z-index:
        20;

}


.volver {

    text-decoration:
        none;

    color:
        #7627bd;

    font-weight:
        700;

}


.logo {

    font-size:
        25px;

    font-weight:
        800;

    color:
        #7627bd;

}


.etiqueta {

    background:
        #eee0ff;

    color:
        #7627bd;

    padding:
        9px 18px;

    border-radius:
        20px;

    font-weight:
        700;

}


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

.contenedor {

    width:
        90%;

    max-width:
        1150px;

    margin:
        45px auto 100px;

}


/* ==================================================
   INTRO
================================================== */

.intro {

    text-align:
        center;

    margin-bottom:
        30px;

}


.linea {

    width:
        75px;

    height:
        5px;

    background:
        #9d4edd;

    border-radius:
        20px;

    margin:
        0 auto 15px;

}


.intro h1 {

    font-size:
        38px;

    color:
        #7627bd;

    margin-bottom:
        10px;

}


.intro p {

    color:
        #777;

    max-width:
        700px;

    margin:
        auto;

    line-height:
        1.6;

}


/* ==================================================
   SELECTOR
================================================== */

.selector-tiempo {

    display:
        flex;

    justify-content:
        center;

    gap:
        12px;

    margin-bottom:
        25px;

}


.tiempo {

    padding:
        12px 25px;

    border-radius:
        25px;

    background:
        white;

    color:
        #888;

    font-weight:
        700;

    box-shadow:
        0 5px 15px
        rgba(
            80,
            30,
            120,
            .08
        );

}


.tiempo.activo {

    background:
        #7627bd;

    color:
        white;

}


/* ==================================================
   ZONA PRINCIPAL
================================================== */

.zona-conversacion {

    background:
        white;

    border-radius:
        35px;

    padding:
        30px;

    display:
        grid;

    grid-template-columns:
        360px 1fr;

    gap:
        30px;

    box-shadow:
        0 12px 35px
        rgba(
            80,
            30,
            120,
            .10
        );

}


/* ==================================================
   LÉO
================================================== */

.zona-leo {

    background:
        linear-gradient(
            145deg,
            #f0e2ff,
            #faf6ff
        );

    border-radius:
        28px;

    padding:
        25px;

    text-align:
        center;

}


.leo-circulo {

    width:
        250px;

    height:
        250px;

    margin:
        0 auto 15px;

    background:
        #ead8ff;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;

    transition:
        .3s;

}


.leo-aura {

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    border-radius:
        50%;

    background:
        rgba(
            157,
            78,
            221,
            .15
        );

}


#leo {

    width:
        220px;

    height:
        220px;

    object-fit:
        contain;

    position:
        relative;

    z-index:
        2;

    animation:
        flotar 3s
        ease-in-out
        infinite;

}


@keyframes flotar {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-8px);

    }

}


/* ANIMACIÓN CUANDO LÉO HABLA */

.leo-circulo.hablando {

    transform:
        scale(1.04);

    box-shadow:
        0 0 35px
        rgba(
            157,
            78,
            221,
            .45
        );

}


.leo-circulo.hablando
#leo {

    animation:
        hablar 0.45s
        infinite alternate;

}


@keyframes hablar {

    from {

        transform:
            translateY(0)
            rotate(-1deg);

    }

    to {

        transform:
            translateY(-5px)
            rotate(1deg);

    }

}


.zona-leo h2 {

    color:
        #7627bd;

    font-size:
        28px;

}


.estado-leo {

    color:
        #777;

    font-size:
        14px;

    margin:
        6px 0 18px;

}


/* ==================================================
   BURBUJA DE LÉO
================================================== */

.burbuja-leo {

    background:
        white;

    border:
        2px solid
        #e8d5ff;

    border-radius:
        20px;

    padding:
        18px;

    color:
        #4f2870;

    line-height:
        1.6;

    text-align:
        left;

    margin-bottom:
        15px;

}


.btn-secundario {

    border:
        2px solid
        #7627bd;

    background:
        white;

    color:
        #7627bd;

    padding:
        11px 17px;

    border-radius:
        22px;

    font-weight:
        700;

    cursor:
        pointer;

}


/* ==================================================
   ZONA ESTUDIANTE
================================================== */

.zona-estudiante {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

}


/* ==================================================
   AYUDA
================================================== */

.ayuda-respuesta {

    background:
        #faf7ff;

    border:
        2px solid
        #eadcff;

    border-radius:
        25px;

    padding:
        23px;

}


.titulo-ayuda {

    display:
        flex;

    gap:
        12px;

    align-items:
        center;

    margin-bottom:
        18px;

}


.titulo-ayuda span {

    font-size:
        32px;

}


.titulo-ayuda h2 {

    color:
        #7627bd;

    font-size:
        21px;

}


.titulo-ayuda p {

    color:
        #777;

    margin-top:
        4px;

    font-size:
        14px;

}


/* ==================================================
   RESPUESTA
================================================== */

.respuesta-guia {

    background:
        white;

    border-radius:
        20px;

    padding:
        22px;

    text-align:
        center;

    color:
        #7627bd;

    font-size:
        25px;

    font-weight:
        800;

    box-shadow:
        0 5px 15px
        rgba(
            80,
            30,
            120,
            .06
        );

}


.traduccion {

    text-align:
        center;

    color:
        #888;

    font-size:
        14px;

    margin:
        10px 0 15px;

}


.btn-escuchar {

    width:
        100%;

    border:
        none;

    background:
        #7627bd;

    color:
        white;

    padding:
        14px;

    border-radius:
        23px;

    font-weight:
        700;

    font-size:
        15px;

    cursor:
        pointer;

}


/* ==================================================
   MICROFONO
================================================== */

.zona-microfono {

    background:
        white;

    border:
        2px solid
        #eee;

    border-radius:
        25px;

    text-align:
        center;

    padding:
        25px;

}


.icono-micro {

    width:
        70px;

    height:
        70px;

    background:
        #eee0ff;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        32px;

    margin:
        auto auto 12px;

}


.zona-microfono h2 {

    color:
        #7627bd;

    margin-bottom:
        6px;

}


.zona-microfono p {

    color:
        #777;

    font-size:
        14px;

    margin-bottom:
        18px;

}


.btn-microfono {

    width:
        85px;

    height:
        85px;

    border:
        none;

    border-radius:
        50%;

    background:
        #7627bd;

    color:
        white;

    font-size:
        31px;

    cursor:
        pointer;

    box-shadow:
        0 8px 25px
        rgba(
            118,
            39,
            189,
            .30
        );

}


.btn-microfono.escuchando {

    animation:
        escuchar 0.8s
        infinite alternate;

}


@keyframes escuchar {

    from {

        transform:
            scale(1);

    }

    to {

        transform:
            scale(1.13);

        box-shadow:
            0 0 0 15px
            rgba(
                118,
                39,
                189,
                .12
            );

    }

}


.estado-microfono {

    margin-top:
        12px;

    color:
        #777;

    font-size:
        14px;

}


/* ==================================================
   RESULTADO
================================================== */

.resultado {

    background:
        #f7f1ff;

    border-radius:
        23px;

    padding:
        20px;

    text-align:
        center;

}


.resultado > span {

    display:
        block;

    color:
        #777;

    margin-bottom:
        7px;

}


#textoUsuario {

    display:
        block;

    color:
        #7627bd;

    font-size:
        20px;

}


.porcentaje {

    color:
        #7627bd;

    font-size:
        38px;

    font-weight:
        900;

    margin:
        8px;

}


#mensajeResultado {

    font-weight:
        700;

}


.excelente {

    color:
        #2e9d61;

}


.bien {

    color:
        #d28a00;

}


.mejorar {

    color:
        #7627bd;

}


/* ==================================================
   SIGUIENTE
================================================== */

.btn-siguiente {

    width:
        100%;

    border:
        none;

    background:
        #7627bd;

    color:
        white;

    padding:
        15px;

    border-radius:
        23px;

    font-weight:
        800;

    font-size:
        15px;

    cursor:
        pointer;

}


.btn-siguiente:disabled {

    background:
        #d8cde2;

    cursor:
        not-allowed;

}


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

.progreso {

    background:
        white;

    padding:
        25px;

    border-radius:
        25px;

    margin-top:
        25px;

    box-shadow:
        0 8px 25px
        rgba(
            80,
            30,
            120,
            .08
        );

}


.progreso-cabecera {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        13px;

}


.progreso h2 {

    color:
        #7627bd;

    font-size:
        20px;

}


#contador {

    background:
        #eee0ff;

    color:
        #7627bd;

    padding:
        6px 12px;

    border-radius:
        15px;

    font-weight:
        700;

}


.barra {

    height:
        13px;

    background:
        #eee;

    border-radius:
        20px;

    overflow:
        hidden;

}


.barra-interna {

    width:
        10%;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            #7627bd,
            #c77dff
        );

    border-radius:
        20px;

    transition:
        .5s;

}


#mensajeProgreso {

    color:
        #777;

    margin-top:
        10px;

    font-size:
        14px;

}


/* ==================================================
   INSTRUCCIONES
================================================== */

.instrucciones {

    margin-top:
        25px;

    background:
        white;

    border-radius:
        25px;

    padding:
        28px;

    box-shadow:
        0 8px 25px
        rgba(
            80,
            30,
            120,
            .08
        );

}


.instrucciones h2 {

    color:
        #7627bd;

    margin-bottom:
        20px;

}


.pasos {

    display:
        grid;

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

    gap:
        15px;

}


.paso {

    background:
        #faf6ff;

    border-radius:
        20px;

    padding:
        18px;

}


.paso span {

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #7627bd;

    color:
        white;

    border-radius:
        50%;

    font-weight:
        800;

    margin-bottom:
        10px;

}


.paso strong {

    display:
        block;

    color:
        #7627bd;

    margin-bottom:
        5px;

}


.paso p {

    color:
        #777;

    font-size:
        13px;

    line-height:
        1.4;

}


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

@media (max-width: 900px) {


    .zona-conversacion {

        grid-template-columns:
            1fr;

    }


    .zona-leo {

        max-width:
            600px;

        width:
            100%;

        margin:
            auto;

    }


    .pasos {

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

    }

}



@media (max-width: 600px) {


    .encabezado {

        height:
            auto;

        padding:
            15px;

        gap:
            12px;

        flex-wrap:
            wrap;

    }


    .logo {

        font-size:
            20px;

    }


    .contenedor {

        width:
            94%;

        margin-top:
            30px;

    }


    .intro h1 {

        font-size:
            28px;

    }


    .zona-conversacion {

        padding:
            18px;

    }


    .leo-circulo {

        width:
            210px;

        height:
            210px;

    }


    #leo {

        width:
            185px;

        height:
            185px;

    }


    .respuesta-guia {

        font-size:
            20px;

    }


    .pasos {

        grid-template-columns:
            1fr;

    }


    .selector-tiempo {

        flex-direction:
            column;

    }


    .tiempo {

        text-align:
            center;

    }

}