body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f8ff; /* Usando el color del original style.css */
  color: #333;
  width: 100%;
  /* Quité el background-color oscuro que estaba en el style.css que me pasaste,
     volviendo al color claro del style.css original. Si prefieres el oscuro, cámbialo aquí. */
  /* background-color: #2c3e50; */
}

/* ==================== HEADER ==================== */
header {
  /* Usamos la imagen banner.png como fondo del header */
  background-image: url('../images/banner.png'); /* Ajusta la ruta si tu carpeta images no está al mismo nivel que css */
  background-size: cover; /* La imagen cubrirá todo el área del header sin distorsionarse */
  background-position: center; /* Centra la imagen de fondo */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-color: #c91616; /* Color de fondo de reserva si la imagen no carga */
  color: white; /* Color del texto dentro del header (si lo hay) */
  padding: 20px; /* Añadimos padding alrededor del contenido del header */
  text-align: center; /* Centra el contenido inline (como texto si lo hubiera) */
  min-height: 150px; /* Altura mínima para que el banner se vea bien */

  /* Usamos Flexbox para alinear los elementos dentro del header (el logo) */
  display: flex;
  justify-content: center; /* Centra el logo horizontalmente */
  align-items: center; /* Centra el logo verticalmente */
}

/* Estilos para el logo dentro del header */
#logo {
  /* El logo se posiciona automáticamente dentro del Flexbox */
  width: 30%; /* Ancho del logo */
  max-width: 350px; /* Ancho máximo para el logo */
  height: auto; /* Mantiene la proporción */
  /* Eliminamos position: absolute; ya que Flexbox maneja la posición */
}

/* Eliminamos el estilo #banner ya que ahora es un background-image */
/* #banner {
  width: 100%;
  position:static;
} */


/* ==================== NAVEGACIÓN ==================== */
nav {
  background-color: #00bfff;
  text-transform: uppercase;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #333;
  justify-content: center; /* Centra los elementos del menú */
  flex-wrap: wrap; /* Permite que los elementos del menú se envuelvan en pantallas pequeñas */
}

nav ul li {
  position: relative;
}

nav ul li a {
  display: block;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #ff4d4d;
}

/* El submenú no debería ser necesario en la navegación actual */
/* Si decides volver a usar submenús, descomenta y ajusta estos estilos */
/* .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  min-width: 150px;
  list-style: none;
  padding: 0;
}

.submenu li a {
  padding: 10px;
  color: white;
  text-decoration: none;
  display: block;
}

.submenu li a:hover {
  background-color: #00bfff;
}

nav ul li:hover .submenu {
  display: block;
} */

/* ==================== SECCIONES PRINCIPALES ==================== */
/* Estilos generales para las secciones de contenido */
section {
  text-align: center;
  padding: 20px;
  margin: 20px auto; /* Centra las secciones y añade margen */
  background-color: white;
  border-radius: 8px;
  border: 2px solid #00bfff;
  max-width: 800px; /* Ancho máximo para las secciones de contenido */
}


#inicio {
  /* text-align: center; Ya está en la regla 'section' */
}

#juegos {
  /* text-align: center; Ya está en la regla 'section' */
}

/* Eliminamos #juegos-texto ya que lo quitamos del HTML */
/* #juegos-texto {
  width: 50%;
  position: relative;
} */

/* Estilos para cada juego individual */
.juego {
  /* background-image: url("/bg.png"); */ /* Comentado porque no tenemos este archivo */
  background-color: #ffffff; /* Fondo blanco sólido en lugar de transparente con imagen */
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  text-align: left; /* Alineamos el texto de cada juego a la izquierda */
}

.juego h2 {
  margin-top: 0;
  text-align: center; /* Centramos el título del juego */
  margin-bottom: 15px;
}

/* Contenedor de imagen y descripción */
.contenido {
  display: flex;
  align-items: center; /* Alinea la imagen y descripción verticalmente */
  gap: 20px; /* Espacio entre imagen y descripción */
}

/* Estilos para la imagen del juego */
.contenido img.imagen { /* Especifiqué .imagen para evitar conflictos */
  width: 250px;
  height: auto; /* Mantiene la proporción */
  border-radius: 8px;
  /* margin-right: 20px; Movido a gap en .contenido */
  flex-shrink: 0; /* Evita que la imagen se encoja */
}

/* Contenedor de la descripción del juego */
.descripcion {
  flex: 1; /* Permite que la descripción ocupe el espacio restante */
  /* text-align: left; Ya está en .juego */
}

.descripcion p {
  margin: 0 0 15px; /* Margen inferior para el párrafo */
}

/* Contenedor de los botones de juego */
.game-buttons {
  margin-top: 10px;
  display: flex; /* Usa flexbox para los botones */
  gap: 10px; /* Espacio entre los botones */
  flex-wrap: wrap; /* Permite que los botones se envuelvan en pantallas pequeñas */
}

/* Estilos para los botones de juego (Descargar, Comprar/Consultar) */
.game-button {
  padding: 10px 15px;
  background-color: #ff4d4d; /* Usando el color del botón principal */
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em; /* Tamaño de fuente relativo */
  transition: background-color 0.3s ease;
  text-decoration: none; /* Asegura que los enlaces con botón no tengan subrayado */
  display: inline-block; /* Asegura que los enlaces se comporten como bloques para padding/margin */
}

.game-button:hover {
  background-color: #00bfff; /* Usando el color de hover del botón principal */
}


/* Eliminamos #about ya que no está en el HTML */
/* #about {
  margin-bottom: 100px;
} */

/* Eliminamos #espacio ya que lo quitamos del HTML */
/* #espacio {
  height: 50px;
} */

/* Estilos para el botón de WhatsApp */
.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background-color: #25D366; /* Color de WhatsApp */
  color: white;
  font-size: 1em; /* Tamaño de fuente relativo */
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  margin-top: 15px; /* Espacio arriba del botón */
}

.whatsapp-btn:hover {
  background-color: #1ebc59; /* Color más oscuro al pasar el cursor */
}

.whatsapp-btn img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  flex-shrink: 0; /* Evita que el icono se encoja */
}


/* Estilos para la sección de redes sociales */
.social-section {
  text-align: center;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  margin: 20px auto; /* Centra la sección */
  max-width: 800px; /* Ancho máximo */
}

.social-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 15px; /* Espacio arriba de los botones */
  flex-wrap: wrap; /* Permite que los botones se envuelvan */
}

.social-buttons a {
  text-decoration: none;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 1em; /* Tamaño de fuente relativo */
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.3s ease; /* Transición para el hover */
}

.social-buttons a:hover {
  opacity: 0.8; /* Reduce la opacidad al pasar el ratón */
}

.social-buttons img {
  width: 20px;
  height: 20px;
  flex-shrink: 0; /* Evita que el icono se encoja */
}

.youtube { background-color: #FF0000; }
.instagram { background-color: #C13584; }
.tiktok { background-color: #000000; }


/* ==================== FOOTER ==================== */
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 15px 0; /* Más padding para altura */
  /* position: fixed; Eliminar si no quieres que el footer esté fijo */
  /* bottom: 0; */
  width: 100%;
  margin-top: 30px; /* Espacio superior */
}


/* ==================== ESTILOS RESPONSIVOS ==================== */
@media (max-width: 768px) { /* Ajuste el breakpoint para tablets y móviles */
  header {
      min-height: 100px; /* Menor altura en pantallas pequeñas */
  }

  #logo {
      width: 40%; /* Logo un poco más grande en móviles */
      max-width: 150px;
  }

  nav ul {
      flex-direction: column;
      align-items: center; /* Centra los ítems del menú apilados */
  }

  nav ul li {
      width: 100%; /* Cada ítem del menú ocupa todo el ancho */
      text-align: center;
  }

  nav ul li a {
      padding: 12px; /* Más padding para los ítems del menú */
  }

  .menu-icon {
      display: block; /* Muestra el icono del menú en pantallas pequeñas */
      text-align: right;
      padding: 10px 20px;
      background-color: #333;
      color: white;
      cursor: pointer;
  }

   .menu {
      flex-direction: column;
      display: none; /* Oculta el menú por defecto en móviles */
      gap: 0;
    }

    .menu.active {
      display: flex; /* Muestra el menú cuando tiene la clase 'active' */
    }

   /* Asegurarse de que el submenú no aparezca */
   nav ul li .submenu {
       display: none;
   }


  section {
      margin: 15px auto; /* Menos margen en móviles */
      padding: 15px;
  }

  /* Estilos para el contenido del juego en pantallas pequeñas */
  .juego .contenido {
      flex-direction: column; /* Apila la imagen y la descripción */
      text-align: center; /* Centra el texto */
      gap: 15px; /* Espacio entre elementos apilados */
  }

  .contenido img.imagen {
      width: 80%; /* Imagen más grande en móviles */
      max-width: 200px; /* Máximo ancho para la imagen */
      margin-right: 0; /* Elimina el margen derecho cuando está apilado */
  }

  .descripcion {
      text-align: center; /* Asegura que la descripción esté centrada */
  }

  .game-buttons {
      justify-content: center; /* Centra los botones en móviles */
  }

  .social-buttons {
      flex-direction: column; /* Apila los botones sociales */
      gap: 10px; /* Menos espacio entre botones apilados */
      align-items: center; /* Centra los botones sociales */
  }

  .social-buttons a {
      width: 80%; /* Botones sociales ocupan más ancho */
      max-width: 250px;
      justify-content: center; /* Centra el contenido dentro del botón */
  }

  .whatsapp-btn {
      width: 80%; /* Botón WhatsApp ocupa más ancho */
      max-width: 250px;
      justify-content: center; /* Centra el contenido dentro del botón */
  }
}

/* Puedes añadir más breakpoints si es necesario (ej: @media (max-width: 480px) {} ) */