/* ==========================================================
   PALETA DE COLORES (root)
   ========================================================== */
:root {
    --color-primary: #5AE22D;
    --color-primary-rgb: 90, 226, 45;

    --color-white: #FFFFFF;
    --color-white-rgb: 255, 255, 255;

    --color-gray-light: #B0B0B0;
    --color-gray-light-rgb: 176, 176, 176;

    --color-gray-medium: #5A5A5A;
    --color-gray-medium-rgb: 90, 90, 90;

    --color-black: #1A1A1A;
    --color-black-rgb: 26, 26, 26;
}

/* ===== NAVBAR ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    z-index: 100;
    background-color: transparent; /* sin scroll: invisible, no se ve nada */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Vidrio esmerilado al hacer scroll — blur reducido para que sea más liviano */
.navbar.scrolled {
    background-color: rgba(var(--color-black-rgb), 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 16px rgba(var(--color-black-rgb), 0.4);
}

.navbar-contenido {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 30px;
}

.navbar-logo {
    height: 40px;
    width: auto;
    filter: drop-shadow(0 0 8px rgba(var(--color-white-rgb), 0.3));
    transition: filter 0.2s ease;
}

.navbar-logo:hover {
    filter: drop-shadow(0 0 10px rgba(var(--color-white-rgb), 0.45));
}