/* Variables globales */
:root {
    /* Colores principales */
    --color-primary-rgb: 245, 124, 0; /* RGB para transparencias */
    --color-accent: #F57C00;         /* Color de acento */
    --color-accent-rgb: 245, 124, 0;  /* RGB para transparencias acento */
    --color-accent-light: #C26200;    /* Color más oscuro (usado en botones) */
    --color-accent-hover: #FF8910;    /* Color para estado hover */
    
    /* Colores de estado */
    --color-success: #28A428;        /* Verde éxito */
    --color-success-light: #17CF17;   /* Verde claro */
    --color-success-dark: #1B981B;    /* Verde oscuro */
    --color-success-darkest: #107010; /* Verde muy oscuro */
    --color-success-rgb: 40, 164, 40; /* RGB para transparencias */
    --color-danger: #D92626;         /* Rojo error */
    --color-danger-rgb: 217, 38, 38; /* RGB para transparencias de rojo */
    --color-warning: #FFBF00;        /* Amarillo advertencia */
    --color-warning-rgb: 255, 191, 0; /* RGB para transparencias de amarillo */
    --color-info: #198CB3;           /* Azul información */
    --color-info-rgb: 25, 140, 179;  /* RGB para transparencias de azul info */
    
    /* Colores de superficie y fondo */
    /* Tema dark - Escala de oscuros para superficies */
    --color-background: #121212;     /* Fondo principal oscuro */
    --color-background-rgb: 18, 18, 18; /* RGB para transparencias de fondo */
    --color-surface-0: var(--color-surface-3);      /* Superficie más oscura (nivel 0) */
    --color-surface-0-rgb: 5, 5, 5; /* RGB para transparencias nivel 0 */
    --color-surface-1: #0A0A0A;      /* Superficie muy oscura (nivel 1) */
    --color-surface-1-rgb: 10, 10, 10; /* RGB para transparencias nivel 1 */
    --color-surface-2: #121212;      /* Superficie nivel 2 */
    --color-surface-2-rgb: 18, 18, 18; /* RGB para transparencias nivel 2 */
    --color-surface-3: #1C1C1C;      /* Superficie de tarjetas (nivel 3) */
    --color-surface-3-rgb: 28, 28, 28; /* RGB para transparencias nivel 3 */
    --color-surface-4: #292929;      /* Superficie clara (nivel 4) */
    --color-surface-4-rgb: 41, 41, 41; /* RGB para transparencias nivel 4 */
    
    /* Compatibilidad con código existente */
    --color-surface: var(--color-surface-3);      /* Alias para mantener compatibilidad */
    --color-surface-light: var(--color-surface-4); /* Alias para mantener compatibilidad */
    
    --color-overlay-rgb: 0, 0, 0; /* RGB para transparencias de overlay */
    --color-overlay: rgba(var(--color-overlay-rgb), 0.6); /* Fondo para overlays */
    
    /* Colores de texto */
    --color-text: #E0E0E0;           /* Texto principal */
    --color-text-secondary: #9E9E9E; /* Texto secundario */
    --color-text-light: #FFFFFF;     /* Texto claro */
    --color-text-dark: #212529;      /* Texto oscuro */
    
    /* Bordes y separadores */
    --color-border: #292929;         /* Bordes principales */
    --color-border-light: #313131;   /* Bordes claros */
    --color-border-accent: rgba(var(--color-accent-rgb), 0.3); /* Bordes con color de acento */
    --color-border-light-accent: rgba(var(--color-accent-rgb), 0.1); /* Bordes ligeros con color de acento */
    
    /* Espaciado */
    --spacing-xs: 0.25rem;           /* 4px */
    --spacing-sm: 0.5rem;            /* 8px */
    --spacing-md: 1rem;              /* 16px */
    --spacing-lg: 2rem;              /* 32px */
    --spacing-xl: 3rem;              /* 48px */
    --spacing-xxl: 4rem;             /* 64px */
    
    /* Border radius */
    --border-radius: 8px;            /* Radio pequeño */
    --border-radius-sm: 4px;         /* Radio muy pequeño */
    --border-radius-lg: 12px;        /* Radio grande */
    --border-radius-xl: 16px;        /* Radio muy grande */
    --border-radius-round: 50%;      /* Completamente redondo */
    
    /* Sombras */
    --shadow: 0 2px 4px rgba(var(--color-overlay-rgb), 0.1);           /* Sombra base */
    --shadow-sm: 0 1px 2px rgba(var(--color-overlay-rgb), 0.1);        /* Sombra pequeña */
    --shadow-md: 0 4px 6px rgba(var(--color-overlay-rgb), 0.1);        /* Sombra media */
    --shadow-lg: 0 8px 16px rgba(var(--color-overlay-rgb), 0.15);      /* Sombra grande */
    --shadow-xl: 0 12px 24px rgba(var(--color-overlay-rgb), 0.2);      /* Sombra extra grande */
    
    /* Transiciones */
    --transition-fast: 0.15s ease;    /* Transición rápida */
    --transition-normal: 0.3s ease;   /* Transición normal */
    --transition-slow: 0.5s ease;     /* Transición lenta */
    
    /* Z-index layers */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
}
/* Reset global */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Container global */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Tipografía global */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--spacing-md);
    font-weight: 700;
    line-height: 1.2;
}

p {
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-accent);
}

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

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: var(--color-accent);
}
.hidden{
    display: none !important;
}