/* ========================================
  ARCHIVO: global.css
  DESCRIPCIÓN: Estilos globales aplicados a todo el documento
  OBJETIVO: Configurar la base visual del proyecto (fuentes, colores, scrollbars)
   ======================================== */

/* ======================================
  SECTION 1: IMPORTACIÓN DE FUENTES
  Traer fuentes de Google Fonts
   ====================================== */

/* Importar fuente Inter en pesos 300-700 para tipografía consistente */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ======================================
  SECTION 2: RESET GLOBAL (CSS Reset)
  Eliminar márgenes y paddings por defecto del navegador
   ====================================== */

/* Selector universal: selecciona TODOS los elementos de la página */
* {
  /* Eliminar margen externo por defecto */
  margin: 0;
  
  /* Eliminar relleno interno por defecto */
  padding: 0;
  
  /* Usar el modelo box-sizing border-box para que width incluya bordes y padding */
  box-sizing: border-box;
}

/* ======================================
  SECTION 3: CONFIGURACIÓN DEL HTML
  Estilos para la raíz del documento
   ====================================== */

html {
  /* Tamaño de fuente fluido y responsivo usando clamp():
    - mín: 12px (en pantallas muy pequeñas)
    - preferred: 0.8vw + 10px (relativo a viewport width)
    - máx: 22px (en pantallas muy grandes)
     Esto permite que la tipografía escale automáticamente */
  font-size: clamp(12px, 0.8vw + 10px, 22px);
}

/* ======================================
  SECTION 4: ESTILOS DEL BODY (Cuerpo)
  Configuración base de la página completa
   ====================================== */

body {
  /* Usar la fuente definida en variables.css */
  font-family: var(--font-family);
  
  /* Color de fondo base (azul muy oscuro) */
  background-color: var(--bg-color);
  
  /* Gradientes de fondo: múltiples capas semitransparentes para efecto atmosférico
    - Círculo azul en esquina superior izquierda (10%, 20%)
    - Círculo naranja en esquina inferior derecha (90%, 80%)
    - Círculo verde en el centro (50%, 50%)
     Cada uno con blur gradual hacia transparencia */
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.15), transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(245, 158, 11, 0.12), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.05), transparent 50%);
  
  /* Mantener el fondo fijo mientras se scrollea (efecto parallax sutil) */
  background-attachment: fixed;
  
  /* Color principal del texto: blanco muy claro */
  color: var(--text-main);
  
  /* Altura de línea: 1.6 veces el tamaño de fuente para mejor legibilidad */
  line-height: 1.6;
  
  /* Evitar scroll horizontal no deseado en pantallas pequeñas */
  overflow-x: hidden;
}

/* ======================================
  SECTION 5: SCROLLBAR PERSONALIZADO
  Estilizar la barra de scroll del navegador (Webkit)
   ====================================== */

/* Barra de scroll vertical */
::-webkit-scrollbar {
  /* Ancho de la scrollbar */
  width: 10px;
  
  /* Alto de la scrollbar (para scroll horizontal) */
  height: 10px;
}

/* Fondo de la scrollbar (área por la que pasa el thumb) */
::-webkit-scrollbar-track {
  /* Fondo semi-oscuro semitransparente */
  background: rgba(0, 0, 0, 0.2);
}

/* Parte movible de la scrollbar (el "dedo" que subes/bajas) */
::-webkit-scrollbar-thumb {
  /* Color semitransparente blanco */
  background: rgba(255, 255, 255, 0.1);
  
  /* Bordes redondeados para la apariencia */
  border-radius: 5px;
  
  /* Borde muy sutil alrededor del thumb */
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Estado hover de la scrollbar (cuando pasas el ratón sobre ella) */
::-webkit-scrollbar-thumb:hover {
  /* Color más opaco al pasar el ratón para mejor visibilidad */
  background: rgba(255, 255, 255, 0.2);
}

/* ======================================
  SECTION 6: ESTILOS GLOBALES DE ELEMENTOS
  Reseteos y estilos básicos de etiquetas HTML
   ====================================== */

/* Enlaces globales: sin decoración de texto */
a {
  /* Eliminar subrayado por defecto en enlaces */
  text-decoration: none;
  
  /* Heredar color del texto padre */
  color: inherit;
}

/* Listas no ordenadas: sin viñetas */
ul {
  /* Remover los puntos de lista por defecto */
  list-style: none;
}

/* Encabezados: tipografía uniforme */
h1, h2, h3, h4, h5, h6 {
  /* Peso de fuente semibold para jerarquía visual */
  font-weight: 600;
  
  /* Color principal para todos los encabezados */
  color: var(--text-main);
}

/* ========================================
  NOTAS DE IMPLEMENTACIÓN:
  
  1. CSS RESET: Eliminar estilos por defecto del navegador
      evita comportamientos inconsistentes entre navegadores
  
  2. BACKGROUND GRADIENTS: Los gradientes radiales crean un efecto
      atmosférico sutil sin ser distrayentes
  
  3. SCROLLBAR: El webkit-scrollbar es no-estándar pero funciona
      en Chrome, Safari, Edge. Firefox y otros usan scroll-behavior
  
  4. RESPONSIVE FONT: El clamp() hace que el tamaño de fuente
      escale automáticamente sin necesidad de media queries
  
  5. LINE-HEIGHT: 1.6 es considerado el estándar para buena legibilidad
   ======================================== */