* {
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) {
.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;
}
.cabeceraMapa {
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.3);
}
.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.3);
}
#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.3);
}
.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.2);
}
.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.9);
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.1);
}
.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;
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.5;
}
.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.5);
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.2));
}
.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.2);
}
.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.6);
}
.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.1);
}
.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.2);
box-shadow: 0 0 28px rgba(255, 217, 73, 0.9);
}
}
.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.9);
}
}
.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;
}
.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 {
left: 50% !important;
right: auto !important;
top: auto !important;
bottom: 7% !important;
width: 72% !important;
height: 82% !important;
transform: translateX(-50%) !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 {
background: #f5f2ff;
}
.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-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;
}
@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;
}
.capaImagenAvatar-cabello {
z-index: 8 !important;
}
.capaImagenAvatar-accesorio {
z-index: 10 !important;
}
.capaImagenAvatar-distintivo {
z-index: 11 !important;
}
.capaBaseCuerpoAvatar {
left: 0 !important;
top: 0 !important;
}
.capaBaseCabezaAvatar {
left: 0 !important;
top: 0 !important;
}
.avatarCompuesto {
position: relative !important;
isolation: isolate;
border-radius: 50%;
overflow: hidden !important;
background: #ffffff;
}
.avatarCompuesto::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
box-shadow: inset 0 0 0 5px #ffffff;
pointer-events: none;
z-index: 19;
}
.capasImagenAvatar {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
z-index: 1;
}
.capaBaseCuerpoAvatar,
.capaBaseCabezaAvatar,
.capaImagenAvatar-ropa,
.capaImagenAvatar-disfraz,
.capaImagenAvatar-cabello,
.capaImagenAvatar-rostro,
.capaImagenAvatar-accesorio,
.capaImagenAvatar-distintivo,
.capaImagenAvatar-mascota,
.capaTinteCabelloAvatar,
.capaTinteRopaAvatar {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
pointer-events: none !important;
user-select: none !important;
clip-path: none !important;
}
.capaImagenAvatar-fondo,
.capaImagenAvatar-marco {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
pointer-events: none !important;
user-select: none !important;
}
.capaImagenAvatar-fondo {
z-index: 1 !important;
}
.capaBaseCuerpoAvatar {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
transform: translateY(10%) scaleX(1.36) scaleY(1.17) !important;
transform-origin: 50% 100% !important;
z-index: 2 !important;
pointer-events: none !important;
user-select: none !important;
clip-path: none !important;
}
.capaImagenAvatar-cabello,
.capaTinteCabelloAvatar {
transform: translateY(-1.8%) scale(1.1) !important;
transform-origin: 50% 42% !important;
z-index: 8 !important;
clip-path: none !important;
}
.capaImagenAvatar-rostro {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
transform: translateY(-1.9%) scale(0.8) !important;
transform-origin: 50% 42% !important;
z-index: 9 !important;
pointer-events: none !important;
user-select: none !important;
clip-path: none !important;
}
.usaCabezaImagen .avatarCabezaCompuesta {
background: transparent !important;
box-shadow: none !important;
}
.usaCabezaImagen .avatarOreja {
opacity: 0 !important;
}
.usaCuerpoPielImagen .avatarCuerpoCompuesto,
.usaCuerpoPielImagen .avatarCuelloCompuesto {
opacity: 0 !important;
}
.usaImagenCabello .avatarCabelloAtras,
.usaImagenCabello .avatarCabelloFrente {
opacity: 0 !important;
}
.usaImagenRostro .avatarRostroCompuesto {
opacity: 0 !important;
}
.usaImagenRopa .avatarCuerpoCompuesto,
.usaImagenDisfraz .avatarCuerpoCompuesto {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.usaImagenRopa .avatarDetalleRopa,
.usaImagenDisfraz .avatarDetalleRopa {
opacity: 0 !important;
}
.usaImagenAccesorio .avatarAccesorioCompuesto {
opacity: 0 !important;
}
.usaImagenDistintivo .avatarDistintivo {
opacity: 0 !important;
}
.usaImagenMascota .avatarMascotaCompuesta {
opacity: 0 !important;
}
.capaTinteCabelloAvatar {
opacity: 0.72;
mix-blend-mode: color;
}
.avatarCompuesto .capaTinteCabelloAvatar {
filter: brightness(1.08);
}
.capaTinteRopaAvatar {
opacity: 0.62;
mix-blend-mode: color;
}
.muestraOpcionAvatar.muestraImagenAvatar {
overflow: hidden;
padding: 3px;
}
.miniaturaRealAvatar {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
user-select: none;
}
.imagenItemTiendaAvatar {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.muestraColorTiendaAvatar {
display: block;
width: 54px;
height: 54px;
margin: auto;
border: 4px solid rgba(255, 255, 255, 0.95);
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(85, 75, 140, 0.18);
}
.rarezaAvatar-normal {
--rareza-avatar: #96909d;
}
.rarezaAvatar-poco_comun {
--rareza-avatar: #4da875;
}
.rarezaAvatar-especial {
--rareza-avatar: #567bd5;
}
.rarezaAvatar-epica {
--rareza-avatar: #9856cf;
}
.rarezaAvatar-legendaria {
--rareza-avatar: #d1a52b;
}
.etiquetaRarezaAvatar,
.etiquetaRarezaTienda {
display: inline-block;
padding: 3px 7px;
border-radius: 999px;
background: var(--rareza-avatar, #96909d);
color: white;
font-size: 7px;
font-weight: 900;
text-transform: uppercase;
}
.etiquetaRarezaAvatar-normal {
background: #96909d;
}
.etiquetaRarezaAvatar-poco_comun {
background: #4da875;
}
.etiquetaRarezaAvatar-especial {
background: #567bd5;
}
.etiquetaRarezaAvatar-epica {
background: #9856cf;
}
.etiquetaRarezaAvatar-legendaria {
background: linear-gradient(90deg, #bf8c0c, #e3bf45);
}
.etiquetaAnimadaAvatar,
.etiquetaAnimadaTienda {
display: inline-block;
margin-top: 3px;
color: #6d4bae;
font-size: 7px;
font-weight: 900;
}
.efectoAvatar-brillo {
animation: avatarBrillo 2.4s ease-in-out infinite;
}
@keyframes avatarBrillo {
0%,
100% {
filter: brightness(1);
}
50% {
filter: brightness(1.28) drop-shadow(0 0 7px rgba(255, 232, 145, 0.8));
}
}
.efectoAvatar-pulso {
animation: avatarPulso 2s ease-in-out infinite;
}
@keyframes avatarPulso {
0%,
100% {
filter: brightness(1) saturate(1);
}
50% {
filter: brightness(1.22) saturate(1.25)
drop-shadow(0 0 6px rgba(255, 255, 255, 0.65));
}
}
.efectoAvatar-destello {
animation: avatarDestello 2.7s ease-in-out infinite;
}
@keyframes avatarDestello {
0%,
75%,
100% {
filter: brightness(1);
}
82% {
filter: brightness(1.45);
}
90% {
filter: brightness(1.1);
}
}
.efectoAvatar-flotar {
animation: avatarFlotar 2.6s ease-in-out infinite;
}
@keyframes avatarFlotar {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
.efectoAvatar-fuego,
.efectoAvatar-llamas {
animation: avatarFuego 1.3s ease-in-out infinite;
}
@keyframes avatarFuego {
0%,
100% {
filter: brightness(1.05) saturate(1.15);
}
50% {
filter: brightness(1.35) saturate(1.55)
drop-shadow(0 0 9px rgba(255, 115, 35, 0.85));
}
}
.efectoAvatar-hielo,
.efectoAvatar-cristal {
animation: avatarCristal 2.5s ease-in-out infinite;
}
@keyframes avatarCristal {
0%,
100% {
filter: brightness(1);
}
50% {
filter: brightness(1.4) contrast(1.08)
drop-shadow(0 0 10px rgba(190, 240, 255, 0.9));
}
}
.efectoAvatar-electricidad {
animation: avatarElectricidad 0.9s linear infinite;
}
@keyframes avatarElectricidad {
0%,
100% {
filter: brightness(1);
}
20% {
filter: brightness(1.5);
}
45% {
filter: brightness(1.05);
}
70% {
filter: brightness(1.35) drop-shadow(0 0 8px rgba(255, 232, 70, 0.9));
}
}
.efectoAvatar-agua {
animation: avatarAgua 2.8s ease-in-out infinite;
}
@keyframes avatarAgua {
0%,
100% {
filter: brightness(1) saturate(1);
}
50% {
filter: brightness(1.22) saturate(1.35)
drop-shadow(0 0 8px rgba(75, 175, 255, 0.75));
}
}
.efectoAvatar-naturaleza {
animation: avatarNaturaleza 3s ease-in-out infinite;
}
@keyframes avatarNaturaleza {
0%,
100% {
filter: brightness(1) saturate(1);
}
50% {
filter: brightness(1.2) saturate(1.4)
drop-shadow(0 0 8px rgba(80, 200, 105, 0.72));
}
}
.efectoAvatar-energia,
.efectoAvatar-luces {
animation: avatarEnergia 1.8s ease-in-out infinite;
}
@keyframes avatarEnergia {
0%,
100% {
filter: brightness(1);
}
50% {
filter: brightness(1.3) contrast(1.08)
drop-shadow(0 0 8px rgba(90, 225, 255, 0.8));
}
}
.efectoAvatar-estrellas {
animation: avatarEstrellas 2.1s ease-in-out infinite;
}
@keyframes avatarEstrellas {
0%,
100% {
filter: brightness(1);
}
35% {
filter: brightness(1.4) drop-shadow(0 0 8px rgba(255, 235, 120, 0.9));
}
65% {
filter: brightness(1.12);
}
}
.efectoAvatar-halo {
animation: avatarHalo 2.6s ease-in-out infinite;
}
@keyframes avatarHalo {
0%,
100% {
filter: brightness(1);
}
50% {
filter: brightness(1.35) drop-shadow(0 0 12px rgba(255, 244, 178, 0.9));
}
}
.efectoAvatar-nebulosa {
animation: avatarNebulosa 4s linear infinite;
}
@keyframes avatarNebulosa {
0% {
filter: brightness(1) saturate(1.05) hue-rotate(0deg);
}
50% {
filter: brightness(1.27) saturate(1.5) hue-rotate(32deg)
drop-shadow(0 0 10px rgba(170, 105, 255, 0.78));
}
100% {
filter: brightness(1) saturate(1.05) hue-rotate(0deg);
}
}
.efectoAvatar-arcoiris {
animation: avatarArcoiris 4s linear infinite;
}
@keyframes avatarArcoiris {
from {
filter: saturate(1.35) hue-rotate(0deg);
}
to {
filter: saturate(1.35) hue-rotate(360deg);
}
}
.efectoAvatar-aurora {
animation: avatarAurora 4.8s ease-in-out infinite;
}
@keyframes avatarAurora {
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.78));
}
100% {
filter: brightness(1.05) saturate(1.15) hue-rotate(0deg);
}
}
.efectoAvatar-particulas {
animation: avatarParticulas 2.5s ease-in-out infinite;
}
@keyframes avatarParticulas {
0%,
100% {
filter: brightness(1);
}
50% {
filter: brightness(1.32) saturate(1.25)
drop-shadow(0 0 10px rgba(255, 232, 130, 0.82));
}
}
.efectoAvatar-rebote {
animation: avatarRebote 1.7s ease-in-out infinite;
}
@keyframes avatarRebote {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
.efectoAvatar-rayos {
animation: avatarRayos 1.4s linear infinite;
}
@keyframes avatarRayos {
0%,
100% {
filter: brightness(1);
}
35% {
filter: brightness(1.5);
}
42% {
filter: brightness(1);
}
}
.efectoAvatar-brasas {
animation: avatarBrasas 2s ease-in-out infinite;
}
@keyframes avatarBrasas {
0%,
100% {
filter: brightness(1) saturate(1);
}
50% {
filter: brightness(1.28) saturate(1.45)
drop-shadow(0 0 9px rgba(255, 95, 35, 0.82));
}
}
@media (prefers-reduced-motion: reduce) {
html:not([data-aventura-animaciones="activas"]) .capaAvatarAnimada,
html:not([data-aventura-animaciones="activas"]) [class*="efectoAvatar-"] {
animation: none !important;
}
}
.capaBaseCabezaAvatar {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
transform: translateY(-2.5%) scale(1.32) !important;
transform-origin: 50% 42% !important;
z-index: 4 !important;
pointer-events: none !important;
user-select: none !important;
clip-path: none !important;
}
.envolturaCabelloV2 {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
user-select: none !important;
transform: translateY(-1.6%) scale(1.3) !important;
transform-origin: 50% 42% !important;
}
.capaCabelloV2 {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
pointer-events: none !important;
user-select: none !important;
clip-path: none !important;
}
.envolturaCabelloV2-atras {
z-index: 3.8 !important;
}
.envolturaCabelloV2-lateral {
z-index: 7.8 !important;
}
.envolturaCabelloV2-frente {
z-index: 8 !important;
}
.envolturaCabelloV2-extra {
z-index: 8.4 !important;
}
.envolturaCabelloV2-efecto {
z-index: 8.8 !important;
}
:root {
--escala-general-avatar: 0.91;
--ajuste-y-general-avatar: 3.5%;
--origen-general-avatar: 50% 58%;
}
.avatarCompuesto .capasImagenAvatar {
transform: translateY(var(--ajuste-y-general-avatar))
scale(var(--escala-general-avatar)) !important;
transform-origin: var(--origen-general-avatar) !important;
}
.envolturaCabelloV2,
.capaCabelloV2 {
background: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
pointer-events: none !important;
user-select: none !important;
}
.capaCabelloV2 {
display: block !important;
border-radius: 0 !important;
}
.usaCabelloV2 .avatarCabelloAtras,
.usaCabelloV2 .avatarCabelloFrente {
opacity: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.capaCabelloWrap {
position: absolute;
inset: 0;
pointer-events: none;
overflow: visible;
}
.capaCabelloSprite {
position: absolute;
inset: 0;
pointer-events: none;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
will-change: transform;
backface-visibility: hidden;
transform-origin: 50% 50%;
}
.animacionCabello--balanceo_suave--atras {
animation: cabelloBalanceoAtras 3.8s ease-in-out infinite;
transform-origin: 50% 28%;
}
.animacionCabello--balanceo_suave--frente {
animation: cabelloBalanceoFrente 3.4s ease-in-out infinite;
transform-origin: 50% 18%;
}
.animacionCabello--balanceo_suave--lateral {
animation: cabelloBalanceoLateral 3.2s ease-in-out infinite;
transform-origin: 50% 24%;
}
@keyframes cabelloBalanceoAtras {
0%,
100% {
transform: rotate(0deg) translateY(0px);
}
25% {
transform: rotate(-1.2deg) translateY(0.5px);
}
50% {
transform: rotate(0.6deg) translateY(0px);
}
75% {
transform: rotate(1.2deg) translateY(0.5px);
}
}
@keyframes cabelloBalanceoFrente {
0%,
100% {
transform: rotate(0deg) translateY(0px);
}
25% {
transform: rotate(-1.6deg) translateY(0.5px);
}
50% {
transform: rotate(0.8deg) translateY(0px);
}
75% {
transform: rotate(1.6deg) translateY(0.5px);
}
}
@keyframes cabelloBalanceoLateral {
0%,
100% {
transform: rotate(0deg) translateY(0px);
}
25% {
transform: rotate(-2deg) translateY(1px);
}
50% {
transform: rotate(1deg) translateY(0px);
}
75% {
transform: rotate(2deg) translateY(1px);
}
}
.animacionCabello--flotacion_suave--atras,
.animacionCabello--flotacion_suave--frente,
.animacionCabello--flotacion_suave--lateral {
animation: cabelloFlotacionSuave 3.6s ease-in-out infinite;
}
@keyframes cabelloFlotacionSuave {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-2px);
}
}
.animacionCabello--temblor_electrico--atras,
.animacionCabello--temblor_electrico--frente,
.animacionCabello--temblor_electrico--lateral {
animation: cabelloTemblorElectrico 0.18s steps(2) infinite;
}
@keyframes cabelloTemblorElectrico {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(-1px, 0px) rotate(-0.6deg);
}
50% {
transform: translate(1px, 0px) rotate(0.6deg);
}
75% {
transform: translate(-0.5px, 0.5px) rotate(-0.4deg);
}
100% {
transform: translate(0.5px, -0.5px) rotate(0.4deg);
}
}
:root {
--v3-violeta: #6656df;
--v3-violeta-oscuro: #40347f;
--v3-crema: #fff4b8;
--v3-panel: rgba(255, 255, 255, 0.96);
--v3-borde: #d9d2ff;
--v3-texto: #443a73;
--v3-panel-ancho: 278px;
--v3-panel-separacion: 14px;
--v3-reserva-panel: 310px;
--fuente-v3-texto: Cambria, Georgia, "Times New Roman", serif;
--fuente-v3-aventura:
"Lucida Handwriting", "Segoe Print", "Brush Script MT", cursive;
}
html,
body {
width: 100%;
min-height: 100%;
}
body {
overflow-x: hidden;
}
body,
button,
input,
select,
textarea {
font-family: var(--fuente-v3-texto) !important;
}
#pantallaMenu .contenedorCursos,
#pantallaMenu > .tarjetaJugador,
#pantallaMenu #botonPerfilJugador,
#pantallaMenu #botonPremios,
#pantallaMenu #botonMonedasPrueba,
#pantallaMenu #botonSalirPerfil,
#pantallaMenu #panelRespaldoAventura {
display: none !important;
}
.panelJugadorV3 {
position: fixed;
z-index: 900;
top: var(--v3-panel-separacion);
bottom: var(--v3-panel-separacion);
left: var(--v3-panel-separacion);
right: auto;
padding: 12px;
border: 3px solid var(--v3-violeta);
background: var(--v3-panel);
box-shadow: 0 10px 26px rgba(65, 49, 118, 0.18);
display: flex;
flex-direction: column;
overflow: hidden;
}
.panelJugadorV3.ocultoPanelV3 {
display: none !important;
}
.cabeceraPanelJugadorV3 {
flex: 0 0 auto;
text-align: center;
}
.etiquetaPanelJugadorV3 {
display: inline-block;
margin-bottom: 3px;
color: #8a80aa;
font-size: 9px;
letter-spacing: 1.2px;
}
.avatarPanelJugadorV3 {
width: 148px;
height: 148px;
margin: 0 auto 3px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.avatarFallbackPanelV3 {
font-size: 76px;
}
.statsPanelJugadorV3 {
flex: 0 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
margin-bottom: 7px;
}
.statPanelJugadorV3 {
min-width: 0;
padding: 5px 3px;
border-radius: 11px;
background: #f3f0ff;
color: #534785;
font-size: 9px;
font-weight: 900;
}
.statPanelJugadorV3 span {
min-height: 13px;
font-size: 12px;
}
.accionesPanelJugadorV3 {
flex: 0 0 auto;
display: grid;
gap: 4px;
}
.botonPanelJugadorV3 {
width: 100%;
min-height: 38px !important;
padding: 6px 10px !important;
border: 0;
border-radius: 10px;
background: #f1eeff;
color: #4c3e8d;
display: grid !important;
grid-template-columns: 30px minmax(0, 1fr) !important;
gap: 8px !important;
font-size: 14px !important;
font-weight: 900;
text-align: left;
transition:
transform 0.15s ease,
background-color 0.15s ease;
}
.botonPanelJugadorV3 > span:last-child {
min-width: 0;
text-align: left;
}
.panelJugadorV3[data-contexto="avatar"] #panelAvatarV3,
.panelJugadorV3[data-contexto="tienda"] #panelTiendaV3,
.panelJugadorV3[data-contexto="perfil"] #panelVerPerfilV3 {
display: none;
}
.accionesAvatarContextoV3 {
display: none;
grid-template-columns: 1fr 1fr;
gap: 5px;
margin-top: 6px;
}
.panelJugadorV3[data-contexto="avatar"] .accionesAvatarContextoV3 {
display: grid;
}
.botonContextoAvatarV3 {
min-height: 34px;
padding: 6px 7px;
border-radius: 10px;
font-size: 11px;
font-weight: 900;
}
.botonRestablecerContextoV3 {
border: 2px solid #d5d0df;
background: white;
color: #625b70;
}
.botonGuardarContextoV3 {
border: 0;
background: linear-gradient(180deg, #7661db, #5e49bd);
color: white;
}
.accionesSistemaPanelV3 {
flex: 0 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px !important;
margin-top: 6px;
}
.botonSistemaPanelV3 {
min-width: 0;
padding: 5px;
border: 1px solid #ddd7f5;
border-radius: 9px;
background: #faf9ff;
color: #5d5191;
display: grid !important;
grid-template-columns: 22px minmax(0, 1fr) !important;
align-items: center !important;
gap: 4px !important;
font-weight: 900;
}
.botonSistemaPanelV3:hover {
background: #f0edff;
}
.iconoSistemaPanelV3 {
font-size: 17px;
}
.audioPanelV3 {
flex: 0 0 auto;
padding-top: 7px;
border-top: 1px dashed #ccc4ef;
}
.filaAudioV3 {
display: grid;
grid-template-columns: 34px 1fr 34px;
gap: 5px;
align-items: center;
}
.botonMuteV3 {
width: 33px;
height: 32px;
padding: 0;
border: 0;
border-radius: 9px;
background: #eeeaff;
font-size: 17px;
}
.volumenV3 {
width: 100%;
}
.valorVolumenV3 {
color: #6d6492;
font-size: 10px;
font-weight: 900;
text-align: right;
}
#pantallaMenu.pantallaMenu {
width: 100%;
height: 100vh;
height: 100dvh;
min-height: 0 !important;
overflow: hidden;
padding: 14px 18px 14px var(--v3-reserva-panel) !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background:
radial-gradient(
circle at 75% 5%,
rgba(255, 255, 255, 0.34),
transparent 22%
),
#fff0a8;
}
#pantallaMenu .tituloMundos {
flex: 0 0 auto;
width: min(980px, 100%);
margin: 2px auto 8px;
color: #443783;
font-family: var(--fuente-v3-aventura) !important;
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.1;
letter-spacing: -0.3px;
}
#pantallaMenu #tarjetaProgresoGeneral {
flex: 0 1 auto;
width: min(980px, 100%) !important;
max-height: calc(100dvh - 66px);
padding: 12px 16px !important;
border-radius: 22px;
}
#pantallaMenu .rangoAventureroGeneral {
gap: 9px;
}
#pantallaMenu .rangoAventureroGeneral small {
font-size: 9px;
}
#pantallaMenu .rangoAventureroGeneral strong {
font-size: 18px;
}
#pantallaMenu .mundoProgresoGeneral strong {
font-size: 12px;
line-height: 1.1;
}
#pantallaMenu .mundoProgresoGeneral small {
margin-top: 2px;
font-size: 9px;
line-height: 1.1;
}
.botonMundoProgresoV3 {
width: 100%;
border: 2px solid #ded9ca;
cursor: pointer;
text-align: left;
transition:
transform 0.15s ease,
border-color 0.15s ease,
box-shadow 0.15s ease;
}
.botonMundoProgresoV3:hover:not(:disabled) {
transform: translateY(-1px);
border-color: #6f5de4;
box-shadow: 0 4px 10px rgba(86, 69, 160, 0.12);
}
.botonMundoProgresoV3:disabled {
cursor: not-allowed;
opacity: 0.58;
}
.mundoFinalV3 {
border-color: #e0bd42 !important;
background: linear-gradient(145deg, #fff9d8, #f2ebff) !important;
}
#pantallaMenu #botonAvatarStudioMenu,
#pantallaMenu .botonAvatarStudioMenu {
display: none !important;
}
.pantallaAvatarStudio .panelJugadorActivoV3 {
width: 100%;
}
.pantallaAvatarStudio.panelJugadorActivoV3 {
width: 100%;
height: 100vh;
height: 100dvh;
min-height: 0 !important;
overflow: hidden;
padding: 10px 16px 10px var(--v3-reserva-panel) !important;
display: flex !important;
flex-direction: column;
align-items: stretch !important;
justify-content: flex-start !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .panelPreviewAvatar {
display: none !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .cabeceraAvatarStudio {
flex: 0 0 auto;
width: 100%;
margin: 0 0 8px;
padding: 9px 13px;
border-width: 2px;
border-radius: 18px;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 12px;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .cabeceraAvatarStudio p {
margin: 2px 0 0;
font-size: 11px;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .progresoAvatarStudio {
padding: 6px 10px;
font-size: 12px;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .contenidoAvatarStudio {
flex: 1 1 auto;
min-height: 0;
width: 100%;
margin: 0;
display: block;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .panelOpcionesAvatar {
width: 100%;
height: 100%;
min-height: 0;
padding: 10px 12px;
overflow: hidden;
border-radius: 20px;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
}
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriasAvatarStudio {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 5px;
width: 100%;
overflow: visible !important;
padding: 0 !important;
scrollbar-width: none;
}
.pantallaAvatarStudio.panelJugadorActivoV3
.categoriasAvatarStudio::-webkit-scrollbar {
display: none;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriaAvatarStudio {
min-width: 0;
min-height: 51px;
padding: 5px 4px;
border-radius: 12px;
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
align-items: center;
justify-items: start;
gap: 3px;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriaAvatarStudio small {
min-width: 0;
font-size: 8px;
white-space: normal;
text-align: left;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .tituloCategoriaAvatar {
min-height: 30px;
margin: 6px 0;
align-items: center;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .tituloCategoriaAvatar h3 {
font-size: 18px;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .tituloCategoriaAvatar small {
font-size: 9px;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionesAvatarStudio {
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 2px 5px 5px 1px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
grid-auto-rows: minmax(105px, auto);
align-content: start;
gap: 7px;
scrollbar-width: thin;
scrollbar-color: #b8afe8 transparent;
}
.pantallaAvatarStudio.panelJugadorActivoV3
.opcionesAvatarStudio::-webkit-scrollbar {
width: 7px;
}
.pantallaAvatarStudio.panelJugadorActivoV3
.opcionesAvatarStudio::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #b8afe8;
}
.pantallaAvatarStudio.panelJugadorActivoV3
.opcionesAvatarStudio::-webkit-scrollbar-track {
background: transparent;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio {
min-height: 105px;
padding: 7px 5px;
border-width: 2px;
border-radius: 15px;
gap: 3px;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .muestraOpcionAvatar {
width: 42px;
height: 42px;
font-size: 24px;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio strong {
font-size: 11px;
line-height: 1.1;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio small {
font-size: 8px;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .accionesAvatarStudio {
display: none !important;
}
.pantallaTiendaAvatar.panelJugadorActivoV3,
#pantallaPerfilJugador.panelJugadorActivoV3 {
padding-left: var(--v3-reserva-panel) !important;
padding-right: 18px !important;
}
#pantallaPerfiles {
background:
radial-gradient(
circle at 15% 15%,
rgba(255, 255, 255, 0.65),
transparent 23%
),
linear-gradient(145deg, #fff1a7, #efeaff);
}
#pantallaPerfiles .contenedorPerfiles {
width: min(1050px, 94%);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 16px;
}
.perfilV3 {
min-height: 190px;
padding: 14px;
border: 3px solid #d8d4e4;
border-radius: 23px;
background: rgba(255, 255, 255, 0.9);
color: #43386d;
box-shadow: 0 5px 0 rgba(62, 45, 114, 0.08);
}
.perfilV3:hover {
transform: translateY(-3px);
border-color: #755fe8;
}
.perfilCrearV3 {
border-style: dashed;
border-color: #725fe2;
background: linear-gradient(145deg, #f4f0ff, #fffdf2);
}
.masPerfilV3 {
display: block;
margin-bottom: 10px;
color: #6656df;
font-size: 58px;
line-height: 1;
}
.avatarPerfilV3 {
width: 100px;
height: 100px;
margin: 0 auto 8px;
display: flex;
align-items: center;
justify-content: center;
}
.avatarPerfilV3 .avatarCompuesto {
width: 96px !important;
height: 96px !important;
}
.nombrePerfilV3 {
display: block;
font-size: 17px;
font-weight: 900;
}
.detallePerfilV3 {
display: block;
margin-top: 5px;
color: #81799d;
font-size: 11px;
}
#pantallaPerfiles h2 {
font-family: var(--fuente-v3-aventura) !important;
font-weight: 700 !important;
}
.introduccionV3 {
position: fixed;
inset: 0;
z-index: 5000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(35, 28, 67, 0.58);
backdrop-filter: blur(5px);
}
.introduccionV3.oculto {
display: none !important;
}
.tarjetaIntroduccionV3 {
width: min(920px, 96vw);
min-height: 510px;
overflow: hidden;
display: grid;
grid-template-columns: minmax(250px, 42%) 1fr;
border: 4px solid #6e5ce5;
border-radius: 30px;
background: #fffdf4;
box-shadow: 0 24px 60px rgba(20, 14, 55, 0.35);
}
.visualIntroduccionV3 {
min-height: 420px;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 20px 20px 0;
background: linear-gradient(160deg, #d9efff, #efe6ff 60%, #fff4b7);
}
.imagenProfeIntroduccionV3 {
width: min(100%, 370px);
max-height: 430px;
object-fit: contain;
}
.fallbackProfeV3 {
margin-bottom: 50px;
font-size: 145px;
}
.contenidoIntroduccionV3 {
padding: 34px;
display: flex;
flex-direction: column;
justify-content: center;
}
.etiquetaIntroV3 {
margin: 0 0 8px;
color: #8b7abf;
font-family: var(--fuente-v3-texto) !important;
font-size: 11px;
font-weight: 900;
letter-spacing: 1px;
}
.tituloIntroV3 {
margin-bottom: 16px;
font-family: var(--fuente-v3-aventura) !important;
font-size: 31px;
font-weight: 700 !important;
}
.textoIntroV3 {
min-height: 135px;
color: #5f5874;
font-family: var(--fuente-v3-texto) !important;
font-size: 19px;
line-height: 1.55;
}
.puntosIntroV3 {
display: flex;
gap: 7px;
margin: 16px 0;
}
.puntoIntroV3 {
width: 10px;
height: 10px;
border-radius: 50%;
background: #d7d0f5;
}
.puntoIntroV3.activo {
background: #6656df;
transform: scale(1.25);
}
.accionesIntroV3 {
display: flex;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.accionesIntroV3 button {
padding: 12px 17px;
border: 0;
border-radius: 13px;
font-family: var(--fuente-v3-texto) !important;
font-weight: 900;
}
.botonSiguienteIntroV3 {
margin-left: auto;
background: #6656df;
color: white;
}
.botonOmitirIntroV3,
.botonAnteriorIntroV3 {
background: #ece8fb;
color: #57499b;
}
#pantallaInicio {
position: relative;
isolation: isolate;
overflow: hidden;
background:
radial-gradient(
circle at 78% 18%,
rgba(255, 242, 155, 0.95) 0 6%,
rgba(255, 242, 155, 0.34) 7% 13%,
transparent 14%
),
linear-gradient(180deg, #bfe7f3 0%, #dff3ea 45%, #f7e5a6 72%, #d6bd72 100%) !important;
}
#pantallaInicio::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
width: auto !important;
height: auto !important;
border: 0 !important;
border-radius: 0 !important;
background:
radial-gradient(
circle at 14% 24%,
rgba(255, 255, 255, 0.82) 0 4%,
transparent 4.5%
),
radial-gradient(
circle at 19% 21%,
rgba(255, 255, 255, 0.58) 0 5%,
transparent 5.5%
),
repeating-radial-gradient(
ellipse at 75% 35%,
transparent 0 35px,
rgba(92, 82, 143, 0.08) 36px 38px,
transparent 39px 70px
);
opacity: 0.9;
animation: none !important;
z-index: -2;
}
#pantallaInicio::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 38% !important;
border: 0 !important;
border-radius: 0 !important;
background: linear-gradient(180deg, #729e68, #52744e 62%, #415d42);
clip-path: polygon(
0 100%,
0 75%,
8% 56%,
16% 70%,
25% 38%,
35% 67%,
47% 25%,
57% 63%,
67% 41%,
76% 68%,
88% 36%,
100% 66%,
100% 100%
);
opacity: 0.9;
animation: none !important;
z-index: -1;
}
#pantallaInicio h1 {
position: relative;
z-index: 1;
margin-bottom: 10px;
color: #3d326f !important;
font-family: var(--fuente-v3-aventura) !important;
font-size: clamp(44px, 6vw, 72px);
font-weight: 700 !important;
text-shadow:
0 3px 0 rgba(255, 255, 255, 0.55),
0 10px 24px rgba(45, 54, 70, 0.15);
animation: aparecerTituloV3 0.7s ease both;
}
#pantallaInicio .subtitulo {
position: relative;
z-index: 1;
max-width: 640px;
margin-left: auto;
margin-right: auto;
color: #3f4b42;
font-size: 20px;
font-weight: 700;
}
#pantallaInicio .iconoPrincipal {
position: relative;
z-index: 1;
width: 122px;
height: 122px;
margin: 9px auto 21px;
border: 5px solid #5e4cc7;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fffbe7, #efe7b0 64%, #d8c574);
box-shadow:
0 7px 0 rgba(63, 49, 116, 0.18),
0 14px 30px rgba(45, 57, 70, 0.18);
color: transparent !important;
font-size: 0 !important;
display: flex;
align-items: center;
justify-content: center;
animation: flotarInicioV3 2.7s ease-in-out infinite;
}
#pantallaInicio .iconoPrincipal::before {
content: "🧭";
font-size: 67px;
line-height: 1;
filter: drop-shadow(0 3px 2px rgba(45, 37, 75, 0.2));
}
#pantallaInicio .iconoPrincipal::after {
content: "✦";
position: absolute;
top: 7px;
right: 11px;
color: #f2bd2d;
font-size: 26px;
animation: destelloEmblemaInicioV3 2s ease-in-out infinite;
}
#pantallaInicio #botonComenzar {
position: relative;
z-index: 1;
min-width: 255px;
padding: 15px 26px;
border: 3px solid rgba(255, 255, 255, 0.72);
border-radius: 18px;
background: linear-gradient(180deg, #7564e8, #5745c3);
color: white;
font-family: var(--fuente-v3-texto) !important;
font-size: 17px;
font-weight: 900;
letter-spacing: 0.4px;
box-shadow:
0 8px 0#493aa6,
0 14px 30px rgba(83, 64, 174, 0.18);
animation: aparecerBotonV3 0.8s 0.18s ease both;
}
#pantallaBienvenida h2 {
font-family: var(--fuente-v3-aventura) !important;
color: #443783;
font-size: clamp(34px, 4vw, 48px);
}
#pantallaBienvenida p,
#pantallaBienvenida button {
font-family: var(--fuente-v3-texto) !important;
}
.nivelMapa.nivelProximamente {
opacity: 0.64;
filter: saturate(0.55);
cursor: not-allowed !important;
background: linear-gradient(145deg, #f2f3f7, #e8edf7) !important;
}
@keyframes aparecerTituloV3 {
from {
opacity: 0;
transform: translateY(-16px) scale(0.96);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes aparecerBotonV3 {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes flotarInicioV3 {
0%,
100% {
transform: translateY(0) rotate(-2deg);
}
50% {
transform: translateY(-10px) rotate(2deg);
}
}
@keyframes destelloEmblemaInicioV3 {
0%,
100% {
transform: scale(0.8) rotate(0deg);
opacity: 0.55;
}
50% {
transform: scale(1.18) rotate(20deg);
opacity: 1;
}
}
@media (max-height: 720px) and (min-width: 1001px) {
.panelJugadorV3 {
padding: 9px;
}
.avatarPanelJugadorV3 {
width: 112px !important;
height: 112px !important;
}
.avatarPanelJugadorV3 .avatarCompuesto {
width: 109px !important;
height: 109px !important;
flex-basis: 109px !important;
}
.nombrePanelJugadorV3 {
font-size: 18px;
}
.statsPanelJugadorV3 {
margin-bottom: 5px;
}
.botonPanelJugadorV3 {
min-height: 34px !important;
padding: 4px 8px !important;
font-size: 13px !important;
}
.iconoAccionPanelV3 {
width: 26px;
height: 26px;
font-size: 18px;
}
.accionesPanelJugadorV3 {
gap: 3px;
}
.accionesSistemaPanelV3 {
margin-top: 4px;
}
#pantallaMenu .tituloMundos {
margin-bottom: 5px;
font-size: 25px;
}
#pantallaMenu #tarjetaProgresoGeneral {
padding: 9px 13px !important;
}
#pantallaMenu .mundoProgresoGeneral {
min-height: 43px;
padding: 5px 8px;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriaAvatarStudio {
min-height: 46px;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionesAvatarStudio {
grid-auto-rows: minmax(95px, auto);
}
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio {
min-height: 95px;
}
}
@media (max-width: 1000px) {
body {
overflow-y: auto;
}
.panelJugadorV3 {
position: relative;
top: auto;
bottom: auto;
left: auto;
right: auto;
width: min(900px, 94%);
height: auto;
margin: 14px auto;
overflow: visible;
}
.avatarPanelJugadorV3 {
width: 130px;
height: 130px;
}
.avatarPanelJugadorV3 .avatarCompuesto {
width: 126px !important;
height: 126px !important;
flex-basis: 126px;
}
#pantallaMenu.pantallaMenu,
.pantallaAvatarStudio.panelJugadorActivoV3,
.pantallaTiendaAvatar.panelJugadorActivoV3,
#pantallaPerfilJugador.panelJugadorActivoV3 {
height: auto;
min-height: 100vh !important;
overflow: visible;
padding-left: 20px !important;
padding-right: 20px !important;
}
#pantallaMenu .mundosProgresoGeneral {
grid-template-columns: 1fr !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriasAvatarStudio {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionesAvatarStudio {
overflow-y: visible;
}
}
@media (max-width: 720px) {
.tarjetaIntroduccionV3 {
grid-template-columns: 1fr;
}
.visualIntroduccionV3 {
min-height: 230px;
}
.imagenProfeIntroduccionV3 {
max-height: 240px;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriasAvatarStudio {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
}
.perfilV3,
.botonMundoProgresoV3,
.botonPanelJugadorV3 {
transition: none !important;
}
#pantallaInicio::before,
#pantallaInicio::after,
#pantallaInicio h1,
#pantallaInicio .iconoPrincipal,
#pantallaInicio #botonComenzar,
#pantallaInicio .iconoPrincipal::after {
animation: none !important;
}
}
.panelJugadorV3 {
padding: 11px;
border: 3px solid #6656df;
border-radius: 26px;
background:
radial-gradient(
circle at 50% 14%,
rgba(220, 235, 255, 0.72),
transparent 29%
),
linear-gradient(180deg, #fffef8, #fffaf0);
box-shadow:
0 10px 28px rgba(66, 49, 125, 0.18),
inset 0 0 0 2px rgba(255, 255, 255, 0.75);
}
.etiquetaPanelJugadorV3 {
margin-bottom: 1px;
color: #786daa;
letter-spacing: 1.3px;
}
.accionesPanelJugadorV3 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 7px !important;
}
.botonPanelJugadorV3 {
min-width: 0;
min-height: 78px !important;
padding: 8px 5px !important;
border: 2px solid #e1dbfb !important;
background: linear-gradient(145deg, #f7f5ff, #ece8ff) !important;
gap: 4px !important;
color: #483c84 !important;
line-height: 1.05;
box-shadow: 0 3px 0 rgba(75, 58, 139, 0.09);
cursor: pointer;
}
.iconoAccionPanelV3 {
width: 37px !important;
height: 37px !important;
font-size: 25px !important;
line-height: 1;
box-shadow: 0 2px 5px rgba(52, 40, 105, 0.12);
}
#panelIntroV3 {
grid-column: 1/-1;
min-height: 49px !important;
flex-direction: row !important;
gap: 9px !important;
}
#panelIntroV3 .iconoAccionPanelV3 {
width: 31px !important;
height: 31px !important;
font-size: 20px !important;
}
.botonSistemaPanelV3 {
min-height: 37px !important;
padding: 5px !important;
border-radius: 10px !important;
font-size: 11px !important;
}
#pantallaMenu.pantallaMenu {
padding: 10px 18px 10px var(--v3-reserva-panel) !important;
background:
radial-gradient(
circle at 82% 12%,
rgba(255, 255, 255, 0.58),
transparent 19%
),
radial-gradient(
circle at 8% 85%,
rgba(225, 205, 116, 0.23),
transparent 22%
),
repeating-radial-gradient(
ellipse at 65% 48%,
transparent 0 65px,
rgba(165, 135, 59, 0.04) 66px 68px,
transparent 69px 130px
),
linear-gradient(145deg, #fff1a7, #fff8d9) !important;
}
#pantallaMenu .tituloMundos::before {
margin-bottom: 2px;
font-family: Cambria, Georgia, serif;
color: #a17c28;
font-size: 10px;
}
#pantallaMenu #tarjetaProgresoGeneral {
position: relative;
width: min(1010px, 100%) !important;
height: calc(100dvh - 75px);
max-height: 590px !important;
min-height: 520px;
padding: 12px 15px !important;
border: 3px solid #d9bb61;
border-radius: 24px;
background: linear-gradient(
160deg,
rgba(255, 254, 239, 0.97),
rgba(255, 249, 221, 0.96)
) !important;
box-shadow:
0 8px 0 rgba(161, 125, 38, 0.13),
0 14px 32px rgba(88, 65, 23, 0.09);
overflow: hidden;
display: flex;
flex-direction: column;
}
#pantallaMenu #tarjetaProgresoGeneral::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.23;
background:
radial-gradient(circle at 14% 34%, #b79842 0 2px, transparent 3px),
radial-gradient(circle at 76% 64%, #b79842 0 2px, transparent 3px),
radial-gradient(circle at 48% 84%, #b79842 0 2px, transparent 3px);
background-size:
170px 115px,
220px 150px,
190px 130px;
}
#pantallaMenu #tarjetaProgresoGeneral > * {
position: relative;
z-index: 1;
}
#pantallaMenu .mundosProgresoGeneral {
flex: 1 1 auto;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: repeat(5, minmax(58px, 1fr));
gap: 7px 9px !important;
margin-top: 9px !important;
}
#pantallaMenu .mundoProgresoGeneral {
min-height: 60px !important;
padding: 8px 12px !important;
border: 2px solid #ddd7bd !important;
border-left-width: 7px !important;
border-radius: 15px !important;
background: rgba(255, 255, 255, 0.9);
gap: 11px !important;
box-shadow: 0 3px 0 rgba(82, 67, 42, 0.06);
transition:
transform 0.18s ease,
box-shadow 0.18s ease;
}
#pantallaMenu .mundoProgresoGeneral:hover:not(:disabled) {
transform: translateY(-2px) scale(1.008);
box-shadow: 0 6px 13px rgba(64, 48, 101, 0.13);
}
#pantallaMenu .iconoMundoProgreso {
width: 42px;
height: 42px;
flex: 0 0 42px !important;
background: rgba(255, 255, 255, 0.83);
font-size: 29px !important;
box-shadow: 0 2px 4px rgba(43, 38, 56, 0.1);
}
#pantallaMenu .mundoProgresoGeneral strong {
font-size: 15px !important;
}
#pantallaMenu .mundoProgresoGeneral small {
margin-top: 3px !important;
}
#pantallaMenu .mundosProgresoGeneral .mundoProgresoGeneral:nth-child(1) {
border-left-color: #6b58d9 !important;
background: linear-gradient(90deg, #f1edff, #fff) !important;
}
#pantallaMenu .mundosProgresoGeneral .mundoProgresoGeneral:nth-child(2) {
border-left-color: #3d79ca !important;
background: linear-gradient(90deg, #edf5ff, #fff) !important;
}
#pantallaMenu .mundosProgresoGeneral .mundoProgresoGeneral:nth-child(3) {
border-left-color: #3fa46d !important;
background: linear-gradient(90deg, #ebfbf1, #fff) !important;
}
#pantallaMenu .mundosProgresoGeneral .mundoProgresoGeneral:nth-child(4) {
border-left-color: #d88942 !important;
background: linear-gradient(90deg, #fff3e6, #fff) !important;
}
#pantallaMenu .mundosProgresoGeneral .mundoProgresoGeneral:nth-child(5) {
border-left-color: #d5ad32 !important;
background: linear-gradient(90deg, #fff9db, #fff) !important;
}
#pantallaMenu .mundosProgresoGeneral .mundoProgresoGeneral:nth-child(6) {
border-left-color: #d36394 !important;
background: linear-gradient(90deg, #fff0f7, #fff) !important;
}
#pantallaMenu .mundosProgresoGeneral .mundoProgresoGeneral:nth-child(7) {
border-left-color: #32a3ae !important;
background: linear-gradient(90deg, #eafafb, #fff) !important;
}
#pantallaMenu .mundosProgresoGeneral .mundoProgresoGeneral:nth-child(8) {
border-left-color: #d05e5e !important;
background: linear-gradient(90deg, #fff0f0, #f3f6ff) !important;
}
#pantallaMenu .mundosProgresoGeneral .mundoProgresoGeneral:nth-child(9) {
border-left-color: #e0ad18 !important;
background: linear-gradient(90deg, #fff9d5, #fff) !important;
}
#pantallaMenu .mundosProgresoGeneral .mundoProgresoGeneral:nth-child(10) {
border-left-color: #8d65d5 !important;
border-color: #d2ad3e !important;
background: linear-gradient(100deg, #fff7c9, #f0e8ff) !important;
}
#pantallaMenu .caminoRangosGeneral {
flex: 0 0 auto;
gap: 7px !important;
margin-top: 9px !important;
padding-top: 8px !important;
}
#pantallaMenu .hitoRangoGeneral strong {
margin-top: 1px !important;
}
#pantallaMenu .hitoRangoGeneral small {
margin-top: 0 !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .cabeceraAvatarStudio {
border: 3px solid #7862d6 !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .cabeceraAvatarStudio h2 {
color: #493982;
font-family: "Lucida Handwriting", "Segoe Print", cursive !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .panelOpcionesAvatar {
border: 3px solid #d9d0ff !important;
background:
radial-gradient(
circle at 95% 5%,
rgba(236, 224, 255, 0.6),
transparent 28%
),
rgba(255, 255, 255, 0.96) !important;
box-shadow: 0 7px 0 rgba(77, 59, 140, 0.08);
}
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriaAvatarStudio {
min-height: 57px !important;
border-width: 2px !important;
border-radius: 14px !important;
box-shadow: 0 2px 0 rgba(68, 52, 121, 0.06);
}
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriaAvatarStudio span {
font-size: 23px !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriaAvatarStudio small {
font-size: 9px !important;
}
.pantallaAvatarStudio .categoriaAvatarStudio:nth-child(1) {
background: #fff0df;
}
.pantallaAvatarStudio .categoriaAvatarStudio:nth-child(2) {
background: #f3e9dc;
}
.pantallaAvatarStudio .categoriaAvatarStudio:nth-child(3) {
background: #fff1f5;
}
.pantallaAvatarStudio .categoriaAvatarStudio:nth-child(4) {
background: #fff5d8;
}
.pantallaAvatarStudio .categoriaAvatarStudio:nth-child(5) {
background: #eaf8ee;
}
.pantallaAvatarStudio .categoriaAvatarStudio:nth-child(6) {
background: #fff0e1;
}
.pantallaAvatarStudio .categoriaAvatarStudio:nth-child(7) {
background: #edf4ff;
}
.pantallaAvatarStudio .categoriaAvatarStudio:nth-child(8) {
background: #f4ebff;
}
.pantallaAvatarStudio .categoriaAvatarStudio:nth-child(9) {
background: #fff7cf;
}
.pantallaAvatarStudio .categoriaAvatarStudio:nth-child(10) {
background: #eaf9ef;
}
.pantallaAvatarStudio .categoriaAvatarStudio:nth-child(11) {
background: #edf8ff;
}
.pantallaAvatarStudio .categoriaAvatarStudio:nth-child(12) {
background: #f5edff;
}
.pantallaAvatarStudio.panelJugadorActivoV3
.categoriaAvatarStudio.categoriaAvatarActiva {
border-color: #604cc7 !important;
background: linear-gradient(145deg, #7661db, #5d48bc) !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(77, 59, 142, 0.2);
}
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionesAvatarStudio {
grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)) !important;
gap: 9px !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio {
min-height: 112px !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .muestraOpcionAvatar {
width: 49px !important;
height: 49px !important;
}
#pantallaInicio:not(.oculto) {
animation: respirarFondoInicioV34 7s ease-in-out infinite alternate;
}
#pantallaInicio:not(.oculto)::before {
animation: moverCieloInicioV34 9s ease-in-out infinite alternate !important;
}
#pantallaInicio:not(.oculto)::after {
transform-origin: center bottom;
animation: aparecerMontanasV34 1.15s cubic-bezier(0.18, 0.8, 0.25, 1) both !important;
}
#pantallaInicio:not(.oculto) h1 {
animation: aparecerTituloAventuraV34 0.85s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
#pantallaInicio:not(.oculto) .subtitulo {
animation: aparecerSubtituloV34 0.8s 0.25s ease both;
}
#pantallaInicio:not(.oculto) .iconoPrincipal {
animation: flotarBrujulaV34 2.8s ease-in-out infinite !important;
}
#pantallaInicio:not(.oculto) .iconoPrincipal::before {
animation: giroEntradaBrujulaV34 1.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#pantallaInicio:not(.oculto) .iconoPrincipal::after {
animation: destelloBrujulaV34 1.8s ease-in-out infinite !important;
}
#pantallaInicio:not(.oculto) #botonComenzar {
animation:
aparecerBotonInicioV34 0.75s 0.5s ease both,
pulsoBotonInicioV34 2.4s 1.3s ease-in-out infinite !important;
}
@keyframes aparecerTituloAventuraV34 {
0% {
opacity: 0;
transform: translateY(-35px) scale(0.88);
}
65% {
opacity: 1;
transform: translateY(5px) scale(1.025);
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes aparecerSubtituloV34 {
from {
opacity: 0;
transform: translateY(13px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes aparecerMontanasV34 {
from {
opacity: 0;
transform: translateY(110px) scaleY(0.8);
}
to {
opacity: 0.9;
transform: none;
}
}
@keyframes moverCieloInicioV34 {
from {
transform: translateX(-9px) translateY(0);
}
to {
transform: translateX(11px) translateY(5px);
}
}
@keyframes giroEntradaBrujulaV34 {
from {
opacity: 0;
transform: rotate(-180deg) scale(0.45);
}
to {
opacity: 1;
transform: rotate(0deg) scale(1);
}
}
@keyframes flotarBrujulaV34 {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes destelloBrujulaV34 {
0%,
100% {
opacity: 0.45;
transform: scale(0.75) rotate(0deg);
}
50% {
opacity: 1;
transform: scale(1.25) rotate(30deg);
}
}
@keyframes aparecerBotonInicioV34 {
from {
opacity: 0;
transform: translateY(25px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulsoBotonInicioV34 {
0%,
100% {
filter: brightness(1);
box-shadow:
0 8px 0#493aa6,
0 14px 30px rgba(83, 64, 174, 0.18);
}
50% {
filter: brightness(1.1);
box-shadow:
0 8px 0#493aa6,
0 17px 37px rgba(83, 64, 174, 0.34);
}
}
@keyframes respirarFondoInicioV34 {
from {
background-position:
0 0,
0 0,
0 0;
}
to {
background-position:
15px -5px,
-10px 5px,
0 0;
}
}
@media (max-height: 720px) and (min-width: 1001px) {
:root {
--v3-panel-ancho: 300px;
--v3-reserva-panel: 332px;
}
.panelJugadorV3 {
top: 8px;
bottom: 8px;
padding: 8px 9px;
}
.avatarPanelJugadorV3 {
width: 150px !important;
height: 150px !important;
}
.avatarPanelJugadorV3 .avatarCompuesto {
width: 147px !important;
height: 147px !important;
flex-basis: 147px !important;
}
.nombrePanelJugadorV3 {
margin-bottom: 5px;
font-size: 19px;
}
.statsPanelJugadorV3 {
margin-bottom: 6px;
}
.statPanelJugadorV3 {
min-height: 39px;
}
.botonPanelJugadorV3 {
min-height: 66px !important;
padding: 5px !important;
font-size: 12px !important;
}
.iconoAccionPanelV3 {
width: 31px !important;
height: 31px !important;
font-size: 21px !important;
}
#panelIntroV3 {
min-height: 43px !important;
}
.accionesSistemaPanelV3 {
margin-top: 5px !important;
}
.botonSistemaPanelV3 {
min-height: 33px !important;
}
.audioPanelV3 {
padding-top: 5px;
}
#pantallaMenu .mundoProgresoGeneral {
min-height: 57px !important;
padding: 6px 10px !important;
}
#pantallaMenu .iconoMundoProgreso {
width: 37px;
height: 37px;
flex-basis: 37px !important;
font-size: 26px !important;
}
#pantallaMenu .mundoProgresoGeneral strong {
font-size: 14px !important;
}
#pantallaMenu .hitoRangoGeneral {
min-height: 52px !important;
padding: 4px !important;
}
#pantallaMenu .hitoRangoGeneral > span {
font-size: 18px !important;
}
#pantallaMenu .caminoRangosGeneral {
margin-top: 7px !important;
padding-top: 6px !important;
}
}
@media (prefers-reduced-motion: reduce) {
#pantallaInicio,
#pantallaInicio::before,
#pantallaInicio::after,
#pantallaInicio h1,
#pantallaInicio .subtitulo,
#pantallaInicio .iconoPrincipal,
#pantallaInicio .iconoPrincipal::before,
#pantallaInicio .iconoPrincipal::after,
#pantallaInicio #botonComenzar {
animation: none !important;
}
}
:root {
--v3-panel-ancho: 310px;
--v3-reserva-panel: 342px;
--panel-violeta: #6957df;
--panel-violeta-suave: #f2eeff;
--panel-violeta-borde: #d9d1ff;
--panel-dorado: #f1c94b;
--panel-dorado-oscuro: #b3830f;
--texto-oscuro: #463a78;
--texto-medio: #6f6698;
--fuente-principal: Cambria, Georgia, serif;
--fuente-decorativa: "Lucida Handwriting", "Segoe Print", cursive;
}
body,
button,
input,
select,
textarea {
font-family: var(--fuente-principal);
color: var(--texto-oscuro);
}
h1,
h2,
h3,
.tituloMundos,
.cabeceraAvatarStudio h2 {
font-family: var(--fuente-decorativa);
}
.panelJugadorV3 {
width: var(--v3-panel-ancho);
border-radius: 28px;
border: 3px solid #6d5ae3;
background:
radial-gradient(
circle at 30% 10%,
rgba(255, 255, 255, 0.95),
rgba(255, 255, 255, 0.78)
),
linear-gradient(180deg, #fffef8, #fff8e8);
box-shadow:
0 12px 30px rgba(71, 53, 136, 0.18),
inset 0 0 0 2px rgba(255, 255, 255, 0.8);
}
.etiquetaPanelJugadorV3 {
font-size: 10px;
font-weight: 900;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #887cb6;
}
.nombrePanelJugadorV3 {
font-size: 24px !important;
font-weight: 900;
line-height: 1.05;
margin: 4px 0 10px;
text-align: center;
}
.statPanelJugadorV3 {
min-height: 49px;
padding: 6px 4px;
border-radius: 14px;
border: 1px solid #e2dbff;
background: linear-gradient(180deg, #f8f5ff, #efebff);
text-align: center;
}
.statPanelJugadorV3 span {
display: block;
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
color: #6e649b;
}
.statPanelJugadorV3 strong {
display: block;
margin-top: 2px;
font-size: 18px;
font-weight: 900;
color: #32285f;
}
.accionesPanelJugadorV3 {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 8px !important;
grid-template-areas: "perfil avatar" "tienda tienda" "intro cambiar";
}
#panelVerPerfilV3 {
grid-area: perfil;
}
#panelAvatarV3 {
grid-area: avatar;
}
#panelTiendaV3 {
grid-area: tienda;
}
#panelIntroV3 {
grid-area: intro;
}
#panelCambiarJugadorV3 {
grid-area: cambiar;
}
#panelMenuV3 {
grid-area: cambiar;
}
.botonPanelJugadorV3 {
min-height: 72px !important;
border-radius: 16px !important;
border: 2px solid #ded7fb !important;
background: linear-gradient(145deg, #f7f4ff, #eee9ff) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 5px;
text-align: center !important;
color: #4e418b !important;
font-size: 15px !important;
font-weight: 900 !important;
text-transform: uppercase !important;
box-shadow: 0 4px 0 rgba(89, 69, 166, 0.08);
}
.botonPanelJugadorV3:hover {
transform: translateY(-2px);
border-color: #7a67df !important;
background: linear-gradient(145deg, #efe9ff, #ded5ff) !important;
}
.iconoAccionPanelV3 {
width: 38px !important;
height: 38px !important;
border-radius: 12px;
background: white;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 24px !important;
box-shadow: 0 3px 7px rgba(54, 40, 110, 0.1);
}
.textoAccionPanelV3 {
line-height: 1.05;
}
#panelTiendaV3 {
min-height: 78px !important;
background: linear-gradient(145deg, #ffed98, #f0c63b) !important;
border: 2px solid #d2a62c !important;
color: #5b4308 !important;
box-shadow:
0 5px 0 rgba(178, 132, 15, 0.18),
0 8px 18px rgba(220, 178, 45, 0.2);
}
#panelTiendaV3:hover {
background: linear-gradient(145deg, #fff3b8, #edc236) !important;
}
#panelTiendaV3 .iconoAccionPanelV3 {
background: rgba(255, 255, 255, 0.95);
}
#panelIntroV3,
#panelCambiarJugadorV3,
#panelMenuV3 {
min-height: 58px !important;
font-size: 13px !important;
}
#panelIntroV3 .iconoAccionPanelV3,
#panelCambiarJugadorV3 .iconoAccionPanelV3,
#panelMenuV3 .iconoAccionPanelV3 {
width: 32px !important;
height: 32px !important;
font-size: 20px !important;
}
.botonSistemaPanelV3 {
min-height: 40px !important;
border-radius: 12px !important;
font-size: 12px !important;
font-weight: 900 !important;
text-transform: uppercase;
border: 1px solid #d9d2f5;
background: linear-gradient(180deg, #faf9ff, #f0edff);
color: #5e518e;
}
.audioPanelV3 {
margin-top: auto;
padding-top: 8px;
border-top: 1px dashed #d2c8ef;
}
#pantallaMenu.pantallaMenu {
background:
radial-gradient(
circle at 80% 8%,
rgba(255, 255, 255, 0.6),
transparent 18%
),
radial-gradient(
circle at 10% 90%,
rgba(226, 202, 114, 0.22),
transparent 24%
),
linear-gradient(145deg, #fff0a8, #fff8d8) !important;
}
#pantallaPerfilJugador {
background:
radial-gradient(
circle at 88% 10%,
rgba(211, 191, 255, 0.25),
transparent 25%
),
radial-gradient(
circle at 15% 90%,
rgba(255, 222, 131, 0.28),
transparent 26%
),
linear-gradient(145deg, #fff1af, #f6f0ff) !important;
padding-left: var(--v3-reserva-panel) !important;
padding-right: 20px !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 {
background:
radial-gradient(
circle at 85% 18%,
rgba(171, 147, 255, 0.2),
transparent 22%
),
radial-gradient(
circle at 18% 88%,
rgba(255, 222, 118, 0.25),
transparent 24%
),
linear-gradient(145deg, #fff1b3, #f4efff) !important;
}
.pantallaTiendaAvatar.panelJugadorActivoV3 {
background:
radial-gradient(
circle at 85% 15%,
rgba(255, 214, 99, 0.23),
transparent 22%
),
radial-gradient(
circle at 10% 88%,
rgba(194, 172, 255, 0.2),
transparent 25%
),
linear-gradient(145deg, #fff2bb, #f6f0ff) !important;
}
#pantallaMenu .tituloMundos {
font-size: clamp(29px, 2.7vw, 38px) !important;
margin: 0 auto 8px;
text-align: center;
color: #46388a;
}
#pantallaMenu .tituloMundos::before {
content: "🗺️ MAPA DE AVENTURAS";
display: block;
margin-bottom: 3px;
font-family: var(--fuente-principal);
font-size: 11px;
font-weight: 900;
letter-spacing: 2px;
color: #a57f21;
}
#pantallaMenu #tarjetaProgresoGeneral {
border: 3px solid #d8bc64 !important;
background: linear-gradient(
160deg,
rgba(255, 254, 241, 0.97),
rgba(255, 249, 225, 0.96)
) !important;
box-shadow:
0 8px 0 rgba(161, 125, 38, 0.1),
0 14px 28px rgba(88, 65, 23, 0.08);
}
#pantallaMenu .mundoProgresoGeneral {
position: relative;
min-height: 68px !important;
padding: 8px 14px 8px 62px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 17px !important;
}
#pantallaMenu .iconoMundoProgreso {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.92);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px !important;
box-shadow: 0 2px 6px rgba(54, 42, 76, 0.1);
}
#pantallaMenu .mundoProgresoGeneral strong {
display: block !important;
width: 100%;
text-align: center !important;
font-weight: 900;
line-height: 1.05;
color: #4c4337;
}
#pantallaMenu .mundoProgresoGeneral small {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
margin-top: 0 !important;
font-size: 13px !important;
font-weight: 900;
color: #7d735e;
white-space: nowrap;
}
#pantallaMenu .hitoRangoGeneral {
min-height: 68px !important;
padding: 6px 10px !important;
flex-direction: row !important;
background: linear-gradient(145deg, #f6f2ff, #ece6ff) !important;
border: 2px solid #d5cbff !important;
}
#pantallaMenu .hitoRangoGeneral > span {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: flex;
align-items: center;
justify-content: center;
font-size: 27px !important;
border-radius: 12px;
background: white;
box-shadow: 0 2px 6px rgba(59, 46, 116, 0.1);
}
#pantallaMenu .hitoRangoGeneral strong {
margin-top: 0 !important;
font-weight: 900;
color: #5647a1;
}
#pantallaPerfilJugador .tarjetaJugador,
#pantallaPerfilJugador .tarjetaPerfil,
#pantallaPerfilJugador .panelPerfil,
#pantallaPerfilJugador .carnetAventurero,
#pantallaPerfilJugador .carnetAventureroV3 {
border-radius: 24px !important;
border: 3px solid #d8cef9 !important;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.96),
rgba(248, 243, 255, 0.95)
) !important;
box-shadow: 0 8px 24px rgba(78, 61, 141, 0.1);
}
#pantallaPerfilJugador .avatarCompuesto {
width: 170px !important;
height: 170px !important;
}
#pantallaPerfilJugador h1,
#pantallaPerfilJugador h2 {
color: #46388a;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .cabeceraAvatarStudio {
border: 3px solid #7a67db !important;
border-radius: 22px !important;
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0.97),
rgba(244, 238, 255, 0.97)
) !important;
box-shadow: 0 5px 0 rgba(81, 60, 148, 0.1);
padding: 10px 14px !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .cabeceraAvatarStudio h2 {
font-size: 24px !important;
color: #4a3982;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .cabeceraAvatarStudio p {
font-size: 12px !important;
color: #7b729d;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .progresoAvatarStudio {
display: none !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .cabeceraAvatarStudio .botonVolver,
.pantallaAvatarStudio.panelJugadorActivoV3
.cabeceraAvatarStudio
.botonVolverMenu,
.pantallaAvatarStudio.panelJugadorActivoV3
.cabeceraAvatarStudio
button:first-child {
display: none !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriasAvatarStudio {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriaAvatarStudio {
min-height: 60px !important;
border-radius: 16px !important;
border: 2px solid #d8cff8 !important;
display: grid !important;
grid-template-columns: 30px minmax(0, 1fr) !important;
gap: 6px !important;
padding: 8px 8px !important;
background: linear-gradient(145deg, #fbfaff, #f2eeff) !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriaAvatarStudio span {
font-size: 24px !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriaAvatarStudio small {
font-size: 11px !important;
font-weight: 900;
line-height: 1.05;
color: #60548f;
}
.pantallaAvatarStudio.panelJugadorActivoV3
.categoriaAvatarStudio.categoriaAvatarActiva {
background: linear-gradient(145deg, #705cdc, #5c47bc) !important;
border-color: #5f4bc8 !important;
color: white !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3
.categoriaAvatarStudio.categoriaAvatarActiva
small {
color: white !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .tituloCategoriaAvatar h3 {
font-size: 21px !important;
color: #46388a;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .tituloCategoriaAvatar small {
font-size: 11px !important;
color: #8379a9;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionesAvatarStudio {
grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)) !important;
gap: 10px !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio {
min-height: 118px !important;
padding: 8px 6px !important;
border-radius: 17px !important;
border: 2px solid #d7d0f1 !important;
background: linear-gradient(145deg, #ffffff, #f8f5ff) !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .muestraOpcionAvatar {
width: 52px !important;
height: 52px !important;
font-size: 27px !important;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio strong {
font-size: 13px !important;
line-height: 1.08;
color: #4c4187;
}
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio small {
font-size: 10px !important;
}
.panelJugadorV3[data-contexto="avatar"] .accionesPanelJugadorV3 {
grid-template-columns: 1fr 1fr;
grid-template-areas: "tienda tienda" "menu menu";
}
.panelJugadorV3[data-contexto="avatar"] #panelVerPerfilV3,
.panelJugadorV3[data-contexto="avatar"] #panelAvatarV3,
.panelJugadorV3[data-contexto="avatar"] #panelIntroV3,
.panelJugadorV3[data-contexto="avatar"] #panelCambiarJugadorV3 {
display: none !important;
}
.panelJugadorV3[data-contexto="avatar"] .accionesSistemaPanelV3 {
display: none !important;
}
.pantallaTiendaAvatar .cabeceraTienda,
.pantallaTiendaAvatar .panelTienda,
.pantallaTiendaAvatar .tarjetaTienda,
.pantallaTiendaAvatar .bloqueTienda {
border-radius: 24px !important;
border: 3px solid #dec76f !important;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.97),
rgba(255, 248, 217, 0.95)
) !important;
box-shadow: 0 8px 22px rgba(178, 137, 31, 0.1);
}
@media (max-height: 730px) and (min-width: 1001px) {
.avatarPanelJugadorV3 {
width: 165px !important;
height: 165px !important;
}
.avatarPanelJugadorV3 .avatarCompuesto {
width: 159px !important;
height: 159px !important;
flex-basis: 159px !important;
}
.nombrePanelJugadorV3 {
font-size: 21px !important;
}
.botonPanelJugadorV3 {
min-height: 64px !important;
font-size: 13px !important;
}
.iconoAccionPanelV3 {
width: 33px !important;
height: 33px !important;
font-size: 21px !important;
}
#panelTiendaV3 {
min-height: 70px !important;
}
#pantallaMenu .mundoProgresoGeneral {
min-height: 63px !important;
}
#pantallaMenu .mundoProgresoGeneral strong {
font-size: 15px !important;
}
#pantallaMenu .mundoProgresoGeneral small {
font-size: 12px !important;
}
#pantallaMenu .hitoRangoGeneral {
min-height: 60px !important;
}
#pantallaMenu .hitoRangoGeneral strong {
font-size: 14px !important;
}
}
.nombrePanelJugadorV3 {
font-family:
"Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif !important;
font-size: 23px !important;
font-weight: 900 !important;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #46388a;
margin: 3px 0 9px;
}
.panelJugadorV3[data-contexto="menu"] .accionesPanelJugadorV3 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
grid-template-areas: "perfil avatar" "tienda tienda" "intro cambiar" !important;
gap: 8px !important;
}
.panelJugadorV3[data-contexto="menu"] #panelVerPerfilV3 {
grid-area: perfil;
}
.panelJugadorV3[data-contexto="menu"] #panelAvatarV3 {
grid-area: avatar;
}
.panelJugadorV3[data-contexto="menu"] #panelTiendaV3 {
grid-area: tienda;
}
.panelJugadorV3[data-contexto="menu"] #panelIntroV3 {
grid-area: intro;
}
.panelJugadorV3[data-contexto="menu"] #panelCambiarJugadorV3 {
grid-area: cambiar;
}
.panelJugadorV3[data-contexto="menu"] #panelMenuV3 {
display: none !important;
}
.panelJugadorV3[data-contexto="menu"] #panelIntroV3,
.panelJugadorV3[data-contexto="menu"] #panelCambiarJugadorV3 {
min-height: 63px !important;
padding: 6px 5px !important;
gap: 4px !important;
font-size: 12px !important;
line-height: 1.05;
text-align: center;
}
.panelJugadorV3[data-contexto="menu"] #panelIntroV3 .iconoAccionPanelV3,
.panelJugadorV3[data-contexto="menu"]
#panelCambiarJugadorV3
.iconoAccionPanelV3 {
width: 32px !important;
height: 32px !important;
font-size: 20px !important;
}
.panelJugadorV3[data-contexto="menu"] #panelVerPerfilV3,
.panelJugadorV3[data-contexto="menu"] #panelAvatarV3 {
min-height: 67px !important;
}
.panelJugadorV3[data-contexto="menu"] .accionesSistemaPanelV3 {
margin-top: 7px !important;
}
.panelJugadorV3[data-contexto="avatar"] #panelMenuV3 {
display: flex !important;
grid-area: menu;
min-height: 58px !important;
}
.panelJugadorV3[data-contexto="avatar"] #panelCambiarJugadorV3 {
display: none !important;
}
#pantallaMenu.panelJugadorActivoV3 {
padding-top: 22px !important;
padding-right: 26px !important;
padding-bottom: 26px !important;
padding-left: calc(var(--v3-panel-ancho) + 34px) !important;
}
.avatarPanelJugadorV3 {
width: 176px !important;
height: 176px !important;
margin-bottom: 6px !important;
}
.botonPanelJugadorV3 {
min-height: 62px !important;
border-radius: 15px !important;
font-size: 13px !important;
}
#panelIntroV3,
#panelCambiarJugadorV3 {
min-height: 58px !important;
font-size: 11px !important;
}
.accionesSistemaPanelV3 .botonSistemaPanelV3 {
min-height: 36px !important;
font-size: 11px !important;
}
#pantallaMenu .tituloMundos {
margin-top: 2px !important;
margin-bottom: 12px !important;
}
#pantallaMenu #tarjetaProgresoGeneral {
padding: 14px 14px 14px !important;
border-radius: 24px !important;
}
#pantallaMenu .granPruebaLimpiaV3 small,
#pantallaMenu .granPruebaLimpiaV3 .textoRequisito,
#pantallaMenu .granPruebaLimpiaV3 .requisitoGranPrueba,
#pantallaMenu .granPruebaLimpiaV3 .subtextoBloqueo {
white-space: nowrap;
}
#pantallaMenu .tituloMundos::before {
margin-bottom: 5px !important;
}
#pantallaMenu .caminoRangosGeneral {
margin-bottom: 2px !important;
}
@media (max-height: 760px) and (min-width: 1001px) {
:root {
--v3-panel-ancho: 270px;
--v3-reserva-panel: 302px;
}
.panelJugadorV3 {
padding: 12px 10px 12px !important;
}
.avatarPanelJugadorV3 {
width: 164px !important;
height: 164px !important;
}
.avatarPanelJugadorV3 .avatarCompuesto {
width: 158px !important;
height: 158px !important;
flex: 0 0 158px !important;
}
.nombrePanelJugadorV3 {
font-size: 18px !important;
}
#pantallaMenu .tituloMundos,
#pantallaMenu #tarjetaProgresoGeneral {
width: min(100%, 930px) !important;
}
#pantallaMenu .mundoProgresoGeneral {
min-height: 57px !important;
}
#pantallaMenu .mundoProgresoGeneral strong {
font-size: 14px !important;
}
#pantallaMenu .hitoRangoGeneral {
min-height: 52px !important;
}
}
:root {
--v3-panel-ancho: 250px;
--v3-reserva-panel: 286px;
}
.avatarPanelJugadorV3 .avatarCompuesto {
width: 146px !important;
height: 146px !important;
flex: 0 0 146px !important;
}
.statPanelJugadorV3 {
min-height: 42px !important;
border-radius: 12px !important;
}
.panelJugadorV3[data-contexto="menu"] .botonPanelJugadorV3 {
min-height: 58px !important;
}
.panelJugadorV3[data-contexto="menu"] .iconoAccionPanelV3 {
font-size: 19px !important;
}
.panelJugadorV3[data-contexto="menu"] #panelTiendaV3 {
min-height: 58px !important;
}
.panelJugadorV3[data-contexto="menu"] #panelIntroV3,
.panelJugadorV3[data-contexto="menu"] #panelCambiarJugadorV3 {
min-height: 53px !important;
padding: 4px 3px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
text-align: center !important;
}
#panelCambiarJugadorV3 .textoAccionPanelV3 {
font-size: 10.5px !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
#panelIntroV3 .textoAccionPanelV3 {
width: 100%;
text-align: center;
font-size: 10.5px !important;
}
#pantallaMenu.panelJugadorActivoV3 {
padding: 18px 30px 20px calc(var(--v3-panel-ancho) + 48px) !important;
box-sizing: border-box;
}
#pantallaMenu .tituloMundos {
width: min(100%, 850px) !important;
margin: 0 auto 9px !important;
font-size: clamp(26px, 2.5vw, 34px) !important;
}
#pantallaMenu .tituloMundos::before {
margin-bottom: 2px !important;
font-size: 9px !important;
}
#pantallaMenu #tarjetaProgresoGeneral {
width: min(100%, 850px) !important;
margin: 0 auto !important;
padding: 11px 12px !important;
border-radius: 22px !important;
box-sizing: border-box;
}
#pantallaMenu .cabeceraProgresoGeneral {
margin-bottom: 5px !important;
}
#pantallaMenu .iconoRangoGeneral {
width: 41px !important;
height: 41px !important;
flex: 0 0 41px !important;
font-size: 24px !important;
}
#pantallaMenu .rangoAventureroGeneral strong {
font-size: 17px !important;
}
#pantallaMenu .contadorProgresoGeneral {
padding: 5px 10px !important;
font-size: 13px !important;
}
#pantallaMenu .barraProgresoGeneral {
height: 10px !important;
}
#pantallaMenu .porcentajeProgresoGeneral {
margin-top: 2px !important;
font-size: 8px !important;
}
#pantallaMenu .mundosProgresoGeneral {
gap: 6px 8px !important;
margin-top: 7px !important;
}
#pantallaMenu .mundoProgresoGeneral {
min-height: 52px !important;
padding: 5px 12px 5px 50px !important;
border-radius: 14px !important;
}
#pantallaMenu .iconoMundoProgreso {
left: 9px !important;
width: 34px !important;
height: 34px !important;
font-size: 22px !important;
}
#pantallaMenu .mundoProgresoGeneral small {
right: 11px !important;
font-size: 10.5px !important;
}
#pantallaMenu .granPruebaAccesibleV3 {
opacity: 1 !important;
cursor: pointer !important;
}
#pantallaMenu .granPruebaAccesibleV3:disabled {
pointer-events: auto !important;
opacity: 1 !important;
}
#pantallaMenu .hitoRangoGeneral {
min-height: 48px !important;
padding: 4px 6px !important;
border-radius: 12px !important;
}
#pantallaMenu .hitoRangoGeneral > span {
width: 32px !important;
height: 32px !important;
flex: 0 0 32px !important;
font-size: 20px !important;
}
#pantallaMenu .hitoRangoGeneral strong {
font-size: 12px !important;
}
.mensajeBloqueoGranPruebaV3 {
width: min(650px, 92%);
margin: 4px auto 18px;
padding: 14px 18px;
border: 3px solid #d6b84d;
border-radius: 20px;
background: linear-gradient(135deg, #fff7c7, #f1e9ff);
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
box-shadow: 0 5px 0 rgba(148, 111, 24, 0.11);
text-align: left;
}
.iconoBloqueoGranPruebaV3 {
width: 57px;
height: 57px;
flex: 0 0 57px;
border-radius: 17px;
background: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
}
.contenidoBloqueoGranPruebaV3 {
display: flex;
flex-direction: column;
gap: 4px;
}
.contenidoBloqueoGranPruebaV3 strong {
color: #59438f;
font-size: 16px;
}
.contenidoBloqueoGranPruebaV3 span {
color: #776e86;
font-size: 13px;
}
.contadorBloqueoGranPruebaV3 {
width: fit-content;
margin-top: 3px;
padding: 4px 11px;
border-radius: 999px;
background: #6b58d9;
color: white;
font-size: 12px;
font-weight: 900;
}
.nivelGranPruebaBloqueadoV3 {
opacity: 0.48 !important;
filter: grayscale(0.35);
cursor: not-allowed !important;
}
@media (max-height: 730px) and (min-width: 1001px) {
.panelJugadorV3 {
top: 16px !important;
bottom: 16px !important;
}
.avatarPanelJugadorV3 {
width: 142px !important;
height: 142px !important;
}
.avatarPanelJugadorV3 .avatarCompuesto {
width: 138px !important;
height: 138px !important;
flex-basis: 138px !important;
}
.panelJugadorV3[data-contexto="menu"] .botonPanelJugadorV3 {
min-height: 53px !important;
}
.panelJugadorV3[data-contexto="menu"] #panelTiendaV3 {
min-height: 55px !important;
}
#pantallaMenu #tarjetaProgresoGeneral,
#pantallaMenu .tituloMundos {
width: min(100%, 835px) !important;
}
#pantallaMenu .mundoProgresoGeneral {
min-height: 49px !important;
}
}
:root {
--v3-panel-ancho: 236px;
}
.panelJugadorV3 {
width: var(--v3-panel-ancho) !important;
left: 16px !important;
top: 16px !important;
bottom: 16px !important;
padding: 11px 10px !important;
border-radius: 24px !important;
background: linear-gradient(180deg, #f8f4ff 0%, #f3edff 100%) !important;
box-shadow:
0 8px 0 rgba(111, 86, 198, 0.08),
0 16px 30px rgba(89, 67, 159, 0.12) !important;
}
#pantallaMenu.panelJugadorActivoV3 {
padding-top: 16px !important;
padding-right: 20px !important;
padding-bottom: 18px !important;
padding-left: calc(var(--v3-panel-ancho) + 30px) !important;
}
.avatarPanelJugadorV3 {
width: 142px !important;
height: 142px !important;
margin: 0 auto 4px !important;
}
.avatarPanelJugadorV3 .avatarCompuesto {
width: 138px !important;
height: 138px !important;
flex: 0 0 138px !important;
}
.nombrePanelJugadorV3 {
font-size: 18px !important;
margin: 2px 0 8px !important;
}
.statsPanelJugadorV3 {
gap: 5px !important;
margin-bottom: 8px !important;
}
.statPanelJugadorV3 {
min-height: 41px !important;
padding: 4px 2px !important;
}
.statPanelJugadorV3 strong {
font-size: 15px !important;
}
.panelJugadorV3[data-contexto="menu"] .botonPanelJugadorV3 {
min-height: 56px !important;
padding: 5px 4px !important;
border-radius: 14px !important;
font-size: 11px !important;
}
.panelJugadorV3[data-contexto="menu"] .iconoAccionPanelV3 {
width: 29px !important;
height: 29px !important;
font-size: 18px !important;
}
#panelVerPerfilV3,
#panelAvatarV3 {
background: linear-gradient(180deg, #8d73eb 0%, #755add 100%) !important;
border: 2px solid #6d54d7 !important;
box-shadow:
0 5px 0 rgba(90, 69, 191, 0.28),
0 10px 18px rgba(99, 72, 194, 0.12) !important;
}
#panelVerPerfilV3 .textoAccionPanelV3,
#panelAvatarV3 .textoAccionPanelV3 {
color: #ffffff !important;
font-weight: 800 !important;
}
#panelVerPerfilV3 .iconoAccionPanelV3,
#panelAvatarV3 .iconoAccionPanelV3 {
background: rgba(255, 255, 255, 0.16) !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.24) !important;
}
#panelTiendaV3 {
min-height: 56px !important;
}
#panelIntroV3,
#panelCambiarJugadorV3 {
min-height: 50px !important;
padding: 4px 3px !important;
}
#panelCambiarJugadorV3 .textoAccionPanelV3 {
display: block !important;
width: 100% !important;
text-align: center !important;
font-size: 10.4px !important;
line-height: 1.05 !important;
margin: 0 !important;
padding: 0 2px !important;
}
.accionesSistemaPanelV3 {
gap: 4px !important;
margin-top: 4px !important;
}
.botonSistemaPanelV3 {
min-height: 31px !important;
font-size: 9px !important;
padding: 3px !important;
}
.audioPanelV3 {
padding-top: 4px !important;
}
#pantallaMenu .mundoProgresoGeneral {
min-height: 50px !important;
padding: 5px 11px 5px 49px !important;
}
#pantallaMenu .iconoMundoProgreso {
left: 8px !important;
width: 33px !important;
height: 33px !important;
font-size: 21px !important;
}
#pantallaMenu .mundoProgresoGeneral strong {
font-size: 14px !important;
}
#pantallaMenu .mundoProgresoGeneral small {
right: 10px !important;
}
#pantallaMenu .granPruebaActivaV354 {
pointer-events: auto !important;
cursor: pointer !important;
opacity: 1 !important;
}
#pantallaMenu .granPruebaActivaV354:disabled {
pointer-events: auto !important;
opacity: 1 !important;
}
#pantallaMenu .granPruebaActivaV354 small {
z-index: 2 !important;
}
#pantallaMenu .granPruebaActivaV354::after {
content: none !important;
}
#pantallaMenu .caminoRangosGeneral {
gap: 6px !important;
margin-top: 7px !important;
padding-top: 7px !important;
}
#pantallaMenu .hitoRangoGeneral > span {
width: 31px !important;
height: 31px !important;
flex: 0 0 31px !important;
font-size: 19px !important;
}
@media (max-height: 730px) and (min-width: 1001px) {
:root {
--v3-panel-ancho: 228px;
}
.panelJugadorV3 {
top: 14px !important;
bottom: 14px !important;
}
.avatarPanelJugadorV3 {
width: 136px !important;
height: 136px !important;
}
.avatarPanelJugadorV3 .avatarCompuesto {
width: 132px !important;
height: 132px !important;
flex-basis: 132px !important;
}
#pantallaMenu .tituloMundos,
#pantallaMenu #tarjetaProgresoGeneral {
width: min(100%, 795px) !important;
}
}
#pantallaMenu.panelJugadorActivoV3 {
padding-left: calc(var(--v3-panel-ancho) + 58px) !important;
padding-right: 16px !important;
}
#pantallaMenu .tituloMundos,
#pantallaMenu #tarjetaProgresoGeneral {
margin-left: auto !important;
margin-right: auto !important;
}
#pantallaMenu .tituloMundos,
#pantallaMenu #tarjetaProgresoGeneral {
left: 48px !important;
width: min(100%, 810px) !important;
}
@media (max-width: 1250px) {
#pantallaMenu .tituloMundos,
#pantallaMenu #tarjetaProgresoGeneral {
left: 25px !important;
}
}
#pantallaMenu .tituloMundos,
#pantallaMenu #tarjetaProgresoGeneral {
position: relative !important;
left: 68px !important;
}
#pantallaMenu.panelJugadorActivoV3 {
padding-right: 38px !important;
}
@media (max-width: 1250px) {
#pantallaMenu .tituloMundos,
#pantallaMenu #tarjetaProgresoGeneral {
left: 36px !important;
}
}
#pantallaMenu .caminoRangosGeneral {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 10px !important;
margin-top: 10px !important;
align-items: stretch !important;
}
#pantallaMenu .hitoRangoGeneral {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
min-height: 58px !important;
padding: 8px 10px !important;
border-radius: 16px !important;
text-align: left !important;
overflow: hidden !important;
}
#pantallaMenu .hitoRangoGeneral > span:first-child {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
flex: 0 0 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 20px !important;
line-height: 1 !important;
}
#pantallaMenu .hitoRangoGeneral .contenidoRangoGeneral,
#pantallaMenu .hitoRangoGeneral .textoRangoGeneral {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
min-width: 0 !important;
flex: 1 !important;
}
#pantallaMenu .hitoRangoGeneral strong {
display: block !important;
font-size: 22px !important;
font-weight: 800 !important;
color: #5e48b7 !important;
}
#pantallaMenu .hitoRangoGeneral small {
font-size: 12px !important;
line-height: 1.15 !important;
color: #6d5f8f !important;
margin-top: 4px !important;
opacity: 1 !important;
visibility: visible !important;
white-space: normal !important;
}
#pantallaMenu .hitoRangoGeneral span:not(:first-child) {
opacity: 1 !important;
visibility: visible !important;
}
#pantallaMenu .hitoRangoGeneral.bloqueado,
#pantallaMenu .hitoRangoGeneral.rangoBloqueado,
#pantallaMenu .hitoRangoGeneral[data-estado="bloqueado"] {
background: #f4f0ff !important;
border: 2px solid #c9bcf0 !important;
}
#pantallaMenu .hitoRangoGeneral.desbloqueado,
#pantallaMenu .hitoRangoGeneral.rangoDesbloqueado,
#pantallaMenu .hitoRangoGeneral[data-estado="desbloqueado"] {
background: #efe9ff !important;
border: 2px solid #8d73eb !important;
}
#pantallaMenu #tarjetaProgresoGeneral {
max-width: 820px !important;
}
#pantallaMenu .hitoRangoGeneral {
min-height: 50px !important;
padding: 5px 7px !important;
gap: 6px !important;
}
#pantallaMenu .hitoRangoGeneral > span:first-child {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
flex: 0 0 30px !important;
font-size: 18px !important;
}
#pantallaMenu .hitoRangoGeneral strong {
font-size: 16px !important;
line-height: 1 !important;
margin: 0 !important;
font-weight: 900 !important;
}
#pantallaMenu .hitoRangoGeneral small {
display: block !important;
font-size: 9px !important;
line-height: 1.05 !important;
margin-top: 2px !important;
font-weight: 700 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: unset !important;
}
#pantallaMenu .hitoRangoGeneral span:not(:first-child) {
font-size: 9px !important;
line-height: 1.05 !important;
white-space: nowrap !important;
}
#pantallaMenu .hitoRangoGeneral {
overflow: visible !important;
}
.panelJugadorV3[data-contexto="perfil"] {
display: none !important;
}
#pantallaPerfilJugador.panelJugadorActivoV3 {
width: 100% !important;
padding-left: 28px !important;
padding-right: 28px !important;
box-sizing: border-box !important;
}
#pantallaPerfilJugador .cabeceraPerfil {
width: min(1120px, 96%) !important;
margin-left: auto !important;
margin-right: auto !important;
}
#pantallaPerfilJugador .carnetAventurero {
width: min(1120px, 96%) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
#pantallaPerfilJugador .zonaIdentidadPerfil {
width: 100% !important;
display: grid !important;
grid-template-columns: auto minmax(220px, 1fr) auto !important;
justify-content: stretch !important;
gap: 28px !important;
}
#pantallaPerfilJugador .avatarPerfil {
justify-self: center !important;
}
#pantallaPerfilJugador .datosIdentidadPerfil {
min-width: 0 !important;
justify-self: stretch !important;
}
.accionesRapidasPerfilV3 {
min-width: 190px;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
align-self: center;
}
.botonRapidoPerfilV3 {
width: 100%;
min-height: 58px;
padding: 10px 15px;
border: 2px solid #7763de;
border-radius: 15px;
background: #eee9ff;
color: #493c87;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
font-family: Cambria, Georgia, serif;
font-size: 14px;
font-weight: 900;
cursor: pointer;
transition:
transform 0.15s ease,
box-shadow 0.15s ease;
}
.botonRapidoPerfilV3:hover {
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(83, 64, 160, 0.14);
}
.iconoBotonRapidoPerfilV3 {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: white;
font-size: 21px;
}
#botonTiendaPerfilV3 {
border-color: #d6ad35;
background: #fff3bd;
color: #654d09;
}
#pantallaPerfilJugador .accionesPerfil {
display: none !important;
}
@media (max-width: 850px) {
#pantallaPerfilJugador .zonaIdentidadPerfil {
grid-template-columns: 1fr !important;
text-align: center;
gap: 16px !important;
}
.accionesRapidasPerfilV3 {
width: min(420px, 100%);
margin: 0 auto;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
#pantallaPerfilJugador .zonaIdentidadPerfil {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 24px !important;
min-height: 175px;
padding-left: 210px !important;
padding-right: 210px !important;
}
#pantallaPerfilJugador .avatarPerfil {
flex: 0 0 145px !important;
margin: 0 !important;
}
#pantallaPerfilJugador .datosIdentidadPerfil {
flex: 0 0 auto !important;
min-width: 190px !important;
text-align: left !important;
}
#pantallaPerfilJugador .datosIdentidadPerfil h1 {
margin: 5px 0 !important;
text-align: left !important;
}
#pantallaPerfilJugador .accionesRapidasPerfilV3 {
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 190px !important;
min-width: 190px !important;
}
#pantallaPerfilJugador .estadisticasPerfil {
margin: 18px 0 22px !important;
gap: 10px !important;
}
#pantallaPerfilJugador .datoPerfil {
min-height: 104px !important;
padding: 11px 8px !important;
border-radius: 15px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
#pantallaPerfilJugador .datoPerfil > span {
font-size: 24px !important;
line-height: 1 !important;
}
#pantallaPerfilJugador .datoPerfil strong {
margin: 4px 0 3px !important;
font-size: 21px !important;
line-height: 1 !important;
}
#pantallaPerfilJugador .datoPerfil small {
font-size: 11px !important;
line-height: 1 !important;
font-weight: 700 !important;
}
@media (max-width: 950px) {
#pantallaPerfilJugador .zonaIdentidadPerfil {
padding-left: 0 !important;
padding-right: 0 !important;
flex-wrap: wrap !important;
}
#pantallaPerfilJugador .accionesRapidasPerfilV3 {
position: static !important;
transform: none !important;
width: min(400px, 100%) !important;
flex-basis: 100% !important;
grid-template-columns: repeat(2, 1fr) !important;
margin: 8px auto 0 !important;
}
}
.avisoGranPruebaPerfilV3 {
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 12px;
margin: 10px 0 18px;
padding: 14px 16px;
border: 2px dashed #b8adc9;
border-radius: 18px;
background: #f7f3ff;
color: #5c4b8a;
font-family: Cambria, Georgia, serif;
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
.avisoGranPruebaPerfilV3 .iconoAvisoGranPruebaPerfilV3 {
flex: 0 0 auto;
font-size: 22px;
line-height: 1;
}
.avisoGranPruebaPerfilV3 strong {
color: #4d3fa1;
font-size: 18px;
}
#pantallaPerfilJugador .carnetAventurero {
position: relative;
overflow: hidden;
background: linear-gradient(145deg, #fffef9, #faf7ff) !important;
border: 3px solid #ddd5fb !important;
box-shadow: 0 12px 32px rgba(75, 55, 135, 0.1);
transition:
border-color 0.4s ease,
box-shadow 0.4s ease,
background 0.4s ease;
}
.selloMejoraPerfilV3 {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
margin-top: 8px;
padding: 5px 11px;
border-radius: 999px;
background: #f1edff;
border: 1px solid #d7cff8;
color: #6558a1;
font-size: 9px;
font-weight: 900;
letter-spacing: 0.7px;
transition: all 0.35s ease;
}
#pantallaPerfilJugador.perfilMejoraFacil1 .avatarPerfil {
position: relative;
filter: drop-shadow(0 0 8px rgba(126, 99, 230, 0.35))
drop-shadow(0 0 18px rgba(126, 99, 230, 0.14));
}
#pantallaPerfilJugador.perfilMejoraFacil2 .datosIdentidadPerfil h1 {
width: fit-content;
padding: 7px 18px;
border-radius: 16px;
background: linear-gradient(135deg, #f0ebff, #faf8ff);
border: 2px solid #d4c9ff;
box-shadow: 0 4px 0 rgba(103, 81, 185, 0.08);
}
#pantallaPerfilJugador.perfilMejoraFacil3 .datoPerfil {
border: 2px solid #ddd4ff;
background: linear-gradient(145deg, #f7f3ff, #fff) !important;
box-shadow: 0 5px 12px rgba(85, 66, 151, 0.08);
}
#pantallaPerfilJugador.perfilMejoraFacil3 .datoPerfil > span {
transform: scale(1.05);
}
#pantallaPerfilJugador.perfilMejoraMedia1 .carnetAventurero {
background:
radial-gradient(
circle at 15% 20%,
rgba(255, 224, 124, 0.14),
transparent 22%
),
radial-gradient(
circle at 85% 75%,
rgba(139, 112, 228, 0.11),
transparent 25%
),
repeating-radial-gradient(
ellipse at 70% 45%,
transparent 0 65px,
rgba(150, 119, 56, 0.025) 66px 68px,
transparent 69px 135px
),
linear-gradient(145deg, #fffdf5, #faf6ff) !important;
}
#pantallaPerfilJugador.perfilMejoraMedia2 .progresoMundoPerfil {
position: relative;
border: 2px solid #d7cff8;
box-shadow: 0 4px 10px rgba(79, 61, 141, 0.07);
transition:
transform 0.18s ease,
box-shadow 0.18s ease;
}
#pantallaPerfilJugador.perfilMejoraMedia2 .progresoMundoPerfil:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(79, 61, 141, 0.13);
}
#pantallaPerfilJugador.perfilMejoraMedia2 .rellenoMundoPerfil {
background: linear-gradient(90deg, #5ac87d, #75d89a) !important;
}
#pantallaPerfilJugador.perfilMejoraMedia3 .avatarPerfil {
animation: avatarAventureroPerfilV3 3.2s ease-in-out infinite;
}
@keyframes avatarAventureroPerfilV3 {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
#pantallaPerfilJugador.perfilMejoraPremium1 .carnetAventurero {
border: 4px solid #e3bd46 !important;
box-shadow:
0 0 0 4px rgba(255, 236, 164, 0.5),
0 15px 35px rgba(142, 103, 24, 0.18);
}
#pantallaPerfilJugador.perfilMejoraPremium2 .carnetAventurero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.52;
background-image:
radial-gradient(circle, rgba(224, 181, 59, 0.75) 0 2px, transparent 3px),
radial-gradient(circle, rgba(111, 86, 213, 0.55) 0 1px, transparent 2px);
background-size:
110px 105px,
160px 145px;
background-position:
15px 20px,
70px 55px;
animation: estrellasPerfilV3 7s linear infinite;
}
#pantallaPerfilJugador.perfilMejoraPremium2 .carnetAventurero > * {
position: relative;
z-index: 1;
}
@keyframes estrellasPerfilV3 {
from {
background-position:
15px 20px,
70px 55px;
}
to {
background-position:
125px 125px,
230px 200px;
}
}
#pantallaPerfilJugador.perfilMejoraPremium3 .carnetAventurero {
border-color: #d4aa24 !important;
box-shadow:
0 0 0 4px rgba(255, 226, 105, 0.55),
0 0 28px rgba(224, 178, 49, 0.32),
0 18px 42px rgba(85, 57, 146, 0.2);
animation: perfilMaestroBrilloV3 3s ease-in-out infinite;
}
#pantallaPerfilJugador.perfilMejoraPremium3 .selloMejoraPerfilV3 {
background: linear-gradient(135deg, #ffe889, #f2c53d);
color: #5c4200;
border: 2px solid #d6a91c;
box-shadow: 0 3px 10px rgba(192, 143, 20, 0.2);
}
@keyframes perfilMaestroBrilloV3 {
0%,
100% {
filter: brightness(1);
}
50% {
filter: brightness(1.04);
}
}
#pantallaPerfilJugador.perfilCategoriaFacil .selloMejoraPerfilV3 {
background: #eee9ff;
border-color: #cfc2ff;
color: #5a47a4;
}
#pantallaPerfilJugador.perfilCategoriaMedia .selloMejoraPerfilV3 {
background: linear-gradient(135deg, #e7f5ff, #eae5ff);
border-color: #a9b7ec;
color: #415493;
}
#pantallaPerfilJugador.perfilCategoriaPremium .selloMejoraPerfilV3 {
background: linear-gradient(135deg, #fff1a9, #edc743);
border-color: #d2a82a;
color: #604600;
}
#pantallaPerfilJugador.perfilCategoriaFacil .botonRapidoPerfilV3:hover {
transform: translateY(-2px) scale(1.01);
}
#pantallaPerfilJugador.perfilCategoriaMedia .botonRapidoPerfilV3 {
box-shadow: 0 4px 10px rgba(82, 62, 149, 0.1);
}
#pantallaPerfilJugador.perfilCategoriaPremium #botonTiendaPerfilV3 {
box-shadow: 0 0 12px rgba(230, 181, 41, 0.28);
}
.toastPremioPerfilV3 {
position: fixed;
top: 24px;
left: 50%;
z-index: 99999;
width: min(430px, calc(100vw - 32px));
padding: 14px 17px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 14px;
transform: translate(-50%, -30px) scale(0.94);
opacity: 0;
pointer-events: none;
background: white;
border: 3px solid #7460d5;
box-shadow: 0 12px 35px rgba(46, 31, 94, 0.25);
transition:
opacity 0.28s ease,
transform 0.28s ease;
}
.toastPremioPerfilV3-visible {
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
.iconoToastPerfilV3 {
width: 58px;
height: 58px;
flex: 0 0 58px;
border-radius: 17px;
background: #f2efff;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
}
.contenidoToastPerfilV3 {
display: flex;
flex-direction: column;
gap: 2px;
}
.contenidoToastPerfilV3 small {
color: #7468a1;
font-size: 9px;
font-weight: 900;
letter-spacing: 1px;
}
.contenidoToastPerfilV3 strong {
color: #493a88;
font-size: 18px;
}
.contenidoToastPerfilV3 span {
color: #716b82;
font-size: 12px;
}
.toastPremioPerfilV3-facil {
border-color: #8068db;
}
.toastPremioPerfilV3-media {
border-color: #4e8ec9;
}
.toastPremioPerfilV3-premium {
border-color: #d6a927;
background: linear-gradient(135deg, #fffdf3, #fff5bf);
}
@media (prefers-reduced-motion: reduce) {
#pantallaPerfilJugador .avatarPerfil,
#pantallaPerfilJugador .carnetAventurero::before,
#pantallaPerfilJugador .carnetAventurero {
animation: none !important;
}
}
.panelJugadorV3[data-contexto="tienda"] {
display: none !important;
}
.pantallaTiendaAvatar.panelJugadorActivoV3 {
width: 100% !important;
min-height: 100vh !important;
padding: 20px 28px 30px !important;
box-sizing: border-box !important;
}
.pantallaTiendaAvatar .cabeceraTiendaAvatar {
position: relative !important;
width: min(1120px, 94%) !important;
min-height: 72px;
margin: 0 auto 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.pantallaTiendaAvatar #botonVolverTiendaAvatar {
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 2;
}
.tituloTiendaAvatarV3 {
text-align: center !important;
margin: 0 auto !important;
}
.tituloTiendaAvatarV3 h2 {
margin: 0 !important;
text-align: center !important;
}
.tituloTiendaAvatarV3 p {
margin: 4px 0 0 !important;
text-align: center !important;
}
.saldoTiendaAvatar {
display: none !important;
}
.pantallaTiendaAvatar .zonaSuperiorTiendaAvatar {
position: relative !important;
width: min(1120px, 94%) !important;
min-height: 205px !important;
margin: 0 auto 18px !important;
padding: 14px 220px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.bloqueAvatarTiendaV3 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.pantallaTiendaAvatar .previewTiendaAvatar {
width: 150px !important;
height: 150px !important;
margin: 0 auto !important;
}
.pantallaTiendaAvatar .previewTiendaAvatar .avatarCompuesto {
width: 145px !important;
height: 145px !important;
flex: 0 0 145px !important;
}
.recursosTiendaV3 {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 7px;
}
.recursoTiendaV3 {
min-width: 68px;
height: 34px;
padding: 4px 10px;
box-sizing: border-box;
border: 2px solid #ddd6f5;
border-radius: 999px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
color: #493d7c;
font-family: Cambria, Georgia, serif;
font-size: 13px;
box-shadow: 0 3px 8px rgba(76, 59, 130, 0.08);
}
.recursoTiendaV3 span {
font-size: 17px;
line-height: 1;
}
.recursoTiendaV3 strong {
font-size: 14px;
font-weight: 900;
}
.recursoMonedasTiendaV3 {
border-color: #e6c350;
background: #fff9dc;
}
.recursoEstrellasTiendaV3 {
border-color: #cdbff5;
background: #f4f0ff;
}
.recursoTrofeosTiendaV3 {
border-color: #eccd67;
background: #fff7d7;
}
.pantallaTiendaAvatar #botonIrEstudioAvatar {
position: absolute !important;
right: 28px !important;
top: 50% !important;
transform: translateY(-50%) !important;
min-width: 190px;
min-height: 62px;
padding: 10px 18px !important;
border-radius: 17px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
}
.pantallaTiendaAvatar #botonIrEstudioAvatar span {
font-size: 25px;
}
.pantallaTiendaAvatar #botonIrEstudioAvatar strong {
font-size: 14px;
}
.pantallaTiendaAvatar .categoriasTiendaAvatar,
.pantallaTiendaAvatar .itemsTiendaAvatar,
.pantallaTiendaAvatar #mensajeTiendaAvatar {
width: min(1120px, 94%) !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 900px) {
.pantallaTiendaAvatar .zonaSuperiorTiendaAvatar {
padding: 15px !important;
flex-direction: column !important;
gap: 12px;
}
.pantallaTiendaAvatar #botonIrEstudioAvatar {
position: static !important;
transform: none !important;
width: min(320px, 100%);
}
.pantallaTiendaAvatar .cabeceraTiendaAvatar {
padding-top: 55px;
}
.pantallaTiendaAvatar #botonVolverTiendaAvatar {
top: 10px !important;
transform: none !important;
}
}
body:has(#pantallaTiendaAvatar:not(.oculto)) {
overflow: hidden !important;
}
#pantallaTiendaAvatar:not(.oculto) {
position: fixed !important;
inset: 0 !important;
z-index: 500 !important;
width: 100vw !important;
height: 100vh !important;
max-height: 100vh !important;
min-height: 0 !important;
padding: 18px 26px 14px !important;
box-sizing: border-box !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
background: linear-gradient(
135deg,
#fff3ad 0%,
#fff9df 46%,
#f8f0ff 100%
) !important;
}
#pantallaTiendaAvatar .cabeceraTiendaAvatar {
width: min(1120px, 94%) !important;
min-height: 64px !important;
height: 64px !important;
flex: 0 0 64px !important;
margin: 0 auto 8px !important;
}
#pantallaTiendaAvatar .tituloTiendaAvatarV3 h2 {
margin: 0 !important;
line-height: 1.05 !important;
}
#pantallaTiendaAvatar .tituloTiendaAvatarV3 p {
margin: 5px 0 0 !important;
}
#pantallaTiendaAvatar .zonaSuperiorTiendaAvatar {
width: min(1120px, 94%) !important;
min-height: 0 !important;
height: 190px !important;
flex: 0 0 190px !important;
margin: 0 auto 10px !important;
padding: 8px 210px !important;
box-sizing: border-box !important;
}
#pantallaTiendaAvatar .recursosTiendaV3 {
margin-top: 4px !important;
}
#pantallaTiendaAvatar .categoriasTiendaAvatar {
width: min(1120px, 94%) !important;
flex: 0 0 auto !important;
margin: 0 auto 8px !important;
padding-bottom: 3px !important;
}
#pantallaTiendaAvatar #mensajeTiendaAvatar {
width: min(1120px, 94%) !important;
flex: 0 0 auto !important;
margin: 0 auto 6px !important;
}
#pantallaTiendaAvatar .itemsTiendaAvatar {
width: min(1120px, 94%) !important;
flex: 1 1 auto !important;
min-height: 0 !important;
margin: 0 auto !important;
padding: 8px 4px 18px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
scrollbar-width: thin;
scrollbar-color: #aa98e8 transparent;
}
#pantallaTiendaAvatar .itemsTiendaAvatar::-webkit-scrollbar {
width: 7px;
}
#pantallaTiendaAvatar .itemsTiendaAvatar::-webkit-scrollbar-track {
background: transparent;
}
#pantallaTiendaAvatar .itemsTiendaAvatar::-webkit-scrollbar-thumb {
background: #b3a4ea;
border-radius: 999px;
}
#pantallaTiendaAvatar .itemsTiendaAvatar::-webkit-scrollbar-thumb:hover {
background: #8b73dc;
}
#pantallaTiendaAvatar .tarjetaItemTiendaAvatar {
align-self: start !important;
}
@media (max-height: 720px) and (min-width: 901px) {
#pantallaTiendaAvatar:not(.oculto) {
padding-top: 10px !important;
padding-bottom: 8px !important;
}
#pantallaTiendaAvatar .cabeceraTiendaAvatar {
height: 58px !important;
min-height: 58px !important;
flex-basis: 58px !important;
margin-bottom: 6px !important;
}
#pantallaTiendaAvatar .zonaSuperiorTiendaAvatar {
height: 174px !important;
flex-basis: 174px !important;
margin-bottom: 7px !important;
}
#pantallaTiendaAvatar .previewTiendaAvatar {
width: 130px !important;
height: 130px !important;
}
#pantallaTiendaAvatar .previewTiendaAvatar .avatarCompuesto {
width: 126px !important;
height: 126px !important;
flex-basis: 126px !important;
}
#pantallaTiendaAvatar .categoriasTiendaAvatar {
margin-bottom: 5px !important;
}
}
#pantallaTiendaAvatar .zonaSuperiorTiendaAvatar {
position: relative !important;
height: 200px !important;
flex: 0 0 200px !important;
padding: 8px 220px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#pantallaTiendaAvatar .bloqueAvatarTiendaV3 {
position: static !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto !important;
}
#pantallaTiendaAvatar .previewTiendaAvatar {
width: 170px !important;
height: 170px !important;
margin: 0 auto !important;
}
#pantallaTiendaAvatar .previewTiendaAvatar .avatarCompuesto {
width: 166px !important;
height: 166px !important;
flex: 0 0 166px !important;
}
#pantallaTiendaAvatar .recursosTiendaV3 {
position: absolute !important;
left: 38px !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
gap: 9px !important;
width: 155px !important;
}
#pantallaTiendaAvatar .recursoTiendaV3 {
width: 100% !important;
min-width: 0 !important;
height: 43px !important;
padding: 5px 13px !important;
border-radius: 14px !important;
justify-content: flex-start !important;
gap: 10px !important;
font-size: 15px !important;
}
#pantallaTiendaAvatar .recursoTiendaV3 span {
width: 27px !important;
font-size: 22px !important;
text-align: center !important;
}
#pantallaTiendaAvatar .recursoTiendaV3 strong {
font-size: 17px !important;
font-weight: 900 !important;
}
#pantallaTiendaAvatar #botonIrEstudioAvatar {
right: 30px !important;
min-width: 185px !important;
min-height: 58px !important;
}
#pantallaTiendaAvatar .itemsTiendaAvatar {
grid-template-columns: repeat(auto-fill, minmax(155px, 175px)) !important;
justify-content: start !important;
gap: 12px !important;
padding: 6px 4px 14px !important;
}
#pantallaTiendaAvatar .precioItemTiendaAvatar {
margin: 3px 0 7px !important;
font-size: 11px !important;
font-weight: 800 !important;
}
#pantallaTiendaAvatar .accionItemTiendaAvatar {
min-height: 34px !important;
margin-top: auto !important;
padding: 5px 8px !important;
border-radius: 12px !important;
font-size: 9px !important;
}
@media (max-height: 720px) and (min-width: 901px) {
#pantallaTiendaAvatar .zonaSuperiorTiendaAvatar {
height: 184px !important;
flex-basis: 184px !important;
}
#pantallaTiendaAvatar .previewTiendaAvatar {
width: 158px !important;
height: 158px !important;
}
#pantallaTiendaAvatar .previewTiendaAvatar .avatarCompuesto {
width: 154px !important;
height: 154px !important;
flex-basis: 154px !important;
}
#pantallaTiendaAvatar .recursosTiendaV3 {
left: 30px !important;
width: 145px !important;
}
#pantallaTiendaAvatar .recursoTiendaV3 {
height: 40px !important;
}
#pantallaTiendaAvatar .tarjetaItemTiendaAvatar {
min-height: 220px !important;
}
#pantallaTiendaAvatar .visualItemTiendaAvatar {
width: 68px !important;
height: 68px !important;
}
}
#pantallaTiendaAvatar .itemsTiendaAvatar {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(185px, 200px)) !important;
grid-auto-rows: 218px !important;
justify-content: center !important;
align-content: start !important;
column-gap: 14px !important;
row-gap: 14px !important;
padding: 7px 12px 18px !important;
box-sizing: border-box !important;
}
#pantallaTiendaAvatar .tarjetaItemTiendaAvatar {
width: 100% !important;
height: 218px !important;
min-height: 218px !important;
max-height: 218px !important;
min-width: 0 !important;
margin: 0 !important;
padding: 8px 10px 8px !important;
box-sizing: border-box !important;
border-radius: 17px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
overflow: hidden !important;
}
#pantallaTiendaAvatar .etiquetaRarezaTiendaAvatar {
flex: 0 0 auto !important;
min-height: 15px !important;
margin: 0 0 2px !important;
padding: 2px 7px !important;
font-size: 7px !important;
line-height: 1 !important;
}
#pantallaTiendaAvatar .visualItemTiendaAvatar {
width: 64px !important;
height: 64px !important;
min-height: 64px !important;
max-height: 64px !important;
flex: 0 0 64px !important;
margin: 2px auto 3px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
#pantallaTiendaAvatar .imagenItemTiendaAvatar {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 64px !important;
max-height: 64px !important;
object-fit: contain !important;
}
#pantallaTiendaAvatar .emojiItemTiendaAvatar {
font-size: 43px !important;
line-height: 1 !important;
}
#pantallaTiendaAvatar .tarjetaItemTiendaAvatar h3 {
width: 100% !important;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
margin: 2px 0 2px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
font-size: 14px !important;
line-height: 1.05 !important;
overflow: hidden !important;
}
#pantallaTiendaAvatar .subtituloItemTiendaAvatar {
flex: 0 0 12px !important;
height: 12px !important;
min-height: 12px !important;
max-height: 12px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 7px !important;
line-height: 12px !important;
text-align: center !important;
overflow: hidden !important;
}
#pantallaTiendaAvatar .precioItemTiendaAvatar {
flex: 0 0 18px !important;
height: 18px !important;
min-height: 18px !important;
margin: 1px 0 4px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 10px !important;
line-height: 1 !important;
}
#pantallaTiendaAvatar .accionItemTiendaAvatar {
width: 100% !important;
height: 31px !important;
min-height: 31px !important;
max-height: 31px !important;
flex: 0 0 31px !important;
margin: auto 0 0 !important;
padding: 4px 8px !important;
box-sizing: border-box !important;
border-radius: 11px !important;
font-size: 8px !important;
line-height: 1 !important;
font-weight: 900 !important;
}
#pantallaTiendaAvatar .tarjetaItemTiendaAvatar [class*="animad"],
#pantallaTiendaAvatar .tarjetaItemTiendaAvatar [class*="Animad"] {
flex: 0 0 12px !important;
min-height: 12px !important;
max-height: 12px !important;
margin: 2px 0 0 !important;
padding: 1px 6px !important;
font-size: 6px !important;
line-height: 10px !important;
}
#pantallaTiendaAvatar .tarjetaItemTiendaAvatar > * {
max-width: 100% !important;
box-sizing: border-box !important;
}
#pantallaTiendaAvatar .itemTiendaAvatarComprado,
#pantallaTiendaAvatar .itemTiendaAvatarEquipado {
height: 218px !important;
min-height: 218px !important;
max-height: 218px !important;
}
#pantallaTiendaAvatar .tiendaAvatarVacia {
grid-column: 1/-1 !important;
justify-self: center !important;
}
@media (max-height: 720px) and (min-width: 901px) {
#pantallaTiendaAvatar .itemsTiendaAvatar {
grid-auto-rows: 205px !important;
gap: 11px 13px !important;
}
#pantallaTiendaAvatar .tarjetaItemTiendaAvatar,
#pantallaTiendaAvatar .itemTiendaAvatarComprado,
#pantallaTiendaAvatar .itemTiendaAvatarEquipado {
height: 205px !important;
min-height: 205px !important;
max-height: 205px !important;
}
#pantallaTiendaAvatar .visualItemTiendaAvatar {
width: 57px !important;
height: 57px !important;
min-height: 57px !important;
max-height: 57px !important;
flex-basis: 57px !important;
}
#pantallaTiendaAvatar .imagenItemTiendaAvatar {
max-width: 57px !important;
max-height: 57px !important;
}
#pantallaTiendaAvatar .tarjetaItemTiendaAvatar h3 {
height: 27px !important;
min-height: 27px !important;
max-height: 27px !important;
}
}
body:has(#pantallaAvatarStudio:not(.oculto)) {
overflow: hidden !important;
}
.panelJugadorV3[data-contexto="avatar"] {
display: none !important;
}
#pantallaAvatarStudio:not(.oculto),
.pantallaAvatarStudio.panelJugadorActivoV3 {
position: fixed !important;
inset: 0 !important;
z-index: 500 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
min-height: 0 !important;
padding: 12px 24px 12px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
overflow: hidden !important;
background: linear-gradient(
135deg,
#fff3ad 0%,
#fff9df 46%,
#f8f0ff 100%
) !important;
}
#pantallaAvatarStudio .cabeceraAvatarStudio {
height: 62px !important;
min-height: 62px !important;
flex: 0 0 62px !important;
padding: 0 120px !important;
display: flex !important;
justify-content: center !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
text-align: center !important;
}
#pantallaAvatarStudio .tituloAvatarStudioV38 h2 {
margin: 0 !important;
color: #493b97 !important;
font-family:
"Lucida Handwriting", "Segoe Print", "Brush Script MT", cursive !important;
font-size: 27px !important;
line-height: 1.05 !important;
}
#pantallaAvatarStudio .tituloAvatarStudioV38 p {
margin: 4px 0 0 !important;
color: #736b8c !important;
font-family: Cambria, Georgia, serif !important;
font-size: 12px !important;
}
#pantallaAvatarStudio #botonCerrarAvatarStudio {
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
min-height: 43px !important;
padding: 8px 15px !important;
color: #5442ad !important;
}
#pantallaAvatarStudio .zonaSuperiorAvatarStudioV38 {
height: 184px !important;
min-height: 184px !important;
flex: 0 0 184px !important;
margin: 0 auto 9px !important;
padding: 8px 24px !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: 215px minmax(0, 1fr) 215px !important;
align-items: center !important;
gap: 16px !important;
border: 3px solid #d6ceff !important;
border-radius: 23px !important;
background: rgba(255, 255, 255, 0.88) !important;
box-shadow: 0 5px 0 rgba(82, 63, 154, 0.05) !important;
}
#pantallaAvatarStudio .espacioSuperiorAvatarStudioV38 {
width: 100% !important;
height: 100% !important;
}
#pantallaAvatarStudio .bloquePreviewAvatarStudioV38 {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
}
#pantallaAvatarStudio .previewAvatarStudio {
width: 166px !important;
height: 166px !important;
margin: 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#pantallaAvatarStudio .previewAvatarStudio .avatarCompuesto {
width: 162px !important;
height: 162px !important;
flex: 0 0 162px !important;
}
#pantallaAvatarStudio .accionesSuperioresAvatarStudioV38 {
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 7px !important;
align-self: center !important;
}
#pantallaAvatarStudio .botonAccionSuperiorAvatarV38 {
width: 100% !important;
height: 46px !important;
min-height: 46px !important;
padding: 6px 10px !important;
box-sizing: border-box !important;
border-radius: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
font-family: Cambria, Georgia, serif !important;
font-size: 11px !important;
cursor: pointer !important;
transition:
transform 0.15s ease,
box-shadow 0.15s ease !important;
}
#pantallaAvatarStudio .botonAccionSuperiorAvatarV38:hover {
transform: translateY(-1px) !important;
}
#pantallaAvatarStudio .botonTiendaAvatarStudioV38 {
border: 2px solid #d7ad2f !important;
background: linear-gradient(180deg, #ffe67e, #f2ca43) !important;
color: #604800 !important;
box-shadow: 0 4px 0 rgba(183, 137, 16, 0.18) !important;
}
#pantallaAvatarStudio .botonGuardarAvatarStudioV38 {
border: 2px solid #624bd1 !important;
background: linear-gradient(180deg, #7e67e9, #654fd2) !important;
color: #ffffff !important;
box-shadow: 0 4px 0 rgba(66, 48, 145, 0.2) !important;
}
#pantallaAvatarStudio .botonRestablecerAvatarStudioV38 {
border: 2px solid #cbc3f4 !important;
background: #f2efff !important;
color: #5b4ca1 !important;
box-shadow: none !important;
}
#pantallaAvatarStudio .contenidoAvatarStudio {
width: min(1120px, 94%) !important;
flex: 1 1 auto !important;
min-height: 0 !important;
margin: 0 auto !important;
display: block !important;
overflow: hidden !important;
}
#pantallaAvatarStudio .panelPreviewAvatar,
#pantallaAvatarStudio .accionesAvatarStudio {
display: none !important;
}
#pantallaAvatarStudio .panelOpcionesAvatar {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: hidden !important;
display: grid !important;
grid-template-rows: 72px 34px minmax(0, 1fr) !important;
gap: 6px !important;
}
#pantallaAvatarStudio .categoriasAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriasAvatarStudio {
height: 72px !important;
display: flex !important;
flex-wrap: nowrap !important;
gap: 8px !important;
padding: 0 0 5px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: thin !important;
scrollbar-color: #9b90c8 transparent !important;
}
#pantallaAvatarStudio .categoriasAvatarStudio::-webkit-scrollbar {
height: 7px !important;
}
#pantallaAvatarStudio .categoriasAvatarStudio::-webkit-scrollbar-track {
background: transparent !important;
}
#pantallaAvatarStudio .categoriasAvatarStudio::-webkit-scrollbar-thumb {
border-radius: 999px !important;
background: #9b90c8 !important;
}
#pantallaAvatarStudio .categoriaAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriaAvatarStudio {
width: 103px !important;
min-width: 103px !important;
height: 64px !important;
min-height: 64px !important;
padding: 6px 7px !important;
box-sizing: border-box !important;
border: 2px solid #d7d0f3 !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, 0.91) !important;
color: #554883 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
cursor: pointer !important;
box-shadow: 0 2px 0 rgba(71, 54, 132, 0.05) !important;
}
#pantallaAvatarStudio .categoriaAvatarStudio small,
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriaAvatarStudio small {
width: 100% !important;
font-family: Cambria, Georgia, serif !important;
font-size: 9px !important;
font-weight: 700 !important;
white-space: normal !important;
}
#pantallaAvatarStudio .categoriaAvatarStudio.categoriaAvatarActiva {
border-color: #6952d6 !important;
background: linear-gradient(180deg, #7b64e5, #6651d3) !important;
color: #ffffff !important;
box-shadow: 0 4px 0 rgba(76, 57, 168, 0.14) !important;
}
#pantallaAvatarStudio .tituloCategoriaAvatar,
.pantallaAvatarStudio.panelJugadorActivoV3 .tituloCategoriaAvatar {
width: 100% !important;
height: 34px !important;
min-height: 34px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}
#pantallaAvatarStudio .tituloCategoriaAvatar h3,
.pantallaAvatarStudio.panelJugadorActivoV3 .tituloCategoriaAvatar h3 {
margin: 0 !important;
color: #493c91 !important;
font-family: Cambria, Georgia, serif !important;
font-size: 18px !important;
line-height: 1 !important;
}
#pantallaAvatarStudio .tituloCategoriaAvatar small,
.pantallaAvatarStudio.panelJugadorActivoV3 .tituloCategoriaAvatar small {
color: #7c7492 !important;
font-family: Cambria, Georgia, serif !important;
font-size: 9px !important;
}
#pantallaAvatarStudio .opcionesAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionesAvatarStudio {
width: 100% !important;
min-height: 0 !important;
padding: 5px 6px 14px !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(132px, 142px)) !important;
grid-auto-rows: 128px !important;
gap: 10px !important;
scrollbar-width: thin !important;
scrollbar-color: #ada1dc transparent !important;
}
#pantallaAvatarStudio .opcionesAvatarStudio::-webkit-scrollbar {
width: 7px !important;
}
#pantallaAvatarStudio .opcionesAvatarStudio::-webkit-scrollbar-track {
background: transparent !important;
}
#pantallaAvatarStudio .opcionesAvatarStudio::-webkit-scrollbar-thumb {
border-radius: 999px !important;
background: #ada1dc !important;
}
#pantallaAvatarStudio .opcionAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio {
position: relative !important;
height: 128px !important;
min-height: 128px !important;
max-height: 128px !important;
margin: 0 !important;
padding: 18px 7px 7px !important;
box-sizing: border-box !important;
border-width: 2px !important;
border-radius: 15px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
#pantallaAvatarStudio .muestraOpcionAvatar,
.pantallaAvatarStudio.panelJugadorActivoV3 .muestraOpcionAvatar {
width: 54px !important;
height: 54px !important;
min-width: 54px !important;
min-height: 54px !important;
flex: 0 0 54px !important;
margin: 0 auto 2px !important;
border-radius: 13px !important;
font-size: 29px !important;
}
#pantallaAvatarStudio .miniaturaRealAvatar {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 54px !important;
max-height: 54px !important;
object-fit: contain !important;
}
#pantallaAvatarStudio .opcionAvatarStudio > strong,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio > strong {
min-height: 22px !important;
margin: 0 !important;
color: #493d82 !important;
font-family: Cambria, Georgia, serif !important;
font-size: 11px !important;
font-weight: 700 !important;
overflow: hidden !important;
}
#pantallaAvatarStudio .opcionAvatarStudio > small,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio > small {
width: 100% !important;
min-height: 14px !important;
max-height: 14px !important;
color: #8d849f !important;
font-family: Cambria, Georgia, serif !important;
font-size: 7px !important;
line-height: 14px !important;
font-weight: 800 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#pantallaAvatarStudio .opcionAvatarStudio .etiquetaRarezaAvatar {
position: absolute !important;
top: 5px !important;
left: 50% !important;
transform: translateX(-50%) !important;
max-width: calc(100% - 12px) !important;
margin: 0 !important;
padding: 2px 6px !important;
font-size: 6px !important;
line-height: 1 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#pantallaAvatarStudio .opcionAvatarStudio .etiquetaAnimadaAvatar {
position: absolute !important;
right: 5px !important;
bottom: 4px !important;
margin: 0 !important;
font-size: 5.5px !important;
line-height: 1 !important;
}
#pantallaAvatarStudio .opcionAvatarSeleccionada {
border-color: #7059dd !important;
box-shadow:
0 0 0 2px rgba(112, 89, 221, 0.1),
0 4px 10px rgba(76, 57, 158, 0.1) !important;
}
#pantallaAvatarStudio .opcionAvatarBloqueada {
opacity: 0.62 !important;
}
#pantallaAvatarStudio .datoCompatibilidadAvatarStudioV38 {
display: none !important;
}
@media (max-height: 720px) and (min-width: 901px) {
#pantallaAvatarStudio:not(.oculto),
.pantallaAvatarStudio.panelJugadorActivoV3 {
padding-top: 7px !important;
padding-bottom: 7px !important;
}
#pantallaAvatarStudio .cabeceraAvatarStudio {
height: 55px !important;
min-height: 55px !important;
flex-basis: 55px !important;
margin-bottom: 6px !important;
}
#pantallaAvatarStudio .tituloAvatarStudioV38 h2 {
font-size: 24px !important;
}
#pantallaAvatarStudio .tituloAvatarStudioV38 p {
font-size: 10px !important;
}
#pantallaAvatarStudio .zonaSuperiorAvatarStudioV38 {
height: 164px !important;
min-height: 164px !important;
flex-basis: 164px !important;
margin-bottom: 7px !important;
}
#pantallaAvatarStudio .previewAvatarStudio {
width: 148px !important;
height: 148px !important;
}
#pantallaAvatarStudio .previewAvatarStudio .avatarCompuesto {
width: 145px !important;
height: 145px !important;
flex-basis: 145px !important;
}
#pantallaAvatarStudio .accionesSuperioresAvatarStudioV38 {
gap: 5px !important;
}
#pantallaAvatarStudio .botonAccionSuperiorAvatarV38 {
height: 41px !important;
min-height: 41px !important;
}
#pantallaAvatarStudio .panelOpcionesAvatar {
grid-template-rows: 66px 31px minmax(0, 1fr) !important;
gap: 5px !important;
}
#pantallaAvatarStudio .categoriasAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriasAvatarStudio {
height: 66px !important;
}
#pantallaAvatarStudio .categoriaAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriaAvatarStudio {
height: 59px !important;
min-height: 59px !important;
width: 100px !important;
min-width: 100px !important;
}
#pantallaAvatarStudio .categoriaAvatarStudio span {
font-size: 21px !important;
}
#pantallaAvatarStudio .opcionesAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionesAvatarStudio {
grid-template-columns: repeat(auto-fill, minmax(126px, 136px)) !important;
grid-auto-rows: 118px !important;
gap: 8px !important;
}
#pantallaAvatarStudio .opcionAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio {
height: 118px !important;
min-height: 118px !important;
max-height: 118px !important;
padding-top: 16px !important;
}
#pantallaAvatarStudio .muestraOpcionAvatar {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
flex-basis: 48px !important;
}
#pantallaAvatarStudio .miniaturaRealAvatar {
max-width: 48px !important;
max-height: 48px !important;
}
}
@media (max-width: 900px) {
body:has(#pantallaAvatarStudio:not(.oculto)) {
overflow-y: auto !important;
}
#pantallaAvatarStudio:not(.oculto),
.pantallaAvatarStudio.panelJugadorActivoV3 {
position: relative !important;
width: 100% !important;
height: auto !important;
min-height: 100vh !important;
overflow: visible !important;
padding: 12px !important;
}
#pantallaAvatarStudio .cabeceraAvatarStudio {
width: 100% !important;
height: auto !important;
min-height: 76px !important;
padding: 54px 8px 8px !important;
}
#pantallaAvatarStudio #botonCerrarAvatarStudio {
top: 4px !important;
left: 0 !important;
transform: none !important;
}
#pantallaAvatarStudio .zonaSuperiorAvatarStudioV38 {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
padding: 14px !important;
grid-template-columns: 1fr !important;
}
#pantallaAvatarStudio .espacioSuperiorAvatarStudioV38 {
display: none !important;
}
#pantallaAvatarStudio .accionesSuperioresAvatarStudioV38 {
width: min(360px, 100%) !important;
margin: 0 auto !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
#pantallaAvatarStudio .contenidoAvatarStudio {
width: 100% !important;
overflow: visible !important;
}
#pantallaAvatarStudio .panelOpcionesAvatar {
height: auto !important;
display: block !important;
overflow: visible !important;
}
#pantallaAvatarStudio .categoriasAvatarStudio {
margin-bottom: 10px !important;
}
#pantallaAvatarStudio .tituloCategoriaAvatar {
margin-bottom: 8px !important;
}
#pantallaAvatarStudio .opcionesAvatarStudio {
overflow-y: visible !important;
}
}
#pantallaAvatarStudio .zonaSuperiorAvatarStudioV38 {
position: relative !important;
grid-template-columns: 220px minmax(0, 1fr) 220px !important;
height: 190px !important;
min-height: 190px !important;
flex-basis: 190px !important;
}
#pantallaAvatarStudio .accionesSuperioresAvatarStudioV38 {
position: static !important;
display: block !important;
width: auto !important;
}
#pantallaAvatarStudio #botonGuardarAvatar {
position: absolute !important;
left: 26px !important;
top: 38px !important;
width: 190px !important;
height: 58px !important;
min-height: 58px !important;
border-radius: 17px !important;
font-size: 12px !important;
}
#pantallaAvatarStudio #botonRestablecerAvatar {
position: absolute !important;
left: 26px !important;
top: 105px !important;
width: 190px !important;
height: 52px !important;
min-height: 52px !important;
border-radius: 17px !important;
font-size: 11px !important;
}
#pantallaAvatarStudio #botonTiendaAvatarStudio {
position: absolute !important;
right: 26px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 190px !important;
height: 64px !important;
min-height: 64px !important;
border-radius: 18px !important;
font-size: 13px !important;
}
#pantallaAvatarStudio #botonTiendaAvatarStudio:hover {
transform: translateY(calc(-50% - 2px)) !important;
}
#pantallaAvatarStudio .previewAvatarStudio {
width: 172px !important;
height: 172px !important;
}
#pantallaAvatarStudio .previewAvatarStudio .avatarCompuesto {
width: 168px !important;
height: 168px !important;
flex-basis: 168px !important;
}
#pantallaAvatarStudio .contenidoAvatarStudio {
width: min(1240px, 98%) !important;
}
#pantallaAvatarStudio .panelOpcionesAvatar {
grid-template-rows: 76px 36px auto minmax(0, 1fr) !important;
gap: 7px !important;
}
#pantallaAvatarStudio .categoriasAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriasAvatarStudio {
display: grid !important;
grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
width: 100% !important;
height: 76px !important;
gap: 7px !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
scrollbar-width: none !important;
}
#pantallaAvatarStudio .categoriasAvatarStudio::-webkit-scrollbar {
display: none !important;
}
#pantallaAvatarStudio [data-categoria-avatar="colorRopa"] {
display: none !important;
}
#pantallaAvatarStudio .categoriaAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriaAvatarStudio {
width: 100% !important;
min-width: 0 !important;
height: 70px !important;
min-height: 70px !important;
padding: 7px 5px !important;
border-radius: 15px !important;
}
#pantallaAvatarStudio .categoriaAvatarStudio span {
font-size: 26px !important;
}
#pantallaAvatarStudio .categoriaAvatarStudio small {
font-size: 8.5px !important;
line-height: 1.05 !important;
text-align: center !important;
}
#pantallaAvatarStudio .paletaColorRopaIntegradaV381 {
width: 100% !important;
min-height: 58px !important;
padding: 7px 12px !important;
box-sizing: border-box !important;
border: 2px solid #ddd5fb !important;
border-radius: 16px !important;
background: rgba(255, 255, 255, 0.88) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
}
#pantallaAvatarStudio .paletaColorRopaIntegradaV381.oculto {
display: none !important;
}
#pantallaAvatarStudio .tituloPaletaColorRopaV381 {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
color: #4f438d !important;
font-family: Cambria, Georgia, serif !important;
font-size: 12px !important;
white-space: nowrap !important;
}
#pantallaAvatarStudio .coloresPaletaRopaV381 {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
}
#pantallaAvatarStudio .colorRopaIntegradoV381 {
position: relative !important;
width: 54px !important;
min-width: 54px !important;
height: 44px !important;
padding: 3px !important;
border: 2px solid #d7d0ec !important;
border-radius: 11px !important;
background: white !important;
display: grid !important;
grid-template-rows: 24px 11px !important;
place-items: center !important;
cursor: pointer !important;
}
#pantallaAvatarStudio .muestraColorRopaV381 {
width: 23px !important;
height: 23px !important;
border-radius: 50% !important;
border: 2px solid rgba(70, 60, 90, 0.18) !important;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5) !important;
}
#pantallaAvatarStudio .colorRopaIntegradoV381 small {
max-width: 48px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: #5c5375 !important;
font-family: Cambria, Georgia, serif !important;
font-size: 7px !important;
}
#pantallaAvatarStudio .colorRopaIntegradoV381 b {
position: absolute !important;
right: 2px !important;
top: 1px !important;
font-size: 8px !important;
}
#pantallaAvatarStudio .colorRopaIntegradoActivoV381 {
border-color: #6f58dd !important;
box-shadow: 0 0 0 2px rgba(111, 88, 221, 0.13) !important;
}
#pantallaAvatarStudio .colorRopaIntegradoBloqueadoV381 {
opacity: 0.48 !important;
cursor: not-allowed !important;
}
#pantallaAvatarStudio .opcionesAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionesAvatarStudio {
grid-template-columns: repeat(auto-fill, minmax(145px, 158px)) !important;
grid-auto-rows: 160px !important;
justify-content: center !important;
align-content: start !important;
gap: 12px !important;
padding: 6px 5px 14px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
#pantallaAvatarStudio .opcionAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio {
width: 100% !important;
height: 160px !important;
min-height: 160px !important;
max-height: 160px !important;
padding: 20px 8px 9px !important;
border-radius: 17px !important;
gap: 5px !important;
overflow: hidden !important;
}
#pantallaAvatarStudio .muestraOpcionAvatar,
.pantallaAvatarStudio.panelJugadorActivoV3 .muestraOpcionAvatar {
width: 72px !important;
height: 72px !important;
min-width: 72px !important;
min-height: 72px !important;
flex-basis: 72px !important;
border-radius: 16px !important;
font-size: 36px !important;
}
#pantallaAvatarStudio .miniaturaRealAvatar {
max-width: 72px !important;
max-height: 72px !important;
}
#pantallaAvatarStudio .opcionAvatarStudio > strong {
min-height: 27px !important;
max-height: 27px !important;
font-size: 12px !important;
}
#pantallaAvatarStudio .opcionAvatarStudio > small {
min-height: 16px !important;
max-height: 16px !important;
line-height: 16px !important;
font-size: 7.5px !important;
}
@media (max-height: 720px) and (min-width: 1001px) {
#pantallaAvatarStudio .zonaSuperiorAvatarStudioV38 {
height: 174px !important;
min-height: 174px !important;
flex-basis: 174px !important;
}
#pantallaAvatarStudio .previewAvatarStudio {
width: 158px !important;
height: 158px !important;
}
#pantallaAvatarStudio .previewAvatarStudio .avatarCompuesto {
width: 154px !important;
height: 154px !important;
flex-basis: 154px !important;
}
#pantallaAvatarStudio #botonGuardarAvatar {
top: 29px !important;
height: 55px !important;
min-height: 55px !important;
}
#pantallaAvatarStudio #botonRestablecerAvatar {
top: 94px !important;
height: 50px !important;
min-height: 50px !important;
}
#pantallaAvatarStudio .opcionesAvatarStudio {
grid-auto-rows: 150px !important;
}
#pantallaAvatarStudio .opcionAvatarStudio {
height: 150px !important;
min-height: 150px !important;
max-height: 150px !important;
}
#pantallaAvatarStudio .muestraOpcionAvatar {
width: 66px !important;
height: 66px !important;
min-width: 66px !important;
min-height: 66px !important;
flex-basis: 66px !important;
}
#pantallaAvatarStudio .miniaturaRealAvatar {
max-width: 66px !important;
max-height: 66px !important;
}
}
#pantallaAvatarStudio .botonAccionSuperiorAvatarV38 {
font-size: 14px !important;
font-weight: 900 !important;
letter-spacing: 0.2px !important;
}
#pantallaAvatarStudio .botonAccionSuperiorAvatarV38 > strong {
font-size: 13px !important;
line-height: 1.05 !important;
font-weight: 900 !important;
white-space: nowrap !important;
}
#pantallaAvatarStudio .botonAccionSuperiorAvatarV38 > span {
font-size: 22px !important;
line-height: 1 !important;
}
#pantallaAvatarStudio #botonGuardarAvatar > strong {
font-size: 13px !important;
}
#pantallaAvatarStudio #botonTiendaAvatarStudio > strong {
font-size: 14px !important;
}
#pantallaAvatarStudio #botonRestablecerAvatar > strong {
font-size: 12px !important;
}
#pantallaAvatarStudio .categoriaAvatarStudio small,
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriaAvatarStudio small {
font-size: 11px !important;
line-height: 1.05 !important;
font-weight: 800 !important;
color: inherit !important;
text-align: center !important;
}
#pantallaAvatarStudio .categoriaAvatarStudio span,
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriaAvatarStudio span {
font-size: 29px !important;
line-height: 1 !important;
}
#pantallaAvatarStudio .categoriaAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .categoriaAvatarStudio {
gap: 5px !important;
padding: 6px 5px !important;
}
#pantallaAvatarStudio .categoriaAvatarStudio.categoriaAvatarActiva small {
color: #ffffff !important;
font-weight: 900 !important;
}
#pantallaAvatarStudio .tituloCategoriaAvatar h3,
.pantallaAvatarStudio.panelJugadorActivoV3 .tituloCategoriaAvatar h3 {
font-size: 20px !important;
font-weight: 800 !important;
}
@media (max-height: 720px) and (min-width: 1001px) {
#pantallaAvatarStudio .botonAccionSuperiorAvatarV38 > strong {
font-size: 12px !important;
}
#pantallaAvatarStudio #botonTiendaAvatarStudio > strong {
font-size: 13px !important;
}
#pantallaAvatarStudio .categoriaAvatarStudio small {
font-size: 10px !important;
}
#pantallaAvatarStudio .categoriaAvatarStudio span {
font-size: 27px !important;
}
}
.tituloCategoriaAvatar,
.subtituloCategoriaAvatar,
.encabezadoCategoriaAvatar h2,
.encabezadoCategoriaAvatar h3 {
display: none !important;
}
.barraInfoOpcionesAvatar {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
margin: 0 0 10px 0;
padding: 0 6px;
box-sizing: border-box;
}
.textoBloqueoAvatar {
font-size: 13px;
font-weight: 700;
color: #7b6b99;
text-align: right;
line-height: 1.2;
white-space: nowrap;
}
.gridOpcionesAvatar {
margin-top: 0 !important;
}
#pantallaAvatarStudio #botonCerrarAvatarStudio {
position: static !important;
transform: none !important;
justify-self: start !important;
width: 100px !important;
min-width: 100px !important;
height: 44px !important;
min-height: 44px !important;
padding: 7px 12px !important;
border: 2px solid #735ee5 !important;
border-radius: 14px !important;
background: #ffffff !important;
color: #5542ad !important;
font-family: Cambria, Georgia, serif !important;
font-size: 13px !important;
font-weight: 900 !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
@media (min-width: 1001px) {
:root {
--v3-panel-ancho: 300px;
--v3-panel-separacion: 18px;
--v3-reserva-panel: 350px;
}
.panelJugadorV3[data-contexto="menu"] {
top: 16px !important;
bottom: 16px !important;
left: 22px !important;
padding: 14px !important;
border: 3px solid #6e59e6 !important;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(250, 247, 255, 0.98) 55%,
rgba(244, 239, 255, 0.98) 100%
) !important;
box-shadow: 0 11px 27px rgba(73, 55, 144, 0.16) !important;
}
#pantallaMenu.pantallaMenu {
padding-right: 22px !important;
}
.panelJugadorV3[data-contexto="menu"] .cabeceraPanelJugadorV3 {
text-align: center !important;
}
.panelJugadorV3[data-contexto="menu"] .etiquetaPanelJugadorV3 {
margin: 0 0 4px !important;
color: #8476b8 !important;
font-family: Cambria, Georgia, serif !important;
font-weight: 900 !important;
letter-spacing: 1.5px !important;
}
.panelJugadorV3[data-contexto="menu"] .avatarPanelJugadorV3 {
width: 164px !important;
height: 164px !important;
}
.panelJugadorV3[data-contexto="menu"] .avatarPanelJugadorV3 .avatarCompuesto {
width: 160px !important;
height: 160px !important;
flex: 0 0 160px !important;
}
.panelJugadorV3[data-contexto="menu"] .nombrePanelJugadorV3 {
color: #44378a !important;
font-size: 22px !important;
}
.panelJugadorV3[data-contexto="menu"] .statsPanelJugadorV3 {
gap: 7px !important;
margin: 0 0 9px !important;
}
.panelJugadorV3[data-contexto="menu"] .statPanelJugadorV3 {
min-height: 50px !important;
padding: 6px 3px !important;
border: 1px solid #ddd5ff !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
color: #5d4fa0 !important;
font-family: Cambria, Georgia, serif !important;
}
.panelJugadorV3[data-contexto="menu"] .statPanelJugadorV3 span {
font-size: 13px !important;
font-weight: 800 !important;
}
.panelJugadorV3[data-contexto="menu"] .statPanelJugadorV3 strong {
color: #322568 !important;
font-size: 17px !important;
font-weight: 900 !important;
}
.panelJugadorV3[data-contexto="menu"] .botonPanelJugadorV3 {
width: 100% !important;
min-width: 0 !important;
height: 66px !important;
min-height: 66px !important;
padding: 7px 5px !important;
box-sizing: border-box !important;
border: 2px solid #d8d0fb !important;
border-radius: 16px !important;
background: #f1edff !important;
color: #4c3c92 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
text-align: center !important;
font-family: Cambria, Georgia, serif !important;
font-weight: 900 !important;
box-shadow: 0 4px 0 rgba(85, 65, 170, 0.07) !important;
transition:
transform 0.15s ease,
box-shadow 0.15s ease,
background-color 0.15s ease !important;
}
.panelJugadorV3[data-contexto="menu"] .botonPanelJugadorV3:hover {
transform: translateY(-2px) !important;
background: #e9e3ff !important;
box-shadow: 0 6px 10px rgba(86, 66, 170, 0.12) !important;
}
.panelJugadorV3[data-contexto="menu"] .iconoAccionPanelV3 {
width: 30px !important;
height: 30px !important;
background: rgba(255, 255, 255, 0.75) !important;
font-size: 23px !important;
}
.panelJugadorV3[data-contexto="menu"] .textoAccionPanelV3 {
display: block !important;
font-size: 11px !important;
}
.panelJugadorV3[data-contexto="menu"] #panelVerPerfilV3 {
grid-column: 1 !important;
background: linear-gradient(180deg, #826be8, #6a55d8) !important;
border-color: #624dd0 !important;
color: #ffffff !important;
}
.panelJugadorV3[data-contexto="menu"] #panelAvatarV3 {
grid-column: 2 !important;
background: linear-gradient(180deg, #826be8, #6a55d8) !important;
border-color: #624dd0 !important;
color: #ffffff !important;
}
.panelJugadorV3[data-contexto="menu"] #panelTiendaV3 {
height: 59px !important;
min-height: 59px !important;
border: 2px solid #d7ad2e !important;
background: linear-gradient(180deg, #ffe783, #f3cd4c) !important;
box-shadow: 0 4px 0 rgba(174, 129, 13, 0.16) !important;
}
.panelJugadorV3[data-contexto="menu"] #panelTiendaV3 .iconoAccionPanelV3 {
width: 33px !important;
height: 33px !important;
font-size: 25px !important;
}
.panelJugadorV3[data-contexto="menu"] #panelTiendaV3 .textoAccionPanelV3 {
font-size: 13px !important;
}
.panelJugadorV3[data-contexto="menu"] #panelIntroV3,
.panelJugadorV3[data-contexto="menu"] #panelCambiarJugadorV3 {
height: 61px !important;
min-height: 61px !important;
background: #f2efff !important;
}
.panelJugadorV3[data-contexto="menu"] #panelIntroV3 {
grid-column: 1 !important;
}
.panelJugadorV3[data-contexto="menu"] #panelCambiarJugadorV3 {
grid-column: 2 !important;
}
.panelJugadorV3[data-contexto="menu"] .accionesSistemaPanelV3 {
margin: 8px 0 0 !important;
}
.panelJugadorV3[data-contexto="menu"] .botonSistemaPanelV3 {
min-height: 38px !important;
padding: 5px 6px !important;
border: 1.5px solid #d9d1f7 !important;
border-radius: 11px !important;
background: #faf9ff !important;
color: #554a87 !important;
font-family: Cambria, Georgia, serif !important;
font-weight: 900 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
}
.panelJugadorV3[data-contexto="menu"] .iconoSistemaPanelV3 {
font-size: 17px !important;
}
.panelJugadorV3[data-contexto="menu"] .audioPanelV3 {
padding-top: 9px !important;
border-top: 1px dashed #cfc5ee !important;
}
.panelJugadorV3[data-contexto="menu"] .filaAudioV3 {
grid-template-columns: 37px 1fr 38px !important;
}
.panelJugadorV3[data-contexto="menu"] .botonMuteV3 {
width: 37px !important;
height: 37px !important;
border-radius: 11px !important;
font-size: 20px !important;
}
.panelJugadorV3[data-contexto="menu"] .valorVolumenV3 {
font-size: 10px !important;
}
}
@media (max-height: 720px) and (min-width: 1001px) {
.panelJugadorV3[data-contexto="menu"] {
top: 10px !important;
bottom: 10px !important;
padding: 11px !important;
}
.panelJugadorV3[data-contexto="menu"] .avatarPanelJugadorV3 {
width: 145px !important;
height: 145px !important;
}
.panelJugadorV3[data-contexto="menu"] .avatarPanelJugadorV3 .avatarCompuesto {
width: 141px !important;
height: 141px !important;
flex-basis: 141px !important;
}
.panelJugadorV3[data-contexto="menu"] .nombrePanelJugadorV3 {
font-size: 20px !important;
margin-bottom: 6px !important;
}
.panelJugadorV3[data-contexto="menu"] .statPanelJugadorV3 {
min-height: 45px !important;
}
.panelJugadorV3[data-contexto="menu"] .botonPanelJugadorV3 {
height: 59px !important;
min-height: 59px !important;
}
.panelJugadorV3[data-contexto="menu"] #panelTiendaV3 {
height: 52px !important;
min-height: 52px !important;
}
.panelJugadorV3[data-contexto="menu"] #panelIntroV3,
.panelJugadorV3[data-contexto="menu"] #panelCambiarJugadorV3 {
height: 54px !important;
min-height: 54px !important;
}
.panelJugadorV3[data-contexto="menu"] .accionesSistemaPanelV3 {
margin-top: 6px !important;
}
.panelJugadorV3[data-contexto="menu"] .botonSistemaPanelV3 {
min-height: 34px !important;
}
}
@media (min-width: 1001px) {
#pantallaMenu .tituloMundos {
width: min(980px, 100%) !important;
}
#pantallaMenu #tarjetaProgresoGeneral {
width: min(980px, 100%) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.panelJugadorV3[data-contexto="menu"] {
top: 102px !important;
bottom: auto !important;
width: 272px !important;
height: 610px !important;
max-height: calc(100dvh - 118px) !important;
padding: 12px !important;
border-radius: 25px !important;
background: linear-gradient(
180deg,
#ffffff 0%,
#fbf9ff 58%,
#f5f1ff 100%
) !important;
box-shadow: 0 9px 24px rgba(65, 49, 118, 0.15) !important;
}
.panelJugadorV3[data-contexto="menu"] .etiquetaPanelJugadorV3 {
margin-bottom: 2px !important;
letter-spacing: 1.3px !important;
}
.panelJugadorV3[data-contexto="menu"] .avatarPanelJugadorV3 {
width: 150px !important;
height: 150px !important;
margin: 0 auto 2px !important;
}
.panelJugadorV3[data-contexto="menu"] .avatarPanelJugadorV3 .avatarCompuesto {
width: 146px !important;
height: 146px !important;
flex: 0 0 146px !important;
}
.panelJugadorV3[data-contexto="menu"] .nombrePanelJugadorV3 {
margin: 1px 0 7px !important;
font-size: 20px !important;
color: #443783 !important;
}
.panelJugadorV3[data-contexto="menu"] .statsPanelJugadorV3 {
gap: 6px !important;
margin-bottom: 8px !important;
}
.panelJugadorV3[data-contexto="menu"] .statPanelJugadorV3 {
min-height: 46px !important;
border-radius: 12px !important;
font-size: 9px !important;
}
.panelJugadorV3[data-contexto="menu"] .statPanelJugadorV3 span {
min-height: auto !important;
font-size: 11px !important;
}
.panelJugadorV3[data-contexto="menu"] .accionesPanelJugadorV3 {
gap: 6px !important;
}
.panelJugadorV3[data-contexto="menu"] #panelVerPerfilV3,
.panelJugadorV3[data-contexto="menu"] #panelAvatarV3 {
border: 2px solid #6550d3 !important;
border-radius: 15px !important;
background: linear-gradient(180deg, #826ae8, #6c56d9) !important;
text-align: center !important;
}
.panelJugadorV3[data-contexto="menu"] #panelTiendaV3 {
border: 2px solid #d7ab2a !important;
border-radius: 15px !important;
background: linear-gradient(180deg, #ffe783, #f4cf4f) !important;
color: #574000 !important;
}
.panelJugadorV3[data-contexto="menu"] #panelIntroV3,
.panelJugadorV3[data-contexto="menu"] #panelCambiarJugadorV3 {
height: 58px !important;
min-height: 58px !important;
border-radius: 14px !important;
}
.panelJugadorV3[data-contexto="menu"] .iconoAccionPanelV3 {
width: 28px !important;
height: 28px !important;
background: rgba(255, 255, 255, 0.78) !important;
font-size: 21px !important;
}
.panelJugadorV3[data-contexto="menu"] .textoAccionPanelV3 {
font-size: 10px !important;
}
.panelJugadorV3[data-contexto="menu"] .accionesSistemaPanelV3 {
gap: 6px !important;
margin-top: 7px !important;
}
.panelJugadorV3[data-contexto="menu"] .botonSistemaPanelV3 {
padding: 4px 5px !important;
}
.panelJugadorV3[data-contexto="menu"] .filaAudioV3 {
grid-template-columns: 34px 1fr 35px !important;
gap: 6px !important;
}
}
@media (min-width: 1001px) and (max-height: 780px) {
.panelJugadorV3[data-contexto="menu"] {
top: 102px !important;
height: 610px !important;
max-height: calc(100dvh - 116px) !important;
}
}
@media (min-width: 1001px) {
#pantallaMenu.pantallaMenu {
padding-left: 350px !important;
padding-right: 24px !important;
}
.panelJugadorV3[data-contexto="menu"] {
top: 190px !important;
width: 300px !important;
height: 520px !important;
padding: 16px 14px 14px 14px !important;
gap: 10px !important;
border-radius: 28px !important;
background: linear-gradient(180deg, #fcfbff 0%, #f6f2ff 100%) !important;
box-shadow: 0 10px 22px rgba(83, 63, 153, 0.12) !important;
}
.panelJugadorV3[data-contexto="menu"] .etiquetaPanelJugadorV3 {
margin: 0 !important;
font-size: 10px !important;
}
.panelJugadorV3[data-contexto="menu"] .avatarPanelJugadorV3 {
width: 142px !important;
height: 142px !important;
margin: 0 auto 2px auto !important;
flex: 0 0 auto !important;
}
.panelJugadorV3[data-contexto="menu"] .avatarPanelJugadorV3 .avatarCompuesto {
width: 138px !important;
height: 138px !important;
flex: 0 0 138px !important;
}
.panelJugadorV3[data-contexto="menu"] .nombrePanelJugadorV3 {
margin: 0 !important;
font-size: 17px !important;
line-height: 1.05 !important;
color: #433982 !important;
}
.panelJugadorV3[data-contexto="menu"] .statsPanelJugadorV3 {
grid-template-columns: repeat(3, 1fr) !important;
margin: 0 !important;
}
.panelJugadorV3[data-contexto="menu"] .statPanelJugadorV3 {
min-height: 44px !important;
padding: 5px 4px !important;
}
.panelJugadorV3[data-contexto="menu"] .statPanelJugadorV3 span {
margin-bottom: 2px !important;
}
.panelJugadorV3[data-contexto="menu"] .accionesPanelJugadorV3 {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
.panelJugadorV3[data-contexto="menu"] #panelVerPerfilV3,
.panelJugadorV3[data-contexto="menu"] #panelAvatarV3 {
min-height: 64px !important;
height: 64px !important;
padding: 8px 6px !important;
border: 2px solid #6b58e5 !important;
background: linear-gradient(180deg, #836eee 0%, #6a55d6 100%) !important;
color: #fff !important;
}
.panelJugadorV3[data-contexto="menu"] #panelTiendaV3 {
min-height: 56px !important;
height: 56px !important;
padding: 8px 10px !important;
gap: 10px !important;
border: 2px solid #d6aa29 !important;
background: linear-gradient(180deg, #ffe57f 0%, #f3cf50 100%) !important;
color: #5d4600 !important;
}
.panelJugadorV3[data-contexto="menu"] #panelIntroV3,
.panelJugadorV3[data-contexto="menu"] #panelCambiarJugadorV3 {
padding: 7px 5px !important;
border: 2px solid #ddd4fb !important;
color: #4f438f !important;
}
.panelJugadorV3[data-contexto="menu"] .iconoAccionPanelV3 {
width: 26px !important;
height: 26px !important;
border-radius: 9px !important;
font-size: 18px !important;
background: rgba(255, 255, 255, 0.82) !important;
}
.panelJugadorV3[data-contexto="menu"] #panelTiendaV3 .textoAccionPanelV3 {
font-size: 12px !important;
}
.panelJugadorV3[data-contexto="menu"] .accionesSistemaPanelV3 {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
margin: 0 !important;
}
.panelJugadorV3[data-contexto="menu"] .botonSistemaPanelV3 {
min-height: 34px !important;
height: 34px !important;
padding: 4px 6px !important;
border-radius: 12px !important;
font-size: 9px !important;
}
.panelJugadorV3[data-contexto="menu"] .audioPanelV3 {
padding-top: 8px !important;
border-top: 1px dashed #d8cff8 !important;
}
.panelJugadorV3[data-contexto="menu"] .filaAudioV3 {
grid-template-columns: 34px 1fr 34px !important;
}
#pantallaMenu .tituloMundos {
margin-top: 0 !important;
margin-bottom: 8px !important;
}
#pantallaMenu #tarjetaProgresoGeneral {
border-radius: 28px !important;
}
}
@media (min-width: 1001px) and (max-height: 790px) {
.panelJugadorV3[data-contexto="menu"] {
height: 516px !important;
top: 190px !important;
}
}
@media (min-width: 1001px) {
#pantallaMenu.pantallaMenu {
padding-left: 310px !important;
padding-right: 18px !important;
}
#pantallaMenu .tituloMundos,
#pantallaMenu #tarjetaProgresoGeneral {
width: min(810px, 100%) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.panelJugadorV3[data-contexto="menu"] {
position: fixed !important;
left: 18px !important;
top: 74px !important;
bottom: 18px !important;
width: 320px !important;
height: auto !important;
max-height: none !important;
padding: 13px 14px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
border: 3px solid #6b58e5 !important;
border-radius: 27px !important;
background: linear-gradient(
180deg,
#ffffff 0%,
#fbf9ff 56%,
#f5f1ff 100%
) !important;
box-shadow: 0 9px 22px rgba(75, 57, 143, 0.14) !important;
overflow: hidden !important;
}
.panelJugadorV3[data-contexto="menu"] .etiquetaPanelJugadorV3 {
margin: 0 0 3px !important;
font-size: 9px !important;
line-height: 1 !important;
letter-spacing: 1.4px !important;
text-align: center !important;
}
.panelJugadorV3[data-contexto="menu"] .avatarPanelJugadorV3 {
width: 146px !important;
height: 146px !important;
margin: 0 auto 3px !important;
flex: 0 0 146px !important;
}
.panelJugadorV3[data-contexto="menu"] .avatarPanelJugadorV3 .avatarCompuesto {
width: 142px !important;
height: 142px !important;
flex: 0 0 142px !important;
}
.panelJugadorV3[data-contexto="menu"] .nombrePanelJugadorV3 {
margin: 1px 0 8px !important;
color: #443781 !important;
font-family: Cambria, Georgia, serif !important;
font-size: 19px !important;
line-height: 1 !important;
font-weight: 900 !important;
text-align: center !important;
text-transform: uppercase !important;
}
.panelJugadorV3[data-contexto="menu"] .statsPanelJugadorV3 {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
margin: 0 0 8px !important;
flex: 0 0 auto !important;
}
.panelJugadorV3[data-contexto="menu"] .statPanelJugadorV3 {
height: 47px !important;
min-height: 47px !important;
padding: 5px 3px !important;
box-sizing: border-box !important;
border: 1px solid #ddd6ff !important;
border-radius: 13px !important;
background: #f3efff !important;
}
.panelJugadorV3[data-contexto="menu"] .statPanelJugadorV3 span {
min-height: 0 !important;
margin: 0 0 2px !important;
font-size: 9px !important;
line-height: 1 !important;
}
.panelJugadorV3[data-contexto="menu"] .statPanelJugadorV3 strong {
margin: 0 !important;
font-size: 16px !important;
line-height: 1 !important;
}
.panelJugadorV3[data-contexto="menu"] .accionesPanelJugadorV3 {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 7px !important;
margin: 0 !important;
flex: 0 0 auto !important;
}
.panelJugadorV3[data-contexto="menu"] #panelVerPerfilV3,
.panelJugadorV3[data-contexto="menu"] #panelAvatarV3 {
width: 100% !important;
height: 62px !important;
min-height: 62px !important;
padding: 6px !important;
box-sizing: border-box !important;
border: 2px solid #6550d4 !important;
border-radius: 16px !important;
background: linear-gradient(180deg, #826ce9, #6954d6) !important;
color: white !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
}
.panelJugadorV3[data-contexto="menu"] #panelTiendaV3 {
grid-column: 1/-1 !important;
width: 100% !important;
height: 55px !important;
min-height: 55px !important;
padding: 6px 10px !important;
box-sizing: border-box !important;
border: 2px solid #d5aa2b !important;
border-radius: 16px !important;
background: linear-gradient(180deg, #ffe57d, #f3cf4d) !important;
color: #584200 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
}
.panelJugadorV3[data-contexto="menu"] #panelIntroV3,
.panelJugadorV3[data-contexto="menu"] #panelCambiarJugadorV3 {
width: 100% !important;
height: 56px !important;
min-height: 56px !important;
padding: 5px !important;
box-sizing: border-box !important;
border: 2px solid #ddd5fb !important;
border-radius: 15px !important;
background: #f3efff !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
}
.panelJugadorV3[data-contexto="menu"] .iconoAccionPanelV3 {
width: 27px !important;
height: 27px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 8px !important;
background: rgba(255, 255, 255, 0.8) !important;
font-size: 19px !important;
line-height: 1 !important;
}
.panelJugadorV3[data-contexto="menu"] .textoAccionPanelV3 {
width: 100% !important;
color: inherit !important;
font-family: Cambria, Georgia, serif !important;
font-size: 9px !important;
line-height: 1.05 !important;
font-weight: 900 !important;
text-align: center !important;
text-transform: uppercase !important;
}
.panelJugadorV3[data-contexto="menu"] #panelTiendaV3 .textoAccionPanelV3 {
width: auto !important;
font-size: 11px !important;
}
.panelJugadorV3[data-contexto="menu"] .accionesSistemaPanelV3 {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 7px !important;
margin: 7px 0 0 !important;
flex: 0 0 auto !important;
}
.panelJugadorV3[data-contexto="menu"] .botonSistemaPanelV3 {
height: 33px !important;
min-height: 33px !important;
padding: 3px 5px !important;
box-sizing: border-box !important;
border-radius: 10px !important;
font-size: 8px !important;
}
.panelJugadorV3[data-contexto="menu"] .audioPanelV3 {
margin-top: auto !important;
padding-top: 7px !important;
border-top: 1px dashed #d7cff5 !important;
flex: 0 0 auto !important;
}
.panelJugadorV3[data-contexto="menu"] .filaAudioV3 {
grid-template-columns: 34px minmax(0, 1fr) 36px !important;
gap: 7px !important;
align-items: center !important;
}
.panelJugadorV3[data-contexto="menu"] .botonMuteV3 {
width: 34px !important;
height: 34px !important;
}
.panelJugadorV3[data-contexto="menu"] #panelMenuV3 {
display: none !important;
}
}
#pantallaAvatarStudio .cabeceraAvatarStudio {
position: relative !important;
width: min(1240px, 98%) !important;
grid-template-columns: 120px minmax(0, 1fr) 120px !important;
}
#pantallaAvatarStudio:not(.oculto) #botonCerrarAvatarStudio {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: static !important;
justify-self: start !important;
width: 102px !important;
min-width: 102px !important;
height: 44px !important;
min-height: 44px !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
border: 2px solid #7059e2 !important;
border-radius: 14px !important;
background: #ffffff !important;
color: #5542ad !important;
font-family: Cambria, Georgia, serif !important;
font-size: 13px !important;
line-height: 1 !important;
font-weight: 900 !important;
align-items: center !important;
justify-content: center !important;
transform: none !important;
cursor: pointer !important;
}
@media (min-width: 1001px) and (max-height: 720px) {
.panelJugadorV3[data-contexto="menu"] {
top: 68px !important;
bottom: 12px !important;
}
.panelJugadorV3[data-contexto="menu"] .avatarPanelJugadorV3 {
width: 137px !important;
height: 137px !important;
flex-basis: 137px !important;
}
.panelJugadorV3[data-contexto="menu"] .avatarPanelJugadorV3 .avatarCompuesto {
width: 133px !important;
height: 133px !important;
flex-basis: 133px !important;
}
}
@media (min-width: 1001px) {
#pantallaMenu.pantallaMenu {
width: 100% !important;
height: 100vh !important;
height: 100dvh !important;
min-height: 0 !important;
padding: 12px 20px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
#pantallaMenu .layoutMenuPrincipalV311 {
width: min(1240px, calc(100vw - 50px)) !important;
height: auto !important;
grid-template-columns: clamp(315px, 24vw, 335px) minmax(720px, 820px) !important;
grid-template-rows: auto auto !important;
column-gap: clamp(34px, 4vw, 58px) !important;
}
#pantallaMenu .layoutMenuPrincipalV311 .tituloMundos {
margin: 0 0 1px !important;
}
#pantallaMenu .layoutMenuPrincipalV311 #tarjetaProgresoGeneral {
max-width: none !important;
height: auto !important;
}
#pantallaMenu .layoutMenuPrincipalV311 .panelJugadorV3 {
grid-area: perfil !important;
position: relative !important;
inset: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 12px 14px !important;
box-sizing: border-box !important;
align-self: stretch !important;
border: 3px solid #6b58e5 !important;
border-radius: 24px !important;
background: linear-gradient(
180deg,
#ffffff 0%,
#faf8ff 56%,
#f5f1ff 100%
) !important;
box-shadow: 0 8px 18px rgba(73, 56, 137, 0.13) !important;
overflow: hidden !important;
}
#pantallaMenu .panelJugadorV3 .cabeceraPanelJugadorV3 {
flex: 0 0 auto !important;
text-align: center !important;
}
#pantallaMenu .panelJugadorV3 .etiquetaPanelJugadorV3 {
display: block !important;
margin: 0 0 3px !important;
font-size: 9px !important;
line-height: 1 !important;
letter-spacing: 1.3px !important;
text-align: center !important;
}
#pantallaMenu .panelJugadorV3 .avatarPanelJugadorV3 {
width: 142px !important;
height: 142px !important;
margin: 0 auto 3px !important;
flex: 0 0 142px !important;
}
#pantallaMenu .panelJugadorV3 .avatarPanelJugadorV3 .avatarCompuesto {
width: 138px !important;
height: 138px !important;
flex: 0 0 138px !important;
}
#pantallaMenu .panelJugadorV3 .nombrePanelJugadorV3 {
margin: 1px 0 7px !important;
color: #443783 !important;
font-family: Cambria, Georgia, serif !important;
font-size: 19px !important;
line-height: 1 !important;
font-weight: 900 !important;
text-align: center !important;
text-transform: uppercase !important;
}
#pantallaMenu .panelJugadorV3 .statsPanelJugadorV3 {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 7px !important;
margin: 0 0 7px !important;
flex: 0 0 auto !important;
}
#pantallaMenu .panelJugadorV3 .statPanelJugadorV3 {
height: 44px !important;
min-height: 44px !important;
padding: 4px 3px !important;
box-sizing: border-box !important;
border-radius: 12px !important;
}
#pantallaMenu .panelJugadorV3 .statPanelJugadorV3 span {
min-height: 0 !important;
margin: 0 0 2px !important;
font-size: 9px !important;
line-height: 1 !important;
}
#pantallaMenu .panelJugadorV3 .statPanelJugadorV3 strong {
margin: 0 !important;
font-size: 15px !important;
line-height: 1 !important;
}
#pantallaMenu .panelJugadorV3 .accionesPanelJugadorV3 {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 7px !important;
margin: 0 !important;
flex: 0 0 auto !important;
}
#pantallaMenu .panelJugadorV3 #panelVerPerfilV3,
#pantallaMenu .panelJugadorV3 #panelAvatarV3 {
width: 100% !important;
height: 58px !important;
min-height: 58px !important;
padding: 5px !important;
border-radius: 14px !important;
box-sizing: border-box !important;
}
#pantallaMenu .panelJugadorV3 #panelTiendaV3 {
grid-column: 1/-1 !important;
width: 100% !important;
height: 51px !important;
min-height: 51px !important;
padding: 5px 10px !important;
border-radius: 14px !important;
box-sizing: border-box !important;
}
#pantallaMenu .panelJugadorV3 #panelIntroV3,
#pantallaMenu .panelJugadorV3 #panelCambiarJugadorV3 {
width: 100% !important;
height: 52px !important;
min-height: 52px !important;
padding: 4px !important;
border-radius: 13px !important;
box-sizing: border-box !important;
}
#pantallaMenu .panelJugadorV3 .iconoAccionPanelV3 {
width: 27px !important;
height: 27px !important;
font-size: 19px !important;
}
#pantallaMenu .panelJugadorV3 .textoAccionPanelV3 {
font-size: 9px !important;
line-height: 1.05 !important;
}
#pantallaMenu .panelJugadorV3 #panelTiendaV3 .textoAccionPanelV3 {
font-size: 11px !important;
}
#pantallaMenu .panelJugadorV3 .accionesSistemaPanelV3 {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 7px !important;
margin: 6px 0 0 !important;
flex: 0 0 auto !important;
}
#pantallaMenu .panelJugadorV3 .botonSistemaPanelV3 {
height: 31px !important;
min-height: 31px !important;
padding: 3px 5px !important;
box-sizing: border-box !important;
font-size: 8px !important;
}
#pantallaMenu .panelJugadorV3 .audioPanelV3 {
margin-top: auto !important;
padding-top: 6px !important;
flex: 0 0 auto !important;
}
#pantallaMenu .panelJugadorV3 .filaAudioV3 {
grid-template-columns: 33px minmax(0, 1fr) 34px !important;
gap: 6px !important;
}
#pantallaMenu .panelJugadorV3 .botonMuteV3 {
width: 33px !important;
height: 33px !important;
}
#pantallaMenu .panelJugadorV3 #panelMenuV3 {
display: none !important;
}
}
@media (min-width: 1001px) and (max-width: 1180px) {
#pantallaMenu .layoutMenuPrincipalV311 {
grid-template-columns: 285px minmax(650px, 1fr) !important;
column-gap: 24px !important;
}
}
#pantallaAvatarStudio .cabeceraAvatarStudio {
width: min(1120px, 94%) !important;
max-width: 1120px !important;
margin: 0 auto 8px !important;
padding: 0 !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: 110px minmax(0, 1fr) 110px !important;
align-items: center !important;
}
#pantallaAvatarStudio .zonaSuperiorAvatarStudioV38 {
width: min(1120px, 94%) !important;
max-width: 1120px !important;
}
#pantallaAvatarStudio #botonCerrarAvatarStudio:not(.oculto) {
position: static !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
grid-column: 1 !important;
justify-self: start !important;
width: 102px !important;
min-width: 102px !important;
height: 44px !important;
min-height: 44px !important;
margin: 0 !important;
transform: none !important;
align-items: center !important;
justify-content: center !important;
}
#pantallaAvatarStudio #botonCerrarAvatarStudio.oculto {
display: none !important;
}
#pantallaAvatarStudio .tituloAvatarStudioV38 {
grid-column: 2 !important;
justify-self: center !important;
width: 100% !important;
text-align: center !important;
}
#pantallaAvatarStudio .espacioCabeceraAvatarStudioV39 {
grid-column: 3 !important;
width: 102px !important;
height: 1px !important;
justify-self: end !important;
}
#pantallaInicio.pantalla.oculto,
#pantallaPerfiles.pantalla.oculto,
#pantallaBienvenida.pantalla.oculto,
#pantallaMenu.pantallaMenu.oculto,
#pantallaMapa.pantalla.oculto,
#pantallaPregunta.pantalla.oculto,
#pantallaNivelCompletado.pantalla.oculto,
#pantallaPerfilJugador.pantalla.oculto,
#pantallaRecompensas.pantalla.oculto,
#pantallaAvatarStudio.pantallaAvatarStudio.oculto,
#pantallaTiendaAvatar.pantallaTiendaAvatar.oculto {
display: none !important;
}
body > .pantalla.oculto {
display: none !important;
}
#pantallaMenu.pantallaMenu:not(.oculto) {
visibility: visible !important;
}
#pantallaMenu:not(.oculto) .botonMundoProgresoV3:not(:disabled),
#pantallaMapa:not(.oculto) .nivelMapa:not(:disabled) {
pointer-events: auto !important;
cursor: pointer !important;
}
#pantallaPregunta:not(.oculto),
#pantallaMapa:not(.oculto),
#pantallaNivelCompletado:not(.oculto) {
position: relative;
z-index: 20;
}
body:has(#pantallaMapa:not(.oculto)) #panelJugadorV3,
body:has(#pantallaPregunta:not(.oculto)) #panelJugadorV3,
body:has(#pantallaNivelCompletado:not(.oculto)) #panelJugadorV3,
body:has(#pantallaPerfilJugador:not(.oculto)) #panelJugadorV3,
body:has(.pantallaAvatarStudio:not(.oculto)) #panelJugadorV3,
body:has(.pantallaTiendaAvatar:not(.oculto)) #panelJugadorV3 {
display: none !important;
}
#pantallaMapa:not(.oculto) {
width: 100% !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
}
#pantallaPregunta:not(.oculto) {
width: 100% !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
}
#pantallaInicio.pantalla.oculto,
#pantallaPerfiles.pantalla.oculto,
#pantallaBienvenida.pantalla.oculto,
#pantallaMenu.pantallaMenu.oculto,
#pantallaMapa.pantalla.oculto,
#pantallaPregunta.pantalla.oculto,
#pantallaNivelCompletado.pantalla.oculto,
#pantallaPerfilJugador.pantalla.oculto,
.pantallaAvatarStudio.oculto,
.pantallaTiendaAvatar.oculto {
display: none !important;
}
body:has(#pantallaMenu:not(.oculto)) #panelJugadorV3 {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
body:has(#pantallaInicio:not(.oculto)) #panelJugadorV3,
body:has(#pantallaPerfiles:not(.oculto)) #panelJugadorV3,
body:has(#pantallaBienvenida:not(.oculto)) #panelJugadorV3,
body:has(#pantallaMapa:not(.oculto)) #panelJugadorV3,
body:has(#pantallaPregunta:not(.oculto)) #panelJugadorV3,
body:has(#pantallaNivelCompletado:not(.oculto)) #panelJugadorV3,
body:has(#pantallaPerfilJugador:not(.oculto)) #panelJugadorV3,
body:has(.pantallaAvatarStudio:not(.oculto)) #panelJugadorV3,
body:has(.pantallaTiendaAvatar:not(.oculto)) #panelJugadorV3 {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
body:has(#pantallaInicio:not(.oculto)) #pantallaMenu,
body:has(#pantallaPerfiles:not(.oculto)) #pantallaMenu,
body:has(#pantallaBienvenida:not(.oculto)) #pantallaMenu,
body:has(#pantallaMapa:not(.oculto)) #pantallaMenu,
body:has(#pantallaPregunta:not(.oculto)) #pantallaMenu,
body:has(#pantallaNivelCompletado:not(.oculto)) #pantallaMenu,
body:has(#pantallaPerfilJugador:not(.oculto)) #pantallaMenu,
body:has(.pantallaAvatarStudio:not(.oculto)) #pantallaMenu,
body:has(.pantallaTiendaAvatar:not(.oculto)) #pantallaMenu {
display: none !important;
}
#pantallaPerfiles:not(.oculto) {
width: 100% !important;
min-height: 100vh !important;
min-height: 100dvh !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
}
#pantallaPerfiles:not(.oculto) .contenedorPerfiles {
width: min(1080px, calc(100vw - 70px)) !important;
max-width: 1080px !important;
margin-left: auto !important;
margin-right: auto !important;
}
#pantallaMapa:not(.oculto),
#pantallaPregunta:not(.oculto),
#pantallaNivelCompletado:not(.oculto) {
width: 100% !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
}
@media (min-width: 1001px) {
#pantallaMenu.pantallaMenu:not(.oculto) {
width: 100% !important;
height: 100vh !important;
height: 100dvh !important;
min-height: 0 !important;
padding: 12px 24px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
#pantallaMenu .layoutMenuPrincipalV311 {
width: min(1240px, calc(100vw - 64px)) !important;
max-width: 1240px !important;
height: min(620px, calc(100dvh - 24px)) !important;
max-height: calc(100dvh - 24px) !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: 300px minmax(0, 1fr) !important;
grid-template-areas: ". titulo" "perfil mundos" !important;
column-gap: 30px !important;
row-gap: 8px !important;
align-items: stretch !important;
justify-content: center !important;
box-sizing: border-box !important;
}
#pantallaMenu .layoutMenuPrincipalV311 .tituloMundos,
#pantallaMenu .layoutMenuPrincipalV311 #tarjetaProgresoGeneral {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: 0 !important;
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none !important;
}
#pantallaMenu .layoutMenuPrincipalV311 .tituloMundos {
margin: 0 0 2px !important;
align-self: end !important;
font-size: clamp(31px, 3vw, 42px) !important;
}
#pantallaMenu .layoutMenuPrincipalV311 #panelJugadorV3 {
grid-area: perfil !important;
position: relative !important;
inset: auto !important;
width: 300px !important;
min-width: 300px !important;
max-width: 300px !important;
height: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
align-self: stretch !important;
}
#pantallaMenu .layoutMenuPrincipalV311 #tarjetaProgresoGeneral {
grid-area: mundos !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
align-self: stretch !important;
}
}
@media (min-width: 1001px) and (max-width: 1180px) {
#pantallaMenu .layoutMenuPrincipalV311 {
width: calc(100vw - 36px) !important;
grid-template-columns: 275px minmax(0, 1fr) !important;
column-gap: 20px !important;
}
#pantallaMenu .layoutMenuPrincipalV311 #panelJugadorV3 {
width: 275px !important;
min-width: 275px !important;
max-width: 275px !important;
}
}
#pantallaPerfilJugador:not(.oculto) {
width: 100% !important;
min-height: 100vh !important;
min-height: 100dvh !important;
padding-left: 28px !important;
padding-right: 28px !important;
padding-top: 22px !important;
padding-bottom: 30px !important;
margin: 0 !important;
box-sizing: border-box !important;
}
#pantallaPerfilJugador.panelJugadorActivoV3,
#pantallaPerfilJugador:not(.oculto).panelJugadorActivoV3 {
padding-left: 28px !important;
padding-right: 28px !important;
}
#pantallaPerfilJugador:not(.oculto) .cabeceraPerfil {
width: min(1120px, calc(100vw - 56px)) !important;
max-width: 1120px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
#pantallaPerfilJugador:not(.oculto) .carnetAventurero {
width: min(1120px, calc(100vw - 56px)) !important;
max-width: 1120px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
#pantallaPerfilJugador:not(.oculto) .cabeceraPerfil,
#pantallaPerfilJugador:not(.oculto) .carnetAventurero {
position: relative !important;
left: 0 !important;
right: auto !important;
transform: none !important;
}
@media (max-width: 1100px) {
#pantallaPerfilJugador:not(.oculto) {
padding-left: 18px !important;
padding-right: 18px !important;
}
#pantallaPerfilJugador:not(.oculto) .cabeceraPerfil,
#pantallaPerfilJugador:not(.oculto) .carnetAventurero {
width: calc(100vw - 36px) !important;
}
}
#pantallaPerfilJugador:not(.oculto) .zonaIdentidadPerfil {
position: relative !important;
width: 100% !important;
min-height: 175px !important;
padding-left: 210px !important;
padding-right: 210px !important;
padding-bottom: 25px !important;
box-sizing: border-box !important;
display: flex !important;
grid-template-columns: none !important;
align-items: center !important;
justify-content: center !important;
gap: 24px !important;
}
#pantallaPerfilJugador:not(.oculto) .avatarPerfil {
flex: 0 0 145px !important;
justify-self: auto !important;
margin: 0 !important;
}
#pantallaPerfilJugador:not(.oculto) .datosIdentidadPerfil {
flex: 0 0 auto !important;
min-width: 190px !important;
max-width: 300px !important;
justify-self: auto !important;
text-align: left !important;
}
#pantallaPerfilJugador:not(.oculto) .datosIdentidadPerfil h1 {
margin: 5px 0 !important;
text-align: left !important;
}
#pantallaPerfilJugador:not(.oculto) .accionesRapidasPerfilV3 {
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 190px !important;
min-width: 190px !important;
margin: 0 !important;
}
@media (max-width: 850px) {
#pantallaPerfilJugador:not(.oculto) .zonaIdentidadPerfil {
min-height: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
text-align: center !important;
}
#pantallaPerfilJugador:not(.oculto) .datosIdentidadPerfil {
text-align: center !important;
}
#pantallaPerfilJugador:not(.oculto) .datosIdentidadPerfil h1 {
text-align: center !important;
}
#pantallaPerfilJugador:not(.oculto) .accionesRapidasPerfilV3 {
position: relative !important;
right: auto !important;
top: auto !important;
transform: none !important;
width: min(420px, 100%) !important;
margin: 0 auto !important;
}
}
@media (min-width: 1001px) {
#pantallaMenu .layoutMenuPrincipalV311 {
grid-template-areas: "titulo titulo" "perfil mundos" !important;
grid-template-rows: auto minmax(0, 1fr) !important;
row-gap: 4px !important;
}
#pantallaMenu .layoutMenuPrincipalV311 .tituloMundos {
grid-area: titulo !important;
width: 100% !important;
max-width: none !important;
margin: 0 0 2px 0 !important;
padding: 0 !important;
position: relative !important;
left: 0 !important;
right: auto !important;
transform: none !important;
justify-self: stretch !important;
text-align: center !important;
}
}
#pantallaAvatarStudio,
.pantallaAvatarStudio {
position: relative !important;
}
#pantallaAvatarStudio .barraInfoOpcionesAvatar,
.pantallaAvatarStudio .barraInfoOpcionesAvatar {
position: absolute !important;
top: 10px !important;
right: 18px !important;
width: auto !important;
margin: 0 !important;
padding: 5px 10px !important;
border: 1px solid rgba(110, 89, 230, 0.18);
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 2px 8px rgba(75, 55, 145, 0.06);
z-index: 50 !important;
pointer-events: none;
}
#pantallaAvatarStudio .textoBloqueoAvatar,
.pantallaAvatarStudio .textoBloqueoAvatar {
margin: 0 !important;
color: #756994 !important;
font-size: 10px !important;
font-weight: 700 !important;
line-height: 1 !important;
white-space: nowrap !important;
opacity: 0.88;
}
#pantallaAvatarStudio .tituloCategoriaAvatar,
.pantallaAvatarStudio .tituloCategoriaAvatar {
position: fixed !important;
top: 10px !important;
right: 16px !important;
left: auto !important;
bottom: auto !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 5px 10px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
border: 1px solid rgba(101, 80, 196, 0.16);
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 2px 8px rgba(62, 48, 119, 0.06);
z-index: 999 !important;
pointer-events: none;
}
#pantallaAvatarStudio .tituloCategoriaAvatar h3,
.pantallaAvatarStudio .tituloCategoriaAvatar h3 {
display: none !important;
}
#pantallaAvatarStudio .tituloCategoriaAvatar small,
.pantallaAvatarStudio .tituloCategoriaAvatar small {
display: block !important;
margin: 0 !important;
color: #746990 !important;
font-size: 10px !important;
font-weight: 700 !important;
line-height: 1 !important;
white-space: nowrap !important;
text-align: right !important;
}
#pantallaAvatarStudio .panelOpcionesAvatar,
.pantallaAvatarStudio .panelOpcionesAvatar {
grid-template-rows: auto minmax(0, 1fr) !important;
}
#pantallaAvatarStudio .opcionesAvatarStudio,
.pantallaAvatarStudio .opcionesAvatarStudio {
margin-top: 5px !important;
padding-top: 2px !important;
}
#pantallaMenu .tituloMundos {
font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
font-size: clamp(26px, 2.2vw, 32px) !important;
font-weight: 800 !important;
letter-spacing: 0.2px !important;
line-height: 1.05 !important;
}
#pantallaMenu .tituloMundos::before {
font-size: 0.78em !important;
}
#pantallaMenu .tituloMundos::after {
font-size: 0.78em !important;
}
#pantallaAvatarStudio {
position: relative !important;
}
#pantallaAvatarStudio .barraInfoAvatarStudioV39 {
top: 96px !important;
right: 18px !important;
padding: 5px 9px !important;
justify-content: flex-end !important;
border: 1px solid rgba(103, 82, 205, 0.16) !important;
background: rgba(255, 255, 255, 0.78) !important;
box-shadow: 0 2px 7px rgba(55, 40, 110, 0.06) !important;
z-index: 1000 !important;
}
#pantallaAvatarStudio .barraInfoAvatarStudioV39 small {
font-family: Cambria, Georgia, serif !important;
}
#pantallaAvatarStudio .panelOpcionesAvatar {
position: relative !important;
}
#pantallaAvatarStudio .opcionesAvatarStudio {
margin-top: 5px !important;
padding-top: 3px !important;
}
#pantallaMenu .tituloMundos::before {
content: "🗺️" !important;
display: inline-block !important;
margin-right: 12px !important;
font-family: "Segoe UI Emoji", sans-serif !important;
font-size: 0.8em !important;
vertical-align: -0.03em !important;
}
#pantallaMenu .tituloMundos::after {
content: "🗺️" !important;
display: inline-block !important;
margin-left: 12px !important;
font-family: "Segoe UI Emoji", sans-serif !important;
font-size: 0.8em !important;
vertical-align: -0.03em !important;
}
#pantallaAvatarStudio .barraInfoAvatarStudioV39 {
position: fixed !important;
top: 8px !important;
right: 16px !important;
left: auto !important;
bottom: auto !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 4px 9px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(103, 82, 205, 0.15) !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.88) !important;
box-shadow: 0 2px 6px rgba(55, 40, 110, 0.08) !important;
z-index: 9999 !important;
pointer-events: none !important;
}
#pantallaAvatarStudio .barraInfoAvatarStudioV39 small {
margin: 0 !important;
padding: 0 !important;
color: #746a91 !important;
font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
font-size: 9px !important;
font-weight: 700 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
#pantallaMenu .tituloMundos {
font-family: Verdana, Geneva, sans-serif !important;
font-size: clamp(20px, 1.65vw, 25px) !important;
font-style: normal !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1.15 !important;
white-space: nowrap !important;
text-align: center !important;
}
#pantallaMenu .tituloMundos::before,
#pantallaMenu .tituloMundos::after {
font-size: 0.88em !important;
vertical-align: -0.06em !important;
}
#pantallaMenu .tituloMundos::before {
margin-right: 10px !important;
}
#pantallaMenu .tituloMundos::after {
margin-left: 10px !important;
}
#pantallaMenu.pantallaMenu:not(.oculto) .layoutMenuPrincipalV311 .tituloMundos {
font-family: Verdana, Geneva, sans-serif !important;
font-size: clamp(18px, 1.55vw, 23px) !important;
font-weight: 700 !important;
font-style: normal !important;
text-transform: uppercase !important;
letter-spacing: 0.35px !important;
line-height: 1.15 !important;
width: auto !important;
max-width: 980px !important;
min-width: 0 !important;
margin: 0 auto 5px !important;
padding: 0 20px !important;
box-sizing: border-box !important;
justify-self: center !important;
align-self: center !important;
text-align: center !important;
white-space: nowrap !important;
color: #493a97 !important;
}
#pantallaMenu.pantallaMenu:not(.oculto)
.layoutMenuPrincipalV311
.tituloMundos::before {
content: "🗺️" !important;
display: inline-block !important;
margin-right: 10px !important;
font-family: "Segoe UI Emoji", sans-serif !important;
font-size: 0.82em !important;
vertical-align: -0.05em !important;
}
#pantallaMenu.pantallaMenu:not(.oculto)
.layoutMenuPrincipalV311
.tituloMundos::after {
content: "🗺️" !important;
display: inline-block !important;
margin-left: 10px !important;
font-family: "Segoe UI Emoji", sans-serif !important;
font-size: 0.82em !important;
vertical-align: -0.05em !important;
}
@media (min-width: 1001px) and (max-height: 760px) {
#pantallaMenu.pantallaMenu:not(.oculto)
.layoutMenuPrincipalV311
.tituloMundos {
font-size: 20px !important;
margin-bottom: 4px !important;
}
}
#pantallaAvatarStudio #paletaColorRopaIntegradaV39 {
display: none !important;
}
#pantallaAvatarStudio #opcionesAvatarStudio.modoSubmenuColorAvatarV318 {
padding: 7px 8px 16px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
#pantallaAvatarStudio .cabeceraSubmenuColorAvatarV318 {
width: 100%;
min-height: 44px;
margin: 0 0 10px;
display: flex;
align-items: center;
gap: 12px;
}
#pantallaAvatarStudio .botonVolverSubmenuColorAvatarV318 {
width: auto;
min-width: 82px;
height: 38px;
padding: 6px 13px;
border: 2px solid #7360d9;
border-radius: 12px;
background: #ffffff;
color: #51439c;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-weight: 700;
cursor: pointer;
}
#pantallaAvatarStudio .botonVolverSubmenuColorAvatarV318:hover {
background: #f1edff;
}
#pantallaAvatarStudio .nombreObjetoSubmenuColorAvatarV318 {
color: #55478e;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: 700;
}
#pantallaAvatarStudio .gridSubmenuColorAvatarV318 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 118px));
justify-content: start;
align-content: start;
gap: 10px;
}
#pantallaAvatarStudio .opcionColorSubmenuAvatarV318 {
position: relative;
width: 100%;
height: 112px;
padding: 8px 6px;
border: 2px solid #d7d1e9;
border-radius: 15px;
background: rgba(255, 255, 255, 0.94);
color: #554b78;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
font-family: Verdana, Geneva, sans-serif;
}
#pantallaAvatarStudio .opcionColorSubmenuAvatarV318:hover:not(:disabled) {
transform: translateY(-2px);
border-color: #7762dc;
}
#pantallaAvatarStudio .opcionColorSubmenuActivaV318 {
border-color: #684fd7;
background: #f0edff;
box-shadow: 0 0 0 3px rgba(104, 79, 215, 0.11);
}
#pantallaAvatarStudio .visualColorSubmenuAvatarV318 {
width: 62px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
}
#pantallaAvatarStudio .muestraVarianteColorAvatarV318 {
width: 48px;
height: 48px;
border: 3px solid white;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(72, 59, 108, 0.17);
}
#pantallaAvatarStudio .miniaturaVarianteColorAvatarV318 {
width: 62px !important;
height: 62px !important;
max-width: 62px !important;
max-height: 62px !important;
object-fit: contain;
}
#pantallaAvatarStudio .opcionColorSubmenuAvatarV318 strong {
font-size: 10px;
line-height: 1.05;
}
#pantallaAvatarStudio .opcionColorSubmenuBloqueadaV318 {
opacity: 0.45;
cursor: not-allowed;
}
#pantallaAvatarStudio .opcionAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio {
min-height: 172px !important;
padding: 10px 10px 14px !important;
gap: 8px !important;
}
#pantallaAvatarStudio .muestraOpcionAvatar,
.pantallaAvatarStudio.panelJugadorActivoV3 .muestraOpcionAvatar {
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
#pantallaAvatarStudio .miniaturaRealAvatar,
.pantallaAvatarStudio.panelJugadorActivoV3 .miniaturaRealAvatar {
display: block !important;
}
#pantallaAvatarStudio .miniaturaCabezaBaseAvatarStudioWrap,
.pantallaAvatarStudio.panelJugadorActivoV3
.miniaturaCabezaBaseAvatarStudioWrap {
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#pantallaAvatarStudio .muestraCabezaGrandeAvatarStudio .miniaturaRealAvatar,
#pantallaAvatarStudio .miniaturaCabezaBaseAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3
.muestraCabezaGrandeAvatarStudio
.miniaturaRealAvatar,
.pantallaAvatarStudio.panelJugadorActivoV3 .miniaturaCabezaBaseAvatarStudio {
width: 92px !important;
height: 92px !important;
max-width: 92px !important;
max-height: 92px !important;
object-fit: contain !important;
transform: scale(1.12) translateY(2px) !important;
transform-origin: center center !important;
}
#pantallaAvatarStudio .opcionAvatarStudio > strong,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio > strong {
font-size: 17px !important;
min-height: 34px !important;
}
#pantallaAvatarStudio .opcionAvatarStudio > small,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio > small {
font-size: 10px !important;
line-height: 1.1 !important;
}
#pantallaAvatarStudio .opcionAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio {
min-height: 155px !important;
height: 155px !important;
padding: 6px 8px 8px !important;
gap: 3px !important;
}
#pantallaAvatarStudio .muestraOpcionAvatar,
.pantallaAvatarStudio.panelJugadorActivoV3 .muestraOpcionAvatar {
flex-basis: 88px !important;
border-radius: 18px !important;
flex-shrink: 0 !important;
}
#pantallaAvatarStudio .miniaturaRealAvatar,
.pantallaAvatarStudio.panelJugadorActivoV3 .miniaturaRealAvatar {
width: 84px !important;
height: 84px !important;
max-width: 84px !important;
max-height: 84px !important;
object-fit: contain !important;
}
#pantallaAvatarStudio .opcionAvatarStudio > strong,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio > strong {
min-height: 20px !important;
max-height: 22px !important;
margin: 1px 0 0 !important;
font-size: 14px !important;
line-height: 1.1 !important;
}
#pantallaAvatarStudio .opcionAvatarStudio > small,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio > small {
margin: 0 !important;
line-height: 1 !important;
}
#pantallaAvatarStudio .opcionAvatarStudio > strong,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio > strong {
min-height: 32px !important;
max-height: none !important;
margin: 2px 0 1px !important;
padding: 0 4px !important;
font-size: 13px !important;
line-height: 1.15 !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
#pantallaAvatarStudio .opcionAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio {
min-height: 148px !important;
height: 148px !important;
}
#pantallaAvatarStudio .opcionAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio {
justify-content: flex-start !important;
padding: 6px 8px 7px !important;
gap: 2px !important;
}
#pantallaAvatarStudio .muestraOpcionAvatar,
.pantallaAvatarStudio.panelJugadorActivoV3 .muestraOpcionAvatar {
width: 88px !important;
height: 88px !important;
min-width: 88px !important;
min-height: 88px !important;
flex: 0 0 88px !important;
}
#pantallaAvatarStudio .opcionAvatarStudio > strong,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio > strong {
width: 100% !important;
min-height: 28px !important;
max-height: 32px !important;
margin: -3px 0 0 !important;
padding: 0 3px !important;
font-size: 15px !important;
line-height: 1.05 !important;
font-weight: 800 !important;
text-align: center !important;
white-space: normal !important;
overflow: visible !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#pantallaAvatarStudio .opcionAvatarStudio > small,
.pantallaAvatarStudio.panelJugadorActivoV3 .opcionAvatarStudio > small {
margin: -2px 0 0 !important;
min-height: 10px !important;
line-height: 10px !important;
font-size: 8px !important;
}
#pantallaAvatarStudio .miniaturaCabezaBaseAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3 .miniaturaCabezaBaseAvatarStudio {
width: 50px !important;
height: 50px !important;
max-width: 50px !important;
max-height: 50px !important;
object-fit: contain !important;
transform: translateY(1px) scale(1) !important;
transform-origin: center center !important;
}
#pantallaAvatarStudio
.muestraCabezaGrandeAvatarStudio
img.miniaturaCabezaBaseAvatarStudio,
.pantallaAvatarStudio.panelJugadorActivoV3
.muestraCabezaGrandeAvatarStudio
img.miniaturaCabezaBaseAvatarStudio {
width: 74px !important;
height: 74px !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 74px !important;
max-height: 74px !important;
object-fit: contain !important;
transform: none !important;
margin: auto !important;
}
#pantallaAvatarStudio
.muestraCabezaGrandeAvatarStudio
.miniaturaCabezaBaseAvatarStudioWrap,
.pantallaAvatarStudio.panelJugadorActivoV3
.muestraCabezaGrandeAvatarStudio
.miniaturaCabezaBaseAvatarStudioWrap {
width: 88px !important;
height: 88px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
#pantallaPerfiles .botonEliminarPerfilV3 {
position: fixed !important;
top: 16px !important;
right: 22px !important;
z-index: 12000 !important;
min-width: 170px !important;
min-height: 44px !important;
padding: 10px 16px !important;
border: 2px solid #d95f69 !important;
border-radius: 15px !important;
background: rgba(255, 248, 248, 0.96) !important;
color: #9e3541 !important;
font:
800 12px/1.1 Georgia,
"Times New Roman",
serif !important;
letter-spacing: 0.02em !important;
box-shadow: 0 4px 0 rgba(129, 52, 62, 0.12) !important;
cursor: pointer !important;
}
#pantallaPerfiles .botonEliminarPerfilV3:hover:not(:disabled) {
transform: translateY(-2px) !important;
background: #fff0f1 !important;
}
#pantallaPerfiles .botonEliminarPerfilV3[aria-pressed="true"] {
background: #a93d49 !important;
border-color: #8e303a !important;
color: #ffffff !important;
}
#pantallaPerfiles .botonEliminarPerfilV3:disabled {
opacity: 0.42 !important;
cursor: default !important;
transform: none !important;
}
#pantallaPerfiles.modoEliminarPerfilesV3 .perfilGuardadoV3 {
position: relative !important;
border-color: #e16b74 !important;
background: #fff8f8 !important;
cursor: pointer !important;
}
#pantallaPerfiles.modoEliminarPerfilesV3 .perfilGuardadoV3::after {
content: "🗑️ ELIMINAR";
position: absolute;
top: 8px;
right: 8px;
padding: 4px 7px;
border-radius: 999px;
background: #b84450;
color: #ffffff;
font:
800 9px/1 "Segoe UI",
Arial,
sans-serif;
letter-spacing: 0.03em;
box-shadow: 0 2px 0 rgba(80, 24, 30, 0.12);
}
#pantallaPerfiles.modoEliminarPerfilesV3 .perfilGuardadoV3:hover {
border-color: #bb3f4b !important;
transform: translateY(-3px) scale(1.01) !important;
}
#pantallaPerfiles.modoEliminarPerfilesV3 .perfilCrearV3 {
opacity: 0.48 !important;
pointer-events: none !important;
}
@media (max-width: 720px) {
#pantallaPerfiles .botonEliminarPerfilV3 {
top: 10px !important;
right: 10px !important;
min-width: 0 !important;
min-height: 38px !important;
padding: 8px 11px !important;
font-size: 10px !important;
}
}
#pantallaAvatarStudio .categoriasAvatarStudio {
justify-content: center !important;
}
#pantallaAvatarStudio #opcionesAvatarStudio:not(.modoSubmenuColorAvatarV318) {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(148px, 148px)) !important;
justify-content: center !important;
justify-items: center !important;
align-content: start !important;
gap: 14px !important;
}
#pantallaAvatarStudio #opcionesAvatarStudio.modoSubmenuColorAvatarV318 {
display: block !important;
}
#pantallaBienvenida {
width: min(640px, calc(100% - 34px)) !important;
max-width: 640px !important;
margin: 18px auto 0 !important;
padding: 26px 28px 28px !important;
border: 3px solid #c9bbff !important;
border-radius: 30px !important;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.96),
rgba(248, 245, 255, 0.96)
) !important;
box-shadow:
0 10px 0 rgba(112, 90, 205, 0.09),
0 18px 34px rgba(104, 82, 190, 0.12) !important;
}
#pantallaBienvenida .avatarGrande {
width: 238px !important;
height: 238px !important;
min-width: 238px !important;
min-height: 238px !important;
margin: 0 auto 15px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
#pantallaBienvenida .avatarGrande .avatarCompuesto {
width: 226px !important;
height: 226px !important;
max-width: 226px !important;
max-height: 226px !important;
margin: 6px auto 0 !important;
filter: drop-shadow(0 9px 12px rgba(80, 57, 160, 0.13));
}
#pantallaBienvenida h2 {
font-size: clamp(44px, 4.7vw, 58px) !important;
line-height: 1.02 !important;
}
#pantallaBienvenida p {
margin: 0 0 24px !important;
color: #59488f !important;
font-size: clamp(19px, 1.8vw, 23px) !important;
}
#panelAvatarV3,
#botonAvatarStudioMenu,
#botonEditarAvatarPerfilV3 {
border: 2px solid #7763de !important;
border-radius: 15px !important;
background: #eee9ff !important;
color: #493c87 !important;
box-shadow: 0 5px 10px rgba(83, 64, 160, 0.14) !important;
text-shadow: none !important;
}
#panelAvatarV3 .textoAccionPanelV3 {
color: #493c87 !important;
font-weight: 900 !important;
}
#panelAvatarV3 .iconoAccionPanelV3 {
background: #ffffff !important;
color: #493c87 !important;
border-color: transparent !important;
}
#panelTiendaV3,
#botonTiendaPerfilV3,
#botonTiendaAvatarStudio {
border: 2px solid #d6ad35 !important;
background: #fff3bd !important;
color: #654d09 !important;
box-shadow: 0 5px 10px rgba(194, 148, 28, 0.16) !important;
}
#panelTiendaV3 .textoAccionPanelV3 {
color: #654d09 !important;
font-weight: 900 !important;
}
#panelVerPerfilV3,
#pantallaMenu #botonPerfilJugador {
border: 2px solid #6b9ddd !important;
background: #eaf4ff !important;
color: #365f94 !important;
box-shadow: 0 5px 10px rgba(65, 111, 166, 0.13) !important;
text-shadow: none !important;
}
#panelVerPerfilV3 .textoAccionPanelV3 {
color: #365f94 !important;
font-weight: 900 !important;
}
#panelVerPerfilV3 .iconoAccionPanelV3 {
background: #ffffff !important;
color: #365f94 !important;
border-color: transparent !important;
}
#panelIntroV3,
#panelCambiarJugadorV3,
#panelMenuV3,
#panelExportarV3,
#panelImportarV3 {
border-color: #c7bbf4 !important;
background: linear-gradient(180deg, #f7f4ff, #eee9ff) !important;
color: #594b91 !important;
box-shadow: 0 4px 8px rgba(82, 67, 145, 0.08) !important;
text-shadow: none !important;
}
#botonEntrar {
border: 2px solid #6550d6 !important;
background: linear-gradient(180deg, #806bed, #6752dc) !important;
box-shadow:
0 6px 0#4f3caf,
0 10px 18px rgba(83, 63, 174, 0.16) !important;
}
#pantallaMenu #tarjetaProgresoGeneral {
border-width: 3px !important;
box-shadow: 0 9px 18px rgba(110, 93, 188, 0.11) !important;
}
#pantallaMenu .mundoProgresoGeneral {
border-width: 3px !important;
border-style: solid !important;
box-shadow: 0 6px 12px rgba(95, 78, 165, 0.08) !important;
}
#pantallaMenu .mundoProgresoGeneral strong {
font-size: 17px !important;
line-height: 1.05 !important;
}
#pantallaMenu .mundoProgresoGeneral small {
font-size: 10px !important;
}
#pantallaMenu .mundoProgresoGeneral:nth-child(1) {
background: linear-gradient(180deg, #f4f1ff, #efebff) !important;
border-color: #6d5ae5 !important;
}
#pantallaMenu .mundoProgresoGeneral:nth-child(2) {
background: linear-gradient(180deg, #f2f7ff, #ebf3ff) !important;
border-color: #3b80df !important;
}
#pantallaMenu .mundoProgresoGeneral:nth-child(3) {
background: linear-gradient(180deg, #f0faf4, #e9f6ee) !important;
border-color: #40b06b !important;
}
#pantallaMenu .mundoProgresoGeneral:nth-child(4) {
background: linear-gradient(180deg, #fff7ee, #fbf0e5) !important;
border-color: #e19a42 !important;
}
#pantallaMenu .mundoProgresoGeneral:nth-child(5) {
background: linear-gradient(180deg, #fffbee, #f8f2db) !important;
border-color: #d9a91e !important;
}
#pantallaMenu .mundoProgresoGeneral:nth-child(6) {
background: linear-gradient(180deg, #fff3f8, #fceaf2) !important;
border-color: #db629d !important;
}
#pantallaMenu .mundoProgresoGeneral:nth-child(7) {
background: linear-gradient(180deg, #f1fafc, #e8f4f8) !important;
border-color: #42a7b8 !important;
}
#pantallaMenu .mundoProgresoGeneral:nth-child(8) {
background: linear-gradient(180deg, #fff4f2, #fce9e6) !important;
border-color: #dc746c !important;
}
#pantallaMenu .mundoProgresoGeneral:nth-child(9) {
background: linear-gradient(180deg, #fffbed, #f8f2d9) !important;
border-color: #d5af2e !important;
}
#pantallaMenu .granPruebaActivaV354,
#pantallaMenu .granPruebaAccesibleV3,
#pantallaMenu .granPruebaLimpiaV3 {
background: linear-gradient(135deg, #fff7ce, #ffe78b) !important;
border-color: #ca9418 !important;
box-shadow:
0 8px 16px rgba(194, 139, 20, 0.15),
inset 0 0 0 2px rgba(255, 246, 194, 0.7) !important;
}
#pantallaPerfiles .contenedorPerfiles {
width: min(1120px, 94%) !important;
grid-template-columns: repeat(auto-fill, 210px) !important;
align-items: start !important;
gap: 18px !important;
}
#pantallaPerfiles .perfilV3 {
width: 210px !important;
height: 210px !important;
min-width: 210px !important;
min-height: 210px !important;
aspect-ratio: 1/1;
padding: 14px !important;
}
#pantallaPerfiles .avatarPerfilV3 {
width: 94px !important;
height: 94px !important;
}
#pantallaPerfiles .avatarPerfilV3 .avatarCompuesto {
width: 90px !important;
height: 90px !important;
}
@media (max-width: 560px) {
#pantallaPerfiles .contenedorPerfiles {
grid-template-columns: repeat(auto-fill, 168px) !important;
gap: 12px !important;
}
#pantallaPerfiles .perfilV3 {
width: 168px !important;
height: 168px !important;
min-width: 168px !important;
min-height: 168px !important;
}
#pantallaPerfiles .avatarPerfilV3 {
width: 74px !important;
height: 74px !important;
}
#pantallaPerfiles .avatarPerfilV3 .avatarCompuesto {
width: 70px !important;
height: 70px !important;
}
}
body:has(#pantallaBienvenida:not(.oculto)) {
overflow: hidden !important;
}
#pantallaBienvenida:not(.oculto) {
width: min(1180px, calc(100vw - 40px)) !important;
max-width: 1180px !important;
min-height: calc(100dvh - 36px) !important;
margin: 18px auto !important;
padding: 22px 30px 26px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
#pantallaBienvenida .avatarGrande {
width: 250px !important;
height: 250px !important;
min-width: 250px !important;
min-height: 250px !important;
margin: 0 auto 18px !important;
}
#pantallaBienvenida .avatarGrande .avatarCompuesto {
width: 236px !important;
height: 236px !important;
max-width: 236px !important;
max-height: 236px !important;
margin: 4px auto 0 !important;
}
#pantallaBienvenida h2 {
margin: 0 0 8px !important;
font-size: clamp(46px, 4.8vw, 62px) !important;
line-height: 0.98 !important;
}
#pantallaBienvenida p {
margin: 0 0 28px !important;
font-size: clamp(18px, 1.7vw, 24px) !important;
}
#panelVerPerfilV3,
#panelAvatarV3,
#panelIntroV3,
#panelCambiarJugadorV3,
#panelMenuV3,
#panelExportarV3,
#panelImportarV3,
#botonEditarAvatarPerfilV3,
#botonIrEstudioAvatar,
#botonGuardarAvatar,
#botonRestablecerAvatar,
#panelGuardarAvatarV3,
#panelRestablecerAvatarV3,
#botonCambiarPerfil,
#botonEntrar,
#botonVolverTiendaAvatar,
#botonVolverSubmenuColorAvatarV318,
#botonCerrarAvatarStudio {
border: 2px solid #7763de !important;
border-radius: 18px !important;
background: linear-gradient(180deg, #fcfbff 0%, #eee9ff 100%) !important;
color: #4a3e89 !important;
text-shadow: none !important;
box-shadow:
0 4px 0#c3b8f3,
0 10px 18px rgba(95, 77, 173, 0.1) !important;
}
#panelVerPerfilV3:hover,
#panelAvatarV3:hover,
#panelIntroV3:hover,
#panelCambiarJugadorV3:hover,
#panelMenuV3:hover,
#panelExportarV3:hover,
#panelImportarV3:hover,
#botonEditarAvatarPerfilV3:hover,
#botonIrEstudioAvatar:hover,
#botonGuardarAvatar:hover,
#botonRestablecerAvatar:hover,
#panelGuardarAvatarV3:hover,
#panelRestablecerAvatarV3:hover,
#botonCambiarPerfil:hover,
#botonEntrar:hover,
#botonVolverTiendaAvatar:hover,
#botonVolverSubmenuColorAvatarV318:hover,
#botonCerrarAvatarStudio:hover {
transform: translateY(-2px) !important;
box-shadow:
0 5px 0#b9adf2,
0 12px 18px rgba(95, 77, 173, 0.14) !important;
}
#panelVerPerfilV3 .textoAccionPanelV3,
#panelAvatarV3 .textoAccionPanelV3,
#panelIntroV3 .textoAccionPanelV3,
#panelCambiarJugadorV3 .textoAccionPanelV3,
#panelMenuV3 .textoAccionPanelV3,
#panelExportarV3 span:last-child,
#panelImportarV3 span:last-child,
#botonEditarAvatarPerfilV3,
#botonIrEstudioAvatar,
#botonGuardarAvatar,
#botonRestablecerAvatar,
#panelGuardarAvatarV3,
#panelRestablecerAvatarV3,
#botonCambiarPerfil,
#botonEntrar,
#botonVolverTiendaAvatar,
#botonVolverSubmenuColorAvatarV318,
#botonCerrarAvatarStudio {
color: #4a3e89 !important;
font-weight: 900 !important;
}
#panelVerPerfilV3 .iconoAccionPanelV3,
#panelAvatarV3 .iconoAccionPanelV3,
#panelIntroV3 .iconoAccionPanelV3,
#panelCambiarJugadorV3 .iconoAccionPanelV3,
#panelMenuV3 .iconoAccionPanelV3,
#panelExportarV3 .iconoSistemaPanelV3,
#panelImportarV3 .iconoSistemaPanelV3 {
background: #ffffff !important;
color: #4a3e89 !important;
border: 1px solid #e0d7ff !important;
}
#panelTiendaV3,
#botonTiendaPerfilV3,
#botonTiendaAvatarStudio {
border: 2px solid #d5ae34 !important;
border-radius: 18px !important;
background: linear-gradient(180deg, #fff4bb 0%, #f7de72 100%) !important;
color: #6a4d05 !important;
text-shadow: none !important;
box-shadow:
0 4px 0#d9c36b,
0 10px 18px rgba(177, 137, 17, 0.14) !important;
}
#panelTiendaV3:hover,
#botonTiendaPerfilV3:hover,
#botonTiendaAvatarStudio:hover {
transform: translateY(-2px) !important;
}
#panelTiendaV3 .textoAccionPanelV3,
#botonTiendaPerfilV3,
#botonTiendaAvatarStudio {
color: #6a4d05 !important;
font-weight: 900 !important;
}
#panelTiendaV3 .iconoAccionPanelV3 {
background: #fffdf4 !important;
border: 1px solid #f0de97 !important;
}
#botonEntrar {
min-width: 320px !important;
padding: 18px 26px !important;
font-size: 15px !important;
background: linear-gradient(180deg, #836ef0 0%, #6a56dd 100%) !important;
color: #ffffff !important;
border-color: #6956dc !important;
box-shadow:
0 6px 0#5140b1,
0 12px 22px rgba(83, 63, 174, 0.17) !important;
}
#botonCambiarPerfil {
min-width: 230px !important;
padding: 14px 22px !important;
}
#botonGuardarAvatar,
#botonRestablecerAvatar,
#botonTiendaAvatarStudio {
min-height: 56px !important;
padding: 12px 24px !important;
}
#panelGuardarAvatarV3,
#panelRestablecerAvatarV3,
#panelTiendaV3 {
min-height: 56px !important;
}
#botonIrEstudioAvatar {
min-width: 220px !important;
min-height: 58px !important;
}
#pantallaMenu .mundoProgresoGeneral {
gap: 10px !important;
}
#pantallaMenu .mundoProgresoGeneral strong {
font-size: clamp(14px, 1.25vw, 15px) !important;
line-height: 1.06 !important;
letter-spacing: 0.01em !important;
}
#pantallaMenu .mundoProgresoGeneral small {
font-size: 9px !important;
line-height: 1.05 !important;
}
#pantallaPerfiles .contenedorPerfiles {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: flex-start !important;
width: min(1120px, calc(100vw - 60px)) !important;
margin-left: auto !important;
margin-right: auto !important;
gap: 22px !important;
}
#pantallaPerfiles .perfilV3,
#pantallaPerfiles .perfilCrearV3,
#pantallaPerfiles .perfilGuardadoV3 {
width: 210px !important;
min-width: 210px !important;
height: 210px !important;
min-height: 210px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
}
#pantallaPerfiles .perfilCrearV3 {
border-style: dashed !important;
border-width: 3px !important;
}
@media (max-width: 560px) {
#pantallaPerfiles .contenedorPerfiles {
width: min(96vw, 360px) !important;
gap: 14px !important;
}
#pantallaPerfiles .perfilV3,
#pantallaPerfiles .perfilCrearV3,
#pantallaPerfiles .perfilGuardadoV3 {
width: 168px !important;
min-width: 168px !important;
height: 168px !important;
min-height: 168px !important;
}
}
#pantallaMenu #tarjetaProgresoGeneral .mundoProgresoGeneral strong,
#pantallaMenu .mundoProgresoGeneral strong {
font-size: 17px !important;
line-height: 1.05 !important;
letter-spacing: 0 !important;
}
#pantallaMenu #tarjetaProgresoGeneral .mundoProgresoGeneral small,
#pantallaMenu .mundoProgresoGeneral small {
font-size: 10px !important;
line-height: 1.05 !important;
}
#pantallaTiendaAvatar #botonVolverTiendaAvatar:hover,
#pantallaTiendaAvatar #botonIrEstudioAvatar:hover {
transform: none !important;
filter: brightness(1.025) !important;
}
#pantallaTiendaAvatar #botonVolverTiendaAvatar,
#pantallaTiendaAvatar #botonIrEstudioAvatar {
transition:
background-color 0.15s ease,
filter 0.15s ease,
box-shadow 0.15s ease !important;
}
#pantallaAvatarStudio .panelOpcionesAvatar #categoriasAvatarStudio {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(96px, 106px)) !important;
justify-content: center !important;
justify-items: stretch !important;
align-items: stretch !important;
width: 100% !important;
min-height: 76px !important;
height: auto !important;
margin: 0 auto !important;
padding: 0 10px !important;
gap: 9px !important;
box-sizing: border-box !important;
}
#pantallaAvatarStudio
.panelOpcionesAvatar
#categoriasAvatarStudio
.categoriaAvatarStudio {
width: 106px !important;
max-width: 106px !important;
justify-self: center !important;
}
#pantallaAvatarStudio
.panelOpcionesAvatar
#opcionesAvatarStudio:not(.modoSubmenuColorAvatarV318) {
display: grid !important;
grid-template-columns: repeat(auto-fit, 148px) !important;
justify-content: center !important;
justify-items: center !important;
align-content: start !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 12px !important;
padding-right: 12px !important;
box-sizing: border-box !important;
}
#pantallaAvatarStudio #botonGuardarAvatar {
border: 2px solid #7763de !important;
background: linear-gradient(180deg, #fbfaff 0%, #ece7ff 100%) !important;
color: #493c87 !important;
box-shadow:
0 4px 0#c0b5f2,
0 10px 18px rgba(87, 69, 164, 0.11) !important;
}
#pantallaAvatarStudio #botonGuardarAvatar strong {
color: #493c87 !important;
font-weight: 900 !important;
}
#pantallaAvatarStudio #botonGuardarAvatar > span {
width: 34px !important;
height: 34px !important;
border-radius: 10px !important;
background: #ffffff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
#pantallaAvatarStudio #botonRestablecerAvatar {
border: 2px solid #c7bbf5 !important;
background: linear-gradient(180deg, #ffffff 0%, #f1edff 100%) !important;
color: #594b91 !important;
box-shadow:
0 4px 0#d7cff8,
0 8px 15px rgba(87, 69, 164, 0.08) !important;
}
#pantallaAvatarStudio #botonRestablecerAvatar strong {
color: #594b91 !important;
font-weight: 900 !important;
}
#pantallaAvatarStudio #botonRestablecerAvatar > span {
width: 31px !important;
height: 31px !important;
border-radius: 9px !important;
background: #ffffff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
#pantallaAvatarStudio #botonTiendaAvatarStudio {
border: 2px solid #d5ae34 !important;
background: linear-gradient(180deg, #fff3b5 0%, #f6d866 100%) !important;
color: #654b05 !important;
box-shadow:
0 4px 0#d7bc58,
0 10px 18px rgba(174, 128, 10, 0.13) !important;
}
#pantallaAvatarStudio #botonTiendaAvatarStudio strong {
color: #654b05 !important;
font-weight: 900 !important;
}
#pantallaAvatarStudio #botonCerrarAvatarStudio {
border: 2px solid #7763de !important;
background: linear-gradient(180deg, #ffffff 0%, #eee9ff 100%) !important;
color: #493c87 !important;
box-shadow: 0 4px 0#c3b8f3 !important;
}
#pantallaAvatarStudio #botonGuardarAvatar:hover,
#pantallaAvatarStudio #botonRestablecerAvatar:hover,
#pantallaAvatarStudio #botonCerrarAvatarStudio:hover {
transform: none !important;
filter: brightness(1.025) !important;
}
#pantallaAvatarStudio #botonTiendaAvatarStudio:hover {
transform: translateY(-50%) !important;
filter: brightness(1.025) !important;
}
.panelJugadorV3[data-contexto="menu"] #panelVerPerfilV3,
.panelJugadorV3[data-contexto="menu"] #panelAvatarV3 {
border: 2px solid #7763de !important;
background: linear-gradient(180deg, #fbfaff 0%, #eee9ff 100%) !important;
color: #493c87 !important;
box-shadow:
0 4px 0#c3b8f3,
0 8px 14px rgba(84, 66, 153, 0.09) !important;
}
.panelJugadorV3[data-contexto="menu"] #panelVerPerfilV3 .textoAccionPanelV3,
.panelJugadorV3[data-contexto="menu"] #panelAvatarV3 .textoAccionPanelV3 {
color: #493c87 !important;
font-size: 10.5px !important;
font-weight: 900 !important;
opacity: 1 !important;
}
.panelJugadorV3[data-contexto="menu"] #panelVerPerfilV3 .iconoAccionPanelV3,
.panelJugadorV3[data-contexto="menu"] #panelAvatarV3 .iconoAccionPanelV3 {
background: #ffffff !important;
color: #493c87 !important;
border: 1px solid #ddd5ff !important;
}
.panelJugadorV3[data-contexto="menu"] #panelTiendaV3 {
border: 2px solid #d5ae34 !important;
background: linear-gradient(180deg, #fff3b5 0%, #f6d866 100%) !important;
color: #654b05 !important;
box-shadow:
0 4px 0#d7bc58,
0 8px 14px rgba(174, 128, 10, 0.11) !important;
}
.panelJugadorV3[data-contexto="menu"] #panelTiendaV3 .textoAccionPanelV3 {
color: #654b05 !important;
font-size: 11px !important;
font-weight: 900 !important;
}
.panelJugadorV3[data-contexto="menu"] #panelTiendaV3 .iconoAccionPanelV3 {
background: #fffdf3 !important;
border: 1px solid #ecd987 !important;
}
.panelJugadorV3[data-contexto="menu"] #panelIntroV3,
.panelJugadorV3[data-contexto="menu"] #panelCambiarJugadorV3 {
border: 2px solid #c9bef5 !important;
background: linear-gradient(180deg, #ffffff 0%, #f0ecff 100%) !important;
color: #594b91 !important;
box-shadow:
0 4px 0#d8d0f8,
0 7px 12px rgba(82, 66, 145, 0.07) !important;
}
.panelJugadorV3[data-contexto="menu"] #panelIntroV3 .textoAccionPanelV3,
.panelJugadorV3[data-contexto="menu"]
#panelCambiarJugadorV3
.textoAccionPanelV3 {
color: #594b91 !important;
font-size: 9.5px !important;
font-weight: 900 !important;
opacity: 1 !important;
}
.panelJugadorV3[data-contexto="menu"] #panelExportarV3,
.panelJugadorV3[data-contexto="menu"] #panelImportarV3 {
border: 2px solid #c9bef5 !important;
background: linear-gradient(180deg, #ffffff 0%, #f0ecff 100%) !important;
color: #594b91 !important;
box-shadow: 0 3px 0#d8d0f8 !important;
}
.panelJugadorV3[data-contexto="menu"] #panelExportarV3 span:last-child,
.panelJugadorV3[data-contexto="menu"] #panelImportarV3 span:last-child {
color: #594b91 !important;
font-size: 9px !important;
font-weight: 900 !important;
opacity: 1 !important;
}
.panelJugadorV3[data-contexto="menu"] #panelVerPerfilV3:hover,
.panelJugadorV3[data-contexto="menu"] #panelAvatarV3:hover,
.panelJugadorV3[data-contexto="menu"] #panelTiendaV3:hover,
.panelJugadorV3[data-contexto="menu"] #panelIntroV3:hover,
.panelJugadorV3[data-contexto="menu"] #panelCambiarJugadorV3:hover,
.panelJugadorV3[data-contexto="menu"] #panelExportarV3:hover,
.panelJugadorV3[data-contexto="menu"] #panelImportarV3:hover {
filter: brightness(1.025) !important;
}
@media (max-width: 1050px) {
#pantallaAvatarStudio .panelOpcionesAvatar #categoriasAvatarStudio {
grid-template-columns: repeat(auto-fit, minmax(88px, 98px)) !important;
}
#pantallaAvatarStudio
.panelOpcionesAvatar
#categoriasAvatarStudio
.categoriaAvatarStudio {
width: 98px !important;
max-width: 98px !important;
}
}
.panelJugadorV3[data-contexto="menu"] #panelVerPerfilV3,
.panelJugadorV3[data-contexto="menu"] #panelAvatarV3 {
border-color: #6c55e3 !important;
background: linear-gradient(180deg, #f1edff 0%, #dfd7ff 100%) !important;
color: #41347d !important;
box-shadow:
0 4px 0#b4a7ef,
0 9px 16px rgba(84, 64, 165, 0.13) !important;
}
.panelJugadorV3[data-contexto="menu"] #panelVerPerfilV3 .textoAccionPanelV3,
.panelJugadorV3[data-contexto="menu"] #panelAvatarV3 .textoAccionPanelV3 {
color: #41347d !important;
}
#pantallaAvatarStudio #botonGuardarAvatar {
border-color: #6c55e3 !important;
background: linear-gradient(180deg, #f1edff 0%, #ddd4ff 100%) !important;
color: #41347d !important;
box-shadow:
0 4px 0#b1a3ed,
0 9px 17px rgba(84, 64, 165, 0.14) !important;
}
#pantallaAvatarStudio #botonGuardarAvatar strong {
color: #41347d !important;
}
.pantallaTiendaAvatar #botonVolverTiendaAvatar,
.pantallaTiendaAvatar #botonVolverTiendaAvatar:hover,
.pantallaTiendaAvatar #botonVolverTiendaAvatar:focus-visible,
.pantallaTiendaAvatar #botonVolverTiendaAvatar:active {
transform: translateY(-50%) !important;
}
.pantallaTiendaAvatar #botonIrEstudioAvatar,
.pantallaTiendaAvatar #botonIrEstudioAvatar:hover,
.pantallaTiendaAvatar #botonIrEstudioAvatar:focus-visible,
.pantallaTiendaAvatar #botonIrEstudioAvatar:active {
transform: translateY(-50%) !important;
}
@media (max-width: 900px) {
.pantallaTiendaAvatar #botonVolverTiendaAvatar,
.pantallaTiendaAvatar #botonVolverTiendaAvatar:hover,
.pantallaTiendaAvatar #botonVolverTiendaAvatar:focus-visible,
.pantallaTiendaAvatar #botonVolverTiendaAvatar:active,
.pantallaTiendaAvatar #botonIrEstudioAvatar,
.pantallaTiendaAvatar #botonIrEstudioAvatar:hover,
.pantallaTiendaAvatar #botonIrEstudioAvatar:focus-visible,
.pantallaTiendaAvatar #botonIrEstudioAvatar:active {
transform: none !important;
}
}
.pantallaTiendaAvatar #botonVolverTiendaAvatar:hover,
.pantallaTiendaAvatar #botonIrEstudioAvatar:hover {
filter: brightness(1.035) !important;
}
.panelJugadorV3[data-contexto="menu"] #panelVerPerfilV3,
.panelJugadorV3[data-contexto="menu"] #panelAvatarV3 {
border-color: #6248df !important;
background: linear-gradient(180deg, #ece7ff 0%, #d8ceff 100%) !important;
color: #3d3179 !important;
box-shadow:
0 4px 0#aa9be9,
0 9px 16px rgba(78, 58, 160, 0.15) !important;
}
.panelJugadorV3[data-contexto="menu"] #panelVerPerfilV3 .textoAccionPanelV3,
.panelJugadorV3[data-contexto="menu"] #panelAvatarV3 .textoAccionPanelV3 {
color: #3d3179 !important;
}
#pantallaAvatarStudio #botonGuardarAvatar {
border-color: #6248df !important;
background: linear-gradient(180deg, #ece7ff 0%, #d6cbff 100%) !important;
color: #3d3179 !important;
box-shadow:
0 4px 0#a99ae8,
0 9px 17px rgba(78, 58, 160, 0.15) !important;
}
#pantallaAvatarStudio #botonGuardarAvatar strong {
color: #3d3179 !important;
}
#pantallaTiendaAvatar #botonVolverTiendaAvatar,
#pantallaTiendaAvatar #botonVolverTiendaAvatar:hover,
#pantallaTiendaAvatar #botonVolverTiendaAvatar:focus,
#pantallaTiendaAvatar #botonVolverTiendaAvatar:focus-visible,
#pantallaTiendaAvatar #botonVolverTiendaAvatar:active {
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translate3d(0, -50%, 0) !important;
margin: 0 !important;
box-sizing: border-box !important;
box-shadow:
0 4px 0#c3b8f3,
0 10px 18px rgba(95, 77, 173, 0.1) !important;
animation: none !important;
transition:
background-color 0.12s ease,
border-color 0.12s ease,
color 0.12s ease !important;
}
#pantallaTiendaAvatar #botonIrEstudioAvatar,
#pantallaTiendaAvatar #botonIrEstudioAvatar:hover,
#pantallaTiendaAvatar #botonIrEstudioAvatar:focus,
#pantallaTiendaAvatar #botonIrEstudioAvatar:focus-visible,
#pantallaTiendaAvatar #botonIrEstudioAvatar:active {
position: absolute !important;
right: 28px !important;
top: 50% !important;
transform: translate3d(0, -50%, 0) !important;
margin: 0 !important;
box-sizing: border-box !important;
box-shadow:
0 4px 0#c3b8f3,
0 10px 18px rgba(95, 77, 173, 0.1) !important;
animation: none !important;
transition:
background-color 0.12s ease,
border-color 0.12s ease,
color 0.12s ease !important;
}
#pantallaTiendaAvatar #botonVolverTiendaAvatar:hover *,
#pantallaTiendaAvatar #botonIrEstudioAvatar:hover *,
#pantallaTiendaAvatar #botonVolverTiendaAvatar:active *,
#pantallaTiendaAvatar #botonIrEstudioAvatar:active * {
transform: none !important;
animation: none !important;
}
#pantallaTiendaAvatar #botonVolverTiendaAvatar:hover,
#pantallaTiendaAvatar #botonIrEstudioAvatar:hover {
filter: none !important;
background: linear-gradient(180deg, #f8f5ff 0%, #e9e2ff 100%) !important;
}
@media (max-width: 900px) {
#pantallaTiendaAvatar #botonVolverTiendaAvatar,
#pantallaTiendaAvatar #botonVolverTiendaAvatar:hover,
#pantallaTiendaAvatar #botonVolverTiendaAvatar:focus,
#pantallaTiendaAvatar #botonVolverTiendaAvatar:focus-visible,
#pantallaTiendaAvatar #botonVolverTiendaAvatar:active {
top: 10px !important;
transform: none !important;
}
#pantallaTiendaAvatar #botonIrEstudioAvatar,
#pantallaTiendaAvatar #botonIrEstudioAvatar:hover,
#pantallaTiendaAvatar #botonIrEstudioAvatar:focus,
#pantallaTiendaAvatar #botonIrEstudioAvatar:focus-visible,
#pantallaTiendaAvatar #botonIrEstudioAvatar:active {
position: static !important;
right: auto !important;
top: auto !important;
transform: none !important;
}
}
.fondoNuevoPerfilV3 {
position: fixed;
inset: 0;
z-index: 30000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(39, 44, 80, 0.46);
backdrop-filter: blur(7px);
}
.fondoNuevoPerfilV3.ocultoNuevoPerfilV3 {
display: none !important;
}
.panelNuevoPerfilV3 {
position: relative;
width: min(760px, 94vw);
padding: 26px 28px 27px;
border: 3px solid rgba(255, 255, 255, 0.94);
border-radius: 26px;
background: linear-gradient(135deg, #fffdf9 0%, #fffaf0 50%, #f3efff 100%);
box-shadow: 0 20px 55px rgba(48, 39, 103, 0.25);
}
.cerrarNuevoPerfilV3 {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.cerrarNuevoPerfilV3 img {
width: 36px;
height: 36px;
object-fit: contain;
}
.cabeceraNuevoPerfilV3 {
display: flex;
align-items: center;
gap: 13px;
padding-right: 48px;
margin-bottom: 20px;
}
.iconoNuevoPerfilV3 {
font-size: 34px;
}
.cabeceraNuevoPerfilV3 h2 {
margin: 0;
color: #5d46aa;
font-family: "Comfortaa", sans-serif;
font-size: 28px;
line-height: 1.05;
}
.cabeceraNuevoPerfilV3 p {
margin: 5px 0 0;
color: #756b91;
font-size: 12px;
}
.etiquetaNombreNuevoPerfilV3 {
display: block;
margin-bottom: 7px;
color: #58468c;
font-family: "Comfortaa", sans-serif;
font-weight: 700;
font-size: 13px;
}
.nombreNuevoPerfilV3 {
width: 100%;
min-height: 50px;
box-sizing: border-box;
padding: 0 16px;
border: 2px solid #d8cff8;
border-radius: 13px;
background: #fff;
color: #423866;
outline: none;
font-family: "Comfortaa", sans-serif;
font-size: 16px;
font-weight: 700;
transition:
border-color 0.16s ease,
box-shadow 0.16s ease,
transform 0.16s ease;
}
.nombreNuevoPerfilV3:focus {
border-color: #7b61df;
box-shadow: 0 0 0 4px rgba(123, 97, 223, 0.12);
}
.nombreNuevoPerfilV3.errorNombreNuevoPerfilV3 {
border-color: #e26474;
animation: sacudirNombrePerfilV3 0.24s linear 2;
}
@keyframes sacudirNombrePerfilV3 {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(5px);
}
}
.cabeceraDificultadNuevoPerfilV3 {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
margin: 21px 2px 10px;
}
.cabeceraDificultadNuevoPerfilV3 strong {
color: #58468c;
font-family: "Comfortaa", sans-serif;
font-size: 13px;
}
.cabeceraDificultadNuevoPerfilV3 span {
color: #8a809f;
font-size: 10.5px;
}
.opcionesDificultadNuevoPerfilV3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 11px;
}
.opcionDificultadNuevoPerfilV3 {
min-height: 142px;
padding: 14px 11px;
border: 2px solid #ded7f5;
border-radius: 14px;
background: rgba(255, 255, 255, 0.86);
color: #554879;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0 5px 12px rgba(77, 61, 130, 0.06);
transition:
transform 0.15s ease,
border-color 0.15s ease,
background 0.15s ease,
box-shadow 0.15s ease;
}
.opcionDificultadNuevoPerfilV3:hover {
transform: translateY(-2px);
border-color: #ad9af0;
}
.opcionDificultadNuevoPerfilV3.seleccionada {
border-color: #7b61df;
background: #eee9ff;
box-shadow:
0 7px 16px rgba(91, 69, 173, 0.14),
inset 0 0 0 1px rgba(123, 97, 223, 0.13);
}
.iconoDificultadNuevoPerfilV3 {
margin-bottom: 7px;
font-size: 29px;
}
.opcionDificultadNuevoPerfilV3 strong {
margin-bottom: 5px;
font-family: "Comfortaa", sans-serif;
font-size: 12px;
color: #514176;
}
.opcionDificultadNuevoPerfilV3 small {
font-size: 10.5px;
line-height: 1.22;
color: #7c7295;
}
.confirmarNuevoPerfilV3 {
display: block;
min-width: 240px;
min-height: 50px;
margin: 22px auto 0;
padding: 0 22px;
border: 2px solid #fff;
border-radius: 16px;
background: linear-gradient(180deg, #8269e7, #6549c3);
color: #fff;
font-family: "Comfortaa", sans-serif;
font-weight: 800;
font-size: 13px;
letter-spacing: 0.03em;
box-shadow:
0 7px 0#4d3898,
0 11px 20px rgba(76, 52, 147, 0.22);
cursor: pointer;
}
.confirmarNuevoPerfilV3:hover {
transform: translateY(-1px);
filter: brightness(1.04);
}
.confirmarNuevoPerfilV3:active {
transform: translateY(4px);
box-shadow:
0 3px 0#4d3898,
0 6px 12px rgba(76, 52, 147, 0.18);
}
@media (max-width: 700px) {
.panelNuevoPerfilV3 {
width: min(94vw, 500px);
max-height: 94vh;
overflow-y: auto;
padding: 21px 17px 22px;
}
.opcionesDificultadNuevoPerfilV3 {
grid-template-columns: 1fr;
}
.opcionDificultadNuevoPerfilV3 {
min-height: 92px;
}
.cabeceraDificultadNuevoPerfilV3 {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
}
.introduccionV3 {
backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
}
.fondoNuevoPerfilV3 {
backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
}
.introduccionV3.introAventuraV6 {
position: fixed !important;
inset: 0 !important;
z-index: 5000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: rgba(34, 30, 31, 0.52) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.introduccionV3.introAventuraV6.oculto {
display: none !important;
}
.introV6Stage {
position: relative;
width: min(1180px, 96vw, 163.4vh);
aspect-ratio: 1672/941;
isolation: isolate;
overflow: visible;
contain: layout style;
filter: none;
}
.introV6Clip {
position: absolute;
z-index: 1;
inset: 5.6% 4.5% 6.2% 4.5%;
overflow: hidden;
border-radius: 22px;
background: #dcecc3;
transform: translateZ(0);
box-shadow: 0 14px 26px rgba(35, 22, 16, 0.22);
}
.introV6Fondo {
position: absolute;
z-index: 0;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
user-select: none;
pointer-events: none;
transform: translateZ(0);
}
.introV6Pergamino {
position: absolute;
z-index: 2;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.9;
user-select: none;
pointer-events: none;
}
.introV6Pose {
position: absolute;
z-index: 5;
left: 6.8%;
bottom: -0.5%;
width: 42.5%;
height: 76.5%;
object-fit: contain;
object-position: left bottom;
transform-origin: 48% 100%;
pointer-events: none;
user-select: none;
filter: none;
animation: introV6Respirar 5.2s ease-in-out infinite;
will-change: transform;
}
.introV6Stage[data-escena="explora"] .introV6Pose,
.introV6Stage[data-escena="aventura"] .introV6Pose,
.introV6Stage[data-escena="recompensa"] .introV6Pose,
.introV6Stage[data-escena="estilo"] .introV6Pose {
width: 43.5%;
left: 6%;
}
.introV6Stage[data-escena="nombre"] .introV6Pose,
.introV6Stage[data-escena="iniciemos"] .introV6Pose {
width: 42.5%;
left: 6.8%;
}
.introV6Contenido,
.introV6NombreWrap,
.introV6FinalWrap {
position: absolute;
z-index: 8;
inset: 0;
pointer-events: none;
}
.introV6Contenido.oculto,
.introV6NombreWrap.oculto,
.introV6FinalWrap.oculto,
.introV6Panel.oculto {
display: none !important;
}
.introV6Titulo {
position: absolute;
right: 4%;
top: 14.8%;
width: 50.5%;
height: 28%;
object-fit: contain;
object-position: center center;
user-select: none;
pointer-events: none;
}
.introV6Panel {
position: absolute;
right: 4.7%;
top: 39%;
width: 49.5%;
height: 34.5%;
object-fit: contain;
object-position: center center;
user-select: none;
pointer-events: none;
}
.introV6Stage[data-escena="bienvenida"] .introV6Titulo {
top: 20%;
height: 24%;
}
.introV6Stage[data-escena="bienvenida"] .introV6Panel {
top: 45%;
right: 4.5%;
width: 49.5%;
height: 31.2%;
}
.introV6Stage[data-escena="explora"] .introV6Titulo {
top: 14.4%;
height: 24%;
}
.introV6Stage[data-escena="explora"] .introV6Panel {
top: 40%;
height: 33.5%;
}
.introV6Stage[data-escena="aventura"] .introV6Titulo,
.introV6Stage[data-escena="recompensa"] .introV6Titulo,
.introV6Stage[data-escena="estilo"] .introV6Titulo {
top: 14.4%;
height: 24%;
}
.introV6Stage[data-escena="aventura"] .introV6Panel,
.introV6Stage[data-escena="recompensa"] .introV6Panel,
.introV6Stage[data-escena="estilo"] .introV6Panel {
top: 39%;
height: 35%;
}
.introV6NombreWrap {
pointer-events: none;
}
.introV6Stage[data-escena="nombre"] #introV6Titulo {
top: 15%;
right: 3.8%;
width: 51%;
height: 23.5%;
}
.introV6NombrePanel {
position: absolute;
right: 5%;
top: 42%;
width: 49%;
height: 27%;
object-fit: contain;
pointer-events: none;
user-select: none;
}
.introV6InputNombre {
position: absolute;
z-index: 3;
right: 11.9%;
top: 52.2%;
width: 36.2%;
height: 7.2%;
box-sizing: border-box;
border: 0;
outline: none;
border-radius: 14px;
padding: 0 2%;
background: rgba(255, 255, 255, 0.04);
color: #45263c;
font-family: var(--fuente-v3-texto) !important;
font-size: clamp(15px, 1.55vw, 23px);
font-weight: 800;
text-align: left;
pointer-events: auto;
caret-color: #6d25c7;
}
.introV6InputNombre::placeholder {
color: rgba(76, 58, 61, 0.48);
opacity: 1;
}
.introV6InputNombre:focus {
box-shadow:
0 0 0 3px rgba(115, 52, 216, 0.58),
0 0 0 6px rgba(255, 212, 65, 0.28);
background: rgba(255, 255, 255, 0.2);
}
.introV6InputNombre[readonly] {
cursor: default;
}
.introV6InputNombre.introV6ErrorNombre {
animation: introV6Error 0.42s ease;
box-shadow: 0 0 0 3px rgba(210, 62, 62, 0.72);
}
.introV6FinalWrap {
pointer-events: none;
}
.introV6Stage[data-escena="dificultad"] .introV6Pose,
.introV6Stage[data-escena="dificultad"] .introV6DecoWrap {
display: none !important;
}
.introV6Stage[data-escena="dificultad"] #introV6Titulo {
left: 50%;
transform: translateX(-50%);
right: auto;
top: 16%;
width: 72.5%;
height: 14.8%;
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadWrap {
left: 50%;
transform: translateX(-50%);
right: auto;
top: 34.2%;
width: 79.5%;
height: 39.8%;
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn {
top: 18.2%;
width: 25.2%;
height: 35.2%;
}
.introV6Stage[data-escena="dificultad"] .introV6DifApoyo {
left: 8.9%;
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura {
left: 37.35%;
}
.introV6Stage[data-escena="dificultad"] .introV6DifDesafio {
left: 65.8%;
}
.introV6Stage[data-escena="iniciemos"] #introV6Titulo {
top: 15%;
right: 3.6%;
width: 51%;
height: 15.5%;
}
.introV6FinalNombrePanel {
position: absolute;
right: 8.1%;
top: 31%;
width: 43.5%;
height: 13.2%;
object-fit: contain;
pointer-events: none;
user-select: none;
}
.introV6NombreConfirmado {
position: absolute;
z-index: 4;
right: 13%;
top: 33.9%;
width: 34%;
height: 6.7%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: #4f221e;
font-family: var(--fuente-v3-aventura) !important;
font-size: clamp(17px, 1.9vw, 29px);
line-height: 1;
font-weight: 900;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
}
.introV6DificultadWrap {
position: absolute;
z-index: 3;
right: 4.3%;
top: 42.3%;
width: 50.6%;
height: 31.4%;
pointer-events: auto;
}
.introV6DificultadBase {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
user-select: none;
}
.introV6DifBtn {
position: absolute;
top: 29%;
width: 29.2%;
height: 62%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
border-radius: 17px;
cursor: pointer;
transition:
transform 0.14s ease,
filter 0.14s ease;
}
.introV6DifApoyo {
left: 4.2%;
}
.introV6DifAventura {
left: 35.5%;
}
.introV6DifDesafio {
left: 66.8%;
}
.introV6DifImg {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
pointer-events: none;
user-select: none;
filter: drop-shadow(0 4px 3px rgba(55, 34, 20, 0.08));
}
.introV6DifBtn:hover:not(:disabled) {
transform: translateY(-2px) scale(1.015);
}
.introV6DifBtn.seleccionada .introV6DifImg {
filter: drop-shadow(0 0 3px rgba(255, 212, 51, 0.95))
drop-shadow(0 0 7px rgba(93, 189, 54, 0.62));
}
.introV6DifBtn.seleccionada::after {
content: "";
position: absolute;
inset: 5% 6%;
border: 4px solid rgba(115, 196, 50, 0.86);
border-radius: 18px;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
pointer-events: none;
}
.introV6DifBtn.bloqueada {
cursor: not-allowed;
}
.introV6DifBtn.bloqueada .introV6DifImg {
filter: grayscale(1) saturate(0.15) brightness(0.8) opacity(0.76);
}
.introV6Candado,
.introV6CandadoBoton {
position: absolute;
display: block;
box-sizing: border-box;
pointer-events: none;
}
.introV6Candado {
left: 50%;
top: 50%;
width: 28px;
height: 22px;
transform: translate(-50%, -28%);
border-radius: 5px;
background: #797470;
border: 3px solid #514d4a;
box-shadow:
0 2px 0 rgba(255, 255, 255, 0.35) inset,
0 3px 5px rgba(34, 28, 25, 0.18);
}
.introV6Candado::before {
content: "";
position: absolute;
left: 50%;
top: -16px;
width: 17px;
height: 17px;
transform: translateX(-50%);
border: 4px solid #514d4a;
border-bottom: 0;
border-radius: 12px 12px 0 0;
box-sizing: border-box;
}
.introV6Listo {
position: absolute;
z-index: 4;
right: 13.1%;
top: 70.8%;
width: 32.5%;
height: 9.5%;
object-fit: contain;
pointer-events: none;
user-select: none;
}
.introV6Nav {
position: absolute;
z-index: 18;
right: 6%;
bottom: 12.2%;
width: 48.2%;
height: 10%;
display: grid;
grid-template-columns: 1fr 1fr 1.26fr;
gap: 1.1%;
align-items: center;
pointer-events: auto;
}
.introV6NavBtn {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
border-radius: 18px;
transition:
transform 0.13s ease,
filter 0.13s ease,
opacity 0.13s ease;
}
.introV6BtnImg {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
user-select: none;
pointer-events: none;
}
.introV6NavBtn:hover:not(:disabled) {
transform: translateY(-2px);
filter: brightness(1.035);
}
.introV6NavBtn:active:not(:disabled) {
transform: translateY(1px) scale(0.995);
}
.introV6NavBtn:disabled {
cursor: default;
transform: none !important;
filter: grayscale(0.86) saturate(0.18) brightness(0.86);
opacity: 0.62;
}
.introV6NavBtn.bloqueado .introV6CandadoBoton {
display: block;
}
.introV6CandadoBoton {
display: none;
left: 21%;
top: 50%;
width: 17px;
height: 14px;
transform: translate(-50%, -24%);
border-radius: 3px;
background: #6d6966;
border: 2px solid #514e4b;
}
.introV6CandadoBoton::before {
content: "";
position: absolute;
left: 50%;
top: -10px;
width: 11px;
height: 10px;
transform: translateX(-50%);
border: 2px solid #514e4b;
border-bottom: 0;
border-radius: 8px 8px 0 0;
box-sizing: border-box;
}
.introV6NavBtn.introV6OcultoPrimera {
visibility: hidden !important;
pointer-events: none !important;
}
.introV6Stage,
.introV6Clip,
.introV6Fondo,
.introV6Pose,
.introV6DecoWrap,
.introV6Deco {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.introV6NavBtn:focus-visible,
.introV6DifBtn:focus-visible,
.introV6InputNombre:focus-visible,
.introV6Cerrar:focus-visible {
outline: 3px solid #ffca2c;
outline-offset: 2px;
}
.introV6Fondo {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
transform: translateZ(0) scale(1.012) !important;
transform-origin: center center !important;
}
.introV6Pergamino {
top: -1.6% !important;
left: -1.1% !important;
right: auto !important;
bottom: auto !important;
width: 102.8% !important;
height: 103.4% !important;
object-fit: cover !important;
object-position: center center !important;
transform: translateZ(0) !important;
}
.introV6Pose {
left: 9.8% !important;
width: 36.4% !important;
}
.introV6Stage[data-escena="explora"] .introV6Pose,
.introV6Stage[data-escena="aventura"] .introV6Pose,
.introV6Stage[data-escena="recompensa"] .introV6Pose,
.introV6Stage[data-escena="estilo"] .introV6Pose {
left: 9.1% !important;
width: 37.2% !important;
}
.introV6Stage[data-escena="nombre"] .introV6Pose,
.introV6Stage[data-escena="iniciemos"] .introV6Pose {
left: 9.8% !important;
width: 36.4% !important;
}
.introV6Stage[data-escena="bienvenida"] .introV6Panel {
right: 2.7% !important;
}
.introV6Stage[data-escena="bienvenida"] .introV6Titulo {
right: 2.2% !important;
}
.introV6Progreso {
position: absolute;
z-index: 33;
right: 18.6% !important;
bottom: 5.7% !important;
width: 25.5% !important;
height: 4.6% !important;
display: flex;
justify-content: flex-end !important;
align-items: center;
gap: 12px;
pointer-events: none;
}
.introV6Puntos {
display: flex;
align-items: center;
gap: 7px;
}
.introV6Punto {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid rgba(135, 107, 81, 0.68);
background: rgba(255, 255, 255, 0.34);
box-sizing: border-box;
}
.introV6Punto.activo {
border-color: #6d21c9;
background: #9134e4;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.82);
}
.introV6Contador {
color: #321447;
font-family: var(--fuente-v3-texto) !important;
font-size: clamp(10px, 1vw, 14px);
font-weight: 900;
line-height: 1;
}
.introV6Marco {
position: absolute;
z-index: 26;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
user-select: none;
}
.introV6DecoWrap {
position: absolute;
z-index: 32;
left: -0.6%;
bottom: 1.4%;
width: 23%;
height: 25%;
pointer-events: none;
overflow: visible;
}
.introV6Deco {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: left bottom;
transform-origin: 35% 100%;
filter: drop-shadow(0 6px 5px rgba(48, 29, 19, 0.12));
user-select: none;
}
.introV6DecoHojas {
width: 22%;
height: 24%;
animation: introV6HojasBase 5.8s ease-in-out infinite;
transform-origin: 42% 100%;
will-change: transform;
}
.introV6DecoHojas .introV6Deco {
animation: introV6Hojas 4.4s ease-in-out infinite;
will-change: transform;
}
.introV6DecoObjeto {
width: 25%;
height: 28%;
left: -0.8%;
bottom: 0.8%;
}
.introV6Stage[data-escena="recompensa"] .introV6DecoWrap {
width: 28%;
height: 31%;
left: -1%;
bottom: 0.6%;
}
.introV6DecoObjeto .introV6Deco {
animation: introV6Flotar 4.6s ease-in-out infinite;
}
.introV6Nav {
right: 6% !important;
width: 38% !important;
display: block !important;
pointer-events: none !important;
}
.introV6NavBtn {
position: absolute !important;
width: 47% !important;
pointer-events: auto !important;
}
.introV6Anterior {
right: auto !important;
}
.introV6Siguiente {
left: auto !important;
}
.introV6Stage[data-escena="bienvenida"] #botonAnteriorIntroV3 {
display: block !important;
pointer-events: none !important;
}
.introV6NavBtn,
.introV6BtnImg {
width: 100% !important;
height: 100% !important;
}
.introV6Cerrar {
position: absolute !important;
z-index: 48 !important;
top: 4.55% !important;
right: 1.25% !important;
width: 6.2% !important;
aspect-ratio: 1/1 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: transparent url(imagenes/interfaz/config-v39/cerrar.png)
center/contain no-repeat !important;
cursor: pointer !important;
filter: drop-shadow(0 5px 5px rgba(63, 35, 18, 0.22)) !important;
transition:
transform 0.14s ease,
filter 0.14s ease,
opacity 0.14s ease !important;
}
.introV6Cerrar:hover:not(:disabled) {
transform: translateY(-1px) scale(1.035) !important;
filter: brightness(1.04) drop-shadow(0 6px 6px rgba(63, 35, 18, 0.24)) !important;
}
.introV6Cerrar:active:not(:disabled) {
transform: translateY(1px) scale(0.97) !important;
}
.introV6Cerrar:disabled,
.introV6Cerrar.bloqueado {
cursor: not-allowed !important;
opacity: 0.64 !important;
filter: grayscale(1) saturate(0.1) brightness(0.82)
drop-shadow(0 3px 3px rgba(40, 34, 30, 0.16)) !important;
transform: none !important;
}
.introV6Cerrar.bloqueado::before,
.introV6Cerrar.bloqueado::after,
.introV6Cerrar:disabled::before,
.introV6Cerrar:disabled::after {
content: none !important;
display: none !important;
}
.introV6Entrando .introV6Titulo,
.introV6Entrando .introV6Panel,
.introV6Entrando .introV6NombrePanel,
.introV6Entrando .introV6FinalNombrePanel,
.introV6Entrando .introV6DificultadWrap,
.introV6Entrando .introV6Listo {
animation: introV6EntrarDerecha 0.36s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.introV6Entrando .introV6Pose {
animation:
introV6EntrarPersonaje 0.4s cubic-bezier(0.2, 0.72, 0.2, 1) both,
introV6Respirar 5.2s ease-in-out 0.4s infinite;
}
.introV6Stage {
filter: none !important;
transform: translateZ(0);
}
.introduccionV3.introAventuraV6 {
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
background: rgba(34, 30, 31, 0.48) !important;
}
@keyframes introV6EntrarDerecha {
from {
opacity: 0;
transform: translate3d(10px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes introV6EntrarPersonaje {
from {
opacity: 0;
transform: translate3d(0, 7px, 0) scale(0.992);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes introV6Respirar {
0%,
100% {
transform: translate3d(0, 0, 0) rotate(0);
}
50% {
transform: translate3d(0, -2px, 0) rotate(0.12deg);
}
}
@keyframes introV6HojasBase {
0%,
100% {
transform: translate3d(0, 0, 0) rotate(0);
}
35% {
transform: translate3d(2px, -2px, 0) rotate(0.8deg);
}
70% {
transform: translate3d(-1px, 1px, 0) rotate(-0.55deg);
}
}
@keyframes introV6Hojas {
0%,
100% {
transform: translate3d(0, 0, 0) rotate(0);
}
30% {
transform: translate3d(1px, -4px, 0) rotate(2deg);
}
65% {
transform: translate3d(-1px, -1px, 0) rotate(-1.15deg);
}
}
@keyframes introV6Flotar {
0%,
100% {
transform: translate3d(0, 0, 0) rotate(-0.15deg);
}
50% {
transform: translate3d(0, -3px, 0) rotate(0.45deg);
}
}
@keyframes introV6Error {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-6px);
}
75% {
transform: translateX(6px);
}
}
@media (max-width: 760px), (max-height: 560px) {
.introduccionV3.introAventuraV6 {
padding: 5px !important;
}
.introV6Clip {
border-radius: 16px;
}
.introV6Pergamino {
top: -1.8% !important;
left: -1.2% !important;
width: 103% !important;
height: 103.8% !important;
}
.introV6Nav {
right: 5.5% !important;
width: 39% !important;
}
.introV6Progreso {
right: 18% !important;
bottom: 5.2% !important;
}
.introV6Cerrar {
top: 4.4% !important;
right: 1.1% !important;
width: 6.5% !important;
}
.introV6DifBtn.seleccionada::after {
border-width: 3px;
}
.introV6InputNombre {
border-radius: 10px;
}
}
.introV6Pose {
bottom: 1.35% !important;
}
.introV6Stage[data-escena="explora"] .introV6Titulo,
.introV6Stage[data-escena="aventura"] .introV6Titulo,
.introV6Stage[data-escena="recompensa"] .introV6Titulo,
.introV6Stage[data-escena="estilo"] .introV6Titulo {
right: -0.55% !important;
top: 13.8% !important;
width: 55.2% !important;
height: 24.6% !important;
}
.introV6Stage[data-escena="explora"] .introV6Panel,
.introV6Stage[data-escena="aventura"] .introV6Panel,
.introV6Stage[data-escena="recompensa"] .introV6Panel,
.introV6Stage[data-escena="estilo"] .introV6Panel {
right: -0.45% !important;
top: 34.1% !important;
width: 51.8% !important;
height: 41.2% !important;
}
.introV6Stage[data-escena="nombre"] #introV6Titulo {
right: -0.55% !important;
top: 13.9% !important;
width: 55.2% !important;
height: 24% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6Contenido,
.introV6Stage[data-escena="dificultad"] .introV6FinalWrap {
z-index: 31 !important;
}
.introV6Stage[data-escena="dificultad"] .introV6Nav {
z-index: 34 !important;
}
.introV6Stage[data-escena="dificultad"] #introV6Titulo {
width: 73% !important;
height: 15% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadWrap {
top: 33.5% !important;
width: 79.5% !important;
height: 40% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn {
top: 18.2% !important;
width: 25.2% !important;
height: 35.2% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifApoyo {
left: 8.9% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura {
left: 37.35% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifDesafio {
left: 65.8% !important;
}
.introV6Stage[data-escena="iniciemos"] #introV6Titulo {
right: -0.55% !important;
top: 13.9% !important;
width: 55.2% !important;
height: 24% !important;
}
.introV6Nav {
right: 5.5% !important;
bottom: 11.15% !important;
width: 39.4% !important;
height: 10.6% !important;
}
.introV6NavBtn {
top: 0 !important;
height: 100% !important;
}
.introV6Anterior {
left: 0 !important;
width: 44.2% !important;
}
.introV6Siguiente {
right: 0 !important;
width: 49.4% !important;
}
.introV6Stage[data-escena="bienvenida"] #botonAnteriorIntroV3 {
visibility: hidden !important;
}
@media (prefers-reduced-motion: reduce) {
html:not([data-aventura-animaciones="activas"])
.introV6Entrando
.introV6Titulo,
html:not([data-aventura-animaciones="activas"])
.introV6Entrando
.introV6Panel,
html:not([data-aventura-animaciones="activas"])
.introV6Entrando
.introV6NombrePanel,
html:not([data-aventura-animaciones="activas"])
.introV6Entrando
.introV6FinalNombrePanel,
html:not([data-aventura-animaciones="activas"])
.introV6Entrando
.introV6DificultadWrap,
html:not([data-aventura-animaciones="activas"])
.introV6Entrando
.introV6Listo,
html:not([data-aventura-animaciones="activas"]) .introV6Entrando .introV6Pose,
html:not([data-aventura-animaciones="activas"]) .introV6DecoHojas,
html:not([data-aventura-animaciones="activas"])
.introV6DecoHojas
.introV6Deco,
html:not([data-aventura-animaciones="activas"])
.introV6DecoObjeto
.introV6Deco {
animation: none !important;
}
}
.introV6Stage[data-escena="explora"] .introV6Panel,
.introV6Stage[data-escena="aventura"] .introV6Panel,
.introV6Stage[data-escena="recompensa"] .introV6Panel,
.introV6Stage[data-escena="estilo"] .introV6Panel {
right: -2.05% !important;
top: 35.2% !important;
width: 53.3% !important;
height: 42.5% !important;
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
right: -0.65% !important;
top: 34.1% !important;
width: 51.8% !important;
height: 28.8% !important;
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre {
right: 7.7% !important;
top: 46.35% !important;
width: 39.8% !important;
height: 8.1% !important;
padding: 0 1.6% !important;
font-size: clamp(16px, 1.65vw, 24px) !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6FinalNombrePanel {
right: -0.65% !important;
top: 34.1% !important;
width: 51.8% !important;
height: 13.5% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
right: 8.8% !important;
top: 37.25% !important;
width: 37.2% !important;
height: 6.6% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6Clip {
z-index: 30 !important;
background: transparent !important;
box-shadow: none !important;
}
.introV6Stage[data-escena="dificultad"] .introV6Fondo,
.introV6Stage[data-escena="dificultad"] .introV6Pergamino,
.introV6Stage[data-escena="dificultad"] .introV6Pose,
.introV6Stage[data-escena="dificultad"] .introV6DecoWrap {
display: none !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadWrap {
top: 29% !important;
height: 39% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadBase {
width: 100% !important;
height: 100% !important;
object-fit: fill !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn {
top: 10% !important;
width: 24.1% !important;
height: 78.3% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifApoyo {
left: 4.9% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura {
left: 37.95% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
position: absolute;
left: 4.5%;
top: 100%;
width: 91%;
height: 28%;
display: block;
object-fit: fill;
pointer-events: none;
user-select: none;
}
.introV6Stage[data-escena="dificultad"] .introV6Nav {
bottom: 6.3% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6Progreso {
}
.introV6Stage[data-escena="dificultad"] #introV6Titulo {
z-index: 32 !important;
left: 50% !important;
transform: translateX(-50%) !important;
right: auto !important;
top: 15.9% !important;
width: 73.5% !important;
}
.introV6Stage[data-escena="explora"] #introV6Titulo,
.introV6Stage[data-escena="aventura"] #introV6Titulo,
.introV6Stage[data-escena="recompensa"] #introV6Titulo,
.introV6Stage[data-escena="estilo"] #introV6Titulo,
.introV6Stage[data-escena="nombre"] #introV6Titulo,
.introV6Stage[data-escena="iniciemos"] #introV6Titulo {
left: 75.3% !important;
right: auto !important;
transform: translateX(-50%) !important;
top: 12.5% !important;
width: 60.2% !important;
height: 27% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6Progreso {
bottom: 8% !important;
justify-content: flex-end !important;
}
.introV6Stage[data-escena="dificultad"] .introV6Progreso {
right: 46% !important;
width: 23% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6Contador {
white-space: nowrap !important;
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
border-radius: 16px;
}
.introV6Stage[data-escena="explora"] .introV6Panel,
.introV6Stage[data-escena="aventura"] .introV6Panel,
.introV6Stage[data-escena="recompensa"] .introV6Panel,
.introV6Stage[data-escena="estilo"] .introV6Panel {
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre {
}
.introV6Stage[data-escena="explora"] .introV6Panel,
.introV6Stage[data-escena="aventura"] .introV6Panel,
.introV6Stage[data-escena="recompensa"] .introV6Panel,
.introV6Stage[data-escena="estilo"] .introV6Panel {
top: 34.35% !important;
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre {
padding: 0 1.55% !important;
}
.introV6Stage[data-escena="nombre"] .introV6Panel {
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre {
padding: 0 1.7% !important;
}
.introV6Stage[data-escena="nombre"] .introV6Panel {
top: 30.95% !important;
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
}
.introV6Stage[data-escena="nombre"] #introV6Titulo {
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre {
padding: 0 1.45% !important;
}
.introV6Stage[data-escena="nombre"] #introV6Titulo {
top: 17.7% !important;
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre {
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
aspect-ratio: 1448/975;
object-fit: contain !important;
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre {
padding: 0 0.7% !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #6a5546 !important;
font-size: clamp(16px, 1.6vw, 24px) !important;
font-weight: 800 !important;
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre::placeholder {
color: rgba(118, 102, 94, 0.66) !important;
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre:focus {
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: inset 0 0 0 2px rgba(115, 52, 216, 0.18) !important;
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre {
padding: 0 0.95% !important;
font-size: clamp(18px, 1.9vw, 28px) !important;
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre {
padding: 0 0.8% !important;
font-size: clamp(17px, 1.72vw, 25px) !important;
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre {
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre {
padding: 0 0.92% !important;
font-size: clamp(18px, 1.84vw, 27px) !important;
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre {
padding: 0.15% 1.05%0 1.15% !important;
font-size: clamp(17px, 1.76vw, 26px) !important;
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre {
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
}
.introV6Stage[data-escena="nombre"] #introV6Titulo {
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre {
}
.introV6Stage[data-escena="nombre"] #introV6Titulo {
}
.introV6Stage[data-escena="nombre"] #introV6Titulo {
}
.introV6Stage[data-escena="nombre"] #introV6Titulo {
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre {
}
.introV6Stage[data-escena="nombre"] .introV6NombrePanel {
top: 32.45% !important;
right: 4.1% !important;
width: 41.15% !important;
height: auto !important;
}
.introV6Stage[data-escena="nombre"] .introV6InputNombre {
top: 54.7% !important;
right: 11.45% !important;
width: 30.05% !important;
height: 7% !important;
padding: 0.08% 1.08%0 1.2% !important;
font-size: clamp(17px, 1.8vw, 26px) !important;
line-height: 1.08 !important;
border-radius: 15px !important;
box-sizing: border-box !important;
}
.introV6Stage[data-escena="nombre"] #introV6Titulo {
top: 16.8% !important;
right: 1.9% !important;
width: 58.8% !important;
height: 27.6% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadBase {
opacity: 0 !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadWrap {
pointer-events: auto !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn {
display: block !important;
opacity: 1 !important;
pointer-events: auto !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifApoyo {
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura {
}
.introV6Stage[data-escena="dificultad"] .introV6DifDesafio {
}
.introV6Stage[data-escena="dificultad"] .introV6DifImg {
filter: drop-shadow(0 8px 10px rgba(76, 42, 12, 0.18)) !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn.seleccionada::after {
inset: 6.5% 8% !important;
}
.introV6Stage[data-escena="dificultad"]
.introV6DifBtn.bloqueada
.introV6DifImg {
filter: grayscale(1) saturate(0.15) brightness(0.82) opacity(0.82) !important;
}
.introV6Stage[data-escena="dificultad"] .introV6Candado {
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
height: 18.5% !important;
}
.introV6Stage[data-escena="dificultad"] #introV6Titulo {
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadWrap {
z-index: 32 !important;
overflow: visible !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn {
}
.introV6Stage[data-escena="dificultad"] .introV6DifApoyo {
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura {
}
.introV6Stage[data-escena="dificultad"] .introV6DifDesafio {
}
.introV6Stage[data-escena="dificultad"] .introV6DifImg {
filter: drop-shadow(0 7px 10px rgba(74, 43, 17, 0.18)) !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn.seleccionada::after {
}
.introV6Stage[data-escena="dificultad"] .introV6Candado {
top: 47.5% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
left: 16.5% !important;
top: 79.5% !important;
width: 67% !important;
object-fit: contain !important;
}
.introV6Stage[data-escena="dificultad"] .introV6FinalNombrePanel {
top: 27.4% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6NombreConfirmado {
font-size: clamp(22px, 2.1vw, 34px) !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadWrap {
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn {
}
.introV6Stage[data-escena="dificultad"] .introV6DifApoyo {
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura {
}
.introV6Stage[data-escena="dificultad"] .introV6DifDesafio {
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn.seleccionada::after {
}
.introV6Stage[data-escena="dificultad"] #introV6Titulo {
top: 14.6% !important;
width: 77.5% !important;
height: 16.4% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6FinalNombrePanel {
width: 39.5% !important;
height: 10.4% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6NombreConfirmado {
top: 27.8% !important;
width: 28.8% !important;
height: 5.6% !important;
font-size: clamp(24px, 2.35vw, 38px) !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadWrap {
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn {
}
.introV6Stage[data-escena="dificultad"] .introV6DifApoyo {
left: 0.8% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura {
}
.introV6Stage[data-escena="dificultad"] .introV6DifDesafio {
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn.seleccionada::after {
}
.introV6Stage[data-escena="dificultad"] .introV6Candado {
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadWrap {
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn {
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura {
}
.introV6Stage[data-escena="dificultad"] .introV6DifDesafio {
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn.seleccionada::after {
}
.introV6Stage[data-escena="dificultad"] .introV6Candado {
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadWrap {
top: 27.8% !important;
width: 95% !important;
height: 56.5% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn {
top: 3.8% !important;
width: 33.7% !important;
height: 87.5% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura {
left: 33.15% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifDesafio {
left: 66.3% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn.seleccionada::after {
}
.introV6Stage[data-escena="dificultad"] .introV6Candado {
top: 50.2% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
}
.introV6Stage[data-escena="dificultad"] .introV6Nav {
}
.introV6Stage[data-escena="dificultad"] .introV6Progreso {
right: 18.6% !important;
bottom: 5.7% !important;
width: 25.5% !important;
height: 4.6% !important;
z-index: 35 !important;
}
.introV6Stage[data-escena="dificultad"] .introV6Nav {
right: 5.5% !important;
bottom: 11.15% !important;
width: 39.4% !important;
height: 10.6% !important;
z-index: 35 !important;
}
.introV6Stage[data-escena="dificultad"] .introV6Anterior {
left: 0 !important;
width: 44.2% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6Siguiente {
right: 0 !important;
width: 49.4% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn.seleccionada::after {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55) !important;
}
.introV6Stage[data-escena="dificultad"] .introV6FinalNombrePanel {
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
top: 26% !important;
width: 40.5% !important;
height: 10.6% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6NombreConfirmado {
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
top: 27.7% !important;
width: 30.2% !important;
height: 5.9% !important;
font-size: clamp(24px, 2.45vw, 40px) !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadWrap {
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn {
top: 4.2% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn.seleccionada::after {
inset: 8.9% !important;
border-width: 4px !important;
border-radius: 22px !important;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) !important;
}
.introV6Stage[data-escena="dificultad"] .introV6Candado {
top: 50.6% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
z-index: 32 !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadBase {
display: none !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadWrap {
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn {
background: transparent !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura {
}
.introV6Stage[data-escena="dificultad"] .introV6DifDesafio {
}
.introV6Stage[data-escena="dificultad"] .introV6DifImg {
filter: drop-shadow(0 7px 8px rgba(42, 26, 12, 0.14));
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn:hover .introV6DifImg,
.introV6Stage[data-escena="dificultad"]
.introV6DifBtn:focus-visible
.introV6DifImg {
transform: scale(1.12) !important;
}
.introV6Stage[data-escena="dificultad"]
.introV6DifBtn.seleccionada
.introV6DifImg {
filter: drop-shadow(0 10px 14px rgba(59, 31, 5, 0.23));
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn.seleccionada::after,
.introV6Stage[data-escena="dificultad"] .introV6DifBtn::after {
display: none !important;
content: none !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn.bloqueada {
cursor: not-allowed !important;
}
.introV6Stage[data-escena="dificultad"] .introV6Candado,
.introV6Stage[data-escena="dificultad"] .introV6Candado::before {
display: none !important;
}
.introV6Stage[data-escena="dificultad"] .introV6CandadoEsquina {
z-index: 6 !important;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.18));
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadWrap {
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn {
position: absolute !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
transform: none !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifApoyo {
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura {
}
.introV6Stage[data-escena="dificultad"] .introV6DifDesafio {
}
.introV6Stage[data-escena="dificultad"] .introV6DifImg {
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 76% !important;
height: 76% !important;
object-fit: contain !important;
display: block !important;
user-select: none !important;
pointer-events: none !important;
transform: translate(-50%, -50%) scale(1) !important;
transform-origin: center center !important;
transition:
transform 0.22s ease,
filter 0.22s ease !important;
filter: drop-shadow(0 8px 10px rgba(38, 24, 10, 0.18)) !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn:hover .introV6DifImg,
.introV6Stage[data-escena="dificultad"]
.introV6DifBtn:focus-visible
.introV6DifImg {
transform: translate(-50%, -50%) scale(1.16) !important;
}
.introV6Stage[data-escena="dificultad"]
.introV6DifBtn.seleccionada
.introV6DifImg {
filter: drop-shadow(0 10px 14px rgba(59, 31, 5, 0.25)) !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn::after,
.introV6Stage[data-escena="dificultad"] .introV6DifBtn.seleccionada::after {
display: none !important;
content: none !important;
}
.introV6Stage[data-escena="dificultad"] .introV6CandadoEsquina {
position: absolute !important;
top: 7% !important;
right: 5% !important;
width: 18% !important;
pointer-events: none !important;
user-select: none !important;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.22)) !important;
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadWrap {
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn {
}
.introV6Stage[data-escena="dificultad"] .introV6DifApoyo {
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura {
}
.introV6Stage[data-escena="dificultad"] .introV6DifDesafio {
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadWrap {
width: 98.4% !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn {
width: 36.6% !important;
background: transparent url(imagenes/intro-v6/p7_marco_fijo_opt.webp) center
center/contain no-repeat !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifApoyo {
left: 1.8% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura {
left: 31.7% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifDesafio {
left: 61.6% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifImg {
width: 72.5% !important;
height: 72.5% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn.bloqueada,
.introV6Stage[data-escena="dificultad"]
.introV6DifBtn.bloqueada
.introV6DifImg {
opacity: 1 !important;
}
.introV6Stage[data-escena="dificultad"]
.introV6DifBtn.bloqueada
.introV6DifImg {
filter: grayscale(1) saturate(0.18) brightness(0.9) !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DificultadWrap {
top: 24% !important;
height: 61% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifBtn {
top: 0.8% !important;
height: 96.8% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
z-index: 12 !important;
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
}
.introV6Stage[data-escena="dificultad"] .introV6DifApoyo .introV6DifImg {
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura .introV6DifImg {
}
.introV6Stage[data-escena="dificultad"] .introV6DifDesafio .introV6DifImg {
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura .introV6DifImg {
}
.introV6Stage[data-escena="dificultad"] .introV6CandadoEsquina {
z-index: 9 !important;
filter: grayscale(1) saturate(0) brightness(1.02)
drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22)) !important;
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
}
.introV6Stage[data-escena="dificultad"] .introV6DifApoyo .introV6DifImg {
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura .introV6DifImg {
}
.introV6Stage[data-escena="dificultad"] .introV6DifDesafio .introV6DifImg {
}
.introV6Stage[data-escena="dificultad"] .introV6CandadoEsquina {
top: 4.8% !important;
right: 8% !important;
width: 17% !important;
height: auto !important;
}
.introV6Stage[data-escena="dificultad"] .introV6AvisoDificultad {
left: 12.5% !important;
top: 79.1% !important;
width: 40.2% !important;
height: auto !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifApoyo .introV6DifImg {
width: 70% !important;
height: 70% !important;
top: 48.7% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifAventura .introV6DifImg {
width: 74.1% !important;
height: 72.4% !important;
top: 48.6% !important;
}
.introV6Stage[data-escena="dificultad"] .introV6DifDesafio .introV6DifImg {
width: 71.2% !important;
height: 71.2% !important;
top: 48.7% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6FinalNombrePanel {
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
top: 43.6% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6Listo {
right: 3.1% !important;
top: 60% !important;
width: 43% !important;
height: 11.7% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6FinalNombrePanel {
right: 2.2% !important;
top: 35.5% !important;
width: 47.2% !important;
height: 20.4% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
left: 73.4% !important;
width: 30.8% !important;
height: 6.2% !important;
font-size: clamp(22px, 2.4vw, 34px) !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6Listo {
top: 58.5% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6FinalNombrePanel {
right: 0.8% !important;
top: 34.8% !important;
width: 55.5% !important;
height: 24.6% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
left: 71.4% !important;
top: 45% !important;
height: 7.4% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6Listo {
top: 67% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6FinalNombrePanel {
right: 0.3% !important;
top: 32.8% !important;
width: 66.5% !important;
height: 31.5% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
width: 41.5% !important;
height: 9.2% !important;
font-size: clamp(26px, 2.9vw, 42px) !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6Listo {
top: 65.2% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6FinalNombrePanel {
right: -2% !important;
top: 31.8% !important;
width: 77.5% !important;
height: 39% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
left: 69.8% !important;
top: 48% !important;
width: 49% !important;
height: 11% !important;
font-size: clamp(30px, 3.35vw, 50px) !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6Listo {
right: 4.7% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
left: 71.2% !important;
top: 46.6% !important;
width: 52% !important;
height: 11.8% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6FinalNombrePanel {
right: -4.2% !important;
top: 29.6% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
left: 72.8% !important;
top: 47% !important;
width: 54% !important;
height: 12.2% !important;
font-size: clamp(31px, 3.45vw, 52px) !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
left: 75.4% !important;
top: 44.6% !important;
font-size: clamp(32px, 3.6vw, 54px) !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
left: 78.1% !important;
top: 41.8% !important;
width: 59% !important;
height: 13.2% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6FinalNombrePanel {
right: -18.8% !important;
top: 27% !important;
width: 81.5% !important;
height: 41.5% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6FinalNombrePanel {
right: -11.8% !important;
top: 24.8% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
left: 73.2% !important;
width: 46% !important;
height: 10.8% !important;
font-size: clamp(18px, 2.05vw, 30px) !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6FinalNombrePanel {
right: -17.8% !important;
top: 20.8% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
left: 74.3% !important;
top: 41.7% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6FinalNombrePanel {
top: 29% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
top: 49.9% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6FinalNombrePanel {
right: -21.5% !important;
top: 23.8% !important;
width: 92% !important;
height: 47.5% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
left: 78% !important;
font-family: "Comic Sans MS", "Comic Sans", cursive !important;
font-size: clamp(14px, 1.55vw, 22px) !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6Listo {
right: 1.9% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
left: 76.8% !important;
font-family:
"Arial Rounded MT Bold", "Trebuchet MS", "Comic Sans MS", "Trebuchet MS", Arial, sans-serif !important;
font-size: clamp(15px, 1.72vw, 24px) !important;
letter-spacing: 0.03em !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6Listo {
right: 5.8% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
left: 76.2% !important;
right: auto !important;
top: 44.7% !important;
width: 34% !important;
height: 10.2% !important;
transform: translateX(-50%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
font-size: clamp(15px, 1.7vw, 24px) !important;
letter-spacing: 0.02em !important;
color: #5b3018 !important;
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.35),
0 2px 0 rgba(120, 70, 25, 0.1) !important;
line-height: 1 !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6Listo {
right: 3.2% !important;
top: 64.1% !important;
width: 42.4% !important;
height: 13.2% !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6NombreConfirmado {
font-family:
"Arial Rounded MT Bold", "Comic Sans MS", "Trebuchet MS", cursive !important;
font-weight: 900 !important;
-webkit-text-stroke: 0.35px rgba(88, 48, 24, 0.18) !important;
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.35),
0 2px 0 rgba(120, 70, 25, 0.14) !important;
}
.introV6Stage[data-escena="iniciemos"] .introV6Listo {
right: 2.6% !important;
}
.introV6CandadoNombre {
position: absolute;
top: 15%;
right: 15%;
width: clamp(28px, 3.2vw, 42px);
height: auto;
z-index: 12;
display: none;
pointer-events: none;
filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.28));
}
.introV6ModoLectura .introV6CandadoNombre {
display: block;
}
.introV6ModoLectura .introV6InputNombre[disabled],
.introV6ModoLectura .introV6InputNombre[readonly] {
cursor: not-allowed;
}
.introV6CandadoSoloLectura {
display: none;
}
.introV6ModoLectura .introV6CandadoSoloLectura {
display: block;
}
.introV6ModoLectura .introV6DifBtn.introV6BloqueadaLectura {
cursor: not-allowed;
}
.iconoJuegoV28 {
display: inline-block;
width: 1.45em;
height: 1.45em;
object-fit: contain;
flex: 0 0 auto;
vertical-align: middle;
user-select: none;
pointer-events: none;
filter: drop-shadow(0 2px 2px rgba(72, 38, 10, 0.12));
}
#pantallaInicio #botonComenzar,
#pantallaInicio #botonConfiguracionInicioV1 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
}
#pantallaInicio .iconoInicioV28 {
width: 32px;
height: 32px;
}
#panelJugadorV3 .iconoAccionPanelV3,
#panelJugadorV3 .iconoSistemaPanelV3 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
#panelJugadorV3 .iconoPanelV28 {
width: 31px;
height: 31px;
}
#panelJugadorV3 .statPanelJugadorV3 > span {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
#panelJugadorV3 .iconoStatV28 {
width: 25px;
height: 25px;
}
#botonMuteV3.iconizadoMuteV28 {
font-size: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 4px !important;
}
#botonMuteV3 .iconoMuteV28 {
width: 31px;
height: 31px;
}
.iconoMundoProgreso.iconizadoMundoV28,
.iconoCurso.iconizadoMundoV28 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
.iconoMundoV28 {
width: clamp(42px, 4vw, 58px);
height: clamp(42px, 4vw, 58px);
object-fit: contain;
filter: drop-shadow(0 3px 2px rgba(73, 42, 12, 0.14));
}
#mundosProgresoPerfil .iconoMundoV28 {
width: 42px;
height: 42px;
}
#pantallaPerfilJugador .datoPerfil > span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
#pantallaPerfilJugador .iconoPerfilStatV28 {
width: 38px;
height: 38px;
}
#pantallaPerfilJugador #botonPersonalizarPerfil,
#pantallaPerfilJugador #botonCerrarPerfil,
#botonEditarAvatarPerfilV3,
#botonTiendaPerfilV3 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.iconoAccionPerfilV28 {
width: 28px;
height: 28px;
}
.recursoTiendaV3 > span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.iconoRecursoV28 {
width: 30px;
height: 30px;
}
#botonIrEstudioAvatar,
#botonVolverTiendaAvatar,
#botonTiendaAvatarStudio,
#botonCerrarAvatarStudio {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
#botonExportarRespaldo,
#botonImportarRespaldo {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.iconoRespaldoV28 {
width: 27px;
height: 27px;
}
#cerrarConfiguracionV1.cerrarConfiguracionFantasiaV8 {
overflow: hidden !important;
padding: 1px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: transparent !important;
}
#cerrarConfiguracionV1 .iconoCerrarConfigV28 {
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}
#musicaOnOffV1.botonMusicaOnOffFantasiaV8 {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
#musicaOnOffV1.botonMusicaOnOffFantasiaV8 img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
#panelConfiguracionV1 .sliderFantasiaV8 {
height: 48px !important;
}
#panelConfiguracionV1 .sliderBaseFantasiaV8 {
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: fill !important;
}
#panelConfiguracionV1 .sliderRellenoClipFantasiaV8 {
left: 12% !important;
top: 29% !important;
width: 76% !important;
height: 42% !important;
border-radius: 999px !important;
}
#panelConfiguracionV1 .sliderRellenoFantasiaV8 {
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: fill !important;
}
#panelConfiguracionV1 .sliderPerillaFantasiaV8 {
width: 34px !important;
height: 34px !important;
object-fit: contain !important;
}
#panelConfiguracionV1 .tituloBloqueFantasiaV8 img {
width: 31px !important;
height: 31px !important;
object-fit: contain !important;
}
#panelConfiguracionV1 .iconoAccionFantasiaV8 {
width: 36px !important;
height: 36px !important;
object-fit: contain !important;
}
#panelConfiguracionV1 .avisoBloqueoFantasiaV8 img {
width: 20px !important;
height: 20px !important;
object-fit: contain !important;
}
.iconizadoBotonV28 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.iconizadoBotonV28 > .iconoJuegoV28 {
width: 28px;
height: 28px;
}
@media (max-width: 760px) {
.iconoMundoV28 {
width: 40px;
height: 40px;
}
#pantallaInicio .iconoInicioV28 {
width: 28px;
height: 28px;
}
}
#fondoConfiguracionV1 {
position: fixed !important;
inset: 0 !important;
z-index: 100000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px !important;
overflow: hidden !important;
background: rgba(58, 50, 73, 0.48) !important;
}
#fondoConfiguracionV1.ocultoConfiguracionV1 {
display: none !important;
}
.configV39 {
--marron: #64391f;
--marron2: #7b4b29;
--morado: #7823a9;
position: relative !important;
width: min(1210px, 96vw, calc(94vh * 1.7)) !important;
aspect-ratio: 1.7/1 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
font-family: Cambria, Georgia, serif !important;
color: var(--marron) !important;
}
.configV39__marco {
position: absolute !important;
z-index: 0 !important;
inset: 0 !important;
pointer-events: none !important;
user-select: none !important;
}
.configV39__cerrar {
position: absolute !important;
z-index: 12 !important;
top: 8.2% !important;
right: 8% !important;
width: 7.6% !important;
height: 10.6% !important;
min-width: 52px !important;
min-height: 52px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
transition:
box-shadow 0.13s ease,
transform 0.13s ease !important;
}
.configV39__cerrar:hover {
box-shadow:
0 0 0 4px rgba(255, 255, 255, 0.2),
0 0 16px rgba(255, 190, 69, 0.38) !important;
transform: scale(1.03) !important;
}
.configV39__cerrar:active {
transform: scale(0.96) !important;
}
.configV39__subtitulo {
position: absolute !important;
z-index: 4 !important;
left: 20% !important;
right: 20% !important;
top: 19.5% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: clamp(10px, 1.4vw, 20px) !important;
margin: 0 !important;
padding: 0 !important;
color: #73411f !important;
font:
700 clamp(13px, 1.35vw, 20px)/1.05 Cambria,
Georgia,
serif !important;
text-align: center !important;
white-space: nowrap !important;
}
.configV39__subtitulo::before,
.configV39__subtitulo::after {
content: "" !important;
width: clamp(48px, 6.6vw, 88px) !important;
height: 10px !important;
border-top: 2px solid rgba(205, 137, 57, 0.62) !important;
border-radius: 50% !important;
flex: 0 0 auto !important;
}
.configV39__seccion {
position: absolute !important;
z-index: 3 !important;
left: 8.2% !important;
right: 8.2% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent url(imagenes/interfaz/config-v39/seccion.webp)
center/100% 100%no-repeat !important;
box-shadow: none !important;
overflow: visible !important;
}
.configV39__volumen {
top: 24.5% !important;
height: 20.5% !important;
}
.configV39__musica {
top: 47% !important;
height: 20.5% !important;
}
.configV39__aventura {
top: 69.5% !important;
height: 19.5% !important;
}
.configV39__seccionTitulo {
position: absolute !important;
z-index: 4 !important;
left: 4.1% !important;
top: 10.2% !important;
margin: 0 !important;
padding: 0 !important;
color: #61361e !important;
font:
700 clamp(19px, 2vw, 29px)/1 Cambria,
Georgia,
serif !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
white-space: nowrap !important;
}
.configV39__filaVolumen {
position: absolute !important;
top: 35.5% !important;
grid-template-columns: clamp(80px, 8.8vw, 104px) minmax(0, 1fr) clamp(
68px,
7vw,
88px
) !important;
gap: clamp(14px, 1.7vw, 24px) !important;
}
.configV39__sound {
position: relative !important;
width: clamp(74px, 7.9vw, 96px) !important;
aspect-ratio: 1/1 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 18px !important;
background: transparent url(imagenes/interfaz/config-v39/sonido.webp)
center/contain no-repeat !important;
box-shadow: none !important;
cursor: pointer !important;
transition:
transform 0.13s ease,
filter 0.13s ease !important;
}
.configV39__sound:hover {
transform: translateY(-1px) scale(1.02) !important;
}
.configV39__sound[data-activa="no"] {
filter: grayscale(0.35) saturate(0.78) brightness(0.92) !important;
}
.configV39__sound[data-activa="no"]::after {
content: "" !important;
position: absolute !important;
left: 23% !important;
top: 48% !important;
width: 55% !important;
height: 6px !important;
border-radius: 999px !important;
background: #7a2a25 !important;
transform: rotate(-45deg) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}
.configV39__slider {
height: clamp(36px, 4vw, 50px) !important;
min-width: 0 !important;
}
.configV39__sliderBase {
position: absolute !important;
z-index: 1 !important;
pointer-events: none !important;
}
.configV39__sliderFill {
position: absolute !important;
z-index: 2 !important;
left: 10.6% !important;
top: 34% !important;
width: 0% !important;
height: 31% !important;
background: linear-gradient(
180deg,
#d760ff 0%,
#a62be1 35%,
#7815b7 72%,
#5b108d 100%
) !important;
box-shadow:
inset 0 1px 2px rgba(255, 255, 255, 0.72),
0 0 4px rgba(122, 34, 166, 0.22) !important;
pointer-events: none !important;
}
.configV39__sliderKnob {
position: absolute !important;
left: 10.6% !important;
width: clamp(33px, 3.9vw, 47px) !important;
height: clamp(33px, 3.9vw, 47px) !important;
object-fit: contain !important;
pointer-events: none !important;
filter: drop-shadow(0 2px 2px rgba(75, 39, 7, 0.22)) !important;
}
.configV39__sliderInput {
position: absolute !important;
z-index: 5 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
cursor: pointer !important;
}
.configV39__valorVolumen {
justify-self: center !important;
min-width: 62px !important;
color: var(--morado) !important;
font:
700 clamp(19px, 2vw, 28px)/1 Cambria,
Georgia,
serif !important;
text-align: center !important;
white-space: nowrap !important;
}
.configV39__musicGrid,
.configV39__actionGrid {
position: absolute !important;
left: 3.6% !important;
right: 3.6% !important;
gap: 2.3% !important;
}
.configV39__musicGrid {
top: 35.5% !important;
bottom: 5.5% !important;
}
.configV39__actionGrid {
top: 37% !important;
bottom: 5.5% !important;
}
.configV39__pista,
.configV39__action {
position: relative !important;
display: grid !important;
align-items: center !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent url(imagenes/interfaz/config-v39/boton-normal.webp)
center/100% 100%no-repeat !important;
color: #63391f !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
overflow: visible !important;
cursor: pointer !important;
transition:
transform 0.13s ease,
filter 0.13s ease !important;
}
.configV39__pista:hover,
.configV39__action:not(:disabled):hover {
transform: translateY(-2px) !important;
filter: brightness(1.03) !important;
}
.configV39__pista {
grid-template-columns: clamp(32px, 3.7vw, 44px) minmax(0, 1fr) !important;
gap: 7px !important;
padding: 6px 13px 6px 12px !important;
}
.configV39__pista--seleccionada {
background-image: url(imagenes/interfaz/config-v39/boton-seleccionado.webp) !important;
color: #fff8e6 !important;
text-shadow: 0 2px 0 rgba(74, 18, 103, 0.48) !important;
}
.configV39__pistaIcono {
width: clamp(32px, 3.6vw, 43px) !important;
height: clamp(32px, 3.6vw, 43px) !important;
}
.configV39__pistaNombre {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
height: 100% !important;
padding: 0 8px 0 0 !important;
font:
700 clamp(11px, 1.06vw, 14.5px)/1.04 Cambria,
Georgia,
serif !important;
white-space: nowrap !important;
}
.configV39__action {
grid-template-columns: clamp(34px, 3.8vw, 46px) minmax(0, 1fr) !important;
gap: 8px !important;
padding: 6px 16px 6px 12px !important;
}
.configV39__action > img {
width: clamp(32px, 3.6vw, 43px) !important;
height: clamp(32px, 3.6vw, 43px) !important;
object-fit: contain !important;
}
.configV39__action span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
height: 100% !important;
padding-right: clamp(28px, 3vw, 42px) !important;
font:
700 clamp(10.5px, 1.02vw, 14px)/1.04 Cambria,
Georgia,
serif !important;
white-space: nowrap !important;
}
.configV39__action:disabled {
cursor: not-allowed !important;
background-image: url(imagenes/interfaz/config-v39/boton-bloqueado.webp) !important;
color: #695b4c !important;
}
.configV39__action:disabled > img {
filter: grayscale(0.3) saturate(0.72) opacity(0.84) !important;
}
.configV39__action:disabled::after {
display: none !important;
content: none !important;
}
.configV39__aviso {
position: absolute !important;
z-index: 4 !important;
left: 14% !important;
right: 14% !important;
bottom: 7% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
color: #6e4022 !important;
font:
700 clamp(10px, 1vw, 13px)/1.08 Cambria,
Georgia,
serif !important;
text-align: center !important;
}
.configV39__aviso::before,
.configV39__aviso::after {
content: "" !important;
width: clamp(38px, 4.8vw, 68px) !important;
border-top: 2px solid rgba(190, 124, 54, 0.55) !important;
flex: 0 0 auto !important;
}
.configV39__aviso img {
width: clamp(13px, 1.4vw, 18px) !important;
height: clamp(13px, 1.4vw, 18px) !important;
object-fit: contain !important;
}
#panelConfiguracionV1[data-contexto="menu"] .configV39__aviso {
display: none !important;
}
.configV39__sr {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
@media (max-width: 900px) {
.configV39 {
width: min(97vw, calc(92vh * 1.64)) !important;
aspect-ratio: 1.64/1 !important;
}
.configV39__subtitulo {
left: 18% !important;
right: 18% !important;
font-size: 12px !important;
}
.configV39__seccionTitulo {
font-size: 18px !important;
}
.configV39__pistaNombre,
.configV39__action span {
font-size: 10.5px !important;
}
.configV39__aviso {
font-size: 8.5px !important;
}
}
.configV39 {
width: min(1280px, 96vw, calc(94vh * 1.52)) !important;
aspect-ratio: 1.52/1 !important;
}
.configV39__marco {
width: 100% !important;
height: 100% !important;
object-fit: fill !important;
}
.configV39__cerrar {
top: 6.2% !important;
right: 5.9% !important;
width: 8.2% !important;
height: auto !important;
aspect-ratio: 1/1 !important;
min-width: 48px !important;
min-height: 48px !important;
max-width: 84px !important;
max-height: 84px !important;
background: transparent url(imagenes/interfaz/config-v39/cerrar.png)
center/contain no-repeat !important;
box-shadow: none !important;
border-radius: 50% !important;
z-index: 20 !important;
cursor: pointer !important;
}
.configV39__cerrar:hover {
box-shadow: none !important;
transform: scale(1.04) !important;
filter: brightness(1.06) drop-shadow(0 2px 5px rgba(88, 42, 9, 0.2)) !important;
}
.configV39__cerrar:active {
transform: scale(0.97) !important;
}
.configV39__subtitulo {
left: 24% !important;
right: 24% !important;
top: 19.1% !important;
font-size: clamp(13px, 1.38vw, 20px) !important;
gap: clamp(6px, 1.1vw, 15px) !important;
}
.configV39__subtitulo::before,
.configV39__subtitulo::after {
width: clamp(25px, 3.7vw, 52px) !important;
}
.configV39__seccion {
left: 8.6% !important;
right: 8.6% !important;
border: 2px solid rgba(194, 139, 79, 0.46) !important;
border-radius: clamp(19px, 2vw, 29px) !important;
background: linear-gradient(
100deg,
rgba(255, 248, 228, 0.96),
rgba(255, 253, 238, 0.96),
rgba(255, 248, 228, 0.96)
) !important;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.65) !important;
}
.configV39__volumen {
top: 24.4% !important;
height: 19.8% !important;
}
.configV39__musica {
top: 46.1% !important;
}
.configV39__aventura {
top: 68.7% !important;
height: 17.5% !important;
}
.configV39__seccionTitulo {
left: 3.4% !important;
top: 9.5% !important;
font-size: clamp(19px, 2.05vw, 30px) !important;
line-height: 1.06 !important;
}
.configV39__filaVolumen {
left: 2.9% !important;
right: 3.1% !important;
bottom: 7% !important;
grid-template-columns: clamp(73px, 7.3vw, 94px) minmax(0, 1fr) clamp(
69px,
6.6vw,
89px
) !important;
gap: clamp(10px, 1.5vw, 20px) !important;
}
.configV39__sound {
width: clamp(74px, 7.1vw, 94px) !important;
height: auto !important;
aspect-ratio: 564/522 !important;
background-size: contain !important;
}
.configV39__slider {
height: clamp(39px, 4vw, 50px) !important;
}
.configV39__sliderKnob {
width: clamp(35px, 3.7vw, 46px) !important;
height: clamp(35px, 3.7vw, 46px) !important;
}
.configV39__valorVolumen {
font-size: clamp(20px, 2.15vw, 30px) !important;
min-width: 65px !important;
}
.configV39__musicGrid,
.configV39__actionGrid {
left: 2.8% !important;
right: 2.8% !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
column-gap: 2.2% !important;
}
.configV39__musicGrid {
top: 34.5% !important;
bottom: 6.2% !important;
}
.configV39__actionGrid {
top: 36% !important;
bottom: 6% !important;
}
.configV39__pista,
.configV39__action {
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
grid-template-columns: clamp(40px, 4.15vw, 54px) minmax(0, 1fr) !important;
gap: clamp(5px, 0.6vw, 9px) !important;
padding: 5px clamp(12px, 1.3vw, 18px) 5px clamp(9px, 1vw, 14px) !important;
background-size: 100% 100% !important;
background-position: center !important;
box-shadow: none !important;
}
.configV39__pistaIcono,
.configV39__action > img {
width: clamp(39px, 4.05vw, 54px) !important;
height: clamp(39px, 4.05vw, 54px) !important;
}
.configV39__pistaNombre,
.configV39__action span {
font-size: clamp(11.5px, 1.07vw, 15px) !important;
font-weight: 700 !important;
line-height: 1.08 !important;
}
.configV39__pistaNombre {
padding: 0 5px 0 0 !important;
}
.configV39__action span {
padding: 0 20px 0 0 !important;
}
.configV39__aviso {
max-width: 76% !important;
font-size: clamp(9px, 0.88vw, 12px) !important;
line-height: 1.15 !important;
gap: 5px !important;
}
.configV39__aviso::before,
.configV39__aviso::after {
width: clamp(12px, 2.1vw, 28px) !important;
}
.configV39__aviso img {
width: 15px !important;
height: 16px !important;
flex: 0 0 auto !important;
}
@media (max-width: 900px) {
.configV39 {
width: min(97vw, calc(94vh * 1.52)) !important;
aspect-ratio: 1.52/1 !important;
}
.configV39__pistaNombre,
.configV39__action span {
font-size: clamp(9px, 1.05vw, 13px) !important;
}
}
.configV39__cerrar {
top: 5.8% !important;
right: 4.1% !important;
width: 9.2% !important;
min-width: 62px !important;
min-height: 62px !important;
max-width: 122px !important;
max-height: 122px !important;
}
.configV39__aviso {
gap: clamp(7px, 0.8vw, 11px) !important;
font-size: clamp(10.5px, 1.02vw, 14.5px) !important;
white-space: nowrap !important;
z-index: 9 !important;
}
.configV39__aviso::before,
.configV39__aviso::after {
width: clamp(40px, 5vw, 72px) !important;
border-top: 2px solid rgba(191, 124, 52, 0.5) !important;
}
.configV39__aviso img {
width: clamp(16px, 1.5vw, 21px) !important;
height: clamp(16px, 1.5vw, 21px) !important;
}
@media (max-width: 900px) {
.configV39__aviso {
left: 10% !important;
right: 10% !important;
bottom: 6.8% !important;
font-size: 9px !important;
}
}
.configV39__filaVolumen {
grid-template-columns: clamp(64px, 6.8vw, 84px) minmax(0, 1fr) clamp(
70px,
7vw,
92px
) !important;
column-gap: clamp(12px, 1.5vw, 20px) !important;
}
.configV39__sound {
width: clamp(66px, 6.9vw, 86px) !important;
height: clamp(66px, 6.9vw, 86px) !important;
}
.configV39__aventura {
}
.configV39__actionGrid {
}
.configV39__action {
aspect-ratio: 3.18/1 !important;
}
.configV39__aviso {
left: 13.5% !important;
right: 13.5% !important;
bottom: 9.2% !important;
gap: clamp(6px, 0.7vw, 10px) !important;
font-size: clamp(9.8px, 0.98vw, 13.2px) !important;
}
.configV39__aviso::before,
.configV39__aviso::after {
width: clamp(32px, 4.2vw, 58px) !important;
}
.configV39__aviso img {
width: clamp(13px, 1.25vw, 17px) !important;
height: clamp(13px, 1.25vw, 17px) !important;
}
@media (max-width: 900px) {
.configV39__sound {
width: 62px !important;
height: 62px !important;
}
.configV39__aventura {
top: 67.6% !important;
height: 19.1% !important;
}
.configV39__aviso {
bottom: 9.6% !important;
font-size: 8.8px !important;
}
}
.configV39__filaVolumen {
grid-template-columns: clamp(58px, 6.2vw, 78px) minmax(0, 1fr) clamp(
72px,
7.2vw,
92px
) !important;
column-gap: clamp(11px, 1.35vw, 18px) !important;
}
.configV39__sound {
width: clamp(60px, 6.25vw, 78px) !important;
height: clamp(60px, 6.25vw, 78px) !important;
}
.configV39__slider {
width: 95.5% !important;
}
.configV39__sliderBase {
transform: scaleX(0.975) !important;
transform-origin: center center !important;
}
.configV39__sliderFill {
left: 9.1% !important;
width: auto !important;
}
.configV39__sliderKnob {
transform: translate(-50%, -50%) scale(0.97) !important;
}
.configV39__aventura {
top: 67.2% !important;
height: 20.1% !important;
}
.configV39__actionGrid {
top: 28.5% !important;
bottom: 6.2% !important;
}
.configV39__action {
aspect-ratio: 3.02/1 !important;
padding: 8px clamp(15px, 1.55vw, 21px) 8px clamp(10px, 1vw, 14px) !important;
}
.configV39__action > img {
width: clamp(45px, 4.7vw, 60px) !important;
height: clamp(45px, 4.7vw, 60px) !important;
}
.configV39__action span {
font-size: clamp(12px, 1.12vw, 15.8px) !important;
line-height: 1.08 !important;
}
@media (max-width: 900px) {
.configV39__sound {
width: 58px !important;
height: 58px !important;
}
.configV39__aventura {
height: 20.2% !important;
}
.configV39__actionGrid {
top: 29% !important;
bottom: 6.4% !important;
}
}
.configV39__cerrar {
top: 7% !important;
right: 4.2% !important;
}
.configV39__subtitulo {
top: 21% !important;
left: 22.5% !important;
right: 22.5% !important;
}
.configV39__seccion {
background: linear-gradient(
90deg,
rgba(255, 248, 225, 0.72),
rgba(255, 252, 235, 0.78),
rgba(255, 248, 225, 0.72)
) !important;
border: 2px solid rgba(196, 136, 65, 0.36) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 1px 2px rgba(126, 76, 30, 0.04) !important;
}
.configV39__volumen {
top: 25.3% !important;
}
.configV39__filaVolumen {
bottom: 9.5% !important;
left: 3.4% !important;
right: 3.4% !important;
grid-template-columns: clamp(54px, 5.9vw, 72px) minmax(0, 1fr) clamp(
64px,
6.4vw,
84px
) !important;
column-gap: clamp(10px, 1.2vw, 16px) !important;
}
.configV39__sound {
width: clamp(56px, 5.85vw, 74px) !important;
height: clamp(56px, 5.85vw, 74px) !important;
}
.configV39__slider {
width: 91.5% !important;
height: clamp(34px, 3.7vw, 46px) !important;
}
.configV39__sliderBase {
transform: scaleX(0.95) !important;
}
.configV39__sliderKnob {
width: clamp(35px, 3.8vw, 47px) !important;
height: clamp(35px, 3.8vw, 47px) !important;
transform: translate(-50%, -50%) scale(0.94) !important;
}
.configV39__valorVolumen {
font-size: clamp(18px, 1.95vw, 26px) !important;
min-width: 58px !important;
}
.configV39__musica {
top: 45.3% !important;
}
.configV39__aventura {
top: 66.6% !important;
height: 19.6% !important;
}
.configV39__aventura .configV39__seccionTitulo {
font-size: clamp(18px, 1.82vw, 26px) !important;
top: 7.8% !important;
}
.configV39__actionGrid {
top: 30% !important;
}
.configV39__action span {
font-size: clamp(11px, 1.02vw, 14.4px) !important;
}
.configV39__pistaNombre {
font-size: clamp(11.2px, 1.02vw, 14.6px) !important;
}
.configV39__aviso {
bottom: 8% !important;
}
@media (max-width: 900px) {
.configV39__cerrar {
top: 7.3% !important;
}
.configV39__subtitulo {
top: 21.4% !important;
left: 20.5% !important;
right: 20.5% !important;
}
.configV39__volumen {
height: 18.6% !important;
}
.configV39__sound {
width: 54px !important;
height: 54px !important;
}
.configV39__slider {
width: 91% !important;
}
.configV39__aventura .configV39__seccionTitulo {
font-size: 17px !important;
}
}
.configV39__seccionTitulo {
left: 3% !important;
top: 9.2% !important;
font-size: clamp(17px, 1.72vw, 24px) !important;
line-height: 1 !important;
}
.configV39__aventura .configV39__seccionTitulo,
.configV39__musica .configV39__seccionTitulo,
.configV39__volumen .configV39__seccionTitulo {
font-size: clamp(17px, 1.72vw, 24px) !important;
top: 9.2% !important;
}
.configV39__volumen {
height: 18% !important;
}
.configV39__filaVolumen {
top: 34.5% !important;
bottom: 10% !important;
left: 3.6% !important;
right: 3.6% !important;
grid-template-columns: clamp(48px, 5.2vw, 66px) minmax(0, 1fr) clamp(
60px,
6vw,
80px
) !important;
column-gap: clamp(10px, 1.1vw, 14px) !important;
}
.configV39__sound {
width: clamp(50px, 5.25vw, 68px) !important;
height: clamp(50px, 5.25vw, 68px) !important;
}
.configV39__slider {
width: 100% !important;
height: clamp(32px, 3.45vw, 42px) !important;
justify-self: stretch !important;
}
.configV39__sliderFill {
height: 29% !important;
}
.configV39__sliderKnob {
width: clamp(32px, 3.45vw, 42px) !important;
height: clamp(32px, 3.45vw, 42px) !important;
}
.configV39__valorVolumen {
font-size: clamp(17px, 1.75vw, 24px) !important;
min-width: 54px !important;
}
.configV39__pista {
padding: 7px clamp(14px, 1.35vw, 18px) 7px clamp(9px, 0.9vw, 12px) !important;
}
.configV39__pistaIcono {
width: clamp(39px, 3.95vw, 50px) !important;
height: clamp(39px, 3.95vw, 50px) !important;
}
.configV39__pistaNombre {
line-height: 1.02 !important;
white-space: normal !important;
}
.configV39__actionGrid {
top: 29.8% !important;
bottom: 7.4% !important;
}
.configV39__action {
aspect-ratio: 3.1/1 !important;
padding: 7px clamp(14px, 1.35vw, 18px) 7px clamp(9px, 0.9vw, 12px) !important;
grid-template-columns: clamp(40px, 4vw, 52px) minmax(0, 1fr) !important;
}
.configV39__action > img {
width: clamp(39px, 3.95vw, 50px) !important;
height: clamp(39px, 3.95vw, 50px) !important;
}
.configV39__action span {
font-size: clamp(9.8px, 0.9vw, 13px) !important;
line-height: 1 !important;
padding-right: clamp(16px, 1.45vw, 22px) !important;
white-space: normal !important;
}
.configV39__subtitulo {
top: 20.8% !important;
}
.configV39__aviso {
bottom: 8.1% !important;
}
@media (max-width: 900px) {
.configV39__slider {
height: 31px !important;
}
}
.configV39__seccionTitulo,
.configV39__aventura .configV39__seccionTitulo,
.configV39__musica .configV39__seccionTitulo,
.configV39__volumen .configV39__seccionTitulo {
left: 3.1% !important;
top: 8.9% !important;
font-size: clamp(17.5px, 1.75vw, 24px) !important;
}
.configV39__filaVolumen {
grid-template-columns: clamp(48px, 5.15vw, 64px) minmax(0, 1fr) clamp(
62px,
6.1vw,
80px
) !important;
}
.configV39__sound {
width: clamp(47px, 5vw, 64px) !important;
height: clamp(47px, 5vw, 64px) !important;
}
.configV39__slider {
height: clamp(31px, 3.35vw, 40px) !important;
}
.configV39__sliderFill {
left: 10.35% !important;
top: 35.4% !important;
height: 28.6% !important;
}
.configV39__sliderKnob {
width: clamp(31px, 3.35vw, 40px) !important;
height: clamp(31px, 3.35vw, 40px) !important;
}
.configV39__valorVolumen {
font-size: clamp(18px, 1.82vw, 24px) !important;
}
.configV39__seccion {
background: linear-gradient(
90deg,
rgba(255, 248, 225, 0.69),
rgba(255, 252, 235, 0.75),
rgba(255, 248, 225, 0.69)
) !important;
}
.configV39__pista {
grid-template-columns: clamp(38px, 3.8vw, 49px) minmax(0, 1fr) !important;
gap: clamp(6px, 0.65vw, 9px) !important;
padding: 7px clamp(14px, 1.3vw, 18px) 7px clamp(10px, 0.95vw, 13px) !important;
}
.configV39__pistaIcono {
width: clamp(37px, 3.7vw, 47px) !important;
height: clamp(37px, 3.7vw, 47px) !important;
transform: translateX(1px) !important;
}
.configV39__pistaNombre {
font-size: clamp(10.2px, 0.93vw, 13.3px) !important;
}
.configV39__aventura {
top: 66.55% !important;
height: 19.75% !important;
}
.configV39__actionGrid {
align-items: center !important;
}
.configV39__action {
aspect-ratio: 2.96/1 !important;
grid-template-columns: clamp(38px, 3.8vw, 49px) minmax(0, 1fr) !important;
gap: clamp(6px, 0.65vw, 9px) !important;
padding: 7px clamp(13px, 1.2vw, 17px) 7px clamp(10px, 0.95vw, 13px) !important;
}
.configV39__action > img {
width: clamp(37px, 3.72vw, 47px) !important;
height: clamp(37px, 3.72vw, 47px) !important;
transform: translateX(1px) !important;
}
.configV39__action span {
font-size: clamp(10.2px, 0.94vw, 13.4px) !important;
padding-right: clamp(12px, 1.15vw, 18px) !important;
}
.configV39__aviso {
font-size: clamp(10.1px, 0.99vw, 13.6px) !important;
gap: clamp(7px, 0.75vw, 10px) !important;
}
.configV39__aviso img {
width: clamp(14px, 1.3vw, 18px) !important;
height: clamp(14px, 1.3vw, 18px) !important;
}
@media (max-width: 900px) {
.configV39__seccionTitulo,
.configV39__aventura .configV39__seccionTitulo,
.configV39__musica .configV39__seccionTitulo,
.configV39__volumen .configV39__seccionTitulo {
font-size: 16px !important;
}
.configV39__sound {
width: 46px !important;
height: 46px !important;
}
.configV39__pistaNombre,
.configV39__action span {
font-size: 9px !important;
}
}
.configV39__valorVolumen {
display: none !important;
}
.configV39__filaVolumen {
left: 4% !important;
right: 4% !important;
}
.configV39__slider {
height: clamp(31px, 3.3vw, 40px) !important;
}
.configV39__sliderFill {
left: 9.8% !important;
}
.configV39__sliderKnob {
width: clamp(31px, 3.3vw, 40px) !important;
height: clamp(31px, 3.3vw, 40px) !important;
}
.configV39__seccionTitulo,
.configV39__aventura .configV39__seccionTitulo,
.configV39__musica .configV39__seccionTitulo,
.configV39__volumen .configV39__seccionTitulo {
}
.configV39__actionGrid {
top: 28.9% !important;
bottom: 7.3% !important;
}
.configV39__aviso {
left: 12.8% !important;
right: 12.8% !important;
bottom: 10.8% !important;
font-size: clamp(10px, 0.98vw, 13.4px) !important;
line-height: 1.06 !important;
z-index: 10 !important;
}
.configV39__aviso img {
width: clamp(14px, 1.25vw, 18px) !important;
height: clamp(14px, 1.25vw, 18px) !important;
}
.configV39__aviso::before,
.configV39__aviso::after {
width: clamp(30px, 4vw, 54px) !important;
}
@media (max-width: 900px) {
.configV39__filaVolumen {
grid-template-columns: 44px minmax(0, 1fr) !important;
}
.configV39__slider {
width: 92% !important;
height: 30px !important;
}
.configV39__seccionTitulo,
.configV39__aventura .configV39__seccionTitulo,
.configV39__musica .configV39__seccionTitulo,
.configV39__volumen .configV39__seccionTitulo {
top: 7.6% !important;
}
.configV39__aviso {
bottom: 10.9% !important;
font-size: 8.9px !important;
}
}
.configV39__seccionTitulo,
.configV39__aventura .configV39__seccionTitulo,
.configV39__musica .configV39__seccionTitulo,
.configV39__volumen .configV39__seccionTitulo {
top: 6.3% !important;
left: 3.05% !important;
font-size: clamp(15.8px, 1.55vw, 21.5px) !important;
line-height: 1 !important;
}
.configV39__filaVolumen {
}
.configV39__slider {
}
.configV39__sliderFill {
}
@media (max-width: 900px) {
.configV39__seccionTitulo,
.configV39__aventura .configV39__seccionTitulo,
.configV39__musica .configV39__seccionTitulo,
.configV39__volumen .configV39__seccionTitulo {
top: 6.6% !important;
font-size: 15px !important;
}
.configV39__slider {
width: 93% !important;
}
}
.configV39__filaVolumen {
grid-template-columns: clamp(46px, 4.9vw, 62px) minmax(0, 1fr) !important;
column-gap: clamp(12px, 1.3vw, 18px) !important;
}
.configV39__sound {
width: clamp(46px, 4.9vw, 62px) !important;
height: clamp(46px, 4.9vw, 62px) !important;
transform: translateY(2px) !important;
}
.configV39__slider {
width: 94.4% !important;
height: clamp(31px, 3.25vw, 39px) !important;
}
.configV39__sliderBase {
transform: none !important;
}
.configV39__sliderFill {
left: 10.55% !important;
}
.configV39__sliderKnob {
width: clamp(30px, 3.2vw, 39px) !important;
height: clamp(30px, 3.2vw, 39px) !important;
}
@media (max-width: 900px) {
.configV39__filaVolumen {
top: 36.6% !important;
}
.configV39__sound {
width: 44px !important;
height: 44px !important;
transform: translateY(1px) !important;
}
.configV39__slider {
height: 29px !important;
}
.configV39__sliderFill {
top: 31.5% !important;
height: 37% !important;
}
}
.configV39__filaVolumen {
top: 33.2% !important;
bottom: 13.2% !important;
left: 4.1% !important;
right: 4.1% !important;
}
.configV39__sliderBase,
.configV39__sliderFill,
.configV39__sliderKnob {
top: auto !important;
}
.configV39__sliderFill {
top: 31.8% !important;
height: 36.2% !important;
}
.configV39__musica {
top: 44.3% !important;
height: 21% !important;
}
.configV39__aventura {
height: 19.25% !important;
}
.configV39__actionGrid {
}
.configV39__aviso {
bottom: 9.3% !important;
}
@media (max-width: 900px) {
.configV39__filaVolumen {
top: 33.5% !important;
bottom: 13.5% !important;
}
.configV39__musica {
top: 44.4% !important;
}
.configV39__aventura {
top: 67.3% !important;
height: 19.4% !important;
}
.configV39__aviso {
bottom: 9.5% !important;
}
}
.configV39__musicGrid,
.configV39__actionGrid {
}
.configV39__musicGrid {
}
.configV39__pista {
aspect-ratio: 2.92/1 !important;
gap: clamp(6px, 0.7vw, 10px) !important;
padding: 7px clamp(13px, 1.25vw, 18px) 7px clamp(10px, 1vw, 14px) !important;
}
.configV39__pistaIcono {
width: clamp(37px, 3.7vw, 48px) !important;
height: clamp(37px, 3.7vw, 48px) !important;
}
.configV39__pistaNombre {
font-size: clamp(10.3px, 0.95vw, 13.6px) !important;
}
.configV39__actionGrid {
}
.configV39__action {
aspect-ratio: 2.9/1 !important;
gap: clamp(6px, 0.7vw, 10px) !important;
padding: 7px clamp(13px, 1.25vw, 18px) 7px clamp(10px, 1vw, 14px) !important;
}
.configV39__action > img {
width: clamp(37px, 3.7vw, 48px) !important;
height: clamp(37px, 3.7vw, 48px) !important;
}
.configV39__action span {
font-size: clamp(10.2px, 0.94vw, 13.5px) !important;
line-height: 1.04 !important;
padding-right: clamp(12px, 1.1vw, 17px) !important;
}
.configV39__musica .configV39__seccionTitulo,
.configV39__aventura .configV39__seccionTitulo {
}
@media (max-width: 900px) {
.configV39__musicGrid,
.configV39__actionGrid {
left: 2.4% !important;
right: 2.4% !important;
gap: 2% !important;
}
.configV39__pista,
.configV39__action {
aspect-ratio: 2.92/1 !important;
}
}
.configV39__volumen {
height: 18.1% !important;
}
.configV39__musica {
height: 20.95% !important;
}
.configV39__aventura {
top: 66.85% !important;
height: 19.35% !important;
}
.configV39__musicGrid,
.configV39__actionGrid {
left: 1.85% !important;
right: 1.85% !important;
gap: 1.75% !important;
}
.configV39__musicGrid {
top: 31.1% !important;
bottom: 5.2% !important;
}
.configV39__pista {
aspect-ratio: 2.78/1 !important;
grid-template-columns: clamp(39px, 3.9vw, 50px) minmax(0, 1fr) !important;
gap: clamp(6px, 0.68vw, 10px) !important;
padding: 7px clamp(12px, 1.15vw, 17px) 7px clamp(10px, 0.92vw, 13px) !important;
}
.configV39__pistaIcono {
width: clamp(37px, 3.68vw, 47px) !important;
height: clamp(37px, 3.68vw, 47px) !important;
}
.configV39__pistaNombre {
font-size: clamp(10.15px, 0.93vw, 13.3px) !important;
}
.configV39__actionGrid {
top: 27.4% !important;
bottom: 5.8% !important;
}
.configV39__action {
aspect-ratio: 2.78/1 !important;
grid-template-columns: clamp(39px, 3.9vw, 50px) minmax(0, 1fr) !important;
gap: clamp(6px, 0.68vw, 10px) !important;
padding: 7px clamp(12px, 1.15vw, 17px) 7px clamp(10px, 0.92vw, 13px) !important;
}
.configV39__action > img {
width: clamp(37px, 3.68vw, 47px) !important;
height: clamp(37px, 3.68vw, 47px) !important;
}
.configV39__action span {
font-size: clamp(10.05px, 0.92vw, 13.2px) !important;
padding-right: clamp(11px, 1.02vw, 16px) !important;
}
.configV39__musica .configV39__seccionTitulo,
.configV39__aventura .configV39__seccionTitulo {
top: 6.5% !important;
}
.configV39__aviso {
bottom: 9% !important;
}
@media (max-width: 900px) {
.configV39__musica {
top: 44.7% !important;
}
.configV39__aventura {
top: 67% !important;
height: 19.45% !important;
}
.configV39__musicGrid,
.configV39__actionGrid {
left: 2% !important;
right: 2% !important;
gap: 1.8% !important;
}
.configV39__pista,
.configV39__action {
aspect-ratio: 2.82/1 !important;
}
}
.configV39__slider {
height: clamp(34px, 3.55vw, 44px) !important;
}
.configV39__sliderFill {
}
.configV39__sliderKnob {
width: clamp(34px, 3.55vw, 44px) !important;
height: clamp(34px, 3.55vw, 44px) !important;
}
.configV39__musica .configV39__seccionTitulo {
min-width: 0 !important;
}
.configV39__pistaIcono {
width: clamp(39px, 3.9vw, 50px) !important;
height: clamp(39px, 3.9vw, 50px) !important;
object-fit: contain !important;
transform: none !important;
}
.configV39__pista {
grid-template-columns: clamp(40px, 4vw, 52px) minmax(0, 1fr) !important;
gap: clamp(7px, 0.72vw, 10px) !important;
}
.configV39__pistaNombre {
font-size: clamp(10.1px, 0.92vw, 13.2px) !important;
line-height: 1.03 !important;
}
@media (max-width: 900px) {
.configV39__slider {
width: 94% !important;
height: 32px !important;
}
.configV39__sliderFill {
top: 30.8% !important;
height: 38% !important;
}
.configV39__sliderKnob,
.configV39__pistaIcono {
width: 32px !important;
height: 32px !important;
}
}
.configV39__volumen {
top: 25% !important;
}
.configV39__filaVolumen {
top: 31.8% !important;
left: 3.8% !important;
right: 3.8% !important;
grid-template-columns: clamp(48px, 5vw, 64px) minmax(0, 1fr) !important;
column-gap: clamp(12px, 1.25vw, 18px) !important;
}
.configV39__sound {
width: clamp(48px, 5vw, 64px) !important;
height: clamp(48px, 5vw, 64px) !important;
}
.configV39__slider {
width: 95.2% !important;
height: clamp(44px, 4.2vw, 56px) !important;
}
.configV39__sliderFill {
left: 10.2% !important;
top: 26.4% !important;
height: 47.2% !important;
}
.configV39__sliderKnob {
width: clamp(38px, 3.8vw, 48px) !important;
height: clamp(38px, 3.8vw, 48px) !important;
}
.configV39__musica {
}
.configV39__aventura {
}
.configV39__musicGrid,
.configV39__actionGrid {
left: 1.65% !important;
right: 1.65% !important;
}
.configV39__musicGrid {
}
.configV39__actionGrid {
bottom: 4.3% !important;
}
.configV39__pista,
.configV39__action {
aspect-ratio: 2.58/1 !important;
grid-template-columns: clamp(42px, 4.15vw, 54px) minmax(0, 1fr) !important;
gap: clamp(7px, 0.78vw, 11px) !important;
padding: 8px clamp(13px, 1.18vw, 18px) 8px clamp(10px, 0.95vw, 14px) !important;
}
.configV39__pistaIcono,
.configV39__action > img {
width: clamp(40px, 4vw, 51px) !important;
height: clamp(40px, 4vw, 51px) !important;
}
.configV39__pistaNombre,
.configV39__action span {
font-size: clamp(10.6px, 0.97vw, 13.8px) !important;
line-height: 1.04 !important;
}
.configV39__action span {
padding-right: clamp(11px, 1vw, 16px) !important;
}
.configV39__musica .configV39__seccionTitulo,
.configV39__aventura .configV39__seccionTitulo {
top: 6% !important;
}
.configV39__aviso {
bottom: 8.9% !important;
}
@media (max-width: 900px) {
.configV39__slider {
width: 95% !important;
}
.configV39__sliderFill {
top: 26.5% !important;
height: 47% !important;
}
.configV39__sliderKnob {
width: 34px !important;
height: 34px !important;
}
.configV39__musicGrid,
.configV39__actionGrid {
left: 1.9% !important;
right: 1.9% !important;
gap: 1.6% !important;
}
.configV39__pista,
.configV39__action {
aspect-ratio: 2.64/1 !important;
}
}
.configV39__musica {
top: 44.45% !important;
height: 21.8% !important;
}
.configV39__aventura {
top: 67.15% !important;
height: 20.15% !important;
}
.configV39__musicGrid,
.configV39__actionGrid {
gap: 1.25% !important;
}
.configV39__musicGrid {
top: 27.8% !important;
bottom: 3.8% !important;
}
.configV39__actionGrid {
top: 24.2% !important;
}
.configV39__pista,
.configV39__action {
aspect-ratio: 2.42/1 !important;
grid-template-columns: clamp(39px, 3.7vw, 50px) minmax(0, 1fr) !important;
gap: clamp(7px, 0.75vw, 11px) !important;
padding: 8px clamp(12px, 1.05vw, 16px) 8px clamp(9px, 0.85vw, 12px) !important;
}
.configV39__pistaIcono {
width: clamp(35px, 3.4vw, 45px) !important;
height: clamp(35px, 3.4vw, 45px) !important;
justify-self: center !important;
}
.configV39__pistaNombre {
font-size: clamp(10.7px, 0.98vw, 13.9px) !important;
line-height: 1.04 !important;
padding-right: 2px !important;
text-align: center !important;
}
.configV39__action > img {
width: clamp(36px, 3.45vw, 46px) !important;
height: clamp(36px, 3.45vw, 46px) !important;
justify-self: center !important;
}
.configV39__action span {
font-size: clamp(10.3px, 0.95vw, 13.5px) !important;
line-height: 1.03 !important;
padding-right: clamp(8px, 0.75vw, 12px) !important;
text-align: center !important;
}
.configV39__musica .configV39__seccionTitulo,
.configV39__aventura .configV39__seccionTitulo {
top: 5.7% !important;
}
.configV39__aviso {
bottom: 8.7% !important;
}
@media (max-width: 900px) {
.configV39__musica {
height: 22% !important;
}
.configV39__aventura {
height: 20.3% !important;
}
.configV39__musicGrid,
.configV39__actionGrid {
left: 1.7% !important;
right: 1.7% !important;
gap: 1.35% !important;
}
.configV39__pista,
.configV39__action {
aspect-ratio: 2.48/1 !important;
}
.configV39__pistaIcono,
.configV39__action > img {
width: 32px !important;
height: 32px !important;
}
}
.configV39__filaVolumen {
top: 32.2% !important;
bottom: 11.2% !important;
left: 3.7% !important;
right: 3.7% !important;
grid-template-columns: clamp(50px, 5.2vw, 66px) minmax(0, 1fr) !important;
column-gap: clamp(8px, 0.9vw, 12px) !important;
}
.configV39__sound {
width: clamp(50px, 5.2vw, 66px) !important;
height: clamp(50px, 5.2vw, 66px) !important;
transform: translateY(1px) !important;
}
.configV39__slider {
height: clamp(42px, 4vw, 52px) !important;
}
.configV39__sliderFill {
left: 10.15% !important;
top: 28.7% !important;
height: 42.5% !important;
}
.configV39__sliderKnob {
width: clamp(36px, 3.55vw, 46px) !important;
height: clamp(36px, 3.55vw, 46px) !important;
}
.configV39__musicGrid,
.configV39__actionGrid {
left: 0.95% !important;
right: 0.95% !important;
gap: 0.95% !important;
}
.configV39__musicGrid {
top: 27.9% !important;
bottom: 3.9% !important;
}
.configV39__actionGrid {
top: 24.3% !important;
bottom: 4.1% !important;
}
.configV39__pista,
.configV39__action {
aspect-ratio: 2.28/1 !important;
grid-template-columns: clamp(35px, 3.25vw, 43px) minmax(0, 1fr) !important;
gap: clamp(6px, 0.62vw, 9px) !important;
padding: 8px clamp(11px, 0.95vw, 15px) 8px clamp(9px, 0.8vw, 12px) !important;
}
.configV39__pistaIcono,
.configV39__action > img {
width: clamp(33px, 3.05vw, 40px) !important;
height: clamp(33px, 3.05vw, 40px) !important;
justify-self: center !important;
}
.configV39__pistaNombre,
.configV39__action span {
font-size: clamp(9.9px, 0.9vw, 12.9px) !important;
line-height: 1.02 !important;
}
.configV39__pistaNombre {
padding: 0 4px 0 0 !important;
}
.configV39__action span {
padding-right: clamp(14px, 1.2vw, 20px) !important;
padding-left: 0 !important;
}
.configV39__musica .configV39__seccionTitulo,
.configV39__aventura .configV39__seccionTitulo {
top: 5.5% !important;
}
.configV39__aviso {
bottom: 9.9% !important;
font-size: clamp(10px, 0.96vw, 13.2px) !important;
}
@media (max-width: 900px) {
.configV39__filaVolumen {
grid-template-columns: 48px minmax(0, 1fr) !important;
column-gap: 8px !important;
}
.configV39__sound {
width: 48px !important;
height: 48px !important;
}
.configV39__slider {
width: 95.5% !important;
height: 36px !important;
}
.configV39__sliderFill {
top: 28.8% !important;
height: 42.2% !important;
}
.configV39__musicGrid,
.configV39__actionGrid {
left: 1.2% !important;
right: 1.2% !important;
gap: 1% !important;
}
.configV39__pista,
.configV39__action {
aspect-ratio: 2.34/1 !important;
}
.configV39__pistaIcono,
.configV39__action > img {
width: 30px !important;
height: 30px !important;
}
.configV39__pistaNombre,
.configV39__action span {
font-size: 8.7px !important;
}
}
.configV39__volumen {
height: 18.9% !important;
}
.configV39__volumen .configV39__seccionTitulo {
top: 6.1% !important;
left: 3% !important;
font-size: clamp(16px, 1.58vw, 22px) !important;
font-weight: 700 !important;
}
.configV39__filaVolumen {
top: 33% !important;
bottom: 12% !important;
left: 4.2% !important;
right: 3.5% !important;
display: grid !important;
grid-template-columns: clamp(52px, 5.3vw, 68px) minmax(0, 1fr) !important;
column-gap: clamp(7px, 0.78vw, 10px) !important;
}
.configV39__sound {
width: clamp(52px, 5.3vw, 68px) !important;
height: clamp(52px, 5.3vw, 68px) !important;
justify-self: center !important;
align-self: center !important;
transform: translateY(0px) !important;
}
.configV39__slider {
width: 96.2% !important;
height: clamp(44px, 4.15vw, 54px) !important;
justify-self: center !important;
align-self: center !important;
position: relative !important;
overflow: visible !important;
}
.configV39__sliderBase {
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: fill !important;
}
.configV39__sliderFill {
}
.configV39__sliderKnob {
width: clamp(37px, 3.6vw, 46px) !important;
height: clamp(37px, 3.6vw, 46px) !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
}
.configV39__sliderInput {
inset: 0 !important;
}
@media (max-width: 900px) {
.configV39__volumen {
height: 19% !important;
}
.configV39__volumen .configV39__seccionTitulo {
top: 6.3% !important;
font-size: 15px !important;
}
.configV39__filaVolumen {
top: 33.2% !important;
bottom: 12.2% !important;
left: 4% !important;
right: 3.2% !important;
}
.configV39__sliderFill {
left: 10.9% !important;
top: 30.2% !important;
height: 39% !important;
}
.configV39__sliderKnob {
width: 32px !important;
height: 32px !important;
}
}
.configV39__sliderFill {
}
.configV39__sliderKnob {
width: clamp(36px, 3.48vw, 45px) !important;
height: clamp(36px, 3.48vw, 45px) !important;
}
@media (max-width: 900px) {
.configV39__sliderFill {
left: 11.15% !important;
top: 31.1% !important;
height: 37.7% !important;
}
.configV39__sliderKnob {
width: 31px !important;
height: 31px !important;
}
}
.configV39__sliderFill {
}
@media (max-width: 900px) {
.configV39__sliderFill {
top: 29.8% !important;
height: 40% !important;
}
}
.configV39__sliderFill {
}
@media (max-width: 900px) {
.configV39__sliderFill {
top: 28% !important;
height: 44.5% !important;
}
}
.configV39__sliderFill {
background: transparent !important;
box-shadow: none !important;
}
@media (max-width: 900px) {
.configV39__sliderFill {
left: 10.95% !important;
top: 23% !important;
height: 55.2% !important;
}
}
.configV39__sliderFill {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.28) 0%,
rgba(255, 255, 255, 0.1) 16%,
rgba(191, 69, 255, 0.95) 17%,
rgba(164, 35, 245, 0.98) 42%,
rgba(134, 12, 214, 0.99) 70%,
rgba(104, 0, 173, 1) 100%
) !important;
border: 1px solid rgba(97, 0, 157, 0.78) !important;
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.33),
inset 0-2px 0 rgba(48, 0, 95, 0.25),
0 0 0 1px rgba(123, 0, 186, 0.12) !important;
}
.configV39__sliderFill::before {
left: 3%;
right: 3%;
top: 10%;
height: 28%;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.4),
rgba(255, 255, 255, 0.06)
);
}
.configV39__sliderFill::after {
left: 2.5%;
right: 2.5%;
bottom: 8%;
height: 18%;
background: rgba(46, 0, 96, 0.18);
}
.configV39__sliderKnob {
z-index: 3 !important;
}
@media (max-width: 900px) {
.configV39__sliderFill {
left: 10.72% !important;
top: 18.8% !important;
height: 63% !important;
}
}
.configV39__sliderFill {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.24) 0%,
rgba(255, 255, 255, 0.08) 15%,
rgba(188, 66, 252, 0.96) 16%,
rgba(162, 31, 241, 0.98) 43%,
rgba(131, 10, 209, 0.99) 71%,
rgba(101, 0, 168, 1) 100%
) !important;
border: 1px solid rgba(102, 0, 160, 0.68) !important;
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.28),
inset 0-2px 0 rgba(48, 0, 95, 0.18) !important;
}
.configV39__sliderFill::before {
left: 4%;
right: 4%;
height: 25%;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.32),
rgba(255, 255, 255, 0.05)
);
}
.configV39__sliderFill::after {
left: 3.5%;
right: 3.5%;
height: 16%;
background: rgba(46, 0, 96, 0.14);
}
@media (max-width: 900px) {
.configV39__sliderFill {
left: 11.28% !important;
top: 24.8% !important;
height: 50.8% !important;
}
}
.configV39__volumen {
top: 24.2% !important;
height: 17.7% !important;
}
.configV39__volumen .configV39__seccionTitulo {
top: 5.2% !important;
}
.configV39__filaVolumen {
bottom: 10.8% !important;
grid-template-columns: clamp(52px, 5.2vw, 67px) minmax(0, 1fr) !important;
column-gap: clamp(7px, 0.76vw, 10px) !important;
align-items: center !important;
}
.configV39__sound {
width: clamp(52px, 5.2vw, 67px) !important;
height: clamp(52px, 5.2vw, 67px) !important;
transform: translateY(-1px) !important;
}
.configV39__slider {
align-self: start !important;
}
.configV39__sliderFill {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.22) 0%,
rgba(255, 255, 255, 0.07) 14%,
rgba(187, 66, 252, 0.95) 15%,
rgba(160, 30, 240, 0.98) 44%,
rgba(129, 10, 207, 0.99) 72%,
rgba(100, 0, 166, 1) 100%
) !important;
border: 1px solid rgba(100, 0, 158, 0.62) !important;
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.24),
inset 0-2px 0 rgba(48, 0, 95, 0.14) !important;
}
.configV39__sliderFill::before {
left: 5%;
right: 5%;
top: 11%;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.28),
rgba(255, 255, 255, 0.04)
);
}
.configV39__sliderFill::after {
left: 4%;
right: 4%;
bottom: 9%;
height: 15%;
background: rgba(46, 0, 96, 0.12);
}
@media (max-width: 900px) {
.configV39__volumen {
top: 24.3% !important;
height: 17.9% !important;
}
.configV39__filaVolumen {
top: 29% !important;
bottom: 11% !important;
column-gap: 7px !important;
}
.configV39__sound {
width: 50px !important;
height: 50px !important;
}
.configV39__slider {
width: 95.8% !important;
height: 38px !important;
}
.configV39__sliderFill {
left: 11.95% !important;
top: 27.7% !important;
height: 43.8% !important;
}
}
.configV39__filaVolumen {
grid-template-columns: clamp(52px, 5.15vw, 66px) minmax(0, 1fr) !important;
column-gap: clamp(4px, 0.42vw, 7px) !important;
}
.configV39__sound {
transform: translate(6px, -4px) !important;
}
.configV39__sliderFill {
}
.configV39__sliderFill::before {
left: 4.5% !important;
right: 4.5% !important;
top: 10.5% !important;
}
.configV39__sliderFill::after {
left: 3.6% !important;
right: 3.6% !important;
bottom: 8% !important;
height: 15% !important;
}
@media (max-width: 900px) {
.configV39__filaVolumen {
left: 4.45% !important;
grid-template-columns: 50px minmax(0, 1fr) !important;
column-gap: 5px !important;
}
.configV39__sound {
transform: translate(5px, -3px) !important;
}
.configV39__sliderFill {
left: 11.38% !important;
top: 29% !important;
height: 46.3% !important;
}
}
.configV39__filaVolumen {
left: 4.85% !important;
right: 3.45% !important;
top: 27.9% !important;
bottom: 10.2% !important;
grid-template-columns: clamp(52px, 5vw, 64px) minmax(0, 1fr) !important;
column-gap: clamp(3px, 0.34vw, 6px) !important;
}
.configV39__sound {
transform: translate(8px, -6px) !important;
width: clamp(52px, 5vw, 64px) !important;
height: clamp(52px, 5vw, 64px) !important;
}
.configV39__slider {
width: 96% !important;
height: clamp(43px, 4vw, 52px) !important;
}
.configV39__sliderFill {
left: 9.95% !important;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.22) 0%,
rgba(255, 255, 255, 0.05) 20%,
rgba(192, 73, 255, 0.98) 21%,
rgba(165, 32, 243, 0.99) 52%,
rgba(133, 10, 210, 1) 78%,
rgba(103, 0, 171, 1) 100%
) !important;
border: 1px solid rgba(96, 0, 156, 0.6) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0-1px 0 rgba(40, 0, 90, 0.18) !important;
}
.configV39__sliderFill::before {
content: "";
position: absolute;
left: 3.5%;
right: 3.5%;
top: 12%;
height: 24%;
border-radius: 999px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.22),
rgba(255, 255, 255, 0.03)
);
pointer-events: none;
}
.configV39__sliderFill::after {
content: "";
position: absolute;
left: 3%;
right: 3%;
bottom: 10%;
height: 14%;
border-radius: 999px;
background: rgba(46, 0, 96, 0.1);
pointer-events: none;
}
@media (max-width: 900px) {
.configV39__filaVolumen {
left: 4.75% !important;
right: 3.35% !important;
top: 28% !important;
bottom: 10.3% !important;
grid-template-columns: 49px minmax(0, 1fr) !important;
column-gap: 4px !important;
}
.configV39__sound {
transform: translate(6px, -5px) !important;
width: 49px !important;
height: 49px !important;
}
.configV39__sliderFill {
left: 9.95% !important;
top: 41% !important;
height: 24.2% !important;
}
}
.configV39__slider {
transform: translateY(2px) !important;
}
.configV39__sliderFill {
}
.configV39__sliderFill::after {
}
@media (max-width: 900px) {
.configV39__slider {
transform: translateY(2px) !important;
}
.configV39__sliderFill {
top: 41.9% !important;
height: 25.5% !important;
}
}
.configV39__sound {
transform: translate(8px, -4px) !important;
}
.configV39__sound:hover {
transform: translate(8px, -4px) scale(1.01) !important;
}
.configV39__slider {
transform: translateY(3px) !important;
}
.configV39__sliderFill {
}
.configV39__sliderFill::before {
}
.configV39__sliderFill::after {
}
@media (max-width: 900px) {
.configV39__sound {
transform: translate(6px, -3px) !important;
}
.configV39__sound:hover {
transform: translate(6px, -3px) scale(1.01) !important;
}
.configV39__slider {
transform: translateY(3px) !important;
}
.configV39__sliderFill {
top: 41.3% !important;
height: 26.9% !important;
}
}
.configV39__sound {
transform: translate(8px, -2px) !important;
will-change: transform, filter !important;
backface-visibility: hidden !important;
}
.configV39__sound:hover {
transform: translate(8px, -2px) scale(1.01) !important;
filter: brightness(1.02) !important;
}
.configV39__slider {
transform: translateY(4px) !important;
width: 96.1% !important;
}
.configV39__sliderFill {
top: 39.4% !important;
height: 30.8% !important;
border-radius: 999px !important;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.24) 0%,
rgba(255, 255, 255, 0.09) 18%,
rgba(203, 91, 255, 0.98) 19%,
rgba(176, 44, 247, 0.99) 48%,
rgba(143, 16, 219, 1) 76%,
rgba(112, 0, 181, 1) 100%
) !important;
border: 1px solid rgba(101, 0, 160, 0.58) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0-1px 0 rgba(46, 0, 96, 0.15) !important;
overflow: hidden !important;
}
.configV39__sliderFill::before {
left: 2.2% !important;
right: 2.2% !important;
top: 11% !important;
height: 24% !important;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.24),
rgba(255, 255, 255, 0.04)
) !important;
}
.configV39__sliderFill::after {
left: 2% !important;
right: 2% !important;
bottom: 9% !important;
height: 14% !important;
background: rgba(46, 0, 96, 0.1) !important;
}
@media (max-width: 900px) {
.configV39__sound {
transform: translate(6px, -1px) !important;
}
.configV39__sound:hover {
transform: translate(6px, -1px) scale(1.01) !important;
}
.configV39__slider {
transform: translateY(4px) !important;
width: 96% !important;
}
.configV39__sliderFill {
left: 7.95% !important;
top: 39.6% !important;
height: 30.4% !important;
}
}
.configV39__sliderFill {
left: 8.85% !important;
}
@media (max-width: 900px) {
.configV39__sliderFill {
left: 8.85% !important;
}
}
.configV39__volumen {
top: 24.9% !important;
height: 18.6% !important;
}
.configV39__musica {
top: 45.5% !important;
height: 20.9% !important;
}
.configV39__aventura {
top: 68.1% !important;
height: 18.9% !important;
}
.configV39__musicGrid,
.configV39__actionGrid {
left: 1.55% !important;
right: 1.55% !important;
gap: 1.55% !important;
align-items: center !important;
}
.configV39__musicGrid {
top: 29.8% !important;
bottom: 4.7% !important;
}
.configV39__actionGrid {
top: 26.6% !important;
bottom: 4.8% !important;
}
.configV39__pista,
.configV39__action {
aspect-ratio: 2.68/1 !important;
gap: clamp(6px, 0.65vw, 9px) !important;
padding: 7px clamp(12px, 1.08vw, 16px) 7px clamp(14px, 1.28vw, 18px) !important;
}
.configV39__pistaIcono,
.configV39__action > img {
object-fit: contain !important;
align-self: center !important;
}
.configV39__pistaNombre,
.configV39__action span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
height: 100% !important;
text-align: center !important;
white-space: normal !important;
overflow: visible !important;
word-break: keep-all !important;
}
.configV39__pistaNombre {
padding: 0 10px 0 2px !important;
}
.configV39__action span {
padding: 0 clamp(18px, 1.45vw, 24px) 0 2px !important;
}
.configV39__pistaNombre br,
.configV39__action span br {
content: "" !important;
}
.configV39__musica .configV39__seccionTitulo,
.configV39__aventura .configV39__seccionTitulo,
.configV39__volumen .configV39__seccionTitulo {
font-weight: 800 !important;
}
@media (max-width: 900px) {
.configV39__volumen {
height: 18.7% !important;
}
.configV39__musica {
top: 45.55% !important;
height: 20.85% !important;
}
.configV39__aventura {
top: 68.15% !important;
height: 18.95% !important;
}
.configV39__musicGrid,
.configV39__actionGrid {
left: 1.65% !important;
right: 1.65% !important;
gap: 1.45% !important;
}
.configV39__pista,
.configV39__action {
padding: 6px 11px 6px 12px !important;
}
.configV39__pistaIcono,
.configV39__action > img {
width: 29px !important;
height: 29px !important;
}
.configV39__pistaNombre,
.configV39__action span {
font-size: 10.2px !important;
line-height: 1 !important;
}
}
.configV39__volumen {
top: 25.1% !important;
height: 19.1% !important;
}
.configV39__musica {
top: 45% !important;
}
.configV39__aventura {
height: 19.9% !important;
}
.configV39__musicGrid,
.configV39__actionGrid {
left: 1.45% !important;
right: 1.45% !important;
gap: 1.35% !important;
}
.configV39__musicGrid {
top: 30.2% !important;
bottom: 4.6% !important;
}
.configV39__actionGrid {
top: 27% !important;
bottom: 4.6% !important;
}
.configV39__pista,
.configV39__action {
grid-template-columns: clamp(40px, 3.95vw, 51px) minmax(0, 1fr) !important;
gap: clamp(5px, 0.55vw, 8px) !important;
padding: 7px clamp(12px, 1.08vw, 16px) 7px clamp(17px, 1.48vw, 22px) !important;
}
.configV39__pistaIcono,
.configV39__action > img {
justify-self: start !important;
width: clamp(33px, 3.25vw, 42px) !important;
height: clamp(33px, 3.25vw, 42px) !important;
}
.configV39__pistaNombre {
padding: 0 7px 0 0 !important;
transform: translateX(-6px) !important;
}
.configV39__action span {
padding: 0 clamp(16px, 1.25vw, 21px) 0 0 !important;
transform: translateX(-7px) !important;
}
.configV39__pistaNombre,
.configV39__action span {
font:
800 clamp(11.3px, 1.03vw, 14.8px)/1.02 Cambria,
Georgia,
serif !important;
}
@media (max-width: 900px) {
.configV39__volumen {
height: 19.2% !important;
}
.configV39__musica {
top: 45% !important;
height: 21.3% !important;
}
.configV39__aventura {
top: 66.95% !important;
height: 19.95% !important;
}
.configV39__musicGrid,
.configV39__actionGrid {
gap: 1.25% !important;
}
.configV39__pista,
.configV39__action {
padding: 6px 11px 6px 15px !important;
}
.configV39__pistaIcono,
.configV39__action > img {
margin-left: 4px !important;
}
.configV39__pistaNombre {
transform: translateX(-4px) !important;
}
.configV39__action span {
transform: translateX(-5px) !important;
}
}
.configV39__aventura {
}
.configV39__volumen .configV39__seccionTitulo {
top: 5.6% !important;
}
.configV39__filaVolumen {
top: 28.8% !important;
bottom: 11% !important;
}
.configV39__pista,
.configV39__action {
padding-left: clamp(20px, 1.7vw, 25px) !important;
}
.configV39__pistaIcono,
.configV39__action > img {
margin-left: 9px !important;
}
@media (max-width: 900px) {
.configV39__volumen {
height: 18.3% !important;
}
.configV39__pista,
.configV39__action {
padding-left: 17px !important;
}
.configV39__pistaIcono,
.configV39__action > img {
margin-left: 7px !important;
}
}
.configV39__sliderThumb {
}
.configV39__musica {
}
.configV39__aventura {
}
.configV39__musicGrid {
}
.configV39__actionGrid {
}
.configV39__pistaNombre {
transform: translateX(-10px) !important;
padding-right: 5px !important;
}
.configV39__action span {
transform: translateX(-10px) !important;
padding-right: clamp(14px, 1.12vw, 19px) !important;
}
@media (max-width: 900px) {
.configV39__sliderThumb {
top: 56.8% !important;
}
.configV39__musica {
top: 44.65% !important;
}
.configV39__aventura {
top: 66.15% !important;
}
.configV39__pistaNombre,
.configV39__action span {
transform: translateX(-8px) !important;
}
}
.configV39__sliderThumb {
top: 57.9% !important;
}
.configV39__volumen {
top: 25.2% !important;
height: 18.2% !important;
}
.configV39__musica {
top: 44% !important;
height: 21.4% !important;
}
.configV39__aventura {
top: 66% !important;
height: 20.8% !important;
}
.configV39__musicGrid {
top: 29.6% !important;
bottom: 4.5% !important;
}
.configV39__actionGrid {
top: 26.4% !important;
bottom: 4.5% !important;
}
@media (max-width: 900px) {
.configV39__sliderThumb {
top: 57.9% !important;
}
.configV39__musica {
top: 44% !important;
height: 21.35% !important;
}
.configV39__aventura {
top: 66% !important;
height: 20.75% !important;
}
}
.configV39__action:disabled {
background-image: url(imagenes/interfaz/config-v39/boton-normal.webp) !important;
color: #616161 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
filter: grayscale(1) saturate(0) brightness(1.02) contrast(0.96) !important;
}
.configV39__action:disabled > img {
filter: grayscale(1) saturate(0) brightness(1.01) contrast(0.98) opacity(0.96) !important;
}
.configV39__action:disabled::after {
display: block !important;
content: "" !important;
position: absolute !important;
top: -3.5% !important;
right: 2.8% !important;
width: clamp(30px, 3.3vw, 40px) !important;
height: clamp(30px, 3.3vw, 40px) !important;
background: transparent url(imagenes/intro-v6/p7_candado_color.webp)
center/contain no-repeat !important;
filter: grayscale(1) saturate(0) brightness(0.98) contrast(1.02)
drop-shadow(0 1px 2px rgba(40, 40, 40, 0.24)) !important;
pointer-events: none !important;
z-index: 2 !important;
}
.configV39__action:disabled span {
color: #666 !important;
}
.configV39__action > img {
width: clamp(35px, 3.9vw, 47px) !important;
height: clamp(35px, 3.9vw, 47px) !important;
}
.configV39__pistaIcono {
width: clamp(34px, 3.8vw, 45px) !important;
height: clamp(34px, 3.8vw, 45px) !important;
}
.configV39__pistaNombre,
.configV39__action span {
font-family: Georgia, Cambria, serif !important;
}
.configV39__aviso img {
content: url(imagenes/interfaz/config-v39/candado.webp) !important;
}
:root {
--fg-cielo-a: #aee8fa;
--fg-cielo-b: #d5f3f4;
--fg-cielo-c: #fff1bd;
--fg-cielo-d: #ffe29a;
}
#fondoGlobalJuego {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
user-select: none;
background: linear-gradient(
180deg,
var(--fg-cielo-a) 0%,
var(--fg-cielo-b) 44%,
var(--fg-cielo-c) 76%,
var(--fg-cielo-d) 100%
);
opacity: 0;
visibility: hidden;
transition: none;
contain: layout paint style;
isolation: isolate;
}
body.fondoGlobalVisible #fondoGlobalJuego {
opacity: 1;
visibility: visible;
}
.pantallaFondoGlobalEstable {
background: transparent !important;
position: relative !important;
isolation: isolate;
}
.pantallaFondoGlobalEstable::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.025),
rgba(255, 255, 255, 0.055) 44%,
rgba(255, 248, 227, 0.09)
);
}
.pantallaFondoGlobalEstable > * {
position: relative;
z-index: 2;
}
.fgCapa {
position: absolute;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
.fgSol {
z-index: 1;
top: 1.5vh;
right: 2.5vw;
width: clamp(110px, 13vw, 195px);
height: auto;
transform: translate3d(0, 0, 0);
transform-origin: center;
animation: fgRespirarSol 7.8s ease-in-out infinite;
}
.fgNube {
z-index: 2;
height: auto;
opacity: 0.69;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
.fgNube1 {
width: clamp(180px, 21vw, 320px);
top: 8vh;
left: -5.5vw;
animation: fgNube1 24s ease-in-out infinite alternate;
}
.fgNube2 {
width: clamp(210px, 26vw, 390px);
top: 21vh;
right: -7vw;
opacity: 0.58;
animation: fgNube2 31s ease-in-out infinite alternate;
}
.fgNube3 {
width: clamp(130px, 15vw, 225px);
top: 3vh;
left: 24vw;
opacity: 0.5;
animation: fgNube3 27s ease-in-out infinite alternate;
}
.fgMontanas {
z-index: 3;
left: -7%;
bottom: 25%;
width: 114%;
height: auto;
opacity: 0.9;
}
.fgColinas {
z-index: 4;
left: -7%;
bottom: 12%;
width: 114%;
height: auto;
opacity: 0.98;
transform: translate3d(0, 0, 0);
animation: fgColinas 22s ease-in-out infinite alternate;
}
.fgCamino,
.fgVegetacion {
position: absolute;
left: 0;
right: 0;
overflow: hidden;
contain: paint;
}
.fgCamino {
z-index: 5;
bottom: -1.5vh;
height: 38vh;
}
.fgVegetacion {
z-index: 7;
bottom: -3.6vh;
height: 28vh;
}
.fgTrack {
position: absolute;
inset-block: 0;
left: 0;
pointer-events: none;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
contain: layout paint style;
animation: fgDesplazar var(--fg-duracion, 28s) linear infinite;
width: calc(100% + var(--fg-paso, 1500px));
}
.fgTrackCamino {
--fg-paso: 1500px;
--fg-distancia: -1500px;
--fg-escala-y: 1.36;
--fg-duracion: 34s;
background: url(imagenes/fondo-global/camino.webp) repeat-x 0 58% / auto 136%;
}
.fgTrackVegetacion {
--fg-paso: 1250px;
--fg-distancia: -1250px;
--fg-escala-y: 1;
--fg-duracion: 44s;
background: url(imagenes/fondo-global/vegetacion.webp) repeat-x 0 100% / auto
100%;
}
.fgMariposas {
z-index: 10;
top: 14vh;
right: 6vw;
width: clamp(92px, 10vw, 145px);
height: auto;
opacity: 0.95;
transform: translate3d(0, 0, 0);
animation: fgMariposas 22s linear infinite;
}
.fgHoja {
z-index: 9;
width: clamp(20px, 2vw, 31px);
height: auto;
opacity: 0.85;
transform: translate3d(0, 0, 0);
}
.fgHoja1 {
left: 9%;
top: 20%;
animation: fgHoja1 15s linear infinite;
}
.fgHoja2 {
right: 14%;
top: 31%;
animation: fgHoja2 18s 2s linear infinite;
}
.fgEstrella {
z-index: 8;
width: clamp(13px, 1.35vw, 21px);
height: auto;
opacity: 0.18;
animation: fgBrillo 7s ease-in-out infinite;
}
.fgEstrella1 {
left: 16%;
top: 19%;
}
.fgEstrella2 {
right: 25%;
top: 16%;
animation-delay: -2.4s;
}
body.fondoGlobalVisible .fgSol,
body.fondoGlobalVisible .fgNube,
body.fondoGlobalVisible .fgColinas,
body.fondoGlobalVisible .fgTrack,
body.fondoGlobalVisible .fgMariposas,
body.fondoGlobalVisible .fgHoja {
will-change: transform;
}
body.configuracionJuegoAbiertaV7 #fondoGlobalJuego .fgTrack,
body[data-rendimiento="economico"] #fondoGlobalJuego .fgTrack {
will-change: auto !important;
}
body:not(.fondoGlobalVisible) #fondoGlobalJuego * {
animation-play-state: paused !important;
will-change: auto !important;
}
body[data-rendimiento="economico"] #fondoGlobalJuego .fgHoja,
body[data-rendimiento="economico"] #fondoGlobalJuego .fgEstrella {
will-change: auto;
}
body.configuracionJuegoAbiertaV7 #fondoGlobalJuego .fgTrack,
body.configuracionJuegoAbiertaV7 #fondoGlobalJuego .fgColinas,
body.configuracionJuegoAbiertaV7 #fondoGlobalJuego .fgMariposas,
body.configuracionJuegoAbiertaV7 #fondoGlobalJuego .fgHoja,
body.configuracionJuegoAbiertaV7 #fondoGlobalJuego .fgEstrella {
animation-play-state: paused !important;
will-change: auto !important;
}
body.rendimientoPausado #fondoGlobalJuego * {
animation-play-state: paused !important;
will-change: auto !important;
}
@keyframes fgRespirarSol {
0%,
100% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(0, -2px, 0) scale(1.025);
}
}
@keyframes fgNube1 {
from {
transform: translate3d(-18px, 1px, 0);
}
to {
transform: translate3d(44px, -5px, 0);
}
}
@keyframes fgNube2 {
from {
transform: translate3d(30px, -2px, 0);
}
to {
transform: translate3d(-38px, 4px, 0);
}
}
@keyframes fgNube3 {
from {
transform: translate3d(-24px, 3px, 0);
}
to {
transform: translate3d(34px, -3px, 0);
}
}
@keyframes fgColinas {
from {
transform: translate3d(6px, 0, 0) scale(1.003);
}
to {
transform: translate3d(-6px, 0, 0) scale(1.006);
}
}
@keyframes fgDesplazar {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(var(--fg-distancia, -1200px), 0, 0);
}
}
@keyframes fgMariposas {
0% {
transform: translate3d(5vw, 3px, 0);
opacity: 0;
}
8% {
opacity: 0.95;
}
50% {
transform: translate3d(-14vw, -5px, 0);
}
92% {
opacity: 0.95;
}
100% {
transform: translate3d(-32vw, 2px, 0);
opacity: 0;
}
}
@keyframes fgHoja1 {
0% {
transform: translate3d(-6vw, -8vh, 0) rotate(0);
opacity: 0;
}
12% {
opacity: 0.8;
}
100% {
transform: translate3d(62vw, 70vh, 0) rotate(520deg);
opacity: 0;
}
}
@keyframes fgHoja2 {
0% {
transform: translate3d(5vw, -8vh, 0) rotate(0);
opacity: 0;
}
12% {
opacity: 0.7;
}
100% {
transform: translate3d(-56vw, 66vh, 0) rotate(-470deg);
opacity: 0;
}
}
@keyframes fgBrillo {
0%,
100% {
opacity: 0.12;
}
50% {
opacity: 0.62;
}
}
@media (max-width: 700px) {
.fgMariposas {
width: clamp(78px, 21vw, 112px);
right: 2vw;
top: 15vh;
}
.fgTrackCamino {
--fg-duracion: 40s;
}
.fgTrackVegetacion {
--fg-duracion: 50s;
}
}
@media (prefers-reduced-motion: reduce) {
html:not([data-aventura-animaciones="activas"]) #fondoGlobalJuego .fgTrack,
html:not([data-aventura-animaciones="activas"]) #fondoGlobalJuego .fgColinas,
html:not([data-aventura-animaciones="activas"])
#fondoGlobalJuego
.fgMariposas,
html:not([data-aventura-animaciones="activas"]) #fondoGlobalJuego .fgHoja,
html:not([data-aventura-animaciones="activas"])
#fondoGlobalJuego
.fgEstrella {
animation-play-state: paused !important;
}
html:not([data-aventura-animaciones="activas"]) #fondoGlobalJuego .fgNube1 {
animation-duration: 45s;
}
html:not([data-aventura-animaciones="activas"]) #fondoGlobalJuego .fgNube2 {
animation-duration: 52s;
}
html:not([data-aventura-animaciones="activas"]) #fondoGlobalJuego .fgNube3 {
animation-duration: 48s;
}
html:not([data-aventura-animaciones="activas"]) #fondoGlobalJuego .fgSol {
animation-duration: 14s;
}
}
body.fondoGlobalVisible
:is(
#pantallaInicio,
#pantallaPerfiles,
#pantallaBienvenida,
#pantallaMenu,
#pantallaNivelCompletado,
#pantallaRecompensas,
#pantallaPerfilJugador
).pantallaFondoGlobalEstable:not(.oculto) {
background-color: transparent !important;
background-image: none !important;
}
.introduccionV3,
.fondoNuevoPerfilV3,
.fondoConfiguracionV1 {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
body.introV6Abierta .pantalla:not(.oculto) [class*="efectoAvatar-"],
body.configuracionJuegoAbiertaV7
.pantalla:not(.oculto)
[class*="efectoAvatar-"] {
animation-play-state: paused !important;
}
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-brillo"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-pulso"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-destello"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-fuego"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-llamas"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-hielo"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-cristal"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-electricidad"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-agua"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-naturaleza"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-energia"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-luces"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-estrellas"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-halo"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-nebulosa"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-arcoiris"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-aurora"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-particulas"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-rayos"],
body[data-rendimiento="equilibrado"] [class*="efectoAvatar-brasas"] {
animation-name: avatarEfectoLigeroEstable !important;
animation-duration: 2.8s !important;
animation-timing-function: ease-in-out !important;
animation-iteration-count: infinite !important;
filter: brightness(1.06) saturate(1.08) !important;
will-change: transform, opacity;
}
body[data-rendimiento="economico"] [class*="efectoAvatar-"] {
animation-name: avatarEfectoEconomicoEstable !important;
animation-duration: 3.4s !important;
animation-timing-function: ease-in-out !important;
animation-iteration-count: infinite !important;
filter: none !important;
will-change: transform, opacity;
}
body[data-rendimiento="equilibrado"] .efectoAvatar-flotar,
body[data-rendimiento="equilibrado"] .efectoAvatar-rebote,
body[data-rendimiento="economico"] .efectoAvatar-flotar,
body[data-rendimiento="economico"] .efectoAvatar-rebote {
animation-name: avatarFlotarEstable !important;
filter: none !important;
}
@keyframes avatarEfectoLigeroEstable {
0%,
100% {
opacity: 0.96;
transform: translate3d(0, 0, 0) scale(1);
}
50% {
opacity: 1;
transform: translate3d(0, -1px, 0) scale(1.006);
}
}
@keyframes avatarEfectoEconomicoEstable {
0%,
100% {
opacity: 0.97;
transform: translate3d(0, 0, 0);
}
50% {
opacity: 1;
transform: translate3d(0, -1px, 0);
}
}
@keyframes avatarFlotarEstable {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -3px, 0);
}
}
body.rendimientoPausado *,
body.rendimientoPausado *::before,
body.rendimientoPausado *::after {
animation-play-state: paused !important;
}
body[data-rendimiento="equilibrado"]
[class*="animacion-ropa_"]
.capaImagenAvatar-ropa,
body[data-rendimiento="equilibrado"]
[class*="animacion-disfraz_"]
.capaImagenAvatar-disfraz,
body[data-rendimiento="economico"]
[class*="animacion-ropa_"]
.capaImagenAvatar-ropa,
body[data-rendimiento="economico"]
[class*="animacion-disfraz_"]
.capaImagenAvatar-disfraz {
animation-name: avatarEfectoLigeroEstable !important;
animation-duration: 3s !important;
animation-timing-function: ease-in-out !important;
animation-iteration-count: infinite !important;
filter: none !important;
}
body[data-rendimiento="equilibrado"] .marco_avatar_maestro,
body[data-rendimiento="economico"] .marco_avatar_maestro {
animation: marcoMaestroLigeroEstable 3.4s ease-in-out infinite !important;
box-shadow: 0 0 10px rgba(245, 216, 82, 0.62) !important;
will-change: transform, opacity;
}
@keyframes marcoMaestroLigeroEstable {
0%,
100% {
transform: translateZ(0) scale(1);
opacity: 0.96;
}
50% {
transform: translateZ(0) scale(1.006);
opacity: 1;
}
}
body[data-rendimiento="equilibrado"]
#pantallaPerfilJugador.perfilMejoraPremium2
.carnetAventurero::before,
body[data-rendimiento="economico"]
#pantallaPerfilJugador.perfilMejoraPremium2
.carnetAventurero::before {
animation: perfilEstrellasLigeroEstable 4.8s ease-in-out infinite !important;
will-change: opacity, transform;
}
@keyframes perfilEstrellasLigeroEstable {
0%,
100% {
opacity: 0.62;
transform: translateZ(0) scale(1);
}
50% {
opacity: 0.88;
transform: translateZ(0) scale(1.012);
}
}
body[data-rendimiento="equilibrado"]
#pantallaPerfilJugador.perfilMejoraPremium3
.carnetAventurero,
body[data-rendimiento="economico"]
#pantallaPerfilJugador.perfilMejoraPremium3
.carnetAventurero {
animation: perfilMaestroLigeroEstable 3.4s ease-in-out infinite !important;
filter: none !important;
will-change: transform, opacity;
}
@keyframes perfilMaestroLigeroEstable {
0%,
100% {
transform: translateZ(0);
opacity: 0.985;
}
50% {
transform: translate3d(0, -1px, 0);
opacity: 1;
}
}
.capaImagenAvatar-ropa,
.capaImagenAvatar-disfraz {
will-change: auto !important;
}
[class*="animacion-ropa_"] .capaImagenAvatar-ropa,
[class*="animacion-disfraz_"] .capaImagenAvatar-disfraz {
will-change: filter, opacity !important;
}
body[data-rendimiento="equilibrado"]
[class*="animacion-ropa_"]
.capaImagenAvatar-ropa,
body[data-rendimiento="equilibrado"]
[class*="animacion-disfraz_"]
.capaImagenAvatar-disfraz,
body[data-rendimiento="economico"]
[class*="animacion-ropa_"]
.capaImagenAvatar-ropa,
body[data-rendimiento="economico"]
[class*="animacion-disfraz_"]
.capaImagenAvatar-disfraz {
will-change: transform, opacity !important;
}
.capaImagenAvatar-ropa,
.capaImagenAvatar-disfraz,
[class*="animacion-ropa_"] .capaImagenAvatar-ropa,
[class*="animacion-disfraz_"] .capaImagenAvatar-disfraz {
will-change: auto !important;
}
.animadorCabelloV2:not([class*="animacionCabelloV2-"]) {
will-change: auto !important;
}
body[data-rendimiento="economico"] .marco_avatar_maestro,
body[data-rendimiento="economico"] [class*="efectoAvatar-"] {
will-change: auto !important;
}
@media (prefers-reduced-motion: reduce) {
html:not([data-aventura-animaciones="activas"])
.avatarCompuesto
[class*="animacionRopaV2-"],
html:not([data-aventura-animaciones="activas"])
.avatarCompuesto
[class*="animacionCabelloV2-"],
html:not([data-aventura-animaciones="activas"])
.avatarCompuesto
[class*="efectoAvatar-"] {
animation: none !important;
will-change: auto !important;
}
}
html[data-aventura-animaciones="reducidas"]
.avatarCompuesto
[class*="animacionCabelloV2-"],
html[data-aventura-animaciones="reducidas"]
.avatarCompuesto
[class*="animacionRopaV2-"],
html[data-aventura-animaciones="reducidas"]
.avatarCompuesto
[class*="efectoAvatar-"],
html[data-aventura-animaciones="reducidas"] .capaAvatarAnimada,
html[data-aventura-animaciones="reducidas"] .introV6DecoHojas,
html[data-aventura-animaciones="reducidas"] .introV6DecoHojas .introV6Deco,
html[data-aventura-animaciones="reducidas"] .introV6DecoObjeto .introV6Deco {
animation: none !important;
will-change: auto !important;
}
html[data-aventura-animaciones="reducidas"] #fondoGlobalJuego .fgTrack,
html[data-aventura-animaciones="reducidas"] #fondoGlobalJuego .fgColinas,
html[data-aventura-animaciones="reducidas"] #fondoGlobalJuego .fgMariposas,
html[data-aventura-animaciones="reducidas"] #fondoGlobalJuego .fgHoja,
html[data-aventura-animaciones="reducidas"] #fondoGlobalJuego .fgEstrella {
animation-play-state: paused !important;
will-change: auto !important;
}
.aventuraFueraDeVista,
.aventuraFueraDeVista *,
.aventuraFueraDeVista::before,
.aventuraFueraDeVista::after,
.aventuraFueraDeVista *::before,
.aventuraFueraDeVista *::after {
animation-play-state: paused !important;
will-change: auto !important;
}
#avisoGuardadoSeguro {
position: fixed;
z-index: 999999;
inset: auto 12px 12px;
padding: 12px 16px;
border: 2px solid #8a5428;
border-radius: 12px;
background: #fff6dc;
color: #3f281b;
box-shadow: 0 3px 12px #0003;
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
font: 600 15px/1.4 sans-serif;
}
#avisoGuardadoSeguro[hidden] {
display: none;
}
#avisoGuardadoSeguro button {
font: inherit;
padding: 8px 12px;
cursor: pointer;
}
#pantallaPregunta[data-dificultad="apoyo"] .botonOpcion,
#pantallaPregunta[data-dificultad="apoyo"] .botonRelacionar {
min-height: 52px;
}
#pantallaMenu #mundosProgresoGeneral .botonMundoProgresoV3 > div {
display: flex !important; flex-direction: column !important;
justify-content: center; align-items: center; gap: 3px;
min-width: 0; padding-right: 8px;
}
#pantallaMenu #mundosProgresoGeneral .botonMundoProgresoV3 strong {
max-width: 100%; line-height: 1.15; text-align: center;
font-size: clamp(13px, 1.25vw, 19px) !important;
}
#pantallaMenu #mundosProgresoGeneral .botonMundoProgresoV3 small {
position: static !important; transform: none !important;
max-width: 100%; text-align: center; white-space: normal !important;
}
#pantallaInicio.inicioEstable1.inicioBosqueFinal {
position: relative !important;
isolation: isolate;
width: 100% !important;
height: 100vh !important;
height: 100dvh !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
display: block !important;
background: #418eaa !important;
background-image: none !important;
animation: none !important;
}
#pantallaInicio.inicioBosqueFinal::before,
#pantallaInicio.inicioBosqueFinal::after {
display: none !important;
content: none !important;
animation: none !important;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__paisaje {
position: absolute;
z-index: 0;
inset: 0;
pointer-events: none;
background-image: url("imagenes/inicio-bosque/bosque.webp");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
transform: scale(1);
transform-origin: center;
animation: ibPaisaje 22s ease-in-out infinite alternate;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__brillos {
position: absolute;
z-index: 1;
inset: 0;
pointer-events: none;
background:
radial-gradient(
ellipse at 74% 17%,
rgba(255, 243, 153, 0.15),
transparent 37%
),
radial-gradient(
ellipse at 28% 47%,
rgba(255, 218, 75, 0.065),
transparent 32%
);
animation: ibBrillo 8s ease-in-out infinite alternate;
}
#pantallaInicio.inicioBosqueFinal > img {
position: absolute;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
max-width: none;
height: auto;
margin: 0;
border: 0;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
z-index: 5;
width: min(72vw, 1110px);
height: min(52vh, 480px);
max-height: 52vh;
object-fit: fill;
left: 50%;
top: 14%;
transform: translateX(-50%);
filter: drop-shadow(0 7px 11px rgba(51, 23, 7, 0.4));
animation: ibLogo 6.5s ease-in-out infinite;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__creditos {
z-index: 8;
left: 0.4%;
top: 1.2%;
width: min(37vw, 610px);
height: auto;
max-height: 12.8vh;
object-fit: contain;
filter: drop-shadow(0 3px 6px rgba(42, 21, 5, 0.34));
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__floresInicio {
z-index: 3;
width: min(27vw, 440px);
left: -5.7%;
bottom: -12%;
transform-origin: left bottom;
will-change: transform;
animation: ibPlantasIzq 7.8s ease-in-out infinite alternate;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__floresFin {
z-index: 3;
width: min(28vw, 460px);
right: -8%;
bottom: -13%;
transform-origin: right bottom;
will-change: transform;
animation: ibPlantasDer 8.9s -3.3s ease-in-out infinite alternate-reverse;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__hojasAltas {
z-index: 2;
width: min(22vw, 330px);
top: -14%;
right: -6%;
opacity: 0.78;
transform-origin: top center;
animation: ibRamas 11s ease-in-out infinite alternate;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__ramita {
z-index: 2;
width: min(16vw, 250px);
left: -7%;
top: 18%;
opacity: 0.46;
transform-origin: left center;
animation: ibRamas 13s -4s ease-in-out infinite alternate-reverse;
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1 {
position: absolute !important;
z-index: 15 !important;
bottom: 5% !important;
left: 33.5% !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: clamp(6px, 1.1vw, 20px) !important;
transform: none !important;
pointer-events: auto !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar,
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
appearance: none !important;
-webkit-appearance: none !important;
position: relative !important;
flex: 0 0 auto !important;
display: block !important;
box-sizing: border-box !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
min-height: 0 !important;
min-width: 0 !important;
max-width: none !important;
max-height: none !important;
background-color: transparent !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
box-shadow: none !important;
outline-offset: -6px !important;
color: transparent !important;
font-size: 0 !important;
text-shadow: none !important;
line-height: 0 !important;
letter-spacing: 0 !important;
cursor: pointer !important;
filter: drop-shadow(0 7px 8px rgba(32, 13, 6, 0.45)) !important;
transform: translateY(0) scale(1) !important;
animation: none !important;
transition:
transform 0.22s ease,
filter 0.22s ease !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar {
width: min(34.5vw, 565px) !important;
height: min(13.1vw, 200px) !important;
background-image: url("imagenes/inicio-bosque/comenzar.webp") !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
width: min(10.1vw, 155px) !important;
height: min(10.1vw, 155px) !important;
background-image: url("imagenes/inicio-bosque/configurar.webp") !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar:hover,
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1:hover {
transform: translateY(-5px) scale(1.065) !important;
filter: drop-shadow(0 10px 14px rgba(31, 8, 47, 0.62)) brightness(1.08) !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar:active,
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1:active {
transform: translateY(2px) scale(0.98) !important;
filter: drop-shadow(0 3px 4px rgba(42, 18, 4, 0.55)) !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar:focus-visible,
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1:focus-visible {
outline: 3px solid #fff5bc !important;
outline-offset: 2px !important;
border-radius: 30px !important;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__hojitas {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
overflow: hidden;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__hojita {
position: absolute;
display: block;
width: 18px;
height: 30px;
background: linear-gradient(125deg, #fffab2 6%, #ffca2c 52%, #e98a0a 100%);
border: 1px solid rgba(255, 247, 163, 0.8);
border-radius: 80% 5% 80% 5%;
box-shadow: 0 0 13px rgba(255, 206, 52, 0.68);
opacity: 0;
will-change: transform, opacity;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__hojita--uno {
left: 18%;
top: 23%;
animation: ibHoja 11.5s -1.8s linear infinite;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__hojita--dos {
left: 79%;
top: 30%;
animation: ibHoja 13.8s -6.4s linear infinite;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__hojita--tres {
left: 56%;
top: 10%;
animation: ibHoja 16.6s -10.5s linear infinite;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__hojita--cuatro {
left: 8%;
top: 14%;
animation: ibHoja 14.2s -4.2s linear infinite;
transform: scale(1.18);
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__hojita--cinco {
left: 67%;
top: 18%;
animation: ibHoja 12.9s -8.1s linear infinite;
transform: scale(1.08);
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__hojita--seis {
left: 87%;
top: 12%;
animation: ibHoja 17.4s -11.6s linear infinite;
transform: scale(1.28);
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__hojita--siete {
left: 37%;
top: 19%;
animation: ibHoja 15.1s -2.6s linear infinite;
transform: scale(0.95);
}
@keyframes ibPaisaje {
from {
transform: scale(1) translate3d(0, 0, 0);
}
to {
transform: scale(1.004) translate3d(-0.04%, -0.05%, 0);
}
}
@keyframes ibBrillo {
from {
opacity: 0.58;
}
to {
opacity: 1;
}
}
@keyframes ibLogo {
0%,
100% {
transform: translate3d(-50%, 0, 0);
}
50% {
transform: translate3d(-50%, -5px, 0);
}
}
@keyframes ibRamas {
from {
transform: rotate(-1.6deg);
}
to {
transform: rotate(2deg);
}
}
@keyframes ibPlantasIzq {
0% {
transform: translate3d(0, 0, 0) rotate(-1.4deg) scale(1);
}
50% {
transform: translate3d(-3px, -6px, 0) rotate(0.9deg) scale(1.01);
}
100% {
transform: translate3d(2px, -2px, 0) rotate(2.3deg) scale(1.015);
}
}
@keyframes ibPlantasDer {
0% {
transform: translate3d(0, 0, 0) rotate(1.2deg) scale(1);
}
50% {
transform: translate3d(4px, -5px, 0) rotate(-1deg) scale(1.012);
}
100% {
transform: translate3d(-2px, -1px, 0) rotate(-2.4deg) scale(1.018);
}
}
@keyframes ibHoja {
0% {
opacity: 0;
transform: translate3d(0, -14px, 0) rotate(-24deg);
}
10% {
opacity: 0.96;
}
40% {
opacity: 0.95;
}
78% {
opacity: 0.72;
}
100% {
opacity: 0;
transform: translate3d(150px, 320px, 0) rotate(235deg);
}
}
html[data-aventura-animaciones="reducidas"]
#pantallaInicio.inicioBosqueFinal
.inicioBosque__paisaje,
html[data-aventura-animaciones="reducidas"]
#pantallaInicio.inicioBosqueFinal
.inicioBosque__brillos,
html[data-aventura-animaciones="reducidas"]
#pantallaInicio.inicioBosqueFinal
.inicioBosque__logo,
html[data-aventura-animaciones="reducidas"]
#pantallaInicio.inicioBosqueFinal
.inicioBosque__floresInicio,
html[data-aventura-animaciones="reducidas"]
#pantallaInicio.inicioBosqueFinal
.inicioBosque__floresFin,
html[data-aventura-animaciones="reducidas"]
#pantallaInicio.inicioBosqueFinal
.inicioBosque__hojasAltas,
html[data-aventura-animaciones="reducidas"]
#pantallaInicio.inicioBosqueFinal
.inicioBosque__ramita,
html[data-aventura-animaciones="reducidas"]
#pantallaInicio.inicioBosqueFinal
.inicioBosque__hojita,
body.configuracionJuegoAbiertaV7
#pantallaInicio.inicioBosqueFinal
.inicioBosque__paisaje,
body.configuracionJuegoAbiertaV7
#pantallaInicio.inicioBosqueFinal
.inicioBosque__hojita,
body.configuracionJuegoAbiertaV7
#pantallaInicio.inicioBosqueFinal
.inicioBosque__logo {
animation-play-state: paused !important;
}
@media (orientation: portrait) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__paisaje {
background-position: 50% 50%;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__creditos {
width: 64vw;
height: auto;
top: 2.2%;
left: 1%;
max-height: none;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
width: 94vw;
height: auto;
top: 28%;
max-height: none;
object-fit: contain;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__floresInicio {
width: 49vw;
bottom: -6%;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__floresFin {
width: 46vw;
bottom: -4%;
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
left: 8% !important;
bottom: 17% !important;
gap: 2vw !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar {
width: 68vw !important;
height: 23vw !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
width: 17vw !important;
height: 17vw !important;
}
}
@media (max-height: 480px) and (orientation: landscape) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 9%;
width: min(65vw, 870px);
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
bottom: 2% !important;
}
}
body:has(#pantallaInicio.inicioBosqueFinal:not(.oculto)) #fondoGlobalJuego {
visibility: hidden !important;
opacity: 0 !important;
}
body:has(#pantallaInicio.inicioBosqueFinal:not(.oculto))
#fondoGlobalJuego
.fgCapa {
animation-play-state: paused !important;
}
#pantallaInicio.inicioBosqueFinal.oculto {
display: none !important;
content-visibility: hidden !important;
}
body:has(> #pantallaInicio.inicioBosqueFinal:not(.oculto)) {
height: 100vh;
height: 100dvh;
min-height: 0;
overflow: hidden;
}
#pantallaInicio.inicioBosqueFinal
:is(#botonComenzar, #botonConfiguracionInicioV1)
> :is(img, span) {
display: none !important;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
width: min(58vw, 85vh, 890px);
height: auto;
max-height: none;
object-fit: contain;
top: 12%;
left: 50%;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__creditos {
width: min(27vw, 400px);
max-height: none;
top: 1.5%;
left: 0.75%;
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
left: 50% !important;
bottom: 5% !important;
gap: clamp(8px, 1.25vw, 19px) !important;
transform: translateX(-50%) !important;
justify-content: center !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar {
width: min(36vw, 550px) !important;
height: min(12vw, 183px) !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
width: min(10.3vw, 150px) !important;
height: min(10.3vw, 150px) !important;
}
#pantallaInicio.inicioBosqueFinal
:is(
.inicioBosque__floresInicio,
.inicioBosque__floresFin,
.inicioBosque__hojasAltas,
.inicioBosque__ramita
) {
display: none !important;
}
@media (orientation: portrait) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 23%;
width: min(94vw, 520px);
height: auto;
max-height: none;
object-fit: contain;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__creditos {
top: 2%;
left: 50%;
transform: translateX(-50%);
width: min(78vw, 385px);
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
left: 50% !important;
bottom: 15% !important;
gap: 3vw !important;
transform: translateX(-50%) !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar {
width: 69vw !important;
height: 23vw !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
width: 17.5vw !important;
height: 17.5vw !important;
}
}
@media (max-height: 700px) and (orientation: landscape) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 5%;
width: min(51vw, 82vh, 760px);
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
bottom: 2% !important;
}
}
@media (max-height: 650px) and (orientation: portrait) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 17%;
width: 83vw;
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
bottom: 10% !important;
}
}
@media (hover: none) and (pointer: coarse) {
#pantallaInicio.inicioBosqueFinal #botonComenzar:hover,
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1:hover {
transform: none !important;
filter: drop-shadow(0 7px 8px rgba(32, 13, 6, 0.45)) !important;
}
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
width: min(88vw, 114vh, 1320px);
top: 3.6%;
filter: drop-shadow(0 9px 14px rgba(51, 23, 7, 0.46));
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__lema {
z-index: 6;
width: min(22vw, 320px);
left: 50%;
top: 55.2%;
transform: translateX(-50%);
filter: drop-shadow(0 4px 8px rgba(52, 26, 8, 0.23));
animation: ibLema 6.5s ease-in-out infinite;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__creditos {
width: min(24vw, 350px);
top: 1.6%;
left: 0.8%;
opacity: 0.96;
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
bottom: 4.3% !important;
gap: clamp(6px, 0.7vw, 12px) !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar {
width: min(56vw, 840px) !important;
height: min(19vw, 290px) !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
width: min(8.8vw, 126px) !important;
height: min(8.8vw, 126px) !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar:hover,
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1:hover {
transform: translateY(-4px) scale(1.05) !important;
}
@keyframes ibLema {
0%,
100% {
transform: translate3d(-50%, 0, 0);
}
50% {
transform: translate3d(-50%, -2px, 0);
}
}
html[data-aventura-animaciones="reducidas"]
#pantallaInicio.inicioBosqueFinal
.inicioBosque__lema,
body.configuracionJuegoAbiertaV7
#pantallaInicio.inicioBosqueFinal
.inicioBosque__lema {
animation-play-state: paused !important;
}
@media (orientation: portrait) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__paisaje {
background-size: cover;
background-position: 50% 50%;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__creditos {
width: min(66vw, 330px);
top: 1.8%;
left: 50%;
transform: translateX(-50%);
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 8.2%;
width: min(100vw, 700px);
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__lema {
width: min(34vw, 205px);
top: 45.9%;
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
bottom: 10.8% !important;
gap: 2.1vw !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar {
width: 88vw !important;
height: 29.5vw !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
width: 16vw !important;
height: 16vw !important;
}
}
@media (max-height: 700px) and (orientation: landscape) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 2%;
width: min(81vw, 102vh, 1140px);
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__lema {
width: min(20vw, 285px);
top: 54.7%;
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
bottom: 3.4% !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar {
width: min(58vw, 780px) !important;
height: min(20vw, 255px) !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
width: min(8.6vw, 118px) !important;
height: min(8.6vw, 118px) !important;
}
}
@media (max-height: 650px) and (orientation: portrait) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 7.3%;
width: 96vw;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__lema {
top: 45.2%;
width: 38vw;
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
bottom: 9.4% !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar {
width: 90vw !important;
height: 30vw !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
width: 15.8vw !important;
height: 15.8vw !important;
}
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 6%;
width: min(55vw, 73vh, 820px);
height: auto;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__lema {
top: 51%;
width: min(33vw, 470px);
left: 50%;
transform: translateX(-50%);
height: auto;
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
bottom: 5.2% !important;
gap: clamp(4px, 0.55vw, 8px) !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar {
width: min(36vw, 54vh, 520px) !important;
height: min(12vw, 18vh, 172px) !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
width: min(9.6vw, 14.5vh, 132px) !important;
height: min(9.6vw, 14.5vh, 132px) !important;
}
@media (orientation: portrait) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 11.5%;
width: min(86vw, 485px);
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__lema {
top: 47.3%;
width: min(56vw, 330px);
left: 50%;
transform: translateX(-50%);
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
bottom: 13% !important;
gap: 1.5vw !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar {
width: 74vw !important;
height: 24.8vw !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
width: 18vw !important;
height: 18vw !important;
}
}
@media (max-height: 650px) and (orientation: portrait) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 10%;
width: min(80vw, 400px);
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__lema {
top: 46.6%;
width: 56vw;
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
bottom: 11.6% !important;
}
}
@media (max-height: 450px) and (orientation: landscape) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 4.5%;
width: min(42vw, 61vh);
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__lema {
top: 49.5%;
width: min(28vw, 50vh);
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
bottom: 3% !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar {
width: min(40vw, 58vh) !important;
height: min(13vw, 19vh) !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
width: min(9vw, 13.2vh) !important;
height: min(9vw, 13.2vh) !important;
}
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__plantaEsquina {
position: absolute;
bottom: 0;
z-index: 6;
pointer-events: none;
user-select: none;
width: min(18vw, 240px);
height: auto;
filter: drop-shadow(0 10px 16px rgba(22, 51, 18, 0.25));
transform-origin: bottom center;
animation: ibPlantaSuave 4.8s ease-in-out infinite alternate;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__plantaEsquina--izq {
left: 0;
animation-delay: -0.8s;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__plantaEsquina--der {
right: 0;
animation-delay: -2.1s;
}
@keyframes ibPlantaSuave {
from {
transform: translate3d(0, 0, 0) rotate(-1.2deg);
}
to {
transform: translate3d(0, -3px, 0) rotate(1.2deg);
}
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 11%;
width: min(61vw, 81vh, 910px);
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__lema {
top: 53.4%;
width: min(30vw, 430px);
left: 50%;
transform: translateX(-50%);
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
left: 50% !important;
bottom: 8% !important;
transform: translateX(-50%) !important;
justify-content: center !important;
width: auto !important;
gap: 0 !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar {
width: min(39vw, 58vh, 560px) !important;
height: min(13vw, 19.5vh, 186px) !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
position: absolute !important;
top: 2.4% !important;
right: 1.8% !important;
left: auto !important;
bottom: auto !important;
width: min(9.8vw, 14.8vh, 136px) !important;
height: min(9.8vw, 14.8vh, 136px) !important;
z-index: 18 !important;
}
@media (orientation: portrait) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__plantaEsquina {
width: min(28vw, 165px);
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 14.5%;
width: min(92vw, 520px);
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__lema {
top: 50%;
width: min(46vw, 270px);
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
bottom: 11.4% !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar {
width: 78vw !important;
height: 26vw !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
top: 2.1% !important;
right: 2.2% !important;
width: 17.5vw !important;
height: 17.5vw !important;
}
}
@media (max-height: 700px) and (orientation: landscape) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__plantaEsquina {
width: min(15vw, 190px);
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 9%;
width: min(58vw, 77vh, 860px);
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__lema {
top: 52.2%;
width: min(27vw, 380px);
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
bottom: 5.8% !important;
}
#pantallaInicio.inicioBosqueFinal #botonComenzar {
width: min(41vw, 56vh, 585px) !important;
height: min(13.8vw, 20vh, 198px) !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
width: min(9vw, 13.2vh, 120px) !important;
height: min(9vw, 13.2vh, 120px) !important;
}
}
@media (max-height: 650px) and (orientation: portrait) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 13%;
width: min(86vw, 430px);
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__lema {
top: 49%;
width: 46vw;
}
#pantallaInicio.inicioBosqueFinal .inicioAccionesV1,
#pantallaInicio.inicioBosqueFinal .inicioAccionesEstable1 {
bottom: 10.2% !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
width: 16.8vw !important;
height: 16.8vw !important;
}
}
@media (orientation: portrait) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__creditos {
top: calc(env(safe-area-inset-top, 0px) + 1.4%) !important;
left: 3.8% !important;
transform: none !important;
width: min(60vw, 300px) !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
top: calc(env(safe-area-inset-top, 0px) + 2.1%) !important;
right: 3.2% !important;
left: auto !important;
width: 15.3vw !important;
height: 15.3vw !important;
}
}
@media (max-height: 650px) and (orientation: portrait) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__creditos {
width: min(58vw, 280px) !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
width: 14.8vw !important;
height: 14.8vw !important;
}
}
@media (orientation: portrait) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__creditos {
top: calc(env(safe-area-inset-top, 0px) + 1.2%) !important;
left: 3% !important;
width: min(58vw, 290px) !important;
max-width: 290px !important;
transform: none !important;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__lema {
top: 46.4% !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: min(60vw, 320px) !important;
max-width: 320px !important;
}
#pantallaInicio.inicioBosqueFinal #botonConfiguracionInicioV1 {
top: calc(env(safe-area-inset-top, 0px) + 1.8%) !important;
right: 2.2% !important;
left: auto !important;
width: 13.2vw !important;
height: 13.2vw !important;
min-width: 52px !important;
min-height: 52px !important;
max-width: 62px !important;
max-height: 62px !important;
}
}
@media (max-height: 700px) and (orientation: portrait) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__lema {
top: 45.8% !important;
width: min(62vw, 320px) !important;
}
}
@media (orientation: portrait) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 18.3% !important;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__lema {
top: 53.3% !important;
}
}
@media (max-height: 700px) and (orientation: portrait) {
#pantallaInicio.inicioBosqueFinal .inicioBosque__logo {
top: 17.5% !important;
}
#pantallaInicio.inicioBosqueFinal .inicioBosque__lema {
top: 52.3% !important;
}
}
@media (max-width: 900px) and (orientation: portrait) {
#introduccionV3.introAventuraV6 {
align-items: center !important;
justify-content: center !important;
padding: 4px !important;
overflow: hidden !important;
background: rgba(26, 42, 35, 0.36) !important;
}
#introduccionV3 .introV6Stage {
box-sizing: border-box !important;
flex: 0 0 auto !important;
width: min(97vw, calc(60dvh - 8px), 480px) !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: 971 / 1619 !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
filter: drop-shadow(0 9px 16px rgba(33, 24, 20, 0.28)) !important;
overflow: visible !important;
transform: none !important;
contain: layout style !important;
}
#introduccionV3 .introV6Stage::before,
#introduccionV3 .introV6Stage::after {
display: none !important;
content: none !important;
}
#introduccionV3 .introV6Marco {
display: block !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: fill !important;
z-index: 50 !important;
user-select: none;
pointer-events: none !important;
}
#introduccionV3 .introV6Clip,
#introduccionV3 .introV6Stage[data-escena="dificultad"] .introV6Clip {
inset: 16.2% 12.9% 13.4% 12.9% !important;
border: 0 !important;
border-radius: 6px !important;
background: #f3e6c7 !important;
box-shadow: none !important;
overflow: hidden !important;
z-index: 1 !important;
}
#introduccionV3 .introV6Fondo {
opacity: 0.86 !important;
object-fit: cover !important;
}
#introduccionV3 .introV6Pergamino {
opacity: 0.23 !important;
}
#introduccionV3 .introV6DecoWrap {
display: none !important;
}
#introduccionV3 .introV6Cerrar {
z-index: 60 !important;
right: 6% !important;
top: 6% !important;
width: clamp(28px, 8.5vw, 40px) !important;
height: clamp(28px, 8.5vw, 40px) !important;
filter: drop-shadow(0 2px 3px #56442a99) !important;
}
#introduccionV3 .introV6Stage[data-escena] #introV6Titulo {
position: absolute !important;
top: 1.5% !important;
left: 0 !important;
right: auto !important;
width: 100% !important;
height: 18% !important;
object-fit: contain !important;
transform: none !important;
z-index: 12 !important;
}
#introduccionV3 .introV6Stage[data-escena] .introV6Pose {
position: absolute !important;
top: 20% !important;
bottom: auto !important;
left: 9% !important;
right: auto !important;
width: 82% !important;
height: 43% !important;
object-fit: contain !important;
object-position: center bottom !important;
z-index: 4 !important;
}
#introduccionV3 .introV6Stage[data-escena] .introV6Panel {
position: absolute !important;
top: 54.5% !important;
bottom: auto !important;
left: 1% !important;
right: auto !important;
width: 98% !important;
height: 25.5% !important;
object-fit: contain !important;
transform: none !important;
z-index: 15 !important;
}
#introduccionV3 .introV6Stage[data-escena="explora"] .introV6Panel,
#introduccionV3 .introV6Stage[data-escena="aventura"] .introV6Panel,
#introduccionV3 .introV6Stage[data-escena="recompensa"] .introV6Panel,
#introduccionV3 .introV6Stage[data-escena="estilo"] .introV6Panel {
top: 46.5% !important;
left: 1% !important;
width: 98% !important;
height: 35.8% !important;
transform: none !important;
}
#introduccionV3 .introV6Contenido {
z-index: 10 !important;
}
#introduccionV3 .introV6NombreWrap,
#introduccionV3 .introV6FinalWrap {
z-index: 12 !important;
}
#introduccionV3 .introV6Stage[data-escena] .introV6Pose {
z-index: 4 !important;
}
#introduccionV3 .introV6Nav,
#introduccionV3 .introV6Stage[data-escena="dificultad"] .introV6Nav {
display: flex !important;
justify-content: space-between !important;
position: absolute !important;
left: 1% !important;
right: auto !important;
bottom: 5.8% !important;
top: auto !important;
width: 98% !important;
height: 10% !important;
gap: 0 !important;
z-index: 28 !important;
pointer-events: none !important;
}
#introduccionV3 .introV6Nav::before {
content: none !important;
display: none !important;
}
#introduccionV3 .introV6NavBtn {
position: relative !important;
left: auto !important;
right: auto !important;
flex: 0 0 45% !important;
width: 45% !important;
height: 100% !important;
grid-column: auto !important;
pointer-events: auto !important;
touch-action: manipulation !important;
}
#introduccionV3 .introV6NavBtn.introV6OcultoPrimera {
visibility: hidden !important;
}
#introduccionV3 .introV6BtnImg {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
#introduccionV3 .introV6Progreso,
#introduccionV3 .introV6Stage[data-escena="dificultad"] .introV6Progreso {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: absolute !important;
bottom: 0.5% !important;
top: auto !important;
left: 1% !important;
right: auto !important;
width: 98% !important;
height: 4.8% !important;
padding: 0 1% !important;
gap: 9px !important;
background: rgba(255, 247, 221, 0.8) !important;
border: 1px solid rgba(139, 91, 38, 0.5) !important;
border-radius: 20px !important;
z-index: 29 !important;
box-sizing: border-box !important;
}
#introduccionV3 .introV6Puntos {
display: flex !important;
align-items: center !important;
gap: 5px !important;
}
#introduccionV3 .introV6Punto {
width: 11px !important;
height: 11px !important;
min-width: 11px !important;
border-width: 2px !important;
}
#introduccionV3 .introV6Contador {
font-size: 15px !important;
min-width: 43px !important;
font-weight: 900 !important;
line-height: 1 !important;
white-space: nowrap !important;
color: #512a44 !important;
text-shadow: none !important;
}
#introduccionV3 .introV6Stage[data-escena="nombre"] .introV6NombrePanel {
top: 54% !important;
left: 0 !important;
right: auto !important;
width: 100% !important;
height: 19% !important;
object-fit: contain !important;
z-index: 15 !important;
}
#introduccionV3 .introV6Stage[data-escena="nombre"] .introV6InputNombre {
position: absolute !important;
top: 62.2% !important;
left: 12% !important;
right: auto !important;
width: 76% !important;
height: 8% !important;
font-family: system-ui, Arial, sans-serif !important;
font-size: 16px !important;
font-weight: 750 !important;
letter-spacing: 0 !important;
line-height: 1.05 !important;
padding: 0 7% 0 3% !important;
text-align: center !important;
color: #673818 !important;
background: rgba(255, 251, 235, 0.16) !important;
border: 0 !important;
outline-offset: 2px !important;
box-shadow: none !important;
z-index: 20 !important;
}
#introduccionV3
.introV6Stage[data-escena="nombre"]
.introV6InputNombre::placeholder {
font:
700 14px/1.1 system-ui,
Arial,
sans-serif !important;
color: #80593c !important;
text-align: center !important;
}
#introduccionV3 .introV6Stage[data-escena="nombre"] .introV6CandadoNombre {
top: 56% !important;
right: 7% !important;
left: auto !important;
width: 12% !important;
height: 10% !important;
z-index: 21 !important;
}
#introduccionV3 .introV6Stage[data-escena="dificultad"] #introV6Titulo {
top: 1.5% !important;
left: 0 !important;
width: 100% !important;
height: 16% !important;
transform: none !important;
}
#introduccionV3
.introV6Stage[data-escena="dificultad"]
.introV6DificultadWrap {
top: 18% !important;
left: 4% !important;
right: auto !important;
width: 92% !important;
height: 66% !important;
transform: none !important;
overflow: visible !important;
z-index: 20 !important;
}
#introduccionV3
.introV6Stage[data-escena="dificultad"]
.introV6DificultadBase {
opacity: 0 !important;
}
#introduccionV3 .introV6Stage[data-escena="dificultad"] .introV6DifBtn {
left: 22% !important;
width: 56% !important;
height: 28% !important;
display: block !important;
opacity: 1 !important;
border: 0 !important;
transform: none !important;
pointer-events: auto !important;
}
#introduccionV3 .introV6Stage[data-escena="dificultad"] .introV6DifApoyo {
top: 0 !important;
}
#introduccionV3 .introV6Stage[data-escena="dificultad"] .introV6DifAventura {
top: 31% !important;
}
#introduccionV3 .introV6Stage[data-escena="dificultad"] .introV6DifDesafio {
top: 62% !important;
}
#introduccionV3 .introV6Stage[data-escena="dificultad"] .introV6DifImg {
object-fit: contain !important;
}
#introduccionV3
.introV6Stage[data-escena="dificultad"]
.introV6AvisoDificultad {
top: 90% !important;
left: 1% !important;
width: 98% !important;
height: 10% !important;
object-fit: contain !important;
z-index: 20 !important;
}
#introduccionV3
.introV6Stage[data-escena="iniciemos"]
.introV6FinalNombrePanel {
top: 53% !important;
left: 15% !important;
right: auto !important;
width: 70% !important;
height: 17% !important;
object-fit: contain !important;
z-index: 14 !important;
}
#introduccionV3
.introV6Stage[data-escena="iniciemos"]
.introV6NombreConfirmado {
top: 58% !important;
left: 17% !important;
right: auto !important;
width: 66% !important;
height: 7% !important;
font-size: clamp(16px, 4.6vw, 22px) !important;
font-weight: 900 !important;
z-index: 20 !important;
}
#introduccionV3 .introV6Stage[data-escena="iniciemos"] .introV6Listo {
top: 69% !important;
left: 13% !important;
right: auto !important;
width: 74% !important;
height: 13% !important;
object-fit: contain !important;
z-index: 16 !important;
}
#introduccionV3.introV6TecladoAbierto {
justify-content: flex-start !important;
align-items: center !important;
padding-top: 2px !important;
overflow-y: auto !important;
}
#introduccionV3.introV6TecladoAbierto .introV6Stage {
width: min(96vw, var(--intro-ancho-teclado, 300px)) !important;
}
}
@media (max-width: 900px) and (orientation: portrait) {
#fondoConfiguracionV1 {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 5px !important;
overflow: auto !important;
background: rgba(22, 29, 29, 0.52) !important;
}
#panelConfiguracionV1.configV39 {
position: relative !important;
width: min(94vw, 450px) !important;
height: min(86dvh, 700px) !important;
max-width: 450px !important;
max-height: none !important;
aspect-ratio: auto !important;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
transform: none !important;
filter: drop-shadow(0 10px 16px #29201566) !important;
}
#panelConfiguracionV1 .configV39__marco {
display: block !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: fill !important;
z-index: 0 !important;
pointer-events: none !important;
}
#panelConfiguracionV1 .configV39__cerrar {
right: 5.7% !important;
top: 8% !important;
width: 12% !important;
height: 7.9% !important;
min-width: 38px !important;
min-height: 38px !important;
z-index: 10 !important;
}
#panelConfiguracionV1 .configV39__subtitulo {
position: absolute !important;
top: 16% !important;
left: 11% !important;
right: 11% !important;
width: auto !important;
font:
bold clamp(12px, 3.2vw, 15px)/1.25 Georgia,
serif !important;
color: #6a361e !important;
text-align: center !important;
white-space: normal !important;
}
#panelConfiguracionV1 .configV39__subtitulo::before,
#panelConfiguracionV1 .configV39__subtitulo::after {
display: none !important;
}
#panelConfiguracionV1 .configV39__seccion {
position: absolute !important;
left: 10.5% !important;
right: 10.5% !important;
width: auto !important;
border: 0 !important;
border-radius: 18px !important;
box-sizing: border-box !important;
background: rgba(255, 246, 217, 0.76) !important;
box-shadow: inset 0 0 0 2px #dba356aa !important;
}
#panelConfiguracionV1 .configV39__volumen {
top: 21% !important;
height: 16.7% !important;
}
#panelConfiguracionV1 .configV39__musica {
top: 39.1% !important;
height: 26.2% !important;
}
#panelConfiguracionV1 .configV39__aventura {
top: 66.6% !important;
height: 25.4% !important;
}
#panelConfiguracionV1 .configV39__seccionTitulo,
#panelConfiguracionV1 .configV39__aventura .configV39__seccionTitulo,
#panelConfiguracionV1 .configV39__musica .configV39__seccionTitulo,
#panelConfiguracionV1 .configV39__volumen .configV39__seccionTitulo {
position: absolute !important;
left: 7% !important;
top: 7% !important;
font:
bold clamp(15px, 4.2vw, 19px)/1 Georgia,
serif !important;
color: #68391f !important;
}
#panelConfiguracionV1 .configV39__filaVolumen {
display: grid !important;
position: absolute !important;
grid-template-columns: 42px minmax(0, 1fr) 42px !important;
left: 6% !important;
right: 6% !important;
top: 40% !important;
bottom: 14% !important;
gap: 9px !important;
align-items: center !important;
}
#panelConfiguracionV1 .configV39__sound {
width: 39px !important;
height: 39px !important;
}
#panelConfiguracionV1 .configV39__slider {
height: 30px !important;
}
#panelConfiguracionV1 .configV39__sliderKnob {
width: 28px !important;
height: 28px !important;
}
#panelConfiguracionV1 .configV39__valorVolumen {
font-size: 13px !important;
}
#panelConfiguracionV1 .configV39__musicGrid,
#panelConfiguracionV1 .configV39__actionGrid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: repeat(3, 1fr) !important;
left: 6% !important;
right: 6% !important;
top: 26% !important;
bottom: 7% !important;
gap: 4px !important;
overflow: visible !important;
}
#panelConfiguracionV1 .configV39__pista,
#panelConfiguracionV1 .configV39__action {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
display: grid !important;
grid-template-columns: 36px minmax(0, 1fr) !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 2px 11px !important;
aspect-ratio: auto !important;
border-radius: 13px !important;
background-size: 100% 100% !important;
}
#panelConfiguracionV1 .configV39__pistaIcono,
#panelConfiguracionV1 .configV39__action > img {
width: 32px !important;
height: 32px !important;
transform: none !important;
}
#panelConfiguracionV1 .configV39__pistaNombre,
#panelConfiguracionV1 .configV39__action span {
font:
bold clamp(11px, 3.25vw, 14px)/1.05 Georgia,
serif !important;
white-space: normal !important;
text-align: center !important;
padding: 0 !important;
transform: none !important;
overflow: visible !important;
text-overflow: clip !important;
}
#panelConfiguracionV1 .configV39__aviso {
position: absolute !important;
left: 12% !important;
right: 12% !important;
bottom: 3% !important;
top: auto !important;
font:
bold clamp(10px, 2.8vw, 12px)/1.12 Georgia,
serif !important;
text-align: center !important;
white-space: normal !important;
}
}
@media (max-width: 1000px) {
body:has(#pantallaAvatarStudio:not(.oculto)),
body:has(#pantallaTiendaAvatar:not(.oculto)) {
overflow-y: auto !important;
}
#pantallaMenu.pantallaMenu:not(.oculto) {
display: block !important;
padding: 16px 12px 28px !important;
width: 100% !important;
height: auto !important;
min-height: 100dvh !important;
overflow: visible !important;
box-sizing: border-box !important;
}
#pantallaMenu .layoutMenuPrincipalV311 {
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
width: 100% !important;
min-width: 0 !important;
max-width: 680px !important;
height: auto !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 !important;
transform: none !important;
}
#pantallaMenu .layoutMenuPrincipalV311 #panelJugadorV3,
#pantallaMenu .layoutMenuPrincipalV311 #tarjetaProgresoGeneral {
position: relative !important;
inset: auto !important;
transform: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
box-sizing: border-box !important;
flex: none !important;
}
#pantallaMenu.pantallaMenu:not(.oculto)
.layoutMenuPrincipalV311
.tituloMundos {
position: static !important;
transform: none !important;
white-space: normal !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
#pantallaMenu #mundosProgresoGeneral {
width: 100% !important;
min-width: 0 !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
box-sizing: border-box !important;
}
#pantallaMenu #mundosProgresoGeneral .botonMundoProgresoV3 {
min-width: 0 !important;
width: 100% !important;
min-height: 92px !important;
}
#pantallaAvatarStudio:not(.oculto) {
position: relative !important;
inset: auto !important;
height: auto !important;
min-height: 100dvh !important;
overflow: visible !important;
padding: 12px !important;
box-sizing: border-box !important;
}
#pantallaAvatarStudio .cabeceraAvatarStudio {
position: static !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 0 12px !important;
padding: 12px !important;
transform: none !important;
box-sizing: border-box !important;
flex: none !important;
}
#pantallaAvatarStudio .tituloAvatarStudioV38 {
position: static !important;
width: 100% !important;
transform: none !important;
}
#pantallaAvatarStudio .cabeceraAvatarStudio .tituloAvatarStudioV38 h2 {
font-size: 25px !important;
margin: 0 !important;
}
#pantallaAvatarStudio .cabeceraAvatarStudio .tituloAvatarStudioV38 p {
font-size: 13px !important;
}
#pantallaAvatarStudio .espacioCabeceraAvatarStudioV39,
#pantallaAvatarStudio .espacioSuperiorAvatarStudioV38 {
display: none !important;
}
#pantallaAvatarStudio .zonaSuperiorAvatarStudioV38 {
position: static !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: auto !important;
margin: 0 0 16px !important;
padding: 0 !important;
gap: 12px !important;
transform: none !important;
flex-basis: auto !important;
min-height: 0 !important;
}
#pantallaAvatarStudio .bloquePreviewAvatarStudioV38,
#pantallaAvatarStudio #previewAvatarStudio {
position: static !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
transform: none !important;
}
#pantallaAvatarStudio .accionesSuperioresAvatarStudioV38 {
position: static !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
gap: 6px !important;
transform: none !important;
}
#pantallaAvatarStudio #botonGuardarAvatar,
#pantallaAvatarStudio #botonRestablecerAvatar,
#pantallaAvatarStudio #botonTiendaAvatarStudio {
position: static !important;
width: 100% !important;
height: auto !important;
min-width: 0 !important;
min-height: 64px !important;
padding: 8px 4px !important;
margin: 0 !important;
transform: none !important;
font-size: 11px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 4px !important;
}
#pantallaAvatarStudio
.accionesSuperioresAvatarStudioV38
button
:is(strong, span) {
font-size: 11px !important;
white-space: normal !important;
}
#pantallaAvatarStudio .contenidoAvatarStudio {
position: static !important;
margin: 0 !important;
width: 100% !important;
}
}
@media (max-width: 1000px) {
#pantallaAvatarStudio .barraInfoAvatarStudioV39 {
position: static !important;
margin: 10px 0 !important;
}
#pantallaTiendaAvatar:not(.oculto) {
max-height: none !important;
justify-content: flex-start !important;
position: relative !important;
inset: auto !important;
padding: 12px !important;
height: auto !important;
min-height: 100dvh !important;
overflow: visible !important;
box-sizing: border-box !important;
}
#pantallaTiendaAvatar .cabeceraTiendaAvatar,
#pantallaTiendaAvatar .zonaSuperiorTiendaAvatar,
#pantallaTiendaAvatar .bloqueAvatarTiendaV3 {
position: static !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 0 14px !important;
padding: 10px !important;
gap: 12px !important;
transform: none !important;
flex: none !important;
box-sizing: border-box !important;
}
#pantallaTiendaAvatar .tituloTiendaAvatarV3 {
width: 100% !important;
position: static !important;
transform: none !important;
}
#pantallaTiendaAvatar .tituloTiendaAvatarV3 h2 {
font-size: 26px !important;
margin: 0 !important;
}
#pantallaTiendaAvatar .tituloTiendaAvatarV3 p {
font-size: 14px !important;
margin: 8px 0 !important;
}
#pantallaTiendaAvatar #previewTiendaAvatar,
#pantallaTiendaAvatar .recursosTiendaV3 {
position: static !important;
width: 100% !important;
height: auto !important;
transform: none !important;
margin: 0 !important;
}
#pantallaTiendaAvatar .recursosTiendaV3 {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 8px !important;
}
#pantallaTiendaAvatar .recursosTiendaV3 > div {
width: auto !important;
min-width: 80px !important;
padding: 8px !important;
}
#pantallaTiendaAvatar #botonVolverTiendaAvatar:is(button),
#pantallaTiendaAvatar #botonIrEstudioAvatar:is(button) {
position: static !important;
inset: auto !important;
transform: none !important;
width: auto !important;
min-height: 48px !important;
height: auto !important;
margin: 0 !important;
padding: 10px 16px !important;
}
#pantallaTiendaAvatar #categoriasTiendaAvatar {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
padding: 0 !important;
margin: 0 0 16px !important;
gap: 6px !important;
}
#pantallaTiendaAvatar #categoriasTiendaAvatar button {
min-width: 0 !important;
width: 100% !important;
padding: 8px 4px !important;
}
#pantallaTiendaAvatar #itemsTiendaAvatar {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
#pantallaViaje:not(.oculto) {
position: relative !important;
inset: auto !important;
display: block !important;
min-height: 100dvh !important;
height: auto !important;
max-height: none !important;
width: 100% !important;
padding: 24px 18px 64px !important;
box-sizing: border-box !important;
overflow: visible !important;
background: linear-gradient(135deg, #fff8e4, #f4f0ff 65%, #e9f7ed) !important;
color: #31294d;
font-family: "Trebuchet MS", Arial, sans-serif;
z-index: 30;
}
#pantallaViaje .viajeShell {
max-width: 1100px;
margin: auto;
}
#pantallaViaje .viajeCabecera {
display: flex;
gap: 24px;
align-items: flex-start;
margin: 0 0 26px;
}
#pantallaViaje h1 {
font:
800 clamp(27px, 4vw, 42px)/1.12 "Trebuchet MS",
Arial,
sans-serif;
color: #443087;
margin: 2px 0 8px;
text-align: left;
}
#pantallaViaje h2 {
font:
700 23px/1.2 "Trebuchet MS",
Arial,
sans-serif;
color: #453475;
margin: 0 0 12px;
text-align: left;
}
#pantallaViaje h3 {
font:
700 18px/1.3 "Trebuchet MS",
Arial,
sans-serif;
color: #453475;
margin: 12px 0;
}
#pantallaViaje p {
line-height: 1.5;
margin: 8px 0 14px;
}
#pantallaViaje .viajeSubtitulo {
margin: 0;
color: #6b6280;
font-size: 16px;
}
#pantallaViaje .viajeContenido {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
#pantallaViaje .viajeContenido > * {
min-width: 0;
}
#pantallaViaje .viajeTarjeta {
background: rgba(255, 255, 255, 0.93);
border: 2px solid #dfd5f2;
border-radius: 22px;
padding: 24px;
min-width: 0;
box-shadow: 0 6px 0 #e6dff0;
}
#pantallaViaje .viajeGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.viajeBoton,
#pantallaViaje button {
position: static;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: auto;
min-width: 0;
min-height: 44px;
height: auto;
max-width: 100%;
margin: 5px 6px 5px 0;
padding: 11px 17px;
border: 2px solid #8e7bc9;
border-radius: 13px;
background: #f5f1ff;
color: #453475;
box-shadow: 0 3px 0 #d4c9ed;
font:
700 15px/1.3 "Trebuchet MS",
Arial,
sans-serif;
text-align: center;
white-space: normal;
cursor: pointer;
transition:
background-color 0.15s,
border-color 0.15s;
transform: none;
}
.viajeBoton:hover:not(:disabled),
#pantallaViaje button:hover:not(:disabled) {
background: #e8e0fb;
border-color: #6545b4;
transform: none;
}
.viajeBoton:disabled,
#pantallaViaje button:disabled {
cursor: default;
opacity: 0.55;
box-shadow: none;
}
.viajeBoton:focus-visible,
#pantallaViaje :is(button, input, select, textarea):focus-visible {
outline: 3px solid #d89012;
outline-offset: 3px;
}
#pantallaViaje .viajePrimario,
.viajeBoton.viajePrimario {
background: #6542b3;
color: #fff;
border-color: #593599;
box-shadow: 0 3px 0 #3d2670;
}
#pantallaViaje .viajeSecundario {
flex: none;
background: #fff;
}
#pantallaViaje button[aria-pressed="true"] {
border-color: #4d8c64;
background: #e3f3e8;
color: #22583b;
}
.viajeFila {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
#pantallaViaje .viajeCampo {
display: flex;
flex-direction: column;
gap: 7px;
text-align: left;
margin: 12px 0;
flex: 1;
min-width: 150px;
color: #453475;
font-weight: 700;
}
#pantallaViaje .viajeCampo small {
font-weight: 400;
line-height: 1.4;
color: #6b6280;
}
#pantallaViaje :is(input, select, textarea) {
box-sizing: border-box;
min-width: 0;
max-width: 100%;
width: 100%;
min-height: 46px;
padding: 11px 12px;
border: 2px solid #bcb0d7;
border-radius: 10px;
background: #fff;
color: #302a3c;
font:
16px/1.4 "Trebuchet MS",
Arial,
sans-serif;
box-shadow: none;
}
#pantallaViaje textarea {
min-height: 95px;
resize: vertical;
}
#pantallaViaje input[type="checkbox"] {
width: 24px;
min-height: 24px;
height: 24px;
accent-color: #6542b3;
}
#pantallaViaje .viajeCampo:has(input[type="checkbox"]) {
display: grid;
grid-template-columns: 1fr 30px;
gap: 8px 20px;
border-bottom: 1px solid #e4dff0;
padding: 8px 0;
}
#pantallaViaje .viajeCampo:has(input[type="checkbox"]) small {
grid-column: 1 / -1;
}
#pantallaViaje fieldset {
min-width: 0;
border: 2px solid #e4dff0;
border-radius: 13px;
padding: 12px 18px;
}
#pantallaViaje .viajePerfilesAsignacion {
max-height: 320px;
overflow: auto;
}
.viajeAviso {
padding: 12px 15px;
border: 1px solid #e2c277;
border-radius: 12px;
background: #fff5d8;
color: #69501a;
line-height: 1.5;
}
.viajeAviso:empty {
display: none;
}
.viajeAviso.viajeBien {
background: #e9f5ed;
border-color: #a8c8b0;
color: #245a3e;
}
#pantallaViaje .viajeDato {
padding: 12px 18px;
border-radius: 14px;
background: #ede7fa;
color: #49337d;
font-weight: 700;
}
#pantallaViaje .viajeNumero {
font-size: 42px;
font-weight: 800;
color: #6542b3;
margin-bottom: 0;
}
#pantallaViaje .viajeEtiqueta {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
color: #6c598d;
}
#pantallaViaje .viajeRuta {
padding: 0;
margin: 16px 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
list-style: none;
}
#pantallaViaje .viajeRuta li {
padding: 12px 7px;
min-height: 74px;
border: 2px dashed #c7bad9;
border-radius: 13px;
background: #f3edf9;
color: #6e5c82;
font-size: 12px;
font-weight: 700;
line-height: 1.35;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
#pantallaViaje .viajeRuta .viajeHitoHecho {
border: 2px solid #81b293;
background: #e0f0e5;
color: #245438;
}
#pantallaViaje .viajeCapitulo {
display: flex;
width: 100%;
justify-content: flex-start;
text-align: left;
}
.viajeCompanero {
display: flex;
align-items: center;
gap: 18px;
padding: 12px 16px;
border: 2px solid #ded6ef;
border-radius: 18px;
background: #fcf9ff;
min-width: 0;
}
.viajeCompaneroAvatar {
position: relative;
width: 88px;
height: 88px;
flex: 0 0 88px;
}
.viajeCompaneroAvatar .avatarCompuesto.viajeAvatar {
width: 88px !important;
height: 88px !important;
margin: 0 !important;
}
.viajeCompaneroTexto {
margin: 0 !important;
color: #524374;
font:
700 15px/1.4 "Trebuchet MS",
Arial,
sans-serif;
}
#viajeCompaneroPregunta {
max-width: 650px;
margin: 0 auto 16px;
text-align: left;
}
#viajeCompaneroPregunta .viajeCompaneroAvatar {
width: 62px;
height: 62px;
flex-basis: 62px;
}
#viajeCompaneroPregunta .avatarCompuesto.viajeAvatar {
width: 62px !important;
height: 62px !important;
}
.viajeCompanero[data-estado="celebracion"] .viajeCompaneroAvatar {
animation: viajeCelebrar 0.7s ease 1;
}
.viajeCompanero[data-estado="pensamiento"] .viajeCompaneroAvatar {
animation: viajePensar 0.9s ease 1;
}
.viajeCompanero[data-estado="animo"] {
border-color: #e3c894;
background: #fffbec;
}
.viajeEmblema {
position: absolute !important;
right: 0;
bottom: 0;
z-index: 40;
display: grid;
place-items: center;
width: 28px;
height: 28px;
font-size: 18px;
border: 2px solid #b88625;
border-radius: 50%;
background: #fff2bd;
box-shadow: 0 2px 4px #0002;
}
@keyframes viajeCelebrar {
0%,
100% {
transform: translateY(0);
}
45% {
transform: translateY(-7px);
}
}
@keyframes viajePensar {
0%,
100% {
transform: rotate(0);
}
50% {
transform: rotate(-5deg);
}
}
#pantallaViaje .viajeConsigna {
font-size: 20px;
font-weight: 700;
color: #453475;
}
#pantallaViaje .viajeOpciones {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 16px 0;
}
#pantallaViaje .viajeOpciones button {
margin: 0;
min-height: 60px;
}
#pantallaViaje .viajeFichaGrande {
background: #f3ebd1;
border: 2px solid #d9bd7d;
border-radius: 18px;
padding: 25px;
text-align: center;
font-size: 27px;
font-weight: 700;
color: #604722;
}
#pantallaViaje .viajeOrden {
background: #f6f2fd;
border-radius: 14px;
padding: 12px 20px 12px 40px;
min-height: 50px;
line-height: 1.8;
}
#pantallaViaje .viajeLectura {
display: grid;
gap: 8px;
background: #fff9e9;
padding: 18px;
border: 2px solid #e6d6ad;
border-radius: 17px;
}
#pantallaViaje .viajeLectura button {
text-align: left;
justify-content: flex-start;
background: #fff;
line-height: 1.6;
font-weight: 400;
}
#pantallaViaje .viajePistaCarrito {
position: relative;
background: #e9e8e2;
border-radius: 12px;
margin: 12px 0;
padding: 15px;
min-height: 65px;
border-bottom: 7px solid #a19c8a;
}
#pantallaViaje .viajePistaCarrito[data-superficie="rugoso"] {
border-bottom-style: dashed;
background: #f0e4ce;
}
#pantallaViaje .viajeCarrito {
position: absolute;
bottom: 5px;
left: var(--recorrido, 5%);
color: #6b45b4;
font-size: 32px;
transition: left 1.1s ease-out;
}
#pantallaViaje .viajeTablaScroll {
overflow: auto;
box-sizing: border-box;
max-width: 100%;
border: 1px solid #ded7e9;
border-radius: 12px;
margin: 12px 0;
}
#pantallaViaje .viajeTabla {
border-collapse: collapse;
width: 100%;
font-size: 14px;
background: #fff;
}
#pantallaViaje .viajeTabla :is(th, td) {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid #ece6f3;
vertical-align: top;
}
#pantallaViaje .viajeTabla th {
background: #eee8f8;
color: #4b3974;
}
#pantallaViaje .viajeEncargo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
justify-content: space-between;
border-top: 1px solid #e8e2ef;
padding: 10px 0;
}
#pantallaViaje .viajeDetalle {
border-left: 3px solid #d9b36c;
padding: 6px 12px;
color: #665231;
}
.viajeAccesos {
position: static;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 auto 10px;
padding: 0;
width: fit-content;
max-width: 100%;
}
.viajeAccesos .viajeBoton { margin:0; padding:8px 16px; min-height:44px; font-size:14px; }
.viajeAccesos[hidden] { display:none !important; }
.viajeRutaDesplegable { padding:12px 16px; border:1px solid #c7b6e5; border-radius:14px; }
.viajeRutaDesplegable summary { cursor:pointer; font-weight:700; color:#453475; min-height:32px; }
#pantallaViaje .viajeInicioMision { gap:16px; }
#pantallaViaje .viajeInicioMision .viajeHeroTitulo { display:none; }
#pantallaViaje .viajeInicioMision .viajeHeroMision { margin:0; padding:18px; min-height:0; }
#pantallaViaje .viajeInicioMision .viajeHeroResumen { margin-bottom:0; }
#pantallaViaje .viajeInicioMision .viajeTarjeta { padding:18px; }
#viajeAyudas {
font:
15px/1.4 "Trebuchet MS",
Arial,
sans-serif;
max-width: 690px;
margin: 8px auto 18px;
text-align: left;
color: #504564;
}
#viajeAyudas .viajeFila {
justify-content: center;
}
#viajeAyudas .viajeBoton,
#viajeAyudas button {
min-height: 44px;
padding: 9px 14px;
border: 2px solid #ac96d5;
border-radius: 12px;
background: #f5f0ff;
color: #513581;
font-weight: 700;
cursor: pointer;
}
#viajeAyudas .viajePasos {
text-align: center;
margin: 8px 0;
}
#viajeAyudas .viajePasosDestacados {
padding: 12px;
background: #fff3cd;
border-radius: 10px;
color: #614d21;
font-weight: 700;
}
#viajeAyudas .viajePista {
padding: 12px;
background: #eef6e9;
border-radius: 10px;
color: #385336;
}
#viajeAyudas .viajePista[hidden] {
display: none !important;
}
#viajeAyudas .viajeClaves {
margin: 8px 0 0;
text-align: center;
font-size: 13px;
}
#viajeAyudas .viajeClaves strong {
background: #eee5fc;
padding: 3px 6px;
border-radius: 6px;
display: inline-block;
}
.viajeTextoGrande
#pantallaPregunta
:is(
#textoPregunta,
.opcionPregunta,
.botonRelacionar,
.botonOrden,
.botonEspecial,
.instruccionOrden,
.instruccionRelacionar
) {
font-size: 22px !important;
line-height: 1.5 !important;
}
.viajeTextoGrande #pantallaViaje :is(p, button, label, td) {
font-size: 18px;
}
.viajeFoco #pantallaPregunta {
background: #f6f2fc !important;
}
.viajeFoco #pantallaPregunta .viajeCompaneroAvatar {
display: none;
}
.viajeMovimientoReducido
:is(
.viajeCompaneroAvatar,
.avatarCompuesto,
.avatarCompuesto *,
[data-aventura-animada],
.viajeCarrito
) {
animation-play-state: paused !important;
transition: none !important;
}
@media (max-width: 720px) {
#pantallaViaje:not(.oculto) {
padding: 16px 12px 32px !important;
}
#pantallaViaje .viajeCabecera {
flex-direction: column;
gap: 12px;
}
#pantallaViaje .viajeGrid {
grid-template-columns: 1fr;
}
#pantallaViaje .viajeTarjeta {
padding: 17px;
}
#pantallaViaje .viajeRuta {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
#pantallaViaje .viajeRuta li {
font-size: 12px;
padding: 10px 8px;
min-height: 48px;
}
#pantallaViaje .viajeRuta li:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
#pantallaViaje .viajeOpciones {
grid-template-columns: 1fr;
}
#pantallaViaje .viajeLectura {
padding: 10px;
}
.viajeAccesos .viajeBoton {
padding: 9px 11px;
font-size: 12px;
}
.viajeCompanero {
gap: 12px;
}
.viajeCompaneroTexto {
font-size: 14px;
}
#pantallaViaje .viajeCampo {
min-width: 130px;
}
}
@media (prefers-reduced-motion: reduce) {
.viajeCompaneroAvatar,
.viajeCarrito {
animation: none !important;
transition: none !important;
}
}
#pantallaViaje .viajeTarjetaMundo h2 {
display: flex;
align-items: center;
gap: 14px;
}
#pantallaViaje .viajeIconoMundo {
width: 56px;
height: 56px;
flex: 0 0 56px;
object-fit: contain;
}
#pantallaViaje .viajeTarjetaMundo[data-curso="Ciencia y Ambiente"] {
border-top: 5px solid #719e72;
}
#pantallaViaje .viajeTarjetaMundo[data-curso="Comunicación"] {
border-top: 5px solid #9b7bca;
}
#pantallaViaje .viajeTarjetaMundo[data-curso="Personal Social"] {
border-top: 5px solid #c29757;
}
#pantallaViaje .viajeTarjetaMundo[data-curso="Religión"] {
border-top: 5px solid #77a6b8;
}
#pantallaViaje .viajeProgresoExpedicion { color:#493286; font-weight:800; font-size:clamp(16px,2.4vw,21px); margin-bottom:10px; }
#pantallaViaje .viajePiezas { display:flex; gap:12px; margin:12px 0 18px; flex-wrap:wrap; }
#pantallaViaje .viajePiezas span { display:grid; place-items:center; width:43px; height:43px; border-radius:13px; border:2px dashed #b7a7d2; color:#806ca2; background:#f8f5fc; font-size:22px; }
#pantallaViaje .viajePiezas .viajePiezaLista { border-style:solid; border-color:#dca955; background:#fff3cf; color:#8b5b13; }
#pantallaViaje .viajeCuriosidad { background:#fff4d6; border-left:5px solid #d1a34c; padding:18px; border-radius:10px; font-size:clamp(16px,2vw,19px); }
#pantallaViaje .viajeEtapaContenido { min-width:0; }
@media (max-width:580px) { #pantallaViaje .viajePiezas span { width:36px; height:36px; } }
#pantallaViaje h1:focus { outline: none; }
#pantallaViaje .viajeHeroMision {
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);
gap:18px;
align-items:center;
padding:22px;
border:2px solid #ded3f5;
border-radius:24px;
background:linear-gradient(135deg,#fffef8,#f5efff 55%,#eef8f1);
box-shadow:0 8px 0 #e7dff5;
}
#pantallaViaje .viajeHeroTexto { min-width:0; }
#pantallaViaje .viajeHeroEtiqueta,
#pantallaViaje .viajeEtapaSobretitulo {
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:#efe6ff;
color:#5d429b;
font-size:12px;
font-weight:800;
letter-spacing:.03em;
text-transform:uppercase;
}
#pantallaViaje .viajeHeroTitulo {
margin-top:12px;
margin-bottom:10px;
font-size:clamp(26px,3.4vw,36px);
}
#pantallaViaje .viajeHeroResumen {
margin:0;
color:#5f5771;
font-size:17px;
}
#pantallaViaje .viajeMarcoImagen {
position:relative;
overflow:hidden;
border-radius:20px;
background:linear-gradient(180deg,#ffffff,#f8f3ff);
border:2px solid #dccff1;
box-shadow:0 4px 0 #e5dcf5;
}
#pantallaViaje .viajeImgReal {
display:block;
width:100%;
height:100%;
object-fit:cover;
}
#pantallaViaje .viajeHeroImagen { min-height:210px; }
#pantallaViaje .viajeActividadTarjeta {
padding-top:18px;
background:linear-gradient(180deg,#ffffff,#fbf8ff);
}
#pantallaViaje .viajeActividadCabecera {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(220px,.8fr);
gap:16px;
align-items:center;
margin-bottom:18px;
padding-bottom:18px;
border-bottom:2px dashed #ddd1f0;
}
#pantallaViaje .viajeActividadCabeceraTexto p { color:#635879; }
#pantallaViaje .viajeActividadHero { min-height:180px; }
#pantallaViaje .viajeExpedicionFase2 {
display:grid;
gap:14px;
}
#pantallaViaje .viajeEtapaPanel,
#pantallaViaje .viajeCuriosidadPanel {
display:grid;
gap:16px;
padding:18px;
border:2px solid #e5dbf6;
border-radius:20px;
background:linear-gradient(180deg,#fff,#fcf8ff);
}
#pantallaViaje .viajeEtapaCabecera {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(220px,.75fr);
gap:16px;
align-items:center;
}
#pantallaViaje .viajeEtapaCabecera h3 { margin:10px 0 0; }
#pantallaViaje .viajeEtapaInterior,
#pantallaViaje .viajeActividadBloque {
display:grid;
gap:14px;
}
#pantallaViaje .viajeEtapaImagen { min-height:170px; }
#pantallaViaje .viajeEtapaImagenInterior { min-height:160px; }
#pantallaViaje .viajeCuriosidadPanel {
background:linear-gradient(180deg,#fff9ea,#fffdf7);
border-color:#e5cc8b;
}
#pantallaViaje .viajeCuriosidadImagen { min-height:180px; }
#pantallaViaje .viajeRecuerdoVisual {
margin-bottom:14px;
}
#pantallaViaje .viajeRecuerdoImagen {
min-height:220px;
}
#pantallaViaje .viajeGaleriaRecuerdos {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
margin-top:8px;
}
#pantallaViaje .viajeRecuerdoCard {
display:grid;
gap:12px;
padding:16px;
border-radius:18px;
border:2px solid #ddd4f1;
background:linear-gradient(180deg,#fff,#faf7ff);
box-shadow:0 5px 0 #ece4f8;
}
#pantallaViaje .viajeRecuerdoCard.equipado {
border-color:#d5a043;
background:linear-gradient(180deg,#fffef6,#fff7d8);
box-shadow:0 5px 0 #ecd898;
}
#pantallaViaje .viajeRecuerdoCardCabecera {
display:flex;
gap:10px;
align-items:center;
color:#43306f;
}
#pantallaViaje .viajeRecuerdoSimbolo {
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:50%;
background:#f1e9ff;
font-size:20px;
}
#pantallaViaje .viajeRecuerdoMini { min-height:150px; }
#pantallaViaje .viajeRecuerdoMeta {
margin:0;
color:#6a617d;
font-size:14px;
}
@media (max-width: 900px) {
#pantallaViaje .viajeHeroMision,
#pantallaViaje .viajeActividadCabecera,
#pantallaViaje .viajeEtapaCabecera {
grid-template-columns:1fr;
}
#pantallaViaje .viajeGaleriaRecuerdos {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width: 640px) {
#pantallaViaje .viajeHeroMision,
#pantallaViaje .viajeEtapaPanel,
#pantallaViaje .viajeCuriosidadPanel { padding:16px; }
#pantallaViaje .viajeGaleriaRecuerdos { grid-template-columns:1fr; }
}
#pantallaViaje .viajeActividadCuerpo {
display:grid;
gap:14px;
}
#pantallaPregunta.jefeCombateV2 .tarjetaPregunta {max-width: 960px; margin-inline: auto; border: 2px solid var(--jefe-v2-color, #865bbd); background: linear-gradient(145deg,#fffaf0 0%,#fcf9ff 60%,#f2edff 100%); box-shadow: 0 8px 26px #37215b22;}
#pantallaPregunta.jefeCombateV2 .tarjetaPregunta > .iconoPregunta {display: none;}
#pantallaPregunta.jefeCombateV2 #textoPregunta {font-family: inherit; font-size: clamp(1.3rem,2.4vw,2rem); letter-spacing: .01em; margin: 12px auto 20px; line-height: 1.25;}
#pantallaPregunta.jefeCombateV2 .jefeV2Superficie {display:grid; grid-template-columns: minmax(155px, 32%) 1fr; gap:20px; align-items: center; background:linear-gradient(125deg,#f0e7d3,#fff7e7 50%,#f2ebff); border:2px solid #e3c890; border-radius:22px; padding:18px; text-align:left;}
.jefeV2Marco {min-height:172px; aspect-ratio: 4/3; border: 3px solid #c9a55d; border-radius:18px; background:radial-gradient(circle at 45% 40%,#fcf8ee,#dfcc9d); display:grid; place-items:center; overflow:hidden; position:relative;}
.jefeV2Emblema {font-size:clamp(52px,8vw,90px); line-height:1.15; filter:drop-shadow(0 3px 3px #6b4a2340); text-align:center;}
.jefeV2Imagen {width:100%;height:100%;object-fit:contain;position:absolute;inset:0;}
.jefeV2Marco.conImagen .jefeV2Emblema {display:none;}
.jefeV2Sobretitulo {font-size:.78rem;font-weight:900;letter-spacing:.12em;color:#856123;}
.jefeV2Titulo {font-size:clamp(1.3rem,2.5vw,2rem);line-height:1.2;margin:9px 0;color:#543b8e;}
.jefeV2Subtitulo {font-size:1rem;margin:0;color:#685777;}
.jefeV2Introduccion {grid-column:1/-1;padding:0 4px;display:grid;gap:11px;color:#43365d;}
.jefeV2Introduccion p {margin:0;line-height:1.5;}
.jefeV2TiempoInicio {font-weight:800;color:#794c14;}
.jefeV2Recompensa {border:1px solid #e9cf83;background:#fff4ce;border-radius:11px;padding:10px;}
.jefeV2Boton {background:linear-gradient(#7750c7,#593399); color:white; font-weight:800; font-size:1rem; border:2px solid #52318c; padding:13px 18px; border-radius:13px; cursor:pointer; box-shadow: 0 3px 0 #43247e;}
.jefeV2Boton:hover:not(:disabled) {filter:brightness(1.07);transform:translateY(-1px);}
.jefeV2Boton:focus-visible,.jefeV2Opcion:focus-visible,.jefeV2Select:focus-visible {outline:3px solid #dd9b28;outline-offset:2px;}
.jefeV2Control {padding:8px 0 14px;}
.jefeV2Arriba {display:flex;align-items:center;justify-content:space-between;gap:10px;color:#4e3883;font-weight:850;flex-wrap:wrap;}
.jefeV2Reloj {font-size:1.55rem;font-variant-numeric:tabular-nums;color:#6b438b;}
.jefeV2BarraTiempo {height:14px;background:#ddd7ed;border:1px solid #ac9fd0;border-radius:100px;overflow:hidden;margin-top:10px;}
.jefeV2BarraRelleno {background:linear-gradient(90deg,#cbac54,#8a51d0);height:100%;width:100%;border-radius:100px;transition:width .2s linear;}
#pantallaPregunta.jefeV2Urgente .jefeV2Reloj {color:#b63145;}
#pantallaPregunta.jefeV2Urgente .jefeV2BarraRelleno {background:#c9444e;}
.jefeV2Prueba {background:#fff;border:1px solid #e1d6f2;border-radius:18px;padding:20px;color:#47355f;}
.jefeV2Consigna {font-size:clamp(1.07rem,1.6vw,1.25rem);font-weight:700;line-height:1.52;margin:0 0 16px;white-space:pre-wrap;}
.jefeV2Propuesta {background:#f8f0d5;padding:14px;border-left:5px solid #c9a45a;border-radius:10px;font-weight:700;margin:8px 0 16px;}
.jefeV2Opciones {display:grid;gap:10px;}
.jefeV2Opcion {width:100%;background:#f5f0ff;border:1.5px solid #a994de;color:#453072;border-radius:12px;padding:13px 16px;text-align:left;line-height:1.45;font-size:1rem;cursor:pointer;}
.jefeV2Opcion:hover:not(:disabled) {background:#e7dbff;}
.jefeV2Marcado {background:#d7c3ff!important;outline:2px solid #8455c3;}
.jefeV2Mensaje {margin:12px 0;color:#157251;font-weight:750;min-height:1.4em;}
.jefeV2MensajeError {color:#a73445;}
.jefeV2Pareja {padding:11px 13px;border:1px solid #d7c8ee;border-radius:12px;background:#f8f5ff;}
.jefeV2Pareja label {display:grid;gap:8px;line-height:1.45;font-weight:650;}
.jefeV2Select {font-size:1rem;padding:10px;width:100%;min-width:0;border:1px solid #9e82d5;color:#49337b;border-radius:9px;background:white;}
.jefeV2Nota {font-size:.95rem;color:#5c4d71;}
.jefeV2Victoria {padding:20px;border:2px solid #dfc781;border-radius:20px;text-align:center;background:#fff2d5;color:#59406e;}
.jefeV2Victoria h3 {font-size:1.4rem;margin:10px;}
.jefeV2SelloMapa {display:block;margin-top:8px;padding:5px;font-size:.72rem;color:#846118;background:#fff0c7;border:1px solid #dcc17c;border-radius:6px;}
.jefeV2Alerta {color:#a53948;font-weight:750;}
@media(max-width:620px){
#pantallaPregunta.jefeCombateV2 .jefeV2Superficie {grid-template-columns:1fr;gap:12px;padding:12px;}
.jefeV2Marco {width:min(100%,230px);min-height:130px;margin:auto;}
.jefeV2CabeceraTexto {text-align:center;}
.jefeV2Introduccion {padding:4px;}
.jefeV2Prueba {padding:12px;}
.jefeV2Consigna {font-size:1.04rem;}
.jefeV2Opcion {padding:12px;}
}
#pantallaPregunta.jefeCombateV2 .tarjetaPregunta > #preguntaContexto {display:none !important;}
#pantallaPregunta.jefeCombateV2 #textoPregunta {border:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;color:#ffe6a5!important;}
#pantallaPregunta.jefeCombateV2 .jefeV2Arriba {color:#f1dbab;}
#pantallaPregunta.jefeCombateV2 .jefeV2Reloj {color:#efca68;}
#pantallaPregunta.jefeCombateV2 .jefeV2Prueba {color:#47355f;}
@media (max-width:620px) {
#pantallaPregunta.jefeCombateV2 #textoPregunta {color:#56357d!important;text-shadow:none!important;}
#pantallaPregunta.jefeCombateV2 .jefeV2Arriba {color:#5b3a82!important;}
#pantallaPregunta.jefeCombateV2 .jefeV2Reloj {color:#7b4eaf!important;}
#pantallaPregunta.jefeCombateV2.jefeV2Urgente .jefeV2Reloj {color:#aa2938!important;}
}
.jefeV2Consigna {white-space:pre-line;}
#tarjetaProgresoGeneral .indicadorModoActualV1 {
font: 700 clamp(11px, 1vw, 13px)/1.4 "Comfortaa", sans-serif;
color: #5b4287;
border-radius: 8px;
margin: 4px 0 7px;
padding: 3px 8px;
background: rgba(133, 103, 192, .09);
text-align: right;
}
@media (max-width: 680px) {
#tarjetaProgresoGeneral .indicadorModoActualV1 {
text-align: center;
font-size: 11px;
}
}
.secretoBarraGeneral[hidden]{display:none!important}
.secretoBarraGeneral{margin:9px 0 12px;padding:8px 12px;border:1px solid #c7b2e4;border-radius:12px;background:rgba(247,240,255,.9)}
.secretoBarraEncabezado{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#614092;font:700 13px/1.4 'Trebuchet MS',sans-serif}
.secretoBarraPista{height:8px;margin:5px 0 4px;border:1px solid #b7a1dc;border-radius:999px;background:#e9ddfa;overflow:hidden}
.secretoBarraRelleno{height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,#7855c9,#bb7ae6);transition:width .3s ease}
.secretoBarraNota{font:600 11px/1.3 'Trebuchet MS',sans-serif;color:#765b98}
.secretoAccesoMapa{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px 10px;margin:5px 0 10px;border:1px solid #dac6ff;background:#f8f2ff;border-radius:11px;color:#553484;font:700 12px/1.3 'Trebuchet MS',sans-serif}
.secretoAccesoMapa button{padding:7px 10px;border:1px solid #8f6dca;border-radius:8px;background:#ede1ff;color:#533085;font:700 12px/1.2 'Trebuchet MS',sans-serif;cursor:pointer}
.nivelMapa.secretoPortalAbierto{border-color:#b36ff0!important;box-shadow:0 0 0 3px #d6b1fc66,inset 0 0 16px #b16ced33!important}
.nivelMapa.secretoSuperado{border-color:#d2a548!important;box-shadow:0 0 0 3px #efd27d66!important}
#secretoFragmentoPregunta{display:flex;align-items:center;justify-content:center;margin:10px auto 3px;padding:10px 16px;border:2px solid #9b65dc;border-radius:12px;background:#f6eaff;color:#56318d;font:800 15px/1.3 'Trebuchet MS',sans-serif;cursor:pointer;max-width:100%}
#secretoFragmentoPregunta.secretoRecogido{background:#e9f7ed;border-color:#77b88b;color:#28633b;cursor:default}
.secretoMensajeFragmento{margin:5px 0;text-align:center;font:700 13px/1.4 'Trebuchet MS',sans-serif;color:#60439d}
#pantallaViaje .secretoEncabezado{padding:14px 18px;border-radius:16px;background:linear-gradient(120deg,#f0e6ff,#fff9e7);border:2px solid #d7b8f2}
#pantallaViaje .secretoEncabezado h2{margin:10px 0 0!important}
#pantallaViaje .secretoSobretitulo{display:inline-block;color:#72539b;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
#pantallaViaje .secretoTaller,#pantallaViaje .secretoReto,#pantallaViaje .secretoPortalCabecera{background:#fff;border:2px solid #ded2f4;border-radius:22px;padding:20px;box-shadow:0 5px 0 #e7ddf3;max-width:100%;min-width:0}
#pantallaViaje .secretoPortalCabecera{display:grid;justify-items:center;text-align:center;gap:6px;background:linear-gradient(135deg,#f5eeff,#fff8ed)}
#pantallaViaje .secretoPortalCabecera h3,#pantallaViaje .secretoPortalCabecera p{margin:0}
#pantallaViaje .secretoPortalIcono{font-size:56px;line-height:1.2;filter:drop-shadow(0 3px 2px #7955a544)}
#pantallaViaje .secretoTaller{text-align:center}
#pantallaViaje .secretoHuecos{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:14px 0;min-height:52px}
#pantallaViaje .secretoHueco{display:grid;place-items:center;min-width:36px;height:42px;border:2px dashed #b49bd9;border-radius:9px;background:#f7f1ff;color:#a18cc3;font-weight:900;font-size:21px}
#pantallaViaje .secretoHuecoLleno{background:#eee0ff;border-style:solid;color:#573589}
#pantallaViaje .secretoLetras{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:12px 0}
#pantallaViaje button.secretoBoton{margin:5px;min-height:40px;padding:9px 13px;border:2px solid #9172c0;border-radius:12px;background:#f5edff;color:#59378a;box-shadow:0 2px 0 #cbbbe4;font-weight:800;cursor:pointer}
#pantallaViaje button.secretoBoton:disabled{opacity:.43;box-shadow:none;cursor:default}
#pantallaViaje button.secretoLetra{min-width:43px;min-height:44px;padding:7px;font-size:19px}
#pantallaViaje button.secretoPrimario{background:#6542b3;color:#fff;border-color:#58369d}
#pantallaViaje .secretoAviso{padding:10px 12px;background:#fff5d6;color:#6f5524;border:1px solid #e8d19b;border-radius:11px;font-size:14px}
#pantallaViaje .secretoSopa{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;max-width:590px;margin:12px auto}
#pantallaViaje button.secretoCasilla{display:grid;place-items:center;width:100%;min-width:0;min-height:0;aspect-ratio:1;padding:0;margin:0;border:1px solid #c4b0db;border-radius:8px;background:#fbf7ff;color:#49336c;font:800 clamp(12px,2.2vw,20px)/1 'Trebuchet MS',sans-serif;box-shadow:none}
#pantallaViaje button.secretoCasilla.secretoSeleccionada{background:#e2c8ff;border-color:#8353b2}
#pantallaViaje button.secretoCasilla.secretoGanadora{background:#e6f3d6;border-color:#669b44;color:#245b33;opacity:1}
#pantallaViaje .secretoVictoria{padding:14px 16px;margin:14px 0;border-radius:13px;background:#e5f4e4;border:2px solid #87b28a;color:#286339;font-weight:800;text-align:center}
@media(max-width:580px){#pantallaViaje .secretoTaller,#pantallaViaje .secretoReto,#pantallaViaje .secretoPortalCabecera{padding:12px}#pantallaViaje .secretoSopa{gap:2px}#pantallaViaje button.secretoCasilla{border-radius:4px;font-size:clamp(11px,3.2vw,16px)}#pantallaViaje .secretoHueco{min-width:29px;height:36px;font-size:17px}.secretoAccesoMapa{font-size:11px}.secretoBarraGeneral{padding:7px 8px}}
@media(prefers-reduced-motion:reduce){.secretoBarraRelleno{transition:none}}
#pantallaViaje button.secretoAlbumBoton,.secretoBarraGeneral button.secretoAlbumBoton{display:inline-flex;align-items:center;min-height:28px;padding:6px 10px;margin:7px 0 0;border:1px solid #956dca;border-radius:9px;background:#f3e9ff;color:#5a378b;cursor:pointer;font:700 12px/1.2 'Trebuchet MS',sans-serif}
#pantallaViaje .secretoAlbumGaleria{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
#pantallaViaje .secretoAlbumCard{display:grid;justify-items:center;align-content:start;gap:8px;text-align:center;border:2px solid #e8ce96;background:linear-gradient(180deg,#fffdf7,#fff5dd);border-radius:17px;padding:14px;box-shadow:0 4px 0 #efdfb4}
#pantallaViaje .secretoAlbumCard strong{font-size:15px;color:#665024}
#pantallaViaje .secretoAlbumCard small{color:#8f7546}
#pantallaViaje .secretoAlbumIcono{font-size:34px}
@media(max-width:500px){#pantallaViaje .secretoAlbumGaleria{grid-template-columns:1fr}}
#secretoFragmentoPregunta.secretoRecogerFlotante{
position:fixed;
left:var(--sx,82vw);
top:var(--sy,20vh);
z-index:9999;
display:grid;
place-items:center;
min-width:62px;
min-height:62px;
padding:0 12px;
border:3px solid #f3da72;
border-radius:999px;
background:radial-gradient(circle at 30% 30%,#fffef3,#ffe894 55%,#ffc94a 100%);
color:#6b3d00;
font:900 22px/1 'Trebuchet MS',sans-serif;
box-shadow:0 0 0 4px rgba(255,245,191,.55),0 0 18px rgba(255,219,92,.95),0 10px 18px rgba(66,37,0,.28);
transform:translate(-50%,-50%);
cursor:pointer;
animation:secretoBrillo 1.3s ease-in-out infinite alternate,secretoFlota 2.3s ease-in-out infinite;
}
#secretoFragmentoPregunta.secretoRecogerFlotante::after{
content:"";
position:absolute;
inset:-8px;
border-radius:inherit;
border:2px dashed rgba(255,241,168,.85);
animation:secretoOrbita 2.4s linear infinite;
}
#secretoFragmentoPregunta.secretoRecogerFlotante:hover{transform:translate(-50%,-50%) scale(1.08)}
#secretoFragmentoPregunta.secretoRecogerFlotante.secretoRecogido{
background:radial-gradient(circle at 30% 30%,#f9fff7,#b9efc3 60%,#74d58a 100%);
border-color:#6ab97f;
color:#1f5a30;
animation:none;
}
.secretoMensajeFragmentoFlotante{
position:fixed;
left:50%;
bottom:22px;
transform:translate(-50%,18px);
z-index:9999;
max-width:min(88vw,640px);
padding:12px 16px;
border-radius:14px;
background:rgba(70,45,122,.96);
color:#fff;
box-shadow:0 14px 28px rgba(31,18,61,.32);
opacity:0;
transition:opacity .25s ease, transform .25s ease;
pointer-events:none;
}
.secretoMensajeFragmentoFlotante.visible{opacity:1;transform:translate(-50%,0)}
@keyframes secretoBrillo{
from{box-shadow:0 0 0 3px rgba(255,245,191,.50),0 0 12px rgba(255,219,92,.72),0 8px 16px rgba(66,37,0,.24)}
to{box-shadow:0 0 0 6px rgba(255,245,191,.72),0 0 26px rgba(255,219,92,1),0 12px 22px rgba(66,37,0,.30)}
}
@keyframes secretoFlota{
0%,100%{margin-top:0}
50%{margin-top:-8px}
}
@keyframes secretoOrbita{
from{transform:rotate(0deg) scale(1)}
to{transform:rotate(360deg) scale(1)}
}
@media (max-width:720px){
#secretoFragmentoPregunta.secretoRecogerFlotante{min-width:56px;min-height:56px;font-size:20px}
}
@media (min-width:1001px) and (max-height:820px) {
#pantallaMenu .layoutMenuPrincipalV311 {
row-gap: 4px !important;
height: min(618px, calc(100dvh - 18px)) !important;
max-height: calc(100dvh - 18px) !important;
}
#pantallaMenu .layoutMenuPrincipalV311 .tituloMundos {
margin: 0 !important;
font-size: clamp(28px, 2.7vw, 38px) !important;
}
#pantallaMenu #tarjetaProgresoGeneral {
padding: 10px 12px 12px !important;
}
#pantallaMenu .rangoAventureroGeneral {
gap: 10px !important;
}
#pantallaMenu .rangoAventureroGeneral strong {
font-size: clamp(18px, 1.7vw, 28px) !important;
line-height: 1.05 !important;
}
#pantallaMenu .rangoAventureroGeneral small {
font-size: 10px !important;
line-height: 1.1 !important;
}
#pantallaMenu .barraProgresoGeneral {
margin-top: 4px !important;
margin-bottom: 4px !important;
}
#pantallaMenu .secretoBarraGeneral {
margin: 5px 0 6px !important;
padding: 6px 9px !important;
border-radius: 10px !important;
}
#pantallaMenu .secretoBarraEncabezado {
gap: 8px !important;
font-size: 12px !important;
line-height: 1.25 !important;
}
#pantallaMenu .secretoBarraPista {
height: 7px !important;
margin: 4px 0 3px !important;
}
#pantallaMenu .secretoBarraNota {
font-size: 10px !important;
line-height: 1.15 !important;
}
#pantallaMenu .mundoProgresoGeneral {
min-height: 46px !important;
padding: 4px 10px 4px 46px !important;
}
#pantallaMenu .iconoMundoProgreso {
left: 7px !important;
width: 31px !important;
height: 31px !important;
}
#pantallaMenu .mundoProgresoGeneral strong {
font-size: 13px !important;
line-height: 1.05 !important;
}
#pantallaMenu .mundoProgresoGeneral small {
font-size: 10px !important;
line-height: 1.05 !important;
}
#pantallaMenu .caminoRangosGeneral {
gap: 5px !important;
margin-top: 5px !important;
padding-top: 5px !important;
}
#pantallaMenu .hitoRangoGeneral {
min-height: 44px !important;
padding: 4px 6px !important;
gap: 5px !important;
}
#pantallaMenu .hitoRangoGeneral > span:first-child {
width: 27px !important;
height: 27px !important;
min-width: 27px !important;
flex-basis: 27px !important;
font-size: 16px !important;
}
#pantallaMenu .hitoRangoGeneral strong {
font-size: 14px !important;
}
#pantallaMenu .hitoRangoGeneral small,
#pantallaMenu .hitoRangoGeneral span:not(:first-child) {
font-size: 8px !important;
line-height: 1.05 !important;
}
}
@media (min-width:1001px) {
#pantallaViaje:not(.oculto) {
padding: 16px 20px 32px !important;
}
#pantallaViaje .viajeShell {
max-width: 1240px !important;
}
#pantallaViaje .viajeCabecera {
gap: 18px !important;
margin: 0 0 18px !important;
}
#pantallaViaje h1 {
font-size: clamp(30px, 3.6vw, 54px) !important;
margin: 0 0 4px !important;
}
#pantallaViaje .viajeSubtitulo {
font-size: 14px !important;
}
#pantallaViaje .viajeContenido {
gap: 14px !important;
}
#pantallaViaje .viajeTarjeta,
#pantallaViaje .secretoTaller,
#pantallaViaje .secretoReto,
#pantallaViaje .secretoPortalCabecera,
#pantallaViaje .secretoV4Zona {
padding: 18px !important;
}
#pantallaViaje .secretoEncabezado {
padding: 12px 16px !important;
}
#pantallaViaje .secretoPortalCabecera {
grid-template-columns: 92px 1fr !important;
justify-items: start !important;
text-align: left !important;
gap: 10px 14px !important;
align-items: center !important;
}
#pantallaViaje .secretoPortalIcono {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
font-size: 60px !important;
justify-self: center !important;
}
#pantallaViaje .secretoPortalCabecera h3,
#pantallaViaje .secretoPortalCabecera p {
grid-column: 2 !important;
text-align: left !important;
width: 100% !important;
}
#pantallaViaje .secretoTaller,
#pantallaViaje .secretoReto,
#pantallaViaje .secretoV4Zona {
max-width: none !important;
}
#pantallaViaje .secretoSopa {
max-width: 760px !important;
gap: 5px !important;
}
#pantallaViaje button.secretoCasilla {
font-size: clamp(13px, 1.55vw, 23px) !important;
border-radius: 9px !important;
}
#pantallaViaje .secretoV4Presentacion {
grid-template-columns: 96px 1fr !important;
gap: 14px !important;
padding: 18px 22px !important;
}
#pantallaViaje .secretoV4Glifo {
font-size: 58px !important;
}
#pantallaViaje .secretoV4Titular h3 {
font-size: 24px !important;
}
#pantallaViaje .secretoV4Sopa {
max-width: 760px !important;
gap: 4px !important;
}
#pantallaViaje .secretoV4Sopa button {
font-size: clamp(12px, 1.2vw, 19px) !important;
border-radius: 8px !important;
}
#pantallaViaje .secretoV4CruzWrap {
grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr) !important;
gap: 20px !important;
}
}
@media (min-width:1001px) and (max-height:760px) {
#pantallaViaje:not(.oculto) {
padding-top: 12px !important;
padding-bottom: 22px !important;
}
#pantallaViaje .viajeCabecera {
margin-bottom: 14px !important;
}
#pantallaViaje h1 {
font-size: clamp(28px, 3.1vw, 46px) !important;
}
#pantallaViaje .viajeContenido {
gap: 12px !important;
}
#pantallaViaje .viajeTarjeta,
#pantallaViaje .secretoTaller,
#pantallaViaje .secretoReto,
#pantallaViaje .secretoPortalCabecera,
#pantallaViaje .secretoV4Zona,
#pantallaViaje .secretoEncabezado {
padding: 14px !important;
}
}
@media (min-width:1001px) {
#pantallaViaje .viajeContenido:has(.secretoPortalCabecera),
#pantallaViaje .viajeContenido:has(.secretoV4Presentacion),
#pantallaViaje .viajeContenido:has(.secretoTaller) {
display: grid !important;
grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) !important;
gap: 14px 16px !important;
align-items: start !important;
}
#pantallaViaje .viajeContenido:has(.secretoV4Presentacion) > .secretoV4Presentacion {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
align-self: start !important;
position: sticky;
top: 8px;
}
#pantallaViaje .viajeContenido:has(.secretoV4Presentacion) > .secretoV4Progreso {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: start !important;
}
#pantallaViaje .viajeContenido:has(.secretoV4Presentacion) > .secretoV4Zona {
grid-column: 2 !important;
grid-row: 2 !important;
align-self: start !important;
}
#pantallaViaje .viajeContenido:has(.secretoPortalCabecera) > .secretoPortalCabecera {
grid-column: 1 !important;
grid-row: 1 !important;
align-self: start !important;
position: sticky;
top: 8px;
}
#pantallaViaje .viajeContenido:has(.secretoPortalCabecera) > .secretoReto,
#pantallaViaje .viajeContenido:has(.secretoPortalCabecera) > .secretoVictoria {
grid-column: 2 !important;
align-self: start !important;
}
#pantallaViaje .viajeContenido:has(.secretoTaller) > .secretoEncabezado {
grid-column: 1 !important;
grid-row: 1 !important;
align-self: start !important;
position: sticky;
top: 8px;
}
#pantallaViaje .viajeContenido:has(.secretoTaller) > .secretoTaller,
#pantallaViaje .viajeContenido:has(.secretoTaller) > .secretoAccesoMapa {
grid-column: 2 !important;
align-self: start !important;
}
#pantallaViaje .secretoTaller,
#pantallaViaje .secretoReto,
#pantallaViaje .secretoV4Zona {
gap: 10px !important;
}
#pantallaViaje .secretoTaller h3,
#pantallaViaje .secretoReto h3,
#pantallaViaje .secretoV4Titular h3 {
margin: 4px 0 6px !important;
font-size: 20px !important;
}
#pantallaViaje .secretoTaller p,
#pantallaViaje .secretoReto p,
#pantallaViaje .secretoV4Cuerpo p {
margin: 4px 0 8px !important;
line-height: 1.35 !important;
}
#pantallaViaje .secretoHuecos {
margin: 8px 0 !important;
min-height: 44px !important;
}
#pantallaViaje .secretoHueco {
min-width: 32px !important;
height: 38px !important;
font-size: 19px !important;
}
#pantallaViaje .secretoLetras {
gap: 6px !important;
margin: 8px 0 !important;
}
#pantallaViaje button.secretoBoton {
margin: 3px 4px 3px 0 !important;
min-height: 36px !important;
padding: 8px 11px !important;
font-size: 14px !important;
}
#pantallaViaje button.secretoLetra {
min-width: 38px !important;
min-height: 38px !important;
font-size: 17px !important;
}
#pantallaViaje .secretoSopa,
#pantallaViaje .secretoV4Sopa {
margin: 8px auto !important;
}
#pantallaViaje .secretoV4Presentacion p {
font-size: 14px !important;
line-height: 1.35 !important;
}
#pantallaViaje .secretoV4Progreso {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
#pantallaViaje .secretoV4Paso {
padding: 9px 8px !important;
font-size: 12px !important;
}
#pantallaViaje .secretoV4Palabras span {
padding: 6px 9px !important;
font-size: 12px !important;
}
#pantallaViaje .secretoV4DosEscenas {
gap: 10px !important;
}
#pantallaViaje .secretoV4Escena {
padding: 8px !important;
}
#pantallaViaje .secretoV4RespuestasDibujo {
gap: 8px !important;
}
#pantallaViaje button.secretoV4OpcionDibujo {
min-height: 58px !important;
font-size: 28px !important;
}
#pantallaViaje .secretoV4Figura {
min-width: 42px !important;
min-height: 48px !important;
font-size: 26px !important;
}
}
@media (min-width:1001px) and (max-height:760px) {
#pantallaViaje .viajeContenido:has(.secretoPortalCabecera),
#pantallaViaje .viajeContenido:has(.secretoV4Presentacion),
#pantallaViaje .viajeContenido:has(.secretoTaller) {
grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) !important;
gap: 12px 14px !important;
}
#pantallaViaje .viajeCabecera {
margin-bottom: 8px !important;
}
#pantallaViaje h1 {
font-size: clamp(24px, 2.8vw, 40px) !important;
margin-bottom: 2px !important;
}
#pantallaViaje .viajeSubtitulo {
font-size: 13px !important;
}
#pantallaViaje .secretoPortalCabecera,
#pantallaViaje .secretoV4Presentacion,
#pantallaViaje .secretoTaller,
#pantallaViaje .secretoReto,
#pantallaViaje .secretoV4Zona,
#pantallaViaje .secretoEncabezado {
padding: 12px !important;
border-radius: 18px !important;
}
}
#pantallaViaje .secretoV4Presentacion{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:12px;padding:16px 20px;border-radius:21px;border:2px solid #c6a5ef;background:linear-gradient(120deg,#efe1ff,#fff7e2);box-shadow:0 4px 0 #e6d7f8;color:#48306c}
#pantallaViaje .secretoV4Presentacion h3{margin:0 0 5px;font-size:20px}
#pantallaViaje .secretoV4Presentacion p{margin:0;font-size:15px;color:#654d78}
#pantallaViaje .secretoV4Glifo{font-size:48px;text-align:center;filter:drop-shadow(0 3px 2px #a179bc66)}
#pantallaViaje .secretoV4Progreso{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#pantallaViaje .secretoV4Paso{padding:11px 10px;border-radius:13px;border:2px dashed #cbb8df;background:#f9f5ff;color:#75628e;font-weight:700;font-size:13px;text-align:center}
#pantallaViaje .secretoV4Paso.actual{background:#eee4ff;border-style:solid;border-color:#9375c3;color:#4b2e83}
#pantallaViaje .secretoV4Paso.listo{background:#e5f3e6;border-style:solid;border-color:#8cbb94;color:#245c39}
#pantallaViaje .secretoV4Zona{min-width:0;display:grid;gap:12px;background:#fff;border:2px solid #ded0ef;border-radius:22px;padding:20px;box-shadow:0 5px 0 #e7ddf3}
#pantallaViaje .secretoV4Titular h3{margin:7px 0 0;font-size:22px}
#pantallaViaje .secretoV4Cuerpo{min-width:0;display:grid;gap:12px}
#pantallaViaje .secretoV4Cuerpo p{margin:0}
#pantallaViaje .secretoV4Respuestas{min-height:1em}
#pantallaViaje .secretoV4Aviso{padding:11px 14px;background:#fff4df;border:1px solid #ddc087;color:#655028;border-radius:12px;font-weight:700}
#pantallaViaje .secretoV4Aviso.bien{background:#e5f4e7;border-color:#8ebc92;color:#28663d}
#pantallaViaje .secretoV4Palabras{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
#pantallaViaje .secretoV4Palabras span{background:#f6edff;color:#694794;border:1px solid #ceb8eb;padding:8px 11px;border-radius:12px;font-weight:800;font-size:13px}
#pantallaViaje .secretoV4Palabras span.hallada{background:#e7f4e6;border-color:#7fba8b;color:#236239}
#pantallaViaje .secretoV4Sopa{--columnas:12;display:grid;grid-template-columns:repeat(var(--columnas),minmax(0,1fr));gap:3px;width:100%;max-width:530px;margin:0 auto}
#pantallaViaje .secretoV4Sopa button{width:100%;height:auto;min-width:0;min-height:0;aspect-ratio:1;padding:0;margin:0;border:1px solid #bca8de;border-radius:6px;background:#faf7ff;color:#4f3376;box-shadow:none;font-size:clamp(11px,1.55vw,17px);font-weight:900}
#pantallaViaje .secretoV4Sopa button.seleccionada{background:#dfc8fa;border-color:#8a5bc0}
#pantallaViaje .secretoV4Sopa button.resuelta{background:#dcf3d8;border-color:#6dac77;color:#205e3d;opacity:1}
#pantallaViaje .secretoV4CruzWrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.9fr);gap:18px;align-items:start}
#pantallaViaje .secretoV4CruzGrid{--columnas:12;display:grid;grid-template-columns:repeat(var(--columnas),minmax(0,1fr));gap:2px;max-width:540px;width:100%;min-width:0}
#pantallaViaje .secretoV4CruzCelda{display:grid;place-items:center;position:relative;aspect-ratio:1;border:1px solid #9575c6;border-radius:3px;background:#f8f3ff;color:#452d6b;font-weight:900;font-size:clamp(10px,1.6vw,17px);min-width:0}
#pantallaViaje .secretoV4CruzCelda.vacia{border-color:transparent;background:transparent}
#pantallaViaje .secretoV4CruzCelda small{position:absolute;top:0;left:1px;font-size:7px;font-weight:800}
#pantallaViaje .secretoV4Claves{display:grid;gap:12px}
#pantallaViaje .secretoV4Clave{display:grid;gap:5px;color:#47326a;font-size:14px}
#pantallaViaje .secretoV4Clave strong{color:#6a4297}
#pantallaViaje .secretoV4Clave input,#pantallaViaje .secretoV4Cifra input{width:100%;min-width:0;min-height:44px;border:2px solid #b8a1d6;border-radius:11px;background:#fff;color:#3a295d;font-size:17px;font-weight:800;text-transform:uppercase;padding:9px 11px;box-sizing:border-box}
#pantallaViaje .secretoV4Clave input[aria-invalid=true]{border-color:#ca6759}
#pantallaViaje .secretoV4DosEscenas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#pantallaViaje .secretoV4Escena{min-width:0;padding:10px;border:2px solid #dfd3f0;border-radius:16px;background:#fbf8ff}
#pantallaViaje .secretoV4Escena h4{font-size:14px;margin:2px 0 10px;color:#513479}
#pantallaViaje .secretoV4Mosaico{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
#pantallaViaje .secretoV4Dibujo{display:grid;place-items:center;aspect-ratio:1;min-width:0;min-height:0;width:100%;padding:0;margin:0;border:2px solid #ddd0e9;border-radius:9px;background:#fff;font-size:clamp(22px,3vw,37px);box-shadow:none}
#pantallaViaje span.secretoV4Dibujo{box-sizing:border-box}
#pantallaViaje button.secretoV4Dibujo.encontrada{background:#e1f4db;border-color:#65a36d}
#pantallaViaje .secretoV4ContenedorImagen{position:relative;width:100%;aspect-ratio:1.25;overflow:hidden;border-radius:12px}
#pantallaViaje .secretoV4ImgDiferencias{display:block;width:100%;height:100%;object-fit:contain}
#pantallaViaje button.secretoV4Hotspot{position:absolute;transform:translate(-50%,-50%);width:15%;aspect-ratio:1;min-height:24px;min-width:24px;margin:0;padding:0;border:2px dashed #fff8;box-shadow:0 0 4px #0007;background:#fff1;border-radius:50%;font-size:0}
#pantallaViaje button.secretoV4Hotspot.encontrada{background:#7fc47b99;border:3px solid #3b7d3f}
#pantallaViaje .secretoV4Serie{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;padding:10px 2px}
#pantallaViaje .secretoV4Figura{display:grid;place-items:center;min-width:45px;min-height:52px;padding:3px;border:2px solid #dfd3f3;border-radius:10px;background:#fffaf0;font-size:30px}
#pantallaViaje .secretoV4RespuestasDibujo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
#pantallaViaje button.secretoV4OpcionDibujo{margin:0;min-height:70px;border-radius:15px;background:#f8f2ff;border:2px solid #c9b7e7;font-size:33px;box-shadow:0 3px 0 #e6ddf4}
#pantallaViaje .secretoV4Codigo{padding:16px;border-radius:14px;background:#eee6fb;border:2px dashed #ae94d4;color:#4c3074;font-size:clamp(23px,4vw,37px);font-weight:900;letter-spacing:.13em;text-align:center;overflow-wrap:anywhere}
#pantallaViaje .secretoV4Cifra{display:grid;gap:9px}
#pantallaViaje .secretoV4Final{text-align:center;padding:25px;border:2px solid #e0c18b;border-radius:18px;background:linear-gradient(135deg,#fff6d8,#f5eaff)}
#pantallaViaje .secretoV4Nota{color:#715c8b;font-size:13px;text-align:center}
@media(max-width:720px){
#pantallaViaje .secretoV4CruzWrap{grid-template-columns:1fr}
#pantallaViaje .secretoV4Zona{padding:12px}
#pantallaViaje .secretoV4Presentacion{grid-template-columns:55px 1fr;padding:12px}
#pantallaViaje .secretoV4Glifo{font-size:40px}
#pantallaViaje .secretoV4Dibujo{font-size:clamp(20px,5vw,30px)}
#pantallaViaje .secretoV4Sopa{gap:2px}
#pantallaViaje .secretoV4Sopa button{font-size:clamp(9px,2.9vw,15px);border-radius:3px}
#pantallaViaje .secretoV4RespuestasDibujo{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:420px){
#pantallaViaje .secretoV4DosEscenas{gap:6px}
#pantallaViaje .secretoV4Escena{padding:6px}
#pantallaViaje .secretoV4Mosaico{gap:2px}
#pantallaViaje .secretoV4Dibujo{border-radius:5px}
#pantallaViaje .secretoV4Paso{font-size:11px}
}
@media(prefers-reduced-motion:reduce){#pantallaViaje .secretoV4Final{animation:none}}
#pantallaViaje .secretoV4IconoPersonalizado{display:block;width:86%;height:86%;max-width:100%;max-height:100%;object-fit:contain;margin:auto;pointer-events:none}
#pantallaViaje .secretoV4ConImagen{overflow:hidden}
#pantallaViaje .secretoV4Presentacion>.secretoV4Glifo{grid-column:1;grid-row:1/span 2}
#pantallaViaje .secretoV4Presentacion>h3{grid-column:2;grid-row:1;align-self:end}
#pantallaViaje .secretoV4Presentacion>p{grid-column:2;grid-row:2;align-self:start;min-width:0}
@media (min-width:1001px) and (max-height:820px) {
#pantallaMenu .layoutMenuPrincipalV311 {
row-gap: 4px !important;
height: min(618px, calc(100dvh - 18px)) !important;
max-height: calc(100dvh - 18px) !important;
}
#pantallaMenu .layoutMenuPrincipalV311 .tituloMundos {
margin: 0 !important;
font-size: clamp(28px, 2.7vw, 38px) !important;
}
#pantallaMenu #tarjetaProgresoGeneral {
padding: 10px 12px 12px !important;
}
#pantallaMenu .rangoAventureroGeneral {
gap: 10px !important;
}
#pantallaMenu .rangoAventureroGeneral strong {
font-size: clamp(18px, 1.7vw, 28px) !important;
line-height: 1.05 !important;
}
#pantallaMenu .rangoAventureroGeneral small {
font-size: 10px !important;
line-height: 1.1 !important;
}
#pantallaMenu .barraProgresoGeneral {
margin-top: 4px !important;
margin-bottom: 4px !important;
}
#pantallaMenu .secretoBarraGeneral {
margin: 5px 0 6px !important;
padding: 6px 9px !important;
border-radius: 10px !important;
}
#pantallaMenu .secretoBarraEncabezado {
gap: 8px !important;
font-size: 12px !important;
line-height: 1.25 !important;
}
#pantallaMenu .secretoBarraPista {
height: 7px !important;
margin: 4px 0 3px !important;
}
#pantallaMenu .secretoBarraNota {
font-size: 10px !important;
line-height: 1.15 !important;
}
#pantallaMenu .mundoProgresoGeneral {
min-height: 46px !important;
padding: 4px 10px 4px 46px !important;
}
#pantallaMenu .iconoMundoProgreso {
left: 7px !important;
width: 31px !important;
height: 31px !important;
}
#pantallaMenu .mundoProgresoGeneral strong {
font-size: 13px !important;
line-height: 1.05 !important;
}
#pantallaMenu .mundoProgresoGeneral small {
font-size: 10px !important;
line-height: 1.05 !important;
}
#pantallaMenu .caminoRangosGeneral {
gap: 5px !important;
margin-top: 5px !important;
padding-top: 5px !important;
}
#pantallaMenu .hitoRangoGeneral {
min-height: 44px !important;
padding: 4px 6px !important;
gap: 5px !important;
}
#pantallaMenu .hitoRangoGeneral > span:first-child {
width: 27px !important;
height: 27px !important;
min-width: 27px !important;
flex-basis: 27px !important;
font-size: 16px !important;
}
#pantallaMenu .hitoRangoGeneral strong {
font-size: 14px !important;
}
#pantallaMenu .hitoRangoGeneral small,
#pantallaMenu .hitoRangoGeneral span:not(:first-child) {
font-size: 8px !important;
line-height: 1.05 !important;
}
}
@media (min-width:1001px) {
#pantallaViaje:not(.oculto) {
padding: 16px 20px 32px !important;
}
#pantallaViaje .viajeShell {
max-width: 1240px !important;
}
#pantallaViaje .viajeCabecera {
gap: 18px !important;
margin: 0 0 18px !important;
}
#pantallaViaje h1 {
font-size: clamp(30px, 3.6vw, 54px) !important;
margin: 0 0 4px !important;
}
#pantallaViaje .viajeSubtitulo {
font-size: 14px !important;
}
#pantallaViaje .viajeContenido {
gap: 14px !important;
}
#pantallaViaje .viajeTarjeta,
#pantallaViaje .secretoTaller,
#pantallaViaje .secretoReto,
#pantallaViaje .secretoPortalCabecera,
#pantallaViaje .secretoV4Zona {
padding: 18px !important;
}
#pantallaViaje .secretoEncabezado {
padding: 12px 16px !important;
}
#pantallaViaje .secretoPortalCabecera {
grid-template-columns: 92px 1fr !important;
justify-items: start !important;
text-align: left !important;
gap: 10px 14px !important;
align-items: center !important;
}
#pantallaViaje .secretoPortalIcono {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
font-size: 60px !important;
justify-self: center !important;
}
#pantallaViaje .secretoPortalCabecera h3,
#pantallaViaje .secretoPortalCabecera p {
grid-column: 2 !important;
text-align: left !important;
width: 100% !important;
}
#pantallaViaje .secretoTaller,
#pantallaViaje .secretoReto,
#pantallaViaje .secretoV4Zona {
max-width: none !important;
}
#pantallaViaje .secretoSopa {
max-width: 760px !important;
gap: 5px !important;
}
#pantallaViaje button.secretoCasilla {
font-size: clamp(13px, 1.55vw, 23px) !important;
border-radius: 9px !important;
}
#pantallaViaje .secretoV4Presentacion {
grid-template-columns: 96px 1fr !important;
gap: 14px !important;
padding: 18px 22px !important;
}
#pantallaViaje .secretoV4Glifo {
font-size: 58px !important;
}
#pantallaViaje .secretoV4Titular h3 {
font-size: 24px !important;
}
#pantallaViaje .secretoV4Sopa {
max-width: 760px !important;
gap: 4px !important;
}
#pantallaViaje .secretoV4Sopa button {
font-size: clamp(12px, 1.2vw, 19px) !important;
border-radius: 8px !important;
}
#pantallaViaje .secretoV4CruzWrap {
grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr) !important;
gap: 20px !important;
}
}
@media (min-width:1001px) and (max-height:760px) {
#pantallaViaje:not(.oculto) {
padding-top: 12px !important;
padding-bottom: 22px !important;
}
#pantallaViaje .viajeCabecera {
margin-bottom: 14px !important;
}
#pantallaViaje h1 {
font-size: clamp(28px, 3.1vw, 46px) !important;
}
#pantallaViaje .viajeContenido {
gap: 12px !important;
}
#pantallaViaje .viajeTarjeta,
#pantallaViaje .secretoTaller,
#pantallaViaje .secretoReto,
#pantallaViaje .secretoPortalCabecera,
#pantallaViaje .secretoV4Zona,
#pantallaViaje .secretoEncabezado {
padding: 14px !important;
}
}
@media (min-width:1001px) {
#pantallaViaje .viajeContenido:has(.secretoPortalCabecera),
#pantallaViaje .viajeContenido:has(.secretoV4Presentacion),
#pantallaViaje .viajeContenido:has(.secretoTaller) {
display: grid !important;
grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) !important;
gap: 14px 16px !important;
align-items: start !important;
}
#pantallaViaje .viajeContenido:has(.secretoV4Presentacion) > .secretoV4Presentacion {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
align-self: start !important;
position: sticky;
top: 8px;
}
#pantallaViaje .viajeContenido:has(.secretoV4Presentacion) > .secretoV4Progreso {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: start !important;
}
#pantallaViaje .viajeContenido:has(.secretoV4Presentacion) > .secretoV4Zona {
grid-column: 2 !important;
grid-row: 2 !important;
align-self: start !important;
}
#pantallaViaje .viajeContenido:has(.secretoPortalCabecera) > .secretoPortalCabecera {
grid-column: 1 !important;
grid-row: 1 !important;
align-self: start !important;
position: sticky;
top: 8px;
}
#pantallaViaje .viajeContenido:has(.secretoPortalCabecera) > .secretoReto,
#pantallaViaje .viajeContenido:has(.secretoPortalCabecera) > .secretoVictoria {
grid-column: 2 !important;
align-self: start !important;
}
#pantallaViaje .viajeContenido:has(.secretoTaller) > .secretoEncabezado {
grid-column: 1 !important;
grid-row: 1 !important;
align-self: start !important;
position: sticky;
top: 8px;
}
#pantallaViaje .viajeContenido:has(.secretoTaller) > .secretoTaller,
#pantallaViaje .viajeContenido:has(.secretoTaller) > .secretoAccesoMapa {
grid-column: 2 !important;
align-self: start !important;
}
#pantallaViaje .secretoTaller,
#pantallaViaje .secretoReto,
#pantallaViaje .secretoV4Zona {
gap: 10px !important;
}
#pantallaViaje .secretoTaller h3,
#pantallaViaje .secretoReto h3,
#pantallaViaje .secretoV4Titular h3 {
margin: 4px 0 6px !important;
font-size: 20px !important;
}
#pantallaViaje .secretoTaller p,
#pantallaViaje .secretoReto p,
#pantallaViaje .secretoV4Cuerpo p {
margin: 4px 0 8px !important;
line-height: 1.35 !important;
}
#pantallaViaje .secretoHuecos {
margin: 8px 0 !important;
min-height: 44px !important;
}
#pantallaViaje .secretoHueco {
min-width: 32px !important;
height: 38px !important;
font-size: 19px !important;
}
#pantallaViaje .secretoLetras {
gap: 6px !important;
margin: 8px 0 !important;
}
#pantallaViaje button.secretoBoton {
margin: 3px 4px 3px 0 !important;
min-height: 36px !important;
padding: 8px 11px !important;
font-size: 14px !important;
}
#pantallaViaje button.secretoLetra {
min-width: 38px !important;
min-height: 38px !important;
font-size: 17px !important;
}
#pantallaViaje .secretoSopa,
#pantallaViaje .secretoV4Sopa {
margin: 8px auto !important;
}
#pantallaViaje .secretoV4Presentacion p {
font-size: 14px !important;
line-height: 1.35 !important;
}
#pantallaViaje .secretoV4Progreso {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
#pantallaViaje .secretoV4Paso {
padding: 9px 8px !important;
font-size: 12px !important;
}
#pantallaViaje .secretoV4Palabras span {
padding: 6px 9px !important;
font-size: 12px !important;
}
#pantallaViaje .secretoV4DosEscenas {
gap: 10px !important;
}
#pantallaViaje .secretoV4Escena {
padding: 8px !important;
}
#pantallaViaje .secretoV4RespuestasDibujo {
gap: 8px !important;
}
#pantallaViaje button.secretoV4OpcionDibujo {
min-height: 58px !important;
font-size: 28px !important;
}
#pantallaViaje .secretoV4Figura {
min-width: 42px !important;
min-height: 48px !important;
font-size: 26px !important;
}
}
@media (min-width:1001px) and (max-height:760px) {
#pantallaViaje .viajeContenido:has(.secretoPortalCabecera),
#pantallaViaje .viajeContenido:has(.secretoV4Presentacion),
#pantallaViaje .viajeContenido:has(.secretoTaller) {
grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) !important;
gap: 12px 14px !important;
}
#pantallaViaje .viajeCabecera {
margin-bottom: 8px !important;
}
#pantallaViaje h1 {
font-size: clamp(24px, 2.8vw, 40px) !important;
margin-bottom: 2px !important;
}
#pantallaViaje .viajeSubtitulo {
font-size: 13px !important;
}
#pantallaViaje .secretoPortalCabecera,
#pantallaViaje .secretoV4Presentacion,
#pantallaViaje .secretoTaller,
#pantallaViaje .secretoReto,
#pantallaViaje .secretoV4Zona,
#pantallaViaje .secretoEncabezado {
padding: 12px !important;
border-radius: 18px !important;
}
}
#pantallaPregunta:not(.oculto) {
position:relative!important; inset:auto!important; display:flex!important;
flex-direction:column; gap:10px; box-sizing:border-box; width:100%!important;
height:auto!important; min-height:100dvh!important; max-height:none!important;
padding:12px max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important;
overflow:visible!important; font-family:"Trebuchet MS",Arial,sans-serif;
background:#fff4bc;
}
#pantallaPregunta .cabeceraPregunta {
display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
width:min(1260px,calc(100vw - 36px));max-width:none;margin:0 auto;padding:0;
}
#pantallaPregunta .cabeceraPregunta .botonVolver {position:static;min-height:44px;padding:8px 14px;margin:0;font:700 14px/1.25 "Trebuchet MS",Arial,sans-serif;}
#pantallaPregunta .datosPregunta {min-width:0;display:grid;gap:3px;text-align:center;}
#pantallaPregunta #cursoPregunta {font-size:13px;line-height:1.2;}
#pantallaPregunta #nivelPregunta {font-size:15px;line-height:1.2;}
#pantallaPregunta .monedasPregunta {padding:8px 12px;margin:0;font-size:16px;white-space:nowrap;}
#pantallaPregunta .avancePreguntas {width:min(1260px,calc(100vw - 36px));max-width:none;margin:0 auto;display:flex;align-items:center;gap:12px;}
#pantallaPregunta #contadorPregunta {font:700 13px/1.2 "Trebuchet MS",Arial,sans-serif;white-space:nowrap;}
#pantallaPregunta .barraPregunta {height:8px;flex:1;margin:0;border-width:1px;}
#pantallaPregunta .tarjetaPregunta {
width:min(1260px,calc(100vw - 36px))!important;max-width:none!important;box-sizing:border-box;margin:0 auto!important;padding:24px 24px 22px!important;
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:22px;align-items:center;
border:2px solid #8971d2;border-radius:22px;background:#fffdf9!important;box-shadow:0 5px 0 #cfbfde;
}
#preguntaContexto,#preguntaRespuestas {min-width:0;}
#pantallaPregunta .iconoPregunta {display:none!important;}
#pantallaPregunta #textoPregunta {
margin:12px 0!important;padding:0!important;border:0!important;background:none!important;
box-shadow:none!important;color:#40315e!important;text-shadow:none!important;
font:700 clamp(20px,2vw,28px)/1.35 "Trebuchet MS",Arial,sans-serif!important;
width:auto!important;max-width:none!important;text-align:left;white-space:pre-line;
}
#preguntaContexto {display:flex;flex-direction:column;justify-content:center;}
#preguntaRespuestas {align-self:stretch;display:flex;flex-direction:column;justify-content:center;}
#pantallaPregunta #viajeCompaneroPregunta {padding:6px 10px;margin:0 0 10px;gap:10px;border-radius:12px;}
#pantallaPregunta #viajeCompaneroPregunta .viajeCompaneroAvatar,
#pantallaPregunta #viajeCompaneroPregunta .avatarCompuesto.viajeAvatar {width:42px!important;height:42px!important;flex-basis:42px;}
#pantallaPregunta .viajeCompaneroTexto {font-size:13px;}
#pantallaPregunta #viajeAyudas {margin:8px 0 0;padding:0;border:0;background:none;}
#pantallaPregunta .viajePasos {font-size:14px;line-height:1.3;margin:5px 0;}
#pantallaPregunta #viajeAyudas .viajeFila {justify-content:flex-start;gap:8px;}
#pantallaPregunta #viajeAyudas button {min-height:40px;margin:2px 0;padding:7px 14px;font:700 14px/1.25 "Trebuchet MS",Arial,sans-serif;}
#pantallaPregunta .viajeClaves {font-size:13px;line-height:1.3;margin:6px 0 0;}
#pantallaPregunta #contenedorOpciones {display:grid;gap:12px;width:100%;margin:0;padding:0;}
#pantallaPregunta #contenedorOpciones button {
box-sizing:border-box;position:static;max-width:100%;min-width:0;width:100%;height:auto;min-height:50px;
margin:0;padding:12px 16px;font:600 18px/1.3 "Trebuchet MS",Arial,sans-serif;
white-space:normal;overflow-wrap:break-word;transform:none;box-shadow:0 2px 0 #d4c9e4;
}
#pantallaPregunta #contenedorOpciones :is(.instruccionOrden,.instruccionRelacionar,.instruccionDesafio) {margin:0;font-size:14px;line-height:1.3;}
#pantallaPregunta #contenedorOpciones :is(.zonaRelacionar,.elementosOrden,.zonaOrden,.opcionesEspeciales) {gap:8px;}
#pantallaPregunta #contenedorOpciones .columnaRelacionar {display:grid;gap:8px;}
#pantallaPregunta #contenedorOpciones .botonRelacionar {font-size:16px;padding:8px;}
#pantallaPregunta #retroalimentacion {grid-column:1/-1;margin:0;padding:18px;max-width:850px;justify-self:center;border-radius:16px;}
#pantallaPregunta #iconoRetroalimentacion {font-size:28px;margin:0;}
#pantallaPregunta #tituloRetroalimentacion {font:700 22px/1.2 "Trebuchet MS",Arial,sans-serif;margin:6px 0;}
#pantallaPregunta #textoRetroalimentacion {font:18px/1.4 "Trebuchet MS",Arial,sans-serif;margin:8px 0;}
#pantallaPregunta #botonSiguientePregunta {grid-column:1/-1;justify-self:center;min-height:46px;margin:0;padding:10px 25px;font:700 17px/1.3 "Trebuchet MS",Arial,sans-serif;}
#pantallaPregunta.preguntaRespondida .tarjetaPregunta {grid-template-columns:1fr;gap:12px;}
#pantallaPregunta.preguntaRespondida #preguntaRespuestas,
#pantallaPregunta.preguntaRespondida #viajeAyudas,
#pantallaPregunta.preguntaRespondida #viajeCompaneroPregunta {display:none!important;}
#pantallaPregunta.preguntaRespondida #textoPregunta {font-size:20px!important;margin:0!important;text-align:center;}
#preguntaPasosVista {grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;align-items:center;}
#preguntaPasosVista[hidden] {display:none!important;}
#preguntaPasosVista button {min-height:44px;padding:8px 16px;border:2px solid #8770c5;border-radius:12px;color:#453475;background:#f3edff;font:700 16px/1.3 "Trebuchet MS",Arial,sans-serif;cursor:pointer;}
#preguntaPasosVista span {font:700 13px/1.2 "Trebuchet MS",Arial,sans-serif;color:#685888;}
#pantallaPregunta.preguntaPorPasos .tarjetaPregunta {grid-template-columns:1fr;}
#pantallaPregunta[data-vista="leer"] #preguntaRespuestas,
#pantallaPregunta[data-vista="responder"] #preguntaContexto {display:none!important;}
#preguntaAyudaDialog {border:2px solid #8a70c6;border-radius:20px;padding:24px;color:#423454;background:#fffaf0;width:min(480px,calc(100vw - 40px));max-height:calc(100dvh - 40px);box-sizing:border-box;font:18px/1.5 "Trebuchet MS",Arial,sans-serif;}
#preguntaAyudaDialog::backdrop {background:#21152b99;}
#preguntaAyudaDialog h2 {margin:0;font:700 22px/1.3 "Trebuchet MS",Arial,sans-serif;}
#preguntaAyudaDialog button {min-height:44px;padding:10px 20px;border:2px solid #6d4fa7;border-radius:12px;color:white;background:#6744ac;font:700 16px/1.2 "Trebuchet MS",Arial,sans-serif;}
#pantallaPregunta.jefeCombateV2 #preguntaContexto {display:none!important;}
#pantallaPregunta.jefeCombateV2 #preguntaRespuestas {display:block!important;}
#pantallaPregunta.jefeCombateV2 .tarjetaPregunta {grid-template-columns:1fr;gap:10px;border-color:var(--jefe-v2-color);}
#pantallaPregunta.jefeCombateV2 .avancePreguntas {display:none;}
#pantallaPregunta.jefeCombateV2 .jefeV2Control {padding:0;}
#pantallaPregunta.jefeCombateV2 .jefeV2Arriba {color:#4d3871!important;font-size:13px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Reloj {color:#68458a!important;font-size:22px;}
#pantallaPregunta.jefeCombateV2 .jefeV2BarraTiempo {height:7px;margin-top:4px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Prueba {padding:16px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Consigna {font:700 20px/1.35 "Trebuchet MS",Arial,sans-serif;margin:0 0 14px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Opciones {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Mensaje {margin:8px 0 0;min-height:0;}
#pantallaPregunta.jefeCombateV2 .jefeV2Mensaje:empty {display:none;}
#pantallaPregunta.jefeCombateV2 .jefeV2Marco {width:130px;min-height:90px;aspect-ratio:4/3;}
#pantallaPregunta.jefeCombateV2 .jefeV2Superficie {grid-template-columns:130px 1fr;gap:14px;padding:16px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Introduccion {gap:8px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Introduccion p {line-height:1.3;font-size:16px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Titulo {font-size:24px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Emblema {font-size:60px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Victoria {padding:10px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Propuesta {padding:10px;margin:8px 0;font-size:16px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Nota {font-size:18px;line-height:1.3;margin:8px 0;}
@media(min-width:1180px) {
#pantallaPregunta:not(.oculto) {padding-top:14px!important;}
#pantallaPregunta .cabeceraPregunta,
#pantallaPregunta .avancePreguntas,
#pantallaPregunta .tarjetaPregunta {width:min(1288px,calc(100vw - 42px))!important;}
#pantallaPregunta .tarjetaPregunta {grid-template-columns:minmax(0,1.02fr) minmax(0,1.08fr);gap:24px;padding:26px 26px 24px!important;}
#pantallaPregunta #textoPregunta {font-size:clamp(22px,1.95vw,30px)!important;}
#pantallaPregunta #contenedorOpciones button {font-size:19px;min-height:52px;padding:13px 18px;}
}
@media(max-width:720px) {
#pantallaPregunta:not(.oculto) {padding:10px 12px!important;gap:8px;}
#pantallaPregunta .cabeceraPregunta {gap:8px;}
#pantallaPregunta .cabeceraPregunta .botonVolver {padding:7px 10px;font-size:13px;}
#pantallaPregunta #cursoPregunta {font-size:12px;}
#pantallaPregunta #nivelPregunta {font-size:13px;}
#pantallaPregunta .monedasPregunta {font-size:14px;padding:6px 8px;}
#pantallaPregunta .tarjetaPregunta {padding:14px!important;grid-template-columns:1fr;gap:12px;border-radius:18px;}
#pantallaPregunta #textoPregunta {font-size:20px!important;line-height:1.3!important;margin:0 0 10px!important;}
#pantallaPregunta #viajeCompaneroPregunta {display:none;}
#pantallaPregunta #contenedorOpciones button {font-size:16px;min-height:44px;padding:10px 12px;}
#pantallaPregunta #viajeAyudas {display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;}
#pantallaPregunta .viajePasos {width:100%;font-size:13px;margin:0 0 2px;}
#pantallaPregunta .viajeClaves {font-size:12px;margin:0;}
#pantallaPregunta.jefeCombateV2 .jefeV2Prueba {padding:12px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Opciones {grid-template-columns:1fr;gap:8px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Consigna {font-size:18px;margin-bottom:10px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Superficie {grid-template-columns:64px 1fr;padding:10px;gap:10px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Marco {width:64px;min-height:60px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Emblema {font-size:36px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Titulo {font-size:20px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Sobretitulo {font-size:10px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Subtitulo {font-size:13px;}
}
@media(max-height:500px) and (min-width:600px) {
#pantallaPregunta:not(.oculto) {padding:6px 12px!important;gap:5px;}
#pantallaPregunta .tarjetaPregunta {padding:12px!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;}
#pantallaPregunta #viajeCompaneroPregunta {display:none;}
#pantallaPregunta #textoPregunta {font-size:19px!important;}
#pantallaPregunta #contenedorOpciones button {font-size:16px;min-height:44px;padding:8px 10px;}
#pantallaPregunta #contenedorOpciones {gap:7px;}
#pantallaPregunta.jefeCombateV2 .tarjetaPregunta {grid-template-columns:1fr;}
#pantallaPregunta.jefeCombateV2 .jefeV2Prueba {display:grid;grid-template-columns:1fr 1.1fr;gap:10px;padding:10px;align-items:start;}
#pantallaPregunta.jefeCombateV2 .jefeV2Consigna {font-size:18px;margin:0;}
#pantallaPregunta.jefeCombateV2 .jefeV2Opciones {grid-column:2;grid-row:1/4;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Mensaje {font-size:13px;}
}
.viajeTextoGrande #pantallaPregunta #textoPregunta {font-size:24px!important;}
.viajeTextoGrande #pantallaPregunta #contenedorOpciones button {font-size:20px!important;}
#pantallaPregunta.preguntaCompacta .tarjetaPregunta {padding:12px!important;gap:10px;}
#pantallaPregunta.preguntaCompacta #viajeCompaneroPregunta {display:none;}
#pantallaPregunta.preguntaCompacta .viajeClaves {display:none;}
#pantallaPregunta.preguntaCompacta #textoPregunta {font-size:19px!important;margin:0 0 8px!important;}
#pantallaPregunta.preguntaCompacta #contenedorOpciones button {padding:8px 10px;min-height:44px;font-size:16px;line-height:1.25;}
#pantallaPregunta.preguntaCompacta #contenedorOpciones {gap:7px;}
#pantallaPregunta.jefeCombateV2[data-vista="leer"] .jefeV2Opciones,
#pantallaPregunta.jefeCombateV2[data-vista="leer"] .jefeV2Prueba > button {display:none!important;}
#pantallaPregunta.jefeCombateV2[data-vista="responder"] :is(.jefeV2Consigna,.jefeV2Propuesta,.jefeV2Nota) {display:none!important;}
#pantallaPregunta.jefeCombateV2.preguntaPorPasos .jefeV2Prueba {display:block;}
#pantallaPregunta.jefeCombateV2.preguntaPorPasos .jefeV2Opciones {grid-row:auto;grid-column:auto;}
.viajeTextoGrande #pantallaPregunta.preguntaCompacta #textoPregunta {font-size:24px!important;}
.viajeTextoGrande #pantallaPregunta.preguntaCompacta #contenedorOpciones button {font-size:20px!important;}
#pantallaPregunta #textoPregunta:focus {outline:none;}
#pantallaPregunta.jefeCombateV2::before,#pantallaPregunta.jefeCombateV2::after {display:none!important;}
#pantallaPregunta.jefeCombateV2 :is(#cursoPregunta,#nivelPregunta) {color:#4b356d!important;}
#pantallaMenu .cabeceraProgresoGeneral {flex-wrap:wrap;gap:8px;}
#pantallaMenu .cabeceraProgresoGeneral .viajeAccesos {margin:0 0 0 auto;flex-shrink:0;}
@media(max-width:720px) {
#pantallaMenu .cabeceraProgresoGeneral .viajeAccesos {flex-basis:100%;order:3;justify-content:flex-start;margin:6px 0 0;}
}
@media(max-height:500px) and (min-width:600px) {
#pantallaPregunta.jefeCombateV2 .jefeV2Introduccion {grid-column:2;gap:6px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Marco {grid-row:1/3;}
#pantallaPregunta.jefeCombateV2 .jefeV2Superficie {grid-template-columns:90px 1fr;gap:8px;padding:10px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Marco {width:90px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Titulo {font-size:20px;margin:4px 0;}
#pantallaPregunta.jefeCombateV2 .jefeV2Introduccion p {font-size:14px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Recompensa {padding:6px;}
}
#pantallaPregunta #contenedorOpciones .zonaOrden {min-height:0;padding:4px;border:0;background:none;font:14px/1.2 "Trebuchet MS",Arial,sans-serif;}
#pantallaPregunta #contenedorOpciones .elementosOrden {display:grid;gap:7px;margin:0;}
#pantallaPregunta #contenedorOpciones .accionesOrden {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;}
#pantallaPregunta #contenedorOpciones .botonOrden.ordenElegido {opacity:1;border-color:#6c50b5;background:#eee6ff;color:#493273;}
#pantallaPregunta #contenedorOpciones button {font-family:"Trebuchet MS",Arial,sans-serif!important;}
#pantallaPregunta.preguntaPorPasos #preguntaPasosVista span {display:none;}
#pantallaPregunta.preguntaPorPasos #preguntaPasosVista {justify-content:flex-end;}
#pantallaPregunta.preguntaPorPasos #preguntaPasosVista button {font-size:15px;}
#pantallaPregunta.preguntaPorPasos .cabeceraPregunta #nivelPregunta {font-size:12px;}
@media(max-height:500px) and (min-width:600px) {
#pantallaPregunta #contenedorOpciones .elementosOrden {grid-template-columns:1fr 1fr;}
#pantallaPregunta #contenedorOpciones .zonaRelacionar {gap:10px;}
}
@media(max-width:420px) {
#pantallaPregunta .cabeceraPregunta .botonVolver {width:44px;padding:8px;font-size:0;}
#pantallaPregunta .cabeceraPregunta .botonVolver::before {content:"←";font:700 22px/1 Arial,sans-serif;}
#pantallaPregunta .cabeceraPregunta {gap:6px;}
#pantallaPregunta.preguntaCompacta .cabeceraPregunta #nivelPregunta {font-size:12px;}
}
#pantallaPregunta.preguntaPorPasos #contenedorOpciones .instruccionOrden {display:none;}
#pantallaPregunta #contenedorOpciones .relacionPorPasos {display:grid;grid-template-columns:1fr;gap:8px;}
#pantallaPregunta #contenedorOpciones .relacionPorPasos .columnaRelacionar {gap:6px;}
#pantallaPregunta #contenedorOpciones .relacionPorPasos .columnaRelacionar:first-child button:not(.relacionActual),
#pantallaPregunta #contenedorOpciones .relacionPorPasos button.parejaCorrecta {display:none;}
#pantallaPregunta #contenedorOpciones .avisoPareja {margin:0;color:#8a341e;font:14px/1.3 "Trebuchet MS",Arial,sans-serif;}
@media(max-height:500px) and (min-width:600px) {
#pantallaPregunta #contenedorOpciones .relacionPorPasos {grid-template-columns:.65fr 1.35fr;}
#pantallaPregunta #contenedorOpciones .relacionPorPasos .columnaRelacionar:last-child {grid-template-columns:1fr 1fr;}
}
#pantallaPregunta .preguntaOpcionOtraPagina {display:none!important;}
#pantallaPregunta #contenedorOpciones .preguntaPaginasOpciones {display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;grid-column:1/-1;}
#pantallaPregunta #contenedorOpciones .preguntaPaginasOpciones[hidden] {display:none;}
#pantallaPregunta #contenedorOpciones .preguntaPaginasOpciones button {min-height:44px;padding:6px;font-size:20px;}
#pantallaPregunta .preguntaPaginasOpciones span {font:700 13px/1.3 "Trebuchet MS",Arial,sans-serif;color:#594078;text-align:center;}
#pantallaPregunta .jefeV2SelloResuelto .jefeV2Opciones {display:none!important;}
#pantallaPregunta.preguntaRespuestaCompacta #preguntaContexto {display:none!important;}
#preguntaRecordarConsigna {grid-column:1/-1;justify-self:center;min-height:44px;border:1px solid #8a70c6;border-radius:10px;background:#f3edff;color:#4b356d;padding:8px 14px;font:700 15px/1.3 "Trebuchet MS",Arial,sans-serif;}
#preguntaRecordarConsigna[hidden] {display:none!important;}
#pantallaPregunta.jefeCombateV2.preguntaJefeTerminada #preguntaRespuestas {display:none!important;}
#pantallaPregunta.jefeCombateV2 #retroalimentacion {background:#fff5d9!important;color:#49356a!important;border:2px solid #d7b96a;padding:14px;}
#pantallaPregunta.jefeCombateV2 #tituloRetroalimentacion {font:700 22px/1.2 "Trebuchet MS",Arial,sans-serif!important;color:#49356a!important;}
#pantallaPregunta.jefeCombateV2 #textoRetroalimentacion {font:18px/1.35 "Trebuchet MS",Arial,sans-serif!important;color:#49356a!important;}
#pantallaPregunta.jefeCombateV2[data-vista="leer"] .jefeV2Propuesta {display:none!important;}
#pantallaPregunta.jefeCombateV2[data-vista="responder"] .jefeV2Propuesta {display:block!important;}
@media(max-width:420px) {
#pantallaPregunta.jefeCombateV2 .jefeV2Sobretitulo {display:none;}
#pantallaPregunta.jefeCombateV2 .jefeV2Introduccion p {font-size:15px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Recompensa {padding:7px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Arriba {flex-wrap:nowrap;gap:6px;font-size:12px;}
#pantallaPregunta.jefeCombateV2 .jefeV2Reloj {font-size:19px;white-space:nowrap;}
}
#pantallaPregunta .jefeV2SelloResuelto :is(.jefeV2Consigna,.jefeV2Nota,.jefeV2Propuesta) {display:none!important;}
#pantallaPregunta .preguntaPaginasFeedback {display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;margin-top:10px;}
#pantallaPregunta .preguntaPaginasFeedback[hidden] {display:none;}
#pantallaPregunta .preguntaPaginasFeedback button {min-height:44px;padding:6px;border:1px solid #8a70c6;border-radius:10px;background:#f3edff;color:#4b356d;font:700 20px/1.2 Arial,sans-serif;}
#pantallaPregunta .preguntaPaginasFeedback span {font:700 13px/1.3 "Trebuchet MS",Arial,sans-serif;}
#pantallaPregunta #contenedorOpciones .preguntaPaginasOpciones button {border:1px solid #8a70c6;border-radius:10px;background:#f3edff;color:#4b356d;}
@layer silabasPiloto {
#pantallaSilabasV1{position:fixed!important;inset:0!important;z-index:110!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:58px 30px minmax(0,1fr) 118px!important;align-content:stretch!important;justify-content:stretch!important;align-items:stretch!important;justify-items:stretch!important;width:100vw!important;max-width:none!important;height:100dvh!important;min-height:0!important;overflow:auto!important;margin:0!important;padding:16px clamp(14px,4vw,70px)!important;gap:10px!important;box-sizing:border-box!important;color:#40334f!important;background:radial-gradient(ellipse at 10% 95%,#829d8290 0,transparent 40%),radial-gradient(ellipse at 90% 90%,#bdcaa78c 0,transparent 40%),linear-gradient(#e5e7de,#f8efd8 58%,#d2d9bd)!important;font-family:Comfortaa,'Trebuchet MS',sans-serif!important;text-align:center!important;}
#pantallaSilabasV1.oculto{display:none!important;}
#pantallaSilabasV1 *{box-sizing:border-box!important;}
#pantallaSilabasV1 [hidden]{display:none!important;}
#pantallaSilabasV1 button{font:inherit!important;cursor:pointer!important;min-height:44px!important;box-shadow:none!important;line-height:1.25!important;transition:background .12s!important;margin:0!important;}
#pantallaSilabasV1 button:focus-visible{outline:3px solid #ce841b!important;outline-offset:3px!important;}
#pantallaSilabasV1 button:disabled{cursor:default!important;opacity:.5!important;}
#pantallaSilabasV1 h1,#pantallaSilabasV1 h2,#pantallaSilabasV1 p{margin:0!important;color:inherit!important;text-shadow:none!important;font-family:inherit!important;}
#pantallaSilabasV1 h1{font-size:clamp(20px,2.2vw,31px)!important;line-height:1.2!important;}
#pantallaSilabasV1 h2{font-size:22px!important;line-height:1.3!important;}
#pantallaSilabasV1 .sv-cabecera{display:grid!important;grid-template-columns:100px minmax(0,1fr) 100px!important;align-items:center!important;width:100%!important;gap:12px!important;}
#pantallaSilabasV1 .sv-marca{display:flex!important;flex-direction:column!important;gap:5px!important;}
#pantallaSilabasV1 .sv-marca small{font-size:10px!important;letter-spacing:1.6px!important;}
#pantallaSilabasV1 .sv-marca strong{font-size:19px!important;}
#pantallaSilabasV1 .sv-secundario{background:#fff9e9!important;color:#57426c!important;border:1px solid #bdaac5!important;border-radius:13px!important;padding:10px 16px!important;}
#pantallaSilabasV1 .sv-primario{background:#70518a!important;color:#fffbee!important;border:2px solid #5c3e75!important;border-radius:14px!important;padding:12px 28px!important;font-weight:bold!important;}
#pantallaSilabasV1 .sv-ruta{display:flex!important;align-items:center!important;justify-content:center!important;gap:16px!important;font-size:13px!important;width:100%!important;}
#pantallaSilabasV1 .sv-modo{border-radius:30px!important;background:#ede1f0!important;padding:5px 12px!important;}
#pantallaSilabasV1 .sv-progreso{height:8px!important;width:220px!important;max-width:25%!important;background:#bfb9b3!important;border-radius:10px!important;overflow:hidden!important;}
#pantallaSilabasV1 .sv-progreso i{display:block!important;height:100%!important;background:#799575!important;border-radius:10px!important;transition:width .2s!important;}
#pantallaSilabasV1 .sv-cuerpo{min-height:0!important;width:100%!important;height:100%!important;max-width:none!important;justify-self:stretch!important;align-self:stretch!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:82px minmax(0,1fr)!important;gap:10px!important;background:#fffaf0f5!important;border:2px solid #d8c9ac!important;border-radius:24px!important;padding:20px 24px!important;box-shadow:0 7px 0 #a6a78b33!important;}
#pantallaSilabasV1 .sv-titulo{display:grid!important;grid-template-rows:18px minmax(0,1fr) 16px!important;align-items:center!important;width:100%!important;border-bottom:1px solid #e2d6c1!important;padding-bottom:8px!important;}
#pantallaSilabasV1 .sv-titulo small{color:#6f5a79!important;font-size:12px!important;}
#pantallaSilabasV1 .sv-titulo h1{align-self:start!important;}
#pantallaSilabasV1 .sv-zona{display:grid!important;grid-template-columns:minmax(230px,.8fr) minmax(0,1.5fr)!important;align-items:stretch!important;gap:clamp(16px,3vw,42px)!important;min-height:0!important;}
#pantallaSilabasV1 .sv-contexto{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:20px!important;border-right:1px solid #e2d6c1!important;padding:16px 20px 16px 0!important;min-width:0!important;}
#pantallaSilabasV1 .sv-consigna{font-size:clamp(22px,2vw,28px)!important;line-height:1.4!important;width:100%!important;}
#pantallaSilabasV1 .sv-tablero{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:24px!important;width:100%!important;min-width:0!important;min-height:0!important;padding:8px 0!important;}
#pantallaSilabasV1 .sv-destinos,#pantallaSilabasV1 .sv-piezas{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:10px!important;width:100%!important;}
#pantallaSilabasV1 .sv-destinos{background:#eaf0e2!important;padding:20px 12px!important;border-radius:16px!important;}
#pantallaSilabasV1 .sv-pieza{border:2px solid #c7b9a5!important;border-radius:12px!important;background:linear-gradient(#eee6d8,#e4d7bf)!important;color:#473951!important;padding:14px 16px!important;min-width:50px!important;font-size:23px!important;}
#pantallaSilabasV1 .sv-colocada{background:#f9fff2!important;border:2px dashed #95a58d!important;}
#pantallaSilabasV1 .sv-colocada:disabled{opacity:.85!important;}
#pantallaSilabasV1 .sv-piezas .sv-pieza:disabled{visibility:hidden!important;}
#pantallaSilabasV1 .sv-opciones{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;width:100%!important;}
#pantallaSilabasV1 .sv-opcion{background:#f5eedf!important;border:2px solid #d5c7b3!important;color:#44344f!important;padding:20px 16px!important;border-radius:16px!important;font-size:22px!important;min-height:64px!important;overflow-wrap:anywhere!important;}
#pantallaSilabasV1 .sv-opcion[aria-pressed=true]{border-color:#75508e!important;background:#e9dbf1!important;box-shadow:inset 0 0 0 1px #75508e!important;}
#pantallaSilabasV1 .sv-palabra{font-size:clamp(28px,3vw,44px)!important;letter-spacing:2px!important;}
#pantallaSilabasV1 .sv-instruccion{font-size:17px!important;color:#75677c!important;line-height:1.5!important;}
#pantallaSilabasV1 .sv-letras{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;max-width:100%!important;gap:8px 0!important;}
#pantallaSilabasV1 .sv-letra-grupo{display:inline-flex!important;align-items:center!important;}
#pantallaSilabasV1 .sv-letra-grupo strong{font-size:34px!important;min-width:24px!important;}
#pantallaSilabasV1 .sv-corte{min-width:44px!important;padding:0!important;background:#eee5f4!important;border:1px dashed #ac96ba!important;border-radius:10px!important;color:#8e7e98!important;}
#pantallaSilabasV1 .sv-corte[aria-pressed=true]{background:#795490!important;color:white!important;}
#pantallaSilabasV1 .sv-lectura{font-size:28px!important;font-weight:bold!important;letter-spacing:2px!important;}
#pantallaSilabasV1 .sv-tonicas{display:flex!important;flex-wrap:wrap!important;gap:8px!important;justify-content:center!important;}
#pantallaSilabasV1 .sv-pistas{margin:0!important;padding:14px!important;list-style:none!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:8px!important;background:#eceadd!important;border-radius:14px!important;font-size:18px!important;line-height:1.4!important;width:100%!important;}
#pantallaSilabasV1 .sv-pistas li{margin:0!important;}
#pantallaSilabasV1 .sv-elementos{display:flex!important;gap:9px!important;justify-content:center!important;}
#pantallaSilabasV1 .sv-elementos span{display:grid!important;place-items:center!important;width:32px!important;height:32px!important;border:1px solid #cabcaa!important;border-radius:50%!important;font-size:13px!important;background:#f6eddf!important;}
#pantallaSilabasV1 .sv-elementos .actual{background:#77558f!important;color:#fff!important;border-color:#77558f!important;}
#pantallaSilabasV1 .sv-elementos .hecho{background:#77956c!important;color:#fff!important;border-color:#77956c!important;}
#pantallaSilabasV1 .sv-pie{display:grid!important;grid-template-rows:64px 48px!important;gap:6px!important;width:100%!important;}
#pantallaSilabasV1 .sv-aviso{font-size:18px!important;line-height:1.3!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:16px!important;padding:4px 14px!important;border-radius:14px!important;}
#pantallaSilabasV1 .sv-aviso:empty{padding:0!important;}
#pantallaSilabasV1 .sv-resultado{font-size:23px!important;white-space:nowrap!important;}
#pantallaSilabasV1 .sv-explicacion{max-width:900px!important;}
#pantallaSilabasV1 .sv-segmento{display:inline-block!important;}
#pantallaSilabasV1 .sv-bien{color:#23553d!important;background:#e4efdc!important;border:1px solid #96af87!important;}
#pantallaSilabasV1 .sv-error{color:#813c32!important;background:#fae5d9!important;border:1px solid #cc9a83!important;}
#pantallaSilabasV1 .sv-acciones{display:flex!important;gap:12px!important;justify-content:center!important;align-items:center!important;}
#pantallaSilabasV1 .sv-alfabeto{font-size:13px!important;line-height:1.8!important;letter-spacing:1px!important;}
#pantallaSilabasV1 .sv-mecanismos{display:flex!important;justify-content:center!important;gap:4px!important;}
#pantallaSilabasV1 .sv-mecanismos i{display:grid!important;place-items:center!important;width:24px!important;height:15px!important;font-size:10px!important;font-style:normal!important;background:#ddd4c4!important;border-radius:4px!important;}
#pantallaSilabasV1 .sv-mecanismos .hecho{background:#7f9b73!important;color:white!important;}
#pantallaSilabasV1 .sv-ilustracion{width:140px!important;height:96px!important;flex:none!important;}
#pantallaSilabasV1 .sv-reloj{min-width:55px!important;padding:5px 8px!important;border-radius:20px!important;background:#f8e3ad!important;font-weight:bold!important;font-variant-numeric:tabular-nums!important;}
#pantallaSilabasV1 .sv-urgente{background:#f1c8b8!important;color:#7a342c!important;}
#pantallaSilabasV1 .sv-escena{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:20px!important;}
#pantallaSilabasV1 .sv-resumen{font-size:18px!important;max-width:760px!important;line-height:1.6!important;color:#3d3349!important;font-weight:600!important;text-align:center!important;}
#pantallaSilabasV1 .sv-nota{background:#f3edf6!important;border:2px solid #ccb7d8!important;border-radius:16px!important;padding:16px!important;max-width:760px!important;font-size:15px!important;line-height:1.6!important;color:#3d3349!important;box-shadow:0 2px 0 #e1d4ea!important;}
#pantallaSilabasV1 .sv-nota strong{display:block!important;margin-bottom:5px!important;color:#342a40!important;}
#pantallaSilabasV1 .sv-enlace{background:transparent!important;border:0!important;color:#6e517e!important;text-decoration:underline!important;padding:5px 10px!important;font-size:13px!important;}
#pantallaSilabasV1 .sv-premio{width:64px!important;height:64px!important;}
#pantallaSilabasV1 .sv-preparacion{grid-column:1/-1!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:16px!important;line-height:1.6!important;}
#pantallaSilabasV1 .sv-dialogo{border:2px solid #bca3c8!important;border-radius:22px!important;padding:20px!important;background:#fff8e9!important;color:#44344f!important;width:min(790px,calc(100vw - 24px))!important;max-width:none!important;max-height:calc(100dvh - 24px)!important;overflow:visible!important;text-align:left!important;font-family:inherit!important;}
#pantallaSilabasV1 .sv-dialogo::backdrop{background:#30203d99!important;}
#pantallaSilabasV1 .sv-ayuda-marco{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;gap:12px!important;}
#pantallaSilabasV1 .sv-ayuda-cuerpo{display:grid!important;grid-template-columns:220px minmax(0,1fr)!important;gap:16px!important;min-height:0!important;}
#pantallaSilabasV1 .sv-ayuda-temas{display:grid!important;gap:6px!important;align-content:start!important;}
#pantallaSilabasV1 .sv-ayuda-tema{background:#eee6f1!important;color:#544063!important;border:1px solid #d5c4de!important;border-radius:10px!important;font-size:16px!important;text-align:left!important;padding:9px 12px!important;}
#pantallaSilabasV1 .sv-ayuda-tema[aria-expanded=true]{background:#71528b!important;color:#fff!important;border-color:#71528b!important;}
#pantallaSilabasV1 .sv-ayuda-paneles{min-width:0!important;}
#pantallaSilabasV1 .sv-ayuda-panel{display:grid!important;grid-template-rows:minmax(0,1fr) 44px!important;gap:10px!important;background:#f0eddf!important;border-radius:14px!important;padding:16px!important;height:100%!important;min-height:150px!important;}
#pantallaSilabasV1 .sv-ayuda-panel[hidden]{display:none!important;}
#pantallaSilabasV1 .sv-ayuda-texto{font-size:19px!important;line-height:1.5!important;align-self:center!important;}
#pantallaSilabasV1 .sv-ayuda-paginas{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:10px!important;font-size:14px!important;}
#pantallaSilabasV1 .sv-ayuda-paginas[hidden]{visibility:hidden!important;display:flex!important;}
#pantallaSilabasV1 .sv-ayuda-paginas button{min-width:44px!important;padding:0!important;font-size:24px!important;}
.sv-distintivo{display:block!important;background:#e9ddf2!important;border-radius:20px!important;padding:5px 9px!important;color:#604576!important;font-size:11px!important;}
@media(max-width:700px){
#pantallaSilabasV1{grid-template-rows:50px 28px minmax(0,1fr) 114px!important;padding:8px!important;gap:7px!important;}
#pantallaSilabasV1 .sv-cabecera{grid-template-columns:64px minmax(0,1fr) 64px!important;gap:5px!important;}
#pantallaSilabasV1 .sv-marca small{font-size:8px!important;letter-spacing:.6px!important;}
#pantallaSilabasV1 .sv-marca strong{font-size:12px!important;line-height:1.3!important;}
#pantallaSilabasV1 .sv-secundario{padding:8px 6px!important;font-size:12px!important;}
#pantallaSilabasV1 .sv-primario{padding:11px 20px!important;font-size:14px!important;}
#pantallaSilabasV1 .sv-ruta{gap:6px!important;font-size:10px!important;}
#pantallaSilabasV1 .sv-progreso{width:60px!important;max-width:18%!important;}
#pantallaSilabasV1 .sv-modo{padding:5px 7px!important;}
#pantallaSilabasV1 .sv-cuerpo{padding:12px!important;border-radius:18px!important;grid-template-rows:84px minmax(0,1fr)!important;gap:8px!important;}
#pantallaSilabasV1 h1{font-size:20px!important;}
#pantallaSilabasV1 h2{font-size:18px!important;}
#pantallaSilabasV1 .sv-titulo{grid-template-rows:14px minmax(0,1fr) 13px!important;padding-bottom:5px!important;}
#pantallaSilabasV1 .sv-titulo small{font-size:10px!important;}
#pantallaSilabasV1 .sv-zona{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr)!important;gap:8px!important;}
#pantallaSilabasV1 .sv-contexto{border:0!important;padding:0!important;gap:8px!important;}
#pantallaSilabasV1 .sv-consigna{font-size:18px!important;line-height:1.35!important;}
#pantallaSilabasV1 .sv-elementos{gap:7px!important;}
#pantallaSilabasV1 .sv-elementos span{width:22px!important;height:22px!important;font-size:11px!important;}
#pantallaSilabasV1 .sv-tablero{gap:14px!important;padding:4px 0!important;}
#pantallaSilabasV1 .sv-destinos,#pantallaSilabasV1 .sv-piezas{gap:6px!important;}
#pantallaSilabasV1 .sv-destinos{padding:8px 4px!important;border-radius:12px!important;}
#pantallaSilabasV1 .sv-pieza{min-width:36px!important;padding:8px 10px!important;font-size:18px!important;}
#pantallaSilabasV1 .sv-opciones{gap:10px!important;}
#pantallaSilabasV1 .sv-opcion{font-size:18px!important;padding:12px 8px!important;min-height:50px!important;border-radius:12px!important;}
#pantallaSilabasV1 .sv-palabra{font-size:29px!important;}
#pantallaSilabasV1 .sv-tonicas{gap:5px!important;}
#pantallaSilabasV1 .sv-letra-grupo strong{font-size:26px!important;min-width:17px!important;}
#pantallaSilabasV1 .sv-instruccion{font-size:14px!important;}
#pantallaSilabasV1 .sv-lectura{font-size:24px!important;}
#pantallaSilabasV1 .sv-pie{grid-template-rows:64px 44px!important;gap:6px!important;}
#pantallaSilabasV1 .sv-aviso{font-size:14px!important;gap:8px!important;padding:4px 8px!important;}
#pantallaSilabasV1 .sv-resultado{font-size:18px!important;}
#pantallaSilabasV1 .sv-pistas{flex-direction:row!important;flex-wrap:wrap!important;font-size:14px!important;gap:6px!important;padding:8px!important;line-height:1.3!important;}
#pantallaSilabasV1 .sv-mecanismos{gap:3px!important;}
#pantallaSilabasV1 .sv-mecanismos i{width:21px!important;height:13px!important;font-size:9px!important;}
#pantallaSilabasV1 .sv-alfabeto{font-size:10px!important;line-height:1.5!important;}
#pantallaSilabasV1 .sv-contexto .sv-ilustracion{display:none!important;}
#pantallaSilabasV1 .sv-piezas .sv-pieza:disabled{display:none!important;}
#pantallaSilabasV1 .sv-escena{gap:14px!important;}
#pantallaSilabasV1 .sv-resumen{font-size:14px!important;line-height:1.5!important;}
#pantallaSilabasV1 .sv-nota{font-size:12px!important;padding:12px!important;line-height:1.5!important;}
#pantallaSilabasV1 .sv-ilustracion{width:105px!important;height:72px!important;}
}
@media(max-height:650px){
#pantallaSilabasV1 .sv-tablero{gap:8px!important;}
#pantallaSilabasV1 .sv-opcion{min-height:44px!important;padding:10px 8px!important;}
#pantallaSilabasV1 .sv-cuerpo{padding:9px!important;gap:6px!important;}
#pantallaSilabasV1 .sv-escena{gap:9px!important;}
#pantallaSilabasV1 .sv-escena>.sv-ilustracion{width:80px!important;height:55px!important;}
#pantallaSilabasV1 .sv-resumen{font-size:13px!important;line-height:1.4!important;}
#pantallaSilabasV1 .sv-premio{width:44px!important;height:44px!important;}
}
@media(max-height:650px) and (min-width:701px){
#pantallaSilabasV1 .sv-contexto{gap:10px!important;padding-top:0!important;padding-bottom:0!important;}
}
@media(max-height:650px) and (max-width:700px){
#pantallaSilabasV1{grid-template-rows:44px 24px minmax(0,1fr) 114px!important;gap:4px!important;}
#pantallaSilabasV1 .sv-tablero{gap:6px!important;}
#pantallaSilabasV1 .sv-elementos{display:none!important;}
#pantallaSilabasV1 .sv-destinos{padding:4px!important;}
}
@media(max-height:450px) and (min-width:600px){
#pantallaSilabasV1{padding:6px 14px!important;gap:5px!important;grid-template-rows:44px 24px minmax(0,1fr) 56px!important;}
#pantallaSilabasV1 .sv-cuerpo{grid-template-rows:55px minmax(0,1fr)!important;}
#pantallaSilabasV1 h1{font-size:20px!important;}
#pantallaSilabasV1 .sv-titulo{grid-template-rows:12px minmax(0,1fr) 12px!important;padding-bottom:3px!important;}
#pantallaSilabasV1 .sv-titulo small{font-size:9px!important;}
#pantallaSilabasV1 .sv-zona{grid-template-columns:minmax(180px,.8fr) minmax(0,1.5fr)!important;gap:12px!important;}
#pantallaSilabasV1 .sv-contexto{padding:0 10px 0 0!important;gap:8px!important;}
#pantallaSilabasV1 .sv-consigna{font-size:18px!important;line-height:1.3!important;}
#pantallaSilabasV1 .sv-contexto .sv-ilustracion{display:none!important;}
#pantallaSilabasV1 .sv-elementos span{width:20px!important;height:20px!important;font-size:10px!important;}
#pantallaSilabasV1 .sv-tablero{padding:0!important;gap:6px!important;}
#pantallaSilabasV1 .sv-pieza{padding:6px 10px!important;font-size:17px!important;min-width:38px!important;}
#pantallaSilabasV1 .sv-destinos{padding:4px!important;}
#pantallaSilabasV1 .sv-destinos,#pantallaSilabasV1 .sv-piezas{gap:5px!important;}
#pantallaSilabasV1 .sv-opcion{font-size:16px!important;padding:8px!important;min-height:44px!important;}
#pantallaSilabasV1 .sv-opciones{gap:6px!important;}
#pantallaSilabasV1 .sv-palabra{font-size:24px!important;}
#pantallaSilabasV1 .sv-pistas{padding:6px!important;font-size:14px!important;gap:2px!important;line-height:1.2!important;}
#pantallaSilabasV1 .sv-pie{grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:56px!important;gap:12px!important;}
#pantallaSilabasV1 .sv-elementos{display:none!important;}
#pantallaSilabasV1 .sv-aviso{font-size:15px!important;}
#pantallaSilabasV1 .sv-resultado{font-size:20px!important;}
#pantallaSilabasV1 .sv-escena{display:grid!important;grid-template-columns:90px 1fr 1fr!important;grid-template-rows:1fr 1fr!important;text-align:left!important;gap:8px!important;}
#pantallaSilabasV1 .sv-escena>.sv-ilustracion{grid-row:1/3!important;}
#pantallaSilabasV1 .sv-escena .sv-nota{grid-column:3!important;grid-row:1/3!important;font-size:12px!important;padding:8px!important;line-height:1.3!important;}
#pantallaSilabasV1 .sv-escena>.sv-enlace{grid-column:2!important;font-size:11px!important;padding:0!important;}
#pantallaSilabasV1 .sv-escena:has(>.sv-enlace){grid-template-rows:auto 1fr 44px!important;}
#pantallaSilabasV1 .sv-escena:has(>.sv-enlace)>.sv-ilustracion,#pantallaSilabasV1 .sv-escena:has(>.sv-enlace) .sv-nota{grid-row:1/4!important;}
#pantallaSilabasV1 .sv-preparacion{display:grid!important;grid-template-columns:75px 1fr!important;gap:8px!important;font-size:13px!important;line-height:1.4!important;}
#pantallaSilabasV1 .sv-preparacion>.sv-ilustracion{grid-row:1/3!important;width:75px!important;height:52px!important;}
}
@media(max-width:700px){
#pantallaSilabasV1 .sv-dialogo{padding:12px!important;}
#pantallaSilabasV1 .sv-ayuda-marco{gap:10px!important;}
#pantallaSilabasV1 .sv-ayuda-cuerpo{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;}
#pantallaSilabasV1 .sv-ayuda-temas{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;}
#pantallaSilabasV1 .sv-ayuda-tema{font-size:14px!important;padding:5px 8px!important;}
#pantallaSilabasV1 .sv-ayuda-panel{height:164px!important;padding:10px!important;gap:6px!important;}
#pantallaSilabasV1 .sv-ayuda-texto{font-size:16px!important;line-height:1.4!important;}
}
@media(max-height:450px) and (min-width:600px){
#pantallaSilabasV1 .sv-dialogo{padding:12px!important;}
#pantallaSilabasV1 .sv-ayuda-marco{gap:8px!important;}
#pantallaSilabasV1 .sv-ayuda-cuerpo{grid-template-columns:minmax(250px,.9fr) minmax(0,1.3fr)!important;gap:12px!important;}
#pantallaSilabasV1 .sv-ayuda-temas{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
#pantallaSilabasV1 .sv-ayuda-tema{font-size:14px!important;padding:5px 8px!important;}
#pantallaSilabasV1 .sv-ayuda-panel{min-height:144px!important;padding:10px!important;gap:6px!important;}
#pantallaSilabasV1 .sv-ayuda-texto{font-size:17px!important;line-height:1.35!important;}
}
@media(prefers-reduced-motion:reduce){#pantallaSilabasV1 *{transition:none!important;}}
#pantallaSilabasV1[data-modo=apoyo]{font-family:'Trebuchet MS',Arial,sans-serif!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-consigna{font-size:clamp(24px,2.2vw,30px)!important;font-weight:700!important;line-height:1.3!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-contexto{gap:12px!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-opcion{position:relative!important;font-size:24px!important;padding:14px 12px!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-opcion:nth-child(4n+1){background:#e6eff4!important;border-color:#8aa7b6!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-opcion:nth-child(4n+2){background:#faf0d9!important;border-color:#bfa36a!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-opcion:nth-child(4n+3){background:#eee5f3!important;border-color:#b19bc1!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-opcion:nth-child(4n+4){background:#e8efdf!important;border-color:#9daf85!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-opcion[aria-pressed=true]{border:3px solid #62447c!important;background:#e3d3ed!important;box-shadow:inset 0 0 0 1px #62447c!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-opcion[data-etiqueta]::after{content:attr(data-etiqueta)!important;display:block!important;font-size:14px!important;font-weight:normal!important;margin-top:3px!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-sugerida{outline:3px dashed #527334!important;outline-offset:2px!important;}
#pantallaSilabasV1 .sv-acompanamiento{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;text-align:left!important;background:#edf1e7!important;border:1px solid #a6b496!important;gap:10px!important;}
#pantallaSilabasV1 .sv-apoyo-contenido{display:flex!important;flex-direction:column!important;justify-content:center!important;gap:3px!important;min-width:0!important;}
#pantallaSilabasV1 .sv-apoyo-texto{font-size:18px!important;line-height:1.2!important;}
#pantallaSilabasV1 .sv-modelo{display:flex!important;flex-wrap:wrap!important;gap:4px!important;}
#pantallaSilabasV1 .sv-modelo span{background:#fffaf0!important;border:1px solid #c2b99c!important;border-radius:5px!important;padding:1px 6px!important;font-size:17px!important;line-height:1.1!important;}
#pantallaSilabasV1 .sv-modelo .sv-fuerte{font-weight:bold!important;text-transform:uppercase!important;}
#pantallaSilabasV1 .sv-ayuda-acciones{display:flex!important;gap:8px!important;align-items:stretch!important;}
#pantallaSilabasV1 .sv-ayuda-acciones .sv-primario{flex:1!important;}
@media(max-width:700px){
#pantallaSilabasV1[data-modo=apoyo] .sv-cuerpo{grid-template-rows:64px minmax(0,1fr)!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-consigna{font-size:20px!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-contexto{flex-direction:row!important;gap:8px!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-contexto .sv-ilustracion{display:block!important;width:62px!important;height:44px!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-tablero{gap:8px!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-opcion{font-size:20px!important;padding:8px 6px!important;min-height:48px!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-opcion[data-etiqueta]::after{font-size:12px!important;margin-top:1px!important;}
#pantallaSilabasV1 .sv-apoyo-texto{font-size:14px!important;line-height:1.2!important;}
#pantallaSilabasV1 .sv-modelo span{font-size:14px!important;padding:1px 4px!important;}
#pantallaSilabasV1 .sv-acompanamiento{gap:6px!important;}
#pantallaSilabasV1 .sv-ayuda-acciones .sv-primario{padding-left:8px!important;padding-right:8px!important;}
}
@media(max-height:450px) and (min-width:600px){
#pantallaSilabasV1[data-modo=apoyo] .sv-cuerpo{grid-template-rows:55px minmax(0,1fr)!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-consigna{font-size:20px!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-contexto{flex-direction:column!important;gap:4px!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-contexto .sv-ilustracion{display:block!important;width:66px!important;height:45px!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-opcion{font-size:18px!important;padding:5px 8px!important;}
#pantallaSilabasV1[data-modo=apoyo] .sv-opcion[data-etiqueta]::after{font-size:12px!important;}
#pantallaSilabasV1 .sv-apoyo-texto{font-size:14px!important;}
#pantallaSilabasV1 .sv-modelo span{font-size:13px!important;}
#pantallaSilabasV1 .sv-acompanamiento{padding:2px 8px!important;gap:6px!important;}
}
}
/* CAMBIO 14: dos huecos en Aventura, sin saturar la zona de respuestas. */
#pantallaSilabasV1 .sv-fragmento {overflow-wrap:anywhere!important;line-height:1.16!important;text-align:center!important;}
#pantallaSilabasV1 .sv-indicacion-huecos{font-size:clamp(12px,1.4vw,15px);line-height:1.3;color:#62516a;max-width:95%;margin:4px auto 8px;text-align:center;}
#pantallaSilabasV1[data-modo=apoyo] .sv-palabra{overflow-wrap:anywhere!important;word-break:normal!important;}
@media (max-width:420px){#pantallaSilabasV1 .sv-fragmento{font-size:clamp(22px,7vw,29px)!important;letter-spacing:0!important;}}
@media (max-height:430px) and (orientation:landscape){#pantallaSilabasV1 .sv-indicacion-huecos{font-size:11px;margin:0 auto 2px!important;}#pantallaSilabasV1 .sv-fragmento{font-size:22px!important;letter-spacing:0!important;}}
/* CAMBIO 15 — cronómetros del minijefe y las expediciones: notorios y legibles. */
#pantallaSilabasV1.sv-con-tiempo {grid-template-rows:58px 30px 51px minmax(0,1fr) 118px!important;}
#pantallaSilabasV1 .sv-tiempo-panel {width:min(560px,100%)!important;justify-self:center!important;align-self:center!important;min-width:0!important;padding:6px 14px!important;border-radius:14px!important;border:2px solid #9571ac!important;background:#f2e5f7!important;color:#523469!important;box-shadow:0 2px 0 #bd99d0!important;}
#pantallaSilabasV1 .sv-tiempo-informacion {display:flex!important;justify-content:space-between!important;align-items:center!important;gap:8px!important;}
#pantallaSilabasV1 .sv-tiempo-titulo {font-weight:800!important;font-size:clamp(10px,1.15vw,14px)!important;letter-spacing:.4px!important;text-align:left!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
#pantallaSilabasV1 .sv-tiempo-valor {font:800 clamp(22px,2.5vw,31px)/1 'Trebuchet MS',Arial,sans-serif!important;letter-spacing:1.1px!important;font-variant-numeric:tabular-nums!important;flex-shrink:0!important;}
#pantallaSilabasV1 .sv-tiempo-pista {margin-top:5px!important;height:7px!important;border-radius:99px!important;background:#d3c2dd!important;overflow:hidden!important;}
#pantallaSilabasV1 .sv-tiempo-pista i {display:block!important;width:100%;height:100%;border-radius:99px;background:#70518a!important;transition:width .2s linear!important;}
#pantallaSilabasV1 .sv-tiempo-panel.sv-tiempo-urgente {background:#ffeded!important;border-color:#bd4759!important;color:#8b2339!important;box-shadow:0 2px 0 #cf94a1!important;}
#pantallaSilabasV1 .sv-tiempo-urgente .sv-tiempo-pista {background:#f2c9d1!important;}
#pantallaSilabasV1 .sv-tiempo-urgente .sv-tiempo-pista i {background:#d4475b!important;}
@media(max-width:700px){
#pantallaSilabasV1.sv-con-tiempo {grid-template-rows:50px 28px 45px minmax(0,1fr) 114px!important;gap:5px!important;}
#pantallaSilabasV1 .sv-tiempo-panel {padding:4px 9px!important;border-radius:11px!important;}
#pantallaSilabasV1 .sv-tiempo-titulo {font-size:10px!important;letter-spacing:0!important;}
#pantallaSilabasV1 .sv-tiempo-valor {font-size:25px!important;}
#pantallaSilabasV1 .sv-tiempo-pista {height:5px!important;margin-top:2px!important;}
}
@media(max-height:650px) and (max-width:700px){
#pantallaSilabasV1.sv-con-tiempo {grid-template-rows:44px 24px 36px minmax(0,1fr) 114px!important;gap:3px!important;}
#pantallaSilabasV1 .sv-tiempo-valor {font-size:21px!important;}
}
@media(max-height:450px) and (min-width:600px){
#pantallaSilabasV1.sv-con-tiempo {grid-template-rows:44px 24px 30px minmax(0,1fr) 56px!important;gap:3px!important;}
#pantallaSilabasV1 .sv-tiempo-panel {padding:2px 9px!important;border-width:1px!important;border-radius:9px!important;}
#pantallaSilabasV1 .sv-tiempo-valor {font-size:19px!important;}
#pantallaSilabasV1 .sv-tiempo-titulo {font-size:10px!important;}
#pantallaSilabasV1 .sv-tiempo-pista {height:3px!important;margin-top:1px!important;}
}
@media(prefers-reduced-motion:reduce){#pantallaSilabasV1 .sv-tiempo-pista i{transition:none!important;}}
/* CAMBIO 16 · Portada de expedición sin superposiciones, retos propios adaptables */
#pantallaSilabasV1 .sv-exp-espera{display:flex!important;align-items:center!important;justify-content:center!important;padding:clamp(10px,3vw,28px)!important;grid-template-rows:none!important;overflow:auto!important;}
#pantallaSilabasV1 .sv-exp-portada{display:grid!important;grid-template-columns:minmax(110px,210px) minmax(0,1fr)!important;gap:clamp(14px,3vw,38px)!important;align-items:center!important;width:min(850px,100%)!important;margin:auto!important;}
#pantallaSilabasV1 .sv-exp-arte{background:#eee8dd!important;border:2px solid #ded0b6!important;border-radius:24px!important;display:grid!important;place-items:center!important;min-height:170px!important;}
#pantallaSilabasV1 .sv-exp-arte .sv-ilustracion{width:min(160px,85%)!important;height:125px!important;}
#pantallaSilabasV1 .sv-exp-presentacion{display:flex!important;flex-direction:column!important;gap:14px!important;text-align:left!important;}
#pantallaSilabasV1 .sv-exp-etapa{font-size:12px!important;font-weight:bold!important;letter-spacing:2px!important;color:#7a5b8c!important;}
#pantallaSilabasV1 .sv-exp-presentacion h1{font-size:clamp(22px,3vw,34px)!important;color:#48335d!important;}
#pantallaSilabasV1 .sv-exp-resumen{font-size:clamp(15px,1.6vw,20px)!important;line-height:1.35!important;color:#3d3349!important;font-weight:600!important;}
#pantallaSilabasV1 .sv-exp-regla{background:#f6efdf!important;border:2px solid #b08b55!important;border-left:6px solid #b08b55!important;padding:10px 14px!important;border-radius:8px!important;font-size:clamp(13px,1.3vw,16px)!important;line-height:1.4!important;color:#493720!important;font-weight:600!important;}
#pantallaSilabasV1 .sv-exp-pasos{display:flex!important;gap:9px!important;}
#pantallaSilabasV1 .sv-exp-pasos span{display:grid!important;place-items:center!important;width:31px!important;height:31px!important;border-radius:50%!important;background:#f4eddf!important;border:1px solid #c4b7a4!important;font-size:13px!important;}
#pantallaSilabasV1 .sv-exp-pasos .hecho{background:#7c9b77!important;color:white!important;}
#pantallaSilabasV1 .sv-exp-pasos .actual{background:#79518e!important;color:white!important;}
#pantallaSilabasV1 .sv-exp-activa .sv-titulo{min-height:0!important;}
#pantallaSilabasV1 .sv-exp-tablero{gap:10px!important;overflow:auto!important;align-content:center!important;justify-content:center!important;}
#pantallaSilabasV1 .sv-exp-formadas{display:flex!important;align-items:center!important;gap:10px!important;justify-content:center!important;min-height:38px!important;font-size:clamp(16px,2vw,23px)!important;font-weight:bold!important;}
#pantallaSilabasV1 .sv-exp-retirar{border:1px solid #ae97c1!important;border-radius:12px!important;background:#f5edf9!important;color:#5a376c!important;min-height:36px!important;padding:5px 12px!important;}
#pantallaSilabasV1 .sv-exp-mapa{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;width:min(490px,100%)!important;}
#pantallaSilabasV1 .sv-exp-celda,#pantallaSilabasV1 .sv-exp-carta,#pantallaSilabasV1 .sv-exp-categoria,#pantallaSilabasV1 .sv-exp-vinculo{background:#f4e9d6!important;color:#453354!important;border:2px solid #cab8a2!important;border-radius:13px!important;min-height:46px!important;padding:7px!important;font-size:clamp(15px,1.7vw,20px)!important;}
#pantallaSilabasV1 .sv-exp-celda:disabled{opacity:.3!important;}
#pantallaSilabasV1 .sv-exp-carta[aria-pressed=true],#pantallaSilabasV1 .sv-exp-categoria[aria-pressed=true],#pantallaSilabasV1 .sv-exp-vinculo[aria-pressed=true]{background:#e6d4f1!important;border-color:#79518e!important;}
#pantallaSilabasV1 .sv-exp-filas{display:flex!important;flex-direction:column!important;gap:8px!important;width:100%!important;}
#pantallaSilabasV1 .sv-exp-fila{display:flex!important;align-items:center!important;gap:12px!important;justify-content:space-between!important;width:100%!important;}
#pantallaSilabasV1 .sv-exp-fila>strong{flex:0 0 28%!important;font-size:18px!important;overflow-wrap:anywhere!important;}
#pantallaSilabasV1 .sv-exp-categorias{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;flex:1!important;}
#pantallaSilabasV1 .sv-exp-categoria{min-height:39px!important;font-size:clamp(12px,1vw,16px)!important;}
#pantallaSilabasV1 .sv-exp-cartas{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important;}
#pantallaSilabasV1 .sv-exp-subtitulo{text-align:center!important;font-size:15px!important;}
#pantallaSilabasV1 .sv-exp-candados{display:flex!important;flex-direction:column!important;gap:8px!important;width:min(470px,100%)!important;}
#pantallaSilabasV1 .sv-exp-candado{display:flex!important;align-items:center!important;justify-content:space-between!important;border:1px solid #d8c6b5!important;border-radius:12px!important;padding:6px 10px!important;gap:12px!important;}
#pantallaSilabasV1 .sv-exp-palabra{font-size:clamp(17px,2vw,22px)!important;}
#pantallaSilabasV1 .sv-exp-marcadores{display:flex!important;align-items:center!important;gap:8px!important;}
#pantallaSilabasV1 .sv-exp-marcadores strong{min-width:22px!important;text-align:center!important;font-size:22px!important;}
#pantallaSilabasV1 .sv-exp-ajustar{background:#e5d7eb!important;color:#553e64!important;border:1px solid #ad9bb5!important;border-radius:10px!important;width:40px!important;min-height:38px!important;padding:0!important;font-weight:bold!important;}
#pantallaSilabasV1 .sv-exp-uniones{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;width:100%!important;}
#pantallaSilabasV1 .sv-exp-col{display:grid!important;gap:7px!important;}
#pantallaSilabasV1 .sv-exp-leyenda{display:flex!important;flex-wrap:wrap!important;gap:7px!important;font-size:12px!important;justify-content:center!important;}
#pantallaSilabasV1 .sv-exp-leyenda span{background:#edf1e6!important;padding:4px 7px!important;border-radius:8px!important;}
@media(max-width:700px){
#pantallaSilabasV1 .sv-exp-portada{grid-template-columns:1fr!important;gap:10px!important;text-align:center!important;}
#pantallaSilabasV1 .sv-exp-arte{min-height:80px!important;}
#pantallaSilabasV1 .sv-exp-arte .sv-ilustracion{height:70px!important;}
#pantallaSilabasV1 .sv-exp-presentacion{gap:9px!important;text-align:center!important;align-items:center!important;}
#pantallaSilabasV1 .sv-exp-tablero{gap:7px!important;}
#pantallaSilabasV1 .sv-exp-fila>strong{font-size:14px!important;}
#pantallaSilabasV1 .sv-exp-categoria{font-size:12px!important;padding:4px!important;}
#pantallaSilabasV1 .sv-exp-celda,#pantallaSilabasV1 .sv-exp-carta,#pantallaSilabasV1 .sv-exp-vinculo{font-size:16px!important;}
}
@media(max-height:470px) and (min-width:600px){
#pantallaSilabasV1 .sv-exp-portada{grid-template-columns:100px minmax(0,1fr)!important;gap:16px!important;}
#pantallaSilabasV1 .sv-exp-arte{min-height:96px!important;}
#pantallaSilabasV1 .sv-exp-arte .sv-ilustracion{height:80px!important;}
#pantallaSilabasV1 .sv-exp-presentacion{gap:6px!important;}
#pantallaSilabasV1 .sv-exp-presentacion h1{font-size:19px!important;}
#pantallaSilabasV1 .sv-exp-resumen,#pantallaSilabasV1 .sv-exp-regla{font-size:12px!important;line-height:1.2!important;}
#pantallaSilabasV1 .sv-exp-pasos span{height:22px!important;width:22px!important;font-size:10px!important;}
#pantallaSilabasV1 .sv-exp-activa .sv-titulo{height:36px!important;grid-template-rows:10px 1fr 0!important;}
#pantallaSilabasV1 .sv-exp-celda,#pantallaSilabasV1 .sv-exp-carta,#pantallaSilabasV1 .sv-exp-vinculo{min-height:32px!important;padding:2px!important;font-size:14px!important;}
#pantallaSilabasV1 .sv-exp-mapa{gap:3px!important;}
#pantallaSilabasV1 .sv-exp-formadas{min-height:22px!important;font-size:15px!important;}
#pantallaSilabasV1 .sv-exp-fila{gap:6px!important;}
#pantallaSilabasV1 .sv-exp-categoria{min-height:30px!important;font-size:11px!important;}
#pantallaSilabasV1 .sv-exp-candado{padding:2px 5px!important;}
#pantallaSilabasV1 .sv-exp-palabra{font-size:15px!important;}
#pantallaSilabasV1 .sv-exp-ajustar{min-height:29px!important;width:30px!important;}
}
/* La capa del diseño base usa !important: colocar el ajuste de la espera en la misma capa. */
@layer silabasPiloto {
#pantallaSilabasV1 .sv-cuerpo.sv-exp-espera {
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
grid-template-rows:none!important;
overflow-y:auto!important;
}
}
@layer silabasPiloto {
#pantallaSilabasV1 .sv-exp-arte .sv-ilustracion {width:min(160px,85%)!important;max-width:100%!important;height:auto!important;}
}
@media(max-height:470px) and (min-width:600px){
#pantallaSilabasV1 .sv-exp-cartas{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important;}
#pantallaSilabasV1 .sv-exp-mapa{grid-template-columns:repeat(5,minmax(0,1fr))!important;max-width:100%!important;}
#pantallaSilabasV1 .sv-exp-candados{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;max-width:100%!important;width:100%!important;}
#pantallaSilabasV1 .sv-exp-candado{flex-direction:column!important;gap:0!important;}
#pantallaSilabasV1 .sv-exp-palabra{font-size:12px!important;}
#pantallaSilabasV1 .sv-exp-fila{min-height:31px!important;}
#pantallaSilabasV1 .sv-exp-subtitulo{font-size:12px!important;line-height:1.1!important;}
#pantallaSilabasV1 .sv-exp-uniones{gap:6px!important;}
#pantallaSilabasV1 .sv-exp-tablero{overflow-y:auto!important;scrollbar-width:thin!important;}
}