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

.header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 999;

  backdrop-filter: blur(10px);
  background: rgba(81, 19, 97, 0.92);

  padding: var(--space-md) var(--space-lg);
}

/* ===========================
   NAV
=========================== */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

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

.menu {
  list-style: none;
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

.menu > li > a,
.menu-btn {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

.menu li a:hover {
  color: var(--amarelo);
}

/* CTA */
.menu .cta {
  background: var(--amarelo);
  color: var(--roxo);
  padding: var(--space-sm) var(--space-md);
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.menu .cta:hover {
  background: #fff;
  color: var(--roxo);
}

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

.icone-canto img {
  width: 32px;
  transform: scale(1.4);
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.icone-canto:hover img {
  transform: scale(1.6);
  filter: invert(77%) sepia(56%) saturate(426%) hue-rotate(6deg)
    brightness(101%) contrast(96%);
}

/* ===========================
   SUBMENU DESKTOP
=========================== */

.has-submenu {
  position: relative;
}

/* submenu oculto */
.has-submenu .submenu {
  position: absolute;
  top: 100%;
  left: 0;

  min-width: 220px;
  background: #fff;

  list-style: none;
  padding: 10px 0;

  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;

  z-index: 999;
}

/* links submenu */
.has-submenu .submenu li a {
  display: block;
  padding: 10px 16px;
  color: var(--roxo);
  font-weight: 500;
}

.has-submenu .submenu li a:hover {
  background: var(--citrino);
}

/* abre no hover desktop */
.has-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ===========================
   MOBILE MENU TOGGLE
=========================== */

.menu-toggle {
  display: none;
  font-size: 28px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}

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

@media (max-width: 768px) {

  .menu-toggle {
    display: block;
  }

  .menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;

    flex-direction: column;

    background: rgba(81, 19, 97, 0.98);
    padding: var(--space-md);
    gap: var(--space-md);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);

    transition: all 0.3s ease;
  }

  .menu.ativo {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* MOBILE SUBMENU (mantido simples por enquanto) */
  .menu li ul {
    position: static;
    background: transparent;
    box-shadow: none;

    max-height: 0;
    overflow: hidden;

    opacity: 1;
    visibility: visible;

    transition: max-height 0.35s ease;
  }

  .menu li.ativo ul {
    max-height: 600px;
  }
}

/* ===========================
   TABLET
=========================== */

@media (min-width: 769px) and (max-width: 1024px) {

  .menu {
    gap: 12px;
  }

  .menu > li > a {
    font-size: 14px;
  }

  .icone-canto img {
    transform: scale(1.2);
  }
}