/* =========================================
   APRENDE A JUGAR - Juego Responsable
   ========================================= */

/* Fondo global de la página Aprende a Jugar / Juego Responsable: fija una imagen de fondo ('casino_footer_bg.png') estática al hacer scroll */
body {
  background-image: url('images/casino_footer_bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #000;
}

/* =========================================
   SECCIÓN HERO (Cabecera principal)
   ========================================= */
/* Hero o encabezado con fondo azul oscuro transparente (rgba 10, 20, 80, 0.82) centrado mediante flexbox */
.juego-hero {
  background: rgba(10, 20, 80, 0.82);
  padding: 60px 20px 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Contenedor flexible que ajusta sus elementos y los envuelve en varias líneas si la pantalla es reducida (flex-wrap: wrap) */
.juego-hero-content {
  display: flex;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Logo circular (border-radius: 50%) con borde de 3px semitransparente y sombra 3D */
.juego-logo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

/* Contenedor de texto ordenado verticalmente (flex-direction: column) */
.juego-hero-text {
  display: flex;
  flex-direction: column;
}

/* Etiqueta superior en mayúsculas con espaciado entre letras (letter-spacing: 4px) */
.juego-somos {
  font-size: 1.2rem;
  font-weight: 700;
  color: #bbbbbb;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* Título principal grande de Juego Responsable en blanco y negrita (800) */
.juego-titulo-hero {
  font-size: 2.4rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* =========================================
   SECCIÓN DE TEXTO / INFORMACIÓN
   ========================================= */
/* Sección contenedora del texto informativo con fondo azul oscuro transparente */
.juego-section {
  background: rgba(10, 20, 80, 0.82);
  padding: 60px 20px 80px;
}

/* Contenedor central limitado a 820px para una lectura cómoda */
.juego-container {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Párrafos informativos con tamaño de letra 1.05rem, altura de línea 1.85 y texto centrado */
.juego-container p {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #e2d5cc;
  text-align: center;
}

/* =========================================
   FOOTER (Pie de página adaptado)
   ========================================= */
/* Banner de pie de página adaptado con altura mínima de 220px */
.juego-footer-banner {
  background: rgba(10, 20, 80, 0.82);
  width: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.juego-footer-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.juego-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  padding: 40px 20px;
  text-align: center;
}

/* Texto de derechos de autor con opacidad reducida */
.juego-copyright {
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  text-align: center;
  margin: 0;
}

/* =========================================
   RESPONSIVE (Ajustes para teléfonos o pantallas reducidas)
   ========================================= */
@media (max-width: 600px) {
  .juego-hero { padding: 50px 20px 40px; }
  .juego-titulo-hero { font-size: 1.8rem; }
  .juego-somos { font-size: 1rem; }
  .juego-container p { font-size: 1rem; text-align: left; }
  .juego-footer-banner { min-height: 180px; }
}