* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;

    min-height: 100vh;

    background-color: #fff0a8;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;
}

button {
    font: inherit;
}

button:not(:disabled) {
    cursor: pointer;
}

.oculto {
    display: none !important;
}

.pantalla {
    width: 100%;

    min-height: 100vh;

    padding: 42px 24px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2 {
    color: #463b78;
}

.botonPrincipal {
    min-width: 210px;

    padding: 16px 30px;

    border: none;

    border-radius: 16px;

    background-color: #6c5ce7;

    color: white;

    font-weight: 800;

    font-size: 18px;

    transition:
        transform 0.15s ease,
        background-color 0.15s ease;
}

.botonPrincipal:hover {
    background-color: #5747d8;

    transform: translateY(-2px);
}

.botonSecundario {
    padding: 12px 22px;

    border: 2px solid #6c5ce7;

    border-radius: 14px;

    background-color: white;

    color: #5d4fc9;

    font-weight: 800;
}

.botonSecundario:hover {
    background-color: #f0edff;
}

.marcaJuego {
    width: min(650px, 100%);

    text-align: center;
}

.logoJuego {
    margin-bottom: 16px;

    font-size: 96px;
}

.marcaJuego h1 {
    margin-bottom: 12px;

    font-size: clamp(38px, 6vw, 58px);
}

.subtitulo {
    margin-bottom: 30px;

    font-size: 21px;
}

.encabezadoSeccion {
    text-align: center;
}

.encabezadoSeccion h2 {
    margin-bottom: 8px;

    font-size: 38px;
}

.instruccion {
    margin-bottom: 28px;

    font-size: 18px;
}

.perfil {
    min-height: 135px;

    padding: 16px 10px;

    

    

    

    

    

    

    

    

    gap: 10px;

    font-size: 17px;

    font-weight: 800;

    
}

.emojiPerfil {
    font-size: 44px;
}

.tarjetaBienvenida {
    width: min(540px, 100%);

    padding: 36px 28px;

    border: 3px solid #6c5ce7;

    border-radius: 28px;

    background-color: white;

    text-align: center;
}

.avatarGrande {
    width: 145px;

    height: 145px;

    margin: 0 auto 24px;

    border: 5px solid #6c5ce7;

    border-radius: 50%;

    background-color: #f1efff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 78px;
}

.tarjetaBienvenida h2 {
    margin-bottom: 10px;

    font-size: 36px;
}

.tarjetaBienvenida p {
    margin-bottom: 26px;

    font-size: 19px;
}

.tarjetaBienvenida .botonSecundario {
    margin-top: 14px;
}

.pantallaMenu {
    justify-content: flex-start;
}

.avatarJugador {
    

    

    flex: 0 0 100px;

    

    background-color: #f0edff;

    

    

    

    
}

.datosJugador {
    

    min-width: 0;
}

.datosJugador h2 {
    

    font-size: 31px;
}

.estadistica {
    

    

    

    font-size: 16px;
}

.estadistica strong {
    margin-left: 4px;
}

.tituloMundos {
    

    text-align: center;

    
}

.curso:hover {
    

    filter: brightness(1.05);
}

.accionesMenu {
    margin-top: 25px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 12px;
}

.pantallaMapa {
    justify-content: flex-start;
}

.tituloMapaBloque {
    grid-column: 2;

    text-align: center;
}

.tituloMapaBloque h2 {
    margin-bottom: 6px;

    font-size: 38px;
}

.tituloMapaBloque p {
    margin-bottom: 0;

    font-size: 17px;
}

#textoProgreso {
    display: block;

    margin-bottom: 9px;

    font-size: 17px;

    font-weight: 800;
}

.barraProgreso,
.barraPregunta {
    width: 100%;

    overflow: hidden;

    background-color: white;

    border: 2px solid #6c5ce7;

    border-radius: 999px;
}

.rellenoProgreso,
.rellenoPregunta {
    height: 100%;

    background-color: #2ecc71;

    transition: width 0.3s ease;
}

.rellenoProgreso {
    width: 0%;
}

.nivelMapa {
    

    

    

    

    

    

    

    

    

    

    

    transition: transform 0.15s ease;
}

.nivelMapa:not(:disabled):hover {
    transform: scale(1.03);
}

.nivelMapa:nth-of-type(4n + 1) {
    margin-right: 210px;
}

.nivelMapa:nth-of-type(4n + 3) {
    margin-left: 210px;
}

.nivelMapa small {
    font-weight: 600;
}

.leyendaMapa {
    margin-top: 24px;

    padding: 11px 18px;

    border-radius: 14px;

    

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 18px;

    
}

.pantallaPregunta {
    justify-content: flex-start;

    padding-top: 24px;
}

.cabeceraPregunta {
    width: min(920px, 100%);

    margin-bottom: 20px;

    display: grid;

    grid-template-columns:
        1fr 2fr 1fr;

    align-items: center;

    gap: 18px;
}

.cabeceraPregunta .botonVolver {
    justify-self: start;
}

.datosPregunta {
    text-align: center;

    display: flex;

    flex-direction: column;

    gap: 4px;

    font-size: 16px;
}

.datosPregunta strong {
    color: #6c5ce7;

    font-size: 18px;
}

.monedasPregunta {
    justify-self: end;

    min-width: 78px;

    padding: 12px 16px;

    border-radius: 16px;

    background-color: white;

    text-align: center;

    font-size: 19px;

    font-weight: 800;
}

.avancePreguntas {
    width: min(650px, 100%);

    margin-bottom: 24px;

    text-align: center;
}

#contadorPregunta {
    display: block;

    margin-bottom: 9px;

    font-weight: 800;
}

.barraPregunta {
    height: 18px;
}

.rellenoPregunta {
    width: 10%;
}

.tarjetaPregunta {
    width: min(760px, 100%);

    padding: 30px;

    border: 3px solid #6c5ce7;

    border-radius: 27px;

    background-color: white;

    text-align: center;
}

.iconoPregunta {
    margin-bottom: 8px;

    font-size: 54px;
}

.tarjetaPregunta h2 {
    margin-bottom: 28px;

    font-size: clamp(24px, 3vw, 29px);

    line-height: 1.35;
}

.contenedorOpciones {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 13px;
}

.opcionPregunta {
    width: 100%;

    min-height: 63px;

    padding: 14px 18px;

    border: 3px solid #ddd8ff;

    border-radius: 16px;

    background-color: #f6f4ff;

    color: #333;

    text-align: left;

    font-size: 18px;

    font-weight: 800;

    transition:
        transform 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.opcionPregunta:not(:disabled):hover {
    transform: translateY(-2px);

    border-color: #6c5ce7;

    background-color: #eeebff;
}

.opcionCorrecta,
.tarjetaImagen.opcionCorrecta {
    border-color: #27ae60 !important;

    background-color: #d8f4e2 !important;

    color: #176b3a !important;

    opacity: 1 !important;
}

.opcionIncorrecta,
.tarjetaImagen.opcionIncorrecta {
    border-color: #e74c3c !important;

    background-color: #fadbd8 !important;

    color: #8d291f !important;

    opacity: 1 !important;
}

.retroalimentacion {
    margin-top: 22px;

    padding: 18px;

    border-radius: 17px;

    background-color: #f7f7f7;
}

.iconoRetroalimentacion {
    font-size: 39px;
}

.retroalimentacion h3 {
    margin: 6px 0;

    font-size: 21px;
}

.retroalimentacion p {
    margin-bottom: 0;

    font-size: 16px;

    line-height: 1.5;
}

.botonSiguiente {
    margin-top: 20px;

    padding: 14px 28px;

    border: none;

    border-radius: 15px;

    background-color: #6c5ce7;

    color: white;

    font-weight: 800;

    font-size: 17px;
}

.instruccionOrden,
.instruccionRelacionar,
.instruccionEspecial {
    margin-bottom: 15px;

    color: #555;

    font-weight: 800;

    line-height: 1.4;
}

.zonaOrden {
    min-height: 74px;

    padding: 13px;

    border: 3px dashed #6c5ce7;

    border-radius: 15px;

    background-color: #f6f4ff;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 9px;
}

.pasoOrden {
    padding: 9px 12px;

    border: 2px solid #6c5ce7;

    border-radius: 11px;

    background-color: white;

    color: #463b78;

    font-weight: 800;
}

.elementosOrden {
    margin-top: 15px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;
}

.botonOrden {
    padding: 13px 18px;

    border: 3px solid #48c9b0;

    border-radius: 14px;

    background-color: #e8f8f5;

    color: #117864;

    font-weight: 800;
}

.accionesOrden {
    margin-top: 17px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;
}

.botonOrdenSecundario {
    padding: 11px 17px;

    border: 2px solid #6c5ce7;

    border-radius: 12px;

    background-color: white;

    color: #5d4fc9;

    font-weight: 800;
}

.botonComprobarOrden {
    padding: 11px 20px;

    border: none;

    border-radius: 12px;

    background-color: #27ae60;

    color: white;

    font-weight: 800;
}

.botonComprobarOrden:disabled,
.botonOrden:disabled {
    opacity: 0.5;
}

.zonaRelacionar {
    display: grid;

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

    gap: 24px;
}

.columnaRelacionar {
    display: flex;

    flex-direction: column;

    gap: 11px;
}

.botonRelacionar {
    min-height: 61px;

    padding: 12px 14px;

    border: 3px solid #ddd8ff;

    border-radius: 15px;

    background-color: #f6f4ff;

    color: #333;

    font-weight: 800;
}

.botonSeleccionadoRelacionar {
    border-color: #6c5ce7;

    background-color: #ded9ff;
}

.parejaCorrecta,
.parejaCorrecta:disabled {
    border-color: #27ae60;

    background-color: #d8f4e2;

    color: #176b3a;

    opacity: 1;
}

.galeriaImagenes {
    display: grid;

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

    gap: 14px;
}

.tarjetaImagen {
    min-height: 175px;

    padding: 14px;

    border: 3px solid #ddd8ff;

    border-radius: 19px;

    background-color: #f8f7ff;

    color: #333;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 9px;

    font-weight: 800;
}

.tarjetaImagen:not(:disabled):hover {
    border-color: #6c5ce7;

    background-color: #efecff;
}

.emojiDesafio {
    font-size: 68px;
}

.imagenDesafio {
    width: 100%;

    max-width: 155px;

    height: 115px;

    object-fit: contain;
}

.textoImagenDesafio {
    font-size: 17px;
}

.zonaEspecial {
    display: grid;

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

    gap: 12px;
}

.botonEspecial {
    min-height: 62px;

    padding: 13px;

    border: 3px solid #ddd8ff;

    border-radius: 15px;

    background-color: #f6f4ff;

    color: #333;

    font-weight: 800;
}

.especialSeleccionado {
    border-color: #6c5ce7;

    background-color: #ded9ff;

    color: #463b78;
}

.botonComprobarEspecial {
    margin-top: 17px;

    padding: 13px 23px;

    border: none;

    border-radius: 14px;

    background-color: #e67e22;

    color: white;

    font-weight: 800;
}

.tarjetaVictoria h1 {
    margin-bottom: 10px;

    
}

.tarjetaVictoria > p {
    font-size: 18px;
}

.premioVictoria {
    min-width: 150px;

    padding: 16px 20px;

    border-radius: 17px;

    background-color: #fff7cf;

    font-size: 23px;
}

.premioVictoria strong,
.premioVictoria span {
    display: block;
}

.premioVictoria strong {
    margin-top: 5px;

    font-size: 25px;
}

.premioVictoria span {
    font-size: 14px;
}

.botonVictoria {
    padding: 14px 27px;

    border: none;

    border-radius: 15px;

    background-color: #27ae60;

    color: white;

    font-size: 17px;

    font-weight: 800;
}

@media (max-width: 900px) {

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

    .nivelMapa:nth-of-type(4n + 1),
    .nivelMapa:nth-of-type(4n + 3) {
        margin-left: 0;

        margin-right: 0;
    }

}

@media (max-width: 700px) {

    .pantalla {
        padding: 28px 16px;
    }

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

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

    .tarjetaJugador {
        flex-direction: column;

        text-align: center;
    }

    .estadisticas {
        justify-content: center;
    }

    .cabeceraMapa {
        grid-template-columns: 1fr;

        gap: 14px;

        text-align: center;
    }

    .tituloMapaBloque {
        grid-column: 1;
    }

    .cabeceraMapa .botonVolver {
        justify-self: center;
    }

    .cabeceraPregunta {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .cabeceraPregunta .botonVolver,
    .monedasPregunta {
        justify-self: center;
    }

    .tarjetaPregunta {
        padding: 22px 16px;
    }

    .zonaRelacionar,
    .galeriaImagenes,
    .zonaEspecial {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 430px) {

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

    .perfil {
        min-height: 105px;
    }

}

#pantallaInicio {
    text-align: center;
}

#pantallaInicio h1 {
    margin: 0 0 14px;

    color: #463b78;

    font-size: 48px;

    font-weight: 800;
}

#pantallaInicio .subtitulo {
    margin-bottom: 28px;

    color: #333333;

    font-size: 21px;
}

.iconoPrincipal {
    margin: 15px 0 28px;

    font-size: 90px;

    line-height: 1;
}

#botonComenzar {
    min-width: 210px;

    padding: 16px 34px;

    border: none;

    border-radius: 16px;

    background-color: #6c5ce7;

    color: white;

    font-size: 18px;

    font-weight: 800;

    box-shadow:
        0 5px 0 #5144ba;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

#botonComenzar:hover {
    background-color: #5b4dd8;

    transform: translateY(-2px);

    box-shadow:
        0 7px 0 #5144ba;
}

#botonComenzar:active {
    transform: translateY(3px);

    box-shadow:
        0 2px 0 #5144ba;
}

#pantallaPerfiles {
    text-align: center;
}

#pantallaPerfiles > h2 {
    margin-bottom: 8px;

    font-size: 38px;
}

#pantallaPerfiles > .instruccion {
    margin-bottom: 28px;
}

.contenedorPerfiles {
    width: min(1000px, 100%);

    display: grid;

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

    gap: 17px;
}

.perfil {
    min-height: 130px;

    padding: 15px;

    border: 3px solid #6c5ce7;

    border-radius: 20px;

    background-color: white;

    color: #463b78;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 9px;

    font-size: 42px;

    transition:
        transform 0.15s ease,
        background-color 0.15s ease;
}

.perfil span {
    font-size: 17px;

    font-weight: 800;
}

.perfil:hover {
    background-color: #f1eeff;

    transform: translateY(-3px);
}

.perfilInvitado {
    border-style: dashed;

    background-color: #fff9dd;
}

#pantallaBienvenida {
    text-align: center;
}

#pantallaBienvenida .avatarGrande {
    width: 150px;

    height: 150px;

    margin-bottom: 22px;

    border: 5px solid #6c5ce7;

    border-radius: 50%;

    background-color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 78px;

    box-shadow:
        0 7px 0 rgba(108, 92, 231, 0.16);
}

#pantallaBienvenida h2 {
    margin-bottom: 10px;

    font-size: 38px;
}

#pantallaBienvenida p {
    margin-bottom: 26px;

    font-size: 20px;
}

#botonEntrar {
    min-width: 250px;

    padding: 15px 28px;

    border: none;

    border-radius: 16px;

    background-color: #6c5ce7;

    color: white;

    font-size: 17px;

    font-weight: 800;

    box-shadow:
        0 5px 0 #5144ba;
}

#botonCambiarPerfil {
    margin-top: 18px;
}

#pantallaMenu {
    justify-content: flex-start;
}

.tarjetaJugador {
    width: min(900px, 100%);

    margin-bottom: 30px;

    padding: 20px 24px;

    border: 3px solid #6c5ce7;

    border-radius: 24px;

    background-color: white;

    display: flex;

    align-items: center;

    gap: 22px;

    box-shadow:
        0 7px 0 rgba(108, 92, 231, 0.12);
}

.avatarJugador {
    width: 100px;

    height: 100px;

    min-width: 100px;

    border-radius: 50%;

    background-color: #eeeaff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 56px;
}

.datosJugador {
    flex: 1;

    text-align: left;
}

.datosJugador h2 {
    margin-bottom: 12px;
}

.estadisticas {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.estadistica {
    padding: 10px 14px;

    border-radius: 13px;

    background-color: #f4f2ff;

    font-weight: 600;
}

.tituloMundos {
    margin-bottom: 24px;

    font-size: 31px;
}

.contenedorCursos {
    width: min(850px, 100%);

    display: grid;

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

    gap: 18px;
}

.curso {
    min-height: 165px;

    padding: 20px;

    border: none;

    border-radius: 22px;

    color: white;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-weight: 800;

    box-shadow:
        0 6px 0 rgba(0, 0, 0, 0.12);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

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

.cursoComunicacion {
    background-color: #6959d9;
}

.cursoCiencia {
    background-color: #2ca765;
}

.cursoPersonal {
    background-color: #e88728;
}

.cursoReligion {
    background-color: #9b59b6;
}

.iconoCurso {
    font-size: 58px;
}

.nombreCurso {
    font-size: 21px;
}

.botonPremios {
    margin-top: 27px;

    padding: 14px 25px;

    border: none;

    border-radius: 15px;

    background-color: #f1c40f;

    color: #584500;

    font-size: 17px;

    font-weight: 800;
}

.botonPrueba {
    margin-top: 15px;

    padding: 11px 18px;

    border: 2px dashed #777777;

    border-radius: 13px;

    background-color: white;

    color: #555555;
}

#botonSalirPerfil {
    margin-top: 15px;
}

#pantallaMapa {
    justify-content: flex-start;
}

.cabeceraMapa {
    width: min(900px, 100%);

    margin-bottom: 20px;

    display: grid;

    grid-template-columns:
        130px 1fr 130px;

    align-items: center;
}

.cabeceraMapa > .botonVolver {
    grid-column: 1;

    justify-self: start;
}

.cabeceraMapa > div:not(.botonVolver) {
    grid-column: 2;

    text-align: center;
}

#tituloMapa {
    margin-bottom: 7px;

    font-size: 38px;
}

#descripcionMapa {
    margin-bottom: 0;

    font-size: 17px;
}

.progresoMundo {
    width: min(700px, 100%);

    margin-bottom: 30px;

    text-align: center;
}

.barraProgreso {
    height: 21px;

    overflow: hidden;

    border: 2px solid #6c5ce7;

    border-radius: 999px;

    background-color: white;
}

.rellenoProgreso {
    height: 100%;

    background-color: #2ecc71;
}

.mapaNiveles {
    width: min(720px, 100%);

    display: flex;

    flex-direction: column;

    align-items: center;
}

.nivelMapa {
    width: 270px;

    min-height: 125px;

    padding: 15px;

    border: none;

    border-radius: 23px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    font-weight: 800;

    box-shadow:
        0 5px 0 rgba(0, 0, 0, 0.12);
}

.nivelDisponible {
    background-color: #2ca765;

    color: white;
}

.nivelCompletado {
    background-color: #f1c40f;

    color: #554300;
}

.nivelBloqueado {
    background-color: #d4d4d4;

    color: #777777;
}

.numeroNivel {
    font-size: 15px;
}

.iconoNivel {
    font-size: 40px;
}

.nombreNivel {
    font-size: 18px;
}

.conectorMapa {
    width: 7px;

    height: 32px;

    margin: 7px 0;

    border-radius: 999px;

    background-color: #aaa;
}

.leyendaMapa {
    margin-top: 25px;

    padding: 12px 18px;

    border-radius: 15px;

    background-color: white;

    font-size: 14px;
}

.botonVolver {
    min-height: 44px;

    padding: 10px 17px;

    border: 2px solid #6c5ce7;

    border-radius: 13px;

    background-color: white;

    color: #5d4fc9;

    font-weight: 800;
}

.tarjetaVictoria {
    width: min(650px, 100%);

    padding: 38px 28px;

    border: 4px solid #f1c40f;

    border-radius: 30px;

    background-color: white;

    text-align: center;

    box-shadow:
        0 8px 0 rgba(241, 196, 15, 0.18);
}

.trofeoVictoria {
    font-size: 90px;
}

.tarjetaVictoria h1 {
    margin: 10px 0;

    font-size: 40px;
}

.tarjetaVictoria h2 {
    margin-bottom: 10px;

    font-size: 28px;
}

.premiosVictoria {
    margin: 27px 0;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 18px;
}

.premiosVictoria > div {
    min-width: 155px;

    padding: 18px 22px;

    border-radius: 18px;

    background-color: #fff7cf;

    font-size: 23px;
}

.premiosVictoria strong,
.premiosVictoria span {
    display: block;
}

.mensajeDesbloqueo {
    margin-bottom: 24px;

    padding: 15px;

    border-radius: 15px;

    background-color: #e8f8f5;

    color: #117864;

    font-size: 18px;

    font-weight: 800;
}

#botonRegresarMapaVictoria {
    padding: 15px 28px;

    border: none;

    border-radius: 15px;

    background-color: #27ae60;

    color: white;

    font-size: 17px;

    font-weight: 800;
}

@media (max-width: 900px) {

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

}

@media (max-width: 700px) {

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

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

    .tarjetaJugador {
        flex-direction: column;

        text-align: center;
    }

    .datosJugador {
        text-align: center;
    }

    .estadisticas {
        justify-content: center;
    }

    .cabeceraMapa {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .cabeceraMapa > .botonVolver,
    .cabeceraMapa > div:not(.botonVolver) {
        grid-column: 1;

        justify-self: center;
    }

}

.pantallaRecompensas {
    justify-content: flex-start;

    padding-top: 30px;
}

.cabeceraTienda {
    width: min(1000px, 100%);

    margin-bottom: 25px;

    display: grid;

    grid-template-columns:
        150px 1fr 170px;

    align-items: center;

    gap: 20px;
}

.tituloTienda {
    text-align: center;
}

.tituloTienda h2 {
    margin-bottom: 5px;

    font-size: 36px;
}

.tituloTienda p {
    margin-bottom: 0;

    color: #555;

    font-size: 17px;
}

.saldoTienda {
    justify-self: end;

    display: flex;

    gap: 9px;
}

.saldoTienda > div {
    padding: 11px 14px;

    border-radius: 15px;

    background-color: white;

    font-size: 17px;

    font-weight: 800;
}

.categoriasTienda {
    width: min(800px, 100%);

    margin-bottom: 25px;

    display: grid;

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

    gap: 10px;
}

.categoriaTienda {
    min-height: 75px;

    padding: 10px;

    border: 3px solid transparent;

    border-radius: 17px;

    background-color: white;

    color: #555;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    font-size: 25px;

    font-weight: 800;
}

.categoriaTienda span {
    font-size: 14px;
}

.categoriaTienda:hover {
    border-color: #c9c1ff;
}

.categoriaActiva {
    border-color: #6c5ce7;

    background-color: #eeeaff;

    color: #463b78;
}

.contenedorTienda {
    width: min(1000px, 100%);

    display: grid;

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

    gap: 16px;
}

.tarjetaRecompensa {
    min-height: 275px;

    padding: 20px 15px;

    border: 3px solid #e5e1ff;

    border-radius: 22px;

    background-color: white;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}

.iconoRecompensa {
    min-height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 65px;
}

.tarjetaRecompensa h3 {
    margin: 8px 0;

    color: #463b78;

    font-size: 19px;
}

.tarjetaRecompensa p {
    flex: 1;

    margin-bottom: 12px;

    color: #666;

    font-size: 14px;

    line-height: 1.4;
}

.precioRecompensa {
    margin-bottom: 12px;

    padding: 7px 12px;

    border-radius: 12px;

    background-color: #fff7cf;

    color: #665100;

    font-weight: 800;
}

.botonRecompensa {
    width: 100%;

    padding: 11px;

    border: none;

    border-radius: 13px;

    background-color: #6c5ce7;

    color: white;

    font-weight: 800;
}

.botonRecompensa:hover:not(:disabled) {
    background-color: #594bd0;
}

.botonRecompensa:disabled {
    background-color: #27ae60;

    opacity: 1;

    cursor: default;
}

.recompensaEquipada {
    border-color: #27ae60;

    background-color: #f1fff6;
}

.trofeoConseguido {
    width: 100%;

    padding: 10px;

    border-radius: 12px;

    background-color: #d8f4e2;

    color: #176b3a;

    font-weight: 800;
}

.trofeoBloqueado {
    width: 100%;

    padding: 10px;

    border-radius: 12px;

    background-color: #eeeeee;

    color: #777;

    font-size: 13px;

    font-weight: 800;
}

.recompensaBloqueada {
    filter: grayscale(0.75);

    opacity: 0.68;
}

.mensajeTienda {
    width: min(650px, 100%);

    margin-bottom: 20px;

    padding: 13px 18px;

    border-radius: 15px;

    text-align: center;

    font-weight: 800;
}

.mensajeTiendaExito {
    background-color: #d8f4e2;

    color: #176b3a;
}

.mensajeTiendaError {
    background-color: #fadbd8;

    color: #922b21;
}

.avatarJugador {
    position: relative;
}

.avatarEmojiEquipado {
    font-size: 55px;

    line-height: 1;
}

.mascotaEquipada {
    position: absolute;

    right: -9px;

    bottom: -5px;

    width: 42px;

    height: 42px;

    border: 3px solid white;

    border-radius: 50%;

    background-color: #fff7cf;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;
}

.marcoBase {
    border-color: #6c5ce7 !important;
}

.marcoBosque {
    border: 6px solid #27ae60 !important;

    box-shadow:
        0 0 0 4px #d8f4e2;
}

.marcoOceano {
    border: 6px solid #3498db !important;

    box-shadow:
        0 0 0 4px #d6eaf8;
}

.marcoDorado {
    border: 7px solid #f1c40f !important;

    box-shadow:
        0 0 0 4px #fff3b0,
        0 6px 0 rgba(158, 124, 0, 0.2);
}

@media (max-width: 900px) {

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

}

@media (max-width: 700px) {

    .cabeceraTienda {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .cabeceraTienda .botonVolver,
    .saldoTienda {
        justify-self: center;
    }

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

}

@media (max-width: 430px) {

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

}

.recompensaEspecial {
    border-color: #f1c40f;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffbea 100%
        );
}

.requisitoRecompensa {
    width: 100%;

    margin-bottom: 12px;

    padding: 9px 10px;

    border-radius: 12px;

    background-color: #f4f2ff;

    color: #5146a8;

    font-size: 13px;

    font-weight: 800;

    text-align: center;
}

.botonReclamar {
    background-color: #f1c40f !important;

    color: #5b4800 !important;
}

.botonReclamar:hover {
    background-color: #e6b900 !important;
}

.recompensaSecreta {
    border-style: dashed;

    border-color: #8e7cc3;

    background:
        linear-gradient(
            180deg,
            #f8f6ff 0%,
            #ebe7ff 100%
        );
}

.iconoSecreto {
    width: 85px;

    height: 85px;

    margin-bottom: 5px;

    border-radius: 50%;

    background-color: #ded9ff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 52px;
}

.marcoEstelar {
    border: 7px solid #9b59b6 !important;

    box-shadow:
        0 0 0 4px #f1c40f,
        0 0 18px rgba(155, 89, 182, 0.45);
}

.marcoCiencia {
    border: 7px solid #27ae60 !important;

    box-shadow:
        0 0 0 4px #b9f6d0,
        0 6px 0 rgba(39, 174, 96, 0.18);
}

.botonPerfilJugador {
    margin-top: 27px;

    padding: 14px 25px;

    border: none;

    border-radius: 15px;

    background-color: #3498db;

    color: white;

    font-size: 17px;

    font-weight: 800;

    box-shadow:
        0 5px 0 #2471a3;
}

.botonPerfilJugador:hover {
    background-color: #2e86c1;

    transform: translateY(-2px);
}

.pantallaPerfilJugador {
    justify-content: flex-start;

    padding-top: 28px;
}

.cabeceraPerfil {
    width: min(950px, 100%);

    margin-bottom: 22px;

    display: grid;

    grid-template-columns:
        150px 1fr 150px;

    align-items: center;
}

.tituloPerfil {
    grid-column: 2;

    text-align: center;
}

.tituloPerfil h2 {
    margin-bottom: 5px;

    font-size: 36px;
}

.tituloPerfil p {
    margin-bottom: 0;

    color: #555;

    font-size: 16px;
}

.carnetAventurero {
    width: min(900px, 100%);

    padding: 28px;

    border: 4px solid #6c5ce7;

    border-radius: 30px;

    background-color: white;

    box-shadow:
        0 8px 0 rgba(108, 92, 231, 0.14);
}

.zonaIdentidadPerfil {
    padding-bottom: 25px;

    border-bottom: 2px solid #eee;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;
}

.avatarPerfil {
    width: 145px;

    height: 145px;

    flex: 0 0 145px;

    border: 6px solid #6c5ce7;

    border-radius: 50%;

    background-color: #f4f2ff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 78px;
}

.datosIdentidadPerfil {
    position: relative;

    min-width: 0;
}

.etiquetaAventurero {
    display: inline-block;

    margin-bottom: 5px;

    padding: 6px 11px;

    border-radius: 10px;

    background-color: #eeeaff;

    color: #5d4fc9;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;
}

.datosIdentidadPerfil h1 {
    margin: 5px 0;

    font-size: 39px;
}

.mascotaPerfil {
    width: 52px;

    height: 52px;

    position: absolute;

    right: -30px;

    bottom: -10px;

    border: 3px solid white;

    border-radius: 50%;

    background-color: #fff6c8;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.1);
}

.estadisticasPerfil {
    margin: 25px 0;

    display: grid;

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

    gap: 12px;
}

.datoPerfil {
    padding: 16px 10px;

    border-radius: 17px;

    background-color: #f7f5ff;

    text-align: center;
}

.datoPerfil > span {
    display: block;

    font-size: 31px;
}

.datoPerfil strong {
    display: block;

    margin: 5px 0;

    color: #463b78;

    font-size: 27px;
}

.datoPerfil small {
    color: #666;

    font-weight: 700;
}

.seccionPerfil {
    margin-top: 27px;
}

.seccionPerfil h3 {
    margin-bottom: 15px;

    color: #463b78;

    font-size: 22px;
}

#progresoMundosPerfil {
    display: grid;

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

    gap: 14px;
}

.progresoMundoPerfil {
    padding: 16px;

    border: 2px solid #e8e4ff;

    border-radius: 17px;

    background-color: #faf9ff;
}

.cabeceraMundoPerfil {
    margin-bottom: 10px;

    display: flex;

    justify-content: space-between;

    gap: 10px;
}

.cabeceraMundoPerfil > div {
    display: flex;

    align-items: center;

    gap: 7px;
}

.iconoMundoPerfil {
    font-size: 23px;
}

.cabeceraMundoPerfil > span {
    color: #555;

    font-weight: 800;
}

.barraMundoPerfil {
    width: 100%;

    height: 15px;

    margin-bottom: 7px;

    overflow: hidden;

    border-radius: 999px;

    background-color: #e3e3e3;
}

.rellenoMundoPerfil {
    height: 100%;

    border-radius: 999px;

    background-color: #2ecc71;

    transition: width 0.4s ease;
}

.progresoMundoPerfil small {
    color: #777;

    font-size: 12px;

    font-weight: 700;
}

.listaTrofeosPerfil {
    display: grid;

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

    gap: 12px;
}

.trofeoPerfil {
    padding: 14px;

    border: 2px solid #f4dc7d;

    border-radius: 17px;

    background-color: #fffbea;

    display: flex;

    align-items: center;

    gap: 13px;
}

.iconoTrofeoPerfil {
    width: 55px;

    height: 55px;

    flex: 0 0 55px;

    border-radius: 50%;

    background-color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;
}

.trofeoPerfil strong {
    display: block;

    margin-bottom: 4px;

    color: #5b4800;
}

.trofeoPerfil small {
    display: block;

    color: #777;

    line-height: 1.3;
}

.sinTrofeosPerfil {
    grid-column: 1 / -1;

    padding: 20px;

    border: 2px dashed #bbb;

    border-radius: 16px;

    color: #777;

    text-align: center;
}

.sinTrofeosPerfil span {
    font-size: 38px;
}

.sinTrofeosPerfil p {
    margin: 8px 0 0;
}

.accionesPerfil {
    margin-top: 28px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 12px;
}

.botonPersonalizarPerfil {
    padding: 14px 24px;

    border: none;

    border-radius: 14px;

    background-color: #9b59b6;

    color: white;

    font-weight: 800;
}

@media (max-width: 700px) {

    .cabeceraPerfil {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .tituloPerfil {
        grid-column: 1;
    }

    .cabeceraPerfil .botonVolver {
        justify-self: center;
    }

    .zonaIdentidadPerfil {
        flex-direction: column;

        text-align: center;
    }

    .mascotaPerfil {
        right: -15px;
    }

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

    #progresoMundosPerfil,
    .listaTrofeosPerfil {
        grid-template-columns: 1fr;
    }

}

#pantallaPregunta.preguntaJefeFinal {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at top,
            #4d3a85 0%,
            #241b48 42%,
            #151127 100%
        );

    color: white;
}

#pantallaPregunta.preguntaJefeFinal::after {
    content: "";

    position: fixed;

    width: 520px;

    height: 520px;

    top: -260px;

    left: 50%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        rgba(
            241,
            196,
            15,
            0.12
        );

    filter:
        blur(20px);

    pointer-events: none;
}

#pantallaPregunta.preguntaJefeFinal::before {
    content:
        "👑  JEFE FINAL  •  MUNDO DE LA CIENCIA  👑";

    position: relative;

    z-index: 2;

    display: block;

    width: min(
        720px,
        94%
    );

    margin:
        0 auto 20px;

    padding:
        13px 20px;

    border:
        3px solid #f1c40f;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #8e5c00,
            #f1c40f,
            #8e5c00
        );

    color:
        #2b2100;

    text-align:
        center;

    font-size:
        16px;

    font-weight:
        900;

    letter-spacing:
        1px;

    box-shadow:
        0 0 22px
        rgba(
            241,
            196,
            15,
            0.45
        );
}

.preguntaJefeFinal
.cabeceraPregunta {
    position:
        relative;

    z-index:
        2;
}

.preguntaJefeFinal
.datosPregunta {
    color:
        #f7e8ff;
}

.preguntaJefeFinal
.datosPregunta strong {
    color:
        #ffd83d;
}

.preguntaJefeFinal
.monedasPregunta {
    border:
        2px solid #f1c40f;

    background:
        #2e2551;

    color:
        #ffd83d;

    box-shadow:
        0 0 15px
        rgba(
            241,
            196,
            15,
            0.24
        );
}

.preguntaJefeFinal
.botonVolver {
    border-color:
        #f1c40f;

    background:
        #2e2551;

    color:
        #ffe680;
}

.preguntaJefeFinal
#contadorPregunta {
    color:
        white;

    font-size:
        18px;
}

.preguntaJefeFinal
.barraPregunta {
    border-color:
        #f1c40f;

    background:
        #302747;
}

.preguntaJefeFinal
.rellenoPregunta {
    background:
        linear-gradient(
            90deg,
            #e67e22,
            #f1c40f,
            #fff3a0
        );

    box-shadow:
        0 0 12px
        rgba(
            241,
            196,
            15,
            0.55
        );
}

.preguntaJefeFinal
.tarjetaPregunta {
    position:
        relative;

    z-index:
        2;

    border:
        4px solid #f1c40f;

    background:
        linear-gradient(
            180deg,
            #302652 0%,
            #211a3d 100%
        );

    color:
        white;

    box-shadow:
        0 0 28px
        rgba(
            241,
            196,
            15,
            0.30
        );
}

.preguntaJefeFinal
.tarjetaPregunta h2 {
    color:
        #ffe36c !important;

    font-size:
        30px;

    text-shadow:
        0 2px 8px
        rgba(
            0,
            0,
            0,
            0.4
        );
}

.preguntaJefeFinal
.iconoPregunta {
    font-size:
        70px;
}

.preguntaJefeFinal
.instruccionEspecial {
    color:
        #f4edff;

    font-size:
        17px;
}

.preguntaJefeFinal
.zonaEspecial {
    gap:
        14px;
}

.preguntaJefeFinal
.botonEspecial {
    min-height:
        72px;

    border:
        3px solid #675b89;

    background:
        #3a305b;

    color:
        white;

    font-size:
        16px;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease;
}

.preguntaJefeFinal
.botonEspecial:hover:not(:disabled) {
    transform:
        translateY(-2px);

    border-color:
        #f1c40f;

    background:
        #4a3c6d;
}

.preguntaJefeFinal
.botonEspecial.especialSeleccionado {
    border-color:
        #f1c40f;

    background:
        #695124;

    color:
        #fff4b5;

    box-shadow:
        0 0 10px
        rgba(
            241,
            196,
            15,
            0.25
        );
}

.preguntaJefeFinal
.botonComprobarEspecial {
    min-width:
        220px;

    margin-top:
        23px;

    padding:
        15px 25px;

    border:
        3px solid #ffe680;

    background:
        linear-gradient(
            180deg,
            #f1c40f,
            #d79d00
        );

    color:
        #312400;

    font-size:
        17px;

    box-shadow:
        0 5px 0 #8c6700;
}

.preguntaJefeFinal
.botonComprobarEspecial:hover:not(:disabled) {
    transform:
        translateY(-2px);
}

.preguntaJefeFinal
.opcionCorrecta {
    border-color:
        #47ef9b !important;

    background:
        #164c3a !important;

    color:
        #caffdf !important;
}

.preguntaJefeFinal
.opcionIncorrecta {
    border-color:
        #ff6b6b !important;

    background:
        #581f31 !important;

    color:
        #ffd6dc !important;
}

.preguntaJefeFinal
.retroalimentacion {
    border:
        2px solid #f1c40f;

    background:
        #17132b;

    color:
        white;
}

.preguntaJefeFinal
.retroalimentacion h3 {
    color:
        #ffe36c;
}

.preguntaJefeFinal
.retroalimentacion p {
    color:
        #f3eeff;
}

.preguntaJefeFinal
.botonSiguiente {
    border:
        2px solid #ffe680;

    background:
        #f1c40f;

    color:
        #332600;

    box-shadow:
        0 5px 0 #8c6700;
}

#pantallaPregunta.preguntaJefeFinal.jefeDerrotado
.tarjetaPregunta {
    animation:
        victoriaJefe
        0.7s
        ease;
}

@keyframes victoriaJefe {

    0% {
        transform:
            scale(1);
    }

    35% {
        transform:
            scale(1.025);
    }

    70% {
        transform:
            scale(0.99);
    }

    100% {
        transform:
            scale(1);
    }

}

.celebracionJefe {
    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    overflow:
        hidden;

    pointer-events:
        none;
}

.celebracionJefe span {
    position:
        absolute;

    top:
        -60px;

    font-size:
        34px;

    animation:
        caerCelebracionJefe
        2.4s
        ease-in
        forwards;
}

@keyframes caerCelebracionJefe {

    0% {
        transform:
            translateY(-40px)
            rotate(0deg);

        opacity:
            0;
    }

    15% {
        opacity:
            1;
    }

    100% {
        transform:
            translateY(110vh)
            rotate(540deg);

        opacity:
            0.2;
    }

}

@media (max-width: 700px) {

    #pantallaPregunta.preguntaJefeFinal::before {
        font-size:
            12px;

        letter-spacing:
            0;

        padding:
            10px;
    }

    .preguntaJefeFinal
    .tarjetaPregunta h2 {
        font-size:
            24px;
    }

    .preguntaJefeFinal
    .zonaEspecial {
        grid-template-columns:
            1fr;
    }

}

.estadoDominioMundo {
    width: min(600px, 100%);

    margin: 0 auto 25px;

    padding: 16px 22px;

    border: 3px solid #f1c40f;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #fff9d7 0%,
            #ffe680 55%,
            #f1c40f 100%
        );

    color: #594300;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    box-shadow:
        0 6px 0 rgba(145, 106, 0, 0.18);

    text-align: left;
}

.coronaDominio {
    font-size: 48px;
}

.estadoDominioMundo strong {
    display: block;

    font-size: 22px;

    letter-spacing: 0.5px;
}

.estadoDominioMundo small {
    display: block;

    margin-top: 3px;

    font-size: 14px;
}

.nivelMapa.nivelDominado {
    border: 4px solid #f1c40f !important;

    background:
        linear-gradient(
            145deg,
            #4b357c,
            #2c214a
        ) !important;

    color: #fff2a5 !important;

    box-shadow:
        0 0 0 4px #fff2a5,
        0 7px 0 rgba(43, 32, 75, 0.35),
        0 0 25px rgba(241, 196, 15, 0.35);
}

.nivelMapa.nivelDominado .iconoNivel {
    font-size: 46px;
}

.nivelMapa.nivelDominado .nombreNivel {
    color: #ffe566;

    font-weight: 900;
}

.seccionMaestriaPerfil {
    padding-top: 6px;
}

.tituloJefesPerfil {
    margin-top: 28px !important;
}

.listaInsigniasEspeciales {
    display: grid;

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

    gap: 13px;
}

.insigniaEspecialPerfil {
    padding: 15px;

    border: 3px solid #f1c40f;

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            #fffdf1,
            #fff3b2
        );

    display: flex;

    align-items: center;

    gap: 14px;

    box-shadow:
        0 4px 0 rgba(163, 127, 0, 0.14);
}

.medallaInsignia {
    width: 62px;

    height: 62px;

    flex: 0 0 62px;

    border: 3px solid #e1af00;

    border-radius: 50%;

    background-color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 34px;
}

.insigniaEspecialPerfil strong {
    display: block;

    margin-bottom: 4px;

    color: #654e00;

    font-size: 17px;
}

.insigniaEspecialPerfil small {
    display: block;

    color: #756c4d;

    line-height: 1.35;
}

.listaJefesDerrotados {
    display: grid;

    gap: 13px;
}

.jefeDerrotadoPerfil {
    position: relative;

    padding: 16px 120px 16px 16px;

    border: 3px solid #7356a5;

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            #31264f,
            #4a3672
        );

    color: white;

    display: flex;

    align-items: center;

    gap: 14px;

    overflow: hidden;
}

.iconoJefePerfil {
    width: 62px;

    height: 62px;

    flex: 0 0 62px;

    border: 3px solid #f1c40f;

    border-radius: 50%;

    background-color: #211936;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 35px;
}

.jefeDerrotadoPerfil strong {
    display: block;

    margin-bottom: 4px;

    color: #ffe36c;

    font-size: 17px;
}

.jefeDerrotadoPerfil small {
    display: block;

    color: #e6def3;

    line-height: 1.35;
}

.marcaDerrotado {
    position: absolute;

    right: 14px;

    top: 50%;

    transform: translateY(-50%);

    padding: 8px 10px;

    border: 2px solid #f1c40f;

    border-radius: 10px;

    color: #ffe36c;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;
}

.sinMaestriaPerfil {
    grid-column: 1 / -1;

    padding: 18px;

    border: 2px dashed #bbb;

    border-radius: 16px;

    color: #777;

    text-align: center;
}

.sinMaestriaPerfil span {
    font-size: 35px;
}

.sinMaestriaPerfil p {
    margin: 7px 0 0;

    line-height: 1.4;
}

.resumenMaestriaPerfil {
    margin-top: 25px;

    padding: 17px;

    border: 3px solid #e6cc61;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #fffdf3,
            #fff7ce
        );

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;
}

.iconoResumenMaestria {
    font-size: 43px;
}

.resumenMaestriaPerfil strong {
    display: block;

    color: #614b00;

    font-size: 18px;
}

.resumenMaestriaPerfil small {
    display: block;

    margin-top: 3px;

    color: #746b4c;

    line-height: 1.35;
}

@media (max-width: 700px) {

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

    .jefeDerrotadoPerfil {
        padding:
            16px;

        flex-direction:
            column;

        text-align:
            center;
    }

    .marcaDerrotado {
        position:
            static;

        transform:
            none;

        margin-top:
            6px;
    }

    .estadoDominioMundo {
        flex-direction:
            column;

        text-align:
            center;
    }

}

#pantallaPregunta.preguntaJefeFinal::before {
    content: attr(data-jefe-etiqueta);
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="comunicacion"
] {
    background:
        radial-gradient(
            circle at top,
            #7c4b35 0%,
            #492b2b 42%,
            #23161c 100%
        );
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="comunicacion"
]::after {

    background:
        rgba(
            255,
            196,
            91,
            0.16
        );
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="comunicacion"
]::before {

    border-color:
        #ffd166;

    background:
        linear-gradient(
            90deg,
            #8a4f27,
            #ffd166,
            #8a4f27
        );

    color:
        #3f250f;

    box-shadow:
        0 0 22px
        rgba(
            255,
            209,
            102,
            0.42
        );
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="comunicacion"
]
.tarjetaPregunta {

    border-color:
        #ffd166;

    background:
        linear-gradient(
            180deg,
            #49302d 0%,
            #2d2025 100%
        );

    box-shadow:
        0 0 28px
        rgba(
            255,
            209,
            102,
            0.25
        );
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="comunicacion"
]
.tarjetaPregunta h2 {

    color:
        #ffe6a3 !important;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="comunicacion"
]
.botonEspecial {

    border-color:
        #76534d;

    background:
        #513733;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="comunicacion"
]
.botonEspecial:hover:not(:disabled) {

    border-color:
        #ffd166;

    background:
        #65443d;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="comunicacion"
]
.botonEspecial.especialSeleccionado {

    border-color:
        #ffd166;

    background:
        #725328;

    color:
        #fff0bd;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="comunicacion"
]
.botonComprobarEspecial {

    border-color:
        #ffe6a3;

    background:
        linear-gradient(
            180deg,
            #ffd166,
            #d49a34
        );

    color:
        #42280f;

    box-shadow:
        0 5px 0 #855b19;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="comunicacion"
]
.retroalimentacion {

    border-color:
        #ffd166;

    background:
        #27191e;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="comunicacion"
]
.retroalimentacion h3 {

    color:
        #ffe49a;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="personal-social"
] {
    background:
        radial-gradient(
            circle at top,
            #8f2c38 0%,
            #5f1d29 45%,
            #2b1219 100%
        );

    color: white;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="personal-social"
]::after {

    background:
        rgba(
            255,
            220,
            128,
            0.16
        );
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="personal-social"
]::before {

    border-color:
        #ffd76a;

    background:
        linear-gradient(
            90deg,
            #8e2735,
            #ffffff,
            #8e2735
        );

    color:
        #63202a;

    box-shadow:
        0 0 23px
        rgba(
            255,
            215,
            106,
            0.38
        );
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="personal-social"
]
.tarjetaPregunta {

    border-color:
        #ffd76a;

    background:
        linear-gradient(
            180deg,
            #5d2933 0%,
            #351a22 100%
        );

    box-shadow:
        0 0 30px
        rgba(
            255,
            215,
            106,
            0.25
        );
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="personal-social"
]
.tarjetaPregunta h2 {

    color:
        #ffe49a !important;

    text-shadow:
        0 2px 8px
        rgba(
            0,
            0,
            0,
            0.35
        );
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="personal-social"
]
.datosPregunta strong {

    color:
        #ffd76a;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="personal-social"
]
.monedasPregunta {

    border-color:
        #ffd76a;

    background:
        #4c2029;

    color:
        #ffe49a;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="personal-social"
]
.barraPregunta {

    border-color:
        #ffd76a;

    background:
        #402129;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="personal-social"
]
.rellenoPregunta {

    background:
        linear-gradient(
            90deg,
            #d83a4d,
            #ffffff,
            #ffd76a
        );
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="personal-social"
]
.botonEspecial {

    border-color:
        #80515b;

    background:
        #542d36;

    color:
        white;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="personal-social"
]
.botonEspecial:hover:not(:disabled) {

    border-color:
        #ffd76a;

    background:
        #69404a;

    transform:
        translateY(-2px);
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="personal-social"
]
.botonEspecial.especialSeleccionado {

    border-color:
        #ffd76a;

    background:
        #76522d;

    color:
        #fff1bd;

    box-shadow:
        0 0 12px
        rgba(
            255,
            215,
            106,
            0.24
        );
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="personal-social"
]
.botonComprobarEspecial {

    border-color:
        #fff0bd;

    background:
        linear-gradient(
            180deg,
            #ffd76a,
            #d6a52d
        );

    color:
        #492e00;

    box-shadow:
        0 5px 0 #886419;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="personal-social"
]
.retroalimentacion {

    border-color:
        #ffd76a;

    background:
        #29151b;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="personal-social"
]
.retroalimentacion h3 {

    color:
        #ffe49a;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
] {

    background:
        radial-gradient(
            circle at top,
            #fff1a8 0%,
            #d8ab58 20%,
            #66549b 58%,
            #292342 100%
        );

    color:
        white;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]::after {

    background:
        rgba(
            255,
            238,
            161,
            0.28
        );

    filter:
        blur(14px);
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]::before {

    border-color:
        #ffe78b;

    background:
        linear-gradient(
            90deg,
            #72559c,
            #fff0a8,
            #72559c
        );

    color:
        #422f69;

    box-shadow:
        0 0 26px
        rgba(
            255,
            233,
            143,
            0.55
        );
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]
.tarjetaPregunta {

    border-color:
        #ffe78b;

    background:
        linear-gradient(
            180deg,
            #5f4e8a 0%,
            #342d53 100%
        );

    box-shadow:
        0 0 32px
        rgba(
            255,
            231,
            139,
            0.35
        );
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]
.tarjetaPregunta h2 {

    color:
        #fff0a8 !important;

    text-shadow:
        0 0 12px
        rgba(
            255,
            234,
            145,
            0.38
        );
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]
.datosPregunta strong {

    color:
        #fff0a8;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]
.monedasPregunta {

    border-color:
        #ffe78b;

    background:
        #493c70;

    color:
        #fff0a8;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]
.botonVolver {

    border-color:
        #ffe78b;

    background:
        #493c70;

    color:
        #fff0a8;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]
.barraPregunta {

    border-color:
        #ffe78b;

    background:
        #42385f;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]
.rellenoPregunta {

    background:
        linear-gradient(
            90deg,
            #9778c4,
            #ffe78b,
            #fff8d7
        );

    box-shadow:
        0 0 14px
        rgba(
            255,
            231,
            139,
            0.55
        );
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]
.botonEspecial {

    border-color:
        #8271a9;

    background:
        #51456f;

    color:
        white;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]
.botonEspecial:hover:not(:disabled) {

    transform:
        translateY(-2px);

    border-color:
        #ffe78b;

    background:
        #625382;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]
.botonEspecial.especialSeleccionado {

    border-color:
        #ffe78b;

    background:
        #756635;

    color:
        #fff8d2;

    box-shadow:
        0 0 13px
        rgba(
            255,
            231,
            139,
            0.30
        );
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]
.botonComprobarEspecial {

    border-color:
        #fff6ce;

    background:
        linear-gradient(
            180deg,
            #ffe78b,
            #d8ae43
        );

    color:
        #493700;

    box-shadow:
        0 5px 0 #8c6c22;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]
.retroalimentacion {

    border-color:
        #ffe78b;

    background:
        #2d2745;

    color:
        white;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]
.retroalimentacion h3 {

    color:
        #fff0a8;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]
.opcionCorrecta {

    border-color:
        #7ff0ae !important;

    background:
        #245641 !important;

    color:
        #dcffea !important;
}

#pantallaPregunta.preguntaJefeFinal[
    data-jefe-mundo="religion"
]
.opcionIncorrecta {

    border-color:
        #ff8383 !important;

    background:
        #642b42 !important;

    color:
        #ffe0e5 !important;
}

.tarjetaProgresoGeneral {
    width: min(860px, 94%);

    margin:
        15px auto
        28px;

    padding:
        20px;

    border:
        3px solid #d5c276;

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            #fffdf2,
            #fff6cf
        );

    box-shadow:
        0 7px 0
        rgba(
            113,
            91,
            28,
            0.12
        );
}

.cabeceraProgresoGeneral {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        16px;
}

.rangoAventureroGeneral {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}

.iconoRangoGeneral {
    width:
        56px;

    height:
        56px;

    border:
        3px solid #ddc85c;

    border-radius:
        50%;

    background:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        31px;
}

.rangoAventureroGeneral small {
    display:
        block;

    color:
        #877436;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        1px;
}

.rangoAventureroGeneral strong {
    display:
        block;

    margin-top:
        2px;

    color:
        #4f4120;

    font-size:
        21px;
}

.contadorProgresoGeneral {
    padding:
        9px 14px;

    border:
        2px solid #dbc559;

    border-radius:
        999px;

    background:
        white;

    color:
        #5b4b20;

    font-weight:
        900;

    white-space:
        nowrap;
}

.barraProgresoGeneral {
    width:
        100%;

    height:
        18px;

    overflow:
        hidden;

    border:
        2px solid #cab75a;

    border-radius:
        999px;

    background:
        #ece7d1;
}

.rellenoProgresoGeneral {
    width:
        0%;

    height:
        100%;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #70bc72,
            #d8c549,
            #f0b84c
        );

    transition:
        width
        0.45s
        ease;
}

.porcentajeProgresoGeneral {
    margin-top:
        7px;

    color:
        #786a3d;

    font-size:
        13px;

    font-weight:
        700;

    text-align:
        right;
}

.mundosProgresoGeneral {
    display:
        grid;

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

    gap:
        10px;

    margin-top:
        17px;
}

.mundoProgresoGeneral {
    min-height:
        66px;

    padding:
        10px;

    border:
        2px solid #ddd7bd;

    border-radius:
        16px;

    background:
        rgba(
            255,
            255,
            255,
            0.78
        );

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}

.iconoMundoProgreso {
    font-size:
        27px;
}

.mundoProgresoGeneral strong {
    display:
        block;

    color:
        #514a39;

    font-size:
        13px;
}

.mundoProgresoGeneral small {
    display:
        block;

    margin-top:
        3px;

    color:
        #817865;

    font-size:
        11px;
}

.mundoProgresoGeneral.mundoProgresoDominado {
    border-color:
        #e3c444;

    background:
        linear-gradient(
            145deg,
            #fff8ca,
            #fff2a0
        );

    box-shadow:
        0 3px 0
        rgba(
            145,
            111,
            0,
            0.12
        );
}

.mundoProgresoDominado strong {
    color:
        #665000;
}

.tarjetaProgresoGeneral.aventuraCompletada {
    border-color:
        #e3bb32;

    background:
        linear-gradient(
            135deg,
            #fffdf0,
            #ffe985,
            #fff7ca
        );

    box-shadow:
        0 0 24px
        rgba(
            225,
            184,
            48,
            0.30
        );
}

.progresoGeneralPerfil {
    margin-top:
        22px;
}

.rangoPerfilGeneral {
    margin:
        14px 0;

    padding:
        14px;

    border:
        2px solid #d8c76f;

    border-radius:
        18px;

    background:
        #fffbed;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}

.iconoRangoPerfil {
    width:
        57px;

    height:
        57px;

    flex:
        0 0 57px;

    border:
        3px solid #dbc55d;

    border-radius:
        50%;

    background:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        31px;
}

.rangoPerfilGeneral small {
    display:
        block;

    color:
        #88783e;

    font-size:
        11px;

    font-weight:
        900;
}

.rangoPerfilGeneral strong {
    display:
        block;

    margin-top:
        3px;

    color:
        #55461d;

    font-size:
        19px;
}

.textoProgresoPerfil {
    margin:
        8px 0 0;

    color:
        #756c53;

    font-size:
        13px;

    text-align:
        center;
}

.metaFinalPerfil {
    margin-top:
        20px;

    padding:
        15px;

    border:
        2px dashed #aaa;

    border-radius:
        18px;

    background:
        #f6f6f6;

    color:
        #777;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}

.metaFinalPerfil > span {
    font-size:
        38px;
}

.metaFinalPerfil strong {
    display:
        block;

    font-size:
        16px;
}

.metaFinalPerfil small {
    display:
        block;

    margin-top:
        3px;

    line-height:
        1.35;
}

.metaFinalPerfil.metaFinalConseguida {
    border:
        3px solid #e1bd37;

    background:
        linear-gradient(
            135deg,
            #fff9cb,
            #ffe97e
        );

    color:
        #604b00;

    box-shadow:
        0 4px 0
        rgba(
            136,
            101,
            0,
            0.13
        );
}

.celebracionMaestroSaber {
    position:
        fixed;

    inset:
        0;

    z-index:
        20000;

    padding:
        20px;

    background:
        rgba(
            25,
            19,
            43,
            0.88
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

.tarjetaMaestroSaber {
    width:
        min(
            570px,
            94vw
        );

    padding:
        31px;

    border:
        5px solid #f0cc49;

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            #fffdf0,
            #ffe884,
            #fff5b9
        );

    color:
        #594300;

    text-align:
        center;

    box-shadow:
        0 0 50px
        rgba(
            255,
            216,
            75,
            0.45
        );

    animation:
        aparecerMaestroSaber
        0.55s
        ease;
}

@keyframes aparecerMaestroSaber {

    0% {
        transform:
            scale(0.65);

        opacity:
            0;
    }

    65% {
        transform:
            scale(1.04);

        opacity:
            1;
    }

    100% {
        transform:
            scale(1);
    }

}

.coronaMaestroSaber {
    font-size:
        78px;

    line-height:
        1;
}

.estrellasMaestroSaber {
    margin:
        8px 0 13px;

    font-size:
        24px;

    letter-spacing:
        5px;
}

.tarjetaMaestroSaber > small {
    display:
        block;

    font-weight:
        900;

    letter-spacing:
        1.4px;
}

.tarjetaMaestroSaber h2 {
    margin:
        7px 0 12px;

    font-size:
        35px;
}

.tarjetaMaestroSaber p {
    line-height:
        1.55;
}

.premiosMaestroSaber {
    display:
        grid;

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

    gap:
        10px;

    margin:
        23px 0;
}

.premiosMaestroSaber > div {
    padding:
        13px 8px;

    border:
        2px solid #d4b53d;

    border-radius:
        16px;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size:
        28px;
}

.premiosMaestroSaber strong {
    display:
        block;

    margin-top:
        4px;

    font-size:
        17px;
}

.premiosMaestroSaber small {
    display:
        block;

    margin-top:
        2px;

    font-size:
        11px;
}

.botonCerrarMaestroSaber {
    padding:
        14px 25px;

    border:
        0;

    border-radius:
        999px;

    background:
        #65479b;

    color:
        white;

    font-size:
        15px;

    font-weight:
        900;

    cursor:
        pointer;

    box-shadow:
        0 5px 0 #3e2a68;
}

.botonCerrarMaestroSaber:hover {
    transform:
        translateY(-2px);
}

@media (max-width: 760px) {

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

    .cabeceraProgresoGeneral {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

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

}

@media (max-width: 460px) {

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

}

.caminoRangosGeneral {
    position: relative;

    display: grid;

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

    gap: 8px;

    margin-top: 20px;

    padding-top: 15px;

    border-top:
        2px dashed
        rgba(107, 88, 40, 0.20);
}

.hitoRangoGeneral {
    min-height: 85px;

    padding: 10px 6px;

    border:
        2px solid #ddd7bd;

    border-radius: 16px;

    background: #f4f1e7;

    color: #938b76;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}

.hitoRangoGeneral > span {
    font-size: 25px;
}

.hitoRangoGeneral strong {
    margin-top: 3px;

    font-size: 14px;
}

.hitoRangoGeneral small {
    margin-top: 2px;

    font-size: 10px;
}

.hitoRangoConseguido {
    border-color: #e3c24b;

    background:
        linear-gradient(
            145deg,
            #fff9d4,
            #ffed97
        );

    color: #675300;

    box-shadow:
        0 3px 0
        rgba(139, 107, 0, 0.12);
}

.hitoRangoSiguiente {
    border-color: #7861d5;

    background: #f2efff;

    color: #5947a8;

    box-shadow:
        0 0 0 3px
        rgba(120, 97, 213, 0.08);
}

.celebracionAscensoRango {
    position: fixed;

    inset: 0;

    z-index: 21000;

    padding: 20px;

    background:
        rgba(
            31,
            25,
            52,
            0.90
        );

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}

.tarjetaAscensoRango {
    position: relative;

    z-index: 2;

    width:
        min(
            540px,
            94vw
        );

    max-height: 90vh;

    overflow-y: auto;

    padding: 30px;

    border:
        5px solid #f1cf55;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #fffdf1,
            #ffe99a,
            #fff6cf
        );

    color: #554200;

    text-align: center;

    box-shadow:
        0 0 55px
        rgba(
            241,
            207,
            85,
            0.42
        );

    animation:
        aparecerAscensoRango
        0.55s ease;
}

@keyframes aparecerAscensoRango {

    0% {
        transform:
            scale(0.65);

        opacity: 0;
    }

    65% {
        transform:
            scale(1.04);

        opacity: 1;
    }

    100% {
        transform:
            scale(1);

        opacity: 1;
    }

}

.etiquetaAscensoRango {
    display: inline-block;

    padding: 7px 15px;

    border-radius: 999px;

    background: #654ca8;

    color: white;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;
}

.iconoAscensoRango {
    margin: 15px 0 5px;

    font-size: 75px;

    line-height: 1;
}

.tarjetaAscensoRango > small {
    font-weight: 900;

    letter-spacing: 1px;

    color: #89702b;
}

.cantidadAscensoRango {
    margin-top: 4px;

    color: #654ca8;

    font-size: 28px;

    font-weight: 900;
}

.cantidadAscensoRango span {
    font-size: 12px;

    letter-spacing: 1px;
}

.tarjetaAscensoRango h2 {
    margin: 8px 0 10px;

    font-size: 32px;

    color: #493778;
}

.tarjetaAscensoRango > p {
    line-height: 1.5;
}

.premiosAscensoRango {
    display: grid;

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

    gap: 12px;

    margin: 20px 0;
}

.premiosAscensoRango > div {
    padding: 13px;

    border:
        2px solid #dfc257;

    border-radius: 17px;

    background:
        rgba(
            255,
            255,
            255,
            0.75
        );
}

.premiosAscensoRango span {
    display: block;

    font-size: 30px;
}

.premiosAscensoRango strong {
    display: block;

    margin-top: 3px;

    font-size: 19px;
}

.premiosAscensoRango small {
    display: block;

    font-size: 11px;
}

.objetoAscensoRango {
    padding: 15px;

    border:
        3px solid #7c64c2;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #f7f4ff,
            #e8e1ff
        );

    display: flex;

    align-items: center;

    gap: 14px;

    text-align: left;
}

.iconoObjetoAscenso {
    width: 66px;

    height: 66px;

    flex: 0 0 66px;

    border:
        3px solid #8e76d0;

    border-radius: 50%;

    background: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 36px;
}

.objetoAscensoRango small {
    display: block;

    color: #7566a3;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;
}

.objetoAscensoRango strong {
    display: block;

    margin-top: 2px;

    color: #493778;

    font-size: 18px;
}

.objetoAscensoRango p {
    margin: 4px 0 0;

    color: #6e6781;

    font-size: 12px;

    line-height: 1.35;
}

.botonCerrarAscensoRango {
    margin-top: 22px;

    padding: 14px 27px;

    border: 0;

    border-radius: 999px;

    background: #654ca8;

    color: white;

    font-size: 15px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 5px 0 #423174;
}

.botonCerrarAscensoRango:hover {
    transform:
        translateY(-2px);
}

.particulasAscensoRango {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.particulasAscensoRango span {
    position: absolute;

    top: -50px;

    font-size: 32px;

    animation:
        caerParticulaRango
        3.3s linear
        infinite;
}

.particulasAscensoRango span:nth-child(1) {
    left: 5%;
    animation-delay: 0s;
}

.particulasAscensoRango span:nth-child(2) {
    left: 15%;
    animation-delay: 0.8s;
}

.particulasAscensoRango span:nth-child(3) {
    left: 25%;
    animation-delay: 0.3s;
}

.particulasAscensoRango span:nth-child(4) {
    left: 35%;
    animation-delay: 1.2s;
}

.particulasAscensoRango span:nth-child(5) {
    left: 45%;
    animation-delay: 0.5s;
}

.particulasAscensoRango span:nth-child(6) {
    left: 55%;
    animation-delay: 1.5s;
}

.particulasAscensoRango span:nth-child(7) {
    left: 65%;
    animation-delay: 0.2s;
}

.particulasAscensoRango span:nth-child(8) {
    left: 75%;
    animation-delay: 1s;
}

.particulasAscensoRango span:nth-child(9) {
    left: 85%;
    animation-delay: 0.6s;
}

.particulasAscensoRango span:nth-child(10) {
    left: 94%;
    animation-delay: 1.4s;
}

@keyframes caerParticulaRango {

    0% {
        transform:
            translateY(-40px)
            rotate(0deg);

        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    100% {
        transform:
            translateY(110vh)
            rotate(500deg);

        opacity: 0.2;
    }

}

.coleccionPremiosRango {
    margin-top: 22px;
}

.descripcionPremiosRango {
    margin-top: -5px;

    color: #777;

    font-size: 13px;
}

.listaPremiosRango {
    display: grid;

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

    gap: 12px;

    margin-top: 14px;
}

.premioRangoPerfil {
    min-height: 105px;

    padding: 14px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    gap: 12px;
}

.iconoPremioRango {
    width: 55px;

    height: 55px;

    flex: 0 0 55px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;
}

.premioRangoPerfil small {
    display: block;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.6px;
}

.premioRangoPerfil strong {
    display: block;

    margin-top: 3px;

    font-size: 15px;
}

.premioRangoPerfil p {
    margin: 4px 0 0;

    font-size: 11px;

    line-height: 1.3;
}

.premioRangoConseguido {
    border:
        2px solid #d9bc45;

    background:
        linear-gradient(
            145deg,
            #fff9d8,
            #fff0a5
        );

    color: #604e08;
}

.premioRangoConseguido
.iconoPremioRango {
    border:
        2px solid #d9bc45;

    background: white;
}

.premioRangoBloqueado {
    border:
        2px dashed #c7c7c7;

    background: #f3f3f3;

    color: #888;
}

.premioRangoBloqueado
.iconoPremioRango {
    background: #e7e7e7;
}

@media (max-width: 700px) {

    .caminoRangosGeneral {
        grid-template-columns:
            repeat(5, minmax(64px, 1fr));

        overflow-x: auto;

        padding-bottom: 8px;
    }

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

    .objetoAscensoRango {
        flex-direction: column;

        text-align: center;
    }

    .tarjetaAscensoRango h2 {
        font-size: 27px;
    }

}

.pantallaAvatarStudio {
    min-height: 100vh;
    padding: 25px;
    justify-content: flex-start;

    background:
        linear-gradient(
            145deg,
            #fff3ad,
            #f5efff
        );
}

.pantallaAvatarStudio * {
    box-sizing: border-box;
}

.cabeceraAvatarStudio {
    width: min(1180px, 96%);
    margin: 0 auto 22px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;

    padding: 18px 22px;

    border: 3px solid #7560d8;
    border-radius: 24px;

    background: rgba(255, 255, 255, 0.94);

    box-shadow:
        0 7px 0 rgba(74, 58, 137, 0.11);
}

.cabeceraAvatarStudio h2 {
    margin: 0;

    color: #443783;
    font-size: 30px;
}

.cabeceraAvatarStudio p {
    margin: 4px 0 0;

    color: #71698b;
}

.progresoAvatarStudio {
    padding: 10px 15px;

    border: 2px solid #7460cf;
    border-radius: 999px;

    background: white;

    color: #4f4195;

    font-weight: 900;
    white-space: nowrap;
}

.contenidoAvatarStudio {
    width: min(1180px, 96%);
    margin: auto;

    display: grid;

    grid-template-columns:
        310px
        minmax(0, 1fr);

    gap: 22px;
    align-items: stretch;
}

.panelPreviewAvatar {
    min-height: 500px;

    padding: 25px;

    border: 4px solid #7560d8;
    border-radius: 28px;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

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

    text-align: center;

    box-shadow:
        0 7px 0
        rgba(
            74,
            58,
            137,
            0.13
        );
}

.previewAvatarStudio {
    width: 240px;
    height: 240px;

    margin:
        0 auto
        17px;

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

.panelPreviewAvatar h3 {
    margin: 5px 0;

    color: #42357c;

    font-size: 25px;
}

.panelPreviewAvatar p {
    margin: 0;

    color: #817a91;

    font-size: 13px;
}

.panelOpcionesAvatar {
    min-width: 0;

    padding: 20px;

    border: 3px solid #e0d8ff;
    border-radius: 25px;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    box-shadow:
        0 7px 0
        rgba(
            74,
            58,
            137,
            0.08
        );
}

.categoriasAvatarStudio {
    display: flex;

    gap: 8px;

    overflow-x: auto;

    padding: 2px 2px 11px;
}

.categoriaAvatarStudio {
    flex: 0 0 93px;
    min-height: 70px;

    padding: 10px 7px;

    border:
        2px solid #ded8f0;

    border-radius: 15px;

    background: #f6f3ff;

    color: #716993;

    cursor: pointer;

    display: flex;

    flex-direction: column;

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

    gap: 3px;
}

.categoriaAvatarStudio span {
    font-size: 24px;
}

.categoriaAvatarStudio small {
    font-size: 10px;

    font-weight: 800;

    white-space: nowrap;
}

.categoriaAvatarStudio:hover {
    border-color: #826edf;
}

.categoriaAvatarStudio.categoriaAvatarActiva {
    border-color: #6653c8;

    background:
        linear-gradient(
            145deg,
            #7661da,
            #6550c4
        );

    color: white;
}

.tituloCategoriaAvatar {
    margin: 13px 0;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;
}

.tituloCategoriaAvatar h3 {
    margin: 0;

    color: #43377d;

    font-size: 21px;
}

.tituloCategoriaAvatar small {
    color: #928ba4;

    font-size: 11px;
    text-align: right;
}

.opcionesAvatarStudio {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                115px,
                1fr
            )
        );

    gap: 11px;
}

.opcionAvatarStudio {
    min-height: 118px;

    padding: 12px 8px;

    border:
        3px solid #dedbea;

    border-radius: 18px;

    background: white;

    color: #554d69;

    cursor: pointer;

    display: flex;

    flex-direction: column;

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

    gap: 5px;

    text-align: center;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease;
}

.opcionAvatarStudio:hover:not(:disabled) {
    transform:
        translateY(-2px);

    border-color:
        #7965d4;
}

.opcionAvatarStudio strong {
    font-size: 13px;
}

.opcionAvatarStudio small {
    font-size: 9px;

    color: #938ba2;

    font-weight: 800;

    line-height: 1.25;
}

.muestraOpcionAvatar {
    width: 45px;
    height: 45px;

    border-radius: 50%;

    background: #f2effa;

    display: flex;

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

    font-size: 27px;
}

.muestraColorAvatar {
    border:
        3px solid white;

    box-shadow:
        0 0 0 2px
        #d8d4df;
}

.opcionAvatarSeleccionada {
    border-color:
        #6653c8;

    background:
        #f0edff;

    box-shadow:
        0 0 0 3px
        rgba(
            102,
            83,
            200,
            0.10
        );
}

.opcionAvatarBloqueada {
    opacity: 0.55;

    filter:
        grayscale(0.4);

    cursor:
        not-allowed;
}

.accionesAvatarStudio {
    width: min(1180px, 96%);

    margin:
        20px auto
        0;

    display: flex;

    justify-content: flex-end;

    gap: 12px;
}

.botonSecundarioAvatar,
.botonGuardarAvatar {
    padding: 14px 22px;

    border: 0;

    border-radius: 999px;

    font-weight: 900;

    cursor: pointer;
}

.botonSecundarioAvatar {
    background: white;

    color: #645e74;

    border:
        2px solid #d1ccd9;
}

.botonGuardarAvatar {
    background:
        linear-gradient(
            180deg,
            #7661db,
            #5e49bd
        );

    color: white;

    box-shadow:
        0 5px 0
        #443390;
}

.avatarCompuesto {
    --color-piel: #e9bd94;
    --color-cabello: #242127;
    --color-ropa: #6556d9;

    position: relative;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    flex: 0 0 auto;

    overflow: visible;
}

.avatarFondoDecoracion {
    position: absolute;

    inset: 5px;

    overflow: hidden;

    border-radius: 50%;

    z-index: 0;
}

.fondo_avatar_cielo
.avatarFondoDecoracion {
    background:
        linear-gradient(
            #d9ecff,
            #eff8ff
        );
}

.fondo_avatar_limon
.avatarFondoDecoracion {
    background:
        linear-gradient(
            #fff2a5,
            #fff9d7
        );
}

.fondo_avatar_lila
.avatarFondoDecoracion {
    background:
        linear-gradient(
            #e3d6ff,
            #f6f0ff
        );
}

.fondo_avatar_verde
.avatarFondoDecoracion {
    background:
        linear-gradient(
            #ccefd8,
            #effbf3
        );
}

.fondo_avatar_bosque
.avatarFondoDecoracion {
    background:
        linear-gradient(
            #98d3aa,
            #dff2ca
        );
}

.fondo_avatar_bosque
.avatarFondoDecoracion::after {
    content:
        "🌳";

    position:
        absolute;

    left: 7%;
    bottom: 4%;

    font-size: 31px;

    opacity: 0.50;
}

.fondo_avatar_mar
.avatarFondoDecoracion {
    background:
        linear-gradient(
            #8ed9ee,
            #dff8ff
        );
}

.fondo_avatar_mar
.avatarFondoDecoracion::after {
    content:
        "🌊";

    position:
        absolute;

    left: 3%;
    bottom: 0;

    font-size: 36px;

    opacity: 0.65;
}

.fondo_avatar_espacio
.avatarFondoDecoracion {
    background:
        radial-gradient(
            circle at top,
            #5b57a8,
            #221e48
        );
}

.fondo_avatar_espacio
.avatarFondoDecoracion::after {
    content:
        "✨";

    position:
        absolute;

    right: 8%;
    top: 10%;

    font-size: 25px;

    animation:
        brilloFondoAvatar
        1.7s ease-in-out
        infinite alternate;
}

.fondo_avatar_biblioteca
.avatarFondoDecoracion {
    background:
        linear-gradient(
            #c58c55,
            #f1d3a5
        );
}

.fondo_avatar_biblioteca
.avatarFondoDecoracion::after {
    content:
        "📚";

    position:
        absolute;

    left: 3%;
    bottom: 2%;

    font-size: 32px;

    opacity: 0.7;
}

.fondo_avatar_maestro
.avatarFondoDecoracion {
    background:
        radial-gradient(
            circle,
            #fff7b2,
            #d4ad31,
            #6750a5
        );
}

@keyframes brilloFondoAvatar {
    from {
        opacity: 0.4;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1.2);
    }
}

.avatarPersonajeCompuesto {
    position: absolute;

    z-index: 2;

    left: 50%;
    bottom: 8%;

    width: 72%;
    height: 82%;

    transform:
        translateX(-50%);
}

.avatarCuerpoCompuesto {
    position: absolute;

    z-index: 2;

    left: 50%;
    bottom: 0;

    width: 72%;
    height: 42%;

    transform:
        translateX(-50%);

    border-radius:
        48% 48%
        28% 28%;

    background:
        var(--color-ropa);

    box-shadow:
        inset
        0 -4px 0
        rgba(
            0,
            0,
            0,
            0.08
        );
}

.avatarCuelloCompuesto {
    position: absolute;

    z-index: 3;

    left: 50%;
    top: 52%;

    width: 20%;
    height: 15%;

    transform:
        translateX(-50%);

    background:
        var(--color-piel);
}

.avatarCabezaCompuesta {
    position: absolute;

    z-index: 4;

    left: 50%;
    top: 12%;

    width: 62%;
    aspect-ratio: 1;

    transform:
        translateX(-50%);

    border-radius:
        46% 46%
        49% 49%;

    background:
        var(--color-piel);

    box-shadow:
        inset
        0 -3px 0
        rgba(
            0,
            0,
            0,
            0.06
        );
}

.avatarOreja {
    position: absolute;

    top: 43%;

    width: 15%;
    height: 23%;

    border-radius: 50%;

    background:
        var(--color-piel);

    z-index: -1;
}

.avatarOrejaIzq {
    left: -8%;
}

.avatarOrejaDer {
    right: -8%;
}

.avatarRostroCompuesto {
    position: absolute;

    z-index: 4;

    left: 50%;
    top: 47%;

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

    color: #4d3b36;

    font-family:
        Arial,
        sans-serif;

    font-size: 20px;

    font-weight: 900;

    white-space: nowrap;
}

.avatarCabelloAtras,
.avatarCabelloFrente {
    position: absolute;

    background:
        var(--color-cabello);

    pointer-events: none;
}

.avatarCabelloAtras {
    z-index: 1;

    left: 50%;
    top: 7%;

    transform:
        translateX(-50%);
}

.avatarCabelloFrente {
    z-index: 5;
}

.avatarCabelloFrente.cabello_corto {
    left: 7%;
    top: -7%;

    width: 86%;
    height: 35%;

    border-radius:
        55% 55%
        35% 35%;
}

.avatarCabelloAtras.cabello_rizado {
    width: 70%;
    height: 54%;

    border-radius: 50%;

    box-shadow:
        -18px 4px 0
        var(--color-cabello),

        18px 4px 0
        var(--color-cabello),

        -12px 18px 0
        var(--color-cabello),

        12px 18px 0
        var(--color-cabello);
}

.avatarCabelloFrente.cabello_rizado {
    left: 8%;
    top: -8%;

    width: 84%;
    height: 29%;

    border-radius: 50%;
}

.avatarCabelloAtras.cabello_largo {
    width: 65%;
    height: 73%;

    border-radius:
        48% 48%
        35% 35%;
}

.avatarCabelloFrente.cabello_largo {
    left: 6%;
    top: -7%;

    width: 88%;
    height: 32%;

    border-radius:
        55% 55%
        30% 30%;
}

.avatarCabelloFrente.cabello_puntas {
    left: 5%;
    top: -13%;

    width: 90%;
    height: 42%;

    clip-path:
        polygon(
            0 70%,
            12% 16%,
            25% 52%,
            42% 0,
            56% 49%,
            73% 8%,
            85% 56%,
            100% 22%,
            96% 100%,
            5% 100%
        );
}

.avatarCabelloFrente.cabello_estrella {
    left: 4%;
    top: -11%;

    width: 92%;
    height: 38%;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            var(--color-cabello),
            #9a78e8,
            var(--color-cabello)
        );

    animation:
        cabelloEstelar
        2s ease-in-out
        infinite alternate;
}

@keyframes cabelloEstelar {
    to {
        filter:
            brightness(1.35);
    }
}

.avatarCabelloAtras.cabello_ninguno,
.avatarCabelloFrente.cabello_ninguno {
    display: none;
}

.avatarAccesorioCompuesto {
    position: absolute;

    z-index: 8;

    pointer-events: none;
}

.avatarAccesorioCompuesto.acc_ninguno {
    display: none;
}

.avatarAccesorioCompuesto.acc_lentes {
    left: 50%;
    top: 31%;

    transform:
        translateX(-50%);

    font-size: 24px;
}

.avatarAccesorioCompuesto.acc_gorra {
    left: 50%;
    top: -32%;

    transform:
        translateX(-50%);

    font-size: 34px;
}

.avatarAccesorioCompuesto.acc_lazo {
    right: -19%;
    top: -8%;

    font-size: 27px;
}

.avatarAccesorioCompuesto.acc_audifonos {
    left: 50%;
    top: -10%;

    transform:
        translateX(-50%);

    font-size: 39px;
}

.avatarAccesorioCompuesto.acc_corona {
    left: 50%;
    top: -41%;

    transform:
        translateX(-50%);

    font-size: 34px;

    animation:
        coronaAvatar
        1.5s ease-in-out
        infinite alternate;
}

@keyframes coronaAvatar {
    to {
        transform:
            translateX(-50%)
            translateY(-3px);

        filter:
            drop-shadow(
                0 0 5px
                #f5d85e
            );
    }
}

.ropa_camiseta
.avatarDetalleRopa::after {
    content: "";
}

.ropa_sudadera {
    border-radius:
        52% 52%
        22% 22%;
}

.ropa_sudadera
.avatarDetalleRopa::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 7%;

    width: 25%;
    height: 20%;

    transform:
        translateX(-50%);

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            0.50
        );

    border-radius: 50%;
}

.ropa_uniforme
.avatarDetalleRopa::after {
    content: "◆";

    position: absolute;

    left: 50%;
    top: 6%;

    transform:
        translateX(-50%);

    color: white;

    font-size: 15px;
}

.ropa_chaleco
.avatarDetalleRopa::after {
    content: "│";

    position: absolute;

    left: 50%;
    top: 1%;

    color:
        rgba(
            255,
            255,
            255,
            0.85
        );

    font-size: 27px;
}

.disfraz_cientifico
.avatarCuerpoCompuesto {
    background: #f4f4f4;

    border:
        2px solid #bcc3ca;
}

.disfraz_cientifico
.avatarDetalleRopa::after {
    content: "🔬";

    position: absolute;

    left: 50%;
    top: 20%;

    transform:
        translateX(-50%);

    font-size: 18px;
}

.disfraz_explorador
.avatarCuerpoCompuesto {
    background: #b7854e;
}

.disfraz_explorador
.avatarDetalleRopa::after {
    content: "🧭";

    position: absolute;

    left: 50%;
    top: 18%;

    transform:
        translateX(-50%);

    font-size: 18px;
}

.disfraz_heroe
.avatarCuerpoCompuesto {
    background:
        linear-gradient(
            #4d67c7,
            #394b9e
        );
}

.disfraz_heroe
.avatarDetalleRopa::after {
    content: "⭐";

    position: absolute;

    left: 50%;
    top: 17%;

    transform:
        translateX(-50%);

    font-size: 18px;
}

.disfraz_maestro
.avatarCuerpoCompuesto {
    background:
        linear-gradient(
            #8066c4,
            #4e387e
        );
}

.disfraz_maestro
.avatarDetalleRopa::after {
    content: "👑";

    position: absolute;

    left: 50%;
    top: 15%;

    transform:
        translateX(-50%);

    font-size: 19px;
}

.avatarDistintivo {
    position: absolute;

    z-index: 6;

    right: 8%;
    top: 33%;

    font-size: 17px;

    filter:
        drop-shadow(
            0 1px 1px
            rgba(
                0,
                0,
                0,
                0.20
            )
        );
}

.avatarMascotaCompuesta {
    position: absolute;

    z-index: 9;

    right: -5%;
    bottom: 4%;

    font-size: 28px;

    animation:
        mascotaFlotar
        2s ease-in-out
        infinite;
}

.avatarMascotaCompuesta.mascota_ninguna {
    display: none;
}

.avatarMascotaCompuesta.mascota_robot {
    animation:
        mascotaRobot
        0.8s ease-in-out
        infinite alternate;
}

.avatarMascotaCompuesta.mascota_dragon,
.avatarMascotaCompuesta.mascota_fenix {
    font-size: 31px;

    animation:
        mascotaVoladora
        2.1s ease-in-out
        infinite;
}

@keyframes mascotaFlotar {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-5px)
            rotate(2deg);
    }
}

@keyframes mascotaRobot {
    to {
        transform:
            translateY(-3px)
            rotate(4deg);
    }
}

@keyframes mascotaVoladora {
    0%,
    100% {
        transform:
            translate(
                0,
                0
            );
    }

    50% {
        transform:
            translate(
                -3px,
                -9px
            );
    }
}

.marco_avatar_simple {
    border:
        4px solid #7561da;

    background: white;
}

.marco_avatar_suave {
    border:
        5px solid #cec4ff;

    box-shadow:
        0 4px 12px
        rgba(
            93,
            72,
            168,
            0.20
        );
}

.marco_avatar_brillo {
    border:
        5px solid #f0cf55;

    animation:
        marcoBrillante
        1.6s ease-in-out
        infinite alternate;
}

@keyframes marcoBrillante {
    from {
        box-shadow:
            0 0 5px #f0cf55;
    }

    to {
        box-shadow:
            0 0 20px #ffe47e;
    }
}

.marco_avatar_neon {
    border:
        5px solid #62d8ff;

    animation:
        marcoNeon
        1.3s ease-in-out
        infinite alternate;
}

@keyframes marcoNeon {
    from {
        box-shadow:
            0 0 6px
            #62d8ff;
    }

    to {
        box-shadow:
            0 0 20px
            #b578ff;
    }
}

.marco_avatar_dorado {
    border:
        6px solid #e0b72f;

    box-shadow:
        0 0 16px
        rgba(
            224,
            183,
            47,
            0.60
        );
}

.marco_avatar_maestro {
    border:
        6px solid #f5d852;

    animation:
        marcoMaestro
        2s linear
        infinite;
}

@keyframes marcoMaestro {
    0% {
        box-shadow:
            0 0 7px
            #f5d852;
    }

    50% {
        box-shadow:
            0 0 22px
            #a97eff;
    }

    100% {
        box-shadow:
            0 0 7px
            #f5d852;
    }
}

.avatarPreviewGrande {
    width: 220px;
    height: 220px;
}

.avatarPreviewGrande
.avatarRostroCompuesto {
    font-size: 39px;
}

.avatarPreviewGrande
.avatarAccesorioCompuesto.acc_lentes {
    font-size: 42px;
}

.avatarPreviewGrande
.avatarAccesorioCompuesto.acc_gorra,
.avatarPreviewGrande
.avatarAccesorioCompuesto.acc_corona {
    font-size: 58px;
}

.avatarPreviewGrande
.avatarMascotaCompuesta {
    font-size: 48px;
}

.avatarPreviewGrande
.avatarDistintivo {
    font-size: 30px;
}

.avatarVistaJuego {
    width: 90px;
    height: 90px;
}

.avatarVistaPerfil {
    width: 155px;
    height: 155px;
}

.avatarVistaPerfil
.avatarRostroCompuesto {
    font-size: 29px;
}

.avatarVistaPerfil
.avatarMascotaCompuesta {
    font-size: 38px;
}

.contenedorAvatarPersonalizado {
    display: flex;

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

    overflow: visible !important;
}

@media (max-width: 850px) {

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

    .panelPreviewAvatar {
        width: 100%;
        min-height: auto;
    }

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

    .progresoAvatarStudio {
        justify-self: start;
    }

}

@media (max-width: 600px) {

    .pantallaAvatarStudio {
        padding: 14px;
    }

    .previewAvatarStudio {
        width: 190px;
        height: 190px;
    }

    .avatarPreviewGrande {
        width: 180px;
        height: 180px;
    }

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

    .accionesAvatarStudio {
        flex-direction: column;
    }

    .accionesAvatarStudio button {
        width: 100%;
    }

}

.pantallaTiendaAvatar {
    min-height: 100vh;

    padding: 25px;

    background:
        linear-gradient(
            145deg,
            #fff2a5,
            #f0ebff
        );
}

.cabeceraTiendaAvatar {
    width: min(1120px, 96%);

    margin: 0 auto 20px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 18px;
}

.cabeceraTiendaAvatar h2 {
    margin: 0;

    color: #453784;

    font-size: 29px;
}

.cabeceraTiendaAvatar p {
    margin: 3px 0 0;

    color: #756e8e;
}

.saldoTiendaAvatar {
    padding: 11px 16px;

    border: 3px solid #efc348;

    border-radius: 999px;

    background: white;

    color: #654c00;

    font-size: 17px;
}

.zonaSuperiorTiendaAvatar {
    width: min(1120px, 96%);

    margin:
        0 auto
        18px;

    padding: 15px;

    border: 3px solid #dbd2ff;

    border-radius: 22px;

    background:
        rgba(
            255,
            255,
            255,
            0.85
        );

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;
}

.previewTiendaAvatar {
    width: 135px;

    height: 135px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.avatarPreviewTienda {
    width: 125px;

    height: 125px;
}

.botonIrEstudioAvatar {
    padding: 13px 20px;

    border: 0;

    border-radius: 999px;

    background: #6a55ca;

    color: white;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 4px 0
        #473696;
}

.categoriasTiendaAvatar {
    width: min(1120px, 96%);

    margin:
        0 auto
        17px;

    display: flex;

    gap: 8px;

    overflow-x: auto;

    padding-bottom: 7px;
}

.categoriaTiendaAvatar {
    min-width: 105px;

    padding: 10px;

    border:
        2px solid #d8d2ea;

    border-radius: 16px;

    background: white;

    color: #6e6687;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 3px;
}

.categoriaTiendaAvatar span {
    font-size: 25px;
}

.categoriaTiendaAvatar small {
    font-size: 10px;

    font-weight: 900;
}

.categoriaTiendaAvatarActiva {
    border-color: #6a55ca;

    background:
        linear-gradient(
            145deg,
            #7964dc,
            #614cc1
        );

    color: white;
}

.itemsTiendaAvatar {
    width: min(1120px, 96%);

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                175px,
                1fr
            )
        );

    gap: 14px;
}

.tarjetaItemTiendaAvatar {
    padding: 15px;

    border:
        3px solid #e0dceb;

    border-radius: 21px;

    background: white;

    text-align: center;

    box-shadow:
        0 5px 0
        rgba(
            81,
            68,
            118,
            0.10
        );
}

.itemTiendaAvatarComprado {
    border-color: #d8b941;

    background:
        linear-gradient(
            #fffef6,
            #fff6c9
        );
}

.visualItemTiendaAvatar {
    height: 77px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.emojiItemTiendaAvatar {
    font-size: 49px;
}

.tarjetaItemTiendaAvatar h3 {
    margin:
        4px 0
        8px;

    color: #50466b;

    font-size: 16px;
}

.precioItemTiendaAvatar {
    min-height: 26px;

    color: #826c25;

    font-size: 12px;

    font-weight: 900;
}

.accionItemTiendaAvatar {
    width: 100%;

    margin-top: 10px;

    padding: 10px;

    border: 0;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 900;

    cursor: pointer;
}

.botonComprarItemAvatar {
    background: #efc348;

    color: #554000;
}

.botonEquiparItemAvatar {
    background: #6550c4;

    color: white;
}

.botonItemEquipadoAvatar {
    background: #78c48c;

    color: #174f27;

    cursor: default;
}

.mensajeTiendaAvatar {
    width: min(600px, 92%);

    margin:
        0 auto
        16px;

    padding: 12px 16px;

    border-radius: 14px;

    text-align: center;

    font-weight: 800;
}

.mensajeTiendaAvatarOk {
    border:
        2px solid #67bb7c;

    background: #e5f8e9;

    color: #2d713e;
}

.mensajeTiendaAvatarError {
    border:
        2px solid #dc7777;

    background: #ffe8e8;

    color: #9b3434;
}

.capasImagenAvatar {
    position: absolute;

    inset: 0;

    pointer-events: none;
}

.capaImagenAvatar {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: contain;

    pointer-events: none;
}

.avatarCabelloFrente.cabello_ondulado {
    left: 4%;

    top: -8%;

    width: 92%;

    height: 39%;

    border-radius:
        55% 55%
        35% 35%;

    box-shadow:
        -5px 8px 0
        var(--color-cabello),

        5px 8px 0
        var(--color-cabello);
}

.avatarCabelloAtras.cabello_ondulado {
    width: 71%;

    height: 63%;

    border-radius: 50%;
}

.avatarCabelloFrente.cabello_coleta {
    left: 6%;

    top: -7%;

    width: 88%;

    height: 33%;

    border-radius: 55%;
}

.avatarCabelloAtras.cabello_coleta {
    width: 52%;

    height: 52%;

    border-radius: 50%;

    box-shadow:
        31px 13px 0
        -5px
        var(--color-cabello);
}

.ropa_deportiva {
    background:
        linear-gradient(
            90deg,
            var(--color-ropa) 0%,
            var(--color-ropa) 44%,
            white 44%,
            white 56%,
            var(--color-ropa) 56%
        );
}

.ropa_galaxia {
    background:
        linear-gradient(
            145deg,
            #25245c,
            #6653b9,
            #26234e
        ) !important;
}

.ropa_galaxia
.avatarDetalleRopa::after {
    content: "✨";

    position: absolute;

    left: 50%;

    top: 17%;

    transform:
        translateX(-50%);
}

.avatarAccesorioCompuesto.acc_estrella {
    right: -17%;

    top: -7%;

    font-size: 27px;
}

.avatarAccesorioCompuesto.acc_sombrero {
    left: 50%;

    top: -42%;

    transform:
        translateX(-50%);

    font-size: 42px;
}

.avatarAccesorioCompuesto.acc_visor {
    left: 50%;

    top: 28%;

    transform:
        translateX(-50%);

    font-size: 30px;
}

.avatarAccesorioCompuesto.acc_jefe_peru {
    right: -20%;

    top: 3%;

    font-size: 25px;
}

.disfraz_mago
.avatarCuerpoCompuesto {
    background:
        linear-gradient(
            #6d55aa,
            #3f3078
        );
}

.disfraz_mago
.avatarDetalleRopa::after {
    content: "⭐";

    position: absolute;

    left: 50%;

    top: 18%;

    transform:
        translateX(-50%);
}

.disfraz_pirata
.avatarCuerpoCompuesto {
    background:
        linear-gradient(
            #b94c4c,
            #752b31
        );
}

.disfraz_pirata
.avatarDetalleRopa::after {
    content: "☠";

    position: absolute;

    left: 50%;

    top: 16%;

    transform:
        translateX(-50%);

    color: white;
}

.avatarMascotaCompuesta.mascota_abeja {
    animation:
        mascotaVoladora
        1.1s ease-in-out
        infinite;
}

.avatarMascotaCompuesta.mascota_panda {
    animation:
        mascotaFlotar
        2.2s ease-in-out
        infinite;
}

.avatarMascotaCompuesta.mascota_alien {
    animation:
        alienAvatar
        1.8s ease-in-out
        infinite alternate;
}

@keyframes alienAvatar {

    to {
        transform:
            translateY(-7px)
            rotate(5deg);

        filter:
            drop-shadow(
                0 0 6px
                #6dff99
            );
    }

}

.marco_avatar_arcoiris {
    border:
        6px solid transparent;

    background:
        linear-gradient(
            white,
            white
        )
        padding-box,

        linear-gradient(
            90deg,
            #ff6868,
            #ffc65b,
            #83d383,
            #6fb7ff,
            #a77bff
        )
        border-box;
}

.marco_avatar_estrellas {
    border:
        6px solid #ffe168;

    box-shadow:
        0 0 18px
        rgba(
            255,
            219,
            80,
            0.65
        );

    animation:
        marcoEstrellasAvatar
        1.3s ease-in-out
        infinite alternate;
}

@keyframes marcoEstrellasAvatar {

    to {
        filter:
            brightness(1.20);

        box-shadow:
            0 0 28px
            rgba(
                255,
                217,
                73,
                0.90
            );
    }

}

.marco_jefe_ciencia {
    border:
        6px solid #70d6c9;

    box-shadow:
        0 0 20px
        rgba(
            74,
            221,
            202,
            0.55
        );
}

.marco_jefe_luz {
    border:
        6px solid #ffe89b;

    animation:
        marcoLuzJefe
        1.7s ease-in-out
        infinite alternate;
}

@keyframes marcoLuzJefe {

    to {
        box-shadow:
            0 0 30px
            rgba(
                255,
                235,
                151,
                0.90
            );
    }

}

.fondo_avatar_atardecer
.avatarFondoDecoracion {
    background:
        linear-gradient(
            #ffb175,
            #f58a88,
            #7866aa
        );
}

.fondo_avatar_castillo
.avatarFondoDecoracion {
    background:
        linear-gradient(
            #bde2ff,
            #f2ecce
        );
}

.fondo_avatar_castillo
.avatarFondoDecoracion::after {
    content: "🏰";

    position: absolute;

    left: 6%;

    bottom: 0;

    font-size: 37px;

    opacity: 0.48;
}

.fondo_avatar_arcade
.avatarFondoDecoracion {
    background:
        linear-gradient(
            #241942,
            #4e2b72
        );
}

.fondo_avatar_arcade
.avatarFondoDecoracion::after {
    content: "🎮";

    position: absolute;

    right: 4%;

    bottom: 2%;

    font-size: 32px;

    opacity: 0.65;
}

.fondo_jefe_comunicacion
.avatarFondoDecoracion {
    background:
        linear-gradient(
            #71472f,
            #d7ad70
        );
}

.fondo_jefe_comunicacion
.avatarFondoDecoracion::after {
    content: "📚";

    position: absolute;

    left: 3%;

    bottom: 0;

    font-size: 37px;

    opacity: 0.65;
}

@media (max-width: 700px) {

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

    .zonaSuperiorTiendaAvatar {
        flex-direction: column;
    }

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

}

.capaBaseCabezaAvatar {
    position: absolute;
    inset: 0;
    z-index: 4;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}





.usaImagenRostro .avatarRostroCompuesto {
    opacity: 0 !important;
}

.usaImagenCabello .avatarCabelloAtras,
.usaImagenCabello .avatarCabelloFrente {
    opacity: 0 !important;
}

.capaImagenAvatar-cabello {
    position: absolute !important;

    left: 50% !important;
    right: auto !important;

    top: auto !important;
    bottom: 7% !important;

    width: 72% !important;
    height: 82% !important;

    transform: translateX(-50%) !important;

    object-fit: contain !important;

    pointer-events: none !important;
    user-select: none !important;
}

.capaImagenAvatar-rostro {
    position: absolute !important;

    left: 50% !important;
    right: auto !important;

    top: auto !important;
    bottom: 7% !important;

    width: 72% !important;
    height: 82% !important;

    transform: translateX(-50%) !important;

    object-fit: contain !important;

    pointer-events: none !important;
    user-select: none !important;
}

.usaImagenRopa .avatarCuerpoCompuesto {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.usaImagenRopa .avatarDetalleRopa {
    opacity: 0 !important;
}

.capaImagenAvatar-ropa {
    position: absolute !important;

    left: 50% !important;
    right: auto !important;

    top: auto !important;
    bottom: 7% !important;

    width: 72% !important;
    height: 82% !important;

    transform: translateX(-50%) !important;

    object-fit: contain !important;

    pointer-events: none !important;
    user-select: none !important;
}

.usaImagenDisfraz .avatarCuerpoCompuesto {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.usaImagenDisfraz .avatarDetalleRopa {
    opacity: 0 !important;
}

.capaImagenAvatar-disfraz {
    position: absolute !important;

    left: 50% !important;
    right: auto !important;

    top: auto !important;
    bottom: 7% !important;

    width: 72% !important;
    height: 82% !important;

    transform: translateX(-50%) !important;

    object-fit: contain !important;

    pointer-events: none !important;
    user-select: none !important;
}

.muestraOpcionAvatar.muestraImagenAvatar {
    overflow: hidden;
    padding: 3px;
    background: #f5f2ff;
}

.miniaturaRealAvatar {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}

.opcionAvatarStudio,
.tarjetaItemTiendaAvatar {
    position: relative;
}

.rarezaAvatar-normal {
    --color-rareza-avatar: #96909d;
}

.rarezaAvatar-normal.opcionAvatarStudio,
.rarezaAvatar-normal.tarjetaItemTiendaAvatar {
    border-color: #d8d4dc;
}

.rarezaAvatar-poco_comun {
    --color-rareza-avatar: #4dad76;
}

.rarezaAvatar-poco_comun.opcionAvatarStudio,
.rarezaAvatar-poco_comun.tarjetaItemTiendaAvatar {
    border-color: #71c493;
}

.rarezaAvatar-especial {
    --color-rareza-avatar: #597bd6;
}

.rarezaAvatar-especial.opcionAvatarStudio,
.rarezaAvatar-especial.tarjetaItemTiendaAvatar {
    border-color: #7796e2;
}

.rarezaAvatar-epica {
    --color-rareza-avatar: #9855cf;
}

.rarezaAvatar-epica.opcionAvatarStudio,
.rarezaAvatar-epica.tarjetaItemTiendaAvatar {
    border-color: #ae70dc;

    box-shadow:
        0 0 10px
        rgba(152, 85, 207, 0.15);
}

.rarezaAvatar-legendaria {
    --color-rareza-avatar: #d2a426;
}

.rarezaAvatar-legendaria.opcionAvatarStudio,
.rarezaAvatar-legendaria.tarjetaItemTiendaAvatar {
    border-color: #e0b937;

    background:
        linear-gradient(
            145deg,
            #fffef8,
            #fff8d7
        );

    box-shadow:
        0 0 15px
        rgba(224, 185, 55, 0.24);
}

.etiquetaRarezaAvatar {
    margin-top: 4px;
    padding: 3px 7px;

    border-radius: 999px;

    background:
        var(--color-rareza-avatar, #999);

    color: white;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.etiquetaRarezaAvatar-normal {
    background: #96909d;
}

.etiquetaRarezaAvatar-poco_comun {
    background: #4dad76;
}

.etiquetaRarezaAvatar-especial {
    background: #597bd6;
}

.etiquetaRarezaAvatar-epica {
    background: #9855cf;
}

.etiquetaRarezaAvatar-legendaria {
    background:
        linear-gradient(
            90deg,
            #bf8c0c,
            #e1bc3f
        );
}

.etiquetaAnimadaAvatar {
    margin-top: 3px;

    color: #7653ba;

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

.etiquetaAnimadaTienda {
    display: inline-block;

    margin-top: 8px;
    padding: 4px 8px;

    border-radius: 999px;

    background: #eee7ff;
    color: #6748a5;

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

.etiquetaRarezaTienda {
    display: inline-block;

    margin-bottom: 7px;
    padding: 4px 8px;

    border-radius: 999px;

    color: white;

    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
}

.subtituloItemAvatar,
.subtituloItemTiendaAvatar {
    display: block;

    max-width: 100%;

    color: #888098;

    font-size: 7px;
    line-height: 1.2;
    text-align: center;
}

.subtituloItemTiendaAvatar {
    margin: -4px 0 7px;
    font-size: 9px;
}

.capaImagenAvatar-ropa,
.capaImagenAvatar-disfraz {
    transform-origin: center center;
    will-change: filter, opacity;
}

.animacion-ropa_olimpiadas_rojo .capaImagenAvatar-ropa,
.animacion-ropa_olimpiadas_azul .capaImagenAvatar-ropa,
.animacion-ropa_olimpiadas_verde .capaImagenAvatar-ropa {
    animation:
        animacionOlimpiadas
        2s
        ease-in-out
        infinite;
}

@keyframes animacionOlimpiadas {

    0%,
    100% {
        filter:
            brightness(1)
            saturate(1);
    }

    50% {
        filter:
            brightness(1.2)
            saturate(1.25)
            drop-shadow(
                0 0 6px
                rgba(255, 255, 255, 0.75)
            );
    }
}

.animacion-ropa_jm_casaca .capaImagenAvatar-ropa {
    animation:
        animacionCasacaJM
        2.8s
        ease-in-out
        infinite;
}

@keyframes animacionCasacaJM {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter:
            brightness(1.14)
            contrast(1.04);
    }
}

.animacion-ropa_overol_personaje .capaImagenAvatar-ropa {
    animation:
        animacionOverol
        2.6s
        ease-in-out
        infinite;
}

@keyframes animacionOverol {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter:
            brightness(1.15)
            saturate(1.15)
            drop-shadow(
                0 0 5px
                rgba(255, 215, 120, 0.55)
            );
    }
}

.animacion-ropa_galaxia .capaImagenAvatar-ropa {
    animation:
        animacionGalaxia
        3.2s
        ease-in-out
        infinite;
}

@keyframes animacionGalaxia {

    0% {
        filter:
            brightness(1)
            saturate(1)
            hue-rotate(0deg);
    }

    50% {
        filter:
            brightness(1.25)
            saturate(1.4)
            hue-rotate(18deg)
            drop-shadow(
                0 0 8px
                rgba(125, 110, 255, 0.7)
            );
    }

    100% {
        filter:
            brightness(1)
            saturate(1)
            hue-rotate(0deg);
    }
}

.animacion-disfraz_cientifico .capaImagenAvatar-disfraz {
    animation:
        animacionCientifico
        2.4s
        ease-in-out
        infinite;
}

@keyframes animacionCientifico {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter:
            brightness(1.18)
            drop-shadow(
                0 0 6px
                rgba(100, 220, 255, 0.65)
            );
    }
}

.animacion-disfraz_superheroe .capaImagenAvatar-disfraz {
    animation:
        animacionSuperheroe
        1.8s
        ease-in-out
        infinite;
}

@keyframes animacionSuperheroe {

    0%,
    100% {
        filter:
            brightness(1)
            saturate(1);
    }

    50% {
        filter:
            brightness(1.28)
            saturate(1.35)
            drop-shadow(
                0 0 8px
                rgba(255, 220, 70, 0.75)
            );
    }
}

.animacion-disfraz_futurista .capaImagenAvatar-disfraz {
    animation:
        animacionFuturista
        1.7s
        linear
        infinite;
}

@keyframes animacionFuturista {

    0%,
    100% {
        filter:
            brightness(1)
            contrast(1);
    }

    50% {
        filter:
            brightness(1.28)
            contrast(1.12)
            drop-shadow(
                0 0 7px
                rgba(80, 230, 255, 0.75)
            );
    }
}

.animacion-disfraz_estrellas .capaImagenAvatar-disfraz {
    animation:
        animacionEstrellas
        2.1s
        ease-in-out
        infinite;
}

@keyframes animacionEstrellas {

    0%,
    100% {
        filter: brightness(1);
    }

    35% {
        filter:
            brightness(1.35)
            drop-shadow(
                0 0 8px
                rgba(255, 235, 120, 0.85)
            );
    }

    65% {
        filter: brightness(1.12);
    }
}

.animacion-disfraz_fuego .capaImagenAvatar-disfraz {
    animation:
        animacionFuego
        1.25s
        ease-in-out
        infinite;
}

@keyframes animacionFuego {

    0%,
    100% {
        filter:
            brightness(1.05)
            saturate(1.15);
    }

    50% {
        filter:
            brightness(1.32)
            saturate(1.55)
            drop-shadow(
                0 0 9px
                rgba(255, 120, 40, 0.8)
            );
    }
}

.animacion-disfraz_hielo .capaImagenAvatar-disfraz {
    animation:
        animacionHielo
        2.3s
        ease-in-out
        infinite;
}

@keyframes animacionHielo {

    0%,
    100% {
        filter:
            brightness(1)
            saturate(1);
    }

    50% {
        filter:
            brightness(1.25)
            saturate(1.15)
            drop-shadow(
                0 0 9px
                rgba(160, 225, 255, 0.85)
            );
    }
}

.animacion-disfraz_electricidad .capaImagenAvatar-disfraz {
    animation:
        animacionElectricidad
        0.9s
        linear
        infinite;
}

@keyframes animacionElectricidad {

    0%,
    100% {
        filter: brightness(1);
    }

    20% {
        filter:
            brightness(1.4)
            contrast(1.15);
    }

    45% {
        filter: brightness(1.05);
    }

    70% {
        filter:
            brightness(1.32)
            drop-shadow(
                0 0 7px
                rgba(255, 235, 70, 0.85)
            );
    }
}

.animacion-disfraz_agua .capaImagenAvatar-disfraz {
    animation:
        animacionAgua
        2.8s
        ease-in-out
        infinite;
}

@keyframes animacionAgua {

    0%,
    100% {
        filter:
            brightness(1)
            saturate(1);
    }

    50% {
        filter:
            brightness(1.2)
            saturate(1.3)
            drop-shadow(
                0 0 8px
                rgba(75, 175, 255, 0.7)
            );
    }
}

.animacion-disfraz_naturaleza .capaImagenAvatar-disfraz {
    animation:
        animacionNaturaleza
        3s
        ease-in-out
        infinite;
}

@keyframes animacionNaturaleza {

    0%,
    100% {
        filter:
            brightness(1)
            saturate(1);
    }

    50% {
        filter:
            brightness(1.18)
            saturate(1.35)
            drop-shadow(
                0 0 8px
                rgba(80, 200, 105, 0.65)
            );
    }
}

.animacion-disfraz_nebulosa .capaImagenAvatar-disfraz {
    animation:
        animacionNebulosa
        4s
        linear
        infinite;
}

@keyframes animacionNebulosa {

    0% {
        filter:
            brightness(1)
            saturate(1.1)
            hue-rotate(0deg);
    }

    50% {
        filter:
            brightness(1.25)
            saturate(1.5)
            hue-rotate(35deg)
            drop-shadow(
                0 0 10px
                rgba(175, 100, 255, 0.8)
            );
    }

    100% {
        filter:
            brightness(1)
            saturate(1.1)
            hue-rotate(0deg);
    }
}

.animacion-disfraz_arcoiris .capaImagenAvatar-disfraz {
    animation:
        animacionArcoiris
        4s
        linear
        infinite;
}

@keyframes animacionArcoiris {

    0% {
        filter:
            brightness(1.08)
            saturate(1.25)
            hue-rotate(0deg);
    }

    100% {
        filter:
            brightness(1.08)
            saturate(1.25)
            hue-rotate(360deg);
    }
}

.animacion-disfraz_cristal .capaImagenAvatar-disfraz {
    animation:
        animacionCristal
        2.4s
        ease-in-out
        infinite;
}

@keyframes animacionCristal {

    0%,
    100% {
        filter:
            brightness(1)
            contrast(1);
    }

    50% {
        filter:
            brightness(1.4)
            contrast(1.08)
            drop-shadow(
                0 0 10px
                rgba(205, 245, 255, 0.95)
            );
    }
}

.animacion-disfraz_aurora .capaImagenAvatar-disfraz {
    animation:
        animacionAurora
        4.8s
        ease-in-out
        infinite;
}

@keyframes animacionAurora {

    0% {
        filter:
            brightness(1.05)
            saturate(1.15)
            hue-rotate(0deg);
    }

    50% {
        filter:
            brightness(1.3)
            saturate(1.45)
            hue-rotate(55deg)
            drop-shadow(
                0 0 10px
                rgba(125, 255, 220, 0.75)
            );
    }

    100% {
        filter:
            brightness(1.05)
            saturate(1.15)
            hue-rotate(0deg);
    }
}

.visualItemTiendaAvatar {
    overflow: hidden;
}

.imagenItemTiendaAvatar {
    width: 74px;
    height: 74px;
    max-width: 74px;
    max-height: 74px;

    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {

    html:not([data-aventura-animaciones="activas"]) .avatarItemAnimado .capaImagenAvatar-ropa,
    html:not([data-aventura-animaciones="activas"]) .avatarItemAnimado .capaImagenAvatar-disfraz {
        animation: none !important;
    }

    html:not([data-aventura-animaciones="activas"]) .marco_avatar_estrellas,
    html:not([data-aventura-animaciones="activas"]) .marco_jefe_luz,
    html:not([data-aventura-animaciones="activas"]) .avatarMascotaCompuesta.mascota_abeja,
    html:not([data-aventura-animaciones="activas"]) .avatarMascotaCompuesta.mascota_panda,
    html:not([data-aventura-animaciones="activas"]) .avatarMascotaCompuesta.mascota_alien {
        animation: none !important;
    }
}

.capaImagenAvatar-ropa {
    z-index: 3 !important;
}

.capaImagenAvatar-disfraz {
    z-index: 3 !important;
}

.capaBaseCabezaAvatar {
    
}

.capaImagenAvatar-cabello {
    z-index: 8 !important;
}

.capaImagenAvatar-rostro {
    z-index: 9 !important;
}

.capaImagenAvatar-accesorio {
    z-index: 10 !important;
}

.capaImagenAvatar-distintivo {
    z-index: 11 !important;
}

/* =========================================================
   BASE MAESTRA AVATAR V2
   CUERPO + CABEZA PNG
   ========================================================= */


/* Contenedor común de las capas PNG */

.capasImagenAvatar {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    pointer-events: none !important;
}


/* =========================================================
   CUERPO BASE PNG
   ========================================================= */

.capaBaseCuerpoAvatar {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    z-index: 2 !important;

    pointer-events: none !important;
    user-select: none !important;
}


/* Cuando existe el cuerpo PNG,
   ocultamos el cuerpo y cuello antiguos hechos con CSS */

.usaCuerpoPielImagen .avatarCuerpoCompuesto,
.usaCuerpoPielImagen .avatarCuelloCompuesto {
    opacity: 0 !important;
}


/* =========================================================
   CABEZA BASE PNG
   ========================================================= */

.capaBaseCabezaAvatar {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    z-index: 4 !important;

    pointer-events: none !important;
    user-select: none !important;
}


/* Mantener ocultas las formas antiguas
   cuando usamos cabeza PNG */

.usaCabezaImagen .avatarCabezaCompuesta {
    background: transparent !important;
    box-shadow: none !important;
}

.usaCabezaImagen .avatarOreja {
    opacity: 0 !important;
}