:root {
  --cor-primaria: #C9D7B2;
  --cor-secundaria: #A3B58A;
  --fundo: #FFF6E06B;
  --fundo-secundario: #e1e9d4;
  --cor-terciaria: #8CA479;
}

/* Fonte e fundo */
body {
  font-family: 'Arial', sans-serif;
  background-color: var(--fundo);
  background-repeat: repeat;
  background-position: top left;
  background-attachment: fixed;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Imagem decorativa */
.logo-decorativa {
  position: relative;
  max-width: 200px;
  height: auto;
  border-radius: 60%;
  border: solid 2px var(--cor-primaria);
}

.logo {
  position: relative;
  bottom: 30px;
  left: 0;
}

/* Botões sociais */
.btn-social {
  width: 16rem;
  font-family: 'Quicksand', sans-serif; /* delicada e leve */
  font-weight: 400;
  font-size: 1.05rem; /* um pouco menor */
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  background-color: var(--fundo-secundario);
  color: var(--cor-secundaria);
  border: 1px solid var(--cor-secundaria);
  margin: 0 auto 15px auto;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

/* Hover mantém seu padrão */
.btn-social:hover,
.btn-social:focus {
  transform: translateY(-6px);
  background-color: var(--cor-primaria);
  color: white;
  outline: none;
}

/* Rodapé */
.footer {
  border-top: 1px solid var(--cor-primaria);
  background-color: var(--fundo);
  color: var(--cor-secundaria);
  padding: 1.5rem 0;
  flex-shrink: 0;
}

.footer-link {
  color: var(--cor-terciaria);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.footer-link:hover,
.footer-link:focus {
  color: var(--cor-primaria);
  text-decoration: underline;
  position: relative;
  z-index: 2;
}

/* Espaçamento no main */
main {
  margin-bottom: 3rem;
}

/* Heading padrão, caso precise */
h1 {
  font-size: 2rem;
  font-weight: bold;
  display: none;
}

/* Responsividade para botões menores em telas muito pequenas */
@media (max-width: 400px) {
  .btn-social {
    width: 100%; /* para caber na tela pequena */
    font-size: 1rem;
    padding: 0.6rem;
  }
}

#banner-anim {
  width: 100vw;
  height: 30vh;
  display: flex;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.links {
  position: relative;
  z-index: 1;
  margin-top: -30vh;
}

.icone {
  width: 30px;
  height: 30px;
  background-image: url('heartup.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation: stars 4s linear infinite;
  animation-duration: calc(300s / var(--i));
}

@keyframes stars {
  0% {
      transform: translateY(100vh) scale(0) rotate(0);
      opacity: 1;
  }
  95% {
      transform: translateY(-100vh) scale(1) rotate(360);
      opacity: 1;
  }
  100% {
      transform: translateY(-100vh) scale(1) rotate(360);
      opacity: 0;
  }
}

.mapa-container {
  display: flex;
  justify-content: center;
  align-items: center;
}