@import url("https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&family=Pixelify+Sans:wght@400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bytesized&family=Comic+Relief:wght@400;700&family=Pixelify+Sans:wght@400..700&display=swap");
:root{

  /* ===== BASE AZUL (PALETA ATUAL) ===== */
  --blue-100: #AAB6FF;
  --blue-200: #8FA0FF;
  --blue-300: #7F8CFF;
  --blue-400: #588FD5;
  --blue-500: #535DFC;
  --blue-600: #2D51FB;
  --blue-700: #276DC5;
  --blue-800: #20219D;
  --blue-900: #15167A;

  /* ===== TEXTO ===== */
  --text-main: #FFF27E;
  --text-soft: #E9E8A8;

}

/* ===== TRANSIÇÕES ===== */
main {
  padding: 1rem;
  transition: margin-left 0.3s ease;
}

.inicio .bloco_menu {
  position: fixed;
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.menu-lateral {
  position: fixed;
  top: 0;
  left: 0;
  width: 15rem;
  height: 100vh;
  display: flex;
  flex-direction: row;
  transition: width 0.3s ease;
  z-index: 1000;
}

.menu-lateral.retraido {
  width: 1rem;
  overflow: hidden;
  box-shadow: none;
  background-color: transparent;
}

/* ===== FAIXA LATERAL ===== */
.faixa {
  position: fixed;
  top: 0;
  left: 0;
  width: 3rem;
  height: 100vh;

  background: linear-gradient(
    180deg,
    rgba(83,93,252,0.85),
    rgba(45,81,251,0.85)
  );

  backdrop-filter: blur(8px);

  box-shadow:
    inset 2px 4px 0px var(--blue-300),
    inset 0px -4px 0px var(--blue-800);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
}

/* ===== BOTÃO TOGGLE ===== */
.btns-faixa {
  display: flex;
  flex-direction: column;
  margin: 0.5rem;
  gap: 0.5rem;
}

#toggleMenu,
#selectIdioma,
#selectDinheirinho {

  background-color: rgba(45,81,251,0.85);
  color: var(--text-soft);

  backdrop-filter: blur(6px);

  box-shadow:
    inset 2px 2px 0px var(--blue-300),
    inset -2px -2px 0px var(--blue-800),
    2px 2px 0px var(--blue-800);
}

#toggleMenu:hover,
#selectIdioma:hover,
#selectDinheirinho:hover {
  background-color: rgba(83,93,252,0.95);
}

#toggleMenu {
  display: flex;
  position: relative;
  padding-left: 8px;
  width: 2.4rem;
  height: 2.4rem;
  font-family: "Bytesized", sans-serif;
  font-size: 1.5rem;
  text-align: center;
  line-height: 3rem;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 1100;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

#toggleMenu:hover {
  background-color: var(--blue-400);
  transform: scale(1.05);
}

/* Dropdown idioma abaixo do toggle menu */
.idioma-dropdown {
  position: relative;
  display: flex;
  z-index: 1100;
}

#selectIdioma {
  width: 2.4rem;
  height: 2.4rem;
  font-family: "Pixelify Sans", sans-serif;
  font-size: 1rem;
  border: none;
  appearance: none; 
  cursor: pointer;
  text-align: center;
}

#selectIdioma:hover {
  background-color: var(--blue-400);
  transform: scale(1.05);
}

/* ===== SELECT DINHEIRINHO ===== */
#selectDinheirinho {
  width: 2.4rem;
  height: 2.4rem;
  font-family: "Pixelify Sans", sans-serif;
  font-size: 1rem;
  border: none;
  appearance: none; 
  cursor: pointer;
  text-align: center;
}

#selectDinheirinho:hover {
  background-color: var(--blue-400);
  transform: scale(1.05);
}

select:focus {
  outline: none;
}

.menu-chuva {
  font-family: "Bytesized", sans-serif;
  color: var(--text-soft);
  font-size: 2rem;
  letter-spacing: 1rem;
  transform: rotate(-90deg);
  transform-origin: center;
  padding: 4.5rem;
  transition: color 0.3s ease;
}

/* ===== ÁREA DE BOTÕES ===== */
.menu-btns {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  margin-left: 3rem;
  transition: background-color 0.3s ease;
  background: linear-gradient(
    180deg,
    rgba(45,81,251,0.9),
    rgba(32,33,157,0.95)
  );
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0px 3px 0px var(--blue-200),
    inset -3px -3px 0px var(--blue-900);
}

.menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(83,93,252,0.85),
    rgba(45,81,251,0.85)
  );

  backdrop-filter: blur(8px);

  box-shadow:
    inset 0px 4px 0px var(--blue-300),
    inset 0px -4px 0px var(--blue-800);
}

/* ===== TÍTULO MENU ===== */
.menu-title {
  font-family: "Pixelify Sans", sans-serif;
  color: var(--text-soft);
  font-size: 1.6rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}

/* ===== BOTÕES MENU ===== */
.menu-btn {
  width: 100%;
  padding: 20px 20px 20px 30px;
  background-color: transparent;
  border: none;
  color: var(--text-main);
  font-family: "Pixelify Sans", sans-serif;
  font-size: 1.5rem;
  align-items: stretch;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.3s ease, padding-left 0.3s ease;
}

.menu-btn:hover {
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.25) 95%,
    transparent 20%
  );
}

/* ===== INFO MENU (RODAPÉ) ===== */
.menu-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem;
  background: linear-gradient(
    180deg,
    rgba(83,93,252,0.9),
    rgba(45,81,251,0.9)
  );

  backdrop-filter: blur(8px);

  box-shadow:
    inset 0px 3px 0px var(--blue-100),
    inset -3px -3px 0px var(--blue-800);
}

.menu-instagram {
  font-family: "Pixelify Sans", sans-serif;
  color: var(--text-main);
  font-size: 1.5rem;
  letter-spacing: 0.3rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.menu-instagram:hover {
  color: var(--blue-100);
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .faixa {
    width: 100%;
    height: 3rem;
    flex-direction: row;
    align-items: center;
  }

  .menu-chuva {
    transform: none;
    margin-top: 1rem;
    font-size: 2rem;
    letter-spacing: 1rem;
  }

  .btns-faixa {
    flex-direction: row;
    margin: 1rem;
    margin-top: 2rem;
    margin-left: 0.5rem;
  }

  #toggleMenu {
    width: 2rem;
    height: 2rem;
    padding-top: 0.3rem;
    font-size: 1.2rem;
    line-height: 2rem;
  }

  #selectIdioma,#selectDinheirinho {
    width: 2.5rem;
    height: 2rem;
    padding-top: 0;
    font-size: 1rem;
    line-height: 2rem;
  }

  .menu-lateral {
    top: 3rem;
    width: 15rem;
    height: calc(100vh - 3rem);
  }

  .menu-btns {
    margin-left: 0;
    padding-left: 0;
  }

  .menu-info {
    padding-top: 5rem;
    padding-bottom: 8rem;
  }

  .menu-lateral.retraido {
    width: 0;
    background-color: var(--blue-400);
  }
}