/* =======================
   ESTILOS PRINCIPALES
   ======================= */

/* Reset y configuración base */
* {
    margin: 0; /* Elimina márgenes por defecto */
    padding: 0; /* Elimina padding por defecto */
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
}

/* Variables CSS globales */
:root {
    /* Tipografía */
    --font-family: 'Inter', sans-serif;
    --font-weight-light: 400;
    --font-weight-normal: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Espaciado del sistema 8px */
    --spacing-xs: 0.5rem; /* 8px */
    --spacing-sm: 1rem; /* 16px */
    --spacing-md: 1.5rem; /* 24px */
    --spacing-lg: 2rem; /* 32px */
    --spacing-xl: 3rem; /* 48px */
    --spacing-2xl: 4rem; /* 64px */
    --spacing-3xl: 6rem; /* 96px */
    
    /* Radios de borde */
    --border-radius-sm: 0.5rem; /* 8px */
    --border-radius-md: 1rem; /* 16px */
    --border-radius-lg: 1.5rem; /* 24px */
    --border-radius-full: 50%;
    
    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    
    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Tamaños de contenedor */
    --container-max-width: 1200px;
    --container-padding: var(--spacing-md);
    
    /* Z-index layers */
    --z-background: -1;
    --z-content: 1;
    --z-header: 10;
    --z-modal: 100;
}

/* Configuración del documento */
html {
    scroll-behavior: smooth; /* Navegación suave entre secciones */
    font-size: 16px; /* Base para unidades rem */
}

body {
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    line-height: 1.6; /* Altura de línea para legibilidad */
    overflow-x: hidden; /* Previene scroll horizontal */
    position: relative;
}


/* Contenedor principal centrado */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto; /* Centra el contenedor */
    padding: 0 var(--container-padding);
    width: 100%;
}

/* Secciones principales */
.section {
    padding: var(--spacing-3xl) 0; /* Espaciado vertical amplio */
    position: relative;
}

/* Títulos de sección */
.section-title {
    font-size: 2.5rem; /* 40px */
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    position: relative;
}

/* Línea decorativa bajo títulos */
.title-underline {
    width: 60px;
    height: 4px;
    border-radius: 2px;
    margin: var(--spacing-sm) auto 0;
}

/* Subtítulos de sección */
.subsection-title {
    font-size: 1.75rem; /* 28px */
    font-weight: var(--font-weight-semibold);
    text-align: center;
    margin: var(--spacing-3xl) 0 var(--spacing-2xl);
    position: relative;

}

/* Sistema de botones */
.btn {
    display: inline-flex; /* Flexbox para íconos y texto */
    align-items: center;
    gap: var(--spacing-xs); /* Espacio entre ícono y texto */
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition-smooth);
    font-size: 1rem;
}

/* Botón primario */
.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px); /* Efecto de elevación */
    box-shadow: var(--shadow-lg);
}

/* Botón secundario */
.btn-secondary {
    background: rgba(255, 255, 255, 0.1); /* Fondo semi-transparente */
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px); /* Efecto glassmorphism */
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Animación de fondo con partículas */
.background-animation {
    position: fixed; /* Permanece fijo durante el scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-background);
    pointer-events: none; /* No interfiere con la interacción */
}

#particleCanvas {
    width: 100%;
    height: 100%;
}

/* Contenido principal */
.main-content {
    position: relative;
    z-index: var(--z-content);
}

/* ======================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ====================================== */

/* Móviles pequeños - hasta 480px */
@media (max-width: 480px) {
    .container {
        padding: 0 1rem; /* Padding reducido en móviles */
    }
    
    .section {
        padding: 2rem 0; /* Menos padding vertical */
    }
    
    .section-title {
        font-size: 2rem; /* Título más pequeño */
    }
    
    .btn {
        padding: 0.75rem 1rem; /* Botones más compactos */
        font-size: 0.9rem;
    }
}

/* Tablets - 481px a 768px */
@media (min-width: 481px) and (max-width: 768px) {
    .container {
        padding: 0 1.5rem;
    }
    
    .section-title {
        font-size: 2.25rem;
    }
}

/* Desktop pequeño - 769px a 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 2rem;
    }
}

/* Desktop grande - más de 1024px */
@media (min-width: 1025px) {
    .section {
        padding: var(--spacing-3xl) 0;
    }
}

/* ========================
   UTILIDADES GENERALES
   ======================== */

/* Texto con gradiente */
.text-gradient {
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Elementos ocultos para accesibilidad */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Fade in animation para elementos que aparecen */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}