/* =========================================
public\css\base.css

   1. VARIABLES Y RESET (Sistema de Diseño Completo)
   ========================================= */
:root {
    /* === COLORES DE MARCA === */
    --color-primary: #1a365d;
    --color-primary-hover: #2c5282;
    --color-primary-light: #2a4a7f;
    
    --color-accent: #d69e2e;
    --color-accent-hover: #b7791f;
    --color-accent-light: #ecc94b;
    
    /* === COLORES DE FONDO === */
    --color-bg: #ffffff;
    --color-bg-alt: #f7fafc;
    --color-bg-dark: #1a202c;
    --color-bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* === COLORES DE TEXTO === */
    --color-text: #2d3748;
    --color-text-secondary: #718096;
    --color-text-muted: #a0aec0;
    --color-text-inverse: #ffffff;
    --color-text-on-primary: #ffffff;
    --color-text-on-accent: #ffffff;
    
    /* === COLORES DE SUPERFICIE (cards, modales, dropdowns) === */
    --color-surface: #ffffff;
    --color-surface-alt: #f7fafc;
    --color-surface-dark: #2d3748;
    --color-surface-overlay: rgba(255, 255, 255, 0.95);
    
    /* === BORDES Y SOMBRAS === */
    --color-border: #e2e8f0;
    --color-border-light: #edf2f7;
    --color-border-dark: #4a5568;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-color-strong: rgba(0, 0, 0, 0.15);
    
    /* === ESTADOS === */
    --color-success: #38a169;
    --color-warning: #d69e2e;
    --color-error: #e53e3e;
    --color-info: #3182ce;
    
    /* === ESPACIADO Y LAYOUT === */
    --spacing-unit: 1rem;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-full: 50px;
    --shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color);
    --shadow-lg: 0 10px 15px -3px var(--shadow-color-strong), 0 4px 6px -2px var(--shadow-color);
    --font-main: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    
    /* === TRANSICIONES === */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* =========================================
   MODO OSCURO
   ========================================= */
[data-theme="dark"] {
    --color-primary: #63b3ed;
    --color-primary-hover: #4299e1;
    --color-primary-light: #90cdf4;
    
    --color-accent: #f6ad55;
    --color-accent-hover: #ed8936;
    --color-accent-light: #fbd38d;
    
    --color-bg: #1a202c;
    --color-bg-alt: #2d3748;
    --color-bg-dark: #171923;
    
    --color-text: #e2e8f0;
    --color-text-secondary: #a0aec0;
    --color-text-muted: #718096;
    --color-text-inverse: #1a202c;
    
    --color-surface: #2d3748;
    --color-surface-alt: #4a5568;
    --color-surface-dark: #1a202c;
    --color-surface-overlay: rgba(45, 55, 72, 0.95);
    
    --color-border: #4a5568;
    --color-border-light: #2d3748;
    --color-border-dark: #718096;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-color-strong: rgba(0, 0, 0, 0.5);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* =========================================
   2. TIPOGRAFÍA FLUIDA
   ========================================= */
h1, h2, h3 {
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
p  { font-size: clamp(1rem, 1.5vw, 1.125rem); margin-bottom: 1rem; }

/* =========================================
   3. UTILIDADES Y LAYOUT
   ========================================= */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
}

.section-padding {
    padding: clamp(3rem, 8vw, 6rem) 0;
}

.bg-alt {
    background-color: var(--color-bg-alt);
}

/* Botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    background-color: var(--color-accent-hover);
}

.btn-secondary {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* =========================================
   4. ANIMACIONES DE SCROLL
   ========================================= */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

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

/* =========================================
   AJUSTES GLOBALES DE ESPACIADO
   ========================================= */
.section-padding {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.site-footer {
    margin-top: 0;
}