/* ============================================
   RJ Coders — Header Q2B Style
   Glassmorphism + animated orbs + gradient border + nav pill
   Colors: brand blue #385D98 / teal #2DD4BF / navy #0a0f1c
   ============================================ */

/* ---- Global Resets (previously in web-header.css) ---- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #385D98, #48C6B2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #2D4A7A, #3BA99C);
}

html {
  scrollbar-width: thin;
  scrollbar-color: #48C6B2 rgba(0,0,0,0.06);
}

/* ---- Global CSS Variables ---- */
:root {
  --h-blue: #385D98;
  --h-blue-soft: #5B7FBA;
  --h-teal: #2DD4BF;
  --h-teal-bright: #48C6B2;
  --h-heading: #1E293B;
  --h-muted: #64748B;
  --h-header-h: 71px;
}

@media (max-width: 1000px) {
  :root { --h-header-h: 60px; }
}

/* ---- Header Container ---- */
.SiteHeader_header {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: var(--h-header-h);
  margin: 0;
  z-index: 99999;
  font-family: 'Inter', sans-serif;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Background Layer (glass) ---- */
.SiteHeader_bg {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.68);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid rgba(30, 41, 59, 0.07);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Scrolled state — more opaque + shadow */
.SiteHeader_header.scrolled .SiteHeader_bg {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 30px -12px rgba(16, 24, 40, 0.16);
}

/* ---- Animated Dust Orbs Layer ---- */
.SiteHeader_dustLayer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.SiteHeader_dustSweep,
.SiteHeader_dustOrb {
  position: absolute;
  opacity: 0;
  filter: blur(22px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Sweep A — Blue orb wandering left→right */
.SiteHeader_dustSweepA {
  top: -40%; left: -15%;
  width: 40%; height: 180%;
  background: radial-gradient(ellipse 70% 55% at 50% 50%,
    rgba(56, 93, 152, 0.72) 0%,
    rgba(45, 74, 122, 0.35) 45%,
    transparent 72%);
  animation: hdrDustWanderBlue 34s ease-in-out infinite;
}

/* Sweep B — Teal orb wandering right→left */
.SiteHeader_dustSweepB {
  top: -30%; right: -20%; left: auto;
  width: 38%; height: 170%;
  filter: blur(18px);
  background: radial-gradient(ellipse 65% 50% at 50% 55%,
    rgba(45, 212, 191, 0.72) 0%,
    rgba(72, 198, 178, 0.30) 48%,
    transparent 74%);
  animation: hdrDustWanderTeal 42s ease-in-out 5s infinite;
}

/* Sweep C — Mixed blue+teal lingering */
.SiteHeader_dustSweepC {
  top: -20%; left: 28%;
  width: 44%; height: 160%;
  filter: blur(26px);
  background: radial-gradient(ellipse 80% 60% at 40% 50%,
    rgba(91, 127, 186, 0.45) 0%,
    rgba(45, 212, 191, 0.40) 40%,
    rgba(56, 93, 152, 0.25) 62%,
    transparent 78%);
  animation: hdrDustLingerMix 52s cubic-bezier(0.45, 0.05, 0.55, 0.95) 10s infinite;
}

/* Orb D — Small blue breathing vertically */
.SiteHeader_dustOrbD {
  width: 120px; height: 70px;
  left: 18%; top: 10%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(56, 93, 152, 0.70) 0%,
    rgba(45, 74, 122, 0.20) 55%,
    transparent 75%);
  animation: hdrDustBreatheVertical 22s ease-in-out infinite;
}

/* Orb E — Teal drifting idle */
.SiteHeader_dustOrbE {
  width: 140px; height: 80px;
  left: 55%; top: 25%;
  border-radius: 50%;
  filter: blur(16px);
  background: radial-gradient(circle,
    rgba(45, 212, 191, 0.65) 0%,
    rgba(45, 212, 191, 0.15) 50%,
    transparent 72%);
  animation: hdrDustDriftIdle 36s ease-in-out 3s infinite;
}

/* Orb F — Blue+teal zigzag */
.SiteHeader_dustOrbF {
  width: 100px; height: 60px;
  left: 72%; top: 5%;
  border-radius: 50%;
  filter: blur(18px);
  background: radial-gradient(circle,
    rgba(45, 212, 191, 0.45) 0%,
    rgba(56, 93, 152, 0.52) 45%,
    transparent 72%);
  animation: hdrDustZigZag 29s ease-in-out 8s infinite;
}

/* ---- Dust Orb Keyframes ---- */
@keyframes hdrDustWanderBlue {
  0%   { opacity: 0; transform: translate(-20%, 8%) scale(0.9); }
  10%  { opacity: 0.72; }
  28%  { opacity: 0.82; transform: translate(55%, -6%) scale(1.05); }
  38%  { opacity: 0.42; transform: translate(62%, -2%) scale(1); }
  52%  { opacity: 0.68; transform: translate(40%, 10%) scale(1.08); }
  70%  { opacity: 0.52; transform: translate(95%, -12%) scale(0.95); }
  88%  { opacity: 0.14; }
  100% { opacity: 0; transform: translate(130%, 4%) scale(0.85); }
}

@keyframes hdrDustWanderTeal {
  0%   { opacity: 0; transform: translate(30%, -10%) scale(0.85); }
  12%  { opacity: 0.68; }
  30%  { opacity: 0.88; transform: translate(-40%, 12%) scale(1.10); }
  42%  { opacity: 0.33; transform: translate(-48%, 8%) scale(1); }
  58%  { opacity: 0.78; transform: translate(-10%, -8%) scale(1.05); }
  78%  { opacity: 0.38; transform: translate(-90%, 15%) scale(0.92); }
  100% { opacity: 0; transform: translate(-120%, 0%) scale(0.80); }
}

@keyframes hdrDustLingerMix {
  0%   { opacity: 0; transform: translateY(20%) scale(0.80); }
  8%   { opacity: 0.52; }
  18%  { opacity: 0.68; transform: translate(4%, 8%) scale(1); }
  32%  { opacity: 0.62; transform: translate(6%, 6%) scale(1.02); }
  45%  { opacity: 0.82; transform: translate(35%, -18%) scale(1.15); }
  60%  { opacity: 0.38; transform: translate(20%, 12%) scale(0.95); }
  75%  { opacity: 0.72; transform: translate(-15%, -10%) scale(1.08); }
  100% { opacity: 0; transform: translate(50%, 25%) scale(0.85); }
}

@keyframes hdrDustBreatheVertical {
  0%   { opacity: 0.14; transform: translateY(45%) scale(0.90); }
  20%  { opacity: 0.78; transform: translateY(-35%) scale(1.10); }
  35%  { opacity: 0.33; transform: translateY(-10%) scale(1); }
  55%  { opacity: 0.72; transform: translateY(40%) scale(1.05); }
  70%  { opacity: 0.24; transform: translateY(5%) scale(0.95); }
  85%  { opacity: 0.68; transform: translateY(-50%) scale(1.08); }
  100% { opacity: 0.14; transform: translateY(45%) scale(0.90); }
}

@keyframes hdrDustDriftIdle {
  0%   { opacity: 0.18; transform: translate(0, 0) scale(1); }
  15%  { opacity: 0.72; transform: translate(-18%, -20%) scale(1.12); }
  28%  { opacity: 0.52; transform: translate(-20%, -18%) scale(1.05); }
  42%  { opacity: 0.48; transform: translate(-22%, -16%) scale(1.04); }
  58%  { opacity: 0.82; transform: translate(25%, 30%) scale(1.15); }
  78%  { opacity: 0.28; transform: translate(8%, 10%) scale(0.95); }
  100% { opacity: 0.18; transform: translate(0, 0) scale(1); }
}

@keyframes hdrDustZigZag {
  0%   { opacity: 0.10; transform: translate(0, 0); }
  12%  { opacity: 0.78; transform: translate(-40%, 35%); }
  25%  { opacity: 0.42; transform: translate(-20%, -25%); }
  40%  { opacity: 0.72; transform: translate(-70%, 15%); }
  55%  { opacity: 0.28; transform: translate(-50%, 40%); }
  70%  { opacity: 0.68; transform: translate(10%, -30%); }
  88%  { opacity: 0.38; transform: translate(-15%, 20%); }
  100% { opacity: 0.10; transform: translate(0, 0); }
}

/* ---- Animated Gradient Bottom Border ---- */
.SiteHeader_header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--h-blue) 0%,
    var(--h-blue-soft) 30%,
    var(--h-teal) 55%,
    var(--h-blue-soft) 80%,
    var(--h-blue) 100%);
  background-size: 220% 100%;
  animation: hdrGradientSlide 9s linear infinite;
}

@keyframes hdrGradientSlide {
  0%   { background-position: 0 0; }
  100% { background-position: -220% 0; }
}

/* ---- Hidden state (scroll down) ---- */
.SiteHeader_header.hidden {
  transform: translateY(-110%);
}

/* ---- Inner container ---- */
.SiteHeader_inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(12px, 2.5vw, 24px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  box-sizing: border-box;
}

.SiteHeader_header a,
.SiteHeader_header a:link,
.SiteHeader_header a:visited {
  text-decoration: none;
  color: var(--h-heading);
}

/* ---- Logo ---- */
.SiteHeader_logoLink {
  display: inline-flex;
  align-items: center;
  height: 100%;
  flex: 0 0 auto;
  min-width: 0;
}

.SiteHeader_logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 42px;
  max-width: min(150px, 38vw);
  object-fit: contain;
  transition: transform 0.3s ease;
}

.SiteHeader_logoLink:hover .SiteHeader_logo {
  transform: scale(1.04);
}

/* ---- Desktop Navigation ---- */
.SiteHeader_nav {
  position: relative;
  display: flex;
  align-items: stretch;
  align-self: stretch;
  margin-left: auto;
  min-width: 0;
}

/* ---- Animated Pill under nav items ---- */
.SiteHeader_pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 42px;
  border-radius: 999px;
  background: rgba(56, 93, 152, 0.07);
  border: 1px solid rgba(56, 93, 152, 0.14);
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  will-change: transform, width;
}

.SiteHeader_pill.ready {
  transition: transform 0.45s cubic-bezier(0.3, 1.35, 0.45, 1),
              width 0.45s cubic-bezier(0.3, 1.35, 0.45, 1),
              opacity 0.25s ease;
}

.SiteHeader_pill.on {
  opacity: 1;
}

/* ---- Nav Links (title + subtitle) ---- */
.SiteHeader_navLink {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 0 12px;
  box-sizing: border-box;
  text-align: center;
  outline-offset: -4px;
  cursor: pointer;
}

.SiteHeader_navTitle {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--h-heading);
  transform: translateY(7px);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

.SiteHeader_navSub {
  display: block;
  max-width: 120px;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--h-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.SiteHeader_navLink:hover .SiteHeader_navTitle,
.SiteHeader_navLink.active .SiteHeader_navTitle {
  transform: translateY(0);
  color: var(--h-blue);
}

.SiteHeader_navLink:hover .SiteHeader_navSub,
.SiteHeader_navLink.active .SiteHeader_navSub {
  opacity: 1;
  transform: translateY(0);
}

.SiteHeader_navLink.active .SiteHeader_navTitle {
  font-weight: 700;
}

/* ---- Dropdown inside nav ---- */
.SiteHeader_navLink.dropdown-trigger {
  position: relative;
}

.SiteHeader_dropdownMenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 14px;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(226, 232, 240, 0.6);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s ease;
  z-index: 100;
}

/* Puente de hover: cubre el hueco de 8px entre el trigger y el menú
   para que el ratón nunca salga del área hoverable */
.SiteHeader_dropdownMenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.SiteHeader_navLink.dropdown-trigger:hover .SiteHeader_dropdownMenu,
.SiteHeader_navLink.dropdown-trigger.active .SiteHeader_dropdownMenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.SiteHeader_dropdownItem {
  display: flex;
  flex-direction: column;
  padding: 11px 14px;
  border-radius: 9px;
  color: var(--h-heading);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.SiteHeader_dropdownItem:hover {
  background: rgba(56, 93, 152, 0.07);
  color: var(--h-blue);
}

.SiteHeader_dropdownItemTitle {
  font-weight: 600;
  font-size: 13px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

.SiteHeader_dropdownItemDesc {
  font-size: 11px;
  color: var(--h-muted);
  margin-top: 2px;
}

/* ---- CTA Button (Acceder) ---- */
.SiteHeader_cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #385D98, #48C6B2);
  color: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.2s ease;
  flex: 0 0 auto;
  font-family: 'Inter', sans-serif;
}

.SiteHeader_cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(56, 93, 152, 0.32);
  filter: brightness(1.08);
}

/* ---- Burger Button ---- */
.SiteHeader_burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}

.SiteHeader_burger:active {
  background: rgba(0, 0, 0, 0.06);
}

.SiteHeader_burgerBar {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--h-heading);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.SiteHeader_burgerBar:nth-child(1) { top: 15px; }
.SiteHeader_burgerBar:nth-child(2) { top: 21px; }
.SiteHeader_burgerBar:nth-child(3) { top: 27px; }

.SiteHeader_burger.open .SiteHeader_burgerBar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.SiteHeader_burger.open .SiteHeader_burgerBar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}
.SiteHeader_burger.open .SiteHeader_burgerBar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---- Mobile Overlay ---- */
.SiteHeader_overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  flex-direction: column;
  padding: calc(var(--h-header-h) + 12px) 22px 28px;
  box-sizing: border-box;
  overflow-y: auto;
  background: #ffffff;
  animation: hdrOverlayIn 0.28s ease both;
  font-family: 'Inter', sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.SiteHeader_overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.SiteHeader_overlay a,
.SiteHeader_overlay a:link,
.SiteHeader_overlay a:visited {
  text-decoration: none;
  color: var(--h-heading);
}

/* Overlay decorative orbs */
.SiteHeader_overlay::before,
.SiteHeader_overlay::after {
  content: "";
  position: fixed;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  z-index: 0;
}

.SiteHeader_overlay::before {
  top: -18vmax;
  right: -16vmax;
  background: rgba(56, 93, 152, 0.10);
}

.SiteHeader_overlay::after {
  bottom: -20vmax;
  left: -16vmax;
  background: rgba(45, 212, 191, 0.16);
}

@keyframes hdrOverlayIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Overlay nav links */
.SiteHeader_overlayNav {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.SiteHeader_overlayLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 6px;
  border-bottom: 1px solid #f0f0f3;
  animation: hdrRiseIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes hdrRiseIn {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

.SiteHeader_overlayText {
  min-width: 0;
}

.SiteHeader_overlayTitle {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--h-heading);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

.SiteHeader_overlaySub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--h-muted);
}

.SiteHeader_overlayArrow {
  flex: 0 0 auto;
  color: #c2c2cc;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}

.SiteHeader_overlayArrow svg {
  width: 20px;
  height: 20px;
}

.SiteHeader_overlayLink:hover .SiteHeader_overlayArrow,
.SiteHeader_overlayLink:active .SiteHeader_overlayArrow {
  transform: translateX(5px);
  color: var(--h-blue);
}

.SiteHeader_overlayLink:hover .SiteHeader_overlayTitle {
  color: var(--h-blue);
}

/* Overlay submenu */
.SiteHeader_overlaySubmenu {
  display: none;
  flex-direction: column;
  padding: 4px 0 8px 20px;
}

.SiteHeader_overlaySubmenu.open {
  display: flex;
}

.SiteHeader_overlaySubLink {
  display: block;
  padding: 10px 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--h-muted);
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}

.SiteHeader_overlaySubLink:hover {
  color: var(--h-blue);
  background: rgba(56, 93, 152, 0.05);
}

/* Overlay CTA */
.SiteHeader_overlayCta {
  display: block;
  text-align: center;
  margin-top: 24px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #385D98, #48C6B2);
  color: #fff !important;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  position: relative;
  z-index: 1;
  animation: hdrRiseIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.3s;
}

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .SiteHeader_nav {
    display: none;
  }
  .SiteHeader_cta.desktop-only {
    display: none;
  }
  .SiteHeader_burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .SiteHeader_logo {
    max-height: 34px;
    max-width: min(120px, 42vw);
  }
  :root {
    --h-header-h: 60px;
  }
}

@media (min-width: 1001px) {
  .SiteHeader_burger,
  .SiteHeader_overlay {
    display: none !important;
  }
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  .SiteHeader_dustSweep,
  .SiteHeader_dustOrb,
  .SiteHeader_header,
  .SiteHeader_header::after,
  .SiteHeader_logo,
  .SiteHeader_navTitle,
  .SiteHeader_navSub,
  .SiteHeader_pill,
  .SiteHeader_burgerBar,
  .SiteHeader_overlay,
  .SiteHeader_overlayArrow,
  .SiteHeader_overlayLink {
    animation: none !important;
    transition: none !important;
  }
  .SiteHeader_header.hidden {
    transform: none;
  }
  .SiteHeader_dustOrbD,
  .SiteHeader_dustOrbE,
  .SiteHeader_dustOrbF,
  .SiteHeader_dustSweepA,
  .SiteHeader_dustSweepB,
  .SiteHeader_dustSweepC {
    opacity: 0.22;
    transform: none;
  }
}