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


html{
    scroll-behavior:smooth;
}


body{

    min-height:100vh;

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

    color:white;

    background:
        linear-gradient(
            135deg,
            #0c0618,
            #1b0b35,
            #32105c,
            #10051e
        );

    overflow-x:hidden;

}


.background{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(184,92,255,.18),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(67,170,255,.13),
            transparent 30%
        );

}


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

.header{

    width:94%;

    max-width:1450px;

    margin:25px auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}


.back-btn{

    border:none;

    color:white;

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

    padding:
        12px 18px;

    border-radius:15px;

    cursor:pointer;

    transition:.3s;

}


.back-btn:hover{

    transform:
        translateX(-4px);

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

}


.header-title{

    text-align:center;

}


.header-title h1{

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.8rem
        );

    background:
        linear-gradient(
            90deg,
            #fff,
            #d89aff,
            #8ed8ff
        );

    -webkit-background-clip:text;

    color:transparent;

}


.header-title p{

    margin-top:5px;

    color:#c8b9d8;

}


.counter{

    min-width:75px;

    padding:12px;

    border-radius:18px;

    text-align:center;

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

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

    font-weight:bold;

}


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

.main-container{

    width:94%;

    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:
        .85fr
        1.25fr
        .85fr;

    gap:20px;

}


.card{

    min-height:550px;

    border-radius:30px;

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

    border:
        1px solid
        rgba(255,255,255,.11);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.3);

}


/* =====================================
   FRASE
===================================== */

.phrase-card{

    padding:32px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.tag{

    width:max-content;

    padding:
        8px 16px;

    border-radius:30px;

    font-size:.8rem;

    font-weight:bold;

    letter-spacing:1px;

    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #c026d3
        );

}


.phrase-number{

    margin-top:20px;

    color:#a99bb9;

}


.phrase-card h2{

    margin-top:20px;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.5rem
        );

    line-height:1.25;

}


.translation{

    margin-top:12px;

    color:#bfb0cd;

}


.target-sound{

    margin-top:30px;

    padding:18px;

    border-radius:20px;

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

}


.target-sound span{

    color:#b7a9c4;

    font-size:.9rem;

}


.target-sound strong{

    display:block;

    margin-top:5px;

    font-size:2.5rem;

    color:#d78cff;

}


.listen-btn,
.next-btn{

    width:100%;

    border:none;

    color:white;

    padding:15px;

    margin-top:15px;

    border-radius:15px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}


.listen-btn{

    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #c026d3
        );

}


.next-btn{

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

}


.listen-btn:hover,
.next-btn:hover{

    transform:
        translateY(-2px);

    filter:brightness(1.12);

}


/* =====================================
   CAMERA
===================================== */

.camera-card{

    padding:25px;

}


.section-title{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

}


.section-title span{

    font-size:1.8rem;

}


.section-title h2{

    font-size:1.3rem;

}


.section-title p{

    margin-top:4px;

    color:#aaa0b8;

    font-size:.85rem;

}


.camera-box{

    position:relative;

    height:350px;

    overflow:hidden;

    border-radius:25px;

    background:#030305;

}


#camera{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scaleX(-1);

}


#faceCanvas{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    transform:scaleX(-1);

    pointer-events:none;

}


.camera-message{

    position:absolute;

    top:15px;

    left:15px;

    padding:
        8px 13px;

    border-radius:20px;

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

    font-size:.8rem;

}


.mouth-guide{

    position:absolute;

    left:50%;

    top:65%;

    transform:
        translate(-50%,-50%);

    width:120px;

    height:65px;

    border:
        2px dashed
        rgba(255,255,255,.4);

    border-radius:50%;

    font-size:0;

}


.camera-btn{

    width:100%;

    margin-top:15px;

    border:none;

    padding:14px;

    border-radius:15px;

    color:white;

    font-weight:bold;

    cursor:pointer;

    background:
        linear-gradient(
            90deg,
            #059669,
            #10b981
        );

}


.mouth-analysis{

    margin-top:20px;

}


.mouth-analysis h3{

    font-size:1rem;

    margin-bottom:12px;

}


.analysis-row{

    display:flex;

    justify-content:space-between;

    color:#c6bacf;

}


.analysis-row strong{

    color:#d998ff;

}


.progress-background{

    height:9px;

    margin-top:7px;

    overflow:hidden;

    border-radius:20px;

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

}


.progress-bar{

    width:0%;

    height:100%;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #22c55e,
            #eab308,
            #ef4444
        );

    transition:.3s;

}


.mouth-result{

    margin-top:15px;

    padding:14px;

    border-radius:16px;

    line-height:1.45;

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

    color:#dcd2e4;

}


/* =====================================
   LEO
===================================== */

.leo-card{

    padding:25px;

    display:flex;

    flex-direction:column;

    align-items:center;

}


.leo-title{

    width:100%;

    display:flex;

    align-items:center;

    gap:10px;

}


.leo-title span{

    font-size:1.6rem;

}


.leo-area{

    height:320px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.leo-character{

    position:relative;

    width:180px;

    height:270px;

}


.leo-head{

    position:absolute;

    top:20px;

    left:25px;

    width:130px;

    height:145px;

    border-radius:
        48% 48% 45% 45%;

    background:
        linear-gradient(
            145deg,
            #ffd9bf,
            #efa77c
        );

    border:
        4px solid
        #7c3aed;

}


.leo-hair{

    position:absolute;

    z-index:3;

    top:0;

    left:25px;

    width:130px;

    height:60px;

    border-radius:
        70% 70% 25% 25%;

    background:#2e203d;

}


.leo-eye{

    position:absolute;

    top:60px;

    width:17px;

    height:17px;

    border-radius:50%;

    background:#26162f;

}


.leo-eye.left{

    left:34px;

}


.leo-eye.right{

    right:34px;

}


.leo-eye span{

    display:block;

    width:5px;

    height:5px;

    margin:3px;

    border-radius:50%;

    background:white;

}


.leo-nose{

    position:absolute;

    top:82px;

    left:59px;

    width:12px;

    height:16px;

    border-bottom:
        3px solid
        #a75c50;

    border-radius:50%;

}


.leo-mouth{

    position:absolute;

    left:45px;

    top:108px;

    width:40px;

    height:12px;

    border-radius:
        0 0 30px 30px;

    background:#631e45;

    transition:.2s;

    overflow:hidden;

}


.leo-mouth span{

    position:absolute;

    bottom:0;

    left:8px;

    width:24px;

    height:4px;

    border-radius:20px;

    background:#ff91ad;

}


.leo-mouth.talking{

    animation:
        talk .18s
        infinite alternate;

}


@keyframes talk{

    from{

        height:10px;

    }

    to{

        height:26px;

        border-radius:50%;

    }

}


.mouth-u{

    width:23px !important;

    height:22px !important;

    left:54px !important;

    border-radius:50% !important;

}


.mouth-ou{

    width:28px !important;

    height:21px !important;

    left:51px !important;

    border-radius:50% !important;

}


.mouth-é{

    width:43px !important;

    height:8px !important;

    left:43px !important;

    border-radius:10px !important;

}


.mouth-ch{

    width:31px !important;

    height:9px !important;

    left:50px !important;

}


.mouth-r{

    height:14px !important;

}


.mouth-an,
.mouth-on,
.mouth-in{

    width:34px !important;

    height:15px !important;

    left:48px !important;

}


.leo-body{

    position:absolute;

    top:160px;

    left:35px;

    width:110px;

    height:110px;

    border-radius:
        35px 35px 20px 20px;

    background:
        linear-gradient(
            145deg,
            #7c3aed,
            #4c1d95
        );

}


.leo-bubble{

    width:100%;

    padding:18px;

    border-radius:20px;

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

    text-align:center;

}


.leo-name{

    color:#dc9cff;

    font-weight:bold;

    margin-bottom:8px;

}


.leo-bubble p{

    color:#d5c9df;

    line-height:1.45;

    font-size:.9rem;

}


#leoSpeak{

    border:none;

    margin-top:12px;

    padding:10px 16px;

    border-radius:12px;

    color:white;

    cursor:pointer;

    background:#8b5cf6;

}


/* =====================================
   SONIDOS
===================================== */

.sounds-section{

    width:94%;

    max-width:1450px;

    margin:30px auto;

    padding:30px;

    border-radius:30px;

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

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

}


.sounds-section > h2{

    text-align:center;

    font-size:1.8rem;

}


.sounds-section > p{

    text-align:center;

    margin-top:7px;

    color:#aaa0b7;

}


.sounds-grid{

    margin-top:25px;

    display:grid;

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

    gap:12px;

}


.sounds-grid button{

    min-height:85px;

    border:none;

    border-radius:17px;

    color:white;

    cursor:pointer;

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

    transition:.25s;

}


.sounds-grid button:hover{

    transform:
        translateY(-4px);

    background:
        rgba(139,92,246,.3);

}


.sounds-grid span{

    display:block;

    margin-bottom:7px;

    color:#df9cff;

    font-size:1.5rem;

    font-weight:bold;

}


.sound-information{

    margin-top:25px;

    display:flex;

    align-items:center;

    gap:25px;

    padding:22px;

    border-radius:22px;

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

}


.sound-big{

    min-width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            #8b5cf6,
            #c026d3
        );

    font-size:2.2rem;

    font-weight:bold;

}


.sound-information h3{

    font-size:1.4rem;

}


.sound-information p{

    margin-top:7px;

    color:#c8bdcf;

    line-height:1.5;

}


.recommendation{

    margin-top:13px;

    padding:13px;

    border-radius:14px;

    color:#e3d6ea;

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

}


/* =====================================
   FINAL
===================================== */

.finish-screen{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    z-index:100;

    background:
        rgba(5,2,12,.9);

    backdrop-filter:
        blur(15px);

}


.finish-screen.show{

    display:flex;

}


.finish-card{

    width:min(
        90%,
        500px
    );

    padding:45px;

    text-align:center;

    border-radius:30px;

    background:
        linear-gradient(
            145deg,
            #281047,
            #4b1977
        );

}


.finish-icon{

    font-size:4rem;

}


.finish-card h2{

    margin-top:15px;

}


.finish-card p{

    margin-top:10px;

    color:#cfc2d9;

}


.final-score{

    margin:25px;

    font-size:3rem;

    font-weight:bold;

    color:#db9aff;

}


.finish-card button{

    border:none;

    padding:14px 25px;

    border-radius:15px;

    background:#8b5cf6;

    color:white;

    font-weight:bold;

    cursor:pointer;

}


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

@media(max-width:1150px){

    .main-container{

        grid-template-columns:
            1fr 1fr;

    }

    .leo-card{

        grid-column:
            1 / -1;

    }

    .sounds-grid{

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

    }

}


@media(max-width:700px){

    .header{

        flex-wrap:wrap;

    }

    .header-title{

        order:-1;

        width:100%;

    }

    .main-container{

        grid-template-columns:1fr;

    }

    .leo-card{

        grid-column:auto;

    }

    .sounds-grid{

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

    }

    .sound-information{

        flex-direction:column;

        text-align:center;

    }

    .camera-box{

        height:280px;

    }

}