/**
 * =============================================================================
 * CONTENT/NIÑOS/JUEGOS.CSS - Estilos de Juegos para Niños
 * =============================================================================
 * 
 * Este archivo CSS define la apariencia visual de la página de juegos para niños.
 * Es utilizado por: content/niños/juegos.html
 * 
 * Diseño colorido y divertido adaptado para niños.
 * 
 * =============================================================================
 * ESTRUCTURA DEL ARCHIVO:
 * =============================================================================
 * 1. IMPORTS           - Importar estilos base del index
 * 2. TÍTULO           - Estilos del título de la página
 * 3. GRID DE JUEGOS   - Grid de tarjetas de juegos
 * 4. TARJETA DE JUEGO - Estilos de cada tarjeta individual
 * 5. COLORES          - Colores de borde aleatorios para cada tarjeta
 * 6. ANIMACIONES       - Keyframes y efectos de animación
 * 7. RESPONSIVE        - Ajustes para móviles
 * 8. PREFERENCES      - Soporte para prefers-reduced-motion
 * 
 * =============================================================================
 */

/* =============================================================================
SECCIÓN 1: IMPORTS
================================================================================
Importamos los estilos base del index para mantener consistencia visual.
*/

@import url('../../index/index.css');

/* =============================================================================
SECCIÓN 2: TÍTULO
================================================================================
Estilos para el título principal de la página de juegos.
*/

/* Título de la página de juegos */
.juegos-title {
  /* Tamaño de fuente responsivo: min 1.5rem, máximo 2.25rem */
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  
  /* Centrar el texto */
  text-align: center;
  
  /* Margen vertical */
  margin: 2rem auto;
  
  /* Ancho máximo del contenido */
  max-width: 800px;
  
  /* Espaciado lateral */
  padding: 0 1.5rem;
  
  /* Color del texto */
  color: var(--text);
  
  /* Animación de entrada */
  animation: fadeInUp 0.6s ease-out;
}

/* =============================================================================
SECCIÓN 3: GRID DE JUEGOS
================================================================================
Contenedor grid que muestra todas las tarjetas de juegos.
*/

/* Grid de juegos - Diseño sin imágenes, solo iconos */
.juegos-grid {
  /* Usar CSS Grid para el layout */
  display: grid;
  
  /* Columnas automáticas con mínimo 300px de ancho */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  
  /* Espacio entre tarjetas */
  gap: 1.5rem;
  
  /* Margen superior */
  margin-top: 2rem;
}

/* Wrapper que envuelve cada tarjeta de juego */
.juego-card-wrapper {
  /* Posición relativa para posicionar elementos hijos */
  position: relative;
  
  /* Elementos en columna */
  display: flex;
  flex-direction: column;
}

/* =============================================================================
SECCIÓN 4: TARJETA DE JUEGO
================================================================================
Estilos para cada tarjeta individual de juego.
*/

/* Tarjeta de juego */
.juego-card {
  /* Gradiente de fondo suave (blanco a azul muy claro) */
  background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 100%);
  
  /* Bordes muy redondeados */
  border-radius: 24px;
  
  /* Ocultar contenido que sobresale */
  overflow: hidden;
  
  /* Sombra suave de color verde */
  box-shadow: 0 4px 20px rgba(42, 157, 143, 0.1);
  
  /* Transición suave para todos los cambios */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* Posición relativa */
  position: relative;
  
  /* Borde transparente inicialmente */
  border: 3px solid transparent;
  
  /* Ocultar y desplazar para animación */
  opacity: 0;
  transform: translateY(30px);
  
  /* Animación de entrada */
  animation: slideUpFade 0.5s ease-out forwards;
  
  /* Quitar decoración de enlace */
  text-decoration: none;
  
  /* Elementos en columna */
  display: flex;
  flex-direction: column;
  
  /* Espaciado interno */
  padding: 2rem;
  
  /* Altura mínima */
  min-height: 240px;
  
  /* Incluir padding en el ancho total */
  box-sizing: border-box;
}

/* =============================================================================
SECCIÓN 5: COLORES DE BORDE
================================================================================
Colores de borde aleatorios para cada tarjeta, creando un efecto visual divertido.
Se usa la fórmula 6n+X para asignar colores cíclicamente.
*/

/* Tarjeta 1, 7, 13... - Rojo coral */
.juego-card-wrapper:nth-child(6n + 1) .juego-card {
  border-color: #ff6b6b;
}

/* Tarjeta 2, 8, 14... - Turquesa */
.juego-card-wrapper:nth-child(6n + 2) .juego-card {
  border-color: #4ecdc4;
}

/* Tarjeta 3, 9, 15... - Amarillo */
.juego-card-wrapper:nth-child(6n + 3) .juego-card {
  border-color: #ffe66d;
}

/* Tarjeta 4, 10, 16... - Verde menta */
.juego-card-wrapper:nth-child(6n + 4) .juego-card {
  border-color: #95e1d3;
}

/* Tarjeta 5, 11, 17... - Rojo suave */
.juego-card-wrapper:nth-child(6n + 5) .juego-card {
  border-color: #f38181;
}

/* Tarjeta 6, 12, 18... - Lavanda */
.juego-card-wrapper:nth-child(6n + 6) .juego-card {
  border-color: #aa96da;
}

/* Delays escalonados para la animación de entrada */
.juego-card-wrapper:nth-child(1) .juego-card { animation-delay: 0.05s; }
.juego-card-wrapper:nth-child(2) .juego-card { animation-delay: 0.1s; }
.juego-card-wrapper:nth-child(3) .juego-card { animation-delay: 0.15s; }
.juego-card-wrapper:nth-child(4) .juego-card { animation-delay: 0.2s; }
.juego-card-wrapper:nth-child(5) .juego-card { animation-delay: 0.25s; }
.juego-card-wrapper:nth-child(6) .juego-card { animation-delay: 0.3s; }
.juego-card-wrapper:nth-child(7) .juego-card { animation-delay: 0.35s; }
.juego-card-wrapper:nth-child(8) .juego-card { animation-delay: 0.4s; }

/* Efecto hover de la tarjeta */
.juego-card:hover {
  /* Elevar y escalar ligeramente */
  transform: translateY(-10px) scale(1.02);
  
  /* Sombra más grande */
  box-shadow: 0 15px 40px rgba(42, 157, 143, 0.25);
}

/* =============================================================================
SECCIÓN 6: ICONO DEL JUEGO
================================================================================
El icono grande que representa cada juego.
*/

/* Contenedor del icono */
.juego-icono {
  /* Tamaño grande del icono */
  font-size: 3rem;
  
  /* Margen inferior */
  margin-bottom: 1rem;
  
  /* Centrar contenido */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Altura fija para el icono */
  height: 100px;
  
  /* Bordes redondeados */
  border-radius: 20px;
  
  /* Color del icono blanco */
  color: white;
}

/* Fondos coloridos para cada icono - ciclo de 6 colores */
.juego-card-wrapper:nth-child(6n + 1) .juego-icono {
  /* Rojo coral */
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
}
.juego-card-wrapper:nth-child(6n + 2) .juego-icono {
  /* Turquesa */
  background: linear-gradient(135deg, #4ecdc4 0%, #7eddd6 100%);
}
.juego-card-wrapper:nth-child(6n + 3) .juego-icono {
  /* Naranja */
  background: linear-gradient(135deg, #ffb347 0%, #ffcc80 100%);
}
.juego-card-wrapper:nth-child(6n + 4) .juego-icono {
  /* Verde menta */
  background: linear-gradient(135deg, #95e1d0 0%, #b8ede5 100%);
}
.juego-card-wrapper:nth-child(6n + 5) .juego-icono {
  /* Rojo suave */
  background: linear-gradient(135deg, #f38181 0%, #f7a5a5 100%);
}
.juego-card-wrapper:nth-child(6n + 6) .juego-icono {
  /* Lavanda */
  background: linear-gradient(135deg, #aa96da 0%, #c4b5e8 100%);
}

/* =============================================================================
SECCIÓN 7: CONTENIDO DE LA TARJETA
================================================================================
Título y descripción dentro de cada tarjeta.
*/

/* Contenedor del contenido */
.juego-content {
  /* Sin padding extra */
  padding: 0;
  
  /* Ocupar espacio disponible */
  flex: 1;
  
  /* Elementos en columna */
  display: flex;
  flex-direction: column;
  
  /* Texto centrado */
  text-align: center;
}

/* Título del juego */
.juego-content h3 {
  /* Tamaño de fuente */
  font-size: 1.25rem;
  
  /* Margen inferior */
  margin-bottom: 0.75rem;
  
  /* Color oscuro */
  color: #2d3436;
  
  /* Fuente especial para niños */
  font-family: 'Baloo 2', cursive;
}

/* Descripción del juego */
.juego-content p {
  /* Tamaño de fuente */
  font-size: 0.95rem;
  
  /* Color gris */
  color: #636e72;
  
  /* Altura de línea */
  line-height: 1.6;
  
  /* Sin margen inferior */
  margin-bottom: 0;
}

/* =============================================================================
SECCIÓN 8: ACCESIBILIDAD
================================================================================
Soporte para navegación por teclado.
*/

/* Focus visible para accesibilidad WCAG */
.juego-card:focus-within {
  /* Outline verde del color primario */
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

/* =============================================================================
SECCIÓN 9: ANIMACIONES
================================================================================
Definición de keyframes para las animaciones.
*/

/* Animación de entrada: slide up + fade */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================================================
SECCIÓN 10: RESPONSIVE
================================================================================
Ajustes para dispositivos móviles.
*/

/* Tablets y móviles grandes */
@media (max-width: 768px) {
  /* Grid con columnas más pequeñas */
  .juegos-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
  }

  /* Tarjeta con menos padding */
  .juego-card {
    padding: 1.5rem;
    min-height: 200px;
  }

  /* Icono más pequeño */
  .juego-icono {
    font-size: 2.5rem;
    height: 80px;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  /* Una sola columna */
  .juegos-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
SECCIÓN 11: PREFERENCIAS DE USUARIO
================================================================================
Soporte para usuarios que prefieren reducción de movimiento.
*/

/* Desactivar animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  /* Eliminar animación de la tarjeta */
  .juego-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}