/*==========================================================
NAVBAR
==========================================================*/

.site-header {
  position: fixed;

  inset: 0 0 auto;

  width: 100%;

  z-index: 1050;

  background: var(--ts-white);

  transition: var(--ts-transition);
}

.site-header.scrolled {
  background: var(--ts-white);

  backdrop-filter: var(--ts-header-blur);

  box-shadow: var(--ts-shadow);
}

.navbar {
  min-height: var(--ts-header-height);

  transition: var(--ts-transition);
}

.site-header.scrolled .navbar {
  min-height: var(--ts-header-height-scroll);
}

/*==========================================================
LOGO
==========================================================*/

.navbar-brand {
  display: flex;

  align-items: center;

  font-weight: 800;

  font-size: 1.7rem;

  letter-spacing: -0.03em;
}

.logo-tech {
  color: #fff;
}

.logo-sol {
  color: var(--ts-primary);
}

/*==========================================================
MENU
==========================================================*/

.navbar-nav {
  gap: 0.75rem;
}

.navbar-nav .menu-item {
  margin: 0 0.2rem;
}

.navbar-nav .nav-link {
  position: relative;

  padding: 0.85rem 0.55rem;

  color: var(--ts-dark);

  font-size: var(--ts-navbar-link-size);

  font-weight: var(--ts-navbar-link-weight);

  transition: var(--ts-transition);
}

.navbar-nav .nav-link:hover {
  color: var(--ts-primary);
}

.navbar-nav .nav-link::after {
  content: "";

  position: absolute;

  left: 50%;

  bottom: 0.45rem;

  width: 0;

  height: 2px;

  background: var(--ts-primary);

  transform: translateX(-50%);

  transition: 0.3s;
}

.navbar-nav .nav-link:hover::after {
  width: 70%;
}

/*==========================================================
BOTÓN
==========================================================*/

.btn-navbar {
  min-width: 170px;

  border-radius: var(--ts-radius-pill);

  padding: 0.8rem 1.5rem;

  font-weight: 600;

  box-shadow: var(--ts-shadow-primary);
}

.btn-navbar:hover {
  transform: translateY(-2px);
}

/*==========================================================
MOBILE
==========================================================*/

.navbar-toggler {
  border: 0;

  box-shadow: none !important;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler-icon {
  filter: none;
}

@media (max-width: 991px) {
  .navbar-collapse {
    margin-top: 1rem;

    padding: 1.5rem;

    border-radius: var(--ts-radius-lg);

    background: var(--ts-white);
  }

  #primaryMenu .nav-link,
  #primaryMenu .nav-link:hover {
    color: var(--ts-dark);
  }

  .navbar-nav {
    gap: 0.25rem;
  }

  .btn-navbar {
    width: 100%;

    margin-top: 1rem;
  }
}

.navbar {
  transition: all 0.3s ease;
}

/* =========================================
   MENÚ PRINCIPAL
   ========================================= */

#primaryMenu .nav-link {
  font-weight: 500;
  transition: color 0.2s ease;
}

/* Hover */
#primaryMenu .nav-link:hover {
  color: var(--ts-primary);
}

/* Contraste del menú sobre el fondo blanco en todos los dispositivos. */
.navbar-nav .nav-link,
.site-header.scrolled #primaryMenu .nav-link {
  color: var(--ts-dark);
}

.navbar-nav .nav-link:hover,
.site-header.scrolled #primaryMenu .nav-link:hover {
  color: var(--ts-primary);
}

/* =========================================
   BOTÓN COTIZAR AHORA
   ========================================= */

#primaryMenu .btn-navbar {
  background-color: var(--ts-primary);
  border-color: var(--ts-primary);
  color: var(--ts-white);
}

#primaryMenu .btn-navbar:hover {
  background-color: var(--ts-primary-hover);
  border-color: var(--ts-primary-hover);
  color: var(--ts-white);
}

.navbar-brand img {
  transition: opacity 0.25s ease;
}

/* Logo blanco visible inicialmente */
#logo-blanco {
  display: block;
}

#logo-color {
  display: none;
}

/* Cuando hacemos scroll */
.site-header.scrolled #logo-blanco {
  display: none;
}

.site-header.scrolled #logo-color {
  display: block;
}


@media (max-width: 991px) {
  .site-header {
    position: relative;
    inset: auto;
  }
}