/* ── TOKENS ── */
:root {
  /* ===== CORES BASE (fundo e superfícies) ===== */
  --black:      #06060C;
  --dark:       #0B0B14;
  --dark-card: #0d0d18;

  /* ===== BORDAS ===== */
  --border:     rgba(255,255,255,0.07);
  --border-inv: rgba(255,255,255,0.05);

  /* ===== AZUL (cor de destaque principal) ===== */
  --blue-core:  #32B1F5;
  --blue-deep:  #1a7ab8;
  --blue-light: #60c6ff;
  --blue-glow:  #32B1F5;

  /* ===== NEUTROS / TEXTO ===== */
  --grey-hi:    #e8e8f0;
  --grey-mid:   rgba(255,255,255,0.55);
  --grey-low:   rgba(255,255,255,0.35);
  --silver-hi:  rgba(255,255,255,0.85);
  --silver-bd:   rgba(255,255,255,0.12);

  /* ===== CORES DE STATUS / DESTAQUE ===== */
  --red:          #ef4444;
  --green:        #22c55e;
  --amber:        #FAA023;

  /* ===== PALETA DOURADA (identidade visual secundária) ===== */
  --primary-gold:      #d4af37;

  /* ===== PALETA PRETO / ESCURO (variações de tom) ===== */
  --primary-black:     #0a0a0a;

  /* ===== TONS CLAROS / TEXTO EM FUNDO CLARO ===== */
  --text-gray:   #666666;
  --text-dark:   #222222;
  --bg-light:    #ffffff;

  /* ===== TIPOGRAFIA ===== */
  --font-head:  'Montserrat', sans-serif;
  --font-body:  'Inter', sans-serif;

  /* ===== LAYOUT / DIMENSÕES ===== */
  --max-w: 1180px;
  --r:     14px;

  /* ===== TRANSIÇÕES ===== */
  --transition: all 0.3s ease;
  --t-premium:  all 500ms ease;
}


/* HEADER */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,6,12,0.92);border-bottom:1px solid rgba(50,177,245,0.08);backdrop-filter:blur(20px);}
.header-inner{max-width:var(--max-w);margin:0 auto;padding:0 24px;height:100px;display:flex;align-items:center;justify-content:space-between}
.logo-img{height:4rem;width:auto}
.logo-is{height:2.6rem;width:auto}
.header-cta{font-family:var(--font-head);font-size:.82rem;font-weight:700;color:var(--bg-light); background: linear-gradient(135deg, #32B1F5, #1a7ab8);padding:10px 20px;border-radius:8px;border: none;transition:var(--t-premium); box-shadow: 0 0 0 0 rgba(50,177,245,0);}
.header-cta:hover{ background: linear-gradient(135deg, #60c6ff, #32B1F5);box-shadow: 0 0 24px rgba(50,177,245,0.4);transform: translateY(-1px);}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
  padding: 5px;
  width: 40px;
  height: 40px;
}

.mobile-menu-btn .bar {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background-color: white;
  transition: var(--transition);
}

.mobile-menu-btn.active .bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.mobile-menu-btn.active .bar:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active .bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.main-nav a {color: var(--bg-light); text-decoration: none; font-size: .85rem;}
.main-nav a:hover {color: var(--blue-glow);}
.main-nav input {color:var(--bg-light); background:var(--dark); border:1px solid var(--grey-mid); border-radius:5px; max-width:125px; padding: 0 7px;}
.main-nav span {margin-right:40px;}
.nav-link {
    color: var(--bg-light);
    font-size: 1.2rem;
    text-decoration: none;
}

.nav-link:hover {color: #3b82f6;}


@media (max-width: 992px) {
  .mobile-menu-btn {
    display: flex;
  }

  .main-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 120px;
    right: -100%;
    background-color: #fff;
    z-index: 1050;
    transition: right 0.4s ease;
    justify-content: center;
    align-items: start;
    gap: 10px;
    margin-right: 0;
    border-radius: 20px 0 0 20px;
    padding: 20px 30px;
  }

  .main-nav span {margin-right:0;}

.main-nav.active {
  right: 0;
  gap: 14px;
  border-left: 1px solid #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  
  .main-nav .nav-link {
    color: var(--silver-hi);
  }
  
  .nav-link {
    font-size: 0.75rem;
    display: block;
  }
  
  .back-link {
    color: #06060C !important;
    font-size: 1rem !important;
  }

  .back-link:hover {color: var(--blue-glow) !important;}
}