/* ============================
       NAVBAR BASE
       ============================ */
    nav.navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background-color: #ffff;
        /* background-color: transparent; */
        padding: 10px 30px;
        transition: background-color 0.3s ease;
        will-change: background-color;
    }

    /* ============================
       NAV LINKS
       ============================ */
    .navbar-nav .nav-link {
        font-size: 21px;
        font-weight: 400;
        color: var(--color-primary) !important;
       /* color: #ffffff !important; /* fuerza blanco */
        transition: color 0.3s ease, opacity 0.2s ease;
    }

    /* Hover suave de links */
    .navbar-nav .nav-link:hover {
        color: var(--color-primary) !important;
        opacity: 0.8;
    }

    /* ============================
       ICONS
       ============================ */
    .nav-icon {
        font-size: 1.2rem;
        color: var(--color-primary) !important;
        /* color: #ffffff; */
        transition: color 0.3s ease, opacity 0.2s ease;
    }

    /* Hover en icons */
    nav.navbar:hover .nav-icon {
        color: var(--color-primary);
    }

    /* ============================
       LOGO
       ============================ */
    .navbar-brand img {
        width: 200px;

        /* filter: brightness(0) invert(1); logo blanco */
        transition: filter 0.3s ease;
    }

    /* Hover en navbar */
    nav.navbar:hover {
        background-color: #fff;
    }

    nav.navbar:hover .navbar-brand img {
        filter: none;
    }

    /* Hover links sobre navbar hover */
    nav.navbar:hover .navbar-nav .nav-link {
        color: var(--color-primary) !important;
    }

    /* ============================
       BOTONES Y OTROS
       ============================ */
    .btn.bg-transparent, .btn.p-0 {
        color: #fff;
    }

    /* Opcional: si quieres que los íconos también cambien al hover global */
    .btn.bg-transparent:hover .nav-icon {
        color: var(--color-primary);
    }
    
    /* ============================
   MOBILE NAVBAR FIX
   ============================ */
@media (max-width: 991px) {

  /* Logo más pequeño */
  .navbar-brand img {
    width: 150px;
  }

  /* Burger + icons alineados */
  .mobile-icons {
    display: flex;
    align-items: center;
  }

  /* Menú desplegable con fondo blanco */
  .navbar-collapse {
    background: white;
    padding: 20px;
    border-radius: 16px;
    margin-top: 15px;
  }

  /* Links mobile */
  .navbar-nav .nav-link {
    font-size: 20px;
    padding: 12px 0;
    color: var(--color-primary) !important;
  }

  /* Hover */
  .navbar-nav .nav-link:hover {
    opacity: 0.7;
  }

  /* Burger icon */
  .navbar-toggler i {
    font-size: 1.5rem;
  }

}

/* ============================
   DESKTOP STRUCTURE
   ============================ */
@media (min-width: 992px) {


  /* Menu centrado */
  .navbar-collapse {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Burger oculto en escritorio */
  .navbar-toggler {
    display: none;
  }
}

/* ============================
   MOBILE STRUCTURE
   ============================ */
@media (max-width: 991px) {


  /* Navbar más pegada a los bordes */
  nav.navbar {
    padding: 10px 5px; /* antes 30px */
  }

  /* Container sin tanto espacio lateral */
  .navbar .container-fluid {
    padding-left: 5px;
    padding-right: 5px;
  }


  /* Logo más pequeño */
  .navbar-brand img {
    width: 140px;
  }

  /* Icons siempre en fila */
  .nav-icons {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  /* Collapse menu baja debajo */
  .navbar-collapse {
    width: 100%;
    background: white;
    margin-top: 15px;
    padding: 20px;
    border-radius: 18px;
    text-align: center;
  }

  /* Links mobile */
  .navbar-nav .nav-link {
    color: var(--color-primary) !important;
    font-size: 20px;
    padding: 12px 0;
  }
}

/* ============================
   LANGUAGE SWITCH MINIMAL
============================ */
form.language-switch {
    display: flex;
    gap: 10px;
}

form.language-switch button {
    background: none;
    border: none;
    padding: 0;
    font-size: 16px;
    cursor: pointer;
    color: #555; /* color por defecto */
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

form.language-switch button:hover {
    color: var(--color-primary);
}

form.language-switch button.active {
    color: var(--color-primary); /* azul bootstrap */
    text-decoration: underline;
    font-weight: 500;
}

/* Clase que activa el “hover” al hacer scroll */
nav.navbar.scrolled {
    background-color: #fff !important;
}

nav.navbar.scrolled .navbar-brand img {
    filter: none !important;
}

nav.navbar.scrolled .navbar-nav .nav-link {
    color: var(--color-primary) !important;
}

nav.navbar.scrolled .nav-icon {
    color: var(--color-primary) !important;
}