* {
    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;
    overflow-x: hidden;

    background:
        linear-gradient(
            rgba(20, 10, 45, .82),
            rgba(20, 10, 45, .90)
        ),
        url("https://images.unsplash.com/photo-1502602898657-3e91760cbb34?auto=format&fit=crop&w=2000&q=85");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}


/* ==========================================
   DECORACIÓN
========================================== */

body::before {
    content: "✈️   🇫🇷   🥐   🗼   🎨   ☕";

    position: fixed;
    inset: 0;

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

    font-size: 55px;
    letter-spacing: 35px;

    opacity: .035;

    pointer-events: none;
    z-index: -1;
}


/* ==========================================
   VOLVER
========================================== */

.volver {
    display: inline-block;

    margin: 25px 6%;

    padding: 11px 20px;

    color: white;
    text-decoration: none;

    border-radius: 30px;

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

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

    backdrop-filter: blur(15px);

    transition: .3s;
}

.volver:hover {
    transform: translateX(-5px);
    background: rgba(255,255,255,.2);
}


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

.encabezado {
    width: 88%;
    max-width: 1100px;

    margin: 10px auto 35px;

    display: flex;
    align-items: center;

    gap: 20px;
}

.logo {
    width: 80px;
    height: 80px;

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

    border-radius: 25px;

    font-size: 43px;

    background:
        linear-gradient(
            135deg,
            #3548c7,
            #8b5cf6
        );

    box-shadow:
        0 15px 40px rgba(0,0,0,.35);
}
.encabezado h1 {
    font-size: clamp(32px, 5vw, 55px);

    background: linear-gradient(
        90deg,
        white,
        #c9b2ff,
        white
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.encabezado p {
    margin-top: 5px;

    color: #d0c5e5;

    font-size: 17px;
}


/* ==========================================
   BIENVENIDA
========================================== */

.bienvenida {
    width: 88%;
    max-width: 1100px;

    margin: auto;

    padding: 35px;

    text-align: center;

    border-radius: 30px;

    background:
        rgba(20,10,45,.55);

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

    backdrop-filter: blur(20px);

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

.sello {
    display: inline-block;

    padding: 8px 15px;

    border-radius: 30px;

    color: #d7c6ff;

    background: rgba(130,90,255,.2);

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
}

.bienvenida h2 {
    margin-top: 17px;

    font-size: clamp(27px,4vw,42px);
}

.bienvenida p {
    max-width: 650px;

    margin: 12px auto 25px;

    color: #c0b5d1;

    line-height: 1.6;
}


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

.progreso {
    max-width: 600px;
    margin: auto;
}

.progreso > span {
    display: block;

    margin-bottom: 8px;

    color: #c7b4e8;

    font-weight: 800;
}

.barra {
    width: 100%;
    height: 12px;

    overflow: hidden;

    border-radius: 20px;

    background: rgba(255,255,255,.1);
}

#barraProgreso {
    width: 20%;
    height: 100%;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #6250e8,
            #b58cff
        );

    box-shadow:
        0 0 20px rgba(154,110,255,.6);

    transition: width .5s ease;
}


/* ==========================================
   MAPA / CAMINO
========================================== */

.mapa {
    width: 88%;
    max-width: 1000px;

    margin: 60px auto;
}

.camino {
    position: relative;

    min-height: 760px;

    display: flex;
    flex-direction: column;

    align-items: center;

    justify-content: space-between;

    padding: 30px 0;
}


/* línea del camino */

.camino::before {
    content: "";

    position: absolute;

    top: 50px;
    bottom: 50px;

    left: 50%;

    width: 9px;

    transform: translateX(-50%);

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            #7d65ff,
            #d0a5ff,
            #7d65ff
        );

    box-shadow:
        0 0 20px rgba(145,110,255,.45);

    z-index: 0;
}


/* ==========================================
   CÍRCULOS
========================================== */

.nivel {
    position: relative;

    width: 155px;
    height: 155px;

    display: flex;

    flex-direction: column;

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

    gap: 4px;

    border: 7px solid #24134a;

    border-radius: 50%;

    color: white;

    cursor: pointer;

    background:
        linear-gradient(
            145deg,
            #8061ee,
            #4f34ad
        );

    box-shadow:
        0 12px 35px rgba(0,0,0,.4),
        0 0 0 8px rgba(130,100,240,.15);

    z-index: 2;

    transition:
        transform .3s,
        filter .3s,
        opacity .3s;
}

.nivel:nth-child(2) {
    transform: translateX(110px);
}

.nivel:nth-child(3) {
    transform: translateX(-110px);
}

.nivel:nth-child(4) {
    transform: translateX(110px);
}

.nivel:nth-child(5) {
    transform: translateX(-110px);
}

.nivel:hover {
    transform: scale(1.1);
}

.nivel:nth-child(2):hover,
.nivel:nth-child(4):hover {
    transform: translateX(110px) scale(1.1);
}

.nivel:nth-child(3):hover,
.nivel:nth-child(5):hover {
    transform: translateX(-110px) scale(1.1);
}


.nivel .numero {
    position: absolute;

    top: 7px;
    right: 8px;

    width: 30px;
    height: 30px;

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

    border-radius: 50%;

    color: white;

    background: #30205d;

    font-weight: 900;

    border: 2px solid rgba(255,255,255,.3);
}

.nivel .emoji {
    font-size: 42px;
}

.nivel strong {
    font-size: 15px;
}

.nivel small {
    color: #ddd2f7;

    font-size: 10px;
    font-weight: 700;
}


/* ==========================================
   NIVEL ACTIVO
========================================== */

.nivel.activo {
    animation:
        flotar 2s ease-in-out infinite;
}

@keyframes flotar {

    0%,100% {
        box-shadow:
            0 12px 35px rgba(0,0,0,.4),
            0 0 0 8px rgba(130,100,240,.15);
    }

    50% {
        box-shadow:
            0 15px 45px rgba(0,0,0,.45),
            0 0 0 15px rgba(157,120,255,.12);
    }

}


/* ==========================================
   BLOQUEADO
========================================== */

.nivel.bloqueado {
    cursor: not-allowed;

    filter: grayscale(.8);

    opacity: .45;

    background:
        linear-gradient(
            145deg,
            #4a4261,
            #282235
        );
}

.nivel.bloqueado::after {
    content: "🔒";

    position: absolute;

    bottom: 8px;

    font-size: 17px;
}


/* ==========================================
   COMPLETADO
========================================== */

.nivel.completado {
    background:
        linear-gradient(
            145deg,
            #20b875,
            #11724d
        );

    border-color: #173c2d;
}

.nivel.completado::after {
    content: "✓";

    position: absolute;

    bottom: 8px;

    width: 25px;
    height: 25px;

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

    border-radius: 50%;

    background: white;

    color: #15925f;

    font-weight: 900;
}


/* ==========================================
   RETO
========================================== */

.reto {
    width: 88%;
    max-width: 850px;

    margin: 20px auto 70px;

    padding: 35px;

    text-align: center;

    border-radius: 32px;

    background:
        rgba(18,9,40,.78);

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

    backdrop-filter: blur(20px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.4);
}

.reto-top {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 25px;
}

.reto-top span {
    padding: 7px 13px;

    border-radius: 20px;

    background: rgba(133,93,255,.16);

    color: #c9b4ff;

    font-size: 11px;
    font-weight: 900;
}

.iconoReto {
    font-size: 60px;

    margin-bottom: 10px;
}

.reto h2 {
    font-size: 34px;

    margin-bottom: 8px;
}

.reto p {
    color: #b6a9c9;

    margin-bottom: 20px;
}

.pregunta-frances {
    display: inline-block;

    margin-bottom: 25px;

    padding: 17px 25px;

    border-radius: 18px;

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

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

    color: white;

    font-size: 22px;
    font-weight: 800;
}


/* ==========================================
   OPCIONES
========================================== */

.opciones {
    display: grid;

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

    gap: 12px;

    max-width: 600px;

    margin: auto;
}

.opciones button {
    padding: 15px;

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

    border-radius: 15px;

    color: white;

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

    cursor: pointer;

    font-size: 16px;
    font-weight: 700;

    transition: .25s;
}

.opciones button:hover {
    transform: translateY(-3px);

    background: rgba(133,93,255,.25);
}

.opciones button.correcta {
    background: #15925f;

    border-color: #43d69a;
}

.opciones button.incorrecta {
    background: #9c3155;

    border-color: #e86c91;

    animation: error .3s;
}

@keyframes error {

    0%,100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    75% {
        transform: translateX(6px);
    }

}


/* ==========================================
   MENSAJE
========================================== */

.mensaje {
    min-height: 50px;

    margin-top: 20px;

    color: #d7c8eb;

    line-height: 1.5;
}


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

.btn-siguiente {
    margin-top: 15px;

    padding: 14px 25px;

    border: none;

    border-radius: 15px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #9065ff,
            #5d3bc4
        );

    font-weight: 900;

    cursor: pointer;

    transition: .3s;
}

.btn-siguiente:hover {
    transform: translateY(-3px);
}

.btn-siguiente:disabled {
    opacity: .4;

    cursor: not-allowed;

    transform: none;
}


/* ==========================================
   PASAPORTE
========================================== */

.pasaporte {
    width: 88%;
    max-width: 900px;

    margin: 0 auto 60px;

    padding: 30px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #eee0c3,
            #d9c59e
        );

    color: #3b2a1d;

    box-shadow:
        0 25px 60px rgba(0,0,0,.35);

    transform: rotate(-.5deg);
}

.pasaporte-titulo {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;
}

.pasaporte-titulo > span {
    font-size: 45px;
}

.pasaporte-titulo h2 {
    font-family: Georgia, serif;

    font-size: 28px;
}

.pasaporte-titulo p {
    color: #765f4b;

    margin-top: 3px;
}


/* ==========================================
   SELLOS
========================================== */

.sellos {
    display: grid;

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

    gap: 15px;
}

.sello-pasaporte {
    height: 100px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border: 3px dashed rgba(75,45,25,.3);

    border-radius: 50%;

    color: #735b46;

    opacity: .45;
}

.sello-pasaporte span {
    font-size: 30px;
}

.sello-pasaporte small {
    margin-top: 5px;

    font-weight: 900;
}

.sello-pasaporte.obtenido {
    opacity: 1;

    transform: rotate(-5deg);

    border-color: #6c3cbb;

    color: #6337a5;

    background:
        rgba(140,100,220,.12);
}


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

.final {
    display: none;

    width: 88%;
    max-width: 700px;

    margin: 0 auto 80px;

    padding: 50px;

    text-align: center;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(121,78,255,.3),
            rgba(30,18,70,.8)
        );

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

.final.mostrar {
    display: block;

    animation:
        aparecer .7s ease;
}

.final > :first-child {
    font-size: 65px;
}

.final h2 {
    margin: 10px 0;

    font-size: 35px;
}

.final p {
    color: #c9bddb;
}


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

@media(max-width:700px) {

    .encabezado {
        width: 90%;
    }

    .logo {
        width: 60px;
        height: 60px;

        font-size: 30px;
    }

    .bienvenida,
    .reto,
    .pasaporte {
        width: 90%;
        padding: 25px;
    }

    .mapa {
        width: 95%;
    }

    .camino {
        min-height: 700px;
    }

    .nivel {
        width: 125px;
        height: 125px;
    }

    .nivel:nth-child(2) {
        transform: translateX(75px);
    }

    .nivel:nth-child(3) {
        transform: translateX(-75px);
    }

    .nivel:nth-child(4) {
        transform: translateX(75px);
    }

    .nivel:nth-child(5) {
        transform: translateX(-75px);
    }

    .nivel:nth-child(2):hover,
    .nivel:nth-child(4):hover {
        transform: translateX(75px) scale(1.08);
    }

    .nivel:nth-child(3):hover,
    .nivel:nth-child(5):hover {
        transform: translateX(-75px) scale(1.08);
    }

    .nivel .emoji {
        font-size: 32px;
    }

    .nivel strong {
        font-size: 12px;
    }

    .nivel small {
        font-size: 8px;
    }

    .opciones {
        grid-template-columns: 1fr;
    }

    .pregunta-frances {
        font-size: 17px;
    }

    .sellos {
        grid-template-columns:
            repeat(3, 1fr);
    }

}

@media(max-width:450px) {

    .camino {
        min-height: 650px;
    }

    .nivel {
        width: 105px;
        height: 105px;

        border-width: 5px;
    }

    .nivel:nth-child(2) {
        transform: translateX(50px);
    }

    .nivel:nth-child(3) {
        transform: translateX(-50px);
    }

    .nivel:nth-child(4) {
        transform: translateX(50px);
    }

    .nivel:nth-child(5) {
        transform: translateX(-50px);
    }

    .nivel:nth-child(2):hover,
    .nivel:nth-child(4):hover {
        transform: translateX(50px) scale(1.08);
    }

    .nivel:nth-child(3):hover,
    .nivel:nth-child(5):hover {
        transform: translateX(-50px) scale(1.08);
    }

    .nivel .emoji {
        font-size: 27px;
    }

    .nivel strong {
        font-size: 10px;
    }

    .nivel small {
        font-size: 7px;
    }

    .sellos {
        grid-template-columns:
            repeat(2, 1fr);
    }

}