:root {
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary-color: #10b981;
    --dark-color: #1e293b;
    --light-color: #f8fafc;
    --gray-color: #64748b;
    --gray-light: #e2e8f0;
    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --transition: all 0.3s ease;
    /* Header sizing: ajusta aquí el tamaño del header y del logo */
    --header-height: 120px;
    /* altura del header (estado normal) */
    --header-height-scrolled: 100px;
    /* altura del header cuando está scrolled (ligeramente menor) */
    --logo-height: 100px;
    /* altura del logo (estado normal) */
    --logo-height-scrolled: 85px;
    /* altura del logo cuando está scrolled */
    --header-padding-vertical: 28px;
    /* padding vertical del container (normal) */
    --header-padding-vertical-scrolled: 22px;
    /* padding vertical cuando scrolleado */
}

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