/* NAV MOBILE */
#navegacaoMobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* Ícone hamburguer */
.menu-container {
  position: relative;
}

.menu-icon {
  width: 28px;
  height: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1001;
}

.menu-icon span {
  height: 3px;
  width: 100%;
  background: #a30d24;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}

/* Animação do ícone -> X */
.menu-icon.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-icon.active span:nth-child(2) {
  opacity: 0;
}

.menu-icon.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Menu dropdown */
.menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  /* aumenta a largura */
  background-color: #a30d24;
  border-radius: 8px;
  padding: 8px 0;
  /* dá espaço dentro do container */
  z-index: 1000;

  opacity: 0;
  visibility: hidden;
  transform: scaleY(0);
  transform-origin: top;
  transition: all 0.3s ease-in-out;
}

.menu.show {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}

.menu a {
  display: block;
  /* ocupa linha toda */
  color: white;
  margin: 0;
  padding: 10px 16px;
  /* espaço interno nas laterais */
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  text-align: left;
  /* alinha à esquerda */
  border-radius: 6px;
  /* arredonda fundo ao passar o mouse */
  transition: background 0.2s;
}

.menu a:hover {
  background: rgb(92, 25, 23);
}

/*=======================*/

/* HEADER E NAV */

#cabecalho {
  width: 100%;
  z-index: 1001;
  background-color: #f8f9fa;

  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
  position: fixed;
  padding: 0;
  top: 0; /* fica fixo no topo */

  transition: background-color 0.5s ease, backdrop-filter 0.5s ease,
    box-shadow 0.5s ease;
}

#nav {
  width: 100%;
  max-width: 3000px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#navegacao {
  display: flex;
}

#navegacao ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  gap: 2rem;
}

#navegacao li {
  padding: 0.5rem 0;
}

#navegacao a {
  position: relative;
  font-size: 1.2rem;
  font-weight: 600;
  color: #a30d24;
  text-decoration: none;
  transition: color 0.4s ease;
  padding: 0px 15px;
  z-index: 1;
  overflow: hidden;
  margin: 0;
}

#navegacao a::after {
  content: "";
  position: absolute;
  /* 1. A largura já começa em 100% */
  width: 100%;
  height: 2px;
  background: #a30d24;

  /* Posicionamento preciso embaixo do link */
  bottom: 0;
  left: 0;

  /* 2. Começa invisível, escalonado para 0 a partir do centro */
  transform: scaleX(0);
  transform-origin: center;

  /* 3. A transição agora acontece na propriedade transform */
  transition: transform 0.4s ease;
  -webkit-transition: transform 0.4s ease;
}

#navegacao a:hover::after {
  /* 4. No hover, a linha volta à sua escala normal (100%) */
  transform: scaleX(1);
}

#navegacao ul {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
}

#Logo-div {
  width: 9.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#cabecalho,
#nav {
  height: 80px;
  overflow: visible;
}

.logo {
  width: 100%;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.logo img {
  height: 50px;
  max-height: 70px;
}

/* Container for the buttons */
.btn-nav {
  display: flex; /* Aligns items in a row */
  justify-content: center; /* Horizontally centers the buttons */
  align-items: center; /* Vertically aligns them */
  gap: 0.5rem; /* Creates space between the buttons (e.g., 16px) */
}

/* Styling for each circular button link */
.btn-nav-link {
  display: flex; /* Enables centering of the icon inside */
  justify-content: center;
  align-items: center;
  width: 40px; /* Sets a fixed width */
  height: 40px; /* Sets a fixed height */
  border: 1.5px solid #d4203c; /* Creates the white outline */
  border-radius: 50%; /* This makes the element a perfect circle */
  text-decoration: none; /* Removes the default link underline */
  background-color: #d4203c;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Styling for the icon image inside the button */
.btn-nav-link img {
  width: 35px; /* Adjust the size of the icon */
  height: 35px;
}

/* Hover effect for the buttons */
.btn-nav-link:hover {
  background-color: #a30d24; /* Slight background color on hover */
  transform: scale(1.1); /* Slightly enlarges the button on hover */
}

/* --- Responsive Design --- */
/* For screens smaller than 600px (like mobile phones) */
@media (max-width: 600px) {
  .btn-nav-link {
    width: 30px; /* Decrease button size */
    height: 30px;
  }

  .btn-nav-link img {
    width: 25px; /* Decrease icon size proportionally */
    height: 25px;
  }
}

/* ================= */