/* ================= HEADER GLASS ================= */
.header-glass{
  /* ✅ alturas padrão (antes do topo) */
  --h: 90px;          /* altura normal */
  --h-scrolled: 110px;/* altura maior quando encaixar no topo (DESKTOP) */

  position:fixed;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  width:90%;
  height: var(--h);
  z-index:999;

  background:rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  border-radius:20px;

  /* ✅ sem transição no primeiro paint (evita bug F5) */
  transition:none;
}

/* ✅ libera transições só depois do JS marcar como pronto */
.header-glass.is-ready{
  transition:
    top .5s cubic-bezier(.22,.61,.36,1),
    width .5s cubic-bezier(.22,.61,.36,1),
    height .5s cubic-bezier(.22,.61,.36,1),
    background .5s cubic-bezier(.22,.61,.36,1),
    box-shadow .5s cubic-bezier(.22,.61,.36,1),
    border-radius .5s cubic-bezier(.22,.61,.36,1);
}

/* ================= HEADER NO SCROLL (encaixou no topo) ================= */
.header-glass.scrolled{
  top:0;
  width:100%;
  height: var(--h-scrolled);
  border-radius:0;

  background:#092D69;
  backdrop-filter:none;
  box-shadow:0 15px 40px rgba(0,0,0,.35);
}

/* ================= CONTEÚDO INTERNO ================= */
.header-inner{
  height:100%;
  width:100%;
  max-width:100%;
  margin:0 auto;

  display:grid;
  grid-template-columns:auto 1fr auto auto; /* + toggle */
  align-items:center;

  padding:0 48px;

  /* ✅ sem transição no primeiro paint */
  transition:none;
}

.header-glass.is-ready .header-inner{
  transition:
    max-width .5s cubic-bezier(.22,.61,.36,1),
    padding .5s cubic-bezier(.22,.61,.36,1);
}

/* SOMENTE O CONTEÚDO ENCOLHE NO SCROLL */
.header-glass.scrolled .header-inner{
  max-width:90%;
  padding:0;
}

/* ================= LOGO ================= */
.logo{ display:flex; align-items:center; }

.logo img{
  height:66px;
  width:auto;
  max-width:210px;
  object-fit:contain;

  transition:
    height .6s cubic-bezier(.22,.61,.36,1),
    transform .6s cubic-bezier(.22,.61,.36,1),
    filter .6s cubic-bezier(.22,.61,.36,1);
}

/* LOGO AUMENTA NO SCROLL */
.header-glass.scrolled .logo img{
  height:84px; /* ✅ acompanha header mais alto */
  transform:translateY(2px);
  filter:drop-shadow(0 6px 18px rgba(72,197,243,.25));
}

/* ================= NAV DESKTOP ================= */
.nav-main{
  display:flex;
  justify-content:center;
  gap:36px;
}

.nav-main a{
  color:#fff;
  text-decoration:none;
  font-weight:500;
  position:relative;
}

.nav-main a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#48C5F3;
  transition:width .3s ease;
}

.nav-main a:hover::after{ width:100%; }

/* ================= CTA DESKTOP ================= */
.header-cta{
  background:#48C5F3;
  color:#092D69;
  padding:14px 26px;
  border-radius:40px;
  font-weight:700;
  text-decoration:none;

  display:flex;
  align-items:center;
  gap:10px;

  transition: box-shadow .3s ease, transform .2s ease;
}

.header-cta:hover{
  box-shadow:0 10px 25px rgba(72,197,243,.45);
  transform: translateY(-1px);
}

/* ================= HAMBURGER ================= */
.nav-toggle{
  display:none;
  justify-self:end;
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  border-radius:14px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  transition: transform .2s ease, background .25s ease, border-color .25s ease;
}

.nav-toggle:hover{
  background:rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.32);
}
.nav-toggle:active{ transform: scale(.98); }

.nav-toggle-lines{
  width:20px;
  height:2px;
  background:#fff;
  position:relative;
  display:block;
  border-radius:2px;
}

.nav-toggle-lines::before,
.nav-toggle-lines::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition: transform .22s ease, top .22s ease;
}

.nav-toggle-lines::before{ top:-6px; }
.nav-toggle-lines::after{ top:6px; }

/* vira X no próprio hamburguer quando aberto */
.header-glass.menu-open .nav-toggle-lines{ background:transparent; }
.header-glass.menu-open .nav-toggle-lines::before{ top:0; transform:rotate(45deg); }
.header-glass.menu-open .nav-toggle-lines::after{ top:0; transform:rotate(-45deg); }

/* ================= MOBILE DROPDOWN ================= */
.mobile-dropdown{
  position:fixed;
  left:50%;
  transform:translateX(-50%) translateY(-10px) scaleY(.96);
  transform-origin: top;

  width:90%;
  z-index:1000;

  /* ✅ usa a altura do header via var */
  top: calc(24px + var(--h) + 12px);

  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease, transform .22s ease;
}

/* quando header encosta no topo */
.header-glass.scrolled .mobile-dropdown{
  top: calc(0px + var(--h-scrolled) + 12px);
}

/* abrir: expande de cima pra baixo */
.header-glass.menu-open .mobile-dropdown{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0) scaleY(1);
}

.mobile-dropdown-inner{
  background:#ffffff;
  border-radius:18px;
  box-shadow: 0 22px 60px rgba(0,0,0,.32);
  overflow:hidden;
  border: 1px solid rgba(9,45,105,.10);
}

.mobile-dropdown-head{
  padding:14px 16px 10px;
  border-bottom: 1px solid rgba(9,45,105,.10);
}

.mobile-dropdown-title{
  display:block;
  color:#092D69;
  font-weight:900;
  letter-spacing:.2px;
  font-size:18px;
}

.mobile-nav{
  display:flex;
  flex-direction:column;
  padding:12px;
  gap:10px;
}

.mobile-nav a{
  color:#092D69;
  text-decoration:none;
  font-weight:800;
  padding:14px 14px;
  border-radius:14px;
  background: rgba(9,45,105,.04);
  border: 1px solid rgba(9,45,105,.10);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.mobile-nav a:hover{
  background: rgba(72,197,243,.14);
  border-color: rgba(72,197,243,.38);
  transform: translateX(2px);
}

.mobile-cta{
  margin: 12px;
  background:#48C5F3;
  color:#092D69;
  padding:16px 16px;
  border-radius:16px;
  font-weight:900;
  text-decoration:none;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  box-shadow:0 14px 30px rgba(72,197,243,.22);
  transition: transform .2s ease, box-shadow .25s ease;
}

.mobile-cta:hover{
  box-shadow:0 16px 35px rgba(72,197,243,.35);
  transform: translateY(-1px);
}

/* ================= RESPONSIVO ================= */
@media (max-width: 900px){

  /* ✅ alturas mobile */
  .header-glass{
    --h: 86px;
    --h-scrolled: 104px; /* ✅ maior no topo (MOBILE) */
  }

  .header-inner{
    padding: 0 18px;
    grid-template-columns:auto 1fr auto;
    gap: 12px;
  }

  .nav-main{ display:none; }
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }

  .logo img{ height:58px; max-width:180px; }

  /* ✅ logo maior quando scrolled mobile */
  .header-glass.scrolled .logo img{
    height:74px;
  }

  .mobile-dropdown{
    width:94%;
    top: calc(14px + var(--h) + 12px);
  }

  .header-glass.scrolled .mobile-dropdown{
    top: calc(0px + var(--h-scrolled) + 12px);
  }
}

@media (max-width: 480px){
  .header-glass{
    top:14px;
    width:94%;
    border-radius:18px;

    /* ✅ micro ajuste alturas em telas pequenas */
    --h: 84px;
    --h-scrolled: 102px;
  }

  .header-inner{ padding: 0 14px; }
  .logo img{ height:54px; max-width:160px; }

  .header-glass.scrolled .logo img{
    height:70px;
  }

  .mobile-dropdown{ width:94%; }
}