/* Blue Orbit — identidad visual */

:root {
  --bo-navy: #05070a;
  --bo-navy-mid: #0a1f3d;
  --bo-navy-light: #0c2548;
  --bo-cyan: #00a3ff;
  --bo-cyan-bright: #38c8ff;
  --bo-cyan-deep: #0077cc;
  --bo-white: #ffffff;
}

.brand-logo {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background: transparent;
}

.brand-logo--header,
.brand-logo--hero {
  mix-blend-mode: screen;
}

header #logo2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  line-height: 1;
}

.brand-logo--header {
  height: min(14vh, 44px);
  width: min(14vh, 44px);
  flex-shrink: 0;
}

.header-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  font-size: clamp(0.7rem, 1.6vh, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.15;
  text-shadow: 0 1px 12px rgba(0, 163, 255, 0.25);
  white-space: nowrap;
}

.brand-word--accent {
  color: var(--bo-cyan);
}

.brand-word {
  color: var(--bo-white);
}

.hero-brand__title .brand-word--accent {
  color: var(--bo-cyan-bright);
}

.hero-brand__title .brand-word {
  color: var(--bo-white);
}

header #logo2 #svgContainer {
  display: none !important;
}

/* Acentos del sitio */
a:hover.gradient {
  opacity: 0.75;
}

.gradient {
  background: linear-gradient(to bottom right, var(--bo-cyan), var(--bo-cyan-deep)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.gradient2 {
  background: linear-gradient(to bottom right, var(--bo-cyan-bright), var(--bo-cyan)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.btn-icon.btn-gradient:after {
  background: linear-gradient(to top right, var(--bo-cyan), var(--bo-cyan-deep)) !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(0deg, var(--bo-cyan-deep) 20%, var(--bo-cyan) 75%, var(--bo-cyan-bright) 100%) !important;
}

#logo-banner {
  background: var(--bo-navy);
  padding: 0;
  margin: 0;
  min-height: 0;
  height: 6px;
  overflow: hidden;
  line-height: 0;
}

#logo-banner .logos-swiper {
  display: none;
}

#popout-menu .brand-logo--menu {
  max-height: none;
  max-width: min(280px, 85vw);
  padding: 0.65rem 0.9rem;
  margin: 0 auto;
}

.scrolled header .brand-logo--header {
  filter: drop-shadow(0 2px 8px rgba(0, 163, 255, 0.35));
}

#content-tabs .content-toggles:after,
#vertical-tabs .content-toggles:after {
  background: linear-gradient(to right, var(--bo-cyan), var(--bo-cyan-bright)) !important;
}

#content-tabs .content-toggles li:before,
#vertical-tabs .content-toggles li:before {
  background: linear-gradient(to bottom right, var(--bo-cyan), var(--bo-cyan-deep)) !important;
}

#content-tabs .tab-content ul li:before,
.ticks li:before {
  background: linear-gradient(to right, var(--bo-cyan), var(--bo-cyan-bright)) !important;
}

#vertical-tabs .content-toggles:after {
  background: linear-gradient(to bottom right, var(--bo-cyan), var(--bo-cyan-bright)) !important;
}

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.swiper-pagination .swiper-pagination-bullet:hover {
  background: linear-gradient(to bottom right, var(--bo-cyan), var(--bo-cyan-deep)) !important;
}

form input:not([type=file]),
form textarea:not([type=file]),
form textarea:not([type=checkbox]),
form .select,
.form input:not([type=file]),
.form textarea:not([type=file]),
.form textarea:not([type=checkbox]),
.form .select {
  border-image: linear-gradient(120deg, var(--bo-cyan), var(--bo-cyan-deep)) 20 stretch !important;
}

@media (max-width: 41.6875em) {
  .header-brand {
    font-size: 0.65rem;
    letter-spacing: 0.06em;
  }

  .hero-brand {
    gap: 0.85rem;
  }
}