/**
 * =============================================================================
 * CONTENT/TERCERA_EDAD/ACTIVIDADES.CSS - Estilos de Actividades
 * =============================================================================
 * 
 * Este archivo CSS define la apariencia visual de la página de actividades para personas mayores.
 * Es utilizado por: content/tercera_edad/actividades.html
 * 
 * =============================================================================
 * ESTRUCTURA DEL ARCHIVO:
 * =============================================================================
 * 1. IMPORTS     - Importar estilos base del index
 * 2. HERO      - Sección principal
 * 3. INTRODUCCIÓN - Texto introductorio
 * 4. ACTIVIDADES GRID - Grid de actividades
 * 5. TARJETAS - Estilos de tarjetas
 * 6. SEPARADOR - Imagen separadora
 * 7. ANIMACIONES - Keyframes
 * 8. RESPONSIVE - Ajustes para móviles
 * 9. PREFERENCES - Soporte prefers-reduced-motion
 * 
 * =============================================================================
 */

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

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

/* =============================================================================
SECCIÓN 2: HERO SECTION
================================================================================
Sección principal con título y fondo decorativo.
*/

/* Hero para mayores - Contenedor principal de la sección hero */
/* position: relative - Permite posicionar elementos hijos absolutamente dentro */
/* background: var(--bg-gradient) - Usa el gradiente de fondo de las variables CSS */
/* color: white - Texto de color blanco para alto contraste */
/* padding: 6rem 0 8rem - Espaciado: 6rem arriba, 0 lados, 8rem abajo */
/* overflow: hidden - Oculta cualquier contenido que sobresale de los límites */
/* margin-bottom: 0 - Sin margen inferior */
.mayores-hero {
  position: relative;
  background: var(--bg-gradient);
  color: white;
  padding: 6rem 0 8rem;
  overflow: hidden;
  margin-bottom: 0;
}

/* Fondo decorativo del hero */
/* position: absolute - Se posiciona absolutamente respecto al contenedor padre */
/* inset: 0 - Ocupa todo el espacio (top:0, right:0, bottom:0, left:0) */
/* background: Múltiples gradientes radiales superpuestos para crear efecto visual */
/* animation: float3D 8s ease-in-out infinite - Animación de flotación 3D infinita */
.mayores-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 20% 80%,
      rgba(42, 157, 143, 0.25) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 20%,
      rgba(233, 196, 106, 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      rgba(38, 70, 83, 0.3) 0%,
      transparent 70%
    );
  animation: float3D 8s ease-in-out infinite;
}

/* Contenido del hero */
/* position: relative - Para que esté por encima del fondo decorativo */
/* text-align: center - Texto centrado */
/* max-width: 800px - Ancho máximo de 800px para legibilidad */
/* margin: 0 auto - Centra horizontalmente con márgenes automáticos */
/* z-index: 1 - Por encima del fondo */
.mayores-hero-content {
  position: relative;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  z-index: 1;
}

/* Badge decorativo */
/* display: inline-block - Se comporta como bloque en línea */
/* background: rgba(255, 255, 255, 0.15) - Fondo blanco semitransparente al 15% */
/* backdrop-filter: blur(10px) - Efecto de desenfoque estilo glassmorphism */
/* padding: 0.5rem 1.25rem - Espaciado interno: 0.5rem vertical, 1.25rem horizontal */
/* border-radius: var(--radius-full) - Borde completamente redondeado (circular) */
/* font-size: 0.9rem - Tamaño de letra pequeño */
/* font-weight: 600 - Peso seminegrita */
/* margin-bottom: 1.5rem - Espacio inferior */
/* border: 1px solid rgba(255, 255, 255, 0.2) - Borde blanco sutil al 20% */
/* animation: fadeInDown 0.6s ease - Animación de entrada desde arriba */
.mayores-hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: fadeInDown 0.6s ease;
}

/* Título del hero */
/* font-size: 3rem - Tamaño grande de título (48px) */
/* font-weight: 800 - Extra negrita */
/* margin-bottom: 1rem - Espacio inferior */
/* color: white - Color blanco forzado */
/* animation: fadeInUp 0.6s ease 0.1s both - Animación con delay de 0.1s */
.mayores-hero h1 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: white;
  animation: fadeInUp 0.6s ease 0.1s both;
}

/* Texto destacado dentro del título */
/* color: var(--accent) - Color de acento (amarillo/dorado) de las variables */
.mayores-hero h1 .highlight {
  color: var(--accent);
}

/* Subtítulo del hero */
/* font-size: 1.25rem - Tamaño de subtítulo (20px) */
/* opacity: 0.95 - Ligera transparencia (95% opacidad) */
/* margin-bottom: 0 - Sin margen inferior */
/* animation: fadeInUp 0.6s ease 0.2s both - Animación con delay de 0.2s */
.mayores-hero-subtitle {
  font-size: 1.25rem;
  opacity: 0.95;
  margin-bottom: 0;
  animation: fadeInUp 0.6s ease 0.2s both;
}

/* Onda decorativa en la parte inferior del hero */
/* position: absolute - Posición absoluta respecto al hero */
/* bottom: 0 - Pegado abajo */
/* left: 0 - Pegado izquierda */
/* width: 100% - Ancho completo */
/* line-height: 0 - Elimina espacio extra de línea */
.mayores-hero-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 0;
}

/* SVG de la onda */
/* width: 100% - Ancho completo del contenedor */
/* height: 80px - Altura fija de 80px */
/* display: block - Elimina espacio extra debajo del SVG */
.mayores-hero-wave svg {
  width: 100%;
  height: 80px;
  display: block;
}

/* =============================================================================
SECCIÓN 3: INTRODUCCIÓN
================================================================================
Texto introductorio de la sección.
*/

/* Contenedor de introducción */
/* text-align: center - Texto centrado */
/* max-width: 800px - Ancho máximo para legibilidad */
/* margin: 0 auto 3rem - Centra horizontalmente, 3rem de espacio inferior */
/* padding: 0 1.5rem - Espaciado lateral: 0 arriba/abajo, 1.5rem lados */
/* animation: fadeInUp 0.6s ease-out - Animación de entrada */
.mayores-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
  animation: fadeInUp 0.6s ease-out;
}

/* Título de la introducción */
/* font-size: 2rem - Tamaño de título (32px) */
/* margin-bottom: 1rem - Espacio inferior */
/* color: var(--text) - Color de texto principal */
.mayores-intro h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--text);
}

/* Párrafo de la introducción */
/* font-size: 1.1rem - Tamaño de texto (17.6px) */
/* color: var(--text-muted) - Color de texto secundario/suavizado */
/* line-height: 1.7 - Altura de línea espaciosa para legibilidad */
.mayores-intro p {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* =============================================================================
SECCIÓN 4: ACTIVIDADES GRID
================================================================================
Grid de actividades.
*/

/* Grid de actividades - 3 columnas */
/* display: grid - Activa el modelo de diseño en cuadrícula */
/* grid-template-columns: repeat(3, 1fr) - Tres columnas de igual ancho (fraction) */
/* gap: 2rem - Espacio de 2rem (32px) entre las tarjetas */
/* padding: 0 1.5rem - Espaciado lateral */
/* max-width: 1200px - Ancho máximo del grid */
/* margin: 0 auto - Centra horizontalmente */
.actividades-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 0 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* =============================================================================
SECCIÓN 5: TARJETAS
================================================================================
Estilos para las tarjetas de actividades.
*/

/* Tarjeta de actividad - Contenedor principal de cada actividad */
/* background: var(--card-bg) - Fondo de tarjeta de las variables (blanco) */
/* border-radius: var(--radius-xl) - Bordes muy redondeados (24px) */
/* padding: 2rem - Espaciado interno grande */
/* box-shadow: var(--shadow) - Sombra sutil de las variables */
/* transition: all var(transition) - Transición suave de 0.3s para todos los cambios */
/* position: relative - Para posicionar elementos absolutos internos */
/* overflow: hidden - Oculta contenido que exceda los bordes (para efecto shimmer) */
/* opacity: 0 - Invisible inicialmente para animación */
/* transform: translateY(30px) - Desplazado 30px hacia abajo inicialmente */
/* animation: slideUpFade 0.5s ease-out forwards - Animación de entrada */
.actividad-card {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  animation: slideUpFade 0.5s ease-out forwards;
}

/* Delays escalonados para animación - Crea efecto de entrada secuencial */
/* nth-child(1) - Primer elemento: delay de 0.05s */
/* nth-child(2) - Segundo elemento: delay de 0.1s */
/* nth-child(3) - Tercer elemento: delay de 0.15s */
/* nth-child(4) - Cuarto elemento: delay de 0.2s */
/* nth-child(5) - Quinto elemento: delay de 0.25s */
/* nth-child(6) - Sexto elemento: delay de 0.3s */
.actividad-card:nth-child(1) { animation-delay: 0.05s; }
.actividad-card:nth-child(2) { animation-delay: 0.1s; }
.actividad-card:nth-child(3) { animation-delay: 0.15s; }
.actividad-card:nth-child(4) { animation-delay: 0.2s; }
.actividad-card:nth-child(5) { animation-delay: 0.25s; }
.actividad-card:nth-child(6) { animation-delay: 0.3s; }

/* Barra decorativa superior de la tarjeta */
/* content: '' - Sin contenido visible, solo decorativo */
/* position: absolute - Posición absoluta respecto a la tarjeta */
/* top: 0 - Pegado arriba */
/* left: 0 - Pegado izquierda */
/* width: 100% - Ancho completo de la tarjeta */
/* height: 4px - Altura de 4px para la barra */
/* background: linear-gradient - Degradado de turquesa a turquesa clara */
/* transform: scaleX(0) - Inicia sin ancho visible (escala 0 en X) */
/* transform-origin: left - El origen de transformación está a la izquierda */
/* transition: transform var(transition) - Transición suave para animación */
.actividad-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

/* Estado hover de la tarjeta */
/* transform: translateY(-8px) - Eleva la tarjeta 8px hacia arriba */
/* box-shadow: var(--shadow-xl) - Sombra grande para efecto de elevación */
.actividad-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

/* Barra decorativa en hover - Se expande a ancho completo */
/* transform: scaleX(1) - Escala al 100% del ancho */
.actividad-card:hover::before {
  transform: scaleX(1);
}

/* Efecto shimmer - Brillo que atraviesa la tarjeta */
/* content: '' - Sin contenido visible */
/* position: absolute - Posición absoluta */
/* top: 0 - Desde arriba */
/* left: -100% - Comienza fuera por la izquierda */
/* width: 100% - Ancho completo */
/* height: 100% - Alto completo */
/* background: linear-gradient - Degradado de brillo semitransparente */
/* transition: left 0.5s ease - Transición suave del movimiento */
/* pointer-events: none - Permite clics a través del efecto */
.actividad-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transition: left 0.5s ease;
  pointer-events: none;
}

/* Brillo en hover - Atraviesa la tarjeta */
/* left: 100% - Se mueve completamente a la derecha */
.actividad-card:hover::after {
  left: 100%;
}

/* Icono de la tarjeta de actividad */
/* width: 60px - Ancho fijo */
/* height: 60px - Alto fijo */
/* background: linear-gradient - Degradado de turquesa */
/* border-radius: var(--radius-lg) - Bordes redondeados (16px) */
/* display: flex - Centra el icono dentro */
/* align-items: center - Centra verticalmente */
/* justify-content: center - Centra horizontalmente */
/* color: white - Icono blanco */
/* font-size: 1.5rem - Tamaño del icono (24px) */
/* margin-bottom: 1.25rem - Espacio inferior */
/* transition: transform var(transition) - Transición suave */
.actividad-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  transition: transform var(--transition);
}

/* Icono en hover de la tarjeta */
/* transform: scale(1.1) rotate(5deg) - Amplía 10% y rota 5 grados */
.actividad-card:hover .actividad-icon {
  transform: scale(1.1) rotate(5deg);
}

/* Título de la tarjeta de actividad */
/* font-size: 1.25rem - Tamaño de título (20px) */
/* margin-bottom: 1rem - Espacio inferior */
/* color: var(--text) - Color de texto principal */
/* transition: color var(transition-fast) - Transición rápida del color */
.actividad-card h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--text);
  transition: color var(--transition-fast);
}

/* Título en hover - Cambia a color primario */
/* color: var(--primary) - Color turquesa */
.actividad-card:hover h3 {
  color: var(--primary);
}

/* Párrafo de la tarjeta de actividad */
/* font-size: 0.95rem - Tamaño de texto (15.2px) */
/* color: var(--text-muted) - Color de texto secundario */
/* line-height: 1.6 - Altura de línea */
/* margin-bottom: 0 - Sin margen inferior */
.actividad-card p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 0;
}

/* Focus visible para accesibilidad WCAG */
/* outline: 3px solid var(--primary) - Borde visible turquesa de 3px */
/* outline-offset: 3px - Espacio entre borde y elemento */
.actividad-card:focus-within {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

/* =============================================================================
SECCIÓN 6: SEPARADOR
================================================================================
Imagen separadora entre secciones.
*/

/* Contenedor del separador */
/* max-width: 1200px - Ancho máximo */
/* margin: 4rem auto - Centra, 4rem espacio vertical */
/* padding: 0 1.5rem - Espaciado lateral */
.mayores-separator {
  max-width: 1200px;
  margin: 4rem auto;
  padding: 0 1.5rem;
}

/* Imagen del separador */
/* width: 100% - Ancho completo del contenedor */
/* height: auto - Mantiene proporción */
/* border-radius: var(--radius-lg) - Bordes redondeados (16px) */
/* opacity: 0.8 - Ligera transparencia (80% opacidad) */
/* transition: Transiciones suaves para opacidad y transformación */
.mayores-separator img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  opacity: 0.8;
  transition:
    opacity var(--transition),
    transform var(--transition);
}

/* Imagen del separador en hover */
/* opacity: 1 - Opacidad completa */
/* transform: scale(1.01) - Ligera ampliación (1%) */
.mayores-separator img:hover {
  opacity: 1;
  transform: scale(1.01);
}

/* =============================================================================
SECCIÓN 7: ANIMACIONES
================================================================================
Keyframes para las animaciones usadas en el archivo.
*/

/* Animación slideUpFade - Desplazamiento hacia arriba con desvanecimiento */
/* from - Estado inicial: invisible y desplazado hacia abajo */
/* to - Estado final: visible y en posición original */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animación float3D - Efecto de flotación con rotación 3D */
/* 0% y 100% - Posición inicial y final: sin movimiento */
/* 25% - Primer cuarto: sube 8px y rota 2 grados */
/* 50% - Mitad: posición central */
/* 75% - Tercer cuarto: sube 4px y rota -2 grados */
@keyframes float3D {
  0%,
  100% {
    transform: translateY(0) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: translateY(-8px) rotateX(2deg) rotateY(2deg);
  }
  50% {
    transform: translateY(0) rotateX(0deg) rotateY(0deg);
  }
  75% {
    transform: translateY(-4px) rotateX(-2deg) rotateY(-2deg);
  }
}

/* =============================================================================
SECCIÓN 8: RESPONSIVE
================================================================================
Ajustes para dispositivos móviles y tablets.
*/

/* Tablets - Ancho máximo de 1024px */
/* grid-template-columns: repeat(2, 1fr) - 2 columnas en lugar de 3 */
@media (max-width: 1024px) {
  .actividades-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Móviles - Ancho máximo de 768px */
@media (max-width: 768px) {
  /* Hero reducido */
  /* padding: 4rem 0 6rem - Espaciado reducido para móviles */
  .mayores-hero {
    padding: 4rem 0 6rem;
  }

  /* Título del hero más pequeño */
  /* font-size: 2rem - Tamaño reducido (32px) */
  .mayores-hero h1 {
    font-size: 2rem;
  }

  /* Subtítulo más pequeño */
  /* font-size: 1rem - Tamaño de texto base */
  .mayores-hero-subtitle {
    font-size: 1rem;
  }

  /* Grid de una columna */
  /* grid-template-columns: 1fr - Una sola columna */
  .actividades-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
SECCIÓN 9: PREFERENCIAS DE USUARIO
================================================================================
Soporte para usuarios que prefieren movimiento reducido (prefers-reduced-motion).
*/

/* Desactiva animaciones para prefers-reduced-motion */
/* animation: none - Sin animación */
/* opacity: 1 - Totalmente visible */
/* transform: none - Sin transformación */
@media (prefers-reduced-motion: reduce) {
  .actividad-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .mayores-hero-bg {
    animation: none;
  }
  .actividad-card::after {
    display: none;
  }
}