/**
 * Portal de Educación Superior - Alcaldía de Sibaté
 * Variables de Diseño y Tokens del Sistema
 */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
    /* Paleta Oficial y Colores del Mockup */
    --color-primary: #00D47E;
    --color-primary-dark: #008f5d;
    --color-primary-deep: #006842;
    --color-primary-light: #2ee59d;
    --color-primary-soft: rgba(0, 212, 126, 0.12);
    
    /* Azules Institucionales */
    --color-navy: #073763;
    --color-navy-dark: #042646;
    --color-navy-deep: #061d36;
    --color-blue-action: #0088CC;
    --color-blue-dark: #063B73;
    --color-cyan: #00A9E8;
    
    /* Fondos y Superficies */
    --bg-main: #FFFFFF;
    --bg-secondary: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-footer: #061d36;
    --border-color: #E2E8F0;
    --border-light: #EEF2F6;
    
    /* Tipografía y Textos */
    --text-primary: #073763;
    --text-body: #334155;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;
    --text-white: #FFFFFF;
    
    --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-script: 'Caveat', cursive;
    
    /* Gradientes */
    --grad-hero: linear-gradient(135deg, #00D47E 0%, #00A9E8 100%);
    --grad-overlay: linear-gradient(90deg, rgba(6, 30, 56, 0.92) 0%, rgba(6, 30, 56, 0.72) 48%, rgba(6, 30, 56, 0.2) 80%, rgba(0,0,0,0) 100%);
    --grad-search: linear-gradient(135deg, #008f5d 0%, #00b074 50%, #00D47E 100%);
    
    /* Radios Redondeados */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-pill: 999px;
    
    /* Sombras Elegantes y Limpias */
    --shadow-subtle: 0 2px 10px rgba(7, 55, 99, 0.04);
    --shadow-card: 0 4px 20px rgba(7, 55, 99, 0.06);
    --shadow-hover: 0 10px 25px rgba(7, 55, 99, 0.12);
    --shadow-green: 0 6px 20px rgba(0, 212, 126, 0.35);
    
    /* Transiciones */
    --transition-fast: 0.18s ease;
    --transition-normal: 0.28s ease;
    
    /* Dimensiones Responsivas y Fluidas */
    --container-max: 1480px;
    --header-height: 84px;
}

body {
    font-family: var(--font-body);
    color: var(--text-body);
    background-color: #FAFCFD;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    margin: 0;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(20px, 2.5vw, 40px);
    padding-right: clamp(20px, 2.5vw, 40px);
    box-sizing: border-box;
}