/* Reset de márgenes y padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
     
}

/* Imagen de fondo que cubre toda la página */
html,body {
     
    background-color: #99ccff;
    background-size: cover;
    background-position: center;
    height: 100vh;
    color: white;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Evita el desplazamiento horizontal */
    width: 100%;
    margin: 0;
    padding: 0;	
    scroll-behavior: smooth;	
    
}

/* Estilo para títuloS H1 */
h1 {
    text-align: center; /* Centra el texto horizontalmente */
    font-size: 3em; /* Tamaño grande para el título */
    font-family: 'Pacifico', cursive; /* Tipografía cursiva y divertida */
    color: #ff6f61; /* Color naranja vibrante */
    text-shadow: 2px 2px 0px #ffa07a, 4px 4px 0px #ff4500; /* Sombras para darle profundidad */
    margin-top: 20px; /* Espacio superior */
    margin-bottom: 20px; /* Espacio inferior */
    animation: bounce 2s infinite; /* Animación de rebote */
}

/* Barra de navegación transparente -------------------------------------------------------------*/
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0px 20px;
    background-color: rgba(0, 0, 0, 0.2); /* Barra de navegación transparente */
    position: flex;
    top: 0;
    left: 0;
    z-index: 100;
}

/* Logo en el menú */
.navbar img {
    height: 75px;
}

/* Estilos del botón hamburguesa animado -------------------------------------------------------*/
.menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 35px;
    height: 25px;
    cursor: pointer;
    z-index: 101; /* Para que el botón esté encima del menú */
}

.menu-icon div {
    height: 4px;
    background-color: white;
    border-radius: 5px;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Animación al hacer clic: línea superior e inferior crean una "X" */
.menu-icon.open div:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-icon.open div:nth-child(2) {
    opacity: 0; /* Oculta la línea del medio */
}

.menu-icon.open div:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Menú desplegable oculto por defecto */
.menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semi-transparente */
    border-radius: 5px;
    padding: 10px 0;
    z-index: 99;
}

/* Estilo del texto del menú con animación divertida-------------------------------------------- */
.menu a {
    padding: 10px 20px;
    text-decoration: none;
    font-size: 22px;
    color: white;
    text-align: center;
    transition: all 0.3s ease;
    font-weight: bold;
    text-transform: uppercase; /* Texto en mayúsculas */
    letter-spacing: 2px; /* Espaciado entre letras */
    position: relative;
    display: inline-block;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Animación divertida en hover: zoom y cambio de color */
.menu a:hover {
    background: linear-gradient(60deg, hsl(54, 100%, 58%), hsl(33, 100%, 50%));
    color: #1a1a1a;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(255, 235, 59, 0.4);
    border-radius: 5px;
}

/* Mostrar el menú cuando está activo */
.menu.open {
    display: flex;
    animation: fadeIn 0.5s ease;
}

/* Animación de desvanecimiento */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Responsive: hacer que el menú sea adecuado para móviles */
@media (min-width: 768px) {
    .menu {
        display: flex;
        flex-direction: row;
        position: static;
        background-color: transparent;
        justify-content: flex-end;
        background:linear-gradient(60deg, hsl(237, 70%, 60%), hsl(150, 98%, 50%));
        border: 2px solid #000000; /* Borde para separación visual */
        border-radius: 20px;
    }

    .menu-icon {
        display: none; /* Ocultar el botón hamburguesa en pantallas grandes */
    }

    .menu a {
        padding: 10px 20px;
        font-size: 18px;
        
    }
}

/* Submenú */
.menu-item {
    position: relative;
    text-align: center;
}

.menu-item:hover .submenu {
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

.submenu {
    display: none;
    position: absolute;
    background-color: black;
    min-width: 225px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    text-align: center;
    z-index: 1;
    max-height: 300px; /* Limita la altura a 150px */
    align-items: center;
    flex-direction: column;
    
}

.submenu a {
    padding: 10px 20px;
    text-decoration: none;
    font-size: 18px;
    color: white;
    text-align: center;
    transition: all 0.3s ease;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    
}

/*-----------------------------------------------------------------------------------------------*/

/* Imagen de fondo se ajusta dejando espacio al menú */
.content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 70px; /* Deja espacio para el menú fijo */
    margin-left: 15px;
    margin-right: 15px;
}

/* Texto de bienvenida en el centro de la página */

.titulo {
    font-size: 38px; /* Tamaño grande del título */
    color: #ff3300; /* Colorde texto */
    font-weight: bold; /* Letras gruesas */
    font-family: 'Comic Sans MS', sans-serif; /* Estilo redondeado y divertido */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra en el texto */
    margin-bottom: 10px;
    text-align: center; /* Centra el texto horizontalmente */
    animation: bounce 2s infinite; /* Animación de rebote */
}

/* Estilo para el subtítulo */
.subtitulo {
    font-size: 36px; /* Tamaño del subtítulo */
    color: #cc6600; /* Color de texto */
    font-weight: bold; /* Letras gruesas */
    font-family: 'Comic Sans MS', sans-serif; /* Estilo redondeado */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra en el texto */
    margin-bottom: 20px;
    animation: bounce 2s infinite; /* Animación de rebote */
}
.subtitulo2 {
    font-size: 36px; /* Tamaño del subtítulo */
    color: #d400ff; /* Color de texto */
    font-weight: bold; /* Letras gruesas */
    font-family: 'Comic Sans MS', sans-serif; /* Estilo redondeado */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra en el texto */
    margin-bottom: 20px;
}

/* Estilo para el texto */
.texto {
    font-size: clamp(16px, 5vw, 23px); /* Mínimo 16px, escalable hasta un máximo de 24px */
    color: orange; /* Color de texto */
    font-weight: bold; /* Letras gruesas */
    font-family: 'Comic Sans MS', sans-serif; /* Estilo redondeado */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra en el texto */
}

.texto2 {
    font-size: clamp(16px, 5vw, 23px); /* Mínimo 16px, escalable hasta un máximo de 24px */
    color: #92faa8; /* Color de texto */
    font-weight: bold; /* Letras gruesas */
    font-family: 'Comic Sans MS', sans-serif; /* Estilo redondeado */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra en el texto */
}



/* Contenedor principal del carrusel de imagenes --------------------------------------------------------------*/
.carousel-container {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 20px; /* Espacio alrededor del carrusel */
    padding-bottom: 60px; /* Espacio alrededor del carrusel */
  }

/* Pista donde se moverán las imágenes */
.carousel-track {
display: flex;
width: max-content;
animation: move 60s linear infinite; /* Animación continua */
padding-bottom: 60px;
}

.carousel-track img {
width: 150px; /* Tamaño pequeño de las imágenes */
height: auto; /* Mantener la proporción de la imagen */
margin-right: 20px; /* Espacio entre las imágenes */
border-radius: 15px; /* Esquinas redondeadas */
display: block;
}

/* Animación para hacer que las imágenes se desplacen de derecha a izquierda */
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

/* Asegurarse de que la última imagen también tenga espacio a la derecha */
.carousel-track img:last-child {
margin-right: 0;
}

.lang-btn {
    border: 2px solid #ddd;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    margin: 10px;
    cursor: pointer;
    background-color: white;
    transition: transform 0.2s;
}
.lang-container {
    display: inline-flex;
    justify-content: center;
    margin-bottom: 20px;
}
.lang-btn:hover {
    transform: scale(1.1);
}
.lang-btn img {
    width: 100%;
    height: 100%;
    border-radius: 50px;
}

/* -------------------------------------------------------------------------------------------- */
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
} 


.news-section {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* BOTONES DE ENLACE DEL TOKEN KND------------------------------------------------------------------- */

.button-section {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    background-color: rgba(0, 0, 0, 0);
    flex-wrap: wrap; /* Permite que los botones se ajusten en filas en pantallas pequeñas */

    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra en el texto */
    margin-bottom: 20px;
    animation: bounce 3s infinite; /* Animación de rebote */
}

.button-section .btn {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    overflow: hidden;
    border: 3px solid;
    background-color:white;
    border-color:orange;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin: 5px; /* Espacio entre los botones */
}

/* Botón más ancho */
.button-section .btn-large {
    width: 180px; /* Ancho mayor */
    height: 60px;
    border-radius: 15px; /* Bordes redondeados pero no completamente circular */
}

.button-section .btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.button-section .btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* Media query para pantallas más pequeñas, como teléfonos */
@media (max-width: 480px) {
    .button-section .btn {
        width: 60px;
        height: 60px;
    }
    .button-section .btn-large {
        width: 180px;
        height: 60px;
    }
}
/*----Algunas medidas para movil ---------------------------------------------*/
@media (max-width: 480px) {
    .carousel-container {
        width: 100%;
        height: auto;
        padding: 10px;
    }

    .carousel-track {
        flex-wrap: nowrap;
        overflow-x: scroll;
        padding-bottom: 20px;
    }

    .carousel-track img {
        width: 120px; /* Reduce el tamaño de las imágenes */
        height: auto;
        margin-right: 10px;
    }

    .section {
        height: auto;
        padding: 10px;
        font-size: 1.5rem;
    }

    .section p {
        font-size: 0.9rem;
    }

    .section h2 {
        font-size: 1.2rem;
    }
}


/* ------------------------------------------------------------------------------------------ */

/* Animación de rebote */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0); /* Posición original */
    }
    50% {
        transform: translateY(-10px); /* Rebote hacia arriba */
    }
}
        
/* cortinilla de seccion -----------------------------------------------------------------------*/

.fondo_cortinilla{
    background-color: #99ccff;
    
}

.section {
    width: 100%;
    height: 100vh;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2rem;
    background-color: #f4f4f4;
    opacity: 0; /* Oculto inicialmente */
    transform: translateY(50px); /* Posición inicial */
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    border-bottom: 1px solid #99ccff;
    display: block; /* Distribución de elementos */
    flex-wrap: wrap; /* Ajuste de filas */
    border-radius: 20px 20px 0 0; /* Redondear solo la parte superior */
    position: relative;
}

@media (max-width: 786px) {
    .section p{
        font-size: 1rem;
    }
    .section h2{
        font-size: 1.5rem;
    }
}

.section:nth-child(odd) {
    background: linear-gradient(60deg, hsl(237, 70%, 60%), hsl(150, 98%, 50%));
    margin-top: -50px; /* Superposición */
}

.section:nth-child(even) {
    background: linear-gradient(150deg, hsl(47, 100%, 72%), hsl(36, 100%, 50%));
    margin-top: -50px; /* Superposición */
}

.section.in-view {
    opacity: 1; /* Se hace visible */
    transform: translateY(-50px); /* Desplazamiento */
}

/* ESTILOS PARA JUEGO DE INICIO -----------------------------------------------------------------*/

  .contenedor-juego-inicio {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 5px;

  }


  #game-container {
    position: relative;
    width: 100%;
    height: 400px; /* Altura fija del contenedor del juego */
    background: linear-gradient(60deg, hsl(237, 100%, 79%), hsl(150, 100%, 66%));
    border: 3px solid #000000; /* Borde para separación visual */
    overflow: hidden; /* Evita contenido fuera del contenedor */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}

#logo {
    position: absolute;
    width: 65px;
    height: 65px;
    cursor: pointer;
    transition: transform 0.2s; /* Efecto de clic */
}

#score {
    position: absolute;
    top: 40px;
    left: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #fcc500;

    font-weight: bold; /* Letras gruesas */
    font-family: 'Comic Sans MS', sans-serif; /* Estilo redondeado */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra en el texto */
    margin-bottom: 20px;
    animation: bounce 2s infinite; /* Animación de rebote */
}

#game-over {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    display: none;
    font-family: 'Comic Sans MS', sans-serif; /* Estilo redondeado */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra en el texto */
    margin-bottom: 20px;
    animation: bounce 1.5s infinite; /* Animación de rebote */
}

#game-over button {
    margin-top: 10px;
    padding: 5px 15px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
}

#game-over button:hover {
    background-color: #0056b3;
}

#timer {

    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #fcc500;

    font-weight: bold; /* Letras gruesas */
    font-family: 'Comic Sans MS', sans-serif; /* Estilo redondeado */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra en el texto */
    margin-bottom: 20px;
    animation: bounce 2s infinite; /* Animación de rebote */
}

#title {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 34px;
    font-weight: bold;
    color: #007bff;
    text-align: center;
    padding-bottom: 20px;
}

#start-button {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#start-button:hover {
    background-color: #218838;
}

/* Posición del botón de subir*/

/* Posicionamiento y estilo del botón */
.boton-redondo {
    position: fixed;
    bottom: 20px; /* Distancia desde el borde inferior */
    left: 20px;   /* Distancia desde el borde izquierdo */
    width: 50px;  /* Tamaño del botón */
    height: 50px;
    border-radius: 50%; /* Forma redonda */
    overflow: hidden;   /* Imagen ajustada al contenedor */
    background-color: #f0f0f0; /* Fondo de color */
    border: 2px solid #fff; /* Borde blanco */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
    text-decoration: none; /* Elimina subrayado */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen dentro del botón */
.boton-redondo img {
    width: 100%; /* Tamaño relativo a la circunferencia */
    height: 100%;
    object-fit: contain; /* La imagen se ajusta correctamente */
    border-radius: 50%; /* Forma redonda */
}

/* Efecto al pasar el ratón */
.boton-redondo:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Sombra más intensa */
    transform: scale(1.1); /* Efecto de zoom */
    transition: all 0.3s ease; /* Animación suave */
}

/* MENU CREATIVO ------------------------------------------------------------------------- */
.espacio-container {
    width: 100%;  /* Ocupará todo el ancho disponible */
    max-width: 800px; /* Aumenta el tamaño máximo en PC */
    margin: 40px auto;
    text-align: center;
    padding: 20px;
    border-radius: 15px;
    background: url('https://criptozen.com/imagenes/kinder/juego_espacial_kinder/giftarjeta1.gif') no-repeat center center;
    background-size: cover;
    box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5);
    min-height: 350px;
    color: white;
    font-family: 'Arial', sans-serif;
}

.espacio-buttons {
    background: rgba(0, 0, 0, 0.6);
    padding: 5px;
    border-radius: 10px;
    margin-bottom: 20px;
    gap: 3px;
    display: flex;
    justify-content: space-around;
}

.c1{
    order: 1;
}

.c2{
    order: 2;
}

.c3{
    order: 3;
}

.c4{
    order: 4;
}
.espacio-buttons button {
    margin: 5px;
    padding: 12px 12px;
    color: white;
    background: rgba(0, 0, 255, 0.6);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    font-weight: bold;
}

.espacio-buttons button:hover {
    background: rgba(0, 0, 255, 0.8);
    box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5);
}

.espacio-links {
    margin-top: 20px;
}

.espacio-links a {
    color: rgb(255, 113, 255);
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
    font-size: medium;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5); /* Sombra en el texto */
}

.espacio-links a:hover {
    color: rgb(162, 0, 255);
}

@media (max-width: 768px) {
    .espacio-container {
        flex-direction: row;
        min-height: 220px;
        width: 100%;  /* Ajuste para ocupar más en pantallas pequeñas */
        max-width: 100%; /* Permite que use todo el ancho disponible */
        padding: 5px; /* Reduce el padding para que no se vea muy estrecho */
    }

    .espacio-links a {
        display: block;
        margin: 10px 0;
        font-size: 12px;
    }
    .espacio-buttons {
        padding: 2px;
        border-radius: 10px;
        margin-bottom: 10px;
        text-align: center;
        gap: 2px;
    }

}

@media (max-width: 768px) {
    .espacio-buttons button:nth-child(1)::after { content: "🎮"; }
    .espacio-buttons button:nth-child(2)::after { content: "💰"; }
    .espacio-buttons button:nth-child(3)::after { content: "😂"; }
    .espacio-buttons button:nth-child(4)::after { content: "🎁"; }
    
    .espacio-buttons button {
        font-size: 0; /* Oculta el texto original */
    }

    .espacio-buttons button::after {
        font-size: 20px; /* Ajusta el tamaño del emoji */
        display: inline-block;
    }
}