/* Estilos compartilhados do menu/header (desktop + mobile) */

/* Permite tooltips e elementos do menu ultrapassarem sem aumentar altura */
.menu-overflow { overflow: visible; }

/* Botão MENU (versão mobile, escopo apenas no header) */
header .btn {
  position: relative;
  width: 150px;
  height: 40px;
  border-radius: 5px;
  border: none;
  transition: all 0.5s ease-in-out;
  font-size: 20px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: 600;
  background: linear-gradient(90deg, #d37d1a, #ffb300);
  color: #ffffff;
}
header .btn:hover { box-shadow: 0 0 20px 0px #3030303a; }
header .btn .icon {
  position: absolute;
  height: 40px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
}
header .btn .text { transform: translateX(55px); }
header .btn:hover .icon { width: 175px; }
header .btn:hover .text { transition: all 0.5s; opacity: 0; }
header .btn:focus { outline: none; }
header .btn:active .icon { transform: scale(0.85); }

/* Nav highlight bar (desktop e vertical no drawer) */
.nav-wrap {
  --p-x: 8px;
  --p-y: 4px;
  --round: 10px;
  display: flex;
  align-items: center;
  position: relative;
  padding: 4px;
  gap: 0;
}
.nav-wrap .nav-item {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  min-width: 80px;
  color: var(--nav-text, #374151);
  text-decoration: none;
  font-weight: 500;
  border-radius: 8px;
  transition: color .22s ease, transform .15s ease;
}
.nav-wrap .nav-item:hover { color: #b45309; transform: translateY(-2px); }
.nav-wrap .nav-item.active { color: #b45309; }
.nav-wrap .slidebar {
  position: absolute;
  top: 6px;
  left: 0;
  height: calc(100% - 12px);
  width: 100px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #f59e0b, #f97316);
  opacity: .10;
  transform: translateX(0);
  transition: transform .45s cubic-bezier(.33, .83, .99, .98), width .28s ease, opacity .25s ease, height .28s ease;
  z-index: 1;
}

/* Social icons no header */
header .header-socials .wrapper {
  display: inline-flex;
  list-style: none;
  height: auto;
  width: auto;
  padding-top: 0;
  padding-bottom: 0;
  font-family: "Poppins", sans-serif;
  justify-content: center;
}
header .header-socials .wrapper .icon {
  position: relative;
  background: #fff;
  border-radius: 50%;
  margin: 6px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  overflow: visible;
  color: #111;
}
header .header-socials .wrapper .icon a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: inherit;
  overflow: visible !important;
}
header .header-socials .wrapper .icon svg { width: 18px; height: 18px; color: inherit; }
header .header-socials .wrapper .icon .tooltip {
  position: absolute;
  top: calc(100% + 14px);
  font-size: 12px;
  background: #111;
  color: #fff;
  padding: 6px 9px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: top 0.34s cubic-bezier(0.22, 1, 0.36, 1) 0.12s, opacity 0.26s ease 0.12s !important;
  transform: translateY(0);
  z-index: 9999;
}
header .header-socials .wrapper .icon .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #111;
  top: -6px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: opacity 0.22s ease 0s !important;
  opacity: 0;
}
header .header-socials .wrapper .icon:hover .tooltip { opacity: 1 !important; top: calc(100% + 8px) !important; pointer-events: auto !important; }
header .header-socials .wrapper .icon:hover .tooltip::before { opacity: 1 !important; transition-delay: 0.16s !important; }
header .header-socials .wrapper .facebook:hover,
header .header-socials .wrapper .facebook:hover .tooltip,
header .header-socials .wrapper .facebook:hover .tooltip::before { background: #1877f2; color: #fff; }
header .header-socials .wrapper .youtube:hover,
header .header-socials .wrapper .youtube:hover .tooltip,
header .header-socials .wrapper .youtube:hover .tooltip::before { background: #ff0000; color: #fff; }
header .header-socials .wrapper .instagram:hover,
header .header-socials .wrapper .instagram:hover .tooltip,
header .header-socials .wrapper .instagram:hover .tooltip::before { background: linear-gradient(45deg, #f58529 0%, #dd2a7b 50%, #8134af 100%); color: #fff; }

/* Pontos flutuantes (usados no botão Contribuir) */
.points_wrapper { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; pointer-events: none; overflow: visible; }
.points_wrapper .point {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.98), rgba(255,255,255,0.85) 70%, rgba(255,255,255,0) 100%);
  box-shadow: 0 0 8px rgba(255,255,255,0.7);
  animation: floating-points 2.2s linear infinite;
}
@keyframes floating-points {
  0% { transform: translateY(0); }
  85% { opacity: 0; }
  100% { transform: translateY(-40px); opacity: 0; }
}
.points_wrapper .point:nth-child(1){ left:10%; opacity:1; animation-duration:2.35s; animation-delay:0.2s; }
.points_wrapper .point:nth-child(2){ left:30%; opacity:.7; animation-duration:2.5s; animation-delay:0.5s; }
.points_wrapper .point:nth-child(3){ left:25%; opacity:.8; animation-duration:2.2s; animation-delay:0.1s; }
.points_wrapper .point:nth-child(4){ left:44%; opacity:.6; animation-duration:2.05s; }
.points_wrapper .point:nth-child(5){ left:50%; opacity:1; animation-duration:1.9s; }
.points_wrapper .point:nth-child(6){ left:75%; opacity:.5; animation-duration:1.5s; animation-delay:1.5s; }
.points_wrapper .point:nth-child(7){ left:88%; opacity:.9; animation-duration:2.2s; animation-delay:0.2s; }
.points_wrapper .point:nth-child(8){ left:58%; opacity:.8; animation-duration:2.25s; animation-delay:0.2s; }
.points_wrapper .point:nth-child(9){ left:98%; opacity:.6; animation-duration:2.6s; animation-delay:0.1s; }
.points_wrapper .point:nth-child(10){ left:65%; opacity:1; animation-duration:2.5s; animation-delay:0.2s; }

/* Ajustes do drawer mobile */
@media (max-width: 767px) {
  /* No mobile exibimos o botão e aplicamos o layout flex;
    em telas maiores o Tailwind (md:hidden) oculta o botão */
  header .btn { display: flex; align-items: center; }
  #drawerPanel { position: absolute; left: auto; right: auto; max-width: calc(100% - 24px); }
  .nav-wrap.vertical { width: 220px; max-width: 100%; }
  .nav-wrap.vertical .nav-item { padding: 10px 12px; }
  .nav-wrap.vertical .slidebar { left: 6px; width: calc(100% - 12px); border-radius: 12px; }
}