body {
    margin: 0;
    background-color: #111;
    font-family: 'Arial', sans-serif;
    overflow: hidden;
}

/* Contenedor del juego responsive */
#game-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Responsive para diferentes tamaños de pantalla */
@media (max-width: 1200px) {
    #game-container {
        padding: 10px;
    }
}

@media (max-width: 768px) {
    #game-container {
        padding: 5px;
    }
}

@media (max-width: 480px) {
    #game-container {
        padding: 2px;
    }
}

/* Asegurar que el canvas de Phaser sea responsive */
#game-container canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#menu-cohete, #menu-cohete2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

#menu, #menuC2{
    position: relative;
    width: 1152px;
    height: 521px;
    border-radius: 25px;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
    overflow: hidden;
}

.rocket {
    position: absolute;
    width: 150px;
    transition: transform 0.4s ease;
}

.deco{
    position: absolute;
    transition: transform 0.4s ease;
}

.rocket.left{
    bottom: 20px;
    left: -5px;
    transform: rotate(-10deg);
}

.deco.estrella{
    top: 20px;
    left: -5px;
    transform: rotate(-70deg)
}

.rocket.right{
    top: 50%;
    right: -45px;
    transform: translateY(-50%) rotate(90deg);
}

.deco.astronauta{
    bottom: 20px;
    right: 25px;
}

.rocket.left:hover{
    transform: rotate(-45deg) translateX(15px) translateY(-15px);
}

.rocket.right:hover{
    transform: rotate(135deg) translateX(-15px) translateY(15px);
}


.boton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.boton:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

.circle {
    position: absolute;
    width: 60px;
    height: 60px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

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

.info {
    top: 15px;
    right: 60px;
    margin-right: 8px;
}

.cerrar {
    top: 15px;
    right: 15px;
}

.config {
    top: 15px;
    right: 115px;
    margin-right: 8px;
}

#menu-cartas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 1152px;
    height: 521px;

    background-color: #FFD7B4; 
    border-radius: 25px;

    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);

    outline: 7px solid #FABE6B;
    outline-offset: -10px;

    overflow: hidden;

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

    z-index: 10;
}

#menu-cartas .contenido-cartas {
    position: relative;
    width: 1152px;
    height: 521px;

    border-radius: 25px;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);
    outline-offset: -10px;

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

#menu-cartas .pizza {
    margin-right: -30px;
    width: 163px;
    will-change: transform;
    transition: transform 0.3s ease;

}

#menu-cartas .manzana {
    width: 154.43px;
    will-change: transform;
    transform: translateY(-15px);
    transition: transform 0.3s ease;
}

#menu-cartas .manzana:hover {
    transform: rotate(-10deg) translateX(15px) translateY(0px);
}

#menu-cartas .pizza:hover {
    transform: rotate(-10deg) translateX(15px) translateY(-15px);
}

#menu-cartas .boton {
    position: static;
    width: 350px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
    transform: none;
    margin-top: -42px;
}

#menu-cartas .boton:hover {
    transform: scale(1.05);
}

#menu-cartas .fila-cartas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
#menu-cartas .row-cartas {
    transform: translateY(-25px); /* 🔹 sube las frutas 25px */
}

#menu-lamparita, #menu-flor{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 1152px;
    height: 521px;

    background-color: #FFDAD9; 
    border-radius: 25px;

    /* 🔸 sombra blanca difusa, no negra */
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);

    /* 🔸 borde interno más claro aún */
    outline: 7px solid #FAC3C2;
    outline-offset: -10px;

    overflow: hidden;

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

    z-index: 10;
}

.bombillaUP, .florUP {
    position: absolute;
    top: 10px;
    left: 30px;
}

.bombillaDOWN, .florDOWN {
    position: absolute;
    bottom: 10px;
    right: 30px;
}

.manzanaUP {
    position: absolute;
    top: 10px;
    left: 10px;
}

.manzanaDOWN {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

#menu-coin, #menu-memotest {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 1152px;
    height: 521px;

    background-color: #FFD7B4; 
    border-radius: 25px;

    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);

    outline: 7px solid #FABE6B;
    outline-offset: -10px;

    overflow: hidden;

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

    z-index: 10;
}

#menu-coin .contenido-coin, #menu-memotest .contenido-memotest {
    position: relative;
    width: 1152px;
    height: 521px;

    border-radius: 25px;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);
    outline-offset: -10px;

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

    z-index: 10;
}


#menu-coin .elefante, #menu-memotest .elefante2 {
    position: static;
    width: 160px;
    will-change: transform;
    transform: translateY(-15px);
    transition: transform 0.3s ease;
}

#menu-coin .elefante:hover, #menu-memotest .elefante2:hover {
    transform: rotate(-10deg) translateX(15px) translateY(0px);
}

#menu-coin .sapo, #menu-memotest .sapo2 {
    position: static;
    width: 140px;
    will-change: transform;
    transform: translateY(-15px);
    transition: transform 0.3s ease;
}

#menu-coin .sapo:hover, #menu-memotest .sapo2:hover {
    transform: rotate(-10deg) translateX(15px) translateY(0px);
}

#menu-coin .boton, #menu-memotest .boton {
    position: static;
    width: 350px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
    transform: none;
}

#menu-coin .boton:hover, #menu-memotest .boton:hover {
    transform: scale(1.05);
}

#menu-coin .fila-animales, #menu-memotest .fila-animales {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.sapo:hover, .sapo2:hover {
    transform: rotate(-10deg) translateX(15px) translateY(-15px);
}

.elefante:hover, .elefante2:hover {
    transform: rotate(-10deg) translateX(15px) translateY(-15px);
}

/*pre impo*/
#menu-impo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 1152px;
    height: 521px;

    background-color: #FFD7B4; 
    border-radius: 25px;

    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);

    outline: 7px solid #FABE6B;
    outline-offset: -10px;

    overflow: hidden;

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

    z-index: 10;
}

#menu-impo .contenido-impo {
    position: relative;
    width: 1152px;
    height: 521px;

    border-radius: 25px;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);
    outline-offset: -10px;

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

    z-index: 10;
}


#menu-impo .uvas {
    width: 140px;
    will-change: transform;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

#menu-impo .uvas:hover {
    transform: rotate(-10deg) translateX(15px) translateY(0px);
}

#menu-impo .auto {
    width: 140px;
    transform: translateY(25px);
    transition: transform 0.3s ease;
}

#menu-impo .auto:hover {
    transform: rotate(-10deg) translateX(15px) translateY(0px);
}

#menu-impo .boton {
    position: static;
    width: 350px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
    transform: none;
}

#menu-impo .boton:hover {
    transform: scale(1.05);
}

#menu-impo .fila-cosas {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uvas:hover {
    transform: rotate(-10deg) translateX(15px) translateY(-15px);
}

.auto:hover {
    transform: rotate(-10deg) translateX(15px) translateY(-15px);
}

/*pre mosqui*/
#menu-mosqui, #menu-casa  {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 1152px;
    height: 521px;

    background-color: #B4EFA1; 
    border-radius: 25px;

    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);

    outline: 7px solid #80CD80;
    outline-offset: -10px;

    overflow: hidden;

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

    z-index: 10;
}

#menu-casa .fila-casa {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#menu-casa .row-casa img {
    width: 100px;
    height: auto;
}

#menu-casa .row-casa {
    display: flex;
    gap: 4vw;
}


#menu-casa .boton {
    position: static !important;
    transform: none !important;
}

#menu-casa .boton:hover {
    transform: scale(1.05) !important; 
}



#menu-mosqui .contenido-mosqui {
    position: relative;
    width: 1152px;
    height: 521px;

    border-radius: 25px;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);
    outline-offset: -10px;

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

    z-index: 10;
}


#menu-mosqui .boton {
    position: static;
    width: 350px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
    transform: none;
}

#menu-mosqui .boton:hover {
    transform: scale(1.05);
}

#menu-mosqui .fila-cosas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.mosquitoUp {
    position: absolute;
    top: 10px;
    left: 30px;
}

.mosquitoDown {
    position: absolute;
    bottom: 50px;
    right: 50px;
}

/*pre auto*/
#menu-auto, #menu-arbol {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 1152px;
    height: 521px;

    background-color: #FFF9B4; 
    border-radius: 25px;

    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);

    outline: 7px solid #EEE953;
    outline-offset: -10px;

    overflow: hidden;

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

    z-index: 10;
}

#menu-auto .contenido-auto, #menu-arbol .contenido-arbol {
    position: relative;
    width: 1152px;
    height: 521px;

    border-radius: 25px;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);
    outline-offset: -10px;

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

#menu-auto .boton, #menu-arbol .boton {
    position: static;
    width: 350px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
    transform: none;
}

#menu-auto .boton:hover, #menu-arbol .boton:hover {
    transform: scale(1.05);
}

#menu-auto .fila-cosas, #menu-arbol .fila-cosas {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
}

.autoUp {
    scale: 0.8;
    justify-items: center;
}

#pantalla-triunfo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
#menuT {
    position: relative;
    width: 700px;
    height: 450px;
    background: #D6F2D6;
    border-radius: 25px;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
    overflow: hidden;
    
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 40px;
    outline: 10px solid #A7E6FF;
    outline-offset: -10px;
}

#btns{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

#pantalla-triunfo .boton {
    width: 180px;
    height: 150px;
    transition: transform 0.2s ease;
    position: static;
    transform: none;
}
.ganaste {
    width: 450px;
    height: auto;
}

#pantalla-triunfo .boton:hover {
    transform: scale(1.15);
    cursor: pointer;
}

#menu-cohete #menu, #menu-cohete2 #menuC2 {
    background: url('images/cohete/estrellas.png') center ;
}

#pantalla-derrota {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

#menuD {
    position: relative;
    width: 700px;
    height: 450px;
    background: #D6F2D6;
    border-radius: 25px;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
    overflow: hidden;
    
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 40px;
    outline: 10px solid #A7E6FF;
    outline-offset: -10px;
}

#pantalla-derrota .boton {
    width: 180px;
    height: 150px;
    transition: transform 0.2s ease;
    position: static;
    transform: none;
}

#pantalla-derrota .boton:hover {
    transform: scale(1.15);
    cursor: pointer;
}



/* pantalla etapa 1 */
#pantalla-etapa1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background: url("images/home/fondoHome.png");
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;

}

.contenedor-etapa1 {
    background-color: #ecd5ff;
    border-radius: 25px;
    padding: 70px;
    text-align: center;
    justify-content: center;
    height: auto;
    max-width: 75vw;
    width: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
      padding-top: 70px;
    position: relative;

}

.titulo-etapa1 {

    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    left: 50%;
    transform: translateX(-50%);

    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    z-index: 1;      

    width: 300px;
    margin-bottom: 30px;
}

.btn-volverE1 {
    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    right: -3%;

    z-index: 2;      

    width: 100px;
    margin-bottom: 30px;

    cursor: pointer;
}

.btn-volverE1:hover {
    transform: scale(1.05);
}

.grupo-juegos-etapa1 {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.juego-card-etapa1 {
    background-color: #dcb9ff;
    width: 20%;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 10px;
}

.imagen-juego-etapa1 {
    width: 100%;
    max-height: 65%;
    object-fit: contain;
}


.btn-jugar-etapa1 {
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.btn-jugar-etapa1:hover {
    transform: scale(1.05);
}


/* pantalla etapa 2 */
#pantalla-etapa2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background: url("images/home/fondoHome.png");
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;

}

.contenedor-etapa2 {
    background-color: #FFD3D2;
    border-radius: 25px;
    padding: 70px;
    text-align: center;
    justify-content: center;
    height: auto;
    max-width: 75vw;
    width: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
      padding-top: 70px;
    position: relative;

}

.titulo-etapa2 {

    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    left: 50%;
    transform: translateX(-50%);

    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    z-index: 1;      

    width: 300px;
    margin-bottom: 30px;
}

.grupo-juegos-etapa2 {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.juego-card-etapa2 {
    background-color: #FAC3C2;
    width: 20%;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 10px;
}

.imagen-juego-etapa2 {
    width: 100%;
    max-height: 65%;
    object-fit: contain;
}


.btn-jugar-etapa2 {
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.btn-jugar-etapa2:hover {
    transform: scale(1.05);
}

.btn-volverE2 {
    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    right: -3%;

    z-index: 2;      

    width: 100px;
    margin-bottom: 30px;

    cursor: pointer;
}

.btn-volverE2:hover {
    transform: scale(1.05);
}

/* pantalla etapa 3 */
#pantalla-etapa3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background: url("images/home/fondoHome.png");
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;

}
.contenedor-etapa3 {
    background-color: #FFF9B4;
    border-radius: 25px;
    padding: 70px;
    text-align: center;
    justify-content: center;
    height: auto;
    max-width: 75vw;
    width: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
      padding-top: 70px;
    position: relative;

}
.titulo-etapa3 {

    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    left: 50%;
    transform: translateX(-50%);

    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    z-index: 1;      

    width: 300px;
    margin-bottom: 30px;
}
.grupo-juegos-etapa3 {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.juego-card-etapa3 {
    background-color: #EEE953;
    width: 20%;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 10px;
}
.imagen-juego-etapa3 {
    width: 100%;
    max-height: 65%;
    object-fit: contain;
}
.btn-jugar-etapa3 {
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.btn-jugar-etapa3:hover {
    transform: scale(1.05);
}

.btn-volverE3 {
    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    right: -3%;

    z-index: 2;      

    width: 100px;
    margin-bottom: 30px;

    cursor: pointer;
}

.btn-volverE3:hover {
    transform: scale(1.05);
}

/* pantalla etapa 4 */
#pantalla-etapa4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background: url("images/home/fondoHome.png");
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;

}
.contenedor-etapa4 {
    background-color: #FFD7B4;
    border-radius: 25px;
    padding: 70px;
    text-align: center;
    justify-content: center;
    height: auto;
    max-width: 75vw;
    width: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
    padding-top: 70px;
    position: relative;

}
.titulo-etapa4 {

    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    left: 50%;
    transform: translateX(-50%);

    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    z-index: 1;      

    width: 300px;
    margin-bottom: 30px;
}
.grupo-juegos-etapa4 {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
}
.juego-card-etapa4 {
    background-color: #FABE6B;
    width: 20%;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 10px;
}
.imagen-juego-etapa4 {
    width: 100%;
    max-height: 65%;
    object-fit: contain;
}
.btn-jugar-etapa4 {
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.btn-jugar-etapa4:hover {
    transform: scale(1.05);
}

.btn-volverE4 {
    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    right: -3%;

    z-index: 2;      

    width: 100px;
    margin-bottom: 30px;

    cursor: pointer;
}

.btn-volverE4:hover {
    transform: scale(1.05);
}

/* pantalla etapa 5 */
#pantalla-etapa5 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background: url("images/home/fondoHome.png");
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;

}
.contenedor-etapa5 {
    background-color: #B4EFA1;
    border-radius: 25px;
    padding: 70px;
    text-align: center;
    justify-content: center;
    height: auto;
    max-width: 75vw;
    width: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
      padding-top: 70px;
    position: relative;

}
.titulo-etapa5 {

    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    left: 50%;
    transform: translateX(-50%);

    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    z-index: 1;      

    width: 300px;
    margin-bottom: 30px;
}
.grupo-juegos-etapa5 {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.juego-card-etapa5 {
    background-color: #80CD80;
    width: 20%;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 10px;
}
.imagen-juego-etapa5 {
    width: 100%;
    max-height: 65%;
    object-fit: contain;
}
.btn-jugar-etapa5 {
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.btn-jugar-etapa5:hover {
    transform: scale(1.05);
}

.btn-volverE5 {
    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    right: -3%;

    z-index: 2;      

    width: 100px;
    margin-bottom: 30px;

    cursor: pointer;
}

.btn-volverE5:hover {
    transform: scale(1.05);
}

/*  INFO ETAPA 1 */

#info-cohete, #info-cohete2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1152px;
    height: 521px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.contenedor-infoCohete, .contenedor-infoCohete2  {
    background-color: #E8D2ED;
    border-radius: 25px;

    outline: 7px solid #E0BCFB;
    outline-offset: -5px;

    width: 1152px;
    height: 521px;
    padding: 70px;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: auto;
    max-width: 75vw;
    width: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
      padding-top: 70px;
    position: relative;

}
.titulo-infoCohete, .titulo-infoCohete2 {

    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    left: 50%;
    transform: translateX(-50%);

    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    z-index: 1;      

    width: 300px;
    margin-bottom: 30px;
}

.btn-volverIC, .btn-volverIC2 {
    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    right: -3%;

    z-index: 2;      

    width: 100px;
    margin-bottom: 30px;

    cursor: pointer;
}

.btn-volverIC:hover, .btn-volverIC2:hover  {
    transform: scale(1.05);
}

.txt-infoC, .txt-infoC2{
    align-items: center;
    width: 950px;
}

/*  INFO ETAPA 4 */

#info-coin, #info-cartas, #info-impo, #info-memotest {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1152px;
    height: 521px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.contenedor-infoCoin, .contenedor-infoCartas, .contenedor-infoImpo, .contenedor-infoMemotest {
    background-color: #FFD7B4;
    border-radius: 25px;

    outline: 7px solid #FABE6B;
    outline-offset: -5px;

    width: 1152px;
    height: 521px;
    padding: 70px;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: auto;
    max-width: 75vw;
    width: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
      padding-top: 70px;
    position: relative;

}
.titulo-infoCoin, .titulo-infoCartas, .titulo-infoImpo, .titulo-infoMemotest {

    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    left: 50%;
    transform: translateX(-50%);

    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    z-index: 1;      

    width: 300px;
    margin-bottom: 30px;
}

.btn-volverICoin, .btn-volverICartas, .btn-volverIImpo, .btn-volverIMemotest {
    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    right: -3%;

    z-index: 2;      

    width: 100px;
    margin-bottom: 30px;

    cursor: pointer;
}

.btn-volverICoin:hover, .btn-volverICartas:hover, .btn-volverIImpo:hover, .btn-volverIMemotest:hover {
    transform: scale(1.05);
}

.txt-infoCoin, .txt-infoCartas, .txt-infoImpo, .txt-infoMemotest {
    align-items: center;
    width: 950px;

}

/*  INFO ETAPA 2 */

#info-lamp, #info-flor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1152px;
    height: 521px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.contenedor-infoLamp, .contenedor-infoFlor {
    background-color: #FFDAD9;
    border-radius: 25px;

    outline: 7px solid #FAC3C2;
    outline-offset: -5px;

    width: 1152px;
    height: 521px;
    padding: 70px;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: auto;
    max-width: 75vw;
    width: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
      padding-top: 70px;
    position: relative;

}
.titulo-infoLamp, .titulo-infoFlor {

    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    left: 50%;
    transform: translateX(-50%);

    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    z-index: 1;      

    width: 300px;
    margin-bottom: 30px;
}

.btn-volverILamp, .btn-volverIFlor {
    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    right: -3%;

    z-index: 2;      

    width: 100px;
    margin-bottom: 30px;

    cursor: pointer;
}

.btn-volverILamp:hover, .btn-volverIFlor:hover {
    transform: scale(1.05);
}

.txt-infoLamp, .txt-infoFlor {
    align-items: center;
    width: 950px;

}

/*  INFO ETAPA 5 */

#info-mosqui, #info-casa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1152px;
    height: 521px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.contenedor-infoMosqui, .contenedor-infoCasa {
    background-color: #B4EFA1;
    border-radius: 25px;

    outline: 7px solid #80CD80;
    outline-offset: -5px;

    width: 1152px;
    height: 521px;
    padding: 70px;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: auto;
    max-width: 75vw;
    width: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
      padding-top: 70px;
    position: relative;

}
.titulo-infoMosqui, .titulo-infoCasa {

    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    left: 50%;
    transform: translateX(-50%);

    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    z-index: 1;      

    width: 300px;
    margin-bottom: 30px;
}

.btn-volverIMosqui, .btn-volverICasa {
    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    right: -3%;

    z-index: 2;      

    width: 100px;
    margin-bottom: 30px;

    cursor: pointer;
}

.btn-volverIMosqui:hover, .btn-volverICasa:hover {
    transform: scale(1.05);
}

.txt-infoMosqui, .txt-infoCasa{
    align-items: center;
    width: 950px;
}

/*  INFO ETAPA 3 */

#info-auto, #info-arbol {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1152px;
    height: 521px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.contenedor-infoAuto, .contenedor-infoArbol {
    background-color: #FFF9B4;
    border-radius: 25px;

    outline: 7px solid #EEE953;
    outline-offset: -5px;
    width: 1152px;
    height: 521px;
    padding: 70px;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: auto;
    max-width: 75vw;
    width: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
      padding-top: 70px;
    position: relative;

}
.titulo-infoAuto, .titulo-infoArbol {

    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    left: 50%;
    transform: translateX(-50%);

    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    z-index: 1;      

    width: 300px;
    margin-bottom: 30px;
}

.btn-volverIAuto, .btn-volverIArbol {
    position: absolute;          /*  <-- NUEVO  */
    top: -35px;                  /*  Súbelo 35 px sobre el borde */
    right: -3%;

    z-index: 2;      

    width: 100px;
    margin-bottom: 30px;

    cursor: pointer;
}

.btn-volverIAuto:hover, .btn-volverIArbol:hover {
    transform: scale(1.05);
}

.txt-infoAuto, .txt-infoArbol {
    align-items: center;
    width: 950px;
}

/* Pantalla Configuración */
#config_cohete, #config_cohete2, #config_lamparita, #config_cartas, #config_coin, #config_impo, #config_mosqui, #config_auto, #config_memotest, #config_arbol, #config_casa, #config_flor{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background: #000; /* mismo fondo */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

/* Contenedor principal */
.contenedor-configCohete, .contenedor-configCohete2 {
    background-color: #EBD4FF; /* color lila como tu mockup */
    border-radius: 25px;
    padding: 70px;
    text-align: center;
    justify-content: center;
    height: auto;
    max-width: 75vw;
    width: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
    padding-top: 70px;
    position: relative;
}
.contenedor-configLamparita, .contenedor-configFlor {
    background-color: #FFDAD9; 
    border-radius: 25px;
    padding: 70px;
    text-align: center;
    justify-content: center;
    height: auto;
    max-width: 75vw;
    width: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
    padding-top: 70px;
    position: relative;
}

.contenedor-configAuto, .contenedor-configArbol {
    background-color: #FFF9B4; 
    border-radius: 25px;
    padding: 70px;
    text-align: center;
    justify-content: center;
    height: auto;
    max-width: 75vw;
    width: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
    padding-top: 70px;
    position: relative;
}
.contenedor-configCartas, .contenedor-configCoin, .contenedor-configImpo, .contenedor-configMemotest{
    background-color: #FFD7B4; 
    border-radius: 25px;
    padding: 70px;
    text-align: center;
    justify-content: center;
    height: auto;
    max-width: 75vw;
    width: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
    padding-top: 70px;
    position: relative;
}

.contenedor-configMosqui, .contenedor-configCasa {
    background-color: #B4EFA1; 
    border-radius: 25px;
    padding: 70px;
    text-align: center;
    justify-content: center;
    height: auto;
    max-width: 75vw;
    width: 90%;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
    padding-top: 70px;
    position: relative;
}

/* Título de la ventana */
.titulo-configCohete, .titulo-configCohete2, .titulo-configLamparita, .titulo-configCartas, .titulo-configCoin, .titulo-configImpo, .titulo-configMosqui, .titulo-configAuto, .titulo-configMemotest, .titulo-configArbol, .titulo-configCasa, .titulo-configFlor {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 400px;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

/* Botón cerrar */
.btn-volverConfigCohete, .btn-volverConfigCohete2, .btn-volverConfigLamparita, .btn-volverConfigCartas, .btn-volverConfigCoin, .btn-volverConfigImpo, .btn-volverConfigMosqui, .btn-volverConfigAuto, .btn-volverConfigMemotest, .btn-volverConfigArbol, .btn-volverConfigCasa, .btn-volverConfigFlor {
    position: absolute;
    top: -35px;
    right: -3%;
    z-index: 2;
    width: 100px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.btn-volverConfigCohete:hover, .btn-volverConfigCohete2:hover, .btn-volverConfigLamparita:hover, .btn-volverConfigCartas:hover, .btn-volverConfigImpo:hover, .btn-volverConfigMosqui:hover, .btn-volverConfigAuto:hover, .btn-volverConfigMemotest:hover, .btn-volverConfigCoin:hover, .btn-volverConfigArbol:hover, .btn-volverConfigCasa:hover, .btn-volverConfigFlor:hover {
    transform: scale(1.05);
}

/* Filas de configuración */
.filas-configuracionCohete, .filas-configuracionCohete2, .filas-configuracionLamparita, .filas-configuracionCartas, .filas-configuracionCoin, .filas-configuracionImpo, .filas-configuracionMosqui, .filas-configuracionAuto, .filas-configuracionMemotest, .filas-configuracionArbol, .filas-configuracionCasa, .filas-configuracionFlor {
    display: flex;
    flex-direction: column;
    gap: 20px; /* espacio entre filas */
}

/* Cada fila */
.fila-config {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

/* Títulos de opción (imagen izquierda) */
.titulo-opcion {
    flex-shrink: 0;
    width: 470px; /* ancho fijo, lo ajustás a tus imágenes */
}

/* Botones (imágenes a la derecha) */
.fila-config img:not(.titulo-opcion) {
    cursor: pointer;
    transition: transform 0.2s ease;
}
.fila-config img:not(.titulo-opcion):hover {
    transform: scale(1.07);
}

/* Responsive ajustes para Config Cohete */
@media (max-width: 1200px) {
    .contenedor-configCohete, .contenedor-configCohete2, .contenedor-configLamparita, .contenedor-configCartas, .contenedor-configCoin, .contenedor-configImpo, .contenedor-configMosqui, .contenedor-configAuto, .contenedor-configMemotest, .contenedor-configArbol, .contenedor-configCasa, .contenedor-configFlor {
        padding: 40px;
    }
    .filas-configuracionCohete, .filas-configuracionCohete2, .filas-configuracionLamparita, .filas-configuracionCartas, .filas-configuracionCoin, .filas-configuracionImpo, .filas-configuracionMosqui, .filas-configuracionAuto, .filas-configuracionMemotest, .filas-configuracionArbol, .filas-configuracionCasa, .filas-configuracionFlor {
        gap: 16px;
    }
    .fila-config {
        gap: 12px;
    }
    .titulo-opcion {
        width: 360px;
    }
}

@media (max-width: 992px) {
    .contenedor-configCohete, .contenedor-configCohete2, .contenedor-configLamparita, .contenedor-configCartas, .contenedor-configCoin, .contenedor-configImpo, .contenedor-configMosqui, .contenedor-configAuto, .contenedor-configMemotest, .contenedor-configArbol, .contenedor-configCasa, .contenedor-configFlor {
        max-width: 95vw;
        width: 94%;
        padding: 32px;
    }
    .fila-config {
        flex-wrap: wrap;
        justify-content: center;
    }
    .titulo-opcion {
        width: 60%;
        max-width: 420px;
    }
    /* Botones a la derecha se reducen proporcionalmente */
    .fila-config img:not(.titulo-opcion) {
        max-width: 26%;
        height: auto;
    }
}

@media (max-width: 768px) {
    .contenedor-configCohete, .contenedor-configCohete2, .contenedor-configLamparita, .contenedor-configCartas, .contenedor-configCoin, .contenedor-configImpo, .contenedor-configMosqui, .contenedor-configAuto, .contenedor-configMemotest, .contenedor-configArbol, .contenedor-configCasa, .contenedor-configFlor {
        padding: 24px;
        border-radius: 22px;
    }
    .titulo-configCohete, .titulo-configCohete2, .titulo-configLamparita, .filas-configuracionCartas, .filas-configuracionCoin, .filas-configuracionImpo, .filas-configuracionMosqui, .filas-configuracionAuto, .filas-configuracionMemotest, .filas-configuracionArbol, .filas-configuracionCasa, .filas-configuracionFlor {
        width: 220px;
        top: -28px;
    }
    .btn-volverConfigCohete, .btn-volverConfigCohete2, .btn-volverConfigLamparita, .btn-volverConfigCartas, .btn-volverConfigCoin, .btn-volverConfigImpo, .btn-volverConfigMosqui, .btn-volverConfigAuto, .btn-volverConfigMemotest, .btn-volverConfigArbol, .btn-volverConfigCasa, .btn-volverConfigFlor {
        width: 56px;
        top: -28px;
    }
    .titulo-opcion {
        width: 80%;
    }
    .fila-config img:not(.titulo-opcion) {
        max-width: 30%;
    }
}

@media (max-width: 480px) {
    #config_cohete {
        width: 100vw;
        height: 100vh;
    }
    .contenedor-configCohete, .contenedor-configCohete2, .contenedor-configLamparita, .contenedor-configCartas, .contenedor-configCoin, .contenedor-configImpo, .contenedor-configMosqui, .contenedor-configAuto, .contenedor-configMemotest, .contenedor-configArbol, .contenedor-configCasa, .contenedor-configFlor {
        width: 92%;
        padding: 18px;
        border-radius: 18px;
    }
    .titulo-configCohete, .titulo-configCohete2, .titulo-configLamparita, .titulo-configCartas, .titulo-configCoin, .titulo-configImpo, .titulo-configMosqui, .titulo-configAuto, .titulo-configMemotest, .titulo-configArbol, .titulo-configCasa, .titulo-configFlor {
        width: 180px;
        top: -24px;
    }
    .btn-volverConfigCohete, .btn-volverConfigCohete2, .btn-volverConfigLamparita, .btn-volverConfigCartas, .btn-volverConfigCoin, .btn-volverConfigImpo, .btn-volverConfigMosqui, .btn-volverConfigAuto, .btn-volverConfigMemotest, .btn-volverConfigArbol, .btn-volverConfigCasa, .btn-volverConfigFlor {
        width: 48px;
        top: -24px;
        right: -2%;
    }
    .filas-configuracionCohete, .filas-configuracionCohete2, .filas-configuracionLamparita, .filas-configuracionCartas, .filas-configuracionCoin, .filas-configuracionImpo, .filas-configuracionMosqui, .filas-configuracionAuto, .filas-configuracionMemotest, .filas-configuracionArbol, .filas-configuracionCasa, .filas-configuracionFlor {
        gap: 12px;
    }
    .fila-config {
        flex-direction: column;
        align-items: center;
    }
    .titulo-opcion {
        width: 90%;
    }
    .fila-config img:not(.titulo-opcion) {
        max-width: 42%;
    }
}

/* Asegurar que las imágenes dentro del contenedor nunca desborden */
.contenedor-configCohete img, .contenedor-configCohete2 img, .contenedor-configLamparita img, .contenedor-configCartas img, .contenedor-configCoin img, .contenedor-configImpo img, .contenedor-configMosqui img, .contenedor-configAuto img, .contenedor-configMemotest img, .contenedor-configArbol img, .contenedor-configCasa img, .contenedor-configFlor img {
    height: auto;
    max-width: 100%;
}

/* Estado desactivado para botones de tiempo cuando hay planetas (>0) */
.tiempo-desactivado {
    filter: grayscale(100%) brightness(0.3);
    cursor: not-allowed;
    pointer-events: none;
}
.tiempo-desactivado:hover {
    transform: none !important;
}

/* === SLIDER DE VOLUMEN MOSQUI E5=== */
.slider-volumen, .slider-volumenCasa {
    -webkit-appearance: none;
    appearance: none;
    width: 427px;          /* ajustá el largo */
    height: 16px;           /* grosor de la barra */
    background: #D9FDD8;   /* color del track (barra) */
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    vertical-align: middle; /* ayuda a centrar con el texto */
  }
  
  /* Color del “puntito” (thumb) */
  .slider-volumen::-webkit-slider-thumb, .slider-volumenCasa::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #80CD80;   /* color del círculo */
    cursor: pointer;
    border: 5px solid #3F773F; /* borde más oscuro */
  }
  
  .slider-volumen::-moz-range-thumb, .slider-volumenCasa::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #388e3c;
    cursor: pointer;
    border: 2px solid #2e7d32;
  }

/* === SLIDER DE VOLUMEN E4=== */
.slider-volumenE4, .slider-volumenE4Coin, .slider-volumenE4Impo, .slider-volumenE4Memotest {
    -webkit-appearance: none;
    appearance: none;
    width: 427px;          /* ajustá el largo */
    height: 16px;           /* grosor de la barra */
    background: #FDEAD8;   /* color del track (barra) */
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    vertical-align: middle; /* ayuda a centrar con el texto */
  }
  
  /* Color del “puntito” (thumb) */
  .slider-volumenE4::-webkit-slider-thumb,  .slider-volumenE4Coin::-webkit-slider-thumb, .slider-volumenE4Impo::-webkit-slider-thumb, .slider-volumenE4Memotest::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FABE6B;   /* color del círculo */
    cursor: pointer;
    border: 5px solid #E2A145; /* borde más oscuro */
  }
  
  .slider-volumenE4::-moz-range-thumb, .slider-volumenE4Coin::-moz-range-thumb, .slider-volumenE4Impo::-moz-range-thumb, .slider-volumenE4Memotest::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #388e3c;
    cursor: pointer;
    border: 2px solid #2e7d32;
  }

  /* === SLIDER DE VOLUMEN E2=== */
.slider-volumenE2, .slider-volumenE2Flor {
    -webkit-appearance: none;
    appearance: none;
    width: 427px;          /* ajustá el largo */
    height: 16px;           /* grosor de la barra */
    background: #FDE8ED;   /* color del track (barra) */
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    vertical-align: middle; /* ayuda a centrar con el texto */
  }
  
  /* Color del “puntito” (thumb) */
  .slider-volumenE2::-webkit-slider-thumb, .slider-volumenE2Flor::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FAC3C2;   /* color del círculo */
    cursor: pointer;
    border: 5px solid #DE9492; /* borde más oscuro */
  }
  
  .slider-volumenE2::-moz-range-thumb, .slider-volumenE2Flor::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #388e3c;
    cursor: pointer;
    border: 2px solid #2e7d32;
  }

 /* === SLIDER DE VOLUMEN E1=== */
 .slider-volumenE1, .slider-volumenE1C2 {
    -webkit-appearance: none;
    appearance: none;
    width: 427px;          /* ajustá el largo */
    height: 16px;           /* grosor de la barra */
    background: #FAE8FF;   /* color del track (barra) */
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    vertical-align: middle; /* ayuda a centrar con el texto */
  }
  
  /* Color del “puntito” (thumb) */
  .slider-volumenE1::-webkit-slider-thumb, .slider-volumenE1C2::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #E0BCFB;   /* color del círculo */
    cursor: pointer;
    border: 5px solid #7700D0; /* borde más oscuro */
  }
  
  .slider-volumenE1::-moz-range-thumb, .slider-volumenE1C2::-moz-range-thumb{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #388e3c;
    cursor: pointer;
    border: 2px solid #2e7d32;
  }

  /* === SLIDER DE VOLUMEN E3=== */
.slider-volumenE3, .slider-volumenE3Arbol {
    -webkit-appearance: none;
    appearance: none;
    width: 427px;          /* ajustá el largo */
    height: 16px;           /* grosor de la barra */
    background: #FFFEDB;   /* color del track (barra) */
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    vertical-align: middle; /* ayuda a centrar con el texto */
  }
  
  /* Color del “puntito” */
  .slider-volumenE3::-webkit-slider-thumb, .slider-volumenE3Arbol::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #EEE953;   /* color del círculo */
    cursor: pointer;
    border: 5px solid #898D41; /* borde más oscuro */
  }
  
  .slider-volumenE3::-moz-range-thumb, .slider-volumenE3Arbol::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #388e3c;
    cursor: pointer;
    border: 2px solid #2e7d32;
  }