/* =====================================================
   HEADER (efeito vidro / glass)
===================================================== */
.site-header{
  position: fixed;
  top: 10px;
  width: 96%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 40px;
  z-index: 1000;
  /* background-color: var(--vermelho-escuro); */
  background: rgba(158, 165, 168, 0.385);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(218, 218, 218, 0.18);
  box-shadow: rgba(249, 247, 247, 0.318) 0px 1px 4px;
  transition: background .3s ease;
}

.nav-wrap{
  max-width: 1240px;
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo img{
  height: 56px;
  width: auto;
  display: block;
  filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.536));
  transition: transform .2s ease;
}

.logo:hover img{
  transform: scale(1.05);
}
 
.nav-menu{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.nav-menu > li{ position: relative; }
 
/* cor de destaque usada só no sublinhado do hover */
.nav-menu > li:nth-child(1) .nav-link{ --cor: var(--amarelo); }
.nav-menu > li:nth-child(2) .nav-link{ --cor: var(--verde); }
.nav-menu > li:nth-child(3) .nav-link{ --cor: var(--roxo); }
 
.nav-link{
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--azul-escuro);
  text-shadow: 1px 1px 5px #ffffff7a;
  border-radius: 10px;
  transition: color .25s ease, background .25s ease, transform .2s ease;
}
 
.nav-link::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:4px;
  width:0;
  height:3px;
  border-radius:3px;
  background: var(--cor, var(--amarelo));
  transform: translateX(-50%);
  transition: width .28s ease;
}
 

.nav-link .chevron{
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform .25s ease;
}
li.has-dropdown:hover .chevron{ transform: rotate(225deg); margin-top: 3px; }
 
/* dropdown em vidro tambem */
.dropdown{
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  min-width: 240px;
  background: rgba(2, 61, 81, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(0,0,0,0.25);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
 
li.has-dropdown:hover .dropdown,
li.has-dropdown:focus-within .dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
 
.dropdown li a{
  display: flex;
  align-items:center;
  gap:10px;
  padding: 11px 14px;
  border-radius: 12px;
  font-weight: 700;
  color: var(--branco);
  font-size: .95rem;
  transition: background .2s ease, padding-left .2s ease;
}
.dropdown li:nth-child(1) a .dot{ background: var(--amarelo); }
.dropdown li:nth-child(2) a .dot{ background: var(--verde); }
.dropdown li:nth-child(3) a .dot{ background: var(--roxo); }
.dropdown .dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
 
.dropdown li a:hover{ background: rgba(255,255,255,0.12); padding-left: 18px; }
 
/* Contato = destaque */
.btn-contato{
  background: var(--azul) !important;
  color: var(--branco) !important;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  margin-left: 6px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}
.btn-contato::after{ content:none !important; }
.btn-contato:hover{
  background: var(--azul-escuro) !important;
  transform: translateY(-3px);
  text-shadow:none;
}
 
.nav-toggle{
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span{
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: var(--branco);
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle.active span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity: 0; }
.nav-toggle.active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
 
@media (max-width: 900px){
  .nav-toggle{ display:flex; }

  .nav-menu{
    position: fixed;
    top: calc(10px + var(--nav-h) + 14px);  /* logo abaixo do header, sem cobrir ele */
    left: 50%;
    transform: translateX(-50%) translateY(-16px);
    width: 96%;
    bottom: 10px;                 /* vai até quase o final da tela */
    height: 70vh;

    border-radius: 40px 40px 30px 30px;   /* topo igual ao header, base levemente arredondada */

    border: 1px solid rgba(218, 218, 218, 0.18);
    box-shadow: rgba(249, 247, 247, 0.318) 0px 1px 4px;
    background-color: var(--azul-escuro);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 26px 22px;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
    overflow-y: auto;
    z-index: 999;   /* sempre atrás do header (1000) */
  }
  .nav-menu.open{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .nav-link{ 
    width: 100%; 
    justify-content: space-between; 
    color: #ffffff; 
    text-shadow: 0 0 0;
  }

  .nav-link:hover{ transform:none; }

  /* subtópicos sempre visíveis, um pouco deslocados pra dentro da lista */
  .dropdown{
    position: static;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    /* transform: none; */
    max-height: none;
    overflow: visible;
    background: transparent;
    border: none;
    padding: 4px 0 8px 18px;   /* indentação que mostra que é filho do "Sobre nós" */
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }


  li.has-dropdown:hover .chevron{ transform: none; }
  li.has-dropdown .chevron{ display: none; }

  li.has-dropdown:hover .dropdown,
  li.has-dropdown:focus-within .dropdown{
    transform: none;
  }

  .dropdown li a{
    padding: 10px 14px;
    font-size: .92rem;
    color: var(--branco);
  }

  .btn-contato{ text-align:center; margin: 10px 0 0; }
}